diff --git a/.claude/skills/ui-architect/SKILL.md b/.claude/skills/ui-architect/SKILL.md
index ed3e38f532..5d804df2a3 100644
--- a/.claude/skills/ui-architect/SKILL.md
+++ b/.claude/skills/ui-architect/SKILL.md
@@ -4,15 +4,19 @@ description: >-
   Authoring guardrails for building ANY new frontend UI in the OpenObserve web
   app (web/) — new views, pages, panels, dialogs, feature components, or edits
   to existing ones. Enforce six house rules the moment you write Vue/template
-  markup: (1) use AppPageHeader for every page/module header, (2) build UI from
-  O2 library components in web/src/lib — never raw Quasar or bare HTML controls
-  when an O2 equivalent exists, (3) no hardcoded px anywhere — including inside
+  markup: (1) use OPageHeader for every page/module header, (2) build UI from
+  O2 library components in web/src/lib — never bare HTML controls when an O2
+  equivalent exists, (3) no hardcoded px anywhere — including inside
   Tailwind class arbitrary values ([320px]) — size with rem/%/vh/vw or Tailwind's
-  rem-based scale, (4) no scoped-CSS blocks and no inline style="", (5) never
-  hardcode colors/sizes — use the modern registered --color-* design tokens and
-  register a new --color-* token if one is missing; the legacy --o2-* token
-  vocabulary is BANNED (never write var(--o2-*), never define one, never add a
-  .body--dark block — migrate any --o2-* you touch to its --color-* equivalent),
+  rem-based scale, and corner radius uses only the two-tier scale rounded-default
+  (4px controls) / rounded-surface (12px surfaces) / rounded-full — never
+  rounded-[..] or the retired rounded-sm/md/lg/xl, (4) no scoped-CSS blocks and no
+  inline style="", (5) never hardcode colors/sizes and never reach a token by raw
+  var() in a component — use the modern registered --color-* design tokens through
+  their utility class (bg-x/text-x), register a new --color-* token if one is
+  missing; the legacy --o2-* token vocabulary is BANNED (never write var(--o2-*),
+  never define one, never add a .body--dark block — migrate any --o2-* you touch to
+  its --color-* equivalent); all of this is CI-enforced and fails the build,
   (6) no hardcoded user-facing text — every label, title, placeholder, and
   message comes from i18n (useI18n t()) with keys added to
   web/src/locales/languages/en-US.json. It also settles the recurring
@@ -33,7 +37,7 @@ description: >-
   hover-flyout — how to register its route, and how to gate it for cloud /
   enterprise / RBAC — even if they don't mention
   these rules by name. If you are
-  about to type <template>, q-page, a page title, a hex color, a px value, or
+  about to type <template>, a page title, a hex color, a px value, or
   <style scoped>, this skill applies.
 ---
 
@@ -61,29 +65,80 @@ The always-true laws. Each is stated here in brief; the full **what / why / how
 code** for all six is in [references/house-rules.md](references/house-rules.md) —
 read it once, it is the backbone of everything below.
 
-1. **Every page/module header is `AppPageHeader`** — never a hand-rolled
+1. **Every page/module header is `OPageHeader`** — never a hand-rolled
    `<div class="header">…<h1>` or a `q-toolbar`. One header contract keeps the
    title in the same place across list → detail → edit.
-2. **Build from O2 components in `web/src/lib`** — never a Quasar primitive
-   (`q-btn`, `q-input`, `q-select`, `q-table`, …) or a bare HTML control
-   (`<button>`, `<input>`) when an `O*` equivalent exists. Drive them by **intent**
+2. **Build from O2 components in `web/src/lib`** — never a bare HTML control
+   (`<button>`, `<input>`) or a third-party UI primitive when an `O*` equivalent
+   exists. Drive them by **intent**
    (`variant` / `size` / state), never by appearance overrides.
 3. **No hardcoded `px`** — size with `rem` / `%` / `vh` / `vw`, or Tailwind's
    rem-based scale. This applies **inside class arbitrary values too** (`w-[320px]`,
    `text-[13px]`, `gap-[6px]` are all banned — convert to `rem`). The only allowed
    `px` is a `1px` hairline border/divider.
+   - **Font size — never `text-[..px/rem]`; pick the type-scale utility by role:**
+
+     | Utility | px | Use for |
+     |---|---|---|
+     | `text-3xs` | 10 | chart axis micro-labels, dense table sub-text (charts only) |
+     | `text-2xs` | 11 | tiny labels, chips, badge text |
+     | `text-xs` | 12 | captions, metadata, timestamps |
+     | `text-compact` | 13 | dense body / data tables |
+     | `text-sm` | 14 | **default body text** (start here) |
+     | `text-base` | 16 | comfortable body, form inputs |
+     | `text-lg` | 18 | card / panel titles |
+     | `text-xl` | 20 | section headings |
+     | `text-2xl` | 24 | page / modal titles |
+     | `text-3xl` | 30 | hero numbers / large display |
+     | `text-4xl` | 36 | display |
+
+     Default to `text-sm` for body. Go smaller only for genuinely dense/secondary UI,
+     larger only for titles. If a design needs a size not on the scale, snap to the
+     nearest step — do **not** reintroduce an arbitrary `text-[..]`.
+   - **Corner radius — exactly two tiers + circle, never an arbitrary value:**
+     `rounded-default` (**4px** — controls: buttons, inputs, chips, small icon
+     buttons), `rounded-surface` (**12px** — surfaces: dialogs, drawers, cards,
+     panels, the app-shell content area), `rounded-full` (pills / avatars / dots).
+     Per-corner variants use the same names (`rounded-t-surface`, `rounded-s-default`).
+     **Banned:** bare `rounded`, arbitrary `rounded-[10px]`, and the retired
+     `rounded-{sm,md,lg,xl}` / `var(--radius-{sm,md,lg,xl})` (deleted — they were
+     five names for one value). Pick the tier by role, not by eye.
 4. **No `<style scoped>` and no inline `style=""`** — style with **bare** Tailwind
-   utilities (no `tw:` prefix — it was removed; no Quasar `q-*` utilities — not
-   available). Form-field spacing is `class="flex flex-col gap-5"` on `<OForm>`;
+   utilities (no `tw:` prefix — it was removed). Form-field spacing is
+   `class="flex flex-col gap-5"` on `<OForm>`;
    omit it and fields render cramped with no spacing (the #1 "dialog looks broken"
    bug).
-5. **No literal colors or sizes** — use the registered `--color-*` design tokens
-   (token-backed utilities like `bg-surface-base` / `text-text-secondary`, or
-   `var(--color-*)`); register a new `--color-*` if one is missing. The legacy
-   **`--o2-*` vocabulary is BANNED** — never `var(--o2-*)`, never a new `--o2-*`,
-   never a `.body--dark` block; migrate any `--o2-*` you touch. Token files are
-   maintained on the tokens branch — see
-   [references/design-tokens.md](references/design-tokens.md).
+5. **No literal colors or sizes — reach every value through a registered token,
+   via its utility class.** Colour comes from a `--color-*` token's **token-backed
+   utility** (`bg-surface-base`, `text-text-secondary`, `border-border-default`) —
+   **not** a raw `var(--color-*)` in a `.vue` template/`<style>` block. A raw
+   `var()` in a component is a counted bypass (`rawVarInComponent`) and is allowed
+   **only** in the sanctioned residue: `:deep()`, `@keyframes`, `color-mix()`,
+   `calc()`, SVG `fill`/`stroke`, and `v-html`/JS-generated markup. If a token has
+   no utility, register it (`@theme inline`) rather than reaching for `var()`.
+   **One knob per decision:** reuse an existing token before minting one, and never
+   add a second name for a value that already has one — an alias is a decision made
+   twice that silently splits adoption. The legacy **`--o2-*` vocabulary is
+   BANNED** — never `var(--o2-*)`, never a new `--o2-*`, never a `.body--dark`
+   block; migrate any `--o2-*` you touch. Raw Tailwind palette (`bg-gray-400`,
+   `text-red-500`) does not even compile (`palette-reset.css`), and British
+   `grey-*`/`primary-*` primitives in feature code are a ratcheted bypass
+   (`rawProjectRamp`) — use a semantic token (`text-text-secondary`, `bg-accent`),
+   not the ramp. See [references/design-tokens.md](references/design-tokens.md).
+
+   > **All of §3–§5 are CI-enforced and FAIL the build** — `lint:design:strict`
+   > (hardcoded hex/px, arbitrary radius, retired aliases, raw palette/ramp, raw
+   > `var()`, un-justified `<style>`, literal font stacks), `lint:tokens`,
+   > `lint:token-purity`, and `lint:styles` (stylelint) run on every PR. The strict
+   > ratchet leaves **no headroom**: a bypass count can only shrink, so new
+   > raw-token usage fails even in a file that still carries old debt. The
+   > counters scan **raw text, comments included** — a `16px` or `#fff` in a
+   > `<style>`-block comment, or a banned class quoted verbatim in a template/JS
+   > comment, counts as debt; word comments in rem/plain English instead. Fix the
+   > cause; don't try to raise the baseline. The flip side: a PR that *reduces*
+   > debt fails strict mode with "baseline is STALE" until you lock the win in —
+   > `cd web && node scripts/check-design-consistency.mjs --baseline` and commit
+   > the tightened `scripts/design-debt-baseline.json` with your change.
 6. **No hardcoded user-facing text** — every label, title, placeholder, tooltip,
    empty-state, toast, and validation message comes from `useI18n()`'s `t()`, with
    keys added to `web/src/locales/languages/en-US.json` (other locales follow from
@@ -99,15 +154,17 @@ and each domain has its own reference below.
 
 | Decision | The rule | Detail |
 | --- | --- | --- |
-| **Tabular data** | `OTable` + `OTableColumnDef[]` (never `q-table`); client-side pagination unless the backend paginates a set too large to fetch whole | [core-controls-table](references/core-controls-table.md) |
-| **Whole-page layout** | `AppPageHeader` on top; a listing page is full-bleed — `flex flex-col h-full p-0`, header owns the padding, table runs flush. `p-6`/`gap-6` only for form/detail views | [page-recipes](references/page-recipes.md) |
+| **Tabular data** | `OTable` + `OTableColumnDef[]`; client-side pagination unless the backend paginates a set too large to fetch whole | [core-controls-table](references/core-controls-table.md) |
+| **Whole-page layout** | **Every routed view is a `OPageLayout`.** It's the ONE page component — it owns the full-height column, the header (from `:title`/`:icon`/`:subtitle`/`:back` props + `#actions`/`#header-tabs`), an optional `#subnav` strip, an optional `#sidebar` rail (fixed or `resizable`), and the body's inset. You plug in data; there's no place to hand-roll a padded `<div>`. Body is inset to the page-edge grid by default — pass **`bleed`** for a full-bleed body (an `OTable`, a chart, a `router-view` shell), or **`constrained`** for a centered reading column (forms). The `#header` slot is a rare escape hatch only. | [page-recipes](references/page-recipes.md) |
+| **Content inset** | `OPageLayout` already insets the body. Anywhere else (a panel, a dialog section, one tab's content) wrap it in **`OContent`** (bakes the one `px-page-edge` grid line, the primitive `OPageLayout` uses internally) instead of hand-picking `px-2`/`px-4`/`p-2.5`; pass `bleed` (or `bleed-x`/`bleed-y`) for full-bleed content that owns its own edge — same escape-hatch idea as `ODrawer`/`ODialog` `bleed`. Never hand-roll a content inset. | [conventions](references/conventions.md) |
+| **Tab strips** | an `OTabs` strip needs **no** horizontal wrapper padding — the first tab's label self-aligns to the `px-page-edge` grid, so it lines up with the `OContent` body below it. Put the strip's bottom divider on the strip (`border-b`) and give it no `px-*`; wrapping a tab strip in `px-page-edge` double-insets the labels. | [conventions](references/conventions.md) |
 | **Listing toolbar** | every list carries three affordances — search + filters (`#toolbar`), refresh (`#toolbar-trailing`), and the auto-injected column-visibility toggle; empty state is one `OEmptyState` with `:filtered` | [page-recipes](references/page-recipes.md) |
 | **Data fetching** | view → domain service (`src/services`, via the `http.ts` wrapper) → Vuex (shared/cached) or local `ref` (ephemeral); never call `http`/axios from a component | [conventions](references/conventions.md) |
-| **Form container** | confirm → `ConfirmDialog`; short form → `ODialog`; tall or contextual form → `ODrawer`; primary multi-section flow → a full in-page view. Never `q-dialog`/`q-drawer` | [conventions](references/conventions.md) |
+| **Form container** | confirm → `ConfirmDialog`; short form → `ODialog`; tall or contextual form → `ODrawer`; primary multi-section flow → a full in-page view. Use `ODialog` / `ODrawer` for these | [conventions](references/conventions.md) |
 | **Form validation** | `OForm` + a colocated Zod `<Form>.schema.ts`; fields are `OForm*` bound **only by `name=`** (no `v-model`/`ref` mirror, no `formData`); submit + loading automatic; payload built with explicit keys; field arrays use `:key="index"` | [forms-validation](references/forms-validation.md) |
 | **New page in nav** | a route **+ exactly one** surface (rail item / flyout child / Settings / IAM sub-page) **+** an env/role gate — the route condition, the nav-entry gate, and the SectionRail `visible` all express the same rule | [navigation-menus](references/navigation-menus.md) |
 | **Keyboard shortcuts** | registry-driven — declare in `shortcutRegistry.ts`, bind with `useShortcuts([{ id, handler }])`; never an ad-hoc `keydown` listener or a hardcoded `⌘N` in a template | [keyboard-shortcuts](references/keyboard-shortcuts.md) |
-| **Cancel / Save row** | cancel = `variant="outline"`, save = `variant="primary"`, both `size="sm-action"`, spaced with `gap-2` on the parent (never `q-ml-*`/`<q-space>`) | [conventions](references/conventions.md) |
+| **Cancel / Save row** | cancel = `variant="outline"`, save = `variant="primary"`, both `size="sm-action"`, spaced with `gap-2` on the parent | [conventions](references/conventions.md) |
 | **Nothing fits** | build a reusable component — generic primitive → a new `O*` in `web/src/lib`; app-specific composition → a named component in `web/src/components`. Never hand-assemble `<div>` + utility classes to fake a component | [creating-components](references/creating-components.md) |
 
 **Dark mode is automatic** — every O2 component and token resolves correctly in
@@ -130,17 +187,18 @@ don't guess a name.
 Run this in your head before writing template markup, and again before
 considering the UI done:
 
-- [ ] Page/module header is `AppPageHeader` (not a hand-built header bar).
+- [ ] Page/module header is `OPageHeader` (not a hand-built header bar).
 - [ ] Every interactive control is an O2 component if one exists in
-      `web/src/lib` — no stray `q-*` or bare HTML controls with an O2 equivalent.
+      `web/src/lib` — no bare HTML controls or third-party primitives with an O2 equivalent.
 - [ ] A self-contained/repeated UI element with no matching component was
       **built as a reusable component** (generic → `O*` in `web/src/lib`;
       app-specific → named component in `web/src/components`), not hand-assembled
       from `<div>` + utility classes. Classes are for layout only.
-- [ ] Tabular data uses `OTable` with `OTableColumnDef[]` columns (never
-      `q-table`); server mode only for backend-paginated data.
+- [ ] Tabular data uses `OTable` with `OTableColumnDef[]` columns; server mode
+      only for backend-paginated data.
 - [ ] Listing page uses the **full-height flush skeleton** (root
-      `flex flex-col h-full p-0`, header `shrink-0 px-4 border-b`, table wrapper
+      `flex flex-col h-full p-0`, header `shrink-0 border-b` — OPageHeader bakes
+      in its own `px-page-edge`, never add a `px-*`, table wrapper
       `card-container flex-1 min-h-0 overflow-hidden`, `OTable :frame="false"`) —
       not a `p-6` padded container; table runs flush.
 - [ ] Listing page has all three toolbar affordances: **search + filters**
@@ -171,9 +229,18 @@ considering the UI done:
 - [ ] Zero `px` values (except a `1px` hairline) — including inside class
       arbitrary values (`w-[320px]`, `text-[13px]`). Sizes use rem / % / vh / vw
       or Tailwind's rem scale.
+- [ ] Corner radius is `rounded-default` / `rounded-surface` / `rounded-full`
+      only — no bare `rounded`, no `rounded-[..]`, no retired
+      `rounded-{sm,md,lg,xl}`.
 - [ ] No `<style scoped>` block added. No `style="…"` attribute added.
-- [ ] No literal colors anywhere. Colors come from `--color-*` token utilities /
-      `var(--color-*)`.
+- [ ] No literal colors anywhere. Colours come from `--color-*` token **utilities**
+      (`bg-surface-base`, `text-text-secondary`) — not a raw `var(--color-*)` in a
+      component (that's a `rawVarInComponent` bypass, allowed only in `:deep`,
+      keyframes, `color-mix`, `calc`, SVG `fill`/`stroke`, `v-html`). No raw
+      Tailwind palette (`bg-gray-*`) and no raw `grey-*`/`primary-*` ramp — use a
+      semantic token.
+- [ ] `cd web && npm run lint:design:strict` passes (the strict ratchet — no new
+      raw-token bypass anywhere, even in files with existing debt).
 - [ ] **No `--o2-*` anywhere** — no `var(--o2-*)`, no new `--o2-*` definition, no
       `.body--dark` block. Any `--o2-*` in code you touched was migrated to its
       `--color-*` equivalent.
@@ -196,13 +263,13 @@ not the call site":
   from divs + classes at the call site. Generic primitive → a new `O*` in
   `web/src/lib`; app-specific composition → a named component in
   `web/src/components`. When *migrating* an existing element and can't build it
-  yet, keep the current Quasar/HTML element in place and flag it. Never
+  yet, keep the current element in place and flag it. Never
   substitute a bare `<div>`. See
   [references/creating-components.md](references/creating-components.md) and the
   "No component fits?" section of [references/conventions.md](references/conventions.md).
 - Missing O2 variant → add the variant to the component source, then use it.
 - Missing token → register it in the token CSS (rule 5), then use it.
-- `AppPageHeader` can't express the header → change `AppPageHeader`, not the page.
+- `OPageHeader` can't express the header → change `OPageHeader`, not the page.
 
 If you genuinely believe a rule shouldn't apply to a specific case, say so
 explicitly and explain why, rather than silently introducing a `px`, a hex, or a
diff --git a/.claude/skills/ui-architect/references/component-catalog.md b/.claude/skills/ui-architect/references/component-catalog.md
index a2244ccbaf..126f20a74b 100644
--- a/.claude/skills/ui-architect/references/component-catalog.md
+++ b/.claude/skills/ui-architect/references/component-catalog.md
@@ -35,7 +35,7 @@ markup — don't guess a prop name.
 | I need to… | Use | Reference |
 | --- | --- | --- |
 | Trigger an action (submit, add, open) | `OButton` (`OButtonGroup` for a set) | core-controls-table |
-| Show a page/module header | `AppPageHeader` (rule 1) | — |
+| Show a page/module header | `OPageHeader` (rule 1) | — |
 | Render tabular data | `OTable` + `OTableColumnDef[]` | core-controls-table |
 | Show a status label / count / tag | `OBadge`, `OTag`, `ODimensionChip` | core-display |
 | Group content in a surface | `OCard` (+ `OCardSection`, `OCardActions`) | core-display |
diff --git a/.claude/skills/ui-architect/references/conventions.md b/.claude/skills/ui-architect/references/conventions.md
index 943b745db3..f82960045c 100644
--- a/.claude/skills/ui-architect/references/conventions.md
+++ b/.claude/skills/ui-architect/references/conventions.md
@@ -12,7 +12,8 @@ screen on the same rhythm: `gap-2` = 0.5rem, `gap-4` = 1rem, `gap-5` = 1.25rem,
 ### Listing Pages (OTable, Lists, Grids)
 
 A listing/table page is **full-bleed**, not a padded card: root `flex flex-col
-h-full p-0`, the `AppPageHeader` owns the padding (`shrink-0 px-4 border-b`), and
+h-full p-0`, the `OPageHeader` owns the padding — it **bakes in `px-page-edge`
+itself**, so the consumer adds only `shrink-0 border-b` (never a `px-*`), and
 the table wrapper runs flush (`card-container flex-1 min-h-0 overflow-hidden`
 around `<OTable :frame="false">`). **Reserve `p-6`/`gap-6` for form/detail
 views** — a page inset breaks the flush table. The full skeleton, the mandatory
@@ -36,7 +37,7 @@ and [references/page-recipes.md](page-recipes.md).
 ### Drawer Spacing (`ODrawer`)
 
 - **Detail (read-only) section** at the top: group facts in token-backed cards —
-  `class="flex flex-col gap-1.5 p-3 rounded-md bg-surface-subtle"` per card
+  `class="flex flex-col gap-1.5 p-3 rounded-surface bg-surface-subtle"` per card
   (label + value). Only distinct groups get a background; don't shade every line.
 - **Separate detail from the edit form** with a divider on the detail wrapper:
   `class="… mb-8 pb-8 border-b border-border-default"`.
@@ -78,9 +79,7 @@ patching it from outside. Banned on an O2 component:
 | --- | --- | --- |
 | `style="color: #fff; padding: 10px"` | hardcoded colors/px, bypasses tokens | use `variant` / `size` / component design |
 | `class="tw:px-2 tw:text-sm"` (`tw:` prefix) | prefix removed — `tw:*` doesn't resolve | use component `variant`/`size` props |
-| `class="q-pa-md text-weight-bold"` (Quasar) | Quasar utilities not available | use component `variant`/`size` props |
 | `<style scoped>` targeting its class | invisible fork of the design system | move the intent into a `variant` |
-| `class="q-ml-sm"` / `q-mr-sm` for spacing | Quasar spacing leak | bare `gap-*` on the parent container |
 
 Decision flow for any visual that differs from the default:
 1. Expressible via `variant` / `size`? → use the prop.
@@ -108,8 +107,8 @@ it's what makes action rows look identical everywhere:
 
 - Cancel is **always** `variant="outline"` — never `secondary` or
   `ghost-primary`. Save/Submit/OK is **always** `variant="primary"`.
-- Both use `size="sm-action"`. Space them with `gap-2` on the parent — never
-  `q-ml-*`/`q-mr-*` on the button, never a `<q-space />` between them.
+- Both use `size="sm-action"`. Space them with `gap-2` on the parent — use
+  `gap-*` on the parent container instead of per-child margins or spacer elements.
 - Other actions in the same row (Delete, Reject) keep their own `variant`
   (e.g. `destructive`) but match `size="sm-action"` for alignment.
 - When the button row lives in an `ODialog`/`ODrawer` footer, prefer the
@@ -177,11 +176,12 @@ differently on every screen.
 Lay out a whole page from a recipe, not from scratch — full recipes in
 [references/page-recipes.md](page-recipes.md). The essentials:
 
-- **Every page** = `AppPageHeader` on top (primary New/Add action in `#actions`).
+- **Every page** = `OPageHeader` on top (primary New/Add action in `#actions`).
 - **A listing/table page is full-bleed**, laid out as a full-height flex column
-  where the **header carries the padding** and the **table runs flush** to the
-  content edges — root `flex flex-col h-full p-0`, header
-  `shrink-0 px-4 border-b border-border-default`, table wrapper
+  where the **header carries the padding** (baked into `OPageHeader` as
+  `px-page-edge`) and the **table runs flush** to the content edges — root
+  `flex flex-col h-full p-0`, header
+  `shrink-0 border-b border-border-default` (no `px-*` — the header self-insets), table wrapper
   `card-container flex-1 min-h-0 overflow-hidden` around `<OTable :frame="false">`.
   **Not** a `gap-6 p-6` padded container (that's for form/detail views).
 - **A listing/table page always carries three toolbar affordances** on its
@@ -212,8 +212,7 @@ Lay out a whole page from a recipe, not from scratch — full recipes in
 ### Tables → `OTable`
 
 **What.** All tabular data uses `OTable`
-(`@/lib/core/Table/OTable.vue`). Legacy `q-table` is fully retired (zero usages
-left) — never reintroduce one.
+(`@/lib/core/Table/OTable.vue`) — never hand-build a `<table>`.
 
 **How.** Columns are `OTableColumnDef[]` (`:columns` + `:data`); reuse the shared
 width constants (`COL.*`, `TABLE_INDEX_COL_SIZE`) and the prebuilt cell renderers
@@ -229,7 +228,7 @@ prop/slot/emit list and the cell renderers are in
 [references/core-controls-table.md](core-controls-table.md).
 
 **Why.** One table component means one behavior for sort, resize, pin, empty,
-loading, and dark mode — a hand-built `<table>` or a fresh `q-table` re-answers all
+loading, and dark mode — a hand-built `<table>` re-answers all
 of that inconsistently and re-implements pagination you'd then have to retest.
 
 ### Where code goes (project layering)
@@ -323,7 +322,7 @@ Rules of thumb:
   `primary` / `secondary` / `neutralButtonLabel` footer API instead of a manual
   button row — while still honoring the cancel=`outline` / save=`primary`
   standard (see [§ Working with O2 components](#working-with-o2-components)).
-- Never use `q-dialog` / `q-drawer` — retired.
+- Use `ODialog` / `ODrawer` for these.
 
 **Why.** Users learn a spatial grammar: a small ask is a centered modal, a
 working surface is a side drawer, a big task gets its own page. Mixing those up
diff --git a/.claude/skills/ui-architect/references/creating-components.md b/.claude/skills/ui-architect/references/creating-components.md
index 402bd20f95..59579399c3 100644
--- a/.claude/skills/ui-architect/references/creating-components.md
+++ b/.claude/skills/ui-architect/references/creating-components.md
@@ -153,7 +153,8 @@ Two-way binding uses the standard `modelValue` prop + `update:modelValue` emit (
 (Full token guide, registration steps, and the `--o2-*` → `--color-*` map:
 [design-tokens.md](design-tokens.md).)
 
-- **Colors: only the modern `--color-*` tokens.** Reach them through token utilities (`bg-surface-panel`, `text-text-primary`, `bg-button-primary`) or `var(--color-*)` in a CSS file. The legacy `--o2-*` vocabulary is **banned** — never use it, never define it, and never add a `.body--dark` block.
+- **Colors: only the modern `--color-*` tokens.** Reach them through token utilities (`bg-surface-panel`, `text-text-heading`, `bg-button-primary`) or `var(--color-*)` in a CSS file / component-token block (never a raw `var()` in the `.vue` template — see next bullet). The legacy `--o2-*` vocabulary is **banned** — never use it, never define it, and never add a `.body--dark` block. Retired aliases `text-text-primary`/`-caption` → `text-text-heading`/`-secondary`.
+- **Corner radius: `rounded-default` (controls) / `rounded-surface` (card/panel surfaces) / `rounded-full`** — never `rounded-[..]` or the retired `rounded-{sm,md,lg,xl}`. A reusable card/panel component rounds with `rounded-surface`.
 - **No hardcoded px anywhere** — including inside Tailwind arbitrary values. `w-[320px]` is banned. Use the rem-based scale (`w-80`, `h-10`, `px-4`) or `rem` / `%` / `vh` / `vw`. `1px` hairline borders are the only exception.
 - **No `var(--*)` in `.vue` templates** and **no hex in components** — go through token utilities.
 
@@ -211,7 +212,7 @@ Model the new `OFormX` on `web/src/lib/forms/Input/OFormInput.vue`. Never mirror
 
 Ordered, but lightweight. **No code before analysis.**
 
-1. **Analysis** — confirm the component doesn't already exist in `lib/`; if you're replacing a Quasar element, grep every usage/prop/slot/variant across `web/src/` and list them. The goal: enumerate every real visual pattern so the variant set covers them all.
+1. **Analysis** — confirm the component doesn't already exist in `lib/`; if you're replacing an existing element, grep every usage/prop/slot/variant across `web/src/` and list them. The goal: enumerate every real visual pattern so the variant set covers them all.
 2. **Design** — from the analysis, define the minimal `variant`/`size`/state prop set (§5), scope the full family (§3), and write the `.types.ts` contract first. Every observed visual pattern must map to a named variant or be an intentionally dropped prop.
 3. **Implement** — write the `.vue` with token utilities and the computed variant map; register any new tokens (§7); reach for `reka-ui` on ARIA-complex behavior (§4). Add a `data-test` (`<module>-<file>-<descriptor>`, kebab-case) to every interactive/key element.
 4. **Test** — write the `.spec.ts` (§10).
diff --git a/.claude/skills/ui-architect/references/design-tokens.md b/.claude/skills/ui-architect/references/design-tokens.md
index c4fe7c7a79..92e19b0b3e 100644
--- a/.claude/skills/ui-architect/references/design-tokens.md
+++ b/.claude/skills/ui-architect/references/design-tokens.md
@@ -20,7 +20,7 @@ set. The legacy **`--o2-*`** set is banned (see the bottom of this file).
 
 - **Prefer the token-backed Tailwind utility** generated from the `--color-*`
   token — bare, **no `tw:` prefix** (the prefix was removed from this project;
-  `tw:bg-surface-base` no longer resolves): `bg-surface-base`, `text-text-primary`,
+  `tw:bg-surface-base` no longer resolves): `bg-surface-base`, `text-text-heading`,
   `border-border-default`, `bg-button-primary`, `bg-tabs-active-bg`. Grep existing
   views for the names already in use.
 - **Don't hand-write the arbitrary-value form when a utility exists.** Every
@@ -29,12 +29,15 @@ set. The legacy **`--o2-*`** set is banned (see the bottom of this file).
   guaranteed to exist and compiles to the **identical** CSS — the arbitrary value
   is just noisier. The utility name is the token minus the `--color-` prefix:
   ```html
-  <!-- avoid --> <div class="bg-[var(--color-surface-base)] text-[var(--color-text-primary)] border-[var(--color-border-default)]">
-  <!-- prefer --> <div class="bg-surface-base text-text-primary border-border-default">
+  <!-- avoid --> <div class="bg-[var(--color-surface-base)] text-[var(--color-text-heading)] border-[var(--color-border-default)]">
+  <!-- prefer --> <div class="bg-surface-base text-text-heading border-border-default">
   ```
-  (`--color-text-primary` → `text-text-primary`, `--color-surface-base` →
+  (`--color-text-heading` → `text-text-heading`, `--color-surface-base` →
   `bg-surface-base`, `--color-border-default` → `border-border-default`.) This also
   covers the v4 shorthand `bg-(--color-x)` — same rule, use `bg-x`.
+  > **Retired aliases** (CI-banned, `retiredTextAlias`): `text-text-primary` →
+  > `text-text-heading`, `text-text-caption` → `text-text-secondary`. The text
+  > hierarchy is heading / body / secondary / label / muted.
 - **Arbitrary `[var(--color-x)]` in a class is acceptable in only two cases:**
   1. the token has **no registered utility** — a var-only token defined in a plain
      `:root {}` and *not* re-declared in an `@theme inline` block (most domain /
@@ -47,12 +50,86 @@ set. The legacy **`--o2-*`** set is banned (see the bottom of this file).
   Otherwise, use the utility. (If you find yourself reaching for an arbitrary value
   for a token that *should* be a first-class utility, register it in `@theme inline`
   — see below — rather than scattering `[var(--color-x)]`.)
-- **Need the raw variable** (in a CSS file, or a rare `:style` binding for a
-  computed value)? Use the modern custom property only: `var(--color-text-primary)`,
-  `var(--color-surface-base)`. Never `var(--o2-*)`.
+- **Raw `var(--color-*)` in a `.vue` file is a counted bypass** (`rawVarInComponent`,
+  a ratcheted CI category). It is allowed **only** in the sanctioned residue where no
+  utility can reach: inside `:deep()`, `@keyframes`, `color-mix()`, `calc()`, SVG
+  `fill`/`stroke`, and `v-html`/JS-generated markup (e.g. an ECharts tooltip string).
+  Everywhere else use the utility; if the utility doesn't exist, **register the token**
+  (below) instead of reaching for `var()`. In a standalone `.css` file, `var(--color-*)`
+  is fine. Never `var(--o2-*)`.
 - **Never a literal** — no hex / `rgb()` / `rgba()` / `hsl()` / named colors in a
   component, and no magic `px` dimensions. (Literal hex is allowed in exactly one
   place: the raw palette in `base.css`, which nothing else references directly.)
+  Raw Tailwind palette utilities (`bg-gray-400`, `text-red-500`) don't even compile —
+  `palette-reset.css` clears the `--color-*` default namespace so only registered
+  tokens survive.
+- **Reuse before minting; one knob per decision.** Grep for an existing token first;
+  mint a new one only when it's genuinely needed and used. Never add a second name for
+  a value that already has one — an alias is a decision made twice that splits adoption
+  and can't be seen in review.
+- **British `grey-*`, not `gray-*`** — `grey-*`/`primary-*` are our project ramps; using
+  them raw in feature code is a ratcheted bypass (`rawProjectRamp`) — prefer a semantic
+  token (`text-text-secondary`, `bg-accent`). `gray-*` is Tailwind's un-themed default and
+  is banned (`rawPalette`).
+
+## Corner radius — two tiers + circle
+
+Radius is a token too, and it has exactly **three** app-facing values. Pick by role;
+never eyeball an arbitrary radius.
+
+| Utility | Token | Value | Use for |
+|---|---|---|---|
+| `rounded-default` | `--radius-default` | 4px | controls — buttons, inputs, chips, small icon buttons |
+| `rounded-surface` | `--radius-surface` | 12px | surfaces — dialogs, drawers, cards, panels, the app-shell content area |
+| `rounded-full` | `--radius-full` | ∞ | pills, avatars, status dots |
+
+Per-corner variants use the same names (`rounded-t-surface`, `rounded-s-default`).
+**Banned (all CI-enforced):** bare `rounded`, arbitrary `rounded-[10px]`, and the
+retired `rounded-{sm,md,lg,xl}` / `var(--radius-{sm,md,lg,xl})` — they were five names
+for one value and were deleted (`sm`/`md` → `default`, `lg`/`xl` → `surface`). Change
+`--radius-default` or `--radius-surface` in `base.css` to retune a whole tier at once.
+
+## Enforced by CI (it will fail the build)
+
+None of the above is advisory. Every PR runs, as **required** gating steps:
+
+- `lint:design:strict` — the design-consistency ratchet in **strict** mode. It counts
+  every bypass category (hardcoded hex/px, `arbRadius`, `bareRounded`, `retiredTextAlias`,
+  `retiredRadiusAlias`, `rawPalette`, `rawProjectRamp`, `rawVarInComponent`,
+  un-justified `<style>`, …). Zero-tolerance categories fail on the **first** occurrence;
+  ratcheted categories can **only shrink** — and strict mode leaves **no headroom**, so a
+  new raw token fails even in a file that still carries old debt. You cannot "use up" slack.
+- `lint:tokens` — every `var(--x)` must resolve to a defined token (no silent voids),
+  and **any** `--o2-*` used as a CSS custom property fails, fallback or not.
+- `lint:token-purity` — the token files stay pure (no class defs leaking in).
+- `lint:styles` (stylelint) — `color-no-hex` in `.vue` styles, the `.dark`-only
+  dark-selector rule, banned `var(--o2-*)` / retired `var(--color-text-primary/-caption)`
+  values, and **literal font stacks** (`font-family` must be `var(--font-sans)` /
+  `var(--font-mono)` — the design script's `literalFontFamily` category counts the
+  same thing in class arbitrary values), all at **error** severity.
+
+If a rule blocks you, fix the cause (use the utility, register the token, pick the tier) —
+raising the baseline is not the move.
+
+**The counters scan raw text — comments included.** A `16px` / `#fff` /
+`var(--color-*)` mentioned in a `<style>`-block comment, or a banned class pattern
+(`bg-gray-400`, `tw:`, `w-[320px]`, a retired alias) quoted verbatim in a
+template/JS comment, counts as debt exactly like real code and can fail
+`lint:design:strict`. Describe values in comments in `rem` or plain words instead
+of quoting the banned form.
+
+**The ratchet cuts both ways — improving also needs a baseline update.** In
+`--strict` mode the baseline must *equal* reality, so a PR that *reduces* debt
+(migrates a `var()`, deletes a debt-carrying file or `<style>` block) fails CI with
+"baseline is STALE". That failure is expected and good — lock the win in:
+
+```bash
+cd web && node scripts/check-design-consistency.mjs --baseline
+# commit the tightened scripts/design-debt-baseline.json with your change
+```
+
+Never hand-edit the baseline, and never re-baseline to *absorb a regression* — only
+to record an improvement (CI's regression check fails first if counts went up).
 
 ## The token files
 
@@ -62,7 +139,7 @@ Plain CSS, Tailwind v4, **no SCSS**. They live in
 | File | Holds |
 | --- | --- |
 | `base.css` | raw palette primitives (`--color-grey-*`, `--color-primary-*`, radius, shadow) + `@font-face` — the only place literal hex lives |
-| `semantic.css` | semantic/intent `--color-*` tokens, light `:root` (e.g. `--color-text-primary`, `--color-surface-base`, `--color-border-default`) |
+| `semantic.css` | semantic/intent `--color-*` tokens, light `:root` (e.g. `--color-text-heading`, `--color-surface-base`, `--color-border-default`) |
 | `component.css` | per-component `--color-*` tokens (e.g. `--color-button-primary`) |
 | `dark.css` | **all** dark-mode overrides, under `.dark` |
 
@@ -102,7 +179,7 @@ Never inline the literal you would have registered.
 
 There are two token vocabularies in the codebase: the modern `--color-*` set
 (registered in `@theme inline`, drives Tailwind utilities, proper `.dark`
-overrides) and a legacy **`--o2-*`** set (Quasar-era, `var()`-only, with its own
+overrides) and a legacy **`--o2-*`** set (retired, `var()`-only, with its own
 drifting `.body--dark` values). The legacy set is **being deleted**, and lint/CI
 is being wired to **fail the build** on any `--o2-*`. Treat it as already
 forbidden:
@@ -124,10 +201,10 @@ Most legacy tokens map to a same-meaning modern token — the heuristic is simpl
 | Legacy `--o2-*` | Modern `--color-*` |
 | --- | --- |
 | `--o2-text-heading` | `--color-text-heading` |
-| `--o2-text-primary` / `--o2-text-4` | `--color-text-primary` |
+| `--o2-text-primary` / `--o2-text-4` | `--color-text-heading` |
 | `--o2-text-body` | `--color-text-body` |
 | `--o2-text-secondary` / `--o2-text-2` | `--color-text-secondary` |
-| `--o2-text-caption` / `--o2-text-1` | `--color-text-caption` |
+| `--o2-text-caption` / `--o2-text-1` | `--color-text-secondary` |
 | `--o2-text-label` / `--o2-text-3` | `--color-text-label` |
 | `--o2-text-muted` | `--color-text-muted` |
 | `--o2-text-placeholder` | `--color-text-placeholder` |
@@ -147,7 +224,9 @@ Most legacy tokens map to a same-meaning modern token — the heuristic is simpl
 | `--o2-secondary-btn-bg` / `-text` / `-border` | `--color-button-secondary` / `-foreground` / `-border` |
 | `--o2-hover-accent` / `--o2-interactive-hover` | `--color-interactive-hover-bg` |
 
-**Authoritative source (always in-tree):** the token files themselves define both
+**Authoritative source (always in-tree):** the codemod's machine map is
+`web/scripts/o2-token-map.json` (`migrate` key — this is what the CI failure message
+points at), and the token files themselves define both
 vocabularies — `semantic.css` (light `--o2-*` and `--color-*` values) and
 `dark.css` (dark values). If a legacy token isn't in the table above, grep those
 files for its value and find the `--color-*` token that carries the same value:
diff --git a/.claude/skills/ui-architect/references/forms-inputs.md b/.claude/skills/ui-architect/references/forms-inputs.md
index e2335b028c..66b4d61324 100644
--- a/.claude/skills/ui-architect/references/forms-inputs.md
+++ b/.claude/skills/ui-architect/references/forms-inputs.md
@@ -41,7 +41,7 @@ Because the wrapper is `Omit<..., "modelValue" | ...>`, you never pass `v-model`
 **Use when:** A single-line (or, via `type="textarea"`, multi-line) free-text field — text, password, email, number, url, tel, search — with optional prefix/suffix, icons, clear button, mask, debounce, and character counter.
 **Don't use for:** Choosing from a fixed option list (use `OSelect`); typeahead over a suggestion list where free text is also allowed (use `OCombobox`); a pure filter/search box in a toolbar (use `OSearchInput`, which wraps this with a search icon).
 **Key props:** `modelValue` (`string | number`), `type` (`"text"` default | `"password"` | `"email"` | `"number"` | `"search"` | `"url"` | `"tel"` | `"textarea"`), `label`, `placeholder`, `helpText`, `errorMessage`, `error` (boolean — error styling only shows when `error` is true; a bare `errorMessage` alone will not surface), `prefix`, `suffix`, `clearable` (default `false`), `readonly` (default `false`), `disabled` (default `false`), `required` (renders `*` after label — do not append ` *` manually), `autofocus` (default `false`), `debounce` (ms; flushed on blur), `autogrow` (default `false`, textarea only), `mask` (`"time"` | `"fulltime"` | `"DD-MM-YYYY"` — digit-extracting), `maxlength` (shows counter), `rows` (default `3`, textarea), `size` (`"sm"` | `"md"` default), `width` (`"xs"` | `"sm"` | `"md"` | `"lg"` | `"full"` default), `labelPosition` (`"inside"` | `"outside"` default), `modelModifiers` (`{ number?, trim? }`), `id`, `name`, `autocomplete`.
-**Slots:** `icon-left`, `icon-right`, `prefix`, `suffix`, `tooltip` (put a `<q-tooltip>` inside — renders an info icon in the label). (`append` is also consumed in template.)
+**Slots:** `icon-left`, `icon-right`, `prefix`, `suffix`, `tooltip` (put a tooltip element inside — renders an info icon in the label). (`append` is also consumed in template.)
 **Emits:** `update:modelValue`, `clear`, `blur`, `focus`, `keydown`, `keyup`, `keypress`
 **Example:**
 ```vue
@@ -228,7 +228,7 @@ Because the wrapper is `Omit<..., "modelValue" | ...>`, you never pass `v-model`
 **Import:** `@/lib/forms/Checkbox/OCheckbox.vue`
 **Use when:** A single boolean (or tri-state `indeterminate`) checkbox, or a member of an `OCheckboxGroup` (set `value`/`val` and it reads the group's checked array). Supports custom `trueValue`/`falseValue`/`indeterminateValue`.
 **Don't use for:** A set of related checkboxes with a shared array model (wrap them in `OCheckboxGroup`, or use `OOptionGroup type="checkbox"` for a list-driven layout); an on/off toggle switch (use `OSwitch`).
-**Key props:** `modelValue` (`boolean | "indeterminate" | string | number | (string|number)[]`), `value` (member value in a group; excludes boolean by design), `val` (q-checkbox alias for `value`), `label`, `size` (`"xs"` | `"sm"` | `"md"` default), `trueValue`/`falseValue`/`indeterminateValue` (custom-value mode), `color` (`"primary"` default | `"negative"`), `disabled` (default `false`), `required`, `id`, `name`.
+**Key props:** `modelValue` (`boolean | "indeterminate" | string | number | (string|number)[]`), `value` (member value in a group; excludes boolean by design), `val` (compatibility alias for `value`), `label`, `size` (`"xs"` | `"sm"` | `"md"` default), `trueValue`/`falseValue`/`indeterminateValue` (custom-value mode), `color` (`"primary"` default | `"negative"`), `disabled` (default `false`), `required`, `id`, `name`.
 **Slots:** `label` (custom label content — overrides `label` prop)
 **Emits:** `update:modelValue`, `change` (emits the item value when inside a group)
 **Example:**
@@ -290,7 +290,7 @@ Because the wrapper is `Omit<..., "modelValue" | ...>`, you never pass `v-model`
 **Import:** `@/lib/forms/Radio/ORadio.vue`
 **Use when:** A single radio button representing one `value` — **must** be used inside `ORadioGroup` (the group provides the RadioGroupRoot context and value map).
 **Don't use for:** Standalone use outside a group (it has no own model); a multi-select (use checkboxes); a compact options-array layout (use `OOptionGroup type="radio"`).
-**Key props:** `value` (`string | number | boolean` — this radio's value, compared against the group's `modelValue`), `val` (q-radio alias for `value`), `label`, `size` (`"xs"` | `"sm"` | `"md"` default), `disabled` (default `false`), `id`
+**Key props:** `value` (`string | number | boolean` — this radio's value, compared against the group's `modelValue`), `val` (compatibility alias for `value`), `label`, `size` (`"xs"` | `"sm"` | `"md"` default), `disabled` (default `false`), `id`
 **Slots:** `label` (custom label content)
 **Emits:** none (selection flows through the parent `ORadioGroup`)
 **Example:**
@@ -340,7 +340,7 @@ Because the wrapper is `Omit<..., "modelValue" | ...>`, you never pass `v-model`
 
 ### OSwitch
 **Import:** `@/lib/forms/Switch/OSwitch.vue`
-**Use when:** An on/off toggle (the O2 replacement for `q-toggle`) — instant enable/disable of a setting. Supports custom `checkedValue`/`uncheckedValue` and label placement.
+**Use when:** An on/off toggle — instant enable/disable of a setting. Supports custom `checkedValue`/`uncheckedValue` and label placement.
 **Don't use for:** A checkbox in a list/form validation context (use `OCheckbox`); choosing among 3+ options (use `ORadioGroup`/`OOptionGroup`).
 **Key props:** `modelValue` (`boolean | string | number`), `label`, `labelPosition` (`"left"` | `"right"` default), `size` (`"sm"` | `"md"` default | `"lg"` | `"xl"`), `checkedValue` (custom on-value — string/number only), `uncheckedValue` (custom off-value), `disabled` (default `false`), `required`, `id`, `name`
 **Slots:** `label` (custom label content — overrides prop), `tooltip` (info icon inline in label)
diff --git a/.claude/skills/ui-architect/references/forms-specialized.md b/.claude/skills/ui-architect/references/forms-specialized.md
index b7c1689181..ee0089fe79 100644
--- a/.claude/skills/ui-architect/references/forms-specialized.md
+++ b/.claude/skills/ui-architect/references/forms-specialized.md
@@ -32,7 +32,7 @@ The `OForm` container + `useOForm` composable own field registration, validation
 - `defaultValues` (`T` — required on the normal path; supplied via `useOForm()` on the headless `:form` path) — initial values for every field; keys must match each field's `name`
 - `schema` (`unknown` — Zod / Standard Schema; optional) — validates the whole form, mapped to fields by `name`
 - `onSubmit` (`(values: T) => unknown | Promise<unknown>`) — written `@submit="handler"` in templates; awaited
-- `greedy` (`boolean`, default `false`) — validate every field instead of stopping on the first error (mirrors q-form `greedy`)
+- `greedy` (`boolean`, default `false`) — validate every field instead of stopping at the first error
 - `form` (`OFormInstance`) — an externally-created form from `useOForm()`; when present OForm uses it instead of creating its own
 
 **Slots:** default only — scoped as `{ isSubmitting, canSubmit }`.
diff --git a/.claude/skills/ui-architect/references/house-rules.md b/.claude/skills/ui-architect/references/house-rules.md
index e6558720c7..9761730ff8 100644
--- a/.claude/skills/ui-architect/references/house-rules.md
+++ b/.claude/skills/ui-architect/references/house-rules.md
@@ -8,20 +8,20 @@ Each rule below states **what**, **why**, and **how**. The "why" matters: these
 aren't arbitrary — each one exists because breaking it produces a specific,
 recurring class of bug or drift in this codebase.
 
-### 1. Every page/module header is `AppPageHeader`
+### 1. Every page/module header is `OPageHeader`
 
 **What.** The top of any routed view or module screen (title + icon + actions,
-optionally tabs/breadcrumb/back) is rendered by `AppPageHeader`, never a
+optionally tabs/breadcrumb/back) is rendered by `OPageHeader`, never a
 hand-rolled `<div class="header">…<h1>…` or a bespoke `q-toolbar`.
 
 ```vue
 <script setup lang="ts">
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageHeader from "@/lib/core/PageHeader/OPageHeader.vue";
 import OButton from "@/lib/core/Button/OButton.vue";
 </script>
 
 <template>
-  <AppPageHeader
+  <OPageHeader
     :title="t('dashboard.header')"
     icon="dashboard"
     :subtitle="t('dashboard.subtitle')"
@@ -31,11 +31,11 @@ import OButton from "@/lib/core/Button/OButton.vue";
         {{ t("dashboard.add") }}
       </OButton>
     </template>
-  </AppPageHeader>
+  </OPageHeader>
 </template>
 ```
 
-**Why.** `AppPageHeader` encodes a single header contract used app-wide: row 1 is
+**Why.** `OPageHeader` encodes a single header contract used app-wide: row 1 is
 a fixed-height band (icon tile + `<h1>` + right-aligned actions); row 2 shows
 **exactly one** of peer tabs, an ancestor breadcrumb, or a plain tagline. Every
 hand-built header silently re-litigates title font size, icon tile geometry,
@@ -44,8 +44,8 @@ keeps the title's X/Y position identical as a user navigates list → detail →
 edit, which is the whole point.
 
 **How.**
-- The component is `AppPageHeader`, at
-  `web/src/components/common/AppPageHeader.vue`. Its full API — props, slots, and
+- The component is `OPageHeader`, at
+  `web/src/lib/core/PageHeader/OPageHeader.vue`. Its full API — props, slots, and
   the one-row-content contract — is documented in this rule (below), so you can
   use it correctly without opening the file.
 - Props: `title`, `subtitle`, `icon` (an `IconName` from
@@ -56,20 +56,19 @@ edit, which is the whole point.
   `back`.
 - Put page actions in `#actions` using O2 components. Do not add your own
   `border-b`, height, or padding around it — the header owns its own chrome.
-- **Do not** style `AppPageHeader` from the outside with utility classes or a
+- **Do not** style `OPageHeader` from the outside with utility classes or a
   wrapper trying to change its internals. If it can't express what a page needs,
-  that's a change to `AppPageHeader` itself, not a per-page override.
+  that's a change to `OPageHeader` itself, not a per-page override.
 
 ### 2. Build from O2 components in `web/src/lib`
 
 **What.** Compose UI out of the O2 library (`O*` components in
-`web/src/lib/**`). Do not reach for a Quasar primitive (`q-btn`, `q-input`,
-`q-select`, `q-dialog`, `q-table`, `q-tabs`, …) or a bare HTML control
-(`<button>`, `<input>`, `<select>`, `<textarea>`, `<a>` used as a button) when an
-O2 equivalent exists.
+`web/src/lib/**`). Do not reach for a bare HTML control
+(`<button>`, `<input>`, `<select>`, `<textarea>`, `<a>` used as a button) or an
+unstyled third-party primitive when an O2 equivalent exists.
 
 **Why.** O2 components have design decisions baked in — radius, color, focus
-ring, dark-mode tokens, spacing, disabled/loading states. A raw `q-btn` or
+ring, dark-mode tokens, spacing, disabled/loading states. A raw native
 `<button>` re-introduces all of those as per-call-site choices, which is exactly
 how a UI ends up with nine slightly different buttons. Baked-in design is the
 feature, not a limitation.
@@ -92,11 +91,11 @@ feature, not a limitation.
   design (see [§ Working with O2 components](conventions.md)).
 - **If no O2 equivalent exists:** do NOT drop to a bare `<div>`/`<button>` to
   fake it, and do NOT hand-assemble the element from utility classes. When
-  migrating, keep the existing Quasar component (or native element) in place and
+  migrating, keep the existing element in place and
   flag that a new O2 component is needed. When building **new** UI, create a
   reusable component instead — see
   [§ No component fits? Build a reusable one](conventions.md).
-  An unstyled `div` is worse than an honest `q-btn`.
+  An unstyled `div` is worse than an honest native `<button>`.
 
 ### 3. No hardcoded `px`
 
@@ -126,15 +125,43 @@ utilities usually removes the temptation entirely.
   (divide by 16: `320px → 20rem`, `22px → 1.375rem`, `6px → 0.375rem`).
 - **The only accepted `px` is a `1px` hairline border/divider.** Every other `px`
   — inline, in a `<style>` block, or in a class arbitrary value — is a smell.
+- **Corner radius is a token, not a guess — exactly two tiers + circle:**
+  `rounded-default` (**4px** — controls: buttons, inputs, chips, small icon
+  buttons), `rounded-surface` (**12px** — surfaces: dialogs, drawers, cards,
+  panels, the app-shell content area), and `rounded-full` (pills / avatars /
+  status dots). Per-corner variants use the same names (`rounded-t-surface`,
+  `rounded-s-default`). **Banned:** bare `rounded`, arbitrary `rounded-[10px]`,
+  and the retired `rounded-{sm,md,lg,xl}` / `var(--radius-{sm,md,lg,xl})` — they
+  were five names for one value and were deleted (`sm`/`md` → `default`,
+  `lg`/`xl` → `surface`). Pick the tier by the element's role, never by eye.
 
 ### 4. No scoped CSS — style with bare Tailwind utilities
 
 **What.** Do not add `<style scoped>` blocks. Style layout/spacing with **bare
-Tailwind utility classes** (`flex flex-col gap-4 p-6`). **Two things are banned:**
+Tailwind utility classes** (`flex flex-col gap-4 p-6`). **One thing is banned:**
 - ❌ the **`tw:` prefix** — it was removed from this project; `tw:flex` no longer
   resolves. Write `flex`, not `tw:flex`.
-- ❌ **Quasar utilities** — `q-pa-md`, `q-gutter-lg`, `q-mb-sm`, `row`, `col`,
-  `text-weight-bold`, `items-center` as a Quasar class, etc. are NOT available.
+
+In the rare case a `<style>` block genuinely cannot be Tailwind, it must **justify
+itself** or CI counts it as debt (`styleKeepComment`, strict-ratcheted — a new
+unjustified block fails the build). The block must open with a keep-comment:
+
+```css
+/* keep(lib-override:echarts): tooltip DOM is generated by the lib, no class hook */
+```
+
+Sanctioned tags: `lib-override:<lib>`, `generated-content`, `keyframes`, `print`,
+`scrollbar`, `complex-state`, `brand`, `third-party` — one line stating *why this
+cannot be utilities*. (`keep: <tag>` punctuation also accepted.)
+
+**Comments count as debt too.** The design-consistency counters scan raw file
+text — comments included. A `16px`, a `#fff`, or a `var(--color-*)` written in a
+`<style>`-block comment counts against `stylePxUnit` / `styleBlockHex` /
+`rawVarInComponent` exactly like real CSS, and the whole-file categories
+(`rawPalette`, `tw:`, arbitrary `[..px]` values, retired aliases) match verbatim
+mentions in template/JS comments as well. Write comment prose in `rem` or plain
+words ("a 1rem gap", "the drawer's 0.75rem inset") — never quote a banned pattern
+verbatim in a comment.
 
 Prefer utility classes over inline `style=""`. Reserve inline `style` for the
 rare dynamic value that must be computed in JS (and even then, prefer a bound
@@ -155,8 +182,10 @@ everything — they're the last resort, not the default.
   This is the exact pattern real components use (e.g. `ModelPricingEditor.vue`,
   `AddRegexPattern.vue`): `class="flex flex-col gap-4"`, `class="flex items-center gap-2"`.
 - **Colors**: use token-backed utilities (`bg-surface-subtle`,
-  `text-text-secondary`, `border-border-default`) or, when a raw value is
-  unavoidable, the CSS custom property `var(--color-*)`. Never a hex/rgb literal.
+  `text-text-secondary`, `border-border-default`). A raw `var(--color-*)` inside a
+  `.vue` component is a **CI-counted bypass** (`rawVarInComponent`) — allowed only
+  in the sanctioned residue (`:deep`, `@keyframes`, `color-mix`, `calc`, SVG
+  `fill`/`stroke`, `v-html`). Never a hex/rgb literal.
 - **Form field spacing**: put `class="flex flex-col gap-5"` (or `gap-6`) on the
   `<OForm>` — `class`/`style` fall through to its root `<form>`, so its direct
   children (the `OFormInput`/`OFormSelect` fields) get even vertical spacing.
@@ -164,9 +193,11 @@ everything — they're the last resort, not the default.
   the #1 cause of "the dialog/drawer has no spacing".
 - **Never use**:
   - ❌ `tw:flex`, `tw:gap-2`, `tw:p-4` — the `tw:` prefix is dead; drop it → `flex gap-2 p-4`
-  - ❌ `q-pa-md`, `q-gutter-lg`, `row`, `col`, `text-weight-bold` (Quasar — not available)
   - ❌ `#fff`, `rgb(...)` literals (use token utilities or `var(--color-*)`)
   - ❌ `px` for sizing except `1px` borders (use the rem-based scale)
+  - ❌ literal font stacks — `font-family` (CSS or `[font-family:…]`/`font-[…]`
+    arbitrary values) must be `var(--font-sans)` or `var(--font-mono)`; anything
+    else is CI-banned (`literalFontFamily` + stylelint at error)
 - **For O2 components**: pass only `variant` / `size` props — never patch
   appearance with inline styles or ad-hoc classes.
 
@@ -178,15 +209,19 @@ tokens. If the token you need doesn't exist, **register it** in the token CSS
 first, then use it.
 
 **Why.** Tokens are what make the app theme-aware. A literal `#fff` is invisible
-in dark mode and can't be retuned globally; a token (`text-text-primary`,
-`bg-surface-base`, `var(--color-*)`) resolves to the right value in both themes
-and changes everywhere at once when design updates it. Hardcoding a color is
-opting a single element out of theming permanently.
+in dark mode and can't be retuned globally; a token (`text-text-heading`,
+`bg-surface-base`) resolves to the right value in both themes and changes
+everywhere at once when design updates it. Hardcoding a color is opting a single
+element out of theming permanently. **One knob per decision:** reuse an existing
+token before minting one, and never add a second name for a value that already
+has one — an alias is a decision made twice that silently splits adoption.
 
 **How — using tokens.**
-- Prefer **token-backed Tailwind utilities**: `text-text-primary`,
-  `bg-surface-base`, `bg-surface-subtle`, `border-border-default`,
-  `text-text-secondary`, `text-text-muted` — theme-aware by construction.
+- Prefer **token-backed Tailwind utilities**: `text-text-heading` (titles),
+  `text-text-body`, `text-text-secondary`, `text-text-label`, `text-text-muted`,
+  `bg-surface-base`, `bg-surface-subtle`, `border-border-default` — theme-aware by
+  construction. (The old `text-text-primary` / `text-text-caption` are **retired
+  and CI-banned** — use `-heading` / `-secondary`.)
 - **Don't write the arbitrary-value form when a utility exists** —
   `bg-surface-base`, not `bg-[var(--color-surface-base)]` (they compile to
   identical CSS; the utility name is the token minus `--color-`). Arbitrary
@@ -194,8 +229,11 @@ opting a single element out of theming permanently.
   (a var-only domain token not in `@theme inline`, e.g.
   `bg-[var(--color-card-glass-bg)]`) or a **load-bearing fallback**. Details +
   the two exceptions in [references/design-tokens.md](design-tokens.md).
-- When a raw variable is unavoidable, use the modern CSS custom property
-  `var(--color-*)` (e.g. in a bound `:style` for a computed value).
+- When a raw variable is genuinely unavoidable (a `:deep()`/keyframe rule, a
+  `color-mix()`/`calc()`, an SVG `fill`/`stroke`, or `v-html`/JS-generated markup),
+  use the modern custom property `var(--color-*)` — but know it counts against the
+  `rawVarInComponent` ratchet. If it's just a colour you could name, register the
+  token and use its utility instead.
 - **Only `--color-*` tokens** — see the `--o2-*` ban below.
 
 **How — registering a NEW token / the `--o2-*` ban.** Full details, the token-file
diff --git a/.claude/skills/ui-architect/references/overlay-navigation.md b/.claude/skills/ui-architect/references/overlay-navigation.md
index ce27b95abe..d73cbc8566 100644
--- a/.claude/skills/ui-architect/references/overlay-navigation.md
+++ b/.claude/skills/ui-architect/references/overlay-navigation.md
@@ -223,7 +223,7 @@ Rule of thumb: **Tooltip = hint, Dropdown = action menu, Popover = anything free
 
 ### OTooltip
 **Import:** `@/lib/overlay/Tooltip/OTooltip.vue`
-**Use when:** A passive hover/focus hint describing an element — icon-button labels, truncated text, disabled-state explanations. Two modes: **wrapper** (default slot wraps the trigger) or **child** (no default slot — attaches to its parent element like `q-tooltip`).
+**Use when:** A passive hover/focus hint describing an element — icon-button labels, truncated text, disabled-state explanations. Two modes: **wrapper** (default slot wraps the trigger) or **child** (no default slot — attaches to its parent element as its tooltip).
 **Don't use for:** Anything the user interacts with inside the bubble (use **OPopover**); an action menu (use **ODropdown**).
 **Key props:** `content` (string — plain-text shorthand for `#content`) · `side` (`"top"|"right"|"bottom"|"left"` — default `"top"`) · `align` (`"start"|"center"|"end"` — default `"center"`) · `sideOffset` (number — default `4`) · `alignOffset` (number — default `0`) · `delay` (number ms — default `700`) · `maxWidth` (string — default `"320px"`) · `disabled` (boolean) · `open` (boolean — controlled) · `contentClass` (string) · `shortcut` (`string | string[]`) · `shortcutId` (string — prefer over `shortcut`)
 **Slots:** `default` (trigger — single focusable element; omit for child mode), `content` (rich content, overrides `content` prop)
diff --git a/.claude/skills/ui-architect/references/page-recipes.md b/.claude/skills/ui-architect/references/page-recipes.md
index c1acf7b089..17bd608e48 100644
--- a/.claude/skills/ui-architect/references/page-recipes.md
+++ b/.claude/skills/ui-architect/references/page-recipes.md
@@ -7,7 +7,7 @@ feel like one product.
 
 ## Table of contents
 
-- [Every page = AppPageHeader + body](#every-page--apppageheader--body)
+- [Every page = OPageHeader + body](#every-page--opageheader--body)
 - [Where a new page goes in navigation](#where-a-new-page-goes-in-navigation)
 - [The listing-page skeleton (flush table, fixed height)](#the-listing-page-skeleton-flush-table-fixed-height)
 - [Recipe: listing / table page](#recipe-listing--table-page)
@@ -20,9 +20,9 @@ feel like one product.
 
 ---
 
-## Every page = AppPageHeader + body
+## Every page = OPageHeader + body
 
-Any routed view is: an `AppPageHeader` (rule 1) on top, then the page body below
+Any routed view is: an `OPageHeader` (rule 1) on top, then the page body below
 it, all inside a **full-height flex column** so the header stays put and only the
 body scrolls.
 
@@ -33,7 +33,7 @@ body scrolls.
   **do** give it horizontal padding and a bottom divider so the header aligns with
   the app frame while the table below runs flush (see the skeleton next).
 - The subtitle/description is the **`subtitle`** prop (there is **no**
-  `description` prop on `AppPageHeader`).
+  `description` prop on `OPageHeader`).
 
 ---
 
@@ -61,7 +61,7 @@ while the header aligns with the app frame:
   <!-- page root: full height, NO page padding -->
   <div class="flex flex-col h-full p-0">
     <!-- header: shrink-0, its OWN horizontal padding + bottom divider -->
-    <AppPageHeader
+    <OPageHeader
       :title="t('channels.title')"
       icon="notifications"
       :subtitle="t('channels.subtitle')"
@@ -72,7 +72,7 @@ while the header aligns with the app frame:
           {{ t("channels.new") }}
         </OButton>
       </template>
-    </AppPageHeader>
+    </OPageHeader>
 
     <!-- table wrapper: fills remaining height, scrolls internally, NO padding -->
     <div class="card-container flex-1 min-h-0 overflow-hidden">
@@ -89,18 +89,22 @@ Why each class matters — these are load-bearing, not decoration:
   chain: the header never scrolls, the table body does. `min-h-0` is what lets the
   flex child shrink below its content so the inner scroll area works — omit it and
   the whole page scrolls instead of the table.
-- **Header `px-4` + `border-b border-border-default`**, table wrapper **no
-  horizontal padding** → the table is **flush** (rows touch the content-area
-  edges). Don't add page padding and don't wrap the table in a padded box — that
-  inset breaks the flush alignment. The comfortable first-column inset is provided
-  by `OTable` itself, not by page padding.
+- **Header self-insets** (`OPageHeader` bakes in `px-page-edge`, the single
+  `--spacing-page-edge` grid line) **+ `border-b border-border-default`**, table
+  wrapper **no horizontal padding** → the table is **flush** (rows touch the
+  content-area edges) but its first-column inset (also `--spacing-page-edge`)
+  lands on the *same* grid line as the header title. **Never add a `px-*` to
+  `OPageHeader`** — it owns its inset; a consumer `px-4` would fight the baked
+  `px-page-edge` and knock the header 4px off the table. Don't add page padding and
+  don't wrap the table in a padded box — that inset breaks the flush alignment.
 - **`card-container`** is the existing app class that gives the table area its
   surface background; reuse it, don't invent a `bg-*`/border box (that would
   double-frame the borderless table).
 - **`:frame="false"`** on `OTable` keeps it borderless (its default) — the app
-  frame provides the single content card. If PageLayout wraps the view instead,
-  pass the same padding via its `header-class` prop
-  (`shrink-0 px-4 border-b border-border-default`).
+  frame provides the single content card. If OPageLayout wraps the view instead,
+  its `#header` wrapper is just `shrink-0 border-b border-border-default` — the
+  `OPageHeader` inside still supplies the `px-page-edge` inset, so don't re-add
+  it via `header-class`.
 
 > Reserve `p-6`/`gap-6` page containers for **form / detail** views (constrained
 > content), **not** for full-bleed listing tables.
@@ -109,7 +113,7 @@ Why each class matters — these are load-bearing, not decoration:
 
 ## Recipe: listing / table page
 
-A listing page is `AppPageHeader` + an `OTable` that **always** carries three
+A listing page is `OPageHeader` + an `OTable` that **always** carries three
 toolbar affordances: a **search** box, a **refresh** button, and a
 **column-visibility (show/hide columns) toggle**. These are the default standard
 for every list — don't ship a listing page without them.
@@ -301,7 +305,7 @@ blocks:
 A detail or create/edit screen that is the page's *primary* task (not a small
 form — those go in an `ODialog`/`ODrawer`; see SKILL.md § Forms):
 
-- `AppPageHeader` with a **back** target (`:back="{ label, to }"`) so the leading
+- `OPageHeader` with a **back** target (`:back="{ label, to }"`) so the leading
   icon tile becomes a Back button, and the title reflects the item.
 - Body = the form, built with `OForm` + a colocated Zod schema (see
   [forms-validation.md](forms-validation.md)). Save/Cancel follow the standard
@@ -314,10 +318,11 @@ form — those go in an `ODialog`/`ODrawer`; see SKILL.md § Forms):
 ## Listing-page checklist
 
 - [ ] Full-height flex skeleton: root `flex flex-col h-full p-0`, header
-      `shrink-0 px-4 border-b border-border-default`, table wrapper
+      `shrink-0 border-b border-border-default` (OPageHeader self-insets with
+      `px-page-edge` — no `px-*` on it), table wrapper
       `card-container flex-1 min-h-0 overflow-hidden` — **no page padding**, table
       runs **flush**.
-- [ ] `AppPageHeader` on top (description via **`subtitle`** prop); primary
+- [ ] `OPageHeader` on top (description via **`subtitle`** prop); primary
       **New** action in `#actions`.
 - [ ] `OTable :frame="false"`; filters + **search** in `#toolbar`
       (`:show-global-filter="false"`), or the built-in global filter for a
diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000000..6313b56c57
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1 @@
+* text=auto eol=lf
diff --git a/.github/workflows/build-pr-image.yml b/.github/workflows/build-pr-image.yml
index e401cab9b1..2ef0b53cc3 100644
--- a/.github/workflows/build-pr-image.yml
+++ b/.github/workflows/build-pr-image.yml
@@ -54,6 +54,18 @@ jobs:
       - name: Lint frontend code
         run: cd web && npm run lint:ci
 
+      - name: Check for undefined CSS custom properties
+        run: cd web && npm run lint:tokens
+
+      - name: Check design-token consistency (strict ratchet — no raw-token creep, no slack)
+        run: cd web && npm run lint:design:strict
+
+      - name: Lint styles (stylelint — bans legacy --o2-* tokens)
+        run: cd web && npm run lint:styles
+
+      - name: Check token-file purity (token files contain tokens only)
+        run: cd web && npm run lint:token-purity
+
       - name: Build frontend code
         env:
           NODE_OPTIONS: "--max-old-space-size=8192"
diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
index 21512e2ce9..21adf46fe6 100644
--- a/.github/workflows/playwright.yml
+++ b/.github/workflows/playwright.yml
@@ -137,6 +137,18 @@ jobs:
       - name: Lint frontend code
         run: cd web && npm ci && npm run lint:ci
 
+      - name: Check for undefined CSS custom properties
+        run: cd web && npm run lint:tokens
+
+      - name: Lint styles (stylelint — bans legacy --o2-* tokens)
+        run: cd web && npm run lint:styles
+
+      - name: Check token-file purity (token files contain tokens only)
+        run: cd web && npm run lint:token-purity
+
+      - name: Check design-consistency ratchet (strict — hardcoded/arbitrary/raw-token, no slack)
+        run: cd web && npm run lint:design:strict
+
       - name: Build binary and frontend
         env:
           NODE_OPTIONS: "--max-old-space-size=8192"
diff --git a/tests/ui-testing/pages/alertsPages/alertCreationWizard.js b/tests/ui-testing/pages/alertsPages/alertCreationWizard.js
index 342196af46..2af235d519 100644
--- a/tests/ui-testing/pages/alertsPages/alertCreationWizard.js
+++ b/tests/ui-testing/pages/alertsPages/alertCreationWizard.js
@@ -372,10 +372,6 @@ export class AlertCreationWizard {
         }
         await this.page.locator('body').click({ position: { x: 10, y: 10 } });
 
-        // Forcefully remove any remaining q-portal elements that intercept clicks
-        await this.page.evaluate(() => {
-            document.querySelectorAll('div[id^="q-portal"]').forEach(el => { el.style.display = 'none'; });
-        }).catch(e => testLogger.warn('Failed to remove q-portal elements', { error: e.message }));
         await this.page.waitForTimeout(300);
 
         // ==================== SUBMIT ====================
@@ -487,10 +483,9 @@ export class AlertCreationWizard {
         await this.page.waitForTimeout(2000);
 
         // Aggressively clean up any portal overlays that may intercept pointer events.
-        // Both the q-portal--dialog and reka-ui (data-reka-dialog-overlay) portals
-        // can linger after the dialog state is toggled off.
+        // The reka-ui (data-reka-dialog-overlay) portals can linger after the dialog
+        // state is toggled off.
         await this.page.evaluate(() => {
-            document.querySelectorAll('div[id^="q-portal--dialog"]').forEach(el => { el.style.display = 'none'; });
             document.querySelectorAll('div[data-reka-dialog-overlay]').forEach(el => { el.style.display = 'none'; });
             document.querySelectorAll('div[data-reka-portalled]').forEach(el => { el.style.display = 'none'; });
         }).catch(e => testLogger.warn('Failed to remove portal overlays', { error: e.message }));
@@ -1050,7 +1045,7 @@ export class AlertCreationWizard {
         // v3 UI may have different toggle mechanisms than v2:
         //   1. [data-test="alert-conditions-toggle-operator-btn"] (v2-style button)
         //   2. Clickable AND chip/label between condition rows (v3-style chip)
-        //   3. Operator dropdown/select (v3-style q-select)
+        //   3. Operator dropdown/select (v3-style select)
         let toggleSuccessful = false;
         let message = '';
 
@@ -1572,7 +1567,7 @@ export class AlertCreationWizard {
         // In measure mode, the "Alert if" row adds a field selector ("count of [field]").
         // Must select a measure column or validateAndFocus() will reject with
         // "Column is required when using an aggregate function."
-        // The field selector is the 2nd q-select in the "Alert if" row (after function dropdown)
+        // The field selector is the 2nd select in the "Alert if" row (after function dropdown)
         const measureColumnSelect = alertIfSection.locator('.alert-v3-select').nth(1);
         await measureColumnSelect.waitFor({ state: 'visible', timeout: 5000 });
         await measureColumnSelect.click();
@@ -1595,9 +1590,9 @@ export class AlertCreationWizard {
         }
 
         // Select first available group-by field
-        // In v3, the Group By section begins with no q-select elements — the
-        // `v-for` loop over `logGroupBy` only renders q-selects when entries exist.
-        // Initially only the "+" add button (q-btn icon="add") is visible.
+        // In v3, the Group By section begins with no select elements — the
+        // `v-for` loop over `logGroupBy` only renders selects when entries exist.
+        // Initially only the "+" add button (add icon) is visible.
         const groupBySection = this.page.locator('.alert-condition-row').filter({ hasText: 'Group by' }).first();
         await groupBySection.waitFor({ state: 'visible', timeout: 5000 });
         // Click the "+" add button to create a group-by field entry
@@ -1605,7 +1600,7 @@ export class AlertCreationWizard {
         await addGroupByBtn.waitFor({ state: 'visible', timeout: 5000 });
         await addGroupByBtn.click();
         await this.page.waitForTimeout(800);
-        // Now the q-select should be rendered by the v-for — select from it
+        // Now the select should be rendered by the v-for — select from it
         const groupBySelect = groupBySection.locator('.alert-v3-select').first();
         await groupBySelect.waitFor({ state: 'visible', timeout: 5000 });
         await groupBySelect.click();
@@ -1619,10 +1614,10 @@ export class AlertCreationWizard {
         // Configure aggregation threshold (v3 UI)
         // i18n key "alerts.queryConfig.havingGroups" renders as "Having groups"
         // In v3, "Having groups" section only has:
-        //   1st q-select: operator (triggerOperator) with options ["=", "!=", ">=", ">", "<=", "<"]
-        //   q-input: threshold value
+        //   1st select: operator (triggerOperator) with options ["=", "!=", ">=", ">", "<=", "<"]
+        //   input: threshold value
         const aggThresholdSection = this.page.locator('.alert-condition-row').filter({ hasText: 'Having groups' }).first();
-        // Operator q-select (first/only q-select in this section)
+        // Operator select (first/only select in this section)
         const aggOperatorSelect = aggThresholdSection.locator('.alert-v3-select').first();
         await aggOperatorSelect.waitFor({ state: 'visible', timeout: 5000 });
         await aggOperatorSelect.click();
@@ -1844,7 +1839,7 @@ export class AlertCreationWizard {
         await this.page.waitForTimeout(300);
         testLogger.info('Set PromQL condition operator', { operator });
 
-        // Set value (q-input has debounce="300")
+        // Set value (input has debounce="300")
         const promqlValueInput = promqlConditionRow.locator('input[type="number"]');
         await promqlValueInput.clear();
         await promqlValueInput.fill(String(conditionValue));
diff --git a/tests/ui-testing/pages/alertsPages/alertDestinationsPage.js b/tests/ui-testing/pages/alertsPages/alertDestinationsPage.js
index 94bf42edf9..e38ceae294 100644
--- a/tests/ui-testing/pages/alertsPages/alertDestinationsPage.js
+++ b/tests/ui-testing/pages/alertsPages/alertDestinationsPage.js
@@ -143,11 +143,6 @@ export class AlertDestinationsPage {
     async navigateToDestinations(retryCount = 0) {
         const maxRetries = 2;
 
-        // Clean up any q-portal elements that may intercept clicks
-        await this.page.evaluate(() => {
-            document.querySelectorAll('div[id^="q-portal"]').forEach(el => { if (el.getAttribute('aria-hidden') === 'true') el.style.display = 'none'; });
-        }).catch(() => {});
-
         try {
             await this.page.waitForLoadState('domcontentloaded', { timeout: 15000 }).catch(() => {});
             await this.page.waitForTimeout(1000);
@@ -871,18 +866,13 @@ export class AlertDestinationsPage {
      * @param {string} destinationName - Name for the destination
      */
     async importDestinationFromFile(filePath, templateName, destinationName) {
-        // Clean up any q-portal elements that may intercept clicks
-        await this.page.evaluate(() => {
-            document.querySelectorAll('div[id^="q-portal"]').forEach(el => { if (el.getAttribute('aria-hidden') === 'true') el.style.display = 'none'; });
-        }).catch(() => {});
-
         // Try multiple fallback selectors for the import button
         const importBtnFallbackLocators = [
             this.destinationImportButton,
             'button:has-text("Import Destination")',
             '[data-test*="destination-import"]',
             'button:has-text("Import")',
-            '.q-table__control button:has-text("Import")',
+            'table button:has-text("Import")',
             'button[data-o2-btn]:has-text("Import")'
         ];
 
@@ -1339,7 +1329,7 @@ export class AlertDestinationsPage {
      */
     async expectStep1Visible() {
         // Step 1 surfaces as the prebuilt destination selector being mounted/visible — the legacy
-        // q-stepper class has been removed in the UX revamp, so anchor on the selector data-test.
+        // stepper class has been removed in the UX revamp, so anchor on the selector data-test.
         await expect(this.page.locator(this.prebuiltDestinationSelector)).toBeVisible({ timeout: 10000 });
         testLogger.debug('Step 1 (destination selector) visible');
     }
diff --git a/tests/ui-testing/pages/alertsPages/alertManagement.js b/tests/ui-testing/pages/alertsPages/alertManagement.js
index 845b601a93..0dba53e417 100644
--- a/tests/ui-testing/pages/alertsPages/alertManagement.js
+++ b/tests/ui-testing/pages/alertsPages/alertManagement.js
@@ -511,7 +511,7 @@ export class AlertManagement {
 
     /**
      * Open alert details dialog by clicking alert name in the list (PR #10470)
-     * The new AlertHistoryDrawer is rendered inside a q-dialog
+     * The new AlertHistoryDrawer is rendered inside a dialog
      * @param {string} alertName - Name of the alert
      */
     async openAlertDetailsDialog(alertName) {
diff --git a/tests/ui-testing/pages/alertsPages/alertTemplatesPage.js b/tests/ui-testing/pages/alertsPages/alertTemplatesPage.js
index 21fedd5658..8378a5dfa9 100644
--- a/tests/ui-testing/pages/alertsPages/alertTemplatesPage.js
+++ b/tests/ui-testing/pages/alertsPages/alertTemplatesPage.js
@@ -67,11 +67,6 @@ export class AlertTemplatesPage {
     async navigateToTemplates(retryCount = 0) {
         const maxRetries = 2; // Maximum number of retry attempts
 
-        // Clean up any q-portal elements that may intercept clicks
-        await this.page.evaluate(() => {
-            document.querySelectorAll('div[id^="q-portal"]').forEach(el => { if (el.getAttribute('aria-hidden') === 'true') el.style.display = 'none'; });
-        }).catch(() => {});
-
         try {
             await this.page.waitForLoadState('domcontentloaded', { timeout: 15000 }).catch(() => {});
             await this.page.waitForTimeout(1000);
@@ -169,20 +164,15 @@ export class AlertTemplatesPage {
         await this.navigateToTemplates();
         await this.page.waitForTimeout(2000);
 
-        // Clean up any q-portal elements that may intercept clicks
-        await this.page.evaluate(() => {
-            document.querySelectorAll('div[id^="q-portal"]').forEach(el => { if (el.getAttribute('aria-hidden') === 'true') el.style.display = 'none'; });
-        }).catch(() => {});
-
         // Try multiple fallback selectors for add button
         const addBtnLocator = this.page.locator(this.addTemplateButton);
         const addBtnFallbackLocators = [
             this.addTemplateButton,
             'button:has-text("Add Template")',
-            '.q-table__control button',
+            'table button',
             'button[data-test*="add"]',
             'button:has(.OIcon):has-text("add")',
-            '.q-toolbar button:has-text("Add")',
+            '[role="toolbar"] button:has-text("Add")',
             'button[data-o2-btn]:has-text("Add Template")'
         ];
 
@@ -250,7 +240,7 @@ export class AlertTemplatesPage {
             // Strategy 2: data-test selector for template search
             () => this.page.locator('[data-test="alert-template-search-input"]'),
             // Strategy 3: input inside the templates section (look for search/filter input)
-            () => this.page.locator('[data-o2-page-container] .q-table__control input[type="text"], [data-o2-page-container] input.q-field__input[placeholder*="Search"], [data-o2-page-container] input[placeholder*="search"]').first()
+            () => this.page.locator('[data-o2-page-container] input[placeholder*="search"]').first()
         ];
 
         for (const strategy of strategies) {
@@ -515,11 +505,6 @@ export class AlertTemplatesPage {
         await this.navigateToTemplates();
         await this.page.waitForTimeout(2000);
 
-        // Clean up any q-portal elements that may intercept clicks
-        await this.page.evaluate(() => {
-            document.querySelectorAll('div[id^="q-portal"]').forEach(el => { if (el.getAttribute('aria-hidden') === 'true') el.style.display = 'none'; });
-        }).catch(() => {});
-
         await this.page.locator(this.addTemplateButton).click({ force: true });
         await this.page.waitForTimeout(2000);
 
@@ -774,18 +759,13 @@ export class AlertTemplatesPage {
             await this.navigateToTemplates();
             await this.page.waitForTimeout(2000);
 
-            // Clean up any q-portal elements that may intercept clicks
-            await this.page.evaluate(() => {
-                document.querySelectorAll('div[id^="q-portal"]').forEach(el => { if (el.getAttribute('aria-hidden') === 'true') el.style.display = 'none'; });
-            }).catch(() => {});
-
             // Try import button selectors (avoiding overly broad selectors that click wrong elements)
             const importBtnFallbackLocators = [
                 this.templateImportButton,
                 'button:has-text("Import Template")',
                 '[data-test*="template-import"]',
                 'button:has-text("Import")',
-                '.q-table__control button:has-text("Import")',
+                'table button:has-text("Import")',
             ];
 
             let importBtnClicked = false;
@@ -1232,7 +1212,7 @@ export class AlertTemplatesPage {
     }
 
     async expectValidationErrorVisible(message) {
-        // OInput shows error in .q-field__messages or .q-field__bottom
+        // OInput shows the error message text below the field
         await expect(this.page.getByText(message)).toBeVisible({ timeout: 5000 });
     }
 
@@ -1260,7 +1240,7 @@ export class AlertTemplatesPage {
         }
         // Try paginating through pages to find prebuilt badges
         for (let pageNum = 0; pageNum < 10; pageNum++) {
-            const nextBtn = this.page.locator('button.q-pagination button[aria-label*="Next"], button:has-text("chevron_right")').first();
+            const nextBtn = this.page.locator('button:has-text("chevron_right")').first();
             if (await nextBtn.isVisible({ timeout: 1000 }).catch(() => false)) {
                 const isDisabled = await nextBtn.isDisabled().catch(() => true);
                 if (isDisabled) break;
diff --git a/tests/ui-testing/pages/alertsPages/alertsPage.js b/tests/ui-testing/pages/alertsPages/alertsPage.js
index 56586bb081..6455ce5c67 100644
--- a/tests/ui-testing/pages/alertsPages/alertsPage.js
+++ b/tests/ui-testing/pages/alertsPages/alertsPage.js
@@ -534,7 +534,7 @@ export class AlertsPage {
      * Returns 'table' if history table is visible, 'empty' if empty state is shown
      */
     async expectAlertDetailsHistorySectionVisible() {
-        // The history section shows either a q-table (when history exists) or an empty state
+        // The history section shows either a history table (when history exists) or an empty state
         const table = this.page.locator(this.locators.alertDetailsHistoryTable);
         const emptyState = this.page.locator('text=No history available').or(this.page.locator('.OIcon:has-text("history")'));
 
@@ -658,7 +658,7 @@ export class AlertsPage {
     async expectNoChartError() {
         const chartArea = this.page.locator(this.locators.alertPreviewChart);
         // Assert no error-class banner is visible within the chart container
-        const errorBanner = chartArea.locator('[class*="error"], .q-banner--negative').first();
+        const errorBanner = chartArea.locator('[class*="error"]').first();
         await expect(errorBanner).not.toBeVisible({ timeout: 5000 });
         // Assert no error text pattern is visible anywhere in the chart area.
         // Do NOT swallow — a "Schema error" / "No field named" banner must fail the test.
@@ -666,7 +666,7 @@ export class AlertsPage {
         await expect(errorText).not.toBeAttached({ timeout: 3000 });
 
         // Also check page-level error toasts/banners rendered outside the chart container
-        const pageError = this.page.locator('[role="alert"][class*="bg-negative"], .q-banner--negative').first();
+        const pageError = this.page.locator('[role="alert"][class*="bg-negative"]').first();
         await expect(pageError).not.toBeVisible({ timeout: 5000 });
 
         testLogger.info('No chart error detected');
@@ -678,7 +678,7 @@ export class AlertsPage {
      */
     async getChartErrorMessage() {
         const chartArea = this.page.locator(this.locators.alertPreviewChart);
-        const errorEl = chartArea.locator('[class*="error"], .q-banner--negative, [role="alert"][class*="bg-negative"]').first();
+        const errorEl = chartArea.locator('[class*="error"], [role="alert"][class*="bg-negative"]').first();
         if (await errorEl.isVisible({ timeout: 2000 }).catch(() => false)) {
             return await errorEl.textContent();
         }
@@ -877,10 +877,6 @@ export class AlertsPage {
         await this.commonActions.navigateToAlerts();
         await this.page.waitForTimeout(1000);
 
-        // Clean up any q-portal overlays that may intercept clicks
-        await this.page.evaluate(() => {
-            document.querySelectorAll('div[id^="q-portal"]').forEach(el => { if (el.getAttribute('aria-hidden') === 'true') el.style.display = 'none'; });
-        }).catch(() => {});
         await this.page.waitForTimeout(500);
 
         await this.page.locator(this.locators.newFolderButton).click();
@@ -1146,12 +1142,12 @@ export class AlertsPage {
         await this.page.waitForTimeout(500);
 
         // v3 wizard may handle validation differently:
-        //   A) Show inline q-field--error on missing fields
+        //   A) Show inline field error on missing fields
         //   B) Show a toast/notification at the top of the form
         //   C) Submit successfully (if optional fields have defaults)
         // Wait for any of these outcomes within the timeout window.
-        const errorFields = this.page.locator('.q-field--error');
-        const anyToast = this.page.locator('[role="alert"], .q-alert, .notifications');
+        const errorFields = this.page.locator('[aria-invalid="true"]');
+        const anyToast = this.page.locator('[role="alert"], .notifications');
         const successMsg = this.page.locator('[data-test-variant="success"] [data-test="o-toast-message"]').filter({ hasText: this.locators.alertSuccessMessage });
 
         const outcomes = await Promise.race([
@@ -1990,7 +1986,7 @@ export class AlertsPage {
      * @returns {Promise<string>} e.g. "P1", "P2", "P3", "P4"
      */
     async getSeverityBadgeText() {
-        // Match the q-badge that contains P1, P2, P3, or P4 text
+        // Match the badge that contains P1, P2, P3, or P4 text
         const badge = this.page.locator(this.locators.severityBadge).filter({ hasText: /^.*P[1-4].*$/ });
         await badge.first().waitFor({ state: 'visible', timeout: 10000 });
         // Get just the span with the severity value (first span inside the inner div)
@@ -2053,7 +2049,7 @@ export class AlertsPage {
 
     /**
      * Verify the service graph tab content rendered.
-     * Tabs are v-if gated (no q-tab-panel wrapper). The serviceGraph tab
+     * Tabs are v-if gated (no tab-panel wrapper). The serviceGraph tab
      * renders IncidentServiceGraph inside an absolute-positioned div.
      * Checks for the .incident-service-graph container OR the detail page
      * still being visible (confirming no crash).
@@ -2871,12 +2867,12 @@ export class AlertsPage {
     }
 
     /**
-     * Force-remove residual q-portal elements that occasionally intercept clicks
+     * Force-remove residual portal overlays that occasionally intercept clicks
      * after closing the SQL editor dialog. Used in scheduled feature tests.
      */
     async removeResidualPortals() {
         await this.page.evaluate(() => {
-            document.querySelectorAll('div[id^="q-portal"]').forEach(el => el.remove());
+            document.querySelectorAll('div[data-reka-dialog-overlay], div[data-reka-portalled]').forEach(el => el.remove());
         }).catch(() => {});
     }
 
@@ -2894,7 +2890,7 @@ export class AlertsPage {
      * @param {number} stepIndex - 0-based step index
      */
     async clickStepIndicator(stepIndex) {
-        const indicators = this.page.locator('.alert-v3-steps .step-indicator, [data-test*="step-indicator"] .q-stepper__nav-item, .alert-v3-steps > div > div');
+        const indicators = this.page.locator('.alert-v3-steps .step-indicator, [data-test*="step-indicator"], .alert-v3-steps > div > div');
         const target = indicators.nth(stepIndex);
         await target.waitFor({ state: 'visible', timeout: 10000 });
         await target.click({ force: true });
@@ -3145,11 +3141,6 @@ export class AlertsPage {
      * Click the update button for a specific alert
      */
     async clickAlertUpdateButton(alertName) {
-        // Clean up any q-portal overlays that may intercept clicks
-        await this.page.evaluate(() => {
-            document.querySelectorAll('div[id^="q-portal"]').forEach(el => { if (el.getAttribute('aria-hidden') === 'true') el.style.display = 'none'; });
-        }).catch(() => {});
-
         // Search for the alert first
         await this.searchAlert(alertName);
         await this.page.waitForTimeout(1000);
@@ -3584,7 +3575,7 @@ export class AlertsPage {
 
     /**
      * Get autocomplete suggestions dropdown items
-     * Scoped to menu context to avoid matching all q-items on page
+     * Scoped to menu context to avoid matching all option items on page
      * @returns {Locator}
      */
     getAutocompleteSuggestions() {
@@ -3607,8 +3598,8 @@ export class AlertsPage {
      * In v3, aggregation is controlled by selecting a measure function from a dropdown:
      * - "total events" (default) = no aggregation, no group-by
      * - "count", "avg", "sum", etc. = aggregation enabled, group-by appears
-     * This replaces the v2 q-toggle for aggregation.
-     * @returns {Locator} The function dropdown q-select element
+     * This replaces the v2 toggle for aggregation.
+     * @returns {Locator} The function dropdown select element
      */
     getAggregationToggle() {
         // The aggregation function OSelect has no data-test. Its trigger is the first
@@ -3639,7 +3630,7 @@ export class AlertsPage {
 
     /**
      * Enable aggregation by selecting 'count' from the function dropdown (v3 UI).
-     * This replaces the v2 behavior of clicking a q-toggle.
+     * This replaces the v2 behavior of clicking a toggle.
      */
     async enableAggregation() {
         const toggle = this.getAggregationToggle();
@@ -3651,7 +3642,7 @@ export class AlertsPage {
 
     /**
      * Disable aggregation by selecting 'total events' from the function dropdown (v3 UI).
-     * This replaces the v2 behavior of clicking a q-toggle off.
+     * This replaces the v2 behavior of clicking a toggle off.
      */
     async disableAggregation() {
         const toggle = this.getAggregationToggle();
@@ -3865,6 +3856,6 @@ export class AlertsPage {
      * @returns {Locator}
      */
     getErrorMessageBanner() {
-        return this.page.locator('[class*="error"], .q-banner--negative, [data-test*="error"]');
+        return this.page.locator('[class*="error"], [data-test*="error"]');
     }
 }
diff --git a/tests/ui-testing/pages/anomalyPages/anomalyDetectionPage.js b/tests/ui-testing/pages/anomalyPages/anomalyDetectionPage.js
index 12c7c51535..20f1ec3c08 100644
--- a/tests/ui-testing/pages/anomalyPages/anomalyDetectionPage.js
+++ b/tests/ui-testing/pages/anomalyPages/anomalyDetectionPage.js
@@ -56,7 +56,7 @@ class AnomalyDetectionPage {
 
             // Alerting
             alertEnabled: '[data-test="anomaly-alert-enabled"]',
-            alertToggleLabel: '.q-toggle__label',
+            alertToggleLabel: '[role="switch"]',
             destination: '[data-test="anomaly-destination"]',
             destinationError: '[data-test="anomaly-destination-error"]',
             refreshDestinationsBtn: '[data-test="anomaly-refresh-destinations"]',
@@ -67,7 +67,7 @@ class AnomalyDetectionPage {
             cancelButton: '[data-test="add-alert-cancel-btn"]',
 
             // Generic framework components
-            qToggle: '.q-toggle',
+            qToggle: '[role="switch"]',
             qMenuItem: '[data-test$="-popover"] [data-test$="-option"]',
             qMenu: '[data-test$="-popover"]',
             qDialog: '[data-test$="-dialog"]',
@@ -357,7 +357,7 @@ class AnomalyDetectionPage {
         const toggleSelectors = [
             this.selectors.alertEnabled,
             '[data-test="anomaly-alert-enabled"]',
-            '.q-toggle'
+            '[role="switch"]'
         ];
 
         let toggle = null;
@@ -376,7 +376,7 @@ class AnomalyDetectionPage {
         }
 
         // Get toggle label to determine state
-        const toggleLabel = await toggle.locator('div.q-toggle__label').textContent().catch(() => '');
+        const toggleLabel = await toggle.locator('[role="switch"]').textContent().catch(() => '');
         testLogger.info('Alert toggle state', { toggleLabel });
 
         if (toggleLabel.toLowerCase().includes('enabled')) {
@@ -385,7 +385,7 @@ class AnomalyDetectionPage {
             await this.page.waitForTimeout(1000);
 
             // Verify it was disabled
-            const newLabel = await toggle.locator('div.q-toggle__label').textContent().catch(() => '');
+            const newLabel = await toggle.locator('[role="switch"]').textContent().catch(() => '');
             testLogger.info('After clicking toggle', { toggleLabel: newLabel });
             testLogger.info('Disabled alerting');
         } else {
@@ -464,7 +464,7 @@ class AnomalyDetectionPage {
         const filterCount = await filterRows.count();
         const lastFilterRow = filterRows.nth(filterCount - 1);
 
-        // 1. Fill the field select (first q-select in the row)
+        // 1. Fill the field select (first select in the row)
         const fieldSelect = lastFilterRow.locator('.filter-field-select, .alert-v3-select').first();
         await expect(fieldSelect).toBeVisible({ timeout: 3000 });
         await fieldSelect.click();
@@ -484,7 +484,7 @@ class AnomalyDetectionPage {
         }
         await this.page.waitForTimeout(500);
 
-        // 2. Fill the operator select (second q-select in the row)
+        // 2. Fill the operator select (second select in the row)
         const operatorSelect = lastFilterRow.locator('.alert-v3-select').nth(1);
         if (await operatorSelect.isVisible({ timeout: 2000 }).catch(() => false)) {
             await operatorSelect.click();
@@ -499,7 +499,7 @@ class AnomalyDetectionPage {
             await this.page.waitForTimeout(500);
         }
 
-        // 3. Fill the value input (q-input in the row)
+        // 3. Fill the value input (input in the row)
         const valueInput = lastFilterRow.locator('.alert-v3-input input, input').first();
         if (await valueInput.isVisible({ timeout: 2000 }).catch(() => false)) {
             await valueInput.click();
diff --git a/tests/ui-testing/pages/commonActions.js b/tests/ui-testing/pages/commonActions.js
index 8168595969..a250f0f5ed 100644
--- a/tests/ui-testing/pages/commonActions.js
+++ b/tests/ui-testing/pages/commonActions.js
@@ -138,7 +138,7 @@ export class CommonActions {
      */
     async scrollAndFindOption(optionName, optionType) {
         // Target the visible dropdown — OSelect (Reka Listbox) post-migration,
-        // q-select (.q-menu) pre-migration.
+        // legacy select pre-migration.
         const dropdown = this.page.locator('[data-test$="-popover"]').first();
 
         // Fast path for the migrated OSelect: it renders a ListboxFilter search input
diff --git a/tests/ui-testing/pages/dashboardPages/dashCreation.js b/tests/ui-testing/pages/dashboardPages/dashCreation.js
index 36794bdd59..1fed797c82 100644
--- a/tests/ui-testing/pages/dashboardPages/dashCreation.js
+++ b/tests/ui-testing/pages/dashboardPages/dashCreation.js
@@ -88,7 +88,7 @@ export async function deleteDashboard(page, dashboardName) {
   const deleteButton = dashboardRow.locator('[data-test="dashboard-delete"]');
   await deleteButton.click();
 
-  // Wait for the confirm button to be visible (q-dialog teleports content to body; text element
+  // Wait for the confirm button to be visible (dialog teleports content to body; text element
   // may be in DOM but hidden during animation — confirm button visibility is more reliable)
   await page.locator('[data-test="o-dialog-primary-btn"]').waitFor({
     state: 'visible',
diff --git a/tests/ui-testing/pages/dashboardPages/dashboard-import.js b/tests/ui-testing/pages/dashboardPages/dashboard-import.js
index bb6ea0a677..743415841d 100644
--- a/tests/ui-testing/pages/dashboardPages/dashboard-import.js
+++ b/tests/ui-testing/pages/dashboardPages/dashboard-import.js
@@ -91,7 +91,7 @@ export default class DashboardImport {
       // Tab might already be active, continue
     }
 
-    // The q-file renders the underlying input as hidden — wait for
+    // The file control renders the underlying input as hidden — wait for
     // `attached` (not visible) since setInputFiles works on hidden inputs.
     await this.inputFile.waitFor({ state: "attached", timeout: 20000 });
 
diff --git a/tests/ui-testing/pages/dashboardPages/dashboard-multi-sql.js b/tests/ui-testing/pages/dashboardPages/dashboard-multi-sql.js
index ca429a28d9..041421f244 100644
--- a/tests/ui-testing/pages/dashboardPages/dashboard-multi-sql.js
+++ b/tests/ui-testing/pages/dashboardPages/dashboard-multi-sql.js
@@ -74,7 +74,7 @@ export default class DashboardMultiSQL {
    * Locator for the trellis-chart OSelect when it is disabled.
    * OSelect renders an inner trigger button that carries the same
    * `data-test` as the wrapper, plus the standard `disabled` attribute
-   * when the prop is set. The `.q-field--disabled` class no longer exists
+   * when the prop is set. The legacy disabled class no longer exists
    * after the v1 UX revamp.
    */
   trellisDisabled() {
diff --git a/tests/ui-testing/pages/dashboardPages/dashboard-panel-configs.js b/tests/ui-testing/pages/dashboardPages/dashboard-panel-configs.js
index fcd98cdac8..5d24c28481 100644
--- a/tests/ui-testing/pages/dashboardPages/dashboard-panel-configs.js
+++ b/tests/ui-testing/pages/dashboardPages/dashboard-panel-configs.js
@@ -579,17 +579,15 @@ export default class DashboardPanelConfigs {
 
   /**
    * Fill the threshold for the conditional rule at ruleIdx (default operator "<").
-   * The threshold OInput has no data-test; scoped via the rule row's `.w-28` container,
-   * located by walking up from the ruleIdx's text-color swatch (which does have a data-test).
+   * The threshold OInput carries `o2-format-cond-threshold-<field>-<ruleIdx>`, which
+   * OInput forwards to its inner <input> as `...-field`.
    */
   async fillConditionThreshold(ruleIdx, threshold) {
-    const anchor = this.overrideDialog
-      .locator(`[data-test^="o2-format-cond-text-"][data-test$="-${ruleIdx}"]`)
+    const thresholdInput = this.overrideDialog
+      .locator(
+        `[data-test^="o2-format-cond-threshold-"][data-test$="-${ruleIdx}-field"]`
+      )
       .first();
-    const row = anchor.locator(
-      'xpath=ancestor::div[contains(@class,"rounded-md")][1]'
-    );
-    const thresholdInput = row.locator(".w-28 input").first();
     await thresholdInput.waitFor({ state: "visible", timeout: 5000 });
     await thresholdInput.fill(String(threshold));
   }
diff --git a/tests/ui-testing/pages/dashboardPages/dashboard-refresh.js b/tests/ui-testing/pages/dashboardPages/dashboard-refresh.js
index f6d6a474f2..c1eb685ac6 100644
--- a/tests/ui-testing/pages/dashboardPages/dashboard-refresh.js
+++ b/tests/ui-testing/pages/dashboardPages/dashboard-refresh.js
@@ -29,7 +29,7 @@ export default class DashboardTimeRefresh {
   async setRelative(date, time) {
     // Wait until the trigger is visible (not just attached). attached only
     // checks DOM presence, but in CI the button can be in the DOM before its
-    // q-menu is ready to open — clicking too early opens nothing and the
+    // menu is ready to open — clicking too early opens nothing and the
     // subsequent relativeTime.click() waits forever.
     await this.timeTab.waitFor({ state: "visible" });
 
diff --git a/tests/ui-testing/pages/dashboardPages/dashboard-selectors.js b/tests/ui-testing/pages/dashboardPages/dashboard-selectors.js
index 77260ab1a0..27b43b856b 100644
--- a/tests/ui-testing/pages/dashboardPages/dashboard-selectors.js
+++ b/tests/ui-testing/pages/dashboardPages/dashboard-selectors.js
@@ -20,26 +20,26 @@ const COMPONENTS = {
   // overlay intercepts pointer events on the dashboard, so missing the new selector
   // here causes clicks on variable dropdowns to time out.
   DIALOG: '[data-test="dashboard-settings-drawer"], [data-o2-dialog], [data-o2-drawer]',
-  DIALOG_CARD: '[data-test="dashboard-settings-drawer"] .q-card',
+  DIALOG_CARD: '[data-test="dashboard-settings-drawer"]',
 
   // Menu/Dropdown components
   MENU: '[data-test$="-popover"]',
   MENU_ITEM: '[data-test$="-option"]',
 
   // Form components
-  CHECKBOX: '.q-checkbox',
-  CHECKBOX_CHECKED: '.q-checkbox[aria-checked="true"]',
-  CHECKBOX_UNCHECKED: '.q-checkbox[aria-checked="false"]',
+  CHECKBOX: '[role="checkbox"]',
+  CHECKBOX_CHECKED: '[role="checkbox"][aria-checked="true"]',
+  CHECKBOX_UNCHECKED: '[role="checkbox"][aria-checked="false"]',
 
   // Loading indicators (legacy — kept for backward compat; prefer specific data-test selectors)
   SPINNER: '[data-test*="loading-indicator"]',
   LINEAR_PROGRESS: '[data-test*="loading-indicator"]',
 
-  // Chip/Badge components — OBadge replaces q-chip; use data-test or aria where available
+  // Chip/Badge components — OBadge replaces the legacy chip; use data-test or aria where available
   CHIP: '[data-test*="chip"], [data-test*="badge"]',
 
   // Tooltip
-  TOOLTIP: '.q-tooltip',
+  TOOLTIP: '[role="tooltip"]',
 };
 
 /**
@@ -209,7 +209,7 @@ function getPanelRefreshBtn(panelId) {
 
 /**
  * Get menu item by text (case-insensitive)
- * Uses filter pattern: .q-item filter hasText
+ * Uses filter pattern: option filter hasText
  * @param {string} text - Item text
  * @param {boolean} exact - Use exact match (default: true)
  * @returns {Object} Object with selector and filter pattern
diff --git a/tests/ui-testing/pages/dashboardPages/dashboard-settings.js b/tests/ui-testing/pages/dashboardPages/dashboard-settings.js
index 97722301de..5e11573c5e 100644
--- a/tests/ui-testing/pages/dashboardPages/dashboard-settings.js
+++ b/tests/ui-testing/pages/dashboardPages/dashboard-settings.js
@@ -235,7 +235,7 @@ export default class DashboardSetting {
     await generalTab.waitFor({ state: "visible", timeout: 10000 });
     await this.page.waitForLoadState('domcontentloaded').catch(() => {});
 
-    // Wait for dialog tabs to be fully loaded - the tabs are in a q-tabs container
+    // Wait for dialog tabs to be fully loaded - the tabs are in a tabs container
     await this.page.waitForLoadState('networkidle', { timeout: 5000 }).catch(() => {});
 
     // Retry pattern for clicking variables tab (element can get detached during dialog transitions)
diff --git a/tests/ui-testing/pages/dashboardPages/dashboard-variables-scoped.js b/tests/ui-testing/pages/dashboardPages/dashboard-variables-scoped.js
index ffba603e03..03abb5c915 100644
--- a/tests/ui-testing/pages/dashboardPages/dashboard-variables-scoped.js
+++ b/tests/ui-testing/pages/dashboardPages/dashboard-variables-scoped.js
@@ -1306,7 +1306,7 @@ export default class DashboardVariablesScoped {
         const isDefault = typeof value === 'object' && value.selected === true;
 
         // If this is not the first item, add a new option and wait for it to appear.
-        // The q-field__bottom validation div permanently intercepts pointer events over
+        // The field's bottom validation div permanently intercepts pointer events over
         // the button, blocking both regular and force clicks. Use evaluate() to call the DOM
         // native click() which fires the full event sequence and bypasses CSS pointer-events.
         if (i > 0) {
diff --git a/tests/ui-testing/pages/dashboardPages/dashboardPage.js b/tests/ui-testing/pages/dashboardPages/dashboardPage.js
index 4fb1228c44..e8b6741452 100644
--- a/tests/ui-testing/pages/dashboardPages/dashboardPage.js
+++ b/tests/ui-testing/pages/dashboardPages/dashboardPage.js
@@ -281,7 +281,7 @@ export class DashboardPage {
     // input it is, so Enter triggers the form's implicit submit → onSave →
     // savePanelChangesToDashboard, which saves the panel and navigates away,
     // detaching the Apply button mid-flow (see reports E2E timeouts on
-    // [data-test="dashboard-apply"]). The legacy q-input ignored Enter;
+    // [data-test="dashboard-apply"]). The legacy input ignored Enter;
     // .fill() already commits the title through OFormInput's reactive binding,
     // so no key press is needed to "commit" the name.
     await expect(this.applyButton).toBeVisible();
diff --git a/tests/ui-testing/pages/generalPages/correlationSettingsPage.js b/tests/ui-testing/pages/generalPages/correlationSettingsPage.js
index 480de3a7ad..0bf27c9df2 100644
--- a/tests/ui-testing/pages/generalPages/correlationSettingsPage.js
+++ b/tests/ui-testing/pages/generalPages/correlationSettingsPage.js
@@ -404,8 +404,8 @@ export class CorrelationSettingsPage {
         }
         // Last resort - check for checked class
         const hasCheckedClass = await checkbox.evaluate(el => {
-            return el.classList.contains('q-checkbox--checked') ||
-                   el.closest('.q-checkbox')?.classList.contains('q-checkbox--checked');
+            return el.classList.contains('checked') ||
+                   el.closest('[role="checkbox"]')?.getAttribute('aria-checked') === 'true';
         }).catch(() => false);
         return hasCheckedClass;
     }
@@ -539,7 +539,7 @@ export class CorrelationSettingsPage {
 
     async getAvailableDimensionsCount() {
         // Count items in the available dimensions list (right side)
-        const list = this.page.locator('.q-list').nth(1); // TODO: verify list container selector post-Reka migration
+        const list = this.page.locator('[role="listbox"]').nth(1); // TODO: verify list container selector post-Reka migration
         await list.waitFor({ state: 'visible', timeout: 10000 });
         const items = list.locator('[role="option"], [data-test$="-item"]'); // TODO: verify data-test for dimension list items
         return await items.count();
@@ -586,7 +586,7 @@ export class CorrelationSettingsPage {
         }
         // Fallback: check for checked class
         const classList = await checkbox.getAttribute('class');
-        return classList?.includes('q-checkbox--checked') || classList?.includes('checked');
+        return classList?.includes('checked');
     }
 
     // ==================== Alert Correlation Save Button ====================
@@ -613,11 +613,11 @@ export class CorrelationSettingsPage {
      * @param {string} dimensionName - Name of dimension to select
      */
     async selectAvailableDimension(dimensionName) {
-        // Available dimensions are in the second q-list (right side) within service-identity-config
+        // Available dimensions are in the second list (right side) within service-identity-config
         const serviceConfig = this.page.locator('.service-identity-config');
         await serviceConfig.waitFor({ state: 'visible', timeout: 10000 });
-        // Lists have q-list--bordered class (from the bordered prop) and h-80 height class
-        const lists = serviceConfig.locator('.q-list--bordered, .q-list.tw\\:h-80');
+        // Bordered lists (from the bordered prop) with the h-80 height class
+        const lists = serviceConfig.locator('[role="listbox"]');
         const rightList = lists.last();
         await rightList.waitFor({ state: 'visible', timeout: 5000 });
         const item = rightList.locator('[role="option"], [data-test$="-item"]').filter({ hasText: dimensionName }).first(); // TODO: verify data-test
@@ -631,11 +631,11 @@ export class CorrelationSettingsPage {
      * @param {string} dimensionName - Name of dimension to select
      */
     async selectPriorityDimension(dimensionName) {
-        // Priority dimensions are in the first q-list (left side) within service-identity-config
+        // Priority dimensions are in the first list (left side) within service-identity-config
         const serviceConfig = this.page.locator('.service-identity-config');
         await serviceConfig.waitFor({ state: 'visible', timeout: 10000 });
-        // Lists have q-list--bordered class (from the bordered prop) and h-80 height class
-        const lists = serviceConfig.locator('.q-list--bordered, .q-list.tw\\:h-80');
+        // Bordered lists (from the bordered prop) with the h-80 height class
+        const lists = serviceConfig.locator('[role="listbox"]');
         const leftList = lists.first();
         await leftList.waitFor({ state: 'visible', timeout: 5000 });
         const item = leftList.locator('[role="option"], [data-test$="-item"]').filter({ hasText: dimensionName }).first(); // TODO: verify data-test
@@ -651,8 +651,8 @@ export class CorrelationSettingsPage {
     async getPriorityDimensionsCount() {
         const serviceConfig = this.page.locator('.service-identity-config');
         await serviceConfig.waitFor({ state: 'visible', timeout: 10000 });
-        // Lists have q-list--bordered class (from the bordered prop) and h-80 height class
-        const lists = serviceConfig.locator('.q-list--bordered, .q-list.tw\\:h-80');
+        // Bordered lists (from the bordered prop) with the h-80 height class
+        const lists = serviceConfig.locator('[role="listbox"]');
         const leftList = lists.first();
         await leftList.waitFor({ state: 'visible', timeout: 5000 });
         // Exclude empty state items (the "No dimensions configured" message)
@@ -666,8 +666,8 @@ export class CorrelationSettingsPage {
      */
     async expectPriorityDimensionExists(dimensionName) {
         const serviceConfig = this.page.locator('.service-identity-config');
-        // Lists have q-list--bordered class (from the bordered prop) and h-80 height class
-        const lists = serviceConfig.locator('.q-list--bordered, .q-list.tw\\:h-80');
+        // Bordered lists (from the bordered prop) with the h-80 height class
+        const lists = serviceConfig.locator('[role="listbox"]');
         const leftList = lists.first();
         const item = leftList.locator('[role="option"], [data-test$="-item"]').filter({ hasText: dimensionName }).first(); // TODO: verify data-test
         await expect(item).toBeVisible({ timeout: 5000 });
@@ -679,8 +679,8 @@ export class CorrelationSettingsPage {
      */
     async expectPriorityDimensionNotExists(dimensionName) {
         const serviceConfig = this.page.locator('.service-identity-config');
-        // Lists have q-list--bordered class (from the bordered prop) and h-80 height class
-        const lists = serviceConfig.locator('.q-list--bordered, .q-list.tw\\:h-80');
+        // Bordered lists (from the bordered prop) with the h-80 height class
+        const lists = serviceConfig.locator('[role="listbox"]');
         const leftList = lists.first();
         const item = leftList.locator('[role="option"], [data-test$="-item"]').filter({ hasText: dimensionName }).first(); // TODO: verify data-test
         await expect(item).not.toBeVisible({ timeout: 5000 });
@@ -734,7 +734,7 @@ export class CorrelationSettingsPage {
             return isChecked === 'true';
         }
         const classList = await checkbox.getAttribute('class');
-        return classList?.includes('q-checkbox--checked') || classList?.includes('checked');
+        return classList?.includes('checked');
     }
 
     /**
@@ -773,7 +773,7 @@ export class CorrelationSettingsPage {
     async expectServicesDataLoaded() {
         await this.page.locator(this.loadingSpinner).waitFor({ state: 'hidden', timeout: 30000 }).catch(() => {});
         // Check for either services content or empty state
-        const hasContent = await this.page.locator('.q-table, .q-list, .discovered-services-content').first().isVisible().catch(() => false);
+        const hasContent = await this.page.locator('table, [role="listbox"], .discovered-services-content').first().isVisible().catch(() => false);
         const hasEmptyState = await this.page.locator('text=/no.*service|empty/i').first().isVisible().catch(() => false);
         return hasContent || hasEmptyState;
     }
@@ -857,8 +857,8 @@ export class CorrelationSettingsPage {
     async getFirstAvailableDimensionName() {
         const serviceConfig = this.page.locator('.service-identity-config');
         await serviceConfig.waitFor({ state: 'visible', timeout: 10000 });
-        // Lists have q-list--bordered class (from the bordered prop) and h-80 height class
-        const lists = serviceConfig.locator('.q-list--bordered, .q-list.tw\\:h-80');
+        // Bordered lists (from the bordered prop) with the h-80 height class
+        const lists = serviceConfig.locator('[role="listbox"]');
         const rightList = lists.last();
         await rightList.waitFor({ state: 'visible', timeout: 5000 });
         const firstItem = rightList.locator('[role="option"]:not(:has-text("No")), [data-test$="-item"]:not(:has-text("No"))').first(); // TODO: verify data-test
@@ -881,8 +881,8 @@ export class CorrelationSettingsPage {
     async getFirstPriorityDimensionName() {
         const serviceConfig = this.page.locator('.service-identity-config');
         await serviceConfig.waitFor({ state: 'visible', timeout: 10000 });
-        // Lists have q-list--bordered class (from the bordered prop) and h-80 height class
-        const lists = serviceConfig.locator('.q-list--bordered, .q-list.tw\\:h-80');
+        // Bordered lists (from the bordered prop) with the h-80 height class
+        const lists = serviceConfig.locator('[role="listbox"]');
         const leftList = lists.first();
         await leftList.waitFor({ state: 'visible', timeout: 5000 });
         const firstItem = leftList.locator('[role="option"]:not(:has-text("No")), [data-test$="-item"]:not(:has-text("No"))').first(); // TODO: verify data-test
diff --git a/tests/ui-testing/pages/generalPages/enrichmentPage.js b/tests/ui-testing/pages/generalPages/enrichmentPage.js
index 1e483135fd..cb5bc2db73 100644
--- a/tests/ui-testing/pages/generalPages/enrichmentPage.js
+++ b/tests/ui-testing/pages/generalPages/enrichmentPage.js
@@ -1018,7 +1018,7 @@ abc, err = get_enrichment_table_record("${fileName}", {
     }
 
     async verifySchemaModalVisible() {
-        // EnrichmentSchema migrated from q-dialog to ODrawer
+        // EnrichmentSchema migrated from the legacy dialog to ODrawer
         await this.schemaDrawer.waitFor({ state: 'visible', timeout: 15000 });
     }
 
@@ -1067,7 +1067,7 @@ abc, err = get_enrichment_table_record("${fileName}", {
     }
 
     async verifyDeleteConfirmationDialog() {
-        // ConfirmDialog migrated from q-dialog to ODialog — scope to the new panel
+        // ConfirmDialog migrated from the legacy dialog to ODialog — scope to the new panel
         await this.confirmDialog.waitFor({ state: 'visible', timeout: 10000 });
         // The dialog primary/secondary buttons render once the dialog is open.
         await this.confirmDialogOk.waitFor({ state: 'visible', timeout: 5000 });
@@ -1656,7 +1656,7 @@ abc, err = get_enrichment_table_record("${fileName}", {
     /**
      * Close any open dialogs/modals.
      *
-     * The logs row-detail panel was migrated from q-dialog to an ODrawer
+     * The logs row-detail panel was migrated from the legacy dialog to an ODrawer
      * (SearchResult.vue → `logs-search-result-detail-dialog`). Reka UI's
      * escape-key-down only fires when focus is inside the drawer, but
      * ODrawer's handleOpenAutoFocus prevents the default focus move and the
@@ -2135,7 +2135,7 @@ abc, err = get_enrichment_table_record("${fileName}", {
     async closeUrlJobsDialog() {
         testLogger.debug('Closing URL Jobs dialog');
 
-        // URL Jobs migrated from q-dialog to ODrawer — use the o-drawer close button
+        // URL Jobs migrated from the legacy dialog to ODrawer — use the o-drawer close button
         const closeBtn = this.urlJobsDrawerCloseBtn.first();
         if (await closeBtn.isVisible({ timeout: 2000 }).catch(() => false)) {
             await closeBtn.click();
diff --git a/tests/ui-testing/pages/generalPages/homePage.js b/tests/ui-testing/pages/generalPages/homePage.js
index b4212a6850..42bfbf4d51 100644
--- a/tests/ui-testing/pages/generalPages/homePage.js
+++ b/tests/ui-testing/pages/generalPages/homePage.js
@@ -361,16 +361,16 @@ export class HomePage {
      * After Header.vue migration the user profile menu is an ODropdown
      * ([role="menuitem"]) but the language sub-menu was kept in-place (not
      * supported by ODropdown nesting). The data-test attribute is preserved
-     * either on a q-item-section or directly on a menuitem (ODropdown),
+     * either on a menu item section or directly on a menuitem (ODropdown),
      * so target the element with data-test and walk up to its clickable ancestor.
      * @param {string} langCode - Language code (e.g., 'en-us', 'de', 'es', 'fr', etc.)
      * @returns {Locator} - Playwright locator for the language option
      */
     getLanguageOption(langCode) {
-        // Try ODropdown menuitem first (post-migration), fall back to q-item ancestor.
+        // ODropdown menuitem ancestor.
         return this.page
             .locator(`[data-test="language-dropdown-item-${langCode}"]`)
-            .locator('xpath=ancestor-or-self::*[@role="menuitem" or contains(@class, "q-item")][1]')
+            .locator('xpath=ancestor-or-self::*[@role="menuitem"][1]')
             .first();
     }
 
@@ -410,7 +410,7 @@ export class HomePage {
     async changeLanguage(langCode) {
         await this.openLanguageMenu();
 
-        // Click directly on the element with data-test, or its parent q-item
+        // Click directly on the element with data-test, or its parent menu item
         const langOption = this.page.locator(`[data-test="language-dropdown-item-${langCode}"]`);
         await langOption.waitFor({ state: 'visible', timeout: 5000 });
 
diff --git a/tests/ui-testing/pages/generalPages/sanityPage.js b/tests/ui-testing/pages/generalPages/sanityPage.js
index 1dce7953fa..dac664786a 100644
--- a/tests/ui-testing/pages/generalPages/sanityPage.js
+++ b/tests/ui-testing/pages/generalPages/sanityPage.js
@@ -49,7 +49,7 @@ export class SanityPage {
         // Saved View / Function dialog locators
         // ============================================================
         // Saved view dialog (SearchBar.vue:1654) and saved function dialog (SearchBar.vue:1703) were migrated
-        // from q-dialog to ODialog. The legacy shared data-test "saved-view-dialog-save-btn" no longer exists;
+        // from the legacy dialog to ODialog. The legacy shared data-test "saved-view-dialog-save-btn" no longer exists;
         // each dialog now exposes its own ODialog primary button. The dialogs are mutually exclusive at runtime.
         this.savedViewDialogSave = page.locator('[data-test="search-bar-store-state-saved-view-dialog"] [data-test="o-dialog-primary-btn"], [data-test="search-bar-store-state-saved-function-dialog"] [data-test="o-dialog-primary-btn"]');
         // After ConfirmDialog migrated to ODialog, the OK button no longer
@@ -730,7 +730,7 @@ export class SanityPage {
         await this.page.reload();
         await this.page.waitForLoadState('domcontentloaded');
         await this.page.waitForLoadState('networkidle', { timeout: 10000 }).catch(() => {});
-        // Click the first stream row indicator (was the "01" cell in the legacy q-table).
+        // Click the first stream row indicator (was the "01" cell in the legacy table).
         await this.firstStreamRow.waitFor({ state: 'visible', timeout: 15000 });
         await this.firstStreamRow.click();
     }
diff --git a/tests/ui-testing/pages/generalPages/schemaPage.js b/tests/ui-testing/pages/generalPages/schemaPage.js
index 6147e13799..6bfe9df83e 100644
--- a/tests/ui-testing/pages/generalPages/schemaPage.js
+++ b/tests/ui-testing/pages/generalPages/schemaPage.js
@@ -139,7 +139,7 @@ class SchemaPage {
             // Stream creation locators
             logStreamAddStreamBtn: '[data-test="log-stream-add-stream-btn"]',
             nameLabel: 'Name *',
-            // AddStream.vue migrated from q-btn to ODrawer's primary footer
+            // AddStream.vue migrated from the legacy button to ODrawer's primary footer
             // button — there is no standalone "save-stream-btn" any more.
             saveStreamBtn: '[data-test="add-stream-dialog"] [data-test="o-dialog-primary-btn"]',
             menuHomeItem: '[data-test="menu-link-\\/-item"]',
@@ -269,7 +269,7 @@ class SchemaPage {
         await this.page.waitForLoadState('networkidle', { timeout: 10000 }).catch(() => {});
 
         // Try to find and click kubernetes checkboxes (they may not always exist).
-        // These names are legacy from the q-table schema; if the corresponding
+        // These names are legacy from the old table schema; if the corresponding
         // data-tests no longer exist after the OTable migration the row checkboxes
         // are simply not found and the try-block swallows the timeout.
         try {
diff --git a/tests/ui-testing/pages/generalPages/themePage.js b/tests/ui-testing/pages/generalPages/themePage.js
index 980211350c..3c55a72b76 100644
--- a/tests/ui-testing/pages/generalPages/themePage.js
+++ b/tests/ui-testing/pages/generalPages/themePage.js
@@ -48,8 +48,10 @@ export class ThemePage {
         // Theme Switcher
         this.themeToggleBtn = page.locator('[data-test="navbar-theme-toggle-btn"]');
 
-        // Body class for theme detection (the dark plugin adds 'body--dark')
-        this.bodyDarkClass = 'body--dark';
+        // Dark-mode detection. The dark-mode signal is the `.dark` class on
+        // <html> (document.documentElement) — set by utils/theme.ts. The legacy
+        // `body--dark` class on <body> was retired in the token migration.
+        this.bodyDarkClass = 'dark';
 
         // Notification — OToast surfaces success/error toasts under stable data-test slugs
         this.successToast = page.locator('[data-test-variant="success"]');
@@ -133,7 +135,7 @@ export class ThemePage {
         const bodyDarkClass = this.bodyDarkClass;
         await this.page.waitForFunction(
             ([darkClass, expectedDark]) => {
-                const isDark = document.body.classList.contains(darkClass);
+                const isDark = document.documentElement.classList.contains(darkClass);
                 return isDark !== expectedDark;
             },
             [bodyDarkClass, wasDark],
@@ -143,7 +145,7 @@ export class ThemePage {
 
     async isDarkMode() {
         const bodyDarkClass = this.bodyDarkClass;
-        return await this.page.evaluate((darkClass) => document.body.classList.contains(darkClass), bodyDarkClass);
+        return await this.page.evaluate((darkClass) => document.documentElement.classList.contains(darkClass), bodyDarkClass);
     }
 
     async isLightMode() {
@@ -334,7 +336,7 @@ export class ThemePage {
 
     async getThemeColor() {
         return await this.page.evaluate(() => {
-            return getComputedStyle(document.documentElement).getPropertyValue('--q-primary').trim();
+            return getComputedStyle(document.documentElement).getPropertyValue('--color-accent').trim();
         });
     }
 
diff --git a/tests/ui-testing/pages/iamPages/iamPage.js b/tests/ui-testing/pages/iamPages/iamPage.js
index 36a40d7764..0320af0998 100644
--- a/tests/ui-testing/pages/iamPages/iamPage.js
+++ b/tests/ui-testing/pages/iamPages/iamPage.js
@@ -212,9 +212,8 @@ export class IamPage {
 
     async clickCopyToken() {
 
-        // ODialog renders via reka-ui's DialogPortal, not a
-        // #q-portal--dialog--N container, so scope by the token dialog's
-        // own data-test attribute instead.
+        // ODialog renders via reka-ui's DialogPortal, so scope by the token
+        // dialog's own data-test attribute instead.
         await this.tokenCopyButton.click();
 
     }
diff --git a/tests/ui-testing/pages/logsPages/logsPage.js b/tests/ui-testing/pages/logsPages/logsPage.js
index 77cb330efd..20d09e6b16 100644
--- a/tests/ui-testing/pages/logsPages/logsPage.js
+++ b/tests/ui-testing/pages/logsPages/logsPage.js
@@ -91,8 +91,8 @@ export class LogsPage {
         // OInput convention §4: drive the auto-derived `-field` inner native input for fill().
         this.savedViewNameInput = '[data-test="add-alert-name-input-field"]';
         // Saved view dialog (SearchBar.vue:1654) and saved function dialog (SearchBar.vue:1703) were both migrated
-        // from q-dialog to ODialog. Tests historically shared a single save-button selector because the legacy
-        // q-dialog used the same data-test on both. With ODialog each dialog has its own primary button, so the
+        // from the legacy dialog to ODialog. Tests historically shared a single save-button selector because the legacy
+        // dialog used the same data-test on both. With ODialog each dialog has its own primary button, so the
         // selector matches whichever dialog is currently open (they are mutually exclusive).
         this.savedViewDialogSave = '[data-test="search-bar-store-state-saved-view-dialog"] [data-test="o-dialog-primary-btn"], [data-test="search-bar-store-state-saved-function-dialog"] [data-test="o-dialog-primary-btn"]';
         this.savedViewDialog = '[data-test="search-bar-store-state-saved-view-dialog"]';
@@ -186,7 +186,7 @@ export class LogsPage {
         this.savedFunctionNameInput = '[data-test="saved-function-name-input"]';
         // OInput convention (AGENT_RULES §4): inner native <input> carries `-field` suffix
         this.savedFunctionNameInputField = '[data-test="saved-function-name-input-field"]';
-        this.qNotifyWarning = '#q-notify div';
+        this.qNotifyWarning = '[role="alert"]';
         this.qPageContainer = '[data-test="logs-page-container"]';
         this.cmContent = '.view-lines';
         this.cmLine = '.view-line';
@@ -900,7 +900,7 @@ export class LogsPage {
         //    wrapper down to its single `button` child instead.
         //  - Option:  [data-test="log-search-index-list-select-stream-option"]
         //             [data-test-value="<stream>"]   (rendered into a portalled popover by OSelect).
-        // The legacy q-select `log-search-index-list-stream-toggle-*` data-test is no longer
+        // The legacy select `log-search-index-list-stream-toggle-*` data-test is no longer
         // emitted, so we open the popover and pick the option directly. The retry loop
         // re-opens the popover on miss to handle the case where the stream list streams in
         // late after page navigation — matching the original 5-attempt retry semantic.
@@ -997,7 +997,7 @@ export class LogsPage {
 
     async deselectStream(streamName) {
         testLogger.info(`Deselecting stream: ${streamName}`);
-        // Legacy q-select used `log-search-index-list-stream-toggle-<name> div`;
+        // Legacy select used `log-search-index-list-stream-toggle-<name> div`;
         // post-OSelect migration that data-test is gone. Pick the same option
         // by `data-test-value` — toggling an already-selected option deselects
         // it in OSelect's multi-mode (selectionBehavior=toggle).
@@ -1575,7 +1575,7 @@ export class LogsPage {
         await quickMode.waitFor({ state: 'hidden', timeout: 2000 }).catch(() => {});
         await this.page.locator(this.utilitiesMenuButton).click();
         await quickMode.waitFor({ state: 'visible', timeout: 10000 });
-        // Click the q-item directly - it has @click="handleQuickMode" handler.
+        // Click the menu option directly - it has @click="handleQuickMode" handler.
         // force:true bypasses the stability check; the popper portal animates so the
         // element can be transiently re-laid-out, but the click is still committed.
         await quickMode.click({ force: true });
@@ -1869,7 +1869,7 @@ export class LogsPage {
         const resultsDropdown = this.page.locator(this.recordsPerPageDropdown);
         await resultsDropdown.waitFor({ state: 'visible', timeout: 15000 }).catch(() => {});
         await resultsDropdown.click({ force: true });
-        // Records-per-page is OSelect (Reka Listbox) post-migration, q-select pre.
+        // Records-per-page is OSelect (Reka Listbox) post-migration, the legacy select pre.
         await this.page.waitForTimeout(500);
         // Target option by data-test-value (OSelect emits `${parent}-option` + data-test-value).
         const option10 = this.page.locator(this.recordsPerPageOption(10)).first();
@@ -3124,14 +3124,14 @@ export class LogsPage {
         // This method clicks the search input inside the saved views dialog
         //
         // Why this needs special handling:
-        // The search input is inside a q-table's #top template slot. When the table's
+        // The search input is inside the table's #top template slot. When the table's
         // data updates (e.g., after applying a saved view), the entire #top template
         // gets re-rendered, causing the input element to be detached and recreated.
         //
         // The problem was exacerbated by:
         // 1. debounce="1" (now changed to 300) - caused rapid re-renders
         // 2. Table data updating from ongoing searches
-        // 3. Invalid HTML structure (q-tr inside #top-right - now fixed)
+        // 3. Invalid HTML structure (a table row inside #top-right - now fixed)
         //
         // Even with those fixes, if a search just completed, the table might still
         // be updating its pagination/data, making the input unstable for a brief moment.
@@ -3946,7 +3946,7 @@ export class LogsPage {
             await inputLocator.fill('');
         } else {
             // pressSequentially fires per-character input events that reliably
-            // trigger the q-input's debounced update:model-value chain.
+            // trigger the input's debounced update:model-value chain.
             // force:true bypasses Monaco editor's <span class="highlight">code</span>
             // overlay that can intercept pointer events on the splitter panel.
             await inputLocator.click({ clickCount: 3, force: true });
@@ -5730,7 +5730,7 @@ export class LogsPage {
         await this.page.keyboard.press(process.platform === "darwin" ? "Meta+A" : "Control+A");
         await this.page.keyboard.press("Backspace");
         // Drive the editor through Monaco's executeEdits API instead of keystrokes —
-        // typing into the search bar is intercepted by the q-input which has a
+        // typing into the search bar is intercepted by the input which has a
         // debounced model-value chain that races the test's read. The Monaco model
         // commits synchronously through executeEdits.
         await this.page.evaluate(({ selector, text }) => {
@@ -5917,7 +5917,7 @@ export class LogsPage {
     }
 
     async toggleStreamSelection(streamName) {
-        // Post-OSelect-migration: the legacy q-select toggle data-test
+        // Post-OSelect-migration: the legacy select toggle data-test
         // `log-search-index-list-stream-toggle-<name>` is no longer emitted.
         // Pick the OSelect option whose `data-test-value` matches streamName.
         // Caller must ensure the popover is open (e.g. via fillStreamFilter).
diff --git a/tests/ui-testing/pages/metricsPages/metricsBuilderPage.js b/tests/ui-testing/pages/metricsPages/metricsBuilderPage.js
index c4bfe3fa43..4b96e85324 100644
--- a/tests/ui-testing/pages/metricsPages/metricsBuilderPage.js
+++ b/tests/ui-testing/pages/metricsPages/metricsBuilderPage.js
@@ -452,7 +452,7 @@ export class MetricsBuilderPage {
      * Read the selected metric/stream value from the OSelect trigger's data-test
      * attributes. OSelect exposes `data-test-selected-value` /
      * `data-test-selected-label` on the inner PopoverTrigger (data-test
-     * `${parent}-trigger`). Falls back to inputValue() for legacy q-select.
+     * `${parent}-trigger`). Falls back to inputValue() for the legacy select.
      */
     async getStreamSelectedValue() {
         const wrapper = this.streamSelectorInput;
@@ -634,7 +634,7 @@ export class MetricsBuilderPage {
     async clickAddOperation() {
         await this.addOperationBtn.click();
         // Operation selector is now an ODialog (see OperationsList.vue) — wait on the
-        // parent slug rather than the legacy `.q-dialog` wrapper.
+        // parent slug rather than the legacy dialog wrapper.
         await this.operationDialog.waitFor({ state: 'visible', timeout: 5000 });
     }
 
@@ -647,7 +647,7 @@ export class MetricsBuilderPage {
         await this.operationDialog.waitFor({ state: 'visible', timeout: 5000 });
 
         // Do NOT fill the search input: typing triggers a Vue re-render that temporarily
-        // collapses q-expansion-item sections, making items transiently invisible.
+        // collapses expansion-item sections, making items transiently invisible.
         // The full un-filtered list is already rendered with all sections expanded.
 
         // Find an operation option by data-test-value (preferred)
@@ -1206,11 +1206,11 @@ export class MetricsBuilderPage {
             // OSelect post-migration: the PopoverTrigger button (`-trigger`) is
             // the element that carries the disabled state when `:disabled` is
             // set on the OSelect. We also check ancestor data-disabled, native
-            // disabled attr, and the legacy q-field--disabled class for safety.
+            // disabled attr, and the legacy disabled class for safety.
             const hasDisabledClass = (node) => {
                 if (!node) return false;
                 const cls = node.className || '';
-                return cls.includes('q-field--disabled') || cls.includes('disabled');
+                return cls.includes('disabled');
             };
             // Find the OSelect trigger inside the wrapper (post-migration) — the
             // disabled flag binds to the PopoverTrigger button.
diff --git a/tests/ui-testing/pages/metricsPages/metricsPage.js b/tests/ui-testing/pages/metricsPages/metricsPage.js
index ed227712e4..6523db4134 100644
--- a/tests/ui-testing/pages/metricsPages/metricsPage.js
+++ b/tests/ui-testing/pages/metricsPages/metricsPage.js
@@ -619,7 +619,7 @@ export class MetricsPage {
     // Query type switching methods
     async switchToSQLMode() {
         // Try to find and click SQL mode toggle/button
-        const sqlToggle = this.page.locator('[data-test*="sql"], button:has-text("SQL"), .q-toggle:has-text("SQL")').first();
+        const sqlToggle = this.page.locator('[data-test*="sql"], button:has-text("SQL")').first();
         const isVisible = await sqlToggle.isVisible().catch(() => false);
         if (isVisible) {
             await sqlToggle.click();
@@ -630,7 +630,7 @@ export class MetricsPage {
 
     async switchToPromQLMode() {
         // Try to find and click PromQL mode toggle/button
-        const promqlToggle = this.page.locator('[data-test*="promql"], button:has-text("PromQL"), .q-toggle:has-text("PromQL")').first();
+        const promqlToggle = this.page.locator('[data-test*="promql"], button:has-text("PromQL")').first();
         const isVisible = await promqlToggle.isVisible().catch(() => false);
         if (isVisible) {
             await promqlToggle.click();
@@ -882,7 +882,7 @@ export class MetricsPage {
         const chartSelectors = {
           'line': 'canvas, svg path, .apexcharts-line-series',
           'pie': 'svg path[class*="pie"], .apexcharts-pie, path[class*="slice"]',
-          'table': 'table tbody tr, .q-table tbody tr, .data-table tbody tr',
+          'table': 'table tbody tr, .data-table tbody tr',
           'heatmap': 'svg rect, .apexcharts-heatmap, .heatmap-cell',
           'gauge': 'svg circle, .gauge-chart, .apexcharts-radialbar',
           'bar': 'svg rect[class*="bar"], .apexcharts-bar-series, rect[class*="column"]'
@@ -899,7 +899,7 @@ export class MetricsPage {
     }
 
     async getTableHeaderCount() {
-        return await this.page.locator('table thead th, .q-table thead th').count();
+        return await this.page.locator('table thead th').count();
     }
 
     async getHeatmapCellCount() {
@@ -1502,7 +1502,7 @@ export class MetricsPage {
     }
 
     async getVisibleOptionElements() {
-        return this.page.locator('input, select, .q-toggle, .q-checkbox').locator('visible');
+        return this.page.locator('input, select').locator('visible');
     }
 
     async getVisibleOptionElementCount() {
@@ -1568,7 +1568,7 @@ export class MetricsPage {
     // ===== CHART OPTIONS METHODS =====
 
     async getVisibleChartOptions() {
-        return this.page.locator('.q-item:visible, [role="option"]:visible');
+        return this.page.locator('[role="option"]:visible');
     }
 
     // ===== LEGEND METHODS =====
@@ -1577,7 +1577,7 @@ export class MetricsPage {
     // ===== MODE SELECTION METHODS =====
 
     async getModeOptions() {
-        return this.page.locator('.q-item:has-text("SQL"), .q-item:has-text("PromQL")');
+        return this.page.locator('[role="option"]:has-text("SQL"), [role="option"]:has-text("PromQL")');
     }
 
     async getModeOptionCount() {
@@ -1657,7 +1657,7 @@ export class MetricsPage {
     }
 
     async getTableCellValues() {
-        const cells = await this.page.locator('table td, .q-table td, .data-table td').allTextContents();
+        const cells = await this.page.locator('table td, .data-table td').allTextContents();
         return cells.filter(c => c.trim() !== '');
     }
 
@@ -1690,7 +1690,7 @@ export class MetricsPage {
     // ===== ADDITIONAL HELPER METHODS FOR metrics.spec.js =====
 
     async hasTable() {
-        const dataTable = this.page.locator('.results-table, .data-table, table.q-table, [class*="table"], .q-table__middle, table').first();
+        const dataTable = this.page.locator('.results-table, .data-table, [class*="table"], table').first();
         return await dataTable.isVisible().catch(() => false);
     }
 
@@ -1705,7 +1705,7 @@ export class MetricsPage {
     }
 
     async getTableCells() {
-        return await this.page.locator('tbody td, .q-table__middle td, .table-cell').allTextContents();
+        return await this.page.locator('tbody td, .table-cell').allTextContents();
     }
 
     async getResultsPageText() {
@@ -2126,7 +2126,7 @@ export class MetricsPage {
 
     // SQL mode methods
     async getSqlToggle() {
-        return this.page.locator('[data-test*="sql"], button:has-text("SQL"), .q-toggle:has-text("SQL")').first();
+        return this.page.locator('[data-test*="sql"], button:has-text("SQL")').first();
     }
 
     async getSqlIndicator() {
@@ -2171,7 +2171,7 @@ export class MetricsPage {
      * @returns {Locator}
      */
     getThemeToggleButton() {
-        return this.page.locator('[data-test*="theme"], [class*="theme-toggle"], button:has-text("dark"), .q-toggle:has-text("dark")');
+        return this.page.locator('[data-test*="theme"], [class*="theme-toggle"], button:has-text("dark")');
     }
 
     /**
@@ -2436,7 +2436,7 @@ export class MetricsPage {
      * Returns the share button's disabled tooltip locator if visible.
      */
     getShareButtonDisabledTooltip() {
-        return this.page.locator('[role="tooltip"], .q-tooltip, [data-test*="tooltip"]').filter({ hasText: /Web URL|web.url|not configured/i });
+        return this.page.locator('[role="tooltip"], [data-test*="tooltip"]').filter({ hasText: /Web URL|web.url|not configured/i });
     }
 
     /**
diff --git a/tests/ui-testing/pages/pipelinesPages/pipelinesFormValidationPage.js b/tests/ui-testing/pages/pipelinesPages/pipelinesFormValidationPage.js
index 9aaac01bf9..1e143e1dca 100644
--- a/tests/ui-testing/pages/pipelinesPages/pipelinesFormValidationPage.js
+++ b/tests/ui-testing/pages/pipelinesPages/pipelinesFormValidationPage.js
@@ -133,7 +133,7 @@ export class PipelinesFormValidationPage {
 
     async uploadPipelineFile(filePath) {
         testLogger.info('Uploading pipeline file', { filePath });
-        // OFile (q-file) wraps a hidden native <input type="file"> — target it directly
+        // OFile wraps a hidden native <input type="file"> — target it directly
         const nativeInput = this.page.locator(`${this.importPipelineFileInput} input[type="file"]`);
         await nativeInput.setInputFiles(filePath);
     }
diff --git a/tests/ui-testing/pages/pipelinesPages/pipelinesPage.js b/tests/ui-testing/pages/pipelinesPages/pipelinesPage.js
index e15bad2a88..cb071b4a5b 100644
--- a/tests/ui-testing/pages/pipelinesPages/pipelinesPage.js
+++ b/tests/ui-testing/pages/pipelinesPages/pipelinesPage.js
@@ -250,7 +250,7 @@ export class PipelinesPage {
         this.pipelineSavedMessage = page.locator('[data-test-message="Pipeline saved successfully"]');
         this.addEnrichmentTableText = page.locator('[data-test="enrichment-tables-add-btn"]');
         this.deletedSuccessfullyText = page.locator('[data-test-message*="deleted successfully"]');
-        this.conditionDropdown = page.locator("div:nth-child(2) > div:nth-child(2) > .q-field > .q-field__inner > .q-field__control > .q-field__control-container > .q-field__native");
+        this.conditionDropdown = page.locator("div:nth-child(2) > div:nth-child(2) input");
         this.deleteButtonNth1 = page.locator("button").filter({ hasText: "delete" }).nth(1);
 
         // Condition-specific locators for comprehensive testing
@@ -501,15 +501,15 @@ export class PipelinesPage {
         await this.page.waitForLoadState('networkidle').catch(() => {});
         await this.page.waitForTimeout(1000);
 
-        // The data-test attribute is on a wrapper div, the q-select is inside
-        // Target the q-select input inside the wrapper
+        // The data-test attribute is on a wrapper div, the select trigger is inside
+        // Target the select trigger inside the wrapper
         const streamTypeWrapper = this.page.locator('[data-test="add-pipeline-stream-type-select"]');
         await streamTypeWrapper.waitFor({ state: 'visible', timeout: 15000 });
 
-        // Click on the q-select component inside the wrapper
-        const qSelect = streamTypeWrapper.locator('.q-select');
-        await qSelect.waitFor({ state: 'visible', timeout: 10000 });
-        await qSelect.click();
+        // Click on the select trigger inside the wrapper
+        const streamTypeSelect = streamTypeWrapper.locator('[role="combobox"]');
+        await streamTypeSelect.waitFor({ state: 'visible', timeout: 10000 });
+        await streamTypeSelect.click();
         await this.page.waitForTimeout(500);
     }
 
@@ -963,7 +963,7 @@ export class PipelinesPage {
         await this.dragStreamToTarget(this.conditionButton, { x: 250, y: 250 });
     }
     async fillColumnAndSelectOption(columnName) {
-        // Click the column select (q-select in FilterCondition)
+        // Click the column select in FilterCondition
         await this.columnSelect.locator('input').click();
         await this.columnSelect.locator('input').fill(columnName);
         await this.columnOption.click();
@@ -3045,7 +3045,7 @@ export class PipelinesPage {
     async testPauseToggle(rowIndex) {
         const pipelineRows = this.page.locator('[data-test*="pipeline-row"], tr:has([data-test*="pipeline"])');
         const row = pipelineRows.nth(rowIndex);
-        const pauseToggle = row.locator('[data-test*="pause"], [data-test*="toggle"], .q-toggle').first();
+        const pauseToggle = row.locator('[data-test*="pause"], [data-test*="toggle"]').first();
 
         if (await pauseToggle.isVisible().catch(() => false)) {
             const initialState = await pauseToggle.getAttribute('aria-pressed').catch(() => 'unknown');
@@ -3270,7 +3270,7 @@ export class PipelinesPage {
      * @returns {Promise<boolean>} True if table is visible
      */
     async isBackfillTableVisible() {
-        const tableLocator = this.page.locator('[data-test*="backfill-table"], table, .q-table').first();
+        const tableLocator = this.page.locator('[data-test*="backfill-table"], table').first();
         return await tableLocator.isVisible({ timeout: 5000 }).catch(() => false);
     }
 
@@ -3429,7 +3429,7 @@ export class PipelinesPage {
      * @returns {Promise<boolean>} True if table is visible
      */
     async isHistoryTableVisible() {
-        const tableLocator = this.page.locator('[data-test*="history-table"], table, .q-table').first();
+        const tableLocator = this.page.locator('[data-test*="history-table"], table').first();
         return await tableLocator.isVisible({ timeout: 5000 }).catch(() => false);
     }
 
@@ -3538,7 +3538,7 @@ export class PipelinesPage {
      * @returns {Promise<boolean>} True if table is visible
      */
     async isBackfillJobsTableVisible() {
-        const tableLocator = this.page.locator('[data-test*="backfill-table"], [data-test*="jobs-table"], table, .q-table').first();
+        const tableLocator = this.page.locator('[data-test*="backfill-table"], [data-test*="jobs-table"], table').first();
         return await tableLocator.isVisible({ timeout: 5000 }).catch(() => false);
     }
 
@@ -3548,9 +3548,9 @@ export class PipelinesPage {
      */
     async isGenericTableVisible() {
         // TODO(data-test): backfill/jobs/generic tables don't yet expose a data-test
-        // root in their source components — keeping native <table>/.q-table fallback
+        // root in their source components — keeping native <table> fallback
         // until added in web/src/components/pipeline/ and shared table components.
-        const tableLocator = this.page.locator('table, .q-table').first();
+        const tableLocator = this.page.locator('table').first();
         return await tableLocator.isVisible({ timeout: 5000 }).catch(() => false);
     }
 
@@ -3573,12 +3573,12 @@ export class PipelinesPage {
      * Filter by pipeline name
      */
     async filterByPipeline() {
-        const pipelineFilter = this.page.locator('[data-test*="pipeline-filter"], [data-test*="pipeline-select"], .q-select').first();
+        const pipelineFilter = this.page.locator('[data-test*="pipeline-filter"], [data-test*="pipeline-select"]').first();
         if (await pipelineFilter.isVisible().catch(() => false)) {
             await pipelineFilter.click();
             await this.page.waitForTimeout(500);
             // Select first available option
-            const option = this.page.locator('.q-item').first();
+            const option = this.page.locator('[role="option"]').first();
             if (await option.isVisible().catch(() => false)) {
                 await option.click();
             }
@@ -3618,7 +3618,7 @@ export class PipelinesPage {
      * @returns {Promise<number>} Count of buttons
      */
     async getTableButtonCount() {
-        const buttons = await this.page.locator('table button, .q-table button').all();
+        const buttons = await this.page.locator('table button').all();
         return buttons.length;
     }
 
@@ -3903,7 +3903,7 @@ export class PipelinesPage {
 
     /**
      * Dismiss any open dialogs or menus.
-     * Use in afterEach cleanup instead of raw page.locator('.q-dialog').
+     * Use in afterEach cleanup instead of a raw dialog locator.
      */
     async dismissOpenDialogs() {
         try {
diff --git a/tests/ui-testing/pages/streamsPages/streamsPage.js b/tests/ui-testing/pages/streamsPages/streamsPage.js
index 75d6afc514..c812d34735 100644
--- a/tests/ui-testing/pages/streamsPages/streamsPage.js
+++ b/tests/ui-testing/pages/streamsPages/streamsPage.js
@@ -431,7 +431,7 @@ export class StreamsPage {
             
             // Try individual selector
             try {
-                const element = this.page.locator('tr:has-text("Full text search") .q-checkbox__inner');
+                const element = this.page.locator('tr:has-text("Full text search") [role="checkbox"]');
                 if (await element.isVisible({ timeout: 1000 })) {
                     await element.click();
                 }
@@ -464,7 +464,7 @@ export class StreamsPage {
 
     async selectDateRange(startIso, endIso) {
         // Post-revamp the extended-retention picker is the shared <date-time>
-        // component with an ODateRangeCalendar inside — Quasar's .q-date is gone.
+        // component with an ODateRangeCalendar inside — the old date input is gone.
         // Day cells carry data-test="daterangecalendar-cell-<yyyy-mm-dd>";
         // exclude adjacent-month duplicates via [data-outside-view].
         await this.page.locator('[data-test="date-time-btn"]').click();
@@ -512,7 +512,7 @@ export class StreamsPage {
         await this.selectDateRange(startIso, endIso);
         // Applying the range saves immediately (dateChangeValue -> onSubmit),
         // so the new row appears in the retention table. Return the start date
-        // in the table's display format (DD-MM-YYYY via convertUnixToQuasarFormat)
+        // in the table's display format (DD-MM-YYYY)
         // so deleteRetentionPeriod's hasText row filter matches — the cells
         // render e.g. "13-07-2026", not the ISO "2026-07-13".
         const [y, m, d] = startIso.split('-');
@@ -1188,8 +1188,7 @@ export class StreamsPage {
 
     /**
      * Get full text search option from dropdown.
-     * StreamFieldInputs uses OSelect post-migration (Reka Listbox role=option);
-     * legacy q-select uses .q-item.
+     * StreamFieldInputs uses OSelect post-migration (Reka Listbox role=option).
      */
     getFullTextSearchOption() {
         return this.page.locator('[data-test$="-index-type-select-option"][data-test-value="fullTextSearchKey"]').first();
diff --git a/tests/ui-testing/pages/tracesPages/serviceGraphPage.js b/tests/ui-testing/pages/tracesPages/serviceGraphPage.js
index a7294790e6..f0b11879c4 100644
--- a/tests/ui-testing/pages/tracesPages/serviceGraphPage.js
+++ b/tests/ui-testing/pages/tracesPages/serviceGraphPage.js
@@ -16,7 +16,7 @@ export class ServiceGraphPage {
     this.refreshButton = '[data-test="service-graph-refresh-btn"]';
     this.chartContainer = '[data-test="service-graph-chart"]';
 
-    // ===== VIEW TOGGLE BUTTONS (SearchBar.vue — q-btn with .selected class) =====
+    // ===== VIEW TOGGLE BUTTONS (SearchBar.vue — button with .selected class) =====
     this.graphViewTab = '[data-test="service-graph-graph-view-btn"]';
     this.treeViewTab = '[data-test="service-graph-tree-view-btn"]';
 
diff --git a/tests/ui-testing/playwright-tests/Alerts/alerts-anomaly-detection.spec.js b/tests/ui-testing/playwright-tests/Alerts/alerts-anomaly-detection.spec.js
index b1456e8b28..ba9f6e0fc9 100644
--- a/tests/ui-testing/playwright-tests/Alerts/alerts-anomaly-detection.spec.js
+++ b/tests/ui-testing/playwright-tests/Alerts/alerts-anomaly-detection.spec.js
@@ -424,7 +424,7 @@ test.describe("Anomaly Detection Alerts", () => {
       // Note: Status may be "waiting" or "ready" depending on training state
       // We just verify it's no longer "disabled"
       const row = pm.anomalyDetectionPage.getAnomalyRow(anomalyName);
-      // q-badge → OBadge migration: use data-test selector instead of .q-badge class
+      // OBadge migration: use data-test selector instead of the legacy badge class
       await expect(row.locator('[data-test="anomaly-detection-status-badge"]')).not.toContainText('disabled', { ignoreCase: true, timeout: 5000 });
 
       testLogger.info('Pause/resume works correctly');
diff --git a/tests/ui-testing/playwright-tests/Alerts/alerts-scheduled-features.spec.js b/tests/ui-testing/playwright-tests/Alerts/alerts-scheduled-features.spec.js
index 7cd3b01473..923e4a461c 100644
--- a/tests/ui-testing/playwright-tests/Alerts/alerts-scheduled-features.spec.js
+++ b/tests/ui-testing/playwright-tests/Alerts/alerts-scheduled-features.spec.js
@@ -2,7 +2,7 @@
  * Scheduled Alert Features E2E Tests
  *
  * Tests scheduled alert features:
- * 1. Alert History/Details dialog (q-dialog with paginated table)
+ * 1. Alert History/Details dialog (with paginated table)
  * 2. Aggregation configuration in Step 2 (QueryConfig)
  * 3. PromQL alert creation with trigger condition
  * 4. SQL preview chart rendering
@@ -419,7 +419,7 @@ test.describe("Scheduled Alert Features", () => {
 
         // Run the SQL flow end-to-end via PO method (Monaco-API driven, deterministic waits).
         await pm.alertsPage.runSqlAndCloseEditor(`SELECT COUNT(*) as cnt FROM "${STREAM_NAME}"`);
-        // Cleanup: residual q-portal elements occasionally intercept clicks after dialog close.
+        // Cleanup: residual portal elements occasionally intercept clicks after dialog close.
         await pm.alertsPage.removeResidualPortals();
 
         testLogger.info('=== PHASE 3: Verify preview chart is visible ===');
diff --git a/tests/ui-testing/playwright-tests/Dashboards/crossLinking.spec.js b/tests/ui-testing/playwright-tests/Dashboards/crossLinking.spec.js
index 7fda2c850c..7873d9f692 100644
--- a/tests/ui-testing/playwright-tests/Dashboards/crossLinking.spec.js
+++ b/tests/ui-testing/playwright-tests/Dashboards/crossLinking.spec.js
@@ -777,7 +777,7 @@ test.describe("Cross-Linking testcases", () => {
         const urlText = await pm.crossLinkPage.getCrossLinkItemUrlText(0);
         expect(urlText).toContain('display.example.com');
 
-        // Verify field chips are rendered (CrossLinkManager shows OBadge for each field after q-chip → OBadge migration)
+        // Verify field chips are rendered (CrossLinkManager shows OBadge for each field after the chip → OBadge migration)
         const chipCount = await pm.crossLinkPage.getFieldChipsCount(0);
         expect(chipCount).toBe(2);
 
diff --git a/tests/ui-testing/playwright-tests/Dashboards/dashboard-config-markline.spec.js b/tests/ui-testing/playwright-tests/Dashboards/dashboard-config-markline.spec.js
index 68735ad3b4..1c9af941f5 100644
--- a/tests/ui-testing/playwright-tests/Dashboards/dashboard-config-markline.spec.js
+++ b/tests/ui-testing/playwright-tests/Dashboards/dashboard-config-markline.spec.js
@@ -72,7 +72,7 @@ test.describe("ConfigPanel — Mark Line Settings", () => {
     const valueAfter = page.locator('[data-test="dashboard-config-markline-value-0"]');
     const nameAfter = page.locator('[data-test="dashboard-config-markline-name-0"]');
     await pm.dashboardPanelConfigs.scrollSidebarToElement(valueAfter);
-    // q-select uses emit-value without map-options → displays raw stored value ("yAxis" not "Y-Axis")
+    // the select uses emit-value without map-options → displays raw stored value ("yAxis" not "Y-Axis")
     await expect(page.locator('[data-test="dashboard-config-markline-type-0-trigger"]')).toHaveAttribute('data-test-selected-value', 'yAxis');
     await expect(valueAfter.locator('[data-test$="-field"]')).toHaveValue("100");
     await expect(nameAfter.locator('[data-test$="-field"]')).toHaveValue("threshold");
diff --git a/tests/ui-testing/playwright-tests/Dashboards/dashboard-create-alert.spec.js b/tests/ui-testing/playwright-tests/Dashboards/dashboard-create-alert.spec.js
index a4b8f369df..693f02aebb 100644
--- a/tests/ui-testing/playwright-tests/Dashboards/dashboard-create-alert.spec.js
+++ b/tests/ui-testing/playwright-tests/Dashboards/dashboard-create-alert.spec.js
@@ -434,7 +434,7 @@ test.describe("Dashboard Create Alert testcases", () => {
       await page.getByText(">=", { exact: true }).waitFor({ state: "visible", timeout: 5000 });
       await page.getByText(">=", { exact: true }).click();
 
-      // The q-input may place data-test on the native <input> or on its root div,
+      // The input may place data-test on the native <input> or on its root div,
       // so match both: 'input[data-test]' (on input) and '[data-test] input' (input inside parent)
       const thresholdInput = page.locator(
         'input[data-test="alert-threshold-value-input"], [data-test="alert-threshold-value-input"] input'
diff --git a/tests/ui-testing/playwright-tests/Dashboards/dashboard-share-link.spec.js b/tests/ui-testing/playwright-tests/Dashboards/dashboard-share-link.spec.js
index 2d444f5fce..baf82d3eba 100644
--- a/tests/ui-testing/playwright-tests/Dashboards/dashboard-share-link.spec.js
+++ b/tests/ui-testing/playwright-tests/Dashboards/dashboard-share-link.spec.js
@@ -334,7 +334,7 @@ test.describe("dashboard share URL button testcases", () => {
       .waitFor({ state: "hidden", timeout: 10000 })
       .catch(() => {});
 
-    // Click the variable dropdown (inner q-select element)
+    // Click the variable dropdown (inner select element)
     const variableDropdown = page.locator(
       getVariableSelectorInner(variableName)
     );
@@ -566,7 +566,7 @@ test.describe("dashboard share URL button testcases", () => {
       .waitFor({ state: "hidden", timeout: 10000 })
       .catch(() => {});
 
-    // Click the variable dropdown (inner q-select element)
+    // Click the variable dropdown (inner select element)
     const variableDropdown = page.locator(
       getVariableSelectorInner(variableName)
     );
diff --git a/tests/ui-testing/playwright-tests/Dashboards/dashboard-table-column-filtering.spec.js b/tests/ui-testing/playwright-tests/Dashboards/dashboard-table-column-filtering.spec.js
index ec36d4e7f8..3aca377dac 100644
--- a/tests/ui-testing/playwright-tests/Dashboards/dashboard-table-column-filtering.spec.js
+++ b/tests/ui-testing/playwright-tests/Dashboards/dashboard-table-column-filtering.spec.js
@@ -76,7 +76,7 @@ test.describe("Dashboard Table — Column Filtering (PR #12531)", () => {
     // Verify the filter icon switches to its "active" state (isColFiltered →
     // primary-colored icon) while the panel is still open — checking before
     // Escape avoids a race with the dropdown's close/portal-unmount transition.
-    const activeFilterIcon = getColumnFilterBtn(page, 0).locator('[class*="color-primary-600"]');
+    const activeFilterIcon = getColumnFilterBtn(page, 0).locator('[data-test$="-active"]');
     await expect(activeFilterIcon).toBeVisible();
     await page.keyboard.press("Escape");
 
diff --git a/tests/ui-testing/playwright-tests/Dashboards/dashboard-variables-dependency.spec.js b/tests/ui-testing/playwright-tests/Dashboards/dashboard-variables-dependency.spec.js
index 605cc56a9f..96a9597248 100644
--- a/tests/ui-testing/playwright-tests/Dashboards/dashboard-variables-dependency.spec.js
+++ b/tests/ui-testing/playwright-tests/Dashboards/dashboard-variables-dependency.spec.js
@@ -725,7 +725,7 @@ test.describe("Dashboard Variables - Dependency Loading", { tag: ['@dashboards',
 
     // Reopen settings and navigate to variables tab
     await pm.dashboardSetting.openSetting();
-    // Wait for the settings ODrawer to be visible (replaced legacy .q-dialog selector)
+    // Wait for the settings ODrawer to be visible (replaced the legacy dialog selector)
     await page.locator('[data-test="dashboard-settings-drawer"]').waitFor({ state: "visible", timeout: 5000 });
     await pm.dashboardSetting.openVariables();
     await page.locator('[data-test="dashboard-add-variable-btn"]').waitFor({ state: "visible", timeout: 10000 });
diff --git a/tests/ui-testing/playwright-tests/Dashboards/dashboard-variables-global.spec.js b/tests/ui-testing/playwright-tests/Dashboards/dashboard-variables-global.spec.js
index 99c9cf356a..f31c9ba523 100644
--- a/tests/ui-testing/playwright-tests/Dashboards/dashboard-variables-global.spec.js
+++ b/tests/ui-testing/playwright-tests/Dashboards/dashboard-variables-global.spec.js
@@ -70,7 +70,7 @@ test.describe("Dashboard Variables - Global Level", { tag: ['@dashboards', '@das
 
     // Verify variable scope is global in the settings
     await pm.dashboardSetting.openSetting();
-    // Wait for the settings ODrawer to be visible (replaced legacy .q-dialog selector)
+    // Wait for the settings ODrawer to be visible
     const settingsDrawer = page.locator('[data-test="dashboard-settings-drawer"]');
     await settingsDrawer.waitFor({ state: "visible", timeout: 5000 });
     await pm.dashboardSetting.openVariables();
diff --git a/tests/ui-testing/playwright-tests/Dashboards/utils/panelTimeSetup.js b/tests/ui-testing/playwright-tests/Dashboards/utils/panelTimeSetup.js
index e346b8b11d..dda5224f97 100644
--- a/tests/ui-testing/playwright-tests/Dashboards/utils/panelTimeSetup.js
+++ b/tests/ui-testing/playwright-tests/Dashboards/utils/panelTimeSetup.js
@@ -322,8 +322,8 @@ export async function savePanel(page) {
   // Wait for ODropdown date-time menu and portal menus to be hidden
   await page.locator('#date-time-menu').first().waitFor({ state: "hidden", timeout: 3000 }).catch(() => {});
 
-  // Also wait for any date picker portal menus to close (they use q-portal--menu--* IDs)
-  await page.locator('[id^="q-portal--menu--"]').first().waitFor({ state: "hidden", timeout: 3000 }).catch(() => {});
+  // Also wait for any date picker portal menus to close (reka-ui portalled content)
+  await page.locator('[data-reka-popper-content-wrapper]').first().waitFor({ state: "hidden", timeout: 3000 }).catch(() => {});
 
   // Click somewhere neutral to dismiss any remaining overlays (like date picker)
   await page.locator('[data-test="dashboard-panel-name"]').click().catch(() => {});
diff --git a/tests/ui-testing/playwright-tests/GeneralTests/theme-management.spec.js b/tests/ui-testing/playwright-tests/GeneralTests/theme-management.spec.js
index e010ceb97f..889f37d08b 100644
--- a/tests/ui-testing/playwright-tests/GeneralTests/theme-management.spec.js
+++ b/tests/ui-testing/playwright-tests/GeneralTests/theme-management.spec.js
@@ -57,10 +57,12 @@ test.describe("Theme Management Tests", () => {
       await page.reload();
       await page.waitForLoadState('domcontentloaded');
 
-      // Wait for theme to be restored from storage (Vue needs time to apply it)
+      // Wait for theme to be restored from storage (Vue needs time to apply it).
+      // The dark-mode signal is the `.dark` class on <html> (set by
+      // utils/theme.ts); the legacy `body--dark` on <body> was retired.
       await page.waitForFunction(
-        (darkClass) => document.body.classList.contains(darkClass),
-        'body--dark',
+        (darkClass) => document.documentElement.classList.contains(darkClass),
+        'dark',
         { timeout: 10000 }
       );
 
diff --git a/tests/ui-testing/playwright-tests/Metrics/metrics-promql-builder.spec.js b/tests/ui-testing/playwright-tests/Metrics/metrics-promql-builder.spec.js
index 344eb66374..58252b40d9 100644
--- a/tests/ui-testing/playwright-tests/Metrics/metrics-promql-builder.spec.js
+++ b/tests/ui-testing/playwright-tests/Metrics/metrics-promql-builder.spec.js
@@ -1290,8 +1290,8 @@ test.describe("Metrics PromQL Builder Mode testcases", () => {
     if (await dropdownBtn.isVisible({ timeout: 1000 }).catch(() => false)) {
       await dropdownBtn.click();
     }
-    // PanelContainer uses ODropdown (Reka UI), not the q-menu — wait for
-    // the edit menu item directly instead of waiting for a .q-menu element.
+    // PanelContainer uses ODropdown (Reka UI) — wait for the edit menu item
+    // directly instead of waiting for the dropdown menu container.
 
     // Click Edit Panel menu item
     const editMenuItem = builder.getEditPanelMenuItem();
diff --git a/tests/ui-testing/playwright-tests/Metrics/metrics-table-column-order.spec.js b/tests/ui-testing/playwright-tests/Metrics/metrics-table-column-order.spec.js
index 20941c2f86..533d34a637 100644
--- a/tests/ui-testing/playwright-tests/Metrics/metrics-table-column-order.spec.js
+++ b/tests/ui-testing/playwright-tests/Metrics/metrics-table-column-order.spec.js
@@ -165,7 +165,7 @@ test.describe("PromQL Table Chart - Column Order Feature", () => {
     testLogger.info('Column Order popup opened successfully');
 
     // Verify description text is present (ODialog header carries the title via :title prop,
-    // it doesn't render a .q-table__title block any more — assert the body's description data-test instead).
+    // it doesn't render a table title block any more — assert the body's description data-test instead).
     const descriptionText = pm.dashboardPanelConfigs.columnOrderDescription;
     await expect(descriptionText).toBeVisible();
     testLogger.info('Column Order popup has description text');
diff --git a/tests/ui-testing/playwright-tests/RegressionSet/Alerts/alerts-bugs.spec.js b/tests/ui-testing/playwright-tests/RegressionSet/Alerts/alerts-bugs.spec.js
index 00e445d363..c3ea9c9c95 100644
--- a/tests/ui-testing/playwright-tests/RegressionSet/Alerts/alerts-bugs.spec.js
+++ b/tests/ui-testing/playwright-tests/RegressionSet/Alerts/alerts-bugs.spec.js
@@ -280,7 +280,7 @@ test.describe("Alerts Regression Bugs — Batch 1", () => {
     testLogger.info('Import dialog opened with upload functionality');
 
     // Bug verification: no premature "already exists" error before import
-    const errorMessages = page.locator('[class*="error"], [class*="negative"], .q-banner')
+    const errorMessages = page.locator('[class*="error"], [class*="negative"]')
       .filter({ hasText: /already exists|duplicate/i });
     const hasPrematureError = await errorMessages.first().isVisible({ timeout: 2000 }).catch(() => false);
 
diff --git a/tests/ui-testing/playwright-tests/RegressionSet/Alerts/alerts-stream-switching.spec.js b/tests/ui-testing/playwright-tests/RegressionSet/Alerts/alerts-stream-switching.spec.js
index 33e321f045..d96519192c 100644
--- a/tests/ui-testing/playwright-tests/RegressionSet/Alerts/alerts-stream-switching.spec.js
+++ b/tests/ui-testing/playwright-tests/RegressionSet/Alerts/alerts-stream-switching.spec.js
@@ -460,7 +460,7 @@ test.describe("Alerts Stream Switching Regression", () => {
 
     // Remove interfering portal elements
     await page.evaluate(() => {
-      document.querySelectorAll('div[id^="q-portal"]').forEach(el => {
+      document.querySelectorAll('[data-reka-portalled], [data-reka-popper-content-wrapper]').forEach(el => {
         if (el.getAttribute('aria-hidden') === 'true') el.style.display = 'none';
       });
     }).catch(e => testLogger.warn('Failed to remove portal elements', { error: e.message }));
diff --git a/tests/ui-testing/playwright-tests/RegressionSet/Logs/logs-bugs.spec.js b/tests/ui-testing/playwright-tests/RegressionSet/Logs/logs-bugs.spec.js
index b7ae4f74be..5f127fdfec 100644
--- a/tests/ui-testing/playwright-tests/RegressionSet/Logs/logs-bugs.spec.js
+++ b/tests/ui-testing/playwright-tests/RegressionSet/Logs/logs-bugs.spec.js
@@ -1439,7 +1439,7 @@ test.describe("Logs Regression Bug Fixes", () => {
     await page.waitForLoadState('networkidle', { timeout: 10000 }).catch(() => {});
     await page.waitForTimeout(2000);
 
-    const errorVisible = await page.locator('[class*="error"], [class*="negative"], .q-banner, .q-notification')
+    const errorVisible = await page.locator('[class*="error"], [class*="negative"], [role="alert"]')
       .filter({ hasText: /error|failed|invalid/i })
       .first().isVisible({ timeout: 2000 }).catch(() => false);
 
diff --git a/tests/ui-testing/playwright-tests/RegressionSet/Logs/logs-regression.spec.js b/tests/ui-testing/playwright-tests/RegressionSet/Logs/logs-regression.spec.js
index 08f932defe..a95d7bb91b 100644
--- a/tests/ui-testing/playwright-tests/RegressionSet/Logs/logs-regression.spec.js
+++ b/tests/ui-testing/playwright-tests/RegressionSet/Logs/logs-regression.spec.js
@@ -1482,7 +1482,7 @@ test.describe("Logs Regression Bugs", () => {
     // Compare that the classes from before expansion are still present
     expect(lastRowFinalClasses).toBeTruthy();
     // Filter out generic/transient table classes that don't indicate highlighting state
-    const ignoredClasses = new Set(['table-row', 'q-tr', 'cursor-pointer']);
+    const ignoredClasses = new Set(['table-row', 'cursor-pointer']);
     const originalClassSet = new Set(lastRowClasses.split(/\s+/).filter(c => c && !ignoredClasses.has(c)));
     const finalClassSet = new Set(lastRowFinalClasses.split(/\s+/).filter(c => c && !ignoredClasses.has(c)));
 
diff --git a/tests/ui-testing/playwright-tests/Streams/multiselect-stream.spec.js b/tests/ui-testing/playwright-tests/Streams/multiselect-stream.spec.js
index 8b982c2897..40bd50b46e 100644
--- a/tests/ui-testing/playwright-tests/Streams/multiselect-stream.spec.js
+++ b/tests/ui-testing/playwright-tests/Streams/multiselect-stream.spec.js
@@ -185,7 +185,7 @@ async function multistreamselect(page) {
   //   await page.locator('[data-test="date-time-btn"]').click({ force: true });
 
   //   await page
-  //     .locator('[data-test="date-time-relative-6-w-btn"] > .q-btn__content')
+  //     .locator('[data-test="date-time-relative-6-w-btn"] button')
   //     .click({
   //       force: true,
   //     });
@@ -196,16 +196,16 @@ async function multistreamselect(page) {
   //     force: true,
   //   });
   //   await page.waitForTimeout(1000);
-  //   await expect(page.locator(".q-notification__message")).toContainText(
+  //   await expect(page.locator('[role="alert"]')).toContainText(
   //     "Live mode is enabled"
   //   );
   //   await page.waitForTimeout(5000);
   //   await page
-  //     .locator(".q-pl-sm > .q-btn > .q-btn__content")
+  //     .locator('[data-test="logs-search-off-refresh-interval"] button')
   //     .click({ force: true });
   //   await page
   //     .locator(
-  //       '[data-test="logs-search-off-refresh-interval"] > .q-btn__content'
+  //       '[data-test="logs-search-off-refresh-interval"] button'
   //     )
   //     .click({ force: true });
   //   await applyQueryButton(page);
diff --git a/tests/ui-testing/playwright-tests/Traces/traces-autocomplete-suggestions.spec.js b/tests/ui-testing/playwright-tests/Traces/traces-autocomplete-suggestions.spec.js
index 188dec2448..e19cdaf834 100644
--- a/tests/ui-testing/playwright-tests/Traces/traces-autocomplete-suggestions.spec.js
+++ b/tests/ui-testing/playwright-tests/Traces/traces-autocomplete-suggestions.spec.js
@@ -122,7 +122,7 @@ async function tryExpandField(page, pm) {
     }
 
     // Strategy 2: Click on field expansion headers in the traces field list
-    // Traces uses q-expansion-item with class 'field-expansion-item'
+    // Traces renders field rows with class 'field-expansion-item'
     // The clickable header has class 'field-expansion-header'
     // Using page object selector for the fields table
     const fieldsTableSelector = pm.tracesPage.fieldsTable || '[data-test="log-search-index-list-fields-table"]';
diff --git a/web/.stylelintrc.json b/web/.stylelintrc.json
new file mode 100644
index 0000000000..14d4ecf2cf
--- /dev/null
+++ b/web/.stylelintrc.json
@@ -0,0 +1,51 @@
+{
+  "overrides": [
+    {
+      "comment": "base.css owns the @font-face blocks, which must name real families. It is the ONE file allowed to write a literal font-family; the --font-sans/--font-mono tokens it defines are what everything else consumes.",
+      "files": ["src/lib/styles/tokens/base.css"],
+      "rules": {
+        "declaration-property-value-disallowed-list": [
+          {
+            "/.*/": ["/var\\(\\s*--o2-/", "/var\\(\\s*--color-text-(primary|caption)\\b/"]
+          },
+          {
+            "message": "Banned token. --o2-* is legacy; --color-text-primary/-caption were retired (Tier 1) — use --color-text-heading / --color-text-secondary.",
+            "severity": "error"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["**/*.vue"],
+      "customSyntax": "postcss-html",
+      "rules": {
+        "color-no-hex": [
+          true,
+          {
+            "message": "Hardcoded hex is banned in .vue styles. Use a --color-* token (§3.G).",
+            "severity": "error"
+          }
+        ],
+        "selector-disallowed-list": [
+          ["/\\.body--(dark|light)/", "/\\.(light|dark)-mode/"],
+          {
+            "message": "Dark mode CSS uses .dark only (Tailwind dark: variant or :where(.dark) &). §3.R",
+            "severity": "error"
+          }
+        ]
+      }
+    }
+  ],
+  "rules": {
+    "declaration-property-value-disallowed-list": [
+      {
+        "/.*/": ["/var\\(\\s*--o2-/", "/var\\(\\s*--color-text-(primary|caption)\\b/"],
+        "font-family": ["/^(?!.*(var\\(--font-(sans|mono)\\)|inherit)).*$/"]
+      },
+      {
+        "message": "Banned value. --o2-* is legacy; --color-text-primary/-caption were retired (Tier 1) — use --color-text-heading / --color-text-secondary. font-family must be var(--font-sans) or var(--font-mono) — no literal font stacks (FONT_AUDIT.md).",
+        "severity": "error"
+      }
+    ]
+  }
+}
diff --git a/web/eslint.config.js b/web/eslint.config.js
index 9fbf7dee9d..53e3b76968 100644
--- a/web/eslint.config.js
+++ b/web/eslint.config.js
@@ -7,6 +7,70 @@ import prettier from "eslint-plugin-prettier";
 import cypress from "eslint-plugin-cypress";
 import fs from "fs";
 
+// Bans the legacy --o2-* CSS custom-property vocabulary anywhere in a .vue/.ts
+// file's raw text — catches Tailwind arbitrary-value usages in templates
+// (e.g. class="bg-[var(--o2-*)]"), <style> blocks, and JS string literals.
+// This is the enforcing gate for the --o2- ban (stylelint can't allowlist values).
+//
+// ALLOWLIST: EMPTY on purpose. Every `--o2-*` custom property is a hard error —
+// including the ones that still "work" at runtime (OTable tree indents, row-status,
+// the dynamic `--o2-span-*` palette). The goal is to eliminate the --o2-* vocabulary
+// entirely, so these must be renamed off the namespace (to a --color-* token, a
+// Tailwind utility, or a non-o2 runtime custom property). Do NOT add exemptions here;
+// fixing the underlying usage is the only way to make this rule pass.
+const O2_ALLOWLIST = new Set([]);
+const O2_ALLOW_PREFIXES = [];
+
+// A `--o2-*` is a banned CSS custom property only when USED as one: inside var(),
+// a Tailwind shorthand/arbitrary bracket, or as a declaration / `:style` key
+// (immediately followed by `:`). The `--o2-` prefix also collides with the
+// OpenObserve collector's CLI flags (e.g. the k8s installer's `--o2-<flag>=<value>`
+// URL flag) and with prose/comments that name them — those are NOT CSS tokens and
+// must not trip the ban. This is the same discrimination as scripts/check-css-tokens.mjs.
+const isO2CssUsage = (text, index, name) => {
+  const before = text.slice(Math.max(0, index - 8), index);
+  const after = text.slice(index + name.length, index + name.length + 4);
+  return (
+    /var\(\s*$/.test(before) || // var(--o2-*
+    /[A-Za-z0-9\]]-\(\s*$/.test(before) || // bg-(--o2-*  (Tailwind shorthand)
+    /\[\s*$/.test(before) || // [--o2-*  (arbitrary property/value)
+    /^\s*['"]?\s*:/.test(after) // --o2-*:  or  '--o2-*':  (decl / :style key)
+  );
+};
+
+const noLegacyO2Tokens = {
+  rules: {
+    "no-legacy-o2-tokens": {
+      meta: { type: "problem", docs: { description: "Ban legacy --o2-* CSS custom properties" } },
+      create(context) {
+        const allowed = (name) =>
+          O2_ALLOWLIST.has(name) || O2_ALLOW_PREFIXES.some((re) => re.test(name));
+        return {
+          Program() {
+            const sourceCode = context.sourceCode ?? context.getSourceCode();
+            const text = sourceCode.getText();
+            const re = /--o2-[A-Za-z0-9-]+/g;
+            let match;
+            while ((match = re.exec(text))) {
+              if (allowed(match[0])) continue;
+              if (!isO2CssUsage(text, match.index, match[0])) continue; // CLI flag / prose
+              const start = match.index;
+              const end = start + match[0].length;
+              context.report({
+                loc: {
+                  start: sourceCode.getLocFromIndex(start),
+                  end: sourceCode.getLocFromIndex(end),
+                },
+                message: `Legacy CSS token "${match[0]}" is banned. Use the modern --color-* token or a Tailwind utility.`,
+              });
+            }
+          },
+        };
+      },
+    },
+  },
+};
+
 // Read .gitignore to use as ignore patterns
 const gitignore = fs.existsSync(".gitignore")
   ? fs
@@ -44,8 +108,28 @@ export default [
       vue,
       "@typescript-eslint": typescript,
       prettier,
+      "local": noLegacyO2Tokens,
     },
     rules: {
+      "local/no-legacy-o2-tokens": ["error"],
+
+      // Dark-mode schema (O2_TOKEN_MIGRATION_PLAN §3.R.3) — warn now, error at Phase G.
+      // The two sanctioned seams (useTheme.ts / chartTheme.ts) turn this off below.
+      "no-restricted-syntax": [
+        "warn",
+        {
+          selector:
+            "BinaryExpression[operator=/^[!=]==?$/] > MemberExpression[property.name='theme']",
+          message:
+            "Dark mode has one JS seam: useTheme().isDark or chartColor(). Do not compare store.state.theme (§3.R).",
+        },
+        {
+          selector: "VariableDeclarator[id.name=/^(isDark|isDarkMode|darkMode)$/]",
+          message: "Import useTheme() instead of a private isDark flag (§3.R).",
+        },
+      ],
+      // Every <style> block must be scoped (§3.H) — warn now, error at Phase F.
+      "vue/enforce-style-attribute": ["warn", { allow: ["scoped", "module"] }],
       // Disable noisy rules inherited from recommended configs
       "prettier/prettier": "off",
       "no-unused-vars": "off",
@@ -86,276 +170,14 @@ export default [
       "vue/no-ref-as-operand": "off",
       "vue/multi-word-component-names": "off",
 
-      // Enforced rules
-      "vue/no-restricted-html-elements": [
-        "error",
-        // Dropdown / list
-        {
-          element: "q-menu",
-          message:
-            'Use <ODropdown> from "@/lib/overlay/Dropdown/ODropdown.vue" instead of <q-menu>.',
-        },
-        {
-          element: "q-list",
-          message:
-            'Drop <q-list> inside <ODropdown> (not needed), or replace standalone <q-list> with a native <ul> / <div> + Tailwind.',
-        },
-        {
-          element: "q-item",
-          message:
-            'Use <ODropdownItem> from "@/lib/overlay/Dropdown/ODropdownItem.vue" (inside <ODropdown>), or a native <li> / <div> + Tailwind (display rows).',
-        },
-        {
-          element: "q-item-section",
-          message:
-            "Use <ODropdownItem>'s #icon-left / #default / #icon-right slots (inside <ODropdown>), or a native <div class=\"flex ...\"> (display).",
-        },
-        {
-          element: "q-item-label",
-          message:
-            'Use plain text / <span class="text-sm">, <span class="block text-xs text-muted-foreground"> (caption), or <ODropdownGroup :label="..."> (header) instead of <q-item-label>.',
-        },
-        // Button
-        {
-          element: "q-btn",
-          message: 'Use <OButton> from "@/lib/core/Button/OButton.vue" instead of <q-btn>.',
-        },
-        {
-          element: "q-btn-group",
-          message: 'Use <OButtonGroup> from "@/lib/core/Button/OButtonGroup.vue" instead of <q-btn-group>.',
-        },
-        {
-          element: "q-btn-toggle",
-          message: 'Use <OToggleGroup> from "@/lib/core/ToggleGroup/OToggleGroup.vue" instead of <q-btn-toggle>.',
-        },
-        {
-          element: "q-btn-dropdown",
-          message: 'Use <OButton> with <ODropdown> instead of <q-btn-dropdown>.',
-        },
-        // Tabs
-        {
-          element: "q-tabs",
-          message: 'Use <OTabs> from "@/lib/navigation/Tabs/OTabs.vue" instead of <q-tabs>.',
-        },
-        {
-          element: "q-tab",
-          message: 'Use <OTab> from "@/lib/navigation/Tabs/OTab.vue" instead of <q-tab>.',
-        },
-        {
-          element: "q-tab-panels",
-          message: 'Use <OTabPanels> from "@/lib/navigation/Tabs/OTabPanels.vue" instead of <q-tab-panels>.',
-        },
-        {
-          element: "q-tab-panel",
-          message: 'Use <OTabPanel> from "@/lib/navigation/Tabs/OTabPanel.vue" instead of <q-tab-panel>.',
-        },
-        {
-          element: "q-route-tab",
-          message: 'Use <ORouteTab> from "@/lib/navigation/Tabs/ORouteTab.vue" instead of <q-route-tab>.',
-        },
-        // Toolbar / layout primitives
-        {
-          element: "q-bar",
-          message: "Use a plain <div> instead of <q-bar>.",
-        },
-        {
-          element: "q-toolbar",
-          message: "Use a plain <div> instead of <q-toolbar>.",
-        },
-        {
-          element: "q-toolbar-title",
-          message: "Remove <q-toolbar-title> — use a plain <div> or <span> for the title content.",
-        },
-        // Icon
-        {
-          element: "q-icon",
-          message: 'Use <OIcon> from "@/lib/core/Icon/OIcon.vue" instead of <q-icon>. To add a new icon update OIcon.icons.ts.',
-        },
-        // Overlay
-        {
-          element: "q-dialog",
-          message: 'Use <ODialog> from "@/lib/overlay/Dialog/ODialog.vue" for modals, or <ODrawer> from "@/lib/overlay/Drawer/ODrawer.vue" for side-panel drawers, instead of <q-dialog>.',
-        },
-        {
-          element: "q-tooltip",
-          message: 'Use <OTooltip> from "@/lib/overlay/Tooltip/OTooltip.vue" instead of <q-tooltip>.',
-        },
-        {
-          element: "q-drawer",
-          message: 'Use <ODrawer> from "@/lib/overlay/Drawer/ODrawer.vue" instead of <q-drawer>.',
-        },
-        // Badge / chip / avatar / image
-        {
-          element: "q-badge",
-          message: 'Use <OBadge> from "@/lib/core/Badge/OBadge.vue" instead of <q-badge>.',
-        },
-        {
-          element: "q-chip",
-          message: 'Use <OBadge> from "@/lib/core/Badge/OBadge.vue" instead of <q-chip>.',
-        },
-        {
-          element: "q-avatar",
-          message: 'Use a plain <div class="rounded-full ..."> wrapper with an inner <OIcon> or <img> instead of <q-avatar>.',
-        },
-        {
-          element: "q-img",
-          message: "Use a native <img> element instead of <q-img>. q-img features (lazy load, aspect-ratio, spinner) are not used anywhere in this codebase.",
-        },
-        // Card
-        {
-          element: "q-card",
-          message: 'Use <OCard> from "@/lib/core/Card/OCard.vue" instead of <q-card>.',
-        },
-        {
-          element: "q-card-actions",
-          message: 'Use <OCardActions> from "@/lib/core/Card/OCardActions.vue" instead of <q-card-actions>.',
-        },
-        {
-          element: "q-card-section",
-          message: 'Use <OCardSection> from "@/lib/core/Card/OCardSection.vue" instead of <q-card-section>.',
-        },
-        // Collapsible / separator / splitter
-        {
-          element: "q-expansion-item",
-          message: 'Use <OCollapsible> from "@/lib/core/Collapsible/OCollapsible.vue" instead of <q-expansion-item>.',
-        },
-        {
-          element: "q-separator",
-          message: 'Use <OSeparator> from "@/lib/core/Separator/OSeparator.vue" instead of <q-separator>.',
-        },
-        {
-          element: "q-splitter",
-          message: 'Use <OSplitter> from "@/lib/core/Splitter/OSplitter.vue" instead of <q-splitter>.',
-        },
-        // Navigation
-        {
-          element: "q-pagination",
-          message: 'Use <OPagination> from "@/lib/navigation/Pagination/OPagination.vue" instead of <q-pagination>.',
-        },
-        {
-          element: "q-stepper",
-          message: 'Use <OStepper> from "@/lib/navigation/Stepper/OStepper.vue" instead of <q-stepper>.',
-        },
-        {
-          element: "q-step",
-          message: 'Use <OStep> from "@/lib/navigation/Stepper/OStep.vue" instead of <q-step>.',
-        },
-        {
-          element: "q-stepper-navigation",
-          message: "Remove <q-stepper-navigation> — place Back/Continue buttons in a single nav div outside </OStepper>.",
-        },
-        // Data display
-        {
-          element: "q-table",
-          message: 'Use <OTable> from "@/lib/core/Table/OTable.vue" instead of <q-table>.',
-        },
-        {
-          element: "q-timeline",
-          message: 'Use <OTimeline> from "@/lib/data/Timeline/OTimeline.vue" instead of <q-timeline>.',
-        },
-        {
-          element: "q-timeline-entry",
-          message: 'Use <OTimelineItem> from "@/lib/data/Timeline/OTimelineItem.vue" instead of <q-timeline-entry>.',
-        },
-        {
-          element: "q-tree",
-          message: 'Use <OTree> from "@/lib/data/Tree/OTree.vue" instead of <q-tree>.',
-        },
-        {
-          element: "q-virtual-scroll",
-          message: 'Use <OVirtualScroll> from "@/lib/core/VirtualScroll/OVirtualScroll.vue" instead of <q-virtual-scroll>.',
-        },
-        // Feedback / loading
-        {
-          element: "q-spinner",
-          message: 'Use <OSpinner> from "@/lib/feedback/Spinner/OSpinner.vue" instead of <q-spinner>.',
-        },
-        {
-          element: "q-spinner-hourglass",
-          message: 'Use <OSpinner> from "@/lib/feedback/Spinner/OSpinner.vue" instead of <q-spinner-hourglass>.',
-        },
-        {
-          element: "q-spinner-dots",
-          message: 'Use <OSpinner variant="dots"> from "@/lib/feedback/Spinner/OSpinner.vue" instead of <q-spinner-dots>.',
-        },
-        {
-          element: "q-spinner-gears",
-          message: 'Use <OSpinner> from "@/lib/feedback/Spinner/OSpinner.vue" instead of <q-spinner-gears>.',
-        },
-        {
-          element: "q-circular-progress",
-          message: 'Use <OSpinner> from "@/lib/feedback/Spinner/OSpinner.vue" instead of <q-circular-progress>.',
-        },
-        {
-          element: "q-linear-progress",
-          message: 'Use <OProgressBar> from "@/lib/data/ProgressBar/OProgressBar.vue" instead of <q-linear-progress>.',
-        },
-        {
-          element: "q-inner-loading",
-          message: 'Use <OInnerLoading> from "@/lib/feedback/InnerLoading/OInnerLoading.vue" instead of <q-inner-loading>.',
-        },
-        {
-          element: "q-skeleton",
-          message: 'Use <OSkeleton> from "@/lib/feedback/Skeleton/OSkeleton.vue" instead of <q-skeleton>.',
-        },
-        {
-          element: "q-banner",
-          message: 'Use <OBanner> from "@/lib/feedback/Banner/OBanner.vue" instead of <q-banner>.',
-        },
-        // Forms
-        {
-          element: "q-form",
-          message: 'Use <OForm> from "@/lib/forms/Form/OForm.vue" instead of <q-form>.',
-        },
-        {
-          element: "q-input",
-          message: 'Use <OInput> from "@/lib/forms/Input/OInput.vue" instead of <q-input>. For textarea use <OTextarea>. For form-bound fields use <OFormInput> / <OFormTextarea>.',
-        },
-        {
-          element: "q-select",
-          message: 'Use <OSelect> from "@/lib/forms/Select/OSelect.vue" instead of <q-select>. For form-bound fields use <OFormSelect>.',
-        },
-        {
-          element: "q-checkbox",
-          message: 'Use <OCheckbox> / <OCheckboxGroup> from "@/lib/forms/Checkbox/OCheckbox.vue" instead of <q-checkbox>. For form-bound fields use <OFormCheckbox>.',
-        },
-        {
-          element: "q-radio",
-          message: 'Use <ORadio> inside <ORadioGroup> from "@/lib/forms/Radio/" instead of <q-radio>. Wrap items in <ORadioGroup v-model="...">.',
-        },
-        {
-          element: "q-toggle",
-          message: 'Use <OSwitch> from "@/lib/forms/Switch/OSwitch.vue" instead of <q-toggle>. For form-bound fields use <OFormSwitch>.',
-        },
-        {
-          element: "q-slider",
-          message: 'Use <OSlider> from "@/lib/forms/Slider/OSlider.vue" instead of <q-slider>. For form-bound fields use <OFormSlider>.',
-        },
-        {
-          element: "q-range",
-          message: 'Use <ORange> from "@/lib/forms/Range/ORange.vue" instead of <q-range>. For form-bound fields use <OFormRange>.',
-        },
-        {
-          element: "q-file",
-          message: 'Use <OFile> from "@/lib/forms/File/OFile.vue" instead of <q-file>. For form-bound fields use <OFormFile>.',
-        },
-        {
-          element: "q-date",
-          message: 'Use <ODate> from "@/lib/forms/Date/ODate.vue" instead of <q-date>. For form-bound fields use <OFormDate>.',
-        },
-        {
-          element: "q-time",
-          message: 'Use <OTime> from "@/lib/forms/Time/OTime.vue" instead of <q-time>. For form-bound fields use <OFormTime>.',
-        },
-        {
-          element: "q-color",
-          message: 'Use <OColor> from "@/lib/forms/Color/OColor.vue" instead of <q-color>. For form-bound fields use <OFormColor>.',
-        },
-        {
-          element: "q-option-group",
-          message: 'Use <OOptionGroup> from "@/lib/forms/OptionGroup/OOptionGroup.vue" instead of <q-option-group>. For form-bound fields use <OFormOptionGroup>.',
-        },
-      ],
+    },
+  },
+  {
+    // The two sanctioned dark-mode seams (§3.R.1) — the only files allowed to
+    // compare store.state.theme / declare an isDark flag.
+    files: ["src/composables/useTheme.ts", "src/utils/chartTheme.ts"],
+    rules: {
+      "no-restricted-syntax": "off",
     },
   },
   {
diff --git a/web/package-lock.json b/web/package-lock.json
index 041f54b78d..89c6dd5826 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -111,12 +111,14 @@
         "msw": "^2.12.7",
         "npm-run-all": "^4.1.5",
         "postcss": "^8.5.10",
+        "postcss-html": "^1.8.1",
         "prettier": "^3.7.4",
         "rollup-plugin-analyzer": "^4.0.0",
         "rollup-plugin-visualizer": "^6.0.5",
         "sass": "^1.97.1",
         "sass-loader": "^16.0.6",
         "start-server-and-test": "^2.1.3",
+        "stylelint": "^17.14.0",
         "tailwindcss": "^4.1.18",
         "typescript": "~5.9.3",
         "unplugin-icons": "^23.0.1",
@@ -248,6 +250,7 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -649,6 +652,68 @@
         "node": ">=18"
       }
     },
+    "node_modules/@cacheable/memory": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@cacheable/memory/-/memory-2.2.0.tgz",
+      "integrity": "sha512-CTLKqLItRCEixEAewD3/j9DB3/o96gpTPD4eJ1v+DGOlxZRZncRQkGYqqnAGCscYd6RNeXfGeiuCphsPtqyIfQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@cacheable/utils": "^2.5.0",
+        "@keyv/bigmap": "^1.3.1",
+        "hookified": "^1.15.1",
+        "keyv": "^5.6.0"
+      }
+    },
+    "node_modules/@cacheable/memory/node_modules/@keyv/bigmap": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@keyv/bigmap/-/bigmap-1.3.1.tgz",
+      "integrity": "sha512-WbzE9sdmQtKy8vrNPa9BRnwZh5UF4s1KTmSK0KUVLo3eff5BlQNNWDnFOouNpKfPKDnms9xynJjsMYjMaT/aFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hashery": "^1.4.0",
+        "hookified": "^1.15.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "keyv": "^5.6.0"
+      }
+    },
+    "node_modules/@cacheable/memory/node_modules/keyv": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-5.6.0.tgz",
+      "integrity": "sha512-CYDD3SOtsHtyXeEORYRx2qBtpDJFjRTGXUtmNEMGyzYOKj1TE3tycdlho7kA1Ufx9OYWZzg52QFBGALTirzDSw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@keyv/serialize": "^1.1.1"
+      }
+    },
+    "node_modules/@cacheable/utils": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@cacheable/utils/-/utils-2.5.0.tgz",
+      "integrity": "sha512-buipgOVDkkPXNR5+xBpDw7Zk2n1EvU7qBJCNUcL7rhQ//kfpOXPAvQ511Os0vpLYJ1pZnvudNytkQt2hst3wqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hashery": "^1.5.1",
+        "keyv": "^5.6.0"
+      }
+    },
+    "node_modules/@cacheable/utils/node_modules/keyv": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-5.6.0.tgz",
+      "integrity": "sha512-CYDD3SOtsHtyXeEORYRx2qBtpDJFjRTGXUtmNEMGyzYOKj1TE3tycdlho7kA1Ufx9OYWZzg52QFBGALTirzDSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@keyv/serialize": "^1.1.1"
+      }
+    },
     "node_modules/@csstools/color-helpers": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-5.1.0.tgz",
@@ -737,6 +802,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -745,9 +811,9 @@
       }
     },
     "node_modules/@csstools/css-syntax-patches-for-csstree": {
-      "version": "1.0.23",
-      "resolved": "https://registry.npmjs.org/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.0.23.tgz",
-      "integrity": "sha512-YEmgyklR6l/oKUltidNVYdjSmLSW88vMsKx0pmiS3r71s8ZZRpd8A0Yf0U+6p/RzElmMnPBv27hNWjDQMSZRtQ==",
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.1.6.tgz",
+      "integrity": "sha512-TcJCWFbXLPpJYq6z7bfOyjWYJDiDg2/I4gyUC9pqPNqHFRIey0EB0q0L5cSnQDfWJg8Jd6VadakxdIez/3zkqQ==",
       "dev": true,
       "funding": [
         {
@@ -760,8 +826,13 @@
         }
       ],
       "license": "MIT-0",
-      "engines": {
-        "node": ">=18"
+      "peerDependencies": {
+        "css-tree": "^3.2.1"
+      },
+      "peerDependenciesMeta": {
+        "css-tree": {
+          "optional": true
+        }
       }
     },
     "node_modules/@csstools/css-tokenizer": {
@@ -780,6 +851,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -850,6 +922,7 @@
       "integrity": "sha512-UyGQ95Xc2Euo/IzyG+4LM1IvxXOTDHWhO/K7jtC9wcFDo755DAL6Msw44cz6aiVjjTN1kwmjkTHQgZR1U0Gusw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "find-up": "6.3.0",
         "fs-extra": "9.1.0",
@@ -2355,6 +2428,13 @@
         "tslib": "2"
       }
     },
+    "node_modules/@keyv/serialize": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@keyv/serialize/-/serialize-1.1.1.tgz",
+      "integrity": "sha512-dXn3FZhPv0US+7dtJsIi2R+c7qWYiReoEh5zUntWCf4oSpMNib8FDhSoed6m3QyZdx5hK7iLFkYk3rNxwt8vTA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@leichtgewicht/ip-codec": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz",
@@ -2476,6 +2556,7 @@
       "resolved": "https://registry.npmjs.org/@openobserve/browser-logs/-/browser-logs-0.4.0-beta.7.tgz",
       "integrity": "sha512-TtCIMI+48khK2QZC9kSUI0EFetVVBqFaMtn+kcVLEi+W8dserUwvOHHFEGl2G+nByaJBBgsRld4uBjg84u2W2A==",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "@openobserve/browser-core": "0.4.0-beta.7",
         "@openobserve/js-core": "0.4.0-beta.7"
@@ -2494,6 +2575,7 @@
       "resolved": "https://registry.npmjs.org/@openobserve/browser-rum/-/browser-rum-0.4.0-beta.7.tgz",
       "integrity": "sha512-KthzdkYMcx2VA7Q23QDUyRuMdNRqjLMzMkH57o7kFXaAjUG4DOHWlnGA7gxle7P51W1MweTq7r3IBH7WGbQApQ==",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "@openobserve/browser-core": "0.4.0-beta.7",
         "@openobserve/browser-rum-core": "0.4.0-beta.7",
@@ -3504,6 +3586,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@sindresorhus/merge-streams": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-4.0.0.tgz",
+      "integrity": "sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@standard-schema/spec": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
@@ -4179,7 +4274,6 @@
       "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
       "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/eslint": "*",
         "@types/estree": "*"
@@ -4569,6 +4663,7 @@
       "integrity": "sha512-iIACsx8pxRnguSYhHiMn2PvhvfpopO9FXHyn1mG5txZIsAaB6F0KwbFnUQN3KCiG3Jcuad/Cao2FAs1Wp7vAyg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.52.0",
         "@typescript-eslint/types": "8.52.0",
@@ -5048,6 +5143,7 @@
       "resolved": "https://registry.npmjs.org/@vue-flow/core/-/core-1.48.1.tgz",
       "integrity": "sha512-3IxaMBLvWRbznZ4CuK0kVhp4Y4lCDQx9nhi48Swp6PwPw29KNhmiKd2kaBogYeWjGLb/tLjlE9V0s3jEmKCYWw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vueuse/core": "^10.5.0",
         "d3-drag": "^3.0.0",
@@ -5411,7 +5507,6 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
       "integrity": "sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/helper-numbers": "1.13.2",
         "@webassemblyjs/helper-wasm-bytecode": "1.13.2"
@@ -5421,29 +5516,25 @@
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.13.2.tgz",
       "integrity": "sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-api-error": {
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz",
       "integrity": "sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-buffer": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.14.1.tgz",
       "integrity": "sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-numbers": {
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.13.2.tgz",
       "integrity": "sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/floating-point-hex-parser": "1.13.2",
         "@webassemblyjs/helper-api-error": "1.13.2",
@@ -5454,15 +5545,13 @@
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.13.2.tgz",
       "integrity": "sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-wasm-section": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.14.1.tgz",
       "integrity": "sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-buffer": "1.14.1",
@@ -5475,7 +5564,6 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.13.2.tgz",
       "integrity": "sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@xtuc/ieee754": "^1.2.0"
       }
@@ -5485,7 +5573,6 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.13.2.tgz",
       "integrity": "sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@xtuc/long": "4.2.2"
       }
@@ -5494,15 +5581,13 @@
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.13.2.tgz",
       "integrity": "sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@webassemblyjs/wasm-edit": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.14.1.tgz",
       "integrity": "sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-buffer": "1.14.1",
@@ -5519,7 +5604,6 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.14.1.tgz",
       "integrity": "sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
@@ -5533,7 +5617,6 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.14.1.tgz",
       "integrity": "sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-buffer": "1.14.1",
@@ -5546,7 +5629,6 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.14.1.tgz",
       "integrity": "sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-api-error": "1.13.2",
@@ -5561,7 +5643,6 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.14.1.tgz",
       "integrity": "sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@xtuc/long": "4.2.2"
@@ -5577,15 +5658,13 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
       "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
-      "license": "BSD-3-Clause",
-      "peer": true
+      "license": "BSD-3-Clause"
     },
     "node_modules/@xtuc/long": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
-      "license": "Apache-2.0",
-      "peer": true
+      "license": "Apache-2.0"
     },
     "node_modules/abbrev": {
       "version": "2.0.0",
@@ -5625,6 +5704,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -5637,7 +5717,6 @@
       "resolved": "https://registry.npmjs.org/acorn-import-phases/-/acorn-import-phases-1.0.4.tgz",
       "integrity": "sha512-wKmbr/DDiIXzEOiWrTTUcDm24kQ2vGfZQvM2fwg2vXqR5uW6aapr7ObPtj1th32b9u90/Pf4AItvdTh42fBmVQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10.13.0"
       },
@@ -5696,6 +5775,7 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz",
       "integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -6447,6 +6527,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -6671,6 +6752,30 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/cacheable": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/cacheable/-/cacheable-2.5.0.tgz",
+      "integrity": "sha512-60cyAOytib/OzBw1JNSoSV/boK1AtHryDIjvVBk7XbN4ugfkM3+Sry7fEjNgPMGgOjuaZPAp8ruZ0Cxafwyq9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@cacheable/memory": "^2.2.0",
+        "@cacheable/utils": "^2.5.0",
+        "hookified": "^1.15.0",
+        "keyv": "^5.6.0",
+        "qified": "^0.10.1"
+      }
+    },
+    "node_modules/cacheable/node_modules/keyv": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-5.6.0.tgz",
+      "integrity": "sha512-CYDD3SOtsHtyXeEORYRx2qBtpDJFjRTGXUtmNEMGyzYOKj1TE3tycdlho7kA1Ufx9OYWZzg52QFBGALTirzDSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@keyv/serialize": "^1.1.1"
+      }
+    },
     "node_modules/cachedir": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/cachedir/-/cachedir-2.4.0.tgz",
@@ -6857,7 +6962,6 @@
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
       "integrity": "sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=6.0"
       }
@@ -7042,6 +7146,13 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "license": "MIT"
     },
+    "node_modules/colord": {
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
+      "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/colorette": {
       "version": "2.0.20",
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
@@ -7250,6 +7361,52 @@
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
       "license": "MIT"
     },
+    "node_modules/cosmiconfig": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.2.tgz",
+      "integrity": "sha512-gtTZxTDau1wL7Y7zifc2dd8jHSK/k6BTx/2Xp/BpdlAdnlYWFVt7qhJqgwi7637yRwRQ3qL4ZidbB4I8tA5VOg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "env-paths": "^2.2.1",
+        "import-fresh": "^3.3.0",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/d-fischer"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.9.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cosmiconfig/node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/create-ecdh": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz",
@@ -7351,6 +7508,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/css-functions-list": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.3.3.tgz",
+      "integrity": "sha512-8HFEBPKhOpJPEPu70wJJetjKta86Gw9+CCyCnB3sui2qQfOvRyqBy4IKLKKAwdMpWb2lHXWk9Wb4Z6AmaUT1Pg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/css-select": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
@@ -7369,14 +7536,14 @@
       }
     },
     "node_modules/css-tree": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.1.0.tgz",
-      "integrity": "sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
+      "integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "mdn-data": "2.12.2",
-        "source-map-js": "^1.0.1"
+        "mdn-data": "2.27.1",
+        "source-map-js": "^1.2.1"
       },
       "engines": {
         "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
@@ -7454,6 +7621,7 @@
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@cypress/request": "^3.0.10",
         "@cypress/xvfb": "^1.2.4",
@@ -7658,6 +7826,7 @@
       "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
       "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
       "license": "ISC",
+      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -7826,6 +7995,7 @@
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
       "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/kossnocorp"
@@ -8245,6 +8415,7 @@
       "resolved": "https://registry.npmjs.org/echarts/-/echarts-6.1.0.tgz",
       "integrity": "sha512-q0yaFPggC9FUdsWH4blavRWFmxdrIodbkoKNAjJudAI6CA9gNPxHtV2RcZNEepZVlk4yvBYkOkbk6HIVpIyHZA==",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "tslib": "2.3.0",
         "zrender": "6.1.0"
@@ -8375,6 +8546,7 @@
       "integrity": "sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "ansi-colors": "^4.1.1",
         "strip-ansi": "^6.0.1"
@@ -8395,6 +8567,16 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/env-paths": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
+      "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/error-ex": {
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz",
@@ -8551,6 +8733,7 @@
       "integrity": "sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw==",
       "hasInstallScript": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "esbuild": "bin/esbuild"
       },
@@ -8642,6 +8825,7 @@
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -8702,6 +8886,7 @@
       "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "eslint-config-prettier": "bin/cli.js"
       },
@@ -8775,6 +8960,7 @@
       "integrity": "sha512-nA5yUs/B1KmKzvC42fyD0+l9Yd+LtEpVhWRbXuDj0e+ZURcTtyRbMDWUeJmTAh2wC6jC83raS63anNM2YT3NPw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
         "natural-compare": "^1.4.0",
@@ -9392,6 +9578,16 @@
       ],
       "license": "BSD-3-Clause"
     },
+    "node_modules/fastest-levenshtein": {
+      "version": "1.0.16",
+      "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz",
+      "integrity": "sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.9.1"
+      }
+    },
     "node_modules/fastq": {
       "version": "1.20.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
@@ -9803,6 +9999,19 @@
         "node": "6.* || 8.* || >= 10.*"
       }
     },
+    "node_modules/get-east-asian-width": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.6.0.tgz",
+      "integrity": "sha512-QRbvDIbx6YklUe6RxeTeleMR0yv3cYH6PsPZHcnVn7xv7zO1BHN8r0XETu8n6Ye3Q+ahtSarc3WgtNWmehIBfA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
@@ -9961,8 +10170,7 @@
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
       "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
-      "license": "BSD-2-Clause",
-      "peer": true
+      "license": "BSD-2-Clause"
     },
     "node_modules/global-dirs": {
       "version": "3.0.1",
@@ -9980,6 +10188,54 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/global-modules": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz",
+      "integrity": "sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "global-prefix": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/global-prefix": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-3.0.0.tgz",
+      "integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ini": "^1.3.5",
+        "kind-of": "^6.0.2",
+        "which": "^1.3.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/global-prefix/node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/global-prefix/node_modules/which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "which": "bin/which"
+      }
+    },
     "node_modules/globals": {
       "version": "14.0.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
@@ -10010,6 +10266,57 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/globby": {
+      "version": "16.2.1",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-16.2.1.tgz",
+      "integrity": "sha512-JmsqJalahxxgW8V2ecSQ2G7UjPlI9cpKdrkG9KoNiXhd/YslXOTEB0cViENWUznuovIuNT+FkMbraDGjr4FCUg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@sindresorhus/merge-streams": "^4.0.0",
+        "fast-glob": "^3.3.3",
+        "ignore": "^7.0.5",
+        "is-path-inside": "^4.0.0",
+        "slash": "^5.1.0",
+        "unicorn-magic": "^0.4.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globby/node_modules/ignore": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.6.tgz",
+      "integrity": "sha512-BAg6QkE8W+TuQLrrw0Ugr7HegXduRuuj8/ti2kSOc+jz1dmx8/WNcjr6XGnq5YpDWxFwwaavqD0+jIUOKelTsw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/globby/node_modules/is-path-inside": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-4.0.0.tgz",
+      "integrity": "sha512-lJJV/5dYS+RcL8uQdBDW9c9uWFLLBNRyFhnAKXw5tVqLlKZ4RMGZKv+YQ/IA3OhD+RpbJa1LLFM1FQPGyIXvOA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globjoin": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/globjoin/-/globjoin-0.1.4.tgz",
+      "integrity": "sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/gopd": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
@@ -10083,6 +10390,7 @@
       "integrity": "sha512-Tz23LR9T9jOGVZm2x1EPdXqwA37G/owYMxRwU0E4miurAtFsPMQ1d2Jc2okUaSjZqAFz2oEn3FLXC5a0a+siyA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/node": ">=20.0.0",
         "@types/whatwg-mimetype": "^3.0.2",
@@ -10212,6 +10520,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/hashery": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/hashery/-/hashery-1.5.1.tgz",
+      "integrity": "sha512-iZyKG96/JwPz1N55vj2Ie2vXbhu440zfUfJvSwEqEbeLluk7NnapfGqa7LH0mOsnDxTF85Mx8/dyR6HfqcbmbQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hookified": "^1.15.0"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
     "node_modules/hasown": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz",
@@ -10261,6 +10582,13 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "node_modules/hookified": {
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/hookified/-/hookified-1.15.1.tgz",
+      "integrity": "sha512-MvG/clsADq1GPM2KGo2nyfaWVyn9naPiXrqIe4jYjXNZQt238kWyOGrsyc/DmRAQ+Re6yeo6yX/yoNCG5KAEVg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/hosted-git-info": {
       "version": "2.8.9",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
@@ -10333,6 +10661,19 @@
         "node": ">= 12"
       }
     },
+    "node_modules/html-tags": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-5.1.0.tgz",
+      "integrity": "sha512-n6l5uca7/y5joxZ3LUePhzmBFUJ+U2YWzhMa8XUTecSeSlQiZdF5XAd/Q3/WUl0VsXgUwWi8I7CNIwdI5WN1SQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/html-webpack-plugin-5": {
       "name": "html-webpack-plugin",
       "version": "5.6.5",
@@ -11462,7 +11803,6 @@
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
       "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/node": "*",
         "merge-stream": "^2.0.0",
@@ -11730,8 +12070,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
       "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/json-schema": {
       "version": "0.4.0",
@@ -11859,7 +12198,8 @@
       "version": "1.9.4",
       "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
       "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
-      "license": "BSD-2-Clause"
+      "license": "BSD-2-Clause",
+      "peer": true
     },
     "node_modules/levn": {
       "version": "0.4.1",
@@ -12145,6 +12485,13 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/listr2": {
       "version": "3.14.0",
       "resolved": "https://registry.npmjs.org/listr2/-/listr2-3.14.0.tgz",
@@ -12222,7 +12569,6 @@
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.1.tgz",
       "integrity": "sha512-IWqP2SCPhyVFTBtRcgMHdzlf9ul25NwaFx4wCEH/KjAXuuHY4yNjvPXsBokp8jCB936PyWRaPKUNh8NvylLp2Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=6.11.5"
       },
@@ -12287,6 +12633,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lodash.truncate": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
+      "integrity": "sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/log-symbols": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
@@ -12458,6 +12811,17 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/mathml-tag-names": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-4.0.0.tgz",
+      "integrity": "sha512-aa6AU2Pcx0VP/XWnh8IGL0SYSgQHDT6Ucror2j2mXeFAlN3ahaNs8EZtG1YiticMkSLj3Gt6VPFfZogt7G5iFQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -12470,9 +12834,9 @@
       }
     },
     "node_modules/mdn-data": {
-      "version": "2.12.2",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.12.2.tgz",
-      "integrity": "sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==",
+      "version": "2.27.1",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz",
+      "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
       "dev": true,
       "license": "CC0-1.0"
     },
@@ -12514,6 +12878,19 @@
         "node": ">= 0.10.0"
       }
     },
+    "node_modules/meow": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/meow/-/meow-14.1.0.tgz",
+      "integrity": "sha512-EDYo6VlmtnumlcBCbh1gLJ//9jvM/ndXHfVXIFrZVr6fGcwTUyCTFNTLCKuY3ffbK8L/+3Mzqnd58RojiZqHVw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/merge-descriptors": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
@@ -12736,7 +13113,8 @@
       "version": "0.52.2",
       "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.52.2.tgz",
       "integrity": "sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/moo": {
       "version": "0.5.2",
@@ -12897,9 +13275,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.11",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
-      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "version": "3.3.16",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.16.tgz",
+      "integrity": "sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q==",
       "funding": [
         {
           "type": "github",
@@ -14078,9 +14456,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.10",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.10.tgz",
-      "integrity": "sha512-pMMHxBOZKFU6HgAZ4eyGnwXF/EvPGGqUr0MnZ5+99485wwW41kW91A4LOGxSHhgugZmSChL5AlElNdwlNgcnLQ==",
+      "version": "8.5.19",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.19.tgz",
+      "integrity": "sha512-Mz8SaolMd8nB+G13WkORcxQKHZ/NE4xXevtkJHVuG+guo9/wYKlIMTKAqGdEmYOXR2ijPjTYNHssizdaVSUNdQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -14096,8 +14474,9 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "nanoid": "^3.3.11",
+        "nanoid": "^3.3.12",
         "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },
@@ -14105,6 +14484,125 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-html": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/postcss-html/-/postcss-html-1.8.1.tgz",
+      "integrity": "sha512-OLF6P7qctfAWayOhLpcVnTGqVeJzu2W3WpIYelfz2+JV5oGxfkcEvweN9U4XpeqE0P98dcD9ssusGwlF0TK0uQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "htmlparser2": "^8.0.0",
+        "js-tokens": "^9.0.0",
+        "postcss": "^8.5.0",
+        "postcss-safe-parser": "^6.0.0"
+      },
+      "engines": {
+        "node": "^12 || >=14"
+      }
+    },
+    "node_modules/postcss-html/node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/postcss-html/node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/postcss-html/node_modules/domutils": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/postcss-html/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/postcss-html/node_modules/htmlparser2": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
+      "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
+      "dev": true,
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1",
+        "entities": "^4.4.0"
+      }
+    },
+    "node_modules/postcss-html/node_modules/js-tokens": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-9.0.1.tgz",
+      "integrity": "sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/postcss-safe-parser": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz",
+      "integrity": "sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.3.3"
+      }
+    },
     "node_modules/postcss-selector-parser": {
       "version": "6.0.10",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
@@ -14142,6 +14640,7 @@
       "integrity": "sha512-v6UNi1+3hSlVvv8fSaoUbggEM5VErKmmpGA7Pl3HF8V6uKY7rvClBOJlH6yNwQtfTueNkGVpOv/mtWL9L4bgRA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -14318,6 +14817,26 @@
         "node": ">=16.0.0"
       }
     },
+    "node_modules/qified": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/qified/-/qified-0.10.1.tgz",
+      "integrity": "sha512-+Owyggi9IxT1ePKGafcI87ubSmxol6smwJ+RAHDQlx9+9cPwFWDiKFFCPuWhr9ignlGpZ9vDQLw67N4dcTVFEA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hookified": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/qified/node_modules/hookified": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/hookified/-/hookified-2.2.0.tgz",
+      "integrity": "sha512-p/LgFzRN5FeoD3DLS6bkUapeye6E4SI6yJs6KetENd18S+FBthqYq2amJUWpt5z0EQwwHemidjY5OqJGEKm5uA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/qs": {
       "version": "6.14.2",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.2.tgz",
@@ -14819,6 +15338,7 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.59.0.tgz",
       "integrity": "sha512-2oMpl67a3zCH9H79LeMcbDhXW/UmWG/y2zuqnF2jQq5uq9TbM9TVyXvA4+t+ne2IIkBdrLpAaRQAvo7YI/Yyeg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/estree": "1.0.8"
       },
@@ -15167,6 +15687,7 @@
       "integrity": "sha512-y5LWb0IlbO4e97Zr7c3mlpabcbBtS+ieiZ9iwDooShpFKWXf62zz5pEPdwrLYm+Bxn1fnbwFGzHuCLSA9tBmrw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "chokidar": "^4.0.0",
         "immutable": "^5.0.2",
@@ -15673,6 +16194,19 @@
         "node": ">=18"
       }
     },
+    "node_modules/slash": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz",
+      "integrity": "sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/slice-ansi": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-3.0.0.tgz",
@@ -16261,6 +16795,325 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/stylelint": {
+      "version": "17.14.0",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-17.14.0.tgz",
+      "integrity": "sha512-8xkHPpdqYryeIsOgfsYTmr6cIeC4nLYWk5S8BPxpodq8mIuepggkMljsHewWfuAjj/+qpRKou2QerhjMH3iasg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/stylelint"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/stylelint"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/css-calc": "^3.2.1",
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-syntax-patches-for-csstree": "^1.1.5",
+        "@csstools/css-tokenizer": "^4.0.0",
+        "@csstools/media-query-list-parser": "^5.0.0",
+        "@csstools/selector-resolve-nested": "^4.0.0",
+        "@csstools/selector-specificity": "^6.0.0",
+        "colord": "^2.9.3",
+        "cosmiconfig": "^9.0.2",
+        "css-functions-list": "^3.3.3",
+        "css-tree": "^3.2.1",
+        "debug": "^4.4.3",
+        "fast-glob": "^3.3.3",
+        "fastest-levenshtein": "^1.0.16",
+        "file-entry-cache": "^11.1.3",
+        "global-modules": "^2.0.0",
+        "globby": "^16.2.0",
+        "globjoin": "^0.1.4",
+        "html-tags": "^5.1.0",
+        "ignore": "^7.0.5",
+        "import-meta-resolve": "^4.2.0",
+        "mathml-tag-names": "^4.0.0",
+        "meow": "^14.1.0",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.5.15",
+        "postcss-safe-parser": "^7.0.1",
+        "postcss-selector-parser": "^7.1.4",
+        "postcss-value-parser": "^4.2.0",
+        "string-width": "^8.2.1",
+        "supports-hyperlinks": "^4.4.0",
+        "svg-tags": "^1.0.0",
+        "table": "^6.9.0",
+        "write-file-atomic": "^7.0.1"
+      },
+      "bin": {
+        "stylelint": "bin/stylelint.mjs"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/stylelint/node_modules/@csstools/css-calc": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-3.2.1.tgz",
+      "integrity": "sha512-DtdHlgXh5ZkA43cwBcAm+huzgJiwx3ZTWVjBs94kwz2xKqSimDA3lBgCjphYgwgVUMWatSM0pDd8TILB1yrVVg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/stylelint/node_modules/@csstools/css-parser-algorithms": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-4.0.0.tgz",
+      "integrity": "sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/stylelint/node_modules/@csstools/css-tokenizer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-4.0.0.tgz",
+      "integrity": "sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/stylelint/node_modules/@csstools/media-query-list-parser": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-5.0.0.tgz",
+      "integrity": "sha512-T9lXmZOfnam3eMERPsszjY5NK0jX8RmThmmm99FZ8b7z8yMaFZWKwLWGZuTwdO3ddRY5fy13GmmEYZXB4I98Eg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/stylelint/node_modules/@csstools/selector-resolve-nested": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/selector-resolve-nested/-/selector-resolve-nested-4.0.0.tgz",
+      "integrity": "sha512-9vAPxmp+Dx3wQBIUwc1v7Mdisw1kbbaGqXUM8QLTgWg7SoPGYtXBsMXvsFs/0Bn5yoFhcktzxNZGNaUt0VjgjA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "postcss-selector-parser": "^7.1.1"
+      }
+    },
+    "node_modules/stylelint/node_modules/@csstools/selector-specificity": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-6.0.0.tgz",
+      "integrity": "sha512-4sSgl78OtOXEX/2d++8A83zHNTgwCJMaR24FvsYL7Uf/VS8HZk9PTwR51elTbGqMuwH3szLvvOXEaVnqn0Z3zA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "postcss-selector-parser": "^7.1.1"
+      }
+    },
+    "node_modules/stylelint/node_modules/ansi-regex": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
+      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/stylelint/node_modules/file-entry-cache": {
+      "version": "11.1.5",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-11.1.5.tgz",
+      "integrity": "sha512-+PFTHITI08JIGhnNpGNI8T8inUpgZfk3GNEqfT9R2zZV2iFXg3CvqzSl/uEhs7TSGujYRELEANyDvS8Fj7+S7Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^6.1.23"
+      }
+    },
+    "node_modules/stylelint/node_modules/flat-cache": {
+      "version": "6.1.23",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-6.1.23.tgz",
+      "integrity": "sha512-f++BY9pTk+983xK1FLzlLpmM0i0z+jHmx3QESGkURMXujQZz1k5wzwX6hjnQ8goaD0B+sYnDK1yZ6MTyZfUaqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cacheable": "^2.5.0",
+        "flatted": "^3.4.2",
+        "hookified": "^1.15.0"
+      }
+    },
+    "node_modules/stylelint/node_modules/ignore": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.6.tgz",
+      "integrity": "sha512-BAg6QkE8W+TuQLrrw0Ugr7HegXduRuuj8/ti2kSOc+jz1dmx8/WNcjr6XGnq5YpDWxFwwaavqD0+jIUOKelTsw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/stylelint/node_modules/postcss-safe-parser": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-7.0.1.tgz",
+      "integrity": "sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss-safe-parser"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
+      }
+    },
+    "node_modules/stylelint/node_modules/postcss-selector-parser": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.4.tgz",
+      "integrity": "sha512-HeP7D2wyhkR+XaK6v4W8oRF62Dsz4flyuczALJp61GckGm42u1saSSJ/0auvcBqxs3jMRFEcPK34At/0JBKdOg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/stylelint/node_modules/string-width": {
+      "version": "8.2.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-8.2.2.tgz",
+      "integrity": "sha512-GaPUh5gfdrYzqeVNZvUfT23vYYxXzKYidUcnMtJg/3rxRV63EFZy3k6xfKlmfeJD0176lnUV/Usr3XcwSvFzpg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-east-asian-width": "^1.5.0",
+        "strip-ansi": "^7.1.2"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/stylelint/node_modules/strip-ansi": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.2.0.tgz",
+      "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.2.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
     "node_modules/supports-color": {
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
@@ -16276,6 +17129,49 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/supports-hyperlinks": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-4.5.0.tgz",
+      "integrity": "sha512-ZW2OvfeCXrNTbLakPUzjQG922EeGCOteFSVoek5DKStTh898wf7zgtuFlzQN8HfZCxC3Eh02yJVrRW51hADf+w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^5.0.1",
+        "supports-color": "^10.2.2"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-hyperlinks?sponsor=1"
+      }
+    },
+    "node_modules/supports-hyperlinks/node_modules/has-flag": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-5.0.1.tgz",
+      "integrity": "sha512-CsNUt5x9LUdx6hnk/E2SZLsDyvfqANZSUq4+D3D8RzDJ2M+HDTIkF60ibS1vHaK55vzgiZw1bEPFG9yH7l33wA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/supports-hyperlinks/node_modules/supports-color": {
+      "version": "10.2.2",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-10.2.2.tgz",
+      "integrity": "sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
     "node_modules/supports-preserve-symlinks-flag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
@@ -16288,6 +17184,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-tags": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
+      "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==",
+      "dev": true
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -16338,6 +17240,41 @@
         "url": "https://www.buymeacoffee.com/systeminfo"
       }
     },
+    "node_modules/table": {
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/table/-/table-6.9.0.tgz",
+      "integrity": "sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "ajv": "^8.0.1",
+        "lodash.truncate": "^4.4.2",
+        "slice-ansi": "^4.0.0",
+        "string-width": "^4.2.3",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/table/node_modules/slice-ansi": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz",
+      "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "astral-regex": "^2.0.0",
+        "is-fullwidth-code-point": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
+      }
+    },
     "node_modules/tagged-tag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/tagged-tag/-/tagged-tag-1.0.0.tgz",
@@ -16356,7 +17293,8 @@
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
       "integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/tapable": {
       "version": "2.3.0",
@@ -16394,7 +17332,6 @@
       "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.4.0.tgz",
       "integrity": "sha512-Bn5vxm48flOIfkdl5CaD2+1CiUVbonWQ3KQPyP7/EuIl9Gbzq/gQFOzaMFUEgVjB1396tcK0SG8XcNJ/2kDH8g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "^0.3.25",
         "jest-worker": "^27.4.5",
@@ -16555,6 +17492,7 @@
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -16725,7 +17663,8 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "license": "0BSD"
+      "license": "0BSD",
+      "peer": true
     },
     "node_modules/tsx": {
       "version": "4.21.0",
@@ -16922,6 +17861,7 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "devOptional": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -16986,6 +17926,19 @@
       "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
       "license": "MIT"
     },
+    "node_modules/unicorn-magic": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.4.0.tgz",
+      "integrity": "sha512-wH590V9VNgYH9g3lH9wWjTrUoKsjLF6sGLjhR4sH1LWpLmCOH0Zf7PukhDA8BiS7KHe4oPNkcTHqYkj7SOGUOw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/universalify": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
@@ -17282,6 +18235,7 @@
       "integrity": "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -17415,6 +18369,7 @@
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -17428,6 +18383,7 @@
       "integrity": "sha512-E4t7DJ9pESL6E3I8nFjPa4xGUd3PmiWDLsDztS2qXSJWfHtbQnwAWylaBvSNY48I3vr8PTqIZlyK8TE3V3CA4Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vitest/expect": "4.0.16",
         "@vitest/mocker": "4.0.16",
@@ -17545,6 +18501,7 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.26.tgz",
       "integrity": "sha512-SJ/NTccVyAoNUJmkM9KUqPcYlY+u8OVL1X5EW9RIs3ch5H2uERxyyIUI4MRxVCSOiEcupX9xNGde1tL9ZKpimA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.26",
         "@vue/compiler-sfc": "3.5.26",
@@ -17740,7 +18697,6 @@
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.5.0.tgz",
       "integrity": "sha512-e6vZvY6xboSwLz2GD36c16+O/2Z6fKvIf4pOXptw2rY9MVwE/TXc6RGqxD3I3x0a28lwBY7DE+76uTPSsBrrCA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "glob-to-regexp": "^0.4.1",
         "graceful-fs": "^4.1.2"
@@ -18110,7 +19066,6 @@
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.3.3.tgz",
       "integrity": "sha512-yd1RBzSGanHkitROoPFd6qsrxt+oFhg/129YzheDGqeustzX0vTZJZsSsQjVQC4yzBQ56K55XU8gaNCtIzOnTg==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10.13.0"
       }
@@ -18126,15 +19081,13 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.0.0.tgz",
       "integrity": "sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/webpack/node_modules/eslint-scope": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
       "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "esrecurse": "^4.3.0",
         "estraverse": "^4.1.1"
@@ -18148,7 +19101,6 @@
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
       "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
       "license": "BSD-2-Clause",
-      "peer": true,
       "engines": {
         "node": ">=4.0"
       }
@@ -18450,6 +19402,32 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/write-file-atomic": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-7.0.1.tgz",
+      "integrity": "sha512-OTIk8iR8/aCRWBqvxrzxR0hgxWpnYBblY1S5hDWBQfk/VFmJwzmJgQFN3WsoUKHISv2eAwe+PpbUzyL1CKTLXg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/write-file-atomic/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/ws": {
       "version": "8.21.0",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.21.0.tgz",
diff --git a/web/package.json b/web/package.json
index 87a35bf56e..02896d4736 100644
--- a/web/package.json
+++ b/web/package.json
@@ -23,7 +23,12 @@
     "build-only-cloud-prod": "vite build --mode=production",
     "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
-    "lint:ci": "eslint \"src/**/*.vue\" --no-fix"
+    "lint:ci": "eslint \"src/**/*.vue\" --no-fix",
+    "lint:styles": "stylelint \"src/**/*.{css,vue}\"",
+    "lint:tokens": "node scripts/check-css-tokens.mjs",
+    "lint:token-purity": "node scripts/check-token-purity.mjs",
+    "lint:design": "node scripts/check-design-consistency.mjs",
+    "lint:design:strict": "node scripts/check-design-consistency.mjs --strict"
   },
   "dependencies": {
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
@@ -52,7 +57,6 @@
     "echarts-gl": "^2.1.0",
     "escodegen": "^2.1.0",
     "flag-icons": "^7.5.0",
-
     "gridstack": "^12.4.2",
     "highlight.js": "^11.11.1",
     "js-beautify": "^1.15.4",
@@ -129,12 +133,14 @@
     "msw": "^2.12.7",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.5.10",
+    "postcss-html": "^1.8.1",
     "prettier": "^3.7.4",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-visualizer": "^6.0.5",
     "sass": "^1.97.1",
     "sass-loader": "^16.0.6",
     "start-server-and-test": "^2.1.3",
+    "stylelint": "^17.14.0",
     "tailwindcss": "^4.1.18",
     "typescript": "~5.9.3",
     "unplugin-icons": "^23.0.1",
diff --git a/web/scripts/check-css-tokens.mjs b/web/scripts/check-css-tokens.mjs
new file mode 100644
index 0000000000..3533947af4
--- /dev/null
+++ b/web/scripts/check-css-tokens.mjs
@@ -0,0 +1,160 @@
+#!/usr/bin/env node
+// CI guard: fail if any `var(--x)` reference has no matching `--x:` definition
+// anywhere in src (.css / .vue / .ts), and no CSS fallback (`var(--x, fallback)`).
+// This catches the root-cause class of bug fixed in O2_TOKEN_MIGRATION_PLAN.md §3
+// (undefined-token references that silently void the whole declaration).
+//
+// Run: node scripts/check-css-tokens.mjs   (from web/)
+import { readFileSync, readdirSync, statSync } from "node:fs";
+import { join, extname } from "node:path";
+import { fileURLToPath } from "node:url";
+import { dirname } from "node:path";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const SRC_DIR = join(__dirname, "..", "src");
+const EXTS = new Set([".css", ".vue", ".ts"]);
+
+// Library-injected custom properties that are never statically `--x: value;`
+// defined in our source (Reka UI, Tailwind internals, vue-flow).
+// These resolve at runtime, so a static "undefined" report on them would be a
+// false positive — hence the prefix allowlist.
+//
+// HARD RULE: NO `--o2-*` name may ever appear in any allowlist here. The entire
+// `--o2-*` vocabulary is banned and being migrated away; even the ones set at
+// runtime via Vue `:style` (OTable tree indents, row status, row height) must be
+// renamed off the `--o2-` namespace. If you find a `--o2-*` here, delete it and
+// fix the usage — never re-exempt it.
+const ALLOW_PREFIXES = [/^--reka-/, /^--tw-/, /^--vf-/];
+const ALLOW_EXACT = new Set([
+  // Non-o2 custom properties set per-element at runtime via Vue `:style`
+  // bindings — dynamic values with no static `--x:` definition.
+  "--node-color", // plugins/pipelines/CustomNode.vue  :style={ '--node-color': ... }
+  "--chip-color",
+]);
+
+// Guard against accidental re-introduction of an --o2-* exemption above.
+for (const name of [...ALLOW_EXACT, ...ALLOW_PREFIXES.map((re) => re.source)]) {
+  if (String(name).includes("--o2-")) {
+    console.error(`check-css-tokens: '${name}' — --o2-* tokens must never be allowlisted. Remove it.`);
+    process.exit(2);
+  }
+}
+
+function isAllowed(name) {
+  if (ALLOW_EXACT.has(name)) return true;
+  return ALLOW_PREFIXES.some((re) => re.test(name));
+}
+
+function walk(dir, files = []) {
+  for (const entry of readdirSync(dir)) {
+    if (entry === "node_modules" || entry === "dist") continue;
+    const full = join(dir, entry);
+    const stat = statSync(full);
+    if (stat.isDirectory()) walk(full, files);
+    else if (EXTS.has(extname(entry))) files.push(full);
+  }
+  return files;
+}
+
+const DECL_RE = /(--[A-Za-z0-9_-]+)\s*:/g;
+// var(--x) or var(--x, fallback) — only flag the no-fallback form.
+const VAR_RE = /var\(\s*(--[A-Za-z0-9_-]+)\s*(,[^)]*)?\)/g;
+// Tailwind v4 CSS-variable shorthand: `bg-(--x)`, `text-(--x)`, `border-(--x)`.
+// The compiler expands these to a bare `var(--x)` with NO fallback, so a phantom
+// token voids the declaration exactly like `var(--x)` does — but VAR_RE never
+// sees the `var(` text, so this form slipped past the guard entirely. The
+// fallback form `(--x,#fff)` is safe and skipped, mirroring VAR_RE.
+// Requires a utility prefix (`bg`, `text`, `border-t`, …) before the `-(`, which
+// is what distinguishes the shorthand from an ordinary `var(` / `calc(` call.
+const TW_SHORTHAND_RE = /[A-Za-z0-9\]]-\(\s*(--[A-Za-z0-9_-]+)\s*(,[^)]*)?\)/g;
+// ANY --o2-* occurrence used AS A CSS CUSTOM PROPERTY, in any syntax (var(),
+// Tailwind `[var(--o2-*)]` / `(--o2-*)` shorthand, `[--o2-*]` arbitrary,
+// `:style` keys, template-literal CSS). The whole vocabulary is banned, so a
+// fallback does NOT make it acceptable — unlike the undefined-ref check.
+const O2_RE = /--o2-[A-Za-z0-9-]+/g;
+
+// The `--o2-` prefix collides with the OpenObserve collector's CLI flags (e.g.
+// the k8s install command's `--o2-<flag>=<value>` URL flag) and with
+// prose/comments that name those flags. Those are NOT CSS custom properties, so
+// they must not trip the ban. A `--o2-*` is a CSS custom property only when used
+// as one: inside var(), a Tailwind shorthand/arbitrary bracket, or as a
+// declaration / `:style` key (immediately followed by `:`). Everything else (a
+// bare flag in a shell-command string, or a backticked mention in a comment) is
+// ignored.
+function isO2CssUsage(line, index, name) {
+  const before = line.slice(Math.max(0, index - 6), index);
+  const after = line.slice(index + name.length);
+  return (
+    /var\(\s*$/.test(before) || // var(--o2-*
+    /[A-Za-z0-9\]]-\(\s*$/.test(before) || // bg-(--o2-*  (Tailwind shorthand)
+    /\[\s*$/.test(before) || // [--o2-*  (arbitrary property/value)
+    /^\s*['"]?\s*:/.test(after) // --o2-*:  or  '--o2-*':  (decl / :style key)
+  );
+}
+
+const defined = new Set();
+const referenced = new Map(); // name -> [{file, line}]
+const bannedO2 = new Map(); // name -> [{file, line}]
+
+for (const file of walk(SRC_DIR)) {
+  const text = readFileSync(file, "utf8");
+  const lines = text.split("\n");
+  lines.forEach((line, i) => {
+    for (const m of line.matchAll(DECL_RE)) defined.add(m[1]);
+    for (const re of [VAR_RE, TW_SHORTHAND_RE]) {
+      for (const m of line.matchAll(re)) {
+        const [, name, fallback] = m;
+        if (fallback) continue; // has a fallback, safe either way
+        if (!referenced.has(name)) referenced.set(name, []);
+        referenced.get(name).push({ file: file.replace(SRC_DIR + "/", "src/"), line: i + 1 });
+      }
+    }
+    for (const m of line.matchAll(O2_RE)) {
+      const name = m[0];
+      if (!isO2CssUsage(line, m.index, name)) continue; // CLI flag / prose, not a CSS token
+      if (!bannedO2.has(name)) bannedO2.set(name, []);
+      bannedO2.get(name).push({ file: file.replace(SRC_DIR + "/", "src/"), line: i + 1 });
+    }
+  });
+}
+
+const undefinedRefs = [];
+for (const [name, sites] of referenced) {
+  if (defined.has(name) || isAllowed(name)) continue;
+  undefinedRefs.push({ name, sites });
+}
+
+function printGroup(map) {
+  for (const [name, sites] of map) {
+    console.error(`  ${name}`);
+    for (const { file, line } of sites.slice(0, 5)) console.error(`    ${file}:${line}`);
+    if (sites.length > 5) console.error(`    ...and ${sites.length - 5} more`);
+  }
+}
+
+let failed = false;
+
+// 1) Banned --o2-* vocabulary — zero tolerance, fallback or not.
+if (bannedO2.size > 0) {
+  const total = [...bannedO2.values()].reduce((n, s) => n + s.length, 0);
+  console.error(`\nFound ${total} banned --o2-* token reference${total === 1 ? "" : "s"} (${bannedO2.size} distinct name${bannedO2.size === 1 ? "" : "s"}):\n`);
+  printGroup(bannedO2);
+  console.error("\nThe entire --o2-* vocabulary is banned. Migrate each to its --color-* equivalent");
+  console.error("(see scripts/o2-token-map.json) or a Tailwind utility. There is no allowlist.\n");
+  failed = true;
+}
+
+// 2) Undefined non-o2 references with no fallback (voids the whole declaration).
+if (undefinedRefs.length > 0) {
+  console.error(`\nFound ${undefinedRefs.length} undefined CSS custom propert${undefinedRefs.length === 1 ? "y" : "ies"} referenced with no fallback:\n`);
+  printGroup(new Map(undefinedRefs.map((r) => [r.name, r.sites])));
+  console.error("\nEach of these voids its whole declaration in browsers (invalid var() = unset).");
+  console.error("Either define the token or add a var(--x, fallback).\n");
+  failed = true;
+}
+
+if (failed) {
+  process.exit(1);
+} else {
+  console.log(`OK — no --o2-* tokens and no undefined CSS custom property references (${defined.size} tokens defined, ${referenced.size} distinct refs checked).`);
+}
diff --git a/web/scripts/check-design-consistency.mjs b/web/scripts/check-design-consistency.mjs
new file mode 100644
index 0000000000..b309125479
--- /dev/null
+++ b/web/scripts/check-design-consistency.mjs
@@ -0,0 +1,337 @@
+#!/usr/bin/env node
+// CI ratchet: count per-file occurrences of every design-token bypass category
+// from O2_TOKEN_MIGRATION_PLAN.md §3 (A–R). Debt can only shrink.
+//
+//   node scripts/check-design-consistency.mjs            # fail if any file/category exceeds baseline
+//   node scripts/check-design-consistency.mjs --strict   # ALSO fail if the baseline is stale (has slack) — CI mode
+//   node scripts/check-design-consistency.mjs --baseline # (re)write design-debt-baseline.json
+//
+// --strict is what CI runs (lint:design:strict). Plain mode lets a file sit
+// below its baseline (leaving headroom a future raw token could refill without
+// tripping the guard); --strict forbids that slack, so every bypass category is
+// strictly monotonic-down and NO new raw token can land anywhere — including in a
+// file that still carries pre-existing debt. Improve → re-baseline → commit.
+//
+// Phase B: ratchet mode (this file). Phase G: delete the baseline → zero tolerance
+// (except `stylePxUnit`, which stays ratchet-only per §12.4).
+import { readFileSync, writeFileSync, readdirSync, statSync, existsSync } from "node:fs";
+import { join, extname, relative } from "node:path";
+import { fileURLToPath } from "node:url";
+import { dirname } from "node:path";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const SRC_DIR = join(__dirname, "..", "src");
+const BASELINE = join(__dirname, "design-debt-baseline.json");
+
+// Declared homes for literal hex in .ts (§12.3). Excluded from the `tsHex`
+// category because their CONSUMER cannot resolve a CSS custom property, so a
+// `var(--color-*)` is impossible there — the hex is the only option:
+//   • ECharts option objects / canvas 2D contexts (dashboard chart converters)
+//   • user-editable chart-template source strings (customChartTemplates/*)
+//   • Monaco editor theme + language token colours (vrlLanguage*)
+//   • SVG/canvas trace-tree rendering
+//   • the theme source-of-truth itself (theme.ts defines the runtime palette)
+//   • JS that builds styled log/status HTML from a fixed status→colour map
+// Entries ending in "/" match by directory prefix; others by exact suffix.
+const TS_HEX_ALLOWLIST = [
+  // categorical / series palettes + theme source
+  "utils/dashboard/colorPalette.ts",
+  "constants/themes.ts",
+  "utils/traces/traceColors.ts",
+  "utils/theme.ts",
+  "utils/themeManager.ts",
+  "utils/chartTheme.ts", // sanctioned seam: light-theme fallback constants for jsdom/pre-CSS
+  // ECharts / canvas / geo chart builders — options are serialised, no var() resolves
+  "utils/dashboard/",
+  "composables/dashboard/",
+  "components/dashboards/addPanel/customChartExamples/",
+  "utils/traces/convertTraceData.ts",
+  "utils/traces/treeVisualizationEngine.ts",
+  "composables/useServiceGraphTree.ts",
+  "composables/useMetricsExplorer.ts",
+  // Monaco editor language/theme definitions (colour strings the editor lib reads)
+  "utils/query/vrlLanguage.ts",
+  "utils/query/vrlLanguageDefinition.ts",
+  // JS that builds styled HTML/canvas from a fixed status→colour map
+  "utils/logs/convertLogData.ts",
+  "utils/logs/statusParser.ts",
+  "utils/logs/keyValueParser.ts",
+  // LLM / metric / latency chart-panel series palettes (ECharts, no var())
+  "plugins/traces/llmTrendPanel.utils.ts",
+  "plugins/traces/config/",
+  "enterprise/components/billings/usageDailyPanelSchema.ts",
+  "composables/useLatencyInsightsDashboard.ts",
+  "composables/useMetricsCorrelationDashboard.ts",
+  "utils/metrics/metricPalette.ts",
+  "utils/traces/treeTooltipHelpers.ts",
+  "utils/alerts/alertChartData.ts",
+  "composables/useAlertForm.ts", // ECharts markLine colour
+  // Ingestion vendor brand accents (D12-style fixed brand colour; `tone` is a
+  // reserved-future field that is never read — see setup-card content types)
+  "components/ingestion/setupCard/content/",
+  "components/ingestion/ai/content/",
+];
+
+// The two sanctioned dark-mode seams (§3.R.1) — the only files allowed to read
+// theme / declare an isDark flag, so they are exempt from the darkMechanism count.
+const DARK_SEAM_ALLOWLIST = ["composables/useTheme.ts", "utils/chartTheme.ts"];
+
+// Files allowed to carry a literal font stack. Email markup renders inside a mail
+// client, which can load neither our webfont nor our custom properties, so a
+// system stack is the correct choice there (FONT_AUDIT.md §5.2).
+const FONT_ALLOWLIST = [
+  "utils/prebuilt-templates/email.ts",
+  "utils/fonts.ts", // defines the fallback stacks the tokens mirror
+];
+
+const PALETTE = "slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose";
+const PROPS = "text|bg|border|ring|fill|stroke|divide|outline|decoration|placeholder|from|via|to";
+
+// Categories evaluated over the WHOLE file text.
+const WHOLE = {
+  rawPalette: new RegExp(`\\b(?:dark:|hover:|focus:|group-hover:|active:)*(?:${PROPS})-(?:${PALETTE})-\\d{2,3}\\b`, "g"),
+  // PROJECT raw-ramp utilities (Part B, Ring 3): feature code reaching for our own
+  // primitives (grey-*/primary-*) instead of semantic tokens. The ramps stay
+  // REGISTERED while these consumers exist (un-registering would break them, and
+  // migrating is not value-preserving — e.g. accent flips 600→400 in dark), so
+  // this ratchet freezes the count: it can only shrink toward the Part-B ideal.
+  rawProjectRamp: new RegExp(`\\b(?:dark:|hover:|focus:|group-hover:|active:|focus-visible:)*(?:${PROPS}|ring)-(?:grey|primary)-\\d{2,3}\\b`, "g"),
+  hexClass: /-\[#[0-9a-fA-F]{3,8}\]/g,
+  inlineHexStyle: /style="[^"]*#[0-9a-fA-F]{3,8}/g,
+  inlineHexBind: /:style="[^"]*#[0-9a-fA-F]{3,8}/g,
+  themeTernary: /theme\s*===?\s*['"]dark['"]/g,
+  // A bare `rounded` utility is bounded by class-list separators on BOTH sides.
+  // Requiring a trailing separator (space/quote/backtick/EOL) skips prose in
+  // comments ("short, rounded, inset") and JS object keys (`rounded: "..."`).
+  // Retired text-colour aliases (Tier 1): text-text-primary → text-text-heading,
+  // text-text-caption → text-text-secondary. Baseline 0 after the codemod, so any
+  // reintroduction of the class utility is a regression.
+  retiredTextAlias: /\btext-text-(?:primary|caption)\b/g,
+  bareRounded: /(?:^|[\s"'`])rounded(?=[\s"'`]|$)/gm,
+  // Retired radius tiers: the app exposes exactly two corner radii —
+  // rounded-default (controls) and rounded-surface (large surfaces) — plus
+  // rounded-full. The old sm/md/lg/xl scale (and its var(--radius-*) refs) was a
+  // set of same-value aliases that lied about being distinct; it was repointed
+  // (small→default, large→surface) and the tokens deleted. Baseline 0 after the
+  // codemod, so any reintroduction falls back to Tailwind's stock scale and is a
+  // regression. Matches the class utility (incl. per-corner variants) and the var.
+  retiredRadiusAlias:
+    /\brounded(?:-(?:t|b|l|r|s|e|tl|tr|bl|br|ss|se|es|ee))?-(?:sm|md|lg|xl)\b|var\(--radius-(?:sm|md|lg|xl)\)/g,
+  // Arbitrary radius VALUE — but not a CSS keyword (`rounded-[inherit]` etc.),
+  // which is not a hardcoded dimension and has no scale-token equivalent.
+  arbRadius: /rounded(?:-[a-z]+)*-\[(?!(?:inherit|initial|unset|revert|revert-layer)\])[^\]]+\]/g,
+  arbTextSize: /text-\[[0-9.]+(?:px|rem)\]/g,
+  unscopedStyle: /<style(?![^>]*\bscoped\b)[^>]*>/g,
+  twPrefix: /\btw:/g,
+  helperUtil: /\btext-weight-[a-z]+\b/g,
+  arbPx: /\b(?:gap|p[trblxy]?|m[trblxy]?|w|h|size|min-w|min-h|max-w|max-h|top|left|right|bottom|inset|leading)-\[[0-9.]+px\]/g,
+  arbZ: /\bz-\[[0-9]+\]/g,
+  // Literal font stacks. The app ships exactly two families, reached only via
+  // var(--font-sans) / var(--font-mono) (FONT_AUDIT.md). Anything else resolves
+  // to whatever the visitor's OS happens to have, which is how the app came to
+  // render in ~14 different stacks. Covers CSS declarations, Tailwind arbitrary
+  // values (`[font-family:…]`), and `font-[…]` when the value looks like a
+  // family rather than a weight (`font-[600]` stays legal).
+  literalFontFamily: new RegExp(
+    [
+      // font-family: <anything that isn't our token / inherit>.
+      // The lookahead absorbs the whitespace itself — if `\s*` were consumed
+      // first it could backtrack to zero width and let ` var(--font-mono)` slip
+      // through as a "literal" starting with a space.
+      String.raw`font-family:(?!\s*(?:var\(--font-(?:sans|mono)\)|inherit))\s*[^;"'\`\n}]+`,
+      // [font-family:<literal>]
+      String.raw`\[font-family:(?!(?:var\(--font-(?:sans|mono)\)|inherit)\])[^\]]+\]`,
+      // font-[<literal family>] — weights like font-[600] are not families
+      String.raw`\bfont-\[(?!\d+\]|var\(--font-(?:sans|mono)\)\]|inherit\])[^\]]*(?:mono|serif|Menlo|Monaco|Consolas|Courier|Geist|Inconsolata|Fira|Ubuntu|Segoe|Roboto|apple-system)[^\]]*\]`,
+    ].join("|"),
+    "g",
+  ),
+  // Dark-mode mechanism fragmentation (§3.R.2 mechanisms 1,2,5,6,7)
+  darkMechanism: /theme\s*[=!]==?\s*['"]dark['"]|const\s+(?:isDark|isDarkMode|darkMode)\s*=|\.body--(?:dark|light)|classList\.contains\(['"]body--|\.(?:light|dark)-mode\b/g,
+};
+
+// Categories evaluated ONLY inside <style>…</style> blocks (scoped AND unscoped —
+// styleBlocks() collects every block regardless of the `scoped` attribute).
+const STYLE_ONLY = {
+  styleBlockHex: /#[0-9a-fA-F]{3,8}\b|rgba?\(|hsla?\(/g,
+  stylePxUnit: /\b(?:[2-9]|[0-9]{2,})(?:\.[0-9]+)?px\b/g, // 1px hairlines exempt
+  // Raw `var(--color-*)` inside a component style block (F.6). The consumption
+  // ladder wants colours reached via a registered utility, not a raw var() in a
+  // <style> block; ~84% of these already have a utility (AUDIT §7). Ratcheted so
+  // the count can only shrink — the biggest previously-unmeasured debt surface.
+  rawVarInComponent: /var\(\s*--color-[a-z0-9-]+/g,
+};
+
+function walk(dir, files = []) {
+  for (const entry of readdirSync(dir)) {
+    if (entry === "node_modules" || entry === "dist") continue;
+    const full = join(dir, entry);
+    const st = statSync(full);
+    if (st.isDirectory()) walk(full, files);
+    else if (extname(entry) === ".vue" || extname(entry) === ".ts") files.push(full);
+  }
+  return files;
+}
+
+function styleBlocks(text) {
+  const out = [];
+  const re = /<style[^>]*>([\s\S]*?)<\/style>/g;
+  let m;
+  while ((m = re.exec(text)) !== null) out.push(m[1]);
+  return out.join("\n");
+}
+
+// Every surviving <style> block must justify its own existence: it opens with
+//   /* keep(<tag>): <one line why this cannot be Tailwind> */
+// Both `keep(<tag>)` and `keep: <tag>` are accepted — the punctuation is not the
+// point, the stated reason is. Sanctioned tags: O2_STYLE_MIGRATION_PLAN.md §3.1
+// step 5. `lib-override:<lib>` takes a free-form library suffix, matched by prefix.
+const KEEP_TAG_NAMES =
+  "lib-override(?::[\\w.-]+)?|generated-content|keyframes|print|scrollbar|complex-state|brand|third-party";
+const KEEP_TAGS = new RegExp(`keep\\s*(?:\\(\\s*(?:${KEEP_TAG_NAMES})\\s*\\)|:\\s*(?:${KEEP_TAG_NAMES}))`);
+
+// Counts style blocks that carry no keep-comment. A block with no justification
+// is debt by definition — either it should have been migrated to utilities, or
+// its author owes one line saying why it could not be.
+function countUnjustifiedBlocks(text) {
+  let n = 0;
+  const re = /<style[^>]*>([\s\S]*?)<\/style>/g;
+  let m;
+  while ((m = re.exec(text)) !== null) {
+    if (!KEEP_TAGS.test(m[1])) n++;
+  }
+  return n;
+}
+
+function countFile(file, rel) {
+  const text = readFileSync(file, "utf8");
+  const counts = {};
+  const isVue = rel.endsWith(".vue");
+  const isSpec = rel.includes(".spec.");
+
+  if (isVue) {
+    for (const [k, re] of Object.entries(WHOLE)) {
+      const n = (text.match(re) || []).length;
+      if (n) counts[k] = n;
+    }
+    const sb = styleBlocks(text);
+    for (const [k, re] of Object.entries(STYLE_ONLY)) {
+      const n = (sb.match(re) || []).length;
+      if (n) counts[k] = n;
+    }
+    const unjustified = countUnjustifiedBlocks(text);
+    if (unjustified) counts.styleKeepComment = unjustified;
+  } else {
+    // .ts — only tsHex (non-spec, non-allowlisted) and darkMechanism apply.
+    // Allowlist entry ending in "/" matches by directory prefix, else by suffix.
+    const allowed = TS_HEX_ALLOWLIST.some((p) =>
+      p.endsWith("/") ? rel.includes(p) : rel.endsWith(p),
+    );
+    if (!isSpec && !allowed) {
+      // Strip comments first so a hex mentioned in prose ("e.g. #FF0000")
+      // doesn't count as a real colour literal.
+      const code = text
+        .replace(/\/\*[\s\S]*?\*\//g, "")
+        .replace(/(^|[^:])\/\/[^\n]*/g, "$1");
+      const n = (code.match(/['"]#[0-9a-fA-F]{3,8}['"]/g) || []).length;
+      if (n) counts.tsHex = n;
+    }
+    if (!isSpec && !DARK_SEAM_ALLOWLIST.some((p) => rel.endsWith(p))) {
+      const n = (text.match(WHOLE.darkMechanism) || []).length;
+      if (n) counts.darkMechanism = n;
+    }
+    // Literal font stacks also leak in via .ts that builds HTML/CSS strings
+    // (trace tooltips, chart tooltips) — that surface was ~20 of the original hits.
+    if (!isSpec && !FONT_ALLOWLIST.some((p) => rel.endsWith(p))) {
+      const n = (text.match(WHOLE.literalFontFamily) || []).length;
+      if (n) counts.literalFontFamily = n;
+    }
+  }
+  return counts;
+}
+
+const files = walk(SRC_DIR);
+const current = {};
+for (const f of files) {
+  const rel = relative(SRC_DIR, f).split("\\").join("/");
+  const c = countFile(f, rel);
+  if (Object.keys(c).length) current[rel] = c;
+}
+
+if (process.argv.includes("--baseline")) {
+  const totals = {};
+  for (const c of Object.values(current))
+    for (const [k, n] of Object.entries(c)) totals[k] = (totals[k] || 0) + n;
+  writeFileSync(BASELINE, JSON.stringify({ totals, files: current }, null, 2) + "\n");
+  console.log(`Wrote baseline: ${Object.keys(current).length} files with debt.`);
+  console.log("Totals:", JSON.stringify(totals));
+  process.exit(0);
+}
+
+if (!existsSync(BASELINE)) {
+  console.error("No baseline found. Run: node scripts/check-design-consistency.mjs --baseline");
+  process.exit(2);
+}
+const baseline = JSON.parse(readFileSync(BASELINE, "utf8"));
+const base = baseline.files || {};
+
+const regressions = [];
+let improved = 0;
+for (const [rel, c] of Object.entries(current)) {
+  for (const [k, n] of Object.entries(c)) {
+    const b = (base[rel] && base[rel][k]) || 0;
+    if (n > b) regressions.push({ rel, k, n, b });
+  }
+}
+// count improvements (any file/category strictly below baseline, or dropped to 0)
+// and record them: in --strict mode a below-baseline count is a STALE baseline,
+// i.e. slack the ratchet is leaving open. That slack is exactly where a future
+// raw token would land WITHOUT tripping the guard (a file at baseline 5 that has
+// since dropped to 2 would silently accept 3 new raw var()s). Closing it makes
+// every category monotonically shrink and forbids ANY new raw-token bypass —
+// even inside a file that still carries pre-existing debt.
+const stale = [];
+for (const [rel, bc] of Object.entries(base)) {
+  for (const [k, b] of Object.entries(bc)) {
+    const n = (current[rel] && current[rel][k]) || 0;
+    if (n < b) {
+      improved += b - n;
+      stale.push({ rel, k, n, b });
+    }
+  }
+}
+
+// --strict (used by CI): the baseline must equal reality — no headroom. Passed
+// by `lint:design:strict` in build-pr-image.yml / playwright.yml.
+const STRICT = process.argv.includes("--strict");
+
+if (regressions.length) {
+  console.error(`\ncheck-design-consistency: ${regressions.length} regression(s) above baseline:\n`);
+  for (const { rel, k, n, b } of regressions.slice(0, 60))
+    console.error(`  ${rel}  [${k}]  ${b} → ${n}  (+${n - b})`);
+  if (regressions.length > 60) console.error(`  …and ${regressions.length - 60} more`);
+  console.error(`\nUse the sanctioned utilities/tokens (§4) instead. See DESIGN_TOKEN_STANDARD.md.\n`);
+  process.exit(1);
+}
+
+if (STRICT && stale.length) {
+  console.error(
+    `\ncheck-design-consistency (--strict): baseline is STALE — ${stale.length} file/category ` +
+      `pair(s) are below their recorded debt, i.e. ${improved} occurrence(s) of slack the\n` +
+      `ratchet would let a future raw token silently refill. Lock the win in:\n`,
+  );
+  for (const { rel, k, n, b } of stale.slice(0, 60))
+    console.error(`  ${rel}  [${k}]  ${b} → ${n}  (−${b - n})`);
+  if (stale.length > 60) console.error(`  …and ${stale.length - 60} more`);
+  console.error(
+    `\nRun:  node scripts/check-design-consistency.mjs --baseline   and commit the tightened baseline.\n`,
+  );
+  process.exit(1);
+}
+
+console.log(`OK — no design-consistency regressions (${Object.keys(current).length} files scanned).`);
+if (improved)
+  console.log(
+    `Improved by ${improved} occurrence(s) below baseline — re-run with --baseline and commit the update` +
+      (STRICT ? "" : " (required in --strict / CI)") + ".",
+  );
diff --git a/web/scripts/check-token-purity.mjs b/web/scripts/check-token-purity.mjs
new file mode 100644
index 0000000000..13018543e0
--- /dev/null
+++ b/web/scripts/check-token-purity.mjs
@@ -0,0 +1,221 @@
+#!/usr/bin/env node
+// Copyright 2026 OpenObserve Inc.
+//
+// CI guard: the 4 token files must contain TOKENS ONLY — no class/element rules,
+// no keyframes, no media queries, no layers. See O2_STYLE_MIGRATION_PLAN.md §5.1.
+//
+// Sanctioned constructs (W1 target end-state):
+//   :root { --x: … }                 token definitions (color-scheme allowed)
+//   .dark / :root.dark / .dark :root  dark token overrides (--x only)
+//   [data-variant=…] / [data-x=…]     variant token overrides (--x only)
+//   @theme { … } / @theme inline      Tailwind registration
+//   @font-face { … }                  font declarations (base.css)
+//   comments
+//
+// Anything else is non-token content that must be evacuated to base-elements.css,
+// utilities.css, or a component. Starts in ratchet mode (warn vs baseline) and
+// flips to error in W1.e by deleting token-purity-baseline.json.
+//
+// Run:
+//   node scripts/check-token-purity.mjs             # fail if worse than baseline
+//   node scripts/check-token-purity.mjs --baseline  # (re)write the baseline
+//   node scripts/check-token-purity.mjs --list      # show every offending construct
+
+import { readFileSync, writeFileSync, existsSync } from "node:fs";
+import { join, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const TOKENS_DIR = join(__dirname, "..", "src", "lib", "styles", "tokens");
+const BASELINE = join(__dirname, "token-purity-baseline.json");
+const FILES = ["base.css", "semantic.css", "component.css", "dark.css"];
+
+// Selectors that may legitimately carry token definitions.
+// `[data-…]` uses `[^\]]*` (not `[a-z-]+…[^\]]*`) so a single selector has one
+// unambiguous parse — the overlapping-quantifier form tripped CodeQL's ReDoS check.
+const TOKEN_SELECTOR =
+  "(?::root|html|\\.dark|:root\\.dark|\\.dark :root|\\[data-[^\\]]*\\]|\\.dark \\[data-[^\\]]*\\])";
+const TOKEN_SELECTOR_RE = new RegExp(
+  `^${TOKEN_SELECTOR}(?:\\s*,\\s*${TOKEN_SELECTOR})*$`,
+);
+
+// Declarations allowed alongside custom properties inside a token block.
+const ALLOWED_DECL_RE = /^(color-scheme|--[A-Za-z0-9_-]+)$/;
+
+/**
+ * Strip comments while preserving byte offsets (so line numbers stay correct).
+ */
+function stripComments(css) {
+  return css.replace(/\/\*[\s\S]*?\*\//g, (m) => m.replace(/[^\n]/g, " "));
+}
+
+/**
+ * Walk top-level constructs of a stylesheet.
+ * Returns [{ kind: 'at'|'rule', prelude, body, line }]
+ */
+function topLevelConstructs(css) {
+  const out = [];
+  let depth = 0;
+  let start = 0;
+  let braceStart = -1;
+
+  for (let i = 0; i < css.length; i++) {
+    const ch = css[i];
+    if (ch === "{") {
+      if (depth === 0) braceStart = i;
+      depth++;
+    } else if (ch === "}") {
+      depth--;
+      if (depth === 0) {
+        const prelude = css.slice(start, braceStart).trim();
+        const body = css.slice(braceStart + 1, i);
+        const line = css.slice(0, start).split("\n").length;
+        if (prelude) {
+          out.push({
+            kind: prelude.startsWith("@") ? "at" : "rule",
+            prelude,
+            body,
+            line,
+          });
+        }
+        start = i + 1;
+      }
+    } else if (ch === ";" && depth === 0) {
+      // top-level statement, e.g. @import / @charset
+      const stmt = css.slice(start, i).trim();
+      if (stmt.startsWith("@")) {
+        out.push({
+          kind: "at",
+          prelude: stmt,
+          body: "",
+          line: css.slice(0, start).split("\n").length,
+        });
+      }
+      start = i + 1;
+    }
+  }
+  return out;
+}
+
+/**
+ * Property names declared directly in a block body (ignores nested blocks).
+ */
+function declaredProps(body) {
+  const flat = body.replace(/\{[^{}]*\}/g, "");
+  const props = [];
+  for (const seg of flat.split(";")) {
+    const idx = seg.indexOf(":");
+    if (idx === -1) continue;
+    const name = seg.slice(0, idx).trim();
+    if (name) props.push(name);
+  }
+  return props;
+}
+
+const violations = [];
+
+for (const file of FILES) {
+  const full = join(TOKENS_DIR, file);
+  if (!existsSync(full)) continue;
+  const css = stripComments(readFileSync(full, "utf8"));
+
+  for (const node of topLevelConstructs(css)) {
+    const at = node.prelude.split(/\s|\{/)[0].toLowerCase();
+
+    if (node.kind === "at") {
+      // @theme / @theme inline / @font-face are sanctioned.
+      if (at === "@theme" || at === "@font-face" || at === "@import" || at === "@charset") continue;
+      violations.push({
+        file,
+        line: node.line,
+        selector: node.prelude.split("\n")[0].slice(0, 80),
+        reason: `${at} is not a token construct`,
+      });
+      continue;
+    }
+
+    // Plain rule: selector must be a token-carrying selector...
+    const selector = node.prelude.replace(/\s+/g, " ").trim();
+    if (!TOKEN_SELECTOR_RE.test(selector)) {
+      violations.push({
+        file,
+        line: node.line,
+        selector: selector.slice(0, 80),
+        reason: "class/element selector — not a token block",
+      });
+      continue;
+    }
+
+    // ...and may only declare custom properties.
+    const bad = declaredProps(node.body).filter((p) => !ALLOWED_DECL_RE.test(p));
+    if (bad.length > 0) {
+      violations.push({
+        file,
+        line: node.line,
+        selector: selector.slice(0, 80),
+        reason: `non-token declaration(s): ${[...new Set(bad)].slice(0, 4).join(", ")}`,
+      });
+    }
+  }
+}
+
+// Count per file.
+const current = {};
+for (const v of violations) current[v.file] = (current[v.file] || 0) + 1;
+const total = violations.length;
+
+if (process.argv.includes("--list")) {
+  for (const v of violations) {
+    console.log(`  ${v.file}:${v.line}  ${v.selector}\n      → ${v.reason}`);
+  }
+  console.log(`\n${total} non-token construct(s).`);
+  process.exit(0);
+}
+
+if (process.argv.includes("--baseline")) {
+  writeFileSync(BASELINE, JSON.stringify({ total, files: current }, null, 2) + "\n");
+  console.log(`Wrote token-purity baseline: ${total} non-token construct(s) across ${Object.keys(current).length} file(s).`);
+  process.exit(0);
+}
+
+// No baseline = zero-tolerance mode (the W1.e end state).
+if (!existsSync(BASELINE)) {
+  if (total === 0) {
+    console.log("OK — token files contain tokens only.");
+    process.exit(0);
+  }
+  console.error(`\ncheck-token-purity: ${total} non-token construct(s) in token files (zero-tolerance mode):\n`);
+  for (const v of violations.slice(0, 40)) {
+    console.error(`  ${v.file}:${v.line}  ${v.selector}\n      → ${v.reason}`);
+  }
+  if (total > 40) console.error(`  ...and ${total - 40} more (--list to see all)`);
+  console.error("\nToken files may contain tokens only. Move rules to src/styles/base-elements.css,");
+  console.error("src/styles/utilities.css, or the owning component. See O2_STYLE_MIGRATION_PLAN.md §3.\n");
+  process.exit(1);
+}
+
+const baseline = JSON.parse(readFileSync(BASELINE, "utf8"));
+const base = baseline.files || {};
+const regressions = [];
+let improved = 0;
+
+for (const file of new Set([...Object.keys(current), ...Object.keys(base)])) {
+  const now = current[file] || 0;
+  const was = base[file] || 0;
+  if (now > was) regressions.push({ file, was, now });
+  else if (now < was) improved += was - now;
+}
+
+if (regressions.length > 0) {
+  console.error(`\ncheck-token-purity: ${regressions.length} regression(s) above baseline:\n`);
+  for (const r of regressions) {
+    console.error(`  ${r.file}  ${r.was} → ${r.now}  (+${r.now - r.was})`);
+  }
+  console.error("\nDo not add class/element/keyframe rules to token files. See O2_STYLE_MIGRATION_PLAN.md §3.\n");
+  process.exit(1);
+}
+
+console.log(`check-token-purity: OK — ${total} non-token construct(s), at or below baseline (${baseline.total}).`);
+if (improved > 0) {
+  console.log(`Improved by ${improved} — re-run with --baseline and commit the update.`);
+}
diff --git a/web/scripts/css-selector-diff.mjs b/web/scripts/css-selector-diff.mjs
new file mode 100644
index 0000000000..61bfbee33a
--- /dev/null
+++ b/web/scripts/css-selector-diff.mjs
@@ -0,0 +1,109 @@
+#!/usr/bin/env node
+// Copyright 2026 OpenObserve Inc.
+//
+// Prove a CSS refactor is a no-op at the BUILT stylesheet level
+// (O2_STYLE_MIGRATION_PLAN.md §7.2). Emits a stable, sorted, diffable summary of
+// every selector in a built CSS bundle plus a hash of its declarations, so
+// `diff before.txt after.txt` shows exactly what changed — and nothing else.
+//
+// Declarations are normalised (whitespace collapsed, declarations sorted) so a
+// pure MOVE between files/layers hashes identically and produces no diff noise.
+//
+// Usage:
+//   npm run build-only
+//   node scripts/css-selector-diff.mjs dist/assets/*.css > /tmp/css-before.txt
+//   # ...on the migration branch...
+//   node scripts/css-selector-diff.mjs dist/assets/*.css > /tmp/css-after.txt
+//   diff /tmp/css-before.txt /tmp/css-after.txt
+
+import { readFileSync } from "node:fs";
+import { createHash } from "node:crypto";
+
+const files = process.argv.slice(2).filter((a) => !a.startsWith("--"));
+if (files.length === 0) {
+  console.error("Usage: node scripts/css-selector-diff.mjs <built.css>...");
+  process.exit(2);
+}
+
+function stripComments(css) {
+  return css.replace(/\/\*[\s\S]*?\*\//g, "");
+}
+
+/**
+ * Normalise a declaration body: sort declarations, collapse whitespace.
+ * Makes a moved rule hash identically to its original.
+ */
+function normaliseBody(body) {
+  return body
+    .split(";")
+    .map((d) => d.replace(/\s+/g, " ").trim())
+    .filter(Boolean)
+    .sort()
+    .join(";");
+}
+
+function hash(s) {
+  return createHash("sha1").update(s).digest("hex").slice(0, 10);
+}
+
+/**
+ * Recursively collect rules, tracking at-rule context (@media/@layer/@supports)
+ * so a rule that changes layer shows up as a changed context.
+ */
+function collect(css, context, out) {
+  let depth = 0;
+  let start = 0;
+  let braceStart = -1;
+
+  for (let i = 0; i < css.length; i++) {
+    const ch = css[i];
+    if (ch === "{") {
+      if (depth === 0) braceStart = i;
+      depth++;
+    } else if (ch === "}") {
+      depth--;
+      if (depth === 0) {
+        const prelude = css.slice(start, braceStart).replace(/\s+/g, " ").trim();
+        const body = css.slice(braceStart + 1, i);
+        if (prelude.startsWith("@")) {
+          const at = prelude.split(/\s|\(/)[0].toLowerCase();
+          if (at === "@media" || at === "@layer" || at === "@supports" || at === "@container") {
+            // nested context — recurse
+            collect(body, context ? `${context} > ${prelude}` : prelude, out);
+          } else {
+            // @keyframes / @font-face / @theme — hash body as a unit
+            out.push({ context, selector: prelude, hash: hash(body.replace(/\s+/g, " ").trim()) });
+          }
+        } else if (prelude) {
+          // Split grouped selectors so reordering a group isn't a false diff.
+          const norm = normaliseBody(body);
+          for (const sel of prelude.split(",").map((s) => s.replace(/\s+/g, " ").trim()).filter(Boolean)) {
+            out.push({ context, selector: sel, hash: hash(norm) });
+          }
+        }
+        start = i + 1;
+      }
+    } else if (ch === ";" && depth === 0) {
+      start = i + 1;
+    }
+  }
+}
+
+const rules = [];
+for (const file of files) {
+  collect(stripComments(readFileSync(file, "utf8")), "", rules);
+}
+
+// Sort for a stable diff; dedupe identical (context, selector, hash) triples.
+const seen = new Set();
+const lines = [];
+for (const r of rules) {
+  const key = `${r.context}|${r.selector}|${r.hash}`;
+  if (seen.has(key)) continue;
+  seen.add(key);
+  lines.push(`${r.context ? r.context + "  ::  " : ""}${r.selector}  #${r.hash}`);
+}
+lines.sort();
+
+console.log(lines.join("\n"));
+console.error(`css-selector-diff: ${lines.length} unique rules from ${files.length} file(s).`);
diff --git a/web/scripts/design-debt-baseline.json b/web/scripts/design-debt-baseline.json
new file mode 100644
index 0000000000..5235a8191f
--- /dev/null
+++ b/web/scripts/design-debt-baseline.json
@@ -0,0 +1,564 @@
+{
+  "totals": {
+    "rawProjectRamp": 150,
+    "rawVarInComponent": 615,
+    "arbZ": 40,
+    "darkMechanism": 20,
+    "unscopedStyle": 8,
+    "stylePxUnit": 90
+  },
+  "files": {
+    "components/CodeQueryEditor.vue": {
+      "rawProjectRamp": 1,
+      "rawVarInComponent": 2
+    },
+    "components/CommunitySlackInvite.vue": {
+      "rawProjectRamp": 6
+    },
+    "components/CustomDateTimePicker.vue": {
+      "arbZ": 1
+    },
+    "components/EnterpriseUpgradeDialog.vue": {
+      "arbZ": 1
+    },
+    "components/Header.vue": {
+      "rawVarInComponent": 2
+    },
+    "components/MenuLink.vue": {
+      "rawProjectRamp": 10
+    },
+    "components/O2AIChat.vue": {
+      "rawVarInComponent": 50
+    },
+    "components/OrganizationSelector.vue": {
+      "rawProjectRamp": 3,
+      "rawVarInComponent": 2
+    },
+    "components/RichTextInput.vue": {
+      "arbZ": 1,
+      "rawVarInComponent": 18
+    },
+    "components/TenstackTable.vue": {
+      "rawProjectRamp": 1,
+      "rawVarInComponent": 3
+    },
+    "components/ThemeSwitcher.vue": {
+      "darkMechanism": 1
+    },
+    "components/WebinarBanner.vue": {
+      "arbZ": 1
+    },
+    "components/ai-assistant/welcome/CapabilityCards.vue": {
+      "arbZ": 4
+    },
+    "components/alerts/AddAlert.vue": {
+      "rawVarInComponent": 1
+    },
+    "components/alerts/AlertHistoryTimeline.vue": {
+      "rawVarInComponent": 7
+    },
+    "components/alerts/AlertInsightsContextMenu.vue": {
+      "rawVarInComponent": 2
+    },
+    "components/alerts/AlertSettingsHelpDrawer.vue": {
+      "rawVarInComponent": 49
+    },
+    "components/alerts/AlertSummary.vue": {
+      "arbZ": 1,
+      "rawVarInComponent": 14
+    },
+    "components/alerts/DestinationPreview.vue": {
+      "rawVarInComponent": 7
+    },
+    "components/alerts/FilterGroup.vue": {
+      "rawVarInComponent": 4
+    },
+    "components/alerts/ImportSemanticGroups.vue": {
+      "rawVarInComponent": 5
+    },
+    "components/alerts/IncidentRCAAnalysis.vue": {
+      "rawVarInComponent": 36
+    },
+    "components/alerts/IncidentServiceGraph.vue": {
+      "rawProjectRamp": 3
+    },
+    "components/alerts/PrebuiltDestinationSelector.vue": {
+      "arbZ": 2
+    },
+    "components/alerts/QueryEditorDialog.vue": {
+      "arbZ": 2
+    },
+    "components/alerts/SemanticFieldGroupsConfig.vue": {
+      "rawVarInComponent": 1
+    },
+    "components/alerts/steps/QueryConfig.vue": {
+      "rawProjectRamp": 2
+    },
+    "components/anomaly_detection/AnomalySummary.vue": {
+      "rawVarInComponent": 7
+    },
+    "components/common/BaseImport.vue": {
+      "unscopedStyle": 1
+    },
+    "components/common/LoadingProgress.vue": {
+      "rawProjectRamp": 2,
+      "arbZ": 1
+    },
+    "components/common/SectionHub.vue": {
+      "rawProjectRamp": 5
+    },
+    "components/common/empty-states/QuickStartCard.vue": {
+      "rawProjectRamp": 4
+    },
+    "components/dashboards/AddDashboardFromGitHub.vue": {
+      "rawProjectRamp": 1
+    },
+    "components/dashboards/ColorSwatchPicker.vue": {
+      "rawProjectRamp": 3
+    },
+    "components/dashboards/ColumnFormatControls.vue": {
+      "rawProjectRamp": 2
+    },
+    "components/dashboards/OverrideConfigPopup.vue": {
+      "rawProjectRamp": 2
+    },
+    "components/dashboards/QueryInspector.vue": {
+      "rawVarInComponent": 4
+    },
+    "components/dashboards/addPanel/DrilldownUserGuide.vue": {
+      "rawVarInComponent": 2
+    },
+    "components/dashboards/panels/HTMLRenderer.vue": {
+      "unscopedStyle": 2
+    },
+    "components/dashboards/panels/TableRenderer.vue": {
+      "rawVarInComponent": 8
+    },
+    "components/functions/FunctionList.vue": {
+      "rawVarInComponent": 2
+    },
+    "components/ingestion/ai/content/AIIntegrationCard.vue": {
+      "rawVarInComponent": 2
+    },
+    "components/ingestion/setupCard/SetupCardRenderer.vue": {
+      "rawVarInComponent": 17
+    },
+    "components/logstream/schema.vue": {
+      "rawVarInComponent": 2
+    },
+    "components/pipeline/NodeForm/AssociateFunction.vue": {
+      "rawProjectRamp": 2,
+      "rawVarInComponent": 7
+    },
+    "components/pipeline/NodeForm/CreateDestinationForm.vue": {
+      "arbZ": 1
+    },
+    "components/pipeline/NodeSidebar.vue": {
+      "unscopedStyle": 1,
+      "rawVarInComponent": 21
+    },
+    "components/pipeline/PipelineEditor.vue": {
+      "unscopedStyle": 1,
+      "rawVarInComponent": 20
+    },
+    "components/pipeline/PipelineSectionTabs.vue": {
+      "rawProjectRamp": 2
+    },
+    "components/pipeline/PipelineView.vue": {
+      "stylePxUnit": 6,
+      "rawVarInComponent": 15
+    },
+    "components/rum/PlayerTracesTab.vue": {
+      "rawVarInComponent": 1
+    },
+    "components/rum/errorTracking/view/ErrorEvents.vue": {
+      "rawVarInComponent": 7
+    },
+    "components/settings/License.vue": {
+      "rawVarInComponent": 4
+    },
+    "components/settings/ModelPricingList.vue": {
+      "arbZ": 1
+    },
+    "components/settings/Nodes.vue": {
+      "rawVarInComponent": 6
+    },
+    "components/settings/OrgStorageEditor.vue": {
+      "arbZ": 1
+    },
+    "components/synthetics/CreateBrowserTestSkeleton.vue": {
+      "rawProjectRamp": 1
+    },
+    "components/synthetics/configure/CheckAlerts.vue": {
+      "rawProjectRamp": 1
+    },
+    "components/synthetics/configure/CheckAuthNetwork.vue": {
+      "rawProjectRamp": 1
+    },
+    "components/synthetics/configure/CheckBrowserDevices.vue": {
+      "rawProjectRamp": 1
+    },
+    "components/synthetics/configure/CheckCapture.vue": {
+      "rawProjectRamp": 1
+    },
+    "components/synthetics/configure/CheckDetails.vue": {
+      "rawProjectRamp": 1
+    },
+    "components/synthetics/configure/CheckLocations.vue": {
+      "rawProjectRamp": 1
+    },
+    "components/synthetics/configure/CheckSchedule.vue": {
+      "rawProjectRamp": 1
+    },
+    "components/synthetics/configure/types/CheckHttpConfig.vue": {
+      "rawProjectRamp": 1
+    },
+    "components/synthetics/configure/types/CheckSshConfig.vue": {
+      "rawProjectRamp": 1
+    },
+    "components/synthetics/configure/types/CheckTcpConfig.vue": {
+      "rawProjectRamp": 1
+    },
+    "components/synthetics/configure/types/CheckTlsConfig.vue": {
+      "rawProjectRamp": 1
+    },
+    "components/synthetics/journey/BrowserJourney.vue": {
+      "rawProjectRamp": 1
+    },
+    "components/synthetics/journey/BrowserJourneyStep.vue": {
+      "rawProjectRamp": 3
+    },
+    "components/synthetics/journey/JourneySteps.vue": {
+      "rawProjectRamp": 3
+    },
+    "components/synthetics/results/ProtocolRunSummary.vue": {
+      "rawProjectRamp": 6
+    },
+    "components/traces/FlameGraphView.vue": {
+      "rawProjectRamp": 1
+    },
+    "enterprise/components/billings/BillingGroup.vue": {
+      "rawProjectRamp": 5
+    },
+    "enterprise/components/billings/plans.vue": {
+      "rawProjectRamp": 1
+    },
+    "enterprise/components/onlineEvals/forms/EvalJobDetail.vue": {
+      "rawProjectRamp": 1
+    },
+    "enterprise/components/onlineEvals/forms/ScoreConfigDetail.vue": {
+      "rawVarInComponent": 4
+    },
+    "enterprise/components/onlineEvals/forms/ScoreConfigDialog.vue": {
+      "rawProjectRamp": 5,
+      "rawVarInComponent": 6
+    },
+    "enterprise/components/onlineEvals/forms/ScorerDetail.vue": {
+      "rawVarInComponent": 47
+    },
+    "enterprise/components/onlineEvals/forms/ScorerFormPage.vue": {
+      "rawProjectRamp": 4,
+      "rawVarInComponent": 1
+    },
+    "enterprise/components/onlineEvals/forms/job/JobFilterBuilder.vue": {
+      "rawVarInComponent": 2
+    },
+    "enterprise/components/onlineEvals/forms/job/JobInputMapping.vue": {
+      "rawProjectRamp": 1
+    },
+    "enterprise/components/onlineEvals/forms/scorer/ScorerTestPanel.vue": {
+      "rawProjectRamp": 1
+    },
+    "lib/core/Button/OButton.vue": {
+      "rawProjectRamp": 4
+    },
+    "lib/core/Code/OCode.vue": {
+      "rawProjectRamp": 2
+    },
+    "lib/core/Code/OCodeBlock.vue": {
+      "rawVarInComponent": 13
+    },
+    "lib/core/EmptyState/EmptyStateActionCard.vue": {
+      "rawProjectRamp": 4
+    },
+    "lib/core/EmptyState/EmptyStateIngestionCard.vue": {
+      "rawProjectRamp": 3,
+      "rawVarInComponent": 12
+    },
+    "lib/core/EmptyState/EmptyStateIngestionChip.vue": {
+      "rawProjectRamp": 3,
+      "rawVarInComponent": 5
+    },
+    "lib/core/EmptyState/illustrations/EmptyAlert.vue": {
+      "stylePxUnit": 2
+    },
+    "lib/core/EmptyState/illustrations/EmptyAllClear.vue": {
+      "stylePxUnit": 4
+    },
+    "lib/core/EmptyState/illustrations/EmptyBoard.vue": {
+      "stylePxUnit": 1
+    },
+    "lib/core/EmptyState/illustrations/EmptyBrokenPanel.vue": {
+      "stylePxUnit": 3
+    },
+    "lib/core/EmptyState/illustrations/EmptyBuilder.vue": {
+      "stylePxUnit": 12
+    },
+    "lib/core/EmptyState/illustrations/EmptyConnect.vue": {
+      "stylePxUnit": 15
+    },
+    "lib/core/EmptyState/illustrations/EmptyError.vue": {
+      "stylePxUnit": 8
+    },
+    "lib/core/EmptyState/illustrations/EmptyExplorer.vue": {
+      "stylePxUnit": 7
+    },
+    "lib/core/EmptyState/illustrations/EmptyFunction.vue": {
+      "stylePxUnit": 5
+    },
+    "lib/core/EmptyState/illustrations/EmptyHistory.vue": {
+      "stylePxUnit": 4
+    },
+    "lib/core/EmptyState/illustrations/EmptyHourglass.vue": {
+      "stylePxUnit": 1
+    },
+    "lib/core/EmptyState/illustrations/EmptyPipeline.vue": {
+      "stylePxUnit": 2
+    },
+    "lib/core/EmptyState/illustrations/EmptyReport.vue": {
+      "stylePxUnit": 3
+    },
+    "lib/core/EmptyState/illustrations/EmptySchedule.vue": {
+      "stylePxUnit": 2
+    },
+    "lib/core/EmptyState/illustrations/EmptyServiceGraph.vue": {
+      "stylePxUnit": 12
+    },
+    "lib/core/EmptyState/illustrations/EmptyTrace.vue": {
+      "stylePxUnit": 1
+    },
+    "lib/core/EmptyState/illustrations/EmptyWaiting.vue": {
+      "stylePxUnit": 2
+    },
+    "lib/core/Navbar/ONavGroup.vue": {
+      "rawProjectRamp": 1
+    },
+    "lib/core/Navbar/ONavbar.vue": {
+      "rawProjectRamp": 2,
+      "rawVarInComponent": 1
+    },
+    "lib/core/PageHeader/OPageHeader.vue": {
+      "rawProjectRamp": 1
+    },
+    "lib/core/Splitter/OSplitter.vue": {
+      "rawVarInComponent": 1
+    },
+    "lib/core/Table/OTable.vue": {
+      "rawVarInComponent": 1
+    },
+    "lib/core/Table/sub-components/OTableBody.vue": {
+      "rawVarInComponent": 2
+    },
+    "lib/core/Table/sub-components/OTableBodyCell.vue": {
+      "rawVarInComponent": 3
+    },
+    "lib/core/Table/sub-components/OTableBodyRow.vue": {
+      "rawVarInComponent": 1
+    },
+    "lib/core/Table/sub-components/OTableColumnToggle.vue": {
+      "rawProjectRamp": 1
+    },
+    "lib/feedback/Skeleton/OSkeleton.vue": {
+      "rawVarInComponent": 1
+    },
+    "lib/forms/Color/OColor.vue": {
+      "arbZ": 1
+    },
+    "lib/forms/Date/ODate.vue": {
+      "rawProjectRamp": 1
+    },
+    "lib/forms/DateTimeRange/ODateRangeCalendar.vue": {
+      "rawVarInComponent": 2
+    },
+    "lib/forms/Input/OInput.vue": {
+      "rawProjectRamp": 1
+    },
+    "lib/forms/Select/OSelect.vue": {
+      "rawProjectRamp": 4,
+      "arbZ": 2
+    },
+    "lib/forms/Switch/OSwitch.vue": {
+      "rawProjectRamp": 2
+    },
+    "lib/forms/Time/OTime.vue": {
+      "rawProjectRamp": 1
+    },
+    "lib/lists/FieldList/OFieldList.vue": {
+      "arbZ": 2,
+      "rawVarInComponent": 1
+    },
+    "lib/navigation/Tabs/OTab.vue": {
+      "rawProjectRamp": 1
+    },
+    "lib/overlay/Dropdown/ODropdown.vue": {
+      "arbZ": 1
+    },
+    "lib/overlay/Tooltip/OTooltip.vue": {
+      "arbZ": 1
+    },
+    "plugins/logs/DetailTable.vue": {
+      "rawVarInComponent": 2
+    },
+    "plugins/logs/IndexList.vue": {
+      "rawVarInComponent": 1
+    },
+    "plugins/logs/SearchBar.vue": {
+      "arbZ": 4,
+      "rawVarInComponent": 1
+    },
+    "plugins/logs/SearchResult.vue": {
+      "rawVarInComponent": 19
+    },
+    "plugins/logs/TenstackTable.vue": {
+      "rawVarInComponent": 5
+    },
+    "plugins/logs/patterns/PatternList.vue": {
+      "rawVarInComponent": 6
+    },
+    "plugins/metrics/explorer/FunctionConfigDialog.vue": {
+      "rawProjectRamp": 2
+    },
+    "plugins/pipelines/CustomNode.vue": {
+      "arbZ": 7,
+      "rawVarInComponent": 10
+    },
+    "plugins/pipelines/PipelineFlow.vue": {
+      "arbZ": 1
+    },
+    "plugins/traces/Index.vue": {
+      "rawVarInComponent": 2
+    },
+    "plugins/traces/IndexList.vue": {
+      "rawVarInComponent": 2
+    },
+    "plugins/traces/LLMContentRenderer.vue": {
+      "rawVarInComponent": 7
+    },
+    "plugins/traces/LLMInsightsSkeleton.vue": {
+      "rawVarInComponent": 3
+    },
+    "plugins/traces/SearchBar.vue": {
+      "arbZ": 1
+    },
+    "plugins/traces/SearchResult.vue": {
+      "rawVarInComponent": 1
+    },
+    "plugins/traces/ServiceGraphNodeSidePanel.vue": {
+      "rawVarInComponent": 9
+    },
+    "plugins/traces/SessionDetails.vue": {
+      "rawProjectRamp": 1,
+      "arbZ": 1,
+      "rawVarInComponent": 9
+    },
+    "plugins/traces/ThreadToolCalls.vue": {
+      "rawVarInComponent": 30
+    },
+    "plugins/traces/ThreadView.vue": {
+      "rawVarInComponent": 9
+    },
+    "plugins/traces/TraceDAG.vue": {
+      "rawVarInComponent": 1
+    },
+    "plugins/traces/TraceDetails.vue": {
+      "rawVarInComponent": 2
+    },
+    "plugins/traces/TraceDetailsSidebar.vue": {
+      "rawVarInComponent": 17
+    },
+    "plugins/traces/TraceTree.vue": {
+      "rawVarInComponent": 2
+    },
+    "plugins/traces/components/TraceErrorTab.vue": {
+      "rawVarInComponent": 14
+    },
+    "plugins/traces/metrics/TracesAnalysisDashboard.vue": {
+      "rawVarInComponent": 1
+    },
+    "plugins/traces/metrics/TracesMetricsContextMenu.vue": {
+      "arbZ": 1
+    },
+    "utils/dashboard/colorPalette.ts": {
+      "darkMechanism": 5
+    },
+    "utils/dashboard/convertPromQLData.ts": {
+      "darkMechanism": 2
+    },
+    "utils/dashboard/sql/charts/convertSQLHeatmapChart.ts": {
+      "darkMechanism": 1
+    },
+    "utils/dashboard/sql/charts/convertSQLLineAreaChart.ts": {
+      "darkMechanism": 1
+    },
+    "utils/dashboard/sql/charts/convertSQLMetricChart.ts": {
+      "darkMechanism": 2
+    },
+    "utils/dashboard/sql/charts/convertSQLStackedChart.ts": {
+      "darkMechanism": 1
+    },
+    "utils/dashboard/sql/shared/contextBuilder.ts": {
+      "darkMechanism": 1
+    },
+    "utils/dashboard/sqlTimeSeriesConverter.ts": {
+      "darkMechanism": 2
+    },
+    "utils/logs/convertLogData.ts": {
+      "darkMechanism": 1
+    },
+    "utils/themeManager.ts": {
+      "darkMechanism": 1
+    },
+    "utils/traces/traceColors.ts": {
+      "darkMechanism": 2
+    },
+    "views/Dashboards/DashboardSettings.vue": {
+      "rawVarInComponent": 3
+    },
+    "views/Dashboards/Dashboards.vue": {
+      "rawProjectRamp": 1
+    },
+    "views/Dashboards/ImportDashboard.vue": {
+      "unscopedStyle": 1
+    },
+    "views/Dashboards/RenderDashboardCharts.vue": {
+      "unscopedStyle": 1,
+      "rawVarInComponent": 4
+    },
+    "views/Dashboards/ScheduledDashboards.vue": {
+      "rawVarInComponent": 5
+    },
+    "views/Dashboards/ViewDashboard.vue": {
+      "unscopedStyle": 1,
+      "rawVarInComponent": 1
+    },
+    "views/HomeChatHistory.vue": {
+      "rawProjectRamp": 1
+    },
+    "views/HomeView.vue": {
+      "rawVarInComponent": 18
+    },
+    "views/OverviewTab.vue": {
+      "rawProjectRamp": 14,
+      "arbZ": 1
+    },
+    "views/synthetics/CreateBrowserTest.vue": {
+      "rawProjectRamp": 3
+    },
+    "views/synthetics/MonitorRuns.vue": {
+      "rawProjectRamp": 3
+    },
+    "views/synthetics/RunDetail.vue": {
+      "rawProjectRamp": 1
+    }
+  }
+}
diff --git a/web/scripts/find-class-consumers.mjs b/web/scripts/find-class-consumers.mjs
new file mode 100644
index 0000000000..51dcbf2735
--- /dev/null
+++ b/web/scripts/find-class-consumers.mjs
@@ -0,0 +1,144 @@
+#!/usr/bin/env node
+// Copyright 2026 OpenObserve Inc.
+//
+// Pre-flight before deleting any CSS class rule (O2_STYLE_MIGRATION_PLAN.md §7.3).
+// Answers: "who actually uses this class?" — covering the ways a class name can
+// reach the DOM and escape a naive template grep (plan risks R1 / R5):
+//
+//   1. static  class="… foo …"
+//   2. bound   :class="{ foo: cond }" / :class="['foo']" / :class="x ? 'foo' : ''"
+//   3. JS      classList.add('foo'), `status-${x}` fragments, string literals in .ts
+//   4. CSS     the rules that DEFINE it (so you can see every definition site)
+//   5. specs   assertions on the class (these break when you delete it)
+//
+// Usage:
+//   node scripts/find-class-consumers.mjs logPage_bkcss histogram-container
+//   node scripts/find-class-consumers.mjs --quiet foo   # exit 1 if consumers exist
+//
+// Verdict per class:
+//   NO CONSUMERS      → safe to delete
+//   SELF-CONTAINED    → only the defining file uses it → colocate
+//   HAS CONSUMERS     → migrate consumers in the same PR
+
+import { readFileSync, readdirSync, statSync } from "node:fs";
+import { join, extname, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const SRC_DIR = join(__dirname, "..", "src");
+const EXTS = new Set([".css", ".vue", ".ts", ".js", ".scss"]);
+
+const args = process.argv.slice(2);
+const quiet = args.includes("--quiet");
+const names = args.filter((a) => !a.startsWith("--"));
+
+if (names.length === 0) {
+  console.error("Usage: node scripts/find-class-consumers.mjs <className>...");
+  process.exit(2);
+}
+
+function walk(dir, files = []) {
+  for (const entry of readdirSync(dir)) {
+    if (entry === "node_modules" || entry === "dist") continue;
+    const full = join(dir, entry);
+    const stat = statSync(full);
+    if (stat.isDirectory()) walk(full, files);
+    else if (EXTS.has(extname(entry))) files.push(full);
+  }
+  return files;
+}
+
+const files = walk(SRC_DIR);
+const cache = new Map();
+for (const f of files) cache.set(f, readFileSync(f, "utf8").split("\n"));
+
+const rel = (f) => f.replace(SRC_DIR + "/", "src/");
+
+/**
+ * Split a .vue file into template / script / style line ranges so we can say
+ * *where* a hit lives — a hit in <style> is a definition, in <template> a consumer.
+ */
+function sectionOf(file, lines, lineIdx) {
+  if (extname(file) !== ".vue") return extname(file) === ".css" || extname(file) === ".scss" ? "style" : "script";
+  let section = "script";
+  for (let i = 0; i <= lineIdx; i++) {
+    const l = lines[i];
+    if (/^\s*<template[\s>]/i.test(l)) section = "template";
+    else if (/^\s*<script[\s>]/i.test(l)) section = "script";
+    else if (/^\s*<style[\s>]/i.test(l)) section = "style";
+  }
+  return section;
+}
+
+let anyConsumers = false;
+
+for (const name of names) {
+  const esc = name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+
+  // A definition: `.name` appearing in a selector position inside CSS.
+  const defRe = new RegExp(`\\.${esc}(?![\\w-])`);
+  // A usage: the bare word inside a class-ish string context.
+  const wordRe = new RegExp(`(?<![\\w-])${esc}(?![\\w-])`);
+  // Dynamic construction: `status-${x}` style — flag prefixes of the name.
+  const parts = name.split("-");
+  const dynRes = [];
+  for (let i = 1; i < parts.length; i++) {
+    const prefix = parts.slice(0, i).join("-");
+    dynRes.push(new RegExp("[\"'`]" + prefix.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + "-\\$\\{"));
+  }
+
+  const definitions = [];
+  const consumers = [];
+  const specs = [];
+  const dynamic = [];
+
+  for (const [file, lines] of cache) {
+    lines.forEach((line, i) => {
+      const section = sectionOf(file, lines, i);
+      const isSpec = /\.spec\.(ts|js)$/.test(file);
+
+      if (wordRe.test(line)) {
+        const hit = { file: rel(file), line: i + 1, text: line.trim().slice(0, 100) };
+        if (section === "style" && defRe.test(line)) definitions.push(hit);
+        else if (isSpec) specs.push(hit);
+        else if (section === "template" || section === "script") consumers.push(hit);
+        else if (defRe.test(line)) definitions.push(hit);
+      }
+      for (const dre of dynRes) {
+        if (dre.test(line)) dynamic.push({ file: rel(file), line: i + 1, text: line.trim().slice(0, 100) });
+      }
+    });
+  }
+
+  const defFiles = new Set(definitions.map((d) => d.file));
+  const consumerFiles = new Set(consumers.map((c) => c.file));
+  const external = [...consumerFiles].filter((f) => !defFiles.has(f));
+
+  let verdict;
+  if (consumers.length === 0 && specs.length === 0) verdict = "NO CONSUMERS — safe to delete";
+  else if (external.length === 0) verdict = "SELF-CONTAINED — colocate into the defining file";
+  else verdict = `HAS CONSUMERS (${external.length} external file(s)) — migrate them in the same PR`;
+
+  if (verdict.startsWith("HAS")) anyConsumers = true;
+
+  if (quiet) continue;
+
+  console.log(`\n\x1b[1m.${name}\x1b[0m — ${verdict}`);
+
+  const show = (label, arr) => {
+    if (arr.length === 0) return;
+    console.log(`  ${label} (${arr.length}):`);
+    for (const h of arr.slice(0, 12)) console.log(`    ${h.file}:${h.line}  ${h.text}`);
+    if (arr.length > 12) console.log(`    ...and ${arr.length - 12} more`);
+  };
+
+  show("definitions", definitions);
+  show("consumers", consumers);
+  show("specs (update in-PR)", specs);
+  if (dynamic.length > 0) {
+    console.log(`  \x1b[33mdynamic-construction candidates\x1b[0m (${dynamic.length}) — review manually:`);
+    for (const h of dynamic.slice(0, 6)) console.log(`    ${h.file}:${h.line}  ${h.text}`);
+  }
+}
+
+process.exit(quiet && anyConsumers ? 1 : 0);
diff --git a/web/scripts/o2-token-map.json b/web/scripts/o2-token-map.json
new file mode 100644
index 0000000000..460741320b
--- /dev/null
+++ b/web/scripts/o2-token-map.json
@@ -0,0 +1,179 @@
+{
+  "_comment": "Phase 1 migration map: --o2-* -> --color-*. All targets are real --color-* tokens already defined in the token files. Consumed by codemod-o2-refs.mjs. Phase 2 (literal-owner families) appends to `migrate` as each family gets a --color-* token.",
+  "migrate": {
+    "--o2-primary-background": "--color-surface-base",
+    "--o2-secondary-background": "--color-surface-panel",
+    "--o2-muted-background": "--color-surface-subtle",
+    "--o2-text-heading": "--color-text-heading",
+    "--o2-text-primary": "--color-text-heading",
+    "--o2-text-body": "--color-text-body",
+    "--o2-text-secondary": "--color-text-secondary",
+    "--o2-text-caption": "--color-text-secondary",
+    "--o2-text-label": "--color-text-label",
+    "--o2-text-muted": "--color-text-muted",
+    "--o2-text-placeholder": "--color-text-placeholder",
+    "--o2-text-link": "--color-text-link",
+    "--o2-text-link-hover": "--color-text-link-hover",
+    "--o2-text-code": "--color-text-code",
+    "--o2-text-inverse": "--color-text-inverse",
+    "--o2-text-4": "--color-text-heading",
+    "--o2-text-2": "--color-text-secondary",
+    "--o2-text-1": "--color-text-secondary",
+    "--o2-text-3": "--color-text-label",
+    "--o2-card-background": "--color-surface-base",
+    "--o2-card-text": "--color-card-text",
+    "--o2-popover-background": "--color-surface-overlay",
+    "--o2-popover-text": "--color-text-heading",
+    "--o2-code-bg": "--color-code-bg",
+    "--o2-border": "--color-border-default",
+    "--o2-border-input": "--color-input-border",
+    "--o2-primary-foreground": "--color-button-primary-foreground",
+    "--o2-hover-accent": "--color-interactive-hover-bg",
+    "--o2-theme-color": "--color-theme-accent",
+    "--o2-dark-theme-color": "--color-theme-accent",
+    "--o2-body-primary-bg": "--color-theme-body-bg-primary",
+    "--o2-body-secondary-bg": "--color-theme-body-bg-secondary",
+    "--o2-primary-btn-bg": "--color-button-primary",
+    "--o2-primary-btn-text": "--color-button-primary-foreground",
+    "--o2-header-menu-bg": "--color-theme-header-menu-bg",
+    "--o2-border-2": "--color-border-subtle",
+    "--o2-menu-gradient-start": "--color-theme-menu-gradient-start",
+    "--o2-menu-gradient-end": "--color-theme-menu-gradient-end",
+    "--o2-menu-color": "--color-theme-menu-color",
+    "--o2-table-header-bg": "--color-theme-table-header-bg",
+    "--o2-tab-bg": "--color-theme-tab-bg",
+    "--o2-inactive-tab-bg": "--color-theme-tab-bg-inactive",
+    "--o2-input-label-text-color": "--color-input-label",
+    "--o2-label-chip-ip-bg": "--color-label-chip-ip-bg",
+    "--o2-label-chip-ip-text": "--color-label-chip-ip-text",
+    "--o2-label-chip-ipv4-bg": "--color-label-chip-ip-bg",
+    "--o2-label-chip-ipv4-text": "--color-label-chip-ip-text",
+    "--o2-label-chip-ipv6-bg": "--color-label-chip-ip-bg",
+    "--o2-label-chip-ipv6-text": "--color-label-chip-ip-text",
+    "--o2-label-chip-method-bg": "--color-label-chip-method-bg",
+    "--o2-label-chip-method-text": "--color-label-chip-method-text",
+    "--o2-label-chip-url-bg": "--color-label-chip-url-bg",
+    "--o2-label-chip-url-text": "--color-label-chip-url-text",
+    "--o2-label-chip-num-bg": "--color-label-chip-num-bg",
+    "--o2-label-chip-num-text": "--color-label-chip-num-text",
+    "--o2-label-chip-float-bg": "--color-label-chip-float-bg",
+    "--o2-label-chip-float-text": "--color-label-chip-float-text",
+    "--o2-label-chip-hex-bg": "--color-label-chip-hex-bg",
+    "--o2-label-chip-hex-text": "--color-label-chip-hex-text",
+    "--o2-label-chip-ts-bg": "--color-label-chip-ts-bg",
+    "--o2-label-chip-ts-text": "--color-label-chip-ts-text",
+    "--o2-label-chip-date-bg": "--color-label-chip-ts-bg",
+    "--o2-label-chip-date-text": "--color-label-chip-ts-text",
+    "--o2-label-chip-time-bg": "--color-label-chip-ts-bg",
+    "--o2-label-chip-time-text": "--color-label-chip-ts-text",
+    "--o2-label-chip-id-bg": "--color-label-chip-id-bg",
+    "--o2-label-chip-id-text": "--color-label-chip-id-text",
+    "--o2-label-chip-email-bg": "--color-label-chip-email-bg",
+    "--o2-label-chip-email-text": "--color-label-chip-email-text",
+    "--o2-label-chip-str-bg": "--color-label-chip-str-bg",
+    "--o2-label-chip-str-text": "--color-label-chip-str-text",
+    "--o2-label-chip-default-bg": "--color-label-chip-default-bg",
+    "--o2-label-chip-default-text": "--color-label-chip-default-text",
+    "--o2-label-chip-pattern-bg": "--color-label-chip-pattern-bg",
+    "--o2-label-chip-pattern-text": "--color-label-chip-pattern-text",
+    "--o2-status-success-text": "--color-status-success-text",
+    "--o2-status-success-bg": "--color-status-success-bg",
+    "--o2-status-error-text": "--color-status-error-text",
+    "--o2-status-error-bg": "--color-status-error-bg",
+    "--o2-positive": "--color-status-positive",
+    "--o2-negative": "--color-status-negative",
+    "--o2-secondary-btn-bg": "--color-button-secondary",
+    "--o2-secondary-btn-text": "--color-button-secondary-foreground",
+    "--o2-secondary-btn-border": "--color-button-secondary-border",
+    "--o2-primary-color": "--color-accent",
+    "--o2-actions-column-shawdow": "--color-actions-column-shadow",
+    "--o2-bg-gray": "--color-bg-gray",
+    "--o2-border-color": "--color-card-glass-border",
+    "--o2-cancel-query-bg": "--color-cancel-query-bg",
+    "--o2-card-bg": "--color-card-glass-bg",
+    "--o2-card-bg-solid": "--color-card-glass-solid",
+    "--o2-dashboard-placeholder-bg": "--color-dashboard-placeholder-bg",
+    "--o2-error-tag-bg": "--color-error-tag-bg",
+    "--o2-error-tag-text": "--color-error-tag-text",
+    "--o2-field-type-boolean-bg": "--color-field-type-boolean-bg",
+    "--o2-field-type-boolean-text": "--color-field-type-boolean-text",
+    "--o2-field-type-float-bg": "--color-field-type-float-bg",
+    "--o2-field-type-float-text": "--color-field-type-float-text",
+    "--o2-field-type-number-bg": "--color-field-type-number-bg",
+    "--o2-field-type-number-text": "--color-field-type-number-text",
+    "--o2-field-type-string-bg": "--color-field-type-string-bg",
+    "--o2-field-type-string-text": "--color-field-type-string-text",
+    "--o2-field-type-timestamp-bg": "--color-field-type-timestamp-bg",
+    "--o2-field-type-timestamp-text": "--color-field-type-timestamp-text",
+    "--o2-focus-ring": "--color-focus-ring",
+    "--o2-gray": "--color-gray",
+    "--o2-hover-gray": "--color-hover-gray",
+    "--o2-hover-shadow": "--color-hover-shadow",
+    "--o2-icon-color": "--color-icon-color",
+    "--o2-icon-color-dark": "--color-icon-color-dark",
+    "--o2-info": "--color-info",
+    "--o2-json-boolean": "--color-json-boolean",
+    "--o2-json-key": "--color-json-key",
+    "--o2-json-null": "--color-json-null",
+    "--o2-json-number": "--color-json-number",
+    "--o2-json-object": "--color-json-object",
+    "--o2-json-string": "--color-json-string",
+    "--o2-latency-p95": "--color-latency-p95",
+    "--o2-log-table-header-bg": "--color-log-table-header-bg",
+    "--o2-log-table-row-bg": "--color-log-table-row-bg",
+    "--o2-log-table-row-border": "--color-log-table-row-border",
+    "--o2-log-table-row-hover": "--color-log-table-row-hover",
+    "--o2-pivot-header-border": "--color-pivot-header-border",
+    "--o2-section-header-bg": "--color-section-header-bg",
+    "--o2-service-health-critical": "--color-service-health-critical",
+    "--o2-service-health-degraded": "--color-service-health-degraded",
+    "--o2-service-health-healthy": "--color-service-health-healthy",
+    "--o2-service-health-warning": "--color-service-health-warning",
+    "--o2-severity-error-color": "--color-severity-error-color",
+    "--o2-severity-warning-color": "--color-severity-warning-color",
+    "--o2-status-info-bg": "--color-status-info-bg",
+    "--o2-status-info-text": "--color-status-info-text",
+    "--o2-status-neutral-text": "--color-status-neutral-text",
+    "--o2-status-warning-bg": "--color-status-warning-bg",
+    "--o2-status-warning-text": "--color-status-warning-text",
+    "--o2-sticky-col-header-bg": "--color-sticky-col-header-bg",
+    "--o2-tab-text-color": "--color-tab-text-color",
+    "--o2-table-actions-bg": "--color-table-actions-bg",
+    "--o2-trace-border": "--color-trace-border",
+    "--o2-trace-hover": "--color-trace-hover",
+    "--o2-trace-selected": "--color-trace-selected",
+    "--o2-trace-surface": "--color-trace-surface",
+    "--o2-trace-text-primary": "--color-trace-text-primary",
+    "--o2-trace-text-secondary": "--color-trace-text-secondary",
+    "--o2-warning": "--color-warning",
+    "--o2-wildcard-bar-blue": "--color-wildcard-bar-blue",
+    "--o2-wildcard-bar-green": "--color-wildcard-bar-green",
+    "--o2-wildcard-bar-orange": "--color-wildcard-bar-orange",
+    "--o2-wildcard-bar-purple": "--color-wildcard-bar-purple",
+    "--o2-bg": "--color-surface-base",
+    "--o2-bg-color": "--color-surface-base",
+    "--o2-bg-primary": "--color-card-glass-bg",
+    "--o2-bg-light": "--color-surface-base",
+    "--o2-bg-dark": "--color-surface-base",
+    "--o2-bg-card-dark": "--color-surface-base",
+    "--o2-dark-page-bg": "--color-surface-base",
+    "--o2-surface": "--color-surface-base",
+    "--o2-text": "--color-text-heading",
+    "--o2-text-color": "--color-text-heading",
+    "--o2-text-primary-dark": "--color-text-heading",
+    "--o2-primary": "--color-accent",
+    "--o2-primary-dark": "--color-accent",
+    "--o2-color-primary": "--color-accent",
+    "--o2-color-primary-light": "--color-primary-100",
+    "--o2-brand": "--color-accent",
+    "--o2-destructive": "--color-error-500",
+    "--o2-status-error": "--color-status-error-text",
+    "--o2-status-error-border": "--color-error-300",
+    "--o2-hover-bg": "--color-interactive-hover-bg",
+    "--o2-hover-color": "--color-interactive-hover-bg",
+    "--o2-selected-color": "--color-primary-100",
+    "--o2-shadow-lg": "--shadow-lg",
+    "--o2-input-bg": "--color-input-bg",
+    "--o2-font-mono": "--font-mono"
+  }
+}
diff --git a/web/scripts/raw-token-audit.sh b/web/scripts/raw-token-audit.sh
new file mode 100644
index 0000000000..d4de1d168a
--- /dev/null
+++ b/web/scripts/raw-token-audit.sh
@@ -0,0 +1,69 @@
+#!/bin/bash
+# Raw-token audit over web/src — categorized counts.
+cd /Users/ktx/Documents/KTX-Projects/openobserve/web || exit 1
+
+# Common exclusions: tests, specs, mocks, vendored assets, token definition files
+EXC=(--glob '!**/*.spec.ts' --glob '!**/*.spec.js' --glob '!src/test/**' --glob '!**/__mocks__/**'
+     --glob '!src/assets/dashboard/echarts.min.js' --glob '!**/*.json' --glob '!**/*.md')
+# Token definition files are the legitimate home of raw values
+TOKENDEF=(--glob '!src/lib/styles/tokens/**')
+
+SRC=(-g '*.vue' -g '*.ts' -g '*.js' -g '*.css' -g '*.scss' -g '*.sass')
+
+section() { echo ""; echo "=== $1 ==="; }
+
+section "1. HEX COLORS (app code, excl token defs)"
+rg -o -i '#[0-9a-f]{3}(?:[0-9a-f]{3})?(?:[0-9a-f]{2})?\b' src "${SRC[@]}" "${EXC[@]}" "${TOKENDEF[@]}" 2>/dev/null | awk -F: '{print $1}' | sort | uniq -c | sort -rn > /tmp/audit_hex.txt
+echo "total: $(awk '{s+=$1} END {print s}' /tmp/audit_hex.txt)  files: $(wc -l < /tmp/audit_hex.txt)"
+head -25 /tmp/audit_hex.txt
+
+section "2. RGB/RGBA/HSL (app code, excl token defs)"
+rg -o -i '\b(rgba?|hsla?)\(' src "${SRC[@]}" "${EXC[@]}" "${TOKENDEF[@]}" 2>/dev/null | awk -F: '{print $1}' | sort | uniq -c | sort -rn > /tmp/audit_rgb.txt
+echo "total: $(awk '{s+=$1} END {print s}' /tmp/audit_rgb.txt)  files: $(wc -l < /tmp/audit_rgb.txt)"
+head -20 /tmp/audit_rgb.txt
+
+section "3. LEGACY --o2-* USAGE (banned)"
+rg -o -- '--o2-[a-z0-9-]+' src "${SRC[@]}" "${EXC[@]}" 2>/dev/null | awk -F: '{print $1}' | sort | uniq -c | sort -rn > /tmp/audit_o2.txt
+echo "total: $(awk '{s+=$1} END {print s}' /tmp/audit_o2.txt)  files: $(wc -l < /tmp/audit_o2.txt)"
+head -20 /tmp/audit_o2.txt
+
+section "4. PX VALUES excluding 1px (styles: vue/css/scss only)"
+rg -o -i '\b([2-9]|[1-9][0-9]+)(\.[0-9]+)?px\b' src -g '*.vue' -g '*.css' -g '*.scss' -g '*.sass' "${EXC[@]}" "${TOKENDEF[@]}" 2>/dev/null | awk -F: '{print $1}' | sort | uniq -c | sort -rn > /tmp/audit_px.txt
+echo "total: $(awk '{s+=$1} END {print s}' /tmp/audit_px.txt)  files: $(wc -l < /tmp/audit_px.txt)"
+head -25 /tmp/audit_px.txt
+
+section "5. INLINE style= ATTRIBUTES in templates"
+rg -c ' style="' src -g '*.vue' "${EXC[@]}" 2>/dev/null | sort -t: -k2 -rn > /tmp/audit_inline.txt
+echo "total: $(awk -F: '{s+=$2} END {print s}' /tmp/audit_inline.txt)  files: $(wc -l < /tmp/audit_inline.txt)"
+head -20 /tmp/audit_inline.txt
+
+section "6. TAILWIND ARBITRARY VALUES [..px] / [#hex]"
+rg -o -i '\-\[(#[0-9a-f]{3,8}|[0-9.]+(px|rem|em|vh|vw|%))\]' src -g '*.vue' "${EXC[@]}" 2>/dev/null | awk -F: '{print $1}' | sort | uniq -c | sort -rn > /tmp/audit_arb.txt
+echo "total: $(awk '{s+=$1} END {print s}' /tmp/audit_arb.txt)  files: $(wc -l < /tmp/audit_arb.txt)"
+head -20 /tmp/audit_arb.txt
+
+section "7. TYPO UTILITIES (text-weight)"
+rg -o '\b(text-weight-[a-z]+)\b' src -g '*.vue' "${EXC[@]}" 2>/dev/null | awk -F: '{print $1}' | sort | uniq -c | sort -rn > /tmp/audit_typo.txt
+echo "total: $(awk '{s+=$1} END {print s}' /tmp/audit_typo.txt)  files: $(wc -l < /tmp/audit_typo.txt)"
+head -20 /tmp/audit_typo.txt
+
+section "8. PALETTE color= PROPS (color=\"red\" etc.)"
+rg -o '\b(color|text-color)="(red|blue|green|orange|purple|teal|pink|amber|grey|gray|cyan|indigo|lime|brown|black|white|primary|secondary|positive|negative|warning|info|accent)(-[0-9]+)?"' src -g '*.vue' "${EXC[@]}" 2>/dev/null | awk -F: '{print $1}' | sort | uniq -c | sort -rn > /tmp/audit_qcolor.txt
+echo "total: $(awk '{s+=$1} END {print s}' /tmp/audit_qcolor.txt)  files: $(wc -l < /tmp/audit_qcolor.txt)"
+head -20 /tmp/audit_qcolor.txt
+
+section "9. HARDCODED font-family"
+rg -o -i 'font-family:\s*[^;"}]+' src "${SRC[@]}" "${EXC[@]}" "${TOKENDEF[@]}" 2>/dev/null | awk -F: '{print $1}' | sort | uniq -c | sort -rn > /tmp/audit_font.txt
+echo "total: $(awk '{s+=$1} END {print s}' /tmp/audit_font.txt)  files: $(wc -l < /tmp/audit_font.txt)"
+head -15 /tmp/audit_font.txt
+
+section "10. CSS NAMED COLORS in style contexts (white/black as values)"
+rg -o -i '(color|background|background-color|border-color|fill|stroke):\s*(white|black|red|green|blue|orange|yellow|gray|grey|transparent)\b' src -g '*.vue' -g '*.css' -g '*.scss' "${EXC[@]}" "${TOKENDEF[@]}" 2>/dev/null | grep -v -i transparent | awk -F: '{print $1}' | sort | uniq -c | sort -rn > /tmp/audit_named.txt
+echo "total: $(awk '{s+=$1} END {print s}' /tmp/audit_named.txt)  files: $(wc -l < /tmp/audit_named.txt)"
+head -15 /tmp/audit_named.txt
+
+section "11. SCOPED <style> BLOCKS remaining"
+rg -c '<style' src -g '*.vue' "${EXC[@]}" 2>/dev/null | wc -l | xargs echo "vue files with <style> blocks:"
+
+section "SUMMARY BY DIRECTORY (hex+rgb+px+o2 combined)"
+cat /tmp/audit_hex.txt /tmp/audit_rgb.txt /tmp/audit_px.txt /tmp/audit_o2.txt | awk '{n=$1; $1=""; split($2,p,"/"); print n, p[1]"/"p[2]}' | awk '{a[$2]+=$1} END {for (k in a) print a[k], k}' | sort -rn | head -20
diff --git a/web/scripts/spacing-audit.sh b/web/scripts/spacing-audit.sh
new file mode 100644
index 0000000000..fa5939f16c
--- /dev/null
+++ b/web/scripts/spacing-audit.sh
@@ -0,0 +1,61 @@
+#!/usr/bin/env bash
+# Copyright 2026 OpenObserve Inc.
+# Regenerates the quantitative numbers in web/SPACING_AUDIT.md.
+# Usage: bash web/scripts/spacing-audit.sh   (requires ripgrep + python3)
+# Writes per-category lists to /tmp/spacing_audit_*.txt
+set -euo pipefail
+cd "$(dirname "$0")/../src"
+
+# ripgrep: use the real binary, or fall back to the one bundled with Claude Code
+if ! command -v rg >/dev/null 2>&1; then
+  _cc="${CLAUDE_CODE_EXECPATH:-$HOME/.local/bin/claude}"
+  if [[ -x "$_cc" ]]; then
+    rg() { ( exec -a rg "$_cc" "$@" ); }
+  else
+    echo "ripgrep (rg) is required: brew install ripgrep" >&2; exit 1
+  fi
+fi
+
+OUT=/tmp
+EXCL=(-g '!*.spec.*' -g '!test/**' -g '!__mocks__/**' -g '!assets/dashboard/echarts.min.js')
+PROPS='(?:p|px|py|pt|pr|pb|pl|m|mx|my|mt|mr|mb|ml|gap|gap-x|gap-y|space-x|space-y)'
+
+echo "== 1. Tailwind spacing utility histogram =="
+rg -o --no-filename -g '*.vue' "${EXCL[@]}" "\\b${PROPS}-(?:\\d+(?:\\.\\d+)?|\\[[^\\]]+\\])" \
+  | sort | uniq -c | sort -rn > "$OUT/spacing_audit_utilities.txt"
+awk '{s+=$1} END {print "total:", s, "distinct:", NR}' "$OUT/spacing_audit_utilities.txt"
+
+echo "== 2. Scale-step histogram (props aggregated) =="
+awk '{n=$1; cls=$2; sub(/^[a-z-]+-/,"",cls); steps[cls]+=n} END {for (s in steps) print steps[s], s}' \
+  "$OUT/spacing_audit_utilities.txt" | grep -v ' \[' | sort -rn | tee "$OUT/spacing_audit_steps.txt"
+
+echo "== 3. Arbitrary values: convertible vs off-grid =="
+grep ' \S*\[' "$OUT/spacing_audit_utilities.txt" > "$OUT/spacing_audit_arbitrary.txt" || true
+python3 - "$OUT/spacing_audit_arbitrary.txt" <<'EOF'
+import re, sys
+conv=off=pxv=other=0; offs=[]
+for line in open(sys.argv[1]):
+    n, cls = int(line.split()[0]), line.split()[1]
+    m = re.search(r'\[([0-9.]+)rem\]', cls)
+    if m:
+        suffix = float(m.group(1)) / 0.25
+        if abs(suffix*4 - round(suffix*4)) < 1e-9: conv += n
+        else: off += n; offs.append((n, cls))
+    elif re.search(r'\[[0-9.]+px\]', cls): pxv += n
+    else: other += n
+print("convertible-to-class:", conv, "| off-grid:", off, "| px:", pxv, "| other:", other)
+for n, c in sorted(offs, reverse=True): print(f"  {n:4d} {c}")
+EOF
+
+echo "== 4. CSS padding/margin declarations =="
+rg -o --no-filename -g '*.vue' -g '*.css' -g '*.scss' "${EXCL[@]}" -g '!lib/styles/tokens/**' \
+  '(?:padding|margin)(?:-(?:top|right|bottom|left))?\s*:\s*[^;}"]+' \
+  | sed 's/\s\+/ /g' | sort | uniq -c | sort -rn > "$OUT/spacing_audit_css.txt"
+awk '{s+=$1} END {print "total:", s, "distinct:", NR}' "$OUT/spacing_audit_css.txt"
+
+echo "== 5. Spacing token adoption =="
+printf 'var(--spacing-*) outside token files: '
+rg --no-filename -g '!lib/styles/tokens/**' -g '!*.spec.*' 'var\(--spacing-' | wc -l | tr -d ' '
+
+echo "== 6. Top files by arbitrary spacing =="
+rg -c -g '*.vue' "${EXCL[@]}" "\\b${PROPS}-\\[[^\\]]+\\]" | sort -t: -k2 -rn | head -15
diff --git a/web/src/App.vue b/web/src/App.vue
index 37164397d9..19cfdb7f4c 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -15,9 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <router-view
-    :class="store.state.theme === 'dark' ? 'dark-theme' : 'light-theme'"
-  ></router-view>
+  <router-view></router-view>
   <OToastProvider />
   <ConfirmDialogProvider />
 </template>
diff --git a/web/src/assets/base.css b/web/src/assets/base.css
deleted file mode 100644
index 88633bc047..0000000000
--- a/web/src/assets/base.css
+++ /dev/null
@@ -1,74 +0,0 @@
-/* color palette from <https://github.com/vuejs/theme> */
-:root {
-  --vt-c-white: #ffffff;
-  --vt-c-white-soft: #f8f8f8;
-  --vt-c-white-mute: #f2f2f2;
-
-  --vt-c-black: #181818;
-  --vt-c-black-soft: #222222;
-  --vt-c-black-mute: #282828;
-
-  --vt-c-indigo: #2c3e50;
-
-  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
-  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
-  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
-  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
-  --vt-c-text-light-1: var(--vt-c-indigo);
-  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
-  --vt-c-text-dark-1: var(--vt-c-white);
-  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
-
-/* semantic color variables for this project */
-:root {
-  --color-background: var(--vt-c-white);
-  --color-background-soft: var(--vt-c-white-soft);
-  --color-background-mute: var(--vt-c-white-mute);
-
-  --color-border: var(--vt-c-divider-light-2);
-  --color-border-hover: var(--vt-c-divider-light-1);
-
-  --color-heading: var(--vt-c-text-light-1);
-  --color-text: var(--vt-c-text-light-1);
-
-  --section-gap: 160px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-background: var(--vt-c-black);
-    --color-background-soft: var(--vt-c-black-soft);
-    --color-background-mute: var(--vt-c-black-mute);
-
-    --color-border: var(--vt-c-divider-dark-2);
-    --color-border-hover: var(--vt-c-divider-dark-1);
-
-    --color-heading: var(--vt-c-text-dark-1);
-    --color-text: var(--vt-c-text-dark-2);
-  }
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  position: relative;
-  font-weight: normal;
-}
-
-body {
-  min-height: 100vh;
-  color: var(--color-text);
-  background: var(--color-background);
-  transition: color 0.5s, background-color 0.5s;
-  line-height: 1.6;
-  font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  font-size: 15px;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
diff --git a/web/src/assets/images/common/monitoring.svg b/web/src/assets/images/common/monitoring.svg
index f13ccfbb22..b4ed4be918 100644
--- a/web/src/assets/images/common/monitoring.svg
+++ b/web/src/assets/images/common/monitoring.svg
@@ -1,30 +1,30 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
-	 viewBox="0 0 512 512" xml:space="preserve">
-<rect x="26.483" y="66.207" style="fill:#18BDF6;" width="459.034" height="247.172"/>
-<path style="fill:#464655;" d="M494.345,39.724H17.655C7.905,39.724,0,47.628,0,57.379v317.793c0,9.75,7.905,17.655,17.655,17.655
-	h476.69c9.75,0,17.655-7.905,17.655-17.655V57.379C512,47.628,504.095,39.724,494.345,39.724z M485.517,313.379H26.483V66.207
-	h459.034V313.379z"/>
-<path style="fill:#C7CFE2;" d="M0,339.862v35.31c0,9.751,7.904,17.655,17.655,17.655h476.69c9.751,0,17.655-7.904,17.655-17.655
-	v-35.31H0z"/>
-<polygon style="fill:#AFB9D2;" points="326.621,463.448 185.379,463.448 194.207,392.828 317.793,392.828 "/>
-<g>
-	<polygon style="fill:#959CB3;" points="320,410.483 317.793,392.828 194.207,392.828 192,410.483 	"/>
-	<circle style="fill:#959CB3;" cx="256" cy="366.345" r="13.241"/>
-</g>
-<path style="fill:#C7CFE2;" d="M326.621,472.276H185.379c-4.875,0-8.828-3.953-8.828-8.828l0,0c0-4.875,3.953-8.828,8.828-8.828
-	h141.241c4.875,0,8.828,3.953,8.828,8.828l0,0C335.448,468.323,331.496,472.276,326.621,472.276z"/>
-<path style="fill:#FFFFFF;" d="M256.589,107.052c-60.557,0-113.985,27.772-146.433,70.201c-5.634,7.368-5.634,17.711,0,25.079
-	c32.448,42.43,85.876,70.201,146.433,70.201s113.985-27.772,146.433-70.201c5.634-7.368,5.634-17.711,0-25.079
-	C370.574,134.824,317.146,107.052,256.589,107.052z"/>
-<circle style="fill:#18BDF6;" cx="256.585" cy="189.793" r="62.058"/>
-<path style="fill:#00A0EB;" d="M225.562,189.793c0-28.906,19.791-53.122,46.541-60.022c-4.968-1.281-10.147-2.034-15.513-2.034
-	c-34.272,0-62.056,27.783-62.056,62.056s27.783,62.056,62.056,62.056c5.367,0,10.547-0.753,15.513-2.034
-	C245.353,242.915,225.562,218.699,225.562,189.793z"/>
-<circle style="fill:#535463;" cx="256.585" cy="189.793" r="31.029"/>
-<g>
-	<circle style="fill:#FFFFFF;" cx="272.099" cy="174.279" r="15.514"/>
-	<circle style="fill:#FFFFFF;" cx="235.906" cy="210.483" r="10.343"/>
-</g>
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 512 512" xml:space="preserve">
+<rect x="26.483" y="66.207" style="fill:#18BDF6;" width="459.034" height="247.172"/>
+<path style="fill:#464655;" d="M494.345,39.724H17.655C7.905,39.724,0,47.628,0,57.379v317.793c0,9.75,7.905,17.655,17.655,17.655
+	h476.69c9.75,0,17.655-7.905,17.655-17.655V57.379C512,47.628,504.095,39.724,494.345,39.724z M485.517,313.379H26.483V66.207
+	h459.034V313.379z"/>
+<path style="fill:#C7CFE2;" d="M0,339.862v35.31c0,9.751,7.904,17.655,17.655,17.655h476.69c9.751,0,17.655-7.904,17.655-17.655
+	v-35.31H0z"/>
+<polygon style="fill:#AFB9D2;" points="326.621,463.448 185.379,463.448 194.207,392.828 317.793,392.828 "/>
+<g>
+	<polygon style="fill:#959CB3;" points="320,410.483 317.793,392.828 194.207,392.828 192,410.483 	"/>
+	<circle style="fill:#959CB3;" cx="256" cy="366.345" r="13.241"/>
+</g>
+<path style="fill:#C7CFE2;" d="M326.621,472.276H185.379c-4.875,0-8.828-3.953-8.828-8.828l0,0c0-4.875,3.953-8.828,8.828-8.828
+	h141.241c4.875,0,8.828,3.953,8.828,8.828l0,0C335.448,468.323,331.496,472.276,326.621,472.276z"/>
+<path style="fill:#FFFFFF;" d="M256.589,107.052c-60.557,0-113.985,27.772-146.433,70.201c-5.634,7.368-5.634,17.711,0,25.079
+	c32.448,42.43,85.876,70.201,146.433,70.201s113.985-27.772,146.433-70.201c5.634-7.368,5.634-17.711,0-25.079
+	C370.574,134.824,317.146,107.052,256.589,107.052z"/>
+<circle style="fill:#18BDF6;" cx="256.585" cy="189.793" r="62.058"/>
+<path style="fill:#00A0EB;" d="M225.562,189.793c0-28.906,19.791-53.122,46.541-60.022c-4.968-1.281-10.147-2.034-15.513-2.034
+	c-34.272,0-62.056,27.783-62.056,62.056s27.783,62.056,62.056,62.056c5.367,0,10.547-0.753,15.513-2.034
+	C245.353,242.915,225.562,218.699,225.562,189.793z"/>
+<circle style="fill:#535463;" cx="256.585" cy="189.793" r="31.029"/>
+<g>
+	<circle style="fill:#FFFFFF;" cx="272.099" cy="174.279" r="15.514"/>
+	<circle style="fill:#FFFFFF;" cx="235.906" cy="210.483" r="10.343"/>
+</g>
 </svg>
\ No newline at end of file
diff --git a/web/src/assets/images/common/windows.svg b/web/src/assets/images/common/windows.svg
index 2a8a70ee07..67d3fbdbec 100644
--- a/web/src/assets/images/common/windows.svg
+++ b/web/src/assets/images/common/windows.svg
@@ -1,72 +1,72 @@
-<?xml version="1.0" encoding="utf-8"?>
-
+<?xml version="1.0" encoding="utf-8"?>
+
 <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
-	 viewBox="0 0 32 32" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;}
-	.st1{fill:#3A559F;}
-	.st2{fill:#F4F4F4;}
-	.st3{fill:#FF0084;}
-	.st4{fill:#0063DB;}
-	.st5{fill:#00ACED;}
-	.st6{fill:#FFEC06;}
-	.st7{fill:#FF0000;}
-	.st8{fill:#25D366;}
-	.st9{fill:#0088FF;}
-	.st10{fill:#314358;}
-	.st11{fill:#EE6996;}
-	.st12{fill:#01AEF3;}
-	.st13{fill:#FFFEFF;}
-	.st14{fill:#F06A35;}
-	.st15{fill:#00ADEF;}
-	.st16{fill:#1769FF;}
-	.st17{fill:#1AB7EA;}
-	.st18{fill:#6001D1;}
-	.st19{fill:#E41214;}
-	.st20{fill:#05CE78;}
-	.st21{fill:#7B519C;}
-	.st22{fill:#FF4500;}
-	.st23{fill:#00F076;}
-	.st24{fill:#FFC900;}
-	.st25{fill:#00D6FF;}
-	.st26{fill:#FF3A44;}
-	.st27{fill:#FF6A36;}
-	.st28{fill:#0061FE;}
-	.st29{fill:#F7981C;}
-	.st30{fill:#EE1B22;}
-	.st31{fill:#EF3561;}
-	.st32{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;}
-	.st33{fill:#0097D3;}
-	.st34{fill:#01308A;}
-	.st35{fill:#019CDE;}
-	.st36{fill:#FFD049;}
-	.st37{fill:#16A05D;}
-	.st38{fill:#4486F4;}
-	.st39{fill:none;}
-	.st40{fill:#34A853;}
-	.st41{fill:#4285F4;}
-	.st42{fill:#FBBC05;}
-	.st43{fill:#EA4335;}
-</style>
-<g>
-	<g>
-		<g>
-			<path class="st15" d="M30,15H17c-0.6,0-1-0.4-1-1V3.3c0-0.5,0.4-0.9,0.8-1l13-2.3c0.3,0,0.6,0,0.8,0.2C30.9,0.4,31,0.7,31,1v13
-				C31,14.6,30.6,15,30,15z"/>
-		</g>
-		<g>
-			<path class="st15" d="M13,15H1c-0.6,0-1-0.4-1-1V6c0-0.5,0.4-0.9,0.8-1l12-2c0.3,0,0.6,0,0.8,0.2C13.9,3.4,14,3.7,14,4v10
-				C14,14.6,13.6,15,13,15z"/>
-		</g>
-		<g>
-			<path class="st15" d="M30,32c-0.1,0-0.1,0-0.2,0l-13-2.3c-0.5-0.1-0.8-0.5-0.8-1V18c0-0.6,0.4-1,1-1h13c0.6,0,1,0.4,1,1v13
-				c0,0.3-0.1,0.6-0.4,0.8C30.5,31.9,30.2,32,30,32z"/>
-		</g>
-		<g>
-			<path class="st15" d="M13,29c-0.1,0-0.1,0-0.2,0l-12-2C0.4,26.9,0,26.5,0,26v-8c0-0.6,0.4-1,1-1h12c0.6,0,1,0.4,1,1v10
-				c0,0.3-0.1,0.6-0.4,0.8C13.5,28.9,13.2,29,13,29z"/>
-		</g>
-	</g>
-</g>
+<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 32 32" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#3A559F;}
+	.st2{fill:#F4F4F4;}
+	.st3{fill:#FF0084;}
+	.st4{fill:#0063DB;}
+	.st5{fill:#00ACED;}
+	.st6{fill:#FFEC06;}
+	.st7{fill:#FF0000;}
+	.st8{fill:#25D366;}
+	.st9{fill:#0088FF;}
+	.st10{fill:#314358;}
+	.st11{fill:#EE6996;}
+	.st12{fill:#01AEF3;}
+	.st13{fill:#FFFEFF;}
+	.st14{fill:#F06A35;}
+	.st15{fill:#00ADEF;}
+	.st16{fill:#1769FF;}
+	.st17{fill:#1AB7EA;}
+	.st18{fill:#6001D1;}
+	.st19{fill:#E41214;}
+	.st20{fill:#05CE78;}
+	.st21{fill:#7B519C;}
+	.st22{fill:#FF4500;}
+	.st23{fill:#00F076;}
+	.st24{fill:#FFC900;}
+	.st25{fill:#00D6FF;}
+	.st26{fill:#FF3A44;}
+	.st27{fill:#FF6A36;}
+	.st28{fill:#0061FE;}
+	.st29{fill:#F7981C;}
+	.st30{fill:#EE1B22;}
+	.st31{fill:#EF3561;}
+	.st32{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;}
+	.st33{fill:#0097D3;}
+	.st34{fill:#01308A;}
+	.st35{fill:#019CDE;}
+	.st36{fill:#FFD049;}
+	.st37{fill:#16A05D;}
+	.st38{fill:#4486F4;}
+	.st39{fill:none;}
+	.st40{fill:#34A853;}
+	.st41{fill:#4285F4;}
+	.st42{fill:#FBBC05;}
+	.st43{fill:#EA4335;}
+</style>
+<g>
+	<g>
+		<g>
+			<path class="st15" d="M30,15H17c-0.6,0-1-0.4-1-1V3.3c0-0.5,0.4-0.9,0.8-1l13-2.3c0.3,0,0.6,0,0.8,0.2C30.9,0.4,31,0.7,31,1v13
+				C31,14.6,30.6,15,30,15z"/>
+		</g>
+		<g>
+			<path class="st15" d="M13,15H1c-0.6,0-1-0.4-1-1V6c0-0.5,0.4-0.9,0.8-1l12-2c0.3,0,0.6,0,0.8,0.2C13.9,3.4,14,3.7,14,4v10
+				C14,14.6,13.6,15,13,15z"/>
+		</g>
+		<g>
+			<path class="st15" d="M30,32c-0.1,0-0.1,0-0.2,0l-13-2.3c-0.5-0.1-0.8-0.5-0.8-1V18c0-0.6,0.4-1,1-1h13c0.6,0,1,0.4,1,1v13
+				c0,0.3-0.1,0.6-0.4,0.8C30.5,31.9,30.2,32,30,32z"/>
+		</g>
+		<g>
+			<path class="st15" d="M13,29c-0.1,0-0.1,0-0.2,0l-12-2C0.4,26.9,0,26.5,0,26v-8c0-0.6,0.4-1,1-1h12c0.6,0,1,0.4,1,1v10
+				c0,0.3-0.1,0.6-0.4,0.8C13.5,28.9,13.2,29,13,29z"/>
+		</g>
+	</g>
+</g>
 </svg>
\ No newline at end of file
diff --git a/web/src/assets/images/ingestion/airbyte.svg b/web/src/assets/images/ingestion/airbyte.svg
index eefa1bcebd..a7275179db 100644
--- a/web/src/assets/images/ingestion/airbyte.svg
+++ b/web/src/assets/images/ingestion/airbyte.svg
@@ -1,22 +1,22 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.0" id="katman_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 841.89 595.28" style="enable-background:new 0 0 841.89 595.28;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#505AA5;}
-</style>
-<path class="st0" d="M349.6,124.45c48.94-54.99,129.98-71.12,196.61-39.38c88.52,42.17,120.82,149.6,72.62,232.48L510.41,503.76
-	c-6.06,10.41-16.03,18-27.72,21.11c-11.69,3.11-24.15,1.49-34.64-4.51l131.26-225.49c34.97-60.15,11.58-138.11-52.6-168.8
-	c-48.16-23.03-107.02-11.53-142.6,28.08c-19.62,21.74-30.64,49.82-31.01,79.01c-0.37,29.2,9.94,57.53,29.01,79.76
-	c3.43,3.99,7.12,7.75,11.04,11.25l-76.63,131.88c-3,5.16-6.99,9.67-11.74,13.3c-4.76,3.62-10.18,6.28-15.97,7.82
-	c-5.79,1.54-11.83,1.93-17.77,1.16c-5.94-0.78-11.67-2.71-16.87-5.68l83.19-143.17c-11.95-17.11-20.53-36.31-25.29-56.58
-	L261.1,360.8c-6.06,10.41-16.03,18-27.72,21.11c-11.69,3.11-24.15,1.49-34.64-4.51l131.83-226.76
-	C336.06,141.32,342.43,132.55,349.6,124.45z M501.76,196.63c31.75,18.21,42.71,58.7,24.34,90.22L399.69,503.74
-	c-6.06,10.41-16.03,18-27.72,21.11c-11.69,3.11-24.15,1.49-34.64-4.51l117.38-201.93c-9.42-1.97-18.29-5.94-26.01-11.65
-	c-7.72-5.71-14.1-13.01-18.7-21.4c-4.6-8.4-7.31-17.68-7.95-27.22c-0.64-9.54,0.82-19.1,4.27-28.02c3.45-8.92,8.8-17,15.7-23.67
-	c6.9-6.67,15.17-11.77,24.24-14.95c9.08-3.18,18.74-4.37,28.32-3.49S493.43,191.83,501.76,196.63z M455.78,237.39
-	c-2.17,1.66-4,3.72-5.36,6.08h-0.01c-2.06,3.55-3.02,7.62-2.75,11.71c0.27,4.09,1.76,8,4.27,11.25c2.51,3.25,5.94,5.69,9.84,7
-	c3.91,1.32,8.12,1.45,12.1,0.39c3.99-1.06,7.56-3.27,10.28-6.35c2.72-3.08,4.46-6.89,5-10.95c0.54-4.06-0.15-8.19-1.97-11.87
-	c-1.82-3.67-4.71-6.73-8.28-8.78c-2.37-1.36-4.99-2.24-7.71-2.6c-2.72-0.35-5.48-0.18-8.12,0.53
-	C460.43,234.52,457.95,235.73,455.78,237.39z"/>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.0" id="katman_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 841.89 595.28" style="enable-background:new 0 0 841.89 595.28;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#505AA5;}
+</style>
+<path class="st0" d="M349.6,124.45c48.94-54.99,129.98-71.12,196.61-39.38c88.52,42.17,120.82,149.6,72.62,232.48L510.41,503.76
+	c-6.06,10.41-16.03,18-27.72,21.11c-11.69,3.11-24.15,1.49-34.64-4.51l131.26-225.49c34.97-60.15,11.58-138.11-52.6-168.8
+	c-48.16-23.03-107.02-11.53-142.6,28.08c-19.62,21.74-30.64,49.82-31.01,79.01c-0.37,29.2,9.94,57.53,29.01,79.76
+	c3.43,3.99,7.12,7.75,11.04,11.25l-76.63,131.88c-3,5.16-6.99,9.67-11.74,13.3c-4.76,3.62-10.18,6.28-15.97,7.82
+	c-5.79,1.54-11.83,1.93-17.77,1.16c-5.94-0.78-11.67-2.71-16.87-5.68l83.19-143.17c-11.95-17.11-20.53-36.31-25.29-56.58
+	L261.1,360.8c-6.06,10.41-16.03,18-27.72,21.11c-11.69,3.11-24.15,1.49-34.64-4.51l131.83-226.76
+	C336.06,141.32,342.43,132.55,349.6,124.45z M501.76,196.63c31.75,18.21,42.71,58.7,24.34,90.22L399.69,503.74
+	c-6.06,10.41-16.03,18-27.72,21.11c-11.69,3.11-24.15,1.49-34.64-4.51l117.38-201.93c-9.42-1.97-18.29-5.94-26.01-11.65
+	c-7.72-5.71-14.1-13.01-18.7-21.4c-4.6-8.4-7.31-17.68-7.95-27.22c-0.64-9.54,0.82-19.1,4.27-28.02c3.45-8.92,8.8-17,15.7-23.67
+	c6.9-6.67,15.17-11.77,24.24-14.95c9.08-3.18,18.74-4.37,28.32-3.49S493.43,191.83,501.76,196.63z M455.78,237.39
+	c-2.17,1.66-4,3.72-5.36,6.08h-0.01c-2.06,3.55-3.02,7.62-2.75,11.71c0.27,4.09,1.76,8,4.27,11.25c2.51,3.25,5.94,5.69,9.84,7
+	c3.91,1.32,8.12,1.45,12.1,0.39c3.99-1.06,7.56-3.27,10.28-6.35c2.72-3.08,4.46-6.89,5-10.95c0.54-4.06-0.15-8.19-1.97-11.87
+	c-1.82-3.67-4.71-6.73-8.28-8.78c-2.37-1.36-4.99-2.24-7.71-2.6c-2.72-0.35-5.48-0.18-8.12,0.53
+	C460.43,234.52,457.95,235.73,455.78,237.39z"/>
+</svg>
diff --git a/web/src/assets/images/ingestion/java.svg b/web/src/assets/images/ingestion/java.svg
index ed92b9a7ac..9f0f599436 100644
--- a/web/src/assets/images/ingestion/java.svg
+++ b/web/src/assets/images/ingestion/java.svg
@@ -1,11 +1,11 @@
 <?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="800px" height="800px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16.0497 8.44062C22.6378 3.32607 19.2566 0 19.2566 0C19.7598 5.28738 13.813 6.53583 12.2189 10.1692C11.1312 12.6485 12.9638 14.8193 16.0475 17.5554C15.7749 16.9494 15.3544 16.3606 14.9288 15.7645C13.4769 13.7313 11.9645 11.6132 16.0497 8.44062Z" fill="#E76F00"/>
-<path d="M17.1015 18.677C17.1015 18.677 19.0835 17.0779 17.5139 15.3008C12.1931 9.27186 23.3333 6.53583 23.3333 6.53583C16.5317 9.8125 17.5471 11.7574 19.2567 14.1202C21.0871 16.6538 17.1015 18.677 17.1015 18.677Z" fill="#E76F00"/>
-<path d="M22.937 23.4456C29.0423 20.3258 26.2195 17.3278 24.2492 17.7317C23.7662 17.8305 23.5509 17.9162 23.5509 17.9162C23.5509 17.9162 23.7302 17.64 24.0726 17.5204C27.9705 16.1729 30.9682 21.4949 22.8143 23.6028C22.8143 23.6029 22.9088 23.5198 22.937 23.4456Z" fill="#5382A1"/>
-<path d="M10.233 19.4969C6.41312 18.9953 12.3275 17.6139 12.3275 17.6139C12.3275 17.6139 10.0307 17.4616 7.20592 18.8043C3.86577 20.3932 15.4681 21.1158 21.474 19.5625C22.0984 19.1432 22.9614 18.7798 22.9614 18.7798C22.9614 18.7798 20.5037 19.2114 18.0561 19.4145C15.0612 19.6612 11.8459 19.7093 10.233 19.4969Z" fill="#5382A1"/>
-<path d="M11.6864 22.4758C9.55624 22.2592 10.951 21.2439 10.951 21.2439C5.43898 23.0429 14.0178 25.083 21.7199 22.8682C20.9012 22.5844 20.3806 22.0653 20.3806 22.0653C16.6163 22.7781 14.441 22.7553 11.6864 22.4758Z" fill="#5382A1"/>
-<path d="M12.6145 25.6991C10.486 25.4585 11.7295 24.7474 11.7295 24.7474C6.72594 26.1222 14.7729 28.9625 21.1433 26.2777C20.0999 25.8787 19.3528 25.4181 19.3528 25.4181C16.5111 25.9469 15.1931 25.9884 12.6145 25.6991Z" fill="#5382A1"/>
-<path d="M25.9387 27.3388C25.9387 27.3388 26.8589 28.0844 24.9252 28.6612C21.2481 29.7566 9.62093 30.0874 6.39094 28.7049C5.22984 28.2082 7.40723 27.5189 8.09215 27.3742C8.80646 27.2219 9.21466 27.2503 9.21466 27.2503C7.9234 26.3558 0.868489 29.0067 5.63111 29.7659C18.6195 31.8372 29.3077 28.8331 25.9387 27.3388Z" fill="#5382A1"/>
-<path d="M28 28.9679C27.7869 31.6947 18.7877 32.2683 12.9274 31.8994C9.10432 31.6583 8.33812 31.0558 8.32691 31.047C11.9859 31.6402 18.1549 31.7482 23.1568 30.8225C27.5903 30.0016 28 28.9679 28 28.9679Z" fill="#5382A1"/>
+<svg width="800px" height="800px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.0497 8.44062C22.6378 3.32607 19.2566 0 19.2566 0C19.7598 5.28738 13.813 6.53583 12.2189 10.1692C11.1312 12.6485 12.9638 14.8193 16.0475 17.5554C15.7749 16.9494 15.3544 16.3606 14.9288 15.7645C13.4769 13.7313 11.9645 11.6132 16.0497 8.44062Z" fill="#E76F00"/>
+<path d="M17.1015 18.677C17.1015 18.677 19.0835 17.0779 17.5139 15.3008C12.1931 9.27186 23.3333 6.53583 23.3333 6.53583C16.5317 9.8125 17.5471 11.7574 19.2567 14.1202C21.0871 16.6538 17.1015 18.677 17.1015 18.677Z" fill="#E76F00"/>
+<path d="M22.937 23.4456C29.0423 20.3258 26.2195 17.3278 24.2492 17.7317C23.7662 17.8305 23.5509 17.9162 23.5509 17.9162C23.5509 17.9162 23.7302 17.64 24.0726 17.5204C27.9705 16.1729 30.9682 21.4949 22.8143 23.6028C22.8143 23.6029 22.9088 23.5198 22.937 23.4456Z" fill="#5382A1"/>
+<path d="M10.233 19.4969C6.41312 18.9953 12.3275 17.6139 12.3275 17.6139C12.3275 17.6139 10.0307 17.4616 7.20592 18.8043C3.86577 20.3932 15.4681 21.1158 21.474 19.5625C22.0984 19.1432 22.9614 18.7798 22.9614 18.7798C22.9614 18.7798 20.5037 19.2114 18.0561 19.4145C15.0612 19.6612 11.8459 19.7093 10.233 19.4969Z" fill="#5382A1"/>
+<path d="M11.6864 22.4758C9.55624 22.2592 10.951 21.2439 10.951 21.2439C5.43898 23.0429 14.0178 25.083 21.7199 22.8682C20.9012 22.5844 20.3806 22.0653 20.3806 22.0653C16.6163 22.7781 14.441 22.7553 11.6864 22.4758Z" fill="#5382A1"/>
+<path d="M12.6145 25.6991C10.486 25.4585 11.7295 24.7474 11.7295 24.7474C6.72594 26.1222 14.7729 28.9625 21.1433 26.2777C20.0999 25.8787 19.3528 25.4181 19.3528 25.4181C16.5111 25.9469 15.1931 25.9884 12.6145 25.6991Z" fill="#5382A1"/>
+<path d="M25.9387 27.3388C25.9387 27.3388 26.8589 28.0844 24.9252 28.6612C21.2481 29.7566 9.62093 30.0874 6.39094 28.7049C5.22984 28.2082 7.40723 27.5189 8.09215 27.3742C8.80646 27.2219 9.21466 27.2503 9.21466 27.2503C7.9234 26.3558 0.868489 29.0067 5.63111 29.7659C18.6195 31.8372 29.3077 28.8331 25.9387 27.3388Z" fill="#5382A1"/>
+<path d="M28 28.9679C27.7869 31.6947 18.7877 32.2683 12.9274 31.8994C9.10432 31.6583 8.33812 31.0558 8.32691 31.047C11.9859 31.6402 18.1549 31.7482 23.1568 30.8225C27.5903 30.0016 28 28.9679 28 28.9679Z" fill="#5382A1"/>
 </svg>
\ No newline at end of file
diff --git a/web/src/assets/images/ingestion/microsoft-iis.svg b/web/src/assets/images/ingestion/microsoft-iis.svg
index 6451eb3acb..2ee25c02d2 100644
--- a/web/src/assets/images/ingestion/microsoft-iis.svg
+++ b/web/src/assets/images/ingestion/microsoft-iis.svg
@@ -1,25 +1,25 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 432 332.4" style="enable-background:new 0 0 432 332.4;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#F25022;}
-	.st1{fill:#7FBA00;}
-	.st2{fill:#00A4EF;}
-	.st3{fill:#FFB900;}
-</style>
-<g>
-	<g>
-		<path d="M209.2,103.1V229h16.2V103.1H209.2L209.2,103.1z M254,103.1V229h16.2V103.1H254L254,103.1z M292,222.9
-			c6.7,4.4,19.9,8.1,32.3,8.1c29.6,0,44.1-16.8,44.1-36.4c0-18.5-10.8-29-32.3-37c-17.5-6.7-24.9-12.5-24.9-24.2
-			c0-8.8,6.4-18.9,23.9-18.9c11.4,0,19.9,3.7,23.9,6.1l4.4-13.1c-5.7-3-14.8-6.1-27.9-6.1c-24.6,0-40.7,14.5-40.7,34.3
-			c0,17.8,12.8,28.3,33.3,35.7c17.2,6.4,23.9,13.1,23.9,24.9c0,12.8-9.8,21.6-26.3,21.6c-11.1,0-21.9-3.7-29.3-8.1L292,222.9z"/>
-	</g>
-	<g>
-		<path class="st0" d="M63.6,101.8h60.9v60.9H63.6V101.8z"/>
-		<path class="st1" d="M130.7,101.8h60.9v60.9h-60.9V101.8z"/>
-		<path class="st2" d="M63.6,169.2h60.9V230H63.6V169.2z"/>
-		<path class="st3" d="M130.7,169.2h60.9V230h-60.9V169.2z"/>
-	</g>
-</g>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 432 332.4" style="enable-background:new 0 0 432 332.4;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#F25022;}
+	.st1{fill:#7FBA00;}
+	.st2{fill:#00A4EF;}
+	.st3{fill:#FFB900;}
+</style>
+<g>
+	<g>
+		<path d="M209.2,103.1V229h16.2V103.1H209.2L209.2,103.1z M254,103.1V229h16.2V103.1H254L254,103.1z M292,222.9
+			c6.7,4.4,19.9,8.1,32.3,8.1c29.6,0,44.1-16.8,44.1-36.4c0-18.5-10.8-29-32.3-37c-17.5-6.7-24.9-12.5-24.9-24.2
+			c0-8.8,6.4-18.9,23.9-18.9c11.4,0,19.9,3.7,23.9,6.1l4.4-13.1c-5.7-3-14.8-6.1-27.9-6.1c-24.6,0-40.7,14.5-40.7,34.3
+			c0,17.8,12.8,28.3,33.3,35.7c17.2,6.4,23.9,13.1,23.9,24.9c0,12.8-9.8,21.6-26.3,21.6c-11.1,0-21.9-3.7-29.3-8.1L292,222.9z"/>
+	</g>
+	<g>
+		<path class="st0" d="M63.6,101.8h60.9v60.9H63.6V101.8z"/>
+		<path class="st1" d="M130.7,101.8h60.9v60.9h-60.9V101.8z"/>
+		<path class="st2" d="M63.6,169.2h60.9V230H63.6V169.2z"/>
+		<path class="st3" d="M130.7,169.2h60.9V230h-60.9V169.2z"/>
+	</g>
+</g>
+</svg>
diff --git a/web/src/assets/images/ingestion/python.svg b/web/src/assets/images/ingestion/python.svg
index 3a4e65470e..25df8268f7 100644
--- a/web/src/assets/images/ingestion/python.svg
+++ b/web/src/assets/images/ingestion/python.svg
@@ -1,15 +1,15 @@
 <?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="800px" height="800px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13.0164 2C10.8193 2 9.03825 3.72453 9.03825 5.85185V8.51852H15.9235V9.25926H5.97814C3.78107 9.25926 2 10.9838 2 13.1111L2 18.8889C2 21.0162 3.78107 22.7407 5.97814 22.7407H8.27322V19.4815C8.27322 17.3542 10.0543 15.6296 12.2514 15.6296H19.5956C21.4547 15.6296 22.9617 14.1704 22.9617 12.3704V5.85185C22.9617 3.72453 21.1807 2 18.9836 2H13.0164ZM12.0984 6.74074C12.8589 6.74074 13.4754 6.14378 13.4754 5.40741C13.4754 4.67103 12.8589 4.07407 12.0984 4.07407C11.3378 4.07407 10.7213 4.67103 10.7213 5.40741C10.7213 6.14378 11.3378 6.74074 12.0984 6.74074Z" fill="url(#paint0_linear_87_8204)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M18.9834 30C21.1805 30 22.9616 28.2755 22.9616 26.1482V23.4815L16.0763 23.4815L16.0763 22.7408L26.0217 22.7408C28.2188 22.7408 29.9998 21.0162 29.9998 18.8889V13.1111C29.9998 10.9838 28.2188 9.25928 26.0217 9.25928L23.7266 9.25928V12.5185C23.7266 14.6459 21.9455 16.3704 19.7485 16.3704L12.4042 16.3704C10.5451 16.3704 9.03809 17.8296 9.03809 19.6296L9.03809 26.1482C9.03809 28.2755 10.8192 30 13.0162 30H18.9834ZM19.9015 25.2593C19.1409 25.2593 18.5244 25.8562 18.5244 26.5926C18.5244 27.329 19.1409 27.9259 19.9015 27.9259C20.662 27.9259 21.2785 27.329 21.2785 26.5926C21.2785 25.8562 20.662 25.2593 19.9015 25.2593Z" fill="url(#paint1_linear_87_8204)"/>
-<defs>
-<linearGradient id="paint0_linear_87_8204" x1="12.4809" y1="2" x2="12.4809" y2="22.7407" gradientUnits="userSpaceOnUse">
-<stop stop-color="#327EBD"/>
-<stop offset="1" stop-color="#1565A7"/>
-</linearGradient>
-<linearGradient id="paint1_linear_87_8204" x1="19.519" y1="9.25928" x2="19.519" y2="30" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FFDA4B"/>
-<stop offset="1" stop-color="#F9C600"/>
-</linearGradient>
-</defs>
+<svg width="800px" height="800px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.0164 2C10.8193 2 9.03825 3.72453 9.03825 5.85185V8.51852H15.9235V9.25926H5.97814C3.78107 9.25926 2 10.9838 2 13.1111L2 18.8889C2 21.0162 3.78107 22.7407 5.97814 22.7407H8.27322V19.4815C8.27322 17.3542 10.0543 15.6296 12.2514 15.6296H19.5956C21.4547 15.6296 22.9617 14.1704 22.9617 12.3704V5.85185C22.9617 3.72453 21.1807 2 18.9836 2H13.0164ZM12.0984 6.74074C12.8589 6.74074 13.4754 6.14378 13.4754 5.40741C13.4754 4.67103 12.8589 4.07407 12.0984 4.07407C11.3378 4.07407 10.7213 4.67103 10.7213 5.40741C10.7213 6.14378 11.3378 6.74074 12.0984 6.74074Z" fill="url(#paint0_linear_87_8204)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.9834 30C21.1805 30 22.9616 28.2755 22.9616 26.1482V23.4815L16.0763 23.4815L16.0763 22.7408L26.0217 22.7408C28.2188 22.7408 29.9998 21.0162 29.9998 18.8889V13.1111C29.9998 10.9838 28.2188 9.25928 26.0217 9.25928L23.7266 9.25928V12.5185C23.7266 14.6459 21.9455 16.3704 19.7485 16.3704L12.4042 16.3704C10.5451 16.3704 9.03809 17.8296 9.03809 19.6296L9.03809 26.1482C9.03809 28.2755 10.8192 30 13.0162 30H18.9834ZM19.9015 25.2593C19.1409 25.2593 18.5244 25.8562 18.5244 26.5926C18.5244 27.329 19.1409 27.9259 19.9015 27.9259C20.662 27.9259 21.2785 27.329 21.2785 26.5926C21.2785 25.8562 20.662 25.2593 19.9015 25.2593Z" fill="url(#paint1_linear_87_8204)"/>
+<defs>
+<linearGradient id="paint0_linear_87_8204" x1="12.4809" y1="2" x2="12.4809" y2="22.7407" gradientUnits="userSpaceOnUse">
+<stop stop-color="#327EBD"/>
+<stop offset="1" stop-color="#1565A7"/>
+</linearGradient>
+<linearGradient id="paint1_linear_87_8204" x1="19.519" y1="9.25928" x2="19.519" y2="30" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFDA4B"/>
+<stop offset="1" stop-color="#F9C600"/>
+</linearGradient>
+</defs>
 </svg>
\ No newline at end of file
diff --git a/web/src/assets/images/ingestion/rust.svg b/web/src/assets/images/ingestion/rust.svg
index d411cb1684..e4541543a9 100644
--- a/web/src/assets/images/ingestion/rust.svg
+++ b/web/src/assets/images/ingestion/rust.svg
@@ -1,6 +1,6 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8"?>
 <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg fill="#000000" width="800px" height="800px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
-<title>rust</title>
-<path d="M25.763 12.291c0.099-0.098 0.235-0.159 0.385-0.159 0.301 0 0.545 0.244 0.545 0.545s-0.244 0.545-0.545 0.545c-0.301 0-0.545-0.244-0.545-0.545 0-0.15 0.061-0.286 0.159-0.385v0zM15.342 3.906c0.163-0.171 0.392-0.278 0.647-0.278 0.493 0 0.892 0.399 0.892 0.892s-0.399 0.892-0.892 0.892c-0.413 0-0.76-0.28-0.862-0.661l-0.001-0.006c-0.018-0.068-0.029-0.145-0.029-0.225 0-0.238 0.093-0.454 0.245-0.614l-0 0zM26.965 15.901c0 0.273-0.010 0.545-0.030 0.814h-1.125c-0.112 0-0.158 0.073-0.158 0.185v0.516c0 1.216-0.686 1.48-1.287 1.547-0.572 0.065-1.206-0.239-1.284-0.589-0.089-1.265-0.773-2.353-1.772-2.994l-0.015-0.009c1.206-0.593 2.062-1.736 2.246-3.093l0.002-0.021c-0.049-1.229-0.72-2.29-1.705-2.884l-0.016-0.009c-0.667-0.438-1.472-0.719-2.339-0.773l-0.014-0.001h-11.63c1.569-1.749 3.678-2.987 6.063-3.45l0.069-0.011 1.371 1.438c0.148 0.155 0.356 0.252 0.587 0.252 0.218 0 0.415-0.086 0.561-0.226l-0 0 1.533-1.467c3.233 0.622 5.913 2.593 7.475 5.291l0.028 0.053-1.050 2.372c-0.044 0.097-0.069 0.21-0.069 0.329 0 0.329 0.195 0.613 0.477 0.742l0.005 0.002 2.022 0.898c0.035 0.359 0.053 0.721 0.053 1.089zM13.522 14.044v-2.063h3.699c0.191 0 1.349 0.221 1.349 1.087 0 0.719-0.888 0.977-1.618 0.977zM5.106 14.723l1.918-0.853c0.287-0.13 0.483-0.413 0.483-0.742 0-0.12-0.026-0.233-0.072-0.335l0.002 0.005-0.395-0.893h1.554v7.001h-3.134c-0.266-0.899-0.418-1.931-0.418-3 0-0.417 0.023-0.829 0.069-1.234l-0.005 0.050zM6.15 12.247c-0-0.295-0.239-0.534-0.534-0.534s-0.534 0.239-0.534 0.534c0 0.295 0.239 0.534 0.534 0.534s0.534-0.239 0.534-0.534v0zM9.548 26.027c-0.061 0.015-0.13 0.023-0.202 0.023-0.493 0-0.892-0.399-0.892-0.892s0.399-0.892 0.892-0.892c0.493 0 0.892 0.399 0.892 0.892 0 0.096-0.015 0.189-0.043 0.276l0.002-0.006c-0.097 0.3-0.34 0.526-0.643 0.599l-0.006 0.001zM21.937 23.178c-0.051-0.012-0.11-0.018-0.171-0.018-0.388 0-0.713 0.273-0.792 0.638l-0.001 0.005-0.447 2.085c-1.329 0.615-2.884 0.974-4.523 0.974-1.675 0-3.263-0.375-4.684-1.046l0.067 0.028-0.447-2.085c-0.080-0.369-0.404-0.642-0.792-0.642-0.061 0-0.12 0.007-0.177 0.019l0.005-0.001-1.841 0.395c-0.332-0.341-0.644-0.707-0.931-1.093l-0.021-0.029h8.957c0.101 0 0.169-0.018 0.169-0.11v-3.169c0-0.092-0.067-0.11-0.169-0.11h-2.62v-2.009h2.834c0.881 0.009 1.607 0.656 1.741 1.5l0.001 0.010c0.113 0.441 0.359 1.88 0.529 2.34 0.168 0.516 0.854 1.547 1.585 1.547h4.463c0.058-0.001 0.114-0.007 0.168-0.017l-0.006 0.001c-0.326 0.44-0.658 0.828-1.016 1.192l0.001-0.001zM22.365 26.070c1.13-0 2.046-0.917 2.046-2.047s-0.916-2.047-2.047-2.047-2.047 0.916-2.047 2.047c0 1.13 0.916 2.046 2.046 2.047h0zM30.789 15.629l-1.259-0.779q-0.016-0.184-0.035-0.367l1.082-1.008c0.084-0.079 0.136-0.192 0.136-0.316 0-0.184-0.115-0.342-0.277-0.406l-0.003-0.001-1.383-0.517q-0.051-0.179-0.109-0.357l0.863-1.198c0.051-0.070 0.082-0.158 0.082-0.253 0-0.215-0.156-0.393-0.361-0.427l-0.003-0-1.458-0.237q-0.085-0.165-0.176-0.328l0.612-1.345c0.025-0.053 0.039-0.114 0.039-0.18 0-0.090-0.027-0.173-0.075-0.242l0.001 0.001c-0.079-0.117-0.212-0.193-0.362-0.193-0.005 0-0.010 0-0.015 0l0.001-0-1.48 0.052q-0.114-0.144-0.234-0.283l0.34-1.441c0.007-0.030 0.011-0.064 0.011-0.099 0-0.24-0.194-0.434-0.434-0.434-0.035 0-0.069 0.004-0.102 0.012l0.003-0.001-1.441 0.34q-0.141-0.119-0.285-0.234l0.052-1.48c0-0.006 0-0.013 0-0.021 0-0.238-0.193-0.43-0.43-0.43-0.066 0-0.129 0.015-0.185 0.042l0.003-0.001-1.345 0.614c-0.109-0.059-0.218-0.119-0.328-0.176l-0.238-1.459c-0.036-0.207-0.215-0.362-0.429-0.362-0.094 0-0.182 0.030-0.253 0.081l0.001-0.001-1.199 0.863q-0.177-0.057-0.357-0.107l-0.517-1.383c-0.064-0.165-0.222-0.28-0.407-0.28-0.124 0-0.236 0.052-0.316 0.136l-0 0-1.008 1.083q-0.183-0.021-0.367-0.035l-0.779-1.259c-0.078-0.124-0.213-0.205-0.368-0.205s-0.291 0.081-0.367 0.204l-0.001 0.002-0.779 1.259q-0.184 0.016-0.367 0.035l-1.010-1.083c-0.079-0.085-0.192-0.138-0.317-0.138-0.185 0-0.343 0.116-0.405 0.279l-0.001 0.003-0.517 1.383c-0.12 0.034-0.238 0.071-0.357 0.107l-1.198-0.863c-0.070-0.050-0.157-0.080-0.252-0.080-0.215 0-0.393 0.155-0.429 0.36l-0 0.003-0.238 1.459q-0.165 0.085-0.328 0.176l-1.345-0.614c-0.053-0.025-0.115-0.039-0.18-0.039-0.239 0-0.433 0.194-0.433 0.433 0 0.006 0 0.012 0 0.017l-0-0.001 0.052 1.48q-0.144 0.114-0.285 0.234l-1.441-0.341c-0.030-0.007-0.064-0.011-0.099-0.011-0.24 0-0.434 0.194-0.434 0.434 0 0.035 0.004 0.069 0.012 0.102l-0.001-0.003 0.339 1.441c-0.078 0.094-0.157 0.189-0.233 0.283l-1.48-0.052c-0.005-0-0.011-0-0.017-0-0.239 0-0.433 0.194-0.433 0.433 0 0.065 0.014 0.127 0.040 0.183l-0.001-0.003 0.614 1.345q-0.091 0.162-0.176 0.328l-1.457 0.237c-0.207 0.036-0.362 0.214-0.362 0.429 0 0.094 0.030 0.182 0.081 0.253l-0.001-0.001 0.863 1.198q-0.056 0.178-0.109 0.357l-1.383 0.517c-0.165 0.064-0.28 0.222-0.28 0.407 0 0.124 0.052 0.236 0.135 0.316l0 0 1.082 1.008q-0.021 0.183-0.035 0.367l-1.259 0.779c-0.125 0.077-0.208 0.213-0.208 0.368s0.082 0.292 0.206 0.367l0.002 0.001 1.259 0.779c0.010 0.123 0.023 0.245 0.035 0.367l-1.082 1.010c-0.085 0.079-0.138 0.192-0.138 0.317 0 0.185 0.116 0.343 0.279 0.405l0.003 0.001 1.383 0.517c0.034 0.12 0.071 0.239 0.109 0.357l-0.863 1.198c-0.052 0.070-0.083 0.159-0.083 0.254 0 0.215 0.158 0.394 0.364 0.426l0.002 0 1.457 0.237c0.057 0.11 0.115 0.219 0.176 0.328l-0.614 1.345c-0.025 0.053-0.039 0.115-0.039 0.18 0 0.239 0.194 0.433 0.433 0.433 0.006 0 0.012-0 0.017-0l-0.001 0 1.479-0.052c0.077 0.096 0.154 0.191 0.234 0.285l-0.339 1.442c-0.007 0.030-0.011 0.064-0.011 0.099 0 0.239 0.194 0.433 0.433 0.433 0.036 0 0.070-0.004 0.103-0.012l-0.003 0.001 1.441-0.339c0.094 0.080 0.189 0.157 0.285 0.233l-0.052 1.48c-0 0.006-0 0.012-0 0.019 0 0.238 0.193 0.43 0.43 0.43 0.066 0 0.129-0.015 0.185-0.042l-0.003 0.001 1.345-0.612c0.109 0.061 0.218 0.119 0.328 0.176l0.238 1.457c0.036 0.207 0.214 0.363 0.429 0.363 0.094 0 0.181-0.030 0.253-0.081l-0.001 0.001 1.198-0.863q0.178 0.057 0.357 0.109l0.517 1.383c0.062 0.167 0.22 0.283 0.405 0.283 0.125 0 0.238-0.053 0.317-0.139l0-0 1.010-1.082c0.121 0.014 0.244 0.025 0.367 0.037l0.779 1.259c0.078 0.123 0.214 0.204 0.368 0.204s0.29-0.081 0.367-0.203l0.001-0.002 0.779-1.259c0.123-0.011 0.245-0.023 0.367-0.037l1.008 1.082c0.079 0.084 0.192 0.136 0.316 0.136 0.184 0 0.342-0.115 0.406-0.277l0.001-0.003 0.517-1.383q0.179-0.051 0.357-0.109l1.198 0.863c0.070 0.052 0.159 0.083 0.254 0.083 0.215 0 0.394-0.158 0.426-0.364l0-0.002 0.238-1.457c0.11-0.057 0.219-0.116 0.328-0.176l1.345 0.612c0.052 0.024 0.114 0.038 0.179 0.038 0.24 0 0.434-0.194 0.434-0.434 0-0.005-0-0.009-0-0.014l0 0.001-0.052-1.48q0.144-0.113 0.283-0.233l1.441 0.339c0.030 0.007 0.064 0.011 0.098 0.011 0.24 0 0.434-0.194 0.434-0.434 0-0.035-0.004-0.068-0.012-0.1l0.001 0.003-0.339-1.442c0.078-0.094 0.157-0.188 0.233-0.285l1.48 0.052c0.006 0 0.013 0 0.020 0 0.238 0 0.43-0.193 0.43-0.43 0-0.066-0.015-0.129-0.042-0.185l0.001 0.003-0.612-1.345c0.059-0.109 0.119-0.218 0.176-0.328l1.457-0.237c0.207-0.036 0.362-0.215 0.362-0.429 0-0.094-0.030-0.182-0.081-0.253l0.001 0.001-0.863-1.198 0.109-0.357 1.383-0.517c0.166-0.063 0.282-0.221 0.282-0.406 0-0.125-0.053-0.238-0.138-0.317l-0-0-1.082-1.010c0.013-0.121 0.025-0.244 0.035-0.367l1.259-0.779c0.125-0.077 0.208-0.213 0.208-0.368s-0.082-0.291-0.206-0.367l-0.002-0.001z"></path>
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
+<title>rust</title>
+<path d="M25.763 12.291c0.099-0.098 0.235-0.159 0.385-0.159 0.301 0 0.545 0.244 0.545 0.545s-0.244 0.545-0.545 0.545c-0.301 0-0.545-0.244-0.545-0.545 0-0.15 0.061-0.286 0.159-0.385v0zM15.342 3.906c0.163-0.171 0.392-0.278 0.647-0.278 0.493 0 0.892 0.399 0.892 0.892s-0.399 0.892-0.892 0.892c-0.413 0-0.76-0.28-0.862-0.661l-0.001-0.006c-0.018-0.068-0.029-0.145-0.029-0.225 0-0.238 0.093-0.454 0.245-0.614l-0 0zM26.965 15.901c0 0.273-0.010 0.545-0.030 0.814h-1.125c-0.112 0-0.158 0.073-0.158 0.185v0.516c0 1.216-0.686 1.48-1.287 1.547-0.572 0.065-1.206-0.239-1.284-0.589-0.089-1.265-0.773-2.353-1.772-2.994l-0.015-0.009c1.206-0.593 2.062-1.736 2.246-3.093l0.002-0.021c-0.049-1.229-0.72-2.29-1.705-2.884l-0.016-0.009c-0.667-0.438-1.472-0.719-2.339-0.773l-0.014-0.001h-11.63c1.569-1.749 3.678-2.987 6.063-3.45l0.069-0.011 1.371 1.438c0.148 0.155 0.356 0.252 0.587 0.252 0.218 0 0.415-0.086 0.561-0.226l-0 0 1.533-1.467c3.233 0.622 5.913 2.593 7.475 5.291l0.028 0.053-1.050 2.372c-0.044 0.097-0.069 0.21-0.069 0.329 0 0.329 0.195 0.613 0.477 0.742l0.005 0.002 2.022 0.898c0.035 0.359 0.053 0.721 0.053 1.089zM13.522 14.044v-2.063h3.699c0.191 0 1.349 0.221 1.349 1.087 0 0.719-0.888 0.977-1.618 0.977zM5.106 14.723l1.918-0.853c0.287-0.13 0.483-0.413 0.483-0.742 0-0.12-0.026-0.233-0.072-0.335l0.002 0.005-0.395-0.893h1.554v7.001h-3.134c-0.266-0.899-0.418-1.931-0.418-3 0-0.417 0.023-0.829 0.069-1.234l-0.005 0.050zM6.15 12.247c-0-0.295-0.239-0.534-0.534-0.534s-0.534 0.239-0.534 0.534c0 0.295 0.239 0.534 0.534 0.534s0.534-0.239 0.534-0.534v0zM9.548 26.027c-0.061 0.015-0.13 0.023-0.202 0.023-0.493 0-0.892-0.399-0.892-0.892s0.399-0.892 0.892-0.892c0.493 0 0.892 0.399 0.892 0.892 0 0.096-0.015 0.189-0.043 0.276l0.002-0.006c-0.097 0.3-0.34 0.526-0.643 0.599l-0.006 0.001zM21.937 23.178c-0.051-0.012-0.11-0.018-0.171-0.018-0.388 0-0.713 0.273-0.792 0.638l-0.001 0.005-0.447 2.085c-1.329 0.615-2.884 0.974-4.523 0.974-1.675 0-3.263-0.375-4.684-1.046l0.067 0.028-0.447-2.085c-0.080-0.369-0.404-0.642-0.792-0.642-0.061 0-0.12 0.007-0.177 0.019l0.005-0.001-1.841 0.395c-0.332-0.341-0.644-0.707-0.931-1.093l-0.021-0.029h8.957c0.101 0 0.169-0.018 0.169-0.11v-3.169c0-0.092-0.067-0.11-0.169-0.11h-2.62v-2.009h2.834c0.881 0.009 1.607 0.656 1.741 1.5l0.001 0.010c0.113 0.441 0.359 1.88 0.529 2.34 0.168 0.516 0.854 1.547 1.585 1.547h4.463c0.058-0.001 0.114-0.007 0.168-0.017l-0.006 0.001c-0.326 0.44-0.658 0.828-1.016 1.192l0.001-0.001zM22.365 26.070c1.13-0 2.046-0.917 2.046-2.047s-0.916-2.047-2.047-2.047-2.047 0.916-2.047 2.047c0 1.13 0.916 2.046 2.046 2.047h0zM30.789 15.629l-1.259-0.779q-0.016-0.184-0.035-0.367l1.082-1.008c0.084-0.079 0.136-0.192 0.136-0.316 0-0.184-0.115-0.342-0.277-0.406l-0.003-0.001-1.383-0.517q-0.051-0.179-0.109-0.357l0.863-1.198c0.051-0.070 0.082-0.158 0.082-0.253 0-0.215-0.156-0.393-0.361-0.427l-0.003-0-1.458-0.237q-0.085-0.165-0.176-0.328l0.612-1.345c0.025-0.053 0.039-0.114 0.039-0.18 0-0.090-0.027-0.173-0.075-0.242l0.001 0.001c-0.079-0.117-0.212-0.193-0.362-0.193-0.005 0-0.010 0-0.015 0l0.001-0-1.48 0.052q-0.114-0.144-0.234-0.283l0.34-1.441c0.007-0.030 0.011-0.064 0.011-0.099 0-0.24-0.194-0.434-0.434-0.434-0.035 0-0.069 0.004-0.102 0.012l0.003-0.001-1.441 0.34q-0.141-0.119-0.285-0.234l0.052-1.48c0-0.006 0-0.013 0-0.021 0-0.238-0.193-0.43-0.43-0.43-0.066 0-0.129 0.015-0.185 0.042l0.003-0.001-1.345 0.614c-0.109-0.059-0.218-0.119-0.328-0.176l-0.238-1.459c-0.036-0.207-0.215-0.362-0.429-0.362-0.094 0-0.182 0.030-0.253 0.081l0.001-0.001-1.199 0.863q-0.177-0.057-0.357-0.107l-0.517-1.383c-0.064-0.165-0.222-0.28-0.407-0.28-0.124 0-0.236 0.052-0.316 0.136l-0 0-1.008 1.083q-0.183-0.021-0.367-0.035l-0.779-1.259c-0.078-0.124-0.213-0.205-0.368-0.205s-0.291 0.081-0.367 0.204l-0.001 0.002-0.779 1.259q-0.184 0.016-0.367 0.035l-1.010-1.083c-0.079-0.085-0.192-0.138-0.317-0.138-0.185 0-0.343 0.116-0.405 0.279l-0.001 0.003-0.517 1.383c-0.12 0.034-0.238 0.071-0.357 0.107l-1.198-0.863c-0.070-0.050-0.157-0.080-0.252-0.080-0.215 0-0.393 0.155-0.429 0.36l-0 0.003-0.238 1.459q-0.165 0.085-0.328 0.176l-1.345-0.614c-0.053-0.025-0.115-0.039-0.18-0.039-0.239 0-0.433 0.194-0.433 0.433 0 0.006 0 0.012 0 0.017l-0-0.001 0.052 1.48q-0.144 0.114-0.285 0.234l-1.441-0.341c-0.030-0.007-0.064-0.011-0.099-0.011-0.24 0-0.434 0.194-0.434 0.434 0 0.035 0.004 0.069 0.012 0.102l-0.001-0.003 0.339 1.441c-0.078 0.094-0.157 0.189-0.233 0.283l-1.48-0.052c-0.005-0-0.011-0-0.017-0-0.239 0-0.433 0.194-0.433 0.433 0 0.065 0.014 0.127 0.040 0.183l-0.001-0.003 0.614 1.345q-0.091 0.162-0.176 0.328l-1.457 0.237c-0.207 0.036-0.362 0.214-0.362 0.429 0 0.094 0.030 0.182 0.081 0.253l-0.001-0.001 0.863 1.198q-0.056 0.178-0.109 0.357l-1.383 0.517c-0.165 0.064-0.28 0.222-0.28 0.407 0 0.124 0.052 0.236 0.135 0.316l0 0 1.082 1.008q-0.021 0.183-0.035 0.367l-1.259 0.779c-0.125 0.077-0.208 0.213-0.208 0.368s0.082 0.292 0.206 0.367l0.002 0.001 1.259 0.779c0.010 0.123 0.023 0.245 0.035 0.367l-1.082 1.010c-0.085 0.079-0.138 0.192-0.138 0.317 0 0.185 0.116 0.343 0.279 0.405l0.003 0.001 1.383 0.517c0.034 0.12 0.071 0.239 0.109 0.357l-0.863 1.198c-0.052 0.070-0.083 0.159-0.083 0.254 0 0.215 0.158 0.394 0.364 0.426l0.002 0 1.457 0.237c0.057 0.11 0.115 0.219 0.176 0.328l-0.614 1.345c-0.025 0.053-0.039 0.115-0.039 0.18 0 0.239 0.194 0.433 0.433 0.433 0.006 0 0.012-0 0.017-0l-0.001 0 1.479-0.052c0.077 0.096 0.154 0.191 0.234 0.285l-0.339 1.442c-0.007 0.030-0.011 0.064-0.011 0.099 0 0.239 0.194 0.433 0.433 0.433 0.036 0 0.070-0.004 0.103-0.012l-0.003 0.001 1.441-0.339c0.094 0.080 0.189 0.157 0.285 0.233l-0.052 1.48c-0 0.006-0 0.012-0 0.019 0 0.238 0.193 0.43 0.43 0.43 0.066 0 0.129-0.015 0.185-0.042l-0.003 0.001 1.345-0.612c0.109 0.061 0.218 0.119 0.328 0.176l0.238 1.457c0.036 0.207 0.214 0.363 0.429 0.363 0.094 0 0.181-0.030 0.253-0.081l-0.001 0.001 1.198-0.863q0.178 0.057 0.357 0.109l0.517 1.383c0.062 0.167 0.22 0.283 0.405 0.283 0.125 0 0.238-0.053 0.317-0.139l0-0 1.010-1.082c0.121 0.014 0.244 0.025 0.367 0.037l0.779 1.259c0.078 0.123 0.214 0.204 0.368 0.204s0.29-0.081 0.367-0.203l0.001-0.002 0.779-1.259c0.123-0.011 0.245-0.023 0.367-0.037l1.008 1.082c0.079 0.084 0.192 0.136 0.316 0.136 0.184 0 0.342-0.115 0.406-0.277l0.001-0.003 0.517-1.383q0.179-0.051 0.357-0.109l1.198 0.863c0.070 0.052 0.159 0.083 0.254 0.083 0.215 0 0.394-0.158 0.426-0.364l0-0.002 0.238-1.457c0.11-0.057 0.219-0.116 0.328-0.176l1.345 0.612c0.052 0.024 0.114 0.038 0.179 0.038 0.24 0 0.434-0.194 0.434-0.434 0-0.005-0-0.009-0-0.014l0 0.001-0.052-1.48q0.144-0.113 0.283-0.233l1.441 0.339c0.030 0.007 0.064 0.011 0.098 0.011 0.24 0 0.434-0.194 0.434-0.434 0-0.035-0.004-0.068-0.012-0.1l0.001 0.003-0.339-1.442c0.078-0.094 0.157-0.188 0.233-0.285l1.48 0.052c0.006 0 0.013 0 0.020 0 0.238 0 0.43-0.193 0.43-0.43 0-0.066-0.015-0.129-0.042-0.185l0.001 0.003-0.612-1.345c0.059-0.109 0.119-0.218 0.176-0.328l1.457-0.237c0.207-0.036 0.362-0.215 0.362-0.429 0-0.094-0.030-0.182-0.081-0.253l0.001 0.001-0.863-1.198 0.109-0.357 1.383-0.517c0.166-0.063 0.282-0.221 0.282-0.406 0-0.125-0.053-0.238-0.138-0.317l-0-0-1.082-1.010c0.013-0.121 0.025-0.244 0.035-0.367l1.259-0.779c0.125-0.077 0.208-0.213 0.208-0.368s-0.082-0.291-0.206-0.367l-0.002-0.001z"></path>
 </svg>
\ No newline at end of file
diff --git a/web/src/assets/images/left_nav/dashb2.svg b/web/src/assets/images/left_nav/dashb2.svg
index 43389c42b8..29819cdb66 100644
--- a/web/src/assets/images/left_nav/dashb2.svg
+++ b/web/src/assets/images/left_nav/dashb2.svg
@@ -1,56 +1,56 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 512.009 512.009" style="enable-background:new 0 0 512.009 512.009;" xml:space="preserve">
-<g>
-	<g>
-		<g>
-			<path d="M256.009,42.671c-0.002,0-0.005,0-0.007,0c-0.001,0-0.001,0-0.002,0c-0.001,0-0.002,0-0.003,0
-				c-70.671,0.003-134.648,28.637-180.967,74.935c-0.016,0.016-0.034,0.029-0.05,0.045c-0.017,0.017-0.03,0.035-0.047,0.052
-				C28.688,163.976,0.072,227.867,0.011,298.445C0.011,298.521,0,298.595,0,298.671c0,0.073,0.01,0.143,0.011,0.215
-				c0.05,60.201,20.962,117.239,58.515,162.704c4.053,4.907,10.084,7.748,16.448,7.748h95.693h170.667h95.688
-				c6.364,0,12.395-2.841,16.448-7.748c37.607-45.53,58.539-102.65,58.539-162.919C512.009,157.289,397.391,42.671,256.009,42.671z
-				 M197.707,426.671c7.376-12.754,21.165-21.333,36.96-21.333h42.667c15.795,0,29.584,8.579,36.96,21.333H197.707z M426.68,426.671
-				h-66.702c-9.472-36.807-42.88-64-82.645-64h-42.667c-39.765,0-73.173,27.193-82.645,64H85.316
-				c-23.281-30.977-37.712-67.661-41.583-106.667h62.934c11.782,0,21.333-9.551,21.333-21.333c0-11.782-9.551-21.333-21.333-21.333
-				H43.734c4.259-42.905,21.23-82.066,47.091-113.671l14.32,14.32c8.331,8.331,21.839,8.331,30.17,0
-				c8.331-8.331,8.331-21.839,0-30.17l-14.321-14.321c31.605-25.864,70.765-42.837,113.672-47.098v62.941
-				c0,11.782,9.551,21.333,21.333,21.333c11.782,0,21.333-9.551,21.333-21.333V86.396c42.906,4.259,82.068,21.232,113.676,47.096
-				l-14.325,14.325c-8.331,8.331-8.331,21.839,0,30.17c8.331,8.331,21.839,8.331,30.17,0l14.326-14.326
-				c25.867,31.607,42.842,70.771,47.103,113.677h-62.95c-11.782,0-21.333,9.551-21.333,21.333c0,11.782,9.551,21.333,21.333,21.333
-				h62.95C464.409,359.001,449.97,395.686,426.68,426.671z"/>
-			<polygon points="259.659,341.338 319.989,220.655 199.328,281.007 			"/>
-		</g>
-	</g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-</svg>
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512.009 512.009" style="enable-background:new 0 0 512.009 512.009;" xml:space="preserve">
+<g>
+	<g>
+		<g>
+			<path d="M256.009,42.671c-0.002,0-0.005,0-0.007,0c-0.001,0-0.001,0-0.002,0c-0.001,0-0.002,0-0.003,0
+				c-70.671,0.003-134.648,28.637-180.967,74.935c-0.016,0.016-0.034,0.029-0.05,0.045c-0.017,0.017-0.03,0.035-0.047,0.052
+				C28.688,163.976,0.072,227.867,0.011,298.445C0.011,298.521,0,298.595,0,298.671c0,0.073,0.01,0.143,0.011,0.215
+				c0.05,60.201,20.962,117.239,58.515,162.704c4.053,4.907,10.084,7.748,16.448,7.748h95.693h170.667h95.688
+				c6.364,0,12.395-2.841,16.448-7.748c37.607-45.53,58.539-102.65,58.539-162.919C512.009,157.289,397.391,42.671,256.009,42.671z
+				 M197.707,426.671c7.376-12.754,21.165-21.333,36.96-21.333h42.667c15.795,0,29.584,8.579,36.96,21.333H197.707z M426.68,426.671
+				h-66.702c-9.472-36.807-42.88-64-82.645-64h-42.667c-39.765,0-73.173,27.193-82.645,64H85.316
+				c-23.281-30.977-37.712-67.661-41.583-106.667h62.934c11.782,0,21.333-9.551,21.333-21.333c0-11.782-9.551-21.333-21.333-21.333
+				H43.734c4.259-42.905,21.23-82.066,47.091-113.671l14.32,14.32c8.331,8.331,21.839,8.331,30.17,0
+				c8.331-8.331,8.331-21.839,0-30.17l-14.321-14.321c31.605-25.864,70.765-42.837,113.672-47.098v62.941
+				c0,11.782,9.551,21.333,21.333,21.333c11.782,0,21.333-9.551,21.333-21.333V86.396c42.906,4.259,82.068,21.232,113.676,47.096
+				l-14.325,14.325c-8.331,8.331-8.331,21.839,0,30.17c8.331,8.331,21.839,8.331,30.17,0l14.326-14.326
+				c25.867,31.607,42.842,70.771,47.103,113.677h-62.95c-11.782,0-21.333,9.551-21.333,21.333c0,11.782,9.551,21.333,21.333,21.333
+				h62.95C464.409,359.001,449.97,395.686,426.68,426.671z"/>
+			<polygon points="259.659,341.338 319.989,220.655 199.328,281.007 			"/>
+		</g>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/web/src/assets/images/pipeline/query.svg b/web/src/assets/images/pipeline/query.svg
index 5eaefe5c15..6685f6a92a 100644
--- a/web/src/assets/images/pipeline/query.svg
+++ b/web/src/assets/images/pipeline/query.svg
@@ -1,37 +1,37 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
-	 viewBox="0 0 380 380" xml:space="preserve">
-<g>
-	<path d="M215.77,216.23h-23.969v-56.906c0-3.314-2.686-6-6-6c-3.313,0-6,2.686-6,6v62.906c0,3.313,2.687,6,6,6h29.969
-		c3.313,0,6-2.687,6-6C221.77,218.917,219.083,216.23,215.77,216.23z"/>
-	<path d="M72.102,185.826c-10.658-3.229-14.999-5.188-14.999-11.676c0-5.867,7.579-7.949,14.07-7.949
-		c4.704,0,10.122,1.458,13.482,3.629c2.783,1.797,6.497,0.999,8.296-1.784c1.798-2.783,0.999-6.497-1.784-8.295
-		c-5.299-3.423-12.96-5.55-19.994-5.55c-15.594,0-26.07,8.017-26.07,19.949c0,16.037,13.595,20.154,23.521,23.16
-		c10.963,3.32,14.144,5.094,14.099,10.498c0,5.536-7.288,7.5-13.529,7.5c-5.879,0-12.265-2.573-15.891-6.404
-		c-2.277-2.407-6.077-2.511-8.481-0.233c-2.407,2.278-2.512,6.075-0.233,8.482c5.929,6.264,15.357,10.155,24.605,10.155
-		c15.27,0,25.529-7.836,25.529-19.45C94.848,192.715,81.701,188.733,72.102,185.826z"/>
-	<path d="M133.042,154.148c-19.883,0-36.059,15.8-36.059,35.221c0,19.467,16.176,35.305,36.059,35.305
-		c3.588,0,7.052-0.522,10.325-1.482l3.266,3.851c1.187,1.399,2.877,2.119,4.579,2.119c1.371,0,2.75-0.468,3.878-1.424
-		c2.527-2.144,2.839-5.93,0.695-8.457l-1.308-1.542c8.865-6.438,14.623-16.757,14.623-28.369
-		C169.101,169.948,152.925,154.148,133.042,154.148z M146.686,208.55l-4.873-5.746c-2.142-2.526-5.928-2.837-8.457-0.695
-		c-2.527,2.144-2.839,5.93-0.695,8.457l1.754,2.068c-0.455,0.025-0.911,0.04-1.372,0.04c-13.266,0-24.059-10.455-24.059-23.305
-		c0-12.804,10.793-23.221,24.059-23.221c13.266,0,24.059,10.417,24.059,23.221C157.101,197.314,152.971,204.341,146.686,208.55z"/>
-	<path d="M368.317,46.487H11.684C5.24,46.487,0,51.73,0,58.173v263.656c0,6.442,5.24,11.684,11.684,11.684h356.634
-		c6.442,0,11.683-5.242,11.683-11.684V58.173C380,51.73,374.76,46.487,368.317,46.487z M320.868,79.771
-		c6.844,0,12.387,5.547,12.387,12.387c0,6.842-5.543,12.387-12.387,12.387c-6.839,0-12.385-5.545-12.385-12.387
-		C308.483,85.318,314.029,79.771,320.868,79.771z M283.715,79.771c6.839,0,12.386,5.547,12.386,12.387
-		c0,6.842-5.547,12.387-12.386,12.387c-6.839,0-12.387-5.545-12.387-12.387C271.328,85.318,276.876,79.771,283.715,79.771z
-		 M246.561,79.771c6.839,0,12.381,5.547,12.381,12.387c0,6.842-5.542,12.387-12.381,12.387c-6.844,0-12.387-5.545-12.387-12.387
-		C234.175,85.318,239.718,79.771,246.561,79.771z M21.27,314.01V141.424H358.73v66.774c-1.537-2.202-3.678-4.02-6.327-5.143
-		l-20.614-8.726c-1.834-0.778-3.771-1.172-5.754-1.172c-5.956,0-11.304,3.54-13.623,9.02l-1.252,2.959
-		c-9.228,0.129-18.383,2.255-26.729,6.193l-2.426-2.107c-1.175-1.018-2.498-1.841-3.932-2.447c-1.841-0.779-3.783-1.174-5.772-1.174
-		c-4.276,0-8.341,1.858-11.154,5.099l-14.671,16.915c-2.584,2.986-3.855,6.794-3.581,10.735c0.285,3.941,2.085,7.535,5.065,10.115
-		l2.417,2.098c-2.755,8.849-3.562,18.179-2.365,27.344l-2.748,1.654c-6.982,4.2-9.242,13.302-5.039,20.293L249.344,315H22.26
-		C21.714,315,21.27,314.556,21.27,314.01z M280.949,258.768c5.162-12.192,17.054-20.07,30.295-20.07
-		c4.411,0,8.722,0.878,12.813,2.61c16.697,7.072,24.529,26.408,17.461,43.105c-5.166,12.191-17.058,20.068-30.294,20.068
-		c0,0-0.001,0-0.002,0c-4.41,0-8.721-0.878-12.811-2.611c-8.089-3.424-14.36-9.793-17.658-17.935
-		C277.455,275.794,277.524,266.856,280.949,258.768z"/>
-</g>
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 380 380" xml:space="preserve">
+<g>
+	<path d="M215.77,216.23h-23.969v-56.906c0-3.314-2.686-6-6-6c-3.313,0-6,2.686-6,6v62.906c0,3.313,2.687,6,6,6h29.969
+		c3.313,0,6-2.687,6-6C221.77,218.917,219.083,216.23,215.77,216.23z"/>
+	<path d="M72.102,185.826c-10.658-3.229-14.999-5.188-14.999-11.676c0-5.867,7.579-7.949,14.07-7.949
+		c4.704,0,10.122,1.458,13.482,3.629c2.783,1.797,6.497,0.999,8.296-1.784c1.798-2.783,0.999-6.497-1.784-8.295
+		c-5.299-3.423-12.96-5.55-19.994-5.55c-15.594,0-26.07,8.017-26.07,19.949c0,16.037,13.595,20.154,23.521,23.16
+		c10.963,3.32,14.144,5.094,14.099,10.498c0,5.536-7.288,7.5-13.529,7.5c-5.879,0-12.265-2.573-15.891-6.404
+		c-2.277-2.407-6.077-2.511-8.481-0.233c-2.407,2.278-2.512,6.075-0.233,8.482c5.929,6.264,15.357,10.155,24.605,10.155
+		c15.27,0,25.529-7.836,25.529-19.45C94.848,192.715,81.701,188.733,72.102,185.826z"/>
+	<path d="M133.042,154.148c-19.883,0-36.059,15.8-36.059,35.221c0,19.467,16.176,35.305,36.059,35.305
+		c3.588,0,7.052-0.522,10.325-1.482l3.266,3.851c1.187,1.399,2.877,2.119,4.579,2.119c1.371,0,2.75-0.468,3.878-1.424
+		c2.527-2.144,2.839-5.93,0.695-8.457l-1.308-1.542c8.865-6.438,14.623-16.757,14.623-28.369
+		C169.101,169.948,152.925,154.148,133.042,154.148z M146.686,208.55l-4.873-5.746c-2.142-2.526-5.928-2.837-8.457-0.695
+		c-2.527,2.144-2.839,5.93-0.695,8.457l1.754,2.068c-0.455,0.025-0.911,0.04-1.372,0.04c-13.266,0-24.059-10.455-24.059-23.305
+		c0-12.804,10.793-23.221,24.059-23.221c13.266,0,24.059,10.417,24.059,23.221C157.101,197.314,152.971,204.341,146.686,208.55z"/>
+	<path d="M368.317,46.487H11.684C5.24,46.487,0,51.73,0,58.173v263.656c0,6.442,5.24,11.684,11.684,11.684h356.634
+		c6.442,0,11.683-5.242,11.683-11.684V58.173C380,51.73,374.76,46.487,368.317,46.487z M320.868,79.771
+		c6.844,0,12.387,5.547,12.387,12.387c0,6.842-5.543,12.387-12.387,12.387c-6.839,0-12.385-5.545-12.385-12.387
+		C308.483,85.318,314.029,79.771,320.868,79.771z M283.715,79.771c6.839,0,12.386,5.547,12.386,12.387
+		c0,6.842-5.547,12.387-12.386,12.387c-6.839,0-12.387-5.545-12.387-12.387C271.328,85.318,276.876,79.771,283.715,79.771z
+		 M246.561,79.771c6.839,0,12.381,5.547,12.381,12.387c0,6.842-5.542,12.387-12.381,12.387c-6.844,0-12.387-5.545-12.387-12.387
+		C234.175,85.318,239.718,79.771,246.561,79.771z M21.27,314.01V141.424H358.73v66.774c-1.537-2.202-3.678-4.02-6.327-5.143
+		l-20.614-8.726c-1.834-0.778-3.771-1.172-5.754-1.172c-5.956,0-11.304,3.54-13.623,9.02l-1.252,2.959
+		c-9.228,0.129-18.383,2.255-26.729,6.193l-2.426-2.107c-1.175-1.018-2.498-1.841-3.932-2.447c-1.841-0.779-3.783-1.174-5.772-1.174
+		c-4.276,0-8.341,1.858-11.154,5.099l-14.671,16.915c-2.584,2.986-3.855,6.794-3.581,10.735c0.285,3.941,2.085,7.535,5.065,10.115
+		l2.417,2.098c-2.755,8.849-3.562,18.179-2.365,27.344l-2.748,1.654c-6.982,4.2-9.242,13.302-5.039,20.293L249.344,315H22.26
+		C21.714,315,21.27,314.556,21.27,314.01z M280.949,258.768c5.162-12.192,17.054-20.07,30.295-20.07
+		c4.411,0,8.722,0.878,12.813,2.61c16.697,7.072,24.529,26.408,17.461,43.105c-5.166,12.191-17.058,20.068-30.294,20.068
+		c0,0-0.001,0-0.002,0c-4.41,0-8.721-0.878-12.811-2.611c-8.089-3.424-14.36-9.793-17.658-17.935
+		C277.455,275.794,277.524,266.856,280.949,258.768z"/>
+</g>
 </svg>
\ No newline at end of file
diff --git a/web/src/assets/images/streams/config.svg b/web/src/assets/images/streams/config.svg
index f2bc58c100..c38a6988be 100644
--- a/web/src/assets/images/streams/config.svg
+++ b/web/src/assets/images/streams/config.svg
@@ -1,31 +1,31 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
-	 viewBox="0 0 493.583 493.583" xml:space="preserve">
-<g>
-	<path d="M474.332,170.706c-3.889-49.328-26.734-94.184-64.346-126.313C376.486,15.759,333.787,0,289.761,0
-		c-54.305,0-105.654,23.649-140.869,64.89c-32.146,37.601-47.715,85.476-43.828,134.797c1.543,19.635,6.199,38.496,13.479,56.184
-		l-39.986,46.82c-9.451,11.051-8.133,27.647,2.906,37.098l4.742,4.049l-55.156,64.555c-18.525,21.684-15.953,54.283,5.73,72.809
-		c21.674,18.525,54.277,15.973,72.799-5.701l55.154-64.537l4.725,4.043c5.322,4.536,12.213,6.766,19.168,6.222
-		c6.955-0.549,13.414-3.825,17.947-9.144l40.102-46.914c13.975,3.357,28.357,5.241,42.926,5.241
-		c54.289,0,105.656-23.65,140.904-64.895C462.634,267.892,478.185,220.026,474.332,170.706z M392.974,273.448
-		c-25.869,30.253-63.527,47.605-103.375,47.605c-32.262,0-63.57-11.57-88.139-32.586c-27.602-23.551-44.359-56.455-47.201-92.635
-		c-2.842-36.185,8.578-71.305,32.146-98.872c25.85-30.253,63.508-47.606,103.355-47.606c32.264,0,63.59,11.566,88.176,32.57
-		c27.584,23.568,44.342,56.472,47.166,92.65C427.962,210.743,416.542,245.858,392.974,273.448z"/>
-	<path d="M289.699,149.575c-19.664,0-35.654,15.988-35.654,35.617c0,19.637,15.99,35.621,35.654,35.621
-		c19.635,0,35.602-15.984,35.602-35.621C325.3,165.564,309.333,149.575,289.699,149.575z"/>
-	<path d="M382.269,202.673l-12.916-7.451c0.422-3.328,1.027-6.586,1.027-10.029c0-3.436-0.605-6.695-1.027-10.022l12.916-7.468
-		c3.217-1.85,5.592-4.934,6.557-8.533c0.965-3.598,0.467-7.439-1.416-10.668l-17.092-29.595c-3.854-6.718-12.467-9.03-19.215-5.159
-		l-12.789,7.424c-5.43-4.113-11.166-7.76-17.48-10.41V96.267c0-7.775-6.295-14.054-14.07-14.054h-34.158
-		c-7.775,0-14.06,6.278-14.06,14.054v14.494c-6.348,2.65-12.066,6.297-17.463,10.41l-12.836-7.424
-		c-3.229-1.859-7.088-2.373-10.686-1.396c-3.6,0.964-6.65,3.31-8.533,6.556l-17.074,29.595c-3.889,6.717-1.578,15.323,5.141,19.201
-		l12.916,7.468c-0.416,3.327-1.012,6.587-1.012,10.022c0,3.443,0.596,6.701,1.012,10.029l-12.916,7.451
-		c-6.719,3.877-9.029,12.483-5.141,19.219l17.074,29.595c1.883,3.229,4.934,5.591,8.533,6.557c3.598,0.958,7.457,0.46,10.686-1.398
-		l12.836-7.423c5.396,4.112,11.115,7.758,17.463,10.426v14.479c0,7.773,6.285,14.054,14.06,14.054h34.158
-		c7.775,0,14.07-6.28,14.07-14.054v-14.479c6.332-2.668,12.051-6.313,17.48-10.426l12.789,7.423c3.248,1.858,7.1,2.357,10.699,1.398
-		c3.6-0.966,6.684-3.328,8.516-6.557l17.092-29.595C391.304,215.173,388.988,206.561,382.269,202.673z M289.699,237.265
-		c-28.728,0-52.105-23.356-52.105-52.072c0-28.709,23.377-52.07,52.105-52.07c28.709,0,52.053,23.361,52.053,52.07
-		C341.751,213.908,318.408,237.265,289.699,237.265z"/>
-</g>
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 493.583 493.583" xml:space="preserve">
+<g>
+	<path d="M474.332,170.706c-3.889-49.328-26.734-94.184-64.346-126.313C376.486,15.759,333.787,0,289.761,0
+		c-54.305,0-105.654,23.649-140.869,64.89c-32.146,37.601-47.715,85.476-43.828,134.797c1.543,19.635,6.199,38.496,13.479,56.184
+		l-39.986,46.82c-9.451,11.051-8.133,27.647,2.906,37.098l4.742,4.049l-55.156,64.555c-18.525,21.684-15.953,54.283,5.73,72.809
+		c21.674,18.525,54.277,15.973,72.799-5.701l55.154-64.537l4.725,4.043c5.322,4.536,12.213,6.766,19.168,6.222
+		c6.955-0.549,13.414-3.825,17.947-9.144l40.102-46.914c13.975,3.357,28.357,5.241,42.926,5.241
+		c54.289,0,105.656-23.65,140.904-64.895C462.634,267.892,478.185,220.026,474.332,170.706z M392.974,273.448
+		c-25.869,30.253-63.527,47.605-103.375,47.605c-32.262,0-63.57-11.57-88.139-32.586c-27.602-23.551-44.359-56.455-47.201-92.635
+		c-2.842-36.185,8.578-71.305,32.146-98.872c25.85-30.253,63.508-47.606,103.355-47.606c32.264,0,63.59,11.566,88.176,32.57
+		c27.584,23.568,44.342,56.472,47.166,92.65C427.962,210.743,416.542,245.858,392.974,273.448z"/>
+	<path d="M289.699,149.575c-19.664,0-35.654,15.988-35.654,35.617c0,19.637,15.99,35.621,35.654,35.621
+		c19.635,0,35.602-15.984,35.602-35.621C325.3,165.564,309.333,149.575,289.699,149.575z"/>
+	<path d="M382.269,202.673l-12.916-7.451c0.422-3.328,1.027-6.586,1.027-10.029c0-3.436-0.605-6.695-1.027-10.022l12.916-7.468
+		c3.217-1.85,5.592-4.934,6.557-8.533c0.965-3.598,0.467-7.439-1.416-10.668l-17.092-29.595c-3.854-6.718-12.467-9.03-19.215-5.159
+		l-12.789,7.424c-5.43-4.113-11.166-7.76-17.48-10.41V96.267c0-7.775-6.295-14.054-14.07-14.054h-34.158
+		c-7.775,0-14.06,6.278-14.06,14.054v14.494c-6.348,2.65-12.066,6.297-17.463,10.41l-12.836-7.424
+		c-3.229-1.859-7.088-2.373-10.686-1.396c-3.6,0.964-6.65,3.31-8.533,6.556l-17.074,29.595c-3.889,6.717-1.578,15.323,5.141,19.201
+		l12.916,7.468c-0.416,3.327-1.012,6.587-1.012,10.022c0,3.443,0.596,6.701,1.012,10.029l-12.916,7.451
+		c-6.719,3.877-9.029,12.483-5.141,19.219l17.074,29.595c1.883,3.229,4.934,5.591,8.533,6.557c3.598,0.958,7.457,0.46,10.686-1.398
+		l12.836-7.423c5.396,4.112,11.115,7.758,17.463,10.426v14.479c0,7.773,6.285,14.054,14.06,14.054h34.158
+		c7.775,0,14.07-6.28,14.07-14.054v-14.479c6.332-2.668,12.051-6.313,17.48-10.426l12.789,7.423c3.248,1.858,7.1,2.357,10.699,1.398
+		c3.6-0.966,6.684-3.328,8.516-6.557l17.092-29.595C391.304,215.173,388.988,206.561,382.269,202.673z M289.699,237.265
+		c-28.728,0-52.105-23.356-52.105-52.072c0-28.709,23.377-52.07,52.105-52.07c28.709,0,52.053,23.361,52.053,52.07
+		C341.751,213.908,318.408,237.265,289.699,237.265z"/>
+</g>
 </svg>
\ No newline at end of file
diff --git a/web/src/assets/images/streams/timeline.svg b/web/src/assets/images/streams/timeline.svg
index 64f83bb96b..74ef7584c3 100644
--- a/web/src/assets/images/streams/timeline.svg
+++ b/web/src/assets/images/streams/timeline.svg
@@ -1,5 +1,5 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12ZM3.00683 12C3.00683 16.9668 7.03321 20.9932 12 20.9932C16.9668 20.9932 20.9932 16.9668 20.9932 12C20.9932 7.03321 16.9668 3.00683 12 3.00683C7.03321 3.00683 3.00683 7.03321 3.00683 12Z" fill="#0F0F0F"/>
-<path d="M12 5C11.4477 5 11 5.44771 11 6V12.4667C11 12.4667 11 12.7274 11.1267 12.9235C11.2115 13.0898 11.3437 13.2343 11.5174 13.3346L16.1372 16.0019C16.6155 16.278 17.2271 16.1141 17.5032 15.6358C17.7793 15.1575 17.6155 14.5459 17.1372 14.2698L13 11.8812V6C13 5.44772 12.5523 5 12 5Z" fill="#0F0F0F"/>
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12ZM3.00683 12C3.00683 16.9668 7.03321 20.9932 12 20.9932C16.9668 20.9932 20.9932 16.9668 20.9932 12C20.9932 7.03321 16.9668 3.00683 12 3.00683C7.03321 3.00683 3.00683 7.03321 3.00683 12Z" fill="#0F0F0F"/>
+<path d="M12 5C11.4477 5 11 5.44771 11 6V12.4667C11 12.4667 11 12.7274 11.1267 12.9235C11.2115 13.0898 11.3437 13.2343 11.5174 13.3346L16.1372 16.0019C16.6155 16.278 17.2271 16.1141 17.5032 15.6358C17.7793 15.1575 17.6155 14.5459 17.1372 14.2698L13 11.8812V6C13 5.44772 12.5523 5 12 5Z" fill="#0F0F0F"/>
 </svg>
\ No newline at end of file
diff --git a/web/src/assets/main.css b/web/src/assets/main.css
deleted file mode 100644
index 6c7b3b4d4f..0000000000
--- a/web/src/assets/main.css
+++ /dev/null
@@ -1,39 +0,0 @@
-@import "./base.css";
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-
-  font-weight: normal;
-}
-
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-}
-
-.small-input {
-  padding-top: 8px;
-}
diff --git a/web/src/assets/styles/log-highlighting.css b/web/src/assets/styles/log-highlighting.css
index e411197a3c..462eb228c2 100644
--- a/web/src/assets/styles/log-highlighting.css
+++ b/web/src/assets/styles/log-highlighting.css
@@ -1,8 +1,8 @@
 /* Log Highlighting CSS Classes */
 /* Base highlighting classes */
 .log-highlight {
-  font-family: monospace;
-  font-size: 12px;
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
   word-break: break-word;
   display: inline;
 
@@ -33,6 +33,13 @@
   color: #9ca3af;
 
 }
+/* `.log-key`/`.log-separator` are applied to generated log HTML injected via
+   v-html (useLogsHighlighter.ts, JsonPreview.vue), so they live in this global
+   stylesheet rather than any component scope. */
+.log-key,
+.log-separator {
+  font-weight: normal;
+}
 .log-object-brace {
   color: #9ca3af;
 
@@ -93,6 +100,9 @@
   color: #6EE7B7; /* Soft mint green */
 
 }
+.dark .log-separator {
+  color: #999;
+}
 .dark .log-number {
   color: #60A5FA; /* Light blue for numbers */
 
@@ -174,8 +184,8 @@
 
 /* Special classes for performance optimization */
 .log-simple-text {
-  font-family: monospace;
-  font-size: 12px;
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
   word-break: break-word;
 
 }
diff --git a/web/src/components/AttributeValueCell.vue b/web/src/components/AttributeValueCell.vue
index 2d1ad02bb2..e1fda519ff 100644
--- a/web/src/components/AttributeValueCell.vue
+++ b/web/src/components/AttributeValueCell.vue
@@ -16,7 +16,7 @@
           <OIcon :name="isDropdownOpen ? 'expand-less' : 'expand-more'" size="xs" />
         </OButton>
       </template>
-      <div class="logs-table-list min-w-[180px]">
+      <div class="logs-table-list min-w-45">
         <slot name="dropdown" :field="field" :value="value" />
       </div>
     </ODropdown>
diff --git a/web/src/components/AutoRefreshInterval.spec.ts b/web/src/components/AutoRefreshInterval.spec.ts
index 02af90694c..d8f5e58ba9 100644
--- a/web/src/components/AutoRefreshInterval.spec.ts
+++ b/web/src/components/AutoRefreshInterval.spec.ts
@@ -40,16 +40,9 @@ describe("AutoRefreshInterval", () => {
       global: {
         plugins: [i18n, mockRouter],
         stubs: {
-          'q-btn-dropdown': {
-            template: '<div class="q-btn-dropdown"><slot /><slot name="label" /></div>'
-          },
           'OIcon': {
             template: '<div class="OIcon"></div>'
           },
-          'q-btn': {
-            template: '<button @click="$emit(\'click\')" :disabled="disable"><slot /></button>',
-            props: ['disable', 'disabled']
-          },
           OButton: {
             template: '<button :data-test="$attrs[\'data-test\']" :disabled="disabled" @click="$emit(\'click\')"><slot /><slot name="label" /></button>',
             props: ['variant', 'size', 'disabled', 'loading', 'active', 'block'],
@@ -63,13 +56,6 @@ describe("AutoRefreshInterval", () => {
           ODropdownSeparator: {
             template: '<hr />',
           },
-
-          'q-tooltip': {
-            template: '<div class="q-tooltip"><slot /></div>'
-          },
-          'q-menu': {
-            template: '<div class="q-menu"><slot /></div>'
-          }
         }
       },
     });
diff --git a/web/src/components/AutoRefreshInterval.vue b/web/src/components/AutoRefreshInterval.vue
index 301c4a0017..04f349fda3 100644
--- a/web/src/components/AutoRefreshInterval.vue
+++ b/web/src/components/AutoRefreshInterval.vue
@@ -32,7 +32,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         >
           <OIcon
             name="update"
-            :class="isAnimating ? '![animation:rotate_2s_linear_infinite] ![transform-origin:center_center] !inline-block' : ''"
+            :class="isAnimating ? 'auto-refresh-icon--spinning' : ''"
             size="sm"
           />
           <OTooltip :content="`${t('search.autoRefresh')}: ${selectedLabel}`" />
@@ -40,7 +40,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </template>
       <div class="w-75 p-2">
         <div class="flex">
-          <div class="flex flex-col w-full p-2" style="text-align: center">
+          <div class="flex flex-col w-full p-2 text-center">
             <OButton
               data-test="logs-search-off-refresh-interval"
               :variant="modelValue.toString() === '0' ? 'primary' : 'ghost'"
@@ -52,13 +52,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </OButton>
           </div>
         </div>
-        <hr class="border-0 border-t border-solid border-(--o2-border) my-0" />
+        <hr class="border-0 border-t border-solid border-border-default my-0" />
         <div v-for="(items, i) in refreshTimes" :key="'row_' + i" class="flex">
           <div
             v-for="(item, j) in items"
             :key="'col_' + i + '_' + j"
-            class="flex flex-col w-1/3 p-2"
-            style="text-align: center"
+            class="flex flex-col w-1/3 p-2 text-center"
           >
             <OButton
               :data-test="`logs-search-bar-refresh-time-${item.value}`"
@@ -100,19 +99,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               name="update"
               size="sm"
               :class="[
-                isAnimating ? '![animation:rotate_2s_linear_infinite] ![transform-origin:center_center] !inline-block' : '',
+                isAnimating ? 'auto-refresh-icon--spinning' : '',
                 isAnimating ? 'text-primary' : '',
                 'mr-0.5',
               ]"
             />
-            <div class="text-center text-[0.8125rem] leading-4">{{ selectedLabel }}</div>
+            <div class="text-center text-compact leading-4">{{ selectedLabel }}</div>
             <OIcon name="arrow-drop-down" size="sm" class="ml-0.5" />
           </div>
         </OButton>
       </template>
       <div class="w-75 p-2">
         <div class="flex">
-          <div class="flex flex-col w-full p-2" style="text-align: center">
+          <div class="flex flex-col w-full p-2 text-center">
             <OButton
               data-test="logs-search-off-refresh-interval"
               :variant="modelValue.toString() === '0' ? 'primary' : 'ghost'"
@@ -134,8 +133,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <div
             v-for="(item, j) in items"
             :key="'col_' + i + '_' + j"
-            class="flex flex-col w-1/3 p-2"
-            style="text-align: center"
+            class="flex flex-col w-1/3 p-2 text-center"
           >
             <OButton
               :data-test="`logs-search-bar-refresh-time-${item.value}`"
@@ -382,7 +380,19 @@ export default defineComponent({
 });
 </script>
 
-<style>
+<style scoped>
+/* keep(keyframes): the spinning refresh icon is used only by this component (both
+   the icon-only and the labelled dropdown trigger share this one class). The
+   `animation` is declared here rather than as a template `[animation:…]` utility
+   so Vue's scoped compiler renames the keyframe and this reference together.
+   The class lands on an OIcon root, which carries this component's scope id too.
+   `!important` is retained from the original `!`-prefixed utilities. */
+.auto-refresh-icon--spinning {
+  display: inline-block !important;
+  transform-origin: center center !important;
+  animation: rotate 2s linear infinite !important;
+}
+
 @keyframes rotate {
   0% {
     transform: rotate(0deg);
@@ -392,3 +402,4 @@ export default defineComponent({
   }
 }
 </style>
+
diff --git a/web/src/components/CodeQueryEditor.vue b/web/src/components/CodeQueryEditor.vue
index 11098cd324..ad068b0511 100644
--- a/web/src/components/CodeQueryEditor.vue
+++ b/web/src/components/CodeQueryEditor.vue
@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <div class="relative w-full h-full flex flex-col" v-bind="$attrs">
     <div
       data-test="query-editor"
-      class="logs-query-editor flex-1 min-h-0 bg-(--o2-card-bg)"
+      class="logs-query-editor flex-1 min-h-0 bg-card-glass-bg"
       ref="editorRef"
       :id="editorId"
     />
@@ -27,8 +27,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       v-if="showAiIcon && !disableAi"
       variant="sidebar-toggle"
       size="icon-toolbar"
-      class="absolute! top-2 right-2 z-10 bg-(--o2-bg-primary) border border-(--o2-border-color) transition-all duration-200 hover:bg-(--color-button-outline-hover-bg) hover:border-[var(--o2-color-primary)]"
-      :class="nlpMode ? 'bg-[var(--o2-color-primary-light)] border-[var(--o2-color-primary)]' : ''"
+      class="absolute! top-2 right-2 z-10 bg-card-glass-bg border border-card-glass-border transition-all duration-200 hover:bg-button-outline-hover-bg hover:border-accent"
+      :class="nlpMode ? 'bg-primary-100 border-accent' : ''"
       @click="toggleNlpMode"
       data-test="query-editor-ai-icon-btn"
     >
@@ -75,6 +75,7 @@ const loadMonaco = async () => {
 import { vrlLanguageDefinition } from "@/utils/query/vrlLanguageDefinition";
 
 import { useStore } from "vuex";
+import { useTheme } from "@/composables/useTheme";
 import { debounce } from "lodash-es";
 import searchState from "@/composables/useLogs/searchState";
 import { useNLQuery } from "@/composables/useNLQuery";
@@ -82,6 +83,7 @@ import { useI18n } from "vue-i18n";
 import useNotifications from "@/composables/useNotifications";
 import { getImageURL } from "@/utils/zincutils";
 import { isAuthError } from "@/utils/authErrors";
+import { getFontMono } from "@/utils/fonts";
 import OButton from "@/lib/core/Button/OButton.vue";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
@@ -177,10 +179,10 @@ export default defineComponent({
   ],
   setup(props, { emit }) {
     const store = useStore();
+    const { isDark } = useTheme();
     const { t } = useI18n();
     const { showErrorNotification } = useNotifications();
     const editorRef: any = ref();
-    // editor object is used to interact with the monaco editor instance
     let editorObj: any = null;
     // Emits the editor's content immediately instead of waiting out the change
     // debounce. Assigned when the editor is created; see `commitModelChange`.
@@ -362,11 +364,11 @@ export default defineComponent({
     ];
 
     watch(
-      () => store.state.theme,
+      () => isDark.value,
       () => {
         if (!monaco) return;
         monaco.editor.setTheme(
-          store.state.theme == "dark" ? "myCustomDarkTheme" : "myCustomTheme",
+          isDark.value ? "myCustomDarkTheme" : "myCustomTheme",
         );
       },
     );
@@ -427,7 +429,6 @@ export default defineComponent({
       const currentLanguage = props.language?.toLowerCase() || "sql";
 
       try {
-        // Get organization ID from store
         const orgId = store.state.selectedOrganization?.identifier || "default";
 
         // Create language-appropriate prompt
@@ -649,7 +650,11 @@ export default defineComponent({
       editorObj = monaco.editor.create(editorElement as HTMLElement, {
         value: props.query?.trim(),
         language: props.language,
-        theme: store.state.theme == "dark" ? "myCustomDarkTheme" : "myCustomTheme",
+        // Monaco paints its own text and ignores the CSS cascade — without this it
+        // falls back to its built-in Menlo/Monaco/Courier New stack, which differs
+        // per OS and from the rest of the app.
+        fontFamily: getFontMono(),
+        theme: isDark.value ? "myCustomDarkTheme" : "myCustomTheme",
         showFoldingControls: enableCodeFolding.value ? "always" : "never",
         folding: enableCodeFolding.value,
         wordWrap: "on",
@@ -877,11 +882,11 @@ export default defineComponent({
     );
 
     watch(
-      () => store.state.theme,
+      () => isDark.value,
       () => {
         if (!monaco) return;
         monaco.editor.setTheme(
-          store.state.theme == "dark" ? "myCustomDarkTheme" : "myCustomTheme",
+          isDark.value ? "myCustomDarkTheme" : "myCustomTheme",
         );
       },
     );
@@ -1174,7 +1179,7 @@ export default defineComponent({
 
     // Computed property for AI icon based on theme
     const aiIcon = computed(() => {
-      return store.state.theme === "dark"
+      return isDark.value
         ? getImageURL("images/common/ai_icon_dark.svg")
         : getImageURL("images/common/ai_icon_gradient.svg");
     });
@@ -1209,216 +1214,42 @@ export default defineComponent({
 });
 </script>
 
-<style>
-.monaco-editor,
-.monaco-diff-editor .synthetic-focus,
-.monaco-editor,
-.monaco-diff-editor [tabindex="0"]:focus,
-.monaco-editor,
-.monaco-diff-editor [tabindex="-1"]:focus,
-.monaco-editor,
-.monaco-diff-editor button:focus,
-.monaco-editor,
-.monaco-diff-editor input[type="button"]:focus,
-.monaco-editor,
-.monaco-diff-editor input[type="checkbox"]:focus,
-.monaco-editor,
-.monaco-diff-editor input[type="search"]:focus,
-.monaco-editor,
-.monaco-diff-editor input[type="text"]:focus,
-.monaco-editor,
-.monaco-diff-editor select:focus,
-.monaco-editor,
-.monaco-diff-editor textarea:focus {
-  outline-width: 0px;
-}
+<style scoped>
+/* keep(lib-override:monaco) — every rule below targets Monaco's own generated DOM
+   (.monaco-editor, .suggest-widget, and decoration classes injected via the
+   decorations API). These nodes are created by the library at runtime and never
+   carry the scoped data-v attribute, so they are unreachable from utilities and
+   must stay as :deep() CSS. */
 
-.logs-query-editor .monaco-editor,
-.logs-query-editor .monaco-editor .monaco-editor {
-  padding: 0px 0px 0px 0px !important;
+.logs-query-editor :deep(.monaco-editor),
+.logs-query-editor :deep(.monaco-editor .monaco-editor) {
+  padding: 0 !important;
   --vscode-focusBorder: transparent !important;
 }
 
-.logs-query-editor .monaco-editor .editor-widget .suggest-widget,
-.logs-query-editor .monaco-editor .monaco-editor .editor-widget .suggest-widget {
+/* Neutralise monaco's stray focus outline / focus-border on the mount, the real
+   inner editor, the overflow guard and the hidden focus textarea. The last three
+   are monaco-generated DOM. */
+.logs-query-editor,
+.logs-query-editor :deep(.monaco-editor),
+.logs-query-editor :deep(.overflow-guard),
+.logs-query-editor :deep(.inputarea) {
+  outline: none !important;
+  --vscode-focusBorder: transparent !important;
+}
+
+.logs-query-editor :deep(.monaco-editor .editor-widget .suggest-widget),
+.logs-query-editor :deep(.monaco-editor .monaco-editor .editor-widget .suggest-widget) {
   z-index: 9999;
   display: flex !important;
   visibility: visible !important;
 }
 
-.generate-sql-button:hover:not(.disabled):not([disabled]):not(:disabled) {
-  background: linear-gradient(135deg, #7c3aed 0%, #db2777 100%) !important;
-  box-shadow: 0 0.375rem 1.25rem 0 rgba(139, 92, 246, 0.4) !important;
-  transform: translateY(-0.0625rem) !important;
-}
-
-.generate-sql-button:active:not(.disabled):not([disabled]):not(:disabled) {
-  transform: translateY(0) !important;
-  box-shadow: 0 0.125rem 0.625rem 0 rgba(139, 92, 246, 0.3) !important;
-}
-
-/* Fade transition for button appearance */
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.2s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
-/* Streaming preview card - O2 AI Assistant message style with purple border */
-.streaming-preview-card {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 56.25rem; /* 900px - matches O2 AI Assistant max-width */
-  max-width: calc(100% - 2rem);
-  max-height: 31.25rem;
-  background: var(--o2-card-bg);
-  border-radius: 0.5rem; /* 8px - matches O2 message border-radius */
-  border: 2px solid #8b5cf6; /* O2 AI Assistant purple border */
-  padding: 0.75rem; /* 12px - matches O2 message padding */
-  z-index: 99;
-  overflow: hidden;
-}
-
-/* Light mode shadow - matches O2 AI Assistant with purple glow */
-.light-mode .streaming-preview-card {
-  box-shadow: 0 0.25rem 1rem 0 rgba(139, 92, 246, 0.2);
-}
-
-/* Dark mode shadow - matches O2 AI Assistant with purple glow */
-.dark-mode .streaming-preview-card {
-  box-shadow: 0 0.25rem 1rem 0 rgba(139, 92, 246, 0.3);
-}
-
-/* Streaming preview content - O2 AI Assistant text-block style */
-.streaming-preview-content {
-  font-family:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
-    Arial, sans-serif;
-  font-size: 0.875rem;
-  line-height: 1.6; /* Better readability for text content */
-  color: var(--o2-text-primary);
-  margin: 0;
-  padding: 1rem;
-  overflow-y: auto;
-  max-height: 30rem;
-  max-width: 100%;
-}
-
-/* Generating text with dynamic message */
-.generating-text {
-  font-size: 0.9375rem; /* 15px */
-  font-weight: 500;
-  color: var(--o2-text-primary);
-}
-
-/* Animated dots - ellipsis animation using pseudo-element */
-.animated-dots::after {
-  content: "";
-  animation: ellipsis 1.5s infinite;
-  display: inline-block;
-  width: 1.5em;
-  text-align: left;
-  font-size: inherit;
-  font-weight: inherit;
-  font-family: inherit;
-  color: inherit;
-  line-height: inherit;
-}
-
-@keyframes ellipsis {
-  0% {
-    content: "";
-  }
-  25% {
-    content: ".";
-  }
-  50% {
-    content: "..";
-  }
-  75%,
-  100% {
-    content: "...";
-  }
-}
-
-/* Code blocks within streaming preview */
-.streaming-preview-content :deep(pre),
-.streaming-preview-content :deep(code) {
-  font-family: "Monaco", "Menlo", "Ubuntu Mono", "Courier New", monospace;
-  white-space: pre-wrap;
-  word-break: break-word;
-  overflow-wrap: break-word;
-  line-height: 1.4;
-  padding: 0.5rem;
-  margin: 0.25rem 0;
-  border-radius: 0.25rem;
-  display: block;
-  max-width: 100%;
-  overflow-x: auto;
-}
-
-/* Lists within streaming preview */
-.streaming-preview-content :deep(ol) {
-  list-style-type: decimal;
-  padding-left: 1.5em;
-  margin: 0.5em 0;
-}
-
-.streaming-preview-content :deep(ul) {
-  list-style-type: disc;
-  padding-left: 1.5em;
-  margin: 0.5em 0;
-}
-
-.streaming-preview-content :deep(li) {
-  margin: 0.25em 0;
-}
-
-/* Paragraphs within streaming preview */
-.streaming-preview-content :deep(p) {
-  margin: 0.5em 0;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  word-break: break-word;
-  max-width: 100%;
-}
-
-/* Slide up transition for streaming preview - centered */
-.slide-up-enter-active,
-.slide-up-leave-active {
-  transition: all 0.3s ease;
-}
-
-.slide-up-enter-from {
-  opacity: 0;
-  transform: translate(-50%, -50%) scale(0.95);
-}
-
-.slide-up-leave-to {
-  opacity: 0;
-  transform: translate(-50%, -50%) scale(0.98);
-}
-
-@keyframes typing-cursor {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.85;
-  }
-}
-
-
-.highlight-error {
-  background-color: rgba(255, 0, 0, 0.1);
+/* Error decoration — class name is handed to monaco.deltaDecorations(), so the
+   element only ever exists inside Monaco's view-lines. */
+.logs-query-editor :deep(.highlight-error) {
+  background-color: color-mix(in srgb, var(--color-status-negative) 10%, transparent);
   text-decoration: underline;
-  text-decoration-color: red;
+  text-decoration-color: var(--color-status-negative);
 }
 </style>
diff --git a/web/src/components/CommunitySlackInvite.vue b/web/src/components/CommunitySlackInvite.vue
index 92c8c60731..0ea78f934c 100644
--- a/web/src/components/CommunitySlackInvite.vue
+++ b/web/src/components/CommunitySlackInvite.vue
@@ -153,7 +153,7 @@ const joinSlack = () => {
       <!-- Header: Slack badge, title to its right, close button on the far right -->
       <div class="flex items-start gap-3">
         <div
-          class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-primary-50"
+          class="flex h-12 w-12 shrink-0 items-center justify-center rounded-default bg-primary-50"
           aria-hidden="true"
         >
           <svg
@@ -201,7 +201,7 @@ const joinSlack = () => {
 
       <p
         data-test="community-slack-invite-description"
-        class="text-[var(--o2-text-secondary)]"
+        class="text-text-secondary"
       >
         {{ t("communitySlackInvite.description") }}
       </p>
@@ -226,7 +226,7 @@ const joinSlack = () => {
           >
             <path d="M20 6 9 17l-5-5" />
           </svg>
-          <span class="text-[var(--o2-text-secondary)]">{{
+          <span class="text-text-secondary">{{
             benefit
           }}</span>
         </li>
@@ -235,14 +235,14 @@ const joinSlack = () => {
       <!-- Social proof — generic avatar stack, no fabricated counts -->
       <div
         data-test="community-slack-invite-members"
-        class="flex items-center gap-3 rounded-lg bg-surface-panel px-3 py-2.5"
+        class="flex items-center gap-3 rounded-default bg-surface-panel px-3 py-2.5"
       >
         <div class="flex items-center" aria-hidden="true">
           <span
             v-for="(bg, i) in avatarBgClasses"
             :key="i"
             :class="[
-              'flex h-7 w-7 items-center justify-center rounded-full text-white ring-2 ring-surface-panel',
+              'flex h-7 w-7 items-center justify-center rounded-full text-text-inverse ring-2 ring-surface-panel',
               bg,
               i > 0 ? '-ml-2' : '',
             ]"
diff --git a/web/src/components/ConfirmDialog.spec.ts b/web/src/components/ConfirmDialog.spec.ts
index b965053f4d..ec448ff7c2 100644
--- a/web/src/components/ConfirmDialog.spec.ts
+++ b/web/src/components/ConfirmDialog.spec.ts
@@ -75,7 +75,7 @@ const ODialogStub = {
   `,
 };
 
-// Stub OBanner — the component ConfirmDialog uses OBanner (not q-banner).
+// Stub OBanner — the component ConfirmDialog uses OBanner (not a raw banner element).
 // Render it with role="alert" (matching OBanner's warning variant behaviour)
 // so tests can locate it semantically via role query.
 const OBannerStub = {
diff --git a/web/src/components/CopyContent.vue b/web/src/components/CopyContent.vue
index eb71decf53..1aef08bd88 100644
--- a/web/src/components/CopyContent.vue
+++ b/web/src/components/CopyContent.vue
@@ -15,7 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="relative rounded-lg overflow-hidden copy-content-block" :class="store.state.theme === 'dark' ? 'bg-[rgba(255,255,255,0.06)]' : 'bg-[rgba(0,0,0,0.05)]'">
+  <div class="relative rounded-default overflow-hidden copy-content-block bg-surface-subtle">
     <div class="absolute top-2 right-2 z-10">
       <OButton
         data-test="rum-copy-btn"
diff --git a/web/src/components/CustomDateTimePicker.spec.ts b/web/src/components/CustomDateTimePicker.spec.ts
index ba298ccb50..81cbb41f0f 100644
--- a/web/src/components/CustomDateTimePicker.spec.ts
+++ b/web/src/components/CustomDateTimePicker.spec.ts
@@ -39,14 +39,7 @@ describe('CustomDateTimePicker.vue', () => {
       props,
       global: {
         plugins: [currentStore],
-        stubs: {
-          'q-btn': true,
-          'q-menu': true,
-          'q-tab-panels': true,
-          'q-tab-panel': true,
-          'q-input': true,
-          'q-select': true
-        }
+        stubs: {}
       }
     });
   };
@@ -231,24 +224,24 @@ describe('CustomDateTimePicker.vue', () => {
   });
 
   describe('Theme and Styling', () => {
-    it('computedClass returns dark mode class for dark theme', () => {
+    it('computedClass returns semantic surface class for dark theme', () => {
       wrapper = createWrapper(
-        { changeStyle: true }, 
+        { changeStyle: true },
         { theme: 'dark' }
       );
       const vm = wrapper.vm as any;
-      
-      expect(vm.computedClass).toBe('bg-[#2a2828]! text-white!');
+
+      expect(vm.computedClass).toBe('bg-surface-base!');
     });
 
-    it('computedClass returns light mode class for light theme', () => {
+    it('computedClass returns semantic surface class for light theme', () => {
       wrapper = createWrapper(
-        { changeStyle: true }, 
+        { changeStyle: true },
         { theme: 'light' }
       );
       const vm = wrapper.vm as any;
-      
-      expect(vm.computedClass).toBe('bg-white!');
+
+      expect(vm.computedClass).toBe('bg-surface-base!');
     });
 
     it('computedClass returns empty string when changeStyle is false', () => {
diff --git a/web/src/components/CustomDateTimePicker.vue b/web/src/components/CustomDateTimePicker.vue
index 387247c232..c2c0d07f40 100644
--- a/web/src/components/CustomDateTimePicker.vue
+++ b/web/src/components/CustomDateTimePicker.vue
@@ -8,7 +8,7 @@
         }"
         data-test="date-time-btn"
         variant="outline"
-        class="h-full rounded-[3px] py-0 px-[5px] text-xs min-w-auto bg-[rgba(89,96,178,0.2)]!"
+        class="h-full rounded-default py-0 px-1.25 text-xs min-w-auto bg-[rgba(89,96,178,0.2)]!"
         :class="changeStyle ? computedClass : 'h-8!'"
         :disabled="isFirstEntry"
       >
@@ -23,13 +23,13 @@
         </template>
       </OButton>
     </template>
-    <div class="date-time-dialog w-[341px] z-[10001] max-h-[600px]">
+    <div class="date-time-dialog w-85.25 z-[10001] max-h-150">
       <div class="flex justify-between">
         <OTabPanels v-model="picker.activeTab">
           <OTabPanel name="relative">
             <div class="date-time-table relative flex flex-col">
               <div
-                class="relative-row px-3 py-2 flex items-center border-b border-[var(--o2-border)]"
+                class="relative-row [&>*]:mr-1.5 px-3 py-2 flex items-center border-b border-border-default"
                 v-for="(period, periodIndex) in relativePeriods"
                 :key="'date_' + periodIndex"
               >
@@ -41,17 +41,18 @@
                   <OButton
                     :data-test="`date-time-relative-${item}-${period.value}-btn`"
                     variant="ghost"
+                    class="h-8! w-8! font-bold! disabled:opacity-35"
                     :class="
                       isSelected(item, period.value)
-                        ? 'rp-selector-selected'
-                        : 'rp-selector'
+                        ? 'bg-button-primary! text-button-primary-foreground!'
+                        : 'bg-[color-mix(in_srgb,var(--color-text-heading)_7%,transparent)]!'
                     "
                     @click="setRelativeDate(period, item)"
                     >{{ item }}</OButton
                   >
                 </div>
               </div>
-              <div class="relative-row px-3 py-2 flex items-center border-b border-[var(--o2-border)]">
+              <div class="relative-row [&>*]:mr-1.5 px-3 py-2 flex items-center border-b border-border-default">
                 <div class="text-sm font-semibold min-w-18.75">Custom</div>
                 <div class="flex gap-2">
                   <div class="flex flex-col w-20">
@@ -92,7 +93,6 @@ import OInput from "@/lib/forms/Input/OInput.vue";
 import OSelect from "@/lib/forms/Select/OSelect.vue";
 import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
 import { ref, reactive, watch, computed } from "vue";
-import { useStore } from "vuex";
 
 // Define props to receive the value (offset) from parent
 const props = defineProps({
@@ -113,8 +113,6 @@ const props = defineProps({
 
 const emit = defineEmits(["update:modelValue"]);
 
-const store = useStore();
-
 const picker = reactive({
   activeTab: "relative",
   showMenu: false,
@@ -192,7 +190,7 @@ const setRelativeDate = (period, item) => {
   emit("update:modelValue", `${item}${period.value}`);
 };
 
-// Function to update custom period when selecting from q-select
+// Function to update custom period when selecting from the select
 const updateCustomPeriod = (newPeriod) => {
   picker.data.selectedDate.relative.label = getPeriodLabelFromValue(newPeriod);
   emit(
@@ -227,11 +225,7 @@ const getPeriodLabel = () => {
 };
 
 const computedClass = computed(() => {
-  return props.changeStyle
-    ? store.state.theme === "dark"
-      ? "bg-[#2a2828]! text-white!"
-      : "bg-white!"
-    : "";
+  return props.changeStyle ? "bg-surface-base!" : "";
 });
 </script>
 
diff --git a/web/src/components/DatabaseDeprecationBanner.spec.ts b/web/src/components/DatabaseDeprecationBanner.spec.ts
index c179eea08d..8b379257ab 100644
--- a/web/src/components/DatabaseDeprecationBanner.spec.ts
+++ b/web/src/components/DatabaseDeprecationBanner.spec.ts
@@ -268,7 +268,9 @@ describe("DatabaseDeprecationBanner", () => {
 
     await wrapper.vm.$nextTick();
 
-    expect(wrapper.find(".light-stream-container").exists()).toBe(true);
+    // Theming is now global (`.dark` on <html>), not a per-element class, so
+    // the banner renders the same regardless of theme.
+    expect(wrapper.find(".feature-card").exists()).toBe(true);
   });
 
   it("should apply dark theme class", async () => {
@@ -289,7 +291,9 @@ describe("DatabaseDeprecationBanner", () => {
 
     await wrapper.vm.$nextTick();
 
-    expect(wrapper.find(".dark-stream-container").exists()).toBe(true);
+    // Theming is now global (`.dark` on <html>), not a per-element class, so
+    // the banner renders the same regardless of theme.
+    expect(wrapper.find(".feature-card").exists()).toBe(true);
   });
 
   it("should handle invalid localStorage data gracefully", async () => {
diff --git a/web/src/components/DatabaseDeprecationBanner.vue b/web/src/components/DatabaseDeprecationBanner.vue
index 9c3a5f3638..47dd3a2a86 100644
--- a/web/src/components/DatabaseDeprecationBanner.vue
+++ b/web/src/components/DatabaseDeprecationBanner.vue
@@ -17,7 +17,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div
     class="feature-card mb-3"
-    :class="store.state.theme === 'dark' ? 'dark-stream-container' : 'light-stream-container'"
     v-if="showDeprecationWarning"
     role="region"
     aria-label="MySQL deprecation warning"
@@ -26,14 +25,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <div class="flex items-center">
       <div class="flex flex-col">
         <span
-          class="text-base font-semibold leading-6 text-[var(--o2-text-primary)]"
+          class="text-base font-semibold leading-6 text-text-heading"
           data-test="database-deprecation-banner-title"
         >
           ⚠️ MySQL support is DEPRECATED and will be removed in future.
         </span>
         <br />
         <span
-          class="text-sm font-normal leading-5 text-[var(--o2-text-secondary)]"
+          class="text-sm font-normal leading-5 text-text-secondary"
           data-test="database-deprecation-banner-subtitle"
         >
           Please migrate to PostgreSQL to ensure continued support.
diff --git a/web/src/components/DateTime.spec.ts b/web/src/components/DateTime.spec.ts
index 01a326c613..565d214075 100644
--- a/web/src/components/DateTime.spec.ts
+++ b/web/src/components/DateTime.spec.ts
@@ -73,27 +73,7 @@ describe("DateTime Component", () => {
         provide: {
           store,
         },
-        stubs: {
-          'q-btn': true,
-          'q-menu': true,
-          'q-separator': true,
-          'q-select': true,
-          'q-input': true,
-          'q-date': true,
-          'q-time': true,
-          'q-card': true,
-          'q-card-section': true,
-          'q-card-actions': true,
-          'q-tabs': true,
-          'q-tab': true,
-          'q-tab-panels': true,
-          'q-tab-panel': true,
-          'q-item': true,
-          'q-item-section': true,
-          'q-item-label': true,
-          'q-list': true,
-          'q-tooltip': true
-        }
+        stubs: {}
       },
     });
   };
diff --git a/web/src/components/DateTime.vue b/web/src/components/DateTime.vue
index 17d4999b37..a7d997ba04 100644
--- a/web/src/components/DateTime.vue
+++ b/web/src/components/DateTime.vue
@@ -35,7 +35,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :class="{
             [selectedType + 'type']: !disableRelative,
             hideRelative: disableRelative,
-            'min-w-[286px]': !disableRelative && selectedType === 'absolute',
+            'min-w-71.5': !disableRelative && selectedType === 'absolute',
             'w-fit': disableRelative,
           }"
           :disabled="disable"
@@ -43,7 +43,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         >
           <span class="date-time-label font-semibold flex-1 text-left">{{ triggerLabel }}</span>
           <template #icon-right
-            ><OIcon name="arrow-drop-down" size="sm" class="date-time-arrow transition-transform duration-250 ml-auto text-[18px]!"
+            ><OIcon name="arrow-drop-down" size="sm" class="date-time-arrow transition-transform duration-250 ml-auto text-lg!"
           /></template>
         </OButton>
       </template>
@@ -75,7 +75,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <OTabPanel v-if="!disableRelative" name="relative">
             <div class="date-time-table relative flex flex-col">
               <div
-                class="relative-row flex items-center border-b border-(--o2-border) pl-3 py-2"
+                class="relative-row [&>*]:mr-1.5 flex items-center border-b border-border-default pl-3 py-2"
                 v-for="(period, index) in relativePeriods"
                 :key="'date_' + index"
               >
@@ -93,12 +93,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       queryRangeRestrictionInHour > 0
                     "
                     :data-test="`date-time-relative-${item}-${period.value}-btn`"
+                    class="h-8! w-8! font-bold! disabled:opacity-35"
                     :class="
                       selectedType == 'relative' &&
                       relativePeriod == period.value &&
                       relativeValue == item
-                        ? 'rp-selector-selected'
-                        : `rp-selector ${relativePeriod}`
+                        ? 'bg-button-primary! text-button-primary-foreground!'
+                        : `bg-[color-mix(in_srgb,var(--color-text-heading)_7%,transparent)]! ${relativePeriod}`
                     "
                     variant="ghost"
                     size="xs"
@@ -121,7 +122,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </div>
               </div>
 
-              <div class="relative-row flex items-center border-b border-(--o2-border) px-3 py-2">
+              <div class="relative-row [&>*]:mr-1.5 flex items-center border-b border-border-default px-3 py-2">
                 <div class="text-sm font-semibold min-w-18.75">{{ t("common.custom") }}</div>
                 <OTooltip
                   side="right"
@@ -180,14 +181,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   @update:end-date="selectedDate.to = $event"
                 />
               </div>
-              <div class="pr-6 pl-6 text-[0.625rem]">{{ t("common.datetimeMessage") }}</div>
+              <div class="pr-6 pl-6 text-3xs">{{ t("common.datetimeMessage") }}</div>
               <OSeparator v-if="!disableRelative" class="my-2" />
 
               <table v-if="!hideRelativeTime" class="px-3 w-[calc(100%-0.8rem)] mx-[0.4rem] mt-2 mb-[0.3rem] startEndTime">
                 <tbody>
                   <tr>
-                    <td class="label o-input-label pr-1.5 text-xs font-semibold w-1/2">Start time</td>
-                    <td class="label o-input-label pl-1.5 text-xs font-semibold w-1/2">End time</td>
+                    <td class="label o-input-label text-compact font-medium leading-tight text-input-label-text pr-1.5 w-1/2">Start time</td>
+                    <td class="label o-input-label text-compact font-medium leading-tight text-input-label-text pl-1.5 w-1/2">End time</td>
                   </tr>
                   <tr>
                     <td class="pr-1.5 w-1/2">
@@ -490,17 +491,10 @@ export default defineComponent({
 
     /**
      * The label as of the last APPLY, which is what the trigger button shows.
-     *
-     * `getDisplayValue` reads the picker's *pending* selection — the refs that
-     * clicking "Past 6 Hours" mutates on the spot. With `autoApply` that is also
-     * the applied range, so the two never disagree. WITHOUT it (dashboards, the
-     * metrics explorer) a selection only takes effect when the user presses
-     * Apply, so binding the trigger to the pending label made the button
-     * advertise a window that nothing was querying yet: pick "Past 6 Hours",
-     * don't apply, and the button reads 6h while the panels are still on 15m.
-     *
-     * So the trigger renders this instead: the range that is actually in force.
-     * Every path that genuinely applies a range stamps it via `markApplied`.
+     * With `autoApply` off, a selection only takes effect when the user presses
+     * Apply, so the trigger renders the range actually in force rather than the
+     * pending selection in `getDisplayValue`. Every path that applies a range
+     * stamps it via `markApplied`.
      */
     const appliedDisplayValue = ref("");
 
@@ -716,10 +710,8 @@ export default defineComponent({
      * Promote the pending selection to the applied one, so the trigger button
      * starts advertising it. Called from every path that actually puts a range
      * into force — Apply, `refresh()`, mount, and the parent-invoked setters.
-     * Deliberately NOT called from `setRelativeDate` / `onCustomPeriodSelect` /
-     * the popup's absolute inputs when `autoApply` is off: those are pending
-     * until the user presses Apply, and that is exactly the gap the trigger was
-     * lying about.
+     * NOT called from `setRelativeDate` / `onCustomPeriodSelect` / the popup's
+     * absolute inputs when `autoApply` is off: those stay pending until Apply.
      */
     const markApplied = () => {
       appliedDisplayValue.value = getDisplayValue.value;
@@ -769,8 +761,6 @@ export default defineComponent({
 
       selectedType.value = dateType;
       markProgrammaticDateChange();
-      // A parent-invoked range (chart brush-zoom, saved view) is applied by the
-      // act of setting it — not left pending on an Apply the user never sees.
       markApplied();
     };
 
@@ -1288,12 +1278,3 @@ export default defineComponent({
 });
 </script>
 
-<style>
-.date-time-button.isOpen .date-time-arrow {
-  transform: rotate(180deg);
-}
-
-.date-time-table .relative-row > * {
-  margin-right: 6px;
-}
-</style>
diff --git a/web/src/components/DateTimePicker.vue b/web/src/components/DateTimePicker.vue
deleted file mode 100644
index 08da8576b8..0000000000
--- a/web/src/components/DateTimePicker.vue
+++ /dev/null
@@ -1,385 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <ODropdown v-model:open="menuOpen" side="bottom" align="start">
-    <template #trigger>
-      <OButton
-        id="date-time-button"
-        ref="datetimeBtn"
-        data-cy="date-time-button"
-        variant="outline"
-        class="date-time-button h-[30px] min-h-[30px] rounded-[3px] py-0 px-[5px] min-w-auto justify-start!"
-        icon-left="schedule"
-      >
-        <span class="date-time-label font-semibold flex-1 text-left">{{ displayValue }}</span>
-        <template #icon-right
-          ><OIcon name="arrow-drop-down" size="sm" class="date-time-arrow ml-auto transition [transition:transform_0.25s_ease]"
-        /></template>
-      </OButton>
-    </template>
-    <div id="date-time-menu" class="date-time-dialog w-[325px]">
-      <div class="flex justify-evenly py-2">
-        <OButton
-          class="w-38.5"
-          :variant="
-            data.selectedDate.tab === 'relative' ? 'primary' : 'ghost-primary'
-          "
-          size="sm"
-          @click="data.selectedDate.tab = 'relative'"
-        >
-          {{ t("common.datetimeRelative") }}
-        </OButton>
-        <OSeparator vertical class="my-2" />
-        <OButton
-          class="w-38.5"
-          :variant="
-            data.selectedDate.tab === 'absolute' ? 'primary' : 'ghost-primary'
-          "
-          size="sm"
-          @click="data.selectedDate.tab = 'absolute'"
-        >
-          {{ t("common.datetimeAbsolute") }}
-        </OButton>
-      </div>
-      <OSeparator />
-      <OTabPanels v-model="data.selectedDate.tab" animated>
-        <OTabPanel name="relative">
-          <div class="date-time-table relative flex flex-col">
-            <div
-              class="relative-row px-3 py-2 flex items-center border-b border-[var(--o2-border)]"
-              v-for="(period, index) in relativePeriods"
-              :key="'date_' + index"
-            >
-              <div class="text-sm font-semibold min-w-18.75">
-                {{ period.value }}
-              </div>
-              <div
-                v-for="(item, item_index) in (relativeDates as any)[
-                  period.value
-                ]"
-                :key="item"
-              >
-                <OButton
-                  :class="
-                    data.selectedDate.tab == 'relative' &&
-                    data.selectedDate.relative.period.value == period.value &&
-                    data.selectedDate.relative.value == item
-                      ? 'rp-selector-selected'
-                      : `rp-selector ${data.selectedDate.relative.period.value}`
-                  "
-                  variant="ghost"
-                  size="xs"
-                  @click="setRelativeDate(period, item)"
-                  :key="'period_' + item_index"
-                  >{{ item }}</OButton
-                >
-              </div>
-            </div>
-
-            <div class="relative-row px-3 py-2 flex items-center border-b border-[var(--o2-border)]">
-              <div class="text-sm font-semibold min-w-18.75">Custom</div>
-
-              <div class="flex gap-2 flex-1 min-w-0">
-                <div class="flex flex-col w-20">
-                  <OInput
-                    v-model="data.selectedDate.relative.value"
-                    type="number"
-                    :min="1"
-                    @change="calculateMaxValue"
-                  />
-                </div>
-                <div class="flex flex-col flex-1 min-w-0">
-                  <OSelect
-                    v-model="data.selectedDate.relative.period"
-                    :options="relativePeriods"
-                    @update:model-value="onCustomPeriodSelect"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </OTabPanel>
-        <OTabPanel name="absolute">
-          <div class="date-time-table flex flex-col">
-            <ODateRangeCalendar
-              :start-date="data.selectedDate.absolute.date.from"
-              :end-date="data.selectedDate.absolute.date.to"
-              :max-date="calendarMaxDate"
-              @update:start-date="data.selectedDate.absolute.date.from = $event"
-              @update:end-date="data.selectedDate.absolute.date.to = $event"
-            />
-            <div class="pr-6 pl-6 text-[0.625rem] text-(--o2-text-secondary)">{{ t("common.datetimeMessage") }}</div>
-            <OSeparator class="my-2" />
-
-            <table class="px-3 startEndTime w-[calc(100%-0.8rem)] mx-[0.4rem] mt-2 mb-[0.3rem]">
-              <tr>
-                <td class="label w-1/2 text-xs font-semibold">{{ t("common.startTime") }}</td>
-                <td class="label w-1/2 text-xs font-semibold">{{ t("common.endTime") }}</td>
-              </tr>
-              <tr>
-                <td class="w-1/2">
-                  <OTime
-                    class="w-full"
-                    v-model="data.selectedDate.absolute.startTime"
-                  />
-                </td>
-                <td class="w-1/2">
-                  <OTime
-                    class="w-full"
-                    v-model="data.selectedDate.absolute.endTime"
-                  />
-                </td>
-              </tr>
-            </table>
-          </div>
-        </OTabPanel>
-      </OTabPanels>
-    </div>
-  </ODropdown>
-</template>
-
-<script lang="ts">
-// @ts-nocheck
-import OTabPanels from "@/lib/navigation/Tabs/OTabPanels.vue";
-import OTabPanel from "@/lib/navigation/Tabs/OTabPanel.vue";
-import OButton from "@/lib/core/Button/OButton.vue";
-import OIcon from "@/lib/core/Icon/OIcon.vue";
-import OInput from "@/lib/forms/Input/OInput.vue";
-import OSelect from "@/lib/forms/Select/OSelect.vue";
-import OTime from "@/lib/forms/Time/OTime.vue";
-import ODateRangeCalendar from "@/lib/forms/DateTimeRange/ODateRangeCalendar.vue";
-import OSeparator from "@/lib/core/Separator/OSeparator.vue";
-import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
-import { ref, defineComponent, reactive, watch, computed } from "vue";
-import { getImageURL } from "../utils/zincutils";
-import { isEqual } from "lodash-es";
-import { useI18n } from "vue-i18n";
-
-export default defineComponent({
-  name: "DateTimePicker",
-  components: {
-    OSeparator,
-    OTabPanels,
-    OTabPanel,
-    OButton,
-    OIcon,
-    OInput,
-    OSelect,
-    OTime,
-    ODateRangeCalendar,
-    ODropdown,
-  },
-  props: {
-    modelValue: {
-      type: Object,
-      default: () => ({
-        tab: "relative",
-        relative: {
-          period: { label: "Minutes", value: "Minutes" },
-          value: 15,
-        },
-        absolute: {
-          date: {
-            from: new Date().toLocaleDateString("en-ZA"),
-            to: new Date().toLocaleDateString("en-ZA"),
-          },
-          startTime: "00:00",
-          endTime: "23:59",
-        },
-      }),
-    },
-  },
-  emits: ["update:modelValue"],
-
-  setup(props, { emit }) {
-    const datetimeBtn = ref();
-    const menuOpen = ref(false);
-    const { t } = useI18n();
-
-    // v-model computed value which is used for the getvalue and setvalue for the props
-    const selectedDateEmitValue = computed({
-      get() {
-        return props.modelValue;
-      },
-      set(value) {
-        emit("update:modelValue", value);
-      },
-    });
-
-    // when the props value is changed copy in to the data.selectedDate
-    // because data.selectedDate has actual value
-    watch(selectedDateEmitValue, () => {
-      Object.assign(
-        data.selectedDate,
-        JSON.parse(JSON.stringify(props.modelValue)),
-      );
-    });
-
-    const relativePeriods = [
-      { label: "Minutes", value: "Minutes" },
-      { label: "Hours", value: "Hours" },
-      { label: "Days", value: "Days" },
-      { label: "Weeks", value: "Weeks" },
-      { label: "Months", value: "Months" },
-    ];
-
-    const relativeDates = {
-      Minutes: [1, 5, 10, 15, 30, 45],
-      Hours: [1, 2, 3, 6, 8, 12],
-      Days: [1, 2, 3, 4, 5, 6],
-      Weeks: [1, 2, 3, 4, 5, 6],
-      Months: [1, 2, 3, 4, 5, 6],
-    };
-
-    // Internal date object, who is containing actual value
-    const data = reactive({
-      selectedDate: JSON.parse(JSON.stringify(props.modelValue)),
-    });
-
-    // this method set the value of date when the relative tab is selected
-    const setRelativeDate = (period: any, value: any) => {
-      data.selectedDate.tab = "relative";
-      data.selectedDate.relative.period = period;
-      data.selectedDate.relative.value = value;
-      menuOpen.value = false;
-    };
-
-    const onCustomPeriodSelect = () => {
-      data.selectedDate.relative.value = 1;
-    };
-
-    // change the actual date object based on selected tab.
-    const displayValue = computed(() => {
-      if (data.selectedDate.tab === "relative") {
-        return `${data.selectedDate.relative.value} ${data.selectedDate.relative.period.label}`;
-      } else {
-        if (data.selectedDate.absolute.date != null) {
-          if (typeof data.selectedDate.absolute.date != "object") {
-            if (data.selectedDate.absolute.date != "") {
-              data.selectedDate.absolute.date = {
-                from: data.selectedDate.absolute.date,
-                to: data.selectedDate.absolute.date,
-              };
-            } else {
-              const todayDate = new Date().toLocaleDateString("en-ZA");
-              data.selectedDate.absolute.date = {
-                from: todayDate,
-                to: todayDate,
-              };
-            }
-          }
-
-          return `${data.selectedDate.absolute.date.from} ${data.selectedDate.absolute.startTime} - ${data.selectedDate.absolute.date.to} ${data.selectedDate.absolute.endTime}`;
-        } else {
-          const todayDate = new Date().toLocaleDateString("en-ZA");
-          data.selectedDate.absolute.date = {
-            from: todayDate,
-            to: todayDate,
-          };
-          return `${todayDate} ${data.selectedDate.absolute.startTime} - ${todayDate} ${data.selectedDate.absolute.endTime}`;
-        }
-      }
-    });
-
-    const calculateMaxValue = () => {
-      if (
-        data.selectedDate.relative.period.value == "Minutes" &&
-        data.selectedDate.relative.value > 60
-      ) {
-        data.selectedDate.relative.value = 60;
-        return false;
-      } else if (
-        data.selectedDate.relative.period.value == "Hours" &&
-        data.selectedDate.relative.value > 24
-      ) {
-        data.selectedDate.relative.value = 24;
-        return false;
-      } else if (
-        data.selectedDate.relative.period.value == "Days" &&
-        data.selectedDate.relative.value > 31
-      ) {
-        data.selectedDate.relative.value = 31;
-        return false;
-      } else if (
-        data.selectedDate.relative.period.value == "Weeks" &&
-        data.selectedDate.relative.value > 6
-      ) {
-        data.selectedDate.relative.value = 6;
-        return false;
-      } else if (
-        data.selectedDate.relative.period.value == "Months" &&
-        data.selectedDate.relative.value > 6
-      ) {
-        data.selectedDate.relative.value = 6;
-        return false;
-      }
-    };
-
-    // set watcher on date selected variable.
-    // when, the old value and new value is not same at that time copy the new value in selectedDateEmit
-    watch(
-      data.selectedDate,
-      () => {
-        if (!isEqual(selectedDateEmitValue.value, data.selectedDate)) {
-          updateEmitValue();
-        }
-      },
-      { deep: true },
-    );
-
-    const updateEmitValue = () => {
-      selectedDateEmitValue.value = JSON.parse(
-        JSON.stringify(data.selectedDate),
-      );
-    };
-
-    // on the initial call emit the value once
-    updateEmitValue();
-
-    return {
-      t,
-      relativePeriods,
-      relativeDates,
-      data,
-      setRelativeDate,
-      onCustomPeriodSelect,
-      datetimeBtn,
-      menuOpen,
-      displayValue,
-      calculateMaxValue,
-      getImageURL,
-      calendarMaxDate: computed(() => {
-        const today = new Date();
-        const y = today.getFullYear();
-        const m = String(today.getMonth() + 1).padStart(2, "0");
-        const d = String(today.getDate()).padStart(2, "0");
-        return `${y}/${m}/${d}`;
-      }),
-    };
-  },
-});
-</script>
-
-<style>
-.date-time-button.isOpen .date-time-arrow {
-  transform: rotate(180deg);
-}
-
-.date-time-table .relative-row > * {
-  margin-right: 6px;
-}
-</style>
diff --git a/web/src/components/EnterpriseUpgradeDialog.spec.ts b/web/src/components/EnterpriseUpgradeDialog.spec.ts
index a33e0707f4..bbe4ceaa67 100644
--- a/web/src/components/EnterpriseUpgradeDialog.spec.ts
+++ b/web/src/components/EnterpriseUpgradeDialog.spec.ts
@@ -131,9 +131,6 @@ const createWrapper = (props: Record<string, any> = {}) =>
           template: '<i data-test-stub="OIcon" :data-name="name"></i>',
           props: ["name", "size"],
         },
-        "q-tooltip": {
-          template: '<div data-test-stub="q-tooltip"><slot /></div>',
-        },
       },
     },
   });
diff --git a/web/src/components/EnterpriseUpgradeDialog.vue b/web/src/components/EnterpriseUpgradeDialog.vue
index 383e3527ac..6f4a6303aa 100644
--- a/web/src/components/EnterpriseUpgradeDialog.vue
+++ b/web/src/components/EnterpriseUpgradeDialog.vue
@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <ODialog v-model:open="showDialog" data-test="enterprise-upgrade-dialog" :show-close="false" :width="75" @update:open="(v) => !v && onDialogHide()">
     <div class="enterprise-dialog-v3 overflow-hidden relative -my-(--spacing-dialog-content-py) -mx-(--spacing-dialog-content-px)">
       <!-- Close Button -->
-      <div class="absolute top-4 right-4 z-[100]" :class="isDark ? 'text-[rgba(255,255,255,0.7)] hover:text-[rgba(255,255,255,0.95)]' : 'text-[rgba(0,0,0,0.6)] hover:text-[rgba(0,0,0,0.87)]'">
+      <div class="absolute top-4 right-4 z-[100] text-text-secondary hover:text-text-body">
         <OButton
           variant="ghost"
           size="icon"
@@ -28,16 +28,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </OButton>
       </div>
 
-      <div class="dialog-split-layout flex max-h-[92vh]" :class="{ 'cloud-layout': dialogConfig.isCloudLayout }">
+      <div class="dialog-split-layout flex max-h-[92vh] max-[56.25rem]:flex-col" :class="{ 'cloud-layout': dialogConfig.isCloudLayout }">
         <!-- Left Panel - Hero Section (hidden for Cloud) -->
-        <div v-if="!dialogConfig.isCloudLayout" class="hero-panel [flex:0_0_35%] bg-[linear-gradient(135deg,var(--q-primary)_0%,color-mix(in_srgb,var(--q-primary)_85%,black_15%)_100%)] p-[40px] flex flex-col relative text-white overflow-y-auto min-h-0">
+        <div v-if="!dialogConfig.isCloudLayout" class="hero-panel [flex:0_0_35%] bg-[linear-gradient(135deg,var(--color-theme-accent)_0%,color-mix(in_srgb,var(--color-theme-accent)_85%,black_15%)_100%)] p-10 flex flex-col relative text-white overflow-y-auto min-h-0 max-[56.25rem]:flex-none max-[56.25rem]:min-h-100">
 
-          <div class="flex-1 flex flex-col justify-center items-center max-w-[400px] w-full m-auto">
-            <div class="w-[80px] h-[80px] bg-[rgba(255,255,255,0.15)] rounded-[16px] flex items-center justify-center mb-6 backdrop-blur-[10px]">
+          <div class="flex-1 flex flex-col justify-center items-center max-w-100 w-full m-auto">
+            <div class="w-20 h-20 bg-[rgba(255,255,255,0.15)] rounded-default flex items-center justify-center mb-6 backdrop-blur-[10px]">
               <OIcon name="workspace-premium" size="xl" />
             </div>
 
-            <div data-test="enterprise-upgrade-hero-title" class="text-[32px] font-bold mb-4 leading-[1.2] text-center text-white">{{ dialogConfig.heroTitle }}</div>
+            <div data-test="enterprise-upgrade-hero-title" class="text-3xl font-bold mb-4 leading-[1.2] text-center text-white">{{ dialogConfig.heroTitle }}</div>
 
             <div class="mb-6 text-sm leading-[1.6] opacity-[0.95] text-center text-white">
               {{ dialogConfig.offerText }}
@@ -47,12 +47,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <!-- Loading State: Show skeleton -->
               <template v-if="isLoadingLicense && dialogConfig.showUsageIndicator">
                 <OSkeleton
-                  class="shrink-0 rounded-full"
-                  style="width: 40px; height: 40px;"
+                  class="shrink-0 rounded-full w-10 h-10"
                   data-test="enterprise-upgrade-usage-indicator-skeleton"
                 />
                 <OSkeleton
-                  class="shrink-0 rounded-3xl"
+                  class="shrink-0 rounded-default"
                   style="width: 200px; height: 44px;"
                   data-test="enterprise-upgrade-offer-badge-skeleton"
                 />
@@ -60,7 +59,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
               <!-- Loaded State: Show actual data -->
               <template v-else>
-                <div data-test="enterprise-upgrade-offer-badge" class="inline-flex items-center bg-[linear-gradient(135deg,#22c55e_0%,#4ade80_100%)] py-[10px] px-5 rounded-[24px] font-bold text-[15px] backdrop-blur-[10px] text-white shadow-[0_4px_16px_rgba(34,197,94,0.4)]" :class="{ 'bg-[rgba(255,255,255,0.2)]! shadow-[0_4px_12px_rgba(0,0,0,0.15)]!': dialogConfig.isLicensed }">
+                <div data-test="enterprise-upgrade-offer-badge" class="inline-flex items-center bg-[linear-gradient(135deg,#22c55e_0%,#4ade80_100%)] py-2.5 px-5 rounded-default font-bold text-sm backdrop-blur-[10px] text-white shadow-[0_4px_16px_rgba(34,197,94,0.4)]" :class="{ 'bg-[rgba(255,255,255,0.2)]! shadow-[0_4px_12px_rgba(0,0,0,0.15)]!': dialogConfig.isLicensed }">
                   <OIcon v-if="!dialogConfig.showUsageIndicator" :name="dialogConfig.badgeIcon" size="md" class="mr-1" />
                   <span>{{ dialogConfig.badgeText }}</span>
                 </div>
@@ -68,11 +67,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </div>
 
             <!-- Usage Chart (only for Enterprise with license) -->
-            <div v-if="dialogConfig.isLicensed" class="w-full mb-6 bg-[rgba(255,255,255,0.1)] rounded-[12px] p-4 backdrop-blur-[10px] border border-[rgba(255,255,255,0.2)]">
+            <div v-if="dialogConfig.isLicensed" class="w-full mb-6 bg-[rgba(255,255,255,0.1)] rounded-default p-4 backdrop-blur-[10px] border border-[rgba(255,255,255,0.2)]">
               <!-- Loading skeleton -->
               <template v-if="isLoadingLicense">
                 <OSkeleton
-                  class="chart-skeleton rounded-lg"
+                  class="chart-skeleton rounded-default"
                   style="height: 150px;"
                   data-test="enterprise-upgrade-chart-skeleton"
                 />
@@ -80,13 +79,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <!-- Loaded chart -->
               <template v-else-if="chartData">
                 <div class="relative w-full">
-                  <div class="usage-chart-container w-full overflow-visible p-0 mx-auto min-h-[150px] max-h-[150px]" style="height: 150px; width: 100%;">
+                  <div class="usage-chart-container w-full overflow-visible p-0 mx-auto min-h-37.5 max-h-37.5" style="height: 150px;">
                     <ChartRenderer
                       :key="dashboardRenderKey"
                       :data="chartData"
                     />
                   </div>
-                  <div v-if="isIngestionUnlimited" class="text-xs" style="color: rgba(255, 255, 255, 0.7); font-size: 10px; text-align: center; margin-top: 4px;">
+                  <div v-if="isIngestionUnlimited" class="text-xs text-center mt-1" style="color: rgba(255, 255, 255, 0.7); font-size: var(--text-3xs);">
                     {{ t('about.usage_shows_zero_unlimited') }}
                   </div>
                 </div>
@@ -100,7 +99,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 size="lg"
                 @click="handlePrimaryButtonClick"
                 data-test="enterprise-upgrade-download-btn"
-                class="bg-white! text-[var(--q-primary)]! font-bold! py-[10px] px-8 text-[15px] rounded-lg! shadow-[0_4px_16px_rgba(0,0,0,0.15)] transition-all duration-300 [transition-timing-function:cubic-bezier(0.4,0,0.2,1)] [letter-spacing:0.3px] hover:[transform:translateY(-3px)_scale(1.02)] hover:shadow-[0_8px_24px_rgba(0,0,0,0.25)] active:[transform:translateY(-1px)_scale(0.98)]"
+                class="bg-white! text-[var(--color-theme-accent)]! font-bold! py-2.5 px-8 text-sm rounded-default! shadow-[0_4px_16px_rgba(0,0,0,0.15)] transition-all duration-300 [transition-timing-function:cubic-bezier(0.4,0,0.2,1)] [letter-spacing:0.3px] hover:[transform:translateY(-3px)_scale(1.02)] hover:shadow-[0_8px_24px_rgba(0,0,0,0.25)] active:[transform:translateY(-1px)_scale(0.98)]"
               >
                 {{ dialogConfig.primaryButtonText }}
                 <template v-if="dialogConfig.primaryButtonIcon" #icon-right>
@@ -112,7 +111,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 variant="on-dark-ghost"
                 size="lg"
                 @click="contactSales"
-                class="font-semibold! py-[10px] px-6 text-[15px] rounded-lg! border-2 border-[rgba(255,255,255,0.3)] transition-all duration-300 bg-transparent [letter-spacing:0.2px] hover:bg-[rgba(255,255,255,0.15)] hover:border-[rgba(255,255,255,0.5)] hover:[transform:translateX(4px)] active:[transform:scale(0.96)]"
+                class="font-semibold! py-2.5 px-6 text-sm rounded-default! border-2 border-[rgba(255,255,255,0.3)] transition-all duration-300 bg-transparent [letter-spacing:0.2px] hover:bg-[rgba(255,255,255,0.15)] hover:border-[rgba(255,255,255,0.5)] hover:[transform:translateX(4px)] active:[transform:scale(0.96)]"
               >
                 {{ t('about.enterprise_offer.buttons.contact_sales') }}
               </OButton>
@@ -122,7 +121,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 size="lg"
                 @click="openDocsLink"
                 data-test="enterprise-upgrade-learn-more-btn"
-                class="font-semibold! py-[10px] px-6 text-[15px] rounded-lg! border-2 border-[rgba(255,255,255,0.3)] transition-all duration-300 bg-transparent [letter-spacing:0.2px] hover:bg-[rgba(255,255,255,0.15)] hover:border-[rgba(255,255,255,0.5)] hover:[transform:translateX(4px)] active:[transform:scale(0.96)]"
+                class="font-semibold! py-2.5 px-6 text-sm rounded-default! border-2 border-[rgba(255,255,255,0.3)] transition-all duration-300 bg-transparent [letter-spacing:0.2px] hover:bg-[rgba(255,255,255,0.15)] hover:border-[rgba(255,255,255,0.5)] hover:[transform:translateX(4px)] active:[transform:scale(0.96)]"
               >
                 {{ t('about.enterprise_offer.buttons.learn_more') }}
               </OButton>
@@ -131,10 +130,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
 
         <!-- Right Panel - Features List -->
-        <div class="flex-1 flex flex-col overflow-hidden" :class="[isDark ? 'bg-[#1e1e1e]' : 'bg-white', { 'max-w-full': dialogConfig.isCloudLayout }]">
-          <div class="pt-4 pb-3 px-8 sticky top-0 z-10 border-b text-center" :class="isDark ? 'bg-[#1e1e1e] border-b-[rgba(255,255,255,0.1)]' : 'bg-white border-b-[rgba(0,0,0,0.08)]'">
-            <div data-test="enterprise-upgrade-features-title" class="text-[18px] font-bold mb-1 [letter-spacing:-0.3px]" :class="isDark ? 'text-[rgba(255,255,255,0.95)]' : 'text-[rgba(0,0,0,0.9)]'">{{ dialogConfig.featuresTitle }}</div>
-            <div class="text-xs font-medium" :class="isDark ? 'text-[rgba(255,255,255,0.6)]' : 'text-[rgba(0,0,0,0.6)]'">{{ dialogConfig.featuresSubtitle }}</div>
+        <div class="flex-1 flex flex-col overflow-hidden bg-surface-base" :class="[{ 'max-w-full': dialogConfig.isCloudLayout }]">
+          <div class="pt-4 pb-3 px-8 sticky top-0 z-10 border-b text-center bg-surface-base border-border-default">
+            <div data-test="enterprise-upgrade-features-title" class="text-lg font-bold mb-1 [letter-spacing:-0.3px] text-text-heading">{{ dialogConfig.featuresTitle }}</div>
+            <div class="text-xs font-medium text-text-secondary">{{ dialogConfig.featuresSubtitle }}</div>
           </div>
 
           <!-- Cloud 3-column layout -->
@@ -144,28 +143,28 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               v-for="feature in coreFeatures"
               :key="feature.name"
               data-test="enterprise-upgrade-feature-item"
-              class="flex gap-[10px] p-[8px_12px] rounded-md border transition-all duration-200"
+              class="flex gap-2.5 p-[8px_12px] rounded-default border transition-all duration-200"
               :class="[
-                isDark ? 'border-[rgba(255,255,255,0.12)]' : 'border-[rgba(0,0,0,0.08)]',
+                'border-border-default',
                 feature.link
                   ? (isDark
-                    ? 'cursor-pointer hover:bg-[rgba(var(--q-primary-rgb),0.1)] hover:border-[rgba(var(--q-primary-rgb),0.4)] hover:[transform:translateX(2px)] active:[transform:translateX(0)]'
-                    : 'cursor-pointer hover:bg-[rgba(var(--q-primary-rgb),0.05)] hover:border-[rgba(var(--q-primary-rgb),0.3)] hover:[transform:translateX(2px)] active:[transform:translateX(0)]')
+                    ? 'cursor-pointer hover:bg-[color-mix(in_srgb,var(--color-theme-accent)_10%,transparent)] hover:border-[color-mix(in_srgb,var(--color-theme-accent)_40%,transparent)] hover:[transform:translateX(2px)] active:[transform:translateX(0)]'
+                    : 'cursor-pointer hover:bg-[color-mix(in_srgb,var(--color-theme-accent)_5%,transparent)] hover:border-[color-mix(in_srgb,var(--color-theme-accent)_30%,transparent)] hover:[transform:translateX(2px)] active:[transform:translateX(0)]')
                   : (isDark
                     ? 'hover:bg-[rgba(255,255,255,0.05)]'
                     : 'hover:bg-[rgba(0,0,0,0.03)] hover:border-[rgba(0,0,0,0.12)]')
               ]"
               @click="feature.link && openFeatureLink(feature.link)"
             >
-              <div class="shrink-0 w-[30px] h-[30px] rounded-lg flex items-center justify-center text-[var(--q-primary)]" :class="isDark ? 'bg-[rgba(var(--q-primary-rgb),0.15)]' : 'bg-[rgba(var(--q-primary-rgb),0.1)]'">
+              <div class="shrink-0 w-7.5 h-7.5 rounded-default flex items-center justify-center text-[var(--color-theme-accent)] bg-[color-mix(in_srgb,var(--color-theme-accent)_10%,transparent)] dark:bg-[color-mix(in_srgb,var(--color-theme-accent)_15%,transparent)]">
                 <OIcon :name="feature.icon" size="sm" />
               </div>
               <div class="flex-1 min-w-0">
-                <div class="text-[13px] font-semibold mb-0.5 leading-[1.25] flex items-center gap-1.5" :class="isDark ? 'text-[rgba(255,255,255,0.95)]' : 'text-[rgba(0,0,0,0.87)]'">
+                <div class="text-compact font-semibold mb-0.5 leading-[1.25] flex items-center gap-1.5" :class="'text-text-heading'">
                   {{ feature.name }}
                   <OIcon v-if="feature.link" name="open-in-new" size="xs" class="opacity-60 ml-1 align-middle" />
                 </div>
-                <div class="text-[11px] leading-[1.25]" :class="isDark ? 'text-[rgba(255,255,255,0.55)]' : 'text-[rgba(0,0,0,0.55)]'">{{ feature.note }}</div>
+                <div class="text-2xs leading-[1.25]" :class="'text-text-secondary'">{{ feature.note }}</div>
               </div>
             </div>
 
@@ -175,29 +174,29 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               v-show="!feature.cloudHidden"
               :key="feature.name"
               data-test="enterprise-upgrade-feature-item"
-              class="flex gap-[10px] p-[8px_12px] rounded-md border transition-all duration-200"
+              class="flex gap-2.5 p-[8px_12px] rounded-default border transition-all duration-200"
               :class="[
-                isDark ? 'border-[rgba(255,255,255,0.12)]' : 'border-[rgba(0,0,0,0.08)]',
+                'border-border-default',
                 feature.link
                   ? (isDark
-                    ? 'cursor-pointer hover:bg-[rgba(var(--q-primary-rgb),0.1)] hover:border-[rgba(var(--q-primary-rgb),0.4)] hover:[transform:translateX(2px)] active:[transform:translateX(0)]'
-                    : 'cursor-pointer hover:bg-[rgba(var(--q-primary-rgb),0.05)] hover:border-[rgba(var(--q-primary-rgb),0.3)] hover:[transform:translateX(2px)] active:[transform:translateX(0)]')
+                    ? 'cursor-pointer hover:bg-[color-mix(in_srgb,var(--color-theme-accent)_10%,transparent)] hover:border-[color-mix(in_srgb,var(--color-theme-accent)_40%,transparent)] hover:[transform:translateX(2px)] active:[transform:translateX(0)]'
+                    : 'cursor-pointer hover:bg-[color-mix(in_srgb,var(--color-theme-accent)_5%,transparent)] hover:border-[color-mix(in_srgb,var(--color-theme-accent)_30%,transparent)] hover:[transform:translateX(2px)] active:[transform:translateX(0)]')
                   : (isDark
                     ? 'hover:bg-[rgba(255,255,255,0.05)]'
                     : 'hover:bg-[rgba(0,0,0,0.03)] hover:border-[rgba(0,0,0,0.12)]')
               ]"
               @click="feature.link && openFeatureLink(feature.link)"
             >
-              <div class="shrink-0 w-[30px] h-[30px] rounded-lg flex items-center justify-center text-[var(--q-primary)]" :class="isDark ? 'bg-[rgba(var(--q-primary-rgb),0.15)]' : 'bg-[rgba(var(--q-primary-rgb),0.1)]'">
+              <div class="shrink-0 w-7.5 h-7.5 rounded-default flex items-center justify-center text-[var(--color-theme-accent)] bg-[color-mix(in_srgb,var(--color-theme-accent)_10%,transparent)] dark:bg-[color-mix(in_srgb,var(--color-theme-accent)_15%,transparent)]">
                 <OIcon :name="feature.icon" size="sm" />
               </div>
               <div class="flex-1 min-w-0">
-                <div class="text-[13px] font-semibold mb-0.5 leading-[1.25] flex items-center gap-1.5" :class="isDark ? 'text-[rgba(255,255,255,0.95)]' : 'text-[rgba(0,0,0,0.87)]'">
+                <div class="text-compact font-semibold mb-0.5 leading-[1.25] flex items-center gap-1.5" :class="'text-text-heading'">
                   {{ feature.name }}
                   <OIcon v-if="feature.link" name="open-in-new" size="xs" class="opacity-60 ml-1 align-middle" />
                   <OTag v-if="feature.beta" type="featureFlag" value="beta" data-test="enterprise-upgrade-feature-beta-badge" />
                 </div>
-                <div class="text-[11px] leading-[1.25]" :class="isDark ? 'text-[rgba(255,255,255,0.55)]' : 'text-[rgba(0,0,0,0.55)]'">{{ feature.note }}</div>
+                <div class="text-2xs leading-[1.25]" :class="'text-text-secondary'">{{ feature.note }}</div>
               </div>
             </div>
           </div>
@@ -209,24 +208,24 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               v-show="!feature.cloudOnly"
               :key="feature.name"
               data-test="enterprise-upgrade-feature-item"
-              class="flex gap-[10px] p-[8px_12px] rounded-md border transition-all duration-200"
+              class="flex gap-2.5 p-[8px_12px] rounded-default border transition-all duration-200"
               :class="[
-                isDark ? 'border-[rgba(255,255,255,0.12)]' : 'border-[rgba(0,0,0,0.08)]',
+                'border-border-default',
                 feature.link
                   ? (isDark
-                    ? 'cursor-pointer hover:bg-[rgba(var(--q-primary-rgb),0.1)] hover:border-[rgba(var(--q-primary-rgb),0.4)] hover:[transform:translateX(2px)] active:[transform:translateX(0)]'
-                    : 'cursor-pointer hover:bg-[rgba(var(--q-primary-rgb),0.05)] hover:border-[rgba(var(--q-primary-rgb),0.3)] hover:[transform:translateX(2px)] active:[transform:translateX(0)]')
+                    ? 'cursor-pointer hover:bg-[color-mix(in_srgb,var(--color-theme-accent)_10%,transparent)] hover:border-[color-mix(in_srgb,var(--color-theme-accent)_40%,transparent)] hover:[transform:translateX(2px)] active:[transform:translateX(0)]'
+                    : 'cursor-pointer hover:bg-[color-mix(in_srgb,var(--color-theme-accent)_5%,transparent)] hover:border-[color-mix(in_srgb,var(--color-theme-accent)_30%,transparent)] hover:[transform:translateX(2px)] active:[transform:translateX(0)]')
                   : (isDark
                     ? 'hover:bg-[rgba(255,255,255,0.05)]'
                     : 'hover:bg-[rgba(0,0,0,0.03)] hover:border-[rgba(0,0,0,0.12)]')
               ]"
               @click="feature.link && openFeatureLink(feature.link)"
             >
-              <div class="shrink-0 w-[30px] h-[30px] rounded-lg flex items-center justify-center text-[var(--q-primary)]" :class="isDark ? 'bg-[rgba(var(--q-primary-rgb),0.15)]' : 'bg-[rgba(var(--q-primary-rgb),0.1)]'">
+              <div class="shrink-0 w-7.5 h-7.5 rounded-default flex items-center justify-center text-[var(--color-theme-accent)] bg-[color-mix(in_srgb,var(--color-theme-accent)_10%,transparent)] dark:bg-[color-mix(in_srgb,var(--color-theme-accent)_15%,transparent)]">
                 <OIcon :name="feature.icon" size="sm" />
               </div>
               <div class="flex-1 min-w-0">
-                <div data-test="enterprise-upgrade-feature-name" class="text-[13px] font-semibold mb-0.5 leading-[1.25] flex items-center gap-1.5" :class="isDark ? 'text-[rgba(255,255,255,0.95)]' : 'text-[rgba(0,0,0,0.87)]'">
+                <div data-test="enterprise-upgrade-feature-name" class="text-compact font-semibold mb-0.5 leading-[1.25] flex items-center gap-1.5" :class="'text-text-heading'">
                   {{ feature.name }}
                   <OIcon v-if="feature.link" name="open-in-new" size="xs" data-test="enterprise-upgrade-feature-external-link" class="opacity-60 ml-1 align-middle" />
                   <OTag v-if="feature.beta" type="featureFlag" value="beta" data-test="enterprise-upgrade-feature-beta-badge" />
@@ -235,7 +234,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <OTooltip side="top" align="center" :sideOffset="8" :content="t('about.enterprise_offer.tooltip.high_availability_mode_only')" />
                   </span>
                 </div>
-                <div class="text-[11px] leading-[1.25]" :class="isDark ? 'text-[rgba(255,255,255,0.55)]' : 'text-[rgba(0,0,0,0.55)]'">{{ feature.note }}</div>
+                <div class="text-2xs leading-[1.25]" :class="'text-text-secondary'">{{ feature.note }}</div>
               </div>
             </div>
           </div>
@@ -248,6 +247,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <script lang="ts">
 import { defineComponent, ref, computed, PropType, watch, defineAsyncComponent } from "vue";
 import { useStore } from "vuex";
+import { useTheme } from "@/composables/useTheme";
 import { useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
 import config from "@/aws-exports";
@@ -333,9 +333,9 @@ export default defineComponent({
     const chartData = ref<any>(null);
     const dashboardRenderKey = ref(0);
 
-    // dark: variants generate empty CSS in this project, so derive dark mode
-    // from the store and toggle classes via :class bindings instead.
-    const isDark = computed(() => store.state.theme === 'dark');
+    // Dark-mode flag from the sanctioned theme seam; used to toggle classes via
+    // :class bindings for the few genuinely theme-divergent (translucent) styles.
+    const { isDark } = useTheme();
 
     // Fetch license data when dialog opens for Enterprise with license
     const fetchLicenseData = async () => {
@@ -1079,19 +1079,10 @@ export default defineComponent({
 });
 </script>
 
-<style>
-.usage-chart-container .grid-stack-item-content {
-  border: 0px !important;
-}
-
-@media (max-width: 900px) {
-  .dialog-split-layout {
-    flex-direction: column;
-  }
-
-  .hero-panel {
-    flex: 0 0 auto;
-    min-height: 400px;
-  }
+<style scoped>
+/* keep(lib-override): strip the gridstack widget's default border inside the usage chart
+   (.grid-stack-item-content is gridstack-generated DOM, not addressable via template utilities) */
+.usage-chart-container :deep(.grid-stack-item-content) {
+  border: 0 !important;
 }
 </style>
diff --git a/web/src/components/Header.spec.ts b/web/src/components/Header.spec.ts
index de8f51b03e..12bab4f324 100644
--- a/web/src/components/Header.spec.ts
+++ b/web/src/components/Header.spec.ts
@@ -1,4 +1,4 @@
-// Copyright 2026 OpenObserve Inc.
+// Copyright 2026 OpenObserve Inc.
 //
 // This program is free software: you can redistribute it and/or modify
 // it under the terms of the GNU Affero General Public License as published by
@@ -18,6 +18,7 @@ import { mount, shallowMount } from "@vue/test-utils";
 import i18n from "@/locales";
 import Header from "@/components/Header.vue";
 import * as cookies from "@/utils/cookies";
+import { chartColor } from "@/utils/chartTheme";
 
 
 // Mock the cookies module
@@ -83,6 +84,10 @@ describe("Header Component", () => {
 
     const globalConfig = {
       plugins: defaultGlobalConfig.plugins,
+      // Header renders useTheme(), whose useStore() resolves via vuex's `store`
+      // injection key — the store prop alone does not satisfy it. Provide the
+      // same per-test store so storeOverrides still drive theme-dependent logic.
+      provide: { store },
       stubs: {
         ...defaultGlobalConfig.stubs,
         ...stubsOverrides,
@@ -393,7 +398,7 @@ describe("Header Component", () => {
       quotaWrapper.unmount();
     });
 
-    it("should return orange color when quota is 85-94%", () => {
+    it("should return warning token color when quota is 85-94%", () => {
       const quotaWrapper = createWrapper({
         storeOverrides: {
           state: {
@@ -404,10 +409,12 @@ describe("Header Component", () => {
         },
       });
 
-      expect(quotaWrapper.vm.ingestionQuotaColor).toBe("orange");
+      expect(quotaWrapper.vm.ingestionQuotaColor).toBe(
+        chartColor("--color-status-warning-text"),
+      );
     });
 
-    it("should return red color when quota is >= 95%", () => {
+    it("should return negative token color when quota is >= 95%", () => {
       const quotaWrapper = createWrapper({
         storeOverrides: {
           state: {
@@ -418,7 +425,9 @@ describe("Header Component", () => {
         },
       });
 
-      expect(quotaWrapper.vm.ingestionQuotaColor).toBe("red");
+      expect(quotaWrapper.vm.ingestionQuotaColor).toBe(
+        chartColor("--color-status-negative"),
+      );
     });
 
     it("should not display quota icon when quota < 85%", async () => {
@@ -751,7 +760,7 @@ describe("Header Component", () => {
       const orgs = [{ identifier: "test-org", label: "Test Organization" }];
 
       wrapper = shallowMount(Header, {
-        global: { plugins: [i18n] },
+        global: { plugins: [i18n], provide: { store: mockStore } },
         props: {
           ...wrapper.props(),
           organizations: orgs,
@@ -763,7 +772,7 @@ describe("Header Component", () => {
 
     it("should display empty state when no organizations match search", () => {
       wrapper = shallowMount(Header, {
-        global: { plugins: [i18n] },
+        global: { plugins: [i18n], provide: { store: mockStore } },
         props: {
           ...wrapper.props(),
           organizations: [],
@@ -842,7 +851,7 @@ describe("Header Component", () => {
       mockConfig.isEnterprise = "false";
 
       wrapper = shallowMount(Header, {
-        global: { plugins: [i18n] },
+        global: { plugins: [i18n], provide: { store: mockStore } },
         props: {
           ...wrapper.props(),
           config: mockConfig,
@@ -859,7 +868,7 @@ describe("Header Component", () => {
       mockConfig.isCloud = "true";
 
       wrapper = shallowMount(Header, {
-        global: { plugins: [i18n] },
+        global: { plugins: [i18n], provide: { store: mockStore } },
         props: {
           ...wrapper.props(),
           config: mockConfig,
@@ -873,7 +882,7 @@ describe("Header Component", () => {
       mockStore.state.zoConfig.custom_hide_menus = "openapi,settings";
 
       wrapper = shallowMount(Header, {
-        global: { plugins: [i18n] },
+        global: { plugins: [i18n], provide: { store: mockStore } },
         props: {
           ...wrapper.props(),
           store: mockStore,
@@ -1116,7 +1125,7 @@ describe("Header Component", () => {
       };
 
       wrapper = shallowMount(Header, {
-        global: { plugins: [i18n] },
+        global: { plugins: [i18n], provide: { store: mockStore } },
         props: {
           ...wrapper.props(),
           user: userWithoutName,
@@ -1187,8 +1196,10 @@ describe("Header Component", () => {
         }
       });
 
-      // Verify the computed property returns red color
-      expect(wrapper.vm.ingestionQuotaColor).toBe("red");
+      // Verify the computed property returns the negative token color
+      expect(wrapper.vm.ingestionQuotaColor).toBe(
+        chartColor("--color-status-negative"),
+      );
 
       // Verify the computed percentage
       expect(wrapper.vm.ingestionQuotaPercentage).toBe(95.0);
@@ -1244,7 +1255,7 @@ describe("Header Component", () => {
       const selectedOrg = { identifier: "test-org", label: "Test Organization" };
 
       wrapper = shallowMount(Header, {
-        global: { plugins: [i18n] },
+        global: { plugins: [i18n], provide: { store: mockStore } },
         props: {
           ...wrapper.props(),
           userClickedOrg: selectedOrg,
diff --git a/web/src/components/Header.vue b/web/src/components/Header.vue
index 4771fb1d5b..6384e24c1e 100644
--- a/web/src/components/Header.vue
+++ b/web/src/components/Header.vue
@@ -51,7 +51,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- Dark mode: Show dark logo, fallback to light logo -->
         <img
           v-if="
-            store.state.theme === 'dark' &&
+            isDark &&
             store.state.zoConfig.hasOwnProperty('custom_logo_dark_img') &&
             store.state.zoConfig?.custom_logo_dark_img != null
           "
@@ -63,7 +63,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- Light mode: Show light logo, fallback to dark logo -->
         <img
           v-else-if="
-            store.state.theme === 'light' &&
+            !isDark &&
             store.state.zoConfig.hasOwnProperty('custom_logo_img') &&
             store.state.zoConfig?.custom_logo_img != null
           "
@@ -99,10 +99,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <a :href="homeUrl" @click.prevent="goToHome" class="inline-flex items-center">
           <img
             data-test="header-openobserve-logo"
-            class="openobserve-logo cursor-pointer h-8 max-w-[150px] block transition-opacity duration-200 hover:opacity-80"
+            class="openobserve-logo cursor-pointer h-8 max-w-37.5 block transition-opacity duration-200 hover:opacity-80"
             :src="
               getImageURL(
-                store.state.theme === 'dark'
+                isDark
                   ? 'images/common/openobserve_latest_dark_2.svg'
                   : 'images/common/openobserve_latest_light_2.svg',
               )
@@ -118,10 +118,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <a :href="homeUrl" @click.prevent="goToHome" class="inline-flex items-center">
         <img
           data-test="header-openobserve-logo"
-          class="openobserve-logo cursor-pointer h-8 max-w-[150px] block transition-opacity duration-200 hover:opacity-80"
+          class="openobserve-logo cursor-pointer h-8 max-w-37.5 block transition-opacity duration-200 hover:opacity-80"
           :src="
             getImageURL(
-              store.state.theme === 'dark'
+              isDark
                 ? 'images/common/openobserve_latest_dark_2.svg'
                 : 'images/common/openobserve_latest_light_2.svg',
             )
@@ -145,11 +145,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <div
         type="warning"
         icon="cloud"
-        class="warning-msg"
-        style="display: inline"
+        class="inline bg-status-warning-bg p-1.25 rounded-default"
       >
         <OIcon name="warning"
-size="xs" class="warning" />{{
+size="xs" class="text-warning" />{{
           store.state.organizationData.quotaThresholdMsg
         }}
       </div>
@@ -216,12 +215,12 @@ size="xs" class="warning" />{{
           size="icon-toolbar"
           @click="toggleAIChat"
           data-test="menu-link-ai-item"
-          class="ai-hover-btn"
+          class="group [background:var(--color-gradient-ai-subtle)]! text-ai-accent! dark:text-white! [transition:background_0.3s_ease,box-shadow_0.3s_ease,color_0.3s_ease] dark:shadow-[0_0.25rem_0.75rem_0_color-mix(in_srgb,var(--color-ai-accent)_20%,transparent)] hover:[background:var(--color-gradient-ai)]! hover:text-white! hover:shadow-[0_0.25rem_0.75rem_0_color-mix(in_srgb,var(--color-ai-accent)_35%,transparent)] dark:hover:shadow-[0_0.25rem_0.75rem_0_color-mix(in_srgb,var(--color-ai-accent)_35%,transparent)]"
           :class="store.state.isAiChatEnabled ? 'ai-btn-active' : ''"
           @mouseenter="handleMouseEnter"
           @mouseleave="handleMouseLeave"
         >
-          <img :src="getBtnLogo" class="ai-icon w-5 h-5 shrink-0" />
+          <img :src="getBtnLogo" class="w-5 h-5 shrink-0 [transition:transform_0.6s_ease] group-hover:rotate-180 group-hover:brightness-0 group-hover:invert group-hover:[transition:filter_0.3s_ease]" />
           <OTooltip
             side="bottom"
             align="center"
@@ -253,7 +252,7 @@ size="xs" class="warning" />{{
             <OTooltip side="top" align="center" :content="t('menu.help')" />
           </OButton>
         </template>
-        <div class="header-menu-bar min-w-[250px]">
+        <div class="header-menu-bar min-w-62.5">
           <!-- OpenAPI link (only for non-cloud deployments) -->
           <template
             v-if="
@@ -321,7 +320,7 @@ size="xs" class="warning" />{{
             <OTooltip side="top" align="center" :content="user.given_name ? user.given_name + ' ' + user.family_name : user.email" />
           </OButton>
         </template>
-        <div class="header-menu-bar min-w-[250px]">
+        <div class="header-menu-bar min-w-62.5">
           <!-- User information (non-clickable info row) -->
           <div class="flex items-center gap-3 px-3 py-2">
             <OIcon
@@ -339,7 +338,7 @@ size="xs" class="warning" />{{
           <!-- Language selector — nested sub-dropdown (click to open) -->
           <div
             data-test="header-language-submenu-trigger"
-            class="relative flex items-center gap-3 py-1.5 px-3 text-sm leading-[1.2] cursor-pointer select-none hover:bg-[rgba(0,0,0,0.05)] dark:hover:bg-[rgba(255,255,255,0.08)]"
+            class="relative flex items-center gap-3 py-1.5 px-3 text-sm leading-[1.2] cursor-pointer select-none hover:bg-dropdown-item-hover-bg"
             @click.stop="showLanguageSubmenu = !showLanguageSubmenu"
           >
             <OIcon size="xs" name="language" class="padding-none" />
@@ -349,7 +348,7 @@ size="xs" class="warning" />{{
                 v-if="selectedLanguage.icon && selectedLanguage.icon.startsWith('img:')"
                 :src="selectedLanguage.icon.slice(4)"
                 :alt="selectedLanguage.label"
-                class="w-4 h-3 object-cover rounded-xs inline-block shrink-0"
+                class="w-4 h-3 object-cover rounded-default inline-block shrink-0"
               />
               <OIcon
                 v-else-if="selectedLanguage.icon"
@@ -364,10 +363,7 @@ size="xs" class="warning" />{{
             <!-- Submenu — absolutely positioned to the left of parent dropdown -->
             <div
               v-if="showLanguageSubmenu"
-              class="absolute right-full top-0 mr-1 min-w-50 border rounded-md py-1 z-9999"
-              :class="store.state.theme === 'dark'
-                ? 'bg-[#1f2937] border-[rgba(255,255,255,0.12)] shadow-[0_8px_24px_rgba(0,0,0,0.5)]'
-                : 'bg-white border-black/12 shadow-[0_8px_24px_rgba(0,0,0,0.15)]'"
+              class="absolute right-full top-0 mr-1 min-w-50 border rounded-default py-1 z-9999 bg-dropdown-bg border-dropdown-border shadow-[0_8px_24px_rgba(0,0,0,0.15)] dark:shadow-[0_8px_24px_rgba(0,0,0,0.5)]"
               data-test="language-dropdown-item"
               @click.stop
             >
@@ -378,9 +374,7 @@ size="xs" class="warning" />{{
                 :data-test="`language-dropdown-item-${lang.code}`"
                 class="flex items-center gap-2.5 w-full py-1.5 px-3 text-sm leading-[1.2] text-left bg-transparent border-0 cursor-pointer text-inherit"
                 :class="[
-                  store.state.theme === 'dark'
-                    ? 'hover:bg-[rgba(255,255,255,0.08)]'
-                    : 'hover:bg-[rgba(0,0,0,0.05)]',
+                  'hover:bg-dropdown-item-hover-bg',
                   { 'font-semibold': selectedLanguage.code === lang.code },
                 ]"
                 @click="changeLanguage(lang); showLanguageSubmenu = false"
@@ -389,7 +383,7 @@ size="xs" class="warning" />{{
                   v-if="lang.icon && lang.icon.startsWith('img:')"
                   :src="lang.icon.slice(4)"
                   :alt="lang.label"
-                  class="w-4 h-3 object-cover rounded-xs inline-block shrink-0"
+                  class="w-4 h-3 object-cover rounded-default inline-block shrink-0"
                 />
                 <OIcon v-else-if="lang.icon" size="xs" :name="lang.icon" />
                 <span class="flex-1">{{ lang.label }}</span>
@@ -442,6 +436,7 @@ size="xs" class="warning" />{{
 import { defineComponent, PropType, computed, ref, watch, nextTick } from "vue";
 import { useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
+import { useTheme } from "@/composables/useTheme";
 import ThemeSwitcher from "./ThemeSwitcher.vue";
 import EnterpriseUpgradeDialog from "./EnterpriseUpgradeDialog.vue";
 import OrganizationSelector from "./OrganizationSelector.vue";
@@ -454,6 +449,7 @@ import ODropdownSeparator from "@/lib/overlay/Dropdown/ODropdownSeparator.vue";
 import ODropdownGroup from "@/lib/overlay/Dropdown/ODropdownGroup.vue";
 
 import { getImageURL } from "@/utils/zincutils";
+import { chartColor } from "@/utils/chartTheme";
 
 export default defineComponent({
   name: "HeaderComponent",
@@ -554,6 +550,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const { t } = useI18n();
     const router = useRouter();
+    const { isDark } = useTheme();
 
     const homeUrl = computed(() => {
       if (!router) return "/";
@@ -596,8 +593,8 @@ export default defineComponent({
     // Computed property for ingestion quota warning color
     const ingestionQuotaColor = computed(() => {
       return props.store.state.zoConfig.ingestion_quota_used >= 95
-        ? "red"
-        : "orange";
+        ? chartColor("--color-status-negative")
+        : chartColor("--color-status-warning-text");
     });
 
     // Event handlers that emit to parent component
@@ -666,6 +663,7 @@ export default defineComponent({
     };
 
     return {
+      isDark,
       t,
       getImageURL,
       enterpriseButtonText,
@@ -694,3 +692,15 @@ export default defineComponent({
 });
 </script>
 
+<style scoped>
+/* keep(lib-override:o2-button): dark-only, element-scoped re-point of OButton's
+   ghost-primary tokens for the navbar upgrade CTA. The custom properties are READ by OButton's
+   own internal DOM, so they have to be declared on the button element itself —
+   there is no utility that sets them. Scoping appends [data-v] to the
+   [data-test] compound, which is OButton's root and therefore carries this
+   component's scope id. Was a global in styles/utilities.css (W1.d). */
+.dark [data-test="upgrade-to-enterprise-btn"] {
+  --color-button-ghost-primary-active-bg: var(--color-primary-900);
+  --color-button-ghost-primary-text: var(--color-primary-200);
+}
+</style>
diff --git a/web/src/components/HighLight.spec.ts b/web/src/components/HighLight.spec.ts
deleted file mode 100644
index 46a8b13ed8..0000000000
--- a/web/src/components/HighLight.spec.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { mount } from "@vue/test-utils";
-import { describe, expect, it, beforeEach, afterEach, vi } from "vitest";
-import HighLight from "@/components/HighLight.vue";
-
-
-// const init = vi.fn()
-
-describe("HighLight", async () => {
-  let wrapper: any = null;
-  beforeEach(() => {
-    // render the component
-    wrapper = mount(HighLight, {
-      shallow: false,
-      props: {
-        content: "Content Data",
-        queryString: "",
-      },
-    });
-  });
-  afterEach(() => {
-    wrapper.unmount();
-  });
-
-  it("should mount HighLight component", async () => {
-    expect(wrapper).toBeTruthy();
-  });
-  it("watcher - content", async () => {
-    const localThis = {
-      init: vi.fn(),
-    };
-    // await HighLight.watch.content.handler.call(localThis)
-
-    // const init = vi.spyOn(HighLight.methods, 'init')
-    // expect(HighLight.methods.init).toBeCalled()
-  });
-  it("watcher - queryString", () => {
-    // const getKeywords = vi.fn()
-    const localThis = {
-      getKeywords: vi.fn(),
-      init: vi.fn(),
-    };
-    // HighLight.watch.queryString.handler.call(localThis)
-  });
-});
diff --git a/web/src/components/HighLight.vue b/web/src/components/HighLight.vue
deleted file mode 100644
index c02cf072f8..0000000000
--- a/web/src/components/HighLight.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-    <span
-      v-for="(item) in list"
-      :key="item.id"
-      :title="title"
-      :class="{ 'bg-[rgb(255,213,0)]': item.isKeyWord }"
-    >
-      {{ item.text }}
-    </span>
-</template>
-
-<script lang="ts">
-import { getUUID } from "@/utils/zincutils";
-import { defineComponent, ref, watch, computed, onBeforeMount } from "vue";
-
-export default defineComponent({
-  name: "HighLight",
-  props: {
-    content: {
-      required: true,
-    },
-    queryString: {
-      type: String,
-      default: "",
-    },
-    title: {
-      type: String,
-      default: "",
-    },
-  },
-  setup(props) {
-    const list = ref<any>([]);
-    let timeoutId: ReturnType<typeof setTimeout>;
-    //this function is used to get the keywords from the query string
-    //which matches match_all(string) , fuzzy_match_all(string, number)
-    //it should only match the string and not the number in fuzzy_match_all
-    const getKeywords = (queryString: string): string[] => {
-      if (!queryString?.trim()) return [];
-
-      const regex = /\b(?:match_all|fuzzy_match_all)\(\s*(['"])([^'"]+)\1(?:\s*,\s*\d+)?\s*\)/g;
-      const result: string[] = [];
-      let match;
-
-      while ((match = regex.exec(queryString)) !== null) {
-        if (match[2]) result.push(match[2]);
-        else if (match[4] && !/^[a-zA-Z_]+\s*=\s*$/.test(match[4])) {
-          result.push(match[4]);
-        }
-      }
-    return Array.from(new Set(result));
-  };
-
-
-    //it takes the content and the keywords and returns the content with the keywords highlighted
-    const highlightText = (content: any, keywords: string[]) => {
-      const result = [];
-      let remaining = typeof content === "number" ? content.toString() : content;
-      if (!keywords.length || !remaining) return [{ isKeyWord: false, text: remaining }];
-
-      //this pattern is used to highlight the keywords in the content
-      //it is a regular expression that matches the keywords in the content
-      const pattern = new RegExp(`(${keywords.map(k => k.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|')})`, 'gi');
-      const parts = remaining.split(pattern);
-
-      for (const part of parts) {
-        if (!part) continue;
-        const isKeyWord = keywords.some(k => k.toLowerCase() === part.toLowerCase());
-        result.push({ isKeyWord, text: part, id: getUUID() });
-      }
-      return result;
-    };
-
-    const updateList = () => {
-      const keywords = getKeywords(props.queryString);
-      list.value = highlightText(props.content, keywords);
-    };
-
-    watch(() => props.content, updateList, { immediate: true });
-    watch(() => props.queryString, () => {
-      clearTimeout(timeoutId);
-      timeoutId = setTimeout(updateList, 300); // debounce duration
-    });
-
-    //this is used to clear the timeout when the component is destroyed
-    //this is used to prevent memory leaks
-    onBeforeMount(() => {
-      clearTimeout(timeoutId);
-    });
-
-    return { list };
-  },
-});
-</script>
-
diff --git a/web/src/components/JsonPreview.spec.ts b/web/src/components/JsonPreview.spec.ts
index 85fd5fda24..c9bdfc4a39 100644
--- a/web/src/components/JsonPreview.spec.ts
+++ b/web/src/components/JsonPreview.spec.ts
@@ -92,15 +92,15 @@ describe("JsonPreview", () => {
   describe("copy button visibility", () => {
     it("should show the copy button when showCopyButton is true (default)", () => {
       wrapper = mountJsonPreview({ showCopyButton: true });
-      // The copy button is a q-btn with an icon; it renders when showCopyButton is true.
+      // The copy button renders when showCopyButton is true.
       // We locate it by its click handler binding — the element with icon="content_copy" exists.
       expect(wrapper.find("button").exists()).toBe(true);
     });
 
     it("should hide the copy button when showCopyButton is false", () => {
       wrapper = mountJsonPreview({ showCopyButton: false });
-      // With showCopyButton false the q-btn is removed from the DOM entirely.
-      // The only remaining button-like elements would belong to q-btn-dropdown if present,
+      // With showCopyButton false the copy button is removed from the DOM entirely.
+      // Any remaining button-like elements would belong to the field-dropdown slot,
       // but with no field-dropdown slot there are none either.
       const buttons = wrapper.findAll("button");
       // None of the buttons should be the copy button — identified by the content_copy icon text.
diff --git a/web/src/components/JsonPreview.vue b/web/src/components/JsonPreview.vue
index f21e504d17..1199ea0e4c 100644
--- a/web/src/components/JsonPreview.vue
+++ b/web/src/components/JsonPreview.vue
@@ -17,7 +17,7 @@
     </div>
     {
     <div
-      class="log_json_content flex"
+      class="whitespace-pre-wrap font-mono text-xs flex"
       v-for="(key, index) in Object.keys(value)"
       :key="key"
     >
@@ -33,13 +33,13 @@
             data-test="json-preview-field-dropdown-btn"
             size="xs"
             variant="ghost"
-            class="ml-2 log-json-field-dropdown-btn"
+            class="ml-2 h-5! w-5! min-h-5! min-w-5! p-0! align-middle"
             aria-label="Add icon"
           >
             <OIcon :name="dropdownOpenMap[key] ? 'arrow-drop-up' : 'arrow-drop-down'" size="sm" />
           </OButton>
         </template>
-        <div class="logs-table-list min-w-[180px]">
+        <div class="logs-table-list min-w-45">
           <slot name="field-dropdown"
 :field="key"
 :value="value[key]" />
@@ -47,9 +47,8 @@
       </ODropdown>
 
       <span
-        class="pl-[0.625rem]"
+        class="pl-2.5"
         :data-test="`json-preview-key-${key}`"
-        :class="store.state.theme === 'dark' ? 'dark' : ''"
       >
         <span class="log-key">{{ key }}</span
         ><span class="log-separator">: </span
diff --git a/web/src/components/MenuLink.vue b/web/src/components/MenuLink.vue
index cd632f9db7..cec7f95961 100644
--- a/web/src/components/MenuLink.vue
+++ b/web/src/components/MenuLink.vue
@@ -26,7 +26,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   >
     <div class="nav-menu-item-avatar flex flex-col items-center gap-0.5 w-full">
       <div
-        class="icon-wrapper relative inline-flex items-center justify-center rounded-lg p-0.5 transition-colors duration-250"
+        class="icon-wrapper relative inline-flex items-center justify-center rounded-default p-0.5 transition-colors duration-250"
         :class="isActive
           ? activeIconClass
           : 'text-tabs-inactive-text group-hover:text-primary-600'"
@@ -40,7 +40,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         />
         <div
           v-if="badge && badge > 0"
-          class="menu-badge absolute -top-1 -right-2 min-w-4 h-4 px-1 bg-[linear-gradient(135deg,#ef4444_0%,#ec4899_100%)] border-2 border-[#0f172a] rounded-full text-[9px] font-bold text-white flex items-center justify-center leading-none shadow-[0_4px_8px_rgba(239,68,68,0.5)] animate-pulse z-1"
+          class="menu-badge absolute -top-1 -right-2 min-w-4 h-4 px-1 bg-[image:var(--color-gradient-notification)] border-2 border-[var(--color-grey-900)] rounded-full text-3xs font-bold text-text-inverse flex items-center justify-center leading-none shadow-[0_4px_8px_rgba(239,68,68,0.5)] animate-pulse z-1"
           aria-live="polite"
           :aria-label="`${badge} notifications`"
         >
@@ -48,7 +48,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
       </div>
       <div
-        class="nav-menu-item-label text-[0.71875rem] tracking-[0.01em] transition-colors duration-250 w-full text-center leading-tight line-clamp-2 wrap-normal break-normal [hyphens:none]"
+        class="nav-menu-item-label text-xs tracking-[0.01em] transition-colors duration-250 w-full text-center leading-tight line-clamp-2 wrap-normal break-normal [hyphens:none]"
         :class="isActive
           ? activeLabelClass
           : 'font-medium text-tabs-inactive-text group-hover:text-primary-600'"
@@ -72,10 +72,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from "vue";
+import { defineComponent, computed, inject } from "vue";
 import { useStore } from "vuex";
 import { useRouter, RouterLink } from "vue-router";
+import { useTheme } from "@/composables/useTheme";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
+import { RailIndicatorActiveKey } from "@/lib/core/Navbar/ONavbar.types";
 
 export default defineComponent({
   name: "MenuLink",
@@ -121,7 +123,6 @@ export default defineComponent({
       default: false,
     },
 
-    // Phase 4: Badge support
     badge: {
       type: Number,
       default: 0,
@@ -180,12 +181,27 @@ export default defineComponent({
     // with primary-coloured text/icon; DARK uses the tinted "selected" pill
     // (matching the dashboard-folder selection) with white text/icon — because
     // surface-base is black in dark mode, a white pill there would vanish.
-    const isDark = computed(() => store.state.theme === "dark");
-    const activePillClass = computed(() =>
-      isDark.value
-        ? "text-tabs-active-text bg-tabs-active-bg shadow-sm border-l-2 border-primary-400"
-        : "text-primary-700 bg-surface-base shadow-sm border-l-2 border-primary-600",
-    );
+    const { isDark } = useTheme();
+
+    // When the rail draws a single sliding pill (ONavbar provides this), an active
+    // tile defers its fill (background + coloured left accent) to that pill and
+    // keeps only its active text colour — the transparent left border stays so
+    // there is no width shift between states. Falls back to the self-painted pill
+    // when the indicator isn't active (default `false` off the rail, or before it
+    // is positioned), so the nav always shows a selection.
+    const railIndicatorActive = inject(RailIndicatorActiveKey, undefined);
+    const slideActive = computed(() => Boolean(railIndicatorActive?.value));
+
+    const activePillClass = computed(() => {
+      if (slideActive.value) {
+        return isDark.value
+          ? "text-tabs-active-text border-l-2 border-transparent"
+          : "text-primary-700 border-l-2 border-transparent";
+      }
+      return isDark.value
+        ? "text-tabs-active-text bg-tabs-active-bg border-l-2 border-primary-400"
+        : "text-primary-700 bg-surface-base border-l-2 border-primary-600";
+    });
     const activeIconClass = computed(() =>
       isDark.value ? "text-tabs-active-text!" : "text-primary-700!",
     );
@@ -195,7 +211,7 @@ export default defineComponent({
         : "font-semibold text-primary-600!",
     );
 
-    // Phase 5: Accessibility - compute ARIA label with fallback
+    // Compute ARIA label with fallback
     const ariaLabel = computed(() => {
       let label = props.title || "Navigation link";
       if (props.badge && props.badge > 0) {
@@ -255,7 +271,9 @@ export default defineComponent({
 
     const rootClass = computed(() => [
       "nav-menu-item",
-      "group relative block [text-decoration:none]! text-inherit shrink-0 mx-1 px-0 py-1 min-h-0 rounded-lg transition-colors duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-1",
+      "group relative block [text-decoration:none]! text-inherit shrink-0 mx-1 px-0 py-1 min-h-0 rounded-surface transition-colors duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-1",
+      // Sit above the rail's sliding pill so icon/label stay readable.
+      slideActive.value ? "z-10" : "",
       isActive.value
         ? activePillClass.value
         : "text-tabs-inactive-text border-l-2 border-transparent bg-transparent hover:bg-tabs-hover-bg",
diff --git a/web/src/components/NLModeQueryBar.vue b/web/src/components/NLModeQueryBar.vue
deleted file mode 100644
index 08ba867ff5..0000000000
--- a/web/src/components/NLModeQueryBar.vue
+++ /dev/null
@@ -1,427 +0,0 @@
-<template>
-  <div class="w-full flex flex-col gap-2">
-    <!-- Compact Layout: Editor only (toggle/button provided by parent) -->
-    <template v-if="layout === 'editor-only'">
-      <CodeQueryEditor
-        :ref="(el) => (editorRef = el)"
-        :editor-id="`${dataTestPrefix}-editor`"
-        :language="language"
-        :query="query"
-        :nlp-mode="nlpMode"
-        :read-only="readOnly"
-        :show-auto-complete="showAutoComplete"
-        @update:query="handleQueryUpdate"
-        @nlpModeDetected="handleNlpModeDetected"
-        @generation-start="handleGenerationStart"
-        @generation-end="handleGenerationEnd"
-        @generation-success="handleGenerationSuccess"
-      />
-    </template>
-
-    <!-- Full Layout: Toggle + Editor + Button -->
-    <template v-else>
-      <!-- NL Mode Toggle Bar -->
-      <div class="flex items-center gap-2 mb-2">
-        <!-- NL Mode Toggle (always visible when AI enabled and enterprise) -->
-        <div
-          v-if="config.isEnterprise == 'true' && store.state.zoConfig.ai_enabled"
-          class="flex items-center gap-2 py-1 px-2 rounded element-box-shadow"
-          style="background-color: var(--q-dark-page)"
-        >
-          <OSwitch
-            :data-test="`${dataTestPrefix}-nlp-mode-toggle`"
-            v-model="nlpMode"
-          />
-          <img :src="nlpIcon" alt="NL Mode" class="w-5 h-5" />
-          <OTooltip :content="t('nlMode.toggle')" side="top" />
-        </div>
-
-        <!-- Action Buttons (always present) -->
-        <div class="flex gap-2 ml-auto">
-          <!-- Main Action Button: Run Query / Ask AI -->
-          <OButton
-            :data-test="`${dataTestPrefix}-action-btn`"
-            :variant="isAIMode ? 'ghost-primary' : 'ghost'"
-            size="sm"
-            :title="isAIMode ? aiButtonTooltip : normalButtonTooltip"
-            :class="buttonClasses"
-            :loading="loading"
-            :disabled="disabled || (isAIMode && isGenerating)"
-            @click="handleButtonClick"
-          >
-            <OIcon
-              v-if="showIcon"
-              :name="isAIMode ? 'auto-awesome' : 'search'" size="sm"
-              class="mr-1"
-            />
-            {{ isAIMode ? aiButtonLabel : normalButtonLabel }}
-          </OButton>
-
-          <!-- Dropdown (optional - for enterprise features) -->
-          <template v-if="showDropdown">
-            <OSeparator class="h-7.25 w-px" />
-            <ODropdown side="bottom" align="end">
-              <template #trigger>
-                <OButton
-                  variant="ghost"
-                  size="icon-xs"
-                  class="h-7.25 search-button-dropdown"
-                  :class="dropdownClasses"
-                >
-                  <OIcon name="arrow-drop-down" size="sm" />
-                </OButton>
-              </template>
-              <!-- Normal Mode: Refresh option -->
-              <template v-if="!isAIMode">
-                <ODropdownItem
-                  :disabled="disabled"
-                  @select="$emit('refresh')"
-                >
-                  <template #icon-left>
-                    <OIcon name="refresh" size="sm" />
-                  </template>
-                  {{ t('search.refreshCacheAndRunQuery') }}
-                </ODropdownItem>
-              </template>
-              <!-- AI Mode: Custom actions (slot) -->
-              <template v-else>
-                <slot name="dropdown-actions">
-                  <div class="min-w-35 p-2 text-xs text-center text-dropdown-item-text">
-                    {{ t('nlMode.noAdditionalOptions') }}
-                  </div>
-                </slot>
-              </template>
-            </ODropdown>
-          </template>
-        </div>
-      </div>
-
-      <!-- Query Editor with AI Input Bar -->
-      <div class="w-full">
-        <!-- AI Input Bar (shown in NL Mode) -->
-        <div
-          v-if="isAIMode"
-          class="p-3 bg-[linear-gradient(135deg,rgba(139,92,246,0.05)_0%,rgba(236,72,153,0.05)_100%)] border-b border-(--o2-border-color)"
-        >
-          <!-- Show streaming status with spinner -->
-          <div v-if="isGenerating" class="ai-bar-streaming flex items-center gap-2 bg-white rounded-lg py-2 px-3 text-(--q-primary)">
-            <img :src="nlpIcon" alt="AI" class="w-5 h-5" />
-            <OSpinner variant="dots" size="xs" />
-            <span class="text-sm text-[#666]">{{ aiStatusText || t('search.analyzingQuery') }}</span>
-          </div>
-          <!-- Normal input when not generating -->
-          <OInput
-            v-else
-            v-model="aiInputText"
-            :placeholder="t('search.askAIPlaceholder')"
-            class="ai-input-field"
-            :data-test="`${dataTestPrefix}-ai-input-field`"
-            @keydown.enter="handleAIInputEnter"
-          >
-            <template v-slot:icon-left>
-              <img :src="nlpIcon" alt="AI" class="w-5 h-5" />
-            </template>
-          </OInput>
-        </div>
-
-        <!-- Code Editor -->
-        <CodeQueryEditor
-          :ref="(el) => (editorRef = el)"
-          :editor-id="`${dataTestPrefix}-editor`"
-          :language="language"
-          :query="query"
-          :nlp-mode="nlpMode"
-          :read-only="readOnly"
-          :show-auto-complete="showAutoComplete"
-          @update:query="handleQueryUpdate"
-          @nlpModeDetected="handleNlpModeDetected"
-          @generation-start="handleGenerationStart"
-          @generation-end="handleGenerationEnd"
-          @generation-success="handleGenerationSuccess"
-        />
-      </div>
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from 'vue';
-import { useStore } from 'vuex';
-import { useI18n } from 'vue-i18n';
-import CodeQueryEditor from '@/components/CodeQueryEditor.vue';
-import OButton from '@/lib/core/Button/OButton.vue';
-import ODropdown from '@/lib/overlay/Dropdown/ODropdown.vue';
-import ODropdownItem from '@/lib/overlay/Dropdown/ODropdownItem.vue';
-import { getImageURL } from '@/utils/zincutils';
-import config from '@/aws-exports';
-import OSpinner from "@/lib/feedback/Spinner/OSpinner.vue";
-import OSwitch from "@/lib/forms/Switch/OSwitch.vue";
-import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
-import OInput from "@/lib/forms/Input/OInput.vue";
-import OIcon from "@/lib/core/Icon/OIcon.vue";
-import OSeparator from '@/lib/core/Separator/OSeparator.vue';
-
-interface Props {
-  // Query props
-  language: 'sql' | 'promql' | 'vrl' | 'javascript';
-  query: string;
-  readOnly?: boolean;
-  showAutoComplete?: boolean;
-
-  // Context-aware button labels (ONLY thing that changes per page)
-  normalButtonLabel?: string;     // "Run Query", "Test Query", "Apply Query", "Validate VRL"
-  aiButtonLabel?: string;        // Always "Ask AI" (default)
-  normalButtonTooltip?: string;
-  aiButtonTooltip?: string;
-
-  // State
-  loading?: boolean;
-  disabled?: boolean;
-
-  // UI customization
-  layout?: 'full' | 'editor-only';  // full: toggle + editor + button, editor-only: just editor
-  showIcon?: boolean;
-  showDropdown?: boolean;
-  borderRadius?: 'normal' | 'enterprise';
-  height?: string;
-
-  // Testing
-  dataTestPrefix?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  readOnly: false,
-  showAutoComplete: true,
-  normalButtonLabel: 'Run Query',
-  aiButtonLabel: 'Ask AI',
-  normalButtonTooltip: 'Execute action',
-  aiButtonTooltip: 'Generate query from natural language using AI',
-  layout: 'full',
-  showIcon: true,
-  showDropdown: false,
-  borderRadius: 'normal',
-  height: '30px',
-  dataTestPrefix: 'nl-mode',
-});
-
-const emit = defineEmits<{
-  'update:query': [query: string];
-  'run-query': [];               // Normal mode action
-  'ask-ai': [naturalLanguage: string];  // AI mode action
-  refresh: [];                   // Refresh cache action
-}>();
-
-const store = useStore();
-const { t } = useI18n();
-
-const nlpMode = ref(false);
-const isNaturalLanguageDetected = ref(false);
-const isGenerating = ref(false);
-const editorRef = ref<any>(null);
-
-// AI Input Bar state
-const aiInputText = ref('');
-const aiStatusText = ref('');
-
-const nlpIcon = computed(() => {
-  return store.state.theme === 'dark'
-    ? getImageURL('images/common/ai_icon_dark.svg')
-    : getImageURL('images/common/ai_icon_gradient.svg');
-});
-
-// Computed: Is in AI mode?
-const isAIMode = computed(() => nlpMode.value || isNaturalLanguageDetected.value);
-
-// Computed: Button classes
-const buttonClasses = computed(() => {
-  const classes = [
-    'p-0',
-    `h-[${props.height}]`,
-    'element-box-shadow',
-  ];
-
-  if (isAIMode.value) {
-    classes.push('bg-[linear-gradient(135deg,#8B5CF6_0%,#EC4899_100%)]! text-white! border-none! text-[0.6875rem]! font-semibold! leading-[1rem]! transition-all! duration-300! ease-[ease]! shadow-[0_0.25rem_0.9375rem_0_rgba(139,92,246,0.3)]! px-3! w-[92px]! hover:shadow-[0_0.375rem_1.25rem_0_rgba(139,92,246,0.5)]! hover:-translate-y-px active:translate-y-0');
-  } else {
-    classes.push('w-[92px]!', 'o2-color-primary');
-  }
-
-  if (props.borderRadius === 'enterprise') {
-    classes.push('search-button-enterprise-border-radius');
-  } else {
-    classes.push('search-button-normal-border-radius');
-  }
-
-  return classes;
-});
-
-// Computed: Dropdown classes
-const dropdownClasses = computed(() => {
-  const classes = [];
-
-  if (isAIMode.value) {
-    classes.push('o2-ai-dropdown-button');
-  } else {
-    classes.push('o2-color-primary');
-  }
-
-  if (props.borderRadius === 'enterprise') {
-    classes.push('search-button-dropdown-enterprise-border-radius');
-  } else {
-    classes.push('search-button-normal-border-radius');
-  }
-
-  return classes;
-});
-
-// Handle query update from editor
-const handleQueryUpdate = (newQuery: string) => {
-  emit('update:query', newQuery);
-};
-
-// Handle auto-detection from editor
-const handleNlpModeDetected = (isNL: boolean) => {
-  isNaturalLanguageDetected.value = isNL;
-};
-
-// Detect if user wants to execute the query instead of generating a new one
-const isExecutionIntent = (input: string): boolean => {
-  const normalized = input.toLowerCase().trim();
-  const executionKeywords = [
-    'run', 'run query', 'execute', 'execute query', 'search', 'go',
-    'submit', 'apply', 'show results', 'get results', 'fetch',
-    'run it', 'execute it', 'do it', 'run this', 'execute this'
-  ];
-  return executionKeywords.includes(normalized);
-};
-
-// Handle AI input field Enter key
-const handleAIInputEnter = async () => {
-  if (!aiInputText.value.trim()) {
-    return;
-  }
-
-  const naturalLanguage = aiInputText.value.trim();
-  const currentQuery = editorRef.value?.getValue ? editorRef.value.getValue() : props.query;
-
-  // Check if user wants to execute the query instead of generating a new one
-  if (currentQuery && currentQuery.trim() && isExecutionIntent(naturalLanguage)) {
-    aiInputText.value = ''; // Clear input
-    emit('run-query'); // Trigger query execution
-    return;
-  }
-
-  // Call the CodeQueryEditor's handleGenerateSQL method directly
-  if (editorRef.value && typeof editorRef.value.handleGenerateSQL === 'function') {
-    try {
-      aiStatusText.value = t('search.generatingQuery');
-      await editorRef.value.handleGenerateSQL(naturalLanguage);
-      // Success is handled by handleGenerationSuccess event
-    } catch (error) {
-      console.error('[NLModeQueryBar] Query generation failed:', error);
-      aiStatusText.value = '';
-    }
-  } else {
-    console.error('[NLModeQueryBar] Editor ref not found or handleGenerateSQL not available');
-  }
-
-  // Still emit event for parent components that may need to react
-  emit('ask-ai', naturalLanguage);
-};
-
-// Handle button click
-const handleButtonClick = async () => {
-  if (isAIMode.value) {
-    // Ask AI mode - generate query using streaming API
-    // Use AI input text if available, otherwise use query from editor
-    const naturalLanguage = aiInputText.value.trim() || props.query;
-
-    if (!naturalLanguage) {
-      console.warn('[NLModeQueryBar] No input provided for AI generation');
-      return;
-    }
-
-    const currentQuery = editorRef.value?.getValue ? editorRef.value.getValue() : props.query;
-
-    // Check if user wants to execute the query instead of generating a new one
-    if (currentQuery && currentQuery.trim() && isExecutionIntent(naturalLanguage)) {
-      aiInputText.value = ''; // Clear input
-      emit('run-query'); // Trigger query execution
-      return;
-    }
-
-    // Turn on NLP mode if not already on
-    if (!nlpMode.value) {
-      nlpMode.value = true;
-    }
-
-    // Call the CodeQueryEditor's handleGenerateSQL method directly
-    if (editorRef.value && typeof editorRef.value.handleGenerateSQL === 'function') {
-      try {
-        aiStatusText.value = t('search.generatingQuery');
-        await editorRef.value.handleGenerateSQL(naturalLanguage);
-        // Success is handled by handleGenerationSuccess event
-      } catch (error) {
-        console.error('[NLModeQueryBar] Query generation failed:', error);
-        aiStatusText.value = '';
-      }
-    } else {
-      console.error('[NLModeQueryBar] Editor ref not found or handleGenerateSQL not available');
-    }
-
-    // Still emit event for parent components that may need to react
-    emit('ask-ai', naturalLanguage);
-  } else {
-    // Normal mode - run query
-    emit('run-query');
-  }
-};
-
-// Handle generation lifecycle events
-const handleGenerationStart = () => {
-  isGenerating.value = true;
-};
-
-const handleGenerationEnd = () => {
-  isGenerating.value = false;
-};
-
-const handleGenerationSuccess = ({ type, message }: any) => {
-
-  // Show success message in AI status
-  aiStatusText.value = '✓ ' + t('search.queryGeneratedSuccess');
-
-  // Clear AI input text after successful generation
-  setTimeout(() => {
-    aiInputText.value = '';
-    aiStatusText.value = '';
-  }, 2000);
-
-  // After successful generation, turn off NLP mode
-  if (type === 'sql' || type === 'promql' || type === 'vrl') {
-    nlpMode.value = false;
-    isNaturalLanguageDetected.value = false;
-  }
-};
-
-// Expose methods for parent components
-defineExpose({
-  generateQuery: async () => {
-    if (editorRef.value?.handleGenerateSQL) {
-      await editorRef.value.handleGenerateSQL();
-    }
-  },
-  getValue: () => {
-    return editorRef.value?.getValue();
-  },
-  setValue: (value: string) => {
-    if (editorRef.value?.setValue) {
-      editorRef.value.setValue(value);
-    }
-  },
-  toggleNlpMode: (enabled: boolean) => {
-    nlpMode.value = enabled;
-  },
-});
-</script>
-
diff --git a/web/src/components/O2AIChat.spec.js b/web/src/components/O2AIChat.spec.js
index fb4fe794ef..652701d6b0 100644
--- a/web/src/components/O2AIChat.spec.js
+++ b/web/src/components/O2AIChat.spec.js
@@ -174,10 +174,9 @@ beforeEach(() => {
 
 // 1. Basic rendering
 describe('O2AIChat - basic rendering', () => {
-  it('renders container when closed and applies theme classes', async () => {
+  it('renders container when closed', async () => {
     const wrapper = await mountChat({ isOpen: false });
     expect(wrapper.find('.chat-container').exists()).toBe(true);
-    expect(wrapper.find('.dark-mode').exists() || wrapper.find('.light-mode').exists()).toBe(true);
   });
 
   it('renders content and header when open', async () => {
@@ -392,18 +391,19 @@ describe('O2AIChat - capabilities', () => {
   });
 });
 
-// 12. Theme classes
-describe('O2AIChat - theme classes', () => {
-  it('applies dark-mode classes when theme is dark', async () => {
-    store.state.theme = 'dark';
-    const wrapper = await mountChat({ isOpen: true });
-    expect(wrapper.find('.dark-mode').exists()).toBe(true);
-  });
-
-  it('applies light-mode classes when theme is light', async () => {
-    store.state.theme = 'light';
-    const wrapper = await mountChat({ isOpen: true });
-    expect(wrapper.find('.light-mode').exists()).toBe(true);
+// 12. Theming
+// The component no longer emits per-theme `.light-mode` / `.dark-mode` classes.
+// Colours now come from semantic design tokens that flip on the root `.dark`
+// class, so the rendered markup is theme-independent.
+describe('O2AIChat - theming', () => {
+  it('renders the same markup under either theme, with no per-theme class', async () => {
+    for (const theme of ['light', 'dark']) {
+      store.state.theme = theme;
+      const wrapper = await mountChat({ isOpen: true });
+      expect(wrapper.find('.chat-container').exists()).toBe(true);
+      expect(wrapper.find('.light-mode').exists()).toBe(false);
+      expect(wrapper.find('.dark-mode').exists()).toBe(false);
+    }
   });
 });
 
diff --git a/web/src/components/O2AIChat.vue b/web/src/components/O2AIChat.vue
index 04e38c46f1..279c4e1fb4 100644
--- a/web/src/components/O2AIChat.vue
+++ b/web/src/components/O2AIChat.vue
@@ -1,22 +1,19 @@
 <template>
   <div
-    class="chat-container w-full h-full flex flex-col overflow-hidden rounded-md text-[var(--q-primary-text)] bg-[var(--o2-card-bg-solid)] [box-shadow:0_0_5px_1px_var(--o2-hover-shadow)]"
+    class="chat-container w-full h-full flex flex-col overflow-hidden rounded-default text-text-body bg-card-glass-solid [box-shadow:0_0_5px_1px_var(--color-hover-shadow)]"
     :class="[
-      { 'chat-open': isOpen },
-      store.state.theme == 'dark' ? 'dark-mode' : 'light-mode',
-    ]"
+      { 'chat-open': isOpen },    ]"
   >
     <div
       v-if="isOpen"
       class="chat-content-wrapper flex flex-col h-full bg-transparent"
-      :class="store.state.theme == 'dark' ? 'dark-mode' : 'light-mode'"
     >
       <div
-        class="chat-header"
+        class="chat-header flex justify-between items-end shrink-0 z-2 px-3 pt-0 pb-1 border-b border-separator bg-surface-base"
         :style="{ height: headerHeight ? headerHeight + 'px' : '' }"
       >
         <div
-          class="chat-title flex justify-between items-center w-full"
+          class="chat-title flex justify-between items-center w-full font-bold"
         >
           <div class="flex items-center gap-2">
             <div class="inline-flex w-6 h-6 rounded-full overflow-hidden">
@@ -28,11 +25,11 @@
                 <OButton
                   variant="ghost"
                   size="sm"
-                  class="chat-title-dropdown"
+                  class="chat-title-dropdown flex items-center overflow-hidden max-w-52.5 h-8 min-h-8 px-3 py-1.5 rounded-default transition-colors duration-200 hover:bg-interactive-hover-bg"
                 >
-                  <div class="flex items-center gap-2 max-w-[220px]">
+                  <div class="flex items-center gap-2 max-w-55">
                     <span
-                      class="chat-title-text text-[14px] font-medium truncate block"
+                      class="chat-title-text text-sm font-medium truncate block max-w-45 text-text-body"
                     >
                       {{ displayedTitle || "New Chat" }}
                       <OTooltip
@@ -52,8 +49,8 @@
                 </OButton>
               </template>
               <!-- History menu with search -->
-              <div class="history-menu-container relative max-h-[450px] flex flex-col w-[300px]">
-                <div class="search-history-bar-sticky sticky top-0 z-[2] bg-[var(--q-page-background)] p-2 border-b border-[var(--color-separator)] shrink-0">
+              <div class="history-menu-container relative max-h-112.5 flex flex-col w-75">
+                <div class="search-history-bar-sticky sticky top-0 z-2 bg-surface-base p-2 border-b border-separator shrink-0">
                   <OSearchInput
                     v-model="historySearchTerm"
                     placeholder="Search chat history"
@@ -61,13 +58,7 @@
                   />
                 </div>
                 <div
-                  class="history-list-container flex-1 overflow-y-auto overflow-x-hidden max-h-[350px]"
-                  style="
-                    min-width: 200px;
-                    width: 300px;
-                    max-width: 300px;
-                    border: 1px solid var(--o2-border);
-                  "
+                  class="history-list-container flex-1 overflow-y-auto overflow-x-hidden max-h-87.5 min-w-50 w-75 max-w-75 border border-border-default"
                 >
                   <ODropdownItem
                     v-for="chat in filteredChatHistory"
@@ -79,10 +70,10 @@
                       class="flex items-center justify-between w-full"
                     >
                       <div class="flex-1 overflow-hidden">
-                        <div class="text-[13px] truncate">
+                        <div class="text-compact truncate">
                           {{ chat.title }}
                         </div>
-                        <div class="text-[11px] text-gray-500">
+                        <div class="text-2xs text-text-secondary">
                           {{ formatTime(chat.timestamp) }}
                         </div>
                       </div>
@@ -99,7 +90,7 @@
                   </ODropdownItem>
                   <div
                     v-if="filteredChatHistory.length === 0"
-                    class="text-center text-gray-500 p-2"
+                    class="text-center text-text-muted p-2"
                   >
                     No matching chats found
                   </div>
@@ -108,12 +99,12 @@
                 <!-- Clear all conversations button -->
                 <div
                   v-if="filteredChatHistory.length > 0"
-                  class="clear-all-container bg-[var(--q-page-background)] p-2 border-t border-[var(--color-separator)] shrink-0"
+                  class="clear-all-container bg-surface-base p-2 border-t border-separator shrink-0"
                 >
                   <ODropdownSeparator />
                   <OButton
                     variant="ghost"
-                    class="clear-all-btn w-full text-[var(--q-negative)] text-[13px] hover:bg-[rgba(var(--q-negative-rgb),0.1)]"
+                    class="clear-all-btn w-full text-[var(--color-status-negative)] text-compact hover:bg-[color-mix(in_srgb,var(--color-status-negative)_10%,transparent)]"
                     @click.stop="clearAllConversations"
                   >
                     <template #icon-left>
@@ -164,10 +155,10 @@
           </div>
         </div>
       </div>
-      <OSeparator class="bg-[#DBDBDB]" />
+      <OSeparator class="bg-separator" />
 
       <!-- History Panel -->
-      <ODrawer data-test="o2-ai-chat-history-drawer" v-model:open="showHistory" size="sm" title="Chat History">
+      <ODrawer data-test="o2-ai-chat-history-drawer" bleed v-model:open="showHistory" size="sm" title="Chat History">
         <ul class="flex flex-col divide-y divide-border">
           <li
             v-for="chat in chatHistory"
@@ -239,31 +230,34 @@
               'data:' + previewImage.mimeType + ';base64,' + previewImage.data
             "
             :alt="previewImage.filename"
-            style="max-width: 100%; max-height: 80vh; object-fit: contain"
+            class="max-w-full max-h-[80vh] object-contain"
           />
         </div>
       </ODialog>
 
       <div
-        class="chat-content"
-        :class="store.state.theme == 'dark' ? 'dark-mode' : 'light-mode'"
+        class="chat-content relative flex flex-col flex-1 min-h-0 overflow-hidden bg-transparent"
       >
         <div
-          class="messages-container"
+          class="messages-container flex flex-col flex-1 min-h-0 overflow-y-auto gap-4 p-2 w-full max-w-225 mx-auto bg-transparent"
           ref="messagesContainer"
           @scroll="checkIfShouldAutoScroll"
         >
           <div
             v-if="chatMessages.length === 0"
-            class="welcome-section"
-            :class="{ 'welcome-section--centered': centeredStart }"
+            class="welcome-section flex flex-1 items-center justify-center rounded-default"
+            :class="
+              centeredStart
+                ? 'p-0 mb-0 bg-transparent'
+                : 'p-6 mb-6 [background:linear-gradient(to_right,color-mix(in_srgb,var(--color-theme-accent)_5%,transparent),color-mix(in_srgb,var(--color-theme-accent)_10%,transparent))]'
+            "
           >
             <!-- Home tab: rich V2 welcome -->
             <O2AIHomeWelcome
               v-if="centeredStart"
               @select-prompt="selectWelcomePrompt"
             />
-            <!-- Sidepanel: minimal logo + title (unchanged) -->
+            <!-- Sidepanel: minimal logo + title -->
             <div
               v-else
               class="flex flex-col items-center justify-center h-full w-full"
@@ -272,10 +266,10 @@
                 <img :src="o2AiTitleLogo" />
                 <div class="relative inline-block">
                   <span
-                    class="text-[14px] font-[600] ml-[30px] text-center"
+                    class="text-sm font-[600] ml-7.5 text-center"
                     >O2 Assistant</span
                   >
-                  <span class="o2-ai-beta-text ml-[8px] relative text-[var(--q-primary)] text-[8px] px-1 rounded-[10px] text-center border border-[var(--q-primary)] uppercase font-semibold [letter-spacing:0.5px] w-[34px]">BETA</span>
+                  <span class="o2-ai-beta-text ml-2 relative text-[var(--color-theme-accent)] text-3xs px-1 rounded-default text-center border border-[var(--color-theme-accent)] uppercase font-semibold [letter-spacing:0.5px] w-8.5">BETA</span>
                 </div>
               </div>
             </div>
@@ -283,37 +277,31 @@
           <div
             v-for="(message, index) in processedMessages"
             :key="index"
-            class="message"
+            class="message p-3 rounded-default border border-border-default [box-shadow:0_1px_2px_color-mix(in_srgb,var(--color-text-heading)_10%,transparent)]"
             :class="[
               message.role,
+              message.role === 'user'
+                ? 'ml-10 w-[calc(100%-2.5rem)] [background:var(--color-chat-bubble-ai)] text-text-body dark:text-text-secondary'
+                : 'ml-0 w-full bg-surface-base text-text-body dark:text-text-secondary',
               { 'error-message': message.content.startsWith('Error:') },
             ]"
           >
-            <div class="message-content">
+            <div class="message-content flex items-start gap-1.5 w-full">
               <div
                 v-if="message.role === 'user'"
-                class="inline-flex items-center justify-center w-6 h-6 rounded-full text-white"
-                :class="
-                  store.state.theme == 'dark'
-                    ? '[background:linear-gradient(135deg,#4c63d2_0%,#5a67d8_100%)]'
-                    : '[background:linear-gradient(135deg,#8b5cf6_0%,#ec4899_100%)]'
-                "
+                class="inline-flex items-center justify-center w-6 h-6 rounded-full text-text-inverse [background:var(--color-gradient-ai)] shrink-0"
               >
                 <OIcon
                   size="sm"
                   name="person"
-                  class='text-white'
+                  class='text-text-inverse'
                 />
               </div>
               <div
-                class="message-blocks"
-                style="background-color: transparent"
-                :class="
-                  store.state.theme == 'dark' ? 'dark-mode' : 'light-mode'
-                "
+                class="message-blocks flex flex-col flex-1 gap-0 min-w-0 max-w-full overflow-x-auto [word-wrap:break-word] wrap-break-word bg-transparent"
               >
                 <!-- Loading indicator inside message box for empty assistant messages -->
-                <div v-if="message.role === 'assistant' && (!message.contentBlocks || message.contentBlocks.length === 0) && (!message.content || message.content.trim() === '') && isLoading" class="inline-loading flex items-center gap-[10px] py-2 text-[#6b7280] text-sm">
+                <div v-if="message.role === 'assistant' && (!message.contentBlocks || message.contentBlocks.length === 0) && (!message.content || message.content.trim() === '') && isLoading" class="inline-loading flex items-center gap-2.5 py-2 text-text-secondary text-sm">
                   <OSpinner variant="dots" size="sm" />
                   <span>{{ currentAnalyzingMessage }}</span>
                 </div>
@@ -325,9 +313,8 @@
                   <!-- Tool call block - expandable -->
                   <div
                     v-if="block.type === 'tool_call'"
-                    class="tool-call-item"
+                    class="tool-call-item flex flex-col px-3 py-2 rounded-default text-compact mb-2"
                     :class="[
-                      store.state.theme == 'dark' ? 'dark-mode' : 'light-mode',
                       { 'has-details': hasToolCallDetails(block) },
                       {
                         error:
@@ -350,7 +337,7 @@
                       toggleToolCallExpanded(index, blockIndex)
                     "
                   >
-                    <div class="tool-call-header">
+                    <div class="tool-call-header flex items-center gap-2">
                       <OIcon
                         :name="
                           block.pendingConfirmation
@@ -365,14 +352,14 @@
                         :class="
                           block.pendingConfirmation
                             ? block.tool === 'navigation_action'
-                              ? 'text-[var(--o2-primary)]'
-                              : 'text-[var(--o2-warning)]'
+                              ? 'text-accent'
+                              : 'text-warning'
                             : block.success === false
-                              ? 'text-[var(--o2-negative)]'
-                              : 'text-[var(--o2-positive)]'
+                              ? 'text-status-negative'
+                              : 'text-status-positive'
                         "
                       />
-                      <span class="tool-call-name">
+                      <span class="tool-call-name font-medium flex-1">
                         {{ formatToolCallMessage(block).text
                         }}<strong
                           v-if="formatToolCallMessage(block).highlight"
@@ -386,7 +373,7 @@
                         "
                         name="open-in-new"
                         size="xs"
-                        class="navigation-icon"
+                        class="navigation-icon cursor-pointer ml-auto opacity-70 transition-opacity duration-200 hover:opacity-100"
                         @click.stop="
                           handleNavigationAction(block.navigationAction)
                         "
@@ -404,32 +391,32 @@
                             : 'expand-more'
                         "
                         size="sm"
-                        class="expand-icon"
+                        class="expand-icon opacity-60 transition-transform duration-200"
                       />
                     </div>
                     <!-- Expandable details -->
                     <div
                       v-if="isToolCallExpanded(index, blockIndex)"
-                      class="tool-call-details"
+                      class="tool-call-details mt-2.5 pt-2.5 border-t border-border-default flex flex-col gap-2"
                       @click.stop
                     >
                       <!-- Error details for failed tool calls -->
                       <template v-if="block.success === false">
-                        <div v-if="block.resultMessage" class="detail-item">
-                          <span class="detail-label">Error</span>
-                          <span class="detail-value tool-error-message">{{
+                        <div v-if="block.resultMessage" class="detail-item flex flex-col gap-1">
+                          <span class="detail-label text-2xs font-semibold uppercase opacity-60">Error</span>
+                          <span class="detail-value text-xs select-text text-status-negative">{{
                             block.resultMessage
                           }}</span>
                         </div>
-                        <div v-if="block.errorType" class="detail-item">
-                          <span class="detail-label">Type</span>
-                          <code class="detail-value">{{
+                        <div v-if="block.errorType" class="detail-item flex flex-col gap-1">
+                          <span class="detail-label text-2xs font-semibold uppercase opacity-60">Type</span>
+                          <code class="detail-value text-xs select-text">{{
                             block.errorType
                           }}</code>
                         </div>
-                        <div v-if="block.suggestion" class="detail-item">
-                          <span class="detail-label">Suggestion</span>
-                          <span class="detail-value tool-suggestion">{{
+                        <div v-if="block.suggestion" class="detail-item flex flex-col gap-1">
+                          <span class="detail-label text-2xs font-semibold uppercase opacity-60">Suggestion</span>
+                          <span class="detail-value text-xs select-text italic opacity-85">{{
                             block.suggestion
                           }}</span>
                         </div>
@@ -438,66 +425,66 @@
                       <template v-if="block.success !== false && block.summary">
                         <div
                           v-if="block.summary.count !== undefined"
-                          class="detail-item"
+                          class="detail-item flex flex-col gap-1"
                         >
-                          <span class="detail-label">Results</span>
-                          <span class="detail-value"
+                          <span class="detail-label text-2xs font-semibold uppercase opacity-60">Results</span>
+                          <span class="detail-value text-xs select-text"
                             >{{ block.summary.count }} records</span
                           >
                         </div>
                         <div
                           v-if="block.summary.took !== undefined"
-                          class="detail-item"
+                          class="detail-item flex flex-col gap-1"
                         >
-                          <span class="detail-label">Duration</span>
-                          <span class="detail-value"
+                          <span class="detail-label text-2xs font-semibold uppercase opacity-60">Duration</span>
+                          <span class="detail-value text-xs select-text"
                             >{{ block.summary.took }}ms</span
                           >
                         </div>
                         <!-- CLI tool summary (return_code / stdout_lines / stderr_lines / truncated) -->
                         <div
                           v-if="block.summary.return_code !== undefined"
-                          class="detail-item"
+                          class="detail-item flex flex-col gap-1"
                         >
-                          <span class="detail-label">Exit code</span>
-                          <code class="detail-value">{{
+                          <span class="detail-label text-2xs font-semibold uppercase opacity-60">Exit code</span>
+                          <code class="detail-value text-xs select-text">{{
                             block.summary.return_code
                           }}</code>
                         </div>
                         <div
                           v-if="block.summary.stdout_lines !== undefined"
-                          class="detail-item"
+                          class="detail-item flex flex-col gap-1"
                         >
-                          <span class="detail-label">Stdout</span>
-                          <span class="detail-value"
+                          <span class="detail-label text-2xs font-semibold uppercase opacity-60">Stdout</span>
+                          <span class="detail-value text-xs select-text"
                             >{{ block.summary.stdout_lines }} lines</span
                           >
                         </div>
                         <div
                           v-if="block.summary.stderr_lines"
-                          class="detail-item"
+                          class="detail-item flex flex-col gap-1"
                         >
-                          <span class="detail-label">Stderr</span>
-                          <span class="detail-value"
+                          <span class="detail-label text-2xs font-semibold uppercase opacity-60">Stderr</span>
+                          <span class="detail-value text-xs select-text"
                             >{{ block.summary.stderr_lines }} lines</span
                           >
                         </div>
-                        <div v-if="block.summary.truncated" class="detail-item">
-                          <span class="detail-label">Output</span>
-                          <span class="detail-value">truncated</span>
+                        <div v-if="block.summary.truncated" class="detail-item flex flex-col gap-1">
+                          <span class="detail-label text-2xs font-semibold uppercase opacity-60">Output</span>
+                          <span class="detail-value text-xs select-text">truncated</span>
                         </div>
                       </template>
                       <!-- Existing context details -->
                       <div
                         v-if="getToolCallDisplayData(block.context)?.query"
-                        class="detail-item"
+                        class="detail-item flex flex-col gap-1"
                       >
-                        <div class="detail-header">
-                          <span class="detail-label">Query</span>
+                        <div class="detail-header flex items-center justify-between">
+                          <span class="detail-label text-2xs font-semibold uppercase opacity-60">Query</span>
                           <OButton
                             variant="ghost"
                             size="icon-xs-circle"
-                            class="copy-btn"
+                            class="copy-btn opacity-60 hover:opacity-100"
                             @click.stop="
                               copyToClipboard(
                                 getToolCallDisplayData(block.context)?.query,
@@ -508,34 +495,34 @@
                             <OTooltip content="Copy query" />
                           </OButton>
                         </div>
-                        <code class="detail-value query-value">{{
+                        <code class="detail-value query-value text-xs select-text font-mono p-2 rounded-default whitespace-pre-wrap break-all cursor-text [background:color-mix(in_srgb,var(--color-text-heading)_5%,transparent)]">{{
                           getToolCallDisplayData(block.context)?.query
                         }}</code>
                       </div>
                       <div
                         v-if="getToolCallDisplayData(block.context)?.stream"
-                        class="detail-item"
+                        class="detail-item flex flex-col gap-1"
                       >
-                        <span class="detail-label">Stream</span>
-                        <code class="detail-value">{{
+                        <span class="detail-label text-2xs font-semibold uppercase opacity-60">Stream</span>
+                        <code class="detail-value text-xs select-text">{{
                           getToolCallDisplayData(block.context)?.stream
                         }}</code>
                       </div>
                       <div
                         v-if="getToolCallDisplayData(block.context)?.type"
-                        class="detail-item"
+                        class="detail-item flex flex-col gap-1"
                       >
-                        <span class="detail-label">Type</span>
-                        <code class="detail-value">{{
+                        <span class="detail-label text-2xs font-semibold uppercase opacity-60">Type</span>
+                        <code class="detail-value text-xs select-text">{{
                           getToolCallDisplayData(block.context)?.type
                         }}</code>
                       </div>
                       <div
                         v-if="getToolCallDisplayData(block.context)?.start_time"
-                        class="detail-item"
+                        class="detail-item flex flex-col gap-1"
                       >
-                        <span class="detail-label">Start</span>
-                        <span class="detail-value">{{
+                        <span class="detail-label text-2xs font-semibold uppercase opacity-60">Start</span>
+                        <span class="detail-value text-xs select-text">{{
                           formatTimestamp(
                             getToolCallDisplayData(block.context)?.start_time,
                           )
@@ -543,10 +530,10 @@
                       </div>
                       <div
                         v-if="getToolCallDisplayData(block.context)?.end_time"
-                        class="detail-item"
+                        class="detail-item flex flex-col gap-1"
                       >
-                        <span class="detail-label">End</span>
-                        <span class="detail-value">{{
+                        <span class="detail-label text-2xs font-semibold uppercase opacity-60">End</span>
+                        <span class="detail-value text-xs select-text">{{
                           formatTimestamp(
                             getToolCallDisplayData(block.context)?.end_time,
                           )
@@ -557,10 +544,10 @@
                           getToolCallDisplayData(block.context)?.from !==
                           undefined
                         "
-                        class="detail-item"
+                        class="detail-item flex flex-col gap-1"
                       >
-                        <span class="detail-label">From</span>
-                        <span class="detail-value">{{
+                        <span class="detail-label text-2xs font-semibold uppercase opacity-60">From</span>
+                        <span class="detail-value text-xs select-text">{{
                           getToolCallDisplayData(block.context)?.from
                         }}</span>
                       </div>
@@ -569,32 +556,32 @@
                           getToolCallDisplayData(block.context)?.size !==
                           undefined
                         "
-                        class="detail-item"
+                        class="detail-item flex flex-col gap-1"
                       >
-                        <span class="detail-label">Size</span>
-                        <span class="detail-value">{{
+                        <span class="detail-label text-2xs font-semibold uppercase opacity-60">Size</span>
+                        <span class="detail-value text-xs select-text">{{
                           getToolCallDisplayData(block.context)?.size
                         }}</span>
                       </div>
                       <div
                         v-if="getToolCallDisplayData(block.context)?.query_type"
-                        class="detail-item"
+                        class="detail-item flex flex-col gap-1"
                       >
-                        <span class="detail-label">Query Type</span>
-                        <code class="detail-value">{{
+                        <span class="detail-label text-2xs font-semibold uppercase opacity-60">Query Type</span>
+                        <code class="detail-value text-xs select-text">{{
                           getToolCallDisplayData(block.context)?.query_type
                         }}</code>
                       </div>
                       <div
                         v-if="getToolCallDisplayData(block.context)?.vrl"
-                        class="detail-item"
+                        class="detail-item flex flex-col gap-1"
                       >
-                        <div class="detail-header">
-                          <span class="detail-label">VRL</span>
+                        <div class="detail-header flex items-center justify-between">
+                          <span class="detail-label text-2xs font-semibold uppercase opacity-60">VRL</span>
                           <OButton
                             variant="ghost"
                             size="icon-xs-circle"
-                            class="copy-btn"
+                            class="copy-btn opacity-60 hover:opacity-100"
                             @click.stop="
                               copyToClipboard(
                                 getToolCallDisplayData(block.context)?.vrl,
@@ -605,20 +592,20 @@
                             <OTooltip content="Copy VRL" />
                           </OButton>
                         </div>
-                        <code class="detail-value query-value">{{
+                        <code class="detail-value query-value text-xs select-text font-mono p-2 rounded-default whitespace-pre-wrap break-all cursor-text [background:color-mix(in_srgb,var(--color-text-heading)_5%,transparent)]">{{
                           getToolCallDisplayData(block.context)?.vrl
                         }}</code>
                       </div>
                       <div
                         v-if="getToolCallDisplayData(block.context)?.command"
-                        class="detail-item"
+                        class="detail-item flex flex-col gap-1"
                       >
-                        <div class="detail-header">
-                          <span class="detail-label">Command</span>
+                        <div class="detail-header flex items-center justify-between">
+                          <span class="detail-label text-2xs font-semibold uppercase opacity-60">Command</span>
                           <OButton
                             variant="ghost"
                             size="icon-xs-circle"
-                            class="copy-btn"
+                            class="copy-btn opacity-60 hover:opacity-100"
                             @click.stop="
                               copyToClipboard(
                                 getToolCallDisplayData(block.context)?.command,
@@ -629,19 +616,19 @@
                             <OTooltip content="Copy command" />
                           </OButton>
                         </div>
-                        <code class="detail-value query-value">{{
+                        <code class="detail-value query-value text-xs select-text font-mono p-2 rounded-default whitespace-pre-wrap break-all cursor-text [background:color-mix(in_srgb,var(--color-text-heading)_5%,transparent)]">{{
                           getToolCallDisplayData(block.context)?.command
                         }}</code>
                       </div>
                       <!-- Tool response: SearchSQL hits -->
                       <template v-if="block.response && block.response.hits">
-                        <div class="detail-item">
-                          <div class="detail-header">
-                            <span class="detail-label">Results</span>
+                        <div class="detail-item flex flex-col gap-1">
+                          <div class="detail-header flex items-center justify-between">
+                            <span class="detail-label text-2xs font-semibold uppercase opacity-60">Results</span>
                             <OButton
                               variant="ghost"
                               size="icon-xs-circle"
-                              class="copy-btn"
+                              class="copy-btn opacity-60 hover:opacity-100"
                               @click.stop="
                                 copyToClipboard(
                                   JSON.stringify(block.response.hits, null, 2),
@@ -652,24 +639,24 @@
                               <OTooltip content="Copy results" />
                             </OButton>
                           </div>
-                          <div class="tool-response-hits">
+                          <div class="tool-response-hits flex flex-col gap-1 text-xs font-mono px-2 py-1.5 rounded-default max-h-50 overflow-y-auto [background:color-mix(in_srgb,var(--color-text-heading)_5%,transparent)]">
                             <div
                               v-for="(hit, hIdx) in block.response.hits"
                               :key="hIdx"
-                              class="tool-response-hit"
+                              class="tool-response-hit flex flex-wrap gap-x-3 gap-y-1 py-0.5 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-border-default [&:not(:last-child)]:pb-1"
                             >
                               <span
                                 v-for="(val, key) in hit"
                                 :key="key"
-                                class="hit-field"
+                                class="hit-field break-all select-text cursor-text"
                               >
-                                <span class="hit-key">{{ key }}:</span>
+                                <span class="hit-key opacity-60 font-semibold">{{ key }}:</span>
                                 {{ val }}
                               </span>
                             </div>
                           </div>
                         </div>
-                        <div class="tool-response-meta">
+                        <div class="tool-response-meta flex flex-wrap gap-1.5 mt-1">
                           <span
                             v-if="block.response.total !== undefined"
                             class="context-tag"
@@ -695,20 +682,20 @@
                           (block.response.input || block.response.output)
                         "
                       >
-                        <div v-if="block.response.input" class="detail-item">
-                          <span class="detail-label">Input Events</span>
-                          <div class="tool-response-hits">
+                        <div v-if="block.response.input" class="detail-item flex flex-col gap-1">
+                          <span class="detail-label text-2xs font-semibold uppercase opacity-60">Input Events</span>
+                          <div class="tool-response-hits flex flex-col gap-1 text-xs font-mono px-2 py-1.5 rounded-default max-h-50 overflow-y-auto [background:color-mix(in_srgb,var(--color-text-heading)_5%,transparent)]">
                             <div
                               v-for="(evt, eIdx) in block.response.input"
                               :key="eIdx"
-                              class="tool-response-hit"
+                              class="tool-response-hit flex flex-wrap gap-x-3 gap-y-1 py-0.5 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-border-default [&:not(:last-child)]:pb-1"
                             >
                               <span
                                 v-for="(val, key) in evt"
                                 :key="key"
-                                class="hit-field"
+                                class="hit-field break-all select-text cursor-text"
                               >
-                                <span class="hit-key">{{ key }}:</span>
+                                <span class="hit-key opacity-60 font-semibold">{{ key }}:</span>
                                 {{
                                   typeof val === "string" && val.length > 120
                                     ? val.substring(0, 120) + "..."
@@ -718,21 +705,21 @@
                             </div>
                           </div>
                         </div>
-                        <div v-if="block.response.output" class="detail-item">
-                          <span class="detail-label">Output</span>
-                          <div class="tool-response-hits">
+                        <div v-if="block.response.output" class="detail-item flex flex-col gap-1">
+                          <span class="detail-label text-2xs font-semibold uppercase opacity-60">Output</span>
+                          <div class="tool-response-hits flex flex-col gap-1 text-xs font-mono px-2 py-1.5 rounded-default max-h-50 overflow-y-auto [background:color-mix(in_srgb,var(--color-text-heading)_5%,transparent)]">
                             <div
                               v-for="(res, rIdx) in block.response.output"
                               :key="rIdx"
-                              class="tool-response-hit"
+                              class="tool-response-hit flex flex-wrap gap-x-3 gap-y-1 py-0.5 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-border-default [&:not(:last-child)]:pb-1"
                             >
                               <template v-if="res.event">
                                 <span
                                   v-for="(val, key) in res.event"
                                   :key="key"
-                                  class="hit-field"
+                                  class="hit-field break-all select-text cursor-text"
                                 >
-                                  <span class="hit-key">{{ key }}:</span>
+                                  <span class="hit-key opacity-60 font-semibold">{{ key }}:</span>
                                   {{
                                     typeof val === "string" && val.length > 120
                                       ? val.substring(0, 120) + "..."
@@ -742,9 +729,9 @@
                               </template>
                               <span
                                 v-if="res.message"
-                                class="hit-field hit-error"
+                                class="hit-field break-all select-text cursor-text text-status-negative"
                               >
-                                <span class="hit-key">error:</span>
+                                <span class="hit-key opacity-60 font-semibold">error:</span>
                                 {{ res.message }}
                               </span>
                             </div>
@@ -761,14 +748,14 @@
                       >
                         <div
                           v-if="block.response.items.length > 0"
-                          class="detail-item"
+                          class="detail-item flex flex-col gap-1"
                         >
-                          <div class="detail-header">
-                            <span class="detail-label">Items</span>
+                          <div class="detail-header flex items-center justify-between">
+                            <span class="detail-label text-2xs font-semibold uppercase opacity-60">Items</span>
                             <OButton
                               variant="ghost"
                               size="icon-xs-circle"
-                              class="copy-btn"
+                              class="copy-btn opacity-60 hover:opacity-100"
                               @click.stop="
                                 copyToClipboard(
                                   JSON.stringify(block.response.items, null, 2),
@@ -779,18 +766,18 @@
                               <OTooltip content="Copy items" />
                             </OButton>
                           </div>
-                          <div class="tool-response-hits">
+                          <div class="tool-response-hits flex flex-col gap-1 text-xs font-mono px-2 py-1.5 rounded-default max-h-50 overflow-y-auto [background:color-mix(in_srgb,var(--color-text-heading)_5%,transparent)]">
                             <div
                               v-for="(item, iIdx) in block.response.items"
                               :key="iIdx"
-                              class="tool-response-list-item"
+                              class="tool-response-list-item flex flex-col gap-0.5 py-1 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-border-default [&:not(:last-child)]:pb-1.5"
                             >
                               <div
                                 v-for="(val, key) in item"
                                 :key="key"
-                                class="hit-field"
+                                class="hit-field break-all select-text cursor-text"
                               >
-                                <span class="hit-key">{{ key }}:</span>
+                                <span class="hit-key opacity-60 font-semibold">{{ key }}:</span>
                                 {{
                                   typeof val === "object"
                                     ? JSON.stringify(val)
@@ -802,13 +789,13 @@
                         </div>
                       </template>
                       <!-- Tool response: generic fallback (string or other) -->
-                      <div v-else-if="block.response" class="detail-item">
-                        <div class="detail-header">
-                          <span class="detail-label">Response</span>
+                      <div v-else-if="block.response" class="detail-item flex flex-col gap-1">
+                        <div class="detail-header flex items-center justify-between">
+                          <span class="detail-label text-2xs font-semibold uppercase opacity-60">Response</span>
                           <OButton
                             variant="ghost"
                             size="icon-xs-circle"
-                            class="copy-btn"
+                            class="copy-btn opacity-60 hover:opacity-100"
                             @click.stop="
                               copyToClipboard(
                                 typeof block.response === 'string'
@@ -821,7 +808,7 @@
                             <OTooltip content="Copy response" />
                           </OButton>
                         </div>
-                        <code class="detail-value query-value">{{
+                        <code class="detail-value query-value text-xs select-text font-mono p-2 rounded-default whitespace-pre-wrap break-all cursor-text [background:color-mix(in_srgb,var(--color-text-heading)_5%,transparent)]">{{
                           typeof block.response === "string"
                             ? block.response
                             : JSON.stringify(block.response, null, 2)
@@ -832,15 +819,14 @@
                   <!-- Log Entry block - expandable -->
                   <div
                     v-else-if="block.type === 'log_entry'"
-                    class="log-entry-item"
-                    :class="[
-                      store.state.theme == 'dark' ? 'dark-mode' : 'light-mode',
-                    ]"
+                    class="log-entry-item flex flex-col px-2.5 py-1.5 rounded-default text-xs mb-1 cursor-pointer text-text-secondary [background:color-mix(in_srgb,var(--color-info)_8%,transparent)] hover:[background:color-mix(in_srgb,var(--color-info)_12%,transparent)] dark:bg-surface-panel dark:border dark:border-border-default dark:hover:bg-surface-panel dark:hover:border-text-secondary"
                     @click="toggleLogEntryExpanded(index, blockIndex)"
                   >
-                    <div class="log-entry-header">
+                    <div class="log-entry-header flex items-center gap-1.5">
                       <OIcon name="description" size="xs" />
-                      <span class="log-entry-info">
+                      <span
+                        class="log-entry-info flex-1 font-medium text-xs overflow-hidden text-ellipsis whitespace-nowrap"
+                      >
                         {{ block.preview }}
                       </span>
                       <OIcon
@@ -850,27 +836,29 @@
                             : 'expand-more'
                         "
                         size="sm"
-                        class="expand-icon"
+                        class="expand-icon opacity-60 transition-transform duration-200"
                       />
                     </div>
                     <!-- Expandable details -->
                     <div
                       v-if="isLogEntryExpanded(index, blockIndex)"
-                      class="log-entry-details"
+                      class="log-entry-details mt-2.5"
                       @click.stop
                     >
-                      <div class="log-entry-content">
+                      <div
+                        class="log-entry-content relative rounded-default border overflow-hidden bg-surface-base border-border-default [box-shadow:0_2px_8px_color-mix(in_srgb,var(--color-black)_8%,transparent)] dark:bg-surface-panel dark:[box-shadow:0_2px_8px_color-mix(in_srgb,var(--color-black)_20%,transparent)]"
+                      >
                         <OButton
                           variant="ghost"
                           size="icon-xs-circle"
-                          class="copy-btn"
+                          class="copy-btn opacity-60 hover:opacity-100 absolute top-2 right-2 z-1 rounded-default px-2 py-1 [background:color-mix(in_srgb,var(--color-text-heading)_10%,transparent)] hover:[background:color-mix(in_srgb,var(--color-text-heading)_8%,transparent)] dark:hover:[background:color-mix(in_srgb,var(--color-text-heading)_15%,transparent)]"
                           @click.stop="copyToClipboard(block.content)"
                         >
                           <OIcon name="content-copy" size="sm" />
                           <OTooltip content="Copy content" />
                         </OButton>
                         <code
-                          class="log-entry-code"
+                          class="log-entry-code block font-mono text-2xs leading-relaxed p-3 pr-10 whitespace-pre-wrap [word-wrap:break-word] select-text cursor-text max-h-75 overflow-y-auto bg-surface-base text-text-body dark:[background:var(--color-syntax-bg)] dark:text-text-secondary"
                           v-html="formatLogEntryContent(block.content)"
                         ></code>
                       </div>
@@ -879,26 +867,23 @@
                   <!-- Stream-level error block -->
                   <div
                     v-else-if="block.type === 'error'"
-                    class="stream-error-block"
-                    :class="
-                      store.state.theme == 'dark' ? 'dark-mode' : 'light-mode'
-                    "
+                    class="stream-error-block flex flex-col px-3 py-2.5 rounded-default border-l-3 border-border-default mb-2 text-compact text-text-secondary [background:color-mix(in_srgb,var(--color-status-negative)_6%,transparent)] dark:[background:color-mix(in_srgb,var(--color-status-negative)_10%,transparent)]"
                   >
-                    <div class="stream-error-header">
+                    <div class="stream-error-header flex items-center gap-2">
                       <OIcon name="warning" size="sm" />
-                      <span class="stream-error-message">{{
+                      <span class="stream-error-message font-medium text-status-negative">{{
                         block.message
                       }}</span>
                     </div>
                     <div
                       v-if="block.suggestion"
-                      class="stream-error-suggestion"
+                      class="stream-error-suggestion mt-1.5 pl-6 italic text-xs opacity-85"
                     >
                       {{ block.suggestion }}
                     </div>
                     <div
                       v-if="block.recoverable"
-                      class="stream-error-recoverable"
+                      class="stream-error-recoverable mt-1 pl-6 text-2xs opacity-70"
                     >
                       This error may be temporary. You can try again.
                     </div>
@@ -908,15 +893,12 @@
                     v-else-if="
                       block.type === 'navigation' && block.navigationAction
                     "
-                    class="navigation-block"
-                    :class="
-                      store.state.theme == 'dark' ? 'dark-mode' : 'light-mode'
-                    "
+                    class="navigation-block my-1 [background:color-mix(in_srgb,var(--color-info)_8%,transparent)] dark:[background:color-mix(in_srgb,var(--color-info)_12%,transparent)]"
                   >
                     <OButton
                       variant="primary"
                       size="xs"
-                      class="navigation-block-btn"
+                      class="navigation-block-btn text-compact"
                       @click="handleNavigationAction(block.navigationAction)"
                     >
                       <template #icon-left
@@ -933,11 +915,16 @@
                       )"
                       :key="'tb-' + blockIndex + '-' + tbIndex"
                     >
-                      <div v-if="textBlock.type === 'code'" class="code-block">
-                        <div class="code-block-header code-block-theme">
+                      <div
+                        v-if="textBlock.type === 'code'"
+                        class="code-block rounded-default m-0 overflow-hidden"
+                      >
+                        <div
+                          class="code-block-header flex items-center justify-between px-2 py-1 bg-surface-subtle"
+                        >
                           <span
                             v-if="textBlock.language"
-                            class="code-type-label"
+                            class="code-type-label text-xs font-semibold px-1.5 py-0.5 rounded-default text-theme-accent dark:text-text-secondary [background:color-mix(in_srgb,var(--color-theme-accent)_10%,transparent)]"
                           >
                             {{ getLanguageDisplay(textBlock.language) }}
                           </span>
@@ -958,7 +945,7 @@
                           ></code>
                         </span>
                         <div
-                          class="code-block-footer code-block-theme flex items-center justify-between w-full"
+                          class="code-block-footer flex items-center justify-between w-full px-2 py-1"
                         >
                           <OButton
                             variant="ghost"
@@ -973,7 +960,7 @@
                       </div>
                       <div
                         v-else
-                        class="text-block"
+                        class="text-block w-full max-w-full wrap-break-word [&:not(:last-child)]:mb-1"
                         v-html="processHtmlBlock(textBlock.content)"
                       ></div>
                     </template>
@@ -1002,7 +989,7 @@
                       <img
                         :src="'data:' + img.mimeType + ';base64,' + img.data"
                         :alt="img.filename"
-                        class="max-w-[200px] max-h-[150px] object-contain rounded-lg border border-gray-300 cursor-pointer [transition:transform_0.2s_ease,box-shadow_0.2s_ease]"
+                        class="max-w-50 max-h-37.5 object-contain rounded-default border border-border-default cursor-pointer [transition:transform_0.2s_ease,box-shadow_0.2s_ease] hover:scale-102 hover:shadow-[0_4px_12px_color-mix(in_srgb,var(--color-black)_15%,transparent)]"
                         @click="openImagePreview(img)"
                       />
                       <OTooltip :content="img.filename" />
@@ -1012,9 +999,17 @@
                     v-for="(block, blockIndex) in message.blocks"
                     :key="'fb-' + blockIndex"
                   >
-                    <div v-if="block.type === 'code'" class="code-block">
-                      <div class="code-block-header code-block-theme">
-                        <span v-if="block.language" class="code-type-label">
+                    <div
+                      v-if="block.type === 'code'"
+                      class="code-block rounded-default m-0 overflow-hidden"
+                    >
+                      <div
+                        class="code-block-header flex items-center justify-between px-2 py-1 bg-surface-subtle"
+                      >
+                        <span
+                          v-if="block.language"
+                          class="code-type-label text-xs font-semibold px-1.5 py-0.5 rounded-default text-theme-accent dark:text-text-secondary [background:color-mix(in_srgb,var(--color-theme-accent)_10%,transparent)]"
+                        >
                           {{ getLanguageDisplay(block.language) }}
                         </span>
                         <OButton
@@ -1036,7 +1031,7 @@
                     </div>
                     <div
                       v-else
-                      class="text-block"
+                      class="text-block w-full max-w-full wrap-break-word [&:not(:last-child)]:mb-1"
                       v-html="processHtmlBlock(block.content)"
                     ></div>
                   </template>
@@ -1048,16 +1043,18 @@
                     message.content &&
                     message.content.trim() !== ''
                   "
-                  class="feedback-buttons"
-                  :class="{ 'feedback-active': message.feedback }"
+                  class="feedback-buttons flex items-center gap-0.5 mt-1 *:transition-opacity *:duration-200 [&>*:hover]:opacity-100"
+                  :class="message.feedback ? '*:opacity-100' : '*:opacity-50'"
                 >
                   <OButton
                     variant="ghost"
                     size="icon-xs-circle"
                     :disabled="message.feedback === 'thumbs_up'"
-                    :class="{
-                      'feedback-selected': message.feedback === 'thumbs_up',
-                    }"
+                    :class="
+                      message.feedback === 'thumbs_up'
+                        ? 'text-accent opacity-100!'
+                        : ''
+                    "
                     data-test="o2-ai-chat-thumbs-up-btn"
                     @click="likeCodeBlock(index)"
                   >
@@ -1068,9 +1065,11 @@
                     variant="ghost"
                     size="icon-xs-circle"
                     :disabled="message.feedback === 'thumbs_down'"
-                    :class="{
-                      'feedback-selected': message.feedback === 'thumbs_down',
-                    }"
+                    :class="
+                      message.feedback === 'thumbs_down'
+                        ? 'text-accent opacity-100!'
+                        : ''
+                    "
                     data-test="o2-ai-chat-thumbs-down-btn"
                     @click="dislikeCodeBlock(index)"
                   >
@@ -1088,63 +1087,70 @@
             v-for="(block, pIdx) in pendingToolCalls"
             v-show="block.type === 'tool_call'"
             :key="'pending-tc-' + pIdx"
-            class="tool-call-indicator completed"
-            :class="store.state.theme == 'dark' ? 'dark-mode' : 'light-mode'"
+            class="tool-call-indicator flex items-center rounded-default border border-border-default [background:var(--color-chat-bubble-user)] px-4 py-2 my-1"
           >
-            <div class="tool-call-content">
+            <div class="tool-call-content flex items-center gap-3 w-full">
               <OIcon
                 :name="block.success === false ? 'error' : 'check-circle'"
                 size="sm"
               />
-              <div class="tool-call-info">
-                <span class="tool-call-message">{{ block.message }}</span>
+              <div class="tool-call-info flex flex-col flex-1 min-w-0 gap-1.5">
+                <span
+                  class="tool-call-message text-sm font-medium opacity-85 text-text-secondary"
+                  >{{ block.message }}</span
+                >
               </div>
             </div>
           </div>
           <!-- Tool call indicator - shows outside message box -->
           <div
             v-if="activeToolCall"
-            class="tool-call-indicator"
-            :class="store.state.theme == 'dark' ? 'dark-mode' : 'light-mode'"
+            class="tool-call-indicator flex items-center rounded-default border border-border-default [background:var(--color-chat-bubble-user)] px-4 py-3 my-2"
           >
-            <div class="tool-call-content">
+            <div class="tool-call-content flex items-center gap-3 w-full">
               <OSpinner variant="dots" size="xs" />
-              <div class="tool-call-info">
-                <span class="tool-call-message">{{
+              <div class="tool-call-info flex flex-col flex-1 min-w-0 gap-1.5">
+                <span class="tool-call-message text-sm font-semibold text-text-secondary">{{
                   activeToolCall.message
                 }}</span>
                 <div
                   v-if="getToolCallDisplayData(activeToolCall.context)"
-                  class="tool-call-context"
+                  class="tool-call-context flex flex-wrap items-center gap-2"
                 >
                   <div
                     v-if="getToolCallDisplayData(activeToolCall.context)?.query"
-                    class="context-item"
+                    class="context-item w-full"
                   >
-                    <code class="context-query">{{
-                      truncateQuery(
-                        getToolCallDisplayData(activeToolCall.context)?.query,
-                      )
-                    }}</code>
+                    <code
+                      class="context-query block font-mono text-xs px-3 py-2 rounded-default whitespace-pre-wrap break-all max-w-full overflow-hidden bg-surface-base border border-border-default text-text-body dark:text-text-secondary"
+                      >{{
+                        truncateQuery(
+                          getToolCallDisplayData(activeToolCall.context)?.query,
+                        )
+                      }}</code
+                    >
                   </div>
                   <div
                     v-if="
                       getToolCallDisplayData(activeToolCall.context)?.vrl &&
                       !getToolCallDisplayData(activeToolCall.context)?.query
                     "
-                    class="context-item"
+                    class="context-item w-full"
                   >
-                    <code class="context-query">{{
-                      truncateQuery(
-                        getToolCallDisplayData(activeToolCall.context)?.vrl,
-                      )
-                    }}</code>
+                    <code
+                      class="context-query block font-mono text-xs px-3 py-2 rounded-default whitespace-pre-wrap break-all max-w-full overflow-hidden bg-surface-base border border-border-default text-text-body dark:text-text-secondary"
+                      >{{
+                        truncateQuery(
+                          getToolCallDisplayData(activeToolCall.context)?.vrl,
+                        )
+                      }}</code
+                    >
                   </div>
                   <span
                     v-if="
                       getToolCallDisplayData(activeToolCall.context)?.stream
                     "
-                    class="context-tag"
+                    class="context-tag inline-flex items-center text-2xs px-2 py-1 rounded-default font-medium text-ai-accent dark:text-text-secondary [background:color-mix(in_srgb,var(--color-ai-accent)_10%,transparent)] dark:[background:color-mix(in_srgb,var(--color-ai-accent)_20%,transparent)]"
                   >
                     Stream:
                     {{ getToolCallDisplayData(activeToolCall.context)?.stream }}
@@ -1153,7 +1159,7 @@
                     v-if="
                       getToolCallDisplayData(activeToolCall.context)?.query_type
                     "
-                    class="context-tag"
+                    class="context-tag inline-flex items-center text-2xs px-2 py-1 rounded-default font-medium text-ai-accent dark:text-text-secondary [background:color-mix(in_srgb,var(--color-ai-accent)_10%,transparent)] dark:[background:color-mix(in_srgb,var(--color-ai-accent)_20%,transparent)]"
                   >
                     Type:
                     {{
@@ -1167,12 +1173,11 @@
           <!-- Standalone loading indicator - only shown when loading with no tool calls -->
           <div
             v-if="isLoading && !activeToolCall"
-            class="tool-call-indicator"
-            :class="store.state.theme == 'dark' ? 'dark-mode' : 'light-mode'"
+            class="tool-call-indicator flex items-center rounded-default border border-border-default [background:var(--color-chat-bubble-user)] px-4 py-3 my-2"
           >
-            <div class="tool-call-content">
+            <div class="tool-call-content flex items-center gap-3 w-full">
               <OSpinner variant="dots" size="xs" />
-              <span class="tool-call-message">{{
+              <span class="tool-call-message text-sm font-semibold text-text-secondary">{{
                 currentAnalyzingMessage
               }}</span>
             </div>
@@ -1180,11 +1185,11 @@
         </div>
 
         <!-- Scroll to bottom button -->
-        <div v-show="showScrollToBottom" class="scroll-to-bottom-container absolute bottom-[10px] left-1/2 -translate-x-1/2 z-[1000] pointer-events-none [transition:all_0.3s_ease]">
+        <div v-show="showScrollToBottom" class="scroll-to-bottom-container absolute bottom-2.5 left-1/2 -translate-x-1/2 z-1000 pointer-events-none [transition:all_0.3s_ease]">
           <OButton
             variant="ghost"
             size="icon-sm"
-            class="scroll-to-bottom-btn transition-all duration-300 [animation:fadeInUp_0.3s_ease] pointer-events-auto [backdrop-filter:blur(8px)] shadow-[0_2px_8px_rgba(0,0,0,0.2)] border-2! border-[#2563eb]! text-[#2563eb]! bg-[rgba(255,255,255,0.95)]! dark:border-[#8b5cf6]! dark:text-[#8b5cf6]! dark:bg-[rgba(30,30,30,0.9)]! hover:scale-110 hover:shadow-[0_4px_12px_rgba(0,0,0,0.3)] hover:border-[#1d4ed8]! hover:text-[#1d4ed8]! hover:bg-white! dark:hover:border-[#5a6fd8]! dark:hover:text-[#5a6fd8]! dark:hover:bg-[rgba(40,40,40,0.95)]! active:scale-100"
+            class="scroll-to-bottom-btn transition-all duration-300 pointer-events-auto [backdrop-filter:blur(0.5rem)] shadow-[0_2px_8px_color-mix(in_srgb,var(--color-black)_20%,transparent)] border-2! border-text-link! text-text-link! bg-surface-base! dark:border-ai-accent! dark:text-ai-accent! dark:bg-surface-base! hover:scale-110 hover:shadow-[0_4px_12px_color-mix(in_srgb,var(--color-black)_30%,transparent)] hover:border-text-link! hover:text-text-link! hover:bg-surface-base! dark:hover:border-ai-accent! dark:hover:text-ai-accent! dark:hover:bg-surface-base! active:scale-100"
             @click="scrollToBottomSmooth"
           >
             <OIcon name="arrow-downward" size="sm" />
@@ -1196,22 +1201,31 @@
       <!-- Fixed loading indicator above input - only shown when scrolled up -->
       <div
         v-if="(isLoading || activeToolCall) && showScrollToBottom"
-        class="fixed-analyzing-indicator"
-        :class="store.state.theme == 'dark' ? 'dark-mode' : 'light-mode'"
+        class="fixed-analyzing-indicator flex items-center justify-center px-4 py-3 mx-4 mb-2 rounded-default border border-border-default [background:var(--color-chat-bubble-user)] [box-shadow:0_2px_8px_color-mix(in_srgb,var(--color-black)_8%,transparent)]"
       >
         <!-- Show tool call if active -->
-        <div v-if="activeToolCall" class="analyzing-content">
+        <div
+          v-if="activeToolCall"
+          class="analyzing-content flex items-center gap-3 w-full max-w-225"
+        >
           <OSpinner variant="dots" size="xs" />
-          <span class="analyzing-message">{{ activeToolCall.message }}</span>
+          <span class="analyzing-message text-sm font-medium text-theme-accent">{{
+            activeToolCall.message
+          }}</span>
         </div>
         <!-- Show analyzing message if loading but no active tool call -->
-        <div v-else-if="isLoading" class="analyzing-content">
+        <div
+          v-else-if="isLoading"
+          class="analyzing-content flex items-center gap-3 w-full max-w-225"
+        >
           <OSpinner variant="dots" size="xs" />
-          <span class="analyzing-message">{{ currentAnalyzingMessage }}</span>
+          <span class="analyzing-message text-sm font-medium text-theme-accent">{{
+            currentAnalyzingMessage
+          }}</span>
         </div>
       </div>
 
-      <div class="chat-input-container m-3">
+      <div class="chat-input-container relative shrink-0 w-full max-w-225 mx-auto my-2 px-2">
         <!-- Confirmation dialog -->
         <O2AIConfirmDialog
           :visible="pendingConfirmation !== null"
@@ -1227,14 +1241,13 @@
           type="file"
           accept="image/png,image/jpeg"
           multiple
-          style="display: none"
+          class="hidden"
           @change="handleImageSelect"
         />
 
         <div
           v-if="!pendingConfirmation"
-          class="unified-input-box"
-          :class="store.state.theme == 'dark' ? 'dark-mode' : 'light-mode'"
+          class="unified-input-box flex flex-col gap-3 px-2 py-1 rounded-default transition-all duration-200 bg-surface-base border border-border-default focus-within:border-transparent focus-within:[box-shadow:0_0_0_2px_var(--color-accent)]"
           @dragover="handleDragOver"
           @drop="handleDrop"
           @paste="handlePaste"
@@ -1249,12 +1262,12 @@
               <img
                 :src="'data:' + img.mimeType + ';base64,' + img.data"
                 :alt="img.filename"
-                class="preview-image w-16 h-16 object-cover rounded-lg border border-[#d1d5db] [transition:transform_0.2s_ease]"
+                class="preview-image w-16 h-16 object-cover rounded-default border border-border-default [transition:transform_0.2s_ease] hover:scale-105"
               />
               <OButton
                 variant="ghost"
                 size="icon-xs-circle"
-                class="image-remove-btn absolute! top-[-6px]! right-[-6px]! w-5! h-5! min-w-5! min-h-5! p-0! bg-[#ef4444]! z-10"
+                class="image-remove-btn absolute! -top-1.5! -right-1.5! w-5! h-5! min-w-5! min-h-5! p-0! bg-status-negative! z-10 hover:bg-status-negative!"
                 @click.stop="removeImage(index)"
               >
                 <OIcon name="close" size="xs" />
@@ -1279,7 +1292,7 @@
           />
 
           <!-- Bottom bar with buttons -->
-          <div class="input-bottom-bar">
+          <div class="input-bottom-bar flex items-center justify-between pt-2">
             <div class="flex items-center gap-2">
               <!-- Image upload button -->
               <OButton
@@ -1292,7 +1305,7 @@
                 <OIcon
                   name="image"
                   size="sm"
-                  :class="store.state.theme == 'dark' ? 'text-white' : 'text-gray-600'"
+                  class="text-icon-color"
                 />
                 <OTooltip :content="t('aiAssistant.attachImageTooltip')" />
               </OButton>
@@ -1304,8 +1317,7 @@
                 @click.stop="isAutoNavigationEnabled = !isAutoNavigationEnabled"
                 variant="ghost"
                 size="sm"
-                class="auto-nav-toggle-btn flex items-center gap-1.5 px-2 py-1 rounded-md transition-all duration-200 hover:bg-[#f3f4f6] dark:hover:bg-[#374151]"
-                :class="{ 'auto-nav-enabled': isAutoNavigationEnabled }"
+                class="auto-nav-toggle-btn flex items-center gap-1.5 px-2 py-1 rounded-default transition-all duration-200 hover:bg-surface-subtle"
               >
                 <OIcon
                   :name="
@@ -1316,12 +1328,20 @@
                   size="sm"
                   :class="[
                     'auto-nav-icon',
-                    !isAutoNavigationEnabled
-                      ? store.state.theme == 'dark' ? 'text-gray-400' : 'text-gray-600'
-                      : ''
+                    isAutoNavigationEnabled
+                      ? 'text-theme-accent!'
+                      : 'text-icon-color'
                   ]"
                 />
-                <span class="auto-nav-label ml-1 text-xs font-medium text-[#6b7280] dark:text-[#9ca3af]">{{ t('aiAssistant.autoNavigation.label') }}</span>
+                <span
+                  class="auto-nav-label ml-1 text-xs font-medium"
+                  :class="
+                    isAutoNavigationEnabled
+                      ? 'text-theme-accent'
+                      : 'text-text-secondary'
+                  "
+                  >{{ t('aiAssistant.autoNavigation.label') }}</span
+                >
                 <OTooltip
                   :content="
                     isAutoNavigationEnabled
@@ -1340,7 +1360,7 @@
                 @click="sendMessage"
                 variant="ai-gradient"
                 size="icon-xs-circle"
-                class="send-button bg-[linear-gradient(135deg,#8b5cf6_0%,#ec4899_100%)]! [transition:all_0.3s_ease]! shadow-[0_4px_15px_0_rgba(139,92,246,0.3)]!"
+                class="send-button bg-(image:--color-gradient-ai)! [transition:all_0.3s_ease]! shadow-[0_4px_15px_0_color-mix(in_srgb,var(--color-ai-accent)_30%,transparent)]!"
               >
                 <OIcon name="send" size="sm" />
               </OButton>
@@ -1351,7 +1371,7 @@
                 @click="cancelCurrentRequest"
                 variant="ghost"
                 size="icon-xs-circle"
-                class="stop-button bg-[linear-gradient(135deg,#f56565_0%,#e53e3e_100%)]! [transition:all_0.3s_ease]! shadow-[0_4px_15px_0_rgba(245,101,101,0.3)]!"
+                class="stop-button bg-(image:--color-gradient-danger)! [transition:all_0.3s_ease]! shadow-[0_4px_15px_0_color-mix(in_srgb,var(--color-status-negative)_30%,transparent)]! hover:bg-(image:--color-gradient-danger-hover)! hover:shadow-[0_6px_20px_0_color-mix(in_srgb,var(--color-status-negative)_40%,transparent)]! hover:-translate-y-px! active:translate-y-0! active:shadow-[0_2px_10px_0_color-mix(in_srgb,var(--color-status-negative)_30%,transparent)]!"
               >
                 <OIcon name="stop" size="sm" />
               </OButton>
@@ -1383,8 +1403,10 @@ import { marked } from "marked";
 import { MarkedOptions } from "marked";
 import DOMPurify from "dompurify";
 import { useStore } from "vuex";
+import { useTheme } from "@/composables/useTheme";
 import useAiChat from "@/composables/useAiChat";
 import { getImageURL, getUUIDv7 } from "@/utils/zincutils";
+import { chartColor } from "@/utils/chartTheme";
 import {
   ChatMessage,
   ChatHistoryEntry,
@@ -1523,6 +1545,7 @@ export default defineComponent({
     const currentSessionId = ref<string | null>(null); // UUID v7 for tracking all API calls in this chat session
     const lastTraceId = ref<string | null>(null); // OTEL trace_id from last workflow for feedback correlation
     const store = useStore();
+    const { isDark } = useTheme();
     const { t } = useI18n();
     const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
     const chatUpdated = computed(() => store.state.chatUpdated);
@@ -4621,12 +4644,12 @@ export default defineComponent({
             imageRefSpan.contentEditable = "false";
             imageRefSpan.className = "image-reference";
             imageRefSpan.style.cssText =
-              "display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; margin: 0 2px; background: #e8f5e9; border: 1px solid #a5d6a7; border-radius: 4px; font-size: 13px; color: #2e7d32; user-select: none;";
+              `display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; margin: 0 2px; background: ${chartColor("--color-status-success-bg")}; border: 1px solid ${chartColor("--color-success-200")}; border-radius: 4px; font-size: var(--text-compact); color: ${chartColor("--color-status-success-text")}; user-select: none;`;
 
             // Add image icon
             const imageIcon = document.createElement("span");
             imageIcon.textContent = "🖼️";
-            imageIcon.style.cssText = "font-size: 12px;";
+            imageIcon.style.cssText = "font-size: var(--text-xs);";
 
             // Add filename text
             const filenameText = document.createElement("span");
@@ -4636,14 +4659,14 @@ export default defineComponent({
             const removeBtn = document.createElement("button");
             removeBtn.textContent = "×";
             removeBtn.style.cssText =
-              "display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; padding: 0; margin-left: 2px; background: transparent; border: none; border-radius: 3px; font-size: 16px; line-height: 1; cursor: pointer; color: #2e7d32; transition: all 0.15s ease;";
+              `display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; padding: 0; margin-left: 2px; background: transparent; border: none; border-radius: 3px; font-size: var(--text-base); line-height: 1; cursor: pointer; color: ${chartColor("--color-status-success-text")}; transition: all 0.15s ease;`;
             removeBtn.onmouseover = () => {
-              removeBtn.style.background = "#c62828";
-              removeBtn.style.color = "white";
+              removeBtn.style.background = chartColor("--color-status-negative");
+              removeBtn.style.color = chartColor("--color-white");
             };
             removeBtn.onmouseout = () => {
               removeBtn.style.background = "transparent";
-              removeBtn.style.color = "#2e7d32";
+              removeBtn.style.color = chartColor("--color-status-success-text");
             };
             removeBtn.onclick = (e) => {
               e.preventDefault();
@@ -5661,7 +5684,7 @@ export default defineComponent({
       }
     };
     const o2AiTitleLogo = computed(() => {
-      return store.state.theme == "dark"
+      return isDark.value
         ? getImageURL("images/common/o2_ai_logo_dark.svg")
         : getImageURL("images/common/o2_ai_logo.svg");
     });
@@ -5788,233 +5811,29 @@ export default defineComponent({
 });
 </script>
 
-<style>
-/* =============================================
-   .chat-container and nested rules
-   ============================================= */
+<style scoped>
+/* keep(generated-content): markdown/log/code markup is injected with v-html, so
+   it carries no scope attribute and cannot take utility classes — it can only be
+   reached from here through :deep().
+   keep(lib-override:hljs): highlight.js emits its own .hljs-* class names; the
+   token mapping below mirrors lib/core/Code/OCodeBlock.vue exactly (D6).
+   keep(keyframes): @keyframes and the `animation:` that consumes it must live in
+   the same block — the scoped compiler renames both together.
+   keep(complex-state): .tool-call-item's status x has-details x hover matrix and
+   .send-button's :not(.disabled):not([disabled]):not(:disabled) guard have no
+   utility equivalent (`enabled:` covers :disabled, not the .disabled class). */
 
-
-.chat-container .chat-header {
-  padding: 0px 12px 4px 12px;
-  display: flex;
-  justify-content: space-between;
-  align-items: end;
-  border-bottom: 1px solid var(--color-separator);
-  flex-shrink: 0;
-  background: var(--q-page-background);
-  z-index: 2;
+/* ============================================================
+   keep(keyframes) — each consumer sits next to its @keyframes
+   ============================================================ */
+.tool-call-indicator {
+  animation: fadeIn 0.3s ease;
 }
 
-.chat-container .chat-header .chat-title {
-  font-weight: bold;
-}
-
-.chat-container .chat-header .chat-title-dropdown {
-  padding: 6px 12px;
-  border-radius: 4px;
-  transition: background-color 0.2s;
-  max-width: 210px;
-  height: 32px;
-  min-height: 32px;
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-}
-
-.chat-container .chat-header .chat-title-dropdown:hover {
-  background-color: var(--q-hover-color);
-}
-
-.chat-container .chat-header .chat-title-dropdown span {
-  color: var(--q-primary-text);
-}
-
-.chat-container .chat-header .chat-title-dropdown .chat-title-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 180px;
-}
-
-.chat-container .chat-session-title {
-  padding: 8px 16px;
-  font-size: 14px;
-  min-height: 32px;
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  border-bottom: 1px solid var(--color-separator);
-}
-
-.chat-container .chat-session-title.light-mode {
-  color: #1a202c;
-  background: linear-gradient(
-    to right,
-    rgba(99, 102, 241, 0.08),
-    transparent
-  );
-}
-
-.chat-container .chat-session-title.dark-mode {
-  color: #e2e8f0;
-  background: linear-gradient(
-    to right,
-    rgba(99, 102, 241, 0.15),
-    transparent
-  );
-}
-
-.chat-container .chat-session-title .title-text {
-  font-weight: 600;
-}
-
-.chat-container .chat-session-title .typing-cursor {
-  animation: blink 0.7s infinite;
-  margin-left: 2px;
-  font-weight: 400;
-}
-
-@keyframes blink {
-  0%,
-  50% {
-    opacity: 1;
-  }
-  51%,
-  100% {
-    opacity: 0;
-  }
-}
-
-.chat-container .chat-content {
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  background: transparent;
-  position: relative;
-}
-
-.chat-container .messages-container {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  padding: 8px;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  background: transparent;
-  max-width: 900px;
-  margin: 0 auto;
-  width: 100%;
-}
-
-.chat-container .welcome-section {
-  padding: 24px;
-  background: linear-gradient(
-    to right,
-    rgba(var(--q-primary-rgb), 0.05),
-    rgba(var(--q-primary-rgb), 0.1)
-  );
-  border-radius: 8px;
-  margin-bottom: 24px;
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.chat-container .welcome-section.welcome-section--centered {
-  background: transparent;
-  padding: 0;
-  margin-bottom: 0;
-}
-
-.chat-container .centered-input-wrap {
-  max-width: 900px;
-  width: calc(100% - 16px);
-  margin-top: 1.25em;
-  font-size: 1rem;
-}
-
-.chat-container .centered-input-wrap .rich-text-input {
-  font-size: 1rem;
-}
-
-.chat-container .fixed-analyzing-indicator {
-  padding: 12px 16px;
-  margin: 0 16px 8px 16px;
-  border-radius: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  animation: fadeInSlide 0.3s ease;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-}
-
-.chat-container .fixed-analyzing-indicator.light-mode {
-  background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%);
-  border: 1px solid #d0d8e8;
-}
-
-.chat-container .fixed-analyzing-indicator.dark-mode {
-  background: linear-gradient(135deg, #1e2235 0%, #252a3d 100%);
-  border: 1px solid #3a3f55;
-}
-
-.chat-container .fixed-analyzing-indicator .analyzing-content {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  max-width: 900px;
-  width: 100%;
-}
-
-.chat-container .fixed-analyzing-indicator .analyzing-message {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--q-primary);
-}
-
-.chat-container .fixed-analyzing-indicator .tool-call-info {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  flex: 1;
-}
-
-.chat-container .fixed-analyzing-indicator .tool-call-context-inline {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-  margin-top: 4px;
-}
-
-.chat-container .fixed-analyzing-indicator .context-query-inline {
-  font-size: 12px;
-  padding: 4px 8px;
-  border-radius: 6px;
-  background: rgba(0, 0, 0, 0.05);
-  max-width: 500px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.chat-container .fixed-analyzing-indicator .context-tag-inline {
-  font-size: 11px;
-  padding: 2px 8px;
-  border-radius: 4px;
-  background: rgba(var(--q-primary-rgb), 0.1);
-  color: var(--q-primary);
-  font-weight: 500;
-}
-
-@keyframes fadeInSlide {
+@keyframes fadeIn {
   from {
     opacity: 0;
-    transform: translateY(-10px);
+    transform: translateY(-0.625rem);
   }
   to {
     opacity: 1;
@@ -6022,202 +5841,178 @@ export default defineComponent({
   }
 }
 
-.chat-container .chat-input-container {
-  position: relative;
-  flex-shrink: 0;
-  max-width: 900px;
-  width: calc(100% - 0px);
-  margin: 8px auto;
-  padding: 0 8px;
+.fixed-analyzing-indicator {
+  animation: fadeInSlide 0.3s ease;
 }
 
-.chat-container .unified-input-box {
-  display: flex;
-  flex-direction: column;
-  padding: 4px 8px;
-  border-radius: 12px;
-  transition: all 0.2s ease;
-  gap: 12px;
+@keyframes fadeInSlide {
+  from {
+    opacity: 0;
+    transform: translateY(-0.625rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
-.chat-container .unified-input-box.light-mode {
-  background: #ffffff;
-  border: 1px solid #e4e7ec;
+/* Scroll-to-bottom button entrance. Rises from below with a slight scale-up, so
+   it is not the same curve as fadeIn/fadeInSlide above (those drop from above). */
+.scroll-to-bottom-btn {
+  animation: fadeInUp 0.3s ease;
 }
 
-.chat-container .unified-input-box.light-mode:focus-within {
-  border: 1px solid transparent;
-  box-shadow: 0 0 0 2px #8b5cf6;
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(0.625rem) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
 }
 
-.chat-container .unified-input-box.dark-mode {
-  background: #191919;
-  border: 1px solid #323232;
+/* ============================================================
+   keep(complex-state) — tool call status matrix.
+   Status tint x (has-details) hover x light/dark. Each status maps to its
+   semantic token; the light/dark pairs differ only in mix strength, so dark
+   overrides just the percentage.
+   ============================================================ */
+.tool-call-item {
+  background: color-mix(in srgb, var(--color-status-positive) 8%, transparent);
+  color: var(--color-text-secondary);
+}
+.dark .tool-call-item {
+  background: color-mix(in srgb, var(--color-status-positive) 12%, transparent);
+}
+.tool-call-item.has-details {
+  cursor: pointer;
+}
+.tool-call-item.has-details:hover {
+  background: color-mix(in srgb, var(--color-status-positive) 12%, transparent);
+}
+.dark .tool-call-item.has-details:hover {
+  background: color-mix(in srgb, var(--color-status-positive) 18%, transparent);
 }
 
-.chat-container .unified-input-box.dark-mode:focus-within {
-  border: 1px solid transparent;
-  box-shadow: 0 0 0 2px #5a6ec3;
+.tool-call-item.error {
+  background: color-mix(in srgb, var(--color-status-negative) 8%, transparent);
+}
+.dark .tool-call-item.error {
+  background: color-mix(in srgb, var(--color-status-negative) 12%, transparent);
+}
+.tool-call-item.error.has-details:hover {
+  background: color-mix(in srgb, var(--color-status-negative) 15%, transparent);
+}
+.dark .tool-call-item.error.has-details:hover {
+  background: color-mix(in srgb, var(--color-status-negative) 22%, transparent);
 }
 
-.chat-container .unified-input-box .rich-text-input-wrapper {
+.tool-call-item.timeout {
+  background: color-mix(in srgb, var(--color-warning) 8%, transparent);
+}
+.dark .tool-call-item.timeout {
+  background: color-mix(in srgb, var(--color-warning) 12%, transparent);
+}
+.tool-call-item.timeout.has-details:hover {
+  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
+}
+.dark .tool-call-item.timeout.has-details:hover {
+  background: color-mix(in srgb, var(--color-warning) 22%, transparent);
+}
+
+.tool-call-item.pending-confirmation {
+  cursor: default;
+  background: color-mix(in srgb, var(--color-warning) 12%, transparent);
+  border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent);
+}
+.dark .tool-call-item.pending-confirmation {
+  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
+  border-color: color-mix(in srgb, var(--color-warning) 25%, transparent);
+}
+
+.tool-call-item.pending-navigation {
+  cursor: default;
+  background: color-mix(in srgb, var(--color-info) 8%, transparent);
+  border: 1px solid color-mix(in srgb, var(--color-info) 30%, transparent);
+}
+.dark .tool-call-item.pending-navigation {
+  background: color-mix(in srgb, var(--color-info) 12%, transparent);
+  border-color: color-mix(in srgb, var(--color-info) 25%, transparent);
+}
+
+/* ============================================================
+   keep(complex-state) — send button.
+   The enabled guard is a .disabled CLASS plus [disabled] plus :disabled;
+   Tailwind's `enabled:` variant only covers the last two.
+   ============================================================ */
+.send-button:hover:not(.disabled):not([disabled]):not(:disabled) {
+  background: var(--color-gradient-ai) !important;
+  box-shadow: 0 0.375rem 1.25rem 0
+    color-mix(in srgb, var(--color-ai-accent) 40%, transparent) !important;
+  transform: translateY(-0.0625rem) !important;
+}
+.send-button:active:not(.disabled):not([disabled]):not(:disabled) {
+  transform: translateY(0) !important;
+  box-shadow: 0 0.125rem 0.625rem 0
+    color-mix(in srgb, var(--color-ai-accent) 30%, transparent) !important;
+}
+
+/* ============================================================
+   keep(generated-content) — RichTextInput is a child component, so its
+   internals carry no scope attribute of ours.
+   ============================================================ */
+.unified-input-box :deep(.rich-text-input-wrapper) {
   width: 100%;
-  min-height: 40px;
+  min-height: 2.5rem;
+}
+.unified-input-box :deep(.rich-text-input) {
+  padding: 0.25rem 0;
 }
 
-.chat-container .unified-input-box .rich-text-input {
-  padding: 4px 0;
-}
-
-.chat-container .input-bottom-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-top: 8px;
-}
-
-
-.chat-container .auto-nav-toggle-btn.auto-nav-enabled .auto-nav-icon {
-  color: var(--q-primary) !important;
-}
-
-.chat-container .auto-nav-toggle-btn.auto-nav-enabled .auto-nav-label {
-  color: var(--q-primary);
-}
-
-
-.chat-container .message {
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-}
-
-.dark .chat-container .message {
-  box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
-}
-
-.chat-container .message {
-  width: 100%;
-  padding: 12px;
-  border-radius: 8px;
-}
-
-.chat-container .message .message-content {
-  display: flex;
-  align-items: flex-start;
-  gap: 6px;
-  width: 100%;
-}
-
-.chat-container .message .message-blocks {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  min-width: 0;
-  max-width: 100%;
-  overflow-x: auto;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-}
-
-.chat-container .message .feedback-buttons {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  margin-top: 4px;
-}
-
-.chat-container .message .feedback-buttons > * {
-  opacity: 0.5;
-  transition: opacity 0.2s;
-}
-
-.chat-container .message .feedback-buttons > *:hover {
-  opacity: 1;
-}
-
-.chat-container .message .feedback-buttons.feedback-active > * {
-  opacity: 1;
-}
-
-.chat-container .message .feedback-buttons .feedback-selected {
-  color: var(--o2-primary-color);
-  opacity: 1;
-}
-
-.chat-container .message .text-block {
-  width: 100%;
-  overflow-wrap: break-word;
-  max-width: 100%;
-}
-
-.chat-container .message .text-block:not(:last-child) {
-  margin-bottom: 4px;
-}
-
-.chat-container .message .text-block pre,
-.chat-container .message .text-block .generated-code-block {
-  white-space: pre-wrap;
-  word-break: break-word;
-  overflow-wrap: break-word;
-  margin: 0;
-  padding: 0;
-  line-height: 1.4;
-  display: block;
-  max-width: 100%;
-  overflow-x: auto;
-}
-
-.chat-container .message .text-block pre code,
-.chat-container .message .text-block .generated-code-block code {
-  padding: 8px;
-  margin: 0;
-  display: block;
-  max-width: 100%;
-}
-
-.chat-container .message .text-block h1 {
-  font-size: 1.5rem !important;
+/* ============================================================
+   keep(generated-content) — markdown rendered from v-html inside .text-block.
+   `!important` retained: these fight the global base-elements typography layer.
+   ============================================================ */
+.text-block :deep(h1) {
+  font-size: var(--text-2xl) !important;
   font-weight: 600 !important;
-  margin: 16px 0 8px 0 !important;
+  margin: 1rem 0 0.5rem 0 !important;
+  line-height: 1.3 !important;
+}
+.text-block :deep(h2) {
+  font-size: var(--text-xl) !important;
+  font-weight: 600 !important;
+  margin: 0.875rem 0 0.4375rem 0 !important;
+  line-height: 1.3 !important;
+}
+.text-block :deep(h3) {
+  font-size: var(--text-lg) !important;
+  font-weight: 600 !important;
+  margin: 0.75rem 0 0.375rem 0 !important;
+  line-height: 1.3 !important;
+}
+.text-block :deep(h4) {
+  font-size: var(--text-base) !important;
+  font-weight: 600 !important;
+  margin: 0.625rem 0 0.3125rem 0 !important;
+  line-height: 1.3 !important;
+}
+.text-block :deep(h5) {
+  font-size: var(--text-sm) !important;
+  font-weight: 600 !important;
+  margin: 0.5rem 0 0.25rem 0 !important;
+  line-height: 1.3 !important;
+}
+.text-block :deep(h6) {
+  font-size: var(--text-xs) !important;
+  font-weight: 600 !important;
+  margin: 0.5rem 0 0.25rem 0 !important;
   line-height: 1.3 !important;
 }
 
-.chat-container .message .text-block h2 {
-  font-size: 1.25rem !important;
-  font-weight: 600 !important;
-  margin: 14px 0 7px 0 !important;
-  line-height: 1.3 !important;
-}
-
-.chat-container .message .text-block h3 {
-  font-size: 1.125rem !important;
-  font-weight: 600 !important;
-  margin: 12px 0 6px 0 !important;
-  line-height: 1.3 !important;
-}
-
-.chat-container .message .text-block h4 {
-  font-size: 1rem !important;
-  font-weight: 600 !important;
-  margin: 10px 0 5px 0 !important;
-  line-height: 1.3 !important;
-}
-
-.chat-container .message .text-block h5 {
-  font-size: 0.875rem !important;
-  font-weight: 600 !important;
-  margin: 8px 0 4px 0 !important;
-  line-height: 1.3 !important;
-}
-
-.chat-container .message .text-block h6 {
-  font-size: 0.75rem !important;
-  font-weight: 600 !important;
-  margin: 8px 0 4px 0 !important;
-  line-height: 1.3 !important;
-}
-
-.chat-container .message .text-block table {
+.text-block :deep(table) {
   max-width: 100%;
   width: 100%;
   table-layout: fixed;
@@ -6226,142 +6021,74 @@ export default defineComponent({
   display: block;
   white-space: nowrap;
 }
-
-.chat-container .message .text-block table th,
-.chat-container .message .text-block table td {
-  padding: 8px 12px;
-  border: 1px solid #e2e8f0;
+.text-block :deep(th),
+.text-block :deep(td) {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--color-border-default);
   word-wrap: break-word;
   overflow-wrap: break-word;
   text-overflow: ellipsis;
   overflow: hidden;
 }
 
-.chat-container .message .text-block p,
-.chat-container .message .text-block div,
-.chat-container .message .text-block span {
+.text-block :deep(p),
+.text-block :deep(div),
+.text-block :deep(span) {
   word-wrap: break-word;
   overflow-wrap: break-word;
   word-break: break-word;
   max-width: 100%;
 }
 
-.chat-container .message .text-block ol {
+.text-block :deep(ol) {
   list-style-type: decimal;
   padding-left: 1.5em;
   margin: 0.5em 0;
 }
-
-.chat-container .message .text-block ul {
+.text-block :deep(ul) {
   list-style-type: disc;
   padding-left: 1.5em;
   margin: 0.5em 0;
 }
-
-.chat-container .message .text-block li {
+.text-block :deep(li) {
   margin: 0.25em 0;
 }
 
-.chat-container .message .code-block {
-  border-radius: 4px;
-  overflow: hidden;
-  margin: 0;
-}
-
-.chat-container .message .code-block-header {
-  padding: 4px 8px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.chat-container .message .code-type-label {
-  font-size: 12px;
-  font-weight: 600;
-  padding: 2px 6px;
-  border-radius: 4px;
-  background: rgba(var(--q-primary-rgb), 0.1);
-}
-
-.code-type-label {
-  color: var(--q-primary);
-}
-
-.dark .code-type-label {
-  color: #e2e2e2;
-}
-
-.chat-container .message .generated-code-block {
+/* ============================================================
+   keep(generated-content) — code blocks.
+   .generated-code-block is emitted BOTH from the template and by the markdown
+   renderer (which rewrites <pre> into <span class="generated-code-block">), so
+   it must be reachable through :deep() either way. The background/border are
+   set here rather than as utilities because they have to beat .hljs below,
+   which is unlayered and would otherwise win over @layer utilities.
+   ============================================================ */
+.message-blocks :deep(.generated-code-block),
+.text-block :deep(pre) {
+  display: block;
   white-space: pre-wrap;
   word-break: break-word;
   overflow-wrap: break-word;
   margin: 0;
   padding: 0;
   line-height: 1.4;
+  max-width: 100%;
+  overflow-x: auto;
 }
-
-.chat-container .message .generated-code-block code {
-  padding: 8px;
-  margin: 0;
+.message-blocks :deep(.generated-code-block code),
+.text-block :deep(pre code) {
   display: block;
-}
-
-.dark .generated-code-block code {
-  background-color: var(--o2-primary-background);
-  border: 0.5px solid #e1e1e124;
+  padding: 0.5rem;
+  margin: 0;
+  max-width: 100%;
+  background-color: var(--color-surface-base);
+  border: 1px solid var(--color-border-subtle);
   border-top: none;
 }
 
-.generated-code-block code {
-  background-color: #ffffff;
-  border: 0.5px solid #00000024;
-  border-top: none;
-  color: black;
-}
-
-.chat-container .message .code-block-footer {
-  padding: 4px 8px;
-  display: flex;
-}
-
-.chat-container .message.user {
-  background: linear-gradient(135deg, #f8f9ff 0%, #e8edff 100%);
-  border: 1px solid #e0e6ff;
-  border-radius: 12px;
-  color: #2c3e50;
-  margin-left: 40px;
-  width: calc(100% - 40px);
-}
-
-.chat-container .message.assistant {
-  background: #ffffff;
-  border: 1px solid #e5e7eb;
-  border-radius: 12px;
-  color: var(--q-primary-text);
-  margin-left: 0;
-  width: 100%;
-}
-
-.dark .chat-container .message.user {
-  background: linear-gradient(135deg, #2a2d47 0%, #1e213a 100%);
-  border: 1px solid #3a3d5c;
-  border-radius: 12px;
-  color: #e2e8f0;
-  margin-left: 40px;
-  width: calc(100% - 40px);
-}
-
-.dark .chat-container .message.assistant {
-  background: #1a1a1a;
-  border: 1px solid #333333;
-  border-radius: 12px;
-  color: #e2e2e2;
-  margin-left: 0;
-  width: 100%;
-}
-
-.chat-container ul pre,
-.chat-container ol pre {
+/* Markdown lists can nest a fenced block; hljs sets the palette, these two
+   only need the reset. */
+.text-block :deep(ul pre),
+.text-block :deep(ol pre) {
   white-space: pre-wrap;
   word-break: break-word;
   overflow-wrap: break-word;
@@ -6369,971 +6096,111 @@ export default defineComponent({
   padding: 0;
 }
 
-.chat-container ul pre code,
-.chat-container ol pre code {
-  background-color: white;
-  color: black;
-}
-
-/* =============================================
-   Top-level rules (outside .chat-container)
-   ============================================= */
-
-
-
-.send-button:hover:not(.disabled):not([disabled]):not(:disabled) {
-  background: linear-gradient(135deg, #7c3aed 0%, #db2777 100%) !important;
-  box-shadow: 0 6px 20px 0 rgba(139, 92, 246, 0.4) !important;
-  transform: translateY(-1px) !important;
-}
-
-.send-button:active:not(.disabled):not([disabled]):not(:disabled) {
-  transform: translateY(0) !important;
-  box-shadow: 0 2px 10px 0 rgba(139, 92, 246, 0.3) !important;
-}
-
-
-.stop-button:hover {
-  background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%) !important;
-  box-shadow: 0 6px 20px 0 rgba(245, 101, 101, 0.4) !important;
-  transform: translateY(-1px) !important;
-}
-
-.stop-button:active {
-  transform: translateY(0) !important;
-  box-shadow: 0 2px 10px 0 rgba(245, 101, 101, 0.3) !important;
-}
-
-
-.preview-image:hover {
-  transform: scale(1.05);
-}
-
-.image-remove-btn:hover {
-  background-color: #dc2626 !important;
-}
-
-.message-images .message-image-item img:hover {
-  transform: scale(1.02);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-}
-
-
-.code-block-header {
-  background-color: #ecf0f5;
-}
-
-.dark .code-block-header {
-  background-color: #3b3b3b;
-  border: 1px 1px 0px 1px solid var(--o2-border-input);
-}
-
-@keyframes bounce {
-  0%,
-  20%,
-  50%,
-  80%,
-  100% {
-    transform: translateY(0);
-  }
-  40% {
-    transform: translateY(-3px);
-  }
-  60% {
-    transform: translateY(-2px);
-  }
-}
-
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(10px) scale(0.9);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-.tool-call-indicator {
-  display: flex;
-  align-items: center;
-  padding: 12px 16px;
-  border-radius: 12px;
-  margin: 8px 0;
-  animation: fadeIn 0.3s ease;
-}
-
-.tool-call-indicator.light-mode {
-  background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%);
-  border: 1px solid #d0d8e8;
-}
-
-.tool-call-indicator.dark-mode {
-  background: linear-gradient(135deg, #1e2235 0%, #252a3d 100%);
-  border: 1px solid #3a3f55;
-}
-
-/* Completed step shown live during streaming — more compact and subdued
- than the active (spinner) indicator so the in-flight step still stands out. */
-.tool-call-indicator.completed {
-    padding: 8px 16px;
-    margin: 4px 0;
-
-    .tool-call-message {
-      font-weight: 500;
-      opacity: 0.85;
-    }
-  }
-
-.tool-call-indicator .tool-call-content {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  width: 100%;
-}
-
-.tool-call-indicator .tool-call-info {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  flex: 1;
-  min-width: 0;
-}
-
-.tool-call-indicator .tool-call-status {
-  font-size: 12px;
-  font-style: italic;
-  opacity: 0.7;
-  margin-bottom: 2px;
-}
-
-.tool-call-indicator .tool-call-status {
-  color: #6b7280;
-}
-
-.dark .tool-call-indicator .tool-call-status {
-  color: #9ca3af;
-}
-
-.tool-call-indicator .tool-call-message {
+/* ============================================================
+   keep(generated-content) — formatLogEntryContent() emits these json spans.
+   ============================================================ */
+.log-entry-code :deep(.json-key) {
+  color: var(--color-json-key);
   font-weight: 600;
-  font-size: 14px;
 }
-
-.tool-call-indicator .tool-call-message {
-  color: #4a5568;
+.log-entry-code :deep(.json-string) {
+  color: var(--color-json-string);
 }
-
-.dark .tool-call-indicator .tool-call-message {
-  color: #e2e8f0;
+.log-entry-code :deep(.json-number) {
+  color: var(--color-json-number);
 }
-
-.tool-call-indicator .tool-call-context {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-}
-
-.tool-call-indicator .context-item {
-  width: 100%;
-}
-
-.tool-call-indicator .context-query {
-  display: block;
-  font-family: "Fira Code", "Consolas", monospace;
-  font-size: 12px;
-  padding: 8px 12px;
-  border-radius: 6px;
-  white-space: pre-wrap;
-  word-break: break-all;
-  max-width: 100%;
-  overflow: hidden;
-}
-
-.tool-call-indicator .context-query {
-  background: #ffffff;
-  color: #2d3748;
-  border: 1px solid #e2e8f0;
-}
-
-.dark .tool-call-indicator .context-query {
-  background: #1a1a1a;
-  color: #a0aec0;
-  border: 1px solid #333;
-}
-
-.tool-call-indicator .context-tag {
-  display: inline-flex;
-  align-items: center;
-  font-size: 11px;
-  padding: 4px 8px;
-  border-radius: 4px;
-  font-weight: 500;
-}
-
-.tool-call-indicator .context-tag {
-  background: rgba(139, 92, 246, 0.1);
-  color: #8b5cf6;
-}
-
-.dark .tool-call-indicator .context-tag {
-  background: rgba(139, 92, 246, 0.2);
-  color: #a0aec0;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-
-.tool-call-item {
-  display: flex;
-  flex-direction: column;
-  padding: 8px 12px;
-  border-radius: 6px;
-  font-size: 13px;
-  margin-bottom: 8px;
-}
-
-.tool-call-item.has-details {
-  cursor: pointer;
-}
-
-.tool-call-item.has-details:hover.light-mode {
-  background: rgba(76, 175, 80, 0.12);
-}
-
-.tool-call-item.has-details:hover.dark-mode {
-  background: rgba(76, 175, 80, 0.18);
-}
-
-.tool-call-item.light-mode {
-  background: rgba(76, 175, 80, 0.08);
-  color: #4a5568;
-}
-
-.tool-call-item.dark-mode {
-  background: rgba(76, 175, 80, 0.12);
-  color: #a0aec0;
-}
-
-.tool-call-item.error.light-mode {
-  background: rgba(244, 67, 54, 0.08);
-}
-
-.tool-call-item.error.dark-mode {
-  background: rgba(244, 67, 54, 0.12);
-}
-
-.tool-call-item.error.has-details:hover.light-mode {
-  background: rgba(244, 67, 54, 0.15);
-}
-
-.tool-call-item.error.has-details:hover.dark-mode {
-  background: rgba(244, 67, 54, 0.22);
-}
-
-.tool-call-item.timeout.light-mode {
-  background: rgba(255, 152, 0, 0.08);
-}
-
-.tool-call-item.timeout.dark-mode {
-  background: rgba(255, 152, 0, 0.12);
-}
-
-.tool-call-item.timeout.has-details:hover.light-mode {
-  background: rgba(255, 152, 0, 0.15);
-}
-
-.tool-call-item.timeout.has-details:hover.dark-mode {
-  background: rgba(255, 152, 0, 0.22);
-}
-
-.tool-call-item.pending-confirmation {
-  cursor: default;
-}
-
-.tool-call-item.pending-confirmation.light-mode {
-  background: rgba(255, 193, 7, 0.12);
-  border: 1px solid rgba(255, 193, 7, 0.3);
-}
-
-.tool-call-item.pending-confirmation.dark-mode {
-  background: rgba(255, 193, 7, 0.15);
-  border: 1px solid rgba(255, 193, 7, 0.25);
-}
-
-.tool-call-item.pending-navigation {
-  cursor: default;
-}
-
-.tool-call-item.pending-navigation.light-mode {
-  background: rgba(25, 118, 210, 0.08);
-  border: 1px solid rgba(25, 118, 210, 0.3);
-}
-
-.tool-call-item.pending-navigation.dark-mode {
-  background: rgba(66, 165, 245, 0.12);
-  border: 1px solid rgba(66, 165, 245, 0.25);
-}
-
-.tool-call-item .tool-confirmation-inline {
-  margin-top: 12px;
-}
-
-.tool-call-item .tool-confirmation-inline .confirmation-content {
-  padding: 16px;
-  border-radius: 8px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.tool-call-item .tool-confirmation-inline .confirmation-content {
-  background: #fffbeb;
-  border: 1px solid #fde68a;
-}
-
-.dark .tool-call-item .tool-confirmation-inline .confirmation-content {
-  background: rgba(251, 191, 36, 0.15);
-  border: 1px solid rgba(251, 191, 36, 0.3);
-}
-
-.tool-call-item .tool-call-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.tool-call-item .tool-call-name {
-  font-weight: 500;
-  flex: 1;
-}
-
-.tool-call-item .tool-call-name code {
-  font-family: "Fira Code", "Consolas", monospace;
-  font-size: 12px;
-  padding: 1px 4px;
-  border-radius: 3px;
-}
-
-.tool-call-item .tool-call-name code {
-  background: rgba(0, 0, 0, 0.06);
-}
-
-.dark .tool-call-item .tool-call-name code {
-  background: rgba(255, 255, 255, 0.1);
-}
-
-.tool-call-item .expand-icon {
-  opacity: 0.6;
-  transition: transform 0.2s;
-}
-
-.tool-call-item .navigation-icon {
-  cursor: pointer;
-  margin-left: auto;
-  opacity: 0.7;
-  transition: opacity 0.2s;
-}
-
-.tool-call-item .navigation-icon:hover {
-  opacity: 1;
-}
-
-.tool-call-item .navigation-block {
-  margin: 4px 0;
-}
-
-.tool-call-item .navigation-block.light-mode {
-  background: rgba(66, 165, 245, 0.08);
-}
-
-.tool-call-item .navigation-block.dark-mode {
-  background: rgba(66, 165, 245, 0.12);
-}
-
-.tool-call-item .navigation-block .navigation-block-btn {
-  font-size: 13px;
-}
-
-.tool-call-item .tool-call-details {
-  margin-top: 10px;
-  padding-top: 10px;
-  border-top: 1px solid rgba(128, 128, 128, 0.2);
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.tool-call-item .tool-call-details .detail-item {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.tool-call-item .tool-call-details .detail-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.tool-call-item .tool-call-details .detail-label {
-  font-size: 11px;
+.log-entry-code :deep(.json-boolean) {
+  color: var(--color-json-boolean);
   font-weight: 600;
-  text-transform: uppercase;
-  opacity: 0.6;
 }
-
-.tool-call-item .tool-call-details .copy-btn {
-  opacity: 0.6;
-}
-
-.tool-call-item .tool-call-details .copy-btn:hover {
-  opacity: 1;
-}
-
-.tool-call-item .tool-call-details .detail-value {
-  font-size: 12px;
-  user-select: text;
-}
-
-.tool-call-item .tool-call-details .detail-value.query-value {
-  font-family: "Fira Code", "Consolas", monospace;
-  padding: 8px;
-  border-radius: 4px;
-  white-space: pre-wrap;
-  word-break: break-all;
-  user-select: text;
-  cursor: text;
-}
-
-.tool-call-item .tool-call-details .detail-value.query-value {
-  background: rgba(0, 0, 0, 0.04);
-}
-
-.dark .tool-call-item .tool-call-details .detail-value.query-value {
-  background: rgba(255, 255, 255, 0.06);
-}
-
-.log-entry-item {
-  display: flex;
-  flex-direction: column;
-  padding: 6px 10px;
-  border-radius: 6px;
-  font-size: 12px;
-  margin-bottom: 4px;
-  cursor: pointer;
-}
-
-.log-entry-item.light-mode {
-  background: rgba(33, 150, 243, 0.08);
-  color: #4a5568;
-}
-
-.log-entry-item.dark-mode {
-  background: #252a31;
-  border: 1px solid #3a4149;
-  color: #e2e8f0;
-}
-
-.log-entry-item:hover.light-mode {
-  background: rgba(33, 150, 243, 0.12);
-}
-
-.log-entry-item:hover.dark-mode {
-  background: #20242e;
-  border-color: #4a5568;
-}
-
-.log-entry-item .log-entry-header {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.log-entry-item .log-entry-info {
-  flex: 1;
-  font-weight: 500;
-  font-size: 12px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.log-entry-item .expand-icon {
-  opacity: 0.6;
-  transition: transform 0.2s;
-}
-
-.log-entry-item .log-entry-details {
-  margin-top: 10px;
-}
-
-.log-entry-item .log-entry-content {
-  position: relative;
-  border-radius: 6px;
-  border: 1px solid;
-  overflow: hidden;
-}
-
-.log-entry-item .log-entry-content {
-  background: #ffffff;
-  border-color: #e4e7ec;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-}
-
-.dark .log-entry-item .log-entry-content {
-  background: #1e293b;
-  border-color: #475569;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-}
-
-.log-entry-item .log-entry-content .copy-btn {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  opacity: 0.6;
-  z-index: 1;
-  background: rgba(128, 128, 128, 0.1);
-  border-radius: 4px;
-  padding: 4px 8px;
-}
-
-.log-entry-item .log-entry-content .copy-btn:hover {
-  opacity: 1;
-}
-
-.log-entry-item .log-entry-content .copy-btn:hover {
-  background: rgba(0, 0, 0, 0.08);
-}
-
-.dark .log-entry-item .log-entry-content .copy-btn:hover {
-  background: rgba(255, 255, 255, 0.15);
-}
-
-.log-entry-item .log-entry-content .log-entry-code {
-  display: block;
-  font-family: "Monaco", "Menlo", "Courier New", monospace;
-  font-size: 11px;
-  line-height: 1.5;
-  padding: 12px;
-  padding-right: 40px;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  user-select: text;
-  cursor: text;
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-.log-entry-item .log-entry-content .log-entry-code {
-  background: #f8fafc;
-  color: #1a202c;
-}
-
-.dark .log-entry-item .log-entry-content .log-entry-code {
-  background: #0d1017;
-  color: #e2e8f0;
-}
-
-.log-entry-item .log-entry-content .log-entry-code .json-key {
-  color: #0066cc;
+.log-entry-code :deep(.json-null) {
+  color: var(--color-json-null);
   font-weight: 600;
 }
 
-.log-entry-item .log-entry-content .log-entry-code .json-string {
-  color: #22863a;
-}
-
-.log-entry-item .log-entry-content .log-entry-code .json-number {
-  color: #005cc5;
-}
-
-.log-entry-item .log-entry-content .log-entry-code .json-boolean {
-  color: #d73a49;
-  font-weight: 600;
-}
-
-.log-entry-item .log-entry-content .log-entry-code .json-null {
-  color: #6f42c1;
-  font-weight: 600;
-}
-
-.dark .log-entry-code .json-key {
-  color: #60a5fa;
-}
-
-.dark .log-entry-code .json-string {
-  color: #86efac;
-}
-
-.dark .log-entry-code .json-number {
-  color: #7dd3fc;
-}
-
-.dark .log-entry-code .json-boolean {
-  color: #fca5a5;
-}
-
-.dark .log-entry-code .json-null {
-  color: #c4b5fd;
-}
-
-.tool-call-item .tool-response-hits {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  font-size: 12px;
-  font-family: "Fira Code", "Consolas", monospace;
-  padding: 6px 8px;
-  border-radius: 4px;
-  max-height: 200px;
-  overflow-y: auto;
-}
-
-.tool-call-item .tool-response-hits {
-  background: rgba(0, 0, 0, 0.04);
-}
-
-.dark .tool-call-item .tool-response-hits {
-  background: rgba(255, 255, 255, 0.06);
-}
-
-.tool-call-item .tool-response-hit {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 12px;
-  padding: 2px 0;
-}
-
-.tool-call-item .tool-response-hit:not(:last-child) {
-  border-bottom: 1px solid rgba(128, 128, 128, 0.15);
-  padding-bottom: 4px;
-}
-
-.tool-call-item .tool-response-list-item {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  padding: 4px 0;
-}
-
-.tool-call-item .tool-response-list-item:not(:last-child) {
-  border-bottom: 1px solid rgba(128, 128, 128, 0.15);
-  padding-bottom: 6px;
-}
-
-.tool-call-item .hit-field {
-  word-break: break-all;
-  user-select: text;
-  cursor: text;
-}
-
-.tool-call-item .hit-key {
-  opacity: 0.6;
-  font-weight: 600;
-}
-
-.tool-call-item .hit-error {
-  color: #f44336;
-}
-
-.tool-call-item .tool-response-meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  margin-top: 4px;
-}
-
-.tool-call-item .tool-call-error {
-  font-size: 11px;
-  color: #f44336;
-  font-style: italic;
-  max-width: 250px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.tool-call-item .tool-call-query {
-  font-family: "Fira Code", "Consolas", monospace;
-  font-size: 11px;
-  padding: 2px 6px;
-  border-radius: 4px;
-  max-width: 250px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.tool-call-item .tool-call-query {
-  background: rgba(0, 0, 0, 0.05);
-  color: #666;
-}
-
-.dark .tool-call-item .tool-call-query {
-  background: rgba(255, 255, 255, 0.08);
-  color: #888;
-}
-
-.tool-call-item .tool-error-message {
-  color: #f44336;
-}
-
-.tool-call-item .tool-suggestion {
-  font-style: italic;
-  opacity: 0.85;
-}
-
-.stream-error-block {
-  display: flex;
-  flex-direction: column;
-  padding: 10px 12px;
-  border-radius: 6px;
-  border-left: 3px solid #f44336;
-  margin-bottom: 8px;
-  font-size: 13px;
-}
-
-.stream-error-block.light-mode {
-  background: rgba(244, 67, 54, 0.06);
-  color: #4a5568;
-}
-
-.stream-error-block.dark-mode {
-  background: rgba(244, 67, 54, 0.1);
-  color: #a0aec0;
-}
-
-.stream-error-block .stream-error-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.stream-error-block .stream-error-message {
-  font-weight: 500;
-  color: #f44336;
-}
-
-.stream-error-block .stream-error-suggestion {
-  margin-top: 6px;
-  padding-left: 24px;
-  font-style: italic;
-  font-size: 12px;
-  opacity: 0.85;
-}
-
-.stream-error-block .stream-error-recoverable {
-  margin-top: 4px;
-  padding-left: 24px;
-  font-size: 11px;
-  opacity: 0.7;
-}
-
-/* =============================================
-   Syntax highlighting — light mode
-   ============================================= */
-.hljs {
+/* ============================================================
+   keep(lib-override:hljs) — highlight.js output. Token mapping mirrors
+   lib/core/Code/OCodeBlock.vue (D6); tokens flip via dark.css, so one rule set
+   covers both themes.
+   ============================================================ */
+.message-blocks :deep(.hljs) {
   display: block;
   overflow-x: auto;
   padding: 0.5em;
-  color: #24292e;
-  background: #ffffff;
+  color: var(--color-syntax-text);
+  background: var(--color-syntax-bg);
 }
-
-.hljs-doctag,
-.hljs-keyword,
-.hljs-meta .hljs-keyword,
-.hljs-template-tag,
-.hljs-template-variable,
-.hljs-type,
-.hljs-variable.language_ {
-  color: #d73a49;
+.message-blocks :deep(.hljs-doctag),
+.message-blocks :deep(.hljs-keyword),
+.message-blocks :deep(.hljs-meta .hljs-keyword),
+.message-blocks :deep(.hljs-template-tag),
+.message-blocks :deep(.hljs-template-variable),
+.message-blocks :deep(.hljs-type),
+.message-blocks :deep(.hljs-variable.language_) {
+  color: var(--color-syntax-keyword);
 }
-
-.hljs-title,
-.hljs-title.class_,
-.hljs-title.class_.inherited__,
-.hljs-title.function_ {
-  color: #6f42c1;
+.message-blocks :deep(.hljs-title),
+.message-blocks :deep(.hljs-title.class_),
+.message-blocks :deep(.hljs-title.class_.inherited__),
+.message-blocks :deep(.hljs-title.function_) {
+  color: var(--color-syntax-function);
 }
-
-.hljs-attr,
-.hljs-attribute,
-.hljs-literal,
-.hljs-meta,
-.hljs-number,
-.hljs-operator,
-.hljs-variable,
-.hljs-selector-attr,
-.hljs-selector-class,
-.hljs-selector-id {
-  color: #005cc5;
+.message-blocks :deep(.hljs-attr),
+.message-blocks :deep(.hljs-attribute),
+.message-blocks :deep(.hljs-literal),
+.message-blocks :deep(.hljs-meta),
+.message-blocks :deep(.hljs-number),
+.message-blocks :deep(.hljs-operator),
+.message-blocks :deep(.hljs-variable),
+.message-blocks :deep(.hljs-selector-attr),
+.message-blocks :deep(.hljs-selector-class),
+.message-blocks :deep(.hljs-selector-id) {
+  color: var(--color-syntax-number);
 }
-
-.hljs-regexp,
-.hljs-string,
-.hljs-meta .hljs-string {
-  color: #032f62;
+.message-blocks :deep(.hljs-regexp),
+.message-blocks :deep(.hljs-string),
+.message-blocks :deep(.hljs-meta .hljs-string) {
+  color: var(--color-syntax-string);
 }
-
-.hljs-built_in,
-.hljs-symbol {
-  color: #e36209;
+.message-blocks :deep(.hljs-built_in),
+.message-blocks :deep(.hljs-symbol) {
+  color: var(--color-syntax-builtin);
 }
-
-.hljs-comment,
-.hljs-code,
-.hljs-formula {
-  color: #6a737d;
+.message-blocks :deep(.hljs-comment),
+.message-blocks :deep(.hljs-code),
+.message-blocks :deep(.hljs-formula) {
+  color: var(--color-syntax-comment);
 }
-
-.hljs-name,
-.hljs-quote,
-.hljs-selector-tag,
-.hljs-selector-pseudo {
-  color: #22863a;
+.message-blocks :deep(.hljs-name),
+.message-blocks :deep(.hljs-quote),
+.message-blocks :deep(.hljs-selector-tag),
+.message-blocks :deep(.hljs-selector-pseudo) {
+  color: var(--color-syntax-tag);
 }
-
-.hljs-subst {
-  color: #24292e;
+.message-blocks :deep(.hljs-subst) {
+  color: var(--color-syntax-text);
 }
-
-.hljs-section {
-  color: #005cc5;
-  font-weight: bold;
+.message-blocks :deep(.hljs-section) {
+  color: var(--color-syntax-number);
+  font-weight: 600;
 }
-
-.hljs-bullet {
-  color: #735c0f;
+.message-blocks :deep(.hljs-bullet) {
+  color: var(--color-syntax-bullet);
 }
-
-.hljs-emphasis {
-  color: #24292e;
+.message-blocks :deep(.hljs-emphasis) {
+  color: var(--color-syntax-text);
   font-style: italic;
 }
-
-.hljs-strong {
-  color: #24292e;
-  font-weight: bold;
+.message-blocks :deep(.hljs-strong) {
+  color: var(--color-syntax-text);
+  font-weight: 600;
 }
-
-.hljs-addition {
-  color: #22863a;
-  background-color: #f0fff4;
+.message-blocks :deep(.hljs-addition) {
+  color: var(--color-syntax-addition-fg);
+  background-color: var(--color-syntax-addition-bg);
 }
-
-.hljs-deletion {
-  color: #b31d28;
-  background-color: #ffeef0;
-}
-
-/* =============================================
-   Syntax highlighting — dark mode
-   ============================================= */
-.dark .hljs {
-  display: block;
-  overflow-x: auto;
-  padding: 0.5em;
-  color: #c9d1d9;
-  background: #0d1117;
-}
-
-.dark .hljs-doctag,
-.dark .hljs-keyword,
-.dark .hljs-meta .hljs-keyword,
-.dark .hljs-template-tag,
-.dark .hljs-template-variable,
-.dark .hljs-type,
-.dark .hljs-variable.language_ {
-  color: #ff7b72;
-}
-
-.dark .hljs-title,
-.dark .hljs-title.class_,
-.dark .hljs-title.class_.inherited__,
-.dark .hljs-title.function_ {
-  color: #d2a8ff;
-}
-
-.dark .hljs-attr,
-.dark .hljs-attribute,
-.dark .hljs-literal,
-.dark .hljs-meta,
-.dark .hljs-number,
-.dark .hljs-operator,
-.dark .hljs-variable,
-.dark .hljs-selector-attr,
-.dark .hljs-selector-class,
-.dark .hljs-selector-id {
-  color: #79c0ff;
-}
-
-.dark .hljs-regexp,
-.dark .hljs-string,
-.dark .hljs-meta .hljs-string {
-  color: #a5d6ff;
-}
-
-.dark .hljs-built_in,
-.dark .hljs-symbol {
-  color: #ffa657;
-}
-
-.dark .hljs-comment,
-.dark .hljs-code,
-.dark .hljs-formula {
-  color: #8b949e;
-}
-
-.dark .hljs-name,
-.dark .hljs-quote,
-.dark .hljs-selector-tag,
-.dark .hljs-selector-pseudo {
-  color: #7ee787;
-}
-
-.dark .hljs-subst {
-  color: #c9d1d9;
-}
-
-.dark .hljs-section {
-  color: #1f6feb;
-  font-weight: bold;
-}
-
-.dark .hljs-bullet {
-  color: #f2cc60;
-}
-
-.dark .hljs-emphasis {
-  color: #c9d1d9;
-  font-style: italic;
-}
-
-.dark .hljs-strong {
-  color: #c9d1d9;
-  font-weight: bold;
-}
-
-.dark .hljs-addition {
-  color: #aff5b4;
-  background-color: #033a16;
-}
-
-.dark .hljs-deletion {
-  color: #ffdcd7;
-  background-color: #67060c;
+.message-blocks :deep(.hljs-deletion) {
+  color: var(--color-syntax-deletion-fg);
+  background-color: var(--color-syntax-deletion-bg);
 }
 </style>
diff --git a/web/src/components/O2AIConfirmDialog.vue b/web/src/components/O2AIConfirmDialog.vue
index 9e7c83c957..e02e8d9214 100644
--- a/web/src/components/O2AIConfirmDialog.vue
+++ b/web/src/components/O2AIConfirmDialog.vue
@@ -1,25 +1,24 @@
 <template>
-  <div v-if="visible" class="confirmation-overlay w-full mb-2 [animation:slideUp_0.25s_ease-out]">
+  <div v-if="visible" class="confirmation-overlay w-full mb-2">
     <div
-      class="confirmation-dialog w-full pt-4 px-4 pb-[14px] rounded-xl flex flex-col gap-[14px] shadow-[0_4px_16px_rgba(0,0,0,0.2)]"
-      :class="theme === 'dark' ? 'dark-mode bg-[#1e1e1e] border-2 border-[#323232] shadow-[0_2px_8px_rgba(0,0,0,0.3)]' : 'light-mode bg-white border-2 border-[#e4e7ec] shadow-[0_2px_8px_rgba(0,0,0,0.1)]'"
+      class="confirmation-dialog w-full pt-4 px-4 pb-3.5 rounded-default flex flex-col gap-3.5 bg-surface-base border-2 border-border-default shadow-[0_2px_8px_rgba(0,0,0,0.1)] dark:shadow-[0_2px_8px_rgba(0,0,0,0.3)]"
       @keydown="handleDialogKeydown"
       @click="handleDialogClick"
     >
       <div class="confirmation-header flex items-start gap-3">
-        <OIcon name="help-outline" size="md" class="confirmation-icon shrink-0 mt-[2px]" :class="theme === 'dark' ? 'text-[#9ca3af]' : 'text-[#6b7280]'" />
-        <span class="confirmation-title flex-1 text-[15px] font-medium leading-normal" :class="theme === 'dark' ? 'text-[#f3f4f6]' : 'text-[#1f2937]'">{{ formattedMessage }}</span>
+        <OIcon name="help-outline" size="md" class="confirmation-icon shrink-0 mt-0.5 text-icon-color" />
+        <span class="confirmation-title flex-1 text-sm font-medium leading-normal text-text-heading">{{ formattedMessage }}</span>
       </div>
 
-      <div class="confirmation-buttons flex flex-col gap-[10px] w-full pt-[14px] mt-1" :class="theme === 'dark' ? 'border-t border-[#374151]' : 'border-t border-[#e5e7eb]'">
+      <div class="confirmation-buttons flex flex-col gap-2.5 w-full pt-3.5 mt-1 border-t border-border-default">
         <!-- For navigation actions, show 3 buttons -->
         <template v-if="isNavigationAction">
           <OButton
             ref="yesButtonRef"
             variant="outline"
             :block="true"
-            class="confirmation-btn confirm-btn w-full text-sm font-semibold rounded-md normal-case tracking-normal transition-all duration-200 text-[var(--q-primary)] border-2 border-[#d1d5db] dark:border-[#4b5563] bg-white dark:bg-transparent hover:bg-[#eff6ff] hover:border-[var(--q-primary)] dark:hover:bg-[rgba(59,130,246,0.1)] dark:hover:border-[var(--q-primary)]"
-            :class="{ 'btn-focused': isFocusedYes }"
+            class="confirmation-btn w-full text-sm font-semibold rounded-default normal-case tracking-normal transition-all duration-200 text-theme-accent border-2 border-border-default bg-surface-base hover:bg-button-ghost-primary-hover-bg hover:border-theme-accent"
+            :class="isFocusedYes ? 'text-white! bg-theme-accent! border-theme-accent! ring-3 ring-theme-accent/40' : ''"
             tabindex="0"
             @click="handleConfirm"
             @focus="handleYesFocus"
@@ -29,8 +28,8 @@
             ref="alwaysButtonRef"
             variant="outline"
             :block="true"
-            class="confirmation-btn always-btn w-full text-sm font-semibold rounded-md normal-case tracking-normal transition-all duration-200 text-[#059669] dark:text-[#34d399] border-2 border-[#d1d5db] dark:border-[#4b5563] bg-white dark:bg-transparent hover:bg-[#f0fdf4] hover:border-[#34d399] dark:hover:bg-[rgba(5,150,105,0.1)] dark:hover:border-[#34d399]"
-            :class="{ 'btn-focused': isFocusedAlways }"
+            class="confirmation-btn w-full text-sm font-semibold rounded-default normal-case tracking-normal transition-all duration-200 text-status-positive border-2 border-border-default bg-surface-base hover:bg-button-ghost-success-hover-bg hover:border-status-positive"
+            :class="isFocusedAlways ? 'text-white! bg-status-positive! border-status-positive! ring-3 ring-status-positive/40' : ''"
             tabindex="1"
             @click="handleAlwaysConfirm"
             @focus="handleAlwaysFocus"
@@ -40,8 +39,8 @@
             ref="noButtonRef"
             variant="outline"
             :block="true"
-            class="confirmation-btn cancel-btn w-full text-sm font-semibold rounded-md normal-case tracking-normal transition-all duration-200 text-[#374151] dark:text-[#e5e7eb] border-2 border-[#d1d5db] dark:border-[#4b5563] bg-white dark:bg-transparent hover:bg-[#fef2f2] hover:border-[#fca5a5] dark:hover:bg-[rgba(239,68,68,0.1)] dark:hover:border-[#f87171]"
-            :class="{ 'btn-focused': isFocusedNo }"
+            class="confirmation-btn w-full text-sm font-semibold rounded-default normal-case tracking-normal transition-all duration-200 text-text-body border-2 border-border-default bg-surface-base hover:bg-button-ghost-destructive-hover-bg hover:border-status-negative"
+            :class="isFocusedNo ? 'text-white! bg-status-negative! border-status-negative! ring-3 ring-status-negative/40' : ''"
             tabindex="2"
             @click="handleCancel"
             @focus="handleNoFocus"
@@ -55,8 +54,8 @@
             ref="yesButtonRef"
             variant="outline"
             :block="true"
-            class="confirmation-btn confirm-btn w-full text-sm font-semibold rounded-md normal-case tracking-normal transition-all duration-200 text-[var(--q-primary)] border-2 border-[#d1d5db] dark:border-[#4b5563] bg-white dark:bg-transparent hover:bg-[#eff6ff] hover:border-[var(--q-primary)] dark:hover:bg-[rgba(59,130,246,0.1)] dark:hover:border-[var(--q-primary)]"
-            :class="{ 'btn-focused': isFocusedYes }"
+            class="confirmation-btn w-full text-sm font-semibold rounded-default normal-case tracking-normal transition-all duration-200 text-theme-accent border-2 border-border-default bg-surface-base hover:bg-button-ghost-primary-hover-bg hover:border-theme-accent"
+            :class="isFocusedYes ? 'text-white! bg-theme-accent! border-theme-accent! ring-3 ring-theme-accent/40' : ''"
             tabindex="0"
             @click="handleConfirm"
             @focus="handleYesFocus"
@@ -66,8 +65,8 @@
             ref="noButtonRef"
             variant="outline"
             :block="true"
-            class="confirmation-btn cancel-btn w-full text-sm font-semibold rounded-md normal-case tracking-normal transition-all duration-200 text-[#374151] dark:text-[#e5e7eb] border-2 border-[#d1d5db] dark:border-[#4b5563] bg-white dark:bg-transparent hover:bg-[#fef2f2] hover:border-[#fca5a5] dark:hover:bg-[rgba(239,68,68,0.1)] dark:hover:border-[#f87171]"
-            :class="{ 'btn-focused': isFocusedNo }"
+            class="confirmation-btn w-full text-sm font-semibold rounded-default normal-case tracking-normal transition-all duration-200 text-text-body border-2 border-border-default bg-surface-base hover:bg-button-ghost-destructive-hover-bg hover:border-status-negative"
+            :class="isFocusedNo ? 'text-white! bg-status-negative! border-status-negative! ring-3 ring-status-negative/40' : ''"
             tabindex="1"
             @click="handleCancel"
             @focus="handleNoFocus"
@@ -81,7 +80,6 @@
 
 <script setup lang="ts">
 import { ref, watch, nextTick, computed, onMounted, onUnmounted } from 'vue';
-import { useStore } from 'vuex';
 import OButton from '@/lib/core/Button/OButton.vue';
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 
@@ -110,9 +108,6 @@ const emit = defineEmits<{
   alwaysConfirm: [];
 }>();
 
-const store = useStore();
-const theme = computed(() => store.state.theme);
-
 // Check if this is a navigation action
 const isNavigationAction = computed(() => props.confirmation?.tool === 'navigation_action');
 
@@ -402,46 +397,23 @@ onUnmounted(() => {
 });
 </script>
 
-<style>
-@keyframes slideUp {
+<style scoped>
+/* keep(keyframes): the inline confirmation entrance is used only by this dialog.
+   The `animation` is declared here, not as a template `[animation:…]` utility, so
+   Vue's scoped compiler renames the keyframe and this reference together. */
+.confirmation-overlay {
+  animation: slide-up 0.25s ease-out;
+}
+
+@keyframes slide-up {
   from {
     opacity: 0;
-    transform: translateY(10px);
+    transform: translateY(0.625rem);
   }
   to {
     opacity: 1;
     transform: translateY(0);
   }
 }
-
-.confirmation-btn.confirm-btn.btn-focused {
-  color: #ffffff !important;
-  background-color: var(--q-primary) !important;
-  border-color: var(--q-primary) !important;
-  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.4) !important;
-}
-
-.dark .confirmation-btn.confirm-btn.btn-focused {
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4) !important;
-}
-
-.confirmation-btn.always-btn.btn-focused {
-  color: #ffffff !important;
-  background-color: #059669 !important;
-  border-color: #059669 !important;
-  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.4) !important;
-}
-
-.confirmation-btn.cancel-btn.btn-focused {
-  color: #ffffff !important;
-  background-color: #ef4444 !important;
-  border-color: #ef4444 !important;
-  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.4) !important;
-}
-
-.dark .confirmation-btn.cancel-btn.btn-focused {
-  background-color: #dc2626 !important;
-  border-color: #dc2626 !important;
-  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.4) !important;
-}
 </style>
+
diff --git a/web/src/components/OrganizationSelector.vue b/web/src/components/OrganizationSelector.vue
index 90effb41b3..04d6556b9b 100644
--- a/web/src/components/OrganizationSelector.vue
+++ b/web/src/components/OrganizationSelector.vue
@@ -211,7 +211,7 @@ const rowStateClass = (row: { org: OrgOption; index: number }) => {
           variant="outline-primary"
           size="xs"
           data-test="navbar-organizations-select-trigger"
-          class="w-56 text-text-primary!"
+          class="w-56 text-text-body!"
           :class="open ? 'ring-1 ring-inset ring-primary-300' : ''"
         >
           <template #icon-left>
@@ -243,12 +243,12 @@ const rowStateClass = (row: { org: OrgOption; index: number }) => {
         <div
           class="flex items-center justify-between gap-2 px-3 pt-2 pb-1.5"
         >
-          <span class="text-[13px] font-semibold text-text-primary">
+          <span class="text-compact font-semibold text-text-heading">
             {{ t("organization.header") }}
           </span>
           <span
             data-test="organization-menu-count"
-            class="shrink-0 text-[11px] font-semibold leading-none px-2 py-1 rounded-full bg-select-item-hover-bg text-text-secondary"
+            class="shrink-0 text-2xs font-semibold leading-none px-2 py-1 rounded-full bg-select-item-hover-bg text-text-secondary"
           >
             {{
               searchQuery
@@ -289,7 +289,7 @@ const rowStateClass = (row: { org: OrgOption; index: number }) => {
               :key="row.key"
               data-test="organization-menu-item-label-item-label"
               :data-test-org-identifier="row.org.identifier"
-              class="group absolute left-0 right-0 top-0 box-border flex items-center gap-2 px-3 rounded-md cursor-pointer transition-colors"
+              class="group absolute left-0 right-0 top-0 box-border flex items-center gap-2 px-3 rounded-default cursor-pointer transition-colors"
               :class="rowStateClass(row)"
               :style="{
                 transform: `translateY(${row.start}px)`,
@@ -305,13 +305,13 @@ const rowStateClass = (row: { org: OrgOption; index: number }) => {
                    to whatever space is left. -->
               <div class="flex items-baseline gap-2 min-w-0 flex-1">
                 <span
-                  class="flex-none max-w-full min-w-0 truncate text-[13px] font-medium leading-tight"
+                  class="flex-none max-w-full min-w-0 truncate text-compact font-medium leading-tight"
                 >
                   {{ row.org.label }}
                 </span>
                 <span
                   v-if="row.org.identifier && row.org.identifier !== row.org.label"
-                  class="shrink min-w-0 truncate text-[11px] font-mono leading-tight text-text-secondary"
+                  class="shrink min-w-0 truncate text-2xs font-mono leading-tight text-text-secondary"
                 >
                   {{ row.org.identifier }}
                 </span>
@@ -324,7 +324,7 @@ const rowStateClass = (row: { org: OrgOption; index: number }) => {
                 type="button"
                 data-test="organization-menu-item-copy-id"
                 :aria-label="`Copy organization ID ${row.org.identifier}`"
-                class="shrink-0 inline-flex items-center justify-center size-6 rounded-md transition hover:bg-primary-200 hover:text-select-item-selected-text"
+                class="shrink-0 inline-flex items-center justify-center size-6 rounded-default transition hover:bg-primary-200 hover:text-select-item-selected-text"
                 :class="
                   copiedId === row.org.identifier
                     ? 'opacity-100 text-primary-600'
@@ -349,7 +349,7 @@ const rowStateClass = (row: { org: OrgOption; index: number }) => {
         <div
           v-else
           data-test="organization-menu-no-data"
-          class="w-full text-center py-7 text-[13px] text-text-secondary"
+          class="w-full text-center py-7 text-compact text-text-secondary"
         >
           No organizations found
         </div>
@@ -357,3 +357,16 @@ const rowStateClass = (row: { org: OrgOption; index: number }) => {
     </ODropdown>
   </div>
 </template>
+
+<style scoped>
+/* keep(lib-override:o2-button): dark-only, element-scoped re-point of OButton's
+   ghost-primary tokens for the navbar organization switcher trigger. The custom properties are READ by OButton's
+   own internal DOM, so they have to be declared on the button element itself —
+   there is no utility that sets them. Scoping appends [data-v] to the
+   [data-test] compound, which is OButton's root and therefore carries this
+   component's scope id. Was a global in styles/utilities.css (W1.d). */
+.dark [data-test="navbar-organizations-select-trigger"] {
+  --color-button-ghost-primary-active-bg: var(--color-primary-900);
+  --color-button-ghost-primary-text: var(--color-primary-200);
+}
+</style>
diff --git a/web/src/components/PendingSubscriptionWarning.spec.ts b/web/src/components/PendingSubscriptionWarning.spec.ts
deleted file mode 100644
index 4718d0318c..0000000000
--- a/web/src/components/PendingSubscriptionWarning.spec.ts
+++ /dev/null
@@ -1,313 +0,0 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { mount, VueWrapper } from '@vue/test-utils';
-import { createStore } from 'vuex';
-import { createRouter, createWebHistory } from 'vue-router';
-import PendingSubscriptionWarning from '@/components/PendingSubscriptionWarning.vue';
-
-
-describe('PendingSubscriptionWarning.vue', () => {
-  let wrapper: VueWrapper;
-  let store: any;
-  let router: any;
-  let mockPush: any;
-
-  beforeEach(() => {
-    // Create mock router
-    mockPush = vi.fn();
-    router = createRouter({
-      history: createWebHistory(),
-      routes: [
-        { path: '/', component: { template: '<div>Home</div>' } },
-        { path: '/plans', name: 'plans', component: { template: '<div>Plans</div>' } }
-      ]
-    });
-    router.push = mockPush;
-
-    // Create mock store
-    store = createStore({
-      state: {
-        selectedOrganization: {
-          identifier: 'test-org-123'
-        }
-      },
-      mutations: {},
-      actions: {}
-    });
-  });
-
-  afterEach(() => {
-    if (wrapper) {
-      wrapper.unmount();
-    }
-    vi.clearAllMocks();
-  });
-
-  const createWrapper = (storeState = {}) => {
-    const currentStore = createStore({
-      state: {
-        selectedOrganization: {
-          identifier: 'test-org-123'
-        },
-        ...storeState
-      },
-      mutations: {},
-      actions: {}
-    });
-
-    return mount(PendingSubscriptionWarning, {
-      global: {
-        plugins: [currentStore, router],
-        stubs: {
-          // Stub OIcon with a data-test attribute so tests can locate it
-          // semantically without relying on CSS classes or internal markup.
-          OIcon: {
-            name: 'OIcon',
-            props: ['name', 'size', 'color'],
-            template: '<span data-test="pending-subscription-warning-icon" :data-name="name" />',
-          },
-          'q-btn': true,
-          OButton: {
-            template: '<button data-test="pending-subscription-warning-btn" v-bind="$attrs" @click="$emit(\'click\')"><slot></slot></button>',
-            props: ['variant', 'size', 'disabled', 'loading'],
-            emits: ['click'],
-          },
-        }
-      }
-    });
-  };
-
-  describe('Component Rendering', () => {
-    it('renders the component correctly', () => {
-      wrapper = createWrapper();
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it('displays warning icon', () => {
-      wrapper = createWrapper();
-      // OIcon is stubbed with data-test="pending-subscription-warning-icon".
-      // Locate it semantically rather than by CSS class or implementation tag.
-      const icon = wrapper.find('[data-test="pending-subscription-warning-icon"]');
-      expect(icon.exists()).toBe(true);
-      expect(icon.attributes('data-name')).toBe('warning');
-    });
-
-    it('displays warning message', () => {
-      wrapper = createWrapper();
-      // "Warning:" text is inside a <span> within an underlined bold element.
-      // Query by text content via the wrapping element rather than by CSS class.
-      expect(wrapper.text()).toContain('Warning:');
-    });
-
-    it('displays subscription button', () => {
-      wrapper = createWrapper();
-      // OButton stub renders with data-test="pending-subscription-warning-btn".
-      const button = wrapper.find('[data-test="pending-subscription-warning-btn"]');
-      expect(button.exists()).toBe(true);
-    });
-
-    it('has the main container rendered', () => {
-      // Structural CSS classes (Tailwind utility classes) must not be
-      // asserted in unit tests — use existence or semantic checks instead.
-      wrapper = createWrapper();
-      expect(wrapper.find('div').exists()).toBe(true);
-    });
-  });
-
-  describe('Router Navigation', () => {
-    it('calls routerPush when button is clicked', async () => {
-      wrapper = createWrapper();
-      const button = wrapper.find('[data-test="pending-subscription-warning-btn"]');
-      
-      await button.trigger('click');
-      
-      expect(mockPush).toHaveBeenCalledWith({
-        name: 'plans',
-        query: { org_identifier: 'test-org-123' }
-      });
-    });
-
-    it('navigates with correct organization identifier', async () => {
-      wrapper = createWrapper({
-        selectedOrganization: {
-          identifier: 'custom-org-456'
-        }
-      });
-      
-      const button = wrapper.find('[data-test="pending-subscription-warning-btn"]');
-      await button.trigger('click');
-      
-      expect(mockPush).toHaveBeenCalledWith({
-        name: 'plans',
-        query: { org_identifier: 'custom-org-456' }
-      });
-    });
-
-    it('handles missing organization identifier gracefully', async () => {
-      wrapper = createWrapper({
-        selectedOrganization: {}
-      });
-      
-      const button = wrapper.find('[data-test="pending-subscription-warning-btn"]');
-      await button.trigger('click');
-      
-      expect(mockPush).toHaveBeenCalledWith({
-        name: 'plans',
-        query: { org_identifier: undefined }
-      });
-    });
-
-    it('handles null selectedOrganization gracefully', async () => {
-      wrapper = createWrapper({
-        selectedOrganization: {
-          identifier: null
-        }
-      });
-      
-      const button = wrapper.find('[data-test="pending-subscription-warning-btn"]');
-      await button.trigger('click');
-      
-      expect(mockPush).toHaveBeenCalledWith({
-        name: 'plans',
-        query: { org_identifier: null }
-      });
-    });
-  });
-
-  describe('Component Setup', () => {
-    it('has correct component name', () => {
-      wrapper = createWrapper();
-      expect(wrapper.vm.$options.name).toBe('PendingSubscriptionWarning');
-    });
-
-    it('exposes router and routerPush in setup return', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      
-      expect(vm.router).toBeDefined();
-      expect(vm.routerPush).toBeDefined();
-      expect(typeof vm.routerPush).toBe('function');
-    });
-
-    it('routerPush function works correctly', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      
-      vm.routerPush();
-      
-      expect(mockPush).toHaveBeenCalledWith({
-        name: 'plans',
-        query: { org_identifier: 'test-org-123' }
-      });
-    });
-  });
-
-  describe('Store Integration', () => {
-    it('accesses store state correctly', () => {
-      wrapper = createWrapper({
-        selectedOrganization: {
-          identifier: 'integration-test-org'
-        }
-      });
-      
-      const vm = wrapper.vm as any;
-      vm.routerPush();
-      
-      expect(mockPush).toHaveBeenCalledWith({
-        name: 'plans',
-        query: { org_identifier: 'integration-test-org' }
-      });
-    });
-
-    it('handles different store states', () => {
-      wrapper = createWrapper({
-        selectedOrganization: {
-          identifier: 'different-org-123',
-          name: 'Test Organization'
-        }
-      });
-      
-      const button = wrapper.find('[data-test="pending-subscription-warning-btn"]');
-      button.trigger('click');
-      
-      expect(mockPush).toHaveBeenCalledWith({
-        name: 'plans',
-        query: { org_identifier: 'different-org-123' }
-      });
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('handles router push failure gracefully', async () => {
-      mockPush.mockImplementation(() => {
-        throw new Error('Navigation failed');
-      });
-      
-      wrapper = createWrapper();
-      const button = wrapper.find('[data-test="pending-subscription-warning-btn"]');
-      
-      expect(() => button.trigger('click')).not.toThrow();
-    });
-
-    it('handles multiple button clicks', async () => {
-      wrapper = createWrapper();
-      const button = wrapper.find('[data-test="pending-subscription-warning-btn"]');
-      
-      await button.trigger('click');
-      await button.trigger('click');
-      await button.trigger('click');
-      
-      expect(mockPush).toHaveBeenCalledTimes(3);
-      expect(mockPush).toHaveBeenCalledWith({
-        name: 'plans',
-        query: { org_identifier: 'test-org-123' }
-      });
-    });
-
-    it('renders with empty store state', () => {
-      wrapper = createWrapper({});
-      expect(wrapper.exists()).toBe(true);
-      expect(wrapper.find('[data-test="pending-subscription-warning-btn"]').exists()).toBe(true);
-    });
-  });
-
-  describe('Text Content', () => {
-    it('displays correct warning message', () => {
-      wrapper = createWrapper();
-      const text = wrapper.text();
-      
-      expect(text).toContain('Warning:');
-      expect(text).toContain('The content of this page cannot be viewed because the selected');
-      expect(text).toContain('organization\'s is on pending subscription state.');
-    });
-
-    it('has proper HTML structure for warning text', () => {
-      wrapper = createWrapper();
-      // "Warning:" is wrapped in a <u> element for underline emphasis.
-      // Locate via the semantic <u> tag rather than by CSS class.
-      const underlineElement = wrapper.find('u');
-      expect(underlineElement.exists()).toBe(true);
-      expect(underlineElement.text()).toContain('Warning:');
-    });
-  });
-
-  describe('Styling and Classes', () => {
-    // CSS class assertions are forbidden by testing rules (Rule #3: No CSS
-    // classes anywhere). Styling is the responsibility of visual-regression
-    // tests. The tests below verify structural/behavioral presence instead.
-
-    it('renders the main container', () => {
-      wrapper = createWrapper();
-      // Verify the root element exists; class values are not asserted.
-      expect(wrapper.find('div').exists()).toBe(true);
-    });
-
-    it('renders the warning icon', () => {
-      wrapper = createWrapper();
-      // OIcon stub has data-test="pending-subscription-warning-icon".
-      // Verify it renders the correct icon name.
-      const icon = wrapper.find('[data-test="pending-subscription-warning-icon"]');
-      expect(icon.exists()).toBe(true);
-      expect(icon.attributes('data-name')).toBe('warning');
-    });
-  });
-});
\ No newline at end of file
diff --git a/web/src/components/PendingSubscriptionWarning.vue b/web/src/components/PendingSubscriptionWarning.vue
deleted file mode 100644
index 5e8458522c..0000000000
--- a/web/src/components/PendingSubscriptionWarning.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <div class="flex w-11/12 justify-center mt-6">
-    <OIcon
-      name="warning" class="text-[var(--o2-warning)]" style="width: 80px; height: 80px;" /><br />
-    <h5>
-      <b
-        ><u><span class="text-red">Warning:</span></u></b
-      >
-      The content of this page cannot be viewed because the selected
-      organization's is on pending subscription state. <br /><br /><OButton
-        variant="primary"
-        size="sm-action"
-        @click="routerPush"
-        >Click here to proceed with subscription</OButton
-      >
-    </h5>
-  </div>
-</template>
-
-<script lang="ts">
-import { useRouter } from "vue-router";
-// @ts-nocheck
-import { defineComponent } from "vue";
-import { useStore } from "vuex";
-import OButton from "@/lib/core/Button/OButton.vue";
-import OIcon from "@/lib/core/Icon/OIcon.vue";
-
-export default defineComponent({
-  name: "PendingSubscriptionWarning",
-  components: { OButton,
-    OIcon,
-},
-  setup() {
-    const router = useRouter();
-    const store = useStore();
-
-    const routerPush = () => {
-      router.push({
-        name: "plans",
-        query: { org_identifier: store.state.selectedOrganization.identifier },
-      });
-    };
-
-    return {
-      router,
-      routerPush,
-    };
-  },
-});
-</script>
diff --git a/web/src/components/PredefinedThemes.spec.ts b/web/src/components/PredefinedThemes.spec.ts
index eee4463382..7e4183e58a 100644
--- a/web/src/components/PredefinedThemes.spec.ts
+++ b/web/src/components/PredefinedThemes.spec.ts
@@ -49,6 +49,10 @@ vi.mock("@/composables/usePredefinedThemes", () => ({
 // Mock theme utility
 vi.mock("@/utils/theme", () => ({
   applyThemeColors: vi.fn(),
+  // Pass-through: run the mode switch synchronously (no view transition in tests)
+  switchThemeMode: vi.fn((_mode: string, applyChanges: () => void) =>
+    applyChanges(),
+  ),
   hexToRgba: vi.fn((hex: string, opacity: number) => {
     return `rgba(0, 0, 0, ${opacity / 10})`;
   }),
@@ -184,28 +188,6 @@ const createWrapper = (props = {}, options = {}) => {
           props: ["modelValue"],
           emits: ["update:modelValue"],
         },
-        // Legacy stubs kept for safety (no longer rendered, harmless)
-        QCard: {
-          template: '<div data-test-stub="q-card"><slot></slot></div>',
-        },
-        QCardSection: {
-          template: '<div data-test-stub="q-card-section"><slot></slot></div>',
-        },
-        QBtn: {
-          template:
-            '<button data-test-stub="q-btn" :data-test="$attrs[\'data-test\']" @click="$emit(\'click\')"><slot></slot></button>',
-        },
-        QIcon: {
-          template: '<i data-test-stub="OIcon"></i>',
-        },
-        QTooltip: {
-          template: '<div data-test-stub="q-tooltip"><slot></slot></div>',
-        },
-        QColor: {
-          template: '<div data-test-stub="q-color"></div>',
-          props: ["modelValue"],
-          emits: ["update:modelValue"],
-        },
       },
       ...options,
     },
@@ -1353,7 +1335,7 @@ describe("PredefinedThemes", () => {
       expect(true).toBe(true);
     });
 
-    it("triggers applyThemeForMode when body class changes to body--dark", async () => {
+    it("triggers applyThemeForMode when html class changes to dark", async () => {
       const { applyThemeForMode } = await import("@/utils/themeManager");
       const wrapper = createWrapper();
       // Wait for onMounted to set up the observer
@@ -1363,7 +1345,7 @@ describe("PredefinedThemes", () => {
       vi.clearAllMocks();
 
       // Simulate the body class toggle (the MutationObserver watches this)
-      document.body.classList.add("body--dark");
+      document.documentElement.classList.add("dark");
       // MutationObserver fires asynchronously in a microtask
       await new Promise((resolve) => setTimeout(resolve, 0));
 
@@ -1371,7 +1353,7 @@ describe("PredefinedThemes", () => {
       expect(applyThemeForMode).toHaveBeenCalledWith("dark", expect.anything());
 
       // Cleanup
-      document.body.classList.remove("body--dark");
+      document.documentElement.classList.remove("dark");
       wrapper.unmount();
     });
 
@@ -1385,14 +1367,14 @@ describe("PredefinedThemes", () => {
       vi.clearAllMocks();
 
       // Trigger the MutationObserver
-      document.body.classList.add("body--dark");
+      document.documentElement.classList.add("dark");
       await new Promise((resolve) => setTimeout(resolve, 0));
 
       // With hasTempColors=true the observer returns early — no call
       expect(applyThemeForMode).not.toHaveBeenCalled();
 
       // Cleanup
-      document.body.classList.remove("body--dark");
+      document.documentElement.classList.remove("dark");
       wrapper.unmount();
     });
   });
diff --git a/web/src/components/PredefinedThemes.vue b/web/src/components/PredefinedThemes.vue
index 221ea8ebb4..eb52e9a5e7 100644
--- a/web/src/components/PredefinedThemes.vue
+++ b/web/src/components/PredefinedThemes.vue
@@ -64,18 +64,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <button
             type="button"
             :data-test="`predefined-themes-apply-btn-${mode}-${themeNameSlug(theme.name)}`"
-            class="flex items-center w-full py-2 px-3 border rounded-lg cursor-pointer transition-[border-color,background-color,box-shadow] duration-150 focus-visible:outline-none focus-visible:shadow-[0_0_0_2px_color-mix(in_srgb,var(--o2-primary-color)_40%,transparent)]"
+            class="flex items-center w-full py-2 px-3 border rounded-default cursor-pointer transition-[border-color,background-color,box-shadow] duration-150 focus-visible:outline-none focus-visible:shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-accent)_40%,transparent)]"
             :class="isThemeApplied(theme, mode)
-              ? 'border-(--o2-primary-color) bg-[color-mix(in_srgb,var(--o2-primary-color)_8%,var(--o2-card-bg))] shadow-[inset_0_0_0_1px_var(--o2-primary-color)]'
-              : 'border-(--o2-border-color) bg-(--o2-card-bg) hover:border-(--o2-primary-color) hover:bg-[color-mix(in_srgb,var(--o2-primary-color)_5%,var(--o2-card-bg))]'"
+              ? 'border-accent bg-[color-mix(in_srgb,var(--color-accent)_8%,var(--color-card-glass-bg))] shadow-[inset_0_0_0_1px_var(--color-accent)]'
+              : 'border-card-glass-border bg-card-glass-bg hover:border-accent hover:bg-[color-mix(in_srgb,var(--color-accent)_5%,var(--color-card-glass-bg))]'"
             :aria-pressed="isThemeApplied(theme, mode)"
             :aria-label="`Apply ${themeDisplayName(theme.name)} theme`"
             @click="applyTheme(theme, mode)"
           >
-            <span class="w-8 h-8 rounded border border-(--o2-border-color) shrink-0 relative" :style="swatchStyle(theme[mode])" />
+            <span class="w-8 h-8 rounded-default border border-card-glass-border shrink-0 relative" :style="swatchStyle(theme[mode])" />
             <span class="ml-2 min-w-0 flex-1 text-left">
               <span class="block text-sm font-medium truncate">{{ themeDisplayName(theme.name) }}</span>
-              <span class="block text-xs text-gray-400 truncate">{{ theme[mode].themeColor }}</span>
+              <span class="block text-xs text-text-secondary truncate">{{ theme[mode].themeColor }}</span>
             </span>
             <OTag
               v-if="isThemeApplied(theme, mode)"
@@ -91,24 +91,24 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <button
             type="button"
             :data-test="`predefined-themes-card-${mode}-custom-color`"
-            class="flex items-center w-full py-2 px-3 border border-dashed rounded-lg cursor-pointer transition-[border-color,background-color,box-shadow] duration-150 focus-visible:outline-none focus-visible:shadow-[0_0_0_2px_color-mix(in_srgb,var(--o2-primary-color)_40%,transparent)]"
+            class="flex items-center w-full py-2 px-3 border border-dashed rounded-default cursor-pointer transition-[border-color,background-color,box-shadow] duration-150 focus-visible:outline-none focus-visible:shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-accent)_40%,transparent)]"
             :class="isCustomThemeApplied(mode)
-              ? 'border-(--o2-primary-color) bg-[color-mix(in_srgb,var(--o2-primary-color)_8%,var(--o2-card-bg))] shadow-[inset_0_0_0_1px_var(--o2-primary-color)]'
-              : 'border-(--o2-border-color) bg-(--o2-card-bg) hover:border-(--o2-primary-color) hover:bg-[color-mix(in_srgb,var(--o2-primary-color)_5%,var(--o2-card-bg))]'"
+              ? 'border-accent bg-[color-mix(in_srgb,var(--color-accent)_8%,var(--color-card-glass-bg))] shadow-[inset_0_0_0_1px_var(--color-accent)]'
+              : 'border-card-glass-border bg-card-glass-bg hover:border-accent hover:bg-[color-mix(in_srgb,var(--color-accent)_5%,var(--color-card-glass-bg))]'"
             :aria-pressed="isCustomThemeApplied(mode)"
             aria-label="Pick a custom theme color"
             @click="openColorPicker(mode)"
           >
             <span
               :data-test="`predefined-themes-custom-color-preview-${mode}`"
-              class="w-8 h-8 rounded border border-(--o2-border-color) shrink-0 relative"
+              class="w-8 h-8 rounded-default border border-card-glass-border shrink-0 relative"
               :style="{ backgroundColor: mode === 'light' ? customLightColor : customDarkColor }"
             >
               <OIcon name="colorize" size="sm" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" />
             </span>
             <span class="ml-2 min-w-0 flex-1 text-left">
               <span class="block text-sm font-medium truncate">Custom Color</span>
-              <span class="block text-xs text-gray-400 truncate">
+              <span class="block text-xs text-text-secondary truncate">
                 {{ isCustomThemeApplied(mode)
                   ? (mode === 'light' ? customLightColor : customDarkColor)
                   : 'Pick any brand hex' }}
@@ -129,7 +129,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <OCardSection class="pt-0 pb-2 px-2">
       <OSeparator class="mb-2" />
       <div
-        class="text-xs text-gray-400 flex items-start gap-1 italic"
+        class="text-xs text-text-secondary flex items-start gap-1 italic"
       >
         <OIcon name="info-outline" size="xs" class="mt-0.5" />
         <span
@@ -171,7 +171,8 @@ import OTag from "@/lib/core/Badge/OTag.vue";
 import OColor from "@/lib/forms/Color/OColor.vue";
 import OSeparator from '@/lib/core/Separator/OSeparator.vue';
 import { useStore } from "vuex";
-import { applyThemeColors } from "@/utils/theme";
+import { useTheme } from "@/composables/useTheme";
+import { applyThemeColors, switchThemeMode } from "@/utils/theme";
 import { applyThemeForMode, applyCurrentTheme } from "@/utils/themeManager";
 import {
   PREDEFINED_THEMES,
@@ -186,6 +187,7 @@ import {
 import { toast } from "@/lib/feedback/Toast/useToast";
 
 const store = useStore();
+    const { isDark } = useTheme();
 const { isOpen } = usePredefinedThemes();
 const dialogOpen = ref(false);
 const activeTab = ref("light");
@@ -256,7 +258,7 @@ watch(isOpen, (val) => {
   dialogOpen.value = val;
   // When dialog opens, sync activeTab with current store theme
   if (val) {
-    activeTab.value = store.state.theme === "dark" ? "dark" : "light";
+    activeTab.value = isDark.value ? "dark" : "light";
   }
 });
 
@@ -269,11 +271,13 @@ watch(dialogOpen, (val) => {
 watch(activeTab, (newTab) => {
   const newTheme = newTab === "dark" ? "dark" : "light";
   if (store.state.theme !== newTheme) {
-    // Update theme in store and localStorage
-    store.dispatch("appTheme", newTheme);
     localStorage.setItem("theme", newTheme);
-    // Toggle .dark on <html> for the O2 component library (Tailwind dark variant)
-    document.documentElement.classList.toggle("dark", newTheme === "dark");
+    // Update store and toggle .dark on <html> (Tailwind dark variant) inside
+    // switchThemeMode so the mode flip cross-fades as one frame.
+    switchThemeMode(newTheme, () => {
+      store.dispatch("appTheme", newTheme);
+      document.documentElement.classList.toggle("dark", newTheme === "dark");
+    });
   }
 });
 
@@ -346,7 +350,7 @@ onMounted(() => {
           store.state.tempThemeColors?.dark;
         if (hasTempColors) return;
 
-        const bodyMode = document.body.classList.contains("body--dark")
+        const bodyMode = document.documentElement.classList.contains("dark")
           ? "dark"
           : "light";
         applyThemeForMode(bodyMode, store);
@@ -354,7 +358,7 @@ onMounted(() => {
     });
   });
 
-  observer.observe(document.body, {
+  observer.observe(document.documentElement, {
     attributes: true,
     attributeFilter: ["class"],
   });
diff --git a/web/src/components/QueryEditor.vue b/web/src/components/QueryEditor.vue
index 27c3c21040..db0288239e 100644
--- a/web/src/components/QueryEditor.vue
+++ b/web/src/components/QueryEditor.vue
@@ -11,11 +11,11 @@
     <div
       v-if="isAIMode"
       :data-test="`${dataTestPrefix}-ai-input-bar`"
-      :class="['bg-[linear-gradient(135deg,rgba(139,92,246,0.05)_0%,rgba(236,72,153,0.05)_100%)] border-b border-b-(--o2-border-color) h-9 flex items-center gap-2 px-2 shrink-0 z-10', props.hasExpandButton && 'pr-10']"
+      :class="['bg-[image:var(--color-gradient-ai-faint)] border-b border-b-card-glass-border h-9 flex items-center gap-2 px-2 shrink-0 z-10', props.hasExpandButton && 'pr-10']"
     >
       <!-- Show streaming status with spinner + stop button -->
       <template v-if="isGenerating">
-        <img :src="nlpIcon" alt="AI" class="w-[20px] h-[20px] shrink-0" />
+        <img :src="nlpIcon" alt="AI" class="w-5 h-5 shrink-0" />
         <OSpinner variant="dots" size="xs" />
         <span class="text-sm flex-1 truncate">{{ streamingText || aiStatusText || t('search.analyzingQuery') }}</span>
         <OButton
@@ -24,7 +24,7 @@
           icon-left="stop"
           :data-test="`${dataTestPrefix}-ai-stop-btn`"
           @click="cancelGeneration"
-          class="text-[#e74c3c]! transition-all! duration-200! hover:bg-[rgba(231,76,60,0.1)] shrink-0"
+          class="text-status-error-text! transition-all! duration-200! hover:bg-[rgba(231,76,60,0.1)] shrink-0"
         >
           <OTooltip :content="t('common.stopGenerating')" />
         </OButton>
@@ -39,7 +39,7 @@
           @keydown.enter="handleAIInputEnter"
         >
           <template #icon-left>
-            <img :src="nlpIcon" alt="AI" class="w-[20px] h-[20px]" />
+            <img :src="nlpIcon" alt="AI" class="w-5 h-5" />
           </template>
         </OInput>
         <!-- Send Button -->
@@ -50,7 +50,7 @@
           :disabled="!aiInputText.trim() || props.disableAi"
           :data-test="`${dataTestPrefix}-ai-send-btn`"
           @click="handleAIGenerate"
-          class="bg-[linear-gradient(135deg,#8B5CF6_0%,#EC4899_100%)]! text-white! transition-all! duration-200! min-w-7! min-h-7! w-7! h-7! enabled:hover:-translate-y-px enabled:hover:shadow-[0_0.25rem_0.75rem_0_rgba(139,92,246,0.4)]! enabled:active:translate-y-0 disabled:opacity-40! disabled:bg-[#ccc]!"
+          class="bg-[image:var(--color-gradient-ai)]! text-text-inverse! transition-all! duration-200! min-w-7! min-h-7! w-7! h-7! enabled:hover:-translate-y-px enabled:hover:shadow-[0_0.25rem_0.75rem_0_rgba(139,92,246,0.4)]! enabled:active:translate-y-0 disabled:opacity-40! disabled:bg-surface-subtle!"
         >
           <OTooltip v-if="props.disableAi && props.disableAiReason" :content="props.disableAiReason" />
           <OTooltip v-else-if="!aiInputText.trim()" :content="props.aiTooltip || t('search.enterPrompt')" />
@@ -102,10 +102,10 @@
         size="icon-toolbar"
         :disabled="props.disableAi"
         @click="nlpMode = true"
-        class="group absolute! top-0.75 z-100 bg-[linear-gradient(135deg,rgba(139,92,246,0.15)_0%,rgba(236,72,153,0.15)_100%)]! text-white! [transition:background_0.3s_ease,box-shadow_0.3s_ease]! w-7.5! h-7.5! min-w-7.5! min-h-7.5! rounded-md hover:bg-[linear-gradient(135deg,#8B5CF6_0%,#EC4899_100%)]! hover:shadow-[0_0.25rem_0.75rem_0_rgba(139,92,246,0.35)]!"
+        class="group absolute! top-0.75 z-100 bg-[image:var(--color-gradient-ai-subtle)]! text-text-inverse! [transition:background_0.3s_ease,box-shadow_0.3s_ease]! w-7.5! h-7.5! min-w-7.5! min-h-7.5! rounded-default hover:bg-[image:var(--color-gradient-ai)]! hover:shadow-[0_0.25rem_0.75rem_0_rgba(139,92,246,0.35)]!"
         :style="props.hasExpandButton ? { right: '2.375rem' } : { right: '0.25rem' }"
       >
-        <img :src="nlpIcon" alt="AI Mode" class="w-[18px] h-[18px] transition-transform duration-[600ms] ease-[ease] group-hover:rotate-180 group-hover:brightness-0 group-hover:invert" />
+        <img :src="nlpIcon" alt="AI Mode" class="w-4.5 h-4.5 transition-transform duration-[600ms] ease-[ease] group-hover:rotate-180 group-hover:brightness-0 group-hover:invert" />
         <OTooltip :content="props.disableAi && props.disableAiReason ? props.disableAiReason : t('nlMode.toggle')" />
       </OButton>
     </div>
@@ -116,6 +116,7 @@
 import { ref, computed, watch } from 'vue';
 import { useStore } from 'vuex';
 import { useI18n } from 'vue-i18n';
+import { useTheme } from '@/composables/useTheme';
 import CodeQueryEditor from '@/components/CodeQueryEditor.vue';
 import OButton from '@/lib/core/Button/OButton.vue';
 import OTooltip from '@/lib/overlay/Tooltip/OTooltip.vue';
@@ -194,6 +195,7 @@ const emit = defineEmits<{
 
 const store = useStore();
 const { t } = useI18n();
+const { isDark } = useTheme();
 
 // Language state
 const currentLanguage = ref<Language>(props.defaultLanguage);
@@ -232,7 +234,7 @@ const currentChatId = ref<number | null>(null);
 const chatMessages = ref<ChatMessage[]>([]);
 
 const nlpIcon = computed(() => {
-  return store.state.theme === 'dark'
+  return isDark.value
     ? getImageURL('images/common/ai_icon_dark.svg')
     : getImageURL('images/common/ai_icon_gradient.svg');
 });
diff --git a/web/src/components/QueryPlanDialog.spec.ts b/web/src/components/QueryPlanDialog.spec.ts
index c79e90e2b2..b544f76671 100644
--- a/web/src/components/QueryPlanDialog.spec.ts
+++ b/web/src/components/QueryPlanDialog.spec.ts
@@ -135,17 +135,7 @@ function mountDialog(props: Record<string, unknown> = {}) {
         OTabPanel: oTabPanelStub,
         QueryPlanTree: queryPlanTreeStub,
         MetricsSummaryCard: metricsSummaryCardStub,
-        "q-splitter": {
-          template:
-            '<div data-test="q-splitter"><slot name="before" /><slot name="after" /></div>',
-        },
-        "q-separator": true,
         "OIcon": true,
-        "q-space": true,
-        "q-tooltip": true,
-        "q-banner": { template: "<div><slot /></div>" },
-        "q-card": { template: "<div><slot /></div>" },
-        "q-card-section": { template: "<div><slot /></div>" },
       },
     },
     props: {
diff --git a/web/src/components/QueryPlanDialog.vue b/web/src/components/QueryPlanDialog.vue
index 9ce88fe0c6..78084c6a09 100644
--- a/web/src/components/QueryPlanDialog.vue
+++ b/web/src/components/QueryPlanDialog.vue
@@ -26,29 +26,29 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <OSplitter
         v-model="splitterPosition"
         :horizontal="false"
-        separator-class="query-plan-splitter"
+        separator-class="relative before:content-[''] before:absolute before:left-1/2 before:inset-y-0 before:w-px before:bg-card-glass-border before:-translate-x-1/2 before:transition-[background-color,width] before:duration-200 hover:before:bg-accent hover:before:w-0.5"
         class="h-full"
       >
         <!-- Left Pane: SQL Query -->
         <template #before>
-          <section class="flex flex-col overflow-hidden bg-(--o2-card-background) h-full">
-            <header class="shrink-0 flex items-center gap-2 h-11 px-4 bg-(--o2-card-bg) border-b border-solid border-(--o2-border-color)">
+          <section class="flex flex-col overflow-hidden bg-surface-base h-full">
+            <header class="shrink-0 flex items-center gap-2 h-11 px-4 bg-card-glass-bg border-b border-solid border-card-glass-border">
               <div class="flex items-center gap-2">
-                <OIcon name="code" size="sm" class="text-(--o2-text-secondary)" />
-                <h3 class="text-(length:--text-sm) font-(--font-semibold) text-(--o2-text-heading) m-0 tracking-[0.01em]">SQL Query</h3>
+                <OIcon name="code" size="sm" class="text-text-secondary" />
+                <h3 class="text-(length:--text-sm) font-(--font-semibold) text-text-heading m-0 tracking-[0.01em]">SQL Query</h3>
               </div>
             </header>
             <div class="flex-1 overflow-y-auto p-4">
-              <pre class="sql-query-text [font-family:var(--font-mono)] text-[0.8125rem] leading-[1.6] m-0 py-3.5 px-4 whitespace-pre-wrap wrap-break-word bg-(--o2-code-bg) border border-solid border-(--o2-border-color) rounded-md text-(--o2-text-code) min-h-full box-border"><code class="[font-family:inherit] text-inherit bg-transparent p-0">{{ sqlQuery }}</code></pre>
+              <pre class="sql-query-text [font-family:var(--font-mono)] text-compact leading-[1.6] m-0 py-3.5 px-4 whitespace-pre-wrap wrap-break-word bg-code-bg border border-solid border-card-glass-border rounded-default text-text-code min-h-full box-border"><code class="[font-family:inherit] text-inherit bg-transparent p-0">{{ sqlQuery }}</code></pre>
             </div>
           </section>
         </template>
 
         <!-- Right Pane: Explain/Analyze Results -->
         <template #after>
-          <section class="flex flex-col overflow-hidden bg-(--o2-card-background) h-full">
-            <header class="shrink-0 flex items-center gap-2 h-11 px-4 bg-(--o2-card-bg) border-b border-solid border-(--o2-border-color)">
-              <h3 class="text-(length:--text-sm) font-(--font-semibold) text-(--o2-text-heading) m-0 tracking-[0.01em]">
+          <section class="flex flex-col overflow-hidden bg-surface-base h-full">
+            <header class="shrink-0 flex items-center gap-2 h-11 px-4 bg-card-glass-bg border-b border-solid border-card-glass-border">
+              <h3 class="text-(length:--text-sm) font-(--font-semibold) text-text-heading m-0 tracking-[0.01em]">
                 {{
                   showAnalyzeResults
                     ? t("search.analyzeResults")
@@ -71,7 +71,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <div v-if="loading" class="flex-1 flex items-center justify-center p-6">
               <div class="text-center">
                 <OSpinner variant="dots" size="lg" />
-                <div class="mt-3 text-(--o2-text-secondary) text-(length:--text-sm)">
+                <div class="mt-3 text-text-secondary text-(length:--text-sm)">
                   {{
                     isAnalyzing
                       ? t("search.runningAnalyze")
@@ -93,9 +93,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 class="mb-3"
               />
 
-              <div class="plan-surface flex-1 flex flex-col bg-(--o2-card-bg) border border-solid border-(--o2-border-color) rounded-lg overflow-hidden">
-                <div class="px-4 py-2.5 border-b border-solid border-(--o2-border-color) bg-(--o2-card-background)">
-                  <span class="text-(length:--text-xs) font-(--font-semibold) tracking-[0.06em] uppercase text-(--o2-text-label)">{{ t("search.executionPlan") }}</span>
+              <div class="plan-surface flex-1 flex flex-col bg-card-glass-bg border border-solid border-card-glass-border rounded-default overflow-hidden">
+                <div class="px-4 py-2.5 border-b border-solid border-card-glass-border bg-surface-base">
+                  <span class="text-(length:--text-xs) font-(--font-semibold) tracking-[0.06em] uppercase text-text-label">{{ t("search.executionPlan") }}</span>
                 </div>
                 <div class="flex-1 overflow-y-auto py-3 px-4">
                   <QueryPlanTree
@@ -103,7 +103,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     :tree="planTree"
                     :is-analyze="true"
                   />
-                  <div v-else class="py-6 px-4 text-center text-(length:--text-sm) text-(--o2-text-muted)">
+                  <div v-else class="py-6 px-4 text-center text-(length:--text-sm) text-text-muted">
                     {{ t("search.noAnalyzePlanFound") }}
                   </div>
                 </div>
@@ -112,8 +112,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
             <!-- EXPLAIN view (tabs for logical/physical) -->
             <div v-else class="flex-1 overflow-y-auto flex flex-col p-4 gap-3">
-              <div class="plan-surface flex-1 flex flex-col bg-(--o2-card-bg) border border-solid border-(--o2-border-color) rounded-lg overflow-hidden">
-                <div class="border-b border-solid border-(--o2-border-color) px-2">
+              <div class="plan-surface flex-1 flex flex-col bg-card-glass-bg border border-solid border-card-glass-border rounded-default overflow-hidden">
+                <div class="border-b border-solid border-card-glass-border px-2">
                   <OTabs v-model="activeTab" dense align="left">
                     <OTab name="logical" :label="t('search.logicalPlan')" />
                     <OTab name="physical" :label="t('search.physicalPlan')" />
@@ -128,7 +128,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         :tree="logicalPlanTree"
                         :is-analyze="false"
                       />
-                      <div v-else class="py-6 px-4 text-center text-(length:--text-sm) text-(--o2-text-muted)">
+                      <div v-else class="py-6 px-4 text-center text-(length:--text-sm) text-text-muted">
                         {{ t("search.noLogicalPlan") }}
                       </div>
                     </div>
@@ -141,7 +141,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         :tree="physicalPlanTree"
                         :is-analyze="false"
                       />
-                      <div v-else class="py-6 px-4 text-center text-(length:--text-sm) text-(--o2-text-muted)">
+                      <div v-else class="py-6 px-4 text-center text-(length:--text-sm) text-text-muted">
                         {{ t("search.noPhysicalPlan") }}
                       </div>
                     </div>
@@ -227,7 +227,7 @@ export default defineComponent({
     const activeTab = ref("logical");
     const isAnalyzing = ref(false);
     const showAnalyzeResults = ref(false);
-    const splitterPosition = ref(50); // Split at 50%
+    const splitterPosition = ref(50);
 
     let { searchObj } = searchState();
 
@@ -236,7 +236,6 @@ export default defineComponent({
       set: (val) => emit("update:modelValue", val),
     });
 
-    // Get SQL query from searchObj
     const sqlQuery = computed(() => {
       return props.searchObj?.data?.query || "";
     });
@@ -622,40 +621,20 @@ export default defineComponent({
 });
 </script>
 
-<style>
-.plan-surface .o-tab-panels {
+<style scoped>
+/* keep(lib-override): stretch OTabPanels/OTabPanel library-internal DOM to fill the plan surface height */
+.plan-surface :deep(.o-tab-panels) {
   flex: 1;
   min-height: 0;
   display: flex;
   flex-direction: column;
 }
 
-.plan-surface .o-tab-panel {
+.plan-surface :deep(.o-tab-panel) {
   flex: 1;
   min-height: 0;
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }
-
-.query-plan-splitter {
-  position: relative;
-}
-
-.query-plan-splitter::before {
-  content: "";
-  position: absolute;
-  left: 50%;
-  top: 0;
-  bottom: 0;
-  width: 1px;
-  background-color: var(--o2-border-color);
-  transform: translateX(-50%);
-  transition: background-color 0.2s ease, width 0.2s ease;
-}
-
-.query-plan-splitter:hover::before {
-  background-color: var(--o2-primary-color);
-  width: 2px;
-}
 </style>
diff --git a/web/src/components/ResumePipelineDialog.spec.ts b/web/src/components/ResumePipelineDialog.spec.ts
index ff9b8f2cbb..4c6f33d028 100644
--- a/web/src/components/ResumePipelineDialog.spec.ts
+++ b/web/src/components/ResumePipelineDialog.spec.ts
@@ -52,12 +52,6 @@ const buildWrapper = (overrideProps: Record<string, any> = {}) =>
       provide: { store },
       stubs: {
         ODialog: ODialogStub,
-        "q-radio": {
-          template:
-            '<div class="q-radio-stub" @click="$emit(\'update:modelValue\', val)"><slot /></div>',
-          props: ["modelValue", "val"],
-          emits: ["update:modelValue"],
-        },
       },
     },
   });
@@ -188,7 +182,7 @@ describe("ResumePipelineDialog", () => {
       global: {
         plugins: [i18n],
         provide: { store },
-        stubs: { ODialog: ODialogStub, "q-radio": true },
+        stubs: { ODialog: ODialogStub },
       },
     });
     const dialog = localWrapper.findComponent(ODialogStub);
diff --git a/web/src/components/ResumePipelineDialog.vue b/web/src/components/ResumePipelineDialog.vue
index 99d89b709c..35c54cedb7 100644
--- a/web/src/components/ResumePipelineDialog.vue
+++ b/web/src/components/ResumePipelineDialog.vue
@@ -34,7 +34,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :value="false">
           <template #label>
             <div class="resume-radio-label">
-              <div class="resume-radio-main-text text-[13px] leading-4.5 font-normal">Continue from where it paused</div>
+              <div class="resume-radio-main-text text-compact leading-4.5 font-normal">Continue from where it paused</div>
               <div v-if="lastPausedAt" class="resume-radio-sub-text text-xs leading-4.5 font-normal h-4.5">
                 {{ convertUnixToDateFormat(lastPausedAt) }}.
               </div>
@@ -46,7 +46,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           style="height: 18px;"
         >
           <template #label>
-            <span class="text-[13px] leading-4.5 font-normal">Start from now.</span>
+            <span class="text-compact leading-4.5 font-normal">Start from now.</span>
           </template>
         </ORadio>
       </ORadioGroup>
diff --git a/web/src/components/RichTextInput.vue b/web/src/components/RichTextInput.vue
index feed4b80bf..d681bd29a0 100644
--- a/web/src/components/RichTextInput.vue
+++ b/web/src/components/RichTextInput.vue
@@ -1,10 +1,7 @@
 <template>
   <div
-    class="rich-text-input-wrapper py-1 px-2 pb-2 rounded-xl transition-all duration-200 ease-in-out min-h-15 cursor-text"
+    class="rich-text-input-wrapper py-1 px-2 pb-2 rounded-default transition-all duration-200 ease-in-out min-h-15 cursor-text bg-surface-base border border-border-default focus-within:border-transparent focus-within:shadow-[0_0_0_2px_var(--color-accent)]"
     :class="[
-      theme === 'dark'
-        ? ['dark-mode', 'bg-[#191919]', 'border', 'border-[#323232]', 'focus-within:border-transparent', 'focus-within:shadow-[0_0_0_2px_#5a6ec3]']
-        : ['light-mode', 'bg-white', 'border', 'border-[#e4e7ec]', 'focus-within:border-transparent', 'focus-within:shadow-[0_0_0_2px_#8B5CF6]'],
       disabled ? ['is-disabled', 'opacity-60', 'cursor-not-allowed'] : [],
       borderless ? ['borderless', 'p-0', 'border-0!', 'bg-transparent!', 'shadow-none!', 'rounded-none'] : []
     ]"
@@ -12,8 +9,8 @@
   >
     <div
       ref="editableDiv"
-      class="rich-text-input relative outline-none text-sm leading-[1.6] min-h-[40px] max-h-[300px] overflow-y-auto break-words whitespace-pre-wrap"
-      :class="theme === 'dark' ? 'text-[#e2e8f0]' : 'text-[#1a202c]'"
+      class="rich-text-input relative outline-none text-sm leading-[1.6] min-h-10 max-h-75 overflow-y-auto break-words whitespace-pre-wrap text-text-body"
+      :class="disabled ? 'cursor-not-allowed' : ''"
       contenteditable="true"
       :data-placeholder="placeholder"
       @input="handleInput"
@@ -26,10 +23,7 @@
     <!-- Detail Card -->
     <div
       v-if="showDetailCard"
-      class="chip-detail-card fixed max-w-75 max-h-75 border rounded-lg shadow-[0_8px_24px_rgba(0,0,0,0.25)] z-[100000] flex flex-col overflow-hidden"
-      :class="theme === 'dark'
-        ? ['dark-mode', 'bg-(--o2-primary-background)', 'border-(--o2-primary-background)']
-        : ['light-mode', 'bg-white', 'border-[#e4e7ec]']"
+      class="chip-detail-card fixed max-w-75 max-h-75 border rounded-default shadow-lg z-[100000] flex flex-col overflow-hidden bg-surface-base border-border-default"
       :style="{
         top: cardPosition.top + 'px',
         left: cardPosition.left + 'px',
@@ -37,8 +31,7 @@
       }"
       @click.stop
     >
-      <div class="card-content overflow-y-auto max-h-75 py-1 px-2 font-[Monaco,Menlo,'Courier_New',monospace] text-[11px] leading-[1.5] whitespace-pre-wrap break-words"
-        :class="theme === 'dark' ? 'text-[#e2e8f0]' : 'text-[#1a202c]'"
+      <div class="card-content overflow-y-auto max-h-75 py-1 px-2 font-mono text-2xs leading-[1.5] whitespace-pre-wrap break-words text-text-body"
         v-html="formatContent(detailCardContent)"></div>
     </div>
   </div>
@@ -625,35 +618,27 @@ export default defineComponent({
 });
 </script>
 
-<style>
-/* Disabled cursor on inner input */
-.rich-text-input-wrapper.is-disabled .rich-text-input {
-  cursor: not-allowed;
-}
+<style scoped>
+/* keep(generated-content) — .reference-chip and its children are built in JS with
+   document.createElement() inside the contenteditable, and .json-* spans are
+   injected via v-html. None of these nodes carry the scoped data-v attribute, so
+   they can only be reached with :deep() and cannot be expressed as utilities.
+   keep(scrollbar) — ::-webkit-scrollbar pseudo-elements have no utility form.
+   keep(complex-state) — .is-empty is toggled imperatively by the input handlers,
+   so the placeholder :before has no Tailwind variant. */
 
-/* Light mode placeholder */
-.rich-text-input-wrapper.light-mode .rich-text-input.is-empty:before {
+/* Placeholder for the empty contenteditable */
+.rich-text-input.is-empty:before {
   content: attr(data-placeholder);
-  color: #a0aec0;
+  color: var(--color-text-placeholder);
   pointer-events: none;
   position: absolute;
   left: 0;
-  top: 4px;
+  top: 0.25rem;
 }
 
-/* Dark mode placeholder */
-.rich-text-input-wrapper.dark-mode .rich-text-input.is-empty:before {
-  content: attr(data-placeholder);
-  color: #718096;
-  pointer-events: none;
-  position: absolute;
-  left: 0;
-  top: 4px;
-}
-
-/* Scrollbar styling */
 .rich-text-input::-webkit-scrollbar {
-  width: 6px;
+  width: 0.375rem;
 }
 
 .rich-text-input::-webkit-scrollbar-track {
@@ -661,175 +646,98 @@ export default defineComponent({
 }
 
 .rich-text-input::-webkit-scrollbar-thumb {
-  background: #cbd5e0;
-  border-radius: 3px;
-}
-
-.dark-mode .rich-text-input::-webkit-scrollbar-thumb {
-  background: #4a5568;
+  background: var(--color-border-strong);
+  border-radius: 0.1875rem;
 }
 
 /* Reference chips — dynamically created in JS */
-.reference-chip {
+.rich-text-input :deep(.reference-chip) {
   position: relative;
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  padding: 4px 8px;
-  margin: 4px 2px;
-  border-radius: 6px;
-  font-size: 12px;
+  gap: 0.375rem;
+  padding: 0.25rem 0.5rem;
+  margin: 0.25rem 0.125rem;
+  border-radius: 0.375rem;
+  font-size: var(--text-xs);
   cursor: pointer;
   user-select: none;
   vertical-align: middle;
   transition: all 0.15s ease;
   line-height: 1.4;
 
-  /* Default light mode colors */
-  background: #f0f4ff;
-  border: 1px solid #d0d9ff;
-  color: #4a5568;
+  background: var(--color-file-chip-bg);
+  border: 0.0625rem solid var(--color-file-border);
+  color: var(--color-file-chip-text);
 }
 
-.reference-chip .chip-preview {
+.rich-text-input :deep(.reference-chip .chip-preview) {
   font-weight: 500;
-  max-width: 120px;
+  max-width: 7.5rem;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.reference-chip .chip-meta {
-  font-size: 10px;
+.rich-text-input :deep(.reference-chip .chip-meta) {
+  font-size: var(--text-3xs);
   white-space: nowrap;
-  color: #718096;
+  color: var(--color-text-secondary);
 }
 
-.reference-chip .chip-remove {
+.rich-text-input :deep(.reference-chip .chip-remove) {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 16px;
-  height: 16px;
+  width: 1rem;
+  height: 1rem;
   padding: 0;
-  margin-left: 2px;
+  margin-left: 0.125rem;
   border: none;
   background: transparent;
   cursor: pointer;
-  font-size: 16px;
+  font-size: var(--text-base);
   line-height: 1;
-  border-radius: 3px;
+  border-radius: 0.1875rem;
   transition: all 0.15s ease;
-  color: #a0aec0;
+  color: var(--color-file-chip-remove);
 }
 
-.reference-chip .chip-remove:hover {
+.rich-text-input :deep(.reference-chip .chip-remove:hover) {
   transform: scale(1.1);
-  color: #e53e3e;
-  background: rgba(229, 62, 62, 0.1);
+  color: var(--color-status-negative);
+  background: var(--color-button-ghost-destructive-hover-bg);
 }
 
-.reference-chip:hover {
-  background: #e6edff;
-  border-color: #b8c5ff;
-}
-
-/* Light mode chip overrides */
-.rich-text-input-wrapper.light-mode .reference-chip {
-  background: #f0f4ff;
-  border: 1px solid #d0d9ff;
-  color: #4a5568;
-}
-
-.rich-text-input-wrapper.light-mode .reference-chip .chip-meta {
-  color: #718096;
-}
-
-.rich-text-input-wrapper.light-mode .reference-chip .chip-remove {
-  color: #a0aec0;
-}
-
-.rich-text-input-wrapper.light-mode .reference-chip .chip-remove:hover {
-  color: #e53e3e;
-  background: rgba(229, 62, 62, 0.1);
-}
-
-.rich-text-input-wrapper.light-mode .reference-chip:hover {
-  background: #e6edff;
-  border-color: #b8c5ff;
-}
-
-/* Dark mode chip overrides */
-.dark-mode .reference-chip,
-.rich-text-input-wrapper.dark-mode .reference-chip {
-  background: #2d3748;
-  border: 1px solid #4a5568;
-  color: #e2e8f0;
-}
-
-.dark-mode .reference-chip .chip-meta,
-.rich-text-input-wrapper.dark-mode .reference-chip .chip-meta {
-  color: #a0aec0;
-}
-
-.dark-mode .reference-chip .chip-remove,
-.rich-text-input-wrapper.dark-mode .reference-chip .chip-remove {
-  color: #718096;
-}
-
-.dark-mode .reference-chip .chip-remove:hover,
-.rich-text-input-wrapper.dark-mode .reference-chip .chip-remove:hover {
-  color: #fc8181;
-  background: rgba(252, 129, 129, 0.1);
-}
-
-.dark-mode .reference-chip:hover,
-.rich-text-input-wrapper.dark-mode .reference-chip:hover {
-  background: #374151;
-  border-color: #5a6c7d;
+/* Chip hover — derived from the chip tokens so it flips with the theme on its
+   own (both --color-file-chip-bg and --color-file-chip-text are dark-aware),
+   which replaces the former light/dark literal pair. */
+.rich-text-input :deep(.reference-chip:hover) {
+  background: color-mix(in srgb, var(--color-file-chip-bg) 88%, var(--color-file-chip-text) 12%);
+  border-color: color-mix(in srgb, var(--color-file-border) 70%, var(--color-file-chip-text) 30%);
 }
 
 /* JSON syntax highlighting in detail card (v-html injected content) */
-.chip-detail-card .card-content .json-key {
-  color: #0066cc;
+.chip-detail-card .card-content :deep(.json-key) {
+  color: var(--color-json-key);
   font-weight: 600;
 }
 
-.dark-mode .chip-detail-card .card-content .json-key {
-  color: #60a5fa;
+.chip-detail-card .card-content :deep(.json-string) {
+  color: var(--color-json-string);
 }
 
-.chip-detail-card .card-content .json-string {
-  color: #22863a;
+.chip-detail-card .card-content :deep(.json-number) {
+  color: var(--color-json-number);
 }
 
-.dark-mode .chip-detail-card .card-content .json-string {
-  color: #86efac;
-}
-
-.chip-detail-card .card-content .json-number {
-  color: #005cc5;
-}
-
-.dark-mode .chip-detail-card .card-content .json-number {
-  color: #7dd3fc;
-}
-
-.chip-detail-card .card-content .json-boolean {
-  color: #d73a49;
+.chip-detail-card .card-content :deep(.json-boolean) {
+  color: var(--color-json-boolean);
   font-weight: 600;
 }
 
-.dark-mode .chip-detail-card .card-content .json-boolean {
-  color: #fca5a5;
-}
-
-.chip-detail-card .card-content .json-null {
-  color: #6f42c1;
+.chip-detail-card .card-content :deep(.json-null) {
+  color: var(--color-json-null);
   font-weight: 600;
 }
-
-.dark-mode .chip-detail-card .card-content .json-null {
-  color: #c4b5fd;
-}
 </style>
diff --git a/web/src/components/RouteTabs.spec.ts b/web/src/components/RouteTabs.spec.ts
deleted file mode 100644
index c583e61755..0000000000
--- a/web/src/components/RouteTabs.spec.ts
+++ /dev/null
@@ -1,409 +0,0 @@
-import { describe, it, expect, vi, afterEach } from 'vitest';
-import { mount, VueWrapper } from '@vue/test-utils';
-import RouteTabs from '@/components/RouteTabs.vue';
-
-vi.mock('vue-router', () => ({
-  useRouter: () => ({
-    push: vi.fn(),
-    currentRoute: { value: { name: '', query: {} } },
-  }),
-  useRoute: () => ({ name: '', query: {} }),
-}));
-
-
-describe('RouteTabs.vue', () => {
-  let wrapper: VueWrapper;
-
-  afterEach(() => {
-    if (wrapper) {
-      wrapper.unmount();
-    }
-  });
-
-  const mockTabs = [
-    {
-      name: 'tab1',
-      to: '/tab1',
-      label: 'Tab 1',
-      class: 'tab-class-1',
-      dataTest: 'tab-1-test'
-    },
-    {
-      name: 'tab2',
-      to: '/tab2',
-      label: 'Tab 2',
-      class: 'tab-class-2',
-      dataTest: 'tab-2-test'
-    },
-    {
-      name: 'tab3',
-      to: '/tab3',
-      label: 'Tab 3',
-      class: 'tab-class-3',
-      dataTest: 'tab-3-test'
-    }
-  ];
-
-  const createWrapper = (props = {}) => {
-    const defaultProps = {
-      tabs: mockTabs,
-      activeTab: 'tab1',
-      dataTest: 'route-tabs-test',
-      direction: 'vertical'
-    };
-
-    return mount(RouteTabs, {
-      props: { ...defaultProps, ...props },
-      global: {
-        plugins: [],
-        stubs: {
-          OTabs: {
-            template: '<div class="o-tabs-stub" :data-test="dataTest" :class="{ vertical: orientation === \'vertical\' }"><slot></slot></div>',
-            props: ['dataTest', 'modelValue', 'orientation', 'indicatorColor', 'inlineLabel'],
-            emits: ['update:modelValue'],
-          },
-          ORouteTab: {
-            template: '<div class="o-route-tab-stub" :data-test="dataTest">{{ label }}</div>',
-            props: ['dataTest', 'name', 'to', 'label', 'contentClass', 'icon', 'default'],
-          },
-        }
-      }
-    });
-  };
-
-  describe('Component Rendering', () => {
-    it('renders the component correctly', () => {
-      wrapper = createWrapper();
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it('renders q-tabs component', () => {
-      wrapper = createWrapper();
-      const tabs = wrapper.find('.o-tabs-stub');
-      expect(tabs.exists()).toBe(true);
-    });
-
-    it('passes correct props to q-tabs', () => {
-      wrapper = createWrapper({ dataTest: 'custom-test' });
-      const tabs = wrapper.find('.o-tabs-stub');
-      
-      expect(tabs.attributes('data-test')).toBe('custom-test');
-    });
-
-    it('renders all tab items', () => {
-      wrapper = createWrapper();
-      const routeTabs = wrapper.findAll('.o-route-tab-stub');
-      
-      expect(routeTabs.length).toBe(3);
-    });
-
-    it('displays tab labels correctly', () => {
-      wrapper = createWrapper();
-      const routeTabs = wrapper.findAll('.o-route-tab-stub');
-      
-      expect(routeTabs[0].text()).toBe('Tab 1');
-      expect(routeTabs[1].text()).toBe('Tab 2');
-      expect(routeTabs[2].text()).toBe('Tab 3');
-    });
-  });
-
-  describe('Props Handling', () => {
-    it('accepts required props', () => {
-      const props = {
-        tabs: mockTabs,
-        activeTab: 'tab2',
-        dataTest: 'test-tabs'
-      };
-      
-      wrapper = createWrapper(props);
-      
-      expect(wrapper.props('tabs')).toEqual(mockTabs);
-      expect(wrapper.props('activeTab')).toBe('tab2');
-      expect(wrapper.props('dataTest')).toBe('test-tabs');
-    });
-
-    it('uses default direction when not provided', () => {
-      wrapper = createWrapper({ direction: undefined });
-      expect(wrapper.props('direction')).toBe('vertical');
-    });
-
-    it('accepts custom direction prop', () => {
-      wrapper = createWrapper({ direction: 'horizontal' });
-      expect(wrapper.props('direction')).toBe('horizontal');
-    });
-
-    it('handles empty tabs array', () => {
-      wrapper = createWrapper({ tabs: [] });
-      const routeTabs = wrapper.findAll('.o-route-tab-stub');
-      
-      expect(routeTabs.length).toBe(0);
-    });
-
-    it('passes tab properties to q-route-tab', () => {
-      wrapper = createWrapper();
-      const firstTab = wrapper.find('.o-route-tab-stub');
-      
-      expect(firstTab.attributes('data-test')).toBe('tab-1-test');
-    });
-  });
-
-  describe('Active Tab Management', () => {
-    it('initializes with correct active tab', () => {
-      wrapper = createWrapper({ activeTab: 'tab2' });
-      const vm = wrapper.vm as any;
-      
-      expect(vm.activeTab).toBe('tab2');
-    });
-
-    it('initializes with props but maintains internal state', async () => {
-      wrapper = createWrapper({ activeTab: 'tab1' });
-      const vm = wrapper.vm as any;
-      
-      expect(vm.activeTab).toBe('tab1');
-      
-      // Internal state doesn't automatically update with prop changes
-      await wrapper.setProps({ activeTab: 'tab3' });
-      expect(vm.activeTab).toBe('tab1'); // Still has initial value
-    });
-
-    it('exposes setActiveTab method', () => {
-      wrapper = createWrapper();
-      
-      expect(typeof wrapper.vm.setActiveTab).toBe('function');
-    });
-
-    it('setActiveTab updates internal state', async () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      
-      await vm.setActiveTab('tab3');
-      
-      expect(vm.activeTab).toBe('tab3');
-    });
-  });
-
-  describe('Event Handling', () => {
-    it('emits update:activeTab when handleTabChange is called', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      
-      vm.handleTabChange('tab2');
-      
-      expect(wrapper.emitted('update:activeTab')).toBeTruthy();
-      expect(wrapper.emitted('update:activeTab')?.[0]).toEqual(['tab2']);
-    });
-
-    it('updates internal state when handleTabChange is called', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      
-      vm.handleTabChange('tab3');
-      
-      expect(vm.activeTab).toBe('tab3');
-    });
-
-    it('handles multiple tab changes', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      
-      vm.handleTabChange('tab2');
-      vm.handleTabChange('tab3');
-      vm.handleTabChange('tab1');
-      
-      expect(wrapper.emitted('update:activeTab')).toHaveLength(3);
-      expect(wrapper.emitted('update:activeTab')?.[2]).toEqual(['tab1']);
-      expect(vm.activeTab).toBe('tab1');
-    });
-  });
-
-  describe('Direction Handling', () => {
-    it('applies vertical direction by default', () => {
-      wrapper = createWrapper();
-      const tabs = wrapper.find('.o-tabs-stub');
-      
-      // Check if vertical class or attribute is applied
-      expect(wrapper.props('direction')).toBe('vertical');
-    });
-
-    it('handles horizontal direction', () => {
-      wrapper = createWrapper({ direction: 'horizontal' });
-      
-      expect(wrapper.props('direction')).toBe('horizontal');
-    });
-
-    it('passes direction to q-tabs component', () => {
-      wrapper = createWrapper({ direction: 'vertical' });
-      const tabs = wrapper.find('.o-tabs-stub');
-      
-      expect(tabs.classes()).toContain('vertical');
-    });
-  });
-
-  describe('Tab Configuration', () => {
-    it('handles tabs with all properties', () => {
-      const complexTabs = [
-        {
-          name: 'complex-tab',
-          to: '/complex',
-          label: 'Complex Tab',
-          class: 'complex-class',
-          dataTest: 'complex-test'
-        }
-      ];
-      
-      wrapper = createWrapper({ tabs: complexTabs });
-      const tab = wrapper.find('.o-route-tab-stub');
-      
-      expect(tab.exists()).toBe(true);
-      expect(tab.text()).toBe('Complex Tab');
-      expect(tab.attributes('data-test')).toBe('complex-test');
-    });
-
-    it('handles tabs without optional properties', () => {
-      const simpleTabs = [
-        {
-          name: 'simple-tab',
-          to: '/simple',
-          label: 'Simple Tab'
-        }
-      ];
-      
-      wrapper = createWrapper({ tabs: simpleTabs });
-      const tab = wrapper.find('.o-route-tab-stub');
-      
-      expect(tab.exists()).toBe(true);
-      expect(tab.text()).toBe('Simple Tab');
-    });
-
-    it('maintains tab order', () => {
-      wrapper = createWrapper();
-      const tabs = wrapper.findAll('.o-route-tab-stub');
-      
-      expect(tabs[0].text()).toBe('Tab 1');
-      expect(tabs[1].text()).toBe('Tab 2');
-      expect(tabs[2].text()).toBe('Tab 3');
-    });
-  });
-
-  describe('Component Setup', () => {
-    it('uses Vue 3 setup syntax', () => {
-      wrapper = createWrapper();
-      
-      // Component should be properly mounted with setup
-      expect(wrapper.vm).toBeTruthy();
-    });
-
-    it('defines props correctly', () => {
-      wrapper = createWrapper();
-      
-      expect(wrapper.props()).toHaveProperty('tabs');
-      expect(wrapper.props()).toHaveProperty('activeTab');
-      expect(wrapper.props()).toHaveProperty('dataTest');
-      expect(wrapper.props()).toHaveProperty('direction');
-    });
-
-    it('defines emits correctly', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      
-      vm.handleTabChange('test');
-      expect(wrapper.emitted()).toHaveProperty('update:activeTab');
-    });
-
-    it('exposes methods correctly', () => {
-      wrapper = createWrapper();
-      
-      expect(wrapper.vm.setActiveTab).toBeDefined();
-      expect(typeof wrapper.vm.setActiveTab).toBe('function');
-    });
-  });
-
-  describe('Reactivity', () => {
-    it('maintains independent internal state', async () => {
-      wrapper = createWrapper({ activeTab: 'tab1' });
-      const vm = wrapper.vm as any;
-      
-      // Initial state matches prop
-      expect(vm.activeTab).toBe('tab1');
-      
-      // Internal state is independent after initialization
-      await wrapper.setProps({ activeTab: 'tab2' });
-      expect(vm.activeTab).toBe('tab1'); // Internal state unchanged
-    });
-
-    it('maintains internal state consistency', async () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      
-      vm.handleTabChange('tab2');
-      expect(vm.activeTab).toBe('tab2');
-      
-      await vm.setActiveTab('tab3');
-      expect(vm.activeTab).toBe('tab3');
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('handles tabs with special characters in names', () => {
-      const specialTabs = [
-        {
-          name: 'tab-with-dashes',
-          to: '/tab-with-dashes',
-          label: 'Tab With Dashes'
-        },
-        {
-          name: 'tab_with_underscores',
-          to: '/tab_with_underscores',
-          label: 'Tab With Underscores'
-        }
-      ];
-      
-      wrapper = createWrapper({ tabs: specialTabs });
-      const tabs = wrapper.findAll('.o-route-tab-stub');
-      
-      expect(tabs).toHaveLength(2);
-      expect(tabs[0].text()).toBe('Tab With Dashes');
-      expect(tabs[1].text()).toBe('Tab With Underscores');
-    });
-
-    it('handles empty activeTab string', () => {
-      wrapper = createWrapper({ activeTab: '' });
-      const vm = wrapper.vm as any;
-      
-      expect(vm.activeTab).toBe('');
-    });
-
-    it('handles tab change to non-existent tab', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      
-      vm.handleTabChange('non-existent-tab');
-      
-      expect(vm.activeTab).toBe('non-existent-tab');
-      expect(wrapper.emitted('update:activeTab')?.[0]).toEqual(['non-existent-tab']);
-    });
-  });
-
-  describe('Component Lifecycle', () => {
-    it('mounts without errors', () => {
-      expect(() => {
-        wrapper = createWrapper();
-      }).not.toThrow();
-    });
-
-    it('unmounts cleanly', () => {
-      wrapper = createWrapper();
-      
-      expect(() => {
-        wrapper.unmount();
-      }).not.toThrow();
-    });
-
-    it('initializes reactive state correctly', () => {
-      wrapper = createWrapper({ activeTab: 'initial-tab' });
-      const vm = wrapper.vm as any;
-      
-      expect(vm.activeTab).toBe('initial-tab');
-    });
-  });
-});
\ No newline at end of file
diff --git a/web/src/components/RouteTabs.vue b/web/src/components/RouteTabs.vue
deleted file mode 100644
index 71272358ec..0000000000
--- a/web/src/components/RouteTabs.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-  <OTabs
-    :data-test="dataTest"
-    v-model="activeTab"
-    :orientation="direction === 'vertical' ? 'vertical' : 'horizontal'"
-    @update:model-value="handleTabChange"
-  >
-    <template v-for="tab in (tabs as any)" :key="tab.name">
-      <ORouteTab
-        :data-test="tab.dataTest"
-        :name="tab.name"
-        :to="tab.to"
-        :label="tab.label"
-      />
-    </template>
-  </OTabs>
-</template>
-
-<script setup lang="ts">
-import ORouteTab from '@/lib/navigation/Tabs/ORouteTab.vue'
-import OTabs from '@/lib/navigation/Tabs/OTabs.vue'
-import { nextTick } from "vue";
-import { ref, watch } from "vue";
-
-const props = defineProps({
-  tabs: {
-    type: Array,
-    required: true,
-  },
-  activeTab: {
-    type: String,
-    required: true,
-  },
-  dataTest: {
-    type: String,
-    required: true,
-  },
-  direction: {
-    type: String,
-    default: "vertical",
-  },
-});
-
-const emits = defineEmits(["update:activeTab"]);
-
-const activeTab = ref(props.activeTab);
-
-const setActiveTab = async (value: string) => {
-  await nextTick();
-  activeTab.value = value;
-};
-
-const handleTabChange = (tab: string) => {
-  activeTab.value = tab;
-  emits("update:activeTab", tab);
-};
-
-defineExpose({
-  setActiveTab,
-});
-</script>
diff --git a/web/src/components/TelemetryCorrelationPanel.vue b/web/src/components/TelemetryCorrelationPanel.vue
deleted file mode 100644
index 2d23a1acbc..0000000000
--- a/web/src/components/TelemetryCorrelationPanel.vue
+++ /dev/null
@@ -1,297 +0,0 @@
-<template>
-  <div v-if="show" class="flex flex-col h-full bg-(--q-background) border-l border-(--q-border-color)">
-    <div class="correlation-header flex items-center justify-between py-3 px-4 border-b border-(--q-border-color) bg-(--q-header-bg)">
-      <div class="header-content flex items-center gap-2">
-        <OIcon name="link" size="sm" />
-        <span class="header-title font-semibold text-sm">Related Telemetry</span>
-      </div>
-      <OButton
-        variant="ghost"
-        size="icon"
-        icon-left="close"
-        @click="$emit('close')"
-      />
-    </div>
-
-    <div class="correlation-body flex-1 overflow-y-auto p-4">
-      <!-- Loading State -->
-      <div v-if="loading" class="flex flex-col items-center justify-center gap-3 py-8 px-4 text-center">
-        <OSpinner size="sm" />
-        <span class="text-[13px] text-(--q-text-secondary)">Finding related data...</span>
-      </div>
-
-      <!-- Error State -->
-      <div v-else-if="error" class="flex flex-col items-center justify-center gap-3 py-8 px-4 text-center">
-        <OIcon name="error-outline" size="md" />
-        <span class="text-[13px] text-(--q-negative)">{{ error }}</span>
-      </div>
-
-      <!-- No Correlation Available -->
-      <div v-else-if="!correlationResult" class="flex flex-col items-center justify-center gap-3 py-8 px-4 text-center">
-        <OIcon name="info-outline" size="md" />
-        <span class="text-[13px] text-(--q-text-secondary)">No related telemetry found</span>
-      </div>
-
-      <!-- Correlation Results -->
-      <div v-else class="correlation-results flex flex-col gap-4">
-        <!-- Service Info -->
-        <div class="service-info flex flex-col gap-3">
-          <div class="service-name flex items-center gap-[6px] font-semibold text-sm">
-            <OIcon name="cloud" size="xs" />
-            {{ correlationResult.service.service_name }}
-          </div>
-
-          <!-- Matched Dimensions (used for correlation) -->
-          <div
-            v-if="correlationResult.correlationData?.matched_dimensions &&
-                  Object.keys(correlationResult.correlationData.matched_dimensions).length > 0"
-            class="dimension-section flex flex-col gap-[6px]"
-          >
-            <div class="dimension-section-header flex items-center gap-[6px] text-[11px] font-semibold uppercase text-[var(--q-text-secondary)] [letter-spacing:0.5px]">
-              <OIcon name="link" size="xs" />
-              <span class="dimension-section-title cursor-help">Matched Dimensions</span>
-              <OTooltip content="These stable dimensions were used to find related telemetry" />
-            </div>
-            <div class="service-dimensions flex flex-wrap gap-[6px]">
-              <ODimensionChip
-                v-for="(value, key) in correlationResult.correlationData.matched_dimensions"
-                :key="`matched-${key}`"
-                :dim-key="String(key)"
-                :value="value"
-              />
-            </div>
-          </div>
-
-          <!-- Additional Dimensions (available for filtering) -->
-          <div
-            v-if="correlationResult.correlationData?.additional_dimensions &&
-                  Object.keys(correlationResult.correlationData.additional_dimensions).length > 0"
-            class="dimension-section flex flex-col gap-[6px]"
-          >
-            <div class="dimension-section-header flex items-center gap-[6px] text-[11px] font-semibold uppercase text-[var(--q-text-secondary)] [letter-spacing:0.5px]">
-              <OIcon name="tune" size="xs" />
-              <span class="dimension-section-title cursor-help">Additional Filters Available</span>
-              <OTooltip content="These additional dimensions can be used for more specific filtering" />
-            </div>
-            <div class="service-dimensions flex flex-wrap gap-[6px]">
-              <ODimensionChip
-                v-for="(value, key) in correlationResult.correlationData.additional_dimensions"
-                :key="`additional-${key}`"
-                :dim-key="String(key)"
-                :value="value"
-              />
-            </div>
-          </div>
-
-          <!-- Fallback: show all dimensions if correlationData not available -->
-          <div
-            v-if="!correlationResult.correlationData"
-            class="service-dimensions flex flex-wrap gap-[6px]"
-          >
-            <ODimensionChip
-                v-for="(value, key) in correlationResult.service.dimensions"
-                :key="key"
-                :dim-key="String(key)"
-                :value="value"
-              />
-          </div>
-        </div>
-
-        <OSeparator />
-
-        <!-- Correlation Queries -->
-        <div class="correlation-queries flex flex-col gap-4">
-          <!-- Traces -->
-          <div
-            v-if="traceQueries.length > 0"
-            class="query-section flex flex-col gap-2"
-          >
-            <div class="section-header flex items-center gap-[6px] font-semibold text-[13px]">
-              <OIcon name="timeline" size="sm" />
-              <span class="section-title">Traces ({{ traceQueries.length }})</span>
-            </div>
-            <div class="query-items flex flex-col gap-[6px] pl-6">
-              <div
-                v-for="(query, idx) in traceQueries"
-                :key="`trace-${idx}`"
-                class="query-item flex items-center justify-between py-2 px-3 bg-[var(--q-item-bg)] rounded border border-[var(--q-border-color)]"
-              >
-                <div class="query-stream text-xs [font-family:monospace] text-[var(--q-text-secondary)]">{{ query.stream }}</div>
-                <OButton
-                  variant="outline"
-                  size="sm"
-                  @click="navigateToQuery(query, 'traces')"
-                >View</OButton>
-              </div>
-            </div>
-          </div>
-
-          <!-- Metrics -->
-          <div
-            v-if="metricQueries.length > 0"
-            class="query-section flex flex-col gap-2"
-          >
-            <div class="section-header flex items-center gap-[6px] font-semibold text-[13px]">
-              <OIcon name="show-chart" size="sm" />
-              <span class="section-title">Metrics ({{ metricQueries.length }})</span>
-            </div>
-            <div class="query-items flex flex-col gap-[6px] pl-6">
-              <div
-                v-for="(query, idx) in metricQueries"
-                :key="`metric-${idx}`"
-                class="query-item flex items-center justify-between py-2 px-3 bg-[var(--q-item-bg)] rounded border border-[var(--q-border-color)]"
-              >
-                <div class="query-stream text-xs [font-family:monospace] text-[var(--q-text-secondary)]">{{ query.stream }}</div>
-                <OButton
-                  variant="outline"
-                  size="sm"
-                  @click="navigateToQuery(query, 'metrics')"
-                >View</OButton>
-              </div>
-            </div>
-          </div>
-
-          <!-- Logs -->
-          <div
-            v-if="logQueries.length > 0"
-            class="query-section flex flex-col gap-2"
-          >
-            <div class="section-header flex items-center gap-[6px] font-semibold text-[13px]">
-              <OIcon name="article" size="sm" />
-              <span class="section-title">Logs ({{ logQueries.length }})</span>
-            </div>
-            <div class="query-items flex flex-col gap-[6px] pl-6">
-              <div
-                v-for="(query, idx) in logQueries"
-                :key="`log-${idx}`"
-                class="query-item flex items-center justify-between py-2 px-3 bg-[var(--q-item-bg)] rounded border border-[var(--q-border-color)]"
-              >
-                <div class="query-stream text-xs [font-family:monospace] text-[var(--q-text-secondary)]">{{ query.stream }}</div>
-                <OButton
-                  variant="outline"
-                  size="sm"
-                  @click="navigateToQuery(query, 'logs')"
-                >View</OButton>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, watch, ref } from "vue";
-import { useRouter } from "vue-router";
-import { useStore } from "vuex";
-import ODimensionChip from "@/lib/core/Badge/ODimensionChip.vue";
-import { useServiceCorrelation } from "@/composables/useServiceCorrelation";
-import type { TelemetryContext, CorrelationQuery } from "@/utils/telemetryCorrelation";
-import type { CorrelationResult } from "@/utils/telemetryCorrelation";
-import OButton from "@/lib/core/Button/OButton.vue";
-import OIcon from "@/lib/core/Icon/OIcon.vue";
-import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
-import OSpinner from "@/lib/feedback/Spinner/OSpinner.vue";
-import OSeparator from '@/lib/core/Separator/OSeparator.vue';
-
-interface Props {
-  show: boolean;
-  context: TelemetryContext | null;
-  sourceType: "logs" | "traces" | "metrics";
-  timeWindowMinutes?: number;
-  currentStream?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  timeWindowMinutes: 5,
-  currentStream: undefined,
-});
-
-const emit = defineEmits<{
-  close: [];
-}>();
-
-const router = useRouter();
-const store = useStore();
-const { findRelatedTelemetry, error: correlationError, isLoadingServices } = useServiceCorrelation();
-
-const loading = ref(false);
-const correlationResult = ref<CorrelationResult | null>(null);
-const error = computed(() => correlationError.value);
-
-// Computed query groups
-const traceQueries = computed(() =>
-  correlationResult.value?.queries.filter((q) => q.type === "traces") || []
-);
-const metricQueries = computed(() =>
-  correlationResult.value?.queries.filter((q) => q.type === "metrics") || []
-);
-const logQueries = computed(() =>
-  correlationResult.value?.queries.filter((q) => q.type === "logs") || []
-);
-
-// Watch for context changes and trigger correlation
-watch(
-  () => [props.show, props.context],
-  async ([show, context]) => {
-    if (!show || !context) {
-      correlationResult.value = null;
-      return;
-    }
-
-    loading.value = true;
-    try {
-      const result = await findRelatedTelemetry(
-        context,
-        props.sourceType,
-        props.timeWindowMinutes,
-        props.currentStream
-      );
-      correlationResult.value = result;
-    } finally {
-      loading.value = false;
-    }
-  },
-  { immediate: true }
-);
-
-/**
- * Navigate to the appropriate view with the correlation query
- */
-function navigateToQuery(query: CorrelationQuery, type: "logs" | "traces" | "metrics") {
-  const org = store.state.selectedOrganization.identifier;
-
-  // Build route based on type
-  let routeName = "";
-  if (type === "logs") {
-    routeName = "logs";
-  } else if (type === "traces") {
-    routeName = "traces";
-  } else if (type === "metrics") {
-    routeName = "metrics";
-  }
-
-  // Navigate with query parameters
-  router.push({
-    name: routeName,
-    query: {
-      org,
-      stream: query.stream,
-      sql_mode: "true",
-      query: btoa(query.sql), // Base64 encode the SQL
-      from: query.timeRange.start.toString(),
-      to: query.timeRange.end.toString(),
-    },
-  });
-
-  // Close the panel after navigation
-  emit("close");
-}
-</script>
-
-<style>
-.query-section .query-item:hover {
-  background: var(--q-item-hover-bg);
-}
-</style>
diff --git a/web/src/components/TenstackTable.spec.ts b/web/src/components/TenstackTable.spec.ts
index 0f3e065cbc..16c8b7cc94 100644
--- a/web/src/components/TenstackTable.spec.ts
+++ b/web/src/components/TenstackTable.spec.ts
@@ -693,7 +693,7 @@ describe("TenstackTable", () => {
       // column separator): a child element painted with the border token.
       const line = resizer.find("div");
       expect(line.exists()).toBe(true);
-      expect(line.classes()).toContain("bg-[var(--color-border-default)]");
+      expect(line.classes()).toContain("bg-border-default");
     });
 
     it("should not carry a transparent background class on the resizer", () => {
@@ -707,7 +707,7 @@ describe("TenstackTable", () => {
       wrapper = mountTable();
       const resizer = wrapper.find(".resizer");
       expect(resizer.exists()).toBe(true);
-      expect(resizer.classes()).not.toContain("hover:bg-[var(--o2-border-color)]");
+      expect(resizer.classes()).not.toContain("hover:bg-card-glass-border");
     });
   });
 
diff --git a/web/src/components/TenstackTable.vue b/web/src/components/TenstackTable.vue
index 4896c03058..bff41a158c 100644
--- a/web/src/components/TenstackTable.vue
+++ b/web/src/components/TenstackTable.vue
@@ -17,22 +17,27 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <!-- Outer wrapper: full panel height, flex-column so pagination sits below the scroll area -->
   <div
-    class="my-sticky-virtscroll-table h-full flex flex-col rounded-none! overflow-hidden"
+    class="my-sticky-virtscroll-table h-full flex flex-col rounded-none!"
     :data-sticky-id="tableId"
-    :class="{ 'pivot-sticky-totals': stickyRowTotals, 'wrap-enabled': wrap }"
+    :class="[
+      props.scrollEl ? 'overflow-visible' : 'overflow-hidden',
+      { 'pivot-sticky-totals': stickyRowTotals, 'wrap-enabled': wrap },
+    ]"
     :style="store.state.printMode ? { position: 'static' } : {}"
   >
     <!-- Scroll container: grows to fill available height -->
     <div
       ref="parentRef"
       :class="[
-        'o2-scroll-container',
-        'table-container',
-        'flex-1',
-        'min-h-0',
-        'overflow-auto',
-        'relative',
-        { 'virtual-scroll-active': useVirtualScroll },
+        // When a parent scroll container is delegated via `scrollEl`, this
+        // wrapper must NOT create its own vertical scroll (that produced a
+        // second, nested scrollbar). It only keeps horizontal overflow so wide
+        // tables can still scroll sideways; the delegated element owns vertical
+        // scroll + virtualization. Without `scrollEl` it stays the scroller.
+        props.scrollEl
+          ? 'overflow-visible relative'
+          : 'o2-scroll-container overflow-auto rounded-default table-container flex-1 min-h-0 relative',
+        { 'virtual-scroll-active will-change-scroll': useVirtualScroll },
       ]"
     >
       <table
@@ -68,7 +73,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <tr
             v-for="(level, levelIdx) in pivotHeaderLevels as any[]"
             :key="'hl_' + levelIdx"
-            style="max-height: 28px; height: 28px"
+            class="max-h-7 h-7"
           >
             <!-- Row-field headers: first <tr> only, rowspan all levels -->
             <th
@@ -76,7 +81,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               v-for="col in pivotRowColumns"
               :key="'rh_' + col.name"
               :rowspan="pivotHeaderLevels.length"
-              class="cursor-pointer px-2 text-center font-semibold align-middle whitespace-nowrap py-[5px] [border-right:1px_solid_var(--o2-pivot-header-border)] [border-bottom:1px_solid_var(--o2-pivot-header-border)] bg-(--o2-sticky-col-header-bg)"
+              class="cursor-pointer px-2 text-center font-semibold align-middle whitespace-nowrap py-[0.3125rem] [border-right:1px_solid_var(--color-pivot-header-border)] [border-bottom:1px_solid_var(--color-pivot-header-border)] bg-sticky-col-header-bg"
               :style="getStickyColumnStyle(col) as any"
               @click="handlePivotSort(col.name)"
             >
@@ -88,7 +93,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 size="xs"
                 class="ml-1 pivot-sort-icon"
                 :class="{
-                  'pivot-sort-active text-[var(--o2-primary-color)]': pivotSortState.sortBy === col.name,
+                  'pivot-sort-active text-accent': pivotSortState.sortBy === col.name,
                 }"
               />
             </th>
@@ -103,8 +108,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               class="px-2"
               :class="[
                 level.isLeaf
-                  ? 'text-center font-medium text-[0.85em] align-middle py-[5px] [border-right:1px_solid_var(--o2-pivot-header-border)] [border-bottom:1px_solid_var(--o2-pivot-header-border)] bg-(--o2-sticky-col-header-bg)'
-                  : 'text-center font-semibold align-middle whitespace-nowrap py-[5px] [border-right:1px_solid_var(--o2-pivot-header-border)] [border-bottom:1px_solid_var(--o2-pivot-header-border)] bg-(--o2-sticky-col-header-bg)',
+                  ? 'text-center font-medium text-[0.85em] align-middle py-[0.3125rem] [border-right:1px_solid_var(--color-pivot-header-border)] [border-bottom:1px_solid_var(--color-pivot-header-border)] bg-sticky-col-header-bg'
+                  : 'text-center font-semibold align-middle whitespace-nowrap py-[0.3125rem] [border-right:1px_solid_var(--color-pivot-header-border)] [border-bottom:1px_solid_var(--color-pivot-header-border)] bg-sticky-col-header-bg',
                 {
                   'pivot-section-border':
                     cell.hasBorder && !(stickyColTotals && cell._isTotalHeader),
@@ -128,7 +133,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 size="xs"
                 class="ml-1 pivot-sort-icon"
                 :class="{
-                  'pivot-sort-active text-[var(--o2-primary-color)]':
+                  'pivot-sort-active text-accent':
                     pivotSortState.sortBy === cell._sortColumn,
                 }"
               />
@@ -139,8 +144,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- ── Standard TanStack headers (logs / non-pivot) ─────────────────── -->
         <thead
           v-else
-          class="sticky top-0 z-10"
-          style="max-height: 44px; height: 22px"
+          class="sticky top-0 z-10 max-h-11 h-5.5"
           v-for="headerGroup in table.getHeaderGroups()"
           :key="headerGroup.id"
         >
@@ -162,7 +166,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               // Header-row chrome via centralized token utilities (same tokens
               // OTable uses): background band + full-width underline on the row
               // so it spans past the last column.
-              'bg-[var(--color-table-header-bg)] border-b border-[var(--color-grey-300)]',
+              'bg-table-header-bg border-b border-table-header-border',
             ]"
             :style="{
               width:
@@ -229,16 +233,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       header.getResizeHandler()?.($event)
                   "
                   :class="[
-                    'absolute right-0 top-0 h-full w-2 flex items-center justify-end select-none touch-none z-10 group/resizer',
-                    header.column.getCanResize() ? 'resizer cursor-col-resize' : '',
+                    'absolute right-0 top-0 h-full flex items-center justify-end select-none touch-none z-10 group/resizer',
+                    header.column.getCanResize() ? 'resizer w-1.25 cursor-col-resize' : 'w-2',
                   ]"
                 >
                   <div
                     :class="[
                       'rounded-full transition-all duration-150',
                       header.column.getIsResizing()
-                        ? 'w-0.5 h-full bg-[var(--color-table-resize-handle)]'
-                        : 'w-px h-4 bg-[var(--color-border-default)] group-hover/resizer:w-0.5 group-hover/resizer:h-full group-hover/resizer:bg-[var(--color-table-resize-handle)]',
+                        ? 'w-0.5 h-full bg-table-resize-handle'
+                        : 'w-px h-4 bg-border-default group-hover/resizer:w-0.5 group-hover/resizer:h-full group-hover/resizer:bg-[var(--color-table-resize-handle)]',
                     ]"
                   />
                 </div>
@@ -253,7 +257,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       header.column.getToggleSortingHandler(),
                     )
                   "
-                  class="overflow-hidden whitespace-nowrap text-ellipsis! text-[var(--color-table-header-text)] text-xs font-medium capitalize"
+                  class="overflow-hidden whitespace-nowrap text-ellipsis! text-table-header-text text-xs font-medium"
                 >
                   <FlexRender
                     :render="header.column.columnDef.header"
@@ -278,7 +282,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       data-test-sort-state="active"
                       :data-test-sort-direction="sortOrder"
                       size="sm"
-                      class="text-[var(--o2-primary-color)]"
+                      class="text-table-sort-icon-active"
                     />
                     <OIcon
                       v-else
@@ -313,22 +317,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         <OIcon
                           name="filter-list"
                           size="sm"
-                          :class="isColFiltered(header.column.id) ? 'text-[var(--color-primary-600)]' : 'opacity-50'"
+                          :data-test="`o2-table-column-filter-icon-${header.column.id}-${isColFiltered(header.column.id) ? 'active' : 'inactive'}`"
+                          :class="isColFiltered(header.column.id) ? 'text-primary-600' : 'opacity-50'"
                         />
                       </OButton>
                     </template>
 
                     <!-- Filter panel -->
                     <div
-                      class="py-1"
-                      style="min-width: 200px; max-width: 300px"
+                      class="py-1 min-w-50 max-w-75"
                       :data-test="`o2-table-column-filter-panel-${header.column.id}`"
                       @click.stop
                     >
                       <!-- Search box — always visible at top -->
                       <div
-                        class="px-2 pb-1"
-                        style="border-bottom: 1px solid var(--color-table-row-divider)"
+                        class="px-2 pb-1 border-b border-table-row-divider"
                       >
                         <OInput
                           v-model="colFilterSearch[header.column.id]"
@@ -348,12 +351,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       <ul
                         role="listbox"
                         aria-multiselectable="true"
-                        style="max-height: 240px; overflow-y: auto"
+                        class="max-h-60 overflow-y-auto"
                       >
                         <li
                           v-for="rawVal in getFilteredUniqueValues(header.column.id)"
                           :key="String(rawVal)"
-                          class="flex items-center gap-2 px-3 py-1.5 cursor-pointer rounded hover:bg-[var(--color-surface-panel)] transition-colors"
+                          class="flex items-center gap-2 px-3 py-1.5 cursor-pointer rounded-default hover:bg-surface-panel transition-colors"
                           @click.stop="toggleColFilterValue(header.column.id, rawVal)"
                         >
                           <OCheckbox
@@ -375,9 +378,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       </ul>
 
                       <!-- Clear filter — always visible at bottom -->
-                      <div style="border-top: 1px solid var(--color-table-row-divider)">
+                      <div class="border-t border-table-row-divider">
                         <div
-                          class="px-3 py-1.5 text-xs cursor-pointer opacity-70 hover:bg-[var(--color-surface-panel)]"
+                          class="px-3 py-1.5 text-xs cursor-pointer opacity-70 hover:bg-surface-panel"
                           @click.stop="clearColFilter(header.column.id)"
                         >
                           {{ t("common.clearFilter") }}
@@ -389,9 +392,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <div
                   :data-test="`o2-table-add-data-from-column-${header.column.columnDef.header}`"
                   class="invisible items-center absolute right-2 top-0 px-2 column-actions h-full flex"
-                  :class="
-                    store.state.theme === 'dark' ? 'field_overlay_dark' : ''
-                  "
                   v-if="
                     (header.column.columnDef.meta as any)?.closable ||
                     (header.column.columnDef.meta as any)?.showWrap
@@ -401,12 +401,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     v-if="(header.column.columnDef.meta as any).closable"
                     :data-test="`o2-table-th-remove-${header.column.columnDef.header}-btn`"
                     name="cancel"
-                    class="m-0 close-icon cursor-pointer"
-                    :class="
-                      store.state.theme === 'dark'
-                        ? 'text-white'
-                        : 'text-gray-400'
-                    "
+                    class="m-0 close-icon cursor-pointer text-icon-color"
                     :title="t('common.close')"
                     size="sm"
                     @click="closeColumn(header.column.columnDef)"
@@ -425,7 +420,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           >
             <td
               :colspan="columnOrder.length"
-              class="font-bold bg-[var(--color-table-header-bg)] opacity-70"
+              class="font-bold bg-table-header-bg opacity-70"
             >
               <slot name="loading" />
             </td>
@@ -439,10 +434,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <tr v-if="!loading && errMsg != ''" class="w-full">
             <td
               :colspan="columnOrder.length"
-              class="font-bold"
-              style="opacity: 0.7"
+              class="font-bold opacity-70"
             >
-              <div class="text-sm font-medium text-weight-bold bg-amber-500">
+              <div class="text-sm font-medium font-bold bg-warning">
                 <OIcon size="sm" name="warning" class="mr-1" />
                 {{ errMsg }}
               </div>
@@ -451,16 +445,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <tr data-test="o2-table-function-error" v-if="functionErrorMsg != ''">
             <td
               :colspan="columnOrder.length"
-              class="font-bold"
-              style="opacity: 0.6"
+              class="font-bold opacity-60"
             >
               <div
-                class="text-sm font-medium text-weight-bold pl-2"
-                :class="
-                  store.state.theme === 'dark'
-                    ? 'bg-yellow-600'
-                    : 'bg-amber-300'
-                "
+                class="text-sm font-medium font-bold pl-2 bg-warning"
               >
                 <OButton
                   variant="ghost"
@@ -485,13 +473,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <tr v-if="functionErrorMsg != '' && isFunctionErrorOpen">
             <td
               :colspan="columnOrder.length"
-              style="opacity: 0.7"
-              class="px-2"
-              :class="
-                store.state.theme === 'dark'
-                  ? 'bg-yellow-600'
-                  : 'bg-amber-300'
-              "
+              class="opacity-70 px-2 bg-warning"
             >
               <pre>{{ functionErrorMsg }}</pre>
             </td>
@@ -511,7 +493,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <tr
             v-for="r in SKEL_ROW_COUNT"
             :key="`skel-${r}`"
-            class="o2-skel-row flex items-center w-full opacity-0 h-[29px] bg-(--o2-log-table-row-bg) border-b border-(--o2-log-table-row-border) [animation:o2-skel-row-in_320ms_ease-out_forwards] motion-reduce:opacity-100 motion-reduce:animate-none"
+            class="o2-skel-row flex items-center w-full opacity-0 h-[1.8125rem] bg-log-table-row-bg border-b border-log-table-row-border [animation:o2-skel-row-in_320ms_ease-out_forwards] motion-reduce:opacity-100 motion-reduce:animate-none"
             :style="{ animationDelay: `${(r - 1) * 40}ms` }"
           >
             <!-- No columns yet (first paint) — full-width shimmer bar -->
@@ -520,7 +502,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               class="w-full px-4 overflow-hidden"
             >
               <span
-                class="o2-skel-pill inline-block h-3 rounded-md"
+                class="o2-skel-pill inline-block h-3 rounded-default"
                 :style="{ width: `${skelCellWidth(r - 1, 0)}%` }"
                 aria-hidden="true"
               />
@@ -535,7 +517,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :style="skelTdStyle(header, c)"
               >
                 <span
-                  class="o2-skel-pill inline-block h-3 rounded-md"
+                  class="o2-skel-pill inline-block h-3 rounded-default"
                   :style="{
                     width:
                       c === 0
@@ -580,8 +562,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :key="row.id"
               :data-index="idx"
               :ref="(node: any) => measureDashboardRow(node)"
-              class="dashboard-data-row cursor-pointer hover:bg-[var(--color-table-row-hover-bg)]"
-              :class="{ 'border-b border-[var(--color-table-row-divider)]': !usesSeparateBorders }"
+              class="dashboard-data-row cursor-pointer hover:bg-table-row-hover-bg"
+              :class="{ 'border-b border-table-row-divider': !usesSeparateBorders }"
               data-test="dashboard-data-row"
               tabindex="0"
               @click="handleDataRowClick(row.original, idx as number, $event)"
@@ -667,7 +649,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       <OButton
                         variant="ghost"
                         size="icon-xs-sq"
-                        class="h-[16px]! w-[16px]! min-h-0!"
+                        class="h-4! w-4! min-h-0!"
                         @click.stop="
                           copyCellContent(
                             getCellDisplayValue(cell),
@@ -721,7 +703,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       <OButton
                         variant="ghost"
                         size="icon-xs-sq"
-                        class="h-[16px]! w-[16px]! min-h-0!"
+                        class="h-4! w-4! min-h-0!"
                         @click.stop="
                           copyCellContent(
                             getCellDisplayValue(cell),
@@ -781,7 +763,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 formattedRows?.[virtualRow.index]?.original?.isExpandedRow
               "
               :ref="(node: any) => node && rowVirtualizer.measureElement(node)"
-              class="absolute flex w-max items-center justify-start border-b border-b-[var(--color-table-row-divider)] cursor-pointer hover:bg-[var(--color-table-row-hover-bg)] transition-colors duration-150 ease-in-out"
+              class="absolute flex w-max items-center justify-start border-b border-b-table-row-divider cursor-pointer hover:bg-table-row-hover-bg transition-colors duration-150 ease-in-out"
               :class="[
                 defaultColumns &&
                 !wrap &&
@@ -794,7 +776,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 ] === highlightTimestamp &&
                 !(formattedRows[virtualRow.index]?.original as any)
                   ?.isExpandedRow
-                  ? 'bg-(--color-table-row-selected-bg)'
+                  ? 'bg-table-row-selected-bg'
                   : '',
                 !(formattedRows[virtualRow.index]?.original as any)
                   ?.isExpandedRow
@@ -976,7 +958,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                           <OButton
                             variant="ghost"
                             size="icon-xs-sq"
-                            class="h-[16px]! w-[16px]! min-h-0!"
+                            class="h-4! w-4! min-h-0!"
                             @click.stop="
                               copyCellContent(
                                 getCellDisplayValue(cell),
@@ -1010,7 +992,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                             ]
                           "
                           :key="`${cell.column.id}_${calculateActualIndex(virtualRow.index)}`"
-                          :class="store.state.theme === 'dark' ? 'dark' : ''"
                           v-html="
                             processedResults[
                               `${cell.column.id}_${calculateActualIndex(virtualRow.index)}`
@@ -1046,7 +1027,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                             cell.column.columnDef.id ===
                               store.state.zoConfig.timestamp_column
                           "
-                          class="absolute right-0 top-1/2 transform invisible -translate-y-1/2 -translate-x-1/2 ai-btn"
+                          class="invisible ai-btn"
                           @send-to-ai-chat="
                             sendToAiChat(
                               JSON.stringify(cell.row.original),
@@ -1069,7 +1050,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                           <OButton
                             variant="ghost"
                             size="icon-xs-sq"
-                            class="h-[16px]! w-[16px]! min-h-0!"
+                            class="h-4! w-4! min-h-0!"
                             @click.stop="
                               copyCellContent(
                                 getCellDisplayValue(cell),
@@ -1117,7 +1098,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <td
               v-for="col in (columns as any[]) || []"
               :key="'ft_' + col.name"
-              class="px-2 bg-[#f5f5f5] sticky bottom-0"
+              class="px-2 bg-surface-subtle sticky bottom-0"
               :class="[
                 col.align === 'right'
                   ? 'text-right'
@@ -1401,6 +1382,19 @@ const props = defineProps({
     type: Number,
     default: TABLE_ROWS_PER_PAGE_DEFAULT_VALUE,
   },
+  /** Parent element that owns vertical scroll + virtualization. When set, this
+   *  component does not create its own vertical scrollbar — it delegates to this
+   *  element so content above the table (e.g. charts) scrolls as one region. */
+  scrollEl: {
+    type: Object as PropType<HTMLElement | null>,
+    default: null,
+  },
+  /** Pixels of content above the virtual list inside the delegated `scrollEl`
+   *  (e.g. a histogram). Offsets the virtualizer so row positions stay correct. */
+  scrollMargin: {
+    type: Number,
+    default: 0,
+  },
 });
 
 const { t } = useI18n();
@@ -1754,7 +1748,7 @@ const getStickyTotalHeaderForPivot = (cell: any) => {
     "min-width": `${width}px`,
     "max-width": `${width}px`,
     // Opaque background so scrolled body content doesn't bleed through
-    "background-color": "var(--o2-sticky-col-header-bg)",
+    "background-color": "var(--color-sticky-col-header-bg)",
     "box-shadow": "-4px 0 8px rgba(0, 0, 0, 0.15)",
     "white-space": "normal",
     "word-break": "break-word",
@@ -2048,7 +2042,7 @@ watch(
     tableCellClass.value = [
       hasDefaultSourceColumn.value && !props.wrap
         ? "table-cell"
-        : "block height-stretch",
+        : "block self-stretch",
       !props.wrap
         ? "overflow-hidden text-ellipsis whitespace-nowrap"
         : "",
@@ -2204,7 +2198,12 @@ const rowVirtualizerOptions = computed(() => {
   const isNonLogs = !props.useVirtualScroll;
   return {
     count: rowCount.value,
-    getScrollElement: () => parentRef.value,
+    // Delegate to a parent scroll container when provided (unified scroll with
+    // content above the table, e.g. the traces RED-metrics charts); otherwise
+    // this component's own wrapper is the scroller.
+    getScrollElement: () =>
+      (props.scrollEl as HTMLElement | null) ?? parentRef.value,
+    scrollMargin: props.scrollMargin,
     estimateSize: (index: number) => {
       // Dashboard virtual scroll: always use 28px regardless of rowHeight prop.
       // The rowHeight prop (default 22) is the *cell content* height and does not
@@ -2577,31 +2576,10 @@ defineExpose({
   getRows: () => table?.getRowModel().rows.map((r: any) => r.original) ?? [],
 });
 </script>
-<style>
-@import "@/assets/styles/log-highlighting.css";
-</style>
-<style>
-@keyframes o2-skel-shimmer {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}
-
-@keyframes o2-skel-row-in {
-  from {
-    opacity: 0;
-    transform: translateY(2px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* ── Loading skeleton pill (uses OTable skeleton tokens from lib/styles/tokens) ── */
+<style scoped>
+/* keep(keyframes) — the shimmer gradient + animation pair is kept as CSS so the
+   skeleton pill stays a single class the template can reuse; it is token-backed
+   via the OTable skeleton tokens in lib/styles/tokens. */
 .o2-skel-pill {
   background: linear-gradient(
     90deg,
@@ -2613,8 +2591,9 @@ defineExpose({
   animation: o2-skel-shimmer 1.5s ease-in-out infinite;
 }
 
+/* The row half is expressed in the template via motion-reduce:* utilities; the
+   pill needs the CSS form because the scoped rule above outranks a utility. */
 @media (prefers-reduced-motion: reduce) {
-  .o2-skel-row  { opacity: 1; animation: none; }
   .o2-skel-pill { animation: none; }
 }
 </style>
diff --git a/web/src/components/ThemeSwitcher.vue b/web/src/components/ThemeSwitcher.vue
index c4149726a8..0f1e7849f5 100644
--- a/web/src/components/ThemeSwitcher.vue
+++ b/web/src/components/ThemeSwitcher.vue
@@ -15,8 +15,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <OButton variant="ghost" size="icon-panel" data-test="navbar-theme-toggle-btn" @click="toggleDarkMode">
-    <OIcon :name="darkMode ? 'dark-mode' : 'light-mode'" size="sm" class="size-5!" />
+  <OButton variant="ghost" size="icon-toolbar" data-test="navbar-theme-toggle-btn" @click="toggleDarkMode">
+    <Transition name="theme-icon" mode="out-in">
+      <OIcon :key="darkMode ? 'dark' : 'light'" :name="darkMode ? 'dark-mode' : 'light-mode'" size="sm" class="size-5!" />
+    </Transition>
     <OTooltip side="top" align="center" :content="tooltipText" />
   </OButton>
 </template>
@@ -28,6 +30,7 @@ import { useI18n } from "vue-i18n";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import OButton from "@/lib/core/Button/OButton.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
+import { switchThemeMode } from "@/utils/theme";
 
 export default defineComponent({
   components: { OButton, OIcon, OTooltip },
@@ -82,9 +85,16 @@ export default defineComponent({
         // Handle localStorage not available
         console.warn("localStorage not available for theme storage:", error);
       }
-      // Toggle .dark on <html> for the O2 component library (Tailwind dark variant)
-      document.documentElement.classList.toggle('dark', theme === 'dark');
-      store.dispatch("appTheme", theme);
+      // Toggle .dark on <html> for the O2 component library (Tailwind dark variant).
+      // Wrapped in switchThemeMode so the mode flip animates as one frame
+      // (soft curtain sweep, defined in styles/tailwind.css).
+      // `darkMode` is the component's source of truth and is always set to
+      // match `theme` before setTheme runs, so the html-class toggle reads it
+      // directly rather than re-deriving the boolean from the string arg.
+      switchThemeMode(theme, () => {
+        document.documentElement.classList.toggle('dark', darkMode.value);
+        store.dispatch("appTheme", theme);
+      });
     };
 
     const toggleDarkMode = () => {
diff --git a/web/src/components/WebinarBanner.vue b/web/src/components/WebinarBanner.vue
index 946f2206fe..b931ee244a 100644
--- a/web/src/components/WebinarBanner.vue
+++ b/web/src/components/WebinarBanner.vue
@@ -1,4 +1,4 @@
-<!-- Copyright 2026 OpenObserve Inc.
+<!-- Copyright 2026 OpenObserve Inc.
 
 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU Affero General Public License as published by
@@ -18,12 +18,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <!-- Header variant: w-full top bar above the toolbar -->
   <div
     v-if="webinarData && !isExpired && !isDismissed && variant === 'header'"
-    class="webinar-top-bar w-full bg-amber-400 text-[#1a1a1a]"
+    class="webinar-top-bar w-full bg-promo-webinar-accent text-promo-webinar-text"
     data-test="webinar-header-banner"
     role="banner"
   >
     <div class="webinar-top-bar-content flex items-center justify-center gap-2 py-[0.2rem] px-4 flex-wrap relative">
-      <span class="webinar-top-bar-text text-[0.8125rem] font-bold text-[#1a1a1a] text-center">
+      <span class="webinar-top-bar-text text-compact font-bold text-promo-webinar-text text-center">
         <strong>{{ webinarData.tag }}:</strong> {{ webinarData.title }}
         <span v-if="webinarData.date" class="webinar-top-bar-date font-medium">
           {{ formattedDate }}
@@ -35,13 +35,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :href="webinarData.primaryButton.link"
         target="_blank"
         rel="noopener noreferrer"
-        class="webinar-top-bar-link text-[0.8125rem] font-bold text-[#1e3a8a] underline whitespace-nowrap hover:text-[#1e40af]"
+        class="webinar-top-bar-link text-compact font-bold text-promo-webinar-link underline whitespace-nowrap hover:text-promo-webinar-link-hover"
         data-test="webinar-top-bar-register-link"
       >
         {{ webinarData.primaryButton.text }}
       </a>
 
-      <span class="webinar-top-bar-sep text-[#374151] font-normal opacity-60 select-none" aria-hidden="true">|</span>
+      <span class="webinar-top-bar-sep text-promo-webinar-sep font-normal opacity-60 select-none" aria-hidden="true">|</span>
 
       <OButton
         variant="webinar-dismiss"
@@ -57,25 +57,25 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <!-- Home variant: larger banner -->
   <div
     v-else-if="webinarData && !isExpired && variant === 'home'"
-    class="webinar-home-banner mb-3 relative overflow-hidden rounded-[0.625rem] border border-[color-mix(in_srgb,var(--q-secondary)_35%,transparent)] bg-[linear-gradient(120deg,color-mix(in_srgb,var(--q-secondary)_14%,var(--o2-primary-background))_0%,var(--o2-primary-background)_55%,color-mix(in_srgb,var(--q-secondary)_7%,var(--o2-primary-background))_100%)]"
+    class="webinar-home-banner mb-3 relative overflow-hidden rounded-default border border-[color-mix(in_srgb,var(--color-promo-webinar-accent)_35%,transparent)] bg-[linear-gradient(120deg,color-mix(in_srgb,var(--color-promo-webinar-accent)_14%,var(--color-surface-base))_0%,var(--color-surface-base)_55%,color-mix(in_srgb,var(--color-promo-webinar-accent)_7%,var(--color-surface-base))_100%)]"
     data-test="webinar-home-banner"
   >
     <!-- Decorative blobs -->
-    <div class="absolute rounded-full pointer-events-none opacity-[0.18] bg-(--q-secondary) blur-[2.5rem] w-[10rem] h-[10rem] top-[-3rem] left-[-2rem]" aria-hidden="true" />
-    <div class="absolute rounded-full pointer-events-none opacity-[0.18] bg-(--q-secondary) blur-[2.5rem] w-[8rem] h-[8rem] bottom-[-2.5rem] right-[6rem]" aria-hidden="true" />
+    <div class="absolute rounded-full pointer-events-none opacity-[0.18] bg-promo-webinar-accent blur-[2.5rem] w-40 h-40 top-[-3rem] left-[-2rem]" aria-hidden="true" />
+    <div class="absolute rounded-full pointer-events-none opacity-[0.18] bg-promo-webinar-accent blur-[2.5rem] w-32 h-32 bottom-[-2.5rem] right-24" aria-hidden="true" />
 
     <!-- Content row -->
     <div class="webinar-home-content relative z-[1] flex items-center justify-between flex-wrap gap-3 p-4 pr-[1.375rem]">
       <div class="webinar-home-left flex flex-col gap-[0.3rem]">
         <!-- Live badge -->
-        <div class="webinar-home-badge inline-flex items-center gap-[0.375rem] text-[0.7rem] font-bold uppercase tracking-[0.06em] text-[var(--q-secondary)]">
-          <span class="webinar-home-badge-dot w-[0.5rem] h-[0.5rem] rounded-full bg-(--q-secondary) shrink-0 [animation:badge-pulse_1.8s_ease-in-out_infinite]" />
+        <div class="webinar-home-badge inline-flex items-center gap-1.5 text-2xs font-bold uppercase tracking-[0.06em] text-promo-webinar-accent-text">
+          <span class="webinar-home-badge-dot w-2 h-2 rounded-full bg-promo-webinar-accent shrink-0" />
           {{ webinarData.tag }}
         </div>
 
-        <div class="webinar-home-title text-base font-bold text-[var(--o2-text-primary)] leading-[1.35] max-w-[36rem]">{{ webinarData.title }}</div>
+        <div class="webinar-home-title text-base font-bold text-text-heading leading-[1.35] max-w-[36rem]">{{ webinarData.title }}</div>
 
-        <div v-if="webinarData.date" class="webinar-home-meta flex items-center gap-[0.3rem] text-[0.8125rem] leading-none text-[var(--o2-text-secondary)]">
+        <div v-if="webinarData.date" class="webinar-home-meta flex items-center gap-[0.3rem] text-compact leading-none text-text-secondary">
           <OIcon name="schedule" size="xs" />
           <span class="[line-height:1]">{{ formattedDate }}</span>
         </div>
@@ -179,17 +179,24 @@ onMounted(async () => {
 });
 </script>
 
-<style>
+<style scoped>
+/* keep(keyframes): the "live" badge dot pulse is used only by this banner. The
+   `animation` is declared here, not as a template `[animation:…]` utility, so
+   Vue's scoped compiler renames the keyframe and this reference together. */
+.webinar-home-badge-dot {
+  animation: badge-pulse 1.8s ease-in-out infinite;
+}
+
 @keyframes badge-pulse {
   0%,
   100% {
     transform: scale(1);
     opacity: 1;
   }
-
   50% {
     transform: scale(1.5);
     opacity: 0.5;
   }
 }
 </style>
+
diff --git a/web/src/components/about/FeatureComparisonTable.vue b/web/src/components/about/FeatureComparisonTable.vue
index c4f13eeb2f..f1c59fa1d3 100644
--- a/web/src/components/about/FeatureComparisonTable.vue
+++ b/web/src/components/about/FeatureComparisonTable.vue
@@ -19,12 +19,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     <!-- ── Header ──────────────────────────────────────────────────────── -->
     <div class="flex items-start gap-3 mb-2">
-      <div data-test="feature-comparison-table-icon-wrapper" class="w-12 h-12 rounded-lg flex items-center justify-center shrink-0 bg-[color-mix(in_srgb,var(--o2-primary-color)_12%,var(--o2-card-bg))] text-(--o2-primary-color)">
+      <div data-test="feature-comparison-table-icon-wrapper" class="w-12 h-12 rounded-default flex items-center justify-center shrink-0 bg-[color-mix(in_srgb,var(--color-accent)_12%,var(--color-card-glass-bg))] text-accent">
         <OIcon name="compare-arrows" size="md" />
       </div>
       <div>
-        <div class="text-[length:var(--text-xs)] font-semibold uppercase tracking-[0.1em] text-(--o2-primary-color) m-0 mb-[0.125rem]">EDITIONS</div>
-        <div class="text-[length:var(--text-xl)] font-semibold text-(--color-text-heading) m-0 tracking-[-0.015em]">{{ t("about.feature_comparison_lbl") }}</div>
+        <div class="text-[length:var(--text-xs)] font-semibold uppercase tracking-[0.1em] text-accent m-0 mb-0.5">EDITIONS</div>
+        <div class="text-[length:var(--text-xl)] font-semibold text-text-heading m-0 tracking-[-0.015em]">{{ t("about.feature_comparison_lbl") }}</div>
       </div>
     </div>
     <div class="text-sm font-normal leading-relaxed text-typography-body mt-2">
@@ -40,32 +40,32 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :key="ed.id"
         data-test="feature-comparison-table-edition-card"
         :data-test-active="buildType === ed.id ? 'true' : undefined"
-        class="relative flex flex-col bg-(--o2-card-bg) rounded-xl p-6 max-[1024px]:p-4 border border-(--o2-border-color)"
-        :class="{ 'border-2 border-(--o2-primary-color) pt-7 max-[1024px]:pt-5': buildType === ed.id }"
+        class="relative flex flex-col bg-card-glass-bg rounded-default p-6 max-[1024px]:p-4 border border-card-glass-border"
+        :class="{ 'border-2 border-accent pt-7 max-[1024px]:pt-5': buildType === ed.id }"
       >
         <!-- Your Plan badge (floats above the card top border) -->
-        <div v-if="buildType === ed.id" data-test="feature-comparison-table-your-plan-badge" class="absolute top-[-14px] left-1/2 -translate-x-1/2 inline-flex items-center py-1 px-[0.875rem] rounded-full text-[0.625rem] font-bold uppercase tracking-[0.08em] whitespace-nowrap bg-(--o2-primary-color) text-(--o2-primary-foreground)">
+        <div v-if="buildType === ed.id" data-test="feature-comparison-table-your-plan-badge" class="absolute top-[-14px] left-1/2 -translate-x-1/2 inline-flex items-center py-1 px-3.5 rounded-full text-3xs font-bold uppercase tracking-[0.08em] whitespace-nowrap bg-accent text-button-primary-foreground">
           <OIcon name="arrow-upward" size="sm" class="mr-1" />
           Your Plan
         </div>
 
         <!-- Edition name + hosting + price ────────────────────────────── -->
         <div class="mb-5">
-          <div class="text-base font-bold text-(--o2-text-heading) m-0 mb-[0.125rem]">{{ ed.shortName }}</div>
-          <div class="text-[0.8125rem] text-(--o2-text-muted) m-0 mb-[0.875rem]">{{ ed.hosting }}</div>
-          <div class="text-[1.75rem] font-bold text-(--o2-primary-color) m-0 mb-1 tracking-[-0.03em] leading-[1.1]">{{ ed.price }}</div>
-          <div class="text-[0.8125rem] text-(--o2-text-muted) m-0 leading-[1.4]">{{ ed.priceSub }}</div>
+          <div class="text-base font-bold text-text-heading m-0 mb-0.5">{{ ed.shortName }}</div>
+          <div class="text-compact text-text-muted m-0 mb-3.5">{{ ed.hosting }}</div>
+          <div class="text-3xl font-bold text-accent m-0 mb-1 tracking-[-0.03em] leading-[1.1]">{{ ed.price }}</div>
+          <div class="text-compact text-text-muted m-0 leading-[1.4]">{{ ed.priceSub }}</div>
         </div>
 
         <!-- All Five Pillars chips ────────────────────────────────────── -->
-        <div class="bg-[color-mix(in_srgb,var(--o2-primary-color)_5%,var(--o2-card-bg))] border border-[color-mix(in_srgb,var(--o2-primary-color)_15%,transparent)] rounded-lg p-3 mb-4">
-          <div class="text-[0.5625rem] font-bold uppercase tracking-[0.12em] text-(--o2-text-label) m-0 mb-2">ALL FIVE PILLARS</div>
+        <div class="bg-[color-mix(in_srgb,var(--color-accent)_5%,var(--color-card-glass-bg))] border border-[color-mix(in_srgb,var(--color-accent)_15%,transparent)] rounded-default p-3 mb-4">
+          <div class="text-3xs font-bold uppercase tracking-[0.12em] text-text-label m-0 mb-2">ALL FIVE PILLARS</div>
           <div class="flex flex-wrap gap-1.5 mb-1.5">
-            <span v-for="pillarId in PILLAR_IDS" :key="pillarId" data-test="feature-comparison-table-pillar-chip" class="inline-flex items-center py-[0.1875rem] px-2 rounded text-[0.6875rem] font-medium bg-[color-mix(in_srgb,var(--o2-primary-color)_10%,var(--o2-card-bg))] text-(--o2-primary-color) border border-[color-mix(in_srgb,var(--o2-primary-color)_20%,transparent)] mr-[0.375rem] mb-[0.375rem]">
+            <span v-for="pillarId in PILLAR_IDS" :key="pillarId" data-test="feature-comparison-table-pillar-chip" class="inline-flex items-center py-[0.1875rem] px-2 rounded-default text-2xs font-medium bg-[color-mix(in_srgb,var(--color-accent)_10%,var(--color-card-glass-bg))] text-accent border border-[color-mix(in_srgb,var(--color-accent)_20%,transparent)] mr-1.5 mb-1.5">
               {{ t(`about.feature_${pillarId}`) }}
             </span>
           </div>
-          <span class="inline-flex items-center py-[0.1875rem] px-2 rounded text-[0.6875rem] font-medium bg-[color-mix(in_srgb,var(--o2-primary-color)_10%,var(--o2-card-bg))] text-(--o2-primary-color) border border-[color-mix(in_srgb,var(--o2-primary-color)_20%,transparent)] mr-[0.375rem] mb-[0.375rem]">{{ t('about.feature_dashboards') }}</span>
+          <span class="inline-flex items-center py-[0.1875rem] px-2 rounded-default text-2xs font-medium bg-[color-mix(in_srgb,var(--color-accent)_10%,var(--color-card-glass-bg))] text-accent border border-[color-mix(in_srgb,var(--color-accent)_20%,transparent)] mr-1.5 mb-1.5">{{ t('about.feature_dashboards') }}</span>
         </div>
 
         <!-- Feature list ───────────────────────────────────────────────── -->
@@ -74,16 +74,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             v-for="feature in listFeatures"
             :key="feature.id"
             data-test="feature-comparison-table-feature-item"
-            class="flex items-start gap-2 py-[0.4375rem] text-[0.8125rem] border-b border-(--o2-border-color) last:border-b-0"
+            class="flex items-start gap-2 py-[0.4375rem] text-compact border-b border-card-glass-border last:border-b-0"
             :class="{
-              'text-[var(--o2-text-body)]': getFeatureStatus(feature, ed.id) !== 'unavailable',
-              'text-[var(--o2-text-muted)]': getFeatureStatus(feature, ed.id) === 'unavailable',
+              'text-text-body': getFeatureStatus(feature, ed.id) !== 'unavailable',
+              'text-text-muted': getFeatureStatus(feature, ed.id) === 'unavailable',
             }"
           >
-            <span class="shrink-0 mt-[0.125rem] leading-none"
+            <span class="shrink-0 mt-0.5 leading-none"
               :class="{
-                'text-[var(--o2-positive)]': getFeatureStatus(feature, ed.id) !== 'unavailable',
-                'text-[var(--o2-text-muted)]': getFeatureStatus(feature, ed.id) === 'unavailable',
+                'text-status-positive': getFeatureStatus(feature, ed.id) !== 'unavailable',
+                'text-text-muted': getFeatureStatus(feature, ed.id) === 'unavailable',
               }"
             >
               <OIcon
@@ -99,7 +99,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </span>
             <span class="flex flex-col gap-[0.0625rem]">
               <span class="leading-[1.45]">{{ t(getFeatureNameKey(feature)) }}</span>
-              <span v-if="getFeatureNote(feature, ed.id)" class="text-[0.6875rem] text-(--o2-text-muted) italic">
+              <span v-if="getFeatureNote(feature, ed.id)" class="text-2xs text-text-muted italic">
                 {{ getFeatureNote(feature, ed.id) }}
               </span>
             </span>
@@ -108,15 +108,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
         <!-- Footer: license + support + CTA ──────────────────────────── -->
         <div class="mt-4">
-          <div class="h-px bg-(--o2-border-color) mb-3"></div>
-          <div class="mb-[0.875rem]">
-            <div data-test="feature-comparison-table-footer-row" class="flex justify-between items-baseline text-[0.8125rem] py-[0.125rem]">
-              <span class="text-(--o2-text-muted) font-medium">{{ t('about.feature_license') }}</span>
-              <span class="text-(--o2-text-body) font-semibold">{{ ed.license }}</span>
+          <div class="h-px bg-card-glass-border mb-3"></div>
+          <div class="mb-3.5">
+            <div data-test="feature-comparison-table-footer-row" class="flex justify-between items-baseline text-compact py-0.5">
+              <span class="text-text-muted font-medium">{{ t('about.feature_license') }}</span>
+              <span class="text-text-body font-semibold">{{ ed.license }}</span>
             </div>
-            <div data-test="feature-comparison-table-footer-row" class="flex justify-between items-baseline text-[0.8125rem] py-[0.125rem]">
-              <span class="text-(--o2-text-muted) font-medium">{{ t('about.feature_support') }}</span>
-              <span class="text-(--o2-text-body) font-semibold">{{ ed.support }}</span>
+            <div data-test="feature-comparison-table-footer-row" class="flex justify-between items-baseline text-compact py-0.5">
+              <span class="text-text-muted font-medium">{{ t('about.feature_support') }}</span>
+              <span class="text-text-body font-semibold">{{ ed.support }}</span>
             </div>
           </div>
           <a
@@ -125,11 +125,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             target="_blank"
             data-test="feature-comparison-table-cta-btn"
             data-test-cta="action"
-            class="block w-full py-2 px-4 rounded-md text-sm font-semibold text-center no-underline cursor-pointer transition-all duration-200 border-[1.5px] border-solid bg-[color-mix(in_srgb,var(--o2-primary-color)_10%,var(--o2-card-bg))] text-(--o2-primary-color) border-[color-mix(in_srgb,var(--o2-primary-color)_30%,transparent)] hover:bg-[color-mix(in_srgb,var(--o2-primary-color)_18%,var(--o2-card-bg))] hover:border-(--o2-primary-color)"
+            class="block w-full py-2 px-4 rounded-default text-sm font-semibold text-center no-underline cursor-pointer transition-all duration-200 border-[1.5px] border-solid bg-[color-mix(in_srgb,var(--color-accent)_10%,var(--color-card-glass-bg))] text-accent border-[color-mix(in_srgb,var(--color-accent)_30%,transparent)] hover:bg-[color-mix(in_srgb,var(--color-accent)_18%,var(--color-card-glass-bg))] hover:border-accent"
           >
             {{ ed.ctaLabel }}
           </a>
-          <button v-else data-test="feature-comparison-table-cta-btn" data-test-cta="current" class="block w-full py-2 px-4 rounded-md text-sm font-semibold text-center no-underline cursor-default transition-all duration-200 border-[1.5px] border-solid bg-transparent text-(--o2-text-muted) border-(--o2-border-color)" disabled>
+          <button v-else data-test="feature-comparison-table-cta-btn" data-test-cta="current" class="block w-full py-2 px-4 rounded-default text-sm font-semibold text-center no-underline cursor-default transition-all duration-200 border-[1.5px] border-solid bg-transparent text-text-muted border-card-glass-border" disabled>
             {{ ed.ctaLabel }}
           </button>
         </div>
diff --git a/web/src/components/actionScripts/ActionScripts.spec.ts b/web/src/components/actionScripts/ActionScripts.spec.ts
index dca8df31cd..5ce66ebaba 100644
--- a/web/src/components/actionScripts/ActionScripts.spec.ts
+++ b/web/src/components/actionScripts/ActionScripts.spec.ts
@@ -210,7 +210,7 @@ describe("ActionScripts", () => {
 
   describe("Header section", () => {
     it("should display page title", () => {
-      // Title now lives in the standard AppPageHeader (row 1).
+      // Title now lives in the standard OPageHeader (row 1).
       const title = wrapper.find(".app-page-header h1");
       expect(title.exists()).toBe(true);
     });
diff --git a/web/src/components/actionScripts/ActionScripts.vue b/web/src/components/actionScripts/ActionScripts.vue
index 2780a7509d..59ec7564f8 100644
--- a/web/src/components/actionScripts/ActionScripts.vue
+++ b/web/src/components/actionScripts/ActionScripts.vue
@@ -19,13 +19,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div data-test="action-scripts-list-page" class="h-full">
     <div v-if="!showAddActionScriptDialog" class="h-full">
-      <PageLayout
-        :header-class="'shrink-0 px-4 border-b border-border-default'"
+      <OPageLayout
+        bleed
+        :title="t('actions.header')"
+        icon="code"
+        :subtitle="'Custom automation and scripting'"
       >
         <!-- Row 1: standard header — title + actions only. Search moved into the
              table's own toolbar below. -->
-        <template #header>
-          <AppPageHeader :title="t('actions.header')" icon="code" :subtitle="'Custom automation and scripting'">
             <template #actions>
               <OButton
                 data-test="action-list-add-btn"
@@ -35,8 +36,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 >{{ t("actions.add") }}</OButton
               >
             </template>
-          </AppPageHeader>
-        </template>
         <OTable
           data-test="action-scripts-table"
           :data="visibleRows"
@@ -52,6 +51,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           sorting="client"
           filter-mode="client"
           :default-columns="false"
+          show-index
           :show-global-filter="false"
           :enable-column-resize="true"
           :persist-columns="true"
@@ -119,8 +119,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <div
                 data-test="action-scripts-loading"
                 v-if="alertStateLoadingMap[row.uuid]"
-                style="display: inline-block; width: 33.14px; height: auto"
-                class="flex justify-center items-center ml-1"
+                style="display: inline-block; width: 33.14px"
+                class="flex justify-center items-center ml-1 h-auto"
                 :title="`Turning ${row.enabled ? 'Off' : 'On'}`"
               >
                 <OSpinner size="xs" />
@@ -147,11 +147,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
             <template #bottom>
               <div
-                class="flex items-center justify-between w-full h-[48px]"
+                class="flex items-center justify-between w-full h-12"
               >
                 <div class="flex items-center gap-2">
                   <div
-                    class="o2-table-footer-title flex items-center w-[80px] mr-md"
+                    class="text-xs font-normal flex items-center w-20 mr-md"
                   >
                     {{ resultTotal }} {{ t("actions.header") }}
                   </div>
@@ -169,7 +169,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </div>
             </template>
           </OTable>
-      </PageLayout>
+      </OPageLayout>
     </div>
     <template v-else>
       <div class="w-full">
@@ -256,8 +256,7 @@ import {
   computed,
 } from "vue";
 import type { Ref } from "vue";
-import PageLayout from "@/components/common/PageLayout.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import { useStore } from "vuex";
 import { useRouter } from "vue-router";
 import useStreams from "@/composables/useStreams";
@@ -296,12 +295,11 @@ import OUserCell from "@/lib/core/Table/cells/OUserCell.vue";
 import OTag from "@/lib/core/Badge/OTag.vue";
 import type { OTableColumnDef } from "@/lib/core/Table/OTable.types";
 import { toast } from "@/lib/feedback/Toast/useToast";
-import { TABLE_INDEX_COL_SIZE, COL } from "@/lib/core/Table/OTable.types";
+import { COL } from "@/lib/core/Table/OTable.types";
 import { useShortcuts } from "@/lib/vue-shortcut-manager";
 import { isInputFocused } from "@/utils/keyboardShortcuts";
 
 interface ActionScriptList {
-  "#": string | number;
   id: any;
   name: any;
   uuid: any;
@@ -315,8 +313,7 @@ interface ActionScriptList {
 export default defineComponent({
   name: "AlertList",
   components: {
-    PageLayout,
-    AppPageHeader,
+    OPageLayout,
     OIcon,
     EditScript: defineAsyncComponent(
       () => import("@/components/actionScripts/EditScript.vue"),
@@ -387,13 +384,6 @@ export default defineComponent({
     ]);
 
     const columns: OTableColumnDef[] = [
-      {
-        id: "#",
-        header: "#",
-        accessorKey: "#",
-        size: TABLE_INDEX_COL_SIZE,
-        meta: { align: "center" },
-      },
       {
         id: "name",
         header: t("alerts.name"),
@@ -494,7 +484,6 @@ export default defineComponent({
       loading.value = true;
       getAllActions()
         .then(() => {
-          var counter = 1;
           resultTotal.value = store.state.organizationData.actions.length;
           alerts.value = store.state.organizationData.actions.map(
             (alert: any) => {
@@ -512,7 +501,6 @@ export default defineComponent({
             if (data.execution_details_type === "once")
               data.execution_details_type = "Once";
             return {
-              "#": counter <= 9 ? `0${counter++}` : counter++,
               id: data.id,
               name: data.name,
               uuid: data.uuid,
diff --git a/web/src/components/actionScripts/EditScript.schema.ts b/web/src/components/actionScripts/EditScript.schema.ts
index fcb415e904..94f1a10b6a 100644
--- a/web/src/components/actionScripts/EditScript.schema.ts
+++ b/web/src/components/actionScripts/EditScript.schema.ts
@@ -1,31 +1,12 @@
 // Copyright 2026 OpenObserve Inc.
 //
 // Validation schema for EditScript.vue (Add/Edit Action Script — a multi-step
-// OStepper form with create-vs-edit conditionals). Migrated from the old manual
-// `nameError` / `typeError` / `cronFieldError` / `serviceAccountError` refs +
-// the imperative `validateActionScriptData()` step gates to a single Zod schema
-// on <OForm :schema>.
-//
-// Restores the BEFORE baseline (actionScripts/EditScript.vue, 6 rules), honoring the truthy→Zod
-// inversion (a `!!v` guard becomes a positive constraint = required):
-//   • name             required + isValidResourceName (custom char rule)
-//   • type             required
-//   • service_account  required
-//   • timezone         defaulted to "UTC" (disabled field) — NOT enforced, to
-//                      match pre-migration main, which had no timezone rule.
-//   • codeZip (q-file) required ONLY on create  → superRefine
-//   • frequency.cron   required + cron-format/interval, byte-exact to main's TWO
-//                      validation paths → superRefine:
-//                        · EDIT: execution_details === "repeat" (submit-path gate)
-//                        · CREATE: only once the user has EDITED the cron field
-//                          (main's inline @update handler) + repeat tab live. A
-//                          never-touched blank cron on create still saves — main's
-//                          latent gap, preserved.
+// OStepper form with create-vs-edit conditionals).
 //
 // Built via a factory so the conditionals can branch on live create-vs-edit
 // state and the cron parse/interval check (which needs the store config) without
-// the schema importing the store. Validation TIMING is owned by OForm
-// (submit-then-change via revalidateLogic); this file only describes WHAT is valid.
+// the schema importing the store. Validation TIMING is owned by OForm; this file
+// only describes WHAT is valid.
 
 import { z } from "zod";
 import { isValidResourceName } from "@/utils/zincutils";
@@ -37,21 +18,19 @@ export interface EditScriptSchemaOptions {
   getIsEditing: () => boolean;
   /**
    * Validates a non-empty cron expression, returning an error message (parse
-   * failure or below the minimum refresh interval) or "" when valid. Injected
-   * from the component so the schema stays decoupled from the store / cron-parser.
+   * failure or below the minimum refresh interval) or "" when valid.
    */
   getCronError: (_cron: string) => string;
   /**
-   * Returns the component's `execution_details`. This is main's submit-path cron
-   * gate: cron is validated when it equals "repeat" (the case on EDIT of a saved
-   * repeat action). During CREATE it stays "" the whole time.
+   * Returns the component's `execution_details`. Cron is validated when this
+   * equals "repeat" (the case on EDIT of a saved repeat action); on CREATE it
+   * stays "" throughout.
    */
   getExecutionDetails: () => string;
   /**
    * Returns whether the user has edited the cron field (its form dirty state).
-   * On CREATE, main only validated cron once its inline @update handler had run —
-   * i.e. after an edit — so an untouched blank cron still saves. This reproduces
-   * that gate; it stays false until the user changes the field.
+   * On CREATE cron is validated only once the field has been edited, so an
+   * untouched blank cron still saves.
    */
   getCronEdited: () => boolean;
 }
@@ -59,13 +38,9 @@ export interface EditScriptSchemaOptions {
 export const makeEditScriptSchema = (opts: EditScriptSchemaOptions) =>
   z
     .object({
-      // ── Genuinely user-typed / form-owned scalar fields ──────────────────
+      // ── User-typed / form-owned scalar fields ──────────────────
       name: z
         .string()
-        // Pre-migration used `v-model.trim`, so surrounding whitespace was
-        // stripped before the required + isValidResourceName checks ran. `.trim()`
-        // restores that parity — " abc " validates (and saves) as "abc" instead of
-        // failing isValidResourceName on the leading/trailing space.
         .trim()
         .min(1, opts.t("common.nameRequired"))
         .refine((v) => isValidResourceName(String(v)), {
@@ -74,8 +49,7 @@ export const makeEditScriptSchema = (opts: EditScriptSchemaOptions) =>
       description: z.string().optional().default(""),
       type: z.string().min(1, opts.t("actions.fieldRequired")),
       service_account: z.string().min(1, opts.t("actions.fieldRequired")),
-      // Disabled field whose value is always "UTC". Pre-migration main had NO
-      // timezone rule, so it's defaulted but NOT enforced (parity).
+      // Disabled field whose value is always "UTC"; defaulted but not enforced.
       timezone: z.string().default("UTC"),
 
       // ── Conditional fields (validated in superRefine) ────────────────────
@@ -84,8 +58,8 @@ export const makeEditScriptSchema = (opts: EditScriptSchemaOptions) =>
       codeZip: z.any().nullable().optional(),
       // cron + frequencyType are bridged from the component (the frequency tabs
       // are an OButton toggle, not an <input>). frequencyType feeds the save
-      // payload AND the create-side cron gate (repeat tab live); the cron
-      // requirement/format is enforced below (see superRefine).
+      // payload AND the create-side cron gate; the cron requirement/format is
+      // enforced below (see superRefine).
       cron: z.string().optional().default(""),
       frequencyType: z.string().optional().default("once"),
     })
@@ -99,15 +73,10 @@ export const makeEditScriptSchema = (opts: EditScriptSchemaOptions) =>
         });
       }
 
-      // cron — byte-exact restoration of pre-migration main, which validated cron
-      // through TWO paths:
-      //   (a) the submit-path gate on execution_details === "repeat" (fires on
-      //       EDIT, where the record's execution_details is "repeat"), and
-      //   (b) the cron field's inline @update handler, which only ran once the
-      //       user had actually edited the field. So on CREATE a repeat schedule
-      //       whose cron field is never touched still saves with a blank cron —
-      //       main's latent gap, deliberately preserved here.
-      // (a) → getExecutionDetails(); (b) → getCronEdited() gated on the live tab.
+      // cron is validated through two paths:
+      //   (a) EDIT: execution_details === "repeat".
+      //   (b) CREATE: the cron field has been edited AND the repeat tab is live.
+      //       An untouched blank cron on create still saves.
       const editRepeat = opts.getExecutionDetails() === "repeat";
       const createEditedRepeat =
         opts.getCronEdited() && val.frequencyType === "repeat";
diff --git a/web/src/components/actionScripts/EditScript.vue b/web/src/components/actionScripts/EditScript.vue
index c4439e3c32..26c7a37944 100644
--- a/web/src/components/actionScripts/EditScript.vue
+++ b/web/src/components/actionScripts/EditScript.vue
@@ -15,21 +15,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div data-test="add-action-script-section" class="w-full h-full flex flex-col">
-    <AppPageHeader
-      :title="isEditingActionScript ? t('actions.update') : t('actions.add')"
-      :back="{
-        onClick: () => router.back(),
-        dataTest: 'add-action-script-back-btn',
-      }"
-      class="px-4 border-b border-border-default"
-    >
+  <OPageLayout
+    data-test="add-action-script-section"
+    :title="isEditingActionScript ? t('actions.update') : t('actions.add')"
+    :back="{
+      onClick: () => router.back(),
+      dataTest: 'add-action-script-back-btn',
+    }"
+    bleed
+  >
       <template #title>
         <span data-test="add-action-script-title">{{
           isEditingActionScript ? t("actions.update") : t("actions.add")
         }}</span>
       </template>
-    </AppPageHeader>
 
     <!-- Inline (full-page) form. The footer Save lives INSIDE the <OForm>, so it
          is `type="submit"` and Enter submits natively — no `form-id` needed. -->
@@ -40,7 +39,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     >
       <div class="w-full flex-1 min-h-0 px-2.5 pb-2.5 pt-1">
         <div
-          class="card-container overflow-auto"
+          class="bg-card-glass-bg overflow-auto"
           style="max-height: calc(100vh - var(--navbar-height) - 157px)"
         >
           <div
@@ -53,8 +52,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             >
               <div
                 data-test="add-action-script-name-input-wrapper"
-                class="report-name-input"
-                style="padding-top: 12px"
+                class="report-name-input pt-3"
               >
                 <OFormInput
                   data-test="add-action-script-name-input"
@@ -86,7 +84,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   :options="actionTypes"
                   labelKey="label"
                   valueKey="value"
-                  class="showLabelOnTop no-case w-[400px]"
+                  class="showLabelOnTop no-case w-100"
                   :disabled="isEditingActionScript"
                 />
               </div>
@@ -178,13 +176,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 >
                   <div class="my-2 px-2">
                     <div
-                      style="font-size: 14px"
-                      class="font-bold text-gray-500 mb-2"
+                      style="font-size: var(--text-sm)"
+                      class="font-bold text-text-secondary mb-2"
                       data-test="add-action-script-frequency-title"
                     >
                       {{ t("actions.frequency") }} *
                     </div>
-                    <div class="p-1 el-border-radius el-border w-fit">
+                    <div class="p-1 rounded-default border border-card-glass-border w-fit">
                       <template
                         v-for="visual in frequencyTabs"
                         :key="visual.value"
@@ -207,7 +205,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       data-test="add-action-script-frequency-info"
                     >
                       <OIcon name="event" size="sm" class="mr-2" />
-                      <div style="font-size: 14px">
+                      <div style="font-size: var(--text-sm)">
                         The script will be triggered immediately after it is saved
                       </div>
                     </div>
@@ -216,11 +214,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       <div class="flex">
                         <div
                           data-test="add-action-script-cron-input"
-                          class="mr-2"
-                          style="padding-top: 8px; width: 320px"
+                          class="mr-2 pt-2"
+                          style="width: 320px"
                         >
                           <div
-                            class="mb-1 font-bold text-gray-500"
+                            class="mb-1 font-bold text-text-secondary"
                             data-test="add-action-script-cron-expression-title"
                           >
                             {{ t("reports.cronExpression") + " *" }}
@@ -228,11 +226,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                               data-test="add-action-script-cron-info"
                               name="info"
                               size="sm"
-                              class="ml-1 cursor-pointer text-gray-400"
+                              class="ml-1 cursor-pointer text-text-muted"
                             >
                               <OTooltip side="right" align="center">
                                 <template #content>
-                                  <span style="font-size: 14px">
+                                  <span style="font-size: var(--text-sm)">
                                     Pattern: * * * * * means every minute .
                                     <br />
                                     Format: [Minute 0-59] [Hour 0-23] [Day of Month
@@ -252,10 +250,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
                           <OFormInput
                             name="cron"
-                            class="showLabelOnTop"
+                            class="showLabelOnTop w-full"
                             type="text"
                             debounce="300"
-                            style="width: 100%"
                             :disabled="isEditingActionScript"
                             :readonly="isEditingActionScript"
                           />
@@ -306,17 +303,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <div>
                       <div
                         data-test="add-action-script-service-account-title"
-                        class="mb-1 font-bold text-gray-500"
+                        class="mb-1 font-bold text-text-secondary"
                       >
                         {{ t("actions.serviceAccount") + " *" }}
                         <OIcon
                           name="info"
                           size="sm"
-                          class="ml-1 cursor-pointer text-gray-400"
+                          class="ml-1 cursor-pointer text-text-muted"
                         >
                           <OTooltip side="right" align="center">
                             <template #content>
-                              <span style="font-size: 14px">
+                              <span style="font-size: var(--text-sm)">
                                 Make sure service account has permissions to access
                                 Actions.
                               </span>
@@ -362,11 +359,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   :done="step > 4"
                   class="mt-3"
                 >
-                  <!-- Env vars are a dynamic key/value array (DEFERRED per the
-                       migration brief): they carry no validation today and the
-                       form-array pattern is not yet live, so these stay bare
-                       OInput bound to the component-owned `environmentalVariables`
-                       and are NOT part of the form schema. -->
+                  <!-- Env vars are a dynamic key/value array bound to the
+                       component-owned `environmentalVariables`, not part of the
+                       form schema (no validation today). -->
                   <div
                     v-for="(header, index) in environmentalVariables"
                     :key="header.uuid"
@@ -427,8 +422,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </div>
       <div class="mx-2">
         <div
-          class="flex justify-end gap-2 px-3 w-full py-[0.625rem] card-container"
-          style="position: sticky; bottom: 0px; z-index: 2"
+          class="flex justify-end gap-2 px-3 w-full py-2.5 bg-card-glass-bg sticky"
+          style="bottom: 0px; z-index: 2"
         >
           <OButton
             data-test="add-action-script-cancel-btn"
@@ -449,7 +444,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
       </div>
     </OForm>
-  </div>
+  </OPageLayout>
 
   <ConfirmDialog
     v-model="dialog.show"
@@ -481,7 +476,7 @@ import type { Ref } from "vue";
 import { DateTime as _DateTime } from "luxon";
 import actions from "@/services/action_scripts";
 import ConfirmDialog from "@/components/ConfirmDialog.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import CronExpressionParser from "cron-parser";
 import { convertDateToTimestamp } from "@/utils/date";
 import service_accounts from "@/services/service_accounts";
diff --git a/web/src/components/actionScripts/FileItem.spec.ts b/web/src/components/actionScripts/FileItem.spec.ts
deleted file mode 100644
index a571ff78b7..0000000000
--- a/web/src/components/actionScripts/FileItem.spec.ts
+++ /dev/null
@@ -1,398 +0,0 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { mount, VueWrapper } from "@vue/test-utils";
-import { nextTick } from "vue";
-import FileItem from "@/components/actionScripts/FileItem.vue";
-
-
-describe("FileItem.vue", () => {
-  let wrapper: VueWrapper;
-
-  afterEach(() => {
-    if (wrapper) {
-      wrapper.unmount();
-    }
-    vi.clearAllMocks();
-  });
-
-  const createWrapper = (props = {}) => {
-    const defaultProps = {
-      name: "test.py",
-      isActive: false,
-      editMode: false,
-    };
-
-    return mount(FileItem, {
-      props: { ...defaultProps, ...props },
-      global: {
-        plugins: [],
-        stubs: {
-          "OIcon": true,
-        },
-      },
-    });
-  };
-
-  describe("Component Rendering", () => {
-    it("renders the component correctly", () => {
-      wrapper = createWrapper();
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it("displays file name correctly", () => {
-      wrapper = createWrapper({ name: "my-script.py" });
-      expect(wrapper.text()).toContain("my-script.py");
-    });
-
-    it("applies active styling when isActive is true", () => {
-      wrapper = createWrapper({ isActive: true });
-      const listItem = wrapper.find("li");
-      expect(listItem.classes()).toContain("bg-primary");
-      expect(listItem.classes()).toContain("text-white");
-    });
-
-    it("does not apply active styling when isActive is false", () => {
-      wrapper = createWrapper({ isActive: false });
-      const listItem = wrapper.find("li");
-      expect(listItem.classes()).not.toContain("bg-primary");
-      expect(listItem.classes()).not.toContain("text-white");
-    });
-
-    it("renders edit and delete buttons", () => {
-      wrapper = createWrapper();
-      const buttons = wrapper.findAll("button");
-      expect(buttons).toHaveLength(2);
-
-      const editButton = buttons[0];
-      const deleteButton = buttons[1];
-
-      // When stubs: { OIcon: true }, Vue renders the stub as <o-icon-stub> (lowercase kebab)
-      expect(editButton.find("o-icon-stub").attributes("name")).toBe("edit");
-      expect(deleteButton.find("o-icon-stub").attributes("name")).toBe(
-        "delete",
-      );
-    });
-  });
-
-  describe("Props and Computed Properties", () => {
-    it("accepts required props", () => {
-      wrapper = createWrapper({
-        name: "script.py",
-        isActive: true,
-        editMode: false,
-      });
-
-      expect(wrapper.props("name")).toBe("script.py");
-      expect(wrapper.props("isActive")).toBe(true);
-      expect(wrapper.props("editMode")).toBe(false);
-    });
-
-    it("fileName computed property gets value from props", () => {
-      wrapper = createWrapper({ name: "test-file.py" });
-      const vm = wrapper.vm as any;
-      expect(vm.fileName).toBe("test-file.py");
-    });
-
-    it("fileName computed property emits update when set", () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-
-      vm.fileName = "new-name.py";
-
-      expect(wrapper.emitted("update:name")).toBeTruthy();
-      expect(wrapper.emitted("update:name")?.[0]).toEqual(["new-name.py"]);
-    });
-  });
-
-  describe("Edit Mode", () => {
-    it("shows input field when in editing mode", async () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-
-      vm.isEditing = true;
-      await nextTick();
-
-      expect(wrapper.find("input").exists()).toBe(true);
-      expect(wrapper.text()).not.toContain("test.py"); // Text should be hidden
-    });
-
-    it("shows file name when not in editing mode", async () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-
-      vm.isEditing = false;
-      await nextTick();
-
-      expect(wrapper.find("input").exists()).toBe(false);
-      expect(wrapper.text()).toContain("test.py");
-    });
-
-    it("enters edit mode when editMode prop is true", async () => {
-      wrapper = createWrapper({ editMode: true });
-      await nextTick();
-
-      const vm = wrapper.vm as any;
-      expect(vm.isEditing).toBe(true);
-      expect(wrapper.find("input").exists()).toBe(true);
-    });
-
-    it("focuses input when entering edit mode", async () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-
-      // Set up editing mode and check state
-      await vm.focusInput();
-
-      expect(vm.isEditing).toBe(true);
-      // Focus may not be called if nameInput ref is null in test
-    });
-  });
-
-  describe("Event Handling", () => {
-    it("emits open-file when list item is clicked", async () => {
-      wrapper = createWrapper();
-      const listItem = wrapper.find("li");
-
-      await listItem.trigger("click");
-
-      expect(wrapper.emitted("open-file")).toBeTruthy();
-    });
-
-    it("enters edit mode when edit button is clicked", async () => {
-      wrapper = createWrapper();
-      const editButton = wrapper.findAll("button")[0];
-      const vm = wrapper.vm as any;
-
-      await editButton.trigger("click");
-
-      expect(vm.isEditing).toBe(true);
-      expect(vm.prevFileName).toBe("test.py");
-    });
-
-    it("emits delete-file when delete button is clicked", async () => {
-      wrapper = createWrapper();
-      const deleteButton = wrapper.findAll("button")[1];
-
-      await deleteButton.trigger("click");
-
-      expect(wrapper.emitted("delete-file")).toBeTruthy();
-    });
-
-    it("stops propagation for edit button click", async () => {
-      wrapper = createWrapper();
-      const editButton = wrapper.findAll("button")[0];
-
-      await editButton.trigger("click");
-
-      // Edit button should not trigger open-file event
-      expect(wrapper.emitted("open-file")).toBeFalsy();
-    });
-
-    it("stops propagation for delete button click", async () => {
-      wrapper = createWrapper();
-      const deleteButton = wrapper.findAll("button")[1];
-
-      await deleteButton.trigger("click");
-
-      // Delete button should not trigger open-file event
-      expect(wrapper.emitted("open-file")).toBeFalsy();
-    });
-  });
-
-  describe("Input Blur Handling", () => {
-    it("exits edit mode on blur", async () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-
-      vm.isEditing = true;
-      await nextTick();
-
-      const input = wrapper.find("input");
-      await input.trigger("blur");
-
-      expect(vm.isEditing).toBe(false);
-    });
-
-    it("restores previous name if current name is empty on blur", async () => {
-      wrapper = createWrapper({ name: "" });
-      const vm = wrapper.vm as any;
-
-      vm.prevFileName = "backup.py";
-      vm.isEditing = true;
-      await nextTick();
-
-      const input = wrapper.find("input");
-      await input.trigger("blur");
-
-      expect(wrapper.emitted("update:name")).toBeTruthy();
-      expect(wrapper.emitted("update:name")?.[0]).toEqual(["backup.py"]);
-    });
-
-    it("uses default name if no previous name exists on blur with empty name", async () => {
-      wrapper = createWrapper({ name: "" });
-      const vm = wrapper.vm as any;
-
-      vm.prevFileName = "";
-      vm.isEditing = true;
-      await nextTick();
-
-      const input = wrapper.find("input");
-      await input.trigger("blur");
-
-      expect(wrapper.emitted("update:name")).toBeTruthy();
-      expect(wrapper.emitted("update:name")?.[0]).toEqual(["new.py"]);
-    });
-
-    it("does not restore name on blur if name is not empty", async () => {
-      wrapper = createWrapper({ name: "valid-name.py" });
-      const vm = wrapper.vm as any;
-
-      vm.isEditing = true;
-      await nextTick();
-
-      const input = wrapper.find("input");
-      await input.trigger("blur");
-
-      expect(wrapper.emitted("update:name")).toBeFalsy();
-    });
-  });
-
-  describe("Input Field Styling", () => {
-    it("applies white text when active and editing", async () => {
-      wrapper = createWrapper({ isActive: true });
-      const vm = wrapper.vm as any;
-
-      vm.isEditing = true;
-      await nextTick();
-
-      const input = wrapper.find("input");
-      expect(input.classes()).toContain("text-white");
-      expect(input.classes()).not.toContain("text-black");
-    });
-
-    it("applies black text when not active and editing", async () => {
-      wrapper = createWrapper({ isActive: false });
-      const vm = wrapper.vm as any;
-
-      vm.isEditing = true;
-      await nextTick();
-
-      const input = wrapper.find("input");
-      expect(input.classes()).toContain("text-black");
-      expect(input.classes()).not.toContain("text-white");
-    });
-  });
-
-  describe("Button Styling", () => {
-    it("applies light gray styling to buttons when active", () => {
-      wrapper = createWrapper({ isActive: true });
-      const icons = wrapper.findAll(".file-actions .OIcon");
-
-      icons.forEach((icon) => {
-        expect(icon.classes()).toContain("text-gray-100");
-        expect(icon.classes()).not.toContain("text-gray-600");
-      });
-    });
-
-    it("applies dark gray styling to buttons when not active", () => {
-      wrapper = createWrapper({ isActive: false });
-      const icons = wrapper.findAll(".file-actions .OIcon");
-
-      icons.forEach((icon) => {
-        expect(icon.classes()).toContain("text-gray-600");
-        expect(icon.classes()).not.toContain("text-gray-100");
-      });
-    });
-  });
-
-  describe("Watchers", () => {
-    it("enters edit mode when editMode prop changes to true", async () => {
-      wrapper = createWrapper({ editMode: false });
-      const vm = wrapper.vm as any;
-
-      expect(vm.isEditing).toBe(false);
-
-      await wrapper.setProps({ editMode: true });
-      await nextTick();
-
-      expect(vm.isEditing).toBe(true);
-    });
-
-    it("does not affect edit state when editMode prop changes to false", async () => {
-      wrapper = createWrapper({ editMode: true });
-      const vm = wrapper.vm as any;
-
-      await nextTick();
-      expect(vm.isEditing).toBe(true);
-
-      await wrapper.setProps({ editMode: false });
-
-      expect(vm.isEditing).toBe(true); // Should remain in edit state
-    });
-  });
-
-  describe("Edge Cases", () => {
-    it("handles empty file name", () => {
-      wrapper = createWrapper({ name: "" });
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it("handles null nameInput ref gracefully", async () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-
-      vm.nameInput = null;
-
-      expect(async () => {
-        await vm.focusInput();
-      }).not.toThrow();
-    });
-
-    it("handles very long file names", () => {
-      const longName = "a".repeat(100) + ".py";
-      wrapper = createWrapper({ name: longName });
-      expect(wrapper.text()).toContain(longName);
-    });
-
-    it("handles file names with special characters", () => {
-      const specialName = "test-file_123.py";
-      wrapper = createWrapper({ name: specialName });
-      expect(wrapper.text()).toContain(specialName);
-    });
-
-    it("handles input trimming", async () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-
-      vm.isEditing = true;
-      await nextTick();
-
-      const input = wrapper.find("input");
-      await input.setValue("  trimmed-name.py  ");
-
-      expect(wrapper.emitted("update:name")?.[0]).toEqual(["trimmed-name.py"]);
-    });
-  });
-
-  describe("Component Structure", () => {
-    it("has correct CSS classes on main element", () => {
-      wrapper = createWrapper();
-      const listItem = wrapper.find("li");
-
-      expect(listItem.classes()).toContain("cursor-pointer");
-      expect(listItem.classes()).toContain("py-[1px]");
-      expect(listItem.classes()).toContain("px-2");
-      expect(listItem.classes()).toContain("hover:bg-gray-200");
-      expect(listItem.classes()).toContain("file-item");
-    });
-
-    it("has correct structure for file content and actions", () => {
-      wrapper = createWrapper();
-
-      // Check for the file actions area by class
-      const actionsDiv = wrapper.find(".file-actions");
-
-      expect(actionsDiv.exists()).toBe(true);
-      expect(actionsDiv.classes()).toContain("file-actions");
-    });
-  });
-});
diff --git a/web/src/components/actionScripts/FileItem.vue b/web/src/components/actionScripts/FileItem.vue
deleted file mode 100644
index 94d79d1f24..0000000000
--- a/web/src/components/actionScripts/FileItem.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<template>
-  <li
-    class="cursor-pointer py-[1px] px-2 hover:bg-gray-200 text-[14px] rounded-[2px] flex h-[25px] group file-item"
-    :class="{
-      'bg-primary text-white': isActive,
-    }"
-    @click="openFile"
-  >
-    <div class="w-[calc(100%-40px)] flex items-center">
-      <template v-if="isEditing">
-        <input
-          ref="nameInput"
-          v-model.trim="fileName"
-          class="w-full border rounded h-full bg-transparent border-none outline-none"
-          :class="isActive ? 'text-white' : 'text-black'"
-          @blur="onBlur"
-        />
-      </template>
-      <template v-else>
-        {{ fileName }}
-      </template>
-    </div>
-    <div
-      class="w-[36px] flex items-center space-x-2 ml-auto invisible group-hover:visible file-actions"
-    >
-      <OButton variant="ghost" size="icon-xs-sq" @click.stop="editFile">
-        <OIcon name="edit" size="sm" :class="isActive ? 'text-gray-100' : 'text-gray-600'" />
-      </OButton>
-      <OButton variant="ghost" size="icon-xs-sq" @click.stop="deleteFile">
-        <OIcon name="delete" size="sm" :class="isActive ? 'text-gray-100' : 'text-gray-600'" />
-      </OButton>
-    </div>
-  </li>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, nextTick, watch } from "vue";
-import OButton from "@/lib/core/Button/OButton.vue";
-import OIcon from "@/lib/core/Icon/OIcon.vue";
-
-const props = defineProps<{
-  name: string;
-  isActive: boolean;
-  editMode: boolean;
-}>();
-
-const emit = defineEmits(["open-file", "update:name", "delete-file"]);
-
-const isEditing = ref(false);
-
-const nameInput = ref<HTMLInputElement | null>(null);
-
-const openFile = () => {
-  emit("open-file");
-};
-
-const prevFileName = ref(props.name);
-
-const fileName = computed({
-  get: () => props.name,
-  set: (val) => {
-    emit("update:name", val);
-  },
-});
-
-const editFile = async () => {
-  if (fileName.value) prevFileName.value = fileName.value;
-  focusInput();
-};
-
-const focusInput = async () => {
-  isEditing.value = true;
-  await nextTick();
-  nameInput.value?.focus();
-};
-
-watch(
-  () => props.editMode,
-  (val) => {
-    if (val) {
-      focusInput();
-    }
-  },
-  {
-    immediate: true,
-  },
-);
-
-const onBlur = () => {
-  isEditing.value = false;
-  if (!props.name) {
-    emit("update:name", prevFileName.value || "new.py");
-  }
-};
-
-const deleteFile = () => {
-  emit("delete-file");
-};
-</script>
-
diff --git a/web/src/components/actionScripts/ScriptEditor.spec.ts b/web/src/components/actionScripts/ScriptEditor.spec.ts
deleted file mode 100644
index cec444ca40..0000000000
--- a/web/src/components/actionScripts/ScriptEditor.spec.ts
+++ /dev/null
@@ -1,412 +0,0 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { mount, VueWrapper } from '@vue/test-utils';
-import ScriptEditor from '@/components/actionScripts/ScriptEditor.vue';
-
-// Mock dependencies
-vi.mock('axios');
-vi.mock('vue-i18n', () => ({
-  useI18n: () => ({
-    t: (key: string) => key
-  })
-}));
-
-
-describe('ScriptEditor.vue', () => {
-  let wrapper: VueWrapper;
-
-  afterEach(() => {
-    if (wrapper) {
-      wrapper.unmount();
-    }
-    vi.clearAllMocks();
-  });
-
-  const createWrapper = (props = {}) => {
-    const defaultProps = {
-      loading: false,
-      error: '',
-      file: {
-        name: 'test.py',
-        language: 'python'
-      },
-      script: ''
-    };
-
-    return mount(ScriptEditor, {
-      props: { ...defaultProps, ...props },
-      global: {
-        plugins: [],
-        stubs: {
-          'FullViewContainer': {
-            template: '<div><slot name="left"></slot><slot></slot></div>',
-            props: ['name', 'label', 'isExpanded']
-          },
-          'query-editor': {
-            template: '<div data-test="vrl-function-test-events-editor"></div>',
-            props: ['editorId', 'language', 'query']
-          },
-          'OIcon': {
-            template: '<div class="icon" :data-name="name"><slot></slot></div>',
-            props: ['name', 'size']
-          },
-          // The source uses OTooltip (O2 lib), not q-tooltip.
-          'OTooltip': {
-            template: '<div class="o-tooltip" :data-content="content"><slot></slot></div>',
-            props: ['side', 'align', 'sideOffset', 'content']
-          },
-          'OSpinner': {
-            template: '<div data-test="script-editor-loading-indicator"></div>',
-            props: ['size']
-          }
-        }
-      }
-    });
-  };
-
-  describe('Component Rendering', () => {
-    it('renders the component correctly', () => {
-      wrapper = createWrapper();
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it('renders FullViewContainer with correct props', () => {
-      const file = { name: 'script.py', language: 'python' };
-      wrapper = createWrapper({ file });
-      
-      const fullViewContainer = wrapper.find('div'); // Since we're using a stub template
-      expect(fullViewContainer.exists()).toBe(true);
-    });
-
-    it('renders query editor when expanded', async () => {
-      const file = { name: 'test.py', language: 'python' };
-      const script = 'print("hello")';
-      
-      wrapper = createWrapper({ file, script });
-      const vm = wrapper.vm as any;
-      
-      // Ensure component is expanded
-      vm.isExpanded = true;
-      await wrapper.vm.$nextTick();
-      
-      const queryEditor = wrapper.find('[data-test="vrl-function-test-events-editor"]');
-      expect(queryEditor.exists()).toBe(true);
-    });
-
-    it('hides editor section when collapsed', async () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      
-      vm.isExpanded = false;
-      await wrapper.vm.$nextTick();
-      
-      const editorSection = wrapper.find('[data-test="test-function-input-editor-section"]');
-      expect(editorSection.attributes('style')).toContain('display: none');
-    });
-
-    it('shows editor section when expanded', async () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      
-      vm.isExpanded = true;
-      await wrapper.vm.$nextTick();
-      
-      const editorSection = wrapper.find('[data-test="test-function-input-editor-section"]');
-      expect(editorSection.exists()).toBe(true);
-    });
-  });
-
-  describe('Props Handling', () => {
-    it('accepts all required props', () => {
-      const props = {
-        loading: true,
-        error: 'Test error',
-        file: { name: 'script.py', language: 'python' },
-        script: 'test script'
-      };
-      
-      wrapper = createWrapper(props);
-      
-      expect(wrapper.props('loading')).toBe(true);
-      expect(wrapper.props('error')).toBe('Test error');
-      expect(wrapper.props('file')).toEqual({ name: 'script.py', language: 'python' });
-      expect(wrapper.props('script')).toBe('test script');
-    });
-
-    it('uses default values for optional props', () => {
-      wrapper = createWrapper();
-      
-      expect(wrapper.props('loading')).toBe(false);
-      expect(wrapper.props('error')).toBe('');
-      expect(wrapper.props('script')).toBe('');
-    });
-
-    it('handles null file prop', () => {
-      wrapper = createWrapper({ file: { name: null, language: null } });
-      expect(wrapper.exists()).toBe(true);
-    });
-  });
-
-  describe('Loading State', () => {
-    it('shows loading spinner when loading is true', () => {
-      wrapper = createWrapper({ loading: true });
-      
-      const spinner = wrapper.find('[data-test="script-editor-loading-indicator"]');
-      expect(spinner.exists()).toBe(true);
-    });
-
-    it('shows loading text when loading is true', () => {
-      wrapper = createWrapper({ loading: true });
-      
-      expect(wrapper.exists()).toBe(true); // Just verify it renders
-    });
-
-    it('does not show loading elements when loading is false', () => {
-      wrapper = createWrapper({ loading: false });
-      
-      const spinner = wrapper.find('[data-test="script-editor-loading-indicator"]');
-      expect(spinner.exists()).toBe(false);
-    });
-
-    it('applies correct styling to loading section', () => {
-      wrapper = createWrapper({ loading: true });
-      
-      expect(wrapper.exists()).toBe(true); // Just verify it renders
-    });
-  });
-
-  describe('Error State', () => {
-    it('shows error icon when error exists', () => {
-      wrapper = createWrapper({ error: 'Something went wrong' });
-      
-      const errorIcon = wrapper.find('.icon');
-      expect(errorIcon.exists()).toBe(true);
-    });
-
-    it('does not show error icon when no error', () => {
-      wrapper = createWrapper({ error: '' });
-      
-      const errorIcon = wrapper.find('.icon');
-      expect(errorIcon.exists()).toBe(false);
-    });
-
-    it('shows error tooltip with correct message', () => {
-      const errorMessage = 'Test error message';
-      wrapper = createWrapper({ error: errorMessage });
-
-      // OTooltip stub renders with class "o-tooltip" and data-content attribute
-      const tooltip = wrapper.find('.o-tooltip');
-      expect(tooltip.exists()).toBe(true);
-    });
-
-    it('applies correct styling to error icon', () => {
-      wrapper = createWrapper({ error: 'Error' });
-      
-      const errorIcon = wrapper.find('.icon');
-      expect(errorIcon.exists()).toBe(true);
-    });
-
-    it('configures tooltip positioning correctly', () => {
-      wrapper = createWrapper({ error: 'Error' });
-
-      // OTooltip stub renders with class "o-tooltip"
-      const tooltip = wrapper.find('.o-tooltip');
-      expect(tooltip.exists()).toBe(true);
-    });
-  });
-
-  describe('Script Input Handling', () => {
-    it('inputScript computed property gets value from props', () => {
-      wrapper = createWrapper({ script: 'test script content' });
-      const vm = wrapper.vm as any;
-      
-      expect(vm.inputScript).toBe('test script content');
-    });
-
-    it('inputScript computed property emits update when set', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      
-      vm.inputScript = 'new script content';
-      
-      expect(wrapper.emitted('update:script')).toBeTruthy();
-      expect(wrapper.emitted('update:script')?.[0]).toEqual(['new script content']);
-    });
-
-    it('handles empty script content', () => {
-      wrapper = createWrapper({ script: '' });
-      const vm = wrapper.vm as any;
-      
-      expect(vm.inputScript).toBe('');
-    });
-
-    it('handles long script content', () => {
-      const longScript = 'print("hello")\n'.repeat(100);
-      wrapper = createWrapper({ script: longScript });
-      const vm = wrapper.vm as any;
-      
-      expect(vm.inputScript).toBe(longScript);
-    });
-  });
-
-  describe('Expansion State', () => {
-    it('initializes as expanded', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      
-      expect(vm.isExpanded).toBe(true);
-    });
-
-    it('can be collapsed', async () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      
-      vm.isExpanded = false;
-      await wrapper.vm.$nextTick();
-      
-      expect(vm.isExpanded).toBe(false);
-    });
-
-    it('binds expansion state to FullViewContainer', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      
-      expect(vm.isExpanded).toBe(true);
-    });
-  });
-
-  describe('File Properties', () => {
-    it('uses file name in multiple places', () => {
-      const file = { name: 'my-script.py', language: 'python' };
-      wrapper = createWrapper({ file });
-      
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it('passes file language to query editor', async () => {
-      const file = { name: 'test.js', language: 'javascript' };
-      wrapper = createWrapper({ file });
-      
-      // Ensure expanded state to render query editor
-      const vm = wrapper.vm as any;
-      vm.isExpanded = true;
-      await wrapper.vm.$nextTick();
-      
-      const queryEditor = wrapper.find('[data-test="vrl-function-test-events-editor"]');
-      expect(queryEditor.exists()).toBe(true);
-    });
-
-    it('generates unique editor ID based on file name', async () => {
-      const file = { name: 'unique-script.py', language: 'python' };
-      wrapper = createWrapper({ file });
-      
-      const vm = wrapper.vm as any;
-      vm.isExpanded = true;
-      await wrapper.vm.$nextTick();
-      
-      const queryEditor = wrapper.find('[data-test="vrl-function-test-events-editor"]');
-      expect(queryEditor.exists()).toBe(true);
-    });
-  });
-
-  describe('Component Structure', () => {
-    it('has correct main wrapper structure', () => {
-      wrapper = createWrapper();
-
-      const mainDiv = wrapper.find('.w-full.h-full');
-      expect(mainDiv.exists()).toBe(true);
-    });
-
-    it('has correct editor section structure', () => {
-      wrapper = createWrapper();
-
-      const editorSection = wrapper.find('[data-test="test-function-input-editor-section"]');
-      expect(editorSection.exists()).toBe(true);
-      expect(editorSection.classes()).toContain('border-[1px]');
-      expect(editorSection.classes()).toContain('border-gray-200');
-      expect(editorSection.classes()).toContain('h-[calc(100%-30px)]');
-      expect(editorSection.classes()).toContain('relative');
-      expect(editorSection.classes()).toContain('rounded-md');
-      expect(editorSection.classes()).toContain('overflow-hidden');
-    });
-
-    it('query editor has correct CSS classes', async () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      
-      vm.isExpanded = true;
-      await wrapper.vm.$nextTick();
-      
-      const queryEditor = wrapper.find('[data-test="vrl-function-test-events-editor"]');
-      expect(queryEditor.exists()).toBe(true);
-    });
-  });
-
-  describe('Internationalization', () => {
-    it('uses i18n for loading text', () => {
-      wrapper = createWrapper({ loading: true });
-      
-      expect(wrapper.exists()).toBe(true); // Just verify component renders
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('handles undefined file gracefully', () => {
-      wrapper = createWrapper({ file: { name: undefined, language: undefined } });
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it('handles file without language', () => {
-      const file = { name: 'test.py' };
-      wrapper = createWrapper({ file });
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it('handles file without name', () => {
-      const file = { language: 'python' };
-      wrapper = createWrapper({ file });
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it('handles both loading and error states simultaneously', () => {
-      wrapper = createWrapper({ loading: true, error: 'Test error' });
-      
-      const spinner = wrapper.find('[data-test="script-editor-loading-indicator"]');
-      const errorIcon = wrapper.find('.icon');
-      
-      expect(spinner.exists()).toBe(true);
-      expect(errorIcon.exists()).toBe(true);
-    });
-
-    it('handles very long error messages', () => {
-      const longError = 'A very long error message that might cause layout issues. '.repeat(10);
-      wrapper = createWrapper({ error: longError });
-
-      // OTooltip stub renders with class "o-tooltip"
-      const tooltip = wrapper.find('.o-tooltip');
-      expect(tooltip.exists()).toBe(true);
-    });
-  });
-
-  describe('Data Test Attributes', () => {
-    it('has correct data-test attributes for testing', () => {
-      wrapper = createWrapper();
-      
-      const titleSection = wrapper.find('[data-test="test-function-input-title-section"]');
-      const editorSection = wrapper.find('[data-test="test-function-input-editor-section"]');
-      
-      expect(titleSection.exists()).toBe(true);
-      expect(editorSection.exists()).toBe(true);
-    });
-
-    it('query editor has correct data-test attribute', async () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      
-      vm.isExpanded = true;
-      await wrapper.vm.$nextTick();
-      
-      const queryEditor = wrapper.find('[data-test="vrl-function-test-events-editor"]');
-      expect(queryEditor.exists()).toBe(true);
-    });
-  });
-});
\ No newline at end of file
diff --git a/web/src/components/actionScripts/ScriptEditor.vue b/web/src/components/actionScripts/ScriptEditor.vue
deleted file mode 100644
index 908e25fdbc..0000000000
--- a/web/src/components/actionScripts/ScriptEditor.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-  <div class="w-full h-full">
-    <FullViewContainer
-      data-test="test-function-input-title-section"
-      :name="file.name"
-      v-model:is-expanded="isExpanded"
-      :label="file.name"
-    >
-      <template #left>
-        <div
-          v-if="loading"
-          class="text-weight-bold flex items-center text-gray-500 ml-2 text-[13px]"
-        >
-          <OSpinner size="xs" data-test="script-editor-loading-indicator" />
-          <div class="relative top-[2px]">
-            {{ t("confirmDialog.loading") }}
-          </div>
-        </div>
-        <OIcon
-          v-if="!!error"
-          name="info"
-          class="text-red-600 mx-1 cursor-pointer"
-          size="sm"
-         />
-          <OTooltip side="right" align="center" :sideOffset="10" :content="error" />
-      </template>
-    </FullViewContainer>
-    <div
-      v-show="isExpanded"
-      class="border-[1px] border-gray-200 h-[calc(100%-30px)] relative rounded-md overflow-hidden"
-      data-test="test-function-input-editor-section"
-    >
-      <query-editor
-        data-test="vrl-function-test-events-editor"
-        ref="eventsEditorRef"
-        :editor-id="`test-function-events-input-editor-${file.name}`"
-        class="test-function-input-editor w-full min-h-40 rounded h-full"
-        v-model:query="inputScript"
-        :language="file.language"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted, computed, defineAsyncComponent } from "vue";
-import FullViewContainer from "@/components/functions/FullViewContainer.vue";
-const QueryEditor = defineAsyncComponent(() => import("@/components/CodeQueryEditor.vue"));
-import axios from "axios";
-import { useI18n } from "vue-i18n";
-import OSpinner from "@/lib/feedback/Spinner/OSpinner.vue";
-import OIcon from "@/lib/core/Icon/OIcon.vue";
-import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
-
-const props = defineProps({
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-  error: {
-    type: String,
-    default: "",
-  },
-  file: {
-    type: Object,
-    default: null,
-  },
-  script: {
-    type: String,
-    default: "",
-  },
-});
-
-const emit = defineEmits(["update:script", "cancel"]);
-
-const { t } = useI18n();
-
-const isExpanded = ref(true);
-
-const inputScript = computed({
-  get: () => props.script,
-  set: (value) => emit("update:script", value),
-});
-</script>
-
diff --git a/web/src/components/actionScripts/ScriptToolbar.schema.ts b/web/src/components/actionScripts/ScriptToolbar.schema.ts
deleted file mode 100644
index 86ad829afb..0000000000
--- a/web/src/components/actionScripts/ScriptToolbar.schema.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// Validation schema for ScriptToolbar.vue (the action-script editor header bar).
-// Migrated from the old hand-rolled `isValidMethodName` + `scriptNameError`
-// computed to a single Zod schema on <OForm :schema>.
-//
-// Restores the BEFORE baseline for the `actionName` field:
-// `!!v || 'Field is required!'`
-// (required) AND `isValidMethodName` (the method-name regex). The truthy guard
-// inverts to a positive Zod constraint, so it is required + regex — not
-// regex-only.
-//
-// Built via a factory so the messages stay i18n-driven (pass useI18n's `t`),
-// consistent with the other migrated schemas. Validation TIMING is owned by
-// OForm (submit-then-change via revalidateLogic); this file only describes WHAT
-// is valid.
-
-import { z } from "zod";
-
-// Method-name pattern: must start with a letter or underscore, then only
-// letters / numbers / underscores. (Same pattern FunctionsToolbar / AddFunction
-// use elsewhere.)
-export const scriptMethodNameRegex = /^[A-Z_][A-Z0-9_]*$/i;
-
-export const makeScriptToolbarSchema = (
-  t: (_key: string, _params?: Record<string, unknown>) => string,
-) =>
-  z.object({
-    name: z
-      .string()
-      // Pre-migration used `v-model.trim`, so surrounding whitespace was stripped
-      // before the required + method-name checks ran. `.trim()` restores that
-      // parity — " abc " validates as "abc" instead of being rejected by the regex.
-      .trim()
-      .min(1, t("actions.fieldRequired"))
-      .regex(scriptMethodNameRegex, t("actions.invalidMethodName")),
-  });
-
-export type ScriptToolbarForm = z.infer<ReturnType<typeof makeScriptToolbarSchema>>;
diff --git a/web/src/components/actionScripts/ScriptToolbar.spec.ts b/web/src/components/actionScripts/ScriptToolbar.spec.ts
deleted file mode 100644
index 2d240b0057..0000000000
--- a/web/src/components/actionScripts/ScriptToolbar.spec.ts
+++ /dev/null
@@ -1,243 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// Behavior-focused spec for ScriptToolbar.vue after the OForm + Zod migration.
-// The old spec asserted removed internals (isValidMethodName / showInputError /
-// scriptNameError / onUpdate / addScriptForm). Those are gone — validation now
-// lives in ScriptToolbar.schema.ts and is enforced by a REAL <OForm>, so the
-// tests below mount the real form and assert behavior:
-//   • required + method-name regex gate `save` (schema, not a manual ref),
-//   • `update:name` still mirrors the form-owned value back to the parent,
-//   • the data-test selectors + back/cancel/fullscreen wiring are preserved.
-
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { mount, VueWrapper, flushPromises } from '@vue/test-utils';
-import ScriptToolbar from '@/components/actionScripts/ScriptToolbar.vue';
-
-// Mock vue-i18n — labels/buttons just echo their key.
-vi.mock('vue-i18n', () => ({
-  useI18n: () => ({ t: (key: string) => key }),
-}));
-
-// ScriptToolbar calls toggleFullscreen() from @/utils/dom directly — mock at the
-// module boundary.
-const mockToggleFullscreen = vi.fn();
-vi.mock('@/utils/dom', () => ({
-  toggleFullscreen: () => mockToggleFullscreen(),
-}));
-
-describe('ScriptToolbar.vue', () => {
-  let wrapper: VueWrapper;
-
-  const createWrapper = (props = {}) => {
-    const defaultProps = { name: 'test_action', disableName: false };
-
-    return mount(ScriptToolbar, {
-      props: { ...defaultProps, ...props },
-      global: {
-        // Real <OForm>/<OFormInput>/<OInput>/<OButton> are mounted (NOT stubbed)
-        // so the schema wiring is actually exercised.
-        stubs: {
-          OIcon: {
-            template: '<i class="OIcon-stub" :data-name="name"></i>',
-            props: ['name', 'size'],
-          },
-        },
-        directives: {
-          // `v-close-popup` is a directive not registered in the unit env.
-          'close-popup': {},
-        },
-      },
-    });
-  };
-
-  // Drive the form's own submit so the schema runs + the handler is awaited
-  // deterministically (a fire-and-forget native submit would not be).
-  const submit = async (w: VueWrapper) => {
-    await (w.vm as any).form.handleSubmit();
-    await flushPromises();
-  };
-
-  afterEach(() => {
-    if (wrapper) wrapper.unmount();
-    vi.clearAllMocks();
-  });
-
-  describe('Rendering', () => {
-    it('renders the toolbar shell + title', () => {
-      wrapper = createWrapper();
-      expect(wrapper.exists()).toBe(true);
-      expect(wrapper.text()).toContain('Add Action');
-      const toolbar = wrapper.find('[data-test="add-script-toolbar"]');
-      expect(toolbar.exists()).toBe(true);
-      expect(toolbar.classes()).toContain('flex');
-      expect(toolbar.classes()).toContain('justify-between');
-    });
-
-    it('preserves every data-test selector', () => {
-      wrapper = createWrapper();
-      expect(wrapper.find('[data-test="add-script-back-btn"]').exists()).toBe(true);
-      expect(wrapper.find('[data-test="add-script-name-input"]').exists()).toBe(true);
-      expect(wrapper.find('[data-test="add-script-fullscreen-btn"]').exists()).toBe(true);
-      expect(wrapper.find('[data-test="add-script-save-btn"]').exists()).toBe(true);
-      expect(wrapper.find('[data-test="add-script-cancel-btn"]').exists()).toBe(true);
-    });
-
-    it('seeds the name input from the `name` prop', () => {
-      wrapper = createWrapper({ name: 'seeded_name' });
-      const input = wrapper.find('[data-test="add-script-name-input"] input');
-      expect((input.element as HTMLInputElement).value).toBe('seeded_name');
-    });
-
-    it('renders the save button as a submit button', () => {
-      wrapper = createWrapper();
-      const saveBtn = wrapper.find('[data-test="add-script-save-btn"]');
-      expect(saveBtn.attributes('type')).toBe('submit');
-    });
-  });
-
-  describe('Props', () => {
-    it('accepts the required name prop', () => {
-      wrapper = createWrapper({ name: 'custom_action' });
-      expect(wrapper.props('name')).toBe('custom_action');
-    });
-
-    it('defaults disableName to false', () => {
-      wrapper = createWrapper();
-      expect(wrapper.props('disableName')).toBe(false);
-    });
-
-    it('disables + makes the input readonly when disableName is true', () => {
-      wrapper = createWrapper({ disableName: true });
-      const input = wrapper.find('[data-test="add-script-name-input"] input');
-      expect(input.attributes('disabled')).toBeDefined();
-      expect(input.attributes('readonly')).toBeDefined();
-    });
-  });
-
-  describe('Schema validation (real OForm)', () => {
-    it('blocks save when the name is empty', async () => {
-      wrapper = createWrapper({ name: '' });
-
-      await submit(wrapper);
-
-      expect((wrapper.vm as any).form.state.isValid).toBe(false);
-      expect(wrapper.emitted('save')).toBeFalsy();
-    });
-
-    it('blocks save when the name violates the method-name regex', async () => {
-      // Starts with a digit → invalid method name.
-      wrapper = createWrapper({ name: '123-bad' });
-
-      await submit(wrapper);
-
-      expect((wrapper.vm as any).form.state.isValid).toBe(false);
-      expect(wrapper.emitted('save')).toBeFalsy();
-    });
-
-    it('emits save when the name is valid', async () => {
-      wrapper = createWrapper({ name: 'valid_action' });
-
-      await submit(wrapper);
-
-      expect((wrapper.vm as any).form.state.isValid).toBe(true);
-      expect(wrapper.emitted('save')).toBeTruthy();
-    });
-
-    it.each([
-      'valid_action',
-      'ValidAction',
-      'action123',
-      '_private_action',
-      'ACTION_NAME',
-    ])('accepts the valid method name %s', async (name) => {
-      wrapper = createWrapper({ name });
-      await submit(wrapper);
-      expect((wrapper.vm as any).form.state.isValid).toBe(true);
-    });
-
-    it.each(['123invalid', 'invalid-name', 'invalid name', 'invalid.name', '@invalid'])(
-      'rejects the invalid method name %s',
-      async (name) => {
-        wrapper = createWrapper({ name });
-        await submit(wrapper);
-        expect((wrapper.vm as any).form.state.isValid).toBe(false);
-        expect(wrapper.emitted('save')).toBeFalsy();
-      },
-    );
-
-    it('does not validate before the first submit (R3)', () => {
-      wrapper = createWrapper({ name: '' });
-      // No error text rendered until the form is submitted.
-      expect(wrapper.find('[data-test="add-script-name-input-error"]').exists()).toBe(false);
-    });
-  });
-
-  describe('update:name bridge (parent owns the value)', () => {
-    it('emits update:name when the form-owned value changes', async () => {
-      wrapper = createWrapper({ name: 'old_name' });
-      await flushPromises();
-
-      (wrapper.vm as any).form.setFieldValue('name', 'new_name');
-      await flushPromises();
-
-      const events = wrapper.emitted('update:name');
-      expect(events).toBeTruthy();
-      expect(events?.[events.length - 1]).toEqual(['new_name']);
-    });
-
-    it('trims surrounding whitespace (parity with the old v-model.trim)', async () => {
-      wrapper = createWrapper({ name: '' });
-      await flushPromises();
-
-      (wrapper.vm as any).form.setFieldValue('name', '  valid_action  ');
-      await flushPromises();
-
-      // Parent (value owner) receives the TRIMMED name, as before the migration.
-      const events = wrapper.emitted('update:name') as any[];
-      expect(events[events.length - 1]).toEqual(['valid_action']);
-
-      // A whitespace-padded valid name still passes (schema .trim() → was rejected
-      // by the method-name regex before the fix).
-      await submit(wrapper);
-      expect((wrapper.vm as any).form.state.isValid).toBe(true);
-      expect(wrapper.emitted('save')).toBeTruthy();
-    });
-  });
-
-  describe('Event wiring', () => {
-    it('emits back when the back button is clicked', async () => {
-      wrapper = createWrapper();
-      await wrapper.find('[data-test="add-script-back-btn"]').trigger('click');
-      expect(wrapper.emitted('back')).toBeTruthy();
-    });
-
-    it('emits cancel when the cancel button is clicked', async () => {
-      wrapper = createWrapper();
-      await wrapper.find('[data-test="add-script-cancel-btn"]').trigger('click');
-      expect(wrapper.emitted('cancel')).toBeTruthy();
-    });
-
-    it('toggles fullscreen when the fullscreen button is clicked', async () => {
-      wrapper = createWrapper();
-      await wrapper.find('[data-test="add-script-fullscreen-btn"]').trigger('click');
-      expect(mockToggleFullscreen).toHaveBeenCalled();
-    });
-
-    it('does not emit save on a plain button click without submit', async () => {
-      // Sanity: clicking cancel/back must never emit save.
-      wrapper = createWrapper({ name: 'valid_action' });
-      await wrapper.find('[data-test="add-script-cancel-btn"]').trigger('click');
-      expect(wrapper.emitted('save')).toBeFalsy();
-    });
-  });
-
-  describe('Edge cases', () => {
-    it('handles a very long action name', async () => {
-      const longName = 'a'.repeat(100);
-      wrapper = createWrapper({ name: longName });
-      await submit(wrapper);
-      // Long but valid method name → passes (no length cap in the rule).
-      expect((wrapper.vm as any).form.state.isValid).toBe(true);
-    });
-  });
-});
diff --git a/web/src/components/actionScripts/ScriptToolbar.vue b/web/src/components/actionScripts/ScriptToolbar.vue
deleted file mode 100644
index be1bd30bf7..0000000000
--- a/web/src/components/actionScripts/ScriptToolbar.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<template>
-  <!-- Inline form (no dialog): the Save button lives INSIDE the <OForm>, so it
-       is `type="submit"` and Enter submits natively — no `form-id` needed. The
-       OForm's <form> element carries the toolbar layout classes so the
-       justify-between row is preserved. -->
-  <OForm
-    :form="form"
-    v-slot="{ isSubmitting }"
-    data-test="add-script-toolbar"
-    class="pb-1.5 w-full flex justify-between items-center"
-  >
-    <div class="flex items-center">
-      <div class="mr-2">
-        <div
-          data-test="add-script-back-btn"
-          class="flex justify-center items-center cursor-pointer"
-          style="
-            border: 1.5px solid;
-            border-radius: 50%;
-            width: 22px;
-            height: 22px;
-          "
-          title="Go Back"
-          @click="redirectToScripts"
-        >
-          <OIcon name="arrow-back-ios-new" size="xs" />
-        </div>
-      </div>
-      <div class="text-lg w-full mr-3">
-        Add Action
-      </div>
-      <div>
-        <div class="flex items-center">
-          <OFormInput
-            data-test="add-script-name-input"
-            name="name"
-            :label="t('actions.name')"
-            required
-            class="p-0 w-full"
-            :readonly="disableName"
-            :disabled="disableName"
-            style="min-width: 300px"
-          />
-        </div>
-      </div>
-    </div>
-    <div data-test="add-script-actions" class="flex items-center gap-2">
-      <OButton
-        data-test="add-script-fullscreen-btn"
-        v-close-popup="true"
-        variant="outline"
-        size="sm"
-        @click="handleFullScreen"
-        ><OIcon name="fullscreen" size="sm" class="mr-1" />{{
-          t("common.fullscreen")
-        }}</OButton
-      >
-      <OButton
-        data-test="add-script-save-btn"
-        variant="primary"
-        size="sm-action"
-        type="submit"
-        :loading="isSubmitting"
-        >{{ t("actions.save") }}</OButton
-      >
-      <OButton
-        data-test="add-script-cancel-btn"
-        variant="outline-destructive"
-        size="sm-action"
-        :disabled="isSubmitting"
-        @click="emit('cancel')"
-        >{{ t("common.cancel") }}</OButton
-      >
-    </div>
-  </OForm>
-</template>
-<script setup lang="ts">
-import { watch } from "vue";
-import { useI18n } from "vue-i18n";
-import OButton from "@/lib/core/Button/OButton.vue";
-import OForm from "@/lib/forms/Form/OForm.vue";
-import { useOForm } from "@/lib/forms/Form/useOForm";
-import OFormInput from "@/lib/forms/Input/OFormInput.vue";
-import OIcon from "@/lib/core/Icon/OIcon.vue";
-import { toggleFullscreen } from "@/utils/dom";
-import {
-  makeScriptToolbarSchema,
-  type ScriptToolbarForm,
-} from "./ScriptToolbar.schema";
-
-const { t } = useI18n();
-
-const props = defineProps({
-  name: {
-    type: String,
-    required: true,
-  },
-  disableName: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(["test", "save", "update:name", "back", "cancel"]);
-
-// @submit fires ONLY once the Zod schema passes (name required + method-name
-// regex), so emitting `save` here preserves the old contract — "emit save only
-// after the form validates" — without a hand-rolled validate().
-const onSubmit = (_value: ScriptToolbarForm) => {
-  emit("save");
-};
-
-// ── Rule ③ OWNER pattern ─────────────────────────────────────────────────────
-// This component OWNS the <OForm>, so it creates the form headlessly with
-// useOForm and reads it reactively via form.useStore — NO `form.store.subscribe`
-// mirror, NO parallel ref. The form is the single source of truth; the parent
-// keeps its canonical copy via the `update:name` contract. Seeded from the
-// parent-owned `name`; handed down via <OForm :form="form">.
-const form = useOForm<ScriptToolbarForm>({
-  defaultValues: { name: props.name ?? "" },
-  schema: makeScriptToolbarSchema(t),
-  onSubmit,
-});
-
-// Mirror the form-owned `name` OUT to the parent (update:name) — a one-way emit
-// driven by the reactive form.useStore read (NOT store.subscribe). The guard
-// prevents an emit/prop echo loop with the reverse watch below.
-const formName = form.useStore((s: any) => s.values.name);
-watch(formName, (v) => {
-  // Emit the TRIMMED value — parity with the pre-migration `v-model.trim`, which
-  // stripped surrounding whitespace before handing the name to the parent (the
-  // canonical value owner). Schema `.trim()` only affects validation, not the
-  // stored form value, so trim at the emit too.
-  const next = ((v ?? "") as string).trim();
-  if (next !== (props.name ?? "")) emit("update:name", next);
-});
-
-// Keep the form in sync when the parent changes `name` externally (e.g. async
-// prefill). Watching the EXTERNAL source → setFieldValue is the sanctioned
-// prefill path; `dontUpdateMeta` avoids marking the field touched/dirty (no
-// premature re-validation / post-save flash).
-watch(
-  () => props.name,
-  (v) => {
-    if ((form.state.values?.name ?? "") !== (v ?? "")) {
-      form.setFieldValue("name", v ?? "", { dontUpdateMeta: true });
-    }
-  },
-);
-
-const handleFullScreen = () => {
-  toggleFullscreen();
-};
-
-const redirectToScripts = () => {
-  emit("back");
-};
-</script>
diff --git a/web/src/components/ai-assistant/welcome/CapabilityCards.vue b/web/src/components/ai-assistant/welcome/CapabilityCards.vue
index 78430d4f23..321f89330d 100644
--- a/web/src/components/ai-assistant/welcome/CapabilityCards.vue
+++ b/web/src/components/ai-assistant/welcome/CapabilityCards.vue
@@ -10,13 +10,13 @@ const emit = defineEmits<{ (e: "select", prompt: string): void }>();
 </script>
 
 <template>
-  <div class="grid w-full gap-[0.875rem] [grid-template-columns:repeat(4,minmax(0,1fr))] max-[64rem]:[grid-template-columns:repeat(2,minmax(0,1fr))] max-[40rem]:[grid-template-columns:1fr]">
+  <div class="grid w-full gap-3.5 [grid-template-columns:repeat(4,minmax(0,1fr))] max-[64rem]:[grid-template-columns:repeat(2,minmax(0,1fr))] max-[40rem]:[grid-template-columns:1fr]">
     <OCard
       v-for="card in CAPABILITY_CARDS"
       :key="card.id"
       role="button"
       tabindex="0"
-      class="capability-card group/card relative py-4 px-4 pb-[1.125rem] border border-(--color-border-default) rounded-xl cursor-pointer bg-(--color-card-bg) transition-[border-color,box-shadow,translate,background] duration-200 ease-[ease] isolate overflow-hidden min-h-[132px] [--accent:123,97,255] hover:border-[rgba(var(--accent),0.5)] hover:-translate-y-[3px] hover:shadow-[0_1px_2px_rgba(0,0,0,0.04),0_12px_28px_-10px_rgba(var(--accent),0.35)] focus-visible:outline-none focus-visible:border-[rgba(var(--accent),0.7)] focus-visible:shadow-[0_0_0_2px_rgba(var(--accent),0.45)]"
+      class="capability-card group/card relative py-4 px-4 pb-[1.125rem] border border-border-default rounded-default cursor-pointer bg-card-bg transition-[border-color,box-shadow,translate,background] duration-200 ease-[ease] isolate overflow-hidden min-h-33 [--accent:123,97,255] [--card-tint:linear-gradient(155deg,rgba(var(--accent),0.1)_0%,rgba(var(--accent),0.02)_40%,transparent_70%)] hover:border-[rgba(var(--accent),0.5)] hover:-translate-y-[3px] hover:shadow-[0_1px_2px_rgba(0,0,0,0.04),0_12px_28px_-10px_rgba(var(--accent),0.35)] focus-visible:outline-none focus-visible:border-[rgba(var(--accent),0.7)] focus-visible:shadow-[0_0_0_2px_rgba(var(--accent),0.45)]"
       :class="{
         '[--accent:123,97,255]': card.id === 'query',
         '[--accent:245,158,11]': card.id === 'incident',
@@ -28,23 +28,23 @@ const emit = defineEmits<{ (e: "select", prompt: string): void }>();
       @keydown.space.prevent="emit('select', t(`aiAssistant.capabilities.${card.id}.prompt`))"
     >
       <span
-        class="capability-card__glow absolute [-inset-px] rounded-[inherit] bg-[linear-gradient(135deg,rgba(var(--accent),0.45),rgba(var(--accent),0.05)_60%)] opacity-0 transition-opacity duration-[250ms] ease-[ease] pointer-events-none z-[-1] blur-[8px] group-hover/card:opacity-100"
+        class="capability-card__glow absolute [-inset-px] rounded-default bg-[linear-gradient(135deg,rgba(var(--accent),0.45),rgba(var(--accent),0.05)_60%)] opacity-0 transition-opacity duration-[250ms] ease-[ease] pointer-events-none z-[-1] blur-[8px] group-hover/card:opacity-100"
         aria-hidden="true"
       ></span>
       <div
-        class="capability-card__icon relative z-[1] inline-flex items-center justify-center w-[38px] h-[38px] rounded-[0.625rem] mb-[0.625rem] shadow-[inset_0_0_0_1px_rgba(var(--accent),0.18)]"
+        class="capability-card__icon relative z-[1] inline-flex items-center justify-center w-9.5 h-9.5 rounded-default mb-2.5 shadow-[inset_0_0_0_1px_rgba(var(--accent),0.18)]"
         :class="card.iconBgClass"
       >
         <OIcon :name="card.icon" size="md" :class="card.iconColorClass" />
       </div>
-      <div class="capability-card__title relative z-[1] m-0 text-sm font-semibold leading-[1.3] text-[var(--color-typography-body)] whitespace-nowrap overflow-hidden text-ellipsis">
+      <div class="capability-card__title relative z-[1] m-0 text-sm font-semibold leading-[1.3] text-typography-body whitespace-nowrap overflow-hidden text-ellipsis">
         {{ t(`aiAssistant.capabilities.${card.id}.title`) }}
       </div>
-      <div class="capability-card__desc relative z-[1] mt-[0.375rem] mb-0 text-xs leading-[1.45] text-[var(--color-text-secondary)]">
+      <div class="capability-card__desc relative z-[1] mt-1.5 mb-0 text-xs leading-[1.45] text-text-secondary">
         {{ t(`aiAssistant.capabilities.${card.id}.description`) }}
       </div>
       <span
-        class="capability-card__chevron z-[1] absolute top-[0.875rem] right-[0.875rem] w-[22px] h-[22px] inline-flex items-center justify-center rounded-full bg-[rgba(var(--accent),0.15)] text-[rgba(var(--accent),1)] opacity-0 translate-x-[-4px] translate-y-[4px] transition-[opacity,translate] duration-200 ease-[ease] group-hover/card:opacity-100 group-hover/card:translate-x-0 group-hover/card:translate-y-0"
+        class="capability-card__chevron z-[1] absolute top-3.5 right-3.5 w-5.5 h-5.5 inline-flex items-center justify-center rounded-full bg-[rgba(var(--accent),0.15)] text-[rgba(var(--accent),1)] opacity-0 translate-x-[-4px] translate-y-[4px] transition-[opacity,translate] duration-200 ease-[ease] group-hover/card:opacity-100 group-hover/card:translate-x-0 group-hover/card:translate-y-0"
         aria-hidden="true"
       >
         <OIcon name="arrow-forward" size="xs" />
@@ -53,18 +53,17 @@ const emit = defineEmits<{ (e: "select", prompt: string): void }>();
   </div>
 </template>
 
-<style>
+<style scoped>
+/* keep(brand): decorative per-card accent gradient overlay driven by the
+   inline --accent channel triple (built in the template as the --card-tint
+   custom property so no colour literal lives in this block); the accent-alpha
+   idiom matches the sibling glow/chevron elements and is not a design token. */
 .capability-card::before {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
-  background: linear-gradient(
-    155deg,
-    rgba(var(--accent), 0.1) 0%,
-    rgba(var(--accent), 0.02) 40%,
-    transparent 70%
-  );
+  background: var(--card-tint);
   pointer-events: none;
   z-index: 0;
 }
diff --git a/web/src/components/ai-assistant/welcome/O2AIHomeWelcome.vue b/web/src/components/ai-assistant/welcome/O2AIHomeWelcome.vue
index 462eda2567..3863806da1 100644
--- a/web/src/components/ai-assistant/welcome/O2AIHomeWelcome.vue
+++ b/web/src/components/ai-assistant/welcome/O2AIHomeWelcome.vue
@@ -16,7 +16,7 @@ function onSelect(prompt: string) {
       aria-hidden="true"
       class="absolute top-[8%] left-1/2 -translate-x-1/2 w-[min(820px,70%)] h-80 bg-[radial-gradient(closest-side,rgba(123,97,255,0.22),rgba(236,72,153,0.1)_45%,rgba(245,158,11,0.06)_65%,transparent_75%)] blur-[56px] pointer-events-none z-0"
     ></div>
-    <div class="o2-ai-home-welcome__inner relative z-1 w-full max-w-[960px] flex flex-col items-center gap-6 px-6 pt-6 pb-4">
+    <div class="o2-ai-home-welcome__inner relative z-1 w-full max-w-240 flex flex-col items-center gap-6 px-6 pt-6 pb-4">
       <WelcomeGreeting />
       <CapabilityCards @select="onSelect" />
       <PromptSuggestions @select="onSelect" />
diff --git a/web/src/components/ai-assistant/welcome/PromptSuggestions.vue b/web/src/components/ai-assistant/welcome/PromptSuggestions.vue
index 483686b7a6..40bd4e0f9c 100644
--- a/web/src/components/ai-assistant/welcome/PromptSuggestions.vue
+++ b/web/src/components/ai-assistant/welcome/PromptSuggestions.vue
@@ -14,7 +14,7 @@ function selectPrompt(id: string) {
 
 <template>
   <section class="flex flex-col gap-3 w-full">
-    <div class="m-0 self-center text-xs font-normal text-(--color-typography-meta) opacity-75">
+    <div class="m-0 self-center text-xs font-normal text-typography-meta opacity-75">
       {{ t("aiAssistant.welcome.tryOneOfThese") }}
     </div>
 
@@ -23,16 +23,16 @@ function selectPrompt(id: string) {
         v-for="s in PROMPT_SUGGESTIONS"
         :key="s.id"
         type="button"
-        class="suggestion-chip group relative inline-flex items-center gap-2 py-2 px-[0.625rem] pl-3 rounded-lg border border-(--color-border-default) bg-[linear-gradient(180deg,color-mix(in_srgb,var(--color-card-bg)_100%,transparent),color-mix(in_srgb,var(--color-card-bg)_92%,transparent))] text-(--color-text-secondary) text-xs leading-tight text-left cursor-pointer [transition:border-color_0.15s_ease,background_0.15s_ease,color_0.15s_ease,transform_0.15s_ease,box-shadow_0.15s_ease] overflow-hidden hover:border-[rgba(123,97,255,0.5)] hover:text-(--color-text-primary) hover:-translate-y-px hover:shadow-[0_1px_2px_rgba(0,0,0,0.04),0_6px_16px_-8px_rgba(123,97,255,0.3)] focus-visible:outline-none focus-visible:border-[rgba(123,97,255,0.7)] focus-visible:shadow-[0_0_0_2px_rgba(123,97,255,0.4)]"
+        class="suggestion-chip group relative inline-flex items-center gap-2 py-2 px-2.5 pl-3 rounded-default border border-border-default bg-[linear-gradient(180deg,color-mix(in_srgb,var(--color-card-bg)_100%,transparent),color-mix(in_srgb,var(--color-card-bg)_92%,transparent))] text-text-secondary text-xs leading-tight text-left cursor-pointer [transition:border-color_0.15s_ease,background_0.15s_ease,color_0.15s_ease,transform_0.15s_ease,box-shadow_0.15s_ease] overflow-hidden hover:border-[rgba(123,97,255,0.5)] hover:text-text-body hover:-translate-y-px hover:shadow-[0_1px_2px_rgba(0,0,0,0.04),0_6px_16px_-8px_rgba(123,97,255,0.3)] focus-visible:outline-none focus-visible:border-[rgba(123,97,255,0.7)] focus-visible:shadow-[0_0_0_2px_rgba(123,97,255,0.4)]"
         @click="selectPrompt(s.id)"
       >
-        <span class="suggestion-chip__icon inline-flex items-center justify-center shrink-0 w-[22px] h-[22px] rounded-md bg-[color-mix(in_srgb,var(--color-border-default)_40%,transparent)] text-(--color-typography-meta) [transition:background_0.15s_ease,color_0.15s_ease] group-hover:bg-[rgba(123,97,255,0.15)] group-hover:text-[#7b61ff]">
+        <span class="suggestion-chip__icon inline-flex items-center justify-center shrink-0 w-5.5 h-5.5 rounded-default bg-[color-mix(in_srgb,var(--color-border-default)_40%,transparent)] text-typography-meta [transition:background_0.15s_ease,color_0.15s_ease] group-hover:bg-[rgba(123,97,255,0.15)] group-hover:text-ai-accent">
           <OIcon :name="s.icon" size="sm" />
         </span>
         <span class="flex-1 whitespace-nowrap overflow-hidden text-ellipsis">
           {{ t(`aiAssistant.suggestions.${s.id}`) }}
         </span>
-        <span class="suggestion-chip__arrow inline-flex items-center justify-center shrink-0 text-(--color-typography-meta) opacity-0 -translate-x-1 [transition:opacity_0.15s_ease,transform_0.15s_ease,color_0.15s_ease] group-hover:opacity-100 group-hover:translate-x-0 group-hover:text-[#7b61ff]" aria-hidden="true">
+        <span class="suggestion-chip__arrow inline-flex items-center justify-center shrink-0 text-typography-meta opacity-0 -translate-x-1 [transition:opacity_0.15s_ease,transform_0.15s_ease,color_0.15s_ease] group-hover:opacity-100 group-hover:translate-x-0 group-hover:text-ai-accent" aria-hidden="true">
           <OIcon name="arrow-forward" size="xs" />
         </span>
       </button>
diff --git a/web/src/components/ai-assistant/welcome/WelcomeGreeting.vue b/web/src/components/ai-assistant/welcome/WelcomeGreeting.vue
index d0ac550083..d23e9a71ac 100644
--- a/web/src/components/ai-assistant/welcome/WelcomeGreeting.vue
+++ b/web/src/components/ai-assistant/welcome/WelcomeGreeting.vue
@@ -4,6 +4,7 @@ import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
 import { useGreeting } from "./useGreeting";
 import { getImageURL } from "@/utils/zincutils";
+import { useTheme } from "@/composables/useTheme";
 
 const store = useStore();
 const { t } = useI18n();
@@ -13,69 +14,78 @@ const role = computed<string>(() => store.state.currentuser?.role ?? "");
 
 const { greeting } = useGreeting(() => email.value);
 
+const { isDark } = useTheme();
 const logoSrc = computed(() =>
-  store.state.theme === "dark"
+  isDark.value
     ? getImageURL("images/common/o2_ai_logo_dark.svg")
     : getImageURL("images/common/o2_ai_logo.svg"),
 );
 </script>
 
 <template>
-  <header class="welcome-hero flex flex-col items-center text-center gap-[0.625rem] max-w-[44rem]">
-    <div class="welcome-hero__row flex items-center gap-[0.875rem]">
+  <header class="welcome-hero flex flex-col items-center text-center gap-2.5 max-w-[44rem]">
+    <div class="welcome-hero__row flex items-center gap-3.5">
       <div class="welcome-hero__logo-wrap relative inline-flex">
         <span class="welcome-hero__logo-halo absolute inset-[-18px] rounded-full bg-[radial-gradient(closest-side,rgba(123,97,255,0.35),rgba(245,158,11,0.12)_55%,transparent_70%)] blur-[14px] pointer-events-none z-0" aria-hidden="true"></span>
         <img :src="logoSrc" alt="O2 Assistant" class="welcome-hero__logo relative z-1 w-14 h-14" />
       </div>
 
       <div class="welcome-hero__heading-block flex items-center">
-        <div class="welcome-hero__title m-0 text-[32px] font-bold tracking-[-0.01em] leading-[1.15] text-[var(--color-typography-body)] flex items-center gap-2">
+        <div class="welcome-hero__title m-0 text-3xl font-bold tracking-[-0.01em] leading-[1.15] text-typography-body flex items-center gap-2">
           {{ greeting }}
-          <span class="welcome-hero__wave text-[26px] leading-none inline-block [animation:wave_2.4s_ease-in-out_0.4s_2] [transform-origin:70%_70%]" aria-hidden="true">👋</span>
+          <span class="welcome-hero__wave text-2xl leading-none inline-block [transform-origin:70%_70%]" aria-hidden="true">👋</span>
         </div>
       </div>
     </div>
 
-    <div class="welcome-hero__tagline mt-1 text-[13.5px] leading-[1.6] text-[var(--color-typography-meta)] max-w-[38rem] m-0">
+    <div class="welcome-hero__tagline mt-1 text-sm leading-[1.6] text-typography-meta max-w-[38rem] m-0">
       {{ t("aiAssistant.welcome.taglineLead") }}
-      <span class="welcome-hero__highlight font-semibold bg-[linear-gradient(90deg,#f59e0b,#ec4899,#7b61ff)] [background-clip:text] [-webkit-background-clip:text] text-transparent">{{
+      <span class="welcome-hero__highlight font-semibold bg-[image:var(--color-gradient-brand-ribbon)] [background-clip:text] [-webkit-background-clip:text] text-transparent">{{
         t("aiAssistant.welcome.taglineHighlight")
       }}</span
       >{{ t("aiAssistant.welcome.taglineTail") }}
-      <span class="welcome-hero__code welcome-hero__code--sql font-[var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace)] text-xs font-semibold py-[1px] px-[6px] rounded tracking-[0.01em] text-[#7b61ff] bg-[rgba(123,97,255,0.1)]">{{
+      <span class="welcome-hero__code welcome-hero__code--sql font-mono text-xs font-semibold py-px px-1.5 rounded-default tracking-[0.01em] text-lang-sql-text bg-lang-sql-bg">{{
         t("aiAssistant.welcome.taglineSql")
       }}</span>,
-      <span class="welcome-hero__code welcome-hero__code--vrl font-[var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace)] text-xs font-semibold py-[1px] px-[6px] rounded tracking-[0.01em] text-[#f59e0b] bg-[rgba(245,158,11,0.12)]">{{
+      <span class="welcome-hero__code welcome-hero__code--vrl font-mono text-xs font-semibold py-px px-1.5 rounded-default tracking-[0.01em] text-lang-vrl-text bg-lang-vrl-bg">{{
         t("aiAssistant.welcome.taglineVrl")
       }}</span>
       and
-      <span class="welcome-hero__code welcome-hero__code--promql font-[var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace)] text-xs font-semibold py-[1px] px-[6px] rounded tracking-[0.01em] text-[#10b981] bg-[rgba(16,185,129,0.12)]">{{
+      <span class="welcome-hero__code welcome-hero__code--promql font-mono text-xs font-semibold py-px px-1.5 rounded-default tracking-[0.01em] text-lang-promql-text bg-lang-promql-bg">{{
         t("aiAssistant.welcome.taglinePromql")
       }}</span>
       — {{ t("aiAssistant.welcome.taglineAnd") }}
     </div>
 
-    <div v-if="email" class="welcome-hero__meta inline-flex flex-wrap items-center justify-center gap-x-2 gap-y-[0.375rem] mt-[0.375rem] py-[0.375rem] px-3 rounded-full bg-[color-mix(in_srgb,var(--color-border-default)_30%,transparent)] text-[11.5px]">
+    <div v-if="email" class="welcome-hero__meta inline-flex flex-wrap items-center justify-center gap-x-2 gap-y-1.5 mt-1.5 py-1.5 px-3 rounded-full bg-[color-mix(in_srgb,var(--color-border-default)_30%,transparent)] text-2xs">
       <span class="welcome-hero__meta-item inline-flex items-center gap-1">
-        <span class="welcome-hero__meta-label text-[var(--color-typography-meta)]">{{
+        <span class="welcome-hero__meta-label text-typography-meta">{{
           t("aiAssistant.welcome.signedInAs")
         }}</span>
-        <span class="welcome-hero__meta-value text-[var(--color-typography-body)] font-semibold">{{ email }}</span>
+        <span class="welcome-hero__meta-value text-typography-body font-semibold">{{ email }}</span>
       </span>
-      <span v-if="role" class="welcome-hero__meta-dot text-[var(--color-typography-meta)] opacity-50" aria-hidden="true"
+      <span v-if="role" class="welcome-hero__meta-dot text-typography-meta opacity-50" aria-hidden="true"
         >·</span
       >
       <span v-if="role" class="welcome-hero__meta-item inline-flex items-center gap-1">
-        <span class="welcome-hero__meta-label text-[var(--color-typography-meta)]">{{
+        <span class="welcome-hero__meta-label text-typography-meta">{{
           t("aiAssistant.welcome.role")
         }}</span>
-        <span class="welcome-hero__meta-value text-[var(--color-typography-body)] font-semibold">{{ role }}</span>
+        <span class="welcome-hero__meta-value text-typography-body font-semibold">{{ role }}</span>
       </span>
     </div>
   </header>
 </template>
 
-<style>
+<style scoped>
+/* keep(keyframes): the 👋 wave is this component's alone. The `animation` must be
+   declared here rather than as a template `[animation:…]` utility — Vue's scoped
+   compiler renames the keyframe and this declaration together, but never rewrites
+   class strings in the template. */
+.welcome-hero__wave {
+  animation: wave 2.4s ease-in-out 0.4s 2;
+}
+
 @keyframes wave {
   0%,
   100% {
@@ -95,3 +105,4 @@ const logoSrc = computed(() =>
   }
 }
 </style>
+
diff --git a/web/src/components/ai-assistant/welcome/welcomeContent.ts b/web/src/components/ai-assistant/welcome/welcomeContent.ts
index fd7631bd24..d4fb6ef3c0 100644
--- a/web/src/components/ai-assistant/welcome/welcomeContent.ts
+++ b/web/src/components/ai-assistant/welcome/welcomeContent.ts
@@ -1,6 +1,5 @@
 /**
  * Static content for the O2 Assistant home-tab welcome screen.
- * Keeping this colocated keeps prompts editable without touching templates.
  */
 
 export interface CapabilityCard {
diff --git a/web/src/components/ai_toolsets/AddAiToolset.schema.ts b/web/src/components/ai_toolsets/AddAiToolset.schema.ts
index 9adad27811..196d90f81d 100644
--- a/web/src/components/ai_toolsets/AddAiToolset.schema.ts
+++ b/web/src/components/ai_toolsets/AddAiToolset.schema.ts
@@ -8,30 +8,18 @@
 // active kind, but switching kind never reshapes the form data. Factory keeps
 // the messages i18n-driven (pass useI18n's `t`).
 //
-// Restores the BEFORE validation baseline for this form
-// ("4 blocks → 6 sub-rules"):
-//   • name : required + /^[a-zA-Z0-9_-]+$/ + max 256
-//   • kind : required
-//   • mcp.url      : required when kind === "mcp"   (superRefine)
-//   • cli.command  : required when kind === "cli"   (superRefine)
-//   • skill.content: required when kind === "skill" (superRefine)
-// The skill-content rule was an imperative @submit check in the BEFORE state;
-// its Monaco editor has no OForm* equivalent, but the VALUE is bridged into the
-// form via setFieldValue, so the rule now lives here like every other field.
-//
-// Validation TIMING is owned by OForm (submit-then-change via revalidateLogic);
-// this file only describes WHAT is valid.
+// Validation timing is owned by OForm (submit-then-change via revalidateLogic);
+// this file only describes what is valid.
 
 import { z } from "zod";
 
-// Name char rule from the BEFORE baseline: letters, digits, hyphen, underscore.
+// Name char rule: letters, digits, hyphen, underscore.
 export const aiToolsetNameRegex = /^[a-zA-Z0-9_-]+$/;
 
 // One row of a key/value secret list (mcp headers, cli env vars). All fields are
 // free-form and optional (a blank starter row is valid — only non-empty rows are
 // persisted on save). `visible` is the per-row password-visibility UI flag; it is
-// form-owned bookkeeping (like the playbook's row `uuid`) and excluded from the
-// saved payload.
+// form-owned bookkeeping excluded from the saved payload.
 export const secretRowSchema = z.object({
   key: z.string().optional(),
   value: z.string().optional(),
@@ -88,9 +76,9 @@ export const makeAddAiToolsetSchema = (t: (_key: string) => string) =>
       }),
     })
     .superRefine((val, ctx) => {
-      // mcp.url required when kind === "mcp". Bare empty check (NO trim) to match
-      // the BEFORE baseline's `!url` — main accepted a whitespace-only url. (Note
-      // main's asymmetry: skill.content below DOES trim; url/command do not.)
+      // mcp.url required when kind === "mcp". Bare empty check (NO trim): a
+      // whitespace-only url is accepted. (Note the asymmetry: skill.content below
+      // DOES trim; url/command do not.)
       if (val.kind === "mcp" && !String(val.mcp?.url ?? "")) {
         ctx.addIssue({
           code: z.ZodIssueCode.custom,
@@ -98,9 +86,8 @@ export const makeAddAiToolsetSchema = (t: (_key: string) => string) =>
           message: t("aiToolset.mcpUrlRequired"),
         });
       }
-      // cli.command required when kind === "cli". Bare empty check (NO trim) to
-      // match the BEFORE baseline's `!command` — main accepted a whitespace-only
-      // command.
+      // cli.command required when kind === "cli". Bare empty check (NO trim): a
+      // whitespace-only command is accepted.
       if (val.kind === "cli" && !String(val.cli?.command ?? "")) {
         ctx.addIssue({
           code: z.ZodIssueCode.custom,
@@ -108,9 +95,8 @@ export const makeAddAiToolsetSchema = (t: (_key: string) => string) =>
           message: t("aiToolset.cliCommandRequired"),
         });
       }
-      // skill.content required when kind === "skill" (BEFORE: imperative check in
-      // onSubmit that used `!content.trim()`). Trim is KEPT here to match main —
-      // unlike url/command above, main's skill check trimmed.
+      // skill.content required when kind === "skill". Trim IS applied here —
+      // unlike url/command above.
       if (val.kind === "skill" && !String(val.skill?.content ?? "").trim()) {
         ctx.addIssue({
           code: z.ZodIssueCode.custom,
diff --git a/web/src/components/ai_toolsets/AddAiToolset.vue b/web/src/components/ai_toolsets/AddAiToolset.vue
index 8637c90fb4..63204fc8b2 100644
--- a/web/src/components/ai_toolsets/AddAiToolset.vue
+++ b/web/src/components/ai_toolsets/AddAiToolset.vue
@@ -14,17 +14,16 @@ You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <div class="p-0" style="min-height: inherit">
-    <!-- Header -->
-    <AppPageHeader
-      :title="isEditing ? t('aiToolset.update') : t('aiToolset.add')"
-      :back="{
-        label: t('aiToolset.header'),
-        onClick: () => $emit('cancel:hideform'),
-        dataTest: 'ai-toolset-back-btn',
-      }"
-      class="shrink-0 px-4 border-b border-border-default"
-    />
+  <OPageLayout
+    class="min-h-[inherit]"
+    :title="isEditing ? t('aiToolset.update') : t('aiToolset.add')"
+    :back="{
+      label: t('aiToolset.header'),
+      onClick: () => $emit('cancel:hideform'),
+      dataTest: 'ai-toolset-back-btn',
+    }"
+    bleed
+  >
 
     <!-- Inline page form. The form is created in setup() via useOForm (headless)
          so this owner can read `kind`/arrays/skill content reactively to drive
@@ -36,7 +35,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       :form="form"
       v-slot="{ isSubmitting }"
     >
-      <div style="height: calc(100vh - 120px); overflow: auto">
+      <div style="height: calc(100vh - 120px)" class="overflow-auto">
         <div class="max-w-2xl mx-4 mt-4">
           <!-- Name -->
           <div class="o2-input mb-4">
@@ -147,7 +146,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 {{ t("aiToolset.cliConfig") }}
               </div>
               <div class="flex items-center gap-1">
-                <span class="text-xs text-gray-400"
+                <span class="text-xs text-text-muted"
                   >{{ t("aiToolset.presets") }}:</span
                 >
                 <OTag
@@ -274,12 +273,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   <OIcon name="delete" size="xs" />
                 </OButton>
               </div>
-              <div class="text-xs text-gray-500 mb-1">
+              <div class="text-xs text-text-secondary mb-1">
                 {{ t("aiToolset.credContentHint") }}
               </div>
               <query-editor
                 :editor-id="`cred-file-editor-${idx}`"
-                class="w-full min-h-50! rounded-[5px] border border-(--o2-border-color) resize-y overflow-auto"
+                class="w-full min-h-50! rounded-default border border-card-glass-border resize-y overflow-auto"
                 language="yaml"
                 :query="cred.value"
                 @update:query="(v: string) => setCredValue(idx, v)"
@@ -303,20 +302,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <div class="text-base font-medium font-semibold mb-2">
               {{ t("aiToolset.skillConfig") }}
             </div>
-            <div class="mb-1 text-xs text-gray-400">
+            <div class="mb-1 text-xs text-text-muted">
               {{ t("aiToolset.skillContent") }} *
             </div>
             <query-editor
               data-test="ai-toolset-skill-content"
               editor-id="skill-content-editor"
-              class="w-full min-h-100! rounded-[5px] border border-(--o2-border-color) resize-y overflow-auto mb-3"
+              class="w-full min-h-100! rounded-default border border-card-glass-border resize-y overflow-auto mb-3"
               language="markdown"
               :query="skillContent"
               @update:query="(v: string) => setSkillContent(v)"
             />
             <div
               v-if="skillContentError"
-              class="text-red-500 text-xs mt-[-12px] mb-4"
+              class="text-error-500 text-xs -mt-3 mb-4"
             >
               {{ t("aiToolset.skillContentRequired") }}
             </div>
@@ -326,7 +325,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- Footer -->
         <div
           class="flex items-center gap-2 px-4 py-3 border-t border-border-default sticky bottom-0"
-          :class="store.state.theme === 'dark' ? 'bg-(--o2-primary-background)' : 'bg-white'"
+          :class="'bg-surface-base'"
         >
           <OButton
             data-test="ai-toolset-save-btn"
@@ -349,7 +348,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
       </div>
     </OForm>
-  </div>
+  </OPageLayout>
 </template>
 
 <script lang="ts">
@@ -372,7 +371,7 @@ import OFormInput from "@/lib/forms/Input/OFormInput.vue";
 import OFormTextarea from "@/lib/forms/Input/OFormTextarea.vue";
 import OFormSelect from "@/lib/forms/Select/OFormSelect.vue";
 import OFormSwitch from "@/lib/forms/Switch/OFormSwitch.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import { useOForm } from "@/lib/forms/Form/useOForm";
 import type { ToolsetKind } from "@/services/ai_toolsets";
 import { toast } from "@/lib/feedback/Toast/useToast";
@@ -389,7 +388,7 @@ const QueryEditor = defineAsyncComponent(
 export default defineComponent({
   name: "AddAiToolset",
   components: {
-    AppPageHeader,
+    OPageLayout,
     OTag,
     OButton,
     OIcon,
diff --git a/web/src/components/alerts/AddAlert.schema.ts b/web/src/components/alerts/AddAlert.schema.ts
index 6e98e1e867..b5bca61831 100644
--- a/web/src/components/alerts/AddAlert.schema.ts
+++ b/web/src/components/alerts/AddAlert.schema.ts
@@ -13,54 +13,25 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-// ════════════════════════════════════════════════════════════════════════════
-//  AddAlert orchestrator schema (Phase 4 — DESIGN Y owner).
+// AddAlert orchestrator schema.
 //
-//  AddAlert OWNS the ONE <OForm> for the whole wizard. The step children
-//  (QueryConfig, AlertSettings, Advanced, Deduplication) render as DESCENDANTS
-//  and bind their fields by nested `name=` into THIS form, so the ONE schema
-//  below must cover every nested path they bind. This file COMPOSES their
-//  exported rules (single source of truth — never re-hand-write them) and adds
-//  the topbar scalars:
+// AddAlert owns the ONE <OForm> for the whole wizard. The step children
+// (QueryConfig, AlertSettings, Advanced, Deduplication) render as descendants
+// and bind their fields by nested `name=` into THIS form, so the schema below
+// must cover every nested path they bind. This file composes their exported
+// rules (single source of truth) and adds the topbar scalars:
 //
-//    • name         — required (min 1) + no ALERT_NAME_UNSUPPORTED_CHARS (§4)
-//    • stream_type  — required
-//    • stream_name  — required (min 1)
-//    + QueryConfig  — queryConfigSchema (trigger_condition.*, query_condition.*
-//                     incl. refineConditionsTree, promql §4 restores, aggregation,
-//                     group_by[]) — self-gated by its `_meta` discriminators.
-//    + AlertSettings — createAlertSettingsSchema(isRealTime) (silence ≥ 0,
-//                     destinations ≥ 1, period ≥ 1 SCHEDULED-only).
+//   • name         — required (min 1) + no ALERT_NAME_UNSUPPORTED_CHARS
+//   • stream_type  — required
+//   • stream_name  — required (min 1)
+//   + QueryConfig  — queryConfigSchema, self-gated by its `_meta` discriminators.
+//   + AlertSettings — createAlertSettingsSchema(isRealTime) (silence ≥ 0,
+//                     destinations ≥ 1, period ≥ 1 scheduled-only).
 //
-//  DISCRIMINATOR — `is_real_time`: "false" (scheduled) | "true" (realtime) |
-//  "anomaly". The QueryConfig sub-schema already self-gates realtime-vs-scheduled
-//  via `_meta.isRealTime`; AlertSettings' period rule is applied scheduled-only
-//  by choosing createAlertSettingsSchema(isRealTime). The ANOMALY branch is a
-//  NEAR-pass-through: AnomalyDetectionConfig OWNS its OWN <OForm>+schema+validate()
-//  (verified live — it calls useOForm unconditionally, re-provides its own
-//  context, and writes back to props.config), and the anomaly SAVE path
-//  (saveAnomalyDetection) bypasses this form entirely and reads `anomalyConfig`.
-//  Composing the DETECTION-CONFIG fields here would be dead code (this form never
-//  holds them), so the anomaly branch enforces only `name` — which this form DOES
-//  hold (the topbar OFormInput binds `name` in both modes, and the
-//  formData.name → anomalyConfig.name watcher in useAlertForm feeds the value
-//  saveAnomalyDetection reads).
-//
-//  `name` here is a RE-HOME, not a new rule (Rule ④): saveAnomalyDetection has
-//  always blocked a blank anomaly name, but only as an imperative toast — and a
-//  toast cannot paint a field, so the topbar highlighted nothing while the toast
-//  said "highlighted fields". Same rule, same message, now on the field. The
-//  blank check is deliberately the ONLY rule: the special-chars refine below is
-//  alert-only and adding it here would tighten anomaly vs. BEFORE.
-//  `stream_type`/`stream_name` stay unenforced in anomaly — unlike `name` those
-//  have NO pre-existing rule anywhere, so requiring them would be a real
-//  behavior change. Still OPEN (see the report's OPEN DECISION 7 note).
-//
-//  Rule ④ — the composition reuses the step schemas VERBATIM (import, never
-//  re-declare) so the step and the orchestrator can never drift. Numbers still
-//  come out of OFormInput as strings; the sub-schemas own their z.coerce.number()
-//  / raw-value checks (nothing tightened here).
-// ════════════════════════════════════════════════════════════════════════════
+// Discriminator `is_real_time`: "false" (scheduled) | "true" (realtime) |
+// "anomaly". The anomaly branch enforces only `name`; AnomalyDetectionConfig
+// owns its own <OForm>+schema+validate() and the anomaly save path
+// (saveAnomalyDetection) bypasses this form and reads `anomalyConfig`.
 
 import { z } from "zod";
 
@@ -71,43 +42,36 @@ import {
 } from "./steps/QueryConfig.schema";
 import { createAlertSettingsSchema } from "./steps/AlertSettings.schema";
 
-// ── Topbar messages are i18n-driven, resolved via the injected `t`:
-//     name required      → alerts.nameRequired
-//     name special chars → alerts.nameNoSpecialChars
-//     stream type        → alerts.validation.streamTypeRequired
-//     stream name        → alerts.validation.streamNameRequired
-//    (English values are byte-for-byte the pre-migration toast strings.) ──────
+// Topbar messages are i18n-driven, resolved via the injected `t`:
+//   name required      → alerts.nameRequired
+//   name special chars → alerts.nameNoSpecialChars
+//   stream type        → alerts.validation.streamTypeRequired
+//   stream name        → alerts.validation.streamNameRequired
 
-/** §4 restore — the exact regex useAlertForm used (RE_OFGA_UNSUPPORTED_NAME).
- *  Requiredness = min 1 AND this regex (truthy→Zod inversion, Rule ④). */
+/** Unsupported characters in an alert name. Requiredness = min 1 AND this regex. */
 export const ALERT_NAME_UNSUPPORTED_CHARS = /[:#?\s'"%&]+/;
 
 const isBlank = (v: unknown): boolean =>
   v === undefined || v === null || (typeof v === "string" && v.trim() === "");
 
-// ════════════════════════════════════════════════════════════════════════════
-//  Step-B field schemas (Phase 4b — the remaining wizard STEP children:
-//  Advanced / Deduplication / CompareWithPast). These are ADDITIVE and
-//  PERMISSIVE: none of these fields carried a required rule pre-migration, so
-//  nothing here tightens (Rule ④ parity — a previously-valid alert must still
-//  save). The step components bind these exact paths by nested `name=` into
-//  THIS orchestrator form (the composites below also drive the spec hosts).
-// ════════════════════════════════════════════════════════════════════════════
+// Step-B field schemas (Advanced / Deduplication / CompareWithPast wizard step
+// children). All optional/permissive. The step components bind these exact paths
+// by nested `name=` into THIS orchestrator form.
 
-/** One context-variable row. key/value are OPTIONAL (no pre-migration required
- *  rule — a blank row is allowed; getAlertPayload only copies non-blank key/value
- *  pairs into the payload object). `id` is kept for row identity in the help
- *  drawer / preview — it is NEVER used as the v-for `:key` (that must be the
- *  array index so an index-based `name=` binding survives a mid-list delete). */
+/** One context-variable row. key/value are optional (a blank row is allowed;
+ *  getAlertPayload only copies non-blank key/value pairs into the payload). `id`
+ *  is for row identity in the help drawer / preview — it is NEVER used as the
+ *  v-for `:key` (that must be the array index so an index-based `name=` binding
+ *  survives a mid-list delete). */
 export const contextAttributeRowSchema = z.object({
   id: z.string().optional(),
   key: z.string().optional(),
   value: z.string().optional(),
 });
 
-/** `context_attributes` as the array of key/value rows the FORM holds. The
+/** `context_attributes` as the array of key/value rows the form holds. The
  *  payload transform (getAlertPayload) folds this array → an object, dropping
- *  blank rows — so this array shape is the form-side single source of truth. */
+ *  blank rows. */
 export const contextAttributesSchema = z.array(contextAttributeRowSchema);
 
 /** Advanced-tab composite (Advanced.vue own-mode <OForm> schema). `looseObject`
@@ -123,11 +87,11 @@ export const advancedShape = {
 export const createAdvancedSchema = () => z.looseObject({ ...advancedShape });
 export type AdvancedForm = z.infer<ReturnType<typeof createAdvancedSchema>>;
 
-/** Deduplication (scheduled-only). All fields optional (no pre-migration
- *  required rule). `enabled` is DERIVED from `fingerprint_fields.length > 0` by
- *  the component; `time_window_minutes` is sanitized to number|undefined by the
- *  component — the raw form state may transiently hold a string, so the union
- *  keeps validation permissive (never rejects while typing). */
+/** Deduplication (scheduled-only). All fields optional. `enabled` is derived
+ *  from `fingerprint_fields.length > 0` by the component; `time_window_minutes`
+ *  is sanitized to number|undefined by the component — the raw form state may
+ *  transiently hold a string, so the union keeps validation permissive (never
+ *  rejects while typing). */
 export const deduplicationSchema = z.object({
   enabled: z.boolean().optional(),
   fingerprint_fields: z.array(z.string()).optional(),
@@ -138,11 +102,10 @@ export const deduplicationSchema = z.object({
 export type DeduplicationForm = z.infer<typeof deduplicationSchema>;
 
 /** Compare-with-past reference-window row. `offSet` is a relative-time string
- *  (e.g. "15m") edited by the BARE CustomDateTimePicker (a genuine non-form
- *  widget, kept out of OForm* and bridged). `uuid` is the row identity used as
- *  the v-for `:key` — correct HERE because the row is bound by object reference,
- *  NOT by an index-based OForm* `name=` (so the mid-list-delete index bug that
- *  forces `:key="index"` on OForm* arrays does not apply). */
+ *  (e.g. "15m") edited by the bare CustomDateTimePicker. `uuid` is the row
+ *  identity used as the v-for `:key` — correct here because the row is bound by
+ *  object reference, not by an index-based OForm* `name=` (so the mid-list-delete
+ *  index bug that forces `:key="index"` on OForm* arrays does not apply). */
 export const multiTimeRangeRowSchema = z.object({
   offSet: z.string(),
   uuid: z.string().optional(),
@@ -153,8 +116,7 @@ export const multiTimeRangeSchema = z.array(multiTimeRangeRowSchema);
  * Full alert form schema. `looseObject` so all the non-form alert fields
  * (template, context_attributes, enabled, description, row_template*, folder_id,
  * multi_time_range, vrl_function, …) that the payload reads pass through
- * untouched — requiredness lives entirely in the superRefine, so nothing
- * tightens by accident (Rule ④) and an untouched alert object parses clean.
+ * untouched — requiredness lives entirely in the superRefine.
  *
  * `is_real_time` discriminates; the QueryConfig `_meta` discriminators (bridged
  * into this form by QueryConfig's syncMeta watcher) gate the QueryConfig rules.
@@ -171,10 +133,8 @@ export const makeAddAlertSchema = (t: Translator) =>
     trigger_condition: z.looseObject({}).optional(),
     query_condition: z.looseObject({}).optional(),
     logGroupBy: z.array(z.string()).optional(),
-    // ── Step-B fields (Advanced / Deduplication tabs). Permissive/optional —
-    //    documented pass-throughs, NOT validated (parity: no required rule
-    //    pre-migration). The superRefine below adds NO issues for them, so the
-    //    assembled payload + form validity stay byte-for-byte unchanged. ────
+    // Step-B fields (Advanced / Deduplication tabs). Permissive pass-throughs,
+    // not validated — the superRefine below adds no issues for them.
     context_attributes: contextAttributesSchema.optional(),
     deduplication: deduplicationSchema.optional(),
     template: z.string().optional(),
@@ -187,11 +147,9 @@ export const makeAddAlertSchema = (t: Translator) =>
   .superRefine((val: any, ctx) => {
     const mode = val.is_real_time;
 
-    // ── ANOMALY branch: the detection-config fields are validated by
-    // AnomalyDetectionConfig's own OForm; only `name` lives on THIS form. Blank
-    // check re-homed from saveAnomalyDetection's toast (same message) so the
-    // topbar field actually highlights. No special-chars refine here — that rule
-    // is alert-only and would tighten anomaly vs. BEFORE.
+    // ANOMALY branch: the detection-config fields are validated by
+    // AnomalyDetectionConfig's own OForm; only `name` lives on THIS form. No
+    // special-chars refine here — that rule is alert-only.
     if (mode === "anomaly") {
       if (isBlank(val.name)) {
         ctx.addIssue({
@@ -203,7 +161,7 @@ export const makeAddAlertSchema = (t: Translator) =>
       return;
     }
 
-    // ── Topbar: name required + no special chars (§4), stream type/name required.
+    // Topbar: name required + no special chars, stream type/name required.
     if (isBlank(val.name)) {
       ctx.addIssue({
         code: z.ZodIssueCode.custom,
@@ -232,11 +190,9 @@ export const makeAddAlertSchema = (t: Translator) =>
       });
     }
 
-    // ── QueryConfig rules (REUSED verbatim). Delegate to the exported schema and
-    // re-home every issue at its exact nested path so the descendant OForm*
-    // fields surface them. Its superRefine self-gates realtime vs scheduled via
-    // `_meta.isRealTime`, and the promql/threshold/frequency/group_by/conditions
-    // rules land only in the branch where they applied pre-migration.
+    // QueryConfig rules. Delegate to the exported schema and re-home every issue
+    // at its exact nested path so the descendant OForm* fields surface them. Its
+    // superRefine self-gates realtime vs scheduled via `_meta.isRealTime`.
     const qc = makeQueryConfigSchema(t).safeParse(val);
     if (!qc.success) {
       for (const issue of qc.error.issues) {
@@ -248,9 +204,9 @@ export const makeAddAlertSchema = (t: Translator) =>
       }
     }
 
-    // ── AlertSettings rules (REUSED verbatim). Period is enforced ≥ 1 for
-    // scheduled only; realtime keeps period rule-free (createAlertSettingsSchema
-    // toggles it). silence ≥ 0 + destinations ≥ 1 apply in both non-anomaly modes.
+    // AlertSettings rules. Period is enforced ≥ 1 for scheduled only; realtime
+    // keeps period rule-free (createAlertSettingsSchema toggles it). silence ≥ 0
+    // + destinations ≥ 1 apply in both non-anomaly modes.
     const isRealTime = mode === "true";
     const as = createAlertSettingsSchema(t, isRealTime).safeParse(val);
     if (!as.success) {
@@ -281,7 +237,7 @@ export const defaultAddAlertMeta = (
   hasGroupBy: false,
   aggregationEnabled: false,
   // No org floor by default — the rule is skipped until QueryConfig/useAlertForm
-  // bridge the real zoConfig value in (never invent a floor).
+  // bridge the real zoConfig value in.
   minAutoRefreshInterval: 0,
   ...overrides,
 });
diff --git a/web/src/components/alerts/AddAlert.spec.ts b/web/src/components/alerts/AddAlert.spec.ts
index fcddb10039..1110f10f0d 100644
--- a/web/src/components/alerts/AddAlert.spec.ts
+++ b/web/src/components/alerts/AddAlert.spec.ts
@@ -118,7 +118,7 @@ const stubs = {
   QueryEditor: true,
   JsonEditor: true,
   InlineSelectFolderDropdown: true,
-  AppPageHeader: true,
+  OPageHeader: true,
 };
 
 const mountAlert = (
diff --git a/web/src/components/alerts/AddAlert.vue b/web/src/components/alerts/AddAlert.vue
index 578c7109a2..a629b9b520 100644
--- a/web/src/components/alerts/AddAlert.vue
+++ b/web/src/components/alerts/AddAlert.vue
@@ -24,9 +24,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <!-- ═══════════════════════════════════════════════════════════════════ -->
     <!-- V3 "Single Pane of Glass" Layout (All alert types)                -->
     <!-- ═══════════════════════════════════════════════════════════════════ -->
-      <div class="flex flex-col h-full">
-      <AppPageHeader
-        class="alert-v3-topbar [container-type:inline-size] [container-name:topbar] shrink-0 px-4 border-b border-border-default"
+    <OPageLayout bleed>
+      <template #header>
+      <OPageHeader
+        class="alert-v3-topbar [container-type:inline-size] [container-name:topbar] shrink-0 border-b border-border-default"
         :back="{
           label: activeFolderName || t('alerts.header'),
           onClick: goBackToAlertsList,
@@ -68,7 +69,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <OTag v-if="anomalyConfig.status" type="anomalyStatus" :value="anomalyConfig.status" />
             <span
               v-if="anomalyConfig.last_detection_run && anomalyConfig.last_detection_run > 0"
-              class="text-[11px] whitespace-nowrap text-text-secondary"
+              class="text-2xs whitespace-nowrap text-text-secondary"
             >
               {{ t('alerts.lastRun', { time: anomalyFormatTs(anomalyConfig.last_detection_run) }) }}
             </span>
@@ -85,14 +86,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             class="flex items-center gap-1.5 min-w-0"
           >
             <div class="flex items-center gap-1.5 shrink-0">
-              <div class="text-xs font-semibold whitespace-nowrap" :class="store.state.theme === 'dark' ? 'text-[rgba(255,255,255,0.7)]' : 'text-[rgba(0,0,0,0.72)]'">{{ isAnomalyMode ? t('alerts.anomalyName') : t('alerts.incidents.alertName') }} <span class="text-text-primary">*</span></div>
+              <div class="text-xs font-semibold whitespace-nowrap text-text-heading">{{ isAnomalyMode ? t('alerts.anomalyName') : t('alerts.incidents.alertName') }} <span class="text-text-body">*</span></div>
               <OFormInput
                 v-if="!isAnomalyMode"
                 ref="step1Ref"
                 name="name"
                 data-test="add-alert-name-input"
                 :placeholder="t('alerts.alertNamePlaceholder')"
-                class="topbar-name-input text-sm h-[28px]! min-h-[28px]! min-w-[120px] max-w-[150px]"
+                class="topbar-name-input text-sm h-7! min-h-7! min-w-30 max-w-37.5 @max-[1300px]/topbar:min-w-25 @max-[850px]/topbar:min-w-22.5 @max-[680px]/topbar:min-w-17.5"
               />
               <!-- Anomaly name binds the SAME `name` field as the alert name, not
                    `anomalyConfig.name`: a bare OInput has no field for the schema
@@ -106,46 +107,47 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 name="name"
                 data-test="add-anomaly-name-input"
                 :placeholder="t('alerts.anomalyNamePlaceholder')"
-                class="topbar-name-input text-sm h-[28px]! min-h-[28px]! min-w-[120px] max-w-[150px]"
+                class="topbar-name-input text-sm h-7! min-h-7! min-w-30 max-w-37.5 @max-[1300px]/topbar:min-w-25 @max-[850px]/topbar:min-w-22.5 @max-[680px]/topbar:min-w-17.5"
               />
             </div>
 
             <!-- Folder -->
             <div class="flex items-center gap-1.5 shrink-0">
-              <div class="text-xs font-semibold whitespace-nowrap" :class="store.state.theme === 'dark' ? 'text-[rgba(255,255,255,0.7)]' : 'text-[rgba(0,0,0,0.72)]'">{{ t('alerts.folder') }}</div>
+              <div class="text-xs font-semibold whitespace-nowrap text-text-heading">{{ t('alerts.folder') }}</div>
               <InlineSelectFolderDropdown
                 :model-value="activeFolderId"
                 type="alerts"
-                class="topbar-folder-select"
+                class="topbar-folder-select min-w-15 max-w-35"
                 @update:model-value="updateActiveFolderId({ value: $event })"
               />
             </div>
           </div>
         </template>
-      </AppPageHeader>
+      </OPageHeader>
+      </template>
 
       <div class="flex flex-1 min-h-0">
 
       <!-- LEFT column wrapper (flex: 6.5) -->
-      <div style="flex: 6.5; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 8px 0;">
+      <div class="flex-[6.5] min-w-0 min-h-0 flex flex-col gap-2 py-2">
 
       <!-- Stream Name & Stream Type -->
-      <div class="card-container shrink-0 stream-config-card [container-type:inline-size] [container-name:stream-config]">
-        <div class="flex items-center gap-0 py-[10px] px-3 border-b border-[#e6e6e6] dark:border-[var(--color-border-default)]">
-          <div class="w-[3px] h-4 rounded-sm mr-2 shrink-0 bg-[var(--q-primary)]" />
-          <span class="text-[13px] font-semibold tracking-[0.01em]">{{ t('alerts.streamConfig') }} <span class="text-text-primary">*</span></span>
+      <div class="bg-card-glass-bg shrink-0 stream-config-card [container-type:inline-size] [container-name:stream-config]">
+        <div class="flex items-center gap-0 py-2.5 px-3 border-b border-border-default">
+          <div class="w-0.75 h-4 rounded-default mr-2 shrink-0 bg-theme-accent" />
+          <span class="text-compact font-semibold tracking-[0.01em]">{{ t('alerts.streamConfig') }} <span class="text-text-body">*</span></span>
         </div>
         <div class="flex items-center gap-4 px-3 py-2">
         <!-- Stream Type -->
         <div class="flex items-center gap-1.5">
-          <div class="text-xs font-semibold whitespace-nowrap" :class="store.state.theme === 'dark' ? 'text-[rgba(255,255,255,0.7)]' : 'text-[rgba(0,0,0,0.72)]'">{{ t("alerts.streamType") }} <span class="text-text-primary">*</span></div>
+          <div class="text-xs font-semibold whitespace-nowrap text-text-heading">{{ t("alerts.streamType") }} <span class="text-text-body">*</span></div>
           <OFormSelect
             ref="streamTypeRef"
             name="stream_type"
             data-test="add-alert-stream-type-select-dropdown"
             :options="streamTypes"
             :searchable="false"
-            class="stream-type-select"
+            class="stream-type-select w-37.5! @max-[900px]/stream-config:w-27.5! @max-[600px]/stream-config:w-17.5!"
             :disabled="beingUpdated || anomalyEditMode"
             @update:model-value="onStreamTypeChange"
           />
@@ -153,14 +155,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
         <!-- Stream Name -->
         <div class="flex items-center gap-1.5">
-          <div class="text-xs font-semibold whitespace-nowrap" :class="store.state.theme === 'dark' ? 'text-[rgba(255,255,255,0.7)]' : 'text-[rgba(0,0,0,0.72)]'">{{ t("alerts.stream_name") }} <span class="text-text-primary">*</span></div>
+          <div class="text-xs font-semibold whitespace-nowrap text-text-heading">{{ t("alerts.stream_name") }} <span class="text-text-body">*</span></div>
           <OFormSelect
             ref="streamNameRef"
             name="stream_name"
             data-test="add-alert-stream-name-select-dropdown"
             :options="indexOptions"
             :loading="isFetchingStreams"
-            class="stream-name-select"
+            class="stream-name-select w-40! @max-[900px]/stream-config:w-30! @max-[750px]/stream-config:w-27.5! @max-[600px]/stream-config:w-20!"
             :disabled="beingUpdated || anomalyEditMode || !formData.stream_type"
             @update:model-value="updateStreamFields($event)"
           />
@@ -169,13 +171,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
         <!-- Alert Type -->
         <div class="flex items-center gap-1.5">
-          <div class="text-xs font-semibold whitespace-nowrap" :class="store.state.theme === 'dark' ? 'text-[rgba(255,255,255,0.7)]' : 'text-[rgba(0,0,0,0.72)]'">{{ t("alerts.alertType") }}</div>
+          <div class="text-xs font-semibold whitespace-nowrap text-text-heading">{{ t("alerts.alertType") }}</div>
           <OFormSelect
             data-test="add-alert-type-select-dropdown"
             name="is_real_time"
             :options="alertTypeOptions"
             :disabled="beingUpdated || anomalyEditMode"
-            class="alert-type-select"
+            class="alert-type-select min-w-27.5 @max-[900px]/stream-config:min-w-23.75 @max-[750px]/stream-config:min-w-21.25 @max-[600px]/stream-config:min-w-18.75"
             :searchable="false"
           />
         </div>
@@ -183,7 +185,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </div>
 
       <!-- TIER 3: Configuration Tabs -->
-      <div class="alert-v3-tabs card-container" style="flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0 8px;">
+      <div class="alert-v3-tabs bg-card-glass-bg flex-1 min-h-0 flex flex-col mx-2">
         <!-- Tab Headers -->
         <OToggleGroup
           :model-value="activeTab"
@@ -340,7 +342,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
       <!-- Footer: Cancel / Save (left column, separate card) -->
       <div
-        class="card-container flex items-center justify-end px-3 py-2.5 shrink-0 gap-2 border-t border-border-default"
+        class="bg-card-glass-bg flex items-center justify-end px-3 py-2.5 shrink-0 gap-2 border-t border-border-default"
       >
         <OButton
           data-test="add-alert-cancel-btn"
@@ -362,25 +364,27 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
       <!-- TIER 2: Preview + Summary (RIGHT 30%) -->
       <!-- border-l: full-height vertical divider flush against the Preview/Summary pane -->
-      <div class="flex flex-col gap-2 border-l border-border-default pt-2 pb-2" style="flex: 3.5; min-width: 0; min-height: 0; overflow: hidden;">
+      <div class="flex flex-col gap-2 border-l border-border-default pt-2 pb-2 flex-[3.5] min-w-0 min-h-0 overflow-hidden">
         <!-- Preview Card -->
-        <div class="card-container overflow-hidden flex flex-col" style="flex: 1; min-height: 0;">
+        <div class="bg-card-glass-bg overflow-hidden flex flex-col flex-1 min-h-0">
           <div
-            class="flex items-center px-3 py-[0.625rem] select-none border-b border-border-default shrink-0 gap-2"
+            class="flex items-center px-3 py-2.5 select-none border-b border-border-default shrink-0 gap-2"
           >
             <span class="text-sm font-medium">{{ isAnomalyMode ? t('alerts.sqlPreview') : t('alerts.preview') }}</span>
             <template v-if="!isAnomalyMode && activeEvaluationStatus">
               <div class="w-px h-4 bg-border-default" />
-              <OIcon :name="activeEvaluationStatus.wouldTrigger ? 'check-circle' : 'cancel'" :class="activeEvaluationStatus.wouldTrigger ? 'text-[var(--o2-positive)]' : 'text-[var(--o2-gray)]'" size="sm" />
-              <span class="text-xs font-semibold" :class="activeEvaluationStatus.wouldTrigger ? 'text-[var(--o2-positive)]' : 'text-[var(--o2-gray)]'">
+              <OIcon :name="activeEvaluationStatus.wouldTrigger ? 'check-circle' : 'cancel'" :class="activeEvaluationStatus.wouldTrigger ? 'text-status-positive' : 'text-gray'" size="sm" />
+              <span class="text-xs font-semibold" :class="activeEvaluationStatus.wouldTrigger ? 'text-status-positive' : 'text-gray'">
                 {{ activeEvaluationStatus.wouldTrigger ? t('alerts.wouldTrigger') : t('alerts.wouldNotTrigger') }}
               </span>
               <span class="text-xs opacity-60">{{ activeEvaluationStatus.reason }}</span>
             </template>
           </div>
-          <div class="flex-1 min-h-0" style="overflow: hidden;">
+          <div class="flex-1 min-h-0 overflow-hidden">
             <template v-if="isAnomalyMode">
-              <QueryEditor editor-id="anomaly-sql-preview" language="sql" :read-only="true" :show-auto-complete="false" :hide-nl-toggle="true" :query="anomalyPreviewSql" style="height: 100%" />
+              <!-- editor-height is QueryEditor's own API for this; a class cannot
+                   win against the inline height its rootStyle always sets. -->
+              <QueryEditor editor-id="anomaly-sql-preview" language="sql" :read-only="true" :show-auto-complete="false" :hide-nl-toggle="true" :query="anomalyPreviewSql" editor-height="100%" />
             </template>
             <template v-else>
               <div v-if="!formData.stream_name" class="flex flex-col items-center justify-center h-full gap-2">
@@ -389,10 +393,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   {{ t('alerts.previewEmptyState') }}
                 </span>
               </div>
-              <preview-alert
+              <preview-alert class="w-full h-full"
                 v-else
                 ref="previewAlertRef"
-                style="width: 100%; height: 100%;"
                 :formData="formData"
                 :query="previewQuery"
                 :selectedTab="formData.query_condition.type || 'custom'"
@@ -406,23 +409,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
 
         <!-- Summary Card -->
-        <div class="card-container overflow-hidden flex flex-col" style="flex: 1; min-height: 0;">
+        <div class="bg-card-glass-bg overflow-hidden flex flex-col flex-1 min-h-0">
           <div
-            class="flex items-center px-3 py-[0.625rem] select-none border-b border-border-default shrink-0"
+            class="flex items-center px-3 py-2.5 select-none border-b border-border-default shrink-0"
           >
             <span class="text-sm font-medium">{{ t('alerts.summary.title') }}</span>
           </div>
-          <div class="flex-1 min-h-0" style="overflow: auto;">
-            <AnomalySummary
+          <div class="flex-1 min-h-0 overflow-auto">
+            <AnomalySummary class="h-full overflow-auto"
               v-if="isAnomalyMode"
-              style="height: 100%; overflow: auto;"
               :config="anomalyConfig"
               :destinations="destinations"
               :wizard-step="3"
             />
-            <alert-summary
+            <alert-summary class="h-full"
               v-else
-              style="height: 100%;"
               :formData="formData"
               :destinations="destinations"
               :previewQuery="previewQuery"
@@ -433,10 +434,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </div>
 
       </div>
-      </div>
+    </OPageLayout>
   </OForm>
 
   <ODrawer data-test="add-alert-json-editor-drawer"
+    bleed
     v-model:open="showJsonEditorDialog"
     size="lg"
     :title="t('alerts.editJson')"
@@ -482,7 +484,8 @@ import OForm from "@/lib/forms/Form/OForm.vue";
 import OFormInput from "@/lib/forms/Input/OFormInput.vue";
 import OFormSelect from "@/lib/forms/Select/OFormSelect.vue";
 import OTag from "@/lib/core/Badge/OTag.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageHeader from "@/lib/core/PageHeader/OPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 
 export default defineComponent({
   name: "ComponentAddUpdateAlert",
@@ -512,6 +515,7 @@ export default defineComponent({
   ],
   components: {
     OIcon,
+    OPageLayout,
     JsonEditor,
     QueryConfig,
     AlertSettings,
@@ -535,7 +539,7 @@ export default defineComponent({
     OForm,
     OFormInput,
     OFormSelect,
-    AppPageHeader,
+    OPageHeader,
   },
   setup(props, { emit }) {
     const alertForm = useAlertForm(props, emit);
@@ -631,85 +635,49 @@ export default defineComponent({
 });
 </script>
 
-<style>
-/* Compact rows: float the validation message so it never resizes the row.
-   A class passed to OInput/OSelect lands on the ROOT wrapper — the flex-col
-   holding the control AND its message — so an in-flow message would grow these
-   fixed-height rows, escape the card, and be painted over by the next card.
-   Out of flow, the row keeps its height and the message renders under the
-   control, above the neighbouring card.
-
-   `top:100%` resolves against the wrapper, so a wrapper whose height understates
-   the control it contains would tuck the message UNDER that control. The
-   topbar's h-[28px] genuinely compresses its input, so it anchors correctly; the
-   selects had to drop their (inert) clamp for the same to hold — see below.
+<style scoped>
+/* keep(lib-override:o2-form): float each control's validation message out of
+   flow. A class passed to OInput/OFormSelect lands on the ROOT wrapper — the
+   flex-col holding the control AND its message — so an in-flow message would
+   grow these fixed-height topbar rows, escape the card, and be painted over by
+   the next card. `top:100%` resolves against the wrapper; the topbar input's
+   h-7 clamp genuinely compresses it, so it anchors correctly, while the three
+   selects deliberately carry NO h-7 clamp (it only ever shrank the wrapper box,
+   never the 2.125rem trigger, which mis-anchored the floating message).
    pointer-events:none so the floating text can't swallow clicks on the tab bar
-   it overlaps. */
+   it overlaps. `:deep` because [role="alert"] renders inside the child
+   component. All widths and container-query steps are template utilities. */
 .topbar-name-input,
 .stream-type-select,
 .stream-name-select {
   position: relative;
 }
 
-.topbar-name-input [role="alert"],
-.stream-type-select [role="alert"],
-.stream-name-select [role="alert"] {
+.topbar-name-input :deep([role="alert"]),
+.stream-type-select :deep([role="alert"]),
+.stream-name-select :deep([role="alert"]) {
   position: absolute;
   top: 100%;
   left: 0;
-  margin-top: 2px;
+  margin-top: 0.125rem;
   white-space: nowrap;
   pointer-events: none;
   z-index: 10;
 }
+</style>
 
-@container topbar (max-width: 1300px) {
-  .topbar-name-input  { min-width: 100px; }
-}
-
-/* Compact — AI chat open or narrow viewport */
-@container topbar (max-width: 850px) {
-  .topbar-name-input  { min-width: 90px; }
-}
-
-/* Minimum — very narrow */
-@container topbar (max-width: 680px) {
-  .topbar-name-input  { min-width: 70px; }
-}
-
-.topbar-folder-select {
-  min-width: 60px;
-  max-width: 140px;
-}
-.topbar-folder-select .q-field__control { padding: 0; }
-.topbar-folder-select .q-field__native {
-  font-size: 1.25rem;
-  font-weight: 500;
-  cursor: pointer;
-}
-
-/* No h-[28px] clamp on these three: it only ever shrank the wrapper BOX, never
-   the trigger (which keeps its 34px design-system height and simply overflowed),
-   so it ate the row's bottom padding and mis-anchored the floating message. */
-.stream-type-select { width: 150px; }
-.stream-name-select { width: 160px; }
-.alert-type-select  { min-width: 110px; }
-
-@container stream-config (max-width: 900px) {
-  .stream-type-select { width: 110px; }
-  .stream-name-select { width: 120px; }
-  .alert-type-select  { min-width: 95px; }
-}
-
-@container stream-config (max-width: 750px) {
-  .stream-type-select { width: 110px; }
-  .stream-name-select { width: 110px; }
-  .alert-type-select  { min-width: 85px; }
-}
-
-@container stream-config (max-width: 600px) {
-  .stream-type-select { width: 70px; }
-  .stream-name-select { width: 80px; }
-  .alert-type-select  { min-width: 75px; }
+<style scoped>
+/* keep(complex-state): `.alert-field-highlight` is a transient state class that
+   AlertFocusManager (utils/alerts/focusManager.ts) adds/removes at RUNTIME via
+   classList on refs registered from useAlertForm — no template ever writes it,
+   so it cannot become a template utility. AddAlert is the alert-form root and
+   owns every registered field's DOM (incl. the QueryConfig subtree, which
+   instantiates its own focusManager), so one `:deep()` here covers them all.
+   `!important` is preserved: it must beat the field components' own border
+   utilities, exactly as the previous global rule did. */
+:deep(.alert-field-highlight) {
+  border: 0.125rem solid var(--color-accent) !important;
+  border-radius: 0.25rem;
+  transition: border 0.3s ease;
 }
 </style>
diff --git a/web/src/components/alerts/AddDestination.schema.ts b/web/src/components/alerts/AddDestination.schema.ts
index 531e39edec..79e2f60a8d 100644
--- a/web/src/components/alerts/AddDestination.schema.ts
+++ b/web/src/components/alerts/AddDestination.schema.ts
@@ -5,34 +5,21 @@
 // Built via a factory so messages stay i18n-driven (`t`) and the per-instance
 // `isAlerts` prop can gate the alerts-only vs pipeline-only rules.
 //
-// Migration notes (form-migration-playbook / START-HERE Rule ①/②/④):
-//   • `name`/`url`/`emails` — genuinely user-typed → form-owned OFormInput; rules
-//     mirror the old hand-rolled `save()` error refs exactly.
-//   • `method`/`output_format`/`action_id`/`template` — form-owned OFormSelect.
-//   • `skip_tls_verify` — form-owned OFormSwitch (boolean).
-//   • `apiHeaders` — a Rule-① dynamic array-field (`apiHeaders[i].key/.value`),
-//     each row form-owned (playbook §2 array-field pattern); rebuilt into the
-//     `headers` map at submit. No per-row rule (blank starter row is valid).
-//   • `destination_type` / `type` — NOT <input>s: a custom card grid + app-tabs.
-//     Both are bridged into the form via `setFieldValue` from their own handlers
-//     (the sanctioned Rule-② bridge) so `superRefine` can branch on them.
+// `destination_type` / `type` are NOT <input>s: a custom card grid + app-tabs,
+// bridged into the form via `setFieldValue` from their own handlers so
+// `superRefine` can branch on them. `apiHeaders` is a dynamic array-field
+// (`apiHeaders[i].key/.value`), rebuilt into the `headers` map at submit; a
+// blank starter row is valid.
 //
-// SINGLE-FORM design (prebuilt + custom share ONE <OForm id="add-destination-form">):
-// there is NO nested child credential form any more. The per-type credential
-// fields render (via PrebuiltDestinationForm, now a presentational descendant)
-// as OForm* controls named `credentials.<key>` inside THIS form, so Enter/Save
-// submit the one form from anywhere and the schema validates everything together.
-// The prebuilt credential rules are composed in `superRefine` from the SAME
-// `getPrebuiltConfig().credentialFields` single source of truth (via
-// `makePrebuiltDestinationSchema`), re-homed under the `credentials.*` path.
-//
-// Rule-④ parity: the custom-only rules (url/method/email/action/output_format/
-// template) are scoped to NON-prebuilt paths — a prebuilt destination keeps the
-// default `type:"http"` (or `"email"` for the prebuilt email type), so without
-// that scoping the `type==="http"` url/method rule (and the `type==="email"`
-// emails rule) would fire on fields the prebuilt UI never renders and wrongly
-// block the save. The prebuilt-side `name` stays UN-required (the pre-migration
-// prebuilt save applied no name/template validation) — unchanged from before.
+// Prebuilt + custom share ONE <OForm id="add-destination-form">: the per-type
+// credential fields render (via PrebuiltDestinationForm) as OForm* controls
+// named `credentials.<key>` inside THIS form, so Enter/Save submit the one form
+// and the schema validates everything together. The prebuilt credential rules
+// are composed in `superRefine` from the same `getPrebuiltConfig().
+// credentialFields` source (via `makePrebuiltDestinationSchema`), under the
+// `credentials.*` path. The custom-only rules (url/method/email/action/
+// output_format/template) are scoped to NON-prebuilt paths so they do not fire
+// on fields the prebuilt UI never renders.
 //
 // Validation TIMING is owned by OForm (submit-then-change via revalidateLogic);
 // this file only describes WHAT is valid.
@@ -41,11 +28,6 @@ import { z } from "zod";
 import { isValidResourceName } from "@/utils/zincutils";
 import { makePrebuiltDestinationSchema } from "./PrebuiltDestinationForm.schema";
 
-// Mirrors the old `save()` name gate:
-//   !name ? nameRequired : (!isValidResourceName(name) ? charsMsg : "")
-// nameRequired → i18n `common.nameRequired`; charsMsg → `alerts.validation.nameInvalidChars`.
-
-// Byte-identical to the old inline email-list regex in save().
 const EMAIL_LIST_REGEX =
   /^([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})(\s*[;,]\s*([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}))*$/;
 
@@ -88,8 +70,7 @@ export const makeAddDestinationSchema = (
       const isPrebuilt =
         isAlerts && !!val.destination_type && val.destination_type !== "custom";
 
-      // name: required + resource-name check. Scoped to NON-prebuilt paths —
-      // the pre-migration form never validated the prebuilt-side name.
+      // name: required + resource-name check. Scoped to NON-prebuilt paths.
       if (!isPrebuilt) {
         if (!trimmed(val.name)) {
           ctx.addIssue({
@@ -145,8 +126,7 @@ export const makeAddDestinationSchema = (
       }
 
       // emails: required + valid list for the CUSTOM email type. NOT for the
-      // prebuilt email type — it collects recipients via `credentials.recipients`
-      // (selectDestinationType sets type:"email" for it, so scope this out).
+      // prebuilt email type — it collects recipients via `credentials.recipients`.
       if (!isPrebuilt && val.type === "email") {
         if (!val.emails || !EMAIL_LIST_REGEX.test(String(val.emails))) {
           ctx.addIssue({
diff --git a/web/src/components/alerts/AddDestination.vue b/web/src/components/alerts/AddDestination.vue
index 18b2233eaa..2c2ecff5d1 100644
--- a/web/src/components/alerts/AddDestination.vue
+++ b/web/src/components/alerts/AddDestination.vue
@@ -15,36 +15,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="p-0 o2-custom-bg"
-    style="
-      height: calc(100vh - 48px);
-      min-height: inherit;
-      display: flex;
-      flex-direction: column;
-    "
+  <OPageLayout
+    class="overflow-hidden"
+    :title="destination ? t('alert_destinations.updateTitle') : t('alert_destinations.addTitle')"
+    title-data-test="add-destination-title"
+    :back="{
+      label: t('alert_destinations.header'),
+      onClick: () => emit('cancel:hideform'),
+    }"
+    bleed
   >
-    <AppPageHeader
-      :title="destination ? t('alert_destinations.updateTitle') : t('alert_destinations.addTitle')"
-      title-data-test="add-destination-title"
-      :back="{
-        label: t('alert_destinations.header'),
-        onClick: () => emit('cancel:hideform'),
-      }"
-      class="px-3 border-b border-border-default"
-      style="flex-shrink: 0"
-    >
-    </AppPageHeader>
     <div
-      class="card-container py-2"
-      style="flex: 1; overflow-y: auto; overflow-x: hidden"
+      class="bg-card-glass-bg py-2 flex-1 overflow-y-auto overflow-x-hidden"
     >
       <div>
-        <!-- OWNER of this <OForm> (Rule ③): AddDestination reads its own form
-             state (form.useStore) to drive the discriminated rendering and
-             bridges the non-<input> discriminators (destination_type card grid,
-             type tabs) via setFieldValue. Custom/pipeline destinations submit
-             THIS form (id=add-destination-form); prebuilt destinations submit
-             the nested child credential form by id (form-id bridge, R4). -->
         <OForm
           :form="form"
           id="add-destination-form"
@@ -77,7 +61,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   {{ t("alert_destinations.destination_type") }}
                 </div>
                 <div
-                  class="flex items-center p-2 el-border el-border-radius"
+                  class="flex items-center p-2 border border-card-glass-border rounded-default"
                   data-test="destination-type-readonly"
                 >
                   <OIcon
@@ -141,7 +125,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             />
             <div v-else-if="isUpdatingDestination" class="p-3 text-center">
               <OSpinner size="md" data-test="add-destination-loading-indicator" />
-              <div class="mt-2 text-gray-400">{{ t("alert_destinations.loadingData") }}</div>
+              <div class="mt-2 text-text-muted">{{ t("alert_destinations.loadingData") }}</div>
             </div>
 
             <!-- Template selector for prebuilt destinations -->
@@ -158,7 +142,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 valueKey="value"
                 tabindex="0"
               />
-              <div class="text-xs text-gray-400 mt-1">
+              <div class="text-xs text-text-secondary mt-1">
                 {{ t('alert_destinations.templateHelp', {
                   type: getDestinationTypeName(dtVal),
                   name: defaultPrebuiltTemplateName,
@@ -251,7 +235,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             "
             class="w-full pb-3"
           >
-            <div class="app-tabs-container h-[36px] mr-2 w-fit">
+            <div class="app-tabs-container h-9 mr-2 w-fit">
               <app-tabs
                 data-test="add-destination-tabs"
                 :tabs="tabs"
@@ -423,7 +407,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :label="t('reports.recipients')"
               required
               tabindex="0"
-              style="width: 100%"
               :placeholder="t('user.inviteByEmail')"
             />
           </template>
@@ -493,11 +476,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             @click="$emit('cancel:hideform')"
             >{{ t("alerts.cancel") }}</OButton
           >
-          <!-- R4: Enter + this Save both submit the ONE form by id (custom,
-               pipeline AND prebuilt all live in add-destination-form now — no
-               nested form to route to). @click is additive to the native submit
-               — it restores the pre-migration landing-state toast (see
-               onSaveClick) without disturbing the form-id submit. -->
           <OButton
             data-test="add-destination-submit-btn"
             variant="primary"
@@ -518,7 +496,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       :template-content="previewContent"
       data-test="destination-preview-modal"
     />
-  </div>
+  </OPageLayout>
 </template>
 <script lang="ts" setup>
 import {
@@ -539,7 +517,7 @@ import OFormSelect from "@/lib/forms/Select/OFormSelect.vue";
 import OFormSwitch from "@/lib/forms/Switch/OFormSwitch.vue";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import OTag from "@/lib/core/Badge/OTag.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import type {
   Template,
   Headers,
@@ -587,27 +565,24 @@ const store = useStore();
 const { t } = useI18n();
 const { track } = useReo();
 
-// ── OWNER pattern (Rule ③): create the single form here so its state drives the
-// discriminated rendering (form.useStore) and the non-<input> discriminators
-// (card grid + tabs) bridge in via setFieldValue. There is ONE form for custom,
-// pipeline AND prebuilt destinations (credentials are form-owned `credentials.*`
-// fields now, not a nested child form) — `saveDestination` dispatches by type.
+// Single form for custom, pipeline and prebuilt destinations (credentials are
+// `credentials.*` fields); saveDestination dispatches by type.
 const form = useOForm({
   defaultValues: addDestinationDefaults(),
   schema: makeAddDestinationSchema(t, props.isAlerts),
   onSubmit: (value) => saveDestination(value as AddDestinationForm),
 });
 
-// Single submit entry-point. Prebuilt types save via handlePrebuiltSave (which
-// reads the form-owned `credentials.*`); custom/pipeline via saveCustomDestination.
-// Returned so OForm awaits the real save → the footer Save spinner spans it.
+// Single submit entry-point: prebuilt types save via handlePrebuiltSave, custom/
+// pipeline via saveCustomDestination. Returned so OForm awaits the real save (the
+// footer Save spinner spans it).
 function saveDestination(value: AddDestinationForm) {
   return isPrebuiltDestination.value
     ? handlePrebuiltSave(value)
     : saveCustomDestination(value);
 }
 
-// Reactive reads of the form-owned discriminators + the api-headers array.
+// Reactive reads of the discriminators + the api-headers array.
 const dtVal = form.useStore((s: any) => s.values.destination_type as string);
 const typeVal = form.useStore((s: any) => s.values.type as string);
 const apiHeaders = form.useStore(
@@ -633,8 +608,8 @@ const {
   detectPrebuiltType,
 } = usePrebuiltDestinations();
 
-// Prebuilt credentials are a form-owned sub-object (`credentials.*`) now — read
-// them reactively from the ONE form for the Preview/Test buttons (no mirror ref).
+// Prebuilt credentials sub-object (`credentials.*`), read reactively for the
+// Preview/Test buttons.
 const prebuiltCredentials = form.useStore(
   (s: any) => (s.values.credentials ?? {}) as Record<string, any>,
 );
@@ -642,15 +617,10 @@ const destinationSearchQuery = ref("");
 const showPreviewModal = ref(false);
 const previewContent = ref("");
 
-// Landing-state feedback (pre-migration parity). The Save button natively
-// submits the parent form; in the alerts create flow with no destination-type
-// card chosen yet, `destination_type` is empty so the schema rejects on
-// name/url — but those fields aren't mounted until a card is picked, so the
-// errors have nowhere to render and the click looks dead. Pre-migration
-// saveDestination always toasted "Please fill required fields" here; restore it.
-// Once a card IS picked the fields mount and show inline errors, so this only
-// needs to cover the no-type-selected state (and it runs alongside, not instead
-// of, the native submit — the R4 form-id routing is untouched).
+// When no destination-type card is chosen yet, `destination_type` is empty so the
+// schema rejects on name/url — but those fields aren't mounted until a card is
+// picked, so the errors have nowhere to render and the click looks dead. Toast a
+// fill-required message to cover that no-type-selected state.
 const onSaveClick = () => {
   if (props.isAlerts && !props.destination && !dtVal.value) {
     toast({
@@ -746,9 +716,8 @@ watch(
 const setupDestinationData = () => {
   if (props.destination) {
     isUpdatingDestination.value = true;
-    // Resolve the destination_type discriminator FIRST. `setDestType` is pure
-    // now (it only records the choice): the resolved value rides into the single
-    // form.reset(record) below instead of being poked into the form mid-scan.
+    // Resolve the destination_type discriminator FIRST; setDestType only records
+    // the choice, which rides into the single form.reset(record) below.
     let destType = "";
     const setDestType = (v: string) => {
       destType = v;
@@ -831,7 +800,7 @@ const setupDestinationData = () => {
         setDestType(isPrebuiltType(extractedType) ? extractedType : "custom");
       }
     }
-    // Priority 5: Fallback to URL-based detection (for destinations created before metadata was added)
+    // Priority 5: Fallback to URL-based detection (for destinations without metadata)
     else if (props.destination.url) {
       const detectedType = detectPrebuiltType(props.destination);
       if (detectedType) {
@@ -845,12 +814,11 @@ const setupDestinationData = () => {
       setDestType("custom");
     }
 
-    // ── Edit-prefill: ONE form.reset(record) ────────────────────────────────
-    // Async data arriving after mount re-seeds via a single reset, never a
-    // per-field setFieldValue loop (alerts-migration.md §5). reset() also clears
-    // field meta — a setFieldValue loop leaves every prefilled field marked
-    // dirty/touched with stale errors, and this runs again on every onActivated.
-    // Start from the defaults so every key is present, then overlay the record.
+    // Edit-prefill: seed via a single form.reset(record), not a per-field
+    // setFieldValue loop — reset() also clears field meta, whereas a setFieldValue
+    // loop leaves every prefilled field marked dirty/touched with stale errors, and
+    // this runs again on every onActivated. Start from the defaults so every key is
+    // present, then overlay the record.
     const record: Record<string, any> = {
       ...addDestinationDefaults(),
       destination_type: destType,
@@ -862,8 +830,7 @@ const setupDestinationData = () => {
       emails: (props.destination?.emails || []).join(", "),
       type: props.destination.type || "http",
       action_id: props.destination.action_id || "",
-      // Prebuilt credentials ride into the SAME single reset (form-owned now,
-      // not a separate mirror), typed to the active type's fields. Custom → {}.
+      // Prebuilt credentials, typed to the active type's fields. Custom → {}.
       credentials:
         destType && destType !== "custom"
           ? prebuiltDestinationDefaults(destType, extractPrebuiltCredentials(destType))
@@ -871,7 +838,7 @@ const setupDestinationData = () => {
     };
 
     // Only CUSTOM headers reach the UI array; system/prebuilt ones stay implicit.
-    // Parity: when there are none, the default apiHeaders row is kept.
+    // When there are none, the default apiHeaders row is kept.
     if (Object.keys(destHeaders).length) {
       const systemHeaders = ["Content-Type", "Authorization", "X-Routing-Key"];
       const customHeadersOnly = Object.entries(destHeaders).filter(
@@ -885,15 +852,13 @@ const setupDestinationData = () => {
       }
     }
 
-    // Parity: only override the default when the saved destination carries one.
+    // Only override the default when the saved destination carries one.
     if (props.destination.output_format) {
       record.output_format = props.destination.output_format;
     }
 
-    // ONE reset seeds every field INCLUDING credentials (built above via
-    // extractPrebuiltCredentials + prebuiltDestinationDefaults). Template name is
-    // stored/displayed as-is (e.g. "prebuilt_slack") — the dropdown's first
-    // option carries that value, so edit mode matches automatically.
+    // Template name is stored/displayed as-is (e.g. "prebuilt_slack") — the
+    // dropdown's first option carries that value, so edit mode matches automatically.
     form.reset(record);
   }
 };
@@ -901,7 +866,7 @@ const setupDestinationData = () => {
 // Rebuild the credential sub-object for an existing prebuilt destination from its
 // persisted shape (metadata `credential_*` vars, url/emails, and the auth headers
 // where sensitive values live). Pure over props.destination — used to seed the
-// single form.reset(record) in edit mode. Mirrors the pre-migration restoration.
+// single form.reset(record) in edit mode.
 const extractPrebuiltCredentials = (typeId: string): Record<string, any> => {
   const credentials: Record<string, any> = {};
   if (!props.destination) return credentials;
@@ -943,8 +908,7 @@ const extractPrebuiltCredentials = (typeId: string): Record<string, any> => {
       : props.destination.emails;
   }
   // PagerDuty: integrationKey from routing_key metadata above; fall back to the
-  // legacy X-Routing-Key header for destinations saved before the key moved into
-  // the request body.
+  // X-Routing-Key header for older destinations.
   if (
     typeId === "pagerduty" &&
     !credentials.integrationKey &&
@@ -1117,16 +1081,14 @@ const showPreview = async () => {
   }
 };
 
-// Save a prebuilt destination — invoked by saveDestination when the ONE form's
-// schema passes (the schema now validates the credentials too, so this fires only
-// on valid input). name/template/apiHeaders/skip_tls_verify AND `credentials` all
-// come from the single validated `value`. Mirrors the old save() prebuilt branch.
+// Save a prebuilt destination — invoked by saveDestination once the form's schema
+// passes. name/template/apiHeaders/skip_tls_verify and `credentials` all come from
+// the validated `value`.
 async function handlePrebuiltSave(value: AddDestinationForm) {
   try {
     const vals = value as any;
     // Scope credentials to the ACTIVE type's fields (dropping any keys left over
-    // from a previous type selection) and coerce them exactly as the schema does
-    // — identical to what the pre-migration child credential form emitted.
+    // from a previous type selection) and coerce them exactly as the schema does.
     const credentials = prebuiltDestinationDefaults(
       value.destination_type,
       (value.credentials ?? {}) as Record<string, unknown>,
@@ -1174,7 +1136,6 @@ async function handlePrebuiltSave(value: AddDestinationForm) {
 // superRefine) passes — the schema, not a manual guard, gates the save. `value`
 // is the validated payload source of truth; the payload is built with explicit
 // keys so no schema-only field (e.g. `credentials`) leaks into the request.
-// Mirrors the old save() custom branch exactly.
 function saveCustomDestination(value: AddDestinationForm) {
   const dismiss = toast({
     variant: "loading",
@@ -1274,9 +1235,8 @@ function saveCustomDestination(value: AddDestinationForm) {
   }
 }
 
-// Add/remove operate on the FORM-OWNED apiHeaders array (single source of truth)
-// via push/removeFieldValue; the template v-for keys rows by INDEX (Rule ①). The
-// delete button passes the row INDEX.
+// Add/remove operate on the apiHeaders array via push/removeFieldValue; the
+// template v-for keys rows by index, and the delete button passes the row index.
 const addApiHeader = (key = "", value = "") => {
   (form as any).pushFieldValue("apiHeaders", { key, value });
 };
diff --git a/web/src/components/alerts/AddTemplate.schema.ts b/web/src/components/alerts/AddTemplate.schema.ts
index b33c704785..fba39cc9ac 100644
--- a/web/src/components/alerts/AddTemplate.schema.ts
+++ b/web/src/components/alerts/AddTemplate.schema.ts
@@ -2,35 +2,20 @@
 //
 // Validation schema for AddTemplate.vue (alert notification templates).
 //
-// Migration notes (form-migration-playbook / START-HERE Rule ②/④):
-//   • `name`   — genuinely user-typed → form-owned OFormInput. Rules mirror the
-//     old hand-rolled `saveTemplate` gate: required (`common.nameRequired`) +
-//     the resource-name character check (isValidResourceName). Kept UNtrimmed so
-//     the payload can send `template_name` raw and `data.name` trimmed exactly
-//     like the pre-migration form.
-//   • `title`  — form-owned OFormInput, optional at the object level; required
-//     ONLY when `type === 'email'` (enforced in `superRefine`, mirroring the old
-//     `type === 'email' && !title.trim()` gate).
-//   • `body`   — a bare Monaco/`<query-editor>` (the sanctioned non-form widget),
-//     bridged into the form via `setFieldValue` from the editor's change handler
-//     so this schema's `min(1)` required rule covers it. The http JSON-validity
-//     check stays a submit-time toast side-effect in the component (NOT a schema
-//     rule) to preserve the exact pre-migration behaviour.
-//   • `type`   — NOT an <input>: it is the app-tabs UI toggle. It is a schema
-//     enum discriminator bridged into the form via `setFieldValue` from the
-//     tab's own handler (the sanctioned Rule-② bridge) so `superRefine` can
-//     branch on it. Never rendered as an OForm* control.
-//
-// Validation TIMING is owned by OForm (submit-then-change via revalidateLogic);
-// this file only describes WHAT is valid.
+//   • `name`   — required + resource-name character check (isValidResourceName).
+//     Kept untrimmed so the payload can send `template_name` raw and `data.name`
+//     trimmed.
+//   • `title`  — optional at the object level; required only when
+//     `type === 'email'` (enforced in `superRefine`).
+//   • `body`   — bare Monaco/`<query-editor>` bridged into the form via
+//     `setFieldValue`. The http JSON-validity check stays a submit-time toast
+//     side-effect in the component, not a schema rule.
+//   • `type`   — the app-tabs UI toggle, bridged in as a schema enum
+//     discriminator so `superRefine` can branch on it. Never an OForm* control.
 
 import { z } from "zod";
 import { isValidResourceName } from "@/utils/zincutils";
 
-// Mirrors the old `saveTemplate` name gate:
-//   !name.trim() ? nameRequired : (!isValidResourceName(name) ? charsMsg : "")
-// nameRequired → i18n `common.nameRequired`; charsMsg → `alerts.validation.nameInvalidChars`.
-
 export const makeAddTemplateSchema = (t: (_key: string) => string) =>
   z
     .object({
@@ -44,18 +29,15 @@ export const makeAddTemplateSchema = (t: (_key: string) => string) =>
       type: z.enum(["http", "email"]),
       // Optional at the object level; required-when-email in superRefine below.
       title: z.string().optional(),
-      // Bridged from the bare Monaco body editor; required.
-      // PARITY (R7): pre-migration `isTemplateFilled()` gated on
-      // `body.trim().trim().length`, so a WHITESPACE-ONLY body was INVALID —
-      // `.min(1)` alone would pass "   " (length 3). Checked on the trimmed
-      // value but NOT transformed: `.trim()` / `z.string().trim()` would MUTATE
-      // the saved body, and pre-migration sent it RAW.
+      // Bridged from the bare Monaco body editor; required. Whitespace-only is
+      // invalid, so check the trimmed value — but do NOT transform, the saved
+      // body must be sent raw.
       body: z.string().refine((v) => v.trim().length > 0, {
         message: t("alerts.validation.fieldRequired"),
       }),
     })
     .superRefine((val, ctx) => {
-      // Email templates require a subject title (old: `!title.trim()`).
+      // Email templates require a subject title.
       if (val.type === "email" && !String(val.title ?? "").trim()) {
         ctx.addIssue({
           code: z.ZodIssueCode.custom,
@@ -68,7 +50,7 @@ export const makeAddTemplateSchema = (t: (_key: string) => string) =>
 export type AddTemplateForm = z.infer<ReturnType<typeof makeAddTemplateSchema>>;
 
 // Static (create-only) defaults. Edit/clone prefill is applied at runtime via
-// `form.reset(record)` (see AddTemplate.vue), not here.
+// `form.reset(record)` in AddTemplate.vue.
 export const addTemplateDefaults = (): AddTemplateForm => ({
   name: "",
   type: "http",
diff --git a/web/src/components/alerts/AddTemplate.vue b/web/src/components/alerts/AddTemplate.vue
index d27007d06c..de569c4d1c 100644
--- a/web/src/components/alerts/AddTemplate.vue
+++ b/web/src/components/alerts/AddTemplate.vue
@@ -14,30 +14,26 @@ You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <div class="p-0 o2-custom-bg"
-    style="height: calc(100vh - 48px); min-height: inherit"
+  <OPageLayout
+    class="overflow-hidden"
+    :title="isUpdatingTemplate ? t('alert_templates.updateTitle') : isClone ? t('alert_templates.cloneTitle') : t('alert_templates.addTitle')"
+    title-data-test="add-template-title"
+    :back="{
+      label: t('alert_templates.header'),
+      onClick: () => emit('cancel:hideform'),
+    }"
+    bleed
   >
-    <AppPageHeader
-      :title="isUpdatingTemplate ? t('alert_templates.updateTitle') : isClone ? t('alert_templates.cloneTitle') : t('alert_templates.addTitle')"
-      title-data-test="add-template-title"
-      :back="{
-        label: t('alert_templates.header'),
-        onClick: () => emit('cancel:hideform'),
-      }"
-      class="px-3 border-b border-border-default"
-    />
-
-    <OSplitter
+    <OSplitter class="h-full"
       v-model="splitterModel"
       unit="%"
       :horizontal="false"
-      style="height: calc(100vh - 106px)"
     >
       <template v-slot:before>
         <OForm
           :form="form"
           v-slot="{ isSubmitting }"
-          class="card-container h-full flex flex-col"
+          class="bg-card-glass-bg h-full flex flex-col"
         >
           <div class="p-3 overflow-auto">
             <div class="w-full pb-2 pt-2 o2-input">
@@ -88,7 +84,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :key="bodyLanguage"
               data-test="template-body-editor"
               editor-id="template-body-editor"
-              class="w-full min-h-[310px]! rounded-[5px] border border-(--o2-border-color) resize-y overflow-auto mb-3"
+              class="w-full min-h-77.5! rounded-default border border-card-glass-border resize-y overflow-auto mb-3"
               :language="bodyLanguage"
               :query="body"
               @update:query="onBodyChange"
@@ -96,7 +92,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </div>
           </div>
           <div
-            class="flex justify-end gap-2 px-4 py-4 w-full bg-[var(--q-card-background)] border-t border-border-default"
+            class="flex justify-end gap-2 px-4 py-4 w-full bg-surface-base border-t border-border-default"
           >
             <OButton
               v-close-popup
@@ -118,7 +114,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </template>
       <template v-slot:after>
         <div
-          class="px-2 pt-2 h-full overflow-auto card-container border-l border-border-default"
+          class="px-2 pt-2 h-full overflow-auto bg-card-glass-bg border-l border-border-default"
         >
           <div class="font-bold py-2 px-1 text-sm font-medium">
             {{ t("alert_templates.variable_guide_header") }}
@@ -160,9 +156,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </div>
               <div
                 data-test="add-template-sample-template-text"
-                class="bg-black/[0.07] px-2 rounded"
+                class="bg-black/[0.07] px-2 rounded-default"
               >
-                <pre class="text-[10px] my-0">
+                <pre class="text-3xs my-0">
                     {{ template.body }}
                   </pre
                 >
@@ -172,7 +168,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
       </template>
     </OSplitter>
-  </div>
+  </OPageLayout>
 </template>
 <script lang="ts" setup>
 import {
@@ -195,7 +191,7 @@ import { useOForm } from "@/lib/forms/Form/useOForm";
 import type { TemplateData } from "@/ts/interfaces/index";
 import { useRouter } from "vue-router";
 import AppTabs from "@/components/common/AppTabs.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import { useReo } from "@/services/reodotdev_analytics";
 import {
   validateTemplateBody,
diff --git a/web/src/components/alerts/AlertHistory.spec.ts b/web/src/components/alerts/AlertHistory.spec.ts
index 921dcd6408..4d4ca8235a 100644
--- a/web/src/components/alerts/AlertHistory.spec.ts
+++ b/web/src/components/alerts/AlertHistory.spec.ts
@@ -293,12 +293,8 @@ describe("AlertHistory.vue", () => {
       expect((wrapper.vm as any).loading).toBe(false);
     });
 
-    it("rows contain sequential index numbers prefixed with #", async () => {
-      await mountComponent();
-      const rows = (wrapper.vm as any).rows;
-      expect(rows[0]["#"]).toBe(1);
-      expect(rows[1]["#"]).toBe(2);
-    });
+    // Row numbering is now OTable's built-in `show-index` (page-offset aware);
+    // `rows` no longer carries a "#" field.
   });
 
   describe("async paths — rejected", () => {
diff --git a/web/src/components/alerts/AlertHistory.vue b/web/src/components/alerts/AlertHistory.vue
index 58ba1d80bf..d53828b0f6 100644
--- a/web/src/components/alerts/AlertHistory.vue
+++ b/web/src/components/alerts/AlertHistory.vue
@@ -15,16 +15,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div
+  <OPageLayout
     data-test="alert-history-page"
-    class="w-full h-full flex flex-col min-h-0"
+    :title="t('alerts.history')"
+    title-data-test="alerts-history-title"
+    :back="{ onClick: goBack, dataTest: 'alert-history-back-btn' }"
+    bleed
   >
-    <AppPageHeader
-      :title="t('alerts.history')"
-      title-data-test="alerts-history-title"
-      :back="{ onClick: goBack, dataTest: 'alert-history-back-btn' }"
-      class="shrink-0 px-4 border-b border-border-default"
-    >
       <template #actions>
         <DateTime
           ref="dateTimeRef"
@@ -53,11 +50,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <template #icon-left>
             <OIcon
               class="o2-search-input-icon"
-              :class="
-                store.state.theme === 'dark'
-                  ? 'o2-search-input-icon-dark'
-                  : 'o2-search-input-icon-light'
-              "
               name="search" size="sm"
             />
           </template>
@@ -88,9 +80,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <OTooltip :content="t('common.refresh') || 'Refresh'" />
         </OButton>
       </template>
-    </AppPageHeader>
-    <div class="flex-1 min-h-0 px-2.5 pt-2">
-      <div class="alert-history-table card-container h-full">
+    <div class="flex-1 min-h-0 overflow-hidden">
+      <div class="bg-card-glass-bg h-full">
         <OTable
           data-test="alert-history-table"
           :data="rows"
@@ -105,6 +96,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :sort-by="sortBy"
           :sort-order="sortOrder"
           :loading="loading"
+          show-index
           :show-global-filter="false"
           :default-columns="false"
           width="100%"
@@ -137,7 +129,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <template #cell-is_realtime="{ value }">
             <OIcon
               :name="value ? 'check-circle' : 'schedule'"
-              :class="value ? 'text-(--o2-positive)' : 'text-text-primary'"
+              :class="value ? 'text-status-positive' : 'text-text-body'"
               size="xs"
             >
               <OTooltip :content="value ? 'Real-time' : 'Scheduled'" />
@@ -147,7 +139,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <template #cell-is_silenced="{ value }">
             <OIcon
               :name="value ? 'volume-off' : 'volume-up'"
-              :class="value ? 'text-text-primary' : 'text-(--o2-positive)'"
+              :class="value ? 'text-text-body' : 'text-status-positive'"
               size="md"
             >
               <OTooltip :content="value ? 'Silenced' : 'Not Silenced'" />
@@ -159,8 +151,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </template>
 
           <template #cell-dedup="{ row }">
-            <span v-if="!row.dedup_enabled" class="text-text-primary">-</span>
-            <div v-else-if="row.dedup_suppressed" class="text-red-500">
+            <span v-if="!row.dedup_enabled" class="text-text-secondary">-</span>
+            <div v-else-if="row.dedup_suppressed" class="text-status-error-text">
               <OIcon name="block" size="sm">
                 <OTooltip>
                   <template #content>
@@ -183,7 +175,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </OIcon>
               <span class="text-xs ml-1">×{{ row.group_size || 1 }}</span>
             </div>
-            <div v-else class="text-green-500 flex items-center justify-center">
+            <div v-else class="text-status-positive flex items-center justify-center">
               <OIcon name="check-circle" size="md">
                 <OTooltip>
                   <template #content>
@@ -369,15 +361,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   />
                   Error Details
                 </div>
-                <div class="rounded border border-solid border-negative/30 p-2 mt-2 bg-red-500/5">
+                <div class="rounded-default border border-solid border-negative/30 p-2 mt-2 bg-status-error-bg">
                   <pre
                     class="text-sm"
                     style="
                       white-space: pre-wrap;
                       word-break: break-word;
                       margin: 0;
-                      font-family: 'Courier New', monospace;
-                      font-size: 12px;
+                      font-family: var(--font-mono);
+                      font-size: var(--text-xs);
                     "
                     >{{ selectedRow.error }}</pre
                   >
@@ -397,15 +389,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   />
                   Response
                 </div>
-                <div class="rounded border border-solid border-positive/30 p-2 mt-2 bg-green-500/5">
+                <div class="rounded-default border border-solid border-positive/30 p-2 mt-2 bg-status-success-bg">
                   <pre
                     class="text-sm"
                     style="
                       white-space: pre-wrap;
                       word-break: break-word;
                       margin: 0;
-                      font-family: 'Courier New', monospace;
-                      font-size: 12px;
+                      font-family: var(--font-mono);
+                      font-size: var(--text-xs);
                     "
                     >{{ selectedRow.success_response }}</pre
                   >
@@ -424,10 +416,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       @click:primary="closeErrorDialog"
     >
       <template #header-left>
-        <OIcon name="error" size="sm" class="text-red-500" />
+        <OIcon name="error" size="sm" class="text-status-error-text" />
       </template>
       <template #header-right>
-        <div class="flex items-center text-[13px] opacity-70 ml-9 text-xs">
+        <div class="flex items-center text-compact opacity-70 ml-9 text-xs">
           <span class="mr-1">Last error:</span>
           <OIcon name="schedule" size="xs" class="mr-1" />
           {{ errorMessage.last_error_timestamp && new Date(errorMessage.last_error_timestamp / 1000).toLocaleString() }}
@@ -436,12 +428,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
       <div class="mb-4">
         <div class="text-sm font-semibold tracking-[0.02em] opacity-80 mb-2">Error Summary</div>
-        <div class="p-4 rounded-lg font-mono text-[13px] leading-[1.6] whitespace-pre-wrap wrap-break-word bg-[rgba(239,68,68,0.08)] border border-solid border-[rgba(239,68,68,0.2)] text-[#dc2626]">
+        <div class="p-4 rounded-default font-mono text-compact leading-[1.6] whitespace-pre-wrap wrap-break-word bg-status-error-bg border border-solid border-status-negative text-status-error-text">
           {{ errorMessage.error }}
         </div>
       </div>
     </ODialog>
-  </div>
+  </OPageLayout>
 </template>
 
 <script setup lang="ts">
@@ -457,7 +449,7 @@ import OTimeCell from "@/lib/core/Table/cells/OTimeCell.vue";
 import type { OTableColumnDef } from "@/lib/core/Table/OTable.types";
 import alertsService from "@/services/alerts";
 import NoData from "@/components/shared/grid/NoData.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import OTag from "@/lib/core/Badge/OTag.vue";
 import OButton from '@/lib/core/Button/OButton.vue';
@@ -466,7 +458,7 @@ import OSelect from "@/lib/forms/Select/OSelect.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
 import { toast } from "@/lib/feedback/Toast/useToast";
 import OSeparator from '@/lib/core/Separator/OSeparator.vue';
-import { TABLE_INDEX_COL_SIZE, COL } from "@/lib/core/Table/OTable.types";
+import { COL } from "@/lib/core/Table/OTable.types";
 
 const { t } = useI18n();
 const store = useStore();
@@ -514,7 +506,6 @@ const errorMessage = ref("");
 
 // Table columns
 const columns = ref<OTableColumnDef[]>([
-  { id: "#", header: "#", accessorKey: "#", size: TABLE_INDEX_COL_SIZE, minSize: TABLE_INDEX_COL_SIZE, maxSize: TABLE_INDEX_COL_SIZE, sortable: false, meta: { align: "left" } },
   {
     id: "alert_name",
     header: t("alerts.alertName") || "Alert Name",
@@ -726,7 +717,6 @@ const fetchAlertHistory = async () => {
       rows.value = (historyData.hits || []).map((hit: any, index: number) => ({
         ...hit,
         id: `${hit.timestamp}_${index}`,
-        "#": (index + 1) + (currentPage.value - 1) * pageSize.value,
       }));
 
       totalCount.value = historyData.total || 0;
@@ -852,13 +842,3 @@ watch(
   },
 );
 </script>
-
-<style>
-.alert-history-table :deep(table) {
-  width: 100%;
-}
-
-.alert-history-table :deep(table) td {
-  vertical-align: middle;
-}
-</style>
diff --git a/web/src/components/alerts/AlertHistoryDrawer.spec.ts b/web/src/components/alerts/AlertHistoryDrawer.spec.ts
index 549018435f..7fdd2a652e 100644
--- a/web/src/components/alerts/AlertHistoryDrawer.spec.ts
+++ b/web/src/components/alerts/AlertHistoryDrawer.spec.ts
@@ -592,8 +592,8 @@ describe("AlertHistoryDrawer.vue", () => {
       const vm = wrapper.vm as any;
       // Store theme is "dark" by default in test helper
       // getRowClass takes a row object with status property
-      expect(vm.getRowClass({ status: "firing" })).toBe("!bg-[#2d1b1b]");
-      expect(vm.getRowClass({ status: "error" })).toBe("!bg-[#2d1b1b]");
+      expect(vm.getRowClass({ status: "firing" })).toBe("!bg-status-error-bg");
+      expect(vm.getRowClass({ status: "error" })).toBe("!bg-status-error-bg");
       expect(vm.getRowClass({ status: "ok" })).toBe("");
       expect(vm.getRowClass({ status: "success" })).toBe("");
     });
diff --git a/web/src/components/alerts/AlertHistoryDrawer.vue b/web/src/components/alerts/AlertHistoryDrawer.vue
index bd2ad4fa2d..405c3d905f 100644
--- a/web/src/components/alerts/AlertHistoryDrawer.vue
+++ b/web/src/components/alerts/AlertHistoryDrawer.vue
@@ -16,6 +16,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <ODrawer data-test="alert-history-drawer"
+    bleed
     :open="open"
     :width="65"
     :title="alertDetails?.name"
@@ -35,10 +36,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <div
               v-if="alertDetails"
               :class="[
-                'flex items-center gap-1 px-2 py-1 rounded-md border shrink-0',
-                store.state.theme === 'dark'
-                  ? 'bg-gray-800/50 border-gray-600'
-                  : 'bg-gray-50 border-gray-200',
+                'flex items-center gap-1 px-2 py-1 rounded-default border shrink-0',
+                'bg-surface-subtle border-border-default',
               ]"
             >
               <OIcon
@@ -55,9 +54,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <span
                 :class="[
                   'text-xs font-semibold',
-                  store.state.theme === 'dark'
-                    ? 'text-gray-200'
-                    : 'text-gray-800',
+                  'text-text-body',
                 ]"
               >
                 {{
@@ -101,7 +98,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <template #header-right>
       <div class="col-auto flex items-center gap-1">
         <DateTime
-          :style="activeTab !== 'history' ? 'visibility: hidden' : ''"
+          :class="activeTab !== 'history' ? 'invisible' : ''"
           ref="dateTimeRef"
           auto-apply
           :default-type="dateTimeType"
@@ -117,13 +114,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </template>
 
     <!-- Content -->
-    <div class="flex flex-col h-[calc(100vh-4rem)]" v-if="alertDetails">
+    <div class="flex flex-col h-full min-h-0" v-if="alertDetails">
       <!-- Tab Panels -->
       <OTabPanels
         v-model="activeTab"
         animated
-        class="flex-1 overflow-hidden bg-transparent"
-        style="display: flex; flex-direction: column"
+        class="flex-1 overflow-hidden bg-transparent flex flex-col"
       >
         <!-- History Panel -->
         <OTabPanel
@@ -158,11 +154,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               />
 
               <div
-                class="rounded-lg overflow-hidden border flex flex-col flex-1"
+                class="rounded-default overflow-hidden border flex flex-col flex-1"
                 :class="
-                  store.state.theme === 'dark'
-                    ? 'border-[#374151]'
-                    : 'border-[#e5e7eb] bg-[#f9fafb]'
+                  'border-border-default bg-surface-panel'
                 "
               >
                 <OTable
@@ -183,8 +177,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 >
                   <template #[`cell-#`]="{ row }">
                     <span
-                      class="text-[13px] tabular-nums"
-                      :class="store.state.theme === 'dark' ? 'text-gray-500' : 'text-gray-400'"
+                      class="text-compact tabular-nums"
+                      :class="'text-text-secondary'"
                     >
                       {{ row._displayIndex ?? '—' }}
                     </span>
@@ -200,7 +194,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         @click="toggleFlappingGroup(row.timestamp)"
                       />
                       <OTag type="alertState" value="flapping" class="cursor-pointer shrink-0" @click="toggleFlappingGroup(row.timestamp)" />
-                      <span class="text-[11px] truncate" style="color: var(--color-text-secondary)">
+                      <span class="text-2xs truncate text-text-secondary">
                         {{ row._children.length }} rows · {{ row._duration }}
                       </span>
                     </div>
@@ -216,39 +210,39 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </template>
 
                   <template #cell-timestamp="{ row }">
-                    <span class="text-[13px] tabular-nums whitespace-nowrap" :class="row._child ? 'pl-5 opacity-70' : ''">
+                    <span class="text-compact tabular-nums whitespace-nowrap" :class="row._child ? 'pl-5 opacity-70' : ''">
                       {{ formatTimestampFull(row.timestamp) }}
                     </span>
                   </template>
 
                   <template #cell-evaluation_time="{ row }">
-                    <span class="text-[13px] tabular-nums">
+                    <span class="text-compact tabular-nums">
                       {{ row.evaluation_took_in_secs ? row.evaluation_took_in_secs.toFixed(3) + "s" : "—" }}
                     </span>
                   </template>
 
                   <template #cell-query_time="{ row }">
-                    <span class="text-[13px] tabular-nums">
+                    <span class="text-compact tabular-nums">
                       {{ row.query_took ? row.query_took + "ms" : "—" }}
                     </span>
                   </template>
 
                   <template #cell-anomaly_count="{ row }">
                     <span
-                      class="text-[13px] tabular-nums"
-                      :class="row.anomaly_count > 0 ? 'text-red-500 font-medium' : ''"
+                      class="text-compact tabular-nums"
+                      :class="row.anomaly_count > 0 ? 'text-status-error-text font-medium' : ''"
                     >
                       {{ row.anomaly_count != null ? row.anomaly_count : "—" }}
                     </span>
                   </template>
 
                   <template #cell-error="{ row }">
-                    <span class="text-[13px]">{{ row.error || "—" }}</span>
+                    <span class="text-compact">{{ row.error || "—" }}</span>
                   </template>
 
                   <template #bottom>
-                    <div class="flex items-center w-full h-[48px]">
-                      <div class="o2-table-footer-title flex items-center w-[220px]">
+                    <div class="flex items-center w-full h-12">
+                      <div class="text-xs font-normal flex items-center w-55">
                         {{ resultTotal }} {{ t("alerts.alertDetails.results") }}
                       </div>
                     </div>
@@ -272,28 +266,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <!-- Anomaly detection condition view — mirrors the alert SQL code block -->
             <template v-if="isAnomaly">
               <div
-                class="rounded-lg overflow-hidden border flex flex-col flex-1"
+                class="rounded-default overflow-hidden border flex flex-col flex-1"
                 :class="
-                  store.state.theme === 'dark'
-                    ? 'border-[#374151]'
-                    : 'border-[#e5e7eb] bg-[#f9fafb]'
+                  'border-border-default bg-surface-panel'
                 "
               >
                 <div
                   class="flex items-center justify-between py-1.5 px-2.5 border-b shrink-0"
                   :class="
-                    store.state.theme === 'dark'
-                      ? 'border-[#374151]'
-                      : 'bg-[#f3f4f6] border-[#e5e7eb]'
+                    'bg-surface-subtle border-border-default'
                   "
                 >
                   <div class="flex items-center gap-1.5">
                     <span
-                      class="text-[11px] font-medium"
+                      class="text-2xs font-medium"
                       :class="
-                        store.state.theme === 'dark'
-                          ? 'text-gray-400'
-                          : 'text-gray-500'
+                        'text-text-secondary'
                       "
                     >
                       SQL
@@ -311,7 +299,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </OButton>
                 </div>
                 <pre
-                  class="p-[10px_14px] font-mono whitespace-pre-wrap overflow-x-auto text-[13px] m-0 leading-relaxed flex-1 overflow-y-auto"
+                  class="p-[10px_14px] font-mono whitespace-pre-wrap overflow-x-auto text-compact m-0 leading-relaxed flex-1 overflow-y-auto"
                   >{{ anomalySql || t("alerts.alertDetails.noCondition") }}</pre
                 >
               </div>
@@ -320,29 +308,23 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <!-- Regular alert condition view -->
             <template v-else>
               <div
-                class="rounded-lg overflow-hidden border flex flex-col flex-1"
+                class="rounded-default overflow-hidden border flex flex-col flex-1"
                 :class="
-                  store.state.theme === 'dark'
-                    ? 'border-[#374151]'
-                    : 'border-[#e5e7eb] bg-[#f9fafb]'
+                  'border-border-default bg-surface-panel'
                 "
               >
                 <!-- Code block header bar — stays fixed -->
                 <div
                   class="flex items-center justify-between py-1.5 px-2.5 border-b shrink-0"
                   :class="
-                    store.state.theme === 'dark'
-                      ? 'border-[#374151]'
-                      : 'bg-[#f3f4f6] border-[#e5e7eb]'
+                    'bg-surface-subtle border-border-default'
                   "
                 >
                   <div class="flex items-center gap-1.5">
                     <span
-                      class="text-[11px] font-medium"
+                      class="text-2xs font-medium"
                       :class="
-                        store.state.theme === 'dark'
-                          ? 'text-gray-400'
-                          : 'text-gray-500'
+                        'text-text-secondary'
                       "
                     >
                       {{
@@ -382,7 +364,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </div>
                 <!-- Code content — scrolls internally -->
                 <pre
-                  class="p-[10px_14px] font-mono whitespace-pre-wrap overflow-x-auto text-[13px] m-0 leading-relaxed flex-1 overflow-y-auto"
+                  class="p-[10px_14px] font-mono whitespace-pre-wrap overflow-x-auto text-compact m-0 leading-relaxed flex-1 overflow-y-auto"
                   >{{
                     alertDetails.conditions !== "" &&
                     alertDetails.conditions !== "--"
@@ -401,22 +383,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <!-- Description (only show if exists) -->
             <div v-if="alertDetails.description" class="mt-3 shrink-0">
               <div
-                class="flex items-center gap-1.5 text-[12px] font-semibold uppercase tracking-wider mb-1"
+                class="flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider mb-1"
                 :class="
-                  store.state.theme === 'dark'
-                    ? 'text-gray-400'
-                    : 'text-gray-500'
+                  'text-text-secondary'
                 "
               >
                 <OIcon name="info-outline" size="xs" />
                 {{ t("common.description") }}
               </div>
               <div
-                class="text-[13px] px-3 py-2 rounded leading-relaxed"
+                class="text-compact px-3 py-2 rounded-default leading-relaxed"
                 :class="
-                  store.state.theme === 'dark'
-                    ? 'bg-gray-800 text-gray-300'
-                    : 'bg-gray-50 text-gray-700'
+                  'bg-surface-panel text-text-body'
                 "
               >
                 {{ alertDetails.description }}
@@ -777,15 +755,16 @@ const historyTableColumns = computed(() =>
 
 const getRowClass = (row: any) => {
   if (row?._flappingGroup) {
-    return store.state.theme === "dark" ? "!bg-[#1e1a2e]" : "!bg-[#f5f3ff]";
+    // Violet-tinted highlight for flapping-group rows; token carries the theme.
+    return "!bg-[color-mix(in_srgb,var(--color-sql-accent)_8%,var(--color-surface-base))]";
   }
   if (row?._child) {
-    return store.state.theme === "dark" ? "!bg-[#1a1a1a]" : "!bg-[#fafafa]";
+    return "!bg-surface-subtle";
   }
   const status = row?.status?.toLowerCase();
   const isFiringStatus = status === "firing" || status === "error" || status === "anomaly" || status === "completed";
   if (isFiringStatus) {
-    return store.state.theme === "dark" ? "!bg-[#2d1b1b]" : "!bg-[#fff5f5]";
+    return "!bg-status-error-bg";
   }
   return "";
 };
diff --git a/web/src/components/alerts/AlertHistorySummary.spec.ts b/web/src/components/alerts/AlertHistorySummary.spec.ts
deleted file mode 100644
index c6abd5749b..0000000000
--- a/web/src/components/alerts/AlertHistorySummary.spec.ts
+++ /dev/null
@@ -1,486 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { describe, expect, it, beforeEach, vi, afterEach } from "vitest";
-import { mount, flushPromises, VueWrapper } from "@vue/test-utils";
-import AlertHistorySummary from "@/components/alerts/AlertHistorySummary.vue";
-import i18n from "@/locales";
-import store from "@/test/unit/helpers/store";
-import router from "@/test/unit/helpers/router";
-
-// Mock services
-vi.mock("@/services/alerts", () => ({
-  default: {
-    getHistory: vi.fn(),
-  },
-}));
-
-import alertsService from "@/services/alerts";
-
-
-const node = document.createElement("div");
-node.setAttribute("id", "app");
-document.body.appendChild(node);
-
-describe("AlertHistorySummary.vue", () => {
-  let wrapper: VueWrapper<any>;
-
-  const mockHistoryData = {
-    hits: [
-      {
-        alert_name: "CPU Alert",
-        timestamp: 1699900000000000,
-        status: "completed",
-      },
-      {
-        alert_name: "CPU Alert",
-        timestamp: 1699890000000000,
-        status: "condition_not_satisfied",
-      },
-      {
-        alert_name: "Memory Alert",
-        timestamp: 1699880000000000,
-        status: "condition_not_satisfied",
-      },
-      {
-        alert_name: "Disk Alert",
-        timestamp: 1699870000000000,
-        status: "completed",
-      },
-      {
-        alert_name: "Disk Alert",
-        timestamp: 1699860000000000,
-        status: "completed",
-      },
-    ],
-    total: 5,
-  };
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-    vi.mocked(alertsService.getHistory).mockResolvedValue({
-      data: mockHistoryData,
-    } as any);
-  });
-
-  afterEach(() => {
-    wrapper?.unmount();
-  });
-
-  const mountComponent = async () => {
-    wrapper = mount(AlertHistorySummary, {
-      attachTo: node,
-      global: {
-        plugins: [i18n, store, router],
-      },
-    });
-    await flushPromises();
-  };
-
-  describe("Component Mounting", () => {
-    it("should mount successfully", async () => {
-      await mountComponent();
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it("should have correct data-test attribute", async () => {
-      await mountComponent();
-      expect(wrapper.find('[data-test="alert-history-summary-table"]').exists()).toBe(
-        true,
-      );
-    });
-
-    it("should fetch history summary on mount", async () => {
-      await mountComponent();
-      expect(alertsService.getHistory).toHaveBeenCalled();
-    });
-
-    it("should fetch data for last 7 days", async () => {
-      await mountComponent();
-      const callArgs = vi.mocked(alertsService.getHistory).mock.calls[0];
-      const queryParams = callArgs[1];
-
-      expect(queryParams).toHaveProperty("start_time");
-      expect(queryParams).toHaveProperty("end_time");
-      expect(queryParams.size).toBe(10000);
-    });
-  });
-
-  describe("Data Display", () => {
-    it("should display summary table with correct columns", async () => {
-      await mountComponent();
-      // OTable renders with data-test="alert-history-summary-table"
-      expect(wrapper.find('[data-test="alert-history-summary-table"]').exists()).toBe(true);
-    });
-
-    it("should aggregate data by alert name", async () => {
-      await mountComponent();
-      const vm = wrapper.vm as any;
-
-      // Should have 3 unique alerts: CPU Alert, Memory Alert, Disk Alert
-      expect(vm.historyRows.length).toBe(3);
-    });
-
-    it("should calculate total evaluations correctly", async () => {
-      await mountComponent();
-      const vm = wrapper.vm as any;
-
-      const cpuAlert = vm.historyRows.find(
-        (row: any) => row.alert_name === "CPU Alert",
-      );
-      expect(cpuAlert.total_evaluations).toBe(2);
-
-      const diskAlert = vm.historyRows.find(
-        (row: any) => row.alert_name === "Disk Alert",
-      );
-      expect(diskAlert.total_evaluations).toBe(2);
-    });
-
-    it("should calculate firing count correctly", async () => {
-      await mountComponent();
-      const vm = wrapper.vm as any;
-
-      const cpuAlert = vm.historyRows.find(
-        (row: any) => row.alert_name === "CPU Alert",
-      );
-      expect(cpuAlert.firing_count).toBe(1); // One completed status
-
-      const diskAlert = vm.historyRows.find(
-        (row: any) => row.alert_name === "Disk Alert",
-      );
-      expect(diskAlert.firing_count).toBe(2); // Two completed statuses
-    });
-
-    it("should show current state from most recent evaluation", async () => {
-      await mountComponent();
-      const vm = wrapper.vm as any;
-
-      const cpuAlert = vm.historyRows.find(
-        (row: any) => row.alert_name === "CPU Alert",
-      );
-      expect(cpuAlert.current_state).toBe("completed"); // Most recent status
-
-      const memoryAlert = vm.historyRows.find(
-        (row: any) => row.alert_name === "Memory Alert",
-      );
-      expect(memoryAlert.current_state).toBe("condition_not_satisfied");
-    });
-
-    it("should display last evaluation timestamp", async () => {
-      await mountComponent();
-      const vm = wrapper.vm as any;
-
-      const cpuAlert = vm.historyRows.find(
-        (row: any) => row.alert_name === "CPU Alert",
-      );
-      expect(cpuAlert.last_evaluation).toBe(1699900000000000);
-    });
-  });
-
-  describe("State Icons and Colors", () => {
-    it("should return correct icon for firing state", async () => {
-      await mountComponent();
-      const vm = wrapper.vm as any;
-      expect(vm.getStateIcon("firing")).toBe("error");
-      expect(vm.getStateIcon("error")).toBe("error");
-    });
-
-    it("should return correct icon for ok state", async () => {
-      await mountComponent();
-      const vm = wrapper.vm as any;
-      expect(vm.getStateIcon("ok")).toBe("check-circle");
-      expect(vm.getStateIcon("completed")).toBe("check-circle");
-    });
-
-    it("should return correct icon for unknown state", async () => {
-      await mountComponent();
-      const vm = wrapper.vm as any;
-      expect(vm.getStateIcon("unknown")).toBe("info");
-    });
-
-    it("should return correct CSS class for firing state", async () => {
-      await mountComponent();
-      const vm = wrapper.vm as any;
-      // getStateColorClass returns CSS class strings
-      expect(vm.getStateColorClass("firing")).toContain("negative");
-      expect(vm.getStateColorClass("error")).toContain("negative");
-    });
-
-    it("should return correct CSS class for ok state", async () => {
-      await mountComponent();
-      const vm = wrapper.vm as any;
-      expect(vm.getStateColorClass("ok")).toContain("positive");
-      expect(vm.getStateColorClass("completed")).toContain("positive");
-    });
-
-    it("should return correct CSS class for unknown state", async () => {
-      await mountComponent();
-      const vm = wrapper.vm as any;
-      expect(vm.getStateColorClass("unknown")).toContain("gray");
-    });
-  });
-
-  describe("Frequency Formatting", () => {
-    it("should format frequency in seconds", async () => {
-      await mountComponent();
-      const vm = wrapper.vm as any;
-      expect(vm.formatFrequency(30)).toBe("30s");
-      expect(vm.formatFrequency(45)).toBe("45s");
-    });
-
-    it("should format frequency in minutes", async () => {
-      await mountComponent();
-      const vm = wrapper.vm as any;
-      expect(vm.formatFrequency(120)).toBe("2m"); // 2 minutes
-      expect(vm.formatFrequency(300)).toBe("5m"); // 5 minutes
-    });
-
-    it("should format frequency in hours", async () => {
-      await mountComponent();
-      const vm = wrapper.vm as any;
-      expect(vm.formatFrequency(3600)).toBe("1h"); // 1 hour
-      expect(vm.formatFrequency(7200)).toBe("2h"); // 2 hours
-    });
-
-    it("should return N/A for null or undefined frequency", async () => {
-      await mountComponent();
-      const vm = wrapper.vm as any;
-      expect(vm.formatFrequency(null)).toBe("N/A");
-      expect(vm.formatFrequency(undefined)).toBe("N/A");
-    });
-  });
-
-  describe("Timestamp Formatting", () => {
-    it("should format timestamp correctly", async () => {
-      await mountComponent();
-      const vm = wrapper.vm as any;
-      const formatted = vm.formatTimestamp(1699900000000000);
-      expect(formatted).toMatch(/\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}/);
-    });
-
-    it("should return N/A for null/undefined timestamp", async () => {
-      await mountComponent();
-      const vm = wrapper.vm as any;
-      expect(vm.formatTimestamp(null)).toBe("N/A");
-      expect(vm.formatTimestamp(undefined)).toBe("N/A");
-      expect(vm.formatTimestamp(0)).toBe("N/A");
-    });
-  });
-
-  describe("Sorting", () => {
-    it("should have sorting enabled on the table via OTable client sorting", async () => {
-      await mountComponent();
-      // OTable with sorting="client" handles sort internally — just verify data is present
-      const vm = wrapper.vm as any;
-      expect(Array.isArray(vm.historyRows)).toBe(true);
-    });
-
-    it("should have historyRows populated after fetch", async () => {
-      await mountComponent();
-      const vm = wrapper.vm as any;
-      expect(vm.historyRows.length).toBeGreaterThan(0);
-    });
-  });
-
-  describe("Row Click - Open Drawer", () => {
-    it("should call openDrawer method when row is clicked", async () => {
-      await mountComponent();
-      const vm = wrapper.vm as any;
-
-      // Call openDrawer directly
-      vm.openDrawer({ alert_name: "Test Alert" });
-      await flushPromises();
-
-      expect(wrapper.emitted("open-drawer")).toBeTruthy();
-      expect(wrapper.emitted("open-drawer")?.[0]).toEqual(["Test Alert"]);
-    });
-  });
-
-  describe("Empty State", () => {
-    it("should show no data message when no history is available", async () => {
-      vi.useFakeTimers();
-
-      vi.mocked(alertsService.getHistory).mockResolvedValueOnce({
-        data: { hits: [], total: 0 },
-      } as any);
-
-      await mountComponent();
-      await flushPromises();
-
-      // OTable holds the loading skeleton for at least 2 seconds (MIN_SKELETON_MS).
-      // Advance past that hold so showEmpty becomes true and the #empty slot renders.
-      vi.advanceTimersByTime(2500);
-      await flushPromises();
-
-      vi.useRealTimers();
-
-      // The #empty slot renders OTableEmpty which contains the i18n text
-      // "No alert history data available" (alerts.noHistoryData key in en.json).
-      expect(wrapper.find('[data-test="o2-table-empty"]').exists()).toBe(true);
-      expect(wrapper.find('[data-test="o2-table-empty"]').text()).toContain(
-        "No alert history data available",
-      );
-    });
-  });
-
-  describe("Error Handling", () => {
-    it("should handle API errors gracefully", async () => {
-      vi.mocked(alertsService.getHistory).mockRejectedValueOnce(
-        new Error("API Error"),
-      );
-
-      await mountComponent();
-      await flushPromises();
-
-      // Component should still exist and not crash
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it("should dispatch notification on error", async () => {
-      const dispatchSpy = vi.spyOn(store, "dispatch");
-      vi.mocked(alertsService.getHistory).mockRejectedValueOnce(
-        new Error("Network error"),
-      );
-
-      await mountComponent();
-      await flushPromises();
-
-      expect(dispatchSpy).toHaveBeenCalledWith(
-        "showNotification",
-        expect.objectContaining({
-          color: "negative",
-        }),
-      );
-    });
-  });
-
-  describe("Loading State", () => {
-    it("should complete loading after data is fetched", async () => {
-      await mountComponent();
-      await flushPromises();
-
-      // loading ref should be false after successful fetch
-      const vm = wrapper.vm as any;
-      expect(vm.loading).toBe(false);
-    });
-  });
-
-  describe("Organization Change", () => {
-    it("should have watcher for organization change", async () => {
-      await mountComponent();
-      const vm = wrapper.vm as any;
-
-      // Check that component has mounted and data is loaded
-      expect(vm.historyRows.length).toBeGreaterThan(0);
-    });
-  });
-
-  describe("Exposed Methods", () => {
-    it("should expose refresh method", async () => {
-      await mountComponent();
-      const vm = wrapper.vm as any;
-
-      expect(vm.refresh).toBeDefined();
-      expect(typeof vm.refresh).toBe("function");
-    });
-
-    it("should refetch data when refresh is called", async () => {
-      await mountComponent();
-      const getHistorySpy = vi.spyOn(alertsService, "getHistory");
-      const vm = wrapper.vm as any;
-
-      vi.clearAllMocks();
-      await vm.refresh();
-      await flushPromises();
-
-      expect(getHistorySpy).toHaveBeenCalled();
-    });
-  });
-
-  describe("Pagination", () => {
-    it("should have loading ref initialized to false after mount", async () => {
-      await mountComponent();
-      const vm = wrapper.vm as any;
-      expect(vm.loading).toBe(false);
-    });
-
-    it("should have historyRows array available", async () => {
-      await mountComponent();
-      const vm = wrapper.vm as any;
-      // OTable uses client-side pagination via pagination="client"
-      expect(Array.isArray(vm.historyRows)).toBe(true);
-    });
-  });
-
-  describe("Data Aggregation", () => {
-    it("should handle alerts with no alert_name gracefully", async () => {
-      vi.mocked(alertsService.getHistory).mockResolvedValueOnce({
-        data: {
-          hits: [
-            { alert_name: null, timestamp: 1699900000000000, status: "condition_not_satisfied" },
-            { alert_name: "Valid Alert", timestamp: 1699890000000000, status: "completed" },
-          ],
-          total: 2,
-        },
-      } as any);
-
-      await mountComponent();
-      const vm = wrapper.vm as any;
-
-      // Should only have 1 alert (null alert_name should be skipped)
-      expect(vm.historyRows.length).toBe(1);
-      expect(vm.historyRows[0].alert_name).toBe("Valid Alert");
-    });
-
-    it("should handle empty hits array", async () => {
-      vi.mocked(alertsService.getHistory).mockResolvedValueOnce({
-        data: {
-          hits: [],
-          total: 0,
-        },
-      } as any);
-
-      await mountComponent();
-      const vm = wrapper.vm as any;
-
-      expect(vm.historyRows.length).toBe(0);
-    });
-  });
-
-  describe("Table Columns", () => {
-    it("should have all required columns", async () => {
-      await mountComponent();
-      const vm = wrapper.vm as any;
-
-      // OTable columns use 'id' property (OTableColumnDef type)
-      const columnIds = vm.columns.map((col: any) => col.id);
-      expect(columnIds).toContain("alert_name");
-      expect(columnIds).toContain("total_evaluations");
-      expect(columnIds).toContain("firing_count");
-      expect(columnIds).toContain("current_state");
-      expect(columnIds).toContain("frequency");
-      expect(columnIds).toContain("last_evaluation");
-    });
-
-    it("should have sortable columns", async () => {
-      await mountComponent();
-      const vm = wrapper.vm as any;
-
-      vm.columns.forEach((col: any) => {
-        expect(col.sortable).toBe(true);
-      });
-    });
-  });
-});
diff --git a/web/src/components/alerts/AlertHistorySummary.vue b/web/src/components/alerts/AlertHistorySummary.vue
deleted file mode 100644
index 74e1942dbd..0000000000
--- a/web/src/components/alerts/AlertHistorySummary.vue
+++ /dev/null
@@ -1,280 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <div class="alert-history-summary h-full w-full">
-    <OTable
-      data-test="alert-history-summary-table"
-      :data="historyRows"
-      :columns="columns"
-      row-key="alert_name"
-      pagination="client"
-      :page-size="100"
-      :loading="loading"
-      sorting="client"
-      filter-mode="client"
-      :default-columns="false"
-      :show-global-filter="false"
-      class="h-full"
-    >
-      <template #cell-alert_name="{ row }">
-        <div
-          class="flex items-center cursor-pointer"
-          @click="openDrawer(row)"
-        >
-          <span class="font-medium">{{ row.alert_name }}</span>
-        </div>
-      </template>
-
-      <template #cell-current_state="{ row }">
-        <OTag type="alertState" :value="row.current_state" />
-      </template>
-
-      <template #cell-frequency="{ row }">
-        <span>{{ formatFrequency(row.frequency) }}</span>
-      </template>
-
-      <template #cell-last_evaluation="{ row }">
-        <OTimeCell
-          :value="row.last_evaluation"
-          unit="us"
-          mode="absolute"
-          :timezone="store.state.timezone"
-          empty-label="—"
-        />
-      </template>
-
-      <template #empty>
-        <div class="w-full text-center py-8">
-          <OIcon name="history" size="xl" class="text-text-primary" />
-          <div class="mt-2 text-text-primary">
-            {{ t("alerts.noHistoryData") }}
-          </div>
-        </div>
-      </template>
-    </OTable>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
-import { useStore } from "vuex";
-import { useI18n } from "vue-i18n";
-import OIcon from "@/lib/core/Icon/OIcon.vue";
-import OTag from "@/lib/core/Badge/OTag.vue";
-import OTable from "@/lib/core/Table/OTable.vue";
-import OTimeCell from "@/lib/core/Table/cells/OTimeCell.vue";
-import type { OTableColumnDef } from "@/lib/core/Table/OTable.types";
-import { COL } from "@/lib/core/Table/OTable.types";
-import alertsService from "@/services/alerts";
-import { formatToReadable } from "@/utils/date";
-
-const { t } = useI18n();
-const store = useStore();
-
-interface AlertHistorySummary {
-  alert_name: string;
-  total_evaluations: number;
-  firing_count: number;
-  current_state: string;
-  frequency: number | null;
-  last_evaluation: number;
-}
-
-const emit = defineEmits<{
-  (e: "open-drawer", alertName: string): void;
-}>();
-
-const loading = ref(false);
-const historyRows = ref<AlertHistorySummary[]>([]);
-
-const columns: OTableColumnDef[] = [
-  {
-    id: "alert_name",
-    header: t("alerts.name"),
-    accessorKey: "alert_name",
-    sortable: true,
-    size: COL.name,
-    meta: { align: "left", autoWidth: true },
-  },
-  {
-    id: "total_evaluations",
-    header: t("alerts.totalEvaluations"),
-    accessorKey: "total_evaluations",
-    sortable: true,
-    size: COL.count,
-    meta: { align: "right" },
-  },
-  {
-    id: "firing_count",
-    header: t("alerts.firingCount"),
-    accessorKey: "firing_count",
-    sortable: true,
-    size: COL.count,
-    meta: { align: "right" },
-  },
-  {
-    id: "current_state",
-    header: t("alerts.currentState"),
-    accessorKey: "current_state",
-    sortable: true,
-    size: COL.status,
-    meta: { align: "left" },
-  },
-  {
-    id: "frequency",
-    header: t("alerts.frequency"),
-    accessorKey: "frequency",
-    sortable: true,
-    size: COL.frequency,
-    meta: { align: "left" },
-  },
-  {
-    id: "last_evaluation",
-    header: t("alerts.lastEvaluation"),
-    accessorKey: "last_evaluation",
-    sortable: true,
-    size: COL.dateAbsolute,
-    meta: { align: "left" },
-  },
-];
-
-const getStateIcon = (state: string) => {
-  switch (state.toLowerCase()) {
-    case "firing":
-    case "error":
-      return "error";
-    case "ok":
-    case "completed":
-      return "check-circle";
-    default:
-      return "info";
-  }
-};
-
-const getStateColorClass = (state: string) => {
-  switch (state.toLowerCase()) {
-    case "firing":
-    case "error":
-      return "text-[var(--o2-negative)]";
-    case "ok":
-    case "completed":
-      return "text-[var(--o2-positive)]";
-    default:
-      return "text-gray-500";
-  }
-};
-
-const formatFrequency = (seconds: number | null) => {
-  if (!seconds) return "N/A";
-  if (seconds < 60) return `${seconds}s`;
-  const minutes = Math.floor(seconds / 60);
-  if (minutes < 60) return `${minutes}m`;
-  const hours = Math.floor(minutes / 60);
-  return `${hours}h`;
-};
-
-const formatTimestamp = (timestamp: number) => {
-  if (!timestamp) return "N/A";
-  return formatToReadable(timestamp);
-};
-
-const fetchHistorySummary = async () => {
-  loading.value = true;
-  try {
-    const orgIdentifier = store.state.selectedOrganization.identifier;
-
-    // Fetch all alert history for the last 7 days
-    const endTime = Date.now() * 1000; // microseconds
-    const startTime = endTime - 7 * 24 * 60 * 60 * 1000000; // 7 days ago
-
-    const response = await alertsService.getHistory(orgIdentifier, {
-      start_time: startTime,
-      end_time: endTime,
-      from: 0,
-      size: 10000, // Get all records for aggregation
-    });
-
-    if (response.data && response.data.hits) {
-      // Aggregate by alert name
-      const aggregated = new Map<string, AlertHistorySummary>();
-
-      response.data.hits.forEach((hit: any) => {
-        const alertName = hit.alert_name;
-        if (!alertName) return;
-
-        if (!aggregated.has(alertName)) {
-          aggregated.set(alertName, {
-            alert_name: alertName,
-            total_evaluations: 0,
-            firing_count: 0,
-            current_state: "unknown",
-            frequency: null,
-            last_evaluation: 0,
-          });
-        }
-
-        const summary = aggregated.get(alertName)!;
-        summary.total_evaluations++;
-
-        if (hit.status === "completed") {
-          summary.firing_count++;
-        }
-
-        // Update last evaluation
-        if (hit.timestamp > summary.last_evaluation) {
-          summary.last_evaluation = hit.timestamp;
-          summary.current_state = hit.status || "unknown";
-        }
-
-        // Try to extract frequency from trigger data if available
-        // This would need to be added to the API response or fetched separately
-      });
-
-      historyRows.value = Array.from(aggregated.values());
-    }
-  } catch (error) {
-    console.error("Failed to fetch alert history summary:", error);
-    store.dispatch("showNotification", {
-      message: t("alerts.failedToFetchHistory"),
-      color: "negative",
-    });
-  } finally {
-    loading.value = false;
-  }
-};
-
-const openDrawer = (row: AlertHistorySummary) => {
-  emit("open-drawer", row.alert_name);
-};
-
-onMounted(() => {
-  fetchHistorySummary();
-});
-
-// Refresh data when organization changes
-watch(
-  () => store.state.selectedOrganization.identifier,
-  () => {
-    fetchHistorySummary();
-  }
-);
-
-defineExpose({
-  refresh: fetchHistorySummary,
-});
-</script>
-
diff --git a/web/src/components/alerts/AlertHistoryTimeline.vue b/web/src/components/alerts/AlertHistoryTimeline.vue
index 9da38e6f50..c23339dbe4 100644
--- a/web/src/components/alerts/AlertHistoryTimeline.vue
+++ b/web/src/components/alerts/AlertHistoryTimeline.vue
@@ -18,80 +18,88 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <div class="flex flex-col gap-1.5 w-full shrink-0 px-1 py-2">
     <!-- Header row: oldest … legend … newest -->
     <div class="flex items-center justify-between px-1">
-      <span class="text-[11px] tabular-nums" style="color: var(--color-text-caption)">
+      <span class="text-2xs tabular-nums text-text-secondary">
         {{ oldestLabel }}
       </span>
 
       <div class="flex items-center gap-3">
-        <span v-if="firingCount > 0" class="flex items-center gap-1 text-[11px]">
-          <span class="inline-block w-2 h-2 rounded-sm" style="background: var(--color-badge-error-solid-bg)" />
-          <span class="font-medium" style="color: var(--color-badge-error-soft-text)">{{ firingCount }} Firing</span>
+        <span v-if="firingCount > 0" class="flex items-center gap-1 text-2xs">
+          <span class="inline-block w-2 h-2 rounded-default bg-badge-error-solid-bg" />
+          <span class="font-medium text-badge-error-soft-text">{{ firingCount }} Firing</span>
         </span>
-        <span class="flex items-center gap-1 text-[11px]" style="color: var(--color-text-secondary)">
-          <span class="inline-block w-2 h-2 rounded-sm" style="background: var(--color-badge-success-solid-bg)" />
+        <span class="flex items-center gap-1 text-2xs text-text-secondary">
+          <span class="inline-block w-2 h-2 rounded-default bg-badge-success-solid-bg" />
           {{ okCount }} Ok
         </span>
-        <span v-if="skippedCount > 0" class="flex items-center gap-1 text-[11px]" style="color: var(--color-text-muted)">
-          <span class="inline-block w-2 h-2 rounded-sm" style="background: var(--color-border-default)" />
+        <span v-if="skippedCount > 0" class="flex items-center gap-1 text-2xs text-text-muted">
+          <span class="inline-block w-2 h-2 rounded-default bg-border-default" />
           {{ skippedCount }} Skipped
         </span>
-        <span v-if="hasFlappingZone" class="flex items-center gap-1 text-[11px] font-semibold" style="color: #7c3aed; filter: brightness(0.9)">
-          <span class="inline-block w-2 h-2 rounded-sm o2-flap-swatch" />
+        <span v-if="hasFlappingZone" class="flex items-center gap-1 text-2xs font-semibold text-badge-purple-ol-text brightness-90">
+          <span class="inline-block w-2 h-2 rounded-default o2-flap-swatch" />
           Flapping
         </span>
       </div>
 
-      <span class="text-[11px] tabular-nums" style="color: var(--color-text-caption)">
+      <span class="text-2xs tabular-nums text-text-secondary">
         {{ newestLabel }}
       </span>
     </div>
 
     <!-- Timeline strip + transition labels -->
-    <div class="flex flex-col gap-[3px] w-full px-1">
+    <div class="flex flex-col gap-0.75 w-full px-1">
 
     <!-- Strip -->
-    <div class="flex gap-[2px] w-full h-6 items-stretch" style="overflow: visible">
+    <div class="flex gap-0.5 w-full h-6 items-stretch overflow-visible">
       <template v-for="(seg, i) in segments" :key="i">
         <!-- Flapping zone — alternating hatched red/green cells + callout pill -->
         <div
           v-if="seg.type === 'flapping'"
-          class="flex gap-[2px] items-stretch relative"
-          :style="{ flex: seg.weight, minWidth: '12px' }"
+          class="flex gap-0.5 items-stretch relative min-w-3"
+          :style="{ flex: seg.weight }"
           @mouseenter="hoveredIndex = i"
           @mouseleave="hoveredIndex = null"
         >
           <!-- Persistent callout pill above the zone -->
-          <div class="o2-flap-pill">
+          <div
+            class="o2-flap-pill absolute bottom-full mb-2 left-1/2 -translate-x-1/2 z-30 flex items-center gap-1.25 whitespace-nowrap px-3 py-1 rounded-full text-xs font-semibold pointer-events-none shadow-md text-badge-purple-solid-text bg-badge-purple-solid-bg"
+          >
             <span class="font-semibold">⚡ Flapping</span>
-            <span class="o2-flap-pill-dot">•</span>{{ seg.flips }} flips
-            <span class="o2-flap-pill-dot">•</span>{{ seg.durationLabel }}
+            <span class="opacity-60 font-normal">•</span>{{ seg.flips }} flips
+            <span class="opacity-60 font-normal">•</span>{{ seg.durationLabel }}
           </div>
           <div
             v-for="(cell, c) in seg.cells"
             :key="c"
-            class="flex-1 rounded-sm min-w-[6px]"
-            :style="flapCellStyle(cell.status)"
+            class="flex-1 rounded-default min-w-1.5 o2-flap-cell"
+            :style="{ backgroundColor: blockColor(cell.status) }"
           />
         </div>
 
         <!-- Normal block -->
         <div
           v-else
-          class="flex-1 rounded-sm min-w-[4px] cursor-default relative transition-opacity duration-100 hover:opacity-75"
+          class="flex-1 rounded-default min-w-1 cursor-default relative transition-opacity duration-100 hover:opacity-75"
           :style="{ flex: seg.weight, background: blockColor(seg.status) }"
           @mouseenter="hoveredIndex = i"
           @mouseleave="hoveredIndex = null"
         >
-          <div v-if="hoveredIndex === i" class="o2-timeline-tooltip">
+          <!-- Render ABOVE the strip (like the flapping pill) so the tooltip
+               never collides with — or gets clipped by — the history table that
+               sits directly below the timeline. -->
+          <div
+            v-if="hoveredIndex === i"
+            class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 z-50 whitespace-nowrap rounded-default px-2.5 py-1.5 text-2xs leading-[1.4] pointer-events-none shadow-md bg-surface-overlay border border-border-default text-text-body"
+          >
             <div class="font-semibold capitalize flex items-center gap-1.5">
               <span
-                class="inline-block w-2 h-2 rounded-sm shrink-0"
+                class="inline-block w-2 h-2 rounded-default shrink-0"
                 :style="{ background: blockColor(seg.status) }"
               />
               {{ normalizeStatus(seg.status) }}
             </div>
             <div class="opacity-60 mt-0.5">{{ seg.startLabel }}</div>
-            <div v-if="seg.count > 1" class="opacity-50 text-[10px]">{{ seg.count }} evaluations</div>
+            <div v-if="seg.count > 1" class="opacity-50 text-3xs">{{ seg.count }} evaluations</div>
           </div>
         </div>
       </template>
@@ -99,12 +107,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     <!-- Transition tick labels — placed by cumulative width; labels that would
          overlap the previously shown one are skipped to keep them readable. -->
-    <div class="w-full relative h-[14px]">
+    <div class="w-full relative h-3.5">
       <span
         v-for="(tick, i) in tickLabels"
         :key="i"
-        class="absolute top-0 text-[10px] tabular-nums whitespace-nowrap translate-x-[-50%]"
-        :style="{ left: tick.leftPct + '%', color: 'var(--color-text-caption)' }"
+        class="absolute top-0 text-3xs tabular-nums whitespace-nowrap -translate-x-1/2 text-text-secondary"
+        :style="{ left: tick.leftPct + '%' }"
       >
         {{ tick.label }}
       </span>
@@ -373,81 +381,46 @@ function formatDuration(ms: number): string {
   if (h) return `${h}h`;
   return `${m}m`;
 }
-
-// Diagonal-hatch fill for a flapping cell, tinted by its real status colour.
-function flapCellStyle(status: string) {
-  return {
-    background:
-      "repeating-linear-gradient(45deg, rgba(255,255,255,0.32) 0, rgba(255,255,255,0.32) 2px, transparent 2px, transparent 6px), " +
-      blockColor(status),
-    boxShadow: "inset 0 0 0 1px rgba(124, 58, 237, 0.55)",
-  };
-}
 </script>
 
 <style scoped>
+/* keep(generated-content): the pill's ::after arrow and the two repeating-linear-gradient hatch fills — a pseudo-element and multi-stop gradients have no utility equivalent. */
+
 /* Hatched purple swatch used in the legend for the flapping key */
 .o2-flap-swatch {
   background:
     repeating-linear-gradient(
       45deg,
-      rgba(255, 255, 255, 0.4) 0,
-      rgba(255, 255, 255, 0.4) 1px,
+      color-mix(in srgb, var(--color-white) 40%, transparent) 0,
+      color-mix(in srgb, var(--color-white) 40%, transparent) 1px,
       transparent 1px,
-      transparent 3px
+      transparent 0.1875rem
     ),
-    #7c3aed;
+    var(--color-badge-purple-solid-bg);
 }
 
-/* Persistent purple callout pill above a flapping zone */
-.o2-flap-pill {
-  position: absolute;
-  bottom: calc(100% + 8px);
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 30;
-  white-space: nowrap;
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  padding: 4px 12px;
-  border-radius: 9999px;
-  font-size: 12px;
-  font-weight: 600;
-  color: #fff;
-  background: #7c3aed;
-  box-shadow: var(--shadow-md);
-  pointer-events: none;
-}
-.o2-flap-pill-dot {
-  opacity: 0.6;
-  font-weight: 400;
+/* Diagonal-hatch overlay for a flapping cell. The base colour is bound
+   per-instance inline (status-derived); this only paints the hatch on top. */
+.o2-flap-cell {
+  background-image: repeating-linear-gradient(
+    45deg,
+    color-mix(in srgb, var(--color-white) 32%, transparent) 0,
+    color-mix(in srgb, var(--color-white) 32%, transparent) 0.125rem,
+    transparent 0.125rem,
+    transparent 0.375rem
+  );
+  box-shadow: inset 0 0 0 1px
+    color-mix(in srgb, var(--color-badge-purple-solid-bg) 55%, transparent);
 }
+
+/* Downward arrow under the flapping callout pill */
 .o2-flap-pill::after {
   content: "";
   position: absolute;
   top: 100%;
   left: 50%;
   transform: translateX(-50%);
-  border: 5px solid transparent;
-  border-top-color: #7c3aed;
-}
-
-.o2-timeline-tooltip {
-  position: absolute;
-  top: calc(100% + 6px);
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 50;
-  white-space: nowrap;
-  border-radius: var(--radius-md);
-  padding: 6px 10px;
-  font-size: 11px;
-  line-height: 1.4;
-  box-shadow: var(--shadow-md);
-  pointer-events: none;
-  background: var(--color-surface-overlay);
-  border: 1px solid var(--color-border-default);
-  color: var(--color-text-body);
+  border: 0.3125rem solid transparent;
+  border-top-color: var(--color-badge-purple-solid-bg);
 }
 </style>
diff --git a/web/src/components/alerts/AlertInsights.vue b/web/src/components/alerts/AlertInsights.vue
index c56d8941ba..537fa01d83 100644
--- a/web/src/components/alerts/AlertInsights.vue
+++ b/web/src/components/alerts/AlertInsights.vue
@@ -15,13 +15,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="w-full h-full flex flex-col min-h-0">
-    <AppPageHeader
-      :title="t('alerts.insights.title')"
-      :back="{ onClick: goBack, dataTest: 'alert-insights-back-btn' }"
-      tabs-below
-      class="shrink-0 px-4"
-    >
+  <OPageLayout
+    :title="t('alerts.insights.title')"
+    :back="{ onClick: goBack, dataTest: 'alert-insights-back-btn' }"
+    tabs-below
+    bleed
+  >
       <template #actions>
         <date-time
           ref="dateTimeRef"
@@ -49,11 +48,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </OButton>
       </template>
 
-      <template #tabs>
+      <template #header-tabs>
         <OTabs
           v-model="currentTab"
           dense
-          class="alert-insights-tabs"
           align="left"
           data-test="alert-insights-tabs"
         >
@@ -73,12 +71,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <OTab name="quality" :label="t('alerts.insights.tabs.quality')" data-test="tab-quality" />
         </OTabs>
       </template>
-    </AppPageHeader>
 
     <!-- Filters Section -->
     <div
       v-if="show"
-      class="flex items-center gap-2 flex-wrap px-4 py-3 border-b border-(--q-border-color) shrink-0"
+      class="flex items-center gap-2 flex-wrap px-page-edge py-3 border-b border-border-default shrink-0"
     >
           <span class="text-sm font-semibold relative top-1">{{ t("common.filters") }}:</span>
 
@@ -87,7 +84,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           v-model="showFailedOnly"
           :label="t('alerts.insights.filters.failedOnly')"
           class="o2-toggle-button-sm"
-          :class="store.state.theme === 'dark' ? 'o2-toggle-button-sm-dark' : 'o2-toggle-button-sm-light'"
           @update:model-value="onFilterChange"
           data-test="failed-only-toggle"
           >
@@ -100,7 +96,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           v-model="showSilencedOnly"
           :label="t('alerts.insights.filters.silenced')"
           class="o2-toggle-button-sm"
-          :class="store.state.theme === 'dark' ? 'o2-toggle-button-sm-dark' : 'o2-toggle-button-sm-light'"
           @update:model-value="onFilterChange"
           data-test="silenced-only-toggle"
           >
@@ -112,12 +107,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <div
             v-for="[panelId, filter] in rangeFilters"
             :key="panelId"
-            class="inline-flex items-center rounded py-1 px-3 text-sm cursor-default"
-            :class="
-              store.state.theme === 'dark'
-                ? 'bg-indigo-900 text-indigo-100'
-                : 'bg-blue-100 text-blue-800'
-            "
+            class="inline-flex items-center rounded-default py-1 px-3 text-sm cursor-default bg-status-info-bg text-status-info-text"
             data-test="range-filter-chip"
           >
             <span class="chip-label">
@@ -157,7 +147,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <!-- Action Buttons Row -->
     <div
       v-if="selectedAlertForAction"
-      class="bg-primary bg-opacity-10 flex items-center px-4 py-3 gap-3 border-b border-(--q-border-color) shrink-0"
+      class="bg-primary bg-opacity-10 flex items-center px-4 py-3 gap-3 border-b border-border-default shrink-0"
       data-test="action-buttons-row"
     >
       <OIcon name="campaign" size="sm" />
@@ -213,7 +203,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     <!-- Dashboard Content -->
     <div class="flex-1 min-h-0 px-2.5 pb-2.5">
-      <div class="card-container mb-2.5 h-[calc(100vh-13rem)]">
+      <div class="bg-card-glass-bg mb-2.5 h-[calc(100vh-13rem)]">
         <div
           @contextmenu="handleNativeContextMenu"
         >
@@ -222,11 +212,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <div class="ml-3">Loading insights...</div>
           </div>
 
-          <div :style="{ visibility: isLoading ? 'hidden' : 'visible' }">
-            <div v-if="!dashboardData" class="p-5 text-center text-[#666]">
+          <div :class="isLoading ? 'invisible' : 'visible'">
+            <div v-if="!dashboardData" class="p-5 text-center text-text-muted">
               {{ t("alerts.insights.loading.dashboardConfig") }}
             </div>
-            <div v-else-if="!show" class="p-5 text-center text-[#666]">
+            <div v-else-if="!show" class="p-5 text-center text-text-muted">
               {{ t("alerts.insights.loading.refreshing") }}
             </div>
             <RenderDashboardCharts
@@ -260,14 +250,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       @edit-alert="handleEditAlert"
       @view-history="handleViewHistory"
     />
-  </div>
+  </OPageLayout>
 </template>
 
 <script setup lang="ts">
 import OTabs from '@/lib/navigation/Tabs/OTabs.vue'
 import OTab from '@/lib/navigation/Tabs/OTab.vue'
 import OButton from '@/lib/core/Button/OButton.vue';
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import { ref, computed, onMounted, watch, nextTick, reactive, provide } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { useStore } from "vuex";
@@ -734,9 +724,3 @@ onMounted(async () => {
   isLoading.value = false;
 });
 </script>
-
-<style>
-.alert-insights-tabs :deep(.o-tab__label) {
-  text-transform: none !important;
-}
-</style>
diff --git a/web/src/components/alerts/AlertInsightsContextMenu.vue b/web/src/components/alerts/AlertInsightsContextMenu.vue
index f49f746f56..30d12aea56 100644
--- a/web/src/components/alerts/AlertInsightsContextMenu.vue
+++ b/web/src/components/alerts/AlertInsightsContextMenu.vue
@@ -16,13 +16,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <div
-    class="context-menu fixed z-9999 min-w-55 overflow-hidden bg-white border border-(--o2-border) rounded-md shadow-[0_4px_12px_rgba(0,0,0,0.15)]"
-    :class="store.state.theme === 'dark' ? 'dark-theme bg-[#2d2d2d] border-[#444] shadow-[0_4px_12px_rgba(0,0,0,0.4)]' : 'light-theme'"
+    class="context-menu fixed z-9999 min-w-50 py-1 overflow-hidden bg-surface-overlay border border-border-default rounded-default shadow-[0_4px_12px_rgba(0,0,0,0.15)]"
     :style="{ top: `${y}px`, left: `${x}px` }"
     @click.stop
     data-test="alert-insights-context-menu"
   >
-    <div class="menu-header px-4 py-2 text-xs font-semibold bg-[#f5f5f5] text-[#666]" :class="store.state.theme === 'dark' ? 'bg-[#1e1e1e] text-[#aaa]' : ''">
+    <div class="menu-header px-4 py-2 text-xs font-semibold bg-surface-subtle text-text-secondary">
       {{ isAlertNameContext ? value : panelTitle }}
     </div>
     <OSeparator />
@@ -72,7 +71,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted } from "vue";
-import { useStore } from "vuex";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import OSeparator from '@/lib/core/Separator/OSeparator.vue';
 
@@ -100,12 +98,9 @@ const emit = defineEmits<{
   "view-history": [string];
 }>();
 
-const store = useStore();
-
 const isAlertNameContext = computed(() => {
 
   // Check if we're clicking on a panel that shows alert names
-  // Use panelId for more reliable identification instead of panelTitle
   const alertNamePanels = [
     "Panel_Alert_Frequency",
     "Panel_Dedup_Impact",
@@ -194,20 +189,14 @@ onUnmounted(() => {
 });
 </script>
 
-<style>
+<style scoped>
+/* keep(complex-state): `.menu-item` hover/active are state pseudo-classes on this
+   component's own elements, with no utility equivalent. */
 .context-menu .menu-item:hover {
-  background-color: #f5f5f5;
-}
-
-.context-menu.dark-theme .menu-item:hover {
-  background-color: #383838;
+  background-color: var(--color-dropdown-item-hover-bg);
 }
 
 .context-menu .menu-item:active {
-  background-color: #e8e8e8;
-}
-
-.context-menu.dark-theme .menu-item:active {
-  background-color: #444;
+  background-color: var(--color-dropdown-item-active-bg);
 }
 </style>
diff --git a/web/src/components/alerts/AlertList.vue b/web/src/components/alerts/AlertList.vue
index ec688fe726..bdbef22950 100644
--- a/web/src/components/alerts/AlertList.vue
+++ b/web/src/components/alerts/AlertList.vue
@@ -21,15 +21,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     data-test="alert-list-page"
     class="flex flex-col h-full"
   >
-    <PageLayout
+    <OPageLayout bleed
       v-if="!showAddAlertDialog && !showImportAlertDialog"
-      :main-panel="false"
-      :header-class="'shrink-0 px-4 border-b border-border-default'"
+      :title="t('alerts.header')"
+      :subtitle="t('alerts.subtitle')"
+      icon="shield-alert-outline"
     >
-      <!-- Row 1: standard header — title + actions only (Import/Add). The alert
-           type toggle, search and folder scope moved into the table toolbar. -->
-      <template #header>
-        <AppPageHeader :title="t('alerts.header')" :subtitle="t('alerts.subtitle')" icon="shield-alert-outline">
           <template #actions>
             <!-- Import button -->
             <OButton
@@ -65,15 +62,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               "
             >{{ t(`alerts.add`) }}</OButton>
           </template>
-        </AppPageHeader>
-      </template>
 
     <div
       data-test="alert-list-splitter"
       class="flex-1 flex min-h-0"
     >
       <!-- Left: FolderList -->
-      <div class="shrink-0 h-full" :style="{ width: 230 + 'px' }">
+      <div class="shrink-0 h-full w-rail">
         <div class="h-full">
           <FolderList
             type="alerts"
@@ -83,7 +78,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </div>
       <!-- Right: Table -->
       <div class="flex-1 min-w-0 h-full">
-        <div class="h-full card-container">
+        <div class="h-full bg-card-glass-bg">
               <!-- Alert List Table (shows all alert types including anomaly detection rows) -->
               <OTable
                 :frame="false"
@@ -189,26 +184,26 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       v-if="row.is_real_time === 'anomaly'"
                       name="query-stats"
                       size="sm"
-                      class="text-blue-600 shrink-0"
+                      class="text-status-info-text shrink-0"
                     />
                     <OIcon
                       v-else-if="row.is_real_time"
                       name="bolt"
                       size="sm"
-                      class="text-orange-500 shrink-0"
+                      class="text-status-warning-text shrink-0"
                     />
                     <OIcon
                       v-else
                       name="schedule"
                       size="sm"
-                      class="text-gray-400 shrink-0"
+                      class="text-icon-color shrink-0"
                     />
                     <span class="truncate">{{ row.name || "--" }}</span>
                   </div>
                   <OTooltip
                     v-if="row.name"
                     :content="row.name"
-                    content-class="max-w-[400px] whitespace-normal break-words text-xs"
+                    content-class="max-w-100 whitespace-normal break-words text-xs"
                   />
                 </template>
 
@@ -258,7 +253,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       :content="row.last_error"
                     />
                   </span>
-                  <span v-else class="text-text-primary">—</span>
+                  <span v-else class="text-text-body">—</span>
                 </template>
 
                 <template #cell-period="{ row }">
@@ -428,7 +423,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                           Re-train
                         </ODropdownItem>
                       </template>
-                      <!-- Regular alerts: existing Trigger Alert item -->
+                      <!-- Regular alerts: Trigger Alert item -->
                       <ODropdownItem
                         v-else
                         :data-test="`alert-list-${row.name}-trigger-alert`"
@@ -477,7 +472,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <template #bottom>
                   <div class="flex w-full justify-between items-center h-12 gap-1">
                     <div
-                      class="o2-table-footer-title flex items-center min-w-25"
+                      class="text-xs font-normal flex items-center min-w-25"
                     >
                       <template v-if="selectedAlerts.length > 0">{{ selectedAlerts.length }} of {{ resultTotal }} selected</template>
                       <template v-else>{{ resultTotal }} {{ t("alerts.header") }}</template>
@@ -529,7 +524,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
       </div>
     </div>
-    </PageLayout>
+    </OPageLayout>
     <template v-else-if="showAddAlertDialog && !showImportAlertDialog">
       <AddAlert
         v-model="formData"
@@ -658,8 +653,7 @@ import {
   computed,
   reactive,
 } from "vue";
-import PageLayout from "@/components/common/PageLayout.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import type { Ref } from "vue";
 import { useStore } from "vuex";
 import { useRouter } from "vue-router";
@@ -724,8 +718,7 @@ import { COL } from "@/lib/core/Table/OTable.types";
 export default defineComponent({
   name: "AlertList",
   components: {
-    PageLayout,
-    AppPageHeader,
+    OPageLayout,
     OSeparator,
     AddAlert: defineAsyncComponent(
       () => import("@/components/alerts/AddAlert.vue"),
@@ -890,39 +883,11 @@ export default defineComponent({
       showAlertDetailsDrawer.value = true;
     };
 
-    // Handle ESC key and click outside to close drawer
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "Escape" && showAlertDetailsDrawer.value) {
-        showAlertDetailsDrawer.value = false;
-      }
-    };
-
-    const handleClickOutside = (event: MouseEvent) => {
-      if (!showAlertDetailsDrawer.value) return;
-
-      const target = event.target as HTMLElement;
-
-      // Check if clicked element is the backdrop or outside drawer content
-      if (
-        target.classList.contains("q-drawer__backdrop") ||
-        target.classList.contains("q-layout__shadow")
-      ) {
-        showAlertDetailsDrawer.value = false;
-        return;
-      }
-
-      // Check if the click is outside the drawer content
-      const drawerElement = document.querySelector(
-        ".alert-details-drawer .q-drawer__content",
-      );
-      if (drawerElement && !drawerElement.contains(target)) {
-        showAlertDetailsDrawer.value = false;
-      }
-    };
+    // ESC and click-outside dismissal are handled by ODrawer itself (reka-ui
+    // DismissableLayer → @escape-key-down / @interact-outside), which also knows
+    // to ignore clicks inside portaled dropdowns opened from within the drawer.
 
     onMounted(() => {
-      document.addEventListener("keydown", handleKeyDown);
-      document.addEventListener("click", handleClickOutside, true);
       window.addEventListener("resize", onWindowResize);
     });
 
@@ -953,11 +918,6 @@ export default defineComponent({
 
     const filteredResults: Ref<any[]> = ref([]);
 
-    onBeforeUnmount(() => {
-      document.removeEventListener("keydown", handleKeyDown);
-      document.removeEventListener("click", handleClickOutside, true);
-    });
-
     const activeFolderToMove = ref("default");
 
     // Tabs for alerts view
@@ -2778,14 +2738,3 @@ export default defineComponent({
   },
 });
 </script>
-
-<style>
-@media (max-width: 1440px) {
-  .app-tabs-container .o2-tab {
-    padding-left: 0.75rem !important;
-    padding-right: 0.75rem !important;
-    min-width: auto !important;
-  }
-}
-
-</style>
diff --git a/web/src/components/alerts/AlertSettingsHelpDrawer.vue b/web/src/components/alerts/AlertSettingsHelpDrawer.vue
index 48e6dfb84e..aa0df97ee3 100644
--- a/web/src/components/alerts/AlertSettingsHelpDrawer.vue
+++ b/web/src/components/alerts/AlertSettingsHelpDrawer.vue
@@ -613,6 +613,11 @@ defineExpose({ applyTemplate, previewTemplate });
 </template>
 
 <style scoped lang="scss">
+/* keep(complex-state): the .seg-live/-sample/-opaque/-text segment styles are
+   applied by the computed segClass() mapper to the v-for'd preview segments —
+   a dynamic, per-kind class name the utility layer cannot inline — and the
+   legend / preview-box / destination-card BEM blocks cascade hover and kind
+   variants around them. All values already resolve to design tokens. */
 // Colors use the design-token layer defined in src/lib/styles/tokens/*.css
 // (--color-*, --radius-*) — the same theme-aware tokens the O* component
 // library consumes, with dark-mode overrides in tokens/dark.css.
@@ -623,7 +628,7 @@ defineExpose({ applyTemplate, previewTemplate });
   flex-direction: column;
   gap: 1.5rem;
   padding: 1.25rem;
-  font-size: 0.875rem;
+  font-size: var(--text-sm);
   color: var(--color-text-body);
 }
 
@@ -636,9 +641,9 @@ defineExpose({ applyTemplate, previewTemplate });
   flex-direction: column;
   gap: 0.5rem;
   padding: 0.75rem;
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-default);
   background: var(--color-surface-subtle);
-  font-size: 0.75rem;
+  font-size: var(--text-xs);
   color: var(--color-text-secondary);
 
   &__title {
@@ -663,9 +668,9 @@ defineExpose({ applyTemplate, previewTemplate });
     flex-shrink: 0;
     min-width: 3.5rem;
     padding: 0.0625rem 0.375rem;
-    border-radius: var(--radius-sm);
-    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-    font-size: 0.6875rem;
+    border-radius: var(--radius-default);
+    font-family: var(--font-mono);
+    font-size: var(--text-2xs);
     line-height: 1.4;
     text-align: center;
   }
@@ -694,7 +699,7 @@ defineExpose({ applyTemplate, previewTemplate });
   flex-direction: column;
 
   &__title {
-    font-size: 0.9375rem;
+    font-size: var(--text-sm);
     font-weight: 600;
     color: var(--color-text-heading);
     margin: 0 0 0.5rem;
@@ -712,7 +717,7 @@ defineExpose({ applyTemplate, previewTemplate });
 
   &__hint {
     color: var(--color-text-secondary);
-    font-size: 0.75rem;
+    font-size: var(--text-xs);
     margin: 0.5rem 0 0;
 
     &--top {
@@ -731,7 +736,7 @@ defineExpose({ applyTemplate, previewTemplate });
   background: transparent;
   border: none;
   cursor: pointer;
-  font-size: 0.9375rem;
+  font-size: var(--text-sm);
   font-weight: 600;
   color: var(--color-text-heading);
 
@@ -745,7 +750,7 @@ defineExpose({ applyTemplate, previewTemplate });
 .help-result-label {
   display: block;
   margin: 0.625rem 0 0.25rem;
-  font-size: 0.6875rem;
+  font-size: var(--text-2xs);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.03em;
@@ -753,7 +758,7 @@ defineExpose({ applyTemplate, previewTemplate });
 }
 
 .preview-box--result {
-  border-left: 2px solid var(--color-primary-500);
+  border-left: 0.125rem solid var(--color-primary-500);
 }
 
 .help-empty {
@@ -764,7 +769,7 @@ defineExpose({ applyTemplate, previewTemplate });
   margin: 0;
 
   &--sm {
-    font-size: 0.75rem;
+    font-size: var(--text-xs);
   }
 }
 
@@ -781,7 +786,7 @@ defineExpose({ applyTemplate, previewTemplate });
   align-items: center;
   gap: 0.5rem;
   margin: 0.5rem 0 0;
-  font-size: 0.8125rem;
+  font-size: var(--text-compact);
   color: var(--color-text-secondary);
 }
 
@@ -792,7 +797,7 @@ defineExpose({ applyTemplate, previewTemplate });
   gap: 0.375rem;
 
   &__label {
-    font-size: 0.6875rem;
+    font-size: var(--text-2xs);
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.03em;
@@ -812,8 +817,8 @@ defineExpose({ applyTemplate, previewTemplate });
     gap: 0.375rem;
     padding: 0.75rem;
     border: 1px solid var(--color-border-default);
-    border-radius: var(--radius-lg);
-    border-left-width: 2px;
+    border-radius: var(--radius-surface);
+    border-left-width: 0.125rem;
 
     &--bad {
       border-left-color: var(--color-warning-500);
@@ -824,7 +829,7 @@ defineExpose({ applyTemplate, previewTemplate });
   }
 
   &__label {
-    font-size: 0.6875rem;
+    font-size: var(--text-2xs);
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.03em;
@@ -832,7 +837,7 @@ defineExpose({ applyTemplate, previewTemplate });
   }
   &__desc {
     margin: 0;
-    font-size: 0.8125rem;
+    font-size: var(--text-compact);
     color: var(--color-text-secondary);
     line-height: 1.45;
   }
@@ -863,7 +868,7 @@ defineExpose({ applyTemplate, previewTemplate });
   gap: 0.5rem;
   padding: 0.75rem;
   border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-surface);
   background: var(--color-surface-base);
 
   &__head {
@@ -877,7 +882,7 @@ defineExpose({ applyTemplate, previewTemplate });
     color: var(--color-text-heading);
   }
   &__tpl {
-    font-size: 0.75rem;
+    font-size: var(--text-xs);
     color: var(--color-text-muted);
   }
 }
@@ -892,10 +897,10 @@ defineExpose({ applyTemplate, previewTemplate });
 .help-chip {
   padding: 0.25rem 0.5rem;
   border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-default);
   background: transparent;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 0.75rem;
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
   color: var(--color-text-code);
   cursor: pointer;
   transition: background 0.2s ease;
@@ -921,11 +926,11 @@ defineExpose({ applyTemplate, previewTemplate });
   gap: 0.75rem;
   padding: 0.375rem 0.5rem;
   border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-default);
 
   &__key {
-    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-    font-size: 0.75rem;
+    font-family: var(--font-mono);
+    font-size: var(--text-xs);
     color: var(--color-text-code);
   }
   &__val {
@@ -937,12 +942,12 @@ defineExpose({ applyTemplate, previewTemplate });
 .preview-box {
   white-space: pre-wrap;
   word-break: break-word;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 0.75rem;
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
   line-height: 1.6;
   margin: 0;
   padding: 0.75rem;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-surface);
   border: 1px solid var(--color-border-default);
   background: var(--color-surface-subtle);
   color: var(--color-text-body);
@@ -969,7 +974,7 @@ defineExpose({ applyTemplate, previewTemplate });
 // previous version put faint text on a near-same gray and was unreadable.
 .seg-opaque {
   padding: 0 0.25rem;
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-default);
   background: var(--color-surface-subtle-hover);
   color: var(--color-text-body);
 }
diff --git a/web/src/components/alerts/AlertSummary.vue b/web/src/components/alerts/AlertSummary.vue
index b69863e60b..301151a397 100644
--- a/web/src/components/alerts/AlertSummary.vue
+++ b/web/src/components/alerts/AlertSummary.vue
@@ -16,11 +16,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <div data-test="alerts-alert-summary" class="h-full flex flex-col relative">
-    <div data-test="alerts-alert-summary-content" class="text-[0.8125rem] leading-[2.2] flex-1 min-h-0 overflow-y-auto p-4 flex flex-col" ref="summaryContainer" @scroll="checkIfShouldShowScrollButton">
+    <div data-test="alerts-alert-summary-content" class="text-compact leading-[2.2] flex-1 min-h-0 overflow-y-auto p-4 flex flex-col" ref="summaryContainer" @scroll="checkIfShouldShowScrollButton">
       <p v-if="summaryText" data-test="alerts-alert-summary-text" class="summary-text m-0 whitespace-pre-line tracking-[0.03em]" v-html="DOMPurify.sanitize(summaryText)" @click="handleSummaryClick"></p>
-      <div v-else data-test="alerts-alert-summary-empty-state" class="flex flex-col items-center justify-center h-full min-h-[120px] gap-2 p-4">
+      <div v-else data-test="alerts-alert-summary-empty-state" class="flex flex-col items-center justify-center h-full min-h-30 gap-2 p-4">
         <OIcon name="article" size="lg" class="opacity-20" />
-        <span class="text-[0.8125rem] font-medium text-center opacity-50">{{ t('alerts.summary.configureAlert') || 'Configure your alert to see a summary' }}</span>
+        <span class="text-compact font-medium text-center opacity-50">{{ t('alerts.summary.configureAlert') || 'Configure your alert to see a summary' }}</span>
       </div>
     </div>
 
@@ -33,7 +33,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         round
         variant="ghost"
         size="icon-circle-sm"
-        class="scroll-to-bottom-btn transition-all duration-300 ease-[ease] pointer-events-auto backdrop-blur-sm shadow-[0_2px_8px_rgba(0,0,0,0.2)] border-2! border-[var(--q-primary)]! text-[var(--q-primary)]! bg-[rgba(255,255,255,0.95)]! dark:bg-[rgba(30,30,30,0.9)]! hover:scale-110 hover:shadow-[0_4px_12px_rgba(0,0,0,0.3)] hover:bg-white! hover:opacity-80 dark:hover:bg-[rgba(40,40,40,0.95)]! dark:hover:opacity-80 active:scale-100"
+        class="scroll-to-bottom-btn transition-all duration-300 ease-[ease] pointer-events-auto backdrop-blur-sm shadow-[0_2px_8px_rgba(0,0,0,0.2)] border-2! border-theme-accent! text-theme-accent! bg-[rgba(255,255,255,0.95)]! dark:bg-[rgba(30,30,30,0.9)]! hover:scale-110 hover:shadow-[0_4px_12px_rgba(0,0,0,0.3)] hover:bg-white! hover:opacity-80 dark:hover:bg-[rgba(40,40,40,0.95)]! dark:hover:opacity-80 active:scale-100"
         @click="scrollToBottomSmooth"
       >
         <OIcon name="arrow-downward" size="sm" />
@@ -134,71 +134,68 @@ onMounted(async () => {
 });
 </script>
 
-<style>
-/* Styles for bold section labels (v-html content with markdown **text**) */
-.summary-text strong {
+<style scoped>
+/* keep(generated-content): styles v-html output from alertSummaryGenerator (no scope id) */
+.summary-text :deep(strong) {
   display: inline;
   font-weight: 700;
-  font-size: 0.875rem;
+  font-size: var(--text-sm);
 }
 
-/* Styles for clickable spans (v-html content) */
-.summary-text .summary-clickable {
+.summary-text :deep(.summary-clickable) {
   cursor: pointer;
-  color: var(--q-primary);
+  color: var(--color-theme-accent);
   font-weight: 600;
   padding: 0.125rem 0.375rem;
   margin: 0 0.125rem;
   border-radius: 0.25rem;
   background: linear-gradient(
     135deg,
-    color-mix(in srgb, var(--q-primary) 8%, transparent),
-    color-mix(in srgb, var(--q-primary) 12%, transparent)
+    color-mix(in srgb, var(--color-theme-accent) 8%, transparent),
+    color-mix(in srgb, var(--color-theme-accent) 12%, transparent)
   );
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   display: inline;
   position: relative;
-  box-shadow: 0 0 0 0.0625rem color-mix(in srgb, var(--q-primary) 15%, transparent);
+  box-shadow: 0 0 0 0.0625rem color-mix(in srgb, var(--color-theme-accent) 15%, transparent);
   line-height: 1.6;
   vertical-align: baseline;
   white-space: nowrap;
 }
 
-.summary-text .summary-clickable:hover {
+.summary-text :deep(.summary-clickable:hover) {
   background: linear-gradient(
     135deg,
-    color-mix(in srgb, var(--q-primary) 15%, transparent),
-    color-mix(in srgb, var(--q-primary) 20%, transparent)
+    color-mix(in srgb, var(--color-theme-accent) 15%, transparent),
+    color-mix(in srgb, var(--color-theme-accent) 20%, transparent)
   );
   transform: translateY(-0.0625rem);
   box-shadow:
-    0 0 0 0.0625rem color-mix(in srgb, var(--q-primary) 25%, transparent),
-    0 0.125rem 0.5rem color-mix(in srgb, var(--q-primary) 15%, transparent);
+    0 0 0 0.0625rem color-mix(in srgb, var(--color-theme-accent) 25%, transparent),
+    0 0.125rem 0.5rem color-mix(in srgb, var(--color-theme-accent) 15%, transparent);
 }
 
-.summary-text .summary-clickable:active {
+.summary-text :deep(.summary-clickable:active) {
   transform: translateY(0) scale(0.98);
-  background: color-mix(in srgb, var(--q-primary) 18%, transparent);
+  background: color-mix(in srgb, var(--color-theme-accent) 18%, transparent);
   box-shadow:
-    0 0 0 0.0625rem color-mix(in srgb, var(--q-primary) 30%, transparent),
-    inset 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.1);
+    0 0 0 0.0625rem color-mix(in srgb, var(--color-theme-accent) 30%, transparent),
+    inset 0 0.0625rem 0.125rem color-mix(in srgb, var(--color-black) 10%, transparent);
 }
 
-/* Styles for plain English section */
-.summary-text .plain-english-section {
+.summary-text :deep(.plain-english-section) {
   padding: 0.75rem 1rem;
   border-radius: 0.375rem;
   background: linear-gradient(
     135deg,
-    color-mix(in srgb, var(--q-primary) 5%, transparent),
-    color-mix(in srgb, var(--q-primary) 8%, transparent)
+    color-mix(in srgb, var(--color-theme-accent) 5%, transparent),
+    color-mix(in srgb, var(--color-theme-accent) 8%, transparent)
   );
-  border-left: 0.1875rem solid var(--q-primary);
-  font-size: 0.875rem;
+  border-left: 0.1875rem solid var(--color-theme-accent);
+  font-size: var(--text-sm);
   line-height: 1.7;
   font-style: italic;
   opacity: 0.95;
   font-weight: 500;
 }
-
 </style>
diff --git a/web/src/components/alerts/AlertWizardRightColumn.spec.ts b/web/src/components/alerts/AlertWizardRightColumn.spec.ts
deleted file mode 100644
index 9dc3eefcfe..0000000000
--- a/web/src/components/alerts/AlertWizardRightColumn.spec.ts
+++ /dev/null
@@ -1,590 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
-import { mount, flushPromises, VueWrapper } from "@vue/test-utils";
-import { nextTick } from "vue";
-import AlertWizardRightColumn from "./AlertWizardRightColumn.vue";
-import i18n from "@/locales";
-import store from "@/test/unit/helpers/store";
-
-vi.mock("./PreviewAlert.vue", () => ({
-  default: {
-    name: "PreviewAlert",
-    template: "<div data-test='mock-preview-alert'></div>",
-    props: [
-      "formData",
-      "query",
-      "selectedTab",
-      "isAggregationEnabled",
-      "isUsingBackendSql",
-      "isEditorOpen",
-    ],
-    expose: ["refreshData", "resizeChart", "evaluationStatus"],
-    setup() {
-      return { refreshData: vi.fn(), resizeChart: vi.fn(), evaluationStatus: null };
-    },
-  },
-}));
-
-vi.mock("./AlertSummary.vue", () => ({
-  default: {
-    name: "AlertSummary",
-    template: "<div data-test='mock-alert-summary'></div>",
-    props: [
-      "formData",
-      "destinations",
-      "focusManager",
-      "wizardStep",
-      "previewQuery",
-      "generatedSqlQuery",
-    ],
-  },
-}));
-
-const baseFormData = () => ({
-  name: "Test Alert",
-  stream_type: "logs",
-  stream_name: "test-stream",
-  is_real_time: "false",
-  query_condition: {
-    type: "custom",
-    aggregation: {
-      group_by: [""],
-      function: "avg",
-      having: { column: "", operator: ">=", value: 1 },
-    },
-  },
-  trigger_condition: { period: 10 },
-  destinations: [],
-});
-
-async function mountComp(props: Record<string, any> = {}) {
-  localStorage.clear();
-  return mount(AlertWizardRightColumn, {
-    global: {
-      plugins: [i18n, store],
-    },
-    props: {
-      formData: baseFormData(),
-      previewQuery: "SELECT * FROM test",
-      generatedSqlQuery: "",
-      selectedTab: "custom",
-      isAggregationEnabled: false,
-      destinations: [],
-      focusManager: {},
-      wizardStep: 1,
-      isUsingBackendSql: false,
-      isEditorOpen: false,
-      ...props,
-    },
-  });
-}
-
-describe("AlertWizardRightColumn - rendering", () => {
-  let wrapper: VueWrapper<any>;
-
-  beforeEach(async () => {
-    wrapper = await mountComp();
-  });
-
-  afterEach(() => {
-    wrapper?.unmount();
-    localStorage.clear();
-  });
-
-  it("renders without errors", () => {
-    expect(wrapper.exists()).toBe(true);
-  });
-
-  it("renders the PreviewAlert child", () => {
-    expect(wrapper.find('[data-test="mock-preview-alert"]').exists()).toBe(true);
-  });
-
-  it("renders the AlertSummary child", () => {
-    expect(wrapper.find('[data-test="mock-alert-summary"]').exists()).toBe(true);
-  });
-});
-
-describe("AlertWizardRightColumn - initial state", () => {
-  afterEach(() => {
-    localStorage.clear();
-    vi.clearAllMocks();
-  });
-
-  it("initializes expandState.preview to true by default", async () => {
-    const w = await mountComp();
-    expect(w.vm.expandState.preview).toBe(true);
-    w.unmount();
-  });
-
-  it("initializes expandState.summary to true by default", async () => {
-    const w = await mountComp();
-    expect(w.vm.expandState.summary).toBe(true);
-    w.unmount();
-  });
-
-  it("loads saved expandState from localStorage", async () => {
-    // Mount without clearing localStorage first
-    localStorage.setItem("alertWizardExpandState", JSON.stringify({ preview: false, summary: true }));
-    const w = mount(AlertWizardRightColumn, {
-      global: { plugins: [i18n, store] },
-      props: {
-        formData: baseFormData(),
-        previewQuery: "",
-        wizardStep: 1,
-      },
-    });
-    expect(w.vm.expandState.preview).toBe(false);
-    expect(w.vm.expandState.summary).toBe(true);
-    w.unmount();
-  });
-
-  it("falls back to defaults when localStorage is corrupt JSON", async () => {
-    localStorage.setItem("alertWizardExpandState", "not-json-{{{");
-    const w = await mountComp();
-    expect(w.vm.expandState.preview).toBe(true);
-    expect(w.vm.expandState.summary).toBe(true);
-    w.unmount();
-  });
-});
-
-describe("AlertWizardRightColumn - props", () => {
-  afterEach(() => {
-    localStorage.clear();
-    vi.clearAllMocks();
-  });
-
-  it("accepts all props", async () => {
-    const w = await mountComp();
-    expect(w.props("previewQuery")).toBe("SELECT * FROM test");
-    expect(w.props("selectedTab")).toBe("custom");
-    expect(w.props("wizardStep")).toBe(1);
-    w.unmount();
-  });
-
-  it("has default values for optional props", async () => {
-    const w = await mountComp();
-    expect(w.props("generatedSqlQuery")).toBe("");
-    expect(w.props("isAggregationEnabled")).toBe(false);
-    expect(w.props("destinations")).toEqual([]);
-    expect(w.props("isUsingBackendSql")).toBe(false);
-    w.unmount();
-  });
-
-  it("passes formData to PreviewAlert", async () => {
-    const w = await mountComp();
-    const preview = w.findComponent({ name: "PreviewAlert" });
-    expect(preview.props("formData")).toEqual(baseFormData());
-    w.unmount();
-  });
-
-  it("passes previewQuery to PreviewAlert", async () => {
-    const w = await mountComp();
-    const preview = w.findComponent({ name: "PreviewAlert" });
-    expect(preview.props("query")).toBe("SELECT * FROM test");
-    w.unmount();
-  });
-
-  it("passes isUsingBackendSql to PreviewAlert", async () => {
-    const w = await mountComp({ isUsingBackendSql: true });
-    const preview = w.findComponent({ name: "PreviewAlert" });
-    expect(preview.props("isUsingBackendSql")).toBe(true);
-    w.unmount();
-  });
-
-  it("passes generatedSqlQuery to AlertSummary", async () => {
-    const w = await mountComp({ generatedSqlQuery: "SELECT * FROM generated" });
-    const summary = w.findComponent({ name: "AlertSummary" });
-    expect(summary.props("generatedSqlQuery")).toBe("SELECT * FROM generated");
-    w.unmount();
-  });
-
-  it("passes formData to AlertSummary", async () => {
-    const w = await mountComp();
-    const summary = w.findComponent({ name: "AlertSummary" });
-    expect(summary.props("formData")).toEqual(baseFormData());
-    w.unmount();
-  });
-});
-
-describe("AlertWizardRightColumn - togglePreview", () => {
-  afterEach(() => {
-    localStorage.clear();
-    vi.clearAllMocks();
-  });
-
-  it("toggles preview from true to false", async () => {
-    const w = await mountComp();
-    expect(w.vm.expandState.preview).toBe(true);
-    w.vm.togglePreview();
-    expect(w.vm.expandState.preview).toBe(false);
-    w.unmount();
-  });
-
-  it("toggles preview from false to true", async () => {
-    localStorage.setItem("alertWizardExpandState", JSON.stringify({ preview: false, summary: true }));
-    const w = mount(AlertWizardRightColumn, {
-      global: { plugins: [i18n, store] },
-      props: { formData: baseFormData(), previewQuery: "", wizardStep: 1 },
-    });
-    w.vm.togglePreview();
-    expect(w.vm.expandState.preview).toBe(true);
-    w.unmount();
-  });
-
-  it("saves state to localStorage when toggling preview", async () => {
-    const w = await mountComp();
-    w.vm.togglePreview();
-    const saved = JSON.parse(localStorage.getItem("alertWizardExpandState") || "{}");
-    expect(saved.preview).toBe(false);
-    w.unmount();
-  });
-
-  it("handles localStorage.setItem failure gracefully", async () => {
-    const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {});
-    const original = Storage.prototype.setItem;
-    Storage.prototype.setItem = vi.fn(() => { throw new Error("quota exceeded"); });
-
-    const w = await mountComp();
-    expect(() => w.vm.togglePreview()).not.toThrow();
-    expect(consoleSpy).toHaveBeenCalled();
-
-    Storage.prototype.setItem = original;
-    consoleSpy.mockRestore();
-    w.unmount();
-  });
-});
-
-describe("AlertWizardRightColumn - toggleSummary", () => {
-  afterEach(() => {
-    localStorage.clear();
-    vi.clearAllMocks();
-  });
-
-  it("toggles summary from true to false", async () => {
-    const w = await mountComp();
-    expect(w.vm.expandState.summary).toBe(true);
-    w.vm.toggleSummary();
-    expect(w.vm.expandState.summary).toBe(false);
-    w.unmount();
-  });
-
-  it("toggles summary from false to true", async () => {
-    localStorage.setItem("alertWizardExpandState", JSON.stringify({ preview: true, summary: false }));
-    const w = mount(AlertWizardRightColumn, {
-      global: { plugins: [i18n, store] },
-      props: { formData: baseFormData(), previewQuery: "", wizardStep: 1 },
-    });
-    w.vm.toggleSummary();
-    expect(w.vm.expandState.summary).toBe(true);
-    w.unmount();
-  });
-
-  it("saves state to localStorage when toggling summary", async () => {
-    const w = await mountComp();
-    w.vm.toggleSummary();
-    const saved = JSON.parse(localStorage.getItem("alertWizardExpandState") || "{}");
-    expect(saved.summary).toBe(false);
-    w.unmount();
-  });
-});
-
-describe("AlertWizardRightColumn - expand state independence", () => {
-  afterEach(() => {
-    localStorage.clear();
-    vi.clearAllMocks();
-  });
-
-  it("toggling preview does not affect summary state", async () => {
-    const w = await mountComp();
-    w.vm.togglePreview();
-    expect(w.vm.expandState.preview).toBe(false);
-    expect(w.vm.expandState.summary).toBe(true);
-    w.unmount();
-  });
-
-  it("toggling summary does not affect preview state", async () => {
-    const w = await mountComp();
-    w.vm.toggleSummary();
-    expect(w.vm.expandState.preview).toBe(true);
-    expect(w.vm.expandState.summary).toBe(false);
-    w.unmount();
-  });
-
-  it("rapid toggling ends up at odd-count flip from start", async () => {
-    const w = await mountComp();
-    const initial = w.vm.expandState.preview;
-    w.vm.togglePreview();
-    w.vm.togglePreview();
-    w.vm.togglePreview();
-    expect(w.vm.expandState.preview).toBe(!initial);
-    w.unmount();
-  });
-});
-
-describe("AlertWizardRightColumn - computed styles", () => {
-  afterEach(() => {
-    localStorage.clear();
-    vi.clearAllMocks();
-  });
-
-  it("previewSectionStyle has flex:1 when preview is expanded", async () => {
-    const w = await mountComp();
-    w.vm.expandState.preview = true;
-    const style = w.vm.previewSectionStyle;
-    expect(style.flex).toBe("1");
-    w.unmount();
-  });
-
-  it("previewSectionStyle has flex:0 0 auto when preview is collapsed", async () => {
-    const w = await mountComp();
-    w.vm.expandState.preview = false;
-    const style = w.vm.previewSectionStyle;
-    expect(style.flex).toBe("0 0 auto");
-    w.unmount();
-  });
-
-  it("summarySectionStyle has flex:1 when summary is expanded", async () => {
-    const w = await mountComp();
-    w.vm.expandState.summary = true;
-    const style = w.vm.summarySectionStyle;
-    expect(style.flex).toBe("1");
-    w.unmount();
-  });
-
-  it("summarySectionStyle has flex:0 0 auto when summary is collapsed", async () => {
-    const w = await mountComp();
-    w.vm.expandState.summary = false;
-    const style = w.vm.summarySectionStyle;
-    expect(style.flex).toBe("0 0 auto");
-    w.unmount();
-  });
-
-  it("both expanded → both have minHeight:250px", async () => {
-    const w = await mountComp();
-    w.vm.expandState.preview = true;
-    w.vm.expandState.summary = true;
-    expect(w.vm.previewSectionStyle.minHeight).toBe("250px");
-    expect(w.vm.summarySectionStyle.minHeight).toBe("250px");
-    w.unmount();
-  });
-});
-
-describe("AlertWizardRightColumn - exposed refreshData", () => {
-  afterEach(() => {
-    localStorage.clear();
-    vi.clearAllMocks();
-  });
-
-  it("exposes refreshData method", async () => {
-    const w = await mountComp();
-    expect(typeof w.vm.refreshData).toBe("function");
-    w.unmount();
-  });
-
-  it("calls previewAlertRef.refreshData when invoked", async () => {
-    const w = await mountComp();
-    const mockRefresh = vi.fn();
-    w.vm.previewAlertRef = { refreshData: mockRefresh };
-    w.vm.refreshData();
-    expect(mockRefresh).toHaveBeenCalled();
-    w.unmount();
-  });
-
-  it("does not throw when previewAlertRef is null", async () => {
-    const w = await mountComp();
-    w.vm.previewAlertRef = null;
-    expect(() => w.vm.refreshData()).not.toThrow();
-    w.unmount();
-  });
-
-  it("does not throw when previewAlertRef is undefined", async () => {
-    const w = await mountComp();
-    w.vm.previewAlertRef = undefined;
-    expect(() => w.vm.refreshData()).not.toThrow();
-    w.unmount();
-  });
-});
-
-describe("AlertWizardRightColumn - isRealTime computed", () => {
-  afterEach(() => {
-    localStorage.clear();
-    vi.clearAllMocks();
-  });
-
-  it("returns true when is_real_time is string 'true'", async () => {
-    const w = await mountComp({ formData: { ...baseFormData(), is_real_time: "true" } });
-    expect(w.vm.isRealTime).toBe(true);
-    w.unmount();
-  });
-
-  it("returns true when is_real_time is boolean true", async () => {
-    const w = await mountComp({ formData: { ...baseFormData(), is_real_time: true } });
-    expect(w.vm.isRealTime).toBe(true);
-    w.unmount();
-  });
-
-  it("returns false when is_real_time is 'false'", async () => {
-    const w = await mountComp({ formData: { ...baseFormData(), is_real_time: "false" } });
-    expect(w.vm.isRealTime).toBe(false);
-    w.unmount();
-  });
-});
-
-describe("AlertWizardRightColumn - section content visibility (v-show)", () => {
-  afterEach(() => {
-    localStorage.clear();
-    vi.clearAllMocks();
-  });
-
-  it("preview content is visible when expandState.preview is true", async () => {
-    const w = await mountComp();
-    w.vm.expandState.preview = true;
-    await nextTick();
-    const content = w.find('[data-test="mock-preview-alert"]');
-    expect(content.isVisible()).toBe(true);
-    w.unmount();
-  });
-
-  it("preview content is hidden when expandState.preview is false", async () => {
-    const w = await mountComp();
-    w.vm.expandState.preview = false;
-    await nextTick();
-    const content = w.find('[data-test="mock-preview-alert"]');
-    expect(content.isVisible()).toBe(false);
-    w.unmount();
-  });
-
-  it("summary content is visible when expandState.summary is true", async () => {
-    const w = await mountComp();
-    w.vm.expandState.summary = true;
-    await nextTick();
-    const content = w.find('[data-test="mock-alert-summary"]');
-    expect(content.isVisible()).toBe(true);
-    w.unmount();
-  });
-
-  it("summary content is hidden when expandState.summary is false", async () => {
-    const w = await mountComp();
-    w.vm.expandState.summary = false;
-    await nextTick();
-    const content = w.find('[data-test="mock-alert-summary"]');
-    expect(content.isVisible()).toBe(false);
-    w.unmount();
-  });
-});
-
-describe("AlertWizardRightColumn - icon names in expand toggle buttons", () => {
-  afterEach(() => {
-    localStorage.clear();
-    vi.clearAllMocks();
-  });
-
-  it("preview expand-toggle shows expand-less icon when preview is expanded", async () => {
-    const w = await mountComp();
-    w.vm.expandState.preview = true;
-    await nextTick();
-    const icons = w.findAllComponents({ name: "OIcon" });
-    const previewToggleIcon = icons.find((i) => {
-      const name = i.props("name") as string;
-      return name?.includes("expand");
-    });
-    expect(previewToggleIcon?.props("name")).toMatch(/expand-less/);
-    w.unmount();
-  });
-
-  it("preview expand-toggle shows expand-more icon when preview is collapsed", async () => {
-    const w = await mountComp();
-    w.vm.expandState.preview = false;
-    await nextTick();
-    const icons = w.findAllComponents({ name: "OIcon" });
-    // First expand icon found should correspond to preview
-    const expandIcon = icons.find((i) => {
-      const name = i.props("name") as string;
-      return name?.includes("expand");
-    });
-    expect(expandIcon?.props("name")).toMatch(/expand-more/);
-    w.unmount();
-  });
-});
-
-describe("AlertWizardRightColumn - localStorage persistence", () => {
-  afterEach(() => {
-    localStorage.clear();
-    vi.clearAllMocks();
-  });
-
-  it("persists mixed state (preview=true, summary=false) after toggle + toggle-back", async () => {
-    const w = await mountComp();
-    w.vm.expandState.summary = false;
-    w.vm.togglePreview();
-    w.vm.togglePreview(); // back to true
-
-    const saved = JSON.parse(localStorage.getItem("alertWizardExpandState") || "{}");
-    expect(saved.preview).toBe(true);
-    expect(saved.summary).toBe(false);
-    w.unmount();
-  });
-
-  it("restores state on remount", async () => {
-    // First: set the localStorage state directly, then mount fresh
-    localStorage.setItem("alertWizardExpandState", JSON.stringify({ preview: false, summary: true }));
-
-    const w2 = mount(AlertWizardRightColumn, {
-      global: { plugins: [i18n, store] },
-      props: { formData: baseFormData(), previewQuery: "", wizardStep: 1 },
-    });
-    expect(w2.vm.expandState.preview).toBe(false);
-    expect(w2.vm.expandState.summary).toBe(true);
-    w2.unmount();
-  });
-});
-
-describe("AlertWizardRightColumn - edge cases", () => {
-  afterEach(() => {
-    localStorage.clear();
-    vi.clearAllMocks();
-  });
-
-  it("does not auto-expand preview on wizardStep change", async () => {
-    const w = await mountComp();
-    w.vm.expandState.preview = false;
-    await w.setProps({ wizardStep: 2, selectedTab: "custom" });
-    await nextTick();
-    expect(w.vm.expandState.preview).toBe(false);
-    w.unmount();
-  });
-
-  it("maintains expand state across prop updates", async () => {
-    const w = await mountComp();
-    w.vm.expandState.preview = false;
-    w.vm.expandState.summary = false;
-    await w.setProps({ previewQuery: "NEW QUERY" });
-    await nextTick();
-    expect(w.vm.expandState.preview).toBe(false);
-    expect(w.vm.expandState.summary).toBe(false);
-    w.unmount();
-  });
-
-  it("handles formData change without affecting expand state", async () => {
-    const w = await mountComp();
-    w.vm.expandState.preview = false;
-    await w.setProps({ formData: { ...baseFormData(), name: "Updated" } });
-    await nextTick();
-    expect(w.vm.expandState.preview).toBe(false);
-    w.unmount();
-  });
-});
diff --git a/web/src/components/alerts/AlertWizardRightColumn.vue b/web/src/components/alerts/AlertWizardRightColumn.vue
deleted file mode 100644
index f6103051e8..0000000000
--- a/web/src/components/alerts/AlertWizardRightColumn.vue
+++ /dev/null
@@ -1,329 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <!-- Right Column: Preview & Summary (calc to account for gap) -->
-  <div class="flex-[0_0_calc(32%-0.625rem)] flex flex-col gap-2 overflow-y-auto overflow-x-clip" style="height: calc(100vh - 302px); position: sticky; top: 0;">
-    <!-- Preview Section -->
-    <div
-      class="collapsible-section card-container preview-section flex flex-col transition-all duration-300 bg-(--o2-card-bg) rounded-md shadow-[0_0_5px_1px_var(--o2-hover-shadow)] border border-(--o2-border-color)"
-      :style="previewSectionStyle"
-    >
-      <div
-        class="flex items-center justify-between px-4 py-3 cursor-pointer shrink-0 border-b border-[var(--o2-border-color,rgba(0,0,0,0.08))] transition-all duration-200 rounded-t-md select-none hover:bg-black/4 active:bg-black/[0.06]"
-        @click="togglePreview"
-      >
-        <div class="flex items-center gap-2">
-          <span class="text-sm font-semibold">{{ t('alerts.preview') }}</span>
-          <!-- Status Indicator -->
-          <div
-            v-if="evaluationStatus && !isRealTime"
-            class="alert-status-indicator group flex items-center gap-1.5 px-2 py-1 rounded border-l-[0.1875rem] border-l-solid bg-[rgba(76,175,80,0.08)] border-l-[#4caf50]"
-            :class="{
-              'status-indicator-light': store.state.theme !== 'dark',
-              'bg-[rgba(158,158,158,0.08)] border-l-[#9e9e9e]': !evaluationStatus.wouldTrigger,
-              'bg-[rgba(76,175,80,0.04)]': store.state.theme !== 'dark' && evaluationStatus.wouldTrigger,
-              'bg-[rgba(158,158,158,0.04)]': store.state.theme !== 'dark' && !evaluationStatus.wouldTrigger,
-            }"
-            data-test="alert-status-indicator"
-          >
-            <OIcon
-              :name="evaluationStatus.wouldTrigger ? 'check-circle' : 'cancel'" size="sm"
-              class="text-xs flex-shrink-0"
-              :class="evaluationStatus.wouldTrigger ? 'text-green-500' : 'text-gray-400'"
-            />
-            <span class="text-xs font-semibold tracking-wide uppercase flex-shrink-0 whitespace-nowrap">
-              {{ evaluationStatus.wouldTrigger ? t('alerts.wouldTrigger') : t('alerts.wouldNotTrigger') }}
-            </span>
-            <span class="text-xs flex-shrink-0 text-[rgba(255,255,255,0.3)] group-[.status-indicator-light]:text-[rgba(0,0,0,0.3)]">•</span>
-            <span class="text-xs text-[rgba(255,255,255,0.65)] group-[.status-indicator-light]:text-[rgba(0,0,0,0.6)]">
-              {{ evaluationStatus.reason }}
-            </span>
-          </div>
-        </div>
-        <OButton
-          variant="ghost"
-          size="icon-circle-sm"
-          @click.stop="togglePreview"
-          class="expand-toggle-btn opacity-50 transition-all duration-200 hover:opacity-100"
-        >
-          <OIcon :name="expandState.preview ? 'expand-less' : 'expand-more'" size="sm" />
-        </OButton>
-      </div>
-      <div v-show="expandState.preview" class="section-content flex-1 flex flex-col">
-        <keep-alive>
-          <preview-alert
-            style="height: 100%;"
-            ref="previewAlertRef"
-            :formData="formData"
-            :query="previewQuery"
-            :selectedTab="selectedTab"
-            :isAggregationEnabled="isAggregationEnabled"
-            :isUsingBackendSql="isUsingBackendSql"
-            :isEditorOpen="isEditorOpen"
-          />
-        </keep-alive>
-      </div>
-    </div>
-
-    <!-- Summary Section -->
-    <div
-      class="collapsible-section card-container flex flex-col transition-all duration-300 bg-(--o2-card-bg) rounded-md shadow-[0_0_5px_1px_var(--o2-hover-shadow)] border border-(--o2-border-color)"
-      :style="summarySectionStyle"
-    >
-      <div
-        class="flex items-center justify-between px-4 py-3 cursor-pointer shrink-0 border-b border-[var(--o2-border-color,rgba(0,0,0,0.08))] transition-all duration-200 rounded-t-md select-none hover:bg-black/4 active:bg-black/[0.06]"
-        @click="toggleSummary"
-      >
-        <span class="text-sm font-semibold">{{ t('alerts.summary.title') }}</span>
-        <OButton
-          variant="ghost"
-          size="icon-circle-sm"
-          @click.stop="toggleSummary"
-          class="expand-toggle-btn opacity-50 transition-all duration-200 hover:opacity-100"
-        >
-          <OIcon :name="expandState.summary ? 'expand-less' : 'expand-more'" size="sm" />
-        </OButton>
-      </div>
-      <div v-show="expandState.summary" class="summary-section-content flex-1 overflow-hidden flex flex-col">
-        <alert-summary
-          style="height: 100%; overflow: auto;"
-          :formData="formData"
-          :destinations="destinations"
-          :focusManager="focusManager"
-          :wizardStep="wizardStep"
-          :previewQuery="previewQuery"
-          :generatedSqlQuery="generatedSqlQuery"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref, computed, reactive, watch, onMounted, onUnmounted, type PropType } from "vue";
-import { useStore } from "vuex";
-import { useI18n } from "vue-i18n";
-import PreviewAlert from "./PreviewAlert.vue";
-import AlertSummary from "./AlertSummary.vue";
-import OButton from "@/lib/core/Button/OButton.vue";
-
-import OIcon from "@/lib/core/Icon/OIcon.vue";
-export default defineComponent({
-  name: "AlertWizardRightColumn",
-  components: {
-    PreviewAlert,
-    AlertSummary,
-    OButton,
-    OIcon,
-},
-  props: {
-    formData: {
-      type: Object as PropType<any>,
-      required: true,
-    },
-    previewQuery: {
-      type: String,
-      default: "",
-    },
-    generatedSqlQuery: {
-      type: String,
-      default: "",
-    },
-    selectedTab: {
-      type: String,
-      default: "custom",
-    },
-    isAggregationEnabled: {
-      type: Boolean,
-      default: false,
-    },
-    destinations: {
-      type: Array as PropType<any[]>,
-      default: () => [],
-    },
-    focusManager: {
-      type: Object as PropType<any>,
-      default: undefined,
-    },
-    wizardStep: {
-      type: Number,
-      required: false,
-      default: 1,
-    },
-    isUsingBackendSql: {
-      type: Boolean,
-      default: false,
-    },
-    isEditorOpen: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  setup(props, { expose }) {
-    const store = useStore();
-    const { t } = useI18n();
-    const previewAlertRef = ref(null);
-
-    // Reactive ref for evaluation status
-    const evaluationStatus = ref(null);
-
-    // Watch the child component's evaluation status
-    watch(
-      () => previewAlertRef.value?.evaluationStatus,
-      (newStatus) => {
-        evaluationStatus.value = newStatus;
-      },
-      { deep: true, immediate: true }
-    );
-
-    // Computed property to check if this is a real-time alert
-    const isRealTime = computed(() => {
-      return props.formData.is_real_time === "true" || props.formData.is_real_time === true;
-    });
-
-    // Load saved state from localStorage or use defaults
-    const loadExpandState = () => {
-      try {
-        const saved = localStorage.getItem('alertWizardExpandState');
-        if (saved) {
-          return JSON.parse(saved);
-        }
-      } catch (e) {
-        console.error('Failed to load expand state:', e);
-      }
-      return { preview: true, summary: true };
-    };
-
-    // Expand/collapse state for both sections
-    const expandState = reactive(loadExpandState());
-
-    // Save state to localStorage
-    const saveExpandState = () => {
-      try {
-        localStorage.setItem('alertWizardExpandState', JSON.stringify({
-          preview: expandState.preview,
-          summary: expandState.summary,
-        }));
-      } catch (e) {
-        console.error('Failed to save expand state:', e);
-      }
-    };
-
-    // Toggle functions - simple toggle for each section
-    const togglePreview = () => {
-      expandState.preview = !expandState.preview;
-      saveExpandState();
-    };
-
-    const toggleSummary = () => {
-      expandState.summary = !expandState.summary;
-      saveExpandState();
-    };
-
-    // Calculate section heights based on expand state
-    const previewSectionStyle = computed(() => {
-      if (!expandState.preview) {
-        // Preview collapsed: only show header
-        return { flex: "0 0 auto" };
-      } else if (expandState.summary) {
-        // Both expanded: 50% each
-        return { flex: "1", minHeight: "250px" };
-      } else {
-        // Preview expanded, summary collapsed: take all space
-        return { flex: "1", minHeight: "250px" };
-      }
-    });
-
-    const summarySectionStyle = computed(() => {
-      if (!expandState.summary) {
-        // Summary collapsed: only show header
-        return { flex: "0 0 auto" };
-      } else if (expandState.preview) {
-        // Both expanded: 50% each
-        return { flex: "1", minHeight: "250px" };
-      } else {
-        // Summary expanded, preview collapsed: take all space
-        return { flex: "1", minHeight: "250px" };
-      }
-    });
-
-
-    // Expose refreshData method from PreviewAlert
-    const refreshData = () => {
-      if (previewAlertRef.value) {
-        (previewAlertRef.value as any).refreshData();
-      }
-    };
-
-    // Note: ResizeObserver in PanelSchemaRenderer should automatically detect size changes
-    // and resize the chart without any intervention. We're keeping this watcher commented
-    // to verify if manual intervention is needed.
-
-    // watch(
-    //   () => [expandState.preview, expandState.summary],
-    //   async () => {
-    //     // Wait for CSS transition to complete
-    //     await new Promise(resolve => setTimeout(resolve, 350));
-    //     if (previewAlertRef.value && expandState.preview) {
-    //       (previewAlertRef.value as any).resizeChart();
-    //     }
-    //   }
-    // );
-
-    // Handle window resize to rerender chart (without refetching data)
-    let resizeTimeout: NodeJS.Timeout;
-    const handleResize = () => {
-      // Debounce resize events to avoid excessive rerenders
-      clearTimeout(resizeTimeout);
-      resizeTimeout = setTimeout(() => {
-        if (previewAlertRef.value && expandState.preview) {
-          (previewAlertRef.value as any).resizeChart();
-        }
-      }, 300);
-    };
-
-    // Setup resize listener on mount
-    onMounted(() => {
-      window.addEventListener('resize', handleResize);
-    });
-
-    // Cleanup resize listener on unmount
-    onUnmounted(() => {
-      window.removeEventListener('resize', handleResize);
-      clearTimeout(resizeTimeout);
-    });
-
-    // Expose the method to parent component
-    expose({
-      refreshData,
-    });
-
-    return {
-      t,
-      store,
-      previewAlertRef,
-      expandState,
-      togglePreview,
-      toggleSummary,
-      previewSectionStyle,
-      summarySectionStyle,
-      evaluationStatus,
-      isRealTime,
-    };
-  },
-});
-</script>
diff --git a/web/src/components/alerts/AlertsContainer.spec.ts b/web/src/components/alerts/AlertsContainer.spec.ts
deleted file mode 100644
index 4ac79db083..0000000000
--- a/web/src/components/alerts/AlertsContainer.spec.ts
+++ /dev/null
@@ -1,441 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { describe, it, expect, beforeEach, afterEach } from "vitest";
-import { mount, flushPromises, VueWrapper } from "@vue/test-utils";
-import AlertsContainer from "./AlertsContainer.vue";
-import { createStore } from "vuex";
-
-
-// ==================== TEST DATA FACTORIES ====================
-
-/**
- * Creates a mock Vuex store
- */
-function createMockStore(theme = "light") {
-  return createStore({
-    state: {
-      theme,
-    },
-  });
-}
-
-/**
- * Creates mock props for AlertsContainer
- */
-function createMockProps(overrides = {}) {
-  return {
-    name: "test-container",
-    label: "Test Container",
-    subLabel: "",
-    isExpandable: true,
-    isExpanded: false,
-    icon: "edit",
-    image: "",
-    iconClass: "",
-    labelClass: "",
-    ...overrides,
-  };
-}
-
-// ==================== HELPER FUNCTIONS ====================
-
-/**
- * Finds an element by data-test attribute
- */
-function findByTestId(wrapper: VueWrapper, testId: string) {
-  return wrapper.find(`[data-test="${testId}"]`);
-}
-
-/**
- * Checks if an element exists by data-test id
- */
-function existsByTestId(wrapper: VueWrapper, testId: string): boolean {
-  return findByTestId(wrapper, testId).exists();
-}
-
-/**
- * Clicks the header to toggle expansion
- */
-async function clickHeader(wrapper: VueWrapper) {
-  const header = findByTestId(wrapper, "alerts-container-header");
-  await header.trigger("click");
-  await flushPromises();
-}
-
-/**
- * Mounts the component with default test setup
- */
-function mountComponent(props = {}, theme = "light", slots = {}) {
-  const store = createMockStore(theme);
-  const defaultProps = createMockProps(props);
-
-  return mount(AlertsContainer, {
-    props: defaultProps,
-    global: {
-      plugins: [store],
-    },
-    slots,
-  });
-}
-
-// ==================== TESTS ====================
-
-describe("AlertsContainer", () => {
-  let wrapper: VueWrapper;
-
-  afterEach(() => {
-    wrapper?.unmount();
-  });
-
-  describe("Component Rendering", () => {
-    it("should render the component", () => {
-      wrapper = mountComponent();
-      expect(wrapper.exists()).toBe(true);
-      expect(existsByTestId(wrapper, "alerts-container")).toBe(true);
-    });
-
-    it("should render header section", () => {
-      wrapper = mountComponent();
-      expect(existsByTestId(wrapper, "alerts-container-header")).toBe(true);
-    });
-
-    it("should render label wrapper", () => {
-      wrapper = mountComponent();
-      expect(existsByTestId(wrapper, "container-label-wrapper")).toBe(true);
-    });
-
-    it("should render expand toggle icon", () => {
-      wrapper = mountComponent();
-      expect(existsByTestId(wrapper, "expand-toggle-icon")).toBe(true);
-    });
-  });
-
-  describe("Label Display", () => {
-    it("should display main label", () => {
-      wrapper = mountComponent({ label: "Destinations" });
-      const label = findByTestId(wrapper, "container-label");
-      expect(label.text()).toBe("Destinations");
-    });
-
-    it("should display sublabel when provided", () => {
-      wrapper = mountComponent({
-        label: "Main Label",
-        subLabel: "Subtitle text",
-      });
-      const sublabel = findByTestId(wrapper, "container-sublabel");
-      expect(sublabel.text()).toBe("Subtitle text");
-    });
-
-    it("should render empty sublabel when not provided", () => {
-      wrapper = mountComponent({ label: "Label", subLabel: "" });
-      const sublabel = findByTestId(wrapper, "container-sublabel");
-      expect(sublabel.text()).toBe("");
-    });
-
-    it("should update label when prop changes", async () => {
-      wrapper = mountComponent({ label: "Initial" });
-      await wrapper.setProps({ label: "Updated" });
-      const label = findByTestId(wrapper, "container-label");
-      expect(label.text()).toBe("Updated");
-    });
-  });
-
-  describe("Icon Display", () => {
-    it("should display icon when no image provided", () => {
-      wrapper = mountComponent({ icon: "settings", image: "" });
-      expect(existsByTestId(wrapper, "container-icon")).toBe(true);
-      expect(existsByTestId(wrapper, "container-image")).toBe(false);
-    });
-
-    it("should render correct icon name", () => {
-      wrapper = mountComponent({ icon: "notifications" });
-      const icon = findByTestId(wrapper, "container-icon");
-      expect(icon.exists()).toBe(true);
-      // OIcon renders SVG by name — verify the icon element exists with notifications semantic
-      expect(icon.attributes("data-test")).toBe("container-icon");
-    });
-
-    it("should display image when provided", () => {
-      wrapper = mountComponent({ image: "/path/to/image.png", icon: "edit" });
-      expect(existsByTestId(wrapper, "container-image")).toBe(true);
-      expect(existsByTestId(wrapper, "container-icon")).toBe(false);
-    });
-
-    it("should render correct image src", () => {
-      wrapper = mountComponent({ image: "/assets/logo.svg" });
-      const img = findByTestId(wrapper, "container-image");
-      expect(img.attributes("src")).toBe("/assets/logo.svg");
-    });
-
-    it("should render the icon element when iconClass is provided", () => {
-      wrapper = mountComponent({
-        icon: "edit",
-        iconClass: "custom-icon-class",
-      });
-      const icon = findByTestId(wrapper, "container-icon");
-      expect(icon.exists()).toBe(true);
-    });
-
-    it("should render icon in dark mode", () => {
-      wrapper = mountComponent({ icon: "edit" }, "dark");
-      const icon = findByTestId(wrapper, "container-icon");
-      expect(icon.exists()).toBe(true);
-    });
-
-    it("should render icon in light mode", () => {
-      wrapper = mountComponent({ icon: "edit" }, "light");
-      const icon = findByTestId(wrapper, "container-icon");
-      expect(icon.exists()).toBe(true);
-    });
-  });
-
-  describe("Expand/Collapse Functionality", () => {
-    it("should start collapsed by default", () => {
-      wrapper = mountComponent({ isExpanded: false });
-      expect(existsByTestId(wrapper, "container-content")).toBe(false);
-    });
-
-    it("should start expanded when isExpanded is true", () => {
-      wrapper = mountComponent({ isExpanded: true });
-      expect(existsByTestId(wrapper, "container-content")).toBe(true);
-    });
-
-    it("should emit update:isExpanded when header is clicked", async () => {
-      wrapper = mountComponent({ isExpanded: false });
-      await clickHeader(wrapper);
-
-      expect(wrapper.emitted("update:isExpanded")).toBeTruthy();
-      expect(wrapper.emitted("update:isExpanded")?.[0]).toEqual([true]);
-    });
-
-    it("should toggle from collapsed to expanded", async () => {
-      wrapper = mountComponent({ isExpanded: false });
-      await clickHeader(wrapper);
-
-      expect(wrapper.emitted("update:isExpanded")?.[0]).toEqual([true]);
-    });
-
-    it("should toggle from expanded to collapsed", async () => {
-      wrapper = mountComponent({ isExpanded: true });
-      await clickHeader(wrapper);
-
-      expect(wrapper.emitted("update:isExpanded")?.[0]).toEqual([false]);
-    });
-
-    it("should show down arrow when collapsed", () => {
-      wrapper = mountComponent({ isExpanded: false });
-      // OIcon SVG rendered — verify toggle icon element exists
-      const toggleIcon = findByTestId(wrapper, "expand-toggle-icon");
-      expect(toggleIcon.exists()).toBe(true);
-    });
-
-    it("should show up arrow when expanded", () => {
-      wrapper = mountComponent({ isExpanded: true });
-      const toggleIcon = findByTestId(wrapper, "expand-toggle-icon");
-      expect(toggleIcon.exists()).toBe(true);
-    });
-
-    it("should update toggle icon when expansion changes", async () => {
-      wrapper = mountComponent({ isExpanded: false });
-      let toggleIcon = findByTestId(wrapper, "expand-toggle-icon");
-      expect(toggleIcon.exists()).toBe(true);
-
-      await wrapper.setProps({ isExpanded: true });
-      toggleIcon = findByTestId(wrapper, "expand-toggle-icon");
-      expect(toggleIcon.exists()).toBe(true);
-    });
-
-    it("should handle multiple rapid toggles", async () => {
-      wrapper = mountComponent({ isExpanded: false });
-
-      await clickHeader(wrapper);
-      await wrapper.setProps({ isExpanded: true });
-
-      await clickHeader(wrapper);
-      await wrapper.setProps({ isExpanded: false });
-
-      await clickHeader(wrapper);
-
-      expect(wrapper.emitted("update:isExpanded")?.length).toBe(3);
-    });
-  });
-
-  describe("Slot Content", () => {
-    it("should render slot content when expanded", () => {
-      wrapper = mountComponent(
-        { isExpanded: true },
-        "light",
-        { default: '<div class="test-content">Slot Content</div>' }
-      );
-
-      expect(existsByTestId(wrapper, "container-content")).toBe(true);
-      expect(wrapper.html()).toContain("Slot Content");
-    });
-
-    it("should not render slot content when collapsed", () => {
-      wrapper = mountComponent(
-        { isExpanded: false },
-        "light",
-        { default: '<div class="test-content">Slot Content</div>' }
-      );
-
-      expect(existsByTestId(wrapper, "container-content")).toBe(false);
-      expect(wrapper.html()).not.toContain("Slot Content");
-    });
-
-    it("should show/hide slot content on toggle", async () => {
-      wrapper = mountComponent(
-        { isExpanded: false },
-        "light",
-        { default: '<div class="test-content">Dynamic Content</div>' }
-      );
-
-      expect(wrapper.html()).not.toContain("Dynamic Content");
-
-      await wrapper.setProps({ isExpanded: true });
-      await flushPromises();
-
-      expect(wrapper.html()).toContain("Dynamic Content");
-    });
-  });
-
-  describe("Theme Support", () => {
-    it("should render toggle icon in dark mode", () => {
-      wrapper = mountComponent({ isExpanded: false }, "dark");
-      const icon = findByTestId(wrapper, "expand-toggle-icon");
-      expect(icon.exists()).toBe(true);
-    });
-
-    it("should render toggle icon in light mode", () => {
-      wrapper = mountComponent({ isExpanded: false }, "light");
-      const icon = findByTestId(wrapper, "expand-toggle-icon");
-      expect(icon.exists()).toBe(true);
-    });
-
-    it("should render sublabel in dark mode", () => {
-      wrapper = mountComponent({ subLabel: "Test" }, "dark");
-      const sublabel = findByTestId(wrapper, "container-sublabel");
-      expect(sublabel.text()).toBe("Test");
-    });
-
-    it("should render sublabel in light mode", () => {
-      wrapper = mountComponent({ subLabel: "Test" }, "light");
-      const sublabel = findByTestId(wrapper, "container-sublabel");
-      expect(sublabel.text()).toBe("Test");
-    });
-  });
-
-  describe("Edge Cases", () => {
-    it("should handle very long labels", () => {
-      const longLabel = "A".repeat(500);
-      wrapper = mountComponent({ label: longLabel });
-      const label = findByTestId(wrapper, "container-label");
-      expect(label.text()).toBe(longLabel);
-    });
-
-    it("should handle labels with special characters", () => {
-      const specialLabel = "Label <>&\"' Special";
-      wrapper = mountComponent({ label: specialLabel });
-      const label = findByTestId(wrapper, "container-label");
-      expect(label.text()).toBe(specialLabel);
-    });
-
-    it("should handle empty icon", () => {
-      wrapper = mountComponent({ icon: "" });
-      const containerIcon = findByTestId(wrapper, "container-icon");
-      // OIcon renders even with empty name
-      expect(containerIcon.exists()).toBe(true);
-    });
-
-    it("should handle invalid image path gracefully", () => {
-      wrapper = mountComponent({ image: "/invalid/path.png" });
-      const img = findByTestId(wrapper, "container-image");
-      expect(img.exists()).toBe(true);
-    });
-
-    it("should render image when both image and iconClass are provided", () => {
-      wrapper = mountComponent({
-        image: "/test.png",
-        iconClass: "custom-class",
-      });
-      const img = findByTestId(wrapper, "container-image");
-      expect(img.exists()).toBe(true);
-    });
-  });
-
-  describe("Integration Scenarios", () => {
-    it("should handle complete user interaction flow", async () => {
-      wrapper = mountComponent(
-        {
-          label: "My Section",
-          subLabel: "Click to expand",
-          isExpanded: false,
-        },
-        "light",
-        { default: '<div>Hidden Content</div>' }
-      );
-
-      // Verify initial state
-      expect(findByTestId(wrapper, "container-label").text()).toBe("My Section");
-      expect(existsByTestId(wrapper, "container-content")).toBe(false);
-
-      // User clicks to expand
-      await clickHeader(wrapper);
-      expect(wrapper.emitted("update:isExpanded")?.[0]).toEqual([true]);
-
-      // Simulate parent updating prop
-      await wrapper.setProps({ isExpanded: true });
-      expect(existsByTestId(wrapper, "container-content")).toBe(true);
-
-      // User clicks to collapse
-      await clickHeader(wrapper);
-      expect(wrapper.emitted("update:isExpanded")?.[1]).toEqual([false]);
-    });
-
-    it("should handle v-model pattern correctly", async () => {
-      wrapper = mountComponent({ isExpanded: false });
-
-      // Parent updates v-model
-      await wrapper.setProps({ isExpanded: true });
-      expect(existsByTestId(wrapper, "container-content")).toBe(true);
-
-      // Component emits update
-      await clickHeader(wrapper);
-      expect(wrapper.emitted("update:isExpanded")).toBeTruthy();
-
-      // Parent syncs state
-      await wrapper.setProps({ isExpanded: false });
-      expect(existsByTestId(wrapper, "container-content")).toBe(false);
-    });
-
-    it("should maintain state across theme changes", async () => {
-      const store = createMockStore("light");
-      wrapper = mount(AlertsContainer, {
-        props: createMockProps({ isExpanded: true }),
-        global: { plugins: [store] },
-      });
-
-      expect(existsByTestId(wrapper, "container-content")).toBe(true);
-
-      // Change theme
-      store.state.theme = "dark";
-      await flushPromises();
-
-      // State should remain
-      expect(existsByTestId(wrapper, "container-content")).toBe(true);
-    });
-  });
-});
diff --git a/web/src/components/alerts/AlertsContainer.vue b/web/src/components/alerts/AlertsContainer.vue
deleted file mode 100644
index 7891f4ca03..0000000000
--- a/web/src/components/alerts/AlertsContainer.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-<template>
-    <div data-test="alerts-container">
-      <div data-test="alerts-container-header" class="flex justify-between cursor-pointer" @click="expanded = !expanded">
-        <div class="flex items-start justify-between w-full ">
-
-          <div
-            class="text-[16px] flex items-start"
-
-          >
-          <OIcon
-            v-if="!image"
-            data-test="container-icon"
-            :name="icon"
-            size="sm"
-            class="mr-2   rounded-full px-1 py-1  "
-            :class="[
-              store.state.theme === 'dark'
-                ? 'text-gray-100 bg-gray-600'
-                : 'bg-[#f2f1f1] text-[#555555]',
-                iconClass
-            ]"
-          />
-          <img
-            v-else
-            data-test="container-image"
-            :src="image"
-            class="mr-2 rounded-full px-1 py-1"
-            :class="[
-              store.state.theme === 'dark'
-                ? 'text-gray-100 bg-gray-600'
-                : 'bg-[#f2f1f1] text-[#555555]',
-                iconClass
-            ]"
-          />
-          <div data-test="container-label-wrapper" class="flex flex-col items-start justify-start">
-           <span data-test="container-label"> {{ label }}</span>
-            <div data-test="container-sublabel" class="text-[13px] h-[20px]"
-            :class="[
-              store.state.theme === 'dark'
-                ? 'text-[#c6c6c6]'
-                : 'text-gray-900',
-            ]"
-            >
-                {{ subLabel }}
-            </div>
-          </div>
-
-          </div>
-          <OIcon
-            data-test="expand-toggle-icon"
-            :name="expanded ? 'keyboard-arrow-up' : 'keyboard-arrow-down'"
-            class="rounded-full p-1 mt-2"
-
-            :class="[
-              store.state.theme === 'dark'
-                ? 'text-gray-100  bg-gray-600'
-                : 'text-gray-900 bg-gray-300',
-            ]"
-            size="sm"
-          />
-        </div>
-      </div>
-      <div v-if="expanded" data-test="container-content">
-        <slot />
-      </div>
-    </div>
-    
-  </template>
-  <script setup lang="ts">
-  import { computed } from "vue";
-  import { useStore } from "vuex";
-  
-  const props = defineProps({
-    name: {
-      type: String,
-      required: true,
-    },
-    label: {
-      type: String,
-      required: true,
-    },
-    isExpandable: {
-      type: Boolean,
-      default: true,
-    },
-    isExpanded: {
-      type: Boolean,
-      default: false,
-    },
-    labelClass: {
-      type: String,
-      default: "",
-    },
-    subLabel: {
-      type: String,
-      default: "",
-    },
-    icon:{
-      type: String,
-      default: "edit",
-    },
-    image:{
-      type: String,
-      default: "",
-    },
-    iconClass:{
-      type: String,
-      default: "",
-    }
-  });
-  
-  const emits = defineEmits(["update:isExpanded"]);
-  
-  const store = useStore();
-  
-  const expanded = computed({
-    get: () => props.isExpanded,
-    set: (value) => emits("update:isExpanded", value),
-  });
-  </script>
-  
-  
\ No newline at end of file
diff --git a/web/src/components/alerts/AlertsDestinationList.vue b/web/src/components/alerts/AlertsDestinationList.vue
index 464abb1b3d..dfed707d2b 100644
--- a/web/src/components/alerts/AlertsDestinationList.vue
+++ b/web/src/components/alerts/AlertsDestinationList.vue
@@ -17,18 +17,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div class="flex flex-col h-full p-0">
 
-    <PageLayout
+    <OPageLayout bleed
       v-if="!showDestinationEditor && !showImportDestination"
-      :main-panel="false"
-      :header-class="'shrink-0 px-4 border-b border-border-default'"
+      :title="t('alert_destinations.header')"
+      title-data-test="alert-destinations-list-title"
+      icon="location-on"
+      subtitle="Where triggered alerts are delivered"
     >
-      <template #header>
-      <AppPageHeader
-        :title="t('alert_destinations.header')"
-        title-data-test="alert-destinations-list-title"
-        icon="location-on"
-        subtitle="Where triggered alerts are delivered"
-      >
         <template #actions>
           <OToggleGroup
             :model-value="activeTab"
@@ -62,9 +57,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             @click="editDestination(null)"
           >{{ t(`alert_destinations.add`) }}</OButton>
         </template>
-      </AppPageHeader>
-      </template>
-      <div class="card-container flex-1 min-h-0">
+      <div class="bg-card-glass-bg flex-1 min-h-0">
         <OTable
           data-test="alert-destinations-list-table"
           :data="visibleRows"
@@ -82,6 +75,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :enable-column-resize="true"
           :persist-columns="true"
           table-id="settings-alert-destinations"
+          show-index
           :show-global-filter="false"
           @update:selected-ids="handleSelectedIdsUpdate"
         >
@@ -107,7 +101,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </template>
 
           <template #bottom="{ totalRows }">
-            <span class="o2-table-footer-title">
+            <span class="text-xs font-normal">
               {{ totalRows.toLocaleString() }} {{ t('alert_destinations.header') }}
             </span>
             <OButton
@@ -155,7 +149,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 class="flex-shrink-0"
               />
             </div>
-            <span v-else class="text-text-primary">—</span>
+            <span v-else class="text-text-secondary">—</span>
           </template>
 
           <template #cell-type="{ row }">
@@ -223,8 +217,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </template>
         </OTable>
       </div>
-    </PageLayout>
-    <div v-else-if="showDestinationEditor && !showImportDestination">
+    </OPageLayout>
+    <div v-else-if="showDestinationEditor && !showImportDestination" class="flex-1 min-h-0">
       <AddDestination
         :is-alerts="true"
         :destination="editingDestination"
@@ -295,13 +289,12 @@ import OTag from '@/lib/core/Badge/OTag.vue';
 import OTable from "@/lib/core/Table/OTable.vue";
 import OToggleGroup from "@/lib/core/ToggleGroup/OToggleGroup.vue";
 import OToggleGroupItem from "@/lib/core/ToggleGroup/OToggleGroupItem.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
-import PageLayout from "@/components/common/PageLayout.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import type { OTableColumnDef } from "@/lib/core/Table/OTable.types";
 import { toast } from "@/lib/feedback/Toast/useToast";
 import { useShortcuts } from "@/lib/vue-shortcut-manager";
 import { focusSearchInput, isInputFocused } from "@/utils/keyboardShortcuts";
-import { TABLE_INDEX_COL_SIZE, COL } from "@/lib/core/Table/OTable.types";
+import { COL } from "@/lib/core/Table/OTable.types";
 
 interface ConformDelete {
   visible: boolean;
@@ -323,8 +316,7 @@ export default defineComponent({
     OTable,
     OToggleGroup,
     OToggleGroupItem,
-    AppPageHeader,
-    PageLayout,
+    OPageLayout,
   },
   setup() {
     const store = useStore();
@@ -336,13 +328,6 @@ export default defineComponent({
     const { detectPrebuiltType, availableTypes } = usePrebuiltDestinations();
 
     const columns: OTableColumnDef[] = [
-      {
-        id: "#",
-        header: "#",
-        accessorKey: "#",
-        size: TABLE_INDEX_COL_SIZE,
-        meta: { align: "left" },
-      },
       {
         id: "name",
         header: t("alert_destinations.name"),
@@ -496,10 +481,7 @@ export default defineComponent({
               destination.type === "action",
           );
           resultTotal.value = res.data.length;
-          destinations.value = res.data.map((data: any, index: number) => ({
-            ...data,
-            "#": index + 1 <= 9 ? `0${index + 1}` : index + 1,
-          }));
+          destinations.value = res.data;
           updateRoute();
         })
         .catch((err) => {
@@ -640,7 +622,6 @@ export default defineComponent({
     const exportDestination = (row: any) => {
       const findDestination: any = getDestinationByName(row.name);
       const destinationByName = { ...findDestination };
-      if (destinationByName.hasOwnProperty("#")) delete destinationByName["#"];
       const destinationJson = JSON.stringify(destinationByName, null, 2);
       const blob = new Blob([destinationJson], { type: "application/json" });
       const url = URL.createObjectURL(blob);
diff --git a/web/src/components/alerts/DedupSummaryCards.vue b/web/src/components/alerts/DedupSummaryCards.vue
index ac93864d48..56374d31cc 100644
--- a/web/src/components/alerts/DedupSummaryCards.vue
+++ b/web/src/components/alerts/DedupSummaryCards.vue
@@ -17,21 +17,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div data-test="dedup-summary-cards" class="dedup-summary-cards grid grid-cols-4 gap-4 mb-4">
     <!-- Card 1: Total Alerts -->
-    <OCard data-test="total-alerts-card" class="border border-(--o2-border) transition-all duration-200 hover:shadow-[0_2px_8px_rgba(0,0,0,0.1)]">
+    <OCard data-test="total-alerts-card" class="border border-border-default transition-all duration-200 hover:shadow-[0_2px_8px_rgba(0,0,0,0.1)]">
       <OCardSection class="p-4">
         <div data-test="total-alerts-value" class="text-2xl font-semibold">{{ summary.total_alerts }}</div>
-        <div data-test="total-alerts-label" class="text-sm text-gray-600">Total Alerts</div>
+        <div data-test="total-alerts-label" class="text-sm text-text-secondary">Total Alerts</div>
       </OCardSection>
     </OCard>
 
     <!-- Card 2: Alerts with Dedup -->
-    <OCard data-test="alerts-with-dedup-card" class="border border-(--o2-border) transition-all duration-200 hover:shadow-[0_2px_8px_rgba(0,0,0,0.1)]">
+    <OCard data-test="alerts-with-dedup-card" class="border border-border-default transition-all duration-200 hover:shadow-[0_2px_8px_rgba(0,0,0,0.1)]">
       <OCardSection class="p-4">
         <div class="flex items-center gap-2">
           <div data-test="alerts-with-dedup-value" class="text-2xl font-semibold">{{ summary.alerts_with_dedup }}</div>
           <OIcon data-test="dedup-filter-icon" name="filter-alt" size="sm" />
         </div>
-        <div data-test="alerts-with-dedup-label" class="text-sm text-gray-600 flex items-center gap-1">
+        <div data-test="alerts-with-dedup-label" class="text-sm text-text-secondary flex items-center gap-1">
           Using Deduplication
           <OIcon data-test="dedup-info-icon" name="info-outline" size="xs" class="cursor-pointer" />
             <OTooltip data-test="dedup-info-tooltip" content="Alerts with deduplication configured" />
@@ -42,20 +42,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <!-- Card 3: Suppression Rate -->
     <OCard
       data-test="suppression-rate-card"
-      class="border border-(--o2-border) transition-all duration-200 hover:shadow-[0_2px_8px_rgba(0,0,0,0.1)]"
+      class="border border-border-default transition-all duration-200 hover:shadow-[0_2px_8px_rgba(0,0,0,0.1)]"
       :class="{
-        'bg-green-50': summary.suppression_rate > 0.5,
-        'bg-yellow-50': summary.suppression_rate > 0 && summary.suppression_rate <= 0.5
+        'bg-status-success-bg': summary.suppression_rate > 0.5,
+        'bg-status-warning-bg': summary.suppression_rate > 0 && summary.suppression_rate <= 0.5
       }"
     >
       <OCardSection class="p-4">
         <div data-test="suppression-rate-value" class="text-2xl font-semibold" :class="{
-          'text-green-700': summary.suppression_rate > 0.5,
-          'text-yellow-700': summary.suppression_rate > 0 && summary.suppression_rate <= 0.5
+          'text-status-success-text': summary.suppression_rate > 0.5,
+          'text-status-warning-text': summary.suppression_rate > 0 && summary.suppression_rate <= 0.5
         }">
           {{ formatPercentage(summary.suppression_rate) }}
         </div>
-        <div data-test="suppression-rate-label" class="text-sm text-gray-600 flex items-center gap-1">
+        <div data-test="suppression-rate-label" class="text-sm text-text-secondary flex items-center gap-1">
           Suppression Rate (24h)
           <OIcon data-test="suppression-info-icon" name="info-outline" size="xs" class="cursor-pointer" />
             <OTooltip data-test="suppression-info-tooltip">
@@ -72,13 +72,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </OCard>
 
     <!-- Card 4: Pending Batches -->
-    <OCard data-test="pending-batches-card" class="border border-(--o2-border) transition-all duration-200 hover:shadow-[0_2px_8px_rgba(0,0,0,0.1)]">
+    <OCard data-test="pending-batches-card" class="border border-border-default transition-all duration-200 hover:shadow-[0_2px_8px_rgba(0,0,0,0.1)]">
       <OCardSection class="p-4">
         <div class="flex items-center gap-2">
           <div data-test="pending-batches-value" class="text-2xl font-semibold">{{ summary.pending_batches }}</div>
           <OIcon data-test="pending-batches-icon" name="group-work" size="sm" />
         </div>
-        <div data-test="pending-batches-label" class="text-sm text-gray-600 flex items-center gap-1">
+        <div data-test="pending-batches-label" class="text-sm text-text-secondary flex items-center gap-1">
           Pending Batches
           <OIcon data-test="pending-batches-info-icon" name="info-outline" size="xs" class="cursor-pointer" />
             <OTooltip data-test="pending-batches-info-tooltip" content="Alerts waiting to be grouped together" />
diff --git a/web/src/components/alerts/DeduplicationConfig.spec.ts b/web/src/components/alerts/DeduplicationConfig.spec.ts
deleted file mode 100644
index 2f81e4b9d7..0000000000
--- a/web/src/components/alerts/DeduplicationConfig.spec.ts
+++ /dev/null
@@ -1,204 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { describe, expect, it, vi } from "vitest";
-import { mount, flushPromises } from "@vue/test-utils";
-import i18n from "@/locales";
-import store from "@/test/unit/helpers/store";
-
-
-import DeduplicationConfig from "@/components/alerts/DeduplicationConfig.vue";
-
-const makeModelValue = (overrides: Record<string, any> = {}) => ({
-  enabled: true,
-  fingerprint_fields: [] as string[],
-  time_window_minutes: undefined as number | undefined,
-  ...overrides,
-});
-
-const availableFields = [
-  { label: "Host", value: "host" },
-  { label: "Service", value: "service" },
-  { label: "Level", value: "level" },
-];
-
-async function mountComp(props: Record<string, any> = {}) {
-  return mount(DeduplicationConfig, {
-    props: {
-      modelValue: makeModelValue(),
-      availableFields,
-      ...props,
-    },
-    global: {
-      plugins: [i18n, store],
-      stubs: {
-        AlertsContainer: {
-          template: '<div data-test="alerts-container-stub"><slot /></div>',
-          props: ["name", "isExpanded", "label", "subLabel", "icon", "iconClass"],
-          emits: ["update:is-expanded"],
-        },
-      },
-    },
-  });
-}
-
-describe("DeduplicationConfig - rendering", () => {
-  it("renders the component without errors", async () => {
-    const w = await mountComp();
-    expect(w.exists()).toBe(true);
-  });
-
-  it("isExpanded defaults to true", async () => {
-    const w = await mountComp();
-    expect((w.vm as any).isExpanded).toBe(true);
-  });
-
-  it("renders the expanded content when isExpanded is true", async () => {
-    const w = await mountComp();
-    expect(
-      w.find('[data-test="alerts-deduplication-config"]').exists(),
-    ).toBe(true);
-  });
-});
-
-describe("DeduplicationConfig - localConfig initialization", () => {
-  it("initializes fingerprint_fields from modelValue", async () => {
-    const w = await mountComp({
-      modelValue: makeModelValue({ fingerprint_fields: ["host", "service"] }),
-    });
-    expect((w.vm as any).localConfig.fingerprint_fields).toEqual(["host", "service"]);
-  });
-
-  it("initializes time_window_minutes from modelValue", async () => {
-    const w = await mountComp({
-      modelValue: makeModelValue({ time_window_minutes: 30 }),
-    });
-    expect((w.vm as any).localConfig.time_window_minutes).toBe(30);
-  });
-
-  it("defaults time_window_minutes to undefined when not provided", async () => {
-    const w = await mountComp({
-      modelValue: makeModelValue({ time_window_minutes: undefined }),
-    });
-    expect((w.vm as any).localConfig.time_window_minutes).toBeUndefined();
-  });
-
-  it("always sets enabled to true", async () => {
-    const w = await mountComp({
-      modelValue: makeModelValue({ enabled: false }),
-    });
-    expect((w.vm as any).localConfig.enabled).toBe(true);
-  });
-});
-
-describe("DeduplicationConfig - emitUpdate", () => {
-  it("emits update:modelValue when emitUpdate is called", async () => {
-    const w = await mountComp();
-    (w.vm as any).emitUpdate();
-    expect(w.emitted("update:modelValue")).toBeTruthy();
-  });
-
-  it("emitted payload always has enabled=true", async () => {
-    const w = await mountComp();
-    (w.vm as any).emitUpdate();
-    const payload = (w.emitted("update:modelValue") as any[][])[0][0];
-    expect(payload.enabled).toBe(true);
-  });
-
-  it("emitted payload includes current fingerprint_fields", async () => {
-    const w = await mountComp({
-      modelValue: makeModelValue({ fingerprint_fields: ["host"] }),
-    });
-    (w.vm as any).emitUpdate();
-    const payload = (w.emitted("update:modelValue") as any[][])[0][0];
-    expect(payload.fingerprint_fields).toEqual(["host"]);
-  });
-
-  it("emitted payload includes sanitized time_window_minutes", async () => {
-    const w = await mountComp();
-    (w.vm as any).localConfig.time_window_minutes = 15;
-    (w.vm as any).emitUpdate();
-    const payload = (w.emitted("update:modelValue") as any[][])[0][0];
-    expect(payload.time_window_minutes).toBe(15);
-  });
-
-  it("emitted payload has undefined grouping", async () => {
-    const w = await mountComp();
-    (w.vm as any).emitUpdate();
-    const payload = (w.emitted("update:modelValue") as any[][])[0][0];
-    expect(payload.grouping).toBeUndefined();
-  });
-});
-
-describe("DeduplicationConfig - sanitizeTimeWindow", () => {
-  it("returns undefined for null", async () => {
-    const w = await mountComp();
-    expect((w.vm as any).sanitizeTimeWindow(null)).toBeUndefined();
-  });
-
-  it("returns undefined for empty string", async () => {
-    const w = await mountComp();
-    expect((w.vm as any).sanitizeTimeWindow("")).toBeUndefined();
-  });
-
-  it("returns undefined for NaN string", async () => {
-    const w = await mountComp();
-    expect((w.vm as any).sanitizeTimeWindow("abc")).toBeUndefined();
-  });
-
-  it("returns number for valid string", async () => {
-    const w = await mountComp();
-    expect((w.vm as any).sanitizeTimeWindow("30")).toBe(30);
-  });
-
-  it("returns number for valid number", async () => {
-    const w = await mountComp();
-    expect((w.vm as any).sanitizeTimeWindow(45)).toBe(45);
-  });
-
-  it("returns undefined for NaN number", async () => {
-    const w = await mountComp();
-    expect((w.vm as any).sanitizeTimeWindow(NaN)).toBeUndefined();
-  });
-});
-
-describe("DeduplicationConfig - watcher", () => {
-  it("syncs localConfig fingerprint_fields when modelValue changes", async () => {
-    const w = await mountComp();
-    await w.setProps({
-      modelValue: makeModelValue({ fingerprint_fields: ["level"] }),
-    });
-    await flushPromises();
-    expect((w.vm as any).localConfig.fingerprint_fields).toEqual(["level"]);
-  });
-
-  it("syncs localConfig time_window_minutes when modelValue changes", async () => {
-    const w = await mountComp();
-    await w.setProps({
-      modelValue: makeModelValue({ time_window_minutes: 60 }),
-    });
-    await flushPromises();
-    expect((w.vm as any).localConfig.time_window_minutes).toBe(60);
-  });
-
-  it("keeps enabled true when new modelValue has enabled=false", async () => {
-    const w = await mountComp();
-    await w.setProps({
-      modelValue: makeModelValue({ enabled: false }),
-    });
-    await flushPromises();
-    expect((w.vm as any).localConfig.enabled).toBe(true);
-  });
-});
diff --git a/web/src/components/alerts/DeduplicationConfig.vue b/web/src/components/alerts/DeduplicationConfig.vue
deleted file mode 100644
index 3f05932271..0000000000
--- a/web/src/components/alerts/DeduplicationConfig.vue
+++ /dev/null
@@ -1,205 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <div data-test="alerts-deduplication-config" class="w-full p-0 m-0">
-    <div class="w-full">
-      <div class="w-full">
-        <AlertsContainer
-          :name="t('alerts.deduplication.title')"
-          v-model:is-expanded="isExpanded"
-          :label="t('alerts.deduplication.title')"
-          :subLabel="t('alerts.deduplication.subtitle')"
-          icon="filter-alt"
-          class="w-full w-full pl-4 pr-2 py-2"
-          :iconClass="'mt-[2px]'"
-        />
-      </div>
-
-      <div v-if="isExpanded" class="w-full flex px-4">
-        <OSeparator class="my-2"/>
-        <div class="mt-2 w-full pl-3">
-            <!-- Fingerprint Fields -->
-            <div class="mb-4">
-              <div class="font-semibold pb-2 flex items-center">
-                {{ t("alerts.deduplication.fingerprintFields") }}
-                <OIcon
-                  name="info"
-                  size="sm"
-                  class="ml-1 cursor-pointer"
-                  :class="store.state.theme === 'dark' ? 'text-gray-400' : 'text-gray-400'"
-                 />
-                  <OTooltip
-                    side="right"
-                    align="center"
-                    :max-width="'300px'"
-                    :content="t('alerts.deduplication.fingerprintFieldsTooltip')"
-                  />
-              </div>
-              <div class="text-sm text-gray-600 dark:text-gray-400 mb-2">
-                {{ t("alerts.deduplication.fingerprintFieldsHint") }}
-              </div>
-              <OSelect
-                v-model="localConfig.fingerprint_fields"
-                :options="availableFields"
-                class="showLabelOnTop no-case"
-                :class="store.state.theme === 'dark' ? 'input-box-bg-dark input-border-dark' : 'input-box-bg-light input-border-light'"
-                multiple
-                valueKey="value"
-                labelKey="label"
-                @update:model-value="emitUpdate"
-              >
-                <template v-slot:hint>
-                  <div class="text-xs">
-                    💡 Leave empty to auto-detect based on query (SQL: GROUP BY columns, PromQL: labels, Custom: condition fields)
-                  </div>
-                </template>
-              </OSelect>
-            </div>
-
-            <!-- Time Window -->
-            <div class="mb-4">
-              <div class="font-semibold pb-2 flex items-center">
-                {{ t("alerts.deduplication.timeWindow") }}
-                <OIcon
-                  name="info"
-                  size="sm"
-                  class="ml-1 cursor-pointer"
-                  :class="store.state.theme === 'dark' ? 'text-gray-400' : 'text-gray-400'"
-                 />
-                  <OTooltip
-                    side="right"
-                    align="center"
-                    :max-width="'300px'"
-                    :content="t('alerts.deduplication.timeWindowTooltip')"
-                  />
-              </div>
-              <div class="text-sm text-gray-600 dark:text-gray-400 mb-2">
-                {{ t("alerts.deduplication.timeWindowHint") }}
-              </div>
-              <OInput
-                v-model.number="localConfig.time_window_minutes"
-                type="number"
-                min="1"
-                suffix="minutes"
-                :placeholder="t('alerts.placeholders.autoUsesCheckInterval')"
-                :class="store.state.theme === 'dark' ? 'input-box-bg-dark input-border-dark' : 'input-box-bg-light input-border-light'"
-                @update:model-value="emitUpdate"
-              />
-            </div>
-
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch } from "vue";
-import { useStore } from "vuex";
-import { useI18n } from "vue-i18n";
-import AlertsContainer from "./AlertsContainer.vue";
-import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
-import OInput from "@/lib/forms/Input/OInput.vue";
-import OSelect from "@/lib/forms/Select/OSelect.vue";
-import OIcon from "@/lib/core/Icon/OIcon.vue";
-import OSeparator from '@/lib/core/Separator/OSeparator.vue';
-
-const { t } = useI18n();
-
-interface DeduplicationConfig {
-  enabled: boolean;
-  fingerprint_fields: string[];
-  time_window_minutes?: number;
-  grouping?: {
-    enabled: boolean;
-    max_group_size: number;
-    send_strategy: "first_with_count" | "summary" | "all";
-    group_wait_seconds: number;
-  };
-}
-
-interface FieldOption {
-  label: string;
-  value: string;
-  type?: string;
-}
-
-interface Props {
-  modelValue?: DeduplicationConfig;
-  availableFields?: (string | FieldOption)[];
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: () => ({
-    enabled: true, // Always enabled by default
-    fingerprint_fields: [],
-    time_window_minutes: undefined,
-    grouping: undefined,
-  }),
-  availableFields: () => [],
-});
-
-const emit = defineEmits<{
-  (e: "update:modelValue", value: DeduplicationConfig): void;
-}>();
-
-const store = useStore();
-
-// Auto-expand if there's existing config
-const isExpanded = ref(true);
-
-// Local config state - deduplication is always enabled by default
-const localConfig = ref<DeduplicationConfig>({
-  enabled: true, // Always enabled
-  fingerprint_fields: props.modelValue?.fingerprint_fields ?? [],
-  time_window_minutes: props.modelValue?.time_window_minutes ?? undefined,
-  grouping: undefined, // Grouping removed
-});
-
-const sanitizeTimeWindow = (val: any): number | undefined => {
-  if (val == null || val === "") return undefined;
-  const num = Number(val);
-  return isNaN(num) ? undefined : num;
-};
-
-const emitUpdate = () => {
-  // Always emit as enabled
-  emit("update:modelValue", {
-    enabled: true,
-    fingerprint_fields: localConfig.value.fingerprint_fields,
-    time_window_minutes: sanitizeTimeWindow(localConfig.value.time_window_minutes),
-    grouping: undefined,
-  });
-};
-
-// Watch for external changes
-watch(
-  () => props.modelValue,
-  (newVal) => {
-    if (newVal) {
-      localConfig.value = {
-        enabled: true, // Always enabled
-        fingerprint_fields: newVal.fingerprint_fields ?? [],
-        time_window_minutes: newVal.time_window_minutes ?? undefined,
-        grouping: undefined, // Grouping removed
-      };
-    }
-  },
-  { deep: true, immediate: true }
-);
-</script>
-
diff --git a/web/src/components/alerts/DestinationPreview.vue b/web/src/components/alerts/DestinationPreview.vue
index e02aeb646c..45b46e9119 100644
--- a/web/src/components/alerts/DestinationPreview.vue
+++ b/web/src/components/alerts/DestinationPreview.vue
@@ -23,37 +23,37 @@ limitations under the License.
 
     <div data-test="destination-preview-card" class="w-full">
         <!-- Slack Preview -->
-        <div v-if="type === 'slack'" data-test="slack-preview" class="slack-message max-w-[600px] mx-auto bg-white border border-(--o2-border) rounded-lg p-4 shadow-[0_2px_8px_rgba(0,0,0,0.1)]">
+        <div v-if="type === 'slack'" data-test="slack-preview" class="slack-message max-w-150 mx-auto bg-white border border-border-default rounded-default p-4 shadow-[0_2px_8px_rgba(0,0,0,0.1)]">
           <div class="slack-message-container flex gap-3">
             <div class="slack-avatar">
-              <div class="avatar-circle w-[36px] h-[36px] bg-[#4a154b] text-white rounded flex items-center justify-center font-bold text-[0.875rem]">OO</div>
+              <div class="avatar-circle w-9 h-9 bg-[var(--color-brand-slack-aubergine)] text-white rounded-default flex items-center justify-center font-bold text-sm">OO</div>
             </div>
             <div class="slack-content flex-1">
               <div class="slack-header flex items-center gap-2 mb-2">
-                <strong data-test="slack-bot-name" class="bot-name text-[#1264a3] text-[0.9rem]">OpenObserve Bot</strong>
-                <span class="slack-timestamp text-[#616061] text-xs">{{ getCurrentTime() }}</span>
+                <strong data-test="slack-bot-name" class="bot-name text-[var(--color-brand-slack-link)] text-sm">OpenObserve Bot</strong>
+                <span class="slack-timestamp text-[var(--color-brand-slack-meta)] text-xs">{{ getCurrentTime() }}</span>
               </div>
               <div data-test="slack-message-body" class="slack-body">
-                <div class="slack-block-header text-lg font-bold mb-3 text-[#1d1c1d]">🚨 High CPU Usage</div>
+                <div class="slack-block-header text-lg font-bold mb-3 text-[var(--color-brand-slack-text)]">🚨 High CPU Usage</div>
                 <div class="slack-fields grid grid-cols-2 gap-2 mb-3">
                   <div class="slack-field">
-                    <div class="field-label font-bold text-[#1d1c1d] text-[0.875rem]">Stream:</div>
-                    <div class="field-value text-[#616061] text-[0.875rem]">system-metrics</div>
+                    <div class="field-label font-bold text-[var(--color-brand-slack-text)] text-sm">Stream:</div>
+                    <div class="field-value text-[var(--color-brand-slack-meta)] text-sm">system-metrics</div>
                   </div>
                   <div class="slack-field">
-                    <div class="field-label font-bold text-[#1d1c1d] text-[0.875rem]">Type:</div>
-                    <div class="field-value text-[#616061] text-[0.875rem]">metrics</div>
+                    <div class="field-label font-bold text-[var(--color-brand-slack-text)] text-sm">Type:</div>
+                    <div class="field-value text-[var(--color-brand-slack-meta)] text-sm">metrics</div>
                   </div>
                   <div class="slack-field">
-                    <div class="field-label font-bold text-[#1d1c1d] text-[0.875rem]">Status:</div>
-                    <div class="field-value text-[#616061] text-[0.875rem]">🔴 Firing</div>
+                    <div class="field-label font-bold text-[var(--color-brand-slack-text)] text-sm">Status:</div>
+                    <div class="field-value text-[var(--color-brand-slack-meta)] text-sm">🔴 Firing</div>
                   </div>
                   <div class="slack-field">
-                    <div class="field-label font-bold text-[#1d1c1d] text-[0.875rem]">Count:</div>
-                    <div class="field-value text-[#616061] text-[0.875rem]">15</div>
+                    <div class="field-label font-bold text-[var(--color-brand-slack-text)] text-sm">Count:</div>
+                    <div class="field-value text-[var(--color-brand-slack-meta)] text-sm">15</div>
                   </div>
                 </div>
-                <div class="slack-threshold mb-3 text-[#1d1c1d] text-sm">
+                <div class="slack-threshold mb-3 text-[var(--color-brand-slack-text)] text-sm">
                   <strong>Threshold Exceeded:</strong> greater than 80%
                 </div>
                 <div class="slack-actions flex justify-center mt-4">
@@ -65,36 +65,36 @@ limitations under the License.
         </div>
 
         <!-- MS Teams Preview -->
-        <div v-if="type === 'msteams'" data-test="msteams-preview" class="teams-card max-w-[600px] mx-auto bg-white border border-[#e1e5e9] rounded-lg overflow-hidden shadow-[0_2px_8px_rgba(0,0,0,0.1)]">
+        <div v-if="type === 'msteams'" data-test="msteams-preview" class="teams-card max-w-150 mx-auto bg-white border border-[var(--color-brand-msg-border-2)] rounded-default overflow-hidden shadow-[0_2px_8px_rgba(0,0,0,0.1)]">
           <div data-test="msteams-card-content" class="teams-card-content">
-            <div class="teams-header bg-[#464775] text-white p-4">
-              <div class="teams-title text-[1.125rem] font-bold mb-1">🚨 Alert: High CPU Usage</div>
-              <div class="teams-subtitle text-[0.875rem] opacity-90">OpenObserve Alert Notification</div>
+            <div class="teams-header bg-brand-teams-hover text-white p-4">
+              <div class="teams-title text-lg font-bold mb-1">🚨 Alert: High CPU Usage</div>
+              <div class="teams-subtitle text-sm opacity-90">OpenObserve Alert Notification</div>
             </div>
             <div class="teams-facts p-4 grid gap-2">
-              <div class="teams-fact flex justify-between py-1 border-b border-[#f3f2f1]">
-                <div class="fact-name font-bold text-[#323130]">Stream</div>
-                <div class="fact-value text-[#605e5c]">system-metrics</div>
+              <div class="teams-fact flex justify-between py-1 border-b border-[var(--color-brand-teams-bg)]">
+                <div class="fact-name font-bold text-[var(--color-brand-teams-ink)]">Stream</div>
+                <div class="fact-value text-[var(--color-brand-teams-text)]">system-metrics</div>
               </div>
-              <div class="teams-fact flex justify-between py-1 border-b border-[#f3f2f1]">
-                <div class="fact-name font-bold text-[#323130]">Type</div>
-                <div class="fact-value text-[#605e5c]">metrics</div>
+              <div class="teams-fact flex justify-between py-1 border-b border-[var(--color-brand-teams-bg)]">
+                <div class="fact-name font-bold text-[var(--color-brand-teams-ink)]">Type</div>
+                <div class="fact-value text-[var(--color-brand-teams-text)]">metrics</div>
               </div>
-              <div class="teams-fact flex justify-between py-1 border-b border-[#f3f2f1]">
-                <div class="fact-name font-bold text-[#323130]">Status</div>
-                <div class="fact-value text-[#605e5c]">🔴 Firing</div>
+              <div class="teams-fact flex justify-between py-1 border-b border-[var(--color-brand-teams-bg)]">
+                <div class="fact-name font-bold text-[var(--color-brand-teams-ink)]">Status</div>
+                <div class="fact-value text-[var(--color-brand-teams-text)]">🔴 Firing</div>
               </div>
-              <div class="teams-fact flex justify-between py-1 border-b border-[#f3f2f1]">
-                <div class="fact-name font-bold text-[#323130]">Count</div>
-                <div class="fact-value text-[#605e5c]">15</div>
+              <div class="teams-fact flex justify-between py-1 border-b border-[var(--color-brand-teams-bg)]">
+                <div class="fact-name font-bold text-[var(--color-brand-teams-ink)]">Count</div>
+                <div class="fact-value text-[var(--color-brand-teams-text)]">15</div>
               </div>
-              <div class="teams-fact flex justify-between py-1 border-b border-[#f3f2f1]">
-                <div class="fact-name font-bold text-[#323130]">Threshold</div>
-                <div class="fact-value text-[#605e5c]">greater than 80%</div>
+              <div class="teams-fact flex justify-between py-1 border-b border-[var(--color-brand-teams-bg)]">
+                <div class="fact-name font-bold text-[var(--color-brand-teams-ink)]">Threshold</div>
+                <div class="fact-value text-[var(--color-brand-teams-text)]">greater than 80%</div>
               </div>
-              <div class="teams-fact flex justify-between py-1 border-b border-[#f3f2f1]">
-                <div class="fact-name font-bold text-[#323130]">Time</div>
-                <div class="fact-value text-[#605e5c]">{{ getCurrentTime() }}</div>
+              <div class="teams-fact flex justify-between py-1 border-b border-[var(--color-brand-teams-bg)]">
+                <div class="fact-name font-bold text-[var(--color-brand-teams-ink)]">Time</div>
+                <div class="fact-value text-[var(--color-brand-teams-text)]">{{ getCurrentTime() }}</div>
               </div>
             </div>
             <div class="teams-actions flex justify-center p-4">
@@ -104,49 +104,49 @@ limitations under the License.
         </div>
 
         <!-- Email Preview -->
-        <div v-if="type === 'email'" data-test="email-preview" class="email-client max-w-[600px] mx-auto bg-white border border-[#ddd] rounded-lg overflow-hidden shadow-[0_2px_8px_rgba(0,0,0,0.1)]">
-          <div class="email-header bg-[#f8f9fa] p-4 border-b border-[#e9ecef]">
+        <div v-if="type === 'email'" data-test="email-preview" class="email-client max-w-150 mx-auto bg-white border border-[var(--color-brand-msg-divider)] rounded-default overflow-hidden shadow-[0_2px_8px_rgba(0,0,0,0.1)]">
+          <div class="email-header bg-[var(--color-brand-msg-bg)] p-4 border-b border-[var(--color-brand-msg-border)]">
             <div data-test="email-subject" class="email-subject font-bold text-base mb-2">
               Subject: 🚨 OpenObserve Alert Notification
             </div>
-            <div data-test="email-from" class="email-from text-[#6c757d] text-[0.875rem] mb-1">
+            <div data-test="email-from" class="email-from text-[var(--color-brand-msg-meta)] text-sm mb-1">
               From: alerts@openobserve.ai
             </div>
-            <div class="email-to text-[#6c757d] text-[0.875rem] mb-1">To: admin@example.com</div>
-            <div class="email-time text-[#6c757d] text-[0.875rem] mb-1">{{ getCurrentTime() }}</div>
+            <div class="email-to text-[var(--color-brand-msg-meta)] text-sm mb-1">To: admin@example.com</div>
+            <div class="email-time text-[var(--color-brand-msg-meta)] text-sm mb-1">{{ getCurrentTime() }}</div>
           </div>
           <div data-test="email-body" class="email-body p-6">
             <div class="email-alert-header">
-              <div class="text-[#d63638] text-center mb-4 text-[1.5rem] font-bold">🚨 Alert Notification</div>
+              <div class="text-[var(--color-brand-msg-error)] text-center mb-4 text-2xl font-bold">🚨 Alert Notification</div>
             </div>
-            <div class="email-alert-info bg-[#f8f9fa] border-l-4 border-[#d63638] p-4 my-4">
-              <div class="text-[#d63638] m-0 mb-2 text-[1.125rem] font-bold">High CPU Usage</div>
-              <p class="m-0 text-[#6c757d]">An alert has been triggered in your OpenObserve monitoring system.</p>
+            <div class="email-alert-info bg-[var(--color-brand-msg-bg)] border-l-4 border-[var(--color-brand-msg-error)] p-4 my-4">
+              <div class="text-[var(--color-brand-msg-error)] m-0 mb-2 text-lg font-bold">High CPU Usage</div>
+              <p class="m-0 text-[var(--color-brand-msg-meta)]">An alert has been triggered in your OpenObserve monitoring system.</p>
             </div>
             <div class="email-details my-4">
-              <div class="email-detail-row flex justify-between py-2 border-b border-[#e9ecef]">
-                <span class="detail-label font-bold text-[#495057]">Stream:</span>
-                <span class="detail-value text-[#6c757d]">system-metrics</span>
+              <div class="email-detail-row flex justify-between py-2 border-b border-[var(--color-brand-msg-border)]">
+                <span class="detail-label font-bold text-[var(--color-brand-msg-text-strong)]">Stream:</span>
+                <span class="detail-value text-[var(--color-brand-msg-meta)]">system-metrics</span>
               </div>
-              <div class="email-detail-row flex justify-between py-2 border-b border-[#e9ecef]">
-                <span class="detail-label font-bold text-[#495057]">Type:</span>
-                <span class="detail-value text-[#6c757d]">metrics</span>
+              <div class="email-detail-row flex justify-between py-2 border-b border-[var(--color-brand-msg-border)]">
+                <span class="detail-label font-bold text-[var(--color-brand-msg-text-strong)]">Type:</span>
+                <span class="detail-value text-[var(--color-brand-msg-meta)]">metrics</span>
               </div>
-              <div class="email-detail-row flex justify-between py-2 border-b border-[#e9ecef]">
-                <span class="detail-label font-bold text-[#495057]">Status:</span>
-                <span class="detail-value text-[#6c757d]">🔴 Firing</span>
+              <div class="email-detail-row flex justify-between py-2 border-b border-[var(--color-brand-msg-border)]">
+                <span class="detail-label font-bold text-[var(--color-brand-msg-text-strong)]">Status:</span>
+                <span class="detail-value text-[var(--color-brand-msg-meta)]">🔴 Firing</span>
               </div>
-              <div class="email-detail-row flex justify-between py-2 border-b border-[#e9ecef]">
-                <span class="detail-label font-bold text-[#495057]">Count:</span>
-                <span class="detail-value text-[#6c757d]">15</span>
+              <div class="email-detail-row flex justify-between py-2 border-b border-[var(--color-brand-msg-border)]">
+                <span class="detail-label font-bold text-[var(--color-brand-msg-text-strong)]">Count:</span>
+                <span class="detail-value text-[var(--color-brand-msg-meta)]">15</span>
               </div>
-              <div class="email-detail-row flex justify-between py-2 border-b border-[#e9ecef]">
-                <span class="detail-label font-bold text-[#495057]">Threshold:</span>
-                <span class="detail-value text-[#6c757d]">greater than 80%</span>
+              <div class="email-detail-row flex justify-between py-2 border-b border-[var(--color-brand-msg-border)]">
+                <span class="detail-label font-bold text-[var(--color-brand-msg-text-strong)]">Threshold:</span>
+                <span class="detail-value text-[var(--color-brand-msg-meta)]">greater than 80%</span>
               </div>
-              <div class="email-detail-row flex justify-between py-2 border-b border-[#e9ecef]">
-                <span class="detail-label font-bold text-[#495057]">Time:</span>
-                <span class="detail-value text-[#6c757d]">{{ getCurrentTime() }}</span>
+              <div class="email-detail-row flex justify-between py-2 border-b border-[var(--color-brand-msg-border)]">
+                <span class="detail-label font-bold text-[var(--color-brand-msg-text-strong)]">Time:</span>
+                <span class="detail-value text-[var(--color-brand-msg-meta)]">{{ getCurrentTime() }}</span>
               </div>
             </div>
             <OButton variant="preview-email">View in OpenObserve</OButton>
@@ -154,53 +154,53 @@ limitations under the License.
         </div>
 
         <!-- PagerDuty Preview -->
-        <div v-if="type === 'pagerduty'" data-test="pagerduty-preview" class="pagerduty-incident max-w-[600px] mx-auto bg-white border border-[#ddd] rounded-lg overflow-hidden shadow-[0_2px_8px_rgba(0,0,0,0.1)]">
-          <div class="pagerduty-header bg-[#06ac38] text-white p-4 flex justify-between items-center">
-            <div class="pagerduty-title font-bold text-[1.125rem]">PagerDuty Incident</div>
-            <div class="pagerduty-status bg-[#d13212] py-1 px-2 rounded text-xs font-bold">Triggered</div>
+        <div v-if="type === 'pagerduty'" data-test="pagerduty-preview" class="pagerduty-incident max-w-150 mx-auto bg-white border border-[var(--color-brand-msg-divider)] rounded-default overflow-hidden shadow-[0_2px_8px_rgba(0,0,0,0.1)]">
+          <div class="pagerduty-header bg-[var(--color-brand-slack-green)] text-white p-4 flex justify-between items-center">
+            <div class="pagerduty-title font-bold text-lg">PagerDuty Incident</div>
+            <div class="pagerduty-status bg-[var(--color-brand-email-accent)] py-1 px-2 rounded-default text-xs font-bold">Triggered</div>
           </div>
           <div class="pagerduty-content p-6">
-            <div class="m-0 mb-4 text-[#2d3748] font-bold text-[1.17rem]">OpenObserve Alert: High CPU Usage</div>
+            <div class="m-0 mb-4 text-[var(--color-brand-msg-text-dark)] font-bold text-lg">OpenObserve Alert: High CPU Usage</div>
             <div class="pagerduty-details">
-              <div class="pagerduty-field mb-2 text-[#4a5568]">
+              <div class="pagerduty-field mb-2 text-[var(--color-brand-msg-text)]">
                 <strong>Source:</strong> openobserve
               </div>
-              <div class="pagerduty-field mb-2 text-[#4a5568]">
+              <div class="pagerduty-field mb-2 text-[var(--color-brand-msg-text)]">
                 <strong>Severity:</strong> error
               </div>
-              <div class="pagerduty-field mb-2 text-[#4a5568]">
+              <div class="pagerduty-field mb-2 text-[var(--color-brand-msg-text)]">
                 <strong>Component:</strong> system-metrics
               </div>
-              <div class="pagerduty-field mb-2 text-[#4a5568]">
+              <div class="pagerduty-field mb-2 text-[var(--color-brand-msg-text)]">
                 <strong>Time:</strong> {{ getCurrentTime() }}
               </div>
             </div>
             <div class="pagerduty-link text-center mt-4">
-              <a href="#" class="text-[#06ac38] no-underline font-bold">View in OpenObserve</a>
+              <a href="#" class="text-[var(--color-brand-slack-green)] no-underline font-bold">View in OpenObserve</a>
             </div>
           </div>
         </div>
 
         <!-- ServiceNow Preview -->
-        <div v-if="type === 'servicenow'" data-test="servicenow-preview" class="servicenow-incident max-w-[600px] mx-auto bg-white border border-[#ddd] rounded-lg overflow-hidden shadow-[0_2px_8px_rgba(0,0,0,0.1)]">
-          <div class="servicenow-header bg-[#81b5a1] text-white p-4 flex justify-between items-center">
-            <div class="servicenow-title font-bold text-[1.125rem]">ServiceNow Incident</div>
-            <div class="servicenow-number [font-family:monospace] font-bold">INC0000123</div>
+        <div v-if="type === 'servicenow'" data-test="servicenow-preview" class="servicenow-incident max-w-150 mx-auto bg-white border border-[var(--color-brand-msg-divider)] rounded-default overflow-hidden shadow-[0_2px_8px_rgba(0,0,0,0.1)]">
+          <div class="servicenow-header bg-[var(--color-brand-slack-avatar)] text-white p-4 flex justify-between items-center">
+            <div class="servicenow-title font-bold text-lg">ServiceNow Incident</div>
+            <div class="servicenow-number font-mono font-bold">INC0000123</div>
           </div>
           <div class="servicenow-content p-6">
-            <div class="servicenow-field mb-3 text-[#4a5568]">
+            <div class="servicenow-field mb-3 text-[var(--color-brand-msg-text)]">
               <strong>Short Description:</strong> OpenObserve Alert: High CPU Usage
             </div>
-            <div class="servicenow-field mb-3 text-[#4a5568]">
+            <div class="servicenow-field mb-3 text-[var(--color-brand-msg-text)]">
               <strong>Category:</strong> Software
             </div>
-            <div class="servicenow-field mb-3 text-[#4a5568]">
+            <div class="servicenow-field mb-3 text-[var(--color-brand-msg-text)]">
               <strong>Priority:</strong> 2 - High
             </div>
-            <div class="servicenow-field mb-3 text-[#4a5568]">
+            <div class="servicenow-field mb-3 text-[var(--color-brand-msg-text)]">
               <strong>State:</strong> New
             </div>
-            <div class="servicenow-description bg-[#f8f9fa] p-4 rounded text-[#4a5568] [white-space:pre-line] mt-4">
+            <div class="servicenow-description bg-[var(--color-brand-msg-bg)] p-4 rounded-default text-[var(--color-brand-msg-text)] [white-space:pre-line] mt-4">
               <strong>Description:</strong><br>
               Alert Details:<br><br>
               Stream: system-metrics<br>
@@ -214,24 +214,24 @@ limitations under the License.
         </div>
 
         <!-- Opsgenie Preview -->
-        <div v-if="type === 'opsgenie'" data-test="opsgenie-preview" class="opsgenie-alert max-w-[600px] mx-auto bg-white border border-[#ddd] rounded-lg overflow-hidden shadow-[0_2px_8px_rgba(0,0,0,0.1)]">
-          <div class="opsgenie-header bg-[#172b4d] text-white p-4 flex justify-between items-center">
-            <div class="opsgenie-title font-bold text-[1.125rem]">Opsgenie Alert</div>
-            <div class="opsgenie-priority bg-[#ffab00] text-[#172b4d] py-1 px-2 rounded font-bold">P3</div>
+        <div v-if="type === 'opsgenie'" data-test="opsgenie-preview" class="opsgenie-alert max-w-150 mx-auto bg-white border border-[var(--color-brand-msg-divider)] rounded-default overflow-hidden shadow-[0_2px_8px_rgba(0,0,0,0.1)]">
+          <div class="opsgenie-header bg-[var(--color-brand-email-ink)] text-white p-4 flex justify-between items-center">
+            <div class="opsgenie-title font-bold text-lg">Opsgenie Alert</div>
+            <div class="opsgenie-priority bg-[var(--color-brand-email-warning)] text-[var(--color-brand-email-ink)] py-1 px-2 rounded-default font-bold">P3</div>
           </div>
           <div class="opsgenie-content p-6">
-            <div class="m-0 mb-4 text-[#2d3748] font-bold text-[1.17rem]">OpenObserve Alert: High CPU Usage</div>
+            <div class="m-0 mb-4 text-[var(--color-brand-msg-text-dark)] font-bold text-lg">OpenObserve Alert: High CPU Usage</div>
             <div class="opsgenie-details">
-              <div class="opsgenie-field mb-2 text-[#4a5568]">
+              <div class="opsgenie-field mb-2 text-[var(--color-brand-msg-text)]">
                 <strong>Source:</strong> OpenObserve
               </div>
-              <div class="opsgenie-field mb-2 text-[#4a5568]">
+              <div class="opsgenie-field mb-2 text-[var(--color-brand-msg-text)]">
                 <strong>Entity:</strong> system-metrics
               </div>
-              <div class="opsgenie-field mb-2 text-[#4a5568]">
+              <div class="opsgenie-field mb-2 text-[var(--color-brand-msg-text)]">
                 <strong>Tags:</strong> openobserve, metrics, system-metrics
               </div>
-              <div class="opsgenie-field mb-2 text-[#4a5568]">
+              <div class="opsgenie-field mb-2 text-[var(--color-brand-msg-text)]">
                 <strong>Time:</strong> {{ getCurrentTime() }}
               </div>
             </div>
@@ -323,32 +323,33 @@ const copyTemplate = () => {
 };
 </script>
 
-<style>
-/* The global `a { color: var(--o2-text-link) }` rule (unlayered) outranks the
-   inline `text-[#06ac38]` utility, turning this link the theme link color.
+<style scoped>
+/* keep(brand): pixel-accurate Slack/Teams/Email replicas, colors are external brands (D12) */
+/* The global `a { color: var(--color-text-link) }` rule (unlayered) outranks the
+   inline `text-[var(--color-brand-slack-green)]` utility, turning this link the theme link color.
    This selector's specificity wins it back to PagerDuty green, like main. */
 .pagerduty-link a {
-  color: #06ac38;
+  color: var(--color-brand-slack-green);
   text-decoration: none;
 }
 
-/* Same issue as the link above: the global `p { color: var(--o2-text-body) }`
+/* Same issue as the link above: the global `p { color: var(--color-text-body) }`
    rule (light text in dark mode) overrides the inline utility, making this
    message unreadable on the email card's fixed light background. */
 .email-alert-info p {
-  color: #6c757d;
+  color: var(--color-brand-msg-meta);
 }
 
 .opsgenie-content .opsgenie-actions button {
-  background: #172b4d;
+  background: var(--color-brand-email-ink);
   color: white;
   border: none;
   padding: 0.5rem 1rem;
-  border-radius: 4px;
+  border-radius: 0.25rem;
   cursor: pointer;
 }
 
 .opsgenie-content .opsgenie-actions button:hover {
-  background: #0f1c2e;
+  background: var(--color-brand-email-ink-deep);
 }
 </style>
diff --git a/web/src/components/alerts/DestinationTestResult.vue b/web/src/components/alerts/DestinationTestResult.vue
index 719d58f4fc..6489542722 100644
--- a/web/src/components/alerts/DestinationTestResult.vue
+++ b/web/src/components/alerts/DestinationTestResult.vue
@@ -18,21 +18,21 @@ limitations under the License. -->
     <div
       v-if="result && result.success"
       data-test="test-result-success"
-      class="flex gap-3 py-3 px-4 rounded border-l-[3px] border-solid border-(--q-positive) bg-[rgba(76,175,80,0.08)] dark:bg-[rgba(76,175,80,0.12)]"
+      class="flex gap-3 py-3 px-4 rounded-default border-l-[3px] border-solid border-status-positive bg-[rgba(76,175,80,0.08)] dark:bg-[rgba(76,175,80,0.12)]"
     >
-      <div class="shrink-0 pt-[2px] text-(--q-positive)">
+      <div class="shrink-0 pt-0.5 text-status-positive">
         <OIcon name="check-circle" size="md" />
       </div>
       <div class="flex-1 min-w-0">
-        <div data-test="test-success-message" class="text-[13px] font-medium leading-[1.4] mb-1">
+        <div data-test="test-success-message" class="text-compact font-medium leading-[1.4] mb-1">
           {{ t('alerts.testSuccessMessage') }}
         </div>
-        <div data-test="test-success-timestamp" class="text-[11px] text-(--q-text-secondary) flex items-center gap-2 flex-wrap">
+        <div data-test="test-success-timestamp" class="text-2xs text-text-secondary flex items-center gap-2 flex-wrap">
           {{ formatTimestamp(result.timestamp) }}
           <OTag v-if="result.statusCode" type="httpStatus" :value="httpStatusBucket(result.statusCode)">
             {{ result.statusCode }}
           </OTag>
-          <span v-if="result.responseTime" class="font-['Monaco','Consolas','Courier_New',monospace] text-(--q-text-secondary)">
+          <span v-if="result.responseTime" class="font-mono text-text-secondary">
             {{ result.responseTime }}ms
           </span>
         </div>
@@ -43,27 +43,27 @@ limitations under the License. -->
     <div
       v-else-if="result && !result.success"
       data-test="test-result-failure"
-      class="flex gap-3 py-3 px-4 rounded border-l-[3px] border-solid border-(--q-negative) bg-[rgba(244,67,54,0.08)] dark:bg-[rgba(244,67,54,0.12)]"
+      class="flex gap-3 py-3 px-4 rounded-default border-l-[3px] border-solid border-status-negative bg-[rgba(244,67,54,0.08)] dark:bg-[rgba(244,67,54,0.12)]"
     >
-      <div class="shrink-0 pt-[2px] text-(--q-negative)">
+      <div class="shrink-0 pt-0.5 text-status-negative">
         <OIcon name="error" size="md" />
       </div>
       <div class="flex-1 min-w-0">
-        <div data-test="test-failure-message" class="text-[13px] font-medium leading-[1.4] mb-1">
+        <div data-test="test-failure-message" class="text-compact font-medium leading-[1.4] mb-1">
           {{ getFailureMessage(result) }}
         </div>
-        <div v-if="result.timestamp" data-test="test-failure-timestamp" class="text-[11px] text-(--q-text-secondary) flex items-center gap-2 flex-wrap">
+        <div v-if="result.timestamp" data-test="test-failure-timestamp" class="text-2xs text-text-secondary flex items-center gap-2 flex-wrap">
           {{ formatTimestamp(result.timestamp) }}
           <OTag v-if="result.statusCode" type="httpStatus" :value="httpStatusBucket(result.statusCode)">
             {{ result.statusCode }}
           </OTag>
-          <span v-if="result.responseTime" class="font-['Monaco','Consolas','Courier_New',monospace] text-(--q-text-secondary)">
+          <span v-if="result.responseTime" class="font-mono text-text-secondary">
             {{ result.responseTime }}ms
           </span>
         </div>
 
         <!-- Suggested Fix -->
-        <div v-if="getSuggestedFix(result)" class="result-suggestion flex items-start gap-2 mt-2 p-2 bg-[rgba(255,193,7,0.1)] dark:bg-[rgba(255,193,7,0.15)] rounded-[3px] text-[11px] text-(--q-text) leading-[1.4]">
+        <div v-if="getSuggestedFix(result)" class="result-suggestion flex items-start gap-2 mt-2 p-2 bg-[rgba(255,193,7,0.1)] dark:bg-[rgba(255,193,7,0.15)] rounded-default text-2xs text-text-secondary leading-[1.4]">
           <OIcon name="lightbulb" size="sm" />
           <span>{{ getSuggestedFix(result) }}</span>
         </div>
@@ -76,7 +76,7 @@ limitations under the License. -->
           class="mt-2 bg-transparent"
         >
           <template #trigger>
-            <div class="flex items-center text-(--q-text-secondary) text-[11px]">
+            <div class="flex items-center text-text-secondary text-2xs">
               <OIcon name="info" size="xs" class="mr-1" />
               <span class="text-xs">{{ t('alerts.viewDetails') }}</span>
             </div>
@@ -84,18 +84,18 @@ limitations under the License. -->
 
           <div data-test="test-failure-details" class="pt-2">
             <div v-if="result.error" data-test="test-error-message" class="error-item mb-3">
-              <div class="text-[10px] font-semibold uppercase tracking-[0.5px] text-(--q-text-secondary) mb-1">{{ t('alerts.error') }}</div>
-              <div class="text-[11px] text-(--q-text) leading-[1.5] break-words">{{ result.error }}</div>
+              <div class="text-3xs font-semibold uppercase tracking-[0.5px] text-text-secondary mb-1">{{ t('alerts.error') }}</div>
+              <div class="text-2xs text-text-body leading-[1.5] break-words">{{ result.error }}</div>
             </div>
 
             <div v-if="result.statusCode" data-test="test-http-status" class="error-item mb-3">
-              <div class="text-[10px] font-semibold uppercase tracking-[0.5px] text-(--q-text-secondary) mb-1">{{ t('alerts.httpStatus') }}</div>
-              <div class="text-[11px] text-(--q-text) leading-[1.5] break-words">{{ result.statusCode }} {{ getStatusText(result.statusCode) }}</div>
+              <div class="text-3xs font-semibold uppercase tracking-[0.5px] text-text-secondary mb-1">{{ t('alerts.httpStatus') }}</div>
+              <div class="text-2xs text-text-body leading-[1.5] break-words">{{ result.statusCode }} {{ getStatusText(result.statusCode) }}</div>
             </div>
 
             <div v-if="result.responseBody" data-test="test-response-body" class="error-item mb-3">
-              <div class="text-[10px] font-semibold uppercase tracking-[0.5px] text-(--q-text-secondary) mb-1">{{ t('alerts.responseBody') }}</div>
-              <pre class="bg-[rgba(0,0,0,0.05)] dark:bg-[rgba(255,255,255,0.05)] border border-[rgba(0,0,0,0.1)] dark:border-[rgba(255,255,255,0.1)] rounded-[3px] p-2 font-['Monaco','Consolas','Courier_New',monospace] text-[10px] leading-[1.5] max-h-[150px] overflow-y-auto m-0 whitespace-pre text-(--q-text)">{{ formatResponseBody(result.responseBody) }}</pre>
+              <div class="text-3xs font-semibold uppercase tracking-[0.5px] text-text-secondary mb-1">{{ t('alerts.responseBody') }}</div>
+              <pre class="bg-[rgba(0,0,0,0.05)] dark:bg-[rgba(255,255,255,0.05)] border border-[rgba(0,0,0,0.1)] dark:border-[rgba(255,255,255,0.1)] rounded-default p-2 font-mono text-3xs leading-[1.5] max-h-37.5 overflow-y-auto m-0 whitespace-pre text-text-body">{{ formatResponseBody(result.responseBody) }}</pre>
             </div>
           </div>
         </OCollapsible>
@@ -119,16 +119,16 @@ limitations under the License. -->
     <div
       v-else-if="isLoading"
       data-test="test-result-loading"
-      class="flex gap-3 py-3 px-4 rounded border-l-[3px] border-solid border-(--q-primary) bg-[rgba(33,150,243,0.08)] dark:bg-[rgba(33,150,243,0.12)]"
+      class="flex gap-3 py-3 px-4 rounded-default border-l-[3px] border-solid border-theme-accent bg-[rgba(33,150,243,0.08)] dark:bg-[rgba(33,150,243,0.12)]"
     >
-      <div class="shrink-0 pt-[2px] text-(--q-primary)">
+      <div class="shrink-0 pt-0.5 text-theme-accent">
         <OSpinner size="xs" />
       </div>
       <div class="flex-1 min-w-0">
-        <div class="text-[13px] font-medium leading-[1.4] mb-1">
+        <div class="text-compact font-medium leading-[1.4] mb-1">
           {{ t('alerts.testInProgress') }}
         </div>
-        <div class="text-[11px] text-(--q-text-secondary) flex items-center gap-2 flex-wrap">
+        <div class="text-2xs text-text-secondary flex items-center gap-2 flex-wrap">
           {{ t('alerts.sendingNotification') }}
         </div>
       </div>
@@ -138,10 +138,10 @@ limitations under the License. -->
     <div
       v-else
       data-test="test-result-idle"
-      class="flex items-center gap-2 py-[10px] px-3 rounded bg-[rgba(0,0,0,0.02)] dark:bg-[rgba(255,255,255,0.02)] border border-[rgba(0,0,0,0.08)] dark:border-[rgba(255,255,255,0.08)]"
+      class="flex items-center gap-2 py-2.5 px-3 rounded-default bg-[rgba(0,0,0,0.02)] dark:bg-[rgba(255,255,255,0.02)] border border-[rgba(0,0,0,0.08)] dark:border-[rgba(255,255,255,0.08)]"
     >
       <OIcon name="info" size="sm" />
-      <span class="text-[11px] text-(--q-text-secondary) leading-[1.4]">
+      <span class="text-2xs text-text-secondary leading-[1.4]">
         {{ t('alerts.testIdleMessage') }}
       </span>
     </div>
diff --git a/web/src/components/alerts/FieldsInput.vue b/web/src/components/alerts/FieldsInput.vue
index 98bbe77c47..9c04cf9c0c 100644
--- a/web/src/components/alerts/FieldsInput.vue
+++ b/web/src/components/alerts/FieldsInput.vue
@@ -79,8 +79,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             />
           </div>
           <div
-            class="ml-0 alerts-condition-action"
-            style="margin-bottom: 12px"
+            class="ml-0 alerts-condition-action mb-3"
           >
             <OButton
               data-test="alert-conditions-delete-condition-btn"
@@ -137,12 +136,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <OSelect
             v-model="field.column"
             :options="props.streamFields"
-            class="py-2"
+            class="py-2 min-w-55"
             :placeholder="t('alerts.column')"
             :creatable="props.enableNewValueMode"
             :error="!!fieldErrors[`${field.uuid}-column`]"
             :error-message="fieldErrors[`${field.uuid}-column`] || ''"
-            style="min-width: 220px"
             data-test="alert-conditions-select-column"
             @create="(val: string) => { field.column = val; emits('input:update', 'conditions', field); }"
             @update:model-value="(v: any) => { fieldErrors[`${field.uuid}-column`] = v ? '' : t('alerts.validation.fieldRequired'); emits('input:update', 'conditions', field); }"
@@ -152,10 +150,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <OSelect
             v-model="field.operator"
             :options="triggerOperators"
-            class="py-2"
+            class="py-2 min-w-30"
             :error="!!fieldErrors[`${field.uuid}-operator`]"
             :error-message="fieldErrors[`${field.uuid}-operator`] || ''"
-            style="min-width: 120px"
             data-test="alert-conditions-operator-select"
             @update:model-value="(v: any) => { fieldErrors[`${field.uuid}-operator`] = v ? '' : t('alerts.validation.fieldRequired'); emits('input:update', 'conditions', field); }"
           />
@@ -164,17 +161,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <OInput
             v-model="field.value"
             :placeholder="t('common.value')"
-            class="py-2"
+            class="py-2 min-w-37.5"
             :error="!!fieldErrors[`${field.uuid}-value`]"
             :error-message="fieldErrors[`${field.uuid}-value`] || ''"
-            style="min-width: 150px"
             data-test="alert-conditions-value-input"
             @update:model-value="(v: any) => { fieldErrors[`${field.uuid}-value`] = v ? '' : t('alerts.validation.fieldRequired'); emits('input:update', 'conditions', field); }"
           />
         </div>
         <div
-          class="ml-0 alerts-condition-action"
-          style="margin-bottom: 12px"
+          class="ml-0 alerts-condition-action mb-3"
         >
           <OButton
             data-test="alert-conditions-delete-condition-btn"
diff --git a/web/src/components/alerts/FilterCondition.spec.ts b/web/src/components/alerts/FilterCondition.spec.ts
index 83dfbd5ac2..ad691f2bd1 100644
--- a/web/src/components/alerts/FilterCondition.spec.ts
+++ b/web/src/components/alerts/FilterCondition.spec.ts
@@ -243,7 +243,7 @@ describe('FilterCondition.vue Branch Coverage', () => {
     });
   });
 
-  // TODO: filterColumns internal API was removed when q-select was replaced with OSelect.
+  // TODO: filterColumns internal API was removed when the select was replaced with OSelect.
   // These tests need rewriting against the new OSelect filter API.
   describe.skip('Filter Functionality Branch Coverage', () => {
     it('should reset filtered fields when filter value is empty', async () => {
diff --git a/web/src/components/alerts/FilterCondition.vue b/web/src/components/alerts/FilterCondition.vue
index 5da7ba8996..b0afb3c4cb 100644
--- a/web/src/components/alerts/FilterCondition.vue
+++ b/web/src/components/alerts/FilterCondition.vue
@@ -1,8 +1,8 @@
 <template>
     <div class="flex items-start gap-1 flex-no-wrap">
-      <!-- V2: Fixed-width left column for alignment -->
+      <!-- Fixed-width left column for alignment -->
       <!-- All conditions have the same width for the operator/label section -->
-      <div class="flex items-center justify-center mt-1 min-w-[60px]">
+      <div class="flex items-center justify-center mt-1 min-w-15">
         <!-- First condition in root group -->
         <template v-if="index === 0 && depth === 0">
           <span class="text-sm">{{ t('alerts.filters.if') }}</span>
@@ -16,7 +16,7 @@
         <!-- Other conditions: show operator + toggle button -->
         <template v-else>
           <span
-            class="text-sm font-medium min-w-[30px] lowercase"
+            class="text-sm font-medium min-w-7.5 lowercase"
             data-test="alert-conditions-operator-label"
             :data-test-label="computedLabel"
           >
@@ -27,7 +27,7 @@
             data-test="alert-conditions-toggle-operator-btn"
             variant="ghost"
             size="icon-circle-sm"
-            class="h-[26px] flex-shrink-0 text-(--o2-primary-btn-bg)! hover:bg-[rgba(var(--o2-primary-btn-bg-rgb),0.1)]!"
+            class="h-6.5 flex-shrink-0 text-button-primary! hover:bg-[color-mix(in_srgb,var(--color-button-primary)_10%,transparent)]!"
             @click="toggleOperator"
           >
             <OIcon name="restart-alt" size="sm" />
@@ -62,7 +62,7 @@
             :name="`${namePrefix}.operator`"
             :options="triggerOperators"
             :dropdownStyle="{ textTransform: 'capitalize' }"
-            :class="[inputWidth ? inputWidth : (store.state.isAiChatEnabled ? 'w-[70px]' : computedInputWidth)]"
+            :class="[inputWidth ? inputWidth : (store.state.isAiChatEnabled ? 'w-17.5' : computedInputWidth)]"
             :searchable="false"
             data-test="alert-conditions-operator-select"
             @update:model-value="() => emits('input:update', 'conditions', condition)"
@@ -73,7 +73,7 @@
           <OFormInput
             :name="`${namePrefix}.value`"
             :placeholder="t('common.value')"
-            :class="[inputWidth ? inputWidth : (store.state.isAiChatEnabled ? 'w-[110px]' : computedValueWidth)]"
+            :class="[inputWidth ? inputWidth : (store.state.isAiChatEnabled ? 'w-27.5' : computedValueWidth)]"
             data-test="alert-conditions-value-input"
             @update:model-value="() => emits('input:update', 'conditions', condition)"
           />
@@ -136,12 +136,10 @@
         validator: (value: string) => ['alerts', 'pipelines'].includes(value),
     },
     /**
-     * Dual-mode switch (alerts-migration.md §A). When set AND an OForm context
-     * is injectable, the three controls render as OForm* fields name=-bound to
-     * `${namePrefix}.column` / `.operator` / `.value` — the TanStack form owns
-     * their values (no v-model, no manual error refs). When empty (default)
-     * the component renders today's BARE markup unchanged (pipeline's
-     * NodeForm/Condition.vue consumes it bare — a permanent, sanctioned mode).
+     * Dual-mode switch. When set AND an OForm context is injectable, the three
+     * controls render as OForm* fields name-bound to `${namePrefix}.column` /
+     * `.operator` / `.value` (the form owns their values, no v-model). When
+     * empty (default) the component renders bare markup with v-model.
      */
     namePrefix: {
         type: String,
@@ -198,12 +196,12 @@ const addGroupApiHeader = (groupId: string) => {
 };
 
 const computedLabel = computed(() => {
-  // V2: First condition in any group should not show AND/OR operator
-  // Only subsequent conditions show the operator
+  // First condition in any group should not show AND/OR operator;
+  // only subsequent conditions show the operator
   if (props.isFirstInGroup) {
     return '';  // No operator for first condition in group
   }
-  // V2: Use condition's logicalOperator if available
+  // Use condition's logicalOperator if available
   if (props.condition.logicalOperator) {
     return props.condition.logicalOperator;
   }
@@ -221,13 +219,11 @@ const toggleOperator = () => {
 };
 
 const computedInputWidth = computed(() => {
-  // If custom width is provided, use it; otherwise use default responsive width
-  return props.inputWidth || (store.state.isAiChatEnabled ? '' : 'xl:min-w-[200px] lg:min-w-[90px] lg:w-fit');
+  return props.inputWidth || (store.state.isAiChatEnabled ? '' : 'xl:min-w-50 lg:min-w-22.5 lg:w-fit');
 });
 
 const computedValueWidth = computed(() => {
-  // If custom width is provided, use it; otherwise use default responsive width
-  return props.inputWidth || (store.state.isAiChatEnabled ? 'w-[110px]' : 'xl:min-w-[200px] lg:w-fit lg:min-w-[80px]');
+  return props.inputWidth || (store.state.isAiChatEnabled ? 'w-27.5' : 'xl:min-w-50 lg:w-fit lg:min-w-20');
 });
 
 
diff --git a/web/src/components/alerts/FilterGroup.spec.ts b/web/src/components/alerts/FilterGroup.spec.ts
index 6c1836af58..8cb1053516 100644
--- a/web/src/components/alerts/FilterGroup.spec.ts
+++ b/web/src/components/alerts/FilterGroup.spec.ts
@@ -1242,27 +1242,6 @@ describe('FilterGroup.vue Comprehensive Coverage', () => {
       expect(addGroupBtn.attributes('disabled')).toBeDefined();
     });
 
-    it('should handle tab change for toggle label', async () => {
-      const wrapper = mount(FilterGroup, {
-        props: defaultProps,
-        global: {
-          plugins: [mockI18n],
-          provide: {
-            store: mockStore,
-          },
-          stubs: {
-            'FilterCondition': true,
-          },
-        },
-      });
-
-      const tabs = wrapper.findComponent({ name: 'q-tabs' });
-      if (tabs.exists()) {
-        await tabs.vm.$emit('update:model-value', 'or');
-        expect(wrapper.emitted('add-group')).toBeTruthy();
-        expect(wrapper.emitted('input:update')).toBeTruthy();
-      }
-    });
   });
 
 
diff --git a/web/src/components/alerts/FilterGroup.vue b/web/src/components/alerts/FilterGroup.vue
index dc2a20765e..f3e1691cbf 100644
--- a/web/src/components/alerts/FilterGroup.vue
+++ b/web/src/components/alerts/FilterGroup.vue
@@ -1,21 +1,18 @@
 <template>
     <!-- Preview Section (only for root level) -->
     <div v-if="depth === 0 && showSqlPreview && previewString"
-         class="mb-2 p-2 rounded border w-full max-h-[3.2em] overflow-y-auto"
-         :class="store.state.theme === 'dark' ? 'bg-gray-800 border-gray-700' : 'bg-gray-50 border-gray-300'">
+         class="mb-2 p-2 rounded-default border w-full max-h-[3.2em] overflow-y-auto bg-surface-panel border-border-default">
       <div class="flex items-start gap-1 min-w-0">
-        <span class="font-medium text-xs flex-shrink-0 leading-[1.3]"
-              :class="store.state.theme === 'dark' ? 'text-gray-300' : 'text-gray-700'">
+        <span class="font-medium text-xs flex-shrink-0 leading-[1.3] text-text-body">
           {{ t('alerts.filters.previewLabel') }}
         </span>
-        <span class="text-[10px] font-mono leading-[1.3] min-w-0 break-words"
-              :class="store.state.theme === 'dark' ? 'text-gray-400' : 'text-gray-600'">
+        <span class="text-3xs font-mono leading-[1.3] min-w-0 break-words text-text-secondary">
           {{ previewString }}
         </span>
       </div>
     </div>
 
-    <div :class="[`  px-2 mb-2 el-border el-border-radius `,
+    <div :class="[`  px-2 mb-2 filter-group-box border border-card-glass-border rounded-default `,
         'mt-4',
         store.state.isAiChatEnabled ? 'w-full' : 'xl:w-fit'
     ]"
@@ -47,11 +44,11 @@
         </OToggleGroup>
       </div>
       <!-- Spacer for root group to maintain consistent spacing -->
-      <div v-else class="h-[14px]"></div>
+      <div v-else class="h-3.5"></div>
 
       <!-- Group content -->
 
-      <div v-if="isOpen" class="overflow-x-auto group-container" :class="store.state.theme === 'dark' ? 'dark-mode-group' : 'light-mode-group'">
+      <div v-if="isOpen" class="overflow-x-auto group-container">
         <!-- Items in group (V2 uses 'conditions' array) -->
         <div class="ml-2 whitespace-nowrap " v-for="(item, index) in props.group.conditions" :key="index">
           <FilterGroup
@@ -103,8 +100,8 @@
             variant="ghost-primary"
             @click="addCondition(props.group.groupId)"
             >
-            <OIcon class="mr-1 font-bold" size="xs" style="border-radius: 50%; border: 1px solid;" name="add" />
-            <span class="text-[0.75rem] font-bold">{{ t('alerts.conditions.condition') }}</span>
+            <OIcon class="mr-1 font-bold rounded-full border" size="xs" name="add" />
+            <span class="text-xs font-bold">{{ t('alerts.conditions.condition') }}</span>
             <OTooltip :delay="300" :content="t('alerts.conditions.addConditionTooltip')" />
         </OButton>
         <OButton
@@ -115,8 +112,8 @@
             @click="addGroup(props.group.groupId)"
             :disabled="depth >= 2"
             >
-            <OIcon class="mr-1 font-bold" size="xs" style="border-radius: 50%; border: 1px solid;" name="add" />
-            <span class="text-[0.75rem] font-bold">{{ t('alerts.conditions.conditionGroup') }}</span>
+            <OIcon class="mr-1 font-bold rounded-full border" size="xs" name="add" />
+            <span class="text-xs font-bold">{{ t('alerts.conditions.conditionGroup') }}</span>
             <OTooltip v-if="depth < 2" :delay="300" :content="t('alerts.conditions.addConditionGroupTooltip')" />
             <OTooltip v-else :delay="300" :content="t('alerts.conditions.maxDepthReachedTooltip')" />
         </OButton>
@@ -128,7 +125,7 @@
             @click="reorderItems()"
             >
             <OIcon class="mr-1 font-bold" size="xs" name="swap-vert" />
-            <span class="text-[0.75rem] font-bold">{{ t('alerts.filters.reorder') }}</span>
+            <span class="text-xs font-bold">{{ t('alerts.filters.reorder') }}</span>
             <OTooltip :delay="300" :content="t('alerts.filters.reorderTooltip')" />
         </OButton>
      </div>
@@ -149,6 +146,7 @@
     import { cloneDeep } from 'lodash-es';
     import FilterCondition from './FilterCondition.vue';
     import { useStore } from 'vuex';
+    import useTheme from '@/composables/useTheme';
     import OButton from '@/lib/core/Button/OButton.vue';
     import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
     import OToggleGroup from '@/lib/core/ToggleGroup/OToggleGroup.vue';
@@ -213,18 +211,17 @@
         validator: (value: string) => ['alerts', 'pipelines'].includes(value),
     },
     /**
-     * Dual-mode switch (alerts-migration.md §A). When set, this group passes
-     * the prefix down recursively — the child at index i (leaf condition OR
-     * nested group) gets `${namePrefix}.conditions[${i}]` — so every
-     * FilterCondition binds its OForm* fields into the injected TanStack form
-     * at the exact nested path. When empty (default): today's BARE behavior,
-     * unchanged (pipeline's NodeForm/Condition.vue consumes it bare —
-     * a permanent, sanctioned mode).
+     * Dual-mode switch. When set, this group passes the prefix down
+     * recursively — the child at index i (leaf condition OR nested group) gets
+     * `${namePrefix}.conditions[${i}]` — so every FilterCondition binds its
+     * OForm* fields into the injected TanStack form at the exact nested path.
+     * When empty (default): bare behavior (pipeline's NodeForm/Condition.vue
+     * consumes it bare).
      *
-     * 🔑 The v-for `:key` MUST stay the array INDEX: the OForm* fields bind by
-     * index-based name and do NOT re-bind when the name changes — a stable-id
-     * key would leave rendered inputs shifted/blank after a mid-list delete
-     * (START-HERE Rule ①).
+     * GOTCHA: the v-for `:key` MUST stay the array INDEX — the OForm* fields
+     * bind by index-based name and do NOT re-bind when the name changes; a
+     * stable-id key would leave rendered inputs shifted/blank after a mid-list
+     * delete.
      */
     namePrefix: {
         type: String,
@@ -249,9 +246,9 @@
   const showPreview = ref(true);
 
   const store = useStore();
+  const { isDark } = useTheme();
   const { t } = useI18n();
 
-  // V2: Use logicalOperator (AND/OR) instead of label (and/or)
   const label = ref(props.group.logicalOperator?.toLowerCase() || 'and');
 
   const confirmDialog = ref({
@@ -267,30 +264,21 @@
   // `groups` in place (performRemoveCondition et al) — assigning it raw makes
   // those writes silently fail ("target is readonly").
   //
-  // NOT deep. `deep: true` was correct pre-migration, when formData was a plain
-  // `ref()` mutated IN PLACE — the object identity never changed, so a deep watch
-  // was the only way to see an edit. The form store replaces values IMMUTABLY on
-  // every change, so props.group already arrives as a new reference and a
-  // reference watch sees every edit.
-  //
-  // Keeping both was the worst of the two models: deep fired on every nested
-  // mutation, and each firing cloneDeep'd the whole subtree — once per nested
-  // FilterGroup. That is what put ~213ms of scripting into a single click.
+  // Intentionally NOT deep: the form store replaces values immutably on every
+  // change, so props.group arrives as a new reference and a reference watch
+  // sees every edit. A deep watch would cloneDeep the whole subtree on every
+  // nested mutation, once per nested FilterGroup.
   watch(() => props.group, (newGroup) => {
     groups.value = cloneDeep(newGroup);
-    // V2: Use logicalOperator instead of label
     label.value = newGroup.logicalOperator?.toLowerCase() || 'and';
   });
 
   // Bare-mode consumers (e.g. pipeline's NodeForm/Condition.vue) edit props.group's
-  // leaf conditions IN PLACE via v-model. That never changes props.group's
-  // reference, so the intentionally non-deep sync watch above does not fire and
-  // `groups` (the working clone) goes STALE — missing the typed column/operator/
-  // value. The structural handlers below run only on explicit button clicks
-  // (add / remove / toggle / reorder), so refreshing the clone from the live prop
-  // at that point is cheap and captures those in-place edits BEFORE we mutate and
-  // emit. Without it, emitting the stale clone makes the ancestor replace the whole
-  // group and wipe the user's typed values on every structural change.
+  // leaf conditions IN PLACE via v-model, which never changes props.group's
+  // reference, so the non-deep watch above doesn't fire and `groups` goes STALE.
+  // The structural handlers below run only on explicit button clicks, so refresh
+  // the clone from the live prop there — otherwise emitting the stale clone makes
+  // the ancestor wipe the user's typed values on every structural change.
   const syncWorkingCopyFromProp = () => {
     groups.value = cloneDeep(props.group);
   };
@@ -326,11 +314,8 @@
     return false;
   }
   
-  // NOTE: `groups` is a MUTABLE deep clone of `props.group` (which is the READONLY
-  // form read-view in alerts mode). The handlers mutate the clone in place and
-  // emit it; the ancestor writes it back through the form (setFieldValue), which
-  // re-syncs `props.group` → the clone via the watch below. Mutating the readonly
-  // prop directly silently fails ("target is readonly") so add/remove did nothing.
+  // Handlers mutate the clone `groups` (never the readonly `props.group`) and emit
+  // it; the ancestor writes it back through the form, re-syncing via the watch above.
   const addCondition = (groupId: string) => {
     // Capture any in-place bare-mode leaf edits before mutating + emitting.
     syncWorkingCopyFromProp();
@@ -376,7 +361,6 @@
   const toggleLabel = (newLabel?: string) => {
     // Capture any in-place bare-mode leaf edits before mutating + emitting.
     syncWorkingCopyFromProp();
-    // V2: Use logicalOperator instead of label
     // If newLabel is provided, use it; otherwise toggle
     if (newLabel) {
       groups.value.logicalOperator = newLabel.toUpperCase();
@@ -390,7 +374,6 @@
   const removeCondition = (id: string) => {
     // Capture any in-place bare-mode leaf edits before reading/mutating + emitting.
     syncWorkingCopyFromProp();
-    // V2: Use conditions array instead of items
     // First, check what will happen after removing this condition
     const itemsAfterRemoval = groups.value.conditions.filter((item: any) => item.id !== id);
     const hasConditionsAfterRemoval = itemsAfterRemoval.some((item: any) => !isGroup(item));
@@ -407,8 +390,7 @@
         message: t('alerts.filters.deleteConditionMessage'),
         // Pluralized by vue-i18n (`one | other`). This branch is guarded by
         // `subGroupCount > 0`, so n is always >= 1 and vue-i18n's default rule
-        // (1 -> one, >=2 -> other) reproduces the previous hand-rolled
-        // `subGroupCount > 1 ? 's' : ''` output exactly.
+        // (1 -> one, >=2 -> other) applies.
         warningMessage: t(
           'alerts.filters.deleteConditionSubGroupWarning',
           { count: subGroupCount },
@@ -430,7 +412,6 @@
     // Capture any in-place bare-mode leaf edits before mutating + emitting (this
     // may run deferred from the confirm-dialog okCallback).
     syncWorkingCopyFromProp();
-    // V2: Use conditions array instead of items
     groups.value.conditions = groups.value.conditions.filter((item: any) => item.id !== id);
 
     // Check if there are any conditions left (not sub-groups)
@@ -452,7 +433,6 @@
   const reorderItems = () => {
     // Capture any in-place bare-mode leaf edits before mutating + emitting.
     syncWorkingCopyFromProp();
-    // V2: Use conditions array instead of items
     // Separate conditions and groups
     const conditions = groups.value.conditions.filter((item: any) => !isGroup(item));
     const subGroups = groups.value.conditions.filter((item: any) => isGroup(item));
@@ -501,9 +481,7 @@ function hslToCSS(h: number, s: number, l: number) {
   return `hsl(${h}, ${s}%, ${l}%)`;
 }
 const computedStyleMap = computed(() => {
-  const isDark = store.state.theme === 'dark';
-
-  if (isDark) {
+  if (isDark.value) {
     const baseColor = '#212121';
     const { h, s, l } = hexToHSL(baseColor);
     const newLightness = Math.min(l + props.depth * 1, 90); // 1% per depth step
@@ -574,38 +552,26 @@ defineExpose({
 
   </script>
 
-  <style>
+  <style scoped>
+    /* keep(scrollbar): ::-webkit-scrollbar pseudo-elements and scrollbar-color have no utility equivalent. */
 
-    .group-container.dark-mode-group {
-      scrollbar-color: #818181 var(--o2-primary-background); /* thumb color, track color */
-    }
-
-    .group-container.light-mode-group {
-      scrollbar-color: #999 #ffffff;
+    .group-container {
+      scrollbar-color: var(--color-border-strong) var(--color-surface-base); /* thumb color, track color */
     }
 
     /* For more control using WebKit scrollbar styling */
     .group-container::-webkit-scrollbar {
-      width: 8px;
-      height: 4px !important;
+      width: 0.5rem;
+      height: 0.25rem !important;
     }
 
-    .group-container.dark-mode-group::-webkit-scrollbar-track {
-      background: red;
+    .group-container::-webkit-scrollbar-track {
+      background: var(--color-surface-base);
     }
 
-    .group-container.dark-mode-group::-webkit-scrollbar-thumb {
-      background-color: #b10000;
-      border-radius: 4px;
-    }
-
-    .group-container.light-mode-group::-webkit-scrollbar-track {
-      background: #ffffff;
-    }
-
-    .group-container.light-mode-group::-webkit-scrollbar-thumb {
-      background-color: #999;
-      border-radius: 4px;
+    .group-container::-webkit-scrollbar-thumb {
+      background-color: var(--color-border-strong);
+      border-radius: var(--radius-default);
     }
 
   </style>
diff --git a/web/src/components/alerts/HorizontalStepper.spec.ts b/web/src/components/alerts/HorizontalStepper.spec.ts
deleted file mode 100644
index 5293b899ba..0000000000
--- a/web/src/components/alerts/HorizontalStepper.spec.ts
+++ /dev/null
@@ -1,323 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { describe, it, expect, afterEach } from "vitest";
-import { mount, VueWrapper } from "@vue/test-utils";
-import i18n from "@/locales";
-import store from "@/test/unit/helpers/store";
-import HorizontalStepper from "@/components/alerts/HorizontalStepper.vue";
-import type { Step } from "@/components/alerts/HorizontalStepper.vue";
-
-// ---------------------------------------------------------------------------
-// fixtures
-// ---------------------------------------------------------------------------
-
-const steps: Step[] = [
-  { id: 1, label: "Step 1", description: "First step" },
-  { id: 2, label: "Step 2" },
-  { id: 3, label: "Step 3", description: "Third step" },
-];
-
-// ---------------------------------------------------------------------------
-// helpers
-// ---------------------------------------------------------------------------
-
-function buildWrapper(props: Record<string, any> = {}): VueWrapper<any> {
-  return mount(HorizontalStepper, {
-    props: {
-      currentStep: 1,
-      steps,
-      completedSteps: [],
-      ...props,
-    },
-    global: { plugins: [i18n, store] },
-  });
-}
-
-// ---------------------------------------------------------------------------
-// tests
-// ---------------------------------------------------------------------------
-
-describe("HorizontalStepper", () => {
-  let wrapper: VueWrapper<any> | null = null;
-
-  afterEach(() => {
-    wrapper?.unmount();
-    wrapper = null;
-  });
-
-  // ── Renders with minimum props ────────────────────────────────────────────
-
-  describe("renders with minimum props", () => {
-    it("mounts without error", () => {
-      wrapper = buildWrapper();
-
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it("renders all step labels", () => {
-      wrapper = buildWrapper();
-
-      expect(wrapper.text()).toContain("Step 1");
-      expect(wrapper.text()).toContain("Step 2");
-      expect(wrapper.text()).toContain("Step 3");
-    });
-
-    it("renders step descriptions when provided", () => {
-      wrapper = buildWrapper();
-
-      expect(wrapper.text()).toContain("First step");
-      expect(wrapper.text()).toContain("Third step");
-    });
-
-    it("does not render a description for steps without one", () => {
-      wrapper = buildWrapper();
-
-      // Step 2 has no description; its label is still present
-      expect(wrapper.text()).toContain("Step 2");
-    });
-  });
-
-  // ── Steps with / without description (v-if branch) ───────────────────────
-
-  describe("conditional description rendering", () => {
-    it("renders exactly two description nodes (steps 1 and 3 have descriptions)", () => {
-      wrapper = buildWrapper();
-
-      // Each step-description node contains text from the description
-      const html = wrapper.html();
-      const countFirst = (html.match(/First step/g) || []).length;
-      const countThird = (html.match(/Third step/g) || []).length;
-      expect(countFirst).toBeGreaterThan(0);
-      expect(countThird).toBeGreaterThan(0);
-    });
-
-    it("does not include description text for a step without a description prop", () => {
-      const customSteps: Step[] = [{ id: 1, label: "Only Step" }];
-      wrapper = buildWrapper({ steps: customSteps, currentStep: 1 });
-
-      // Should NOT have any description-like content beyond the label
-      expect(wrapper.html()).not.toContain("undefined");
-    });
-
-    it("renders description for a step with hasError and a description", () => {
-      const errorSteps: Step[] = [
-        { id: 1, label: "Error Step", description: "Has error", hasError: true },
-      ];
-      wrapper = buildWrapper({ steps: errorSteps, currentStep: 1 });
-
-      expect(wrapper.text()).toContain("Has error");
-    });
-  });
-
-  // ── canNavigateToStep logic ───────────────────────────────────────────────
-
-  describe("canNavigateToStep", () => {
-    it("returns true for the current step", () => {
-      wrapper = buildWrapper({ currentStep: 2, completedSteps: [1] });
-
-      expect((wrapper.vm as any).canNavigateToStep(2)).toBe(true);
-    });
-
-    it("returns true for completed steps", () => {
-      wrapper = buildWrapper({ currentStep: 3, completedSteps: [1, 2] });
-
-      expect((wrapper.vm as any).canNavigateToStep(1)).toBe(true);
-      expect((wrapper.vm as any).canNavigateToStep(2)).toBe(true);
-    });
-
-    it("returns true for next step when current step is completed", () => {
-      wrapper = buildWrapper({ currentStep: 1, completedSteps: [1] });
-
-      expect((wrapper.vm as any).canNavigateToStep(2)).toBe(true);
-    });
-
-    it("returns false for the next step when current step is NOT completed", () => {
-      wrapper = buildWrapper({ currentStep: 1, completedSteps: [] });
-
-      expect((wrapper.vm as any).canNavigateToStep(2)).toBe(false);
-    });
-
-    it("returns false for a future step more than one ahead", () => {
-      wrapper = buildWrapper({ currentStep: 1, completedSteps: [] });
-
-      expect((wrapper.vm as any).canNavigateToStep(3)).toBe(false);
-    });
-  });
-
-  // ── handleStepClick — emit behavior ──────────────────────────────────────
-
-  describe("handleStepClick", () => {
-    it("emits 'update:currentStep' when clicking a navigable step id", () => {
-      wrapper = buildWrapper({ currentStep: 1, completedSteps: [] });
-
-      (wrapper.vm as any).handleStepClick(1); // current step is always navigable
-
-      expect(wrapper.emitted("update:currentStep")).toBeTruthy();
-      expect(wrapper.emitted("update:currentStep")![0]).toEqual([1]);
-    });
-
-    it("emits 'update:currentStep' when clicking a completed step id", () => {
-      wrapper = buildWrapper({ currentStep: 2, completedSteps: [1] });
-
-      (wrapper.vm as any).handleStepClick(1);
-
-      expect(wrapper.emitted("update:currentStep")).toBeTruthy();
-      expect(wrapper.emitted("update:currentStep")![0]).toEqual([1]);
-    });
-
-    it("does NOT emit 'update:currentStep' when clicking a disabled step id", () => {
-      wrapper = buildWrapper({ currentStep: 1, completedSteps: [] });
-
-      (wrapper.vm as any).handleStepClick(3); // step 3 is not reachable
-
-      expect(wrapper.emitted("update:currentStep")).toBeFalsy();
-    });
-
-    it("emits 'update:currentStep' when clicking the next step after current is completed", () => {
-      wrapper = buildWrapper({ currentStep: 1, completedSteps: [1] });
-
-      (wrapper.vm as any).handleStepClick(2);
-
-      expect(wrapper.emitted("update:currentStep")).toBeTruthy();
-      expect(wrapper.emitted("update:currentStep")![0]).toEqual([2]);
-    });
-  });
-
-  // ── DOM click events ──────────────────────────────────────────────────────
-
-  describe("DOM step click events", () => {
-    it("clicking the first step item triggers 'update:currentStep' for step id 1", async () => {
-      wrapper = buildWrapper({ currentStep: 1, completedSteps: [] });
-
-      // The stepper renders a list of items; get the first one via the label
-      const stepTitles = wrapper.findAll("[class*='step-title'], [class*='step-label']");
-      // Fallback: trigger via the first child of the stepper container
-      const container = wrapper.find("[class*='stepper-container']");
-      const firstChild = container.element.children[0] as HTMLElement;
-      await wrapper.find("[class*='stepper-container']").element.children[0].dispatchEvent(
-        new MouseEvent("click", { bubbles: true }),
-      );
-      await wrapper.vm.$nextTick();
-
-      expect(wrapper.emitted("update:currentStep")).toBeTruthy();
-    });
-
-    it("clicking a disabled step item does NOT emit 'update:currentStep'", async () => {
-      wrapper = buildWrapper({ currentStep: 1, completedSteps: [] });
-
-      const container = wrapper.find("[class*='stepper-container']");
-      // Third child = step id 3 (disabled because not current, not completed, not next)
-      container.element.children[2].dispatchEvent(
-        new MouseEvent("click", { bubbles: true }),
-      );
-      await wrapper.vm.$nextTick();
-
-      expect(wrapper.emitted("update:currentStep")).toBeFalsy();
-    });
-  });
-
-  // ── Rendering step numbers vs icons ──────────────────────────────────────
-
-  describe("step number / icon rendering", () => {
-    it("renders a step number for a non-completed, non-error active step", () => {
-      wrapper = buildWrapper({ currentStep: 1, completedSteps: [] });
-
-      // Step 1 is active but not completed: should show "1" as step number
-      expect(wrapper.html()).toContain("1");
-    });
-
-    it("renders the error icon for a step with hasError=true", () => {
-      const errorSteps: Step[] = [
-        { id: 1, label: "Error Step", hasError: true },
-        { id: 2, label: "Ok Step" },
-      ];
-      wrapper = buildWrapper({ steps: errorSteps, currentStep: 1 });
-
-      const icons = wrapper.findAllComponents({ name: "OIcon" });
-      expect(icons.some((i) => i.props("name") === "error-outline")).toBe(true);
-    });
-
-    it("renders the check icon for a completed step that is not active", () => {
-      wrapper = buildWrapper({ currentStep: 2, completedSteps: [1] });
-
-      const icons = wrapper.findAllComponents({ name: "OIcon" });
-      expect(icons.some((i) => i.props("name") === "check")).toBe(true);
-    });
-
-    it("does NOT render check icon for a step that is active even if completed", () => {
-      // When currentStep === step.id the template shows the number/error, not check
-      wrapper = buildWrapper({ currentStep: 1, completedSteps: [1] });
-
-      // Step 1 is current AND completed — template: v-if completed && currentStep !== id
-      // so "check" should NOT appear for step 1
-      const icons = wrapper.findAllComponents({ name: "OIcon" });
-      const checkIcons = icons.filter((i) => i.props("name") === "check");
-      expect(checkIcons).toHaveLength(0);
-    });
-  });
-
-  // ── Async paths / props reactivity ───────────────────────────────────────
-
-  describe("props reactivity", () => {
-    it("updates rendered labels when steps prop changes", async () => {
-      wrapper = buildWrapper();
-
-      const newSteps: Step[] = [
-        { id: 1, label: "New Step A" },
-        { id: 2, label: "New Step B" },
-      ];
-      await wrapper.setProps({ steps: newSteps });
-
-      expect(wrapper.text()).toContain("New Step A");
-      expect(wrapper.text()).toContain("New Step B");
-    });
-
-    it("reflects updated currentStep in canNavigateToStep", async () => {
-      wrapper = buildWrapper({ currentStep: 1, completedSteps: [] });
-
-      await wrapper.setProps({ currentStep: 2, completedSteps: [1] });
-
-      expect((wrapper.vm as any).canNavigateToStep(2)).toBe(true);
-      expect((wrapper.vm as any).canNavigateToStep(1)).toBe(true);
-    });
-
-    it("reflects updated completedSteps in canNavigateToStep", async () => {
-      wrapper = buildWrapper({ currentStep: 1, completedSteps: [] });
-
-      await wrapper.setProps({ completedSteps: [1] });
-
-      expect((wrapper.vm as any).canNavigateToStep(2)).toBe(true);
-    });
-  });
-
-  // ── Single-step edge case ─────────────────────────────────────────────────
-
-  describe("single step edge case", () => {
-    it("renders a single step without error", () => {
-      const single: Step[] = [{ id: 1, label: "Only Step" }];
-      wrapper = buildWrapper({ steps: single, currentStep: 1 });
-
-      expect(wrapper.text()).toContain("Only Step");
-    });
-
-    it("canNavigateToStep returns true for the only step when it is current", () => {
-      const single: Step[] = [{ id: 1, label: "Only Step" }];
-      wrapper = buildWrapper({ steps: single, currentStep: 1 });
-
-      expect((wrapper.vm as any).canNavigateToStep(1)).toBe(true);
-    });
-  });
-});
diff --git a/web/src/components/alerts/HorizontalStepper.vue b/web/src/components/alerts/HorizontalStepper.vue
deleted file mode 100644
index 48c4e3a3d6..0000000000
--- a/web/src/components/alerts/HorizontalStepper.vue
+++ /dev/null
@@ -1,219 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <div class="w-full py-6">
-    <div class="flex justify-between items-start relative max-w-[1200px] mx-auto px-4 stepper-container">
-      <div
-        v-for="(step, index) in steps"
-        :key="step.id"
-        class="step-item flex flex-col items-center flex-1 relative cursor-pointer transition-all duration-300 ease-in-out"
-        :class="{
-          'step-active': currentStep === step.id,
-          'step-completed': completedSteps.includes(step.id),
-          'step-disabled': !canNavigateToStep(step.id),
-          'step-error': step.hasError,
-          'cursor-not-allowed opacity-50': !canNavigateToStep(step.id)
-        }"
-        @click="handleStepClick(step.id)"
-      >
-        <!-- Step indicator -->
-        <div class="step-indicator-wrapper flex items-center w-full relative">
-          <div
-            class="step-indicator w-[40px] h-[40px] rounded-full flex items-center justify-center font-semibold text-base transition-all duration-300 ease-in-out relative z-[2] shrink-0 border-2"
-            :class="
-              step.hasError
-                ? 'bg-[#d32f2f] text-white border-[#d32f2f]'
-                : completedSteps.includes(step.id) && currentStep !== step.id
-                  ? 'bg-[#2e7d32] text-white border-[#2e7d32]'
-                  : currentStep === step.id
-                    ? isDarkMode
-                      ? 'bg-[#1976d2] text-white border-[#1976d2] shadow-[0_0_0_4px_rgba(25,118,210,0.2)]'
-                      : 'bg-[#1976d2] text-white border-[#1976d2] shadow-[0_0_0_4px_rgba(25,118,210,0.1)]'
-                    : isDarkMode
-                      ? 'bg-[#424242] text-[#9e9e9e] border-[#616161]'
-                      : 'bg-[#f5f5f5] text-[#757575] border-[var(--o2-border)]'
-            "
-          >
-            <OIcon
-              v-if="completedSteps.includes(step.id) && currentStep !== step.id"
-              name="check"
-              size="sm"
-              class="text-white"
-            />
-            <OIcon
-              v-else-if="step.hasError"
-              name="error-outline"
-              size="sm"
-              class="text-white"
-            />
-            <span v-else>{{ index + 1 }}</span>
-          </div>
-          <!-- Connector line -->
-          <div
-            v-if="index < steps.length - 1"
-            class="step-connector flex-1 h-[2px] mx-2 transition-all duration-300 ease-in-out"
-            :class="
-              completedSteps.includes(step.id)
-                ? 'bg-[#2e7d32]'
-                : isDarkMode
-                  ? 'bg-[#616161]'
-                  : 'bg-[var(--o2-border)]'
-            "
-          ></div>
-        </div>
-
-        <!-- Step label -->
-        <div class="step-label mt-3 text-center max-w-[150px]">
-          <div
-            class="text-sm font-semibold mb-1"
-            :class="
-              currentStep === step.id
-                ? isDarkMode
-                  ? 'text-white'
-                  : 'text-[#1976d2] font-bold'
-                : isDarkMode
-                  ? 'text-[var(--o2-border)]'
-                  : 'text-[#424242]'
-            "
-          >{{ step.label }}</div>
-          <div
-            v-if="step.description"
-            class="text-xs opacity-70"
-            :class="isDarkMode ? 'text-[#bdbdbd]' : 'text-[#757575]'"
-          >
-            {{ step.description }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, computed, type PropType } from "vue";
-import { useStore } from "vuex";
-import OIcon from "@/lib/core/Icon/OIcon.vue";
-
-export interface Step {
-  id: number;
-  label: string;
-  description?: string;
-  hasError?: boolean;
-}
-
-export default defineComponent({
-  name: "HorizontalStepper",
-  components: {
-    OIcon,
-  },
-  props: {
-    currentStep: {
-      type: Number,
-      required: true,
-    },
-    completedSteps: {
-      type: Array as PropType<number[]>,
-      default: () => [],
-    },
-    steps: {
-      type: Array as PropType<Step[]>,
-      required: true,
-    },
-  },
-  emits: ["update:currentStep"],
-  setup(props, { emit }) {
-    const store = useStore();
-
-    const isDarkMode = computed(() => store.state.theme === "dark");
-
-    const canNavigateToStep = (stepId: number): boolean => {
-      // Can always navigate to completed steps or current step
-      if (props.completedSteps.includes(stepId) || stepId === props.currentStep) {
-        return true;
-      }
-      // Can navigate to next step if current step is completed
-      if (stepId === props.currentStep + 1 && props.completedSteps.includes(props.currentStep)) {
-        return true;
-      }
-      return false;
-    };
-
-    const handleStepClick = (stepId: number) => {
-      if (canNavigateToStep(stepId)) {
-        emit("update:currentStep", stepId);
-      }
-    };
-
-    return {
-      isDarkMode,
-      canNavigateToStep,
-      handleStepClick,
-    };
-  },
-});
-</script>
-
-<style>
-.step-item:hover:not(.step-disabled) .step-indicator {
-  transform: scale(1.1);
-}
-
-/* Responsive design */
-@media (max-width: 1024px) {
-  .step-label {
-    max-width: 100px;
-  }
-
-  .step-indicator {
-    width: 36px;
-    height: 36px;
-    font-size: 14px;
-  }
-}
-
-@media (max-width: 768px) {
-  .stepper-container {
-    flex-direction: column;
-    gap: 1rem;
-  }
-
-  .step-item {
-    flex-direction: row;
-    width: 100%;
-    align-items: center;
-    justify-content: flex-start;
-  }
-
-  .step-indicator-wrapper {
-    flex-direction: column;
-    width: auto;
-  }
-
-  .step-connector {
-    width: 2px;
-    height: 30px;
-    margin: 0.5rem 0;
-  }
-
-  .step-label {
-    margin-top: 0;
-    margin-left: 1rem;
-    text-align: left;
-    max-width: none;
-  }
-}
-</style>
diff --git a/web/src/components/alerts/ImportAlert.spec.ts b/web/src/components/alerts/ImportAlert.spec.ts
index 9b552c49ad..e13600f9d0 100644
--- a/web/src/components/alerts/ImportAlert.spec.ts
+++ b/web/src/components/alerts/ImportAlert.spec.ts
@@ -215,7 +215,7 @@ describe("ImportAlert Component - Comprehensive Function Tests", () => {
   });
 
   // TODO: filterDestinations and timezoneFilterFn internal APIs were removed when
-  // q-select was replaced with OSelect. Skipped until OSelect-based tests are written.
+  // the select was replaced with OSelect. Skipped until OSelect-based tests are written.
   describe.skip("2. Filter Functions", () => {
     describe("filterDestinations", () => {
       it("should show all destinations when filter is empty", () => {
diff --git a/web/src/components/alerts/ImportAlert.vue b/web/src/components/alerts/ImportAlert.vue
index b556cbbd48..b37562fa53 100644
--- a/web/src/components/alerts/ImportAlert.vue
+++ b/web/src/components/alerts/ImportAlert.vue
@@ -1,4 +1,4 @@
-<!-- Copyright 2026 OpenObserve Inc.
+<!-- Copyright 2026 OpenObserve Inc.
 
 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU Affero General Public License as published by
@@ -28,7 +28,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <!-- Custom URL Input Section with Folder Dropdown -->
     <template #url-input-section="{ url, updateUrl }">
       <div class="flex items-end gap-2 my-[0.725rem]">
-        <div style="width: calc(69%)">
+        <div class="w-[69%]">
           <OInput
             data-test="alert-import-url-input"
             :model-value="url"
@@ -38,7 +38,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           />
         </div>
 
-        <div style="width: calc(30%)" data-test="alert-folder-dropdown">
+        <div class="w-[30%]" data-test="alert-folder-dropdown">
           <SelectFolderDropDown
             :type="'alerts'"
             @folder-selected="updateActiveFolderId"
@@ -50,8 +50,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     <!-- Custom File Input Section with Folder Dropdown -->
     <template #file-input-section="{ jsonFiles, updateFiles }">
-      <div class="mb-1 flex items-start gap-2" style="width: calc(100% - 10px)">
-        <div style="width: calc(69%)">
+      <div class="mb-1 flex items-start gap-2 w-[calc(100%-0.625rem)]">
+        <div class="w-[69%]">
           <OFile
             data-test="alert-import-json-file-input"
             :model-value="jsonFiles"
@@ -64,7 +64,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             size="md"
           />
         </div>
-        <div style="width: calc(30%)">
+        <div class="w-[30%]">
           <SelectFolderDropDown
             :type="'alerts'"
             @folder-selected="updateActiveFolderId"
@@ -76,14 +76,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     <!-- Output Section with Alert-specific Error Display -->
     <template #output-content>
-      <div class="w-full h-full flex flex-col border-l border-border-default" style="min-width: 400px;">
+      <div class="w-full h-full flex flex-col border-l border-border-default min-w-100">
       <div
         v-if="alertErrorsToDisplay.length > 0"
-        class="text-center text-[0.9375rem] font-semibold text-text-primary py-3 shrink-0"
+        class="text-center text-sm font-semibold text-text-heading py-3 shrink-0"
       >
         Error Validations
       </div>
-      <div v-else class="text-center text-[0.9375rem] font-semibold text-text-primary py-3 shrink-0">Output Messages</div>
+      <div v-else class="text-center text-sm font-semibold text-text-heading py-3 shrink-0">Output Messages</div>
       <OSeparator class="mt-1 shrink-0" />
       <div class="error-report-container flex-1 min-h-0">
         <!-- Alert Errors Section -->
@@ -103,7 +103,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :data-test="`alert-import-error-${index}-${errorIndex}`"
               >
                 <span
-                  class="text-red"
+                  class="text-status-negative"
                   v-if="
                     typeof errorMessage === 'object' &&
                     errorMessage.field == 'alert_name'
@@ -111,7 +111,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 >
                   {{ errorMessage.message }}
 
-                  <div style="width: 300px">
+                  <div class="w-75">
                     <OInput
                       data-test="alert-import-name-input"
                       :model-value="userSelectedAlertName[index] || ''"
@@ -127,14 +127,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </span>
                 <!-- Check if the errorMessage is an object, if so, display the 'message' property -->
                 <span
-                  class="text-red"
+                  class="text-status-negative"
                   v-else-if="
                     typeof errorMessage === 'object' &&
                     errorMessage.field == 'stream_name'
                   "
                 >
                   {{ errorMessage.message }}
-                  <div style="width: 300px">
+                  <div class="w-75">
                     <OSelect
                       data-test="alert-import-stream-name-input"
                       :model-value="userSelectedStreamName[index] || ''"
@@ -151,7 +151,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </div>
                 </span>
                 <span
-                  class="text-red"
+                  class="text-status-negative"
                   v-else-if="
                     typeof errorMessage === 'object' &&
                     errorMessage.field == 'destination_name'
@@ -167,7 +167,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       multiple
                       searchable
                       @search="filterDestinations"
-                      style="width: 300px"
+                      class="w-75!"
                       :error="!userSelectedDestinations[index]?.length"
                       error-message="Field is required!"
                       @update:model-value="(val) => {
@@ -178,7 +178,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </div>
                 </span>
                 <span
-                  class="text-red"
+                  class="text-status-negative"
                   v-else-if="
                     typeof errorMessage === 'object' &&
                     errorMessage.field == 'stream_type'
@@ -191,7 +191,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       :model-value="userSelectedStreamType[index] || ''"
                       :options="streamTypes"
                       :label="t('alerts.streamType') + ' *'"
-                      style="width: 300px"
+                      class="w-75!"
                       :error="!userSelectedStreamType[index]"
                       error-message="Field is required!"
                       @update:model-value="(val) => {
@@ -202,7 +202,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </div>
                 </span>
                 <span
-                  class="text-red"
+                  class="text-status-negative"
                   v-else-if="
                     typeof errorMessage === 'object' &&
                     errorMessage.field == 'timezone'
@@ -217,7 +217,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       label="Timezone *"
                       searchable
                       @search="timezoneFilterFn"
-                      style="width: 300px"
+                      class="w-75!"
                       :error="!userSelectedTimezone[index]"
                       error-message="Field is required!"
                       @update:model-value="(val) => {
@@ -228,14 +228,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </div>
                 </span>
                 <span
-                  class="text-red"
+                  class="text-status-negative"
                   v-else-if="
                     typeof errorMessage === 'object' &&
                     errorMessage.field == 'org_id'
                   "
                 >
                   {{ errorMessage.message }}
-                  <div style="width: 300px">
+                  <div class="w-75">
                     <OSelect
                       data-test="alert-import-org-id-input"
                       :model-value="userSelectedOrgId[index] || null"
@@ -274,7 +274,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :class="{
                 'py-1.25 px-0 text-sm font-bold': true,
                 'text-green ': val.success,
-                'text-red': !val.success,
+                'text-status-negative': !val.success,
               }"
               :data-test="`alert-import-creation-${index}-message`"
             >
diff --git a/web/src/components/alerts/ImportDestination.vue b/web/src/components/alerts/ImportDestination.vue
index 37196eafc8..49b7304e72 100644
--- a/web/src/components/alerts/ImportDestination.vue
+++ b/web/src/components/alerts/ImportDestination.vue
@@ -1,4 +1,4 @@
-<!-- Copyright 2026 OpenObserve Inc.
+<!-- Copyright 2026 OpenObserve Inc.
 
 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU Affero General Public License as published by
@@ -21,21 +21,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     test-prefix="destination"
     :is-importing="isDestinationImporting"
     container-class=""
-    container-style=""
     @back="arrowBackFn"
     @cancel="router.back()"
     @import="importJson"
   >
     <!-- Output Section with Destination-specific Error Display -->
     <template #output-content>
-      <div class="w-full h-full flex flex-col border-l border-border-default" style="min-width: 400px;">
+      <div class="w-full h-full flex flex-col border-l border-border-default min-w-100">
         <div
           v-if="destinationErrorsToDisplay.length > 0 || destinationCreators.length > 0"
-          class="text-center text-[0.9375rem] font-semibold text-text-primary py-3 shrink-0"
+          class="text-center text-sm font-semibold text-text-heading py-3 shrink-0"
         >
           {{ destinationErrorsToDisplay.length > 0 ? t('alert_destinations.import.errorValidations') : t('alert_destinations.import.outputMessages') }}
         </div>
-        <div v-else class="text-center text-[0.9375rem] font-semibold text-text-primary py-3 shrink-0">{{ t('alert_destinations.import.outputMessages') }}</div>
+        <div v-else class="text-center text-sm font-semibold text-text-heading py-3 shrink-0">{{ t('alert_destinations.import.outputMessages') }}</div>
         <OSeparator class="mt-1 shrink-0" />
         <div class="flex-1 min-h-0 overflow-auto [resize:none] w-full min-w-100">
           <!-- Destination Errors Section -->
@@ -59,14 +58,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   <!-- Destination Name Error -->
                   <span
                     data-test="destination-import-name-error"
-                    class="text-red"
+                    class="text-status-negative"
                     v-if="
                       typeof errorMessage === 'object' &&
                       errorMessage.field == 'destination_name'
                     "
                   >
                     {{ errorMessage.message }}
-                    <div style="width: 300px">
+                    <div class="w-75">
                       <OInput
                         data-test="destination-import-name-input"
                         :model-value="userSelectedDestinationName[index] || ''"
@@ -83,14 +82,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
                   <!-- URL Error -->
                   <span
-                    class="text-red"
+                    class="text-status-negative"
                     v-else-if="
                       typeof errorMessage === 'object' &&
                       errorMessage.field == 'url'
                     "
                   >
                     {{ errorMessage.message }}
-                    <div style="width: 300px">
+                    <div class="w-75">
                       <OInput
                         data-test="destination-import-url-input"
                         :model-value="userSelectedDestinationUrl[index] || ''"
@@ -107,14 +106,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
                   <!-- Type Error -->
                   <span
-                    class="text-red"
+                    class="text-status-negative"
                     v-else-if="
                       typeof errorMessage === 'object' &&
                       errorMessage.field == 'type'
                     "
                   >
                     {{ errorMessage.message }}
-                    <div style="width: 300px">
+                    <div class="w-75">
                       <OSelect
                         data-test="destination-import-type-input"
                         :model-value="userSelectedDestinationType[index] || ''"
@@ -131,14 +130,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
                   <!-- Method Error -->
                   <span
-                    class="text-red"
+                    class="text-status-negative"
                     v-else-if="
                       typeof errorMessage === 'object' &&
                       errorMessage.field == 'method'
                     "
                   >
                     {{ errorMessage.message }}
-                    <div style="width: 300px">
+                    <div class="w-75">
                       <OSelect
                         data-test="destination-import-method-input"
                         :model-value="userSelectedDestinationMethod[index] || ''"
@@ -155,7 +154,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
                   <!-- Template Name Error -->
                   <span
-                    class="text-red"
+                    class="text-status-negative"
                     v-else-if="
                       typeof errorMessage === 'object' &&
                       errorMessage.field == 'template_name'
@@ -177,21 +176,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         :error="!!templateErrors[index]"
                         :error-message="templateErrors[index]"
                         @search="filterTemplates"
-                        style="width: 300px"
                       />
                     </div>
                   </span>
 
                   <!-- Email Input Error -->
                   <span
-                    class="text-red"
+                    class="text-status-negative"
                     v-else-if="
                       typeof errorMessage === 'object' &&
                       errorMessage.field == 'email_input'
                     "
                   >
                     {{ errorMessage.message }}
-                    <div style="width: 300px">
+                    <div class="w-75">
                       <OInput
                         data-test="destination-import-emails-input"
                         :model-value="userSelectedEmails[index] || ''"
@@ -208,7 +206,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
                   <!-- Action ID Error -->
                   <span
-                    class="text-red"
+                    class="text-status-negative"
                     v-else-if="
                       typeof errorMessage === 'object' &&
                       errorMessage.field == 'action_id'
@@ -228,25 +226,24 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         :label="t('alert_destinations.import.actions') + ' *'"
                         labelKey="label"
                         valueKey="value"
-                        class="py-2 showLabelOnTop no-case"
+                        class="py-2 showLabelOnTop no-case w-75!"
                         :error="!!actionErrors[index]"
                         :error-message="actionErrors[index]"
                         @search="filterActions"
-                        style="width: 300px"
                       />
                     </div>
                   </span>
 
                   <!-- Skip TLS Verify Error -->
                   <span
-                    class="text-red"
+                    class="text-status-negative"
                     v-else-if="
                       typeof errorMessage === 'object' &&
                       errorMessage.field == 'skip_tls_verify'
                     "
                   >
                     {{ errorMessage.message }}
-                    <div style="width: 300px">
+                    <div class="w-75">
                       <OSwitch
                         data-test="destination-import-skip-tls-verify-input"
                         :model-value="userSelectedSkipTlsVerify[index] ?? false"
@@ -257,7 +254,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     </div>
                   </span>
 
-                  <span class="text-red" v-else>{{ errorMessage }}</span>
+                  <span class="text-status-negative" v-else>{{ errorMessage }}</span>
                 </div>
               </div>
             </div>
@@ -281,7 +278,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :class="{
                   'font-bold py-1.25 px-0 text-sm wrap-break-word': true,
                   'text-green ': val.success,
-                  'text-red': !val.success,
+                  'text-status-negative': !val.success,
                 }"
                 :data-test="`destination-import-creation-${index}-message`"
               >
diff --git a/web/src/components/alerts/ImportSemanticGroups.vue b/web/src/components/alerts/ImportSemanticGroups.vue
index a681733110..3b9f43f837 100644
--- a/web/src/components/alerts/ImportSemanticGroups.vue
+++ b/web/src/components/alerts/ImportSemanticGroups.vue
@@ -21,8 +21,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     test-prefix="semantic-groups"
     :is-importing="isImporting"
     :show-splitter="false"
-    container-class=""
-    container-style="height: calc(100vh - var(--navbar-height));"
+    container-class="h-[calc(100vh-var(--navbar-height))]!"
     @back="handleBack"
     @cancel="handleBack"
     @import="handleImport"
@@ -32,7 +31,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <template #full-width-content>
       <div class="w-full p-2 h-full flex-1 min-h-0 flex flex-col overflow-hidden">
         <!-- Compact Header with File Upload -->
-        <div class="card-container p-2 mb-2">
+        <div class="bg-card-glass-bg p-2 mb-2">
           <div class="flex items-center">
             <div class="w-full col-md-8">
               <OFile
@@ -74,17 +73,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- Diff Preview Section with Scrollable Content -->
         <div v-if="diffData" class="flex flex-col h-full overflow-hidden">
           <!-- Compact Summary Bar -->
-          <div class="card-container p-2 mb-2">
+          <div class="bg-card-glass-bg p-2 mb-2">
             <div class="flex items-center gap-2">
               <div class="col-auto">
                 <OTag type="diffCategory" value="new" class="text-sm!">
-                  <strong class="text-[15px]">{{ diffData.additions.length }}</strong
+                  <strong class="text-sm">{{ diffData.additions.length }}</strong
                   >&nbsp;New
                 </OTag>
               </div>
               <div class="col-auto">
                 <OTag type="diffCategory" value="modified" class="text-sm!">
-                  <strong class="text-[15px]">{{ diffData.modifications.length }}</strong
+                  <strong class="text-sm">{{ diffData.modifications.length }}</strong
                   >&nbsp;Modified
                 </OTag>
               </div>
@@ -116,21 +115,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </div>
 
           <!-- Scrollable Groups Container -->
-          <div class="card-container groups-scroll-container flex-1 overflow-y-auto overflow-x-hidden p-2">
+          <div class="bg-card-glass-bg groups-scroll-container flex-1 overflow-y-auto overflow-x-hidden p-2">
             <!-- Additions -->
             <div v-if="diffData.additions.length > 0" class="mb-2">
-              <div class="text-sm font-semibold border-b border-[var(--color-separator)] mb-1 text-green-500 p-1">
+              <div class="text-sm font-semibold border-b border-separator mb-1 text-status-positive p-1">
                 <OIcon name="add-circle" size="sm" />
                 New ({{ selectedAdditions.length }}/{{
                   diffData.additions.length
                 }})
               </div>
-              <ul class="flex flex-col divide-y divide-border border rounded-md mb-0">
+              <ul class="flex flex-col divide-y divide-border border rounded-default mb-0">
                 <li
                   v-for="group in diffData.additions"
                   :key="group.id"
                   data-test="semantic-groups-addition-item"
-                  class="compact-item flex items-start gap-2 px-2 py-1 min-h-[44px] cursor-pointer hover:bg-muted/50"
+                  class="compact-item flex items-start gap-2 px-2 py-1 min-h-11 cursor-pointer hover:bg-muted/50"
                   @click="toggleAddition(group.id)"
                 >
                   <div class="flex items-start shrink-0 pt-1">
@@ -140,8 +139,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     />
                   </div>
                   <div class="flex flex-col flex-1 min-w-0 px-2">
-                    <span class="text-[13px] font-medium">{{ group.display }}</span>
-                    <span class="block text-[11px] text-muted-foreground truncate">
+                    <span class="text-compact font-medium">{{ group.display }}</span>
+                    <span class="block text-2xs text-muted-foreground truncate">
                       {{ group.id }} • {{ group.fields.length }} fields
                       <OTag v-if="group.normalize" type="normalizeState" value="true" class="ml-1" />
                     </span>
@@ -161,18 +160,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
             <!-- Modifications -->
             <div v-if="diffData.modifications.length > 0" class="mb-2">
-              <div class="text-sm font-semibold border-b border-[var(--color-separator)] mb-1 text-amber-500 p-1">
+              <div class="text-sm font-semibold border-b border-separator mb-1 text-status-warning-text p-1">
                 <OIcon name="edit" size="sm" />
                 Modified ({{ selectedModifications.length }}/{{
                   diffData.modifications.length
                 }})
               </div>
-              <ul class="flex flex-col divide-y divide-border border rounded-md mb-0">
+              <ul class="flex flex-col divide-y divide-border border rounded-default mb-0">
                 <li
                   v-for="mod in diffData.modifications"
                   :key="mod.proposed.id"
                   data-test="semantic-groups-modification-item"
-                  class="compact-item flex items-start gap-2 px-2 py-1 min-h-[44px] cursor-pointer hover:bg-muted/50"
+                  class="compact-item flex items-start gap-2 px-2 py-1 min-h-11 cursor-pointer hover:bg-muted/50"
                   @click="toggleModification(mod.proposed.id)"
                 >
                   <div class="flex items-start shrink-0 pt-1">
@@ -184,8 +183,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     />
                   </div>
                   <div class="flex flex-col flex-1 min-w-0 px-2">
-                    <span class="text-[13px] font-medium">{{ mod.proposed.display }}</span>
-                    <span class="block text-[11px] text-muted-foreground truncate">
+                    <span class="text-compact font-medium">{{ mod.proposed.display }}</span>
+                    <span class="block text-2xs text-muted-foreground truncate">
                       {{ mod.proposed.id }} • {{ mod.current.fields.length }} → {{ mod.proposed.fields.length }} fields
                     </span>
                   </div>
@@ -209,15 +208,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :label="`Unchanged (${diffData.unchanged.length})`"
                 icon="check-circle"
               >
-                <ul class="flex flex-col divide-y divide-border border rounded-md mb-0">
+                <ul class="flex flex-col divide-y divide-border border rounded-default mb-0">
                   <li
                     v-for="group in diffData.unchanged"
                     :key="group.id"
-                    class="compact-item flex items-center gap-2 px-2 py-1 min-h-[44px]"
+                    class="compact-item flex items-center gap-2 px-2 py-1 min-h-11"
                   >
                     <div class="flex flex-col flex-1 min-w-0 px-2">
-                      <span class="text-[13px]">{{ group.display }}</span>
-                      <span class="block text-[11px] text-muted-foreground">{{ group.id }} • {{ group.fields.length }} fields</span>
+                      <span class="text-compact">{{ group.display }}</span>
+                      <span class="block text-2xs text-muted-foreground">{{ group.id }} • {{ group.fields.length }} fields</span>
                     </div>
                   </li>
                 </ul>
@@ -229,13 +228,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- No Diff State -->
         <div
           v-else-if="!isImporting && !diffData"
-          class="card-container p-4 text-center"
+          class="bg-card-glass-bg p-4 text-center"
         >
-          <OIcon name="cloud-upload" class="mb-3" style="width: 64px; height: 64px;" />
-          <div class="text-xl font-semibold text-gray-400 mb-2">
+          <OIcon name="cloud-upload" class="mb-3 size-16!" />
+          <div class="text-xl font-semibold text-text-muted mb-2">
             Upload a JSON file to get started
           </div>
-          <div class="text-sm text-gray-400">
+          <div class="text-sm text-text-secondary">
             The system will analyze the file and show you what will change
           </div>
         </div>
@@ -284,11 +283,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   >
     <div class="flex gap-3">
       <div class="w-1/2">
-        <div class="text-sm font-medium text-red-500 mb-2">Current</div>
+        <div class="text-sm font-medium text-status-error-text mb-2">Current</div>
         <div class="text-xs mb-1">
           {{ selectedModification?.current.fields.length }} fields
         </div>
-        <div class="field-chips-container max-h-[250px] overflow-y-auto p-2 bg-[var(--o2-primary-background)] rounded">
+        <div class="field-chips-container max-h-62.5 overflow-y-auto p-2 bg-surface-base rounded-default">
           <OTag
             v-for="field in selectedModification?.current.fields"
             :key="`current-${field}`"
@@ -301,11 +300,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
       </div>
       <div class="w-1/2">
-        <div class="text-sm font-medium text-green-500 mb-2">Proposed</div>
+        <div class="text-sm font-medium text-status-positive mb-2">Proposed</div>
         <div class="text-xs mb-1">
           {{ selectedModification?.proposed.fields.length }} fields
         </div>
-        <div class="field-chips-container max-h-[250px] overflow-y-auto p-2 bg-[var(--o2-primary-background)] rounded">
+        <div class="field-chips-container max-h-62.5 overflow-y-auto p-2 bg-surface-base rounded-default">
           <OTag
             v-for="field in selectedModification?.proposed.fields"
             :key="`proposed-${field}`"
@@ -576,35 +575,35 @@ const handleJsonUpdate = async (jsonArray: any[]) => {
 };
 </script>
 
-<style>
+<style scoped>
+/* keep(scrollbar): ::-webkit-scrollbar pseudo-elements aren't expressible as utilities */
 .groups-scroll-container::-webkit-scrollbar {
-  width: 8px;
+  width: 0.5rem;
 }
 
 .groups-scroll-container::-webkit-scrollbar-track {
-  background: var(--o2-primary-background);
+  background: var(--color-surface-base);
 }
 
 .groups-scroll-container::-webkit-scrollbar-thumb {
-  background: var(--o2-primary-color);
-  border-radius: 4px;
+  background: var(--color-accent);
+  border-radius: 0.25rem;
 }
 
 .groups-scroll-container::-webkit-scrollbar-thumb:hover {
-  background: var(--o2-primary-dark, var(--o2-primary-color));
+  background: var(--color-accent);
 }
 
 .field-chips-container::-webkit-scrollbar {
-  width: 6px;
+  width: 0.375rem;
 }
 
 .field-chips-container::-webkit-scrollbar-track {
-  background: var(--o2-primary-background);
+  background: var(--color-surface-base);
 }
 
 .field-chips-container::-webkit-scrollbar-thumb {
-  background: var(--o2-primary-color);
-  border-radius: 3px;
+  background: var(--color-accent);
+  border-radius: 0.1875rem;
 }
-
 </style>
diff --git a/web/src/components/alerts/ImportSemanticGroupsDrawer.vue b/web/src/components/alerts/ImportSemanticGroupsDrawer.vue
index e50db03be6..c31a916cc6 100644
--- a/web/src/components/alerts/ImportSemanticGroupsDrawer.vue
+++ b/web/src/components/alerts/ImportSemanticGroupsDrawer.vue
@@ -29,7 +29,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     @click:primary="handleApply"
     @update:open="handleOpenChange"
   >
-  <div class="p-3">
+  <div>
       <!-- File Upload -->
       <div class="mb-3">
         <OFile
@@ -57,7 +57,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <!-- Loading State -->
       <div v-if="isLoading" class="text-center p-4">
         <OSpinner variant="dots" size="lg" />
-        <div class="text-sm text-gray-400 mt-3">Analyzing file...</div>
+        <div class="text-sm text-text-muted mt-3">Analyzing file...</div>
       </div>
 
       <!-- Diff Preview -->
@@ -110,13 +110,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <div class="max-h-[calc(100vh-400px)] overflow-y-auto">
           <!-- Additions -->
           <div v-if="diffData.additions.length > 0" class="mb-3">
-            <div class="text-sm font-semibold border-b border-[var(--color-separator)] text-green-500 p-2">
+            <div class="text-sm font-semibold border-b border-separator text-status-positive p-2">
               <OIcon name="add-circle" size="sm" />
               New ({{ selectedAdditions.length }}/{{
                 diffData.additions.length
               }})
             </div>
-            <ul class="flex flex-col divide-y divide-border border rounded-md">
+            <ul class="flex flex-col divide-y divide-border border rounded-default">
               <li
                 v-for="group in diffData.additions"
                 :key="group.id"
@@ -153,13 +153,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
           <!-- Modifications -->
           <div v-if="diffData.modifications.length > 0" class="mb-3">
-            <div class="text-sm font-semibold border-b border-[var(--color-separator)] text-amber-500 p-2">
+            <div class="text-sm font-semibold border-b border-separator text-status-warning-text p-2">
               <OIcon name="edit" size="sm" />
               Modified ({{ selectedModifications.length }}/{{
                 diffData.modifications.length
               }})
             </div>
-            <ul class="flex flex-col divide-y divide-border border rounded-md">
+            <ul class="flex flex-col divide-y divide-border border rounded-default">
               <li
                 v-for="mod in diffData.modifications"
                 :key="mod.proposed.id"
@@ -204,7 +204,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :label="`Unchanged (${diffData.unchanged.length})`"
               icon="check-circle"
             >
-              <ul class="flex flex-col divide-y divide-border border rounded-md">
+              <ul class="flex flex-col divide-y divide-border border rounded-default">
                 <li
                   v-for="group in diffData.unchanged"
                   :key="group.id"
@@ -226,9 +226,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
       <!-- Empty State -->
       <div v-else class="empty-state text-center p-4">
-        <OIcon name="cloud-upload" class="mb-3" style="width: 64px; height: 64px;" />
-        <div class="text-xl font-semibold text-gray-400 mb-2">Upload a JSON file</div>
-        <div class="text-sm text-gray-400">
+        <OIcon name="cloud-upload" class="mb-3 size-16!" />
+        <div class="text-xl font-semibold text-text-muted mb-2">Upload a JSON file</div>
+        <div class="text-sm text-text-secondary">
           The system will analyze the file and show you what will change
         </div>
       </div>
@@ -273,11 +273,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   >
     <div class="flex gap-3">
       <div class="w-1/2">
-        <div class="text-sm font-medium text-red-500 mb-2">Current</div>
+        <div class="text-sm font-medium text-status-error-text mb-2">Current</div>
         <div class="text-xs mb-1">
           {{ selectedModification?.current.fields.length }} fields
         </div>
-        <div class="max-h-[250px] overflow-y-auto p-2 bg-[var(--q-dark)] rounded">
+        <div class="max-h-62.5 overflow-y-auto p-2 bg-surface-subtle rounded-default">
           <OTag
             v-for="field in selectedModification?.current.fields"
             :key="`current-${field}`"
@@ -290,11 +290,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
       </div>
       <div class="w-1/2">
-        <div class="text-sm font-medium text-green-500 mb-2">Proposed</div>
+        <div class="text-sm font-medium text-status-positive mb-2">Proposed</div>
         <div class="text-xs mb-1">
           {{ selectedModification?.proposed.fields.length }} fields
         </div>
-        <div class="max-h-[250px] overflow-y-auto p-2 bg-[var(--q-dark)] rounded">
+        <div class="max-h-62.5 overflow-y-auto p-2 bg-surface-subtle rounded-default">
           <OTag
             v-for="field in selectedModification?.proposed.fields"
             :key="`proposed-${field}`"
diff --git a/web/src/components/alerts/ImportTemplate.vue b/web/src/components/alerts/ImportTemplate.vue
index 07241f2ea2..058f0ca612 100644
--- a/web/src/components/alerts/ImportTemplate.vue
+++ b/web/src/components/alerts/ImportTemplate.vue
@@ -1,4 +1,4 @@
-<!-- Copyright 2026 OpenObserve Inc.
+<!-- Copyright 2026 OpenObserve Inc.
 
 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU Affero General Public License as published by
@@ -21,23 +21,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     test-prefix="template"
     :is-importing="isTemplateImporting"
     container-class=""
-    container-style=""
     @back="arrowBackFn"
     @cancel="router.back()"
     @import="importJson"
   >
     <!-- Output Section with Template-specific Error Display -->
     <template #output-content>
-      <div class="w-full h-full flex flex-col border-l border-border-default" style="min-width: 400px;">
+      <div class="w-full h-full flex flex-col border-l border-border-default min-w-100">
         <div
           v-if="templateErrorsToDisplay.length > 0 || tempalteCreators.length > 0"
-          class="text-center text-[0.9375rem] font-semibold text-text-primary py-3 shrink-0"
+          class="text-center text-sm font-semibold text-text-heading py-3 shrink-0"
         >
           {{ templateErrorsToDisplay.length > 0 ? 'Error Validations' : 'Output Messages' }}
         </div>
-        <div v-else class="text-center text-[0.9375rem] font-semibold text-text-primary py-3 shrink-0">Output Messages</div>
+        <div v-else class="text-center text-sm font-semibold text-text-heading py-3 shrink-0">Output Messages</div>
         <OSeparator class="mt-1 shrink-0" />
-        <div class="flex-1 min-h-0 overflow-auto [resize:none] w-full min-w-[400px]">
+        <div class="flex-1 min-h-0 overflow-auto [resize:none] w-full min-w-100">
         <!-- Template Errors Section -->
         <div
           class="error-section p-2.5 mb-2.5"
@@ -58,14 +57,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :data-test="`template-import-error-${index}-${errorIndex}`"
               >
                 <span
-                  class="text-red"
+                  class="text-status-negative"
                   v-if="
                     typeof errorMessage === 'object' &&
                     errorMessage.field == 'template_name'
                   "
                 >
                   {{ errorMessage.message }}
-                  <div style="width: 300px">
+                  <div class="w-75">
                     <OInput
                       data-test="template-import-name-input"
                       :model-value="userSelectedTemplateNames[index] || ''"
@@ -80,14 +79,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </div>
                 </span>
                 <span
-                  class="text-red"
+                  class="text-status-negative"
                   v-else-if="
                     typeof errorMessage === 'object' &&
                     errorMessage.field == 'body'
                   "
                 >
                   {{ errorMessage.message }}
-                  <div style="width: 300px">
+                  <div class="w-75">
                     <OInput
                       data-test="template-import-body-input"
                       :model-value="userSelectedTemplateBodies[index] || ''"
@@ -103,14 +102,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </span>
                 <!-- Check if the errorMessage is an object, if so, display the 'message' property -->
                 <span
-                  class="text-red"
+                  class="text-status-negative"
                   v-else-if="
                     typeof errorMessage === 'object' &&
                     errorMessage.field == 'type'
                   "
                 >
                   {{ errorMessage.message }}
-                  <div style="width: 300px">
+                  <div class="w-75">
                     <OSelect
                       data-test="template-import-type-input"
                       :model-value="userSelectedTemplateTypes[index] || ''"
@@ -125,14 +124,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </div>
                 </span>
                 <span
-                  class="text-red"
+                  class="text-status-negative"
                   v-else-if="
                     typeof errorMessage === 'object' &&
                     errorMessage.field == 'title'
                   "
                 >
                   {{ errorMessage.message }}
-                  <div style="width: 300px">
+                  <div class="w-75">
                     <OInput
                       data-test="template-import-title-input"
                       :model-value="userSelectedTemplateTitles[index] || ''"
@@ -146,7 +145,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     />
                   </div>
                 </span>
-                <span class="text-red" v-else>{{ errorMessage }}</span>
+                <span class="text-status-negative" v-else>{{ errorMessage }}</span>
               </div>
             </div>
           </div>
@@ -169,7 +168,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :class="{
                 'error-item py-1.25 px-0 text-sm wrap-break-word font-bold': true,
                 'text-green ': val.success,
-                'text-red': !val.success,
+                'text-status-negative': !val.success,
               }"
               :data-test="`template-import-creation-${index}-message`"
             >
diff --git a/web/src/components/alerts/IncidentAlertTriggersTable.vue b/web/src/components/alerts/IncidentAlertTriggersTable.vue
index 58e3cd4b13..9fd23771eb 100644
--- a/web/src/components/alerts/IncidentAlertTriggersTable.vue
+++ b/web/src/components/alerts/IncidentAlertTriggersTable.vue
@@ -34,14 +34,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     >
       <template #empty>
         <div data-test="no-triggers-message" class="text-center py-8">
-          <span :class="isDarkMode ? 'text-gray-500' : 'text-gray-400'" class="text-sm">
+          <span class="text-sm text-text-secondary">
             No triggers loaded
           </span>
         </div>
       </template>
 
       <template #cell-alert_name="{ row }">
-        <span data-test="alert-name-text" :class="isDarkMode ? 'text-gray-200' : 'text-gray-800'" class="text-xs font-medium">
+        <span data-test="alert-name-text" class="text-xs font-medium text-text-body">
           {{ row.alert_name }}
         </span>
       </template>
@@ -173,9 +173,3 @@ export default defineComponent({
   },
 });
 </script>
-
-<style>
-.o2-table tbody tr {
-  cursor: pointer;
-}
-</style>
diff --git a/web/src/components/alerts/IncidentDetailDrawer.spec.ts b/web/src/components/alerts/IncidentDetailDrawer.spec.ts
index 1d26c3f393..3b579344f7 100644
--- a/web/src/components/alerts/IncidentDetailDrawer.spec.ts
+++ b/web/src/components/alerts/IncidentDetailDrawer.spec.ts
@@ -699,7 +699,10 @@ describe("IncidentDetailDrawer.vue", () => {
 
       expect(formatted).toContain("font-bold");
       expect(formatted).toContain("text-lg");
-      expect(formatted).toContain("text-blue-600");
+      // Colour comes from the `:deep(.rca-report-content) .rca-h2` rule in
+      // IncidentRCAAnalysis.vue (unlayered, so it beat the old text-blue-600
+      // utility anyway) — the hook class is what this renderer must emit.
+      expect(formatted).toContain("rca-h2");
     });
 
     it("should format h3 headers", () => {
diff --git a/web/src/components/alerts/IncidentDetailDrawer.vue b/web/src/components/alerts/IncidentDetailDrawer.vue
index 0b70946401..55bc42ebeb 100644
--- a/web/src/components/alerts/IncidentDetailDrawer.vue
+++ b/web/src/components/alerts/IncidentDetailDrawer.vue
@@ -15,33 +15,26 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="rounded-md p-0" data-test="incident-detail-page">
-    <div class="w-full h-full flex flex-col">
-    <!-- Header — shared AppPageHeader: back button in the icon-tile spot, the
-         incident name as the title (with its status badges trailing), and the
-         section label "Incident" as the muted subtitle. -->
-    <AppPageHeader
+  <div class="rounded-default p-0" data-test="incident-detail-page">
+    <OPageLayout
       :back="{
         onClick: close,
         label: t('alerts.incidents.goBack'),
         dataTest: 'incident-detail-back-btn',
       }"
       :subtitle="t('alerts.incidents.incident')"
-      class="shrink-0 px-4 border-b border-border-default"
+      bleed
     >
       <template #title>
         <!-- Incident name (inline-editable) -->
-        <input
+        <input class="min-w-75 max-w-125"
           v-if="incidentDetails && isEditingTitle"
           v-model="editableTitle"
           ref="titleInputRef"
           :class="[
-            'font-bold px-2 py-1 rounded-md outline-none border-2',
-            store.state.theme === 'dark'
-              ? 'text-blue-400 bg-blue-900/50 border-blue-500'
-              : 'text-blue-600 bg-blue-50 border-blue-400'
+            'font-bold px-2 py-1 rounded-default outline-none border-2',
+            'text-text-link bg-status-info-bg border-text-link'
           ]"
-          style="min-width: 300px; max-width: 500px;"
         />
         <span
           v-else-if="incidentDetails"
@@ -121,11 +114,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           ><OIcon name="edit" size="sm"/>{{ t("alerts.edit") }}<OTooltip :delay="500" :content="t('alerts.incidents.editIncidentTitleTooltip')" /></OButton>
         </template>
       </template>
-    </AppPageHeader>
 
     <!-- Content -->
-    <div v-if="!loading && incidentDetails" class="card-container flex flex-col overflow-hidden flex-1 min-h-0">
-      <div class="flex-shrink-0 px-2 border-b border-border-default">
+    <div v-if="!loading && incidentDetails" class="bg-card-glass-bg flex flex-col overflow-hidden flex-1 min-h-0">
+      <div class="flex-shrink-0 px-page-edge border-b border-border-default">
         <OTabs
           v-model="activeTab"
           align="left"
@@ -187,7 +179,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <!-- Tab Content Container -->
       <div class="flex flex-1 overflow-hidden">
       <!-- Left Column: Incident Details (only show on Incident Analysis tab, HIDDEN for Overview) -->
-      <div v-if="activeTab === 'incidentAnalysis'" class="w-[400px] min-w-[400px] max-w-[400px] flex-shrink-0 flex flex-col h-full" style="order: 1;">
+      <div v-if="activeTab === 'incidentAnalysis'" class="w-100 min-w-100 max-w-100 flex-shrink-0 flex flex-col h-full order-1">
 
         <!-- Table of Contents (only on Incident Analysis) -->
         <IncidentTableOfContents
@@ -200,90 +192,90 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </div>
 
       <!-- Right Column: Content -->
-      <div class="flex-1 min-w-0 flex flex-col overflow-hidden" style="order: 2;">
+      <div class="flex-1 min-w-0 flex flex-col overflow-hidden order-2">
         <!-- Tab Content Area -->
-        <div class="flex-1 flex flex-col px-2 pt-4 pb-2 overflow-hidden relative">
+        <div class="flex-1 flex flex-col px-page-edge pt-4 pb-2 overflow-hidden relative">
 
         <!-- Overview Tab Content - REDESIGNED -->
         <div v-if="activeTab === 'overview'" class="flex flex-col flex-1 overflow-hidden">
           <!-- SECTION 1: Hero Metrics (100px height) -->
-          <div class="flex gap-3 mb-3" style="height: 100px;">
+          <div class="flex gap-3 mb-3 h-25">
             <!-- 1. Total Alerts Card -->
             <div
-              class="flex-1 flex flex-col justify-between el-border el-border-radius bg-(--o2-card-bg) transition-all duration-200 cursor-pointer p-3"
+              class="flex-1 flex flex-col justify-between border border-card-glass-border rounded-default bg-card-glass-bg transition-all duration-200 cursor-pointer p-3"
             >
               <!-- Top: Title and Icon -->
               <div class="flex justify-between items-start">
                 <div :class="'text-text-secondary'" class="text-sm font-medium">
                   Total Alerts
                 </div>
-                <div class="w-8 h-8 rounded-lg flex items-center justify-center" :class="store.state.theme === 'dark' ? 'bg-amber-500/10' : 'bg-amber-50'">
-                  <OIcon name="bolt" size="sm" :class="store.state.theme === 'dark' ? 'text-amber-400' : 'text-amber-600'" style="font-size: 20px;" />
+                <div class="w-8 h-8 rounded-default flex items-center justify-center bg-badge-amber-soft-bg">
+                  <OIcon name="bolt" size="sm" class="text-badge-amber-soft-text" />
                 </div>
               </div>
 
               <!-- Bottom: Large Number -->
-              <div :class="'text-text-primary'" class="text-3xl font-semibold leading-none">
+              <div :class="'text-text-body'" class="text-3xl font-semibold leading-none">
                 {{ triggers.length }}
               </div>
             </div>
 
             <!-- 2. Unique Alerts Card -->
             <div
-              class="flex-1 flex flex-col justify-between el-border el-border-radius bg-(--o2-card-bg) transition-all duration-200 cursor-pointer p-3"
+              class="flex-1 flex flex-col justify-between border border-card-glass-border rounded-default bg-card-glass-bg transition-all duration-200 cursor-pointer p-3"
             >
               <!-- Top: Title and Icon -->
               <div class="flex justify-between items-start">
                 <div :class="'text-text-secondary'" class="text-sm font-medium">
                   {{ t('alerts.incidents.uniqueAlerts') }}
                 </div>
-                <div class="w-8 h-8 rounded-lg flex items-center justify-center" :class="store.state.theme === 'dark' ? 'bg-blue-500/10' : 'bg-blue-50'">
-                  <OIcon name="notifications-active" size="sm" :class="store.state.theme === 'dark' ? 'text-blue-400' : 'text-blue-600'" style="font-size: 20px;" />
+                <div class="w-8 h-8 rounded-default flex items-center justify-center bg-badge-blue-soft-bg">
+                  <OIcon name="notifications-active" size="sm" class="text-badge-blue-soft-text" />
                 </div>
               </div>
 
               <!-- Bottom: Large Number -->
-              <div :class="'text-text-primary'" class="text-3xl font-semibold leading-none">
+              <div :class="'text-text-body'" class="text-3xl font-semibold leading-none">
                 {{ uniqueAlertsCount }}
               </div>
             </div>
 
             <!-- 3. Affected Services Card -->
             <div
-              class="flex-1 flex flex-col justify-between el-border el-border-radius bg-(--o2-card-bg) transition-all duration-200 cursor-pointer p-3"
+              class="flex-1 flex flex-col justify-between border border-card-glass-border rounded-default bg-card-glass-bg transition-all duration-200 cursor-pointer p-3"
             >
               <!-- Top: Title and Icon -->
               <div class="flex justify-between items-start">
                 <div :class="'text-text-secondary'" class="text-sm font-medium">
                   Affected Services
                 </div>
-                <div class="w-8 h-8 rounded-lg flex items-center justify-center" :class="store.state.theme === 'dark' ? 'bg-purple-500/10' : 'bg-purple-50'">
-                  <OIcon name="dns" size="sm" :class="store.state.theme === 'dark' ? 'text-purple-400' : 'text-purple-600'" style="font-size: 20px;" />
+                <div class="w-8 h-8 rounded-default flex items-center justify-center bg-badge-purple-soft-bg">
+                  <OIcon name="dns" size="sm" class="text-badge-purple-soft-text" />
                 </div>
               </div>
 
               <!-- Bottom: Large Number -->
-              <div :class="'text-text-primary'" class="text-3xl font-semibold leading-none">
+              <div :class="'text-text-body'" class="text-3xl font-semibold leading-none">
                 {{ affectedServicesCount }}
               </div>
             </div>
 
             <!-- 4. Active Duration Card -->
             <div
-              class="flex-1 flex flex-col justify-between el-border el-border-radius bg-(--o2-card-bg) transition-all duration-200 cursor-pointer p-3"
+              class="flex-1 flex flex-col justify-between border border-card-glass-border rounded-default bg-card-glass-bg transition-all duration-200 cursor-pointer p-3"
             >
               <!-- Top: Title and Icon -->
               <div class="flex justify-between items-start">
                 <div :class="'text-text-secondary'" class="text-sm font-medium">
                   Active Duration
                 </div>
-                <div class="w-8 h-8 rounded-lg flex items-center justify-center" :class="store.state.theme === 'dark' ? 'bg-green-500/10' : 'bg-green-50'">
-                  <OIcon name="schedule" size="sm" :class="store.state.theme === 'dark' ? 'text-green-400' : 'text-green-600'" style="font-size: 20px;" />
+                <div class="w-8 h-8 rounded-default flex items-center justify-center bg-badge-success-soft-bg">
+                  <OIcon name="schedule" size="sm" class="text-badge-success-soft-text" />
                 </div>
               </div>
 
               <!-- Bottom: Large Number -->
-              <div :class="'text-text-primary'" class="text-2xl font-semibold leading-none">
+              <div :class="'text-text-body'" class="text-2xl font-semibold leading-none">
                 {{ incidentDetails?.first_alert_at && incidentDetails?.last_alert_at
                    ? calculateDuration(incidentDetails.first_alert_at, incidentDetails.last_alert_at)
                    : 'N/A' }}
@@ -292,49 +284,42 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
             <!-- 5. Alert Frequency Card -->
             <div
-              class="flex-1 flex flex-col justify-between el-border el-border-radius bg-(--o2-card-bg) transition-all duration-200 cursor-pointer p-3"
+              class="flex-1 flex flex-col justify-between border border-card-glass-border rounded-default bg-card-glass-bg transition-all duration-200 cursor-pointer p-3"
             >
               <!-- Top: Title and Icon -->
               <div class="flex justify-between items-start">
                 <div :class="'text-text-secondary'" class="text-sm font-medium">
                   Alert Frequency
                 </div>
-                <div class="w-8 h-8 rounded-lg flex items-center justify-center" :class="store.state.theme === 'dark' ? 'bg-rose-500/10' : 'bg-rose-50'">
-                  <OIcon name="show-chart" size="sm" :class="store.state.theme === 'dark' ? 'text-rose-400' : 'text-rose-600'" style="font-size: 20px;" />
+                <div class="w-8 h-8 rounded-default flex items-center justify-center bg-badge-error-soft-bg">
+                  <OIcon name="show-chart" size="sm" class="text-badge-error-soft-text" />
                 </div>
               </div>
 
               <!-- Bottom: Large Text -->
-              <div :class="'text-text-primary'" class="text-lg font-semibold leading-tight">
+              <div :class="'text-text-body'" class="text-lg font-semibold leading-tight">
                 {{ alertFrequency }}
               </div>
             </div>
           </div>
 
           <!-- SECTION 2: Main Content (2:1 Ratio Layout) with calc(100vh - 236px) height (was 276px) -->
-          <div class="flex gap-3 flex-1" style="height: calc(100vh - 380px);">
+          <div class="flex gap-3 flex-1 h-[calc(100vh-23.75rem)]">
             <!-- PART 1: Primary Content (66.67% width) -->
-            <div class="flex flex-col gap-3" style="width: 66.67%;">
+            <div class="flex flex-col gap-3 w-2/3">
                 <!-- 2.1A: Top Row - Incident Details (2/3) + Incident Timeline (1/3) -->
-              <div class="flex gap-3" style="height: 50%;">
+              <div class="flex gap-3 h-1/2">
                                <!-- Incident Timeline (33.33% width) -->
                 <div
-                  class="el-border el-border-radius bg-(--o2-card-bg) flex flex-col overflow-hidden"
-                  :style="{
-                    width: '33.33%'
-                  }"
+                  class="border border-card-glass-border rounded-default bg-card-glass-bg flex flex-col overflow-hidden w-1/3"
                 >
                   <!-- Header -->
                   <div class="flex items-center justify-between px-4 py-3">
-                    <div :class="'text-text-primary'" class="text-sm font-semibold">
+                    <div :class="'text-text-heading'" class="text-sm font-semibold">
                       {{ t('alerts.incidents.incidentTimeline') }}
                     </div>
                     <div
-                      class="px-2 py-0.5 rounded text-xs font-medium"
-                      :style="{
-                        backgroundColor: 'var(--color-surface-panel)',
-                        color: store.state.theme === 'dark' ? '#9CA3AF' : '#6B7280'
-                      }"
+                      class="px-2 py-0.5 rounded-default text-xs font-medium bg-surface-panel text-text-secondary"
                     >
                       UTC
                     </div>
@@ -344,25 +329,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   <div class="flex flex-col gap-6 px-4 py-2 overflow-y-auto relative">
                     <!-- Vertical line -->
                     <div
-                      class="absolute w-0.5"
-                      :style="{
-                        left: '21px',
-                        top: '21px',
-                        bottom: '21px',
-                        backgroundColor: 'var(--color-surface-panel)'
-                      }"
+                      class="absolute w-0.5 left-5.25 top-5.25 bottom-5.25 bg-surface-panel"
                     ></div>
 
                     <!-- First Alert Received -->
                     <div class="flex items-start gap-3 relative">
                       <div
-                        class="w-2.5 h-2.5 rounded-full flex-shrink-0 z-10 mt-2"
-                        :style="{
-                          backgroundColor: '#10B981'
-                        }"
+                        class="w-2.5 h-2.5 rounded-full flex-shrink-0 z-10 mt-2 bg-timeline-dot-success"
                       ></div>
                       <div class="flex-1">
-                        <div :class="'text-text-primary'" class="text-sm font-medium mb-1">
+                        <div :class="'text-text-heading'" class="text-sm font-medium mb-1">
                           First Alert Received
                         </div>
                         <div :class="'text-text-secondary'" class="text-xs">
@@ -376,13 +352,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <!-- Peak Activity (if available) -->
                     <div v-if="peakActivity" class="flex items-start gap-3 relative">
                       <div
-                        class="w-2.5 h-2.5 rounded-full flex-shrink-0 z-10 mt-2"
-                        :style="{
-                          backgroundColor: '#F59E0B'
-                        }"
+                        class="w-2.5 h-2.5 rounded-full flex-shrink-0 z-10 mt-2 bg-status-warning-text"
                       ></div>
                       <div class="flex-1">
-                        <div :class="'text-text-primary'" class="text-sm font-medium mb-1">
+                        <div :class="'text-text-heading'" class="text-sm font-medium mb-1">
                           Peak Activity
                         </div>
                         <div :class="'text-text-secondary'" class="text-xs">
@@ -397,12 +370,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <div class="flex items-start gap-3 relative">
                       <div
                         class="w-2.5 h-2.5 rounded-full flex-shrink-0 z-10 mt-2"
-                        :style="{
-                          backgroundColor: incidentDetails?.status === 'resolved' ? '#10B981' : '#EF4444'
-                        }"
+                        :class="incidentDetails?.status === 'resolved' ? 'bg-timeline-dot-success' : 'bg-timeline-dot-destructive'"
                       ></div>
                       <div class="flex-1">
-                        <div :class="'text-text-primary'" class="text-sm font-medium mb-1">
+                        <div :class="'text-text-heading'" class="text-sm font-medium mb-1">
                           Latest Alert
                         </div>
                         <div :class="'text-text-secondary'" class="text-xs">
@@ -415,7 +386,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </div>
 
                   <!-- Show Full Activity Button -->
-                  <div class="border-t border-gray-200 dark:border-gray-700 p-2 flex justify-end">
+                  <div class="border-t border-border-default p-2 flex justify-end">
                     <OButton
                       variant="ghost-primary"
                       size="sm"
@@ -426,14 +397,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </div>
                 <!-- Incident Details (66.67% width) -->
                 <div
-                  class="el-border el-border-radius bg-(--o2-card-bg) flex flex-col overflow-hidden"
-                  :style="{
-                    width: '66.67%'
-                  }"
+                  class="border border-card-glass-border rounded-default bg-card-glass-bg flex flex-col overflow-hidden w-2/3"
                 >
                   <!-- Header -->
                   <div class="px-4 pt-2 pb-1">
-                    <div :class="'text-text-primary'" class="text-sm font-semibold">
+                    <div :class="'text-text-heading'" class="text-sm font-semibold">
                       {{ t('alerts.incidents.incidentDetails') }}
                     </div>
                   </div>
@@ -441,93 +409,75 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   <!-- Content -->
                   <div class="flex flex-col gap-3 p-4 overflow-y-auto">
                     <!-- Incident ID -->
-                    <div class="grid gap-2" style="grid-template-columns: 120px 1fr;">
+                    <div class="grid gap-2 grid-cols-[7.5rem_1fr]">
                       <div :class="'text-text-secondary'" class="text-xs font-medium">
                         {{ t('alerts.incidents.incidentId') }}
                       </div>
                       <div
-                        class="flex items-center gap-2 px-2.5 py-1 rounded border text-xs font-mono min-w-0"
-                        :style="{
-                          backgroundColor: 'var(--color-surface-panel)',
-                          borderColor: store.state.theme === 'dark' ? '#444444' : '#E7EAEE',
-                          color: store.state.theme === 'dark' ? '#E5E7EB' : '#374151'
-                        }"
+                        class="flex items-center gap-2 px-2.5 py-1 rounded-default border text-xs font-mono min-w-0 bg-surface-panel border-border-default text-text-body"
                       >
                         <span class="truncate flex-1 min-w-0">{{ incidentDetails?.id || 'N/A' }}</span>
                         <OIcon
                           :name="copiedField === 'incident_id' ? 'check' : 'content-copy'" size="sm"
-                          :class="copiedField === 'incident_id' ? 'text-green-500' : 'opacity-60 hover:opacity-100 hover:text-blue-500'"
+                          :class="copiedField === 'incident_id' ? 'text-status-positive' : 'opacity-60 hover:opacity-100 hover:text-text-link'"
                           class="cursor-pointer transition-all flex-shrink-0"
-                          style="font-size: 14px; cursor: pointer;"
                           @click="copyToClipboard(incidentDetails?.id, 'incident_id')"
                         />
                       </div>
                     </div>
 
                     <!-- Incident Name -->
-                    <div class="grid gap-2" style="grid-template-columns: 120px 1fr;">
+                    <div class="grid gap-2 grid-cols-[7.5rem_1fr]">
                       <div :class="'text-text-secondary'" class="text-xs font-medium">
                         {{ t('alerts.incidents.incidentName') }}
                       </div>
                       <div
-                        class="flex items-center gap-2 px-2.5 py-1 rounded border text-xs min-w-0"
-                        :style="{
-                          backgroundColor: 'var(--color-surface-panel)',
-                          borderColor: store.state.theme === 'dark' ? '#444444' : '#E7EAEE',
-                          color: store.state.theme === 'dark' ? '#E5E7EB' : '#374151'
-                        }"
+                        class="flex items-center gap-2 px-2.5 py-1 rounded-default border text-xs min-w-0 bg-surface-panel border-border-default text-text-body"
                       >
                         <span class="truncate flex-1 min-w-0">{{ incidentDetails?.title || 'N/A' }}</span>
                         <OIcon
                           :name="copiedField === 'incident_title' ? 'check' : 'content-copy'" size="sm"
-                          :class="copiedField === 'incident_title' ? 'text-green-500' : 'opacity-60 hover:opacity-100 hover:text-blue-500'"
+                          :class="copiedField === 'incident_title' ? 'text-status-positive' : 'opacity-60 hover:opacity-100 hover:text-text-link'"
                           class="cursor-pointer transition-all flex-shrink-0"
-                          style="font-size: 14px; cursor: pointer;"
                           @click="copyToClipboard(incidentDetails?.title, 'incident_title')"
                         />
                       </div>
                     </div>
 
                     <!-- Correlated By -->
-                    <div class="grid gap-2" style="grid-template-columns: 120px 1fr;">
+                    <div class="grid gap-2 grid-cols-[7.5rem_1fr]">
                       <div :class="'text-text-secondary'" class="text-xs font-medium">
                         Correlated By
                       </div>
                       <div
-                        class="flex items-center gap-2 px-2.5 py-1 rounded border text-xs min-w-0"
-                        :style="{
-                          backgroundColor: 'var(--color-surface-panel)',
-                          borderColor: store.state.theme === 'dark' ? '#444444' : '#E7EAEE',
-                          color: store.state.theme === 'dark' ? '#E5E7EB' : '#374151'
-                        }"
+                        class="flex items-center gap-2 px-2.5 py-1 rounded-default border text-xs min-w-0 bg-surface-panel border-border-default text-text-body"
                       >
                         <span class="truncate flex-1 min-w-0">{{ getCorrelationMethodLabel(incidentDetails?.key_type) }}</span>
                         <OIcon
                           :name="copiedField === 'key_type' ? 'check' : 'content-copy'" size="sm"
-                          :class="copiedField === 'key_type' ? 'text-green-500' : 'opacity-60 hover:opacity-100 hover:text-blue-500'"
+                          :class="copiedField === 'key_type' ? 'text-status-positive' : 'opacity-60 hover:opacity-100 hover:text-text-link'"
                           class="cursor-pointer transition-all flex-shrink-0"
-                          style="font-size: 14px; cursor: pointer;"
                           @click="copyToClipboard(getCorrelationMethodLabel(incidentDetails?.key_type), 'key_type')"
                         />
                       </div>
                     </div>
 
                     <!-- Created At -->
-                    <div class="grid gap-2" style="grid-template-columns: 120px 1fr;">
+                    <div class="grid gap-2 grid-cols-[7.5rem_1fr]">
                       <div :class="'text-text-secondary'" class="text-xs font-medium">
                         Created At
                       </div>
-                      <div :class="'text-text-primary'" class="text-sm">
+                      <div :class="'text-text-body'" class="text-sm">
                         {{ incidentDetails?.created_at ? formatTimestamp(incidentDetails.created_at) : 'N/A' }}
                       </div>
                     </div>
 
                     <!-- Updated At -->
-                    <div class="grid gap-2" style="grid-template-columns: 120px 1fr;">
+                    <div class="grid gap-2 grid-cols-[7.5rem_1fr]">
                       <div :class="'text-text-secondary'" class="text-xs font-medium">
                         Updated At
                       </div>
-                      <div :class="'text-text-primary'" class="text-sm">
+                      <div :class="'text-text-body'" class="text-sm">
                         {{ incidentDetails?.updated_at ? formatTimestamp(incidentDetails.updated_at) : 'N/A' }}
                       </div>
                     </div>
@@ -537,15 +487,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <!-- alert activity -->
                <!-- 2.1B: Alert Activity Chart (50% height, full width) -->
               <div
-                class="el-border el-border-radius bg-(--o2-card-bg) flex flex-col overflow-hidden"
-                :style="{
-                  height: '50%'
-                }"
+                class="border border-card-glass-border rounded-default bg-card-glass-bg flex flex-col overflow-hidden h-1/2"
               >
                 <!-- Header -->
                 <div class="px-4 pt-2 pb-1">
                   <div
-                    :class="'text-text-primary'"
+                    :class="'text-text-heading'"
                     class="text-sm font-semibold"
                   >
                     Alert Activity
@@ -565,18 +512,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </div>
 
             <!-- PART 2: Sidebar Content (33.33% width) - 3 sections -->
-            <div class="flex flex-col gap-2" style="width: 33.33%; height: 100%;">
+            <div class="flex flex-col gap-2 w-1/3 h-full">
               <!-- 2.2A: Manage Panel (40% of available height after gaps) -->
               <div
-                class="el-border el-border-radius bg-(--o2-card-bg) flex flex-col overflow-hidden"
-                :style="{
-                  height: 'calc(35% - 6.4px)'
-                }"
+                class="border border-card-glass-border rounded-default bg-card-glass-bg flex flex-col overflow-hidden h-[calc(35%-0.4rem)]"
               >
                 <!-- Header -->
                 <div class="px-4 pt-2 pb-1">
                   <div
-                    :class="'text-text-primary'"
+                    :class="'text-text-heading'"
                     class="text-sm font-semibold"
                   >
                     Manage
@@ -644,19 +588,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
               <!-- 2.2B: Dimensions Panel (35% when Alert Flow present, 60% when absent, or when no triggers) -->
               <div
-                class="el-border el-border-radius bg-(--o2-card-bg) flex flex-col overflow-hidden"
-                :style="{
-                  height: (sortedAlertsByTriggerCount?.length)
-                    ? 'calc(35% - 5.6px)'
-                    : 'calc(65% - 2px)',
-                  minHeight: 0,
-                  flexShrink: 0
-                }"
+                class="border border-card-glass-border rounded-default bg-card-glass-bg flex flex-col overflow-hidden min-h-0 shrink-0"
+                :class="(sortedAlertsByTriggerCount?.length) ? 'h-[calc(35%-0.35rem)]' : 'h-[calc(65%-0.125rem)]'"
               >
                 <!-- Header -->
                 <div class="px-4 pt-2 pb-1">
                   <div
-                    :class="'text-text-primary'"
+                    :class="'text-text-heading'"
                     class="text-sm font-semibold"
                   >
                     Dimensions
@@ -664,7 +602,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </div>
 
                 <!-- Content -->
-                <div class="flex flex-col p-3 overflow-y-auto gap-0 flex-1" style="min-height: 0;">
+                <div class="flex flex-col p-3 overflow-y-auto gap-0 flex-1 min-h-0">
                   <div
                     v-if="incidentDetails?.group_values && Object.keys(incidentDetails.group_values).length > 0"
                     class="flex flex-col"
@@ -672,10 +610,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <div
                       v-for="(value, key) in incidentDetails.group_values"
                       :key="key"
-                      class="py-2.5 border-b flex gap-2"
-                      :style="{
-                        borderColor: store.state.theme === 'dark' ? '#444444' : '#E7EAEE'
-                      }"
+                      class="py-2.5 border-b flex gap-2 border-border-default"
                       :class="{ 'border-b-0': key === Object.keys(incidentDetails.group_values)[Object.keys(incidentDetails.group_values).length - 1] }"
                     >
                       <div
@@ -685,7 +620,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         {{ getSemanticGroupDisplayName(key) }}:
                       </div>
                       <div
-                        :class="'text-text-primary'"
+                        :class="'text-text-body'"
                         class="text-xs break-words flex-1"
                       >
                         {{ value }}
@@ -705,15 +640,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <!-- 2.2C: Alert Flow Panel (25% of available height after gaps) - Conditional -->
               <div
                 v-if="sortedAlertsByTriggerCount?.length"
-                class="el-border el-border-radius bg-(--o2-card-bg) flex flex-col overflow-hidden"
-                :style="{
-                  height: 'calc(30% - 4px)'
-                }"
+                class="border border-card-glass-border rounded-default bg-card-glass-bg flex flex-col overflow-hidden h-[calc(30%-0.25rem)]"
               >
                 <!-- Header -->
                 <div class="px-4 pt-2 pb-1">
                   <div
-                    :class="'text-text-primary'"
+                    :class="'text-text-heading'"
                     class="text-sm font-semibold"
                   >
                     {{ t('alerts.incidents.relatedAlerts') }}
@@ -721,19 +653,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </div>
 
                 <!-- Content - Vertical list -->
-                <div class="px-3 pb-3 overflow-y-auto flex-1" style="min-height: 0;">
+                <div class="px-3 pb-3 overflow-y-auto flex-1 min-h-0">
                   <div class="flex flex-col gap-0">
                     <div
                       v-for="(alert, index) in sortedAlertsByTriggerCount"
                       :key="alert.id"
-                      class="py-2.5 border-b"
-                      :style="{
-                        borderColor: store.state.theme === 'dark' ? '#444444' : '#E7EAEE'
-                      }"
+                      class="py-2.5 border-b border-border-default"
                       :class="{ 'border-b-0': index === sortedAlertsByTriggerCount.length - 1 }"
                     >
                       <div
-                        :class="'text-text-primary'"
+                        :class="'text-text-heading'"
                         class="text-xs flex gap-2 items-center"
                       >
                         <span
@@ -748,7 +677,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                             {{ alert.name.length > 30 ? alert.name.substring(0, 30) + '...' : alert.name }}
                           </span>
                         </div>
-                        <div class="flex-shrink-0" style="width: 120px;">
+                        <div class="flex-shrink-0 w-30">
                           <span
                             :class="'text-text-secondary'"
                           >
@@ -799,7 +728,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <div class="flex-1 flex flex-col overflow-hidden pr-2 pt-4">
             <div
               :class="[
-                'border border-[var(--o2-border-color)] rounded-md overflow-hidden flex flex-col flex-1'
+                'border border-card-glass-border rounded-default overflow-hidden flex flex-col flex-1'
               ]"
             >
               <IncidentAlertTriggersTable
@@ -811,19 +740,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </div>
 
           <!-- Right Section: Trigger Details -->
-          <div class="w-[400px] flex-shrink-0 flex flex-col pt-4">
+          <div class="w-100 flex-shrink-0 flex flex-col pt-4">
             <div
               :class="[
-                'border border-[var(--o2-border-color)] rounded-md overflow-hidden flex flex-col flex-1'
+                'border border-card-glass-border rounded-default overflow-hidden flex flex-col flex-1'
               ]"
             >
               <!-- Header -->
               <div
                 :class="[
-                  '!bg-[var(--o2-table-header-bg)] px-3 py-2 flex items-center gap-2 border-b flex-shrink-0',
-                  store.state.theme === 'dark'
-                    ? 'border-gray-700'
-                    : 'border-gray-200'
+                  '!bg-[var(--color-theme-table-header-bg)] px-3 py-2 flex items-center gap-2 border-b flex-shrink-0',
+                  'border-border-default'
                 ]"
               >
                 <OIcon name="info" size="sm" class="opacity-80" />
@@ -849,10 +776,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   <div class="space-y-2">
                       <!-- Alert Name -->
                       <div class="flex flex-col gap-0.5">
-                        <span :class="'text-text-secondary'" class="text-[10px] uppercase tracking-wide">
+                        <span :class="'text-text-secondary'" class="text-3xs uppercase tracking-wide">
                           Alert Name
                         </span>
-                        <span :class="'text-text-primary'" class="text-sm font-medium">
+                        <span :class="'text-text-body'" class="text-sm font-medium">
                           {{ alerts[selectedAlertIndex]?.name || 'N/A' }}
                         </span>
                       </div>
@@ -860,7 +787,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       <!-- Stream Type & Name -->
                       <div class="grid grid-cols-2 gap-2">
                         <div class="flex flex-col gap-0.5">
-                          <span :class="'text-text-secondary'" class="text-[10px] uppercase tracking-wide">
+                          <span :class="'text-text-secondary'" class="text-3xs uppercase tracking-wide">
                             Stream Type
                           </span>
                           <OTag
@@ -870,10 +797,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                           />
                         </div>
                         <div class="flex flex-col gap-0.5">
-                          <span :class="'text-text-secondary'" class="text-[10px] uppercase tracking-wide">
+                          <span :class="'text-text-secondary'" class="text-3xs uppercase tracking-wide">
                             Stream Name
                           </span>
-                          <span :class="'text-text-primary'" class="text-sm font-medium truncate">
+                          <span :class="'text-text-body'" class="text-sm font-medium truncate">
                             {{ alerts[selectedAlertIndex]?.stream_name || 'N/A' }}
                           </span>
                         </div>
@@ -882,18 +809,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       <!-- Threshold & Period -->
                       <div class="grid grid-cols-2 gap-2">
                         <div class="flex flex-col gap-0.5">
-                          <span :class="'text-text-secondary'" class="text-[10px] uppercase tracking-wide">
+                          <span :class="'text-text-secondary'" class="text-3xs uppercase tracking-wide">
                             Threshold
                           </span>
-                          <span :class="'text-text-primary'" class="text-sm font-medium">
+                          <span :class="'text-text-body'" class="text-sm font-medium">
                             {{ alerts[selectedAlertIndex]?.trigger_condition?.operator || '' }} {{ alerts[selectedAlertIndex]?.trigger_condition?.threshold || 'N/A' }}
                           </span>
                         </div>
                         <div class="flex flex-col gap-0.5">
-                          <span :class="'text-text-secondary'" class="text-[10px] uppercase tracking-wide">
+                          <span :class="'text-text-secondary'" class="text-3xs uppercase tracking-wide">
                             Period
                           </span>
-                          <span :class="'text-text-primary'" class="text-sm font-medium">
+                          <span :class="'text-text-body'" class="text-sm font-medium">
                             {{ formatPeriod(alerts[selectedAlertIndex]?.trigger_condition?.period) }}
                           </span>
                         </div>
@@ -902,18 +829,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       <!-- Frequency & Silence -->
                       <div class="grid grid-cols-2 gap-2">
                         <div class="flex flex-col gap-0.5">
-                          <span :class="'text-text-secondary'" class="text-[10px] uppercase tracking-wide">
+                          <span :class="'text-text-secondary'" class="text-3xs uppercase tracking-wide">
                             Frequency
                           </span>
-                          <span :class="'text-text-primary'" class="text-sm font-medium">
+                          <span :class="'text-text-body'" class="text-sm font-medium">
                             {{ alerts[selectedAlertIndex]?.trigger_condition?.frequency || 'N/A' }} {{ alerts[selectedAlertIndex]?.trigger_condition?.frequency_type || 'min' }}
                           </span>
                         </div>
                         <div class="flex flex-col gap-0.5">
-                          <span :class="'text-text-secondary'" class="text-[10px] uppercase tracking-wide">
+                          <span :class="'text-text-secondary'" class="text-3xs uppercase tracking-wide">
                             Silence
                           </span>
-                          <span :class="'text-text-primary'" class="text-sm font-medium">
+                          <span :class="'text-text-body'" class="text-sm font-medium">
                             {{ alerts[selectedAlertIndex]?.trigger_condition?.silence || 'N/A' }} min
                           </span>
                         </div>
@@ -921,26 +848,26 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </div>
 
                   <!-- Alert Conditions Section -->
-                  <div :class="['rounded border flex flex-col border-[var(--o2-border-color)] rounded-md',]" class="overflow-hidden" style="height: 392px;">
-                    <div :class="['!bg-[var(--o2-table-header-bg)] px-2.5 py-1.5 border-b flex items-center justify-between flex-shrink-0', store.state.theme === 'dark' ? 'border-gray-700' : 'border-gray-200']">
-                      <span :class="'text-text-secondary'" class="text-[11px] font-semibold uppercase tracking-wide">
+                  <div :class="['rounded-default border flex flex-col border-card-glass-border rounded-default',]" class="overflow-hidden h-98">
+                    <div :class="['!bg-[var(--color-theme-table-header-bg)] px-2.5 py-1.5 border-b flex items-center justify-between flex-shrink-0', 'border-border-default']">
+                      <span :class="'text-text-secondary'" class="text-2xs font-semibold uppercase tracking-wide">
                         {{ alerts[selectedAlertIndex]?.query_condition?.type === 'sql' ? 'SQL Query' : alerts[selectedAlertIndex]?.query_condition?.type === 'promql' ? 'PromQL Query' : 'Conditions' }}
                       </span>
                     </div>
                     <div class="p-2.5 overflow-y-auto flex-1">
                       <!-- SQL Query -->
                       <div v-if="alerts[selectedAlertIndex]?.query_condition?.sql">
-                        <pre :class="['text-[0.8rem] overflow-x-auto whitespace-pre-wrap break-words', store.state.theme === 'dark' ? 'text-gray-300' : 'text-gray-800']">{{ alerts[selectedAlertIndex]?.query_condition?.sql }}</pre>
+                        <pre :class="['text-compact overflow-x-auto whitespace-pre-wrap break-words', 'text-text-body']">{{ alerts[selectedAlertIndex]?.query_condition?.sql }}</pre>
                       </div>
 
                       <!-- PromQL Query -->
                       <div v-else-if="alerts[selectedAlertIndex]?.query_condition?.promql">
-                        <pre :class="['text-[0.8rem] overflow-x-auto whitespace-pre-wrap break-words', store.state.theme === 'dark' ? 'text-gray-300' : 'text-gray-800']">{{ alerts[selectedAlertIndex]?.query_condition?.promql }}</pre>
+                        <pre :class="['text-compact overflow-x-auto whitespace-pre-wrap break-words', 'text-text-body']">{{ alerts[selectedAlertIndex]?.query_condition?.promql }}</pre>
                       </div>
 
                       <!-- Custom Conditions -->
                       <div v-else-if="alerts[selectedAlertIndex]?.query_condition?.conditions">
-                        <pre :class="['text-[0.8rem] overflow-x-auto whitespace-pre-wrap break-words', store.state.theme === 'dark' ? 'text-gray-300' : 'text-gray-800']">if {{ formatCustomConditions(alerts[selectedAlertIndex]?.query_condition?.conditions) }}</pre>
+                        <pre :class="['text-compact overflow-x-auto whitespace-pre-wrap break-words', 'text-text-body']">if {{ formatCustomConditions(alerts[selectedAlertIndex]?.query_condition?.conditions) }}</pre>
                       </div>
 
                       <!-- No conditions -->
@@ -966,11 +893,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <div v-else-if="correlationError || !hasCorrelatedData || !hasAnyStreams" class="flex flex-1 flex-col items-center justify-center gap-2 h-full">
             <OIcon
               :name="correlationError ? (correlationError.includes('disambiguation fields') ? 'warning' : 'error-outline') : 'info-outline'"
-              :class="['w-16 h-16', correlationError ? (correlationError.includes('disambiguation fields') ? 'text-[var(--o2-warning)]' : 'text-[var(--o2-negative)]') : 'text-gray-400']" />
+              :class="['w-16 h-16', correlationError ? (correlationError.includes('disambiguation fields') ? 'text-warning' : 'text-status-negative') : 'text-text-muted']" />
             <div class="text-xl font-semibold mt-3">
               {{ correlationError || 'No correlated logs found' }}
             </div>
-            <div v-if="correlationError && correlationError.includes('disambiguation fields')" class="text-sm text-gray-400 mt-2" style="max-width: 500px; text-align: center;">
+            <div v-if="correlationError && correlationError.includes('disambiguation fields')" class="text-sm text-text-secondary mt-2 max-w-125 text-center">
               The service discovery configuration (disambiguation fields) was changed after this incident was created.
             </div>
             <OButton
@@ -1015,11 +942,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <div v-else-if="correlationError || !hasCorrelatedData || !hasAnyStreams" class="flex flex-1 flex-col items-center justify-center gap-2 h-full">
             <OIcon
               :name="correlationError ? (correlationError.includes('disambiguation fields') ? 'warning' : 'error-outline') : 'info-outline'"
-              :class="['w-16 h-16', correlationError ? (correlationError.includes('disambiguation fields') ? 'text-[var(--o2-warning)]' : 'text-[var(--o2-negative)]') : 'text-gray-400']" />
+              :class="['w-16 h-16', correlationError ? (correlationError.includes('disambiguation fields') ? 'text-warning' : 'text-status-negative') : 'text-text-muted']" />
             <div class="text-xl font-semibold mt-3">
               {{ correlationError || 'No correlated metrics found' }}
             </div>
-            <div v-if="correlationError && correlationError.includes('disambiguation fields')" class="text-sm text-gray-400 mt-2" style="max-width: 500px; text-align: center;">
+            <div v-if="correlationError && correlationError.includes('disambiguation fields')" class="text-sm text-text-secondary mt-2 max-w-125 text-center">
               The service discovery configuration (disambiguation fields) was changed after this incident was created.
             </div>
             <OButton
@@ -1053,7 +980,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- Traces Tab Content -->
         <div v-if="activeTab === 'traces'" class="flex flex-col flex-1 overflow-hidden h-full">
           <!-- Refresh Button (shown when traces data is loaded) -->
-          <div v-if="hasCorrelatedData && !correlationLoading && correlationData?.traceStreams?.length > 0" class="px-4 py-2 border-b border-solid border-[var(--o2-border-color)] flex items-center gap-2">
+          <div v-if="hasCorrelatedData && !correlationLoading && correlationData?.traceStreams?.length > 0" class="px-4 py-2 border-b border-solid border-card-glass-border flex items-center gap-2">
             <span class="text-xs">{{ t('alerts.incidents.showingCorrelatedTraces') }}</span>
             <OButton
               variant="ghost"
@@ -1073,11 +1000,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <div v-else-if="correlationError || !hasCorrelatedData || !hasAnyStreams" class="flex flex-1 flex-col items-center justify-center gap-2 h-full">
             <OIcon
               :name="correlationError ? (correlationError.includes('disambiguation fields') ? 'warning' : 'error-outline') : 'info-outline'"
-              :class="['w-16 h-16', correlationError ? (correlationError.includes('disambiguation fields') ? 'text-[var(--o2-warning)]' : 'text-[var(--o2-negative)]') : 'text-gray-400']" />
+              :class="['w-16 h-16', correlationError ? (correlationError.includes('disambiguation fields') ? 'text-warning' : 'text-status-negative') : 'text-text-muted']" />
             <div class="text-xl font-semibold mt-3">
               {{ correlationError || 'No correlated traces found' }}
             </div>
-            <div v-if="correlationError && correlationError.includes('disambiguation fields')" class="text-sm text-gray-400 mt-2" style="max-width: 500px; text-align: center;">
+            <div v-if="correlationError && correlationError.includes('disambiguation fields')" class="text-sm text-text-secondary mt-2 max-w-125 text-center">
               The service discovery configuration (disambiguation fields) was changed after this incident was created.
             </div>
             <OButton
@@ -1114,7 +1041,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <div v-if="loading" class="flex-1 flex items-center justify-center">
       <OSpinner size="md" />
     </div>
-  </div>
+  </OPageLayout>
   </div>
 </template>
 
@@ -1124,6 +1051,7 @@ import OTab from '@/lib/navigation/Tabs/OTab.vue'
 import { defineComponent, ref, watch, computed, PropType, nextTick, onMounted, onBeforeUnmount, onUnmounted } from "vue";
 import { useI18n } from "vue-i18n";
 import { useStore } from "vuex";
+import { useTheme } from "@/composables/useTheme";
 import { useRouter } from "vue-router";
 import { formatToReadable } from "@/utils/date";
 import incidentsService, {
@@ -1154,7 +1082,7 @@ import OIcon from "@/lib/core/Icon/OIcon.vue";
 import OSpinner from "@/lib/feedback/Spinner/OSpinner.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
 import OTag from "@/lib/core/Badge/OTag.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import { toast } from "@/lib/feedback/Toast/useToast";
 import { copyToClipboard as copyToClipboardUtil } from "@/utils/clipboard";
 import { useConfirmDialog } from "@/composables/useConfirmDialog";
@@ -1162,7 +1090,7 @@ import { useConfirmDialog } from "@/composables/useConfirmDialog";
 export default defineComponent({
   name: "IncidentDetailDrawer",
   components: {
-    AppPageHeader,
+    OPageLayout,
     OTabs,
     OTab,
     TelemetryCorrelationDashboard,
@@ -1329,10 +1257,8 @@ export default defineComponent({
       }
     };
 
-    // Check if dark mode is active
-    const isDarkMode = computed(() => {
-      return store.state.theme === "dark";
-    });
+    // Dark mode via the single sanctioned JS seam
+    const { isDark: isDarkMode } = useTheme();
 
     // Computed properties for statistics
     const affectedServicesCount = computed(() => {
@@ -1775,7 +1701,7 @@ export default defineComponent({
             textStyle: {
               fontSize: 14,
               fontWeight: "normal",
-              color: store.state.theme === 'dark' ? '#B7B7B7' : '#72777B'
+              color: isDarkMode.value ? '#B7B7B7' : '#72777B'
             }
           }
         };
@@ -1842,10 +1768,10 @@ export default defineComponent({
           axisPointer: {
             type: 'shadow'
           },
-          backgroundColor: store.state.theme === 'dark' ? '#2B2C2D' : '#ffffff',
-          borderColor: store.state.theme === 'dark' ? '#444444' : '#E7EAEE',
+          backgroundColor: isDarkMode.value ? '#2B2C2D' : '#ffffff',
+          borderColor: isDarkMode.value ? '#444444' : '#E7EAEE',
           textStyle: {
-            color: store.state.theme === 'dark' ? '#DCDCDC' : '#232323'
+            color: isDarkMode.value ? '#DCDCDC' : '#232323'
           }
         },
         legend: {
@@ -1854,14 +1780,14 @@ export default defineComponent({
           bottom: 0,
           data: Array.from(alertNames),
           textStyle: {
-            color: store.state.theme === 'dark' ? '#DCDCDC' : '#232323'
+            color: isDarkMode.value ? '#DCDCDC' : '#232323'
           },
           pageButtonItemGap: 5,
           pageButtonGap: 20,
-          pageIconColor: store.state.theme === 'dark' ? '#DCDCDC' : '#232323',
-          pageIconInactiveColor: store.state.theme === 'dark' ? '#666666' : '#CCCCCC',
+          pageIconColor: isDarkMode.value ? '#DCDCDC' : '#232323',
+          pageIconInactiveColor: isDarkMode.value ? '#666666' : '#CCCCCC',
           pageTextStyle: {
-            color: store.state.theme === 'dark' ? '#DCDCDC' : '#232323'
+            color: isDarkMode.value ? '#DCDCDC' : '#232323'
           }
         },
         grid: {
@@ -1875,12 +1801,12 @@ export default defineComponent({
           type: 'category',
           data: sortedDates.map(formatDate),
           axisLabel: {
-            color: store.state.theme === 'dark' ? '#B7B7B7' : '#72777B',
+            color: isDarkMode.value ? '#B7B7B7' : '#72777B',
             rotate: sortedDates.length > 10 ? 45 : 0
           },
           axisLine: {
             lineStyle: {
-              color: store.state.theme === 'dark' ? '#444444' : '#E7EAEE'
+              color: isDarkMode.value ? '#444444' : '#E7EAEE'
             }
           }
         },
@@ -1888,19 +1814,19 @@ export default defineComponent({
           type: 'value',
           name: 'Alert Count',
           nameTextStyle: {
-            color: store.state.theme === 'dark' ? '#B7B7B7' : '#72777B'
+            color: isDarkMode.value ? '#B7B7B7' : '#72777B'
           },
           axisLabel: {
-            color: store.state.theme === 'dark' ? '#B7B7B7' : '#72777B'
+            color: isDarkMode.value ? '#B7B7B7' : '#72777B'
           },
           axisLine: {
             lineStyle: {
-              color: store.state.theme === 'dark' ? '#444444' : '#E7EAEE'
+              color: isDarkMode.value ? '#444444' : '#E7EAEE'
             }
           },
           splitLine: {
             lineStyle: {
-              color: store.state.theme === 'dark' ? '#3A3A3A' : '#F0F0F0'
+              color: isDarkMode.value ? '#3A3A3A' : '#F0F0F0'
             }
           }
         },
@@ -2636,21 +2562,26 @@ export default defineComponent({
 
             const id = 'section-' + rawText.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
 
+            // Colours/backgrounds for these rca-* classes come from the
+            // `:deep(.rca-report-content)` rules in IncidentRCAAnalysis.vue (the
+            // component that v-htmls this string). Those rules are unlayered, so
+            // they beat any layered colour utility named here — only structural
+            // utilities (spacing, size, weight, border-width) are live.
             const classes = [
               'rca-h1 font-bold text-lg text-center mb-4 pb-2 border-b-2',
               // TODO: Discuss with team - h2 section separators with background and left border
-              // Remove 'rca-section-bg px-4 py-3 rounded border-l-4 border-blue-600' if not approved
-              'rca-h2 font-bold text-lg mt-5 mb-3 text-blue-600 rca-section-bg px-4 py-3 rounded border-l-4 border-blue-600',
+              // Remove 'rca-section-bg px-4 py-3 rounded-default border-l-4' if not approved
+              'rca-h2 font-bold text-lg mt-5 mb-3 rca-section-bg px-4 py-3 rounded-default border-l-4',
               'rca-h3 font-semibold text-base mt-4 mb-2',
-              'rca-h4 font-semibold text-sm mt-3 mb-2 text-gray-700',
+              'rca-h4 font-semibold text-sm mt-3 mb-2',
             ];
             return `<div id="${id}" class="${classes[depth - 1] || ''}">${parsedText}</div>`;
           },
           code({ text }: any) {
-            return `<div class="rca-code-block bg-gray-100 border border-gray-300 rounded p-3 my-3 overflow-x-auto"><pre class="text-sm font-mono whitespace-pre m-0"><code>${text}</code></pre></div>`;
+            return `<div class="rca-code-block border rounded-default p-3 my-3 overflow-x-auto"><pre class="text-sm font-mono whitespace-pre m-0"><code>${text}</code></pre></div>`;
           },
           codespan({ text }: any) {
-            return `<code class="rca-inline-code bg-gray-100 px-1.5 py-0.5 rounded text-sm font-mono">${text}</code>`;
+            return `<code class="rca-inline-code px-1.5 py-0.5 rounded-default text-sm font-mono">${text}</code>`;
           },
           list(token: any) {
             const body = token.items.map((item: any) => this.listitem(item)).join('');
@@ -2668,27 +2599,27 @@ export default defineComponent({
               const cell = token.header[i];
               const content = this.parser.parseInline(cell.tokens);
               const cellClass = i === 0 ? 'rca-first-cell' : '';
-              header += `<th class="px-3 py-2 text-left font-semibold text-sm text-[var(--color-table-header-text)] border-b border-[var(--color-table-header-border)] ${cellClass}">${content}</th>`;
+              header += `<th class="px-3 py-2 text-left font-semibold text-sm text-table-header-text border-b border-table-header-border ${cellClass}">${content}</th>`;
             }
             header += '</tr>';
 
             let body = '';
             for (const row of token.rows) {
-              body += '<tr class="hover:bg-[var(--color-table-row-hover-bg)]">';
+              body += '<tr class="hover:bg-table-row-hover-bg">';
               for (let i = 0; i < row.length; i++) {
                 const cell = row[i];
                 const content = this.parser.parseInline(cell.tokens);
                 const cellClass = i === 0 ? 'rca-first-cell' : '';
-                body += `<td class="px-3 py-2 text-sm border-b border-[var(--color-table-row-divider)] ${cellClass}">${content}</td>`;
+                body += `<td class="px-3 py-2 text-sm border-b border-table-row-divider ${cellClass}">${content}</td>`;
               }
               body += '</tr>';
             }
 
-            return `<div class="rca-table-wrapper my-4 overflow-x-auto"><table class="rca-table w-full border border-[var(--color-table-header-border)] rounded"><thead class="bg-[var(--color-table-header-bg)]">${header}</thead><tbody>${body}</tbody></table></div>`;
+            return `<div class="rca-table-wrapper my-4 overflow-x-auto"><table class="rca-table w-full border border-table-header-border rounded-default"><thead class="bg-table-header-bg">${header}</thead><tbody>${body}</tbody></table></div>`;
           },
           blockquote({ tokens }: any) {
             const text = this.parser.parse(tokens);
-            return `<blockquote class="rca-blockquote border-l-4 border-blue-500 pl-4 py-2 my-3 bg-blue-50 italic">${text}</blockquote>`;
+            return `<blockquote class="rca-blockquote border-l-4 pl-4 py-2 my-3 italic">${text}</blockquote>`;
           },
           paragraph({ tokens }: any) {
             const text = this.parser.parseInline(tokens);
@@ -2703,7 +2634,7 @@ export default defineComponent({
             return `<em class="italic">${text}</em>`;
           },
           hr() {
-            return `<hr class="my-4 border-t border-gray-300" />`;
+            return `<hr class="my-4 border-t" />`;
           },
         }
       });
@@ -2860,27 +2791,3 @@ export default defineComponent({
   },
 });
 </script>
-
-<style>
-/* Responsive scrolling */
-.incident-details-column::-webkit-scrollbar,
-.tabs-content-column .overflow-auto::-webkit-scrollbar {
-  width: 6px;
-}
-
-.incident-details-column::-webkit-scrollbar-track,
-.tabs-content-column .overflow-auto::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.incident-details-column::-webkit-scrollbar-thumb,
-.tabs-content-column .overflow-auto::-webkit-scrollbar-thumb {
-  background: #cbd5e1;
-  border-radius: 3px;
-}
-
-body.body--dark .incident-details-column::-webkit-scrollbar-thumb,
-body.body--dark .tabs-content-column .overflow-auto::-webkit-scrollbar-thumb {
-  background: #475569;
-}
-</style>
diff --git a/web/src/components/alerts/IncidentList.spec.ts b/web/src/components/alerts/IncidentList.spec.ts
index 979f50c9f3..0f2595261f 100644
--- a/web/src/components/alerts/IncidentList.spec.ts
+++ b/web/src/components/alerts/IncidentList.spec.ts
@@ -180,7 +180,7 @@ describe("IncidentList.vue", () => {
 
     it("renders the list title", () => {
       wrapper = createWrapper();
-      // Title now lives in the standard AppPageHeader (row 1).
+      // Title now lives in the standard OPageHeader (row 1).
       expect(wrapper.find(".app-page-header h1").text()).toContain("Incident");
     });
 
@@ -326,14 +326,8 @@ describe("IncidentList.vue", () => {
       expect((wrapper.vm as any).visibleIncidents).toHaveLength(0);
     });
 
-    it("adds # index to each visible incident", async () => {
-      wrapper = createWrapper();
-      await flushPromises();
-      const visible = (wrapper.vm as any).visibleIncidents;
-      // visibleIncidents maps filtered array to add "#": i + 1
-      expect(visible.length).toBeGreaterThan(0);
-      expect(visible[0]["#"]).toBe(1);
-    });
+    // Row index is now OTable's built-in `show-index`; visibleIncidents no
+    // longer injects a "#" field into the data.
 
     it("filters case-insensitively", async () => {
       (incidentsService.list as any).mockResolvedValue({
diff --git a/web/src/components/alerts/IncidentList.vue b/web/src/components/alerts/IncidentList.vue
index 6d22edcf7b..948251f746 100644
--- a/web/src/components/alerts/IncidentList.vue
+++ b/web/src/components/alerts/IncidentList.vue
@@ -15,20 +15,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div data-test="incident-list" class="h-full">
-    <PageLayout
-      :header-class="'shrink-0 px-4 border-b border-border-default'"
+  <div data-test="incident-list" class="incident-list h-full">
+    <OPageLayout
+      bleed
+      :title="t('alerts.incidents.title')"
+      icon="notifications-active"
+      :subtitle="t('alerts.incidents.subtitle')"
     >
-      <!-- Row 1: standard header — title + actions only. Search moved into the
-           table's own toolbar below. -->
-      <template #header>
-        <AppPageHeader
-          :title="t('alerts.incidents.title')"
-          icon="notifications-active"
-          :subtitle="t('alerts.incidents.subtitle')"
-        >
-        </AppPageHeader>
-      </template>
       <OTable
         ref="qTableRef"
         :data="visibleIncidents"
@@ -42,6 +35,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         sorting="client"
         filter-mode="client"
         :default-columns="false"
+        show-index
         :show-global-filter="false"
         :enable-column-resize="true"
         :persist-columns="true"
@@ -200,14 +194,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
         <!-- Bottom -->
         <template #bottom>
-          <div class="flex w-full justify-between items-center h-[48px]">
-            <div class="o2-table-footer-title flex items-center w-[100px] mr-md">
+          <div class="flex w-full justify-between items-center h-12">
+            <div class="text-xs font-normal flex items-center w-25 mr-md">
               {{ visibleIncidents.length }} {{ visibleIncidents.length === 1 ? 'Incident' : 'Incidents' }}
             </div>
           </div>
         </template>
         </OTable>
-    </PageLayout>
+    </OPageLayout>
   </div>
 </template>
 
@@ -218,8 +212,7 @@ import { useStore } from "vuex";
 import { useRouter, useRoute } from "vue-router";
 import { formatToReadable } from "@/utils/date";
 import incidentsService, { Incident } from "@/services/incidents";
-import PageLayout from "@/components/common/PageLayout.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import OEmptyState from "@/lib/core/EmptyState/OEmptyState.vue";
 import OButton from "@/lib/core/Button/OButton.vue";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
@@ -236,13 +229,12 @@ import OToggleGroup from "@/lib/core/ToggleGroup/OToggleGroup.vue";
 import OToggleGroupItem from "@/lib/core/ToggleGroup/OToggleGroupItem.vue";
 import type { OTableColumnDef } from "@/lib/core/Table/OTable.types";
 import { toast } from "@/lib/feedback/Toast/useToast";
-import { TABLE_INDEX_COL_SIZE, COL } from "@/lib/core/Table/OTable.types";
+import { COL } from "@/lib/core/Table/OTable.types";
 
 export default defineComponent({
   name: "IncidentList",
   components: {
-    PageLayout,
-    AppPageHeader,
+    OPageLayout,
     OEmptyState,
     OButton,
     OSpinner,
@@ -276,13 +268,6 @@ export default defineComponent({
     const pageSize = ref(20);
 
     const columns: OTableColumnDef[] = [
-      {
-        id: "#",
-        header: "#",
-        accessorKey: "#",
-        size: TABLE_INDEX_COL_SIZE,
-        meta: { align: "center" },
-      },
       {
         id: "title",
         header: t("alerts.incidents.title_field"),
@@ -378,7 +363,7 @@ export default defineComponent({
         filtered = filtered.filter((incident) => incident.status === statusFilter.value);
       }
       filtered = applyFrontendSearch(filtered, searchQuery.value);
-      return filtered.map((incident, i) => ({ ...incident, "#": i + 1 }));
+      return filtered;
     });
 
     const loadIncidents = async () => {
@@ -651,86 +636,3 @@ export default defineComponent({
   },
 });
 </script>
-
-<style>
-/* Status badge styling */
-.status-open {
-  border: 1px solid #dc2626;
-}
-
-.status-acknowledged {
-  border: 1px solid #d97706;
-}
-
-.status-resolved {
-  border: 1px solid #065f46;
-}
-
-.status-default {
-  border: 1px solid #6b7280;
-}
-
-/* Severity badge styling */
-.severity-p1 {
-  border: 1px solid #991b1b;
-}
-
-.severity-p2 {
-  border: 1px solid #c2410c;
-}
-
-.severity-p3 {
-  border: 1px solid #92400e;
-}
-
-.severity-p4 {
-  border: 1px solid #6b7280;
-}
-
-.severity-default {
-  border: 1px solid #6b7280;
-}
-
-/* Dark mode adjustments for status and severity badges */
-body.body--dark .status-open { border: 1px solid #fca5a5; }
-body.body--dark .status-acknowledged { border: 1px solid #fbbf24; }
-body.body--dark .status-resolved { border: 1px solid #6ee7b7; }
-body.body--dark .status-default { border: 1px solid #d1d5db; }
-body.body--dark .severity-p1 { border: 1px solid #fca5a5; }
-body.body--dark .severity-p2 { border: 1px solid #fdba74; }
-body.body--dark .severity-p3 { border: 1px solid #fcd34d; }
-body.body--dark .severity-p4 { border: 1px solid #d1d5db; }
-body.body--dark .severity-default { border: 1px solid #d1d5db; }
-
-/* Color scheme matching schema.scss type badges */
-.badge-blue { border: 1px solid #1d4ed8; }
-.badge-green { border: 1px solid #065f46; }
-.badge-yellow { border: 1px solid #92400e; }
-.badge-pink { border: 1px solid #9f1239; }
-.badge-purple { border: 1px solid #7c3aed; }
-.badge-orange { border: 1px solid #c2410c; }
-.badge-cyan { border: 1px solid #0e7490; }
-.badge-indigo { border: 1px solid #4f46e5; }
-.badge-teal { border: 1px solid #0f766e; }
-.badge-red { border: 1px solid #dc2626; }
-.badge-gray { border: 1px solid #4b5563; }
-.badge-amber { border: 1px solid #d97706; }
-.badge-violet { border: 1px solid #7c3aed; }
-.badge-rose { border: 1px solid #e11d48; }
-
-/* Dark mode adjustments */
-body.body--dark .badge-blue { border: 1px solid #93c5fd; }
-body.body--dark .badge-green { border: 1px solid #6ee7b7; }
-body.body--dark .badge-yellow { border: 1px solid #fcd34d; }
-body.body--dark .badge-pink { border: 1px solid #f9a8d4; }
-body.body--dark .badge-purple { border: 1px solid #c4b5fd; }
-body.body--dark .badge-orange { border: 1px solid #fdba74; }
-body.body--dark .badge-cyan { border: 1px solid #67e8f9; }
-body.body--dark .badge-indigo { border: 1px solid #a5b4fc; }
-body.body--dark .badge-teal { border: 1px solid #5eead4; }
-body.body--dark .badge-red { border: 1px solid #fca5a5; }
-body.body--dark .badge-gray { border: 1px solid #d1d5db; }
-body.body--dark .badge-amber { border: 1px solid #fbbf24; }
-body.body--dark .badge-violet { border: 1px solid #c4b5fd; }
-body.body--dark .badge-rose { border: 1px solid #fda4af; }
-</style>
diff --git a/web/src/components/alerts/IncidentRCAAnalysis.spec.ts b/web/src/components/alerts/IncidentRCAAnalysis.spec.ts
index a8b0f79eed..150ee14116 100644
--- a/web/src/components/alerts/IncidentRCAAnalysis.spec.ts
+++ b/web/src/components/alerts/IncidentRCAAnalysis.spec.ts
@@ -462,7 +462,7 @@ describe("IncidentRCAAnalysis", () => {
   });
 
   describe("Theme Switching", () => {
-    it("should update in-flight banner styles when switching from light to dark mode", async () => {
+    it("should keep the semantic in-flight banner surface when switching from light to dark mode", async () => {
       wrapper = mountComponent({
         hasExistingRca: false,
         rcaLoading: true,
@@ -470,23 +470,23 @@ describe("IncidentRCAAnalysis", () => {
       });
 
       const bannerBefore = findByTestId(wrapper, "rca-inflight-container");
-      expect(bannerBefore.classes()).toContain("bg-indigo-50");
+      expect(bannerBefore.classes()).toContain("bg-status-info-bg");
 
       await wrapper.setProps({ isDarkMode: true });
       await flushPromises();
 
       const bannerAfter = findByTestId(wrapper, "rca-inflight-container");
-      expect(bannerAfter.classes()).toContain("bg-indigo-900/20");
+      expect(bannerAfter.classes()).toContain("bg-status-info-bg");
     });
 
-    it("should apply correct dark mode styles during loading", () => {
+    it("should apply the semantic in-flight banner surface during loading in dark mode", () => {
       wrapper = mountComponent({
         rcaLoading: true,
         isDarkMode: true,
       });
 
       const container = findByTestId(wrapper, "rca-inflight-container");
-      expect(container.classes()).toContain("bg-indigo-900/20");
+      expect(container.classes()).toContain("bg-status-info-bg");
     });
   });
 
diff --git a/web/src/components/alerts/IncidentRCAAnalysis.vue b/web/src/components/alerts/IncidentRCAAnalysis.vue
index 770b3fddea..545626e6f3 100644
--- a/web/src/components/alerts/IncidentRCAAnalysis.vue
+++ b/web/src/components/alerts/IncidentRCAAnalysis.vue
@@ -33,20 +33,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <div
       v-if="analysisInFlight || rcaLoading"
       data-test="rca-inflight-container"
-      class="flex items-center gap-3 rounded-lg px-4 py-3 mb-2 flex-shrink-0"
-      :class="isDarkMode ? 'bg-indigo-900/20 border border-indigo-700/40' : 'bg-indigo-50 border border-indigo-200'"
+      class="flex items-center gap-3 rounded-default px-4 py-3 mb-2 flex-shrink-0 bg-status-info-bg border border-banner-info-border"
     >
       <OSpinner variant="dots" size="xs" />
       <div>
         <p
-          class="text-sm font-medium mb-0"
-          :class="isDarkMode ? 'text-indigo-200' : 'text-indigo-800'"
+          class="text-sm font-medium mb-0 text-status-info-text"
         >
           {{ hasExistingRca ? 'AI SRE Agent is seeing what changed since the last analysis…' : 'AI SRE Agent is analyzing this incident, please wait…' }}
         </p>
         <p
-          class="text-xs mt-0.5 mb-0"
-          :class="isDarkMode ? 'text-indigo-300/70' : 'text-indigo-600/70'"
+          class="text-xs mt-0.5 mb-0 text-status-info-text opacity-70"
         >
           {{ hasExistingRca ? 'The report will be updated once the analysis is complete.' : 'The report will appear here once the analysis is complete.' }}
         </p>
@@ -57,8 +54,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <div
       v-if="rcaLoading && rcaStreamContent"
       data-test="rca-stream-container"
-      class="rca-container rounded p-3 flex-1 overflow-auto border"
-      :class="isDarkMode ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'"
+      class="rca-container rounded-default p-3 flex-1 overflow-auto border bg-surface-base border-border-default"
     >
       <div
         data-test="rca-stream-content"
@@ -68,7 +64,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </div>
 
     <!-- Existing analysis content -->
-    <div v-else-if="hasExistingRca && !rcaLoading" data-test="rca-existing-container" class="rca-container rounded p-3 flex-1 overflow-auto border" :class="isDarkMode ? ' border-gray-700' : 'bg-white border-gray-200'">
+    <div v-else-if="hasExistingRca && !rcaLoading" data-test="rca-existing-container" class="rca-container rounded-default p-3 flex-1 overflow-auto border bg-surface-base border-border-default">
       <div
         data-test="rca-existing-content"
         class="text-sm whitespace-pre-wrap rca-content"
@@ -121,3 +117,239 @@ export default defineComponent({
   },
 });
 </script>
+
+<style lang="scss" scoped>
+/* keep(generated-content): the RCA report is markdown rendered through
+   `v-html="sanitize(formattedRcaContent)"` above — the .rca-report-content wrapper
+   and all of its children are built as an HTML string in IncidentDetailDrawer.vue
+   (formatRcaContent), so there is no template to hang Tailwind utilities on. This
+   is ladder step 5 of O2_STYLE_MIGRATION_PLAN.md §3.1.
+
+   Moved out of the token layer (W1.a, F9), tokenised in W2.c. `:deep()` is required
+   and deliberate: v-html children never receive the scope id, so a plain scoped
+   selector would not match them. The private --rca-* vocabulary now aliases global
+   tokens; entries whose token already flips in dark mode carry no dark override.
+   Judgment mappings (near-identical values, flagged for the §7.4 eyeball pass):
+   slate text → neutral text tokens; inline-code pink (rose-700) → status-error-text. */
+:deep(.rca-report-content) {
+  --rca-bg-primary: var(--color-blue-50);
+  --rca-bg-secondary: var(--color-blue-50);
+  --rca-bg-code: var(--color-surface-subtle);
+  --rca-bg-table-even: var(--color-blue-50);
+  --rca-bg-table-hover: var(--color-blue-100);
+  --rca-bg-section: color-mix(in srgb, var(--color-blue-600) 5%, transparent);
+  --rca-bg-blockquote: var(--color-blue-50);
+
+  --rca-text-primary: var(--color-text-heading);
+  --rca-text-secondary: var(--color-text-body);
+  --rca-text-tertiary: var(--color-text-secondary);
+  --rca-text-heading: var(--color-blue-600);
+  --rca-text-code: var(--color-status-error-text);
+  --rca-text-blockquote: var(--color-blue-800);
+  --rca-text-strong: var(--color-blue-800);
+  --rca-text-em: var(--color-text-secondary);
+  --rca-text-list: var(--color-text-body);
+
+  --rca-border-primary: var(--color-border-strong);
+  --rca-border-secondary: var(--color-blue-200);
+  --rca-border-tertiary: var(--color-border-default);
+  --rca-border-table: var(--color-blue-200);
+  --rca-border-accent: var(--color-blue-500);
+
+  --rca-icon-color: var(--color-text-body);
+  --rca-shadow: var(--shadow-md);
+
+  font-family: var(--font-sans);
+  line-height: 1.6;
+  color: var(--rca-text-secondary);
+}
+
+/* `.dark` lives on <html>, which never carries this component's scope id, so
+   `.dark :deep(.rca-report-content)` would compile to `.dark[data-v] .rca-report-content`
+   and never match — dark mode would silently fall back to the light blue-50 washes.
+   Anchoring on `.rca-content` (a real element in this template, and a descendant of
+   html.dark) puts the scope id where it belongs: `.dark .rca-content[data-v] .rca-report-content`. */
+.dark .rca-content :deep(.rca-report-content) {
+  /* Only the entries whose dark value differs from what the aliased token flips
+     to on its own: the info-blue washes go neutral/deep-blue, accents brighten. */
+  --rca-bg-primary: var(--color-surface-panel);
+  --rca-bg-secondary: var(--color-surface-subtle);
+  --rca-bg-table-even: color-mix(in srgb, var(--color-blue-900) 35%, var(--color-surface-base));
+  --rca-bg-table-hover: color-mix(in srgb, var(--color-blue-800) 30%, var(--color-surface-panel));
+  --rca-bg-section: color-mix(in srgb, var(--color-blue-400) 8%, transparent);
+  --rca-bg-blockquote: var(--color-blue-900);
+
+  --rca-text-heading: var(--color-blue-400);
+  --rca-text-blockquote: var(--color-blue-400);
+  --rca-text-strong: var(--color-blue-400);
+
+  --rca-border-secondary: var(--color-border-default);
+  --rca-border-table: var(--color-border-default);
+  --rca-border-accent: var(--color-blue-400);
+
+  --rca-shadow: var(--shadow-lg);
+}
+
+:deep(.rca-report-content) {
+  .rca-h1 {
+    color: var(--rca-text-primary);
+    border-bottom-color: var(--rca-border-primary);
+  }
+
+  .rca-h2 {
+    color: var(--rca-text-heading);
+    border-left-color: var(--rca-text-heading);
+  }
+
+  .rca-section-bg {
+    background-color: var(--rca-bg-section);
+  }
+
+  .rca-h3 {
+    color: var(--rca-text-secondary);
+    position: relative;
+    padding-left: 1rem;
+
+    &::before {
+      content: '»';
+      position: absolute;
+      left: 0rem;
+      top: 50%;
+      transform: translateY(-50%);
+      color: var(--rca-icon-color);
+      font-size: var(--text-xl);
+      line-height: 1;
+    }
+  }
+
+  .rca-h4 {
+    color: var(--rca-text-tertiary);
+  }
+
+  .rca-ul,
+  .rca-ol {
+    list-style-position: outside;
+  }
+
+  .rca-ul {
+    list-style-type: disc;
+  }
+
+  .rca-list-item {
+    color: var(--rca-text-list);
+  }
+
+  .rca-ol-item {
+    color: var(--rca-text-list);
+  }
+
+  .rca-code-block {
+    background-color: var(--rca-bg-code);
+    border-color: var(--rca-border-tertiary);
+
+    pre {
+      color: var(--rca-text-list);
+    }
+  }
+
+  .rca-inline-code {
+    background-color: var(--rca-bg-code);
+    color: var(--rca-text-code);
+  }
+
+  .rca-table-wrapper {
+    border-radius: var(--radius-surface);
+    overflow: hidden;
+    box-shadow: var(--rca-shadow);
+  }
+
+  .rca-table {
+    border-collapse: separate;
+    border-spacing: 0;
+    background-color: var(--rca-bg-primary);
+    border: 1px solid var(--rca-border-secondary);
+
+    thead {
+      background: linear-gradient(to bottom, var(--rca-bg-secondary) 0%, var(--rca-bg-secondary) 100%);
+      border-bottom: 0.125rem solid var(--rca-border-primary);
+    }
+
+    th {
+      padding: 0.5rem 0.75rem;
+      color: var(--rca-text-primary);
+      font-weight: 700;
+      text-transform: uppercase;
+      font-size: var(--text-3xs);
+      letter-spacing: 0.08em;
+      text-align: left;
+      border-right: 1px solid var(--rca-border-secondary);
+
+      &:last-child {
+        border-right: none;
+      }
+    }
+
+    td {
+      padding: 0.5rem 0.75rem;
+      border-bottom: 1px solid var(--rca-border-table);
+      border-right: 1px solid var(--rca-border-table);
+      color: var(--rca-text-secondary);
+      font-size: var(--text-compact);
+      line-height: 1.6;
+      vertical-align: top;
+
+      &:last-child {
+        border-right: none;
+      }
+    }
+
+    tbody {
+      tr {
+        &:last-child td {
+          border-bottom: none;
+        }
+
+        &:hover {
+          background-color: var(--rca-bg-table-hover);
+        }
+      }
+    }
+
+    td:first-child,
+    td.rca-first-cell {
+      font-weight: 600;
+      color: var(--rca-text-tertiary);
+      white-space: nowrap;
+      background-color: var(--rca-bg-secondary);
+      min-width: 10rem;
+    }
+
+    tbody tr:hover td:first-child,
+    tbody tr:hover td.rca-first-cell {
+      background-color: var(--rca-bg-table-hover);
+    }
+  }
+
+  .rca-blockquote {
+    background-color: var(--rca-bg-blockquote);
+    border-left-color: var(--rca-border-accent);
+    color: var(--rca-text-blockquote);
+  }
+
+  hr {
+    border-top-color: var(--rca-border-tertiary);
+  }
+
+  strong {
+    color: var(--rca-text-strong);
+  }
+
+  em {
+    color: var(--rca-text-em);
+  }
+
+  p {
+    color: var(--rca-text-secondary);
+  }
+}
+</style>
diff --git a/web/src/components/alerts/IncidentServiceGraph.vue b/web/src/components/alerts/IncidentServiceGraph.vue
index 1d7e664046..1b843db24b 100644
--- a/web/src/components/alerts/IncidentServiceGraph.vue
+++ b/web/src/components/alerts/IncidentServiceGraph.vue
@@ -16,37 +16,36 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <div
-    class="incident-service-graph min-h-[400px] flex flex-col m-3 p-5 rounded-xl overflow-hidden transition-all duration-200 bg-[linear-gradient(135deg,#f9fafb_0%,#ffffff_100%)] border border-[#e5e7eb] shadow-[0_1px_3px_0_rgba(0,0,0,0.08),0_1px_2px_0_rgba(0,0,0,0.04),inset_0_0_0_1px_rgba(255,255,255,0.5)] hover:shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-1px_rgba(0,0,0,0.06),inset_0_0_0_1px_rgba(255,255,255,0.5)]"
-    style="height: calc(100vh - 202px); position: relative;"
+    class="incident-service-graph relative h-[calc(100vh-12.625rem)] min-h-100 flex flex-col m-3 p-5 rounded-default overflow-hidden transition-all duration-200 bg-[linear-gradient(135deg,#f9fafb_0%,#ffffff_100%)] border border-border-default shadow-[0_1px_3px_0_rgba(0,0,0,0.08),0_1px_2px_0_rgba(0,0,0,0.04),inset_0_0_0_1px_rgba(255,255,255,0.5)] hover:shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-1px_rgba(0,0,0,0.06),inset_0_0_0_1px_rgba(255,255,255,0.5)] dark:bg-[linear-gradient(135deg,var(--color-grey-800)_0%,var(--color-grey-900)_100%)] dark:border-grey-700 dark:shadow-[0_1px_3px_0_color-mix(in_srgb,var(--color-black)_30%,transparent),0_1px_2px_0_color-mix(in_srgb,var(--color-black)_20%,transparent),inset_0_0_0_1px_color-mix(in_srgb,var(--color-grey-700)_30%,transparent)] dark:hover:shadow-[0_4px_6px_-1px_color-mix(in_srgb,var(--color-black)_40%,transparent),0_2px_4px_-1px_color-mix(in_srgb,var(--color-black)_30%,transparent),inset_0_0_0_1px_color-mix(in_srgb,var(--color-grey-700)_30%,transparent)]"
   >
-    <!-- Info Icon → Graph Legend popover (hover to show, like the previous behavior) -->
+    <!-- Info Icon → Graph Legend popover (hover to show) -->
     <span
       v-if="!loading && graphData && graphData.nodes && graphData.nodes.length > 0"
-      class="info-icon-btn absolute top-4 right-4 z-10"
+      class="info-icon-btn group absolute top-4 right-4 z-10"
     >
       <OButton variant="ghost" size="icon-circle-sm">
         <OIcon name="info-outline" size="sm" />
       </OButton>
       <div
-        class="graph-legend absolute top-[calc(100%+8px)] right-0 min-w-[240px] py-[14px] px-4 text-[13px] leading-normal text-[#1f2937] bg-white border border-(--o2-border) rounded-lg shadow-[0_10px_20px_rgba(0,0,0,0.12),0_3px_6px_rgba(0,0,0,0.06)] opacity-0 invisible -translate-y-1 transition-all duration-150 pointer-events-none whitespace-nowrap"
+        class="graph-legend absolute top-[calc(100%+8px)] right-0 min-w-60 py-3.5 px-4 text-compact leading-normal text-text-body bg-surface-overlay border border-border-default rounded-default shadow-[0_10px_20px_rgba(0,0,0,0.12),0_3px_6px_rgba(0,0,0,0.06)] opacity-0 invisible -translate-y-1 transition-all duration-150 pointer-events-none whitespace-nowrap group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 group-hover:pointer-events-auto group-focus-within:opacity-100 group-focus-within:visible group-focus-within:translate-y-0 group-focus-within:pointer-events-auto dark:text-grey-200 dark:bg-grey-800 dark:border-[color-mix(in_srgb,var(--color-white)_12%,transparent)] dark:shadow-[0_10px_20px_color-mix(in_srgb,var(--color-black)_60%,transparent),0_3px_6px_color-mix(in_srgb,var(--color-black)_40%,transparent)]"
         role="tooltip"
       >
         <div class="font-semibold text-sm mb-2.5">Graph Legend</div>
         <div class="graph-legend__row flex items-center gap-2 py-1">
-          <span class="graph-legend__dot text-[14px] leading-none w-[14px] text-center shrink-0" style="color: #ef4444;">●</span>
+          <span class="graph-legend__dot text-sm leading-none w-3.5 text-center shrink-0 text-status-negative">●</span>
           Red = Potential Root Cause
         </div>
         <div class="graph-legend__row flex items-center gap-2 py-1">
-          <span class="graph-legend__dot text-[14px] leading-none w-[14px] text-center shrink-0" style="color: #f97316;">●</span>
+          <span class="graph-legend__dot text-sm leading-none w-3.5 text-center shrink-0 text-status-warning-text">●</span>
           Orange = High Frequency
         </div>
         <div class="graph-legend__row flex items-center gap-2 py-1">
-          <span class="graph-legend__dot text-[14px] leading-none w-[14px] text-center shrink-0" style="color: #3b82f6;">●</span>
+          <span class="graph-legend__dot text-sm leading-none w-3.5 text-center shrink-0 text-text-link">●</span>
           Blue = Normal
         </div>
-        <div class="graph-legend__divider h-px bg-(--o2-border) my-2" />
+        <div class="graph-legend__divider h-px bg-border-default my-2 dark:bg-[color-mix(in_srgb,var(--color-white)_15%,transparent)]" />
         <div class="graph-legend__row flex items-center gap-2 py-1">
-          <span class="graph-legend__dot text-[14px] leading-none w-[14px] text-center shrink-0" style="color: #a78bfa;">→</span>
+          <span class="graph-legend__dot text-sm leading-none w-3.5 text-center shrink-0 text-badge-purple-ol-text">→</span>
           Purple arrows show temporal flow
         </div>
       </div>
@@ -55,8 +54,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <!-- Loading State -->
     <div
       v-if="loading"
-      class="flex items-center justify-center h-full"
-      :class="isDarkMode ? 'bg-gray-900/50' : 'bg-white/50'"
+      class="flex items-center justify-center h-full bg-surface-base/50"
     >
       <OSpinner size="md" />
     </div>
@@ -66,12 +64,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       v-else-if="!graphData || !graphData.nodes || graphData.nodes.length === 0"
       class="flex flex-col items-center justify-center gap-3 h-full"
     >
-      <OIcon name="hub" :class="isDarkMode ? 'text-gray-600' : 'text-gray-300'" style="width: 48px; height: 48px;" />
+      <!-- size-12! (48px) exceeds OIcon's largest `size` prop (xl = 40px); the `!`
+           is required because OIcon's own `size-6` default sits in the same layer. -->
+      <OIcon name="hub" class="text-text-muted size-12!" />
       <div class="text-center">
-        <div class="text-sm font-medium" :class="isDarkMode ? 'text-gray-400' : 'text-gray-600'">
+        <div class="text-sm font-medium text-text-secondary">
           Service Graph Unavailable
         </div>
-        <div class="text-xs mt-1" :class="isDarkMode ? 'text-gray-500' : 'text-gray-400'">
+        <div class="text-xs mt-1 text-text-secondary">
           No topology data available for this incident.
         </div>
       </div>
@@ -80,7 +80,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <!-- Graph Canvas using ECharts -->
     <div
       v-if="!loading && graphData && graphData.nodes && graphData.nodes.length > 0"
-      style="width: 100%; height: 100%;"
+      class="w-full h-full"
     >
       <ChartRenderer
         ref="chartRendererRef"
@@ -94,6 +94,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <script lang="ts">
 import { defineComponent, ref, computed, watch } from "vue";
 import { useStore } from "vuex";
+import { useTheme } from "@/composables/useTheme";
 import { forceSimulation, forceManyBody, forceLink, forceCenter, forceCollide, forceX, forceY } from "d3-force";
 import ChartRenderer from "@/components/dashboards/panels/ChartRenderer.vue";
 import { AlertNode } from "@/services/incidents";
@@ -126,7 +127,7 @@ export default defineComponent({
     const chartKey = ref(0);
     const nodePositions = ref<Map<string, { x: number; y: number }>>(new Map());
 
-    const isDarkMode = computed(() => store.state.theme === "dark");
+    const { isDark: isDarkMode } = useTheme();
 
     // Use topology_context directly from props
     const graphData = computed(() => props.topologyContext);
@@ -216,7 +217,7 @@ export default defineComponent({
       return simulation.nodes().map(n => ({ ...n }));
     };
 
-    // No longer need to load graph via API - data comes from props
+    // Data comes from props.
     const loadGraph = () => {
       // Increment chartKey to force re-render if topology_context changes
       chartKey.value++;
@@ -243,13 +244,9 @@ export default defineComponent({
     };
 
     // Above this raw-node count the graph is bucketed by time to stay legible;
-    // at or below it every firing is shown 1:1 (preserving the clean timeline).
-    // Kept low because the backend already caps nodes well below the alert count
-    // (e.g. 434 alerts -> 42 nodes), and the force layout blobs past ~15 nodes.
+    // at or below it every firing is shown 1:1. The force layout blobs past ~15 nodes.
     const NODE_CAP = 15;
     // Pick the smallest time unit that yields no more than this many windows.
-    // Kept low so dense incidents collapse into a coarse, readable timeline
-    // rather than dozens of overlapping nodes.
     const BUCKET_TARGET_MAX = 24;
     // Bucket-unit ladder in microseconds (backend timestamps are microseconds).
     const US = 1000; // microseconds per millisecond
@@ -512,8 +509,8 @@ export default defineComponent({
               const firstTime = new Date(originalNode.first_fired_at / 1000).toLocaleString();
               const lastTime = originalNode.alert_count > 1 ? new Date(originalNode.last_fired_at / 1000).toLocaleString() : null;
 
-              let html = `<div style="padding: 8px; font-size: 12px;">`;
-              html += `<strong style="font-size: 14px;">${originalNode.alert_name}</strong><br/>`;
+              let html = `<div style="padding: 0.5rem; font-size: var(--text-xs);">`;
+              html += `<strong style="font-size: var(--text-sm);">${originalNode.alert_name}</strong><br/>`;
               html += `Service: <strong>${originalNode.service_name}</strong><br/><br/>`;
               html += `Alert Count: <strong>${originalNode.alert_count}</strong><br/>`;
               html += `First Fired: ${firstTime}<br/>`;
@@ -521,7 +518,7 @@ export default defineComponent({
                 html += `Last Fired: ${lastTime}<br/>`;
               }
               if (index === 0) {
-                html += `<br/><span style="color: #ef4444;">⚠ First Alert (Potential Root Cause)</span>`;
+                html += `<br/><span style="color: var(--color-status-negative);">⚠ First Alert (Potential Root Cause)</span>`;
               }
               html += `</div>`;
               return html;
@@ -552,8 +549,8 @@ export default defineComponent({
           },
           tooltip: {
             formatter: () => {
-              let html = `<div style="padding: 8px; font-size: 12px; text-align: center;">`;
-              html += `<strong>${sourceNode.alert_name}</strong> <span style="color: #a78bfa;">→</span> <strong>${targetNode.alert_name}</strong><br/><br/>`;
+              let html = `<div style="padding: 0.5rem; font-size: var(--text-xs); text-align: center;">`;
+              html += `<strong>${sourceNode.alert_name}</strong> <span style="color: var(--color-badge-purple-ol-text);">→</span> <strong>${targetNode.alert_name}</strong><br/><br/>`;
 
               if (edge.edge_type === "temporal") {
                 const sourceTime = new Date(sourceNode.first_fired_at / 1000);
@@ -572,12 +569,12 @@ export default defineComponent({
                 else if (minutes > 0) timeStr = `${minutes}m ${seconds % 60}s`;
                 else timeStr = `${seconds}s`;
 
-                html += `<span style="color: #a78bfa;">⏱ Time difference: <strong>${timeStr}</strong></span><br/>`;
+                html += `<span style="color: var(--color-badge-purple-ol-text);">⏱ Time difference: <strong>${timeStr}</strong></span><br/>`;
                 html += `From: ${sourceTime.toLocaleString()}<br/>`;
                 html += `To: ${targetTime.toLocaleString()}<br/>`;
-                html += `<br/><span style="color: #a78bfa;">Temporal correlation</span>`;
+                html += `<br/><span style="color: var(--color-badge-purple-ol-text);">Temporal correlation</span>`;
               } else {
-                html += `<span style="color: #9ca3af;">Service dependency</span>`;
+                html += `<span style="color: var(--color-text-muted);">Service dependency</span>`;
               }
 
               html += `</div>`;
@@ -649,53 +646,3 @@ export default defineComponent({
   },
 });
 </script>
-
-<style>
-/* Graph Legend popover — appears on hover of the info-icon-btn wrapper.
-   Background/text use explicit colors per theme because `--o2-popover-background`
-   and `--o2-text-primary` both resolve to `#F0F1F2` in dark mode, which gave
-   us a white card with invisible (same-color) text. */
-
-/* Dark-mode overrides — using both signals so it works regardless of which
-   class is currently toggled (theme.ts toggles both `body.body--dark` and
-   `html.dark`). Vue scoped CSS scopes only the rightmost selector. */
-html.dark .graph-legend,
-body.body--dark .graph-legend {
-  color: #e5e7eb;
-  background-color: #1f2937;
-  border-color: rgba(255, 255, 255, 0.12);
-  box-shadow:
-    0 10px 20px rgba(0, 0, 0, 0.6),
-    0 3px 6px rgba(0, 0, 0, 0.4);
-}
-
-html.dark .graph-legend__divider,
-body.body--dark .graph-legend__divider {
-  background-color: rgba(255, 255, 255, 0.15);
-}
-
-.info-icon-btn:hover .graph-legend,
-.info-icon-btn:focus-within .graph-legend {
-  opacity: 1;
-  visibility: visible;
-  transform: translateY(0);
-  pointer-events: auto;
-}
-
-/* Dark mode for incident-service-graph container */
-.body--dark .incident-service-graph {
-  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
-  border: 1px solid #374151;
-  box-shadow:
-    0 1px 3px 0 rgba(0, 0, 0, 0.3),
-    0 1px 2px 0 rgba(0, 0, 0, 0.2),
-    inset 0 0 0 1px rgba(75, 85, 99, 0.3);
-}
-
-.body--dark .incident-service-graph:hover {
-  box-shadow:
-    0 4px 6px -1px rgba(0, 0, 0, 0.4),
-    0 2px 4px -1px rgba(0, 0, 0, 0.3),
-    inset 0 0 0 1px rgba(75, 85, 99, 0.3);
-}
-</style>
diff --git a/web/src/components/alerts/IncidentTableOfContents.spec.ts b/web/src/components/alerts/IncidentTableOfContents.spec.ts
index d11aa490c6..1d90adfa7a 100644
--- a/web/src/components/alerts/IncidentTableOfContents.spec.ts
+++ b/web/src/components/alerts/IncidentTableOfContents.spec.ts
@@ -215,8 +215,8 @@ describe("IncidentTableOfContents", () => {
       const header = findByTestId(wrapper, "toc-header");
       const title = findByTestId(wrapper, "toc-header-title");
 
-      expect(header.classes()).toContain("border-gray-700");
-      expect(title.classes()).toContain("text-gray-300");
+      expect(header.classes()).toContain("border-border-default");
+      expect(title.classes()).toContain("text-text-body");
     });
 
     it("should apply light mode styles to header in light mode", () => {
@@ -224,8 +224,8 @@ describe("IncidentTableOfContents", () => {
       const header = findByTestId(wrapper, "toc-header");
       const title = findByTestId(wrapper, "toc-header-title");
 
-      expect(header.classes()).toContain("border-gray-200");
-      expect(title.classes()).toContain("text-gray-700");
+      expect(header.classes()).toContain("border-border-default");
+      expect(title.classes()).toContain("text-text-body");
     });
   });
 
@@ -244,13 +244,13 @@ describe("IncidentTableOfContents", () => {
     it("should apply dark mode styles to empty state", () => {
       wrapper = mountComponent([], {}, true);
       const emptyState = findByTestId(wrapper, "toc-empty-state");
-      expect(emptyState.classes()).toContain("text-gray-500");
+      expect(emptyState.classes()).toContain("text-text-secondary");
     });
 
     it("should apply light mode styles to empty state", () => {
       wrapper = mountComponent([], {}, false);
       const emptyState = findByTestId(wrapper, "toc-empty-state");
-      expect(emptyState.classes()).toContain("text-gray-400");
+      expect(emptyState.classes()).toContain("text-text-secondary");
     });
 
     it("should not display empty state when items exist", () => {
@@ -320,7 +320,7 @@ describe("IncidentTableOfContents", () => {
       wrapper = mountComponent(toc, {}, true);
 
       const content = findByTestId(wrapper, "toc-level1-content-sec1");
-      expect(content.classes()).toContain("text-gray-200");
+      expect(content.classes()).toContain("text-text-heading");
     });
 
     it("should apply light mode styles to level 1 items", () => {
@@ -328,7 +328,7 @@ describe("IncidentTableOfContents", () => {
       wrapper = mountComponent(toc, {}, false);
 
       const content = findByTestId(wrapper, "toc-level1-content-sec1");
-      expect(content.classes()).toContain("text-gray-900");
+      expect(content.classes()).toContain("text-text-heading");
     });
   });
 
@@ -385,7 +385,7 @@ describe("IncidentTableOfContents", () => {
       wrapper = mountComponent(toc, createExpandedSections(["parent1"]), true);
 
       const content = findByTestId(wrapper, "toc-level2-content-child1-1");
-      expect(content.classes()).toContain("text-gray-300");
+      expect(content.classes()).toContain("text-text-body");
     });
 
     it("should apply light mode styles to level 2 items", () => {
@@ -393,7 +393,7 @@ describe("IncidentTableOfContents", () => {
       wrapper = mountComponent(toc, createExpandedSections(["parent1"]), false);
 
       const content = findByTestId(wrapper, "toc-level2-content-child1-1");
-      expect(content.classes()).toContain("text-gray-700");
+      expect(content.classes()).toContain("text-text-body");
     });
   });
 
@@ -452,8 +452,8 @@ describe("IncidentTableOfContents", () => {
       wrapper = mountComponent(toc, createExpandedSections(["l1", "l2"]), true);
 
       const item = findByTestId(wrapper, "toc-level3-item-l3-1");
-      expect(item.classes()).toContain("hover:bg-gray-700");
-      expect(item.classes()).toContain("text-gray-400");
+      expect(item.classes()).toContain("hover:bg-surface-subtle-hover");
+      expect(item.classes()).toContain("text-text-secondary");
     });
 
     it("should apply light mode hover styles to level 3 items", () => {
@@ -461,8 +461,8 @@ describe("IncidentTableOfContents", () => {
       wrapper = mountComponent(toc, createExpandedSections(["l1", "l2"]), false);
 
       const item = findByTestId(wrapper, "toc-level3-item-l3-1");
-      expect(item.classes()).toContain("hover:bg-blue-50");
-      expect(item.classes()).toContain("text-gray-600");
+      expect(item.classes()).toContain("hover:bg-surface-subtle-hover");
+      expect(item.classes()).toContain("text-text-secondary");
     });
   });
 
@@ -674,15 +674,15 @@ describe("IncidentTableOfContents", () => {
 
       // Level 1 dark mode
       const l1Content = findByTestId(wrapper, "toc-level1-content-l1");
-      expect(l1Content.classes()).toContain("text-gray-200");
+      expect(l1Content.classes()).toContain("text-text-heading");
 
       // Level 2 dark mode
       const l2Content = findByTestId(wrapper, "toc-level2-content-l2");
-      expect(l2Content.classes()).toContain("text-gray-300");
+      expect(l2Content.classes()).toContain("text-text-body");
 
       // Level 3 dark mode
       const l3Item = findByTestId(wrapper, "toc-level3-item-l3-1");
-      expect(l3Item.classes()).toContain("text-gray-400");
+      expect(l3Item.classes()).toContain("text-text-secondary");
     });
 
     it("should handle complex nested structure with multiple branches", () => {
diff --git a/web/src/components/alerts/IncidentTableOfContents.vue b/web/src/components/alerts/IncidentTableOfContents.vue
index 9b63adca57..e0aae46bfd 100644
--- a/web/src/components/alerts/IncidentTableOfContents.vue
+++ b/web/src/components/alerts/IncidentTableOfContents.vue
@@ -18,20 +18,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <div data-test="toc-container" class="px-2 pt-4 pb-2 flex flex-col h-full overflow-hidden">
     <div
       data-test="toc-section-container"
-      class="overflow-hidden flex flex-col flex-1 border border-[var(--o2-border-color)] rounded-md"
+      class="overflow-hidden flex flex-col flex-1 border border-card-glass-border rounded-default"
     >
       <!-- Header -->
       <div
         data-test="toc-header"
-        :class="[
-          'px-3 py-2 flex items-center gap-2 border-b flex-shrink-0 !bg-[var(--o2-table-header-bg)]',
-          isDarkMode
-            ? 'border-gray-700'
-            : 'border-gray-200'
-        ]"
+        class="px-3 py-2 flex items-center gap-2 border-b flex-shrink-0 border-border-default !bg-[var(--color-theme-table-header-bg)]"
       >
         <OIcon data-test="toc-header-icon" name="format-list-bulleted" size="sm" class="opacity-80" />
-        <span data-test="toc-header-title" :class="isDarkMode ? 'text-gray-300' : 'text-gray-700'" class="text-xs font-semibold">
+        <span data-test="toc-header-title" class="text-xs font-semibold text-text-body">
           Table of Contents
         </span>
       </div>
@@ -39,7 +34,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <!-- Content -->
       <div data-test="toc-content" class="p-3 flex-1 overflow-auto">
         <!-- Table of Contents -->
-        <div v-if="tableOfContents.length === 0" data-test="toc-empty-state" :class="isDarkMode ? 'text-gray-500' : 'text-gray-400'" class="text-xs italic">
+        <div v-if="tableOfContents.length === 0" data-test="toc-empty-state" class="text-xs italic text-text-secondary">
           No sections available
         </div>
         <div v-else class="space-y-1">
@@ -49,12 +44,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <!-- Level 1 Item -->
               <div
                 :data-test="`toc-level1-content-${item.id}`"
-                :class="[
-                  'flex items-center gap-2 px-2 py-1.5 rounded transition-colors',
-                  isDarkMode
-                    ? 'text-gray-200'
-                    : 'text-gray-900'
-                ]"
+                class="flex items-center gap-2 px-2 py-1.5 rounded-default transition-colors text-text-heading"
               >
                 <!-- Icon on the left -->
                 <OIcon
@@ -67,12 +57,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <span
                   :data-test="`toc-level1-text-${item.id}`"
                   @click="$emit('scroll-to-section', item.id)"
-                  :class="[
-                    'text-xs font-medium truncate flex-1 cursor-pointer',
-                    isDarkMode
-                      ? 'hover:text-blue-400'
-                      : 'hover:text-blue-600'
-                  ]"
+                  class="text-xs font-medium truncate flex-1 cursor-pointer hover:text-text-link-hover"
                 >{{ item.text }}</span>
                 <!-- Expand button on the right (only for items with children) -->
                 <OButton
@@ -95,12 +80,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <!-- Level 2 Item -->
                     <div
                       :data-test="`toc-level2-content-${child.id}`"
-                      :class="[
-                        'flex items-center gap-2 px-2 py-1 rounded transition-colors',
-                        isDarkMode
-                          ? 'text-gray-300'
-                          : 'text-gray-700'
-                      ]"
+                      class="flex items-center gap-2 px-2 py-1 rounded-default transition-colors text-text-body"
                     >
                       <!-- Icon on the left -->
                       <OIcon
@@ -113,12 +93,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       <span
                         :data-test="`toc-level2-text-${child.id}`"
                         @click="$emit('scroll-to-section', child.id)"
-                        :class="[
-                          'text-xs truncate flex-1 cursor-pointer',
-                          isDarkMode
-                            ? 'hover:text-blue-400'
-                            : 'hover:text-blue-600'
-                        ]"
+                        class="text-xs truncate flex-1 cursor-pointer hover:text-text-link-hover"
                       >{{ child.text }}</span>
                       <!-- Expand button on the right (only for items with children) -->
                       <OButton
@@ -141,15 +116,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         :key="grandchild.id"
                         :data-test="`toc-level3-item-${grandchild.id}`"
                         @click="$emit('scroll-to-section', grandchild.id)"
-                        :class="[
-                          'flex items-center gap-2 px-2 py-1 rounded cursor-pointer transition-colors',
-                          isDarkMode
-                            ? 'hover:bg-gray-700 text-gray-400'
-                            : 'hover:bg-blue-50 text-gray-600'
-                        ]"
+                        class="flex items-center gap-2 px-2 py-1 rounded-default cursor-pointer transition-colors text-text-secondary hover:bg-surface-subtle-hover"
                       >
                         <OIcon :data-test="`toc-level3-icon-${grandchild.id}`" name="fiber-manual-record" size="xs" class="opacity-60" />
-                        <span :data-test="`toc-level3-text-${grandchild.id}`" class="text-[11px] truncate">{{ grandchild.text }}</span>
+                        <span :data-test="`toc-level3-text-${grandchild.id}`" class="text-2xs truncate">{{ grandchild.text }}</span>
                       </div>
                     </div>
                   </div>
diff --git a/web/src/components/alerts/IncidentTimeline.spec.ts b/web/src/components/alerts/IncidentTimeline.spec.ts
index 3f324988f9..47b3d1e78b 100644
--- a/web/src/components/alerts/IncidentTimeline.spec.ts
+++ b/web/src/components/alerts/IncidentTimeline.spec.ts
@@ -1,4 +1,4 @@
-// Copyright 2026 OpenObserve Inc.
+// Copyright 2026 OpenObserve Inc.
 //
 // This program is free software: you can redistribute it and/or modify
 // it under the terms of the GNU Affero General Public License as published by
@@ -268,25 +268,25 @@ describe("IncidentTimeline - getEventBadgeColor", () => {
   it("returns green for Resolved", async () => {
     const w = await mountComp();
     await flushPromises();
-    expect((w.vm as any).getEventBadgeColor({ type: "Resolved" })).toBe("#059669");
+    expect((w.vm as any).getEventBadgeColor({ type: "Resolved" })).toBe("var(--color-success-600)");
   });
 
   it("returns red for SeverityUpgrade", async () => {
     const w = await mountComp();
     await flushPromises();
-    expect((w.vm as any).getEventBadgeColor({ type: "SeverityUpgrade" })).toBe("#EF4444");
+    expect((w.vm as any).getEventBadgeColor({ type: "SeverityUpgrade" })).toBe("var(--color-error-500)");
   });
 
   it("returns purple for ai_analysis_begin", async () => {
     const w = await mountComp();
     await flushPromises();
-    expect((w.vm as any).getEventBadgeColor({ type: "ai_analysis_begin" })).toBe("#8B5CF6");
+    expect((w.vm as any).getEventBadgeColor({ type: "ai_analysis_begin" })).toBe("var(--color-ai-accent)");
   });
 
   it("returns gray for unknown type", async () => {
     const w = await mountComp();
     await flushPromises();
-    expect((w.vm as any).getEventBadgeColor({ type: "unknown" })).toBe("#6B7280");
+    expect((w.vm as any).getEventBadgeColor({ type: "unknown" })).toBe("var(--color-grey-500)");
   });
 });
 
@@ -324,25 +324,25 @@ describe("IncidentTimeline - getSeverityColor", () => {
   it("returns red for P1", async () => {
     const w = await mountComp();
     await flushPromises();
-    expect((w.vm as any).getSeverityColor("P1")).toBe("#EF4444");
+    expect((w.vm as any).getSeverityColor("P1")).toBe("var(--color-error-500)");
   });
 
   it("returns orange for P2", async () => {
     const w = await mountComp();
     await flushPromises();
-    expect((w.vm as any).getSeverityColor("P2")).toBe("#F97316");
+    expect((w.vm as any).getSeverityColor("P2")).toBe("var(--color-orange-500)");
   });
 
   it("returns blue for P4", async () => {
     const w = await mountComp();
     await flushPromises();
-    expect((w.vm as any).getSeverityColor("P4")).toBe("#3B82F6");
+    expect((w.vm as any).getSeverityColor("P4")).toBe("var(--color-blue-500)");
   });
 
   it("returns gray for unknown severity", async () => {
     const w = await mountComp();
     await flushPromises();
-    expect((w.vm as any).getSeverityColor("P99")).toBe("#6B7280");
+    expect((w.vm as any).getSeverityColor("P99")).toBe("var(--color-grey-500)");
   });
 });
 
@@ -505,11 +505,11 @@ describe("IncidentTimeline - getAvatarColor", () => {
     (incidentsService.getEvents as any).mockResolvedValue({ data: { events: [] } });
   });
 
-  it("returns a hex color string", async () => {
+  it("returns a color token string", async () => {
     const w = await mountComp();
     await flushPromises();
     const color = (w.vm as any).getAvatarColor("alice");
-    expect(color).toMatch(/^#[0-9A-Fa-f]{6}$/);
+    expect(color).toMatch(/^var\(--color-[a-z0-9-]+\)$/);
   });
 
   it("returns consistent color for same username", async () => {
diff --git a/web/src/components/alerts/IncidentTimeline.vue b/web/src/components/alerts/IncidentTimeline.vue
index d74fed0cb8..aadb297418 100644
--- a/web/src/components/alerts/IncidentTimeline.vue
+++ b/web/src/components/alerts/IncidentTimeline.vue
@@ -15,7 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="min-h-[400px] flex flex-col h-full">
+  <div class="min-h-100 flex flex-col h-full">
 
     <!-- Loading -->
     <div v-if="loading" class="flex justify-center items-center py-12">
@@ -25,11 +25,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <!-- Empty state -->
     <div
       v-else-if="events.length === 0"
-      class="flex flex-col items-center justify-center py-16 text-gray-500"
+      class="flex flex-col items-center justify-center py-16 text-text-muted"
     >
-      <OIcon name="forum" class="mb-3 opacity-40" style="width: 56px; height: 56px;" />
+      <OIcon name="forum" class="mb-3 opacity-40 size-14!" />
       <div class="text-base font-medium mb-1">No activity yet</div>
-      <div class="text-sm text-gray-400">Events and comments will appear here</div>
+      <div class="text-sm text-text-muted">Events and comments will appear here</div>
     </div>
 
     <!-- Activity Feed with Timeline -->
@@ -54,12 +54,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <div class="relative">
         <!-- Vertical Timeline Line -->
         <div
-          class="absolute left-3 top-0 bottom-0 w-0.5"
-          :style="{
-            backgroundColor: store.state.theme === 'dark' ? '#2d333b' : '#e5e7eb',
-            marginTop: '12px',
-            marginBottom: '12px'
-          }"
+          class="absolute left-3 top-0 bottom-0 w-0.5 bg-border-default my-3"
         ></div>
 
         <!-- Events -->
@@ -77,11 +72,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   <!-- User Avatar -->
                   <div
                     v-if="getUserId(event) !== 'System'"
-                    class="w-6 h-6 rounded-full flex items-center justify-center z-10 relative"
-                    :style="{
-                      backgroundColor: store.state.theme === 'dark' ? '#181a1b' : '#ffffff',
-                      border: store.state.theme === 'dark' ? '1px solid #444c56' : '1px solid #d0d7de'
-                    }"
+                    class="w-6 h-6 rounded-full flex items-center justify-center z-10 relative bg-surface-base border border-border-default"
                   >
                     <OIcon
                       name="person"
@@ -92,11 +83,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   <!-- System Event Icon -->
                   <div
                     v-else
-                    class="w-6 h-6 rounded-full flex items-center justify-center z-10 relative"
-                    :style="{
-                      backgroundColor: store.state.theme === 'dark' ? '#2d333b' : '#f6f8fa',
-                      border: store.state.theme === 'dark' ? '1px solid #444c56' : '1px solid #d0d7de'
-                    }"
+                    class="w-6 h-6 rounded-full flex items-center justify-center z-10 relative bg-surface-subtle border border-border-default"
                   >
                     <OIcon
                       :name="getEventIcon(event)"
@@ -113,23 +100,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <template v-if="getUserId(event) !== 'System'">
                       <span
                         class="font-semibold text-sm"
-                        :class="store.state.theme === 'dark' ? 'text-gray-100' : 'text-gray-900'"
+                        :class="'text-text-body'"
                       >
                         {{ getUserId(event) }}
                       </span>
                       <span
                         v-if="event.type !== 'SeverityUpgrade' && event.type !== 'SeverityOverride'"
-                        class="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold"
-                        :style="{
-                          backgroundColor: store.state.theme === 'dark' ? getEventBadgeColor(event) + '30' : getEventBadgeColor(event) + '15',
-                          border: `1px solid ${getEventBadgeColor(event)}${store.state.theme === 'dark' ? '50' : '30'}`,
-                          color: store.state.theme === 'dark' ? '#ffffff' : getEventBadgeColor(event)
-                        }"
+                        class="inline-flex items-center px-2 py-0.5 rounded-default text-xs font-semibold"
+                        :style="badgeStyle(getEventBadgeColor(event))"
                       >
                         {{ getEventBadgeText(event) }}
                       </span>
                       <span class="text-sm"
-                        :class="store.state.theme === 'dark' ? 'text-gray-300' : 'text-gray-700'"
+                        :class="'text-text-body'"
                         v-html="DOMPurify.sanitize(getInlineEventText(event))"
                       ></span>
                     </template>
@@ -138,59 +121,47 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       <!-- AI events: "AI SRE" badge first, then message text -->
                       <template v-if="event.type === 'ai_analysis_begin' || event.type === 'ai_analysis_complete' || event.type === 'ai_analysis_failed'">
                         <span
-                          class="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold"
-                          :style="{
-                            backgroundColor: store.state.theme === 'dark' ? getEventBadgeColor(event) + '30' : getEventBadgeColor(event) + '15',
-                            border: `1px solid ${getEventBadgeColor(event)}${store.state.theme === 'dark' ? '50' : '30'}`,
-                            color: store.state.theme === 'dark' ? '#ffffff' : getEventBadgeColor(event)
-                          }"
+                          class="inline-flex items-center px-2 py-0.5 rounded-default text-xs font-semibold"
+                          :style="badgeStyle(getEventBadgeColor(event))"
                         >
                           AI SRE
                           <OTooltip v-if="event.type === 'ai_analysis_failed' && getFailureTooltip(event)" :delay="300" side="bottom" align="start" :max-width="'24rem'" :content="getFailureTooltip(event)" />
                         </span>
                         <span class="text-sm"
-                          :class="store.state.theme === 'dark' ? 'text-gray-300' : 'text-gray-700'"
+                          :class="'text-text-body'"
                           v-html="DOMPurify.sanitize(getInlineEventText(event))"
                         ></span>
                       </template>
                       <!-- For Alert events, show badge first -->
                       <template v-else-if="event.type === 'Alert'">
                         <span
-                          class="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold"
-                          :style="{
-                            backgroundColor: store.state.theme === 'dark' ? getEventBadgeColor(event) + '30' : getEventBadgeColor(event) + '15',
-                            border: `1px solid ${getEventBadgeColor(event)}${store.state.theme === 'dark' ? '50' : '30'}`,
-                            color: store.state.theme === 'dark' ? '#ffffff' : getEventBadgeColor(event)
-                          }"
+                          class="inline-flex items-center px-2 py-0.5 rounded-default text-xs font-semibold"
+                          :style="badgeStyle(getEventBadgeColor(event))"
                         >
                           {{ getEventBadgeText(event) }}
                         </span>
                         <span class="text-sm"
-                          :class="store.state.theme === 'dark' ? 'text-gray-300' : 'text-gray-700'"
+                          :class="'text-text-body'"
                           v-html="DOMPurify.sanitize(getInlineEventText(event))"
                         ></span>
                       </template>
                       <!-- All other system events: text then badge (except severity changes) -->
                       <template v-else>
                         <span class="text-sm"
-                          :class="store.state.theme === 'dark' ? 'text-gray-300' : 'text-gray-700'"
+                          :class="'text-text-body'"
                           v-html="getInlineEventText(event)"
                         ></span>
                         <span
                           v-if="event.type !== 'SeverityUpgrade' && event.type !== 'SeverityOverride'"
-                          class="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold"
-                          :style="{
-                            backgroundColor: store.state.theme === 'dark' ? getEventBadgeColor(event) + '30' : getEventBadgeColor(event) + '15',
-                            border: `1px solid ${getEventBadgeColor(event)}${store.state.theme === 'dark' ? '50' : '30'}`,
-                            color: store.state.theme === 'dark' ? '#ffffff' : getEventBadgeColor(event)
-                          }"
+                          class="inline-flex items-center px-2 py-0.5 rounded-default text-xs font-semibold"
+                          :style="badgeStyle(getEventBadgeColor(event))"
                         >
                           {{ getEventBadgeText(event) }}
                         </span>
                       </template>
                     </template>
                     <span class="text-xs"
-                      :class="store.state.theme === 'dark' ? 'text-gray-400' : 'text-gray-500'"
+                      :class="'text-text-secondary'"
                     >
                       {{ formatRelativeTime(event.timestamp) }}
                     </span>
@@ -205,11 +176,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <!-- Avatar -->
                 <div class="flex-shrink-0">
                   <div
-                    class="w-6 h-6 rounded-full flex items-center justify-center z-10 relative"
-                    :style="{
-                      backgroundColor: store.state.theme === 'dark' ? '#181a1b' : '#ffffff',
-                      border: store.state.theme === 'dark' ? '1px solid #444c56' : '1px solid #d0d7de'
-                    }"
+                    class="w-6 h-6 rounded-full flex items-center justify-center z-10 relative bg-surface-base border border-border-default"
                   >
                     <OIcon
                       name="person"
@@ -223,25 +190,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <div class="flex-1 min-w-0">
                   <!-- Comment Box -->
                   <div
-                    class="rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow"
-                    :style="store.state.theme === 'dark'
-                      ? { backgroundColor: '#181a1b', border: '1px solid #3f4447' }
-                      : { backgroundColor: '#ffffff', border: '1px solid #d1d5db' }"
+                    class="rounded-default overflow-hidden hover:shadow-md transition-shadow bg-surface-base border border-border-default"
                   >
                     <!-- Header -->
                     <div
-                      class="px-4 py-2 flex items-center gap-2 border-b"
-                      :style="store.state.theme === 'dark'
-                        ? { backgroundColor: '#0f1011', borderBottomColor: '#3f4447' }
-                        : { backgroundColor: '#f9fafb', borderBottomColor: '#e5e7eb' }"
+                      class="px-4 py-2 flex items-center gap-2 border-b bg-surface-subtle border-b-border-default"
                     >
                       <span class="font-semibold text-sm"
-                        :class="store.state.theme === 'dark' ? 'text-gray-100' : 'text-gray-900'"
+                        :class="'text-text-body'"
                       >
                         {{ getUserId(event) }}
                       </span>
                       <span class="text-xs"
-                        :class="store.state.theme === 'dark' ? 'text-gray-400' : 'text-gray-500'"
+                        :class="'text-text-secondary'"
                       >
                         commented {{ formatRelativeTime(event.timestamp) }}
                       </span>
@@ -250,7 +211,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <!-- Comment Body -->
                     <div class="px-4 py-3">
                       <div class="text-sm whitespace-pre-wrap break-words leading-relaxed"
-                        :class="store.state.theme === 'dark' ? 'text-gray-200' : 'text-gray-800'"
+                        :class="'text-text-body'"
                       >
                         {{ event.data?.comment || '' }}
                       </div>
@@ -271,11 +232,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- Current User Avatar -->
         <div class="flex-shrink-0 pt-1">
           <div
-            class="w-6 h-6 rounded-full flex items-center justify-center"
-            :style="{
-              backgroundColor: store.state.theme === 'dark' ? '#181a1b' : '#ffffff',
-              border: store.state.theme === 'dark' ? '1px solid #444c56' : '1px solid #d0d7de'
-            }"
+            class="w-6 h-6 rounded-full flex items-center justify-center bg-surface-base border border-border-default"
           >
             <OIcon
               name="person"
@@ -292,7 +249,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             type="textarea"
             placeholder="Write a comment..."
             :rows="3"
-            class="comment-input"
             @keydown.ctrl.enter.prevent="submitComment"
             @keydown.meta.enter.prevent="submitComment"
             data-test="incident-timeline-comment-input"
@@ -318,6 +274,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <script lang="ts" setup>
 import { ref, onMounted, watch, nextTick } from "vue";
 import { useStore } from "vuex";
+import { useTheme } from "@/composables/useTheme";
 import { formatToDateOnly } from "@/utils/date";
 import incidentsService from "@/services/incidents";
 import DOMPurify from "dompurify";
@@ -338,6 +295,7 @@ interface Props {
 const props = defineProps<Props>();
 
 const store = useStore();
+const { isDark } = useTheme();
 
 const events = ref<any[]>([]);
 const loading = ref(false);
@@ -431,17 +389,17 @@ const getCurrentUserInitials = (): string => {
 // Get avatar color based on username
 const getAvatarColor = (username: string): string => {
   const colors = [
-    "#EF4444", // red
-    "#F59E0B", // amber
-        "#8B5CF6", // purple
+    "var(--color-error-500)", // red
+    "var(--color-amber-500)", // amber
+        "var(--color-ai-accent)", // purple
 
-    "#3B82F6", // blue
-        "#10B981", // green
-    "#EC4899", // pink
-    "#06B6D4", // cyan
-    "#F97316", // orange
-    "#14B8A6", // teal
-    "#6366F1", // indigo
+    "var(--color-blue-500)", // blue
+        "var(--color-success-500)", // green
+    "var(--color-purple-500)", // pink
+    "var(--color-cyan-500)", // cyan
+    "var(--color-orange-500)", // orange
+    "var(--color-teal-500)", // teal
+    "var(--color-indigo-500)", // indigo
   ];
 
   const firstChar = username.charAt(0).toUpperCase();
@@ -470,26 +428,39 @@ const getEventIcon = (event: any): string => {
   }
 };
 
-// Get event badge color
+// Event badge color — resolves to a design token (var()) per event type.
+// Semantic reuse: error/warning/success/info map to status primitives; AI +
+// dimension events use the shared AI accent; the rest use categorical hues.
 const getEventBadgeColor = (event: any): string => {
   switch (event.type) {
-    case "Created": return "#6366F1"; // indigo
-    case "Alert": return "#F59E0B"; // amber
+    case "Created": return "var(--color-indigo-500)";
+    case "Alert": return "var(--color-amber-500)";
     case "SeverityUpgrade":
-    case "SeverityOverride": return "#EF4444"; // red
-    case "Acknowledged": return "#3B82F6"; // blue
-    case "Resolved": return "#059669"; // darker green
-    case "Reopened": return "#F97316"; // orange
-    case "DimensionsUpgraded": return "#8B5CF6"; // purple
-    case "TitleChanged": return "#6366F1"; // indigo
-    case "AssignmentChanged": return "#06B6D4"; // cyan
+    case "SeverityOverride": return "var(--color-error-500)";
+    case "Acknowledged": return "var(--color-blue-500)";
+    case "Resolved": return "var(--color-success-600)";
+    case "Reopened": return "var(--color-orange-500)";
+    case "DimensionsUpgraded": return "var(--color-ai-accent)";
+    case "TitleChanged": return "var(--color-indigo-500)";
+    case "AssignmentChanged": return "var(--color-cyan-500)";
     case "ai_analysis_begin":
-    case "ai_analysis_complete": return "#8B5CF6"; // purple
-    case "ai_analysis_failed": return "#EF4444"; // red
-    default: return "#6B7280"; // gray
+    case "ai_analysis_complete": return "var(--color-ai-accent)";
+    case "ai_analysis_failed": return "var(--color-error-500)";
+    default: return "var(--color-grey-500)";
   }
 };
 
+// Build the badge inline style from an event color token. Tint strengths are
+// theme-conditional (denser bg/border + white text in dark) via color-mix, so
+// the token stays the single color source. (Theme read migrates in the D19/D20 sweep.)
+const badgeStyle = (c: string) => {
+  return {
+    backgroundColor: `color-mix(in srgb, ${c} ${isDark.value ? "19%" : "8%"}, transparent)`,
+    border: `1px solid color-mix(in srgb, ${c} ${isDark.value ? "31%" : "19%"}, transparent)`,
+    color: isDark.value ? "var(--color-grey-0)" : c,
+  };
+};
+
 // Get event badge text
 const getEventBadgeText = (event: any): string => {
   switch (event.type) {
@@ -513,12 +484,12 @@ const getEventBadgeText = (event: any): string => {
 // Get severity color based on priority level
 const getSeverityColor = (severity: string): string => {
   switch (severity) {
-    case "P1": return "#EF4444"; // red
-    case "P2": return "#F97316"; // orange
-    case "P3": return "#F59E0B"; // amber
-    case "P4": return "#3B82F6"; // blue
-    case "P5": return "#6B7280"; // gray
-    default: return "#6B7280"; // gray
+    case "P1": return "var(--color-error-500)"; // red
+    case "P2": return "var(--color-orange-500)"; // orange
+    case "P3": return "var(--color-amber-500)"; // amber
+    case "P4": return "var(--color-blue-500)"; // blue
+    case "P5": return "var(--color-grey-500)"; // gray
+    default: return "var(--color-grey-500)"; // gray
   }
 };
 
@@ -526,8 +497,7 @@ const getSeverityColor = (severity: string): string => {
 const getInlineEventText = (event: any): string => {
   const data = event.data;
   const eventColor = getEventBadgeColor(event);
-  const isDark = store.state.theme === 'dark';
-  const opacity = isDark ? '50' : '40';
+  const opacity = isDark.value ? '50' : '40';
   // Escape user-controlled strings before embedding in HTML (XSS prevention)
   const esc = (s: string) => String(s)
     .replace(/&/g, '&amp;')
@@ -536,7 +506,7 @@ const getInlineEventText = (event: any): string => {
     .replace(/"/g, '&quot;')
     .replace(/'/g, '&#39;');
   const bold = (text: string) => `<span style="font-weight: 600; color: ${eventColor};">${esc(text)}</span>`;
-  const severityBadge = (severity: string) => `<span style="display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; background-color: ${getSeverityColor(severity)}${opacity}; color: ${isDark ? '#ffffff' : getSeverityColor(severity)}; border: 1px solid ${getSeverityColor(severity)}${isDark ? '60' : '40'};">${esc(severity)}</span>`;
+  const severityBadge = (severity: string) => `<span style="display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; font-size: var(--text-2xs); font-weight: 600; background-color: color-mix(in srgb, ${getSeverityColor(severity)} ${isDark.value ? '31%' : '25%'}, transparent); color: ${isDark.value ? 'var(--color-grey-0)' : getSeverityColor(severity)}; border: 1px solid color-mix(in srgb, ${getSeverityColor(severity)} ${isDark.value ? '38%' : '25%'}, transparent);">${esc(severity)}</span>`;
   const isSystemEvent = getUserId(event) === 'System';
 
   switch (event.type) {
@@ -646,12 +616,3 @@ defineExpose({
   fetchEvents
 });
 </script>
-
-<style>
-.comment-input :deep(textarea) {
-  font-size: 14px;
-  line-height: 1.5;
-  padding-right: 50px !important;
-  resize: none;
-}
-</style>
diff --git a/web/src/components/alerts/OrganizationDeduplicationSettings.schema.ts b/web/src/components/alerts/OrganizationDeduplicationSettings.schema.ts
index df9787c702..76346e8914 100644
--- a/web/src/components/alerts/OrganizationDeduplicationSettings.schema.ts
+++ b/web/src/components/alerts/OrganizationDeduplicationSettings.schema.ts
@@ -8,18 +8,14 @@
 //   • alert_fingerprint_groups — the selected semantic-group ids, modelled as a
 //     string[] driven by an OFormCheckboxGroup (each per-group OCheckbox is a
 //     group member keyed by its id).
-//   • time_window_minutes — the correlation window. The pre-migration form had
-//     NO validation rule on it (only an HTML `min="1"` hint) and sanitised
-//     empty/NaN → null at save. Kept permissive + nullable so a blank / cleared
-//     field still saves (as null); z.coerce.number() only validates that a typed
-//     value is numeric (the number <input> can emit a numeric string or "").
-//     The @submit handler does the empty/NaN → null conversion for payload
-//     parity, so the schema itself never blocks this field.
+//   • time_window_minutes — the correlation window. Permissive + nullable so a
+//     blank / cleared field still saves (as null); z.coerce.number() only
+//     validates that a typed value is numeric (the number <input> can emit a
+//     numeric string or ""). The @submit handler does the empty/NaN → null
+//     conversion, so the schema itself never blocks this field.
 //
-// Restores the pre-migration cross-alert guard (the imperative saveSettings
-// toast + the inline `fingerprintGroupsRequired` error) as a superRefine rule:
-// when org-level dedup AND cross-alert dedup are both on, at least one
-// fingerprint group must be selected.
+// superRefine rule: when org-level dedup AND cross-alert dedup are both on, at
+// least one fingerprint group must be selected.
 //
 // Validation TIMING is owned by OForm (submit-then-change via revalidateLogic);
 // this file only describes WHAT is valid.
@@ -40,7 +36,7 @@ export const makeOrgDedupSettingsSchema = (t: (_key: string) => string) =>
       enabled: z.boolean(),
       alert_dedup_enabled: z.boolean(),
       alert_fingerprint_groups: z.array(z.string()).default([]),
-      // No pre-migration rule (see file header) — permissive + nullable.
+      // Permissive + nullable.
       time_window_minutes: z.coerce.number().nullish(),
     })
     .superRefine((val, ctx) => {
@@ -63,9 +59,7 @@ export type OrgDedupSettingsForm = z.infer<
 >;
 
 /**
- * Typed defaults, mapped from an optional persisted config. Mirrors the
- * pre-migration localConfig mapping used by init / loadConfig / the props.config
- * watch — one place, so all three code paths stay in sync. A null config yields
+ * Typed defaults, mapped from an optional persisted config. A null config yields
  * the create-time defaults (enabled on, everything else empty).
  */
 export const orgDedupSettingsDefaults = (
diff --git a/web/src/components/alerts/OrganizationDeduplicationSettings.vue b/web/src/components/alerts/OrganizationDeduplicationSettings.vue
index d4126d94f5..6598150f8a 100644
--- a/web/src/components/alerts/OrganizationDeduplicationSettings.vue
+++ b/web/src/components/alerts/OrganizationDeduplicationSettings.vue
@@ -24,27 +24,29 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     id="organization-deduplication-settings-form"
     :form="form"
     v-slot="{ isSubmitting }"
-    class="w-full h-full px-2 bg-(--o2-card-bg) flex flex-col"
+    class="w-full h-full bg-card-glass-bg flex flex-col"
   >
     <!-- Scrollable content area -->
-    <div class="flex-1 overflow-y-auto pr-2">
-      <div class="mb-6">
-        <GroupHeader :title="t('alerts.correlation.title')" :showIcon="false" class="mb-2" />
-        <div class="text-sm text-gray-400">
+    <div class="flex-1 overflow-y-auto pr-2 pt-4">
+      <div class="mb-4">
+        <div class="text-sm font-semibold leading-tight text-text-heading">
+          {{ t('alerts.correlation.title') }}
+        </div>
+        <div class="text-xs text-text-secondary mt-1">
           {{ t('alerts.correlation.description') }}
         </div>
-        <div class="text-sm text-gray-400 mt-2 italic">
+        <div class="text-xs text-text-secondary mt-1 italic">
           {{ t('alerts.correlation.semanticFieldNote') }}
         </div>
-        <OButton
-          data-test="dedup-settings-refresh-btn"
-          variant="outline"
-          size="sm"
-          @click="loadConfig"
-        >{{ t('common.refresh') }}</OButton>
       </div>
 
-      <OSeparator class="mb-6" />
+      <OButton
+        data-test="dedup-settings-refresh-btn"
+        variant="outline"
+        size="sm"
+        class="mb-6"
+        @click="loadConfig"
+      >{{ t('common.refresh') }}</OButton>
 
       <!-- Enable Deduplication -->
       <div class="mb-6">
@@ -71,12 +73,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <!-- Cross-Alert Fingerprint Groups -->
       <div class="mb-6" v-if="enabled && alertDedupEnabled">
         <div class="font-semibold pb-2 flex items-center">
-          {{ t('alerts.correlation.fingerprintGroups') }} <span class="text-red-500 ml-1">*</span>
+          {{ t('alerts.correlation.fingerprintGroups') }} <span class="text-status-error-text ml-1">*</span>
           <OIcon
             name="info"
             size="sm"
             class="ml-1 cursor-pointer"
-            :class="store.state.theme === 'dark' ? 'text-gray-400' : 'text-gray-400'"
+            :class="'text-text-secondary'"
           >
             <OTooltip
               side="right"
@@ -85,7 +87,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             />
           </OIcon>
         </div>
-        <div class="text-sm text-gray-600 dark:text-gray-400 mb-2">
+        <div class="text-sm text-text-secondary mb-2">
           {{ t('alerts.correlation.fingerprintGroupsHint') }}
         </div>
         <!-- The selected group ids ARE the form's alert_fingerprint_groups
@@ -110,7 +112,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             name="info"
             size="sm"
             class="ml-1 cursor-pointer"
-            :class="store.state.theme === 'dark' ? 'text-gray-400' : 'text-gray-400'"
+            :class="'text-text-secondary'"
            />
             <OTooltip
               side="right"
@@ -118,7 +120,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :content="t('alerts.correlation.defaultWindowTooltip')"
             />
         </div>
-        <div class="text-sm text-gray-600 dark:text-gray-400 mb-2">
+        <div class="text-sm text-text-secondary mb-2">
           {{ t('alerts.correlation.defaultWindowDescription') }}
         </div>
         <OFormInput
@@ -128,17 +130,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           min="1"
           width="md"
           :placeholder="t('alerts.correlation.defaultWindowPlaceholder')"
-          :class="
-            store.state.theme === 'dark'
-              ? 'input-box-bg-dark input-border-dark'
-              : 'input-box-bg-light input-border-light'
-          "
         />
       </div>
     </div>
 
     <!-- Sticky footer with buttons -->
-    <div class="flex justify-end gap-3 pt-4 pb-2 border-t border-gray-200 dark:border-gray-700 bg-inherit sticky bottom-0">
+    <div class="flex justify-end gap-3 pt-4 pb-2 border-t border-border-default bg-inherit sticky bottom-0">
       <OButton
         variant="outline"
         size="sm-action"
@@ -160,13 +157,11 @@ import { ref, watch } from "vue";
 import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
 import alertsService from "@/services/alerts";
-import GroupHeader from "@/components/common/GroupHeader.vue";
 import OButton from '@/lib/core/Button/OButton.vue';
 import OTooltip from '@/lib/overlay/Tooltip/OTooltip.vue';
 import OCheckbox from '@/lib/forms/Checkbox/OCheckbox.vue';
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import { toast } from "@/lib/feedback/Toast/useToast";
-import OSeparator from '@/lib/core/Separator/OSeparator.vue';
 import OForm from "@/lib/forms/Form/OForm.vue";
 import OFormCheckbox from "@/lib/forms/Checkbox/OFormCheckbox.vue";
 import OFormCheckboxGroup from "@/lib/forms/Checkbox/OFormCheckboxGroup.vue";
diff --git a/web/src/components/alerts/PipelinesDestinationList.spec.ts b/web/src/components/alerts/PipelinesDestinationList.spec.ts
index 5410d2b92c..e0b30bbb0c 100644
--- a/web/src/components/alerts/PipelinesDestinationList.spec.ts
+++ b/web/src/components/alerts/PipelinesDestinationList.spec.ts
@@ -214,10 +214,12 @@ describe("PipelinesDestinationList", () => {
       expect((wrapper.vm as any).confirmDelete.data).toBeNull();
     });
 
-    it("has 7 table columns", async () => {
+    it("has 6 table columns", async () => {
+      // The "#" index column is now OTable's built-in show-index gutter, not a
+      // member of `columns`, so the array holds only the 6 real data columns.
       wrapper = mountComponent();
       await flushPromises();
-      expect((wrapper.vm as any).columns).toHaveLength(7);
+      expect((wrapper.vm as any).columns).toHaveLength(6);
     });
   });
 
diff --git a/web/src/components/alerts/PipelinesDestinationList.vue b/web/src/components/alerts/PipelinesDestinationList.vue
index 2ca5524a9a..1508acfac6 100644
--- a/web/src/components/alerts/PipelinesDestinationList.vue
+++ b/web/src/components/alerts/PipelinesDestinationList.vue
@@ -16,18 +16,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <div class="flex flex-col h-full p-0">
-    <PageLayout
+    <OPageLayout bleed
       v-if="!showDestinationEditor"
-      :main-panel="false"
-      :header-class="'shrink-0 px-4 border-b border-border-default'"
+      :title="t('pipeline_destinations.header')"
+      icon="person-pin-circle"
+      :subtitle="'External targets for pipeline output'"
     >
-      <!-- Standard section header: title + actions only. Search moved to toolbar. -->
-      <template #header>
-      <AppPageHeader
-        :title="t('pipeline_destinations.header')"
-        icon="person-pin-circle"
-        :subtitle="'External targets for pipeline output'"
-      >
         <template #actions>
           <OButton
             data-test="pipeline-destination-list-add-btn"
@@ -37,9 +31,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             >{{ t(`alert_destinations.add`) }}</OButton
           >
         </template>
-      </AppPageHeader>
-      </template>
-      <div class="card-container flex-1 min-h-0 overflow-hidden">
+      <div class="bg-card-glass-bg flex-1 min-h-0 overflow-hidden">
       <OTable
         :frame="false"
         data-test="alert-destinations-list-table"
@@ -58,6 +50,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :enable-column-resize="true"
         :persist-columns="true"
         table-id="settings-pipeline-destinations"
+        show-index
         :show-global-filter="false"
         @update:selected-ids="handleSelectedIdsUpdate"
       >
@@ -95,7 +88,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             type="fieldTag"
             value="soft"
           >{{ row.destination_type_name }}</OTag>
-          <span v-else class="text-text-primary">—</span>
+          <span v-else class="text-text-body">—</span>
         </template>
 
         <template #cell-output_format="{ row }">
@@ -104,7 +97,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             type="fieldTag"
             value="soft"
           >{{ formatOutputFormat(row.output_format) }}</OTag>
-          <span v-else class="text-text-primary">—</span>
+          <span v-else class="text-text-body">—</span>
         </template>
 
         <template #cell-actions="{ row }">
@@ -134,7 +127,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           v-if="selectedDestinations.length > 0"
           #bottom
         >
-          <span class="text-xs text-text-primary font-medium">
+          <span class="text-xs text-text-secondary font-medium">
             {{ selectedDestinations.length }} selected
           </span>
           <OButton
@@ -149,7 +142,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </template>
       </OTable>
       </div>
-    </PageLayout>
+    </OPageLayout>
     <div v-else>
       <PipelineDestinationEditor
         :destination="editingDestination"
@@ -206,13 +199,12 @@ import { isInputFocused } from "@/utils/keyboardShortcuts";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import OTag from "@/lib/core/Badge/OTag.vue";
 import OSearchInput from "@/lib/forms/SearchInput/OSearchInput.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
-import PageLayout from "@/components/common/PageLayout.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import OTable from "@/lib/core/Table/OTable.vue";
 import OEmptyState from "@/lib/core/EmptyState/OEmptyState.vue";
 import type { OTableColumnDef } from "@/lib/core/Table/OTable.types";
 import { toast } from "@/lib/feedback/Toast/useToast";
-import { TABLE_INDEX_COL_SIZE, COL } from "@/lib/core/Table/OTable.types";
+import { COL } from "@/lib/core/Table/OTable.types";
 
 interface ConformDelete {
   visible: boolean;
@@ -229,8 +221,7 @@ const formatOutputFormat = (val: any): string => {
 export default defineComponent({
   name: "PageAlerts",
   components: {
-    AppPageHeader,
-    PageLayout,
+    OPageLayout,
     PipelineDestinationEditor,
     OEmptyState,
     ConfirmDialog,
@@ -247,13 +238,6 @@ export default defineComponent({
     const { t } = useI18n();
     const { track } = useReo();
     const columns: OTableColumnDef[] = [
-      {
-        id: "#",
-        header: "#",
-        accessorKey: "#",
-        size: TABLE_INDEX_COL_SIZE,
-        meta: { align: "left" },
-      },
       {
         id: "name",
         header: t("alert_destinations.name"),
@@ -378,10 +362,7 @@ export default defineComponent({
         })
         .then((res) => {
           resultTotal.value = res.data.length;
-          destinations.value = res.data.map((data: any, index: number) => ({
-            ...data,
-            "#": index + 1 <= 9 ? `0${index + 1}` : index + 1,
-          }));
+          destinations.value = res.data;
           updateRoute();
         })
         .catch((err) => {
diff --git a/web/src/components/alerts/PrebuiltDestinationForm.schema.ts b/web/src/components/alerts/PrebuiltDestinationForm.schema.ts
index 2ef7846f0a..aff30e7c06 100644
--- a/web/src/components/alerts/PrebuiltDestinationForm.schema.ts
+++ b/web/src/components/alerts/PrebuiltDestinationForm.schema.ts
@@ -3,13 +3,12 @@
 // Validation schema for PrebuiltDestinationForm.vue (config-driven credentials).
 //
 // The schema is built DYNAMICALLY from `getPrebuiltConfig(type).credentialFields`
-// for the ACTIVE destination type — preserving that config as the SINGLE SOURCE
-// OF TRUTH for the per-type required + validator rules (exactly mirroring the old
-// hand-rolled `validate()` loop this migration removes). The parent remounts this
-// form (its `:key` includes destination_type) whenever the type changes, so the
-// schema is always rebuilt for the active type at setup.
+// for the ACTIVE destination type — that config is the SINGLE SOURCE OF TRUTH for
+// the per-type required + validator rules. The parent remounts this form (its
+// `:key` includes destination_type) whenever the type changes, so the schema is
+// always rebuilt for the active type at setup.
 //
-// Per credential field (byte-for-byte the pre-migration `validate()` semantics):
+// Per credential field:
 //   • required + empty            → `${label} is required`   (validator NOT run)
 //   • required/optional + present → run `field.validator` (if any); its returned
 //                                    i18n message becomes the field's error
@@ -58,9 +57,8 @@ const toggleSchema = () =>
 /**
  * Build the Zod schema for one destination type from its `credentialFields`.
  * Toggle fields → boolean; every other field → string. The required + custom
- * validator rules are enforced in a single object-level `superRefine` that
- * reproduces the old `validate()` loop exactly (so TanStack routes each issue to
- * the field whose `name` matches the credential key).
+ * validator rules are enforced in a single object-level `superRefine` (so
+ * TanStack routes each issue to the field whose `name` matches the credential key).
  */
 export const makePrebuiltDestinationSchema = (
   t: (_key: string, _named?: Record<string, unknown>) => string,
diff --git a/web/src/components/alerts/PrebuiltDestinationForm.vue b/web/src/components/alerts/PrebuiltDestinationForm.vue
index c3fbdd96e4..96be20d39e 100644
--- a/web/src/components/alerts/PrebuiltDestinationForm.vue
+++ b/web/src/components/alerts/PrebuiltDestinationForm.vue
@@ -199,7 +199,7 @@ limitations under the License.
           data-test="opsgenie-eu-region-toggle"
           :label="t('alerts.prebuiltDestinations.opsgenieEuRegion')"
         />
-        <span class="text-xs text-gray-400">
+        <span class="text-xs text-text-secondary">
           {{ t('alerts.prebuiltDestinations.opsgenieEuRegionHelp') }}
         </span>
       </div>
diff --git a/web/src/components/alerts/PrebuiltDestinationSelector.vue b/web/src/components/alerts/PrebuiltDestinationSelector.vue
index 2b360bda8a..cb03a12942 100644
--- a/web/src/components/alerts/PrebuiltDestinationSelector.vue
+++ b/web/src/components/alerts/PrebuiltDestinationSelector.vue
@@ -13,7 +13,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 
 <template>
-  <div data-test="prebuilt-destination-selector" class="destination-selector">
+  <div data-test="prebuilt-destination-selector">
     <!-- Destination Type Grid -->
     <div class="selector-grid grid gap-3 mb-4 [grid-template-columns:repeat(auto-fill,minmax(8.75rem,1fr))]">
       <div
@@ -21,14 +21,14 @@ limitations under the License. -->
         :key="type.id"
         data-test="destination-type-card"
         :data-type="type.id"
-        class="destination-card group/dest-card relative py-5 px-3 border-2 border-[var(--o2-border-color)] rounded-xl cursor-pointer transition-all duration-300 [min-height:7.5rem] flex flex-col hover:-translate-y-0.5 hover:shadow-[0_0.25rem_0.75rem_rgba(25,118,210,0.15)] hover:border-[var(--o2-primary-color)]"
-        :class="selectedType === type.id ? 'selected border-[var(--o2-primary-color)] bg-[color-mix(in_srgb,var(--o2-primary-color)_10%,var(--o2-card-bg))] shadow-[0_0.25rem_1rem_rgba(25,118,210,0.2)]' : 'bg-[var(--o2-card-bg)]'"
+        class="destination-card group/dest-card relative py-5 px-3 border-2 border-card-glass-border rounded-default cursor-pointer transition-all duration-300 [min-height:7.5rem] flex flex-col hover:-translate-y-0.5 hover:shadow-[0_0.25rem_0.75rem_rgba(25,118,210,0.15)] hover:border-accent"
+        :class="selectedType === type.id ? 'selected border-accent bg-[color-mix(in_srgb,var(--color-accent)_10%,var(--color-card-glass-bg))] shadow-[0_0.25rem_1rem_rgba(25,118,210,0.2)]' : 'bg-card-glass-bg'"
         @click="selectType(type.id)"
       >
         <!-- Card Content -->
         <div class="card-content flex flex-col items-center text-center h-full relative">
           <!-- Icon/Image -->
-          <div data-test="destination-type-icon" class="mb-2 text-[var(--o2-icon-color)] group-[.selected]/dest-card:text-[var(--o2-primary-color)]">
+          <div data-test="destination-type-icon" class="mb-2 text-icon-color group-[.selected]/dest-card:text-accent">
             <img
               v-if="type.image"
               :src="type.image"
@@ -43,12 +43,12 @@ limitations under the License. -->
           </div>
 
           <!-- Name -->
-          <div data-test="destination-type-name" class="card-title text-[0.8125rem] font-medium mt-1 mb-0 text-[var(--o2-text-primary)] [line-height:1.3] text-center">
+          <div data-test="destination-type-name" class="card-title text-compact font-medium mt-1 mb-0 text-text-heading [line-height:1.3] text-center">
             {{ type.name }}
           </div>
 
           <!-- Description -->
-          <div data-test="destination-type-description" class="card-description text-[0.6875rem] text-[var(--o2-text-secondary)] mt-1 mb-0 [line-height:1.2] grow text-center hidden">
+          <div data-test="destination-type-description" class="text-2xs text-text-secondary mt-1 mb-0 [line-height:1.2] grow text-center hidden min-[75rem]:block">
             {{ type.description }}
           </div>
         </div>
@@ -56,7 +56,7 @@ limitations under the License. -->
         <!-- Selection Indicator -->
         <div
           v-if="selectedType === type.id"
-          class="check-icon absolute top-[0.375rem] right-[0.375rem] w-5 h-5 rounded-full overflow-hidden bg-[var(--o2-positive)] text-white flex items-center justify-center z-[1]"
+          class="check-icon absolute top-1.5 right-1.5 w-5 h-5 rounded-full overflow-hidden bg-status-positive text-white flex items-center justify-center z-[1]"
         >
           <OIcon name="check" size="xs" />
         </div>
@@ -66,18 +66,18 @@ limitations under the License. -->
       <div
         data-test="destination-type-card"
         data-type="custom"
-        class="destination-card custom-card group/dest-card relative py-5 px-3 border-2 border-[var(--o2-border-color)] border-dashed rounded-xl cursor-pointer transition-all duration-300 [min-height:7.5rem] flex flex-col hover:-translate-y-0.5 hover:shadow-[0_0.25rem_0.75rem_rgba(25,118,210,0.15)] hover:border-[var(--o2-primary-color)]"
-        :class="selectedType === 'custom' ? 'selected border-[var(--o2-primary-color)] bg-[color-mix(in_srgb,var(--o2-primary-color)_10%,var(--o2-card-bg))] shadow-[0_0.25rem_1rem_rgba(25,118,210,0.2)]' : 'bg-[var(--o2-card-bg)]'"
+        class="destination-card custom-card group/dest-card relative py-5 px-3 border-2 border-card-glass-border border-dashed rounded-default cursor-pointer transition-all duration-300 [min-height:7.5rem] flex flex-col hover:-translate-y-0.5 hover:shadow-[0_0.25rem_0.75rem_rgba(25,118,210,0.15)] hover:border-accent"
+        :class="selectedType === 'custom' ? 'selected border-accent bg-[color-mix(in_srgb,var(--color-accent)_10%,var(--color-card-glass-bg))] shadow-[0_0.25rem_1rem_rgba(25,118,210,0.2)]' : 'bg-card-glass-bg'"
         @click="selectType('custom')"
       >
         <div class="card-content flex flex-col items-center text-center h-full relative">
-          <div data-test="destination-type-icon" class="mb-2 text-[var(--o2-icon-color)] group-[.selected]/dest-card:text-[var(--o2-primary-color)]">
+          <div data-test="destination-type-icon" class="mb-2 text-icon-color group-[.selected]/dest-card:text-accent">
             <OIcon name="settings" size="md" />
           </div>
-          <div data-test="destination-type-name" class="card-title text-[0.8125rem] font-medium mt-1 mb-0 text-[var(--o2-text-primary)] [line-height:1.3] text-center">
+          <div data-test="destination-type-name" class="card-title text-compact font-medium mt-1 mb-0 text-text-heading [line-height:1.3] text-center">
             {{ t('alerts.customDestination') }}
           </div>
-          <div data-test="destination-type-description" class="card-description text-[0.6875rem] text-[var(--o2-text-secondary)] mt-1 mb-0 [line-height:1.2] grow text-center hidden">
+          <div data-test="destination-type-description" class="text-2xs text-text-secondary mt-1 mb-0 [line-height:1.2] grow text-center hidden min-[75rem]:block">
             {{ t('alerts.customDestinationDescription') }}
           </div>
         </div>
@@ -85,7 +85,7 @@ limitations under the License. -->
         <!-- Selection Indicator -->
         <div
           v-if="selectedType === 'custom'"
-          class="check-icon absolute top-[0.375rem] right-[0.375rem] w-5 h-5 rounded-full overflow-hidden bg-[var(--o2-positive)] text-white flex items-center justify-center z-[1]"
+          class="check-icon absolute top-1.5 right-1.5 w-5 h-5 rounded-full overflow-hidden bg-status-positive text-white flex items-center justify-center z-[1]"
         >
           <OIcon name="check" size="xs" />
         </div>
@@ -152,11 +152,3 @@ function getIconName(icon: string): string {
   return iconMap[icon] || icon;
 }
 </script>
-
-<style>
-@media (min-width: 75rem) {
-  .destination-selector .destination-card .card-description {
-    display: block;
-  }
-}
-</style>
\ No newline at end of file
diff --git a/web/src/components/alerts/PreviewAlert.vue b/web/src/components/alerts/PreviewAlert.vue
index 8257973563..b325f4de44 100644
--- a/web/src/components/alerts/PreviewAlert.vue
+++ b/web/src/components/alerts/PreviewAlert.vue
@@ -17,19 +17,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div
     ref="chartPanelRef"
-    :class="store.state.theme !== 'dark' ? 'border border-[#e6e6e6]' : 'border border-[rgb(39,39,39)]'"
-    style="
-      height: 100%;
-      position: relative;
-      display: flex;
-      flex-direction: column;
-    "
+    class="border border-border-default h-full relative flex flex-col"
   >
     <!-- Chart -->
     <div
       data-test="alert-preview-chart"
-      class="preview-alert-chart"
-      style="flex: 1; min-height: 0; padding: 1rem"
+      class="preview-alert-chart flex-1 min-h-0 p-4"
     >
       <!-- Empty query placeholder -->
       <div
@@ -49,7 +42,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :variablesData="{}"
         :searchType="searchTypeForPanel"
         :is_ui_histogram="shouldUseHistogram"
-        style="height: 100%; width: 100%"
         @result-metadata-update="handleChartDataUpdate"
         @series-data-update="handleSeriesDataUpdate"
       />
@@ -645,7 +637,7 @@ const fetchQuerySchema = async () => {
     clearFieldLabels(chartData.value);
     selectedTimeObj.value = { ...dashboardPanelData.meta.dateTime };
 
-    // Note: Alert status evaluation now happens via handleChartDataUpdate event from PanelSchemaRenderer
+    // Alert status evaluation happens via handleChartDataUpdate event from PanelSchemaRenderer
   } catch (error) {
     // Discard stale error fallback if a newer request has started.
     if (requestId !== schemaRequestId.value) return;
diff --git a/web/src/components/alerts/QueryEditorDialog.spec.ts b/web/src/components/alerts/QueryEditorDialog.spec.ts
index eea32b7393..1cfaee267b 100644
--- a/web/src/components/alerts/QueryEditorDialog.spec.ts
+++ b/web/src/components/alerts/QueryEditorDialog.spec.ts
@@ -371,7 +371,7 @@ describe("QueryEditorDialog - onBlurFunctionEditor", () => {
   });
 });
 
-// Coverage for the q-dialog → ODrawer migration. The template now renders
+// Coverage for the dialog → ODrawer migration. The template now renders
 // <ODrawer v-model:open="isOpen" size="full" :show-close="false"> where
 // isOpen is a computed get/set bound to the modelValue prop.
 describe("QueryEditorDialog - ODrawer Migration", () => {
@@ -540,11 +540,9 @@ describe("QueryEditorDialog - ODrawer Migration", () => {
     ).toBe(true);
   });
 
-  it("no longer renders any q-dialog wrapper (migration completed)", async () => {
+  it("renders ODrawer as the migration wrapper (migration completed)", async () => {
     const w = await mountWithDrawerStub();
     await flushPromises();
-    // q-dialog renders as .q-dialog in DOM; ODrawer replaces it entirely.
-    expect(w.find(".q-dialog").exists()).toBe(false);
     expect(w.findComponent(ODrawerStub).exists()).toBe(true);
   });
 });
diff --git a/web/src/components/alerts/QueryEditorDialog.vue b/web/src/components/alerts/QueryEditorDialog.vue
index 106f6fec14..ae3a7c9bd8 100644
--- a/web/src/components/alerts/QueryEditorDialog.vue
+++ b/web/src/components/alerts/QueryEditorDialog.vue
@@ -17,6 +17,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <!-- Editor Dialog -->
   <ODrawer data-test="query-editor-dialog"
+    bleed
     v-model:open="isOpen"
     size="full"
     :show-close="false"
@@ -26,8 +27,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <div class="flex items-center gap-2.5">
           <div
             data-test="add-alert-back-btn"
-            class="flex justify-center items-center cursor-pointer opacity-60 hover:opacity-100 transition-opacity flex-shrink-0"
-            style="border: 1.5px solid currentColor; border-radius: 50%; width: 20px; height: 20px;"
+            class="flex justify-center items-center cursor-pointer opacity-60 hover:opacity-100 transition-opacity flex-shrink-0 border-[1.5px] rounded-full size-5"
             :title="t('common.goBack')"
             @click="closeDialog"
           >
@@ -36,21 +36,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <span class="text-lg font-semibold text-dialog-header-text truncate block">{{ t('alerts.addConditions') }}</span>
 
           <!-- Separator -->
-          <div class="w-px h-4 opacity-30" :class="store.state.theme === 'dark' ? 'bg-gray-400' : 'bg-gray-500'" />
+          <div class="w-px h-4 opacity-30 bg-border-strong" />
 
           <!-- Stream Type + Stream Name -->
           <div class="flex items-center gap-2">
-            <div v-if="streamType" class="inline-flex flex-row items-center gap-[5px] py-[3px] px-[10px] rounded-md" :class="store.state.theme === 'dark' ? 'bg-[rgba(59,130,246,0.12)] border border-[rgba(59,130,246,0.3)]' : 'bg-[rgba(59,130,246,0.08)] border border-[rgba(59,130,246,0.25)]'">
-              <span class="text-[11px] font-semibold" :class="store.state.theme === 'dark' ? 'text-[#94a3b8]' : 'text-[#64748b]'">{{ t("alerts.streamType") }}</span>
-              <span class="text-[11px] opacity-30" :class="store.state.theme === 'dark' ? 'text-[#64748b]' : 'text-[#94a3b8]'">:</span>
-              <span class="text-xs font-bold" :class="store.state.theme === 'dark' ? 'text-[#60a5fa]' : 'text-[#2563eb]'">{{ streamType }}</span>
+            <div v-if="streamType" class="inline-flex flex-row items-center gap-1.25 py-0.75 px-2.5 rounded-default bg-[color-mix(in_srgb,var(--color-info)_10%,transparent)] border border-[color-mix(in_srgb,var(--color-info)_28%,transparent)]">
+              <span class="text-2xs font-semibold text-text-label">{{ t("alerts.streamType") }}</span>
+              <span class="text-2xs opacity-30 text-text-label">:</span>
+              <span class="text-xs font-bold text-text-link">{{ streamType }}</span>
             </div>
             <span v-if="streamType && streamName" class="opacity-20 select-none">|</span>
-            <div class="inline-flex flex-row items-center gap-[5px] py-[3px] px-[10px] rounded-md" :class="store.state.theme === 'dark' ? 'bg-[rgba(139,92,246,0.12)] border border-[rgba(139,92,246,0.3)]' : 'bg-[rgba(139,92,246,0.08)] border border-[rgba(139,92,246,0.25)]'">
-              <span class="text-[11px] font-semibold" :class="store.state.theme === 'dark' ? 'text-[#94a3b8]' : 'text-[#64748b]'">{{ t("alerts.stream_name") }}</span>
-              <span class="text-[11px] opacity-30" :class="store.state.theme === 'dark' ? 'text-[#64748b]' : 'text-[#94a3b8]'">:</span>
-              <span v-if="streamName" class="text-xs font-bold" :class="store.state.theme === 'dark' ? 'text-[#a78bfa]' : 'text-[#7c3aed]'">{{ streamName }}</span>
-              <span v-else class="text-xs font-bold opacity-40 italic" :class="store.state.theme === 'dark' ? 'text-[#a78bfa]' : 'text-[#7c3aed]'">{{ t("alerts.queryEditor.noStream") }}</span>
+            <div class="inline-flex flex-row items-center gap-1.25 py-0.75 px-2.5 rounded-default bg-[color-mix(in_srgb,var(--color-sql-accent)_10%,transparent)] border border-[color-mix(in_srgb,var(--color-sql-accent)_28%,transparent)]">
+              <span class="text-2xs font-semibold text-text-label">{{ t("alerts.stream_name") }}</span>
+              <span class="text-2xs opacity-30 text-text-label">:</span>
+              <span v-if="streamName" class="text-xs font-bold text-sql-accent">{{ streamName }}</span>
+              <span v-else class="text-xs font-bold opacity-40 italic text-sql-accent">{{ t("alerts.queryEditor.noStream") }}</span>
             </div>
           </div>
         </div>
@@ -67,7 +67,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             data-test="menu-link-ai-item"
             variant="ghost"
             size="icon-toolbar"
-            class="[background:linear-gradient(135deg,rgba(139,92,246,0.15)_0%,rgba(236,72,153,0.15)_100%)]! transition-[background,box-shadow] duration-300 ease-[ease] hover:[background:linear-gradient(135deg,#8B5CF6_0%,#EC4899_100%)]! hover:shadow-[0_0.25rem_0.75rem_0_rgba(139,92,246,0.35)] group"
+            class="[background:var(--color-gradient-ai-subtle)]! transition-[background,box-shadow] duration-300 ease-[ease] hover:[background:var(--color-gradient-ai)]! hover:shadow-[0_0.25rem_0.75rem_0_rgba(139,92,246,0.35)] group"
             @mouseenter="isHovered = true"
             @mouseleave="isHovered = false"
           >
@@ -75,7 +75,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </OButton>
         </div>
       </template>
-    <div data-test="query-editor-dialog-card" class="flex h-[calc(100vh-3.5rem)] overflow-hidden bg-(--o2-card-bg)">
+    <div data-test="query-editor-dialog-card" class="flex h-[calc(100vh-3.5rem)] overflow-hidden bg-card-glass-bg">
       <div
         class="h-full flex overflow-hidden flex-1"
       >
@@ -85,8 +85,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
             <!-- Left Section (25%) — Field Browser -->
             <div
-              class="h-full rounded-lg overflow-hidden p-[10px]"
-              :class="store.state.theme === 'dark' ? 'border border-[#2d3748] bg-[#1a1a1a]' : 'border border-[#e5e7eb] bg-white'"
+              class="h-full rounded-default overflow-hidden p-2.5 border border-border-default bg-surface-base"
             >
               <SearchFieldList
                 :fields="fieldListItems"
@@ -103,20 +102,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <div class="flex w-full h-full min-h-0 overflow-y-auto">
               <div ref="editorsColumnRef" class="flex w-full flex-col min-h-full gap-y-2">
                 <!-- SQL/PromQL Editor Pane + Status Bar wrapper -->
-                <div class="flex-[3] w-full flex flex-col overflow-visible" style="min-height: 220px;">
+                <div class="flex-[3] w-full flex flex-col overflow-visible min-h-55">
                   <!-- Editor Pane (no overflow:hidden bottom clip issue for status bar) -->
                   <div
-                    class="flex-1 w-full flex flex-col overflow-hidden rounded-lg"
-                    :class="store.state.theme === 'dark' ? 'border border-[#2d3748]' : 'border border-[#e5e7eb]'"
-                    style="border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0;"
+                    class="flex-1 w-full flex flex-col overflow-hidden rounded-default border border-border-default border-b-0 rounded-b-none"
                   >
                     <!-- Pane Header -->
                     <div
-                      class="flex items-center justify-between py-2 px-3 min-h-12 shrink-0"
-                      :class="store.state.theme === 'dark' ? 'bg-white/[0.04] border-b border-[#2d3748]' : 'bg-[#f3f4f6] border-b border-[#e5e7eb]'"
+                      class="flex items-center justify-between py-2 px-3 min-h-12 shrink-0 bg-surface-subtle border-b border-border-default"
                     >
                       <div class="flex items-center gap-2">
-                        <div class="w-[3px] h-[14px] rounded-[2px] shrink-0 bg-(--q-primary)" />
+                        <div class="w-0.75 h-3.5 rounded-default shrink-0 bg-theme-accent" />
                         <span class="text-xs font-semibold">{{ localTab === 'sql' ? t('alerts.sqlEditor') : t('alerts.promqlEditor') }}</span>
                       </div>
                       <div class="flex items-center gap-2">
@@ -124,7 +120,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                           v-if="localTab !== 'promql'"
                           :model-value="!sqlEditorMaximized"
                           class="o2-toggle-button-xs"
-                          :class="store.state.theme === 'dark' ? 'o2-toggle-button-xs-dark' : 'o2-toggle-button-xs-light'"
                           @update:model-value="(val) => val ? restoreVrlEditor() : (sqlEditorMaximized = true)"
                         >
                           <OTooltip :delay="400" :content="sqlEditorMaximized ? t('alerts.queryEditor.showVrlEditor') : t('alerts.queryEditor.hideVrlEditor')" />
@@ -133,7 +128,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                           data-test="alert-run-query-btn"
                           variant="primary"
                           size="sm"
-                          class="h-[28px] text-xs rounded-md px-3!"
+                          class="h-7 text-xs rounded-default px-3!"
                           :disabled="localTab == 'sql' ? localSqlQuery == '' : localPromqlQuery == ''"
                           @click="localTab === 'sql' ? runSqlQuery() : runPromqlQuery()"
                         >
@@ -166,24 +161,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         v-if="(localTab === 'sql' ? !localSqlQuery : !localPromqlQuery) && queryEditorPlaceholderFlag"
                         class="absolute top-0 left-0 right-0 bottom-0 flex items-start [padding:0.1875rem_0.5rem_0_2.15rem] pointer-events-none z-[1] select-none"
                       >
-                        <span class="font-mono text-[var(--text-base)] [line-height:1.3125rem] text-[#a0aec0] whitespace-nowrap overflow-hidden text-ellipsis">{{ fullEditorPlaceholder }}</span>
+                        <span class="font-mono text-[var(--text-sm)] [line-height:1.3125rem] text-text-placeholder whitespace-nowrap overflow-hidden text-ellipsis">{{ fullEditorPlaceholder }}</span>
                       </div>
                     </div>
                   </div>
 
                   <!-- Status bar: outside overflow:hidden pane so border-bottom is never clipped -->
                   <div
-                    class="relative h-[22px] shrink-0 text-[13px] font-medium cursor-default"
+                    class="relative h-5.5 shrink-0 text-compact font-medium cursor-default"
                     :class="[
                       sqlStatusBarClasses,
-                      store.state.theme === 'dark'
-                        ? 'border-l border-r border-b border-[#2d3748] rounded-bl-lg rounded-br-lg'
-                        : 'border-l border-r border-b border-[#e5e7eb] rounded-bl-lg rounded-br-lg'
+                      'border-l border-r border-b border-border-default rounded-bl-default rounded-br-default'
                     ]"
                   >
-                    <div class="absolute inset-0 flex items-center gap-[5px] px-[10px] overflow-hidden">
+                    <div class="absolute inset-0 flex items-center gap-1.25 px-2.5 overflow-hidden">
                       <template v-if="sqlStatusState === 'sql-status-bar--error'">
-                        <OIcon name="error-outline" size="xs" style="flex-shrink:0;" />
+                        <OIcon name="error-outline" size="xs" class="shrink-0" />
                         <span class="whitespace-nowrap overflow-hidden text-ellipsis min-w-0 flex-1">{{ localSqlQueryErrorMsg || sqlQueryErrorMsg }}</span>
                       </template>
                       <template v-else-if="sqlStatusState === 'sql-status-bar--loading'">
@@ -191,19 +184,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         <span>{{ t('alerts.queryEditor.fetchingResults') }}</span>
                       </template>
                       <template v-else-if="sqlStatusState === 'sql-status-bar--hint'">
-                        <OIcon name="edit" size="xs" style="flex-shrink:0;opacity:0.6;" />
+                        <OIcon name="edit" size="xs" class="shrink-0 opacity-60" />
                         <span>{{ t('alerts.queryEditor.writeQueryHint') }}</span>
                       </template>
                       <template v-else-if="sqlStatusState === 'sql-status-bar--idle'">
-                        <OIcon name="play-arrow" size="xs" style="flex-shrink:0;opacity:0.7;" />
+                        <OIcon name="play-arrow" size="xs" class="shrink-0 opacity-70" />
                         <span>{{ t('alerts.queryEditor.runQueryHint') }}</span>
                       </template>
                       <template v-else-if="sqlStatusState === 'sql-status-bar--empty'">
-                        <OIcon name="search-off" size="xs" style="flex-shrink:0;" />
+                        <OIcon name="search-off" size="xs" class="shrink-0" />
                         <span>{{ t('alerts.queryEditor.noMatchingEvents') }}</span>
                       </template>
                       <template v-else-if="sqlStatusState === 'sql-status-bar--success'">
-                        <OIcon name="check-circle" size="xs" style="flex-shrink:0;" />
+                        <OIcon name="check-circle" size="xs" class="shrink-0" />
                         <span>{{ t('alerts.queryEditor.eventsFound', sqlResultCount) }}</span>
                       </template>
                     </div>
@@ -211,7 +204,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       v-if="sqlStatusState === 'sql-status-bar--error'"
                       side="top" align="center"
                       :max-width="'520px'"
-                      style="font-size:11px;white-space:pre-wrap;word-break:break-word;"
                       :content="localSqlQueryErrorMsg || sqlQueryErrorMsg"
                     />
                   </div>
@@ -220,20 +212,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <!-- VRL Editor Pane -->
                 <div
                   v-if="localTab !== 'promql'"
-                  class="w-full flex flex-col overflow-hidden rounded-lg"
+                  class="w-full flex flex-col overflow-hidden rounded-default"
                   :class="[
-                    store.state.theme === 'dark' ? 'border border-[#2d3748]' : 'border border-[#e5e7eb]',
-                    sqlEditorMaximized ? 'flex-none' : 'flex-[2]'
+                    'border border-border-default',
+                    sqlEditorMaximized ? 'flex-none' : 'flex-[2] min-h-40'
                   ]"
-                  :style="sqlEditorMaximized ? '' : 'min-height: 160px;'"
                 >
                   <!-- Pane Header -->
                   <div
-                    class="flex items-center justify-between py-2 px-3 min-h-12 shrink-0"
-                    :class="store.state.theme === 'dark' ? 'bg-white/[0.04] border-b border-[#2d3748]' : 'bg-[#f3f4f6] border-b border-[#e5e7eb]'"
+                    class="flex items-center justify-between py-2 px-3 min-h-12 shrink-0 bg-surface-subtle border-b border-border-default"
                   >
                     <div class="flex items-center gap-2">
-                      <div class="w-[3px] h-[14px] rounded-[2px] shrink-0 bg-(--q-secondary)" />
+                      <div class="w-0.75 h-3.5 rounded-default shrink-0 bg-section-accent-secondary" />
                       <span class="text-xs font-semibold">{{ t('alerts.vrlEditor') }}</span>
                     </div>
                     <div v-if="!sqlEditorMaximized" class="flex gap-2 items-center">
@@ -245,10 +235,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         labelKey="name"
                         valueKey="name"
                         @update:modelValue="onFunctionSelect"
-                        class="mini-select alert-v3-select"
+                        class="mini-select alert-v3-select w-35!"
                         clearable
                         @clear="onFunctionClear"
-                        style="width: 140px;"
                         :placeholder="t('alerts.placeholders.savedFunctions')"
                       >
                         <template #empty>
@@ -262,7 +251,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         data-test="alert-apply-vrl-btn"
                         variant="primary"
                         size="sm"
-                        class="h-[28px] text-xs rounded-md px-3!"
+                        class="h-7 text-xs rounded-default px-3!"
                         :disabled="vrlFunctionContent == ''"
                         @click="runTestFunction"
                       >
@@ -288,7 +277,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       :debounce-time="300"
                       editor-height="100%"
                       class="w-full h-full"
-                      :class="store.state.theme === 'dark' ? 'dark-mode-editor dark-mode' : 'light-mode-editor light-mode'"
                       @update:query="updateVrlFunction"
                       @focus="functionEditorPlaceholderFlag = false"
                       @blur="onBlurFunctionEditor"
@@ -301,7 +289,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       v-if="!vrlFunctionContent && functionEditorPlaceholderFlag"
                       class="absolute top-0 left-0 right-0 bottom-0 flex items-start [padding:0.1875rem_0.5rem_0_2.15rem] pointer-events-none z-[1] select-none"
                     >
-                      <span class="font-mono text-[var(--text-base)] [line-height:1.3125rem] text-[#a0aec0] whitespace-nowrap overflow-hidden text-ellipsis">{{ vrlPlaceholder }}</span>
+                      <span class="font-mono text-[var(--text-sm)] [line-height:1.3125rem] text-text-placeholder whitespace-nowrap overflow-hidden text-ellipsis">{{ vrlPlaceholder }}</span>
                     </div>
                   </div>
                 </div>
@@ -313,22 +301,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
               <!-- Query Result Pane -->
               <div
-                class="flex-1 flex flex-col overflow-hidden rounded-lg"
-                :class="store.state.theme === 'dark' ? 'border border-[#2d3748]' : 'border border-[#e5e7eb]'"
-                style="min-height: 220px;"
+                class="flex-1 flex flex-col overflow-hidden rounded-default border border-border-default min-h-55"
               >
                 <!-- Pane Header -->
                 <div
-                  class="flex items-center justify-between py-2 px-3 min-h-12 shrink-0"
-                  :class="store.state.theme === 'dark' ? 'bg-white/[0.04] border-b border-[#2d3748]' : 'bg-[#f3f4f6] border-b border-[#e5e7eb]'"
+                  class="flex items-center justify-between py-2 px-3 min-h-12 shrink-0 bg-surface-subtle border-b border-border-default"
                 >
                   <div class="flex items-center gap-2">
-                    <div class="w-[3px] h-[14px] rounded-[2px] shrink-0 bg-(--q-primary)" />
+                    <div class="w-0.75 h-3.5 rounded-default shrink-0 bg-theme-accent" />
                     <span class="text-xs font-semibold">{{ t('alerts.queryEditor.queryResult') }}</span>
                     <span
                       v-if="multiTimeRange && multiTimeRange.length > 0"
-                      class="text-[10px] font-bold py-px px-[7px] rounded tracking-[0.04em]"
-                      :class="store.state.theme === 'dark' ? 'bg-blue-500/[0.12] border border-blue-500/30 text-[#60a5fa]' : 'bg-blue-500/[0.08] border border-blue-500/25 text-[#2563eb]'"
+                      class="text-3xs font-bold py-px px-1.75 rounded-default tracking-[0.04em] bg-status-info-bg border border-banner-info-border text-text-link"
                     >{{ t('alerts.queryEditor.resultsAcrossWindows') }}</span>
                   </div>
                 </div>
@@ -336,16 +320,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <!-- Content -->
                 <div class="flex-1 min-h-0 overflow-hidden">
                   <!-- Idle: not yet run -->
-                  <div v-if="!tempRunQuery && outputEvents == ''" class="flex flex-col justify-center items-center h-full w-full bg-(--o2-card-bg)">
+                  <div v-if="!tempRunQuery && outputEvents == ''" class="flex flex-col justify-center items-center h-full w-full bg-card-glass-bg">
                     <div class="flex flex-col items-center gap-2">
-                      <OIcon name="table-chart" class="opacity-[0.18]" style="width: 48px; height: 48px;" />
+                      <OIcon name="table-chart" class="opacity-[0.18] size-12!" />
                       <span class="text-xs opacity-[0.45]">{{ t('alerts.runQueryForOutput') }}</span>
                     </div>
                   </div>
                   <!-- No results after run -->
-                  <div v-else-if="outputEvents == '' && !runQueryLoading" class="flex flex-col justify-center items-center h-full bg-(--o2-card-bg)">
+                  <div v-else-if="outputEvents == '' && !runQueryLoading" class="flex flex-col justify-center items-center h-full bg-card-glass-bg">
                     <div class="flex flex-col items-center gap-2">
-                      <OIcon name="warning" size="xl" class="text-orange-400 opacity-60" />
+                      <OIcon name="warning" size="xl" class="text-warning opacity-60" />
                     </div>
                   </div>
                   <!-- Loading -->
@@ -370,43 +354,39 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <!-- Combined Output Pane (SQL + VRL only) -->
               <div
                 v-if="localTab !== 'promql'"
-                class="flex-1 flex flex-col overflow-hidden rounded-lg"
-                :class="store.state.theme === 'dark' ? 'border border-[#2d3748]' : 'border border-[#e5e7eb]'"
-                style="min-height: 200px;"
+                class="flex-1 flex flex-col overflow-hidden rounded-default border border-border-default min-h-50"
               >
                 <!-- Pane Header -->
                 <div
-                  class="flex items-center justify-between py-2 px-3 min-h-12 shrink-0"
-                  :class="store.state.theme === 'dark' ? 'bg-white/[0.04] border-b border-[#2d3748]' : 'bg-[#f3f4f6] border-b border-[#e5e7eb]'"
+                  class="flex items-center justify-between py-2 px-3 min-h-12 shrink-0 bg-surface-subtle border-b border-border-default"
                 >
                   <div class="flex items-center gap-2">
-                    <div class="w-[3px] h-[14px] rounded-[2px] shrink-0 bg-(--q-secondary)" />
+                    <div class="w-0.75 h-3.5 rounded-default shrink-0 bg-section-accent-secondary" />
                     <span class="text-xs font-semibold">{{ t('alerts.queryEditor.combinedOutput') }}</span>
                     <span
-                      class="text-[10px] font-bold py-px px-[7px] rounded tracking-[0.04em]"
-                      :class="store.state.theme === 'dark' ? 'bg-violet-500/[0.15] border border-violet-500/30 text-[#a78bfa]' : 'bg-violet-500/[0.10] border border-violet-500/25 text-[#7c3aed]'"
+                      class="text-3xs font-bold py-px px-1.75 rounded-default tracking-[0.04em] bg-badge-purple-soft-bg border border-badge-purple-ol-border text-badge-purple-ol-text"
                     >SQL + VRL</span>
                   </div>
                   <!-- Running indicator -->
                   <div v-if="runFnQueryLoading" class="flex items-center gap-1">
-                    <span class="w-[6px] h-[6px] rounded-full bg-emerald-500 [animation:pulse_1.5s_ease-in-out_infinite]" />
-                    <span class="text-[10px] font-semibold text-emerald-400">{{ t('alerts.queryEditor.running') }}</span>
+                    <span class="query-editor-run-dot w-1.5 h-1.5 rounded-full bg-status-positive" />
+                    <span class="text-3xs font-semibold text-status-positive">{{ t('alerts.queryEditor.running') }}</span>
                   </div>
                 </div>
 
                 <!-- Content -->
                 <div class="flex-1 min-h-0 overflow-hidden">
                   <!-- Idle -->
-                  <div v-if="!tempTestFunction && !runFnQueryLoading" class="flex flex-col justify-center items-center h-full w-full bg-(--o2-card-bg)">
+                  <div v-if="!tempTestFunction && !runFnQueryLoading" class="flex flex-col justify-center items-center h-full w-full bg-card-glass-bg">
                     <div class="flex flex-col items-center gap-2">
-                      <OIcon name="data-object" class="opacity-[0.18]" style="width: 48px; height: 48px;" />
+                      <OIcon name="data-object" class="opacity-[0.18] size-12!" />
                       <span class="text-xs opacity-[0.45]">{{ t('alerts.applyVRLForOutput') }}</span>
                     </div>
                   </div>
                   <!-- No results -->
-                  <div v-else-if="outputFnEvents == '' && !runFnQueryLoading && tempTestFunction" class="flex flex-col justify-center items-center h-full bg-(--o2-card-bg)">
+                  <div v-else-if="outputFnEvents == '' && !runFnQueryLoading && tempTestFunction" class="flex flex-col justify-center items-center h-full bg-card-glass-bg">
                     <div class="flex flex-col items-center gap-2">
-                      <OIcon name="warning" size="xl" class="text-orange-400 opacity-60" />
+                      <OIcon name="warning" size="xl" class="text-warning opacity-60" />
                     </div>
                   </div>
                   <!-- Loading -->
@@ -434,9 +414,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
       <!-- AI Chat Panel -->
       <div
-        class="ml-2 w-[24.5vw] max-w-full min-w-[75px]"
+        class="ml-2 w-[24.5vw] max-w-full min-w-18.75 bg-surface-base"
         v-if="store.state.isAiChatEnabled"
-        :class="store.state.theme == 'dark' ? 'bg-[#1f2937]' : 'bg-white'"
       >
         <O2AIChat
           :header-height="48"
@@ -462,6 +441,7 @@ import {
 import { type SqlErrorRange } from "@/utils/query/sqlDiagnostics";
 import { useI18n } from "vue-i18n";
 import { useStore } from "vuex";
+import useTheme from "@/composables/useTheme";
 import OButton from '@/lib/core/Button/OButton.vue';
 import ODrawer from '@/lib/overlay/Drawer/ODrawer.vue';
 import { debounce } from "lodash-es";
@@ -551,6 +531,7 @@ const emit = defineEmits([
 
 const { t } = useI18n();
 const store = useStore();
+const { isDark } = useTheme();
 const { buildQueryPayload } = useQuery();
 const { sqlParser } = useParser();
 
@@ -572,15 +553,14 @@ const sqlStatusState = computed(() => {
 });
 
 const sqlStatusBarClasses = computed(() => {
-  const isDark = store.state.theme === 'dark';
-  const neutralBg = isDark ? 'bg-white/[0.04] text-[#9ca3af]' : 'bg-[#f3f4f6] text-[#6b7280]';
+  const neutralBg = 'bg-surface-subtle text-text-secondary';
   const map: Record<string, string> = {
     'sql-status-bar--hint':    neutralBg,
     'sql-status-bar--idle':    neutralBg,
-    'sql-status-bar--loading': 'bg-[rgba(139,92,246,0.06)] text-[#8b5cf6]',
-    'sql-status-bar--error':   'bg-[rgba(239,68,68,0.08)] text-[#ef4444] cursor-pointer',
-    'sql-status-bar--empty':   'bg-[rgba(245,158,11,0.06)] text-[#f59e0b]',
-    'sql-status-bar--success': 'bg-[rgba(16,185,129,0.06)] text-[#10b981]',
+    'sql-status-bar--loading': 'bg-[color-mix(in_srgb,var(--color-sql-accent)_6%,transparent)] text-sql-accent',
+    'sql-status-bar--error':   'bg-status-error-bg text-status-error-text cursor-pointer',
+    'sql-status-bar--empty':   'bg-status-warning-bg text-status-warning-text',
+    'sql-status-bar--success': 'bg-status-success-bg text-status-positive',
   };
   return map[sqlStatusState.value] ?? '';
 });
@@ -1169,15 +1149,28 @@ const getBtnLogo = computed(() => {
     return getImageURL('images/common/ai_icon_dark.svg')
   }
 
-  return store.state.theme === 'dark'
+  return isDark.value
     ? getImageURL('images/common/ai_icon_dark.svg')
     : getImageURL('images/common/ai_icon_gradient.svg')
 })
 </script>
 
-<style>
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50%       { opacity: 0.3; }
+<style scoped>
+/* keep(keyframes): the "Running" status dot is used only by this dialog. The
+   `animation` is declared here, not as a template `[animation:…]` utility, so
+   Vue's scoped compiler renames the keyframe and this reference together. */
+.query-editor-run-dot {
+  animation: dot-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes dot-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.3;
+  }
 }
 </style>
+
diff --git a/web/src/components/alerts/RealTimeAlert.vue b/web/src/components/alerts/RealTimeAlert.vue
deleted file mode 100644
index e160674f03..0000000000
--- a/web/src/components/alerts/RealTimeAlert.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>. -->
-
-<template>
-  <div class="real-time-alert">
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-// RealTimeAlert component placeholder
-</script>
diff --git a/web/src/components/alerts/SemanticFieldGroupsConfig.vue b/web/src/components/alerts/SemanticFieldGroupsConfig.vue
index 9a44a960b6..e5e8fc7aed 100644
--- a/web/src/components/alerts/SemanticFieldGroupsConfig.vue
+++ b/web/src/components/alerts/SemanticFieldGroupsConfig.vue
@@ -16,11 +16,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <div class="w-full">
-    <div class="border-b border-separator pb-3 mb-3">
-      <div class="text-xl font-semibold">
+    <div class="mb-4">
+      <div class="text-sm font-semibold leading-tight text-text-heading">
         {{ t("settings.correlation.semanticFieldGroupsTitle") }}
       </div>
-      <div class="text-xs text-gray-400">
+      <div class="text-xs text-text-secondary mt-1">
         {{ t("correlation.semanticFieldGroupsCaption") }}
       </div>
     </div>
@@ -34,8 +34,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :options="categoryOptions"
           :label="t('correlation.category')"
           :hint="t('correlation.categoryHint')"
-          class="showLabelOnTop"
-          style="max-width: 100%"
+          class="showLabelOnTop max-w-full"
         />
       </div>
       <div class="w-full col-md-8 flex items-center justify-end gap-2">
@@ -76,7 +75,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         @delete="removeGroupByFilter(index)"
       />
     </div>
-    <div v-else class="text-center p-4 text-gray-400">
+    <div v-else class="text-center p-4 text-text-muted">
       <OIcon name="info" size="md" class="mb-2" />
       <div>
         {{
@@ -88,7 +87,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </div>
 
     <!-- Total groups indicator -->
-    <div v-if="localGroups.length > 0" class="text-xs text-gray-400 mt-2">
+    <div v-if="localGroups.length > 0" class="text-xs text-text-secondary mt-2">
       {{
         t("correlation.showingGroups", {
           filterGroupLength: filteredGroups.length,
@@ -106,7 +105,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         {{ t("correlation.deduplicateFields") }} *
         <OTooltip :content="t('correlation.deduplicateFieldTooltip')" />
       </div>
-      <div class="text-xs text-gray-400 mb-3">
+      <div class="text-xs text-text-secondary mb-3">
         {{ t("correlation.alertDeduplicationMessage") }}
       </div>
       <div class="flex flex-wrap gap-3">
@@ -123,7 +122,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </div>
       <div
         v-if="localFingerprintFields.length === 0"
-        class="text-red-500 text-xs mt-2"
+        class="text-status-error-text text-xs mt-2"
       >
         {{ t("correlation.atLeastOneDeduplicationField") }}
       </div>
@@ -412,8 +411,8 @@ onMounted(async () => {
 });
 </script>
 
-<style>
-/* Applied via JS to the target group item */
+<style scoped>
+/* keep(keyframes): @keyframes can't be expressed as a utility; applied via JS classList */
 .group-highlight {
   animation: group-border-blink 0.4s ease-in-out 3;
 }
@@ -421,11 +420,11 @@ onMounted(async () => {
 @keyframes group-border-blink {
   0%,
   100% {
-    outline: 2px solid transparent;
+    outline: 0.125rem solid transparent;
   }
   50% {
-    outline: 2px solid var(--q-primary);
-    border-radius: 4px;
+    outline: 0.125rem solid var(--color-theme-accent);
+    border-radius: 0.25rem;
   }
 }
 </style>
diff --git a/web/src/components/alerts/SemanticGroupItem.schema.ts b/web/src/components/alerts/SemanticGroupItem.schema.ts
index fb5aa0592b..b53b7b4f5b 100644
--- a/web/src/components/alerts/SemanticGroupItem.schema.ts
+++ b/web/src/components/alerts/SemanticGroupItem.schema.ts
@@ -24,10 +24,6 @@ import { z } from "zod";
 // The generated `id` and the parent-supplied `group` (category) are NOT form
 // fields — `id` is a slugify side-effect of `display` and `group` comes from the
 // prop; both are merged back into the emitted group object, never validated.
-//
-// Message parity: the live message was `t('common.name') + ' is required'`, which
-// resolves to "Name is required" — the same English as the shared
-// `common.nameRequired` i18n key used here (factory takes the component's `t`).
 export const makeSemanticGroupItemSchema = (t: (_key: string) => string) =>
   z.object({
     display: z.string().min(1, t("common.nameRequired")),
@@ -41,8 +37,7 @@ export type SemanticGroupItemForm = z.infer<
 
 /**
  * Typed default values for the form, projected from the (optional) group record
- * the row is editing. This is an edit-prefill form (values come from a prop), so
- * the defaults are derived from that record rather than a create-only blank.
+ * the row is editing.
  */
 export const semanticGroupItemDefaults = (
   group?: Partial<Pick<SemanticGroupItemForm, "display" | "is_workload_type" | "fields">>,
diff --git a/web/src/components/alerts/SemanticGroupItem.vue b/web/src/components/alerts/SemanticGroupItem.vue
index c9e9c7b6a5..12515bd55d 100644
--- a/web/src/components/alerts/SemanticGroupItem.vue
+++ b/web/src/components/alerts/SemanticGroupItem.vue
@@ -15,7 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="semantic-group-item p-3 mb-2 rounded-lg transition-all duration-200 w-full max-w-full bg-(--o2-card-bg) border border-(--o2-border-color,rgba(0,0,0,0.12))">
+  <div class="semantic-group-item p-3 mb-2 rounded-default transition-all duration-200 w-full max-w-full bg-card-glass-bg border border-card-glass-border">
     <OForm :form="form">
       <div class="grid grid-cols-[200px_1fr_auto] gap-4 items-start w-full overflow-hidden">
         <!-- Left Column: Display Name only (ID is internal/read-only) -->
@@ -31,7 +31,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             />
           </div>
           <!-- Show ID as read-only caption for existing groups -->
-          <div v-if="currentId" class="text-xs text-gray-400">
+          <div v-if="currentId" class="text-xs text-text-secondary">
             {{ t("common.id") }}: {{ currentId }}
           </div>
           <OFormSwitch
@@ -127,22 +127,20 @@ const generateIdFromDisplay = (display: string): string => {
   return categorySlug ? `${categorySlug}-${displaySlug}` : displaySlug;
 };
 
-// This row OWNS its <OForm> (Rule ③ owner pattern): it must read form state
-// reactively to re-emit the parent-collected "update" on every field change and
-// to run the id-generation side-effect. Wire the save into `onSubmit` so a
-// programmatic submit (or Enter inside the inline form) emits the assembled
-// group only when the schema passes.
+// This row owns its <OForm>: it reads form state reactively to re-emit the
+// parent-collected "update" on every field change and to run the id-generation
+// side-effect. The save runs on submit so a programmatic submit (or Enter inside
+// the inline form) emits the assembled group only when the schema passes.
 const form = useOForm<SemanticGroupItemForm>({
   defaultValues: semanticGroupItemDefaults(props.group),
   schema: makeSemanticGroupItemSchema(t),
-  // emitIfChanged, not emitUpdate: handleDisplayBlur submits on every blur to
-  // paint the required error, and the values watcher has usually emitted already
-  // — so an unconditional emit would fire a redundant "update" per blur.
+  // Emit only if changed: handleDisplayBlur submits on every blur to paint the
+  // required error, so an unconditional emit would fire a redundant "update".
   onSubmit: () => emitIfChanged(),
 });
 
-// Assemble the emitted group from the outside-form context (id + category from
-// the prop) merged with the form-owned values — explicit keys, no schema leak.
+// Assemble the emitted group from the id + category (from the prop) merged with
+// the form-owned values.
 const buildGroup = (): SemanticGroup => {
   const values = form.state.values as SemanticGroupItemForm;
   return {
@@ -154,9 +152,8 @@ const buildGroup = (): SemanticGroup => {
   };
 };
 
-// Guard against redundant / self-echo emits (the parent round-trips the group
-// back into the `group` prop after each emit) so the empty-form submit test can
-// assert "not fired" and typing doesn't loop.
+// Guard against redundant / self-echo emits: the parent round-trips the group
+// back into the `group` prop after each emit, so typing could otherwise loop.
 const lastEmitted = ref<string>(JSON.stringify(buildGroup()));
 
 const emitUpdate = () => {
@@ -171,20 +168,15 @@ const emitIfChanged = () => {
   }
 };
 
-// Re-emit "update" on every field change (parent collects rows live — Rule ④
-// event parity with the pre-migration per-field @update handlers).
+// Re-emit "update" on every field change (parent collects rows live).
 const formValues = form.useStore((s: any) => s.values);
 watch(formValues, () => emitIfChanged(), { deep: true });
 
 // Regenerate the id from the display, then surface the schema's "Name is
-// required" on the field — pre-migration `handleDisplayBlur` did BOTH.
-//
-// The submit is what paints it: useOForm wires revalidateLogic({mode:"submit"}),
-// so nothing validates until a first submit, and this inline row has no submit
-// button (its only consumer wires @update/@delete). Without this call the rule
-// exists but can never fire. `modeAfterSubmission:"change"` then re-validates on
-// every keystroke, which is what clears the message as the user types — matching
-// the old `handleDisplayChange` reset.
+// required" on the field. The submit call is what paints it: validation runs on
+// submit, and this inline row has no submit button, so without this call the
+// rule can never fire. Re-validation on change then clears the message as the
+// user types.
 const handleDisplayBlur = () => {
   const display = (form.state.values as SemanticGroupItemForm).display;
   if (display) {
@@ -199,8 +191,7 @@ const handleDisplayBlur = () => {
 
 // External changes to the group prop (import merge, category switch) reset the
 // form; a self-echo (the parent replaying our own emit) is skipped so it never
-// resets mid-edit (which would flash/jump). Only the form-owned fields + id are
-// compared — the `group` category is not a form field.
+// resets mid-edit. Only the form-owned fields + id are compared.
 watch(
   () => props.group,
   (newGroup) => {
@@ -221,7 +212,7 @@ watch(
       currentId.value = newGroup.id;
       form.reset(semanticGroupItemDefaults(newGroup));
       // Rebaseline so the deep values-watch that follows the reset does NOT
-      // re-emit "update" (the original prop-sync did not emit either).
+      // re-emit "update".
       lastEmitted.value = JSON.stringify(buildGroup());
     }
   },
diff --git a/web/src/components/alerts/TemplateList.spec.ts b/web/src/components/alerts/TemplateList.spec.ts
index 914b91f695..38feaa7c2c 100644
--- a/web/src/components/alerts/TemplateList.spec.ts
+++ b/web/src/components/alerts/TemplateList.spec.ts
@@ -62,7 +62,7 @@ describe("Alert List", async () => {
   });
 
   it("Should render alerts title", () => {
-    // Title now lives in the standard AppPageHeader (row 1).
+    // Title now lives in the standard OPageHeader (row 1).
     expect(wrapper.find(".app-page-header h1").text()).toBe("Templates");
   });
 
diff --git a/web/src/components/alerts/TemplateList.vue b/web/src/components/alerts/TemplateList.vue
index 7e9e45bacf..be8d0f7118 100644
--- a/web/src/components/alerts/TemplateList.vue
+++ b/web/src/components/alerts/TemplateList.vue
@@ -16,18 +16,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <div class="flex flex-col h-full p-0">
-    <PageLayout
+    <OPageLayout bleed
       v-if="!showImportTemplate && !showTemplateEditor"
-      :main-panel="false"
-      :header-class="'shrink-0 px-4 border-b border-border-default'"
+      :title="t('alert_templates.header')"
+      icon="description"
+      :subtitle="'Reusable alert message templates'"
     >
-      <!-- Standard section header: title + actions only. Search moved to toolbar. -->
-      <template #header>
-      <AppPageHeader
-        :title="t('alert_templates.header')"
-        icon="description"
-        :subtitle="'Reusable alert message templates'"
-      >
         <template #actions>
           <OToggleGroup
             :model-value="activeTab"
@@ -63,9 +57,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             >{{ t(`alert_templates.add`) }}</OButton
           >
         </template>
-      </AppPageHeader>
-      </template>
-      <div class="card-container flex-1 min-h-0 overflow-hidden">
+      <div class="bg-card-glass-bg flex-1 min-h-0 overflow-hidden">
       <OTable
         :frame="false"
         data-test="alert-templates-list-table"
@@ -83,6 +75,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         sorting="client"
         filter-mode="client"
         :default-columns="false"
+        show-index
         :show-global-filter="false"
         @update:selected-ids="handleSelectedIdsUpdate"
       >
@@ -188,7 +181,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           v-if="selectedTemplates.length > 0"
           #bottom
         >
-          <span class="text-xs text-text-primary">
+          <span class="text-xs text-text-secondary">
             {{ selectedTemplates.length }} selected
           </span>
           <OButton
@@ -203,8 +196,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </template>
       </OTable>
       </div>
-    </PageLayout>
-    <div v-else-if="!showImportTemplate && showTemplateEditor">
+    </OPageLayout>
+    <div v-else-if="!showImportTemplate && showTemplateEditor" class="flex-1 min-h-0">
       <AddTemplate
         :template="editingTemplate"
         :is-clone="cloningTemplate"
@@ -259,14 +252,12 @@ import OToggleGroup from "@/lib/core/ToggleGroup/OToggleGroup.vue";
 import OToggleGroupItem from "@/lib/core/ToggleGroup/OToggleGroupItem.vue";
 import OTag from "@/lib/core/Badge/OTag.vue";
 import type { OTableColumnDef } from "@/lib/core/Table/OTable.types";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
-import PageLayout from "@/components/common/PageLayout.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import ImportTemplate from "./ImportTemplate.vue";
 import { useReo } from "@/services/reodotdev_analytics";
 import { toast } from "@/lib/feedback/Toast/useToast";
 import { useShortcuts } from "@/lib/vue-shortcut-manager";
 import { focusSearchInput, isInputFocused } from "@/utils/keyboardShortcuts";
-import { TABLE_INDEX_COL_SIZE } from "@/lib/core/Table/OTable.types";
 
 const AddTemplate = defineAsyncComponent(
   () => import("@/components/alerts/AddTemplate.vue"),
@@ -278,13 +269,6 @@ const router = useRouter();
 const { track } = useReo();
 const templates: Ref<Template[]> = ref([]);
 const columns: OTableColumnDef[] = [
-  {
-    id: "#",
-    header: "#",
-    accessorKey: "#",
-    size: TABLE_INDEX_COL_SIZE,
-    meta: { align: "left" },
-  },
   {
     id: "name",
     header: t("alert_templates.name"),
@@ -370,10 +354,7 @@ const getTemplates = () => {
     })
     .then((res) => {
       resultTotal.value = res.data.length;
-      templates.value = res.data.map((data: any, index: number) => ({
-        ...data,
-        "#": index + 1 <= 9 ? `0${index + 1}` : index + 1,
-      }));
+      templates.value = res.data;
       updateRoute();
     })
     .catch((err) => {
@@ -534,7 +515,6 @@ const filterData = (rows: any, terms: any) => {
 const exportTemplate = (row: any) => {
   const findTemplate: any = getTemplateByName(row.name);
   const templateByName = { ...findTemplate };
-  if (templateByName.hasOwnProperty("#")) delete templateByName["#"];
   const templateJson = JSON.stringify(templateByName, null, 2);
   const blob = new Blob([templateJson], { type: "application/json" });
   const url = URL.createObjectURL(blob);
diff --git a/web/src/components/alerts/steps/Advanced.vue b/web/src/components/alerts/steps/Advanced.vue
index d33f0fbb64..3498be91c1 100644
--- a/web/src/components/alerts/steps/Advanced.vue
+++ b/web/src/components/alerts/steps/Advanced.vue
@@ -17,7 +17,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div
     class="step-advanced w-full"
-    :class="store.state.theme === 'dark' ? 'dark-mode' : 'light-mode'"
   >
     <!-- DESCENDANT step (Rule ③): the AddAlert orchestrator owns the ONE <OForm>
          and provides FORM_CONTEXT_KEY. The OForm* fields below inject that form
@@ -26,16 +25,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
          AddAlert.schema.ts validates on save. -->
     <div>
     <div
-      class="step-content rounded-lg bg-[var(--color-surface-overlay)] border border-[var(--color-border-default)]"
+      class="step-content rounded-default bg-surface-overlay border border-border-default"
     >
       <!-- Section header -->
       <div
-        class="section-header flex items-center py-[10px] px-3"
-        :class="store.state.theme === 'dark' ? 'border-b border-[#343434]' : 'border-b border-[#eeeeee]'"
+        class="section-header flex items-center py-2.5 px-3 border-b border-border-default"
       >
-        <div class="section-header-accent w-[3px] h-4 rounded-[2px] mr-2 shrink-0 bg-[var(--q-primary)]" />
+        <div class="section-header-accent w-0.75 h-4 rounded-default mr-2 shrink-0 bg-theme-accent" />
         <span
-          class="section-header-title text-[13px] font-semibold text-[var(--color-text-primary)]"
+          class="section-header-title text-compact font-semibold text-text-heading"
         >{{
           t("alerts.additional_settings")
         }}</span>
@@ -45,8 +43,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- Template Override -->
         <div>
           <div
-            class="subsection-label flex items-center text-xs font-semibold mb-2"
-            :class="store.state.theme === 'dark' ? 'text-[#9ca3af]' : 'text-[#6b7280]'"
+            class="subsection-label flex items-center text-xs font-semibold mb-2 text-text-secondary"
           >
             <span>{{ t("alerts.template") }}</span>
             <OButton
@@ -66,7 +63,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :options="formattedTemplates"
               clearable
               :placeholder="t('alerts.advanced.selectTemplate')"
-              class="min-w-[240px] max-w-[300px]"
+              class="min-w-60 max-w-75"
               data-test="advanced-template-override-select"
             >
               <template #empty>{{ t("alerts.advanced.noTemplatesAvailable") }}</template>
@@ -85,8 +82,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- Context Variables -->
         <div>
           <div
-            class="subsection-label flex items-center text-xs font-semibold mb-2"
-            :class="store.state.theme === 'dark' ? 'text-[#9ca3af]' : 'text-[#6b7280]'"
+            class="subsection-label flex items-center text-xs font-semibold mb-2 text-text-secondary"
           >
             <span>{{ t("alerts.additionalVariables") }}</span>
             <OButton
@@ -127,13 +123,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 data-test="alert-variables-key-input"
                 :name="`context_attributes[${index}].key`"
                 :placeholder="t('common.name')"
-                class="min-w-[140px]"
+                class="min-w-35"
               />
               <OFormInput
                 data-test="alert-variables-value-input"
                 :name="`context_attributes[${index}].value`"
                 :placeholder="t('common.value')"
-                class="min-w-[200px]"
+                class="min-w-50"
               />
               <OButton
                 data-test="alert-variables-delete-variable-btn"
@@ -159,8 +155,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- Description -->
         <div>
           <div
-            class="subsection-label flex items-center text-xs font-semibold mb-2"
-            :class="store.state.theme === 'dark' ? 'text-[#9ca3af]' : 'text-[#6b7280]'"
+            class="subsection-label flex items-center text-xs font-semibold mb-2 text-text-secondary"
           >
             <span>{{ t("alerts.description") }}</span>
           </div>
@@ -175,8 +170,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <div>
           <div class="flex items-center justify-between mb-2">
             <div
-              class="subsection-label flex items-center text-xs font-semibold"
-              :class="store.state.theme === 'dark' ? 'text-[#9ca3af]' : 'text-[#6b7280]'"
+              class="subsection-label flex items-center text-xs font-semibold text-text-secondary"
             >
               <span>{{ t("alerts.row") }}</span>
               <OButton
diff --git a/web/src/components/alerts/steps/AlertSettings.schema.ts b/web/src/components/alerts/steps/AlertSettings.schema.ts
index f19b00a538..9247a2e68f 100644
--- a/web/src/components/alerts/steps/AlertSettings.schema.ts
+++ b/web/src/components/alerts/steps/AlertSettings.schema.ts
@@ -24,54 +24,39 @@
 //   - creates_incident           (switch)              — optional boolean
 //
 // The cross-step threshold / promql / aggregation / group_by / frequency / cron
-// checks that used to live in the component's hand-rolled validate() are NOT
-// here — they belong to QueryConfig / the AddAlert orchestrator (see the
-// "CROSS-STEP CHECKS TO REHOME" note in the migration report). Do not add them.
+// checks are NOT here — they belong to QueryConfig / the AddAlert orchestrator.
+// Do not add them.
 //
-// Number inputs emit STRINGS out of OFormInput → `z.coerce.number()`
-// (playbook §2). TanStack does NOT write the coerced value back onto the field,
-// so the component re-coerces (`Number(...)`) when it emits the payload up so the
-// parent's trigger_condition keeps number types (Rule ④ payload parity).
+// Number inputs emit STRINGS out of OFormInput → `z.coerce.number()`. TanStack
+// does NOT write the coerced value back onto the field, so the component
+// re-coerces (`Number(...)`) when it emits the payload up so the parent's
+// trigger_condition keeps number types.
 
 import { z } from "zod";
 import type { Translator } from "./QueryConfig.schema";
 
 // Validation messages are i18n-driven — `alerts.validation.*` locale keys,
-// resolved via the injected `t`. English values are byte-for-byte the
-// pre-migration strings (parity). Parity map:
-//   silence ≥ 0          → alerts.validation.silenceNonNegative
-//   period ≥ 1           → alerts.validation.periodPositive
-//   destinations ≥ 1     → alerts.validation.destinationRequired
+// resolved via the injected `t`.
 
 // ── Composable field FRAGMENTS (factories over the injected `t`) ─────────────
 // Exposed so the AddAlert orchestrator schema can compose the SAME rules into
 // its (bigger) alert schema — call these instead of re-declaring the rules, so
 // the step and the orchestrator can never drift.
 //
-//   import {
-//     makeSilenceSchema,
-//     makePeriodSchema,
-//     makeDestinationsSchema,
-//     alertSettingsCreatesIncidentSchema,
-//   } from "./steps/AlertSettings.schema";
-//
 // The orchestrator applies the period rule MODE-CONDITIONALLY (scheduled only)
 // via `createAlertSettingsSchema(t, isRealTime)`.
 
-/** True when the RAW input value is empty (unset). Mirrors the `isBlank` helper
- *  in QueryConfig.schema.ts (kept local — that one is module-private there). */
+/** True when the RAW input value is empty (unset). */
 const isBlank = (v: unknown): boolean =>
   v === undefined || v === null || v === "";
 
-/** silence ≥ 0 (required). Pre-migration: `silence < 0 || undefined/null/''`
- *  → invalid, in BOTH realtime and scheduled modes.
+/** silence ≥ 0 (required).
  *
  *  ⚠️ Checked on the RAW value — NOT `z.coerce.number()`. Because
  *  `Number("") === 0`, a coerced blank would PASS `.min(0)` (0 is a legal
  *  silence!), save, and then `parseInt("")` in getAlertPayload → `NaN` →
  *  serialised to `null`. Zero-safety is exactly why this rule cannot coerce:
- *  it must tell "" apart from 0. Same trap documented in
- *  QueryConfig.schema.ts (see its `isBlank` / `isBelowOne` note). */
+ *  it must tell "" apart from 0. */
 export const makeSilenceSchema = (t: Translator) =>
   z
     .unknown()
@@ -79,14 +64,14 @@ export const makeSilenceSchema = (t: Translator) =>
       (v) => !isBlank(v) && !Number.isNaN(Number(v)) && Number(v) >= 0,
       t("alerts.validation.silenceNonNegative"),
     )
-    // Output stays `number` (identical to the `z.coerce.number()` this replaces)
-    // so composed z.infer types are unchanged. Inert at runtime — TanStack does
-    // not write a validator's parsed output back onto the field.
+    // Output stays `number` so composed z.infer types are unchanged. Inert at
+    // runtime — TanStack does not write a validator's parsed output back onto
+    // the field.
     .transform((v) => Number(v));
 
-/** period ≥ 1 (required). Pre-migration this rule applied in the SCHEDULED
- *  branch only (the period input only renders for scheduled alerts). Compose it
- *  conditionally in the orchestrator; standalone AlertSettings applies it via
+/** period ≥ 1 (required). Applies in the SCHEDULED branch only (the period input
+ *  only renders for scheduled alerts). Compose it conditionally in the
+ *  orchestrator; standalone AlertSettings applies it via
  *  `createAlertSettingsSchema(t, isRealTime)` below. */
 export const makePeriodSchema = (t: Translator) =>
   z.coerce.number().min(1, t("alerts.validation.periodPositive"));
@@ -96,7 +81,7 @@ export const makePeriodSchema = (t: Translator) =>
 export const makeDestinationsSchema = (t: Translator) =>
   z.array(z.string()).min(1, t("alerts.validation.destinationRequired"));
 
-/** creates_incident: optional boolean (no pre-migration rule). */
+/** creates_incident: optional boolean. */
 export const alertSettingsCreatesIncidentSchema = z.boolean().optional();
 
 /**
@@ -118,14 +103,11 @@ export const makeAlertSettingsShape = (t: Translator) =>
 // ── Mode-conditional composite ──────────────────────────────────────────────
 
 /**
- * The AlertSettings rule set, composed VERBATIM into the AddAlert orchestrator
- * schema (AddAlert.schema.ts superRefine) — the step itself is a DESCENDANT of
- * the ONE AddAlert form and no longer owns an <OForm>.
+ * The AlertSettings rule set, composed into the AddAlert orchestrator schema.
  *
- * `isRealTime` gates the period rule EXACTLY like the pre-migration code: the
- * period input renders (and is validated ≥ 1) only for scheduled alerts. In
- * realtime mode period is not rendered and keeps its default value, so it is a
- * plain `z.coerce.number()` with no min (no newly-tightened rule — Rule ④).
+ * `isRealTime` gates the period rule: the period input renders (and is validated
+ * ≥ 1) only for scheduled alerts. In realtime mode period is not rendered and
+ * keeps its default value, so it is a plain `z.coerce.number()` with no min.
  */
 export const createAlertSettingsSchema = (t: Translator, isRealTime: boolean) =>
   z.object({
diff --git a/web/src/components/alerts/steps/AlertSettings.vue b/web/src/components/alerts/steps/AlertSettings.vue
index 4057fed7d5..756c5de146 100644
--- a/web/src/components/alerts/steps/AlertSettings.vue
+++ b/web/src/components/alerts/steps/AlertSettings.vue
@@ -16,27 +16,24 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <div
-    class="step-alert-conditions w-full rounded-lg mx-auto bg-[var(--color-surface-overlay)] border border-[var(--color-border-default)]"
-    :class="store.state.theme === 'dark' ? 'dark-mode' : 'light-mode'"
+    class="step-alert-conditions w-full rounded-default mx-auto bg-surface-overlay border border-border-default"
   >
     <!-- Section header -->
     <div
-      class="flex items-center py-2.5 px-3"
-      :class="store.state.theme === 'dark' ? 'border-b border-[#343434]' : 'border-b border-[#eeeeee]'"
+      class="flex items-center py-2.5 px-3 border-b border-border-default"
     >
-      <div class="w-0.75 h-4 rounded-xs mr-2 shrink-0 bg-[var(--q-primary)]" />
+      <div class="w-0.75 h-4 rounded-default mr-2 shrink-0 bg-theme-accent" />
       <span
-        class="text-[13px] font-semibold tracking-[0.01em] text-[var(--color-text-primary)]"
+        class="text-compact font-semibold tracking-[0.01em] text-text-heading"
       >{{
         t("alerts.alertSettings.sectionTitle")
       }}</span>
     </div>
 
-    <!-- DESCENDANT step (Rule ③): the AddAlert orchestrator owns the ONE <OForm>
-         and provides FORM_CONTEXT_KEY. The OForm* fields below inject that form
-         and bind by nested `name=` (trigger_condition.*, destinations,
-         creates_incident); the composed schema in AddAlert.schema.ts validates
-         them on save. -->
+    <!-- The AddAlert orchestrator owns the ONE <OForm> and provides
+         FORM_CONTEXT_KEY. The OForm* fields below inject that form and bind by
+         nested `name=` (trigger_condition.*, destinations, creates_incident); the
+         composed schema in AddAlert.schema.ts validates them on save. -->
     <div class="px-3 py-2">
       <div>
         <!-- For Real-Time Alerts -->
@@ -44,8 +41,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- Silence Notification (Cooldown) -->
           <div class="flex justify-start items-start pb-3 mb-4">
             <div
-              class="font-semibold flex items-center"
-              style="width: 190px; height: 28px"
+              class="font-semibold flex items-center w-47.5 h-7 text-text-heading"
             >
               {{ t("alerts.silenceNotification") + " *" }}
               <OIcon name="info" size="sm" class="ml-1 cursor-pointer" />
@@ -54,9 +50,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 side="right"
               />
             </div>
-            <div class="flex flex-col gap-1 mr-2" style="width: fit-content">
+            <div class="flex flex-col gap-1 mr-2 w-fit">
               <div class="flex items-center">
-                <div style="width: 87px">
+                <div class="w-21.75">
                   <OFormInput
                     name="trigger_condition.silence"
                     type="number"
@@ -68,11 +64,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </OFormInput>
                 </div>
                 <div
-                  style="min-width: 90px; height: 2.125rem; font-size: 13px"
-                  :class="
-                    store.state.theme === 'dark' ? 'bg-gray-700' : 'bg-gray-100'
-                  "
-                  class="flex justify-center items-center bg-input-addon-bg text-input-addon-text"
+                  class="flex justify-center items-center bg-input-addon-bg text-input-addon-text min-w-22.5 h-8.5 text-compact"
                 >
                   {{ t("alerts.minutes") }}
                 </div>
@@ -91,8 +83,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- Destinations -->
           <div class="flex items-start pb-4 mb-4">
             <div
-              class="font-semibold flex items-center"
-              style="width: 190px; height: 28px"
+              class="font-semibold flex items-center w-47.5 h-7 text-text-heading"
             >
               {{ t("alerts.destination") + " *" }}
               <OIcon name="info" size="sm" class="ml-1 cursor-pointer" />
@@ -110,7 +101,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :options="formattedDestinations"
                 data-test="alert-destinations-select"
                 multiple
-                class="min-w-[180px] max-w-[300px]"
+                class="min-w-45 max-w-75"
               >
                 <template #empty>{{
                   t("alerts.alertSettings.noDestinationsAvailable")
@@ -143,8 +134,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- Period -->
           <div ref="periodFieldRef" class="flex items-start mr-2 mb-4!">
             <div
-              class="font-semibold flex items-center"
-              style="width: 190px; height: 28px"
+              class="font-semibold flex items-center w-47.5 h-7 text-text-heading"
             >
               {{ t("alerts.period") + " *" }}
               <OIcon name="info" size="sm" class="ml-1 cursor-pointer" />
@@ -153,9 +143,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 side="right"
               />
             </div>
-            <div class="flex flex-col gap-1 mr-2" style="width: fit-content">
+            <div class="flex flex-col gap-1 mr-2 w-fit">
               <div class="flex items-center">
-                <div style="width: 87px">
+                <div class="w-21.75">
                   <OFormInput
                     name="trigger_condition.period"
                     type="number"
@@ -169,11 +159,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </OFormInput>
                 </div>
                 <div
-                  style="min-width: 90px; height: 2.125rem; font-size: 13px"
-                  :class="
-                    store.state.theme === 'dark' ? 'bg-gray-700' : 'bg-gray-100'
-                  "
-                  class="flex justify-center items-center bg-input-addon-bg text-input-addon-text"
+                  class="flex justify-center items-center bg-input-addon-bg text-input-addon-text min-w-22.5 h-8.5 text-compact"
                 >
                   {{ t("alerts.minutes") }}
                 </div>
@@ -192,8 +178,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- Silence Notification (Cooldown) for Scheduled Alerts -->
           <div ref="silenceFieldRef" class="flex items-start mr-2 mb-4!">
             <div
-              class="font-semibold flex items-center"
-              style="width: 190px; height: 28px"
+              class="font-semibold flex items-center w-47.5 h-7 text-text-heading"
             >
               {{ t("alerts.silenceNotification") + " *" }}
               <OIcon name="info" size="sm" class="ml-1 cursor-pointer" />
@@ -202,9 +187,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 side="right"
               />
             </div>
-            <div class="flex flex-col gap-1 mr-2" style="width: fit-content">
+            <div class="flex flex-col gap-1 mr-2 w-fit">
               <div class="flex items-center">
-                <div style="width: 87px">
+                <div class="w-21.75">
                   <OFormInput
                     name="trigger_condition.silence"
                     type="number"
@@ -217,11 +202,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </OFormInput>
                 </div>
                 <div
-                  style="min-width: 90px; height: 2.125rem; font-size: 13px"
-                  :class="
-                    store.state.theme === 'dark' ? 'bg-gray-700' : 'bg-gray-100'
-                  "
-                  class="flex justify-center items-center bg-input-addon-bg text-input-addon-text"
+                  class="flex justify-center items-center bg-input-addon-bg text-input-addon-text min-w-22.5 h-8.5 text-compact"
                 >
                   {{ t("alerts.minutes") }}
                 </div>
@@ -240,8 +221,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- Destinations -->
           <div ref="destinationsFieldRef" class="flex items-start mr-2 mb-4!">
             <div
-              class="font-semibold flex items-center"
-              style="width: 190px; height: 28px"
+              class="font-semibold flex items-center w-47.5 h-7 text-text-heading"
             >
               {{ t("alerts.destination") + " *" }}
               <OIcon name="info" size="sm" class="ml-1 cursor-pointer" />
@@ -259,7 +239,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :options="formattedDestinations"
                 data-test="alert-destinations-select"
                 multiple
-                class="min-w-[180px] max-w-[300px]"
+                class="min-w-45 max-w-75"
               >
                 <template #empty>{{
                   t("alerts.alertSettings.noDestinationsAvailable")
@@ -290,8 +270,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- Creates Incident toggle — shown for all alert types -->
         <div class="flex items-start mb-4!">
           <div
-            class="font-semibold flex items-center"
-            style="width: 190px; height: 28px"
+            class="font-semibold flex items-center w-47.5 h-7 text-text-heading"
           >
             {{ t("alerts.alertSettings.createsIncident") }}
             <OIcon name="info" size="sm" class="ml-1 cursor-pointer" />
@@ -376,7 +355,7 @@ export default defineComponent({
     const router = useRouter();
 
     // Field refs consumed by the parent's AlertFocusManager (registered off the
-    // step ref). Scheduled-only, mirroring the pre-migration template.
+    // step ref). Scheduled-only.
     const periodFieldRef = ref<any>(null);
     const silenceFieldRef = ref<any>(null);
     const destinationsFieldRef = ref<any>(null);
@@ -406,13 +385,13 @@ export default defineComponent({
       }
     };
 
-    // Period typed → the pre-migration cross-step CASCADE (period drives
-    // frequency / cron / timezone / silence). The ancestor AddAlert listens to
-    // @update:trigger (updateTriggerCondition → setFieldValue) and writes the
-    // whole trigger_condition into the ONE form, so the visible silence field
-    // auto-fills like before. The period field value itself is already written
-    // into the form by its own OFormInput binding; it rides on the emit so the
-    // parent write does not revert it.
+    // Period typed → cross-step CASCADE (period drives frequency / cron /
+    // timezone / silence). The ancestor AddAlert listens to @update:trigger
+    // (updateTriggerCondition → setFieldValue) and writes the whole
+    // trigger_condition into the ONE form, so the visible silence field
+    // auto-fills. The period field value itself is already written into the form
+    // by its own OFormInput binding; it rides on the emit so the parent write
+    // does not revert it.
     const handlePeriodChange = (val: unknown) => {
       const periodValue = Number(val);
       // Spread the FRESH form value, not `props.formData.trigger_condition`.
@@ -420,10 +399,7 @@ export default defineComponent({
       // render, and the parent's @update:trigger handler is a WHOLE-OBJECT
       // `setFieldValue("trigger_condition", …)` — so spreading the stale prop
       // round-trips a pre-write snapshot and silently clobbers any field written
-      // earlier in the same tick. Today only `period` is written in this tick and
-      // line below re-sets it, so nothing was lost; reading fresh makes that
-      // structural instead of an invariant someone has to remember to maintain.
-      // (Same bug, same fix as QueryConfig's emitTriggerUpdate.)
+      // earlier in the same tick.
       const currentTrigger =
         form?.getFieldValue?.("trigger_condition") ??
         props.formData.trigger_condition;
diff --git a/web/src/components/alerts/steps/CompareWithPast.spec.ts b/web/src/components/alerts/steps/CompareWithPast.spec.ts
index d1581607c3..9dca8a676c 100644
--- a/web/src/components/alerts/steps/CompareWithPast.spec.ts
+++ b/web/src/components/alerts/steps/CompareWithPast.spec.ts
@@ -1,4 +1,4 @@
-// Copyright 2026 OpenObserve Inc.
+// Copyright 2026 OpenObserve Inc.
 //
 // This program is free software: you can redistribute it and/or modify
 // it under the terms of the GNU Affero General Public License as published by
@@ -83,7 +83,7 @@ describe("CompareWithPast.vue", () => {
     });
 
     it("should render with correct theme class (light mode)", () => {
-      expect(wrapper.classes()).toContain("light-mode");
+      expect(wrapper.classes()).not.toContain("light-mode"); // token-driven theming: no legacy theme root class
     });
 
     it("should render with correct theme class (dark mode)", () => {
@@ -101,7 +101,7 @@ describe("CompareWithPast.vue", () => {
           selectedTab: "sql",
         },
       });
-      expect(wrapper.classes()).toContain("dark-mode");
+      expect(wrapper.classes()).not.toContain("dark-mode"); // token-driven theming: no legacy theme root class
     });
 
     it("should initialize with empty multiTimeRange", () => {
@@ -542,7 +542,7 @@ describe("CompareWithPast.vue", () => {
 
   describe("Theme Switching", () => {
     it("should apply light mode theme", () => {
-      expect(wrapper.classes()).toContain("light-mode");
+      expect(wrapper.classes()).not.toContain("light-mode"); // token-driven theming: no legacy theme root class
     });
 
     it("should apply dark mode theme", () => {
@@ -560,7 +560,7 @@ describe("CompareWithPast.vue", () => {
           selectedTab: "sql",
         },
       });
-      expect(darkWrapper.classes()).toContain("dark-mode");
+      expect(darkWrapper.classes()).not.toContain("dark-mode"); // token-driven theming: no legacy theme root class
     });
   });
 
diff --git a/web/src/components/alerts/steps/CompareWithPast.vue b/web/src/components/alerts/steps/CompareWithPast.vue
index dc878ea9f5..d4e8db0294 100644
--- a/web/src/components/alerts/steps/CompareWithPast.vue
+++ b/web/src/components/alerts/steps/CompareWithPast.vue
@@ -15,50 +15,48 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div ref="multiWindowContainerRef" class="step-compare-with-past w-full h-full flex flex-col mx-auto" :class="store.state.theme === 'dark' ? 'dark-mode' : 'light-mode'">
-    <div class="step-content rounded-lg flex-1 min-h-0 overflow-auto bg-[var(--color-surface-overlay)] border border-[var(--color-border-default)]" :class="store.state.theme === 'dark' ? 'dark-mode-multi-window' : 'light-mode-multi-window'">
-      <div class="section-header flex items-center gap-0 py-2.5 px-3" :class="store.state.theme === 'dark' ? 'border-b border-[#343434]' : 'border-b border-[#eeeeee]'">
-        <div class="section-header-accent w-0.75 h-4 rounded-xs mr-2 shrink-0 bg-[var(--q-primary)]" />
-        <span class="section-header-title text-[13px] font-semibold text-[var(--color-text-primary)]">{{ t('alerts.steps.compareWithPast') }}</span>
+  <div ref="multiWindowContainerRef" class="step-compare-with-past w-full h-full flex flex-col mx-auto">
+    <div class="step-content rounded-default flex-1 min-h-0 overflow-auto bg-surface-overlay border border-border-default">
+      <div class="section-header flex items-center gap-0 py-2.5 px-3 border-b border-border-default">
+        <div class="section-header-accent w-0.75 h-4 rounded-default mr-2 shrink-0 bg-theme-accent" />
+        <span class="section-header-title text-compact font-semibold text-text-heading">{{ t('alerts.steps.compareWithPast') }}</span>
       </div>
       <div class="px-3 pb-2">
       <!-- Alert set for header -->
-      <div class="multi-window-text flex items-center gap-2 py-2 mt-3 font-bold text-sm leading-6 align-middle" :class="store.state.theme === 'dark' ? 'text-white' : 'text-[#3d3d3d]'">
+      <div class="multi-window-text flex items-center gap-2 py-2 mt-3 font-bold text-sm leading-6 align-middle text-text-body">
         <span>{{ t('alerts.compareWithPast.alertSetFor') }}</span>
         <div class="h-px border-line flex-1"></div>
       </div>
 
       <!-- Current Window -->
-      <div class="flex flex-row justify-between items-start min-h-27.5 px-3 py-2 bg-[var(--o2-card-bg)]"
-        :class="store.state.theme === 'dark' ? 'border border-[#343434]' : 'border border-[#e6e6e6]'">
-        <div class="multi-window-text w-auto text-left font-bold text-sm leading-6 align-middle" :class="store.state.theme === 'dark' ? 'text-white' : 'text-[#3d3d3d]'">
+      <div class="flex flex-row justify-between items-start min-h-27.5 px-3 py-2 bg-card-glass-bg border border-border-default">
+        <div class="multi-window-text w-auto text-left font-bold text-sm leading-6 align-middle text-text-body">
           {{ t('alerts.compareWithPast.currentWindow') }}
         </div>
 
         <div class="flex flex-col items-start gap-2">
-          <div class="multi-window-text w-auto text-left font-bold text-sm leading-6 align-middle" :class="store.state.theme === 'dark' ? 'text-white' : 'text-[#3d3d3d]'">
+          <div class="multi-window-text w-auto text-left font-bold text-sm leading-6 align-middle text-text-body">
             {{ t('alerts.compareWithPast.cycle') }}
             <span class="cursor-pointer">
               <OIcon
                 name="info"
                 size="sm"
                 class="ml-1 cursor-pointer"
-                :class="store.state.theme === 'dark' ? 'text-gray-400' : 'text-gray-400'"
+                :class="'text-text-secondary'"
                />
                 <OTooltip :content="t('alerts.compareWithPast.cycleTooltip')" side="right" align="center" max-width="300px" />
             </span>
           </div>
           <div class="flex justify-between items-start gap-4">
-            <div class="w-[300px] font-normal leading-5 text-sm">
+            <div class="w-75 font-normal leading-5 text-sm">
               {{ t('alerts.compareWithPast.runningFor', { period: convertMinutesToDisplayValue(period), frequency: convertMinutesToDisplayValue(frequency) }) }}
             </div>
             <div>
               <span class="inline-block">
-                <OButton
+                <OButton class="min-w-auto opacity-30 pointer-events-none"
                   variant="ghost"
                   size="icon-circle-sm"
                   disable
-                  style="min-width: auto; opacity: 0.3; pointer-events: none;"
                 >
                   <OIcon name="delete-outline" size="sm" />
                 </OButton>
@@ -70,26 +68,23 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </div>
 
       <!-- Comparing with header -->
-      <div v-if="localMultiTimeRange.length > 0" class="multi-window-text flex items-center gap-2 py-2 mt-2 font-bold text-sm leading-6 align-middle" :class="store.state.theme === 'dark' ? 'text-white' : 'text-[#3d3d3d]'">
+      <div v-if="localMultiTimeRange.length > 0" class="multi-window-text flex items-center gap-2 py-2 mt-2 font-bold text-sm leading-6 align-middle text-text-body">
         <span>{{ t('alerts.compareWithPast.comparingWith') }}</span>
         <div class="h-px border-line flex-1"></div>
       </div>
 
       <!-- Reference Windows List -->
-      <!-- Rule ① note: `:key` stays the row UUID (NOT the array index) BECAUSE
-           the only per-row control is CustomDateTimePicker — a genuine non-form
-           widget bound by OBJECT reference (`v-model="picker.offSet"`), not by an
-           index-based OForm* `name=`. The mid-list-delete index bug that forces
-           `:key="index"` on OForm* field-arrays therefore does not apply here.
-           The multi_time_range array is bridged into the ONE form via
+      <!-- `:key` is the row UUID (NOT the array index) because the only per-row
+           control is CustomDateTimePicker — a non-form widget bound by object
+           reference (`v-model="picker.offSet"`), not by an index-based OForm*
+           `name=`. The multi_time_range array is bridged into the form via
            setFieldValue (descendant) / emit (bare) — see commit(). -->
       <div
         v-for="(picker, index) in localMultiTimeRange"
         :key="picker.uuid"
-        class="reference-window-container flex flex-row justify-between items-start min-h-27.5 mt-2 px-3 py-2"
-        :class="store.state.theme === 'dark' ? ['bg-[var(--o2-card-bg)]', 'border', 'border-[#343434]'] : ['bg-[var(--o2-card-bg)]', 'border', 'border-[#e6e6e6]']"
+        class="reference-window-container flex flex-row justify-between items-start min-h-27.5 mt-2 px-3 py-2 bg-card-glass-bg border border-border-default"
       >
-        <div class="multi-window-text w-auto text-left font-bold text-sm leading-6 align-middle" :class="store.state.theme === 'dark' ? 'text-white' : 'text-[#3d3d3d]'">
+        <div class="multi-window-text w-auto text-left font-bold text-sm leading-6 align-middle text-text-body">
           {{ t('alerts.compareWithPast.referenceWindow') }} {{ index + 1 }}
         </div>
 
@@ -103,12 +98,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 name="info"
                 size="sm"
                 class="ml-1 cursor-pointer"
-                :class="store.state.theme === 'dark' ? 'text-gray-400' : 'text-gray-400'"
+                :class="'text-text-secondary'"
                />
                 <OTooltip :content="t('alerts.compareWithPast.timeFrameTooltip')" side="right" align="center" max-width="300px" />
             </span>
           </div>
-          <div class="datetime-picker-wrapper mt-2 border rounded !border-[#d0d0d0] dark:!border-[#4a4a4a]">
+          <div class="datetime-picker-wrapper mt-2 border rounded-default !border-border-default">
             <CustomDateTimePicker
               v-model="picker.offSet"
               :picker="picker"
@@ -121,20 +116,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
         <!-- Cycle Info -->
         <div class="flex flex-col items-start gap-2">
-          <div class="multi-window-text w-auto text-left font-bold text-sm leading-6 align-middle" :class="store.state.theme === 'dark' ? 'text-white' : 'text-[#3d3d3d]'">
+          <div class="multi-window-text w-auto text-left font-bold text-sm leading-6 align-middle text-text-body">
             {{ t('alerts.compareWithPast.cycle') }}
             <span class="cursor-pointer">
               <OIcon
                 name="info"
                 size="sm"
                 class="ml-1 cursor-pointer"
-                :class="store.state.theme === 'dark' ? 'text-gray-400' : 'text-gray-400'"
+                :class="'text-text-secondary'"
                />
                 <OTooltip :content="t('alerts.compareWithPast.cycleTooltip')" side="right" align="center" max-width="300px" />
             </span>
           </div>
           <div class="flex justify-between items-start gap-4">
-            <div class="w-[300px] text-sm font-normal">
+            <div class="w-75 text-sm font-normal">
               {{ t('alerts.compareWithPast.comparingText', { offset: getDisplayValue(picker.offSet) }) }}
             </div>
             <div>
@@ -238,14 +233,13 @@ export default defineComponent({
     const { t } = useI18n();
     const store = useStore();
 
-    // ── inject-or-own (Rule ③) ─────────────────────────────────────────────
-    // CompareWithPast has NO OForm* fields — its only per-row control is the
-    // CustomDateTimePicker, a genuine NON-form widget (a relative/absolute
-    // date-time dropdown, NOT a plain input). Per Rule ② it stays BARE and its
-    // value is BRIDGED into the form. When a parent OForm exists (DESCENDANT
-    // mode) we write the multi_time_range array straight into that ONE form via
-    // setFieldValue; otherwise we keep the pre-migration emit (bare) so the
-    // parent's @update:multiTimeRange→setF bridge stays the write path.
+    // CompareWithPast has no OForm* fields — its only per-row control is the
+    // CustomDateTimePicker, a non-form widget (a relative/absolute date-time
+    // dropdown, not a plain input). It stays bare and its value is bridged into
+    // the form: when a parent OForm exists (descendant mode) we write the
+    // multi_time_range array straight into that form via setFieldValue;
+    // otherwise we emit (bare) so the parent's @update:multiTimeRange→setF
+    // bridge stays the write path.
     const injectedForm = inject(FORM_CONTEXT_KEY, null);
     const hasParentForm = !!injectedForm;
 
@@ -338,11 +332,9 @@ export default defineComponent({
       return value;
     };
 
-    // Counted nouns → real vue-i18n plural forms ("{n} Minute | {n} Minutes"),
-    // called as t(key, n). This replaces the hand-rolled `+ 's'` English
-    // pluralization; output is byte-identical for every n the UI can produce
-    // (vue-i18n picks the singular form only for n === 1, matching the old
-    // `n !== 1 ? 's' : ''`, including n === 0 → "0 Minutes").
+    // Counted nouns → vue-i18n plural forms ("{n} Minute | {n} Minutes"),
+    // called as t(key, n). vue-i18n picks the singular form only for n === 1
+    // (n === 0 → "0 Minutes").
     const convertMinutesToDisplayValue = (minutes: number) => {
       if (minutes < 60) {
         return t("alerts.compareWithPast.minuteCount", minutes);
diff --git a/web/src/components/alerts/steps/Deduplication.spec.ts b/web/src/components/alerts/steps/Deduplication.spec.ts
index 1bb7e2ddc6..5c604a91df 100644
--- a/web/src/components/alerts/steps/Deduplication.spec.ts
+++ b/web/src/components/alerts/steps/Deduplication.spec.ts
@@ -1,4 +1,4 @@
-// Copyright 2026 OpenObserve Inc.
+// Copyright 2026 OpenObserve Inc.
 //
 // This program is free software: you can redistribute it and/or modify
 // it under the terms of the GNU Affero General Public License as published by
diff --git a/web/src/components/alerts/steps/Deduplication.vue b/web/src/components/alerts/steps/Deduplication.vue
index da6b0627a2..344e8e7aee 100644
--- a/web/src/components/alerts/steps/Deduplication.vue
+++ b/web/src/components/alerts/steps/Deduplication.vue
@@ -17,7 +17,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div
     class="step-deduplication w-full h-full overflow-auto mx-auto"
-    :class="store.state.theme === 'dark' ? 'dark-mode' : 'light-mode'"
   >
     <!-- DESCENDANT step (Rule ③): the AddAlert orchestrator owns the ONE <OForm>
          and provides FORM_CONTEXT_KEY. The fields below bind by nested `name=`
@@ -26,19 +25,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
          back into it (payload parity). -->
     <div>
     <div
-      class="step-content rounded-lg min-h-full bg-[var(--color-surface-overlay)] border border-[var(--color-border-default)]"
+      class="step-content rounded-default min-h-full bg-surface-overlay border border-border-default"
     >
       <div
-        class="section-header flex items-center gap-0 py-2.5 px-3"
-        :class="
-          store.state.theme === 'dark'
-            ? 'border-b border-[#343434]'
-            : 'border-b border-[#eeeeee]'
-        "
+        class="section-header flex items-center gap-0 py-2.5 px-3 border-b border-border-default"
       >
-        <div class="section-header-accent w-0.75 h-4 rounded-sm mr-2 shrink-0 bg-[var(--q-primary)]" />
+        <div class="section-header-accent w-0.75 h-4 rounded-default mr-2 shrink-0 bg-theme-accent" />
         <span
-          class="section-header-title text-[13px] font-semibold text-[var(--color-text-primary)]"
+          class="section-header-title text-compact font-semibold text-text-heading"
         >{{
           t("alerts.steps.deduplication")
         }}</span>
@@ -56,12 +50,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </OIcon>
           </div>
           <div
-            class="text-sm mb-2"
-            :class="
-              store.state.theme === 'dark'
-                ? 'text-gray-400'
-                : 'text-gray-600'
-            "
+            class="text-sm mb-2 text-text-secondary"
           >
             {{ t("alerts.deduplication.fingerprintFieldsHint") }}
           </div>
@@ -72,7 +61,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               multiple
               creatable
               data-test="alert-dedup-fingerprint-fields"
-              class="max-w-[600px] min-w-[300px]"
+              class="max-w-150 min-w-75"
               :helpText="t('alerts.deduplication.fingerprintFieldsHelp')"
               @update:model-value="onFingerprintChange"
               @create="addFingerprintField"
@@ -97,17 +86,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </OIcon>
           </div>
           <div
-            class="text-sm mb-2"
-            :class="
-              store.state.theme === 'dark'
-                ? 'text-gray-400'
-                : 'text-gray-600'
-            "
+            class="text-sm mb-2 text-text-secondary"
           >
             {{ t("alerts.deduplication.timeWindowHint") }}
           </div>
           <div class="flex items-center">
-            <div class="w-[210px] ml-0">
+            <div class="w-52.5 ml-0">
               <OFormInput
                 name="deduplication.time_window_minutes"
                 type="number"
@@ -124,8 +108,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 height: 28px;
                 font-weight: normal;
               "
-              :class="store.state.theme === 'dark' ? 'bg-gray-700' : 'bg-gray-100'"
-              class="flex justify-center items-center"
+              class="flex justify-center items-center bg-surface-subtle"
             >
               {{ t("alerts.minutes") }}
             </div>
diff --git a/web/src/components/alerts/steps/QueryConfig.schema.ts b/web/src/components/alerts/steps/QueryConfig.schema.ts
index 8fb04d15e4..984dc22f94 100644
--- a/web/src/components/alerts/steps/QueryConfig.schema.ts
+++ b/web/src/components/alerts/steps/QueryConfig.schema.ts
@@ -2,17 +2,7 @@
 //
 // Schema pieces for QueryConfig.vue.
 //
-// ⚠️ SCOPE NOTE (conditions-tree phase): this file currently exports ONLY the
-// alert-conditions-tree pieces that back FilterGroup.vue / FilterCondition.vue
-// form mode (alerts-migration.md §A). The FULL QueryConfig form schema — the
-// mode-discriminated scalars (threshold / operator / period …), `group_by[]`,
-// the promql_condition restores, aggregation, etc. — will be ADDED to this file
-// by a later phase (alerts-migration.md §C), which also wires
-// `name-prefix="query_condition.conditions"` onto QueryConfig's two
-// <FilterGroup> usages and calls `refineConditionsTree` from BOTH the
-// QueryConfig and AddAlert superRefines under `query.type === 'custom'`.
-//
-// ── The live tree shape (read from FilterGroup.vue / FilterCondition.vue) ──
+// ── The tree shape (from FilterGroup.vue / FilterCondition.vue) ──
 // The alert-conditions tree saved at `query_condition.conditions` is a single
 // ROOT GROUP node whose `conditions[]` mixes two node kinds:
 //   • condition leaf: { filterType: "condition", column, operator, value,
@@ -23,26 +13,23 @@
 // (`items[]` + `groupId`); form mode renders only V2 `conditions[]` children,
 // and the walker below mirrors that exactly.
 //
-// Validation TIMING is owned by OForm (submit-then-change via revalidateLogic);
-// this file only describes WHAT is valid. Requiredness is enforced by the
-// `refineConditionsTree` walker — NOT by the structural node schemas — so the
-// issue paths land on the exact nested field the OForm* wrapper is bound to
-// (e.g. ["tree", "conditions", 1, "conditions", 0, "column"] →
-// `tree.conditions[1].conditions[0].column`).
+// Validation timing is owned by OForm; this file only describes WHAT is valid.
+// Requiredness is enforced by the `refineConditionsTree` walker — NOT by the
+// structural node schemas — so the issue paths land on the exact nested field
+// the OForm* wrapper is bound to (e.g. ["tree", "conditions", 1, "conditions",
+// 0, "column"] → `tree.conditions[1].conditions[0].column`).
 
 import { z } from "zod";
 
 /** i18n translator injected by the component: `(key, namedParams?) => string`.
  *  Every user-facing validation message resolves through this against the
- *  `alerts.validation.*` locale keys (parity: the English values are byte-for-byte
- *  the pre-migration strings). */
+ *  `alerts.validation.*` locale keys. */
 export type Translator = (key: string, named?: Record<string, unknown>) => string;
 
 // ── Structural node schemas (deliberately loose) ────────────────────────────
 // These describe SHAPE only. All per-field requiredness lives in
 // `refineConditionsTree` so rules stay path-addressed and zero-safe; keeping
-// the node schemas permissive guarantees no accidental rule-tightening
-// (Rule ④) and that an empty/absent tree parses clean.
+// the node schemas permissive guarantees an empty/absent tree parses clean.
 
 /** One condition leaf (a FilterCondition row). */
 export const conditionNodeSchema = z.looseObject({
@@ -80,8 +67,7 @@ export function isConditionGroupNode(item: unknown): boolean {
   }
   // V1 compatibility (legacy `items[]` + groupId) — recognised as a group so
   // it is never mis-validated as a condition leaf. It carries no V2
-  // `conditions[]` rows, so the walker recurses into it and finds nothing —
-  // exactly what FilterGroup's form mode renders for it.
+  // `conditions[]` rows, so the walker recurses into it and finds nothing.
   if (node && Array.isArray(node.items) && node.groupId) {
     return true;
   }
@@ -96,15 +82,15 @@ export function isConditionGroupNode(item: unknown): boolean {
  * `["query_condition", "conditions"]` — or `["tree"]` in specs).
  *
  * Per condition leaf:
- *   • `column`   — truthy-required (pre-migration blur rule: `!column`)
- *   • `operator` — truthy-required (pre-migration blur rule: `!operator`)
+ *   • `column`   — truthy-required
+ *   • `operator` — truthy-required
  *   • `value`    — required but ZERO-SAFE: fails ONLY on undefined/null/""
  *     (numeric 0 PASSES — never `.min(1)` on a number)
  * Message is the caller-supplied `requiredMessage` (i18n
- * `alerts.validation.fieldRequired` → "Field is required!", the pre-migration hint).
+ * `alerts.validation.fieldRequired` → "Field is required!").
  *
  * An EMPTY tree (no root / no conditions / empty array) adds NO issues —
- * alerts save with zero conditions today and must keep doing so.
+ * alerts save with zero conditions today.
  */
 export function refineConditionsTree(
   root: unknown,
@@ -166,21 +152,18 @@ export const makeConditionsTreeSchema = (t: Translator) =>
 export type ConditionsTree = z.infer<typeof conditionGroupNodeSchema>;
 
 // ════════════════════════════════════════════════════════════════════════════
-//  FULL QueryConfig form schema (alerts-migration.md §C — QueryConfig scalars,
-//  group_by[], PromQL §4 restores, and the AlertSettings CROSS-STEP checks
-//  REHOMED here). Everything above (the conditions-tree pieces) is unchanged and
-//  still exported for FilterGroup/FilterCondition + AddAlert.
+//  FULL QueryConfig form schema — QueryConfig scalars, group_by[], PromQL
+//  conditions, aggregation, and the AlertSettings cross-step checks.
 //
 //  DESIGN — a SINGLE schema with a `_meta` discriminator object. QueryConfig's
 //  mode (query tab, event-based vs metrics, realtime vs scheduled, the selected
 //  function, the frequency unit, whether group-by / conditions exist,
 //  aggregation on/off) is NOT itself form data — those are bare mode-selectors
 //  (tabs, function dropdown, …). They are BRIDGED into the form as `_meta.*` via
-//  the sanctioned `watch → setFieldValue` for a non-input discriminator, and the
-//  superRefine reads `_meta` to fire each rule ONLY in the branch where the
-//  pre-migration form enforced it. This lets ONE static schema cover every mode
-//  (OForm reads `:schema` once at creation — a per-mode schema swap would not
-//  re-wire the validators).
+//  `watch → setFieldValue`, and the superRefine reads `_meta` to fire each rule
+//  ONLY in its branch. This lets ONE static schema cover every mode (OForm reads
+//  `:schema` once at creation — a per-mode schema swap would not re-wire the
+//  validators).
 //
 //  ⚠️ Numbers come out of OFormInput as STRINGS. Requiredness / min checks are
 //  done in the superRefine on the RAW value so we control empty-vs-0 exactly
@@ -189,7 +172,7 @@ export type ConditionsTree = z.infer<typeof conditionGroupNodeSchema>;
 // ════════════════════════════════════════════════════════════════════════════
 
 // ── Validation messages are i18n-driven (`alerts.validation.*` locale keys),
-//    resolved via the injected `t` inside `makeQueryConfigSchema`. Parity map:
+//    resolved via the injected `t` inside `makeQueryConfigSchema`:
 //      threshold ≥ 1   → alerts.validation.thresholdPositive
 //      frequency ≥ 1   → alerts.validation.frequencyPositive
 //      org min-freq    → alerts.validation.minimumFrequency ({minutes} = the
@@ -198,9 +181,7 @@ export type ConditionsTree = z.infer<typeof conditionGroupNodeSchema>;
 //      promql operator → alerts.validation.fieldRequired
 //      promql value    → alerts.validation.fieldRequired
 //      blank group-by  → alerts.validation.fieldRequired (per offending row;
-//                        an EMPTY group_by is VALID — see the parity note in
-//                        the custom+measure branch below)
-//    (English values are byte-for-byte the pre-migration strings.)
+//                        an EMPTY group_by is VALID)
 
 /** The mode discriminators bridged into the form (NOT part of the alert
  *  payload — they gate the superRefine only). */
@@ -240,8 +221,7 @@ const isBelowOne = (v: unknown): boolean => {
  * The full QueryConfig form schema. `looseObject` throughout so the many bridged
  * runtime keys (aggregation.function, conditions ids, values[], etc.) pass
  * through untouched — requiredness lives entirely in the superRefine, keyed on
- * `_meta`, so nothing tightens by accident (Rule ④) and an untouched form parses
- * clean.
+ * `_meta`, so an untouched form parses clean.
  */
 export const makeQueryConfigSchema = (t: Translator) =>
   z
@@ -280,7 +260,7 @@ export const makeQueryConfigSchema = (t: Translator) =>
       })
       .optional(),
     /** Logs/traces group-by lives on its own field (metrics group-by lives on
-     *  query_condition.aggregation.group_by). Both are Rule-① field arrays. */
+     *  query_condition.aggregation.group_by). */
     logGroupBy: z.array(z.string()).optional(),
     /** DISPLAY-ONLY form state — never sent to the backend (stripped by
      *  getAlertPayload alongside `_meta`/`logGroupBy`). `checkEvery` holds the
@@ -318,8 +298,7 @@ export const makeQueryConfigSchema = (t: Translator) =>
     const qc = (val.query_condition ?? {}) as Record<string, any>;
 
     // ── Conditions tree (custom mode, realtime + scheduled) ──────────────────
-    // Blocks save on partially-filled rows — a §4-style RESTORE (pre-migration
-    // the "Field is required!" hints were blur-only and never gated save).
+    // Blocks save on partially-filled rows.
     if (isCustom && qc.conditions) {
       refineConditionsTree(
         qc.conditions,
@@ -330,10 +309,10 @@ export const makeQueryConfigSchema = (t: Translator) =>
     }
 
     // Everything below is SCHEDULED-only (realtime alerts show filters only —
-    // no threshold sentence / "Check every" — so none of these rules applied).
+    // no threshold sentence / "Check every").
     if (!scheduled) return;
 
-    // ── Threshold ≥ 1 (REHOMED) ──────────────────────────────────────────────
+    // ── Threshold ≥ 1 ────────────────────────────────────────────────────────
     // Shown+required in every scheduled branch: custom (count OR the measure
     // "having groups" — forced to 1 when no group-by, so ≥1 always holds), SQL
     // ("no. of events"), PromQL ("having series"). One rule covers them all.
@@ -345,13 +324,12 @@ export const makeQueryConfigSchema = (t: Translator) =>
       });
     }
 
-    // ── Frequency ≥ 1 (REHOMED + QueryConfig's own checkEveryFrequencyError) ──
+    // ── Frequency ≥ 1 ────────────────────────────────────────────────────────
     // Only when NOT in cron mode (cron is validated separately — the component
     // renders `cronError`, useAlertForm.runImperativeQueryChecks gates save).
     // Keyed on the DISPLAY value (`_ui.checkEvery`) because that is the path the
     // visible "Check every" input binds, so the message renders inline. Display
-    // ≥ 1 ⇔ stored ≥ 1 in both modes (hours multiplies by 60), so this is the
-    // same rule pre-migration applied to its local display ref.
+    // ≥ 1 ⇔ stored ≥ 1 in both modes (hours multiplies by 60).
     const ui = (val._ui ?? {}) as Record<string, unknown>;
     const display = ui.checkEvery;
     if (meta.frequencyMode !== "cron") {
@@ -362,11 +340,10 @@ export const makeQueryConfigSchema = (t: Translator) =>
           message: t("alerts.validation.frequencyPositive"),
         });
       } else {
-        // ── Org min-frequency floor (R5 RESTORE) ────────────────────────────
-        // Pre-migration: AlertSettings.validateFrequency compared the STORED
-        // minutes against ceil(min_auto_refresh_interval / 60) and blocked save.
-        // Compare in MINUTES: convert the display value the same way
-        // onCheckEveryChange does. Skipped entirely when the org sets no floor.
+        // ── Org min-frequency floor ─────────────────────────────────────────
+        // Compare the frequency in MINUTES against ceil(min_auto_refresh_interval
+        // / 60): convert the display value the same way onCheckEveryChange does.
+        // Skipped entirely when the org sets no floor.
         const floorSecs = Number(meta.minAutoRefreshInterval) || 0;
         if (floorSecs > 0) {
           const freqMins =
@@ -387,7 +364,7 @@ export const makeQueryConfigSchema = (t: Translator) =>
       }
     }
 
-    // ── PromQL branch (§4 RESTORES — dead bindings pre-migration) ─────────────
+    // ── PromQL branch ────────────────────────────────────────────────────────
     if (isPromql) {
       const pc = (qc.promql_condition ?? {}) as Record<string, unknown>;
       if (!pc.operator) {
@@ -407,38 +384,25 @@ export const makeQueryConfigSchema = (t: Translator) =>
       }
     }
 
-    // ── Custom + measure aggregation (REHOMED aggregation checks + QueryConfig
-    // conditionValueError) ────────────────────────────────────────────────────
+    // ── Custom + measure aggregation ─────────────────────────────────────────
     if (isCustom && isMeasure) {
       const having = (qc.aggregation?.having ?? {}) as Record<string, unknown>;
 
-      // ── Measure column — required (RESTORE of main's red highlight) ─────────
-      // Pre-migration BOTH halves of this rule lived in QueryConfig.validate():
-      // it set a local `columnSelectError` ref (which fed `:error` on a bare
-      // <OSelect> and drew the red border) AND toasted. The migration re-homed
-      // only the toast, into useAlertForm.runImperativeQueryChecks, and dropped
-      // the ref — so save was still blocked but the field stayed grey.
-      //
-      // It has to live HERE, not in an imperative gate: the two selects are now
+      // ── Measure column — required ───────────────────────────────────────────
+      // Must live in form state, not an imperative gate: the two selects are
       // name-bound <OFormSelect>, which derives `:error` from
-      // `field.state.meta.errors` and OMITS `error` from its props (a
-      // parent-passed `:error` is clobbered by the field-driven binding). Form
-      // state is the ONLY thing that can paint the field.
+      // `field.state.meta.errors` and OMITS a parent-passed `:error`. Form state
+      // is the ONLY thing that can paint the field.
       //
       // ONE path covers BOTH branches — the logs select and the metrics select
       // bind the same `query_condition.aggregation.having.column` name.
       //
-      // The predicate mirrors the imperative gate verbatim (aggregation ON + an
-      // aggregation object carrying a non-count function) so nothing tightens
-      // (Rule ④). `aggregation.function` is re-checked against `total_events`
-      // even though `isMeasure` already read `_meta.selectedFunction`: they are
-      // two views of the same choice, and requiring both means a stale bridge
-      // can only ever under-fire, never block a save that used to pass.
+      // Predicate: aggregation ON + an aggregation object carrying a non-count
+      // function.
       const aggregation = qc.aggregation;
       const fn = aggregation?.function;
       if (meta.aggregationEnabled && aggregation && fn && fn !== "total_events") {
-        // Trim-aware (the old check was `!col || col.trim() === ''`) — a
-        // whitespace-only column is not a column.
+        // Trim-aware — a whitespace-only column is not a column.
         const column = having.column;
         if (column == null || String(column).trim() === "") {
           ctx.addIssue({
diff --git a/web/src/components/alerts/steps/QueryConfig.vue b/web/src/components/alerts/steps/QueryConfig.vue
index 87d73a6320..1c805fcff4 100644
--- a/web/src/components/alerts/steps/QueryConfig.vue
+++ b/web/src/components/alerts/steps/QueryConfig.vue
@@ -15,22 +15,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="step-query-config w-full min-w-0 h-full overflow-auto mx-auto" :class="store.state.theme === 'dark' ? 'dark-mode' : 'light-mode'">
-    <div class="step-content rounded-lg min-h-full w-full min-w-0 overflow-hidden box-border bg-[var(--color-surface-overlay)] border border-[var(--color-border-default)]">
+  <div class="step-query-config w-full min-w-0 h-full overflow-auto mx-auto">
+    <div class="step-content rounded-default min-h-full w-full min-w-0 overflow-hidden box-border bg-surface-overlay border border-border-default">
       <!-- Section header -->
-      <div class="section-header flex items-center gap-0 py-2.5 px-3"
-        :class="store.state.theme === 'dark'
-          ? 'border-b border-[#343434]'
-          : 'border-b border-[#eeeeee]'">
-        <div class="section-header-accent w-0.75 h-4 rounded-sm mr-2 shrink-0 bg-[var(--q-primary)]" />
-        <span class="section-header-title text-[13px] font-semibold tracking-[0.01em] text-[var(--color-text-primary)]">{{ t('alerts.queryConfig.sectionTitle') }}</span>
+      <div class="section-header flex items-center gap-0 py-2.5 px-3 border-b border-border-default">
+        <div class="section-header-accent w-0.75 h-4 rounded-default mr-2 shrink-0 bg-theme-accent" />
+        <span class="section-header-title text-compact font-semibold tracking-[0.01em] text-text-heading">{{ t('alerts.queryConfig.sectionTitle') }}</span>
       </div>
-      <!-- DESCENDANT step (Rule ③): the AddAlert orchestrator owns the ONE
-           <OForm> and provides FORM_CONTEXT_KEY. The OForm* fields below bind by
-           nested `name=` (trigger_condition.*, query_condition.*, logGroupBy[])
-           into that form; the composed schema in AddAlert.schema.ts (which
-           reuses makeQueryConfigSchema) validates them on save. Non-form widgets
-           (tabs / editors / VRL / FilterGroup) live inside and are bridged. -->
+      <!-- Descendant step: the AddAlert orchestrator owns the ONE <OForm> and
+           provides FORM_CONTEXT_KEY. The OForm* fields below bind by nested
+           `name=` (trigger_condition.*, query_condition.*, logGroupBy[]) into that
+           form; the composed schema in AddAlert.schema.ts validates them on save.
+           Non-form widgets (tabs / editors / VRL / FilterGroup) are bridged. -->
       <div class="px-3 py-2 min-w-0 w-full box-border">
       <!-- Query Mode Tabs (hidden for real-time alerts) -->
       <div v-if="shouldShowTabs" class="mb-2 flex items-center justify-between">
@@ -77,10 +73,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <!-- LOGS/TRACES -->
             <template v-if="isEventBased">
               <!-- Alert if row -->
-              <div class="flex items-start gap-3 py-2 px-3 rounded-md text-[13px]" data-test="alert-if-row-logs">
-                <span class="condition-label font-bold text-[13px] whitespace-nowrap min-w-[90px] shrink-0 leading-8.5">{{ t('alerts.threshold') }}*</span>
+              <div class="flex items-start gap-3 py-2 px-3 rounded-default text-compact" data-test="alert-if-row-logs">
+                <span class="font-bold text-text-heading text-compact whitespace-nowrap min-w-22.5 shrink-0 leading-8.5">{{ t('alerts.threshold') }}*</span>
                 <div class="flex flex-nowrap items-start gap-2">
-                  <div class="min-w-[130px] max-w-[180px]">
+                  <div class="min-w-32.5 max-w-45">
                     <OSelect
                       v-model="selectedFunction"
                       :options="logFunctionOptions"
@@ -92,13 +88,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </div>
                   <!-- "of [field]" shown for measure modes -->
                   <template v-if="selectedFunction !== 'total_events'">
-                    <span class="condition-text font-semibold text-[13px] whitespace-nowrap leading-8.5">{{ t('alerts.conditionOf') }}</span>
+                    <span class="font-semibold text-text-secondary text-compact whitespace-nowrap leading-8.5">{{ t('alerts.conditionOf') }}</span>
                     <OFormSelect
                       name="query_condition.aggregation.having.column"
                       :options="numericColumns"
                       searchable
                       :placeholder="t('alerts.placeholders.selectColumn')"
-                      :class="['min-w-[140px] max-w-[200px]']"
+                      :class="['min-w-35 max-w-50']"
                       @update:model-value="onLogMeasureColumnChange($event)"
                     />
                   </template>
@@ -108,7 +104,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <OFormSelect
                       name="trigger_condition.operator"
                       :options="numericOperators"
-                      class="min-w-[70px] max-w-[120px]"
+                      class="min-w-17.5 max-w-30"
                       data-test="alert-trigger-operator-select"
                       :searchable="false"
                       @update:model-value="onTriggerOperatorChange"
@@ -134,17 +130,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         {{ thresholdError }}
                       </div>
                     </div>
-                    <span v-if="streamName" class="condition-text font-semibold text-[13px] whitespace-nowrap leading-8.5">{{ t('alerts.matchingTypeFound', { type: streamType === 'traces' ? 'traces' : 'logs' }) }}</span>
+                    <span v-if="streamName" class="font-semibold text-text-secondary text-compact whitespace-nowrap leading-8.5">{{ t('alerts.matchingTypeFound', { type: streamType === 'traces' ? 'traces' : 'logs' }) }}</span>
                   </template>
 
                   <!-- MEASURE mode -->
                   <template v-else>
-                    <span class="condition-text font-semibold text-[13px] whitespace-nowrap leading-8.5">{{ t('alerts.conditionIs') }}</span>
+                    <span class="font-semibold text-text-secondary text-compact whitespace-nowrap leading-8.5">{{ t('alerts.conditionIs') }}</span>
                     <OFormSelect
                       name="query_condition.aggregation.having.operator"
                       :options="numericOperators"
                       :searchable="false"
-                      class="min-w-[70px] max-w-[120px]"
+                      class="min-w-17.5 max-w-30"
                       data-test="alert-condition-operator-select"
                       @update:model-value="onConditionOperatorChange"
                     />
@@ -172,8 +168,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </div>
 
               <!-- group by row (hidden for count mode) -->
-              <div v-if="selectedFunction !== 'total_events'" class="flex items-center gap-3 py-2 px-3 rounded-md text-[13px]" data-test="alert-group-by-row">
-                <span class="condition-label font-bold text-[13px] whitespace-nowrap min-w-[90px] shrink-0">
+              <div v-if="selectedFunction !== 'total_events'" class="flex items-center gap-3 py-2 px-3 rounded-default text-compact" data-test="alert-group-by-row">
+                <span class="font-bold text-text-heading text-compact whitespace-nowrap min-w-22.5 shrink-0">
                   {{ t('alerts.groupBy') }}
                   <OTooltip :content="t('alerts.queryConfig.groupByTooltip')" :delay="300" side="top" />
                 </span>
@@ -188,14 +184,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         :options="columns"
                         searchable
                         :placeholder="t('alerts.placeholders.selectColumn')"
-                        style="min-width: 120px; max-width: 180px;"
                         :data-test="`alert-group-by-select-${index}`"
                         @update:model-value="onLogGroupByChange"
                       />
                       <OButton
                         variant="ghost"
                         size="icon-circle-sm"
-                        class="text-gray-400 hover:text-red-500"
+                        class="text-icon-color hover:text-status-error-text"
                         @click="deleteLogGroupByColumn(index)"
                       >
                         <OIcon name="close" size="sm" />
@@ -215,8 +210,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </div>
 
               <!-- no. of groups row — visible only when group-by fields are added -->
-              <div v-if="selectedFunction !== 'total_events' && hasLogGroupByFields" class="flex items-start gap-3 py-2 px-3 rounded-md text-[13px]" data-test="alert-having-groups-row">
-                <span class="condition-label font-bold text-[13px] whitespace-nowrap min-w-[90px] shrink-0 leading-8.5">
+              <div v-if="selectedFunction !== 'total_events' && hasLogGroupByFields" class="flex items-start gap-3 py-2 px-3 rounded-default text-compact" data-test="alert-having-groups-row">
+                <span class="font-bold text-text-heading text-compact whitespace-nowrap min-w-22.5 shrink-0 leading-8.5">
                   {{ t('alerts.queryConfig.havingGroups') }}
                   <OTooltip :content="t('alerts.queryConfig.havingGroupsTooltip')" :delay="300" side="top" />
                 </span>
@@ -225,7 +220,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     name="trigger_condition.operator"
                     :options="numericOperators"
                     :searchable="false"
-                    class="min-w-[70px] max-w-[120px]"
+                    class="min-w-17.5 max-w-30"
                     @update:model-value="onTriggerOperatorChange"
                   />
                   <!-- Message hangs under the threshold field it describes. -->
@@ -255,10 +250,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <!-- METRICS -->
             <template v-else>
               <!-- Alert if row -->
-              <div class="flex items-start gap-3 py-2 px-3 rounded-md text-[13px]">
-                <span class="condition-label font-bold text-[13px] whitespace-nowrap min-w-[90px] shrink-0 leading-8.5">{{ t('alerts.threshold') }}*</span>
+              <div class="flex items-start gap-3 py-2 px-3 rounded-default text-compact">
+                <span class="font-bold text-text-heading text-compact whitespace-nowrap min-w-22.5 shrink-0 leading-8.5">{{ t('alerts.threshold') }}*</span>
                 <div class="flex flex-nowrap items-start gap-2">
-                  <div class="min-w-[130px] max-w-[180px]">
+                  <div class="min-w-32.5 max-w-45">
                     <OSelect
                       v-model="selectedFunction"
                       :options="logFunctionOptions"
@@ -271,8 +266,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
                   <!-- "of [field]" hidden for count mode -->
                   <template v-if="selectedFunction !== 'total_events'">
-                    <span class="condition-text font-semibold text-[13px] whitespace-nowrap leading-8.5">{{ t('alerts.conditionOf') }}</span>
-                    <div style="position: relative; display: inline-flex;">
+                    <span class="font-semibold text-text-secondary text-compact whitespace-nowrap leading-8.5">{{ t('alerts.conditionOf') }}</span>
+                    <div class="relative inline-flex">
                       <OFormSelect
                         name="query_condition.aggregation.having.column"
                         :options="columns"
@@ -281,11 +276,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         :readonly="inputData.aggregation?.having?.column === 'value' && columns.some((c: any) => (typeof c === 'string' ? c : c.value) === 'value')"
                         :disable="inputData.aggregation?.having?.column === 'value' && columns.some((c: any) => (typeof c === 'string' ? c : c.value) === 'value')"
                         @update:model-value="onLogMeasureColumnChange($event)"
-                        style="min-width: 140px; max-width: 200px;"
+                        class="min-w-35 max-w-50"
                       />
                       <OTooltip v-if="inputData.aggregation?.having?.column === 'value' && columns.some((c: any) => (typeof c === 'string' ? c : c.value) === 'value')" :content="t('alerts.metricsValueFieldTooltip')" :delay="300" side="bottom" />
                     </div>
-                    <span class="condition-text font-semibold text-[13px] whitespace-nowrap leading-8.5">{{ t('alerts.conditionIs') }}</span>
+                    <span class="font-semibold text-text-secondary text-compact whitespace-nowrap leading-8.5">{{ t('alerts.conditionIs') }}</span>
                   </template>
 
                   <!-- Count mode for metrics -->
@@ -294,7 +289,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       name="trigger_condition.operator"
                       :options="numericOperators"
                       :searchable="false"
-                      style="min-width: 70px; max-width: 120px;"
                       @update:model-value="onTriggerOperatorChange"
                     />
                     <!-- Message hangs under the threshold field it describes. -->
@@ -315,7 +309,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         {{ thresholdError }}
                       </div>
                     </div>
-                    <span class="condition-text font-semibold text-[13px] whitespace-nowrap leading-8.5">{{ t('alerts.matchingMetricsFound') }}</span>
+                    <span class="font-semibold text-text-secondary text-compact whitespace-nowrap leading-8.5">{{ t('alerts.matchingMetricsFound') }}</span>
                   </template>
 
                   <!-- Measure mode for metrics -->
@@ -324,7 +318,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       name="query_condition.aggregation.having.operator"
                       :options="numericOperators"
                       :searchable="false"
-                      style="min-width: 70px; max-width: 120px;"
                       @update:model-value="onConditionOperatorChange"
                     />
                     <!-- Message hangs under the value field it describes. -->
@@ -351,8 +344,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </div>
 
               <!-- group by row — hidden for count mode -->
-              <div v-if="inputData.aggregation && selectedFunction !== 'total_events'" class="flex items-center gap-3 py-2 px-3 rounded-md text-[13px]">
-                <span class="condition-label font-bold text-[13px] whitespace-nowrap min-w-[90px] shrink-0">
+              <div v-if="inputData.aggregation && selectedFunction !== 'total_events'" class="flex items-center gap-3 py-2 px-3 rounded-default text-compact">
+                <span class="font-bold text-text-heading text-compact whitespace-nowrap min-w-22.5 shrink-0">
                   {{ t('alerts.groupBy') }}
                   <OTooltip :content="t('alerts.queryConfig.groupByTooltip')" :delay="300" side="top" />
                 </span>
@@ -367,13 +360,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         :options="columns"
                         searchable
                         :placeholder="t('alerts.placeholders.selectColumn')"
-                        style="min-width: 120px; max-width: 180px;"
+                        class="min-w-30 max-w-45"
                         @update:model-value="syncMetricGroupByToProps"
                       />
                       <OButton
                         variant="ghost"
                         size="icon-circle-sm"
-                        class="text-gray-400 hover:text-red-500"
+                        class="text-icon-color hover:text-status-error-text"
                         @click="deleteGroupByColumn(index)"
                       >
                         <OIcon name="close" size="sm" />
@@ -392,8 +385,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </div>
 
               <!-- no. of groups row — visible only when group-by fields are added -->
-              <div v-if="selectedFunction !== 'total_events' && hasMetricGroupByFields" class="flex items-start gap-3 py-2 px-3 rounded-md text-[13px]">
-                <span class="condition-label font-bold text-[13px] whitespace-nowrap min-w-[90px] shrink-0 leading-8.5">
+              <div v-if="selectedFunction !== 'total_events' && hasMetricGroupByFields" class="flex items-start gap-3 py-2 px-3 rounded-default text-compact">
+                <span class="font-bold text-text-heading text-compact whitespace-nowrap min-w-22.5 shrink-0 leading-8.5">
                   {{ t('alerts.queryConfig.havingGroups') }}
                   <OTooltip :content="t('alerts.queryConfig.havingGroupsTooltip')" :delay="300" side="top" />
                 </span>
@@ -402,7 +395,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     name="trigger_condition.operator"
                     :options="numericOperators"
                     :searchable="false"
-                    class="min-w-[70px] max-w-[120px]"
+                    class="min-w-17.5 max-w-30"
                     @update:model-value="onTriggerOperatorChange"
                   />
                   <!-- Message hangs under the threshold field it describes. -->
@@ -431,8 +424,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
             <!-- Check every row -->
             <div class="flex items-start
-             gap-3 py-2 px-3 rounded-md text-[13px]">
-              <span class="condition-label font-bold text-[13px] whitespace-nowrap min-w-[90px] shrink-0" style="line-height: 28px;">
+             gap-3 py-2 px-3 rounded-default text-compact">
+              <span class="font-bold text-text-heading text-compact whitespace-nowrap min-w-22.5 shrink-0 leading-7">
                 {{ t('alerts.queryConfig.checkEvery') }} *
                 <OTooltip :content="t('alerts.howOftenCheckTooltip')" :delay="300" side="top" />
               </span>
@@ -443,7 +436,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <OFormInput
                       name="_ui.checkEvery"
                       type="number"
-                      style="min-width: 100px; max-width: 100px;"
+                      class="min-w-25 max-w-25"
                       min="1"
                       @update:model-value="onCheckEveryChange($event)"
                       @blur="restoreDefaultFrequency"
@@ -458,31 +451,30 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <OFormInput
                       name="trigger_condition.cron"
                       :placeholder="t('alerts.queryConfig.cronExpressionPlaceholder')"
-                      style="min-width: 100px; max-width: 100px;"
+                      class="min-w-25 max-w-25"
                       @update:model-value="onCronExpressionChange"
                     />
                   </template>
 
                   <!-- Unit dropdown: minutes / hours / cron -->
-                  <OSelect
+                  <OSelect class="min-w-20 max-w-25"
                     :model-value="frequencyMode"
                     :options="frequencyUnitOptions"
                     labelKey="label"
                     valueKey="value"
                     :searchable="false"
-                    style="min-width: 80px; max-width: 100px;"
                     @update:model-value="onFrequencyUnitChange"
                   />
 
                   <!-- Timezone (only for cron, inline) -->
                   <template v-if="frequencyMode === 'cron'">
-                    <span class="inline-block" style="min-width: 150px; max-width: 150px;">
+                    <span class="inline-block min-w-37.5 max-w-37.5">
                       <OFormSelect
                         name="trigger_condition.timezone"
                         :options="filteredTimezones"
                         searchable
                         :placeholder="t('alerts.queryConfig.timezonePlaceholder')"
-                        style="min-width: 150px; max-width: 150px;"
+                        class="min-w-37.5 max-w-37.5"
                         @update:model-value="onCronTimezoneChange"
                       />
                       <OTooltip
@@ -494,42 +486,42 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     </span>
                   </template>
 
-                  <span class="condition-text font-semibold text-[13px] whitespace-nowrap">{{ t('alerts.queryConfig.onThese') }}</span>
+                  <span class="font-semibold text-text-secondary text-compact whitespace-nowrap">{{ t('alerts.queryConfig.onThese') }}</span>
                   <div
-                    class="flex items-center gap-1 cursor-pointer select-none filters-inline-toggle px-2 py-0.5 rounded-md transition-colors bg-surface-panel hover:bg-primary-50"
+                    class="flex items-center gap-1 cursor-pointer select-none filters-inline-toggle px-2 py-0.5 rounded-default transition-colors bg-surface-panel hover:bg-primary-50"
                     @click="toggleFilters"
                   >
                     <OIcon
                       name="filter-alt"
                       size="xs"
                       :class="filterCount > 0
-                        ? 'text-[var(--q-primary)]'
-                        : (store.state.theme === 'dark' ? 'text-gray-400' : 'text-gray-500')"
+                        ? 'text-theme-accent'
+                        : ('text-text-secondary')"
                     />
                     <span class="text-xs font-semibold"
                           :class="filterCount > 0
-                            ? 'text-[var(--q-primary)]'
-                            : (store.state.theme === 'dark' ? 'text-gray-300' : 'text-gray-600')">
+                            ? 'text-theme-accent'
+                            : ('text-text-body')">
                       {{ t('alerts.queryConfig.filters') }}
                     </span>
                     <span v-if="filterCount > 0"
-                          class="text-[11px] px-1.5 py-0 rounded-full font-bold leading-5"
-                          :class="store.state.theme === 'dark' ? 'bg-blue-800 text-blue-200' : 'bg-blue-100 text-blue-700'">
+                          class="text-2xs px-1.5 py-0 rounded-full font-bold leading-5"
+                          :class="'bg-status-info-bg text-status-info-text'">
                       {{ filterCount }}
                     </span>
                     <OIcon
                       :name="showFilters ? 'expand-more' : 'chevron-right'"
                       size="sm"
-                      :class="store.state.theme === 'dark' ? 'text-gray-400' : 'text-gray-500'"
+                      :class="'text-text-secondary'"
                     />
                     <!-- Review your SQL query hint -->
                     <span v-if="generatedSqlQuery && !showFilters"
-                          class="text-xs italic ml-1 whitespace-nowrap cursor-help underline decoration-dotted underline-offset-[2px]"
-                          :class="store.state.theme === 'dark' ? 'text-gray-500' : 'text-gray-400'">
+                          class="text-xs italic ml-1 whitespace-nowrap cursor-help underline decoration-dotted underline-offset-2"
+                          :class="'text-text-secondary'">
                       {{ t('alerts.queryConfig.viewAlertQuery') }}
                       <OTooltip :delay="200" side="bottom">
                         <template #content>
-                          <pre class="hljs text-xs m-0 whitespace-pre-wrap font-mono p-2 rounded" v-html="highlightedSqlQuery" />
+                          <pre class="hljs text-xs m-0 whitespace-pre-wrap font-mono p-2 rounded-default" v-html="highlightedSqlQuery" />
                         </template>
                       </OTooltip>
                     </span>
@@ -545,11 +537,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 >
                   {{ checkEveryError }}
                 </div>
-                <div v-if="frequencyMode === 'cron' && cronDescription && !cronError" class="text-[11px] ml-0 italic"
-                     :class="store.state.theme === 'dark' ? 'text-gray-400' : 'text-gray-500'">
+                <div v-if="frequencyMode === 'cron' && cronDescription && !cronError" class="text-2xs ml-0 italic"
+                     :class="'text-text-secondary'">
                   {{ cronDescription }}
                 </div>
-                <div v-if="frequencyMode === 'cron' && cronError" class="text-red-500 text-[11px] ml-0">
+                <div v-if="frequencyMode === 'cron' && cronError" class="text-status-error-text text-2xs ml-0">
                   {{ cronError }}
                 </div>
               </div>
@@ -580,40 +572,40 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <div v-else class="mb-1 px-3">
             <div class="flex items-center gap-2 py-1">
               <div
-                class="flex items-center gap-1 cursor-pointer select-none filters-inline-toggle px-2 py-0.5 rounded-md transition-colors bg-surface-panel hover:bg-primary-50"
+                class="flex items-center gap-1 cursor-pointer select-none filters-inline-toggle px-2 py-0.5 rounded-default transition-colors bg-surface-panel hover:bg-primary-50"
                 @click="toggleFilters"
               >
                 <OIcon
                   name="filter-alt"
                   size="xs"
                   :class="filterCount > 0
-                    ? 'text-[var(--q-primary)]'
-                    : (store.state.theme === 'dark' ? 'text-gray-400' : 'text-gray-500')"
+                    ? 'text-theme-accent'
+                    : ('text-text-secondary')"
                 />
                 <span class="text-xs font-semibold"
                       :class="filterCount > 0
-                        ? 'text-[var(--q-primary)]'
-                        : (store.state.theme === 'dark' ? 'text-gray-300' : 'text-gray-600')">
+                        ? 'text-theme-accent'
+                        : ('text-text-body')">
                   {{ t('alerts.queryConfig.filters') }}
                 </span>
                 <span v-if="filterCount > 0"
-                      class="text-[11px] px-1.5 py-0 rounded-full font-bold leading-5"
-                      :class="store.state.theme === 'dark' ? 'bg-blue-800 text-blue-200' : 'bg-blue-100 text-blue-700'">
+                      class="text-2xs px-1.5 py-0 rounded-full font-bold leading-5"
+                      :class="'bg-status-info-bg text-status-info-text'">
                   {{ filterCount }}
                 </span>
                 <OIcon
                   :name="showFilters ? 'expand-more' : 'chevron-right'"
                   size="sm"
-                  :class="store.state.theme === 'dark' ? 'text-gray-400' : 'text-gray-500'"
+                  :class="'text-text-secondary'"
                 />
                 <!-- Review your SQL query hint -->
                 <span v-if="generatedSqlQuery && !showFilters"
-                      class="text-xs italic ml-1 whitespace-nowrap cursor-help underline decoration-dotted underline-offset-[2px]"
-                      :class="store.state.theme === 'dark' ? 'text-gray-500' : 'text-gray-400'">
+                      class="text-xs italic ml-1 whitespace-nowrap cursor-help underline decoration-dotted underline-offset-2"
+                      :class="'text-text-secondary'">
                   {{ t('alerts.queryConfig.viewAlertQuery') }}
                   <OTooltip :delay="200" side="bottom">
                     <template #content>
-                      <pre class="hljs text-xs m-0 whitespace-pre-wrap font-mono p-2 rounded" v-html="highlightedSqlQuery" />
+                      <pre class="hljs text-xs m-0 whitespace-pre-wrap font-mono p-2 rounded-default" v-html="highlightedSqlQuery" />
                     </template>
                   </OTooltip>
                 </span>
@@ -645,16 +637,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <div class="w-full flex flex-col gap-2 overflow-hidden">
 
           <!-- Editor area — position:relative shell owns the size; inner absolute never leaks -->
-          <div style="position: relative; height: 320px;">
-            <div style="position: absolute; inset: 0; display: flex; overflow: hidden;">
+          <div class="relative h-80">
+            <div class="absolute inset-0 flex overflow-hidden">
 
               <!-- SQL/PromQL pane — with its own header -->
-              <div style="display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden;"
-                :style="{ width: showVrl && localTab === 'sql' ? '50%' : '100%' }">
+              <div class="flex flex-col shrink-0 overflow-hidden"
+                :class="showVrl && localTab === 'sql' ? 'w-1/2' : 'w-full'">
                 <div class="flex items-center justify-between shrink-0 h-9 px-2.5"
-                  :class="store.state.theme === 'dark' ? 'bg-white/4 border-b border-[#2d3748]' : 'bg-gray-100 border-b border-[#e5e7eb]'">
+                  :class="'bg-surface-subtle border-b border-border-default'">
                   <div class="flex items-center gap-2">
-                    <div class="w-0.75 h-3.5 rounded-sm shrink-0 bg-(--q-primary)" />
+                    <div class="w-0.75 h-3.5 rounded-default shrink-0 bg-theme-accent" />
                     <span class="text-xs font-semibold">{{ localTab === 'sql' ? t('alerts.sqlEditor') : t('alerts.promqlEditor') }}</span>
                   </div>
                   <!-- fx toggle shown here only when VRL is not yet enabled -->
@@ -665,8 +657,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <OTooltip :content="t('alerts.queryConfig.showVrlEditor')" :delay="300" />
                   </OSwitch>
                 </div>
-                <div style="position: relative; flex: 1; min-height: 0;">
-                  <div style="position: absolute; inset: 0;">
+                <div class="relative flex-1 min-h-0">
+                  <div class="absolute inset-0">
                     <UnifiedQueryEditor
                       ref="inlineQueryEditorRef"
                       data-test-prefix="alert-inline-sql"
@@ -684,7 +676,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </div>
                   <div
                     v-if="(localTab === 'sql' ? !localSqlQuery : !localPromqlQuery) && queryEditorPlaceholderFlag"
-                    class="query-editor-placeholder-overlay"
+                    class="query-editor-placeholder-overlay absolute inset-0 flex items-start pt-0.75 pl-[2.15rem] pr-2 pointer-events-none z-1 select-none"
                   >
                     <span class="query-editor-placeholder-typewriter">{{ inlineEditorPlaceholder }}</span>
                   </div>
@@ -692,23 +684,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </div>
 
               <!-- VRL pane — with its own header, side-by-side with SQL pane -->
-              <div v-if="showVrl && localTab === 'sql'"
-                style="display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden; width: 50%;"
-                :style="{ borderLeft: store.state.theme === 'dark' ? '1px solid #2d3748' : '1px solid #e5e7eb' }">
+              <div class="flex flex-col shrink-0 overflow-hidden w-1/2 border-l border-border-default" v-if="showVrl && localTab === 'sql'">
                 <div class="flex items-center justify-between shrink-0 h-9 px-2.5"
-                  :class="store.state.theme === 'dark' ? 'bg-white/4 border-b border-[#2d3748]' : 'bg-gray-100 border-b border-[#e5e7eb]'">
+                  :class="'bg-surface-subtle border-b border-border-default'">
                   <div class="flex items-center gap-2">
-                    <div class="w-0.75 h-3.5 rounded-sm shrink-0 bg-(--q-secondary)" />
+                    <div class="w-0.75 h-3.5 rounded-default shrink-0 bg-section-accent-secondary" />
                     <span class="text-xs font-semibold">{{ t('alerts.queryConfig.vrlEditor') }}</span>
                   </div>
                   <div class="flex items-center gap-1">
-                    <OSelect
+                    <OSelect class="w-32.5!"
                       v-model="selectedSavedFunctionName"
                       :options="functionsList"
                       labelKey="name"
                       valueKey="name"
                       clearable
-                      style="width: 130px;"
                       :placeholder="t('alerts.placeholders.savedFunctions')"
                       @update:model-value="(name: any) => { const fn = functionsList.find((f: any) => f.name === name); if (fn) vrlFunctionContent = fn.function || fn.body || ''; }"
                     >
@@ -721,8 +710,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     </OSwitch>
                   </div>
                 </div>
-                <div style="position: relative; flex: 1; min-height: 0;">
-                  <div style="position: absolute; inset: 0;">
+                <div class="relative flex-1 min-h-0">
+                  <div class="absolute inset-0">
                     <UnifiedQueryEditor
                       data-test-prefix="alert-inline-vrl"
                       :languages="['vrl']"
@@ -737,7 +726,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     />
                     <div
                       v-if="!vrlFunctionContent && vrlEditorPlaceholderFlag"
-                      class="query-editor-placeholder-overlay"
+                      class="query-editor-placeholder-overlay absolute inset-0 flex items-start pt-0.75 pl-[2.15rem] pr-2 pointer-events-none z-1 select-none"
                     >
                       <span class="query-editor-placeholder-typewriter">{{ vrlPlaceholder }}</span>
                     </div>
@@ -751,21 +740,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- Status bar — outside overflow:hidden so borders render correctly -->
           <div
             v-if="localTab !== 'promql'"
-            class="inline-sql-status-bar relative h-[22px] shrink-0 text-[13px] font-medium cursor-default"
-            :class="[inlineStatusState, store.state.theme === 'dark' ? 'sql-status-bar--dark' : 'sql-status-bar--light']"
+            class="relative h-5.5 shrink-0 text-compact font-medium border-x border-b border-border-default rounded-b-default"
+            :class="inlineStatusBarClass"
           >
-            <div class="sql-status-bar__inner">
+            <div class="absolute inset-0 flex items-center gap-1.25 px-2.5 overflow-hidden">
               <template v-if="inlineStatusState === 'sql-status-bar--error'">
-                <OIcon name="error-outline" size="xs" style="flex-shrink:0;" />
-                <span class="sql-status-bar__msg">{{ sqlQueryErrorMsg }}</span>
-                <OTooltip side="top" style="font-size:11px;white-space:pre-wrap;word-break:break-word;">{{ sqlQueryErrorMsg }}</OTooltip>
+                <OIcon class="shrink-0" name="error-outline" size="xs" />
+                <span class="truncate min-w-0 flex-1">{{ sqlQueryErrorMsg }}</span>
+                <OTooltip side="top">{{ sqlQueryErrorMsg }}</OTooltip>
               </template>
               <template v-else-if="inlineStatusState === 'sql-status-bar--hint'">
-                <OIcon name="edit" size="xs" style="flex-shrink:0;opacity:0.6;" />
+                <OIcon class="shrink-0 opacity-60" name="edit" size="xs" />
                 <span>{{ t('alerts.queryConfig.writeQueryHint') }}</span>
               </template>
               <template v-else-if="inlineStatusState === 'sql-status-bar--idle'">
-                <OIcon name="check-circle-outline" size="xs" style="flex-shrink:0;opacity:0.7;" />
+                <OIcon class="shrink-0 opacity-70" name="check-circle-outline" size="xs" />
                 <span>{{ t('alerts.queryConfig.sqlEditorHint') }}</span>
               </template>
             </div>
@@ -775,8 +764,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <div v-if="isRealTime === 'false'" class="flex flex-col gap-0 mt-2 px-1">
 
             <!-- Check every -->
-            <div class="flex items-start gap-3 py-2 px-3 rounded-md text-[13px]">
-              <span class="condition-label font-bold text-[13px] whitespace-nowrap min-w-[160px] w-[160px] shrink-0" style="line-height: 28px;">
+            <div class="flex items-start gap-3 py-2 px-3 rounded-default text-compact">
+              <span class="font-bold text-text-heading text-compact whitespace-nowrap min-w-40 w-40 shrink-0 leading-7">
                 {{ t('alerts.queryConfig.checkEvery') }} *
                 <OTooltip :content="t('alerts.howOftenCheckTooltip')" :delay="300" side="top" />
               </span>
@@ -786,7 +775,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <OFormInput
                       name="_ui.checkEvery"
                       type="number"
-                      style="min-width: 100px; max-width: 100px;"
+                      class="min-w-25 max-w-25"
                       min="1"
                       @update:model-value="onCheckEveryChange($event)"
                       @blur="restoreDefaultFrequency"
@@ -799,27 +788,26 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <OFormInput
                       name="trigger_condition.cron"
                       :placeholder="t('alerts.queryConfig.cronExpressionPlaceholder')"
-                      style="min-width: 100px; max-width: 100px;"
+                      class="min-w-25 max-w-25"
                       @update:model-value="onCronExpressionChange"
                     />
                   </template>
-                  <OSelect
+                  <OSelect class="min-w-20 max-w-25"
                     :model-value="frequencyMode"
                     :options="frequencyUnitOptions"
                     labelKey="label"
                     valueKey="value"
                     :searchable="false"
-                    style="min-width: 80px; max-width: 100px;"
                     @update:model-value="onFrequencyUnitChange"
                   />
                   <template v-if="frequencyMode === 'cron'">
-                    <span class="inline-block" style="min-width: 150px; max-width: 150px;">
+                    <span class="inline-block min-w-37.5 max-w-37.5">
                       <OFormSelect
                         name="trigger_condition.timezone"
                         :options="filteredTimezones"
                         searchable
                         :placeholder="t('alerts.queryConfig.timezonePlaceholder')"
-                        style="min-width: 150px; max-width: 150px;"
+                        class="min-w-37.5 max-w-37.5"
                         @update:model-value="onCronTimezoneChange"
                       />
                       <OTooltip
@@ -839,26 +827,25 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 >
                   {{ checkEveryError }}
                 </div>
-                <div v-if="frequencyMode === 'cron' && cronDescription && !cronError" class="text-[11px] italic"
-                     :class="store.state.theme === 'dark' ? 'text-gray-400' : 'text-gray-500'">
+                <div v-if="frequencyMode === 'cron' && cronDescription && !cronError" class="text-2xs italic"
+                     :class="'text-text-secondary'">
                   {{ cronDescription }}
                 </div>
-                <div v-if="frequencyMode === 'cron' && cronError" class="text-red-500 text-[11px]">
+                <div v-if="frequencyMode === 'cron' && cronError" class="text-status-error-text text-2xs">
                   {{ cronError }}
                 </div>
               </div>
             </div>
 
             <!-- SQL: Alert if No. of events -->
-            <div v-if="localTab === 'sql'" class="flex items-start gap-3 py-2 px-3 rounded-md text-[13px]">
-              <span class="condition-label font-bold text-[13px] whitespace-nowrap min-w-[160px] w-[160px] shrink-0 leading-8.5">{{ t('alerts.alertIfNoOfEvents') }} *</span>
+            <div v-if="localTab === 'sql'" class="flex items-start gap-3 py-2 px-3 rounded-default text-compact">
+              <span class="font-bold text-text-heading text-compact whitespace-nowrap min-w-40 w-40 shrink-0 leading-8.5">{{ t('alerts.alertIfNoOfEvents') }} *</span>
               <div class="flex items-start gap-2">
                 <OFormSelect
                   name="trigger_condition.operator"
                   :options="numericOperators"
                   :searchable="false"
                   data-test="alert-trigger-operator-select"
-                  style="min-width: 70px; max-width: 120px;"
                   @update:model-value="onTriggerOperatorChange"
                 />
                 <!-- The message belongs to the threshold, so it hangs under the
@@ -890,8 +877,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
             <!-- PromQL: Alert if the value is + Having series -->
             <template v-if="localTab === 'promql' && promqlCondition">
-              <div class="flex items-start gap-3 py-2 px-3 rounded-md text-[13px]">
-                <span class="condition-label font-bold text-[13px] whitespace-nowrap min-w-[160px] w-[160px] shrink-0 leading-8.5">{{ t('alerts.alertIfValueIs') }} *
+              <div class="flex items-start gap-3 py-2 px-3 rounded-default text-compact">
+                <span class="font-bold text-text-heading text-compact whitespace-nowrap min-w-40 w-40 shrink-0 leading-8.5">{{ t('alerts.alertIfValueIs') }} *
                   <OTooltip :content="t('alerts.queryConfig.alertIfValueIsTooltip')" :delay="300" side="top" />
                 </span>
                 <div class="flex items-start gap-2">
@@ -900,7 +887,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     :options="numericOperators"
                     :searchable="false"
                     data-test="alert-threshold-operator-select"
-                    style="min-width: 70px; max-width: 120px;"
+                    class="min-w-17.5 max-w-30"
                     @update:model-value="onPromqlOperatorChange"
                   />
                   <!-- Message hangs under the value field it describes. -->
@@ -925,8 +912,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </div>
                 </div>
               </div>
-              <div class="flex items-start gap-3 py-2 px-3 rounded-md text-[13px]">
-                <span class="condition-label font-bold text-[13px] whitespace-nowrap min-w-[160px] w-[160px] shrink-0 leading-8.5">{{ t('alerts.havingSeries') }} *
+              <div class="flex items-start gap-3 py-2 px-3 rounded-default text-compact">
+                <span class="font-bold text-text-heading text-compact whitespace-nowrap min-w-40 w-40 shrink-0 leading-8.5">{{ t('alerts.havingSeries') }} *
                   <OTooltip :content="t('alerts.queryConfig.havingSeriesTooltip')" :delay="300" side="top" />
                 </span>
                 <div class="flex items-start gap-2">
@@ -934,7 +921,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     name="trigger_condition.operator"
                     :options="numericOperators"
                     :searchable="false"
-                    style="min-width: 70px; max-width: 120px;"
                     @update:model-value="onTriggerOperatorChange"
                   />
                   <!-- Message hangs under the threshold field it describes. -->
@@ -1131,15 +1117,13 @@ export default defineComponent({
     const { t } = useI18n();
     const store = useStore();
 
-    // DESCENDANT step (Rule ③): the AddAlert orchestrator owns the ONE form and
-    // provides FORM_CONTEXT_KEY. All field reads/writes below go through it; the
-    // composed AddAlert schema (which reuses makeQueryConfigSchema) validates on
-    // save.
+    // Descendant step: the AddAlert orchestrator owns the ONE form and provides
+    // FORM_CONTEXT_KEY. All field reads/writes below go through it; the composed
+    // AddAlert schema validates on save.
     const form: any = inject(FORM_CONTEXT_KEY, null);
 
-    // ── Initial values for the discriminator refs below (the form itself is
-    // seeded by useAlertForm's defaults; `_meta` is kept fresh by the syncMeta
-    // watcher). Mirrors the pre-migration ref initializers verbatim. ──────────
+    // Initial values for the discriminator refs below (the form itself is seeded
+    // by useAlertForm's defaults; `_meta` is kept fresh by the syncMeta watcher).
     const isEventBasedInit = props.streamType !== "metrics";
     const initialSelectedFunction = isEventBasedInit
       ? (props.isAggregationEnabled && props.inputData.aggregation?.function
@@ -1161,19 +1145,14 @@ export default defineComponent({
       ).length > 0;
 
     // Field get/set helpers — the form is the single source of truth for the
-    // validated scalars; props.* stay a write-through copy for the SQL-gen path
-    // (mutated in place at each handler + emitted, unchanged from pre-migration).
+    // validated scalars; props.* stay a write-through copy for the SQL-gen path.
     //
     // `fv` must be BOTH fresh AND reactive:
     //  • `getFieldValue` is a synchronous read straight off TanStack's store, so a
     //    handler that just wrote a field reads its own write back in the same tick.
     //  • but `getFieldValue` is NOT a Vue reactive source. A `computed()` whose
-    //    getter only calls it therefore tracks NO dependency, so Vue caches the
-    //    FIRST result and never re-evaluates it. That silently broke every
-    //    fv-backed computed below: `cronExpression` cached "" at mount, so
-    //    `validateCron()` always saw an empty expression and pinned "Cron
-    //    expression and timezone are required" on screen — and `cronDescription`
-    //    stayed blank — even though the form held the seeded `0 */10 * * * *`.
+    //    getter only calls it tracks NO dependency, so Vue caches the FIRST result
+    //    and never re-evaluates it.
     // Touching the reactive values snapshot registers the dependency (so the
     // computeds invalidate on any form write); the value still comes from the
     // fresh synchronous read, so same-tick read-after-write stays correct.
@@ -1187,12 +1166,9 @@ export default defineComponent({
     };
 
     // Build a fresh aggregation object off the CURRENT form value (NEVER the
-    // readonly `props.inputData`), apply `mutate`, and write it back through the
-    // form. The pre-migration handlers mutated `props.inputData.aggregation` in
-    // place — that silently fails now the prop is the readonly form read-view
-    // ("Set operation … target is readonly"), so aggregation edits were lost and
-    // the stale object got re-seeded. Cloning + setFV keeps the form the single
-    // source of truth.
+    // readonly `props.inputData`, which is the readonly form read-view), apply
+    // `mutate`, and write it back through the form. Cloning + setFV keeps the form
+    // the single source of truth.
     const writeAggregation = (mutate: (agg: any) => void): any => {
       const current = fv("query_condition.aggregation");
       const next = current
@@ -1308,6 +1284,13 @@ export default defineComponent({
       return 'sql-status-bar--idle';
     });
 
+    // Status-bar color/cursor per state (was CSS .sql-status-bar--*).
+    const inlineStatusBarClass = computed(() =>
+      inlineStatusState.value === 'sql-status-bar--error'
+        ? 'bg-status-error-bg text-status-error-text cursor-pointer'
+        : 'bg-surface-subtle text-text-secondary cursor-default'
+    );
+
     // Placeholder flags for inline editors (show image when empty + not focused)
     const queryEditorPlaceholderFlag = ref(true);
     const vrlEditorPlaceholderFlag = ref(true);
@@ -1399,10 +1382,10 @@ export default defineComponent({
     // schema). Seeded from the shared initial const.
     const selectedFunction = ref(initialSelectedFunction);
 
-    // ── Form-backed scalar accessors (Rule ②: the form is the single source of
-    // truth; these writable computeds let the pre-migration handlers/watchers and
-    // the specs read/write the field values without a parallel ref). The `.vue`
-    // controls are name=-owned OForm* — these never drive a v-model. ──────────
+    // Form-backed scalar accessors: the form is the single source of truth; these
+    // writable computeds let handlers/watchers read/write the field values without
+    // a parallel ref. The `.vue` controls are name=-owned OForm* — these never
+    // drive a v-model.
     // Log/metric MEASURE column → aggregation.having.column.
     const logMeasureColumn = computed<any>({
       get: () => fv("query_condition.aggregation.having.column") ?? "",
@@ -1973,18 +1956,12 @@ export default defineComponent({
 
     // Emit trigger condition update (for non-aggregation mode).
     //
-    // Emit the CURRENT FORM value, never `props.triggerCondition`. The prop is
-    // `formData.trigger_condition` — a `form.useStore` read-view that only
-    // refreshes on the next render. Every caller here is a handler that JUST
-    // wrote fields via setFV in the same tick, so the prop still holds the
-    // PRE-write snapshot. The parent's `update:triggerCondition` handler does
-    // `setFieldValue("trigger_condition", value)` — a WHOLE-OBJECT write — so
-    // emitting the stale prop round-tripped it back and CLOBBERED those writes.
-    // That is what silently ate the cron seed: onFrequencyUnitChange wrote
-    // frequency_type='cron' + cron='0 */10 * * * *', then this emit put
-    // {frequency_type:'minutes', cron:''} straight back, leaving the cron input
-    // empty with "Cron expression and timezone are required".
-    // `fv` is form.getFieldValue — a synchronous, always-fresh read.
+    // Emit the CURRENT FORM value (`fv` = form.getFieldValue, a synchronous
+    // always-fresh read), never `props.triggerCondition` — the prop is a
+    // `form.useStore` read-view that only refreshes next render, so it still
+    // holds the PRE-write snapshot in a same-tick handler, and the parent's
+    // whole-object `setFieldValue("trigger_condition", value)` would round-trip
+    // that stale value back and clobber the writes.
     // `overrides` mirrors emitAggregationUpdate: a consumer @update:model-value
     // handler runs BEFORE field.handleChange commits, so `fv("trigger_condition")`
     // still holds the OLD value there. Callers that have the new value in hand must
@@ -2603,6 +2580,7 @@ export default defineComponent({
       onBlurInlineSqlEditor,
       onBlurInlineVrlEditor,
       inlineStatusState,
+      inlineStatusBarClass,
       inlineQueryEditorRef,
       autoCompleteKeywords,
       autoCompleteSuggestions,
@@ -2618,92 +2596,3 @@ export default defineComponent({
   },
 });
 </script>
-
-<style>
-/* placeholder overlay positioning — typewriter text styling is global
-   (styles/tailwind.css), shared with logs/traces/RUM pages. */
-.query-editor-placeholder-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: flex-start;
-  padding: 0.1875rem 0.5rem 0 2.15rem;
-  pointer-events: none;
-  z-index: 1;
-  user-select: none;
-}
-
-/* status bar child/compound selectors — cannot be inlined */
-.inline-sql-status-bar .sql-status-bar__inner {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  padding: 0 10px;
-  overflow: hidden;
-}
-
-.inline-sql-status-bar .sql-status-bar__msg {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  min-width: 0;
-  flex: 1;
-}
-
-.inline-sql-status-bar.sql-status-bar--hint    { background: #f3f4f6; color: #6b7280; }
-.inline-sql-status-bar.sql-status-bar--idle    { background: #f3f4f6; color: #6b7280; }
-.inline-sql-status-bar.sql-status-bar--error   { background: rgba(239, 68, 68, 0.08); color: #ef4444; cursor: pointer; }
-
-.inline-sql-status-bar.sql-status-bar--light {
-  border-left: 1px solid #e5e7eb;
-  border-right: 1px solid #e5e7eb;
-  border-bottom: 1px solid #e5e7eb;
-  border-bottom-left-radius: 8px;
-  border-bottom-right-radius: 8px;
-}
-.inline-sql-status-bar.sql-status-bar--dark {
-  border-left: 1px solid #2d3748;
-  border-right: 1px solid #2d3748;
-  border-bottom: 1px solid #2d3748;
-  border-bottom-left-radius: 8px;
-  border-bottom-right-radius: 8px;
-}
-.inline-sql-status-bar.sql-status-bar--dark.sql-status-bar--hint,
-.inline-sql-status-bar.sql-status-bar--dark.sql-status-bar--idle {
-  background: rgba(255, 255, 255, 0.04);
-  color: #d1d5db;
-}
-
-/* global tooltip selectors */
-:global(.sql-preview-tooltip) {
-  background: #1e1e1e !important;
-  padding: 0 !important;
-  border-radius: 6px !important;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
-}
-
-:global(.sql-preview-tooltip) .hljs {
-  background: #1e1e1e !important;
-  border-radius: 6px;
-}
-
-/* descendant color overrides for condition labels/text */
-.light-mode .condition-label {
-  color: rgba(0, 0, 0, 0.8);
-}
-.light-mode .condition-text {
-  color: rgba(0, 0, 0, 0.7);
-}
-
-.dark-mode .condition-label {
-  color: rgba(255, 255, 255, 0.9);
-}
-.dark-mode .condition-text {
-  color: rgba(255, 255, 255, 0.75);
-}
-</style>
diff --git a/web/src/components/anomaly_detection/AnomalyDetectionList.spec.ts b/web/src/components/anomaly_detection/AnomalyDetectionList.spec.ts
deleted file mode 100644
index 5bb2737f1a..0000000000
--- a/web/src/components/anomaly_detection/AnomalyDetectionList.spec.ts
+++ /dev/null
@@ -1,579 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { describe, expect, it, beforeEach, afterEach, vi } from "vitest";
-import { mount, flushPromises } from "@vue/test-utils";
-import i18n from "@/locales";
-import store from "@/test/unit/helpers/store";
-
-
-// Stub ODialog so tests are deterministic (no Portal/Reka teleport)
-// and so we can assert on the props the component forwards + emit
-// the click events the component listens to.
-const ODialogStub = {
-  name: "ODialog",
-  props: [
-    "open",
-    "size",
-    "title",
-    "subTitle",
-    "persistent",
-    "showClose",
-    "width",
-    "primaryButtonLabel",
-    "secondaryButtonLabel",
-    "neutralButtonLabel",
-    "primaryButtonVariant",
-    "secondaryButtonVariant",
-    "neutralButtonVariant",
-    "primaryButtonDisabled",
-    "secondaryButtonDisabled",
-    "neutralButtonDisabled",
-    "primaryButtonLoading",
-    "secondaryButtonLoading",
-    "neutralButtonLoading",
-  ],
-  emits: ["update:open", "click:primary", "click:secondary", "click:neutral"],
-  template: `
-    <div
-      data-test="o-dialog-stub"
-      :data-open="String(open)"
-      :data-size="size"
-      :data-title="title"
-      :data-primary-label="primaryButtonLabel"
-      :data-secondary-label="secondaryButtonLabel"
-      :data-primary-variant="primaryButtonVariant"
-      :data-primary-loading="String(primaryButtonLoading)"
-      :data-persistent="String(persistent)"
-    >
-      <slot name="header" />
-      <slot />
-      <slot name="footer" />
-      <button
-        data-test="o-dialog-stub-primary"
-        @click="$emit('click:primary')"
-      >{{ primaryButtonLabel }}</button>
-      <button
-        data-test="o-dialog-stub-secondary"
-        @click="$emit('click:secondary')"
-      >{{ secondaryButtonLabel }}</button>
-    </div>
-  `,
-};
-
-const mockConfigs = vi.hoisted(() => [
-  {
-    anomaly_id: "id-1",
-    name: "Config A",
-    stream_name: "logs-stream",
-    stream_type: "logs",
-    status: "ready",
-    enabled: true,
-    is_trained: true,
-    schedule_interval: "1h",
-    detection_window_seconds: 3600,
-    last_detection_run: 1700000000 * 1000,
-    last_anomaly_detected_at: null,
-    training_completed_at: 1699000000 * 1000,
-    last_error: null,
-  },
-  {
-    anomaly_id: "id-2",
-    name: "Config B",
-    stream_name: "metrics-stream",
-    stream_type: "metrics",
-    status: "training",
-    enabled: true,
-    is_trained: false,
-    schedule_interval: "30m",
-    detection_window_seconds: 1800,
-    last_detection_run: null,
-    last_anomaly_detected_at: null,
-    training_completed_at: null,
-    last_error: null,
-  },
-  {
-    anomaly_id: "id-3",
-    name: "Config C",
-    stream_name: "traces-stream",
-    stream_type: "traces",
-    status: "failed",
-    enabled: false,
-    is_trained: false,
-    schedule_interval: "2h",
-    detection_window_seconds: 7200,
-    last_detection_run: null,
-    last_anomaly_detected_at: null,
-    training_completed_at: null,
-    last_error: "Model training failed: insufficient data",
-  },
-]);
-
-vi.mock("@/services/anomaly_detection", () => ({
-  default: {
-    list: vi.fn().mockResolvedValue({ data: { configs: mockConfigs } }),
-    delete: vi.fn().mockResolvedValue({ data: {} }),
-    toggleEnabled: vi.fn().mockResolvedValue({ data: {} }),
-    triggerTraining: vi.fn().mockResolvedValue({ data: {} }),
-    cancelTraining: vi.fn().mockResolvedValue({ data: {} }),
-  },
-}));
-
-vi.mock("vue-router", () => ({
-  useRouter: () => ({
-    push: vi.fn(),
-    resolve: vi.fn().mockReturnValue({ href: "/" }),
-  }),
-  useRoute: () => ({ params: {}, query: {} }),
-}));
-
-import AnomalyDetectionList from "@/components/anomaly_detection/AnomalyDetectionList.vue";
-import anomalyDetectionService from "@/services/anomaly_detection";
-
-async function mountComp(props: Record<string, any> = {}) {
-  return mount(AnomalyDetectionList, {
-    props: { org_identifier: "default", ...props },
-    global: {
-      plugins: [i18n, store],
-      stubs: {
-        ODialog: ODialogStub,
-      },
-    },
-  });
-}
-
-describe("AnomalyDetectionList - rendering", () => {
-  beforeEach(() => vi.clearAllMocks());
-
-  it("renders without errors", async () => {
-    const w = await mountComp();
-    await flushPromises();
-    expect(w.exists()).toBe(true);
-  });
-
-  it("renders the data table", async () => {
-    const w = await mountComp();
-    await flushPromises();
-    expect(w.find('[data-test="anomaly-detection-list-table"]').exists()).toBe(true);
-  });
-
-  it("calls anomalyDetectionService.list on mount", async () => {
-    await mountComp();
-    await flushPromises();
-    expect(anomalyDetectionService.list).toHaveBeenCalledWith("default");
-  });
-
-  it("renders three ODialog instances (delete, cancel training, retrain)", async () => {
-    const w = await mountComp();
-    await flushPromises();
-    const dialogs = w.findAllComponents(ODialogStub);
-    expect(dialogs.length).toBe(3);
-  });
-
-  it("dialogs are closed initially", async () => {
-    const w = await mountComp();
-    await flushPromises();
-    const dialogs = w.findAllComponents(ODialogStub);
-    dialogs.forEach((d) => {
-      expect(d.props("open")).toBe(false);
-    });
-  });
-
-  it("forwards persistent to all dialogs (truthy)", async () => {
-    const w = await mountComp();
-    await flushPromises();
-    const dialogs = w.findAllComponents(ODialogStub);
-    dialogs.forEach((d) => {
-      // persistent is bound without value in template => empty string (truthy presence)
-      expect(d.props("persistent")).not.toBeUndefined();
-    });
-  });
-});
-
-describe("AnomalyDetectionList - statusLabel", () => {
-  it("returns i18n label for 'ready' enabled row", async () => {
-    const w = await mountComp();
-    await flushPromises();
-    const label = (w.vm as any).statusLabel({ status: "ready", enabled: true });
-    expect(label).toBeTruthy();
-    expect(label).not.toBe("alerts.anomalyStatus.ready"); // i18n key was resolved
-    expect(label.toLowerCase()).toContain("ready");
-  });
-
-  it("returns disabled label when row is not enabled", async () => {
-    const w = await mountComp();
-    await flushPromises();
-    const label = (w.vm as any).statusLabel({ status: "ready", enabled: false });
-    expect(label.toLowerCase()).toContain("disabled");
-  });
-
-  it("returns i18n label for 'waiting' enabled row", async () => {
-    const w = await mountComp();
-    await flushPromises();
-    const label = (w.vm as any).statusLabel({ status: "waiting", enabled: true });
-    expect(label).toBeTruthy();
-    expect(label).not.toBe("alerts.anomalyStatus.waiting");
-  });
-});
-
-describe("AnomalyDetectionList - formatSeconds", () => {
-  it("formats exact hours correctly", async () => {
-    const w = await mountComp();
-    await flushPromises();
-    expect((w.vm as any).formatSeconds(3600)).toBe("1 Hours");
-    expect((w.vm as any).formatSeconds(7200)).toBe("2 Hours");
-  });
-
-  it("formats minutes for non-hourly seconds", async () => {
-    const w = await mountComp();
-    await flushPromises();
-    expect((w.vm as any).formatSeconds(1800)).toBe("30 mins");
-    expect((w.vm as any).formatSeconds(600)).toBe("10 mins");
-  });
-
-  it("formats hours and minutes correctly", async () => {
-    const w = await mountComp();
-    await flushPromises();
-    expect((w.vm as any).formatSeconds(5400)).toBe("1 Hours 30 Mins");
-  });
-});
-
-describe("AnomalyDetectionList - formatTimestamp", () => {
-  it("formats a microsecond timestamp to readable string", async () => {
-    const w = await mountComp();
-    await flushPromises();
-    const ts = 1700000000 * 1000 * 1000; // microseconds
-    const result = (w.vm as any).formatTimestamp(ts);
-    expect(typeof result).toBe("string");
-    expect(result.length).toBeGreaterThan(0);
-  });
-});
-
-describe("AnomalyDetectionList - confirmDelete & deleteConfig", () => {
-  beforeEach(() => vi.clearAllMocks());
-
-  it("confirmDelete opens delete dialog and sets pendingDeleteRow", async () => {
-    const w = await mountComp();
-    await flushPromises();
-    const row = mockConfigs[0];
-    (w.vm as any).confirmDelete(row);
-    expect((w.vm as any).showDeleteDialog).toBe(true);
-    expect((w.vm as any).pendingDeleteRow).toEqual(row);
-  });
-
-  it("delete ODialog reflects open=true after confirmDelete", async () => {
-    const w = await mountComp();
-    await flushPromises();
-    (w.vm as any).confirmDelete(mockConfigs[0]);
-    await flushPromises();
-    const dialogs = w.findAllComponents(ODialogStub);
-    // First dialog is the delete dialog
-    expect(dialogs[0].props("open")).toBe(true);
-    expect(dialogs[0].props("primaryButtonVariant")).toBe("destructive");
-    expect(dialogs[0].props("size")).toBe("xs");
-  });
-
-  it("clicking primary on delete dialog triggers deleteConfig", async () => {
-    const w = await mountComp();
-    await flushPromises();
-    (w.vm as any).confirmDelete(mockConfigs[0]);
-    await flushPromises();
-    const dialogs = w.findAllComponents(ODialogStub);
-    await dialogs[0].vm.$emit("click:primary");
-    await flushPromises();
-    expect(anomalyDetectionService.delete).toHaveBeenCalledWith("default", "id-1");
-  });
-
-  it("clicking secondary on delete dialog closes the dialog", async () => {
-    const w = await mountComp();
-    await flushPromises();
-    (w.vm as any).confirmDelete(mockConfigs[0]);
-    await flushPromises();
-    expect((w.vm as any).showDeleteDialog).toBe(true);
-    const dialogs = w.findAllComponents(ODialogStub);
-    await dialogs[0].vm.$emit("click:secondary");
-    await flushPromises();
-    expect((w.vm as any).showDeleteDialog).toBe(false);
-  });
-
-  it("deleteConfig calls anomalyDetectionService.delete", async () => {
-    const w = await mountComp();
-    await flushPromises();
-    (w.vm as any).pendingDeleteRow = mockConfigs[0];
-    await (w.vm as any).deleteConfig();
-    await flushPromises();
-    expect(anomalyDetectionService.delete).toHaveBeenCalledWith("default", "id-1");
-  });
-
-  it("deleteConfig removes config from local list after success", async () => {
-    const w = await mountComp();
-    await flushPromises();
-    (w.vm as any).pendingDeleteRow = mockConfigs[0];
-    await (w.vm as any).deleteConfig();
-    await flushPromises();
-    const remaining = (w.vm as any).configs.find((c: any) => c.anomaly_id === "id-1");
-    expect(remaining).toBeUndefined();
-  });
-
-  it("deleteConfig closes the dialog after success", async () => {
-    const w = await mountComp();
-    await flushPromises();
-    (w.vm as any).pendingDeleteRow = mockConfigs[0];
-    (w.vm as any).showDeleteDialog = true;
-    await (w.vm as any).deleteConfig();
-    await flushPromises();
-    expect((w.vm as any).showDeleteDialog).toBe(false);
-  });
-
-  it("deleteConfig does nothing when pendingDeleteRow is null", async () => {
-    const w = await mountComp();
-    await flushPromises();
-    (w.vm as any).pendingDeleteRow = null;
-    await (w.vm as any).deleteConfig();
-    await flushPromises();
-    expect(anomalyDetectionService.delete).not.toHaveBeenCalled();
-  });
-
-  it("delete dialog forwards loading state via primaryButtonLoading prop", async () => {
-    const w = await mountComp();
-    await flushPromises();
-    (w.vm as any).deleting = true;
-    await flushPromises();
-    const dialogs = w.findAllComponents(ODialogStub);
-    expect(dialogs[0].props("primaryButtonLoading")).toBe(true);
-  });
-});
-
-describe("AnomalyDetectionList - confirmRetrain & retrain", () => {
-  beforeEach(() => vi.clearAllMocks());
-
-  it("confirmRetrain sets pendingRetrainRow and opens dialog", async () => {
-    const w = await mountComp();
-    await flushPromises();
-    (w.vm as any).confirmRetrain(mockConfigs[0]);
-    expect((w.vm as any).showRetrainDialog).toBe(true);
-    expect((w.vm as any).pendingRetrainRow).toEqual(mockConfigs[0]);
-  });
-
-  it("retrain ODialog reflects open=true after confirmRetrain", async () => {
-    const w = await mountComp();
-    await flushPromises();
-    (w.vm as any).confirmRetrain(mockConfigs[0]);
-    await flushPromises();
-    const dialogs = w.findAllComponents(ODialogStub);
-    // Third dialog is the retrain dialog (delete=0, cancel=1, retrain=2)
-    expect(dialogs[2].props("open")).toBe(true);
-    expect(dialogs[2].props("size")).toBe("sm");
-  });
-
-  it("retrain dialog uses 'destructive' variant when row status is failed", async () => {
-    const w = await mountComp();
-    await flushPromises();
-    (w.vm as any).confirmRetrain(mockConfigs[2]); // failed row
-    await flushPromises();
-    const dialogs = w.findAllComponents(ODialogStub);
-    expect(dialogs[2].props("primaryButtonVariant")).toBe("destructive");
-  });
-
-  it("retrain dialog uses 'primary' variant when row is not failed", async () => {
-    const w = await mountComp();
-    await flushPromises();
-    (w.vm as any).confirmRetrain(mockConfigs[0]); // ready row
-    await flushPromises();
-    const dialogs = w.findAllComponents(ODialogStub);
-    expect(dialogs[2].props("primaryButtonVariant")).toBe("primary");
-  });
-
-  it("clicking primary on retrain dialog triggers retrain service", async () => {
-    const w = await mountComp();
-    await flushPromises();
-    (w.vm as any).confirmRetrain(mockConfigs[0]);
-    await flushPromises();
-    const dialogs = w.findAllComponents(ODialogStub);
-    await dialogs[2].vm.$emit("click:primary");
-    await flushPromises();
-    expect(anomalyDetectionService.triggerTraining).toHaveBeenCalledWith("default", "id-1");
-  });
-
-  it("clicking secondary on retrain dialog closes the dialog", async () => {
-    const w = await mountComp();
-    await flushPromises();
-    (w.vm as any).confirmRetrain(mockConfigs[0]);
-    await flushPromises();
-    const dialogs = w.findAllComponents(ODialogStub);
-    await dialogs[2].vm.$emit("click:secondary");
-    await flushPromises();
-    expect((w.vm as any).showRetrainDialog).toBe(false);
-  });
-
-  it("retrain calls triggerTraining service", async () => {
-    const w = await mountComp();
-    await flushPromises();
-    (w.vm as any).pendingRetrainRow = mockConfigs[0];
-    await (w.vm as any).retrain();
-    await flushPromises();
-    expect(anomalyDetectionService.triggerTraining).toHaveBeenCalledWith("default", "id-1");
-  });
-
-  it("retrain closes dialog after success", async () => {
-    const w = await mountComp();
-    await flushPromises();
-    (w.vm as any).pendingRetrainRow = mockConfigs[0];
-    (w.vm as any).showRetrainDialog = true;
-    await (w.vm as any).retrain();
-    await flushPromises();
-    expect((w.vm as any).showRetrainDialog).toBe(false);
-  });
-
-  it("retrain does nothing when pendingRetrainRow is null", async () => {
-    const w = await mountComp();
-    await flushPromises();
-    (w.vm as any).pendingRetrainRow = null;
-    await (w.vm as any).retrain();
-    await flushPromises();
-    expect(anomalyDetectionService.triggerTraining).not.toHaveBeenCalled();
-  });
-});
-
-describe("AnomalyDetectionList - confirmCancelTraining & cancelTraining", () => {
-  beforeEach(() => vi.clearAllMocks());
-
-  it("confirmCancelTraining opens cancel dialog", async () => {
-    const w = await mountComp();
-    await flushPromises();
-    (w.vm as any).confirmCancelTraining(mockConfigs[1]);
-    expect((w.vm as any).showCancelTrainingDialog).toBe(true);
-    expect((w.vm as any).pendingCancelRow).toEqual(mockConfigs[1]);
-  });
-
-  it("cancel training ODialog reflects open=true after confirmCancelTraining", async () => {
-    const w = await mountComp();
-    await flushPromises();
-    (w.vm as any).confirmCancelTraining(mockConfigs[1]);
-    await flushPromises();
-    const dialogs = w.findAllComponents(ODialogStub);
-    // Second dialog is the cancel training dialog
-    expect(dialogs[1].props("open")).toBe(true);
-    expect(dialogs[1].props("primaryButtonVariant")).toBe("ghost-warning");
-    expect(dialogs[1].props("size")).toBe("xs");
-  });
-
-  it("clicking primary on cancel training dialog triggers cancelTraining", async () => {
-    const w = await mountComp();
-    await flushPromises();
-    (w.vm as any).confirmCancelTraining(mockConfigs[1]);
-    await flushPromises();
-    const dialogs = w.findAllComponents(ODialogStub);
-    await dialogs[1].vm.$emit("click:primary");
-    await flushPromises();
-    expect(anomalyDetectionService.cancelTraining).toHaveBeenCalledWith("default", "id-2");
-  });
-
-  it("clicking secondary on cancel training dialog closes the dialog", async () => {
-    const w = await mountComp();
-    await flushPromises();
-    (w.vm as any).confirmCancelTraining(mockConfigs[1]);
-    await flushPromises();
-    const dialogs = w.findAllComponents(ODialogStub);
-    await dialogs[1].vm.$emit("click:secondary");
-    await flushPromises();
-    expect((w.vm as any).showCancelTrainingDialog).toBe(false);
-  });
-
-  it("cancelTraining calls cancelTraining service", async () => {
-    const w = await mountComp();
-    await flushPromises();
-    (w.vm as any).pendingCancelRow = mockConfigs[1];
-    await (w.vm as any).cancelTraining();
-    await flushPromises();
-    expect(anomalyDetectionService.cancelTraining).toHaveBeenCalledWith("default", "id-2");
-  });
-
-  it("cancelTraining closes dialog after success", async () => {
-    const w = await mountComp();
-    await flushPromises();
-    (w.vm as any).pendingCancelRow = mockConfigs[1];
-    (w.vm as any).showCancelTrainingDialog = true;
-    await (w.vm as any).cancelTraining();
-    await flushPromises();
-    expect((w.vm as any).showCancelTrainingDialog).toBe(false);
-  });
-
-  it("cancelTraining does nothing when pendingCancelRow is null", async () => {
-    const w = await mountComp();
-    await flushPromises();
-    (w.vm as any).pendingCancelRow = null;
-    await (w.vm as any).cancelTraining();
-    await flushPromises();
-    expect(anomalyDetectionService.cancelTraining).not.toHaveBeenCalled();
-  });
-});
-
-describe("AnomalyDetectionList - toggleEnabled", () => {
-  beforeEach(() => vi.clearAllMocks());
-
-  it("calls toggleEnabled service with flipped enabled value", async () => {
-    const w = await mountComp();
-    await flushPromises();
-    const row = { ...mockConfigs[0], enabled: true };
-    await (w.vm as any).toggleEnabled(row);
-    await flushPromises();
-    expect(anomalyDetectionService.toggleEnabled).toHaveBeenCalledWith(
-      "default",
-      "id-1",
-      false,
-    );
-  });
-});
-
-describe("AnomalyDetectionList - editConfig", () => {
-  it("calls router.push with editAnomalyDetection route", async () => {
-    const mockPush = vi.fn();
-    vi.doMock("vue-router", () => ({
-      useRouter: () => ({ push: mockPush }),
-      useRoute: () => ({ params: {}, query: {} }),
-    }));
-    const w = await mountComp();
-    await flushPromises();
-    (w.vm as any).editConfig(mockConfigs[0]);
-    // router.push is called (we check it was called at least from component's router instance)
-    expect(w.exists()).toBe(true);
-  });
-});
-
-describe("AnomalyDetectionList - manual refresh", () => {
-  beforeEach(() => vi.clearAllMocks());
-
-  it("does not auto-poll — advancing 30s timer does not call service again", async () => {
-    vi.useFakeTimers();
-    const w = await mountComp();
-    await flushPromises();
-    vi.clearAllMocks();
-    vi.advanceTimersByTime(30_000);
-    await flushPromises();
-    expect(anomalyDetectionService.list).not.toHaveBeenCalled();
-    w.unmount();
-    vi.useRealTimers();
-  });
-
-  it("refresh button calls loadConfigs when clicked", async () => {
-    const w = await mountComp();
-    await flushPromises();
-    vi.clearAllMocks();
-    await w.find('[data-test="anomaly-detection-list-refresh-btn"]').trigger("click");
-    await flushPromises();
-    expect(anomalyDetectionService.list).toHaveBeenCalledWith("default");
-  });
-});
diff --git a/web/src/components/anomaly_detection/AnomalyDetectionList.vue b/web/src/components/anomaly_detection/AnomalyDetectionList.vue
deleted file mode 100644
index 0d0191681d..0000000000
--- a/web/src/components/anomaly_detection/AnomalyDetectionList.vue
+++ /dev/null
@@ -1,471 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <div class="w-full h-full">
-    <!-- Toolbar: refresh -->
-    <div class="flex items-center justify-end px-2 py-2 gap-2">
-      <OTableColumnToggle
-        :columns="columns"
-        :column-visibility="columnVisibility"
-        @update:column-visibility="setColumnVisibility"
-      />
-      <OButton
-        variant="outline"
-        size="sm"
-        :loading="loading"
-        data-test="anomaly-detection-list-refresh-btn"
-        @click="loadConfigs"
-      >
-        <template #icon-left><OIcon name="refresh" size="sm" /></template>
-        {{ t('common.refresh') }}
-      </OButton>
-    </div>
-
-    <OTable
-      data-test="anomaly-detection-list-table"
-      :data="displayConfigs"
-      :columns="columns"
-      :column-visibility="columnVisibility"
-      row-key="anomaly_id"
-      :loading="loading"
-      pagination="client"
-      :page-size="20"
-      sorting="client"
-      filter-mode="client"
-      :default-columns="false"
-      :show-global-filter="false"
-      class="h-full"
-    >
-      <!-- Status column -->
-      <template #cell-status="{ row }">
-        <div class="flex items-center gap-2">
-          <OTag
-            type="anomalyStatus"
-            :value="row.enabled ? row.status : 'disabled'"
-            data-test="anomaly-detection-status-badge"
-          >
-            {{ statusLabel(row) }}
-            <OSpinner
-              v-if="row.status === 'training'"
-              size="xs"
-              class="ml-1"
-            />
-          </OTag>
-          <OTooltip v-if="row.status === 'failed'" :content="row.last_error || t('alerts.anomalyStatus.failed')" />
-        </div>
-      </template>
-
-      <!-- Look back window column -->
-      <template #cell-detection_window="{ row }">
-        <span v-if="row.detection_window_seconds">
-          {{ formatSeconds(row.detection_window_seconds) }}
-        </span>
-        <span v-else class="text-text-primary">—</span>
-      </template>
-
-      <!-- Last Triggered At column -->
-      <template #cell-last_triggered_at="{ row }">
-        <OTimeCell :value="row.last_detection_run" unit="us" empty-label="—" />
-      </template>
-
-      <!-- Last Anomaly Detected At column -->
-      <template #cell-last_anomaly_detected_at="{ row }">
-        <OTimeCell :value="row.last_anomaly_detected_at" unit="us" empty-label="—" />
-      </template>
-
-      <!-- Last Trained At column -->
-      <template #cell-last_trained_at="{ row }">
-        <OTimeCell :value="row.training_completed_at" unit="us" empty-label="—" />
-      </template>
-
-      <!-- Actions column -->
-      <template #cell-actions="{ row }">
-        <div class="flex items-center justify-center gap-1">
-          <!-- Edit -->
-          <OButton
-          icon-left="edit"
-          variant="ghost"
-          size="icon-sm"
-          :title="t('alerts.edit')"
-          data-row-action="edit"
-          @click="editConfig(row)"
-          />
-          <!-- Pause / Resume — hidden while training or failed -->
-          <OButton
-            v-if="row.status !== 'training' && row.status !== 'failed'"
-          :icon-left="row.enabled ? 'pause' : 'play-arrow'"
-          :variant="row.enabled ? 'ghost-destructive' : 'ghost-success'"
-          size="icon-sm"
-          :title="row.enabled ? 'Pause' : 'Resume'"
-          :data-row-action="row.enabled ? 'pause' : 'resume'"
-          @click="toggleEnabled(row)"
-          />
-          <!-- Stop Training — only shown while training -->
-          <OButton
-            v-if="row.status === 'training'"
-          icon-left="stop-circle"
-          variant="ghost-warning"
-          size="icon-sm"
-          title="Stop Training"
-          :loading="cancellingId === row.anomaly_id"
-          data-row-action="pause"
-          @click="confirmCancelTraining(row)"
-          />
-          <!-- Retrain / Retry -->
-          <OButton
-            v-if="row.is_trained || row.status === 'failed'"
-            :variant="row.status === 'failed' ? 'ghost-destructive' : 'ghost'"
-            size="icon-sm"
-            :title="row.status === 'failed' ? 'Retry Training' : t('alerts.triggerTraining')"
-            :loading="retrainingId === row.anomaly_id"
-            data-row-action="resume"
-            @click="confirmRetrain(row)"
-          >
-            <OIcon name="brain-circuit" size="sm" />
-          </OButton>
-          <!-- Delete -->
-          <OButton
-          icon-left="delete"
-          variant="ghost-destructive"
-          size="icon-sm"
-          :title="t('alerts.delete')"
-          data-row-action="delete"
-          @click="confirmDelete(row)"
-          />
-        </div>
-      </template>
-
-      <!-- Empty state -->
-      <template #empty>
-        <OEmptyState size="hero" preset="no-anomaly-configs" hide-action />
-      </template>
-    </OTable>
-
-    <!-- Confirm delete dialog -->
-    <ODialog data-test="anomaly-detection-list-delete-dialog"
-      v-model:open="showDeleteDialog"
-      persistent
-      size="xs"
-      :title="t('alerts.delete')"
-      :secondary-button-label="t('alerts.cancel')"
-      :primary-button-label="t('alerts.delete')"
-      primary-button-variant="destructive"
-      :primary-button-loading="deleting"
-      @click:secondary="showDeleteDialog = false"
-      @click:primary="deleteConfig"
-    >
-      <p>
-        Are you sure you want to delete
-        <strong>{{ pendingDeleteRow?.name }}</strong>?
-        This will also delete the trained model.
-      </p>
-    </ODialog>
-
-    <!-- Confirm cancel training dialog -->
-    <ODialog data-test="anomaly-detection-list-cancel-training-dialog"
-      v-model:open="showCancelTrainingDialog"
-      persistent
-      size="xs"
-      title="Stop Training"
-      :secondary-button-label="t('alerts.cancel')"
-      primary-button-label="Stop Training"
-      primary-button-variant="ghost-warning"
-      :primary-button-loading="cancellingId === pendingCancelRow?.anomaly_id"
-      @click:secondary="showCancelTrainingDialog = false"
-      @click:primary="cancelTraining"
-    >
-      <p>
-        Stop the ongoing training for <strong>{{ pendingCancelRow?.name }}</strong>?
-        The model will not be updated. You can retrigger training afterwards.
-      </p>
-    </ODialog>
-
-    <!-- Confirm retrain dialog -->
-    <ODialog data-test="anomaly-detection-list-retrain-dialog"
-      v-model:open="showRetrainDialog"
-      persistent
-      size="sm"
-      :title="pendingRetrainRow?.status === 'failed' ? 'Retry Training' : t('alerts.triggerTraining')"
-      :secondary-button-label="t('alerts.cancel')"
-      :primary-button-label="pendingRetrainRow?.status === 'failed' ? 'Retry Training' : t('alerts.triggerTraining')"
-      :primary-button-variant="pendingRetrainRow?.status === 'failed' ? 'destructive' : 'primary'"
-      :primary-button-loading="retrainingId === pendingRetrainRow?.anomaly_id"
-      @click:secondary="showRetrainDialog = false"
-      @click:primary="retrain"
-    >
-      <!-- Error detail for failed state -->
-      <template v-if="pendingRetrainRow?.status === 'failed' && pendingRetrainRow?.last_error">
-        <div class="text-sm mb-2">
-          Training failed for <strong>{{ pendingRetrainRow?.name }}</strong> with the following error:
-        </div>
-        <pre
-          class="text-xs whitespace-pre-wrap break-all rounded p-2 mb-2"
-          style="background: rgba(0,0,0,0.06); max-height: 120px; overflow-y: auto"
-        >{{ pendingRetrainRow.last_error }}</pre>
-        <div class="text-sm">Fix the issue above, then retry training.</div>
-      </template>
-      <template v-else-if="pendingRetrainRow?.status === 'failed'">
-        <p>Training failed for <strong>{{ pendingRetrainRow?.name }}</strong>. Retry training now?</p>
-      </template>
-      <template v-else>
-        <p>
-          Trigger retraining for
-          <strong>{{ pendingRetrainRow?.name }}</strong>?
-          The existing model will be replaced once training completes.
-        </p>
-        <div v-if="pendingRetrainRow?.training_completed_at" class="text-xs text-gray-400">
-          Last trained: {{ formatTimestamp(pendingRetrainRow.training_completed_at) }}
-        </div>
-      </template>
-    </ODialog>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref, computed, onMounted } from "vue";
-import { useRouter } from "vue-router";
-import { useI18n } from "vue-i18n";
-import anomalyDetectionService from "@/services/anomaly_detection";
-import { formatToISO } from "@/utils/date";
-import OButton from '@/lib/core/Button/OButton.vue';
-import ODialog from '@/lib/overlay/Dialog/ODialog.vue';
-import OIcon from "@/lib/core/Icon/OIcon.vue";
-import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
-import OSpinner from "@/lib/feedback/Spinner/OSpinner.vue";
-import OTag from "@/lib/core/Badge/OTag.vue";
-import OTable from "@/lib/core/Table/OTable.vue";
-import OTableColumnToggle from "@/lib/core/Table/sub-components/OTableColumnToggle.vue";
-import useExternalColumnToggle from "@/composables/useExternalColumnToggle";
-import OTimeCell from "@/lib/core/Table/cells/OTimeCell.vue";
-import OEmptyState from "@/lib/core/EmptyState/OEmptyState.vue";
-import type { OTableColumnDef } from "@/lib/core/Table/OTable.types";
-import { toast } from "@/lib/feedback/Toast/useToast";
-import { TABLE_INDEX_COL_SIZE, COL } from "@/lib/core/Table/OTable.types";
-
-export default defineComponent({
-  name: "AnomalyDetectionList",
-  components: { OTag, OButton, ODialog, OEmptyState, OIcon, OSpinner, OTable, OTableColumnToggle, OTimeCell, OTooltip },
-
-  props: {
-    org_identifier: {
-      type: String,
-      required: true,
-    },
-  },
-
-  setup(props) {
-    const router = useRouter();
-    const { t } = useI18n();
-
-    const loading = ref(false);
-    const configs = ref<any[]>([]);
-
-    const showDeleteDialog = ref(false);
-    const pendingDeleteRow = ref<any>(null);
-    const deleting = ref(false);
-
-    const showRetrainDialog = ref(false);
-    const pendingRetrainRow = ref<any>(null);
-    const retrainingId = ref<string | null>(null);
-
-    const showCancelTrainingDialog = ref(false);
-    const pendingCancelRow = ref<any>(null);
-    const cancellingId = ref<string | null>(null);
-
-    const { columnVisibility, setColumnVisibility } = useExternalColumnToggle(
-      "alerts-anomaly-detection-list",
-    );
-
-    const columns: OTableColumnDef[] = [
-      { id: "#", header: "#", accessorKey: "#", size: TABLE_INDEX_COL_SIZE, meta: { align: "left" } },
-      { id: "name", header: t("alerts.name"), accessorKey: "name", sortable: true, hideable: true, size: COL.name, meta: { align: "left", autoWidth: true } },
-      { id: "stream", header: "Stream", accessorKey: "stream_name", sortable: true, hideable: true, size: COL.streamName, meta: { align: "left" } },
-      { id: "status", header: "Status", accessorKey: "status", sortable: true, hideable: true, size: COL.status, meta: { align: "left" } },
-      { id: "detection_window", header: "Look back window", accessorKey: "detection_window_seconds", sortable: true, hideable: true, size: COL.duration, meta: { align: "left" } },
-      { id: "check_every", header: t("alerts.frequency"), accessorKey: "schedule_interval", sortable: true, hideable: true, size: COL.frequency, meta: { align: "left" } },
-      { id: "last_triggered_at", header: t("alerts.lastTriggered"), accessorKey: "last_detection_run", sortable: true, hideable: true, size: COL.date, meta: { align: "left" } },
-      { id: "last_anomaly_detected_at", header: t("alerts.lastSatisfied"), accessorKey: "last_anomaly_detected_at", sortable: true, hideable: true, size: COL.date, meta: { align: "left" } },
-      { id: "last_trained_at", header: "Last Trained At", accessorKey: "training_completed_at", sortable: true, hideable: true, size: COL.date, meta: { align: "left" } },
-      { id: "actions", header: t("alerts.actions"), isAction: true, size: 140, meta: { align: "center" } },
-    ];
-
-    const displayConfigs = computed(() =>
-      configs.value.map((c, i) => ({ ...c, "#": i + 1 }))
-    );
-
-    const statusLabel = (row: any) => {
-      if (!row.enabled) return t("alerts.anomalyStatus.disabled");
-      return t(`alerts.anomalyStatus.${row.status}`) || row.status;
-    };
-
-    const formatTimestamp = (ts: number) => {
-      // timestamps come back in microseconds
-      return formatToISO(ts);
-    };
-
-    const formatSeconds = (secs: number) => {
-      if (secs >= 3600) {
-        const h = Math.floor(secs / 3600);
-        const m = Math.round((secs % 3600) / 60);
-        return m === 0 ? `${h} Hours` : `${h} Hours ${m} Mins`;
-      }
-      return `${Math.round(secs / 60)} mins`;
-    };
-
-    const loadConfigs = async () => {
-      loading.value = true;
-      try {
-        const res = await anomalyDetectionService.list(props.org_identifier);
-        configs.value = res.data?.configs ?? res.data ?? [];
-      } catch {
-        toast({ variant: "error", message: "Failed to load anomaly detection configs." });
-      } finally {
-        loading.value = false;
-      }
-    };
-
-    const editConfig = (row: any) => {
-      router.push({
-        name: "editAnomalyDetection",
-        params: { anomaly_id: row.anomaly_id },
-        query: { org_identifier: props.org_identifier },
-      });
-    };
-
-    const toggleEnabled = async (row: any) => {
-      try {
-        await anomalyDetectionService.toggleEnabled(
-          props.org_identifier,
-          row.anomaly_id,
-          !row.enabled,
-        );
-        // Reload from server so the trigger status and timestamps are fresh.
-        await loadConfigs();
-      } catch {
-        toast({ variant: "error", message: "Failed to update config." });
-      }
-    };
-
-    const confirmDelete = (row: any) => {
-      pendingDeleteRow.value = row;
-      showDeleteDialog.value = true;
-    };
-
-    const deleteConfig = async () => {
-      if (!pendingDeleteRow.value) return;
-      deleting.value = true;
-      try {
-        await anomalyDetectionService.delete(
-          props.org_identifier,
-          pendingDeleteRow.value.anomaly_id,
-        );
-        configs.value = configs.value.filter(
-          (c) => c.anomaly_id !== pendingDeleteRow.value.anomaly_id,
-        );
-        showDeleteDialog.value = false;
-        toast({ variant: "success", message: "Anomaly detection config deleted." });
-      } catch {
-        toast({ variant: "error", message: "Failed to delete config." });
-      } finally {
-        deleting.value = false;
-      }
-    };
-
-    const confirmCancelTraining = (row: any) => {
-      pendingCancelRow.value = row;
-      showCancelTrainingDialog.value = true;
-    };
-
-    const cancelTraining = async () => {
-      if (!pendingCancelRow.value) return;
-      cancellingId.value = pendingCancelRow.value.anomaly_id;
-      try {
-        await anomalyDetectionService.cancelTraining(
-          props.org_identifier,
-          pendingCancelRow.value.anomaly_id,
-        );
-        showCancelTrainingDialog.value = false;
-        toast({ variant: "success", message: "Training cancelled. You can now retrigger it." });
-        await loadConfigs();
-      } catch {
-        toast({ variant: "error", message: "Failed to cancel training." });
-      } finally {
-        cancellingId.value = null;
-      }
-    };
-
-    const confirmRetrain = (row: any) => {
-      pendingRetrainRow.value = row;
-      showRetrainDialog.value = true;
-    };
-
-    const retrain = async () => {
-      if (!pendingRetrainRow.value) return;
-      retrainingId.value = pendingRetrainRow.value.anomaly_id;
-      try {
-        await anomalyDetectionService.triggerTraining(
-          props.org_identifier,
-          pendingRetrainRow.value.anomaly_id,
-        );
-        showRetrainDialog.value = false;
-        toast({ variant: "success", message: "Training started. Status will update shortly." });
-        // Refresh list to pick up status change
-        await loadConfigs();
-      } catch {
-        toast({ variant: "error", message: "Failed to trigger training." });
-      } finally {
-        retrainingId.value = null;
-      }
-    };
-
-    onMounted(() => {
-      loadConfigs();
-    });
-
-    return {
-      t,
-      loading,
-      configs,
-      displayConfigs,
-      columns,
-      columnVisibility,
-      setColumnVisibility,
-      showDeleteDialog,
-      pendingDeleteRow,
-      deleting,
-      showRetrainDialog,
-      pendingRetrainRow,
-      retrainingId,
-      showCancelTrainingDialog,
-      pendingCancelRow,
-      cancellingId,
-      confirmCancelTraining,
-      cancelTraining,
-      statusLabel,
-      formatTimestamp,
-      formatSeconds,
-      loadConfigs,
-      editConfig,
-      toggleEnabled,
-      confirmDelete,
-      deleteConfig,
-      confirmRetrain,
-      retrain,
-    };
-  },
-});
-</script>
diff --git a/web/src/components/anomaly_detection/AnomalySummary.vue b/web/src/components/anomaly_detection/AnomalySummary.vue
index a98a3a9698..f248702199 100644
--- a/web/src/components/anomaly_detection/AnomalySummary.vue
+++ b/web/src/components/anomaly_detection/AnomalySummary.vue
@@ -17,7 +17,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div class="h-full flex flex-col relative">
     <div
-      class="text-[0.8125rem] leading-[2.2] flex-1 overflow-y-auto p-4"
+      class="text-compact leading-[2.2] flex-1 overflow-y-auto p-4"
       ref="summaryContainer"
       @scroll="checkScrollState"
     >
@@ -35,7 +35,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <OButton
         variant="ghost"
         size="icon-sm"
-        class="pointer-events-auto backdrop-blur-sm shadow-[0_2px_8px_rgba(0,0,0,0.2)] !border-2 !border-[var(--o2-primary-color)] !text-[var(--o2-primary-color)] !bg-white/95 dark:!bg-[rgba(30,30,30,0.9)]"
+        class="pointer-events-auto backdrop-blur-sm shadow-[0_2px_8px_rgba(0,0,0,0.2)] !border-2 !border-accent !text-accent !bg-surface-overlay"
         data-test="anomaly-summary-scroll-btn"
         @click="scrollToBottom"
       >
@@ -93,46 +93,44 @@ onMounted(async () => {
 });
 </script>
 
-<style>
-/* Styles for bold section labels (v-html content with markdown **text**) */
-.summary-text strong {
+<style scoped>
+/* keep(generated-content): styles v-html output from anomalySummaryGenerator (no scope id) */
+.summary-text :deep(strong) {
   display: inline;
   font-weight: 700;
-  font-size: 0.875rem;
+  font-size: var(--text-sm);
 }
 
-/* Styles for clickable spans (v-html content) */
-.summary-text .summary-clickable {
+.summary-text :deep(.summary-clickable) {
   cursor: default;
-  color: var(--q-primary);
+  color: var(--color-theme-accent);
   font-weight: 600;
   padding: 0.125rem 0.375rem;
   margin: 0 0.125rem;
   border-radius: 0.25rem;
   background: linear-gradient(
     135deg,
-    color-mix(in srgb, var(--q-primary) 8%, transparent),
-    color-mix(in srgb, var(--q-primary) 12%, transparent)
+    color-mix(in srgb, var(--color-theme-accent) 8%, transparent),
+    color-mix(in srgb, var(--color-theme-accent) 12%, transparent)
   );
   display: inline;
   position: relative;
-  box-shadow: 0 0 0 0.0625rem color-mix(in srgb, var(--q-primary) 15%, transparent);
+  box-shadow: 0 0 0 0.0625rem color-mix(in srgb, var(--color-theme-accent) 15%, transparent);
   line-height: 1.6;
   vertical-align: baseline;
   white-space: nowrap;
 }
 
-/* Styles for plain English section */
-.summary-text .plain-english-section {
+.summary-text :deep(.plain-english-section) {
   padding: 0.75rem 1rem;
   border-radius: 0.375rem;
   background: linear-gradient(
     135deg,
-    color-mix(in srgb, var(--q-primary) 5%, transparent),
-    color-mix(in srgb, var(--q-primary) 8%, transparent)
+    color-mix(in srgb, var(--color-theme-accent) 5%, transparent),
+    color-mix(in srgb, var(--color-theme-accent) 8%, transparent)
   );
-  border-left: 0.1875rem solid var(--q-primary);
-  font-size: 0.875rem;
+  border-left: 0.1875rem solid var(--color-theme-accent);
+  font-size: var(--text-sm);
   line-height: 1.7;
   font-style: italic;
   opacity: 0.95;
diff --git a/web/src/components/anomaly_detection/steps/AnomalyAlerting.vue b/web/src/components/anomaly_detection/steps/AnomalyAlerting.vue
index becf9070bd..2860dba3c0 100644
--- a/web/src/components/anomaly_detection/steps/AnomalyAlerting.vue
+++ b/web/src/components/anomaly_detection/steps/AnomalyAlerting.vue
@@ -17,10 +17,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div
     class="step-anomaly-alerting h-full"
-    :class="store.state.theme === 'dark' ? 'dark-mode' : 'light-mode'"
   >
     <div
-      class="step-content px-3 py-4 rounded-lg h-full overflow-y-auto border bg-[var(--color-surface-overlay)] border-[var(--color-border-default)]"
+      class="step-content px-3 py-4 rounded-default h-full overflow-y-auto border bg-surface-overlay border-border-default"
     >
       <!-- Enable Notifications toggle -->
       <div class="flex items-start mb-6!  pb-0!">
@@ -32,7 +31,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <OIcon
             name="info"
             size="sm"
-            class="ml-1 cursor-pointer text-gray-400"
+            class="ml-1 cursor-pointer text-icon-color"
           >
             <OTooltip :content="t('alerts.anomaly.notificationsTooltip')" side="right" />
           </OIcon>
@@ -56,7 +55,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           style="width: 190px; height: 36px"
         >
           {{ t("alerts.destination") }}
-          <span class="text-red-500 ml-1">*</span>
+          <span class="text-status-error-text ml-1">*</span>
         </div>
         <div class="flex flex-col">
           <div class="flex items-center">
@@ -93,7 +92,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     index === visibleChipCount &&
                     config.alert_destination_ids.length > visibleChipCount
                   "
-                  class="text-[13px] text-gray-500 ml-1 whitespace-nowrap"
+                  class="text-compact text-text-secondary ml-1 whitespace-nowrap"
                 >
                   +{{ config.alert_destination_ids.length - visibleChipCount }}
                 </span>
@@ -135,7 +134,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <div
         v-if="!config.alert_enabled"
         class="flex items-start gap-2 text-xs mt-2"
-        :class="store.state.theme === 'dark' ? 'text-gray-400' : 'text-gray-400'"
+        :class="'text-text-secondary'"
       >
         <OIcon name="info" size="sm"
 class="mt-px flex-shrink-0" />
diff --git a/web/src/components/anomaly_detection/steps/AnomalyDetectionConfig.schema.ts b/web/src/components/anomaly_detection/steps/AnomalyDetectionConfig.schema.ts
index fa2436c163..c11d93996c 100644
--- a/web/src/components/anomaly_detection/steps/AnomalyDetectionConfig.schema.ts
+++ b/web/src/components/anomaly_detection/steps/AnomalyDetectionConfig.schema.ts
@@ -16,35 +16,24 @@
 // Validation schema for AnomalyDetectionConfig.vue (the "Detection Config" step
 // of the anomaly-detection wizard inside AddAlert).
 //
-// Mode-conditional rules live in the `superRefine` keyed on `query_mode`
-// (START-HERE Rule ④ / brief §4):
-// - custom_sql mode: `custom_sql` required (bare-Monaco value bridged into the
-//   form via form.setFieldValue — the sanctioned Rule-② bridge) + the
-//   timestamp-column alias ban (kept from the live hand-rolled validate()).
-// - filters mode: `detection_function` required (**§4 RESTORE** — the original
-//   Quasar rule `!!v || 'Detection function is required'` was silently dropped)
-//   and `detection_function_field` required when the function is not `count`
-//   (kept from the live validate()).
+// Mode-conditional rules live in the `superRefine` keyed on `query_mode`:
+// - custom_sql mode: `custom_sql` required + the timestamp-column alias ban.
+// - filters mode: `detection_function` required, and `detection_function_field`
+//   required when the function is not `count`.
 //
-// Base (both modes — these controls render in BOTH query modes, so their rules
-// apply in both; that matches the pre-O-migration Quasar rules which sat on the
-// always-rendered inputs):
-// - histogram/schedule/detection-window interval values ≥ 1 (kept from the live
-//   validate() + inline "Field is required!" divs).
-// - `training_window_days` ≥ 1 (**§4 RESTORE** — original Quasar rule
-//   `v >= 1 || 'Minimum 1 day'` was dropped; only the HTML min=1 remained).
-// - `retrain_interval_days` / units / filter rows carry NO value rules — the
-//   live form never validated them (Rule ④: no added/tightened rules).
+// Base rules (both modes — these controls render in BOTH query modes):
+// - histogram/schedule/detection-window interval values ≥ 1.
+// - `training_window_days` ≥ 1.
+// - `retrain_interval_days` / units / filter rows carry NO value rules.
 //
-// Number inputs come out of OFormInput as STRINGS → `z.coerce.number()`
-// (per the playbook §2 recipe; the component's write-back to props.config
-// re-coerces so the parent payload keeps number types).
+// Number inputs come out of OFormInput as STRINGS → `z.coerce.number()`; the
+// component's write-back to props.config re-coerces so the parent payload keeps
+// number types.
 
 import { z } from "zod";
 
-/** One row of the filters[] field-array (Rule ① — indexed names, `:key` = index).
- * No per-field rules: the pre-migration form never validated filter rows
- * (incomplete rows are simply skipped when the SQL is built). */
+/** One row of the filters[] field-array. No per-field rules — incomplete rows
+ * are simply skipped when the SQL is built. */
 export const anomalyFilterRowSchema = z.object({
   field: z.string(),
   operator: z.string(),
@@ -53,7 +42,7 @@ export const anomalyFilterRowSchema = z.object({
 
 export type AnomalyFilterRow = z.infer<typeof anomalyFilterRowSchema>;
 
-/** Factory for a blank filter row (same shape the old addFilter() pushed). */
+/** Factory for a blank filter row. */
 export const makeAnomalyFilterRow = (): AnomalyFilterRow => ({
   field: "",
   operator: "=",
@@ -62,16 +51,15 @@ export const makeAnomalyFilterRow = (): AnomalyFilterRow => ({
 
 /** i18n translator injected by the component: `(key, namedParams?) => string`.
  *  Validation messages resolve through this against the `alerts.validation.*`
- *  (and `alerts.anomaly.sqlRequired`) locale keys — English values are
- *  byte-for-byte the pre-migration strings (parity). */
+ *  (and `alerts.anomaly.sqlRequired`) locale keys. */
 type Translator = (key: string, named?: Record<string, unknown>) => string;
 
 const makeAnomalyDetectionConfigBase = (t: Translator) =>
   z.object({
     query_mode: z.enum(["filters", "custom_sql"]),
     filters: z.array(anomalyFilterRowSchema),
-    // Bare-Monaco value, bridged in via form.setFieldValue (Rule ② sanctioned
-    // bridge). Required-ness is mode-conditional → superRefine below.
+    // Bare-Monaco value, bridged in via form.setFieldValue. Required-ness is
+    // mode-conditional → superRefine below.
     custom_sql: z.string(),
     // Required-ness is mode-conditional (filters mode only) → superRefine below.
     detection_function: z.string(),
@@ -88,14 +76,12 @@ const makeAnomalyDetectionConfigBase = (t: Translator) =>
       .number()
       .min(1, t("alerts.validation.fieldRequired")),
     detection_window_unit: z.string(),
-    // §4 RESTORE — original Quasar rule: v >= 1 || 'Minimum 1 day'.
     training_window_days: z.coerce
       .number()
       .min(1, t("alerts.validation.minimumOneDay")),
-    // Never validated pre-migration (fixed OSelect options) — type-only.
+    // Type-only (fixed OSelect options).
     retrain_interval_days: z.coerce.number(),
     // ORange dual-handle value; written back to config.threshold_min/threshold.
-    // Never validated pre-migration — type-only.
     threshold_range: z.object({ min: z.coerce.number(), max: z.coerce.number() }),
   });
 
@@ -104,8 +90,7 @@ export type AnomalyDetectionConfigForm = z.infer<
 >;
 
 /** True when the SQL aliases a column as the timestamp column (banned — the
- * anomaly query must alias its time column as `time_bucket`). Same regex the
- * live component used. */
+ * anomaly query must alias its time column as `time_bucket`). */
 export const hasTimestampAliasInSql = (
   sql: string,
   timestampColumn: string,
@@ -129,7 +114,7 @@ export const createAnomalyDetectionConfigSchema = (
 ) =>
   makeAnomalyDetectionConfigBase(t).superRefine((value, ctx) => {
     if (value.query_mode === "custom_sql") {
-      // Kept from the live validate(): SQL required in custom SQL mode.
+      // SQL required in custom SQL mode.
       if (!value.custom_sql || !value.custom_sql.trim()) {
         ctx.addIssue({
           code: z.ZodIssueCode.custom,
@@ -139,7 +124,7 @@ export const createAnomalyDetectionConfigSchema = (
       } else if (
         hasTimestampAliasInSql(value.custom_sql, getTimestampColumn())
       ) {
-        // Kept from the live validate(): timestamp column can't be an alias.
+        // Timestamp column can't be an alias.
         ctx.addIssue({
           code: z.ZodIssueCode.custom,
           path: ["custom_sql"],
@@ -151,7 +136,7 @@ export const createAnomalyDetectionConfigSchema = (
     }
 
     if (value.query_mode === "filters") {
-      // §4 RESTORE — required, only where the control renders (filters mode).
+      // Required, only where the control renders (filters mode).
       if (!value.detection_function) {
         ctx.addIssue({
           code: z.ZodIssueCode.custom,
@@ -162,8 +147,6 @@ export const createAnomalyDetectionConfigSchema = (
         value.detection_function !== "count" &&
         !value.detection_function_field
       ) {
-        // Kept from the live validate() (which blocked silently); message from
-        // the pre-O-migration Quasar rule `!!v || 'Field is required'`.
         ctx.addIssue({
           code: z.ZodIssueCode.custom,
           path: ["detection_function_field"],
@@ -175,11 +158,9 @@ export const createAnomalyDetectionConfigSchema = (
 
 /**
  * Typed defaults, projected from the parent-owned config object
- * (useAlertForm's `anomalyConfig` — passed in as props.config). Dynamic/edit
- * prefill → typed factory over the runtime record, NOT an inline literal.
- * The parent replaces the whole config object on async edit-load; the
- * component re-seeds via form.reset(anomalyDetectionConfigDefaults(cfg)).
- * Fallbacks mirror useAlertForm's defaultAnomalyConfig().
+ * (useAlertForm's `anomalyConfig` — passed in as props.config). The parent
+ * replaces the whole config object on async edit-load; the component re-seeds
+ * via form.reset(anomalyDetectionConfigDefaults(cfg)).
  */
 export const anomalyDetectionConfigDefaults = (
   cfg: Record<string, any> | null | undefined,
diff --git a/web/src/components/anomaly_detection/steps/AnomalyDetectionConfig.vue b/web/src/components/anomaly_detection/steps/AnomalyDetectionConfig.vue
index b0a9de4c00..e785ef5a71 100644
--- a/web/src/components/anomaly_detection/steps/AnomalyDetectionConfig.vue
+++ b/web/src/components/anomaly_detection/steps/AnomalyDetectionConfig.vue
@@ -14,34 +14,12 @@ You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
-<!--
-  OForm migration (Rule ③ OWNER pattern): this step OWNS its <OForm> and needs
-  form state (query_mode) for parent-side conditional rendering, so the form is
-  created in setup() with useOForm({ defaultValues, schema, onSubmit }) and
-  handed down via <OForm :form="form">; all reads go through form.useStore.
-
-  Egress (OPEN DESIGN DECISION 4): the parent (useAlertForm) reads props.config
-  DIRECTLY — continuously (anomalyPreviewSql computed, AnomalySummary) and at
-  save time (saveAnomalyDetection builds the payload from anomalyConfig).
-  Emit-based egress would require rewiring AddAlert.vue/useAlertForm.ts (out of
-  scope for this step migration), so this uses the documented WRITE-BACK deep
-  watch (form → props.config) — egress only, never the banned into-form mirror.
-  Ingress is form.reset(defaults(config)) when the parent REPLACES the config
-  object (async edit-prefill).
-
-  custom_sql stays bare Monaco (sanctioned Rule-② exception) and is bridged
-  into the form via form.setFieldValue from the editor's own change handler;
-  its bare error divs are gated on showSqlErrors (submissionAttempts > 0) so
-  nothing renders pre-submit (R3).
--->
-
 <template>
   <div
     class="step-anomaly-config h-full"
-    :class="store.state.theme === 'dark' ? 'dark-mode' : 'light-mode'"
   >
     <div
-      class="step-content px-3 py-4 rounded-lg h-full overflow-y-auto overflow-x-hidden bg-[var(--color-surface-overlay)] border border-[var(--color-border-default)]"
+      class="step-content px-3 py-4 rounded-default h-full overflow-y-auto overflow-x-hidden bg-surface-overlay border border-border-default"
     >
       <OForm :form="form">
         <!-- Query Mode Tabs -->
@@ -70,9 +48,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             {{ t("alerts.anomaly.filters") }}
           </div>
           <div style="width: calc(100% - 190px)">
-            <!-- 🔑 Rule ① field-array: indexed names + :key = array INDEX (the
-                 fields bind by index-based name and do not re-bind, so a
-                 stable-id key would leave inputs shifted on a mid-list delete). -->
+            <!-- :key must be the array INDEX — the fields bind by index-based
+                 name and do not re-bind, so a stable-id key would leave inputs
+                 shifted on a mid-list delete. -->
             <div
               v-for="(filter, idx) in filterRows"
               :key="idx"
@@ -138,21 +116,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             class="font-semibold flex items-center"
             style="width: 190px; height: 36px"
           >
-            SQL <span class="text-red-500 ml-1">*</span>
+            SQL <span class="text-status-error-text ml-1">*</span>
           </div>
           <div style="width: calc(100% - 190px)">
             <div
-              class="custom-sql-editor-wrapper h-[140px] rounded overflow-hidden border"
-              :class="
-                hasSqlError
-                  ? 'border-input-border-error'
-                  : store.state.theme === 'dark'
-                    ? 'border-white/18'
-                    : 'border-black/12'
-              "
+              class="custom-sql-editor-wrapper h-35 rounded-default overflow-hidden border"
+              :class="hasSqlError ? 'border-input-border-error' : 'border-border-default'"
             >
-              <!-- Bare Monaco (sanctioned): value bridged into the form from
-                   the editor's own change handler so the schema covers it. -->
+              <!-- Bare Monaco: value bridged into the form from the editor's
+                   own change handler so the schema covers it. -->
               <QueryEditor
                 data-test-prefix="anomaly-custom-sql"
                 :query="customSql || ''"
@@ -169,13 +141,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 @update:query="onCustomSqlChange"
               />
             </div>
-            <!-- Bare-editor errors: submission-gated (R3 — nothing pre-submit).
-                 `custom_sql` is a bare editor bridged in via setFieldValue with no
-                 name= binding, so the schema's issue has no field to route to and
-                 THIS div is the only surface. It must therefore mirror the schema's
-                 condition exactly — schema rejects on `!custom_sql.trim()`, so a
-                 whitespace-only query must light this up too. Gating on `!customSql`
-                 alone let " " reject the save while rendering nothing at all. -->
+            <!-- `custom_sql` is a bare editor bridged in via setFieldValue with
+                 no name= binding, so the schema's issue has no field to route to
+                 and THIS div is the only surface. It must mirror the schema's
+                 condition exactly — the schema rejects on `!custom_sql.trim()`,
+                 so a whitespace-only query must light this up too. -->
             <div
               v-if="showSqlErrors && !customSql?.trim()"
               class="text-xs text-input-error-text pt-1"
@@ -188,10 +158,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               class="text-xs text-input-error-text pt-1"
               data-test="anomaly-custom-sql-timestamp-alias-error"
             >
-              <!-- The literal `<code>` spans are why this can't reuse
-                   alerts.validation.timestampAliasBanned (which bakes
-                   `time_bucket` into its text): the slotted variant needs both
-                   the column AND time_bucket as params. Same rendered English. -->
+              <!-- Can't reuse alerts.validation.timestampAliasBanned (which
+                   bakes `time_bucket` into its text): the slotted variant needs
+                   both the column AND time_bucket as params. -->
               <i18n-t keypath="alerts.anomaly.timestampAliasBanned" tag="span">
                 <template #column>
                   <code>{{
@@ -204,7 +173,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <div
               class="text-xs mt-1"
               :class="
-                store.state.theme === 'dark' ? 'text-gray-400' : 'text-gray-400'
+                'text-text-secondary'
               "
             >
               <i18n-t keypath="alerts.anomaly.sqlColumnsHint" tag="span">
@@ -222,15 +191,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         >
           <!-- Detection Function -->
           <div class="flex flex-row items-start gap-2">
-            <div class="w-[170px] min-w-[170px] min-h-8 leading-[1.4] text-[length:inherit] font-semibold">
+            <div class="w-42.5 min-w-42.5 min-h-8 leading-[1.4] text-[length:inherit] font-semibold">
               {{ t("alerts.detectionFunction") }}
-              <span class="text-red-500 ml-1">*</span>
+              <span class="text-status-error-text ml-1">*</span>
             </div>
             <!-- items-start, not items-center: the field select renders its
                  validation message inside its own column (OSelect's root is
                  flex-col), so on error that column grows and centering would
-                 shove the function select down out of line with it. Matches the
-                 "Alert if" rows in QueryConfig.vue. -->
+                 shove the function select down out of line with it. -->
             <div class="flex items-start gap-2">
               <OFormSelect
                 name="detection_function"
@@ -268,13 +236,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </div>
           <!-- Detection Resolution -->
           <div class="flex flex-row items-start gap-2">
-            <div class="w-[170px] min-w-[170px] min-h-8 leading-[1.4] text-[length:inherit] font-semibold">
+            <div class="w-42.5 min-w-42.5 min-h-8 leading-[1.4] text-[length:inherit] font-semibold">
               {{ t("alerts.anomaly.detectionResolution") }}
-              <span class="text-red-500 ml-1">*</span>
+              <span class="text-status-error-text ml-1">*</span>
               <OIcon
                 name="info"
                 size="sm"
-                class="ml-1 cursor-pointer text-gray-400"
+                class="ml-1 cursor-pointer text-icon-color"
               >
                 <OTooltip
                   side="right"
@@ -326,11 +294,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             style="width: 190px; height: 36px"
           >
             {{ t("alerts.anomaly.detectionResolution") }}
-            <span class="text-red-500 ml-1">*</span>
+            <span class="text-status-error-text ml-1">*</span>
             <OIcon
               name="info"
               size="sm"
-              class="ml-1 cursor-pointer text-gray-400"
+              class="ml-1 cursor-pointer text-icon-color"
             >
               <OTooltip
                 side="right"
@@ -378,13 +346,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <div class="grid grid-cols-2 gap-3 items-start mb-4! pb-0!">
           <!-- Check Every -->
           <div class="flex flex-row items-start gap-2">
-            <div class="w-[170px] min-w-[170px] min-h-8 leading-[1.4] text-[length:inherit] font-semibold">
+            <div class="w-42.5 min-w-42.5 min-h-8 leading-[1.4] text-[length:inherit] font-semibold">
               {{ t("alerts.anomaly.checkEvery") }}
-              <span class="text-red-500 ml-1">*</span>
+              <span class="text-status-error-text ml-1">*</span>
               <OIcon
                 name="info"
                 size="sm"
-                class="ml-1 cursor-pointer text-gray-400"
+                class="ml-1 cursor-pointer text-icon-color"
               >
                 <OTooltip
                   side="right"
@@ -429,13 +397,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </div>
           <!-- Look Back Window -->
           <div class="flex flex-row items-start gap-2">
-            <div class="w-[170px] min-w-[170px] min-h-8 leading-[1.4] text-[length:inherit] font-semibold">
+            <div class="w-42.5 min-w-42.5 min-h-8 leading-[1.4] text-[length:inherit] font-semibold">
               {{ t("alerts.anomaly.lookBackWindow") }}
-              <span class="text-red-500 ml-1">*</span>
+              <span class="text-status-error-text ml-1">*</span>
               <OIcon
                 name="info"
                 size="sm"
-                class="ml-1 cursor-pointer text-gray-400"
+                class="ml-1 cursor-pointer text-icon-color"
               >
                 <OTooltip
                   side="right"
@@ -468,10 +436,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   data-test="anomaly-detection-window-unit"
                 />
               </div>
-              <!-- Keeps the pre-migration e2e data-test (never delete a
-                   data-test). It used to duplicate the OFormInput's own inline
-                   message with a hand-rolled copy; now it IS the single message
-                   for this field, reading the same R3-timed schema error. -->
+              <!-- This is the single error message for this field. -->
               <div
                 v-if="detectionWindowError"
                 class="text-xs text-input-error-text pt-1"
@@ -488,18 +453,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <div class="grid grid-cols-2 gap-3 items-start mb-4! pb-0!">
           <!-- Training Window -->
           <div class="flex flex-row items-start gap-2">
-            <div class="w-[170px] min-w-[170px] min-h-8 leading-[1.4] text-[length:inherit] font-semibold">
+            <div class="w-42.5 min-w-42.5 min-h-8 leading-[1.4] text-[length:inherit] font-semibold">
               {{ t("alerts.trainingWindow") }}
-              <span class="text-red-500 ml-1">*</span>
+              <span class="text-status-error-text ml-1">*</span>
               <OIcon
                 name="info"
                 size="sm"
-                class="ml-1 cursor-pointer text-gray-400"
+                class="ml-1 cursor-pointer text-icon-color"
               >
                 <OTooltip side="right" align="center" max-width="300px">
-                  <!-- Kept as a #content slot (not :content) so the 14px span
-                       survives; only the text moves to i18n. -->
-                  <template #content><span style="font-size: 14px">{{
+                  <!-- Uses a #content slot (not :content) so the font-size
+                       span survives. -->
+                  <template #content><span style="font-size: var(--text-sm)">{{
                     t("alerts.anomaly.trainingWindowTooltip")
                   }}</span></template>
                 </OTooltip>
@@ -517,7 +482,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <span
                 class="static-text text-xs"
                 :class="
-                  store.state.theme === 'dark' ? 'text-gray-400' : 'text-gray-400'
+                  'text-text-secondary'
                 "
               >
                 {{
@@ -533,12 +498,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </div>
           <!-- Retrain Every -->
           <div class="flex flex-row items-start gap-2">
-            <div class="w-[170px] min-w-[170px] min-h-8 leading-[1.4] text-[length:inherit] font-semibold">
+            <div class="w-42.5 min-w-42.5 min-h-8 leading-[1.4] text-[length:inherit] font-semibold">
               {{ t("alerts.anomaly.retrainEvery") }}
               <OIcon
                 name="info"
                 size="sm"
-                class="ml-1 cursor-pointer text-gray-400"
+                class="ml-1 cursor-pointer text-icon-color"
               >
                 <OTooltip
                   side="right"
@@ -563,14 +528,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- Threshold / Sensitivity -->
         <div class="flex items-start mb-4! pb-0!">
           <div
-            class="font-semibold flex items-center"
-            style="width: 190px; padding-top: 4px"
+            class="font-semibold flex items-center pt-1"
+            style="width: 190px"
           >
             {{ t("alerts.sensitivity") }}
             <OIcon
               name="info"
               size="sm"
-              class="ml-1 cursor-pointer text-gray-400"
+              class="ml-1 cursor-pointer text-icon-color"
             >
                 <OTooltip
                   side="right"
@@ -586,7 +551,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <!-- Header row: range labels + load button -->
               <div class="flex items-center justify-between mb-2">
                 <div class="flex items-center gap-2">
-                  <span class="text-xs text-gray-400">{{
+                  <span class="text-xs text-text-secondary">{{
                     t("alerts.anomaly.anomalyScoreRange")
                   }}</span>
                   <span
@@ -621,11 +586,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <div class="min-h-45 relative flex-1">
                   <div
                     v-if="!previewActive"
-                    class="w-full h-45 flex flex-col items-center justify-center rounded border border-dashed border-(--o2-border)"
+                    class="w-full h-45 flex flex-col items-center justify-center rounded-default border border-dashed border-border-default"
                     :class="
-                      store.state.theme === 'dark'
-                        ? 'text-gray-400'
-                        : 'text-gray-400'
+                      'text-text-secondary'
                     "
                     data-test="anomaly-sensitivity-empty"
                   >
@@ -648,7 +611,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     :variablesData="{}"
                     :forceLoad="true"
                     searchType="ui"
-                    style="height: 180px; width: 100%"
+                    class="w-full"
+                    style="height: 180px"
                     data-test="anomaly-sensitivity-chart"
                     @series-data-update="onSeriesDataUpdate"
                   />
@@ -674,7 +638,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       { value: 75, label: '75' },
                       { value: 100, label: '100' },
                     ]"
-                    class="sensitivity-range-slider mt-[14px] h-[145px]! [--color-slider-track-fill:var(--o2-primary-color)] [--color-slider-thumb:var(--o2-primary-color)] [--color-slider-thumb-border:white] [--color-slider-value:var(--o2-text-secondary)]"
+                    class="sensitivity-range-slider mt-3.5 h-36.25! [--color-slider-track-fill:var(--color-accent)] [--color-slider-thumb:var(--color-accent)] [--color-slider-thumb-border:white] [--color-slider-value:var(--color-text-secondary)]"
                     data-test="anomaly-threshold-range"
                   />
                 </div>
@@ -781,7 +745,6 @@ export default defineComponent({
     const getTimestampColumn = () =>
       store.state.zoConfig.timestamp_column || "_timestamp";
 
-    // ── The form (Rule ③ OWNER pattern) ────────────────────────────────────
     // The parent (useAlertForm.saveAnomalyDetection) owns the save + payload;
     // this step's submit exists purely to run the schema (the exposed
     // validate() drives form.handleSubmit()), so onSubmit is a no-op.
@@ -794,7 +757,7 @@ export default defineComponent({
       onSubmit: () => {},
     });
 
-    // Reactive reads — form.useStore, never a mirror (Rule ③).
+    // Reactive reads via form.useStore.
     const queryMode = form.useStore((s: any) => s.values.query_mode);
     const customSql = form.useStore((s: any) => s.values.custom_sql);
     const filterRows = form.useStore((s: any) => s.values.filters ?? []);
@@ -819,8 +782,8 @@ export default defineComponent({
     const thresholdRange = form.useStore(
       (s: any) => s.values.threshold_range ?? { min: 0, max: 100 },
     );
-    // Bare-widget errors (Monaco custom_sql + the kept data-test div) render
-    // only after the first submit attempt — R3, same timing as the wrappers.
+    // Bare-widget errors (Monaco custom_sql + the data-test div) render only
+    // after the first submit attempt, same timing as the wrappers.
     const showSqlErrors = form.useStore(
       (s: any) => s.submissionAttempts > 0,
     );
@@ -828,11 +791,9 @@ export default defineComponent({
     // The interval controls are composite "number + unit" fields: a ~5.5rem
     // OFormInput glued to a unit OFormSelect. OFormInput renders its message
     // INSIDE the number field's own width, which wraps it into a ragged column
-    // and grows the field, pushing the unit select out of line. Same fix as
-    // ScheduledPipeline's composite fields: an empty #error slot suppresses the
-    // built-in message and we render it in a full-width sibling below the pair.
-    // These read the same R3-timed field errors OFormInput would have surfaced —
-    // single source of truth, just displayed at column width.
+    // and grows the field, pushing the unit select out of line. An empty #error
+    // slot suppresses the built-in message and we render it in a full-width
+    // sibling below the pair, reading the same field errors OFormInput surfaces.
     const fieldError = (path: string) =>
       form.useStore((s: any) =>
         firstFieldError(s.fieldMeta?.[path]?.errors ?? []),
@@ -841,14 +802,10 @@ export default defineComponent({
     const scheduleIntervalError = fieldError("schedule_interval_value");
     const detectionWindowError = fieldError("detection_window_value");
 
-    // ── Egress: write-back deep watch (form → props.config) ────────────────
-    // OPEN DESIGN DECISION 4: the parent reads props.config directly (live
-    // anomalyPreviewSql computed + saveAnomalyDetection payload), and AddAlert/
-    // useAlertForm are out of scope to rewire — so the form writes back into
-    // the parent-owned object. This is EGRESS ONLY (the banned pattern is a
-    // watch→setFieldValue mirror INTO the form). Numeric fields are re-coerced
-    // so the parent payload keeps number types (the old template used
-    // v-model.number).
+    // Write-back watch (form → props.config): the parent reads props.config
+    // directly (live anomalyPreviewSql computed + saveAnomalyDetection payload),
+    // so the form writes back into the parent-owned object. Numeric fields are
+    // re-coerced so the parent payload keeps number types.
     const toModelNumber = (v: unknown) => {
       if (v === "" || v === null || v === undefined) return v;
       const n = Number(v);
@@ -888,10 +845,8 @@ export default defineComponent({
       { deep: true },
     );
 
-    // ── Ingress: async edit-prefill replaces the whole config object ───────
-    // (useAlertForm: `anomalyConfig.value = { ...defaultAnomalyConfig(), ...data }`)
-    // → re-seed via form.reset(record). NEVER a per-field setFieldValue loop,
-    // and NEVER a deep watch INTO the form.
+    // Async edit-prefill replaces the whole config object → re-seed via
+    // form.reset(record).
     watch(
       () => props.config,
       (cfg) => {
@@ -907,12 +862,9 @@ export default defineComponent({
         hasTimestampAliasInSql(customSql.value || "", getTimestampColumn()),
     );
 
-    // Bare Monaco has no field binding, so it never gets the red border OForm*
-    // wrappers paint from field state. Without it a rejected save highlighted
-    // nothing: the two error divs below the editor were the only surface, and
-    // they sit directly above a same-size hint line, so they read as more hint
-    // text. Mirror the wrappers' R3 timing (post-submit only) over the same
-    // conditions those two divs render on.
+    // Bare Monaco has no field binding, so it never gets the red border the
+    // OForm* wrappers paint from field state. This drives that border, post-
+    // submit only, over the same conditions the two error divs render on.
     const hasSqlError = computed(
       () =>
         showSqlErrors.value &&
@@ -920,7 +872,7 @@ export default defineComponent({
     );
 
     // Bridge the bare Monaco editor's value into the form so the schema
-    // covers it (the ONLY sanctioned setFieldValue bridge — Rule ②).
+    // covers it.
     const onCustomSqlChange = (sql: string) => {
       form.setFieldValue("custom_sql", sql);
     };
@@ -1104,7 +1056,7 @@ export default defineComponent({
       );
     });
 
-    // Structural mutations go through the form (Rule ① — the single source).
+    // Structural mutations go through the form.
     const addFilter = () => {
       form.pushFieldValue("filters", makeAnomalyFilterRow());
     };
@@ -1114,12 +1066,9 @@ export default defineComponent({
     };
 
     // The parent (AddAlert wizard via useAlertForm) still calls
-    // anomalyStep2Ref.validate() to gate Next/Save — keep that surface, but
-    // drive it through form.handleSubmit() (runs the schema — never TanStack
-    // formRef.validate(), which skips form-level validators — and flips
-    // submissionAttempts so the post-submit errors render).
-    // Orchestrator-phase hand-off: when AddAlert (row 3) is migrated, replace
-    // this parent-calls-child validate() with aggregated child-form validity.
+    // anomalyStep2Ref.validate() to gate Next/Save — drive it through
+    // form.handleSubmit() so it runs the schema and flips submissionAttempts
+    // so the post-submit errors render.
     const validate = async (): Promise<boolean> => {
       await form.handleSubmit();
       return form.state.isValid;
diff --git a/web/src/components/cipherkeys/AddAkeylessType.vue b/web/src/components/cipherkeys/AddAkeylessType.vue
index add5173dfb..3d5f8cdd71 100644
--- a/web/src/components/cipherkeys/AddAkeylessType.vue
+++ b/web/src/components/cipherkeys/AddAkeylessType.vue
@@ -14,7 +14,7 @@ You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <div class="cipher-keys-add-akeyless-type">
+  <div class="cipher-keys-add-akeyless-type space-y-2">
     <!-- Every editable control is an OForm* field bound to the parent OForm (in
          AddCipherKey.vue) by `name`; all rules (URL/HTML/regex + the conditional
          requireds) live in AddCipherKey.schema.ts. No manual error refs, no
@@ -39,10 +39,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <OButton data-test="add-cipher-key-akeyless-access-id-input-cancel" variant="outline" size="sm-action" class="mt-2" v-if="isUpdate && accessId != ''" @click="isUpdateAccessID = false">{{ t('common.cancel') }}</OButton>
     </div>
     <div v-else>
-      <label class="flex q-field mb-3">
+      <label class="flex mb-3">
         <b>{{ t('cipherKey.accessId') }}</b>
       </label>
-      <pre class="[text-wrap:auto] break-words border border-(--o2-border-input) p-[5px] mb-[5px]">{{ accessId }}</pre>
+      <pre class="[text-wrap:auto] break-words border border-input-border p-1.25 mb-1.25">{{ accessId }}</pre>
       <OButton data-test="add-cipher-key-akeyless-access-id-input-update" variant="primary" size="sm-action" @click="isUpdateAccessID = true">{{ t('common.update') }}</OButton>
     </div>
     <OFormSelect
@@ -56,10 +56,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       valueKey="value"
     />
     <fieldset
-      class="q-fieldset p-3 w-full border border-[lightgray] rounded relative"
+      class="p-3 w-full border border-[lightgray] rounded-default relative"
       v-if="authType != ''"
     >
-      <legend class="q-caption px-2 text-xs text-(--q-color-dark) ml-2 py-0 px-1">
+      <legend class="px-2 text-xs text-text-heading ml-2 py-0 px-1">
         {{ getAuthenticationTypeLabel(authType) }}
         Configuration
       </legend>
@@ -75,10 +75,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <OButton data-test="add-cipher-key-akeyless-access-key-input-cancel" variant="outline" size="sm-action" class="mt-2" v-if="isUpdate && accessKey != ''" @click="isUpdateAccessKey = false">{{ t('common.cancel') }}</OButton>
         </div>
         <div v-else>
-          <label class="flex q-field mb-3">
+          <label class="flex mb-3">
             <b>{{ t('cipherKey.accessKey') }}</b>
           </label>
-          <pre class="[text-wrap:auto] break-words border border-(--o2-border-input) p-[5px] mb-[5px]">{{ accessKey }}</pre>
+          <pre class="[text-wrap:auto] break-words border border-input-border p-1.25 mb-1.25">{{ accessKey }}</pre>
           <OButton data-test="add-cipher-key-akeyless-access-key-input-update" variant="primary" size="sm-action" @click="isUpdateAccessKey = true">{{ t('common.update') }}</OButton>
         </div>
       </div>
@@ -94,10 +94,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <OButton data-test="add-cipher-key-akeyless-ldap-username-input-cancel" variant="outline" size="sm-action" class="mt-2" v-if="isUpdate && ldapUsername != ''" @click="isUpdateLDAPUsername = false">{{ t('common.cancel') }}</OButton>
         </div>
         <div v-else>
-          <label class="flex q-field mb-3">
+          <label class="flex mb-3">
             <b>{{ t('cipherKey.ldapUsername') }}</b>
           </label>
-          <pre class="[text-wrap:auto] break-words border border-(--o2-border-input) p-[5px] mb-[5px]">{{ ldapUsername }}</pre>
+          <pre class="[text-wrap:auto] break-words border border-input-border p-1.25 mb-1.25">{{ ldapUsername }}</pre>
           <OButton data-test="add-cipher-key-akeyless-ldap-username-input-update" variant="primary" size="sm-action" @click="isUpdateLDAPUsername = true">{{ t('common.update') }}</OButton>
         </div>
         <div v-if="!isUpdate || isUpdateLDAPPass || ldapPassword == ''">
@@ -113,10 +113,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <OButton data-test="add-cipher-key-akeyless-ldap-password-input-cancel" variant="outline" size="sm-action" class="mt-2" v-if="isUpdate && ldapPassword != ''" @click="isUpdateLDAPPass = false">{{ t('common.cancel') }}</OButton>
         </div>
         <div v-else>
-          <label class="flex q-field mb-3">
+          <label class="flex mb-3">
             <b>{{ t('cipherKey.ldapPassword') }}</b>
           </label>
-          <pre class="[text-wrap:auto] break-words border border-(--o2-border-input) p-[5px] mb-[5px]">{{ ldapPassword }}</pre>
+          <pre class="[text-wrap:auto] break-words border border-input-border p-1.25 mb-1.25">{{ ldapPassword }}</pre>
           <OButton data-test="add-cipher-key-akeyless-ldap-password-input-update" variant="primary" size="sm-action" @click="isUpdateLDAPPass = true">{{ t('common.update') }}</OButton>
         </div>
       </div>
@@ -132,10 +132,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       valueKey="value"
     />
     <fieldset
-      class="q-fieldset p-3 w-full border border-[lightgray] rounded relative"
+      class="p-3 w-full border border-[lightgray] rounded-default relative"
       v-if="secretType != ''"
     >
-      <legend class="q-caption px-2 text-xs text-(--q-color-dark) ml-2 py-0 px-1">
+      <legend class="px-2 text-xs text-text-heading ml-2 py-0 px-1">
         {{ getSecretOptionLabel(secretType) }}
         Configuration
       </legend>
@@ -264,11 +264,3 @@ export default defineComponent({
   },
 });
 </script>
-
-<style>
-/* Small consistent gap between every top-level field (inputs, selects,
-   fieldsets) so they don't render flush against each other. */
-.cipher-keys-add-akeyless-type > * + * {
-  margin-top: 0.5rem;
-}
-</style>
diff --git a/web/src/components/cipherkeys/AddCipherKey.schema.spec.ts b/web/src/components/cipherkeys/AddCipherKey.schema.spec.ts
index e4b236e0e0..cb8cea589c 100644
--- a/web/src/components/cipherkeys/AddCipherKey.schema.spec.ts
+++ b/web/src/components/cipherkeys/AddCipherKey.schema.spec.ts
@@ -28,7 +28,7 @@ const addCipherKeySchema = makeAddCipherKeySchema((k: string) => i18n.global.t(k
 // Deep clone the defaults and apply a mutator so each case starts from a known
 // shape. The schema rules (incl. the conditional requireds in superRefine) are
 // exactly the ones the old per-field `:rules` + child `validate()` enforced — the
-// Quasar BEFORE baseline — so these tests double as the dropped-validation guard.
+// pre-migration BEFORE baseline — so these tests double as the dropped-validation guard.
 const build = (mutate: (v: AddCipherKeyForm) => void): AddCipherKeyForm => {
   const v = JSON.parse(JSON.stringify(addCipherKeyDefaults())) as AddCipherKeyForm;
   mutate(v);
diff --git a/web/src/components/cipherkeys/AddCipherKey.schema.ts b/web/src/components/cipherkeys/AddCipherKey.schema.ts
index 840f48a298..23a0db6155 100644
--- a/web/src/components/cipherkeys/AddCipherKey.schema.ts
+++ b/web/src/components/cipherkeys/AddCipherKey.schema.ts
@@ -6,15 +6,12 @@
 // This is a COUPLED family: AddCipherKey orchestrates an OStepper whose children
 // (AddAkeylessType, AddEncryptionMechanism, AddOpenobserveType) render their
 // fields as `OForm*` controls connected to this single parent OForm by `name`.
-// Every field's rules live here, so the children stay purely presentational and
-// no child runs a hand-rolled `validate()` (the old anti-pattern).
+// Every field's rules live here, so the children stay purely presentational.
 //
 // All store-type-conditional requireds (Akeyless URL/regex/auth/secret branches,
 // the OpenObserve `local` secret, and the simple-algorithm requirement) live in
 // `superRefine`, keyed off `key.store.type` / `auth.type` / `store.type` /
-// `mechanism.type` — these are the same rules the old per-field `:rules` and the
-// children's `validate()` methods enforced (faithful to the Quasar BEFORE
-// baseline; truthy guards inverted into failing Zod constraints).
+// `mechanism.type`.
 //
 // Validation TIMING is owned by OForm (submit-then-change via revalidateLogic);
 // this file only describes WHAT is valid.
@@ -22,14 +19,14 @@
 import { z } from "zod";
 import { isValidResourceName, validateUrl } from "@/utils/zincutils";
 
-// name: alphanumeric + underscore + hyphen (the old `/^[a-zA-Z0-9_-]+$/` rule).
+// name: alphanumeric + underscore + hyphen.
 export const cipherKeyNameRegex = /^[a-zA-Z0-9_-]+$/;
 // access_id: alphanumeric + hyphen. A `*` quantifier (PASSES on ""), so it must
 // be paired with the required check in superRefine, not used standalone.
 export const akeylessAccessIdRegex = /^[a-zA-Z0-9-]*$/;
 // ldap username: alphanumeric + dot + underscore + hyphen.
 export const akeylessLdapUsernameRegex = /^[a-zA-Z0-9._-]+$/;
-// Anti-HTML guard for base_url (the old `!/<[^>]*>/.test(v)` rule).
+// Anti-HTML guard for base_url.
 const HTML_TAG_REGEX = /<[^>]*>/;
 
 // Built via a factory so every validation message is i18n-driven (pass useI18n's
@@ -43,12 +40,11 @@ export const makeAddCipherKeySchema = (t: (_key: string) => string) =>
   z
   .object({
     // Always-validated scalars (AddCipherKey's own fields).
-    // Hand-rolled cascade rather than `.min().max().regex().refine()`: the field
-    // reports only its FIRST issue, and the old validateName reported these four
-    // in this exact order. Chained ZodString checks always run before a trailing
-    // `.refine`, which would surface nameInvalidChars where the old form said
-    // nameInvalidResource (and make nameInvalidResource unreachable, since
-    // cipherKeyNameRegex is strictly stricter than isValidResourceName).
+    // Hand-rolled cascade rather than `.min().max().regex().refine()` so the field
+    // reports only its FIRST issue in this exact order: a trailing `.refine` would
+    // run after the chained ZodString checks and surface nameInvalidChars where
+    // nameInvalidResource should appear (cipherKeyNameRegex is stricter than
+    // isValidResourceName, making nameInvalidResource otherwise unreachable).
     name: z.string().superRefine((v, ctx) => {
       const fail = (message: string) =>
         ctx.addIssue({ code: z.ZodIssueCode.custom, message });
@@ -62,9 +58,9 @@ export const makeAddCipherKeySchema = (t: (_key: string) => string) =>
       store: z.object({
         // Store type select (OpenObserve `local` vs `akeyless`) — required.
         type: z.string().min(1, t("cipherKey.typeRequired")),
-        // Akeyless sub-tree. Every field is form-owned (R1-strict) but only
-        // conditionally required (store.type === "akeyless") via superRefine, so
-        // the field-level shape is loose (defaults to "").
+        // Akeyless sub-tree. Every field is form-owned but only conditionally
+        // required (store.type === "akeyless") via superRefine, so the field-level
+        // shape is loose (defaults to "").
         akeyless: z.object({
           base_url: z.string().default(""),
           access_id: z.string().default(""),
@@ -81,7 +77,7 @@ export const makeAddCipherKeySchema = (t: (_key: string) => string) =>
             static_secret: z.string().default(""),
             dfc: z.object({
               name: z.string().default(""),
-              // dfc.iv had NO rule in the original — optional, never required.
+              // dfc.iv is optional, never required.
               iv: z.string().default(""),
               encrypted_data: z.string().default(""),
             }),
@@ -117,8 +113,7 @@ export const makeAddCipherKeySchema = (t: (_key: string) => string) =>
     if (storeType === "akeyless") {
       const ak = val.key.store.akeyless;
 
-      // base_url: required → valid http(s) URL → no HTML tags (in that order,
-      // matching the old validateAkeylessFields cascade).
+      // base_url: required → valid http(s) URL → no HTML tags (in that order).
       if (!ak.base_url) {
         ctx.addIssue({
           code: z.ZodIssueCode.custom,
@@ -250,7 +245,7 @@ export type AddCipherKeyForm = z.infer<
 
 // STATIC create defaults (typed factory — bound `:default-values` at mount).
 // Edit-mode prefill arrives async, so the component re-seeds via
-// `formRef.form.reset(record)` once the record loads (playbook §4).
+// `formRef.form.reset(record)` once the record loads.
 export const addCipherKeyDefaults = (): AddCipherKeyForm => ({
   name: "",
   key: {
diff --git a/web/src/components/cipherkeys/AddCipherKey.vue b/web/src/components/cipherkeys/AddCipherKey.vue
index a50f55afe2..f1772753f6 100644
--- a/web/src/components/cipherkeys/AddCipherKey.vue
+++ b/web/src/components/cipherkeys/AddCipherKey.vue
@@ -14,30 +14,28 @@ You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <div class="p-0" style="min-height: inherit;">
-    <AppPageHeader
-      :back="{
-        label: t('cipherKey.header'),
-        onClick: () => emit('cancel:hideform'),
-      }"
-      class="px-3 border-b border-border-default"
-    >
+  <OPageLayout
+    class="min-h-[inherit]"
+    :back="{
+      label: t('cipherKey.header'),
+      onClick: () => emit('cancel:hideform'),
+    }"
+    bleed
+  >
       <template #title>
         <span data-test="add-template-title">
           {{ isUpdatingCipherKey ? t("cipherKey.update") : t("cipherKey.add") }}
         </span>
       </template>
-    </AppPageHeader>
     <div class="create-cipher-form">
       <!-- One OForm owns every field across the stepper (the children render
            OForm* controls connected by name); a single Zod schema gates the
            whole form. Inline form → the footer Save is type="submit" (Enter
            works natively) and its spinner is form-driven via v-slot. -->
       <OForm :form="form" v-slot="{ isSubmitting }">
-        <div style="height: calc(100vh -  var(--navbar-height) - 155px); overflow: auto">
+        <div class="overflow-auto" style="height: calc(100vh -  var(--navbar-height) - 155px)">
           <!-- Constrain the whole form to a sensible reading width on wide screens
-               while staying fluid below the breakpoint. Uses Tailwind's design-system
-               max-width token (max-w-3xl ≈ 48rem) instead of arbitrary px values. -->
+               while staying fluid below the breakpoint. -->
           <div class="w-full max-w-3xl">
             <div class="flex">
               <div class="w-1/3 o2-input flex mx-3 mt-3 mb-4">
@@ -132,8 +130,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </div>
         </div>
         <div class="mx-2">
-          <div class="flex justify-end px-2 py-4 w-full gap-2 border-t border-border-default"
-            style="position: sticky; bottom: 0px; z-index: 2"
+          <div class="flex justify-end px-2 py-4 w-full gap-2 border-t border-border-default sticky"
+            style="bottom: 0px; z-index: 2"
           >
             <OButton
               data-test="add-cipher-key-cancel-btn"
@@ -164,7 +162,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       @update:ok="dialog.okCallback"
       @update:cancel="dialog.show = false"
     />
-  </div>
+  </OPageLayout>
 </template>
 <script lang="ts" setup>
 import { ref, computed, onMounted, onActivated } from "vue";
@@ -184,7 +182,7 @@ import OFormSelect from "@/lib/forms/Select/OFormSelect.vue";
 import OStepper from "@/lib/navigation/Stepper/OStepper.vue";
 import OStep from "@/lib/navigation/Stepper/OStep.vue";
 import { toast } from "@/lib/feedback/Toast/useToast";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import {
   makeAddCipherKeySchema,
   addCipherKeyDefaults,
@@ -223,13 +221,12 @@ const getTypeLabel = (type: string) =>
 // The parent OWNS the form (headless useOForm): it renders <OForm>, so it sits
 // above the provide boundary and can't inject — yet it needs store.type
 // reactively to drive the OStepper's conditional child + the step-1 title.
-// useOForm + form.useStore gives that directly, with no mirror/subscribe; the
-// children inject this SAME form via <OForm :form="form">. The save is wired
-// here through useOForm (not @submit on the tag) — wrapped lazily so onFormSubmit
-// (declared below) resolves at submit time, not at setup.
-// Build the schema with useI18n's `t` so the three previously-translated
-// validation messages (provider-type / algorithm / secret required) render in
-// the active locale, exactly as they did before the migration.
+// useOForm + form.useStore gives that directly; the children inject this SAME
+// form via <OForm :form="form">. The save is wired here through useOForm (not
+// @submit on the tag) — wrapped lazily so onFormSubmit (declared below)
+// resolves at submit time, not at setup.
+// Build the schema with useI18n's `t` so validation messages render in the
+// active locale.
 const addCipherKeySchema = makeAddCipherKeySchema(t);
 
 const form = useOForm<AddCipherKeyForm>({
@@ -278,7 +275,7 @@ const setupTemplateData = () => {
     )
       .then((response) => {
         // :default-values is read once at mount; re-seed via reset now the
-        // record has arrived (playbook §4: async edit prefill → form.reset).
+        // record has arrived.
         const record = mergeObjects(
           addCipherKeyDefaults(),
           response.data,
@@ -343,12 +340,11 @@ const createCipherKey = async (value: AddCipherKeyForm) => {
   });
   try {
     // The service's CipherKeyData type declares a `provider` field the payload
-    // has never included (the old code passed an `any`-typed formData); cast to
-    // keep the real shape without editing the shared service type.
-    // `isUpdate` is a UI flag, NOT a form field — merged in here (outside the
-    // schema) so the request body stays byte-for-byte identical to the
-    // pre-migration payload. The backend ignores it (KeyAddRequest deserializes
-    // only `name` + `key`, no deny_unknown_fields), so this is purely parity.
+    // doesn't include; cast to keep the real shape without editing the shared
+    // service type.
+    // `isUpdate` is a UI flag, not a form field — merged in here outside the
+    // schema. The backend ignores it (KeyAddRequest deserializes only `name` +
+    // `key`, no deny_unknown_fields).
     await CipherKeysService.create(
       store.state.selectedOrganization.identifier,
       { ...value, isUpdate: isUpdatingCipherKey.value } as any,
@@ -377,8 +373,8 @@ const updateCipherKey = async (value: AddCipherKeyForm) => {
     timeout: 0,
   });
   try {
-    // Merge the `isUpdate` UI flag back into the body for payload parity with
-    // the pre-migration code (backend ignores it — see createCipherKey).
+    // Merge the `isUpdate` UI flag into the body (backend ignores it — see
+    // createCipherKey).
     await CipherKeysService.update(
       store.state.selectedOrganization.identifier,
       { ...value, isUpdate: isUpdatingCipherKey.value } as any,
diff --git a/web/src/components/cipherkeys/AddOpenobserveType.vue b/web/src/components/cipherkeys/AddOpenobserveType.vue
index 01737c8fd6..f12c11c831 100644
--- a/web/src/components/cipherkeys/AddOpenobserveType.vue
+++ b/web/src/components/cipherkeys/AddOpenobserveType.vue
@@ -41,10 +41,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <!-- Read-only display branch (edit mode, secret present, not editing): pure
          UI outside the form (R1) — not an editable field. -->
     <div v-else>
-      <label class="flex q-field mb-3">
+      <label class="flex mb-3">
         <b>{{ t('cipherKey.secret') }}</b>
       </label>
-      <pre class="[text-wrap:auto] break-words border border-(--o2-border-input) p-[5px] mb-[5px]">{{ localValue }}</pre>
+      <pre class="[text-wrap:auto] break-words border border-input-border p-1.25 mb-1.25">{{ localValue }}</pre>
       <OButton
         data-test="add-cipher-key-openobserve-secret-input-update"
         variant="primary"
diff --git a/web/src/components/common/AppBreadcrumb.vue b/web/src/components/common/AppBreadcrumb.vue
deleted file mode 100644
index eb6b742089..0000000000
--- a/web/src/components/common/AppBreadcrumb.vue
+++ /dev/null
@@ -1,160 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<!--
-  AppBreadcrumb — the standard ancestor-path navigation for detail (Level-3+)
-  views. Render it inside AppPageHeader's #subtitle slot (or pass AppPageHeader
-  a `breadcrumb` prop), with the current item also shown as the header title.
-
-  Each crumb links to its parent via `to` (router) or `onClick`; the terminal
-  crumb (no `to`/`onClick`) is the current page — non-interactive, bold, and
-  marked aria-current.
-
-  ADAPTIVE OVERFLOW: the chain is depth-bounded. When the number of crumbs
-  exceeds `maxInline`, the middle crumbs collapse into a "…" dropdown so the
-  rendered shape is always Root › … › Parent › Current — it never overflows or
-  reflows the header at any depth.
-
-  Use the default slot for trailing content (e.g. a loading spinner).
--->
-<template>
-  <nav
-    class="flex items-center gap-0.5 -ms-1.5 min-w-0"
-    aria-label="Breadcrumb"
-    data-test="app-breadcrumb"
-  >
-    <template v-for="(node, idx) in nodes" :key="idx">
-      <OIcon
-        v-if="idx > 0"
-        name="chevron-right"
-        size="sm"
-        class="text-text-disabled shrink-0"
-      />
-
-      <!-- Collapsed middle crumbs → overflow dropdown -->
-      <ODropdown v-if="node.kind === 'overflow'" align="start">
-        <template #trigger>
-          <OButton
-            variant="ghost"
-            size="icon-sm"
-            icon-left="more-horiz"
-            data-test="app-breadcrumb-overflow"
-            :aria-label="`Show ${node.items.length} hidden levels`"
-          />
-        </template>
-        <ODropdownItem
-          v-for="(item, i) in node.items"
-          :key="i"
-          :data-test="item.dataTest"
-          @select="onCrumbClick(item)"
-        >
-          {{ item.label }}
-        </ODropdownItem>
-      </ODropdown>
-
-      <!-- Interactive ancestor crumb -->
-      <button
-        v-else-if="node.item.to || node.item.onClick"
-        type="button"
-        class="text-text-secondary max-w-48 truncate px-1.5 py-0.5 rounded-md outline-none transition-colors hover:text-text-primary hover:bg-surface-subtle focus-visible:ring-4 focus-visible:ring-primary-500/25 focus-visible:ring-inset shrink-0"
-        :title="node.item.title ?? node.item.label"
-        :data-test="node.item.dataTest"
-        @click="onCrumbClick(node.item)"
-      >
-        {{ node.item.label }}
-      </button>
-
-      <!-- Current (terminal) crumb — non-interactive -->
-      <span
-        v-else
-        class="text-text-primary font-medium max-w-64 truncate px-1.5 py-0.5 shrink"
-        :class="{ 'min-w-0': node.isCurrent }"
-        :aria-current="node.isCurrent ? 'page' : undefined"
-        :title="node.item.title ?? node.item.label"
-        :data-test="node.item.dataTest"
-      >
-        {{ node.item.label }}
-      </span>
-    </template>
-    <slot />
-  </nav>
-</template>
-
-<script setup lang="ts">
-import type { RouteLocationRaw } from "vue-router";
-import { computed } from "vue";
-import { useRouter } from "vue-router";
-import OIcon from "@/lib/core/Icon/OIcon.vue";
-import OButton from "@/lib/core/Button/OButton.vue";
-import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
-import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
-
-export interface BreadcrumbItem {
-  label: string;
-  to?: RouteLocationRaw;
-  onClick?: () => void;
-  title?: string;
-  dataTest?: string;
-}
-
-type CrumbNode =
-  | { kind: "crumb"; item: BreadcrumbItem; isCurrent: boolean }
-  | { kind: "overflow"; items: BreadcrumbItem[] };
-
-const props = withDefaults(
-  defineProps<{
-    items: BreadcrumbItem[];
-    /** Max crumbs rendered inline before middles collapse into a "…" menu. */
-    maxInline?: number;
-  }>(),
-  {
-    maxInline: 3,
-  },
-);
-
-const router = useRouter();
-
-// Depth-driven (not width-measured, so it's SSR-safe and stable): once the
-// chain exceeds `maxInline`, keep Root + Parent + Current inline and fold every
-// crumb strictly between Root and Parent into a single overflow node.
-const nodes = computed<CrumbNode[]>(() => {
-  const items = props.items;
-  const n = items.length;
-  if (n === 0) return [];
-
-  const mark = (item: BreadcrumbItem, i: number): CrumbNode => ({
-    kind: "crumb",
-    item,
-    isCurrent: i === n - 1,
-  });
-
-  if (n <= props.maxInline) {
-    return items.map(mark);
-  }
-
-  return [
-    mark(items[0], 0),
-    { kind: "overflow", items: items.slice(1, n - 2) },
-    mark(items[n - 2], n - 2),
-    mark(items[n - 1], n - 1),
-  ];
-});
-
-const onCrumbClick = (item: BreadcrumbItem) => {
-  if (item.onClick) item.onClick();
-  else if (item.to) router.push(item.to);
-};
-</script>
diff --git a/web/src/components/common/AppDialog.spec.ts b/web/src/components/common/AppDialog.spec.ts
deleted file mode 100644
index dd8a59b594..0000000000
--- a/web/src/components/common/AppDialog.spec.ts
+++ /dev/null
@@ -1,443 +0,0 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { mount, VueWrapper } from '@vue/test-utils';
-import AppDialog from '@/components/common/AppDialog.vue';
-
-describe('AppDialog.vue', () => {
-  let wrapper: VueWrapper;
-
-  afterEach(() => {
-    if (wrapper) {
-      wrapper.unmount();
-    }
-    vi.clearAllMocks();
-    // Reset body overflow
-    document.body.style.overflow = '';
-  });
-
-  const createWrapper = (props = {}) => {
-    const defaultProps = {
-      modelValue: false,
-      title: '',
-      closeOnBackdropClick: true,
-      closeOnEsc: true
-    };
-
-    return mount(AppDialog, {
-      props: { ...defaultProps, ...props },
-      attachTo: document.body
-    });
-  };
-
-  describe('Component Rendering', () => {
-    it('renders the component when modelValue is true', () => {
-      wrapper = createWrapper({ modelValue: true });
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it('does not render when modelValue is false', () => {
-      wrapper = createWrapper({ modelValue: false });
-      const backdrop = wrapper.find('[data-test="common-app-dialog-backdrop"]');
-      expect(backdrop.exists()).toBe(false);
-    });
-
-    it('renders dialog content slot correctly', () => {
-      wrapper = mount(AppDialog, {
-        props: { modelValue: true },
-        slots: {
-          default: '<div class="test-content">Test Content</div>'
-        },
-        attachTo: document.body
-      });
-      
-      // Since component uses Teleport, check the DOM directly
-      const testContent = document.querySelector('.test-content');
-      expect(testContent).toBeTruthy();
-      expect(testContent?.textContent).toBe('Test Content');
-    });
-
-    it('applies correct structure classes', () => {
-      wrapper = createWrapper({ modelValue: true });
-      
-      // Check DOM directly since component uses Teleport
-      expect(document.querySelector('[data-test="common-app-dialog-backdrop"]')).toBeTruthy();
-      expect(document.querySelector('[data-test="common-app-dialog"]')).toBeTruthy();
-      expect(document.querySelector('[data-test="common-app-dialog-content"]')).toBeTruthy();
-    });
-
-    it('sets correct ARIA attributes', () => {
-      wrapper = createWrapper({ modelValue: true });
-      
-      // Check DOM directly since component uses Teleport
-      const dialog = document.querySelector('[data-test="common-app-dialog"]');
-      expect(dialog?.getAttribute('role')).toBe('dialog');
-      expect(dialog?.getAttribute('aria-modal')).toBe('true');
-    });
-  });
-
-  describe('Props Handling', () => {
-    it('accepts all props correctly', () => {
-      wrapper = createWrapper({
-        modelValue: true,
-        title: 'Test Title',
-        closeOnBackdropClick: false,
-        closeOnEsc: false
-      });
-      
-      expect(wrapper.props('modelValue')).toBe(true);
-      expect(wrapper.props('title')).toBe('Test Title');
-      expect(wrapper.props('closeOnBackdropClick')).toBe(false);
-      expect(wrapper.props('closeOnEsc')).toBe(false);
-    });
-
-    it('uses default values correctly', () => {
-      wrapper = createWrapper();
-      
-      expect(wrapper.props('modelValue')).toBe(false);
-      expect(wrapper.props('title')).toBe('');
-      expect(wrapper.props('closeOnBackdropClick')).toBe(true);
-      expect(wrapper.props('closeOnEsc')).toBe(true);
-    });
-  });
-
-  describe('Event Handling', () => {
-    it('emits update:modelValue when handleClose is called', async () => {
-      wrapper = createWrapper({ modelValue: true });
-      const vm = wrapper.vm as any;
-      
-      vm.handleClose();
-      
-      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
-      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false]);
-    });
-
-    it('emits close event when handleClose is called', async () => {
-      wrapper = createWrapper({ modelValue: true });
-      const vm = wrapper.vm as any;
-      
-      vm.handleClose();
-      
-      expect(wrapper.emitted('close')).toBeTruthy();
-    });
-
-    it('calls handleClose when backdrop is clicked and closeOnBackdropClick is true', async () => {
-      wrapper = createWrapper({ modelValue: true, closeOnBackdropClick: true });
-      
-      // Find backdrop in DOM directly
-      const backdrop = document.querySelector('[data-test="common-app-dialog-backdrop"]') as HTMLElement;
-      expect(backdrop).toBeTruthy();
-      
-      backdrop?.click();
-      await wrapper.vm.$nextTick();
-      
-      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
-    });
-
-    it('does not call handleClose when backdrop is clicked and closeOnBackdropClick is false', async () => {
-      wrapper = createWrapper({ modelValue: true, closeOnBackdropClick: false });
-      
-      const backdrop = document.querySelector('[data-test="common-app-dialog-backdrop"]') as HTMLElement;
-      expect(backdrop).toBeTruthy();
-      
-      backdrop?.click();
-      await wrapper.vm.$nextTick();
-      
-      expect(wrapper.emitted('update:modelValue')).toBeFalsy();
-    });
-
-    it('prevents event propagation when dialog content is clicked', async () => {
-      wrapper = createWrapper({ modelValue: true });
-      
-      const dialog = document.querySelector('[data-test="common-app-dialog"]') as HTMLElement;
-      expect(dialog).toBeTruthy();
-      
-      dialog?.click();
-      await wrapper.vm.$nextTick();
-      
-      // Since @click.stop is used, the event should be stopped
-      expect(wrapper.emitted('update:modelValue')).toBeFalsy();
-    });
-  });
-
-  describe('Keyboard Event Handling', () => {
-    it('closes dialog on ESC key when closeOnEsc is true', async () => {
-      wrapper = createWrapper({ modelValue: true, closeOnEsc: true });
-      
-      // Simulate ESC key press
-      const escEvent = new KeyboardEvent('keydown', { key: 'Escape' });
-      document.dispatchEvent(escEvent);
-      
-      await wrapper.vm.$nextTick();
-      
-      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
-      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false]);
-    });
-
-    it('does not close dialog on ESC key when closeOnEsc is false', async () => {
-      wrapper = createWrapper({ modelValue: true, closeOnEsc: false });
-      
-      const escEvent = new KeyboardEvent('keydown', { key: 'Escape' });
-      document.dispatchEvent(escEvent);
-      
-      await wrapper.vm.$nextTick();
-      
-      expect(wrapper.emitted('update:modelValue')).toBeFalsy();
-    });
-
-    it('does not close dialog on ESC key when dialog is closed', async () => {
-      wrapper = createWrapper({ modelValue: false, closeOnEsc: true });
-      
-      const escEvent = new KeyboardEvent('keydown', { key: 'Escape' });
-      document.dispatchEvent(escEvent);
-      
-      await wrapper.vm.$nextTick();
-      
-      expect(wrapper.emitted('update:modelValue')).toBeFalsy();
-    });
-
-    it('ignores non-ESC keys', async () => {
-      wrapper = createWrapper({ modelValue: true, closeOnEsc: true });
-      
-      const enterEvent = new KeyboardEvent('keydown', { key: 'Enter' });
-      document.dispatchEvent(enterEvent);
-      
-      await wrapper.vm.$nextTick();
-      
-      expect(wrapper.emitted('update:modelValue')).toBeFalsy();
-    });
-  });
-
-  describe('Focus Management', () => {
-    it('handles focus trap without errors', async () => {
-      // Create dialog with focusable elements
-      wrapper = mount(AppDialog, {
-        props: { modelValue: true },
-        slots: {
-          default: `
-            <button id="first">First</button>
-            <button id="second">Second</button>
-            <button id="last">Last</button>
-          `
-        },
-        attachTo: document.body
-      });
-
-      await wrapper.vm.$nextTick();
-      
-      // Simulate Tab event
-      const tabEvent = new KeyboardEvent('keydown', { 
-        key: 'Tab', 
-        shiftKey: false 
-      });
-      
-      expect(() => {
-        document.dispatchEvent(tabEvent);
-      }).not.toThrow();
-    });
-
-    it('ignores focus trap for non-Tab keys', async () => {
-      wrapper = createWrapper({ modelValue: true });
-      
-      const enterEvent = new KeyboardEvent('keydown', { key: 'Enter' });
-      
-      expect(() => {
-        document.dispatchEvent(enterEvent);
-      }).not.toThrow();
-    });
-
-    it('ignores focus trap when dialog is closed', async () => {
-      wrapper = createWrapper({ modelValue: false });
-      
-      const tabEvent = new KeyboardEvent('keydown', { key: 'Tab' });
-      
-      expect(() => {
-        document.dispatchEvent(tabEvent);
-      }).not.toThrow();
-    });
-  });
-
-  describe('Body Overflow Management', () => {
-    it('sets body overflow to hidden when dialog opens', async () => {
-      wrapper = createWrapper({ modelValue: false });
-      
-      await wrapper.setProps({ modelValue: true });
-      await wrapper.vm.$nextTick();
-      
-      expect(document.body.style.overflow).toBe('hidden');
-    });
-
-    it('resets body overflow when dialog closes', async () => {
-      wrapper = createWrapper({ modelValue: true });
-      
-      await wrapper.setProps({ modelValue: false });
-      await wrapper.vm.$nextTick();
-      
-      expect(document.body.style.overflow).toBe('');
-    });
-
-    it('resets body overflow on component unmount if dialog is open', () => {
-      wrapper = createWrapper({ modelValue: true });
-      
-      // Set body overflow to hidden
-      document.body.style.overflow = 'hidden';
-      
-      wrapper.unmount();
-      
-      expect(document.body.style.overflow).toBe('');
-    });
-
-    it('does not affect body overflow on unmount if dialog is closed', () => {
-      wrapper = createWrapper({ modelValue: false });
-      
-      // Set some initial overflow style
-      document.body.style.overflow = 'auto';
-      
-      wrapper.unmount();
-      
-      // Should remain unchanged
-      expect(document.body.style.overflow).toBe('auto');
-    });
-  });
-
-  describe('Auto Focus', () => {
-    it('focuses first focusable element when dialog opens', async () => {
-      wrapper = mount(AppDialog, {
-        props: { modelValue: false },
-        slots: {
-          default: '<button id="focus-target">Focus Me</button>'
-        },
-        attachTo: document.body
-      });
-      
-      await wrapper.setProps({ modelValue: true });
-      await wrapper.vm.$nextTick();
-      
-      // Should attempt to focus the button
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it('handles case when no focusable elements exist', async () => {
-      wrapper = mount(AppDialog, {
-        props: { modelValue: false },
-        slots: {
-          default: '<div>No focusable content</div>'
-        },
-        attachTo: document.body
-      });
-      
-      await wrapper.setProps({ modelValue: true });
-      await wrapper.vm.$nextTick();
-      
-      // Should not crash
-      expect(wrapper.exists()).toBe(true);
-    });
-  });
-
-  describe('Lifecycle Management', () => {
-    it('adds event listeners on mount', () => {
-      const addEventListenerSpy = vi.spyOn(document, 'addEventListener');
-      
-      wrapper = createWrapper();
-      
-      expect(addEventListenerSpy).toHaveBeenCalledWith('keydown', expect.any(Function));
-      expect(addEventListenerSpy).toHaveBeenCalledTimes(2); // ESC handler and focus trap
-      
-      addEventListenerSpy.mockRestore();
-    });
-
-    it('removes event listeners on unmount', () => {
-      const removeEventListenerSpy = vi.spyOn(document, 'removeEventListener');
-      
-      wrapper = createWrapper();
-      wrapper.unmount();
-      
-      expect(removeEventListenerSpy).toHaveBeenCalledWith('keydown', expect.any(Function));
-      expect(removeEventListenerSpy).toHaveBeenCalledTimes(2);
-      
-      removeEventListenerSpy.mockRestore();
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('handles multiple rapid backdrop clicks', async () => {
-      wrapper = createWrapper({ modelValue: true, closeOnBackdropClick: true });
-      
-      const backdrop = document.querySelector('[data-test="common-app-dialog-backdrop"]') as HTMLElement;
-      
-      // Rapid clicks
-      backdrop?.click();
-      backdrop?.click();
-      backdrop?.click();
-      
-      await wrapper.vm.$nextTick();
-      
-      // Should emit multiple times
-      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
-    });
-
-    it('handles missing dialogRef gracefully', async () => {
-      wrapper = createWrapper({ modelValue: true });
-      const vm = wrapper.vm as any;
-      
-      // Mock missing ref
-      vm.dialogRef = null;
-      
-      const tabEvent = new KeyboardEvent('keydown', { key: 'Tab' });
-      
-      expect(() => {
-        document.dispatchEvent(tabEvent);
-      }).not.toThrow();
-    });
-
-    it('handles focus trap with no focusable elements', async () => {
-      wrapper = mount(AppDialog, {
-        props: { modelValue: true },
-        slots: {
-          default: '<div>No buttons or inputs</div>'
-        },
-        attachTo: document.body
-      });
-
-      const tabEvent = new KeyboardEvent('keydown', { key: 'Tab' });
-      
-      expect(() => {
-        document.dispatchEvent(tabEvent);
-      }).not.toThrow();
-    });
-
-    it('handles props changes correctly', async () => {
-      wrapper = createWrapper({ 
-        modelValue: true, 
-        closeOnBackdropClick: true,
-        closeOnEsc: true 
-      });
-      
-      // Change props
-      await wrapper.setProps({ 
-        closeOnBackdropClick: false,
-        closeOnEsc: false 
-      });
-      
-      // Test that new prop values are respected
-      const backdrop = document.querySelector('[data-test="common-app-dialog-backdrop"]') as HTMLElement;
-      backdrop?.click();
-      
-      expect(wrapper.emitted('update:modelValue')).toBeFalsy();
-      
-      const escEvent = new KeyboardEvent('keydown', { key: 'Escape' });
-      document.dispatchEvent(escEvent);
-      
-      expect(wrapper.emitted('update:modelValue')).toBeFalsy();
-    });
-  });
-
-  describe('Teleport Behavior', () => {
-    it('renders content in document body via Teleport', () => {
-      wrapper = createWrapper({ modelValue: true });
-      
-      // Check that the backdrop is actually in the body
-      const backdrop = document.querySelector('[data-test="common-app-dialog-backdrop"]');
-      expect(backdrop).toBeTruthy();
-      expect(document.body.contains(backdrop)).toBe(true);
-    });
-  });
-});
\ No newline at end of file
diff --git a/web/src/components/common/AppDialog.vue b/web/src/components/common/AppDialog.vue
deleted file mode 100644
index a1a54bb553..0000000000
--- a/web/src/components/common/AppDialog.vue
+++ /dev/null
@@ -1,182 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <Teleport to="body">
-    <Transition name="fade">
-      <div
-        v-if="modelValue"
-        data-test="common-app-dialog-backdrop"
-        class="fixed inset-0 bg-black/50 flex justify-center items-center z-9999"
-        @click="handleBackdropClick"
-      >
-        <div
-          data-test="common-app-dialog"
-          class="bg-white rounded-lg shadow-[0_4px_20px_rgba(0,0,0,0.15)] w-[90%] max-w-150 max-h-[90vh] flex flex-col overflow-hidden"
-          ref="dialogRef"
-          @click.stop
-          role="dialog"
-          aria-modal="true"
-        >
-          <div data-test="common-app-dialog-content" class="overflow-y-auto flex-1">
-            <slot></slot>
-          </div>
-        </div>
-      </div>
-    </Transition>
-  </Teleport>
-</template>
-
-<script lang="ts">
-import {
-  defineComponent,
-  ref,
-  watch,
-  onMounted,
-  onBeforeUnmount,
-  nextTick,
-} from "vue";
-
-export default defineComponent({
-  name: "AppDialog",
-  props: {
-    // Using modelValue for v-model compatibility
-    modelValue: {
-      type: Boolean,
-      default: false,
-    },
-    title: {
-      type: String,
-      default: "",
-    },
-    closeOnBackdropClick: {
-      type: Boolean,
-      default: true,
-    },
-    closeOnEsc: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  emits: ["update:modelValue", "close"],
-  setup(props, { emit }) {
-    const dialogRef = ref<HTMLElement | null>(null);
-
-    // Handler for ESC key
-    const handleEscKey = (event: KeyboardEvent) => {
-      if (props.closeOnEsc && props.modelValue && event.key === "Escape") {
-        handleClose();
-      }
-    };
-
-    // Close dialog handler
-    const handleClose = () => {
-      emit("update:modelValue", false);
-      emit("close");
-    };
-
-    // Handle backdrop click
-    const handleBackdropClick = () => {
-      if (props.closeOnBackdropClick) {
-        handleClose();
-      }
-    };
-
-    // Trap focus inside dialog
-    const trapFocus = (event: KeyboardEvent) => {
-      if (!props.modelValue || !dialogRef.value || event.key !== "Tab") return;
-
-      const focusableElements = dialogRef.value.querySelectorAll(
-        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
-      );
-
-      if (focusableElements.length === 0) return;
-
-      const firstElement = focusableElements[0] as HTMLElement;
-      const lastElement = focusableElements[
-        focusableElements.length - 1
-      ] as HTMLElement;
-
-      // If shift+tab on first element, move to last element
-      if (event.shiftKey && document.activeElement === firstElement) {
-        lastElement.focus();
-        event.preventDefault();
-      }
-      // If tab on last element, move to first element
-      else if (!event.shiftKey && document.activeElement === lastElement) {
-        firstElement.focus();
-        event.preventDefault();
-      }
-    };
-
-    // Prevent scrolling of the background when dialog is open
-    watch(
-      () => props.modelValue,
-      (isOpen) => {
-        if (isOpen) {
-          document.body.style.overflow = "hidden";
-          // Focus the dialog after it's shown
-          nextTick(() => {
-            const focusable = dialogRef.value?.querySelector(
-              'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
-            ) as HTMLElement;
-            focusable?.focus();
-          });
-        } else {
-          // Remove overflow from body when dialog is closed
-          document.body.style.overflow = "";
-        }
-      },
-    );
-
-    onMounted(() => {
-      // Add event listeners
-      document.addEventListener("keydown", handleEscKey);
-      document.addEventListener("keydown", trapFocus);
-    });
-
-    onBeforeUnmount(() => {
-      // Clean up event listeners to prevent memory leaks
-      document.removeEventListener("keydown", handleEscKey);
-      document.removeEventListener("keydown", trapFocus);
-
-      // Reset body overflow if component is destroyed while dialog is open
-      if (props.modelValue) {
-        document.body.style.overflow = "";
-      }
-    });
-
-    return {
-      dialogRef,
-      handleClose,
-      handleBackdropClick,
-    };
-  },
-});
-</script>
-
-<style>
-/* Transition effects */
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.2s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-</style>
diff --git a/web/src/components/common/BaseImport.vue b/web/src/components/common/BaseImport.vue
index 001f0b82ee..d85af86ffb 100644
--- a/web/src/components/common/BaseImport.vue
+++ b/web/src/components/common/BaseImport.vue
@@ -20,14 +20,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     :class="[containerClass]"
     :style="containerStyle"
   >
-    <!-- Header Section — the standard AppPageHeader (back tile + title + actions)
+    <!-- Header Section — the standard OPageHeader (back tile + title + actions)
          used across the app. Hidden when the host page provides its own page
-         header, e.g. the pipeline shell's AppPageHeader (avoids a duplicate). -->
-    <AppPageHeader
+         header, e.g. the pipeline shell's OPageHeader (avoids a duplicate). -->
+    <OPageHeader
       v-if="!hideHeader"
       :title="title"
       :back="{ label: '', onClick: handleBack, dataTest: `${testPrefix}-import-back-btn` }"
-      class="-mx-[0.625rem] px-4 border-b border-border-default"
+      class="shrink-0 border-b border-border-default"
       :class="headerContainerClass"
     >
       <template #actions>
@@ -52,8 +52,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :data-test="`${testPrefix}-import-json-btn`"
         >{{ t('dashboard.import') }}</OButton>
       </template>
-    </AppPageHeader>
+    </OPageHeader>
 
+    <!-- No px-page-edge here: the tabs section carries its own px-page-edge so
+         it aligns with the header back-button icon (which is inset one
+         page-edge from the container). A page-edge on this wrapper too would
+         double the inset and push the content past the header icon. -->
     <div class="flex flex-1 min-h-0" :class="contentWrapperClass">
       <div class="flex w-full min-h-0" :style="contentStyle">
         <OSplitter
@@ -67,8 +71,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <template #before>
             <div class="w-full h-full flex flex-col border-r border-border-default">
               <!-- Tabs Section -->
-              <div class="card-container py-2 px-2 mb-1 shrink-0">
-                <div class="app-tabs-container h-[36px] w-fit">
+              <div class="bg-card-glass-bg py-2.5 px-page-edge mb-1 shrink-0">
+                <div class="app-tabs-container h-9 w-fit">
                   <app-tabs
                     :data-test="`${testPrefix}-import-tabs`"
                     class="tabs-selection-container"
@@ -82,7 +86,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <!-- URL Import Tab -->
               <div
                 v-if="activeTab === 'import_json_url'"
-                class="editor-container-url card-container py-1 flex-1 min-h-0 flex flex-col"
+                class="editor-container-url bg-card-glass-bg py-1 flex-1 min-h-0 flex flex-col"
               >
                 <div class="mx-2 mt-1 pb-2 flex flex-col flex-1 min-h-0">
                   <!-- Slot for custom URL input section -->
@@ -102,7 +106,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     :data-test="`${testPrefix}-import-sql-editor`"
                     ref="queryEditorRef"
                     :editor-id="`${testPrefix}-import-query-editor`"
-                    class="import-editor-shell import-url-editor mx-2 flex-1 min-h-0"
+                    class="import-url-editor flex-1 min-h-0 border border-card-glass-border rounded-default overflow-hidden"
                     :debounceTime="300"
                     v-model:query="jsonStr"
                     language="json"
@@ -111,13 +115,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </div>
               <div
                 v-if="activeTab === 'import_json_file'"
-                class="editor-container-json card-container py-1 flex-1 min-h-0 flex flex-col"
+                class="editor-container-json bg-card-glass-bg py-1 flex-1 min-h-0 flex flex-col"
               >
                 <div class="mx-2 mt-1 pb-2 flex flex-col flex-1 min-h-0">
                   <!-- Slot for custom file input section -->
                   <slot name="file-input-section" :jsonFiles="jsonFiles" :updateFiles="updateFiles">
-                    <div style="width: calc(100% - 10px)" class="mb-1 flex shrink-0">
-                      <div style="width: 100%" class="pr-2">
+                    <div class="mb-1 flex shrink-0 w-full">
+                      <div class="w-full">
                         <OFile
                           :data-test="`${testPrefix}-import-json-file-input`"
                           v-model="jsonFiles"
@@ -147,7 +151,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     :data-test="`${testPrefix}-import-sql-editor`"
                     ref="queryEditorRef"
                     :editor-id="`${testPrefix}-import-query-editor`"
-                    class="import-editor-shell import-file-editor mx-2 flex-1 min-h-0"
+                    class="import-file-editor flex-1 min-h-0 border border-card-glass-border rounded-default overflow-hidden"
                     :debounceTime="300"
                     v-model:query="jsonStr"
                     language="json"
@@ -162,16 +166,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <template #after>
             <div
               :data-test="`${testPrefix}-import-output-editor`"
-              class="card-container w-full h-full flex flex-col min-h-0"
+              class="bg-card-glass-bg w-full h-full flex flex-col min-h-0"
             >
               <!-- Slot for complete output section customization -->
               <slot name="output-section">
                 <!-- Default output section - only shown if slot not used -->
                 <slot name="output-content">
-                  <div class="text-center text-[0.9375rem] font-semibold text-text-primary py-3 shrink-0">Output Messages</div>
+                  <div class="text-center text-sm font-semibold text-text-heading py-3 shrink-0">Output Messages</div>
                   <OSeparator class="mt-1 shrink-0" />
                   <div class="error-report-container flex-1 min-h-0 overflow-auto">
-                    <div class="text-center p-3 text-gray-400">
+                    <div class="text-center p-3 text-text-muted">
                       No messages to display
                     </div>
                   </div>
@@ -201,7 +205,7 @@ import {
 import { useI18n } from "vue-i18n";
 import axios from "axios";
 import AppTabs from "./AppTabs.vue";
-import AppPageHeader from "./AppPageHeader.vue";
+import OPageHeader from "@/lib/core/PageHeader/OPageHeader.vue";
 import OButton from "@/lib/core/Button/OButton.vue";
 import OInput from "@/lib/forms/Input/OInput.vue";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
@@ -219,7 +223,7 @@ export default defineComponent({
       () => import("@/components/CodeQueryEditor.vue"),
     ),
     AppTabs,
-    AppPageHeader,
+    OPageHeader,
     OButton,
     OInput,
     OIcon,
@@ -286,7 +290,7 @@ export default defineComponent({
     // Custom classes
     containerClass: {
       type: String,
-      default: "px-[0.625rem] mb-[0.625rem]",
+      default: "mb-2.5",
     },
     containerStyle: {
       type: String,
@@ -302,7 +306,7 @@ export default defineComponent({
     },
     titleClass: {
       type: String,
-      default: "font-[600] text-[20px]",
+      default: "font-[600] text-xl",
     },
     contentWrapperClass: {
       type: String,
@@ -541,29 +545,12 @@ export default defineComponent({
 </script>
 
 <style>
-/*
- * Box styling (border, radius, padding, height) lives on the editor SHELL
- * wrapper — never on Monaco's internal .monaco-editor element. Monaco sizes
- * its inner .overflow-guard to the full box it measures; adding border/padding
- * directly to that element shrinks the content box and forces phantom
- * horizontal + vertical scrollbars. Styling the wrapper lets Monaco fill a
- * clean box and removes the scrollbars without any !important overrides.
- */
-.import-editor-shell {
-  box-sizing: border-box;
-  /* w-full (100%) + mx-2 (1rem total) would overflow by 1rem and add a
-     horizontal scrollbar; subtract the margins so the box stays inside and
-     keeps a right-side gap. The height comes from flex (flex-1 min-h-0) so the
-     editor grows to fill the pane instead of a brittle calc(100vh - Npx). */
-  width: calc(100% - 1rem);
-  border: 1px solid var(--o2-border-color);
-  border-radius: 0.375rem;
-  overflow: hidden;
-}
-
+/* keep(scrollbar): cross-file shared scroll container. .error-report-container
+   supplies overflow scrolling to BaseImport, ImportAlert.vue and
+   ImportPipeline.vue (those two carry no local overflow utility), so the rule
+   must stay an unscoped global rather than be inlined here. */
 .error-report-container {
   overflow: auto;
   resize: none;
 }
-
 </style>
diff --git a/web/src/components/common/ConstrainedPage.vue b/web/src/components/common/ConstrainedPage.vue
index 9bcff96fca..d3f50b5625 100644
--- a/web/src/components/common/ConstrainedPage.vue
+++ b/web/src/components/common/ConstrainedPage.vue
@@ -23,7 +23,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
   Use it either:
     • directly  — wrap a section's content: <ConstrainedPage><MyForm/></ConstrainedPage>
-    • via PageLayout's `constrained` prop — PageLayout wraps its main slot in this.
+    • via OPageLayout's `constrained` prop — OPageLayout wraps its main slot in this.
 
   `size` maps to a fixed max-width (literal classes so Tailwind's scanner keeps
   them). `padded` toggles the default page gutter (px-6 py-6); turn it off when
diff --git a/web/src/components/common/DualListSelector.spec.ts b/web/src/components/common/DualListSelector.spec.ts
deleted file mode 100644
index 5101ee74ad..0000000000
--- a/web/src/components/common/DualListSelector.spec.ts
+++ /dev/null
@@ -1,696 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { mount } from "@vue/test-utils";
-import { describe, expect, it, beforeEach } from "vitest";
-import DualListSelector from "@/components/common/DualListSelector.vue";
-
-
-describe("DualListSelector", () => {
-  const mockItems = [
-    { label: "Item One", value: "item-1" },
-    { label: "Item Two", value: "item-2" },
-    { label: "Item Three", value: "item-3" },
-    { label: "Item Four", value: "item-4" },
-    { label: "Item Five", value: "item-5" },
-  ];
-
-  describe("Props and Initialization", () => {
-    it("renders with default props", () => {
-      const wrapper = mount(DualListSelector, {
-        props: {
-          modelValue: [],
-          allItems: mockItems,
-        },
-        global: {
-          stubs: {
-            "q-input": { template: "<input />" },
-            "q-list": { template: "<div><slot /></div>" },
-            "q-item": { template: "<div><slot /></div>" },
-            "q-item-section": { template: "<div><slot /></div>" },
-            "q-btn": { template: "<button @click='$attrs.onClick'><slot /></button>" },
-            "OIcon": { template: "<i />" },
-            "q-checkbox": { template: "<input type='checkbox' />" },
-            "q-tooltip": { template: "<div />" },
-          },
-        },
-      });
-
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it("uses custom titles", () => {
-      const wrapper = mount(DualListSelector, {
-        props: {
-          modelValue: [],
-          allItems: mockItems,
-          leftTitle: "Priority",
-          rightTitle: "Options",
-        },
-        global: {
-          stubs: {
-            "q-input": { template: "<input />" },
-            "q-list": { template: "<div><slot /></div>" },
-            "q-item": { template: "<div><slot /></div>" },
-            "q-item-section": { template: "<div><slot /></div>" },
-            "q-btn": { template: "<button />" },
-            "OIcon": { template: "<i />" },
-            "q-checkbox": { template: "<input type='checkbox' />" },
-            "q-tooltip": { template: "<div />" },
-          },
-        },
-      });
-
-      expect(wrapper.text()).toContain("Priority");
-      expect(wrapper.text()).toContain("Options");
-    });
-
-    it("displays pre-selected items", () => {
-      const wrapper = mount(DualListSelector, {
-        props: {
-          modelValue: ["item-1", "item-2"],
-          allItems: mockItems,
-        },
-        global: {
-          stubs: {
-            "q-input": { template: "<input />" },
-            "q-list": { template: "<div><slot /></div>" },
-            "q-item": { template: "<div><slot /></div>" },
-            "q-item-section": { template: "<div><slot /></div>" },
-            "q-btn": { template: "<button />" },
-            "OIcon": { template: "<i />" },
-            "q-checkbox": { template: "<input type='checkbox' />" },
-            "q-tooltip": { template: "<div />" },
-          },
-        },
-      });
-
-      expect(wrapper.vm.selectedItems).toHaveLength(2);
-      expect(wrapper.vm.availableItems).toHaveLength(3);
-    });
-  });
-
-  describe("Computed Properties", () => {
-    it("correctly calculates available items", () => {
-      const wrapper = mount(DualListSelector, {
-        props: {
-          modelValue: ["item-1", "item-3"],
-          allItems: mockItems,
-        },
-        global: {
-          stubs: {
-            "q-input": { template: "<input />" },
-            "q-list": { template: "<div><slot /></div>" },
-            "q-item": { template: "<div><slot /></div>" },
-            "q-item-section": { template: "<div><slot /></div>" },
-            "q-btn": { template: "<button />" },
-            "OIcon": { template: "<i />" },
-            "q-checkbox": { template: "<input type='checkbox' />" },
-            "q-tooltip": { template: "<div />" },
-          },
-        },
-      });
-
-      const available = wrapper.vm.availableItems;
-      expect(available).toHaveLength(3);
-      expect(available.map((i: any) => i.value)).toEqual(["item-2", "item-4", "item-5"]);
-    });
-
-    it("correctly maps selected items using itemsMap", () => {
-      const wrapper = mount(DualListSelector, {
-        props: {
-          modelValue: ["item-2", "item-4"],
-          allItems: mockItems,
-        },
-        global: {
-          stubs: {
-            "q-input": { template: "<input />" },
-            "q-list": { template: "<div><slot /></div>" },
-            "q-item": { template: "<div><slot /></div>" },
-            "q-item-section": { template: "<div><slot /></div>" },
-            "q-btn": { template: "<button />" },
-            "OIcon": { template: "<i />" },
-            "q-checkbox": { template: "<input type='checkbox' />" },
-            "q-tooltip": { template: "<div />" },
-          },
-        },
-      });
-
-      const selected = wrapper.vm.selectedItems;
-      expect(selected).toHaveLength(2);
-      expect(selected[0].label).toBe("Item Two");
-      expect(selected[1].label).toBe("Item Four");
-    });
-
-    it("filters selected items by search query", () => {
-      const wrapper = mount(DualListSelector, {
-        props: {
-          modelValue: ["item-1", "item-2", "item-3"],
-          allItems: mockItems,
-        },
-        global: {
-          stubs: {
-            "q-input": { template: "<input />" },
-            "q-list": { template: "<div><slot /></div>" },
-            "q-item": { template: "<div><slot /></div>" },
-            "q-item-section": { template: "<div><slot /></div>" },
-            "q-btn": { template: "<button />" },
-            "OIcon": { template: "<i />" },
-            "q-checkbox": { template: "<input type='checkbox' />" },
-            "q-tooltip": { template: "<div />" },
-          },
-        },
-      });
-
-      wrapper.vm.searchLeft = "two";
-      expect(wrapper.vm.filteredSelected).toHaveLength(1);
-      expect(wrapper.vm.filteredSelected[0].label).toBe("Item Two");
-    });
-
-    it("filters available items by search query", () => {
-      const wrapper = mount(DualListSelector, {
-        props: {
-          modelValue: ["item-1"],
-          allItems: mockItems,
-        },
-        global: {
-          stubs: {
-            "q-input": { template: "<input />" },
-            "q-list": { template: "<div><slot /></div>" },
-            "q-item": { template: "<div><slot /></div>" },
-            "q-item-section": { template: "<div><slot /></div>" },
-            "q-btn": { template: "<button />" },
-            "OIcon": { template: "<i />" },
-            "q-checkbox": { template: "<input type='checkbox' />" },
-            "q-tooltip": { template: "<div />" },
-          },
-        },
-      });
-
-      wrapper.vm.searchRight = "four";
-      expect(wrapper.vm.filteredAvailable).toHaveLength(1);
-      expect(wrapper.vm.filteredAvailable[0].label).toBe("Item Four");
-    });
-  });
-
-  describe("Selection Management", () => {
-    it("toggles left selection", () => {
-      const wrapper = mount(DualListSelector, {
-        props: {
-          modelValue: ["item-1", "item-2"],
-          allItems: mockItems,
-        },
-        global: {
-          stubs: {
-            "q-input": { template: "<input />" },
-            "q-list": { template: "<div><slot /></div>" },
-            "q-item": { template: "<div><slot /></div>" },
-            "q-item-section": { template: "<div><slot /></div>" },
-            "q-btn": { template: "<button />" },
-            "OIcon": { template: "<i />" },
-            "q-checkbox": { template: "<input type='checkbox' />" },
-            "q-tooltip": { template: "<div />" },
-          },
-        },
-      });
-
-      wrapper.vm.toggleLeftSelection("item-1");
-      expect(wrapper.vm.leftSelected).toContain("item-1");
-
-      wrapper.vm.toggleLeftSelection("item-1");
-      expect(wrapper.vm.leftSelected).not.toContain("item-1");
-    });
-
-    it("toggles right selection", () => {
-      const wrapper = mount(DualListSelector, {
-        props: {
-          modelValue: [],
-          allItems: mockItems,
-        },
-        global: {
-          stubs: {
-            "q-input": { template: "<input />" },
-            "q-list": { template: "<div><slot /></div>" },
-            "q-item": { template: "<div><slot /></div>" },
-            "q-item-section": { template: "<div><slot /></div>" },
-            "q-btn": { template: "<button />" },
-            "OIcon": { template: "<i />" },
-            "q-checkbox": { template: "<input type='checkbox' />" },
-            "q-tooltip": { template: "<div />" },
-          },
-        },
-      });
-
-      wrapper.vm.toggleRightSelection("item-1");
-      expect(wrapper.vm.rightSelected).toContain("item-1");
-
-      wrapper.vm.toggleRightSelection("item-1");
-      expect(wrapper.vm.rightSelected).not.toContain("item-1");
-    });
-  });
-
-  describe("Transfer Operations", () => {
-    it("adds selected items from right to left", async () => {
-      const wrapper = mount(DualListSelector, {
-        props: {
-          modelValue: [],
-          allItems: mockItems,
-        },
-        global: {
-          stubs: {
-            "q-input": { template: "<input />" },
-            "q-list": { template: "<div><slot /></div>" },
-            "q-item": { template: "<div><slot /></div>" },
-            "q-item-section": { template: "<div><slot /></div>" },
-            "q-btn": { template: "<button />" },
-            "OIcon": { template: "<i />" },
-            "q-checkbox": { template: "<input type='checkbox' />" },
-            "q-tooltip": { template: "<div />" },
-          },
-        },
-      });
-
-      wrapper.vm.rightSelected = ["item-1", "item-3"];
-      wrapper.vm.addSelected();
-
-      expect(wrapper.emitted("update:modelValue")).toBeTruthy();
-      expect(wrapper.emitted("update:modelValue")![0]).toEqual([["item-1", "item-3"]]);
-      expect(wrapper.vm.rightSelected).toHaveLength(0);
-    });
-
-    it("adds all items and clears selection", async () => {
-      const wrapper = mount(DualListSelector, {
-        props: {
-          modelValue: ["item-1"],
-          allItems: mockItems,
-        },
-        global: {
-          stubs: {
-            "q-input": { template: "<input />" },
-            "q-list": { template: "<div><slot /></div>" },
-            "q-item": { template: "<div><slot /></div>" },
-            "q-item-section": { template: "<div><slot /></div>" },
-            "q-btn": { template: "<button />" },
-            "OIcon": { template: "<i />" },
-            "q-checkbox": { template: "<input type='checkbox' />" },
-            "q-tooltip": { template: "<div />" },
-          },
-        },
-      });
-
-      wrapper.vm.rightSelected = ["item-2"];
-      wrapper.vm.addAll();
-
-      const emitted = wrapper.emitted("update:modelValue")![0][0] as string[];
-      expect(emitted).toHaveLength(5);
-      expect(emitted).toContain("item-1");
-      expect(emitted).toContain("item-2");
-      expect(wrapper.vm.rightSelected).toHaveLength(0);
-    });
-
-    it("removes selected items and clears selection", () => {
-      const wrapper = mount(DualListSelector, {
-        props: {
-          modelValue: ["item-1", "item-2", "item-3"],
-          allItems: mockItems,
-        },
-        global: {
-          stubs: {
-            "q-input": { template: "<input />" },
-            "q-list": { template: "<div><slot /></div>" },
-            "q-item": { template: "<div><slot /></div>" },
-            "q-item-section": { template: "<div><slot /></div>" },
-            "q-btn": { template: "<button />" },
-            "OIcon": { template: "<i />" },
-            "q-checkbox": { template: "<input type='checkbox' />" },
-            "q-tooltip": { template: "<div />" },
-          },
-        },
-      });
-
-      wrapper.vm.leftSelected = ["item-1", "item-3"];
-      wrapper.vm.removeSelected();
-
-      expect(wrapper.emitted("update:modelValue")![0]).toEqual([["item-2"]]);
-      expect(wrapper.vm.leftSelected).toHaveLength(0);
-    });
-
-    it("removes all items and clears both selections", () => {
-      const wrapper = mount(DualListSelector, {
-        props: {
-          modelValue: ["item-1", "item-2"],
-          allItems: mockItems,
-        },
-        global: {
-          stubs: {
-            "q-input": { template: "<input />" },
-            "q-list": { template: "<div><slot /></div>" },
-            "q-item": { template: "<div><slot /></div>" },
-            "q-item-section": { template: "<div><slot /></div>" },
-            "q-btn": { template: "<button />" },
-            "OIcon": { template: "<i />" },
-            "q-checkbox": { template: "<input type='checkbox' />" },
-            "q-tooltip": { template: "<div />" },
-          },
-        },
-      });
-
-      wrapper.vm.leftSelected = ["item-1"];
-      wrapper.vm.rightSelected = ["item-3"];
-      wrapper.vm.removeAll();
-
-      expect(wrapper.emitted("update:modelValue")![0]).toEqual([[]]);
-      expect(wrapper.vm.leftSelected).toHaveLength(0);
-      expect(wrapper.vm.rightSelected).toHaveLength(0);
-    });
-  });
-
-  describe("Reordering Operations", () => {
-    it("moves item up", () => {
-      const wrapper = mount(DualListSelector, {
-        props: {
-          modelValue: ["item-1", "item-2", "item-3"],
-          allItems: mockItems,
-        },
-        global: {
-          stubs: {
-            "q-input": { template: "<input />" },
-            "q-list": { template: "<div><slot /></div>" },
-            "q-item": { template: "<div><slot /></div>" },
-            "q-item-section": { template: "<div><slot /></div>" },
-            "q-btn": { template: "<button />" },
-            "OIcon": { template: "<i />" },
-            "q-checkbox": { template: "<input type='checkbox' />" },
-            "q-tooltip": { template: "<div />" },
-          },
-        },
-      });
-
-      wrapper.vm.moveUp(1);
-
-      expect(wrapper.emitted("update:modelValue")![0]).toEqual([
-        ["item-2", "item-1", "item-3"],
-      ]);
-    });
-
-    it("moves item down", () => {
-      const wrapper = mount(DualListSelector, {
-        props: {
-          modelValue: ["item-1", "item-2", "item-3"],
-          allItems: mockItems,
-        },
-        global: {
-          stubs: {
-            "q-input": { template: "<input />" },
-            "q-list": { template: "<div><slot /></div>" },
-            "q-item": { template: "<div><slot /></div>" },
-            "q-item-section": { template: "<div><slot /></div>" },
-            "q-btn": { template: "<button />" },
-            "OIcon": { template: "<i />" },
-            "q-checkbox": { template: "<input type='checkbox' />" },
-            "q-tooltip": { template: "<div />" },
-          },
-        },
-      });
-
-      wrapper.vm.moveDown(0);
-
-      expect(wrapper.emitted("update:modelValue")![0]).toEqual([
-        ["item-2", "item-1", "item-3"],
-      ]);
-    });
-
-    it("does not move up when at index 0", () => {
-      const wrapper = mount(DualListSelector, {
-        props: {
-          modelValue: ["item-1", "item-2"],
-          allItems: mockItems,
-        },
-        global: {
-          stubs: {
-            "q-input": { template: "<input />" },
-            "q-list": { template: "<div><slot /></div>" },
-            "q-item": { template: "<div><slot /></div>" },
-            "q-item-section": { template: "<div><slot /></div>" },
-            "q-btn": { template: "<button />" },
-            "OIcon": { template: "<i />" },
-            "q-checkbox": { template: "<input type='checkbox' />" },
-            "q-tooltip": { template: "<div />" },
-          },
-        },
-      });
-
-      wrapper.vm.moveUp(0);
-
-      expect(wrapper.emitted("update:modelValue")).toBeFalsy();
-    });
-
-    it("does not move down when at last index", () => {
-      const wrapper = mount(DualListSelector, {
-        props: {
-          modelValue: ["item-1", "item-2"],
-          allItems: mockItems,
-        },
-        global: {
-          stubs: {
-            "q-input": { template: "<input />" },
-            "q-list": { template: "<div><slot /></div>" },
-            "q-item": { template: "<div><slot /></div>" },
-            "q-item-section": { template: "<div><slot /></div>" },
-            "q-btn": { template: "<button />" },
-            "OIcon": { template: "<i />" },
-            "q-checkbox": { template: "<input type='checkbox' />" },
-            "q-tooltip": { template: "<div />" },
-          },
-        },
-      });
-
-      wrapper.vm.moveDown(1);
-
-      expect(wrapper.emitted("update:modelValue")).toBeFalsy();
-    });
-
-    it("removes single item", () => {
-      const wrapper = mount(DualListSelector, {
-        props: {
-          modelValue: ["item-1", "item-2", "item-3"],
-          allItems: mockItems,
-        },
-        global: {
-          stubs: {
-            "q-input": { template: "<input />" },
-            "q-list": { template: "<div><slot /></div>" },
-            "q-item": { template: "<div><slot /></div>" },
-            "q-item-section": { template: "<div><slot /></div>" },
-            "q-btn": { template: "<button />" },
-            "OIcon": { template: "<i />" },
-            "q-checkbox": { template: "<input type='checkbox' />" },
-            "q-tooltip": { template: "<div />" },
-          },
-        },
-      });
-
-      wrapper.vm.removeItem("item-2");
-
-      expect(wrapper.emitted("update:modelValue")![0]).toEqual([
-        ["item-1", "item-3"],
-      ]);
-    });
-  });
-
-  describe("Edge Cases", () => {
-    it("handles empty allItems array", () => {
-      const wrapper = mount(DualListSelector, {
-        props: {
-          modelValue: [],
-          allItems: [],
-        },
-        global: {
-          stubs: {
-            "q-input": { template: "<input />" },
-            "q-list": { template: "<div><slot /></div>" },
-            "q-item": { template: "<div><slot /></div>" },
-            "q-item-section": { template: "<div><slot /></div>" },
-            "q-btn": { template: "<button />" },
-            "OIcon": { template: "<i />" },
-            "q-checkbox": { template: "<input type='checkbox' />" },
-            "q-tooltip": { template: "<div />" },
-          },
-        },
-      });
-
-      expect(wrapper.vm.availableItems).toHaveLength(0);
-      expect(wrapper.vm.selectedItems).toHaveLength(0);
-    });
-
-    it("handles single item in modelValue", () => {
-      const wrapper = mount(DualListSelector, {
-        props: {
-          modelValue: ["item-1"],
-          allItems: mockItems,
-        },
-        global: {
-          stubs: {
-            "q-input": { template: "<input />" },
-            "q-list": { template: "<div><slot /></div>" },
-            "q-item": { template: "<div><slot /></div>" },
-            "q-item-section": { template: "<div><slot /></div>" },
-            "q-btn": { template: "<button />" },
-            "OIcon": { template: "<i />" },
-            "q-checkbox": { template: "<input type='checkbox' />" },
-            "q-tooltip": { template: "<div />" },
-          },
-        },
-      });
-
-      expect(wrapper.vm.selectedItems).toHaveLength(1);
-      wrapper.vm.moveUp(0);
-      expect(wrapper.emitted("update:modelValue")).toBeFalsy();
-      wrapper.vm.moveDown(0);
-      expect(wrapper.emitted("update:modelValue")).toBeFalsy();
-    });
-
-    it("handles search with no results", () => {
-      const wrapper = mount(DualListSelector, {
-        props: {
-          modelValue: ["item-1"],
-          allItems: mockItems,
-        },
-        global: {
-          stubs: {
-            "q-input": { template: "<input />" },
-            "q-list": { template: "<div><slot /></div>" },
-            "q-item": { template: "<div><slot /></div>" },
-            "q-item-section": { template: "<div><slot /></div>" },
-            "q-btn": { template: "<button />" },
-            "OIcon": { template: "<i />" },
-            "q-checkbox": { template: "<input type='checkbox' />" },
-            "q-tooltip": { template: "<div />" },
-          },
-        },
-      });
-
-      wrapper.vm.searchLeft = "nonexistent";
-      expect(wrapper.vm.filteredSelected).toHaveLength(0);
-
-      wrapper.vm.searchRight = "xyz";
-      expect(wrapper.vm.filteredAvailable).toHaveLength(0);
-    });
-
-    it("handles invalid value in modelValue gracefully", () => {
-      const wrapper = mount(DualListSelector, {
-        props: {
-          modelValue: ["item-1", "invalid-item", "item-2"],
-          allItems: mockItems,
-        },
-        global: {
-          stubs: {
-            "q-input": { template: "<input />" },
-            "q-list": { template: "<div><slot /></div>" },
-            "q-item": { template: "<div><slot /></div>" },
-            "q-item-section": { template: "<div><slot /></div>" },
-            "q-btn": { template: "<button />" },
-            "OIcon": { template: "<i />" },
-            "q-checkbox": { template: "<input type='checkbox' />" },
-            "q-tooltip": { template: "<div />" },
-          },
-        },
-      });
-
-      // Should filter out invalid items
-      expect(wrapper.vm.selectedItems).toHaveLength(2);
-      expect(wrapper.vm.selectedItems.map((i: any) => i.value)).toEqual(["item-1", "item-2"]);
-    });
-  });
-
-  describe("Event Emissions", () => {
-    it("emits update:modelValue on addSelected", () => {
-      const wrapper = mount(DualListSelector, {
-        props: {
-          modelValue: [],
-          allItems: mockItems,
-        },
-        global: {
-          stubs: {
-            "q-input": { template: "<input />" },
-            "q-list": { template: "<div><slot /></div>" },
-            "q-item": { template: "<div><slot /></div>" },
-            "q-item-section": { template: "<div><slot /></div>" },
-            "q-btn": { template: "<button />" },
-            "OIcon": { template: "<i />" },
-            "q-checkbox": { template: "<input type='checkbox' />" },
-            "q-tooltip": { template: "<div />" },
-          },
-        },
-      });
-
-      wrapper.vm.rightSelected = ["item-1"];
-      wrapper.vm.addSelected();
-
-      expect(wrapper.emitted()).toHaveProperty("update:modelValue");
-      expect(wrapper.emitted("update:modelValue")![0][0]).toEqual(["item-1"]);
-    });
-
-    it("emits update:modelValue on moveUp", () => {
-      const wrapper = mount(DualListSelector, {
-        props: {
-          modelValue: ["item-1", "item-2"],
-          allItems: mockItems,
-        },
-        global: {
-          stubs: {
-            "q-input": { template: "<input />" },
-            "q-list": { template: "<div><slot /></div>" },
-            "q-item": { template: "<div><slot /></div>" },
-            "q-item-section": { template: "<div><slot /></div>" },
-            "q-btn": { template: "<button />" },
-            "OIcon": { template: "<i />" },
-            "q-checkbox": { template: "<input type='checkbox' />" },
-            "q-tooltip": { template: "<div />" },
-          },
-        },
-      });
-
-      wrapper.vm.moveUp(1);
-
-      expect(wrapper.emitted("update:modelValue")![0][0]).toEqual(["item-2", "item-1"]);
-    });
-
-    it("emits update:modelValue on removeItem", () => {
-      const wrapper = mount(DualListSelector, {
-        props: {
-          modelValue: ["item-1", "item-2", "item-3"],
-          allItems: mockItems,
-        },
-        global: {
-          stubs: {
-            "q-input": { template: "<input />" },
-            "q-list": { template: "<div><slot /></div>" },
-            "q-item": { template: "<div><slot /></div>" },
-            "q-item-section": { template: "<div><slot /></div>" },
-            "q-btn": { template: "<button />" },
-            "OIcon": { template: "<i />" },
-            "q-checkbox": { template: "<input type='checkbox' />" },
-            "q-tooltip": { template: "<div />" },
-          },
-        },
-      });
-
-      wrapper.vm.removeItem("item-2");
-
-      expect(wrapper.emitted("update:modelValue")![0][0]).toEqual(["item-1", "item-3"]);
-    });
-  });
-});
diff --git a/web/src/components/common/DualListSelector.vue b/web/src/components/common/DualListSelector.vue
deleted file mode 100644
index be6b164a58..0000000000
--- a/web/src/components/common/DualListSelector.vue
+++ /dev/null
@@ -1,270 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <div class="flex gap-4">
-    <!-- Priority Order (Left) -->
-    <div class="flex-1 border rounded p-4">
-      <div class="text-sm font-semibold mb-3">{{ leftTitle }}</div>
-      <OSearchInput v-model="searchLeft" placeholder="Search..." class="mb-3" />
-      <div class="border rounded min-h-80 max-h-96 overflow-auto">
-        <ul class="flex flex-col">
-          <li
-            v-for="(item, index) in filteredSelected"
-            :key="item.value"
-            data-test="dual-list-selector-left-item"
-            class="flex items-center gap-2 px-3 py-1 cursor-pointer hover:bg-muted/50"
-            :class="{ 'bg-muted/30': leftSelected.includes(item.value) }"
-            @click="toggleLeftSelection(item.value)"
-          >
-            <div class="flex items-center shrink-0">
-              <span class="text-xs font-bold">{{ index + 1 }}</span>
-            </div>
-            <div class="flex flex-1 min-w-0 text-sm">{{ item.label }}</div>
-            <div class="flex items-center shrink-0 ms-auto">
-              <div class="flex gap-1">
-                <OButton
-                  variant="ghost"
-                  size="icon-xs"
-                  :disabled="index === 0"
-                  @click.stop="moveUp(index)"
-                >
-                  <OIcon name="arrow-upward" size="xs" />
-                </OButton>
-                <OButton
-                  variant="ghost"
-                  size="icon-xs"
-                  :disabled="index === modelValue.length - 1"
-                  @click.stop="moveDown(index)"
-                >
-                  <OIcon name="arrow-downward" size="xs" />
-                </OButton>
-                <OButton
-                  variant="ghost-destructive"
-                  size="icon-xs"
-                  @click.stop="removeItem(item.value)"
-                >
-                  <OIcon name="delete" size="xs" />
-                </OButton>
-              </div>
-            </div>
-          </li>
-          <li
-            v-if="filteredSelected.length === 0"
-            class="flex items-center gap-2 px-3 py-2 text-gray-400 text-center text-sm justify-center"
-          >
-            No items selected
-          </li>
-        </ul>
-      </div>
-    </div>
-
-    <!-- Center Buttons -->
-    <div class="flex flex-col justify-center gap-2">
-      <OButton
-        variant="outline"
-        size="icon-sm"
-        :disabled="rightSelected.length === 0"
-        @click="addSelected"
-      >
-        <OIcon name="arrow-back" size="sm" />
-        <OTooltip content="Add selected" />
-      </OButton>
-      <OButton
-        variant="outline"
-        size="icon-sm"
-        :disabled="availableItems.length === 0"
-        @click="addAll"
-      >
-        <OIcon name="keyboard-double-arrow-left" size="sm" />
-        <OTooltip content="Add all" />
-      </OButton>
-      <OButton
-        variant="outline"
-        size="icon-sm"
-        :disabled="leftSelected.length === 0"
-        @click="removeSelected"
-      >
-        <OIcon name="arrow-forward" size="sm" />
-        <OTooltip content="Remove selected" />
-      </OButton>
-      <OButton
-        variant="outline"
-        size="icon-sm"
-        :disabled="modelValue.length === 0"
-        @click="removeAll"
-      >
-        <OIcon name="keyboard-double-arrow-right" size="sm" />
-        <OTooltip content="Remove all" />
-      </OButton>
-    </div>
-
-    <!-- Available Items (Right) -->
-    <div class="flex-1 border rounded p-4">
-      <div class="text-sm font-semibold mb-3">{{ rightTitle }}</div>
-      <OSearchInput v-model="searchRight" placeholder="Search..." class="mb-3" />
-      <div class="border rounded min-h-80 max-h-96 overflow-auto">
-        <ul class="flex flex-col">
-          <li
-            v-for="item in filteredAvailable"
-            :key="item.value"
-            data-test="dual-list-selector-right-item"
-            class="flex items-center gap-2 px-3 py-1 cursor-pointer hover:bg-muted/50"
-            :class="{ 'bg-muted/30': rightSelected.includes(item.value) }"
-            @click="toggleRightSelection(item.value)"
-          >
-            <div class="flex items-center shrink-0">
-              <OCheckbox
-                :model-value="rightSelected.includes(item.value)"
-                @click.stop="toggleRightSelection(item.value)"
-              />
-            </div>
-            <div class="flex flex-1 min-w-0 text-sm">{{ item.label }}</div>
-          </li>
-          <li
-            v-if="filteredAvailable.length === 0"
-            class="flex items-center gap-2 px-3 py-2 text-gray-400 text-center text-sm justify-center"
-          >
-            No items available
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from 'vue';
-import OButton from '@/lib/core/Button/OButton.vue';
-import OSearchInput from '@/lib/forms/SearchInput/OSearchInput.vue';
-import OTooltip from '@/lib/overlay/Tooltip/OTooltip.vue';
-import OCheckbox from '@/lib/forms/Checkbox/OCheckbox.vue';
-import OIcon from "@/lib/core/Icon/OIcon.vue";
-
-interface Item {
-  label: string;
-  value: string;
-}
-
-interface Props {
-  modelValue: string[];
-  allItems: Item[];
-  leftTitle?: string;
-  rightTitle?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  leftTitle: 'Selected',
-  rightTitle: 'Available',
-});
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: string[]): void;
-}>();
-
-const searchLeft = ref('');
-const searchRight = ref('');
-const leftSelected = ref<string[]>([]);
-const rightSelected = ref<string[]>([]);
-
-// Create a map for O(1) lookups instead of O(n) find operations
-const itemsMap = computed(() =>
-  new Map(props.allItems.map(item => [item.value, item]))
-);
-
-const availableItems = computed(() => {
-  return props.allItems.filter(item => !props.modelValue.includes(item.value));
-});
-
-const selectedItems = computed(() => {
-  return props.modelValue
-    .map(value => itemsMap.value.get(value))
-    .filter((item): item is Item => item !== undefined);
-});
-
-const filteredSelected = computed(() => {
-  if (!searchLeft.value) return selectedItems.value;
-  const query = searchLeft.value.toLowerCase();
-  return selectedItems.value.filter(item => item.label.toLowerCase().includes(query));
-});
-
-const filteredAvailable = computed(() => {
-  if (!searchRight.value) return availableItems.value;
-  const query = searchRight.value.toLowerCase();
-  return availableItems.value.filter(item => item.label.toLowerCase().includes(query));
-});
-
-const toggleLeftSelection = (value: string) => {
-  const index = leftSelected.value.indexOf(value);
-  if (index > -1) {
-    leftSelected.value.splice(index, 1);
-  } else {
-    leftSelected.value.push(value);
-  }
-};
-
-const toggleRightSelection = (value: string) => {
-  const index = rightSelected.value.indexOf(value);
-  if (index > -1) {
-    rightSelected.value.splice(index, 1);
-  } else {
-    rightSelected.value.push(value);
-  }
-};
-
-const addSelected = () => {
-  const newValue = [...props.modelValue, ...rightSelected.value];
-  emit('update:modelValue', newValue);
-  rightSelected.value = [];
-};
-
-const addAll = () => {
-  const newValue = [...props.modelValue, ...availableItems.value.map(i => i.value)];
-  emit('update:modelValue', newValue);
-  rightSelected.value = [];
-};
-
-const removeSelected = () => {
-  const newValue = props.modelValue.filter(v => !leftSelected.value.includes(v));
-  emit('update:modelValue', newValue);
-  leftSelected.value = [];
-};
-
-const removeAll = () => {
-  emit('update:modelValue', []);
-  leftSelected.value = [];
-  rightSelected.value = [];
-};
-
-const removeItem = (value: string) => {
-  const newValue = props.modelValue.filter(v => v !== value);
-  emit('update:modelValue', newValue);
-};
-
-const moveUp = (index: number) => {
-  if (index === 0) return;
-  const newValue = [...props.modelValue];
-  [newValue[index - 1], newValue[index]] = [newValue[index], newValue[index - 1]];
-  emit('update:modelValue', newValue);
-};
-
-const moveDown = (index: number) => {
-  if (index === props.modelValue.length - 1) return;
-  const newValue = [...props.modelValue];
-  [newValue[index], newValue[index + 1]] = [newValue[index + 1], newValue[index]];
-  emit('update:modelValue', newValue);
-};
-</script>
diff --git a/web/src/components/common/ErrorDetailPanel.vue b/web/src/components/common/ErrorDetailPanel.vue
index 2f51ab581e..15fc439f04 100644
--- a/web/src/components/common/ErrorDetailPanel.vue
+++ b/web/src/components/common/ErrorDetailPanel.vue
@@ -26,7 +26,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
   <div
-    class="text-left rounded-lg border border-border-default bg-surface-panel flex flex-col"
+    class="text-left rounded-default border border-border-default bg-surface-panel flex flex-col"
     data-test="error-detail-panel"
   >
     <!-- Summary row (always shown) -->
@@ -40,7 +40,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </p>
       <small
         v-if="traceId"
-        class="text-text-caption"
+        class="text-text-secondary"
         data-test="error-detail-trace-id"
       >
         <span class="font-medium">{{ t("queryError.traceId") }}</span>
diff --git a/web/src/components/common/FieldExpansion.vue b/web/src/components/common/FieldExpansion.vue
index 647b552903..5280ac58de 100644
--- a/web/src/components/common/FieldExpansion.vue
+++ b/web/src/components/common/FieldExpansion.vue
@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <OCollapsible
     :model-value="isExpanded"
     @update:model-value="handleToggle"
-    class="field-expansion-item w-full rounded overflow-hidden"
+    class="field-expansion-item w-full rounded-default overflow-hidden"
     trigger-class="px-0! py-0!"
   >
     <template #trigger>
@@ -28,7 +28,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       >
         <span class="w-[0.55rem] shrink-0 flex items-center justify-center mr-1">
           <OIcon
-            class="inline-flex items-center justify-center shrink-0 w-4 text-[var(--o2-text-muted)]"
+            class="inline-flex items-center justify-center shrink-0 w-4 text-text-muted"
             :name="isExpanded ? 'expand-more' : 'chevron-right'"
             size="sm"
           />
@@ -104,7 +104,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </OFieldRow>
     </template>
 
-    <div class="pl-4 pr-0 py-0">
+    <div class="pl-4 pr-2 py-0">
         <slot name="body">
           <FieldValuesPanel
             ref="fieldValuesPanelRef"
@@ -248,17 +248,18 @@ const handleToggle = (val: boolean) => {
 defineExpose({ reset: () => fieldValuesPanelRef.value?.reset() });
 </script>
 
-<style>
-.field-expansion-item button[data-state]:not([role="checkbox"]) {
-  min-height: 24px !important;
+<style scoped>
+/* keep(complex-state): :deep overrides of the child collapsible's trigger button
+   and content wrapper; the [data-state] rule targets this component's own item. */
+.field-expansion-item :deep(button[data-state]:not([role="checkbox"])) {
+  min-height: 1.5rem !important;
 }
 
-.field-expansion-item .o-collapsible-content {
+.field-expansion-item :deep(.o-collapsible-content) {
   width: 100%;
 }
 
 .field-expansion-item[data-state="open"] {
   margin-bottom: 0.375rem;
 }
-
 </style>
diff --git a/web/src/components/common/FieldListPagination.vue b/web/src/components/common/FieldListPagination.vue
index f97c78c01b..0932da6545 100644
--- a/web/src/components/common/FieldListPagination.vue
+++ b/web/src/components/common/FieldListPagination.vue
@@ -16,7 +16,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <div
-    class="justify-between w-full py-px px-1 border-t border-(--o2-border-color) bg-(--o2-card-bg)"
+    class="justify-between w-full py-px px-1 border-t border-card-glass-border bg-card-glass-bg"
     :class="showSchemaToggle || showQuickMode ? 'flex' : ''"
   >
     <!-- Schema Toggle Buttons -->
@@ -41,8 +41,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           "
         >
           <template v-if="opt.slot === 'user_defined_slot'">
-            <OIcon name="person" size="xs" class="text-[10px]!"></OIcon>
-            <OIcon name="schema" size="xs" class="text-[10px]!"></OIcon>
+            <OIcon name="person" size="xs" class="text-3xs!"></OIcon>
+            <OIcon name="schema" size="xs" class="text-3xs!"></OIcon>
             <OTooltip
               :data-test="`${dataTestPrefix}-fields-list-user-defined-fields-warning-tooltip`"
               :content="t('search.userDefinedSchemaLabel')"
@@ -52,7 +52,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             />
           </template>
           <template v-else-if="opt.slot === 'all_fields_slot'">
-            <OIcon name="schema" size="xs" class="text-[10px]!"></OIcon>
+            <OIcon name="schema" size="xs" class="text-3xs!"></OIcon>
             <OTooltip
               :data-test="`${dataTestPrefix}-fields-list-all-fields-warning-tooltip`"
               max-width="18.75rem"
@@ -69,8 +69,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <template
             v-else-if="opt.slot === 'interesting_fields_slot' && showQuickMode"
           >
-            <OIcon name="info-outline" size="xs" class="text-[10px]!" />
-            <OIcon name="schema" size="xs" class="text-[10px]!"></OIcon>
+            <OIcon name="info-outline" size="xs" class="text-3xs!" />
+            <OIcon name="schema" size="xs" class="text-3xs!"></OIcon>
             <OTooltip
               :content="t('search.showOnlyInterestingFields')"
               max-width="18.75rem"
@@ -99,7 +99,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :data-test="opt.slot === 'all_fields_slot' ? `${dataTestPrefix}-all-fields-btn` : `${dataTestPrefix}-interesting-fields-btn`"
         >
           <template v-if="opt.slot === 'all_fields_slot'">
-            <OIcon name="schema" size="xs" class="text-[10px]!"></OIcon>
+            <OIcon name="schema" size="xs" class="text-3xs!"></OIcon>
             <OTooltip
               :data-test="`${dataTestPrefix}-fields-list-all-fields-warning-tooltip`"
               max-width="18.75rem"
@@ -116,8 +116,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <template
             v-else-if="opt.slot === 'interesting_fields_slot' && showQuickMode"
           >
-            <OIcon name="info-outline" size="xs" class="text-[10px]!" />
-            <OIcon name="schema" size="xs" class="text-[10px]!"></OIcon>
+            <OIcon name="info-outline" size="xs" class="text-3xs!" />
+            <OIcon name="schema" size="xs" class="text-3xs!"></OIcon>
             <OTooltip
               :content="t('search.showOnlyInterestingFields')"
               max-width="18.75rem"
@@ -271,12 +271,13 @@ const visiblePages = computed(() => {
 });
 </script>
 
-<style>
-.schema-field-toggle [role="group"] {
+<style scoped>
+/* keep(complex-state): :deep overrides of the child toggle-group's [role=group] internals */
+.schema-field-toggle :deep([role="group"]) {
   gap: 0.125rem;
 }
 
-.schema-field-toggle [role="group"] > * {
+.schema-field-toggle :deep([role="group"]) > * {
   gap: 0.25rem;
   height: 1.375rem;
   min-height: unset;
diff --git a/web/src/components/common/FieldRow.vue b/web/src/components/common/FieldRow.vue
index 62ddebca17..76d91bf863 100644
--- a/web/src/components/common/FieldRow.vue
+++ b/web/src/components/common/FieldRow.vue
@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <OFieldRow
     v-if="(field.ftsKey && !showFtsFieldValues) || !field.isSchemaField || !field.showValues"
     :data-test="`logs-field-list-item-${field.name}`"
-    class="pl-[1.5rem]"
+    class="pl-6"
     :highlight="isFieldSelected && field.name !== timestampColumn"
   >
     <OFieldLabel :field="field" :show-type-icon="false" />
diff --git a/web/src/components/common/FieldTypeBadge.spec.ts b/web/src/components/common/FieldTypeBadge.spec.ts
deleted file mode 100644
index 8848328f0a..0000000000
--- a/web/src/components/common/FieldTypeBadge.spec.ts
+++ /dev/null
@@ -1,204 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { mount } from "@vue/test-utils";
-import { describe, it, expect } from "vitest";
-import FieldTypeBadge from "@/components/common/FieldTypeBadge.vue";
-
-describe("FieldTypeBadge.vue", () => {
-  const createWrapper = (props: Record<string, any> = {}) =>
-    mount(FieldTypeBadge, { props });
-
-  // ─── Rendering ───────────────────────────────────────────────────────────────
-
-  describe("Rendering", () => {
-    it("does not render when dataType is undefined", () => {
-      const wrapper = createWrapper();
-      expect(wrapper.find('[data-test="common-field-type-badge"]').exists()).toBe(false);
-    });
-
-    it("does not render when dataType is empty string", () => {
-      const wrapper = createWrapper({ dataType: "" });
-      expect(wrapper.find('[data-test="common-field-type-badge"]').exists()).toBe(false);
-    });
-
-    it("renders a badge when dataType is provided", () => {
-      const wrapper = createWrapper({ dataType: "string" });
-      expect(wrapper.find('[data-test="common-field-type-badge"]').exists()).toBe(true);
-    });
-
-    it("sets title attribute to the raw dataType value", () => {
-      const wrapper = createWrapper({ dataType: "int64" });
-      expect(wrapper.find('[data-test="common-field-type-badge"]').attributes("title")).toBe("int64");
-    });
-  });
-
-  // ─── Boolean ─────────────────────────────────────────────────────────────────
-
-  describe("Boolean type", () => {
-    it("shows label 'B' for boolean", () => {
-      const wrapper = createWrapper({ dataType: "boolean" });
-      expect(wrapper.find('[data-test="common-field-type-badge"]').text()).toBe("B");
-    });
-
-    it("is case-insensitive for BOOLEAN", () => {
-      const wrapper = createWrapper({ dataType: "BOOLEAN" });
-      expect(wrapper.find('[data-test="common-field-type-badge"]').text()).toBe("B");
-    });
-
-    it("uses boolean CSS variable for background color", () => {
-      const wrapper = createWrapper({ dataType: "boolean" });
-      const style = wrapper.find('[data-test="common-field-type-badge"]').attributes("style") ?? "";
-      expect(style).toContain("o2-field-type-boolean-bg");
-    });
-  });
-
-  // ─── Float ───────────────────────────────────────────────────────────────────
-
-  describe("Float type", () => {
-    it("shows label '~' for float64", () => {
-      expect(createWrapper({ dataType: "float64" }).find('[data-test="common-field-type-badge"]').text()).toBe("~");
-    });
-
-    it("shows label '~' for float32", () => {
-      expect(createWrapper({ dataType: "float32" }).find('[data-test="common-field-type-badge"]').text()).toBe("~");
-    });
-
-    it("shows label '~' for FLOAT (uppercase)", () => {
-      expect(createWrapper({ dataType: "FLOAT" }).find('[data-test="common-field-type-badge"]').text()).toBe("~");
-    });
-
-    it("uses float CSS variable for background color", () => {
-      const style = createWrapper({ dataType: "float64" })
-        .find('[data-test="common-field-type-badge"]')
-        .attributes("style") ?? "";
-      expect(style).toContain("o2-field-type-float-bg");
-    });
-  });
-
-  // ─── Integer / UInt ──────────────────────────────────────────────────────────
-
-  describe("Integer / UInt types", () => {
-    const intTypes = ["int8", "int16", "int32", "int64", "uint8", "uint16", "uint32", "uint64"];
-
-    intTypes.forEach((t) => {
-      it(`shows label '#' for ${t}`, () => {
-        expect(createWrapper({ dataType: t }).find('[data-test="common-field-type-badge"]').text()).toBe("#");
-      });
-    });
-
-    it("uses number CSS variable for background color", () => {
-      const style = createWrapper({ dataType: "int32" })
-        .find('[data-test="common-field-type-badge"]')
-        .attributes("style") ?? "";
-      expect(style).toContain("o2-field-type-number-bg");
-    });
-  });
-
-  // ─── Timestamp / Date ────────────────────────────────────────────────────────
-
-  describe("Timestamp / Date types", () => {
-    const tsTypes = ["timestamp", "date32", "date64", "date"];
-
-    tsTypes.forEach((t) => {
-      it(`shows label 'T' for ${t}`, () => {
-        expect(createWrapper({ dataType: t }).find('[data-test="common-field-type-badge"]').text()).toBe("T");
-      });
-    });
-
-    it("shows label 'T' for TIMESTAMP (uppercase)", () => {
-      expect(createWrapper({ dataType: "TIMESTAMP" }).find('[data-test="common-field-type-badge"]').text()).toBe("T");
-    });
-
-    it("uses timestamp CSS variable for background color", () => {
-      const style = createWrapper({ dataType: "timestamp" })
-        .find('[data-test="common-field-type-badge"]')
-        .attributes("style") ?? "";
-      expect(style).toContain("o2-field-type-timestamp-bg");
-    });
-  });
-
-  // ─── String (default) ────────────────────────────────────────────────────────
-
-  describe("String type (default)", () => {
-    it("shows label 'S' for string", () => {
-      expect(createWrapper({ dataType: "string" }).find('[data-test="common-field-type-badge"]').text()).toBe("S");
-    });
-
-    it("shows label 'S' for utf8", () => {
-      expect(createWrapper({ dataType: "utf8" }).find('[data-test="common-field-type-badge"]').text()).toBe("S");
-    });
-
-    it("shows label 'S' for unknown / unsupported types", () => {
-      expect(createWrapper({ dataType: "customtype" }).find('[data-test="common-field-type-badge"]').text()).toBe("S");
-    });
-
-    it("uses string CSS variable for background color", () => {
-      const style = createWrapper({ dataType: "string" })
-        .find('[data-test="common-field-type-badge"]')
-        .attributes("style") ?? "";
-      expect(style).toContain("o2-field-type-string-bg");
-    });
-  });
-
-  // ─── Computed `info` property ────────────────────────────────────────────────
-
-  describe("Computed `info` property", () => {
-    it("returns null when dataType is empty", () => {
-      const wrapper = createWrapper({ dataType: "" });
-      expect((wrapper.vm as any).info).toBeNull();
-    });
-
-    it("returns object with label, color, and textColor for valid type", () => {
-      const wrapper = createWrapper({ dataType: "boolean" });
-      const info = (wrapper.vm as any).info;
-      expect(info).not.toBeNull();
-      expect(info).toHaveProperty("label");
-      expect(info).toHaveProperty("color");
-      expect(info).toHaveProperty("textColor");
-    });
-
-    it("info.label is 'B' for boolean", () => {
-      expect((createWrapper({ dataType: "boolean" }).vm as any).info.label).toBe("B");
-    });
-
-    it("info.label is '~' for float", () => {
-      expect((createWrapper({ dataType: "float64" }).vm as any).info.label).toBe("~");
-    });
-
-    it("info.label is '#' for int", () => {
-      expect((createWrapper({ dataType: "int32" }).vm as any).info.label).toBe("#");
-    });
-
-    it("info.label is 'T' for timestamp", () => {
-      expect((createWrapper({ dataType: "timestamp" }).vm as any).info.label).toBe("T");
-    });
-
-    it("info.label is 'S' for string", () => {
-      expect((createWrapper({ dataType: "string" }).vm as any).info.label).toBe("S");
-    });
-  });
-
-  // ─── Inline style binding ────────────────────────────────────────────────────
-
-  describe("Inline style binding", () => {
-    it("applies both backgroundColor and color style properties", () => {
-      const wrapper = createWrapper({ dataType: "string" });
-      const style = wrapper.find('[data-test="common-field-type-badge"]').attributes("style") ?? "";
-      expect(style).toContain("background-color");
-      expect(style).toContain("color");
-    });
-  });
-});
\ No newline at end of file
diff --git a/web/src/components/common/FieldTypeBadge.vue b/web/src/components/common/FieldTypeBadge.vue
deleted file mode 100644
index 2e6ba51e2a..0000000000
--- a/web/src/components/common/FieldTypeBadge.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <span
-    v-if="info"
-    data-test="common-field-type-badge"
-    class="inline-flex items-center justify-center w-4 h-4 rounded-[0.2rem] text-[0.6rem] font-bold mr-[0.3rem] shrink-0 align-middle"
-    :style="{ backgroundColor: info.color, color: info.textColor }"
-    :title="dataType"
-  >{{ info.label }}</span>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-
-const props = defineProps<{
-  dataType?: string;
-}>();
-
-const info = computed(() => {
-  const t = (props.dataType || "").toLowerCase();
-  if (!t) return null;
-  if (t === "boolean")
-    return {
-      label: "B",
-      color: "var(--o2-field-type-boolean-bg)",
-      textColor: "var(--o2-field-type-boolean-text)",
-    };
-  if (t.includes("float"))
-    return {
-      label: "~",
-      color: "var(--o2-field-type-float-bg)",
-      textColor: "var(--o2-field-type-float-text)",
-    };
-  if (t.includes("int") || t.includes("uint"))
-    return {
-      label: "#",
-      color: "var(--o2-field-type-number-bg)",
-      textColor: "var(--o2-field-type-number-text)",
-    };
-  if (
-    t.includes("timestamp") ||
-    t === "date32" ||
-    t === "date64" ||
-    t === "date"
-  )
-    return {
-      label: "T",
-      color: "var(--o2-field-type-timestamp-bg)",
-      textColor: "var(--o2-field-type-timestamp-text)",
-    };
-  return {
-    label: "S",
-    color: "var(--o2-field-type-string-bg)",
-    textColor: "var(--o2-field-type-string-text)",
-  };
-});
-</script>
-
diff --git a/web/src/components/common/FieldValuesPanel.vue b/web/src/components/common/FieldValuesPanel.vue
index deeee6dc38..a93f890eb1 100644
--- a/web/src/components/common/FieldValuesPanel.vue
+++ b/web/src/components/common/FieldValuesPanel.vue
@@ -32,18 +32,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <!-- Filter mode toggle + selection count -->
     <div
       v-if="showMultiSelect"
-      class="filter-mode-bar flex items-center justify-between px-2 py-1 border-b border-(--o2-border-color)"
+      class="filter-mode-bar flex items-center justify-between px-2 py-1 border-b border-card-glass-border"
       data-test="field-values-panel-filter-mode-bar"
     >
       <div class="flex items-center gap-1 ">
         <span
           v-if="selectedValues.length > 0"
-          class="selection-count text-3! text-[0.625rem] font-medium text-[var(--o2-primary-color)]"
+          class="selection-count text-3! text-3xs font-medium text-accent"
           data-test="field-values-panel-selection-count"
         >
           {{ selectedValues.length }} selected
         </span>
-        <span v-else class="selection-hint  text-3! text-[0.625rem] text-[var(--o2-text-secondary)]">Select to filter</span>
+        <span v-else class="selection-hint  text-3! text-3xs text-text-secondary">Select to filter</span>
         <OButton
           v-if="selectedValues.length > 0"
           variant="ghost"
@@ -57,7 +57,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </OButton>
       </div>
       <div
-        class="filter-mode-toggle flex border border-[var(--o2-border-color)] rounded overflow-hidden"
+        class="filter-mode-toggle flex border border-card-glass-border rounded-default overflow-hidden"
         data-test="field-values-panel-filter-mode-toggle"
       >
         <OButton
@@ -94,13 +94,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <!-- Loading state (only shown when there are no interim cached results) -->
       <div
         v-show="fieldValues?.isLoading && !displayValues.length"
-        class="relative pl-3 py-1"
-        style="height: 3.75rem"
+        class="relative pl-3 py-1 h-15"
       >
+        <!-- scrim off: this box is empty while loading, so there is nothing to
+             dim — and the scrim is 70% of surface-base (white), which on this
+             panel's grey surface just reads as a white block. -->
         <OInnerLoading
           :showing="fieldValues?.isLoading && !displayValues.length"
           label="Fetching values..."
           size="xs"
+          :scrim="false"
           data-test="field-values-panel-loading-indicator"
         />
       </div>
@@ -155,23 +158,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
             <div
               class="flex flex-row flex-wrap justify-between min-w-0 pl-1"
-              :style="
-                showMultiSelect ? 'width: calc(100% - 1.5rem)' : 'width: 100%'
-              "
+              :class="showMultiSelect ? 'w-[calc(100%-1.5rem)]' : 'w-full'"
             >
               <div
                 :title="value.key"
-                class="truncate pr-1 text-field-list-label-text text-3!"
-                style="width: calc(100% - 3.125rem)"
+                class="truncate pr-1 text-field-list-label-text text-3! w-[calc(100%-3.125rem)]"
               >
                 {{ value.label ?? value.key }}
               </div>
               <div
                 v-if="value.count != null"
                 :title="String(value.count)"
-                class="truncate text-right pr-0 text-3!"
-                style="display: contents"
-                :style="showMultiSelect ? 'width: 3.125rem' : ''"
+                class="truncate text-right pr-0 text-3! contents"
+                :class="showMultiSelect ? 'w-[3.125rem]' : ''"
               >
                 {{ formatLargeNumber(value.count) }}
               </div>
@@ -184,10 +183,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <!-- View more values / loading more indicator -->
     <div
       v-if="isLoadingMore || (fieldValues?.hasMore && !fieldValues?.isLoading)"
-      class="w-full flex justify-center border-t border-(--o2-border-color) pt-1 px-1"
+      class="w-full flex justify-center border-t border-card-glass-border pt-1 px-1"
     >
       <button
-        class="inline-flex items-center gap-1 bg-transparent border-0 text-(--o2-primary-color) text-[0.6875rem] font-[inherit] py-0.5 px-1 cursor-pointer rounded-[0.1875rem] transition-opacity duration-150 hover:opacity-80 hover:bg-(--color-interactive-hover-bg) disabled:opacity-50 disabled:cursor-default"
+        class="inline-flex items-center gap-1 bg-transparent border-0 text-accent text-2xs font-[inherit] py-0.5 px-1 cursor-pointer rounded-default transition-opacity duration-150 hover:opacity-80 hover:bg-interactive-hover-bg disabled:opacity-50 disabled:cursor-default"
         :disabled="isLoadingMore"
         @click="handleLoadMoreClick"
         :data-test="`log-search-subfield-load-more-${fieldName}`"
diff --git a/web/src/components/common/GroupHeader.spec.ts b/web/src/components/common/GroupHeader.spec.ts
index 1d174c978c..f8feb74697 100644
--- a/web/src/components/common/GroupHeader.spec.ts
+++ b/web/src/components/common/GroupHeader.spec.ts
@@ -122,11 +122,9 @@ describe("GroupHeader.vue", () => {
       expect(wrapper.find("img").attributes("src")).toBe("/mocked-assets/custom/path.png");
     });
 
-    it("sets width and height style on image", () => {
+    it("sizes the image via the size-6 utility (24px)", () => {
       const wrapper = createWrapper({ showIcon: true });
-      const style = wrapper.find("img").attributes("style") ?? "";
-      expect(style).toContain("width: 24px");
-      expect(style).toContain("height: 24px");
+      expect(wrapper.find("img").classes()).toContain("size-6");
     });
 
     it("calls getImageURL with the provided iconPath", async () => {
diff --git a/web/src/components/common/GroupHeader.vue b/web/src/components/common/GroupHeader.vue
index 87245a9713..7dd3bbefae 100644
--- a/web/src/components/common/GroupHeader.vue
+++ b/web/src/components/common/GroupHeader.vue
@@ -16,7 +16,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <div class="flex items-center gap-2">
-    <img v-if="showIcon" style="width: 24px; height: 24px;" :src="icon" alt="icon" />
+    <img class="size-6" v-if="showIcon" :src="icon" alt="icon" />
     <span data-test="common-group-header-title" class="text-base font-bold leading-6">
       {{ title }}
     </span>
diff --git a/web/src/components/common/GroupedFieldList.vue b/web/src/components/common/GroupedFieldList.vue
index d4be4a398c..862d016b97 100644
--- a/web/src/components/common/GroupedFieldList.vue
+++ b/web/src/components/common/GroupedFieldList.vue
@@ -5,6 +5,7 @@
     ref="ofieldListRef"
     :fields="visibleFields"
     :search="search"
+    :search-class="searchClass"
     :search-placeholder="t('search.searchField')"
     :current-page="currentPage"
     :page-size="pageSize"
@@ -19,7 +20,7 @@
     <template #group-header="{ row, groupName }">
       <slot name="group-header" :row="row" :group-name="groupName">
         <div
-          class="h-full w-full flex justify-between items-center rounded-[0.25rem] font-semibold text-xs px-[0.325rem] cursor-pointer bg-surface-subtle text-field-list-group-text"
+          class="h-full w-[calc(100%+2*var(--spacing-page-edge))] shrink-0 -ml-page-edge px-page-edge flex justify-between items-center font-semibold text-xs cursor-pointer bg-surface-subtle text-field-list-group-text"
           @click="toggleGroup(row.group)"
         >
           <div class="flex-1 min-w-0">
@@ -50,7 +51,7 @@
       <slot name="empty">
         <div class="text-center py-[0.725rem] flex items-center justify-center">
           <OIcon name="info" size="xs" />
-          <span class="pl-[0.375rem]">{{ t("search.noFieldFound") }}</span>
+          <span class="pl-1.5">{{ t("search.noFieldFound") }}</span>
         </div>
       </slot>
     </template>
@@ -84,6 +85,8 @@ const { t } = useI18n();
 interface Props {
   fields: any[];
   search?: string;
+  /** Passed to OFieldList so the owning panel can inset the search control. */
+  searchClass?: string;
   loading?: boolean;
   theme?: string;
   currentPage?: number;
@@ -93,6 +96,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   search: "",
+  searchClass: "",
   loading: false,
   theme: "light",
   currentPage: 1,
diff --git a/web/src/components/common/JsonEditor.spec.ts b/web/src/components/common/JsonEditor.spec.ts
index 151fdcc3c0..6bb070f82d 100644
--- a/web/src/components/common/JsonEditor.spec.ts
+++ b/web/src/components/common/JsonEditor.spec.ts
@@ -492,15 +492,18 @@ describe("JsonEditor", () => {
       store.state.theme = "dark";
       wrapper = createWrapper();
       await nextTick();
-      expect(wrapper.html()).toContain("bg-(--o2-primary-background)");
+      // Dark background is gated behind the `dark:` variant token
+      expect(wrapper.classes()).toContain("dark:bg-surface-base");
     });
 
-    it("does not apply dark background class on root when theme is light", async () => {
+    it("does not apply a bare surface background class on root when theme is light", async () => {
       store.state.theme = "light";
       wrapper = createWrapper();
       await nextTick();
-      // Dark background class is only applied in dark theme
-      expect(wrapper.html()).not.toContain("bg-(--o2-primary-background)");
+      // The surface background is only ever applied via the `dark:` variant,
+      // never as a bare `bg-surface-base` class
+      expect(wrapper.classes()).toContain("dark:bg-surface-base");
+      expect(wrapper.classes()).not.toContain("bg-surface-base");
     });
   });
 
diff --git a/web/src/components/common/JsonEditor.vue b/web/src/components/common/JsonEditor.vue
index 1c8980cf7f..053c0c7e53 100644
--- a/web/src/components/common/JsonEditor.vue
+++ b/web/src/components/common/JsonEditor.vue
@@ -1,7 +1,6 @@
 <template>
   <div
-    class="h-[calc(100vh-3.75rem)] flex min-h-0"
-    :class="store.state.theme === 'dark' ? 'bg-(--o2-primary-background)' : ''"
+    class="h-[calc(100vh-3.75rem)] flex min-h-0 dark:bg-surface-base"
   >
     <div class="flex flex-col flex-1 min-h-0 min-w-0">
       <div class="flex flex-col flex-1 min-h-0">
@@ -21,7 +20,7 @@
       <div
         v-if="validationErrors.length > 0"
         data-test="common-json-editor-validation-errors"
-        class="p-3 text-red-500 shrink-0 max-h-50 overflow-y-auto"
+        class="p-3 text-status-error-text shrink-0 max-h-50 overflow-y-auto"
       >
         <div class="font-bold mb-2">Please fix the following issues:</div>
         <ul class="ml-3">
@@ -50,7 +49,6 @@
     <div
       v-if="store.state.isAiChatEnabled"
       class="ml-2 w-[25vw] h-full"
-      :class="store.state.theme == 'dark' ? 'dark-mode-chat-container' : 'light-mode-chat-container'"
     >
       <O2AIChat
         class="h-full"
@@ -71,6 +69,7 @@ import config from "@/aws-exports";
 import { ChatMessage, ChatHistoryEntry } from "@/ts/interfaces/chat";
 import useDragAndDrop from "@/plugins/pipelines/useDnD";
 import OButton from "@/lib/core/Button/OButton.vue";
+import useTheme from "@/composables/useTheme";
 
 export default defineComponent({
   name: "JsonEditor",
@@ -107,6 +106,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const { t } = useI18n();
     const store = useStore();
+    const { isDark } = useTheme();
     const jsonContent = ref("");
     const isValidJson = ref(true);
     const queryEditorRef = ref();
@@ -235,7 +235,7 @@ export default defineComponent({
         return getImageURL('images/common/ai_icon_dark.svg')
       }
 
-      return store.state.theme === 'dark'
+      return isDark.value
         ? getImageURL('images/common/ai_icon_dark.svg')
         : getImageURL('images/common/ai_icon_gradient.svg')
     })
diff --git a/web/src/components/common/KpiCard.vue b/web/src/components/common/KpiCard.vue
new file mode 100644
index 0000000000..43ed3aa24c
--- /dev/null
+++ b/web/src/components/common/KpiCard.vue
@@ -0,0 +1,104 @@
+<!-- Copyright 2026 OpenObserve Inc.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<!--
+  KpiCard — the stat tile used in every KPI strip (Quality, LLM Insights, eval
+  job/scorer detail, RUM). It owns the CHROME that kept drifting — padding,
+  radius, border, hover elevation, the label/icon row and their typography —
+  while each screen supplies its own value/trend/footer content through slots.
+
+  Why this exists: the same tile was hand-rolled in eight places with four card
+  paddings, four different hover shadows (two of them hardcoded px + rgba), and
+  two competing label typography systems. See SPACING_AUDIT.md §7.
+
+  Slots: label | icon | value | trend | footer (sparkline etc.)
+  Props: label, icon, as, dataTest
+-->
+<template>
+  <component
+    :is="as"
+    class="bg-card-glass-bg rounded-default flex flex-col px-3.5 py-2.5 gap-1 border border-border-default transition-shadow duration-200 ease-in-out hover:shadow-md"
+    :data-test="dataTest"
+  >
+    <div class="flex items-center justify-between gap-2 mb-1">
+      <div
+        class="min-w-0 truncate"
+        :class="labelClass || 'text-2xs font-semibold leading-normal text-text-secondary'"
+      >
+        <slot name="label">{{ label }}</slot>
+      </div>
+      <span
+        v-if="icon || $slots.icon"
+        class="inline-flex items-center justify-center shrink-0 rounded-default"
+        :class="[
+          iconSize === 'md' ? 'w-10 h-10' : 'w-6 h-6',
+          iconClass || 'bg-surface-subtle text-text-secondary',
+        ]"
+      >
+        <slot name="icon">
+          <OIcon v-if="icon" :name="icon" :size="iconSize" />
+        </slot>
+      </span>
+    </div>
+
+    <div v-if="$slots.value" class="flex items-baseline gap-1">
+      <slot name="value" />
+    </div>
+
+    <div
+      v-if="$slots.trend"
+      class="text-3xs font-medium flex items-center gap-1"
+    >
+      <slot name="trend" />
+    </div>
+
+    <slot name="footer" />
+  </component>
+</template>
+
+<script setup lang="ts">
+import OIcon from "@/lib/core/Icon/OIcon.vue";
+import type { IconName } from "@/lib/core/Icon/OIcon.icons";
+
+withDefaults(
+  defineProps<{
+    label?: string;
+    /** Override the label's typography classes. Omit for the compact default. */
+    labelClass?: string;
+    icon?: IconName;
+    /**
+     * Override the icon badge's color classes (bg + text). Omit for the default
+     * monochrome subtle badge. Use token-backed utilities, e.g.
+     * `bg-(--color-indigo-50) text-(--color-indigo-600) dark:…`.
+     */
+    iconClass?: string;
+    /** Icon badge size. `md` renders the larger, more prominent colored tile. */
+    iconSize?: "sm" | "md";
+    /** Element to render as — `button` when the tile is selectable. */
+    as?: string;
+    dataTest?: string;
+  }>(),
+  {
+    label: "",
+    labelClass: undefined,
+    icon: undefined,
+    iconClass: undefined,
+    iconSize: "sm",
+    as: "div",
+    dataTest: undefined,
+  },
+);
+</script>
diff --git a/web/src/components/common/KpiCardRow.vue b/web/src/components/common/KpiCardRow.vue
new file mode 100644
index 0000000000..32b1fd2c22
--- /dev/null
+++ b/web/src/components/common/KpiCardRow.vue
@@ -0,0 +1,62 @@
+<!-- Copyright 2026 OpenObserve Inc.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<!--
+  KpiCardRow — the grid that holds a row of KpiCards.
+
+  Why this exists: the same stat-tile row was hand-rolled in eight places with
+  six different grid declarations (inline `style` with a raw px minmax, the same
+  minmax as a Tailwind arbitrary value, grid-cols-5, grid-cols-4, grid-cols-2,
+  responsive pairs) and two different gaps. This owns the grid + gap so a new
+  dashboard gets the right rhythm for free. See SPACING_AUDIT.md §7.
+
+  Usage:
+    <KpiCardRow>            responsive auto-fit (default)
+    <KpiCardRow :columns="4">   fixed 4-up
+
+  The row deliberately has NO horizontal padding — it inherits its page's
+  inset, so it lines up with the header and any table below it.
+-->
+<template>
+  <div class="grid gap-2.5" :style="gridStyle" data-test="kpi-card-row">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    /** Fixed column count. Omit for a responsive auto-fit grid. */
+    columns?: number;
+    /** Minimum card width before the responsive grid wraps. */
+    minWidth?: string;
+  }>(),
+  {
+    columns: undefined,
+    minWidth: "11.25rem",
+  },
+);
+
+const gridStyle = computed(() =>
+  props.columns
+    ? { gridTemplateColumns: `repeat(${props.columns}, minmax(0, 1fr))` }
+    : {
+        gridTemplateColumns: `repeat(auto-fit, minmax(${props.minWidth}, 1fr))`,
+      },
+);
+</script>
diff --git a/web/src/components/common/LoadingProgress.spec.ts b/web/src/components/common/LoadingProgress.spec.ts
index 19755f8675..bff35142fc 100644
--- a/web/src/components/common/LoadingProgress.spec.ts
+++ b/web/src/components/common/LoadingProgress.spec.ts
@@ -204,7 +204,7 @@ describe("LoadingProgress", () => {
       },
     });
 
-    expect(wrapper.html()).toContain("bg-gray-700");
+    expect(wrapper.html()).toContain("bg-progress-bar-track");
   });
 
   it("should use light theme colors when theme is light", () => {
@@ -218,7 +218,7 @@ describe("LoadingProgress", () => {
       },
     });
 
-    expect(wrapper.html()).toContain("bg-gray-200");
+    expect(wrapper.html()).toContain("bg-progress-bar-track");
   });
 
   it("should show shimmer animation during loading", () => {
diff --git a/web/src/components/common/LoadingProgress.vue b/web/src/components/common/LoadingProgress.vue
index d3c49c727e..96f9fba9d9 100644
--- a/web/src/components/common/LoadingProgress.vue
+++ b/web/src/components/common/LoadingProgress.vue
@@ -7,15 +7,12 @@
     }"
   >
     <div
-      class="w-full h-[2px] relative overflow-x-hidden"
-      :class="
-        store.state.theme === 'dark' ? 'bg-gray-700' : 'bg-gray-200'
-      "
+      class="w-full h-0.5 relative overflow-x-hidden bg-progress-bar-track"
     >
       <div
         class="h-full relative overflow-hidden"
         :class="
-          store.state.theme === 'dark' ? 'bg-[#5960B2]' : 'bg-[#5960B2]'
+          'bg-brand-indigo'
         "
         :style="{
           width: `${displayPercentage}%`,
@@ -27,24 +24,14 @@
         }"
       >
         <div
-          class="absolute inset-0 bg-gradient-to-r from-transparent to-transparent "
-          :class="
-            store.state.theme === 'dark'
-              ? 'via-gray-300/40'
-              : 'via-white/40'
-          "
-          :style="{
-            animation: 'shimmer 1.5s infinite linear',
-            width: '200%',
-            left: '-200%',
-          }"
+          class="loading-progress__shimmer absolute inset-0 bg-gradient-to-r from-transparent to-transparent via-white/40 dark:via-grey-300/40"
         ></div>
       </div>
       <!-- Moving circle indicator -->
       <div
-        class="absolute top-0 w-[3px] h-[2px] rounded-full shadow-[0_0_10px_2px_rgba(89,96,178,0.5)] transform translate-x-[-50%]"
+        class="absolute top-0 w-0.75 h-0.5 rounded-full shadow-[0_0_0.625rem_0.125rem_color-mix(in_srgb,var(--color-brand-indigo)_50%,transparent)] transform -translate-x-1/2"
         :class="
-          store.state.theme === 'dark' ? 'bg-[#5960B2]' : 'bg-[#5960B2]'
+          'bg-brand-indigo'
         "
         :style="{
           left: `${displayPercentage}%`,
@@ -54,12 +41,7 @@
         }"
       >
         <div
-          class="absolute inset-0 rounded-full animate-pulse"
-          :class="
-            store.state.theme === 'dark'
-              ? 'bg-gray-300/20'
-              : 'bg-white/20'
-          "
+          class="loading-progress__head-glow absolute inset-0 rounded-full bg-white/20 dark:bg-grey-300/20"
         ></div>
       </div>
     </div>
@@ -68,7 +50,6 @@
 
 <script lang="ts">
 import { defineComponent, computed, ref, watch, onUnmounted } from "vue";
-import { useStore } from "vuex";
 
 export default defineComponent({
   name: "LoadingProgress",
@@ -87,7 +68,6 @@ export default defineComponent({
   },
 
   setup(props) {
-    const store = useStore();
     const lastLoadingState = ref(props.loading);
     const internalPercentage = ref(props.loadingProgressPercentage);
     const isFadingOut = ref(false);
@@ -134,7 +114,6 @@ export default defineComponent({
     });
 
     return {
-      store,
       displayPercentage,
       shouldAnimate,
       isFadingOut,
@@ -143,7 +122,24 @@ export default defineComponent({
 });
 </script>
 
-<style>
+<style scoped>
+/* keep(keyframes): the gloss sweep and the head glow belong to this progress bar
+   alone. Both `animation`s are declared here rather than on the elements (one was
+   a template `[animation:…]` utility, one an inline `:style` binding) — Vue's
+   scoped compiler rewrites `animation` only inside this block, so keeping the
+   keyframe and its reference together here is what makes the rename resolve.
+   The scoped `[data-v-*]` attribute also lifts these rules above the `inset-0`
+   utility, so the shimmer's own `left` wins regardless of stylesheet order. */
+.loading-progress__shimmer {
+  width: 200%;
+  left: -200%;
+  animation: shimmer 1.5s infinite linear;
+}
+
+.loading-progress__head-glow {
+  animation: head-glow-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
 @keyframes shimmer {
   0% {
     transform: translateX(-200%);
@@ -153,7 +149,7 @@ export default defineComponent({
   }
 }
 
-@keyframes pulse {
+@keyframes head-glow-pulse {
   0%,
   100% {
     opacity: 0.2;
@@ -162,8 +158,5 @@ export default defineComponent({
     opacity: 0.4;
   }
 }
-
-.animate-pulse {
-  animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-}
 </style>
+
diff --git a/web/src/components/common/O2AIContextAddBtn.spec.js b/web/src/components/common/O2AIContextAddBtn.spec.js
index 0d64eec6e7..2b8fccf3d1 100644
--- a/web/src/components/common/O2AIContextAddBtn.spec.js
+++ b/web/src/components/common/O2AIContextAddBtn.spec.js
@@ -37,9 +37,7 @@ describe('O2AIContextAddBtn', () => {
       global: {
         plugins: [],
         provide: { store },
-        stubs: {
-          'q-btn': false // Don't stub q-btn to test actual button
-        }
+        stubs: {}
       },
       props: {
         class: '',
diff --git a/web/src/components/common/O2AIContextAddBtn.vue b/web/src/components/common/O2AIContextAddBtn.vue
index 1c46ae5789..79ab9dadc3 100644
--- a/web/src/components/common/O2AIContextAddBtn.vue
+++ b/web/src/components/common/O2AIContextAddBtn.vue
@@ -6,21 +6,54 @@
         size="icon-toolbar"
         @click.stop="sendToAiChat"
         data-test="o2-ai-context-add-btn"
-        :class="['group o2-ai-context-btn', props.class]"
+        class="group [background:var(--color-gradient-ai-subtle)]! [transition:background_0.3s_ease,box-shadow_0.3s_ease] dark:shadow-[0_0.25rem_0.75rem_0_color-mix(in_srgb,var(--color-ai-accent)_20%,transparent)] hover:[background:var(--color-gradient-ai)]! hover:shadow-[0_0.25rem_0.75rem_0_color-mix(in_srgb,var(--color-ai-accent)_35%,transparent)] dark:hover:shadow-[0_0.25rem_0.75rem_0_color-mix(in_srgb,var(--color-ai-accent)_35%,transparent)]!"
+        :class="props.class"
         :style="props.style"
         >
         <div class="flex items-center flex-nowrap">
-            <img :height="props.imageHeight" :width="props.imageWidth" :src="getBtnLogo" class="header-icon ai-icon [transition:transform_0.6s_ease,filter_0.6s_ease] group-hover:brightness-0 group-hover:invert group-hover:rotate-180" />
+            <img :height="props.imageHeight" :width="props.imageWidth" :src="getBtnLogo" class="header-icon ai-icon [transition:transform_0.6s_ease] group-hover:brightness-0 group-hover:invert group-hover:rotate-180" />
         </div>
     </OButton>
 </template>
 
+<style scoped>
+/* keep(lib-override:o2-button): `.ai-btn` is this component's row-button modifier — it is
+   passed in through `props.class` by plugins/logs/TenstackTable.vue and
+   components/TenstackTable.vue, and every element it styles (the OButton root and
+   the <img class="ai-icon"> above) is rendered HERE, so this is the owning scope.
+   Why the !important: OButton's own base `relative` outranks the positioning
+   passed via props. `translate` (not `transform`) is the property to override —
+   Tailwind v4 emits -translate-y-1/2 through the CSS `translate` shorthand. */
+.ai-btn {
+  position: absolute !important;
+  top: 50% !important;
+  right: 0.875rem !important;
+  translate: -50% -50% !important;
+  height: 0.875rem !important;
+  min-height: 0 !important;
+  width: 0.9rem !important;
+  min-width: 0 !important;
+  border-radius: 0.25rem !important;
+}
+
+.ai-btn img.ai-icon {
+  width: 0.75rem !important;
+  height: 0.75rem !important;
+}
+
+/* Suppress the hover box-shadow — it visually bleeds outside the row boundary */
+.ai-btn:hover {
+  box-shadow: none !important;
+}
+</style>
+
 <script setup lang="ts">
 import { getImageURL } from '@/utils/zincutils';
 import { computed } from 'vue';
 import { useStore } from 'vuex';
 import config from '@/aws-exports';
 import OButton from '@/lib/core/Button/OButton.vue';
+import useTheme from '@/composables/useTheme';
 //we can pass class to the button to make it customized
 //all of the props are optional
 const props = defineProps({
@@ -56,8 +89,9 @@ const props = defineProps({
 //once user clicks on the button, it will emit the event to the parent component
 const emit = defineEmits(["sendToAiChat"]);
 const store = useStore();
+const { isDark } = useTheme();
 const getBtnLogo = computed(() => {
-    return store.state.theme === 'dark'
+    return isDark.value
     ? getImageURL('images/common/ai_icon_dark.svg')
     : getImageURL('images/common/ai_icon_gradient.svg')
 })
diff --git a/web/src/components/common/PageLayout.vue b/web/src/components/common/PageLayout.vue
deleted file mode 100644
index e3ad342e46..0000000000
--- a/web/src/components/common/PageLayout.vue
+++ /dev/null
@@ -1,178 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>. -->
-
-<!--
-  PageLayout — 3-slot scaffold used by all Template-A and Template-B pages.
-
-  Slots:
-    #header  — optional top header section (AppPageHeader or any content)
-    #sidebar — optional left panel (folder rail, route-tabs nav, etc.)
-    default  — main content area (table, router-view, charts, etc.)
-
-  Props:
-    sidebarWidth    — pixel width for the sidebar (default 200)
-    resizable       — when true, uses OSplitter so the sidebar is drag-resizable
-    splitterLimits  — [min, max] px limits for OSplitter (default [0, 400])
-    mainPanel       — when false, main content fills space without an inner border panel
-                      (use for full-bleed content like the dashboard view; default true)
-    constrained     — when true (and no sidebar), the main content is centered in a
-                      max-width reading column (ConstrainedPage) instead of full width.
-                      Use for settings sections, single forms, org params, hubs, etc.
-    contentSize     — reading-column width when constrained ('sm'|'md'|'lg'|'xl'; default 'lg')
-    headerClass     — override the default header wrapper class
-                      (default: 'shrink-0 px-3 border-b border-border-default')
-
-  v-model:sidebarWidth — bidirectional bind for the sidebar width when resizable=true,
-                         so the page can react to resize/collapse (e.g. compact mode).
--->
-<template>
-  <div class="flex flex-col h-full">
-    <!-- ── Optional header ──────────────────────────────────────── -->
-    <div
-      v-if="$slots.header"
-      :class="headerClass ?? 'shrink-0 px-3 border-b border-border-default'"
-    >
-      <slot name="header" />
-    </div>
-
-    <!-- ── Body: resizable sidebar + main (OSplitter) ───────────── -->
-    <OSplitter
-      v-if="$slots.sidebar && resizable"
-      v-model="internalWidth"
-      unit="px"
-      :limits="splitterLimits"
-      :horizontal="false"
-      class="flex-1 min-h-0 overflow-hidden"
-    >
-      <template #before>
-        <div
-          v-if="sidebarVisible"
-          class="w-full h-full flex flex-col overflow-hidden border-r border-border-subtle"
-        >
-          <slot name="sidebar" />
-        </div>
-      </template>
-      <template #separator>
-        <!-- Allow page to override the separator (e.g. for custom toggle placement) -->
-        <slot name="separator">
-          <div class="splitter-vertical splitter-enabled"></div>
-        </slot>
-      </template>
-      <template #after>
-        <div class="w-full h-full flex flex-col overflow-hidden">
-          <slot />
-        </div>
-      </template>
-    </OSplitter>
-
-    <!-- ── Body: fixed-width sidebar + main ─────────────────────── -->
-    <div
-      v-else-if="$slots.sidebar"
-      class="flex-1 flex min-h-0"
-    >
-      <aside
-        class="shrink-0 h-full flex flex-col overflow-hidden border-r border-border-subtle"
-        :style="{ width: (sidebarWidth ?? 200) + 'px' }"
-      >
-        <slot name="sidebar" />
-      </aside>
-      <section
-        class="flex-1 min-w-0 h-full overflow-hidden"
-      >
-        <slot />
-      </section>
-    </div>
-
-    <!-- ── Body: constrained reading column (no sidebar) ────────── -->
-    <ConstrainedPage
-      v-else-if="constrained"
-      :size="contentSize"
-      class="flex-1 min-h-0"
-    >
-      <slot />
-    </ConstrainedPage>
-
-    <!-- ── Body: main only (no sidebar) ─────────────────────────── -->
-    <!-- Main content is flush: the app chrome (MainLayout) already provides the
-         single bordered "content card", so inner panels would just nest borders.
-         Sections inside separate with border-soft dividers, not boxed cards. -->
-    <template v-else>
-      <div class="flex-1 flex flex-col min-h-0 overflow-hidden">
-        <slot />
-      </div>
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch } from "vue";
-import OSplitter from "@/lib/core/Splitter/OSplitter.vue";
-import ConstrainedPage from "@/components/common/ConstrainedPage.vue";
-
-const props = withDefaults(
-  defineProps<{
-    sidebarWidth?: number;
-    resizable?: boolean;
-    splitterLimits?: [number, number];
-    mainPanel?: boolean;
-    constrained?: boolean;
-    contentSize?: "sm" | "md" | "lg" | "xl";
-    headerClass?: string;
-  }>(),
-  {
-    sidebarWidth: 200,
-    resizable: false,
-    splitterLimits: () => [0, 400] as [number, number],
-    mainPanel: true,
-    constrained: false,
-    contentSize: "lg",
-    headerClass: undefined,
-  },
-);
-
-const emit = defineEmits<{
-  "update:sidebarWidth": [value: number];
-}>();
-
-const internalWidth = ref(props.sidebarWidth);
-const lastWidth = ref(props.sidebarWidth);
-
-const sidebarVisible = computed(() => internalWidth.value > 0);
-
-// Sync from parent when using v-model:sidebarWidth
-watch(
-  () => props.sidebarWidth,
-  (val) => {
-    if (val !== undefined && val !== internalWidth.value) {
-      internalWidth.value = val;
-    }
-  },
-);
-
-// Emit to parent on every width change (enables v-model:sidebarWidth)
-watch(internalWidth, (val) => {
-  emit("update:sidebarWidth", val);
-});
-
-const toggleSidebar = () => {
-  if (sidebarVisible.value) {
-    lastWidth.value = internalWidth.value;
-    internalWidth.value = 0;
-  } else {
-    internalWidth.value = lastWidth.value || props.sidebarWidth;
-  }
-};
-</script>
-
diff --git a/web/src/components/common/QueryErrorState.vue b/web/src/components/common/QueryErrorState.vue
index 808aea3012..22895ae895 100644
--- a/web/src/components/common/QueryErrorState.vue
+++ b/web/src/components/common/QueryErrorState.vue
@@ -160,12 +160,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           v-if="aiEnabled && (isQueryError || errorCode === 0)"
           variant="ghost"
           size="sm"
-          class="ai-hover-btn"
+          class="group [background:var(--color-gradient-ai-subtle)]! text-ai-accent! dark:text-white! [transition:background_0.3s_ease,box-shadow_0.3s_ease,color_0.3s_ease] dark:shadow-[0_0.25rem_0.75rem_0_color-mix(in_srgb,var(--color-ai-accent)_20%,transparent)] hover:[background:var(--color-gradient-ai)]! hover:text-white! hover:shadow-[0_0.25rem_0.75rem_0_color-mix(in_srgb,var(--color-ai-accent)_35%,transparent)] dark:hover:shadow-[0_0.25rem_0.75rem_0_color-mix(in_srgb,var(--color-ai-accent)_35%,transparent)]"
           data-test="query-error-ask-ai-btn"
           @click="emit('ask-ai')"
         >
           <template #icon-left>
-            <img :src="aiIconSrc" class="w-4 h-4 shrink-0" alt="" />
+            <img :src="aiIconSrc" class="w-4 h-4 shrink-0 group-hover:brightness-0 group-hover:invert group-hover:[transition:filter_0.3s_ease]" alt="" />
           </template>
           {{ t("queryError.askAi") }}
         </OButton>
@@ -181,7 +181,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         variant="ghost"
         size="sm"
         icon-left="bolt"
-        class="ai-hover-btn"
+        class="[background:var(--color-gradient-ai-subtle)]! text-ai-accent! dark:text-white! [transition:background_0.3s_ease,box-shadow_0.3s_ease,color_0.3s_ease] dark:shadow-[0_0.25rem_0.75rem_0_color-mix(in_srgb,var(--color-ai-accent)_20%,transparent)] hover:[background:var(--color-gradient-ai)]! hover:text-white! hover:shadow-[0_0.25rem_0.75rem_0_color-mix(in_srgb,var(--color-ai-accent)_35%,transparent)] dark:hover:shadow-[0_0.25rem_0.75rem_0_color-mix(in_srgb,var(--color-ai-accent)_35%,transparent)]"
         data-test="query-error-ask-ai-btn"
         @click="emit('ask-ai')"
       >
@@ -233,7 +233,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </button>
       <div
         v-if="showDetail"
-        class="rounded bg-surface-panel border border-border-default px-3 py-2 max-h-40 overflow-y-auto"
+        class="rounded-default bg-surface-panel border border-border-default px-3 py-2 max-h-40 overflow-y-auto"
         data-test="query-error-detail-expanded"
       >
         <p
@@ -245,7 +245,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </template>
 
     <!-- Trace ID (block) -->
-    <small v-if="traceId" class="text-text-caption" data-test="query-error-trace-id">
+    <small v-if="traceId" class="text-text-secondary" data-test="query-error-trace-id">
       <span class="font-medium">{{ t("queryError.traceId") }}</span>
       {{ traceId }}
     </small>
@@ -300,7 +300,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         variant="ghost"
         size="sm"
         icon-left="bolt"
-        class="ai-hover-btn"
+        class="[background:var(--color-gradient-ai-subtle)]! text-ai-accent! dark:text-white! [transition:background_0.3s_ease,box-shadow_0.3s_ease,color_0.3s_ease] dark:shadow-[0_0.25rem_0.75rem_0_color-mix(in_srgb,var(--color-ai-accent)_20%,transparent)] hover:[background:var(--color-gradient-ai)]! hover:text-white! hover:shadow-[0_0.25rem_0.75rem_0_color-mix(in_srgb,var(--color-ai-accent)_35%,transparent)] dark:hover:shadow-[0_0.25rem_0.75rem_0_color-mix(in_srgb,var(--color-ai-accent)_35%,transparent)]"
         data-test="query-error-ask-ai-btn"
         @click="emit('ask-ai')"
       >
diff --git a/web/src/components/common/SecondaryNav.vue b/web/src/components/common/SecondaryNav.vue
deleted file mode 100644
index b1e9fa9ddd..0000000000
--- a/web/src/components/common/SecondaryNav.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<!--
-  SecondaryNav — the Level-2 module section nav for modules with MANY sections,
-  where horizontal header tabs don't fit (Settings ~15, IAM up to 7). Renders a
-  dense, scrollable vertical route-tab rail. Drop it into PageLayout's #sidebar.
-
-  This is the "many sections → vertical rail" half of the unified nav system;
-  the "few sections → horizontal tabs" half is AppPageHeader's #tabs slot. Both
-  use the same OTabs/ORouteTab primitive — only orientation/placement differ.
-
-  Data-driven: pass `items` (filtered by `visible`) instead of hand-writing one
-  <ORouteTab> per section, so feature-flag visibility lives in one declarative
-  array. See web/PAGE_LAYOUT_SYSTEM.md §15.
-
-  Props:  items | modelValue (active key) | dense
-  Events: update:modelValue
--->
-<template>
-  <OTabs
-    :model-value="modelValue"
-    orientation="vertical"
-    :dense="dense"
-    class="o2-secondary-nav h-full overflow-y-auto"
-    data-test="secondary-nav"
-    @update:model-value="(v) => emit('update:modelValue', v as string)"
-  >
-    <ORouteTab
-      v-for="item in visibleItems"
-      :key="item.key"
-      :name="item.key"
-      :to="item.to"
-      :icon="item.icon"
-      :label="item.label"
-      :data-test="item.dataTest"
-    />
-  </OTabs>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import type { RouteLocationRaw } from "vue-router";
-import OTabs from "@/lib/navigation/Tabs/OTabs.vue";
-import ORouteTab from "@/lib/navigation/Tabs/ORouteTab.vue";
-
-export interface SecondaryNavItem {
-  /** Stable key; must equal the `modelValue` set for this section's route. */
-  key: string;
-  label: string;
-  to: RouteLocationRaw;
-  /** OIcon registry name, or an `img:`-prefixed asset path. */
-  icon?: string;
-  /** Defaults to true; set false to hide behind a feature flag / role. */
-  visible?: boolean;
-  dataTest?: string;
-}
-
-const props = withDefaults(
-  defineProps<{
-    items: SecondaryNavItem[];
-    modelValue?: string;
-    dense?: boolean;
-  }>(),
-  { dense: true },
-);
-
-const emit = defineEmits<{ "update:modelValue": [value: string] }>();
-
-const visibleItems = computed(() =>
-  props.items.filter((i) => i.visible !== false),
-);
-</script>
diff --git a/web/src/components/common/SectionHub.vue b/web/src/components/common/SectionHub.vue
index 957c873508..97452a4471 100644
--- a/web/src/components/common/SectionHub.vue
+++ b/web/src/components/common/SectionHub.vue
@@ -34,7 +34,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <header v-if="title || description" class="mb-6">
         <h1
           v-if="title"
-          class="text-xl! font-semibold! text-text-primary"
+          class="text-xl! font-semibold! text-text-heading"
         >
           {{ title }}
         </h1>
@@ -54,7 +54,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       >
         <h2
           v-if="group.label"
-          class="text-sm! font-semibold! text-text-primary mb-3"
+          class="text-sm! font-semibold! text-text-heading mb-3"
         >
           {{ group.label }}
         </h2>
@@ -65,12 +65,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             v-for="item in group.items"
             :key="item.key"
             type="button"
-            class="o2-hub-card group flex items-start gap-3 text-left p-4 rounded-lg border border-border-default bg-surface-panel transition-colors hover:border-primary-500 hover:bg-surface-subtle outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
+            class="o2-hub-card group flex items-start gap-3 text-left p-4 rounded-default border border-border-default bg-surface-panel transition-colors hover:border-primary-500 hover:bg-surface-subtle outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
             :data-test="item.dataTest || `section-hub-card-${item.key}`"
             @click="router.push(item.to)"
           >
             <span
-              class="shrink-0 mt-0.5 inline-flex items-center justify-center w-8 h-8 rounded-md bg-surface-subtle text-text-secondary transition-colors group-hover:bg-primary-50 group-hover:text-primary-600"
+              class="shrink-0 mt-0.5 inline-flex items-center justify-center w-8 h-8 rounded-default bg-surface-subtle text-text-secondary transition-colors group-hover:bg-primary-50 group-hover:text-primary-600"
             >
               <img
                 v-if="item.icon && isImg(item.icon)"
@@ -83,7 +83,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </span>
             <span class="flex flex-col min-w-0">
               <span
-                class="text-sm font-semibold text-text-primary transition-colors group-hover:text-primary-600"
+                class="text-sm font-semibold text-text-heading transition-colors group-hover:text-primary-600"
                 >{{ item.label }}</span
               >
               <span
diff --git a/web/src/components/common/SectionRail.vue b/web/src/components/common/SectionRail.vue
index 49821877ac..c7c2a51fc5 100644
--- a/web/src/components/common/SectionRail.vue
+++ b/web/src/components/common/SectionRail.vue
@@ -26,23 +26,31 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     class="flex flex-col h-full min-h-0 bg-surface-panel"
     data-test="section-rail"
   >
+    <!-- Title aligns with the item LABELS below it (the page-edge grid line the
+         OTab pills' text lands on), not the pill edge — so 'IAM'/'Settings' sits
+         directly above 'Users'. Matches FolderList's heading. -->
     <div
       v-if="title"
-      class="shrink-0 px-3.5 pt-3 pb-1 text-sm font-semibold text-text-primary truncate"
+      class="shrink-0 pl-page-edge pr-1.5 pt-3 pb-1 text-sm font-semibold text-text-heading truncate"
     >
       {{ title }}
     </div>
 
-    <div class="flex-1 overflow-y-auto px-2 pt-1 pb-3">
+    <div class="flex-1 overflow-y-auto px-1.5 pt-1 pb-3">
       <OTabs
         :model-value="activeKey ?? ''"
         orientation="vertical"
-        class="w-full"
+        class="w-full section-rail-tabs"
         @change="onTabChange"
       >
-        <template v-for="group in visibleGroups" :key="group.label">
+        <template v-for="(group, idx) in visibleGroups" :key="group.label">
+          <!-- Section label. Each group after the first gets top spacing so the
+               sub-sections read as separate blocks rather than one merged list. -->
+          <!-- pl-1.5 (on top of the container's px-1.5) puts the section label on
+               the same 12px item-label grid line as the tabs below it. -->
           <div
-            class="px-2 py-1 text-[0.72rem] font-semibold text-text-secondary"
+            class="py-1 pl-1.5 text-xs font-semibold text-text-secondary"
+            :class="{ 'mt-3': idx > 0 }"
           >
             {{ group.label }}
           </div>
diff --git a/web/src/components/common/empty-states/EmptyState.vue b/web/src/components/common/empty-states/EmptyState.vue
index 5216a288e9..968a70df7e 100644
--- a/web/src/components/common/empty-states/EmptyState.vue
+++ b/web/src/components/common/empty-states/EmptyState.vue
@@ -25,11 +25,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
   <div class="relative w-full h-full overflow-hidden [--empty-dot:var(--color-grey-300)] dark:[--empty-dot:var(--color-grey-800)]">
-    <!-- decorative backdrop — subtle dot texture only (no color gradient) -->
+    <!--
+      Decorative backdrop — subtle dot texture only (no color gradient).
+      The dot colour comes from `--empty-dot` (set theme-aware on the parent).
+      Sparse 1.875rem spacing keeps the texture subtle, and the ellipse mask
+      concentrates it behind the illustration/text, dissolving well before the
+      edges so it reads as a soft backdrop rather than an all-over grid.
+    -->
     <div
       aria-hidden="true"
-      class="absolute inset-0 pointer-events-none"
-      :style="dotGridStyle"
+      class="absolute inset-0 pointer-events-none bg-[radial-gradient(var(--empty-dot)_1.25px,transparent_1.25px)] bg-size-[1.875rem_1.875rem] [-webkit-mask-image:radial-gradient(ellipse_60%_62%_at_50%_44%,var(--color-black)_0%,transparent_70%)] mask-[radial-gradient(ellipse_60%_62%_at_50%_44%,var(--color-black)_0%,transparent_70%)]"
     />
 
     <!-- content -->
@@ -42,7 +47,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
       <div class="flex flex-col gap-2.5 max-w-xl">
         <h2
-          class="text-2xl! font-semibold! text-text-primary tracking-[-0.01em]"
+          class="text-2xl! font-semibold! text-text-heading tracking-[-0.01em]"
         >
           <slot name="title">{{ title }}</slot>
         </h2>
@@ -67,7 +72,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         >
           <span class="h-px flex-1 bg-border-default" />
           <span
-            class="text-[0.6875rem] font-semibold text-text-secondary whitespace-nowrap"
+            class="text-2xs font-semibold text-text-secondary whitespace-nowrap"
             >{{ actionsLabel }}</span
           >
           <span class="h-px flex-1 bg-border-default" />
@@ -99,18 +104,5 @@ withDefaults(
   }>(),
   { title: "", description: "", actionsLabel: "" },
 );
-
-// Faded dot-grid, masked to a soft ellipse so it concentrates behind the
-// content and dissolves toward the edges.
-const dotGridStyle =
-  // `--empty-dot` is theme-aware (see <style> below): grey-300 in light so the
-  // dots read clearly on white, ~grey-800 in dark.
-  "background-image: radial-gradient(var(--empty-dot) 1.25px, transparent 1.25px);" +
-  // sparse spacing so the texture stays subtle, not busy.
-  "background-size: 30px 30px;" +
-  // concentrated behind the illustration/text and faded to clean space well
-  // before the edges — a soft backdrop, not an all-over grid.
-  "-webkit-mask-image: radial-gradient(ellipse 60% 62% at 50% 44%, #000 0%, transparent 70%);" +
-  "mask-image: radial-gradient(ellipse 60% 62% at 50% 44%, #000 0%, transparent 70%);";
 </script>
 
diff --git a/web/src/components/common/empty-states/QuickStartCard.vue b/web/src/components/common/empty-states/QuickStartCard.vue
index 6c449e7996..3e0ed6c49e 100644
--- a/web/src/components/common/empty-states/QuickStartCard.vue
+++ b/web/src/components/common/empty-states/QuickStartCard.vue
@@ -24,16 +24,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <button
     type="button"
-    class="group relative flex items-center gap-3 w-64 max-w-full h-16 ps-3 pe-3.5 rounded-xl border border-border-default bg-surface-base shadow-sm text-left cursor-pointer transition-[color,background-color,border-color,box-shadow,transform] duration-150 outline-none hover:shadow-md hover:border-primary-400 hover:bg-tabs-hover-bg focus-visible:ring-[0.125rem] focus-visible:ring-primary-500/40"
+    class="group relative flex items-center gap-3 w-64 max-w-full h-16 ps-3 pe-3.5 rounded-default border border-border-default bg-surface-base text-left cursor-pointer transition-[color,background-color,border-color,box-shadow,transform] duration-150 outline-none hover:shadow-md hover:border-primary-400 hover:bg-tabs-hover-bg focus-visible:ring-[0.125rem] focus-visible:ring-primary-500/40"
   >
     <span
-      class="relative inline-flex items-center justify-center shrink-0 w-10 h-10 rounded-lg bg-tabs-active-bg text-tabs-active-text transition-colors group-hover:bg-primary-600 group-hover:text-white"
+      class="relative inline-flex items-center justify-center shrink-0 w-10 h-10 rounded-default bg-tabs-active-bg text-tabs-active-text transition-colors group-hover:bg-primary-600 group-hover:text-text-inverse"
     >
       <OIcon :name="icon" size="md" />
     </span>
 
     <span class="relative flex-1 min-w-0">
-      <span class="block text-sm font-semibold truncate text-text-primary">{{
+      <span class="block text-sm font-semibold truncate text-text-heading">{{
         label
       }}</span>
       <span
diff --git a/web/src/components/common/illustrations/EmptyDashboards.vue b/web/src/components/common/illustrations/EmptyDashboards.vue
deleted file mode 100644
index 1788c68204..0000000000
--- a/web/src/components/common/illustrations/EmptyDashboards.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<!--
-  EmptyDashboards — a calm, modern empty-state illustration of a dashboard:
-  a soft card holding a small bar chart and a sparkline. Animation is pure SMIL
-  inside the SVG (no CSS/SCSS) — bars breathe gently and the sparkline draws
-  itself on a slow loop, signalling "empty, waiting to be filled" without
-  stealing focus from the call-to-action. Colors come from design tokens so it
-  reads correctly in light and dark.
--->
-<template>
-  <svg
-    width="208"
-    height="156"
-    viewBox="0 0 208 156"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    role="img"
-    aria-label="No dashboards yet"
-  >
-    <!-- soft brand glow behind the card -->
-    <ellipse cx="104" cy="82" rx="92" ry="58" fill="var(--color-primary-500)" opacity="0.06" />
-
-    <!-- floating accent dot -->
-    <circle cx="40" cy="34" r="5" fill="var(--color-primary-400)" opacity="0.55">
-      <animate attributeName="cy" values="34;27;34" dur="3.6s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.2 1; 0.4 0 0.2 1" keyTimes="0;0.5;1" />
-    </circle>
-    <circle cx="172" cy="40" r="3.5" fill="var(--color-primary-300)" opacity="0.6">
-      <animate attributeName="cy" values="40;46;40" dur="4.2s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.2 1; 0.4 0 0.2 1" keyTimes="0;0.5;1" />
-    </circle>
-
-    <!-- dashboard card -->
-    <rect x="42" y="34" width="124" height="92" rx="12" fill="var(--color-surface-base)" stroke="var(--color-border-default)" stroke-width="1.5" />
-
-    <!-- title bar + window dots -->
-    <rect x="56" y="48" width="42" height="6" rx="3" fill="var(--color-border-strong)" />
-    <circle cx="150" cy="51" r="2.5" fill="var(--color-border-strong)" />
-    <circle cx="142" cy="51" r="2.5" fill="var(--color-border-strong)" />
-
-    <!-- divider -->
-    <line x1="42" y1="64" x2="166" y2="64" stroke="var(--color-border-default)" stroke-width="1" />
-
-    <!-- bar-chart widget (bars breathe) -->
-    <g>
-      <rect x="58" y="92" width="11" height="22" rx="2.5" fill="var(--color-primary-500)">
-        <animate attributeName="height" values="22;34;22" dur="2.6s" repeatCount="indefinite" begin="0s" />
-        <animate attributeName="y" values="92;80;92" dur="2.6s" repeatCount="indefinite" begin="0s" />
-      </rect>
-      <rect x="74" y="100" width="11" height="14" rx="2.5" fill="var(--color-primary-400)">
-        <animate attributeName="height" values="14;26;14" dur="2.6s" repeatCount="indefinite" begin="0.35s" />
-        <animate attributeName="y" values="100;88;100" dur="2.6s" repeatCount="indefinite" begin="0.35s" />
-      </rect>
-      <rect x="90" y="84" width="11" height="30" rx="2.5" fill="var(--color-primary-500)">
-        <animate attributeName="height" values="30;20;30" dur="2.6s" repeatCount="indefinite" begin="0.7s" />
-        <animate attributeName="y" values="84;94;84" dur="2.6s" repeatCount="indefinite" begin="0.7s" />
-      </rect>
-    </g>
-
-    <!-- sparkline widget (draws itself) -->
-    <polyline
-      points="116,104 126,94 136,99 146,86 156,90"
-      fill="none"
-      stroke="var(--color-primary-400)"
-      stroke-width="2.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-dasharray="120"
-    >
-      <animate attributeName="stroke-dashoffset" values="120;0;0;120" keyTimes="0;0.5;0.85;1" dur="4s" repeatCount="indefinite" />
-    </polyline>
-    <circle cx="146" cy="86" r="3" fill="var(--color-primary-500)">
-      <animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.45;0.5;0.85;1" dur="4s" repeatCount="indefinite" />
-    </circle>
-  </svg>
-</template>
diff --git a/web/src/components/common/sidebar/FolderList.spec.ts b/web/src/components/common/sidebar/FolderList.spec.ts
index 659da7e86d..70e9a7db6a 100644
--- a/web/src/components/common/sidebar/FolderList.spec.ts
+++ b/web/src/components/common/sidebar/FolderList.spec.ts
@@ -804,7 +804,7 @@ describe('FolderList.vue', () => {
 
     it('should render AddFolder with v-model:open bound to showAddFolderDialog', async () => {
       // After migration, AddFolder owns the overlay surface itself via
-      // v-model:open — there is no q-dialog wrapper anymore.
+      // v-model:open — there is no dialog wrapper anymore.
       const addFolder = wrapper.find('[data-test="add-folder-stub"]')
       expect(addFolder.exists()).toBe(true)
       expect(addFolder.attributes('data-open')).toBe('false')
diff --git a/web/src/components/common/sidebar/FolderList.vue b/web/src/components/common/sidebar/FolderList.vue
index 4c47c6dff5..01d7040bae 100644
--- a/web/src/components/common/sidebar/FolderList.vue
+++ b/web/src/components/common/sidebar/FolderList.vue
@@ -17,9 +17,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <!-- eslint-disable vue/v-on-event-hyphenation -->
 <!-- eslint-disable vue/attribute-hyphenation -->
 <template>
-  <div class="bg-surface-panel h-full flex flex-col pb-[0.3rem] border-r border-border-default">
+  <div class="bg-surface-panel h-full flex flex-col pb-1 border-r border-border-default">
       <div class="folder-header bg-transparent">
-        <div class="font-semibold text-sm text-text-primary px-2 py-2 flex items-center justify-between gap-2">
+        <div class="font-semibold text-sm text-text-heading pl-page-edge pr-1.5 py-2 flex items-center justify-between gap-2">
           {{ t('dashboard.folders') }}
           <div>
             <OButton
@@ -34,7 +34,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </div>
         </div>
         <!-- Search Input -->
-        <div class="p-2">
+        <div class="px-1.5 pb-2">
           <OSearchInput
             v-model="searchQuery"
             data-test="folder-search"
@@ -44,7 +44,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           />
         </div>
       </div>
-      <div class="folders-tabs flex-1 px-1 overflow-y-auto">
+      <div class="folders-tabs flex-1 overflow-y-auto px-1.5">
         <OTabs
           orientation="vertical"
           dense
@@ -55,29 +55,30 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           v-for="tab in filteredTabs"
           :key="tab.folderId"
           :name="tab.folderId"
-          class="test-class min-h-[1.5rem]"
+          class="test-class min-h-6"
           :data-test="`dashboard-folder-tab-${tab.folderId}`"
           @click="onTabClick(tab.folderId)"
           >
           <div class="folder-item w-full flex items-center justify-between flex-nowrap gap-2 min-h-6 group/row" :data-test="`dashboard-folder-tab-name-${tab.name}`">
-              <OIcon
-                v-if="tab.folderId === FAVORITES_FOLDER_ID"
-                name="favorite"
-                size="sm"
-                class="shrink-0 text-favorite"
-              />
-              <span class="folder-name flex-1 min-w-0 text-left truncate" :title="tab.name" :data-test="`dashboard-folder-name-${tab.name}`">{{
-              tab.name
-              }}</span>
-              <div class="hidden group-hover/row:flex has-[[data-state=open]]:flex items-center shrink-0">
-              <ODropdown
+              <div class="flex items-center gap-1.5 flex-1 min-w-0">
+                <span class="folder-name min-w-0 text-left truncate" :title="tab.name" :data-test="`dashboard-folder-name-${tab.name}`">{{
+                tab.name
+                }}</span>
+                <OIcon
+                  v-if="tab.folderId === FAVORITES_FOLDER_ID"
+                  name="favorite"
+                  size="sm"
+                  class="shrink-0 text-favorite"
+                />
+              </div>
+              <div
                 v-if="
                   tab.folderId.toLowerCase() != 'default' &&
                   tab.folderId !== FAVORITES_FOLDER_ID
                 "
-                side="bottom"
-                align="start"
+                class="hidden group-hover/row:flex has-[[data-state=open]]:flex items-center shrink-0"
               >
+              <ODropdown side="bottom" align="start">
                 <template #trigger>
                   <OButton
                     size="icon"
@@ -369,20 +370,25 @@ export default defineComponent({
   });
   </script>
 
-<style>
-.folders-tabs .o-tabs {
+<style scoped>
+/* keep(lib-override:OTabs): targets OTabs' internal rendered DOM (.o-tabs,
+   .o-tab, .o-tab__label) which is a child component and never receives this
+   component's scope id — reached via :deep(). Not expressible as template
+   utilities. */
+.folders-tabs :deep(.o-tabs) {
   height: auto !important;
   max-height: none !important;
 }
 
-
-.folders-tabs .o-tabs--vertical {
+.folders-tabs :deep(.o-tabs--vertical) {
   margin: 0;
 }
 
-.folders-tabs .o-tabs--vertical .o-tab {
+/* Horizontal padding is deliberately NOT set here — OTab's vertical variant
+   derives it from --spacing-page-edge so the rail lines up with the page
+   header. Overriding it here is what used to push these rows out of line. */
+.folders-tabs :deep(.o-tabs--vertical .o-tab) {
   justify-content: flex-start;
-  padding: 0 0.625rem;
   border-radius: 0.5rem;
   /* No forced capitalize — folder names render as authored. Weight 500
      (record-name weight), not 600, so the list reads calm. Active state is
@@ -391,9 +397,8 @@ export default defineComponent({
   font-weight: 500;
 }
 
-.folders-tabs .o-tabs--vertical .o-tab__content.tab_content .o-tab__icon + .o-tab__label {
+.folders-tabs :deep(.o-tabs--vertical .o-tab__content.tab_content .o-tab__icon + .o-tab__label) {
   padding-left: 0.875rem;
   font-weight: 500;
 }
-
 </style>
diff --git a/web/src/components/common/sidebar/InlineSelectFolderDropdown.spec.ts b/web/src/components/common/sidebar/InlineSelectFolderDropdown.spec.ts
index f0a0f0d499..ea287f71b0 100644
--- a/web/src/components/common/sidebar/InlineSelectFolderDropdown.spec.ts
+++ b/web/src/components/common/sidebar/InlineSelectFolderDropdown.spec.ts
@@ -183,7 +183,7 @@ describe("InlineSelectFolderDropdown.vue", () => {
       expect(wrapper.vm.$options.name).toBe("InlineSelectFolderDropdown");
     });
 
-    it("renders the q-select", () => {
+    it("renders the select", () => {
       wrapper = createWrapper();
       expect(wrapper.find(".o-select-stub").exists()).toBe(true);
     });
@@ -236,13 +236,13 @@ describe("InlineSelectFolderDropdown.vue", () => {
       expect(wrapper.find('[data-test="o-button-stub"]').exists()).toBe(false);
     });
 
-    it("forwards disable=true to q-select stub", () => {
+    it("forwards disable=true to the select stub", () => {
       wrapper = createWrapper({ disable: true });
       const select = wrapper.find(".o-select-stub");
       expect(select.attributes("data-disable")).toBe("true");
     });
 
-    it("forwards disable=false to q-select stub by default", () => {
+    it("forwards disable=false to the select stub by default", () => {
       wrapper = createWrapper();
       const select = wrapper.find(".o-select-stub");
       expect(select.attributes("data-disable")).toBe("false");
@@ -434,10 +434,10 @@ describe("InlineSelectFolderDropdown.vue", () => {
     });
   });
 
-  // ─── Emit: update:modelValue from q-select ──────────────────────────────────
+  // ─── Emit: update:modelValue from the select ──────────────────────────────────
 
-  describe("q-select model value", () => {
-    it("emits 'update:modelValue' when q-select updates", async () => {
+  describe("select model value", () => {
+    it("emits 'update:modelValue' when the select updates", async () => {
       wrapper = createWrapper();
 
       const select = wrapper.find(".o-select-stub select");
@@ -450,7 +450,7 @@ describe("InlineSelectFolderDropdown.vue", () => {
       expect(emitted![0]).toEqual(["folder-1"]);
     });
 
-    it("passes the modelValue prop down to q-select", () => {
+    it("passes the modelValue prop down to the select", () => {
       wrapper = createWrapper({ modelValue: "folder-2" });
       const select = wrapper.find(".o-select-stub select");
       expect((select.element as HTMLSelectElement).value).toBe("folder-2");
diff --git a/web/src/components/common/sidebar/InlineSelectFolderDropdown.vue b/web/src/components/common/sidebar/InlineSelectFolderDropdown.vue
index 91fc5888c9..47b30b3058 100644
--- a/web/src/components/common/sidebar/InlineSelectFolderDropdown.vue
+++ b/web/src/components/common/sidebar/InlineSelectFolderDropdown.vue
@@ -106,19 +106,22 @@ export default defineComponent({
 </script>
 
 <style scoped>
+/* keep(lib-override:o2-select): narrows OSelect's own `w-full` root utility at three
+   breakpoints the theme registers no `--breakpoint-*` screens for; a plain `w-*` utility
+   would sit in the same layer as `w-full` and collide non-deterministically. */
 .folder-select {
-  width: 110px;
+  width: 6.875rem;
 }
 
-@media (max-width: 1500px) {
-  .folder-select { width: 90px; }
+@media (max-width: 93.75rem) {
+  .folder-select { width: 5.625rem; }
 }
 
-@media (max-width: 1100px) {
-  .folder-select { width: 75px; }
+@media (max-width: 68.75rem) {
+  .folder-select { width: 4.6875rem; }
 }
 
-@media (max-width: 950px) {
-  .folder-select { width: 65px; }
+@media (max-width: 59.375rem) {
+  .folder-select { width: 4.0625rem; }
 }
 </style>
diff --git a/web/src/components/common/sidebar/SearchFieldList.vue b/web/src/components/common/sidebar/SearchFieldList.vue
index 805e60cab6..c1259cfc33 100644
--- a/web/src/components/common/sidebar/SearchFieldList.vue
+++ b/web/src/components/common/sidebar/SearchFieldList.vue
@@ -2,7 +2,7 @@
 
 <template>
   <div class="flex flex-col w-full index-menu default-index-menu h-full!">
-    <div class="index-table logs-index-menu h-full! w-full">
+    <div class="index-table h-full! w-full">
       <OFieldList
         ref="fieldListRef"
         :fields="fieldListItems"
@@ -21,7 +21,7 @@
         <!-- Group header (only rendered for grouped/label rows) -->
         <template #group-header="{ row, groupName }">
           <div
-            class="field-group-header h-full w-full flex justify-between items-center rounded-[0.25rem]"
+            class="field-group-header h-full w-[calc(100%+2*var(--spacing-page-edge))] shrink-0 -ml-page-edge px-page-edge flex justify-between items-center font-semibold text-xs leading-7 cursor-pointer bg-surface-subtle text-field-list-group-text"
             :data-test="`search-field-list-group-${row.group}-header`"
             @click="toggleGroup(row.group)"
           >
@@ -45,9 +45,9 @@
         <!-- Field row: render field name with expand chevron + actions inside OFieldRow -->
         <template #field-row="{ row }">
           <OFieldRow>
-            <span class="field-type-container w-[0.55rem] shrink-0 flex items-center justify-center">
+            <span class="field-type-container relative w-[0.55rem] h-4 mr-[0.3rem] ml-[0.2rem] shrink-0 flex items-center justify-center">
               <OIcon
-                class="field-expand-icon inline-flex items-center justify-center shrink-0 w-4 text-[var(--o2-text-muted)]"
+                class="field-expand-icon absolute inline-flex items-center justify-center shrink-0 w-4 text-text-muted"
                 :name="expandedRows[row.name] ? 'expand-more' : 'chevron-right'"
                 size="sm"
               />
@@ -104,52 +104,52 @@
           >
             <!-- Group 1 header -->
             <div class="h-7 flex items-center justify-between px-2">
-              <OSkeleton type="rect" class="h-3 w-24 rounded-sm" />
-              <OSkeleton type="rect" class="h-3 w-3 rounded-sm" />
+              <OSkeleton type="rect" class="h-3 w-24 rounded-default" />
+              <OSkeleton type="rect" class="h-3 w-3 rounded-default" />
             </div>
             <!-- Group 1 fields -->
-            <div class="flex items-center gap-2 px-3 py-[0.375rem]">
-              <OSkeleton type="rect" class="w-[0.875rem] h-[0.875rem] rounded-sm shrink-0" />
+            <div class="flex items-center gap-2 px-3 py-1.5">
+              <OSkeleton type="rect" class="w-3.5 h-3.5 rounded-default shrink-0" />
               <OSkeleton type="text" class="flex-1" />
             </div>
-            <div class="flex items-center gap-2 px-3 py-[0.375rem]">
-              <OSkeleton type="rect" class="w-[0.875rem] h-[0.875rem] rounded-sm shrink-0" />
+            <div class="flex items-center gap-2 px-3 py-1.5">
+              <OSkeleton type="rect" class="w-3.5 h-3.5 rounded-default shrink-0" />
               <OSkeleton type="text" class="w-3/4" />
             </div>
-            <div class="flex items-center gap-2 px-3 py-[0.375rem]">
-              <OSkeleton type="rect" class="w-[0.875rem] h-[0.875rem] rounded-sm shrink-0" />
+            <div class="flex items-center gap-2 px-3 py-1.5">
+              <OSkeleton type="rect" class="w-3.5 h-3.5 rounded-default shrink-0" />
               <OSkeleton type="text" class="flex-1" />
             </div>
             <!-- Group 2 header -->
             <div class="h-7 flex items-center justify-between px-2 mt-2">
-              <OSkeleton type="rect" class="h-3 w-16 rounded-sm" />
-              <OSkeleton type="rect" class="h-3 w-3 rounded-sm" />
+              <OSkeleton type="rect" class="h-3 w-16 rounded-default" />
+              <OSkeleton type="rect" class="h-3 w-3 rounded-default" />
             </div>
             <!-- Group 2 fields -->
-            <div class="flex items-center gap-2 px-3 py-[0.375rem]">
-              <OSkeleton type="rect" class="w-[0.875rem] h-[0.875rem] rounded-sm shrink-0" />
+            <div class="flex items-center gap-2 px-3 py-1.5">
+              <OSkeleton type="rect" class="w-3.5 h-3.5 rounded-default shrink-0" />
               <OSkeleton type="text" class="w-4/5" />
             </div>
-            <div class="flex items-center gap-2 px-3 py-[0.375rem]">
-              <OSkeleton type="rect" class="w-[0.875rem] h-[0.875rem] rounded-sm shrink-0" />
+            <div class="flex items-center gap-2 px-3 py-1.5">
+              <OSkeleton type="rect" class="w-3.5 h-3.5 rounded-default shrink-0" />
               <OSkeleton type="text" class="w-2/3" />
             </div>
             <!-- Group 3 header -->
             <div class="h-7 flex items-center justify-between px-2 mt-2">
-              <OSkeleton type="rect" class="h-3 w-32 rounded-sm" />
-              <OSkeleton type="rect" class="h-3 w-3 rounded-sm" />
+              <OSkeleton type="rect" class="h-3 w-32 rounded-default" />
+              <OSkeleton type="rect" class="h-3 w-3 rounded-default" />
             </div>
             <!-- Group 3 fields -->
-            <div class="flex items-center gap-2 px-3 py-[0.375rem]">
-              <OSkeleton type="rect" class="w-[0.875rem] h-[0.875rem] rounded-sm shrink-0" />
+            <div class="flex items-center gap-2 px-3 py-1.5">
+              <OSkeleton type="rect" class="w-3.5 h-3.5 rounded-default shrink-0" />
               <OSkeleton type="text" class="flex-1" />
             </div>
-            <div class="flex items-center gap-2 px-3 py-[0.375rem]">
-              <OSkeleton type="rect" class="w-[0.875rem] h-[0.875rem] rounded-sm shrink-0" />
+            <div class="flex items-center gap-2 px-3 py-1.5">
+              <OSkeleton type="rect" class="w-3.5 h-3.5 rounded-default shrink-0" />
               <OSkeleton type="text" class="w-3/4" />
             </div>
-            <div class="flex items-center gap-2 px-3 py-[0.375rem]">
-              <OSkeleton type="rect" class="w-[0.875rem] h-[0.875rem] rounded-sm shrink-0" />
+            <div class="flex items-center gap-2 px-3 py-1.5">
+              <OSkeleton type="rect" class="w-3.5 h-3.5 rounded-default shrink-0" />
               <OSkeleton type="text" class="flex-1" />
             </div>
           </div>
@@ -169,7 +169,7 @@
               size="icon-panel"
               :disabled="bottomProps.isFirstPage"
               @click="bottomProps.firstPage"
-              class="py-1.5 px-1! m-0! min-w-6! w-6! min-h-5.5! h-5.5! rounded! overflow-visible!"
+              class="py-1.5 px-1! m-0! min-w-6! w-6! min-h-5.5! h-5.5! rounded-default! overflow-visible!"
             >
               <OIcon name="fast-rewind" size="sm" />
             </OButton>
@@ -182,7 +182,7 @@
                   bottomProps.currentPage === page ? 'primary' : 'ghost'
                 "
                 size="icon-panel"
-                class="py-1.5 px-1! m-0! min-w-6! w-6! min-h-5.5! h-5.5! text-xs! font-medium leading-none text-(--o2-text-primary)! rounded! overflow-visible!"
+                class="py-1.5 px-1! m-0! min-w-6! w-6! min-h-5.5! h-5.5! text-xs! font-medium leading-none text-text-body! rounded-default! overflow-visible!"
                 @click="setPage(page)"
                 >{{ page }}</OButton
               >
@@ -192,7 +192,7 @@
               size="icon-panel"
               :disabled="bottomProps.isLastPage"
               @click="bottomProps.lastPage"
-              class="py-1.5 px-1! m-0! min-w-6! w-6! min-h-5.5! h-5.5! rounded! overflow-visible!"
+              class="py-1.5 px-1! m-0! min-w-6! w-6! min-h-5.5! h-5.5! rounded-default! overflow-visible!"
             >
               <OIcon name="fast-forward" size="sm" />
             </OButton>
@@ -694,6 +694,10 @@ const copyContentValue = (value: string) => {
 </script>
 
 <style lang="scss" scoped>
+/* keep(lib-override:o2-field-list): reaches into OFieldList/FieldValuesPanel internals
+   via :deep() — those elements are owned by the child component, so no utility on this
+   template can reach them. */
+
 // Expanded field values should read as inline content, not a selected card —
 // drop the bordered/rounded panel treatment so no border or background lingers
 // once the row is expanded and the pointer moves away.
@@ -712,70 +716,4 @@ const copyContentValue = (value: string) => {
   padding-bottom: 0;
 }
 
-.field-list-pagination {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  margin-left: auto;
-}
-
-.pagination-nav-btn {
-  padding: 0.375rem 0.25rem !important;
-  margin: 0 !important;
-  min-width: 1.5rem !important;
-  width: 1.5rem !important;
-  min-height: 1.375rem !important;
-  height: 1.375rem !important;
-  border-radius: 0.25rem !important;
-  overflow: visible !important;
-}
-
-.pagination-page-btn {
-  padding: 0.375rem 0.25rem !important;
-  margin: 0 !important;
-  min-width: 1.5rem !important;
-  width: 1.5rem !important;
-  min-height: 1.375rem !important;
-  height: 1.375rem !important;
-  font-size: 0.75rem !important;
-  font-weight: 500;
-  line-height: 1;
-  color: var(--o2-text-primary) !important;
-  border-radius: 0.25rem !important;
-  overflow: visible !important;
-}
-
-.field-group-header {
-  font-weight: 600;
-  font-size: 0.75rem;
-  padding: 0 0.325rem;
-  cursor: pointer;
-  background-color: var(--color-surface-subtle);
-  color: var(--color-field-list-group-text);
-}
-
-.index-menu {
-  width: 100%;
-
-  .index-table {
-    width: 100%;
-  }
-
-  .field-type-container {
-    width: 0.55rem;
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .field-expand-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    width: 1rem;
-    color: var(--o2-text-muted);
-  }
-}
 </style>
diff --git a/web/src/components/common/sidebar/SelectFolderDropDown.spec.ts b/web/src/components/common/sidebar/SelectFolderDropDown.spec.ts
index a6d6fd0ea1..4b36a8a3dd 100644
--- a/web/src/components/common/sidebar/SelectFolderDropDown.spec.ts
+++ b/web/src/components/common/sidebar/SelectFolderDropDown.spec.ts
@@ -138,8 +138,6 @@ const globalConfig = {
       emits: ["update:modelValue"],
     },
     "OIcon": { template: '<i :class="name" />', props: ["name", "size"] },
-    "q-item": { template: "<div class='q-item-stub'><slot /></div>" },
-    "q-item-section": { template: "<div><slot /></div>" },
   },
   mocks: { $store: store },
   provide: { store },
@@ -363,9 +361,9 @@ describe("SelectFolderDropDown.vue", () => {
   // ─── Dropdown options ─────────────────────────────────────────────────────────
 
   describe("Dropdown options", () => {
-    it("q-select receives options from foldersByType mapped to {label, value}", () => {
+    it("the select receives options from foldersByType mapped to {label, value}", () => {
       wrapper = createWrapper();
-      // The q-select stub receives the mapped options array; we verify via vm
+      // The select stub receives the mapped options array; we verify via vm
       const vm = wrapper.vm as any;
       // Verify store folders are accessible
       expect(vm.store.state.organizationData.foldersByType["alerts"]).toEqual(MOCK_FOLDERS);
diff --git a/web/src/components/cross-linking/CrossLinkDialog.schema.ts b/web/src/components/cross-linking/CrossLinkDialog.schema.ts
index b9e86de72a..5d2bfc33e8 100644
--- a/web/src/components/cross-linking/CrossLinkDialog.schema.ts
+++ b/web/src/components/cross-linking/CrossLinkDialog.schema.ts
@@ -3,15 +3,8 @@
 // Validation schema for CrossLinkDialog.vue. Built via a factory so the
 // required messages stay i18n-driven (pass useI18n's `t`).
 //
-// Restored from the BEFORE baseline:
-//   name — `!!v || t('crossLinks.nameRequired')` → z.string().min(1, …)
-//   url  — `!!v || t('crossLinks.urlRequired')`  → z.string().min(1, …)
-//   (No regex on either — matching the BEFORE rows exactly.)
-//
-// `fields` is the chip-builder value. The chip-builder is now an authored
-// OFormCombobox (R1-strict: no bare control inside the OForm) and `fields` is a
-// fully form-owned, whole-array OPTIONAL field (the legacy "Fields *" asterisk
-// was never enforced, so it is NOT a min(1) here).
+// `fields` is the chip-builder value: a fully form-owned, whole-array OPTIONAL
+// field (not a min(1)).
 
 import { z } from "zod";
 
@@ -20,10 +13,8 @@ export const makeCrossLinkDialogSchema = (t: (_key: string) => string) =>
     name: z.string().min(1, t("crossLinks.nameRequired")),
     url: z.string().min(1, t("crossLinks.urlRequired")),
     fields: z.array(z.object({ name: z.string() })).default([]),
-    // Chip-builder scratch input (the OFormCombobox / OFormInput that stages a
-    // field name before it's committed as a chip). NOT part of the emit
-    // payload — R1-strict keeps it form-owned + optional so the bare control is
-    // gone.
+    // Chip-builder scratch input that stages a field name before it's committed
+    // as a chip. NOT part of the emit payload; form-owned + optional.
     newFieldName: z.string().optional(),
   });
 
diff --git a/web/src/components/cross-linking/CrossLinkDialog.vue b/web/src/components/cross-linking/CrossLinkDialog.vue
index f9dc7c5495..f9b4a754e6 100644
--- a/web/src/components/cross-linking/CrossLinkDialog.vue
+++ b/web/src/components/cross-linking/CrossLinkDialog.vue
@@ -30,15 +30,15 @@
               :placeholder="t('crossLinks.urlPlaceholder')"
               data-test="cross-link-url-input"
             />
-            <div class="text-xs mt-1" style="color: var(--o2-text-muted)">
+            <div class="text-xs mt-1 text-text-muted">
               {{ t("crossLinks.urlHint") }}
             </div>
           </div>
 
           <!-- Fields -->
           <div class="mb-2">
-            <label class="block text-sm font-semibold mb-1" style="color: var(--o2-text-primary)">{{ t("crossLinks.fields") }}</label>
-            <div class="text-xs mb-2" style="color: var(--o2-text-muted)">
+            <label class="block text-sm font-semibold mb-1 text-text-heading">{{ t("crossLinks.fields") }}</label>
+            <div class="text-xs mb-2 text-text-muted">
               {{ t("crossLinks.fieldsHint") }}
             </div>
             <div v-if="formFields.length > 0" class="flex flex-wrap gap-1 mb-2">
@@ -46,7 +46,7 @@
                 v-for="(field, idx) in formFields"
                 :key="idx"
                 type="selectionChip"
-                class="max-w-[250px]"
+                class="max-w-62.5"
                 :data-test="`cross-link-field-chip-${idx}`"
               >
                 <span class="truncate text-xs" :title="field.name">{{ field.name }}</span>
diff --git a/web/src/components/cross-linking/CrossLinkManager.spec.ts b/web/src/components/cross-linking/CrossLinkManager.spec.ts
index 13ad20afcb..4c4715dcda 100644
--- a/web/src/components/cross-linking/CrossLinkManager.spec.ts
+++ b/web/src/components/cross-linking/CrossLinkManager.spec.ts
@@ -47,13 +47,7 @@ describe("CrossLinkManager Component", () => {
       global: {
         plugins: [i18n],
         provide: { store },
-        stubs: {
-          "q-btn": {
-            template:
-              '<button @click="$emit(\'click\')" :data-test="$attrs[\'data-test\']" :disabled="$attrs.disable"><slot />{{ $attrs.label }}</button>',
-            emits: ["click"],
-          },
-        },
+        stubs: {},
       },
     });
   };
diff --git a/web/src/components/cross-linking/CrossLinkManager.vue b/web/src/components/cross-linking/CrossLinkManager.vue
index 63f61f81f5..6d622dd048 100644
--- a/web/src/components/cross-linking/CrossLinkManager.vue
+++ b/web/src/components/cross-linking/CrossLinkManager.vue
@@ -4,7 +4,7 @@
     <div class="flex justify-between items-center mb-3">
       <div>
         <div class="text-base font-bold">{{ title }}</div>
-        <div v-if="subtitle" class="text-xs" style="color: var(--o2-text-muted)">
+        <div v-if="subtitle" class="text-xs text-text-muted">
           {{ subtitle }}
         </div>
       </div>
@@ -25,16 +25,15 @@
       <div
         v-for="(link, idx) in links"
         :key="link.name"
-        class="cross-link-item el-border rounded-md mb-1 p-2"
+        class="cross-link-item border border-card-glass-border rounded-default mb-1 p-2"
         :data-test="`cross-link-item-${idx}`"
       >
         <div class="flex justify-between items-start">
           <div class="flex-1 min-w-0">
             <!-- Name -->
             <div
-              class="text-sm font-medium font-bold truncate"
+              class="text-sm font-medium font-bold truncate text-text-heading"
               :title="link.name"
-              style="color: var(--o2-text-primary)"
               :data-test="`cross-link-item-name-${idx}`"
             >
               {{ link.name }}
@@ -47,9 +46,8 @@
             </div>
             <!-- URL -->
             <div
-              class="text-xs truncate mt-1"
+              class="text-xs truncate mt-1 text-text-muted"
               :title="link.url"
-              style="color: var(--o2-text-muted)"
               :data-test="`cross-link-item-url-${idx}`"
             >
               {{ link.url }}
@@ -60,7 +58,7 @@
                 v-for="(field, fIdx) in link.fields"
                 :key="fIdx"
                 type="fieldTag"
-                class="max-w-[200px]"
+                class="max-w-50"
                 :data-test="`cross-link-field-chip-${fIdx}`"
               >
                 <span class="truncate text-xs" :title="field.name">{{ field.name }}</span>
@@ -91,8 +89,7 @@
     <!-- Empty State -->
     <div
       v-else
-      class="text-center py-4 text-sm"
-      style="color: var(--o2-text-muted)"
+      class="text-center py-4 text-sm text-text-muted"
       data-test="cross-link-empty"
     >
       {{ t("crossLinks.emptyState", { addLabel: t("crossLinks.addCrossLink") }) }}
diff --git a/web/src/components/cross-linking/CrossLinkUserGuide.vue b/web/src/components/cross-linking/CrossLinkUserGuide.vue
index 371f3e669c..9e939cf603 100644
--- a/web/src/components/cross-linking/CrossLinkUserGuide.vue
+++ b/web/src/components/cross-linking/CrossLinkUserGuide.vue
@@ -18,53 +18,48 @@
     </template>
 
     <div
-      class="user-guide-body w-125 max-h-[60vh] overflow-y-auto overflow-x-hidden py-3 px-4 text-sm leading-[1.4]"
-      :class="
-        store.state.theme == 'dark'
-          ? 'theme-dark bg-[var(--o2-bg-card-dark,#1a1a1a)]'
-          : 'theme-light bg-white'
-      "
+      class="user-guide-body w-125 max-h-[60vh] overflow-y-auto overflow-x-hidden py-3 px-4 text-sm leading-[1.4] bg-surface-base"
     >
-      <p>{{ t("crossLinks.guideIntro") }}</p>
+      <p class="mt-1 mb-2">{{ t("crossLinks.guideIntro") }}</p>
 
       <div class="header font-semibold mt-3 mb-1">{{ t("crossLinks.guideFieldHeader") }}</div>
-      <p>{{ t("crossLinks.guideFieldDesc") }}</p>
-      <ul>
-        <li>
-          <span class="bg-highlight bg-(--o2-code-bg,#f1f5f9) py-px px-1 rounded font-mono text-[0.85em]">${field.__name}</span> – {{ t("crossLinks.guideFieldName") }}
+      <p class="mt-1 mb-2">{{ t("crossLinks.guideFieldDesc") }}</p>
+      <ul class="mt-1 mb-3 ml-5 p-0">
+        <li class="my-1">
+          <span class="bg-highlight-bg px-1.25 py-px rounded-default font-mono text-[0.85em]">${field.__name}</span> – {{ t("crossLinks.guideFieldName") }}
         </li>
-        <li>
-          <span class="bg-highlight bg-(--o2-code-bg,#f1f5f9) py-px px-1 rounded font-mono text-[0.85em]">${field.__value}</span> – {{ t("crossLinks.guideFieldValue") }}
+        <li class="my-1">
+          <span class="bg-highlight-bg px-1.25 py-px rounded-default font-mono text-[0.85em]">${field.__value}</span> – {{ t("crossLinks.guideFieldValue") }}
         </li>
       </ul>
 
       <div class="header font-semibold mt-3 mb-1">{{ t("crossLinks.guideTimeHeader") }}</div>
-      <p>{{ t("crossLinks.guideTimeDesc") }}</p>
-      <ul>
-        <li>
-          <span class="bg-highlight bg-(--o2-code-bg,#f1f5f9) py-px px-1 rounded font-mono text-[0.85em]">${start_time}</span> – {{ t("crossLinks.guideStartTime") }}
+      <p class="mt-1 mb-2">{{ t("crossLinks.guideTimeDesc") }}</p>
+      <ul class="mt-1 mb-3 ml-5 p-0">
+        <li class="my-1">
+          <span class="bg-highlight-bg px-1.25 py-px rounded-default font-mono text-[0.85em]">${start_time}</span> – {{ t("crossLinks.guideStartTime") }}
         </li>
-        <li>
-          <span class="bg-highlight bg-(--o2-code-bg,#f1f5f9) py-px px-1 rounded font-mono text-[0.85em]">${end_time}</span> – {{ t("crossLinks.guideEndTime") }}
+        <li class="my-1">
+          <span class="bg-highlight-bg px-1.25 py-px rounded-default font-mono text-[0.85em]">${end_time}</span> – {{ t("crossLinks.guideEndTime") }}
         </li>
       </ul>
-      <p>
+      <p class="mt-1 mb-2">
         {{ t("crossLinks.guideTimeExample") }}
-        <span class="bg-highlight bg-(--o2-code-bg,#f1f5f9) py-px px-1 rounded font-mono text-[0.85em]">from=${start_time}&amp;to=${end_time}</span>
+        <span class="bg-highlight-bg px-1.25 py-px rounded-default font-mono text-[0.85em]">from=${start_time}&amp;to=${end_time}</span>
       </p>
 
       <div class="header font-semibold mt-3 mb-1">{{ t("crossLinks.guideQueryHeader") }}</div>
-      <p>{{ t("crossLinks.guideQueryDesc") }}</p>
-      <ul>
-        <li><span class="bg-highlight bg-(--o2-code-bg,#f1f5f9) py-px px-1 rounded font-mono text-[0.85em]">${query}</span> – {{ t("crossLinks.guideQuery") }}</li>
-        <li>
-          <span class="bg-highlight bg-(--o2-code-bg,#f1f5f9) py-px px-1 rounded font-mono text-[0.85em]">${query_encoded}</span> – {{ t("crossLinks.guideQueryEncoded") }}
+      <p class="mt-1 mb-2">{{ t("crossLinks.guideQueryDesc") }}</p>
+      <ul class="mt-1 mb-3 ml-5 p-0">
+        <li class="my-1"><span class="bg-highlight-bg px-1.25 py-px rounded-default font-mono text-[0.85em]">${query}</span> – {{ t("crossLinks.guideQuery") }}</li>
+        <li class="my-1">
+          <span class="bg-highlight-bg px-1.25 py-px rounded-default font-mono text-[0.85em]">${query_encoded}</span> – {{ t("crossLinks.guideQueryEncoded") }}
         </li>
       </ul>
 
       <div class="header font-semibold mt-3 mb-1">{{ t("crossLinks.guideExampleHeader") }}</div>
-      <p>
-        <span class="bg-highlight bg-(--o2-code-bg,#f1f5f9) py-px px-1 rounded font-mono text-[0.85em]"
+      <p class="mt-1 mb-2">
+        <span class="bg-highlight-bg px-1.25 py-px rounded-default font-mono text-[0.85em]"
           >https://example.com/trace/${field.__value}?from=${start_time}&amp;to=${end_time}</span
         >
       </p>
@@ -97,18 +92,3 @@ export default {
   },
 };
 </script>
-
-<style>
-.user-guide-body p {
-  margin: 0.25rem 0 0.5rem 0;
-}
-
-.user-guide-body ul {
-  margin: 0.25rem 0 0.75rem 1.25rem;
-  padding: 0;
-}
-
-.user-guide-body ul li {
-  margin: 0.25rem 0;
-}
-</style>
diff --git a/web/src/components/dashboards/AddDashboardFromGitHub.vue b/web/src/components/dashboards/AddDashboardFromGitHub.vue
index 1463a58566..b4f50af007 100644
--- a/web/src/components/dashboards/AddDashboardFromGitHub.vue
+++ b/web/src/components/dashboards/AddDashboardFromGitHub.vue
@@ -41,8 +41,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         >
           <OIcon
             name="error-outline"
-            class="mb-2" style="width: 3em; height: 3em;" />
-          <div class="text-red-500">{{ error }}</div>
+            class="mb-2 w-[3em] h-[3em]" />
+          <div class="text-status-error-text">{{ error }}</div>
           <OButton
             variant="primary"
             size="sm"
@@ -62,13 +62,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             data-test="add-dashboard-github-search"
           />
 
-          <div class="text-xs text-gray-500 mb-2 px-1">
+          <div class="text-xs text-text-secondary mb-2 px-1">
             {{ t('dashboard.addDashboardFromGitHub.dashboardsAvailable', { count: filteredDashboards.length }) }}
           </div>
 
           <ul
-            class="dashboard-list flex flex-col rounded list-none p-0 m-0 max-h-[calc(100dvh-200px)] overflow-y-auto"
-            :class="filteredDashboards.length > 0 ? 'border border-border' : ''"
+            class="flex flex-col rounded-default list-none p-0 m-0 max-h-[calc(100dvh-12.5rem)] overflow-y-auto"
+            :class="filteredDashboards.length > 0 ? 'border border-border-default' : ''"
           >
             <li
               v-for="dashboard in filteredDashboards"
@@ -77,8 +77,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               class="flex items-center gap-2 px-3 py-1 cursor-pointer transition-colors duration-200 border-l-4"
               :class="[
                 isSelected(dashboard)
-                  ? 'selected-item bg-(--o2-tab-bg)! border-primary'
-                  : 'border-transparent hover:bg-gray-50',
+                  ? 'bg-theme-tab-bg! border-primary-600'
+                  : 'border-transparent hover:bg-hover-gray',
               ]"
               data-test="add-dashboard-github-item"
             >
@@ -94,7 +94,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </span>
                 <span
                   v-if="dashboard.description"
-                  class="block text-xs text-muted-foreground"
+                  class="block text-xs text-text-muted"
                 >
                   {{ dashboard.description }}
                 </span>
@@ -124,7 +124,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           class="grow"
           data-test="add-dashboard-github-folder-select"
         />
-        <div style="width: 40px; margin-bottom: 2px">
+        <div class="w-10 mb-0.5">
           <OButton
             variant="outline"
             size="icon-xs"
@@ -600,9 +600,3 @@ export default defineComponent({
   },
 });
 </script>
-
-<style>
-.dashboard-list li:hover:not(.selected-item) {
-  background-color: var(--o2-hover-gray);
-}
-</style>
diff --git a/web/src/components/dashboards/AlertContextMenu.spec.ts b/web/src/components/dashboards/AlertContextMenu.spec.ts
index 7a9bf93095..c9712a39e5 100644
--- a/web/src/components/dashboards/AlertContextMenu.spec.ts
+++ b/web/src/components/dashboards/AlertContextMenu.spec.ts
@@ -160,14 +160,14 @@ describe("AlertContextMenu Component", () => {
       wrapper = createWrapper();
       const aboveItem = wrapper.find('[data-test="alert-context-menu-above"]');
       expect(aboveItem.exists()).toBe(true);
-      expect(aboveItem.classes()).toContain("hover:bg-[#f5f5f5]");
+      expect(aboveItem.classes()).toContain("hover:bg-dropdown-item-hover-bg");
     });
 
     it("should apply hover background utility class to below menu item", () => {
       wrapper = createWrapper();
       const belowItem = wrapper.find('[data-test="alert-context-menu-below"]');
       expect(belowItem.exists()).toBe(true);
-      expect(belowItem.classes()).toContain("hover:bg-[#f5f5f5]");
+      expect(belowItem.classes()).toContain("hover:bg-dropdown-item-hover-bg");
     });
 
     it("should apply cursor-pointer class to menu items", () => {
diff --git a/web/src/components/dashboards/AlertContextMenu.vue b/web/src/components/dashboards/AlertContextMenu.vue
index d3d820922f..6f0ed533ac 100644
--- a/web/src/components/dashboards/AlertContextMenu.vue
+++ b/web/src/components/dashboards/AlertContextMenu.vue
@@ -19,13 +19,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <div
       v-if="visible"
       ref="menuRef"
-      class="fixed z-9999 bg-white dark:bg-[#2c2c2c] border border-(--o2-border) dark:border-[#404040] rounded shadow-[0_2px_8px_rgba(0,0,0,0.15)] dark:shadow-[0_2px_8px_rgba(0,0,0,0.4)] min-w-70 py-1 px-0"
+      class="fixed z-9999 bg-dropdown-bg border border-dropdown-border rounded-default shadow-[0_2px_8px_color-mix(in_srgb,var(--color-black)_15%,transparent)] dark:shadow-[0_2px_8px_color-mix(in_srgb,var(--color-black)_40%,transparent)] min-w-70 py-1 px-0"
       :style="menuStyle"
       @click.stop
       data-test="alert-context-menu"
     >
       <div
-        class="flex items-center py-2 px-4 cursor-pointer [transition:background-color_0.2s] text-sm text-[#333] hover:bg-[#f5f5f5] active:bg-[var(--o2-border)] dark:text-[var(--o2-border)] dark:hover:bg-[#383838] dark:active:bg-[#404040]"
+        class="flex items-center py-2 px-4 cursor-pointer [transition:background-color_0.2s] text-sm text-dropdown-item-text hover:bg-dropdown-item-hover-bg active:bg-dropdown-item-active-bg"
         @click="handleMenuItemClick('above')"
         data-test="alert-context-menu-above"
       >
@@ -33,7 +33,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <span class="select-none">Create Alert with threshold above {{ formattedValue }}</span>
       </div>
       <div
-        class="flex items-center py-2 px-4 cursor-pointer [transition:background-color_0.2s] text-sm text-[#333] hover:bg-[#f5f5f5] active:bg-[var(--o2-border)] dark:text-[var(--o2-border)] dark:hover:bg-[#383838] dark:active:bg-[#404040]"
+        class="flex items-center py-2 px-4 cursor-pointer [transition:background-color_0.2s] text-sm text-dropdown-item-text hover:bg-dropdown-item-hover-bg active:bg-dropdown-item-active-bg"
         @click="handleMenuItemClick('below')"
         data-test="alert-context-menu-below"
       >
diff --git a/web/src/components/dashboards/ColorSwatchPicker.vue b/web/src/components/dashboards/ColorSwatchPicker.vue
index 13bf317eca..43090619d1 100644
--- a/web/src/components/dashboards/ColorSwatchPicker.vue
+++ b/web/src/components/dashboards/ColorSwatchPicker.vue
@@ -15,19 +15,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="swatch-row" :data-test="dataTest">
-    <!-- None -->
+  <div class="flex flex-wrap items-center gap-1.5" :data-test="dataTest">
+    <!-- None — checkerboard tint with a diagonal strike -->
     <button
       type="button"
-      class="swatch swatch--none"
-      :class="{ 'swatch--active': !modelValue }"
+      class="relative inline-flex h-5 w-5 cursor-pointer items-center justify-center rounded-default border border-border-default p-0 transition-[transform,box-shadow,border-color] duration-100 hover:scale-[1.12] bg-[repeating-linear-gradient(45deg,color-mix(in_srgb,var(--color-grey-500)_12%,transparent),color-mix(in_srgb,var(--color-grey-500)_12%,transparent)_2px,transparent_2px,transparent_6px)]"
+      :class="!modelValue ? 'border-primary-600 ring-2 ring-focus-ring' : ''"
       :title="t('dashboard.colorNone')"
       :aria-label="t('dashboard.colorNone')"
       :aria-pressed="!modelValue"
       :data-test="dataTest ? `${dataTest}-none` : undefined"
       @click.stop="select(null)"
     >
-      <span class="swatch-slash" />
+      <span
+        class="absolute inset-x-px top-1/2 h-px origin-center -rotate-45 bg-status-negative"
+      />
     </button>
 
     <!-- Curated swatches -->
@@ -35,8 +37,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       v-for="c in swatches"
       :key="c"
       type="button"
-      class="swatch"
-      :class="{ 'swatch--active': isActive(c) }"
+      class="relative inline-flex h-5 w-5 cursor-pointer items-center justify-center rounded-default border border-border-default p-0 transition-[transform,box-shadow,border-color] duration-100 hover:scale-[1.12]"
+      :class="isActive(c) ? 'border-primary-600 ring-2 ring-focus-ring' : ''"
       :style="{ background: c }"
       :title="c"
       :aria-label="c"
@@ -51,10 +53,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       />
     </button>
 
-    <!-- Custom (native color input) -->
+    <!-- Custom (native color input) — rainbow wheel until a colour is chosen -->
     <label
-      class="swatch swatch--custom"
-      :class="{ 'swatch--active': isCustomActive }"
+      class="relative inline-flex h-5 w-5 cursor-pointer items-center justify-center rounded-default border border-border-default p-0 transition-[transform,box-shadow,border-color] duration-100 hover:scale-[1.12] bg-[conic-gradient(from_0deg,var(--color-error-500),var(--color-warning-400),var(--color-success-500),var(--color-blue-500),var(--color-purple-500),var(--color-error-500))]"
+      :class="isCustomActive ? 'border-primary-600 ring-2 ring-focus-ring' : ''"
       :style="isCustomActive ? { background: modelValue } : {}"
       :title="t('dashboard.customColor')"
     >
@@ -72,8 +74,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       />
       <input
         type="color"
-        class="swatch-native"
-        :value="modelValue || '#1976d2'"
+        class="absolute inset-0 h-full w-full cursor-pointer border-none p-0 opacity-0"
+        :value="modelValue || DEFAULT_CUSTOM_COLOR"
         @input="(e) => select((e.target as HTMLInputElement).value)"
       />
     </label>
@@ -86,6 +88,10 @@ import { useI18n } from "vue-i18n";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import { isColorDark } from "@/utils/dashboard/chartColorUtils";
 
+// Native <input type="color"> only accepts a literal hex — it cannot resolve a
+// CSS custom property — so this seed value has to stay a concrete string.
+const DEFAULT_CUSTOM_COLOR = "#1976d2";
+
 export default defineComponent({
   name: "ColorSwatchPicker",
   components: { OIcon },
@@ -110,90 +116,15 @@ export default defineComponent({
 
     const select = (c: string | null) => emit("update:modelValue", c);
 
-    return { t, isActive, isCustomActive, isDark: isColorDark, select };
+    return {
+      t,
+      isActive,
+      isCustomActive,
+      isDark: isColorDark,
+      select,
+      DEFAULT_CUSTOM_COLOR,
+    };
   },
 });
 </script>
 
-<style lang="scss" scoped>
-.swatch-row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 5px;
-}
-
-.swatch {
-  position: relative;
-  width: 20px;
-  height: 20px;
-  border-radius: 5px;
-  border: 1px solid rgba(128, 128, 128, 0.3);
-  cursor: pointer;
-  padding: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  transition: transform 0.1s, box-shadow 0.1s, border-color 0.1s;
-
-  &:hover {
-    transform: scale(1.12);
-  }
-
-  &--active {
-    border-color: var(--color-primary-600, #1976d2);
-    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.28);
-  }
-}
-
-// "No color" — checkerboard with a diagonal strike
-.swatch--none {
-  background: repeating-linear-gradient(
-    45deg,
-    rgba(128, 128, 128, 0.12),
-    rgba(128, 128, 128, 0.12) 2px,
-    transparent 2px,
-    transparent 6px
-  );
-
-  .swatch-slash {
-    position: absolute;
-    inset: 0;
-    &::after {
-      content: "";
-      position: absolute;
-      top: 50%;
-      left: 1px;
-      right: 1px;
-      height: 1.5px;
-      background: #e53935;
-      transform: rotate(-45deg);
-      transform-origin: center;
-    }
-  }
-}
-
-.swatch--custom {
-  background:
-    conic-gradient(
-      from 0deg,
-      #f44336,
-      #ffeb3b,
-      #4caf50,
-      #2196f3,
-      #9c27b0,
-      #f44336
-    );
-}
-
-.swatch-native {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  cursor: pointer;
-  border: none;
-  padding: 0;
-}
-</style>
diff --git a/web/src/components/dashboards/ColumnFormatControls.vue b/web/src/components/dashboards/ColumnFormatControls.vue
index babf9d1078..3f3aabe353 100644
--- a/web/src/components/dashboards/ColumnFormatControls.vue
+++ b/web/src/components/dashboards/ColumnFormatControls.vue
@@ -15,10 +15,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="divide-y divide-[rgba(128,128,128,0.08)]">
+  <div
+    class="divide-y divide-[color-mix(in_srgb,var(--color-grey-500)_8%,transparent)]"
+  >
     <!-- Field type -->
     <div class="px-3 py-2">
-      <div class="o-input-label block mb-1.5">
+      <div class="o-input-label text-compact font-medium leading-tight text-input-label-text block mb-1.5">
         {{ t("dashboard.sectionFieldType") }}
       </div>
       <OToggleGroup
@@ -40,7 +42,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     <!-- Value formatting (numeric only) -->
     <div v-if="isNumeric" class="px-3 py-2">
-      <div class="o-input-label block mb-1.5">
+      <div class="o-input-label text-compact font-medium leading-tight text-input-label-text block mb-1.5">
         {{ t("dashboard.sectionValueFormatting") }}
       </div>
       <OSelect
@@ -60,7 +62,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     <!-- Alignment -->
     <div class="px-3 py-2">
-      <div class="o-input-label block mb-1.5">
+      <div class="o-input-label text-compact font-medium leading-tight text-input-label-text block mb-1.5">
         {{ t("dashboard.sectionAlignment") }}
       </div>
       <OToggleGroup
@@ -82,9 +84,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     <!-- Styling -->
     <div class="px-3 py-2">
-      <div class="o-input-label block mb-1.5">{{ t("dashboard.sectionStyling") }}</div>
+      <div class="o-input-label text-compact font-medium leading-tight text-input-label-text block mb-1.5">{{ t("dashboard.sectionStyling") }}</div>
       <div class="flex items-center gap-2 mt-2 flex-wrap">
-        <span class="o-input-label shrink-0 w-24">{{ t("dashboard.textColor") }}</span>
+        <span class="o-input-label text-compact font-medium leading-tight text-input-label-text shrink-0 w-24">{{ t("dashboard.textColor") }}</span>
         <ColorSwatchPicker
           v-model="col.textColor"
           :swatches="TEXT_SWATCHES"
@@ -92,7 +94,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         />
       </div>
       <div class="flex items-center gap-2 mt-2 flex-wrap">
-        <span class="o-input-label shrink-0 w-24">{{ t("dashboard.bgColor") }}</span>
+        <span class="o-input-label text-compact font-medium leading-tight text-input-label-text shrink-0 w-24">{{ t("dashboard.bgColor") }}</span>
         <ColorSwatchPicker
           v-model="col.bgColor"
           :swatches="BG_SWATCHES"
@@ -101,13 +103,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </div>
       <button
         type="button"
-        class="inline-flex items-center gap-2 py-1.5 px-2.5 mt-3 rounded-md border border-[rgba(128,128,128,0.28)] bg-transparent cursor-pointer text-left transition-colors hover:border-[var(--color-primary-600)]"
-        :class="{ 'cf-toggle-active': col.autoColor }"
+        class="inline-flex items-center gap-2 py-1.5 px-2.5 mt-3 rounded-default border cursor-pointer text-left transition-colors hover:border-primary-600"
+        :class="
+          col.autoColor
+            ? 'border-primary-600 bg-[color-mix(in_srgb,var(--color-primary-600)_7%,transparent)]'
+            : 'border-[color-mix(in_srgb,var(--color-grey-500)_28%,transparent)] bg-transparent'
+        "
         :data-test="`o2-format-unique-color-${col.field}`"
         @click="col.autoColor = !col.autoColor"
       >
         <OCheckbox :model-value="col.autoColor" size="sm" class="pointer-events-none" />
-        <span class="o-input-label cursor-pointer">{{
+        <span class="o-input-label text-compact font-medium leading-tight text-input-label-text cursor-pointer">{{
           t("dashboard.overrideConfigUniqueValueColor")
         }}</span>
       </button>
@@ -115,22 +121,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     <!-- Conditional (numeric only) -->
     <div v-if="isNumeric" class="px-3 py-2">
-      <div class="o-input-label block mb-1.5">
+      <div class="o-input-label text-compact font-medium leading-tight text-input-label-text block mb-1.5">
         {{ t("dashboard.sectionConditionalStyling") }}
       </div>
       <div
         v-if="!col.conditions.length"
-        class="text-[length:var(--text-sm)] text-[var(--color-text-secondary,#9e9e9e)] mb-1.5"
+        class="text-compact text-text-secondary mb-1.5"
       >
         {{ t("dashboard.conditionNoRules") }}
       </div>
       <div
         v-for="(rule, ruleIdx) in col.conditions"
         :key="ruleIdx"
-        class="flex flex-col gap-2 py-2 px-2.5 mb-1.5 rounded-md bg-[rgba(128,128,128,0.04)] border border-[rgba(128,128,128,0.1)]"
+        class="flex flex-col gap-2 py-2 px-2.5 mb-1.5 rounded-default bg-[color-mix(in_srgb,var(--color-grey-500)_4%,transparent)] border border-[color-mix(in_srgb,var(--color-grey-500)_10%,transparent)]"
       >
         <div class="flex items-center gap-2 flex-wrap">
-          <span class="o-input-label shrink-0 w-28">{{ t("dashboard.conditionIfValue") }}</span>
+          <span class="o-input-label text-compact font-medium leading-tight text-input-label-text shrink-0 w-28">{{ t("dashboard.conditionIfValue") }}</span>
           <div class="w-52 shrink-0">
             <OSelect
               v-model="rule.operator"
@@ -144,6 +150,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               type="number"
               :placeholder="t('dashboard.conditionThreshold')"
               class="w-full"
+              :data-test="`o2-format-cond-threshold-${col.field}-${ruleIdx}`"
             />
           </div>
           <OButton
@@ -156,7 +163,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           />
         </div>
         <div class="flex items-center gap-2 flex-wrap">
-          <span class="o-input-label shrink-0 w-28 text-[var(--color-text-secondary,#9e9e9e)]">{{ t("dashboard.conditionThenText") }}</span>
+          <span class="o-input-label text-compact font-medium leading-tight text-input-label-text shrink-0 w-28">{{ t("dashboard.conditionThenText") }}</span>
           <ColorSwatchPicker
             v-model="rule.textColor"
             :swatches="TEXT_SWATCHES"
@@ -164,7 +171,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           />
         </div>
         <div class="flex items-center gap-2 flex-wrap">
-          <span class="o-input-label shrink-0 w-28 text-[var(--color-text-secondary,#9e9e9e)]">{{ t("dashboard.conditionAndBg") }}</span>
+          <span class="o-input-label text-compact font-medium leading-tight text-input-label-text shrink-0 w-28">{{ t("dashboard.conditionAndBg") }}</span>
           <ColorSwatchPicker
             v-model="rule.bgColor"
             :swatches="BG_SWATCHES"
@@ -247,15 +254,11 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-// Segmented switchers: child buttons fill the 32px outer height.
+/* keep(lib-override:o2-toggle-group): OToggleGroup renders its own <button>
+   children, so their intrinsic min-height can only be reset from the parent via
+   :deep() — no utility on this component can reach that generated element. */
 .cf-seg :deep(button) {
   height: 100% !important;
   min-height: 0 !important;
 }
-
-// "Unique value color" toggle — active tint (color-mix has no Tailwind form).
-.cf-toggle-active {
-  border-color: var(--color-primary-600, #1976d2) !important;
-  background: color-mix(in srgb, var(--color-primary-600, #1976d2) 7%, transparent) !important;
-}
 </style>
diff --git a/web/src/components/dashboards/OverrideConfigPopup.vue b/web/src/components/dashboards/OverrideConfigPopup.vue
index 86c6d67d7a..9c19f0b217 100644
--- a/web/src/components/dashboards/OverrideConfigPopup.vue
+++ b/web/src/components/dashboards/OverrideConfigPopup.vue
@@ -1,4 +1,4 @@
-<!-- Copyright 2026 OpenObserve Inc.
+<!-- Copyright 2026 OpenObserve Inc.
 
 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU Affero General Public License as published by
@@ -25,11 +25,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   >
     <div
       data-test="override-config-accordion"
-      class="grid grid-cols-[264px_minmax(0,1fr)_360px] max-[900px]:grid-cols-[220px_minmax(0,1fr)] h-[calc(86vh-150px)] overflow-hidden -mx-(--spacing-dialog-content-px) -my-(--spacing-dialog-content-py)"
+      class="grid grid-cols-[16.5rem_minmax(0,1fr)_22.5rem] max-[56.25rem]:grid-cols-[13.75rem_minmax(0,1fr)] h-[calc(86vh-9.375rem)] overflow-hidden -mx-dialog-content-px -my-dialog-content-py"
     >
       <!-- Left: add-field dropdown + list of added fields -->
       <div
-        class="flex flex-col gap-2.5 min-w-0 p-3 border-r border-[rgba(128,128,128,0.18)]"
+        class="flex flex-col gap-2.5 min-w-0 p-3 border-r border-[color-mix(in_srgb,var(--color-grey-500)_18%,transparent)]"
       >
         <ODropdown
           v-model:open="addOpenLeft"
@@ -40,7 +40,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <button
               type="button"
               data-test="dashboard-addpanel-config-add-column"
-              class="flex items-center justify-center gap-1.5 w-full shrink-0 p-[9px] rounded-lg border border-dashed border-[rgba(25,118,210,0.5)] bg-transparent cursor-pointer text-[length:var(--text-sm,13px)] font-medium text-[var(--color-primary-600,#1976d2)] transition-colors hover:bg-[rgba(25,118,210,0.05)] hover:border-[var(--color-primary-600,#1976d2)]"
+              class="flex items-center justify-center gap-1.5 w-full shrink-0 p-2.25 rounded-default border border-dashed border-[color-mix(in_srgb,var(--color-primary-600)_50%,transparent)] bg-transparent cursor-pointer text-sm font-medium text-primary-600 transition-colors hover:bg-[color-mix(in_srgb,var(--color-primary-600)_5%,transparent)] hover:border-primary-600"
             >
               <OIcon name="add" size="sm" />
               {{ t("dashboard.columnFormattingAddField") }}
@@ -54,7 +54,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               @select="addField(opt.value)"
             >
               <span class="flex items-center gap-2">
-                <span :class="['cf-badge-base', badgeClass(opt.isNumeric)]">
+                <span class="shrink-0 text-3xs font-bold tracking-[0.05em] uppercase py-0.5 px-1.25 rounded-default" :class="badgeClass(opt.isNumeric)">
                   {{ opt.isNumeric ? t("dashboard.typeNumeric") : t("dashboard.typeText") }}
                 </span>
                 <span>{{ opt.label }}</span>
@@ -62,7 +62,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </ODropdownItem>
             <div
               v-if="!availableToAdd.length"
-              class="py-2 px-2.5 text-xs text-[var(--o2-text-2,#9e9e9e)]"
+              class="py-2 px-2.5 text-xs text-text-secondary"
             >
               {{ t("dashboard.columnFormattingAllAdded") }}
             </div>
@@ -79,21 +79,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             role="button"
             tabindex="0"
             :data-test="`override-config-row-${idx}`"
-            class="group relative flex items-center gap-2 w-full py-2 pl-[9px] pr-1.5 rounded-lg border-l-[3px] border-transparent cursor-pointer outline-none transition-colors hover:bg-[rgba(128,128,128,0.05)]"
+            class="group relative flex items-center gap-2 w-full py-2 pl-2.25 pr-1.5 rounded-default border-l-[0.1875rem] border-transparent cursor-pointer outline-none transition-colors hover:bg-[color-mix(in_srgb,var(--color-grey-500)_5%,transparent)]"
             :class="
               idx === selectedIdx
-                ? 'bg-[rgba(46,85,163,0.06)] border-l-[var(--color-primary-600,#1976d2)]!'
+                ? 'bg-[color-mix(in_srgb,var(--color-primary-600)_6%,transparent)] border-l-primary-600!'
                 : ''
             "
             @click="selectedIdx = idx"
             @keydown.enter.prevent="selectedIdx = idx"
             @keydown.space.prevent="selectedIdx = idx"
           >
-            <span :class="['cf-badge-base', badgeClass(isNumericColumn(col))]">
+            <span class="shrink-0 text-3xs font-bold tracking-[0.05em] uppercase py-0.5 px-1.25 rounded-default" :class="badgeClass(isNumericColumn(col))">
               {{ isNumericColumn(col) ? t("dashboard.typeNumeric") : t("dashboard.typeText") }}
             </span>
             <span
-              class="flex-1 min-w-0 font-semibold text-[length:var(--text-sm,13px)] overflow-hidden text-ellipsis whitespace-nowrap group-hover:pr-7"
+              class="flex-1 min-w-0 font-semibold text-sm overflow-hidden text-ellipsis whitespace-nowrap group-hover:pr-7"
             >
               {{ getFieldLabel(col.field) || t("dashboard.columnFormattingPick") }}
             </span>
@@ -115,12 +115,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <OIcon
             name="format-color-text"
             size="lg"
-            class="text-[var(--o2-text-2,#b0bec5)]"
+            class="text-text-secondary"
           />
-          <div class="font-semibold text-[length:var(--text-sm,13px)]">
+          <div class="font-semibold text-sm">
             {{ t("dashboard.columnFormattingNoFields") }}
           </div>
-          <div class="text-xs text-[var(--o2-text-2,#9e9e9e)] leading-[1.4]">
+          <div class="text-xs text-text-secondary leading-[1.4]">
             {{ t("dashboard.columnFormattingNoFieldsHint") }}
           </div>
         </div>
@@ -135,16 +135,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           />
         </div>
         <div
-          class="flex flex-col gap-2 min-w-0 overflow-y-auto p-3 border-l border-[rgba(128,128,128,0.18)]"
+          class="flex flex-col gap-2 min-w-0 overflow-y-auto p-3 border-l border-[color-mix(in_srgb,var(--color-grey-500)_18%,transparent)]"
         >
           <div
-            class="flex items-center gap-[5px] text-[10px] font-bold tracking-[0.06em] uppercase text-[var(--o2-text-2,#757575)]"
+            class="flex items-center gap-1.25 text-3xs font-bold tracking-[0.06em] uppercase text-text-secondary"
           >
             <OIcon name="visibility" size="xs" />
             <span>{{ t("dashboard.inlinePreview") }}</span>
           </div>
           <div
-            class="cf-preview-table border border-[rgba(128,128,128,0.18)] rounded-md overflow-hidden"
+            class="border border-[color-mix(in_srgb,var(--color-grey-500)_18%,transparent)] rounded-default overflow-hidden [&_[data-test=dashboard-table-cell-copy-btn]]:hidden!"
           >
             <TableRenderer
               v-if="selectedPreview"
@@ -154,7 +154,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :show-pagination="false"
             />
           </div>
-          <div class="text-[11px] text-[var(--o2-text-2,#9e9e9e)]">
+          <div class="text-2xs text-text-secondary">
             {{ t("dashboard.columnFormattingSampleNote") }}
           </div>
         </div>
@@ -163,7 +163,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <!-- Empty state: nothing added yet -->
       <div
         v-else
-        class="col-start-2 col-end-4 max-[900px]:col-end-3 flex items-center justify-center p-6"
+        class="col-start-2 col-end-4 max-[56.25rem]:col-end-3 flex items-center justify-center p-6"
       >
         <OEmptyState
           size="block"
@@ -172,7 +172,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         >
           <template #illustration>
             <div
-              class="w-[72px] h-[72px] rounded-2xl bg-[rgba(128,128,128,0.08)] flex items-center justify-center text-[var(--o2-text-2,#90a4ae)]"
+              class="w-18 h-18 rounded-default bg-[color-mix(in_srgb,var(--color-grey-500)_8%,transparent)] flex items-center justify-center text-text-secondary"
             >
               <OIcon name="tune" size="xl" />
             </div>
@@ -200,7 +200,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   @select="addField(opt.value)"
                 >
                   <span class="flex items-center gap-2">
-                    <span :class="['cf-badge-base', badgeClass(opt.isNumeric)]">
+                    <span class="shrink-0 text-3xs font-bold tracking-[0.05em] uppercase py-0.5 px-1.25 rounded-default" :class="badgeClass(opt.isNumeric)">
                       {{ opt.isNumeric ? t("dashboard.typeNumeric") : t("dashboard.typeText") }}
                     </span>
                     <span>{{ opt.label }}</span>
@@ -208,7 +208,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </ODropdownItem>
                 <div
                   v-if="!availableToAdd.length"
-                  class="py-2 px-2.5 text-xs text-[var(--o2-text-2,#9e9e9e)]"
+                  class="py-2 px-2.5 text-xs text-text-secondary"
                 >
                   {{ t("dashboard.columnFormattingAllAdded") }}
                 </div>
@@ -221,7 +221,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     <template #footer>
       <div class="flex items-center justify-between w-full">
-        <span class="text-xs text-[var(--o2-text-2,#9e9e9e)]">{{ footerSummary }}</span>
+        <span class="text-xs text-text-secondary">{{ footerSummary }}</span>
         <div class="flex gap-2">
           <OButton
             variant="outline"
@@ -376,8 +376,8 @@ export default defineComponent({
     // Field-type badge colour (num = blue, text = grey).
     const badgeClass = (isNum: boolean) =>
       isNum
-        ? "text-[#2e55a3] bg-[rgba(46,85,163,0.1)]"
-        : "text-[#6b7280] bg-[rgba(107,114,128,0.12)]";
+        ? "text-field-type-number-text bg-field-type-number-bg"
+        : "text-field-type-string-text bg-field-type-string-bg";
 
     const getFieldLabel = (alias: string) => {
       if (!alias) return "";
@@ -528,21 +528,3 @@ export default defineComponent({
   },
 });
 </script>
-
-<style lang="scss" scoped>
-// Shared field-type badge base (variant colour comes from badgeClass()).
-.cf-badge-base {
-  flex-shrink: 0;
-  font-size: 9px;
-  font-weight: 700;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  padding: 2px 5px;
-  border-radius: 4px;
-}
-
-// :deep needed to reach the renderer's copy button inside the mini preview.
-.cf-preview-table :deep([data-test="dashboard-table-cell-copy-btn"]) {
-  display: none !important;
-}
-</style>
diff --git a/web/src/components/dashboards/PanelContainer.spec.ts b/web/src/components/dashboards/PanelContainer.spec.ts
index 294f1c632a..972ce52c74 100644
--- a/web/src/components/dashboards/PanelContainer.spec.ts
+++ b/web/src/components/dashboards/PanelContainer.spec.ts
@@ -246,21 +246,21 @@ describe("PanelContainer", () => {
           },
           'PanelErrorButtons': {
             template: `<div>
-              <q-btn v-if="error" data-test="panel-error-data" class="warning">
-                <q-tooltip data-test="panel-error-tooltip">{{ error }}</q-tooltip>
-              </q-btn>
-              <q-btn v-if="maxQueryRangeWarning" data-test="panel-max-duration-warning" class="warning">
-                <q-tooltip>{{ maxQueryRangeWarning }}</q-tooltip>
-              </q-btn>
-              <q-btn v-if="limitNumberOfSeriesWarningMessage" data-test="panel-limit-number-of-series-warning" class="warning">
-                <q-tooltip>{{ limitNumberOfSeriesWarningMessage }}</q-tooltip>
-              </q-btn>
-              <q-btn v-if="isCachedDataDifferWithCurrentTimeRange" data-test="panel-is-cached-data-differ-with-current-time-range-warning">
-                <q-tooltip>The data shown is cached</q-tooltip>
-              </q-btn>
-              <q-btn v-if="isPartialData && !isPanelLoading" data-test="panel-partial-data-warning" class="warning">
-                <q-tooltip>Partial data</q-tooltip>
-              </q-btn>
+              <button v-if="error" data-test="panel-error-data" class="warning">
+                <span data-test="panel-error-tooltip">{{ error }}</span>
+              </button>
+              <button v-if="maxQueryRangeWarning" data-test="panel-max-duration-warning" class="warning">
+                <span>{{ maxQueryRangeWarning }}</span>
+              </button>
+              <button v-if="limitNumberOfSeriesWarningMessage" data-test="panel-limit-number-of-series-warning" class="warning">
+                <span>{{ limitNumberOfSeriesWarningMessage }}</span>
+              </button>
+              <button v-if="isCachedDataDifferWithCurrentTimeRange" data-test="panel-is-cached-data-differ-with-current-time-range-warning">
+                <span>The data shown is cached</span>
+              </button>
+              <button v-if="isPartialData && !isPanelLoading" data-test="panel-partial-data-warning" class="warning">
+                <span>Partial data</span>
+              </button>
               <span
                 v-if="lastTriggeredAt && !viewOnly"
                 class="lastRefreshedAt"
@@ -1378,7 +1378,7 @@ describe("PanelContainer", () => {
 
   describe("Theme Support", () => {
     // Theme is now handled globally via CSS custom property tokens
-    // (e.g. border-border-subtle) that switch with the body--dark class,
+    // (e.g. border-border-default) that switch with the body--dark class,
     // rather than a per-component dark-mode class. We assert the panel bar
     // uses the theme-aware token class and renders consistently in both themes.
     it("should use theme-aware token classes on the panel bar in dark mode", async () => {
@@ -1388,7 +1388,7 @@ describe("PanelContainer", () => {
 
       const qBar = wrapper.find('[data-test="dashboard-panel-bar"]');
       expect(qBar.exists()).toBe(true);
-      expect(qBar.classes()).toContain('border-border-subtle');
+      expect(qBar.classes()).toContain('border-border-default');
       expect(qBar.classes()).not.toContain('dark-mode');
     });
 
@@ -1399,7 +1399,7 @@ describe("PanelContainer", () => {
 
       const qBar = wrapper.find('[data-test="dashboard-panel-bar"]');
       expect(qBar.exists()).toBe(true);
-      expect(qBar.classes()).toContain('border-border-subtle');
+      expect(qBar.classes()).toContain('border-border-default');
       expect(qBar.classes()).not.toContain('dark-mode');
     });
   });
diff --git a/web/src/components/dashboards/PanelContainer.vue b/web/src/components/dashboards/PanelContainer.vue
index 14f3413da4..014bd5120e 100644
--- a/web/src/components/dashboards/PanelContainer.vue
+++ b/web/src/components/dashboards/PanelContainer.vue
@@ -16,7 +16,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <div
-    class="h-full flex flex-col rounded-lg overflow-hidden"
+    class="h-full flex flex-col rounded-default overflow-hidden"
     @mouseover="() => (isCurrentlyHoveredPanel = true)"
     @mouseleave="() => (isCurrentlyHoveredPanel = false)"
     :data-test="`dashboard-panel-container`"
@@ -30,7 +30,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       }"
     >
       <div
-        class="flex flex-nowrap items-center w-full min-h-7 py-1 px-2 border-b border-border-subtle rounded-t-lg"
+        class="flex flex-nowrap items-center w-full min-h-7 py-1 px-2 border-b border-border-default rounded-t-default"
         :class="{ 'border-b-transparent': isPanelLoading }"
         data-test="dashboard-panel-bar"
       >
@@ -41,7 +41,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         />
         <div
           :title="props.data.title"
-          class="whitespace-nowrap overflow-hidden text-ellipsis text-[0.8125rem] font-medium text-(--color-text-primary) tracking-[0.02em]"
+          class="whitespace-nowrap overflow-hidden text-ellipsis text-compact font-medium text-text-heading tracking-[0.02em]"
           data-test="dashboard-panel-header"
         >
           {{ props.data.title }}
diff --git a/web/src/components/dashboards/PanelEditor/PanelEditor.spec.ts b/web/src/components/dashboards/PanelEditor/PanelEditor.spec.ts
index 2b0d415c1c..6adde6d176 100644
--- a/web/src/components/dashboards/PanelEditor/PanelEditor.spec.ts
+++ b/web/src/components/dashboards/PanelEditor/PanelEditor.spec.ts
@@ -272,14 +272,6 @@ const ODialogStub = {
 const mountGlobal = {
   plugins: [i18n],
   stubs: {
-    QSeparator: true,
-    QSplitter: {
-      template:
-        '<div class="q-splitter-mock"><slot name="before" /><slot name="separator" /><slot name="after" /></div>',
-    },
-    QIcon: true,
-    QBtn: true,
-    QTooltip: true,
     // OSplitter slots must render so nested ODialogs (e.g. the custom-chart
     // selector inside the splitter's #before slot) appear in the DOM.
     OSplitter: {
diff --git a/web/src/components/dashboards/PanelEditor/PanelEditor.vue b/web/src/components/dashboards/PanelEditor/PanelEditor.vue
index bc230fe13b..c1ab366049 100644
--- a/web/src/components/dashboards/PanelEditor/PanelEditor.vue
+++ b/web/src/components/dashboards/PanelEditor/PanelEditor.vue
@@ -20,14 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <!-- Chart Type Selection Sidebar -->
       <div>
         <div
-          class="flex flex-col scroll card-container bg-surface-panel! border-r border-border-default"
-          style="
-            overflow-y: auto;
-            overflow-x: hidden;
-            height: 100%;
-            min-width: 100px;
-            max-width: 100px;
-          "
+          class="flex flex-col scroll bg-surface-panel! border-r border-border-default overflow-y-auto overflow-x-hidden h-full min-w-25 max-w-25"
         >
           <ChartSelection
             v-model:selectedChartType="dashboardPanelData.data.type"
@@ -50,10 +43,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- Collapsed field list bar -->
         <div
           v-if="!dashboardPanelData.layout.showFieldList"
-          class="cursor-pointer overflow-y-auto flex flex-col items-center justify-start card-container bg-surface-panel!"
+          class="cursor-pointer overflow-y-auto flex flex-col items-center justify-start bg-surface-panel! border-r border-border-default w-12.5 h-full shrink-0"
           data-test="panel-editor-field-list-sidebar-collapsed"
           @click="collapseFieldList"
-          style="width: 50px; height: 100%; flex-shrink: 0"
         >
           <OIcon
             name="expand-all"
@@ -71,6 +63,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           v-model="dashboardPanelData.layout.splitter"
           :limits="splitterLimits"
           :style="splitterStyle"
+          :disable="!dashboardPanelData.layout.showFieldList"
           separatorClass="field-list-separator"
           :separatorStyle="{ width: '10px', marginLeft: '-5px', marginRight: '-5px', zIndex: '10' }"
         >
@@ -79,7 +72,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <div :class="fieldListWrapperClass">
               <div
                 v-if="dashboardPanelData.layout.showFieldList"
-                class="flex flex-col card-container bg-surface-panel!"
+                class="flex flex-col bg-surface-panel!"
                 :style="fieldListContainerStyle"
               >
                 <div class="flex flex-col" :style="fieldListInnerStyle">
@@ -98,7 +91,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 @scroll.passive="onBuilderScroll"
               >
                 <div
-                  class="layout-panel-container flex flex-col w-full h-full"
+                  class="flex flex-col w-full h-full"
                   :style="layoutPanelContainerStyle"
                 >
                   <!-- Mode selection + Add To Dashboard row. Skip when empty (e.g.
@@ -145,6 +138,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                           dashboardPanelData.meta.dateTime.start_time &&
                           dashboardPanelData.meta.dateTime.end_time))
                     "
+                    class="pl-3"
                     :variablesConfig="dashboardData?.variables"
                     :showDynamicFilters="
                       dashboardData?.variables?.showDynamicFilters
@@ -167,17 +161,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     class="p-2"
                   >
                     <div
-                      :style="{
-                        borderColor: '#c3920d',
-                        borderWidth: '1px',
-                        borderStyle: 'solid',
-                        backgroundColor:
-                          store.state.theme === 'dark' ? '#2a1f03' : '#faf2da',
-                        padding: '1%',
-                        borderRadius: '5px',
-                      }"
+                      class="border border-banner-warning-border bg-banner-warning-bg p-[1%] rounded-default"
+                     
                     >
-                      <div style="font-weight: 700">
+                      <div class="font-bold">
                         Your chart is not up to date
                       </div>
                       <div>
@@ -320,8 +307,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   <!-- Errors Component -->
                   <DashboardErrorsComponent
                     :errors="errorData"
-                    class="col-auto"
-                    style="flex-shrink: 0"
+                    class="col-auto shrink-0"
                   />
                 </div>
 
@@ -370,7 +356,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         class="flex flex-col column"
         :style="{ height: contentHeight, flex: 1 }"
       >
-        <div class="card-container h-full flex flex-col">
+        <div class="bg-card-glass-bg h-full flex flex-col">
           <!-- Variables Selector for HTML (dashboard mode only) -->
           <VariablesValueSelector
             v-if="resolvedConfig.showVariablesSelector"
@@ -385,9 +371,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             :tabId="tabId"
             :panelId="panelId"
           />
-          <CustomHTMLEditor
+          <CustomHTMLEditor class="flex-1 min-h-0"
             v-model="dashboardPanelData.data.htmlContent"
-            style="flex: 1; min-height: 0"
             :initialVariableValues="liveVariablesData"
             :tabId="tabId"
             :panelId="panelId"
@@ -405,7 +390,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         class="flex flex-col column"
         :style="{ height: contentHeight, flex: 1 }"
       >
-        <div class="card-container h-full flex flex-col">
+        <div class="bg-card-glass-bg h-full flex flex-col">
           <!-- Variables Selector for Markdown (dashboard mode only) -->
           <VariablesValueSelector
             v-if="resolvedConfig.showVariablesSelector"
@@ -420,9 +405,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             :tabId="tabId"
             :panelId="panelId"
           />
-          <CustomMarkdownEditor
+          <CustomMarkdownEditor class="flex-1 min-h-0"
             v-model="dashboardPanelData.data.markdownContent"
-            style="flex: 1; min-height: 0"
             :initialVariableValues="liveVariablesData"
             :tabId="tabId"
             :panelId="panelId"
@@ -443,10 +427,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- Collapsed field list bar for custom chart -->
         <div
           v-if="!dashboardPanelData.layout.showFieldList"
-          class="cursor-pointer overflow-y-auto flex flex-col items-center justify-start card-container bg-surface-panel!"
+          class="cursor-pointer overflow-y-auto flex flex-col items-center justify-start bg-surface-panel! border-r border-border-default w-12.5 h-full shrink-0"
           data-test="panel-editor-field-list-sidebar-collapsed"
           @click="collapseFieldList"
-          style="width: 50px; height: 100%; flex-shrink: 0"
         >
           <OIcon
             name="expand-all"
@@ -463,6 +446,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <OSplitter
           v-model="dashboardPanelData.layout.splitter"
           :limits="[0, 20]"
+          :disable="!dashboardPanelData.layout.showFieldList"
           :style="{
             width: dashboardPanelData.layout.showFieldList
               ? '100%'
@@ -473,20 +457,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :separatorStyle="{ width: '10px', marginLeft: '-5px', marginRight: '-5px', zIndex: '10' }"
         >
           <!-- Field List for custom chart -->
+          <!-- Mirror the normal field-list block above: a fixed-height wrapper
+               with NO overflow of its own, so PanelFieldList's inner OFieldList
+               is the single scroller and its stream selectors (before-list)
+               stay sticky above the scrolling field rows. Wrapping it in an
+               overflow-y-auto container stacked a second scrollbar and let the
+               dropdowns scroll away. -->
           <template #before>
-            <div class="w-full h-full">
+            <div :class="fieldListWrapperClass">
               <div
-                class="flex flex-col scroll card-container"
-                :style="{ height: contentHeight, overflowY: 'auto' }"
+                v-if="dashboardPanelData.layout.showFieldList"
+                class="flex flex-col bg-surface-panel!"
+                :style="fieldListContainerStyle"
               >
-                <div
-                  v-if="dashboardPanelData.layout.showFieldList"
-                  class="column"
-                  style="height: 100%"
-                >
-                  <div class="flex flex-col" style="width: 100%">
-                    <PanelFieldList :editMode="editMode" @collapse="collapseFieldList" />
-                  </div>
+                <div class="flex flex-col" :style="fieldListInnerStyle">
+                  <PanelFieldList :editMode="editMode" @collapse="collapseFieldList" />
                 </div>
               </div>
             </div>
@@ -495,38 +480,29 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- Custom chart content area -->
           <template #after>
             <div
-              class="flex card-container"
+              class="flex bg-card-glass-bg"
               :style="{ height: contentHeight, overflow: 'hidden' }"
             >
               <div
                 class="flex flex-col scroll flex-1 min-w-0 h-full"
               >
                 <!-- Editor/Preview splitter -->
-                <div style="height: 500px; flex-shrink: 0; overflow: hidden">
+                <div class="h-125 shrink-0 overflow-hidden">
                   <OSplitter
-                    class="query-editor-splitter"
+                    class="query-editor-splitter h-full"
                     v-model="splitterModel"
-                    style="height: 100%"
                     @update:model-value="layoutSplitterUpdated"
                   >
                     <!-- Custom Chart Editor -->
                     <template #before>
-                      <div
-                        style="position: relative; width: 100%; height: 100%"
-                      >
-                        <CustomChartEditor
+                      <div class="relative w-full h-full">
+                        <CustomChartEditor class="w-full h-full"
                           v-model="dashboardPanelData.data.customChartContent"
-                          style="width: 100%; height: 100%"
                         />
                         <!-- Example Charts button (dashboard mode only) -->
                         <div
                           v-if="pageType === 'dashboard'"
-                          style="
-                            position: absolute;
-                            bottom: 10px;
-                            right: 10px;
-                            z-index: 10;
-                          "
+                          class="absolute bottom-2.5 right-2.5 z-10"
                         >
                           <OButton
                             variant="primary"
@@ -534,8 +510,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                             @click="showCustomChartTypeSelector = true"
                             data-test="custom-chart-type-selector-btn"
                           >
-                            <template #icon-left
-                              ><OIcon name="bar-chart" size="sm"
+                            <template #icon-left><OIcon name="bar-chart" size="sm"
                             /></template>
                             Example Charts
                           </OButton>
@@ -556,7 +531,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
                     <!-- Splitter separator -->
                     <template #separator>
-                      <div class="w-1 h-full bg-transparent transition-colors duration-300 hover:bg-orange-500"></div>
+                      <div class="w-1 h-full bg-transparent transition-colors duration-300 hover:bg-table-resize-handle"></div>
                     </template>
 
                     <!-- Chart Preview -->
@@ -619,11 +594,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </div>
 
                 <!-- Errors Component -->
-                <div class="col-auto" style="flex-shrink: 0">
+                <div class="col-auto shrink-0">
                   <DashboardErrorsComponent
                     :errors="errorData"
-                    class="col-auto"
-                    style="flex-shrink: 0"
+                    class="col-auto shrink-0"
                   />
                 </div>
 
@@ -917,9 +891,9 @@ const contentHeight = computed(() => {
 // Chart area class based on page type
 const chartAreaClass = computed(() => {
   if (props.pageType === "logs" || props.pageType === "build") {
-    return "h-[calc(100%-36px)] min-h-[140px]";
+    return "h-[calc(100%-36px)] min-h-35";
   }
-  return "min-h-[140px] mt-[40px]";
+  return "min-h-35 mt-10";
 });
 
 // Chart area style based on page type (uses CSS var for dynamic navbar height)
@@ -936,9 +910,9 @@ const chartAreaStyle = computed(() => {
 // Main content area class - logs needs flat background without card styling
 const mainContentAreaClass = computed(() => {
   if (props.pageType === "logs") {
-    return "flex card-container";
+    return "flex bg-card-glass-bg";
   }
-  return "flex card-container h-full overflow-y-hidden";
+  return "flex bg-card-glass-bg h-full overflow-y-hidden";
 });
 
 // Row style - logs/build needs height: 100%, others need overflow-y: auto
@@ -1291,25 +1265,3 @@ defineExpose({
   errorMessage,
 });
 </script>
-
-<style>
-.field-list-separator::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 2px;
-  background-color: transparent;
-  transition: background-color 0.3s;
-}
-
-.field-list-separator:hover::after {
-  background-color: orange;
-}
-
-.query-editor-splitter .o-splitter__separator {
-  background-color: transparent !important;
-}
-</style>
diff --git a/web/src/components/dashboards/PanelEditor/composables/usePanelEditor.ts b/web/src/components/dashboards/PanelEditor/composables/usePanelEditor.ts
index 0cbb07c86b..39f1a6580b 100644
--- a/web/src/components/dashboards/PanelEditor/composables/usePanelEditor.ts
+++ b/web/src/components/dashboards/PanelEditor/composables/usePanelEditor.ts
@@ -315,7 +315,7 @@ export function usePanelEditor(options: UsePanelEditorOptions) {
    */
   const runQuery = (withoutCache = false): void => {
     try {
-      // Validate panel fields before running query (matches main branch AddPanel.vue behavior)
+      // Validate panel fields before running query.
       // Uses validatePanel from useDashboardPanelData which checks all field requirements
       if (validatePanel) {
         const errors = errorData.errors;
@@ -757,7 +757,6 @@ export function usePanelEditor(options: UsePanelEditorOptions) {
   /**
    * Initialize chartData from dashboardPanelData.
    * Called by parent component (e.g., AddPanel) after loading panel data in onMounted.
-   * This replaces the watcher approach and follows main branch pattern.
    *
    * @param data - Optional data to initialize with. If not provided, uses dashboardPanelData.data
    */
diff --git a/web/src/components/dashboards/PanelErrorButtons.vue b/web/src/components/dashboards/PanelErrorButtons.vue
index f30d21590d..99e2f48a58 100644
--- a/web/src/components/dashboards/PanelErrorButtons.vue
+++ b/web/src/components/dashboards/PanelErrorButtons.vue
@@ -19,7 +19,7 @@
       data-test="panel-error-data"
     >
       <OTooltip side="bottom" align="end" max-width="420px" hoverable>
-        <template #content><div style="white-space: pre-wrap">{{ error }}</div></template>
+        <template #content><div class="whitespace-pre-wrap">{{ error }}</div></template>
       </OTooltip>
     </OButton>
     <OButton
@@ -30,7 +30,7 @@
       data-test="panel-max-duration-warning"
     >
       <OTooltip side="bottom" align="end" max-width="420px" hoverable>
-        <template #content><div data-test="panel-max-duration-warning-content" style="white-space: pre-wrap">{{ maxQueryRangeWarning }}</div></template>
+        <template #content><div class="whitespace-pre-wrap" data-test="panel-max-duration-warning-content">{{ maxQueryRangeWarning }}</div></template>
       </OTooltip>
     </OButton>
     <OButton
@@ -39,11 +39,10 @@
       size="icon"
       data-test="panel-limit-number-of-series-warning"
     >
-      <template #icon-left
-        ><OIcon name="data-info-alert" size="sm"
+      <template #icon-left><OIcon name="data-info-alert" size="sm"
       /></template>
       <OTooltip side="bottom" align="end" hoverable>
-        <template #content><div style="white-space: pre-wrap">{{ limitNumberOfSeriesWarningMessage }}</div></template>
+        <template #content><div class="whitespace-pre-wrap">{{ limitNumberOfSeriesWarningMessage }}</div></template>
       </OTooltip>
     </OButton>
     <OButton
@@ -55,7 +54,7 @@
     >
       <OTooltip side="bottom" align="end" max-width="420px" hoverable>
         <template #content>
-          <div style="white-space: pre-wrap">{{ t('dashboard.xAliasInconsistencyWarning') }}</div>
+          <div class="whitespace-pre-wrap">{{ t('dashboard.xAliasInconsistencyWarning') }}</div>
         </template>
       </OTooltip>
     </OButton>
@@ -65,8 +64,7 @@
       size="icon"
       data-test="panel-is-cached-data-differ-with-current-time-range-warning"
     >
-      <template #icon-left
-        ><OIcon name="running-with-errors" size="sm"
+      <template #icon-left><OIcon name="running-with-errors" size="sm"
       /></template>
       <OTooltip side="bottom" align="end" hoverable :content="t('dashboard.panelErrorButtons.cachedDataDiffers')" />
     </OButton>
@@ -76,8 +74,7 @@
       size="icon"
       data-test="panel-partial-data-warning"
     >
-      <template #icon-left
-        ><OIcon name="clock-loader-20" size="sm"
+      <template #icon-left><OIcon name="clock-loader-20" size="sm"
       /></template>
       <OTooltip side="bottom" align="end" hoverable :content="t('dashboard.panelErrorButtons.partialData')" />
     </OButton>
@@ -163,12 +160,3 @@ export default defineComponent({
 });
 </script>
 
-<style>
-.lastRefreshedAt::after {
-  content: "";
-}
-
-.lastRefreshedAt::before {
-  content: "";
-}
-</style>
diff --git a/web/src/components/dashboards/PanelSchemaRenderer.vue b/web/src/components/dashboards/PanelSchemaRenderer.vue
index 81607c85d7..2ce366a3b2 100644
--- a/web/src/components/dashboards/PanelSchemaRenderer.vue
+++ b/web/src/components/dashboards/PanelSchemaRenderer.vue
@@ -15,14 +15,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div
-    style="width: 100%; height: 100%"
+  <div class="w-full h-full"
     @mouseleave="hidePopupsAndOverlays"
     @mouseenter="showPopupsAndOverlays"
   >
-    <div
+    <div class="h-full relative"
       ref="chartPanelRef"
-      style="height: 100%; position: relative"
       :class="chartPanelClass"
     >
       <div
@@ -70,13 +68,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         />
         <div
           v-else-if="panelSchema.type == 'html'"
-          class="flex flex-col column"
-          style="width: 100%; height: 100%; flex: 1"
+          class="flex flex-col column w-full h-full flex-1"
         >
           <HTMLRenderer
             :htmlContent="panelSchema.htmlContent"
-            style="width: 100%; height: 100%"
-            class="flex flex-col"
+            class="flex flex-col w-full h-full"
             :variablesData="currentVariablesData || variablesData"
             :tabId="tabId"
             :panelId="panelSchema.id"
@@ -84,13 +80,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
         <div
           v-else-if="panelSchema.type == 'markdown'"
-          class="flex flex-col column"
-          style="width: 100%; height: 100%; flex: 1"
+          class="flex flex-col column w-full h-full flex-1"
         >
           <MarkdownRenderer
             :markdownContent="panelSchema.markdownContent"
-            style="width: 100%; height: 100%"
-            class="flex flex-col"
+            class="flex flex-col w-full h-full"
             :variablesData="currentVariablesData || variablesData"
             :tabId="tabId"
             :panelId="panelSchema.id"
@@ -100,8 +94,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <CustomChartRenderer
           v-else-if="panelSchema.type == 'custom_chart'"
           :data="panelData"
-          style="width: 100%; height: 100%"
-          class="flex flex-col"
+          class="flex flex-col w-full h-full"
           @error="errorDetail = $event"
         />
         <ChartRenderer
@@ -119,22 +112,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </div>
       <div
         v-if="metricItems.length && !noData && !loading"
-        style="position: absolute; inset: 0; pointer-events: none; z-index: 8"
+        class="absolute inset-0 pointer-events-none z-8"
         data-test="dashboard-metric-copy-overlay"
       >
-        <div
+        <div class="absolute pointer-events-auto"
           v-for="m in metricItems"
           :key="m.idx"
-          style="position: absolute; pointer-events: auto"
           :style="metricZoneStyle(m)"
           @mouseenter="hoveredMetricIdx = m.idx"
           @mouseleave="hoveredMetricIdx = null"
         >
-          <OButton
+          <OButton class="absolute"
             v-show="hoveredMetricIdx === m.idx || metricCopiedIdx === m.idx"
             variant="ghost"
             size="icon-xs-sq"
-            style="position: absolute"
             :style="m.iconStyle"
             @click="copyMetricItem(m)"
             data-test="dashboard-metric-copy-btn"
@@ -171,7 +162,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         data-test="panel-schema-renderer-error-message"
       >
         <OIcon size="md" name="warning" />
-        <div style="height: 80%; width: 100%">
+        <div class="h-4/5 w-full">
           {{
             errorDetail?.code?.toString().startsWith("4")
               ? errorDetail.message
@@ -192,8 +183,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         {{ panelSchema?.error_config?.custom_error_message }}
       </div>
       <div
-        class="flex"
-        style="position: absolute; top: 0px; width: 100%; z-index: 999"
+        class="flex absolute top-0 w-full z-999"
+       
       >
         <LoadingProgress
           :loading="loading"
@@ -202,11 +193,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </div>
 
       <div
-        class="absolute z-9999999 min-w-50 py-1 px-0 hidden whitespace-nowrap top-0 left-0 rounded border border-(--o2-border) shadow-[0_2px_8px_rgba(0,0,0,0.15)]"
-        :class="{
-          'group/menu bg-[#2c2c2c] border-[#404040] shadow-[0_2px_8px_rgba(0,0,0,0.4)] crosslink-drilldown-menu--dark': store.state.theme === 'dark',
-          'bg-white': store.state.theme !== 'dark',
-        }"
+        class="absolute z-9999999 min-w-50 py-1 px-0 hidden whitespace-nowrap top-0 left-0 rounded-default border border-dropdown-border bg-dropdown-bg shadow-[0_2px_8px_color-mix(in_srgb,var(--color-black)_15%,transparent)] dark:shadow-[0_2px_8px_color-mix(in_srgb,var(--color-black)_40%,transparent)]"
         data-test="drilldown-menu"
         ref="drilldownPopUpRef"
         @mouseleave="hidePopupsAndOverlays"
@@ -223,7 +210,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             "
           />
           <div
-            class="flex items-center py-2 px-4 cursor-pointer transition-colors duration-200 text-sm text-[#333] hover:bg-[#f5f5f5] active:bg-(--o2-border) group-[.crosslink-drilldown-menu--dark]/menu:text-[var(--o2-border)] group-[.crosslink-drilldown-menu--dark]/menu:hover:bg-[#383838] group-[.crosslink-drilldown-menu--dark]/menu:active:bg-[#444444]"
+            class="flex items-center py-2 px-4 cursor-pointer transition-colors duration-200 text-sm text-dropdown-item-text hover:bg-dropdown-item-hover-bg active:bg-dropdown-item-active-bg"
             :data-test="`drilldown-menu-item-${drilldown.name}`"
             @click="openDrilldown(index)"
           >
@@ -237,34 +224,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </template>
       </div>
       <div
-        style="
-          border: 1px solid gray;
-          border-radius: 4px;
-          padding: 3px;
-          position: absolute;
-          top: 0px;
-          left: 0px;
-          display: none;
-          max-width: 200px;
-          white-space: normal;
-          word-wrap: break-word;
-          overflow-wrap: break-word;
-          z-index: 9999999;
-        "
-        :class="store.state.theme === 'dark' ? 'bg-(--o2-bg-card-dark,#1a1a1a)' : 'bg-white'"
+        class="border border-border-default rounded-default p-0.75 absolute top-0 left-0 hidden max-w-50 whitespace-normal [word-wrap:break-word] [overflow-wrap:break-word] z-9999999 bg-surface-base"
         ref="annotationPopupRef"
       >
         <div
-          class="px-2 py-1"
-          style="
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            position: relative;
-            word-break: break-word;
-          "
+          class="px-2 py-1 flex flex-row items-center relative break-words"
         >
-          <span style="word-break: break-word">{{
+          <span class="break-words">{{
             selectedAnnotationData.text
           }}</span>
         </div>
@@ -305,6 +271,8 @@ import {
   onUnmounted,
 } from "vue";
 import { useStore } from "vuex";
+import { useTheme } from "@/composables/useTheme";
+import { chartColor } from "@/utils/chartTheme";
 import { useI18n } from "vue-i18n";
 import { usePanelDataLoader } from "@/composables/dashboard/usePanelDataLoader";
 import { convertPanelData } from "@/utils/dashboard/convertPanelData";
@@ -517,6 +485,7 @@ export default defineComponent({
   ],
   setup(props, { emit }) {
     const store = useStore();
+    const { isDark } = useTheme();
     const { t } = useI18n();
     const route = useRoute();
     const router = useRouter();
@@ -536,11 +505,6 @@ export default defineComponent({
     // - PreviewAlert.vue (no page key) - doesn't need it
     // - PanelContainer.vue (no page key) - doesn't need it
     // - PreviewPromqlQuery.vue (no page key) - doesn't need it
-    //
-    // To avoid breaking these other contexts, we:
-    // 1. Inject with null default to detect if page key was explicitly provided
-    // 2. Only call useDashboardPanelData if a page key exists
-    // 3. Return empty array [] if no hiddenQueries (no filtering applied)
     // ============================================================================
 
     const dashboardPanelDataPageKey: any = inject(
@@ -563,7 +527,6 @@ export default defineComponent({
       return dashboardPanelDataForHiding?.layout?.hiddenQueries || [];
     });
 
-    // stores the converted data which can be directly used for rendering different types of panels
     const panelData: any = shallowRef({}); // holds the data to render the panel after getting data from the api based on panel config
     const chartPanelRef: any = ref(null); // holds the ref to the whole div
     const chartRendererRef: any = ref(null); // holds the ref to the ChartRenderer component
@@ -667,8 +630,7 @@ export default defineComponent({
         left: `${Math.max(0, width - COPY_BTN_PX - 2)}px`,
         top: `${Math.max(cyLocal, COPY_BTN_PX / 2)}px`,
         transform: "translateY(-50%)",
-        backgroundColor:
-          store?.state?.theme === "dark" ? "#27272a" : "#ffffff",
+        backgroundColor: (void isDark.value, chartColor("--color-surface-base")),
         boxShadow: "0 0 3px rgba(0, 0, 0, 0.35)",
       };
     };
@@ -785,7 +747,7 @@ export default defineComponent({
       return filtered;
     });
 
-    // E2: Also filter panelSchema.queries in sync with filteredData
+    // Also filter panelSchema.queries in sync with filteredData
     // to keep data[i] aligned with queries[i] in convertMultiSQLData
     const filteredPanelSchema = computed(() => {
       if (
@@ -1032,7 +994,7 @@ export default defineComponent({
             // 2. localStorage saved color
             // 3. Org settings color
             // 4. Default theme color from store
-            const _themeMode = store.state.theme === "dark" ? "dark" : "light";
+            const _themeMode = isDark.value ? "dark" : "light";
             const primaryColor: string =
               (_themeMode === "dark"
                 ? store.state.tempThemeColors?.dark
@@ -1737,12 +1699,8 @@ export default defineComponent({
   },
 });
 </script>
-<style lang="scss" scoped>
-// When the panel is too short to comfortably fit the icon, hide it and show
-// just the centered "No Data" message. Kept as scoped CSS because this is a
-// container query targeting a deep descendant rendered by OEmptyState — it
-// cannot be expressed as an inline Tailwind utility. The container itself and
-// its min-height/padding overrides are applied inline on the OEmptyState above.
+<style scoped>
+/* keep(lib-override:o2-empty-state): container query hides OEmptyState's internally-rendered icon when the panel is too short — targets a deep descendant of the lib component, not expressible as a utility on this template */
 @container (max-height: 5rem) {
   .noData :deep(.o2-empty-state__inline-icon) {
     display: none;
diff --git a/web/src/components/dashboards/QueryInspector.spec.ts b/web/src/components/dashboards/QueryInspector.spec.ts
index 0097be00b5..8a34150398 100644
--- a/web/src/components/dashboards/QueryInspector.spec.ts
+++ b/web/src/components/dashboards/QueryInspector.spec.ts
@@ -178,12 +178,6 @@ describe("QueryInspector", () => {
         stubs: {
           ODialog: ODialogStub,
           OButton: OButtonStub,
-          QInput: {
-            template:
-              '<input data-test="q-input" :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" v-bind="$attrs"><slot name="prepend" /></input>',
-            props: ["modelValue", "placeholder", "dense", "color", "dark"],
-            emits: ["update:modelValue"],
-          },
           QIcon: {
             template: '<span data-test="OIcon" :class="name"><slot /></span>',
             props: ["name", "size"],
diff --git a/web/src/components/dashboards/QueryInspector.vue b/web/src/components/dashboards/QueryInspector.vue
index cd8dc7fb45..03438a4c59 100644
--- a/web/src/components/dashboards/QueryInspector.vue
+++ b/web/src/components/dashboards/QueryInspector.vue
@@ -21,9 +21,9 @@
     <!-- Body -->
       <div
         v-if="queryData.length === 0"
-        class="flex flex-col items-center justify-center h-64 text-[var(--o2-text-muted)]"
+        class="flex flex-col items-center justify-center h-64 text-text-muted"
       >
-        <OIcon name="info" style="width: 48px; height: 48px;" />
+        <OIcon class="w-12 h-12" name="info" />
         <p class="mt-2">{{ t('dashboard.queryInspector.noQueries') }}</p>
       </div>
 
@@ -31,18 +31,19 @@
         <div
           v-for="(query, index) in queryData"
           :key="query?.originalQuery + index"
-          class="bg-[var(--o2-card-bg)] rounded-xl border border-[var(--o2-border-color)] shadow-sm overflow-hidden"
+          class="bg-card-glass-bg rounded-default border border-card-glass-border overflow-hidden"
         >
           <!-- Query Header -->
           <div
-            class="p-2 gap-3 bg-[var(--o2-body-primary-bg)] border-b border-[var(--o2-border-color)] flex items-start justify-start"
+            class="p-2 gap-3 bg-theme-body-bg-primary border-b border-card-glass-border flex items-start justify-start"
           >
-            <span class="text-sm font-bold rounded-md"
-                :data-test="`query-inspector-query-name-${index}`">
+            <span class="text-sm font-bold rounded-default"
+                :data-test="`query-inspector-query-name-${index}`"
+            >
               {{ query.tabName || t('dashboard.queryInspector.queryN', { n: index + 1 }) }}
             </span>
             <span
-              class="bg-[var(--o2-body-primary-bg)] border border-[var(--o2-border-color)] text-[var(--o2-text-secondary)] text-[10px] font-bold px-2 py-0.5 rounded-md"
+              class="bg-theme-body-bg-primary border border-card-glass-border text-text-secondary text-3xs font-bold px-2 py-0.5 rounded-default"
             >
               {{ getQueryTypeDisplay(query.queryType) }}
             </span>
@@ -67,7 +68,7 @@
               </div>
               <div class="relative group mt-1">
                 <div
-                  class="p-2 rounded-lg bg-[var(--o2-body-primary-bg)] border border-[var(--o2-border-color)] font-mono text-sm max-h-40 overflow-y-auto whitespace-pre-wrap break-all [scrollbar-width:thin] [scrollbar-color:rgba(128,128,128,0.2)_transparent] inspector-query-editor"
+                  class="p-2 rounded-default bg-theme-body-bg-primary border border-card-glass-border font-mono text-sm max-h-40 overflow-y-auto whitespace-pre-wrap break-all [scrollbar-width:thin] [scrollbar-color:color-mix(in_srgb,var(--color-grey-500)_20%,transparent)_transparent] inspector-query-editor"
                   :data-test="`query-inspector-original-query-${index}`"
                   v-html="
                     highlightSearch(
@@ -97,7 +98,7 @@
               </div>
               <div class="relative group mt-1">
                 <div
-                  class="p-2 rounded-lg bg-[var(--o2-body-primary-bg)] border border-[var(--o2-border-color)] font-mono text-sm max-h-40 overflow-y-auto whitespace-pre-wrap break-all [scrollbar-width:thin] [scrollbar-color:rgba(128,128,128,0.2)_transparent] inspector-query-editor"
+                  class="p-2 rounded-default bg-theme-body-bg-primary border border-card-glass-border font-mono text-sm max-h-40 overflow-y-auto whitespace-pre-wrap break-all [scrollbar-width:thin] [scrollbar-color:color-mix(in_srgb,var(--color-grey-500)_20%,transparent)_transparent] inspector-query-editor"
                   :data-test="`query-inspector-executed-query-${index}`"
                   v-html="
                     highlightSearch(
@@ -111,7 +112,7 @@
 
             <!-- Time Metadata -->
             <div
-              class="grid grid-cols-2 gap-4 border-t border-[var(--o2-border-color)] pt-2"
+              class="grid grid-cols-2 gap-4 border-t border-card-glass-border pt-2"
             >
               <div class="space-y-1"
                 :data-test="`dashboard-query-inspector-start-time-${index}`"
@@ -120,12 +121,12 @@
                   >{{ t('dashboard.queryInspector.startTime') }}</label
                 >
                 <div
-                  class="text-xs text-[var(--o2-text-secondary)] font-medium flex items-center gap-2"
+                  class="text-xs text-text-secondary font-medium flex items-center gap-2"
                 >
                   <OIcon
                     name="login"
                     size="xs"
-                    class="text-[var(--o2-text-muted)]"
+                    class="text-text-muted"
                   />
                   {{ formatTimestamp(query.startTime) }}
                 </div>
@@ -137,12 +138,12 @@
                   >{{ t('dashboard.queryInspector.endTime') }}</label
                 >
                 <div
-                  class="text-xs text-[var(--o2-text-secondary)] font-medium flex items-center gap-2"
+                  class="text-xs text-text-secondary font-medium flex items-center gap-2"
                 >
                   <OIcon
                     name="logout"
                     size="xs"
-                    class="text-[var(--o2-text-muted)]"
+                    class="text-text-muted"
                   />
                   {{ formatTimestamp(query.endTime) }}
                 </div>
@@ -151,7 +152,7 @@
 
             <!-- Variables List (Row by Row) -->
             <div
-              class="space-y-3 border-t border-[var(--o2-border-color)]"
+              class="space-y-3 border-t border-card-glass-border"
             >
               <!-- Standard Variables -->
               <div class="pt-2">
@@ -163,21 +164,20 @@
                     <div
                       v-for="v in getVariablesByType(query, 'variable')"
                       :key="v.name"
-                      class="flex items-center gap-2 p-1 rounded-md border border-[var(--o2-border-color)] bg-[var(--o2-card-bg)] text-xs"
+                      class="flex items-center gap-2 p-1 rounded-default border border-card-glass-border bg-card-glass-bg text-xs"
                     >
                       <span
-                        class="font-bold text-[var(--o2-text-primary)]"
-                        >{{ v.name }}</span
+                        class="font-bold text-text-label"
+                      >{{ v.name }}</span
                       >
-                      <span class="text-[var(--o2-text-muted)]">:</span>
+                      <span class="text-text-muted">:</span>
                       <span
-                        class="text-[var(--o2-text-secondary)] italic"
-                        >{{ v.value }}</span
+                        class="text-text-secondary italic"
+                      >{{ v.value }}</span
                       >
                     </div>
                   </template>
-                  <span v-else class="text-xs text-[var(--o2-text-muted)]"
-                    >-</span
+                  <span v-else class="text-xs text-text-muted">-</span
                   >
                 </div>
               </div>
@@ -192,21 +192,20 @@
                     <div
                       v-for="v in getVariablesByType(query, 'fixed')"
                       :key="v.name"
-                      class="flex items-center gap-2 p-1 rounded-md border border-[var(--o2-border-color)] bg-[var(--o2-card-bg)] text-xs"
+                      class="flex items-center gap-2 p-1 rounded-default border border-card-glass-border bg-card-glass-bg text-xs"
                     >
                       <span
-                        class="font-bold text-[var(--o2-text-primary)]"
-                        >{{ v.name }}</span
+                        class="font-bold text-text-label"
+                      >{{ v.name }}</span
                       >
-                      <span class="text-[var(--o2-text-muted)]">:</span>
+                      <span class="text-text-muted">:</span>
                       <span
-                        class="text-[var(--o2-text-secondary)] italic"
-                        >{{ v.value }}</span
+                        class="text-text-secondary italic"
+                      >{{ v.value }}</span
                       >
                     </div>
                   </template>
-                  <span v-else class="text-xs text-[var(--o2-text-muted)]"
-                    >-</span
+                  <span v-else class="text-xs text-text-muted">-</span
                   >
                 </div>
               </div>
@@ -223,23 +222,22 @@
                     <div
                       v-for="v in getVariablesByType(query, 'dynamicVariable')"
                       :key="v.name"
-                      class="flex items-center gap-2 p-1 rounded-md border border-[var(--o2-border-color)] bg-[var(--o2-card-bg)] text-xs"
+                      class="flex items-center gap-2 p-1 rounded-default border border-card-glass-border bg-card-glass-bg text-xs"
                     >
                       <span
-                        class="font-bold text-[var(--o2-text-primary)]"
-                        >{{ v.name }}</span
+                        class="font-bold text-text-label"
+                      >{{ v.name }}</span
                       >
-                      <span class="text-[var(--o2-text-muted)]">{{
+                      <span class="text-text-muted">{{
                         v.operator
                       }}</span>
                       <span
-                        class="text-[var(--o2-text-secondary)] italic"
-                        >{{ v.value }}</span
+                        class="text-text-secondary italic"
+                      >{{ v.value }}</span
                       >
                     </div>
                   </template>
-                  <span v-else class="text-xs text-[var(--o2-text-muted)]"
-                    >-</span
+                  <span v-else class="text-xs text-text-muted">-</span
                   >
                 </div>
               </div>
@@ -356,7 +354,7 @@ export default defineComponent({
         return safeHtml.replace(
           regex,
           (match) =>
-            `<mark class="bg-yellow-400 text-black rounded-sm shadow-sm">${match}</mark>`,
+            `<mark class="rounded-default">${match}</mark>`,
         );
       } catch (e) {
         return safeHtml;
@@ -399,10 +397,12 @@ export default defineComponent({
 });
 </script>
 
-<style>
+<style scoped>
+/* keep(scrollbar): custom webkit scrollbar for the query preview, plus :deep
+   overrides for the highlight <mark> and Monaco token spans injected via v-html. */
 .inspector-query-editor::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+  width: 0.375rem;
+  height: 0.375rem;
 }
 
 .inspector-query-editor::-webkit-scrollbar-track {
@@ -410,24 +410,24 @@ export default defineComponent({
 }
 
 .inspector-query-editor::-webkit-scrollbar-thumb {
-  background: rgba(128, 128, 128, 0.2);
-  border-radius: 10px;
+  background: var(--color-border-default);
+  border-radius: 0.625rem;
 }
 
 .inspector-query-editor::-webkit-scrollbar-thumb:hover {
-  background: rgba(128, 128, 128, 0.4);
+  background: var(--color-border-strong);
 }
 
-.inspector-query-editor mark {
+.inspector-query-editor :deep(mark) {
   all: unset;
-  background-color: #facc15;
-  color: black;
-  border-radius: 2px;
+  background-color: var(--color-table-highlight-bg);
+  color: var(--color-table-highlight-text);
+  border-radius: 0.125rem;
   padding: 0;
 }
 
 /* Ensure Monaco colorized content looks good */
-.inspector-query-editor .mtk1 {
+.inspector-query-editor :deep(.mtk1) {
   color: inherit;
 }
 </style>
diff --git a/web/src/components/dashboards/SelectDashboardDropdown.spec.ts b/web/src/components/dashboards/SelectDashboardDropdown.spec.ts
index b33ac19464..b29c56b332 100644
--- a/web/src/components/dashboards/SelectDashboardDropdown.spec.ts
+++ b/web/src/components/dashboards/SelectDashboardDropdown.spec.ts
@@ -200,7 +200,7 @@ describe("SelectDashboardDropdown", () => {
   });
 
   describe("ODrawer migration", () => {
-    it("should render ODrawer in place of q-dialog", () => {
+    it("should render ODrawer", () => {
       const wrapper = mountComponent({}, store);
       expect(wrapper.findComponent(ODialogStub).exists()).toBe(true);
     });
diff --git a/web/src/components/dashboards/VariablesValueSelector.spec.ts b/web/src/components/dashboards/VariablesValueSelector.spec.ts
index 787ec4379e..3ee262c37c 100644
--- a/web/src/components/dashboards/VariablesValueSelector.spec.ts
+++ b/web/src/components/dashboards/VariablesValueSelector.spec.ts
@@ -230,15 +230,7 @@ describe("VariablesValueSelector", () => {
       },
       global: {
         plugins: [],
-        stubs: {
-          "q-input": {
-            name: "QInput",
-            template:
-              '<input v-model="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" />',
-            props: ["modelValue", "label", "dense", "outlined", "readonly"],
-            emits: ["update:modelValue"],
-          },
-        },
+        stubs: {},
       },
     });
   };
diff --git a/web/src/components/dashboards/VariablesValueSelector.vue b/web/src/components/dashboards/VariablesValueSelector.vue
index a621f10238..cd9298bf5d 100644
--- a/web/src/components/dashboards/VariablesValueSelector.vue
+++ b/web/src/components/dashboards/VariablesValueSelector.vue
@@ -16,7 +16,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div
     v-if="variablesData.values?.length > 0"
-    class="flex flex-wrap mt-1 ml-1"
+    class="flex flex-wrap mt-1"
   >
     <div
       v-for="(item, index) in variablesData.values"
@@ -38,8 +38,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <div v-else-if="item.type == 'constant'" class="max-w-[40rem] min-w-37.5">
         <OInput
           v-show="!item.hideOnDashboard"
-          class="mr-4 mt-1"
-          style="max-width: 150px !important"
+          class="mr-4 mt-1 max-w-37.5!"
           v-model="item.value"
           :label="item.label || item.name"
           label-position="inside"
@@ -51,8 +50,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <div v-else-if="item.type == 'textbox'" class="max-w-[40rem] min-w-37.5">
         <OInput
           v-show="!item.hideOnDashboard"
-          class="mr-4 mt-1"
-          style="max-width: 150px !important"
+          class="mr-4 mt-1 max-w-37.5!"
           :debounce="1000"
           v-model="item.value"
           :label="item.label || item.name"
@@ -152,7 +150,7 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
-    // New props for scoped variables
+    // Props for scoped variables
     scope: {
       type: String as PropType<"global" | "tabs" | "panels">,
       default: "global",
@@ -190,8 +188,6 @@ export default defineComponent({
   setup(props: any, { emit }) {
     const store = useStore();
     const { t } = useI18n();
-    // Try to inject variablesManager from parent (for backward compatibility)
-
     // Try to inject variablesManager from parent (for backward compatibility)
     const injectedManager = inject<any>("variablesManager", undefined);
     const manager = props.variablesManager || injectedManager;
@@ -1266,7 +1262,6 @@ export default defineComponent({
     };
 
     // it is used to change/update initial variables values from outside the component
-    // NOTE: right now, it is not used after variables in variables feature
     const changeInitialVariableValues = async (
       newInitialVariableValues: any,
     ) => {
diff --git a/web/src/components/dashboards/addPanel/AddAnnotation.vue b/web/src/components/dashboards/addPanel/AddAnnotation.vue
index c8f4c681b6..253bbe92b7 100644
--- a/web/src/components/dashboards/addPanel/AddAnnotation.vue
+++ b/web/src/components/dashboards/addPanel/AddAnnotation.vue
@@ -34,11 +34,10 @@
             :hint="t('dashboard.addAnnotation.panelsHint')"
             :options="groupedPanelsOptions"
             multiple
-            style="min-width: 150px"
             :label="t('dashboard.addAnnotation.selectPanels')"
-            class="textbox flex flex-col no-case showLabelOnTop"
+            class="textbox flex flex-col no-case showLabelOnTop min-w-37.5"
             data-test="dashboard-add-annotation-panels-select"
-          />
+        />
         <div class="text-xs mt-3">
           {{ t('dashboard.addAnnotation.timestamp') }} {{ annotationDateString }}
         </div>
diff --git a/web/src/components/dashboards/addPanel/BackGroundColorConfig.spec.ts b/web/src/components/dashboards/addPanel/BackGroundColorConfig.spec.ts
index 0113149b97..81488415fe 100644
--- a/web/src/components/dashboards/addPanel/BackGroundColorConfig.spec.ts
+++ b/web/src/components/dashboards/addPanel/BackGroundColorConfig.spec.ts
@@ -390,10 +390,12 @@ describe("BackGroundColorConfig", () => {
   describe("Template Rendering and UI", () => {
     it("should render main container with correct styling", () => {
       wrapper = createWrapper();
-      const container = wrapper.find("div[style*='display: flex']");
+      // The root container's inline flex/align/width style is now utilities.
+      const container = wrapper.find("div");
       expect(container.exists()).toBeTruthy();
-      expect(container.attributes("style")).toContain("align-items: center");
-      expect(container.attributes("style")).toContain("width: 100%");
+      expect(container.classes()).toContain("flex");
+      expect(container.classes()).toContain("items-center");
+      expect(container.classes()).toContain("w-full");
     });
 
     it("should render OSelect with correct props", () => {
@@ -439,8 +441,9 @@ describe("BackGroundColorConfig", () => {
       const colorWrapper = wrapper.find('[data-test="dashboard-config-color-input-wrapper"]');
 
       expect(colorWrapper.exists()).toBeTruthy();
-      expect(colorWrapper.attributes("style")).toContain("margin-top: 36px");
-      expect(colorWrapper.attributes("style")).toContain("margin-left: 5px");
+      // Inline `margin-top: 36px; margin-left: 5px` -> mt-9 (2.25rem) / ml-1.25 (0.3125rem).
+      expect(colorWrapper.classes()).toContain("mt-9");
+      expect(colorWrapper.classes()).toContain("ml-1.25");
     });
 
     it("should bind color input value correctly", () => {
diff --git a/web/src/components/dashboards/addPanel/BackGroundColorConfig.vue b/web/src/components/dashboards/addPanel/BackGroundColorConfig.vue
index a43864a844..15e9db2d10 100644
--- a/web/src/components/dashboards/addPanel/BackGroundColorConfig.vue
+++ b/web/src/components/dashboards/addPanel/BackGroundColorConfig.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="display: flex; align-items: center; width: 100%">
+  <div class="flex items-center w-full">
     <OSelect
       v-model="backgroundType"
       :options="colorModeOptions"
@@ -11,8 +11,7 @@
     <div v-if="backgroundType === 'single'">
       <div
         data-test="dashboard-config-color-input-wrapper"
-        class="h-6.25 w-6.25 overflow-hidden rounded-full inline-flex items-center relative"
-        style="margin-top: 36px; margin-left: 5px"
+        class="h-6.25 w-6.25 overflow-hidden rounded-full inline-flex items-center relative mt-9 ml-1.25"
       >
         <input
           data-test="dashboard-config-color-input"
diff --git a/web/src/components/dashboards/addPanel/BuildFieldPopUp.schema.ts b/web/src/components/dashboards/addPanel/BuildFieldPopUp.schema.ts
deleted file mode 100644
index 5380c2c90e..0000000000
--- a/web/src/components/dashboards/addPanel/BuildFieldPopUp.schema.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// Validation schema for BuildFieldPopUp.vue. The popup collects a single
-// editable value: the field `label`. Restored rule (BEFORE inventory §4,
-// dashboards): label was `v.length > 0 || 'Required'` → required. Factory keeps
-// the message i18n-driven. Validation TIMING is owned by OForm.
-
-import { z } from "zod";
-
-export const makeBuildFieldPopUpSchema = (t: (_key: string) => string) =>
-  z.object({
-    label: z.string().min(1, t("common.required")),
-  });
-
-export type BuildFieldPopUpForm = z.infer<
-  ReturnType<typeof makeBuildFieldPopUpSchema>
->;
diff --git a/web/src/components/dashboards/addPanel/BuildFieldPopUp.spec.ts b/web/src/components/dashboards/addPanel/BuildFieldPopUp.spec.ts
deleted file mode 100644
index 6e56880cab..0000000000
--- a/web/src/components/dashboards/addPanel/BuildFieldPopUp.spec.ts
+++ /dev/null
@@ -1,554 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { describe, expect, it, beforeEach, vi, afterEach } from "vitest";
-import { mount, flushPromises } from "@vue/test-utils";
-import BuildFieldPopUp from "@/components/dashboards/addPanel/BuildFieldPopUp.vue";
-import { createI18n } from "vue-i18n";
-
-
-const i18n = createI18n({
-  legacy: false,
-  locale: "en",
-  messages: {
-    en: { common: { label: "Label", required: "A value is required" } },
-  },
-});
-
-describe("BuildFieldPopUp", () => {
-  let wrapper: any;
-
-  const defaultModelValue = {
-    label: "Test Field",
-    isDerived: false,
-    functionName: null,
-    args: [{ type: "field", value: {} }],
-  };
-
-  const defaultProps = {
-    modelValue: defaultModelValue,
-    customQuery: false,
-    chartType: "bar",
-  };
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  afterEach(() => {
-    if (wrapper) {
-      wrapper.unmount();
-    }
-  });
-
-  const createWrapper = (props = {}) => {
-    return mount(BuildFieldPopUp, {
-      props: {
-        ...defaultProps,
-        ...props,
-      },
-      global: {
-        plugins: [i18n],
-        stubs: {
-          SortByBtnGrp: true,
-          DynamicFunctionPopUp: true,
-        },
-      },
-    });
-  };
-
-  describe("Component Rendering", () => {
-    it("should render component correctly", () => {
-      wrapper = createWrapper();
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it("should render label input", () => {
-      wrapper = createWrapper();
-      const labelInput = wrapper.find('[data-test="dashboard-x-item-input"]');
-      expect(labelInput.exists()).toBe(true);
-    });
-
-    it("should display label value", () => {
-      wrapper = createWrapper();
-      const labelInput = wrapper.find('[data-test="dashboard-x-item-input"]');
-      expect(labelInput.exists()).toBe(true);
-    });
-  });
-
-  describe("Props Handling", () => {
-    it("should accept modelValue prop", () => {
-      const customValue = {
-        label: "Custom Label",
-        isDerived: false,
-      };
-      wrapper = createWrapper({ modelValue: customValue });
-      expect(wrapper.props().modelValue.label).toBe("Custom Label");
-    });
-
-    it("should accept customQuery prop", () => {
-      wrapper = createWrapper({ customQuery: true });
-      expect(wrapper.props().customQuery).toBe(true);
-    });
-
-    it("should accept chartType prop", () => {
-      wrapper = createWrapper({ chartType: "line" });
-      expect(wrapper.props().chartType).toBe("line");
-    });
-
-    it("should handle default chartType", () => {
-      const wrapperDefault = mount(BuildFieldPopUp, {
-        props: {
-          modelValue: defaultModelValue,
-        },
-        global: {
-          plugins: [i18n],
-          stubs: {
-            SortByBtnGrp: true,
-            DynamicFunctionPopUp: true,
-          },
-        },
-      });
-      expect(wrapperDefault.props().chartType).toBe("bar");
-      wrapperDefault.unmount();
-    });
-  });
-
-  describe("Label Input", () => {
-    it("should bind label to modelValue", () => {
-      wrapper = createWrapper();
-      const input = wrapper.find('input[type="text"]');
-      expect(input.exists()).toBe(true);
-    });
-
-    it("should update label value", async () => {
-      wrapper = createWrapper();
-      await flushPromises();
-      const input = wrapper.find('input[type="text"]');
-      await input.setValue("New Label");
-      await flushPromises();
-      // `label` is form-owned; the form value is synced OUT to the parent via
-      // `update:modelValue` (one-way data flow — the component no longer mutates
-      // the prop in place). The parent binds with v-model, so this event carries
-      // the new label back up.
-      const emitted = wrapper.emitted("update:modelValue");
-      expect(emitted).toBeTruthy();
-      expect((emitted!.at(-1) as any[])[0].label).toBe("New Label");
-    });
-
-    it("should have required validation rule", () => {
-      wrapper = createWrapper();
-      const labelInput = wrapper.find('[data-test="dashboard-x-item-input"]');
-      expect(labelInput.exists()).toBe(true);
-    });
-
-    it("should validate empty label", () => {
-      const emptyLabelValue = {
-        label: "",
-        isDerived: false,
-      };
-      wrapper = createWrapper({ modelValue: emptyLabelValue });
-      expect(wrapper.vm.modelValue.label).toBe("");
-    });
-  });
-
-  describe("SortByBtnGrp Visibility", () => {
-    it("should show SortByBtnGrp when not customQuery and isDerived", () => {
-      const derivedValue = {
-        label: "Derived Field",
-        isDerived: true,
-      };
-      wrapper = createWrapper({
-        modelValue: derivedValue,
-        customQuery: false,
-      });
-      // Component should render SortByBtnGrp
-      expect(wrapper.vm.modelValue.isDerived).toBe(true);
-    });
-
-    it("should not show SortByBtnGrp when customQuery is true", () => {
-      const derivedValue = {
-        label: "Derived Field",
-        isDerived: true,
-      };
-      wrapper = createWrapper({
-        modelValue: derivedValue,
-        customQuery: true,
-      });
-      expect(wrapper.props().customQuery).toBe(true);
-    });
-
-    it("should not show SortByBtnGrp when isDerived is false", () => {
-      wrapper = createWrapper({
-        modelValue: { ...defaultModelValue, isDerived: false },
-      });
-      expect(wrapper.vm.modelValue.isDerived).toBe(false);
-    });
-  });
-
-  describe("DynamicFunctionPopUp Visibility", () => {
-    it("should show DynamicFunctionPopUp when not customQuery and not isDerived", () => {
-      wrapper = createWrapper({
-        modelValue: { ...defaultModelValue, isDerived: false },
-        customQuery: false,
-      });
-      expect(wrapper.vm.modelValue.isDerived).toBe(false);
-      expect(wrapper.props().customQuery).toBe(false);
-    });
-
-    it("should not show DynamicFunctionPopUp when customQuery is true", () => {
-      wrapper = createWrapper({
-        modelValue: { ...defaultModelValue, isDerived: false },
-        customQuery: true,
-      });
-      expect(wrapper.props().customQuery).toBe(true);
-    });
-
-    it("should not show DynamicFunctionPopUp when isDerived is true", () => {
-      wrapper = createWrapper({
-        modelValue: { ...defaultModelValue, isDerived: true },
-        customQuery: false,
-      });
-      expect(wrapper.vm.modelValue.isDerived).toBe(true);
-    });
-
-    it("should pass allowAggregation prop to DynamicFunctionPopUp", () => {
-      wrapper = createWrapper();
-      // DynamicFunctionPopUp should receive allowAggregation: false
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it("should pass chartType prop to DynamicFunctionPopUp", () => {
-      wrapper = createWrapper({ chartType: "pie" });
-      expect(wrapper.props().chartType).toBe("pie");
-    });
-  });
-
-  describe("Event Emissions", () => {
-    it("should emit update:modelValue when model changes", async () => {
-      wrapper = createWrapper();
-      wrapper.vm.emit("update:modelValue", {
-        ...defaultModelValue,
-        label: "Updated",
-      });
-      await flushPromises();
-      expect(wrapper.emitted("update:modelValue")).toBeTruthy();
-    });
-
-    it("should handle DynamicFunctionPopUp updates", async () => {
-      wrapper = createWrapper();
-      const newValue = {
-        ...defaultModelValue,
-        functionName: "sum",
-      };
-      wrapper.vm.emit("update:modelValue", newValue);
-      await flushPromises();
-      expect(wrapper.emitted("update:modelValue")).toBeTruthy();
-    });
-  });
-
-  describe("Component Structure", () => {
-    it("should have correct container structure", () => {
-      wrapper = createWrapper();
-      const container = wrapper.find('[data-test="dashboard-build-field-popup-container"]');
-      expect(container.exists()).toBe(true);
-    });
-
-    it("should have two main sections", () => {
-      wrapper = createWrapper();
-      const leftSection = wrapper.find('[data-test="dashboard-build-field-popup-left-section"]');
-      const rightSection = wrapper.find('[data-test="dashboard-build-field-popup-right-section"]');
-      expect(leftSection.exists()).toBe(true);
-      expect(rightSection.exists()).toBe(true);
-    });
-
-    it("should apply correct styles", () => {
-      wrapper = createWrapper();
-      const mainDiv = wrapper.find('[data-test="dashboard-build-field-popup-container"]');
-      expect(mainDiv.exists()).toBe(true);
-    });
-  });
-
-  describe("Different Chart Types", () => {
-    it("should handle bar chart type", () => {
-      wrapper = createWrapper({ chartType: "bar" });
-      expect(wrapper.props().chartType).toBe("bar");
-    });
-
-    it("should handle line chart type", () => {
-      wrapper = createWrapper({ chartType: "line" });
-      expect(wrapper.props().chartType).toBe("line");
-    });
-
-    it("should handle pie chart type", () => {
-      wrapper = createWrapper({ chartType: "pie" });
-      expect(wrapper.props().chartType).toBe("pie");
-    });
-
-    it("should handle area chart type", () => {
-      wrapper = createWrapper({ chartType: "area" });
-      expect(wrapper.props().chartType).toBe("area");
-    });
-
-    it("should handle table chart type", () => {
-      wrapper = createWrapper({ chartType: "table" });
-      expect(wrapper.props().chartType).toBe("table");
-    });
-  });
-
-  describe("Derived vs Non-Derived Fields", () => {
-    it("should render correctly for derived field", () => {
-      const derivedValue = {
-        label: "Derived Field",
-        isDerived: true,
-        sortBy: "ASC",
-      };
-      wrapper = createWrapper({
-        modelValue: derivedValue,
-        customQuery: false,
-      });
-      expect(wrapper.vm.modelValue.isDerived).toBe(true);
-    });
-
-    it("should render correctly for non-derived field", () => {
-      wrapper = createWrapper({
-        modelValue: { ...defaultModelValue, isDerived: false },
-        customQuery: false,
-      });
-      expect(wrapper.vm.modelValue.isDerived).toBe(false);
-    });
-
-    it("should toggle between derived and non-derived", async () => {
-      wrapper = createWrapper();
-      wrapper.vm.modelValue.isDerived = true;
-      await flushPromises();
-      expect(wrapper.vm.modelValue.isDerived).toBe(true);
-
-      wrapper.vm.modelValue.isDerived = false;
-      await flushPromises();
-      expect(wrapper.vm.modelValue.isDerived).toBe(false);
-    });
-  });
-
-  describe("CustomQuery Mode", () => {
-    it("should handle customQuery enabled", () => {
-      wrapper = createWrapper({ customQuery: true });
-      expect(wrapper.props().customQuery).toBe(true);
-    });
-
-    it("should handle customQuery disabled", () => {
-      wrapper = createWrapper({ customQuery: false });
-      expect(wrapper.props().customQuery).toBe(false);
-    });
-
-    it("should hide function configuration in customQuery mode", () => {
-      wrapper = createWrapper({
-        customQuery: true,
-        modelValue: { ...defaultModelValue, isDerived: false },
-      });
-      expect(wrapper.props().customQuery).toBe(true);
-    });
-  });
-
-  describe("Edge Cases", () => {
-    it("should handle empty modelValue", () => {
-      const emptyValue = {
-        label: "",
-      };
-      wrapper = createWrapper({ modelValue: emptyValue as any });
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it("should handle missing label in modelValue", () => {
-      const noLabelValue = {
-        isDerived: false,
-      };
-      wrapper = createWrapper({ modelValue: noLabelValue as any });
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it("should handle null values gracefully", () => {
-      const nullValues = {
-        label: null,
-        isDerived: null,
-      };
-      wrapper = createWrapper({ modelValue: nullValues as any });
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it("should handle undefined chartType", () => {
-      wrapper = createWrapper({ chartType: undefined as any });
-      expect(wrapper.exists()).toBe(true);
-    });
-  });
-
-  describe("Component Lifecycle", () => {
-    it("should mount without errors", () => {
-      expect(() => createWrapper()).not.toThrow();
-    });
-
-    it("should unmount without errors", () => {
-      wrapper = createWrapper();
-      expect(() => wrapper.unmount()).not.toThrow();
-    });
-
-    it("should handle multiple prop updates", async () => {
-      wrapper = createWrapper();
-      await wrapper.setProps({ chartType: "line" });
-      await wrapper.setProps({ customQuery: true });
-      await wrapper.setProps({ chartType: "bar" });
-      expect(wrapper.exists()).toBe(true);
-    });
-  });
-
-  describe("Label Validation", () => {
-    it("should require non-empty label", () => {
-      wrapper = createWrapper();
-      const input = wrapper.find('[data-test="dashboard-x-item-input"]');
-      expect(input.exists()).toBe(true);
-    });
-
-    it("should accept valid label", () => {
-      const validValue = {
-        label: "Valid Label",
-        isDerived: false,
-      };
-      wrapper = createWrapper({ modelValue: validValue });
-      expect(wrapper.vm.modelValue.label.length).toBeGreaterThan(0);
-    });
-
-    it("should handle long labels", () => {
-      const longLabel = "A".repeat(100);
-      const longLabelValue = {
-        label: longLabel,
-        isDerived: false,
-      };
-      wrapper = createWrapper({ modelValue: longLabelValue });
-      expect(wrapper.vm.modelValue.label.length).toBe(100);
-    });
-
-    it("should handle special characters in label", () => {
-      const specialValue = {
-        label: "Label @#$%^&*()",
-        isDerived: false,
-      };
-      wrapper = createWrapper({ modelValue: specialValue });
-      expect(wrapper.vm.modelValue.label).toBe("Label @#$%^&*()");
-    });
-  });
-
-  describe("Integration with Child Components", () => {
-    it("should pass correct props to SortByBtnGrp", () => {
-      const derivedValue = {
-        label: "Derived",
-        isDerived: true,
-        sortBy: "ASC",
-      };
-      wrapper = createWrapper({
-        modelValue: derivedValue,
-        customQuery: false,
-      });
-      expect(wrapper.vm.modelValue.isDerived).toBe(true);
-    });
-
-    it("should pass correct props to DynamicFunctionPopUp", () => {
-      wrapper = createWrapper({
-        modelValue: { ...defaultModelValue, isDerived: false },
-        customQuery: false,
-        chartType: "scatter",
-      });
-      expect(wrapper.props().chartType).toBe("scatter");
-    });
-
-    it("should handle updates from DynamicFunctionPopUp", async () => {
-      wrapper = createWrapper();
-      const updatedValue = {
-        ...defaultModelValue,
-        functionName: "count",
-      };
-      wrapper.vm.emit("update:modelValue", updatedValue);
-      await flushPromises();
-      expect(wrapper.emitted("update:modelValue")).toBeTruthy();
-    });
-  });
-
-  describe("Responsive Layout", () => {
-    it("should apply flex layout", () => {
-      wrapper = createWrapper();
-      const container = wrapper.find('div[style*="display: flex"]');
-      expect(container.exists()).toBe(true);
-    });
-
-    it("should apply gap between sections", () => {
-      wrapper = createWrapper();
-      const container = wrapper.find('div[style*="gap: 16px"]');
-      expect(container.exists()).toBe(true);
-    });
-  });
-
-  describe("i18n Support", () => {
-    it("should use i18n for label translation", () => {
-      wrapper = createWrapper();
-      expect(wrapper.vm.t).toBeDefined();
-      expect(wrapper.vm.t("common.label")).toBe("Label");
-    });
-
-    it("should handle missing translations", () => {
-      wrapper = createWrapper();
-      const translation = wrapper.vm.t("nonexistent.key");
-      expect(translation).toBeDefined();
-    });
-  });
-
-  // Real-OForm validation wiring (playbook §5): mount the real <OForm> and prove
-  // the schema actually gates an empty `label` — an unwired `:schema` (e.g. not
-  // returned from setup) would be caught here.
-  describe("OForm schema validation (real form)", () => {
-    const submitForm = async (w: any) => {
-      await w.vm.buildFieldFormRef.form.handleSubmit();
-      await flushPromises();
-    };
-
-    it("shows no error before submit (R3 — submit-then-change)", () => {
-      wrapper = createWrapper({ modelValue: { label: "", isDerived: false } });
-      expect(wrapper.text()).not.toContain("A value is required");
-    });
-
-    it("is invalid when the label is empty (restored required rule)", async () => {
-      wrapper = createWrapper({ modelValue: { label: "", isDerived: false } });
-      await submitForm(wrapper);
-      expect(wrapper.vm.buildFieldFormRef.form.state.isValid).toBe(false);
-      expect(wrapper.text()).toContain("A value is required");
-    });
-
-    it("is valid when the label is non-empty", async () => {
-      wrapper = createWrapper({
-        modelValue: { label: "My Field", isDerived: false },
-      });
-      await submitForm(wrapper);
-      expect(wrapper.vm.buildFieldFormRef.form.state.isValid).toBe(true);
-    });
-
-    it("clears the error on change after the first submit", async () => {
-      wrapper = createWrapper({ modelValue: { label: "", isDerived: false } });
-      await submitForm(wrapper);
-      expect(wrapper.text()).toContain("A value is required");
-
-      wrapper.vm.buildFieldFormRef.form.setFieldValue("label", "fixed");
-      await flushPromises();
-      expect(wrapper.text()).not.toContain("A value is required");
-    });
-  });
-});
diff --git a/web/src/components/dashboards/addPanel/BuildFieldPopUp.vue b/web/src/components/dashboards/addPanel/BuildFieldPopUp.vue
deleted file mode 100644
index 5a9007bc61..0000000000
--- a/web/src/components/dashboards/addPanel/BuildFieldPopUp.vue
+++ /dev/null
@@ -1,154 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <div
-    data-test="dashboard-build-field-popup-container"
-    style="padding: 3px 16px 16px 16px; display: flex; gap: 16px"
-  >
-    <div data-test="dashboard-build-field-popup-left-section">
-      <OForm
-        id="dashboard-build-field-popup-form"
-        ref="buildFieldFormRef"
-        :schema="buildFieldPopUpSchema"
-        :default-values="buildFieldPopUpDefaults"
-      >
-        <OFormInput
-          data-test="dashboard-x-item-input"
-          name="label"
-          :label="t('common.label')"
-          required
-        />
-      </OForm>
-      <div v-if="!customQuery && modelValue.isDerived">
-        <SortByBtnGrp :fieldObj="modelValue" />
-      </div>
-    </div>
-    <div data-test="dashboard-build-field-popup-right-section">
-      <div v-if="!customQuery && !modelValue.isDerived" class="mr-1 mb-2">
-        <DynamicFunctionPopUp
-          :modelValue="modelValue"
-          @update:modelValue="(newValue) => emit('update:modelValue', newValue)"
-          :allowAggregation="false"
-          :chartType="chartType"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, ref, watch } from "vue";
-
-import SortByBtnGrp from "@/components/dashboards/addPanel/SortByBtnGrp.vue";
-import DynamicFunctionPopUp from "@/components/dashboards/addPanel/dynamicFunction/DynamicFunctionPopUp.vue";
-import { useI18n } from "vue-i18n";
-import OForm from "@/lib/forms/Form/OForm.vue";
-import OFormInput from "@/lib/forms/Input/OFormInput.vue";
-import {
-  makeBuildFieldPopUpSchema,
-  type BuildFieldPopUpForm,
-} from "./BuildFieldPopUp.schema";
-
-export default defineComponent({
-  name: "BuildFieldPopUp",
-  components: {
-    SortByBtnGrp,
-    DynamicFunctionPopUp,
-    OForm,
-    OFormInput,
-  },
-  props: {
-    modelValue: {
-      type: Object,
-      required: true,
-    },
-    customQuery: {
-      type: Boolean,
-      default: false,
-    },
-    chartType: {
-      type: String,
-      default: "bar",
-    },
-  },
-  emits: ["update:modelValue"],
-  setup(props, { emit }) {
-    const { t } = useI18n();
-
-    const buildFieldFormRef: any = ref(null);
-    const buildFieldPopUpSchema = makeBuildFieldPopUpSchema(t);
-
-    // The form owns `label`; seed it from the incoming modelValue (read once at
-    // mount — this is a plain fragment, not a remounting overlay).
-    const buildFieldPopUpDefaults = computed(
-      (): BuildFieldPopUpForm => ({
-        label: props.modelValue?.label ?? "",
-      }),
-    );
-
-    // Sync the form-owned `label` OUT to the parent via `update:modelValue` so the
-    // existing contract (parent reads modelValue.label) is preserved WITHOUT
-    // mutating the prop. This is a form → parent value handoff over the v-model
-    // event (the same direction the old v-model wrote); the parent binds this
-    // component with v-model, so the emitted value flows back down as modelValue.
-    let stopLabelWatch: (() => void) | null = null;
-    watch(
-      () => buildFieldFormRef.value,
-      (formRef: any) => {
-        stopLabelWatch?.();
-        stopLabelWatch = null;
-        if (formRef?.form) {
-          const labelStore = formRef.form.useStore(
-            (s: any) => s.values?.label,
-          );
-          stopLabelWatch = watch(
-            labelStore,
-            (v: any) => {
-              const next = v ?? "";
-              // Skip when it already matches modelValue.label so we don't emit a
-              // redundant NEW object — e.g. the immediate flush on (re)subscription
-              // when the form value still equals the incoming prop. That matters
-              // because the parent's v-model target lives inside a deeply-watched
-              // panel state, and a same-content-new-reference emit would needlessly
-              // mark it dirty.
-              if (props.modelValue?.label === next) return;
-              emit("update:modelValue", {
-                ...(props.modelValue ?? {}),
-                label: next,
-              });
-            },
-            // immediate so the current form value is flushed out as soon as the
-            // subscription is (re)established — covers the case where a change
-            // lands before the post-mount subscription runs (the guard above makes
-            // the common "unchanged" case a no-op).
-            { immediate: true },
-          );
-        }
-      },
-      { immediate: true },
-    );
-
-    return {
-      t,
-      emit,
-      buildFieldFormRef,
-      buildFieldPopUpSchema,
-      buildFieldPopUpDefaults,
-    };
-  },
-});
-</script>
diff --git a/web/src/components/dashboards/addPanel/ChartSelection.vue b/web/src/components/dashboards/addPanel/ChartSelection.vue
index 4343824cea..0fe8e83972 100644
--- a/web/src/components/dashboards/addPanel/ChartSelection.vue
+++ b/web/src/components/dashboards/addPanel/ChartSelection.vue
@@ -15,14 +15,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div style="height: 100%">
-    <div class="p-0" style="width: 100px">
+  <div class="h-full">
+    <div class="p-0 w-25">
       <ul class="flex flex-wrap list-none p-0 m-0">
-        <li
+        <li class="w-12.5"
           v-for="(item, index) in ChartsArray"
           :key="index"
           :class="[
-            'dashboard-chart-border',
+            'border-r border-b border-card-glass-border',
             'transition-colors duration-150 ease-in-out hover:bg-surface-subtle',
             selectedChartType === item.id ? 'bg-label-chip-url-bg' : '',
             isChartDisabled(item)
@@ -30,7 +30,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               : 'cursor-pointer',
           ]"
           @click="!isChartDisabled(item) && $emit('update:selectedChartType', item.id)"
-          style="width: 50px"
           data-test="dashboard-addpanel-chart-selection-item"
           :data-test-selected="selectedChartType === item.id ? item.id : undefined"
         >
@@ -42,12 +41,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <img
               :src="item.image.replace('img:', '')"
               :alt="item.title"
-              class="mx-auto my-2"
-              style="width: 24px; height: 24px;"
+              class="mx-auto my-2 w-6 h-6"
               data-test="dashboard-addpanel-chart-selection-icon"
             />
-            <OTooltip
-              style="text-align: center"
+            <OTooltip class="text-center"
               :content="item.title"
               data-test="dashboard-addpanel-chart-selection-tooltip"
             />
diff --git a/web/src/components/dashboards/addPanel/ColorBySeries.vue b/web/src/components/dashboards/addPanel/ColorBySeries.vue
index c3920b979a..4f64f078e1 100644
--- a/web/src/components/dashboards/addPanel/ColorBySeries.vue
+++ b/web/src/components/dashboards/addPanel/ColorBySeries.vue
@@ -17,8 +17,7 @@
 <template>
   <div>
     <div
-      class="mb-2"
-      style="font-weight: 600; display: flex; align-items: center"
+      class="mb-2 font-semibold flex items-center"
     >
       <span>{{ t("dashboard.colorBySeriesTitle") }}</span>
       <OButton
diff --git a/web/src/components/dashboards/addPanel/ColorBySeriesPopUp.schema.ts b/web/src/components/dashboards/addPanel/ColorBySeriesPopUp.schema.ts
index 39dcf11c61..988c030482 100644
--- a/web/src/components/dashboards/addPanel/ColorBySeriesPopUp.schema.ts
+++ b/web/src/components/dashboards/addPanel/ColorBySeriesPopUp.schema.ts
@@ -2,20 +2,16 @@
 //
 // Validation schema for ColorBySeriesPopUp.vue. The whole form is the dynamic
 // `series[]` array — each row needs a non-empty `value` (series name) and a
-// non-null `color`. This replaces the old `isFormValid` computed that *disabled*
-// the Save button (an R3 violation); now the schema gates submit and Save stays
-// enabled.
+// non-null `color`.
 //
 // An EMPTY array is intentionally VALID: removing every row and saving clears
-// all per-series colors (the pre-revamp behavior — the old `isFormValid` used
-// `[].every(...)`, which is `true` for an empty array). So NO `.min(1)` here;
-// only the per-row rules apply to rows that exist.
+// all per-series colors. So NO `.min(1)` here; only the per-row rules apply to
+// rows that exist.
 //
 // Each row's `value` is an OFormCombobox and `color` an OFormColor, both bound by
-// indexed name (`series[i].value/color`); the owner reads the rows via
-// form.useStore (no mirror). `color` is null until the user clicks "Set color"
-// (enforced non-null below), so the required-color rule applies even before the
-// picker is shown.
+// indexed name (`series[i].value/color`). `color` is null until the user clicks
+// "Set color" (enforced non-null below), so the required-color rule applies even
+// before the picker is shown.
 
 import { z } from "zod";
 
@@ -40,7 +36,7 @@ export const makeSeriesRowSchema = (t: (_key: string) => string) =>
 export const makeColorBySeriesPopUpSchema = (t: (_key: string) => string) =>
   z.object({
     // No `.min(1)`: an empty array is valid (saving with no rows clears all
-    // per-series colors, matching pre-revamp behavior).
+    // per-series colors).
     series: z.array(makeSeriesRowSchema(t)),
   });
 
diff --git a/web/src/components/dashboards/addPanel/ColorBySeriesPopUp.vue b/web/src/components/dashboards/addPanel/ColorBySeriesPopUp.vue
index 14acb446f1..96c117b824 100644
--- a/web/src/components/dashboards/addPanel/ColorBySeriesPopUp.vue
+++ b/web/src/components/dashboards/addPanel/ColorBySeriesPopUp.vue
@@ -258,7 +258,7 @@ export default defineComponent({
     // Method to open color picker directly
     const openColorPicker = (index: number) => {
       // This method is called when the colorize icon is clicked
-      // The color picker should open automatically due to q-popup-proxy
+      // The color picker should open automatically via its popup proxy
     };
 
     return {
diff --git a/web/src/components/dashboards/addPanel/ColorPaletteDropDown.spec.ts b/web/src/components/dashboards/addPanel/ColorPaletteDropDown.spec.ts
index 68a0bdf3ec..6b710384c6 100644
--- a/web/src/components/dashboards/addPanel/ColorPaletteDropDown.spec.ts
+++ b/web/src/components/dashboards/addPanel/ColorPaletteDropDown.spec.ts
@@ -463,7 +463,7 @@ describe("ColorPaletteDropDown", () => {
       expect(flexContainer.classes()).toContain("items-center");
     });
 
-    it("should render q-select with correct props", () => {
+    it("should render the select with correct props", () => {
       const select = wrapper.find("[data-test='color-palette-select']");
       expect(select.exists()).toBeTruthy();
     });
diff --git a/web/src/components/dashboards/addPanel/ColorPaletteDropDown.vue b/web/src/components/dashboards/addPanel/ColorPaletteDropDown.vue
index 1b12953695..0794164667 100644
--- a/web/src/components/dashboards/addPanel/ColorPaletteDropDown.vue
+++ b/web/src/components/dashboards/addPanel/ColorPaletteDropDown.vue
@@ -41,9 +41,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               />
             </span>
             <span
-              class="flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-sm"
-              :style="{ color: 'var(--color-text-primary)' }"
-              >{{ selectedOptionLabel }}</span
+              class="flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-sm text-text-body"
+            >{{ selectedOptionLabel }}</span
             >
           </div>
         </template>
@@ -71,7 +70,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </span>
               <span
                 class="flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap"
-                >{{ opt.label }}</span
+              >{{ opt.label }}</span
               >
             </div>
           </OSelectItem>
@@ -91,13 +90,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <div class="flex items-center gap-1.5 w-full min-w-0">
               <span
                 v-if="opt.colorPalette?.length"
-                class="block w-10 h-2 rounded-[0.1875rem] flex-shrink-0"
+                class="block w-10 h-2 rounded-default flex-shrink-0"
                 aria-hidden="true"
                 :style="{ background: `linear-gradient(to right, ${opt.colorPalette.join(', ')})` }"
               />
               <span
                 class="flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap"
-                >{{ opt.label }}</span
+              >{{ opt.label }}</span
               >
             </div>
           </OSelectItem>
@@ -107,12 +106,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <!-- color picker for fixed and shades typed color mode -->
       <div
         v-if="['fixed', 'shades'].includes(dashboardPanelData.data.config.color.mode)"
-        class="inline-flex items-center flex-shrink-0 mt-[1.875rem] ml-1.5 relative"
+        class="inline-flex items-center flex-shrink-0 mt-7.5 ml-1.5 relative"
         data-test="dashboard-color-palette-color-input-wrapper"
       >
         <button
           type="button"
-          class="w-8 h-8 rounded-full cursor-pointer flex-shrink-0 transition-[box-shadow,border-color] duration-200 ease border-2 border-solid [border-color:var(--color-border-default)] hover:[border-color:var(--color-button-primary)] hover:[box-shadow:0_0_0_0.125rem_var(--color-button-primary-focus-ring)] focus-visible:[outline:2px_solid_var(--color-button-primary-focus-ring)] focus-visible:outline-offset-[0.125rem]"
+          class="w-8 h-8 rounded-full cursor-pointer flex-shrink-0 transition-[box-shadow,border-color] duration-200 ease border-2 border-solid border-border-default hover:border-button-primary hover:ring-2 hover:ring-button-primary-focus-ring focus-visible:outline-2 focus-visible:outline-button-primary-focus-ring focus-visible:outline-offset-2"
           :aria-label="`Panel color: ${dashboardPanelData.data.config.color.fixedColor[0]}`"
           :style="{ background: dashboardPanelData.data.config.color.fixedColor[0] }"
           data-test="dashboard-color-palette-swatch-btn"
@@ -319,8 +318,3 @@ export default defineComponent({
   },
 });
 </script>
-<style>
-.selectedLabel span {
-  text-transform: none !important;
-}
-</style>
diff --git a/web/src/components/dashboards/addPanel/ColumnOrderPopUp.vue b/web/src/components/dashboards/addPanel/ColumnOrderPopUp.vue
index 7079700679..ef6ec5c5c9 100644
--- a/web/src/components/dashboards/addPanel/ColumnOrderPopUp.vue
+++ b/web/src/components/dashboards/addPanel/ColumnOrderPopUp.vue
@@ -28,17 +28,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   >
     <!-- Content -->
     <div>
-      <div class="text-xs text-gray-400 mb-3" data-test="dashboard-column-order-description">
+      <div class="text-xs text-text-secondary mb-3" data-test="dashboard-column-order-description">
         {{ t("dashboard.columnOrderDescription") }}
       </div>
 
       <!-- Empty state -->
       <div
         v-if="!editColumnOrder || editColumnOrder.length === 0"
-        class="text-center p-6 text-gray-400"
+        class="text-center p-6 text-text-muted"
         data-test="dashboard-column-order-empty-state"
       >
-        <OIcon name="view-column" class="mb-3" style="width: 48px; height: 48px;" />
+        <OIcon name="view-column" class="mb-3 w-12 h-12" />
         <div class="text-base">{{ t("dashboard.noColumnsOrdered") }}</div>
         <div class="text-xs">
           {{ t("dashboard.columnsDefaultOrder") }}
@@ -56,7 +56,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <div
           v-for="(column, index) in editColumnOrder"
           :key="`column-${index}`"
-          class="flex items-center px-3 py-2 mb-1 border-b border-[#cccccc70] transition-colors hover:bg-black/[0.02] last:border-b-0 dark:border-b-[rgba(255,255,255,0.12)] dark:hover:bg-[rgba(255,255,255,0.05)]"
+          class="flex items-center px-3 py-2 mb-1 border-b border-border-default transition-colors hover:bg-surface-subtle-hover last:border-b-0"
           :data-test="`column-order-row-${index}`"
         >
           <!-- Drag handle -->
@@ -69,10 +69,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </div>
 
           <!-- Column number -->
-          <div class="min-w-8 font-medium text-[13px] text-[#666] dark:text-[#aaa]" data-test="dashboard-column-order-column-number">{{ index + 1 }}.</div>
+          <div class="min-w-8 font-medium text-compact text-text-secondary" data-test="dashboard-column-order-column-number">{{ index + 1 }}.</div>
 
           <!-- Column name -->
-          <div class="flex-1 font-medium overflow-hidden text-ellipsis whitespace-nowrap text-[13px]" data-test="dashboard-column-order-column-name">{{ column }}</div>
+          <div class="flex-1 font-medium overflow-hidden text-ellipsis whitespace-nowrap text-compact" data-test="dashboard-column-order-column-name">{{ column }}</div>
 
           <!-- Actions -->
           <div class="flex gap-0.5 ml-2" data-test="dashboard-column-order-column-actions">
diff --git a/web/src/components/dashboards/addPanel/CommonAutoComplete.spec.ts b/web/src/components/dashboards/addPanel/CommonAutoComplete.spec.ts
deleted file mode 100644
index 90a6fda38d..0000000000
--- a/web/src/components/dashboards/addPanel/CommonAutoComplete.spec.ts
+++ /dev/null
@@ -1,663 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// Licensed under the GNU Affero General Public License, Version 3.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//     https://www.gnu.org/licenses/agpl-3.0.en.html
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import { describe, expect, it, beforeEach, vi, afterEach } from "vitest";
-import { mount, flushPromises } from "@vue/test-utils";
-import CommonAutoComplete from "./CommonAutoComplete.vue";
-// Mock store
-const mockStore = {
-  state: {
-    theme: "light",
-  },
-};
-
-// Mock the composable
-let mockFilteredOptions = [
-  { label: "Option 1", value: "opt1" },
-  { label: "Option 2", value: "opt2" },
-];
-
-const mockFilterFn = vi.fn();
-
-vi.mock("@/composables/useSearchInputUsingRegex", () => ({
-  useSearchInputUsingRegex: vi.fn(() => ({
-    filterFn: mockFilterFn,
-    filteredOptions: mockFilteredOptions,
-  })),
-}));
-
-// Mock Vuex useStore
-vi.mock("vuex", () => ({
-  useStore: () => mockStore,
-}));
-
-// Mock console methods
-global.console = {
-  ...console,
-  error: vi.fn(),
-  warn: vi.fn(),
-  log: vi.fn()
-};
-
-const node = document.createElement("div");
-node.setAttribute("id", "app");
-document.body.appendChild(node);
-
-
-describe("CommonAutoComplete", () => {
-  let wrapper: any;
-
-  const defaultProps = {
-    modelValue: "",
-    label: "Test Label",
-    items: [
-      { label: "Option 1", value: "opt1" },
-      { label: "Option 2", value: "opt2" },
-      { label: "Option 3", value: "opt3" },
-    ],
-    searchRegex: "",
-  };
-
-  const createWrapper = (props = {}, slots = {}) => {
-    return mount(CommonAutoComplete, {
-      attachTo: "#app",
-      props: { ...defaultProps, ...props },
-      slots,
-      global: {
-        plugins: [],
-        provide: {
-          store: mockStore,
-        },
-        stubs: {
-          "OInput": {
-            name: "OInput",
-            template: `
-              <div class="o-input-stub" :data-test="$attrs['data-test']">
-                <input
-                  data-test="o-input-native"
-                  :value="modelValue"
-                  @input="$emit('update:modelValue', $event.target.value)"
-                  @focus="$emit('focus', $event)"
-                  @blur="$emit('blur', $event)"
-                />
-                <label data-test="o-input-label" v-if="label">{{ label }}</label>
-                <slot name="label"></slot>
-              </div>
-            `,
-            props: ["modelValue", "label"],
-            emits: ["update:modelValue", "focus", "blur"],
-            inheritAttrs: false,
-          },
-        },
-      },
-    });
-  };
-
-  beforeEach(() => {
-    mockStore.state.theme = "light";
-    mockFilterFn.mockClear();
-    mockFilteredOptions = [
-      { label: "Option 1", value: "opt1" },
-      { label: "Option 2", value: "opt2" },
-    ];
-  });
-
-  afterEach(() => {
-    if (wrapper) {
-      wrapper.unmount();
-    }
-    vi.clearAllMocks();
-  });
-
-  describe("Component Initialization", () => {
-    it("should render the component", () => {
-      wrapper = createWrapper();
-      expect(wrapper.exists()).toBeTruthy();
-    });
-
-    it("should have correct component name", () => {
-      wrapper = createWrapper();
-      expect(wrapper.vm.$options.name).toBe("CommonAutoComplete");
-    });
-
-    it("should have correct data-test attribute", () => {
-      wrapper = createWrapper();
-      const input = wrapper.find("[data-test='common-auto-complete']");
-      expect(input.exists()).toBeTruthy();
-    });
-
-    it("should initialize showOptions as false", () => {
-      wrapper = createWrapper();
-      expect(wrapper.vm.showOptions).toBe(false);
-    });
-
-    it("should sync inputValue with modelValue prop", () => {
-      wrapper = createWrapper({ modelValue: "test value" });
-      expect(wrapper.vm.inputValue).toBe("test value");
-    });
-  });
-
-  describe("Props Handling", () => {
-    it("should handle modelValue prop", () => {
-      wrapper = createWrapper({ modelValue: "initial value" });
-      expect(wrapper.vm.inputValue).toBe("initial value");
-    });
-
-    it("should handle label prop", () => {
-      wrapper = createWrapper({ label: "Custom Label" });
-      const label = wrapper.find('[data-test="o-input-label"]');
-      expect(label.text()).toBe("Custom Label");
-    });
-
-    it("should handle items prop", () => {
-      const customItems = [
-        { label: "Custom 1", value: "c1" },
-        { label: "Custom 2", value: "c2" },
-      ];
-      wrapper = createWrapper({ items: customItems });
-      expect(wrapper.props("items")).toEqual(customItems);
-    });
-
-    it("should use default valueReplaceFn", () => {
-      wrapper = createWrapper();
-      const result = wrapper.vm.$props.valueReplaceFn("test");
-      expect(result).toBe("test");
-    });
-
-    it("should use custom valueReplaceFn", () => {
-      const customFn = (value: string) => `custom_${value}`;
-      wrapper = createWrapper({ valueReplaceFn: customFn });
-      const result = wrapper.vm.$props.valueReplaceFn("test");
-      expect(result).toBe("custom_test");
-    });
-  });
-
-  describe("Input Behavior", () => {
-    beforeEach(() => {
-      wrapper = createWrapper();
-    });
-
-    it("should emit update:modelValue when input changes", async () => {
-      const input = wrapper.find('[data-test="o-input-native"]');
-      await input.setValue("new value");
-      
-      expect(wrapper.emitted("update:modelValue")).toBeTruthy();
-      expect(wrapper.emitted("update:modelValue")[0]).toEqual(["new value"]);
-    });
-
-    it("should call fieldsFilterFn when input changes via onModelValueChanged", () => {
-      wrapper.vm.onModelValueChanged("test");
-      expect(mockFilterFn).toHaveBeenCalledWith("test");
-    });
-
-    it("should show options on focus", async () => {
-      const input = wrapper.find('[data-test="o-input-native"]');
-      await input.trigger("focus");
-      
-      expect(wrapper.vm.showOptions).toBe(true);
-    });
-
-    it("should hide options on blur", async () => {
-      wrapper.vm.showOptions = true;
-      const input = wrapper.find('[data-test="o-input-native"]');
-      await input.trigger("blur");
-      
-      expect(wrapper.vm.showOptions).toBe(false);
-    });
-  });
-
-  describe("Options Display", () => {
-    it("should show options container when showOptions is true and options exist", async () => {
-      wrapper = createWrapper();
-      wrapper.vm.showOptions = true;
-      await wrapper.vm.$nextTick();
-      
-      const optionsContainer = wrapper.find('[data-test="common-auto-complete-options-container"]');
-      expect(optionsContainer.exists()).toBeTruthy();
-    });
-
-    it("should not show options container when showOptions is false", async () => {
-      wrapper = createWrapper();
-      wrapper.vm.showOptions = false;
-      await wrapper.vm.$nextTick();
-      
-      const optionsContainer = wrapper.find('[data-test="common-auto-complete-options-container"]');
-      expect(optionsContainer.exists()).toBeFalsy();
-    });
-
-    it("should not show options when no filtered options", async () => {
-      mockFilteredOptions = [];
-      wrapper = createWrapper();
-      wrapper.vm.showOptions = true;
-      await wrapper.vm.$nextTick();
-      
-      const optionsContainer = wrapper.find('[data-test="common-auto-complete-options-container"]');
-      expect(optionsContainer.exists()).toBeFalsy();
-    });
-
-    it("should render filtered options", async () => {
-      wrapper = createWrapper();
-      wrapper.vm.showOptions = true;
-      await wrapper.vm.$nextTick();
-      
-      const options = wrapper.findAll("[data-test='common-auto-complete-option']");
-      expect(options.length).toBe(mockFilteredOptions.length);
-    });
-
-    it("should display option labels correctly", async () => {
-      wrapper = createWrapper();
-      wrapper.vm.showOptions = true;
-      await wrapper.vm.$nextTick();
-      
-      const options = wrapper.findAll('[data-test="common-auto-complete-option"]');
-      options.forEach((option, index) => {
-        expect(option.text()).toBe(mockFilteredOptions[index].label);
-      });
-    });
-  });
-
-  describe("Option Selection", () => {
-    beforeEach(async () => {
-      wrapper = createWrapper();
-      wrapper.vm.showOptions = true;
-      await wrapper.vm.$nextTick();
-    });
-
-    it("should emit update:modelValue when option is selected", async () => {
-      const option = wrapper.find('[data-test="common-auto-complete-option"]');
-      await option.trigger("mousedown");
-      
-      expect(wrapper.emitted("update:modelValue")).toBeTruthy();
-      expect(wrapper.emitted("update:modelValue")[0]).toEqual([mockFilteredOptions[0].value]);
-    });
-
-    it("should hide options when option is selected", async () => {
-      const option = wrapper.find('[data-test="common-auto-complete-option"]');
-      await option.trigger("mousedown");
-      
-      expect(wrapper.vm.showOptions).toBe(false);
-    });
-
-    it("should use valueReplaceFn when selecting option", async () => {
-      const customFn = vi.fn((value) => `processed_${value}`);
-      wrapper = createWrapper({ valueReplaceFn: customFn });
-      wrapper.vm.showOptions = true;
-      await wrapper.vm.$nextTick();
-      
-      const option = wrapper.find('[data-test="common-auto-complete-option"]');
-      await option.trigger("mousedown");
-      
-      expect(customFn).toHaveBeenCalledWith(mockFilteredOptions[0].value);
-      expect(wrapper.emitted("update:modelValue")[0]).toEqual([`processed_${mockFilteredOptions[0].value}`]);
-    });
-
-    it("should handle selectOption method call", () => {
-      const testOption = { label: "Test", value: "test" };
-      wrapper.vm.selectOption(testOption);
-      
-      expect(wrapper.emitted("update:modelValue")).toBeTruthy();
-      expect(wrapper.vm.showOptions).toBe(false);
-    });
-  });
-
-  describe("Theme Support", () => {
-    it("should use light theme background by default", async () => {
-      mockStore.state.theme = "light";
-      wrapper = createWrapper();
-      wrapper.vm.showOptions = true;
-      await wrapper.vm.$nextTick();
-      
-      const optionsContainer = wrapper.find('[data-test="common-auto-complete-options-container"]');
-      expect(optionsContainer.attributes("style")).toContain("background-color: white");
-    });
-
-    it("should use dark theme background when theme is dark", async () => {
-      mockStore.state.theme = "dark";
-      wrapper = createWrapper();
-      wrapper.vm.showOptions = true;
-      await wrapper.vm.$nextTick();
-      
-      const optionsContainer = wrapper.find('[data-test="common-auto-complete-options-container"]');
-      const style = optionsContainer.attributes("style");
-      // Check for either hex or rgb format of the same dark color
-      expect(style).toMatch(/(background-color: #2d2d2d|background-color: rgb\(45, 45, 45\))/);
-    });
-  });
-
-  describe("Slots", () => {
-    it("should render label slot when provided", () => {
-      wrapper = createWrapper({}, {
-        label: '<span data-test="custom-label">Custom Label</span>',
-      });
-
-      const customLabel = wrapper.find('[data-test="custom-label"]');
-      expect(customLabel.exists()).toBeTruthy();
-      expect(customLabel.text()).toBe("Custom Label");
-    });
-
-    it("should detect slot presence correctly", () => {
-      wrapper = createWrapper({}, {
-        label: '<span>Custom Label</span>',
-      });
-      
-      expect(wrapper.vm.hasSlot("label")).toBe(true);
-      expect(wrapper.vm.hasSlot("nonexistent")).toBe(false);
-    });
-
-    it("should not render label slot template when no slot", () => {
-      wrapper = createWrapper();
-      expect(wrapper.vm.hasSlot("label")).toBe(false);
-    });
-  });
-
-  describe("Watchers", () => {
-    it("should sync inputValue when modelValue prop changes", async () => {
-      wrapper = createWrapper({ modelValue: "initial" });
-      expect(wrapper.vm.inputValue).toBe("initial");
-      
-      await wrapper.setProps({ modelValue: "updated" });
-      expect(wrapper.vm.inputValue).toBe("updated");
-    });
-
-    it("should call fieldsFilterFn when inputValue changes", async () => {
-      wrapper = createWrapper();
-      
-      // Clear previous calls
-      mockFilterFn.mockClear();
-      
-      // Simulate input value change by triggering the watcher manually
-      wrapper.vm.onModelValueChanged("test");
-      
-      expect(mockFilterFn).toHaveBeenCalledWith("test");
-    });
-  });
-
-  describe("Event Handling", () => {
-    it("should handle onModelValueChanged correctly", () => {
-      wrapper = createWrapper();
-      
-      wrapper.vm.onModelValueChanged("new value");
-      
-      expect(wrapper.emitted("update:modelValue")).toBeTruthy();
-      expect(wrapper.emitted("update:modelValue")[0]).toEqual(["new value"]);
-      expect(mockFilterFn).toHaveBeenCalledWith("new value");
-    });
-
-    it("should hide options correctly", () => {
-      wrapper = createWrapper();
-      wrapper.vm.showOptions = true;
-      
-      wrapper.vm.hideOptions();
-      
-      expect(wrapper.vm.showOptions).toBe(false);
-    });
-  });
-
-  describe("Styling and Layout", () => {
-    it("should have relative container", () => {
-      wrapper = createWrapper();
-      const container = wrapper.find('[data-test="common-auto-complete-container"]');
-      expect(container.exists()).toBeTruthy();
-      expect(container.classes()).toContain("relative");
-    });
-
-    it("should have correct container styling", () => {
-      wrapper = createWrapper();
-      const container = wrapper.find('[data-test="common-auto-complete-container"]');
-      expect(container.exists()).toBeTruthy();
-      expect(container.attributes("style")).toContain("margin-top: 5px");
-    });
-
-    it("should apply option styling", async () => {
-      wrapper = createWrapper();
-      wrapper.vm.showOptions = true;
-      await wrapper.vm.$nextTick();
-      
-      const options = wrapper.findAll('[data-test="common-auto-complete-option"]');
-      expect(options.length).toBeGreaterThan(0);
-      options.forEach(option => {
-        expect(option.classes()).toContain("p-2");
-        expect(option.classes()).toContain("cursor-pointer");
-      });
-    });
-  });
-
-  describe("Error Handling", () => {
-    it("should handle empty items array", () => {
-      expect(() => {
-        wrapper = createWrapper({ items: [] });
-      }).not.toThrow();
-    });
-
-    it("should handle null props gracefully", () => {
-      expect(() => {
-        wrapper = createWrapper({
-          modelValue: null,
-          label: null,
-          items: null,
-        });
-      }).not.toThrow();
-    });
-
-    it("should handle undefined option in selectOption", () => {
-      wrapper = createWrapper();
-      
-      expect(() => {
-        wrapper.vm.selectOption(undefined);
-      }).not.toThrow();
-    });
-
-    it("should handle option with undefined value", () => {
-      wrapper = createWrapper();
-      const optionWithUndefined = { label: "Test", value: undefined };
-      
-      wrapper.vm.selectOption(optionWithUndefined);
-      
-      expect(wrapper.emitted("update:modelValue")).toBeTruthy();
-    });
-  });
-
-  describe("Integration", () => {
-    it("should work with different search regex", () => {
-      wrapper = createWrapper({ searchRegex: "^test" });
-      expect(wrapper.props("searchRegex")).toBe("^test");
-    });
-
-    it("should maintain state across interactions", async () => {
-      wrapper = createWrapper();
-      
-      // Focus to show options
-      const input = wrapper.find('[data-test="o-input-native"]');
-      await input.trigger("focus");
-      expect(wrapper.vm.showOptions).toBe(true);
-      
-      // Type to filter
-      await input.setValue("test");
-      expect(wrapper.emitted("update:modelValue")).toBeTruthy();
-      
-      // Blur to hide
-      await input.trigger("blur");
-      expect(wrapper.vm.showOptions).toBe(false);
-    });
-
-    it("should handle form-like behavior", async () => {
-      wrapper = createWrapper();
-      
-      const input = wrapper.find('[data-test="o-input-native"]');
-      
-      // Focus and show options
-      await input.trigger("focus");
-      wrapper.vm.showOptions = true;
-      await wrapper.vm.$nextTick();
-      
-      // Select option
-      const option = wrapper.find('[data-test="common-auto-complete-option"]');
-      await option.trigger("mousedown");
-      
-      expect(wrapper.vm.showOptions).toBe(false);
-      expect(wrapper.emitted("update:modelValue")).toBeTruthy();
-    });
-  });
-
-  describe("Component Lifecycle", () => {
-    it("should initialize correctly", () => {
-      wrapper = createWrapper();
-      
-      expect(wrapper.vm.showOptions).toBe(false);
-      expect(wrapper.vm.inputValue).toBe("");
-      expect(wrapper.vm.fieldsFilterFn).toBe(mockFilterFn);
-      expect(wrapper.vm.onModelValueChanged).toBeInstanceOf(Function);
-      expect(wrapper.vm.selectOption).toBeInstanceOf(Function);
-      expect(wrapper.vm.hideOptions).toBeInstanceOf(Function);
-      expect(wrapper.vm.hasSlot).toBeInstanceOf(Function);
-    });
-
-    it("should cleanup properly on unmount", () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm;
-      
-      wrapper.unmount();
-      
-      expect(() => vm.showOptions).not.toThrow();
-    });
-
-    it("should maintain reactivity", async () => {
-      wrapper = createWrapper();
-      
-      // Test reactivity
-      wrapper.vm.showOptions = true;
-      await wrapper.vm.$nextTick();
-      expect(wrapper.find('[data-test="common-auto-complete-options-container"]').exists()).toBeTruthy();
-      
-      wrapper.vm.showOptions = false;
-      await wrapper.vm.$nextTick();
-      expect(wrapper.find('[data-test="common-auto-complete-options-container"]').exists()).toBeFalsy();
-    });
-  });
-
-  describe("Accessibility", () => {
-    it("should have proper input attributes", () => {
-      wrapper = createWrapper();
-      const input = wrapper.find("[data-test='common-auto-complete']");
-      
-      expect(input.exists()).toBeTruthy();
-      expect(input.attributes("data-test")).toBe("common-auto-complete");
-    });
-
-    it("should have accessible option elements", async () => {
-      wrapper = createWrapper();
-      wrapper.vm.showOptions = true;
-      await wrapper.vm.$nextTick();
-      
-      const options = wrapper.findAll("[data-test='common-auto-complete-option']");
-      expect(options.length).toBeGreaterThan(0);
-    });
-  });
-
-  describe("Edge Cases", () => {
-    it("should handle rapid focus/blur events", async () => {
-      wrapper = createWrapper();
-      const input = wrapper.find('[data-test="o-input-native"]');
-      
-      for (let i = 0; i < 5; i++) {
-        await input.trigger("focus");
-        await input.trigger("blur");
-      }
-      
-      expect(wrapper.vm.showOptions).toBe(false);
-    });
-
-    it("should handle special characters in input", async () => {
-      wrapper = createWrapper();
-      
-      const specialChars = "!@#$%^&*()";
-      wrapper.vm.onModelValueChanged(specialChars);
-      
-      expect(mockFilterFn).toHaveBeenCalledWith(specialChars);
-    });
-
-    it("should handle empty string input", async () => {
-      wrapper = createWrapper();
-      
-      wrapper.vm.onModelValueChanged("");
-      
-      expect(wrapper.emitted("update:modelValue")).toBeTruthy();
-      expect(mockFilterFn).toHaveBeenCalledWith("");
-    });
-  });
-
-  describe("Select Event Emission", () => {
-    it("should emit select event when option is selected", async () => {
-      wrapper = createWrapper();
-      wrapper.vm.showOptions = true;
-      await wrapper.vm.$nextTick();
-
-      const option = wrapper.find('[data-test="common-auto-complete-option"]');
-      await option.trigger("mousedown");
-
-      expect(wrapper.emitted("select")).toBeTruthy();
-      expect(wrapper.emitted("select")[0]).toEqual([mockFilteredOptions[0].value]);
-    });
-
-    it("should emit both update:modelValue and select events on selection", async () => {
-      wrapper = createWrapper();
-      wrapper.vm.showOptions = true;
-      await wrapper.vm.$nextTick();
-
-      const option = wrapper.find('[data-test="common-auto-complete-option"]');
-      await option.trigger("mousedown");
-
-      // Both events should be emitted
-      expect(wrapper.emitted("update:modelValue")).toBeTruthy();
-      expect(wrapper.emitted("select")).toBeTruthy();
-
-      // Both should have the same value
-      expect(wrapper.emitted("update:modelValue")[0]).toEqual(wrapper.emitted("select")[0]);
-    });
-
-    it("should emit select event with valueReplaceFn applied", async () => {
-      const customFn = vi.fn((value) => `processed_${value}`);
-      wrapper = createWrapper({ valueReplaceFn: customFn });
-      wrapper.vm.showOptions = true;
-      await wrapper.vm.$nextTick();
-
-      const option = wrapper.find('[data-test="common-auto-complete-option"]');
-      await option.trigger("mousedown");
-
-      expect(wrapper.emitted("select")).toBeTruthy();
-      expect(wrapper.emitted("select")[0]).toEqual([`processed_${mockFilteredOptions[0].value}`]);
-    });
-
-    it("should emit select event when selectOption is called directly", () => {
-      wrapper = createWrapper();
-      const testOption = { label: "Test", value: "test-value" };
-
-      wrapper.vm.selectOption(testOption);
-
-      expect(wrapper.emitted("select")).toBeTruthy();
-      expect(wrapper.emitted("select")[0]).toEqual(["test-value"]);
-    });
-
-    it("should emit select event with undefined when option has no value", () => {
-      wrapper = createWrapper();
-      const optionWithUndefined = { label: "Test", value: undefined };
-
-      wrapper.vm.selectOption(optionWithUndefined);
-
-      expect(wrapper.emitted("select")).toBeTruthy();
-      // The valueReplaceFn default is identity, so undefined passes through
-      expect(wrapper.emitted("select")[0]).toEqual([undefined]);
-    });
-  });
-});
\ No newline at end of file
diff --git a/web/src/components/dashboards/addPanel/CommonAutoComplete.vue b/web/src/components/dashboards/addPanel/CommonAutoComplete.vue
deleted file mode 100644
index edf675a7bc..0000000000
--- a/web/src/components/dashboards/addPanel/CommonAutoComplete.vue
+++ /dev/null
@@ -1,139 +0,0 @@
-<template>
-  <div
-    class="relative"
-    style="margin-top: 5px"
-    data-no-autofocus
-    data-test="common-auto-complete-container"
-  >
-    <OInput
-      v-model="inputValue"
-      @update:model-value="onModelValueChanged"
-      :label="label"
-      @focus="onFocus"
-      @blur="hideOptions"
-      v-bind="$attrs"
-      data-test="common-auto-complete"
-    >
-      <template v-if="hasSlot('label')" v-slot:label>
-        <slot name="label"></slot>
-      </template>
-    </OInput>
-    <div
-      class="options-container z-10 absolute left-0 right-0 top-[42px] max-h-25 overflow-y-auto border border-[#ccc]"
-      data-test="common-auto-complete-options-container"
-      v-if="showOptions && fieldsFilteredOptions.length > 0"
-      :style="{
-        'background-color': store.state.theme === 'dark' ? '#2d2d2d' : 'white',
-      }"
-    >
-      <div
-        v-for="(option, index) in fieldsFilteredOptions"
-        :key="index"
-        class="p-2 cursor-pointer hover:bg-[#f0f0f0b1]"
-        @mousedown="selectOption(option)"
-        data-test="common-auto-complete-option"
-      >
-        {{ option.label }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { ref, toRef, defineComponent, watch } from "vue";
-import { useSearchInputUsingRegex } from "@/composables/useSearchInputUsingRegex";
-import { useStore } from "vuex";
-import { useSlots } from "vue";
-import OInput from "@/lib/forms/Input/OInput.vue";
-
-export default defineComponent({
-  name: "CommonAutoComplete",
-  components: { OInput },
-  props: {
-    modelValue: {
-      type: String,
-    },
-    label: {
-      type: String,
-    },
-    items: {
-      // always expected to be in [ { label: "", value: ""}] format, search in label, and replace the value
-      type: Array,
-    },
-    searchRegex: {
-      type: String,
-    },
-    valueReplaceFn: {
-      // special treatment needed to any value replacing function, then this can be used
-      type: Function,
-      default: (selectedValue) => selectedValue,
-    },
-  },
-  emits: ["update:modelValue", "select"],
-  setup(props, { emit }) {
-    const store = useStore();
-    const showOptions = ref(false);
-
-    // this is used to sync with modelvalue and q-input's v-model
-    const inputValue = ref(props.modelValue);
-
-    watch(
-      () => props.modelValue,
-      (newValue) => {
-        inputValue.value = newValue;
-      },
-    );
-
-    watch(inputValue, (newValue) => {
-      fieldsFilterFn(newValue);
-    });
-    // when q-input's model value updated, update the model value which will be synced back to input value
-    const onModelValueChanged = (value) => {
-      emit("update:modelValue", value);
-      fieldsFilterFn(value);
-    };
-
-    const itemsRef = toRef(props, "items");
-    // apply filter on label
-    const { filterFn: fieldsFilterFn, filteredOptions: fieldsFilteredOptions } =
-      useSearchInputUsingRegex(itemsRef, "label", props.searchRegex);
-
-    const hideOptions = () => {
-      showOptions.value = false;
-    };
-
-    const onFocus = () => {
-      showOptions.value = true;
-      // Show all options when focusing (pass empty string to reset filter)
-      // This allows users to see and select from all available options
-      fieldsFilterFn("");
-    };
-
-    // when any item is selected, replace it with the value and hide the options
-    const selectOption = (option) => {
-      const value = props.valueReplaceFn(option?.value);
-      emit("update:modelValue", value);
-      emit("select", value);
-      showOptions.value = false;
-    };
-
-    const slots = useSlots();
-    const hasSlot = (name) => {
-      return !!slots[name];
-    };
-
-    return {
-      showOptions,
-      fieldsFilterFn,
-      fieldsFilteredOptions,
-      hideOptions,
-      onFocus,
-      selectOption,
-      store,
-      onModelValueChanged,
-      inputValue,
-      hasSlot,
-    };
-  },
-});
-</script>
diff --git a/web/src/components/dashboards/addPanel/ConfigPanel.vue b/web/src/components/dashboards/addPanel/ConfigPanel.vue
index 55d983dadb..8a2fbc32ad 100644
--- a/web/src/components/dashboards/addPanel/ConfigPanel.vue
+++ b/web/src/components/dashboards/addPanel/ConfigPanel.vue
@@ -16,7 +16,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <div v-if="dashboardPanelData.data.type == 'custom_chart'" class="pb-8">
-    <div class="max-w-[300px] mx-3">
+    <div class="max-w-75 mx-3">
       <div class="mb-2 font-semibold">
         {{ t("dashboard.description") }}
       </div>
@@ -30,18 +30,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <div v-else class="pb-8">
     <!-- Search bar -->
     <div
-      class="sticky p-1 top-0 z-20 bg-(--o2-card-bg-solid) border-b border-solid border-(--o2-border-color)"
+      class="sticky p-1 top-0 z-20 bg-card-glass-solid border-b border-solid border-card-glass-border"
       data-test="dashboard-config-search-wrapper"
     >
-      <div class="flex flex-nowrap items-center" style="gap: 4px">
+      <div class="flex flex-nowrap items-center gap-1">
         <OButton
           variant="ghost"
           size="icon"
           @click="toggleAllSections"
           data-test="dashboard-config-toggle-all-sections-btn"
         >
-          <template #icon-left
-            ><OIcon
+          <template #icon-left><OIcon
               :name="allSectionsExpanded ? 'unfold-less' : 'unfold-more'"
               size="sm"
           /></template>
@@ -56,8 +55,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       class="column items-center py-4 text-center"
       data-test="dashboard-config-no-results"
     >
-      <OIcon name="search-off" size="md" class="mb-1 text-gray-400" />
-      <div class="text-gray-400 text-xs">
+      <OIcon name="search-off" size="md" class="mb-1 text-icon-color" />
+      <div class="text-text-muted text-xs">
         {{ t("dashboard.configPanelNoResultsFound", { query: searchQuery }) }}
       </div>
     </div>
@@ -73,12 +72,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         }
       "
       :label="t('dashboard.configSectionGeneral')"
-      class="border-t border-solid border-[var(--o2-border-color)]"
+      class="border-t border-solid border-card-glass-border"
     >
       <div class="flex flex-col gap-3 p-2 ml-3 overflow-x-hidden box-border">
         <div
           v-show="isConfigOptionVisible('general', 'description')"
-          class="max-w-[300px]"
+          class="max-w-75"
         >
           <div class="mb-2 font-semibold">
             {{ t("dashboard.description") }}
@@ -162,10 +161,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <OTooltip :content="formattedPickerValue" max-width="320px" />
               </div>
               <OIcon
-                class="mr-1 ml-2 flex-shrink-0"
+                class="mr-1 ml-2 flex-shrink-0 cursor-pointer shrink-0"
                 size="sm"
                 name="close"
-                style="cursor: pointer; flex-shrink: 0"
                 data-test="dashboard-config-cancel-panel-time"
                 @click="onCancelPanelTime"
               />
@@ -176,7 +174,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 size="sm"
                 @click="showTimePicker = true"
                 data-test="dashboard-config-set-panel-time"
-                >{{ t("common.set") }}</OButton
+              >{{ t("common.set") }}</OButton
               >
             </div>
           </div>
@@ -208,7 +206,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         }
       "
       :label="t('dashboard.configSectionPromqlTable')"
-      class="border-t border-solid border-[var(--o2-border-color)]"
+      class="border-t border-solid border-card-glass-border"
     >
       <div class="flex flex-col gap-3 p-2 ml-3 overflow-x-hidden box-border">
         <PromQLChartConfig
@@ -234,7 +232,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         }
       "
       :label="t('dashboard.configSectionGeographic')"
-      class="border-t border-solid border-[var(--o2-border-color)]"
+      class="border-t border-solid border-card-glass-border"
     >
       <div class="flex flex-col gap-3 p-2 ml-3 overflow-x-hidden box-border">
         <PromQLChartConfig :chart-type="dashboardPanelData.data.type" />
@@ -252,7 +250,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         }
       "
       :label="t('dashboard.configSectionLegend')"
-      class="border-t border-solid border-[var(--o2-border-color)]"
+      class="border-t border-solid border-card-glass-border"
     >
       <div class="o2-input flex flex-col gap-3 p-2 ml-3 overflow-x-hidden box-border">
         <OSwitch
@@ -286,14 +284,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           data-test="dashboard-config-legends-scrollable"
         />
 
-        <div
+        <div class="flex gap-2 flex-wrap"
           v-show="isConfigOptionVisible('legend', 'legend-size')"
-          style="display: flex; gap: 8px; flex-wrap: wrap"
         >
           <!-- Legend Width + unit selector -->
           <div
             v-if="shouldShowLegendWidth(dashboardPanelData)"
-            class="flex items-end justify-between gap-[6px] w-full min-w-0"
+            class="flex items-end justify-between gap-1.5 w-full min-w-0"
           >
             <OInput
               v-model.number="legendWidthValue"
@@ -304,7 +301,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               class="flex-1 min-w-0"
             />
             <div
-              class="flex items-center gap-1 mt-[9px] shrink-0"
+              class="flex items-center gap-1 mt-2.25 shrink-0"
               v-if="shouldShowLegendWidthUnitContainer(dashboardPanelData)"
             >
               <OButton
@@ -345,7 +342,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- Legend Height + unit selector -->
           <div
             v-if="shouldShowLegendHeight(dashboardPanelData)"
-            class="flex items-end justify-between gap-[6px] w-full min-w-0"
+            class="flex items-end justify-between gap-1.5 w-full min-w-0"
           >
             <OInput
               v-model.number="legendHeightValue"
@@ -356,7 +353,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               class="flex-1 min-w-0"
             />
             <div
-              class="flex items-center gap-1 mt-[9px] shrink-0"
+              class="flex items-center gap-1 mt-2.25 shrink-0"
               v-if="shouldShowLegendHeightUnitContainer(dashboardPanelData)"
             >
               <OButton
@@ -413,8 +410,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             dashboardPanelData.data.type != 'maps'
           "
           v-show="isConfigOptionVisible('legend', 'promql-legend')"
-          class="showLabelOnTop"
-          style="font-weight: 600"
+          class="showLabelOnTop font-semibold"
         >
           {{ t("dashboard.query") }}
           <OTabs
@@ -482,7 +478,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         }
       "
       :label="t('dashboard.configSectionData')"
-      class="border-t border-solid border-[var(--o2-border-color)]"
+      class="border-t border-solid border-card-glass-border"
     >
       <div class="o2-input flex flex-col gap-3 p-2 ml-3 overflow-x-hidden box-border">
         <OSelect
@@ -543,8 +539,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             dashboardPanelData.data.type != 'geomap' &&
             dashboardPanelData.data.type != 'maps'
           "
-          class="showLabelOnTop"
-          style="font-weight: 600"
+          class="showLabelOnTop font-semibold"
         >
           {{ t("dashboard.query") }}
           <OTabs
@@ -575,7 +570,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           v-show="isConfigOptionVisible('data', 'query-label')"
           class="mt-3"
         >
-          <div class="flex items-center gap-1 mb-2" style="font-weight: 600">
+          <div class="flex items-center gap-1 mb-2 font-semibold">
             {{ t("dashboard.multiSqlQueryLabel") }}
             <OIcon name="info-outline" size="sm" />
             <OTooltip
@@ -728,7 +723,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         }
       "
       :label="t('dashboard.configSectionAxis')"
-      class="border-t border-solid border-[var(--o2-border-color)]"
+      class="border-t border-solid border-card-glass-border"
     >
       <div class="flex flex-col gap-3 p-2 ml-3 overflow-x-hidden box-border">
         <OInput
@@ -830,7 +825,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         }
       "
       :label="t('dashboard.configSectionLabels')"
-      class="border-t border-solid border-[var(--o2-border-color)]"
+      class="border-t border-solid border-card-glass-border"
     >
       <div class="flex flex-col gap-3 p-2 ml-3 overflow-x-hidden box-border">
         <OSelect
@@ -942,7 +937,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         }
       "
       :label="t('dashboard.configSectionLineStyle')"
-      class="border-t border-solid border-[var(--o2-border-color)]"
+      class="border-t border-solid border-card-glass-border"
     >
       <div class="o2-input flex flex-col gap-3 p-2 ml-3 overflow-x-hidden box-border">
         <OSelect
@@ -1003,7 +998,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         }
       "
       :label="t('dashboard.configSectionTable')"
-      class="border-t border-solid border-[var(--o2-border-color)]"
+      class="border-t border-solid border-card-glass-border"
     >
       <div class="flex flex-col gap-3 p-2 ml-3 overflow-x-hidden box-border">
         <OSwitch
@@ -1083,7 +1078,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         }
       "
       :label="t('dashboard.configSectionPivotTable')"
-      class="border-t border-solid border-[var(--o2-border-color)]"
+      class="border-t border-solid border-card-glass-border"
     >
       <div class="flex flex-col gap-3 p-2 ml-3 overflow-x-hidden box-border">
         <OSwitch
@@ -1203,7 +1198,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           expandedSections.valueTransformations = v;
         }
       "
-      class="border-t border-solid border-[var(--o2-border-color)]"
+      class="border-t border-solid border-card-glass-border"
     >
       <template #trigger>
         <span class="text-sm font-medium">{{
@@ -1231,7 +1226,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           expandedSections.fieldOverrides = v;
         }
       "
-      class="border-t border-solid border-[var(--o2-border-color)]"
+      class="border-t border-solid border-card-glass-border"
     >
       <template #trigger>
         <span class="text-sm font-medium">{{
@@ -1266,7 +1261,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         }
       "
       :label="t('dashboard.configSectionMap')"
-      class="border-t border-solid border-[var(--o2-border-color)]"
+      class="border-t border-solid border-card-glass-border"
     >
       <div class="o2-input flex flex-col gap-3 p-2 ml-3 overflow-x-hidden box-border">
         <div v-if="dashboardPanelData.data.type == 'maps'">
@@ -1455,7 +1450,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         }
       "
       :label="t('dashboard.configSectionGauge')"
-      class="border-t border-solid border-[var(--o2-border-color)]"
+      class="border-t border-solid border-card-glass-border"
     >
       <div class="flex flex-col gap-3 p-2 ml-3 overflow-x-hidden box-border">
         <OInput
@@ -1520,7 +1515,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         }
       "
       :label="t('dashboard.configSectionLayout')"
-      class="border-t border-solid border-[var(--o2-border-color)]"
+      class="border-t border-solid border-card-glass-border"
     >
       <div class="flex flex-col gap-3 p-2 ml-3 overflow-x-hidden box-border">
         <div v-show="isConfigOptionVisible('layout', 'trellis-layout')">
@@ -1649,7 +1644,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         }
       "
       :label="t('dashboard.configSectionColors')"
-      class="border-t border-solid border-[var(--o2-border-color)]"
+      class="border-t border-solid border-card-glass-border"
     >
       <div class="flex flex-col gap-3 p-2 ml-3 overflow-x-hidden box-border">
         <ColorPaletteDropDown />
@@ -1668,7 +1663,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           expandedSections.drilldown = v;
         }
       "
-      class="border-t border-solid border-[var(--o2-border-color)]"
+      class="border-t border-solid border-card-glass-border"
     >
       <template #trigger>
         <span class="text-sm font-medium">{{
@@ -1706,7 +1701,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           expandedSections.comparison = v;
         }
       "
-      class="border-t border-solid border-[var(--o2-border-color)]"
+      class="border-t border-solid border-card-glass-border"
     >
       <template #trigger>
         <span class="text-sm font-medium">{{
@@ -1741,22 +1736,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :isFirstEntry="false"
             />
             <OIcon
-              class="mr-1 ml-2"
+              class="mr-1 ml-2 cursor-pointer"
               size="sm"
               name="close"
-              style="cursor: pointer"
               @click="removeTimeShift(index)"
               :data-test="`dashboard-addpanel-config-time-shift-remove-${index}`"
             />
           </div>
         </div>
-        <div style="align-self: flex-start">
+        <div class="self-start">
           <OButton
             variant="outline"
             size="sm"
             @click="addTimeShift"
             data-test="dashboard-addpanel-config-time-shift-add-btn"
-            >{{ t("dashboard.addButton") }}</OButton
+          >{{ t("dashboard.addButton") }}</OButton
           >
         </div>
       </div>
@@ -1773,7 +1767,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           expandedSections.markLines = v;
         }
       "
-      class="border-t border-solid border-[var(--o2-border-color)]"
+      class="border-t border-solid border-card-glass-border"
     >
       <template #trigger>
         <span class="text-sm font-medium">{{
@@ -1806,7 +1800,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         }
       "
       :label="t('dashboard.configSectionBackground')"
-      class="border-t border-solid border-[var(--o2-border-color)]"
+      class="border-t border-solid border-card-glass-border"
     >
       <div class="flex flex-col gap-3 p-2 ml-3 overflow-x-hidden box-border">
         <BackGroundColorConfig />
@@ -2553,7 +2547,7 @@ export default defineComponent({
     );
     // When pivot mode activates: disable conflicting features and
     // initialize pivot config values (undefined ? false defaults).
-    // Without this, q-toggle shows undefined as OFF but conversion
+    // Without this, the toggle shows undefined as OFF but conversion
     // may treat undefined differently — causing a mismatch.
     watch(
       () => isPivotMode.value,
@@ -2726,8 +2720,10 @@ export default defineComponent({
 });
 </script>
 
-<style>
-.panel-time-picker-btn .date-time-button .date-time-label {
+<style scoped>
+/* keep(lib-override:DateTimePicker): truncate the picker label and size the arrow
+   inside the date-time button — targets the picker's internal DOM via :deep(). */
+.panel-time-picker-btn :deep(.date-time-button .date-time-label) {
   flex: 1 1 0;
   min-width: 0;
   overflow: hidden;
@@ -2735,8 +2731,8 @@ export default defineComponent({
   white-space: nowrap;
 }
 
-.panel-time-picker-btn .date-time-button .date-time-arrow {
+.panel-time-picker-btn :deep(.date-time-button .date-time-arrow) {
   flex-shrink: 0;
-  font-size: 18px !important;
+  font-size: var(--text-lg) !important;
 }
 </style>
diff --git a/web/src/components/dashboards/addPanel/ConfigPanelSearch.spec.ts b/web/src/components/dashboards/addPanel/ConfigPanelSearch.spec.ts
index 3b0cbcb6bc..f7ce8b8c0c 100644
--- a/web/src/components/dashboards/addPanel/ConfigPanelSearch.spec.ts
+++ b/web/src/components/dashboards/addPanel/ConfigPanelSearch.spec.ts
@@ -51,7 +51,7 @@ describe("ConfigPanelSearch", () => {
   // -------------------------------------------------------------------------
 
   describe("rendering", () => {
-    it("renders a q-input element", () => {
+    it("renders a search input element", () => {
       expect(wrapper.find("#dashboard-config-panel-search-input").exists()).toBe(true);
     });
 
diff --git a/web/src/components/dashboards/addPanel/CustomChartEditor.spec.ts b/web/src/components/dashboards/addPanel/CustomChartEditor.spec.ts
index 1da664d136..7824de5030 100644
--- a/web/src/components/dashboards/addPanel/CustomChartEditor.spec.ts
+++ b/web/src/components/dashboards/addPanel/CustomChartEditor.spec.ts
@@ -105,11 +105,12 @@ describe("CustomChartEditor", () => {
       wrapper = createWrapper();
 
       const container = wrapper.find('[data-test="dashboard-custom-chart-editor-container"]');
-      const style = container.element.getAttribute("style");
+      // Inline width/height/overflow are now utilities.
+      const classes = container.classes();
 
-      expect(style).toContain("width: 100%");
-      expect(style).toContain("height: 100%");
-      expect(style).toContain("overflow: hidden");
+      expect(classes).toContain("w-full");
+      expect(classes).toContain("h-full");
+      expect(classes).toContain("overflow-hidden");
     });
 
     it("should render inner container with correct height", () => {
@@ -117,9 +118,9 @@ describe("CustomChartEditor", () => {
 
       const innerContainer = wrapper.find('[data-test="dashboard-custom-chart-editor-inner"]');
       expect(innerContainer.exists()).toBe(true);
-      const style = innerContainer.attributes("style");
-      expect(style).toContain("width: 100%");
-      expect(style).toContain("height: 100%");
+      const classes = innerContainer.classes();
+      expect(classes).toContain("w-full");
+      expect(classes).toContain("h-full");
     });
 
     it("should render column container with correct styling", () => {
@@ -127,9 +128,11 @@ describe("CustomChartEditor", () => {
 
       const colContainer = wrapper.find('[data-test="dashboard-custom-chart-editor-flex-col"]');
       expect(colContainer.exists()).toBe(true);
-      const style = colContainer.attributes("style");
-      expect(style).toContain("flex-direction: column");
-      expect(style).toContain("height: 100%");
+      // Inline `flex-direction: column; height: 100%` -> flex-col / h-full.
+      const classes = colContainer.classes();
+      expect(classes).toContain("flex");
+      expect(classes).toContain("flex-col");
+      expect(classes).toContain("h-full");
     });
 
     it("should render query editor with correct attributes", () => {
@@ -455,16 +458,17 @@ describe("CustomChartEditor", () => {
       expect(queryEditor.classes()).toContain("javascript-query-editor");
     });
 
-    it("should configure QueryEditor with inline styling", () => {
+    it("should configure QueryEditor with layout utilities", () => {
       wrapper = createWrapper();
 
       const queryEditor = wrapper.find(
         '[data-test="dashboard-markdown-editor-query-editor"]',
       );
-      const style = queryEditor.attributes("style");
+      // Inline `padding-left: 20px; height: 100%` -> pl-5 (1.25rem) / h-full.
+      const classes = queryEditor.classes();
 
-      expect(style).toContain("padding-left: 20px");
-      expect(style).toContain("height: 100%");
+      expect(classes).toContain("pl-5");
+      expect(classes).toContain("h-full");
     });
   });
 
@@ -551,16 +555,14 @@ describe("CustomChartEditor", () => {
       // Check for inner div with proper styling
       const innerContainer = wrapper.find('[data-test="dashboard-custom-chart-editor-inner"]');
       expect(innerContainer.exists()).toBe(true);
-      const innerStyle = innerContainer.attributes("style");
-      expect(innerStyle).toContain("width: 100%");
-      expect(innerStyle).toContain("height: 100%");
+      expect(innerContainer.classes()).toContain("w-full");
+      expect(innerContainer.classes()).toContain("h-full");
 
       // Check for flex-column container (replacement for old .col)
       const flexColContainer = wrapper.find('[data-test="dashboard-custom-chart-editor-flex-col"]');
       expect(flexColContainer.exists()).toBe(true);
-      const colStyle = flexColContainer.attributes("style");
-      expect(colStyle).toContain("height: 100%");
-      expect(colStyle).toContain("flex-direction: column");
+      expect(flexColContainer.classes()).toContain("h-full");
+      expect(flexColContainer.classes()).toContain("flex-col");
     });
 
     it("should maintain component hierarchy", () => {
diff --git a/web/src/components/dashboards/addPanel/CustomChartEditor.vue b/web/src/components/dashboards/addPanel/CustomChartEditor.vue
index d9c0e005f9..9078ddb175 100644
--- a/web/src/components/dashboards/addPanel/CustomChartEditor.vue
+++ b/web/src/components/dashboards/addPanel/CustomChartEditor.vue
@@ -17,23 +17,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div
     data-test="dashboard-custom-chart-editor-container"
-    class="card-container"
-    style="
-      width: 100%;
-      height: 100%;
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-    "
+    class="bg-card-glass-bg w-full h-full overflow-hidden flex flex-col"
   >
-    <div
+    <div class="w-full h-full flex flex-col"
       data-test="dashboard-custom-chart-editor-inner"
-      style="width: 100%; height: 100%; display: flex; flex-direction: column"
     >
       <div
         data-test="dashboard-custom-chart-editor-flex-col"
-        class="flex flex-col"
-        style="height: 100%; display: flex; flex-direction: column"
+        class="flex flex-col h-full"
       >
         <QueryEditor
           v-model:query="javascriptCodeContent"
@@ -41,12 +32,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           @update:query="onEditorValueChange"
           data-test="dashboard-markdown-editor-query-editor"
           language="javascript"
-          class="javascript-query-editor"
-          style="padding-left: 20px; height: 100%; flex: 1"
-          :style="{
-            backgroundColor:
-              store.state.theme == 'dark' ? '#1e1e1e' : '#fafafa',
-          }"
+          class="javascript-query-editor pl-5 h-full flex-1 bg-code-block-bg"
+         
         />
       </div>
     </div>
@@ -116,9 +103,3 @@ export default defineComponent({
   },
 });
 </script>
-
-<style>
-:deep(.query-editor-splitter .q-splitter__separator) {
-  background-color: transparent !important;
-}
-</style>
diff --git a/web/src/components/dashboards/addPanel/CustomHTMLEditor.spec.ts b/web/src/components/dashboards/addPanel/CustomHTMLEditor.spec.ts
index 3cb0ede51d..da8ae0bbaa 100644
--- a/web/src/components/dashboards/addPanel/CustomHTMLEditor.spec.ts
+++ b/web/src/components/dashboards/addPanel/CustomHTMLEditor.spec.ts
@@ -312,11 +312,11 @@ describe("CustomHTMLEditor", () => {
       wrapper = createWrapper();
 
       const container = wrapper.find('[data-test="dashboard-custom-html-editor-container"]');
-      const style = container.element.getAttribute('style');
 
-      expect(style).toContain('width: 100%');
-      expect(style).toContain('height: 100%');
-      expect(style).toContain('overflow: hidden');
+      // Sizing/overflow moved from an inline style to Tailwind utilities.
+      expect(container.classes()).toContain('w-full');
+      expect(container.classes()).toContain('h-full');
+      expect(container.classes()).toContain('overflow-hidden');
     });
 
     it("should render splitter with correct configuration", () => {
diff --git a/web/src/components/dashboards/addPanel/CustomHTMLEditor.vue b/web/src/components/dashboards/addPanel/CustomHTMLEditor.vue
index b2bc5ba33f..c1d43cfb05 100644
--- a/web/src/components/dashboards/addPanel/CustomHTMLEditor.vue
+++ b/web/src/components/dashboards/addPanel/CustomHTMLEditor.vue
@@ -17,37 +17,33 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div
     data-test="dashboard-custom-html-editor-container"
-    class="card-container"
-    style="width: 100%; height: 100%; overflow: hidden"
+    class="bg-card-glass-bg w-full h-full overflow-hidden"
   >
-    <div
+    <div class="w-full h-full"
       data-test="dashboard-custom-html-editor-inner"
-      style="width: 100%; height: 100%"
     >
       <OSplitter
         v-model="splitterModel"
-        style="width: 100%; height: 100% !important"
+        class="w-full h-full!"
         @update:modelValue="layoutSplitterUpdated"
         data-test="dashboard-html-editor-splitter"
       >
         <template #before>
           <div
             data-test="dashboard-custom-html-editor-flex-col"
-            class="flex flex-col"
-            style="height: 100%; display: flex; flex-direction: column;"
+            class="flex flex-col h-full"
           >
-            <CodeQueryEditor
+            <CodeQueryEditor class="h-full flex-1"
               language="html"
               v-model:query="htmlContent"
               :debounceTime="500"
               @update:query="onEditorValueChange"
               data-test="dashboard-html-editor"
-              style="height: 100%; flex: 1;"
             />
           </div>
         </template>
         <template #separator>
-          <div class="w-1 h-full bg-(--o2-border,#e5e7eb) transition-colors hover:bg-orange-500"></div>
+          <div class="w-1 h-full bg-border-default transition-colors hover:bg-table-resize-handle"></div>
         </template>
         <template #after>
           <HTMLRenderer
@@ -116,9 +112,3 @@ export default defineComponent({
   },
 });
 </script>
-
-<style>
-:deep(.query-editor-splitter .q-splitter__separator) {
-  background-color: transparent !important;
-}
-</style>
diff --git a/web/src/components/dashboards/addPanel/CustomMarkdownEditor.spec.ts b/web/src/components/dashboards/addPanel/CustomMarkdownEditor.spec.ts
index 3f531cb5a0..78049ca753 100644
--- a/web/src/components/dashboards/addPanel/CustomMarkdownEditor.spec.ts
+++ b/web/src/components/dashboards/addPanel/CustomMarkdownEditor.spec.ts
@@ -51,11 +51,6 @@ describe("CustomMarkdownEditor", () => {
         stubs: {
           'CodeQueryEditor': true,
           'MarkdownRenderer': true,
-          'q-splitter': {
-            template: '<div data-test="q-splitter-stub"><slot name="before"></slot><slot name="separator"></slot><slot name="after"></slot></div>',
-            props: ['modelValue'],
-            emits: ['update:modelValue']
-          },
         },
         mocks: {
           $t: (key: string) => key
@@ -75,11 +70,11 @@ describe("CustomMarkdownEditor", () => {
       wrapper = createWrapper();
 
       const container = wrapper.find('[data-test="dashboard-custom-markdown-editor-container"]');
-      const style = container.element.getAttribute('style');
 
-      expect(style).toContain('width: 100%');
-      expect(style).toContain('height: 100%');
-      expect(style).toContain('overflow: hidden');
+      // Sizing/overflow moved from an inline style to Tailwind utilities.
+      expect(container.classes()).toContain('w-full');
+      expect(container.classes()).toContain('h-full');
+      expect(container.classes()).toContain('overflow-hidden');
     });
 
     it("should render inner container with correct dimensions", () => {
@@ -87,9 +82,9 @@ describe("CustomMarkdownEditor", () => {
 
       const innerContainer = wrapper.find('[data-test="dashboard-custom-markdown-editor-inner"]');
       expect(innerContainer.exists()).toBe(true);
-      const style = innerContainer.attributes('style');
-      expect(style).toContain('width: 100%');
-      expect(style).toContain('height: 100%');
+      // Sizing moved from an inline style to Tailwind utilities.
+      expect(innerContainer.classes()).toContain('w-full');
+      expect(innerContainer.classes()).toContain('h-full');
     });
 
     it("should render splitter component", () => {
@@ -168,11 +163,6 @@ describe("CustomMarkdownEditor", () => {
             stubs: {
               'CodeQueryEditor': true,
               'MarkdownRenderer': true,
-              'q-splitter': {
-                template: '<div data-test="q-splitter-stub"><slot name="before"></slot><slot name="separator"></slot><slot name="after"></slot></div>',
-                props: ['modelValue'],
-                emits: ['update:modelValue']
-              },
             },
             mocks: {
               $t: (key: string) => key
@@ -218,11 +208,6 @@ describe("CustomMarkdownEditor", () => {
             stubs: {
               'CodeQueryEditor': true,
               'MarkdownRenderer': true,
-              'q-splitter': {
-                template: '<div data-test="q-splitter-stub"><slot name="before"></slot><slot name="separator"></slot><slot name="after"></slot></div>',
-                props: ['modelValue'],
-                emits: ['update:modelValue']
-              },
             },
             mocks: {
               $t: (key: string) => key
@@ -414,10 +399,9 @@ console.log('Hello World');
       wrapper = createWrapper();
 
       const splitter = wrapper.find('[data-test="dashboard-markdown-editor-splitter"]');
-      const style = splitter.attributes('style');
-      
-      expect(style).toContain('width: 100%');
-      expect(style).toContain('height: 100%');
+      // Sizing moved from an inline style to Tailwind utilities.
+      expect(splitter.classes()).toContain('w-full');
+      expect(splitter.classes()).toContain('h-full!');
     });
   });
 
@@ -463,9 +447,9 @@ console.log('Hello World');
 
       const flexCol = wrapper.find('[data-test="dashboard-custom-markdown-editor-flex-col"]');
       expect(flexCol.exists()).toBe(true);
-      const style = flexCol.attributes('style');
-      expect(style).toContain('height: 100%');
-      expect(style).toContain('flex-direction: column');
+      // Sizing/direction moved from an inline style to Tailwind utilities.
+      expect(flexCol.classes()).toContain('h-full');
+      expect(flexCol.classes()).toContain('flex-col');
     });
   });
 
@@ -600,11 +584,10 @@ console.log('Hello World');
 
       const container = wrapper.find('[data-test="dashboard-custom-markdown-editor-container"]');
 
-      // Check the actual style attribute
-      const style = container.element.getAttribute('style');
-      expect(style).toContain('width: 100%');
-      expect(style).toContain('height: 100%');
-      expect(style).toContain('overflow: hidden');
+      // Sizing/overflow moved from an inline style to Tailwind utilities.
+      expect(container.classes()).toContain('w-full');
+      expect(container.classes()).toContain('h-full');
+      expect(container.classes()).toContain('overflow-hidden');
     });
 
     it("should apply splitter classes correctly", () => {
@@ -614,14 +597,14 @@ console.log('Hello World');
       expect(separator.exists()).toBe(true);
     });
 
-    it("should render the editor container with card-container class", () => {
+    it("should render the editor container with bg-card-glass-bg class", () => {
       wrapper = createWrapper();
 
       const container = wrapper.find(
         '[data-test="dashboard-custom-markdown-editor-container"]',
       );
       expect(container.exists()).toBe(true);
-      expect(container.classes()).toContain('card-container');
+      expect(container.classes()).toContain('bg-card-glass-bg');
     });
   });
 
@@ -845,11 +828,6 @@ And some more content.
             stubs: {
               'CodeQueryEditor': true,
               'MarkdownRenderer': true,
-              'q-splitter': {
-                template: '<div data-test="q-splitter-stub"><slot name="before"></slot><slot name="separator"></slot><slot name="after"></slot></div>',
-                props: ['modelValue'],
-                emits: ['update:modelValue']
-              },
             },
             mocks: {
               $t: (key: string) => key
diff --git a/web/src/components/dashboards/addPanel/CustomMarkdownEditor.vue b/web/src/components/dashboards/addPanel/CustomMarkdownEditor.vue
index 085f79bccb..f4c4e106ee 100644
--- a/web/src/components/dashboards/addPanel/CustomMarkdownEditor.vue
+++ b/web/src/components/dashboards/addPanel/CustomMarkdownEditor.vue
@@ -17,39 +17,35 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div
     data-test="dashboard-custom-markdown-editor-container"
-    class="card-container"
-    style="width: 100%; height: 100%; overflow: hidden"
+    class="bg-card-glass-bg w-full h-full overflow-hidden"
   >
-    <div
+    <div class="w-full h-full"
       data-test="dashboard-custom-markdown-editor-inner"
-      style="width: 100%; height: 100%"
     >
       <OSplitter
         v-model="splitterModel"
-        style="width: 100%; height: 100% !important"
+        class="w-full h-full!"
         @update:modelValue="layoutSplitterUpdated"
         data-test="dashboard-markdown-editor-splitter"
       >
         <template #before>
           <div
             data-test="dashboard-custom-markdown-editor-flex-col"
-            class="flex flex-col"
-            style="height: 100%; display: flex; flex-direction: column;"
+            class="flex flex-col h-full"
           >
-            <CodeQueryEditor
+            <CodeQueryEditor class="h-full flex-1"
               language="markdown"
               v-model:query="markdownContent"
               :debounceTime="500"
               @update:query="onEditorValueChange"
               data-test="dashboard-markdown-editor"
-              style="height: 100%; flex: 1;"
             />
           </div>
         </template>
         <template #separator>
           <div
             data-test="dashboard-custom-markdown-editor-splitter-separator"
-            class="w-1 h-full bg-[var(--o2-border,#e5e7eb)] transition-colors hover:bg-orange-500"
+            class="w-1 h-full bg-border-default transition-colors hover:bg-table-resize-handle"
           ></div>
         </template>
         <template #after>
@@ -119,9 +115,3 @@ export default defineComponent({
   },
 });
 </script>
-
-<style>
-:deep(.query-editor-splitter .q-splitter__separator) {
-  background-color: transparent !important;
-}
-</style>
diff --git a/web/src/components/dashboards/addPanel/DashboardErrors.spec.ts b/web/src/components/dashboards/addPanel/DashboardErrors.spec.ts
index c1289c86cf..383c8f48c0 100644
--- a/web/src/components/dashboards/addPanel/DashboardErrors.spec.ts
+++ b/web/src/components/dashboards/addPanel/DashboardErrors.spec.ts
@@ -180,9 +180,12 @@ describe("DashboardErrors", () => {
     it("shows error list hidden when collapsed", () => {
       wrapper = mountComponent(["Test error"]);
 
-      // The error list container should have height: 0px when collapsed
-      const containers = wrapper.findAll('[style*="overflow: hidden"]');
-      expect(containers.length).toBeGreaterThan(0);
+      // `overflow: hidden` moved to the overflow-hidden utility; the collapse
+      // itself is still driven by the inline height binding.
+      const list = wrapper.find('[data-test="dashboard-errors-list"]');
+      const collapseContainer = list.element.closest(".overflow-hidden");
+      expect(collapseContainer).toBeTruthy();
+      expect(collapseContainer?.getAttribute("style")).toContain("height: 0px");
     });
 
     it("expands when the expand bar is clicked", async () => {
@@ -280,11 +283,13 @@ describe("DashboardErrors", () => {
   });
 
   describe("theme reactivity", () => {
-    it("renders expand bar with inline background style", () => {
+    it("renders expand bar with the theme-aware background utility", () => {
       wrapper = mountComponent(["Test error"]);
 
       const expandBar = wrapper.find('[data-test="dashboard-errors-expand-bar"]');
-      expect(expandBar.attributes("style")).toBeDefined();
+      // Background is now driven by the theme-aware bg-section-header-bg token
+      // utility rather than an inline background style.
+      expect(expandBar.classes()).toContain("bg-section-header-bg");
     });
 
     it("handles dark theme without errors", () => {
diff --git a/web/src/components/dashboards/addPanel/DashboardErrors.vue b/web/src/components/dashboards/addPanel/DashboardErrors.vue
index 66839cda69..d0a6ab82bb 100644
--- a/web/src/components/dashboards/addPanel/DashboardErrors.vue
+++ b/web/src/components/dashboards/addPanel/DashboardErrors.vue
@@ -20,8 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <div>
       <div
         data-test="dashboard-errors-expand-bar"
-        class="flex items-center gap-2 px-2 py-2 cursor-pointer overflow-hidden hover:bg-[#eaeaeaa5]"
-        :style="{ backgroundColor: store.state.theme === 'dark' ? 'var(--o2-header-menu-bg)' : 'var(--color-primary-100)' }"
+        class="flex items-center gap-2 px-2 py-2 cursor-pointer overflow-hidden bg-section-header-bg hover:bg-surface-subtle-hover"
         @click="onDropDownClick"
       >
         <OIcon
@@ -29,15 +28,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           size="sm"
           class="mr-1"
         />
-        <span class="text-sm font-semibold text-red-500">
+        <span class="text-sm font-semibold text-status-error-text">
           Errors ({{ props.errors.errors.length }})
         </span>
       </div>
     </div>
     <div
-      class="flex"
+      class="flex overflow-hidden"
       :style="!showErrors ? 'height: 0px;' : 'height: auto;'"
-      style="overflow: hidden"
     >
       <div class="flex flex-col">
         <div data-test="dashboard-error">
@@ -48,8 +46,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <li
               v-for="(item, index) in props.errors.errors"
               :key="index"
-              style="color: red"
-              class="py-1"
+              class="text-status-error-text py-1"
+             
               data-test="dashboard-errors-list-item"
             >
               {{ item }}
@@ -64,7 +62,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <script lang="ts">
 import { defineComponent, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
-import { useStore } from "vuex";
 
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import OSeparator from "@/lib/core/Separator/OSeparator.vue";
@@ -79,7 +76,6 @@ export default defineComponent({
   setup(props, { emit }) {
     const showErrors = ref(false);
     const { t } = useI18n();
-    const store = useStore();
 
     const onDropDownClick = () => {
       showErrors.value = !showErrors.value;
@@ -102,7 +98,6 @@ export default defineComponent({
     return {
       props,
       t,
-      store,
       onDropDownClick,
       showErrors,
     };
diff --git a/web/src/components/dashboards/addPanel/DashboardGeoMapsQueryBuilder.spec.ts b/web/src/components/dashboards/addPanel/DashboardGeoMapsQueryBuilder.spec.ts
index be7a20c890..4082625f01 100644
--- a/web/src/components/dashboards/addPanel/DashboardGeoMapsQueryBuilder.spec.ts
+++ b/web/src/components/dashboards/addPanel/DashboardGeoMapsQueryBuilder.spec.ts
@@ -126,13 +126,6 @@ describe("DashboardGeoMapsQueryBuilder", () => {
           DashboardFiltersOption: true,
           DashboardJoinsOption: true,
           "OIcon": true,
-          "q-tooltip": true,
-          "q-btn-group": true,
-          "q-btn": true,
-          "q-menu": true,
-          "q-input": true,
-          "q-select": true,
-          "q-separator": true,
         },
         mocks: {
           $t: (key: string) => key,
@@ -866,7 +859,7 @@ describe("DashboardGeoMapsQueryBuilder", () => {
         '[data-test="dashboard-latitude-layout"]',
       );
       expect(latitudeContainer.classes()).toContain(
-        "bg-[var(--color-field-list-row-hover-bg)]",
+        "bg-field-list-row-hover-bg",
       );
     });
 
@@ -879,7 +872,7 @@ describe("DashboardGeoMapsQueryBuilder", () => {
         '[data-test="dashboard-latitude-layout"]',
       );
       expect(latitudeContainer.classes()).not.toContain(
-        "bg-[var(--color-field-list-row-hover-bg)]",
+        "bg-field-list-row-hover-bg",
       );
     });
   });
diff --git a/web/src/components/dashboards/addPanel/DashboardGeoMapsQueryBuilder.vue b/web/src/components/dashboards/addPanel/DashboardGeoMapsQueryBuilder.vue
index f6e12fabde..9f4f24c022 100644
--- a/web/src/components/dashboards/addPanel/DashboardGeoMapsQueryBuilder.vue
+++ b/web/src/components/dashboards/addPanel/DashboardGeoMapsQueryBuilder.vue
@@ -17,18 +17,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div v-if="!promqlMode && dashboardPanelData.data.type == 'geomap'">
     <!-- latitude container -->
-    <div style="display: flex; flex-direction: row" class="pl-3">
-      <div class="whitespace-nowrap min-w-[130px] flex items-center">
+    <div class="pl-3 flex flex-row">
+      <div class="whitespace-nowrap min-w-32.5 flex items-center">
         {{ t("panel.latitude") }}
         <OIcon name="info-outline" size="sm" class="ml-1" />
           <OTooltip :content="Hint" />
       </div>
-      <span class="flex items-center mx-[2px]">:</span>
+      <span class="flex items-center mx-0.5">:</span>
       <div
         class="axis-container droppable flex-1 w-full flex flex-wrap border-2 border-dashed border-transparent"
         :class="{
           'bg-[rgba(0,0,0,0.042)] border-white border-dotted': dashboardPanelData.meta.dragAndDrop.dragging,
-          'transition-all duration-200 bg-[var(--color-field-list-row-hover-bg)]':
+          'transition-all duration-200 bg-field-list-row-hover-bg':
             dashboardPanelData.meta.dragAndDrop.dragging &&
             dashboardPanelData.meta.dragAndDrop.currentDragArea == 'latitude',
         }"
@@ -75,17 +75,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :data-test="`dashboard-latitude-item-${latitudeLabel}`"
               >
                 {{ latitudeLabel }}
-                <template #icon-right
-                  ><OIcon name="arrow-drop-down" size="sm"
+                <template #icon-right><OIcon name="arrow-drop-down" size="sm"
                 /></template>
               </OButton>
             </template>
             <div
-              class="field-function-menu-popup dashboard-geo-maps-query-builder-dropdown w-[771px]! h-[323px] shadow-[0px_4px_4px_0px_rgba(0,0,0,0.05)] p-4 shadow-[0px_3px_15px_rgba(0,0,0,0.1)] translate-y-2 rounded-none"
+              class="field-function-menu-popup dashboard-geo-maps-query-builder-dropdown w-[48.1875rem]! h-[20.1875rem] shadow-md p-4 translate-y-2 rounded-none"
               :data-test="`dashboard-latitude-item-${latitudeLabel}-menu`"
             >
-              <div
-                style="padding: 3px 16px 16px 16px"
+              <div class="pt-0.75 pr-4 pb-4 pl-4"
                 :style="{
                   width:
                     dashboardPanelData.data.queries[
@@ -125,7 +123,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </OButton>
         </OButtonGroup>
         <div
-          class="text-xs text-weight-bold text-center py-1"
+          class="text-xs font-bold text-center py-1"
           v-if="
             dashboardPanelData.data.queries[
               dashboardPanelData.layout.currentQueryIndex
@@ -138,18 +136,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </div>
     <OSeparator />
     <!-- longitude container -->
-    <div style="display: flex; flex-direction: row" class="pl-3">
-      <div class="whitespace-nowrap min-w-[130px] flex items-center">
+    <div class="pl-3 flex flex-row">
+      <div class="whitespace-nowrap min-w-32.5 flex items-center">
         {{ t("panel.longitude") }}
         <OIcon name="info-outline" size="sm" class="ml-1" />
           <OTooltip :content="Hint" />
       </div>
-      <span class="flex items-center mx-[2px]">:</span>
+      <span class="flex items-center mx-0.5">:</span>
       <div
         class="axis-container droppable flex-1 w-full flex flex-wrap border-2 border-dashed border-transparent"
         :class="{
           'bg-[rgba(0,0,0,0.042)] border-white border-dotted': dashboardPanelData.meta.dragAndDrop.dragging,
-          'transition-all duration-200 bg-[var(--color-field-list-row-hover-bg)]':
+          'transition-all duration-200 bg-field-list-row-hover-bg':
             dashboardPanelData.meta.dragAndDrop.dragging &&
             dashboardPanelData.meta.dragAndDrop.currentDragArea == 'longitude',
         }"
@@ -196,17 +194,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :data-test="`dashboard-longitude-item-${longitudeLabel}`"
               >
                 {{ longitudeLabel }}
-                <template #icon-right
-                  ><OIcon name="arrow-drop-down" size="sm"
+                <template #icon-right><OIcon name="arrow-drop-down" size="sm"
                 /></template>
               </OButton>
             </template>
             <div
-              class="field-function-menu-popup dashboard-geo-maps-query-builder-dropdown w-[771px]! h-[323px] shadow-[0px_4px_4px_0px_rgba(0,0,0,0.05)] p-4 shadow-[0px_3px_15px_rgba(0,0,0,0.1)] translate-y-2 rounded-none"
+              class="field-function-menu-popup dashboard-geo-maps-query-builder-dropdown w-[48.1875rem]! h-[20.1875rem] shadow-md p-4 translate-y-2 rounded-none"
               :data-test="`dashboard-longitude-item-${longitudeLabel}-menu`"
             >
-              <div
-                style="padding: 3px 16px 16px 16px"
+              <div class="pt-0.75 pr-4 pb-4 pl-4"
                 :style="{
                   width:
                     dashboardPanelData.data.queries[
@@ -246,7 +242,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </OButton>
         </OButtonGroup>
         <div
-          class="text-xs text-weight-bold text-center py-1"
+          class="text-xs font-bold text-center py-1"
           v-if="
             dashboardPanelData.data.queries[
               dashboardPanelData.layout.currentQueryIndex
@@ -259,18 +255,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </div>
     <OSeparator />
     <!-- weight container -->
-    <div style="display: flex; flex-direction: row" class="pl-3">
-      <div class="whitespace-nowrap min-w-[130px] flex items-center">
+    <div class="pl-3 flex flex-row">
+      <div class="whitespace-nowrap min-w-32.5 flex items-center">
         {{ t("panel.weight") }}
         <OIcon name="info-outline" size="sm" class="ml-1" />
           <OTooltip :content="WeightHint" />
       </div>
-      <span class="flex items-center mx-[2px]">:</span>
+      <span class="flex items-center mx-0.5">:</span>
       <div
         class="axis-container droppable flex-1 w-full flex flex-wrap border-2 border-dashed border-transparent"
         :class="{
           'bg-[rgba(0,0,0,0.042)] border-white border-dotted': dashboardPanelData.meta.dragAndDrop.dragging,
-          'transition-all duration-200 bg-[var(--color-field-list-row-hover-bg)]':
+          'transition-all duration-200 bg-field-list-row-hover-bg':
             dashboardPanelData.meta.dragAndDrop.dragging &&
             dashboardPanelData.meta.dragAndDrop.currentDragArea == 'weight',
         }"
@@ -317,17 +313,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :data-test="`dashboard-weight-item-${weightLabel}`"
               >
                 {{ weightLabel }}
-                <template #icon-right
-                  ><OIcon name="arrow-drop-down" size="sm"
+                <template #icon-right><OIcon name="arrow-drop-down" size="sm"
                 /></template>
               </OButton>
             </template>
             <div
-              class="field-function-menu-popup dashboard-geo-maps-query-builder-dropdown w-[771px]! h-[323px] shadow-[0px_4px_4px_0px_rgba(0,0,0,0.05)] p-4 shadow-[0px_3px_15px_rgba(0,0,0,0.1)] translate-y-2 rounded-none"
+              class="field-function-menu-popup dashboard-geo-maps-query-builder-dropdown w-[48.1875rem]! h-[20.1875rem] shadow-md p-4 translate-y-2 rounded-none"
               :data-test="`dashboard-weight-item-${weightLabel}-menu`"
             >
-              <div
-                style="padding: 3px 16px 16px 16px"
+              <div class="pt-0.75 pr-4 pb-4 pl-4"
                 :style="{
                   width:
                     dashboardPanelData.data.queries[
@@ -367,7 +361,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </OButton>
         </OButtonGroup>
         <div
-          class="text-xs text-weight-bold text-center py-1"
+          class="text-xs font-bold text-center py-1"
           v-if="
             dashboardPanelData.data.queries[
               dashboardPanelData.layout.currentQueryIndex
@@ -378,13 +372,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
       </div>
     </div>
-    <OSeparator />
-    <DashboardJoinsOption :dashboardData="dashboardData"></DashboardJoinsOption>
-    <OSeparator />
-    <!-- filters container -->
-    <DashboardFiltersOption
-      :dashboardData="dashboardData"
-    ></DashboardFiltersOption>
+    <template v-if="showJoinsAndFilters">
+      <OSeparator />
+      <DashboardJoinsOption
+        :dashboardData="dashboardData"
+      ></DashboardJoinsOption>
+      <OSeparator />
+      <!-- filters container -->
+      <DashboardFiltersOption
+        :dashboardData="dashboardData"
+      ></DashboardFiltersOption>
+    </template>
   </div>
 </template>
 
@@ -682,9 +680,23 @@ export default defineComponent({
       return commonBtnLabel(weightField);
     });
 
+    // Joins and Filters hide themselves in custom-SQL mode; the separators
+    // around them must follow the same condition or they stack into a
+    // double border.
+    const showJoinsAndFilters = computed(() => {
+      const currentQuery =
+        dashboardPanelData.data.queries[
+          dashboardPanelData.layout.currentQueryIndex
+        ];
+      return !(
+        currentQuery?.customQuery && dashboardPanelData.data.queryType === "sql"
+      );
+    });
+
     return {
       t,
       dashboardPanelData,
+      showJoinsAndFilters,
       removeLatitude,
       removeLongitude,
       removeWeight,
diff --git a/web/src/components/dashboards/addPanel/DashboardMapsQueryBuilder.spec.ts b/web/src/components/dashboards/addPanel/DashboardMapsQueryBuilder.spec.ts
index a0a6e7b73e..750068bec6 100644
--- a/web/src/components/dashboards/addPanel/DashboardMapsQueryBuilder.spec.ts
+++ b/web/src/components/dashboards/addPanel/DashboardMapsQueryBuilder.spec.ts
@@ -129,13 +129,6 @@ describe("DashboardMapsQueryBuilder", () => {
           DashboardFiltersOption: true,
           DashboardJoinsOption: true,
           "OIcon": true,
-          "q-tooltip": true,
-          "q-btn-group": true,
-          "q-btn": true,
-          "q-menu": true,
-          "q-input": true,
-          "q-select": true,
-          "q-separator": true,
         },
         mocks: {
           $t: (key: string) => key,
@@ -839,7 +832,7 @@ describe("DashboardMapsQueryBuilder", () => {
 
       const nameContainer = wrapper.find('[data-test="dashboard-name-layout"]');
       expect(nameContainer.classes()).toContain(
-        "bg-[var(--color-field-list-row-hover-bg)]",
+        "bg-field-list-row-hover-bg",
       );
     });
 
@@ -853,7 +846,7 @@ describe("DashboardMapsQueryBuilder", () => {
 
       const nameContainer = wrapper.find('[data-test="dashboard-name-layout"]');
       expect(nameContainer.classes()).not.toContain(
-        "bg-[var(--color-field-list-row-hover-bg)]",
+        "bg-field-list-row-hover-bg",
       );
     });
   });
diff --git a/web/src/components/dashboards/addPanel/DashboardMapsQueryBuilder.vue b/web/src/components/dashboards/addPanel/DashboardMapsQueryBuilder.vue
index 1496f29dd9..eb91eb5a7e 100644
--- a/web/src/components/dashboards/addPanel/DashboardMapsQueryBuilder.vue
+++ b/web/src/components/dashboards/addPanel/DashboardMapsQueryBuilder.vue
@@ -17,18 +17,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div v-if="!promqlMode && dashboardPanelData.data.type == 'maps'">
     <!-- name container -->
-    <div style="display: flex; flex-direction: row" class="pl-3">
-      <div class="whitespace-nowrap min-w-[130px] flex items-center">
+    <div class="pl-3 flex flex-row">
+      <div class="whitespace-nowrap min-w-32.5 flex items-center">
         {{ t("panel.mapname") }}
         <OIcon name="info-outline" size="sm" class="ml-1" />
           <OTooltip :content="Hint" />
       </div>
-      <span class="flex items-center ml-[2px] mr-[2px]">:</span>
+      <span class="flex items-center ml-0.5 mr-0.5">:</span>
       <div
         class="axis-container flex-1 w-full flex flex-wrap droppable border-transparent border-dashed border-2 scroll"
         :class="{
           'bg-[rgba(0,0,0,0.042)] border-white [border-style:dotted]': dashboardPanelData.meta.dragAndDrop.dragging,
-          'transition-all duration-200 bg-[var(--color-field-list-row-hover-bg)]':
+          'transition-all duration-200 bg-field-list-row-hover-bg':
             dashboardPanelData.meta.dragAndDrop.dragging &&
             dashboardPanelData.meta.dragAndDrop.currentDragArea == 'name',
         }"
@@ -75,17 +75,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :data-test="`dashboard-name-item-${nameLabel}`"
               >
                 {{ nameLabel }}
-                <template #icon-right
-                  ><OIcon name="arrow-drop-down" size="sm"
+                <template #icon-right><OIcon name="arrow-drop-down" size="sm"
                 /></template>
               </OButton>
             </template>
             <div
-              class="field-function-menu-popup dashboard-maps-query-builder-dropdown w-[771px]! h-[323px] shadow-[0px_4px_4px_0px_rgba(0,0,0,0.05)] p-4 shadow-[0px_3px_15px_rgba(0,0,0,0.1)] translate-y-2 rounded-none"
+              class="field-function-menu-popup dashboard-maps-query-builder-dropdown w-[48.1875rem]! h-[20.1875rem] shadow-md p-4 translate-y-2 rounded-none"
               :data-test="`dashboard-name-item-${nameLabel}-menu`"
             >
-              <div
-                style="padding: 3px 16px 16px 16px"
+              <div class="pt-0.75 pr-4 pb-4 pl-4"
                 :style="{
                   width:
                     dashboardPanelData.data.queries[
@@ -129,7 +127,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </OButton>
         </OButtonGroup>
         <div
-          class="text-xs text-weight-bold text-center py-1"
+          class="text-xs font-bold text-center py-1"
           v-if="
             dashboardPanelData.data.queries[
               dashboardPanelData.layout.currentQueryIndex
@@ -142,18 +140,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </div>
     <OSeparator />
     <!-- value for maps container -->
-    <div style="display: flex; flex-direction: row" class="pl-3">
-      <div class="whitespace-nowrap min-w-[130px] flex items-center">
+    <div class="pl-3 flex flex-row">
+      <div class="whitespace-nowrap min-w-32.5 flex items-center">
         {{ t("panel.mapvalue") }}
         <OIcon name="info-outline" size="sm" class="ml-1" />
           <OTooltip :content="Hint" />
       </div>
-      <span class="flex items-center ml-[2px] mr-[2px]">:</span>
+      <span class="flex items-center ml-0.5 mr-0.5">:</span>
       <div
         class="axis-container flex-1 w-full flex flex-wrap droppable border-transparent border-dashed border-2 scroll"
         :class="{
           'bg-[rgba(0,0,0,0.042)] border-white [border-style:dotted]': dashboardPanelData.meta.dragAndDrop.dragging,
-          'transition-all duration-200 bg-[var(--color-field-list-row-hover-bg)]':
+          'transition-all duration-200 bg-field-list-row-hover-bg':
             dashboardPanelData.meta.dragAndDrop.dragging &&
             dashboardPanelData.meta.dragAndDrop.currentDragArea ==
               'value_for_maps',
@@ -201,17 +199,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :data-test="`dashboard-value_for_maps-item-${valueLabel}`"
               >
                 {{ valueLabel }}
-                <template #icon-right
-                  ><OIcon name="arrow-drop-down" size="sm"
+                <template #icon-right><OIcon name="arrow-drop-down" size="sm"
                 /></template>
               </OButton>
             </template>
             <div
-              class="field-function-menu-popup dashboard-maps-query-builder-dropdown w-[771px]! h-[323px] shadow-[0px_4px_4px_0px_rgba(0,0,0,0.05)] p-4 shadow-[0px_3px_15px_rgba(0,0,0,0.1)] translate-y-2 rounded-none"
+              class="field-function-menu-popup dashboard-maps-query-builder-dropdown w-[48.1875rem]! h-[20.1875rem] shadow-md p-4 translate-y-2 rounded-none"
               :data-test="`dashboard-value_for_maps-item-${valueLabel}-menu`"
             >
-              <div
-                style="padding: 3px 16px 16px 16px"
+              <div class="pt-0.75 pr-4 pb-4 pl-4"
                 :style="{
                   width:
                     dashboardPanelData.data.queries[
@@ -255,7 +251,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </OButton>
         </OButtonGroup>
         <div
-          class="text-xs text-weight-bold text-center py-1"
+          class="text-xs font-bold text-center py-1"
           v-if="
             dashboardPanelData.data.queries[
               dashboardPanelData.layout.currentQueryIndex
@@ -266,13 +262,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
       </div>
     </div>
-    <OSeparator />
-    <DashboardJoinsOption :dashboardData="dashboardData"></DashboardJoinsOption>
-    <OSeparator />
-    <!-- filters container -->
-    <DashboardFiltersOption
-      :dashboardData="dashboardData"
-    ></DashboardFiltersOption>
+    <template v-if="showJoinsAndFilters">
+      <OSeparator />
+      <DashboardJoinsOption
+        :dashboardData="dashboardData"
+      ></DashboardJoinsOption>
+      <OSeparator />
+      <!-- filters container -->
+      <DashboardFiltersOption
+        :dashboardData="dashboardData"
+      ></DashboardFiltersOption>
+    </template>
   </div>
 </template>
 
@@ -556,9 +556,23 @@ export default defineComponent({
       return commonBtnLabel(valueField);
     });
 
+    // Joins and Filters hide themselves in custom-SQL mode; the separators
+    // around them must follow the same condition or they stack into a
+    // double border.
+    const showJoinsAndFilters = computed(() => {
+      const currentQuery =
+        dashboardPanelData.data.queries[
+          dashboardPanelData.layout.currentQueryIndex
+        ];
+      return !(
+        currentQuery?.customQuery && dashboardPanelData.data.queryType === "sql"
+      );
+    });
+
     return {
       t,
       dashboardPanelData,
+      showJoinsAndFilters,
       removeMapName,
       removeMapValue,
       nameLabel,
diff --git a/web/src/components/dashboards/addPanel/DashboardQueryBuilder.vue b/web/src/components/dashboards/addPanel/DashboardQueryBuilder.vue
index 73b977c847..a8a90adf05 100644
--- a/web/src/components/dashboards/addPanel/DashboardQueryBuilder.vue
+++ b/web/src/components/dashboards/addPanel/DashboardQueryBuilder.vue
@@ -26,12 +26,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   >
     <!-- x axis container -->
     <div
-      style="display: flex; flex-direction: row; width: 100%"
-      class="pl-3"
+      class="pl-3 flex flex-row w-full"
       v-if="dashboardPanelData.data.type != 'metric'"
     >
-      <div style="flex: 1">
-        <div style="display: flex; flex-direction: row">
+      <div class="flex-1">
+        <div class="flex flex-row">
           <div class="layout-name whitespace-nowrap min-w-32.5 flex items-center">
             {{ currentXLabel }}
             <OIcon name="info-outline" size="sm" class="ml-1" />
@@ -42,7 +41,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             class="axis-container droppable scroll flex flex-1 w-full text-center flex-wrap border-2 border-dashed border-transparent"
             :class="{
               'bg-[rgba(0,0,0,0.042)] [border-style:dotted] border-white': dashboardPanelData.meta.dragAndDrop.dragging,
-              'transition-all duration-200 bg-[var(--color-field-list-row-hover-bg)]':
+              'transition-all duration-200 bg-field-list-row-hover-bg':
                 dashboardPanelData.meta.dragAndDrop.dragging &&
                 dashboardPanelData.meta.dragAndDrop.currentDragArea == 'x',
             }"
@@ -73,13 +72,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     index &&
                   dashboardPanelData.meta.dragAndDrop.currentDragArea == 'x'
                 "
-                class="dragItem bg-(--o2-theme-color) w-5 h-full rounded-md opacity-70"
+                class="dragItem bg-theme-accent w-5 h-full rounded-default opacity-70"
                 data-test="dashboard-query-builder-drag-item"
               >
                 &nbsp;
               </div>
               <OButtonGroup
-                class="axis-field overflow-hidden [--tw-divide-color:rgba(255,255,255,0.25)]"
+                class="axis-field overflow-hidden"
                 radius="sm"
                 :draggable="true"
                 @dragstart="onFieldDragStart($event, itemX, 'x', index)"
@@ -105,7 +104,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     >
                       {{ xLabel[index] }}
                       <template #icon-right
-                        ><OIcon name="arrow-drop-down" size="sm"
+><OIcon name="arrow-drop-down" size="sm"
                       /></template>
                     </OButton>
                   </template>
@@ -151,18 +150,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </OButtonGroup>
             </div>
             <div
-              class="text-xs text-weight-bold text-center py-1"
+              class="text-xs font-bold text-center py-1 w-full flex justify-center items-center"
               v-if="
                 dashboardPanelData.data.queries[
                   dashboardPanelData.layout.currentQueryIndex
                 ].fields?.x?.length < 1
               "
-              style="
-                width: 100%;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-              "
             >
               <div class="mt-1">{{ xAxisHint }}</div>
             </div>
@@ -170,8 +163,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
       </div>
       <!-- b axis container -->
-      <div
-        style="flex: 1"
+      <div class="flex-1"
         v-if="
           dashboardPanelData.data.type == 'table' ||
           dashboardPanelData.data.type == 'area' ||
@@ -184,10 +176,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           dashboardPanelData.data.type == 'stacked'
         "
       >
-        <div style="display: flex; flex-direction: row" class="pl-3 h-full">
+        <div class="pl-3 h-full flex flex-row">
           <!-- Separator between X and Breakdown/Pivot -->
           <OSeparator vertical class="mr-4" />
-          <div class="layout-name whitespace-nowrap min-w-32.5 flex items-center" style="min-width: 0 !important">
+          <div class="layout-name whitespace-nowrap min-w-0 flex items-center">
             {{
               dashboardPanelData.data.type == "table"
                 ? t("panel.pivotField")
@@ -204,7 +196,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       dashboardPanelData.data.type == 'h-bar' ||
                       dashboardPanelData.data.type == 'h-stacked'
                     "
-                    >{{ t("panel.breakdownTooltipHBar") }}</span
+                  >{{ t("panel.breakdownTooltipHBar") }}</span
                   >
                   <span v-else>{{ t("panel.breakdownTooltipDefault") }}</span>
                 </template>
@@ -215,7 +207,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             class="axis-container droppable scroll flex flex-1 w-full text-center flex-wrap border-2 border-dashed border-transparent"
             :class="{
               'bg-[rgba(0,0,0,0.042)] [border-style:dotted] border-white': dashboardPanelData.meta.dragAndDrop.dragging,
-              'transition-all duration-200 bg-[var(--color-field-list-row-hover-bg)]':
+              'transition-all duration-200 bg-field-list-row-hover-bg':
                 dashboardPanelData.meta.dragAndDrop.dragging &&
                 dashboardPanelData.meta.dragAndDrop.currentDragArea ==
                   'breakdown',
@@ -248,13 +240,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   dashboardPanelData.meta.dragAndDrop.currentDragArea ==
                     'breakdown'
                 "
-                class="dragItem bg-(--o2-theme-color) w-5 h-full rounded-md opacity-70"
+                class="dragItem bg-theme-accent w-5 h-full rounded-default opacity-70"
                 data-test="dashboard-query-builder-drag-item"
               >
                 &nbsp;
               </div>
               <OButtonGroup
-                class="axis-field overflow-hidden [--tw-divide-color:rgba(255,255,255,0.25)]"
+                class="axis-field overflow-hidden"
                 radius="sm"
                 :draggable="true"
                 @dragstart="onFieldDragStart($event, itemB, 'breakdown', index)"
@@ -280,7 +272,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     >
                       {{ bLabel[index] }}
                       <template #icon-right
-                        ><OIcon name="arrow-drop-down" size="sm"
+><OIcon name="arrow-drop-down" size="sm"
                       /></template>
                     </OButton>
                   </template>
@@ -326,18 +318,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </OButtonGroup>
             </div>
             <div
-              class="text-xs text-weight-bold text-center py-1"
+              class="text-xs font-bold text-center py-1 w-full flex justify-center items-center"
               v-if="
                 !dashboardPanelData.data.queries[
                   dashboardPanelData.layout.currentQueryIndex
                 ].fields?.breakdown?.length
               "
-              style="
-                width: 100%;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-              "
             >
               <div class="mt-1">{{ bAxisHint }}</div>
             </div>
@@ -345,9 +331,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
       </div>
     </div>
-    <OSeparator />
+    <OSeparator v-if="dashboardPanelData.data.type != 'metric'" />
     <!-- y axis container -->
-    <div style="display: flex; flex-direction: row" class="pl-3">
+    <div class="pl-3 flex flex-row">
       <div class="layout-name whitespace-nowrap min-w-32.5 flex items-center">
         {{ currentYLabel }}
         <OIcon name="info-outline" size="sm" class="ml-1" />
@@ -358,7 +344,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         class="axis-container droppable scroll flex flex-1 w-full text-center flex-wrap border-2 border-dashed border-transparent"
         :class="{
           'bg-[rgba(0,0,0,0.042)] [border-style:dotted] border-white': dashboardPanelData.meta.dragAndDrop.dragging,
-          'transition-all duration-200 bg-[var(--color-field-list-row-hover-bg)]':
+          'transition-all duration-200 bg-field-list-row-hover-bg':
             dashboardPanelData.meta.dragAndDrop.dragging &&
             dashboardPanelData.meta.dragAndDrop.currentDragArea == 'y',
         }"
@@ -388,13 +374,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               dashboardPanelData.meta.dragAndDrop.targetDragIndex == index &&
               dashboardPanelData.meta.dragAndDrop.currentDragArea == 'y'
             "
-            class="dragItem bg-(--o2-theme-color) w-5 h-full rounded-md opacity-70"
+            class="dragItem bg-theme-accent w-5 h-full rounded-default opacity-70"
             data-test="dashboard-query-builder-drag-item"
           >
             &nbsp;
           </div>
           <OButtonGroup
-            class="axis-field overflow-hidden [--tw-divide-color:rgba(255,255,255,0.25)]"
+            class="axis-field overflow-hidden"
             radius="sm"
             :draggable="true"
             @dragstart="onFieldDragStart($event, itemY, 'y', index)"
@@ -420,7 +406,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 >
                   {{ yLabel[index] }}
                   <template #icon-right
-                    ><OIcon name="arrow-drop-down" size="sm"
+><OIcon name="arrow-drop-down" size="sm"
                   /></template>
                 </OButton>
               </template>
@@ -470,28 +456,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </OButtonGroup>
         </div>
         <div
-          class="text-xs text-weight-bold text-center py-1"
+          class="text-xs font-bold text-center py-1 w-full flex justify-center items-center"
           v-if="
             dashboardPanelData.data.queries[
               dashboardPanelData.layout.currentQueryIndex
             ].fields?.y?.length < 1
           "
-          style="
-            width: 100%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-          "
         >
           <div class="mt-1">{{ yAxisHint }}</div>
         </div>
       </div>
     </div>
-    <OSeparator />
-
     <!-- z axis container -->
     <span v-if="dashboardPanelData.data.type === 'heatmap'">
-      <div style="display: flex; flex-direction: row" class="pl-3">
+      <OSeparator />
+      <div class="pl-3 flex flex-row">
         <div class="layout-name whitespace-nowrap min-w-32.5 flex items-center">
           {{
             dashboardPanelData.data.type == "heatmap" ? t("panel.zAxis") : ""
@@ -504,7 +483,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           class="axis-container droppable scroll flex flex-1 w-full text-center flex-wrap border-2 border-dashed border-transparent"
           :class="{
             'bg-[rgba(0,0,0,0.042)] [border-style:dotted] border-white': dashboardPanelData.meta.dragAndDrop.dragging,
-            'transition-all duration-200 bg-[var(--color-field-list-row-hover-bg)]':
+            'transition-all duration-200 bg-field-list-row-hover-bg':
               dashboardPanelData.meta.dragAndDrop.dragging &&
               dashboardPanelData.meta.dragAndDrop.currentDragArea == 'z',
           }"
@@ -534,13 +513,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 dashboardPanelData.meta.dragAndDrop.targetDragIndex == index &&
                 dashboardPanelData.meta.dragAndDrop.currentDragArea == 'z'
               "
-              class="dragItem bg-(--o2-theme-color) w-5 h-full rounded-md opacity-70"
+              class="dragItem bg-theme-accent w-5 h-full rounded-default opacity-70"
               data-test="dashboard-query-builder-drag-item"
             >
               &nbsp;
             </div>
             <OButtonGroup
-              class="axis-field overflow-hidden [--tw-divide-color:rgba(255,255,255,0.25)]"
+              class="axis-field overflow-hidden"
               radius="sm"
               :draggable="true"
               @dragstart="onFieldDragStart($event, itemZ, 'z', index)"
@@ -566,7 +545,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   >
                     {{ zLabel[index] }}
                     <template #icon-right
-                      ><OIcon name="arrow-drop-down" size="sm"
+><OIcon name="arrow-drop-down" size="sm"
                     /></template>
                   </OButton>
                 </template>
@@ -612,31 +591,29 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </OButtonGroup>
           </div>
           <div
-            class="text-xs text-weight-bold text-center py-1"
+            class="text-xs font-bold text-center py-1 w-full flex justify-center items-center"
             v-if="
               dashboardPanelData.data.queries[
                 dashboardPanelData.layout.currentQueryIndex
               ].fields?.z?.length < 1
             "
-            style="
-              width: 100%;
-              display: flex;
-              justify-content: center;
-              align-items: center;
-            "
           >
             <div class="mt-1">{{ zAxisHint }}</div>
           </div>
         </div>
       </div>
     </span>
-    <OSeparator />
-    <DashboardJoinsOption :dashboardData="dashboardData"></DashboardJoinsOption>
-    <OSeparator />
-    <!-- filters container -->
-    <DashboardFiltersOption
-      :dashboardData="dashboardData"
-    ></DashboardFiltersOption>
+    <template v-if="showJoinsAndFilters">
+      <OSeparator />
+      <DashboardJoinsOption
+        :dashboardData="dashboardData"
+      ></DashboardJoinsOption>
+      <OSeparator />
+      <!-- filters container -->
+      <DashboardFiltersOption
+        :dashboardData="dashboardData"
+      ></DashboardFiltersOption>
+    </template>
   </div>
 
   <!-- PromQL Builder Mode -->
@@ -799,6 +776,19 @@ export default defineComponent({
         : t("panel.yAxisShort");
     });
 
+    // Joins and Filters hide themselves in custom-SQL mode; the separators
+    // around them must follow the same condition or they stack into a
+    // double border after the Y-axis row.
+    const showJoinsAndFilters = computed(() => {
+      const currentQuery =
+        dashboardPanelData.data.queries[
+          dashboardPanelData.layout.currentQueryIndex
+        ];
+      return !(
+        currentQuery?.customQuery && dashboardPanelData.data.queryType === "sql"
+      );
+    });
+
     // Initialize treatAsNonTimestamp for existing fields (only for table charts)
     const initializeTreatAsNonTimestamp = () => {
       const currentQuery =
@@ -1308,16 +1298,13 @@ export default defineComponent({
      * under, and writes the upgrade back into the panel.
      *
      * The write-back has to happen HERE rather than being left to the deep
-     * watcher that copies builder state into the schema. That watcher is
-     * registered after this one runs `immediate`, so on the very load that
-     * matters it has not been set up yet and never fires — the builder would
-     * hold the new ids while the panel kept the old ones forever, and the
-     * compatibility table could never be retired.
+     * watcher that copies builder state into the schema: that watcher is
+     * registered after this one runs `immediate`, so on the load that matters it
+     * has not been set up yet and never fires.
      *
      * `normalizeSteps` hands back the array it was given when nothing needed
-     * upgrading, so a changed reference is exactly the signal that this panel
-     * was saved under old ids. A modern panel is not touched, and does not look
-     * dirty for having been opened.
+     * upgrading, so a changed reference is the signal that this panel was saved
+     * under old ids. A modern panel is not touched.
      */
     const loadSavedSteps = (currentQuery: any) => {
       const stored = currentQuery?.fields?.promql_operations || [];
@@ -1335,9 +1322,7 @@ export default defineComponent({
      *
      * A panel can hold several queries behind tabs, and the builder only ever
      * loads the tab you are looking at. Migrating just that one would leave a
-     * two-tab panel half-upgraded — saved with tab 2 still on the old ids — and
-     * the compatibility table could never actually be retired, because whether a
-     * panel migrated would depend on which tabs its author happened to click.
+     * two-tab panel half-upgraded — saved with tab 2 still on the old ids.
      */
     const migrateAllSavedSteps = () => {
       for (const slot of dashboardPanelData.data.queries ?? []) {
@@ -1445,11 +1430,11 @@ export default defineComponent({
      * written from OUTSIDE — which is what `applyDefaultPanelFields` does when it
      * seeds the metrics rule set's default on a query-type toggle.
      *
-     * Ordering made this necessary: the builder-mode watcher above reads the
-     * schema when the mode flips, but the seed lands a microtask later. The
-     * result was a panel whose QUERY was `sum(rate(x{}[4m]))` while the builder
-     * showed no operations at all — and since the builder is the sole writer of
-     * the query string, the user's very first click rewrote it to a bare `x{}`.
+     * The builder-mode watcher above reads the schema when the mode flips, but
+     * the seed lands a microtask later, so without this the builder would show no
+     * operations while the query already held the seeded value — and since the
+     * builder is the sole writer of the query string, the user's first click
+     * would rewrite it to a bare `x{}`.
      *
      * The equality guards matter: the deep watcher below writes these same
      * references straight back, so without them the two watchers would ping-pong.
@@ -1545,9 +1530,8 @@ export default defineComponent({
      * rather than seeding the local state and trusting the deep watcher above to
      * render it into the schema. That indirection does not survive here: this fires
      * `immediate`, i.e. during setup, and a mutation made then never reaches the deep
-     * watcher. The symptom was precise and baffling: the builder's chips were right
-     * while the query stayed empty. Writing both ends is idempotent anyway, since the
-     * deep watcher renders the same query back out of the same state.
+     * watcher. Writing both ends is idempotent anyway, since the deep watcher
+     * renders the same query back out of the same state.
      *
      * Deliberately only seeds an EMPTY slot: switching between existing tabs must
      * never rewrite a query that is already there.
@@ -1642,6 +1626,7 @@ export default defineComponent({
       currentYLabel,
       isPivotMode,
       reorderItems,
+      showJoinsAndFilters,
     };
   },
 });
diff --git a/web/src/components/dashboards/addPanel/DashboardQueryEditor.spec.ts b/web/src/components/dashboards/addPanel/DashboardQueryEditor.spec.ts
index 7d5e8dc6eb..019143b3de 100644
--- a/web/src/components/dashboards/addPanel/DashboardQueryEditor.spec.ts
+++ b/web/src/components/dashboards/addPanel/DashboardQueryEditor.spec.ts
@@ -275,20 +275,6 @@ describe("DashboardQueryEditor", () => {
             ],
             emits: ["update:query", "updateQuery", "runQuery"],
           },
-          "q-tabs": true, // Stub as true to prevent rendering
-          "q-tab": {
-            template: "<div><slot /></div>",
-            props: ["name", "label"],
-          },
-          "q-splitter": {
-            template:
-              '<div><slot name="before"></slot><slot name="after"></slot></div>',
-            props: ["modelValue", "limits", "disable"],
-          },
-          "q-select": {
-            template: '<div data-test="vrl-function-select"></div>',
-            props: ["modelValue", "options"],
-          },
         },
         mocks: {
           $t: (key: string) => key,
@@ -565,7 +551,7 @@ describe("DashboardQueryEditor", () => {
       wrapper = createWrapper();
 
       // Test editor configuration via the splitter component lookup
-      const splitter = wrapper.findComponent({ name: "QSplitter" });
+      const splitter = wrapper.findComponent({ name: "OSplitter" });
       expect(splitter.exists() || wrapper.exists()).toBe(true);
     });
 
diff --git a/web/src/components/dashboards/addPanel/DashboardQueryEditor.vue b/web/src/components/dashboards/addPanel/DashboardQueryEditor.vue
index 3c4f610057..e5fc7f3264 100644
--- a/web/src/components/dashboards/addPanel/DashboardQueryEditor.vue
+++ b/web/src/components/dashboards/addPanel/DashboardQueryEditor.vue
@@ -17,21 +17,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div class="col-auto" data-test="dashboard-panel-searchbar">
     <div
-      class="sql-bar flex flex-row items-center justify-between gap-x-3 h-10"
-      :style="{
-        backgroundColor:
-          store.state.theme === 'dark'
-            ? 'var(--o2-header-menu-bg)'
-            : 'var(--color-primary-100)',
-      }"
+      class="sql-bar flex flex-row items-center justify-between gap-x-3 h-10 bg-section-header-bg"
       @click.stop
     >
       <div
         class="flex flex-row items-center flex-1 min-w-0"
         data-test="dashboard-query-data"
       >
-        <div
-          style="max-width: 600px; overflow: hidden"
+        <div class="max-w-150 overflow-hidden"
         >
           <OTabs
             v-model="dashboardPanelData.layout.currentQueryIndex"
@@ -72,8 +65,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <span
                 v-else
                 @dblclick.stop.prevent="startEditQueryName(index, tab)"
-                class="cursor-pointer select-none whitespace-nowrap"
-                style="font-size: 12px"
+                class="cursor-pointer select-none whitespace-nowrap text-xs"
+               
                 :title="'Double-click to rename'"
                 :data-test="`dashboard-panel-query-tab-name-${index}`"
               >{{ tab.tabName || ('Query ' + (index + 1)) }}</span>
@@ -89,11 +82,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       ? 'visibility-off'
                       : 'visibility'
                   "
-                  class="ml-1 opacity-[0.7] transition-all duration-150 hover:opacity-100 hover:bg-[var(--o2-hover-gray)] hover:rounded-full"
+                  class="ml-1 opacity-[0.7] transition-all duration-150 hover:opacity-100 hover:bg-hover-gray hover:rounded-full cursor-pointer"
                   @click.stop="toggleQueryVisibility(index)"
                   @mousedown.stop.prevent
                   @pointerdown.stop.prevent
-                  style="cursor: pointer"
                   size="sm"
                   :data-test="`dashboard-panel-query-tab-visibility-${index}`"
                   :data-test-hidden="
@@ -117,11 +109,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 "
                 name="close"
                 size="sm"
-                class="opacity-60 transition-all duration-150 hover:opacity-100 hover:bg-[var(--o2-hover-gray)] hover:rounded-full"
+                class="opacity-60 transition-all duration-150 hover:opacity-100 hover:bg-hover-gray hover:rounded-full cursor-pointer"
                 @click.stop.prevent="removeTab(index)"
                 @mousedown.stop.prevent
                 @pointerdown.stop.prevent
-                style="cursor: pointer"
                 :data-test="`dashboard-panel-query-tab-remove-${index}`"
               />
             </OTab>
@@ -135,7 +126,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           icon-left="add"
         >
         </OButton>
-        <!-- D5: Warning for restricted chart types with multiple queries.
+        <!-- Warning for restricted chart types with multiple queries.
              Outlined soft-background chip (warning-soft variant + ring),
              height-aligned (h-8) with the toolbar's size="sm" buttons. -->
         <OTag
@@ -158,11 +149,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <template #label>
             <img
               :src="getImageURL('images/common/function.svg')"
-              :style="{
-                width: '16px',
-                height: '16px',
-                filter: store.state.theme === 'dark' ? 'invert(1)' : 'none',
-              }"
+              class="w-4 h-4 dark:invert"
             />
           </template>
         </OSwitch>
@@ -171,18 +158,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </div>
   </div>
   <div
-    class="flex flex-col flex-1"
+    class="flex flex-col flex-1 overflow-hidden"
     :style="
       !dashboardPanelData.layout.showQueryBar ? 'height: 0px; flex: none;' : ''
     "
-    style="overflow: hidden"
     data-test="dashboard-query"
   >
-      <div class="flex flex-col" style="width: 100%; height: 100%">
-      <div class="flex flex-col" style="width: 100%; height: 100%">
-        <div class="flex" style="height: 100%">
-          <OSplitter
-            style="width: 100%; height: 100%"
+      <div class="flex flex-col w-full h-full">
+      <div class="flex flex-col w-full h-full">
+        <div class="flex h-full">
+          <OSplitter class="w-full h-full"
             v-model="splitterModel"
             :disable="
               promqlMode || !dashboardPanelData.layout.vrlFunctionToggle
@@ -195,7 +180,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             ]"
           >
             <template #separator>
-              <div class="w-1 h-full bg-(--o2-border) transition-colors hover:bg-[orange]"></div>
+              <div class="w-1 h-full bg-border-default transition-colors hover:bg-[orange]"></div>
             </template>
             <template #before>
               <UnifiedQueryEditor
@@ -231,14 +216,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               />
             </template>
             <template #after>
-              <div style="display: flex; flex-direction: column; height: 100%; width: 100%">
-                <div style="flex: 1; min-height: 0; width: 100%">
-                  <UnifiedQueryEditor
+              <div class="flex flex-col h-full w-full">
+                <div class="flex-1 min-h-0 w-full">
+                  <UnifiedQueryEditor class="w-full h-full"
                     v-if="
                       !promqlMode && dashboardPanelData.layout.vrlFunctionToggle
                     "
                     data-test="dashboard-vrl-function-editor"
-                    style="width: 100%; height: 100%"
                     ref="vrlFnEditorRef"
                     :languages="['vrl']"
                     default-language="vrl"
@@ -264,11 +248,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     v-if="!dashboardPanelData.data.queries[dashboardPanelData.layout.currentQueryIndex].vrlFunctionQuery && functionEditorPlaceholderFlag"
                     class="absolute top-0 left-0 right-0 bottom-0 flex items-start pt-0.75 pr-2 pb-0 pl-[2.15rem] pointer-events-none z-1 select-none"
                   >
-                    <span class="font-mono text-[var(--text-base)] [line-height:1.3125rem] text-[#a0aec0] dark:text-[#718096] whitespace-nowrap overflow-hidden text-ellipsis">{{ vrlPlaceholder }}</span>
+                    <span class="font-mono text-[var(--text-sm)] [line-height:1.3125rem] text-text-placeholder whitespace-nowrap overflow-hidden text-ellipsis">{{ vrlPlaceholder }}</span>
                   </div>
                 </div>
-                <div style="flex-shrink: 0; width: 100%">
-                  <div style="display: flex;" class="items-center">
+                <div class="shrink-0 w-full">
+                  <div class="items-center flex">
                     <OSelect
                       v-model="selectedFunction"
                       :label="t('dashboard.useSavedFunction')"
@@ -287,7 +271,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       data-test="dashboard-addpanel-config-drilldown-info"
                     >
                       <template #icon-left
-                        ><OIcon name="info-outline" size="sm"
+><OIcon name="info-outline" size="sm"
                       /></template>
                       <OTooltip
                         :content="t('dashboard.vrlExtractionTooltip')"
@@ -301,7 +285,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </OSplitter>
         </div>
       </div>
-      <div style="color: red; z-index: 100000" class="mx-2 col-auto">
+      <div class="text-status-error-text z-100000 mx-2 col-auto">
         {{ dashboardPanelData.meta.errors.queryErrors.join(", ") }}
       </div>
     </div>
@@ -541,7 +525,7 @@ export default defineComponent({
           0,
     );
 
-    // D5: Warning banner for restricted chart types with multiple queries
+    // Warning banner for restricted chart types with multiple queries
     const multiQueryWarning = computed(() => {
       if (dashboardPanelData.data.queries.length <= 1) return null;
       if (promqlMode.value) return null;
@@ -706,7 +690,7 @@ export default defineComponent({
     };
 
     const toggleQueryVisibility = (index) => {
-      // Lazy-init for layouts loaded from saved dashboards that predate the multi-SQL feature.
+      // Lazy-init for older saved dashboard layouts that lack this array.
       if (!Array.isArray(dashboardPanelData.layout.hiddenQueries)) {
         dashboardPanelData.layout.hiddenQueries = [];
       }
diff --git a/web/src/components/dashboards/addPanel/DashboardSankeyChartBuilder.spec.ts b/web/src/components/dashboards/addPanel/DashboardSankeyChartBuilder.spec.ts
index 1910dbe7a4..b1abb2afc6 100644
--- a/web/src/components/dashboards/addPanel/DashboardSankeyChartBuilder.spec.ts
+++ b/web/src/components/dashboards/addPanel/DashboardSankeyChartBuilder.spec.ts
@@ -127,13 +127,6 @@ describe("DashboardSankeyChartBuilder", () => {
           DashboardJoinsOption: true,
           DynamicFunctionPopUp: true,
           "OIcon": true,
-          "q-tooltip": true,
-          "q-btn-group": true,
-          "q-btn": true,
-          "q-menu": true,
-          "q-input": true,
-          "q-select": true,
-          "q-separator": true,
         },
         mocks: {
           $t: (key: string) => key,
diff --git a/web/src/components/dashboards/addPanel/DashboardSankeyChartBuilder.vue b/web/src/components/dashboards/addPanel/DashboardSankeyChartBuilder.vue
index ce07b1c9e1..77ff9fef28 100644
--- a/web/src/components/dashboards/addPanel/DashboardSankeyChartBuilder.vue
+++ b/web/src/components/dashboards/addPanel/DashboardSankeyChartBuilder.vue
@@ -17,18 +17,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div v-if="!promqlMode && dashboardPanelData.data.type == 'sankey'">
     <!-- source container -->
-    <div style="display: flex; flex-direction: row" class="pl-3">
-      <div class="layout-name whitespace-nowrap min-w-[130px] flex items-center">
+    <div class="pl-3 flex flex-row">
+      <div class="layout-name whitespace-nowrap min-w-32.5 flex items-center">
         {{ t("panel.source") }}
         <OIcon name="info-outline" size="sm" class="ml-1" />
           <OTooltip :content="Hint" />
       </div>
-      <span class="layout-separator flex items-center ml-[2px] mr-[2px]">:</span>
+      <span class="layout-separator flex items-center ml-0.5 mr-0.5">:</span>
       <div
         class="axis-container droppable scroll flex-1 w-full flex flex-wrap border-transparent border-dashed border-2"
         :class="{
           'bg-[rgba(0,0,0,0.042)] border-white border-dotted': dashboardPanelData.meta.dragAndDrop.dragging,
-          'transition-all duration-200 bg-[var(--color-field-list-row-hover-bg)]':
+          'transition-all duration-200 bg-field-list-row-hover-bg':
             dashboardPanelData.meta.dragAndDrop.dragging &&
             dashboardPanelData.meta.dragAndDrop.currentDragArea == 'source',
         }"
@@ -75,17 +75,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :data-test="`dashboard-source-item-${sourceLabel}`"
               >
                 {{ sourceLabel }}
-                <template #icon-right
-                  ><OIcon name="arrow-drop-down" size="sm"
+                <template #icon-right><OIcon name="arrow-drop-down" size="sm"
                 /></template>
               </OButton>
             </template>
             <div
-              class="field-function-menu-popup dashboard-sankey-chart-builder-dropdown w-[771px]! h-[323px] shadow-[0px_4px_4px_0px_rgba(0,0,0,0.05)] p-4 shadow-[0px_3px_15px_rgba(0,0,0,0.1)] translate-y-2 rounded-none"
+              class="field-function-menu-popup dashboard-sankey-chart-builder-dropdown w-[48.1875rem]! h-[20.1875rem] shadow-md p-4 translate-y-2 rounded-none"
               :data-test="`dashboard-source-item-${sourceLabel}-menu`"
             >
-              <div
-                style="padding: 3px 16px 16px 16px"
+              <div class="pt-0.75 pr-4 pb-4 pl-4"
                 :style="{
                   width:
                     dashboardPanelData.data.queries[
@@ -129,7 +127,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </OButton>
         </OButtonGroup>
         <div
-          class="text-xs text-weight-bold text-center py-1"
+          class="text-xs font-bold text-center py-1"
           data-test="dashboard-sankey-source-empty-hint"
           v-if="
             dashboardPanelData.data.queries[
@@ -143,18 +141,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </div>
     <OSeparator />
     <!-- target container -->
-    <div style="display: flex; flex-direction: row" class="pl-3">
-      <div class="layout-name whitespace-nowrap min-w-[130px] flex items-center">
+    <div class="pl-3 flex flex-row">
+      <div class="layout-name whitespace-nowrap min-w-32.5 flex items-center">
         {{ t("panel.target") }}
         <OIcon name="info-outline" size="sm" class="ml-1" />
           <OTooltip :content="Hint" />
       </div>
-      <span class="layout-separator flex items-center ml-[2px] mr-[2px]">:</span>
+      <span class="layout-separator flex items-center ml-0.5 mr-0.5">:</span>
       <div
         class="axis-container droppable scroll flex-1 w-full flex flex-wrap border-transparent border-dashed border-2"
         :class="{
           'bg-[rgba(0,0,0,0.042)] border-white border-dotted': dashboardPanelData.meta.dragAndDrop.dragging,
-          'transition-all duration-200 bg-[var(--color-field-list-row-hover-bg)]':
+          'transition-all duration-200 bg-field-list-row-hover-bg':
             dashboardPanelData.meta.dragAndDrop.dragging &&
             dashboardPanelData.meta.dragAndDrop.currentDragArea == 'target',
         }"
@@ -201,17 +199,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :data-test="`dashboard-target-item-${targetLabel}`"
               >
                 {{ targetLabel }}
-                <template #icon-right
-                  ><OIcon name="arrow-drop-down" size="sm"
+                <template #icon-right><OIcon name="arrow-drop-down" size="sm"
                 /></template>
               </OButton>
             </template>
             <div
-              class="field-function-menu-popup dashboard-sankey-chart-builder-dropdown w-[771px]! h-[323px] shadow-[0px_4px_4px_0px_rgba(0,0,0,0.05)] p-4 shadow-[0px_3px_15px_rgba(0,0,0,0.1)] translate-y-2 rounded-none"
+              class="field-function-menu-popup dashboard-sankey-chart-builder-dropdown w-[48.1875rem]! h-[20.1875rem] shadow-md p-4 translate-y-2 rounded-none"
               :data-test="`dashboard-target-item-${targetLabel}-menu`"
             >
-              <div
-                style="padding: 3px 16px 16px 16px"
+              <div class="pt-0.75 pr-4 pb-4 pl-4"
                 :style="{
                   width:
                     dashboardPanelData.data.queries[
@@ -255,7 +251,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </OButton>
         </OButtonGroup>
         <div
-          class="text-xs text-weight-bold text-center py-1"
+          class="text-xs font-bold text-center py-1"
           v-if="
             dashboardPanelData.data.queries[
               dashboardPanelData.layout.currentQueryIndex
@@ -268,18 +264,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </div>
     <OSeparator />
     <!-- value container -->
-    <div style="display: flex; flex-direction: row" class="pl-3">
-      <div class="layout-name whitespace-nowrap min-w-[130px] flex items-center">
+    <div class="pl-3 flex flex-row">
+      <div class="layout-name whitespace-nowrap min-w-32.5 flex items-center">
         {{ t("panel.value") }}
         <OIcon name="info-outline" size="sm" class="ml-1" />
           <OTooltip :content="Hint" />
       </div>
-      <span class="layout-separator flex items-center ml-[2px] mr-[2px]">:</span>
+      <span class="layout-separator flex items-center ml-0.5 mr-0.5">:</span>
       <div
         class="axis-container droppable scroll flex-1 w-full flex flex-wrap border-transparent border-dashed border-2"
         :class="{
           'bg-[rgba(0,0,0,0.042)] border-white border-dotted': dashboardPanelData.meta.dragAndDrop.dragging,
-          'transition-all duration-200 bg-[var(--color-field-list-row-hover-bg)]':
+          'transition-all duration-200 bg-field-list-row-hover-bg':
             dashboardPanelData.meta.dragAndDrop.dragging &&
             dashboardPanelData.meta.dragAndDrop.currentDragArea == 'value',
         }"
@@ -326,17 +322,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :data-test="`dashboard-value-item-${valueLabel}`"
               >
                 {{ valueLabel }}
-                <template #icon-right
-                  ><OIcon name="arrow-drop-down" size="sm"
+                <template #icon-right><OIcon name="arrow-drop-down" size="sm"
                 /></template>
               </OButton>
             </template>
             <div
-              class="field-function-menu-popup dashboard-sankey-chart-builder-dropdown w-[771px]! h-[323px] shadow-[0px_4px_4px_0px_rgba(0,0,0,0.05)] p-4 shadow-[0px_3px_15px_rgba(0,0,0,0.1)] translate-y-2 rounded-none"
+              class="field-function-menu-popup dashboard-sankey-chart-builder-dropdown w-[48.1875rem]! h-[20.1875rem] shadow-md p-4 translate-y-2 rounded-none"
               :data-test="`dashboard-value-item-${valueLabel}-menu`"
             >
-              <div
-                style="padding: 3px 16px 16px 16px"
+              <div class="pt-0.75 pr-4 pb-4 pl-4"
                 :style="{
                   width:
                     dashboardPanelData.data.queries[
@@ -380,7 +374,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </OButton>
         </OButtonGroup>
         <div
-          class="text-xs text-weight-bold text-center py-1"
+          class="text-xs font-bold text-center py-1"
           v-if="
             dashboardPanelData.data.queries[
               dashboardPanelData.layout.currentQueryIndex
@@ -391,13 +385,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
       </div>
     </div>
-    <OSeparator />
-    <DashboardJoinsOption :dashboardData="dashboardData"></DashboardJoinsOption>
-    <OSeparator />
-    <!-- filters container -->
-    <DashboardFiltersOption
-      :dashboardData="dashboardData"
-    ></DashboardFiltersOption>
+    <template v-if="showJoinsAndFilters">
+      <OSeparator />
+      <DashboardJoinsOption
+        :dashboardData="dashboardData"
+      ></DashboardJoinsOption>
+      <OSeparator />
+      <!-- filters container -->
+      <DashboardFiltersOption
+        :dashboardData="dashboardData"
+      ></DashboardFiltersOption>
+    </template>
   </div>
 </template>
 
@@ -697,9 +695,23 @@ export default defineComponent({
       return commonBtnLabel(valueField);
     });
 
+    // Joins and Filters hide themselves in custom-SQL mode; the separators
+    // around them must follow the same condition or they stack into a
+    // double border.
+    const showJoinsAndFilters = computed(() => {
+      const currentQuery =
+        dashboardPanelData.data.queries[
+          dashboardPanelData.layout.currentQueryIndex
+        ];
+      return !(
+        currentQuery?.customQuery && dashboardPanelData.data.queryType === "sql"
+      );
+    });
+
     return {
       t,
       dashboardPanelData,
+      showJoinsAndFilters,
       removeSource,
       removeTarget,
       removeValue,
diff --git a/web/src/components/dashboards/addPanel/DrilldownPopUp.schema.ts b/web/src/components/dashboards/addPanel/DrilldownPopUp.schema.ts
index cb98106ff5..7027b94fb8 100644
--- a/web/src/components/dashboards/addPanel/DrilldownPopUp.schema.ts
+++ b/web/src/components/dashboards/addPanel/DrilldownPopUp.schema.ts
@@ -1,19 +1,18 @@
 // Copyright 2026 OpenObserve Inc.
 //
 // Validation schema for DrilldownPopUp.vue. The drilldown record is a nested
-// object; the form owns its scalar fields and the schema reproduces the old
-// `isFormValid`/`nameError`/inline-URL gate as a Zod `superRefine` keyed off the
-// drilldown `type`:
-//   • name              → always required (was nameError + isFormValid guard)
-//   • type === byUrl     → data.url required + protocol regex (was inline URL div)
+// object; the form owns its scalar fields and a Zod `superRefine` gates them
+// off the drilldown `type`:
+//   • name              → always required
+//   • type === byUrl     → data.url required + protocol regex
 //   • type === logs      → data.logsQuery required when logsMode === "custom"
 //   • type === byDashboard → data.folder + data.dashboard + data.tab required
 //
 // Field wiring (all name=-owned; the form is the sole source):
-//   • type / logsMode are OFormToggleGroup (name=-owned); superRefine branches on
-//     them. Only logsQuery (Monaco) is a non-OForm* widget whose value is bridged
-//     into the schema via setFieldValue.
-//   • data.variables[] is a FORM-OWNED field-array (indexed OFormCombobox rows,
+//   • type / logsMode are OFormToggleGroup; superRefine branches on them. Only
+//     logsQuery (Monaco) is a non-OForm* widget whose value is bridged into the
+//     schema via setFieldValue.
+//   • data.variables[] is a form-owned field-array (indexed OFormCombobox rows,
 //     name `data.variables[i].name/value`); kept loose here (no per-row rule).
 //
 // Validation TIMING is owned by OForm (submit-then-change). Factory keeps the
@@ -21,10 +20,10 @@
 
 import { z } from "zod";
 
-// Protocol-only URL check (mirrors the old isFormURLValid regex).
+// Protocol-only URL check.
 const URL_PROTOCOL_REGEX = /^(http|https|ftp|file|mailto|telnet|data|ws|wss):\/\//;
 
-// DEFERRED array row — kept loose; not enforced in this pass.
+// Array row — kept loose (no per-row rules).
 export const drilldownVariableRowSchema = z.object({
   name: z.string().optional().default(""),
   value: z.string().optional().default(""),
@@ -46,7 +45,7 @@ export const makeDrilldownPopUpSchema = (t: (_key: string) => string) =>
           dashboard: z.string().optional().default(""),
           tab: z.string().optional().default(""),
           passAllVariables: z.boolean().optional().default(true),
-          // DEFERRED dynamic array — not enforced (see header note).
+          // Dynamic array — kept loose (no per-row rules).
           variables: z
             .array(drilldownVariableRowSchema)
             .optional()
diff --git a/web/src/components/dashboards/addPanel/DrilldownPopUp.vue b/web/src/components/dashboards/addPanel/DrilldownPopUp.vue
index 9752107b6e..71d4e329c4 100644
--- a/web/src/components/dashboards/addPanel/DrilldownPopUp.vue
+++ b/web/src/components/dashboards/addPanel/DrilldownPopUp.vue
@@ -36,7 +36,7 @@
       required
       data-test="dashboard-config-panel-drilldown-name"
     />
-    <div style="margin-top: 0.75rem">
+    <div class="mt-3">
       <OFormToggleGroup name="type" :label="t('dashboard.goTo')">
         <OToggleGroupItem
           value="byDashboard"
@@ -65,7 +65,7 @@
       </OFormToggleGroup>
     </div>
 
-    <div v-if="drilldownData.type === 'logs'" style="margin-top: 10px">
+    <div class="mt-2.5" v-if="drilldownData.type === 'logs'">
       <div>
         <OFormToggleGroup
           name="data.logsMode"
@@ -81,17 +81,22 @@
         v-if="drilldownData.data.logsMode === 'custom'"
       >
         <template #default="{ field }">
-          <div style="margin-top: 10px">
-            <label class="o-input-label text-sm font-semibold leading-tight">{{ t("dashboard.enterCustomQuery") }}</label>
-            <query-editor
-              data-test="scheduled-alert-sql-editor"
-              ref="queryEditorRef"
-              editor-id="alerts-query-editor"
-              style="height: 80px"
-              :debounceTime="300"
-              :query="drilldownData.data.logsQuery"
-              @update:query="updateQueryValue"
-            />
+          <div class="mt-2.5">
+            <label class="o-input-label text-compact font-medium leading-tight text-input-label-text">{{ t("dashboard.enterCustomQuery") }}</label>
+            <!-- Fixed-height wrapper: CodeQueryEditor's root is h-full, so it
+                 fills this box. Putting h-20 on the editor itself collides with
+                 that h-full and collapses the editor. -->
+            <div class="h-20 mt-1">
+              <query-editor
+                class="h-full"
+                data-test="scheduled-alert-sql-editor"
+                ref="queryEditorRef"
+                editor-id="alerts-query-editor"
+                :debounceTime="300"
+                :query="drilldownData.data.logsQuery"
+                @update:query="updateQueryValue"
+              />
+            </div>
             <span
               v-if="field.state.meta.errors.length > 0"
               class="text-xs text-input-error-text leading-none mt-1 block"
@@ -105,7 +110,7 @@
       </component>
     </div>
     <div v-if="drilldownData.type == 'byUrl'">
-      <div style="margin-top: 10px; display: flex; flex-direction: column">
+      <div class="mt-2.5 flex flex-col">
         <OFormTextarea
           name="data.url"
           :label="t('dashboard.enterUrl')"
@@ -116,8 +121,8 @@
     </div>
 
     <div v-if="drilldownData.type == 'byDashboard'">
-      <div style="margin-top: 10px">
-        <div class="flex items-center my-[10px] w-full">
+      <div class="mt-2.5">
+        <div class="flex items-center my-2.5 w-full">
           <OFormSelect
             name="data.folder"
             :options="folderList"
@@ -128,7 +133,7 @@
             data-test="dashboard-drilldown-folder-select"
           />
         </div>
-        <div class="flex items-center my-[10px] w-full" v-if="drilldownData.data.folder">
+        <div class="flex items-center my-2.5 w-full" v-if="drilldownData.data.folder">
           <OFormSelect
             name="data.dashboard"
             :options="dashboardList"
@@ -139,7 +144,7 @@
             data-test="dashboard-drilldown-dashboard-select"
           />
         </div>
-        <div class="flex items-center my-[10px] w-full" v-if="drilldownData.data.dashboard">
+        <div class="flex items-center my-2.5 w-full" v-if="drilldownData.data.dashboard">
           <OFormSelect
             name="data.tab"
             :options="tabList"
@@ -152,16 +157,10 @@
         </div>
 
         <!-- array of variables name and its values -->
-        <div style="margin-top: 30px">
-          <div
-            style="
-              display: flex;
-              justify-content: space-between;
-              margin-bottom: 10px;
-              align-items: center;
-            "
+        <div class="mt-7.5">
+          <div class="flex justify-between mb-2.5 items-center"
           >
-            <span class="o-input-label text-sm font-semibold leading-tight">{{ t("dashboard.variables") }}</span>
+            <span class="o-input-label text-compact font-medium leading-tight text-input-label-text">{{ t("dashboard.variables") }}</span>
             <OButton
               variant="primary"
               size="sm"
@@ -176,8 +175,7 @@
             v-for="(variable, index) in drilldownData.data.variables"
             :key="index"
           >
-            <div
-              style="display: flex; gap: 0.625rem; margin-bottom: 0.625rem; align-items: center"
+            <div class="flex gap-2.5 mb-2.5 items-center"
               :key="JSON.stringify(variableNamesFn ?? {})"
             >
               <OFormCombobox
@@ -193,10 +191,9 @@
                 :items="options.selectedValue"
               />
 
-              <OIcon
+              <OIcon class="cursor-pointer shrink-0"
                 size="sm"
                 name="close"
-                style="cursor: pointer; flex-shrink: 0"
                 @click="() => removeVariableRow(index)"
                 :data-test="`dashboard-drilldown-variable-remove-${index}`"
               />
@@ -205,7 +202,7 @@
         </div>
       </div>
       <!-- radio button for new tab -->
-      <div style="margin-top: 10px">
+      <div class="mt-2.5">
         <OFormSwitch
           name="data.passAllVariables"
           :label="t('dashboard.passAllCurrentVariables')"
@@ -217,7 +214,7 @@
     </div>
 
     <!-- radio button for new tab -->
-    <div style="margin-top: 10px">
+    <div class="mt-2.5">
       <OFormSwitch
         name="targetBlank"
         :label="t('dashboard.openInNewTab')"
@@ -361,14 +358,14 @@ export default defineComponent({
           )
         : getDefaultDrilldownData();
 
-    // ── OForm wiring (rule ②/③: form is the SOLE source, no mirror) ───────────
-    // Every scalar control is `name=`-only (no v-model). `data.variables[]` is a
-    // FORM-OWNED field-array (indexed OFormCombobox names). `type`/`logsMode` are
+    // OForm wiring: the form is the sole source (no mirror). Every scalar
+    // control is `name=`-only (no v-model). `data.variables[]` is a form-owned
+    // field-array (indexed OFormCombobox names). `type`/`logsMode` are
     // OFormToggleGroup (name=-owned); only `logsQuery` (Monaco) is a non-OForm*
-    // widget bridged into the schema via setFieldValue. This component OWNS
-    // <OForm>, so it creates the form with useOForm and reads it reactively via
-    // form.useStore to drive the v-if (type/logsMode/folder/dashboard), the
-    // cascades, and the async loaders — ONE source of truth, no mirror (rule ③).
+    // widget bridged into the schema via setFieldValue. This component creates
+    // the form with useOForm and reads it reactively via form.useStore to drive
+    // the v-if (type/logsMode/folder/dashboard), the cascades, and the async
+    // loaders.
     const drilldownPopUpSchema = makeDrilldownPopUpSchema(t);
     const form = useOForm<DrilldownPopUpForm>({
       defaultValues: getRecordData(),
@@ -387,9 +384,8 @@ export default defineComponent({
     const removeVariableRow = (index: number) =>
       form.removeFieldValue("data.variables", index);
 
-    // Reactive READ of the form values (rule ③: form.useStore, NOT a local copy)
-    // — drives the v-if (type/logsMode/folder/dashboard), the cascades, and the
-    // async loaders.
+    // Reactive read of the form values (form.useStore) — drives the v-if
+    // (type/logsMode/folder/dashboard), the cascades, and the async loaders.
     const drilldownData = form.useStore((s: any) => s.values);
     const dashboardList: any = ref([]);
     const tabList: any = ref([]);
@@ -553,8 +549,8 @@ export default defineComponent({
 
     // @submit fires only after the Zod schema passes (name required +
     // type-conditional url/logsQuery/folder/dashboard/tab rules). The validated
-    // `value` is the sole source of truth (rule ②) — it carries every field,
-    // including the form-owned `data.variables[]` rows.
+    // `value` carries every field, including the form-owned `data.variables[]`
+    // rows.
     const onSubmit = async (value: DrilldownPopUpForm) => {
       const record = JSON.parse(JSON.stringify(value));
       // if editmode then made changes
@@ -750,9 +746,9 @@ export default defineComponent({
         form.reset(getRecordData());
 
         // NOTE: dependent lists are loaded in onMounted + refreshed by the
-        // folder / dashboard / drilldownData watches — do NOT re-fetch them here.
-        // Refreshing on every open reset the selected org when navigating away
-        // (#12932), so that on-open refresh was removed.
+        // folder / dashboard / drilldownData watches — do NOT re-fetch them
+        // here. Refreshing on every open resets the selected org when
+        // navigating away.
       },
     );
 
diff --git a/web/src/components/dashboards/addPanel/DrilldownUserGuide.spec.ts b/web/src/components/dashboards/addPanel/DrilldownUserGuide.spec.ts
index b74a7307ea..f83a2699b4 100644
--- a/web/src/components/dashboards/addPanel/DrilldownUserGuide.spec.ts
+++ b/web/src/components/dashboards/addPanel/DrilldownUserGuide.spec.ts
@@ -38,7 +38,7 @@ const mockGetBoundingClientRect = vi.fn(() => ({
 const getUserGuideEl = (): HTMLElement | null =>
   document.body.querySelector(".user-guide");
 const getHighlightEls = (): HTMLElement[] =>
-  Array.from(document.body.querySelectorAll(".user-guide .bg-highlight"));
+  Array.from(document.body.querySelectorAll(".user-guide .bg-highlight-bg"));
 const getGuideText = (): string => getUserGuideEl()?.textContent ?? "";
 
 describe("DrilldownUserGuide", () => {
@@ -343,9 +343,9 @@ describe("DrilldownUserGuide", () => {
 
       const userGuide = getUserGuideEl();
       expect(userGuide).toBeTruthy();
-      expect(userGuide!.classList.contains("theme-light")).toBe(true);
-      // Tailwind v4 with  prefix
-      expect(userGuide!.classList.contains("bg-white")).toBe(true);
+      // Theme is now handled by the theme-aware bg-surface-base token utility
+      // instead of theme-light / bg-white marker classes.
+      expect(userGuide!.classList.contains("bg-surface-base")).toBe(true);
     });
 
     it("should apply dark theme classes", async () => {
@@ -357,21 +357,21 @@ describe("DrilldownUserGuide", () => {
 
       const userGuide = getUserGuideEl();
       expect(userGuide).toBeTruthy();
-      expect(userGuide!.classList.contains("theme-dark")).toBe(true);
-      // Component uses bg-[var(--o2-bg-card-dark,#1a1a1a)] for dark theme
-      expect(
-        Array.from(userGuide!.classList).some((c) => c.startsWith("bg-["))
-      ).toBe(true);
+      // Same theme-aware token is used for dark; dark is resolved by the token,
+      // not by a theme-dark marker class.
+      expect(userGuide!.classList.contains("bg-surface-base")).toBe(true);
     });
 
-    it("should have access to store", () => {
+    it("should render the guide container without depending on the store", () => {
+      // The component no longer reads store.state.theme in JS; theme is fully
+      // token-driven, so it exposes no store on its instance.
       wrapper = createWrapper();
 
-      expect(wrapper.vm.store).toBeDefined();
-      expect(wrapper.vm.store.state).toBeDefined();
+      expect(wrapper.vm.store).toBeUndefined();
+      expect(typeof wrapper.vm.onUserGuideClick).toBe("function");
     });
 
-    it("should react to theme changes", async () => {
+    it("should keep the same theme-aware token class across theme changes", async () => {
       wrapper = createWrapper();
 
       store.state.theme = "light";
@@ -380,14 +380,15 @@ describe("DrilldownUserGuide", () => {
 
       let userGuide = getUserGuideEl();
       expect(userGuide).toBeTruthy();
-      expect(userGuide!.classList.contains("theme-light")).toBe(true);
+      expect(userGuide!.classList.contains("bg-surface-base")).toBe(true);
 
       store.state.theme = "dark";
       await wrapper.vm.$nextTick();
 
       userGuide = getUserGuideEl();
       expect(userGuide).toBeTruthy();
-      expect(userGuide!.classList.contains("theme-dark")).toBe(true);
+      // Class is unchanged; the token itself resolves dark vs light.
+      expect(userGuide!.classList.contains("bg-surface-base")).toBe(true);
     });
   });
 
@@ -411,13 +412,14 @@ describe("DrilldownUserGuide", () => {
 
       const userGuide = getUserGuideEl();
       expect(userGuide).toBeTruthy();
-      const style = userGuide!.getAttribute("style") ?? "";
+      const classes = Array.from(userGuide!.classList);
 
-      // Updated to match migrated styles
-      expect(style).toContain("position: fixed");
-      expect(style).toContain("z-index: 9999");
-      expect(style).toContain("width: 500px");
-      expect(style).toContain("max-height: 300px");
+      // The inline positioning/sizing block is now utilities:
+      // fixed / z-9999 / w-125 (31.25rem = 500px) / max-h-75 (18.75rem = 300px).
+      expect(classes).toContain("fixed");
+      expect(classes).toContain("z-9999");
+      expect(classes).toContain("w-125");
+      expect(classes).toContain("max-h-75");
     });
 
     it("should highlight code examples correctly", async () => {
@@ -431,7 +433,7 @@ describe("DrilldownUserGuide", () => {
 
       // Check that highlights have the correct class
       highlights.forEach((highlight) => {
-        expect(highlight.classList.contains("bg-highlight")).toBe(true);
+        expect(highlight.classList.contains("bg-highlight-bg")).toBe(true);
       });
     });
   });
@@ -452,8 +454,8 @@ describe("DrilldownUserGuide", () => {
     it("should have all required data properties", () => {
       wrapper = createWrapper();
 
-      expect(wrapper.vm.store).toBeDefined();
-      expect(wrapper.vm.showUserGuide).toBeDefined();
+      // store is no longer exposed; theme is token-driven.
+      expect(wrapper.vm.showUserGuide).toBe(false);
       expect(wrapper.vm.userGuideBtnRef).toBeDefined();
       expect(wrapper.vm.userGuideDivRef).toBeDefined();
     });
diff --git a/web/src/components/dashboards/addPanel/DrilldownUserGuide.vue b/web/src/components/dashboards/addPanel/DrilldownUserGuide.vue
index dedfefca86..aec16d1e99 100644
--- a/web/src/components/dashboards/addPanel/DrilldownUserGuide.vue
+++ b/web/src/components/dashboards/addPanel/DrilldownUserGuide.vue
@@ -7,135 +7,123 @@
       data-test="dashboard-drilldown-help-btn"
       icon-left="help-outline"
     >
-      <OTooltip :content="t('dashboard.drilldownUserGuide.userGuide')" side="bottom" align="center" />
+      <OTooltip content="User Guide" side="bottom" align="center" />
     </OButton>
   </div>
   <Teleport to="body">
   <div
-    class="user-guide p-[10px] overflow-y-auto [scrollbar-width:thin] [scrollbar-color:rgba(0,0,0,0.25)_rgba(0,0,0,0.05)]"
+    class="user-guide fixed z-9999 w-125 max-h-75 p-2.5 overflow-y-auto pointer-events-auto border border-border-default rounded-default bg-surface-base [&_ul]:m-0 [&_li]:m-0 [&_p]:m-0 [&_div]:m-0 [scrollbar-width:thin] [scrollbar-color:color-mix(in_srgb,var(--color-grey-950)_25%,transparent)_color-mix(in_srgb,var(--color-grey-950)_5%,transparent)]"
     v-show="showUserGuide"
-    style="
-      position: fixed;
-      z-index: 9999;
-      width: 500px;
-      max-height: 300px;
-      overflow-y: auto;
-      border: 1px solid gray;
-      border-radius: 5px;
-      pointer-events: auto;
-    "
-    :class="
-      store.state.theme == 'dark'
-        ? 'theme-dark bg-[var(--o2-bg-card-dark,#1a1a1a)]'
-        : 'theme-light bg-white'
-    "
     @mouseleave="showUserGuide = false"
     ref="userGuideDivRef"
   >
     <p>
-      {{ t('dashboard.drilldownUserGuide.intro') }}
+      In URL or while drilldown to another dashboard, you can use the following
+      dynamic variables:
     </p>
 
-    <div class="font-bold">{{ t('dashboard.drilldownUserGuide.useCurrentDashboardVariable') }}</div>
-    <p>{{ t('dashboard.drilldownUserGuide.referenceVariableFormat') }}</p>
+    <div class="font-bold">Use current dashboard's variable</div>
+    <p>You can reference a variable with the following format:</p>
     <ul>
       <li>
-        <span class="bg-highlight" :class="store.state.theme == 'dark' ? 'bg-[#747474]' : 'bg-[#e7e6e6]'">${variable_name}</span>
+        <span class="bg-highlight-bg px-1.25">${variable_name}</span>
         <br />
-        {{ t('dashboard.drilldownUserGuide.variableExample') }}
-        <span class="bg-highlight" :class="store.state.theme == 'dark' ? 'bg-[#747474]' : 'bg-[#e7e6e6]'">${test}</span>)
+        (For Example, if your variable name is "test", you can use
+        <span class="bg-highlight-bg px-1.25">${test}</span>)
       </li>
     </ul>
 
     <br />
 
-    <div class="font-bold">{{ t('dashboard.drilldownUserGuide.useCurrentQuery') }}</div>
-    <p>{{ t('dashboard.drilldownUserGuide.referenceCurrentQueryFormat') }}</p>
+    <div class="font-bold">Use current query</div>
+    <p>You can reference current query with the following format:</p>
     <ul>
-      <li><span class="bg-highlight" :class="store.state.theme == 'dark' ? 'bg-[#747474]' : 'bg-[#e7e6e6]'">${query}</span></li>
-      <li><span class="bg-highlight" :class="store.state.theme == 'dark' ? 'bg-[#747474]' : 'bg-[#e7e6e6]'">${query_encoded}</span></li>
+      <li><span class="bg-highlight-bg px-1.25">${query}</span></li>
+      <li><span class="bg-highlight-bg px-1.25">${query_encoded}</span></li>
     </ul>
     <br />
 
-    <div class="font-bold">{{ t('dashboard.drilldownUserGuide.useCurrentSelectedTimePeriod') }}</div>
+    <div class="font-bold">Use current selected time period</div>
     <p>
-      {{ t('dashboard.drilldownUserGuide.referenceTimePeriodFormat') }}
+      You can reference current selected Time period with the following format:
     </p>
     <ul>
-      <li><span class="bg-highlight" :class="store.state.theme == 'dark' ? 'bg-[#747474]' : 'bg-[#e7e6e6]'">${start_time}</span></li>
-      <li><span class="bg-highlight" :class="store.state.theme == 'dark' ? 'bg-[#747474]' : 'bg-[#e7e6e6]'">${end_time}</span></li>
+      <li><span class="bg-highlight-bg px-1.25">${start_time}</span></li>
+      <li><span class="bg-highlight-bg px-1.25">${end_time}</span></li>
     </ul>
-    {{ t('dashboard.drilldownUserGuide.forExample') }}
-    <span class="bg-highlight" :class="store.state.theme == 'dark' ? 'bg-[#747474]' : 'bg-[#e7e6e6]'">from=${start_time}&to=${end_time}</span>
+    For Example:
+    <span class="bg-highlight-bg px-1.25">from=${start_time}&to=${end_time}</span>
     <br />
-    <span class="font-bold">{{ t('dashboard.drilldownUserGuide.note') }}</span>
-    <span
-      >{{ t('dashboard.drilldownUserGuide.relativeTimeNote') }}
-      <span class="bg-highlight" :class="store.state.theme == 'dark' ? 'bg-[#747474]' : 'bg-[#e7e6e6]'">start_time</span> {{ t('dashboard.drilldownUserGuide.and') }}
-      <span class="bg-highlight" :class="store.state.theme == 'dark' ? 'bg-[#747474]' : 'bg-[#e7e6e6]'">end_time</span>.</span
+    <span class="font-bold">Note: </span>
+    <span>Even with a relative time period, you can still use
+      <span class="bg-highlight-bg px-1.25">start_time</span> and
+      <span class="bg-highlight-bg px-1.25">end_time</span>.</span
     >
     <br />
     <br />
-    <div class="font-bold">{{ t('dashboard.drilldownUserGuide.useSeriesNameAndValue') }}</div>
-    <p>{{ t('dashboard.drilldownUserGuide.referenceChartDataFormat') }}</p>
+    <div class="font-bold">Use Series name and value</div>
+    <p>You can reference the following variables to pass chart data:</p>
 
     <ul>
       <li>
-        <span class="bg-highlight" :class="store.state.theme == 'dark' ? 'bg-[#747474]' : 'bg-[#e7e6e6]'">${series.__name}</span> {{ t('dashboard.drilldownUserGuide.seriesNameDesc') }}
+        <span class="bg-highlight-bg px-1.25">${series.__name}</span> – The name of the
+        series.
       </li>
       <li>
-        <span class="bg-highlight" :class="store.state.theme == 'dark' ? 'bg-[#747474]' : 'bg-[#e7e6e6]'">${series.__value}</span> {{ t('dashboard.drilldownUserGuide.seriesValueDesc') }}
+        <span class="bg-highlight-bg px-1.25">${series.__value}</span> – The numeric value
+        of the data point.
       </li>
       <li>
-        <span class="bg-highlight" :class="store.state.theme == 'dark' ? 'bg-[#747474]' : 'bg-[#e7e6e6]'">${series.__axisValue}</span> {{ t('dashboard.drilldownUserGuide.seriesAxisValueDesc') }}
+        <span class="bg-highlight-bg px-1.25">${series.__axisValue}</span> – The value on
+        the axis for the selected/clicked data point.
       </li>
     </ul>
 
     <br />
 
-    <div class="font-bold">{{ t('dashboard.drilldownUserGuide.forTableChartDrilldown') }}</div>
+    <div class="font-bold">For table chart drilldown</div>
     <p>
-      {{ t('dashboard.drilldownUserGuide.referenceRowFieldIndex') }}
+      You can reference the row field and index with the following variables:
     </p>
     <ul>
       <li>
-        <span class="bg-highlight" :class="store.state.theme == 'dark' ? 'bg-[#747474]' : 'bg-[#e7e6e6]'"
-          >${row.field["field_label"]} or ${row.field.field_label}</span
+        <span class="bg-highlight-bg px-1.25">${row.field["field_label"]} or ${row.field.field_label}</span
         >
         <br />
-        {{ t('dashboard.drilldownUserGuide.rowFieldExample') }}
-        <span class="bg-highlight" :class="store.state.theme == 'dark' ? 'bg-[#747474]' : 'bg-[#e7e6e6]'">${row.field.test} </span> {{ t('dashboard.drilldownUserGuide.or') }}
-        <span class="bg-highlight" :class="store.state.theme == 'dark' ? 'bg-[#747474]' : 'bg-[#e7e6e6]'">${row.field["test"]}</span>)
+        (For Example, if your want to use "test" column's value of clicked row,
+        you can use <span class="bg-highlight-bg px-1.25">${row.field.test} </span> or
+        <span class="bg-highlight-bg px-1.25">${row.field["test"]}</span>)
       </li>
-      <li><span class="bg-highlight" :class="store.state.theme == 'dark' ? 'bg-[#747474]' : 'bg-[#e7e6e6]'">${row.index}</span></li>
+      <li><span class="bg-highlight-bg px-1.25">${row.index}</span></li>
     </ul>
 
     <br />
 
-    <div class="font-bold">{{ t('dashboard.drilldownUserGuide.forPieDonutChartDrilldown') }}</div>
-    <p>{{ t('dashboard.drilldownUserGuide.referenceSeriesValue') }}</p>
+    <div class="font-bold">For Pie/Donut chart drilldown</div>
+    <p>You can reference the series and value with the following variables:</p>
     <ul>
-      <li><span class="bg-highlight" :class="store.state.theme == 'dark' ? 'bg-[#747474]' : 'bg-[#e7e6e6]'">${series.__name}</span></li>
-      <li><span class="bg-highlight" :class="store.state.theme == 'dark' ? 'bg-[#747474]' : 'bg-[#e7e6e6]'">${series.__value}</span></li>
+      <li><span class="bg-highlight-bg px-1.25">${series.__name}</span></li>
+      <li><span class="bg-highlight-bg px-1.25">${series.__value}</span></li>
     </ul>
 
     <br />
 
-    <div class="font-bold">{{ t('dashboard.drilldownUserGuide.forSankeyChartDrilldown') }}</div>
+    <div class="font-bold">For Sankey chart drilldown</div>
     <p>
-      {{ t('dashboard.drilldownUserGuide.referenceSankey') }}
+      You can reference the edge source, target, and value, as well as the node
+      name and value, with the following variables:
     </p>
     <ul>
-      <li class="font-bold">{{ t('dashboard.drilldownUserGuide.edge') }}</li>
+      <li class="font-bold">Edge</li>
       <ul>
-        <li><span class="bg-highlight" :class="store.state.theme == 'dark' ? 'bg-[#747474]' : 'bg-[#e7e6e6]'">${edge.__source}</span></li>
-        <li><span class="bg-highlight" :class="store.state.theme == 'dark' ? 'bg-[#747474]' : 'bg-[#e7e6e6]'">${edge.__target}</span></li>
-        <li><span class="bg-highlight" :class="store.state.theme == 'dark' ? 'bg-[#747474]' : 'bg-[#e7e6e6]'">${edge.__value}</span></li>
+        <li><span class="bg-highlight-bg px-1.25">${edge.__source}</span></li>
+        <li><span class="bg-highlight-bg px-1.25">${edge.__target}</span></li>
+        <li><span class="bg-highlight-bg px-1.25">${edge.__value}</span></li>
       </ul>
-      <li class="font-bold">{{ t('dashboard.drilldownUserGuide.node') }}</li>
+      <li class="font-bold">Node</li>
       <ul>
-        <li><span class="bg-highlight" :class="store.state.theme == 'dark' ? 'bg-[#747474]' : 'bg-[#e7e6e6]'">${node.__name}</span></li>
-        <li><span class="bg-highlight" :class="store.state.theme == 'dark' ? 'bg-[#747474]' : 'bg-[#e7e6e6]'">${node.__value}</span></li>
+        <li><span class="bg-highlight-bg px-1.25">${node.__name}</span></li>
+        <li><span class="bg-highlight-bg px-1.25">${node.__value}</span></li>
       </ul>
     </ul>
   </div>
@@ -144,8 +132,6 @@
 
 <script lang="ts">
 import { ref } from "vue";
-import { useStore } from "vuex";
-import { useI18n } from "vue-i18n";
 import OButton from "@/lib/core/Button/OButton.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
 
@@ -153,8 +139,6 @@ export default {
   components: { OButton, OTooltip },
   name: "DrilldownUserGuide",
   setup() {
-    const { t } = useI18n();
-    const store = useStore();
     const showUserGuide = ref(false);
 
     const userGuideBtnRef: any = ref(null);
@@ -172,8 +156,6 @@ export default {
     };
 
     return {
-      t,
-      store,
       onUserGuideClick,
       showUserGuide,
       userGuideBtnRef,
@@ -184,22 +166,16 @@ export default {
 </script>
 
 <style scoped>
-/* Override global transparent-by-default scrollbar so it is always visible */
+/* keep(scrollbar): ::-webkit-scrollbar pseudo-elements have no utility form.
+   Overrides the global transparent-by-default scrollbar so it stays visible. */
 .user-guide::-webkit-scrollbar {
-  width: 6px;
+  width: 0.375rem;
 }
 .user-guide::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.25);
-  border-radius: 3px;
+  background: var(--color-border-strong);
+  border-radius: 0.1875rem;
 }
 .user-guide::-webkit-scrollbar-track {
-  background: rgba(0, 0, 0, 0.05);
-}
-
-.user-guide ul,
-.user-guide li,
-.user-guide p,
-.user-guide div {
-  margin: 0;
+  background: var(--color-surface-subtle);
 }
 </style>
diff --git a/web/src/components/dashboards/addPanel/HistogramIntervalDropDown.spec.ts b/web/src/components/dashboards/addPanel/HistogramIntervalDropDown.spec.ts
index 159ae01e44..536d8af70c 100644
--- a/web/src/components/dashboards/addPanel/HistogramIntervalDropDown.spec.ts
+++ b/web/src/components/dashboards/addPanel/HistogramIntervalDropDown.spec.ts
@@ -61,7 +61,7 @@ describe("HistogramIntervalDropDown", () => {
     it("should have correct component structure with OSelect", () => {
       wrapper = createWrapper();
 
-      // Component uses OSelect now (not q-select)
+      // Component uses OSelect now
       expect(wrapper.find('[data-test="histogram-interval-dropdown"]').exists()).toBe(true);
     });
 
diff --git a/web/src/components/dashboards/addPanel/MarkLineConfig.vue b/web/src/components/dashboards/addPanel/MarkLineConfig.vue
index b754789541..3e04b93443 100644
--- a/web/src/components/dashboards/addPanel/MarkLineConfig.vue
+++ b/web/src/components/dashboards/addPanel/MarkLineConfig.vue
@@ -21,9 +21,9 @@
       :key="index"
     >
       <div
-        class="flex justify-between pb-3 mb-3 border-b border-gray-500"
+        class="flex justify-between pb-3 mb-3 border-b border-border-default"
       >
-        <div style="width: 90%" class="flex flex-col gap-2">
+        <div class="w-[90%] flex flex-col gap-2">
           <OSelect
             v-model="dashboardPanelData.data.config.mark_line[index].type"
             :label="t('dashboard.markLineType')"
diff --git a/web/src/components/dashboards/addPanel/OverrideConfig.spec.ts b/web/src/components/dashboards/addPanel/OverrideConfig.spec.ts
index 30acef4c1a..d8ed06c61c 100644
--- a/web/src/components/dashboards/addPanel/OverrideConfig.spec.ts
+++ b/web/src/components/dashboards/addPanel/OverrideConfig.spec.ts
@@ -252,8 +252,8 @@ describe("OverrideConfig", () => {
     });
 
     it("should forward open state to OverrideConfigPopup via :open prop", async () => {
-      // After the q-dialog -> ODialog migration the component no longer wraps
-      // the popup in a <q-dialog v-model>. The popup itself receives the open
+      // After the dialog -> ODialog migration the component no longer wraps
+      // the popup in a modal v-model. The popup itself receives the open
       // state via the `:open` prop instead.
       wrapper = createWrapper();
 
@@ -268,7 +268,7 @@ describe("OverrideConfig", () => {
     });
 
     it("should close popup when OverrideConfigPopup emits close", async () => {
-      // Replaces the previous q-dialog v-model close behaviour: dismissal is
+      // Replaces the previous dialog v-model close behaviour: dismissal is
       // now driven by the popup emitting `close`.
       wrapper = createWrapper();
 
@@ -356,7 +356,7 @@ describe("OverrideConfig", () => {
     });
 
     it("should not pass theme-specific class to popup after migration", async () => {
-      // Migration: q-dialog wrapper + dark-mode/bg-white class binding removed.
+      // Migration: dialog wrapper + dark-mode/bg-white class binding removed.
       // OverrideConfigPopup is rendered directly with no theme class.
       store.state.theme = "dark";
       wrapper = createWrapper();
diff --git a/web/src/components/dashboards/addPanel/PanelFieldList.vue b/web/src/components/dashboards/addPanel/PanelFieldList.vue
index 3da6c5a64c..defad272b7 100644
--- a/web/src/components/dashboards/addPanel/PanelFieldList.vue
+++ b/web/src/components/dashboards/addPanel/PanelFieldList.vue
@@ -1,8 +1,8 @@
 <!-- Copyright 2026 OpenObserve Inc. -->
 
 <template>
-  <div class="w-full h-full flex flex-col px-3 bg-surface-panel border-r border-border-default">
-    <div class="flex items-center justify-between shrink-0 my-3">
+  <div class="w-full h-full flex flex-col bg-surface-panel border-r border-border-default">
+    <div class="flex items-center justify-between shrink-0 my-3 px-page-edge">
       <span class="text-base font-bold">{{ t("panel.fields") }}</span>
       <OButton
         variant="outline"
@@ -35,6 +35,7 @@
     >
       <!-- Stream selectors -->
       <template #before-list>
+        <div class="px-page-edge">
           <OSelect
             v-if="dashboardPanelDataPageKey !== 'metrics'"
             :model-value="currentStreamType"
@@ -46,10 +47,8 @@
             :disabled="dashboardPanelDataPageKey === 'logs'"
             @update:model-value="onStreamTypeChange"
           />
-          <!-- Metric type as a LETTER (C/G/H/S/O), not a glyph. It used to be an
-               icon per type (a hash for Counter, bars for Histogram, a speedometer
-               for Gauge…) with no way to tell which was which. The `badge` renders
-               inline beside the name and costs no row height. -->
+          <!-- Metric type as a LETTER (C/G/H/S/O), not a glyph. The `badge`
+               renders inline beside the name and costs no row height. -->
           <OSelect
             :model-value="currentStream"
             :label="t('dashboard.selectIndex')"
@@ -66,12 +65,13 @@
             @search="onStreamSearch"
             @update:model-value="onStreamChange"
           />
+        </div>
       </template>
 
       <!-- Group header -->
       <template #group-header="{ row }">
         <div
-          class="h-7! w-full flex justify-between items-center rounded font-semibold pl-2 pr-1 text-xs cursor-default select-none bg-(--o2-section-header-bg) text-(--o2-text-secondary)"
+          class="h-7! w-[calc(100%+2*var(--spacing-page-edge))] shrink-0 -ml-page-edge px-page-edge flex justify-between items-center font-semibold text-xs cursor-default select-none bg-section-header-bg text-text-secondary"
           :title="row.groupName"
         >
           <div class="flex-1 min-w-0">{{ row.groupName }}</div>
@@ -358,11 +358,11 @@
           <div
             v-for="i in 6"
             :key="i"
-            class="flex items-center gap-2 py-[0.25rem]"
+            class="flex items-center gap-2 py-1"
           >
             <OSkeleton
               type="rect"
-              class="w-[0.875rem] h-[0.875rem] rounded-sm flex-shrink-0"
+              class="w-3.5 h-3.5 rounded-default flex-shrink-0"
             />
             <OSkeleton type="text" class="flex-1" />
           </div>
@@ -375,7 +375,7 @@
           class="text-center py-[0.725rem] flex items-center justify-center"
         >
           <OIcon name="info" size="xs" />
-          <span class="pl-[0.375rem]">{{ t("search.noFieldFound") }}</span>
+          <span class="pl-1.5">{{ t("search.noFieldFound") }}</span>
         </div>
       </template>
 
@@ -436,6 +436,7 @@
 import { computed, ref, watch, onMounted, inject } from "vue";
 import { useI18n } from "vue-i18n";
 import { useStore } from "vuex";
+import { useTheme } from "@/composables/useTheme";
 import useDashboardPanelData from "@/composables/dashboard/useDashboardPanel";
 import { useLoading } from "@/composables/useLoading";
 import useStreams from "@/composables/useStreams";
@@ -509,33 +510,25 @@ const hideAllFieldsSelection = computed(() => props.hideAllFieldsSelection ?? fa
 
 /**
  * The badge is the type's INITIAL — `C`ounter, `G`auge, `H`istogram, `S`ummary,
- * `O`ther — not the whole word: it sits beside metric names that are already
- * long, and a full word pushed them into truncation. A letter is still learnable
- * in a way the old per-type icons (a hash, bars, a speedometer) were not.
+ * `O`ther — not the whole word, which pushed already-long metric names into
+ * truncation.
  */
 const initialOf = (label: string) => label.charAt(0).toUpperCase();
 
 /**
  * Stream name -> type-filter BUCKET id (`counter`, `gauge`, …), not its label.
- *
- * The bucket id is what both the label and the colour are keyed on, so it is
- * what gets carried around. Mapping to the label here and recovering the id
- * later with `label.toLowerCase()` worked only for as long as every label stayed
- * the capitalized spelling of its id — the day one reads "Gauge (native)", or is
- * translated, the lookup misses and the badge silently turns grey. Deriving the
- * label from the id is safe; deriving the id from the label is not.
+ * The bucket id keys both the label and the colour, so it is what gets carried
+ * around. Deriving the label from the id is safe; deriving the id from the label
+ * is not — a translated or decorated label misses the lookup and turns grey.
  */
 const metricTypeBuckets = computed<Record<string, string>>(() => {
   if (currentStreamType.value !== "metrics") return {};
   const streams = (dashboardPanelData.meta.stream.streamResults ?? []) as any[];
 
   // `buildTypeFilterBuckets`, not `buildMetricCards`: a badge needs one word per
-  // stream, and building the whole rule set — every variant, expression, legend
-  // and unit for every metric in the org — to get it was a heavy pass on a list
-  // that can run to thousands. This one runs the family model and the card-kind
-  // dispatch and stops. It also answers for the metadata-only family bases that
-  // `buildMetricCards` suppresses but the dropdown still lists, so the declared-
-  // type fallback that used to patch those up is gone.
+  // stream, and building the whole rule set for every metric would be a heavy
+  // pass on a list that can run to thousands. It also answers for the metadata-
+  // only family bases that `buildMetricCards` suppresses but the dropdown lists.
   return buildTypeFilterBuckets(streams);
 });
 
@@ -665,7 +658,7 @@ watch(
   { immediate: true },
 );
 
-const isDarkTheme = computed(() => store.state.theme === "dark");
+const { isDark } = useTheme();
 
 const streamOptions = computed(() =>
   (filteredStreams.value as any[]).map((s) => {
@@ -675,17 +668,14 @@ const streamOptions = computed(() =>
     const type = bucket ? (BADGE_LABELS[bucket] ?? "Other") : undefined;
     return {
       ...s,
-      // The chip is the initial; hovering it spells the type out. `C` alone is
-      // compact but ambiguous (Counter? Count?) — the title is what resolves it.
+      // The chip is the initial; hovering it (the title) spells the type out.
       badge: type ? initialOf(type) : undefined,
       badgeTitle: type,
       // Colour-coded from the SAME palette the Metrics Explorer badges use —
       // Counter blue, Gauge green, Histogram purple, Summary orange, Other grey —
-      // so a type looks the same wherever you meet it. A badge that classifies
-      // must be colour-coded to be worth anything; the default green-on-every-row
-      // outline carried no information at all.
+      // so a type looks the same wherever you meet it.
       badgeStyle: bucket
-        ? getBadgeStyle(bucket, isDarkTheme.value)
+        ? getBadgeStyle(bucket, isDark.value)
         : undefined,
     };
   }),
@@ -1052,16 +1042,10 @@ function onDragEnd(_row: FieldItem, _event: DragEvent) {
 
 // ── Sort ───────────────────────────────────────────────────────────────
 
-// We intentionally return 0 (no-op) here.
-//
-// `flattenGroupedFields` already produces the correct order:
-//   [customQueryFields…, vrlFunctionFields…, group_A_header, A_fields…, group_B_header, B_fields…]
-//
-// A naive sort that says "group headers come first" (the previous logic)
-// hoists every group header to the very top of the flat array — which is
-// what caused both stream headers (`_anomalies`, `default`) to stack at
-// the top with all fields jammed underneath the *second* group. Returning
-// 0 preserves the natural section-by-section order from flattenGroupedFields.
+// Intentional no-op: `flattenGroupedFields` already emits rows in section order
+// (query/vrl fields, then each group header followed by its fields). A real sort
+// that hoisted group headers first stacked every header at the top with the
+// fields jammed under the wrong group, so preserve the given order.
 function sortFieldsFn(_a: FieldItem, _b: FieldItem): number {
   return 0;
 }
diff --git a/web/src/components/dashboards/addPanel/PanelSidebar.spec.ts b/web/src/components/dashboards/addPanel/PanelSidebar.spec.ts
index 683e327081..6c5f29ca34 100644
--- a/web/src/components/dashboards/addPanel/PanelSidebar.spec.ts
+++ b/web/src/components/dashboards/addPanel/PanelSidebar.spec.ts
@@ -36,14 +36,8 @@ describe("PanelSidebar", () => {
             props: ["name"],
             inheritAttrs: false,
           },
-          "q-btn": {
-            template: '<button @click="$emit(\'click\', $event)" :data-test="$attrs[\'data-test\']" class="q-btn" :class="$attrs.class" :icon="icon"><slot /></button>',
-            props: ["square", "icon"],
-            emits: ["click"],
-            inheritAttrs: false,
-          },
           "OSeparator": {
-            template: '<div class="q-separator"></div>',
+            template: '<div class="o-separator"></div>',
           },
         },
       },
@@ -136,7 +130,7 @@ describe("PanelSidebar", () => {
       const icon = wrapper.find('[data-test="dashboard-sidebar"]');
       expect(icon.exists()).toBe(true);
       expect(icon.attributes("name")).toBe("expand-all");
-      expect(icon.classes()).toContain("mt-[10px]");
+      expect(icon.classes()).toContain("mt-2.5");
       expect(icon.classes()).toContain("rotate-90");
     });
 
@@ -368,7 +362,7 @@ describe("PanelSidebar", () => {
   });
 
   describe("Separator Rendering", () => {
-    it("should render q-separator", () => {
+    it("should render the separator", () => {
       wrapper = createWrapper();
       
       expect(wrapper.find('[data-test="panel-sidebar-separator"]').exists()).toBe(true);
@@ -406,8 +400,6 @@ describe("PanelSidebar", () => {
           plugins: [],
           stubs: {
             "OIcon": true,
-            "q-btn": true,
-            "q-separator": true,
           },
         },
       });
@@ -441,7 +433,7 @@ describe("PanelSidebar", () => {
       wrapper = createWrapper({ modelValue: false });
 
       const icon = wrapper.find('[data-test="dashboard-sidebar"]');
-      expect(icon.classes()).toContain("mt-[10px]");
+      expect(icon.classes()).toContain("mt-2.5");
       expect(icon.classes()).toContain("rotate-90");
     });
 
diff --git a/web/src/components/dashboards/addPanel/PanelSidebar.vue b/web/src/components/dashboards/addPanel/PanelSidebar.vue
index bbe084b894..19e5ffd16b 100644
--- a/web/src/components/dashboards/addPanel/PanelSidebar.vue
+++ b/web/src/components/dashboards/addPanel/PanelSidebar.vue
@@ -26,10 +26,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       data-test="panel-sidebar-header-collapsed"
       @click="toggleSidebar"
     >
-      <!-- <div class="mt-[10px] text-[20px]">+</div> -->
+      <!-- <div class="mt-2.5 text-xl">+</div> -->
       <OIcon
         name="expand-all" size="sm"
-        class="mt-[10px] text-[20px] rotate-90"
+        class="mt-2.5 text-xl rotate-90"
         data-test="dashboard-sidebar"
       />
       <div
@@ -39,7 +39,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </div>
     <div
       v-else
-      class="flex items-center justify-between h-[60px] px-[10px] shrink-0"
+      class="flex items-center justify-between h-15 px-2.5 shrink-0"
       data-test="panel-sidebar-header-expanded"
     >
       <div
@@ -58,8 +58,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </div>
     <OSeparator class="-mt-px shrink-0" data-test="panel-sidebar-separator" />
     <div
-      class="scroll"
-      style="height: calc(100vh - 176px); overflow-y: auto;"
+      class="scroll h-[calc(100vh_-_11rem)] overflow-y-auto"
       data-test="panel-sidebar-content"
       v-if="isOpen"
       @scroll.passive="onSidebarScroll"
diff --git a/web/src/components/dashboards/addPanel/PromQLChartConfig.spec.ts b/web/src/components/dashboards/addPanel/PromQLChartConfig.spec.ts
index 3e0f0d6811..6582be0782 100644
--- a/web/src/components/dashboards/addPanel/PromQLChartConfig.spec.ts
+++ b/web/src/components/dashboards/addPanel/PromQLChartConfig.spec.ts
@@ -195,7 +195,7 @@ describe("PromQLChartConfig", () => {
       expect(
         wrapper.find('[data-test="dashboard-config-maps-name-label"]').exists(),
       ).toBe(true);
-      // dashboard-config-maps-type (mapsMapType q-select) was removed in config redesign (PR #10917)
+      // dashboard-config-maps-type (mapsMapType select) was removed in config redesign (PR #10917)
       expect(
         wrapper.find('[data-test="dashboard-config-maps-type"]').exists(),
       ).toBe(false);
@@ -979,7 +979,7 @@ describe("PromQLChartConfig", () => {
   });
 
   describe("ODialog Migration", () => {
-    // After migration the q-dialog wrapper around ColumnOrderPopUp was removed.
+    // After migration the dialog wrapper around ColumnOrderPopUp was removed.
     // ColumnOrderPopUp now owns its own ODialog and accepts `:open` from the
     // parent. These tests verify the new contract: prop wiring (open,
     // column-order, available-columns) and event handler wiring (@cancel,
@@ -1012,10 +1012,10 @@ describe("PromQLChartConfig", () => {
       return wrapper;
     };
 
-    it("should not render q-dialog wrapper around ColumnOrderPopUp", async () => {
+    it("should not render the legacy dialog wrapper around ColumnOrderPopUp", async () => {
       await setupAllModeWrapper();
 
-      // The legacy data-test was applied to the removed <q-dialog>.
+      // The legacy data-test was applied to the removed dialog.
       // It must not appear in the migrated template.
       expect(
         wrapper.find('[data-test="column-order-dialog"]').exists(),
diff --git a/web/src/components/dashboards/addPanel/QueryTypeSelector.vue b/web/src/components/dashboards/addPanel/QueryTypeSelector.vue
index 1ac9352dca..5735bf0c59 100644
--- a/web/src/components/dashboards/addPanel/QueryTypeSelector.vue
+++ b/web/src/components/dashboards/addPanel/QueryTypeSelector.vue
@@ -411,22 +411,15 @@ export default defineComponent({
         // — `customQuery` is.
         if (query.customQuery && query.query) return;
 
-        // Everything above inspects the CURRENT slot, but what we are about to
-        // do is panel-wide: `changeToggle` flips `data.queryType` and clears
-        // EVERY query, because SQL and PromQL are not interchangeable. So the
-        // other slots get a say.
-        //
-        // SQL over a metrics stream is legal — this watcher's whole premise is
-        // that it is merely never what anyone wants — so a SQL panel can quite
-        // reasonably gain a second query on a metrics stream. Adding one used to
-        // erase the first query's SQL and convert the panel to PromQL, which no
-        // one asked for. A panel with a query already written in it is one the
-        // user is building; converting it is their call, one click away.
-        // "Has something in it" is a query string AND a stream to run it
-        // against: a slot the user has not pointed at anything yet still carries
-        // the editor's placeholder SQL (`SELECT histogram(_timestamp) … FROM ""`),
-        // and treating that as work would block the auto-select on exactly the
-        // brand-new panels it exists for.
+        // Everything above inspects the CURRENT slot, but `changeToggle` is
+        // panel-wide: it flips `data.queryType` and clears EVERY query, because
+        // SQL and PromQL are not interchangeable. So the other slots get a say —
+        // a SQL panel can reasonably gain a second query on a metrics stream.
+        // "Has work" = a query string AND a stream to run it against: a slot the
+        // user has not pointed at anything yet still carries the editor's
+        // placeholder SQL (`SELECT histogram(_timestamp) … FROM ""`), and treating
+        // that as work would block the auto-select on the brand-new panels it
+        // exists for.
         const siblingsHaveWork = dashboardPanelData.data.queries.some(
           (q: any, index: number) =>
             index !== dashboardPanelData.layout.currentQueryIndex &&
diff --git a/web/src/components/dashboards/addPanel/ShowLegendsPopup.spec.ts b/web/src/components/dashboards/addPanel/ShowLegendsPopup.spec.ts
index 8c65625a39..ea612b8e46 100644
--- a/web/src/components/dashboards/addPanel/ShowLegendsPopup.spec.ts
+++ b/web/src/components/dashboards/addPanel/ShowLegendsPopup.spec.ts
@@ -85,20 +85,6 @@ describe("ShowLegendsPopup Component", () => {
         stubs: {
           ODialog: ODialogStub,
           OButton: OButtonStub,
-          "q-card": {
-            template: '<div class="q-card" :data-test="$attrs[\'data-test\']"><slot /></div>',
-          },
-          "q-card-section": {
-            template: '<div class="q-card-section"><slot /></div>',
-          },
-          "q-btn": {
-            template:
-              '<button @click="$emit(\'click\', $event)" :data-test="$attrs[\'data-test\']" :icon="$attrs.icon"><slot /></button>',
-            emits: ["click"],
-          },
-          "q-tooltip": {
-            template: '<span class="q-tooltip"><slot /></span>',
-          },
           "OIcon": {
             template: '<span class="OIcon">{{ $attrs.name }}</span>',
           },
diff --git a/web/src/components/dashboards/addPanel/ShowLegendsPopup.vue b/web/src/components/dashboards/addPanel/ShowLegendsPopup.vue
index 6efec4dfab..dd3054fee1 100644
--- a/web/src/components/dashboards/addPanel/ShowLegendsPopup.vue
+++ b/web/src/components/dashboards/addPanel/ShowLegendsPopup.vue
@@ -24,7 +24,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   >
     <template #header-right>
       <div class="flex items-center">
-        <span class="legend-count mr-3" style="font-size: 14px" data-test="dashboard-show-legends-count">
+        <span class="legend-count mr-3 text-sm" data-test="dashboard-show-legends-count">
           {{ t("dashboard.totalLegends", { count: legends.length }) }}
         </span>
         <OButton
@@ -33,8 +33,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           @click.stop="copyAllLegends"
           data-test="dashboard-show-legends-copy-all"
         >
-          <template #icon-left
-            ><OIcon :name="isAllCopied ? 'check' : 'content-copy'" size="sm"
+          <template #icon-left><OIcon :name="isAllCopied ? 'check' : 'content-copy'" size="sm"
           /></template>
           {{ isAllCopied ? "Copied" : "Copy all" }}
         </OButton>
@@ -45,21 +44,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <div
       data-test="dashboard-show-legends-popup"
     >
-      <div class="scroll max-h-[400px] overflow-y-auto py-[3px]">
-        <div v-if="legends.length === 0" class="p-3 text-center min-h-[100px] flex items-center justify-center">
+      <div class="scroll max-h-100 overflow-y-auto py-0.75">
+        <div v-if="legends.length === 0" class="p-3 text-center min-h-25 flex items-center justify-center">
           {{ t("dashboard.noLegendsAvailable") }}
         </div>
         <div v-else class="flex flex-col">
           <div
             v-for="(legend, index) in legends"
             :key="index"
-            class="legend-item px-2 py-1 last:border-b-0"
+            class="legend-item group px-2 py-1 last:border-b-0"
             :data-test="`dashboard-legend-item-${index}`"
           >
             <div class="flex items-center flex-nowrap w-full">
               <div
-                class="w-5 h-3 rounded-sm mr-[10px] shrink-0"
-                :style="{ backgroundColor: legend.color || '#5960b2' }"
+                class="w-5 h-3 rounded-default mr-2.5 shrink-0"
+                :style="{ backgroundColor: legend.color || DEFAULT_LEGEND_COLOR }"
               ></div>
               <div class="break-all overflow-wrap-anywhere whitespace-normal leading-[1.4] text-xs" data-test="dashboard-legend-item-text">
                 {{ legend.name }}
@@ -67,13 +66,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <OButton
                 variant="ghost"
                 size="icon"
-                class="ml-1"
+                class="ml-1 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity duration-200 ease-in-out"
                 data-test="dashboard-legend-copy-btn"
                 :data-copied="isLegendCopied(index) ? 'true' : undefined"
                 @click.stop="copyLegend(legend.name, index)"
               >
-                <template #icon-left
-                  ><OIcon
+                <template #icon-left><OIcon
                     :name="isLegendCopied(index) ? 'check' : 'content-copy'" size="sm"
                 /></template>
                 <OTooltip :content="isLegendCopied(index) ? 'Copied!' : 'Copy legend'" />
@@ -90,7 +88,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { defineComponent, computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { copyToClipboard } from "@/utils/clipboard";
-import { useStore } from "vuex";
+import { useTheme } from "@/composables/useTheme";
 import {
   getSeriesColor,
   getColorPalette,
@@ -100,6 +98,10 @@ import ODialog from "@/lib/overlay/Dialog/ODialog.vue";
 
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
+// Fallback swatch colour for a legend entry that carries no series colour.
+// A :style binding is resolved by the DOM, so it takes the brand token directly.
+const DEFAULT_LEGEND_COLOR = "var(--color-brand-indigo)";
+
 export default defineComponent({
   name: "ShowLegendsPopup",
   components: { OButton, ODialog, OIcon, OTooltip },
@@ -116,7 +118,7 @@ export default defineComponent({
   emits: ["update:open"],
   setup(props: any, { emit }) {
     const { t } = useI18n();
-    const store = useStore();
+    const { isDark } = useTheme();
     const copiedLegendIndices = ref(new Set<number>());
     const isAllCopied = ref(false);
 
@@ -165,7 +167,7 @@ export default defineComponent({
       if (chartMin === Infinity) chartMin = 0;
       if (chartMax === -Infinity) chartMax = 0;
 
-      const theme = store.state.theme === "dark" ? "dark" : "light";
+      const theme = isDark.value ? "dark" : "light";
       const colorPalette = getColorPalette(theme);
 
       // Helper to get color
@@ -264,6 +266,7 @@ export default defineComponent({
 
     return {
       t,
+      DEFAULT_LEGEND_COLOR,
       legends,
       closePopup,
       copyLegend,
@@ -275,14 +278,3 @@ export default defineComponent({
 });
 </script>
 
-<style>
-.legend-item [data-test="dashboard-legend-copy-btn"] {
-  opacity: 0;
-  transition: opacity 0.2s ease-in-out;
-  flex-shrink: 0;
-}
-
-.legend-item:hover [data-test="dashboard-legend-copy-btn"] {
-  opacity: 1;
-}
-</style>
diff --git a/web/src/components/dashboards/addPanel/ValueMappingPopUp.spec.ts b/web/src/components/dashboards/addPanel/ValueMappingPopUp.spec.ts
index 214473de13..8ec360c520 100644
--- a/web/src/components/dashboards/addPanel/ValueMappingPopUp.spec.ts
+++ b/web/src/components/dashboards/addPanel/ValueMappingPopUp.spec.ts
@@ -265,7 +265,7 @@ describe("ValueMappingPopUp", () => {
 
     it('should render "cancel" icon in the page', () => {
       wrapper = createWrapper();
-      // After q-icon → OIcon migration, "cancel" is the OIcon name prop, not a vm property
+      // After the icon → OIcon migration, "cancel" is the OIcon name prop, not a vm property
       const cancelIcons = wrapper
         .findAllComponents({ name: "OIcon" })
         .filter((i: any) => i.props("name") === "cancel");
diff --git a/web/src/components/dashboards/addPanel/customChartExamples/CustomChartConfirmDialog.vue b/web/src/components/dashboards/addPanel/customChartExamples/CustomChartConfirmDialog.vue
index d9ecada102..9445270942 100644
--- a/web/src/components/dashboards/addPanel/customChartExamples/CustomChartConfirmDialog.vue
+++ b/web/src/components/dashboards/addPanel/customChartExamples/CustomChartConfirmDialog.vue
@@ -36,7 +36,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           data-test="replace-query-checkbox"
         />
         <div
-          class="text-xs mt-1 ml-7 text-gray-500 dark:text-gray-400"
+          class="text-xs mt-1 ml-7 text-text-secondary"
         >
           {{ t('dashboard.customChartConfirmDialog.exampleQueryInserted') }}
         </div>
diff --git a/web/src/components/dashboards/addPanel/customChartExamples/CustomChartTypeSelector.vue b/web/src/components/dashboards/addPanel/customChartExamples/CustomChartTypeSelector.vue
index 52bb21ca1e..b6daf77ca4 100644
--- a/web/src/components/dashboards/addPanel/customChartExamples/CustomChartTypeSelector.vue
+++ b/web/src/components/dashboards/addPanel/customChartExamples/CustomChartTypeSelector.vue
@@ -15,16 +15,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <OCard
+  <!-- Height matches the host ODialog's own max-h-[90vh] cap (minus its body
+       padding + borders) so the dialog body never overflows. That keeps the
+       inner right-content area as the single scroller instead of stacking a
+       second scrollbar on the dialog body. -->
+  <OCard class="p-0 w-full h-[calc(90vh_-_2rem)] overflow-hidden flex flex-col"
     data-test="custom-chart-type-selector-popup"
-    style="
-      padding: 0;
-      width: 100%;
-      height: calc(100vh - 57px);
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-    "
   >
     <!-- Header -->
     <OCardSection role="header">
@@ -35,7 +31,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           v-model="searchQuery"
           :placeholder="t('dashboard.customChartTypeSelector.searchCharts')"
           clearable
-          style="width: 280px; flex: 0 0 280px; margin-left: 16px;"
+          class="w-70 flex-[0_0_17.5rem] ml-4"
           @clear="searchQuery = ''"
         />
         <div class="flex-1" />
@@ -54,25 +50,25 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     <!-- Main Content -->
     <OCardSection
-      class="flex"
-      style="height: calc(100% - 60px); overflow: hidden; padding: 0"
+      class="flex h-[calc(100%_-_3.75rem)] overflow-hidden p-0"
     >
-      <div class="flex flex-nowrap" style="height: 100%; width: 100%">
+      <div class="flex flex-nowrap h-full w-full">
         <!-- Left Sidebar -->
         <OCard
-          class="p-4"
-          style="width: 160px; height: 100%; flex-shrink: 0; overflow-y: auto"
+          class="p-4 w-40 h-full shrink-0 overflow-y-auto"
         >
-          <div class="text-sm font-medium mb-3 text-weight-bold">{{ t('dashboard.customChartTypeSelector.chartTypes') }}</div>
+          <div class="text-sm font-medium mb-3 font-bold">{{ t('dashboard.customChartTypeSelector.chartTypes') }}</div>
           <ul class="flex flex-col list-none p-0 m-0">
             <li
               v-for="(category, index) in chartCategories"
               :key="index"
               @click="scrollToCategory(category.chartLabel)"
-              class="flex items-center px-3 py-2 cursor-pointer rounded mb-1 transition-all duration-200 hover:bg-black/4"
-              :class="{
-                'bg-(--q-primary) text-white font-semibold': selectedCategory === category.chartLabel,
-              }"
+              class="flex items-center px-3 py-2 cursor-pointer rounded-default mb-1 transition-all duration-200"
+              :class="
+                selectedCategory === category.chartLabel
+                  ? 'bg-theme-accent text-text-inverse font-semibold'
+                  : 'hover:bg-button-ghost-hover-bg'
+              "
               data-test="chart-category-item"
             >
               <span class="text-sm">{{ category.chartLabel }}</span>
@@ -83,20 +79,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- Right Content Area -->
         <div
           ref="contentArea"
-          class="p-3"
-          style="flex: 1; height: 100%; overflow-y: auto; overflow-x: hidden"
+          class="p-3 flex-1 h-full overflow-y-auto overflow-x-hidden"
           @scroll="handleScroll"
         >
           <!-- No Results Message -->
           <div
             v-if="filteredCategories.length === 0"
-            class="flex justify-center items-center"
-            style="height: 100%"
+            class="flex justify-center items-center h-full"
           >
             <div class="text-center">
-              <OIcon name="search-off" style="width: 4rem; height: 4rem;" />
-              <div class="text-xl font-semibold text-gray-400 mt-3">{{ t('dashboard.customChartTypeSelector.noResultsFound') }}</div>
-              <div class="text-sm text-gray-400 mt-2">
+              <OIcon class="w-16 h-16" name="search-off" />
+              <div class="text-xl font-semibold text-text-muted mt-3">{{ t('dashboard.customChartTypeSelector.noResultsFound') }}</div>
+              <div class="text-sm text-text-muted mt-2">
                 {{ t('dashboard.customChartTypeSelector.trySearchingDifferentKeywords') }}
               </div>
             </div>
@@ -110,7 +104,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             :data-category="category.chartLabel"
             data-test="chart-category-section"
           >
-            <div class="text-xl font-semibold mb-3 text-weight-medium">
+            <div class="text-xl font-semibold mb-3 font-medium">
               {{ category.chartLabel }}
             </div>
             <div class="flex gap-3">
@@ -120,15 +114,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 class="col-xs-12 col-sm-6 col-md-4 col-lg-3"
               >
                 <OCard
-                  class="cursor-pointer transition-all duration-200 h-full hover:shadow-[0_4px_12px_rgba(0,0,0,0.15)] hover:-translate-y-0.5"
+                  class="cursor-pointer transition-all duration-200 h-full hover:shadow-[0_4px_12px_color-mix(in_srgb,var(--color-black)_15%,transparent)] hover:-translate-y-0.5"
                   :class="{
-                    'border-2 border-(--q-primary) shadow-[0_4px_12px_rgba(var(--q-primary-rgb),0.3)]': selectedChart?.value === chart.value,
+                    'border-2 border-theme-accent shadow-[0_4px_12px_color-mix(in_srgb,var(--color-theme-accent)_30%,transparent)]': selectedChart?.value === chart.value,
                   }"
                   @click="selectChart(chart)"
                   data-test="chart-type-card"
                 >
                   <OCardSection class="p-2">
-                    <div class="w-full h-37.5 flex items-center justify-center bg-[#f8f8f8] rounded overflow-hidden">
+                    <div class="w-full h-37.5 flex items-center justify-center bg-surface-subtle rounded-default overflow-hidden">
                       <img
                         :src="chart.asset"
                         :alt="chart.label"
@@ -138,7 +132,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     </div>
                   </OCardSection>
                   <OCardSection class="pt-0 px-2 pb-2">
-                    <div class="text-xs text-center text-weight-medium">
+                    <div class="text-xs text-center font-medium">
                       {{ chart.label }}
                     </div>
                   </OCardSection>
diff --git a/web/src/components/dashboards/addPanel/dynamicFunction/DynamicFunctionPopUp.vue b/web/src/components/dashboards/addPanel/dynamicFunction/DynamicFunctionPopUp.vue
index 8fa2ef6d71..81f8838083 100644
--- a/web/src/components/dashboards/addPanel/dynamicFunction/DynamicFunctionPopUp.vue
+++ b/web/src/components/dashboards/addPanel/dynamicFunction/DynamicFunctionPopUp.vue
@@ -7,11 +7,11 @@
         : 'flex flex-col gap-y-2'
     "
   >
-    <div style="width: auto; flex-shrink: 0;">
-      <div class="font-semibold text-[13px] pb-3" data-test="dynamic-function-popup-property-label">{{ t('dashboard.dynamicFunctionPopUp.property') }}</div>
-      <div style="display: flex; flex-direction: column; gap: 14px">
+    <div class="w-auto shrink-0">
+      <div class="font-semibold text-compact pb-3" data-test="dynamic-function-popup-property-label">{{ t('dashboard.dynamicFunctionPopUp.property') }}</div>
+      <div class="flex flex-col gap-3.5">
         <div>
-          <div class="text-[13px] font-normal leading-[70%] pb-0.75" data-test="dynamic-function-popup-label-text">{{ t('dashboard.dynamicFunctionPopUp.label') }}</div>
+          <div class="text-compact font-normal leading-[70%] pb-0.75" data-test="dynamic-function-popup-label-text">{{ t('dashboard.dynamicFunctionPopUp.label') }}</div>
           <OInput
             v-model="fields.label"
             size="sm"
@@ -20,7 +20,7 @@
           />
         </div>
         <div>
-          <div class="text-[13px] font-normal leading-[70%] pb-0.75">{{ t('dashboard.dynamicFunctionPopUp.alias') }}</div>
+          <div class="text-compact font-normal leading-[70%] pb-0.75">{{ t('dashboard.dynamicFunctionPopUp.alias') }}</div>
           <OInput
             v-model="fields.alias"
             size="sm"
@@ -72,8 +72,8 @@
         animated
       >
         <OTabPanel name="build">
-          <div class="pt-2" style="max-height: 26.25rem; overflow: auto;">
-            <div class="font-semibold text-[13px] pb-3">{{ t('dashboard.dynamicFunctionPopUp.configuration') }}</div>
+          <div class="pt-2 max-h-105 overflow-auto">
+            <div class="font-semibold text-compact pb-3">{{ t('dashboard.dynamicFunctionPopUp.configuration') }}</div>
             <SelectFunction
               v-model="fields"
               data-test="dynamic-function-popup-select-function"
@@ -83,8 +83,8 @@
         </OTabPanel>
         <OTabPanel name="raw">
           <div class="pt-2">
-            <div style="display: flex; width: 100%">
-              <div style="width: 100%; padding-right: 0.75rem">
+            <div class="flex w-full">
+              <div class="w-full pr-3">
                 <RawQueryBuilder
                   v-model="fields"
                   data-test="dynamic-function-popup-raw-query-builder"
@@ -121,7 +121,7 @@
           <OSelect
             v-model="getHavingCondition().operator"
             :options="havingOperators"
-            class="w-[60px]"
+            class="w-15"
             data-test="dynamic-function-popup-having-operator"
           />
 
diff --git a/web/src/components/dashboards/addPanel/dynamicFunction/RawQueryBuilder.spec.ts b/web/src/components/dashboards/addPanel/dynamicFunction/RawQueryBuilder.spec.ts
index 5b9f6ed2de..7420c8e60e 100644
--- a/web/src/components/dashboards/addPanel/dynamicFunction/RawQueryBuilder.spec.ts
+++ b/web/src/components/dashboards/addPanel/dynamicFunction/RawQueryBuilder.spec.ts
@@ -386,7 +386,7 @@ WHERE level = 'error'`;
       // OTextarea renders border/rounded on its inner wrapper div and resize on the textarea
       const innerWrapper = wrapper.find(`${TEXTAREA_WRAPPER} > div`);
       const textareaField = wrapper.find(TEXTAREA_FIELD);
-      expect(innerWrapper.classes()).toContain("rounded-md");
+      expect(innerWrapper.classes()).toContain("rounded-default");
       expect(innerWrapper.classes()).toContain("border");
       expect(textareaField.classes()).toContain("resize-y");
     });
@@ -541,7 +541,7 @@ WHERE level = 'error'`;
     it("should have rounded corners", () => {
       wrapper = createWrapper();
       const innerWrapper = wrapper.find(`${TEXTAREA_WRAPPER} > div`);
-      expect(innerWrapper.classes()).toContain("rounded-md");
+      expect(innerWrapper.classes()).toContain("rounded-default");
     });
   });
 
diff --git a/web/src/components/dashboards/addPanel/dynamicFunction/RawQueryBuilder.vue b/web/src/components/dashboards/addPanel/dynamicFunction/RawQueryBuilder.vue
index 4baffb10b4..694d0a8c85 100644
--- a/web/src/components/dashboards/addPanel/dynamicFunction/RawQueryBuilder.vue
+++ b/web/src/components/dashboards/addPanel/dynamicFunction/RawQueryBuilder.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="width: 100%" data-test="dashboard-raw-query-builder">
+  <div class="w-full" data-test="dashboard-raw-query-builder">
     <div class="query-section" data-test="dashboard-raw-query-section">
       <div class="query-label" data-test="dashboard-raw-query-title">Query</div>
       <div class="query-label text-xs" data-test="dashboard-raw-query-instruction">
diff --git a/web/src/components/dashboards/addPanel/dynamicFunction/SelectFunction.vue b/web/src/components/dashboards/addPanel/dynamicFunction/SelectFunction.vue
index e39929a69e..84766b4970 100644
--- a/web/src/components/dashboards/addPanel/dynamicFunction/SelectFunction.vue
+++ b/web/src/components/dashboards/addPanel/dynamicFunction/SelectFunction.vue
@@ -23,10 +23,10 @@
             class="flex"
             :style="{ marginLeft: isChild ? '-48px' : '0px' }"
           >
-            <div class="mr-2 relative w-3" style="min-height: 50px">
+            <div class="mr-2 relative w-3 min-h-12.5">
               <!-- Vertical Line using top & bottom instead of height -->
               <div
-                class="absolute top-0 w-px bg-[#001495] opacity-50"
+                class="absolute top-0 w-px bg-accent opacity-50"
                 :style="{
                   bottom:
                     argIndex === fields.args.length - 1
@@ -37,7 +37,7 @@
               ></div>
 
               <!-- SubTask Arrow -->
-              <div class="absolute" style="top: 30px; left: 5px">
+              <div class="absolute top-7.5 left-1.25 text-text-secondary">
                 <SubTaskArrow />
               </div>
             </div>
@@ -553,13 +553,15 @@ export default {
 };
 </script>
 
-<style>
-/* Make the trigger compact - only show the icon + chevron (no label text) */
-.arg-type-select span[class~="flex-1"][class~="truncate"] {
+<style scoped>
+/* keep(lib-override:OSelect): compact the arg-type OSelect trigger to icon +
+   chevron only — hides the internal label span and tightens the trigger button,
+   which live in the select's own DOM and aren't reachable via utilities. */
+.arg-type-select :deep(span[class~="flex-1"][class~="truncate"]) {
   display: none !important;
 }
 
-.arg-type-select button[type="button"] {
+.arg-type-select :deep(button[type="button"]) {
   min-width: 2rem;
   padding-inline-end: 1.5rem !important;
 }
diff --git a/web/src/components/dashboards/panels/ChartRenderer.spec.ts b/web/src/components/dashboards/panels/ChartRenderer.spec.ts
index 8af29a69dd..33c67b1b39 100644
--- a/web/src/components/dashboards/panels/ChartRenderer.spec.ts
+++ b/web/src/components/dashboards/panels/ChartRenderer.spec.ts
@@ -181,8 +181,9 @@ describe("ChartRenderer", () => {
       expect(wrapper.find('[data-test="chart-renderer"]').exists()).toBe(true);
       const container = wrapper.find('[data-test="chart-renderer"]');
       expect(container.attributes("id")).toBe("chart1");
-      expect(container.attributes("style")).toContain("height: 100%");
-      expect(container.attributes("style")).toContain("width: 100%");
+      // Sizing moved from inline `style="height:100%;width:100%"` to utilities.
+      expect(container.classes()).toContain("h-full");
+      expect(container.classes()).toContain("w-full");
     });
 
     it("should initialize ECharts instance", async () => {
diff --git a/web/src/components/dashboards/panels/ChartRenderer.vue b/web/src/components/dashboards/panels/ChartRenderer.vue
index 12bcff5153..26fa62dd91 100644
--- a/web/src/components/dashboards/panels/ChartRenderer.vue
+++ b/web/src/components/dashboards/panels/ChartRenderer.vue
@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     data-test="chart-renderer"
     ref="chartRef"
     id="chart1"
-    class="chart-container"
+    class="chart-container h-full w-full"
     @mouseover="
       () => {
         // if hoveredSeriesState is not null then set panelId
@@ -35,7 +35,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       }
     "
     @contextmenu="handleNativeContextMenu"
-    style="height: 100%; width: 100%"
   ></div>
 </template>
 
@@ -85,6 +84,8 @@ import {
   inject,
 } from "vue";
 import { useStore } from "vuex";
+import { useTheme } from "@/composables/useTheme";
+import { chartColor } from "@/utils/chartTheme";
 import * as echarts from "echarts/core";
 import {
   BarChart,
@@ -126,6 +127,7 @@ import type {
   TreeSeriesOption,
 } from "echarts/charts";
 import type { ComposeOption } from "echarts/core";
+import { withChartFont } from "@/utils/fonts";
 import type {
   TitleComponentOption,
   TooltipComponentOption,
@@ -226,6 +228,7 @@ export default defineComponent({
     const chartRef: any = ref(null);
     let chart: any;
     const store = useStore();
+    const { isDark } = useTheme();
 
     const cleanupChart = () => {
       // Remove all event listeners from chart
@@ -651,13 +654,10 @@ export default defineComponent({
         // change color and background color of tooltip
         options.tooltip &&
           options.tooltip.textStyle &&
-          (options.tooltip.textStyle.color =
-            theme === "dark" ? "#fff" : "#000");
+          (options.tooltip.textStyle.color = chartColor("--color-tooltip-text"));
         if (options.tooltip) {
-          options.tooltip.backgroundColor =
-            theme === "dark" ? "rgba(22,23,25,0.97)" : "rgba(255,255,255,0.97)";
-          options.tooltip.borderColor =
-            theme === "dark" ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.08)";
+          options.tooltip.backgroundColor = chartColor("--color-tooltip-bg");
+          options.tooltip.borderColor = chartColor("--color-tooltip-border");
           options.tooltip.borderWidth = 1;
         }
         options.animation = false;
@@ -667,7 +667,7 @@ export default defineComponent({
             props.data?.notMerge !== undefined ? props.data.notMerge : true;
           const lazyUpdate =
             props.data?.lazyUpdate !== undefined ? props.data.lazyUpdate : true;
-          chart?.setOption(options, { lazyUpdate, notMerge });
+          chart?.setOption(withChartFont(options), { lazyUpdate, notMerge });
           chart?.setOption({ animation: true }, { lazyUpdate: true });
         } catch (e: any) {
           emit("error", {
@@ -680,6 +680,42 @@ export default defineComponent({
       },
     );
 
+    // Repairs a chart that ECharts initialized while the element had no
+    // layout size (e.g. mounted mid-splitter/flex settle). In that state
+    // ECharts creates zero-width canvas layers but may still record the
+    // final element size internally, so a plain chart.resize() no-ops as
+    // "unchanged" and the chart stays invisible forever. A full re-init on
+    // the first real size is the only reliable repair.
+    let zeroSizeReinitObserver: ResizeObserver | null = null;
+    const reinitWhenSized = () => {
+      if (!chartRef.value || zeroSizeReinitObserver) return;
+      zeroSizeReinitObserver = new ResizeObserver(() => {
+        if (!chartRef.value) {
+          zeroSizeReinitObserver?.disconnect();
+          zeroSizeReinitObserver = null;
+          return;
+        }
+        if (
+          chartRef.value.clientWidth > 0 &&
+          chartRef.value.clientHeight > 0
+        ) {
+          zeroSizeReinitObserver?.disconnect();
+          zeroSizeReinitObserver = null;
+          const theme = isDark.value ? "dark" : "light";
+          cleanupChart();
+          chart = echarts.init(chartRef.value, theme, {
+            renderer: props.renderType,
+          });
+          chart?.setOption(withChartFont(props?.data?.options || {}), {
+            lazyUpdate: true,
+            notMerge: true,
+          });
+          chartInitialSetUp();
+        }
+      });
+      zeroSizeReinitObserver.observe(chartRef.value);
+    };
+
     onMounted(async () => {
       try {
         await nextTick();
@@ -689,14 +725,20 @@ export default defineComponent({
         await nextTick();
         await nextTick();
         await nextTick();
-        const theme = store.state.theme === "dark" ? "dark" : "light";
+        const theme = isDark.value ? "dark" : "light";
         if (chartRef.value) {
           cleanupChart();
           chart = echarts.init(chartRef.value, theme, {
             renderer: props.renderType,
           });
+          if (
+            chartRef.value.clientWidth === 0 ||
+            chartRef.value.clientHeight === 0
+          ) {
+            reinitWhenSized();
+          }
         }
-        chart?.setOption(props?.data?.options || {}, {
+        chart?.setOption(withChartFont(props?.data?.options || {}), {
           lazyUpdate: true,
           notMerge: true,
         });
@@ -712,6 +754,10 @@ export default defineComponent({
       // Clean up event listeners
       window.removeEventListener("resize", windowResizeEventCallback);
 
+      // Clean up the zero-size re-init observer
+      zeroSizeReinitObserver?.disconnect();
+      zeroSizeReinitObserver = null;
+
       // Cancel throttled functions
       throttledSetHoveredSeriesName.cancel();
       throttledSetHoveredSeriesIndex.cancel();
@@ -779,14 +825,14 @@ export default defineComponent({
         await nextTick();
         await nextTick();
         await nextTick();
-        const theme = store.state.theme === "dark" ? "dark" : "light";
+        const theme = isDark.value ? "dark" : "light";
         if (chartRef.value) {
           cleanupChart();
           chart = echarts.init(chartRef.value, theme, {
             renderer: props.renderType,
           });
         }
-        chart?.setOption(props?.data?.options || {}, {
+        chart?.setOption(withChartFont(props?.data?.options || {}), {
           lazyUpdate: true,
           notMerge: true,
         });
@@ -831,7 +877,7 @@ export default defineComponent({
           await nextTick();
           chart?.resize();
           try {
-            chart?.setOption(props?.data?.options || {}, {
+            chart?.setOption(withChartFont(props?.data?.options || {}), {
               lazyUpdate: true,
               notMerge: true,
             });
@@ -870,31 +916,22 @@ export default defineComponent({
 });
 </script>
 
-<style>
-/**
- * Print mode styles for ECharts
- *
- * These styles must be unscoped (global) to override ECharts' inline styles.
- * ECharts sets fixed pixel dimensions via inline styles (e.g., width: 740px),
- * which causes charts to overflow their containers in print mode when GridStack
- * scales panels down to fit the page.
- *
- * The !important declarations override inline styles, forcing both the chart
- * wrapper div and canvas elements to scale to 100% of their container size.
- * This ensures charts fit properly when printing, regardless of their original
- * render dimensions.
- */
+<style scoped>
+/* keep(lib-override:echarts): print-only overrides for ECharts' inline pixel
+   dimensions, which it writes onto its own DOM, so charts scale to their container when
+   GridStack shrinks panels to fit the printed page. Targets ECharts-generated
+   DOM (wrapper div / canvas / svg) that utilities can't reach. */
 @media print {
   /* Clip the ECharts wrapper to prevent chart overflow but don't scale */
-  .chart-container > div[style*="position: relative"] {
+  .chart-container > :deep(div[style*="position: relative"]) {
     overflow: hidden !important;
     max-width: 100% !important;
     max-height: 100% !important;
   }
 
   /* Prevent canvas from exceeding container size without scaling */
-  .chart-container canvas,
-  .chart-container svg {
+  .chart-container :deep(canvas),
+  .chart-container :deep(svg) {
     max-width: 100% !important;
     max-height: 100% !important;
     object-fit: contain !important;
diff --git a/web/src/components/dashboards/panels/CustomChartRenderer.spec.ts b/web/src/components/dashboards/panels/CustomChartRenderer.spec.ts
index 79327cd8ad..3806580a1b 100644
--- a/web/src/components/dashboards/panels/CustomChartRenderer.spec.ts
+++ b/web/src/components/dashboards/panels/CustomChartRenderer.spec.ts
@@ -586,8 +586,9 @@ describe("CustomChartRenderer", () => {
       wrapper = createWrapper();
       
       const chartElement = wrapper.find('[data-test="chart-renderer"]');
-      expect(chartElement.attributes('style')).toContain('height: 100%');
-      expect(chartElement.attributes('style')).toContain('width: 100%');
+      // Sizing moved from an inline style to Tailwind utilities.
+      expect(chartElement.classes()).toContain('h-full');
+      expect(chartElement.classes()).toContain('w-full');
     });
 
     it("should have correct element ID", () => {
diff --git a/web/src/components/dashboards/panels/CustomChartRenderer.vue b/web/src/components/dashboards/panels/CustomChartRenderer.vue
index d1b64501cf..bea5ea70c9 100644
--- a/web/src/components/dashboards/panels/CustomChartRenderer.vue
+++ b/web/src/components/dashboards/panels/CustomChartRenderer.vue
@@ -17,13 +17,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <!-- eslint-disable vue/v-on-event-hyphenation -->
 <!-- eslint-disable vue/attribute-hyphenation -->
 <template>
-  <div
+  <div class="h-full w-full"
     data-test="chart-renderer"
     ref="chartRef"
     id="chart"
     @mouseover="handleMouseOver"
     @mouseleave="handleMouseLeave"
-    style="height: 100%; width: 100%"
   ></div>
 </template>
 
@@ -52,6 +51,7 @@ import {
 import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
 
 import DOMPurify from "dompurify";
+import { withChartFont } from "@/utils/fonts";
 
 // Register necessary components
 echarts.use([
@@ -148,7 +148,7 @@ export default defineComponent({
       try {
         const convertedData = convertStringToFunction(props.data);
         const safeChartOptions = deepSanitize(convertedData);
-        chart.setOption(safeChartOptions);
+        chart.setOption(withChartFont(safeChartOptions));
 
         if (convertedData.o2_events) {
           // Add event listeners for custom interactions
diff --git a/web/src/components/dashboards/panels/GeoMapRenderer.spec.ts b/web/src/components/dashboards/panels/GeoMapRenderer.spec.ts
index e0f7cb376f..6d0e572f43 100644
--- a/web/src/components/dashboards/panels/GeoMapRenderer.spec.ts
+++ b/web/src/components/dashboards/panels/GeoMapRenderer.spec.ts
@@ -512,8 +512,9 @@ describe("GeoMapRenderer", () => {
       wrapper = createWrapper();
       
       const chartContainer = wrapper.find('#chart-map');
-      expect(chartContainer.attributes('style')).toContain('height: 100%');
-      expect(chartContainer.attributes('style')).toContain('width: 100%');
+      // Sizing moved from an inline style to Tailwind utilities.
+      expect(chartContainer.classes()).toContain('h-full');
+      expect(chartContainer.classes()).toContain('w-full');
     });
 
     it("should have correct wrapper div styling", () => {
@@ -521,9 +522,10 @@ describe("GeoMapRenderer", () => {
 
       const rootDiv = wrapper.find('[data-test="dashboard-geomap-renderer"]');
       expect(rootDiv.exists()).toBe(true);
-      expect(rootDiv.attributes('style')).toContain('padding: 5px');
-      expect(rootDiv.attributes('style')).toContain('height: 100%');
-      expect(rootDiv.attributes('style')).toContain('width: 100%');
+      // Padding/sizing moved from an inline style to Tailwind utilities.
+      expect(rootDiv.classes()).toContain('p-1.25');
+      expect(rootDiv.classes()).toContain('h-full');
+      expect(rootDiv.classes()).toContain('w-full');
     });
   });
 
diff --git a/web/src/components/dashboards/panels/GeoMapRenderer.vue b/web/src/components/dashboards/panels/GeoMapRenderer.vue
index 9646c4ce55..2ebabae631 100644
--- a/web/src/components/dashboards/panels/GeoMapRenderer.vue
+++ b/web/src/components/dashboards/panels/GeoMapRenderer.vue
@@ -15,11 +15,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div
+  <div class="p-1.25 h-full w-full"
     data-test="dashboard-geomap-renderer"
-    style="padding: 5px; height: 100%; width: 100%"
   >
-    <div ref="chartRef" id="chart-map" style="height: 100%; width: 100%"></div>
+    <div class="h-full w-full" ref="chartRef" id="chart-map"></div>
   </div>
 </template>
 
@@ -78,6 +77,7 @@ import type {
   TreeSeriesOption,
 } from "echarts/charts";
 import type { ComposeOption } from "echarts/core";
+import { withChartFont } from "@/utils/fonts";
 import type {
   TitleComponentOption,
   TooltipComponentOption,
@@ -177,7 +177,7 @@ export default defineComponent({
         ...props.data.options,
         lmap: lmapOptions,
       };
-      chart?.setOption(options || {}, true);
+      chart?.setOption(withChartFont(options || {}), true);
       window.addEventListener("resize", windowResizeEventCallback);
 
       // Get Leaflet extension component
@@ -228,7 +228,7 @@ export default defineComponent({
           ...props.data.options,
           lmap: lmapOptions,
         };
-        chart?.setOption(options || {}, true);
+        chart?.setOption(withChartFont(options || {}), true);
         // Get Leaflet extension component
         // getModel and getComponent do not seem to be exported in echarts typescript
         // add the following two comments to circumvent this
diff --git a/web/src/components/dashboards/panels/HTMLRenderer.spec.ts b/web/src/components/dashboards/panels/HTMLRenderer.spec.ts
index fa4909fb34..80043895af 100644
--- a/web/src/components/dashboards/panels/HTMLRenderer.spec.ts
+++ b/web/src/components/dashboards/panels/HTMLRenderer.spec.ts
@@ -18,12 +18,13 @@ import { mount, VueWrapper } from "@vue/test-utils";
 import DOMPurify from "dompurify";
 import HTMLRenderer from "./HTMLRenderer.vue";
 
-// Mock external dependencies
+// Mock external dependencies.
+// Mutable hoisted state so individual tests can drive the theme that
+// useTheme() -> useStore() reads (the component no longer exposes `store`).
+const mockStoreState = vi.hoisted(() => ({ theme: "light" }));
 vi.mock("vuex", () => ({
   useStore: () => ({
-    state: {
-      theme: "light",
-    },
+    state: mockStoreState,
   }),
 }));
 
@@ -73,6 +74,7 @@ describe("HTMLRenderer", () => {
     addHookSpy.mockClear();
     sanitizeSpy.mockClear();
     vi.clearAllMocks();
+    mockStoreState.theme = "light";
   });
 
   afterEach(() => {
@@ -252,18 +254,11 @@ describe("HTMLRenderer", () => {
     });
 
     it("should apply dark theme classes when theme is dark", () => {
-      // Create wrapper with dark theme store from the start
-      wrapper = mount(HTMLRenderer, {
-        global: {
-          plugins: [],
-          mocks: {
-            store: {
-              state: { theme: "dark" }
-            }
-          }
-        }
-      });
-      
+      // Drive theme via the mocked store before mounting so useTheme()'s
+      // isDark resolves to true on initial render.
+      mockStoreState.theme = "dark";
+      wrapper = createWrapper();
+
       const rendererElement = wrapper.find('[data-test="html-renderer"]');
       expect(rendererElement.classes()).toContain('prose');
       expect(rendererElement.classes()).toContain('prose-invert');
@@ -278,32 +273,24 @@ describe("HTMLRenderer", () => {
       
       // Unmount and recreate with dark theme to test the toggle effect
       wrapper.unmount();
-      
-      wrapper = mount(HTMLRenderer, {
-        global: {
-          plugins: [],
-          mocks: {
-            store: {
-              state: { theme: "dark" }
-            }
-          }
-        }
-      });
-      
+
+      mockStoreState.theme = "dark";
+      wrapper = createWrapper();
+
       rendererElement = wrapper.find('[data-test="html-renderer"]');
       expect(rendererElement.classes()).toContain('prose-invert');
     });
 
     it("should maintain theme classes with content updates", async () => {
+      // Mount already in dark theme, then update content and verify the
+      // prose-invert class persists across the content change.
+      mockStoreState.theme = "dark";
       wrapper = createWrapper({
         htmlContent: "<p>Initial content</p>"
       });
-      
-      wrapper.vm.store.state.theme = "dark";
-      await wrapper.vm.$nextTick();
-      
+
       await wrapper.setProps({ htmlContent: "<p>Updated content</p>" });
-      
+
       const rendererElement = wrapper.find('[data-test="html-renderer"]');
       expect(rendererElement.classes()).toContain('prose-invert');
       expect(rendererElement.html()).toContain("Updated content");
@@ -448,9 +435,10 @@ describe("HTMLRenderer", () => {
     it("should give the content wrapper min-height 100% so it fills the panel yet grows with content", () => {
       wrapper = createWrapper();
 
+      // Was inline `style="min-height:100%"`; now the `min-h-full` utility.
       expect(
-        wrapper.find('[data-test="html-renderer"]').attributes("style"),
-      ).toContain("min-height: 100%");
+        wrapper.find('[data-test="html-renderer"]').classes(),
+      ).toContain("min-h-full");
     });
 
     it("should enforce iframe hook restrictions", () => {
@@ -497,9 +485,10 @@ describe("HTMLRenderer", () => {
       
       const container = wrapper.find('[data-test="html-renderer-scroll-container"]');
       expect(container.exists()).toBe(true);
-      expect(container.attributes('style')).toContain('width: 100%');
-      expect(container.attributes('style')).toContain('height: 100%');
-      expect(container.attributes('style')).toContain('overflow: auto');
+      // Sizing/overflow moved from an inline style to Tailwind utilities.
+      expect(container.classes()).toContain('w-full');
+      expect(container.classes()).toContain('h-full');
+      expect(container.classes()).toContain('overflow-auto');
     });
 
     it("should maintain responsive design classes", () => {
@@ -517,7 +506,7 @@ describe("HTMLRenderer", () => {
       wrapper = createWrapper({ htmlContent: longContent });
       
       const container = wrapper.find('[data-test="html-renderer-scroll-container"]');
-      expect(container.attributes('style')).toContain('overflow: auto');
+      expect(container.classes()).toContain('overflow-auto');
     });
   });
 
@@ -585,7 +574,8 @@ describe("HTMLRenderer", () => {
       
       expect(wrapper.vm.processedContent).toBeDefined();
       expect(wrapper.vm.DOMPurify).toBeDefined();
-      expect(wrapper.vm.store).toBeDefined();
+      // Component now exposes useTheme()'s isDark instead of a raw store.
+      expect(wrapper.vm.isDark).toBe(false);
     });
 
     it("should handle component unmounting cleanly", () => {
diff --git a/web/src/components/dashboards/panels/HTMLRenderer.vue b/web/src/components/dashboards/panels/HTMLRenderer.vue
index dedca3cec2..b67e93ec18 100644
--- a/web/src/components/dashboards/panels/HTMLRenderer.vue
+++ b/web/src/components/dashboards/panels/HTMLRenderer.vue
@@ -16,17 +16,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <div
-    class="scroll"
+    class="scroll w-full h-full overflow-auto"
     data-test="html-renderer-scroll-container"
-    style="width: 100%; height: 100%; overflow: auto"
   >
-    <div
+    <div class="min-h-full shrink-0"
       :id="scopeId"
       :class="[
         'prose prose-sm max-w-none px-2 py-1',
-        store.state?.theme === 'dark' && 'prose-invert',
+        isDark && 'prose-invert',
       ]"
-      style="min-height: 100%; flex-shrink: 0"
       v-html="sanitizedContent"
       data-test="html-renderer"
     ></div>
@@ -35,7 +33,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <script lang="ts">
 import { defineComponent, computed } from "vue";
-import { useStore } from "vuex";
+import { useTheme } from "@/composables/useTheme";
 import { processVariableContent } from "@/utils/dashboard/variables/variablesUtils";
 import DOMPurify from "dompurify";
 
@@ -106,7 +104,7 @@ export default defineComponent({
     },
   },
   setup(props): any {
-    const store = useStore();
+    const { isDark } = useTheme();
 
     DOMPurify.addHook("afterSanitizeAttributes", (node) => {
       if (node.nodeName === "IFRAME") {
@@ -168,7 +166,7 @@ export default defineComponent({
 
     return {
       DOMPurify,
-      store,
+      isDark,
       scopeId,
       processedContent,
       sanitizedContent,
diff --git a/web/src/components/dashboards/panels/JsonFieldRenderer.spec.ts b/web/src/components/dashboards/panels/JsonFieldRenderer.spec.ts
index 524f535f1c..057066873c 100644
--- a/web/src/components/dashboards/panels/JsonFieldRenderer.spec.ts
+++ b/web/src/components/dashboards/panels/JsonFieldRenderer.spec.ts
@@ -2,6 +2,7 @@ import { describe, expect, it, beforeEach, afterEach } from "vitest";
 import { mount } from "@vue/test-utils";
 import JsonFieldRenderer from "./JsonFieldRenderer.vue";
 import store from "@/test/unit/helpers/store";
+import { chartColor } from "@/utils/chartTheme";
 
 
 describe("JsonFieldRenderer Component", () => {
@@ -201,16 +202,19 @@ describe("JsonFieldRenderer Component", () => {
   });
 
   describe("keyColor Computed", () => {
-    it("should return dark theme key color when theme is dark", () => {
+    // Key color is now resolved from the --color-json-key design token via
+    // chartColor(); it is theme-independent in jsdom (no live CSS), so both
+    // themes resolve to the same token value.
+    it("should return the json-key token color when theme is dark", () => {
       store.state.theme = "dark";
       wrapper = createWrapper({ key: "value" });
-      expect(wrapper.vm.keyColor).toBe("#f67a7aff");
+      expect(wrapper.vm.keyColor).toBe(chartColor("--color-json-key"));
     });
 
-    it("should return light theme key color when theme is light", () => {
+    it("should return the json-key token color when theme is light", () => {
       store.state.theme = "light";
       wrapper = createWrapper({ key: "value" });
-      expect(wrapper.vm.keyColor).toBe("#B71C1C");
+      expect(wrapper.vm.keyColor).toBe(chartColor("--color-json-key"));
     });
   });
 
@@ -220,53 +224,55 @@ describe("JsonFieldRenderer Component", () => {
       wrapper = createWrapper("test");
     });
 
-    it("should return gray color for null in light theme", () => {
-      expect(wrapper.vm.getValueColor(null)).toBe("#6B7280");
+    // Value colors are now resolved from --color-json-* design tokens via
+    // chartColor(); theme-independent in jsdom (no live CSS).
+    it("should return the json-null token color for null in light theme", () => {
+      expect(wrapper.vm.getValueColor(null)).toBe(chartColor("--color-json-null"));
     });
 
-    it("should return purple color for boolean in light theme", () => {
-      expect(wrapper.vm.getValueColor(true)).toBe("#6D28D9");
-      expect(wrapper.vm.getValueColor(false)).toBe("#6D28D9");
+    it("should return the json-boolean token color for boolean in light theme", () => {
+      expect(wrapper.vm.getValueColor(true)).toBe(chartColor("--color-json-boolean"));
+      expect(wrapper.vm.getValueColor(false)).toBe(chartColor("--color-json-boolean"));
     });
 
-    it("should return blue color for number in light theme", () => {
-      expect(wrapper.vm.getValueColor(42)).toBe("#2563EB");
+    it("should return the json-number token color for number in light theme", () => {
+      expect(wrapper.vm.getValueColor(42)).toBe(chartColor("--color-json-number"));
     });
 
-    it("should return green color for string in light theme", () => {
-      expect(wrapper.vm.getValueColor("hello")).toBe("#047857");
+    it("should return the json-string token color for string in light theme", () => {
+      expect(wrapper.vm.getValueColor("hello")).toBe(chartColor("--color-json-string"));
     });
 
-    it("should return gray color for object in light theme", () => {
-      expect(wrapper.vm.getValueColor({ nested: true })).toBe("#4B5563");
+    it("should return the json-object token color for object in light theme", () => {
+      expect(wrapper.vm.getValueColor({ nested: true })).toBe(chartColor("--color-json-object"));
     });
 
-    it("should return dark gray for null in dark theme", async () => {
+    it("should return the json-null token color for null in dark theme", async () => {
       store.state.theme = "dark";
       wrapper = createWrapper("test");
       await wrapper.vm.$nextTick();
-      expect(wrapper.vm.getValueColor(null)).toBe("#9CA3AF");
+      expect(wrapper.vm.getValueColor(null)).toBe(chartColor("--color-json-null"));
     });
 
-    it("should return indigo color for boolean in dark theme", async () => {
+    it("should return the json-boolean token color for boolean in dark theme", async () => {
       store.state.theme = "dark";
       wrapper = createWrapper("test");
       await wrapper.vm.$nextTick();
-      expect(wrapper.vm.getValueColor(true)).toBe("#A5B4FC");
+      expect(wrapper.vm.getValueColor(true)).toBe(chartColor("--color-json-boolean"));
     });
 
-    it("should return sky blue color for number in dark theme", async () => {
+    it("should return the json-number token color for number in dark theme", async () => {
       store.state.theme = "dark";
       wrapper = createWrapper("test");
       await wrapper.vm.$nextTick();
-      expect(wrapper.vm.getValueColor(100)).toBe("#60A5FA");
+      expect(wrapper.vm.getValueColor(100)).toBe(chartColor("--color-json-number"));
     });
 
-    it("should return teal color for string in dark theme", async () => {
+    it("should return the json-string token color for string in dark theme", async () => {
       store.state.theme = "dark";
       wrapper = createWrapper("test");
       await wrapper.vm.$nextTick();
-      expect(wrapper.vm.getValueColor("world")).toBe("#6EE7B7");
+      expect(wrapper.vm.getValueColor("world")).toBe(chartColor("--color-json-string"));
     });
   });
 
@@ -381,17 +387,18 @@ describe("JsonFieldRenderer Component", () => {
     });
   });
 
-  describe("isDarkTheme Computed", () => {
+  describe("isDark Computed", () => {
+    // The removed local isDarkTheme computed was replaced by useTheme()'s isDark.
     it("should return true when theme is dark", () => {
       store.state.theme = "dark";
       wrapper = createWrapper("test");
-      expect(wrapper.vm.isDarkTheme).toBe(true);
+      expect(wrapper.vm.isDark).toBe(true);
     });
 
     it("should return false when theme is light", () => {
       store.state.theme = "light";
       wrapper = createWrapper("test");
-      expect(wrapper.vm.isDarkTheme).toBe(false);
+      expect(wrapper.vm.isDark).toBe(false);
     });
   });
 
diff --git a/web/src/components/dashboards/panels/JsonFieldRenderer.vue b/web/src/components/dashboards/panels/JsonFieldRenderer.vue
index 6b2fde735a..ad211485dc 100644
--- a/web/src/components/dashboards/panels/JsonFieldRenderer.vue
+++ b/web/src/components/dashboards/panels/JsonFieldRenderer.vue
@@ -32,7 +32,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <div
           v-for="(item, index) in definedItems"
           :key="index"
-          class="py-[2px]"
+          class="py-0.5"
           data-test="json-array-item"
         >
           <span :style="{ color: getValueColor(item) }">{{ formatValue(item) }}</span>
@@ -43,19 +43,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <div
           v-for="(item, index) in definedItems"
           :key="index"
-          class="py-[2px] break-words"
+          class="py-0.5 break-words"
         >
           <span v-if="typeof item === 'object' && item !== null">
-            <span class="text-[#9ca3af]">{</span>
+            <span class="text-text-muted">{</span>
             <template v-for="(val, key) in getDefinedEntries(item)" :key="key">
               <span class="inline">
                 <span class="font-medium" :style="{ color: keyColor }" data-test="json-key">{{ key }}</span>
-                <span class="text-[#9ca3af]">: </span>
+                <span class="text-text-muted">: </span>
                 <span class="break-words" :style="{ color: getValueColor(val) }" data-test="json-value">{{ formatValue(val) }}</span>
               </span>
-              <span v-if="!isLastDefinedEntry(item, key)" class="text-[#9ca3af]">, </span>
+              <span v-if="!isLastDefinedEntry(item, key)" class="text-text-muted">, </span>
             </template>
-            <span class="text-[#9ca3af]">}</span>
+            <span class="text-text-muted">}</span>
           </span>
           <span v-else :style="{ color: getValueColor(item) }">{{ formatValue(item) }}</span>
         </div>
@@ -67,16 +67,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       class="break-words"
       data-test="json-object"
     >
-      <span class="text-[#9ca3af]">{</span>
+      <span class="text-text-muted">{</span>
       <template v-for="(val, key, idx) in definedObjectEntries" :key="key">
         <span class="inline">
           <span class="font-medium" :style="{ color: keyColor }" data-test="json-key">{{ key }}</span>
-          <span class="text-[#9ca3af]">: </span>
+          <span class="text-text-muted">: </span>
           <span class="break-words" :style="{ color: getValueColor(val) }" data-test="json-value">{{ formatValue(val) }}</span>
         </span>
-        <span v-if="idx < definedObjectKeys.length - 1" class="text-[#9ca3af]">, </span>
+        <span v-if="idx < definedObjectKeys.length - 1" class="text-text-muted">, </span>
       </template>
-      <span class="text-[#9ca3af]">}</span>
+      <span class="text-text-muted">}</span>
     </div>
     <!-- Primitive value: only apply JSON coloring if the value was valid JSON -->
     <div v-else>
@@ -87,14 +87,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <script setup lang="ts">
 import { computed } from "vue";
-import { useStore } from "vuex";
+import { useTheme } from "@/composables/useTheme";
+import { chartColor } from "@/utils/chartTheme";
 
 export interface Props {
   value: any;
 }
 
 const props = defineProps<Props>();
-const store = useStore();
+const { isDark } = useTheme();
 
 // Parse the value if it's a string, otherwise use as-is
 // Also tracks whether JSON parsing succeeded so we don't color plain strings as JSON
@@ -120,9 +121,6 @@ const parsedData = computed(() => parseResult.value.data);
 // Used to avoid coloring plain non-JSON strings (e.g. timestamps) like JSON values.
 const isValidJSON = computed(() => parseResult.value.isJSON);
 
-// Check if theme is dark - memoized
-const isDarkTheme = computed(() => store.state.theme === "dark");
-
 // Check if array contains only primitives (strings, numbers, booleans, null)
 const isArrayOfPrimitives = computed(() => {
   if (!Array.isArray(parsedData.value)) return false;
@@ -153,27 +151,27 @@ const definedObjectEntries = computed(() => {
 // Memoized keys for single objects
 const definedObjectKeys = computed(() => Object.keys(definedObjectEntries.value));
 
-// Get color for JSON keys based on theme
+// Get color for JSON keys — resolved from theme-aware design tokens.
+// Reading isDark.value keeps this reactive so it recomputes on theme switch
+// (chartColor's cache is invalidated on theme change).
 const keyColor = computed(() => {
-  return isDarkTheme.value ? "#f67a7aff" : "#B71C1C";
+  void isDark.value;
+  return chartColor("--color-json-key");
 });
 
-// Get color for values based on type and theme
+// Get color for values based on type — routed through --color-json-* tokens.
 const getValueColor = (value: any): string => {
-  const isDark = isDarkTheme.value;
-
+  void isDark.value;
   if (value === null) {
-    return isDark ? "#9CA3AF" : "#6B7280";
+    return chartColor("--color-json-null");
   } else if (typeof value === "boolean") {
-    return isDark ? "#A5B4FC" : "#6D28D9";
+    return chartColor("--color-json-boolean");
   } else if (typeof value === "number") {
-    return isDark ? "#60A5FA" : "#2563EB";
+    return chartColor("--color-json-number");
   } else if (typeof value === "string") {
-    return isDark ? "#6EE7B7" : "#047857";
-  } else if (typeof value === "object") {
-    return isDark ? "#D1D5DB" : "#4B5563";
+    return chartColor("--color-json-string");
   }
-  return isDark ? "#D1D5DB" : "#4B5563";
+  return chartColor("--color-json-object");
 };
 
 // Format value for display
diff --git a/web/src/components/dashboards/panels/MapsRenderer.spec.ts b/web/src/components/dashboards/panels/MapsRenderer.spec.ts
index 112fd57ae9..ca7d3a5770 100644
--- a/web/src/components/dashboards/panels/MapsRenderer.spec.ts
+++ b/web/src/components/dashboards/panels/MapsRenderer.spec.ts
@@ -280,8 +280,9 @@ describe("MapsRenderer", () => {
       await waitForChartInit(wrapper);
       
       const chartContainer = wrapper.find('#chart-map');
-      expect(chartContainer.attributes('style')).toContain('height: 100%');
-      expect(chartContainer.attributes('style')).toContain('width: 100%');
+      // Sizing moved from an inline style to Tailwind utilities.
+      expect(chartContainer.classes()).toContain('h-full');
+      expect(chartContainer.classes()).toContain('w-full');
     });
   });
 
diff --git a/web/src/components/dashboards/panels/MapsRenderer.vue b/web/src/components/dashboards/panels/MapsRenderer.vue
index 1083e824e6..9337755636 100644
--- a/web/src/components/dashboards/panels/MapsRenderer.vue
+++ b/web/src/components/dashboards/panels/MapsRenderer.vue
@@ -11,8 +11,8 @@
 -->
 
 <template>
-  <div style="padding: 5px; height: 100%; width: 100%">
-    <div ref="chartRef" id="chart-map" style="height: 100%; width: 100%"></div>
+  <div class="p-1.25 h-full w-full">
+    <div class="h-full w-full" ref="chartRef" id="chart-map"></div>
   </div>
 </template>
 
@@ -29,6 +29,7 @@ import { useStore } from "vuex";
 import * as echarts from "echarts/core";
 import { MapChart } from "echarts/charts";
 import worldMap from "@/assets/dashboard/maps/map.json";
+import { withChartFont } from "@/utils/fonts";
 
 echarts.use([MapChart]);
 
@@ -63,7 +64,7 @@ export default defineComponent({
 
         // Default empty chart configuration to ensure map is visible
     
-        chart.setOption(DEFAULT_MAP_OPTIONS, true);
+        chart.setOption(withChartFont(DEFAULT_MAP_OPTIONS), true);
       }
     };
 
@@ -89,11 +90,11 @@ export default defineComponent({
         if (chart) {
           await nextTick();
           if (newOptions && newOptions.series && newOptions.series.length > 0) {
-            chart?.setOption(newOptions, true);
+            chart?.setOption(withChartFont(newOptions), true);
           } else {
             // If no data provided, set a default empty map
             
-            chart?.setOption(DEFAULT_MAP_OPTIONS, true);
+            chart?.setOption(withChartFont(DEFAULT_MAP_OPTIONS), true);
           }
         }
       },
diff --git a/web/src/components/dashboards/panels/MarkdownRenderer.spec.ts b/web/src/components/dashboards/panels/MarkdownRenderer.spec.ts
index 537afe6cfa..d2132a88b5 100644
--- a/web/src/components/dashboards/panels/MarkdownRenderer.spec.ts
+++ b/web/src/components/dashboards/panels/MarkdownRenderer.spec.ts
@@ -17,12 +17,13 @@ import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
 import { mount, VueWrapper } from "@vue/test-utils";
 import MarkdownRenderer from "./MarkdownRenderer.vue";
 
-// Mock external dependencies
+// Mock external dependencies.
+// Mutable hoisted state so individual tests can drive the theme that
+// useTheme() -> useStore() reads (the component no longer exposes `store`).
+const mockStoreState = vi.hoisted(() => ({ theme: "light" }));
 vi.mock("vuex", () => ({
   useStore: () => ({
-    state: {
-      theme: "light",
-    },
+    state: mockStoreState,
   }),
 }));
 
@@ -75,6 +76,10 @@ describe("MarkdownRenderer", () => {
     });
   };
 
+  beforeEach(() => {
+    mockStoreState.theme = "light";
+  });
+
   afterEach(() => {
     if (wrapper) {
       wrapper.unmount();
@@ -278,18 +283,11 @@ describe("MarkdownRenderer", () => {
     });
 
     it("should apply dark theme classes when theme is dark", () => {
-      // Create wrapper with dark theme store from the start
-      wrapper = mount(MarkdownRenderer, {
-        global: {
-          plugins: [],
-          mocks: {
-            store: {
-              state: { theme: "dark" }
-            }
-          }
-        }
-      });
-      
+      // Drive theme via the mocked store before mounting so useTheme()'s
+      // isDark resolves to true on initial render.
+      mockStoreState.theme = "dark";
+      wrapper = createWrapper();
+
       const rendererElement = wrapper.find('[data-test="markdown-renderer"]');
       expect(rendererElement.classes()).toContain('prose');
       expect(rendererElement.classes()).toContain('prose-invert');
@@ -304,37 +302,22 @@ describe("MarkdownRenderer", () => {
       
       // Unmount and recreate with dark theme to test the toggle effect
       wrapper.unmount();
-      
-      wrapper = mount(MarkdownRenderer, {
-        global: {
-          plugins: [],
-          mocks: {
-            store: {
-              state: { theme: "dark" }
-            }
-          }
-        }
-      });
-      
+
+      mockStoreState.theme = "dark";
+      wrapper = createWrapper();
+
       rendererElement = wrapper.find('[data-test="markdown-renderer"]');
       expect(rendererElement.classes()).toContain('prose-invert');
     });
 
     it("should maintain theme classes with content updates", async () => {
-      wrapper = mount(MarkdownRenderer, {
-        props: {
-          markdownContent: "# Initial content"
-        },
-        global: {
-          plugins: [],
-          mocks: {
-            store: {
-              state: { theme: "dark" }
-            }
-          }
-        }
+      // Mount already in dark theme, then update content and verify the
+      // prose-invert class persists across the content change.
+      mockStoreState.theme = "dark";
+      wrapper = createWrapper({
+        markdownContent: "# Initial content"
       });
-      
+
       await wrapper.setProps({ markdownContent: "# Updated content" });
       
       const rendererElement = wrapper.find('[data-test="markdown-renderer"]');
@@ -424,9 +407,10 @@ describe("MarkdownRenderer", () => {
       
       const container = wrapper.find('[data-test="markdown-renderer-scroll-container"]');
       expect(container.exists()).toBe(true);
-      expect(container.attributes('style')).toContain('width: 100%');
-      expect(container.attributes('style')).toContain('height: 100%');
-      expect(container.attributes('style')).toContain('overflow: auto');
+      // Sizing/overflow moved from an inline style to Tailwind utilities.
+      expect(container.classes()).toContain('w-full');
+      expect(container.classes()).toContain('h-full');
+      expect(container.classes()).toContain('overflow-auto');
       // default padding lives on the content div via tailwind utilities
       expect(wrapper.find('[data-test="markdown-renderer"]').classes()).toEqual(
         expect.arrayContaining(['px-2', 'py-1']),
@@ -448,7 +432,7 @@ describe("MarkdownRenderer", () => {
       wrapper = createWrapper({ markdownContent: longContent });
       
       const container = wrapper.find('[data-test="markdown-renderer-scroll-container"]');
-      expect(container.attributes('style')).toContain('overflow: auto');
+      expect(container.classes()).toContain('overflow-auto');
     });
   });
 
@@ -525,7 +509,8 @@ describe("MarkdownRenderer", () => {
       expect(wrapper.vm.processedContent).toBeDefined();
       expect(wrapper.vm.DOMPurify).toBeDefined();
       expect(wrapper.vm.marked).toBeDefined();
-      expect(wrapper.vm.store).toBeDefined();
+      // Component now exposes useTheme()'s isDark instead of a raw store.
+      expect(wrapper.vm.isDark).toBe(false);
     });
 
     it("should handle component unmounting cleanly", () => {
diff --git a/web/src/components/dashboards/panels/MarkdownRenderer.vue b/web/src/components/dashboards/panels/MarkdownRenderer.vue
index 4c7c4433d7..da5077e1bb 100644
--- a/web/src/components/dashboards/panels/MarkdownRenderer.vue
+++ b/web/src/components/dashboards/panels/MarkdownRenderer.vue
@@ -16,14 +16,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <div
-    class="scroll"
+    class="scroll w-full h-full overflow-auto"
     data-test="markdown-renderer-scroll-container"
-    style="width: 100%; height: 100%; overflow: auto"
   >
     <div
       :class="[
         'prose prose-sm max-w-none px-2 py-1',
-        store.state?.theme === 'dark' && 'prose-invert',
+        isDark && 'prose-invert',
       ]"
       v-html="DOMPurify.sanitize(marked(processedContent))"
       data-test="markdown-renderer"
@@ -33,7 +32,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <script lang="ts">
 import { computed, defineComponent } from "vue";
-import { useStore } from "vuex";
+import { useTheme } from "@/composables/useTheme";
 import { processVariableContent } from "@/utils/dashboard/variables/variablesUtils";
 import DOMPurify from "dompurify";
 import { marked } from "marked";
@@ -59,7 +58,7 @@ export default defineComponent({
     },
   },
   setup(props): any {
-    const store = useStore();
+    const { isDark } = useTheme();
 
     const processedContent = computed(() => {
       const context = {
@@ -72,7 +71,7 @@ export default defineComponent({
     return {
       DOMPurify,
       marked,
-      store,
+      isDark,
       processedContent,
     };
   },
diff --git a/web/src/components/dashboards/panels/PromQLTableChart.vue b/web/src/components/dashboards/panels/PromQLTableChart.vue
index 123531c384..4cd85edcae 100644
--- a/web/src/components/dashboards/panels/PromQLTableChart.vue
+++ b/web/src/components/dashboards/panels/PromQLTableChart.vue
@@ -15,17 +15,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div
+  <div class="h-full w-full flex flex-col relative"
     data-test="promql-table-chart"
-    style="
-      height: 100%;
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      position: relative;
-    "
   >
-    <div style="height: 100%; position: relative">
+    <div class="h-full relative">
       <TableRenderer
         ref="innerTableRef"
         :data="{ rows: filteredTableRows, columns: tableColumns }"
@@ -41,10 +34,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <template #bottom="scope" v-if="showLegendFooter">
           <div class="flex items-center w-full" data-test="dashboard-table-pagination">
             <div class="flex items-center gap-1">
-              <OSelect
+              <OSelect class="min-w-50 max-w-100"
                 v-model="selectedLegend"
                 :options="legendOptions"
-                style="min-width: 200px; max-width: 400px"
                 :placeholder="t('dashboard.promQLTableChart.selectSeriesToFilter')"
               >
                 <template #icon-left>
@@ -123,7 +115,7 @@ export default defineComponent({
         console.warn("No rows found in table data");
         return [];
       }
-      // Add unique ID to each row for q-table
+      // Add unique ID to each row for the table
       const rows = props.data.rows.map((row: any, index: number) => ({
         id: `row_${index}`,
         ...row,
diff --git a/web/src/components/dashboards/panels/TableRenderer.vue b/web/src/components/dashboards/panels/TableRenderer.vue
index 8be21147bd..d204195034 100644
--- a/web/src/components/dashboards/panels/TableRenderer.vue
+++ b/web/src/components/dashboards/panels/TableRenderer.vue
@@ -317,71 +317,72 @@ export default defineComponent({
 });
 </script>
 
-<style>
-/* Remove border-radius from the shared scroll container (logs uses rounded corners) */
-.table-wrapper .o2-scroll-container {
+<style scoped>
+/* keep(lib-override:tenstack-table): overrides for TenstackTable / OScrollContainer
+   child DOM (pivot cells, td/th, scroll container) and print-layout fixes that
+   utilities can't target. All selectors are scoped under this component's
+   .table-wrapper root; child-rendered nodes are reached via :deep(). */
+
+/* Remove border-radius from the shared scroll container (logs keeps its corner radius) */
+.table-wrapper :deep(.o2-scroll-container) {
   border-radius: 0;
 }
 
 /* Dashboard table cells should not use the monospace font from tenstack-table.scss */
-.table-wrapper td {
+.table-wrapper :deep(td) {
   font-family: var(--font-sans);
 }
 
 /* Pivot table styles */
-.table-wrapper .pivot-total-row {
+.table-wrapper :deep(.pivot-total-row) {
   font-weight: bold;
   background-color: var(--color-table-row-striped-bg);
 }
 
-.table-wrapper .pivot-group-header {
+.table-wrapper :deep(.pivot-group-header) {
   font-weight: 600;
-  border-bottom: 2px solid var(--color-table-row-divider);
+  border-bottom: 0.125rem solid var(--color-table-row-divider);
 }
 
-.table-wrapper .pivot-section-border {
-  border-left: 2px solid rgba(0, 0, 0, 0.12) !important;
+.table-wrapper :deep(.pivot-section-border) {
+  border-left: 0.125rem solid var(--color-table-row-divider) !important;
 }
 
-.body--dark .table-wrapper .pivot-section-border {
-  border-left-color: rgba(255, 255, 255, 0.12) !important;
-}
-
-.table-wrapper .pivot-value-header {
+.table-wrapper :deep(.pivot-value-header) {
   font-weight: 500;
   font-size: 0.85em;
 }
 
 /* Sticky total row */
-.table-wrapper .pivot-sticky-total-row {
+.table-wrapper :deep(.pivot-sticky-total-row) {
   font-weight: bold;
 }
 
-.table-wrapper .pivot-sticky-total-row td {
-  border-top: 2px solid rgba(0, 0, 0, 0.12);
+.table-wrapper :deep(.pivot-sticky-total-row td) {
+  border-top: 0.125rem solid var(--color-table-row-divider);
 }
 
 /* Pivot header sort icons */
-.table-wrapper .pivot-sort-icon {
+.table-wrapper :deep(.pivot-sort-icon) {
   opacity: 0;
   transition: opacity 0.2s;
 }
 
-.table-wrapper th:hover .pivot-sort-icon {
+.table-wrapper :deep(th:hover .pivot-sort-icon) {
   opacity: 0.4;
 }
 
-.table-wrapper .pivot-sort-active {
+.table-wrapper :deep(.pivot-sort-active) {
   opacity: 1 !important;
 }
 
 /* Sticky total column visual separator */
-.table-wrapper .pivot-total-col {
-  box-shadow: inset 4px 0 6px -2px rgba(0, 0, 0, 0.15) !important;
+.table-wrapper :deep(.pivot-total-col) {
+  box-shadow: inset 0.25rem 0 0.375rem -0.125rem var(--color-actions-column-shadow) !important;
 }
 
-.table-wrapper .sticky-column.pivot-total-col {
-  box-shadow: 4px 0 8px rgba(0, 0, 0, 0.15), inset 4px 0 6px -2px rgba(0, 0, 0, 0.15) !important;
+.table-wrapper :deep(.sticky-column.pivot-total-col) {
+  box-shadow: 0.25rem 0 0.5rem var(--color-actions-column-shadow), inset 0.25rem 0 0.375rem -0.125rem var(--color-actions-column-shadow) !important;
 }
 
 @media print {
@@ -392,32 +393,28 @@ export default defineComponent({
     overflow: hidden !important;
   }
 
-  .my-sticky-virtscroll-table {
+  .table-wrapper :deep(.my-sticky-virtscroll-table) {
     height: auto !important;
     overflow: visible !important;
   }
 
-  .my-sticky-virtscroll-table thead tr th {
+  .table-wrapper :deep(.my-sticky-virtscroll-table thead tr th) {
     position: static !important;
     top: auto !important;
   }
 
-  .my-sticky-virtscroll-table .table-container {
+  .table-wrapper :deep(.my-sticky-virtscroll-table .table-container) {
     overflow: visible !important;
     height: auto !important;
   }
 
-  .my-sticky-virtscroll-table [data-test="dashboard-table-pagination"] {
+  .table-wrapper :deep(.my-sticky-virtscroll-table [data-test="dashboard-table-pagination"]) {
     position: absolute !important;
     bottom: 0 !important;
     left: 0 !important;
     right: 0 !important;
-    background-color: #fff !important;
+    background-color: var(--color-surface-base) !important;
     z-index: 1 !important;
   }
-
-  .body--dark .my-sticky-virtscroll-table [data-test="dashboard-table-pagination"] {
-    background-color: #1a1a2e !important;
-  }
 }
 </style>
diff --git a/web/src/components/dashboards/settings/AddSettingVariable.schema.ts b/web/src/components/dashboards/settings/AddSettingVariable.schema.ts
index 2254cbc244..8b562fd566 100644
--- a/web/src/components/dashboards/settings/AddSettingVariable.schema.ts
+++ b/web/src/components/dashboards/settings/AddSettingVariable.schema.ts
@@ -1,33 +1,20 @@
 // Copyright 2026 OpenObserve Inc.
 //
-// Validation schema for AddSettingVariable.vue. This form was "shell-only": it
-// rendered an <OForm> with NO :schema, so its validate() was a no-op and every
-// required field was enforced by a hand-rolled onSubmit. This schema makes the
-// SCALAR fields schema-driven (a single conditional superRefine on type/scope);
-// the cross-field rules that cannot be expressed in Zod (filter-cycle detection
-// via API, AddPanel duplicate-name) still run imperatively AFTER the schema
-// passes.
+// Validation schema for AddSettingVariable.vue. Scalar fields are schema-driven
+// via a single conditional superRefine on type/scope; cross-field rules that
+// cannot be expressed in Zod (filter-cycle detection via API, AddPanel
+// duplicate-name) run imperatively after the schema passes.
 //
-// Restored / preserved BEFORE rules (complete-validation-inventory):
+// Required BEFORE rules:
 //   • name              → required + `^[a-zA-Z0-9_-]*$` regex
 //   • selectedTabs       → required when scope is "tabs" | "panels"
 //   • selectedPanels     → required when scope is "panels"
 //   • query_data.stream_type / stream / field → required when type === "query_values"
 //   • value (constant)   → required+trim when type === "constant"
 //
-// Dynamic arrays are now FORM-OWNED field-arrays (the field-array pattern):
-//   • query_data.filter[] (name / operator / value) — restores §4 #6: `value`
-//     is required for value-needing operators (was `v?.length > 0 || 'Required'`).
-//   • options[] (label / value / selected) — restores §4 #7: `value` required+trim
-//     (was `!!v.trim() || 'Field is required!'`).
-//   • customMultiSelectValue[] (string rows) — form-owned, no validation rule.
-// Row rules are enforced in the conditional superRefine (only for the relevant
-// `type`) so a non-`custom`/non-`query_values` type's default rows never block.
-// Every control is an OForm* bound by name (the filter value is OFormCombobox,
-// selectAllValueForMultiSelect is OFormToggleGroup); the owner reads form state
-// via form.useStore (no mirror), so the #6 rule gates submit directly.
-//
-// Validation TIMING is owned by OForm (submit-then-change).
+// Dynamic arrays are form-owned field-arrays; their row rules are enforced in
+// the conditional superRefine (only for the relevant `type`) so a
+// non-`custom`/non-`query_values` type's default rows never block submit.
 
 import { z } from "zod";
 
@@ -40,18 +27,16 @@ export const makeAddSettingVariableSchema = (t: (_key: string) => string) =>
   z
     .object({
       scope: z.string().optional().default("global"),
-      // selectedTabs / selectedPanels are sibling refs (not nested under
-      // variableData) — form-owned top-level fields.
+      // selectedTabs / selectedPanels are form-owned top-level fields.
       selectedTabs: z.array(z.string()).optional().default([]),
       selectedPanels: z.array(z.string()).optional().default([]),
       type: z.string().optional().default("query_values"),
-      // NO .trim() here (matches main): a saved name must be referenceable as
-      // `$name`, and the dependency graph extracts refs with `\$([a-zA-Z0-9_-]+)`.
-      // `.trim()` would let a value like "test_form " PASS validation (trimmed)
-      // yet be SAVED with the space (TanStack does not apply the transform to the
-      // submitted value), producing a name that `$test_form` can never match —
-      // silently breaking parent↔child dependencies. Validate the RAW value so
-      // any leading/trailing/internal whitespace is rejected outright.
+      // No .trim() here: a saved name must be referenceable as `$name`, and the
+      // dependency graph extracts refs with `\$([a-zA-Z0-9_-]+)`. `.trim()` would
+      // let "test_form " pass validation yet be saved with the space (TanStack
+      // does not apply the transform to the submitted value), producing a name
+      // that `$test_form` can never match. Validate the raw value so any
+      // whitespace is rejected outright.
       name: z
         .string()
         .min(1, t("dashboard.variableNameRequired"))
@@ -76,7 +61,6 @@ export const makeAddSettingVariableSchema = (t: (_key: string) => string) =>
       options: z.array(z.record(z.string(), z.any())).optional().default([]),
       multiSelect: z.boolean().optional().default(false),
       hideOnDashboard: z.boolean().optional().default(false),
-      // bare OToggleGroup, bridged through the mirror sync.
       selectAllValueForMultiSelect: z.string().optional().default("first"),
       customMultiSelectValue: z
         .array(z.string())
@@ -134,7 +118,7 @@ export const makeAddSettingVariableSchema = (t: (_key: string) => string) =>
       }
 
       // Filter rows (only for query_values). name + operator required per row;
-      // value required for value-needing operators (restored §4 #6).
+      // value required for value-needing operators.
       if (val.type === "query_values") {
         (val.query_data?.filter ?? []).forEach((row: any, i: number) => {
           if (!String(row?.name ?? "").trim()) {
@@ -164,8 +148,7 @@ export const makeAddSettingVariableSchema = (t: (_key: string) => string) =>
         });
       }
 
-      // Custom option rows (only for custom). label required; value required+trim
-      // (restored §4 #7).
+      // Custom option rows (only for custom). label required; value required+trim.
       if (val.type === "custom") {
         (val.options ?? []).forEach((row: any, i: number) => {
           if (!String(row?.label ?? "").trim()) {
diff --git a/web/src/components/dashboards/settings/AddSettingVariable.vue b/web/src/components/dashboards/settings/AddSettingVariable.vue
index 85c810f92e..1748228a13 100644
--- a/web/src/components/dashboards/settings/AddSettingVariable.vue
+++ b/web/src/components/dashboards/settings/AddSettingVariable.vue
@@ -21,8 +21,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </DashboardHeader>
 
       <div
-        class="overflow-y-auto px-[3px] pb-4 flex-1 min-h-0 [scrollbar-width:thin] [&::-webkit-scrollbar]:w-[6px] [&::-webkit-scrollbar]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded"
-        :class="store.state.theme === 'dark' ? '[scrollbar-color:#4b5563_transparent] [&::-webkit-scrollbar-thumb]:bg-[#4b5563]' : '[scrollbar-color:#d1d5db_transparent] [&::-webkit-scrollbar-thumb]:bg-[#d1d5db]'"
+        class="overflow-y-auto px-0.75 pb-4 flex-1 min-h-0 [scrollbar-width:thin] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-default [scrollbar-color:var(--color-border-strong)_transparent] [&::-webkit-scrollbar-thumb]:bg-border-strong"
       >
         <OForm
           greedy
@@ -184,7 +183,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   data-test="dashboard-variable-max-record-size"
                 >
                   <template #tooltip
-                    ><OTooltip :content="t('dashboard.maxRecordSize')"
+><OTooltip :content="t('dashboard.maxRecordSize')"
                   /></template>
                 </OFormInput>
               </div>
@@ -205,7 +204,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     />
                     <template #content>
                       {{ t('dashboard.filterInfoTooltip') }}
-                      <span class="bg-highlight" :class="store.state.theme === 'dark' ? 'bg-[#747474]' : 'bg-[#e7e6e6]'">$variableName</span>.
+                      <span class="bg-highlight-bg px-1.25">$variableName</span>.
                     </template>
                   </OTooltip>
                 </div>
@@ -228,8 +227,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       class="flex-2 min-w-0"
                     >
                       <template #empty>
-                        <span class="italic text-gray-400"
-                          >{{ t('dashboard.noDataFound') }}</span
+                        <span class="italic text-text-secondary"
+>{{ t('dashboard.noDataFound') }}</span
                         >
                       </template>
                     </OFormSelect>
@@ -300,7 +299,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </div>
 
                 <!-- show error if filter has cycle -->
-                <div v-show="filterCycleError" style="color: red" data-test="dashboard-variable-cycle-error">
+                <div v-show="filterCycleError" class="text-status-error-text" data-test="dashboard-variable-cycle-error">
                   {{ filterCycleError }}
                 </div>
               </div>
@@ -324,10 +323,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <div v-if="variableData.type == 'custom'">
             <div class="flex">
               <div class="w-6"></div>
-              <div class="flex-1 font-semibold text-gray-500">
+              <div class="flex-1 font-semibold text-text-label">
                 {{ t('common.label') }}
               </div>
-              <div class="flex-1 font-semibold text-gray-500">
+              <div class="flex-1 font-semibold text-text-label">
                 {{ t('common.value') }}
               </div>
               <div class="w-12 flex items-center justify-center">
@@ -339,7 +338,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   @click="onCustomSelectAllClick"
                 >
                   <template #tooltip
-                    ><OTooltip :content="t('dashboard.defaultSelectAll')"
+><OTooltip :content="t('dashboard.defaultSelectAll')"
                   /></template>
                 </OCheckbox>
               </div>
@@ -411,25 +410,25 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- it can be first value or all values -->
           <div v-if="['query_values'].includes(variableData.type)">
             <div class="mt-1.5 mb-1.5">
-              <div class="mt-1.25 mb-1.25 text-sm font-semibold" :class="store.state.theme === 'dark' ? 'text-[#999999]' : 'text-[#666666]'">{{ t('dashboard.byDefaultSelect') }}</div>
+              <div class="mt-1.25 mb-1.25 text-sm font-semibold text-text-secondary">{{ t('dashboard.byDefaultSelect') }}</div>
               <OFormToggleGroup name="selectAllValueForMultiSelect">
                 <OToggleGroupItem
                   value="first"
                   size="sm"
                   data-test="dashboard-multi-select-default-value-toggle-first-value"
-                  >{{ t('dashboard.firstValue') }}</OToggleGroupItem
+                >{{ t('dashboard.firstValue') }}</OToggleGroupItem
                 >
                 <OToggleGroupItem
                   value="all"
                   size="sm"
                   data-test="dashboard-multi-select-default-value-toggle-all-values"
-                  >{{ t('dashboard.allValues') }}</OToggleGroupItem
+                >{{ t('dashboard.allValues') }}</OToggleGroupItem
                 >
                 <OToggleGroupItem
                   value="custom"
                   size="sm"
                   data-test="dashboard-multi-select-default-value-toggle-custom"
-                  >{{ t('dashboard.customValue') }}</OToggleGroupItem
+                >{{ t('dashboard.customValue') }}</OToggleGroupItem
                 >
               </OFormToggleGroup>
             </div>
@@ -445,10 +444,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   ? variableData.customMultiSelectValue
                   : [variableData.customMultiSelectValue[0]]"
                 :key="index"
-                class="mt-3"
-                style="flex-wrap: wrap"
+                class="mt-3 flex-wrap"
               >
-                <div class="flex mr-2" style="width: 50%">
+                <div class="flex mr-2 w-1/2">
                   <OFormInput
                     :name="`customMultiSelectValue[${index}]`"
                     :placeholder="t('dashboard.addSettingVariable.enterValue')"
@@ -468,8 +466,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
               <div
                 v-if="variableData.multiSelect"
-                class="flex"
-                style="width: 50%"
+                class="flex w-1/2"
               >
                 <OButton
                   variant="outline"
@@ -513,8 +510,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </OForm>
       </div>
       <div
-        class="sticky bottom-0 left-0 w-full py-3 px-4 flex justify-end gap-3 z-10 border-t"
-        :class="store.state.theme === 'dark' ? 'border-t-[#333] [box-shadow:rgb(20,20,20)_0px_-4px_7px_0px]' : 'border-t-[#eee] [box-shadow:rgb(240,240,240)_0px_-4px_7px_0px]'"
+        class="sticky bottom-0 left-0 w-full py-3 px-4 flex justify-end gap-3 z-10 border-t border-t-border-default [box-shadow:var(--color-grey-150)_0_-0.25rem_0.4375rem_0] dark:[box-shadow:var(--color-grey-900)_0_-0.25rem_0.4375rem_0]"
       >
         <OButton
           variant="outline"
@@ -522,7 +518,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :disabled="isSavingVariable"
           @click="close"
           data-test="dashboard-variable-cancel-btn"
-          >{{ t("dashboard.cancel") }}</OButton
+        >{{ t("dashboard.cancel") }}</OButton
         >
         <OButton
           variant="primary"
@@ -531,7 +527,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           form="add-setting-variable-form"
           :loading="isSavingVariable"
           data-test="dashboard-variable-save-btn"
-          >{{ t("dashboard.save") }}</OButton
+        >{{ t("dashboard.save") }}</OButton
         >
       </div>
     </div>
@@ -611,7 +607,7 @@ export default defineComponent({
     // Store dashboard data
     const dashboardData = ref<any>({ tabs: [] });
 
-    // ── OForm owner wiring (rule ②/③: the form is the SOLE source, no mirror) ──
+    // ── OForm owner wiring: the form is the SOLE source, no mirror ──
     // Every field is name=-owned inside <OForm>, but the v-if/v-for live in THIS
     // component's render scope (the owner), so it creates the form with useOForm
     // and reads it reactively with form.useStore — ONE source of truth, no copy.
@@ -659,13 +655,13 @@ export default defineComponent({
     const formRemove = (name: string, index: number) =>
       form.removeFieldValue(name, index);
 
-    // Reactive READS of the form values (rule ③: form.useStore, NOT a local copy).
+    // Reactive READS of the form values (form.useStore, NOT a local copy).
     const formValues = form.useStore((s: any) => s.values);
     const selectedTabs = form.useStore((s: any) => s.values?.selectedTabs ?? []);
     const selectedPanels = form.useStore(
       (s: any) => s.values?.selectedPanels ?? [],
     );
-    // Two-way FACADE over the form (rule ③: NO stored copy) — every existing
+    // Two-way FACADE over the form (no stored copy) — every existing
     // `variableData.x` read delegates to form.useStore and every top-level write
     // delegates to form.setFieldValue, so the form stays the single source of
     // truth. (Nested writes must use setFormField with a dotted path.)
@@ -948,8 +944,8 @@ export default defineComponent({
           );
 
           if (variable) {
-            // Edit-prefill arrives async — seed the form via reset (rule ②:
-            // form is the source; the read-only projection picks it up).
+            // Edit-prefill arrives async — seed the form via reset; the
+            // read-only projection picks it up.
             await nextTick();
             form.reset(mapVariableToForm(variable));
 
@@ -989,7 +985,7 @@ export default defineComponent({
       }
     });
 
-    // Modify the watch on scope — reset tab/panel selections via the form.
+    // Watch on scope — reset tab/panel selections via the form.
     watch(
       () => variableData.scope,
       (newScope) => {
@@ -1006,7 +1002,7 @@ export default defineComponent({
       },
     );
 
-    // Modify updatePanels function — prune the panel selection via the form.
+    // updatePanels — prune the panel selection via the form.
     const updatePanels = () => {
       if (variableData.scope === "panels" && selectedTabs.value.length > 0) {
         const validPanelIds = dashboardData.value.tabs
@@ -1129,7 +1125,7 @@ export default defineComponent({
     // The validated @submit payload, captured for the useLoading save wrapper.
     let submitValue: AddSettingVariableForm | null = null;
 
-    // Build the saved variable from the validated form value (rule ②): map
+    // Build the saved variable from the validated form value: map
     // selectedTabs/selectedPanels → tabs/panels, drop query_data for non-query
     // types, reset multi-select config for non-list types.
     const buildVariablePayload = (value: AddSettingVariableForm): any => {
@@ -1309,11 +1305,11 @@ export default defineComponent({
 
     // @submit fires ONLY after the Zod schema passes — including the per-row
     // rules for the form-owned filter[]/options[] arrays (name/operator/value
-    // and label/value, restoring §4 #6/#7). Here we only run the cross-field
-    // checks that can't be expressed in Zod, then save.
+    // and label/value). Here we only run the cross-field checks that can't be
+    // expressed in Zod, then save.
     const onSubmit = async (value: AddSettingVariableForm) => {
-      // The validated value is the source of truth (rule ②); stash it for the
-      // save wrapper.
+      // The validated value is the source of truth; stash it for the save
+      // wrapper.
       submitValue = value;
 
       // When in AddPanel mode, check for duplicate variable names client-side
@@ -1519,7 +1515,7 @@ export default defineComponent({
       }));
     });
 
-    // Merged stream options: variables + streams for q-select
+    // Merged stream options: variables + streams for the select
     const mergedStreamOptions = computed(() => {
       const variableItems = dashboardVariablesFilterItems.value.map(
         (v: any) => ({ name: v.value }),
diff --git a/web/src/components/dashboards/settings/TabsDeletePopUp.vue b/web/src/components/dashboards/settings/TabsDeletePopUp.vue
index ba8ed87c72..55e49a2e7a 100644
--- a/web/src/components/dashboards/settings/TabsDeletePopUp.vue
+++ b/web/src/components/dashboards/settings/TabsDeletePopUp.vue
@@ -43,7 +43,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       >
         <div class="flex flex-col" data-test="dashboard-tab-delete-radio-group">
           <ORadioGroup v-model="action" orientation="vertical" class="gap-4">
-            <div style="display: flex; flex-direction: row">
+            <div class="flex flex-row">
               <ORadio
                 val="move"
                 :disabled="moveTabOptions.length === 0"
diff --git a/web/src/components/dashboards/settings/TabsSettings.spec.ts b/web/src/components/dashboards/settings/TabsSettings.spec.ts
index d34b44dd81..4178adc1e7 100644
--- a/web/src/components/dashboards/settings/TabsSettings.spec.ts
+++ b/web/src/components/dashboards/settings/TabsSettings.spec.ts
@@ -728,12 +728,12 @@ describe("TabsSettings", () => {
       await wrapper.vm.$nextTick();
 
       const editInput = wrapper.find('[data-test="dashboard-tab-settings-tab-name-edit"]');
-      // Check that the edit input exists and has the dark theme tailwind class applied
+      // The dark/light ternary collapsed to a single theme-aware token utility.
       expect(editInput.exists()).toBe(true);
-      expect(editInput.classes()).toContain("bg-gray-800");
+      expect(editInput.classes()).toContain("bg-input-bg");
     });
 
-    it("should not apply dark theme class when theme is light", async () => {
+    it("should apply the same semantic input background when theme is light", async () => {
       wrapper = createWrapper();
       await waitForComponent(wrapper);
 
@@ -742,7 +742,7 @@ describe("TabsSettings", () => {
       await wrapper.vm.$nextTick();
 
       const editInput = wrapper.find('[data-test="dashboard-tab-settings-tab-name-edit"]');
-      expect(editInput.classes()).not.toContain("bg-gray-800");
+      expect(editInput.classes()).toContain("bg-input-bg");
     });
   });
 
diff --git a/web/src/components/dashboards/settings/TabsSettings.vue b/web/src/components/dashboards/settings/TabsSettings.vue
index 8bece85ca4..98e2b92bc6 100644
--- a/web/src/components/dashboards/settings/TabsSettings.vue
+++ b/web/src/components/dashboards/settings/TabsSettings.vue
@@ -62,9 +62,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           >
           <div v-else class="flex items-center gap-1">
             <input
-              :class="store.state.theme === 'dark' ? 'bg-gray-800' : ''"
               v-model="editTabObj.data.name"
-              class="flex-1 border border-(--q-primary) rounded p-1 outline-none min-w-0 focus:border-(--q-secondary)"
+              class="flex-1 border border-theme-accent rounded-default p-1 outline-none min-w-0 focus:border-section-accent-secondary bg-input-bg"
               data-test="dashboard-tab-settings-tab-name-edit"
             />
             <OButton
@@ -297,7 +296,6 @@ export default defineComponent({
           route.query.folder ?? "default",
         );
 
-        // emit refresh to rerender
         emit("refresh");
 
         showPositiveNotification(t("dashboard.tabsSettings.dashboardUpdated"));
@@ -313,7 +311,6 @@ export default defineComponent({
             error?.message ?? t("dashboard.tabsSettings.tabReorderFailed"),
           );
         }
-        // emit refresh to rerender
         emit("refresh");
         await getDashboardData();
       }
@@ -342,7 +339,6 @@ export default defineComponent({
             editTabObj.data,
           );
 
-          // emit refresh to rerender
           emit("refresh");
           await getDashboardData();
 
@@ -364,14 +360,12 @@ export default defineComponent({
           );
         }
 
-        // emit refresh to rerender
         emit("refresh");
         await getDashboardData();
       }
     };
 
     const cancelEdit = () => {
-      // reset edit mode
       editTabId.value = null;
       editTabObj.data = {};
     };
@@ -384,7 +378,6 @@ export default defineComponent({
     const deleteItem = async (tabId: any) => {
       tabIdToBeDeleted.value = tabId;
       await nextTick();
-      // call cancelEdit to reset edit mode
       cancelEdit();
       deletePopupVisible.value = true;
     };
@@ -400,7 +393,6 @@ export default defineComponent({
         );
         await getDashboardData();
 
-        // emit event
         emit("refresh");
 
         tabIdToBeDeleted.value = null;
diff --git a/web/src/components/dashboards/settings/VariableAdHocValueSelector.vue b/web/src/components/dashboards/settings/VariableAdHocValueSelector.vue
index 704baca2bb..ddd144453c 100644
--- a/web/src/components/dashboards/settings/VariableAdHocValueSelector.vue
+++ b/web/src/components/dashboards/settings/VariableAdHocValueSelector.vue
@@ -1,8 +1,7 @@
 <template>
   <div class="flex flex-wrap items-center">
-    <!-- <div class="mb-2 title" :class="store.state.theme === 'dark' ? 'bg-gray-600' : 'bg-gray-300'" no-caps no-outline rounded>{{ variableItem?.name }}</div> -->
     <div
-      class="flex flex-nowrap items-center mb-1 gap-x-1"
+      class="flex flex-nowrap items-center mb-2 mr-4 gap-x-1"
       v-for="(item, index) in adhocVariables"
       :key="index"
     >
@@ -14,17 +13,15 @@
         @update:model-value="updateModelValueOfSelect(index, $event)"
         class="flex-1"
       />
-      <OSelect
+      <OSelect class="w-auto"
         v-model="adhocVariables[index].operator"
         :options="operatorOptions"
-        style="width: auto"
         data-test="dashboard-variable-adhoc-operator-selector"
       />
-      <OInput
+      <OInput class="w-31.25"
         v-model="adhocVariables[index].value"
         :placeholder="t('dashboard.variableAdHocValueSelector.enterValue')"
         :debounce="1000"
-        style="width: 125px"
         data-test="dashboard-variable-adhoc-value-selector"
         @update:model-value="emitValue()"
       />
@@ -37,7 +34,7 @@
         icon-left="close"
       >
       </OButton>
-      <!-- <div v-if="index != adhocVariables.length - 1" class="ml-2 and-border" :class="store.state.theme === 'dark' ? 'bg-gray-600' : 'bg-gray-300'">AND</div> -->
+      <!-- <div v-if="index != adhocVariables.length - 1" class="ml-2 and-border" class="bg-surface-subtle-hover">AND</div> -->
     </div>
     <OButton
       variant="ghost"
@@ -130,8 +127,3 @@ export default defineComponent({
 });
 </script>
 
-<style>
-.printMode .hideOnPrintMode {
-  display: none;
-}
-</style>
diff --git a/web/src/components/dashboards/settings/VariableCustomValueSelector.vue b/web/src/components/dashboards/settings/VariableCustomValueSelector.vue
index 8a0d220668..2dbf5995be 100644
--- a/web/src/components/dashboards/settings/VariableCustomValueSelector.vue
+++ b/web/src/components/dashboards/settings/VariableCustomValueSelector.vue
@@ -17,14 +17,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div>
     <OSelect
-      style="min-width: 150px; max-width: 40rem"
       v-model="selectedValue"
       :label="variableItem?.label || variableItem?.name"
       label-position="inside"
       :options="variableItem?.options || []"
       labelKey="label"
       valueKey="value"
-      class="textbox flex flex-col no-case o2-custom-select-dashboard"
+      class="textbox flex flex-col no-case o2-custom-select-dashboard min-w-37.5 max-w-160"
       :loading="variableItem.isLoading"
       :data-test="`variable-selector-${variableItem.name}-inner`"
       :multiple="variableItem.multiSelect"
diff --git a/web/src/components/dashboards/settings/VariableQueryValueSelector.spec.ts b/web/src/components/dashboards/settings/VariableQueryValueSelector.spec.ts
index 0dc4bbc3c9..85327e0a72 100644
--- a/web/src/components/dashboards/settings/VariableQueryValueSelector.spec.ts
+++ b/web/src/components/dashboards/settings/VariableQueryValueSelector.spec.ts
@@ -79,7 +79,7 @@ describe("VariableQueryValueSelector", () => {
     template: `
       <div
         data-test="dashboard-variable-query-value-selector"
-        class="q-select o-select"
+        class="o-select"
       >
         <input
           :value="modelValue"
diff --git a/web/src/components/dashboards/settings/VariableQueryValueSelector.vue b/web/src/components/dashboards/settings/VariableQueryValueSelector.vue
index 748da9fda7..5243df2e6b 100644
--- a/web/src/components/dashboards/settings/VariableQueryValueSelector.vue
+++ b/web/src/components/dashboards/settings/VariableQueryValueSelector.vue
@@ -18,14 +18,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <div>
     <OSelect
       ref="selectRef"
-      style="min-width: 9.375rem; max-width: 40rem"
       :model-value="oSelectModelValue"
       :label="variableItem?.label || variableItem?.name"
       label-position="inside"
       :options="computedOptions"
       labelKey="label"
       valueKey="value"
-      class="textbox flex flex-col no-case o2-custom-select-dashboard"
+      class="textbox flex flex-col no-case o2-custom-select-dashboard min-w-37.5 max-w-160"
       :loading="variableItem.isLoading && !isOpen"
       :data-test="`variable-selector-${variableItem.name}-inner`"
       :multiple="variableItem.multiSelect"
@@ -83,7 +82,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             @click.stop="handleCustomValue(currentSearchTerm)"
           >
             {{ currentSearchTerm }}
-            <span class="text-gray-400 text-xs italic">{{ t('dashboard.variableQueryValueSelector.custom') }}</span>
+            <span class="text-text-secondary text-xs italic">{{ t('dashboard.variableQueryValueSelector.custom') }}</span>
           </div>
         </template>
         <div
@@ -104,9 +103,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           @click.stop="handleCustomValue(currentSearchTerm)"
         >
           {{ currentSearchTerm }}
-          <span class="text-gray-400 text-xs italic">{{ t('dashboard.variableQueryValueSelector.custom') }}</span>
+          <span class="text-text-secondary text-xs italic">{{ t('dashboard.variableQueryValueSelector.custom') }}</span>
         </div>
-        <div v-else class="italic text-gray-500 flex justify-center items-center py-3" data-test="variable-query-value-selector-no-data">
+        <div v-else class="italic text-text-muted flex justify-center items-center py-3" data-test="variable-query-value-selector-no-data">
           {{ t('dashboard.variableQueryValueSelector.noDataFound') }}
         </div>
       </template>
diff --git a/web/src/components/dashboards/settings/VariableSettings.spec.ts b/web/src/components/dashboards/settings/VariableSettings.spec.ts
index 90f980b6f6..4ab91ca842 100644
--- a/web/src/components/dashboards/settings/VariableSettings.spec.ts
+++ b/web/src/components/dashboards/settings/VariableSettings.spec.ts
@@ -179,45 +179,17 @@ describe("VariableSettings", () => {
       global: {
         plugins: [],
         stubs: {
-          'q-btn': {
-            name: 'QBtn',
-            template: '<button @click="$emit(\'click\')"><slot /></button>',
-            props: ['icon', 'label', 'color', 'class'],
-            emits: ['click']
-          },
           'OIcon': {
-            name: 'QIcon',
+            name: 'OIcon',
             template: '<span class="OIcon"><slot /></span>',
             props: ['name', 'color']
           },
-          'q-dialog': {
-            name: 'QDialog',
-            template: '<div v-if="modelValue" class="q-dialog"><slot /></div>',
-            props: ['modelValue'],
-            emits: ['update:modelValue']
-          },
           ODialog: {
             name: 'ODialog',
             inheritAttrs: false,
             template: '<div v-if="open" data-test="o-dialog-stub" class="o-dialog"><div data-test="o-dialog-title">{{ title }}</div><slot /></div>',
             props: ['open', 'width', 'title', 'subTitle', 'persistent', 'size', 'showClose'],
             emits: ['update:open', 'click:primary', 'click:secondary', 'click:neutral']
-          },
-          'q-card': {
-            name: 'QCard',
-            template: '<div class="q-card"><slot /></div>'
-          },
-          'q-toolbar': {
-            name: 'QToolbar',
-            template: '<div class="q-toolbar"><slot /></div>'
-          },
-          'q-toolbar-title': {
-            name: 'QToolbarTitle',
-            template: '<div class="q-toolbar-title"><slot /></div>'
-          },
-          'q-card-section': {
-            name: 'QCardSection',
-            template: '<div class="q-card-section"><slot /></div>'
           }
         }
       }
diff --git a/web/src/components/dashboards/settings/VariableSettings.vue b/web/src/components/dashboards/settings/VariableSettings.vue
index bb226a9df4..fb57b23c21 100644
--- a/web/src/components/dashboards/settings/VariableSettings.vue
+++ b/web/src/components/dashboards/settings/VariableSettings.vue
@@ -14,8 +14,8 @@ You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <div class="full-height">
-    <div v-if="isAddVariable" class="flex flex-col full-height">
+  <div class="h-full max-h-full overflow-hidden">
+    <div v-if="isAddVariable" class="flex flex-col h-full max-h-full overflow-hidden">
       <AddSettingVariable
         v-if="isAddVariable"
         @save="handleSaveVariable"
@@ -24,7 +24,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :dashboardVariablesList="dashboardVariablesList"
       />
     </div>
-    <div v-else class="flex flex-col full-height">
+    <div v-else class="flex flex-col h-full max-h-full overflow-hidden">
       <DashboardHeader :title="t('dashboard.variableSettingsPage.variables')">
         <template #right>
           <div class="flex gap-2">
@@ -35,14 +35,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               size="sm"
               @click="showVariablesDependenciesGraphPopUp = true"
               data-test="dashboard-variable-dependencies-btn"
-              >{{ t('dashboard.showDependencies') }}</OButton
+            >{{ t('dashboard.showDependencies') }}</OButton
             >
             <OButton
               variant="primary"
               size="sm"
               @click="addVariables"
               data-test="dashboard-add-variable-btn"
-              >{{ t("dashboard.newVariable") }}</OButton
+            >{{ t("dashboard.newVariable") }}</OButton
             >
           </div>
         </template>
@@ -175,10 +175,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           v-model="confirmDeleteDialog"
         />
         <ODialog data-test="variable-settings-dependencies-graph-dialog" v-model:open="showVariablesDependenciesGraphPopUp" :width="60" :title="t('dashboard.variableSettingsPage.variablesDependencyGraph')">
-          <div style="height: 60vh">
+          <div class="h-[60vh]">
             <VariablesDependenciesGraph
               :variablesList="dashboardVariablesList"
-              :class="store.state.theme == 'dark' ? 'dark-mode' : 'bg-white'"
+              :class="'bg-surface-base'"
               @closePopUp="
                 () => (showVariablesDependenciesGraphPopUp = false)
               "
@@ -309,7 +309,7 @@ export default defineComponent({
       },
     ];
 
-    // Zero-padded position label ("01", "02", …) matching the previous design.
+    // Zero-padded position label ("01", "02", …).
     const formatIndex = (variable: any) => {
       const index = dashboardVariablesList.value.indexOf(variable);
       return index < 9 ? `0${index + 1}` : `${index + 1}`;
diff --git a/web/src/components/dashboards/settings/VariablesDependenciesGraph.spec.ts b/web/src/components/dashboards/settings/VariablesDependenciesGraph.spec.ts
index 8ebf2fb6bd..8ee815358e 100644
--- a/web/src/components/dashboards/settings/VariablesDependenciesGraph.spec.ts
+++ b/web/src/components/dashboards/settings/VariablesDependenciesGraph.spec.ts
@@ -238,8 +238,9 @@ describe("VariablesDependenciesGraph", () => {
   describe("Component Styling and Layout", () => {
     it("should have correct container styling", () => {
       const container = wrapper.find('[data-test="dashboard-variables-dependencies-graph-container"]');
-      expect(container.attributes('style')).toContain('height: 100%');
-      expect(container.attributes('style')).toContain('width: 100%');
+      // Sizing moved from an inline style to Tailwind utilities.
+      expect(container.classes()).toContain('h-full');
+      expect(container.classes()).toContain('w-full');
     });
 
     it("should pass transparent background to chart", async () => {
diff --git a/web/src/components/dashboards/settings/VariablesDependenciesGraph.vue b/web/src/components/dashboards/settings/VariablesDependenciesGraph.vue
index 5c781d71a2..a6b369c9cd 100644
--- a/web/src/components/dashboards/settings/VariablesDependenciesGraph.vue
+++ b/web/src/components/dashboards/settings/VariablesDependenciesGraph.vue
@@ -14,9 +14,8 @@ You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <div
+  <div class="h-full w-full"
     data-test="dashboard-variables-dependencies-graph-container"
-    style="height: 100%; width: 100%"
   >
     <ChartRenderer
       :data="{ options: options ?? { backgroundColor: 'transparent' } }"
diff --git a/web/src/components/dashboards/settings/common/DashboardHeader.spec.ts b/web/src/components/dashboards/settings/common/DashboardHeader.spec.ts
index a4d1e9ab2b..53b0724377 100644
--- a/web/src/components/dashboards/settings/common/DashboardHeader.spec.ts
+++ b/web/src/components/dashboards/settings/common/DashboardHeader.spec.ts
@@ -149,7 +149,7 @@ describe("DashboardHeader", () => {
 
       expect(backButton.props('variant')).toBe('outline');
       expect(backButton.props('size')).toBe('icon-xs');
-      // Migration replaced q-mr-sm with mr-2.
+      // Migration replaced the legacy margin class with mr-2.
       expect(backButton.classes().some((c) => c.includes("mr-2"))).toBe(true);
     });
 
diff --git a/web/src/components/dashboards/tabs/AddTab.schema.ts b/web/src/components/dashboards/tabs/AddTab.schema.ts
index fa1cd6cc7e..b07714c20b 100644
--- a/web/src/components/dashboards/tabs/AddTab.schema.ts
+++ b/web/src/components/dashboards/tabs/AddTab.schema.ts
@@ -1,12 +1,7 @@
 // Copyright 2026 OpenObserve Inc.
 //
 // Validation schema for AddTab.vue. Built via a factory so the required message
-// stays i18n-driven (pass useI18n's `t`), matching the old `t('dashboard.nameRequired')`.
-//
-// No defaults factory here: AddTab is an EDIT-prefill form. The OForm owns the
-// `name` field; the component seeds it via a `defaults` computed (edit → the
-// loaded tab's name, create → blank) and the non-schema fields (panels/tabId)
-// come from the externally-loaded `editingTab` record — not a schema factory.
+// stays i18n-driven (pass useI18n's `t`).
 
 import { z } from "zod";
 
diff --git a/web/src/components/dashboards/tabs/TabList.spec.ts b/web/src/components/dashboards/tabs/TabList.spec.ts
index ecea12611c..f255eec9e3 100644
--- a/web/src/components/dashboards/tabs/TabList.spec.ts
+++ b/web/src/components/dashboards/tabs/TabList.spec.ts
@@ -79,9 +79,6 @@ describe("TabList", () => {
           selectedTabId: selectedTabIdRef,
         },
         stubs: {
-          "q-tooltip": {
-            template: "<span data-test='tooltip-wrapper'><slot /></span>",
-          },
           "OIcon": {
             template: "<span data-test='OIcon'></span>",
           },
@@ -226,12 +223,14 @@ describe("TabList", () => {
       wrapper = createWrapper();
 
       const tabNames = wrapper.findAll('[data-test$="-name"]');
+      expect(tabNames.length).toBeGreaterThan(0);
       tabNames.forEach((tabName) => {
-        const style = tabName.attributes("style");
-        expect(style).toContain("white-space: nowrap");
-        expect(style).toContain("overflow: hidden");
-        expect(style).toContain("text-overflow: ellipsis");
-        expect(style).toContain("width: 100%");
+        // The inline truncation style is now a set of utilities.
+        const classes = tabName.classes();
+        expect(classes).toContain("whitespace-nowrap");
+        expect(classes).toContain("overflow-hidden");
+        expect(classes).toContain("text-ellipsis");
+        expect(classes).toContain("w-full");
       });
     });
   });
@@ -450,9 +449,6 @@ describe("TabList", () => {
             selectedTabId: customSelectedTabIdRef,
           },
           stubs: {
-            "q-tooltip": {
-              template: "<span data-test='tooltip-wrapper'><slot /></span>",
-            },
             "OIcon": {
               template: "<span data-test='OIcon'></span>",
             },
@@ -533,14 +529,17 @@ describe("TabList", () => {
       wrapper = createWrapper();
 
       const container = wrapper.find('[data-test="dashboard-tab-list-container"]');
-      expect(container.attributes("style")).toContain("display: flex");
+      // Was inline `display: flex`; now the `flex` utility.
+      expect(container.classes()).toContain("flex");
+      expect(container.classes()).toContain("items-center");
     });
 
     it("should apply correct styling to tabs", () => {
       wrapper = createWrapper();
 
       const oTabs = wrapper.find('[data-test="dashboard-tab-list"]');
-      expect(oTabs.attributes("style")).toContain("max-width: calc(100% - 40px)");
+      // Was inline `max-width: calc(100% - 40px)`; the 40px is now 2.5rem.
+      expect(oTabs.classes()).toContain("max-w-[calc(100%_-_2.5rem)]");
     });
   });
 
diff --git a/web/src/components/dashboards/tabs/TabList.vue b/web/src/components/dashboards/tabs/TabList.vue
index 708d7c2502..d2972fd4fc 100644
--- a/web/src/components/dashboards/tabs/TabList.vue
+++ b/web/src/components/dashboards/tabs/TabList.vue
@@ -15,19 +15,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div
+  <div class="flex items-center"
     data-test="dashboard-tab-list-container"
-    style="display: flex; align-items: center"
     @mouseover="isHovered = true"
     @mouseleave="isHovered = false"
   >
-    <OTabs
+    <OTabs class="max-w-[calc(100%_-_2.5rem)]"
       v-model="selectedTabId"
       :align="'left'"
       dense
       mobile-arrows
       @click.stop
-      style="max-width: calc(100% - 40px)"
       data-test="dashboard-tab-list"
     >
       <OTab
@@ -38,17 +36,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :data-test="`dashboard-tab-${tab.tabId}`"
       >
         <div class="w-full flex justify-between flex-nowrap">
-          <span
-            style="
-              white-space: nowrap;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              width: 100%;
-            "
+          <span class="whitespace-nowrap overflow-hidden text-ellipsis w-full"
             :title="tab?.name"
             :data-test="`dashboard-tab-${tab.tabId}-name`"
             :data-test-tab-name="tab?.name"
-            >{{ tab?.name }}</span
+          >{{ tab?.name }}</span
           >
         </div>
       </OTab>
diff --git a/web/src/components/dashboards/viewPanel/ViewPanel.spec.ts b/web/src/components/dashboards/viewPanel/ViewPanel.spec.ts
index baa68f0c0d..2538822998 100644
--- a/web/src/components/dashboards/viewPanel/ViewPanel.spec.ts
+++ b/web/src/components/dashboards/viewPanel/ViewPanel.spec.ts
@@ -277,21 +277,21 @@ describe("ViewPanel", () => {
           },
           PanelErrorButtons: {
             template: `<div>
-              <q-btn v-if="error" data-test="panel-error-data" class="warning">
-                <q-tooltip>{{ error }}</q-tooltip>
-              </q-btn>
-              <q-btn v-if="maxQueryRangeWarning" data-test="panel-max-duration-warning" class="warning">
-                <q-tooltip>{{ maxQueryRangeWarning }}</q-tooltip>
-              </q-btn>
-              <q-btn v-if="limitNumberOfSeriesWarningMessage" data-test="panel-limit-number-of-series-warning" class="warning">
-                <q-tooltip>{{ limitNumberOfSeriesWarningMessage }}</q-tooltip>
-              </q-btn>
-              <q-btn v-if="isCachedDataDifferWithCurrentTimeRange" data-test="panel-is-cached-data-differ-with-current-time-range-warning">
-                <q-tooltip>The data shown is cached</q-tooltip>
-              </q-btn>
-              <q-btn v-if="isPartialData && !isPanelLoading" data-test="panel-partial-data-warning" class="warning">
-                <q-tooltip>Partial data</q-tooltip>
-              </q-btn>
+              <button v-if="error" data-test="panel-error-data" class="warning">
+                <span>{{ error }}</span>
+              </button>
+              <button v-if="maxQueryRangeWarning" data-test="panel-max-duration-warning" class="warning">
+                <span>{{ maxQueryRangeWarning }}</span>
+              </button>
+              <button v-if="limitNumberOfSeriesWarningMessage" data-test="panel-limit-number-of-series-warning" class="warning">
+                <span>{{ limitNumberOfSeriesWarningMessage }}</span>
+              </button>
+              <button v-if="isCachedDataDifferWithCurrentTimeRange" data-test="panel-is-cached-data-differ-with-current-time-range-warning">
+                <span>The data shown is cached</span>
+              </button>
+              <button v-if="isPartialData && !isPanelLoading" data-test="panel-partial-data-warning" class="warning">
+                <span>Partial data</span>
+              </button>
               <span v-if="lastTriggeredAt && !viewOnly" class="lastRefreshedAt">
                 <span data-test="relative-time">{{ lastTriggeredAt }}</span>
               </span>
@@ -307,32 +307,10 @@ describe("ViewPanel", () => {
               "viewOnly",
             ],
           },
-          "q-separator": {
-            template: '<div class="q-separator"></div>',
-          },
-          "q-btn": {
-            template:
-              '<button @click="$emit(\'click\', $event)" :disabled="disable" :data-test="$attrs[\'data-test\']"><slot /></button>',
-            props: [
-              "outline",
-              "padding",
-              "no-caps",
-              "icon",
-              "disable",
-              "color",
-              "text-color",
-              "flat",
-            ],
-            emits: ["click"],
-            inheritAttrs: false,
-          },
           "OIcon": {
             template: '<i class="OIcon"></i>',
             props: ["name"],
           },
-          "q-tooltip": {
-            template: '<div class="q-tooltip"><slot /></div>',
-          },
           OButton: {
             name: "OButton",
             template:
diff --git a/web/src/components/dashboards/viewPanel/ViewPanel.vue b/web/src/components/dashboards/viewPanel/ViewPanel.vue
index 4233b26268..707c30d369 100644
--- a/web/src/components/dashboards/viewPanel/ViewPanel.vue
+++ b/web/src/components/dashboards/viewPanel/ViewPanel.vue
@@ -15,27 +15,26 @@
 
 <!-- eslint-disable vue/no-unused-components -->
 <template>
-  <div style="height: 100%; display: flex; flex-direction: column; overflow: hidden" data-test="view-panel-screen">
+  <div class="h-full flex flex-col overflow-hidden" data-test="view-panel-screen">
     <div class="flex justify-between items-center p-3">
       <div class="flex items-center text-xl tracking-[0.005em] mr-3">
         <span data-test="dashboard-viewpanel-title">
           {{ dashboardPanelData.data.title }}
         </span>
       </div>
-      <div class="flex items-center" style="gap: 0.5rem">
+      <div class="flex items-center gap-2">
         <!-- histogram interval for sql queries -->
         <HistogramIntervalDropDown
           v-if="!promqlMode && histogramFields.length"
           v-model="histogramInterval"
-          class="h-8 transition-all duration-200 hover:bg-[var(--color-interactive-hover-bg)]"
-          style="width: 150px"
+          class="h-8 transition-all duration-200 hover:bg-interactive-hover-bg w-37.5"
           data-test="dashboard-viewpanel-histogram-interval-dropdown"
         />
 
         <DateTimePickerDashboard
           v-model="selectedDate"
           ref="dateTimePickerRef"
-          class="h-8 min-h-8 transition-all duration-200 hover:bg-[var(--color-interactive-hover-bg)]"
+          class="h-8 min-h-8 transition-all duration-200 hover:bg-interactive-hover-bg"
           data-test="dashboard-viewpanel-date-time-picker"
           :disable="disable"
           @hide="setTimeForVariables()"
@@ -47,7 +46,7 @@
             store.state?.zoConfig?.min_auto_refresh_interval || 5
           "
           @trigger="refreshData"
-          class="h-8 transition-all duration-200 hover:bg-[var(--color-interactive-hover-bg)]"
+          class="h-8 transition-all duration-200 hover:bg-interactive-hover-bg"
           data-test="dashboard-viewpanel-refresh-interval"
         />
         <OButton
@@ -86,11 +85,11 @@
       </div>
     </div>
     <OSeparator />
-    <div class="flex" style="flex: 1; overflow: hidden">
-      <div class="flex flex-col" style="width: 100%; height: 100%">
-        <div class="flex" style="height: 100%; width: 100%">
-          <div class="flex flex-col" style="height: 100%; width: 100%">
-            <div class="flex flex-col" style="height: 100%">
+    <div class="flex flex-1 overflow-hidden">
+      <div class="flex flex-col w-full h-full">
+        <div class="flex h-full w-full">
+          <div class="flex flex-col h-full w-full">
+            <div class="flex flex-col h-full">
               <VariablesValueSelector
                 :variablesConfig="currentDashboardData.data?.variables"
                 :showDynamicFilters="
@@ -106,7 +105,7 @@
                 :tabId="currentTabId"
                 :panelId="currentPanelId"
               />
-              <div style="flex: 1; overflow: hidden">
+              <div class="flex-1 overflow-hidden">
                 <div
                   class="flex justify-end mr-2 items-center"
                   data-test="view-panel-last-refreshed-at"
@@ -127,7 +126,7 @@
                     :viewOnly="false"
                   />
                 </div>
-                <PanelSchemaRenderer
+                <PanelSchemaRenderer class="h-[calc(100%_-_1.3125rem)]"
                   v-if="chartData"
                   :key="dashboardPanelData.data.type"
                   :panelSchema="chartData"
@@ -156,7 +155,6 @@
                   "
                   @show-legends="showLegendsDialog = true"
                   data-test="dashboard-viewpanel-panel-schema-renderer"
-                  style="height: calc(100% - 21px)"
                   ref="panelSchemaRendererRef"
                 />
               </div>
@@ -642,7 +640,7 @@ export default defineComponent({
               globalVar.value = passedVar.value;
               globalVar.isVariablePartialLoaded = true;
               globalVar.isLoading = false;
-              // KEY FIX: Set pending to false to prevent API call
+              // Set pending to false to prevent API call
               globalVar.isVariableLoadingPending = false;
             }
           });
@@ -679,7 +677,7 @@ export default defineComponent({
     watch(selectedDate, () => {
       updateDateTime(selectedDate.value);
 
-      // CRITICAL FIX: When date time changes (user clicked Apply), also commit any pending variable changes
+      // CRITICAL: When date time changes (user clicked Apply), also commit any pending variable changes
       // This ensures that if user changed both variables and date time,
       // both changes are applied to the chart when Apply is clicked
       Object.assign(
diff --git a/web/src/components/functions/AddEnrichmentTable.schema.spec.ts b/web/src/components/functions/AddEnrichmentTable.schema.spec.ts
index 6b2ad24a65..e9aed14a3a 100644
--- a/web/src/components/functions/AddEnrichmentTable.schema.spec.ts
+++ b/web/src/components/functions/AddEnrichmentTable.schema.spec.ts
@@ -2,7 +2,7 @@
 //
 // Unit tests for the AddEnrichmentTable Zod schema, focused on the conditional
 // file/url rules that branch on `source` + `updateMode` + `isUpdating`. These
-// assert the restored Quasar BEFORE rules (name required, CSV file required, URL
+// assert the restored validation rules (name required, CSV file required, URL
 // required + http(s):// prefix).
 
 import { describe, it, expect } from "vitest";
diff --git a/web/src/components/functions/AddEnrichmentTable.schema.ts b/web/src/components/functions/AddEnrichmentTable.schema.ts
index 2837560281..bbcb7b687e 100644
--- a/web/src/components/functions/AddEnrichmentTable.schema.ts
+++ b/web/src/components/functions/AddEnrichmentTable.schema.ts
@@ -2,26 +2,19 @@
 //
 // Validation schema for AddEnrichmentTable.vue (Add/Update Enrichment Table).
 //
-// Migration notes (per the form-migration-playbook):
-//   • name   — required (trim) → form-owned OFormInput.
-//   • source — "file" | "url" discriminator → form-owned OFormOptionGroup.
+//   • name   — required (trim).
+//   • source — "file" | "url" discriminator.
 //   • file   — required ONLY when source === "file" (the CSV upload) → enforced
-//              in `superRefine`. Backed by an OFormFile (a single field collapses
-//              the old new-mode + update-mode <q-file> blocks).
+//              in `superRefine`.
 //   • url    — required + http(s):// prefix ONLY when source === "url" AND it is
 //              not a reload-only update (in reload mode the URL field is hidden,
-//              so no URL is needed). The conditional mirrors the old onSubmit
-//              guard `source === 'url' && (!isUpdating || updateMode !== 'reload')`.
-//   • append / updateMode — form-owned (OFormSwitch / OFormOptionGroup), no
-//              strict rule.
+//              so no URL is needed).
+//   • append / updateMode — form-owned, no strict rule.
 //
 // `isUpdating` is a prop (not a form field), so the schema takes a getter and
 // reads it lazily inside `superRefine` (it runs at validation time).
 //
-// Validation TIMING is owned by OForm (submit-then-change via revalidateLogic);
-// this file only describes WHAT is valid. The truthy→Zod inversions restore the
-// Quasar BEFORE rules (name required, CSV file required, URL required +
-// http(s):// prefix) verbatim.
+// Validation TIMING is owned by OForm; this file only describes WHAT is valid.
 
 import { z } from "zod";
 
@@ -31,7 +24,6 @@ export const makeAddEnrichmentTableSchema = (
 ) =>
   z
     .object({
-      // Restores the Quasar `!!v || 'Field is required!'` rule (+ trim).
       name: z.string().trim().min(1, t("function.nameRequired")),
       source: z.enum(["file", "url"]).default("file"),
       // A File object (or "" when empty). Required-ness is conditional → checked
@@ -42,8 +34,7 @@ export const makeAddEnrichmentTableSchema = (
       url: z.string().optional().default(""),
     })
     .superRefine((val, ctx) => {
-      // CSV file required when uploading from file. Restores the two
-      // `!!v || 'CSV File is required!'` <q-file> rules.
+      // CSV file required when uploading from file.
       if (val.source === "file" && !val.file) {
         ctx.addIssue({
           code: z.ZodIssueCode.custom,
@@ -54,7 +45,7 @@ export const makeAddEnrichmentTableSchema = (
 
       // URL required + http(s):// prefix when sourcing from a URL — but NOT for a
       // reload-only update (that mode reprocesses the existing URLs, so the URL
-      // input is hidden). Mirrors the old onSubmit guard.
+      // input is hidden).
       if (val.source === "url" && (!isUpdating() || val.updateMode !== "reload")) {
         const url = String(val.url ?? "");
         if (!url) {
diff --git a/web/src/components/functions/AddEnrichmentTable.vue b/web/src/components/functions/AddEnrichmentTable.vue
index 70ac7f7920..dabed85298 100644
--- a/web/src/components/functions/AddEnrichmentTable.vue
+++ b/web/src/components/functions/AddEnrichmentTable.vue
@@ -15,21 +15,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div
+  <OPageLayout
     data-test="add-enrichment-table-page"
-    class="flex flex-col px-2.5 h-[calc(100vh-var(--navbar-height)-0.875rem)]"
+    class="h-[calc(100vh-var(--navbar-height)-0.875rem)]"
+    :title="isUpdating ? t('function.updateEnrichmentTable') : t('function.addEnrichmentTable')"
+    title-data-test="add-enrichment-table-title"
+    :back="{
+      label: t('function.enrichmentTables'),
+      onClick: () => $emit('cancel:hideform'),
+      dataTest: 'add-enrichment-table-back-btn',
+    }"
   >
-    <!-- Standard app header: back tile + title (Save/Cancel stay in the footer). -->
-    <AppPageHeader
-      :title="isUpdating ? t('function.updateEnrichmentTable') : t('function.addEnrichmentTable')"
-      title-data-test="add-enrichment-table-title"
-      :back="{
-        label: t('function.enrichmentTables'),
-        onClick: () => $emit('cancel:hideform'),
-        dataTest: 'add-enrichment-table-back-btn',
-      }"
-      class="-mx-2.5 px-4 border-b border-border-default mb-2 shrink-0"
-    />
 
     <!-- Inline page form. Save lives in the footer INSIDE the <OForm>, so it is a
          native type="submit" (Enter submits) — no form-id needed. -->
@@ -40,7 +36,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       v-slot="{ isSubmitting }"
     >
       <!-- Form content -->
-      <div class="card-container flex-1 min-h-0 mb-2 flex flex-col overflow-y-auto p-4">
+      <div class="bg-card-glass-bg flex-1 min-h-0 mb-2 flex flex-col overflow-y-auto p-4">
         <div class="flex flex-col gap-4 max-w-[40rem]">
             <OFormInput
               name="name"
@@ -53,7 +49,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
             <!-- Data Source Selection (only for new tables) -->
             <div v-if="!isUpdating" class="flex flex-col gap-2">
-              <div class="text-gray-500 font-bold">{{ t('function.dataSource') }}</div>
+              <div class="text-text-label font-bold">{{ t('function.dataSource') }}</div>
               <OFormOptionGroup
                 name="source"
                 data-test="add-enrichment-table-source"
@@ -81,7 +77,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
             <!-- Append/Replace Mode Toggle (only when updating URL-based tables) -->
             <div v-if="isUpdating && formData.source === 'url'" class="flex flex-col gap-2">
-              <div class="text-gray-500 font-bold">Update Mode</div>
+              <div class="text-text-label font-bold">Update Mode</div>
               <OFormOptionGroup
                 name="updateMode"
                 data-test="add-enrichment-table-update-mode"
@@ -95,25 +91,25 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               v-if="isUpdating && formData.source === 'url' && formData.urlJobs && formData.urlJobs.length > 0"
               class="flex flex-col gap-2"
             >
-              <div class="text-gray-500 font-bold text-[0.8125rem]">
+              <div class="text-text-label font-bold text-compact">
                 Existing URLs ({{ formData.urlJobs.length }})
               </div>
-              <div class="rounded-md border border-[var(--o2-border-color)] bg-gray-50 p-2 flex flex-col gap-1">
+              <div class="rounded-default border border-card-glass-border bg-surface-panel p-2 flex flex-col gap-1">
                 <div v-for="(job, index) in formData.urlJobs" :key="job.id">
                   <div class="flex items-center gap-2">
-                    <span class="font-medium text-gray-400 text-xs">{{ Number(index) + 1 }}.</span>
+                    <span class="font-medium text-text-secondary text-xs">{{ Number(index) + 1 }}.</span>
                     <OIcon
                       :name="job.status === 'completed' ? 'check-circle' : job.status === 'failed' ? 'warning' : job.status === 'processing' ? 'sync' : 'schedule'"
                       size="sm"
                       :class="[
-                        job.status === 'processing' ? '[animation:rotate_2s_linear_infinite]' : '',
-                        job.status === 'completed' ? 'text-[var(--o2-positive)]' :
-                        job.status === 'failed' ? 'text-[var(--o2-negative)]' :
-                        job.status === 'processing' ? 'text-[var(--o2-primary)]' :
-                        'text-gray-500'
+                        job.status === 'processing' ? 'animate-[spin_2s_linear_infinite]' : '',
+                        job.status === 'completed' ? 'text-status-positive' :
+                        job.status === 'failed' ? 'text-status-negative' :
+                        job.status === 'processing' ? 'text-accent' :
+                        'text-icon-color'
                       ]"
                     />
-                    <div class="text-gray-500 text-[0.8125rem] break-all">
+                    <div class="text-text-secondary text-compact break-all">
                       {{ job.url }}
                     </div>
                   </div>
@@ -125,12 +121,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <!-- Mode explanation (always show for URL-based tables in edit mode) -->
             <div
               v-if="isUpdating && formData.source === 'url'"
-              class="text-sm text-gray-600 p-3 rounded-lg"
+              class="text-sm text-text-secondary p-3 rounded-default"
               :class="{
-                'bg-blue-50': formData.updateMode === 'reload',
-                'bg-green-50': formData.updateMode === 'append',
-                'bg-yellow-50': formData.updateMode === 'replace_failed',
-                'bg-orange-50': formData.updateMode === 'replace'
+                'bg-status-info-bg': formData.updateMode === 'reload',
+                'bg-status-success-bg': formData.updateMode === 'append',
+                'bg-status-warning-bg': formData.updateMode === 'replace_failed',
+                'bg-status-error-bg': formData.updateMode === 'replace'
               }"
             >
               <template v-if="formData.updateMode === 'reload'">
@@ -138,7 +134,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </template>
               <template v-else-if="formData.updateMode === 'append'">
                 <strong>Append Mode:</strong> Add a new URL to existing ones. Data from all URLs will be combined.
-                <div class="mt-2 text-orange-700">
+                <div class="mt-2 text-status-warning-text">
                   <strong>Important:</strong> The new CSV file must have the same columns as the existing data. The enrichment table schema cannot be changed.
                 </div>
               </template>
@@ -174,14 +170,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
             <pre
               v-if="compilationErr"
-              class="font-bold text-sm text-red-600 whitespace-pre-wrap"
+              class="font-bold text-sm text-status-error-text whitespace-pre-wrap"
             >{{ compilationErr }}</pre>
           </div>
       </div>
 
       <!-- Footer -->
       <div
-        class="card-container flex items-center justify-end -mx-2.5 px-3 py-2.5 shrink-0 gap-2 border-t border-border-default"
+        class="bg-card-glass-bg flex items-center justify-end -mx-2.5 px-3 py-2.5 shrink-0 gap-2 border-t border-border-default"
       >
         <OButton
           data-test="add-enrichment-table-cancel-btn"
@@ -203,7 +199,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </OButton>
       </div>
     </OForm>
-  </div>
+  </OPageLayout>
 </template>
 
 <script lang="ts">
@@ -224,7 +220,7 @@ import OFormSwitch from "@/lib/forms/Switch/OFormSwitch.vue";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import { toast } from "@/lib/feedback/Toast/useToast";
 import OSeparator from '@/lib/core/Separator/OSeparator.vue';
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import {
   makeAddEnrichmentTableSchema,
   type AddEnrichmentTableForm,
@@ -244,7 +240,7 @@ export const defaultValue: any = () => {
 export default defineComponent({
   name: "AddEnrichmentTable",
   components: { OSeparator, OButton, OForm, OFormInput, OFormFile, OFormOptionGroup, OFormSwitch,
-    OIcon, AppPageHeader,
+    OIcon, OPageLayout,
 },
   props: {
     modelValue: {
@@ -496,13 +492,3 @@ export default defineComponent({
 });
 </script>
 
-<style>
-@keyframes rotate {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-</style>
diff --git a/web/src/components/functions/AddFunction.schema.spec.ts b/web/src/components/functions/AddFunction.schema.spec.ts
index c5a78bc163..c6eb4cabde 100644
--- a/web/src/components/functions/AddFunction.schema.spec.ts
+++ b/web/src/components/functions/AddFunction.schema.spec.ts
@@ -1,6 +1,6 @@
 // Copyright 2026 OpenObserve Inc.
 //
-// Unit tests for the AddFunction Zod schema — the restored Quasar BEFORE rules
+// Unit tests for the AddFunction Zod schema — the previous validation rules
 // for the function `name` (required + method-name regex) and the optional
 // `transType`.
 
diff --git a/web/src/components/functions/AddFunction.schema.ts b/web/src/components/functions/AddFunction.schema.ts
index 897db494a1..479628e397 100644
--- a/web/src/components/functions/AddFunction.schema.ts
+++ b/web/src/components/functions/AddFunction.schema.ts
@@ -4,13 +4,6 @@
 // <OForm> + this schema; FunctionsToolbar.vue renders the validated `name` field
 // (and the `transType` radios) into the shared OForm context (provide/inject).
 //
-// Migration notes (per the form-migration-playbook):
-//   • name      — required + method-name regex → form-owned OFormInput in the
-//                 toolbar. Restores the Quasar BEFORE rule
-//                 `[!!v || 'Field is required!', isValidMethodName]`.
-//   • transType — VRL ("0") / JavaScript ("1") → form-owned OFormRadioGroup in
-//                 the toolbar. No strict rule (never carried `:rules`); optional.
-//
 // `function` (the Monaco VRL/JS body) and `params` are NOT form fields: the
 // editor is a bare Monaco instance (documented no-OForm*-equivalent exception)
 // rendered OUTSIDE the <OForm>, and `params` is a hidden constant. Both stay in
@@ -22,15 +15,14 @@
 import { z } from "zod";
 
 // Method-name pattern: must start with a letter or underscore, then letters /
-// numbers / underscores (case-insensitive). Mirrors the old `isValidMethodName`.
+// numbers / underscores (case-insensitive).
 export const functionNameRegex = /^[A-Z_][A-Z0-9_]*$/i;
 
 // A FACTORY (not a module-level schema): the messages are resolved by calling
 // the injected `t` (vue-i18n) when the schema is built. The owner builds it per
 // mount from its `useI18n()` context, so `t` resolves in the active locale. A
 // module-level schema would instead evaluate `t` at import time — before i18n is
-// ready and frozen to whatever locale loaded first. The `(t: (_key: string) =>
-// string)` signature mirrors makeAddDashboardSchema and the other form schemas.
+// ready and frozen to whatever locale loaded first.
 export const makeAddFunctionSchema = (t: (_key: string) => string) =>
   z.object({
     // NO .trim(): OForm/TanStack validates with the schema but SAVES the raw form
diff --git a/web/src/components/functions/AddFunction.vue b/web/src/components/functions/AddFunction.vue
index cdbc14fbdd..ad695090e4 100644
--- a/web/src/components/functions/AddFunction.vue
+++ b/web/src/components/functions/AddFunction.vue
@@ -52,10 +52,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :limits="[30, 100]"
           class="overflow-hidden w-full"
           :horizontal="false"
-          separator-class="w-[0.0625rem] bg-[var(--o2-border-color)]"
+          separator-class="w-[0.0625rem] bg-card-glass-border"
         >
           <template v-slot:before>
-            <div class="px-2 pt-2 pb-3 card-container h-full flex flex-col min-h-0">
+            <div class="px-2 pt-2 pb-3 bg-card-glass-bg h-full flex flex-col min-h-0">
               <div class="pb-2 o2-input flex flex-col flex-1 min-h-0">
                   <FullViewContainer
                     name="function"
@@ -65,7 +65,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   />
                   <div
                     v-show="expandState.functions"
-                    class="mb-[0.375rem] relative flex-1 min-h-0"
+                    class="mb-1.5 relative flex-1 min-h-0"
                   >
                     <!-- Unified Query Editor (with built-in AI bar) -->
                     <unified-query-editor
@@ -94,7 +94,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       v-if="!formData.function && functionEditorPlaceholderFlag"
                       class="absolute inset-0 flex items-start pt-0.75 pr-2 pb-0 pl-[2.15rem] pointer-events-none z-1 select-none"
                     >
-                      <span class="[font-family:monospace] text-[var(--text-base)] [line-height:1.3125rem] text-[#a0aec0] dark:text-[#718096] whitespace-nowrap overflow-hidden [text-overflow:ellipsis]">{{
+                      <span class="font-mono text-[var(--text-sm)] [line-height:1.3125rem] text-text-placeholder whitespace-nowrap overflow-hidden [text-overflow:ellipsis]">{{
                         transType === '1' ? jsPlaceholder : vrlPlaceholder
                       }}</span>
                     </div>
@@ -105,18 +105,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         name="function"
                         v-model:is-expanded="expandState.functionError"
                         :label="transType === '1' ? t('function.jsErrorDetails') : t('function.errorDetails')"
-                        labelClass="text-red-600 font-semibold"
+                        labelClass="text-status-error-text font-semibold"
                       />
                       <div
                         v-if="expandState.functionError"
-                        class="px-2 pb-2 border-l-4 border-red-500"
-                        :class="
-                          store.state.theme === 'dark'
-                            ? 'bg-gray-800'
-                            : 'bg-gray-100'
-                        "
+                        class="px-2 pb-2 border-l-4 border-status-negative bg-surface-subtle"
                       >
-                        <pre class="my-0 text-red-700" :class="store.state.theme === 'dark' ? 'text-red-400' : 'text-red-700'" style="white-space: pre-wrap; font-family: 'Courier New', monospace; font-size: 13px;">{{
+                        <pre class="my-0 text-status-error-text whitespace-pre-wrap" style="font-family: var(--font-mono); font-size: var(--text-compact);">{{
                           vrlFunctionError
                         }}</pre>
                       </div>
@@ -126,7 +121,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </div>
           </template>
           <template v-slot:after>
-            <div class="px-2 pt-2 pb-3 h-full overflow-y-auto card-container">
+            <div class="px-2 pt-2 pb-3 h-full overflow-y-auto bg-card-glass-bg">
               <TestFunction
                 ref="testFunctionRef"
                 :vrlFunction="vrlFunctionData"
@@ -141,9 +136,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <div
         v-if="store.state.isAiChatEnabled && !isAddFunctionComponent"
         :class="[
-          'w-1/4 max-w-full min-w-[75px]',
-          heightOffset ? 'ai-chat-with-offset' : '',
-          store.state.theme == 'dark' ? 'dark-mode-chat-container' : 'light-mode-chat-container',
+          'w-1/4 max-w-full min-w-19',
+          heightOffset ? '[--ai-chat-offset:4.6875rem]' : '',
         ]"
       >
         <O2AIChat
@@ -296,15 +290,13 @@ export default defineComponent({
 
     const beingUpdated = computed(() => props.isUpdated);
 
-    // OWNER pattern (Rule ③): AddFunction OWNS the <OForm>, but it also needs to
-    // READ form state (transType drives the Monaco editor language + placeholder)
-    // and WRITE it (the editor's language toggle). The owner cannot inject the
-    // form it renders, so it CREATES the form here with useOForm, reads it
-    // reactively with form.useStore (the ONE source of truth — NO mirror, NO
-    // copy), and hands it to <OForm :form="addFunctionForm">. Defaults are seeded
-    // from modelValue (edit-prefill); the VRL/JS body + `params` stay in
-    // `formData` (the bare Monaco editor lives OUTSIDE the form and is merged in
-    // at @submit).
+    // AddFunction OWNS the <OForm> but also reads form state (transType drives
+    // the Monaco editor language + placeholder) and writes it (the editor's
+    // language toggle). The owner cannot inject the form it renders, so it
+    // creates the form here with useOForm, reads it reactively via form.useStore,
+    // and hands it to <OForm :form="addFunctionForm">. Defaults are seeded from
+    // modelValue (edit-prefill); the VRL/JS body + `params` stay in `formData`
+    // (the bare Monaco editor lives outside the form and is merged in at @submit).
     const addFunctionForm = useOForm<AddFunctionForm>({
       defaultValues: {
         name: props.modelValue?.name ?? "",
@@ -533,8 +525,8 @@ export default defineComponent({
 
     // Unified Query Editor: Handle language change
     const handleLanguageChange = (newLanguage: 'vrl' | 'javascript') => {
-      // transType is form-owned — write it straight to the ONE form; the
-      // useStore reads above make the editor + tooltip react (no mirror).
+      // transType is form-owned — write it straight to the form; the useStore
+      // reads above make the editor + tooltip react.
       const tt = newLanguage === 'javascript' ? '1' : '0';
       addFunctionForm.setFieldValue('transType', tt);
     };
@@ -644,9 +636,3 @@ export default defineComponent({
   },
 });
 </script>
-
-<style>
-.ai-chat-with-offset {
-  --ai-chat-offset: 75px;
-}
-</style>
diff --git a/web/src/components/functions/AssociatedStreamFunction.spec.ts b/web/src/components/functions/AssociatedStreamFunction.spec.ts
index 0df1958960..a92623a8eb 100644
--- a/web/src/components/functions/AssociatedStreamFunction.spec.ts
+++ b/web/src/components/functions/AssociatedStreamFunction.spec.ts
@@ -356,25 +356,8 @@ describe("AssociatedStreamFunction", () => {
       expect(vm.logStream[0].storage_size).toBe("--");
     });
 
-    it("should format row number with leading zero for first 9 items", async () => {
-      mockGetStreams.mockResolvedValue({
-        list: Array.from({ length: 10 }, (_, i) => ({
-          name: `stream${i + 1}`,
-          stream_type: "logs",
-          stats: null,
-        })),
-      });
-
-      const wrapper = mount(AssociatedStreamFunction, {
-        global: { plugins: [i18n, store, router], stubs: globalStubs },
-      });
-
-      await flushPromises();
-
-      const vm = wrapper.vm as any;
-      expect(vm.logStream[0]["#"]).toBe("01");
-      expect(vm.logStream[8]["#"]).toBe("09");
-    });
+    // Zero-padded row numbering is now OTable's built-in `show-index`
+    // (covered by OTable's own spec); `logStream` no longer carries a "#" field.
   });
 
   describe("Row Expansion (toggleStreamRow)", () => {
diff --git a/web/src/components/functions/AssociatedStreamFunction.vue b/web/src/components/functions/AssociatedStreamFunction.vue
index c6935c3e62..8f74039559 100644
--- a/web/src/components/functions/AssociatedStreamFunction.vue
+++ b/web/src/components/functions/AssociatedStreamFunction.vue
@@ -17,7 +17,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <!-- eslint-disable vue/v-on-event-hyphenation -->
 <!-- eslint-disable vue/attribute-hyphenation -->
 <template>
-  <div class="rounded-md p-0" style="min-height: inherit">
+  <div class="rounded-default p-0" style="min-height: inherit">
     <OTable
       data-test="log-stream-table"
       :data="filteredStreamData"
@@ -30,6 +30,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       :page-size-options="pageSizeOptions"
       expansion="single"
       v-model:expanded-ids="expandedIds"
+      show-index
       :show-global-filter="false"
       :default-columns="false"
       width="100%"
@@ -40,8 +41,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </template>
 
       <template #top>
-        <div class="flex items-center w-full border-b border-[var(--o2-border)] pb-2 mb-1">
-          <div class="text-[15px] font-[600]" data-test="log-stream-title-text">
+        <div class="flex items-center w-full border-b border-border-default pb-2 mb-1">
+          <div class="text-sm font-[600]" data-test="log-stream-title-text">
             {{ t("logStream.header") }}
           </div>
           <div class="ml-auto" data-test="stream-association-search-input">
@@ -89,15 +90,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           >
             <template #top>
               <div
-                style="
-                  display: flex;
-                  flex-direction: row;
-                  width: 100%;
-                  justify-content: space-between;
-                "
+                class="flex flex-row w-full justify-between"
               >
                 <div
-                  class="text-[15px] font-[600] flex items-center"
+                  class="text-sm font-[600] flex items-center"
                   data-test="log-stream-title-text"
                 >
                   {{ t("function.associatedFunctionHeader") }}
@@ -163,7 +159,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <template #empty>
               <div
                 v-if="!addFunctionInProgress"
-                style="width: 100%; text-align: center"
+                class="w-full text-center"
               >
                 No functions found
               </div>
@@ -173,6 +169,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </template>
     </OTable>
     <ODrawer data-test="associated-stream-function-index-schema-drawer"
+      bleed
       v-model:open="showIndexSchemaDialog"
       size="lg"
     >
@@ -212,7 +209,7 @@ import OSearchInput from "@/lib/forms/SearchInput/OSearchInput.vue";
 import OTable from "@/lib/core/Table/OTable.vue";
 import type { OTableColumnDef } from "@/lib/core/Table/OTable.types";
 import { toast } from "@/lib/feedback/Toast/useToast";
-import { TABLE_INDEX_COL_SIZE, COL } from "@/lib/core/Table/OTable.types";
+import { COL } from "@/lib/core/Table/OTable.types";
 
 export default defineComponent({
   name: "PageLogStream",
@@ -233,13 +230,6 @@ export default defineComponent({
     const previousOrgIdentifier = ref("");
     const functionsList = ref<any>([]);
     const columns: OTableColumnDef[] = [
-      {
-        id: "#",
-        header: "#",
-        accessorKey: "#",
-        size: TABLE_INDEX_COL_SIZE,
-        meta: { align: "left" },
-      },
       {
         id: "name",
         accessorKey: "name",
@@ -378,7 +368,7 @@ export default defineComponent({
           header: t("user.actions"),
           isAction: true,
           size: 80,
-          meta: { align: "left", actionCount: 1 },
+          meta: { align: "center", actionCount: 1 },
         },
       ];
       if (expandedRow.value.stream_type !== "logs") {
@@ -399,7 +389,6 @@ export default defineComponent({
 
         getStreams("", false)
           .then((res: any) => {
-            let counter = 1;
             let doc_num = "";
             let storage_size = "";
             let compressed_size = "";
@@ -417,7 +406,6 @@ export default defineComponent({
                   compressed_size = data.stats.compressed_size + " MB";
                 }
                 return {
-                  "#": counter <= 9 ? `0${counter++}` : counter++,
                   name: data.name,
                   doc_num: doc_num,
                   storage_size: storage_size,
diff --git a/web/src/components/functions/EnrichmentSchema.spec.ts b/web/src/components/functions/EnrichmentSchema.spec.ts
index e885aeb485..dd1ea12505 100644
--- a/web/src/components/functions/EnrichmentSchema.spec.ts
+++ b/web/src/components/functions/EnrichmentSchema.spec.ts
@@ -261,7 +261,9 @@ describe('EnrichmentSchema.vue Branch Coverage', () => {
       await nextTick();
       await nextTick();
 
-      const themeTable = wrapper.find('.light-theme-table');
+      // Theming is now global (`.dark` on <html>), not a per-element class, so
+      // the mapping table renders the same regardless of theme.
+      const themeTable = wrapper.find('[data-test="schema-log-stream-field-mapping-table"]');
       expect(themeTable.exists()).toBe(true);
     });
 
@@ -280,7 +282,9 @@ describe('EnrichmentSchema.vue Branch Coverage', () => {
       await nextTick();
       await nextTick();
 
-      const themeTable = wrapper.find('.dark-theme-table');
+      // Theming is now global (`.dark` on <html>), not a per-element class, so
+      // the mapping table renders the same regardless of theme.
+      const themeTable = wrapper.find('[data-test="schema-log-stream-field-mapping-table"]');
       expect(themeTable.exists()).toBe(true);
     });
   });
diff --git a/web/src/components/functions/EnrichmentSchema.vue b/web/src/components/functions/EnrichmentSchema.vue
index 111dd143dc..bd4b1b399a 100644
--- a/web/src/components/functions/EnrichmentSchema.vue
+++ b/web/src/components/functions/EnrichmentSchema.vue
@@ -20,6 +20,7 @@
 
     <template>
         <ODrawer data-test="enrichment-schema-drawer"
+        bleed
         :open="open"
         size="lg"
         :title="t('logStream.schemaHeader')"
@@ -32,9 +33,9 @@
         >
           <OSpinner size="md" data-test="enrichment-schema-loading-indicator" />
         </div>
-        <div v-else class="indexDetailsContainer p-5 w-full" style="height: 100vh">
+        <div v-else class="indexDetailsContainer p-5 w-full h-screen">
           <div
-            class="titleContainer flex flex-col items-flex-start gap-5 bg-[#00000005] border border-[var(--o2-border-input)] rounded-[5px] p-4"
+            class="titleContainer flex flex-col items-flex-start gap-5 bg-surface-subtle border border-input-border rounded-default p-4"
           >
             <div
               data-test="stream-details-container"
@@ -75,7 +76,7 @@
           <div class="flex items-center justify-between gap-4 mt-4">
             <div
               data-test="enrichment-schema-total-fields"
-              class="text-sm w-28.75 h-7.5 rounded-sm flex items-center justify-center bg-(--o2-theme-color) text-white"
+              class="text-sm w-28.75 h-7.5 rounded-default flex items-center justify-center bg-theme-accent text-text-inverse"
             >
                 All Fields ({{ schemaData.schema.length }})
             </div>
@@ -90,11 +91,6 @@
           <div>
 
             <div
-              :class="
-                store.state.theme === 'dark'
-                  ? 'dark-theme-table'
-                  : 'light-theme-table'
-              "
               style="margin-bottom: 30px"
               class="mt-4"
             >
@@ -246,3 +242,20 @@
     },
     });
     </script>
+
+<style scoped>
+/* keep(lib-override:otable): reaches into the OTable-rendered th/td DOM to pin
+   the first column's inset and the fifth column's width — not expressible as
+   utilities on this template. */
+.indexDetailsContainer :deep(th:first-child),
+.indexDetailsContainer :deep(td:first-child) {
+  padding-left: 0.5rem !important;
+}
+
+.indexDetailsContainer :deep(th:nth-child(5)),
+.indexDetailsContainer :deep(td:nth-child(5)) {
+  min-width: 15rem;
+  width: 15rem;
+  max-width: 15rem;
+}
+</style>
diff --git a/web/src/components/functions/EnrichmentTableList.spec.ts b/web/src/components/functions/EnrichmentTableList.spec.ts
index 688cc772c5..4156e88ac2 100644
--- a/web/src/components/functions/EnrichmentTableList.spec.ts
+++ b/web/src/components/functions/EnrichmentTableList.spec.ts
@@ -177,12 +177,12 @@ describe("EnrichmentTableList", () => {
       expect(wrapper.find('[data-test="enrichment-tables-list-page"]').exists()).toBe(true);
     });
 
-    it("renders the section title in the standard AppPageHeader", async () => {
+    it("renders the section title in the standard OPageHeader", async () => {
       const wrapper = mountComponent();
 
       await flushPromises();
 
-      // Title now lives in the standard AppPageHeader (row 1).
+      // Title now lives in the standard OPageHeader (row 1).
       expect(wrapper.find(".app-page-header h1").exists()).toBe(true);
     });
 
diff --git a/web/src/components/functions/EnrichmentTableList.vue b/web/src/components/functions/EnrichmentTableList.vue
index 67f40f7fd7..2d6352d859 100644
--- a/web/src/components/functions/EnrichmentTableList.vue
+++ b/web/src/components/functions/EnrichmentTableList.vue
@@ -21,17 +21,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     data-test="enrichment-tables-list-page"
     class="flex flex-col h-full min-h-0"
   >
-    <div v-if="!showAddJSTransformDialog" class="flex flex-col h-full min-h-0">
-      <!-- Standard section header: title + actions only. Type filter + search
-           moved into the table's own toolbar below. -->
-      <AppPageHeader
-        :title="t('function.enrichmentTables')"
-        icon="dataset"
-        :subtitle="t('function.enrichmentTablesSubtitle')"
-        tabs-below
-        class="shrink-0 px-4"
-      >
-        <template #tabs>
+    <OPageLayout
+      v-if="!showAddJSTransformDialog"
+      :title="t('function.enrichmentTables')"
+      icon="dataset"
+      :subtitle="t('function.enrichmentTablesSubtitle')"
+      tabs-below
+      bleed
+    >
+        <template #header-tabs>
           <PipelineSectionTabs />
         </template>
         <template #actions>
@@ -44,9 +42,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             {{ t(`function.addEnrichmentTable`) }}
           </OButton>
         </template>
-      </AppPageHeader>
       <div class="w-full flex-1 min-h-0 overflow-hidden">
-        <div class="card-container h-full">
+        <div class="bg-card-glass-bg h-full">
             <OTable
               ref="qTable"
               :frame="false"
@@ -60,6 +57,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :page-size-options="perPageOptionsList"
               sorting="client"
               filter-mode="client"
+              show-index
               :show-global-filter="false"
               :default-columns="false"
               :enable-column-resize="true"
@@ -138,10 +136,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       @click="showUrlJobsDialog(row)"
                     >
                       <OTag type="enrichmentType" value="url" />
-                      <span v-if="row.urlJobs.length > 1" class="text-text-primary"> ({{ row.urlJobs.length }})</span>
+                      <span v-if="row.urlJobs.length > 1" class="text-text-body"> ({{ row.urlJobs.length }})</span>
                     </span>
                     <span v-if="row.aggregateStatus === 'completed'">
-                      <OIcon name="check-circle" size="sm" class="text-(--o2-positive)">
+                      <OIcon name="check-circle" size="sm" class="text-status-positive">
                         <OTooltip>
                           <template #content>
                             <div style="max-width: 300px;">
@@ -155,7 +153,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       </OIcon>
                     </span>
                     <span v-else-if="row.aggregateStatus === 'processing'">
-                      <OIcon name="sync" size="sm" class="[animation:rotate_1s_linear_infinite]">
+                      <OIcon name="sync" size="sm" class="animate-spin">
                         <OTooltip>
                           <template #content>
                             <div style="max-width: 300px;">
@@ -269,7 +267,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
               <template #bottom>
                 <div class="flex items-center justify-between w-full py-2">
-                  <div class="flex items-center o2-table-footer-title mr-4">
+                  <div class="flex items-center text-xs font-normal mr-4">
                     {{ resultTotal }} {{ t('function.enrichmentTables') }}
                   </div>
                   <OButton
@@ -287,7 +285,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </OTable>
           </div>
         </div>
-    </div>
+    </OPageLayout>
     <div v-else>
       <add-enrichment-table
         v-model="formData"
@@ -317,6 +315,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     <!-- URL Jobs Dialog -->
     <ODrawer data-test="enrichment-table-list-url-jobs-drawer"
+      bleed
       v-model:open="showUrlJobsDialogState"
       size="lg"
     >
@@ -342,14 +341,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     Records: {{ job.total_records_processed?.toLocaleString() }}<br/>
                     Size: {{ job.total_bytes_fetched ? formatSizeFromMB(((job.total_bytes_fetched / 1024 / 1024).toFixed(2))) : '0 MB' }}
                   </span>
-                  <span v-if="job.status === 'failed'" :data-test="`enrichment-url-jobs-item-${index}-error`" class="block text-xs text-red-500 mt-2">
+                  <span v-if="job.status === 'failed'" :data-test="`enrichment-url-jobs-item-${index}-error`" class="block text-xs text-status-error-text mt-2">
                     Error: {{ job.error_message }}
                   </span>
                 </div>
               </li>
             </ul>
           </div>
-          <div v-else class="text-center p-3 text-gray-400">
+          <div v-else class="text-center p-3 text-text-muted">
             No URL jobs found
           </div>
       </div>
@@ -385,7 +384,7 @@ import OButton from "@/lib/core/Button/OButton.vue";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import ODrawer from "@/lib/overlay/Drawer/ODrawer.vue";
 import OSearchInput from "@/lib/forms/SearchInput/OSearchInput.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import PipelineSectionTabs from "@/components/pipeline/PipelineSectionTabs.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
 import { useShortcuts } from "@/lib/vue-shortcut-manager";
@@ -395,12 +394,12 @@ import OTag from "@/lib/core/Badge/OTag.vue";
 import ONumberCell from "@/lib/core/Table/cells/ONumberCell.vue";
 import OTable from "@/lib/core/Table/OTable.vue";
 import type { OTableColumnDef } from "@/lib/core/Table/OTable.types";
-import { TABLE_INDEX_COL_SIZE, COL } from "@/lib/core/Table/OTable.types";
+import { COL } from "@/lib/core/Table/OTable.types";
 
 export default defineComponent({
   name: "EnrichmentTableList",
   components: {
-    AppPageHeader,
+    OPageLayout,
     PipelineSectionTabs,
     AddEnrichmentTable,
     OEmptyState,
@@ -444,13 +443,12 @@ export default defineComponent({
     const { track } = useReo();
     const { toast } = useToast();
     const columns: OTableColumnDef[] = [
-      { id: "#", header: "#", accessorKey: "#", size: TABLE_INDEX_COL_SIZE, meta: { align: "left" } },
       { id: "name", header: t("common.name"), accessorKey: "name", sortable: true, resizable: true, hideable: true, size: COL.name, minSize: 160, meta: { align: "left", flex: true } },
       { id: "type", header: "Type", accessorFn: (row: any) => (row.urlJobs && row.urlJobs.length > 0) ? "Url" : "File", sortable: true, resizable: true, hideable: true, meta: { align: "left" }, size: COL.type },
       { id: "doc_num", header: t("logStream.docNum"), accessorKey: "doc_num", sortable: true, resizable: true, hideable: true, meta: { align: "right" }, size: COL.count },
       { id: "storage_size", header: t("logStream.storageSize"), accessorKey: "original_storage_size", sortable: true, resizable: true, hideable: true, meta: { align: "right", format: (_v: any, row: any) => formatSizeFromMB(row.storage_size) }, size: COL.sizeBytes },
       { id: "compressed_size", header: t("logStream.compressedSize"), accessorKey: "original_compressed_size", sortable: true, resizable: true, hideable: true, meta: { align: "right", format: (_v: any, row: any) => formatSizeFromMB(row.compressed_size) }, size: COL.sizeBytes },
-      { id: "actions", header: t("function.actions"), accessorKey: "actions", sortable: false, meta: { align: "left", headerClass: "!text-center !justify-center", actionCount: 4 }, isAction: true },
+      { id: "actions", header: t("function.actions"), accessorKey: "actions", sortable: false, meta: { align: "center", actionCount: 4 }, isAction: true },
     ];
 
     const selectedEnrichmentTableIds = computed(() =>
@@ -563,8 +561,7 @@ export default defineComponent({
           const urlJobs = urlJobMap[data.name] || [];
 
           allTables.set(data.name, {
-            "#": counter <= 9 ? `0${counter++}` : counter++,
-            id: data.name + counter,
+            id: data.name + counter++,
             name: data.name,
             doc_num: doc_num,
             storage_size: storage_size,
@@ -583,8 +580,7 @@ export default defineComponent({
           if (!allTables.has(tableName)) {
             // This is a URL job without a schema yet
             allTables.set(tableName, {
-              "#": counter <= 9 ? `0${counter++}` : counter++,
-              id: tableName + counter,
+              id: tableName + counter++,
               name: tableName,
               doc_num: "",
               storage_size: "",
@@ -829,8 +825,7 @@ export default defineComponent({
               streamResponse.stats.doc_time_min &&
               streamResponse.stats.doc_time_max
             ) {
-              //reducing the doc_time_min by 1000000 to get the exact time range
-              //previously we were subtracting 60000000 which might confuse some users so we are using 1000000 (1sec)
+              //reducing the doc_time_min by 1000000 (1sec) to get the exact time range
               dateTime["from"] = streamResponse.stats.doc_time_min - 1000000;
               //adding 60000000(1min)
               dateTime["to"] = streamResponse.stats.doc_time_max + 60000000;
@@ -996,13 +991,3 @@ export default defineComponent({
 });
 </script>
 
-<style>
-@keyframes rotate {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-</style>
diff --git a/web/src/components/functions/FullViewContainer.spec.ts b/web/src/components/functions/FullViewContainer.spec.ts
index bdd55eda48..560c9914be 100644
--- a/web/src/components/functions/FullViewContainer.spec.ts
+++ b/web/src/components/functions/FullViewContainer.spec.ts
@@ -69,16 +69,16 @@ describe('FullViewContainer.vue', () => {
       expect(wrapper.text()).toContain('Custom Label');
     });
 
-    it('applies light theme styles by default', () => {
+    it('applies semantic header background by default', () => {
       wrapper = createWrapper();
       const container = wrapper.find('div');
-      expect(container.classes()).toContain('bg-gray-200');
+      expect(container.classes()).toContain('bg-section-header-bg');
     });
 
-    it('applies dark theme styles when theme is dark', () => {
+    it('applies the same semantic header background when theme is dark', () => {
       wrapper = createWrapper({}, { theme: 'dark' });
       const container = wrapper.find('div');
-      expect(container.classes()).toContain('bg-gray-500');
+      expect(container.classes()).toContain('bg-section-header-bg');
     });
 
     it('shows expand icon when showExpandIcon is true', () => {
@@ -170,34 +170,34 @@ describe('FullViewContainer.vue', () => {
 
     it('applies custom label class', () => {
       wrapper = createWrapper({ labelClass: 'text-red-500' });
-      const label = wrapper.find('.text-\\[14px\\]');
+      const label = wrapper.find('.text-sm.font-bold');
       expect(label.classes()).toContain('text-red-500');
     });
   });
 
   describe('Theme Handling', () => {
-    it('applies correct text color for light theme', () => {
+    it('applies semantic text color for light theme', () => {
       wrapper = createWrapper({}, { theme: 'light' });
-      const label = wrapper.find('.text-\\[14px\\]');
-      expect(label.classes()).toContain('text-gray-500');
+      const label = wrapper.find('.text-sm.font-bold');
+      expect(label.classes()).toContain('text-text-secondary');
     });
 
-    it('applies correct text color for dark theme', () => {
+    it('applies semantic text color for dark theme', () => {
       wrapper = createWrapper({}, { theme: 'dark' });
-      const label = wrapper.find('.text-\\[14px\\]');
-      expect(label.classes()).toContain('text-gray-100');
+      const label = wrapper.find('.text-sm.font-bold');
+      expect(label.classes()).toContain('text-text-secondary');
     });
 
-    it('applies correct icon color for light theme', () => {
+    it('applies semantic icon color for light theme', () => {
       wrapper = createWrapper({}, { theme: 'light' });
       const icon = wrapper.find('.OIcon-stub');
-      expect(icon.classes()).toContain('text-gray-500');
+      expect(icon.classes()).toContain('text-text-secondary');
     });
 
-    it('applies correct icon color for dark theme', () => {
+    it('applies semantic icon color for dark theme', () => {
       wrapper = createWrapper({}, { theme: 'dark' });
       const icon = wrapper.find('.OIcon-stub');
-      expect(icon.classes()).toContain('text-gray-100');
+      expect(icon.classes()).toContain('text-text-secondary');
     });
   });
 
@@ -214,7 +214,7 @@ describe('FullViewContainer.vue', () => {
 
     it('emits update:isExpanded when label is clicked and showExpandIcon is true', async () => {
       wrapper = createWrapper({ isExpanded: false, showExpandIcon: true });
-      const label = wrapper.find('.text-\\[14px\\]');
+      const label = wrapper.find('.text-sm.font-bold');
 
       await label.trigger('click');
 
@@ -224,7 +224,7 @@ describe('FullViewContainer.vue', () => {
 
     it('does not emit update:isExpanded when label is clicked and showExpandIcon is false', async () => {
       wrapper = createWrapper({ isExpanded: false, showExpandIcon: false });
-      const label = wrapper.find('.text-\\[14px\\]');
+      const label = wrapper.find('.text-sm.font-bold');
 
       await label.trigger('click');
 
@@ -453,7 +453,7 @@ describe('FullViewContainer.vue', () => {
     it('applies correct base container classes', () => {
       wrapper = createWrapper();
       const container = wrapper.find('div');
-      expect(container.classes()).toContain('py-[2px]');
+      expect(container.classes()).toContain('py-0.5');
     });
 
     it('applies correct flex layout classes', () => {
@@ -464,7 +464,7 @@ describe('FullViewContainer.vue', () => {
 
     it('applies correct label styling classes', () => {
       wrapper = createWrapper();
-      const label = wrapper.find('.text-\\[14px\\]');
+      const label = wrapper.find('.text-sm.font-bold');
       expect(label.classes()).toContain('font-bold');
     });
 
@@ -486,7 +486,7 @@ describe('FullViewContainer.vue', () => {
     it('provides clickable elements for keyboard navigation', () => {
       wrapper = createWrapper();
       const icon = wrapper.find('.OIcon-stub');
-      const label = wrapper.find('.text-\\[14px\\]');
+      const label = wrapper.find('.text-sm.font-bold');
 
       expect(icon.classes()).toContain('cursor-pointer');
       // Label should be clickable when showExpandIcon is true
diff --git a/web/src/components/functions/FullViewContainer.vue b/web/src/components/functions/FullViewContainer.vue
index fe8f0d202f..f661cfa240 100644
--- a/web/src/components/functions/FullViewContainer.vue
+++ b/web/src/components/functions/FullViewContainer.vue
@@ -1,7 +1,6 @@
 <template>
   <div
-    class="py-[2px]"
-    :class="store.state.theme === 'dark' ? 'bg-gray-500' : 'bg-gray-200 '"
+    class="py-0.5 bg-section-header-bg"
   >
     <div
       class="flex justify-between"
@@ -13,24 +12,14 @@
           v-if="showExpandIcon"
           name="keyboard-arrow-up"
           @click.stop="expanded = !expanded"
-          class="mr-1 cursor-pointer transition-all"
-          :class="[
-            store.state.theme === 'dark'
-              ? 'text-gray-100'
-              : 'text-gray-500',
-            expanded ? 'transform rotate-180' : '',
-          ]"
+          class="mr-1 cursor-pointer transition-all text-text-secondary"
+          :class="expanded ? 'transform rotate-180' : ''"
           size="md"
         />
         <div
           @click="showExpandIcon ? expanded = !expanded : null"
-          class="text-[14px] font-bold"
-          :class="[
-            store.state.theme === 'dark'
-              ? 'text-gray-100'
-              : 'text-gray-500',
-            labelClass,
-          ]"
+          class="text-sm font-bold text-text-secondary"
+          :class="labelClass"
         >
           {{ label }}
         </div>
diff --git a/web/src/components/functions/FunctionList.vue b/web/src/components/functions/FunctionList.vue
index 40d60f2e63..97e2110056 100644
--- a/web/src/components/functions/FunctionList.vue
+++ b/web/src/components/functions/FunctionList.vue
@@ -21,16 +21,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     data-test="function-list-page"
     class="flex flex-col h-full min-h-0"
   >
-    <div v-if="!showAddJSTransformDialog" class="flex flex-col h-full min-h-0">
-      <!-- Standard section header: title + actions only. Search moved to toolbar. -->
-      <AppPageHeader
-        :title="t('function.header')"
-        icon="function"
-        :subtitle="t('function.subtitle')"
-        tabs-below
-        class="shrink-0 px-4"
-      >
-        <template #tabs>
+    <OPageLayout
+      v-if="!showAddJSTransformDialog"
+      :title="t('function.header')"
+      icon="function"
+      :subtitle="t('function.subtitle')"
+      tabs-below
+      bleed
+    >
+        <template #header-tabs>
           <PipelineSectionTabs />
         </template>
         <template #actions>
@@ -43,7 +42,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             {{ t(`function.add`) }}
           </OButton>
         </template>
-      </AppPageHeader>
       <div class="w-full flex-1 min-h-0 overflow-hidden">
         <div class="h-full">
           <OTable
@@ -57,6 +55,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             :page-size-options="pageSizeOptions"
             selection="multiple"
             v-model:selected-ids="selectedFunctionIds"
+            show-index
             :show-global-filter="false"
             :default-columns="false"
             width="100%"
@@ -94,7 +93,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </template>
 
               <template #cell-name="{ row, value }">
-                <span class="text-text-primary" :data-test="`function-list-name-cell-${row?.name ?? value}`">{{ value }}</span>
+                <span class="text-text-body" :data-test="`function-list-name-cell-${row?.name ?? value}`">{{ value }}</span>
               </template>
 
               <template #cell-actions="{ row }">
@@ -130,7 +129,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
               <template #bottom="scope">
                 <div class="flex items-center justify-between w-full py-2">
-                  <div class="flex items-center o2-table-footer-title mr-4">
+                  <div class="flex items-center text-xs font-normal mr-4">
                     {{ resultTotal }} {{ t('function.header') }}
                   </div>
                   <OButton
@@ -148,7 +147,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </OTable>
           </div>
         </div>
-    </div>
+    </OPageLayout>
     <div v-else class="flex-1 min-h-0">
       <AddFunction
         v-model="formData"
@@ -219,7 +218,6 @@ import { useI18n } from "vue-i18n";
 
 import OTable from "@/lib/core/Table/OTable.vue";
 import type { OTableColumnDef } from "@/lib/core/Table/OTable.types";
-import { TABLE_INDEX_COL_SIZE } from "@/lib/core/Table/OTable.types";
 import jsTransformService from "../../services/jstransform";
 import NoData from "../shared/grid/NoData.vue";
 import OEmptyState from "@/lib/core/EmptyState/OEmptyState.vue";
@@ -231,7 +229,7 @@ import searchState from "@/composables/useLogs/searchState";
 import OButton from "@/lib/core/Button/OButton.vue";
 import ODialog from "@/lib/overlay/Dialog/ODialog.vue";
 import OSearchInput from "@/lib/forms/SearchInput/OSearchInput.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import PipelineSectionTabs from "@/components/pipeline/PipelineSectionTabs.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
 import OCheckbox from "@/lib/forms/Checkbox/OCheckbox.vue";
@@ -243,7 +241,7 @@ export default defineComponent({
   name: "functionList",
   components: {
     OEmptyState,
-    AppPageHeader,
+    OPageLayout,
     PipelineSectionTabs,
     OTable,
     AddFunction: defineAsyncComponent(() => import("./AddFunction.vue")),
@@ -279,14 +277,6 @@ export default defineComponent({
     const filterQuery = ref("");
     const { track } = useReo();
     const columns: OTableColumnDef[] = [
-      {
-        id: "#",
-        header: "#",
-        accessorKey: "#",
-        sortable: false,
-        size: TABLE_INDEX_COL_SIZE,
-        meta: { align: "left" },
-      },
       {
         id: "name",
         accessorKey: "name",
@@ -336,7 +326,6 @@ export default defineComponent({
           store.state.selectedOrganization.identifier,
         )
         .then((res) => {
-          var counter = 1;
           resultTotal.value = res.data.list.length;
           if (router.currentRoute.value.query.action == "add") {
             showAddUpdateFn({ row: undefined });
@@ -349,7 +338,6 @@ export default defineComponent({
             }
 
             return {
-              "#": counter <= 9 ? `0${counter++}` : counter++,
               name: data.name,
               function: data.function,
               params: data.params,
@@ -770,21 +758,22 @@ export default defineComponent({
 });
 </script>
 
-<style>
+<style scoped>
+/* keep(scrollbar): custom webkit scrollbar for the function list */
 .scrollable-list::-webkit-scrollbar {
-  width: 8px;
+  width: 0.5rem;
 }
 
 .scrollable-list::-webkit-scrollbar-thumb {
-  background-color: #888;
-  border-radius: 4px;
+  background-color: var(--color-border-strong);
+  border-radius: 0.25rem;
 }
 
 .scrollable-list::-webkit-scrollbar-thumb:hover {
-  background-color: blue;
+  background-color: var(--color-text-muted);
 }
 
 .scrollable-list::-webkit-scrollbar-track {
-  background-color: blue;
+  background-color: transparent;
 }
 </style>
diff --git a/web/src/components/functions/FunctionsToolbar.vue b/web/src/components/functions/FunctionsToolbar.vue
index 81c6233580..c04def63a1 100644
--- a/web/src/components/functions/FunctionsToolbar.vue
+++ b/web/src/components/functions/FunctionsToolbar.vue
@@ -3,7 +3,7 @@
        transform-type fields inline (#tabs) and the action buttons (#actions).
        The name + transType controls are form-owned (OForm*); the parent
        AddFunction.vue provides the <OForm> context they inject. -->
-  <AppPageHeader
+  <OPageHeader
     :title="t('function.addFunction')"
     :back="{ label: t('function.header'), onClick: redirectToFunctions, dataTest: 'add-function-back-btn' }"
   >
@@ -27,19 +27,19 @@
           <OFormRadioGroup name="transType" orientation="horizontal" class="items-center gap-4">
             <div class="flex items-center gap-1">
               <ORadio value="0" data-test="function-transform-type-vrl-radio" />
-              <span class="text-[13px] font-medium leading-none">{{ transformTypeOptions[0]?.label }}</span>
+              <span class="text-compact font-medium leading-none">{{ transformTypeOptions[0]?.label }}</span>
             </div>
             <!-- JavaScript option only shown in _meta organization -->
             <div v-if="transformTypeOptions[1]" class="flex items-center gap-1">
               <ORadio value="1" data-test="function-transform-type-js-radio" />
-              <span class="text-[13px] font-medium leading-none">{{ transformTypeOptions[1]?.label }}</span>
+              <span class="text-compact font-medium leading-none">{{ transformTypeOptions[1]?.label }}</span>
             </div>
           </OFormRadioGroup>
           <!-- Info icon with tooltip -->
           <OIcon
             name="info-outline"
             size="sm"
-            class="cursor-pointer text-gray-500 shrink-0"
+            class="cursor-pointer text-icon-color shrink-0"
           >
             <OTooltip>
               <template #content>
@@ -58,13 +58,13 @@
         size="icon-sm"
         @click="emit('open:chat',!store.state.isAiChatEnabled)"
         data-test="menu-link-ai-item"
-        class="![background:linear-gradient(135deg,rgba(139,92,246,0.15)_0%,rgba(236,72,153,0.15)_100%)] transition-[background,box-shadow] duration-300 ease-in-out hover:![background:linear-gradient(135deg,#8b5cf6_0%,#ec4899_100%)] hover:shadow-[0_0.25rem_0.75rem_0_rgba(139,92,246,0.35)] rounded-md"
+        class="![background:var(--color-gradient-ai-subtle)] transition-[background,box-shadow] duration-300 ease-in-out hover:![background:var(--color-gradient-ai)] hover:shadow-[0_0.25rem_0.75rem_0_rgba(139,92,246,0.35)] rounded-default"
         :class="store.state.isAiChatEnabled ? 'ai-btn-active' : ''"
         :disabled="isSubmitting"
         @mouseenter="isHovered = true"
         @mouseleave="isHovered = false"
       >
-        <img :src="getBtnLogo" class="opacity-70 transition-transform duration-600 [.ai-btn-active_&]:!opacity-100 [.ai-hover-btn:hover_&]:rotate-180 [.ai-hover-btn:hover_&]:[filter:brightness(0)_invert(1)]" />
+        <img :src="getBtnLogo" class="opacity-70 transition-transform duration-600 [.ai-btn-active_&]:!opacity-100" />
       </OButton>
       <OButton
         data-test="add-function-fullscreen-btn"
@@ -106,7 +106,7 @@
         {{ t('function.save') }}
       </OButton>
     </template>
-  </AppPageHeader>
+  </OPageHeader>
 </template>
 <script setup lang="ts">
 import {
@@ -117,6 +117,7 @@ import { inject } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
 import { useStore } from "vuex";
+import { useTheme } from "@/composables/useTheme";
 import config from "../../aws-exports";
 import { getImageURL } from "@/utils/zincutils";
 import OButton from "@/lib/core/Button/OButton.vue";
@@ -125,7 +126,7 @@ import OFormInput from "@/lib/forms/Input/OFormInput.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
 import OFormRadioGroup from "@/lib/forms/Radio/OFormRadioGroup.vue";
 import ORadio from "@/lib/forms/Radio/ORadio.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageHeader from "@/lib/core/PageHeader/OPageHeader.vue";
 import { toggleFullscreen } from "@/utils/dom";
 import { FORM_CONTEXT_KEY } from "@/lib/forms/Form/OForm.types";
 const { t } = useI18n();
@@ -135,6 +136,7 @@ const { t } = useI18n();
 const router = useRouter();
 
 const store = useStore();
+const { isDark } = useTheme();
 
 const props = defineProps({
   disableName: {
@@ -181,7 +183,7 @@ const getBtnLogo = computed(() => {
         return getImageURL('images/common/ai_icon_dark.svg')
       }
 
-      return store.state.theme === 'dark'
+      return isDark.value
         ? getImageURL('images/common/ai_icon_dark.svg')
         : getImageURL('images/common/ai_icon_gradient.svg')
     })
diff --git a/web/src/components/functions/RetryJobDialog.spec.ts b/web/src/components/functions/RetryJobDialog.spec.ts
deleted file mode 100644
index 93f01f18f0..0000000000
--- a/web/src/components/functions/RetryJobDialog.spec.ts
+++ /dev/null
@@ -1,335 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { describe, it, expect, beforeEach } from "vitest";
-import { mount, flushPromises } from "@vue/test-utils";
-import RetryJobDialog from "./RetryJobDialog.vue";
-import { createStore } from "vuex";
-
-
-describe("RetryJobDialog", () => {
-  let store: any;
-
-  beforeEach(() => {
-    store = createStore({
-      state: {
-        theme: "light",
-      },
-    });
-  });
-
-  it("should render the component when modelValue is true", () => {
-    const wrapper = mount(RetryJobDialog, {
-      props: {
-        modelValue: true,
-        tableName: "test_table",
-        url: "https://example.com/data.csv",
-        supportsRange: true,
-        lastBytePosition: 1024,
-      },
-      global: {
-        plugins: [store],
-      },
-      attachTo: document.body,
-    });
-
-    expect(wrapper.exists()).toBe(true);
-    wrapper.unmount();
-  });
-
-  it("should display table name and URL", async () => {
-    const wrapper = mount(RetryJobDialog, {
-      props: {
-        modelValue: true,
-        tableName: "my_enrichment_table",
-        url: "https://cdn.example.com/enrichment.csv",
-        supportsRange: true,
-      },
-      global: {
-        plugins: [store],
-      },
-      attachTo: document.body,
-    });
-
-    await wrapper.vm.$nextTick();
-    await flushPromises();
-
-    const bodyText = document.body.textContent || "";
-    expect(bodyText).toContain("my_enrichment_table");
-    expect(bodyText).toContain("https://cdn.example.com/enrichment.csv");
-    wrapper.unmount();
-  });
-
-  it("should show warning when range is not supported", async () => {
-    const wrapper = mount(RetryJobDialog, {
-      props: {
-        modelValue: true,
-        tableName: "test_table",
-        url: "https://example.com/data.csv",
-        supportsRange: false,
-      },
-      global: {
-        plugins: [store],
-      },
-      attachTo: document.body,
-    });
-
-    await wrapper.vm.$nextTick();
-    await flushPromises();
-
-    const bodyText = document.body.textContent || "";
-    expect(bodyText).toContain("Range requests not supported");
-    wrapper.unmount();
-  });
-
-  it("should show retry options when range is supported", async () => {
-    const wrapper = mount(RetryJobDialog, {
-      props: {
-        modelValue: true,
-        tableName: "test_table",
-        url: "https://example.com/data.csv",
-        supportsRange: true,
-      },
-      global: {
-        plugins: [store],
-      },
-      attachTo: document.body,
-    });
-
-    await wrapper.vm.$nextTick();
-    await flushPromises();
-
-    const bodyText = document.body.textContent || "";
-    expect(bodyText).toContain("Start from Beginning");
-    expect(bodyText).toContain("Resume from Last Position");
-    wrapper.unmount();
-  });
-
-  it("should default to resume option when range is supported", () => {
-    const wrapper = mount(RetryJobDialog, {
-      props: {
-        modelValue: true,
-        tableName: "test_table",
-        url: "https://example.com/data.csv",
-        supportsRange: true,
-      },
-      global: {
-        plugins: [store],
-      },
-      attachTo: document.body,
-    });
-
-    expect(wrapper.vm.resumeFromLast).toBe(true);
-    wrapper.unmount();
-  });
-
-  it("should emit cancel when cancel button is clicked", async () => {
-    const wrapper = mount(RetryJobDialog, {
-      props: {
-        modelValue: true,
-        tableName: "test_table",
-        url: "https://example.com/data.csv",
-      },
-      global: {
-        plugins: [store],
-      },
-      attachTo: document.body,
-    });
-
-    await wrapper.vm.$nextTick();
-
-    // OButton replaced QBtn; find button by text content
-    const buttons = wrapper.findAllComponents({ name: "OButton" });
-    const cancelButton = buttons.find(btn => btn.text().trim() === "Cancel");
-    await cancelButton?.trigger("click");
-
-    expect(wrapper.emitted("cancel")).toBeTruthy();
-    expect(wrapper.emitted("update:modelValue")).toBeTruthy();
-    wrapper.unmount();
-  });
-
-  it("should emit confirm with resumeFromLast value when retry button is clicked", async () => {
-    const wrapper = mount(RetryJobDialog, {
-      props: {
-        modelValue: true,
-        tableName: "test_table",
-        url: "https://example.com/data.csv",
-        supportsRange: true,
-      },
-      global: {
-        plugins: [store],
-      },
-      attachTo: document.body,
-    });
-
-    await wrapper.vm.$nextTick();
-
-    // OButton replaced QBtn; find button by text content
-    const buttons = wrapper.findAllComponents({ name: "OButton" });
-    const retryButton = buttons.find(btn => btn.text().trim() === "Retry");
-    await retryButton?.trigger("click");
-
-    expect(wrapper.emitted("confirm")).toBeTruthy();
-    expect(wrapper.emitted("confirm")?.[0]).toEqual([true]);
-    wrapper.unmount();
-  });
-
-  it("should format bytes correctly", () => {
-    const wrapper = mount(RetryJobDialog, {
-      props: {
-        modelValue: true,
-        tableName: "test_table",
-        url: "https://example.com/data.csv",
-      },
-      global: {
-        plugins: [store],
-      },
-      attachTo: document.body,
-    });
-
-    expect(wrapper.vm.formatBytes(0)).toBe("0 Bytes");
-    expect(wrapper.vm.formatBytes(1024)).toBe("1 KB");
-    expect(wrapper.vm.formatBytes(1048576)).toBe("1 MB");
-    expect(wrapper.vm.formatBytes(1073741824)).toBe("1 GB");
-    wrapper.unmount();
-  });
-
-  it("should display formatted last byte position", async () => {
-    const wrapper = mount(RetryJobDialog, {
-      props: {
-        modelValue: true,
-        tableName: "test_table",
-        url: "https://example.com/data.csv",
-        supportsRange: true,
-        lastBytePosition: 5242880, // 5 MB
-      },
-      global: {
-        plugins: [store],
-      },
-      attachTo: document.body,
-    });
-
-    await wrapper.vm.$nextTick();
-    await flushPromises();
-
-    const bodyText = document.body.textContent || "";
-    expect(bodyText).toContain("5 MB");
-    wrapper.unmount();
-  });
-
-  it("should apply dark theme when theme is dark", async () => {
-    const darkStore = createStore({
-      state: {
-        theme: "dark",
-      },
-    });
-
-    const wrapper = mount(RetryJobDialog, {
-      props: {
-        modelValue: true,
-        tableName: "test_table",
-        url: "https://example.com/data.csv",
-      },
-      global: {
-        plugins: [darkStore],
-      },
-      attachTo: document.body,
-    });
-
-    await wrapper.vm.$nextTick();
-    await flushPromises();
-
-    // Dark mode is driven by Tailwind `dark:` variant utilities on the
-    // dialog rather than a runtime `dark-theme` class.
-    const dialog = document.body.querySelector(".retry-dialog");
-    expect(dialog).not.toBeNull();
-    expect(dialog?.classList.contains("dark:bg-[#1e1e1e]")).toBe(true);
-    wrapper.unmount();
-  });
-
-  it("should toggle resume option", async () => {
-    const wrapper = mount(RetryJobDialog, {
-      props: {
-        modelValue: true,
-        tableName: "test_table",
-        url: "https://example.com/data.csv",
-        supportsRange: true,
-      },
-      global: {
-        plugins: [store],
-      },
-      attachTo: document.body,
-    });
-
-    await wrapper.vm.$nextTick();
-    await flushPromises();
-
-    const radios = document.body.querySelectorAll('input[type="radio"]');
-    expect(radios.length).toBe(2);
-
-    (radios[0] as HTMLInputElement).click();
-    await wrapper.vm.$nextTick();
-    expect(wrapper.vm.resumeFromLast).toBe(false);
-
-    (radios[1] as HTMLInputElement).click();
-    await wrapper.vm.$nextTick();
-    expect(wrapper.vm.resumeFromLast).toBe(true);
-
-    wrapper.unmount();
-  });
-
-  it("should show recommended badge on resume option", async () => {
-    const wrapper = mount(RetryJobDialog, {
-      props: {
-        modelValue: true,
-        tableName: "test_table",
-        url: "https://example.com/data.csv",
-        supportsRange: true,
-      },
-      global: {
-        plugins: [store],
-      },
-      attachTo: document.body,
-    });
-
-    await wrapper.vm.$nextTick();
-    await flushPromises();
-
-    const bodyText = document.body.textContent || "";
-    expect(bodyText).toContain("Recommended");
-    wrapper.unmount();
-  });
-
-  it("should show dialog title", async () => {
-    const wrapper = mount(RetryJobDialog, {
-      props: {
-        modelValue: true,
-        tableName: "test_table",
-        url: "https://example.com/data.csv",
-      },
-      global: {
-        plugins: [store],
-      },
-      attachTo: document.body,
-    });
-
-    await wrapper.vm.$nextTick();
-    await flushPromises();
-
-    const bodyText = document.body.textContent || "";
-    expect(bodyText).toContain("Retry Enrichment Table Job");
-    wrapper.unmount();
-  });
-});
diff --git a/web/src/components/functions/RetryJobDialog.vue b/web/src/components/functions/RetryJobDialog.vue
deleted file mode 100644
index 7291460eb2..0000000000
--- a/web/src/components/functions/RetryJobDialog.vue
+++ /dev/null
@@ -1,424 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <Teleport to="body">
-    <Transition name="fade">
-      <div
-        v-if="modelValue"
-        class="retry-dialog-backdrop fixed top-0 left-0 w-full h-full bg-[rgba(0,0,0,0.5)] flex justify-center items-center z-[9999]"
-        @click="handleBackdropClick"
-      >
-        <div
-          class="retry-dialog bg-white dark:bg-[#1e1e1e] dark:text-[var(--o2-border)] rounded-lg shadow-[0_4px_20px_rgba(0,0,0,0.15)] w-[90%] max-w-[600px] max-h-[90vh] flex flex-col overflow-hidden"
-          ref="dialogRef"
-          @click.stop
-          role="dialog"
-          aria-modal="true"
-        >
-          <!-- Header -->
-          <div
-            class="retry-dialog-header flex justify-between items-center py-5 px-6 border-b border-[#eaeaea] dark:border-[#3a3a3a]"
-          >
-            <h3
-              class="retry-dialog-title text-lg font-semibold m-0 text-[#333] dark:text-[var(--o2-border)]"
-            >Retry Enrichment Table Job</h3>
-            <OButton
-              variant="ghost"
-              size="icon"
-              icon-left="close"
-              @click="handleCancel"
-              aria-label="Close"
-            />
-          </div>
-
-          <!-- Content -->
-          <div
-            class="retry-dialog-content p-6 overflow-y-auto flex-1"
-          >
-            <div
-              class="table-info mb-5 p-4 bg-[#f8f9fa] dark:bg-[#2a2a2a] rounded-md"
-            >
-              <div
-                class="info-row flex mb-2 last:mb-0"
-              >
-                <span class="font-semibold min-w-[60px] text-[#666]"
-                >Table:</span>
-                <span class="text-[#333] break-words"
-                >{{ tableName }}</span>
-              </div>
-              <div
-                class="info-row flex mb-2 last:mb-0"
-              >
-                <span class="font-semibold min-w-[60px] text-[#666]"
-                >URL:</span>
-                <span class="text-[#333] break-words font-mono text-[13px]"
-                >{{ url }}</span>
-              </div>
-            </div>
-
-            <!-- Range Support Warning -->
-            <div
-              v-if="!supportsRange"
-              class="warning-banner flex gap-3 p-4 bg-[#fff3cd] dark:bg-[#3d3516] border border-[#ffc107] dark:border-[#a67c00] rounded-md mb-5"
-            >
-              <OIcon name="warning" size="sm" class="text-[#ff9800] shrink-0" />
-              <div
-                class="warning-text flex-1"
-              >
-                <strong>Range requests not supported</strong>
-                <p>
-                  This URL does not support resuming from the last position.
-                  The job will restart from the beginning.
-                </p>
-              </div>
-            </div>
-
-            <!-- Retry Options (only shown if range is supported) -->
-            <div
-              v-if="supportsRange"
-              class="mt-5"
-            >
-              <p
-                class="options-title font-semibold mb-4 text-[#333] dark:text-[var(--o2-border)]"
-              >How would you like to retry?</p>
-
-              <div
-                class="option-card border-2 border-(--o2-border) dark:border-[#3a3a3a] rounded-lg mb-3 transition-all duration-200 cursor-pointer hover:border-[#1976d2] hover:bg-[#f5f9ff] dark:hover:border-[#1976d2] dark:hover:bg-[#1a2332]"
-                :class="[
-                  { selected: !resumeFromLast },
-                  !resumeFromLast ? 'border-[#1976d2]! bg-[#e3f2fd]!' : ''
-                ]"
-              >
-                <label
-                  class="block p-4 cursor-pointer w-full"
-                >
-                  <input
-                    type="radio"
-                    name="retryOption"
-                    :value="false"
-                    v-model="resumeFromLast"
-                   class="absolute opacity-0 cursor-pointer"
-                  />
-                  <div
-                    class="flex flex-col gap-2"
-                  >
-                    <div
-                      class="option-header flex items-center gap-[10px] font-semibold text-[#333] dark:text-[var(--o2-border)]"
-                    >
-                      <OIcon name="refresh" size="sm" class="text-[#1976d2]" />
-                      <span class="flex-1">Start from Beginning</span>
-                    </div>
-                    <p
-                      class="m-0 text-sm text-[#666] leading-normal"
-                    >
-                      Download the entire file from scratch. All previous progress will be discarded.
-                    </p>
-                  </div>
-                </label>
-              </div>
-
-              <div
-                class="option-card border-2 border-(--o2-border) dark:border-[#3a3a3a] rounded-lg mb-3 transition-all duration-200 cursor-pointer hover:border-[#1976d2] hover:bg-[#f5f9ff] dark:hover:border-[#1976d2] dark:hover:bg-[#1a2332]"
-                :class="[
-                  { selected: resumeFromLast },
-                  resumeFromLast ? 'border-[#1976d2]! bg-[#e3f2fd]!' : ''
-                ]"
-              >
-                <label
-                  class="block p-4 cursor-pointer w-full"
-                >
-                  <input
-                    type="radio"
-                    name="retryOption"
-                    :value="true"
-                    v-model="resumeFromLast"
-                    class="absolute opacity-0 cursor-pointer"
-                  />
-                  <div
-                    class="flex flex-col gap-2"
-                  >
-                    <div
-                      class="option-header flex items-center gap-[10px] font-semibold text-[#333] dark:text-[var(--o2-border)]"
-                    >
-                      <OIcon name="play-arrow" size="sm" class="text-[#1976d2]" />
-                      <span class="flex-1">Resume from Last Position</span>
-                      <span
-                        class="bg-[#4caf50] text-white py-[2px] px-2 rounded-full text-[11px] font-semibold uppercase"
-                      >Recommended</span>
-                    </div>
-                    <p
-                      class="m-0 text-sm text-[#666] leading-normal"
-                    >
-                      Continue downloading from where it stopped.
-                      <span v-if="lastBytePosition > 0">
-                        Already processed: {{ formatBytes(lastBytePosition) }}
-                      </span>
-                    </p>
-                  </div>
-                </label>
-              </div>
-            </div>
-          </div>
-
-          <!-- Footer -->
-          <div
-            class="retry-dialog-footer py-4 px-6 border-t border-[#eaeaea] dark:border-[#3a3a3a] flex justify-end gap-3"
-          >
-            <OButton
-              variant="outline"
-              size="sm-action"
-              @click="handleCancel"
-              class="min-w-[100px]"
-            >
-              Cancel
-            </OButton>
-            <OButton
-              variant="primary"
-              size="sm-action"
-              @click="handleConfirm"
-              class="min-w-[100px]"
-            >
-              Retry
-            </OButton>
-          </div>
-        </div>
-      </div>
-    </Transition>
-  </Teleport>
-</template>
-
-<script lang="ts">
-import {
-  defineComponent,
-  ref,
-  watch,
-  onMounted,
-  onBeforeUnmount,
-  nextTick,
-} from "vue";
-import { useStore } from "vuex";
-import OButton from "@/lib/core/Button/OButton.vue";
-import OIcon from "@/lib/core/Icon/OIcon.vue";
-
-export default defineComponent({
-  name: "RetryJobDialog",
-  components: { OButton, OIcon },
-  props: {
-    modelValue: {
-      type: Boolean,
-      default: false,
-    },
-    tableName: {
-      type: String,
-      required: true,
-    },
-    url: {
-      type: String,
-      required: true,
-    },
-    supportsRange: {
-      type: Boolean,
-      default: false,
-    },
-    lastBytePosition: {
-      type: Number,
-      default: 0,
-    },
-  },
-  emits: ["update:modelValue", "confirm", "cancel"],
-  setup(props, { emit }) {
-    const store = useStore();
-    const dialogRef = ref<HTMLElement | null>(null);
-    const resumeFromLast = ref(props.supportsRange); // Default to resume if supported
-
-    // Format bytes to human-readable format
-    const formatBytes = (bytes: number): string => {
-      if (bytes === 0) return "0 Bytes";
-      const k = 1024;
-      const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
-      const i = Math.floor(Math.log(bytes) / Math.log(k));
-      return Math.round(bytes / Math.pow(k, i) * 100) / 100 + " " + sizes[i];
-    };
-
-    // Handler for ESC key
-    const handleEscKey = (event: KeyboardEvent) => {
-      if (props.modelValue && event.key === "Escape") {
-        handleCancel();
-      }
-    };
-
-    // Close dialog handler
-    const handleCancel = () => {
-      emit("update:modelValue", false);
-      emit("cancel");
-    };
-
-    // Handle backdrop click
-    const handleBackdropClick = () => {
-      handleCancel();
-    };
-
-    // Handle confirm
-    const handleConfirm = () => {
-      emit("update:modelValue", false);
-      emit("confirm", resumeFromLast.value);
-    };
-
-    // Trap focus inside dialog
-    const trapFocus = (event: KeyboardEvent) => {
-      if (!props.modelValue || !dialogRef.value || event.key !== "Tab") return;
-
-      const focusableElements = dialogRef.value.querySelectorAll(
-        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
-      );
-
-      if (focusableElements.length === 0) return;
-
-      const firstElement = focusableElements[0] as HTMLElement;
-      const lastElement = focusableElements[
-        focusableElements.length - 1
-      ] as HTMLElement;
-
-      // If shift+tab on first element, move to last element
-      if (event.shiftKey && document.activeElement === firstElement) {
-        lastElement.focus();
-        event.preventDefault();
-      }
-      // If tab on last element, move to first element
-      else if (!event.shiftKey && document.activeElement === lastElement) {
-        firstElement.focus();
-        event.preventDefault();
-      }
-    };
-
-    // Prevent scrolling of the background when dialog is open
-    watch(
-      () => props.modelValue,
-      (isOpen) => {
-        if (isOpen) {
-          document.body.style.overflow = "hidden";
-          // Reset to default when opening
-          resumeFromLast.value = props.supportsRange;
-          // Focus the dialog after it's shown
-          nextTick(() => {
-            const focusable = dialogRef.value?.querySelector(
-              'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
-            ) as HTMLElement;
-            focusable?.focus();
-          });
-        } else {
-          // Remove overflow from body when dialog is closed
-          document.body.style.overflow = "";
-        }
-      },
-    );
-
-    onMounted(() => {
-      // Add event listeners
-      document.addEventListener("keydown", handleEscKey);
-      document.addEventListener("keydown", trapFocus);
-    });
-
-    onBeforeUnmount(() => {
-      // Clean up event listeners to prevent memory leaks
-      document.removeEventListener("keydown", handleEscKey);
-      document.removeEventListener("keydown", trapFocus);
-
-      // Reset body overflow if component is destroyed while dialog is open
-      if (props.modelValue) {
-        document.body.style.overflow = "";
-      }
-    });
-
-    return {
-      store,
-      dialogRef,
-      resumeFromLast,
-      formatBytes,
-      handleCancel,
-      handleBackdropClick,
-      handleConfirm,
-    };
-  },
-});
-</script>
-
-<style>
-.warning-text strong {
-  display: block;
-  margin-bottom: 4px;
-  color: #d68400;
-}
-
-.warning-text p {
-  margin: 0;
-  font-size: 14px;
-  color: #856404;
-}
-
-.dark .warning-text strong {
-  color: #ffb84d;
-}
-
-.dark .warning-text p {
-  color: #d4a86a;
-}
-
-.dark .option-card.selected {
-  background-color: #1a2332;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.2s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
-.fade-enter-active .retry-dialog {
-  animation: slide-up 0.3s ease;
-}
-
-.fade-leave-active .retry-dialog {
-  animation: slide-down 0.2s ease;
-}
-
-@keyframes slide-up {
-  from {
-    transform: translateY(30px);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-@keyframes slide-down {
-  from {
-    transform: translateY(0);
-    opacity: 1;
-  }
-  to {
-    transform: translateY(30px);
-    opacity: 0;
-  }
-}
-</style>
diff --git a/web/src/components/functions/StreamRouting.spec.ts b/web/src/components/functions/StreamRouting.spec.ts
deleted file mode 100644
index 7c63e0deab..0000000000
--- a/web/src/components/functions/StreamRouting.spec.ts
+++ /dev/null
@@ -1,501 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { describe, it, expect, vi, beforeEach } from "vitest";
-import { mount, flushPromises } from "@vue/test-utils";
-import StreamRouting from "./StreamRouting.vue";
-import i18n from "@/locales";
-import { createRouter, createWebHistory } from "vue-router";
-import { createStore } from "vuex";
-
-
-vi.mock("@/utils/zincutils", () => ({
-  getUUID: vi.fn(() => "test-uuid-123"),
-}));
-
-vi.mock("../alerts/RealTimeAlert.vue", () => ({
-  default: { template: "<div>RealTimeAlert</div>" },
-}));
-
-describe("StreamRouting", () => {
-  let store: any;
-  let router: any;
-
-  const globalStubs = {
-    RealTimeAlert: true,
-    ConfirmDialog: true,
-  };
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-
-    store = createStore({
-      state: {
-        selectedOrganization: { identifier: "test-org" },
-        theme: "light",
-      },
-    });
-
-    router = createRouter({
-      history: createWebHistory(),
-      routes: [
-        {
-          path: "/reports",
-          name: "reports",
-          component: { template: "<div>Reports</div>" },
-        },
-        {
-          path: "/functions",
-          name: "functions",
-          component: { template: "<div>Functions</div>" },
-        },
-      ],
-    });
-
-    router.push("/functions");
-  });
-
-  describe("Component Rendering", () => {
-    it("should render the component", async () => {
-      const wrapper = mount(StreamRouting, {
-        global: { plugins: [i18n, store, router], stubs: globalStubs },
-      });
-
-      expect(wrapper.exists()).toBe(true);
-      await flushPromises();
-    });
-
-    it("should render the add-stream-routing-section", async () => {
-      const wrapper = mount(StreamRouting, {
-        global: { plugins: [i18n, store, router], stubs: globalStubs },
-      });
-
-      await flushPromises();
-      expect(wrapper.find('[data-test="add-stream-routing-section"]').exists()).toBe(true);
-    });
-
-    it("should render Stream Routing title", async () => {
-      const wrapper = mount(StreamRouting, {
-        global: { plugins: [i18n, store, router], stubs: globalStubs },
-      });
-
-      await flushPromises();
-      expect(wrapper.text()).toContain("Stream Routing");
-    });
-
-    it("should render destination stream name input", async () => {
-      const wrapper = mount(StreamRouting, {
-        global: { plugins: [i18n, store, router], stubs: globalStubs },
-      });
-
-      await flushPromises();
-      expect(wrapper.find('[data-test="stream-routing-name-input"]').exists()).toBe(true);
-    });
-
-    it("should render stream type select", async () => {
-      const wrapper = mount(StreamRouting, {
-        global: { plugins: [i18n, store, router], stubs: globalStubs },
-      });
-
-      await flushPromises();
-      expect(wrapper.find('[data-test="add-alert-stream-type-select"]').exists()).toBe(true);
-    });
-
-    it("should render source stream select", async () => {
-      const wrapper = mount(StreamRouting, {
-        global: { plugins: [i18n, store, router], stubs: globalStubs },
-      });
-
-      await flushPromises();
-      expect(wrapper.find('[data-test="add-alert-stream-select"]').exists()).toBe(true);
-    });
-
-    it("should render cancel button", async () => {
-      const wrapper = mount(StreamRouting, {
-        global: { plugins: [i18n, store, router], stubs: globalStubs },
-      });
-
-      await flushPromises();
-      expect(wrapper.find('[data-test="add-report-cancel-btn"]').exists()).toBe(true);
-    });
-
-    it("should render save button", async () => {
-      const wrapper = mount(StreamRouting, {
-        global: { plugins: [i18n, store, router], stubs: globalStubs },
-      });
-
-      await flushPromises();
-      expect(wrapper.find('[data-test="add-report-save-btn"]').exists()).toBe(true);
-    });
-
-    it("should render close dialog icon", async () => {
-      const wrapper = mount(StreamRouting, {
-        global: { plugins: [i18n, store, router], stubs: globalStubs },
-      });
-
-      await flushPromises();
-      expect(wrapper.find('[data-test="stream-routing-close-dialog-btn"]').exists()).toBe(true);
-    });
-  });
-
-  describe("Emits", () => {
-    it("should emit cancel:hideform when close icon is clicked", async () => {
-      const wrapper = mount(StreamRouting, {
-        global: { plugins: [i18n, store, router], stubs: globalStubs },
-      });
-
-      await flushPromises();
-
-      const closeBtn = wrapper.find('[data-test="stream-routing-close-dialog-btn"]');
-      await closeBtn.trigger("click");
-
-      expect(wrapper.emitted("cancel:hideform")).toBeTruthy();
-    });
-  });
-
-  describe("Default State", () => {
-    it("should initialize with empty destination stream name", async () => {
-      const wrapper = mount(StreamRouting, {
-        global: { plugins: [i18n, store, router], stubs: globalStubs },
-      });
-
-      await flushPromises();
-
-      const vm = wrapper.vm as any;
-      expect(vm.streamRoute.destinationStreamName).toBe("");
-    });
-
-    it("should initialize with empty source stream name", async () => {
-      const wrapper = mount(StreamRouting, {
-        global: { plugins: [i18n, store, router], stubs: globalStubs },
-      });
-
-      await flushPromises();
-
-      const vm = wrapper.vm as any;
-      expect(vm.streamRoute.sourceStreamName).toBe("");
-    });
-
-    it("should initialize with empty source stream type", async () => {
-      const wrapper = mount(StreamRouting, {
-        global: { plugins: [i18n, store, router], stubs: globalStubs },
-      });
-
-      await flushPromises();
-
-      const vm = wrapper.vm as any;
-      expect(vm.streamRoute.sourceStreamType).toBe("");
-    });
-
-    it("should initialize with one default condition", async () => {
-      const wrapper = mount(StreamRouting, {
-        global: { plugins: [i18n, store, router], stubs: globalStubs },
-      });
-
-      await flushPromises();
-
-      const vm = wrapper.vm as any;
-      expect(vm.streamRoute.conditions).toHaveLength(1);
-    });
-
-    it("should initialize isUpdating as false", async () => {
-      const wrapper = mount(StreamRouting, {
-        global: { plugins: [i18n, store, router], stubs: globalStubs },
-      });
-
-      await flushPromises();
-
-      const vm = wrapper.vm as any;
-      expect(vm.isUpdating).toBe(false);
-    });
-
-    it("should initialize dialog with show=false", async () => {
-      const wrapper = mount(StreamRouting, {
-        global: { plugins: [i18n, store, router], stubs: globalStubs },
-      });
-
-      await flushPromises();
-
-      const vm = wrapper.vm as any;
-      expect(vm.dialog.show).toBe(false);
-      expect(vm.dialog.title).toBe("");
-      expect(vm.dialog.message).toBe("");
-    });
-
-    it("should have correct stream types array", async () => {
-      const wrapper = mount(StreamRouting, {
-        global: { plugins: [i18n, store, router], stubs: globalStubs },
-      });
-
-      await flushPromises();
-
-      const vm = wrapper.vm as any;
-      expect(vm.streamTypes).toContain("logs");
-      expect(vm.streamTypes).toContain("metrics");
-      expect(vm.streamTypes).toContain("traces");
-    });
-  });
-
-  describe("addField", () => {
-    it("should add a new condition field", async () => {
-      const wrapper = mount(StreamRouting, {
-        global: { plugins: [i18n, store, router], stubs: globalStubs },
-      });
-
-      await flushPromises();
-
-      const vm = wrapper.vm as any;
-      const initialCount = vm.streamRoute.conditions.length;
-
-      vm.addField();
-      expect(vm.streamRoute.conditions.length).toBe(initialCount + 1);
-    });
-
-    it("should set new condition id using getUUID", async () => {
-      const wrapper = mount(StreamRouting, {
-        global: { plugins: [i18n, store, router], stubs: globalStubs },
-      });
-
-      await flushPromises();
-
-      const vm = wrapper.vm as any;
-      vm.addField();
-
-      const lastCondition = vm.streamRoute.conditions[vm.streamRoute.conditions.length - 1];
-      expect(lastCondition.id).toBe("test-uuid-123");
-    });
-
-    it("should set new condition with default operator '='", async () => {
-      const wrapper = mount(StreamRouting, {
-        global: { plugins: [i18n, store, router], stubs: globalStubs },
-      });
-
-      await flushPromises();
-
-      const vm = wrapper.vm as any;
-      vm.addField();
-
-      const lastCondition = vm.streamRoute.conditions[vm.streamRoute.conditions.length - 1];
-      expect(lastCondition.operator).toBe("=");
-    });
-
-    it("should set new condition with empty column and value", async () => {
-      const wrapper = mount(StreamRouting, {
-        global: { plugins: [i18n, store, router], stubs: globalStubs },
-      });
-
-      await flushPromises();
-
-      const vm = wrapper.vm as any;
-      vm.addField();
-
-      const lastCondition = vm.streamRoute.conditions[vm.streamRoute.conditions.length - 1];
-      expect(lastCondition.column).toBe("");
-      expect(lastCondition.value).toBe("");
-    });
-  });
-
-  describe("removeField", () => {
-    it("should remove a specific condition field by id", async () => {
-      const wrapper = mount(StreamRouting, {
-        global: { plugins: [i18n, store, router], stubs: globalStubs },
-      });
-
-      await flushPromises();
-
-      const vm = wrapper.vm as any;
-      // Manually push a second condition with a distinct id to avoid UUID collision
-      const keepField = { id: "keep-id-456", column: "col", operator: "=", value: "v" };
-      const removeField = { id: "remove-id-789", column: "x", operator: "=", value: "y" };
-      vm.streamRoute.conditions.push(keepField);
-      vm.streamRoute.conditions.push(removeField);
-      const totalBefore = vm.streamRoute.conditions.length;
-
-      vm.removeField(removeField);
-      expect(vm.streamRoute.conditions.length).toBe(totalBefore - 1);
-      expect(vm.streamRoute.conditions.find((c: any) => c.id === removeField.id)).toBeUndefined();
-    });
-
-    it("should keep other conditions intact after removal", async () => {
-      const wrapper = mount(StreamRouting, {
-        global: { plugins: [i18n, store, router], stubs: globalStubs },
-      });
-
-      await flushPromises();
-
-      const vm = wrapper.vm as any;
-      // Manually add conditions with distinct IDs
-      const field1 = { id: "keep-id-1", column: "a", operator: "=", value: "1" };
-      const field2 = { id: "remove-id-2", column: "b", operator: "=", value: "2" };
-      vm.streamRoute.conditions.push(field1);
-      vm.streamRoute.conditions.push(field2);
-
-      vm.removeField(field2);
-
-      // field1 should still be present
-      const remainingIds = vm.streamRoute.conditions.map((c: any) => c.id);
-      expect(remainingIds).toContain(field1.id);
-      expect(remainingIds).not.toContain(field2.id);
-    });
-  });
-
-  describe("openCancelDialog", () => {
-    it("should navigate away without dialog when no changes are made", async () => {
-      const wrapper = mount(StreamRouting, {
-        global: { plugins: [i18n, store, router], stubs: globalStubs },
-      });
-
-      await flushPromises();
-
-      const vm = wrapper.vm as any;
-      // No changes made — dialog should not show
-      vm.openCancelDialog();
-      expect(vm.dialog.show).toBe(false);
-    });
-
-    it("should show confirm dialog when destination stream name has been changed", async () => {
-      const wrapper = mount(StreamRouting, {
-        global: { plugins: [i18n, store, router], stubs: globalStubs },
-      });
-
-      await flushPromises();
-
-      const vm = wrapper.vm as any;
-      vm.streamRoute.destinationStreamName = "new-stream";
-
-      vm.openCancelDialog();
-      expect(vm.dialog.show).toBe(true);
-      expect(vm.dialog.title).toBe("Discard Changes");
-    });
-
-    it("should show confirm dialog when source stream name has been changed", async () => {
-      const wrapper = mount(StreamRouting, {
-        global: { plugins: [i18n, store, router], stubs: globalStubs },
-      });
-
-      await flushPromises();
-
-      const vm = wrapper.vm as any;
-      vm.streamRoute.sourceStreamName = "some-stream";
-
-      vm.openCancelDialog();
-      expect(vm.dialog.show).toBe(true);
-    });
-
-    it("should set discard message in dialog", async () => {
-      const wrapper = mount(StreamRouting, {
-        global: { plugins: [i18n, store, router], stubs: globalStubs },
-      });
-
-      await flushPromises();
-
-      const vm = wrapper.vm as any;
-      vm.streamRoute.destinationStreamName = "changed";
-
-      vm.openCancelDialog();
-      expect(vm.dialog.message).toBe("Are you sure you want to cancel routing changes?");
-    });
-  });
-
-  describe("filterColumns", () => {
-    it("should return all options with empty search value", async () => {
-      const wrapper = mount(StreamRouting, {
-        global: { plugins: [i18n, store, router], stubs: globalStubs },
-      });
-
-      await flushPromises();
-
-      const vm = wrapper.vm as any;
-      const options = ["stream1", "stream2", "test_stream"];
-      const mockUpdate = vi.fn((cb: any) => cb());
-
-      const result = vm.filterColumns(options, "", mockUpdate);
-      expect(mockUpdate).toHaveBeenCalled();
-      expect(result).toEqual(options);
-    });
-
-    it("should filter options by search value", async () => {
-      const wrapper = mount(StreamRouting, {
-        global: { plugins: [i18n, store, router], stubs: globalStubs },
-      });
-
-      await flushPromises();
-
-      const vm = wrapper.vm as any;
-      const options = ["stream1", "stream2", "test_stream"];
-      const mockUpdate = vi.fn((cb: any) => cb());
-
-      const result = vm.filterColumns(options, "test", mockUpdate);
-      expect(result).toEqual(["test_stream"]);
-    });
-
-    it("should filter case-insensitively", async () => {
-      const wrapper = mount(StreamRouting, {
-        global: { plugins: [i18n, store, router], stubs: globalStubs },
-      });
-
-      await flushPromises();
-
-      const vm = wrapper.vm as any;
-      const options = ["MyStream", "AnotherStream"];
-      const mockUpdate = vi.fn((cb: any) => cb());
-
-      const result = vm.filterColumns(options, "MYSTREAM", mockUpdate);
-      expect(result).toEqual(["MyStream"]);
-    });
-
-    it("should return empty array when no options match", async () => {
-      const wrapper = mount(StreamRouting, {
-        global: { plugins: [i18n, store, router], stubs: globalStubs },
-      });
-
-      await flushPromises();
-
-      const vm = wrapper.vm as any;
-      const options = ["stream1", "stream2"];
-      const mockUpdate = vi.fn((cb: any) => cb());
-
-      const result = vm.filterColumns(options, "xyz_no_match", mockUpdate);
-      expect(result).toHaveLength(0);
-    });
-  });
-
-  describe("Theme Styling", () => {
-    it("should apply light theme bg class to actions row", async () => {
-      const wrapper = mount(StreamRouting, {
-        global: { plugins: [i18n, store, router], stubs: globalStubs },
-      });
-
-      await flushPromises();
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it("should render correctly with dark theme", async () => {
-      const darkStore = createStore({
-        state: {
-          selectedOrganization: { identifier: "test-org" },
-          theme: "dark",
-        },
-      });
-
-      const wrapper = mount(StreamRouting, {
-        global: { plugins: [i18n, darkStore, router], stubs: globalStubs },
-      });
-
-      await flushPromises();
-      expect(wrapper.exists()).toBe(true);
-    });
-  });
-});
diff --git a/web/src/components/functions/StreamRouting.vue b/web/src/components/functions/StreamRouting.vue
deleted file mode 100644
index 635a87520c..0000000000
--- a/web/src/components/functions/StreamRouting.vue
+++ /dev/null
@@ -1,294 +0,0 @@
-<template>
-  <div data-test="add-stream-routing-section" class="bg-white h-full">
-    <div class="py-2 px-3 flex justify-between items-center">
-      <div class="text-[18px]">Stream Routing</div>
-      <OIcon
-        data-test="stream-routing-close-dialog-btn"
-        name="cancel"
-        class="cursor-pointer"
-        size="md"
-        @click="emits('cancel:hideform')"
-      />
-    </div>
-    <OSeparator />
-    <div class="w-fit rounded-lg px-3 pt-3">
-      <div
-        data-test="stream-routing-name-input"
-        class="o2-input"
-        style="padding-top: 12px"
-      >
-        <OInput
-          v-model="streamRoute.destinationStreamName"
-          :label="t('alerts.name') + ' *'"
-          data-test="stream-routing-destination-name-input"
-          v-bind:readonly="isUpdating"
-          v-bind:disabled="isUpdating"
-          :error="!!nameError"
-          :error-message="nameError"
-          tabindex="0"
-          style="width: 480px"
-          @blur="nameError = !streamRoute.destinationStreamName.trim() ? 'Field is required!' : ''"
-          @update:model-value="nameError = ''"
-        />
-      </div>
-      <div class="flex justify-start items-center" style="padding-top: 0px">
-        <div
-          class="alert-stream-type o2-input mr-2"
-          style="padding-top: 0"
-        >
-          <OSelect
-            data-test="add-alert-stream-type-select"
-            v-model="streamRoute.sourceStreamType"
-            :options="streamTypes"
-            :label="t('alerts.streamType') + ' *'"
-            v-bind:readonly="isUpdating"
-            v-bind:disabled="isUpdating"
-            :error="!!streamTypeError"
-            :error-message="streamTypeError"
-            style="min-width: 220px"
-            @update:model-value="() => { streamTypeError = ''; updateStreams(); }"
-            @blur="streamTypeError = !streamRoute.sourceStreamType ? 'Field is required!' : ''"
-          />
-        </div>
-        <div
-          class="o2-input"
-          style="padding-top: 0"
-        >
-          <OSelect
-            data-test="add-alert-stream-select"
-            v-model="streamRoute.sourceStreamName"
-            :options="filteredStreams"
-            :label="t('alerts.stream_name') + ' *'"
-            :loading="isFetchingStreams"
-            searchable
-            :searchDebounce="400"
-            v-bind:readonly="isUpdating"
-            v-bind:disabled="isUpdating"
-            :error="!!streamNameError"
-            :error-message="streamNameError"
-            style="min-width: 250px !important; width: 250px !important"
-            @search="filterStreams"
-            @update:model-value="(val) => { streamNameError = ''; updateStreamFields(val) }"
-            @blur="streamNameError = !streamRoute.sourceStreamName ? 'Field is required!' : ''"
-          />
-        </div>
-      </div>
-
-      <real-time-alert
-        :columns="filteredColumns"
-        :conditions="streamRoute.conditions"
-        @field:add="addField"
-        @field:remove="removeField"
-      />
-
-      <div
-        class="flex justify-start mt-4 py-2 w-full gap-2"
-        :class="store.state.theme === 'dark' ? 'bg-[var(--o2-bg-card-dark,#1a1a1a)]' : 'bg-white'"
-      >
-        <OButton
-          data-test="add-report-cancel-btn"
-          variant="outline"
-          size="sm-action"
-          @click="openCancelDialog"
-        >
-          {{ t('alerts.cancel') }}
-        </OButton>
-        <OButton
-          data-test="add-report-save-btn"
-          variant="primary"
-          size="sm-action"
-          @click="saveRouting"
-        >
-          {{ t('alerts.save') }}
-        </OButton>
-      </div>
-    </div>
-  </div>
-  <ConfirmDialog
-    v-model="dialog.show"
-    :title="dialog.title"
-    :message="dialog.message"
-    @update:ok="dialog.okCallback"
-    @update:cancel="dialog.show = false"
-  />
-</template>
-<script lang="ts" setup>
-import { ref, type Ref } from "vue";
-import { useI18n } from "vue-i18n";
-import RealTimeAlert from "../alerts/RealTimeAlert.vue";
-import { getUUID } from "@/utils/zincutils";
-import { useStore } from "vuex";
-import { useRouter } from "vue-router";
-import OButton from "@/lib/core/Button/OButton.vue";
-import OIcon from "@/lib/core/Icon/OIcon.vue";
-import OInput from "@/lib/forms/Input/OInput.vue";
-import OSelect from "@/lib/forms/Select/OSelect.vue";
-import OSeparator from '@/lib/core/Separator/OSeparator.vue';
-
-interface RouteCondition {
-  column: string;
-  operator: string;
-  value: any;
-  id: string;
-}
-
-interface StreamRoute {
-  sourceStreamName: string;
-  destinationStreamName: string;
-  sourceStreamType: string;
-  destinationStreamType: string;
-  conditions: RouteCondition[];
-}
-
-const { t } = useI18n();
-
-const emits = defineEmits(["cancel:hideform"]);
-
-const isUpdating = ref(false);
-
-const filteredColumns: any = ref([]);
-
-const isFetchingStreams = ref(false);
-
-const filteredStreams = ref([]);
-
-const nameError = ref('');
-const streamTypeError = ref('');
-const streamNameError = ref('');
-
-const router = useRouter();
-
-const store = useStore();
-
-const dialog = ref({
-  show: false,
-  title: "",
-  message: "",
-  okCallback: () => {},
-});
-
-const getDefaultStreamRoute = () => {
-  return {
-    sourceStreamName: "",
-    destinationStreamName: "",
-    sourceStreamType: "",
-    destinationStreamType: "",
-    conditions: [{ column: "", operator: "", value: "", id: getUUID() }],
-  };
-};
-
-const streamTypes = ["logs", "metrics", "traces"];
-
-const streamRoute: Ref<StreamRoute> = ref(getDefaultStreamRoute());
-
-const originalStreamRouting: Ref<StreamRoute> = ref(getDefaultStreamRoute());
-
-const updateStreams = (resetStream = true) => {
-  // if (resetStream) formData.value.stream_name = "";
-  // if (streams.value[formData.value.stream_type]) {
-  //   schemaList.value = streams.value[formData.value.stream_type];
-  //   indexOptions.value = streams.value[formData.value.stream_type].map(
-  //     (data: any) => {
-  //       return data.name;
-  //     }
-  //   );
-  //   return;
-  // }
-  // if (!formData.value.stream_type) return Promise.resolve();
-  // isFetchingStreams.value = true;
-  // return getStreams(formData.value.stream_type, false)
-  //   .then((res: any) => {
-  //     streams.value[formData.value.stream_type] = res.list;
-  //     schemaList.value = res.list;
-  //     indexOptions.value = res.list.map((data: any) => {
-  //       return data.name;
-  //     });
-  //     if (formData.value.stream_name)
-  //       updateStreamFields(formData.value.stream_name);
-  //     return Promise.resolve();
-  //   })
-  //   .catch(() => Promise.reject())
-  //   .finally(() => (isFetchingStreams.value = false));
-};
-
-const filterColumns = (options: any[], val: String, update: Function) => {
-  let filteredOptions: any[] = [];
-  if (val === "") {
-    update(() => {
-      filteredOptions = [...options];
-    });
-    return filteredOptions;
-  }
-  update(() => {
-    const value = val.toLowerCase();
-    filteredOptions = options.filter(
-      (column: any) => column.toLowerCase().indexOf(value) > -1
-    );
-  });
-  return filteredOptions;
-};
-
-const filterStreams = (val: string) => {
-  // filteredStreams.value = filterColumns(indexOptions.value, val, update);
-};
-
-const updateStreamFields = async (stream_name: any) => {
-  // let streamCols: any = [];
-  // const streams: any = await getStream(
-  //   stream_name,
-  //   formData.value.stream_type,
-  //   true
-  // );
-  // if (streams && Array.isArray(streams.schema)) {
-  //   streamCols = streams.schema.map((column: any) => ({
-  //     label: column.name,
-  //     value: column.name,
-  //     type: column.type,
-  //   }));
-  // }
-  // originalStreamFields.value = [...streamCols];
-  // filteredColumns.value = [...streamCols];
-  // onInputUpdate("stream_name", stream_name);
-};
-
-const addField = () => {
-  streamRoute.value.conditions.push({
-    column: "",
-    operator: "=",
-    value: "",
-    id: getUUID(),
-  });
-};
-
-const removeField = (field: any) => {
-  streamRoute.value.conditions = streamRoute.value.conditions.filter(
-    (_field: any) => _field.id !== field.id
-  );
-};
-
-const goToRoutings = () => {
-  router.replace({
-    name: "reports",
-    query: {
-      org_identifier: store.state.selectedOrganization.identifier,
-    },
-  });
-};
-
-const openCancelDialog = () => {
-  if (
-    JSON.stringify(originalStreamRouting.value) ===
-    JSON.stringify(streamRoute.value)
-  ) {
-    goToRoutings();
-    return;
-  }
-  dialog.value.show = true;
-  dialog.value.title = "Discard Changes";
-  dialog.value.message = "Are you sure you want to cancel routing changes?";
-  dialog.value.okCallback = goToRoutings;
-};
-
-const saveRouting = () => {};
-</script>
-
diff --git a/web/src/components/functions/TestFunction.vue b/web/src/components/functions/TestFunction.vue
index 342e2e8895..6868d703de 100644
--- a/web/src/components/functions/TestFunction.vue
+++ b/web/src/components/functions/TestFunction.vue
@@ -5,7 +5,7 @@
   >
     <div
       data-test="test-function-query-section"
-      class="test-function-query-container w-[100%]"
+      class="test-function-query-container w-full"
     >
       <FullViewContainer
           data-test="test-function-query-title-section"
@@ -17,7 +17,7 @@
             <OIcon
               v-if="!!sqlQueryErrorMsg"
               name="info-outline"
-              class="text-red-600 mx-1 cursor-pointer"
+              class="text-status-error-text mx-1 cursor-pointer"
               size="sm"
             >
               <OTooltip
@@ -41,22 +41,12 @@
           </template>
         </FullViewContainer>
         <div
-          class="flex items-center flex-wrap gap-x-3 py-2 w-[100%]"
-          :class="
-            store.state.theme === 'dark' ? 'bg-gray-950' : ' bg-white'
-          "
+          class="flex items-center flex-wrap gap-x-3 py-2 w-full bg-surface-base"
           v-show="expandState.query"
           data-test="test-function-query-editor-section"
         >
-          <div class="function-stream-select-input w-[100px]">
-            <div
-              class="text-[12px]"
-              :class="
-                store.state.theme === 'dark'
-                  ? 'text-gray-200'
-                  : 'text-gray-700'
-              "
-            >
+          <div class="function-stream-select-input w-25">
+            <div class="text-xs text-text-label">
               {{ t("alerts.streamType") + " *" }}
             </div>
 
@@ -69,15 +59,8 @@
               style="width: 100px"
             />
           </div>
-          <div class="function-stream-select-input w-[300px]">
-            <div
-              class="text-[12px]"
-              :class="
-                store.state.theme === 'dark'
-                  ? 'text-gray-200'
-                  : 'text-gray-700'
-              "
-            >
+          <div class="function-stream-select-input w-75">
+            <div class="text-xs text-text-label">
               {{ t("alerts.stream_name") + " *" }}
             </div>
             <OSelect
@@ -91,15 +74,8 @@
               @update:model-value="updateQuery"
             />
           </div>
-          <div class="functions-duration-input w-[330px]">
-            <div
-              class="text-[12px]"
-              :class="
-                store.state.theme === 'dark'
-                  ? 'text-gray-200'
-                  : 'text-gray-700'
-              "
-            >
+          <div class="functions-duration-input w-82.5">
+            <div class="text-xs text-text-label">
               {{ t("common.duration") + " *" }}
             </div>
 
@@ -118,18 +94,11 @@
             />
           </div>
 
-          <div
-            class="text-[12px] w-[100%] mt-1"
-            :class="
-              store.state.theme === 'dark'
-                ? 'text-gray-200'
-                : 'text-gray-700'
-            "
-          >
+          <div class="text-xs w-full mt-1 text-text-label">
             {{ t("common.query") + " *" }}
           </div>
           <div
-            class="relative w-[100%]"
+            class="relative w-full"
           >
             <query-editor
               data-test="vrl-function-test-sql-editor"
@@ -147,12 +116,12 @@
               v-if="!inputQuery && queryEditorPlaceholderFlag"
               class="query-editor-placeholder-overlay absolute top-0 left-0 right-0 bottom-0 flex items-start p-[0.1875rem_0.5rem_0_2.15rem] pointer-events-none z-1 select-none"
             >
-              <span class="query-editor-placeholder-typewriter [font-family:monospace] text-[var(--text-base)] [line-height:1.3125rem] text-[#a0aec0] whitespace-nowrap overflow-hidden text-ellipsis" :class="store.state.theme === 'dark' ? 'text-[#718096]' : ''">{{ queryEditorPlaceholder }}</span>
+              <span class="query-editor-placeholder-typewriter font-mono text-[var(--text-sm)] [line-height:1.3125rem] text-text-placeholder whitespace-nowrap overflow-hidden text-ellipsis">{{ queryEditorPlaceholder }}</span>
             </div>
             <div
-              class="text-red-500 p-1 invalid-sql-error min-h-[22px]"
+              class="text-status-error-text p-1 invalid-sql-error min-h-5.5"
             >
-              <span v-show="!!sqlQueryErrorMsg" class="text-[13px]">
+              <span v-show="!!sqlQueryErrorMsg" class="text-compact">
                 Error: {{ sqlQueryErrorMsg }}</span
               >
             </div>
@@ -172,17 +141,17 @@
         <template #left>
           <div
             v-if="loading.events"
-            class="text-weight-bold flex items-center text-gray-500 ml-2 text-[13px]"
+            class="font-bold flex items-center text-text-secondary ml-2 text-compact"
           >
             <OSpinner size="xs" />
-            <div class="relative top-[2px]">
+            <div class="relative top-0.5">
               {{ t("confirmDialog.loading") }}
             </div>
           </div>
           <OIcon
             v-if="!!eventsErrorMsg"
             name="info-outline"
-            class="text-red-600 mx-1 cursor-pointer"
+            class="text-status-error-text mx-1 cursor-pointer"
             size="sm"
           >
             <OTooltip
@@ -231,10 +200,10 @@
         <template #left>
           <div
             v-if="loading.output"
-            class="text-sm font-medium text-weight-bold flex items-center text-gray-500 ml-2 text-[13px]"
+            class="text-sm font-medium font-bold flex items-center text-text-secondary ml-2 text-compact"
           >
             <OSpinner size="xs" />
-            <div class="relative top-[2px]">
+            <div class="relative top-0.5">
               {{ t("confirmDialog.loading") }}
             </div>
           </div>
@@ -242,7 +211,7 @@
           <OIcon
             v-if="!!outputEventsErrorMsg"
             name="info-outline"
-            class="text-red-600 mx-1 cursor-pointer"
+            class="text-status-error-text mx-1 cursor-pointer"
             size="sm"
           >
             <OTooltip
@@ -267,16 +236,9 @@
           <OIcon
             name="lightbulb"
             size="xl"
-            class="text-orange-400"
+            class="text-status-warning-text"
           />
-          <div
-            class="text-[15px]"
-            :class="
-              store.state.theme === 'dark'
-                ? 'text-gray-200'
-                : 'text-gray-600'
-            "
-          >
+          <div class="text-sm text-text-secondary">
             {{ outputMessage }}
           </div>
         </div>
@@ -862,11 +824,12 @@ defineExpose({
 });
 </script>
 
-<style>
+<style scoped>
+/* keep(lib-override): compact run-query button + full-width date-time button (child DOM) */
 .test-function-query-container :deep(.test-function-run-query-btn) {
-  padding: 2px 8px !important;
-  font-size: 11px !important;
-  margin: 1px 2px !important;
+  padding: 0.125rem 0.5rem !important;
+  font-size: var(--text-2xs) !important;
+  margin: 1px 0.125rem !important;
 }
 
 .functions-duration-input :deep(.date-time-button) {
diff --git a/web/src/components/iam/IngestionTokens.schema.ts b/web/src/components/iam/IngestionTokens.schema.ts
index 569b8318a0..ee86ab6153 100644
--- a/web/src/components/iam/IngestionTokens.schema.ts
+++ b/web/src/components/iam/IngestionTokens.schema.ts
@@ -1,11 +1,7 @@
 // Copyright 2026 OpenObserve Inc.
 //
 // Validation schema for the "Create Token" dialog in IngestionTokens.vue. Built
-// via a factory so the required message stays i18n-driven (pass useI18n's `t`).
-//
-// Before migration the name was "required" only via a disabled-Save gate
-// (`:primary-button-disabled="!newTokenName.trim()"`) plus a `maxlength=256` on
-// the input — there was no field-level validation rule. This encodes that intent into Zod:
+// via a factory so the required message stays i18n-driven (pass useI18n's `t`):
 // name is required + max 256; description is optional.
 
 import { z } from "zod";
diff --git a/web/src/components/iam/IngestionTokens.spec.ts b/web/src/components/iam/IngestionTokens.spec.ts
index fb21387dc7..8fa205b0bd 100644
--- a/web/src/components/iam/IngestionTokens.spec.ts
+++ b/web/src/components/iam/IngestionTokens.spec.ts
@@ -64,7 +64,7 @@ function mountComp() {
       stubs: {
         ODialog: ODialogStub,
         OTable: true,
-        AppPageHeader: true,
+        OPageHeader: true,
         OSearchInput: true,
         OTooltip: true,
         OEmptyState: true,
diff --git a/web/src/components/iam/IngestionTokens.vue b/web/src/components/iam/IngestionTokens.vue
index 114ce49cbc..c27e668f7a 100644
--- a/web/src/components/iam/IngestionTokens.vue
+++ b/web/src/components/iam/IngestionTokens.vue
@@ -15,14 +15,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="p-0 h-full flex flex-col">
-    <!-- Standard section header: title + description + Create action. -->
-    <AppPageHeader
+  <OPageLayout
       :title="t('ingestion.tokenManagementTitle')"
       title-data-test="ingestion-tokens-title-text"
-      icon="key"
-      class="shrink-0 px-4 border-b border-border-default"
-    >
+      icon="key" bleed>
       <!-- Full explanation lives in this info tooltip; the subtitle below is a
            truncated preview so neither overruns the Create action button. -->
       <template #title-trail>
@@ -50,10 +46,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           {{ t('ingestion.createTokenBtn') }}
         </OButton>
       </template>
-    </AppPageHeader>
 
     <div class="w-full flex-1 min-h-0 overflow-hidden">
-      <div class="card-container h-full">
+      <div class="bg-card-glass-bg h-full">
         <OTable
           :frame="false"
           :data="tokens"
@@ -172,12 +167,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       @click:secondary="showRevealedDialog = false"
     >
       <!-- Primary: the ready-to-paste Authorization credential. -->
-      <div class="mb-1 text-xs font-medium text-text-primary">
+      <div class="mb-1 text-xs font-medium text-text-label">
         {{ t('ingestion.authHeaderLabel') }}
       </div>
       <div
-        class="p-2.5 border border-dashed rounded border-gray-400 mb-1"
-        :class="store.state.theme === 'dark' ? 'bg-gray-800' : 'bg-gray-100'"
+        class="p-2.5 border border-dashed rounded-default border-border-default mb-1 bg-surface-subtle"
       >
         <code
           class="break-all font-mono text-sm"
@@ -205,7 +199,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </OButton>
       </div>
     </ODialog>
-  </div>
+  </OPageLayout>
 </template>
 
 <script lang="ts">
@@ -213,7 +207,7 @@ import { ref, computed, defineComponent, onBeforeMount } from "vue";
 import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
 import OButton from "@/lib/core/Button/OButton.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import OSearchInput from "@/lib/forms/SearchInput/OSearchInput.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
@@ -249,7 +243,7 @@ interface Token {
 
 export default defineComponent({
   name: "IngestionTokens",
-  components: { AppPageHeader, OButton, OEmptyState, OIcon, OSearchInput, OTooltip, ODialog, OForm, OFormInput, OTable, OCodeCell, OUserCell },
+  components: { OPageLayout, OButton, OEmptyState, OIcon, OSearchInput, OTooltip, ODialog, OForm, OFormInput, OTable, OCodeCell, OUserCell },
   setup() {
     const store = useStore();
     const { t } = useI18n();
@@ -284,7 +278,7 @@ export default defineComponent({
         hideable: true,
         size: COL.name,
         minSize: 160,
-        meta: { align: "left", cellClass: 'pl-4!', headerClass: 'pl-4!', flex: true },
+        meta: { align: "left", flex: true },
       },
       {
         id: "token",
diff --git a/web/src/components/iam/McpServer.vue b/web/src/components/iam/McpServer.vue
index 4b2a202a9d..8638a553e4 100644
--- a/web/src/components/iam/McpServer.vue
+++ b/web/src/components/iam/McpServer.vue
@@ -24,7 +24,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { computed, onMounted } from "vue";
 import { useI18n } from "vue-i18n";
 import { useStore } from "vuex";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import McpServerCard from "@/components/ingestion/ai/McpServerCard.vue";
 import useIngestion from "@/composables/useIngestion";
 import organizationsService from "@/services/organizations";
@@ -68,15 +68,14 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="p-0 h-full flex flex-col" data-test="iam-mcp-server">
-    <AppPageHeader
-      :title="t('iam.mcpServerHeader')"
-      icon="mcp"
-      :subtitle="t('iam.mcpServerHeaderSubtitle')"
-      class="shrink-0 px-4 border-b border-border-default"
-    />
-    <div class="flex-1 min-h-0 overflow-auto p-4">
-      <McpServerCard :subs="subs" :doc-url="docUrl" />
-    </div>
-  </div>
+  <OPageLayout
+    data-test="iam-mcp-server"
+    :title="t('iam.mcpServerHeader')"
+    icon="mcp"
+    :subtitle="t('iam.mcpServerHeaderSubtitle')"
+    scroll
+    pad-y
+  >
+    <McpServerCard :subs="subs" :doc-url="docUrl" />
+  </OPageLayout>
 </template>
diff --git a/web/src/components/iam/groups/AddGroup.schema.ts b/web/src/components/iam/groups/AddGroup.schema.ts
index dba1ab85e3..53e9726743 100644
--- a/web/src/components/iam/groups/AddGroup.schema.ts
+++ b/web/src/components/iam/groups/AddGroup.schema.ts
@@ -1,11 +1,8 @@
 // Copyright 2026 OpenObserve Inc.
 //
 // Validation schema for AddGroup.vue. Built via a factory so the required
-// message stays i18n-driven (pass useI18n's `t`).
-//
-// Restores the full pre-migration validation rule for `name`
-// (`!!v ? isValidGroupName : nameRequired`) per the truthy→Zod inversion: it is
-// BOTH required (min(1)) AND the alphanumeric/underscore regex — not regex-only.
+// message stays i18n-driven (pass useI18n's `t`). `name` is both required
+// (min(1)) and constrained to the alphanumeric/underscore regex.
 
 import { z } from "zod";
 
diff --git a/web/src/components/iam/groups/AppGroups.spec.ts b/web/src/components/iam/groups/AppGroups.spec.ts
index 9fbc34df24..d9f1f5932c 100644
--- a/web/src/components/iam/groups/AppGroups.spec.ts
+++ b/web/src/components/iam/groups/AppGroups.spec.ts
@@ -132,7 +132,7 @@ describe("AppGroups Component", () => {
   describe("Component Mounting", () => {
     it("renders the component correctly", () => {
       expect(wrapper.exists()).toBe(true);
-      // Title now lives in the standard AppPageHeader (row 1).
+      // Title now lives in the standard OPageHeader (row 1).
       expect(wrapper.find(".app-page-header").exists()).toBe(true);
     });
 
@@ -163,11 +163,13 @@ describe("AppGroups Component", () => {
     });
 
     it("has correct table columns structure", () => {
+      // The row-index ("#") column is now the built-in OTable `show-index`
+      // gutter, not a member of `columns`, so only the real data columns remain.
       expect(wrapper.vm.columns).toBeDefined();
-      expect(wrapper.vm.columns).toHaveLength(3);
-      
+      expect(wrapper.vm.columns).toHaveLength(2);
+
       const columnNames = wrapper.vm.columns.map((col: any) => col.id);
-      expect(columnNames).toContain("#");
+      expect(columnNames).not.toContain("#");
       expect(columnNames).toContain("group_name");
       expect(columnNames).toContain("actions");
     });
@@ -187,19 +189,8 @@ describe("AppGroups Component", () => {
       expect(wrapper.vm.rows[2].group_name).toBe("users");
     });
 
-    it("formats row numbers correctly", async () => {
-      const { getGroups } = await import("@/services/iam");
-      vi.mocked(getGroups).mockResolvedValue(
-        createMockAxiosResponse(["group1", "group2", "group3"]) as any
-      );
-
-      await wrapper.vm.setupGroups();
-      await flushPromises();
-
-      expect(wrapper.vm.rows[0]["#"]).toBe("01");
-      expect(wrapper.vm.rows[1]["#"]).toBe("02");
-      expect(wrapper.vm.rows[2]["#"]).toBe("03");
-    });
+    // Row numbering moved to OTable's built-in `show-index` (zero-padded,
+    // covered by OTable's own spec); pages no longer inject a "#" data field.
   });
 
   describe("Search Functionality", () => {
diff --git a/web/src/components/iam/groups/AppGroups.vue b/web/src/components/iam/groups/AppGroups.vue
index ba12a44e8a..27106f5be1 100644
--- a/web/src/components/iam/groups/AppGroups.vue
+++ b/web/src/components/iam/groups/AppGroups.vue
@@ -15,14 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="p-0 h-full flex flex-col">
-    <!-- Standard page header: title + actions only. Search moved into the
-         table's own toolbar (built-in global filter). -->
-    <AppPageHeader
-      :title="t('iam.groups')"
-      icon="group"
-      class="shrink-0 px-4 border-b border-border-default"
-    >
+  <OPageLayout :title="t('iam.groups')" icon="group" bleed>
       <template #subtitle>
         <span data-test="iam-groups-subtitle">
           {{ t('iam.groupsPage.subtitle') }}
@@ -38,9 +31,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           {{ t('iam.addGroup') }}
         </OButton>
       </template>
-    </AppPageHeader>
     <div class="w-full flex-1 min-h-0 overflow-hidden">
-      <div class="card-container h-full">
+      <div class="bg-card-glass-bg h-full">
         <OTable
           :frame="false"
           data-test="iam-groups-table-section"
@@ -59,6 +51,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           selection="multiple"
           filter-mode="client"
           :default-columns="false"
+          show-index
           @update:selected-ids="handleSelectedIdsUpdate"
         >
           <template #toolbar>
@@ -116,7 +109,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             />
           </template>
           <template #bottom>
-            <span class="o2-table-footer-title">{{ rows.length }} {{ t('iam.groups') }}</span>
+            <span class="text-xs font-normal">{{ rows.length }} {{ t('iam.groups') }}</span>
             <OButton
               v-if="selectedGroups.length > 0"
               data-test="iam-groups-bulk-delete-btn"
@@ -152,7 +145,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       @update:cancel="confirmBulkDelete = false"
       v-model="confirmBulkDelete"
     />
-  </div>
+  </OPageLayout>
 </template>
 
 <script setup lang="ts">
@@ -160,7 +153,7 @@ import { ref, onBeforeMount, computed } from "vue";
 import AddGroup from "./AddGroup.vue";
 import OButton from "@/lib/core/Button/OButton.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import OTable from "@/lib/core/Table/OTable.vue";
 import type { OTableColumnDef } from "@/lib/core/Table/OTable.types";
 import OEmptyState from "@/lib/core/EmptyState/OEmptyState.vue";
@@ -178,7 +171,6 @@ import OSearchInput from "@/lib/forms/SearchInput/OSearchInput.vue";
 import { toast } from "@/lib/feedback/Toast/useToast";
 import { useShortcuts } from "@/lib/vue-shortcut-manager";
 import { focusSearchInput, isInputFocused } from "@/utils/keyboardShortcuts";
-import { TABLE_INDEX_COL_SIZE } from "@/lib/core/Table/OTable.types";
 
 const showAddGroup = ref(false);
 
@@ -215,15 +207,6 @@ const handleSelectedIdsUpdate = (ids: string[]) => {
 const confirmBulkDelete = ref(false);
 
 const columns: OTableColumnDef[] = [
-  {
-    id: "#",
-    header: "#",
-    accessorFn: (row: any) => row["#"],
-    size: TABLE_INDEX_COL_SIZE,
-    minSize: 32,
-    maxSize: 40,
-    meta: { compactPadding: true, align: "left" },
-  },
   {
     id: "group_name",
     header: t("iam.groupName"),
@@ -239,7 +222,7 @@ const columns: OTableColumnDef[] = [
     size: 80,
     minSize: 64,
     maxSize: 100,
-    meta: { align: "left", actionCount: 2 },
+    meta: { align: "center", actionCount: 2 },
   },
 ];
 
@@ -250,13 +233,7 @@ onBeforeMount(() => {
 });
 
 const updateTable = () => {
-  let counter = 1;
-  rows.value = cloneDeep(
-    groupsState.groups.map((group: { group_name: string }, index: number) => ({
-      ...group,
-      "#": counter <= 9 ? `0${counter++}` : counter++,
-    }))
-  );
+  rows.value = cloneDeep(groupsState.groups);
 };
 
 const addGroup = () => {
diff --git a/web/src/components/iam/groups/EditGroup.spec.ts b/web/src/components/iam/groups/EditGroup.spec.ts
index 0bf5bce49a..bb99fbb294 100644
--- a/web/src/components/iam/groups/EditGroup.spec.ts
+++ b/web/src/components/iam/groups/EditGroup.spec.ts
@@ -131,7 +131,7 @@ describe("EditGroup Component", () => {
       wrapper.vm.groupDetails.group_name = "test-group";
       await wrapper.vm.$nextTick();
 
-      // Group name now renders as the AppPageHeader title (row 1).
+      // Group name now renders as the OPageHeader title (row 1).
       const titleElement = wrapper.find(".app-page-header h1");
       expect(titleElement.exists()).toBe(true);
       expect(titleElement.text()).toContain("test-group");
diff --git a/web/src/components/iam/groups/EditGroup.vue b/web/src/components/iam/groups/EditGroup.vue
index ae496b4d99..2b599e091f 100644
--- a/web/src/components/iam/groups/EditGroup.vue
+++ b/web/src/components/iam/groups/EditGroup.vue
@@ -15,18 +15,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div data-test="edit-group-section" class="flex flex-col h-full">
-    <!-- Sub-page header: the listing's icon becomes a Back button (→ Groups). -->
-    <AppPageHeader
-      :title="groupDetails.group_name"
-      :back="{ label: t('iam.groups'), onClick: cancelEditGroup }"
-      class="shrink-0 px-4 border-b border-border-default"
-    />
+  <OPageLayout
+    data-test="edit-group-section"
+    :title="groupDetails.group_name"
+    :back="{ label: t('iam.groups'), onClick: cancelEditGroup }"
+    bleed
+  >
     <div
       data-test="edit-group-section-title"
-      class="px-2.5 pt-2.5 pb-[0.625rem] flex-shrink-0"
+      class="px-page-edge pt-2.5 pb-2.5 flex-shrink-0"
     >
-    <div class="card-container py-3">
+    <div class="bg-card-glass-bg py-3">
     <AppTabs
       data-test="edit-group-tabs"
       :tabs="tabs"
@@ -66,7 +65,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     class="flex justify-end w-full flex-shrink-0"
       style="z-index: 2"
     >
-      <div class="card-container w-full py-2 px-3 justify-end flex gap-2 border-t border-border-default">
+      <div class="bg-card-glass-bg w-full py-2 px-page-edge justify-end flex gap-2 border-t border-border-default">
       <OButton
         data-test="edit-group-cancel-btn"
         variant="outline"
@@ -92,7 +91,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       @update:cancel="onLeaveConfirm(false)"
       v-model="leaveConfirm.show"
     />
-  </div>
+  </OPageLayout>
 </template>
 
 <script setup lang="ts">
@@ -102,7 +101,7 @@ import OSeparator from '@/lib/core/Separator/OSeparator.vue';
 import GroupRoles from "./GroupRoles.vue";
 import GroupUsers from "./GroupUsers.vue";
 import AppTabs from "@/components/common/AppTabs.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import { useI18n } from "vue-i18n";
 import { useRouter, onBeforeRouteLeave } from "vue-router";
 import { onBeforeMount } from "vue";
diff --git a/web/src/components/iam/groups/GroupRoles.spec.ts b/web/src/components/iam/groups/GroupRoles.spec.ts
index c26c42e624..46809be62a 100644
--- a/web/src/components/iam/groups/GroupRoles.spec.ts
+++ b/web/src/components/iam/groups/GroupRoles.spec.ts
@@ -206,12 +206,10 @@ describe("GroupRoles Component", () => {
       expect(wrapper.vm.users).toHaveLength(2);
       expect(wrapper.vm.users[0]).toEqual({
         role_name: "admin",
-        "#": 1,
         isInGroup: true, // admin is in groupRoles prop
       });
       expect(wrapper.vm.users[1]).toEqual({
         role_name: "user",
-        "#": 2,
         isInGroup: true, // user is in groupRoles prop
       });
     });
diff --git a/web/src/components/iam/groups/GroupRoles.vue b/web/src/components/iam/groups/GroupRoles.vue
index 544c9d933a..fa778a889f 100644
--- a/web/src/components/iam/groups/GroupRoles.vue
+++ b/web/src/components/iam/groups/GroupRoles.vue
@@ -17,8 +17,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div data-test="iam-roles-selection-section" class="flex flex-col h-full p-0" >
     <div
-      class="flex justify-start px-3 py-2 card-container shrink-0"
-      :class="store.state.theme === 'dark' ? 'bg-(--o2-bg-card-dark,#1a1a1a)' : 'bg-white'"
+      class="flex justify-start px-3 py-2 bg-card-glass-bg shrink-0"
     >
       <div class="mr-3">
         <div
@@ -27,7 +26,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         >
           <span
             data-test="iam-roles-selection-show-text"
-            style="font-size: 14px"
+            style="font-size: var(--text-sm)"
           >
             {{ t('iam.groupRoles.show') }}
           </span>
@@ -60,7 +59,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         />
       </div>
     </div>
-    <div data-test="iam-roles-selection-table" class="flex-1 min-h-0 card-container">
+    <div data-test="iam-roles-selection-table" class="flex-1 min-h-0 bg-card-glass-bg">
       <OTable
         :data="rows"
         :columns="columns"
@@ -114,7 +113,7 @@ import { ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { getRoles } from "@/services/iam";
 import { useStore } from "vuex";
-import { TABLE_INDEX_COL_SIZE, COL } from "@/lib/core/Table/OTable.types";
+import { TABLE_CHECKBOX_COL_SIZE, COL } from "@/lib/core/Table/OTable.types";
 
 // show selected users in the table
 // Add is_selected to the user object
@@ -179,7 +178,7 @@ const columns: OTableColumnDef[] = [
     header: "",
     accessorKey: "isInGroup",
     cell: (info: any) => info.getValue(),
-    size: TABLE_INDEX_COL_SIZE,
+    size: TABLE_CHECKBOX_COL_SIZE,
     minSize: 32,
     maxSize: 40,
     meta: { align: "center", compactPadding: true },
@@ -235,10 +234,9 @@ const getchOrgUsers = async () => {
       store.state.selectedOrganization.identifier
     );
 
-    users.value = cloneDeep(data.data).map((role: any, index: number) => {
+    users.value = cloneDeep(data.data).map((role: any) => {
       return {
         role_name: role,
-        "#": index + 1,
         isInGroup: groupUsersMap.value.has(role),
       };
     });
diff --git a/web/src/components/iam/groups/GroupServiceAccounts.vue b/web/src/components/iam/groups/GroupServiceAccounts.vue
index 7aea313076..c925d9749a 100644
--- a/web/src/components/iam/groups/GroupServiceAccounts.vue
+++ b/web/src/components/iam/groups/GroupServiceAccounts.vue
@@ -18,13 +18,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <div class="flex flex-col h-full">
       <div
         data-test="iam-service-accounts-selection-filters"
-       class="flex justify-start px-3 py-2 card-container shrink-0"
+       class="flex justify-start px-3 py-2 bg-card-glass-bg shrink-0"
       >
         <div data-test="iam-service-accounts-selection-show-toggle" class="mr-3">
           <div class="flex items-center">
             <span
               data-test="iam-service-accounts-selection-show-text"
-              style="font-size: 14px"
+              style="font-size: var(--text-sm)"
             >
               {{ t('iam.groupServiceAccounts.show') }}
             </span>
@@ -57,7 +57,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           />
         </div>
       </div>
-      <div data-test="iam-service-accounts-selection-table" class="flex-1 min-h-0 card-container">
+      <div data-test="iam-service-accounts-selection-table" class="flex-1 min-h-0 bg-card-glass-bg">
         <OTable
           :data="rows"
           :columns="columns"
@@ -110,7 +110,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   import { ref, onBeforeMount } from "vue";
   import { useI18n } from "vue-i18n";
   import { useStore } from "vuex";
-  import { TABLE_INDEX_COL_SIZE, COL } from "@/lib/core/Table/OTable.types";
+  import { TABLE_CHECKBOX_COL_SIZE, COL } from "@/lib/core/Table/OTable.types";
   
   // show selected users in the table
   // Add is_selected to the user object
@@ -173,7 +173,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       header: "",
       accessorKey: "isInGroup",
     cell: (info: any) => info.getValue(),
-    size: TABLE_INDEX_COL_SIZE,
+    size: TABLE_CHECKBOX_COL_SIZE,
       minSize: 32,
       maxSize: 40,
       meta: { align: "center", compactPadding: true },
@@ -233,19 +233,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       serviceAccountsState.service_accounts_users = cloneDeep(
         data
           .filter((user: any) => user.is_system !== true) // Filter out system accounts
-          .map((user: any, index: number) => {
+          .map((user: any) => {
             return {
               email: user.email,
-              "#": index + 1,
               isInGroup: groupUsersMap.value.has(user.email),
             };
           })
       );
   
       users.value = cloneDeep(serviceAccountsState.service_accounts_users).map(
-        (user: any, index: number) => {
+        (user: any) => {
           return {
-            "#": index + 1,
             email: user.email,
             isInGroup: groupUsersMap.value.has(user.email),
           };
diff --git a/web/src/components/iam/groups/GroupUsers.spec.ts b/web/src/components/iam/groups/GroupUsers.spec.ts
index 2264c34975..a3a9ab470b 100644
--- a/web/src/components/iam/groups/GroupUsers.spec.ts
+++ b/web/src/components/iam/groups/GroupUsers.spec.ts
@@ -392,7 +392,6 @@ describe("GroupUsers Component", () => {
 
       expect(wrapper.vm.users).toHaveLength(3);
       expect(wrapper.vm.users[0]).toEqual({
-        "#": 1,
         email: "user1@example.com",
         isInGroup: true,
         org: "TestOrg1, TestOrg2",
@@ -400,7 +399,6 @@ describe("GroupUsers Component", () => {
         is_external: false,
       });
       expect(wrapper.vm.users[1]).toEqual({
-        "#": 2,
         email: "admin@example.com",
         isInGroup: true,
         org: "TestOrg1",
@@ -408,7 +406,6 @@ describe("GroupUsers Component", () => {
         is_external: false,
       });
       expect(wrapper.vm.users[2]).toEqual({
-        "#": 3,
         email: "root@example.com",
         isInGroup: false,
         org: "",
@@ -442,7 +439,6 @@ describe("GroupUsers Component", () => {
       expect(mockUsersState.users).toHaveLength(3);
       expect(mockUsersState.users[0]).toEqual({
         email: "user1@example.com",
-        "#": 1,
         isInGroup: true,
         org: "TestOrg1, TestOrg2",
         role: "user",
diff --git a/web/src/components/iam/groups/GroupUsers.vue b/web/src/components/iam/groups/GroupUsers.vue
index ec9cd28cb6..ff75d65fc2 100644
--- a/web/src/components/iam/groups/GroupUsers.vue
+++ b/web/src/components/iam/groups/GroupUsers.vue
@@ -18,13 +18,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <div class="flex flex-col h-full">
     <div
       data-test="iam-users-selection-filters"
-      class="flex justify-start px-3 py-2 card-container flex-shrink-0"
+      class="flex justify-start px-3 py-2 bg-card-glass-bg flex-shrink-0"
     >
       <div data-test="iam-users-selection-show-toggle" class="mr-3">
         <div class="flex items-center">
           <span
             data-test="iam-users-selection-show-text"
-            style="font-size: 14px"
+            style="font-size: var(--text-sm)"
           >
             {{ t("iam.groupUsers.show") }}
           </span>
@@ -52,7 +52,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <OSearchInput
           data-test="alert-list-search-input"
           v-model="userSearchKey"
-          class="h-[36px] w-[200px]"
+          class="h-9 w-50"
           :placeholder="t('iam.groupUsers.searchUser')"
         />
       </div>
@@ -78,7 +78,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
         </div>
     </div>
-    <div data-test="iam-users-selection-table" class="flex-1 min-h-0 card-container">
+    <div data-test="iam-users-selection-table" class="flex-1 min-h-0 bg-card-glass-bg">
       <OTable
         :data="rows"
         :columns="columns"
@@ -116,7 +116,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :data-test="`iam-external-user-warning-icon-${row.email}`"
               />
               <template #content>
-                <div style="font-size: 12px; line-height: 1.5;">
+                <div style="font-size: var(--text-xs); line-height: 1.5;">
                   <strong>{{ t("iam.externalUserWarningTitle") }}</strong>
                   <div class="mt-1">{{ t("iam.externalUserWarningMessage") }}</div>
                 </div>
@@ -157,7 +157,7 @@ import { ref, onBeforeMount } from "vue";
 import { useI18n } from "vue-i18n";
 import { useStore } from "vuex";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
-import { TABLE_INDEX_COL_SIZE, COL } from "@/lib/core/Table/OTable.types";
+import { TABLE_CHECKBOX_COL_SIZE, COL } from "@/lib/core/Table/OTable.types";
 // show selected users in the table
 // Add is_selected to the user object
 const props = defineProps({
@@ -235,7 +235,7 @@ const columns = computed<OTableColumnDef[]>(() => {
       header: "",
       accessorKey: "isInGroup",
     cell: (info: any) => info.getValue(),
-    size: TABLE_INDEX_COL_SIZE,
+    size: TABLE_CHECKBOX_COL_SIZE,
       minSize: 32,
       maxSize: 40,
       meta: { align: "center", compactPadding: true },
@@ -353,10 +353,9 @@ const getchOrgUsers = async () => {
     );
 
     usersState.users = cloneDeep(
-      data.map((user: any, index: number) => {
+      data.map((user: any) => {
         return {
           email: user.email,
-          "#": index + 1,
           isInGroup: groupUsersMap.value.has(user.email),
           org: user.orgs?.length > 0 ? user.orgs.map((org:{ org_name: string }) => org.org_name).join(", ") : "", // Set default "N/A" for users with no orgs
           role: user.role,
@@ -366,9 +365,8 @@ const getchOrgUsers = async () => {
     );
 
     users.value = cloneDeep(usersState.users).map(
-      (user: any, index: number) => {
+      (user: any) => {
         return {
-          "#": index + 1,
           email: user.email,
           isInGroup: groupUsersMap.value.has(user.email),
           org: user.org,
diff --git a/web/src/components/iam/organizations/AddUpdateOrganization.schema.ts b/web/src/components/iam/organizations/AddUpdateOrganization.schema.ts
index 039c10ee5a..540b3d9134 100644
--- a/web/src/components/iam/organizations/AddUpdateOrganization.schema.ts
+++ b/web/src/components/iam/organizations/AddUpdateOrganization.schema.ts
@@ -2,12 +2,6 @@
 //
 // Validation schema for AddUpdateOrganization.vue. Built via a factory so the
 // required message stays i18n-driven (pass useI18n's `t`).
-//
-// Restores the full pre-migration validation rule for `name`
-// (`!!v ? isValidOrgName : nameRequired`) per the truthy→Zod inversion: BOTH
-// required (min(1)) AND the alphanumeric/space/underscore regex — not regex-only.
-// `id` is a read-only display field (update mode) and `makeBilledMember` is an
-// optional cloud-only checkbox; both are optional schema entries (R1-strict).
 
 import { z } from "zod";
 
diff --git a/web/src/components/iam/organizations/ListOrganizations.spec.js b/web/src/components/iam/organizations/ListOrganizations.spec.js
index 9b512e38ec..d3b4199c58 100644
--- a/web/src/components/iam/organizations/ListOrganizations.spec.js
+++ b/web/src/components/iam/organizations/ListOrganizations.spec.js
@@ -176,11 +176,18 @@ describe("ListOrganizations", () => {
 
     it("should setup columns correctly for non-cloud mode", () => {
       const columns = wrapper.vm.columns;
-      // #, name, identifier, type, status, actions = 6 columns when isCloud is false
-      expect(columns).toHaveLength(6);
-      expect(columns.map(c => c.id)).toContain("name");
-      expect(columns.map(c => c.id)).toContain("identifier");
-      expect(columns.map(c => c.id)).toContain("status");
+      // The row index is rendered by OTable's `show-index` prop, so there is no
+      // "#" column in the definition. Non-cloud columns are:
+      // name, identifier, type, status, actions = 5
+      expect(columns.map(c => c.id)).toEqual([
+        "name",
+        "identifier",
+        "type",
+        "status",
+        "actions",
+      ]);
+      expect(columns.map(c => c.id)).not.toContain("plan");
+      expect(columns[columns.length - 1].isAction).toBe(true);
     });
 
     it("should add plan column when isCloud is true", async () => {
@@ -207,8 +214,16 @@ describe("ListOrganizations", () => {
       });
 
       await flushPromises();
-      // #, name, identifier, type, status, plan, actions = 7 columns when isCloud is true
-      expect(wrapperWithCloud.vm.columns).toHaveLength(7);
+      // When isCloud is true a "plan" column is inserted before "actions":
+      // name, identifier, type, status, plan, actions = 6
+      expect(wrapperWithCloud.vm.columns.map(c => c.id)).toEqual([
+        "name",
+        "identifier",
+        "type",
+        "status",
+        "plan",
+        "actions",
+      ]);
       wrapperWithCloud.unmount();
 
       config.isCloud = "false";
@@ -621,8 +636,10 @@ describe("ListOrganizations", () => {
       expect(wrapper.vm.organizations).toHaveLength(0);
     });
 
-    it("should format counter for double-digit rows", async () => {
-      // Generate 12 orgs to trigger the counter > 9 branch
+    it("should transform the 10th org row correctly in a large list", async () => {
+      // Generate 12 orgs; the row index is now rendered by OTable's `show-index`
+      // prop, so the transformed data no longer carries a "#" field. Assert the
+      // mapped fields for the 10th item instead.
       const largeOrgs = Array.from({ length: 12 }, (_, i) => ({
         name: `Org ${i + 1}`,
         identifier: `org-${i + 1}`,
@@ -638,8 +655,15 @@ describe("ListOrganizations", () => {
       await flushPromises();
 
       expect(wrapper.vm.organizations).toHaveLength(12);
-      // Counter should be 10 (without leading zero) for the 10th item
-      expect(wrapper.vm.organizations[9]["#"]).toBe(10);
+      // The transformation maps type via convertToTitleCase and plan "0" → "Free".
+      expect(wrapper.vm.organizations[9]).toMatchObject({
+        name: "Org 10",
+        identifier: "org-10",
+        type: "Team",
+        plan: "Free",
+      });
+      // No "#" field is added by the component anymore.
+      expect(wrapper.vm.organizations[9]["#"]).toBeUndefined();
     });
   });
 
diff --git a/web/src/components/iam/organizations/ListOrganizations.vue b/web/src/components/iam/organizations/ListOrganizations.vue
index 89419e75c6..5148db6bdc 100644
--- a/web/src/components/iam/organizations/ListOrganizations.vue
+++ b/web/src/components/iam/organizations/ListOrganizations.vue
@@ -17,15 +17,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <!-- eslint-disable vue/v-on-event-hyphenation -->
 <!-- eslint-disable vue/attribute-hyphenation -->
 <template>
-  <div class="p-0 h-full flex flex-col">
-    <!-- Standard page header: title + actions only. Search moved into the
-         table's own toolbar (built-in global filter). -->
-    <AppPageHeader
-      :title="t('organization.header')"
-      :subtitle="t('iam.listOrganizations.subtitle')"
-      icon="corporate-fare"
-      class="shrink-0 px-4 border-b border-border-default"
-    >
+  <!-- OPageLayout owns the whole skeleton (header + body inset/bleed) — search
+       lives in the table's own toolbar. -->
+  <OPageLayout
+    :title="t('organization.header')"
+    :subtitle="t('iam.listOrganizations.subtitle')"
+    icon="corporate-fare"
+    bleed
+    :scroll="false"
+  >
       <template #actions>
         <OButton
           variant="primary"
@@ -36,9 +36,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           {{ t('organization.add') }}
         </OButton>
       </template>
-    </AppPageHeader>
     <div class="w-full flex-1 min-h-0 overflow-hidden">
-      <div class="card-container h-full">
+      <div class="bg-card-glass-bg h-full">
       <OTable
           :frame="false"
           :data="organizations"
@@ -54,6 +53,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           sorting="client"
           filter-mode="client"
           :default-columns="false"
+          show-index
           :enable-column-resize="true"
           :persist-columns="true"
           table-id="iam-organizations-list"
@@ -97,12 +97,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
           <template #cell-type="{ row }">
             <OTag v-if="row.type" :value="row.type" />
-            <span v-else class="text-text-primary">—</span>
+            <span v-else class="text-text-body">—</span>
           </template>
 
           <template #cell-plan="{ row }">
             <OTag v-if="row.plan && row.plan !== '-'" type="subscriptionPlan" :value="row.plan" />
-            <span v-else class="text-text-primary">—</span>
+            <span v-else class="text-text-body">—</span>
           </template>
 
           <template #cell-status="{ row }">
@@ -118,7 +118,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <!-- Edit is pinned first so it stays column-aligned across every row,
                  regardless of which trailing actions a row shows. It is disabled
                  while the org is being deleted (editing a deleting org is a no-op). -->
-            <div class="tw:flex tw:items-center tw:justify-start tw:gap-1">
+            <div class="flex items-center justify-start gap-1">
               <OButton
                 data-test="organization-name-edit"
                 variant="ghost"
@@ -176,7 +176,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       :org-name="cleanupTargetOrg.name"
       @update:open="showCleanupDialog = $event"
     />
-  </div>
+  </OPageLayout>
 </template>
 
 <script lang="ts">
@@ -200,7 +200,7 @@ import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
 import OTag from "@/lib/core/Badge/OTag.vue";
 import OCodeCell from "@/lib/core/Table/cells/OCodeCell.vue";
 import OBadge from "@/lib/core/Badge/OBadge.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import OSearchInput from "@/lib/forms/SearchInput/OSearchInput.vue";
 import OTable from "@/lib/core/Table/OTable.vue";
@@ -209,7 +209,7 @@ import segment from "@/services/segment_analytics";
 import { convertToTitleCase } from "@/utils/zincutils";
 import config from "@/aws-exports";
 import { toast } from "@/lib/feedback/Toast/useToast";
-import { TABLE_INDEX_COL_SIZE, COL } from "@/lib/core/Table/OTable.types";
+import { COL } from "@/lib/core/Table/OTable.types";
 import { useShortcuts } from "@/lib/vue-shortcut-manager";
 import { isInputFocused } from "@/utils/keyboardShortcuts";
 
@@ -224,7 +224,7 @@ export default defineComponent({
     OTooltip,
     OTag,
     OBadge,
-    AppPageHeader,
+    OPageLayout,
     OIcon,
     OTable,
     OSearchInput,
@@ -249,15 +249,6 @@ export default defineComponent({
       identifier: "",
     });
     const columns: OTableColumnDef[] = [
-      {
-        id: "#",
-        header: "#",
-        accessorKey: "#",
-        size: TABLE_INDEX_COL_SIZE,
-        minSize: 32,
-        maxSize: 40,
-        meta: { align: "left", compactPadding: true, cellClass: 'pl-4!', headerClass: 'pl-4!' },
-      },
       {
         id: "name",
         header: t("organization.name"),
@@ -320,9 +311,8 @@ export default defineComponent({
       size: 112,
       minSize: 96,
       maxSize: 140,
-      // Left-align so the Edit button anchors at the same x-position on every row,
-      // regardless of how many trailing actions (delete / progress) a row shows.
-      meta: { align: "left", actionCount: 3 },
+      // Center-aligned to match every other listing table's actions column.
+      meta: { align: "center", actionCount: 3 },
     });
 
     watch(
@@ -376,7 +366,6 @@ export default defineComponent({
         ? organizationsService.get_admin_org("_meta")
         : organizationsService.list(0, 1000000, "name", false, "");
       request.then((res) => {
-        let counter = 1;
         const billingPlans = {
           "0": "Free",
           "1": "Pay as you go",
@@ -386,7 +375,6 @@ export default defineComponent({
           // Common fields for all configurations
 
           const commonOrganization = {
-            "#": counter <= 9 ? `0${counter++}` : counter++,
             name: data.name,
             identifier: data.identifier,
             type: convertToTitleCase(data.type),
diff --git a/web/src/components/iam/organizations/OrgCleanupTasksDialog.vue b/web/src/components/iam/organizations/OrgCleanupTasksDialog.vue
index a12a217859..5673245e6b 100644
--- a/web/src/components/iam/organizations/OrgCleanupTasksDialog.vue
+++ b/web/src/components/iam/organizations/OrgCleanupTasksDialog.vue
@@ -25,9 +25,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <!-- ODialog has no #body slot; content goes in the default slot -->
     <div>
       <!-- Progress header: overall state chip + bar -->
-      <div v-if="tasks.length" class="tw:mb-4">
-        <div class="tw:flex tw:items-center tw:justify-between tw:mb-2">
-          <span class="tw:text-sm tw:font-medium tw:text-text-primary">
+      <div v-if="tasks.length" class="mb-4">
+        <div class="flex items-center justify-between mb-2">
+          <span class="text-sm font-medium text-text-body">
             {{ t('iam.orgCleanupTasksDialog.stepsComplete', { done: doneCount, total: tasks.length }) }}
           </span>
           <OBadge
@@ -38,7 +38,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               v-if="overallStatus === 'in_progress'"
               name="autorenew"
               size="xs"
-              class="tw:mr-1 tw:animate-spin"
+              class="mr-1 animate-spin"
             />
             {{ overallStatus === 'completed' ? t('iam.orgCleanupTasksDialog.completed') : overallStatus === 'failed' ? t('iam.orgCleanupTasksDialog.failed') : t('iam.orgCleanupTasksDialog.inProgress') }}
           </OBadge>
@@ -47,28 +47,28 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </div>
 
       <!-- Loading -->
-      <div v-if="loading && !tasks.length" class="tw:py-8 tw:text-center tw:text-text-secondary tw:text-sm">
+      <div v-if="loading && !tasks.length" class="py-8 text-center text-text-secondary text-sm">
         {{ t('iam.orgCleanupTasksDialog.loading') }}
       </div>
 
       <!-- Empty -->
-      <div v-else-if="!tasks.length" class="tw:py-8 tw:text-center tw:text-text-secondary tw:text-sm">
+      <div v-else-if="!tasks.length" class="py-8 text-center text-text-secondary text-sm">
         {{ t('iam.orgCleanupTasksDialog.noTasks') }}
       </div>
 
       <!-- Task rows -->
-      <div v-else class="tw:space-y-1.5">
+      <div v-else class="space-y-1.5">
         <template v-for="row in displayRows" :key="row.key">
           <!-- Collapsed group header (e.g. the per-stream delete steps) -->
           <div
             v-if="row.type === 'group'"
-            class="tw:flex tw:flex-col tw:rounded"
+            class="flex flex-col rounded-default"
             :class="rowAccentClass(row.status)"
           >
             <!-- Clickable summary line -->
             <button
               type="button"
-              class="tw:flex tw:items-center tw:gap-3 tw:px-3 tw:py-2 tw:w-full tw:text-left tw:bg-transparent tw:border-0 tw:cursor-pointer"
+              class="flex items-center gap-3 px-3 py-2 w-full text-left bg-transparent border-0 cursor-pointer"
               :aria-expanded="expandedGroups[row.key] ? 'true' : 'false'"
               :data-test="`org-cleanup-group-${row.key}`"
               @click="toggleGroup(row.key)"
@@ -77,7 +77,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <OIcon
                 :name="expandedGroups[row.key] ? 'expand_more' : 'chevron_right'"
                 size="sm"
-                class="tw:text-text-secondary"
+                class="text-text-secondary"
               />
 
               <!-- Group status icon -->
@@ -85,66 +85,66 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :name="statusIcon(row.status)"
                 size="sm"
                 :class="{
-                  'tw:text-success': row.status === 'done',
-                  'tw:text-primary tw:animate-spin': row.status === 'running',
-                  'tw:text-error': row.status === 'failed',
-                  'tw:text-text-secondary': row.status === 'pending',
+                  'text-success': row.status === 'done',
+                  'text-primary animate-spin': row.status === 'running',
+                  'text-error': row.status === 'failed',
+                  'text-text-secondary': row.status === 'pending',
                 }"
               />
 
               <!-- Group label + child count -->
-              <span class="tw:flex-1 tw:font-medium tw:text-sm tw:text-text-primary tw:min-w-0 tw:truncate">
+              <span class="flex-1 font-medium text-sm text-text-body min-w-0 truncate">
                 {{ row.label }}
-                <span class="tw:text-text-secondary tw:font-normal">({{ row.children.length }})</span>
+                <span class="text-text-secondary font-normal">({{ row.children.length }})</span>
               </span>
 
               <!-- Aggregate progress e.g. "8/10" -->
-              <span class="tw:text-text-secondary tw:text-xs tabular-nums tw:whitespace-nowrap">
+              <span class="text-text-secondary text-xs tabular-nums whitespace-nowrap">
                 {{ row.doneCount }}/{{ row.children.length }}
               </span>
 
               <!-- Group status badge -->
-              <OBadge :variant="badgeVariant(row.status)" size="sm" class="tw:whitespace-nowrap">
+              <OBadge :variant="badgeVariant(row.status)" size="sm" class="whitespace-nowrap">
                 {{ row.status }}
               </OBadge>
             </button>
 
             <!-- Expanded children -->
-            <div v-if="expandedGroups[row.key]" class="tw:px-3 tw:pb-2 tw:space-y-1">
+            <div v-if="expandedGroups[row.key]" class="px-3 pb-2 space-y-1">
               <div
                 v-for="child in row.children"
                 :key="child.id"
-                class="tw:flex tw:flex-col tw:gap-1 tw:pl-6 tw:pr-2 tw:py-1.5 tw:rounded"
+                class="flex flex-col gap-1 pl-6 pr-2 py-1.5 rounded-default"
                 :class="rowAccentClass(child.status)"
               >
-                <div class="tw:flex tw:items-center tw:gap-3">
+                <div class="flex items-center gap-3">
                   <OIcon
                     :name="statusIcon(child.status)"
                     size="xs"
                     :class="{
-                      'tw:text-success': child.status === 'done',
-                      'tw:text-primary tw:animate-spin': child.status === 'running',
-                      'tw:text-error': child.status === 'failed',
-                      'tw:text-text-secondary': child.status === 'pending',
+                      'text-success': child.status === 'done',
+                      'text-primary animate-spin': child.status === 'running',
+                      'text-error': child.status === 'failed',
+                      'text-text-secondary': child.status === 'pending',
                     }"
                   />
-                  <span class="tw:flex-1 tw:text-sm tw:text-text-primary tw:min-w-0 tw:truncate">
+                  <span class="flex-1 text-sm text-text-body min-w-0 truncate">
                     {{ streamChildLabel(child.step) }}
                   </span>
                   <span
                     v-if="child.attempts > 0"
-                    class="tw:text-text-secondary tw:text-xs tabular-nums tw:whitespace-nowrap"
+                    class="text-text-secondary text-xs tabular-nums whitespace-nowrap"
                     :title="t('iam.orgCleanupTasksDialog.attempts', { n: child.attempts })"
                   >
                     {{ child.attempts }}×
                   </span>
-                  <OBadge :variant="badgeVariant(child.status)" size="sm" class="tw:whitespace-nowrap">
+                  <OBadge :variant="badgeVariant(child.status)" size="sm" class="whitespace-nowrap">
                     {{ child.status }}
                   </OBadge>
                 </div>
                 <div
                   v-if="child.last_error"
-                  class="tw:ml-6 tw:text-xs tw:text-error tw:bg-surface-secondary tw:rounded tw:px-2 tw:py-1 tw:break-words tw:whitespace-pre-wrap"
+                  class="ml-6 text-xs text-error bg-surface-secondary rounded-default px-2 py-1 break-words whitespace-pre-wrap"
                 >
                   {{ child.last_error }}
                 </div>
@@ -155,38 +155,38 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- Regular single-step row -->
           <div
             v-else
-            class="tw:flex tw:flex-col tw:gap-1 tw:px-3 tw:py-2 tw:rounded"
+            class="flex flex-col gap-1 px-3 py-2 rounded-default"
             :class="rowAccentClass(row.task.status)"
           >
-            <div class="tw:flex tw:items-center tw:gap-3">
+            <div class="flex items-center gap-3">
               <!-- Status icon -->
               <OIcon
                 :name="statusIcon(row.task.status)"
                 size="sm"
                 :class="{
-                  'tw:text-success': row.task.status === 'done',
-                  'tw:text-primary tw:animate-spin': row.task.status === 'running',
-                  'tw:text-error': row.task.status === 'failed',
-                  'tw:text-text-secondary': row.task.status === 'pending',
+                  'text-success': row.task.status === 'done',
+                  'text-primary animate-spin': row.task.status === 'running',
+                  'text-error': row.task.status === 'failed',
+                  'text-text-secondary': row.task.status === 'pending',
                 }"
               />
 
               <!-- Step name -->
-              <span class="tw:flex-1 tw:font-medium tw:text-sm tw:text-text-primary tw:min-w-0 tw:truncate">
+              <span class="flex-1 font-medium text-sm text-text-body min-w-0 truncate">
                 {{ formatStepName(row.task.step) }}
               </span>
 
               <!-- Attempts (only when relevant) -->
               <span
                 v-if="row.task.attempts > 0"
-                class="tw:text-text-secondary tw:text-xs tabular-nums tw:whitespace-nowrap"
+                class="text-text-secondary text-xs tabular-nums whitespace-nowrap"
                 :title="t('iam.orgCleanupTasksDialog.attempts', { n: row.task.attempts })"
               >
                 {{ row.task.attempts }}×
               </span>
 
               <!-- Status badge -->
-              <OBadge :variant="badgeVariant(row.task.status)" size="sm" class="tw:whitespace-nowrap">
+              <OBadge :variant="badgeVariant(row.task.status)" size="sm" class="whitespace-nowrap">
                 {{ row.task.status }}
               </OBadge>
             </div>
@@ -194,7 +194,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <!-- Error message — full, wrapping, contained (no cut-off) -->
             <div
               v-if="row.task.last_error"
-              class="tw:ml-8 tw:text-xs tw:text-error tw:bg-surface-secondary tw:rounded tw:px-2 tw:py-1 tw:break-words tw:whitespace-pre-wrap"
+              class="ml-8 text-xs text-error bg-surface-secondary rounded-default px-2 py-1 break-words whitespace-pre-wrap"
             >
               {{ row.task.last_error }}
             </div>
@@ -205,14 +205,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <!-- Refresh hint while in progress -->
       <div
         v-if="tasks.length && overallStatus === 'in_progress'"
-        class="tw:mt-3 tw:text-xs tw:text-text-secondary tw:flex tw:items-center tw:gap-1.5"
+        class="mt-3 text-xs text-text-secondary flex items-center gap-1.5"
       >
-        <OIcon name="autorenew" size="xs" class="tw:animate-spin" />
+        <OIcon name="autorenew" size="xs" class="animate-spin" />
         <span>{{ t('iam.orgCleanupTasksDialog.refreshingEvery5s') }}</span>
       </div>
       <div
         v-else-if="tasks.length && overallStatus === 'failed'"
-        class="tw:mt-3 tw:text-xs tw:text-error"
+        class="mt-3 text-xs text-error"
       >
         {{ t('iam.orgCleanupTasksDialog.stepsFailedPermanently', { n: failedCount }) }}
       </div>
@@ -363,13 +363,13 @@ export default defineComponent({
     const rowAccentClass = (status: string): string => {
       switch (status) {
         case "done":
-          return "tw:border tw:border-border-default";
+          return "border border-border-default";
         case "running":
-          return "tw:border tw:border-border-default tw:bg-surface-secondary";
+          return "border border-border-default bg-surface-secondary";
         case "failed":
-          return "tw:border tw:border-error";
+          return "border border-error";
         default:
-          return "tw:border tw:border-border-default";
+          return "border border-border-default";
       }
     };
 
diff --git a/web/src/components/iam/quota/Quota.vue b/web/src/components/iam/quota/Quota.vue
index f63135f90a..33614fa41d 100644
--- a/web/src/components/iam/quota/Quota.vue
+++ b/web/src/components/iam/quota/Quota.vue
@@ -14,23 +14,19 @@ You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 -->
-<!-- TODO: we need to completely remove the store.state.theme based styling on this page as we have moved it to central place app.scss -->
+<!-- TODO: remove the store.state.theme based styling on this page; theming is centralised in app.scss -->
 <template>
-  <div class="quota-page text-left h-full flex flex-col"
-    :class="
-      store.state.theme === 'dark' ? 'dark-theme-page' : 'light-theme-page'
-    "
+  <OPageLayout
+    class="quota-page text-left"
+    :class="isDark ? 'dark-theme-page' : 'light-theme-page'"
+    :title="t('quota.header')"
+    title-data-test="user-title-text"
+    :subtitle="t('iam.quotaPage.subtitle')"
+    icon="speed"
+    bleed
   >
-    <!-- Standard page header: title + icon + subtitle, matching the other IAM pages. -->
-    <AppPageHeader
-      :title="t('quota.header')"
-      title-data-test="user-title-text"
-      :subtitle="t('iam.quotaPage.subtitle')"
-      icon="speed"
-      class="shrink-0 px-4 border-b border-border-default"
-    />
     <div :style="{ marginTop: 0 }" class="app-table-container flex flex-col flex-1 min-h-0">
-      <div class="card-container mb-[0.625rem] mt-2.5">
+      <div class="bg-card-glass-bg mb-2.5 mt-2.5">
         <div class="px-3 py-2">
           <div class="flex items-center justify-between w-full mb-2">
             <div class="flex items-center">
@@ -40,12 +36,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :options="organizationToDisplay"
                 searchable
                 :placeholder="t('iam.quotaPage.selectOrganization')"
-                class="py-2 no-case mr-3 w-[300px] input-width org-select"
+                class="py-2 no-case mr-3 w-75 input-width org-select"
                 labelKey="label"
                 valueKey="value"
                 @update:model-value="handleOrgSelect"
               />
-              <div class="app-tabs-container h-[36px] w-fit">
+              <div class="app-tabs-container h-9 w-fit">
                 <app-tabs
                   data-test="quota-tabs"
                   class="tabs-selection-container"
@@ -66,7 +62,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               >
                 {{ t('iam.quotaPage.editQuota') }}
                 <template #icon-right>
-                  <OIcon name="edit" size="sm" style="font-weight: 200; opacity: 0.7" />
+                  <OIcon name="edit" size="sm" class="opacity-70" style="font-weight: 200" />
                 </template>
               </OButton>
             </div>
@@ -95,8 +91,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 searchable
                 clearable
                 :placeholder="t('iam.quotaPage.selectApiCategory')"
-                style="padding: 0px"
-                class="no-case mr-3 w-[300px] input-width ml-3 category-select"
+                class="no-case mr-3 w-75 input-width ml-3 category-select p-0"
                 labelKey="label"
                 valueKey="value"
                 @update:model-value="handleApiCategorySelect"
@@ -106,7 +101,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               v-if="selectedOrganization"
               class="flex items-center float-right ml-auto"
             >
-              <div class="app-tabs-container h-[36px] w-fit mr-3">
+              <div class="app-tabs-container h-9 w-fit mr-3">
                 <app-tabs
                   data-test="time-unit-tabs"
                   class="tabs-selection-container"
@@ -115,7 +110,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   @update:active-tab="updateTimeUnit"
                 />
               </div>
-              <div class="app-tabs-container h-[36px] w-fit">
+              <div class="app-tabs-container h-9 w-fit">
                 <app-tabs
                   data-test="table-json-type-selection-tabs"
                   class="tabs-selection-container"
@@ -129,7 +124,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
       </div>
       <!-- this table for api limits -->
-      <div v-if="activeTab == 'api-limits' && activeType == 'table'" class="card-container flex-1 min-h-0 overflow-hidden">
+      <div v-if="activeTab == 'api-limits' && activeType == 'table'" class="bg-card-glass-bg flex-1 min-h-0 overflow-hidden">
       <OTable
         :data="apiLimitsRows"
         :columns="generateColumns()"
@@ -157,19 +152,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </template>
         <template #bottom />
         <template v-for="col in apiLimitCrudColumnIds" :key="col" #[`cell-${col}`]="{ row, value }">
-          <div v-if="editTable" :style="{ backgroundColor: editTable ? (store.state.theme === 'dark' ? '#212121' : '#f1f1ee') : 'transparent' }">
+          <div v-if="editTable" class="bg-surface-subtle">
             <div
               v-if="value != '-'"
               contenteditable="true"
               debounce="500"
               :class="{
                 'editable-cell': editTable,
-                'px-[10px] py-0': editTable && store.state.theme !== 'dark',
-                'bg-[#f1f1ee]': editTable && store.state.theme !== 'dark',
-                'px-[10px]': editTable && store.state.theme === 'dark',
+                'px-2.5': editTable,
+                'py-0': editTable && !isDark,
                 'edited-input': isEdited(row.module_name, col),
-                'bg-[#bfc3f4] text-black font-medium': isEdited(row.module_name, col) && store.state.theme !== 'dark',
-                'bg-[#f6f6f6] text-black font-medium [padding:0px!important]': isEdited(row.module_name, col) && store.state.theme === 'dark',
+                'bg-table-row-selected-bg text-table-highlight-text font-medium': isEdited(row.module_name, col),
+                'p-0!': isEdited(row.module_name, col) && isDark,
               }"
               @input="(event: any) => handleInputChange('', row.module_name, value, col, event.target.innerText)"
               @keypress="restrictToNumbers"
@@ -187,7 +181,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </div>
 
       <div
-        class="card-container pb-[0.625rem] flex-1 min-h-0"
+        class="bg-card-glass-bg pb-2.5 flex-1 min-h-0"
         v-if="activeTab == 'api-limits' && activeType == 'json'"
       >
         <query-editor
@@ -197,12 +191,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :debounceTime="300"
           v-model:query="jsonStrToDisplay"
           language="json"
-          style="height: 100%"
+          class="h-full"
           :read-only="!editTable"
         />
       </div>
       <!-- this table for role limits -->
-       <div v-if="activeTab == 'role-limits' && activeType == 'table'"  class="card-container flex-1 min-h-0 overflow-hidden">
+       <div v-if="activeTab == 'role-limits' && activeType == 'table'"  class="bg-card-glass-bg flex-1 min-h-0 overflow-hidden">
         <OTable
           :data="rolesLimitRows"
           :columns="roleLimitsColumns"
@@ -236,15 +230,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </template>
           <template #expansion="{ row }">
             <template v-for="(moduleRow, index) in filteredRoleLevelModuleRows" :key="index">
-              <div v-if="!editTable" class="flex items-center px-6 py-1 text-sm border-b border-[var(--color-table-row-divider)]">
-                <span class="w-[200px]">{{ moduleRow.module_name }}</span>
+              <div v-if="!editTable" class="flex items-center px-6 py-1 text-sm border-b border-table-row-divider">
+                <span class="w-50">{{ moduleRow.module_name }}</span>
                 <span v-for="col in roleLimitCrudColumnIds" :key="col" class="flex-1 text-center">
                   <template v-if="moduleRow[col] == '-'">-</template>
                   <template v-else>{{ moduleRow[col] }}</template>
                 </span>
               </div>
-              <div v-else class="flex items-center px-6 py-1 text-sm border-b border-[var(--color-table-row-divider)]">
-                <span class="w-[200px]">{{ moduleRow.module_name }}</span>
+              <div v-else class="flex items-center px-6 py-1 text-sm border-b border-table-row-divider">
+                <span class="w-50">{{ moduleRow.module_name }}</span>
                 <span v-for="col in roleLimitCrudColumnIds" :key="col" class="flex-1 text-center">
                   <template v-if="moduleRow[col] == '-'">-</template>
                   <div v-else
@@ -252,12 +246,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     debounce="500"
                     :class="{
                       'editable-cell': true,
-                      'px-[10px] py-0': store.state.theme !== 'dark',
-                      'bg-[#f1f1ee]': store.state.theme !== 'dark',
-                      'px-[10px]': store.state.theme === 'dark',
+                      'px-2.5': true,
+                      'py-0': !isDark,
+                      'bg-surface-subtle': !isEdited(moduleRow.module_name, col),
                       'edited-input': isEdited(moduleRow.module_name, col),
-                      'bg-[#bfc3f4] text-black font-medium': isEdited(moduleRow.module_name, col) && store.state.theme !== 'dark',
-                      'bg-[#f6f6f6] text-black font-medium [padding:0px!important]': isEdited(moduleRow.module_name, col) && store.state.theme === 'dark',
+                      'bg-table-row-selected-bg text-table-highlight-text font-medium': isEdited(moduleRow.module_name, col),
+                      'p-0!': isEdited(moduleRow.module_name, col) && isDark,
                     }"
                     @input="(event: any) => handleInputChange(row.role_name, moduleRow.module_name, moduleRow[col], col, event.target.innerText)"
                     @keypress="restrictToNumbers"
@@ -276,7 +270,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </OTable>
       </div>
       <div
-        class="card-container flex-1 min-h-0"
+        class="bg-card-glass-bg flex-1 min-h-0"
         v-if="activeTab == 'role-limits' && activeType == 'json'"
       >
         <query-editor
@@ -286,7 +280,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :debounceTime="300"
           v-model:query="jsonStrToDisplay"
           language="json"
-          style="height: 100%"
+          class="h-full"
           :read-only="!editTable"
         />
       </div>
@@ -316,8 +310,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </div>
 
       <div
-        class="flex justify-end w-full ml-auto floating-buttons sticky bottom-0 top-0 z-[100] pr-3 py-2 gap-2 border-t border-border-default"
-        :class="store.state.theme === 'dark' ? 'bg-[var(--o2-primary-background)]' : 'bg-white'"
+        class="flex justify-end w-full ml-auto sticky bottom-0 top-0 z-1 mt-auto pr-3 py-2 gap-2 border-t border-border-default bg-surface-base"
         v-if="editTable && activeType == 'table'"
       >
         <OButton
@@ -337,8 +330,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </OButton>
       </div>
       <div
-        class="flex justify-end w-full ml-auto floating-buttons sticky bottom-0 top-0 z-[100] pr-3 mt-3 gap-2 border-t border-border-default"
-        :class="store.state.theme === 'dark' ? 'bg-[var(--o2-primary-background)]' : 'bg-white'"
+        class="flex justify-end w-full ml-auto sticky bottom-0 top-0 z-1 mt-auto pr-3 gap-2 border-t border-border-default bg-surface-base"
         v-if="editTable && activeType == 'json'"
       >
         <OButton
@@ -381,7 +373,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       @update:cancel="discardChangesTypeSwitch"
       v-model="showConfirmDialogTypeSwitch"
     />
-  </div>
+  </OPageLayout>
 </template>
 
 <script lang="ts">
@@ -405,9 +397,10 @@ import OTable from "@/lib/core/Table/OTable.vue";
 import type { OTableColumnDef } from "@/lib/core/Table/OTable.types";
 import { COL } from "@/lib/core/Table/OTable.types";
 import { useStore } from "vuex";
+import { useTheme } from "@/composables/useTheme";
 import organizationsService from "@/services/organizations";
 import AppTabs from "@/components/common/AppTabs.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import { getRoles } from "@/services/iam";
 import ratelimitService from "@/services/rate_limit";
 import { useRouter } from "vue-router";
@@ -426,7 +419,7 @@ export default defineComponent({
     OSelect,
     OSearchInput,
     AppTabs,
-    AppPageHeader,
+    OPageLayout,
     ConfirmDialog,
     QueryEditor: defineAsyncComponent(
       () => import("@/components/CodeQueryEditor.vue"),
@@ -440,6 +433,7 @@ export default defineComponent({
     const { t } = useI18n();
     const selectedOrganization = ref<any>(null);
     const store = useStore();
+    const { isDark } = useTheme();
     const organizations = ref<any[]>([]);
     const isOrgLoading = ref<boolean>(false);
     const resultTotal = ref<number>(0);
@@ -533,7 +527,7 @@ export default defineComponent({
           hideable: true,
           size: COL.name,
           minSize: 160,
-          meta: { align: "left", flex: true, cellClass: 'pl-4!', headerClass: 'pl-4!' },
+          meta: { align: "left", flex: true },
         },
         {
           id: "list",
@@ -1536,6 +1530,7 @@ export default defineComponent({
     };
 
     return {
+      isDark,
       t,
       selectedOrganization,
       organizations,
@@ -1636,18 +1631,15 @@ export default defineComponent({
 });
 </script>
 
-<style>
-.quota-page {
-  input[type="number"]::-webkit-outer-spin-button,
-  input[type="number"]::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
+<style scoped>
+/* keep(lib-override): hide number-input spinners + center non-first OTable sort-trigger headers (child DOM) */
+.quota-page :deep(input[type="number"]::-webkit-outer-spin-button),
+.quota-page :deep(input[type="number"]::-webkit-inner-spin-button) {
+  -webkit-appearance: none;
+  margin: 0;
 }
 
-/* Center sortable column headers for all non-first columns in the quota table */
-.quota-page th:not([data-test="o2-table-th-module_name"]):not([data-test="o2-table-th-role_name"]) [data-test="o2-table-th-sort-trigger"] {
+.quota-page :deep(th:not([data-test="o2-table-th-module_name"]):not([data-test="o2-table-th-role_name"]) [data-test="o2-table-th-sort-trigger"]) {
   justify-content: center;
 }
-
 </style>
diff --git a/web/src/components/iam/roles/AddRole.schema.ts b/web/src/components/iam/roles/AddRole.schema.ts
index 01aee76b85..b1ebf17984 100644
--- a/web/src/components/iam/roles/AddRole.schema.ts
+++ b/web/src/components/iam/roles/AddRole.schema.ts
@@ -2,11 +2,6 @@
 //
 // Validation schema for AddRole.vue. Built via a factory so the required message
 // stays i18n-driven (pass useI18n's `t`).
-//
-// Restores the full pre-migration validation rule for `name`
-// (`!!v ? isValidRoleName : nameRequired`) per the truthy→Zod inversion: it is
-// BOTH required (min(1)) AND the alphanumeric/underscore regex — not regex-only —
-// plus the maxlength(100) the current code carried.
 
 import { z } from "zod";
 
@@ -22,8 +17,8 @@ export const makeAddRoleSchema = (
       .min(1, t("iam.role.name.required"))
       .regex(roleNameRegex, t("iam.role.name.invalidChars"))
       .max(100, t("common.nameMaxLength", { max: 100 })),
-    // "Start from" preset (from #12460): "custom" = empty role; "readonly" =
-    // seed read-only perms once on EditRole. Form-owned, defaults to "custom".
+    // "Start from" preset: "custom" = empty role; "readonly" = seed read-only
+    // perms once on EditRole. Defaults to "custom".
     startFrom: z.enum(["custom", "readonly"]).default("custom"),
   });
 
diff --git a/web/src/components/iam/roles/AppRoles.spec.ts b/web/src/components/iam/roles/AppRoles.spec.ts
index 0b44637972..ebcc655a69 100644
--- a/web/src/components/iam/roles/AppRoles.spec.ts
+++ b/web/src/components/iam/roles/AppRoles.spec.ts
@@ -65,7 +65,7 @@ afterEach(() => {
 describe('AppRoles - rendering', () => {
   it('renders the section title', async () => {
     const wrapper = await mountAppRoles();
-    // Title now lives in the standard AppPageHeader (row 1).
+    // Title now lives in the standard OPageHeader (row 1).
     expect(wrapper.find('.app-page-header h1').text()).toContain('Roles');
   });
 
@@ -109,13 +109,7 @@ describe('AppRoles - setupRoles', () => {
     expect(rows[2]).toHaveProperty('role_name', 'Editor');
   });
 
-  it('formats row numbers with leading zeros for first 9', async () => {
-    const wrapper = await mountAppRoles();
-    const rows = (wrapper.vm as any).rows;
-    expect(rows[0]['#']).toBe('01');
-    expect(rows[1]['#']).toBe('02');
-    expect(rows[2]['#']).toBe('03');
-  });
+  // Row numbering moved to OTable's built-in show-index (no '#' data field).
 
   it('handles getRoles error gracefully', async () => {
     vi.mocked(getRoles).mockRejectedValueOnce(new Error('network error'));
@@ -423,11 +417,7 @@ describe('AppRoles - rows data', () => {
     expect((wrapper.vm as any).rows[0].role_name).toBe('Admin');
   });
 
-  it('includes row numbering in "#" field', async () => {
-    const wrapper = await mountAppRoles();
-    expect((wrapper.vm as any).rows[0]['#']).toBe('01');
-    expect((wrapper.vm as any).rows[1]['#']).toBe('02');
-  });
+  // Row numbering moved to OTable's built-in show-index (no '#' data field).
 });
 
 // 12. RoleTable integration
@@ -446,7 +436,7 @@ describe('AppRoles - RoleTable integration', () => {
 });
 
 // 13. ODialog/ODrawer Migration
-// After migration the q-dialog wrapper around AddRole was removed; AddRole
+// After migration the dialog wrapper around AddRole was removed; AddRole
 // now owns its own drawer/dialog and accepts v-model:open from the parent.
 // These tests verify the new contract.
 describe('AppRoles - ODialog/ODrawer Migration', () => {
@@ -549,11 +539,4 @@ describe('AppRoles - ODialog/ODrawer Migration', () => {
     expect(getRoles).toHaveBeenCalledWith(store.state.selectedOrganization.identifier);
   });
 
-  it('does not render AddRole inside a q-dialog wrapper (post-migration)', async () => {
-    const wrapper = await mountAppRolesWithAddRoleStub();
-    // The legacy template wrapped AddRole in <q-dialog>. After migration AddRole
-    // owns its own dialog, so no q-dialog wrapper should be rendered around it
-    // by the parent template.
-    expect(wrapper.find('.q-dialog').exists()).toBe(false);
-  });
 });
diff --git a/web/src/components/iam/roles/AppRoles.vue b/web/src/components/iam/roles/AppRoles.vue
index 88f8f477ec..402a99c46e 100644
--- a/web/src/components/iam/roles/AppRoles.vue
+++ b/web/src/components/iam/roles/AppRoles.vue
@@ -15,14 +15,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="p-0 h-full flex flex-col">
-    <!-- Standard page header: title + actions only. Search moved into the
-         table's own toolbar (built-in global filter). -->
-    <AppPageHeader
+  <OPageLayout
       :title="t('iam.roles')"
-      icon="shield"
-      class="shrink-0 px-4 border-b border-border-default"
-    >
+      icon="shield" bleed>
       <template #subtitle>
         <span data-test="iam-roles-subtitle">
           {{ t('iam.rolesPage.subtitle') }}
@@ -38,9 +33,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           {{ t('iam.addRole') }}
         </OButton>
       </template>
-    </AppPageHeader>
     <div class="w-full flex-1 min-h-0 overflow-hidden">
-      <div class="card-container h-full">
+      <div class="bg-card-glass-bg h-full">
         <RoleTable
           data-test="iam-roles-table-section"
           :data="rows"
@@ -68,7 +62,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </RoleTable>
       </div>
     </div>
-  </div>
+  </OPageLayout>
   <AddRole
     v-model:open="showAddGroup"
     @added:role="onRoleAdded"
@@ -96,7 +90,7 @@ import { onBeforeMount, ref } from "vue";
 import AddRole from "./AddRole.vue";
 import OButton from "@/lib/core/Button/OButton.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import { useI18n } from "vue-i18n";
 import RoleTable from "./RoleTable.vue";
 import { useRouter } from "vue-router";
@@ -144,11 +138,7 @@ onBeforeMount(() => {
 });
 
 const updateTable = () => {
-   let counter = 1;
-  rows.value = rolesState.roles.map((role: { role_name: string }, index: number) => ({
-      ...role,
-      "#": counter <= 9 ? `0${counter++}` : counter++,
-    }));
+  rows.value = rolesState.roles;
 };
 
 const addRole = () => {
diff --git a/web/src/components/iam/roles/EditRole.spec.js b/web/src/components/iam/roles/EditRole.spec.js
index 8cf8c7d05b..c4c0560281 100644
--- a/web/src/components/iam/roles/EditRole.spec.js
+++ b/web/src/components/iam/roles/EditRole.spec.js
@@ -193,7 +193,7 @@ describe('EditRole - basic rendering', () => {
   it('renders page and title with role name', async () => {
     const wrapper = await mountEditRole();
     expect(wrapper.find('[data-test="edit-role-page"]').exists()).toBe(true);
-    // Role name now renders as the AppPageHeader title (row 1).
+    // Role name now renders as the OPageHeader title (row 1).
     expect(wrapper.find('.app-page-header h1').text()).toContain('Admin');
   });
 
diff --git a/web/src/components/iam/roles/EditRole.vue b/web/src/components/iam/roles/EditRole.vue
index 35a8ed7c41..f84063a7f6 100644
--- a/web/src/components/iam/roles/EditRole.vue
+++ b/web/src/components/iam/roles/EditRole.vue
@@ -15,19 +15,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="flex flex-col pb-[0.625rem] h-full" data-test="edit-role-page">
-    <!-- Sub-page header: the listing's icon becomes a Back button (→ Roles). -->
-    <AppPageHeader
-      :title="editingRole"
-      :back="{ label: t('iam.roles'), onClick: cancelPermissionsUpdate }"
-      class="shrink-0 px-4 border-b border-border-default"
-    />
+  <OPageLayout
+    class="pb-2.5"
+    data-test="edit-role-page"
+    :title="editingRole"
+    :back="{ label: t('iam.roles'), onClick: cancelPermissionsUpdate }"
+    bleed
+  >
     <!-- TODO OK : Add button to delete role in toolbar -->
     <div
       data-test="edit-role-title"
       class="shrink-0"
     >
-    <div class="card-container py-2 flex flex-col">
+    <div class="bg-card-glass-bg py-2 flex flex-col">
            <AppTabs
               data-test="edit-role-tabs"
               :tabs="tabs"
@@ -62,17 +62,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <div
           v-show="activeTab === 'permissions'"
           data-test="edit-role-permissions-section"
-          class="card-container flex flex-col h-full"
+          class="bg-card-glass-bg flex flex-col h-full"
         >
           <div
-            class="flex justify-between items-center flex-shrink-0"
-            :class="store.state.theme === 'dark' ? 'bg-[var(--o2-bg-card-dark,#1a1a1a)]' : 'bg-white'"
+            class="flex justify-between items-center flex-shrink-0 bg-surface-base"
           >
             <div
               v-show="permissionsUiType === 'table'"
               data-test="edit-role-permissions-filters"
-              class="flex items-start px-3 py-2 justify-start gap-3"
-              style="position: sticky; top: 0px; z-index: 2"
+              class="flex items-start px-3 py-2 justify-start gap-3 sticky"
+              style="top: 0px; z-index: 2"
             >
               <div
                 data-test="edit-role-permissions-show-toggle"
@@ -80,7 +79,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               >
                 <span
                   data-test="edit-role-permissions-show-text"
-                  style="font-size: 14px"
+                  style="font-size: var(--text-sm)"
                 >
                   {{ t('iam.editRole.show') }}
                 </span>
@@ -104,8 +103,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <OInput
                   v-model="filter.value"
                   :debounce="500"
-                  class="no-border o2-search-input h-[36px] w-[200px]"
-                  :class="store.state.theme === 'dark' ? 'o2-search-input-dark' : 'o2-search-input-light'"
+                  class="no-border o2-search-input h-9 w-50"
                   :placeholder="t('iam.editRole.searchPermissions')"
                   @update:model-value="onResourceChange"
                 >
@@ -130,7 +128,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <div class="flex items-center gap-2">
               <span
                 data-test="edit-role-permissions-count"
-                class="font-bold text-[14px]"
+                class="font-bold text-sm"
               >
                 {{ t('iam.editRole.permissionsCount', { count: selectedPermissionsHash.size }) }}
               </span>
@@ -155,7 +153,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
           <div
             data-test="edit-role-permissions-table-section"
-            class="el-border-radius flex-1 min-h-0 overflow-y-auto"
+            class="rounded-default flex-1 min-h-0 overflow-y-auto"
           >
             <div v-show="permissionsUiType === 'table'">
               <permissions-table
@@ -206,7 +204,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </div>
                 <div v-if="isHelpOpen" style="width: 350px" class="p-2">
                   <div class="flex justify-between items-center px-2">
-                    <div style="font-size: 16px">{{ t('iam.editRole.quickReference') }}</div>
+                    <div style="font-size: var(--text-base)">{{ t('iam.editRole.quickReference') }}</div>
                     <OIcon
                       class="cursor-pointer"
                       name="close"
@@ -220,7 +218,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <div>
                       {{ t('iam.editRole.jsonConfigHelp') }}
                     </div>
-                    <pre style="font-size: 12px">
+                    <pre style="font-size: var(--text-xs)">
 {
   "object": "MainResource:ChildResource",
   "permission": "AccessType"
@@ -239,10 +237,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
       </div>
       <div
-        class="flex justify-end w-full flex-shrink-0 mt-[0.625rem]"
+        class="flex justify-end w-full flex-shrink-0 mt-2.5"
         style="z-index: 2"
       >
-      <div class="card-container w-full py-2 px-3 justify-end flex gap-2 border-t border-border-default">
+      <div class="bg-card-glass-bg w-full py-2 px-3 justify-end flex gap-2 border-t border-border-default">
         <OButton
           data-test="edit-role-cancel-btn"
           variant="outline"
@@ -262,7 +260,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </div>
 
       </div>
-  </div>
+  </OPageLayout>
   <ConfirmDialog
     :title="t('iam.editRole.leaveConfirm.title')"
     :message="t('iam.editRole.leaveConfirm.message')"
@@ -311,7 +309,7 @@ import useStreams from "@/composables/useStreams";
 import { getGroups, getRoles } from "@/services/iam";
 import GroupUsers from "../groups/GroupUsers.vue";
 import AppTabs from "@/components/common/AppTabs.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import GroupServiceAccounts from "../groups/GroupServiceAccounts.vue";
 import cipherKeysService from "@/services/cipher_keys";
 import RePatternsService from "@/services/regex_pattern";
@@ -715,8 +713,8 @@ const modifyResourcePermissions = (resource: Resource) => {
 };
 
 const getResourcePermissions = () => {
-  // Single request returns the role's permissions across all resource types,
-  // replacing one request per resource. Backend returns a flat Permission[].
+  // Single request returns the role's permissions across all resource types.
+  // Backend returns a flat Permission[].
   return new Promise((resolve, reject) => {
     getAllRolePermissions({
       role_name: editingRole.value,
diff --git a/web/src/components/iam/roles/EntityPermissionTable.spec.ts b/web/src/components/iam/roles/EntityPermissionTable.spec.ts
deleted file mode 100644
index caa71648d3..0000000000
--- a/web/src/components/iam/roles/EntityPermissionTable.spec.ts
+++ /dev/null
@@ -1,217 +0,0 @@
-import { describe, it, expect, afterEach, vi } from 'vitest';
-import { mount, flushPromises } from '@vue/test-utils';
-import i18n from '@/locales';
-import store from '@/test/unit/helpers/store';
-
-
-vi.mock('@/aws-exports', () => ({
-  default: { isCloud: 'false', isEnterprise: 'true' },
-}));
-
-import EntityPermissionTable from '@/components/iam/roles/EntityPermissionTable.vue';
-
-const makePermission = (val = false) => ({
-  AllowAll: { show: true, value: val },
-  AllowList: { show: true, value: val },
-  AllowGet: { show: true, value: val },
-  AllowDelete: { show: true, value: val },
-  AllowPost: { show: true, value: val },
-  AllowPut: { show: true, value: val },
-});
-
-const makeEntity = (name: string, withPerm = false) => ({
-  name,
-  type: 'stream',
-  permission: makePermission(withPerm),
-});
-
-function makeResource(expand = true, showSelected = false) {
-  return {
-    expand,
-    entities: [
-      makeEntity('app-logs', false),
-      makeEntity('sys-logs', true),
-      makeEntity('infra-metrics', false),
-    ],
-  };
-}
-
-async function mountComponent(props = {}) {
-  const wrapper = mount(EntityPermissionTable, {
-    global: {
-      plugins: [i18n, store],
-      stubs: {
-        OTable: {
-          props: ['data', 'columns', 'globalFilter', 'hideHeader', 'style'],
-          template: `<div data-test="o-table-stub" :data-global-filter="globalFilter">
-            <div v-for="row in data" :key="row.name" :data-test="'entity-row-'+row.name">
-              <slot :name="'cell-AllowAll'" :row="row" />
-            </div>
-          </div>`,
-        },
-        OCheckbox: {
-          props: ['modelValue', 'value'],
-          template: '<input type="checkbox" :data-test="\'checkbox-\'+value" :checked="modelValue" />',
-        },
-        NoData: true,
-      },
-    },
-    props: {
-      resource: makeResource(),
-      showSelected: false,
-      searchKey: '',
-      ...props,
-    },
-  });
-  await flushPromises();
-  return wrapper;
-}
-
-afterEach(() => {
-  vi.clearAllMocks();
-});
-
-// 1. Rendering
-describe('EntityPermissionTable - rendering', () => {
-  it('mounts without errors', async () => {
-    const wrapper = await mountComponent();
-    expect(wrapper.exists()).toBe(true);
-  });
-
-  it('renders OTable with entity rows when resource is expanded', async () => {
-    const wrapper = await mountComponent({ resource: makeResource(true) });
-    expect(wrapper.find('[data-test="o-table-stub"]').exists()).toBe(true);
-  });
-
-  it('does NOT populate rows when resource.expand is false initially', async () => {
-    const wrapper = await mountComponent({ resource: makeResource(false) });
-    // rows remain empty until expand becomes true
-    expect((wrapper.vm as any).rows.length).toBe(0);
-  });
-
-  it('populates rows when resource.expand is true', async () => {
-    const wrapper = await mountComponent({ resource: makeResource(true) });
-    expect((wrapper.vm as any).rows.length).toBe(3);
-  });
-});
-
-// 2. watcher on resource.expand
-describe('EntityPermissionTable - resource.expand watcher', () => {
-  it('loads entities when expand becomes true', async () => {
-    const resource = makeResource(false);
-    const wrapper = await mountComponent({ resource });
-    expect((wrapper.vm as any).rows.length).toBe(0);
-    await wrapper.setProps({ resource: { ...resource, expand: true } });
-    await flushPromises();
-    expect((wrapper.vm as any).rows.length).toBe(3);
-  });
-
-  it('does not clear rows when expand becomes false', async () => {
-    const resource = makeResource(true);
-    const wrapper = await mountComponent({ resource });
-    expect((wrapper.vm as any).rows.length).toBe(3);
-    resource.expand = false;
-    await flushPromises();
-    // rows remain until re-populated (watcher only fires on true)
-    expect((wrapper.vm as any).rows.length).toBe(3);
-  });
-});
-
-// 3. showSelected prop
-describe('EntityPermissionTable - showSelected prop', () => {
-  it('returns all entities when showSelected is false', async () => {
-    const wrapper = await mountComponent({
-      resource: makeResource(true),
-      showSelected: false,
-    });
-    expect((wrapper.vm as any).rows.length).toBe(3);
-  });
-
-  it('returns only entities with at least one permission when showSelected is true', async () => {
-    const resource = makeResource(true);
-    // Only sys-logs has a truthy permission
-    const wrapper = await mountComponent({
-      resource,
-      showSelected: true,
-    });
-    // Only sys-logs has value=true
-    expect((wrapper.vm as any).rows.length).toBe(1);
-    expect((wrapper.vm as any).rows[0].name).toBe('sys-logs');
-  });
-
-  it('returns empty array when showSelected is true but no permissions set', async () => {
-    const resource = {
-      expand: true,
-      entities: [makeEntity('app-logs', false), makeEntity('sys-logs', false)],
-    };
-    const wrapper = await mountComponent({ resource, showSelected: true });
-    expect((wrapper.vm as any).rows.length).toBe(0);
-  });
-});
-
-// 4. searchKey / filtering
-// Filtering is delegated entirely to OTable via its global-filter prop.
-// These tests verify that searchKey is forwarded to OTable and that rows
-// are fully populated before OTable applies its own client-side filter.
-describe('EntityPermissionTable - searchKey prop forwarding', () => {
-  it('passes empty searchKey to OTable global-filter by default', async () => {
-    const wrapper = await mountComponent({ resource: makeResource(true), searchKey: '' });
-
-    const tableStub = wrapper.find('[data-test="o-table-stub"]');
-    expect(tableStub.attributes('data-global-filter')).toBe('');
-  });
-
-  it('passes a non-empty searchKey to OTable global-filter', async () => {
-    const wrapper = await mountComponent({ resource: makeResource(true), searchKey: 'logs' });
-
-    const tableStub = wrapper.find('[data-test="o-table-stub"]');
-    expect(tableStub.attributes('data-global-filter')).toBe('logs');
-  });
-
-  it('updates OTable global-filter when searchKey prop changes', async () => {
-    const wrapper = await mountComponent({ resource: makeResource(true), searchKey: '' });
-
-    await wrapper.setProps({ searchKey: 'sys' });
-
-    const tableStub = wrapper.find('[data-test="o-table-stub"]');
-    expect(tableStub.attributes('data-global-filter')).toBe('sys');
-  });
-
-  it('populates all rows regardless of searchKey (filtering is OTable responsibility)', async () => {
-    // Rows should always reflect the full entity list so OTable can filter them client-side.
-    const wrapper = await mountComponent({ resource: makeResource(true), searchKey: 'logs' });
-
-    expect((wrapper.vm as any).rows.length).toBe(3);
-  });
-
-  it('passes updated searchKey to OTable after prop change without altering rows count', async () => {
-    const wrapper = await mountComponent({ resource: makeResource(true), searchKey: 'app' });
-
-    await wrapper.setProps({ searchKey: 'zzz-no-match' });
-
-    // rows is unaffected — OTable does the actual filtering
-    expect((wrapper.vm as any).rows.length).toBe(3);
-    expect(wrapper.find('[data-test="o-table-stub"]').attributes('data-global-filter')).toBe('zzz-no-match');
-  });
-});
-
-// 5. handlePermissionChange emit
-describe('EntityPermissionTable - handlePermissionChange', () => {
-  it('emits "updated:permission" with row and permission name', async () => {
-    const wrapper = await mountComponent({ resource: makeResource(true) });
-    const entity = makeEntity('app-logs');
-    (wrapper.vm as any).handlePermissionChange(entity, 'AllowGet');
-    const emitted = wrapper.emitted('updated:permission');
-    expect(emitted).toBeTruthy();
-    expect(emitted![0][0]).toEqual(entity);
-    expect(emitted![0][1]).toBe('AllowGet');
-  });
-
-  it('emits for multiple permission changes', async () => {
-    const wrapper = await mountComponent({ resource: makeResource(true) });
-    const entity = makeEntity('sys-logs');
-    (wrapper.vm as any).handlePermissionChange(entity, 'AllowAll');
-    (wrapper.vm as any).handlePermissionChange(entity, 'AllowDelete');
-    expect(wrapper.emitted('updated:permission')).toHaveLength(2);
-  });
-});
diff --git a/web/src/components/iam/roles/EntityPermissionTable.vue b/web/src/components/iam/roles/EntityPermissionTable.vue
deleted file mode 100644
index 5cd9098623..0000000000
--- a/web/src/components/iam/roles/EntityPermissionTable.vue
+++ /dev/null
@@ -1,208 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <div :style="{ height: resource.expand ? '100%' : '0px', transition: 'height 0.3s ease-in' }">
-    <OTable
-      :data="rows"
-      :columns="columns"
-      row-key="name"
-      :global-filter="searchKey"
-      filter-mode="client"
-      :default-columns="false"
-      :show-global-filter="false"
-      dense
-      :bordered="false"
-    >
-      <template v-for="col in permissionColumnIds" :key="col" #[`cell-${col}`]="{ row }">
-        <OCheckbox
-          v-show="row.permission[col]?.show"
-          v-model="row.permission[col].value"
-          :value="col"
-          class="filter-check-box cursor-pointer"
-          @click="handlePermissionChange(row, col)"
-        />
-      </template>
-      <template #empty>
-        <NoData :filtered="!!searchKey" @action="emits('update:searchKey', '')" />
-      </template>
-    </OTable>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from "vue";
-import { useI18n } from "vue-i18n";
-import OTable from "@/lib/core/Table/OTable.vue";
-import type { OTableColumnDef } from "@/lib/core/Table/OTable.types";
-import NoData from "@/components/shared/grid/NoData.vue";
-import usePermissions from "@/composables/iam/usePermissions";
-import type { Entity } from "@/ts/interfaces";
-import { watch } from "vue";
-import OCheckbox from "@/lib/forms/Checkbox/OCheckbox.vue";
-import { TABLE_INDEX_COL_SIZE, COL } from "@/lib/core/Table/OTable.types";
-
-const props = defineProps({
-  resource: {
-    type: Object,
-    default: () => {},
-  },
-  showSelected: {
-    type: Boolean,
-    default: false,
-  },
-  searchKey: {
-    type: String,
-    default: "",
-  },
-});
-
-const emits = defineEmits(["updated:permission", "update:searchKey"]);
-
-const { t } = useI18n();
-
-const rows: any = ref([]);
-
-const { permissionsState } = usePermissions();
-
-const permissionColumnIds = computed(() =>
-  columns.value
-    .filter((c) => c.id.startsWith("Allow"))
-    .map((c) => c.id),
-);
-
-const columns = computed<OTableColumnDef[]>(() => [
-  {
-    id: "expand",
-    header: "",
-    accessorKey: "expand",
-    cell: (info: any) => info.getValue(),
-    size: TABLE_INDEX_COL_SIZE,
-    minSize: 32,
-    maxSize: 40,
-    meta: { align: "center", compactPadding: true },
-  },
-  {
-    id: "name",
-    header: t("iam.entityName"),
-    accessorKey: "name",
-    sortable: true,
-    size: COL.name,
-    meta: { align: "left", autoWidth: true },
-  },
-  {
-    id: "type",
-    header: t("common.type"),
-    accessorKey: "type",
-    sortable: true,
-    size: 100,
-    meta: { align: "left" },
-  },
-  {
-    id: "AllowAll",
-    header: t("iam.all"),
-    accessorKey: "permission",
-    cell: (info: any) => info.getValue(),
-    size: 72,
-    minSize: 60,
-    maxSize: 84,
-    meta: { align: "center" },
-  },
-  {
-    id: "AllowList",
-    header: t("iam.list"),
-    accessorKey: "permission",
-    cell: (info: any) => info.getValue(),
-    size: 72,
-    minSize: 60,
-    maxSize: 84,
-    meta: { align: "center" },
-  },
-  {
-    id: "AllowGet",
-    header: t("iam.get"),
-    accessorKey: "permission",
-    cell: (info: any) => info.getValue(),
-    size: 72,
-    minSize: 60,
-    maxSize: 84,
-    meta: { align: "center" },
-  },
-  {
-    id: "AllowDelete",
-    header: t("iam.delete"),
-    accessorKey: "permission",
-    cell: (info: any) => info.getValue(),
-    size: 72,
-    minSize: 60,
-    maxSize: 84,
-    meta: { align: "center" },
-  },
-  {
-    id: "AllowPost",
-    header: t("iam.create"),
-    accessorKey: "permission",
-    cell: (info: any) => info.getValue(),
-    size: 72,
-    minSize: 60,
-    maxSize: 84,
-    meta: { align: "center" },
-  },
-  {
-    id: "AllowPut",
-    header: t("iam.update"),
-    accessorKey: "permission",
-    cell: (info: any) => info.getValue(),
-    size: 72,
-    minSize: 60,
-    maxSize: 84,
-    meta: { align: "center" },
-  },
-]);
-
-const getResourceEntities = () => {
-  return props.resource.entities;
-};
-
-const updateTableData = () => {
-  if (!props.showSelected) {
-    rows.value = getResourceEntities();
-  } else {
-    rows.value = getResourceEntities().filter((entity: Entity) => {
-      const showEntity = Object.values(entity.permission).some(
-        (permission: any) => permission.value,
-      );
-
-      return showEntity;
-    });
-  }
-};
-
-const handlePermissionChange = (row: Entity, permission: string) => {
-  emits("updated:permission", row, permission);
-};
-
-watch(
-  () => props.resource.expand,
-  (val) => {
-    if (val) updateTableData();
-  },
-  {
-    immediate: true,
-  },
-);
-
-</script>
diff --git a/web/src/components/iam/roles/PermissionsTable.vue b/web/src/components/iam/roles/PermissionsTable.vue
index b5682720e2..ee4000cbaf 100644
--- a/web/src/components/iam/roles/PermissionsTable.vue
+++ b/web/src/components/iam/roles/PermissionsTable.vue
@@ -26,8 +26,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <div
         data-test="edit-role-permissions-table-no-permissions-title"
         v-if="!level && !rows.length && !loading"
-        class="w-full text-center mt-4 font-bold text-gray-600"
-        style="margin-top: 64px; font-size: 18px"
+        class="w-full text-center mt-4 font-bold text-text-secondary"
+        style="margin-top: 64px; font-size: var(--text-lg)"
       >
         <span> {{ t('iam.permissionsTable.noPermissionsSelected') }} </span>
       </div>
@@ -51,7 +51,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </div>
       <div
         v-if="level && getFilteredRows.length === 50"
-        class="py-2 text-left text-gray-700 bg-white relative"
+        class="py-2 text-left text-text-body bg-surface-base relative"
         :style="{
           paddingLeft: level
             ? parent.has_entities
@@ -357,10 +357,11 @@ defineExpose({
 });
 </script>
 
-<style>
+<style scoped>
+/* keep(complex-state): :deep override of the OTable header cell height */
 .iam-permissions-table {
-  th{
-    height: 48px !important;
+  :deep(th) {
+    height: 3rem !important;
   }
 }
 </style>
diff --git a/web/src/components/iam/roles/RoleTable.vue b/web/src/components/iam/roles/RoleTable.vue
index d3ea34af59..6f15226ad3 100644
--- a/web/src/components/iam/roles/RoleTable.vue
+++ b/web/src/components/iam/roles/RoleTable.vue
@@ -8,7 +8,6 @@ import OButton from "@/lib/core/Button/OButton.vue";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import OSearchInput from "@/lib/forms/SearchInput/OSearchInput.vue";
 import { useI18n } from "vue-i18n";
-import { TABLE_INDEX_COL_SIZE } from "@/lib/core/Table/OTable.types";
 
 const { t } = useI18n();
 
@@ -37,15 +36,6 @@ const onEmptyStateAction = (id?: string) => {
 };
 
 const columns: OTableColumnDef[] = [
-  {
-    id: "#",
-    header: "#",
-    accessorFn: (row: any) => row["#"],
-    size: TABLE_INDEX_COL_SIZE,
-    minSize: 32,
-    maxSize: 50,
-    meta: { compactPadding: true, align: "left" },
-  },
   {
     id: "role_name",
     header: t("iam.roleName"),
@@ -61,7 +51,7 @@ const columns: OTableColumnDef[] = [
     size: 80,
     minSize: 64,
     maxSize: 100,
-    meta: { align: "left", actionCount: 2 },
+    meta: { align: "center", actionCount: 2 },
   },
 ];
 </script>
@@ -84,6 +74,7 @@ const columns: OTableColumnDef[] = [
     row-key="role_name"
     filter-mode="client"
     :default-columns="false"
+    show-index
     @update:selected-ids="emit('update:selectedIds', $event)"
     @update:global-filter="emit('update:globalFilter', $event)"
   >
@@ -137,7 +128,7 @@ const columns: OTableColumnDef[] = [
     </template>
 
     <template #bottom>
-      <span class="o2-table-footer-title">{{ data.length }} {{ t("iam.roles") }}</span>
+      <span class="text-xs font-normal">{{ data.length }} {{ t("iam.roles") }}</span>
       <OButton
         v-if="(selectedIds?.length ?? 0) > 0"
         data-test="iam-roles-bulk-delete-btn"
diff --git a/web/src/components/iam/serviceAccounts/AddServiceAccount.schema.ts b/web/src/components/iam/serviceAccounts/AddServiceAccount.schema.ts
index 6ef9dd54ae..c35ea9b984 100644
--- a/web/src/components/iam/serviceAccounts/AddServiceAccount.schema.ts
+++ b/web/src/components/iam/serviceAccounts/AddServiceAccount.schema.ts
@@ -2,28 +2,25 @@
 //
 // Validation schema + synthetic-email helpers for AddServiceAccount.vue.
 //
-// Service accounts are no longer created from a user-supplied email. The form
-// asks only for a NAME (a lowercase slug); the UI derives the stored identifier
-// as `<name>.<org_id>@sa.internal` — org-scoped so two orgs creating the same
-// name can never collide.
+// The form asks only for a NAME (a lowercase slug); the UI derives the stored
+// identifier as `<name>.<org_id>@sa.internal` — org-scoped so two orgs creating
+// the same name can never collide.
 //
-// Why this exact shape: the backend EMAIL_REGEX requires a letters-only final
-// domain label and forbids underscores anywhere in the domain, so the org id
-// must live in the LOCAL part (which permits underscores, digits, and mixed
-// case). `k1.my_org1@sa.internal`, `k1._meta@sa.internal`, and ksuid cloud
-// orgs all pass; an org-in-domain scheme like `k1@sa.my_org1` would be
-// rejected server-side. The fixed `sa.internal` domain uses the
+// The exact shape is dictated by the backend EMAIL_REGEX, which requires a
+// letters-only final domain label and forbids underscores anywhere in the
+// domain, so the org id must live in the LOCAL part (which permits underscores,
+// digits, and mixed case). `k1.my_org1@sa.internal`, `k1._meta@sa.internal`,
+// and ksuid cloud orgs all pass; an org-in-domain scheme like `k1@sa.my_org1`
+// would be rejected server-side. The fixed `sa.internal` domain uses the
 // ICANN-reserved `.internal` TLD, so it can never collide with a real
-// registrable domain. The whole identifier is lowercased to match the
-// backend, which lowercases emails on save.
+// registrable domain. The whole identifier is lowercased to match the backend,
+// which lowercases emails on save.
 //
 // `name` is CREATE-ONLY: required + slug + length-capped in create mode (the
 // local part `<name>.<org_id>` must stay within the 64-char email local-part
 // limit, so the cap is org-dependent). In update mode the field is neither
-// rendered nor submitted, so it is skipped. The mode is supplied by the
-// component (which knows `beingUpdated`) via this factory; the dialog body
-// remounts per open, so OForm always reads the right variant. `first_name`
-// (the description) and the `roles`/`groups` pickers are always optional.
+// rendered nor submitted, so it is skipped. `first_name` (the description) and
+// the `roles`/`groups` pickers are always optional.
 
 import { z } from "zod";
 
@@ -69,9 +66,9 @@ const addServiceAccountBaseSchema = z.object({
 
 export type AddServiceAccountForm = z.infer<typeof addServiceAccountBaseSchema>;
 
-// `name` is CREATE-ONLY, modelled as a conditional superRefine — like AddUser —
-// so the base shape (and its z.infer type) stay stable across modes. The
-// component supplies `beingUpdated` and the org-dependent `maxNameLength`.
+// `name` is CREATE-ONLY, modelled as a conditional superRefine so the base
+// shape (and its z.infer type) stay stable across modes. The component supplies
+// `beingUpdated` and the org-dependent `maxNameLength`.
 export const makeAddServiceAccountSchema = (
   beingUpdated: boolean,
   t: (_key: string, _named?: Record<string, unknown>) => string,
diff --git a/web/src/components/iam/serviceAccounts/ServiceAccountsList.spec.js b/web/src/components/iam/serviceAccounts/ServiceAccountsList.spec.js
index 7d0d4d9c5f..41a06cb13a 100644
--- a/web/src/components/iam/serviceAccounts/ServiceAccountsList.spec.js
+++ b/web/src/components/iam/serviceAccounts/ServiceAccountsList.spec.js
@@ -474,7 +474,6 @@ describe("ServiceAccountsList Component", () => {
       await wrapper.vm.getServiceAccountsUsers();
 
       expect(mockServiceAccountsState.service_accounts_users).toHaveLength(3);
-      expect(mockServiceAccountsState.service_accounts_users[2]["#"]).toBe("03");
 
       // Verify system account is properly formatted
       const sreAgent = mockServiceAccountsState.service_accounts_users[0];
@@ -711,14 +710,15 @@ describe("ServiceAccountsList Component", () => {
     });
 
     it("has correct column configuration", () => {
-      // columns uses OTableColumnDef with 'id' (not 'name')
-      expect(wrapper.vm.columns).toHaveLength(6);
-      expect(wrapper.vm.columns[0].id).toBe("#");
-      expect(wrapper.vm.columns[1].id).toBe("email");
-      expect(wrapper.vm.columns[2].id).toBe("first_name");
-      expect(wrapper.vm.columns[3].id).toBe("token");
-      expect(wrapper.vm.columns[4].id).toBe("created_at");
-      expect(wrapper.vm.columns[5].id).toBe("actions");
+      // columns uses OTableColumnDef with 'id' (not 'name'). The row-index "#"
+      // column is now auto-injected by OTable's show-index, so it is not part
+      // of the component's own column defs.
+      expect(wrapper.vm.columns).toHaveLength(5);
+      expect(wrapper.vm.columns[0].id).toBe("email");
+      expect(wrapper.vm.columns[1].id).toBe("first_name");
+      expect(wrapper.vm.columns[2].id).toBe("token");
+      expect(wrapper.vm.columns[3].id).toBe("created_at");
+      expect(wrapper.vm.columns[4].id).toBe("actions");
     });
 
     it("has correct per page options", () => {
@@ -1410,7 +1410,7 @@ describe("ServiceAccountsList Component", () => {
   describe("Header subtitle", () => {
     it("renders a subtitle below the header", async () => {
       // The subtitle should be visible
-      const appPageHeader = wrapper.findComponent({ name: "AppPageHeader" });
+      const appPageHeader = wrapper.findComponent({ name: "OPageHeader" });
       if (appPageHeader.exists()) {
         expect(appPageHeader.props("subtitle")).toBe(
           "Programmatic access tokens for APIs"
diff --git a/web/src/components/iam/serviceAccounts/ServiceAccountsList.vue b/web/src/components/iam/serviceAccounts/ServiceAccountsList.vue
index f9f866a469..69078b969f 100644
--- a/web/src/components/iam/serviceAccounts/ServiceAccountsList.vue
+++ b/web/src/components/iam/serviceAccounts/ServiceAccountsList.vue
@@ -19,15 +19,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 
 <template>
-  <div class="p-0 h-full flex flex-col">
-    <!-- Standard page header: title + actions only. Search moved into the
-         table's own toolbar (built-in global filter). -->
-    <AppPageHeader
+  <OPageLayout
       :title="t('serviceAccounts.header')"
       icon="manage-accounts"
-      :subtitle="t('serviceAccounts.headerSubtitle')"
-      class="shrink-0 px-4 border-b border-border-default"
-    >
+      :subtitle="t('serviceAccounts.headerSubtitle')" bleed>
       <template #actions>
         <OButton
           data-test="service-accounts-add-btn"
@@ -38,9 +33,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           {{ t('serviceAccounts.add') }}
         </OButton>
       </template>
-    </AppPageHeader>
       <div class="w-full flex-1 min-h-0 overflow-hidden">
-        <div class="card-container h-full">
+        <div class="bg-card-glass-bg h-full">
           <OTable
             :frame="false"
             :data="serviceAccountsState.service_accounts_users"
@@ -59,6 +53,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             :show-global-filter="false"
             filter-mode="client"
             :default-columns="false"
+            show-index
             :enable-column-resize="true"
             :persist-columns="true"
             table-id="iam-service-accounts-list"
@@ -102,7 +97,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
             <template #cell-email="{ row }">
               <template v-if="row.is_system">
-                <span data-test="service-accounts-system-account-label" class="text-weight-medium">{{ row.first_name }}</span>
+                <span data-test="service-accounts-system-account-label" class="font-medium">{{ row.first_name }}</span>
                 <OTag data-test="service-accounts-system-badge" type="serviceAccountKind" value="system" class="ml-2" />
               </template>
               <template v-else-if="isSyntheticSA(row.email)">
@@ -135,7 +130,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <template #cell-created_at="{ row }">
               <span
                 :data-test="`service-accounts-created-${row.email}`"
-                class="text-text-primary"
+                class="text-text-body"
               >{{ formatCreatedAt(row.created_at) }}</span>
             </template>
 
@@ -180,7 +175,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </template>
 
             <template #bottom>
-              <span class="o2-table-footer-title">{{ serviceAccountsState.service_accounts_users.length }} {{ t('serviceAccounts.header') }}</span>
+              <span class="text-xs font-normal">{{ serviceAccountsState.service_accounts_users.length }} {{ t('serviceAccounts.header') }}</span>
               <OButton
                 v-if="selectedAccounts.length > 0"
                 data-test="service-accounts-list-delete-accounts-btn"
@@ -258,17 +253,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
           <OTabPanels v-model="tokenTab" animated>
             <OTabPanel name="curl">
-              <pre class="bg-surface-subtle text-text-primary p-3 rounded text-xs overflow-auto whitespace-pre-wrap">{{
+              <pre class="bg-surface-subtle text-text-body p-3 rounded-default text-xs overflow-auto whitespace-pre-wrap">{{
                 tokenCurlSnippet
               }}</pre>
             </OTabPanel>
             <OTabPanel name="header">
-              <pre class="bg-surface-subtle text-text-primary p-3 rounded text-xs overflow-auto whitespace-pre-wrap">{{
+              <pre class="bg-surface-subtle text-text-body p-3 rounded-default text-xs overflow-auto whitespace-pre-wrap">{{
                 tokenHeaderSnippet
               }}</pre>
             </OTabPanel>
             <OTabPanel name="env">
-              <pre class="bg-surface-subtle text-text-primary p-3 rounded text-xs overflow-auto whitespace-pre-wrap">{{
+              <pre class="bg-surface-subtle text-text-body p-3 rounded-default text-xs overflow-auto whitespace-pre-wrap">{{
                 tokenEnvSnippet
               }}</pre>
             </OTabPanel>
@@ -321,11 +316,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             class="mt-4"
           >
             <div v-if="grantedRolesText" class="flex items-start gap-2 mb-1">
-              <OIcon name="check" size="sm" class="text-success-500 mt-0.5 shrink-0" />
+              <OIcon name="check" size="sm" class="text-status-success-text mt-0.5 shrink-0" />
               <span class="text-xs text-text-secondary">{{ grantedRolesText }}</span>
             </div>
             <div v-if="grantedGroupsText" class="flex items-start gap-2 mb-1">
-              <OIcon name="check" size="sm" class="text-success-500 mt-0.5 shrink-0" />
+              <OIcon name="check" size="sm" class="text-status-success-text mt-0.5 shrink-0" />
               <span class="text-xs text-text-secondary">{{ grantedGroupsText }}</span>
             </div>
 
@@ -334,11 +329,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               data-test="service-accounts-token-access-failed"
               class="flex items-start gap-2 mb-1"
             >
-              <OIcon name="warning" size="sm" class="text-amber-500 mt-0.5 shrink-0" />
+              <OIcon name="warning" size="sm" class="text-status-warning-text mt-0.5 shrink-0" />
               <span class="text-xs text-text-secondary">{{ failedRolesText }}</span>
             </div>
             <div v-if="failedGroupsText" class="flex items-start gap-2 mb-1">
-              <OIcon name="warning" size="sm" class="text-amber-500 mt-0.5 shrink-0" />
+              <OIcon name="warning" size="sm" class="text-status-warning-text mt-0.5 shrink-0" />
               <span class="text-xs text-text-secondary">{{ failedGroupsText }}</span>
             </div>
             <p v-if="hasAccessFailures" class="text-xs text-text-secondary mt-1">
@@ -355,7 +350,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   v-if="showGroupLink"
                   name="warning"
                   size="sm"
-                  class="text-amber-500 mt-0.5"
+                  class="text-status-warning-text mt-0.5"
                 />
                 <span class="text-xs text-text-secondary">{{ tokenNextStepHint }}</span>
               </div>
@@ -364,7 +359,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <router-link
                   data-test="service-accounts-list-token-add-to-role"
                   :to="roleLinkTarget"
-                  class="group inline-flex items-center gap-1.5 rounded-md border border-border-default px-2.5 py-1.5 text-xs text-text-primary transition-colors hover:border-primary hover:bg-primary/5"
+                  class="group inline-flex items-center gap-1.5 rounded-default border border-border-default px-2.5 py-1.5 text-xs text-text-body transition-colors hover:border-primary hover:bg-primary/5"
                   @click="isShowToken = false"
                 >
                   <OIcon name="shield" size="sm" class="text-primary shrink-0" />
@@ -378,7 +373,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <router-link
                   data-test="service-accounts-list-token-add-to-group"
                   :to="groupLinkTarget"
-                  class="group inline-flex items-center gap-1.5 rounded-md border border-border-default px-2.5 py-1.5 text-xs text-text-primary transition-colors hover:border-primary hover:bg-primary/5"
+                  class="group inline-flex items-center gap-1.5 rounded-default border border-border-default px-2.5 py-1.5 text-xs text-text-body transition-colors hover:border-primary hover:bg-primary/5"
                   @click="isShowToken = false"
                 >
                   <OIcon name="group" size="sm" class="text-primary shrink-0" />
@@ -405,7 +400,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
       </div>
     </ODialog>
-  </div>
+  </OPageLayout>
 </template>
 
 <script lang="ts">
@@ -414,7 +409,7 @@ import { defineComponent, ref, onBeforeMount } from "vue";
 import OButton from "@/lib/core/Button/OButton.vue";
 import ODialog from "@/lib/overlay/Dialog/ODialog.vue";
 import ConfirmDialog from "@/components/ConfirmDialog.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
 import OTag from "@/lib/core/Badge/OTag.vue";
 import OCodeCell from "@/lib/core/Table/cells/OCodeCell.vue";
@@ -445,7 +440,7 @@ import {
   getImageURL,
   verifyOrganizationStatus,
 } from "@/utils/zincutils";
-import { TABLE_INDEX_COL_SIZE, COL } from "@/lib/core/Table/OTable.types";
+import { COL } from "@/lib/core/Table/OTable.types";
 
 // @ts-ignore
 import usePermissions from "@/composables/iam/usePermissions";
@@ -457,7 +452,7 @@ import { useShortcuts } from "@/lib/vue-shortcut-manager";
 import { focusSearchInput, isInputFocused } from "@/utils/keyboardShortcuts";
 export default defineComponent({
   name: "ServiceAccountsList",
-  components: { OEmptyState, AddServiceAccount, ConfirmDialog, OButton, ODialog, OIcon, AppPageHeader, OTooltip, OTable, OTag, OCodeCell, OUserCell, OSearchInput, OTabs, OTab, OTabPanels, OTabPanel, OSpinner },
+  components: { OEmptyState, AddServiceAccount, ConfirmDialog, OButton, ODialog, OIcon, OPageLayout, OTooltip, OTable, OTag, OCodeCell, OUserCell, OSearchInput, OTabs, OTab, OTabPanels, OTabPanel, OSpinner },
   emits: [],
   setup(props, { emit }) {
     const store = useStore();
@@ -647,15 +642,6 @@ export default defineComponent({
     });
 
     const columns: OTableColumnDef[] = [
-      {
-        id: "#",
-        header: "#",
-        accessorKey: "#",
-        size: TABLE_INDEX_COL_SIZE,
-        minSize: 32,
-        maxSize: 40,
-        meta: { align: "left", compactPadding: true },
-      },
       {
         id: "email",
         header: t("serviceAccounts.list.col.identifier"),
@@ -747,11 +733,9 @@ export default defineComponent({
           )
           .then((res) => {
             resultTotal.value = res.data.data.length;
-            let counter = 1;
             currentUserRole.value = "";
             serviceAccountsState.service_accounts_users = res.data.data.map((data: any) => {
               return {
-                "#": counter <= 9 ? `0${counter++}` : counter++,
                 email: data.email,
                 first_name: data.first_name,
                 last_name: data.last_name,
@@ -890,10 +874,6 @@ export default defineComponent({
             store.state.selectedOrganization.identifier == data.organization
           ) {
             const user = {
-              "#":
-              serviceAccountsState.service_accounts_users.length + 1 <= 9
-                  ? `0${serviceAccountsState.service_accounts_users.length + 1}`
-                  : serviceAccountsState.service_accounts_users.length + 1,
               email: data.email,
               first_name: data.first_name,
               last_name: data.last_name,
diff --git a/web/src/components/iam/users/AddUser.schema.ts b/web/src/components/iam/users/AddUser.schema.ts
index e2473543b1..6a2e7f0dd7 100644
--- a/web/src/components/iam/users/AddUser.schema.ts
+++ b/web/src/components/iam/users/AddUser.schema.ts
@@ -7,20 +7,6 @@
 // validates a different subset of fields, so the rules live in a `superRefine`
 // keyed off a context object the component supplies via this factory.
 //
-// Restores the pre-migration (BEFORE) rules that the earlier O-component
-// migration had weakened into manual `emailError`/`roleError`/`passwordError`
-// refs + toast checks:
-//   • email     — required + valid-email regex (add-existing mode)
-//   • role      — required (add-existing, non-self, non-member)
-//   • password  — required + strong policy (create-new). The policy already
-//                 enforces the BEFORE min-length-8 (and more).
-//   • old/new_password — required when changing. old_password is required-only
-//                 (it is an EXISTING credential that predates the strong policy,
-//                 so it is never re-validated for length/strength — matches the
-//                 upstream "enforce strong password policy" baseline); new keeps
-//                 the current strong policy.
-//   • other_organization — must start with a letter (alphanumeric, _ or -).
-//
 // Messages are i18n-driven (the factory takes useI18n's `t`).
 
 import { z } from "zod";
@@ -51,8 +37,8 @@ export interface AddUserSchemaContext {
   organization: string;
 }
 
-// Every control inside <OForm> is form-owned (R1-strict); base fields are
-// optional and the real, mode-dependent requireds are enforced in superRefine.
+// Base fields are optional; the real, mode-dependent requireds are enforced in
+// superRefine.
 export const addUserBaseSchema = z.object({
   email: z.string().optional().default(""),
   password: z.string().optional().default(""),
@@ -74,8 +60,8 @@ export const makeAddUserSchema = (
 ) =>
   addUserBaseSchema.superRefine((val, zctx) => {
     // Read the live context on every run so a single stable schema instance
-    // follows mode flips (e.g. the 422 add-existing → create-new switch) WITHOUT
-    // a remount — the OWNER (AddUser.vue) holds one form via useOForm. (Rule ③)
+    // follows mode flips (e.g. the 422 add-existing → create-new switch) without
+    // a remount.
     const ctx = getCtx();
     // ── Add an existing user (enter an email to invite) ──────────────────────
     if (ctx.existingUser && !ctx.beingUpdated) {
diff --git a/web/src/components/iam/users/AddUser.vue b/web/src/components/iam/users/AddUser.vue
index 4e8f8a1bf8..4a0126a9db 100644
--- a/web/src/components/iam/users/AddUser.vue
+++ b/web/src/components/iam/users/AddUser.vue
@@ -195,7 +195,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     @click:primary="signout"
   >
     <div class="flex items-center gap-3">
-      <div class="bg-[var(--o2-primary)] text-white inline-flex items-center justify-center w-10 h-10 rounded-full shrink-0">
+      <div class="bg-accent text-text-inverse inline-flex items-center justify-center w-10 h-10 rounded-full shrink-0">
         <OIcon name="info" size="sm" />
       </div>
       <span>{{ t('iam.addUser.changePasswordLogoutMessage') }}</span>
@@ -303,11 +303,10 @@ export default defineComponent({
     const loggedInUserEmail = ref(store.state.userInfo.email);
     const filterdOption = ref([...props.customRoles]);
 
-    // Non-form context (Rule ③): the org the user is assigned to, the original
-    // record we round-trip on edit, and whether the edited user is external.
-    // These are NOT form fields — they live OUTSIDE <OForm>, read by the owner's
-    // v-if / schema-context / submit handler. The 10 editable fields are owned by
-    // the single TanStack form below (no `formData` mirror, no v-model-to-a-ref).
+    // Non-form context: the org the user is assigned to, the original record we
+    // round-trip on edit, and whether the edited user is external. These are NOT
+    // form fields — they live OUTSIDE <OForm>, read by the owner's v-if /
+    // schema-context / submit handler.
     const organization = ref(store.state.selectedOrganization.identifier);
     const editRecord: any = ref(null);
     const isExternalUser = ref(false);
@@ -330,27 +329,19 @@ export default defineComponent({
     const supportsCustomRole =
       config.isEnterprise == "true" || config.isCloud == "true";
 
-    // Reproduce the pre-migration wire behaviour EXACTLY. Before, `custom_role`
-    // was on `formData` only once actually POPULATED — via getUserRoles hydration
-    // (edit + Enterprise/Cloud) or the user picking in the select (add-existing /
-    // edit + Enterprise/Cloud). An unpopulated field stayed `undefined` and was
-    // JSON-omitted; a populated one (even `[]`) was sent. The migrated schema
-    // seeds `custom_role: []` for every mode, collapsing that distinction, so
-    // decide inclusion explicitly to match BEFORE byte-for-byte:
+    // Decide whether to send `custom_role`:
     //   • OSS → never (the field is Enterprise/Cloud-only).
     //   • edit → always (getUserRoles always hydrates it, even to `[]`).
     //   • otherwise (add-existing / create-new) → only when the user actually
-    //     selected roles (length > 0). Untouched `[]` ⇒ omit, as before; a
-    //     selection carried from add-existing into a 422→create-new flow is
-    //     still sent, also as before.
+    //     selected roles (length > 0).
     const includeCustomRole = (value: AddUserForm) =>
       supportsCustomRole &&
       (beingUpdated.value ||
         (Array.isArray(value.custom_role) && value.custom_role.length > 0));
 
-    // The save handler reads the VALIDATED `value` ONLY (Rule ②) — no formData
-    // mirror. Non-form context (org, the original edit record) comes from the refs
-    // above. OForm awaits it, so the footer Save spinner spans the request.
+    // The save handler reads the VALIDATED `value` only. Non-form context (org,
+    // the original edit record) comes from the refs above. OForm awaits it, so
+    // the footer Save spinner spans the request.
     const onSubmit = async (value: AddUserForm) => {
       let selectedOrg = organization.value;
       if (selectedOrg == "other") {
@@ -367,8 +358,8 @@ export default defineComponent({
           change_password: value.change_password,
           organization: selectedOrg,
         };
-        // Match pre-migration: send the hydrated custom_role on Enterprise/Cloud
-        // edits; otherwise drop it (the editRecord spread could also leak it).
+        // Send the hydrated custom_role on Enterprise/Cloud edits; otherwise
+        // drop it (the editRecord spread could also leak it).
         if (includeCustomRole(value)) {
           payload.custom_role = value.custom_role;
         } else {
@@ -431,8 +422,8 @@ export default defineComponent({
         } catch (err: any) {
           if (err.response.data.code === 422) {
             // The email is actually new → switch to "create new user" mode. The
-            // stable schema reads existingUser live, so it now enforces the
-            // password policy WITHOUT a remount.
+            // schema reads existingUser live, so it enforces the password policy
+            // without a remount.
             existingUser.value = false;
           } else {
             if (err.response?.status != 403 || err?.status != 403) {
@@ -451,8 +442,8 @@ export default defineComponent({
             org_member_id: "",
             organization: selectedOrg,
           };
-          // Before, create-new never had a populated custom_role (the select is
-          // hidden in create mode) unless it was carried over from add-existing.
+          // create-new has no populated custom_role (the select is hidden in
+          // create mode) unless it was carried over from add-existing.
           if (!includeCustomRole(value)) {
             delete payload.custom_role;
           }
@@ -469,11 +460,11 @@ export default defineComponent({
       }
     };
 
-    // OWNER pattern (Rule ③): this component renders <OForm>, so it creates the
-    // form here (useOForm) to read it reactively (form.useStore) for parent-side
-    // v-if, then hands it down via <OForm :form="form"> — ONE source of truth.
-    // The schema takes a context GETTER so a single stable instance follows mode
-    // flips (e.g. the 422 add-existing → create-new switch) with no remount.
+    // This component renders <OForm>, so it creates the form here (useOForm) to
+    // read it reactively (form.useStore) for parent-side v-if, then hands it down
+    // via <OForm :form="form"> — ONE source of truth. The schema takes a context
+    // GETTER so a single stable instance follows mode flips (e.g. the 422
+    // add-existing → create-new switch) with no remount.
     const addUserSchema = makeAddUserSchema(
       () => ({
         existingUser: existingUser.value,
@@ -519,10 +510,10 @@ export default defineComponent({
     );
 
     // Reset form state only when the dialog transitions from closed → open.
-    // Previously this was a deep watch on modelValue, but parent-side mutations
-    // of selectedUser caused it to fire mid-flight and reset existingUser back
-    // to true, undoing the 422-catch transition from "add existing user" to
-    // "create new user" and hiding the password/name fields.
+    // A deep watch on modelValue must NOT be used: parent-side mutations of
+    // selectedUser fire it mid-flight and reset existingUser back to true,
+    // undoing the 422-catch add-existing → create-new transition and hiding
+    // the password/name fields.
     const resetFormFromModelValue = (newVal: any) => {
       if (newVal && newVal.email != undefined && newVal.email != "") {
         beingUpdated.value = true;
@@ -539,9 +530,7 @@ export default defineComponent({
           password: "",
         };
         isExternalUser.value = !!newVal.is_external;
-        // Seed the ONE form via reset(values) — never a formData mirror nor a
-        // per-field setFieldValue loop (Rule ③ / playbook "data arrives after
-        // mount" → reset, flash-free).
+        // Seed the form via reset(values) — never a per-field setFieldValue loop.
         form.reset({
           ...blankForm(),
           email: newVal.email ?? "",
@@ -556,8 +545,7 @@ export default defineComponent({
             .getUserRoles(orgId, newVal.email)
             .then((response: any) => {
               // custom_role arrives AFTER mount (async) — bridge it into the form
-              // so the OFormSelect displays it (the sanctioned setFieldValue
-              // bridge for data that arrives post-mount).
+              // so the OFormSelect displays it.
               form.setFieldValue("custom_role", response.data);
             })
             .catch((error: any) => {
@@ -604,8 +592,7 @@ export default defineComponent({
     };
 
     // Options-API: everything the template binds MUST be returned from setup() —
-    // a bare module import is out of the template's scope. The OWNER form, the
-    // reactive form-state reads, and the non-form context all flow through here.
+    // a bare module import is out of the template's scope.
     return {
       t,
       store,
@@ -647,7 +634,7 @@ export default defineComponent({
   },
   methods: {
     signout() {
-      // Always call backend logout to clear auth cookies (#10900)
+      // Always call backend logout to clear auth cookies
       this.invalidateLoginData();
 
       this.store.dispatch("logout");
diff --git a/web/src/components/iam/users/InvitationList.spec.ts b/web/src/components/iam/users/InvitationList.spec.ts
index b6f0dcc6a3..a543605f8c 100644
--- a/web/src/components/iam/users/InvitationList.spec.ts
+++ b/web/src/components/iam/users/InvitationList.spec.ts
@@ -120,7 +120,7 @@ async function mountInvitationList(props = {}) {
         QTablePagination: {
           props: ['scope', 'resultTotal', 'perPageOptions', 'position'],
           emits: ['update:changeRecordPerPage'],
-          template: '<div data-test="q-table-pagination-stub" />',
+          template: '<div data-test="table-pagination-stub" />',
         },
         ODialog: ODialogStub,
       },
@@ -189,11 +189,7 @@ describe('InvitationList - fetchPendingInvitations', () => {
     expect((wrapper.vm as any).resultTotal).toBe(2);
   });
 
-  it('adds row numbers to each invitation', async () => {
-    const wrapper = await mountInvitationList();
-    expect((wrapper.vm as any).invitations[0]['#']).toBe('01');
-    expect((wrapper.vm as any).invitations[1]['#']).toBe('02');
-  });
+  // Row numbering moved to OTable's built-in show-index (no '#' data field).
 
   it('formats the expiry for each invitation', async () => {
     const wrapper = await mountInvitationList();
diff --git a/web/src/components/iam/users/InvitationList.vue b/web/src/components/iam/users/InvitationList.vue
index aca865c8ab..a84cda6e67 100644
--- a/web/src/components/iam/users/InvitationList.vue
+++ b/web/src/components/iam/users/InvitationList.vue
@@ -15,16 +15,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="p-0 h-full flex flex-col">
-    <!-- Standard page header: title + icon + subtitle, matching the Users page. -->
-    <AppPageHeader
+  <OPageLayout
       :title="t('invitation.pendingInvitations')"
       :subtitle="t('iam.invitationList.subtitle')"
-      icon="mail"
-      class="shrink-0 px-4 border-b border-border-default"
-    />
+      icon="mail" bleed>
     <div class="w-full flex-1 min-h-0 overflow-hidden">
-      <div class="card-container h-full">
+      <div class="bg-card-glass-bg h-full">
         <OTable
           :data="invitations"
           :columns="columns"
@@ -37,6 +33,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           sorting="client"
           filter-mode="client"
           :default-columns="false"
+          show-index
           :enable-column-resize="true"
           :persist-columns="true"
           table-id="iam-invitations-list"
@@ -74,7 +71,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </template>
           <template #cell-role="{ row }">
             <OTag v-if="row.role" type="userRole" :value="row.role" />
-            <span v-else class="text-text-primary">—</span>
+            <span v-else class="text-text-muted">—</span>
           </template>
           <template #cell-inviter_id="{ row }">
             <OUserCell :value="row.inviter_id" />
@@ -108,7 +105,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </div>
           </template>
           <template #bottom>
-            <span class="o2-table-footer-title">
+            <span class="text-xs font-normal">
               {{ resultTotal }} {{ t('invitation.pendingInvitations') }}
             </span>
           </template>
@@ -139,7 +136,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     >
       <p>{{ t('invitation.confirmRejectMsg', { org: selectedInvitation?.org_name }) }}</p>
     </ODialog>
-  </div>
+  </OPageLayout>
 </template>
 
 <script lang="ts">
@@ -157,18 +154,18 @@ import type { OTableColumnDef } from "@/lib/core/Table/OTable.types";
 import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
 import OEmptyState from "@/lib/core/EmptyState/OEmptyState.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import usersService from "@/services/users";
 import organizationsService from "@/services/organizations";
 import { toast } from "@/lib/feedback/Toast/useToast";
-import { TABLE_INDEX_COL_SIZE, COL } from "@/lib/core/Table/OTable.types";
+import { COL } from "@/lib/core/Table/OTable.types";
 import { useShortcuts } from "@/lib/vue-shortcut-manager";
 import { isInputFocused } from "@/utils/keyboardShortcuts";
 
 export default defineComponent({
   name: "InvitationList",
   components: {
-    AppPageHeader,
+    OPageLayout,
     OEmptyState,
     OButton,
     OTooltip,
@@ -196,15 +193,6 @@ export default defineComponent({
     const selectedInvitation = ref(null);
 
     const columns: OTableColumnDef[] = [
-      {
-        id: "#",
-        header: "#",
-        accessorKey: "#",
-        size: TABLE_INDEX_COL_SIZE,
-        minSize: 40,
-        maxSize: 64,
-        meta: { align: "center", compactPadding: true },
-      },
       {
         id: "org_name",
         header: t("invitation.organizationName"),
@@ -275,9 +263,7 @@ export default defineComponent({
       try {
         const response = await usersService.getPendingInvites();
 
-        let counter = 1;
         invitations.value = response.data.data.map((invitation: any) => ({
-          "#": counter <= 9 ? `0${counter++}` : counter++,
           ...invitation,
           expiry: formatExpiry(invitation.expires_at),
         }));
diff --git a/web/src/components/iam/users/MemberInvitation.schema.ts b/web/src/components/iam/users/MemberInvitation.schema.ts
index dba987897b..02f0741e01 100644
--- a/web/src/components/iam/users/MemberInvitation.schema.ts
+++ b/web/src/components/iam/users/MemberInvitation.schema.ts
@@ -2,11 +2,9 @@
 //
 // Validation schema for MemberInvitation.vue (the inline invite row).
 //
-// MemberInvitation had no declarative validation rules — it validated imperatively
-// (`validateEmail()` per address + a button-disable on empty). This encodes that
-// intent into Zod: `email` is required AND every address (split on `;`/`,`) must
-// be a valid email. `role` defaults to "admin" (the old `selectedRole` default).
-// The component keeps the multi-email split/dedup in its submit handler.
+// `email` is required AND every address (split on `;`/`,`) must be a valid email.
+// `role` defaults to "admin". The component keeps the multi-email split/dedup in
+// its submit handler.
 //
 // Built via a factory so the invalid-email message stays i18n-driven (pass
 // useI18n's `t`).
diff --git a/web/src/components/iam/users/MemberInvitation.vue b/web/src/components/iam/users/MemberInvitation.vue
index 0b52fd5def..151747bf0d 100644
--- a/web/src/components/iam/users/MemberInvitation.vue
+++ b/web/src/components/iam/users/MemberInvitation.vue
@@ -15,7 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="rounded-md p-0" style="min-height: inherit">
+  <div class="rounded-default p-0" style="min-height: inherit">
     <div v-if="currentUserRole == 'admin' || currentUserRole == 'root'">
       <!-- Inline form (no dialog): the Save button lives inside <OForm>, so it is
            type="submit" — Enter submits natively, no form-id needed. -->
@@ -28,7 +28,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         @submit="onSubmit"
         v-slot="{ isSubmitting }"
       >
-        <div style="position: relative">
+        <div class="relative">
           <OFormInput
             name="email"
             :placeholder="t('user.inviteByEmail')"
diff --git a/web/src/components/iam/users/UpdateRole.schema.ts b/web/src/components/iam/users/UpdateRole.schema.ts
index ecc3c785e0..96670eecd6 100644
--- a/web/src/components/iam/users/UpdateRole.schema.ts
+++ b/web/src/components/iam/users/UpdateRole.schema.ts
@@ -1,9 +1,8 @@
 // Copyright 2026 OpenObserve Inc.
 //
-// Validation schema for UpdateRole.vue. `role` is required (the old imperative
-// `roleError = 'Role is required'` guard, now schema-driven). `first_name` is a
-// read-only display field — kept as an optional form entry per R1-strict so every
-// control inside <OForm> is an OForm* component, but excluded from any rule.
+// Validation schema for UpdateRole.vue. `role` is required. `first_name` is a
+// read-only display field — an optional form entry (so every control inside
+// <OForm> is an OForm* component) but excluded from any rule.
 //
 // Built via a factory so the required message stays i18n-driven (pass useI18n's
 // `t`). EDIT-prefill form: defaults (role/first_name from props.modelValue) live
diff --git a/web/src/components/iam/users/User.spec.ts b/web/src/components/iam/users/User.spec.ts
index 127c72e898..5d2d6781b3 100644
--- a/web/src/components/iam/users/User.spec.ts
+++ b/web/src/components/iam/users/User.spec.ts
@@ -170,7 +170,7 @@ const QTablePaginationStub = {
   name: "QTablePagination",
   props: ["scope", "resultTotal", "perPageOptions", "position"],
   emits: ["update:changeRecordPerPage"],
-  template: `<div class="q-table-pagination-stub" />`,
+  template: `<div class="table-pagination-stub" />`,
 };
 
 const mountUser = () =>
@@ -185,27 +185,7 @@ const mountUser = () =>
         MemberInvitation: MemberInvitationStub,
         NoData: NoDataStub,
         QTablePagination: QTablePaginationStub,
-        // Keep the table components shallow so we don't depend on real
-        // table internals; we still render their slots.
-        "q-page": { template: "<div><slot /></div>" },
-        "q-table": {
-          props: ["rows", "columns", "selected"],
-          template: '<div class="q-table-stub"><slot /></div>',
-        },
-        "q-input": {
-          props: ["modelValue"],
-          template: '<div class="q-input-stub"><slot name="prepend" /></div>',
-          emits: ["update:modelValue"],
-        },
         "OIcon": { template: "<i />" },
-        "q-td": { template: "<div><slot /></div>" },
-        "q-th": { template: "<div><slot /></div>" },
-        "q-tr": { template: "<div><slot /></div>" },
-        "q-checkbox": {
-          props: ["modelValue"],
-          template: '<div class="q-checkbox-stub" />',
-          emits: ["update:modelValue"],
-        },
         OButton: {
           props: ["variant", "size", "disabled", "loading"],
           template: '<button class="o-button-stub" @click="$emit(\'click\')"><slot /></button>',
diff --git a/web/src/components/iam/users/User.vue b/web/src/components/iam/users/User.vue
index f50c43b82a..93df1e3f0c 100644
--- a/web/src/components/iam/users/User.vue
+++ b/web/src/components/iam/users/User.vue
@@ -17,15 +17,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <!-- eslint-disable vue/v-on-event-hyphenation -->
 <!-- eslint-disable vue/attribute-hyphenation -->
 <template>
-  <div class="p-0 h-full flex flex-col">
-    <!-- Standard page header: title + actions only. The user search moved into
-         the table's own toolbar (built-in global filter) per the layout system. -->
-    <AppPageHeader
+  <OPageLayout
       :title="t('iam.basicUsers')"
       :subtitle="t('user.subtitle')"
-      icon="person"
-      class="shrink-0 px-4 border-b border-border-default"
-    >
+      icon="person" bleed>
       <template #actions>
         <member-invitation
           v-if="config.isCloud == 'true'"
@@ -43,9 +38,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           {{ t('user.add') }}
         </OButton>
       </template>
-    </AppPageHeader>
     <div class="w-full flex-1 min-h-0 overflow-hidden">
-      <div class="card-container h-full">
+      <div class="bg-card-glass-bg h-full">
         <OTable
           :key="tableKey"
           :frame="false"
@@ -65,6 +59,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :is-row-selectable="(row: any) => row.enableDelete"
           filter-mode="client"
           :default-columns="false"
+          show-index
           :enable-column-resize="true"
           :persist-columns="true"
           table-id="iam-users-list"
@@ -107,7 +102,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- Auth type badge (Native / SSO / LDAP) — enterprise/cloud only -->
           <template #cell-auth="{ row }">
             <OTag v-if="row.auth_type" type="authType" :value="row.auth_type" />
-            <span v-else class="text-text-primary">—</span>
+            <span v-else class="text-text-body">—</span>
           </template>
 
           <!-- Roles badges — typed userRole tags for built-in roles, custom
@@ -175,7 +170,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </OButton>
           </template>
           <template #bottom>
-            <span class="o2-table-footer-title">{{ rows.length }} {{ isEnterpriseOrCloud ? (t('iam.organizationMembers') || t('iam.user.organizationMembers')) : t('iam.basicUsers') }}</span>
+            <span class="text-xs font-normal">{{ rows.length }} {{ isEnterpriseOrCloud ? (t('iam.organizationMembers') || t('iam.user.organizationMembers')) : t('iam.basicUsers') }}</span>
             <OButton
               v-if="selectedUsers.length > 0"
               data-test="users-list-delete-users-btn"
@@ -244,7 +239,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     >
       <p>{{ t('user.deleteUsersMsg', { count: selectedUsers.length }) }}</p>
     </ODialog>
-  </div>
+  </OPageLayout>
 </template>
 
 <script lang="ts">
@@ -254,7 +249,7 @@ import OButton from "@/lib/core/Button/OButton.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
 import OTag from "@/lib/core/Badge/OTag.vue";
 import ODialog from "@/lib/overlay/Dialog/ODialog.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import OTable from "@/lib/core/Table/OTable.vue";
 import type { OTableColumnDef } from "@/lib/core/Table/OTable.types";
 import { useStore } from "vuex";
@@ -283,12 +278,12 @@ import { getRoles as getCustomRolesApi, getRoleUsers } from "@/services/iam";
 import { toast } from "@/lib/feedback/Toast/useToast";
 import { useShortcuts } from "@/lib/vue-shortcut-manager";
 import { focusSearchInput, isInputFocused } from "@/utils/keyboardShortcuts";
-import { TABLE_INDEX_COL_SIZE, COL } from "@/lib/core/Table/OTable.types";
+import { COL } from "@/lib/core/Table/OTable.types";
 
 export default defineComponent({
   name: "UserPageOpenSource",
   components: {
-    AppPageHeader,
+    OPageLayout,
     OTable,
     UpdateUserRole,
     AddUser,
@@ -392,15 +387,6 @@ export default defineComponent({
 
     const columns = computed<OTableColumnDef[]>(() => {
       const cols: OTableColumnDef[] = [
-        {
-          id: "#",
-          header: "#",
-          accessorFn: (row: any) => row["#"],
-          size: TABLE_INDEX_COL_SIZE,
-          minSize: 32,
-          maxSize: 50,
-          meta: { compactPadding: true, align: "left" },
-        },
         {
           id: "email",
           header: t("user.email"),
@@ -636,7 +622,6 @@ export default defineComponent({
               users = [...res.data.data, ...invitedMembers];
             }
 
-            let counter = 1;
             currentUserRole.value = "";
             usersState.users = users.map((data: any) => {
               if (store.state.userInfo.email?.toLowerCase() == data.email?.toLowerCase()) {
@@ -669,18 +654,16 @@ export default defineComponent({
 
 
               return {
-                "#": counter <= 9 ? `0${counter++}` : counter++,
                 email: maskText(data.email),
                 rawEmail: data.email,
                 first_name: data.first_name,
                 last_name: data.last_name,
-                // Store the display-cased role (e.g. "Admin", "Admin (Invited)") so
-                // the edit/update payloads stay byte-identical to pre-migration, which
-                // sent the capitalized value. The role options from getRoles use the
-                // lowercase value ("admin"), so this seeded "Admin" doesn't match an
-                // option — but OSelect renders the raw value as a fallback, so the
-                // field still displays "Admin" correctly. The only cosmetic quirk is
-                // that the open dropdown won't highlight the lowercase option as active.
+                // Store the display-cased role (e.g. "Admin", "Admin (Invited)").
+                // The role options from getRoles use the lowercase value ("admin"),
+                // so this seeded "Admin" doesn't match an option — but OSelect renders
+                // the raw value as a fallback, so the field still displays "Admin"
+                // correctly. The only cosmetic quirk is that the open dropdown won't
+                // highlight the lowercase option as active.
                 role:
                   data?.status == "pending"
                     ? toCamelCase(data.role) + " (Invited)"
@@ -711,11 +694,10 @@ export default defineComponent({
             // Enterprise/cloud: the org-members API only returns a single
             // `role` per user, so users with multiple role assignments
             // (e.g. Viewer + custom "nmcdev") look incomplete. Fetch the
-            // full role list for *all* users in a single request — fire-and-
-            // forget — and re-render the rows when it resolves. This replaces
-            // the previous one-request-per-user pattern (N auth checks + N
-            // OpenFGA reads) with a single batched call, and keeps the table
-            // responsive instead of blocking the whole UI on the role API.
+            // full role list for *all* users in a single batched request —
+            // fire-and-forget — and re-render the rows when it resolves,
+            // keeping the table responsive instead of blocking the whole UI
+            // on the role API.
             if (isEnterpriseOrCloud) {
               const orgId = store.state.selectedOrganization.identifier;
               // Don't await — let the batched role fetch run in the background.
@@ -790,8 +772,7 @@ export default defineComponent({
     // Refresh handler for the toolbar refresh button. getOrgMembers() only seeds
     // default action flags on each row — the real per-row permissions are
     // computed by updateUserActions(), so it must run after every reload (this
-    // mirrors the onBeforeMount sequence). Binding refresh straight to
-    // getOrgMembers skipped this step and blanked out all row actions.
+    // mirrors the onBeforeMount sequence).
     const refreshUsers = async () => {
       try {
         await getOrgMembers();
@@ -1348,12 +1329,13 @@ export default defineComponent({
 });
 </script>
 
-<style>
+<style scoped>
+/* keep(lib-override): compact role chip styling (child OTag DOM) */
 :deep(.o2-role-chip) {
-  padding: 2px 8px;
-  font-size: 11px;
+  padding: 0.125rem 0.5rem;
+  font-size: var(--text-2xs);
   font-weight: 600;
-  border-radius: 6px;
+  border-radius: 0.375rem;
   line-height: 1.4;
 }
 </style>
diff --git a/web/src/components/icons/FunctionIcon.spec.ts b/web/src/components/icons/FunctionIcon.spec.ts
deleted file mode 100644
index a7f2fd96de..0000000000
--- a/web/src/components/icons/FunctionIcon.spec.ts
+++ /dev/null
@@ -1,316 +0,0 @@
-import { describe, it, expect, vi, afterEach } from 'vitest';
-import { mount, VueWrapper } from '@vue/test-utils';
-import FunctionIcon from '@/components/icons/FunctionIcon.vue';
-
-
-describe('FunctionIcon.vue', () => {
-  let wrapper: VueWrapper;
-
-  afterEach(() => {
-    if (wrapper) {
-      wrapper.unmount();
-    }
-  });
-
-  const createWrapper = () => {
-    return mount(FunctionIcon, {
-      global: {
-        plugins: []
-      }
-    });
-  };
-
-  describe('Component Rendering', () => {
-    it('renders the component correctly', () => {
-      wrapper = createWrapper();
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it('has correct component name', () => {
-      wrapper = createWrapper();
-      expect(wrapper.vm.$options.name).toBe('FunctionIcon');
-    });
-
-    it('renders SVG element', () => {
-      wrapper = createWrapper();
-      const svg = wrapper.find('svg');
-      expect(svg.exists()).toBe(true);
-    });
-
-    it('has correct SVG attributes', () => {
-      wrapper = createWrapper();
-      const svg = wrapper.find('svg');
-      
-      expect(svg.attributes('xmlns')).toBe('http://www.w3.org/2000/svg');
-      expect(svg.attributes('width')).toBe('512');
-      expect(svg.attributes('height')).toBe('512');
-      expect(svg.attributes('viewBox')).toBe('0 0 95.177 95.177');
-      expect(svg.attributes('fill')).toBe('currentColor');
-    });
-
-    it('contains path element within group', () => {
-      wrapper = createWrapper();
-      const group = wrapper.find('g');
-      const path = wrapper.find('path');
-      
-      expect(group.exists()).toBe(true);
-      expect(path.exists()).toBe(true);
-    });
-
-    it('has complex path data for function icon', () => {
-      wrapper = createWrapper();
-      const path = wrapper.find('path');
-      
-      expect(path.attributes('d')).toBeTruthy();
-      expect(path.attributes('d')?.length).toBeGreaterThan(100);
-    });
-  });
-
-  describe('Component Structure', () => {
-    it('is a complex SVG icon component', () => {
-      wrapper = createWrapper();
-      
-      expect(wrapper.element.tagName).toBe('svg');
-      expect(wrapper.find('g').exists()).toBe(true);
-      expect(wrapper.find('path').exists()).toBe(true);
-    });
-
-    it('uses currentColor for dynamic styling', () => {
-      wrapper = createWrapper();
-      const svg = wrapper.find('svg');
-      
-      expect(svg.attributes('fill')).toBe('currentColor');
-    });
-
-    it('has larger icon dimensions than simple icons', () => {
-      wrapper = createWrapper();
-      const svg = wrapper.find('svg');
-      
-      expect(svg.attributes('width')).toBe('512');
-      expect(svg.attributes('height')).toBe('512');
-    });
-
-    it('includes proper SVG namespace declarations', () => {
-      wrapper = createWrapper();
-      const svg = wrapper.find('svg');
-      
-      expect(svg.attributes('xmlns')).toBe('http://www.w3.org/2000/svg');
-      expect(svg.attributes('xmlns:xlink')).toBe('http://www.w3.org/1999/xlink');
-    });
-  });
-
-  describe('SVG Properties', () => {
-    it('has version attribute', () => {
-      wrapper = createWrapper();
-      const svg = wrapper.find('svg');
-      
-      expect(svg.attributes('version')).toBe('1.1');
-    });
-
-    it('has xml:space preserve attribute', () => {
-      wrapper = createWrapper();
-      const svg = wrapper.find('svg');
-      
-      expect(svg.attributes('xml:space')).toBe('preserve');
-    });
-
-    it('has style attribute for background', () => {
-      wrapper = createWrapper();
-      const svg = wrapper.find('svg');
-
-      // Note: jsdom 27+ may not preserve inline style attributes in the same way
-      // The component template has style="enable-background: new 0 0 512 512"
-      // which is sufficient for proper rendering
-      expect(svg.exists()).toBe(true);
-    });
-
-    it('has coordinate attributes', () => {
-      wrapper = createWrapper();
-      const svg = wrapper.find('svg');
-      
-      expect(svg.attributes('x')).toBe('0');
-      expect(svg.attributes('y')).toBe('0');
-    });
-  });
-
-  describe('Icon Semantics', () => {
-    it('represents function functionality', () => {
-      wrapper = createWrapper();
-      
-      expect(wrapper.vm.$options.name).toBe('FunctionIcon');
-    });
-
-    it('contains mathematical function symbol path', () => {
-      wrapper = createWrapper();
-      const path = wrapper.find('path');
-      
-      // Function icon should have complex mathematical symbol path
-      expect(path.attributes('d')).toContain('M93.779');
-      expect(path.attributes('d')).toContain('c');
-    });
-
-    it('has proper viewBox for mathematical symbol', () => {
-      wrapper = createWrapper();
-      const svg = wrapper.find('svg');
-      
-      expect(svg.attributes('viewBox')).toBe('0 0 95.177 95.177');
-    });
-  });
-
-  describe('Vue 3 Integration', () => {
-    it('uses defineComponent correctly', () => {
-      wrapper = createWrapper();
-      expect(wrapper.vm).toBeTruthy();
-    });
-
-    it('has no reactive state', () => {
-      wrapper = createWrapper();
-      
-      expect(wrapper.vm.$data).toEqual({});
-    });
-
-    it('mounts without errors', () => {
-      expect(() => {
-        wrapper = createWrapper();
-      }).not.toThrow();
-    });
-
-    it('unmounts cleanly', () => {
-      wrapper = createWrapper();
-      
-      expect(() => {
-        wrapper.unmount();
-      }).not.toThrow();
-    });
-  });
-
-  describe('Accessibility and Styling', () => {
-    it('supports color inheritance for theming', () => {
-      wrapper = createWrapper();
-      const svg = wrapper.find('svg');
-      
-      expect(svg.attributes('fill')).toBe('currentColor');
-    });
-
-    it('is scalable with viewBox', () => {
-      wrapper = createWrapper();
-      const svg = wrapper.find('svg');
-      
-      expect(svg.attributes('viewBox')).toBeTruthy();
-    });
-
-    it('has semantic SVG structure', () => {
-      wrapper = createWrapper();
-      
-      expect(wrapper.element.tagName).toBe('svg');
-      expect(wrapper.element.getAttribute('xmlns')).toBe('http://www.w3.org/2000/svg');
-    });
-
-    it('includes class attribute for CSS targeting', () => {
-      wrapper = createWrapper();
-      const svg = wrapper.find('svg');
-      
-      expect(svg.attributes('class')).toBe('');
-    });
-  });
-
-  describe('Performance', () => {
-    it('is a lightweight component despite complex SVG', () => {
-      wrapper = createWrapper();
-      
-      // Should be stateless
-      expect(Object.keys(wrapper.vm.$data)).toHaveLength(0);
-    });
-
-    it('requires no external dependencies beyond Vue', () => {
-      wrapper = createWrapper();
-      
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it('renders immediately on mount', () => {
-      wrapper = createWrapper();
-      
-      expect(wrapper.find('svg').exists()).toBe(true);
-      expect(wrapper.find('path').exists()).toBe(true);
-    });
-
-    it('has no side effects', () => {
-      const consoleSpy = vi.spyOn(console, 'warn');
-      wrapper = createWrapper();
-      
-      expect(consoleSpy).not.toHaveBeenCalled();
-      consoleSpy.mockRestore();
-    });
-  });
-
-  describe('Comparison with Other Icons', () => {
-    it('has different structure than simple sort icons', () => {
-      wrapper = createWrapper();
-      
-      // More complex than AscSort/DescSort
-      expect(wrapper.find('g').exists()).toBe(true);
-      expect(wrapper.attributes('width')).toBe('512'); // Larger than 20
-    });
-
-    it('maintains consistent icon interface', () => {
-      wrapper = createWrapper();
-      
-      // Same basic structure as other icons
-      expect(wrapper.element.tagName).toBe('svg');
-      expect(wrapper.find('path').exists()).toBe(true);
-      expect(wrapper.vm.$options.name).toContain('Icon');
-    });
-
-    it('uses different sizing approach', () => {
-      wrapper = createWrapper();
-      const svg = wrapper.find('svg');
-      
-      // Uses 512x512 instead of 20x20
-      expect(svg.attributes('width')).toBe('512');
-      expect(svg.attributes('height')).toBe('512');
-    });
-  });
-
-  describe('Component Lifecycle', () => {
-    it('initializes correctly', () => {
-      wrapper = createWrapper();
-      
-      expect(wrapper.vm.$options.name).toBe('FunctionIcon');
-      expect(wrapper.element.tagName).toBe('svg');
-    });
-
-    it('handles multiple mount/unmount cycles', () => {
-      for (let i = 0; i < 3; i++) {
-        wrapper = createWrapper();
-        expect(wrapper.exists()).toBe(true);
-        wrapper.unmount();
-      }
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('handles CSS styling correctly', () => {
-      wrapper = createWrapper();
-      const svg = wrapper.find('svg');
-      
-      // Should accept external CSS
-      expect(svg.attributes('class')).toBeDefined();
-    });
-
-    it('works with different parent contexts', () => {
-      // Should work regardless of parent component
-      wrapper = createWrapper();
-      
-      expect(wrapper.find('svg').exists()).toBe(true);
-    });
-
-    it('maintains aspect ratio', () => {
-      wrapper = createWrapper();
-      const svg = wrapper.find('svg');
-      
-      // Width and height should be equal for square aspect ratio
-      expect(svg.attributes('width')).toBe(svg.attributes('height'));
-    });
-  });
-});
\ No newline at end of file
diff --git a/web/src/components/icons/FunctionIcon.vue b/web/src/components/icons/FunctionIcon.vue
deleted file mode 100644
index ff0df1fa90..0000000000
--- a/web/src/components/icons/FunctionIcon.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    version="1.1"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-    width="512"
-    height="512"
-    x="0"
-    y="0"
-    viewBox="0 0 95.177 95.177"
-    style="enable-background: new 0 0 512 512"
-    xml:space="preserve"
-    fill="currentColor"
-    class=""
-  >
-    <g>
-      <path
-        d="M93.779 63.676c-.981-1.082-2.24-1.653-3.639-1.653-1.145 0-3.953.396-5.318 4.062-.344.922-.443 1.413-.907 1.363-.786-.078-3.845-3.346-4.845-8.145l-2.482-11.6c1.961-3.177 3.977-5.629 5.988-7.292 1.08-.882 2.314-1.349 3.808-1.43 3.815-.26 5.203-.74 6.14-1.399 1.547-1.115 2.397-2.728 2.397-4.542 0-1.596-.604-3.019-1.75-4.115-1.106-1.059-2.581-1.618-4.26-1.618-2.468 0-5.239 1.142-8.474 3.49-1.91 1.388-3.935 3.406-6.121 6.111-.711-2.653-1.319-3.889-1.771-4.628-1.396-2.303-3.664-2.303-4.41-2.303l-.813.013-23.045.544 1.297-5.506c.828-3.593 1.915-6.436 3.226-8.45.638-.98 1.614-2.148 2.638-2.148.387 0 1.152.063 2.582.36 3.978.86 5.465.959 6.239.959 1.708 0 3.21-.571 4.347-1.651 1.176-1.119 1.797-2.583 1.797-4.233 0-1.29-.424-3.156-2.445-4.722-1.396-1.081-3.311-1.629-5.691-1.629-3.568 0-7.349 1.141-11.241 3.39-3.862 2.232-7.038 5.317-9.438 9.171-2.105 3.379-3.929 8.124-5.555 14.459H21.877l-2.238 8.831h10.186l-7.74 31.116c-1.603 6.443-2.777 8.028-3.098 8.361-.875.904-2.68 1.094-4.04 1.094-1.683 0-3.477-.121-5.349-.361-1.286-.157-2.265-.234-2.991-.234-1.878 0-3.423.488-4.59 1.448C.716 81.858 0 83.403 0 85.14c0 1.357.44 3.309 2.539 4.895 1.434 1.08 3.389 1.628 5.813 1.628 6.069 0 11.725-2.411 16.813-7.165 4.947-4.624 8.571-11.413 10.773-20.195l6.119-24.935 20.87.354 2.244 9.64-4.573 6.748c-.824 1.209-2.051 2.701-3.658 4.441-.84.92-1.398 1.426-1.721 1.689-1.316-1.608-2.809-2.424-4.432-2.424-1.525 0-2.91.625-4.002 1.804a5.84 5.84 0 0 0-1.583 4.038c0 1.83.783 3.459 2.264 4.709 1.357 1.146 3.034 1.728 4.981 1.728 2.414 0 4.884-.921 7.344-2.737 2.053-1.519 4.697-4.526 8.074-9.189 2.17 6.24 5.248 10.252 6.714 11.927 2.313 2.644 6.049 4.22 9.993 4.22 3.348 0 5.244-1.402 6.916-2.641l.148-.109c2.926-2.164 3.54-4.545 3.54-6.166-.002-1.435-.485-2.721-1.397-3.724z"
-      ></path>
-    </g>
-  </svg>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  name: "FunctionIcon",
-});
-</script>
diff --git a/web/src/components/icons/PipelineIcon.spec.ts b/web/src/components/icons/PipelineIcon.spec.ts
deleted file mode 100644
index 22e83cd517..0000000000
--- a/web/src/components/icons/PipelineIcon.spec.ts
+++ /dev/null
@@ -1,340 +0,0 @@
-import { describe, it, expect, vi, afterEach } from 'vitest';
-import { mount, VueWrapper } from '@vue/test-utils';
-import PipelineIcon from '@/components/icons/PipelineIcon.vue';
-
-
-describe('PipelineIcon.vue', () => {
-  let wrapper: VueWrapper;
-
-  afterEach(() => {
-    if (wrapper) {
-      wrapper.unmount();
-    }
-  });
-
-  const createWrapper = () => {
-    return mount(PipelineIcon, {
-      global: {
-        plugins: []
-      }
-    });
-  };
-
-  describe('Component Rendering', () => {
-    it('renders the component correctly', () => {
-      wrapper = createWrapper();
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it('renders SVG element', () => {
-      wrapper = createWrapper();
-      const svg = wrapper.find('svg');
-      expect(svg.exists()).toBe(true);
-    });
-
-    it('has correct SVG attributes', () => {
-      wrapper = createWrapper();
-      const svg = wrapper.find('svg');
-      
-      expect(svg.attributes('width')).toBe('24');
-      expect(svg.attributes('height')).toBe('24');
-      expect(svg.attributes('viewBox')).toBe('0 0 24 24');
-      expect(svg.attributes('xmlns')).toBe('http://www.w3.org/2000/svg');
-    });
-
-    it('contains path element', () => {
-      wrapper = createWrapper();
-      const path = wrapper.find('path');
-      
-      expect(path.exists()).toBe(true);
-    });
-
-    it('has complex path data for pipeline icon', () => {
-      wrapper = createWrapper();
-      const path = wrapper.find('path');
-      
-      expect(path.attributes('d')).toBeTruthy();
-      expect(path.attributes('d')?.length).toBeGreaterThan(100);
-      expect(path.attributes('d')).toContain('M22.0006');
-    });
-  });
-
-  describe('Component Structure', () => {
-    it('is a simple SVG icon component with setup syntax', () => {
-      wrapper = createWrapper();
-      
-      expect(wrapper.element.tagName).toBe('svg');
-      expect(wrapper.find('path').exists()).toBe(true);
-    });
-
-    it('has standard icon dimensions', () => {
-      wrapper = createWrapper();
-      const svg = wrapper.find('svg');
-      
-      expect(svg.attributes('width')).toBe('24');
-      expect(svg.attributes('height')).toBe('24');
-    });
-
-    it('uses square viewBox', () => {
-      wrapper = createWrapper();
-      const svg = wrapper.find('svg');
-      
-      expect(svg.attributes('viewBox')).toBe('0 0 24 24');
-    });
-
-    it('has single path element', () => {
-      wrapper = createWrapper();
-      const paths = wrapper.findAll('path');
-      
-      expect(paths.length).toBe(1);
-    });
-  });
-
-  describe('Vue 3 Setup Syntax', () => {
-    it('uses setup syntax correctly', () => {
-      wrapper = createWrapper();
-      expect(wrapper.vm).toBeTruthy();
-    });
-
-    it('has no reactive state', () => {
-      wrapper = createWrapper();
-      
-      expect(wrapper.vm.$data).toEqual({});
-    });
-
-    it('mounts without errors', () => {
-      expect(() => {
-        wrapper = createWrapper();
-      }).not.toThrow();
-    });
-
-    it('unmounts cleanly', () => {
-      wrapper = createWrapper();
-      
-      expect(() => {
-        wrapper.unmount();
-      }).not.toThrow();
-    });
-  });
-
-  describe('Icon Semantics', () => {
-    it('represents pipeline functionality', () => {
-      wrapper = createWrapper();
-      
-      // File name suggests pipeline functionality
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it('contains connected nodes pattern in path', () => {
-      wrapper = createWrapper();
-      const path = wrapper.find('path');
-      
-      // Pipeline icon should have complex connecting path data
-      expect(path.attributes('d')).toContain('C');
-      expect(path.attributes('d')).toContain('M');
-    });
-
-    it('has proper aspect ratio for icon usage', () => {
-      wrapper = createWrapper();
-      const svg = wrapper.find('svg');
-      
-      expect(svg.attributes('width')).toBe(svg.attributes('height'));
-    });
-  });
-
-  describe('Accessibility and Styling', () => {
-    it('uses semantic SVG structure', () => {
-      wrapper = createWrapper();
-      
-      expect(wrapper.element.tagName).toBe('svg');
-      expect(wrapper.element.getAttribute('xmlns')).toBe('http://www.w3.org/2000/svg');
-    });
-
-    it('is scalable with viewBox', () => {
-      wrapper = createWrapper();
-      const svg = wrapper.find('svg');
-      
-      expect(svg.attributes('viewBox')).toBeTruthy();
-    });
-
-    it('has no hardcoded colors', () => {
-      wrapper = createWrapper();
-      const path = wrapper.find('path');
-      
-      // Should rely on currentColor or CSS for coloring
-      expect(path.attributes('fill')).toBeUndefined();
-      expect(path.attributes('stroke')).toBeUndefined();
-    });
-
-    it('supports CSS styling', () => {
-      wrapper = createWrapper();
-      const svg = wrapper.find('svg');
-      
-      // SVG should be styleable via CSS
-      expect(svg.exists()).toBe(true);
-    });
-  });
-
-  describe('Performance', () => {
-    it('is a lightweight component', () => {
-      wrapper = createWrapper();
-      
-      // Should be stateless
-      expect(Object.keys(wrapper.vm.$data)).toHaveLength(0);
-    });
-
-    it('requires no external dependencies beyond Vue', () => {
-      wrapper = createWrapper();
-      
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it('renders immediately on mount', () => {
-      wrapper = createWrapper();
-      
-      expect(wrapper.find('svg').exists()).toBe(true);
-      expect(wrapper.find('path').exists()).toBe(true);
-    });
-
-    it('has no side effects', () => {
-      const consoleSpy = vi.spyOn(console, 'warn');
-      wrapper = createWrapper();
-      
-      expect(consoleSpy).not.toHaveBeenCalled();
-      consoleSpy.mockRestore();
-    });
-  });
-
-  describe('Comparison with Other Icons', () => {
-    it('uses modern Vue 3 setup syntax unlike defineComponent icons', () => {
-      wrapper = createWrapper();
-      
-      // Uses setup syntax instead of defineComponent
-      expect(wrapper.vm).toBeTruthy();
-    });
-
-    it('maintains consistent 24x24 sizing', () => {
-      wrapper = createWrapper();
-      const svg = wrapper.find('svg');
-      
-      // Uses 24x24 sizing unlike 20x20 or 512x512 icons
-      expect(svg.attributes('width')).toBe('24');
-      expect(svg.attributes('height')).toBe('24');
-    });
-
-    it('has similar structure to other simple icons', () => {
-      wrapper = createWrapper();
-      
-      // Same basic structure as other icons
-      expect(wrapper.element.tagName).toBe('svg');
-      expect(wrapper.find('path').exists()).toBe(true);
-    });
-  });
-
-  describe('Template Structure', () => {
-    it('uses template-only approach', () => {
-      wrapper = createWrapper();
-      
-      // Component should be primarily template-based
-      expect(wrapper.find('svg').exists()).toBe(true);
-    });
-
-    it('has minimal script section', () => {
-      wrapper = createWrapper();
-      
-      // Uses empty setup script
-      expect(wrapper.vm).toBeTruthy();
-    });
-
-    it('has scoped styles section', () => {
-      wrapper = createWrapper();
-      
-      // Component structure allows for scoped styling
-      expect(wrapper.exists()).toBe(true);
-    });
-  });
-
-  describe('Component Lifecycle', () => {
-    it('initializes correctly with setup syntax', () => {
-      wrapper = createWrapper();
-      
-      expect(wrapper.element.tagName).toBe('svg');
-    });
-
-    it('handles multiple mount/unmount cycles', () => {
-      for (let i = 0; i < 3; i++) {
-        wrapper = createWrapper();
-        expect(wrapper.exists()).toBe(true);
-        wrapper.unmount();
-      }
-    });
-
-    it('maintains consistent behavior across mounts', () => {
-      const firstWrapper = createWrapper();
-      const firstSvg = firstWrapper.find('svg');
-      firstWrapper.unmount();
-      
-      const secondWrapper = createWrapper();
-      const secondSvg = secondWrapper.find('svg');
-      
-      expect(firstSvg.attributes('viewBox')).toBe(secondSvg.attributes('viewBox'));
-      secondWrapper.unmount();
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('handles CSS inheritance correctly', () => {
-      wrapper = createWrapper();
-      const svg = wrapper.find('svg');
-      
-      // Should work with inherited styles
-      expect(svg.exists()).toBe(true);
-    });
-
-    it('works in different parent contexts', () => {
-      // Should work regardless of parent component
-      wrapper = createWrapper();
-      
-      expect(wrapper.find('svg').exists()).toBe(true);
-    });
-
-    it('maintains vector quality at different sizes', () => {
-      wrapper = createWrapper();
-      const svg = wrapper.find('svg');
-      
-      // SVG should scale without quality loss
-      expect(svg.attributes('viewBox')).toBe('0 0 24 24');
-    });
-
-    it('handles theme changes gracefully', () => {
-      wrapper = createWrapper();
-      
-      // Should adapt to theme changes via CSS
-      expect(wrapper.find('svg').exists()).toBe(true);
-    });
-  });
-
-  describe('Integration', () => {
-    it('can be used in button contexts', () => {
-      wrapper = createWrapper();
-      
-      // Icon should be suitable for buttons
-      expect(wrapper.find('svg').attributes('width')).toBe('24');
-    });
-
-    it('can be used in list contexts', () => {
-      wrapper = createWrapper();
-      
-      // Icon should be suitable for lists
-      expect(wrapper.find('svg').exists()).toBe(true);
-    });
-
-    it('supports accessibility attributes', () => {
-      wrapper = createWrapper();
-      const svg = wrapper.find('svg');
-      
-      // SVG structure supports aria-label and other a11y attributes
-      expect(svg.exists()).toBe(true);
-    });
-  });
-});
\ No newline at end of file
diff --git a/web/src/components/icons/PipelineIcon.vue b/web/src/components/icons/PipelineIcon.vue
deleted file mode 100644
index b64f665bcb..0000000000
--- a/web/src/components/icons/PipelineIcon.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-    fill="currentColor"
-  >
-    <path
-      d="M22.0006 18.5019C22.0005 19.4686 21.6587 20.2935 20.9753 20.9768C20.2919 21.6601 19.4669 22.0016 18.5002 22.0016C17.5336 22.0015 16.7086 21.6597 16.0253 20.9763C15.3421 20.2929 15.0005 19.4679 15.0006 18.5012C15.0006 18.2012 15.0381 17.9096 15.1132 17.6262C15.1882 17.3429 15.2924 17.0763 15.4257 16.8263L11.6011 13.0009L8.85109 13.0006C8.63436 13.734 8.2218 14.3339 7.61342 14.8005C7.00505 15.2671 6.30086 15.5004 5.50086 15.5003C4.53419 15.5002 3.70922 15.1585 3.02595 14.4751C2.34269 13.7917 2.0011 12.9667 2.00119 12C2.00128 11.0333 2.34302 10.2084 3.02642 9.5251C3.70982 8.84183 4.53485 8.50024 5.50152 8.50033C6.30152 8.50041 7.00566 8.73381 7.61395 9.20053C8.22224 9.66725 8.63469 10.2673 8.85128 11.0006L11.6013 11.0009L15.4266 7.15127C15.2933 6.90126 15.1892 6.63875 15.1142 6.36374C15.0392 6.08873 15.0018 5.80123 15.0018 5.50123C15.0019 4.53456 15.3436 3.70959 16.027 3.02632C16.7104 2.34306 17.5355 2.00147 18.5021 2.00156C19.4688 2.00165 20.2938 2.34339 20.977 3.02679C21.6603 3.71019 22.0019 4.53522 22.0018 5.50189C22.0017 6.46856 21.66 7.29352 20.9766 7.97679C20.2932 8.66006 19.4681 9.00165 18.5015 9.00156C18.2015 9.00153 17.9098 8.964 17.6265 8.88898C17.3432 8.81395 17.0765 8.70976 16.8265 8.5764L13.4012 12.0011L16.8259 15.4264C17.0759 15.2931 17.3426 15.1889 17.6259 15.114C17.9092 15.039 18.2009 15.0015 18.5009 15.0016C19.4676 15.0016 20.2925 15.3434 20.9758 16.0268C21.6591 16.7102 22.0007 17.5352 22.0006 18.5019ZM20.0018 5.5017C20.0018 5.08503 19.856 4.73085 19.5644 4.43916C19.2728 4.14746 18.9186 4.0016 18.5019 4.00156C18.0853 4.00152 17.7311 4.14732 17.4394 4.43896C17.1477 4.7306 17.0018 5.08475 17.0018 5.50142C17.0018 5.91808 17.1476 6.27226 17.4392 6.56396C17.7308 6.85565 18.085 7.00152 18.5017 7.00156C18.9183 7.0016 19.2725 6.8558 19.5642 6.56416C19.8559 6.27252 20.0018 5.91837 20.0018 5.5017ZM7.00119 12.0005C7.00123 11.5838 6.85543 11.2296 6.56379 10.9379C6.27215 10.6462 5.918 10.5004 5.50133 10.5003C5.08466 10.5003 4.73048 10.6461 4.43879 10.9377C4.14709 11.2294 4.00123 11.5835 4.00119 12.0002C4.00115 12.4169 4.14695 12.771 4.43859 13.0627C4.73023 13.3544 5.08438 13.5003 5.50105 13.5003C5.91771 13.5004 6.27189 13.3546 6.56359 13.0629C6.85528 12.7713 7.00115 12.4171 7.00119 12.0005ZM20.0006 18.5017C20.0006 18.085 19.8548 17.7309 19.5632 17.4392C19.2715 17.1475 18.9174 17.0016 18.5007 17.0016C18.084 17.0015 17.7299 17.1473 17.4382 17.439C17.1465 17.7306 17.0006 18.0848 17.0006 18.5014C17.0005 18.9181 17.1463 19.2723 17.438 19.564C17.7296 19.8557 18.0838 20.0015 18.5004 20.0016C18.9171 20.0016 19.2713 19.8558 19.563 19.5642C19.8547 19.2725 20.0005 18.9184 20.0006 18.5017Z"
-    />
-  </svg>
-</template>
-
-<script setup lang="ts"></script>
-
diff --git a/web/src/components/icons/SubTaskArrow.vue b/web/src/components/icons/SubTaskArrow.vue
index 596c5c8120..dcef96f524 100644
--- a/web/src/components/icons/SubTaskArrow.vue
+++ b/web/src/components/icons/SubTaskArrow.vue
@@ -5,8 +5,8 @@
     height="12"
     viewBox="0 0 24 24"
     fill="none"
-    stroke="#001495"
-    stroke-opacity="0.5"
+    stroke="currentColor"
+    stroke-opacity="0.6"
     stroke-width="2"
     stroke-linecap="round"
     stroke-linejoin="round"
diff --git a/web/src/components/ingestion/AIIntegrations.spec.ts b/web/src/components/ingestion/AIIntegrations.spec.ts
index b32c7bd1c5..7ca03ac224 100644
--- a/web/src/components/ingestion/AIIntegrations.spec.ts
+++ b/web/src/components/ingestion/AIIntegrations.spec.ts
@@ -43,17 +43,8 @@ describe("AIIntegrations", () => {
       global: {
         plugins: [store, i18n],
         stubs: {
-          "q-input": true,
           "OIcon": true,
           "router-view": true,
-          "q-tabs": {
-            template: '<div class="q-tabs-stub"><slot /></div>',
-          },
-          "q-tab": {
-            template:
-              '<div class="q-tab-stub" :data-test="$attrs[\'data-test\']">{{ $attrs.label }}</div>',
-            inheritAttrs: false,
-          },
         },
       },
     });
diff --git a/web/src/components/ingestion/AIIntegrations.vue b/web/src/components/ingestion/AIIntegrations.vue
index 2704a80204..1bde5da81d 100644
--- a/web/src/components/ingestion/AIIntegrations.vue
+++ b/web/src/components/ingestion/AIIntegrations.vue
@@ -80,14 +80,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       <template #icon>
                         <img
                           v-if="(integration.logo || integration.logoDark) && !failedLogos.has(integration.slug)"
-                          :src="(store.state.theme === 'dark' && integration.logoDark) || integration.logo"
+                          :src="(isDark && integration.logoDark) || integration.logo"
                           :alt="`${integration.name} logo`"
-                          class="ai-menu-logo"
+                          class="w-4.5 h-4.5 rounded-default flex-none object-contain"
                           loading="lazy"
                           referrerpolicy="no-referrer"
                           @error="onLogoError(integration.slug)"
                         />
-                        <span v-else class="ai-menu-mono" aria-hidden="true">{{
+                        <span
+                          v-else
+                          class="w-4.5 h-4.5 rounded-default flex-none grid place-items-center bg-theme-accent text-text-inverse text-3xs font-bold leading-none"
+                          aria-hidden="true"
+                        >{{
                           integration.name.charAt(0)
                         }}</span>
                       </template>
@@ -101,7 +105,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
         <template v-slot:after>
           <div class="w-full h-full">
-            <div class="card-container h-full" data-test="ai-integrations-detail-pane">
+            <div class="bg-card-glass-bg h-full" data-test="ai-integrations-detail-pane">
               <div class="overflow-auto h-full pt-0.5">
                 <router-view />
               </div>
@@ -117,6 +121,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { defineComponent, ref, computed, watch, onBeforeMount } from "vue";
 import { useI18n } from "vue-i18n";
 import { useStore } from "vuex";
+import { useTheme } from "@/composables/useTheme";
 import { useRouter, useRoute } from "vue-router";
 import { aiCategories } from "./ai/data";
 import OTabs from '@/lib/navigation/Tabs/OTabs.vue';
@@ -130,6 +135,7 @@ export default defineComponent({
   setup() {
     const { t } = useI18n();
     const store = useStore();
+    const { isDark } = useTheme();
     const router = useRouter();
     const route = useRoute();
 
@@ -222,6 +228,7 @@ export default defineComponent({
     return {
       t,
       store,
+      isDark,
       aiCategories,
       selectedCategory,
       selectedIntegration,
@@ -237,26 +244,3 @@ export default defineComponent({
 });
 </script>
 
-<style scoped lang="scss">
-/* Sidebar provider logo / monogram — every item gets a marker (logo URL from the
-   manifest, else a lettered tile in the app theme color, matching the card hero). */
-.ai-menu-logo,
-.ai-menu-mono {
-  width: 18px;
-  height: 18px;
-  border-radius: 5px;
-  flex: none;
-}
-.ai-menu-logo {
-  object-fit: contain;
-}
-.ai-menu-mono {
-  display: grid;
-  place-items: center;
-  background: var(--q-primary, #3f7994);
-  color: #fff;
-  font-size: 10.5px;
-  font-weight: 700;
-  line-height: 1;
-}
-</style>
diff --git a/web/src/components/ingestion/Database.vue b/web/src/components/ingestion/Database.vue
index cd92b54ef7..06b588cf82 100644
--- a/web/src/components/ingestion/Database.vue
+++ b/web/src/components/ingestion/Database.vue
@@ -23,7 +23,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     search-data-test="database-list-search-input"
   >
     <div class="w-full h-full">
-      <div class="card-container h-full">
+      <div class="bg-card-glass-bg h-full">
         <div class="overflow-auto h-full pt-0.5">
           <router-view
             :title="tabs"
diff --git a/web/src/components/ingestion/DevOps.vue b/web/src/components/ingestion/DevOps.vue
index 5b2bcf79a2..252d634c29 100644
--- a/web/src/components/ingestion/DevOps.vue
+++ b/web/src/components/ingestion/DevOps.vue
@@ -23,7 +23,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     search-data-test="devops-list-search-input"
   >
     <div class="w-full h-full">
-      <div class="card-container h-full">
+      <div class="bg-card-glass-bg h-full">
         <div class="overflow-auto h-full pt-0.5">
           <router-view
             :title="tabs"
diff --git a/web/src/components/ingestion/Languages.vue b/web/src/components/ingestion/Languages.vue
index d72697090c..a2ad9a27b4 100644
--- a/web/src/components/ingestion/Languages.vue
+++ b/web/src/components/ingestion/Languages.vue
@@ -23,7 +23,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     search-data-test="language-list-search-input"
   >
     <div class="w-full h-full">
-      <div class="card-container h-full">
+      <div class="bg-card-glass-bg h-full">
         <div class="overflow-auto h-full pt-0.5">
           <router-view
             :title="tabs"
diff --git a/web/src/components/ingestion/McpCrossLink.vue b/web/src/components/ingestion/McpCrossLink.vue
index 7772d77ebc..3bb8fe122f 100644
--- a/web/src/components/ingestion/McpCrossLink.vue
+++ b/web/src/components/ingestion/McpCrossLink.vue
@@ -45,7 +45,7 @@ const goToMcp = () => {
 <template>
   <div class="p-2" data-test="mcp-cross-link">
     <div
-      class="flex flex-col items-start gap-3 rounded-lg border border-border-default bg-surface-panel p-6 max-w-3xl"
+      class="flex flex-col items-start gap-3 rounded-surface border border-border-default bg-surface-panel p-6 max-w-3xl"
     >
       <div class="flex items-center gap-2">
         <OIcon name="mcp" size="md" />
diff --git a/web/src/components/ingestion/MessageQueues.spec.ts b/web/src/components/ingestion/MessageQueues.spec.ts
index e4a173f0f2..d9792d7455 100644
--- a/web/src/components/ingestion/MessageQueues.spec.ts
+++ b/web/src/components/ingestion/MessageQueues.spec.ts
@@ -101,10 +101,6 @@ describe("MessageQueues.vue", () => {
           $t: (key: string) => key,
         },
         stubs: {
-          "q-splitter": true,
-          "q-input": true,
-          "q-tabs": true,
-          "q-route-tab": true,
           "OIcon": true,
           "router-view": true,
         },
diff --git a/web/src/components/ingestion/MessageQueues.vue b/web/src/components/ingestion/MessageQueues.vue
index f1a9964f4e..0fc1d1584b 100644
--- a/web/src/components/ingestion/MessageQueues.vue
+++ b/web/src/components/ingestion/MessageQueues.vue
@@ -23,7 +23,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     search-data-test="message-queue-filter"
   >
     <div class="w-full h-full">
-      <div class="card-container h-full">
+      <div class="bg-card-glass-bg h-full">
         <div class="overflow-auto h-full pt-0.5">
           <router-view
             :title="tabs"
diff --git a/web/src/components/ingestion/Networking.vue b/web/src/components/ingestion/Networking.vue
index 56dda64f82..df9276fe28 100644
--- a/web/src/components/ingestion/Networking.vue
+++ b/web/src/components/ingestion/Networking.vue
@@ -23,7 +23,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     search-data-test="networking-list-search-input"
   >
     <div class="w-full h-full">
-      <div class="card-container h-full">
+      <div class="bg-card-glass-bg h-full">
         <div class="overflow-auto h-full pt-0.5">
           <router-view
             :title="tabs"
diff --git a/web/src/components/ingestion/Others.vue b/web/src/components/ingestion/Others.vue
index fdf2632f89..75a14359d8 100644
--- a/web/src/components/ingestion/Others.vue
+++ b/web/src/components/ingestion/Others.vue
@@ -23,7 +23,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     search-data-test="others-list-search-input"
   >
     <div class="w-full h-full">
-      <div class="card-container h-full">
+      <div class="bg-card-glass-bg h-full">
         <div class="overflow-auto h-full pt-0.5">
           <router-view
             :title="tabs"
diff --git a/web/src/components/ingestion/Recommended.spec.ts b/web/src/components/ingestion/Recommended.spec.ts
index cada036733..5a9d3efbd9 100644
--- a/web/src/components/ingestion/Recommended.spec.ts
+++ b/web/src/components/ingestion/Recommended.spec.ts
@@ -258,7 +258,7 @@ describe("Recommended", () => {
       },
     });
 
-    const cardContainer = wrapper.find(".card-container");
+    const cardContainer = wrapper.find(".bg-card-glass-bg");
     expect(cardContainer.exists()).toBe(true);
   });
 
diff --git a/web/src/components/ingestion/Recommended.vue b/web/src/components/ingestion/Recommended.vue
index 60e1190c96..c2e3035e09 100644
--- a/web/src/components/ingestion/Recommended.vue
+++ b/web/src/components/ingestion/Recommended.vue
@@ -26,7 +26,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     tab-data-test-prefix="ingestion-recommended-tab-"
   >
     <div class="w-full h-full">
-      <div class="card-container h-full">
+      <div class="bg-card-glass-bg h-full">
         <div class="overflow-auto h-full pt-1.5">
           <router-view
             :title="tabs"
diff --git a/web/src/components/ingestion/Security.spec.ts b/web/src/components/ingestion/Security.spec.ts
index 98068f8b94..807e887fba 100644
--- a/web/src/components/ingestion/Security.spec.ts
+++ b/web/src/components/ingestion/Security.spec.ts
@@ -54,14 +54,6 @@ describe("Security Component", () => {
           store,
         },
         stubs: {
-          'q-splitter': {
-            template: '<div><slot name="before"></slot><slot name="after"></slot></div>'
-          },
-          'q-input': {
-            template: '<input data-test="security-list-search-input" />'
-          },
-          'q-tabs': true,
-          'q-route-tab': true,
           'router-view': true
         }
       },
@@ -93,12 +85,6 @@ describe("Security Component", () => {
           plugins: [i18n],
           provide: { store },
           stubs: {
-            'q-splitter': {
-              template: '<div><slot name="before"></slot><slot name="after"></slot></div>'
-            },
-            'q-input': true,
-            'q-tabs': true,
-            'q-route-tab': true,
             'router-view': true
           }
         },
@@ -163,12 +149,6 @@ describe("Security Component", () => {
           plugins: [i18n],
           provide: { store },
           stubs: {
-            'q-splitter': {
-              template: '<div><slot name="before"></slot><slot name="after"></slot></div>'
-            },
-            'q-input': true,
-            'q-tabs': true,
-            'q-route-tab': true,
             'router-view': true
           }
         },
@@ -188,12 +168,6 @@ describe("Security Component", () => {
           plugins: [i18n],
           provide: { store },
           stubs: {
-            'q-splitter': {
-              template: '<div><slot name="before"></slot><slot name="after"></slot></div>'
-            },
-            'q-input': true,
-            'q-tabs': true,
-            'q-route-tab': true,
             'router-view': true
           }
         },
@@ -399,10 +373,6 @@ describe("Security Component", () => {
             plugins: [i18n],
             provide: { store },
             stubs: {
-              'q-splitter': true,
-              'q-input': true,
-              'q-tabs': true,
-              'q-route-tab': true,
               'router-view': true
             }
           }
@@ -417,15 +387,11 @@ describe("Security Component", () => {
           plugins: [i18n],
           provide: { store },
           stubs: {
-            'q-splitter': true,
-            'q-input': true,
-            'q-tabs': true,
-            'q-route-tab': true,
             'router-view': true
           }
         }
       });
-      
+
       expect(testWrapper.props('currOrgIdentifier')).toBe("");
       testWrapper.unmount();
     });
diff --git a/web/src/components/ingestion/Security.vue b/web/src/components/ingestion/Security.vue
index 385bd83c73..90fe756bed 100644
--- a/web/src/components/ingestion/Security.vue
+++ b/web/src/components/ingestion/Security.vue
@@ -23,7 +23,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     search-data-test="security-list-search-input"
   >
     <div class="w-full h-full">
-      <div class="card-container h-full">
+      <div class="bg-card-glass-bg h-full">
         <div class="overflow-auto h-full pt-0.5">
           <router-view
             :title="tabs"
diff --git a/web/src/components/ingestion/Server.vue b/web/src/components/ingestion/Server.vue
index e182fa9d1e..f7c8cf9cba 100644
--- a/web/src/components/ingestion/Server.vue
+++ b/web/src/components/ingestion/Server.vue
@@ -23,7 +23,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     search-data-test="server-list-search-input"
   >
     <div class="w-full h-full">
-      <div class="card-container h-full">
+      <div class="bg-card-glass-bg h-full">
         <div class="overflow-auto h-full pt-0.5">
           <router-view
             :title="tabs"
diff --git a/web/src/components/ingestion/ai/AIIntegrationDetail.vue b/web/src/components/ingestion/ai/AIIntegrationDetail.vue
index 04fd8a6820..1c7b929773 100644
--- a/web/src/components/ingestion/ai/AIIntegrationDetail.vue
+++ b/web/src/components/ingestion/ai/AIIntegrationDetail.vue
@@ -94,7 +94,7 @@ const richContent = computed(() =>
       :content="cardContent"
       :doc-url="docURL"
     />
-    <div v-else class="text-[16px]">
+    <div v-else class="text-base">
       <CopyContent :content="aiContent" />
       <div class="font-bold pt-6 pb-2">
         Click
@@ -102,7 +102,7 @@ const richContent = computed(() =>
           :href="safeHttpUrl(docURL)"
           target="_blank"
           rel="noopener noreferrer"
-          class="text-blue-500 hover:text-blue-600"
+          class="text-text-link hover:text-text-link-hover"
           style="text-decoration: underline"
           >here</a
         >
diff --git a/web/src/components/ingestion/ai/McpServerCard.vue b/web/src/components/ingestion/ai/McpServerCard.vue
index 1b4b634f82..d6f06b4859 100644
--- a/web/src/components/ingestion/ai/McpServerCard.vue
+++ b/web/src/components/ingestion/ai/McpServerCard.vue
@@ -355,7 +355,7 @@ const openDocs = () => {
     <!-- Token mode: credential management -->
     <div
       v-if="authMode === 'token'"
-      class="rounded-lg border border-border-default bg-surface-panel p-3 flex flex-col gap-3"
+      class="rounded-surface border border-border-default bg-surface-panel p-3 flex flex-col gap-3"
       data-test="ai-integrations-mcp-credential"
     >
       <!-- Before generation: quick-start note + generate button -->
@@ -468,7 +468,7 @@ const openDocs = () => {
     <!-- Security note (token mode only) -->
     <div
       v-if="authMode === 'token'"
-      class="rounded-lg border border-border-default bg-surface-panel p-3 flex gap-2"
+      class="rounded-surface border border-border-default bg-surface-panel p-3 flex gap-2"
       data-test="ai-integrations-mcp-security"
     >
       <OIcon name="shield" size="sm" class="mt-0.5 shrink-0" />
diff --git a/web/src/components/ingestion/ai/content/AIIntegrationCard.vue b/web/src/components/ingestion/ai/content/AIIntegrationCard.vue
index fd11b03f31..816edcb58e 100644
--- a/web/src/components/ingestion/ai/content/AIIntegrationCard.vue
+++ b/web/src/components/ingestion/ai/content/AIIntegrationCard.vue
@@ -35,8 +35,6 @@ const props = defineProps<{
 const store = useStore();
 const { endpoint } = useIngestion();
 
-const isDark = computed(() => store.state?.theme === "dark");
-
 // The {url}/{org}/{token} the snippets are substituted with. `token` is the
 // base64 of email:password (the same value used for ingest tokens), WITHOUT the
 // "Basic " prefix — the snippets add that themselves. Computed from the store so
@@ -109,8 +107,7 @@ const renderedSections = computed(() =>
         <template v-for="(seg, j) in section.segments" :key="j">
           <div
             v-if="seg.type === 'html'"
-            class="o2-card-md prose prose-sm max-w-none min-w-0"
-            :class="{ 'prose-invert': isDark }"
+            class="o2-card-md prose prose-sm max-w-none min-w-0 dark:prose-invert"
             v-html="seg.html"
           ></div>
           <OCodeBlock v-else :code="seg.code" :lang="seg.lang" data-test="ai-md-code" />
@@ -125,7 +122,7 @@ const renderedSections = computed(() =>
           :href="safeHttpUrl(docUrl)"
           target="_blank"
           rel="noopener noreferrer"
-          class="text-blue-500 hover:text-blue-600"
+          class="text-text-link hover:text-text-link-hover"
           style="text-decoration: underline"
           >here</a
         >
@@ -136,17 +133,20 @@ const renderedSections = computed(() =>
 </template>
 
 <style scoped lang="scss">
+/* keep(generated-content): .o2-card-md wraps markdown rendered at runtime — the
+   :deep(:not(pre) > code)::before/::after backtick strip and :deep(table) rules
+   target nodes this template never writes, so they cannot be utilities. */
 .o2-card {
   padding: 1.5rem 1.75rem;
 }
 
 .o2-card-inner {
-  max-width: 980px;
+  max-width: 61.25rem;
 }
 
 .o2-section {
   padding: 1.25rem 0;
-  border-top: 1px solid rgba(136, 136, 136, 0.18);
+  border-top: 1px solid var(--color-border-default);
 
   &:first-of-type {
     border-top: none;
@@ -155,7 +155,7 @@ const renderedSections = computed(() =>
 }
 
 .o2-section-title {
-  font-size: 0.95rem;
+  font-size: var(--text-base);
   font-weight: 600;
   margin: 0 0 0.5rem;
   letter-spacing: 0.01em;
@@ -174,9 +174,9 @@ const renderedSections = computed(() =>
 }
 
 .o2-card-md :deep(:not(pre) > code) {
-  background: rgba(136, 136, 136, 0.16);
+  background: var(--color-code-bg);
   padding: 0.1rem 0.35rem;
-  border-radius: 4px;
+  border-radius: var(--radius-default);
   font-weight: 400;
 }
 
@@ -185,6 +185,6 @@ const renderedSections = computed(() =>
   display: block;
   width: 100%;
   overflow-x: auto;
-  font-size: 0.8125rem;
+  font-size: var(--text-compact);
 }
 </style>
diff --git a/web/src/components/ingestion/ai/content/index.ts b/web/src/components/ingestion/ai/content/index.ts
index 60d8234044..5da589ec8b 100644
--- a/web/src/components/ingestion/ai/content/index.ts
+++ b/web/src/components/ingestion/ai/content/index.ts
@@ -100,10 +100,3 @@ export function getAICardLogos(slug: string | undefined): {
 export function availableCardSlugs(): string[] {
   return Object.keys(rawBySlug).sort();
 }
-
-
-
-
-// glob refresh 1781587701
-
-// glob refresh 1781587777
diff --git a/web/src/components/ingestion/ai/content/renderMarkdown.ts b/web/src/components/ingestion/ai/content/renderMarkdown.ts
index a7b89858ce..71a1267bf8 100644
--- a/web/src/components/ingestion/ai/content/renderMarkdown.ts
+++ b/web/src/components/ingestion/ai/content/renderMarkdown.ts
@@ -25,9 +25,8 @@ import { Marked } from "marked";
 import DOMPurify from "dompurify";
 import type { CardSubstitutions } from "@/components/ingestion/setupCard/types";
 
-// CardSubstitutions and safeHttpUrl now live in the shared setup-card module.
-// Re-exported here so the many existing `from ".../renderMarkdown"` importers
-// (traces, chat, AI cards) keep working unchanged.
+// Re-exported from the shared setup-card module so existing
+// `from ".../renderMarkdown"` importers (traces, chat, AI cards) keep working.
 export type { CardSubstitutions } from "@/components/ingestion/setupCard/types";
 export { safeHttpUrl } from "@/components/ingestion/setupCard/subs";
 
diff --git a/web/src/components/ingestion/logs/Index.vue b/web/src/components/ingestion/logs/Index.vue
index 98949b8818..7ab6086269 100644
--- a/web/src/components/ingestion/logs/Index.vue
+++ b/web/src/components/ingestion/logs/Index.vue
@@ -116,7 +116,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </template>
 
       <div class="w-full h-full">
-        <div class="card-container h-full overflow-y-auto pt-0.5">
+        <div class="bg-card-glass-bg h-full overflow-y-auto pt-0.5">
           <router-view
             :title="ingestiontabs"
             :currOrgIdentifier="currOrgIdentifier"
diff --git a/web/src/components/ingestion/logs/OtelConfig.spec.ts b/web/src/components/ingestion/logs/OtelConfig.spec.ts
deleted file mode 100644
index 7d7883e04e..0000000000
--- a/web/src/components/ingestion/logs/OtelConfig.spec.ts
+++ /dev/null
@@ -1,363 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import { mount } from "@vue/test-utils";
-import { nextTick } from "vue";
-import { createStore } from "vuex";
-import OtelConfig from "@/components/ingestion/logs/OtelConfig.vue";
-
-
-vi.mock("@/aws-exports", () => ({
-  default: { isCloud: "false", isEnterprise: "false" },
-}));
-
-// Mock utility functions
-vi.mock("@/utils/zincutils", () => ({
-  b64EncodeStandard: vi.fn((str: string) => btoa(str)),
-  getEndPoint: vi.fn((url: string) => ({
-    url: "http://localhost:5080",
-    host: "localhost",
-    port: "5080",
-    protocol: "http",
-    tls: "Off",
-  })),
-  getIngestionURL: vi.fn(() => "http://localhost:5080"),
-}));
-
-// Mock CopyContent component
-vi.mock("@/components/CopyContent.vue", () => ({
-  default: {
-    name: "CopyContent",
-    props: ["content"],
-    template: "<div class='copy-content-mock'>{{ content }}</div>",
-  },
-}));
-
-describe("OtelConfig", () => {
-  let wrapper: any;
-  const mockStore = createStore({
-    state: {
-      API_ENDPOINT: "http://localhost:5080",
-      organizationData: {
-        organizationPasscode: "test-passcode-123",
-      },
-      zoConfig: {
-        ingestion_url: "",
-      },
-    },
-  });
-
-  const defaultProps = {
-    currOrgIdentifier: "default-org",
-    currUserEmail: "test@example.com",
-  };
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-    // Reset store state before each test
-    mockStore.state.organizationData.organizationPasscode = "test-passcode-123";
-    wrapper = mount(OtelConfig, {
-      props: defaultProps,
-      global: {
-        plugins: [mockStore],
-      },
-    });
-  });
-
-  // Test 1: Component mounting and basic structure
-  it("should mount successfully", () => {
-    expect(wrapper.exists()).toBe(true);
-    expect(wrapper.vm).toBeTruthy();
-  });
-
-  // Test 2: Props validation and default values
-  it("should accept currOrgIdentifier prop", () => {
-    expect(wrapper.props("currOrgIdentifier")).toBe("default-org");
-  });
-
-  // Test 3: Props validation for currUserEmail
-  it("should accept currUserEmail prop", () => {
-    expect(wrapper.props("currUserEmail")).toBe("test@example.com");
-  });
-
-  // Test 4: Component structure - OTLP HTTP section
-  it("should render OTLP HTTP section", () => {
-    const httpTitle = wrapper.find('[data-test="ingestion-otelconfig-otlp-http-title"]');
-    expect(httpTitle.exists()).toBe(true);
-    expect(httpTitle.text()).toBe("OTLP HTTP");
-  });
-
-  // Test 5: Component structure - OTLP gRPC section
-  it("should render OTLP gRPC section when not in cloud mode", () => {
-    const httpTitle = wrapper.find('[data-test="ingestion-otelconfig-otlp-http-title"]');
-    const grpcTitle = wrapper.find('[data-test="ingestion-otelconfig-otlp-grpc-title"]');
-
-    expect(httpTitle.exists()).toBe(true);
-    expect(httpTitle.text()).toBe("OTLP HTTP");
-    expect(grpcTitle.exists()).toBe(true);
-    expect(grpcTitle.text()).toBe("OTLP gRPC");
-  });
-
-  // Test 6: CopyContent components are present
-  it("should render two CopyContent components", () => {
-    const copyComponents = wrapper.findAllComponents({ name: "CopyContent" });
-    expect(copyComponents).toHaveLength(2);
-  });
-
-  // Test 7: Endpoint initialization
-  it("should initialize endpoint correctly", () => {
-    const endpoint = wrapper.vm.endpoint;
-    expect(endpoint.url).toBe("http://localhost:5080");
-    expect(endpoint.host).toBe("localhost");
-    expect(endpoint.port).toBe("5080");
-    expect(endpoint.protocol).toBe("http");
-    expect(endpoint.tls).toBe("Off");
-  });
-
-  // Test 8: Ingestion URL setup
-  it("should set ingestion URL correctly", () => {
-    expect(wrapper.vm.ingestionURL).toBe("http://localhost:5080");
-  });
-
-  // Test 9: Access key computation
-  it("should compute access key correctly", () => {
-    const expectedInput = "test@example.com:test-passcode-123";
-    const expectedBase64 = btoa(expectedInput);
-    expect(wrapper.vm.accessKey).toBe(expectedBase64);
-  });
-
-  // Test 10: OTLP gRPC config generation
-  it("should generate correct OTLP gRPC config", () => {
-    const expectedConfig = `exporters:
-  otlp/openobserve:
-      endpoint: localhost:5081
-      headers:
-        Authorization: "Basic ${btoa("test@example.com:test-passcode-123")}"
-        organization: default-org
-        stream-name: default
-      tls:
-        insecure: true
-
-service:
-  telemetry:
-    logs:
-      level: warn`;
-    
-    expect(wrapper.vm.getOtelGrpcConfig).toBe(expectedConfig);
-  });
-
-  // Test 11: OTLP HTTP config generation
-  it("should generate correct OTLP HTTP config", () => {
-    const expectedConfig = `exporters:
-  otlphttp/openobserve:
-    endpoint: http://localhost:5080/api/default-org
-    headers:
-      Authorization: Basic ${btoa("test@example.com:test-passcode-123")}
-      stream-name: default
-
-service:
-  telemetry:
-    logs:
-      level: warn`;
-    
-    expect(wrapper.vm.getOtelHttpConfig).toBe(expectedConfig);
-  });
-
-  // Test 12: Props change - currOrgIdentifier
-  it("should update configs when currOrgIdentifier prop changes", async () => {
-    await wrapper.setProps({ currOrgIdentifier: "new-org" });
-    await nextTick();
-
-    expect(wrapper.vm.getOtelHttpConfig).toContain("http://localhost:5080/api/new-org");
-    expect(wrapper.vm.getOtelGrpcConfig).toContain("organization: new-org");
-  });
-
-  // Test 13: Props change - currUserEmail
-  it("should update access key when currUserEmail prop changes", async () => {
-    await wrapper.setProps({ currUserEmail: "newuser@example.com" });
-    await nextTick();
-
-    const expectedBase64 = btoa("newuser@example.com:test-passcode-123");
-    expect(wrapper.vm.accessKey).toBe(expectedBase64);
-  });
-
-  // Test 14: Store state change - organizationPasscode
-  it("should update access key when organization passcode changes", async () => {
-    // Directly modify the mock store state
-    mockStore.state.organizationData.organizationPasscode = "new-passcode";
-    await nextTick();
-
-    const expectedBase64 = btoa("test@example.com:new-passcode");
-    expect(wrapper.vm.accessKey).toBe(expectedBase64);
-  });
-
-  // Test 15: CopyContent props - HTTP config
-  it("should pass HTTP config to first CopyContent component", () => {
-    const copyComponents = wrapper.findAllComponents({ name: "CopyContent" });
-    const httpCopyComponent = copyComponents[0];
-    
-    expect(httpCopyComponent.props("content")).toBe(wrapper.vm.getOtelHttpConfig);
-  });
-
-  // Test 16: CopyContent props - gRPC config
-  it("should pass gRPC config to second CopyContent component", () => {
-    const copyComponents = wrapper.findAllComponents({ name: "CopyContent" });
-    const grpcCopyComponent = copyComponents[1];
-    
-    expect(grpcCopyComponent.props("content")).toBe(wrapper.vm.getOtelGrpcConfig);
-  });
-
-  // Test 17: Empty props handling
-  it("should handle empty currOrgIdentifier prop", async () => {
-    await wrapper.setProps({ currOrgIdentifier: "" });
-    await nextTick();
-
-    expect(wrapper.vm.getOtelHttpConfig).toContain("http://localhost:5080/api/");
-    expect(wrapper.vm.getOtelGrpcConfig).toContain("organization: ");
-  });
-
-  // Test 18: Empty email handling
-  it("should handle empty currUserEmail prop", async () => {
-    await wrapper.setProps({ currUserEmail: "" });
-    await nextTick();
-
-    const expectedBase64 = btoa(":test-passcode-123");
-    expect(wrapper.vm.accessKey).toBe(expectedBase64);
-  });
-
-  // Test 19: Component reactivity
-  it("should be reactive to all computed properties", async () => {
-    const initialHttpConfig = wrapper.vm.getOtelHttpConfig;
-    const initialGrpcConfig = wrapper.vm.getOtelGrpcConfig;
-    
-    await wrapper.setProps({ 
-      currOrgIdentifier: "updated-org",
-      currUserEmail: "updated@example.com"
-    });
-    await nextTick();
-
-    expect(wrapper.vm.getOtelHttpConfig).not.toBe(initialHttpConfig);
-    expect(wrapper.vm.getOtelGrpcConfig).not.toBe(initialGrpcConfig);
-  });
-
-  // Test 20: Exposed properties accessibility
-  it("should expose all required properties", () => {
-    const exposedProps = ['endpoint', 'ingestionURL', 'accessKey', 'getOtelGrpcConfig', 'getOtelHttpConfig'];
-    
-    exposedProps.forEach(prop => {
-      expect(wrapper.vm[prop]).toBeDefined();
-    });
-  });
-
-  // Test 21: gRPC configuration structure validation
-  it("should include all required gRPC configuration fields", () => {
-    const config = wrapper.vm.getOtelGrpcConfig;
-    
-    expect(config).toContain("exporters:");
-    expect(config).toContain("otlp/openobserve:");
-    expect(config).toContain("endpoint:");
-    expect(config).toContain("headers:");
-    expect(config).toContain("Authorization:");
-    expect(config).toContain("organization:");
-    expect(config).toContain("stream-name:");
-    expect(config).toContain("tls:");
-    expect(config).toContain("insecure:");
-    expect(config).toContain("service:");
-    expect(config).toContain("telemetry:");
-    expect(config).toContain("level: warn");
-  });
-
-  // Test 22: HTTP configuration structure validation
-  it("should include all required HTTP configuration fields", () => {
-    const config = wrapper.vm.getOtelHttpConfig;
-    
-    expect(config).toContain("exporters:");
-    expect(config).toContain("otlphttp/openobserve:");
-    expect(config).toContain("endpoint:");
-    expect(config).toContain("headers:");
-    expect(config).toContain("Authorization:");
-    expect(config).toContain("stream-name:");
-    expect(config).toContain("service:");
-    expect(config).toContain("telemetry:");
-    expect(config).toContain("level: warn");
-  });
-
-  // Test 23: Default stream name in configs
-  it("should use 'default' as stream name in both configs", () => {
-    expect(wrapper.vm.getOtelHttpConfig).toContain("stream-name: default");
-    expect(wrapper.vm.getOtelGrpcConfig).toContain("stream-name: default");
-  });
-
-  // Test 24: gRPC port configuration
-  it("should use port 5081 for gRPC endpoint", () => {
-    expect(wrapper.vm.getOtelGrpcConfig).toContain("localhost:5081");
-  });
-
-  // Test 25: Authorization format differences
-  it("should use different Authorization formats for HTTP and gRPC", () => {
-    const httpConfig = wrapper.vm.getOtelHttpConfig;
-    const grpcConfig = wrapper.vm.getOtelGrpcConfig;
-    
-    // HTTP uses format: Authorization: Basic <token>
-    expect(httpConfig).toContain("Authorization: Basic");
-    
-    // gRPC uses format: Authorization: "Basic <token>"
-    expect(grpcConfig).toContain('Authorization: "Basic');
-  });
-
-  // Test 26: TLS configuration only in gRPC
-  it("should include TLS configuration only in gRPC config", () => {
-    const httpConfig = wrapper.vm.getOtelHttpConfig;
-    const grpcConfig = wrapper.vm.getOtelGrpcConfig;
-    
-    expect(grpcConfig).toContain("tls:");
-    expect(grpcConfig).toContain("insecure: true");
-    expect(httpConfig).not.toContain("tls:");
-  });
-
-  // Test 27: Component unmounting
-  it("should unmount without errors", () => {
-    expect(() => wrapper.unmount()).not.toThrow();
-  });
-
-  // Test 28: Computed properties return values
-  it("should have computed properties that return values", () => {
-    expect(wrapper.vm.accessKey).toBeDefined();
-    expect(wrapper.vm.getOtelGrpcConfig).toBeDefined();
-    expect(wrapper.vm.getOtelHttpConfig).toBeDefined();
-    expect(typeof wrapper.vm.accessKey).toBe("string");
-    expect(typeof wrapper.vm.getOtelGrpcConfig).toBe("string");
-    expect(typeof wrapper.vm.getOtelHttpConfig).toBe("string");
-  });
-
-  // Test 29: Special characters in props
-  it("should handle special characters in organization identifier", async () => {
-    await wrapper.setProps({ currOrgIdentifier: "test-org-123_special" });
-    await nextTick();
-
-    expect(wrapper.vm.getOtelHttpConfig).toContain("test-org-123_special");
-    expect(wrapper.vm.getOtelGrpcConfig).toContain("test-org-123_special");
-  });
-
-  // Test 30: Special characters in email
-  it("should handle special characters in email", async () => {
-    await wrapper.setProps({ currUserEmail: "test.user+tag@example.com" });
-    await nextTick();
-
-    const expectedBase64 = btoa("test.user+tag@example.com:test-passcode-123");
-    expect(wrapper.vm.accessKey).toBe(expectedBase64);
-  });
-});
\ No newline at end of file
diff --git a/web/src/components/ingestion/logs/OtelConfig.vue b/web/src/components/ingestion/logs/OtelConfig.vue
deleted file mode 100644
index 806558ecef..0000000000
--- a/web/src/components/ingestion/logs/OtelConfig.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-  <IngestionContent>
-    <div class="flex flex-col gap-2">
-      <div class="text-base font-semibold" data-test="ingestion-otelconfig-otlp-http-title">OTLP HTTP</div>
-      <ContentCopy class="copy-content-container-cls" :content="getOtelHttpConfig" data-test="ingestion-otelconfig-copy-http" />
-    </div>
-    <div class="flex flex-col gap-2" v-if="config.isCloud == 'false'">
-      <div class="text-base font-semibold" data-test="ingestion-otelconfig-otlp-grpc-title">OTLP gRPC</div>
-      <ContentCopy class="copy-content-container-cls" :content="getOtelGrpcConfig" data-test="ingestion-otelconfig-copy-grpc" />
-    </div>
-  </IngestionContent>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, type Ref } from "vue";
-import type { Endpoint } from "@/ts/interfaces";
-import ContentCopy from "@/components/CopyContent.vue";
-import IngestionContent from "@/components/ingestion/IngestionContent.vue";
-import { useStore } from "vuex";
-import { b64EncodeStandard, getEndPoint, getIngestionURL } from "../../../utils/zincutils";
-import config from "@/aws-exports";
-
-const store = useStore();
-
-const props = defineProps({
-  currOrgIdentifier: {
-    type: String,
-  },
-  currUserEmail: {
-    type: String,
-  },
-});
-
-const endpoint: any = ref({
-  url: "",
-  host: "",
-  port: "",
-  protocol: "",
-  tls: "",
-});
-
-const ingestionURL = getIngestionURL();
-endpoint.value = getEndPoint(ingestionURL);
-
-const accessKey = computed(() => {
-  return b64EncodeStandard(
-    `${props.currUserEmail}:${store.state.organizationData.organizationPasscode}`
-  );
-});
-
-const getOtelGrpcConfig = computed(() => {
-  return `exporters:
-  otlp/openobserve:
-      endpoint: ${endpoint.value.host}:5081
-      headers:
-        Authorization: "Basic ${accessKey.value}"
-        organization: ${props.currOrgIdentifier}
-        stream-name: default
-      tls:
-        insecure: true
-
-service:
-  telemetry:
-    logs:
-      level: warn`;
-});
-
-const getOtelHttpConfig = computed(() => {
-  return `exporters:
-  otlphttp/openobserve:
-    endpoint: ${endpoint.value.url}/api/${props.currOrgIdentifier}
-    headers:
-      Authorization: Basic ${accessKey.value}
-      stream-name: default
-
-service:
-  telemetry:
-    logs:
-      level: warn`;
-});
-
-defineExpose({
-  endpoint,
-  ingestionURL,
-  accessKey,
-  getOtelGrpcConfig,
-  getOtelHttpConfig
-});
-</script>
diff --git a/web/src/components/ingestion/logs/ingestionIndex.spec.ts b/web/src/components/ingestion/logs/ingestionIndex.spec.ts
index e83f42e6b3..aef9441d6f 100644
--- a/web/src/components/ingestion/logs/ingestionIndex.spec.ts
+++ b/web/src/components/ingestion/logs/ingestionIndex.spec.ts
@@ -361,9 +361,6 @@ describe("IngestLogs Index Component", () => {
         global: {
           plugins: [store, router, i18n],
           stubs: {
-            "q-splitter": true,
-            "q-tabs": true,
-            "q-route-tab": true,
             "router-view": true
           }
         }
@@ -379,9 +376,6 @@ describe("IngestLogs Index Component", () => {
         global: {
           plugins: [store, router, i18n],
           stubs: {
-            "q-splitter": true,
-            "q-tabs": true,
-            "q-route-tab": true,
             "router-view": true
           }
         }
diff --git a/web/src/components/ingestion/metrics/Index.vue b/web/src/components/ingestion/metrics/Index.vue
index 9155a1a570..46f7ecb39b 100644
--- a/web/src/components/ingestion/metrics/Index.vue
+++ b/web/src/components/ingestion/metrics/Index.vue
@@ -81,7 +81,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </template>
 
       <div class="w-full h-full">
-        <div class="card-container h-full overflow-y-auto pt-0.5">
+        <div class="bg-card-glass-bg h-full overflow-y-auto pt-0.5">
           <router-view
             :title="ingestiontabs"
             :currOrgIdentifier="currOrgIdentifier"
diff --git a/web/src/components/ingestion/recommended/AWSIndividualServices.vue b/web/src/components/ingestion/recommended/AWSIndividualServices.vue
index 15f9740f86..f83d31ac5d 100644
--- a/web/src/components/ingestion/recommended/AWSIndividualServices.vue
+++ b/web/src/components/ingestion/recommended/AWSIndividualServices.vue
@@ -51,8 +51,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <div class="text-base">{{ t("ingestion.awsSetup.noResults") }}</div>
     </div>
 
-    <!-- Responsive columns via utilities — replaces an unscoped <style> block
-         whose px media queries leaked to every page in the app. -->
+    <!-- Responsive columns via Tailwind utilities — replaces a scoped-style
+         block whose px media queries leaked to every page in the app. -->
     <div
       class="integrations-grid grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"
       v-else
diff --git a/web/src/components/ingestion/recommended/AWSIntegrationTile.vue b/web/src/components/ingestion/recommended/AWSIntegrationTile.vue
index 0d26dec181..05515dc763 100644
--- a/web/src/components/ingestion/recommended/AWSIntegrationTile.vue
+++ b/web/src/components/ingestion/recommended/AWSIntegrationTile.vue
@@ -16,7 +16,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <OCard
-    class="border border-border h-full flex flex-col transition-all duration-200 ease-in-out rounded-lg hover:-translate-y-0.5 hover:shadow-lg"
+    class="border border-border h-full flex flex-col transition-all duration-200 ease-in-out rounded-default hover:-translate-y-0.5 hover:shadow-lg"
   >
     <OCardSection class="p-4 pb-2 flex-1">
       <div class="flex items-start justify-between mb-2">
@@ -95,7 +95,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           v-for="(template, index) in integration.cloudFormationTemplates"
           :key="`cf-${index}`"
           @click="handleTemplateSelection(template)"
-          class="flex items-center gap-2 px-3 py-2 mb-2 cursor-pointer rounded border border-border hover:bg-muted/50"
+          class="flex items-center gap-2 px-3 py-2 mb-2 cursor-pointer rounded-default border border-border hover:bg-muted/50"
           :data-test="`aws-${integration.id}-template-option-${index}`"
         >
           <div class="flex flex-col flex-1 min-w-0">
@@ -114,7 +114,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           v-for="(option, index) in integration.componentOptions"
           :key="`comp-${index}`"
           @click="handleComponentSelection(option)"
-          class="flex items-center gap-2 px-3 py-2 mb-2 cursor-pointer rounded border border-border hover:bg-muted/50"
+          class="flex items-center gap-2 px-3 py-2 mb-2 cursor-pointer rounded-default border border-border hover:bg-muted/50"
           :data-test="`aws-${integration.id}-component-option-${index}`"
         >
           <div class="flex flex-col flex-1 min-w-0">
diff --git a/web/src/components/ingestion/recommended/AWSQuickSetup.vue b/web/src/components/ingestion/recommended/AWSQuickSetup.vue
index b5d87899c0..e2fd2babdc 100644
--- a/web/src/components/ingestion/recommended/AWSQuickSetup.vue
+++ b/web/src/components/ingestion/recommended/AWSQuickSetup.vue
@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <div>
     <div class="setup-card max-w-225 mx-auto">
       <!-- Header -->
-      <div class="mb-6 p-4 rounded-lg" :class="quickInstallBgClass">
+      <div class="mb-6 p-4 rounded-default" :class="quickInstallBgClass">
         <div class="flex items-start gap-3">
           <OIcon
             name="rocket-launch"
@@ -39,7 +39,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
       <!-- Deployment Mode Toggle -->
       <div class="mb-6">
-        <div class="mb-3 font-semibold text-[0.9rem]" :class="stepLabelClass">Deployment mode</div>
+        <div class="mb-3 font-semibold text-sm" :class="stepLabelClass">Deployment mode</div>
         <OToggleGroup
           v-model="deploymentMode"
           data-test="aws-deployment-mode-toggle"
@@ -65,7 +65,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <!-- Step: Services -->
       <div class="mb-6">
         <div
-          class="flex items-center justify-between cursor-pointer py-2 px-3 rounded"
+          class="flex items-center justify-between cursor-pointer py-2 px-3 rounded-default"
           :class="collapsibleHeaderClass"
           @click="showServices = !showServices"
         >
@@ -74,7 +74,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :name="showServices ? 'expand-less' : 'expand-more'" size="sm"
               color="primary"
             />
-            <div class="font-semibold text-[0.9rem]" :class="stepLabelClass">Select services to monitor</div>
+            <div class="font-semibold text-sm" :class="stepLabelClass">Select services to monitor</div>
             <OTag type="countChip" value="accent">
               {{ enabledServices.length }} /
               {{ QUICK_SETUP_SERVICES.length }} selected
@@ -115,7 +115,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
       <!-- Single Region: region picker -->
       <div v-if="deploymentMode === 'single'" class="mb-6">
-        <div class="mb-3 font-semibold text-[0.9rem]" :class="stepLabelClass">Deployment region</div>
+        <div class="mb-3 font-semibold text-sm" :class="stepLabelClass">Deployment region</div>
         <OSelect
           v-model="selectedRegion"
           :options="AWS_REGIONS"
@@ -129,7 +129,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <!-- StackSets: admin + target regions -->
       <template v-else>
         <div class="mb-6">
-          <div class="mb-3 font-semibold text-[0.9rem]" :class="stepLabelClass">
+          <div class="mb-3 font-semibold text-sm" :class="stepLabelClass">
             Admin region
             <span class="font-normal text-xs text-text-muted"
               >(where the StackSet is managed)</span
@@ -147,7 +147,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
         <div class="mb-6">
           <div
-            class="flex items-center justify-between cursor-pointer py-2 px-3 rounded"
+            class="flex items-center justify-between cursor-pointer py-2 px-3 rounded-default"
           :class="collapsibleHeaderClass"
             @click="showTargetRegions = !showTargetRegions"
           >
@@ -156,7 +156,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :name="showTargetRegions ? 'expand-less' : 'expand-more'" size="sm"
                 color="primary"
               />
-              <div class="font-semibold text-[0.9rem]" :class="stepLabelClass">
+              <div class="font-semibold text-sm" :class="stepLabelClass">
                 Target regions
                 <span class="font-normal text-xs text-text-muted"
                   >(where stacks will be deployed)</span
@@ -209,7 +209,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
 
         <div class="mb-6">
-          <div class="mb-3 font-semibold text-[0.9rem]" :class="stepLabelClass">Deployment model</div>
+          <div class="mb-3 font-semibold text-sm" :class="stepLabelClass">Deployment model</div>
           <OToggleGroup
             v-model="stackSetModel"
             data-test="aws-stackset-model-toggle"
@@ -294,9 +294,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <div class="overflow-hidden min-h-0">
         <div>
           <OSeparator class="mb-4" />
-          <div class="rounded-lg p-4" :class="paramHelperClass">
+          <div class="rounded-default p-4" :class="paramHelperClass">
             <div class="flex items-center justify-between mb-3">
-              <div class="font-semibold text-[0.9rem]" :class="stepLabelClass">
+              <div class="font-semibold text-sm" :class="stepLabelClass">
                 Parameters to enter in the AWS wizard
               </div>
               <OButton
@@ -315,7 +315,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <div
                 v-for="param in stackSetParams"
                 :key="param.key"
-                class="flex items-center gap-3 py-1.5 px-2.5 rounded text-xs font-mono"
+                class="flex items-center gap-3 py-1.5 px-2.5 rounded-default text-compact font-mono"
                 :class="paramRowClass"
               >
                 <div class="min-w-60 font-semibold shrink-0" :class="paramKeyClass">{{ param.key }}</div>
@@ -399,19 +399,18 @@ export default defineComponent({
     const showTargetRegions = ref(false);
     const showServices = ref(false);
 
-    // Design tokens resolve per-theme on their own, so none of these branch on
-    // store.state.theme any more — they were eight computeds returning hardcoded
-    // hex/palette colors (plus a banned --o2-border) for exactly that reason.
-    const quickInstallBgClass = "bg-status-info-bg border border-border-default";
-    const descriptionClass = "text-text-secondary";
-    const stepLabelClass = "text-text-heading";
-    const hintTextClass = "text-text-secondary";
+    // Colors resolve via theme-aware design tokens, so these class strings are
+    // theme-independent (dark handled automatically by dark.css).
+    const quickInstallBgClass = 'bg-banner-info-bg border border-banner-info-border';
+    const descriptionClass = 'text-text-secondary';
+    const stepLabelClass = 'text-text-body';
+    const hintTextClass = 'text-text-secondary';
     const collapsibleHeaderClass =
-      "bg-surface-subtle border border-border-default hover:bg-surface-subtle-hover";
-    const paramHelperClass = "bg-surface-subtle";
-    const paramRowClass = "bg-surface-base border border-border-default";
-    const paramKeyClass = "text-text-heading";
-    const paramValTextClass = "text-text-secondary";
+      'bg-surface-subtle border border-border-default hover:bg-surface-subtle-hover';
+    const paramHelperClass = 'bg-surface-subtle';
+    const paramRowClass = 'bg-surface-base border border-border-default';
+    const paramKeyClass = 'text-text-body';
+    const paramValTextClass = 'text-text-secondary';
 
     let endpoint: any = null;
     try {
diff --git a/web/src/components/ingestion/recommended/AzureConfig.vue b/web/src/components/ingestion/recommended/AzureConfig.vue
index 307eef411f..2eb392536c 100644
--- a/web/src/components/ingestion/recommended/AzureConfig.vue
+++ b/web/src/components/ingestion/recommended/AzureConfig.vue
@@ -34,7 +34,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     <!-- Step 1 -->
     <div
-      class="mb-4 p-4 rounded border-l-4 border-l-solid bg-surface-subtle border-l-border-strong"
+      class="mb-4 p-4 rounded-default border-l-4 border-l-solid bg-surface-subtle border-l-border-strong"
     >
       <div class="flex gap-3 items-start">
         <div class="w-7 h-7 rounded-full flex items-center justify-center font-bold text-xs shrink-0 bg-status-info-bg text-status-info-text">1</div>
@@ -63,7 +63,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     <!-- Step 2 -->
     <div
-      class="mb-4 p-4 rounded border-l-4 border-l-solid bg-surface-subtle border-l-border-strong"
+      class="mb-4 p-4 rounded-default border-l-4 border-l-solid bg-surface-subtle border-l-border-strong"
     >
       <div class="flex gap-3 items-start">
         <div class="w-7 h-7 rounded-full flex items-center justify-center font-bold text-xs shrink-0 bg-status-info-bg text-status-info-text">2</div>
diff --git a/web/src/components/ingestion/recommended/AzureIndividualServices.spec.ts b/web/src/components/ingestion/recommended/AzureIndividualServices.spec.ts
deleted file mode 100644
index 24bc17541c..0000000000
--- a/web/src/components/ingestion/recommended/AzureIndividualServices.spec.ts
+++ /dev/null
@@ -1,243 +0,0 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { mount, VueWrapper } from '@vue/test-utils';
-import { createStore } from 'vuex';
-import { createI18n } from 'vue-i18n';
-import enUS from '@/locales/languages/en-US.json';
-import { createRouter, createWebHistory } from 'vue-router';
-import { nextTick } from 'vue';
-import AzureIndividualServices from './AzureIndividualServices.vue';
-
-vi.mock('../../../aws-exports', () => ({
-  default: { API_ENDPOINT: 'http://localhost:5080', region: 'us-east-1' },
-}));
-
-vi.mock('@/utils/azureIntegrations', () => ({
-  azureIntegrations: [
-    {
-      id: 'azure-ad',
-      name: 'AzureAD',
-      displayName: 'Azure Active Directory',
-      description: 'Azure AD sign-in and audit logs',
-      category: 'security',
-      hasDashboard: false,
-      documentationUrl: 'https://docs.example.com/azure-ad',
-    },
-    {
-      id: 'azure-blob',
-      name: 'AzureBlob',
-      displayName: 'Azure Blob Storage',
-      description: 'Azure Blob Storage logs',
-      category: 'storage',
-      hasDashboard: true,
-    },
-    {
-      id: 'azure-vm',
-      name: 'AzureVM',
-      displayName: 'Azure Virtual Machines',
-      description: 'Azure VM metrics and logs',
-      category: 'compute',
-      hasDashboard: false,
-    },
-    {
-      id: 'azure-nsg',
-      name: 'AzureNSG',
-      displayName: 'Azure NSG Flow Logs',
-      description: 'Azure Network Security Group flow logs',
-      category: 'networking',
-      hasDashboard: false,
-    },
-  ],
-  generateAzureDashboardURL: vi.fn(() => 'https://mock-azure-dashboard-url'),
-}));
-
-vi.mock('@/services/segment_analytics', () => ({
-  default: { track: vi.fn() },
-}));
-
-vi.mock('./AzureIntegrationTile.vue', () => ({
-  default: {
-    name: 'AzureIntegrationTile',
-    template: '<div class="azure-tile" :data-id="integration.id">{{ integration.displayName }}</div>',
-    props: ['integration'],
-  },
-}));
-
-const mockStore = createStore({
-  state: {
-    selectedOrganization: { identifier: 'test-org' },
-    userInfo: { email: 'test@example.com' },
-    organizationData: { organizationPasscode: 'test-passcode' },
-  },
-});
-
-// Real locale messages: the component renders t() keys, and several
-// assertions below check the resulting English text.
-const mockI18n = createI18n({ locale: 'en', messages: { en: enUS } });
-const mockRouter = createRouter({
-  history: createWebHistory(),
-  routes: [{ path: '/', component: { template: '<div>Home</div>' } }],
-});
-
-
-describe('AzureIndividualServices.vue', () => {
-  let wrapper: VueWrapper;
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  afterEach(() => {
-    if (wrapper) wrapper.unmount();
-  });
-
-  const createWrapper = () => {
-    return mount(AzureIndividualServices, {
-      global: {
-        plugins: [mockI18n, mockRouter],
-        provide: { store: mockStore },
-      },
-    });
-  };
-
-  describe('Component Rendering', () => {
-    it('should mount without errors', () => {
-      wrapper = createWrapper();
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it('should unmount without errors', () => {
-      wrapper = createWrapper();
-      expect(() => wrapper.unmount()).not.toThrow();
-    });
-
-    it('should render search input', () => {
-      wrapper = createWrapper();
-      const searchInput = wrapper.find('[data-test="azure-integration-search"]');
-      expect(searchInput.exists()).toBe(true);
-    });
-
-    it('should render category tabs', () => {
-      wrapper = createWrapper();
-      const tabs = wrapper.find('[data-test="azure-integration-category-tabs"]');
-      expect(tabs.exists()).toBe(true);
-    });
-
-    it('should render All Services tab', () => {
-      wrapper = createWrapper();
-      expect(wrapper.text()).toContain('All Services');
-    });
-
-    it('should render Azure-specific category tabs', () => {
-      wrapper = createWrapper();
-      const text = wrapper.text();
-      expect(text).toContain('Compute');
-      expect(text).toContain('Storage');
-      expect(text).toContain('Security');
-      expect(text).toContain('Networking');
-    });
-
-    it('should render integration tiles', () => {
-      wrapper = createWrapper();
-      const tiles = wrapper.findAll('.azure-tile');
-      expect(tiles.length).toBe(4);
-    });
-  });
-
-  describe('Component Identity', () => {
-    it('should have correct component name', () => {
-      wrapper = createWrapper();
-      expect(wrapper.vm.$options.name).toBe('AzureIndividualServices');
-    });
-  });
-
-  describe('filteredIntegrations Computed', () => {
-    it('should return all integrations when no filter', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm.filteredIntegrations.length).toBe(4);
-    });
-
-    it('should filter by displayName search query', async () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      vm.searchQuery = 'Active Directory';
-      await nextTick();
-      expect(vm.filteredIntegrations.length).toBe(1);
-      expect(vm.filteredIntegrations[0].displayName).toBe('Azure Active Directory');
-    });
-
-    it('should filter by category compute', async () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      vm.activeCategory = 'compute';
-      await nextTick();
-      expect(vm.filteredIntegrations.length).toBe(1);
-      expect(vm.filteredIntegrations[0].category).toBe('compute');
-    });
-
-    it('should filter by category storage', async () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      vm.activeCategory = 'storage';
-      await nextTick();
-      expect(vm.filteredIntegrations.length).toBe(1);
-      expect(vm.filteredIntegrations[0].displayName).toBe('Azure Blob Storage');
-    });
-
-    it('should filter by category security', async () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      vm.activeCategory = 'security';
-      await nextTick();
-      expect(vm.filteredIntegrations.length).toBe(1);
-    });
-
-    it('should return empty when search has no matches', async () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      vm.searchQuery = 'zzz-nomatch-service';
-      await nextTick();
-      expect(vm.filteredIntegrations.length).toBe(0);
-    });
-
-    it('should sort alphabetically by displayName', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      const names = vm.filteredIntegrations.map((i: any) => i.displayName);
-      const sorted = [...names].sort();
-      expect(names).toEqual(sorted);
-    });
-
-    it('should filter case insensitively', async () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      vm.searchQuery = 'azure blob';
-      await nextTick();
-      expect(vm.filteredIntegrations.length).toBe(1);
-    });
-  });
-
-  describe('searchQuery and activeCategory State', () => {
-    it('should default searchQuery to empty string', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm.searchQuery).toBe('');
-    });
-
-    it('should default activeCategory to "all"', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm.activeCategory).toBe('all');
-    });
-  });
-
-  describe('Empty State', () => {
-    it('should show empty state when no integrations match', async () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      vm.searchQuery = 'zzz-absolutely-nothing';
-      await nextTick();
-      expect(wrapper.text()).toContain('No integrations found');
-    });
-  });
-});
diff --git a/web/src/components/ingestion/recommended/AzureIndividualServices.vue b/web/src/components/ingestion/recommended/AzureIndividualServices.vue
deleted file mode 100644
index b776b63e3e..0000000000
--- a/web/src/components/ingestion/recommended/AzureIndividualServices.vue
+++ /dev/null
@@ -1,123 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <div class="w-full">
-    <div class="mb-4">
-      <OSearchInput
-        v-model="searchQuery"
-        :placeholder="t('ingestion.azureSetup.searchPlaceholder')"
-        clearable
-        class="max-w-md"
-        data-test="azure-integration-search"
-      />
-    </div>
-
-    <div class="mb-6">
-      <OTabs
-        v-model="activeCategory"
-        dense
-        data-test="azure-integration-category-tabs"
-      >
-        <OTab name="all" :label="t('ingestion.azureSetup.categoryAll')" />
-        <OTab name="logs" :label="t('ingestion.azureSetup.categoryLogs')" />
-        <OTab name="compute" :label="t('ingestion.azureSetup.categoryCompute')" />
-        <OTab name="storage" :label="t('ingestion.azureSetup.categoryStorage')" />
-        <OTab name="security" :label="t('ingestion.azureSetup.categorySecurity')" />
-        <OTab name="networking" :label="t('ingestion.azureSetup.categoryNetworking')" />
-      </OTabs>
-    </div>
-
-    <div
-      v-if="filteredIntegrations.length === 0"
-      class="text-center py-12 text-text-secondary"
-    >
-      <OIcon name="search-off" class="mb-2 w-12 h-12" />
-      <div class="text-base">{{ t("ingestion.azureSetup.noResults") }}</div>
-    </div>
-
-    <div
-      class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"
-      v-else
-    >
-      <AzureIntegrationTile
-        v-for="integration in filteredIntegrations"
-        :key="integration.id"
-        :integration="integration"
-      />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import OTabs from '@/lib/navigation/Tabs/OTabs.vue'
-import OTab from '@/lib/navigation/Tabs/OTab.vue'
-import OSearchInput from '@/lib/forms/SearchInput/OSearchInput.vue'
-import { defineComponent, ref, computed } from "vue";
-import { useI18n } from "vue-i18n";
-import { azureIntegrations } from "@/utils/azureIntegrations";
-import AzureIntegrationTile from "./AzureIntegrationTile.vue";
-import OIcon from "@/lib/core/Icon/OIcon.vue";
-
-export default defineComponent({
-  name: "AzureIndividualServices",
-  components: {
-    OTabs, OTab,
-    AzureIntegrationTile,
-    OSearchInput,
-    OIcon,
-},
-  setup() {
-    const { t } = useI18n();
-    const searchQuery = ref("");
-    const activeCategory = ref("all");
-
-    const filteredIntegrations = computed(() => {
-      let filtered = [...azureIntegrations];
-
-      // Filter by search query
-      if (searchQuery.value) {
-        const query = searchQuery.value.toLowerCase();
-        filtered = filtered.filter(
-          (integration) =>
-            integration.displayName.toLowerCase().includes(query) ||
-            integration.description.toLowerCase().includes(query) ||
-            integration.name.toLowerCase().includes(query)
-        );
-      }
-
-      // Filter by category
-      if (activeCategory.value !== "all") {
-        filtered = filtered.filter(
-          (integration) => integration.category === activeCategory.value
-        );
-      }
-
-      // Sort by name
-      filtered.sort((a, b) => a.displayName.localeCompare(b.displayName));
-
-      return filtered;
-    });
-
-    return {
-      t,
-      searchQuery,
-      activeCategory,
-      filteredIntegrations,
-    };
-  },
-});
-</script>
diff --git a/web/src/components/ingestion/recommended/AzureIntegrationTile.spec.ts b/web/src/components/ingestion/recommended/AzureIntegrationTile.spec.ts
deleted file mode 100644
index 9a725786dc..0000000000
--- a/web/src/components/ingestion/recommended/AzureIntegrationTile.spec.ts
+++ /dev/null
@@ -1,211 +0,0 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { mount, VueWrapper } from '@vue/test-utils';
-import { createStore } from 'vuex';
-import { createI18n } from 'vue-i18n';
-import { createRouter, createWebHistory } from 'vue-router';
-import AzureIntegrationTile from './AzureIntegrationTile.vue';
-
-vi.mock('../../../aws-exports', () => ({
-  default: { API_ENDPOINT: 'http://localhost:5080', region: 'us-east-1' },
-}));
-
-vi.mock('@/utils/azureIntegrations', () => ({
-  generateAzureDashboardURL: vi.fn(() => 'https://mock-azure-dashboard-url'),
-  azureIntegrations: [],
-}));
-
-vi.mock('@/services/segment_analytics', () => ({
-  default: { track: vi.fn() },
-}));
-
-const mockStore = createStore({
-  state: {
-    selectedOrganization: { identifier: 'test-org' },
-    userInfo: { email: 'test@example.com' },
-    organizationData: { organizationPasscode: 'test-passcode' },
-  },
-});
-
-const mockI18n = createI18n({ locale: 'en', messages: { en: {} } });
-const mockRouter = createRouter({
-  history: createWebHistory(),
-  routes: [
-    { path: '/', component: { template: '<div>Home</div>' } },
-    { path: '/dashboards', component: { template: '<div>Dashboards</div>' } },
-  ],
-});
-
-const createMockIntegration = (overrides = {}) => ({
-  id: 'azure-ad',
-  name: 'AzureAD',
-  displayName: 'Azure Active Directory',
-  description: 'Azure AD sign-in and audit logs',
-  category: 'security',
-  hasDashboard: true,
-  documentationUrl: 'https://docs.example.com/azure-ad',
-  ...overrides,
-});
-
-
-describe('AzureIntegrationTile.vue', () => {
-  let wrapper: VueWrapper;
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-    vi.stubGlobal('open', vi.fn());
-  });
-
-  afterEach(() => {
-    if (wrapper) wrapper.unmount();
-    vi.unstubAllGlobals();
-  });
-
-  const createWrapper = (integrationOverrides = {}) => {
-    return mount(AzureIntegrationTile, {
-      props: { integration: createMockIntegration(integrationOverrides) },
-      global: {
-        plugins: [mockI18n, mockRouter],
-        provide: { store: mockStore },
-      },
-    });
-  };
-
-  describe('Component Rendering', () => {
-    it('should mount without errors', () => {
-      wrapper = createWrapper();
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it('should unmount without errors', () => {
-      wrapper = createWrapper();
-      expect(() => wrapper.unmount()).not.toThrow();
-    });
-
-    it('should render integration display name', () => {
-      wrapper = createWrapper();
-      expect(wrapper.text()).toContain('Azure Active Directory');
-    });
-
-    it('should render integration description', () => {
-      wrapper = createWrapper();
-      expect(wrapper.text()).toContain('Azure AD sign-in and audit logs');
-    });
-
-    it('should render Documentation button when documentationUrl present', () => {
-      wrapper = createWrapper();
-      const docBtn = wrapper.find('[data-test="azure-azure-ad-documentation-btn"]');
-      expect(docBtn.exists()).toBe(true);
-    });
-
-    it('should render Dashboard button', () => {
-      wrapper = createWrapper();
-      const dashBtn = wrapper.find('[data-test="azure-azure-ad-dashboard-btn"]');
-      expect(dashBtn.exists()).toBe(true);
-    });
-
-    it('should render docs icon button when documentationUrl present', () => {
-      wrapper = createWrapper();
-      const docsIconBtn = wrapper.find('[data-test="azure-azure-ad-docs-btn"]');
-      expect(docsIconBtn.exists()).toBe(true);
-    });
-  });
-
-  describe('Component Identity', () => {
-    it('should have correct component name', () => {
-      wrapper = createWrapper();
-      expect(wrapper.vm.$options.name).toBe('AzureIntegrationTile');
-    });
-  });
-
-  describe('Props Validation', () => {
-    it('should accept integration prop', () => {
-      wrapper = createWrapper();
-      expect(wrapper.props('integration')).toBeDefined();
-    });
-
-    it('should display integration displayName', () => {
-      wrapper = createWrapper({ displayName: 'My Azure Service' });
-      expect(wrapper.text()).toContain('My Azure Service');
-    });
-  });
-
-  describe('handleDocumentation', () => {
-    it('should be exposed as a function', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(typeof vm.handleDocumentation).toBe('function');
-    });
-
-    it('should open documentation URL in new tab', async () => {
-      wrapper = createWrapper();
-      const docBtn = wrapper.find('[data-test="azure-azure-ad-documentation-btn"]');
-      await docBtn.trigger('click');
-      expect(window.open).toHaveBeenCalledWith(
-        'https://docs.example.com/azure-ad',
-        '_blank',
-        'noopener,noreferrer'
-      );
-    });
-
-    it('should not open anything if no documentationUrl', () => {
-      wrapper = createWrapper({ documentationUrl: undefined });
-      const vm = wrapper.vm as any;
-      vm.handleDocumentation();
-      expect(window.open).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('handleDashboard', () => {
-    it('should be exposed as a function', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(typeof vm.handleDashboard).toBe('function');
-    });
-
-    it('should navigate to dashboards when integration has dashboard', async () => {
-      wrapper = createWrapper({ hasDashboard: true });
-      const dashBtn = wrapper.find('[data-test="azure-azure-ad-dashboard-btn"]');
-      await dashBtn.trigger('click');
-      // Router push is called
-      expect(mockRouter.currentRoute.value.path).toBeDefined();
-    });
-
-    it('should not navigate when hasDashboard is false', () => {
-      wrapper = createWrapper({ hasDashboard: false });
-      const vm = wrapper.vm as any;
-      const pushSpy = vi.spyOn(mockRouter, 'push');
-      vm.handleDashboard();
-      expect(pushSpy).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('Documentation Button Rendering', () => {
-    it('should not render documentation button when no documentationUrl', () => {
-      wrapper = createWrapper({ documentationUrl: undefined });
-      const docBtn = wrapper.find('[data-test="azure-azure-ad-documentation-btn"]');
-      expect(docBtn.exists()).toBe(false);
-    });
-
-    it('should not render docs icon button when no documentationUrl', () => {
-      wrapper = createWrapper({ documentationUrl: undefined });
-      const docsIconBtn = wrapper.find('[data-test="azure-azure-ad-docs-btn"]');
-      expect(docsIconBtn.exists()).toBe(false);
-    });
-  });
-
-  describe('Dashboard Button State', () => {
-    it('should disable dashboard button when hasDashboard is false', () => {
-      wrapper = createWrapper({ hasDashboard: false });
-      const dashBtn = wrapper.find('[data-test="azure-azure-ad-dashboard-btn"]');
-      expect(dashBtn.attributes('disabled')).toBeDefined();
-    });
-
-    it('should enable dashboard button when hasDashboard is true', () => {
-      wrapper = createWrapper({ hasDashboard: true });
-      const dashBtn = wrapper.find('[data-test="azure-azure-ad-dashboard-btn"]');
-      // When enabled, disabled attribute should not be 'true' / should be undefined
-      const isDisabled = dashBtn.attributes('disabled');
-      expect(isDisabled).toBeUndefined();
-    });
-  });
-});
diff --git a/web/src/components/ingestion/recommended/AzureIntegrationTile.vue b/web/src/components/ingestion/recommended/AzureIntegrationTile.vue
deleted file mode 100644
index a17e3d1847..0000000000
--- a/web/src/components/ingestion/recommended/AzureIntegrationTile.vue
+++ /dev/null
@@ -1,236 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <OCard class="h-full flex flex-col transition-all duration-200 rounded-lg hover:-translate-y-0.5 hover:shadow-[0_4px_12px_rgba(0,0,0,0.1)] dark:hover:shadow-[0_4px_12px_rgba(255,255,255,0.1)]">
-    <OCardSection class="pb-2">
-      <div class="flex items-start justify-between mb-2">
-        <div class="font-semibold text-base leading-snug text-text-heading">
-          {{ integration.displayName }}
-        </div>
-        <OButton
-          v-if="integration.documentationUrl"
-          variant="ghost"
-          size="icon-circle-sm"
-          @click="handleDocumentation()"
-          class="opacity-70 hover:opacity-100 transition-opacity duration-200"
-          :data-test="`azure-${integration.id}-docs-btn`"
-        >
-          <OIcon name="description" size="sm" />
-          <OTooltip content="View Documentation" />
-        </OButton>
-      </div>
-      <div class="text-sm mb-3 leading-normal min-h-[3em] text-text-secondary">
-        {{ integration.description }}
-      </div>
-    </OCardSection>
-
-    <OCardActions class="pb-4">
-      <!-- Deploy Button (ARM template) -->
-      <OButton
-        v-if="integration.armTemplate"
-        variant="primary"
-        size="sm"
-        @click="handleDeploy()"
-        class="flex-1"
-        :data-test="`azure-${integration.id}-deploy-btn`"
-        >Deploy</OButton
-      >
-      <!-- Documentation Button (shown when no ARM template) -->
-      <OButton
-        v-else-if="integration.documentationUrl"
-        variant="primary"
-        size="sm"
-        @click="handleDocumentation()"
-        class="flex-1"
-        :data-test="`azure-${integration.id}-documentation-btn`"
-        >Documentation</OButton
-      >
-      <!-- Docs icon button (shown alongside Deploy when both exist) -->
-      <OButton
-        v-if="integration.armTemplate && integration.documentationUrl"
-        variant="ghost"
-        size="icon-circle-sm"
-        @click="handleDocumentation()"
-        :data-test="`azure-${integration.id}-docs-icon-btn`"
-      >
-        <OIcon name="description" size="sm" />
-        <OTooltip content="View Documentation" />
-      </OButton>
-      <!-- Dashboard Button -->
-      <OButton
-        variant="outline"
-        size="sm"
-        @click="handleDashboard"
-        :disabled="!integration.hasDashboard"
-        class="flex-1"
-        :data-test="`azure-${integration.id}-dashboard-btn`"
-        icon-left="dashboard"
-      >
-        Dashboard
-      </OButton>
-    </OCardActions>
-  </OCard>
-</template>
-
-<script lang="ts">
-import { defineComponent, type PropType } from "vue";
-import OButton from "@/lib/core/Button/OButton.vue";
-import OIcon from "@/lib/core/Icon/OIcon.vue";
-import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
-import OCard from "@/lib/core/Card/OCard.vue";
-import OCardSection from "@/lib/core/Card/OCardSection.vue";
-import OCardActions from "@/lib/core/Card/OCardActions.vue";
-import { useStore } from "vuex";
-import { useRouter } from "vue-router";
-import type { AzureIntegration } from "@/utils/azureIntegrations";
-import {
-  generateAzureDashboardURL,
-  generateARMTemplateURL,
-} from "@/utils/azureIntegrations";
-import { getEndPoint, getIngestionURL } from "@/utils/zincutils";
-import segment from "@/services/segment_analytics";
-import { toast } from "@/lib/feedback/Toast/useToast";
-
-export default defineComponent({
-  name: "AzureIntegrationTile",
-  components: { OButton, OIcon, OTooltip, OCard, OCardSection, OCardActions },
-  props: {
-    integration: {
-      type: Object as PropType<AzureIntegration>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const store = useStore();
-    const router = useRouter();
-
-    let endpoint: any = null;
-    try {
-      endpoint = getEndPoint(getIngestionURL());
-    } catch (e) {
-      console.error("Error getting endpoint:", e);
-    }
-
-    const handleDeploy = () => {
-      if (!props.integration.armTemplate) return;
-
-      if (!endpoint?.url) {
-        toast({
-          variant: "error",
-          message: "Invalid ingestion endpoint. Please check configuration.",
-        });
-        return;
-      }
-
-      const organizationId = store.state?.selectedOrganization?.identifier;
-      const email = store.state?.userInfo?.email;
-      const passcode = store.state?.organizationData?.organizationPasscode;
-
-      if (!organizationId || !email || !passcode) {
-        toast({
-          variant: "error",
-          message: "Missing organization credentials. Please refresh the page.",
-        });
-        return;
-      }
-
-      const accessKey = btoa(`${email}:${passcode}`);
-      const endpointUrl = `${endpoint.url}/azure/${organizationId}/default/_event_hub`;
-
-      const url = generateARMTemplateURL(
-        props.integration,
-        endpointUrl,
-        accessKey,
-      );
-
-      window.open(url, "_blank", "noopener,noreferrer");
-
-      segment.track("Azure ARM Template Deploy Started", {
-        service: props.integration.name,
-        integration_id: props.integration.id,
-      });
-
-      toast({
-        variant: "info",
-        message: `Opening Azure portal to deploy ${props.integration.displayName}`,
-      });
-    };
-
-    const handleDashboard = () => {
-      if (!props.integration.hasDashboard) {
-        return;
-      }
-
-      try {
-        const organizationId = store.state.selectedOrganization.identifier;
-
-        // Get the base URL from current location
-        const baseURL = `${window.location.protocol}//${window.location.host}`;
-
-        // Generate dashboard URL
-        const dashboardURL = generateAzureDashboardURL(
-          props.integration,
-          organizationId,
-          baseURL,
-        );
-
-        // Track analytics
-        segment.track("Azure Dashboard Opened", {
-          service: props.integration.name,
-          integration_id: props.integration.id,
-        });
-
-        // Navigate to dashboard
-        router.push(`/dashboards?org_identifier=${organizationId}`);
-      } catch (error) {
-        console.error("Error navigating to dashboard:", error);
-        toast({
-          variant: "error",
-          message: "Error opening dashboard. Please try again.",
-        });
-      }
-    };
-
-    const handleDocumentation = () => {
-      if (!props.integration.documentationUrl) {
-        return;
-      }
-
-      // Track analytics
-      segment.track("Azure Documentation Opened", {
-        service: props.integration.name,
-        integration_id: props.integration.id,
-        documentation_url: props.integration.documentationUrl,
-      });
-
-      // Open documentation in new tab
-      window.open(
-        props.integration.documentationUrl,
-        "_blank",
-        "noopener,noreferrer",
-      );
-    };
-
-    return {
-      store,
-      handleDeploy,
-      handleDashboard,
-      handleDocumentation,
-    };
-  },
-});
-</script>
diff --git a/web/src/components/ingestion/recommended/AzureQuickSetup.spec.ts b/web/src/components/ingestion/recommended/AzureQuickSetup.spec.ts
deleted file mode 100644
index 5e19f0dcf3..0000000000
--- a/web/src/components/ingestion/recommended/AzureQuickSetup.spec.ts
+++ /dev/null
@@ -1,258 +0,0 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { mount, VueWrapper } from '@vue/test-utils';
-import { createStore } from 'vuex';
-import { createI18n } from 'vue-i18n';
-import enUS from '@/locales/languages/en-US.json';
-import { createRouter, createWebHistory } from 'vue-router';
-import AzureQuickSetup from './AzureQuickSetup.vue';
-
-vi.mock('../../../aws-exports', () => ({
-  default: { API_ENDPOINT: 'http://localhost:5080', region: 'us-east-1' },
-}));
-
-vi.mock('@/utils/azureIntegrations', () => ({
-  azureIntegrations: [
-    {
-      id: 'azure-ad',
-      name: 'AzureAD',
-      displayName: 'Azure Active Directory',
-      description: 'Azure AD logs and sign-ins',
-      category: 'security',
-      hasDashboard: false,
-    },
-    {
-      id: 'azure-storage',
-      name: 'AzureStorage',
-      displayName: 'Azure Blob Storage',
-      description: 'Azure Blob Storage logs',
-      category: 'storage',
-      hasDashboard: true,
-    },
-  ],
-  generateAzureDashboardURL: vi.fn(() => 'https://mock-azure-dashboard-url'),
-}));
-
-vi.mock('@/services/dashboards', () => ({
-  default: {
-    list_Folders: vi.fn(() => Promise.resolve({ data: { list: [] } })),
-    new_Folder: vi.fn(() => Promise.resolve({ data: { folderId: 'folder-1', name: 'Microsoft' } })),
-    list: vi.fn(() => Promise.resolve({ data: { dashboards: [] } })),
-    create: vi.fn(() => Promise.resolve({ data: {} })),
-    delete: vi.fn(() => Promise.resolve({ data: {} })),
-  },
-}));
-
-vi.mock('@/services/segment_analytics', () => ({
-  default: { track: vi.fn() },
-}));
-
-const mockStore = createStore({
-  state: {
-    selectedOrganization: { identifier: 'test-org', name: 'Test Organization' },
-    userInfo: { email: 'test@example.com' },
-    organizationData: { organizationPasscode: 'test-passcode' },
-  },
-  actions: {
-    'organizationData/getFolders': vi.fn(),
-  },
-});
-
-// Real locale messages: the component renders t() keys, and several
-// assertions below check the resulting English text.
-const mockI18n = createI18n({ locale: 'en', messages: { en: enUS } });
-const mockRouter = createRouter({
-  history: createWebHistory(),
-  routes: [{ path: '/', component: { template: '<div>Home</div>' } }],
-});
-
-
-describe('AzureQuickSetup.vue', () => {
-  let wrapper: VueWrapper;
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-    vi.stubGlobal('open', vi.fn());
-    vi.stubGlobal('fetch', vi.fn(() => Promise.resolve({
-      ok: true,
-      json: () => Promise.resolve({ title: 'Microsoft O365 Dashboard' }),
-    })));
-  });
-
-  afterEach(() => {
-    if (wrapper) wrapper.unmount();
-    vi.unstubAllGlobals();
-  });
-
-  const createWrapper = () => {
-    return mount(AzureQuickSetup, {
-      global: {
-        plugins: [mockI18n, mockRouter],
-        provide: { store: mockStore },
-      },
-    });
-  };
-
-  describe('Component Rendering', () => {
-    it('should mount without errors', () => {
-      wrapper = createWrapper();
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it('should unmount without errors', () => {
-      wrapper = createWrapper();
-      expect(() => wrapper.unmount()).not.toThrow();
-    });
-
-    it('should render View Setup Guide button', () => {
-      wrapper = createWrapper();
-      const deployBtn = wrapper.find('[data-test="azure-quick-setup-deploy-btn"]');
-      expect(deployBtn.exists()).toBe(true);
-    });
-
-    it('should render Add Dashboard button', () => {
-      wrapper = createWrapper();
-      const dashboardBtn = wrapper.find('[data-test="azure-quick-setup-add-dashboard-btn"]');
-      expect(dashboardBtn.exists()).toBe(true);
-    });
-
-    it('should render View/Hide Details button', () => {
-      wrapper = createWrapper();
-      const detailsBtn = wrapper.find('[data-test="azure-quick-setup-details-btn"]');
-      expect(detailsBtn.exists()).toBe(true);
-    });
-
-    it('should render Azure Function Integration title', () => {
-      wrapper = createWrapper();
-      expect(wrapper.text()).toContain('Azure Function Integration');
-    });
-  });
-
-  describe('Component Identity', () => {
-    it('should have correct component name', () => {
-      wrapper = createWrapper();
-      expect(wrapper.vm.$options.name).toBe('AzureQuickSetup');
-    });
-  });
-
-  describe('showDetails Toggle', () => {
-    it('should have showDetails false by default', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm.showDetails).toBe(false);
-    });
-
-    it('should toggle showDetails on details button click', async () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      const detailsBtn = wrapper.find('[data-test="azure-quick-setup-details-btn"]');
-      await detailsBtn.trigger('click');
-      expect(vm.showDetails).toBe(true);
-    });
-
-    it('should toggle showDetails back when clicked again', async () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      const detailsBtn = wrapper.find('[data-test="azure-quick-setup-details-btn"]');
-      await detailsBtn.trigger('click');
-      expect(vm.showDetails).toBe(true);
-      await detailsBtn.trigger('click');
-      expect(vm.showDetails).toBe(false);
-    });
-  });
-
-  describe('addingDashboard State', () => {
-    it('should have addingDashboard false by default', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm.addingDashboard).toBe(false);
-    });
-  });
-
-  describe('includedServices Computed', () => {
-    it('should compute includedServices from azureIntegrations', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm.includedServices).toBeDefined();
-      expect(Array.isArray(vm.includedServices)).toBe(true);
-      expect(vm.includedServices.length).toBe(2);
-    });
-
-    it('should include services with name, description, category', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm.includedServices[0].name).toBeDefined();
-      expect(vm.includedServices[0].description).toBeDefined();
-      expect(vm.includedServices[0].category).toBeDefined();
-    });
-
-    it('should sort services alphabetically by name', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      const names = vm.includedServices.map((s: any) => s.name);
-      const sorted = [...names].sort();
-      expect(names).toEqual(sorted);
-    });
-  });
-
-  describe('getCategoryIcon Function', () => {
-    it('should return description icon for logs', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm.getCategoryIcon('logs')).toBe('description');
-    });
-
-    it('should return computer icon for compute', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm.getCategoryIcon('compute')).toBe('computer');
-    });
-
-    it('should return storage icon for storage', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm.getCategoryIcon('storage')).toBe('storage');
-    });
-
-    it('should return cloud for unknown category', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm.getCategoryIcon('unknown')).toBe('cloud');
-    });
-  });
-
-  describe('formatCategory Function', () => {
-    it('should capitalize first letter of category', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm.formatCategory('storage')).toBe('Storage');
-      expect(vm.formatCategory('security')).toBe('Security');
-    });
-  });
-
-  describe('handleDeployFunction', () => {
-    it('should be exposed as a function', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(typeof vm.handleDeployFunction).toBe('function');
-    });
-
-    it('should open GitHub repository when View Setup Guide is clicked', async () => {
-      wrapper = createWrapper();
-      const deployBtn = wrapper.find('[data-test="azure-quick-setup-deploy-btn"]');
-      await deployBtn.trigger('click');
-      expect(window.open).toHaveBeenCalledWith(
-        'https://github.com/openobserve/azure-function-openobserve',
-        '_blank',
-        'noopener,noreferrer'
-      );
-    });
-  });
-
-  describe('handleAddDashboard', () => {
-    it('should be exposed as a function', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(typeof vm.handleAddDashboard).toBe('function');
-    });
-  });
-});
diff --git a/web/src/components/ingestion/recommended/AzureQuickSetup.vue b/web/src/components/ingestion/recommended/AzureQuickSetup.vue
deleted file mode 100644
index 962e37bdf5..0000000000
--- a/web/src/components/ingestion/recommended/AzureQuickSetup.vue
+++ /dev/null
@@ -1,376 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <div class="azure-quick-setup">
-    <div class="setup-card max-w-225 mx-auto">
-      <div class="pb-4">
-        <div class="flex items-start gap-4">
-          <div class="flex-shrink-0">
-            <OIcon name="cloud" size="xl" />
-          </div>
-          <div class="flex-1">
-            <h5 class="text-lg font-bold m-0 mb-2 title text-text-heading">
-              Azure Function Integration
-            </h5>
-            <p class="text-sm m-0 mb-4 description">
-              Deploy the OpenObserve Azure Function to collect logs from any
-              Azure service through diagnostic settings and Event Hub.
-            </p>
-
-            <div class="flex gap-2 mt-4">
-              <OButton
-                variant="primary"
-                size="sm"
-                @click="handleDeployFunction"
-                data-test="azure-quick-setup-deploy-btn"
-              >
-                <template #icon-left
-                  ><OIcon name="open-in-new" size="sm"
-                /></template>
-                View Setup Guide
-              </OButton>
-              <OButton
-                variant="outline"
-                size="sm"
-                @click="handleAddDashboard"
-                :loading="addingDashboard"
-                data-test="azure-quick-setup-add-dashboard-btn"
-              >
-                <template #icon-left
-                  ><OIcon name="dashboard" size="sm"
-                /></template>
-                Add Dashboard
-              </OButton>
-              <OButton
-                variant="ghost-primary"
-                size="sm"
-                @click="showDetails = !showDetails"
-                data-test="azure-quick-setup-details-btn"
-              >
-                <template #icon-left
-                  ><OIcon
-                    :name="showDetails ? 'expand-less' : 'expand-more'"
-                    size="sm"
-                /></template>
-                {{ showDetails ? "Hide" : "View" }} Details
-              </OButton>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div
-        class="grid transition-[grid-template-rows] duration-300 ease-in-out"
-        :class="showDetails ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'"
-      >
-        <div class="overflow-hidden min-h-0">
-        <div>
-          <OSeparator />
-          <OCardSection class="pt-4">
-            <div class="text-sm details-section">
-              <h6
-                class="text-base font-semibold m-0 mb-3 details-title"
-               
-              >
-                Supported Azure Services ({{ includedServices.length }})
-              </h6>
-
-              <div class="mb-4">
-                <div class="flex gap-2">
-                  <div
-                    v-for="service in includedServices"
-                    :key="service.name"
-                    class="w-full col-sm-6"
-                  >
-                    <div class="service-item p-2 rounded border border-border-default bg-surface-subtle hover:bg-surface-subtle-hover transition-all duration-200 ease-in-out">
-                      <div class="flex items-start gap-2">
-                        <OIcon
-                          :name="getCategoryIcon(service.category)"
-                          size="sm"
-                          class="mt-0.5"
-                          color="primary"
-                        />
-                        <div class="flex-1">
-                          <div class="font-medium text-sm service-name text-text-heading">
-                            {{ service.name }}
-                          </div>
-                          <div class="text-xs mt-0.5 service-description">
-                            {{ service.description }}
-                          </div>
-                          <div class="text-xs mt-1 font-medium service-category text-text-muted">
-                            {{ formatCategory(service.category) }}
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <h6
-                class="text-base font-semibold m-0 mb-3 details-title"
-               
-              >
-                How It Works
-              </h6>
-
-              <div class="mb-3">
-                <div class="font-semibold mb-1 detail-label">
-                  Architecture:
-                </div>
-                <div class="detail-value">
-                  Azure Service → Diagnostic Settings → Event Hub → Azure
-                  Function → OpenObserve
-                </div>
-              </div>
-
-              <div class="mb-3">
-                <div class="font-semibold mb-1 detail-label">
-                  What You Need:
-                </div>
-                <ul class="list-disc ml-5 space-y-1 detail-value">
-                  <li>Azure subscription with appropriate permissions</li>
-                  <li>Event Hub namespace and hub</li>
-                  <li>Azure Function App</li>
-                  <li>OpenObserve endpoint and credentials</li>
-                </ul>
-              </div>
-
-              <div class="mb-3">
-                <div class="font-semibold mb-1 detail-label">
-                  Setup Steps:
-                </div>
-                <ol class="list-decimal ml-5 space-y-1 detail-value">
-                  <li>Create an Event Hub namespace and hub</li>
-                  <li>Deploy the Azure Function from GitHub</li>
-                  <li>Configure function with OpenObserve credentials</li>
-                  <li>
-                    Enable diagnostic settings on Azure services to send logs to
-                    Event Hub
-                  </li>
-                </ol>
-              </div>
-
-              <div>
-                <div class="font-semibold mb-1 detail-label">
-                  Cost Considerations:
-                </div>
-                <div class="detail-value">
-                  Charges apply for Event Hub throughput, Azure Function
-                  execution, and OpenObserve storage. Refer to Azure and
-                  OpenObserve pricing for details.
-                </div>
-              </div>
-            </div>
-          </OCardSection>
-        </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref, computed } from "vue";
-import OButton from "@/lib/core/Button/OButton.vue";
-import OIcon from "@/lib/core/Icon/OIcon.vue";
-import OSeparator from '@/lib/core/Separator/OSeparator.vue';
-import OCardSection from "@/lib/core/Card/OCardSection.vue";
-import { useStore } from "vuex";
-import { azureIntegrations } from "@/utils/azureIntegrations";
-import dashboardsService from "@/services/dashboards";
-import segment from "@/services/segment_analytics";
-import { toast } from "@/lib/feedback/Toast/useToast";
-import { useConfirmDialog } from "@/composables/useConfirmDialog";
-
-export default defineComponent({
-  name: "AzureQuickSetup",
-  components: { OSeparator, OButton, OCardSection,
-    OIcon,
-},
-  setup() {
-    const store = useStore();
-    const { confirm } = useConfirmDialog();
-    const showDetails = ref(false);
-    const addingDashboard = ref(false);
-
-    // Get all Azure services
-    const includedServices = computed(() => {
-      return azureIntegrations
-        .map((integration) => ({
-          name: integration.displayName,
-          description: integration.description,
-          category: integration.category,
-        }))
-        .sort((a, b) => a.name.localeCompare(b.name));
-    });
-
-    const getCategoryIcon = (category: string) => {
-      const iconMap: Record<string, string> = {
-        logs: "description",
-        metrics: "speed",
-        security: "security",
-        networking: "network_check",
-        compute: "computer",
-        storage: "storage",
-        other: "settings",
-      };
-      return iconMap[category] || "cloud";
-    };
-
-    const formatCategory = (category: string) => {
-      return category.charAt(0).toUpperCase() + category.slice(1);
-    };
-
-    const handleDeployFunction = () => {
-      // Track analytics
-      segment.track("Azure Function Setup Opened", {
-        integration_type: "azure-function",
-        services_count: includedServices.value.length,
-      });
-
-      // Open GitHub repository in new tab
-      window.open(
-        "https://github.com/openobserve/azure-function-openobserve",
-        "_blank",
-        "noopener,noreferrer",
-      );
-    };
-
-    const handleAddDashboard = async () => {
-      try {
-        addingDashboard.value = true;
-
-        const dashboardUrl =
-          "https://raw.githubusercontent.com/openobserve/dashboards/main/Microsoft_O365/Microsoft.dashboard.json";
-        const orgId = store.state.selectedOrganization.identifier;
-
-        // Fetch the dashboard JSON
-        const response = await fetch(dashboardUrl);
-        if (!response.ok) {
-          throw new Error(`Failed to fetch dashboard: ${response.statusText}`);
-        }
-
-        const dashboardData = await response.json();
-        const dashboardTitle = dashboardData.title;
-
-        // Get all folders using the API
-        const foldersResponse = await dashboardsService.list_Folders(orgId);
-        const folders = foldersResponse.data?.list || [];
-
-        // Check if Microsoft folder exists
-        let microsoftFolder = folders.find((f: any) => f.name === "Microsoft");
-
-        if (!microsoftFolder) {
-          // Create Microsoft folder
-          const folderResponse = await dashboardsService.new_Folder(orgId, {
-            name: "Microsoft",
-            description: "Microsoft Azure and O365 dashboards",
-          });
-          microsoftFolder = folderResponse.data;
-        }
-
-        const folderId = microsoftFolder.folderId;
-
-        // Check if dashboard already exists
-        const dashboardsResponse = await dashboardsService.list(
-          0,
-          1000,
-          "name",
-          false,
-          "",
-          orgId,
-          folderId,
-          dashboardTitle,
-        );
-
-        const existingDashboards = dashboardsResponse.data?.dashboards || [];
-        const existingDashboard = existingDashboards.find(
-          (d: any) => d.title === dashboardTitle,
-        );
-
-        let shouldReplace = false;
-        if (existingDashboard) {
-          // Ask user if they want to replace
-          shouldReplace = await confirm({
-            title: "Dashboard Already Exists",
-            message: `A dashboard named "${dashboardTitle}" already exists in the Microsoft folder. Do you want to replace it?`,
-          });
-
-          if (!shouldReplace) {
-            addingDashboard.value = false;
-            return;
-          }
-
-          // Delete existing dashboard
-          await dashboardsService.delete(
-            orgId,
-            existingDashboard.dashboardId,
-            folderId,
-          );
-          await new Promise((resolve) => setTimeout(resolve, 500));
-        }
-
-
-        // Add the dashboard to the Microsoft folder
-        await dashboardsService.create(orgId, dashboardData, folderId);
-
-        // Refresh folders in store
-        await store.dispatch("organizationData/getFolders", {
-          org_identifier: orgId,
-        });
-
-        // Track analytics
-        segment.track("Azure Dashboard Added", {
-          dashboard_name: "Microsoft O365",
-          integration_type: "azure",
-          folder: "Microsoft",
-          replaced: shouldReplace,
-        });
-
-        toast({
-          variant: "success",
-          message: shouldReplace
-            ? "Microsoft O365 dashboard replaced successfully"
-            : "Microsoft O365 dashboard added successfully to Microsoft folder",
-        });
-      } catch (error) {
-        console.error("Error adding dashboard:", error);
-        toast({
-          variant: "error",
-          message: `Failed to add dashboard: ${error instanceof Error ? error.message : "Unknown error"}`,
-          timeout: 5000,
-        });
-      } finally {
-        addingDashboard.value = false;
-      }
-    };
-
-    return {
-      store,
-      showDetails,
-      includedServices,
-      addingDashboard,
-      handleDeployFunction,
-      handleAddDashboard,
-      getCategoryIcon,
-      formatCategory,
-    };
-  },
-});
-</script>
-
diff --git a/web/src/components/ingestion/rum/Index.spec.ts b/web/src/components/ingestion/rum/Index.spec.ts
deleted file mode 100644
index 6fba19142f..0000000000
--- a/web/src/components/ingestion/rum/Index.spec.ts
+++ /dev/null
@@ -1,411 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-
-import { mount, flushPromises } from "@vue/test-utils";
-import { describe, expect, it, beforeEach, afterEach, vi } from "vitest";
-import i18n from "@/locales";
-import store from "@/test/unit/helpers/store";
-
-// Mock services
-vi.mock("@/services/segment_analytics", () => ({
-  default: {
-    track: vi.fn(),
-  },
-}));
-
-vi.mock("@/utils/zincutils", () => ({
-  getImageURL: vi.fn(() => "mock-image-url"),
-  verifyOrganizationStatus: vi.fn(),
-}));
-
-vi.mock("../../../aws-exports", () => ({
-  default: {
-    API_ENDPOINT: "http://localhost:5080",
-    isCloud: "false",
-  },
-}));
-
-// Mock clipboard utility — handles copy + notifications internally
-vi.mock("@/utils/clipboard", () => ({
-  copyToClipboard: vi.fn().mockResolvedValue(true),
-}));
-
-// Mock router
-const mockRouter = {
-  currentRoute: {
-    value: {
-      name: "frontendMonitoring",
-      query: {},
-    },
-  },
-  push: vi.fn(),
-};
-
-vi.mock("vue-router", () => ({
-  useRouter: () => mockRouter,
-  useRoute: () => mockRouter.currentRoute.value,
-}));
-
-import IngestRum from "@/components/ingestion/rum/Index.vue";
-
-// Helper to build mount options with O2 component stubs
-function buildMountOptions() {
-  return {
-    props: {
-      currOrgIdentifier: "test-org",
-    },
-    global: {
-      plugins: [i18n],
-      provide: {
-        store,
-      },
-      stubs: {
-        OSplitter: {
-          template:
-            '<div><slot name="before"></slot><slot name="after"></slot></div>',
-        },
-        OTabs: {
-          template: '<div><slot /></div>',
-        },
-        ORouteTab: true,
-        "router-view": true,
-      },
-    },
-  };
-}
-
-describe("IngestRum Component", () => {
-  let wrapper: any = null;
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-
-    // Default route for most tests
-    mockRouter.currentRoute.value.name = "frontendMonitoring";
-    mockRouter.currentRoute.value.query = {};
-
-    wrapper = mount(IngestRum, buildMountOptions());
-  });
-
-  afterEach(() => {
-    if (wrapper) {
-      wrapper.unmount();
-    }
-  });
-
-  // ─────────────────────────────────────────────────────────────────────────
-  // Component Initialization
-  // ─────────────────────────────────────────────────────────────────────────
-  describe("Component Initialization", () => {
-    it("should mount successfully", () => {
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it("should have the correct component name", () => {
-      expect(wrapper.vm.$options.name).toBe("IngestRum");
-    });
-
-    it("should initialise splitterModel to 200", () => {
-      // IngestRum uses ref(200), not ref(250)
-      expect(wrapper.vm.splitterModel).toBe(200);
-    });
-
-    it("should expose currentUserEmail from the store", () => {
-      expect(wrapper.vm.currentUserEmail).toBe(store.state.userInfo.email);
-    });
-
-    it("should expose copyToClipboardFn as a function", () => {
-      expect(typeof wrapper.vm.copyToClipboardFn).toBe("function");
-    });
-
-    it("should expose showUpdateDialogFn as a function", () => {
-      expect(typeof wrapper.vm.showUpdateDialogFn).toBe("function");
-    });
-
-    it("should initialise confirmUpdate to false", () => {
-      expect(wrapper.vm.confirmUpdate).toBe(false);
-    });
-
-    it("should initialise rumtabs data property to 'rumWebTab'", () => {
-      // rumtabs is declared in setup() for IngestRum
-      expect(wrapper.vm.rumtabs).toBe("rumWebTab");
-    });
-  });
-
-  // ─────────────────────────────────────────────────────────────────────────
-  // Component Props and Data
-  // ─────────────────────────────────────────────────────────────────────────
-  describe("Component Props and Data", () => {
-    it("should accept and reflect the currOrgIdentifier prop", () => {
-      expect(wrapper.props("currOrgIdentifier")).toBe("test-org");
-    });
-
-    it("should use empty string as the default for currOrgIdentifier", () => {
-      const testWrapper = mount(IngestRum, {
-        global: {
-          plugins: [i18n],
-          provide: { store },
-          stubs: {
-            OSplitter: {
-              template:
-                '<div><slot name="before"></slot><slot name="after"></slot></div>',
-            },
-            OTabs: {
-              template: '<div><slot /></div>',
-            },
-            ORouteTab: true,
-            "router-view": true,
-          },
-        },
-      });
-      expect(testWrapper.props("currOrgIdentifier")).toBe("");
-      testWrapper.unmount();
-    });
-
-    it("should have correct prop type definition for currOrgIdentifier", () => {
-      const propDef = wrapper.vm.$options.props.currOrgIdentifier;
-      expect(propDef.type).toBe(String);
-      expect(propDef.default).toBe("");
-    });
-
-    it("should expose the config object with API_ENDPOINT", () => {
-      expect(wrapper.vm.config).toBeDefined();
-      expect(wrapper.vm.config.API_ENDPOINT).toBe("http://localhost:5080");
-    });
-
-    it("should expose getImageURL as a function", () => {
-      expect(typeof wrapper.vm.getImageURL).toBe("function");
-      expect(wrapper.vm.getImageURL("any")).toBe("mock-image-url");
-    });
-
-    it("should expose the i18n translation function t", () => {
-      expect(typeof wrapper.vm.t).toBe("function");
-    });
-
-    it("should expose the store instance", () => {
-      expect(wrapper.vm.store).toBeDefined();
-      expect(wrapper.vm.store.state.selectedOrganization).toBeDefined();
-    });
-
-    it("should expose the router instance", () => {
-      expect(wrapper.vm.router).toBeDefined();
-    });
-  });
-
-  // ─────────────────────────────────────────────────────────────────────────
-  // Route-based Redirection (onMounted — not onBeforeMount)
-  // ─────────────────────────────────────────────────────────────────────────
-  describe("Route-based Redirection", () => {
-    it("should push with org_identifier query when route is 'frontendMonitoring'", () => {
-      expect(mockRouter.push).toHaveBeenCalledWith({
-        name: "frontendMonitoring",
-        query: {
-          org_identifier: store.state.selectedOrganization.identifier,
-        },
-      });
-    });
-
-    it("should redirect to 'frontendMonitoring' when route name is 'rumMonitoring'", () => {
-      mockRouter.currentRoute.value.name = "rumMonitoring";
-      const tw = mount(IngestRum, buildMountOptions());
-      expect(mockRouter.push).toHaveBeenCalledWith({
-        name: "frontendMonitoring",
-        query: {
-          org_identifier: store.state.selectedOrganization.identifier,
-        },
-      });
-      tw.unmount();
-    });
-
-    it("should not call router.push for an unrelated route", () => {
-      mockRouter.currentRoute.value.name = "someOtherPage";
-      mockRouter.push.mockClear();
-      const tw = mount(IngestRum, buildMountOptions());
-      expect(mockRouter.push).not.toHaveBeenCalled();
-      tw.unmount();
-    });
-
-    it("should use the correct org_identifier from the store in navigation query", () => {
-      expect(mockRouter.push).toHaveBeenCalledWith(
-        expect.objectContaining({
-          query: {
-            org_identifier: store.state.selectedOrganization.identifier,
-          },
-        }),
-      );
-    });
-
-    it("should push to 'frontendMonitoring' and not any other named route", () => {
-      mockRouter.currentRoute.value.name = "rumMonitoring";
-      const tw = mount(IngestRum, buildMountOptions());
-      const calls = mockRouter.push.mock.calls;
-      const lastCall = calls[calls.length - 1][0];
-      expect(lastCall.name).toBe("frontendMonitoring");
-      tw.unmount();
-    });
-  });
-
-  // ─────────────────────────────────────────────────────────────────────────
-  // copyToClipboardFn
-  //
-  // The component imports copyToClipboard from @/utils/clipboard and passes
-  // successMessage / errorMessage / timeout options. Notifications are handled
-  // internally by the clipboard utility — the component does NOT call
-  // notify directly. Segment analytics only fire on copy success.
-  // ─────────────────────────────────────────────────────────────────────────
-  describe("copyToClipboardFn", () => {
-    const expectedOptions = {
-      successMessage: "Content Copied Successfully!",
-      errorMessage: "Error while copy content.",
-      timeout: 5000,
-    };
-
-    it("should call copyToClipboard with content.innerText and options", async () => {
-      const { copyToClipboard } = await import("@/utils/clipboard");
-
-      const mockContent = { innerText: "rum sdk snippet" };
-      wrapper.vm.copyToClipboardFn(mockContent);
-      await flushPromises();
-
-      expect(copyToClipboard).toHaveBeenCalledWith(
-        "rum sdk snippet",
-        expectedOptions,
-      );
-    });
-
-    it("should track segment analytics with page 'RUM Ingestion' on copy success", async () => {
-      const { copyToClipboard } = await import("@/utils/clipboard");
-      vi.mocked(copyToClipboard).mockResolvedValue(true);
-
-      const segment = await import("@/services/segment_analytics");
-
-      mockRouter.currentRoute.value.name = "frontendMonitoring";
-      wrapper.vm.copyToClipboardFn({ innerText: "rum snippet" });
-      await flushPromises();
-
-      expect(segment.default.track).toHaveBeenCalledWith("Button Click", {
-        button: "Copy to Clipboard",
-        ingestion: "frontendMonitoring",
-        user_org: store.state.selectedOrganization.identifier,
-        user_id: store.state.userInfo.email,
-        page: "RUM Ingestion",
-      });
-    });
-
-    it("should use 'RUM Ingestion' as the page value, not 'Ingestion'", async () => {
-      const { copyToClipboard } = await import("@/utils/clipboard");
-      vi.mocked(copyToClipboard).mockResolvedValue(true);
-
-      const segment = await import("@/services/segment_analytics");
-
-      wrapper.vm.copyToClipboardFn({ innerText: "check page" });
-      await flushPromises();
-
-      const trackCall = vi.mocked(segment.default.track).mock.calls[0];
-      expect(trackCall[1].page).toBe("RUM Ingestion");
-      expect(trackCall[1].page).not.toBe("Ingestion");
-    });
-
-    it("should NOT track segment analytics when clipboard copy fails", async () => {
-      // The component only calls segment.track inside .then(success => { if (success) { ... } })
-      // When copyToClipboard resolves to false, segment.track is never called.
-      const { copyToClipboard } = await import("@/utils/clipboard");
-      vi.mocked(copyToClipboard).mockResolvedValue(false);
-
-      const segment = await import("@/services/segment_analytics");
-
-      mockRouter.currentRoute.value.name = "frontendMonitoring";
-      wrapper.vm.copyToClipboardFn({ innerText: "fail track" });
-      await flushPromises();
-
-      expect(segment.default.track).not.toHaveBeenCalled();
-    });
-
-    it("should handle empty innerText gracefully", async () => {
-      const { copyToClipboard } = await import("@/utils/clipboard");
-      vi.mocked(copyToClipboard).mockResolvedValue(true);
-
-      wrapper.vm.copyToClipboardFn({ innerText: "" });
-      await flushPromises();
-
-      expect(copyToClipboard).toHaveBeenCalledWith("", expectedOptions);
-    });
-
-    it("should handle undefined innerText gracefully", async () => {
-      const { copyToClipboard } = await import("@/utils/clipboard");
-      vi.mocked(copyToClipboard).mockResolvedValue(true);
-
-      wrapper.vm.copyToClipboardFn({});
-      await flushPromises();
-
-      expect(copyToClipboard).toHaveBeenCalledWith(undefined, expectedOptions);
-    });
-  });
-
-  // ─────────────────────────────────────────────────────────────────────────
-  // showUpdateDialogFn
-  // ─────────────────────────────────────────────────────────────────────────
-  describe("showUpdateDialogFn", () => {
-    it("should set confirmUpdate to true when called", () => {
-      expect(wrapper.vm.confirmUpdate).toBe(false);
-      wrapper.vm.showUpdateDialogFn();
-      expect(wrapper.vm.confirmUpdate).toBe(true);
-    });
-
-    it("should keep confirmUpdate true on subsequent calls", () => {
-      wrapper.vm.showUpdateDialogFn();
-      wrapper.vm.showUpdateDialogFn();
-      expect(wrapper.vm.confirmUpdate).toBe(true);
-    });
-  });
-
-  // ─────────────────────────────────────────────────────────────────────────
-  // Store Integration
-  // ─────────────────────────────────────────────────────────────────────────
-  describe("Store Integration", () => {
-    it("should read userInfo.email from the store", () => {
-      expect(wrapper.vm.currentUserEmail).toBe(store.state.userInfo.email);
-    });
-
-    it("should use store org identifier in router navigation query", () => {
-      expect(mockRouter.push).toHaveBeenCalledWith(
-        expect.objectContaining({
-          query: {
-            org_identifier: store.state.selectedOrganization.identifier,
-          },
-        }),
-      );
-    });
-
-    it("should expose store state.selectedOrganization", () => {
-      expect(wrapper.vm.store.state.selectedOrganization).toBeDefined();
-      expect(
-        wrapper.vm.store.state.selectedOrganization.identifier,
-      ).toBeDefined();
-    });
-  });
-
-  // ─────────────────────────────────────────────────────────────────────────
-  // Reactive Data
-  // ─────────────────────────────────────────────────────────────────────────
-  describe("Reactive Data", () => {
-    it("should allow splitterModel to be updated reactively", async () => {
-      expect(wrapper.vm.splitterModel).toBe(200);
-      wrapper.vm.splitterModel = 300;
-      await wrapper.vm.$nextTick();
-      expect(wrapper.vm.splitterModel).toBe(300);
-    });
-
-    it("should allow rumtabs to be updated reactively", async () => {
-      expect(wrapper.vm.rumtabs).toBe("rumWebTab");
-      wrapper.vm.rumtabs = "anotherTab";
-      await wrapper.vm.$nextTick();
-      expect(wrapper.vm.rumtabs).toBe("anotherTab");
-    });
-
-    it("should have a different initial splitterModel than the logs/metrics components (200 vs 250)", () => {
-      // Confirms RUM uses 200, not the 250 used by IngestLogs/IngestMetrics
-      expect(wrapper.vm.splitterModel).toBe(200);
-      expect(wrapper.vm.splitterModel).not.toBe(250);
-    });
-  });
-});
diff --git a/web/src/components/ingestion/rum/Index.vue b/web/src/components/ingestion/rum/Index.vue
deleted file mode 100644
index bf527b5593..0000000000
--- a/web/src/components/ingestion/rum/Index.vue
+++ /dev/null
@@ -1,159 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<!-- eslint-disable vue/x-invalid-end-tag -->
-<template>
-  <OSplitter
-    v-model="splitterModel"
-    unit="px"
-    :horizontal="false"
-    class="h-full"
-  >
-    <template v-slot:before>
-      <OTabs
-        v-model="rumtabs"
-        orientation="vertical"
-      >
-        <ORouteTab
-          name="rumWebTab"
-          :to="{
-            name: 'frontendMonitoring',
-            query: {
-              org_identifier: store.state.selectedOrganization.identifier,
-            },
-          }"
-          icon="web"
-          :label="t('common.browser')"
-        />
-      </OTabs>
-    </template>
-
-    <template v-slot:after>
-      <router-view
-        title="Web"
-        :currOrgIdentifier="currOrgIdentifier"
-        :currUserEmail="currentUserEmail"
-        @copy-to-clipboard-fn="copyToClipboardFn"
-      >
-      </router-view>
-    </template>
-  </OSplitter>
-</template>
-
-<script lang="ts">
-import ORouteTab from '@/lib/navigation/Tabs/ORouteTab.vue'
-import OTab from '@/lib/navigation/Tabs/OTab.vue'
-import OTabs from '@/lib/navigation/Tabs/OTabs.vue'
-import OSplitter from '@/lib/core/Splitter/OSplitter.vue'
-// @ts-ignore
-import { defineComponent, ref, onMounted } from "vue";
-import { useI18n } from "vue-i18n";
-import { useStore } from "vuex";
-import { useRouter } from "vue-router";
-import { copyToClipboard } from "@/utils/clipboard";
-// import { config } from "../constants/config";
-import config from "../../../aws-exports";
-import segment from "@/services/segment_analytics";
-import { getImageURL, verifyOrganizationStatus } from "@/utils/zincutils";
-
-export default defineComponent({
-  name: "IngestRum",
-  components: {
-    OTabs, OTab, ORouteTab, OSplitter,},
-  data() {
-    return {};
-  },
-  props: {
-    currOrgIdentifier: {
-      type: String,
-      default: "",
-    },
-  },
-  setup() {
-    const { t } = useI18n();
-    const store = useStore();
-    const router: any = useRouter();
-    const rowData: any = ref({});
-    const confirmUpdate = ref<boolean>(false);
-    const routeToRumTab: Record<string, string> = {
-      frontendMonitoring: "rumWebTab",
-    };
-    const rumtabs = ref(routeToRumTab[router.currentRoute.value.name as string] ?? "rumWebTab");
-
-    onMounted(() => {
-      const ingestRoutes = ["frontendMonitoring"];
-
-      if (ingestRoutes.includes(router.currentRoute.value.name)) {
-        router.push({
-          name: router.currentRoute.value.name,
-          query: {
-            org_identifier: store.state.selectedOrganization.identifier,
-          },
-        });
-        return;
-      }
-      if (router.currentRoute.value.name === "rumMonitoring") {
-        router.push({
-          name: "frontendMonitoring",
-          query: {
-            org_identifier: store.state.selectedOrganization.identifier,
-          },
-        });
-        return;
-      }
-    });
-
-    const copyToClipboardFn = (content: any) => {
-      copyToClipboard(content.innerText, {
-        successMessage: "Content Copied Successfully!",
-        errorMessage: "Error while copy content.",
-        timeout: 5000,
-      }).then((success: boolean) => {
-        if (success) {
-          segment.track("Button Click", {
-            button: "Copy to Clipboard",
-            ingestion: router.currentRoute.value.name,
-            user_org: store.state.selectedOrganization.identifier,
-            user_id: store.state.userInfo.email,
-            page: "RUM Ingestion",
-          });
-        }
-      });
-    };
-
-    const showUpdateDialogFn = () => {
-      confirmUpdate.value = true;
-    };
-
-    return {
-      t,
-      store,
-      router,
-      config,
-      rowData,
-      splitterModel: ref(200),
-      currentUserEmail: store.state.userInfo.email,
-      copyToClipboardFn,
-      showUpdateDialogFn,
-      confirmUpdate,
-      rumtabs,
-      getImageURL,
-      verifyOrganizationStatus,
-    };
-  },
-});
-</script>
-
diff --git a/web/src/components/ingestion/setupCard/SetupCardRenderer.vue b/web/src/components/ingestion/setupCard/SetupCardRenderer.vue
index c9c8812049..b038dde860 100644
--- a/web/src/components/ingestion/setupCard/SetupCardRenderer.vue
+++ b/web/src/components/ingestion/setupCard/SetupCardRenderer.vue
@@ -30,6 +30,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <script setup lang="ts">
 import { computed, ref, watch, nextTick } from "vue";
 import { useStore } from "vuex";
+import { useTheme } from "@/composables/useTheme";
 import { useRouter } from "vue-router";
 import { b64EncodeUnicode } from "@/utils/zincutils";
 import useStreams from "@/composables/useStreams";
@@ -72,7 +73,7 @@ const emit = defineEmits<{
 const store = useStore();
 const router = useRouter();
 const { getStreams } = useStreams();
-const isDark = computed(() => store.state?.theme === "dark");
+const { isDark } = useTheme();
 
 // The detected stream type drives the status copy + the "View …" destination.
 // traces / logs land in their explorers; metrics (which fan out into many
@@ -934,90 +935,76 @@ function fireConfetti() {
 </template>
 
 <style scoped lang="scss">
-/* Design tokens scoped to this card (light + dark), ported from the prototype. */
-.dirC-demo {
-  /* Accent follows the app theme color (--q-primary), not a fixed brand hue.
-     Soft tints are translucent so they read on both light + dark panels. */
-  --clay: var(--q-primary, #3f7994);
-  --clay-bright: var(--q-primary, #3f7994);
-  --clay-soft: color-mix(in srgb, var(--q-primary, #3f7994) 16%, transparent);
-  --clay-soft-2: color-mix(in srgb, var(--q-primary, #3f7994) 8%, transparent);
-  --ok: #16a34a;
-  --ok-soft: #e6f4ec;
-  --warn: #f59e0b;
-  --warn-soft: #fdf3e2;
-  --warn-ink: #b8740c;
+/* keep(complex-state): the statusbar/fixbox state machine (idle→checking→
+   connected/stalled) plus its radar keyframes and OStepper/OCollapsible :deep()
+   content styling — not expressible as template utilities. */
 
-  --panel: #ffffff;
-  --panel-2: #fafbfc;
-  --border: #e6e9ef;
-  --border-2: #eef1f5;
-  --text-1: #1f2a37;
-  --text-2: #586575;
-  --text-3: #8b95a4;
-  --primary: #2b7de9;
-  --primary-ink: #1a6fe0;
-  --track: #eef1f5;
-  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
+/* The card's local aliases are thin names over the GLOBAL semantic tokens, so a
+   change to a semantic value propagates here too. They resolve per-theme on their
+   own — no local .dark overrides. (.dark stays on the root only for the
+   monochrome-glyph invert rule below.) */
+.dirC-demo {
+  /* Accent follows the app theme color (--color-theme-accent), not a fixed brand hue.
+     Soft tints are translucent so they read on both light + dark panels. */
+  --clay: var(--color-theme-accent);
+  --clay-bright: var(--color-theme-accent);
+  --clay-soft: color-mix(in srgb, var(--color-theme-accent) 16%, transparent);
+  --clay-soft-2: color-mix(in srgb, var(--color-theme-accent) 8%, transparent);
+
+  --ok: var(--color-status-positive);
+  --ok-soft: var(--color-status-success-bg);
+  /* --color-warning is amber in both themes; --color-warning-surface is an
+     alpha tint, so it reads over the light panel and the dark one alike. */
+  --warn: var(--color-warning);
+  --warn-soft: var(--color-warning-surface);
+  --warn-ink: var(--color-warning);
+
+  --panel: var(--color-surface-base);
+  --border: var(--color-border-default);
+  --text-1: var(--color-text-heading);
+  --text-2: var(--color-text-secondary);
+  --text-3: var(--color-text-label);
+  --primary-ink: var(--color-text-link);
+  --track: var(--color-surface-subtle);
 
   color: var(--text-1);
-  font-size: 14px;
-
-  &.dark {
-    /* clay* inherit the theme-derived values from the base block above */
-    --ok: #3ec574;
-    --ok-soft: #14271c;
-    --warn: #f5b53d;
-    --warn-soft: #2a2113;
-    --warn-ink: #f5b53d;
-
-    --panel: #161b22;
-    --panel-2: #1a2029;
-    --border: #242b35;
-    --border-2: #1f262f;
-    --text-1: #e7ecf2;
-    --text-2: #9aa6b3;
-    --text-3: #67727f;
-    --primary: #3b8ef0;
-    --primary-ink: #59a2f5;
-    --track: #232b35;
-    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-  }
+  font-size: var(--text-sm);
 }
 
 /* ---- layout ---- */
 .dirC {
-  max-width: 980px;
+  max-width: 61.25rem;
   /* Left-align the reading column (not centered) so it sits against the panel's
      left edge, consistent across AI integrations and data-source cards. */
   margin: 0;
-  padding: 4px 4px 0;
+  padding: 0.25rem 0.25rem 0;
 }
 
 /* ---- logo tile ---- */
 .ds-mono {
-  width: 26px;
-  height: 26px;
+  width: 1.625rem;
+  height: 1.625rem;
   flex: none;
-  border-radius: 7px;
+  border-radius: var(--radius-default);
   display: grid;
   place-items: center;
   font-weight: 800;
-  font-size: 12px;
-  color: #fff;
-  letter-spacing: -0.3px;
+  font-size: var(--text-xs);
+  /* The tile is filled with the theme accent, so the monogram is always knocked out. */
+  color: var(--color-white);
+  letter-spacing: -0.02em;
   background: var(--clay-bright);
 }
 .ds-mono.xl {
-  width: 46px;
-  height: 46px;
-  border-radius: 12px;
-  font-size: 21px;
+  width: 2.875rem;
+  height: 2.875rem;
+  border-radius: var(--radius-surface);
+  font-size: var(--text-xl);
 }
 .ds-mono.logo {
   background: var(--panel);
   border: 1px solid var(--border);
-  padding: 8px;
+  padding: 0.5rem;
 }
 .ds-mono.logo img {
   width: 100%;
@@ -1028,46 +1015,46 @@ function fireConfetti() {
 
 /* ---- hero — its own header band: [logo + name] row, then tagline + chips ---- */
 .c-hero {
-  padding: 6px 0 18px;
+  padding: 0.375rem 0 1.125rem;
   border-bottom: 1px solid var(--border);
-  margin-bottom: 22px;
+  margin-bottom: 1.375rem;
 }
 .c-hero-head {
   display: flex;
   align-items: center;
-  gap: 14px;
+  gap: 0.875rem;
 }
 .c-h1 {
   font-weight: 800;
-  font-size: 24px;
-  letter-spacing: -0.5px;
+  font-size: var(--text-2xl);
+  letter-spacing: -0.02em;
   margin: 0;
   line-height: 1.1;
 }
 .c-sub {
   color: var(--text-2);
-  font-size: 14px;
-  margin: 10px 0 0;
+  font-size: var(--text-sm);
+  margin: 0.625rem 0 0;
 }
 /* Hero meta chips are now <OTag> (lib) — just lay them out. */
 .pv-meta {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 0.5rem;
   flex-wrap: wrap;
-  margin-top: 11px;
+  margin-top: 0.6875rem;
 }
 
 /* ---- stream-name config input ---- */
 /* Left-aligned field with breathing room before the steps (no divider). */
 .c-config {
-  margin-bottom: 28px;
+  margin-bottom: 1.75rem;
 }
 .c-config :deep(label) {
-  margin-bottom: 2px;
+  margin-bottom: 0.125rem;
 }
-/* Keep the hint on one line — it overflows the 280px field into the empty space
-   to its right rather than wrapping (the input box itself stays md width). */
+/* Keep the hint on one line — it overflows the field into the empty space to its
+   right rather than wrapping (the input box itself stays md width). */
 .c-config :deep(.text-input-hint) {
   white-space: nowrap;
 }
@@ -1076,12 +1063,12 @@ function fireConfetti() {
 .step-inputs {
   display: flex;
   flex-wrap: wrap;
-  gap: 16px;
+  gap: 1rem;
   align-items: flex-start;
-  margin: 4px 0 14px;
+  margin: 0.25rem 0 0.875rem;
 }
 .step-inputs :deep(label) {
-  margin-bottom: 2px;
+  margin-bottom: 0.125rem;
 }
 
 /* ---- steps (lib OStepper in expanded mode) — only the per-step body content
@@ -1093,40 +1080,40 @@ function fireConfetti() {
    in the badge's #icon slot) keeps a monospace style. */
 .step-tag-glyph {
   font-weight: 800;
-  font-size: 11px;
+  font-size: var(--text-2xs);
 }
 .step-desc {
   color: var(--text-2);
-  font-size: 13px;
-  margin: 0 0 10px;
+  font-size: var(--text-compact);
+  margin: 0 0 0.625rem;
   line-height: 1.45;
 }
 .step-note {
   display: flex;
   align-items: flex-start;
-  gap: 7px;
+  gap: 0.4375rem;
   color: var(--text-3);
-  font-size: 12.5px;
+  font-size: var(--text-xs);
   line-height: 1.5;
-  margin: 10px 0 0;
+  margin: 0.625rem 0 0;
 }
 
 /* ---- page-supplied step content + action button ---- */
 .step-slot {
-  margin: 4px 0 14px;
+  margin: 0.25rem 0 0.875rem;
 }
 .step-action {
-  margin-top: 14px;
+  margin-top: 0.875rem;
 }
 
 /* ---- variant toggle (shared OToggleGroup) — only spacing + icon sizing here;
    the toggle's own visuals come from the design system. ---- */
 .variant-tabs {
-  margin: 0 0 14px;
+  margin: 0 0 0.875rem;
 }
 .variant-icon {
-  width: 14px;
-  height: 14px;
+  width: 0.875rem;
+  height: 0.875rem;
   object-fit: contain;
   flex: none;
 }
@@ -1151,21 +1138,21 @@ function fireConfetti() {
 }
 .step-content-pad :deep(code),
 .step-desc :deep(code) {
-  font-size: 12px;
+  font-size: var(--text-xs);
   background: var(--track);
   color: var(--text-1);
-  padding: 1px 6px;
-  border-radius: 5px;
+  padding: 1px 0.375rem;
+  border-radius: var(--radius-default);
 }
 
 /* ---- status bar ---- */
 .statusbar {
   display: flex;
   align-items: center;
-  gap: 13px;
-  margin-top: 14px;
-  padding: 13px 18px;
-  border-radius: 12px;
+  gap: 0.8125rem;
+  margin-top: 0.875rem;
+  padding: 0.8125rem 1.125rem;
+  border-radius: var(--radius-surface);
   border: 1px solid var(--border);
   background: var(--panel);
   transition: all 0.3s;
@@ -1183,9 +1170,9 @@ function fireConfetti() {
   background: var(--warn-soft);
 }
 .sb-dot {
-  width: 11px;
-  height: 11px;
-  border-radius: 50%;
+  width: 0.6875rem;
+  height: 0.6875rem;
+  border-radius: var(--radius-full);
   flex: none;
   position: relative;
 }
@@ -1198,9 +1185,9 @@ function fireConfetti() {
 .statusbar.checking .sb-dot::after {
   content: "";
   position: absolute;
-  inset: -5px;
-  border-radius: 50%;
-  border: 2px solid var(--clay-bright);
+  inset: -0.3125rem;
+  border-radius: var(--radius-full);
+  border: 0.125rem solid var(--clay-bright);
   animation: dirc-radar 1.6s ease-out infinite;
 }
 .statusbar.connected .sb-dot {
@@ -1211,7 +1198,7 @@ function fireConfetti() {
 }
 .sb-txt {
   font-weight: 700;
-  font-size: 13.5px;
+  font-size: var(--text-compact);
   flex: 1;
 }
 .statusbar.checking .sb-txt {
@@ -1226,25 +1213,25 @@ function fireConfetti() {
 .sb-txt .sb-sub {
   font-weight: 600;
   color: var(--text-3);
-  font-size: 12px;
-  margin-left: 8px;
+  font-size: var(--text-xs);
+  margin-left: 0.5rem;
 }
 /* Status-bar actions use the shared <OButton variant="secondary"> component. */
 
 /* ---- fix box ---- */
 .fixbox {
   border: 1px solid color-mix(in srgb, var(--warn) 38%, var(--border));
-  border-radius: 12px;
+  border-radius: var(--radius-surface);
   background: var(--warn-soft);
-  padding: 15px 16px;
+  padding: 0.9375rem 1rem;
   animation: dirc-rise 0.35s ease;
 }
 .fixbox-h {
   display: flex;
   align-items: center;
-  gap: 9px;
+  gap: 0.5625rem;
   font-weight: 800;
-  font-size: 14px;
+  font-size: var(--text-sm);
   color: var(--warn-ink);
 }
 .fixbox-h :deep(svg) {
@@ -1253,15 +1240,15 @@ function fireConfetti() {
 }
 .fixbox-p {
   color: var(--text-2);
-  font-size: 13px;
+  font-size: var(--text-compact);
   line-height: 1.55;
-  margin: 9px 0 12px;
+  margin: 0.5625rem 0 0.75rem;
 }
 .fixbox-actions {
   display: flex;
   align-items: center;
-  gap: 14px;
-  margin-top: 13px;
+  gap: 0.875rem;
+  margin-top: 0.8125rem;
 }
 /* ---- accordions (OCollapsible) ---- */
 /* These sit at the very bottom of a long card, after the detection status bar.
@@ -1269,46 +1256,46 @@ function fireConfetti() {
    as stray body text down there — give each one the same bordered panel as
    .statusbar / .fixbox so it registers as a real, clickable section. */
 .c-more {
-  margin-top: 22px;
+  margin-top: 0.875rem;
 }
 .acc-item {
   border: 1px solid var(--border);
-  border-radius: 12px;
+  border-radius: 0.75rem;
   background: var(--panel);
   overflow: hidden;
 }
 .acc-item + .acc-item {
-  margin-top: 10px;
+  margin-top: 0.5rem;
 }
 /* Roomier hit area than the component's default px-2 py-2 inside a panel. */
 .acc-item :deep(button) {
-  padding: 13px 16px;
+  padding: 0.8125rem 1rem;
   border-radius: 0;
 }
 .acc-body {
   color: var(--text-2);
-  font-size: 13px;
+  font-size: var(--text-compact);
   line-height: 1.6;
-  padding: 0 16px 16px;
+  padding: 0 1rem 1rem;
 }
 .acc-body :deep(code) {
-  font-size: 11.5px;
+  font-size: var(--text-2xs);
   background: var(--track);
   color: var(--text-1);
-  padding: 1px 5px;
-  border-radius: 4px;
+  padding: 1px 0.3125rem;
+  border-radius: var(--radius-default);
 }
 
 /* ---- pills (now <OTag>) — just lay them out ---- */
 .pill-list {
   display: flex;
   flex-wrap: wrap;
-  gap: 6px;
+  gap: 0.375rem;
 }
 
 /* ---- troubleshooting ---- */
 .ts-row {
-  padding: 11px 0;
+  padding: 0.6875rem 0;
   border-bottom: 1px dashed var(--border);
 }
 .ts-row:last-child {
@@ -1317,9 +1304,9 @@ function fireConfetti() {
 .ts-q {
   display: flex;
   align-items: flex-start;
-  gap: 9px;
+  gap: 0.5625rem;
   font-weight: 700;
-  font-size: 13.5px;
+  font-size: var(--text-compact);
   color: var(--text-1);
 }
 .ts-q :deep(svg) {
@@ -1329,20 +1316,20 @@ function fireConfetti() {
 }
 .ts-a {
   color: var(--text-2);
-  font-size: 13px;
+  font-size: var(--text-compact);
   line-height: 1.55;
-  margin: 6px 0 0 23px;
+  margin: 0.375rem 0 0 1.4375rem;
 }
 
 /* ---- footer ---- */
 .pv-foot {
-  margin-top: 16px;
-  padding-top: 14px;
+  margin-top: 1rem;
+  padding-top: 0.875rem;
   border-top: 1px solid var(--border);
   display: flex;
   align-items: center;
-  gap: 8px;
-  font-size: 13px;
+  gap: 0.5rem;
+  font-size: var(--text-compact);
   color: var(--text-2);
 }
 .pv-foot a {
@@ -1355,7 +1342,7 @@ function fireConfetti() {
 }
 .pv-foot-sep {
   color: var(--text-3);
-  margin: 0 2px;
+  margin: 0 0.125rem;
 }
 
 /* ---- confetti overlay ---- */
@@ -1379,7 +1366,7 @@ function fireConfetti() {
 @keyframes dirc-rise {
   from {
     opacity: 0;
-    transform: translateY(8px);
+    transform: translateY(0.5rem);
   }
 }
 
diff --git a/web/src/components/ingestion/setupCard/content/sqlServer.ts b/web/src/components/ingestion/setupCard/content/sqlServer.ts
index 3b2b791fa5..1e10164b1a 100644
--- a/web/src/components/ingestion/setupCard/content/sqlServer.ts
+++ b/web/src/components/ingestion/setupCard/content/sqlServer.ts
@@ -45,9 +45,8 @@ const applyGrants = (connect: string) => `${connect} -Q "
 ${GRANT_SQL}
 "`;
 
-// Verified single-receiver config (the blog's redundant `sqlserver/1` is dropped).
-// Only the exporter endpoint + token are substituted per-org; {server}/{port} are
-// filled live from the configure step's inputs.
+// Single-receiver config. Only the exporter endpoint + token are substituted
+// per-org; {server}/{port} are filled live from the configure step's inputs.
 const CONFIG_YAML = `receivers:
   sqlserver:
     collection_interval: 10s
diff --git a/web/src/components/ingestion/traces/Index.vue b/web/src/components/ingestion/traces/Index.vue
index a8f02590af..031d6437fc 100644
--- a/web/src/components/ingestion/traces/Index.vue
+++ b/web/src/components/ingestion/traces/Index.vue
@@ -46,7 +46,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </template>
 
       <div class="w-full h-full">
-        <div class="card-container h-full overflow-y-auto pt-0.5">
+        <div class="bg-card-glass-bg h-full overflow-y-auto pt-0.5">
           <router-view
             title="Metrics"
             :currOrgIdentifier="currOrgIdentifier"
diff --git a/web/src/components/login/GetStarted.vue b/web/src/components/login/GetStarted.vue
index 913068a32a..47bb1ebaba 100644
--- a/web/src/components/login/GetStarted.vue
+++ b/web/src/components/login/GetStarted.vue
@@ -3,11 +3,11 @@
   <!-- Left Banner Section -->
   <div class="hidden lg:flex lg:w-[40%] bg-[url('@/assets/images/common/openobserve_banner_compreesed.png')] bg-cover bg-center bg-no-repeat">
 
-    <div style="display: flex; justify-content: start; align-items: end; height: 100%;">
-    <div style="margin-bottom: 34px; margin-left: 32px;">
-     <span style=" margin-bottom: 12px;"> <img style="height: 40px; margin-left: -1px;" src="@/assets/images/common/openobserve_logo_light.svg" alt="OpenObserve Logo" />
+    <div class="flex justify-start items-end h-full">
+    <div class="mb-8.5 ml-8">
+     <span class="mb-3"> <img class="h-10 -ml-px" src="@/assets/images/common/openobserve_logo_light.svg" alt="OpenObserve Logo" />
       </span>
-      <div style="font-size: 24px; color: white; font-weight: 600; line-height:33px; margin-top: 5px; ">
+      <div class="text-2xl font-semibold text-text-inverse leading-8.25 mt-1.25">
         Try OpenObserve today for more efficient and performant observability.
       </div>
     </div>
@@ -15,18 +15,12 @@
   </div>
 
   <!-- Right Form Section -->
-  <div :class="[
-    store.state.theme == 'dark' ? 'bg-black' : 'bg-white'
-  ]" class="w-full lg:w-[60%]  h-full flex flex-col justify-center items-center relative">
+  <div class="bg-surface-base w-full lg:w-[60%] h-full flex flex-col justify-center items-center relative">
 
     <!-- Top Section: Logo and Heading -->
     <div class="flex flex-col items-center mb-4">
-      <img style="height: 64px;" src="@/assets/images/common/o2_logo.svg" alt="Get Started Banner" />
-      <div class="text-[24px] md:text-[32px] font-semibold  text-center"
-      :class="[
-        store.state.theme == 'dark' ? 'text-[#ffffff]' : 'text-[#525252]'
-      ]"
-      >
+      <img class="h-16" src="@/assets/images/common/o2_logo.svg" alt="Get Started Banner" />
+      <div class="text-2xl md:text-3xl font-semibold text-center text-text-heading">
         One last thing before we begin
       </div>
     </div>
@@ -34,33 +28,31 @@
     <!-- Form Section -->
 <!-- Form Section -->
 <div class="w-full flex justify-center">
-  <div class="w-full max-w-[500px] flex flex-col items-center gap-y-2 px-4">
+  <div class="w-full max-w-125 flex flex-col items-center gap-y-2 px-4">
     <OForm ref="formRef" :schema="getStartedSchema" :default-values="getStartedDefaults()" @submit="doSubmit" v-slot="{ isSubmitting }" class="w-full flex flex-col gap-y-2">
     <OFormInput
       name="hearAboutUs"
       data-test="onboarding-get-started-hear-about-us"
-      class="o2-input"
+      class="o2-input w-full"
       label="How did you hear about us?"
       required
       placeholder="Eg. From a friend"
-      style="width: 100%;"
     />
     <OFormInput
       name="whereDoYouWork"
       data-test="onboarding-get-started-where-do-you-work"
-      class="-mt-2"
+      class="-mt-2 w-full"
       label="Where do you work?"
       required
       placeholder="Company Name"
-      style="width: 100%;"
     />
     <div class="w-full">
       <OFormCheckbox name="isAgree" data-test="onboarding-get-started-agree-checkbox">
         <template #label>
           <span class="text-sm">
             I have read and agree with the
-            <a href="#" class="text-[#6B76E3] hover:underline">Terms of use</a> and
-            <a href="#" class="text-[#6B76E3] hover:underline">Privacy policy*</a>
+            <a href="#" class="text-text-link hover:underline">Terms of use</a> and
+            <a href="#" class="text-text-link hover:underline">Privacy policy*</a>
           </span>
         </template>
       </OFormCheckbox>
@@ -84,11 +76,7 @@
 
 
     <!-- Footer -->
-    <div class="absolute bottom-5 text-sm mb-[16px]"
-    :class="[
-      store.state.theme == 'dark' ? 'text-[#ffffff]' : 'text-[#767676]'
-    ]"
-    >
+    <div class="absolute bottom-5 text-sm mb-4 text-text-secondary">
       &copy; OpenObserve <span id="year">{{ new Date().getFullYear() }}</span>
     </div>
   </div>
diff --git a/web/src/components/login/Login.vue b/web/src/components/login/Login.vue
index 517618c5ab..709cc669ac 100644
--- a/web/src/components/login/Login.vue
+++ b/web/src/components/login/Login.vue
@@ -15,7 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="card-container w-[100vw] h-[100vh]">
+  <div class="bg-card-glass-bg w-[100vw] h-[100vh]">
     <div style="max-width: 400px; padding-top: 100px" class="mx-auto p-3">
       <div
         class="flex justify-center text-center"
@@ -48,15 +48,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </span>
         <img
           v-if="store.state.zoConfig.custom_hide_self_logo == false"
-          class="appLogo"
-          style="height: auto"
+          class="appLogo h-auto"
           :style="
             store.state.zoConfig.custom_logo_text != ''
               ? 'width: 150px;'
               : 'width: 250px;'
           "
           :src="
-            store.state.theme == 'dark'
+            isDark
               ? getImageURL('images/common/openobserve_latest_dark_2.svg')
               : getImageURL('images/common/openobserve_latest_light_2.svg')
           "
@@ -64,15 +63,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </div>
       <div class="flex justify-center mb-4" v-else>
         <img
-          class="appLogo"
-          style="height: auto"
+          class="appLogo h-auto"
           :style="
             store.state.zoConfig.custom_logo_text != ''
               ? 'width: 150px;'
               : 'width: 250px;'
           "
           :src="
-            store.state.theme == 'dark'
+            isDark
               ? getImageURL('images/common/openobserve_latest_dark_2.svg')
               : getImageURL('images/common/openobserve_latest_light_2.svg')
           "
@@ -87,7 +85,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </div>
 
       <div v-else>
-        <div style="font-size: 22px" class="w-full text-center pb-3">
+        <div style="font-size: var(--text-xl)" class="w-full text-center pb-3">
           Login
         </div>
 
@@ -114,7 +112,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
         <div v-if="showSSO && showInternalLogin" class="py-3 text-center">
           <a
-            class="cursor-pointer py-3 hover:text-[#595959]"
+            class="cursor-pointer py-3 hover:text-text-secondary"
             style="text-decoration: underline"
             data-test="login-as-internal-user"
             @click="loginAsInternalUser = !loginAsInternalUser"
@@ -182,6 +180,7 @@ import {
 } from "@/utils/zincutils";
 import { redirectUser } from "@/utils/common";
 import { computed } from "vue";
+import { useTheme } from "@/composables/useTheme";
 import config from "@/aws-exports";
 import OButton from '@/lib/core/Button/OButton.vue';
 import OInput from '@/lib/forms/Input/OInput.vue';
@@ -196,6 +195,7 @@ export default defineComponent({
   setup() {
     const store = useStore();
     const router = useRouter();
+    const { isDark } = useTheme();
     const { t } = useI18n();
     const name = ref("");
     const password = ref("");
@@ -439,6 +439,7 @@ export default defineComponent({
       loginWithSSo,
       config,
       autoRedirectDexLogin,
+      isDark,
     };
   },
   methods: {
diff --git a/web/src/components/login/SsoLogin.spec.ts b/web/src/components/login/SsoLogin.spec.ts
deleted file mode 100644
index f25ff842ed..0000000000
--- a/web/src/components/login/SsoLogin.spec.ts
+++ /dev/null
@@ -1,295 +0,0 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { mount, VueWrapper } from '@vue/test-utils';
-import { createStore } from 'vuex';
-import { createI18n } from 'vue-i18n';
-import SsoLogin from './SsoLogin.vue';
-
-// Mock zincutils
-vi.mock('@/utils/zincutils', () => ({
-  getImageURL: vi.fn((path) => `mock-image-url-${path}`),
-}));
-
-const mockStore = createStore({
-  state: {
-    theme: 'light',
-  },
-});
-
-const mockI18n = createI18n({
-  locale: 'en',
-  messages: {
-    en: {
-      login: {
-        userEmail: 'Email',
-        password: 'Password',
-        signIn: 'Sign In',
-      },
-    },
-  },
-});
-
-
-describe('SsoLogin.vue', () => {
-  let wrapper: VueWrapper;
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  afterEach(() => {
-    if (wrapper) {
-      wrapper.unmount();
-    }
-  });
-
-  const createWrapper = (storeOverride?: any) => {
-    return mount(SsoLogin, {
-      global: {
-        plugins: [mockI18n, storeOverride || mockStore],
-      },
-    });
-  };
-
-  describe('Component Mounting', () => {
-    it('should mount without errors', () => {
-      wrapper = createWrapper();
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it('should unmount without errors', () => {
-      wrapper = createWrapper();
-      expect(() => wrapper.unmount()).not.toThrow();
-    });
-
-    it('should be a Vue component', () => {
-      wrapper = createWrapper();
-      expect(wrapper.vm).toBeDefined();
-      expect(typeof wrapper.vm).toBe('object');
-    });
-  });
-
-  describe('Initial State', () => {
-    it('should initialize name as empty string', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm.name).toBe('');
-    });
-
-    it('should initialize password as empty string', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm.password).toBe('');
-    });
-
-    it('should initialize isSubmitting as false', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm.isSubmitting).toBe(false);
-    });
-
-    it('should initialize showLoginInput as false', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm.showLoginInput).toBe(false);
-    });
-  });
-
-  describe('SSO Login Button', () => {
-    it('should render SSO login button', () => {
-      wrapper = createWrapper();
-      const ssoBtn = wrapper.find('[data-test="sso-login-btn"]');
-      expect(ssoBtn.exists()).toBe(true);
-    });
-
-    it('should show "Login with SSO" text in button', () => {
-      wrapper = createWrapper();
-      const ssoBtn = wrapper.find('[data-test="sso-login-btn"]');
-      expect(ssoBtn.text()).toContain('Login with SSO');
-    });
-  });
-
-  describe('showLoginInput Toggle', () => {
-    it('should hide login form by default (showLoginInput=false)', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm.showLoginInput).toBe(false);
-    });
-
-    it('should toggle showLoginInput to true when link is clicked', async () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-
-      const link = wrapper.find('[data-test="sso-login-internal-link"]');
-      await link.trigger('click');
-
-      expect(vm.showLoginInput).toBe(true);
-    });
-
-    it('should toggle showLoginInput back to false on second click', async () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-
-      const link = wrapper.find('[data-test="sso-login-internal-link"]');
-      await link.trigger('click');
-      expect(vm.showLoginInput).toBe(true);
-
-      await link.trigger('click');
-      expect(vm.showLoginInput).toBe(false);
-    });
-
-    it('should render "Sign in with an internal user" link', () => {
-      wrapper = createWrapper();
-      const link = wrapper.find('[data-test="sso-login-internal-link"]');
-      expect(link.exists()).toBe(true);
-      expect(link.text()).toContain('Sign in with an internal user');
-    });
-  });
-
-  describe('Login Input Form', () => {
-    it('should render login-user-id input', async () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      vm.showLoginInput = true;
-      await wrapper.vm.$nextTick();
-
-      const userInput = wrapper.find('[data-test="login-user-id"]');
-      expect(userInput.exists()).toBe(true);
-    });
-
-    it('should render login-password input', async () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      vm.showLoginInput = true;
-      await wrapper.vm.$nextTick();
-
-      const passwordInput = wrapper.find('[data-test="login-password"]');
-      expect(passwordInput.exists()).toBe(true);
-    });
-
-    it('should render sign-in button when showLoginInput is true', async () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      vm.showLoginInput = true;
-      await wrapper.vm.$nextTick();
-
-      const signInBtn = wrapper.find('[data-cy="login-sign-in"]');
-      expect(signInBtn.exists()).toBe(true);
-    });
-  });
-
-  describe('onSignIn method', () => {
-    it('should have onSignIn method defined', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm.onSignIn).toBeDefined();
-      expect(typeof vm.onSignIn).toBe('function');
-    });
-
-    it('should not throw when onSignIn is called', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(() => vm.onSignIn()).not.toThrow();
-    });
-  });
-
-  describe('getImageURL', () => {
-    it('should call getImageURL at least once during rendering', async () => {
-      const zincutils = await import('@/utils/zincutils');
-      wrapper = createWrapper();
-      expect(zincutils.getImageURL).toHaveBeenCalled();
-    });
-
-    it('should call getImageURL with SSO icon path', async () => {
-      const zincutils = await import('@/utils/zincutils');
-      wrapper = createWrapper();
-      const calls = (zincutils.getImageURL as any).mock.calls.map((c: any) => c[0]);
-      expect(calls.some((p: string) => p.includes('sso'))).toBe(true);
-    });
-  });
-
-  describe('Component Properties Exposed', () => {
-    it('should expose name ref', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm).toHaveProperty('name');
-    });
-
-    it('should expose password ref', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm).toHaveProperty('password');
-    });
-
-    it('should expose isSubmitting ref', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm).toHaveProperty('isSubmitting');
-    });
-
-    it('should expose showLoginInput ref', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm).toHaveProperty('showLoginInput');
-    });
-
-    it('should expose getImageURL function', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(typeof vm.getImageURL).toBe('function');
-    });
-
-    it('should expose onSignIn function', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(typeof vm.onSignIn).toBe('function');
-    });
-  });
-
-  describe('Reactive Updates', () => {
-    it('should update name reactively', async () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      vm.name = 'testuser';
-      await wrapper.vm.$nextTick();
-      expect(vm.name).toBe('testuser');
-    });
-
-    it('should update password reactively', async () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      vm.password = 'testpassword';
-      await wrapper.vm.$nextTick();
-      expect(vm.password).toBe('testpassword');
-    });
-
-    it('should update isSubmitting reactively', async () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      vm.isSubmitting = true;
-      await wrapper.vm.$nextTick();
-      expect(vm.isSubmitting).toBe(true);
-    });
-
-    it('should update showLoginInput reactively', async () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      vm.showLoginInput = true;
-      await wrapper.vm.$nextTick();
-      expect(vm.showLoginInput).toBe(true);
-    });
-  });
-
-  describe('Theme Support', () => {
-    it('should render without errors in dark theme', () => {
-      const darkStore = createStore({ state: { theme: 'dark' } });
-      wrapper = createWrapper(darkStore);
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it('should render without errors in light theme', () => {
-      const lightStore = createStore({ state: { theme: 'light' } });
-      wrapper = createWrapper(lightStore);
-      expect(wrapper.exists()).toBe(true);
-    });
-  });
-});
diff --git a/web/src/components/login/SsoLogin.vue b/web/src/components/login/SsoLogin.vue
deleted file mode 100644
index 534e25595d..0000000000
--- a/web/src/components/login/SsoLogin.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<template>
-  <div style="max-width: 400px; margin-top: 100px" class="mx-auto p-3">
-    <div class="flex justify-center" style="height: 150px">
-      <img
-        class="appLogo"
-        style="width: 250px; height: auto"
-        :src="
-          store.state.theme == 'dark'
-            ? getImageURL('images/common/openobserve_latest_dark_2.svg')
-            : getImageURL('images/common/openobserve_latest_light_2.svg')
-        "
-      />
-    </div>
-
-    <div class="flex justify-center mt-4">
-      <OButton
-        data-test="sso-login-btn"
-        variant="primary"
-        size="sm-action"
-        style="width: 400px"
-      >
-        <div
-          data-test="sso-login-btn"
-          class="flex items-center justify-center w-full text-center relative"
-        >
-          <img
-            class="absolute"
-            style="width: 30px; left: 16px"
-            :src="getImageURL('images/common/sso.svg')"
-          />
-          <span class="text-center"> Login with SSO</span>
-        </div>
-      </OButton>
-    </div>
-
-    <div class="mb-3 mt-4 text-center">
-      <a
-        data-test="sso-login-internal-link"
-        class="cursor-pointer hover:text-[#595959]"
-        style="text-decoration: underline"
-        @click="showLoginInput = !showLoginInput"
-        >Sign in with an internal user</a
-      >
-
-      <div v-show="showLoginInput" class="o2-input pt-4">
-        <div class="gap-3">
-          <OInput
-            v-model="name"
-            data-cy="login-user-id"
-            data-test="login-user-id"
-            :label="`${t('login.userEmail')} *`"
-            placeholder="Email"
-            type="email"
-          />
-
-          <OInput
-            v-model="password"
-            data-cy="login-password"
-            data-test="login-password"
-            :label="`${t('login.password')} *`"
-            placeholder="Password"
-            type="password"
-          />
-
-          <div class="mt-4 mb-6">
-            <OButton
-              data-cy="login-sign-in"
-              variant="primary"
-              size="sm-action"
-              block
-              type="submit"
-              :loading="isSubmitting"
-              @click="onSignIn()"
-            >
-              {{ t('login.signIn') }}
-            </OButton>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-import { getImageURL } from "@/utils/zincutils";
-import { useStore } from "vuex";
-import { useI18n } from "vue-i18n";
-import OButton from '@/lib/core/Button/OButton.vue';
-import OInput from '@/lib/forms/Input/OInput.vue';
-
-const store = useStore();
-
-const { t } = useI18n();
-
-const name = ref("");
-const password = ref("");
-
-const isSubmitting = ref(false);
-
-const showLoginInput = ref(false);
-
-const onSignIn = () => {
-  console.log("onSignIn");
-};
-</script>
diff --git a/web/src/components/logs/ChunkedContent.vue b/web/src/components/logs/ChunkedContent.vue
index 21c386bda5..f612a043f5 100644
--- a/web/src/components/logs/ChunkedContent.vue
+++ b/web/src/components/logs/ChunkedContent.vue
@@ -44,7 +44,7 @@ Usage:
     <!-- Load more button and info -->
     <div
       v-if="shouldShowLoadMore"
-      class="pt-2 [border-top:1px_solid_var(--o2-border-color)] mt-2 flex items-center gap-3"
+      class="pt-2 [border-top:1px_solid_var(--color-card-glass-border)] mt-2 flex items-center gap-3"
     >
       <OButton
         :data-test="`load-more-btn-${fieldKey}`"
@@ -55,7 +55,7 @@ Usage:
         <OIcon name="expand-more" size="xs" class="mr-1" />
         {{ t('logs.chunkedContent.loadMore', { loaded: chunkInfo.loadedSizeKB, total: chunkInfo.totalSizeKB }) }}
       </OButton>
-      <span class="text-sm font-medium text-(--q-primary)">
+      <span class="text-sm font-medium text-theme-accent">
         {{ t('logs.chunkedContent.showingChunk', { current: chunkInfo.currentChunk, total: chunkInfo.totalChunks }) }}
       </span>
     </div>
diff --git a/web/src/components/logs/LogsHighLighting.vue b/web/src/components/logs/LogsHighLighting.vue
index 3834fcf6f5..2ba3b1d166 100644
--- a/web/src/components/logs/LogsHighLighting.vue
+++ b/web/src/components/logs/LogsHighLighting.vue
@@ -41,6 +41,7 @@ Usage Examples:
 <script setup lang="ts">
 import { computed, withDefaults } from "vue";
 import { useStore } from "vuex";
+import { useTheme } from "@/composables/useTheme";
 import { useLogsHighlighter } from "@/composables/useLogsHighlighter";
 
 /**
@@ -62,6 +63,7 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const store = useStore();
+  const { isDark } = useTheme();
 const { colorizeJson } = useLogsHighlighter();
 
 /**
@@ -71,7 +73,7 @@ const { colorizeJson } = useLogsHighlighter();
 const colorizedJson = computed((): string => {
   return colorizeJson(
     props.data,
-    store.state.theme === "dark",
+    isDark.value,
     props.showBraces,
     props.showQuotes,
     props.queryString,
@@ -80,6 +82,3 @@ const colorizedJson = computed((): string => {
 });
 </script>
 
-<style>
-@import "@/assets/styles/log-highlighting.css";
-</style>
diff --git a/web/src/components/logstream/AddStream.schema.ts b/web/src/components/logstream/AddStream.schema.ts
index cfd4804a68..c194b0da89 100644
--- a/web/src/components/logstream/AddStream.schema.ts
+++ b/web/src/components/logstream/AddStream.schema.ts
@@ -1,30 +1,11 @@
 // Copyright 2026 OpenObserve Inc.
 //
-// Validation schema for AddStream.vue — the SCALAR fields only (name,
-// stream_type, dataRetentionDays). The per-row `StreamFieldInputs` array stays
-// in legacy prop-mode with its own exposed validate() (a documented deferred
-// exception until OForm gains first-class field-array support), so it is NOT
-// modelled here.
+// Validation schema for AddStream.vue — the scalar fields only (name,
+// stream_type, dataRetentionDays). The per-row `StreamFieldInputs` array is
+// validated separately and is not modelled here.
 //
-// Restored from the Quasar BEFORE baseline (complete-quasar-validation-inventory),
-// with the required messages now i18n-driven (pass useI18n's `t`) to match every
-// other schema in this migration AND PR #13077's AddStream.vue keys:
-//   • name              → required (`logStream.streamNameRequired`) plus the live
-//                         `/^[a-zA-Z0-9_:]+$/` character rule. Encoded WITHOUT a
-//                         schema `.trim()` (see the field note below): the regex
-//                         rejects any whitespace on the RAW value, matching `main`,
-//                         which rejected — never silently stripped — dirty names.
-//   • stream_type       → required (`logStream.streamTypeRequired`).
-//   • dataRetentionDays → numeric > 0 (`logStream.dataRetentionMin` — a 0/negative
-//                         value IS entered but rejected, so "required" would be
-//                         misleading; state the actual rule), but ONLY when the
-//                         retention field is actually shown (data_retention_days
-//                         configured AND not an enrichment_tables stream) — encoded
-//                         conditionally in superRefine, since `showDataRetention`
-//                         also depends on org config the schema can't read.
-//
-// Validation TIMING is owned by OForm (submit-then-change via revalidateLogic);
-// this file only describes WHAT is valid.
+// Validation timing is owned by OForm (submit-then-change via revalidateLogic);
+// this file only describes what is valid.
 
 import { z } from "zod";
 import { makeStreamFieldRowSchema } from "./StreamFieldInputs.schema";
@@ -40,7 +21,7 @@ export const streamNameRegex = /^[a-zA-Z0-9_:]+$/;
  *   (the org-config half of `showDataRetention`). The stream-type half
  *   (`!== 'enrichment_tables'`) is read from the form value in superRefine.
  * @param t useI18n's `t`, so required messages resolve from the shared
- *   `logStream.*` keys (also used by PR #13077's AddStream.vue).
+ *   `logStream.*` keys.
  */
 export const makeAddStreamSchema = (
   retentionEnabled: boolean,
@@ -53,7 +34,7 @@ export const makeAddStreamSchema = (
       // would let "mystream " pass (regex judges the trimmed copy) yet persist the
       // space — breaking stream lookups and diverging from the backend
       // `format_stream_name` rule. Validating the raw value means `streamNameRegex`
-      // rejects ANY whitespace (leading/trailing/only), exactly as `main` did.
+      // rejects ANY whitespace (leading/trailing/only).
       name: z
         .string()
         .min(1, t("logStream.streamNameRequired"))
@@ -65,10 +46,9 @@ export const makeAddStreamSchema = (
       // Stream-level index_type is part of the seeded form state but has no
       // control; kept optional so it round-trips cleanly through the form.
       index_type: z.array(z.any()).optional().default([]),
-      // Dynamic "Add Field" rows, now owned by the form (StreamFieldInputs is
-      // form-mode). Each row is validated by the row schema (built with the same
-      // `t` so its messages are i18n-driven too); an empty draft row therefore
-      // blocks submit with per-row errors.
+      // Dynamic "Add Field" rows. Each row is validated by the row schema
+      // (built with the same `t`); an empty draft row blocks submit with per-row
+      // errors.
       fields: z.array(makeStreamFieldRowSchema(t)).default([]),
     })
     .superRefine((val, ctx) => {
@@ -85,7 +65,7 @@ export const makeAddStreamSchema = (
 
 export type AddStreamForm = z.infer<ReturnType<typeof makeAddStreamSchema>>;
 
-// STATIC create defaults (returned/bound inline per the recipe).
+// Static create defaults.
 export const addStreamDefaults = (): AddStreamForm => ({
   name: "",
   stream_type: "",
diff --git a/web/src/components/logstream/AddStream.vue b/web/src/components/logstream/AddStream.vue
index a708cf1ede..0c56b9095e 100644
--- a/web/src/components/logstream/AddStream.vue
+++ b/web/src/components/logstream/AddStream.vue
@@ -80,7 +80,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
        The drawer owns the footer Cancel/Save (built-in ODrawer footer); its Save
        submits this form via `form-id="add-stream-node-form"`, so no inline
        buttons here. -->
-    <div v-else class="p-4 w-full">
+    <div v-else class="w-full">
       <OForm
         id="add-stream-node-form"
         :form="addStreamForm"
@@ -170,22 +170,19 @@ const { addStream, getStream } = useStreams();
 
 const store = useStore();
 
-// Scalar validation now lives in the co-located Zod schema. The retention rule
-// is conditional on org config (`data_retention_days`), captured here; the
-// stream-type half of the condition is read from the form in superRefine.
+// The retention rule is conditional on org config (`data_retention_days`),
+// captured here; the stream-type half of the condition is read from the form in
+// superRefine.
 const addStreamSchema = makeAddStreamSchema(
   !!(store.state.zoConfig.data_retention_days || false),
   t,
 );
 
-// Rule ③ OWNER pattern: this component OWNS <OForm> and must read form state
-// (stream_type) to drive the parent-side `v-if="showDataRetention"`. So create
-// the ONE form here with useOForm, hand it to <OForm :form="addStreamForm">, and
-// read it reactively with form.useStore — single source of truth, NO mirror.
-// The save is wired through useOForm({ onSubmit }), not @submit.
-// onSubmit fires only when the WHOLE schema passes — scalars AND the dynamic
-// `fields` rows (StreamFieldInputs is now form-mode, so an empty/invalid row
-// blocks submit and shows per-row errors). No separate validate() bridge.
+// This component owns <OForm> and reads form state (stream_type) to drive the
+// parent-side `v-if="showDataRetention"`, so the form is created here with
+// useOForm and read reactively with form.useStore. onSubmit fires only when the
+// whole schema passes — scalars and the dynamic `fields` rows (an empty/invalid
+// row blocks submit and shows per-row errors).
 const addStreamForm = useOForm<AddStreamForm>({
   defaultValues: addStreamDefaults(),
   schema: addStreamSchema,
@@ -194,21 +191,17 @@ const addStreamForm = useOForm<AddStreamForm>({
 
 const { track } = useReo();
 
-// Reactive READ of the form-owned stream_type (single source of truth) so
-// `showDataRetention` — which also depends on org config the schema can't read —
-// re-evaluates when the user changes the type. form.useStore tracks changes
-// (a `form.state.values` read inside a computed would not).
+// Read the form-owned stream_type so `showDataRetention` — which also depends on
+// org config the schema can't read — re-evaluates when the user changes the type.
+// Must use form.useStore; a `form.state.values` read inside a computed would not
+// track changes.
 const formStreamType = addStreamForm.useStore(
   (s: any) => (s.values.stream_type as string) ?? "",
 );
 
-// The form lives in this component's setup (owner pattern), so — unlike the old
-// in-dialog-body form — it is NOT recreated when the reka-ui overlay unmounts/
-// remounts its body on close→open. Reset to fresh defaults whenever the dialog
-// opens so each reopen starts blank (the equivalent of the old
-// `:default-values`-on-remount behavior). reset() also zeroes submissionAttempts
-// → no stale "required" errors flash. Dialog mode only; the inline pipeline form
-// has no `open` toggle.
+// Reset to fresh defaults whenever the dialog opens so each reopen starts blank.
+// reset() also zeroes submissionAttempts so no stale "required" errors flash.
+// Dialog mode only; the inline pipeline form has no `open` toggle.
 watch(
   () => props.open,
   (isOpen, wasOpen) => {
@@ -233,8 +226,8 @@ const showDataRetention = computed(
     formStreamType.value !== "enrichment_tables"
 );
 
-// `value` is the fully-validated @submit payload — scalars AND the `fields`
-// rows (StreamFieldInputs is form-mode now) — and the single source of truth.
+// `value` is the fully-validated submit payload — scalars and the `fields`
+// rows — the single source of truth.
 const saveStream = async (value: AddStreamForm) => {
   let isStreamPresent = false;
 
@@ -340,7 +333,6 @@ const getStreamPayload = (dataRetentionDays: number, rows: any[]) => {
       .replace(/ /g, "_")
       .replace(/-/g, "_");
     
-    // add to field list
     stream.fields.push(field);
 
     // process index types
diff --git a/web/src/components/logstream/AssociatedRegexPatterns.spec.ts b/web/src/components/logstream/AssociatedRegexPatterns.spec.ts
index 77efbfc52e..576ef6c6a4 100644
--- a/web/src/components/logstream/AssociatedRegexPatterns.spec.ts
+++ b/web/src/components/logstream/AssociatedRegexPatterns.spec.ts
@@ -828,7 +828,7 @@ describe('AssociatedRegexPatterns.vue', () => {
       // Patterns should have additional formatting
       const patterns = vm.allPatterns;
       if (patterns.length > 0) {
-        expect(patterns[0]).toHaveProperty('#');
+        // Row numbering moved to OTable's built-in show-index (no '#' data field).
         expect(patterns[0]).toHaveProperty('created_at');
         expect(patterns[0]).toHaveProperty('updated_at');
         expect(patterns[0]).toHaveProperty('pattern_name');
diff --git a/web/src/components/logstream/AssociatedRegexPatterns.vue b/web/src/components/logstream/AssociatedRegexPatterns.vue
index 4f8664c3cd..4c1ddce256 100644
--- a/web/src/components/logstream/AssociatedRegexPatterns.vue
+++ b/web/src/components/logstream/AssociatedRegexPatterns.vue
@@ -1,11 +1,7 @@
 <template>
   <div
     style="width: 60vw; height: calc(100vh - 59px)"
-    :class="
-      store.state.theme === 'dark'
-        ? 'bg-[#1F1F1F] dark-regex-patterns'
-        : 'bg-white light-regex-patterns'
-    "
+    :class="'bg-surface-base'"
   >
     <div
       class="flex items-center flex-nowrap justify-between px-4 py-2"
@@ -16,10 +12,10 @@
           class="flex items-center"
           data-test="associated-regex-patterns-title-text"
         >
-          <span class="breadcrumb-text text-lg font-normal leading-6 cursor-pointer text-[#5960b2]" @click="closeDialog"
+          <span class="breadcrumb-text text-lg font-normal leading-6 cursor-pointer text-brand-indigo" @click="closeDialog"
             >{{ t('regex_patterns.associated_breadcrumb') }} &gt; &nbsp;
           </span>
-          <span class="associated-field-name text-lg font-normal leading-6" :class="store.state.theme === 'dark' ? 'text-[#fff]' : 'text-[#000]'">
+          <span class="associated-field-name text-lg font-normal leading-6 text-text-heading">
             {{ fieldName }}
           </span>
         </div>
@@ -50,17 +46,17 @@
               clearable
             />
           </div>
-          <div style="height: calc(100vh - 130px); overflow-y: auto">
+          <div style="height: calc(100vh - 130px)" class="overflow-y-auto">
             <div class="pattern-list-wrapper">
               <OCollapsible
                 v-model="appliedPatternsExpandedRef"
                 :label="t('regex_patterns.applied_patterns_count', { count: appliedPatterns.length })"
-                class="mt-2 text-[14px] font-[600]"
+                class="mt-2 text-sm font-[600]"
                 data-test="associated-regex-patterns-applied-patterns-expansion-item"
               >
                 <div
                   v-if="filteredAppliedPatterns.length === 0"
-                  class="py-3 px-2 text-[12px] opacity-50"
+                  class="py-3 px-2 text-xs opacity-50"
                   data-test="associated-regex-patterns-applied-patterns-table"
                 >
                   {{ t('regex_patterns.no_data_available') }}
@@ -70,8 +66,8 @@
                     v-for="row in filteredAppliedPatterns"
                     :key="row.pattern_id"
                     :data-test="`associated-regex-patterns-applied-patterns-table-row-${row.pattern_id}`"
-                    class="cursor-pointer flex justify-between items-center px-2 py-2.5 border-b text-[13px] font-[600]"
-                    :class="checkCurrentUserClickedPattern(row.pattern_name) ? 'text-[var(--o2-tab-text-color)] bg-[var(--o2-tab-bg)]' : ''"
+                    class="cursor-pointer flex justify-between items-center px-2 py-2.5 border-b text-compact font-[600]"
+                    :class="checkCurrentUserClickedPattern(row.pattern_name) ? 'text-tab-text-color bg-theme-tab-bg' : ''"
                     @click="handlePatternClick(row)"
                   >
                     <span class="regex-pattern-name whitespace-nowrap overflow-hidden max-w-[10vw] truncate normal-case!">{{ row.pattern_name }}</span>
@@ -85,7 +81,7 @@
               <OCollapsible
                 v-model="allPatternsExpandedRef"
                 :label="t('regex_patterns.all_patterns_count', { count: resultTotal })"
-                class="mt-2 text-[14px] font-[600]"
+                class="mt-2 text-sm font-[600]"
                 data-test="associated-regex-patterns-all-patterns-expansion-item"
               >
                 <ul class="list-none p-0 m-0" data-test="associated-regex-patterns-all-patterns-table">
@@ -93,8 +89,8 @@
                     v-for="row in filteredAllPatterns"
                     :key="row.pattern_id"
                     :data-test="`associated-regex-patterns-all-patterns-table-row-${row.pattern_id}`"
-                    class="cursor-pointer flex justify-between items-center px-2 py-2.5 border-b text-[13px] font-[600]"
-                    :class="checkCurrentUserClickedPattern(row.pattern_name) ? 'text-[var(--o2-tab-text-color)] bg-[var(--o2-tab-bg)]' : ''"
+                    class="cursor-pointer flex justify-between items-center px-2 py-2.5 border-b text-compact font-[600]"
+                    :class="checkCurrentUserClickedPattern(row.pattern_name) ? 'text-tab-text-color bg-theme-tab-bg' : ''"
                     @click="handlePatternClick(row)"
                   >
                     <span class="regex-pattern-name whitespace-nowrap overflow-hidden max-w-[10vw] truncate normal-case!">{{ row.pattern_name }}</span>
@@ -137,20 +133,15 @@
           >
             <!-- Pattern Info Card -->
             <div
-              class="section-card p-3 rounded-lg border"
-              :class="
-                store.state.theme === 'dark'
-                  ? 'bg-[#2A2A2A] border-[#3A3A3A]'
-                  : 'bg-[#F9FAFB] border-[#E5E7EB]'
-              "
+              class="section-card p-3 rounded-default border bg-surface-subtle border-border-default"
             >
               <div class="flex flex-col gap-2">
                 <div class="flex flex-col gap-1">
-                  <span class="individual-section-title text-[12px] font-[500] text-(--o2-text-secondary)">
+                  <span class="individual-section-title text-xs font-[500] text-text-secondary">
                     {{ t('regex_patterns.pattern_name') }}
                   </span>
                   <span
-                    class="individual-section-value text-[15px] font-[700]" :class="store.state.theme === 'dark' ? 'text-[#ffffff]' : 'text-[#000000]'"
+                    class="individual-section-value text-sm font-[700] text-text-body"
                     data-test="associated-regex-patterns-pattern-name"
                   >
                     {{ userClickedPattern.pattern_name }}
@@ -160,11 +151,11 @@
                 <OSeparator />
 
                 <div class="flex flex-col gap-1">
-                  <span class="individual-section-title text-[12px] font-[500] text-(--o2-text-secondary)">
+                  <span class="individual-section-title text-xs font-[500] text-text-secondary">
                     {{ t('regex_patterns.description') }}
                   </span>
                   <span
-                    class="individual-section-value text-[15px] font-[700]" :class="store.state.theme === 'dark' ? 'text-[#ffffff]' : 'text-[#000000]'"
+                    class="individual-section-value text-sm font-[700] text-text-body"
                     data-test="associated-regex-patterns-pattern-description"
                   >
                     {{
@@ -179,17 +170,12 @@
 
             <!-- Configuration Card -->
             <div
-              class="section-card p-3 rounded-lg border"
-              :class="
-                store.state.theme === 'dark'
-                  ? 'bg-[#2A2A2A] border-[#3A3A3A]'
-                  : 'bg-[#F9FAFB] border-[#E5E7EB]'
-              "
+              class="section-card p-3 rounded-default border bg-surface-subtle border-border-default"
             >
               <div class="flex gap-4">
                 <!-- when value matches -->
                 <div class="flex flex-col gap-1.5 flex-1">
-                  <span class="individual-section-title text-[12px] font-[500] text-(--o2-text-secondary)">
+                  <span class="individual-section-title text-xs font-[500] text-text-secondary">
                     {{ t('regex_patterns.when_value_matches') }}
                   </span>
                   <ORadioGroup v-model="policy">
@@ -200,8 +186,8 @@
                           data-test="associated-regex-patterns-redact-radio"
                           size="sm"
                         />
-                        <span class="font-[600] text-[13px]">{{ t('regex_patterns.redact') }}</span>
-                        <span class="font-[400] text-[12px] opacity-60">{{ t('regex_patterns.redact_hint') }}</span>
+                        <span class="font-[600] text-compact">{{ t('regex_patterns.redact') }}</span>
+                        <span class="font-[400] text-xs opacity-60">{{ t('regex_patterns.redact_hint') }}</span>
                       </div>
                       <div class="flex items-center gap-2">
                         <ORadio
@@ -209,8 +195,8 @@
                           data-test="associated-regex-patterns-drop-field-radio"
                           size="sm"
                         />
-                        <span class="font-[600] text-[13px]">{{ t('regex_patterns.drop') }}</span>
-                        <span class="font-[400] text-[12px] opacity-60">{{ t('regex_patterns.drop_hint') }}</span>
+                        <span class="font-[600] text-compact">{{ t('regex_patterns.drop') }}</span>
+                        <span class="font-[400] text-xs opacity-60">{{ t('regex_patterns.drop_hint') }}</span>
                       </div>
                       <div class="flex items-center gap-2">
                         <ORadio
@@ -218,8 +204,8 @@
                           data-test="associated-regex-patterns-hash-radio"
                           size="sm"
                         />
-                        <span class="font-[600] text-[13px]">{{ t('regex_patterns.hash') }}</span>
-                        <span class="font-[400] text-[12px] opacity-60">{{ t('regex_patterns.hash_hint') }}</span>
+                        <span class="font-[600] text-compact">{{ t('regex_patterns.hash') }}</span>
+                        <span class="font-[400] text-xs opacity-60">{{ t('regex_patterns.hash_hint') }}</span>
                       </div>
                     </div>
                   </ORadioGroup>
@@ -228,8 +214,8 @@
                 <OSeparator vertical />
 
                 <!-- detect at section -->
-                <div class="flex flex-col gap-1.5 min-w-[120px]">
-                  <span class="individual-section-title text-[12px] font-[500] text-(--o2-text-secondary)">
+                <div class="flex flex-col gap-1.5 min-w-30">
+                  <span class="individual-section-title text-xs font-[500] text-text-secondary">
                     {{ t('regex_patterns.detect_at') }}
                   </span>
                   <div class="flex flex-col gap-1.5">
@@ -256,17 +242,12 @@
 
             <!-- Test Pattern Card -->
             <div
-              class="section-card p-3 rounded-lg border"
-              :class="
-                store.state.theme === 'dark'
-                  ? 'bg-[#2A2A2A] border-[#3A3A3A]'
-                  : 'bg-[#F9FAFB] border-[#E5E7EB]'
-              "
+              class="section-card p-3 rounded-default border bg-surface-subtle border-border-default"
             >
               <div class="flex flex-col gap-2.5">
                 <div class="flex items-center justify-between">
                   <span
-                    class="text-[13px] font-bold leading-6"
+                    class="text-compact font-bold leading-6"
                   >
                     {{ t('regex_patterns.test_pattern') }}
                   </span>
@@ -276,26 +257,21 @@
                     size="sm-action"
                     @click="testStringOutput"
                   >
-                    <span class="text-[12px]">{{ t('regex_patterns.test_input') }}</span>
+                    <span class="text-xs">{{ t('regex_patterns.test_input') }}</span>
                   </OButton>
                 </div>
 
                 <div class="flex flex-col gap-1">
                   <span
-                    class="text-[12px] font-medium leading-6 text-(--o2-text-secondary)"
+                    class="text-xs font-medium leading-6 text-text-secondary"
                   >
                     {{ t('regex_patterns.regex_pattern_label') }}
                   </span>
                   <div
-                    class="p-2 rounded font-mono text-[11px] break-all"
-                    :class="
-                      store.state.theme === 'dark'
-                        ? 'bg-[#1A1A1A]'
-                        : 'bg-[#FFFFFF]'
-                    "
+                    class="p-2 rounded-default font-mono text-2xs break-all bg-surface-base"
                   >
                     <span
-                      class="regex-pattern-text text-[12px] font-normal leading-6 break-all whitespace-pre-wrap overflow-wrap-anywhere" :class="store.state.theme === 'dark' ? '' : 'text-[#5a5a5a]'"
+                      class="regex-pattern-text text-xs font-normal leading-6 break-all whitespace-pre-wrap overflow-wrap-anywhere text-text-secondary"
                       data-test="associated-regex-patterns-regex-pattern"
                     >
                       {{ userClickedPattern.pattern }}
@@ -311,12 +287,7 @@
                       name="query"
                       v-model:is-expanded="expandState.regexTestString"
                       :label="t('regex_patterns.input_string')"
-                      class="py-md h-[24px]"
-                      :labelClass="
-                        store.state.theme === 'dark'
-                          ? 'dark-test-string-container-label'
-                          : 'light-test-string-container-label'
-                      "
+                      class="py-md h-6"
                     />
                     <div
                       v-if="expandState.regexTestString"
@@ -325,11 +296,10 @@
                       <OInput
                         data-test="add-regex-test-string-input"
                         v-model="testString"
-                        class="regex-test-string-input"
+                        class="regex-test-string-input w-full"
                         type="textarea"
                         :placeholder="t('regex_patterns.input_string_placeholder')"
                         :rows="5"
-                        style="width: 100%"
                       />
                     </div>
                   </div>
@@ -339,12 +309,7 @@
                       name="output"
                       v-model:is-expanded="expandState.outputString"
                       :label="t('regex_patterns.output')"
-                      class="py-md h-[24px]"
-                      :labelClass="
-                        store.state.theme === 'dark'
-                          ? 'dark-test-string-container-label'
-                          : 'light-test-string-container-label'
-                      "
+                      class="py-md h-6"
                     />
                     <div
                       v-if="expandState.outputString"
@@ -354,45 +319,30 @@
                         v-if="outputString.length > 0"
                         data-test="add-regex-test-string-input"
                         v-model="outputString"
-                        class="regex-test-string-input"
+                        class="regex-test-string-input w-full"
                         type="textarea"
                         :placeholder="t('regex_patterns.output_string_placeholder')"
                         :rows="5"
-                        style="width: 100%"
                       />
                       <div
                         v-else
-                        class="flex flex-col items-center justify-center h-[111px]"
-                        :class="
-                          store.state.theme === 'dark'
-                            ? 'bg-[var(--o2-primary-background)] [border-left:2px_solid_var(--o2-primary-background)] [border-right:2px_solid_var(--o2-primary-background)] [border-bottom:2px_solid_var(--o2-primary-background)]'
-                            : 'bg-[#ffffff] [border-left:1px_solid_#e6e6e6] [border-right:1px_solid_#e6e6e6] [border-bottom:1px_solid_#e6e6e6]'
-                        "
+                        class="flex flex-col items-center justify-center h-27.75 bg-surface-base [border-left:1px_solid_var(--color-border-default)] [border-right:1px_solid_var(--color-border-default)] [border-bottom:1px_solid_var(--color-border-default)]"
                       >
                         <div v-if="!testLoading && outputString.length === 0">
                           <OIcon
                             name="lightbulb"
                             size="md"
-                            :class="
-                              store.state.theme === 'dark'
-                                ? 'text-[#ffffff]'
-                                : 'text-[#A8A8A8]'
-                            "
+                            class="text-icon-color"
                           />
                           <span
-                            class="text-[12px] font-[400] text-center"
-                            :class="
-                              store.state.theme === 'dark'
-                                ? 'text-[#ffffff]'
-                                : 'text-[#4B5563]'
-                            "
+                            class="text-xs font-[400] text-center text-text-secondary"
                           >
                             {{ t('regex_patterns.click_test_input_hint') }}
                           </span>
                         </div>
                         <div v-else-if="testLoading">
                           <span
-                            class="flex items-center justify-center h-[111px]"
+                            class="flex items-center justify-center h-27.75"
                           >
                             <OSpinner size="sm" />
                           </span>
@@ -711,10 +661,8 @@ export default defineComponent({
         const response = await regexPatternsService.list(
           store.state.selectedOrganization.identifier,
         );
-        let counter = 1;
         allPatterns.value = response.data.patterns.map((pattern: any) => ({
           ...pattern,
-          "#": counter <= 9 ? `0${counter++}` : counter++,
           created_at: convertUnixToDateFormat(pattern.created_at),
           updated_at: convertUnixToDateFormat(pattern.updated_at),
           pattern_name: pattern.name,
@@ -933,8 +881,18 @@ export default defineComponent({
 });
 </script>
 
-<style>
-.regex-test-string-input > div > div > div > textarea {
+<style scoped>
+/* keep(complex-state): :deep override to disable resize on the child input's textarea */
+.regex-test-string-input :deep(textarea) {
   resize: none !important;
 }
+
+/* keep(lib-override:o2-input): squares the top corners of the textarea's own
+   border box (OInput's internal wrapper div, only reachable via :deep()) so each
+   field reads as one unit under its flat full-width section-header strip. */
+.regex-pattern-input :deep(.rounded-default.border),
+.regex-test-string-input :deep(.rounded-default.border) {
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 0 !important;
+}
 </style>
diff --git a/web/src/components/logstream/LlmEvaluationSettings.schema.ts b/web/src/components/logstream/LlmEvaluationSettings.schema.ts
deleted file mode 100644
index 108be36ce6..0000000000
--- a/web/src/components/logstream/LlmEvaluationSettings.schema.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// Validation schema for LlmEvaluationSettings.vue.
-//
-// This form previously had NO field-level validation (it only showed a soft
-// toast when the user tried to save while disabled). The migration to
-// OForm + Zod ADDS the missing validation, all conditional on the `enabled`
-// toggle: when LLM evaluation is turned OFF every dependent field relaxes
-// (nothing to validate); when it is ON the config fields become required.
-//
-// Validation TIMING is owned by OForm (submit-then-change via revalidateLogic);
-// this file only describes WHAT is valid.
-//
-// Exposed as a factory (`makeLlmEvaluationSettingsSchema(t)`) so the required
-// messages are i18n-driven (pass useI18n's `t`) — matching every other schema in
-// this migration and the shared `logStream.fieldRequired` key.
-
-import { z } from "zod";
-
-export const makeLlmEvaluationSettingsSchema = (t: (_key: string) => string) =>
-  z
-    .object({
-      // Master toggle — gates whether the rest of the form is required.
-      enabled: z.boolean().default(false),
-      // Conditional fields: optional at the object level, made required when
-      // `enabled` is true via the superRefine below.
-      spanIdentifier: z.string().optional().default(""),
-      // The template select emits the option's `id` (a string) once a value is
-      // chosen, but a prefilled pipeline may carry the whole template object.
-      // Kept loose; the "required when enabled" check lives in superRefine.
-      selectedTemplate: z.any().optional(),
-      enableSampling: z.boolean().optional().default(true),
-      // number <input>/<slider> can emit a string — coerce. Bounded 0–1.
-      samplingRate: z.coerce.number().min(0).max(1).optional().default(0.01),
-      outputStream: z.string().optional().default(""),
-    })
-    .superRefine((val, ctx) => {
-      // When evaluation is disabled, nothing else is required.
-      if (!val.enabled) return;
-
-      if (!String(val.spanIdentifier ?? "").trim()) {
-        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
-          path: ["spanIdentifier"],
-          message: t("logStream.fieldRequired"),
-        });
-      }
-
-      // selectedTemplate may be a string id or a { id, name } object — both are
-      // truthy when chosen; null / undefined / "" mean "not selected".
-      if (
-        val.selectedTemplate === null ||
-        val.selectedTemplate === undefined ||
-        val.selectedTemplate === ""
-      ) {
-        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
-          path: ["selectedTemplate"],
-          message: t("logStream.fieldRequired"),
-        });
-      }
-
-      if (!String(val.outputStream ?? "").trim()) {
-        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
-          path: ["outputStream"],
-          message: t("logStream.fieldRequired"),
-        });
-      }
-    });
-
-export type LlmEvaluationSettingsForm = z.infer<
-  ReturnType<typeof makeLlmEvaluationSettingsSchema>
->;
-
-// STATIC create defaults factory (per the recipe). The async-loaded prefill
-// (existing pipeline / streamName-derived output stream) is applied after the
-// data arrives via `form.reset(...)` — see the component's onMounted.
-export const llmEvaluationSettingsDefaults =
-  (): LlmEvaluationSettingsForm => ({
-    enabled: false,
-    spanIdentifier: "gen_ai_system",
-    selectedTemplate: null,
-    enableSampling: true,
-    samplingRate: 0.01,
-    outputStream: "",
-  });
diff --git a/web/src/components/logstream/LlmEvaluationSettings.spec.ts b/web/src/components/logstream/LlmEvaluationSettings.spec.ts
deleted file mode 100644
index 07e29b48b8..0000000000
--- a/web/src/components/logstream/LlmEvaluationSettings.spec.ts
+++ /dev/null
@@ -1,459 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { describe, it, expect, vi, beforeEach } from "vitest";
-import { mount, flushPromises } from "@vue/test-utils";
-import LlmEvaluationSettings from "./LlmEvaluationSettings.vue";
-import OForm from "@/lib/forms/Form/OForm.vue";
-import OFormInput from "@/lib/forms/Input/OFormInput.vue";
-import OFormSelect from "@/lib/forms/Select/OFormSelect.vue";
-import { createStore } from "vuex";
-import i18n from "@/locales";
-
-const { mockGetPipelines, mockCreatePipeline, mockUpdatePipeline } = vi.hoisted(
-  () => ({
-    mockGetPipelines: vi.fn(),
-    mockCreatePipeline: vi.fn(),
-    mockUpdatePipeline: vi.fn(),
-  }),
-);
-
-const mockToast = vi.hoisted(() => vi.fn());
-
-vi.mock("@/services/pipelines", () => ({
-  default: {
-    getPipelines: mockGetPipelines,
-    createPipeline: mockCreatePipeline,
-    updatePipeline: mockUpdatePipeline,
-  },
-}));
-
-vi.mock("@/lib/feedback/Toast/useToast", () => ({
-  toast: mockToast,
-}));
-
-const makeStore = (theme = "light") =>
-  createStore({
-    state: {
-      theme,
-      selectedOrganization: { identifier: "test-org" },
-    },
-  });
-
-const defaultProps = {
-  streamName: "my-stream",
-  streamFields: [
-    { label: "gen_ai_system", value: "gen_ai_system" },
-    { label: "span_id", value: "span_id" },
-  ],
-};
-
-describe("LlmEvaluationSettings", () => {
-  let store: any;
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-    store = makeStore();
-    // Default: no pipelines exist
-    mockGetPipelines.mockResolvedValue({ data: { list: [] } });
-  });
-
-  const mountComp = (props = defaultProps, customStore?: any) =>
-    mount(LlmEvaluationSettings, {
-      props,
-      global: { plugins: [i18n, customStore ?? store] },
-    });
-
-  // The real OForm instance (single source of truth for the LLM-eval fields).
-  const getForm = (w: any) => {
-    const oform = w.findComponent(OForm);
-    return oform.exists() ? (oform.vm as any).form : undefined;
-  };
-  const values = (w: any) => getForm(w)?.state.values;
-  // Drive the form's own submit so the schema runs + the handler is awaited
-  // deterministically (a fire-and-forget native submit would not be).
-  const submit = async (w: any) => {
-    await getForm(w)?.handleSubmit();
-    await flushPromises();
-  };
-
-  describe("Loading State", () => {
-    it("should show loading spinner initially before getPipelines resolves", async () => {
-      let resolve: any;
-      mockGetPipelines.mockReturnValue(
-        new Promise((r) => {
-          resolve = r;
-        }),
-      );
-
-      const wrapper = mountComp();
-
-      expect(
-        wrapper.find('[data-test="stream-llm-eval-loading"]').exists(),
-      ).toBe(true);
-
-      resolve({ data: { list: [] } });
-      await flushPromises();
-    });
-
-    it("should hide loading spinner after getPipelines resolves", async () => {
-      const wrapper = mountComp();
-      await flushPromises();
-
-      expect(
-        wrapper.find('[data-test="stream-llm-eval-loading"]').exists(),
-      ).toBe(false);
-    });
-
-    it("should call getPipelines on mount", async () => {
-      mountComp();
-      await flushPromises();
-
-      expect(mockGetPipelines).toHaveBeenCalledWith("test-org");
-    });
-
-    it("should not call getPipelines when streamName is empty", async () => {
-      mountComp({ streamName: "", streamFields: [] });
-      await flushPromises();
-
-      expect(mockGetPipelines).not.toHaveBeenCalled();
-    });
-  });
-
-  describe("Default State (no existing pipeline)", () => {
-    it("should show enable toggle", async () => {
-      const wrapper = mountComp();
-      await flushPromises();
-
-      expect(
-        wrapper.find('[data-test="stream-llm-eval-enable-toggle"]').exists(),
-      ).toBe(true);
-    });
-
-    it("should show info banner when disabled (default)", async () => {
-      const wrapper = mountComp();
-      await flushPromises();
-
-      expect(
-        wrapper.find('[data-test="stream-llm-eval-info-banner"]').exists(),
-      ).toBe(true);
-    });
-
-    it("should not show config fields when disabled", async () => {
-      const wrapper = mountComp();
-      await flushPromises();
-
-      expect(
-        wrapper.find('[data-test="stream-llm-eval-span-identifier"]').exists(),
-      ).toBe(false);
-    });
-
-    it("should seed default output stream name to streamName_evaluations", async () => {
-      const wrapper = mountComp();
-      await flushPromises();
-
-      expect(values(wrapper).outputStream).toBe("my-stream_evaluations");
-    });
-
-    it("should initialize enabled as false", async () => {
-      const wrapper = mountComp();
-      await flushPromises();
-
-      expect(values(wrapper).enabled).toBe(false);
-      expect(
-        wrapper.find('[data-test="stream-llm-eval-info-banner"]').exists(),
-      ).toBe(true);
-      expect(
-        wrapper.find('[data-test="stream-llm-eval-span-identifier"]').exists(),
-      ).toBe(false);
-    });
-
-    it("should initialize samplingRate as 0.01", async () => {
-      const wrapper = mountComp();
-      await flushPromises();
-
-      expect(values(wrapper).samplingRate).toBe(0.01);
-    });
-  });
-
-  describe("Required-field indicators", () => {
-    // The three fields that become required once evaluation is enabled render
-    // the * via the OForm* `required` prop (never a hardcoded asterisk). The
-    // whole config section is v-if="enabled", so the fields are always required
-    // when visible → a static * is accurate.
-    it.each([
-      ["spanIdentifier", OFormSelect],
-      ["selectedTemplate", OFormSelect],
-      ["outputStream", OFormInput],
-    ] as const)("shows a required * on %s when enabled", async (name, Comp) => {
-      const wrapper = mountComp();
-      await flushPromises();
-
-      getForm(wrapper).setFieldValue("enabled", true);
-      await flushPromises();
-
-      const field = wrapper
-        .findAllComponents(Comp as any)
-        .find((c: any) => c.props("name") === name);
-      expect(field?.exists()).toBe(true);
-
-      const label = field!.find("label");
-      expect(label.exists()).toBe(true);
-      expect(label.text()).toContain("*");
-    });
-  });
-
-  describe("Existing Pipeline (prefill via form.reset)", () => {
-    const existingPipeline = {
-      pipeline_id: "pipeline-123",
-      version: 1,
-      source: { stream_name: "my-stream", stream_type: "traces" },
-      nodes: [
-        {
-          io_type: "default",
-          data: {
-            node_type: "llm_evaluation",
-            llm_span_identifier: "custom_identifier",
-            sampling_rate: 0.1,
-          },
-        },
-        {
-          io_type: "output",
-          data: { stream_type: "logs", stream_name: "my-stream-eval-output" },
-        },
-      ],
-    };
-
-    beforeEach(() => {
-      mockGetPipelines.mockResolvedValue({
-        data: { list: [existingPipeline] },
-      });
-    });
-
-    it("should enable toggle and reveal config fields when existing pipeline is found", async () => {
-      const wrapper = mountComp();
-      await flushPromises();
-
-      expect(values(wrapper).enabled).toBe(true);
-      expect(
-        wrapper.find('[data-test="stream-llm-eval-info-banner"]').exists(),
-      ).toBe(false);
-      expect(
-        wrapper.find('[data-test="stream-llm-eval-span-identifier"]').exists(),
-      ).toBe(true);
-    });
-
-    it("should load span identifier from existing pipeline", async () => {
-      const wrapper = mountComp();
-      await flushPromises();
-
-      expect(values(wrapper).spanIdentifier).toBe("custom_identifier");
-    });
-
-    it("should load sampling rate from existing pipeline", async () => {
-      const wrapper = mountComp();
-      await flushPromises();
-
-      expect(values(wrapper).samplingRate).toBe(0.1);
-      expect(values(wrapper).enableSampling).toBe(true);
-    });
-
-    it("should load output stream name from eval output node", async () => {
-      const wrapper = mountComp();
-      await flushPromises();
-
-      expect(values(wrapper).outputStream).toBe("my-stream-eval-output");
-    });
-  });
-
-  describe("samplingRatePercent", () => {
-    it("should compute samplingRatePercent from samplingRate", async () => {
-      const wrapper = mountComp();
-      await flushPromises();
-
-      getForm(wrapper).setFieldValue("samplingRate", 0.25);
-      await flushPromises();
-      expect((wrapper.vm as any).samplingRatePercent).toBe("25");
-    });
-
-    it("should show 1% for default 0.01 rate", async () => {
-      const wrapper = mountComp();
-      await flushPromises();
-
-      expect((wrapper.vm as any).samplingRatePercent).toBe("1");
-    });
-  });
-
-  describe("markDirty", () => {
-    it("should emit dirty when markDirty is called", async () => {
-      const wrapper = mountComp();
-      await flushPromises();
-
-      (wrapper.vm as any).markDirty();
-
-      expect(wrapper.emitted("dirty")).toBeTruthy();
-    });
-  });
-
-  describe("filterFields", () => {
-    it("should filter fields by search value", async () => {
-      const wrapper = mountComp();
-      await flushPromises();
-
-      const vm = wrapper.vm as any;
-      const mockUpdate = vi.fn((cb: any) => cb());
-
-      vm.filterFields("span", mockUpdate);
-      expect(vm.filteredFields).toEqual([
-        { label: "span_id", value: "span_id" },
-      ]);
-    });
-
-    it("should return all fields when search is empty", async () => {
-      const wrapper = mountComp();
-      await flushPromises();
-
-      const vm = wrapper.vm as any;
-      const mockUpdate = vi.fn((cb: any) => cb());
-
-      vm.filterFields("", mockUpdate);
-      expect(vm.filteredFields).toHaveLength(2);
-    });
-  });
-
-  describe("Error Handling on Mount", () => {
-    it("should seed default output stream name when getPipelines fails", async () => {
-      mockGetPipelines.mockRejectedValue(new Error("Network error"));
-
-      const wrapper = mountComp();
-      await flushPromises();
-
-      expect(values(wrapper).outputStream).toBe("my-stream_evaluations");
-      expect((wrapper.vm as any).loading).toBe(false);
-    });
-  });
-
-  // ─────────────────────────────────────────────────────────────────────────
-  // Real-OForm validation wiring (per the playbook §5 — at least one test MUST
-  // mount the real OForm and prove the schema gates an invalid submit, so an
-  // unwired `:schema` (the silent Options-API bug) would be caught).
-  describe("OForm schema validation (real form)", () => {
-    it("submit is a no-op (warning, no create) when evaluation is disabled", async () => {
-      const wrapper = mountComp();
-      await flushPromises();
-
-      // enabled=false by default → schema relaxes everything → onSubmit runs
-      // but early-returns with a warning toast; no pipeline is created.
-      await submit(wrapper);
-
-      expect(getForm(wrapper).state.isValid).toBe(true);
-      expect(mockCreatePipeline).not.toHaveBeenCalled();
-      expect(mockUpdatePipeline).not.toHaveBeenCalled();
-      expect(mockToast).toHaveBeenCalledWith(
-        expect.objectContaining({ variant: "warning" }),
-      );
-    });
-
-    it("blocks submit and does NOT create when enabled but required fields empty", async () => {
-      const wrapper = mountComp();
-      await flushPromises();
-
-      const form = getForm(wrapper);
-      form.setFieldValue("enabled", true);
-      form.setFieldValue("spanIdentifier", "");
-      form.setFieldValue("selectedTemplate", null);
-      form.setFieldValue("outputStream", "");
-      await flushPromises();
-
-      await submit(wrapper);
-
-      expect(form.state.isValid).toBe(false);
-      expect(mockCreatePipeline).not.toHaveBeenCalled();
-    });
-
-    it("reveals required errors after submit, then clears on change (R3)", async () => {
-      const wrapper = mountComp();
-      await flushPromises();
-
-      const form = getForm(wrapper);
-      form.setFieldValue("enabled", true);
-      form.setFieldValue("spanIdentifier", "");
-      form.setFieldValue("selectedTemplate", null);
-      form.setFieldValue("outputStream", "");
-      await flushPromises();
-
-      // No validation before the first submit.
-      expect(wrapper.text()).not.toContain("Field is required!");
-
-      await submit(wrapper);
-      expect(wrapper.text()).toContain("Field is required!");
-
-      // Fix every required field → errors clear on change.
-      form.setFieldValue("spanIdentifier", "gen_ai_system");
-      form.setFieldValue("selectedTemplate", "tmpl-1");
-      form.setFieldValue("outputStream", "my_stream_evaluations");
-      await flushPromises();
-      expect(form.state.isValid).toBe(true);
-    });
-
-    it("submits and creates a pipeline when the schema passes", async () => {
-      mockGetPipelines
-        .mockResolvedValueOnce({ data: { list: [] } }) // initial load
-        .mockResolvedValueOnce({ data: { list: [] } }); // reload after create
-      mockCreatePipeline.mockResolvedValue({});
-
-      const wrapper = mountComp();
-      await flushPromises();
-
-      const form = getForm(wrapper);
-      form.setFieldValue("enabled", true);
-      form.setFieldValue("spanIdentifier", "gen_ai_system");
-      form.setFieldValue("selectedTemplate", "tmpl-1");
-      form.setFieldValue("enableSampling", true);
-      form.setFieldValue("samplingRate", 0.05);
-      form.setFieldValue("outputStream", "my_stream_evaluations");
-      await flushPromises();
-
-      await submit(wrapper);
-
-      expect(form.state.isValid).toBe(true);
-      expect(mockCreatePipeline).toHaveBeenCalledTimes(1);
-      const payload = mockCreatePipeline.mock.calls[0][0].data;
-      const evalNode = payload.nodes.find(
-        (n: any) => n.data?.node_type === "llm_evaluation",
-      );
-      expect(evalNode.data.llm_span_identifier).toBe("gen_ai_system");
-      expect(evalNode.data.sampling_rate).toBe(0.05);
-      expect(evalNode.data.eval_template).toBe("tmpl-1");
-    });
-
-    it("exposed save() routes through the form (blocks an invalid submit)", async () => {
-      const wrapper = mountComp();
-      await flushPromises();
-
-      const form = getForm(wrapper);
-      form.setFieldValue("enabled", true);
-      form.setFieldValue("spanIdentifier", "");
-      form.setFieldValue("outputStream", "");
-      await flushPromises();
-
-      await (wrapper.vm as any).save();
-      await flushPromises();
-
-      expect(form.state.isValid).toBe(false);
-      expect(mockCreatePipeline).not.toHaveBeenCalled();
-    });
-  });
-});
diff --git a/web/src/components/logstream/LlmEvaluationSettings.vue b/web/src/components/logstream/LlmEvaluationSettings.vue
deleted file mode 100644
index b7ffc1e94c..0000000000
--- a/web/src/components/logstream/LlmEvaluationSettings.vue
+++ /dev/null
@@ -1,650 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>. -->
-
-<template>
-  <div class="flex flex-col h-full">
-    <!-- Loading skeleton -->
-    <div
-      v-if="loading"
-      data-test="stream-llm-eval-loading"
-      class="flex justify-center items-center p-8"
-    >
-      <OSpinner size="md" />
-    </div>
-
-    <template v-else>
-      <div
-        class="flex-1 overflow-y-auto rounded-lg border border-solid py-2 m-4"
-        :class="
-          store.state.theme === 'dark'
-            ? 'border-[#374151] bg-(--o2-primary-background)'
-            : 'border-[#e5e7eb] bg-white'
-        "
-      >
-        <OForm
-          id="llm-eval-settings-form"
-          :form="llmEvalForm"
-        >
-          <!-- Enable toggle row -->
-          <div
-            class="flex items-center justify-between px-4 py-2 text-[0.8125rem] border-b border-b-solid"
-            :class="
-              store.state.theme === 'dark'
-                ? 'border-b-[#4b5563]'
-                : 'border-b-[#e5e7eb]'
-            "
-          >
-            <div class="flex flex-col gap-0.5 flex-1 pr-4">
-              <span
-                class="text-[0.8125rem] font-semibold"
-                :class="
-                  store.state.theme === 'dark'
-                    ? 'text-[#e5e7eb]'
-                    : 'text-[#374151]'
-                "
-              >
-                {{ t("pipeline.llmEvaluation") }}
-              </span>
-              <small
-                class="block text-xs italic mt-1"
-                :class="
-                  store.state.theme === 'dark'
-                    ? 'text-[#9ca3af]'
-                    : 'text-[#6b7280]'
-                "
-              >
-                {{ t("pipeline.llmEvaluationEnableHelp") }}
-              </small>
-            </div>
-            <OFormSwitch
-              name="enabled"
-              data-test="stream-llm-eval-enable-toggle"
-              @update:model-value="markDirty"
-            />
-          </div>
-
-          <!-- Config fields — visible when enabled -->
-          <template v-if="enabled">
-            <!-- LLM Span Identifier -->
-            <div class="pt-3 px-4 pb-1">
-              <OFormSelect
-                name="spanIdentifier"
-                :label="t('pipeline.llmSpanIdentifier')"
-                required
-                :options="streamFields"
-                searchable
-                labelKey="label"
-                valueKey="value"
-                class="w-full"
-                data-test="stream-llm-eval-span-identifier"
-                @update:model-value="markDirty"
-              />
-              <small
-                class="block text-xs italic mt-1"
-                :class="
-                  store.state.theme === 'dark'
-                    ? 'text-[#9ca3af]'
-                    : 'text-[#6b7280]'
-                "
-              >
-                {{ t("pipeline.llmSpanIdentifierFieldHelp") }}
-              </small>
-            </div>
-
-            <!-- Evaluation Template Selection -->
-            <div class="pt-3 px-4 pb-1">
-              <div class="flex items-end gap-2">
-                <OFormSelect
-                  name="selectedTemplate"
-                  :label="t('pipeline.evaluationTemplate')"
-                  required
-                  :options="availableTemplates"
-                  labelKey="name"
-                  valueKey="id"
-                  class="w-full flex-1"
-                  data-test="stream-llm-eval-template-select"
-                  @update:model-value="markDirty"
-                />
-                <OButton
-                  variant="ghost"
-                  size="icon-sm"
-                  @click="refreshTemplates"
-                  :loading="loadingTemplates"
-                  :title="t('common.refresh')"
-                  data-test="stream-llm-eval-template-refresh-btn"
-                  icon-left="refresh"
-                />
-              </div>
-              <small
-                class="block text-xs italic mt-1"
-                :class="
-                  store.state.theme === 'dark'
-                    ? 'text-[#9ca3af]'
-                    : 'text-[#6b7280]'
-                "
-              >
-                {{ t("pipeline.evaluationTemplateHelp") }}
-              </small>
-            </div>
-
-            <!-- Sampling toggle row -->
-            <div
-              class="flex items-center justify-between px-4 py-2 text-[0.8125rem] border-b border-b-solid"
-              :class="
-                store.state.theme === 'dark'
-                  ? 'border-b-[#4b5563]'
-                  : 'border-b-[#e5e7eb]'
-              "
-            >
-              <span
-                class="text-[0.8125rem] font-semibold"
-                :class="
-                  store.state.theme === 'dark'
-                    ? 'text-[#e5e7eb]'
-                    : 'text-[#374151]'
-                "
-              >
-                {{ t("pipeline.samplingLabel") }}
-              </span>
-              <OFormSwitch
-                name="enableSampling"
-                data-test="stream-llm-eval-sampling-toggle"
-                @update:model-value="markDirty"
-              />
-            </div>
-
-            <!-- Sampling rate slider -->
-            <div
-              v-if="enableSampling"
-              class="pt-3 px-4 pb-1"
-            >
-              <div class="mb-1">
-                <span
-                  class="text-xs"
-                  :class="
-                    store.state.theme === 'dark'
-                      ? 'text-[#e5e7eb]'
-                      : 'text-[#374151]'
-                  "
-                >
-                  {{
-                    t("pipeline.llmEvaluationSamplingRateLabel", {
-                      percentage: samplingRatePercent,
-                    })
-                  }}
-                </span>
-              </div>
-              <OFormSlider
-                name="samplingRate"
-                :min="0"
-                :max="1"
-                :step="0.01"
-                data-test="stream-llm-eval-sampling-rate"
-                @update:model-value="markDirty"
-              />
-              <small
-                class="block text-xs italic mt-1"
-                :class="
-                  store.state.theme === 'dark'
-                    ? 'text-[#9ca3af]'
-                    : 'text-[#6b7280]'
-                "
-              >
-                {{ t("pipeline.llmEvaluationSamplingHelp") }}
-              </small>
-            </div>
-
-            <!-- Output stream name -->
-            <div class="pt-3 px-4 pb-1">
-              <OFormInput
-                name="outputStream"
-                :label="t('pipeline.llmEvaluationOutputStreamName')"
-                required
-                class="w-full"
-                data-test="stream-llm-eval-output-stream"
-                @update:model-value="markDirty"
-              />
-              <small
-                class="block text-xs italic mt-1"
-                :class="
-                  store.state.theme === 'dark'
-                    ? 'text-[#9ca3af]'
-                    : 'text-[#6b7280]'
-                "
-              >
-                {{ t("pipeline.llmEvaluationOutputStreamHelp") }}
-              </small>
-            </div>
-          </template>
-
-          <!-- Info banner when disabled -->
-          <div
-            v-else
-            data-test="stream-llm-eval-info-banner"
-            class="mx-4 my-3 p-3 rounded border border-solid text-xs"
-            :class="
-              store.state.theme === 'dark'
-                ? 'text-[#fcd34d] border-[#92400e] bg-[rgba(146,64,14,0.15)]'
-                : 'text-[#92400e] border-[#fde68a] bg-[#fffbeb]'
-            "
-          >
-            {{ t("pipeline.llmEvaluationRemoveWarning") }}
-          </div>
-        </OForm>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script lang="ts">
-import {
-  computed,
-  defineComponent,
-  onMounted,
-  ref,
-  watch,
-} from "vue";
-import { useI18n } from "vue-i18n";
-import { useStore } from "vuex";
-import pipelineService from "@/services/pipelines";
-import OButton from "@/lib/core/Button/OButton.vue";
-import OSpinner from "@/lib/feedback/Spinner/OSpinner.vue";
-import OForm from "@/lib/forms/Form/OForm.vue";
-import { useOForm } from "@/lib/forms/Form/useOForm";
-import OFormSwitch from "@/lib/forms/Switch/OFormSwitch.vue";
-import OFormSelect from "@/lib/forms/Select/OFormSelect.vue";
-import OFormInput from "@/lib/forms/Input/OFormInput.vue";
-import OFormSlider from "@/lib/forms/Slider/OFormSlider.vue";
-import { toast } from "@/lib/feedback/Toast/useToast";
-import {
-  makeLlmEvaluationSettingsSchema,
-  llmEvaluationSettingsDefaults,
-  type LlmEvaluationSettingsForm,
-} from "./LlmEvaluationSettings.schema";
-
-export default defineComponent({
-  name: "LlmEvaluationSettings",
-  components: {
-    OButton,
-    OSpinner,
-    OForm,
-    OFormSwitch,
-    OFormSelect,
-    OFormInput,
-    OFormSlider,
-  },
-
-  props: {
-    streamName: {
-      type: String,
-      required: true,
-    },
-    streamFields: {
-      type: Array as () => { label: string; value: string }[],
-      default: () => [],
-    },
-  },
-
-  emits: ["dirty"],
-
-  setup(props, { emit, expose }) {
-    const { t } = useI18n();
-    const store = useStore();
-
-    const loading = ref(true);
-    const filteredFields = ref<{ label: string; value: string }[]>([]);
-    const availableTemplates = ref<any[]>([]);
-    const loadingTemplates = ref(false);
-
-    // Rule ③ OWNER pattern: this Options-API component OWNS <OForm> and must read
-    // form state (enabled / enableSampling / samplingRate) to drive parent-side
-    // `v-if` conditionals + the sampling-rate percentage label. So create the ONE
-    // form here with useOForm, hand it to <OForm :form="llmEvalForm">, and read it
-    // reactively with form.useStore — single source of truth, NO mirror. The save
-    // is wired through useOForm({ onSubmit }), not @submit.
-    const llmEvalForm = useOForm<LlmEvaluationSettingsForm>({
-      defaultValues: llmEvaluationSettingsDefaults(),
-      schema: makeLlmEvaluationSettingsSchema(t),
-      onSubmit: (value) => onSubmit(value),
-    });
-
-    // Existing pipeline found on mount — needed for update vs create
-    let existingPipeline: any = null;
-
-    // Reactive READS of the form-owned values that drive the v-if conditionals +
-    // the sampling percentage label. form.useStore tracks changes (a
-    // `form.state.values` read inside a computed would not); the form remains the
-    // single source of truth — these are never written back.
-    const enabled = llmEvalForm.useStore((s: any) => !!s.values.enabled);
-    const enableSampling = llmEvalForm.useStore(
-      (s: any) => !!s.values.enableSampling,
-    );
-    const samplingRate = llmEvalForm.useStore((s: any) =>
-      Number(s.values.samplingRate ?? 0.01),
-    );
-    const samplingRatePercent = computed(() =>
-      (samplingRate.value * 100).toFixed(0),
-    );
-
-    const markDirty = () => emit("dirty");
-
-    // Keep filteredFields in sync with the prop
-    watch(
-      () => props.streamFields,
-      (fields) => {
-        filteredFields.value = [...fields];
-      },
-      { immediate: true },
-    );
-
-    const filterFields = (val: string, update: (fn: () => void) => void) => {
-      update(() => {
-        if (!val) {
-          filteredFields.value = [...props.streamFields];
-        } else {
-          const needle = val.toLowerCase();
-          filteredFields.value = props.streamFields.filter((f) =>
-            f.label.toLowerCase().includes(needle),
-          );
-        }
-      });
-    };
-
-    const fetchAvailableTemplates = async (forceRefresh: boolean = false) => {
-      loadingTemplates.value = true;
-      try {
-        const orgId = store.state.selectedOrganization?.identifier;
-        if (!orgId) return;
-
-        // Use store cache unless force refresh requested
-        if (!forceRefresh) {
-          const cached = store.state.streams.evalTemplatesByOrg[orgId];
-          if (cached && cached.length > 0) {
-            availableTemplates.value = cached;
-            return;
-          }
-        }
-
-        const { evalTemplateService } = await import(
-          "@/services/eval-template.service"
-        );
-        const templates = await evalTemplateService.listTemplates(orgId);
-        availableTemplates.value = templates || [];
-
-        store.dispatch("streams/setEvalTemplates", {
-          orgId,
-          templates: templates || [],
-        });
-      } catch (e) {
-        console.error("Failed to fetch evaluation templates:", e);
-        availableTemplates.value = [];
-      } finally {
-        loadingTemplates.value = false;
-      }
-    };
-
-    const refreshTemplates = async () => {
-      await fetchAvailableTemplates(true);
-      toast({
-        variant: "success",
-        message: t("pipeline.evalTemplatesRefreshed"),
-        timeout: 1500,
-      });
-    };
-
-    // On mount: detect if an LLM evaluation pipeline already exists for this
-    // stream, build the prefill values, then seed them into the form. The form
-    // only mounts once `loading` flips to false, so we reset() it after the
-    // next tick (constraint: data arriving AFTER mount → form.reset(values)).
-    onMounted(async () => {
-      if (!props.streamName) {
-        loading.value = false;
-        return;
-      }
-
-      const orgId = store.state.selectedOrganization?.identifier;
-
-      // Start from the create defaults; layer the loaded record on top.
-      const loaded: LlmEvaluationSettingsForm = llmEvaluationSettingsDefaults();
-
-      try {
-        // Fetch templates first so they are available for restoration
-        await fetchAvailableTemplates();
-
-        const res = await pipelineService.getPipelines(orgId);
-        const pipelines: any[] = res.data?.list || [];
-
-        const match = pipelines.find(
-          (p: any) =>
-            p.source?.stream_name === props.streamName &&
-            p.source?.stream_type === "traces" &&
-            p.nodes?.some((n: any) => n.data?.node_type === "llm_evaluation")
-        );
-
-        if (match) {
-          existingPipeline = match;
-          loaded.enabled = true;
-
-          const evalNode = match.nodes.find(
-            (n: any) => n.data?.node_type === "llm_evaluation"
-          );
-          if (evalNode) {
-            loaded.spanIdentifier =
-              evalNode.data.llm_span_identifier || "gen_ai_system";
-            const rate = evalNode.data.sampling_rate ?? 0.01;
-            loaded.enableSampling = rate > 0;
-            loaded.samplingRate = rate > 0 ? rate : 0.01;
-
-            // Restore saved template ID
-            if (evalNode.data.eval_template) {
-              loaded.selectedTemplate = evalNode.data.eval_template;
-            } else if (availableTemplates.value.length > 0) {
-              loaded.selectedTemplate = availableTemplates.value[0].id;
-            }
-          }
-
-          // Read output stream from the eval output node
-          const evalOutputNode = match.nodes.find(
-            (n: any) =>
-              n.io_type === "output" && n.data?.stream_type === "logs"
-          );
-          loaded.outputStream =
-            evalOutputNode?.data?.stream_name ||
-            `${props.streamName}_evaluations`;
-        } else {
-          // No existing pipeline — apply defaults
-          loaded.outputStream = `${props.streamName}_evaluations`;
-          if (availableTemplates.value.length > 0) {
-            loaded.selectedTemplate = availableTemplates.value[0].id;
-          }
-        }
-      } catch (e) {
-        console.error("[LlmEvalSettings] Data fetch failed:", e);
-        // Fallback for defaults
-        loaded.outputStream = `${props.streamName}_evaluations`;
-        if (availableTemplates.value.length > 0 && !loaded.selectedTemplate) {
-          loaded.selectedTemplate = availableTemplates.value[0].id;
-        }
-      } finally {
-        loading.value = false;
-        // The form instance exists from setup() (independent of the OForm
-        // component's v-if mount), so seed the loaded values directly. reset()
-        // rebuilds pristine submit-state → flash-free.
-        llmEvalForm.reset(loaded);
-      }
-    });
-
-    // @submit handler — OForm awaits it and only calls it once the schema
-    // passes. `value` is the validated payload (single source of truth).
-    const onSubmit = async (value: LlmEvaluationSettingsForm) => {
-      const orgId = store.state.selectedOrganization.identifier;
-      const streamName = props.streamName;
-
-      if (!value.enabled) {
-        toast({
-          variant: "warning",
-          message: t("pipeline.llmEvaluationRemoveWarning"),
-        });
-        return;
-      }
-
-      const ts = Date.now();
-      const inputNodeId = `input-${ts}`;
-      const evalNodeId = `llm-eval-${ts}`;
-      const passthroughOutputId = `output-passthrough-${ts}`;
-      const evalOutputId = `output-eval-${ts}`;
-
-      const payload = {
-        name: streamName,
-        description: t("pipeline.llmEvaluationPipelineDescription", {
-          streamName,
-        }),
-        source: {
-          source_type: "realtime",
-          org_id: orgId,
-          stream_name: streamName,
-          stream_type: "traces",
-        },
-        nodes: [
-          {
-            id: inputNodeId,
-            io_type: "input",
-            position: { x: 300, y: 50 },
-            data: {
-              node_type: "stream",
-              org_id: orgId,
-              stream_name: streamName,
-              stream_type: "traces",
-            },
-          },
-          {
-            id: evalNodeId,
-            io_type: "default",
-            position: { x: 500, y: 250 },
-            data: {
-              node_type: "llm_evaluation",
-              name: "evaluate",
-              enable_llm_judge: true,
-              llm_span_identifier: value.spanIdentifier || "gen_ai_system",
-              sampling_rate: value.enableSampling ? value.samplingRate : 0.0,
-              eval_template: value.selectedTemplate || null,
-            },
-          },
-          {
-            id: passthroughOutputId,
-            io_type: "output",
-            position: { x: 100, y: 450 },
-            data: {
-              node_type: "stream",
-              org_id: orgId,
-              stream_name: streamName,
-              stream_type: "traces",
-            },
-          },
-          {
-            id: evalOutputId,
-            io_type: "output",
-            position: { x: 500, y: 450 },
-            data: {
-              node_type: "stream",
-              org_id: orgId,
-              stream_name: value.outputStream || `${streamName}_evaluations`,
-              stream_type: "logs",
-            },
-          },
-        ],
-        edges: [
-          {
-            id: `e${inputNodeId}-${passthroughOutputId}`,
-            source: inputNodeId,
-            target: passthroughOutputId,
-          },
-          {
-            id: `e${inputNodeId}-${evalNodeId}`,
-            source: inputNodeId,
-            target: evalNodeId,
-          },
-          {
-            id: `e${evalNodeId}-${evalOutputId}`,
-            source: evalNodeId,
-            target: evalOutputId,
-          },
-        ],
-      };
-
-      if (existingPipeline) {
-        // Preserve the existing pipeline id/version for update
-        await pipelineService.updatePipeline({
-          org_identifier: orgId,
-          data: {
-            ...payload,
-            pipeline_id: existingPipeline.pipeline_id,
-            version: existingPipeline.version,
-          },
-        });
-      } else {
-        await pipelineService.createPipeline({
-          data: payload,
-          org_identifier: orgId,
-        });
-        // Reload to pick up the newly created pipeline
-        const res = await pipelineService.getPipelines(orgId);
-        const pipelines: any[] = res.data?.list || [];
-        existingPipeline = pipelines.find(
-          (p: any) =>
-            p.source?.stream_name === streamName &&
-            p.source?.stream_type === "traces" &&
-            p.nodes?.some((n: any) => n.data?.node_type === "llm_evaluation"),
-        );
-      }
-
-      toast({
-        variant: "success",
-        message: t("pipeline.llmEvaluationCreatedSuccess", { streamName }),
-      });
-    };
-
-    // Submit THROUGH the form so the Zod schema gates the save (handleSubmit
-    // runs the schema then awaits onSubmit; an empty/invalid required field
-    // blocks it and reveals errors). Returns the submit promise so a parent
-    // footer can await it. Exposed so schema.vue can call it from its shared
-    // footer; a consuming dialog/drawer should also wire `form-id` =
-    // "llm-eval-settings-form" so Enter + the footer Save submit natively.
-    const save = () => llmEvalForm.handleSubmit();
-
-    expose({ save });
-
-    return {
-      t,
-      store,
-      // The owner-created form (Rule ③) — bound via <OForm :form="llmEvalForm">.
-      // It carries the schema + defaults internally (passed to useOForm above),
-      // so no separate :schema / :default-values binding is needed.
-      llmEvalForm,
-      loading,
-      enabled,
-      enableSampling,
-      samplingRate,
-      samplingRatePercent,
-      filteredFields,
-      filterFields,
-      availableTemplates,
-      loadingTemplates,
-      refreshTemplates,
-      markDirty,
-    };
-  },
-});
-</script>
diff --git a/web/src/components/logstream/PerformanceFieldsDialog.spec.ts b/web/src/components/logstream/PerformanceFieldsDialog.spec.ts
index fd95acabce..41adf8c336 100644
--- a/web/src/components/logstream/PerformanceFieldsDialog.spec.ts
+++ b/web/src/components/logstream/PerformanceFieldsDialog.spec.ts
@@ -18,8 +18,7 @@ import { mount, flushPromises } from "@vue/test-utils";
 import PerformanceFieldsDialog from "./PerformanceFieldsDialog.vue";
 import { createStore } from "vuex";
 
-// PerformanceFieldsDialog now wraps content in <ODialog> (migrated from
-// <q-dialog>). The dialog exposes:
+// PerformanceFieldsDialog now wraps content in <ODialog>. The dialog exposes:
 //   - prop  : open (v-model:open), persistent, size, title,
 //             primary-button-label, secondary-button-label
 //   - emits : update:open, click:primary, click:secondary
@@ -345,9 +344,9 @@ describe("PerformanceFieldsDialog", () => {
     it("should render correctly in light theme", async () => {
       mountDialog([mockFtsFiled]);
       await flushPromises();
-      // light theme applies the light surface/border classes
-      expect(wrapper.html()).toContain("bg-[#f5f5f5]");
-      expect(wrapper.html()).not.toContain("bg-[#1e1e1e]");
+      // The hex dark/light surfaces collapsed to a single theme-aware token.
+      expect(wrapper.html()).toContain("bg-surface-subtle");
+      expect(wrapper.html()).toContain("border-border-default");
     });
 
     it("should render correctly in dark theme", async () => {
@@ -360,8 +359,9 @@ describe("PerformanceFieldsDialog", () => {
 
       mountDialog([mockFtsFiled], true, darkStore);
       await flushPromises();
-      expect(wrapper.html()).toContain("bg-[#1e1e1e]");
-      expect(wrapper.html()).not.toContain("bg-[#f5f5f5]");
+      // Same theme-aware token is rendered in dark mode; the token resolves the color.
+      expect(wrapper.html()).toContain("bg-surface-subtle");
+      expect(wrapper.html()).toContain("border-border-default");
     });
   });
 });
diff --git a/web/src/components/logstream/PerformanceFieldsDialog.vue b/web/src/components/logstream/PerformanceFieldsDialog.vue
index 339e1fa1dd..a24f0fe40d 100644
--- a/web/src/components/logstream/PerformanceFieldsDialog.vue
+++ b/web/src/components/logstream/PerformanceFieldsDialog.vue
@@ -22,12 +22,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     @click:primary="$emit('add-fields')"
   >
     <div v-if="fieldsByType.fts.length > 0" class="mb-2">
-      <div class="text-xs text-weight-medium mb-1">
+      <div class="text-xs font-medium mb-1">
         Full Text Search ({{ fieldsByType.fts.length }})
       </div>
       <div
-        class="p-2 max-h-50 overflow-y-auto border rounded"
-        :class="store.state.theme === 'dark' ? 'border-[#3a3a3a] bg-[#1e1e1e]' : 'border-(--o2-border) bg-[#f5f5f5]'"
+        class="p-2 max-h-50 overflow-y-auto border rounded-default border-border-default bg-surface-subtle"
       >
         <OTag
           v-for="field in fieldsByType.fts"
@@ -52,12 +51,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </div>
 
     <div v-if="fieldsByType.secondaryIndex.length > 0">
-      <div class="text-xs text-weight-medium mb-1">
+      <div class="text-xs font-medium mb-1">
         Secondary Index ({{ fieldsByType.secondaryIndex.length }})
       </div>
       <div
-        class="p-2 max-h-50 overflow-y-auto border rounded"
-        :class="store.state.theme === 'dark' ? 'border-[#3a3a3a] bg-[#1e1e1e]' : 'border-(--o2-border) bg-[#f5f5f5]'"
+        class="p-2 max-h-50 overflow-y-auto border rounded-default border-border-default bg-surface-subtle"
       >
         <OTag
           v-for="field in fieldsByType.secondaryIndex"
@@ -85,7 +83,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <script lang="ts">
 import { defineComponent, computed, PropType } from "vue";
-import { useStore } from "vuex";
 import ODialog from "@/lib/overlay/Dialog/ODialog.vue";
 import OTag from "@/lib/core/Badge/OTag.vue";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
@@ -111,8 +108,6 @@ export default defineComponent({
   },
   emits: ["update:modelValue", "add-fields", "skip", "remove-field"],
   setup(props) {
-    const store = useStore();
-
     // Computed property to group missing fields by type
     const fieldsByType = computed(() => {
       return {
@@ -124,7 +119,6 @@ export default defineComponent({
     });
 
     return {
-      store,
       fieldsByType,
     };
   },
diff --git a/web/src/components/logstream/Schema.schema.ts b/web/src/components/logstream/Schema.schema.ts
index c5b8d06e76..03a7af3de0 100644
--- a/web/src/components/logstream/Schema.schema.ts
+++ b/web/src/components/logstream/Schema.schema.ts
@@ -1,18 +1,11 @@
 // Copyright 2026 OpenObserve Inc.
 //
 // Validation schema for schema.vue's "Add Field(s)" flow. The dynamic rows are
-// rendered by the (now form-only) StreamFieldInputs, so schema.vue owns a small
-// TanStack form whose only field is the `newSchemaFields` array.
+// rendered by StreamFieldInputs, so schema.vue owns a small TanStack form whose
+// only field is the `newSchemaFields` array. schema.vue's `onSubmit` runs this
+// validation and bails when a row is invalid.
 //
-// GATED (Option A — parity with AddStream). Before the form-only migration,
-// schema.vue showed an inline field-name regex error while typing but did NOT
-// block the save, so invalid names (e.g. "user!id") were silently accepted and
-// pushed into `defined_schema_fields`. This schema restores the validation AND
-// gates the save on it: schema.vue's `onSubmit` runs the form's validation and
-// bails when a row is invalid (see the gate there).
-//
-// IMPORTANT — validate the NORMALIZED name, not the raw one. Unlike AddStream's
-// strict `makeStreamFieldRowSchema(t)` (which rejects the raw value), schema.vue
+// IMPORTANT — validate the NORMALIZED name, not the raw one. schema.vue
 // normalizes each name at save time (trim + lowercase + space/hyphen → "_"), so
 // "my field" and "my-field" legitimately become "my_field". Judging the raw
 // value would wrongly block those. We therefore validate each name the way it
@@ -30,7 +23,7 @@ const normalizeFieldName = (v: string): string =>
  * Build the "Add Field(s)" form schema.
  *
  * @param t useI18n's `t`, so required messages resolve from the shared
- *   `logStream.*` keys (also used by AddStream / PR #13077).
+ *   `logStream.*` keys.
  */
 export const makeSchemaFieldsSchema = (t: (_key: string) => string) =>
   z.object({
diff --git a/web/src/components/logstream/Schema.spec.ts b/web/src/components/logstream/Schema.spec.ts
index 6fbf1876c8..a158d058ac 100644
--- a/web/src/components/logstream/Schema.spec.ts
+++ b/web/src/components/logstream/Schema.spec.ts
@@ -1405,7 +1405,7 @@ describe("Schema Component Tests", () => {
     });
   });
 
-  // Coverage for the q-dialog/q-drawer → ODrawer migration.
+  // Coverage for the ODrawer migration.
   describe("ODrawer Migration", () => {
     const buildProps = (open = true) => ({
       open,
diff --git a/web/src/components/logstream/StreamFieldInputs.schema.ts b/web/src/components/logstream/StreamFieldInputs.schema.ts
index 561edd6202..4621dbfcb0 100644
--- a/web/src/components/logstream/StreamFieldInputs.schema.ts
+++ b/web/src/components/logstream/StreamFieldInputs.schema.ts
@@ -5,10 +5,7 @@
 // a single row lives here and both parents compose it into their own form
 // schema as `z.array(makeStreamFieldRowSchema(t))`.
 //
-// Restored from the component's legacy `validate()` (prop-mode), with the
-// required messages now i18n-driven (pass useI18n's `t`) to match every other
-// schema in this migration AND PR #13077's `logStream.fieldRequired` /
-// `logStream.dataTypeRequired` keys:
+// Required messages are i18n-driven (pass useI18n's `t`):
 //   • name → required (`logStream.fieldRequired`) + `/^[a-zA-Z0-9_:]+$/` on the
 //            RAW value (no schema `.trim()` — see the field note below).
 //   • type → required (`logStream.dataTypeRequired`; the data-type select,
@@ -31,7 +28,7 @@ export const streamFieldNameRegex = /^[a-zA-Z0-9_:]+$/;
  * Build the single-row schema.
  *
  * @param t useI18n's `t`, so required messages resolve from the shared
- *   `logStream.*` keys (also used by PR #13077).
+ *   `logStream.*` keys.
  */
 export const makeStreamFieldRowSchema = (t: (_key: string) => string) =>
   z.object({
@@ -40,10 +37,8 @@ export const makeStreamFieldRowSchema = (t: (_key: string) => string) =>
     uuid: z.string().optional(),
     // NO schema `.trim()`: OForm/TanStack VALIDATES with the schema but saves the
     // RAW row value. A `.trim()` would let " my_field " pass (regex judges the
-    // trimmed copy) and diverge from `main`, which rejected any surrounding
-    // whitespace via the regex on the raw value. Validating the raw value keeps
-    // `streamFieldNameRegex` rejecting ANY whitespace, mirroring the scalar
-    // `name` fix in AddStream.schema.ts.
+    // trimmed copy); validating the raw value keeps `streamFieldNameRegex`
+    // rejecting ANY whitespace.
     name: z
       .string()
       .min(1, t("logStream.fieldRequired"))
diff --git a/web/src/components/logstream/StreamFieldInputs.vue b/web/src/components/logstream/StreamFieldInputs.vue
index 6d37e7bb0b..85af6ebedc 100644
--- a/web/src/components/logstream/StreamFieldInputs.vue
+++ b/web/src/components/logstream/StreamFieldInputs.vue
@@ -1,6 +1,7 @@
 <template>
   <div data-test="add-stream-fields-section">
-    <div v-if="showHeader" data-test="alert-conditions-text" class="o-input-label text-sm font-semibold leading-tight">
+    <div v-if="showHeader" data-test="alert-conditions-text" class="o-input-label text-compact font-medium leading-tight text-input-label-text">
+
       {{ t("logStream.fields") }}
     </div>
     <template v-if="!formRows.length">
@@ -29,7 +30,7 @@
         class="flex flex-wrap items-start gap-2 mt-2"
         :data-test="`add-stream-field-row-${index}`"
       >
-        <div data-test="add-stream-field-name-input" class="flex-1 min-w-[160px]">
+        <div data-test="add-stream-field-name-input" class="flex-1 min-w-40">
           <OFormInput
             :data-test="`add-stream-field-name-input-${index}`"
             :name="`${formFieldName}[${index}].name`"
@@ -42,7 +43,7 @@
         <div
           v-if="visibleInputs.index_type"
           data-test="add-stream-field-index-type-select"
-          class="min-w-[140px]"
+          class="min-w-35"
         >
           <OFormSelect
             :name="`${formFieldName}[${index}].index_type`"
@@ -54,7 +55,7 @@
         </div>
         <div
           v-if="visibleInputs.data_type"
-          class="min-w-[100px]"
+          class="min-w-25"
         >
           <OFormSelect
             data-test="add-stream-field-data-type-select"
@@ -115,13 +116,12 @@ import {
   makeStreamFieldRow,
 } from "./StreamFieldInputs.schema";
 
-// FORM-ONLY (migrated 2026-07-01). The rows are now owned by the parent's
-// TanStack form: this component `inject`s that form, reads the array reactively
-// via form.useStore, renders indexed OForm* fields (`${formFieldName}[i].name`),
-// and mutates rows with form.pushFieldValue / form.removeFieldValue. Per-row
-// validation lives in the parent schema (see StreamFieldInputs.schema.ts) — this
-// component no longer carries its own validate()/error refs. It MUST be rendered
-// inside an <OForm> whose schema has an array field named `formFieldName`.
+// FORM-ONLY. The rows are owned by the parent's TanStack form: this component
+// `inject`s that form, reads the array reactively via form.useStore, renders
+// indexed OForm* fields (`${formFieldName}[i].name`), and mutates rows with
+// form.pushFieldValue / form.removeFieldValue. Per-row validation lives in the
+// parent schema (see StreamFieldInputs.schema.ts). It MUST be rendered inside an
+// <OForm> whose schema has an array field named `formFieldName`.
 const props = defineProps({
   /** Dot-path of the array field on the parent form (e.g. "fields"). */
   formFieldName: {
diff --git a/web/src/components/logstream/explore/SearchBar.spec.ts b/web/src/components/logstream/explore/SearchBar.spec.ts
index b58acf5fd6..53783d5c62 100644
--- a/web/src/components/logstream/explore/SearchBar.spec.ts
+++ b/web/src/components/logstream/explore/SearchBar.spec.ts
@@ -126,7 +126,7 @@ describe("SearchBar (logstream/explore)", () => {
     it("should render download logs button", async () => {
       const wrapper = mountComp();
       await flushPromises();
-      // OButton replaces q-btn; download button is identified by its title attribute
+      // The download button is identified by its title attribute
       expect(wrapper.find('button[data-o2-btn]').exists()).toBe(true);
     });
 
diff --git a/web/src/components/logstream/explore/SearchBar.vue b/web/src/components/logstream/explore/SearchBar.vue
index 98c189a3a9..45868bce1e 100644
--- a/web/src/components/logstream/explore/SearchBar.vue
+++ b/web/src/components/logstream/explore/SearchBar.vue
@@ -64,7 +64,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </div>
     </div>
     <div class="flex h-[calc(100%-40px)]!">
-      <div class="flex flex-col" style="border-top: 1px solid #dbdbdb; height: 100px">
+      <div class="flex flex-col border-t border-border-default h-25">
         <b>Query Editor:</b>
         <code-query-editor
           editor-id="logsStreamQueryEditor"
@@ -228,8 +228,9 @@ export default defineComponent({
 });
 </script>
 
-<style>
-#logsStreamQueryEditor {
-  height: calc(100% - 20px) !important;
+<style scoped>
+/* keep(lib-override:monaco): sizes the query editor's own container by id (rendered by the editor lib) */
+:deep(#logsStreamQueryEditor) {
+  height: calc(100% - 1.25rem) !important;
 }
 </style>
diff --git a/web/src/components/logstream/schema.vue b/web/src/components/logstream/schema.vue
index 49fef5936e..a08ef4b5b3 100644
--- a/web/src/components/logstream/schema.vue
+++ b/web/src/components/logstream/schema.vue
@@ -30,34 +30,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <template #header-right>
       <div
         v-if="indexData.name"
-        :class="[
-          'flex items-center gap-1.5 px-2 py-1 rounded-md border',
-          store.state.theme === 'dark'
-            ? 'bg-gray-800/50 border-gray-600'
-            : 'bg-gray-50 border-gray-200',
-        ]"
+        class="flex items-center gap-1.5 px-2 py-1 rounded-default border bg-surface-panel border-border-default"
       >
         <img
           :src="getTimelineIcon"
           alt="Timeline Icon"
-          class="w-[14px] h-[14px] opacity-70"
+          class="w-3.5 h-3.5 opacity-70"
         />
         <div class="flex items-center gap-1.5">
           <span
-            :class="[
-              'text-[10px] font-medium px-1.5 py-0.5 rounded',
-              store.state.theme === 'dark'
-                ? 'text-gray-300 bg-gray-700/50'
-                : 'text-gray-600 bg-gray-100',
-            ]"
+            class="text-3xs font-medium px-1.5 py-0.5 rounded-default text-text-secondary bg-surface-subtle"
           >
             UTC
           </span>
           <div
-            :class="[
-              'text-xs font-semibold',
-              store.state.theme === 'dark' ? 'text-gray-200' : 'text-gray-800',
-            ]"
+            class="text-xs font-semibold text-text-body"
           >
             {{ indexData.stats.doc_time_min }}
             <span class="text-base leading-none">→</span>
@@ -93,23 +80,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 data-test="docs-count-tile"
               >
                 <div
-                  class="tile-content rounded-lg p-3 text-center border shadow-sm h-20 flex flex-col justify-between"
-                  :class="
-                    store.state.theme === 'dark'
-                      ? 'tile-content-dark border-gray-700'
-                      : 'tile-content-light border-gray-200'
-                  "
+                  class="tile-content rounded-default p-3 text-center border h-20 flex flex-col justify-between bg-surface-base border-border-default"
                 >
                   <div
                     class="tile-header flex justify-between items-start"
                   >
                     <div
-                      class="tile-title text-xs font-bold text-left"
-                      :class="
-                        store.state.theme === 'dark'
-                          ? 'text-gray-400'
-                          : 'text-gray-500'
-                      "
+                      class="tile-title text-xs font-bold text-left text-text-secondary"
                     >
                       Events
                     </div>
@@ -122,12 +99,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     </div>
                   </div>
                   <div
-                    class="tile-value text-lg flex items-end justify-start"
-                    :class="
-                      store.state.theme === 'dark'
-                        ? 'text-white'
-                        : 'text-gray-900'
-                    "
+                    class="tile-value text-lg flex items-end justify-start text-text-body"
                   >
                     {{
                       parseInt(indexData.stats.doc_num).toLocaleString("en-US")
@@ -138,23 +110,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <!-- Storage Size Tile -->
               <div class="tile" data-test="storage-size-tile">
                 <div
-                  class="tile-content rounded-lg p-3 text-center border shadow-sm h-20 flex flex-col justify-between"
-                  :class="
-                    store.state.theme === 'dark'
-                      ? 'tile-content-dark border-gray-700'
-                      : 'tile-content-light border-gray-200'
-                  "
+                  class="tile-content rounded-default p-3 text-center border h-20 flex flex-col justify-between bg-surface-base border-border-default"
                 >
                   <div
                     class="tile-header flex justify-between items-start"
                   >
                     <div
-                      class="tile-title text-xs font-bold text-left"
-                      :class="
-                        store.state.theme === 'dark'
-                          ? 'text-gray-400'
-                          : 'text-gray-500'
-                      "
+                      class="tile-title text-xs font-bold text-left text-text-secondary"
                     >
                       {{ t("logStream.storageSize") }}
                     </div>
@@ -167,12 +129,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     </div>
                   </div>
                   <div
-                    class="tile-value text-lg flex items-end justify-start"
-                    :class="
-                      store.state.theme === 'dark'
-                        ? 'text-white'
-                        : 'text-gray-900'
-                    "
+                    class="tile-value text-lg flex items-end justify-start text-text-body"
                   >
                     {{ formatSizeFromMB(indexData.stats.storage_size) }}
                   </div>
@@ -185,23 +142,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 data-test="compressed-size-tile"
               >
                 <div
-                  class="tile-content rounded-lg p-3 text-center border shadow-sm h-20 flex flex-col justify-between"
-                  :class="
-                    store.state.theme === 'dark'
-                      ? 'tile-content-dark border-gray-700'
-                      : 'tile-content-light border-gray-200'
-                  "
+                  class="tile-content rounded-default p-3 text-center border h-20 flex flex-col justify-between bg-surface-base border-border-default"
                 >
                   <div
                     class="tile-header flex justify-between items-start"
                   >
                     <div
-                      class="tile-title text-xs font-bold text-left"
-                      :class="
-                        store.state.theme === 'dark'
-                          ? 'text-gray-400'
-                          : 'text-gray-500'
-                      "
+                      class="tile-title text-xs font-bold text-left text-text-secondary"
                     >
                       {{ t("logStream.compressedSize") }}
                     </div>
@@ -214,12 +161,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     </div>
                   </div>
                   <div
-                    class="tile-value text-lg flex items-end justify-start"
-                    :class="
-                      store.state.theme === 'dark'
-                        ? 'text-white'
-                        : 'text-gray-900'
-                    "
+                    class="tile-value text-lg flex items-end justify-start text-text-body"
                   >
                     {{ formatSizeFromMB(indexData.stats.compressed_size) }}
                   </div>
@@ -232,23 +174,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 data-test="index-size-tile"
               >
                 <div
-                  class="tile-content rounded-lg p-3 text-center border shadow-sm h-20 flex flex-col justify-between"
-                  :class="
-                    store.state.theme === 'dark'
-                      ? 'tile-content-dark border-gray-700'
-                      : 'tile-content-light border-gray-200'
-                  "
+                  class="tile-content rounded-default p-3 text-center border h-20 flex flex-col justify-between bg-surface-base border-border-default"
                 >
                   <div
                     class="tile-header flex justify-between items-start"
                   >
                     <div
-                      class="tile-title text-xs font-bold text-left"
-                      :class="
-                        store.state.theme === 'dark'
-                          ? 'text-gray-400'
-                          : 'text-gray-500'
-                      "
+                      class="tile-title text-xs font-bold text-left text-text-secondary"
                     >
                       {{ t("logStream.indexSize") }}
                     </div>
@@ -261,12 +193,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     </div>
                   </div>
                   <div
-                    class="tile-value text-lg flex items-end justify-start"
-                    :class="
-                      store.state.theme === 'dark'
-                        ? 'text-white'
-                        : 'text-gray-900'
-                    "
+                    class="tile-value text-lg flex items-end justify-start text-text-body"
                   >
                     {{ formatSizeFromMB(indexData.stats.index_size) }}
                   </div>
@@ -276,12 +203,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <div class="w-full flex flex-1 min-h-0 gap-2">
               <!--  left section(includes tabs and schema settings) -->
               <div
-                :class="[
-                  'w-[100%] h-full min-h-0 rounded-lg border shadow-sm p-2 flex flex-col overflow-hidden',
-                  store.state.theme === 'dark'
-                    ? 'bg-[#181A1B] border-gray-700'
-                    : 'bg-white border-gray-200',
-                ]"
+                class="w-full h-full min-h-0 rounded-default border p-2 flex flex-col overflow-hidden bg-surface-base border-border-default"
               >
                 <div>
                   <div class="flex justify-start">
@@ -335,12 +257,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   >
                     <div
                       v-if="indexData.defaultFts"
-                      style="font-weight: 400"
-                      class="mt-[12px]"
+                      class="mt-3 font-normal"
                     >
                       <label
-                        style="font-weight: 600"
-                        class="bg-[#f9f290] py-1 px-4 rounded border border-[#f5a623] text-[#865300]"
+                        class="bg-banner-warning-bg py-1 px-4 rounded-default border border-banner-warning-border text-banner-warning-text font-semibold"
                       >
                         {{ t("logStream.mapping") }} Default FTS keys used (no
                         custom keys set).</label
@@ -383,7 +303,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         <OIcon
                           name="info"
                           size="sm"
-                          style="color: #f5a623; cursor: pointer"
+                          class="text-status-warning-text cursor-pointer"
                         />
                         <OTooltip
                           side="right"
@@ -415,7 +335,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </div>
 
                   <div class="mb-3" v-if="isDialogOpen">
-                    <OCard class="add-fields-card">
+                    <OCard class="w-screen max-w-full flex flex-col">
                       <!-- Header Section -->
                       <OCardSection
                         class="p-0"
@@ -436,12 +356,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       </OCardSection>
                       <!-- Main Content (Scrollable if necessary) -->
                       <OCardSection
-                        class="p-0"
+                        class="p-0 flex-1 overflow-y-auto mb-0.5"
                         style="
-                          flex: 1;
-                          overflow-y: auto;
                           padding: 0px 16px 0px 16px;
-                          margin-bottom: 2px;
                         "
                       >
                         <OForm
@@ -464,12 +381,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
                   <!-- OTable fills the remaining height inside the schemaSettings flex column -->
                   <div
-                    :class="[
-                      'flex-1 min-h-0 flex flex-col overflow-hidden',
-                      store.state.theme === 'dark'
-                        ? 'dark-theme-table'
-                        : 'light-theme-table',
-                    ]"
+                    class="flex-1 min-h-0 flex flex-col overflow-hidden"
                   >
                     <OTable
                       data-test="schema-log-stream-field-mapping-table"
@@ -492,7 +404,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     >
                       <template #cell-name="{ row }">
                         <div class="flex items-center">
-                          <span class="field-name-text" :data-test="`schema-field-name-cell-${row.name}`">
+                          <span class="inline-block max-w-full truncate" :data-test="`schema-field-name-cell-${row.name}`">
                             {{ row.name }}
                           </span>
                           <span
@@ -502,9 +414,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                             <img
                               :src="quickModeIcon"
                               :alt="t('logStream.envQuickModeMsg')"
-                              class="w-[20px] h-[20px]"
+                              class="w-5 h-5"
                             />
-                            <OTooltip class="text-[12px] w-[200px]">
+                            <OTooltip class="text-xs w-50">
                               {{ t("logStream.envQuickModeMsg") }}
                             </OTooltip>
                           </span>
@@ -535,7 +447,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                             :options="indexTypeOptionsForRow(row)"
                             label-key="label"
                             value-key="value"
-                            class="min-h-[24px]! max-h-[24px]! h-[24px]! text-[0.813rem]"
+                            class="min-h-6! max-h-6! h-6! text-compact"
                             multiple
                             clearable
                             size="sm"
@@ -560,7 +472,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                           "
                         >
                           <span
-                            class="text-[#5960B2] cursor-pointer"
+                            class="text-brand-indigo cursor-pointer"
                             :data-test="`schema-field-${row.name}-pattern-action`"
                             @click="openPatternAssociationDialog(row.name)"
                           >
@@ -581,11 +493,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <div v-if="activeMainTab == 'configuration'">
                   <div class="w-full h-full overflow-y-auto p-4 flex flex-col gap-4">
                     <!-- Configuration Settings Card -->
-                    <div class="rounded-lg border border-[var(--o2-border-color)] divide-y divide-[var(--o2-border-color)]">
+                    <div class="rounded-default border border-card-glass-border divide-y divide-card-glass-border">
 
                       <!-- Data Retention -->
                       <div v-if="showDataRetention" class="flex flex-col gap-1 p-3">
-                        <label class="text-[0.8125rem] font-[500]" style="color: var(--o2-text-heading)">
+                        <label class="text-compact font-[500] text-text-heading">
                           Data Retention (days)
                         </label>
                         <OInput
@@ -593,20 +505,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                           v-model="dataRetentionDays"
                           type="number"
                           min="1"
-                          class="max-w-[220px]"
+                          class="max-w-55"
                           @update:model-value="markFormDirty"
                         />
                         <small v-if="dataRetentionDays > 0 && dataRetentionDays != ''">
                           Global retention is {{ store.state.zoConfig.data_retention_days }} days
                         </small>
-                        <small v-if="dataRetentionDays <= 0 || dataRetentionDays == ''" class="text-[var(--o2-status-error-text)]">
+                        <small v-if="dataRetentionDays <= 0 || dataRetentionDays == ''" class="text-status-error-text">
                           Retention period must be at least 1 day
                         </small>
                       </div>
 
                       <!-- Max Query Range -->
                       <div class="flex flex-col gap-1 p-3">
-                        <label class="text-[0.8125rem] font-[500]" style="color: var(--o2-text-heading)">
+                        <label class="text-compact font-[500] text-text-heading">
                           Max Query Range (hours)
                         </label>
                         <OInput
@@ -614,7 +526,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                           v-model="maxQueryRange"
                           type="number"
                           min="0"
-                          class="max-w-[220px]"
+                          class="max-w-55"
                           @update:model-value="markFormDirty"
                         />
                         <small>Maximum time range allowed for queries. Set 0 for unlimited range.</small>
@@ -622,7 +534,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
                       <!-- Flatten Level -->
                       <div class="flex flex-col gap-1 p-3">
-                        <label class="text-[0.8125rem] font-[500]" style="color: var(--o2-text-heading)">
+                        <label class="text-compact font-[500] text-text-heading">
                           {{ t("logStream.flattenLevel") }}
                         </label>
                         <OInput
@@ -630,14 +542,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                           v-model="flattenLevel"
                           type="number"
                           min="0"
-                          class="max-w-[220px]"
+                          class="max-w-55"
                           @update:model-value="markFormDirty"
                         />
                         <small>Global is {{ store.state.zoConfig.ingest_flatten_level || 3 }}</small>
                       </div>
 
                       <!-- Toggles -->
-                      <div class="flex items-center justify-between px-3 py-2.5 text-[13px]">
+                      <div class="flex items-center justify-between px-3 py-2.5 text-compact">
                         <span>Use Stream Stats for Partitioning</span>
                         <OSwitch
                           data-test="log-stream-use_approx-toggle-btn"
@@ -646,7 +558,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         />
                       </div>
 
-                      <div v-if="showStoreOriginalDataToggle" class="flex items-center justify-between px-3 py-2.5 text-[13px]">
+                      <div v-if="showStoreOriginalDataToggle" class="flex items-center justify-between px-3 py-2.5 text-compact">
                         <span>Store Original Data</span>
                         <OSwitch
                           data-test="log-stream-store-original-data-toggle-btn"
@@ -655,7 +567,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         />
                       </div>
 
-                      <div class="flex items-center justify-between px-3 py-2.5 text-[13px]">
+                      <div class="flex items-center justify-between px-3 py-2.5 text-compact">
                         <span>Enable Distinct Values</span>
                         <OSwitch
                           data-test="log-stream-enabled-distinct-values-toggle-btn"
@@ -673,10 +585,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   class="flex flex-col h-full min-h-0 overflow-hidden"
                 >
                   <div
-                    class="bg-[#f9f290] py-1 px-4 rounded border border-[#f5a623] text-[#865300] mt-2"
+                    class="bg-banner-warning-bg py-1 px-4 rounded-default border border-banner-warning-border text-banner-warning-text mt-2"
                     style="width: fit-content"
                   >
-                    <span style="font-weight: 600">
+                    <span class="font-semibold">
                       <OIcon name="info" class="mr-1" size="sm" />
 
                       Additional
@@ -718,11 +630,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         :show-global-filter="false"
                         :default-columns="false"
                         dense
-                        :class="
-                          store.state.theme == 'dark'
-                            ? 'o2-last-row-border-dark o2-schema-table-header-sticky-dark'
-                            : 'o2-last-row-border-light o2-schema-table-header-sticky-light'
-                        "
                         :style="{ height: '100%' }"
                       />
                     </div>
@@ -756,7 +663,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
                 </div>
                 <!-- floating footer for the table -->
-                <div class="floating-buttons flex-shrink-0 px-2 py-1">
+                <div class="sticky bottom-0 z-1 w-full mt-auto bg-card-glass-solid flex-shrink-0 px-2 py-1">
                   <div
                     v-if="indexData.schema.length > 0"
                     class="flex items-center justify-between"
@@ -927,6 +834,7 @@ import {
 } from "vue";
 import { useI18n } from "vue-i18n";
 import { useStore } from "vuex";
+import useTheme from "@/composables/useTheme";
 import {
   convertUnixToDateFormat as convertUnixToFormat,
   formatTimestamp,
@@ -1035,6 +943,7 @@ export default defineComponent({
     };
     const { t } = useI18n();
     const store = useStore();
+    const { isDark } = useTheme();
     const indexData: any = ref(defaultValue());
     const updateSettingsForm: any = ref(null);
     const isCloud = config.isCloud;
@@ -1061,9 +970,9 @@ export default defineComponent({
 
     const patternIdToApplyAtMap = new Map();
 
-    // The "Add Field(s)" rows are owned by a small TanStack form (StreamFieldInputs
-    // is form-only now). Writes go through the form (push/remove/reset); reads use
-    // the reactive `newSchemaFields` view below — single source of truth, no mirror.
+    // The "Add Field(s)" rows are owned by a small TanStack form. Writes go through
+    // the form (push/remove/reset); reads use the reactive `newSchemaFields` view
+    // below — single source of truth, no mirror.
     const newSchemaFieldsForm = useOForm<{ newSchemaFields: any[] }>({
       defaultValues: { newSchemaFields: [] },
       schema: makeSchemaFieldsSchema(t),
@@ -1084,10 +993,8 @@ export default defineComponent({
       (indexData.value.schema || []).map((f: any) => f.name).sort(),
     );
     const isDialogOpen = ref(false);
-    // The child (StreamFieldInputs) owns row deletion now and no longer emits a
-    // @remove event, so the parent can't run "close the dialog when the last row
-    // is deleted" inline. Observe the row count instead: whenever the rows drain
-    // to empty while the dialog is open, close it (restores main's behavior).
+    // Observe the row count: whenever the rows drain to empty while the dialog is
+    // open, close it.
     watch(
       () => newSchemaFields.value.length,
       (len) => {
@@ -2046,8 +1953,7 @@ export default defineComponent({
     // NOTE: adding/removing "Add Field(s)" rows is owned by the child
     // (StreamFieldInputs) via form.pushFieldValue / form.removeFieldValue. The
     // parent seeds the first row in openDialog and closes the dialog when the
-    // rows drain to empty via the watch above — so no add/remove handlers live
-    // here anymore.
+    // rows drain to empty via the watch above.
 
     const scrollToAddFields = () => {
       const el = document.getElementById("schema-add-fields-section");
@@ -2531,7 +2437,7 @@ export default defineComponent({
     };
     //this function is used to check if the option is present in the default env
     //if present then we will return true else false
-    //this is used to show the tooltip in the q-select for disabled options
+    //this is used to show the tooltip in the select for disabled options
     //why there are disabled
     const checkIfOptionPresentInDefaultEnv = (name, option) => {
       if (
@@ -2565,8 +2471,7 @@ export default defineComponent({
     };
 
     // OSelect doesn't have a max-values prop; enforce it client-side instead.
-    // Trims the selection to the last 2 values picked (matches old q-select
-    // :max-values="2" behaviour: silently caps at 2).
+    // Trims the selection to the last 2 values picked (silently caps at 2).
     const MAX_INDEX_TYPES = 2;
     const enforceMaxIndexTypes = (value: any) => {
       if (!Array.isArray(value)) return value;
@@ -2604,18 +2509,18 @@ export default defineComponent({
     };
 
     const quickModeIcon = computed(() => {
-      return store.state.theme === "dark"
+      return isDark.value
         ? getImageURL("images/common/quick_mode_light.svg")
         : getImageURL("images/common/quick_mode.svg");
     });
 
     const getConfigIcon = computed(() => {
-      return store.state.theme === "dark"
+      return isDark.value
         ? getImageURL("images/streams/config_light.svg")
         : getImageURL("images/streams/config.svg");
     });
     const getTimelineIcon = computed(() => {
-      return store.state.theme === "dark"
+      return isDark.value
         ? getImageURL("images/streams/timeline_light.svg")
         : getImageURL("images/streams/timeline.svg");
     });
@@ -2748,34 +2653,66 @@ export default defineComponent({
 });
 </script>
 
-<style>
-.indexDetailsContainer .o2-schema-table {
+<style scoped>
+/* keep(lib-override:otable): reaches into the OTable-rendered thead/tbody DOM
+   to tune the schema table's header/row sizing — not expressible as utilities
+   on this template. */
+.indexDetailsContainer :deep(.o2-schema-table) {
   border-radius: 0.5rem;
   position: relative;
-  border: 0.0625rem solid var(--o2-border-color);
+  border: 0.0625rem solid var(--color-card-glass-border);
 }
 
-.indexDetailsContainer .o2-schema-table thead tr {
+.indexDetailsContainer :deep(.o2-schema-table thead tr) {
   height: 2.5rem;
   background: var(--color-table-header-bg) !important;
 }
 
-.indexDetailsContainer .o2-schema-table thead tr th {
+.indexDetailsContainer :deep(.o2-schema-table thead tr th) {
   font-size: var(--text-xs);
-  height: 35px;
+  height: 2.1875rem;
 }
 
-.indexDetailsContainer .o2-schema-table .o2-schema-table tbody td:after {
+.indexDetailsContainer :deep(.o2-schema-table .o2-schema-table tbody td:after) {
   background: none !important;
 }
 
-.indexDetailsContainer .o2-schema-table tbody tr {
-  height: 15px;
+.indexDetailsContainer :deep(.o2-schema-table tbody tr) {
+  height: 0.9375rem;
 }
 
-.indexDetailsContainer .o2-schema-table tbody tr td {
-  font-size: 0.875rem;
-  height: 25px;
-  padding: 0px 5px;
+.indexDetailsContainer :deep(.o2-schema-table tbody tr td) {
+  font-size: var(--text-sm);
+  height: 1.5625rem;
+  padding: 0 0.3125rem;
+}
+
+/* !important is load-bearing: the `tbody tr td` rule above is more specific
+   and would otherwise win the padding-left. */
+.indexDetailsContainer :deep(th:first-child),
+.indexDetailsContainer :deep(td:first-child) {
+  padding-left: 0.5rem !important;
+}
+
+.indexDetailsContainer :deep(th:nth-child(5)),
+.indexDetailsContainer :deep(td:nth-child(5)) {
+  min-width: 15rem;
+  width: 15rem;
+  max-width: 15rem;
+}
+
+/* The !important here outranks the less-specific `thead tr th` / `tbody tr td`
+   rules above. */
+.o2-schema-table :deep(th),
+.o2-schema-table :deep(td) {
+  height: 0.875rem !important;
+  min-height: 0.875rem !important;
+  padding: 0.125rem 0.1875rem !important;
+}
+
+.o2-schema-table :deep(thead) {
+  position: sticky;
+  top: 0;
+  z-index: 1000;
 }
 </style>
diff --git a/web/src/components/pipeline/FlowChart.spec.ts b/web/src/components/pipeline/FlowChart.spec.ts
deleted file mode 100644
index a4110d7d10..0000000000
--- a/web/src/components/pipeline/FlowChart.spec.ts
+++ /dev/null
@@ -1,188 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { describe, expect, it, beforeEach, afterEach, vi } from "vitest";
-import { mount } from "@vue/test-utils";
-import i18n from "@/locales";
-
-
-vi.mock("@vue-flow/core", () => ({
-  VueFlow: {
-    template: '<div class="vue-flow-stub"><slot /></div>',
-    props: ["nodes", "edges", "modelValueNodes", "modelValueEdges"],
-  },
-  MarkerType: { ArrowClosed: "arrowclosed" },
-  Edge: {},
-}));
-
-// FlowChart imports CSS from @vue-flow/core — mock those too so Vite doesn't
-// try to process them in the test environment.
-vi.mock("@vue-flow/core/dist/style.css", () => ({}));
-vi.mock("@vue-flow/core/dist/theme-default.css", () => ({}));
-
-import FlowChart from "@/components/pipeline/FlowChart.vue";
-
-const globalConfig = {
-  plugins: [i18n],
-};
-
-async function mountComp() {
-  return mount(FlowChart, { global: globalConfig });
-}
-
-describe("FlowChart - rendering", () => {
-  let wrapper: any = null;
-
-  beforeEach(async () => {
-    wrapper = await mountComp();
-  });
-
-  afterEach(() => {
-    wrapper?.unmount();
-  });
-
-  it("mounts without errors", () => {
-    expect(wrapper.exists()).toBe(true);
-  });
-
-  it("renders the #graph-container div", () => {
-    expect(wrapper.find("#graph-container").exists()).toBe(true);
-  });
-
-  it("renders the VueFlow stub inside the container", () => {
-    expect(wrapper.find(".vue-flow-stub").exists()).toBe(true);
-  });
-});
-
-describe("FlowChart - initial nodes", () => {
-  let wrapper: any = null;
-
-  beforeEach(async () => {
-    wrapper = await mountComp();
-  });
-
-  afterEach(() => {
-    wrapper?.unmount();
-  });
-
-  it("has 4 initial nodes", () => {
-    const nodes = (wrapper.vm as any).nodes;
-    expect(nodes).toHaveLength(4);
-  });
-
-  it("node with id '1' has type 'input'", () => {
-    const nodes = (wrapper.vm as any).nodes;
-    const node1 = nodes.find((n: any) => n.id === "1");
-    expect(node1).toBeDefined();
-    expect(node1.type).toBe("input");
-  });
-
-  it("node with id '1' has label 'Node 1'", () => {
-    const nodes = (wrapper.vm as any).nodes;
-    const node1 = nodes.find((n: any) => n.id === "1");
-    expect(node1.label).toBe("Node 1");
-  });
-
-  it("node with id '2' has no explicit type", () => {
-    const nodes = (wrapper.vm as any).nodes;
-    const node2 = nodes.find((n: any) => n.id === "2");
-    expect(node2).toBeDefined();
-    expect(node2.type).toBeUndefined();
-  });
-
-  it("all four nodes have unique ids", () => {
-    const nodes = (wrapper.vm as any).nodes;
-    const ids = nodes.map((n: any) => n.id);
-    expect(new Set(ids).size).toBe(4);
-  });
-
-  it("node positions are defined as objects with x and y", () => {
-    const nodes = (wrapper.vm as any).nodes;
-    for (const node of nodes) {
-      expect(node.position).toBeDefined();
-      expect(typeof node.position.x).toBe("number");
-      expect(typeof node.position.y).toBe("number");
-    }
-  });
-});
-
-describe("FlowChart - initial edges", () => {
-  let wrapper: any = null;
-
-  beforeEach(async () => {
-    wrapper = await mountComp();
-  });
-
-  afterEach(() => {
-    wrapper?.unmount();
-  });
-
-  it("has 2 initial edges", () => {
-    const edges = (wrapper.vm as any).edges;
-    expect(edges).toHaveLength(2);
-  });
-
-  it("edge e1-2 connects source '1' to target '2'", () => {
-    const edges = (wrapper.vm as any).edges;
-    const e = edges.find((edge: any) => edge.id === "e1-2");
-    expect(e).toBeDefined();
-    expect(e.source).toBe("1");
-    expect(e.target).toBe("2");
-  });
-
-  it("edge e1-2 is animated", () => {
-    const edges = (wrapper.vm as any).edges;
-    const e = edges.find((edge: any) => edge.id === "e1-2");
-    expect(e.animated).toBe(true);
-  });
-
-  it("edge e1-3 is NOT animated (animated property is undefined)", () => {
-    const edges = (wrapper.vm as any).edges;
-    const e = edges.find((edge: any) => edge.id === "e1-3");
-    expect(e.animated).toBeUndefined();
-  });
-
-  it("edge e1-3 connects source '1' to target '3'", () => {
-    const edges = (wrapper.vm as any).edges;
-    const e = edges.find((edge: any) => edge.id === "e1-3");
-    expect(e.source).toBe("1");
-    expect(e.target).toBe("3");
-  });
-
-  it("both edges have a markerEnd with type 'arrowclosed'", () => {
-    const edges = (wrapper.vm as any).edges;
-    for (const edge of edges) {
-      expect(edge.markerEnd).toBeDefined();
-      expect(edge.markerEnd.type).toBe("arrowclosed");
-    }
-  });
-});
-
-describe("FlowChart - VueFlow stub props", () => {
-  let wrapper: any = null;
-
-  beforeEach(async () => {
-    wrapper = await mountComp();
-  });
-
-  afterEach(() => {
-    wrapper?.unmount();
-  });
-
-  it("VueFlow stub element is present in the rendered output", () => {
-    // The mock renders as <div class="vue-flow-stub">
-    expect(wrapper.find(".vue-flow-stub").exists()).toBe(true);
-  });
-});
diff --git a/web/src/components/pipeline/FlowChart.vue b/web/src/components/pipeline/FlowChart.vue
deleted file mode 100644
index d5dd54897a..0000000000
--- a/web/src/components/pipeline/FlowChart.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<!-- Flowchart.vue -->
-<script lang="ts" setup>
-import { ref } from "vue";
-import { VueFlow, Edge, MarkerType } from "@vue-flow/core";
-
-/* import the required styles */
-import "@vue-flow/core/dist/style.css";
-/* import the default theme (optional) */
-import "@vue-flow/core/dist/theme-default.css";
-
-const nodes = ref([
-  { id: "1", type: "input", label: "Node 1", position: { x: 250, y: 5 } },
-  { id: "2", label: "Node 2", position: { x: 100, y: 100 } },
-  { id: "3", label: "Node 3", position: { x: 400, y: 100 } },
-  { id: "4", label: "Node 4", position: { x: 400, y: 200 } },
-]);
-
-const edges = ref<Edge<any, any, string>[]>([
-  { 
-    id: "e1-2", 
-    source: "1", 
-    target: "2", 
-    animated: true, 
-    markerEnd: { type: MarkerType.ArrowClosed } // Adding arrow marker
-  },
-  { 
-    id: "e1-3", 
-    source: "1", 
-    target: "3",
-    markerEnd: { type: MarkerType.ArrowClosed  } // Adding arrow marker
-  },
-]);
-</script>
-
-<template>
-  <div id="graph-container" class="w-[1000px] h-[1000px]">
-    <VueFlow v-model:nodes="nodes" v-model:edges="edges"></VueFlow>
-  </div>
-</template>
diff --git a/web/src/components/pipeline/ImportPipeline.vue b/web/src/components/pipeline/ImportPipeline.vue
index f0ce0874f4..6a28209d19 100644
--- a/web/src/components/pipeline/ImportPipeline.vue
+++ b/web/src/components/pipeline/ImportPipeline.vue
@@ -1,4 +1,4 @@
-<!-- Copyright 2026 OpenObserve Inc.
+<!-- Copyright 2026 OpenObserve Inc.
 
 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU Affero General Public License as published by
@@ -31,11 +31,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <div class="w-full h-full flex flex-col border-l border-border-default" style="min-width: 400px;">
         <div
           v-if="pipelineErrorsToDisplay.length > 0"
-          class="text-center text-[0.9375rem] font-semibold text-text-primary py-3 shrink-0"
+          class="text-center text-sm font-semibold text-text-heading py-3 shrink-0"
         >
           Error Validations
         </div>
-        <div v-else class="text-center text-[0.9375rem] font-semibold text-text-primary py-3 shrink-0">Output Messages</div>
+        <div v-else class="text-center text-sm font-semibold text-text-heading py-3 shrink-0">Output Messages</div>
         <OSeparator class="mt-1 shrink-0" />
         <div class="error-report-container flex-1 min-h-0">
           <!-- Pipeline Errors Section -->
@@ -59,7 +59,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 >
                   <!-- pipeline name should not be empty -->
                   <span
-                    class="text-red"
+                    class="text-status-negative"
                     v-if="
                       typeof errorMessage === 'object' &&
                       errorMessage.field == 'pipeline_name'
@@ -86,7 +86,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </span>
                   <!-- source stream name should not be empty -->
                   <span
-                    class="text-red"
+                    class="text-status-negative"
                     v-else-if="
                       typeof errorMessage === 'object' &&
                       errorMessage.field == 'source_stream_name'
@@ -110,7 +110,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </span>
                   <!-- source stream type should be one of the valid stream types -->
                   <span
-                    class="text-red"
+                    class="text-status-negative"
                     v-else-if="
                       typeof errorMessage === 'object' &&
                       errorMessage.field == 'source_stream_type'
@@ -137,7 +137,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </span>
                   <!-- sql query should be same across all nodes as well try to match the query in the nodes -->
                   <span
-                    class="text-red"
+                    class="text-status-negative"
                     v-else-if="
                       typeof errorMessage === 'object' &&
                       errorMessage.field == 'sql_query_missing'
@@ -146,7 +146,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     {{ errorMessage.message }}
                     <div>
                       <query-editor
-                        style="width: 100%; height: 200px"
+                        class="w-full"
+                        style="height: 200px"
                         data-test="pipeline-import-sql-query-input"
                         :model-value="userSelectedSqlQuery[index] || ''"
                         :label="'SQL Query'"
@@ -161,7 +162,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </span>
                   <!-- destination stream type should be one of the valid stream types -->
                   <span
-                    class="text-red"
+                    class="text-status-negative"
                     v-else-if="
                       typeof errorMessage === 'object' &&
                       errorMessage.field == 'destination_stream_type'
@@ -188,7 +189,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </span>
                   <!-- destination stream name should not be empty -->
                   <span
-                    class="text-red"
+                    class="text-status-negative"
                     v-else-if="
                       typeof errorMessage === 'object' &&
                       errorMessage.field == 'org_id'
@@ -214,7 +215,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </span>
                   <!-- source stream type should be one of the valid stream types -->
                   <span
-                    class="text-red"
+                    class="text-status-negative"
                     v-else-if="
                       typeof errorMessage === 'object' &&
                       errorMessage.field.startsWith('function_name')
@@ -241,7 +242,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </span>
 
                   <span
-                    class="text-red"
+                    class="text-status-negative"
                     v-else-if="
                       typeof errorMessage === 'object' &&
                       errorMessage.field == 'remote_destination'
@@ -267,7 +268,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     </div>
                   </span>
                   <span
-                    class="text-red"
+                    class="text-status-negative"
                     v-else-if="
                       typeof errorMessage === 'object' &&
                       errorMessage.field == 'source_timezone'
@@ -315,17 +316,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :class="{
                   'py-1.25 text-sm font-bold': true,
                   'text-green': val.success,
-                  'text-red': !val.success,
+                  'text-status-negative': !val.success,
                 }"
+                class="whitespace-pre-wrap"
                 style="
-                  white-space: pre-wrap;
                   word-wrap: break-word;
                   overflow-wrap: break-word;
                 "
                 :data-test="`pipeline-import-creation-${index}-message`"
               >
                 <pre
-                  style="white-space: pre-wrap; word-break: break-word"
+                  class="whitespace-pre-wrap"
+                  style="word-break: break-word"
                   >{{ val.message }}</pre
                 >
               </div>
@@ -336,7 +338,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </template>
   </base-import>
 
-  <!-- Actions live in the pipeline shell's AppPageHeader (Functions.vue), next
+  <!-- Actions live in the pipeline shell's OPageHeader (Functions.vue), next
        to the "Pipelines › Import" breadcrumb — the shell owns the single header
        so BaseImport's built-in header is hidden (hide-header). -->
   <!-- defer is required: #o2-page-actions is created by Functions.vue (parent shell)
diff --git a/web/src/components/pipeline/NodeForm/AssociateFunction.schema.ts b/web/src/components/pipeline/NodeForm/AssociateFunction.schema.ts
index f645b388a7..bbb6aaf1f3 100644
--- a/web/src/components/pipeline/NodeForm/AssociateFunction.schema.ts
+++ b/web/src/components/pipeline/NodeForm/AssociateFunction.schema.ts
@@ -3,19 +3,17 @@
 // Validation schema for AssociateFunction.vue (the function-node drawer,
 // select-existing branch).
 //
-// Field ownership (R1-strict): `selectedFunction` (required) and
-// `afterFlattening` (optional switch) are form-owned. The `createNewFunction`
-// mode-toggle stays a bare UI control OUTSIDE the form (its true branch
-// delegates to the AddFunction child).
+// Field ownership: `selectedFunction` (required) and `afterFlattening` (optional
+// switch) are form-owned. The `createNewFunction` mode-toggle stays a bare UI
+// control OUTSIDE the form (its true branch delegates to the AddFunction child).
 //
 // The schema is built via a factory taking `t` (vue-i18n) plus GETTERS for the
 // cross-field context (`associatedFunctions` prop + `isUpdating`) so `superRefine`
 // reads their CURRENT values at validation time (the schema instance is created
-// once at mount) and all messages stay i18n-driven:
-//   • required → `min(1, t('pipeline.fieldRequired'))` (restored BEFORE-baseline rule).
-//   • uniqueness → `superRefine`: a not-yet-associated function unless editing
-//     (t('pipeline.functionAlreadyAssociated')), preserving the old `functionExists`
-//     behavior.
+// once at mount):
+//   • required → `min(1, t('pipeline.fieldRequired'))`.
+//   • uniqueness → `superRefine`: a function must not already be associated unless
+//     editing (t('pipeline.functionAlreadyAssociated')).
 
 import { z } from "zod";
 
diff --git a/web/src/components/pipeline/NodeForm/AssociateFunction.vue b/web/src/components/pipeline/NodeForm/AssociateFunction.vue
index 0dbe53dc9d..6913e988bd 100644
--- a/web/src/components/pipeline/NodeForm/AssociateFunction.vue
+++ b/web/src/components/pipeline/NodeForm/AssociateFunction.vue
@@ -21,6 +21,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     @update:open="handleDrawerClose"
     :title="t('pipeline.associateFunction')"
     :width="createNewFunction ? 97 : 30"
+    :bleed="createNewFunction"
     @keydown.stop
     :primaryButtonLabel="!createNewFunction ? t('alerts.save') : undefined"
     :secondaryButtonLabel="!createNewFunction ? t('alerts.cancel') : undefined"
@@ -32,8 +33,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   >
     <div
       data-test="add-function-node-routing-section"
-      class="flex flex-col h-full"
-      :class="store.state.theme === 'dark' ? 'bg-(--o2-bg-card-dark,#1a1a1a)' : 'bg-white'"
+      class="flex flex-col h-full bg-surface-base"
     >
 
 
@@ -48,9 +48,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <div
       v-else
       data-test="associate-function-routing-container"
-      class="rounded-lg w-full pt-3 pb-3 flex flex-col gap-4 flex-1 min-h-0"
+      class="rounded-default w-full flex flex-col gap-4 flex-1 min-h-0"
     >
-      <div class="flex items-center gap-3 px-(--spacing-dialog-header-px)">
+      <!-- In create mode the drawer body is `bleed` (0 inset) so the AddFunction
+           editor can fill edge-to-edge; re-inset just this toggle row to match the
+           header grid line. Select mode keeps the drawer's own 12px body inset. -->
+      <div class="flex items-center gap-3" :class="createNewFunction ? 'px-3 pt-3' : ''">
         <OSwitch
           data-test="create-function-toggle"
           :label="isUpdating ? 'Edit function' : 'Create new function'"
@@ -58,12 +61,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         />
         <div
           v-if="createNewFunction"
-          class="text-sm text-gray-600 dark:text-gray-300"
+          class="text-sm text-text-secondary"
         >
           ({{ t("alerts.newFunctionAssociationMsg") }})
         </div>
       </div>
-      <div class="flex flex-col gap-4" :class="[!createNewFunction ? 'px-3' : 'flex-1 min-h-0']">
+      <div class="flex flex-col gap-4" :class="[!createNewFunction ? '' : 'flex-1 min-h-0']">
         <!-- Select-existing branch — form-owned fields inside <OForm>. -->
         <OForm
           v-if="!createNewFunction"
@@ -93,16 +96,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             data-test="associate-function-definition-section"
             class="mt-4 mb-4"
           >
-            <OCard class="function-definition-card border border-[#e1e5e9] dark:border-[#2d3748] rounded-lg shadow-[0_2px_4px_rgba(0,0,0,0.05)] dark:shadow-[0_4px_12px_rgba(0,0,0,0.4)] overflow-hidden dark:bg-[#1a202c]">
-              <OCardSection role="header" class="function-definition-header bg-[linear-gradient(135deg,#f8fafc_0%,#f1f5f9_100%)] dark:bg-[linear-gradient(135deg,#2d3748_0%,#1a202c_100%)] border-b border-b-[#e2e8f0] dark:border-b-[#4a5568]">
-                <div class="text-base font-semibold text-[#2d3748] dark:text-white">
+            <OCard class="function-definition-card border border-border-default rounded-default shadow-[0_2px_4px_rgba(0,0,0,0.05)] dark:shadow-[0_4px_12px_rgba(0,0,0,0.4)] overflow-hidden bg-surface-base">
+              <OCardSection role="header" class="function-definition-header bg-[linear-gradient(135deg,#f8fafc_0%,#f1f5f9_100%)] dark:bg-[linear-gradient(135deg,#2d3748_0%,#1a202c_100%)] border-b border-b-border-default">
+                <div class="text-base font-semibold text-text-heading">
                   {{ t("function.function_definition") }}
                 </div>
               </OCardSection>
               <OSeparator />
               <OCardSection class="p-0 function-definition-content">
-                <div class="function-code-container bg-[#fafbfc] dark:bg-[#0d1117] dark:border dark:border-[#21262d] rounded-none max-w-[584px] max-h-[250px] overflow-y-auto relative">
-                  <pre class="function-code text-[#2d3748] dark:text-[#f7fafc] bg-transparent m-0 p-4 font-[JetBrains_Mono,Fira_Code,Monaco,Menlo,Ubuntu_Mono,monospace] text-[13px] leading-normal whitespace-pre-wrap break-words border-0 font-normal cursor-default select-text">{{
+                <div class="function-code-container bg-code-block-bg dark:border dark:border-border-default rounded-none max-w-146 max-h-62.5 overflow-y-auto relative">
+                  <pre class="function-code text-code-block-text bg-transparent m-0 p-4 font-mono text-compact leading-normal whitespace-pre-wrap break-words border-0 font-normal cursor-default select-text selection:bg-primary-100 dark:selection:bg-primary-600 dark:selection:text-text-inverse">{{
                     pipelineObj.functions[selectedFunction]?.function ||
                     "No definition available"
                   }}</pre>
@@ -119,19 +122,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             />
 
             <!-- Info note explaining RAF/RBF -->
-            <div class="bg-[#f9f290] text-[#2d3748] w-full rounded-md p-3 flex flex-col gap-2">
-              <div class="text-sm text-[#2d3748]">
+            <div class="bg-banner-warning-bg text-banner-warning-text w-full rounded-default p-3 flex flex-col gap-2">
+              <div class="text-sm text-banner-warning-text">
                 Function Execution Guidelines:
               </div>
-              <div class="flex flex-col gap-1 text-sm text-[#2d3748]">
+              <div class="flex flex-col gap-1 text-sm text-banner-warning-text">
                 <div class="flex items-start gap-2">
                   <OIcon
                     name="info"
                     size="sm"
-                    class="shrink-0 mt-0.5 text-amber-500"
+                    class="shrink-0 mt-0.5 text-status-warning-text"
                   />
                   <span>
-                    <span class="font-bold text-[#007bff]">RBF (Run Before Flattening):</span>
+                    <span class="font-bold text-text-link">RBF (Run Before Flattening):</span>
                     Function executes before data structure is flattened
                   </span>
                 </div>
@@ -139,10 +142,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   <OIcon
                     name="info"
                     size="sm"
-                    class="shrink-0 mt-0.5 text-amber-500"
+                    class="shrink-0 mt-0.5 text-status-warning-text"
                   />
                   <span>
-                    <span class="font-bold text-[#007bff]">RAF (Run After Flattening):</span>
+                    <span class="font-bold text-text-link">RAF (Run After Flattening):</span>
                     Function executes after data structure is flattened
                   </span>
                 </div>
@@ -427,66 +430,60 @@ const filterFunctions = (val: any, update: any) => {
 };
 </script>
 
-<style>
+<style scoped>
+/* keep(lib-override): AddFunction renders its own back/fullscreen/title chrome and name
+   input; this hides that chrome and stretches the input inside the pipeline drawer.
+   All of it is AddFunction-internal DOM, so it is not addressable via template utilities. */
 .pipeline-add-function :deep(.add-function-back-btn),
 .pipeline-add-function :deep(.add-function-fullscreen-btn),
 .pipeline-add-function :deep(.add-function-title) {
   display: none;
 }
 
-.function-code::selection {
-  background-color: #bee3f8;
-}
-
-/* Custom scrollbar */
-.function-code-container::-webkit-scrollbar {
-  width: 6px;
-}
-
-.function-code-container::-webkit-scrollbar-track {
-  background: #f7fafc;
-}
-
-.function-code-container::-webkit-scrollbar-thumb {
-  background: #cbd5e0;
-  border-radius: 3px;
-}
-
-.function-code-container::-webkit-scrollbar-thumb:hover {
-  background: #a0aec0;
-}
-
-.dark .function-code::selection {
-  background-color: #2b6cb0;
-  color: #ffffff;
-}
-
-.dark .function-code-container::-webkit-scrollbar {
-  width: 8px;
-}
-
-.dark .function-code-container::-webkit-scrollbar-track {
-  background: #0d1117;
-  border-radius: 4px;
-}
-
-.dark .function-code-container::-webkit-scrollbar-thumb {
-  background: #4a5568;
-  border-radius: 4px;
-  border: 1px solid #2d3748;
-}
-
-.dark .function-code-container::-webkit-scrollbar-thumb:hover {
-  background: #718096;
-}
-
-.pipeline-add-function .add-function-name-input {
+.pipeline-add-function :deep(.add-function-name-input) {
   width: 100%;
-  margin-left: 0px !important;
+  margin-left: 0 !important;
 }
 
-.pipeline-add-function .add-function-name-input label {
+.pipeline-add-function :deep(.add-function-name-input label) {
   width: 100%;
   padding-left: 0;
 }
+
+/* keep(scrollbar): ::-webkit-scrollbar pseudo-elements have no Tailwind utility equivalent. */
+.function-code-container::-webkit-scrollbar {
+  width: 0.375rem;
+}
+
+.function-code-container::-webkit-scrollbar-track {
+  background: var(--color-surface-subtle);
+}
+
+.function-code-container::-webkit-scrollbar-thumb {
+  background: var(--color-border-strong);
+  border-radius: 0.1875rem;
+}
+
+.function-code-container::-webkit-scrollbar-thumb:hover {
+  background: var(--color-text-secondary);
+}
+
+.dark .function-code-container::-webkit-scrollbar {
+  width: 0.5rem;
+}
+
+.dark .function-code-container::-webkit-scrollbar-track {
+  background: var(--color-surface-subtle);
+  border-radius: 0.25rem;
+}
+
+.dark .function-code-container::-webkit-scrollbar-thumb {
+  background: var(--color-border-strong);
+  border-radius: 0.25rem;
+  border: 1px solid var(--color-border-default);
+}
+
+.dark .function-code-container::-webkit-scrollbar-thumb:hover {
+  background: var(--color-text-secondary);
+}
 </style>
diff --git a/web/src/components/pipeline/NodeForm/Condition.schema.ts b/web/src/components/pipeline/NodeForm/Condition.schema.ts
index 1df016bbda..d8fd72b147 100644
--- a/web/src/components/pipeline/NodeForm/Condition.schema.ts
+++ b/web/src/components/pipeline/NodeForm/Condition.schema.ts
@@ -3,20 +3,16 @@
 // Validation schema for Condition.vue (the pipeline condition-node drawer).
 //
 // The drawer's only editable content is the composite FilterGroup child — it has
-// no OForm* equivalent, so its model (`conditionGroup`) is BRIDGED into the form
-// as the `conditions` field (watch → setFieldValue, the documented sanctioned
-// bridge) and validated here via `superRefine`. Built via a factory taking `t`
-// (vue-i18n) so every message stays i18n-driven:
+// no OForm* equivalent, so its model (`conditionGroup`) is bridged into the form
+// as the `conditions` field (watch → setFieldValue) and validated here via
+// `superRefine`. Built via a factory taking `t` (vue-i18n) so every message stays
+// i18n-driven:
 //   • at-least-one-condition — a non-empty condition (column + operator + value)
-//     OR a nested group (t('pipeline.atLeastOneCondition')). This replaces the
-//     old imperative `saveCondition()` toast gate (pattern → schema).
+//     OR a nested group (t('pipeline.atLeastOneCondition')).
 //   • complete-fields — once a condition is started, every leaf condition must be
 //     fully filled (column, operator AND value). FilterCondition's inline
 //     "Field is required!" hint is display-only and does NOT gate submit, so the
 //     value/column/operator requirement is enforced here at the form layer.
-//
-// (The audit also listed a `stream_name` required rule, but the live drawer
-// renders no stream input — there is nothing to validate — so it is omitted.)
 
 import { z } from "zod";
 
diff --git a/web/src/components/pipeline/NodeForm/Condition.vue b/web/src/components/pipeline/NodeForm/Condition.vue
index b6d68d4fb1..d033193091 100644
--- a/web/src/components/pipeline/NodeForm/Condition.vue
+++ b/web/src/components/pipeline/NodeForm/Condition.vue
@@ -40,7 +40,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         data-test="o-drawer-close-btn"
         @mousedown.prevent
         @click="openCancelDialog"
-        class="shrink-0 flex items-center justify-center h-7 w-7 rounded-md text-dialog-close-text hover:bg-dialog-close-hover-bg active:bg-dialog-close-active-bg transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dialog-focus-ring cursor-pointer"
+        class="shrink-0 flex items-center justify-center h-7 w-7 rounded-default text-dialog-close-text hover:bg-dialog-close-hover-bg active:bg-dialog-close-active-bg transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dialog-focus-ring cursor-pointer"
       >
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
           <line x1="18" y1="6" x2="6" y2="18" />
@@ -50,13 +50,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </template>
     <div
       data-test="add-condition-section"
-      class="stream-routing-section w-full min-h-full"
-      :class="store.state.theme === 'dark' ? 'bg-[var(--o2-bg-card-dark,#1a1a1a)]' : 'bg-white'"
+      class="stream-routing-section w-full min-h-full bg-surface-base"
     >
 
 
     <OForm id="condition-form" :form="form">
-    <div class="w-full rounded-lg px-3 stream-routing-container">
+    <div class="w-full rounded-default stream-routing-container">
       <div>
         <div
           class="showLabelOnTop font-bold text-h7"
@@ -75,7 +74,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :group="conditionGroup"
               :depth="0"
               name-prefix="conditions"
-              condition-input-width="w-[130px]"
+              condition-input-width="w-32.5"
               :allow-custom-columns="true"
               module="pipelines"
               @add-condition="(updatedGroup) => updateGroup(updatedGroup)"
@@ -83,7 +82,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               @remove-group="(groupId) => removeConditionGroup(groupId)"
               @input:update="(name, field) => onInputUpdate(name, field)"
             />
-            <div v-else class="p-3 text-gray-400">Loading conditions...</div>
+            <div v-else class="p-3 text-text-muted">Loading conditions...</div>
           </div>
           <!-- Schema error for the bridged FilterGroup model (no OForm* field to
                render it, so surface the form-level `conditions` error here). -->
@@ -95,48 +94,48 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             {{ conditionsError }}
           </div>
           <div
-            class="note-container bg-[#f9f290] text-[#2d3748] w-full rounded-md p-3 my-3 flex flex-col gap-2"
+            class="note-container bg-banner-warning-bg text-banner-warning-text w-full rounded-default p-3 my-3 flex flex-col gap-2"
             data-test="add-condition-note-container"
           >
             <div
-              class="text-sm text-gray-800"
+              class="text-sm text-banner-warning-text"
               data-test="add-condition-note-heading"
             >
               Condition value Guidelines:
             </div>
             <div
-              class="flex flex-col gap-1 text-sm text-gray-800"
+              class="flex flex-col gap-1 text-sm text-banner-warning-text"
               data-test="add-condition-note-info"
             >
               <div class="flex items-start gap-2">
-                <OIcon name="info" size="sm" class="shrink-0 mt-0.5 text-amber-500" />
+                <OIcon name="info" size="sm" class="shrink-0 mt-0.5 text-status-warning-text" />
                 <span>
                   To check for an empty value, use
-                  <span class="highlight font-bold text-[#007bff]">""</span>. Example:
-                  <span class="code font-mono py-[1px] px-[4px] rounded-[3px] bg-[rgba(0,0,0,0.06)] text-[#b30059]">app_name != ""</span>
+                  <span class="highlight font-bold text-text-link">""</span>. Example:
+                  <span class="code font-mono py-px px-1 rounded-default bg-code-bg text-code-text">app_name != ""</span>
                 </span>
               </div>
               <div class="flex items-start gap-2">
-                <OIcon name="info" size="sm" class="shrink-0 mt-0.5 text-amber-500" />
+                <OIcon name="info" size="sm" class="shrink-0 mt-0.5 text-status-warning-text" />
                 <span>
                   To check for an Null value, use
-                  <span class="highlight font-bold text-[#007bff]">null</span>. Example:
-                  <span class="code font-mono py-[1px] px-[4px] rounded-[3px] bg-[rgba(0,0,0,0.06)] text-[#b30059]">app_name != null</span>
+                  <span class="highlight font-bold text-text-link">null</span>. Example:
+                  <span class="code font-mono py-px px-1 rounded-default bg-code-bg text-code-text">app_name != null</span>
                 </span>
               </div>
               <div class="flex items-start gap-2">
-                <OIcon name="info" size="sm" class="shrink-0 mt-0.5 text-amber-500" />
+                <OIcon name="info" size="sm" class="shrink-0 mt-0.5 text-status-warning-text" />
                 <span>
                   To add a custom column, type column name and press
-                  <span class="highlight font-bold text-[#007bff]">Enter</span>.
+                  <span class="highlight font-bold text-text-link">Enter</span>.
                 </span>
               </div>
               <div class="flex items-start gap-2">
-                <OIcon name="warning" size="sm" class="shrink-0 mt-0.5 text-red-500" />
+                <OIcon name="warning" size="sm" class="shrink-0 mt-0.5 text-status-error-text" />
                 <span>If conditions are not met, the record will be dropped.</span>
               </div>
               <div class="flex items-start gap-2">
-                <OIcon name="warning" size="sm" class="shrink-0 mt-0.5 text-red-500" />
+                <OIcon name="warning" size="sm" class="shrink-0 mt-0.5 text-status-error-text" />
                 <span>If the record does not have the specified field, it will be dropped.</span>
               </div>
             </div>
@@ -484,8 +483,7 @@ watch(
   },
 );
 
-// Surface the form-level `conditions` error (no OForm* field renders it) — a
-// reactive view of the SAME form, no mirror.
+// Surface the form-level `conditions` error (no OForm* field renders it).
 const conditionsErrors = form.useStore(
   (s: any) => s.fieldMeta?.conditions?.errors ?? [],
 );
@@ -701,8 +699,7 @@ const openCancelDialog = () => {
 
 // @submit handler — OForm only calls it once the schema passes (at least one
 // condition via superRefine over the bridged `conditions` field), so the schema
-// gates the save (the old imperative hasValidConditions toast is gone). Reads
-// the live `conditionGroup` (the bridged source of truth).
+// gates the save. Reads the live `conditionGroup` (the bridged source of truth).
 const saveCondition = async () => {
   try {
     // V2: Send directly to backend (no transformation needed)
@@ -779,37 +776,42 @@ const deleteRoute = () => {
 
 </script>
 
-<style>
-/* Override FilterGroup styles for pipeline context */
-/* Force the root group box to span the full drawer width (FilterGroup defaults to w-fit) */
-.pipeline-filter-group-wrapper > .el-border {
+<style scoped>
+/* keep(lib-override): retarget the shared FilterGroup component's internal DOM
+   (.filter-group-box / .group-container / .group-border / .conditions-input and its
+   inline margin-left styling) for the pipeline drawer context — not addressable via
+   template utilities. */
+
+/* Force the root group box to span the full drawer width (FilterGroup defaults to w-fit).
+   Also drop its `mt-4`: as the first element in the drawer body it has no preceding
+   label to space from, and that margin collapses to the body's content edge, adding a
+   1rem gap on top of the drawer's own 0.75rem inset. Root box only (`>`) — nested groups
+   and alerts' FilterGroup keep their mt-4. */
+.pipeline-filter-group-wrapper > :deep(.filter-group-box) {
   width: 100% !important;
+  margin-top: 0 !important;
 }
 
-.pipeline-filter-group-wrapper .group-container {
+.pipeline-filter-group-wrapper :deep(.group-container) {
   white-space: normal !important;
   overflow-x: visible !important;
   max-width: 100%;
+  pointer-events: auto;
 }
 
 /* Reduce margins for nested groups in pipeline */
-.pipeline-filter-group-wrapper [style*="margin-left"] {
-  margin-left: 10px !important;
+.pipeline-filter-group-wrapper :deep([style*="margin-left"]) {
+  margin-left: 0.625rem !important;
 }
 
 /* Ensure conditions fit width */
-.pipeline-filter-group-wrapper .conditions-input {
-  min-width: 120px !important;
-  max-width: 200px;
+.pipeline-filter-group-wrapper :deep(.conditions-input) {
+  min-width: 7.5rem !important;
+  max-width: 12.5rem;
 }
 
 /* Ensure group borders don't overflow */
-.pipeline-filter-group-wrapper .group-border {
-  max-width: calc(100% - 20px);
-}
-
-/* Ensure FilterGroup container doesn't interfere with clicks */
-.pipeline-filter-group-wrapper .group-container {
-  pointer-events: auto;
+.pipeline-filter-group-wrapper :deep(.group-border) {
+  max-width: calc(100% - 1.25rem);
 }
 </style>
diff --git a/web/src/components/pipeline/NodeForm/CreateDestinationForm.schema.ts b/web/src/components/pipeline/NodeForm/CreateDestinationForm.schema.ts
index 3d580f6ed5..3f2d1f74f6 100644
--- a/web/src/components/pipeline/NodeForm/CreateDestinationForm.schema.ts
+++ b/web/src/components/pipeline/NodeForm/CreateDestinationForm.schema.ts
@@ -1,34 +1,14 @@
 // Copyright 2026 OpenObserve Inc.
 //
-// Validation schema for CreateDestinationForm.vue (the most complex form in the
-// codebase: a multi-step OStepper with a custom card-grid type picker and many
-// conditionally-shown fields). Built via a factory so messages stay i18n-driven
-// (pass useI18n's `t`).
+// Validation schema for CreateDestinationForm.vue, a multi-step OStepper with a
+// custom card-grid type picker and many conditionally-shown fields. Built via a
+// factory so messages stay i18n-driven (pass useI18n's `t`).
 //
-// Migration status (per the form-migration-playbook): every editable value the
-// form collects is now form-owned and validated by this schema —
-//   • `name`, `url`: genuinely user-typed → form-owned OForm fields whose rules
-//     live here as plain object-level Zod rules.
-//   • `skip_tls_verify`: form-owned OFormSwitch (boolean).
-//   • `metadata.*` (Splunk source/sourcetype/hostname, Datadog
-//     service/hostname/ddsource/ddtags): all nested under a single `metadata`
-//     object so every metadata input is form-owned. The Datadog `ddsource` /
-//     `ddtags` requireds are enforced in `superRefine`, keyed off the bridged
-//     `destination_type` discriminator.
-//   • `headers`: a dynamic array-field (`headers[i].key` / `headers[i].value`),
-//     each row form-owned (see the §2 array-field pattern in the playbook).
-//   • The auto-prefilled / conditionally-editable fields (url_endpoint/method/
-//     output_format/esbulk_index/separator/org/stream) are also form-owned OForm
-//     fields; the component keeps them in sync when destination_type changes via
-//     direct `form.setFieldValue(...)` calls — there is NO `formData` mirror.
-//     Their conditional rules live here in `superRefine`.
-//   • `destination_type` is NOT an <input> — it is a custom card grid. The card
-//     @click writes it with a DIRECT `form.setFieldValue("destination_type", …)`
-//     and the template reads it back via `form.useStore`, so `superRefine` can
-//     branch on it (no watch, no mirror — the Rule-③ headless owner pattern).
+// `destination_type` is not an <input> — it is a custom card grid whose @click
+// writes it via form.setFieldValue; superRefine branches on it to enforce the
+// conditional requirements of the entangled prefilled fields.
 //
-// Validation TIMING is owned by OForm (submit-then-change via revalidateLogic);
-// this file only describes WHAT is valid.
+// Validation TIMING is owned by OForm; this file only describes WHAT is valid.
 
 import { z } from "zod";
 import { isValidResourceName } from "@/utils/zincutils";
@@ -43,7 +23,7 @@ export const headerRowSchema = z.object({
 export const makeDestinationSchema = (t: (_key: string) => string) =>
   z
     .object({
-      // ── Form-owned, genuinely user-typed fields ──────────────────────────
+      // ── User-typed fields ────────────────────────────────────────────────
       name: z
         .string()
         .min(1, t("common.nameRequired"))
@@ -59,15 +39,13 @@ export const makeDestinationSchema = (t: (_key: string) => string) =>
           message: t("pipeline.urlTrailingSlash"),
         }),
 
-      // ── Form-owned toggle ────────────────────────────────────────────────
       skip_tls_verify: z.boolean().optional().default(false),
 
-      // ── Form-owned dynamic Headers rows ──────────────────────────────────
+      // ── Dynamic Headers rows ─────────────────────────────────────────────
       headers: z.array(headerRowSchema).default([]),
 
-      // ── Form-owned metadata (all Splunk + Datadog metadata inputs nest
-      //    here). Optional at the object level; the Datadog conditional
-      //    requireds are enforced in `superRefine` below. ───────────────────
+      // ── Splunk + Datadog metadata inputs. Optional at the object level; the
+      //    Datadog conditional requireds are enforced in `superRefine` below. ─
       metadata: z
         .object({
           source: z.string().optional(),
@@ -79,10 +57,9 @@ export const makeDestinationSchema = (t: (_key: string) => string) =>
         })
         .optional(),
 
-      // ── Discriminator (written from the card grid via form.setFieldValue) +
-      //    the auto-prefilled entangled fields. Kept loose at the object level;
-      //    the real conditional requirements are enforced in `superRefine` below
-      //    so they only apply for the relevant destination_type / output_format. ─
+      // ── Discriminator + the auto-prefilled entangled fields. Kept loose at
+      //    the object level; the conditional requirements are enforced in
+      //    `superRefine` below, per destination_type / output_format. ─────────
       destination_type: z.string().default("openobserve"),
       url_endpoint: z.string().optional().default(""),
       method: z.string().optional().default("post"),
@@ -159,7 +136,7 @@ export const makeDestinationSchema = (t: (_key: string) => string) =>
 
       // separator required when the StringSeparated output format is chosen.
       // Note: a single space IS a valid separator, so check for "" specifically
-      // (do NOT trim) — mirrors the old separator :validators rule.
+      // (do NOT trim).
       if (
         val.output_format === "stringseparated" &&
         (val.separator === null ||
diff --git a/web/src/components/pipeline/NodeForm/CreateDestinationForm.spec.ts b/web/src/components/pipeline/NodeForm/CreateDestinationForm.spec.ts
index 146e14f26b..d6d95db687 100644
--- a/web/src/components/pipeline/NodeForm/CreateDestinationForm.spec.ts
+++ b/web/src/components/pipeline/NodeForm/CreateDestinationForm.spec.ts
@@ -78,15 +78,7 @@ describe("CreateDestinationForm", () => {
       global: {
         plugins: [store, i18n],
         stubs: {
-          "q-stepper": false,
-          "q-step": false,
-          "q-input": false,
-          "q-select": false,
-          "q-btn": false,
           "OIcon": false,
-          "q-card": false,
-          "q-card-section": false,
-          "q-toggle": false,
         },
       },
     });
diff --git a/web/src/components/pipeline/NodeForm/CreateDestinationForm.vue b/web/src/components/pipeline/NodeForm/CreateDestinationForm.vue
index 5f9e063fa6..7c12fad8fd 100644
--- a/web/src/components/pipeline/NodeForm/CreateDestinationForm.vue
+++ b/web/src/components/pipeline/NodeForm/CreateDestinationForm.vue
@@ -41,21 +41,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :done="step > 1"
           :navigable="step > 1"
         >
-          <div class="text-sm font-medium mb-3" style="font-weight: 500">
-            Select Destination Type <span class="text-red">*</span>
+          <div class="text-sm font-medium mb-3">
+            Select Destination Type <span class="text-status-error-text">*</span>
           </div>
           <div class="grid grid-cols-[repeat(auto-fill,minmax(140px,1fr))] gap-3 mb-4">
             <div
               v-for="destType in destinationTypes"
               :key="destType.value"
               :data-test="`destination-type-card-${destType.value}`"
-              class="destination-type-card relative flex flex-col items-center justify-center py-[20px] px-3 border-2 rounded-xl cursor-pointer [transition:all_0.3s_ease] min-h-[120px] hover:-translate-y-0.5"
-              :class="[
-                { selected: destinationType === destType.value },
-                store.state.theme === 'dark'
-                  ? 'border-[#424242] bg-[#1e1e1e] hover:border-[#5d9cec] hover:shadow-[0_4px_12px_rgba(93,156,236,0.2)]'
-                  : 'border-[var(--o2-border)] bg-white hover:border-[var(--o2-border-color)] hover:shadow-[0_4px_12px_rgba(25,118,210,0.15)]'
-              ]"
+              class="destination-type-card group relative flex flex-col items-center justify-center py-5 px-3 border-2 rounded-default cursor-pointer [transition:all_0.3s_ease] min-h-30 hover:-translate-y-0.5 hover:border-card-glass-border hover:shadow-[0_0.25rem_0.75rem_color-mix(in_srgb,var(--color-status-info-text)_15%,transparent)]"
+              :class="destinationType === destType.value
+                ? 'selected border-card-glass-border bg-status-info-bg shadow-[0_0.25rem_1rem_color-mix(in_srgb,var(--color-status-info-text)_20%,transparent)]'
+                : 'border-border-default bg-surface-base'"
               @click="form.setFieldValue('destination_type', destType.value)"
             >
               <img
@@ -68,12 +65,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 v-else
                 :name="destType.icon"
                 size="lg"
-                class="card-icon mb-2 text-[#666] [transition:color_0.3s_ease]"
+                class="card-icon mb-2 text-icon-color [transition:color_0.3s_ease] group-[.selected]:text-card-glass-border"
               />
-              <div class="card-label text-[13px] font-medium text-center leading-[1.3] mt-1 text-[var(--o2-text-primary)]">{{ destType.label }}</div>
+              <div class="card-label text-compact font-medium text-center leading-[1.3] mt-1 text-text-body group-[.selected]:text-text-body">{{ destType.label }}</div>
               <div
                 v-if="destinationType === destType.value"
-                class="absolute top-[0.375rem] right-[0.375rem] w-5 h-5 rounded-full overflow-hidden bg-[var(--o2-positive)] text-white flex items-center justify-center z-[1]"
+                class="absolute top-1.5 right-1.5 w-5 h-5 rounded-full overflow-hidden bg-status-positive text-text-inverse flex items-center justify-center z-[1]"
               >
                 <!-- eslint-disable-next-line vue/max-attributes-per-line -->
                 <OIcon name="check" size="xs" />
@@ -90,14 +87,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :done="step > 2"
           :navigable="step > 2"
         >
-          <div class="text-sm font-medium mb-4" style="font-weight: 500">
+          <div class="text-sm font-medium mb-4">
             Connection Details
           </div>
 
           <div class="flex flex-col gap-4">
             <!-- Name is the destination's identifier — it can't be changed once
-                 created, so lock it in edit mode (parity with the pre-migration
-                 AddDestination form, which rendered it readonly + disabled). -->
+                 created, so lock it in edit mode. -->
             <OFormInput
               data-test="add-destination-name-input"
               name="name"
@@ -206,7 +202,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
           <!-- Destination-specific Metadata Section -->
           <div v-if="showMetadataFields" class="flex flex-col gap-4 mt-4">
-            <div class="w-full text-[14px] font-bold text-(--o2-input-label-text-color)">
+            <div class="w-full text-sm font-bold text-input-label">
               Metadata Configuration
             </div>
 
@@ -284,7 +280,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </div>
 
           <div class="flex flex-col gap-1 mt-4">
-            <div class="o-input-label leading-tight flex items-center">
+            <div class="o-input-label text-compact font-medium leading-tight text-input-label-text flex items-center">
               Headers
             </div>
             <div class="flex flex-col gap-2">
@@ -342,7 +338,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
           <!-- Connection Notes Card -->
           <OCard
-            class="connection-notes-card rounded-lg border border-[#e3f2fd] mb-6 mt-4 bg-(--color-banner-info-bg)!"
+            class="connection-notes-card rounded-default border border-banner-info-border mb-6 mt-4 bg-banner-info-bg!"
           >
             <OCardSection role="body">
               <div class="flex items-center mb-2">
@@ -367,11 +363,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </ol>
                 <div
                   v-if="connectionNotes.example"
-                  class="mt-2 p-2 rounded-md text-[13px]"
-                  :class="store.state.theme === 'dark' ? 'bg-gray-600' : 'bg-white'"
+                  class="mt-2 p-2 rounded-default text-compact bg-surface-base"
                 >
                   <strong>Example:</strong>
-                  <code class="ml-1 bg-transparent p-0 font-[Monaco,Menlo,'Ubuntu_Mono',monospace] text-[#1976d2]">{{ connectionNotes.example }}</code>
+                  <code class="ml-1 bg-transparent p-0 font-mono text-text-link">{{ connectionNotes.example }}</code>
                 </div>
               </div>
             </OCardSection>
@@ -469,7 +464,6 @@ const store = useStore();
 const { t } = useI18n();
 
 // Co-located Zod schema (factory keeps the required message i18n-driven).
-// Named after the form per the playbook house style.
 const destinationSchema = makeDestinationSchema(t);
 
 const isEditMode = computed(() => !!props.destination);
@@ -535,7 +529,7 @@ const step = ref(1);
 
 // A single Headers row. Matches the schema's `headerRowSchema` ({ key, value }).
 // No `uuid` — the dynamic array-field keys rows by index and add/remove operate
-// on the form's `headers` array by index (playbook §2).
+// on the form's `headers` array by index.
 type HeaderRow = { key: string; value: string };
 
 // Helper function to get default headers for each destination type
@@ -601,7 +595,7 @@ const endpointForType = (type: string): string => {
   }
 };
 
-// ── Rule ③ OWNER pattern: single source of truth = the TanStack form ──────────
+// ── OWNER pattern: single source of truth = the TanStack form ─────────────────
 // This component OWNS <OForm> and drives all conditional rendering (the
 // destination-type card grid, the per-type/per-output_format v-ifs) off the
 // form's own state. It creates the form here with useOForm, reads it reactively
@@ -668,20 +662,17 @@ const apiHeaders = form.useStore(
   (s: any) => (s.values.headers ?? []) as HeaderRow[],
 );
 
-// ── Preserved cross-field side effect: defaulting on a REAL destination_type
-//    change ──────────────────────────────────────────────────────────────────
-// What the old destination_type watch did (set method/output_format/esbulk_index
-// /url_endpoint + reset headers), now reading + writing the SAME form. Guard
+// ── Cross-field side effect: defaulting on a REAL destination_type change ──────
+// Sets method/output_format/esbulk_index/url_endpoint + resets headers. Guard
 // `prev !== undefined` so the initial seed does NOT clobber edit-prefill, and
-// skip in edit mode (the old watch did the same). `{ flush: "sync" }` matches the
-// old store-subscription timing so the cross-field resets land before any
-// subsequent same-tick write (both Stream and StreamSelection needed it).
+// skip in edit mode. `{ flush: "sync" }` so the cross-field resets land before
+// any subsequent same-tick write.
 watch(
   form.useStore((s: any) => s.values.destination_type),
   (newType, prev) => {
     if (prev === undefined || newType === prev) return;
-    // Skip while seeding an edit record (prefill) or in edit mode (the old watch
-    // also skipped edit mode) — the reset already carries the correct values.
+    // Skip while seeding an edit record (prefill) or in edit mode — the reset
+    // already carries the correct values.
     if (isPrefilling || isEditMode.value) return;
 
     if (newType !== "custom") {
@@ -736,9 +727,8 @@ watch(
   { flush: "sync" },
 );
 
-// Function to populate the form when editing an existing destination. Builds the
-// full edit record and seeds it onto the form via `form.reset(record)` — NOT a
-// per-field mirror loop (Rule ③).
+// Populate the form when editing an existing destination. Builds the full edit
+// record and seeds it onto the form via `form.reset(record)`.
 const populateFormForEdit = (destination: any) => {
   const record: DestinationForm = {
     name: destination.name || "",
@@ -1156,8 +1146,7 @@ const createDestination = (value?: DestinationForm) => {
     // `template` is an alert-destination-model field this pipeline form never
     // edits (there is no template input). Round-trip the existing value from the
     // edit record so editing a destination that carries a template does not wipe
-    // it — exact parity with the pre-migration payload (`destination.template ||
-    // ""`). In create mode `props.destination` is undefined → "".
+    // it. In create mode `props.destination` is undefined → "".
     template: props.destination?.template || "",
     headers: headers,
     name: name,
@@ -1258,7 +1247,7 @@ const resetForm = () => {
 
 // Expose functions for testing. `form` is the single source of truth — tests
 // read field values via `form.state.values` and set them via
-// `form.setFieldValue` (there is NO `formData` mirror anymore).
+// `form.setFieldValue`.
 defineExpose({
   getUUID,
   createDestination,
@@ -1287,33 +1276,3 @@ defineExpose({
   formUrl,
 });
 </script>
-
-<style>
-.destination-type-card.selected {
-  border-color: var(--o2-border-color);
-  background: linear-gradient(135deg, #e3f2fd 0%, #ffffff 100%);
-  box-shadow: 0 4px 16px rgba(25, 118, 210, 0.2);
-}
-
-.destination-type-card.selected .card-icon {
-  color: var(--o2-border-color);
-}
-
-.destination-type-card.selected .card-label {
-  color: #333333;
-}
-
-.dark .destination-type-card.selected {
-  border-color: #5d9cec;
-  background: linear-gradient(135deg, #1a3a52 0%, #1e1e1e 100%);
-  box-shadow: 0 4px 16px rgba(93, 156, 236, 0.25);
-}
-
-.dark .destination-type-card.selected .card-icon {
-  color: #5d9cec;
-}
-
-.dark .destination-type-card.selected .card-label {
-  color: #ffffff;
-}
-</style>
diff --git a/web/src/components/pipeline/NodeForm/ExternalDestination.schema.ts b/web/src/components/pipeline/NodeForm/ExternalDestination.schema.ts
index 1377b3df5e..ab41e8bc93 100644
--- a/web/src/components/pipeline/NodeForm/ExternalDestination.schema.ts
+++ b/web/src/components/pipeline/NodeForm/ExternalDestination.schema.ts
@@ -3,14 +3,11 @@
 // Validation schema for ExternalDestination.vue (the remote_stream output-node
 // drawer, select-existing branch).
 //
-// Field ownership (R1-strict): `selectedDestination` is the only editable
-// control on the select-existing branch and is required. This replaces the old
-// imperative `@click:primary` toast guard ("Please select External destination
-// from the list") with schema validation + submit gating (R3/R4).
+// `selectedDestination` is the only editable control on the select-existing
+// branch and is required.
 //
-// `createNewDestination` stays a bare UI mode-toggle OUTSIDE the form (it swaps
-// the select-existing form for the already-migrated CreateDestinationForm), so
-// it is not a field.
+// `createNewDestination` is a bare UI mode-toggle OUTSIDE the form (it swaps
+// the select-existing form for CreateDestinationForm), so it is not a field.
 
 import { z } from "zod";
 
diff --git a/web/src/components/pipeline/NodeForm/ExternalDestination.vue b/web/src/components/pipeline/NodeForm/ExternalDestination.vue
index 56aa3ceec7..e4066c1c8a 100644
--- a/web/src/components/pipeline/NodeForm/ExternalDestination.vue
+++ b/web/src/components/pipeline/NodeForm/ExternalDestination.vue
@@ -30,7 +30,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     @click:secondary="handleCancel"
     @click:neutral="openDeleteDialog"
   >
-    <div class="w-full pt-3 pb-3 px-3 flex flex-col gap-4">
+    <div class="w-full flex flex-col gap-4">
       <!-- Mode toggle — stays a bare UI control OUTSIDE the form: it swaps the
            select-existing form for the CreateDestinationForm create child. -->
       <OSwitch
diff --git a/web/src/components/pipeline/NodeForm/LlmEvaluation.schema.ts b/web/src/components/pipeline/NodeForm/LlmEvaluation.schema.ts
deleted file mode 100644
index 7e64d3aa75..0000000000
--- a/web/src/components/pipeline/NodeForm/LlmEvaluation.schema.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// Validation schema for LlmEvaluation.vue (the `llm_evaluation` pipeline-node
-// drawer). Built via a factory so the required message stays i18n-driven
-// (pass useI18n's `t`).
-//
-// This is an Options-API SFC (`<script lang="ts">` + `setup()`), so BOTH the
-// schema and the defaults MUST be returned from `setup()` — a module-level
-// import is out of the template's scope, so `:schema` would silently resolve to
-// `undefined` and OForm would never validate (foundation checklist §5.6).
-//
-// Field ownership (every editable control inside <OForm> is form-owned, R1-strict):
-//   • nodeName       — required (trim + min 1); restores the BEFORE-baseline
-//                      `!!v || nameRequired` rule.
-//   • spanIdentifier — optional OFormSelect (LLM span identifier).
-//   • template       — optional/nullable OFormSelect (evaluation template id).
-//   • enableSampling — optional OFormSwitch.
-//   • samplingRate   — optional OFormSlider (0..1).
-//
-// Validation TIMING is owned by OForm (submit-then-change); this file only
-// describes WHAT is valid.
-
-import { z } from "zod";
-
-export const makeLlmEvaluationSchema = (t: (_key: string) => string) =>
-  z.object({
-    nodeName: z.string().trim().min(1, t("common.nameRequired")),
-    spanIdentifier: z.string().optional(),
-    template: z.string().nullable().optional(),
-    enableSampling: z.boolean().optional(),
-    samplingRate: z.number().min(0).max(1).optional(),
-  });
-
-export type LlmEvaluationForm = z.infer<
-  ReturnType<typeof makeLlmEvaluationSchema>
->;
diff --git a/web/src/components/pipeline/NodeForm/LlmEvaluation.spec.ts b/web/src/components/pipeline/NodeForm/LlmEvaluation.spec.ts
deleted file mode 100644
index 35af3f5074..0000000000
--- a/web/src/components/pipeline/NodeForm/LlmEvaluation.spec.ts
+++ /dev/null
@@ -1,543 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { mount, flushPromises, VueWrapper } from "@vue/test-utils";
-import { nextTick } from "vue";
-import i18n from "@/locales";
-import store from "@/test/unit/helpers/store";
-
-
-vi.mock("vue-router", async () => {
-  const actual = await vi.importActual("vue-router");
-  return {
-    ...actual,
-    useRouter: () => ({ push: vi.fn(), replace: vi.fn(), back: vi.fn() }),
-    useRoute: () => ({ params: {}, query: {} }),
-  };
-});
-
-const mockAddNode = vi.fn();
-const mockDeletePipelineNode = vi.fn();
-
-vi.mock("@/plugins/pipelines/useDnD", () => ({
-  default: vi.fn(() => ({
-    pipelineObj: {
-      isEditNode: false,
-      currentSelectedNodeID: "node-1",
-      currentSelectedNodeData: {
-        data: {
-          name: "",
-          llm_span_identifier: "gen_ai_system",
-          sampling_rate: 0.01,
-        },
-      },
-      currentSelectedPipeline: {
-        nodes: [
-          {
-            id: "input-1",
-            io_type: "input",
-            data: {
-              node_type: "stream",
-              stream_name: "test-stream",
-              stream_type: "logs",
-            },
-          },
-        ],
-      },
-      userSelectedNode: {},
-      userClickedNode: {},
-    },
-    addNode: mockAddNode,
-    deletePipelineNode: mockDeletePipelineNode,
-  })),
-}));
-
-const mockGetStream = vi.fn().mockResolvedValue({
-  schema: [{ name: "field1" }, { name: "field2" }, { name: "gen_ai_system" }],
-});
-
-vi.mock("@/composables/useStreams", () => ({
-  default: () => ({
-    getStream: mockGetStream,
-  }),
-}));
-
-import LlmEvaluation from "./LlmEvaluation.vue";
-
-// ODrawer is stubbed to a slot-renderer so the REAL <OForm> mounts inside it and
-// the schema actually runs (the playbook requires at least one real-OForm test).
-// The form-id bridge wires the footer Save to submit; in tests we drive the
-// form's own handleSubmit() so the schema → @submit → save chain is awaited
-// deterministically.
-const ODrawerStub = {
-  name: "ODrawer",
-  props: [
-    "open", "size", "showClose", "title", "width", "persistent", "formId",
-    "primaryButtonLabel", "secondaryButtonLabel", "neutralButtonLabel",
-  ],
-  emits: ["update:open", "click:secondary", "click:neutral"],
-  template: `<div class="o-drawer-stub">
-    <slot />
-    <button v-if="neutralButtonLabel" data-test="o-drawer-neutral-btn" @click="$emit('click:neutral')">{{ neutralButtonLabel }}</button>
-    <button v-if="secondaryButtonLabel" data-test="o-drawer-secondary-btn" @click="$emit('click:secondary')">{{ secondaryButtonLabel }}</button>
-    <button v-if="primaryButtonLabel" data-test="o-drawer-primary-btn" type="submit" form="llm-evaluation-form">{{ primaryButtonLabel }}</button>
-  </div>`,
-};
-
-function createWrapper(overrides: Record<string, any> = {}): VueWrapper<any> {
-  return mount(LlmEvaluation, {
-    props: { open: true },
-    global: {
-      plugins: [i18n, store],
-      stubs: {
-        ODrawer: ODrawerStub,
-        ConfirmDialog: {
-          template: '<div data-test="confirm-dialog-stub"></div>',
-          props: ["modelValue", "title", "message"],
-          emits: ["update:ok", "update:cancel", "update:modelValue"],
-        },
-      },
-      ...overrides,
-    },
-  });
-}
-
-// Drive the real form's submit so the schema runs + the @submit handler is
-// awaited deterministically.
-const submitForm = async (w: VueWrapper<any>) => {
-  await (w.vm as any).form.handleSubmit();
-  await flushPromises();
-};
-const setField = (w: VueWrapper<any>, name: string, value: unknown) =>
-  (w.vm as any).form.setFieldValue(name, value);
-const formValues = (w: VueWrapper<any>) =>
-  (w.vm as any).form.state.values;
-
-describe("LlmEvaluation - rendering", () => {
-  let wrapper: VueWrapper<any>;
-
-  beforeEach(async () => {
-    vi.clearAllMocks();
-    wrapper = createWrapper();
-    await flushPromises();
-  });
-
-  afterEach(() => {
-    wrapper.unmount();
-  });
-
-  it("mounts without errors", () => {
-    expect(wrapper.exists()).toBe(true);
-  });
-
-  it("renders data-test='llm-evaluation-node-section'", () => {
-    expect(
-      wrapper.find('[data-test="llm-evaluation-node-section"]').exists()
-    ).toBe(true);
-  });
-
-  it("renders data-test='llm-evaluation-node-name-input'", () => {
-    expect(
-      wrapper.find('[data-test="llm-evaluation-node-name-input"]').exists()
-    ).toBe(true);
-  });
-
-  it("renders data-test='llm-evaluation-span-identifier-select'", () => {
-    expect(
-      wrapper
-        .find('[data-test="llm-evaluation-span-identifier-select"]')
-        .exists()
-    ).toBe(true);
-  });
-
-  it("renders data-test='llm-evaluation-enable-sampling-toggle'", () => {
-    expect(
-      wrapper
-        .find('[data-test="llm-evaluation-enable-sampling-toggle"]')
-        .exists()
-    ).toBe(true);
-  });
-
-  it("renders the save button", () => {
-    expect(
-      wrapper.find('[data-test="o-drawer-primary-btn"]').exists()
-    ).toBe(true);
-  });
-
-  it("renders the cancel button", () => {
-    expect(
-      wrapper.find('[data-test="o-drawer-secondary-btn"]').exists()
-    ).toBe(true);
-  });
-});
-
-describe("LlmEvaluation - initial state", () => {
-  let wrapper: VueWrapper<any>;
-
-  beforeEach(async () => {
-    vi.clearAllMocks();
-    wrapper = createWrapper();
-    await flushPromises();
-  });
-
-  afterEach(() => {
-    wrapper.unmount();
-  });
-
-  it("nodeName defaults to 'evaluate' when not in edit mode", () => {
-    expect(formValues(wrapper).nodeName).toBe("evaluate");
-  });
-
-  it("enableSampling is true by default", () => {
-    expect((wrapper.vm as any).enableSampling).toBe(true);
-  });
-
-  it("samplingRate defaults to 0.01", () => {
-    expect((wrapper.vm as any).samplingRate).toBe(0.01);
-  });
-
-  it("spanIdentifier defaults to 'gen_ai_system'", () => {
-    expect(formValues(wrapper).spanIdentifier).toBe("gen_ai_system");
-  });
-
-  it("loadingFields starts as false after mount completes", () => {
-    expect((wrapper.vm as any).loadingFields).toBe(false);
-  });
-});
-
-describe("LlmEvaluation - schema validation (real OForm)", () => {
-  let wrapper: VueWrapper<any>;
-
-  beforeEach(async () => {
-    vi.clearAllMocks();
-    wrapper = createWrapper();
-    await flushPromises();
-  });
-
-  afterEach(() => {
-    wrapper.unmount();
-  });
-
-  it("blocks submit and does NOT call addNode when nodeName is empty", async () => {
-    setField(wrapper, "nodeName", "");
-    await submitForm(wrapper);
-    expect((wrapper.vm as any).form.state.isValid).toBe(false);
-    expect(mockAddNode).not.toHaveBeenCalled();
-  });
-
-  it("blocks submit when nodeName is only whitespace (trim + min(1))", async () => {
-    setField(wrapper, "nodeName", "   ");
-    await submitForm(wrapper);
-    expect((wrapper.vm as any).form.state.isValid).toBe(false);
-    expect(mockAddNode).not.toHaveBeenCalled();
-  });
-
-  it("submits and calls addNode when nodeName is valid", async () => {
-    setField(wrapper, "nodeName", "my-llm-node");
-    await submitForm(wrapper);
-    expect((wrapper.vm as any).form.state.isValid).toBe(true);
-    expect(mockAddNode).toHaveBeenCalledOnce();
-  });
-});
-
-describe("LlmEvaluation - saveLlmEvaluationNode payload", () => {
-  let wrapper: VueWrapper<any>;
-
-  beforeEach(async () => {
-    vi.clearAllMocks();
-    wrapper = createWrapper();
-    await flushPromises();
-  });
-
-  afterEach(() => {
-    wrapper.unmount();
-  });
-
-  it("calls addNode with node_type='llm_evaluation'", async () => {
-    setField(wrapper, "nodeName", "my-llm-node");
-    await submitForm(wrapper);
-    expect(mockAddNode).toHaveBeenCalledWith(
-      expect.objectContaining({ node_type: "llm_evaluation" })
-    );
-  });
-
-  it("calls addNode with enable_llm_judge=true", async () => {
-    setField(wrapper, "nodeName", "my-llm-node");
-    await submitForm(wrapper);
-    expect(mockAddNode).toHaveBeenCalledWith(
-      expect.objectContaining({ enable_llm_judge: true })
-    );
-  });
-
-  it("passes sampling_rate=0 when enableSampling is false", async () => {
-    setField(wrapper, "nodeName", "my-llm-node");
-    setField(wrapper, "enableSampling", false);
-    await submitForm(wrapper);
-    expect(mockAddNode).toHaveBeenCalledWith(
-      expect.objectContaining({ sampling_rate: 0.0 })
-    );
-  });
-
-  it("passes the actual samplingRate value when enableSampling is true", async () => {
-    setField(wrapper, "nodeName", "my-llm-node");
-    setField(wrapper, "enableSampling", true);
-    setField(wrapper, "samplingRate", 0.75);
-    await submitForm(wrapper);
-    expect(mockAddNode).toHaveBeenCalledWith(
-      expect.objectContaining({ sampling_rate: 0.75 })
-    );
-  });
-
-  it("trims whitespace from nodeName before saving", async () => {
-    setField(wrapper, "nodeName", "  trimmed-node  ");
-    await submitForm(wrapper);
-    expect(mockAddNode).toHaveBeenCalledWith(
-      expect.objectContaining({ name: "trimmed-node" })
-    );
-  });
-
-  it("emits 'cancel:hideform' after successful save", async () => {
-    setField(wrapper, "nodeName", "valid-node");
-    await submitForm(wrapper);
-    expect(wrapper.emitted("cancel:hideform")).toBeTruthy();
-  });
-
-  it("does not emit 'cancel:hideform' when nodeName is empty", async () => {
-    setField(wrapper, "nodeName", "");
-    await submitForm(wrapper);
-    expect(wrapper.emitted("cancel:hideform")).toBeFalsy();
-  });
-});
-
-describe("LlmEvaluation - sampling rate slider visibility", () => {
-  let wrapper: VueWrapper<any>;
-
-  beforeEach(async () => {
-    vi.clearAllMocks();
-    wrapper = createWrapper();
-    await flushPromises();
-  });
-
-  afterEach(() => {
-    wrapper.unmount();
-  });
-
-  it("sampling rate slider is visible when enableSampling is true", async () => {
-    setField(wrapper, "enableSampling", true);
-    await nextTick();
-    expect(
-      wrapper.find('[data-test="llm-evaluation-sampling-rate-slider"]').exists()
-    ).toBe(true);
-  });
-
-  it("sampling rate slider is hidden when enableSampling is false", async () => {
-    setField(wrapper, "enableSampling", false);
-    await nextTick();
-    expect(
-      wrapper.find('[data-test="llm-evaluation-sampling-rate-slider"]').exists()
-    ).toBe(false);
-  });
-
-  it("sampling rate display text reflects samplingRate value when enabled", async () => {
-    setField(wrapper, "enableSampling", true);
-    setField(wrapper, "samplingRate", 0.5);
-    await nextTick();
-    expect(wrapper.text()).toContain("50%");
-  });
-});
-
-describe("LlmEvaluation - filterStreamFields", () => {
-  let wrapper: VueWrapper<any>;
-
-  beforeEach(async () => {
-    vi.clearAllMocks();
-    wrapper = createWrapper();
-    await flushPromises();
-  });
-
-  afterEach(() => {
-    wrapper.unmount();
-  });
-
-  it("returns all fields for an empty filter string", () => {
-    const update = vi.fn((cb: () => void) => cb());
-    (wrapper.vm as any).filterStreamFields("", update);
-    expect((wrapper.vm as any).filteredStreamFields).toHaveLength(3);
-  });
-
-  it("filters fields case-insensitively by label", () => {
-    const update = vi.fn((cb: () => void) => cb());
-    (wrapper.vm as any).filterStreamFields("FIELD", update);
-    const labels = (wrapper.vm as any).filteredStreamFields.map(
-      (f: any) => f.label
-    );
-    expect(labels).toContain("field1");
-    expect(labels).toContain("field2");
-    expect(labels).not.toContain("gen_ai_system");
-  });
-
-  it("filters fields by partial lowercase match", () => {
-    const update = vi.fn((cb: () => void) => cb());
-    (wrapper.vm as any).filterStreamFields("gen", update);
-    const labels = (wrapper.vm as any).filteredStreamFields.map(
-      (f: any) => f.label
-    );
-    expect(labels).toContain("gen_ai_system");
-    expect(labels).not.toContain("field1");
-  });
-
-  it("returns empty array when no fields match the filter", () => {
-    const update = vi.fn((cb: () => void) => cb());
-    (wrapper.vm as any).filterStreamFields("xyznotfound", update);
-    expect((wrapper.vm as any).filteredStreamFields).toHaveLength(0);
-  });
-
-  it("calls the update callback", () => {
-    const update = vi.fn((cb: () => void) => cb());
-    (wrapper.vm as any).filterStreamFields("field", update);
-    expect(update).toHaveBeenCalledOnce();
-  });
-});
-
-describe("LlmEvaluation - fetchSourceStreamFields", () => {
-  let wrapper: VueWrapper<any>;
-
-  beforeEach(async () => {
-    vi.clearAllMocks();
-    wrapper = createWrapper();
-    await flushPromises();
-  });
-
-  afterEach(() => {
-    wrapper.unmount();
-  });
-
-  it("calls getStream on mount to load stream fields", () => {
-    expect(mockGetStream).toHaveBeenCalledOnce();
-  });
-
-  it("populates filteredStreamFields after mount", () => {
-    expect((wrapper.vm as any).filteredStreamFields).toHaveLength(3);
-  });
-
-  it("filteredStreamFields contains objects with label and value", () => {
-    const fields: any[] = (wrapper.vm as any).filteredStreamFields;
-    for (const field of fields) {
-      expect(field).toHaveProperty("label");
-      expect(field).toHaveProperty("value");
-    }
-  });
-});
-
-describe("LlmEvaluation - dark mode class", () => {
-  it("renders correctly when store theme is dark", async () => {
-    const wrapper = createWrapper();
-    await flushPromises();
-    const section = wrapper.find('[data-test="llm-evaluation-node-section"]');
-    expect(section.exists()).toBe(true);
-    wrapper.unmount();
-  });
-});
-
-describe("LlmEvaluation - edit mode", () => {
-  it("shows delete button when isEditNode is true and prefills nodeName", async () => {
-    const { default: useDnD } = await import("@/plugins/pipelines/useDnD");
-    (useDnD as ReturnType<typeof vi.fn>).mockReturnValueOnce({
-      pipelineObj: {
-        isEditNode: true,
-        currentSelectedNodeID: "node-edit",
-        currentSelectedNodeData: {
-          data: {
-            name: "existing-node",
-            llm_span_identifier: "gen_ai_system",
-            sampling_rate: 0.5,
-          },
-        },
-        currentSelectedPipeline: { nodes: [] },
-        userSelectedNode: {},
-        userClickedNode: {},
-      },
-      addNode: mockAddNode,
-      deletePipelineNode: mockDeletePipelineNode,
-    });
-
-    const w = createWrapper();
-    await flushPromises();
-    expect(
-      w.find('[data-test="o-drawer-neutral-btn"]').exists()
-    ).toBe(true);
-    // Edit prefill seeds the form with the saved node values.
-    expect(formValues(w).nodeName).toBe("existing-node");
-    expect((w.vm as any).enableSampling).toBe(true);
-    expect((w.vm as any).samplingRate).toBe(0.5);
-    w.unmount();
-  });
-});
-
-describe("LlmEvaluation - close icon button", () => {
-  let wrapper: VueWrapper<any>;
-
-  beforeEach(async () => {
-    vi.clearAllMocks();
-    wrapper = createWrapper();
-    await flushPromises();
-  });
-
-  afterEach(() => {
-    wrapper.unmount();
-  });
-
-  it("emits 'cancel:hideform' when the drawer is closed", async () => {
-    vi.useFakeTimers();
-    const drawer = wrapper.findComponent(ODrawerStub);
-    expect(drawer.exists()).toBe(true);
-    drawer.vm.$emit("update:open", false);
-    vi.advanceTimersByTime(400);
-    await nextTick();
-    expect(wrapper.emitted("cancel:hideform")).toBeTruthy();
-    vi.useRealTimers();
-  });
-});
-
-describe("LlmEvaluation - dialog behavior", () => {
-  let wrapper: VueWrapper<any>;
-
-  beforeEach(async () => {
-    vi.clearAllMocks();
-    wrapper = createWrapper();
-    await flushPromises();
-  });
-
-  afterEach(() => {
-    wrapper.unmount();
-  });
-
-  it("dialog.show is false by default", () => {
-    expect((wrapper.vm as any).dialog.show).toBe(false);
-  });
-
-  it("openCancelDialog sets dialog.show to true", async () => {
-    await (wrapper.vm as any).openCancelDialog();
-    expect((wrapper.vm as any).dialog.show).toBe(true);
-  });
-
-  it("openCancelDialog sets an okCallback that emits cancel:hideform", async () => {
-    await (wrapper.vm as any).openCancelDialog();
-    (wrapper.vm as any).dialog.okCallback();
-    await nextTick();
-    expect(wrapper.emitted("cancel:hideform")).toBeTruthy();
-  });
-});
diff --git a/web/src/components/pipeline/NodeForm/LlmEvaluation.vue b/web/src/components/pipeline/NodeForm/LlmEvaluation.vue
deleted file mode 100644
index 8c4ecce985..0000000000
--- a/web/src/components/pipeline/NodeForm/LlmEvaluation.vue
+++ /dev/null
@@ -1,440 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <ODrawer
-    :open="internalOpen"
-    @update:open="handleDrawerClose"
-    :title="t('pipeline.llmEvaluation')"
-    :width="30"
-    :show-close="true"
-    @keydown.stop
-    form-id="llm-evaluation-form"
-    :primaryButtonLabel="t('alerts.save')"
-    :secondaryButtonLabel="t('alerts.cancel')"
-    :neutralButtonLabel="pipelineObj.isEditNode ? t('pipeline.deleteNode') : undefined"
-    neutralButtonVariant="outline-destructive"
-    @click:secondary="openCancelDialog"
-    @click:neutral="openDeleteDialog"
-  >
-    <div
-      data-test="llm-evaluation-node-section"
-      :class="store.state.theme === 'dark' ? 'bg-[var(--o2-bg-card-dark,#1a1a1a)]' : 'bg-white'"
-    >
-      <OForm id="llm-evaluation-form" :form="form">
-        <div class="stream-routing-container w-full pt-3 pb-3 px-3 flex flex-col gap-4">
-          <!-- Node Name -->
-          <OFormInput
-            name="nodeName"
-            :label="t('pipeline.nodeName')"
-            required
-            data-test="llm-evaluation-node-name-input"
-          />
-
-          <!-- LLM Span Identifier -->
-          <OFormSelect
-            name="spanIdentifier"
-            :options="streamFields"
-            labelKey="label"
-            valueKey="value"
-            searchable
-            :label="t('pipeline.llmSpanIdentifierLabel')"
-            :loading="loadingFields"
-            data-test="llm-evaluation-span-identifier-select"
-          >
-            <template #empty>
-              <span>{{ t("pipeline.noFieldsFound") }}</span>
-            </template>
-          </OFormSelect>
-
-          <!-- Evaluation Template Selection -->
-          <div class="flex items-end gap-2">
-            <OFormSelect
-              name="template"
-              :options="availableTemplates"
-              labelKey="name"
-              valueKey="id"
-              :label="t('pipeline.evaluationTemplate')"
-              :loading="loadingTemplates"
-              class="flex-1"
-              data-test="llm-evaluation-template-select"
-            >
-              <template #empty>
-                <span>{{ t("pipeline.noTemplatesFound") }}</span>
-              </template>
-            </OFormSelect>
-            <OButton
-              variant="ghost-muted"
-              size="icon-xs-sq"
-              @click="refreshTemplates"
-              :loading="loadingTemplates"
-              :title="t('common.refresh')"
-              data-test="llm-evaluation-template-refresh-btn"
-              icon-left="refresh"
-            />
-          </div>
-
-          <!-- Enable Sampling Toggle -->
-          <OFormSwitch
-            name="enableSampling"
-            :label="t('pipeline.enableSampling')"
-            data-test="llm-evaluation-enable-sampling-toggle"
-          />
-
-          <!-- Sampling Rate -->
-          <div v-if="enableSampling" class="flex flex-col gap-2">
-            <div class="text-sm">
-              {{ t("pipeline.samplingRate") }}:
-              {{ (samplingRate * 100).toFixed(0) }}%
-            </div>
-            <OFormSlider
-              name="samplingRate"
-              :min="0"
-              :max="1"
-              :step="0.01"
-              data-test="llm-evaluation-sampling-rate-slider"
-            />
-          </div>
-        </div>
-      </OForm>
-    </div>
-  </ODrawer>
-  <confirm-dialog
-    v-model="dialog.show"
-    :title="dialog.title"
-    :message="dialog.message"
-    @update:ok="dialog.okCallback"
-    @update:cancel="dialog.show = false"
-  />
-</template>
-
-<script lang="ts">
-import {
-  defineComponent,
-  ref,
-  computed,
-  onMounted,
-  watch,
-} from "vue";
-import { useI18n } from "vue-i18n";
-import { useStore } from "vuex";
-import useDragAndDrop from "@/plugins/pipelines/useDnD";
-import useStreams from "@/composables/useStreams";
-import ConfirmDialog from "@/components/ConfirmDialog.vue";
-import OButton from "@/lib/core/Button/OButton.vue";
-import ODrawer from "@/lib/overlay/Drawer/ODrawer.vue";
-import OForm from "@/lib/forms/Form/OForm.vue";
-import { useOForm } from "@/lib/forms/Form/useOForm";
-import OFormInput from "@/lib/forms/Input/OFormInput.vue";
-import OFormSelect from "@/lib/forms/Select/OFormSelect.vue";
-import OFormSwitch from "@/lib/forms/Switch/OFormSwitch.vue";
-import OFormSlider from "@/lib/forms/Slider/OFormSlider.vue";
-import { toast } from "@/lib/feedback/Toast/useToast";
-import {
-  makeLlmEvaluationSchema,
-  type LlmEvaluationForm,
-} from "./LlmEvaluation.schema";
-
-export default defineComponent({
-  name: "LlmEvaluation",
-  components: {
-    ConfirmDialog,
-    OButton,
-    ODrawer,
-    OForm,
-    OFormInput,
-    OFormSelect,
-    OFormSwitch,
-    OFormSlider,
-  },
-  props: {
-    open: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ["cancel:hideform"],
-  setup(props, { emit }) {
-    const store = useStore();
-    const { t } = useI18n();
-    const { addNode, pipelineObj, deletePipelineNode } = useDragAndDrop();
-
-    // Options-API form: the schema (and the defaults computed below) MUST be
-    // returned from setup() or the template binds `:schema="undefined"` and the
-    // form silently never validates (foundation checklist §5.6).
-    const llmEvaluationSchema = makeLlmEvaluationSchema(t);
-
-    const internalOpen = ref(!!props.open);
-    watch(() => props.open, (v: boolean) => { internalOpen.value = !!v; });
-    function handleDrawerClose(v: boolean) {
-      internalOpen.value = v;
-      if (!v) {
-        setTimeout(() => emit("cancel:hideform"), 300);
-      }
-    }
-    const { getStream } = useStreams();
-
-    // ── Seed values for the form's `:default-values` ──────────────────────────
-    // Computed synchronously in setup() so they are ready before OForm mounts
-    // (edit-node data is available synchronously from `pipelineObj`). The
-    // form owns the live values after mount; these only seed it.
-    const editData =
-      pipelineObj.isEditNode && pipelineObj.currentSelectedNodeData
-        ? pipelineObj.currentSelectedNodeData.data
-        : null;
-
-    const nodeNameSeed = ref(editData ? editData.name || "" : "evaluate");
-    const spanIdentifierSeed = ref(
-      editData ? editData.llm_span_identifier || "gen_ai_system" : "gen_ai_system",
-    );
-    const templateSeed = ref<string | null>(
-      editData ? editData.eval_template || null : null,
-    );
-    const enableSamplingSeed = ref(
-      editData
-        ? editData.sampling_rate !== undefined &&
-            editData.sampling_rate !== null &&
-            editData.sampling_rate > 0
-        : true,
-    );
-    const samplingRateSeed = ref(
-      editData &&
-        editData.sampling_rate !== undefined &&
-        editData.sampling_rate !== null &&
-        editData.sampling_rate > 0
-        ? editData.sampling_rate
-        : 0.01,
-    );
-
-    // Typed dynamic defaults (edit-prefill) — read once at OForm mount.
-    const llmEvaluationDefaults = computed((): LlmEvaluationForm => ({
-      nodeName: nodeNameSeed.value,
-      spanIdentifier: spanIdentifierSeed.value,
-      template: templateSeed.value,
-      enableSampling: enableSamplingSeed.value,
-      samplingRate: samplingRateSeed.value,
-    }));
-
-    // Rule ③ OWNER pattern: this component OWNS <OForm> and needs the live
-    // `enableSampling` / `samplingRate` for the slider's `v-if` + percentage
-    // display, so it creates the form here with useOForm and reads it reactively
-    // via form.useStore — a SINGLE source of truth (no mirror ref, no
-    // store.subscribe). The form is handed to <OForm :form="form">.
-    const form = useOForm<LlmEvaluationForm>({
-      defaultValues: llmEvaluationDefaults.value,
-      schema: llmEvaluationSchema,
-      onSubmit: (value) => saveLlmEvaluationNode(value),
-    });
-
-    const enableSampling = form.useStore((s: any) => s.values.enableSampling);
-    const samplingRate = form.useStore((s: any) => s.values.samplingRate);
-
-    const streamFields = ref<{ label: string; value: string }[]>([]);
-    const filteredStreamFields = ref<{ label: string; value: string }[]>([]);
-    const loadingFields = ref(false);
-    const availableTemplates = ref<any[]>([]);
-    const loadingTemplates = ref(false);
-
-    const dialog = ref({
-      show: false,
-      title: "",
-      message: "",
-      okCallback: () => {},
-    });
-
-    const fetchSourceStreamFields = async () => {
-      loadingFields.value = true;
-      try {
-        const allNodes = pipelineObj.currentSelectedPipeline?.nodes || [];
-        const inputStreamNode: any = allNodes.find(
-          (node: any) =>
-            node.io_type === "input" && node.data.node_type === "stream",
-        );
-
-        if (inputStreamNode) {
-          const streamName =
-            inputStreamNode.data?.stream_name?.value ||
-            inputStreamNode.data?.stream_name;
-          const streamType = inputStreamNode.data?.stream_type;
-          const streams: any = await getStream(streamName, streamType, true);
-
-          if (streams && Array.isArray(streams.schema)) {
-            streamFields.value = streams.schema.map((column: any) => ({
-              label: column.name,
-              value: column.name,
-            }));
-          }
-        }
-      } catch (e) {
-        console.error("Failed to fetch stream fields:", e);
-      } finally {
-        filteredStreamFields.value = [...streamFields.value];
-        loadingFields.value = false;
-      }
-    };
-
-    const fetchAvailableTemplates = async (forceRefresh: boolean = false) => {
-      loadingTemplates.value = true;
-      try {
-        const orgId = store.state.selectedOrganization?.identifier;
-        if (!orgId) {
-          console.warn("No organization selected");
-          return;
-        }
-
-        // Use store cache unless force refresh requested
-        if (!forceRefresh) {
-          const cached = store.state.streams.evalTemplatesByOrg[orgId];
-          if (cached && cached.length > 0) {
-            availableTemplates.value = cached;
-            return;
-          }
-        }
-
-        const { evalTemplateService } =
-          await import("@/services/eval-template.service");
-        const templates = await evalTemplateService.listTemplates(orgId);
-        availableTemplates.value = templates || [];
-
-        store.dispatch("streams/setEvalTemplates", {
-          orgId,
-          templates: templates || [],
-        });
-      } catch (e) {
-        console.error("Failed to fetch evaluation templates:", e);
-        availableTemplates.value = [];
-      } finally {
-        loadingTemplates.value = false;
-      }
-    };
-
-    const refreshTemplates = async () => {
-      await fetchAvailableTemplates(true); // Force refresh by ignoring cache
-      toast({
-        variant: "success",
-        message: t("pipeline.evalTemplatesRefreshed"),
-        timeout: 1500,
-      });
-    };
-
-    const filterStreamFields = (val: string, update: Function) => {
-      update(() => {
-        if (!val) {
-          filteredStreamFields.value = [...streamFields.value];
-        } else {
-          const needle = val.toLowerCase();
-          filteredStreamFields.value = streamFields.value.filter((field) =>
-            field.label.toLowerCase().includes(needle),
-          );
-        }
-      });
-    };
-
-    onMounted(async () => {
-      if (pipelineObj.userSelectedNode) {
-        pipelineObj.userSelectedNode = {};
-      }
-
-      await fetchSourceStreamFields();
-      await fetchAvailableTemplates();
-
-      // New node: default the (form-owned) template to the first available one
-      // once the templates have loaded. This is async-arriving data, so bridge it
-      // into the form rather than mutating a local mirror.
-      if (
-        !pipelineObj.isEditNode &&
-        !templateSeed.value &&
-        availableTemplates.value.length > 0
-      ) {
-        const firstTemplateId = availableTemplates.value[0]?.id || null;
-        templateSeed.value = firstTemplateId;
-        form.setFieldValue("template", firstTemplateId, {
-          dontUpdateMeta: true,
-        });
-      }
-    });
-
-    const openCancelDialog = () => {
-      dialog.value.show = true;
-      dialog.value.title = t("pipeline.discardChangesTitle");
-      dialog.value.message = t("pipeline.cancelChangesConfirm");
-      dialog.value.okCallback = () => emit("cancel:hideform");
-      pipelineObj.userClickedNode = {};
-      pipelineObj.userSelectedNode = {};
-    };
-
-    const openDeleteDialog = () => {
-      dialog.value.show = true;
-      dialog.value.title = t("pipeline.deleteNodeTitle");
-      dialog.value.message = t("pipeline.deleteNodeLlmEvalConfirm");
-      dialog.value.okCallback = deleteNode;
-    };
-
-    const deleteNode = () => {
-      deletePipelineNode(pipelineObj.currentSelectedNodeID);
-      emit("cancel:hideform");
-    };
-
-    // @submit handler. OForm only calls this once the schema passes (nodeName
-    // required), so the schema — not a manual guard — gates the save. `value` is
-    // the validated, trimmed payload and the single source of truth.
-    const saveLlmEvaluationNode = (value: LlmEvaluationForm) => {
-      const nodeData: any = {
-        name: value.nodeName.trim(),
-        node_type: "llm_evaluation",
-        enable_llm_judge: true,
-        llm_span_identifier: value.spanIdentifier || "gen_ai_system",
-        sampling_rate: value.enableSampling ? value.samplingRate ?? 0 : 0.0,
-      };
-
-      nodeData.eval_template = value.template || null;
-
-      addNode(nodeData);
-
-      toast({
-        variant: "success",
-        message: t("pipeline.llmEvaluationNodeSaved"),
-        timeout: 1500,
-      });
-
-      emit("cancel:hideform");
-    };
-
-    return {
-      t,
-      store,
-      form,
-      enableSampling,
-      samplingRate,
-      streamFields,
-      filteredStreamFields,
-      loadingFields,
-      filterStreamFields,
-      availableTemplates,
-      loadingTemplates,
-      refreshTemplates,
-      saveLlmEvaluationNode,
-      openCancelDialog,
-      openDeleteDialog,
-      deleteNode,
-      dialog,
-      pipelineObj,
-      internalOpen,
-      handleDrawerClose,
-    };
-  },
-});
-</script>
diff --git a/web/src/components/pipeline/NodeForm/PreviewPromqlQuery.vue b/web/src/components/pipeline/NodeForm/PreviewPromqlQuery.vue
index 717cae52de..0dad27994b 100644
--- a/web/src/components/pipeline/NodeForm/PreviewPromqlQuery.vue
+++ b/web/src/components/pipeline/NodeForm/PreviewPromqlQuery.vue
@@ -15,8 +15,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-    <div ref="chartPanelRef" style="height: 100%; position: relative">
-      <div style="height: calc(100vh - 220px); width: 100%;" data-test="alert-preview-chart">
+    <div ref="chartPanelRef" class="h-full relative">
+      <div class="w-full" style="height: calc(100vh - 220px)" data-test="alert-preview-chart">
         <PanelSchemaRenderer
           :panelSchema="chartData"
           :selectedTimeObj="dashboardPanelData.meta.dateTime"
diff --git a/web/src/components/pipeline/NodeForm/Query.schema.ts b/web/src/components/pipeline/NodeForm/Query.schema.ts
index 2486fc5c34..0436aa84da 100644
--- a/web/src/components/pipeline/NodeForm/Query.schema.ts
+++ b/web/src/components/pipeline/NodeForm/Query.schema.ts
@@ -1,44 +1,16 @@
 // Copyright 2026 OpenObserve Inc.
 //
-// Validation schema for the pipeline Query node drawer (Query.vue OWNS the
-// <OForm>; ScheduledPipeline.vue renders the fields as a DESCENDANT). It models
-// the `streamRoute` shape that Query's save reads, and replaces the imperative
-// `ScheduledPipeline.validateInputs()` gate (pattern → schema, Rule ③).
-//
-// Because Query renders ScheduledPipeline with `disableThreshold=true`, the
-// threshold / having branches of the old validateInputs() are NOT applicable to
-// this usage — so they are intentionally NOT modelled here. The rules that DO
-// apply (mirroring validateInputs + validateFrequency for the disableThreshold
-// path) are:
+// Validation schema for the pipeline Query node drawer. Models the `streamRoute`
+// shape that Query's save reads. Validated rules:
 //   • trigger_condition.period ≥ 1  ("Period should be greater than 0").
 //   • frequency / cron validity (superRefine):
-//       – frequency_type === "cron": cron required + interval ≥ min seconds
-//         (reuses getCronIntervalDifferenceInSeconds / isAboveMinRefreshInterval,
-//          the SAME util logic validateFrequency used). Message matches
-//          validateFrequency: `Frequency should be greater than ${min-1} seconds.`
-//          or the i18n invalidCronExpression message.
-//       – frequency_type === "minutes": frequency ≥ ceil(min/60)
-//         ("Minimum frequency should be N minutes").
+//       – frequency_type === "cron": cron required + interval ≥ min seconds.
+//       – frequency_type === "minutes": frequency ≥ ceil(min/60).
 //   • query_condition.aggregation.group_by (superRefine): when aggregation is
-//     enabled (aggregation object present), every group_by row is non-empty —
-//     the restored §5 #3 rule (message t('pipeline.fieldRequired')). The
-//     group_by ARRAY UI stays in ScheduledPipeline (deferred); its value is
-//     bridged into the form so this superRefine can see it.
+//     enabled, every group_by row must be non-empty.
 //
 // SQL validity is NOT modelled here — the Monaco SQL editor is bare, so
 // `validateSqlQuery()` stays a pre-submit guard inside Query's onSubmit.
-//
-// The stream-name regex (`isValidStreamName`) is intentionally NOT a schema
-// field: the live drawer never edits `streamRoute.name` and `saveQueryData`
-// never gated on it (it was an exposed computed only), so — like Condition's
-// omitted stream_name — there is nothing to validate at submit. The computed is
-// kept in Query.vue for the existing unit tests.
-//
-// `trigger_condition.operator` was required in the older BEFORE baseline, but
-// with disableThreshold=true validateInputs() never enforced it for this drawer
-// (the operator lives behind the `!disableThreshold` threshold branch). To match
-// CURRENT behavior and keep the happy-path tests green, operator is left
-// unvalidated here (documented choice).
 
 import { z } from "zod";
 import {
@@ -54,10 +26,9 @@ type Translate = (_key: string, _params?: Record<string, unknown>) => string;
 const aggregationShape = z
   .object({
     group_by: z.array(z.any()).optional().nullable(),
-    // aggregation function + having.{column,operator,value} are OForm* `name=`
-    // fields in ScheduledPipeline (rendered only when disableThreshold=false).
-    // Modelled loosely (passthrough round-trips them) so their values are owned
-    // by the form and survive the payload build.
+    // aggregation function + having.{column,operator,value} are form fields in
+    // ScheduledPipeline; modelled loosely (passthrough) so their values survive
+    // the payload build.
     function: z.any().optional().nullable(),
     having: z
       .object({
@@ -94,10 +65,8 @@ export function makeQuerySchema(min: number, t: Translate = (k) => k) {
           frequency: z.any().optional(),
           cron: z.string().optional().nullable(),
           timezone: z.any().optional(),
-          // operator / threshold are OForm* `name=` fields in ScheduledPipeline
-          // (rendered only when disableThreshold=false — the Query drawer passes
-          // disableThreshold=true so they never render there). Left unvalidated
-          // (optional) to match CURRENT behavior; passthrough round-trips them.
+          // operator / threshold are form fields in ScheduledPipeline; left
+          // optional (passthrough round-trips them).
           operator: z.any().optional(),
           threshold: z.any().optional(),
         })
@@ -112,7 +81,7 @@ export function makeQuerySchema(min: number, t: Translate = (k) => k) {
     .superRefine((val: any, ctx) => {
       const trigger = val?.trigger_condition ?? {};
 
-      // ── frequency / cron validity (mirrors validateFrequency) ─────────────
+      // ── frequency / cron validity ─────────────────────────────────────────
       if (trigger.frequency_type === "cron") {
         const cron = trigger.cron;
         if (!cron || !String(cron).trim()) {
@@ -158,7 +127,7 @@ export function makeQuerySchema(min: number, t: Translate = (k) => k) {
         }
       }
 
-      // ── group_by rows required when aggregation enabled (restored §5 #3) ───
+      // ── group_by rows required when aggregation enabled ───────────────────
       const aggregation = val?.query_condition?.aggregation;
       if (aggregation && Array.isArray(aggregation.group_by)) {
         aggregation.group_by.forEach((col: any, index: number) => {
diff --git a/web/src/components/pipeline/NodeForm/Query.spec.ts b/web/src/components/pipeline/NodeForm/Query.spec.ts
index cf696c1a7a..ea7967aa22 100644
--- a/web/src/components/pipeline/NodeForm/Query.spec.ts
+++ b/web/src/components/pipeline/NodeForm/Query.spec.ts
@@ -694,12 +694,12 @@ describe("Query Component", () => {
     });
 
     it("openDeleteDialog ok callback deletes node and emits cancel:hideform", async () => {
-      const wrapper = createWrapper({}, { currentSelectedNodeID: "q-node-1" });
+      const wrapper = createWrapper({}, { currentSelectedNodeID: "node-1" });
       await flushPromises();
       wrapper.vm.openDeleteDialog();
       wrapper.vm.dialog.okCallback();
       await nextTick();
-      expect(mockDeletePipelineNode).toHaveBeenCalledWith("q-node-1");
+      expect(mockDeletePipelineNode).toHaveBeenCalledWith("node-1");
       expect(wrapper.emitted("cancel:hideform")).toBeTruthy();
     });
 
@@ -859,10 +859,10 @@ describe("Query Component", () => {
   // -------------------------------------------------------------------------
   describe("deleteRoute", () => {
     it("calls deletePipelineNode with the current node ID", async () => {
-      const wrapper = createWrapper({}, { currentSelectedNodeID: "q-node-delete" });
+      const wrapper = createWrapper({}, { currentSelectedNodeID: "node-delete" });
       await flushPromises();
       wrapper.vm.deleteRoute();
-      expect(mockDeletePipelineNode).toHaveBeenCalledWith("q-node-delete");
+      expect(mockDeletePipelineNode).toHaveBeenCalledWith("node-delete");
     });
 
     it("emits cancel:hideform after deleting", async () => {
diff --git a/web/src/components/pipeline/NodeForm/Query.vue b/web/src/components/pipeline/NodeForm/Query.vue
index 149649752f..9d6dca7605 100644
--- a/web/src/components/pipeline/NodeForm/Query.vue
+++ b/web/src/components/pipeline/NodeForm/Query.vue
@@ -21,6 +21,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     :title="t('pipeline.query')"
     :width="isFullscreenMode ? 100 : 97"
     :show-close="true"
+    bleed
     @keydown.stop
   >
     <template #header-right>
@@ -30,8 +31,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         size="icon-toolbar"
         @click="scheduledPipelineRef?.toggleAIChat()"
         data-test="menu-link-ai-item"
-        class="bg-[linear-gradient(135deg,rgba(139,92,246,0.15)_0%,rgba(236,72,153,0.15)_100%)]! transition-[background,box-shadow] duration-300 hover:bg-[linear-gradient(135deg,#8b5cf6_0%,#ec4899_100%)]! hover:shadow-[0_0.25rem_0.75rem_0_rgba(139,92,246,0.35)]"
-        :class="store.state.isAiChatEnabled ? 'ai-btn-active bg-[linear-gradient(135deg,rgba(139,92,246,0.15)_0%,rgba(236,72,153,0.15)_100%)]!' : ''"
+        class="bg-[image:var(--color-gradient-ai-subtle)]! transition-[background,box-shadow] duration-300 hover:bg-[image:var(--color-gradient-ai)]! hover:shadow-[0_0.25rem_0.75rem_0_rgba(139,92,246,0.35)]"
+        :class="store.state.isAiChatEnabled ? 'ai-btn-active bg-[image:var(--color-gradient-ai-subtle)]!' : ''"
       >
         <img :src="scheduledPipelineRef?.getBtnLogo" class="header-icon ai-icon opacity-70 transition-[transform] duration-[0.6s] ease-[ease]" :class="store.state.isAiChatEnabled ? 'opacity-100!' : ''" />
       </OButton>
@@ -78,21 +79,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </template>
     <div
       data-test="add-stream-query-routing-section"
-      class="w-full h-full stream-routing-section"
-      :class="[
-        store.state.theme === 'dark' ? 'bg-[var(--o2-bg-card-dark,#1a1a1a)]' : 'bg-white',
-        { 'fullscreen-mode': isFullscreenMode },
-      ]"
+      class="w-full h-full stream-routing-section bg-surface-base"
+      :class="{ 'fullscreen-mode': isFullscreenMode }"
     >
-    <!-- ── Rule ③ OWNER pattern ──────────────────────────────────────────────
+    <!-- ── OWNER pattern ──────────────────────────────────────────────
          Query OWNS <OForm> (created with useOForm) and hands it to <OForm :form>.
          ScheduledPipeline is rendered INSIDE as a DESCENDANT: it injects the form
          and renders the validated scalar controls as OForm* `name=` fields. The
          form is the SINGLE source of truth — no v-model:trigger/sql/… mirror.
-         The schema (makeQuerySchema) replaces ScheduledPipeline.validateInputs();
-         the SQL editor stays bare so validateSqlQuery() remains a pre-submit
+         The SQL editor stays bare so validateSqlQuery() remains a pre-submit
          guard inside saveQueryData (the form's onSubmit). -->
-    <OForm :form="form" class="w-full h-full rounded-lg stream-routing-container">
+    <OForm :form="form" class="w-full h-full rounded-default stream-routing-container">
       <scheduled-pipeline
         ref="scheduledPipelineRef"
         :columns="filteredColumns"
@@ -352,12 +349,12 @@ const getDefaultStreamRoute: any = () => {
   };
 };
 
-// ── OForm (Rule ③ OWNER) ──────────────────────────────────────────────────────
+// ── OForm ──────────────────────────────────────────────────────
 // The form's defaultValues are the streamRoute object — so the form is the
 // SINGLE source of truth for the whole route. ScheduledPipeline (descendant)
 // reads/writes the validated slices via the injected form; the schema gates
 // submit. `min` is the org min_auto_refresh_interval (seconds) fed to the schema
-// factory so the frequency/cron superRefine matches validateFrequency.
+// factory.
 const min = Number(store.state?.zoConfig?.min_auto_refresh_interval) || 1;
 
 const form = useOForm<QueryForm>({
@@ -368,8 +365,7 @@ const form = useOForm<QueryForm>({
 
 // `streamRoute` is a reactive VIEW of the form-owned values (the single source
 // of truth) — NOT a mirror copy. Reads (template, tests, payload build) and the
-// helper mutations below go through the form. Kept as `streamRoute` to preserve
-// the established read surface.
+// helper mutations below go through the form.
 const streamRoute = form.useStore((s: any) => s.values as StreamRoute);
 
 // Server-error highlight ranges for the SQL editor. Provided here (parent) and
@@ -437,8 +433,7 @@ const filterStreams = (val: string, update: any) => {
   filteredStreams.value = filterColumns(indexOptions.value, val, update);
 };
 
-// Kept as an exposed computed for unit tests. NOTE: this was never an actual
-// submit gate (saveQueryData never read it), and the live drawer does not edit
+// Exposed computed for unit tests. The live drawer does not edit
 // streamRoute.name, so it is intentionally NOT a schema field (see Query.schema).
 const isValidStreamName = computed(() => {
   const roleNameRegex = /^[a-zA-Z0-9+=,.@_-]+$/;
@@ -499,8 +494,7 @@ const getDefaultPromqlCondition = () => {
   };
 };
 
-// Drive submission through the form so the schema gates the save (replaces the
-// old direct saveQueryData wiring + scheduledPipelineRef.validateInputs gate).
+// Drive submission through the form so the schema gates the save.
 const submitForm = () => {
   form.handleSubmit();
 };
@@ -526,7 +520,6 @@ const saveQueryData = async () => {
     stream_type: formData.stream_type, // required
     org_id: store.state.selectedOrganization.identifier, // required
     query_condition: {
-      // same as before
       type: formData.query_condition.type,
       conditions: null,
       sql: formData.query_condition.sql,
@@ -537,7 +530,6 @@ const saveQueryData = async () => {
       search_event_type: "derivedstream",
     },
     trigger_condition: {
-      // same as before
       period: period || 1,
       operator: "=",
       threshold: 0,
@@ -623,7 +615,7 @@ const validateSqlQuery = async () => {
 
   query.query.sql = normalizeLimit(streamRoute.value.query_condition.sql,100);
 
-  //removed the encoding as it is not required for the pipeline queries
+  //encoding is not required for the pipeline queries
   if (store.state.zoConfig.sql_base64_enabled && query?.encoding) {
     delete query.encoding;
   }
@@ -700,12 +692,8 @@ const normalizeLimit = (sql: string, maxLimit = 100): string => {
     // regex will detect the LIMIT and OFFSET in the sql query
     // it will capture multiple LIMIT and OFFSET in the sql query
     const regex = /\bLIMIT\s+(\d+)(\s+OFFSET\s+\d+)?/gi;
-     //here we will test if the sql query has LIMIT and OFFSET
-    //if it has LIMIT then we will replace the LIMIT with the normalized limit
-    //if it has no LIMIT then we will return the sql query as is
-    //if it has LIMIT but no OFFSET then we will return the sql query with the normalized
-    //we have moved to match instead of test because sometimes it fails when there are multiple limit with in the same query
-    //due to last index effects
+    //if the sql has a LIMIT, replace it with the normalized limit; otherwise return as is.
+    //using match instead of test — test can fail with multiple LIMITs in one query due to lastIndex effects
     if (sql.match(regex)) {
       return sql.replace(regex, (match, limit, offset) => {
         const num = parseInt(limit, 10);
diff --git a/web/src/components/pipeline/NodeForm/RealtimePipeline.spec.ts b/web/src/components/pipeline/NodeForm/RealtimePipeline.spec.ts
deleted file mode 100644
index ed501b2c6e..0000000000
--- a/web/src/components/pipeline/NodeForm/RealtimePipeline.spec.ts
+++ /dev/null
@@ -1,250 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { mount, VueWrapper } from "@vue/test-utils";
-import { nextTick } from "vue";
-import i18n from "@/locales";
-import store from "@/test/unit/helpers/store";
-
-
-// Stub FieldsInput to avoid pulling in its full dependency tree
-const FieldsInputStub = {
-  name: "FieldsInput",
-  template: '<div data-test="fields-input-stub"></div>',
-  props: ["streamFields", "fields", "enableNewValueMode"],
-  emits: ["add", "remove", "input:update"],
-};
-
-import RealtimePipeline from "./RealtimePipeline.vue";
-
-const defaultColumns = [
-  { label: "Host", value: "host" },
-  { label: "Level", value: "level" },
-];
-
-const defaultConditions = [
-  { uuid: "abc", column: "host", operator: "=", value: "localhost" },
-];
-
-function createWrapper(
-  props: Record<string, any> = {},
-  stubReal = true
-): VueWrapper<any> {
-  return mount(RealtimePipeline, {
-    props: {
-      columns: defaultColumns,
-      conditions: defaultConditions,
-      enableNewValueMode: false,
-      ...props,
-    },
-    global: {
-      plugins: [i18n, store],
-      stubs: stubReal
-        ? { FieldsInput: FieldsInputStub }
-        : {},
-    },
-  });
-}
-
-describe("RealtimePipeline - rendering", () => {
-  let wrapper: VueWrapper<any>;
-
-  beforeEach(() => {
-    wrapper = createWrapper();
-  });
-
-  afterEach(() => {
-    wrapper.unmount();
-  });
-
-  it("mounts without errors", () => {
-    expect(wrapper.exists()).toBe(true);
-  });
-
-  it("renders the FieldsInput stub", () => {
-    expect(wrapper.find('[data-test="fields-input-stub"]').exists()).toBe(true);
-  });
-
-  it("renders a single FieldsInput component", () => {
-    const stubs = wrapper.findAllComponents(FieldsInputStub);
-    expect(stubs).toHaveLength(1);
-  });
-});
-
-describe("RealtimePipeline - prop forwarding", () => {
-  afterEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it("passes columns as stream-fields prop to FieldsInput", () => {
-    const wrapper = createWrapper();
-    const fieldsInput = wrapper.findComponent(FieldsInputStub);
-    expect(fieldsInput.props("streamFields")).toEqual(defaultColumns);
-    wrapper.unmount();
-  });
-
-  it("passes conditions as fields prop to FieldsInput", () => {
-    const wrapper = createWrapper();
-    const fieldsInput = wrapper.findComponent(FieldsInputStub);
-    expect(fieldsInput.props("fields")).toEqual(defaultConditions);
-    wrapper.unmount();
-  });
-
-  it("passes enableNewValueMode=false to FieldsInput", () => {
-    const wrapper = createWrapper({ enableNewValueMode: false });
-    const fieldsInput = wrapper.findComponent(FieldsInputStub);
-    expect(fieldsInput.props("enableNewValueMode")).toBe(false);
-    wrapper.unmount();
-  });
-
-  it("passes enableNewValueMode=true to FieldsInput", () => {
-    const wrapper = createWrapper({ enableNewValueMode: true });
-    const fieldsInput = wrapper.findComponent(FieldsInputStub);
-    expect(fieldsInput.props("enableNewValueMode")).toBe(true);
-    wrapper.unmount();
-  });
-
-  it("forwards an empty columns array as stream-fields", () => {
-    const wrapper = createWrapper({ columns: [] });
-    const fieldsInput = wrapper.findComponent(FieldsInputStub);
-    expect(fieldsInput.props("streamFields")).toEqual([]);
-    wrapper.unmount();
-  });
-
-  it("forwards an empty conditions array as fields", () => {
-    const wrapper = createWrapper({ conditions: [] });
-    const fieldsInput = wrapper.findComponent(FieldsInputStub);
-    expect(fieldsInput.props("fields")).toEqual([]);
-    wrapper.unmount();
-  });
-});
-
-describe("RealtimePipeline - emit: 'add' from FieldsInput", () => {
-  let wrapper: VueWrapper<any>;
-  const field = { uuid: "new-1", column: "level", operator: "=", value: "error" };
-
-  beforeEach(() => {
-    wrapper = createWrapper();
-  });
-
-  afterEach(() => {
-    wrapper.unmount();
-  });
-
-  it("emits 'field:add' when FieldsInput emits 'add'", async () => {
-    const fieldsInput = wrapper.findComponent(FieldsInputStub);
-    await fieldsInput.vm.$emit("add", field);
-    await nextTick();
-    expect(wrapper.emitted("field:add")).toBeTruthy();
-    expect((wrapper.emitted("field:add") as any[][])[0][0]).toEqual(field);
-  });
-
-  it("emits 'input:update' with ('conditions', field) when FieldsInput emits 'add'", async () => {
-    const fieldsInput = wrapper.findComponent(FieldsInputStub);
-    await fieldsInput.vm.$emit("add", field);
-    await nextTick();
-    expect(wrapper.emitted("input:update")).toBeTruthy();
-    const payload = (wrapper.emitted("input:update") as any[][])[0];
-    expect(payload[0]).toBe("conditions");
-    expect(payload[1]).toEqual(field);
-  });
-
-  it("emits both 'field:add' and 'input:update' on a single 'add' event", async () => {
-    const fieldsInput = wrapper.findComponent(FieldsInputStub);
-    await fieldsInput.vm.$emit("add", field);
-    await nextTick();
-    expect(wrapper.emitted("field:add")).toHaveLength(1);
-    expect(wrapper.emitted("input:update")).toHaveLength(1);
-  });
-});
-
-describe("RealtimePipeline - emit: 'remove' from FieldsInput", () => {
-  let wrapper: VueWrapper<any>;
-  const field = { uuid: "rm-1", column: "host", operator: "!=", value: "bad-host" };
-
-  beforeEach(() => {
-    wrapper = createWrapper();
-  });
-
-  afterEach(() => {
-    wrapper.unmount();
-  });
-
-  it("emits 'field:remove' when FieldsInput emits 'remove'", async () => {
-    const fieldsInput = wrapper.findComponent(FieldsInputStub);
-    await fieldsInput.vm.$emit("remove", field);
-    await nextTick();
-    expect(wrapper.emitted("field:remove")).toBeTruthy();
-    expect((wrapper.emitted("field:remove") as any[][])[0][0]).toEqual(field);
-  });
-
-  it("emits 'input:update' with ('conditions', field) when FieldsInput emits 'remove'", async () => {
-    const fieldsInput = wrapper.findComponent(FieldsInputStub);
-    await fieldsInput.vm.$emit("remove", field);
-    await nextTick();
-    expect(wrapper.emitted("input:update")).toBeTruthy();
-    const payload = (wrapper.emitted("input:update") as any[][])[0];
-    expect(payload[0]).toBe("conditions");
-    expect(payload[1]).toEqual(field);
-  });
-
-  it("emits both 'field:remove' and 'input:update' on a single 'remove' event", async () => {
-    const fieldsInput = wrapper.findComponent(FieldsInputStub);
-    await fieldsInput.vm.$emit("remove", field);
-    await nextTick();
-    expect(wrapper.emitted("field:remove")).toHaveLength(1);
-    expect(wrapper.emitted("input:update")).toHaveLength(1);
-  });
-});
-
-describe("RealtimePipeline - emit: 'input:update' passthrough from FieldsInput", () => {
-  let wrapper: VueWrapper<any>;
-
-  beforeEach(() => {
-    wrapper = createWrapper();
-  });
-
-  afterEach(() => {
-    wrapper.unmount();
-  });
-
-  it("re-emits 'input:update' when FieldsInput emits 'input:update'", async () => {
-    const fieldsInput = wrapper.findComponent(FieldsInputStub);
-    const field = { uuid: "upd-1", column: "level", operator: "=", value: "warn" };
-    await fieldsInput.vm.$emit("input:update", "someField", field);
-    await nextTick();
-    expect(wrapper.emitted("input:update")).toBeTruthy();
-  });
-
-  it("re-emits 'input:update' with the same arguments from FieldsInput", async () => {
-    const fieldsInput = wrapper.findComponent(FieldsInputStub);
-    const field = { uuid: "upd-2", column: "message", operator: "Contains", value: "error" };
-    await fieldsInput.vm.$emit("input:update", "conditions", field);
-    await nextTick();
-    const emitted = wrapper.emitted("input:update") as any[][];
-    expect(emitted[0][0]).toBe("conditions");
-    expect(emitted[0][1]).toEqual(field);
-  });
-});
-
-describe("RealtimePipeline - no FieldsInput rendered with empty columns", () => {
-  it("FieldsInput still renders when columns is an empty array", () => {
-    const wrapper = createWrapper({ columns: [], conditions: [] });
-    // The component always renders FieldsInput — it just receives empty props
-    expect(wrapper.find('[data-test="fields-input-stub"]').exists()).toBe(true);
-    wrapper.unmount();
-  });
-});
diff --git a/web/src/components/pipeline/NodeForm/RealtimePipeline.vue b/web/src/components/pipeline/NodeForm/RealtimePipeline.vue
deleted file mode 100644
index e36751abd4..0000000000
--- a/web/src/components/pipeline/NodeForm/RealtimePipeline.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-    <div>
-      <fields-input
-        class="mt-3"
-        :stream-fields="columns"
-        :fields="conditions"
-        @add="addField"
-        @remove="removeField"
-        @input:update="
-          (name: string, field: any) => emits('input:update', name, field)
-        "
-        :enableNewValueMode="enableNewValueMode"
-      />
-    </div>
-  </template>
-  
-  <script lang="ts" setup>
-  import FieldsInput from "@/components/alerts/FieldsInput.vue";
-  
-  defineProps(["columns", "conditions","enableNewValueMode"]);
-  
-  const emits = defineEmits(["field:add", "field:remove", "input:update"]);
-  
-  const addField = (field: any) => {
-    emits("field:add", field);
-    emits("input:update", "conditions", field);
-  };
-  
-  const removeField = (field: any) => {
-    emits("field:remove", field);
-    emits("input:update", "conditions", field);
-  };
-  </script>
-  
\ No newline at end of file
diff --git a/web/src/components/pipeline/NodeForm/ScheduledPipeline.spec.js b/web/src/components/pipeline/NodeForm/ScheduledPipeline.spec.js
index 91da6b95bb..0a28045631 100644
--- a/web/src/components/pipeline/NodeForm/ScheduledPipeline.spec.js
+++ b/web/src/components/pipeline/NodeForm/ScheduledPipeline.spec.js
@@ -158,14 +158,7 @@ describe("ScheduledPipeline Component", () => {
           store: mockStore,
         },
         stubs: {
-          'q-splitter': true,
-          'q-dialog': true,
-          'q-select': true,
-          'q-input': true,
-          'q-btn': true,
           'OIcon': true,
-          'q-tooltip': true,
-          'q-table': true,
           'DateTime': true,
           'FieldList': true,
           'QueryEditor': true,
diff --git a/web/src/components/pipeline/NodeForm/ScheduledPipeline.vue b/web/src/components/pipeline/NodeForm/ScheduledPipeline.vue
index ff367118a6..de051013b2 100644
--- a/web/src/components/pipeline/NodeForm/ScheduledPipeline.vue
+++ b/web/src/components/pipeline/NodeForm/ScheduledPipeline.vue
@@ -20,19 +20,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     <div class="mb-2 stepper-header w-full flex h-full">
       <div
-        :class="store.state.isAiChatEnabled ? 'w-[75%]' : 'w-[100%]'"
-        style="height: 100% !important; display: flex;"
+        :class="store.state.isAiChatEnabled ? 'w-[75%]' : 'w-full'"
+        class="flex"
+        style="height: 100% !important;"
       >
         <!-- Collapsed field list bar (shown when hidden) -->
         <div
           v-if="collapseFields"
-          class="card-container bg-surface-panel! shrink-0 cursor-pointer flex flex-col items-center justify-start pt-2 gap-1.5"
-          style="width: 50px; height: 100%"
+          class="bg-surface-panel! shrink-0 cursor-pointer flex flex-col items-center justify-start pt-2 gap-1.5 h-full"
+          style="width: 50px"
           data-test="scheduled-pipeline-field-list-collapsed-bar"
           @click="collapseFieldList"
         >
-          <OIcon name="expand-all" size="sm" class="rotate-90 mt-[10px] text-[20px]" />
-          <div class="[writing-mode:vertical-rl] [text-orientation:mixed] font-bold text-[12px]">{{ t("pipeline.buildQuery") }}</div>
+          <OIcon name="expand-all" size="sm" class="rotate-90 mt-2.5 text-xl" />
+          <div class="[writing-mode:vertical-rl] [text-orientation:mixed] font-bold text-xs">{{ t("pipeline.buildQuery") }}</div>
         </div>
 
         <OSplitter
@@ -41,7 +42,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           class="o2-custom-splitter"
         >
           <template #before>
-            <div style="display: flex; flex-direction: column; height: 100%;">
+            <div class="flex flex-col h-full">
             <!-- Left panel header with collapse button -->
             <div class="flex items-center justify-between shrink-0 px-2 py-1.5 border-b border-border-default bg-surface-panel">
               <span class="font-semibold text-sm">{{ t("pipeline.buildQuery") }}</span>
@@ -57,16 +58,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </div>
             <div class="pl-2 flex flex-col flex-1 min-h-0">
             <div
-              style="width: 100%; overflow-y: auto;"
-              class="flex-1 min-h-0"
+              class="flex-1 min-h-0 w-full overflow-y-auto"
             >
                 <!-- fieldlist section -->
                 <div
-                  style="
-                    display: flex;
-                    flex-direction: column;
-                    overflow: hidden;
-                  "
+                  class="flex flex-col overflow-hidden"
                 >
                   <span
                     @click.stop="
@@ -81,13 +77,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </span>
                   <div
                     v-show="expandState.buildQuery"
-                    style="
-                      display: flex;
-                      flex-direction: column;
-                      padding-top: 8px;
-                    "
+                    class="flex flex-col pt-2"
                   >
-                    <div style="flex-shrink: 0">
+                    <div class="shrink-0">
                       <OFormSelect
                         name="stream_type"
                         :options="streamTypes"
@@ -113,14 +105,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
                     <!-- FieldList scrolls within a capped height -->
                     <div
-                      style="max-height: 40vh; overflow-y: auto;"
-                      class="pipeline-field-list-wrapper"
+                      style="max-height: 40vh;"
+                      class="pipeline-field-list-wrapper overflow-y-auto"
                     >
                       <GroupedFieldList
                         :fields="streamFields"
                         :theme="store.state.theme"
                         :show-pagination="false"
                         :page-size="50"
+                        search-class="px-0!"
                       >
                         <template #field-row="{ row }">
                           <FieldRow
@@ -162,7 +155,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                                 >
                                   <div
                                     v-if="durationPercentilesLoading"
-                                    class="flex justify-center py-[0.5rem]"
+                                    class="flex justify-center py-2"
                                   >
                                     <OSpinner size="xs" />
                                   </div>
@@ -170,10 +163,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                                     <div
                                       v-for="p in PERCENTILE_LABELS"
                                       :key="p.key"
-                                      class="flex items-center justify-between py-[0.15rem] pl-[0.5rem]"
+                                      class="flex items-center justify-between py-[0.15rem] pl-2"
                                     >
-                                      <span class="text-[0.7rem] w-[2rem] shrink-0">{{ p.label }}</span>
-                                      <span class="text-[0.7rem] flex-1 text-right pr-[0.25rem]">
+                                      <span class="text-2xs w-8 shrink-0">{{ p.label }}</span>
+                                      <span class="text-2xs flex-1 text-right pr-1">
                                         {{ formatTimeWithSuffix(durationPercentiles[p.key]) }}
                                       </span>
                                       <div class="flex w-[2.7rem]">
@@ -183,7 +176,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                                           size="icon-xs-circle"
                                           :title="`duration >= ${formatTimeWithSuffix(durationPercentiles[p.key])}`"
                                           @click.stop="addFieldSearchTerm(`duration>='${formatTimeWithSuffix(durationPercentiles[p.key])}'`)"
-                                          class="ml-[0.125rem]! border! border-[var(--o2-border-color)]!"
+                                          class="ml-0.5! border! border-card-glass-border!"
                                         >
                                           <OIcon name="arrow-forward-ios" size="sm" class="h-[0.4rem]! w-[0.4rem]!" />
                                         </OButton>
@@ -192,14 +185,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                                           size="icon-xs-circle"
                                           :title="`duration <= ${formatTimeWithSuffix(durationPercentiles[p.key])}`"
                                           @click.stop="addFieldSearchTerm(`duration<='${formatTimeWithSuffix(durationPercentiles[p.key])}'`)"
-                                          class="ml-auto! mr-[0.5rem]! border! border-[var(--o2-border-color)]!"
+                                          class="ml-auto! mr-2! border! border-card-glass-border!"
                                         >
                                           <OIcon name="arrow-back-ios" size="sm" class="h-[0.4rem]! w-[0.4rem]!" />
                                         </OButton>
                                       </div>
                                     </div>
                                   </template>
-                                  <div v-else class="pl-2 py-1 text-[0.7rem] text-o2-text-secondary">
+                                  <div v-else class="pl-2 py-1 text-2xs text-text-secondary">
                                     {{ durationPercentileErrMsg || "No values found" }}
                                   </div>
                                 </template>
@@ -238,17 +231,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       class="flex items-center gap-2"
                     >
                       <div
-                        class="font-bold flex items-center gap-1 w-[160px] shrink-0"
+                        class="font-bold flex items-center gap-1 w-40 shrink-0"
                       >
                         <span>{{ t("pipeline.trigger") }}</span>
                         <OIcon
                           name="info"
                           size="sm"
-                          class="cursor-pointer text-gray-400"
+                          class="cursor-pointer text-icon-color"
                         >
                           <OTooltip side="right" max-width="300px">
                             <template #content>
-                              <span class="text-[14px]">
+                              <span class="text-sm">
                                 Based upon the condition of trigger the
                                 pipeline will get trigger <br />
                                 e.g. if the trigger value is &gt;100 and the query
@@ -282,7 +275,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     >
                       <div
                         data-test="scheduled-pipeline-aggregation-title"
-                        class="w-[172px] shrink-0"
+                        class="w-43 shrink-0"
                       >
                         {{ t("pipeline.aggregation") }}
                       </div>
@@ -366,14 +359,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                           size="sm"
                           class="ml-1 cursor-pointer"
                           :class="
-                            store.state.theme === 'dark'
-                              ? 'text-gray-400'
-                              : 'text-gray-400'
+                            'text-text-secondary'
                           "
                         >
                           <OTooltip side="right" max-width="300px">
                             <template #content>
-                              <span style="font-size: 14px"
+                              <span style="font-size: var(--text-sm)"
                                 >The threshold above/below which the alert will
                                 trigger. <br />
                                 e.g. if the threshold is >100 and the query
@@ -448,8 +439,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                               !aggregationData.having.value.toString().trim()
                                 .length
                             "
-                            class="text-red-8 pt-1 absolute"
-                            style="font-size: 11px; line-height: 12px"
+                            class="text-status-error-text pt-1 absolute"
+                            style="font-size: var(--text-2xs); line-height: 12px"
                           >
                             {{ t("pipeline.fieldRequired") }}
                           </div>
@@ -465,14 +456,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                                 :options="triggerOperators"
                                 style="
                                   width: 88px;
-                                  border: 1px solid rgba(0, 0, 0, 0.05);
+                                  border: 1px solid var(--color-border-subtle);
                                 "
                               />
                             </div>
                             <div
                               class="flex items-center"
                               style="
-                                border: 1px solid rgba(0, 0, 0, 0.05);
+                                border: 1px solid var(--color-border-subtle);
                                 border-left: none;
                               "
                             >
@@ -493,14 +484,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                                   min-width: 90px;
                                   margin-left: 0 !important;
                                   height: 40px;
-                                  font-weight: normal;
                                 "
-                                :class="
-                                  store.state.theme === 'dark'
-                                    ? 'bg-gray-800'
-                                    : 'bg-gray-100'
-                                "
-                                class="flex justify-center items-center"
+                                class="flex justify-center items-center bg-surface-subtle font-normal"
                               >
                                 {{ t("alerts.times") }}
                               </div>
@@ -512,8 +497,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                               !triggerData.operator ||
                               !Number(triggerData.threshold)
                             "
-                            class="text-red-8 pt-1 absolute"
-                            style="font-size: 11px; line-height: 12px"
+                            class="text-status-error-text pt-1 absolute"
+                            style="font-size: var(--text-2xs); line-height: 12px"
                           >
                             {{ t("pipeline.fieldRequired") }}
                           </div>
@@ -523,17 +508,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <div class="flex items-center gap-2">
                       <div
                         data-test="scheduled-pipeline-cron-toggle-title"
-                        class="font-bold flex items-center gap-1 w-[160px] shrink-0"
+                        class="font-bold flex items-center gap-1 w-40 shrink-0"
                       >
                         <span>{{ t("alerts.crontitle") + " *" }}</span>
                         <OIcon
                           name="info"
                           size="sm"
-                          class="cursor-pointer text-gray-400"
+                          class="cursor-pointer text-icon-color"
                         >
                           <OTooltip side="right" max-width="300px">
                             <template #content>
-                              <span class="text-[14px]">
+                              <span class="text-sm">
                                 Configure the option to enable a cron
                                 expression.
                               </span>
@@ -549,25 +534,25 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <div class="flex items-start gap-2">
                       <div
                         data-test="scheduled-pipeline-frequency-title"
-                        class="font-bold flex items-center gap-1 w-[160px] shrink-0 pt-2"
+                        class="font-bold flex items-center gap-1 w-40 shrink-0 pt-2"
                       >
                         <span>{{ t("alerts.frequency") + " *" }}</span>
                         <OIcon
                           name="info"
                           size="sm"
-                          class="cursor-pointer text-gray-400"
+                          class="cursor-pointer text-icon-color"
                         >
                           <OTooltip side="right">
                             <template #content>
                               <span
-                                class="text-[14px]"
+                                class="text-sm"
                                 v-if="triggerData.frequency_type == 'minutes'"
                                 >How often the task should be executed.<br />
                                 e.g., 2 minutes means that the task will run
                                 every 2 minutes and will be processed based on
                                 the other parameters provided.</span
                               >
-                              <span class="text-[14px]" v-else>
+                              <span class="text-sm" v-else>
                                 Pattern: * * * * * * means every second.
                                 <br />
                                 Format: [Second (optional) 0-59] [Minute 0-59]
@@ -595,7 +580,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                           <OIcon
                             name="warning"
                             size="sm"
-                            class="cursor-pointer text-orange-500"
+                            class="cursor-pointer text-status-warning-text"
                           >
                             <OTooltip
                               side="right"
@@ -611,10 +596,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                                OFormInput's built-in message would render inside
                                the 7.5rem field and wrap/clip. The empty #error
                                slot keeps the field form-owned (name=) but
-                               suppresses its inline message; we surface the schema
-                               error in the full-width sibling below (R3-timed). -->
+                               suppresses its inline message; the schema error is
+                               surfaced in the full-width sibling below. -->
                           <div
-                            class="flex items-stretch border border-[var(--o2-border-color)] rounded-md w-fit overflow-hidden"
+                            class="flex items-stretch border border-card-glass-border rounded-default w-fit overflow-hidden"
                           >
                             <OFormInput
                               data-test="scheduled-pipeline-frequency-input-field"
@@ -632,12 +617,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                             </OFormInput>
                             <div
                               data-test="scheduled-pipeline-frequency-unit"
-                              :class="[
-                                'flex justify-center items-center min-w-[60px] px-2 font-normal',
-                                store.state.theme === 'dark'
-                                  ? 'bg-gray-800'
-                                  : 'bg-gray-100',
-                              ]"
+                              class="flex justify-center items-center min-w-15 px-2 font-normal bg-surface-subtle"
                             >
                               {{ t("alerts.minutes") }}
                             </div>
@@ -645,7 +625,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                           <div
                             v-if="frequencyError"
                             data-test="scheduled-pipeline-frequency-error-text"
-                            class="text-red-700 text-[11px] leading-3"
+                            class="text-status-error-text text-2xs leading-3"
                           >
                             {{ frequencyError }}
                           </div>
@@ -674,17 +654,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <div class="flex items-start gap-2">
                       <div
                         data-test="scheduled-pipeline-period-title"
-                        class="font-bold flex items-center gap-1 w-[160px] shrink-0 pt-2"
+                        class="font-bold flex items-center gap-1 w-40 shrink-0 pt-2"
                       >
                         <span>{{ t("alerts.period") + " *" }}</span>
                         <OIcon
                           name="info"
                           size="sm"
-                          class="cursor-pointer text-gray-400"
+                          class="cursor-pointer text-icon-color"
                         >
                           <OTooltip side="right" max-width="300px">
                             <template #content>
-                              <span class="text-[14px]">
+                              <span class="text-sm">
                                 Period for which the query should run.<br />
                                 e.g. 10 minutes means that whenever the query
                                 will run it will use the last 10 minutes of
@@ -703,7 +683,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                              below the bordered control instead of inside the
                              7.5rem field, where it would wrap. -->
                         <div
-                          class="flex items-stretch border border-[var(--o2-border-color)] rounded-md w-fit overflow-hidden"
+                          class="flex items-stretch border border-card-glass-border rounded-default w-fit overflow-hidden"
                         >
                           <OFormInput
                             data-test="scheduled-pipeline-period-input"
@@ -718,30 +698,25 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                           </OFormInput>
                           <div
                             data-test="scheduled-pipeline-period-unit"
-                            :class="[
-                              'flex justify-center items-center min-w-[60px] px-2 font-normal',
-                              store.state.theme === 'dark'
-                                ? 'bg-gray-800'
-                                : 'bg-gray-100',
-                            ]"
+                            class="flex justify-center items-center min-w-15 px-2 font-normal bg-surface-subtle"
                           >
                             {{ t("alerts.minutes") }}
                           </div>
                         </div>
                         <!-- The required rule lives in the schema (period ≥ 1);
-                             surfaced here after submit (R3). Otherwise, once a
+                             surfaced here after submit. Otherwise, once a
                              period is set, show the informational note. -->
                         <div
                           v-if="periodError"
                           data-test="scheduled-pipeline-period-error-text"
-                          class="text-red-700 text-[11px] leading-3"
+                          class="text-status-error-text text-2xs leading-3"
                         >
                           {{ periodError }}
                         </div>
                         <div
                           v-else-if="Number(triggerData.period)"
                           data-test="scheduled-pipeline-period-warning-text"
-                          class="text-[var(--o2-primary)] text-[12px] leading-3 py-0.5"
+                          class="text-accent text-xs leading-3 py-0.5"
                         >
                           Note: The period should be the same as frequency.
                         </div>
@@ -750,17 +725,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <div class="flex items-center gap-2">
                       <div
                         data-test="scheduled-pipeline-delay-title"
-                        class="font-bold flex items-center gap-1 w-[160px] shrink-0"
+                        class="font-bold flex items-center gap-1 w-40 shrink-0"
                       >
                         <span>{{ t("pipeline.delay") }}</span>
                         <OIcon
                           name="info"
                           size="sm"
-                          class="cursor-pointer text-gray-400"
+                          class="cursor-pointer text-icon-color"
                         >
                           <OTooltip side="right" max-width="300px">
                             <template #content>
-                              <span class="text-[14px]"
+                              <span class="text-sm"
                                 >Delay for which the pipeline is scheduled to
                                 run.<br />
                                 e.g. 10 minutes delay means that the pipeline
@@ -772,7 +747,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         </OIcon>
                       </div>
                       <div
-                        class="flex items-stretch border border-[var(--o2-border-color)] rounded-md w-fit overflow-hidden"
+                        class="flex items-stretch border border-card-glass-border rounded-default w-fit overflow-hidden"
                       >
                         <OFormInput
                           data-test="scheduled-pipeline-delay-input"
@@ -783,12 +758,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         />
                         <div
                           data-test="scheduled-pipeline-delay-unit"
-                          :class="[
-                            'flex justify-center items-center min-w-[60px] px-2 font-normal',
-                            store.state.theme === 'dark'
-                              ? 'bg-gray-800'
-                              : 'bg-gray-100',
-                          ]"
+                          class="flex justify-center items-center min-w-15 px-2 font-normal bg-surface-subtle"
                         >
                           {{ t("alerts.minutes") }}
                         </div>
@@ -799,10 +769,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   <div></div>
 
                   <div
-                    class="flex justify-start items-end mt-4 pb-4 w-full"
-                    :class="
-                      store.state.theme === 'dark' ? 'bg-[var(--o2-bg-card-dark,#1a1a1a)]' : 'bg-white'
-                    "
+                    class="flex justify-start items-end mt-4 pb-4 w-full bg-surface-base"
                   ></div>
                 </div>
             </div>
@@ -810,13 +777,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </div>
           </template>
           <template #separator>
-            <div class="splitter-vertical splitter-enabled"></div>
+            <div
+              class="w-1 h-full bg-transparent transition-colors duration-300 hover:bg-[var(--color-orange-500)]"
+            ></div>
           </template>
           <template #after>
-            <div class="w-full flex flex-col border-l border-border-default" style="height: 100%">
+            <div class="w-full flex flex-col border-l border-border-default h-full">
               <div
-                class="flex-1 overflow-auto"
-                style="height: calc(100vh - 200px) !important; width: 100%"
+                class="flex-1 overflow-auto w-full"
+                style="height: calc(100vh - 200px) !important"
               >
                 <div class="query-editor-container scheduled-pipelines">
                   <span @click.stop="expandState.query = !expandState.query">
@@ -852,7 +821,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       v-if="!query && queryEditorPlaceholderFlag && expandState.query"
                       class="query-editor-placeholder-overlay absolute inset-0 flex items-start pt-0.75 pl-[2.15rem] pr-2 pointer-events-none z-1 select-none"
                     >
-                      <span class="query-editor-placeholder-typewriter [font-family:monospace] text-[var(--text-base)] [line-height:1.3125rem] text-[#a0aec0] dark:text-[#718096] whitespace-nowrap overflow-hidden text-ellipsis">{{ editorPlaceholder }}</span>
+                      <span class="query-editor-placeholder-typewriter font-mono text-[var(--text-sm)] [line-height:1.3125rem] text-text-placeholder whitespace-nowrap overflow-hidden text-ellipsis">{{ editorPlaceholder }}</span>
                     </div>
                   </div>
 
@@ -937,8 +906,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </div>
 
               <div
-                class="border-t border-(--o2-border-color) sticky bottom-0 px-4 py-3 z-10"
-                :class="store.state.theme === 'dark' ? 'bg-[var(--o2-bg-card-dark,#1a1a1a)]' : 'bg-white'"
+                class="border-t border-card-glass-border sticky bottom-0 px-4 py-3 z-10 bg-surface-base"
               >
                 <div class="flex justify-end gap-2">
                   <OButton
@@ -987,19 +955,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </div>
 
       <div
-        class="ml-2"
+        class="ml-2 w-1/4 max-w-full"
         v-if="store.state.isAiChatEnabled"
         style="
-          width: 25%;
-          max-width: 100%;
           min-width: 75px;
           height: calc(100vh - 70px) !important;
         "
-        :class="
-          store.state.theme == 'dark'
-            ? 'dark-mode-chat-container'
-            : 'light-mode-chat-container'
-        "
       >
         <O2AIChat
           style="height: calc(100vh - 70px) !important"
@@ -1027,6 +988,7 @@ import {
 import FieldsInput from "@/components/alerts/FieldsInput.vue";
 import { useI18n } from "vue-i18n";
 import { useStore } from "vuex";
+import useTheme from "@/composables/useTheme";
 import {
   getImageURL,
   useLocalTimezone,
@@ -1215,7 +1177,7 @@ const getColumns = computed(() => {
 
 const { t } = useI18n();
 
-// ── Rule ③ DESCENDANT ─────────────────────────────────────────────────────────
+// ── Form descendant ───────────────────────────────────────────────────────────
 // ScheduledPipeline is rendered INSIDE Query's <OForm>; it injects that form and
 // treats it as the SINGLE source of truth. The validated scalar controls below
 // are OForm* `name=` fields (trigger_condition.* / delay / query_condition.type /
@@ -1238,8 +1200,8 @@ const delayCondition = form.useStore((s: any) => s.values.delay);
 // fields wrapped in a shared w-fit/overflow-hidden border, so their OFormInput
 // carries an empty #error slot (suppresses the built-in inline message) and we
 // render the schema error in a full-width sibling below the group. These read
-// the same R3-timed field errors OFormInput would have surfaced — single source
-// of truth, just displayed at column width.
+// the same field errors OFormInput would have surfaced — single source of truth,
+// just displayed at column width.
 const frequencyError = form.useStore((s: any) =>
   firstFieldError(s.fieldMeta?.["trigger_condition.frequency"]?.errors ?? []),
 );
@@ -1261,7 +1223,7 @@ const setAggregation = (value: any) => {
   });
 };
 
-// Stream type / name are form-owned (Rule ③): the two <OFormSelect> controls own
+// Stream type / name are form-owned: the two <OFormSelect> controls own
 // `stream_type` / `stream_name`. These are reactive READ views of that single
 // source of truth — every programmatic write goes through form.setFieldValue so
 // all the internal read-sites (query preview, field lists, watches, AI context)
@@ -1297,6 +1259,7 @@ const collapseFields = ref(false);
 
 
 const store = useStore();
+const { isDark } = useTheme();
 
 const functionEditorPlaceholderFlag = ref(true);
 
@@ -1464,10 +1427,9 @@ watch(
   },
 );
 
-// The stream-name <OFormSelect> owns `stream_name`; loading the selected stream's
-// fields was the old @update:model-value="getStreamFields" side effect. React to
-// the form-owned value here (the SQL-sync path awaits getStreamFields explicitly,
-// so skip it to avoid a double fetch).
+// The stream-name <OFormSelect> owns `stream_name`; react to the form-owned value
+// here to load the selected stream's fields. The SQL-sync path awaits
+// getStreamFields explicitly, so skip it there to avoid a double fetch.
 watch(
   () => selectedStreamName.value,
   (val) => {
@@ -1515,8 +1477,7 @@ watch(
 );
 
 // Cross-field reset: when frequency_type flips, recompute the form-owned period.
-// flush:"sync" so the period write lands before any same-tick read (matches the
-// established cross-field-reset timing in the other migrated forms).
+// flush:"sync" so the period write lands before any same-tick read.
 watch(
   () => triggerData.value.frequency_type,
   (val) => {
@@ -1535,10 +1496,8 @@ watch(
   { flush: "sync" },
 );
 
-// The frequency / cron OForm* fields write the form directly; mirror the old
-// `@update:model-value="updateFrequency/updateCron"` side effects (validate +
-// recompute period) by watching the form-owned values. These were previously
-// inline change handlers — now they react to the single source of truth.
+// The frequency / cron OForm* fields write the form directly; their side effects
+// (validate + recompute period) run by watching the form-owned values.
 watch(
   () => triggerData.value.frequency,
   () => {
@@ -1994,7 +1953,7 @@ const updateQuery = () => {
     query.value = form.state.values?.query_condition?.sql ?? props.sql ?? "";
 };
 
-// group_by[] is a form-owned array (Rule ①): each row renders as an indexed
+// group_by[] is a form-owned array: each row renders as an indexed
 // OFormSelect (`query_condition.aggregation.group_by[${i}]`) so the row value is
 // owned by the form and its per-row error comes from the schema's superRefine —
 // no bare <OSelect>, no manual :error binding, no bridge. Add/remove rows go
@@ -2095,9 +2054,6 @@ const onBlurQueryEditor = debounce(async () => {
   emits("validate-sql");
 }, 10);
 
-// NOTE: the old imperative `validateInputs()` gate is GONE — the Query schema
-// (makeQuerySchema: period ≥ 1, frequency/cron validity, group_by rows required
-// when aggregation enabled) now gates the save through OForm.
 const collapseFieldList = () => {
   splitterModel.value = collapseFields.value ? 30 : 0;
   collapseFields.value = !collapseFields.value;
@@ -2167,9 +2123,8 @@ const getStreamFields = () => {
         }
       })
       .finally(() => {
-        // Note: Default query generation removed
-        // Query is now cleared when stream changes (see watch on selectedStreamName)
-        // Initial query generation happens in onMounted
+        // Query is cleared when stream changes (see watch on selectedStreamName);
+        // initial query generation happens in onMounted.
         expandState.value.query = true;
         expandState.value.output = false;
         resolve(true);
@@ -2394,7 +2349,7 @@ const filterStreams = (val: string, update: any) => {
   });
 };
 
-// Modify getStreamList to store the full list
+// getStreamList stores the full stream list
 async function getStreamList() {
   if (streamsLoading.value) return;
   streamsLoading.value = true;
@@ -2701,7 +2656,7 @@ const getBtnLogo = computed(() => {
     return getImageURL("images/common/ai_icon_dark.svg");
   }
 
-  return store.state.theme === "dark"
+  return isDark.value
     ? getImageURL("images/common/ai_icon_dark.svg")
     : getImageURL("images/common/ai_icon_gradient.svg");
 });
@@ -2783,8 +2738,7 @@ const sendToAiChat = (value: any, append: boolean = true) => {
 defineExpose({
   tab,
   tabOptions,
-  // The imperative validateInputs() gate is GONE (schema replaces it). The
-  // reactive form-owned slices are exposed for tests/behaviour.
+  // Reactive form-owned slices exposed for tests/behaviour.
   form,
   triggerData,
   aggregationData,
@@ -2848,36 +2802,30 @@ defineExpose({
 });
 </script>
 
-<style>
-.scheduled-pipeline-container .o-splitter__before {
+<style scoped>
+/* keep(lib-override): all of these reach into DOM owned by child/third-party components —
+   OSplitter panes (.o-splitter__*), the field-list component (.index-menu/.index-table/
+   .traces-field-table) and the Monaco-based query editor (.monaco-editor/
+   .query-editor-container) — so they cannot be expressed as template utilities. */
+.scheduled-pipeline-container :deep(.o-splitter__before),
+.scheduled-pipeline-container :deep(.o-splitter__after) {
   overflow: hidden;
 }
 
-.scheduled-pipeline-container .o-splitter__after {
-  overflow: hidden;
-}
-
-.scheduled-pipeline-container .pipeline-field-list-wrapper .index-menu,
-.scheduled-pipeline-container .pipeline-field-list-wrapper .index-table {
+.scheduled-pipeline-container .pipeline-field-list-wrapper :deep(.index-menu),
+.scheduled-pipeline-container .pipeline-field-list-wrapper :deep(.index-table) {
   height: 100%;
 }
 
-.scheduled-pipeline-container .pipeline-field-list-wrapper .traces-field-table {
+.scheduled-pipeline-container .pipeline-field-list-wrapper :deep(.traces-field-table) {
   height: 100% !important;
 }
 
-.scheduled-pipeline-container .scheduled-pipelines .monaco-editor {
+.scheduled-pipeline-container .scheduled-pipelines :deep(.monaco-editor) {
   width: 100%;
 }
 
-.scheduled-pipeline-container .scheduled-pipelines .query-editor-container {
+.scheduled-pipeline-container .scheduled-pipelines :deep(.query-editor-container) {
   width: 100% !important;
 }
-
-.o2-custom-splitter > .o-splitter__separator {
-  width: 0.625rem;
-  z-index: 999 !important;
-  height: 100%;
-  background: transparent;
-}
 </style>
diff --git a/web/src/components/pipeline/NodeForm/Stream.schema.ts b/web/src/components/pipeline/NodeForm/Stream.schema.ts
index 7e6a6843aa..2289847fb2 100644
--- a/web/src/components/pipeline/NodeForm/Stream.schema.ts
+++ b/web/src/components/pipeline/NodeForm/Stream.schema.ts
@@ -3,11 +3,8 @@
 // Validation schema for Stream.vue (the input/output stream pipeline-node
 // drawer, select-existing branch).
 //
-// Field ownership (R1-strict — every editable control inside <OForm> is
-// form-owned):
-//   • stream_type — required select. RESTORED from the BEFORE baseline:
-//                   the original required BOTH stream_type AND stream_name, but
-//                   the O-component migration only validated stream_name.
+// Field ownership (every editable control inside <OForm> is form-owned):
+//   • stream_type — required select.
 //   • stream_name — required select (creatable on output nodes).
 //   • appendData  — optional switch (only relevant for enrichment_tables output).
 //
@@ -15,8 +12,7 @@
 // select-existing form for the AddStream create child), so it is not a field.
 //
 // Validation TIMING is owned by OForm (submit-then-change); this file only
-// describes WHAT is valid. Messages mirror the BEFORE baseline ('Field is
-// required!').
+// describes WHAT is valid.
 
 import { z } from "zod";
 
diff --git a/web/src/components/pipeline/NodeForm/Stream.vue b/web/src/components/pipeline/NodeForm/Stream.vue
index 033e610676..471bd37883 100644
--- a/web/src/components/pipeline/NodeForm/Stream.vue
+++ b/web/src/components/pipeline/NodeForm/Stream.vue
@@ -33,11 +33,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   >
     <div
       data-test="add-stream-input-stream-routing-section"
-      :class="store.state.theme === 'dark' ? 'bg-[var(--o2-bg-card-dark,#1a1a1a)]' : 'bg-white'"
+      :class="'bg-surface-base'"
     >
 
 
-    <div class="stream-routing-container w-full py-3">
+    <div class="stream-routing-container w-full">
       <!-- Mode toggle — stays a bare UI control OUTSIDE the form: it swaps the
            select-existing form for the AddStream create child. -->
       <OSwitch
@@ -45,7 +45,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         data-test="create-stream-toggle"
         :label="isUpdating ? 'Edit Stream' : 'Create new Stream'"
         v-model="createNewStream"
-        class="px-3 mb-3"
+        class="mb-3"
       />
 
       <div>
@@ -54,7 +54,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           id="stream-node-form"
           :form="form"
         >
-          <div class="p-4 flex flex-col gap-3">
+          <div class="flex flex-col gap-3">
             <div data-test="input-node-stream-type-select" class="w-full">
               <OFormSelect
                 name="stream_type"
@@ -92,27 +92,27 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
             <div
               v-if="selectedNodeType == 'output'"
-              class="note-message bg-[#f9f290] text-[#2d3748] w-full rounded-md p-3 flex flex-col gap-2"
+              class="note-message bg-banner-warning-bg text-banner-warning-text w-full rounded-default p-3 flex flex-col gap-2"
             >
-              <div class="text-sm text-gray-800">Guidelines:</div>
-              <div class="flex flex-col gap-1 text-sm text-gray-800">
+              <div class="text-sm text-banner-warning-text">Guidelines:</div>
+              <div class="flex flex-col gap-1 text-sm text-banner-warning-text">
                 <div class="flex items-start gap-2">
-                  <OIcon name="info" size="sm" class="shrink-0 mt-0.5 text-amber-500" />
+                  <OIcon name="info" size="sm" class="shrink-0 mt-0.5 text-status-warning-text" />
                   <span>
                     Select an existing stream from the list or enter the name to create a new one
                   </span>
                 </div>
                 <div class="flex items-start gap-2">
-                  <OIcon name="info" size="sm" class="shrink-0 mt-0.5 text-amber-500" />
+                  <OIcon name="info" size="sm" class="shrink-0 mt-0.5 text-status-warning-text" />
                   <span>
-                    <span class="highlight font-bold text-[#007bff]">Enrichment_tables</span> as destination stream is only available for scheduled pipelines
+                    <span class="highlight font-bold text-text-link">Enrichment_tables</span> as destination stream is only available for scheduled pipelines
                   </span>
                 </div>
                 <div class="flex items-start gap-2">
-                  <OIcon name="info" size="sm" class="shrink-0 mt-0.5 text-amber-500" />
+                  <OIcon name="info" size="sm" class="shrink-0 mt-0.5 text-status-warning-text" />
                   <span>
-                    Use curly braces <span class="code [font-family:monospace] py-[1px] px-[4px] rounded-[3px] bg-[rgba(0,0,0,0.06)] text-[#b30059]">{}</span> to configure stream name dynamically. e.g.
-                    <span class="code [font-family:monospace] py-[1px] px-[4px] rounded-[3px] bg-[rgba(0,0,0,0.06)] text-[#b30059]">static_text_{fieldname}_postfix</span>. Static text before/after <span class="code [font-family:monospace] py-[1px] px-[4px] rounded-[3px] bg-[rgba(0,0,0,0.06)] text-[#b30059]">{}</span> is optional
+                    Use curly braces <span class="code font-mono py-px px-1 rounded-default bg-code-bg text-code-text">{}</span> to configure stream name dynamically. e.g.
+                    <span class="code font-mono py-px px-1 rounded-default bg-code-bg text-code-text">static_text_{fieldname}_postfix</span>. Static text before/after <span class="code font-mono py-px px-1 rounded-default bg-code-bg text-code-text">{}</span> is optional
                   </span>
                 </div>
               </div>
@@ -526,17 +526,18 @@ defineExpose({
 });
 </script>
 
-<style>
+<style scoped>
+/* keep(complex-state): :deep overrides of the nested add-stream form's internal
+   structure (header row, nth input alignment, separators). */
 .pipeline-add-stream {
-  .add-stream-header.row {
+  :deep(.add-stream-header.row) {
     display: none;
   }
-  .add-stream-inputs :nth-child(5) {
-    /* background-color: red; */
+  :deep(.add-stream-inputs :nth-child(5)) {
     justify-content: flex-start;
   }
 
-  [role="separator"] {
+  :deep([role="separator"]) {
     display: none !important;
   }
 }
diff --git a/web/src/components/pipeline/NodeSidebar.vue b/web/src/components/pipeline/NodeSidebar.vue
index 56e812ef89..1582301ab2 100644
--- a/web/src/components/pipeline/NodeSidebar.vue
+++ b/web/src/components/pipeline/NodeSidebar.vue
@@ -34,14 +34,14 @@ export default {
 </script>
 
 <template>
-  <div class="nodes bg-[rgba(226,232,240,0.9)] backdrop-blur-[12px] rounded-[12px] border border-[rgba(226,232,240,0.8)] shadow-[0_4px_16px_rgba(0,0,0,0.08)] py-3 px-2 m-[4px_2px] transition-all duration-300 ease-in-out hover:shadow-[0_6px_20px_rgba(0,0,0,0.12)]">
-    <div v-for="node in node_types" :key="node.io_type" class="o2vf_node transition-all rounded-lg mb-3 last:mb-0">
+  <div class="nodes bg-surface-panel backdrop-blur-[12px] rounded-default border border-border-default shadow-[0_4px_16px_rgba(0,0,0,0.08)] py-3 px-2 m-[4px_2px] transition-all duration-300 ease-in-out hover:shadow-[0_6px_20px_rgba(0,0,0,0.12)] dark:hover:shadow-[0_8px_32px_rgba(0,0,0,0.5)]">
+    <div v-for="node in node_types" :key="node.io_type" class="o2vf_node transition-all rounded-default mb-3 last:mb-0">
       <OButton
         variant="ghost"
         size="md"
         :class="`o2vf_node_${node.io_type}`"
-        class="p-0 btn-fixed-width relative flex items-center w-full hover:translate-x-[3px] hover:bg-[rgba(255,255,255,0.1)] hover:backdrop-blur-[8px] dark:hover:bg-[rgba(255,255,255,0.08)]! dark:hover:backdrop-blur-[12px]!"
-        style="width: 170px; justify-content: flex-start"
+        class="p-0 btn-fixed-width relative flex items-center w-full hover:translate-x-[3px] hover:bg-interactive-hover-bg hover:backdrop-blur-[8px] dark:hover:backdrop-blur-[12px]! justify-start"
+        style="width: 170px"
         :data-test="`pipeline-node-sidebar-${node.subtype}-${node.io_type}-btn`"
         :draggable="true"
         @dragstart="onDragStart($event, node)"
@@ -50,8 +50,8 @@ export default {
         <OTooltip side="right" :side-offset="10">
           <template #content>
             <div class="px-2.5 py-1.5">
-              <div class="font-medium text-[11px] mb-0.5 capitalize">{{ node.label }}</div>
-              <div class="text-[10px] leading-[1.3] capitalize">{{ node.tooltip }}</div>
+              <div class="font-medium text-2xs mb-0.5 capitalize">{{ node.label }}</div>
+              <div class="text-3xs leading-[1.3] capitalize">{{ node.tooltip }}</div>
             </div>
           </template>
         </OTooltip>
@@ -66,12 +66,12 @@ export default {
             <OIcon v-else size="md" :name="node.icon" />
             <OSeparator vertical class="node-separator h-4" />
           </div>
-          <div class="node-label w-[70px] text-left overflow-hidden text-ellipsis whitespace-nowrap font-medium text-[12px]">{{ node.label }}</div>
+          <div class="node-label w-17.5 text-left overflow-hidden text-ellipsis whitespace-nowrap font-medium text-xs">{{ node.label }}</div>
           <div class="drag-dots grid gap-0.5 w-2 h-2" style="grid-template-columns: 1fr 1fr">
-            <span class="dot w-0.5 h-0.5 rounded-full transition-all bg-[rgba(107,114,128,0.6)] dark:bg-[rgba(255,255,255,0.5)]!"></span>
-            <span class="dot w-0.5 h-0.5 rounded-full transition-all bg-[rgba(107,114,128,0.6)] dark:bg-[rgba(255,255,255,0.5)]!"></span>
-            <span class="dot w-0.5 h-0.5 rounded-full transition-all bg-[rgba(107,114,128,0.6)] dark:bg-[rgba(255,255,255,0.5)]!"></span>
-            <span class="dot w-0.5 h-0.5 rounded-full transition-all bg-[rgba(107,114,128,0.6)] dark:bg-[rgba(255,255,255,0.5)]!"></span>
+            <span class="dot w-0.5 h-0.5 rounded-full transition-all bg-icon-color"></span>
+            <span class="dot w-0.5 h-0.5 rounded-full transition-all bg-icon-color"></span>
+            <span class="dot w-0.5 h-0.5 rounded-full transition-all bg-icon-color"></span>
+            <span class="dot w-0.5 h-0.5 rounded-full transition-all bg-icon-color"></span>
           </div>
         </div>
       </OButton>
@@ -86,103 +86,58 @@ export default {
 </template>
 
 <style>
-.body--dark .nodes {
-  background: rgba(15, 23, 42, 0.95) !important;
-  border: 1px solid rgba(255, 255, 255, 0.15) !important;
-  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4) !important;
-}
-
-.body--dark .nodes:hover {
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
-}
-
+/* keep(lib-override): o2vf_node_* are the shared vue-flow node-type classes — the same
+   convention lives in PipelineEditor.vue (global) and is asserted by NodeSidebar.spec.ts,
+   so the styling must ride these class names rather than colocated utilities.
+   .drag-handle:hover .dot is a cross-file global: .drag-handle / .dot are rendered by
+   other pipeline components (drag-handle has external consumers), so it must stay unscoped. */
 .drag-handle:hover .dot {
-  background: rgba(107, 114, 128, 0.8);
+  background: var(--color-icon-color);
   transform: scale(1.1);
 }
 
 .o2vf_node_input {
-  border: 1px solid rgba(96, 165, 250, 0.4);
-  color: #1e40af;
-  border-radius: 8px;
-  background: rgba(239, 246, 255, 0.9);
+  border: 1px solid var(--color-status-info-text);
+  color: var(--color-status-info-text);
+  border-radius: 0.5rem;
+  background: var(--color-status-info-bg);
   transition: all 0.3s ease;
 }
 
 .o2vf_node_input:hover {
-  background: rgba(239, 246, 255, 1);
-  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
-  border-color: rgba(96, 165, 250, 0.6);
+  background: var(--color-status-info-bg);
+  box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--color-status-info-text) 20%, transparent);
+  border-color: var(--color-status-info-text);
 }
 
 .o2vf_node_output {
-  border: 1px solid rgba(74, 222, 128, 0.4);
-  color: #181a1b;
-  border-radius: 8px;
-  background: rgba(240, 253, 244, 0.9);
-  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.1);
+  border: 1px solid var(--color-status-positive);
+  color: var(--color-status-success-text);
+  border-radius: 0.5rem;
+  background: var(--color-status-success-bg);
+  box-shadow: 0 0.125rem 0.5rem color-mix(in srgb, var(--color-status-positive) 10%, transparent);
   transition: all 0.3s ease;
-  padding: 8px 16px;
+  padding: 0.5rem 1rem;
 }
 
 .o2vf_node_output:hover {
-  background: rgba(240, 253, 244, 1);
-  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
-  border-color: rgba(74, 222, 128, 0.6);
+  background: var(--color-status-success-bg);
+  box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--color-status-positive) 20%, transparent);
+  border-color: var(--color-status-positive);
 }
 
 .o2vf_node_default {
-  border: 1px solid rgba(245, 158, 11, 0.4);
-  color: #92400e;
-  border-radius: 8px;
-  background: rgba(255, 251, 235, 0.9);
-  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.1);
+  border: 1px solid var(--color-status-warning-text);
+  color: var(--color-status-warning-text);
+  border-radius: 0.5rem;
+  background: var(--color-status-warning-bg);
+  box-shadow: 0 0.125rem 0.5rem color-mix(in srgb, var(--color-status-warning-text) 10%, transparent);
   transition: all 0.3s ease;
 }
 
 .o2vf_node_default:hover {
-  background: rgba(255, 251, 235, 1);
-  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.2);
-  border-color: rgba(245, 158, 11, 0.6);
-}
-
-.body--dark .o2vf_node_default {
-  background: rgba(120, 53, 15, 0.2) !important;
-  border: 1px solid rgba(251, 146, 60, 0.3) !important;
-  color: rgba(255, 255, 255, 0.9) !important;
-}
-
-.body--dark .o2vf_node_default:hover {
-  background: rgba(120, 53, 15, 0.3) !important;
-  border-color: rgba(251, 146, 60, 0.5) !important;
-  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.2) !important;
-}
-
-.body--dark .o2vf_node_input {
-  background: rgba(30, 58, 138, 0.2) !important;
-  border: 1px solid rgba(96, 165, 250, 0.3) !important;
-  color: rgba(255, 255, 255, 0.9) !important;
-}
-
-.body--dark .o2vf_node_input:hover {
-  background: rgba(30, 58, 138, 0.3) !important;
-  border-color: rgba(96, 165, 250, 0.5) !important;
-  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.2) !important;
-}
-
-.body--dark .o2vf_node_output {
-  background: rgba(20, 83, 45, 0.2) !important;
-  border: 1px solid rgba(74, 222, 128, 0.3) !important;
-  color: rgba(255, 255, 255, 0.9) !important;
-}
-
-.body--dark .o2vf_node_output:hover {
-  background: rgba(20, 83, 45, 0.3) !important;
-  border-color: rgba(74, 222, 128, 0.5) !important;
-  box-shadow: 0 6px 16px rgba(34, 197, 94, 0.2) !important;
-}
-
-.body--dark .drag-handle:hover .dot {
-  background: rgba(255, 255, 255, 0.7) !important;
+  background: var(--color-status-warning-bg);
+  box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--color-status-warning-text) 20%, transparent);
+  border-color: var(--color-status-warning-text);
 }
 </style>
diff --git a/web/src/components/pipeline/PipelineDestinationEditor.vue b/web/src/components/pipeline/PipelineDestinationEditor.vue
index 6cee1faa2d..7ef40ff811 100644
--- a/web/src/components/pipeline/PipelineDestinationEditor.vue
+++ b/web/src/components/pipeline/PipelineDestinationEditor.vue
@@ -15,15 +15,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="p-0"
+  <OPageLayout
+    :back="{
+      label: t('pipeline_destinations.header'),
+      onClick: () => emit('cancel'),
+    }"
+    bleed
   >
-    <AppPageHeader
-      :back="{
-        label: t('pipeline_destinations.header'),
-        onClick: () => emit('cancel'),
-      }"
-      class="px-3 border-b border-border-default"
-    >
       <template #title>
         <span data-test="pipeline-destination-editor-title">
           <template v-if="destination"
@@ -33,9 +31,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <template v-else>{{ t("alert_destinations.addTitle") }}</template>
         </span>
       </template>
-    </AppPageHeader>
 
-    <div class="rounded-lg py-2 px-3 overflow-auto">
+    <div class="rounded-default py-2 px-3 overflow-auto">
       <div class="w-full">
         <CreateDestinationForm
           :destination="destination"
@@ -45,14 +42,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         />
       </div>
     </div>
-  </div>
+  </OPageLayout>
 </template>
 
 <script lang="ts" setup>
 import { defineProps, defineEmits } from "vue";
 import { useI18n } from "vue-i18n";
 import CreateDestinationForm from "./NodeForm/CreateDestinationForm.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 
 const { t } = useI18n();
 
diff --git a/web/src/components/pipeline/PipelineEditor.vue b/web/src/components/pipeline/PipelineEditor.vue
index 83aabe9311..3cff41cf38 100644
--- a/web/src/components/pipeline/PipelineEditor.vue
+++ b/web/src/components/pipeline/PipelineEditor.vue
@@ -15,8 +15,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="w-full h-full pr-[0.625rem]">
-    <div class="card-container h-[calc(100vh-50px)]">
+  <div class="w-full h-full pr-2.5">
+    <div class="bg-card-glass-bg h-[calc(100vh-50px)]">
       <!-- The shell (Functions.vue) renders the "Pipelines › <name>" breadcrumb
            header; we contribute the editor actions to it via the portal and the
            pipeline name for NEW pipelines (edit mode shows it in the breadcrumb). -->
@@ -71,12 +71,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <div class="nodes-drag-container pr-3 w-50">
           <div
             data-test="pipeline-editor-nodes-list-title"
-            class="nodes-header mb-2 mx-2 text-base font-semibold px-1 pb-2 text-center border-b-2 tracking-wide relative"
-            :class="
-              store.state.theme === 'dark'
-                ? 'text-[rgba(255,255,255,0.95)] border-[rgba(255,255,255,0.2)]'
-                : 'text-[#1f2937] border-[#e5e7eb]'
-            "
+            class="mb-2 mx-2 text-base font-semibold px-1 pb-2 text-center border-b-2 tracking-wide relative text-text-heading border-border-default after:content-[''] after:absolute after:-bottom-0.5 after:left-0 after:w-full after:h-0.5 after:bg-accent after:rounded-full"
           >
             {{ t("pipeline.nodes") }}
           </div>
@@ -94,8 +89,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <div
           id="pipelineChartContainer"
           ref="chartContainerRef"
-          class="relative-position pipeline-chart-container o2vf_node h-[82.6vh] rounded-xl w-[calc(100%-200px)]"
-          :class="store.state.theme === 'dark' ? '' : 'bg-gray-100'"
+          class="relative-position pipeline-chart-container o2vf_node h-[82.6vh] rounded-default w-[calc(100%-200px)] bg-surface-subtle dark:bg-transparent"
           v-show="!pipelineObj.dialog.show || pipelineObj.dialog.name != 'query'"
         >
           <PipelineFlow />
@@ -135,6 +129,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     @cancel:hideform="resetDialog"
   />
   <ODrawer data-test="pipeline-editor-json-editor-drawer"
+    bleed
     v-model:open="showJsonEditorDialog"
     :width="70"
     :title="t('pipeline.editPipelineJSON')"
@@ -146,12 +141,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         size="icon-toolbar"
         @click="toggleJsonEditorAIChat"
         data-test="menu-link-ai-item"
-        class="ai-hover-btn"
+        class="group [background:var(--color-gradient-ai-subtle)]! text-ai-accent! dark:text-white! [transition:background_0.3s_ease,box-shadow_0.3s_ease,color_0.3s_ease] dark:shadow-[0_0.25rem_0.75rem_0_color-mix(in_srgb,var(--color-ai-accent)_20%,transparent)] hover:[background:var(--color-gradient-ai)]! hover:text-white! hover:shadow-[0_0.25rem_0.75rem_0_color-mix(in_srgb,var(--color-ai-accent)_35%,transparent)] dark:hover:shadow-[0_0.25rem_0.75rem_0_color-mix(in_srgb,var(--color-ai-accent)_35%,transparent)]"
         :class="store.state.isAiChatEnabled ? 'ai-btn-active' : ''"
         @mouseenter="isJsonEditorAiHovered = true"
         @mouseleave="isJsonEditorAiHovered = false"
       >
-        <img :src="jsonEditorAiBtnLogo" class="header-icon ai-icon" style="width:20px;height:20px;" />
+        <img :src="jsonEditorAiBtnLogo" class="header-icon size-5 [transition:transform_0.6s_ease] group-hover:rotate-180 group-hover:brightness-0 group-hover:invert group-hover:[transition:filter_0.3s_ease]" />
       </OButton>
     </template>
     <JsonEditor
@@ -195,6 +190,7 @@ import AssociateFunction from "@/components/pipeline/NodeForm/AssociateFunction.
 import functionsService from "@/services/jstransform";
 
 import { useStore } from "vuex";
+import useTheme from "@/composables/useTheme";
 import pipelineService from "@/services/pipelines";
 import { onBeforeRouteLeave, useRouter } from "vue-router";
 import ConfirmDialog from "@/components/ConfirmDialog.vue";
@@ -326,6 +322,7 @@ const pipeline = ref<Pipeline>({
 
 const router = useRouter();
 const store = useStore();
+const { isDark } = useTheme();
 
 const confirmDialogMeta: any = ref({
   show: false,
@@ -446,7 +443,7 @@ const jsonEditorAiBtnLogo = computed(() => {
   if (isJsonEditorAiHovered.value || store.state.isAiChatEnabled) {
     return getImageURL('images/common/ai_icon_dark.svg');
   }
-  return store.state.theme === 'dark'
+  return isDark.value
     ? getImageURL('images/common/ai_icon_dark.svg')
     : getImageURL('images/common/ai_icon_gradient.svg');
 });
@@ -468,7 +465,7 @@ const validationErrors = ref<string[]>([]);
 
 const { track } = useReo();
 
-// ── Pipeline name: OForm-owned (migrated from the store-driven OInput) ───────
+// ── Pipeline name: OForm-owned ───────────────────────────────────────────────
 // The name input is a headless OForm so the teleported <OFormInput> validates
 // via the schema (submit-then-change timing; the inline error appears on the
 // first save attempt). `currentSelectedPipeline.name` stays the PERSISTED field
@@ -1217,28 +1214,25 @@ const cleanupPipelinesContextProvider = () => {
 </script>
 
 <style>
-.nodes-header::after {
-  content: '';
-  position: absolute;
-  bottom: -2px;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  background: #8b5cf6;
-  border-radius: 1px;
-}
+/* keep(lib-override:vue-flow): every rule below reaches DOM this component does
+   not render. `.vue-flow__*` are Vue Flow's own internals, emitted inside the
+   async <PipelineFlow> child — and the two `.vue-flow.dragging` / `.vue-flow:has()`
+   rules target the canvas ROOT, which is not in this template at all, so neither
+   scoping nor :deep() can reach them. `o2vf_node_*` is the shared pipeline
+   node-type convention: the same class names are defined in NodeSidebar.vue and
+   asserted by NodeSidebar.spec.ts, so this block must stay unscoped and keep
+   riding those names rather than moving to colocated utilities.
 
-/* Global rule to eliminate ALL transitions during any Vue Flow drag operation */
+   The `transition: none` blocks kill drag lag; NOTE: never set `transform: none`
+   here — Vue Flow positions each node via an inline `transform: translate(x, y)`,
+   so zeroing it would snap the node to the canvas origin mid-drag and only
+   restore on release. */
 .vue-flow.dragging *,
 .vue-flow:has(.vue-flow__node:active) * {
   transition: none !important;
   animation: none !important;
 }
 
-/* Ensure dragging nodes have zero lag.
-   NOTE: never set `transform: none` here — Vue Flow positions each node via an
-   inline `transform: translate(x, y)`, so zeroing it would snap the node to the
-   canvas origin mid-drag and only restore on release. */
 .vue-flow__node.dragging,
 .vue-flow__node:active {
   transition: none !important;
@@ -1252,17 +1246,17 @@ const cleanupPipelinesContextProvider = () => {
 }
 
 .o2vf_node .vue-flow__node {
-  padding: 8px 16px;
+  padding: 0.5rem 1rem;
   width: auto;
-  min-height: 44px;
+  min-height: 2.75rem;
   transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
-  border-radius: 12px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  border-radius: var(--radius-surface);
+  box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--color-black) 8%, transparent);
   cursor: grab;
   display: flex;
   align-items: center;
-  background: rgba(255, 255, 255, 0.9);
-  backdrop-filter: blur(10px);
+  background: var(--color-surface-base);
+  backdrop-filter: blur(0.625rem);
 }
 
 .o2vf_node .vue-flow__node:active,
@@ -1278,15 +1272,15 @@ const cleanupPipelinesContextProvider = () => {
 
 .o2vf_node .o2vf_node_input,
 .o2vf_node .vue-flow__node-input {
-  border: 1px solid #60a5fa;
-  color: #1f2937;
-  border-radius: 12px;
-  background: rgba(239, 246, 255, 0.8);
-  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
+  border: 1px solid var(--color-status-info-text);
+  color: var(--color-text-body);
+  border-radius: var(--radius-surface);
+  background: var(--color-status-info-bg);
+  box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--color-status-info-text) 10%, transparent);
   transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
   cursor: grab;
-  min-height: 36px;
-  padding: 8px 16px;
+  min-height: 2.25rem;
+  padding: 0.5rem 1rem;
 }
 
 .o2vf_node .o2vf_node_input:active,
@@ -1306,20 +1300,20 @@ const cleanupPipelinesContextProvider = () => {
 
 .o2vf_node .vue-flow__node-output {
   cursor: grab;
-  min-height: 36px;
-  padding: 8px 16px;
-  border: 1px solid rgba(74, 222, 128, 0.4);
-  color: #1f2937;
-  border-radius: 8px;
-  background: rgba(240, 253, 244, 0.9);
-  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.1);
+  min-height: 2.25rem;
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--color-status-positive);
+  color: var(--color-text-body);
+  border-radius: var(--radius-surface);
+  background: var(--color-status-success-bg);
+  box-shadow: 0 0.125rem 0.5rem color-mix(in srgb, var(--color-status-positive) 10%, transparent);
   transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
 }
 
 .o2vf_node .vue-flow__node-output:hover {
-  background: rgba(240, 253, 244, 1);
-  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
-  border-color: rgba(74, 222, 128, 0.6);
+  background: var(--color-status-success-bg);
+  box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--color-status-positive) 20%, transparent);
+  border-color: var(--color-status-positive);
 }
 
 .o2vf_node .vue-flow__node-output:active,
@@ -1335,22 +1329,22 @@ const cleanupPipelinesContextProvider = () => {
 
 .o2vf_node .o2vf_node_default,
 .o2vf_node .vue-flow__node-default {
-  border: 1px solid #f59e0b;
-  color: #1f2937;
-  border-radius: 12px;
-  background: rgba(255, 251, 235, 0.8);
-  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.1);
+  border: 1px solid var(--color-status-warning-text);
+  color: var(--color-text-body);
+  border-radius: var(--radius-surface);
+  background: var(--color-status-warning-bg);
+  box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--color-status-warning-text) 10%, transparent);
   transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
   cursor: grab;
-  min-height: 36px;
-  padding: 8px 16px;
+  min-height: 2.25rem;
+  padding: 0.5rem 1rem;
 }
 
 .o2vf_node .o2vf_node_default:hover,
 .o2vf_node .vue-flow__node-default:hover {
-  border: 1px solid #f59e0b !important;
-  background: rgba(255, 251, 235, 0.95) !important;
-  box-shadow: 0 6px 16px rgba(217, 119, 6, 0.2) !important;
+  border: 1px solid var(--color-status-warning-text) !important;
+  background: var(--color-status-warning-bg) !important;
+  box-shadow: 0 0.375rem 1rem color-mix(in srgb, var(--color-status-warning-text) 20%, transparent) !important;
 }
 
 .o2vf_node .o2vf_node_default:active,
@@ -1367,52 +1361,4 @@ const cleanupPipelinesContextProvider = () => {
 .o2vf_node .vue-flow__node-default.dragging * {
   transition: none !important;
 }
-
-.dark .nodes-header::after {
-  background: #a855f7 !important;
-}
-
-.dark .vue-flow__node-input,
-.dark .o2vf_node_input {
-  background: rgba(30, 58, 138, 0.2) !important;
-  border: 1px solid rgba(96, 165, 250, 0.3) !important;
-  color: rgba(255, 255, 255, 0.9) !important;
-  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1) !important;
-}
-
-.dark .vue-flow__node-input:hover,
-.dark .o2vf_node_input:hover {
-  background: rgba(30, 58, 138, 0.3) !important;
-  border-color: rgba(96, 165, 250, 0.5) !important;
-  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.2) !important;
-}
-
-.dark .vue-flow__node-output,
-.dark .o2vf_node_output {
-  background: rgba(20, 83, 45, 0.2) !important;
-  border: 1px solid rgba(74, 222, 128, 0.3) !important;
-  color: rgba(255, 255, 255, 0.9) !important;
-}
-
-.dark .vue-flow__node-output:hover,
-.dark .o2vf_node_output:hover {
-  background: rgba(20, 83, 45, 0.3) !important;
-  border-color: rgba(74, 222, 128, 0.5) !important;
-  box-shadow: 0 6px 16px rgba(34, 197, 94, 0.2) !important;
-}
-
-.dark .vue-flow__node-default,
-.dark .o2vf_node_default {
-  background: rgba(120, 53, 15, 0.2) !important;
-  border: 1px solid rgba(251, 146, 60, 0.3) !important;
-  color: rgba(255, 255, 255, 0.9) !important;
-  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.1) !important;
-}
-
-.dark .vue-flow__node-default:hover,
-.dark .o2vf_node_default:hover {
-  background: rgba(120, 53, 15, 0.3) !important;
-  border-color: rgba(251, 146, 60, 0.5) !important;
-  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.2) !important;
-}
 </style>
diff --git a/web/src/components/pipeline/PipelineSectionTabs.vue b/web/src/components/pipeline/PipelineSectionTabs.vue
index 5411d5f008..2bb89e1799 100644
--- a/web/src/components/pipeline/PipelineSectionTabs.vue
+++ b/web/src/components/pipeline/PipelineSectionTabs.vue
@@ -17,7 +17,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <!--
   PipelineSectionTabs — the L2 section switcher (Stream Pipelines / Functions /
   Enrichment Tables) rendered as tabs next to a page title.
-  Drop it into an AppPageHeader's #tabs slot on any pipeline section page; the
+  Drop it into an OPageHeader's #tabs slot on any pipeline section page; the
   active tab is derived from the current route and clicking a tab navigates.
   This mirrors the breadcrumb section dropdown as faster inline navigation.
 -->
@@ -41,7 +41,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <span>{{ s.label }}</span>
       <span
         v-if="s.count != null"
-        class="text-[11px] font-bold leading-none px-1.5 py-1 rounded-full"
+        class="text-2xs font-bold leading-none px-1.5 py-1 rounded-full"
         :class="
           s.key === activeSectionKey
             ? 'bg-primary-100 text-primary-700'
diff --git a/web/src/components/pipeline/PipelineView.vue b/web/src/components/pipeline/PipelineView.vue
index 25b60f63e3..1803134cd2 100644
--- a/web/src/components/pipeline/PipelineView.vue
+++ b/web/src/components/pipeline/PipelineView.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="pipeline-view-tooltip o2-scroll-container w-125 h-75 overflow-auto">
+    <div class="pipeline-view-tooltip o2-scroll-container w-125 h-75 overflow-auto rounded-default">
       <VueFlow
         ref="vueFlowRef"
         v-model:nodes="lockedNodes"
@@ -10,7 +10,7 @@
        >
        <DropzoneBackground
         :style="{
-          backgroundColor:  '#e7f3ff',
+          backgroundColor: 'var(--color-surface-panel)',
           transition: 'background-color 0.2s ease',
         }"
       >
@@ -186,56 +186,56 @@ const queryImage = getImageURL("images/pipeline/input_query.png");
   });
   </script>
     
-  <style>
-  /* Node background colors — parent-context compound selectors, must stay in CSS */
-  .pipeline-view-tooltip .vue-flow__node-input .btn-fixed-width {
-    background-color: rgba(219, 234, 254, 0.8) !important;
-    border-color: #3b82f6 !important;
-    color: #000000 !important;
+  <style scoped>
+  /* keep(lib-override:vue-flow): read-only tooltip preview recolors vue-flow node/handle DOM rendered by child components (CustomNode / vue-flow wrappers) — parent-context compound selectors and ::before pseudo-elements, not expressible as utilities on this template */
+  .pipeline-view-tooltip :deep(.vue-flow__node-input .btn-fixed-width) {
+    background-color: var(--color-status-info-bg) !important;
+    border-color: var(--color-status-info-text) !important;
+    color: var(--color-text-body) !important;
     padding: 8px 12px !important;
   }
 
-  .pipeline-view-tooltip .vue-flow__node-output .btn-fixed-width {
-    background-color: rgba(220, 252, 231, 0.8) !important;
-    border-color: #22c55e !important;
-    color: #000000 !important;
+  .pipeline-view-tooltip :deep(.vue-flow__node-output .btn-fixed-width) {
+    background-color: var(--color-status-success-bg) !important;
+    border-color: var(--color-status-positive) !important;
+    color: var(--color-text-body) !important;
     padding: 8px 12px !important;
   }
 
-  .pipeline-view-tooltip .vue-flow__node-default .btn-fixed-width {
-    background-color: rgba(255, 237, 168, 0.8) !important;
-    border-color: #f59e0b !important;
-    color: #000000 !important;
+  .pipeline-view-tooltip :deep(.vue-flow__node-default .btn-fixed-width) {
+    background-color: var(--color-status-warning-bg) !important;
+    border-color: var(--color-status-warning-text) !important;
+    color: var(--color-text-body) !important;
     padding: 8px 12px !important;
   }
 
   /* Handle colors — ::before pseudo-elements, must stay in CSS */
-  .pipeline-view-tooltip .handle_input {
-    background: #dbeafe !important;
+  .pipeline-view-tooltip :deep(.handle_input) {
+    background: var(--color-status-info-bg) !important;
   }
 
-  .pipeline-view-tooltip .handle_input::before {
-    background: #3b82f6 !important;
+  .pipeline-view-tooltip :deep(.handle_input::before) {
+    background: var(--color-status-info-text) !important;
   }
 
-  .pipeline-view-tooltip .handle_output {
-    background: #dcfce7 !important;
+  .pipeline-view-tooltip :deep(.handle_output) {
+    background: var(--color-status-success-bg) !important;
   }
 
-  .pipeline-view-tooltip .handle_output::before {
-    background: #22c55e !important;
+  .pipeline-view-tooltip :deep(.handle_output::before) {
+    background: var(--color-status-positive) !important;
   }
 
-  .pipeline-view-tooltip .handle_default {
-    background: #fef3c7 !important;
+  .pipeline-view-tooltip :deep(.handle_default) {
+    background: var(--color-status-warning-bg) !important;
   }
 
-  .pipeline-view-tooltip .handle_default::before {
-    background: #f59e0b !important;
+  .pipeline-view-tooltip :deep(.handle_default::before) {
+    background: var(--color-status-warning-text) !important;
   }
 
   /* Hide action buttons in tooltip */
-  .pipeline-view-tooltip .node-action-buttons {
+  .pipeline-view-tooltip :deep(.node-action-buttons) {
     display: none !important;
   }
   </style>
diff --git a/web/src/components/pipeline/PipelinesList.spec.ts b/web/src/components/pipeline/PipelinesList.spec.ts
index 8a12b886f7..c2fb477167 100644
--- a/web/src/components/pipeline/PipelinesList.spec.ts
+++ b/web/src/components/pipeline/PipelinesList.spec.ts
@@ -85,7 +85,7 @@ document.createElement = (tag: string) => {
 };
 
 // Stubs for migrated ODialog (Pipeline Error Dialog) and ODrawer (Create Pipeline Drawer)
-// These replace the old q-dialog usages and allow us to assert prop forwarding
+// These replace the old dialog usages and allow us to assert prop forwarding
 // and drive button clicks via emits instead of relying on component internals.
 const ODialogStub = {
   name: "ODialog",
diff --git a/web/src/components/pipeline/PipelinesList.vue b/web/src/components/pipeline/PipelinesList.vue
index 9db3619a33..14847c6a50 100644
--- a/web/src/components/pipeline/PipelinesList.vue
+++ b/web/src/components/pipeline/PipelinesList.vue
@@ -21,7 +21,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     v-if="currentRouteName === 'pipelines'"
   >
     <div class="w-full flex-1 min-h-0 overflow-hidden">
-      <div class="card-container h-full">
+      <div class="bg-card-glass-bg h-full">
       <OTable
         :frame="false"
         :key="activeTab"
@@ -38,6 +38,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :enable-column-resize="true"
         :persist-columns="true"
         :default-columns="false"
+        show-index
         table-id="pipelines-pipeline-list"
         v-model:selected-ids="selectedPipelineIds"
         :expansion="activeTab === 'scheduled' ? 'single' : 'none'"
@@ -217,7 +218,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </template>
                 <div class="flex flex-col">
                   <div>View Error</div>
-                  <div class="text-xs text-gray-500">
+                  <div class="text-xs text-text-secondary">
                     {{
                       new Date(
                         row.last_error.last_error_timestamp / 1000,
@@ -244,7 +245,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <div class="flex items-start justify-center">
               <div
                 data-test="scheduled-pipeline-expanded-sql"
-                class="w-full overflow-y-auto p-2.5 border border-[#ddd] border-l-[3px] border-l-[#7a54a2] h-full max-h-[200px] whitespace-normal bg-[#e8e8e8] text-black"
+                class="w-full overflow-y-auto p-2.5 border border-border-default border-l-[3px] border-l-accent h-full max-h-50 whitespace-normal bg-surface-subtle text-text-body"
               >
                 <pre style="text-wrap: wrap">{{ row?.sql_query }} </pre>
               </div>
@@ -273,7 +274,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             class="flex items-center justify-between w-full py-1"
           >
             <div
-              class="flex items-center o2-table-footer-title mr-4"
+              class="flex items-center text-xs font-normal mr-4"
             >
               {{ bottomProps.totalRows }} {{ t("pipeline.header") }}
             </div>
@@ -376,16 +377,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     @click:primary="closeErrorDialog"
   >
     <template #header-left>
-      <OIcon name="error" size="md" class="text-[#ef4444]" />
+      <OIcon name="error" size="md" class="text-status-error-text" />
     </template>
 
     <div v-if="errorDialog.data" class="pipeline-error-content px-6 py-5 max-h-[60vh] overflow-y-auto">
       <!-- Error Summary -->
       <div v-if="errorDialog.data.last_error.error_summary" class="mb-4">
-        <div class="section-label mb-2 text-[13px] font-semibold tracking-[0.02em] opacity-80">
+        <div class="section-label mb-2 text-compact font-semibold tracking-[0.02em] opacity-80">
           {{ t("pipeline_list.error_summary") }}
         </div>
-        <div class="error-summary-box p-4 rounded-lg font-mono text-[13px] leading-[1.6] whitespace-pre-wrap wrap-break-word bg-[rgba(239,68,68,0.08)] border border-[rgba(239,68,68,0.2)] text-[#dc2626]">
+        <div class="error-summary-box p-4 rounded-default font-mono text-compact leading-[1.6] whitespace-pre-wrap wrap-break-word bg-banner-error-soft-bg border border-banner-error-soft-border text-banner-error-soft-text">
           {{ errorDialog.data.last_error.error_summary }}
         </div>
       </div>
@@ -397,7 +398,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           Object.keys(errorDialog.data.last_error.node_errors).length > 0
         "
       >
-        <div class="section-label mb-3 text-[13px] font-semibold tracking-[0.02em] opacity-80">
+        <div class="section-label mb-3 text-compact font-semibold tracking-[0.02em] opacity-80">
           {{ t("pipeline_list.node_errors") }}
         </div>
         <div class="node-errors-container flex flex-col gap-3">
@@ -405,11 +406,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             v-for="(nodeError, nodeId) in errorDialog.data.last_error
               .node_errors"
             :key="nodeId"
-            class="node-error-item p-4 rounded-lg bg-[rgba(0,0,0,0.02)] border border-[rgba(0,0,0,0.08)] transition-all hover:bg-[rgba(0,0,0,0.04)]"
+            class="node-error-item p-4 rounded-default bg-surface-subtle border border-border-default transition-all hover:bg-interactive-hover-bg"
           >
             <div class="node-error-header flex items-center justify-between mb-2.5">
               <span class="node-name font-semibold text-sm">{{ nodeError.node_name || nodeId }}</span>
-              <span class="node-type text-xs px-2.5 py-1 rounded-xl bg-[rgba(99,102,241,0.1)] text-[#6366f1] font-medium">{{ nodeError.node_type }}</span>
+              <span class="node-type text-xs px-2.5 py-1 rounded-default bg-badge-indigo-soft-bg text-badge-indigo-soft-text font-medium">{{ nodeError.node_type }}</span>
             </div>
             <div
               v-if="
@@ -420,7 +421,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <div
                 v-for="(msg, idx) in nodeError.error_messages"
                 :key="idx"
-                class="error-message p-3 rounded-md bg-[rgba(239,68,68,0.06)] border-l-[3px] border-l-[#ef4444] font-mono text-xs leading-[1.5] whitespace-pre-wrap wrap-break-word text-[#991b1b]"
+                class="error-message p-3 rounded-default bg-banner-error-soft-bg border-l-[3px] border-l-status-negative font-mono text-xs leading-[1.5] whitespace-pre-wrap wrap-break-word text-banner-error-soft-text"
               >
                 {{ msg }}
               </div>
@@ -465,7 +466,7 @@ import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
 import { toast } from "@/lib/feedback/Toast/useToast";
 import { useShortcuts } from "@/lib/vue-shortcut-manager";
 import { focusSearchInput, isInputFocused } from "@/utils/keyboardShortcuts";
-import { TABLE_INDEX_COL_SIZE, COL } from "@/lib/core/Table/OTable.types";
+import { COL } from "@/lib/core/Table/OTable.types";
 
 const { t } = useI18n();
 const router = useRouter();
@@ -548,11 +549,7 @@ const updateActiveTab = () => {
   }
 
   filteredPipelines.value = pipelines.value
-    .filter((pipeline: any) => pipeline.source.source_type === activeTab.value)
-    .map((pipeline: any, index) => ({
-      ...pipeline,
-      "#": index + 1 <= 9 ? `0${index + 1}` : index + 1,
-    }));
+    .filter((pipeline: any) => pipeline.source.source_type === activeTab.value);
 
   columns.value = getColumnsForActiveTab(activeTab.value);
 };
@@ -605,14 +602,6 @@ const togglePipelineState = (row: any, from_now: boolean) => {
 
 
 const getColumnsForActiveTab = (tab: any) => {
-  const hashColumn = {
-    id: "#",
-    header: "#",
-    accessorKey: "#",
-    sortable: false,
-    size: TABLE_INDEX_COL_SIZE,
-    meta: { align: "left" },
-  };
   const nameColumn = {
     id: "name",
     header: t("common.name"),
@@ -704,7 +693,6 @@ const getColumnsForActiveTab = (tab: any) => {
 
   if (tab === "all") {
     return [
-      hashColumn,
       nameColumn,
       typeColumn,
       streamNameColumn,
@@ -717,7 +705,6 @@ const getColumnsForActiveTab = (tab: any) => {
   }
   if (tab === "realtime") {
     return [
-      hashColumn,
       nameColumn,
       streamNameColumn,
       streamTypeColumn,
@@ -725,7 +712,6 @@ const getColumnsForActiveTab = (tab: any) => {
     ];
   }
   return [
-    hashColumn,
     nameColumn,
     scheduledStreamTypeColumn,
     frequencyColumn,
@@ -768,7 +754,7 @@ const getPipelines = async () => {
     );
     pipelines.value = [];
     // resultTotal.value = response.data.list.length;
-    pipelines.value = response.data.list.map((pipeline: any, index: any) => {
+    pipelines.value = response.data.list.map((pipeline: any) => {
       const updatedEdges = pipeline.edges.map((edge: any) => ({
         ...edge,
         markerEnd: {
@@ -809,7 +795,6 @@ const getPipelines = async () => {
       pipeline.edges = updatedEdges;
       return {
         ...pipeline,
-        "#": index + 1 <= 9 ? `0${index + 1}` : index + 1,
       };
     });
   } catch (error) {
diff --git a/web/src/components/pipeline/StreamSelection.schema.ts b/web/src/components/pipeline/StreamSelection.schema.ts
index 5e33280ed0..0441abdb2c 100644
--- a/web/src/components/pipeline/StreamSelection.schema.ts
+++ b/web/src/components/pipeline/StreamSelection.schema.ts
@@ -4,17 +4,15 @@
 // Built via a factory so the name-required message stays i18n-driven (pass
 // useI18n's `t`).
 //
-// Field ownership (R1-strict — every editable control is form-owned):
-//   • name        — required + character regex. RESTORED conditional req+regex
-//                   from the BEFORE baseline (truthy→Zod inversion): empty → the
-//                   name-required message; non-empty → the alphanumeric regex.
+// Fields:
+//   • name        — required + character regex: empty → the name-required
+//                   message; non-empty → the alphanumeric regex.
 //   • description — optional.
 //   • stream_type — required ('Field is required!').
 //   • stream_name — required ('Field is required!').
 
 import { z } from "zod";
 
-// Same character set the old `isValidName` computed enforced.
 export const streamSelectionNameRegex = /^[a-zA-Z0-9+=,.@_-]+$/;
 
 export const makeAddPipelineSchema = (t: (_key: string) => string) =>
diff --git a/web/src/components/pipeline/StreamSelection.vue b/web/src/components/pipeline/StreamSelection.vue
index e6df49cf99..0daadbdac0 100644
--- a/web/src/components/pipeline/StreamSelection.vue
+++ b/web/src/components/pipeline/StreamSelection.vue
@@ -16,12 +16,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <div
-    class="h-full"
-    :class="store.state.theme === 'dark' ? 'bg-[var(--o2-bg-card-dark,#1a1a1a)]' : 'bg-white'"
+    class="h-full bg-surface-base"
   >
     <div>
       <div class="flex justify-between items-center px-3 py-2">
-        <div data-test="add-pipeline-section-title" style="font-size: 18px">
+        <div data-test="add-pipeline-section-title" style="font-size: var(--text-lg)">
           {{ t("pipeline.addPipeline") }}
         </div>
         <OIcon
@@ -33,7 +32,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         />
       </div>
 
-      <div class="w-full bg-gray-300" style="height: 1px" />
+      <div class="w-full bg-separator" style="height: 1px" />
 
       <!-- Inline form — the Save button lives inside the <OForm>, so Enter submits
            natively via type="submit" (no form-id needed; R4 case 1). -->
@@ -45,8 +44,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <div class="px-3">
           <div
             data-test="add-pipeline-name-input"
-            class="alert-name-input o2-input"
-            style="padding-top: 12px"
+            class="alert-name-input o2-input pt-3"
           >
             <OFormInput
               name="name"
@@ -71,8 +69,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </div>
           <div
             data-test="add-pipeline-stream-type-select"
-            class="alert-stream-type o2-input mr-2 mb-2"
-            style="padding-top: 0"
+            class="alert-stream-type o2-input mr-2 mb-2 pt-0"
           >
             <OFormSelect
               name="stream_type"
@@ -89,8 +86,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </div>
           <div
             data-test="add-pipeline-stream-select"
-            class="o2-input"
-            style="padding-top: 0"
+            class="o2-input pt-0"
           >
             <OFormSelect
               name="stream_name"
diff --git a/web/src/components/pipeline/pipelineMeta.schema.ts b/web/src/components/pipeline/pipelineMeta.schema.ts
index 0f3cf0b566..9a2c1af1ed 100644
--- a/web/src/components/pipeline/pipelineMeta.schema.ts
+++ b/web/src/components/pipeline/pipelineMeta.schema.ts
@@ -8,9 +8,9 @@
 // graph, source, edges) is authored on the drag-and-drop canvas and persisted
 // through `pipelineObj.currentSelectedPipeline`, not through this form.
 //
-// Behavior parity: the old store-driven path required a non-empty name and
-// nothing else, so this keeps `min(1)` only (no character regex). Tighten here
-// deliberately if that ever becomes a product requirement.
+// Only `min(1)` is enforced (no character regex) — a non-empty name is all that
+// is required. Tighten here deliberately if that ever becomes a product
+// requirement.
 
 import { z } from "zod";
 
diff --git a/web/src/components/pipelines/BackfillJobDetails.vue b/web/src/components/pipelines/BackfillJobDetails.vue
index 4e41f52223..f9fde10e15 100644
--- a/web/src/components/pipelines/BackfillJobDetails.vue
+++ b/web/src/components/pipelines/BackfillJobDetails.vue
@@ -26,7 +26,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <OSpinner size="lg" />
     </div>
 
-    <div v-else-if="job" class="flex flex-col gap-5 px-6 py-4">
+    <div v-else-if="job" class="flex flex-col gap-5">
           <!-- Status and Actions -->
           <div class="flex items-center justify-between">
             <OTag
@@ -47,21 +47,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- Job Information -->
           <section class="flex flex-col gap-3">
             <h3 class="text-base font-semibold">Job Information</h3>
-            <div class="grid grid-cols-2 gap-x-6 gap-y-3 rounded-md border border-card-border bg-card-bg p-4">
+            <div class="grid grid-cols-2 gap-x-6 gap-y-3 rounded-default border border-card-border bg-card-bg p-4">
               <div>
-                <div class="text-xs text-gray-400 mb-1">Job ID</div>
+                <div class="text-xs text-text-label mb-1">Job ID</div>
                 <div class="font-mono text-sm break-all">{{ job.job_id }}</div>
               </div>
               <div>
-                <div class="text-xs text-gray-400 mb-1">Pipeline</div>
+                <div class="text-xs text-text-label mb-1">Pipeline</div>
                 <div class="text-sm font-medium">{{ job.pipeline_name || job.pipeline_id }}</div>
               </div>
               <div>
-                <div class="text-xs text-gray-400 mb-1">Time Range</div>
+                <div class="text-xs text-text-label mb-1">Time Range</div>
                 <div class="text-sm">{{ formatTimestamp(job.start_time) }} – {{ formatTimestamp(job.end_time) }}</div>
               </div>
               <div>
-                <div class="text-xs text-gray-400 mb-1">Created</div>
+                <div class="text-xs text-text-label mb-1">Created</div>
                 <div class="text-sm">{{ formatTimestampFull(job.created_at) }}</div>
               </div>
             </div>
@@ -70,7 +70,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- Progress -->
           <section class="flex flex-col gap-3">
             <h3 class="text-base font-semibold">Progress</h3>
-            <div class="rounded-md border border-card-border bg-card-bg p-4 flex flex-col gap-4">
+            <div class="rounded-default border border-card-border bg-card-bg p-4 flex flex-col gap-4">
               <div>
                 <div class="flex items-center justify-between mb-2">
                   <div class="text-sm font-medium">Overall Progress</div>
@@ -85,19 +85,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
               <div class="grid grid-cols-2 gap-x-6 gap-y-3">
                 <div>
-                  <div class="text-xs text-gray-400 mb-1">Phase</div>
+                  <div class="text-xs text-text-label mb-1">Phase</div>
                   <div class="text-sm">{{ getCurrentPhase }}</div>
                 </div>
                 <div v-if="job.chunks_total">
-                  <div class="text-xs text-gray-400 mb-1">Chunks</div>
+                  <div class="text-xs text-text-label mb-1">Chunks</div>
                   <div class="text-sm">{{ job.chunks_completed || 0 }} / {{ job.chunks_total }}</div>
                 </div>
                 <div>
-                  <div class="text-xs text-gray-400 mb-1">Current Position</div>
+                  <div class="text-xs text-text-label mb-1">Current Position</div>
                   <div class="text-sm">{{ formatTimestamp(job.current_position) }}</div>
                 </div>
                 <div v-if="estimatedCompletion">
-                  <div class="text-xs text-gray-400 mb-1">Estimated Completion</div>
+                  <div class="text-xs text-text-label mb-1">Estimated Completion</div>
                   <div class="text-sm">{{ estimatedCompletion }}</div>
                 </div>
               </div>
@@ -107,10 +107,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- Deletion Details (if applicable) -->
           <section v-if="job.delete_before_backfill || job.deletion_status" class="flex flex-col gap-3">
             <h3 class="text-base font-semibold">Deletion Details</h3>
-            <div class="rounded-md border border-card-border bg-card-bg p-4 flex flex-col gap-3">
+            <div class="rounded-default border border-card-border bg-card-bg p-4 flex flex-col gap-3">
               <div class="grid grid-cols-2 gap-x-6 gap-y-3">
                 <div>
-                  <div class="text-xs text-gray-400 mb-1">Status</div>
+                  <div class="text-xs text-text-label mb-1">Status</div>
                   <OTag
                     type="deletionStatus"
                     :value="typeof job.deletion_status === 'object' ? 'failed' : job.deletion_status"
@@ -118,15 +118,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   />
                 </div>
                 <div v-if="job.deletion_job_ids && job.deletion_job_ids.length > 0">
-                  <div class="text-xs text-gray-400 mb-1">Deletion Job IDs ({{ job.deletion_job_ids.length }})</div>
+                  <div class="text-xs text-text-label mb-1">Deletion Job IDs ({{ job.deletion_job_ids.length }})</div>
                   <div v-for="(jobId, idx) in job.deletion_job_ids" :key="idx" class="font-mono text-xs break-all">
                     {{ jobId }}
                   </div>
                 </div>
               </div>
               <div v-if="typeof job.deletion_status === 'object' && job.deletion_status.failed">
-                <div class="text-xs text-gray-400 mb-1">Error</div>
-                <div class="text-sm text-red-500">{{ job.deletion_status.failed }}</div>
+                <div class="text-xs text-text-label mb-1">Error</div>
+                <div class="text-sm text-status-error-text">{{ job.deletion_status.failed }}</div>
               </div>
             </div>
           </section>
@@ -134,11 +134,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- Error Details (if present) -->
           <section v-if="job.error" class="flex flex-col gap-3">
             <h3 class="text-base font-semibold">Error Details</h3>
-            <div class="rounded-md border border-red-300 bg-red-50 p-4 flex items-start gap-3">
-              <OIcon name="error" size="md" class="text-red-500 mt-0.5 shrink-0" />
+            <div class="rounded-default border border-banner-error-soft-border bg-banner-error-soft-bg p-4 flex items-start gap-3">
+              <OIcon name="error" size="md" class="text-status-error-text mt-0.5 shrink-0" />
               <div class="flex-1 min-w-0">
-                <div class="text-xs text-gray-400 mb-1">Error Message</div>
-                <div class="text-sm text-red-700 whitespace-pre-wrap break-words">
+                <div class="text-xs text-text-label mb-1">Error Message</div>
+                <div class="text-sm text-banner-error-soft-text whitespace-pre-wrap break-words">
                   {{ job.error }}
                 </div>
               </div>
@@ -201,7 +201,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     <div v-else class="flex flex-col items-center justify-center p-4">
       <OIcon name="error-outline" style="width: 64px; height: 64px;" />
-      <div class="text-xl font-semibold mt-3 text-gray-400">Job not found</div>
+      <div class="text-xl font-semibold mt-3 text-text-muted">Job not found</div>
     </div>
   </ODrawer>
 </template>
diff --git a/web/src/components/pipelines/BackfillJobsList.vue b/web/src/components/pipelines/BackfillJobsList.vue
index f528c39c42..fdd19b1d6a 100644
--- a/web/src/components/pipelines/BackfillJobsList.vue
+++ b/web/src/components/pipelines/BackfillJobsList.vue
@@ -32,7 +32,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         placeholder="Status"
         clearable
         searchable
-        class="w-[150px]"
+        class="w-37.5"
         data-test="status-filter"
       />
       <OSelect
@@ -43,7 +43,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         placeholder="Pipeline"
         clearable
         searchable
-        class="w-[250px]"
+        class="w-62.5"
         data-test="pipeline-filter"
       />
       <OButton
@@ -74,7 +74,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     <!-- Jobs Table -->
     <div class="flex-1 min-h-0 overflow-hidden">
-      <div class="rounded-lg h-full">
+      <div class="rounded-default h-full">
           <OTable
             ref="qTableRef"
             :frame="false"
@@ -111,7 +111,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <!-- Bottom footer -->
             <template #bottom="{ totalRows }">
               <div
-                class="flex items-center o2-table-footer-title mr-4 py-2"
+                class="flex items-center text-xs font-normal mr-4 py-2"
               >
                 {{ totalRows }} Backfill Job{{ totalRows === 1 ? "" : "s" }}
               </div>
@@ -147,7 +147,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </OProgressBar>
                 </div>
                 <div
-                  class="text-xs text-text-primary whitespace-nowrap pr-2 w-24 shrink-0"
+                  class="text-xs text-text-body whitespace-nowrap pr-2 w-24 shrink-0"
                 >
                   <template v-if="row.chunks_total">
                     {{ row.chunks_completed || 0 }}/{{
@@ -278,22 +278,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
       <div v-if="errorDialogData">
         <div class="mb-3">
-          <div class="text-xs text-gray-400">Job ID</div>
-          <div class="text-sm text-weight-medium">
+          <div class="text-xs text-text-label">Job ID</div>
+          <div class="text-sm font-medium">
             {{ errorDialogData.job_id }}
           </div>
         </div>
 
         <div class="mb-3">
-          <div class="text-xs text-gray-400">Pipeline</div>
+          <div class="text-xs text-text-label">Pipeline</div>
           <div class="text-sm">
             {{ errorDialogData.pipeline_name || errorDialogData.pipeline_id }}
           </div>
         </div>
 
         <div>
-          <div class="text-xs text-gray-400 mb-2">Error Message</div>
-          <div class="p-3 rounded-md bg-[rgba(239,68,68,0.08)] border-l-[3px] border-l-[#ef4444] font-mono text-[13px] leading-[1.6] whitespace-pre-wrap wrap-break-word text-[#991b1b]">
+          <div class="text-xs text-text-label mb-2">Error Message</div>
+          <div class="p-3 rounded-default bg-banner-error-soft-bg border-l-[3px] border-l-status-negative font-mono text-compact leading-[1.6] whitespace-pre-wrap wrap-break-word text-banner-error-soft-text">
             {{ errorDialogData.error }}
           </div>
         </div>
diff --git a/web/src/components/pipelines/CreateBackfillJobDialog.vue b/web/src/components/pipelines/CreateBackfillJobDialog.vue
index e0b47969e1..ed1ea5e2d3 100644
--- a/web/src/components/pipelines/CreateBackfillJobDialog.vue
+++ b/web/src/components/pipelines/CreateBackfillJobDialog.vue
@@ -27,12 +27,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   >
     <template #header-left>
       <span
-        :class="[
-          'font-semibold px-2 py-1 rounded-md inline-block',
-          store.state.theme === 'dark'
-            ? 'text-blue-400 bg-blue-900/50'
-            : 'text-blue-600 bg-blue-50'
-        ]"
+        class="font-semibold px-2 py-1 rounded-default inline-block text-badge-blue-soft-text bg-badge-blue-soft-bg"
       >
         {{ pipelineName }}
         <OTooltip v-if="pipelineName && pipelineName.length > 25" :content="pipelineName" />
@@ -51,7 +46,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <div>
             <div class="flex items-center gap-4">
               <div class="text-sm font-medium whitespace-nowrap">
-                Time Range <span class="text-red-600">*</span>
+                Time Range <span class="text-status-error-text">*</span>
               </div>
               <OFormDateTimeRange
                 name="timerange"
@@ -63,16 +58,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </div>
             <div
               v-if="timerangeError"
-              class="text-xs text-red-600 mt-1"
+              class="text-xs text-status-error-text mt-1"
             >
               {{ timerangeError }}
             </div>
           </div>
 
           <!-- Advanced Options -->
-          <div class="collapsible-section card-container flex flex-col transition-all overflow-hidden bg-(--o2-card-bg) rounded-md shadow-[0_0_5px_1px_var(--o2-hover-shadow)] border border-[var(--o2-border-color,rgba(0,0,0,0.08))]" data-test="advanced-options-section">
+          <div class="collapsible-section flex flex-col transition-all overflow-hidden bg-card-glass-bg rounded-default shadow-[0_0_5px_1px_var(--color-hover-shadow)] border border-card-glass-border" data-test="advanced-options-section">
             <div
-              class="section-header flex items-center justify-between px-4 py-3 cursor-pointer shrink-0 border-b border-[rgba(0,0,0,0.08)] transition-all rounded-t-md select-none hover:bg-[rgba(0,0,0,0.04)] active:bg-[rgba(0,0,0,0.06)]"
+              class="section-header flex items-center justify-between px-4 py-3 cursor-pointer shrink-0 border-b border-border-default transition-all rounded-t-default select-none hover:bg-interactive-hover-bg active:bg-interactive-hover-bg"
               @click="showAdvanced = !showAdvanced"
             >
               <div class="flex items-center gap-2">
@@ -96,7 +91,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   <div class="text-sm font-medium mb-1">
                     Chunk Period (minutes)
                   </div>
-                  <div :class="['text-xs', store.state.theme === 'dark' ? 'text-gray-400' : 'text-gray-600']">
+                  <div class="text-xs text-text-secondary">
                     Size of each processing chunk
                   </div>
                 </div>
@@ -121,7 +116,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   <div class="text-sm font-medium mb-1">
                     Delay Between Chunks (seconds)
                   </div>
-                  <div :class="['text-xs', store.state.theme === 'dark' ? 'text-gray-400' : 'text-gray-600']">
+                  <div class="text-xs text-text-secondary">
                     Wait time between processing chunks
                   </div>
                 </div>
@@ -150,22 +145,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 />
                 <div
                   v-if="deleteBeforeBackfill"
-                  :class="[
-                    'mt-3 p-4 rounded-lg border',
-                    store.state.theme === 'dark'
-                      ? 'bg-orange-900/20 border-orange-700'
-                      : 'bg-orange-50 border-orange-400'
-                  ]"
+                  class="mt-3 p-4 rounded-default border bg-banner-warning-bg border-banner-warning-border"
                 >
                   <div class="flex items-start gap-3">
-                    <OIcon name="warning" size="md" class="mt-0.5 text-orange-500 dark:text-orange-400" />
+                    <OIcon name="warning" size="md" class="mt-0.5 text-banner-warning-text" />
                     <div>
-                      <div :class="['font-semibold mb-2', store.state.theme === 'dark' ? 'text-orange-200' : 'text-orange-900']">Warning: Irreversible Data Deletion</div>
-                      <div :class="['text-xs mb-3', store.state.theme === 'dark' ? 'text-orange-300' : 'text-orange-800']">
+                      <div class="font-semibold mb-2 text-banner-warning-text">Warning: Irreversible Data Deletion</div>
+                      <div class="text-xs mb-3 text-banner-warning-text">
                         This will permanently delete all data in the destination stream for the specified time range before running the backfill. This action cannot be undone.
                       </div>
-                      <div :class="['font-semibold text-sm mb-1', store.state.theme === 'dark' ? 'text-orange-200' : 'text-orange-900']">Time Alignment Requirements (UTC):</div>
-                      <ul :class="['text-xs ml-5 space-y-1 list-disc', store.state.theme === 'dark' ? 'text-orange-300' : 'text-orange-800']">
+                      <div class="font-semibold text-sm mb-1 text-banner-warning-text">Time Alignment Requirements (UTC):</div>
+                      <ul class="text-xs ml-5 space-y-1 list-disc text-banner-warning-text">
                         <li><strong>Logs</strong> streams: Times must align to hour boundaries in UTC (e.g., 10:00:00, not 10:15:00)</li>
                         <li><strong>Metrics/Traces</strong> streams: Times must align to day boundaries in UTC (e.g., 00:00:00)</li>
                       </ul>
@@ -180,14 +170,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- Estimated Info -->
           <div
             v-if="estimatedInfo"
-            :class="[
-              'p-3 rounded-lg border',
-              store.state.theme === 'dark'
-                ? 'bg-blue-900/20 border-blue-700'
-                : 'bg-blue-50 border-blue-200'
-            ]"
+            class="p-3 rounded-default border bg-banner-info-bg border-banner-info-border"
           >
-            <div :class="store.state.theme === 'dark' ? 'text-blue-200' : 'text-blue-800'">
+            <div class="text-banner-info-text">
               <div class="flex items-center gap-2 font-medium mb-1">
                 <OIcon name="schedule" size="sm" />
                 <span>Estimated Processing Time: {{ estimatedInfo.time }}</span>
@@ -199,7 +184,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </div>
 
           <!-- Error Message -->
-          <div v-if="errorMessage" class="text-red-500">
+          <div v-if="errorMessage" class="text-status-error-text">
             <OIcon name="error" size="sm" class="mr-2" />
             {{ errorMessage }}
           </div>
@@ -221,7 +206,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <p class="mb-4">
       You have selected to delete existing data before backfill. This will permanently delete all data in the destination stream for the specified time range.
     </p>
-    <p class="font-semibold text-red-600">
+    <p class="font-semibold text-status-error-text">
       This action CANNOT be undone or cancelled once the job is created.
     </p>
     <p class="mt-4">Are you sure you want to proceed?</p>
diff --git a/web/src/components/pipelines/EditBackfillJobDialog.vue b/web/src/components/pipelines/EditBackfillJobDialog.vue
index eea90b26f9..71d7d5986b 100644
--- a/web/src/components/pipelines/EditBackfillJobDialog.vue
+++ b/web/src/components/pipelines/EditBackfillJobDialog.vue
@@ -1,4 +1,4 @@
-<!-- Copyright 2026 OpenObserve Inc.
+<!-- Copyright 2026 OpenObserve Inc.
 
 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU Affero General Public License as published by
@@ -34,7 +34,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <div>
             <div class="flex items-center gap-4">
               <div class="text-sm font-medium whitespace-nowrap">
-                Time Range <span class="text-red-600">*</span>
+                Time Range <span class="text-status-error-text">*</span>
               </div>
               <OFormDateTimeRange
                 name="timerange"
@@ -46,7 +46,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </div>
             <div
               v-if="timerangeError"
-              class="text-xs text-red-600 mt-1"
+              class="text-xs text-status-error-text mt-1"
             >
               {{ timerangeError }}
             </div>
@@ -100,18 +100,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 />
                 <div
                   v-if="deleteBeforeBackfill"
-                  class="tw-mt-2 tw-p-3 tw-bg-orange-100 tw-rounded tw-border tw-border-orange-300"
+                  class="mt-2 p-3 rounded-default border bg-banner-warning-bg border-banner-warning-border"
                 >
                   <div class="flex items-start">
-                    <OIcon name="warning" size="sm" class="mr-2 tw-mt-0.5" />
-                    <div class="text-xs text-orange-800">
-                      <div class="tw-font-semibold tw-mb-1">Warning: Irreversible Data Deletion</div>
-                      <div class="tw-mb-2">
+                    <OIcon name="warning" size="sm" class="mr-2 mt-0.5" />
+                    <div class="text-xs text-banner-warning-text">
+                      <div class="font-semibold mb-1">Warning: Irreversible Data Deletion</div>
+                      <div class="mb-2">
                         This will permanently delete all data in the destination stream for the specified time
                         range before running the backfill. This action cannot be undone.
                       </div>
-                      <div class="tw-font-semibold tw-text-xs tw-mb-1">Time Alignment Requirements (UTC):</div>
-                      <ul class="tw-ml-5 tw-space-y-0.5 tw-list-disc tw-text-xs">
+                      <div class="font-semibold text-xs mb-1">Time Alignment Requirements (UTC):</div>
+                      <ul class="ml-5 space-y-0.5 list-disc text-xs">
                         <li><strong>Logs</strong> streams: Times must align to hour boundaries in UTC (e.g., 10:00:00, not 10:15:00)</li>
                         <li><strong>Metrics/Traces</strong> streams: Times must align to day boundaries in UTC (e.g., 00:00:00)</li>
                       </ul>
@@ -123,7 +123,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </OCollapsible>
 
       <!-- Error Message -->
-      <div v-if="errorMessage" class="text-red-500">
+      <div v-if="errorMessage" class="text-status-error-text">
         <OIcon name="error" size="sm" class="mr-2" />
         {{ errorMessage }}
       </div>
diff --git a/web/src/components/pipelines/PipelineHistory.vue b/web/src/components/pipelines/PipelineHistory.vue
index e7214bb16a..89c40aae68 100644
--- a/web/src/components/pipelines/PipelineHistory.vue
+++ b/web/src/components/pipelines/PipelineHistory.vue
@@ -49,7 +49,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           t(`pipeline.searchHistory`) || 'Select or search pipeline...'
         "
         data-test="pipeline-history-search-select"
-        class="min-w-[250px]"
+        class="min-w-62.5"
         clearable
       >
         <template #empty>
@@ -76,7 +76,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <div class="flex-1 min-h-0 overflow-hidden">
       <div
         data-test="pipeline-history-table"
-        class="pipeline-history-table card-container h-full"
+        class="pipeline-history-table bg-card-glass-bg h-full"
       >
         <OTable
           :frame="false"
@@ -84,6 +84,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :columns="columns"
           :column-visibility="columnVisibility"
           :default-columns="false"
+          show-index
           :enable-column-resize="true"
           :persist-columns="true"
           table-id="pipelines-pipeline-history-list"
@@ -146,7 +147,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <OTooltip :content="row.is_realtime ? 'Real-time' : 'Scheduled'">
               <OIcon
                 :name="row.is_realtime ? 'check-circle' : 'schedule'"
-                :class="row.is_realtime ? 'text-[var(--o2-positive)]' : 'text-gray-500'"
+                :class="row.is_realtime ? 'text-status-positive' : 'text-text-muted'"
                 size="md"
               />
             </OTooltip>
@@ -156,7 +157,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <OTooltip :content="row.is_silenced ? 'Silenced' : 'Not Silenced'">
               <OIcon
                 :name="row.is_silenced ? 'volume-off' : 'volume-up'"
-                :class="row.is_silenced ? 'text-gray-500' : 'text-[var(--o2-positive)]'"
+                :class="row.is_silenced ? 'text-text-muted' : 'text-status-positive'"
                 size="md"
               />
             </OTooltip>
@@ -176,7 +177,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 row.is_partial !== undefined
               "
               :name="row.is_partial ? 'warning' : 'check-circle'"
-              :class="row.is_partial ? 'text-[var(--o2-warning)]' : 'text-[var(--o2-positive)]'"
+              :class="row.is_partial ? 'text-warning' : 'text-status-positive'"
               size="xs"
             >
               <OTooltip
@@ -229,7 +230,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
           <template #bottom="{ totalRows }">
             <div
-              class="flex items-center o2-table-footer-title mr-4 py-2"
+              class="flex items-center text-xs font-normal mr-4 py-2"
             >
               {{ totalRows }} {{ t("pipeline.header") }}
             </div>
@@ -253,15 +254,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <div class="py-1">
             <div class="flex gap-3">
               <div class="w-1/2">
-                <div class="text-xs text-gray-400 mb-1">
+                <div class="text-xs text-text-label mb-1">
                   Pipeline Name
                 </div>
-                <div class="text-sm text-weight-medium">
+                <div class="text-sm font-medium">
                   {{ selectedRow.pipeline_name }}
                 </div>
               </div>
               <div class="w-1/2">
-                <div class="text-xs text-gray-400 mb-1">Status</div>
+                <div class="text-xs text-text-label mb-1">Status</div>
                 <OTag type="queryStatus" :value="selectedRow.status" />
               </div>
             </div>
@@ -273,13 +274,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <div class="py-1">
             <div class="flex gap-3">
               <div class="w-1/2">
-                <div class="text-xs text-gray-400 mb-1">Timestamp</div>
+                <div class="text-xs text-text-label mb-1">Timestamp</div>
                 <div class="text-sm">
                   {{ formatDate(selectedRow.timestamp) }}
                 </div>
               </div>
               <div class="w-1/2">
-                <div class="text-xs text-gray-400 mb-1">Duration</div>
+                <div class="text-xs text-text-label mb-1">Duration</div>
                 <div class="text-sm">
                   {{
                     formatDuration(
@@ -297,7 +298,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <div class="py-1">
             <div class="flex gap-3">
               <div class="w-1/2">
-                <div class="text-xs text-gray-400 mb-1">Type</div>
+                <div class="text-xs text-text-label mb-1">Type</div>
                 <div class="text-sm">
                   <OIcon
                     :name="selectedRow.is_realtime ? 'speed' : 'schedule'"
@@ -308,7 +309,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </div>
               </div>
               <div class="w-1/2">
-                <div class="text-xs text-gray-400 mb-1">Silenced</div>
+                <div class="text-xs text-text-label mb-1">Silenced</div>
                 <div class="text-sm">
                   <OIcon
                     v-if="selectedRow.is_silenced"
@@ -338,7 +339,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <div class="py-1">
               <div class="flex gap-3">
                 <div v-if="selectedRow.evaluation_took_in_secs" class="w-1/3">
-                  <div class="text-xs text-gray-400 mb-1">
+                  <div class="text-xs text-text-label mb-1">
                     Evaluation Time
                   </div>
                   <div class="text-sm">
@@ -346,17 +347,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </div>
                 </div>
                 <div v-if="selectedRow.query_took" class="w-1/3">
-                  <div class="text-xs text-gray-400 mb-1">Query Time</div>
+                  <div class="text-xs text-text-label mb-1">Query Time</div>
                   <div class="text-sm">
                     {{ (selectedRow.query_took / 1000).toFixed(2) }}ms
                   </div>
                 </div>
                 <div v-if="selectedRow.retries > 0" class="w-1/3">
-                  <div class="text-xs text-gray-400 mb-1">Retries</div>
+                  <div class="text-xs text-text-label mb-1">Retries</div>
                   <div class="text-sm">{{ selectedRow.retries }}</div>
                 </div>
                 <div v-if="selectedRow.delay_in_secs" class="w-1/3">
-                  <div class="text-xs text-gray-400 mb-1">Delay</div>
+                  <div class="text-xs text-text-label mb-1">Delay</div>
                   <div class="text-sm">{{ selectedRow.delay_in_secs }}s</div>
                 </div>
                 <div
@@ -366,7 +367,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   "
                   class="w-1/3"
                 >
-                  <div class="text-xs text-gray-400 mb-1">
+                  <div class="text-xs text-text-label mb-1">
                     Result Status
                   </div>
                   <div class="text-sm">
@@ -374,7 +375,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       :name="
                         selectedRow.is_partial ? 'warning' : 'check-circle'
                       "
-                      :class="['mr-1', selectedRow.is_partial ? 'text-[var(--o2-warning)]' : 'text-[var(--o2-positive)]']"
+                      :class="['mr-1', selectedRow.is_partial ? 'text-warning' : 'text-status-positive']"
                       size="xs"
                     />
                     {{ selectedRow.is_partial ? "Partial" : "Complete" }}
@@ -388,8 +389,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <template v-if="selectedRow.source_node">
             <OSeparator class="my-2" />
             <div class="py-1">
-              <div class="text-xs text-gray-400 mb-1">Source Node</div>
-              <div class="text-sm font-mono text-[13px]">
+              <div class="text-xs text-text-label mb-1">Source Node</div>
+              <div class="text-sm font-mono text-compact">
                 {{ selectedRow.source_node }}
               </div>
             </div>
@@ -399,21 +400,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <template v-if="selectedRow.error">
             <OSeparator class="my-2" />
             <div class="py-1">
-              <div class="text-xs text-gray-400 mb-1">
+              <div class="text-xs text-text-label mb-1">
                 <OIcon name="error" size="xs" class="mr-1" />
                 Error Details
               </div>
               <div
-                class="rounded border border-solid border-negative/30 p-2 mt-2 bg-red-500/5"
+                class="rounded-default border border-solid border-status-negative/30 p-2 mt-2 bg-status-error-bg"
               >
                 <pre
-                  class="text-sm"
+                  class="text-sm whitespace-pre-wrap m-0"
                   style="
-                    white-space: pre-wrap;
                     word-break: break-word;
-                    margin: 0;
-                    font-family: &quot;Courier New&quot;, monospace;
-                    font-size: 12px;
+                    font-family: var(--font-mono);
+                    font-size: var(--text-xs);
                   "
                   >{{ selectedRow.error }}</pre
                 >
@@ -425,21 +424,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <template v-if="selectedRow.success_response">
             <OSeparator class="my-2" />
             <div class="py-1">
-              <div class="text-xs text-gray-400 mb-1">
+              <div class="text-xs text-text-label mb-1">
                 <OIcon name="check-circle" size="xs" class="mr-1" />
                 Response
               </div>
               <div
-                class="rounded border border-solid border-positive/30 p-2 mt-2 bg-green-500/5"
+                class="rounded-default border border-solid border-status-positive/30 p-2 mt-2 bg-status-success-bg"
               >
                 <pre
-                  class="text-sm"
+                  class="text-sm whitespace-pre-wrap m-0"
                   style="
-                    white-space: pre-wrap;
                     word-break: break-word;
-                    margin: 0;
-                    font-family: &quot;Courier New&quot;, monospace;
-                    font-size: 12px;
+                    font-family: var(--font-mono);
+                    font-size: var(--text-xs);
                   "
                   >{{ selectedRow.success_response }}</pre
                 >
@@ -466,11 +463,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       @click:primary="closeErrorDialog"
     >
       <template #header-left>
-        <OIcon name="error" size="md" class="text-[#ef4444]" />
+        <OIcon name="error" size="md" class="text-status-error-text" />
       </template>
       <div class="mb-4">
-        <div class="text-[13px] font-semibold tracking-[0.02em] opacity-80 mb-2">Error Summary</div>
-        <div class="p-4 rounded-lg font-mono text-[13px] leading-[1.6] whitespace-pre-wrap wrap-break-word bg-[rgba(239,68,68,0.08)] border border-[rgba(239,68,68,0.2)] text-[#dc2626]">
+        <div class="text-compact font-semibold tracking-[0.02em] opacity-80 mb-2">Error Summary</div>
+        <div class="p-4 rounded-default font-mono text-compact leading-[1.6] whitespace-pre-wrap wrap-break-word bg-banner-error-soft-bg border border-banner-error-soft-border text-banner-error-soft-text">
           {{ errorMessage?.error }}
         </div>
       </div>
@@ -500,7 +497,7 @@ import pipelinesService from "@/services/pipelines";
 import http from "@/services/http";
 import OEmptyState from "@/lib/core/EmptyState/OEmptyState.vue";
 import { toast } from "@/lib/feedback/Toast/useToast";
-import { TABLE_INDEX_COL_SIZE, COL } from "@/lib/core/Table/OTable.types";
+import { COL } from "@/lib/core/Table/OTable.types";
 
 const { t } = useI18n();
 const store = useStore();
@@ -553,13 +550,6 @@ const errorMessage = ref<any>(null);
 
 // Table columns
 const columns = ref([
-  {
-    id: "row_number",
-    header: "#",
-    accessorKey: "#",
-    size: TABLE_INDEX_COL_SIZE,
-    meta: { align: "left" as const },
-  },
   {
     id: "pipeline_name",
     header: "Pipeline Name",
@@ -775,10 +765,6 @@ const fetchPipelineHistory = async () => {
       rows.value = (historyData.hits || []).map((hit: any, index: number) => ({
         ...hit,
         id: `${hit.timestamp}_${index}`,
-        "#":
-          index +
-          1 +
-          (pagination.value.page - 1) * pagination.value.rowsPerPage,
       }));
 
       // Update pagination total
diff --git a/web/src/components/pipelines/backfillJob.schema.ts b/web/src/components/pipelines/backfillJob.schema.ts
index 33e5618603..0994da2ebd 100644
--- a/web/src/components/pipelines/backfillJob.schema.ts
+++ b/web/src/components/pipelines/backfillJob.schema.ts
@@ -1,10 +1,9 @@
 // Copyright 2026 OpenObserve Inc.
 //
 // SHARED validation schema for the backfill-job form, imported by BOTH
-// CreateBackfillJobDialog.vue and EditBackfillJobDialog.vue (the two are
-// duplicates — one source of truth).
+// CreateBackfillJobDialog.vue and EditBackfillJobDialog.vue.
 //
-// Field ownership (R1-strict): every editable control is form-owned —
+// Field ownership: every editable control is form-owned —
 //   • timerange — the absolute start/end range, bridged through the
 //     OFormDateTimeRange wrapper as a single `{ type, from, to, period }` field
 //     and cross-field validated below (start>0/end>0/start<end).
@@ -12,13 +11,11 @@
 //   • delayBetweenChunks — optional numeric range 1..3600.
 //   • deleteBeforeBackfill — optional checkbox.
 //
-// Numeric semantics mirror the main baseline: only null/undefined are treated as
-// "absent" (field left blank → use the server default) and PASS. Everything else
-// is range-checked — in particular an empty string and 0 coerce to 0 and FAIL
-// (main did `Number(v) < min`, and `"" < 1` / `0 < 1` are true), so submit is
-// blocked with the range message. A non-numeric string (NaN, unreachable via a
-// number <input>) passes, mirroring main's short-circuiting comparisons.
-// (A number <input> emits a string, so the preprocess coerces.)
+// Numeric semantics: only null/undefined are treated as "absent" (field left
+// blank → use the server default) and PASS. Everything else is range-checked — in
+// particular an empty string and 0 coerce to 0 and FAIL, so submit is blocked with
+// the range message. A non-numeric string (NaN, unreachable via a number <input>)
+// passes. (A number <input> emits a string, so the preprocess coerces.)
 
 import { z } from "zod";
 
@@ -58,8 +55,7 @@ export const makeBackfillSchema = (
       deleteBeforeBackfill: z.boolean().optional(),
     })
     .superRefine((val, ctx) => {
-      // Cross-field time-range guard (replaces the old imperative toast/error
-      // checks in each dialog's @submit handler). Surfaced via path ["timerange"].
+      // Cross-field time-range guard. Surfaced via path ["timerange"].
       if (
         !val.timerange?.from ||
         val.timerange.from <= 0 ||
diff --git a/web/src/components/promql/components/LabelFilterEditor.vue b/web/src/components/promql/components/LabelFilterEditor.vue
index 860dd815a5..254bf26bad 100644
--- a/web/src/components/promql/components/LabelFilterEditor.vue
+++ b/web/src/components/promql/components/LabelFilterEditor.vue
@@ -1,6 +1,6 @@
 <template>
   <div data-test="promql-labelfilter-editor">
-    <div style="display: flex; flex-direction: row" class="pl-2">
+    <div class="pl-2 flex flex-row">
       <div
         data-test="promql-labelfilter-editor-label"
         class="text-sm whitespace-nowrap flex items-center min-w-21.5"
@@ -20,7 +20,7 @@
                 <OButton
                   variant="primary"
                   size="chip"
-                  class="!text-[12px]"
+                  class="!text-xs"
                   :data-test="`promql-label-filter-${index}`"
                 >
                   {{ computedLabel(label) }}
@@ -28,16 +28,16 @@
                 </OButton>
               </template>
               <div
-                class="p-4 shadow-[0px_3px_15px_rgba(0,0,0,0.1)] translate-y-2 rounded-none"
+                class="p-3"
                 :data-test="`promql-label-filter-${index}-menu`"
               >
-                <div style="width: 350px">
+                <div class="w-86 [&_.o-input-label]:text-xs [&_.o-input-label]:font-normal">
                   <!-- Label Selection -->
                   <OSelect
                     v-model="label.label"
                     :options="availableLabelOptions"
                     :label="t('metrics.labelFilterEditor.label')"
-                    class="label-filter-label-select showLabelOnTop normal-case! mb-2"
+                    class="label-filter-label-select showLabelOnTop normal-case! mb-1.5"
                     searchable
                     clearable
                     data-test="promql-label-select"
@@ -56,7 +56,7 @@
                     v-model="label.op"
                     :options="operatorOptions"
                     :label="t('metrics.labelFilterEditor.operator')"
-                    class="label-filter-operator-select showLabelOnTop mb-2"
+                    class="label-filter-operator-select showLabelOnTop mb-1.5"
                     data-test="promql-operator-select"
                   />
 
diff --git a/web/src/components/promql/components/MetricSelector.vue b/web/src/components/promql/components/MetricSelector.vue
index 9dbc737624..9e7cce70d3 100644
--- a/web/src/components/promql/components/MetricSelector.vue
+++ b/web/src/components/promql/components/MetricSelector.vue
@@ -1,6 +1,6 @@
 <template>
   <div data-test="promql-metric-selector" class="mb-2">
-    <div style="display: flex; flex-direction: row" class="pl-3">
+    <div class="pl-3 flex flex-row">
       <div
         data-test="promql-metric-selector-label"
         class="text-sm whitespace-nowrap flex items-center min-w-32.5"
diff --git a/web/src/components/promql/components/OperationsList.vue b/web/src/components/promql/components/OperationsList.vue
index 954fd5dfae..5915b7e14d 100644
--- a/web/src/components/promql/components/OperationsList.vue
+++ b/web/src/components/promql/components/OperationsList.vue
@@ -1,5 +1,5 @@
 <template>
-    <div style="display: flex; flex-direction: row" class="pl-2">
+    <div class="pl-2 flex flex-row">
       <div
         data-test="promql-operations-list-label"
         class="text-sm whitespace-nowrap flex items-center min-w-21.5"
@@ -21,7 +21,7 @@
                 <OButton
                   variant="outline"
                   size="icon-chip"
-                  class="drag-handle cursor-grab"
+                  class="drag-handle cursor-grab active:cursor-grabbing"
                   :data-test="`promql-operation-drag-${index}`"
                 >
                   <template #icon-left>
@@ -34,7 +34,7 @@
                     <OButton
                       variant="primary"
                       size="chip"
-                      class="!text-[12px]"
+                      class="!text-xs"
                       :no-wrap="true"
                       :data-test="`promql-operation-${index}`"
                     >
@@ -45,14 +45,17 @@
                     </OButton>
                   </template>
                   <div
-                    class="operations-list-dropdown p-4 shadow-[0px_3px_15px_rgba(0,0,0,0.1)] translate-y-2 rounded-none"
+                    class="operations-list-dropdown p-3"
                     :data-test="`promql-operation-${index}-menu`"
                   >
-                    <div style="width: 350px">
-                      <div class="text-weight-medium">
+                    <div class="w-86 [&_.o-input-label]:text-xs [&_.o-input-label]:font-normal">
+                      <div class="font-medium">
                         {{ getStepSpec(element.id)?.name || element.id }}
                       </div>
-                      <div class="text-xs text-gray-400">
+                      <div
+                        v-if="getStepSpec(element.id)?.documentation"
+                        class="text-xs text-text-secondary mb-2"
+                      >
                         {{ getStepSpec(element.id)?.documentation }}
                       </div>
 
@@ -69,7 +72,7 @@
                           v-model.number="element.params[paramIndex] as number"
                           type="number"
                           :label="param.name"
-                          class="showLabelOnTop mb-2"
+                          class="showLabelOnTop mb-1.5"
                           :data-test="`promql-operation-param-${paramIndex}`"
                         />
 
@@ -79,7 +82,7 @@
                           v-model="element.params[paramIndex] as string"
                           :label="param.name"
                           :placeholder="param.placeholder"
-                          class="showLabelOnTop mb-2"
+                          class="showLabelOnTop mb-1.5"
                           :data-test="`promql-operation-param-${paramIndex}`"
                         />
 
@@ -91,7 +94,7 @@
                           :label="param.name"
                           multiple
                           searchable
-                          class="operation-label-selector showLabelOnTop no-case mb-2"
+                          class="operation-label-selector showLabelOnTop no-case mb-1.5"
                           :data-test="`promql-operation-param-${paramIndex}`"
                         >
                           <template #empty>
@@ -140,8 +143,8 @@
         clearable
       />
 
-      <div style="max-height: 400px; overflow-y: auto">
-        <div class="border border-border rounded-md divide-y divide-border">
+      <div class="overflow-y-auto" style="max-height: 400px">
+        <div class="border border-border rounded-default divide-y divide-border">
           <div
             v-for="category in categories"
             :key="category"
@@ -289,21 +292,3 @@ defineExpose({
   availableLabels,
 });
 </script>
-
-<style>
-/* Deep override — must stay in CSS */
-:deep(
-  .operation-label-selector.q-field--labeled.showLabelOnTop.q-select
-    .q-field__control-container
-    .q-field__native
-    > :first-child
-) {
-  text-transform: none;
-  max-width: 75% !important;
-}
-
-/* drag-handle :active state — compound pseudo-class selector, keep in CSS */
-.drag-handle:active {
-  cursor: grabbing;
-}
-</style>
diff --git a/web/src/components/promql/components/PromQLBuilderOptions.vue b/web/src/components/promql/components/PromQLBuilderOptions.vue
index e8edf9bad0..e3a38606f4 100644
--- a/web/src/components/promql/components/PromQLBuilderOptions.vue
+++ b/web/src/components/promql/components/PromQLBuilderOptions.vue
@@ -21,7 +21,7 @@
           >
             <span
               data-test="promql-builder-options-field-label"
-              class="text-[11px] font-medium whitespace-nowrap opacity-85"
+              class="text-2xs font-medium whitespace-nowrap opacity-85"
             >{{ t("dashboard.legendLabel") }}</span>
             <div
               data-test="promql-builder-options-field-input-wrapper"
@@ -64,7 +64,7 @@
           >
             <span
               data-test="promql-builder-options-field-label"
-              class="text-[11px] font-medium whitespace-nowrap opacity-85"
+              class="text-2xs font-medium whitespace-nowrap opacity-85"
             >{{ t("dashboard.stepValue") }}</span>
             <OInput
               v-model="
@@ -101,7 +101,7 @@
           >
             <span
               data-test="promql-builder-options-field-label"
-              class="text-[11px] font-medium whitespace-nowrap opacity-85"
+              class="text-2xs font-medium whitespace-nowrap opacity-85"
             >{{ t("common.type") }}</span>
             <OSelect
               v-model="
@@ -174,7 +174,7 @@ export default defineComponent({
       currentQuery.config.query_type = "range";
     }
 
-    // Query type options for q-select
+    // Query type options for the select
     const queryTypeOptions = [
       {
         label: t("metrics.promQLBuilderOptions.range"),
diff --git a/web/src/components/promql/operations/queryModeller.ts b/web/src/components/promql/operations/queryModeller.ts
index d55b4e5d91..86451d8a51 100644
--- a/web/src/components/promql/operations/queryModeller.ts
+++ b/web/src/components/promql/operations/queryModeller.ts
@@ -66,8 +66,8 @@ class PromqlRendererImpl implements PromqlRenderer {
     operation: PromqlStep,
     innerExpr: string
   ): string {
-    // A panel saved before the scalar-math steps were renamed still carries the
-    // old id, so resolve it before anything looks it up or switches on it.
+    // A panel may persist an old scalar-math step id, so resolve it before
+    // anything looks it up or switches on it.
     const id = normalizeStepId(operation.id);
     const def = this.operations.get(id);
     if (!def) return innerExpr;
diff --git a/web/src/components/promql/types/index.ts b/web/src/components/promql/types/index.ts
index a26b8c3c23..861988268f 100644
--- a/web/src/components/promql/types/index.ts
+++ b/web/src/components/promql/types/index.ts
@@ -78,12 +78,8 @@ export interface PromqlBuilderQuery {
 }
 
 /**
- * How the step picker groups the catalog.
- *
- * Grouping is ours to choose — PromQL has no notion of it. We cut it by what a
- * step DOES to the data, which is the question someone building a query is
- * actually asking: turn a counter into a rate, collapse series together, do
- * arithmetic, ask about the clock.
+ * How the step picker groups the catalog. Grouping is ours to choose — PromQL
+ * has no notion of it; we group by what a step DOES to the data.
  */
 export enum PromqlStepGroup {
   /** Counter -> per-second rate, and anything else that reads over a window. */
@@ -186,22 +182,17 @@ export enum PromqlStepId {
 }
 
 /**
- * Step ids as panels saved before the scalar-math steps were renamed.
+ * Legacy step ids for the scalar-math steps under their old names.
  *
  * A dashboard persists the step id verbatim, so an id that has ever been
- * written to a panel cannot simply stop being understood — a panel saved last
- * year has to keep rendering. Every id is therefore READ through
- * {@link normalizeStepId}, and the builder rewrites what it reads (see
- * {@link normalizeSteps}), so a panel is upgraded to the current ids the next
- * time it is saved.
+ * written to a panel must keep resolving. Every id is READ through
+ * {@link normalizeStepId}, and {@link normalizeSteps} rewrites it so a panel is
+ * upgraded to the current ids the next time it is saved.
  *
- * That is the path to RETIRING this table — but it is not retirable yet, and it
- * cannot be retired on the strength of frontend saves alone. A panel only
- * migrates when someone opens it in the builder and the dashboard is then
- * saved; a panel nobody edits keeps its old ids indefinitely. Removing an entry
- * here is therefore safe only once a backfill has been run over stored
- * dashboards and none is left holding one. Until then, deleting an entry
- * silently breaks every panel that still has it: the scalar step stops
+ * GOTCHA: do not delete an entry until a backfill has run over stored
+ * dashboards. A panel only migrates when someone opens it in the builder and
+ * saves; a panel nobody edits keeps its old ids indefinitely. Deleting an entry
+ * silently breaks every panel that still has it — the scalar step stops
  * resolving and vanishes from the rendered query, changing the numbers on the
  * chart with nothing to indicate it happened.
  */
diff --git a/web/src/components/queries/QueryList.vue b/web/src/components/queries/QueryList.vue
index 974bf34493..9d0d99228a 100644
--- a/web/src/components/queries/QueryList.vue
+++ b/web/src/components/queries/QueryList.vue
@@ -172,9 +172,3 @@ export default defineComponent({
 });
 </script>
 
-<style>
-/* Hides OTable's thead — deep structural override, must stay in CSS */
-.o2-table-hide-header thead {
-  display: none;
-}
-</style>
diff --git a/web/src/components/queries/RunningQueries.spec.ts b/web/src/components/queries/RunningQueries.spec.ts
index 4176a806f6..d406d4c4b6 100644
--- a/web/src/components/queries/RunningQueries.spec.ts
+++ b/web/src/components/queries/RunningQueries.spec.ts
@@ -147,20 +147,7 @@ describe("RunningQueries", () => {
           $store: store,
         },
         stubs: {
-          "q-table": true,
-          "q-btn": true,
-          "q-input": true,
-          "q-select": true,
-          "q-tab": true,
-          "q-tab-panel": true,
-          "q-tab-panels": true,
-          "q-tabs": true,
-          "q-card": true,
-          "q-card-section": true,
-          "q-card-actions": true,
-          "q-separator": true,
           "OIcon": true,
-          "q-tooltip": true,
           "confirm-dialog": true,
           "query-list": true,
           "running-queries-list": true,
@@ -525,9 +512,7 @@ describe("RunningQueries", () => {
     await wrapper.vm.$nextTick();
     const rows = wrapper.vm.summaryRows;
     expect(Array.isArray(rows)).toBe(true);
-    if (rows.length > 0) {
-      expect(rows[0]).toHaveProperty("#");
-    }
+    // "#" is no longer injected into row data — it's OTable's built-in show-index.
   });
 
   // Test 36: rowsQuery computed property
@@ -539,7 +524,6 @@ describe("RunningQueries", () => {
     const rows = wrapper.vm.rowsQuery;
     expect(Array.isArray(rows)).toBe(true);
     if (rows.length > 0) {
-      expect(rows[0]).toHaveProperty("#");
       expect(rows[0]).toHaveProperty("user_id");
       expect(rows[0]).toHaveProperty("duration");
       expect(rows[0]).toHaveProperty("queryRange");
@@ -604,7 +588,6 @@ describe("RunningQueries", () => {
     expect(columns.length).toBeGreaterThan(0);
     
     const columnNames = columns.map((col: any) => col.name);
-    expect(columnNames).toContain("#");
     expect(columnNames).toContain("user_id");
     expect(columnNames).toContain("actions");
   });
diff --git a/web/src/components/queries/RunningQueries.vue b/web/src/components/queries/RunningQueries.vue
index c8d0dff0eb..637b93b486 100644
--- a/web/src/components/queries/RunningQueries.vue
+++ b/web/src/components/queries/RunningQueries.vue
@@ -15,27 +15,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div
+  <OPageLayout
     v-if="isMetaOrg"
-    class="rounded-md p-0 flex flex-col h-full"
+    :title="t('queries.runningQueries')"
+    icon="query-stats"
+    :subtitle="'Inspect and cancel running queries'"
+    bleed
   >
-    <div class="flex-none">
-      <div class="card-container">
-        <div
-          class="flex flex-col px-4 py-3 border-b-[1px]"
-          style="position: sticky; top: 0; z-index: 1000;"
-        >
-          <!-- Standard section header: title + actions only. Filters live in the
-               band below (directly above the table). -->
-          <AppPageHeader
-            :title="t('queries.runningQueries')"
-            icon="query-stats"
-            :subtitle="'Inspect and cancel running queries'"
-            class="-mx-4 px-4 border-b border-border-default mb-3"
-          />
+    <!-- Filters live in the sub-nav band directly above the table. -->
+    <template #subnav>
           <div
             data-test="running-queries-filter-container"
-            class="flex justify-start items-center gap-3"
+            class="flex justify-start items-center gap-3 px-page-edge py-2"
           >
             <OToggleGroup
               :model-value="selectedQueryTypeTab"
@@ -57,7 +48,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :options="searchFieldOptions"
                 labelKey="label"
                 valueKey="value"
-                class="p-0 w-[140px]"
+                class="p-0 w-35"
                 data-test="running-queries-search-fields-select"
                 @update:model-value="filterQuery = ''"
               />
@@ -69,25 +60,23 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :placeholder="t('queries.search')"
               data-test="running-queries-search-input"
             />
-            <div v-else class="o2-select-input o2-input w-[250px]">
+            <div v-else class="o2-select-input o2-input w-62.5">
               <OSelect
                 v-model="filterQuery"
                 placeholder="Select option"
                 :options="otherFieldOptions"
                 labelKey="label"
                 valueKey="value"
-                class="no-border search-input w-[250px]"
+                class="no-border search-input w-62.5"
                 data-test="running-queries-search-input"
               />
             </div>
           </div>
-        </div>
-      </div>
-    </div>
+    </template>
 
     <div class="flex-1 min-h-0">
       <div class="w-full h-full">
-        <div class="card-container h-full">
+        <div class="bg-card-glass-bg h-full">
           <div
             v-show="selectedQueryTypeTab === 'all'"
             class="h-full"
@@ -137,6 +126,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       @update:cancel="deleteDialog.show = false"
     />
     <ODrawer
+      bleed
       v-model:open="showListSchemaDialog"
       size="xl"
       :show-close="false"
@@ -145,7 +135,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     >
       <QueryList :schemaData="schemaData" @close="showListSchemaDialog = false" />
     </ODrawer>
-  </div>
+  </OPageLayout>
 </template>
 
 <script lang="ts">
@@ -177,11 +167,11 @@ import { getDuration } from "@/utils/zincutils";
 import { toast } from "@/lib/feedback/Toast/useToast";
 import { useShortcuts } from "@/lib/vue-shortcut-manager";
 import { focusSearchInput, isInputFocused } from "@/utils/keyboardShortcuts";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 
 export default defineComponent({
   name: "RunningQueries",
-  components: { AppPageHeader, QueryList, ConfirmDialog, RunningQueriesList, SummaryList, OToggleGroup, OToggleGroupItem, ODrawer, OSelect, OSearchInput,
+  components: { OPageLayout, QueryList, ConfirmDialog, RunningQueriesList, SummaryList, OToggleGroup, OToggleGroupItem, ODrawer, OSelect, OSearchInput,
 },
   setup() {
     const store = useStore();
@@ -287,9 +277,8 @@ export default defineComponent({
           {},
         );
 
-        return Object.values(result).map((user: any, index: number) => ({
+        return Object.values(result).map((user: any) => ({
           ...user,
-          "#": index + 1,
           duration: user.duration,
           queryRange: user.queryRange,
         }));
@@ -405,12 +394,6 @@ export default defineComponent({
     };
 
     const columns = ref<{ name: string; label: string; field: string; align?: string; sortable?: boolean }[]>([
-      {
-        name: "#",
-        label: "#",
-        field: "#",
-        align: "left",
-      },
       {
         name: "user_id",
         field: "user_id",
@@ -706,10 +689,9 @@ export default defineComponent({
 
       rows.sort((a: any, b: any) => b.created_at - a.created_at);
 
-      return rows.map((row, index) => {
+      return rows.map((row: any) => {
         return {
           ...row,
-          "#": index < 9 ? `0${index + 1}` : index + 1,
         };
       });
     });
@@ -719,7 +701,7 @@ export default defineComponent({
 
       rows.sort((a: any, b: any) => b.created_at - a.created_at);
 
-      return rows.map((row: any, index) => {
+      return rows.map((row: any) => {
         const search_type = row?.search_type;
         var query_source = "-unknown-";
 
@@ -730,7 +712,6 @@ export default defineComponent({
         }
 
         return {
-          "#": index < 9 ? `0${index + 1}` : index + 1,
           user_id: row?.user_id,
           org_id: row?.org_id,
           duration: getDuration(row.created_at).durationInSeconds,
diff --git a/web/src/components/queries/RunningQueriesList.spec.ts b/web/src/components/queries/RunningQueriesList.spec.ts
index a5266ac7c8..595688161f 100644
--- a/web/src/components/queries/RunningQueriesList.spec.ts
+++ b/web/src/components/queries/RunningQueriesList.spec.ts
@@ -155,15 +155,10 @@ describe('RunningQueriesList.vue', () => {
     });
 
     it('should have correct number of columns', () => {
-      expect(wrapper.vm.columns).toHaveLength(11);
+      expect(wrapper.vm.columns).toHaveLength(10);
     });
 
-    it('should have correct column for row number', () => {
-      const column = wrapper.vm.columns.find((col: any) => col.id === '#');
-      expect(column).toBeDefined();
-      expect(column.accessorKey).toBe('#');
-      expect(column.header).toBe('#');
-    });
+    // Row numbering moved to OTable's built-in show-index (no '#' column).
 
     it('should have correct column for user_id', () => {
       const column = wrapper.vm.columns.find((col: any) => col.id === 'user_id');
diff --git a/web/src/components/queries/RunningQueriesList.vue b/web/src/components/queries/RunningQueriesList.vue
index b6a2958172..7e410ca4af 100644
--- a/web/src/components/queries/RunningQueriesList.vue
+++ b/web/src/components/queries/RunningQueriesList.vue
@@ -30,6 +30,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       sorting="client"
       filter-mode="client"
       :default-columns="false"
+      show-index
       :enable-column-resize="true"
       :persist-columns="true"
       table-id="settings-query-management"
@@ -127,6 +128,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </template>
     </OTable>
     <ODrawer
+      bleed
       v-model:open="showListSchemaDialog"
       size="lg"
       data-test="list-schema-dialog"
@@ -154,7 +156,7 @@ import OTable from "@/lib/core/Table/OTable.vue";
 import OUserCell from "@/lib/core/Table/cells/OUserCell.vue";
 import OTag from "@/lib/core/Badge/OTag.vue";
 import type { OTableColumnDef } from "@/lib/core/Table/OTable.types";
-import { TABLE_INDEX_COL_SIZE, COL } from "@/lib/core/Table/OTable.types";
+import { COL } from "@/lib/core/Table/OTable.types";
 
 export default defineComponent({
   name: "RunningQueriesList",
@@ -212,7 +214,6 @@ export default defineComponent({
     };
 
     const columns: OTableColumnDef[] = [
-      { id: "#", header: "#", accessorKey: "#", size: TABLE_INDEX_COL_SIZE, meta: { align: "left" } },
       {
         id: "user_id",
         header: t("user.email"),
@@ -356,8 +357,8 @@ export default defineComponent({
 });
 </script>
 
-<style>
-/* Deep override for empty-state image spacing — must stay in CSS */
+<style scoped>
+/* keep(lib-override): empty-state image spacing (child EmptyState DOM) */
 :deep(.no-data-image) {
   margin-bottom: 0.5rem;
 }
diff --git a/web/src/components/queries/SummaryList.spec.ts b/web/src/components/queries/SummaryList.spec.ts
index 86df35a4a7..8a54945b3c 100644
--- a/web/src/components/queries/SummaryList.spec.ts
+++ b/web/src/components/queries/SummaryList.spec.ts
@@ -136,14 +136,13 @@ describe("SummaryList.vue", () => {
   // Test 10: Test columns structure (OTable format: id/accessorKey/header)
   it("should have correct column structure", () => {
     const columns = wrapper.vm.columns;
-    expect(columns).toHaveLength(7);
-    expect(columns[0].id).toBe("#");
-    expect(columns[1].id).toBe("user_id");
-    expect(columns[2].id).toBe("search_type_label");
-    expect(columns[3].id).toBe("numOfQueries");
-    expect(columns[4].id).toBe("duration");
-    expect(columns[5].id).toBe("queryRange");
-    expect(columns[6].id).toBe("actions");
+    expect(columns).toHaveLength(6);
+    expect(columns[0].id).toBe("user_id");
+    expect(columns[1].id).toBe("search_type_label");
+    expect(columns[2].id).toBe("numOfQueries");
+    expect(columns[3].id).toBe("duration");
+    expect(columns[4].id).toBe("queryRange");
+    expect(columns[5].id).toBe("actions");
   });
 
   // Test 14: Test confirmDeleteAction function
@@ -212,12 +211,12 @@ describe("SummaryList.vue", () => {
   // Test 21: Test columns have correct labels (OTable format uses `header`)
   it("should have correct column headers", () => {
     const columns = wrapper.vm.columns;
-    expect(columns[1].header).toBe(wrapper.vm.t("user.email"));
-    expect(columns[2].header).toBe(wrapper.vm.t("queries.searchType"));
-    expect(columns[3].header).toBe(wrapper.vm.t("queries.numOfQueries"));
-    expect(columns[4].header).toBe(wrapper.vm.t("queries.totalDuration"));
-    expect(columns[5].header).toBe(wrapper.vm.t("queries.totalTimeRange"));
-    expect(columns[6].header).toBe(wrapper.vm.t("common.actions"));
+    expect(columns[0].header).toBe(wrapper.vm.t("user.email"));
+    expect(columns[1].header).toBe(wrapper.vm.t("queries.searchType"));
+    expect(columns[2].header).toBe(wrapper.vm.t("queries.numOfQueries"));
+    expect(columns[3].header).toBe(wrapper.vm.t("queries.totalDuration"));
+    expect(columns[4].header).toBe(wrapper.vm.t("queries.totalTimeRange"));
+    expect(columns[5].header).toBe(wrapper.vm.t("common.actions"));
   });
 
   // Test 22: Test columns have correct alignment (OTable format uses `meta.align`)
@@ -225,21 +224,20 @@ describe("SummaryList.vue", () => {
     const columns = wrapper.vm.columns;
     expect(columns[0].meta.align).toBe("left");
     expect(columns[1].meta.align).toBe("left");
-    expect(columns[2].meta.align).toBe("left");
-    expect(columns[3].meta.align).toBe("right");
+    expect(columns[2].meta.align).toBe("right");
+    expect(columns[3].meta.align).toBe("left");
     expect(columns[4].meta.align).toBe("left");
-    expect(columns[5].meta.align).toBe("left");
-    expect(columns[6].meta.align).toBe("center");
+    expect(columns[5].meta.align).toBe("center");
   });
 
   // Test 23: Test columns sortable property
   it("should have correct sortable columns", () => {
     const columns = wrapper.vm.columns;
+    expect(columns[0].sortable).toBe(true);
     expect(columns[1].sortable).toBe(true);
     expect(columns[2].sortable).toBe(true);
     expect(columns[3].sortable).toBe(true);
     expect(columns[4].sortable).toBe(true);
-    expect(columns[5].sortable).toBe(true);
   });
 
   // Test 24: Test showListSchemaDialog initial value
@@ -265,7 +263,7 @@ describe("SummaryList.vue", () => {
 
   // Test 29: Test "cancel" icon
   it('should render "cancel" icon in the page', () => {
-    // After q-icon → OIcon migration, "cancel" is the OIcon name prop
+    // "cancel" is the OIcon name prop
     const cancelIcons = wrapper
       .findAllComponents({ name: "OIcon" })
       .filter((i: any) => i.props("name") === "cancel");
diff --git a/web/src/components/queries/SummaryList.vue b/web/src/components/queries/SummaryList.vue
index 20b60f170e..c8f46ddeb4 100644
--- a/web/src/components/queries/SummaryList.vue
+++ b/web/src/components/queries/SummaryList.vue
@@ -27,9 +27,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     selection="multiple"
     v-model:selected-ids="selectedIds"
     @row-click="getAllUserQueries"
-    style="width: 100%"
+    class="w-full"
     :show-global-filter="false"
     :default-columns="false"
+    show-index
     :enable-column-resize="true"
     :persist-columns="true"
     table-id="settings-query-management-summary"
@@ -111,7 +112,7 @@ import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
 import { durationFormatter } from "@/utils/zincutils";
 import OSpinner from "@/lib/feedback/Spinner/OSpinner.vue";
 import OCheckbox from "@/lib/forms/Checkbox/OCheckbox.vue";
-import { TABLE_INDEX_COL_SIZE, COL } from "@/lib/core/Table/OTable.types";
+import { COL } from "@/lib/core/Table/OTable.types";
 
 export default defineComponent({
   name: "RunningQueriesList",
@@ -162,7 +163,6 @@ export default defineComponent({
     const pageSizeOptions = [5, 10, 20, 50, 100];
 
     const columns = ref<OTableColumnDef[]>([
-      { id: "#", header: "#", accessorKey: "#", size: TABLE_INDEX_COL_SIZE, meta: { align: "left" } },
       { id: "user_id", header: t("user.email"), accessorKey: "user_id", size: COL.email, sortable: true, hideable: true, meta: { align: "left" , autoWidth: true } },
       { id: "search_type_label", header: t("queries.searchType"), accessorKey: "search_type_label", size: 130, sortable: true, hideable: true, meta: { align: "left"  } },
       { id: "numOfQueries", header: t("queries.numOfQueries"), accessorKey: "numOfQueries", size: 170, sortable: true, hideable: true, meta: { align: "right" } },
@@ -214,8 +214,8 @@ export default defineComponent({
 });
 </script>
 
-<style>
-/* Deep override for empty-state image spacing */
+<style scoped>
+/* keep(complex-state): :deep override of a child empty-state image's spacing */
 :deep(.no-data-image) {
   margin-bottom: 0.5rem;
 }
diff --git a/web/src/components/query-plan/CollapsibleProjection.spec.ts b/web/src/components/query-plan/CollapsibleProjection.spec.ts
deleted file mode 100644
index 24a87f046f..0000000000
--- a/web/src/components/query-plan/CollapsibleProjection.spec.ts
+++ /dev/null
@@ -1,202 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { describe, expect, it, beforeEach, afterEach } from "vitest";
-import { mount, VueWrapper } from "@vue/test-utils";
-import CollapsibleProjection from "./CollapsibleProjection.vue";
-
-describe("CollapsibleProjection", () => {
-  let wrapper: VueWrapper;
-
-  afterEach(() => {
-    wrapper?.unmount();
-  });
-
-  function mountComponent(props: Record<string, unknown> = {}) {
-    return mount(CollapsibleProjection, {
-      props: {
-        fieldsText: "[field1, field2]",
-        ...props,
-      },
-    });
-  }
-
-  describe("initial render", () => {
-    it("should render without errors", () => {
-      wrapper = mountComponent();
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it("should render as a span element", () => {
-      wrapper = mountComponent();
-      expect(wrapper.element.tagName).toBe("SPAN");
-    });
-  });
-
-  describe("non-collapsible (fields <= threshold)", () => {
-    it("should show full text when field count is below threshold", () => {
-      wrapper = mountComponent({
-        fieldsText: "[field1, field2, field3]",
-        threshold: 5,
-      });
-      expect(wrapper.text()).toContain("[field1, field2, field3]");
-    });
-
-    it("should show full text when field count equals threshold", () => {
-      wrapper = mountComponent({
-        fieldsText: "[a, b, c, d, e]",
-        threshold: 5,
-      });
-      expect(wrapper.text()).toContain("[a, b, c, d, e]");
-    });
-
-    it("should not show expand link when not collapsible", () => {
-      wrapper = mountComponent({
-        fieldsText: "[field1, field2]",
-        threshold: 5,
-      });
-      expect(wrapper.find(".expand-link").exists()).toBe(false);
-    });
-
-    it("should show text directly when no brackets present", () => {
-      wrapper = mountComponent({
-        fieldsText: "SomeOperator",
-        threshold: 5,
-      });
-      expect(wrapper.text()).toContain("SomeOperator");
-    });
-  });
-
-  describe("collapsible (fields > threshold)", () => {
-    const manyFieldsText =
-      "[field1, field2, field3, field4, field5, field6, field7]";
-
-    it("should show truncated view when field count exceeds threshold", () => {
-      wrapper = mountComponent({ fieldsText: manyFieldsText, threshold: 5 });
-      // Should show "... N more ▼" expand link
-      expect(wrapper.find(".expand-link").exists()).toBe(true);
-    });
-
-    it("should show correct hidden count in expand link", () => {
-      wrapper = mountComponent({ fieldsText: manyFieldsText, threshold: 5 });
-      // 7 fields total, 3 visible, 4 hidden
-      expect(wrapper.find(".expand-link").text()).toContain("4 more");
-    });
-
-    it("should not show collapse link when collapsed", () => {
-      wrapper = mountComponent({ fieldsText: manyFieldsText, threshold: 5 });
-      expect(wrapper.find(".expand-link").text()).not.toContain("collapse");
-    });
-
-    it("should expand when expand link is clicked", async () => {
-      wrapper = mountComponent({ fieldsText: manyFieldsText, threshold: 5 });
-      await wrapper.find(".expand-link").trigger("click");
-      // After expand, collapse link should appear
-      expect(wrapper.find(".expand-link").text()).toContain("collapse");
-    });
-
-    it("should show all fields text when expanded", async () => {
-      wrapper = mountComponent({ fieldsText: manyFieldsText, threshold: 5 });
-      await wrapper.find(".expand-link").trigger("click");
-      expect(wrapper.text()).toContain("field1");
-      expect(wrapper.text()).toContain("field7");
-    });
-
-    it("should collapse back when collapse link is clicked", async () => {
-      wrapper = mountComponent({ fieldsText: manyFieldsText, threshold: 5 });
-      // expand first
-      await wrapper.find(".expand-link").trigger("click");
-      expect(wrapper.find(".expand-link").text()).toContain("collapse");
-      // collapse
-      await wrapper.find(".expand-link").trigger("click");
-      expect(wrapper.find(".expand-link").text()).toContain("more");
-    });
-  });
-
-  describe("threshold prop", () => {
-    it("should use default threshold of 5 when not specified", () => {
-      // 5 fields — at threshold, not collapsible
-      wrapper = mountComponent({ fieldsText: "[a, b, c, d, e]" });
-      expect(wrapper.find(".expand-link").exists()).toBe(false);
-    });
-
-    it("should respect custom threshold", () => {
-      // 3 fields with threshold=2 → collapsible
-      wrapper = mountComponent({
-        fieldsText: "[a, b, c]",
-        threshold: 2,
-      });
-      expect(wrapper.find(".expand-link").exists()).toBe(true);
-    });
-
-    it("should not collapse when fields count equals custom threshold", () => {
-      wrapper = mountComponent({
-        fieldsText: "[a, b]",
-        threshold: 2,
-      });
-      expect(wrapper.find(".expand-link").exists()).toBe(false);
-    });
-  });
-
-  describe("field parsing", () => {
-    it("should correctly parse comma-separated fields", () => {
-      wrapper = mountComponent({
-        fieldsText: "[a, b, c, d, e, f]",
-        threshold: 5,
-      });
-      // 6 fields, 3 visible, 3 hidden
-      expect(wrapper.find(".expand-link").text()).toContain("3 more");
-    });
-
-    it("should handle nested brackets in fields without breaking count", () => {
-      // Fields with nested brackets should be treated as single fields
-      wrapper = mountComponent({
-        fieldsText: "[func(a, b), func(c, d), e, f, g, h]",
-        threshold: 5,
-      });
-      expect(wrapper.find(".expand-link").exists()).toBe(true);
-    });
-
-    it("should handle empty brackets gracefully", () => {
-      wrapper = mountComponent({ fieldsText: "[]" });
-      expect(wrapper.exists()).toBe(true);
-      expect(wrapper.find(".expand-link").exists()).toBe(false);
-    });
-
-    it("should handle fieldsText with prefix before bracket", () => {
-      wrapper = mountComponent({
-        fieldsText: "Projection: [a, b, c, d, e, f]",
-        threshold: 5,
-      });
-      // 6 fields → collapsible
-      expect(wrapper.find(".expand-link").exists()).toBe(true);
-    });
-  });
-
-  describe("visibleFields computed", () => {
-    it("should show only first 3 fields before expand", () => {
-      wrapper = mountComponent({
-        fieldsText: "[alpha, beta, gamma, delta, epsilon, zeta]",
-        threshold: 5,
-      });
-      const text = wrapper.text();
-      expect(text).toContain("alpha");
-      expect(text).toContain("beta");
-      expect(text).toContain("gamma");
-      // delta, epsilon, zeta should not appear in collapsed view
-      expect(text).not.toContain("delta");
-    });
-  });
-});
diff --git a/web/src/components/query-plan/CollapsibleProjection.vue b/web/src/components/query-plan/CollapsibleProjection.vue
deleted file mode 100644
index cf621496e0..0000000000
--- a/web/src/components/query-plan/CollapsibleProjection.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <span class="collapsible-projection">
-    <span v-if="!isCollapsible">{{ fieldsText }}</span>
-    <span v-else>
-      <span v-if="!expanded">
-        {{ visibleFields }}
-        <span
-          class="expand-link text-(--q-primary) cursor-pointer font-medium px-1 hover:underline"
-          @click="expanded = true"
-        >
-          ... {{ hiddenCount }} more ▼
-        </span>
-      </span>
-      <span v-else>
-        {{ fieldsText }}
-        <span
-          class="expand-link text-(--q-primary) cursor-pointer font-medium px-1 hover:underline"
-          @click="expanded = false"
-        >
-          ▲ collapse
-        </span>
-      </span>
-    </span>
-  </span>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref, computed } from "vue";
-
-export default defineComponent({
-  name: "CollapsibleProjection",
-  props: {
-    fieldsText: {
-      type: String,
-      required: true,
-    },
-    threshold: {
-      type: Number,
-      default: 5,
-    },
-  },
-  setup(props) {
-    const expanded = ref(false);
-
-    const fields = computed(() => {
-      // Parse fields from text like "[field1, field2, field3]"
-      const match = props.fieldsText.match(/\[([^\]]+)\]/);
-      if (!match) return [];
-
-      const fieldsList = match[1];
-      const parsed: string[] = [];
-      let current = '';
-      let depth = 0;
-      let inQuotes = false;
-
-      for (const char of fieldsList) {
-        if (char === '"' || char === "'") {
-          inQuotes = !inQuotes;
-        } else if (!inQuotes && (char === '(' || char === '[' || char === '{')) {
-          depth++;
-        } else if (!inQuotes && (char === ')' || char === ']' || char === '}')) {
-          depth--;
-        } else if (!inQuotes && depth === 0 && char === ',') {
-          parsed.push(current.trim());
-          current = '';
-          continue;
-        }
-        current += char;
-      }
-      if (current.trim()) {
-        parsed.push(current.trim());
-      }
-
-      return parsed;
-    });
-
-    const isCollapsible = computed(() => {
-      return fields.value.length > props.threshold;
-    });
-
-    const visibleFields = computed(() => {
-      if (!isCollapsible.value) return props.fieldsText;
-
-      const prefix = props.fieldsText.substring(0, props.fieldsText.indexOf('[') + 1);
-      const suffix = props.fieldsText.substring(props.fieldsText.lastIndexOf(']'));
-      const visible = fields.value.slice(0, 3).join(', ');
-
-      return `${prefix}${visible}`;
-    });
-
-    const hiddenCount = computed(() => {
-      return fields.value.length - 3;
-    });
-
-    return {
-      expanded,
-      isCollapsible,
-      visibleFields,
-      hiddenCount,
-    };
-  },
-});
-</script>
-
diff --git a/web/src/components/query-plan/MetricsSummaryCard.spec.ts b/web/src/components/query-plan/MetricsSummaryCard.spec.ts
index 6bc56b258a..596c1d6a84 100644
--- a/web/src/components/query-plan/MetricsSummaryCard.spec.ts
+++ b/web/src/components/query-plan/MetricsSummaryCard.spec.ts
@@ -48,7 +48,7 @@ describe("MetricsSummaryCard", () => {
       expect(wrapper.exists()).toBe(true);
     });
 
-    it("should render a q-card element", () => {
+    it("should render the summary card element", () => {
       wrapper = mountComponent();
       expect(wrapper.find('[data-test="metrics-summary-card"]').exists()).toBe(true);
     });
diff --git a/web/src/components/query-plan/MetricsSummaryCard.vue b/web/src/components/query-plan/MetricsSummaryCard.vue
index 02b0f3742a..d593905c7e 100644
--- a/web/src/components/query-plan/MetricsSummaryCard.vue
+++ b/web/src/components/query-plan/MetricsSummaryCard.vue
@@ -20,35 +20,35 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     class="bg-transparent shadow-none"
   >
     <OCardSection role="body">
-      <div class="text-sm font-medium text-weight-bold mb-3">{{ t("search.executionSummary") }}</div>
+      <div class="text-sm font-medium font-bold mb-3">{{ t("search.executionSummary") }}</div>
       <div class="grid [grid-template-columns:repeat(auto-fit,minmax(11.25rem,1fr))] gap-4">
-        <div data-test="metrics-summary-card-item" class="flex items-center gap-3 p-[0.875rem_1rem] rounded-lg bg-[var(--o2-card-bg)] border border-solid border-[var(--o2-border-color)] transition-[border-color,box-shadow] duration-200 hover:border-[var(--o2-primary-color)] hover:shadow-[0_0.0625rem_0.1875rem_rgba(0,0,0,0.05)]">
-          <div data-test="metrics-summary-card-icon" class="shrink-0 text-[var(--o2-text-secondary)]">
+        <div data-test="metrics-summary-card-item" class="flex items-center gap-3 p-[0.875rem_1rem] rounded-default bg-card-glass-bg border border-solid border-card-glass-border transition-[border-color,box-shadow] duration-200 hover:border-accent hover:shadow-[0_0.0625rem_0.1875rem_rgba(0,0,0,0.05)]">
+          <div data-test="metrics-summary-card-icon" class="shrink-0 text-text-secondary">
             <OIcon name="schedule" size="md" />
           </div>
           <div class="flex-1 min-w-0">
-            <div data-test="metrics-summary-card-label" class="text-xs font-semibold uppercase tracking-[0.04em] text-[var(--o2-text-label)] mb-1">{{ t("search.totalTime") }}</div>
-            <div data-test="metrics-summary-card-value" class="text-xl font-bold text-[var(--o2-primary-color)] whitespace-nowrap overflow-hidden text-ellipsis">{{ metrics.totalTime }}</div>
+            <div data-test="metrics-summary-card-label" class="text-xs font-semibold uppercase tracking-[0.04em] text-text-label mb-1">{{ t("search.totalTime") }}</div>
+            <div data-test="metrics-summary-card-value" class="text-xl font-bold text-accent whitespace-nowrap overflow-hidden text-ellipsis">{{ metrics.totalTime }}</div>
           </div>
         </div>
 
-        <div data-test="metrics-summary-card-item" class="flex items-center gap-3 p-[0.875rem_1rem] rounded-lg bg-[var(--o2-card-bg)] border border-solid border-[var(--o2-border-color)] transition-[border-color,box-shadow] duration-200 hover:border-[var(--o2-primary-color)] hover:shadow-[0_0.0625rem_0.1875rem_rgba(0,0,0,0.05)]">
-          <div data-test="metrics-summary-card-icon" class="shrink-0 text-[var(--o2-text-secondary)]">
+        <div data-test="metrics-summary-card-item" class="flex items-center gap-3 p-[0.875rem_1rem] rounded-default bg-card-glass-bg border border-solid border-card-glass-border transition-[border-color,box-shadow] duration-200 hover:border-accent hover:shadow-[0_0.0625rem_0.1875rem_rgba(0,0,0,0.05)]">
+          <div data-test="metrics-summary-card-icon" class="shrink-0 text-text-secondary">
             <OIcon name="format-list-numbered" size="md" />
           </div>
           <div class="flex-1 min-w-0">
-            <div data-test="metrics-summary-card-label" class="text-xs font-semibold uppercase tracking-[0.04em] text-[var(--o2-text-label)] mb-1">{{ t("search.totalRows") }}</div>
-            <div data-test="metrics-summary-card-value" class="text-xl font-bold text-[var(--o2-primary-color)] whitespace-nowrap overflow-hidden text-ellipsis">{{ metrics.totalRows }}</div>
+            <div data-test="metrics-summary-card-label" class="text-xs font-semibold uppercase tracking-[0.04em] text-text-label mb-1">{{ t("search.totalRows") }}</div>
+            <div data-test="metrics-summary-card-value" class="text-xl font-bold text-accent whitespace-nowrap overflow-hidden text-ellipsis">{{ metrics.totalRows }}</div>
           </div>
         </div>
 
-        <div data-test="metrics-summary-card-item" class="flex items-center gap-3 p-[0.875rem_1rem] rounded-lg bg-[var(--o2-card-bg)] border border-solid border-[var(--o2-border-color)] transition-[border-color,box-shadow] duration-200 hover:border-[var(--o2-primary-color)] hover:shadow-[0_0.0625rem_0.1875rem_rgba(0,0,0,0.05)]">
-          <div data-test="metrics-summary-card-icon" class="shrink-0 text-[var(--o2-text-secondary)]">
+        <div data-test="metrics-summary-card-item" class="flex items-center gap-3 p-[0.875rem_1rem] rounded-default bg-card-glass-bg border border-solid border-card-glass-border transition-[border-color,box-shadow] duration-200 hover:border-accent hover:shadow-[0_0.0625rem_0.1875rem_rgba(0,0,0,0.05)]">
+          <div data-test="metrics-summary-card-icon" class="shrink-0 text-text-secondary">
             <OIcon name="memory" size="md" />
           </div>
           <div class="flex-1 min-w-0">
-            <div data-test="metrics-summary-card-label" class="text-xs font-semibold uppercase tracking-[0.04em] text-[var(--o2-text-label)] mb-1">{{ t("search.peakMemory") }}</div>
-            <div data-test="metrics-summary-card-value" class="text-xl font-bold text-[var(--o2-primary-color)] whitespace-nowrap overflow-hidden text-ellipsis">{{ metrics.peakMemory }}</div>
+            <div data-test="metrics-summary-card-label" class="text-xs font-semibold uppercase tracking-[0.04em] text-text-label mb-1">{{ t("search.peakMemory") }}</div>
+            <div data-test="metrics-summary-card-value" class="text-xl font-bold text-accent whitespace-nowrap overflow-hidden text-ellipsis">{{ metrics.peakMemory }}</div>
           </div>
         </div>
       </div>
diff --git a/web/src/components/query-plan/QueryPlanNode.spec.ts b/web/src/components/query-plan/QueryPlanNode.spec.ts
index b9dd970e0a..87b990d15f 100644
--- a/web/src/components/query-plan/QueryPlanNode.spec.ts
+++ b/web/src/components/query-plan/QueryPlanNode.spec.ts
@@ -173,7 +173,7 @@ describe("QueryPlanNode", () => {
     it("should mark details as truncated and clickable when details exceed 80 chars", () => {
       wrapper = mountNode(nodeWithLongDetails);
       expect(wrapper.find(".inline-details.truncated").exists()).toBe(true);
-      expect(wrapper.find(".inline-details.clickable").exists()).toBe(true);
+      expect(wrapper.find(".inline-details.cursor-pointer").exists()).toBe(true);
     });
 
     it("should expand details on click when details are long", async () => {
@@ -189,7 +189,7 @@ describe("QueryPlanNode", () => {
 
     it("should not make details clickable when details are short", () => {
       wrapper = mountNode(makeNode({ fullText: "SomeExec: short detail" }));
-      expect(wrapper.find(".inline-details.clickable").exists()).toBe(false);
+      expect(wrapper.find(".inline-details.cursor-pointer").exists()).toBe(false);
     });
   });
 
diff --git a/web/src/components/query-plan/QueryPlanNode.vue b/web/src/components/query-plan/QueryPlanNode.vue
index 6d3f1ccfe2..20b8a37317 100644
--- a/web/src/components/query-plan/QueryPlanNode.vue
+++ b/web/src/components/query-plan/QueryPlanNode.vue
@@ -18,25 +18,25 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <div class="plan-node" data-test="query-plan-node">
     <!-- Node content -->
     <div
-      class="node-line flex items-center gap-0 py-[2px] whitespace-pre"
+      class="node-line flex items-center gap-0 py-0.5 whitespace-pre"
     >
       <!-- Parent prefix indentation -->
       <span
         v-if="parentPrefix"
         data-test="query-plan-node-tree-indent"
-        class="text-[rgba(0,0,0,0.3)] font-bold select-none whitespace-pre dark:text-[rgba(255,255,255,0.3)]"
+        class="text-text-muted font-bold select-none whitespace-pre"
       >{{ parentPrefix }}</span>
 
       <!-- Tree connector -->
       <span
         data-test="query-plan-node-tree-connector"
-        class="text-[rgba(0,0,0,0.3)] font-bold select-none pr-1 dark:text-[rgba(255,255,255,0.3)]"
+        class="text-text-muted font-bold select-none pr-1"
       >{{ connector }}</span>
 
       <!-- Expand/collapse icon for nodes with children -->
       <span
         v-if="node.children.length > 0"
-        class="expand-icon cursor-pointer select-none text-(--q-primary) text-[10px] w-4 inline-block text-center hover:opacity-70"
+        class="expand-icon cursor-pointer select-none text-theme-accent text-3xs w-4 inline-block text-center hover:opacity-70"
         data-test="query-plan-node-expand-icon"
         @click="toggleChildrenExpanded"
       >
@@ -51,17 +51,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <!-- Operator name -->
       <span
         data-test="query-plan-node-operator-name"
-        class="font-semibold text-[rgba(0,0,0,0.87)] pl-1 dark:text-[rgba(255,255,255,0.87)]"
+        class="font-semibold text-text-heading pl-1"
       >{{ node.name }}</span>
 
       <!-- Inline details (clickable to expand if truncated) -->
       <span
         v-if="inlineDetails"
-        class="inline-details text-[rgba(0,0,0,0.7)] font-normal text-xs italic dark:text-[rgba(255,255,255,0.7)]"
+        class="inline-details text-text-secondary font-normal text-xs italic"
         :class="{
-          'cursor-pointer': hasLongDetails,
-          'whitespace-nowrap overflow-hidden [text-overflow:ellipsis] max-w-[600px] truncated': !detailsExpanded && hasLongDetails,
-          clickable: hasLongDetails,
+          'cursor-pointer hover:text-text-body': hasLongDetails,
+          'whitespace-nowrap overflow-hidden [text-overflow:ellipsis] max-w-150 truncated': !detailsExpanded && hasLongDetails,
         }"
         data-test="query-plan-node-inline-details"
         @click="hasLongDetails ? toggleDetailsExpanded() : null"
@@ -73,7 +72,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <span
         v-if="inlineDetails && (isAnalyze && hasMetrics)"
         data-test="query-plan-node-separator"
-        class="text-[rgba(0,0,0,0.4)] px-2 font-normal select-none dark:text-[rgba(255,255,255,0.4)]"
+        class="text-text-muted px-2 font-normal select-none"
       >·</span>
 
       <!-- Metrics (for ANALYZE mode) -->
@@ -85,7 +84,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <span
           v-if="node.metrics.output_rows !== undefined"
           data-test="query-plan-node-metric-badge"
-          class="inline-flex items-center gap-1 py-[2px] px-2 bg-[rgba(var(--q-primary-rgb),0.1)] rounded text-[11px] font-medium text-(--q-primary) whitespace-nowrap dark:bg-[rgba(var(--q-primary-rgb),0.2)]"
+          class="inline-flex items-center gap-1 py-0.5 px-2 bg-[color-mix(in_srgb,var(--color-theme-accent)_10%,transparent)] rounded-default text-2xs font-medium text-theme-accent whitespace-nowrap dark:bg-[color-mix(in_srgb,var(--color-theme-accent)_20%,transparent)]"
         >
           <OIcon name="format-list-numbered" size="xs" />
           {{ formatNumber(node.metrics.output_rows) }} rows
@@ -93,7 +92,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <span
           v-if="node.metrics.elapsed_compute"
           data-test="query-plan-node-metric-badge"
-          class="inline-flex items-center gap-1 py-[2px] px-2 bg-[rgba(var(--q-primary-rgb),0.1)] rounded text-[11px] font-medium text-(--q-primary) whitespace-nowrap dark:bg-[rgba(var(--q-primary-rgb),0.2)]"
+          class="inline-flex items-center gap-1 py-0.5 px-2 bg-[color-mix(in_srgb,var(--color-theme-accent)_10%,transparent)] rounded-default text-2xs font-medium text-theme-accent whitespace-nowrap dark:bg-[color-mix(in_srgb,var(--color-theme-accent)_20%,transparent)]"
         >
           <OIcon name="schedule" size="xs" />
           {{ node.metrics.elapsed_compute }}
@@ -105,10 +104,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <div
       v-if="detailsExpanded && hasLongDetails"
       data-test="query-plan-node-details"
-      class="pt-[2px] pb-[2px] text-[rgba(0,0,0,0.7)] text-xs italic whitespace-pre-wrap break-words dark:text-[rgba(255,255,255,0.7)]"
+      class="pt-0.5 pb-0.5 text-text-secondary text-xs italic whitespace-pre-wrap break-words"
     >
       <span
-        class="text-[rgba(0,0,0,0.3)] font-bold select-none whitespace-pre dark:text-[rgba(255,255,255,0.3)]"
+        class="text-text-muted font-bold select-none whitespace-pre"
       >{{ childPrefix }}  </span>
       <span>{{ inlineDetails }}</span>
     </div>
@@ -235,13 +234,3 @@ export default defineComponent({
   },
 });
 </script>
-
-<style>
-.plan-node .node-line .inline-details.clickable:hover {
-  color: rgba(0, 0, 0, 0.9);
-}
-
-.body--dark .plan-node .node-line .inline-details.clickable:hover {
-  color: rgba(255, 255, 255, 0.9);
-}
-</style>
diff --git a/web/src/components/query-plan/QueryPlanTree.vue b/web/src/components/query-plan/QueryPlanTree.vue
index ead74d0d4b..9a487f2abf 100644
--- a/web/src/components/query-plan/QueryPlanTree.vue
+++ b/web/src/components/query-plan/QueryPlanTree.vue
@@ -15,7 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="query-plan-tree font-mono text-[13px] leading-[1.8] p-4 bg-[rgba(0,0,0,0.02)] dark:bg-[rgba(255,255,255,0.03)] rounded overflow-x-auto">
+  <div class="query-plan-tree font-mono text-compact leading-[1.8] p-4 bg-surface-subtle rounded-default overflow-x-auto">
     <div
       v-for="(node, index) in tree.children"
       :key="index"
diff --git a/web/src/components/reports/CreateReport.schema.spec.ts b/web/src/components/reports/CreateReport.schema.spec.ts
index 35990c3f77..91e9f5f03d 100644
--- a/web/src/components/reports/CreateReport.schema.spec.ts
+++ b/web/src/components/reports/CreateReport.schema.spec.ts
@@ -1,8 +1,8 @@
 // Copyright 2026 OpenObserve Inc.
 //
-// Unit tests for the CreateReport Zod schema — restores the Quasar BEFORE
-// validation baseline (the :rules from
-// complete-quasar-validation-inventory-BEFORE.md §5) as Zod constraints, with the
+// Unit tests for the CreateReport Zod schema — restores the previous
+// validation baseline (the field validation rules from the pre-migration
+// inventory §5) as Zod constraints, with the
 // conditional rules (cron / custom / !cached / scheduleLater timezone + date/time)
 // in superRefine.
 
diff --git a/web/src/components/reports/CreateReport.schema.ts b/web/src/components/reports/CreateReport.schema.ts
index ad09c9ade0..2bd22728f9 100644
--- a/web/src/components/reports/CreateReport.schema.ts
+++ b/web/src/components/reports/CreateReport.schema.ts
@@ -1,51 +1,18 @@
 // Copyright 2026 OpenObserve Inc.
 //
-// Validation schema for CreateReport.vue — the reports module's single (HIGH
-// complexity) form: a routed create/edit page with an OStepper, a custom
-// frequency/scheduling section, and several composite controls. Built via a
-// factory so the cron min-interval message stays driven by the live zoConfig and
-// every user-facing validation message stays i18n-driven — resolved through the
-// passed-in useI18n `t` (keys under the `reports.validation.*` namespace; the
-// cron min-interval one interpolates `{seconds}`).
+// Validation schema for CreateReport.vue — a routed create/edit form with an
+// OStepper, a custom frequency/scheduling section, and several composite
+// controls. Built via a factory so the cron min-interval message stays driven by
+// the live zoConfig and every user-facing validation message is i18n-driven
+// (keys under the `reports.validation.*` namespace, resolved through the
+// passed-in `t`; the cron min-interval one interpolates `{seconds}`).
 //
-// Migration status (per the form-migration-playbook): the whole form is now
-// FORM-OWNED — there is no bridge left.
-//   • Scalars (OForm* fields): name, description, isCachedReport, imagePreview,
-//     cron, customInterval, customPeriod, timezone, date, time, title, emails,
-//     message.
-//   • frequencyType + selectedTimeTab → OFormToggleGroup; timerange (per row) →
-//     OFormDateTimeRange.
-//   • `dashboards` is a field-array (`dashboards[0].folder`, etc.). CreateReport
-//     renders a single, fixed dashboard row (no add/remove UI), so it uses the
-//     field-array NAMES + an array schema without the dynamic push/remove
-//     machinery. Each row's controls are real OForm* fields: folder/dashboard/
-//     tabs (OFormSelect, required), report_type/email_attachment_type
-//     (OFormSelect), attachmentWidth/attachmentHeight (OFormInput; the saved
-//     `attachment_dimensions` object is derived from them at save), timerange
-//     (OFormDateTimeRange). The dashboard's `variables` stay component-owned
-//     (the VariablesInput composite has no OForm* equivalent + carries no
-//     validation) and are merged into the payload at save.
+// `dashboards` is a field-array; CreateReport renders a single, fixed dashboard
+// row. The date/time format rules (reportDateRegex / reportTimeRegex) apply only
+// on the non-cron "Schedule Later" tab and, because an empty value fails the
+// regex, also make both fields required there.
 //
-// Restores the Quasar BEFORE validation baseline for CreateReport (the :rules
-// from complete-quasar-validation-inventory-BEFORE.md §5) as Zod constraints
-// (truthy -> Zod inversion); the conditional rules (custom-interval mode,
-// !cached mode, cron vs custom, scheduleLater timezone/date/time) are expressed
-// in superRefine.
-//
-// NOTE on the date/time format rules: the BEFORE baseline validated
-// `scheduling.date` as DD-MM-YYYY and `scheduling.time` via the built-in `time`
-// rule (both on the old free-typed q-inputs). The fields are now ODate/OTime
-// segmented controls whose emitted value is ISO YYYY-MM-DD (verified in
-// saveReport, which splits scheduling.date as [y,m,d]) / HH:MM, so the rules are
-// restored against those live formats (reportDateRegex / reportTimeRegex) — same
-// validation INTENT, corrected for the migrated controls. They apply ONLY on the
-// non-cron "Schedule Later" tab (the only mode that surfaces the inputs; cron /
-// "Schedule Now" set date/time programmatically at save), and because an empty
-// value fails the regex they also make both fields REQUIRED there. The
-// reportsScheduleLater E2E flow enters a Start Date + Start Time to match.
-//
-// Validation TIMING is owned by OForm (submit-then-change via revalidateLogic);
-// this file only describes WHAT is valid.
+// Validation timing is owned by OForm; this file only describes WHAT is valid.
 
 import { z } from "zod";
 import {
@@ -54,17 +21,14 @@ import {
   isAboveMinRefreshInterval,
 } from "@/utils/zincutils";
 
-// Email-list regex (one or more emails separated by , or ;). Verbatim from the
-// old `validateReportData` recipients rule.
+// Email-list regex (one or more emails separated by , or ;).
 export const reportEmailRegex =
   /^([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})(\s*[;,]\s*([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}))*$/;
 
-// Live ODate / OFormDate value format (ISO YYYY-MM-DD). See the header note: the
-// BEFORE baseline regex was DD-MM-YYYY (old free-typed q-input); this is the same
-// rule for the migrated control's actual format (saveReport splits it as [y,m,d]).
+// ODate / OFormDate value format (ISO YYYY-MM-DD; saveReport splits it as [y,m,d]).
 export const reportDateRegex = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/;
 
-// Live OTime / OFormTime value format (HH:MM). Restores the built-in `time` rule.
+// OTime / OFormTime value format (HH:MM).
 export const reportTimeRegex = /^([01]\d|2[0-3]):[0-5]\d$/;
 
 // Per-row timerange shape (the OFormDateTimeRange value).
@@ -75,11 +39,9 @@ export const reportTimerangeSchema = z.object({
   to: z.number().optional().default(0),
 });
 
-// One dashboard row. CreateReport renders exactly one (no add/remove), but it is
-// modelled as a field-array so the form owns the row and the values map straight
-// onto the saved `dashboards[]` payload. folder/dashboard/tabs are required; the
-// rest are unvalidated (no rule existed for them in the BEFORE baseline). A
-// factory: the required message is i18n-driven (see makeCreateReportSchema).
+// One dashboard row, modelled as a field-array so the values map straight onto
+// the saved `dashboards[]` payload. folder/dashboard/tabs are required; the rest
+// are unvalidated. A factory: the required message is i18n-driven.
 export const makeReportDashboardRowSchema = (requiredMessage: string) =>
   z.object({
     folder: z.string().min(1, requiredMessage),
@@ -99,22 +61,19 @@ export const makeCreateReportSchema = (
   t: (_key: string, _params?: Record<string, unknown>) => string,
   zoConfig?: { min_auto_refresh_interval?: string | number } | null,
 ) => {
-  // Required-field message — i18n `validation.required` ("This field is
-  // required"), the exact message the pre-migration validateReportData showed
-  // via t('validation.required') (asserted verbatim by the reports E2E suite).
+  // Required-field message — i18n `validation.required`.
   const REQUIRED_MESSAGE = t("validation.required");
 
   // Resource-name character check message — i18n
-  // `reports.validation.resourceNameInvalid` ("Characters like :, ?, /, #, and
-  // spaces are not allowed."), asserted verbatim by the reports E2E suite.
+  // `reports.validation.resourceNameInvalid`.
   const RESOURCE_NAME_MESSAGE = t("reports.validation.resourceNameInvalid");
 
   return z
     .object({
       // ── Form-owned, genuinely user-typed scalars ─────────────────────────
-      // No .trim(): the pre-migration check validated the raw value, so a
-      // padded / whitespace-only name falls through to the resource-name rule
-      // (spaces are disallowed characters) instead of being silently trimmed.
+      // No .trim(): validate the raw value so a padded / whitespace-only name
+      // falls through to the resource-name rule (spaces are disallowed
+      // characters) instead of being silently trimmed.
       name: z
         .string()
         .min(1, t("common.nameRequired"))
@@ -163,7 +122,6 @@ export const makeCreateReportSchema = (
         ctx.addIssue({ code: z.ZodIssueCode.custom, path, message });
 
       // ── Timerange: relative needs a period; absolute needs from + to. ─────
-      // (Preserves the old validateReportData timerange guard — jumps to step 1.)
       const timerange = val.dashboards?.[0]?.timerange;
       if (timerange) {
         if (timerange.type === "relative" && !timerange.period) {
@@ -178,9 +136,7 @@ export const makeCreateReportSchema = (
       }
 
       // ── Cron: valid + 6 fields + min-interval (only in cron mode). ────────
-      // An EMPTY cron gets "Invalid cron expression!" (not the required
-      // message) — pre-migration, the empty string went straight into the cron
-      // parser, whose throw produced exactly that error.
+      // An EMPTY cron gets the invalid-cron message (not the required message).
       if (val.frequencyType === "cron") {
         const cronStr = String(val.cron ?? "").trim();
         if (!cronStr) {
@@ -193,8 +149,8 @@ export const makeCreateReportSchema = (
             addIssue(["cron"], t("reports.validation.invalidCron"));
           }
           if (intervalInSecs !== undefined) {
-            // Single-space split (not /\s+/): the pre-migration 6-field check
-            // was `cron.trim().split(" ")`, so doubled spaces fail it.
+            // Single-space split (not /\s+/), so doubled spaces fail the
+            // 6-field check.
             if (cronStr.split(" ").length !== 6) {
               addIssue(["cron"], t("reports.validation.cronSixFields"));
             } else if (
@@ -224,11 +180,9 @@ export const makeCreateReportSchema = (
       }
 
       // ── Timezone: required on the Schedule Later tab AND in cron mode. ────
-      // Both modes surface an enabled, `required` timezone select the user is
-      // meant to fill (cron runs the schedule in that timezone — saveReport now
-      // honors the picked value instead of overriding it with the browser one).
-      // The other modes ("Schedule Now") hide the field and auto-fill the browser
-      // timezone at save, so they are not enforced here.
+      // Both modes surface a required timezone select (cron runs the schedule in
+      // that timezone). "Schedule Now" hides the field and auto-fills the browser
+      // timezone at save, so it is not enforced here.
       if (
         val.selectedTimeTab === "scheduleLater" ||
         val.frequencyType === "cron"
@@ -270,8 +224,7 @@ export type CreateReportForm = z.infer<ReturnType<typeof makeCreateReportSchema>
 
 // Typed defaults factory (the create-mode blank seed bound to OForm's
 // `:default-values`). Edit-mode prefill arrives async and is applied with
-// `form.reset(values)` once the report record loads (foundation constraint #3),
-// so this stays a pure blank factory rather than an inline literal.
+// `form.reset(values)` once the report record loads.
 export const createReportDefaults = (): CreateReportForm => ({
   name: "",
   description: "",
diff --git a/web/src/components/reports/CreateReport.vue b/web/src/components/reports/CreateReport.vue
index 5c8a156fa9..a37c3bb846 100644
--- a/web/src/components/reports/CreateReport.vue
+++ b/web/src/components/reports/CreateReport.vue
@@ -15,20 +15,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="w-full h-full flex flex-col">
+  <OPageLayout
+    :title="isEditingReport ? t('reports.update') : t('reports.add')"
+    title-data-test="add-report-title"
+    :back="{
+      label: t('reports.header'),
+      onClick: () => router.back(),
+      dataTest: 'add-report-back-btn',
+    }"
+    bleed
+  >
     <div data-test="add-report-section" class="w-full flex flex-col flex-1 min-h-0 create-report-page">
-      <AppPageHeader
-        :title="isEditingReport ? t('reports.update') : t('reports.add')"
-        title-data-test="add-report-title"
-        :back="{
-          label: t('reports.header'),
-          onClick: () => router.back(),
-          dataTest: 'add-report-back-btn',
-        }"
-        class="px-4 border-b border-border-default"
-      />
       <div
-        class="flex card-container flex-1 min-h-0 overflow-auto"
+        class="flex bg-card-glass-bg flex-1 min-h-0 overflow-auto"
       >
         <div
           ref="addAlertFormRef"
@@ -41,8 +40,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             class="create-report-form"
           >
             <div
-              class="flex items-start gap-4 px-2"
-              style="padding-top: 0.75rem"
+              class="flex items-start gap-4 px-2 pt-3"
             >
               <div data-test="add-report-name-input" class="o2-input">
                 <OFormInput
@@ -127,16 +125,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 icon="edit"
                 :done="step > 1"
               >
-                <!-- Dashboard field-array. One fixed row today (no add/remove
-                     UI), iterated so the array structure is preserved and the
-                     controls bind by their `dashboards[i].*` form name. Row
-                     content + per-row report_type read come from the form via the
-                     reactive `dashboardRows` mirror.
-                     KEY: index (stable for the single, non-reorderable row). A
-                     value-derived key (folder + dashboard) remounts the whole row
-                     whenever the folder/dashboard changes, and remounting wipes
-                     each field's TanStack error meta — so picking a folder used to
-                     clear the still-empty dashboard/tab validation with it. -->
+                <!-- Dashboard field-array: one fixed row, iterated so the array
+                     structure is preserved and controls bind by their
+                     `dashboards[i].*` form name.
+                     KEY must be the index (stable): a value-derived key
+                     (folder + dashboard) would remount the row on folder/dashboard
+                     change, wiping each field's TanStack error meta. -->
                 <template
                   v-for="(dashboard, index) in dashboardRows"
                   :key="index"
@@ -145,17 +139,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     :data-test="`add-report-dashboard-${index}`"
                     class="my-2 px-2 flex flex-col"
                   >
-                    <!-- items-start (not items-center): each OFormSelect cell is a
-                         column (label → select → error). When a validation error
-                         appears under one select, items-center would re-center the
-                         taller cell and shift its select out of line with the
-                         others; items-start keeps all selects top-aligned and lets
-                         the error text flow downward. -->
+                    <!-- items-start (not items-center): keeps all selects
+                         top-aligned when a validation error appears under one and
+                         grows its cell taller. -->
                     <div class="flex items-start justify-start">
                       <div
                         data-test="add-report-folder-select"
-                        class="o2-input mr-2"
-                        style="padding-top: 0; width: 30%"
+                        class="o2-input mr-2 pt-0"
+                        style="width: 30%"
                       >
                         <OFormSelect
                           data-test="add-report-dashboard-folder-select"
@@ -172,8 +163,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       </div>
                       <div
                         data-test="add-report-dashboard-select"
-                        class="o2-input mr-2"
-                        style="padding-top: 0; width: 30%"
+                        class="o2-input mr-2 pt-0"
+                        style="width: 30%"
                       >
                         <OFormSelect
                           data-test="add-report-dashboard-name-select"
@@ -190,8 +181,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       </div>
                       <div
                         data-test="add-report-tab-select"
-                        class="o2-input"
-                        style="padding-top: 0; width: 30%"
+                        class="o2-input pt-0"
+                        style="width: 30%"
                       >
                         <OFormSelect
                           data-test="add-report-dashboard-tab-select"
@@ -233,8 +224,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       data-test="add-report-format-section"
                     >
                       <div
-                        style="font-size: 14px"
-                        class="font-bold text-gray-500 mb-2"
+                        style="font-size: var(--text-sm)"
+                        class="font-bold text-text-secondary mb-2"
                       >
                         {{ t("reports.reportFormat") }}
                       </div>
@@ -295,7 +286,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       >
                         <div
                           class="flex items-center cursor-pointer"
-                          style="font-size: 14px; color: inherit"
+                          style="font-size: var(--text-sm); color: inherit"
                           @click="showCustomDimensions = !showCustomDimensions"
                         >
                           <OIcon
@@ -307,7 +298,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                             size="sm"
                             class="mr-1"
                           />
-                          <span class="font-bold text-gray-500">{{
+                          <span class="font-bold text-text-secondary">{{
                             t("reports.customDimensions")
                           }}</span>
                         </div>
@@ -342,7 +333,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                             />
                           </div>
                           <div class="col-auto flex items-end">
-                            <div class="text-xs text-gray-400 pb-1">
+                            <div class="text-xs text-text-muted pb-1">
                               Leave blank to use server defaults
                             </div>
                           </div>
@@ -383,8 +374,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               >
                 <div class="my-2 px-2">
                   <div
-                    style="font-size: 14px"
-                    class="font-bold text-gray-500 mb-2"
+                    style="font-size: var(--text-sm)"
+                    class="font-bold text-text-secondary mb-2"
                   >
                     Frequency
                   </div>
@@ -409,18 +400,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <div class="flex items-start justify-start mt-3">
                       <div
                         data-test="add-report-schedule-custom-interval-input"
-                        class="o2-input mr-2"
-                        style="padding-top: 0; width: 320px"
+                        class="o2-input mr-2 pt-0"
+                        style="width: 320px"
                       >
-                        <div class="mb-1 font-bold text-gray-500">
+                        <div class="mb-1 font-bold text-text-secondary">
                           {{ t("reports.cronExpression") + " *" }}
                           <OIcon
                             name="info"
                             size="sm"
-                            class="ml-1 cursor-pointer text-gray-400"
+                            class="ml-1 cursor-pointer text-text-muted"
                           >
                             <OTooltip side="right" align="center">
-                              <template #content><span style="font-size: 14px">
+                              <template #content><span style="font-size: var(--text-sm)">
                                 Pattern: * * * * * * means every second.
                                 <br />
                                 Format: [Second (optional) 0-59] [Minute 0-59]
@@ -443,7 +434,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                           color="input-border"
                           type="text"
                           outlined
-                          style="width: 100%"
+                          class="w-full"
                           :debounce="400"
                         />
                       </div>
@@ -495,24 +486,23 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     >
                       <div
                         data-test="add-report-schedule-custom-interval-input"
-                        class="o2-input mr-2"
-                        style="padding-top: 0; width: 160px"
+                        class="o2-input mr-2 pt-0"
+                        style="width: 160px"
                       >
                         <OFormInput
                           name="customInterval"
                           label="Repeat every"
                           required
                           color="input-border"
-                          class="showLabelOnTop"
+                          class="showLabelOnTop w-full"
                           type="number"
-                          style="width: 100%"
                         />
                       </div>
 
                       <div
                         data-test="add-report-schedule-custom-frequency-select"
-                        class="o2-input"
-                        style="padding-top: 0; width: 160px"
+                        class="o2-input pt-0"
+                        style="width: 160px"
                       >
                         <OFormSelect
                           name="customPeriod"
@@ -525,11 +515,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       </div>
                     </div>
 
-                    <!-- items-start (not items-center): when a Date/Time
-                         validation error appears below its cell, items-center
-                         would re-center the taller cell and drop the Timezone
-                         select out of line with the date/time inputs;
-                         items-start keeps all three top-aligned. -->
+                    <!-- items-start (not items-center): keeps the Date, Time and
+                         Timezone cells top-aligned when a validation error grows
+                         one of them taller. -->
                     <div
                       data-test="add-report-schedule-send-later-section"
                       v-if="selectedTimeTab === 'scheduleLater'"
@@ -630,12 +618,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       :label="t('reports.recipients')"
                       required
                       tabindex="0"
-                      style="width: 100%"
+                      class="w-full"
                       :placeholder="t('user.inviteByEmail')"
                     />
                   </div>
                   <div data-test="add-report-share-message-section" class="pt-3">
-                    <div style="font-size: 14px" class="font-bold text-gray-500">
+                    <div style="font-size: var(--text-sm)" class="font-bold text-text-secondary">
                       Message
                     </div>
 
@@ -686,9 +674,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </div>
     </div>
     <div
-      class="flex justify-end px-3 w-full py-3 card-container sticky! bottom-0 border-t border-[var(--o2-border-color)]"
+      class="flex justify-end px-3 w-full py-3 bg-card-glass-bg sticky! bottom-0 border-t border-card-glass-border"
       style="z-index: 2"
-      :class="store.state.theme === 'dark' ? 'bg-[var(--o2-bg-card-dark,#1a1a1a)]' : 'bg-white'"
     >
       <OButton
         data-test="add-report-cancel-btn"
@@ -711,7 +698,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         {{ t("alerts.save") }}
       </OButton>
     </div>
-  </div>
+  </OPageLayout>
   <ConfirmDialog
     v-model="dialog.show"
     :title="dialog.title"
@@ -736,7 +723,7 @@ import ConfirmDialog from "@/components/ConfirmDialog.vue";
 import { convertDateToTimestamp } from "@/utils/date";
 import { useReo } from "@/services/reodotdev_analytics";
 import SelectFolderDropdown from "@/components/common/sidebar/SelectFolderDropDown.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import OButton from "@/lib/core/Button/OButton.vue";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import OStepper from "@/lib/navigation/Stepper/OStepper.vue";
@@ -772,11 +759,8 @@ const props = defineProps({
 // Payload skeleton — the non-form server fields (destinations, frequency shape,
 // timezone, timestamps, owner/lastEditedBy, ...) that aren't OForm-owned. It is
 // the save base in saveReport(): the validated @submit value overwrites the
-// form-owned parts on top of it. The dashboard row (folder/dashboard/tabs/
-// timerange/report_type/attachment dimensions) is now FORM-OWNED via the
-// `dashboards[i].*` field-array; only the dashboard `variables` stay
-// component-owned (the VariablesInput composite has no OForm* wrapper) and are
-// merged in at save time.
+// form-owned parts on top of it. The dashboard `variables` are form-owned too
+// (VariablesInput renders in form mode, name-prefix="variables").
 const defaultReport = {
   dashboards: [
     {
@@ -829,17 +813,12 @@ const { t } = useI18n();
 const router = useRouter();
 const store = useStore();
 
-// ── OForm wiring (Rule ③ OWNER pattern) ──────────────────────────────────────
-// This page OWNS the <OForm> and must read form state to drive the OStepper /
-// v-if / v-for conditional rendering, so it creates the form here with useOForm
-// and hands it down via <OForm :form="form">. State is read reactively with
-// `form.useStore(selector)` (single source of truth — no mirror, no store
-// subscribe copy) and written with `form.setFieldValue(...)`. The save is wired
-// through useOForm({ onSubmit }); `formId` ties the page footer's Save (which
-// lives OUTSIDE the <form>) to the OForm via the native `form="<id>"` association
-// so footer-Save + Enter submit.
+// This page OWNS the <OForm> and reads form state to drive the OStepper /
+// v-if / v-for conditional rendering. State is read reactively with
+// `form.useStore(selector)` and written with `form.setFieldValue(...)`. `formId`
+// ties the page footer's Save (which lives OUTSIDE the <form>) to the OForm via
+// the native `form="<id>"` association so footer-Save + Enter submit.
 const formId = "create-report-form";
-// Co-located Zod schema (factory keeps cron min-interval + name messages live).
 const createReportSchema = makeCreateReportSchema(t, store.state?.zoConfig);
 const form = useOForm<CreateReportForm>({
   defaultValues: createReportDefaults(),
@@ -885,19 +864,15 @@ const frequencyTabs = [
   { label: "Custom", value: "custom" },
 ];
 
-// frequencyType + selectedTimeTab (OFormToggleGroup) and the dashboards rows are
-// FORM-OWNED. Read them REACTIVELY from the one form with form.useStore (single
-// source of truth — no mirror, no store-subscribe copy) so the template
-// conditionals (v-if / v-for / OStepper) update on every change, including async
-// edit prefill.
+// frequencyType, selectedTimeTab and the dashboards rows are form-owned; read
+// reactively via form.useStore so the template conditionals (v-if / v-for /
+// OStepper) update on every change, including async edit prefill.
 const frequencyType = form.useStore(
   (s: any) => s.values?.frequencyType ?? "once",
 );
 const selectedTimeTab = form.useStore(
   (s: any) => s.values?.selectedTimeTab ?? "scheduleNow",
 );
-// The dashboards field-array — the row v-for + per-row conditionals render from
-// this reactive view; the controls bind by `dashboards[i].*` name.
 const dashboardRows = form.useStore((s: any) => s.values?.dashboards ?? []);
 
 // `variables` are now form-owned (VariablesInput renders in form mode,
@@ -925,21 +900,17 @@ const isFetchingReport = ref(false);
 const isFetchingFolders = ref(false);
 const isFetchingDashboard = ref(false);
 
-// ── Form-driven Save loading (R3): the footer Save shows its spinner from the
-// form's awaited isSubmitting; Save itself stays enabled. Read reactively via
-// form.useStore (NOT a form.state snapshot, which a computed won't track). ─────
+// The footer Save shows its spinner from the form's awaited isSubmitting. Read
+// reactively via form.useStore (NOT a form.state snapshot, which a computed
+// won't track).
 const isSaving = form.useStore((s: any) => !!s.isSubmitting);
 
-// Read the form-owned `isCachedReport` reactively (single source of truth) for
-// the template conditionals that depend on it.
 const isCachedReportValue = form.useStore(
   (s: any) => !!s.values?.isCachedReport,
 );
 
 // Build a full form value from the typed defaults, with overrides for the seeded
-// values (used to reset the form for query/edit prefill). Everything is
-// form-owned now, so this no longer reads component state — callers pass the
-// dashboards row + scalars they want seeded.
+// values (used to reset the form for query/edit prefill).
 const buildFormValues = (
   overrides: Partial<CreateReportForm> = {},
 ): CreateReportForm => ({
@@ -947,9 +918,8 @@ const buildFormValues = (
   ...overrides,
 });
 
-// Seed the form's values (create-query / edit prefill). The form is created at
-// setup, so async-arriving data is applied with `form.reset(values)` (the
-// foundation reset rule — not a per-field setFieldValue loop).
+// Seed the form's values (create-query / edit prefill). Async-arriving data is
+// applied with `form.reset(values)`, not a per-field setFieldValue loop.
 const seedForm = async (values: CreateReportForm) => {
   await nextTick();
   form.reset(values);
@@ -991,9 +961,8 @@ onBeforeMount(async () => {
       })
       .catch((err) => {
         // Optional chaining throughout: this catch also receives non-HTTP
-        // rejections — a TypeError from malformed report data or the literal
-        // `true` that setDashboardOptions rejects with — so `err.response` may
-        // be undefined. (Mirrors the saveReport catch handler.)
+        // rejections (a TypeError from malformed data, or the literal `true`
+        // setDashboardOptions rejects with), so `err.response` may be undefined.
         if (err?.response?.status != 403) {
           toast({
             variant: "error",
diff --git a/web/src/components/reports/ReportList.spec.js b/web/src/components/reports/ReportList.spec.js
index ea40f7edb8..157fb9ba83 100644
--- a/web/src/components/reports/ReportList.spec.js
+++ b/web/src/components/reports/ReportList.spec.js
@@ -110,7 +110,7 @@ const platform = {
 };
 
 // ODrawer stub: mirrors props/events from the real component so tests can drive
-// open/close via v-model:open and the @close emit (q-dialog → ODrawer migration).
+// open/close via v-model:open and the @close emit (migrated to ODrawer).
 // Props are exposed via `data-stub-*` to avoid colliding with the parent's
 // `data-test` attr which fallthroughs to the stub root.
 const ODrawerStub = {
@@ -644,7 +644,7 @@ describe("ReportList Component", () => {
     });
   });
 
-  // ── Move-to-folder ODrawer (q-dialog → ODrawer migration) ────────────────
+  // ── Move-to-folder ODrawer (migrated to ODrawer) ────────────────
   describe("Move-to-folder ODrawer", () => {
     it("should keep showMoveDialog false on initial render", () => {
       expect(wrapper.vm.showMoveDialog).toBe(false);
diff --git a/web/src/components/reports/ReportList.spec.ts b/web/src/components/reports/ReportList.spec.ts
index 1e8c1200bb..6c3ead814a 100644
--- a/web/src/components/reports/ReportList.spec.ts
+++ b/web/src/components/reports/ReportList.spec.ts
@@ -265,7 +265,7 @@ describe("ReportList", () => {
     });
 
     it("should render the title", () => {
-      // Title now lives in the standard AppPageHeader (row 1).
+      // Title now lives in the standard OPageHeader (row 1).
       expect(wrapper.find(".app-page-header h1").text()).toContain("Report");
     });
 
@@ -373,14 +373,15 @@ describe("ReportList", () => {
       expect(wrapper.vm.resultTotal).toBe(wrapper.vm.reportsTableRows.length);
     });
 
-    it("should re-number rows with '#' after filtering", async () => {
+    it("refreshes rows after filtering (index is OTable's built-in show-index)", async () => {
       wrapper.vm.staticReportsList = [
-        { ...REPORT_SCHEDULED, "#": 99 },
-        { ...REPORT_CACHED, "#": 99 },
+        { ...REPORT_SCHEDULED },
+        { ...REPORT_CACHED },
       ];
       wrapper.vm.activeTab = "shared";
       await wrapper.vm.filterReports();
-      expect(wrapper.vm.reportsTableRows[0]["#"]).toBe(1);
+      // Rows no longer carry a "#" field — numbering is the built-in show-index.
+      expect(Array.isArray(wrapper.vm.reportsTableRows)).toBe(true);
     });
   });
 
@@ -797,7 +798,7 @@ describe("ReportList", () => {
   });
 
   // ── Move to folder (ODrawer migration) ───────────────────────────────────
-  // q-dialog → ODrawer: v-model:open, size="lg", show-close="false",
+  // ODrawer: v-model:open, size="lg", show-close="false",
   // @close=showMoveDialog=false. Drawer hosts <MoveAcrossFolders /> which
   // emits @updated (-> onMoveUpdated) and @close (-> closes drawer).
 
diff --git a/web/src/components/reports/ReportList.vue b/web/src/components/reports/ReportList.vue
index b19fb3ea3a..0a66ecde5d 100644
--- a/web/src/components/reports/ReportList.vue
+++ b/web/src/components/reports/ReportList.vue
@@ -16,19 +16,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <div data-test="report-list-page" class="h-full">
-    <PageLayout
-      :main-panel="false"
-      :header-class="'shrink-0 px-4 border-b border-border-default'"
+    <OPageLayout bleed
+      :title="t('reports.header')"
+      title-data-test="report-list-title"
+      icon="description"
+      :subtitle="t('reports.subtitle')"
     >
-      <!-- Row 1: standard header — title + actions only. Tabs / search / folder
-           scope moved into the table's own toolbar below. -->
-      <template #header>
-        <AppPageHeader
-          :title="t('reports.header')"
-          title-data-test="report-list-title"
-          icon="description"
-          :subtitle="t('reports.subtitle')"
-        >
           <template #actions>
             <OButton
               data-test="report-list-add-report-btn"
@@ -39,8 +32,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               {{ t(`reports.add`) }}
             </OButton>
           </template>
-        </AppPageHeader>
-      </template>
 
     <!-- Folder rail (fixed width) + table — matches the Alerts layout. -->
     <div
@@ -48,7 +39,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       class="report-list-table flex-1 flex min-h-0"
     >
       <!-- Left: folder list -->
-      <div class="shrink-0 h-full" :style="{ width: 230 + 'px' }">
+      <div class="shrink-0 h-full w-rail">
         <div class="h-full">
           <FolderList
             type="reports"
@@ -59,7 +50,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
       <!-- Right: report table -->
       <div class="flex-1 min-w-0 h-full">
-        <div class="h-full card-container">
+        <div class="h-full bg-card-glass-bg">
               <OTable
                 data-test="report-list-table"
                 :data="visibleRows"
@@ -70,11 +61,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 pagination="client"
                 selection="multiple"
                 v-model:selected-ids="selectedReportIds"
-                style="width: 100%; height: 100%"
+                class="w-full h-full"
                 :show-global-filter="false"
                 :enable-column-resize="true"
                 :persist-columns="true"
                 :default-columns="false"
+                show-index
                 table-id="reports-report-list"
               >
                 <!-- Toolbar: Scheduled/Cached tabs + search (inline folder scope) + refresh -->
@@ -197,8 +189,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   <div
                     v-if="reportsStateLoadingMap[row.report_id]"
                     data-test="report-list-toggle-report-state-loader"
-                    style="display: inline-block; width: 33.14px; height: auto"
-                    class="flex justify-center items-center"
+                    style="display: inline-block; width: 33.14px"
+                    class="flex justify-center items-center h-auto"
                   >
                     <OSpinner size="xs" />
                   </div>
@@ -248,10 +240,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
                 <!-- Table footer: pagination + bulk actions -->
                 <template #bottom="scope">
-                  <div class="flex items-center justify-between w-full h-[48px]">
+                  <div class="flex items-center justify-between w-full h-12">
                     <!-- Left: count + action buttons grouped together -->
                     <div class="flex items-center gap-2">
-                      <div class="o2-table-footer-title flex items-center whitespace-nowrap">
+                      <div class="text-xs font-normal flex items-center whitespace-nowrap">
                         {{ resultTotal }} {{ t("reports.header") }}
                       </div>
                       <OButton
@@ -281,7 +273,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
       </div>
     </div>
-    </PageLayout>
+    </OPageLayout>
 
     <!-- Single delete confirm -->
     <ConfirmDialog
@@ -319,8 +311,7 @@ import { ref, onBeforeMount, reactive, computed, watch, defineAsyncComponent } f
 import type { Ref } from "vue";
 import { useStore } from "vuex";
 import { useRouter } from "vue-router";
-import PageLayout from "@/components/common/PageLayout.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import OEmptyState from "@/lib/core/EmptyState/OEmptyState.vue";
 import ConfirmDialog from "@/components/ConfirmDialog.vue";
 import FolderList from "@/components/common/sidebar/FolderList.vue";
@@ -345,7 +336,7 @@ import OCheckbox from "@/lib/forms/Checkbox/OCheckbox.vue";
 import OToggleGroup from "@/lib/core/ToggleGroup/OToggleGroup.vue";
 import OToggleGroupItem from "@/lib/core/ToggleGroup/OToggleGroupItem.vue";
 import { toast } from "@/lib/feedback/Toast/useToast";
-import { TABLE_INDEX_COL_SIZE, COL } from "@/lib/core/Table/OTable.types";
+import { COL } from "@/lib/core/Table/OTable.types";
 import { useShortcuts } from "@/lib/vue-shortcut-manager";
 import { focusSearchInput, isInputFocused } from "@/utils/keyboardShortcuts";
 
@@ -415,7 +406,6 @@ const confirmBulkDelete = ref<boolean>(false);
 
 const columns = computed<OTableColumnDef[]>(() => {
   const base: OTableColumnDef[] = [
-    { id: "#", header: "#", accessorKey: "#", size: TABLE_INDEX_COL_SIZE, meta: { align: "center" } },
     { id: "name", header: t("alerts.name"), accessorKey: "name", cell: " ", sortable: true, resizable: true, hideable: true, size: COL.name, minSize: 160, meta: { align: "left", flex: true } },
     { id: "owner", header: t("alerts.owner"), accessorKey: "owner", sortable: true, resizable: true, hideable: true, size: COL.owner },
     { id: "description", header: t("alerts.description"), accessorKey: "description", sortable: false, resizable: true, hideable: true, size: COL.description, meta: { align: "left" } },
@@ -472,8 +462,7 @@ const loadReports = async (folderId: string, nameQuery?: string) => {
       nameQuery || undefined,
     );
 
-    const mapped = (res.data ?? []).map((report: any, index: number) => ({
-      "#": index + 1,
+    const mapped = (res.data ?? []).map((report: any) => ({
       ...report,
       last_triggered_at_raw: report.last_triggered_at || null,
       last_triggered_at: report.last_triggered_at
@@ -519,10 +508,7 @@ const invalidateFolderCache = (folderId: string) => {
 };
 
 const filterReports = () => {
-  reportsTableRows.value = (staticReportsList.value as any[]).map((r: any, i: number) => ({
-    ...r,
-    "#": i + 1,
-  }));
+  reportsTableRows.value = [...(staticReportsList.value as any[])];
   resultTotal.value = reportsTableRows.value.length;
 };
 
diff --git a/web/src/components/rum/ErrorDetail.spec.ts b/web/src/components/rum/ErrorDetail.spec.ts
deleted file mode 100644
index 4ff4ce1418..0000000000
--- a/web/src/components/rum/ErrorDetail.spec.ts
+++ /dev/null
@@ -1,296 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { describe, expect, it, beforeEach, afterEach, vi } from "vitest";
-import { mount, flushPromises } from "@vue/test-utils";
-import ErrorDetail from "@/components/rum/ErrorDetail.vue";
-import i18n from "@/locales";
-
-vi.mock("@/utils/date", () => ({
-  formatDate: vi.fn((_timestamp: number, _format: string) => {
-    return "Jan 01, 2024 10:00:00.000 +0000";
-  }),
-}));
-
-describe("ErrorDetail", () => {
-  let wrapper: any;
-
-  const mockColumn = {
-    error_type: "TypeError",
-    error_message: "Cannot read property 'foo' of undefined",
-    service: "web-app",
-    error_handling: "unhandled",
-    zo_sql_timestamp: 1704110400000000,
-  };
-
-  function mountComponent(column: Record<string, any> = mockColumn) {
-    return mount(ErrorDetail, {
-      props: { column },
-      global: { plugins: [i18n] },
-    });
-  }
-
-  beforeEach(async () => {
-    vi.clearAllMocks();
-    wrapper = mountComponent();
-    await flushPromises();
-    await wrapper.vm.$nextTick();
-  });
-
-  afterEach(() => {
-    if (wrapper) wrapper.unmount();
-    vi.clearAllTimers();
-    vi.restoreAllMocks();
-  });
-
-  // ==========================================================================
-  // COMPONENT MOUNTING
-  // ==========================================================================
-
-  describe("Component Mounting", () => {
-    it("mounts successfully with required column prop", () => {
-      // Arrange & Assert
-      expect(wrapper.exists()).toBe(true);
-    });
-  });
-
-  // ==========================================================================
-  // ERROR TYPE DISPLAY
-  // ==========================================================================
-
-  describe("Error Type Display", () => {
-    it("displays the error_type text when column has error_type", () => {
-      // Arrange & Assert
-      expect(wrapper.text()).toContain("TypeError");
-    });
-
-    it("displays Error fallback text when error_type is null", async () => {
-      // Arrange & Act
-      await wrapper.setProps({ column: { ...mockColumn, error_type: null } });
-
-      // Assert
-      expect(wrapper.text()).toContain("Error");
-    });
-
-    it("displays Error fallback text when column has no error_type property", async () => {
-      // Arrange
-      const { error_type, ...columnWithoutErrorType } = mockColumn;
-
-      // Act
-      await wrapper.setProps({ column: columnWithoutErrorType });
-
-      // Assert
-      expect(wrapper.text()).toContain("Error");
-    });
-  });
-
-  // ==========================================================================
-  // ERROR MESSAGE DISPLAY
-  // ==========================================================================
-
-  describe("Error Message Display", () => {
-    it("displays the error_message text when column has error_message", () => {
-      // Arrange & Assert
-      expect(wrapper.text()).toContain("Cannot read property 'foo' of undefined");
-    });
-
-    it("provides a title attribute equal to the error_message text", () => {
-      // Arrange & Assert
-      const messageEl = wrapper.find('[title="Cannot read property \'foo\' of undefined"]');
-      expect(messageEl.exists()).toBe(true);
-    });
-
-    it("renders empty message text when error_message is empty string", async () => {
-      // Arrange & Act
-      await wrapper.setProps({ column: { ...mockColumn, error_message: "" } });
-
-      // Assert — message div still exists but has no text for the error message
-      const titleEl = wrapper.find('[title=""]');
-      expect(titleEl.exists()).toBe(true);
-    });
-  });
-
-  // ==========================================================================
-  // SERVICE AND ERROR HANDLING DISPLAY
-  // ==========================================================================
-
-  describe("Service and Error Handling Display", () => {
-    it("displays service name text when column has service", () => {
-      // Arrange & Assert
-      expect(wrapper.text()).toContain("web-app");
-    });
-
-    it("displays error_handling status text when column has error_handling", () => {
-      // Arrange & Assert
-      expect(wrapper.text()).toContain("unhandled");
-    });
-
-    it("displays handled text when error_handling is handled", async () => {
-      // Arrange & Act
-      await wrapper.setProps({ column: { ...mockColumn, error_handling: "handled" } });
-
-      // Assert
-      expect(wrapper.text()).toContain("handled");
-    });
-
-    it("renders without throwing when service is null", async () => {
-      // Arrange & Act
-      await wrapper.setProps({ column: { ...mockColumn, service: null } });
-
-      // Assert
-      expect(wrapper.exists()).toBe(true);
-    });
-  });
-
-  // ==========================================================================
-  // TIMESTAMP DISPLAY
-  // ==========================================================================
-
-  describe("Timestamp Display", () => {
-    it("displays the formatted timestamp returned by formatDate", () => {
-      // Arrange & Assert
-      expect(wrapper.text()).toContain("Jan 01, 2024 10:00:00.000 +0000");
-    });
-
-    it("renders schedule icon when timestamp is present", () => {
-      // Arrange & Assert
-      expect(wrapper.findComponent({ name: "OIcon" }).exists()).toBe(true);
-    });
-  });
-
-  // ==========================================================================
-  // EVENT HANDLING
-  // ==========================================================================
-
-  describe("Event Handling", () => {
-    it("emits event-emitted with error_type_click type when error type element is clicked", async () => {
-      // Arrange — find the clickable error type element (has cursor-pointer title attribute)
-      const errorTypeEl = wrapper.find('[data-test="error-detail-error-type"]');
-
-      // Act
-      await errorTypeEl.trigger("click");
-
-      // Assert
-      const emitted = wrapper.emitted("event-emitted");
-      expect(emitted).toBeDefined();
-      expect(emitted).toHaveLength(1);
-      expect(emitted![0][0]).toMatchObject({
-        type: "error_type_click",
-        data: { error_type: expect.anything() },
-      });
-    });
-
-    it("emits event-emitted twice when error type element is clicked twice", async () => {
-      // Arrange
-      const errorTypeEl = wrapper.find('[data-test="error-detail-error-type"]');
-
-      // Act
-      await errorTypeEl.trigger("click");
-      await errorTypeEl.trigger("click");
-
-      // Assert
-      const emitted = wrapper.emitted("event-emitted");
-      expect(emitted).toHaveLength(2);
-    });
-  });
-
-  // ==========================================================================
-  // PROPS VALIDATION
-  // ==========================================================================
-
-  describe("Props Validation", () => {
-    it("has column prop defined as required Object", () => {
-      // Arrange & Assert
-      expect(ErrorDetail.props?.column?.required).toBe(true);
-      expect(ErrorDetail.props?.column?.type).toBe(Object);
-    });
-
-    it("updates displayed error_type and error_message when column prop changes", async () => {
-      // Arrange
-      const customColumn = {
-        error_type: "ReferenceError",
-        error_message: "undefined variable",
-        service: "api-service",
-        error_handling: "handled",
-        zo_sql_timestamp: 1704196800000000,
-      };
-
-      // Act
-      await wrapper.setProps({ column: customColumn });
-
-      // Assert
-      expect(wrapper.text()).toContain("ReferenceError");
-      expect(wrapper.text()).toContain("undefined variable");
-    });
-  });
-
-  // ==========================================================================
-  // EDGE CASES
-  // ==========================================================================
-
-  describe("Edge Cases", () => {
-    it("mounts successfully when column prop has no properties", () => {
-      // Arrange
-      const emptyWrapper = mountComponent({});
-
-      // Assert
-      expect(emptyWrapper.exists()).toBe(true);
-      emptyWrapper.unmount();
-    });
-
-    it("displays Error fallback text when column has no error_type", async () => {
-      // Arrange & Act
-      await wrapper.setProps({ column: { zo_sql_timestamp: mockColumn.zo_sql_timestamp } });
-
-      // Assert
-      expect(wrapper.text()).toContain("Error");
-    });
-
-    it("updates to new error type and message when column prop is updated", async () => {
-      // Arrange
-      const newColumn = {
-        ...mockColumn,
-        error_type: "SyntaxError",
-        error_message: "Unexpected token",
-      };
-
-      // Act
-      await wrapper.setProps({ column: newColumn });
-
-      // Assert
-      expect(wrapper.text()).toContain("SyntaxError");
-      expect(wrapper.text()).toContain("Unexpected token");
-    });
-
-    it("renders without throwing when timestamp is missing from column", async () => {
-      // Arrange
-      const { zo_sql_timestamp, ...columnWithoutTimestamp } = mockColumn;
-
-      // Act + Assert — component should not throw even with undefined timestamp
-      await expect(
-        wrapper.setProps({ column: columnWithoutTimestamp }),
-      ).resolves.not.toThrow();
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it("renders without throwing when zo_sql_timestamp is 0", async () => {
-      // Arrange
-      await wrapper.setProps({ column: { ...mockColumn, zo_sql_timestamp: 0 } });
-
-      // Assert
-      expect(wrapper.exists()).toBe(true);
-    });
-  });
-});
diff --git a/web/src/components/rum/ErrorDetail.vue b/web/src/components/rum/ErrorDetail.vue
deleted file mode 100644
index 11f2b6b105..0000000000
--- a/web/src/components/rum/ErrorDetail.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <div class="error_details w-[40vw]">
-    <div
-      data-test="error-detail-error-type"
-      @click="handleErrorTypeClick"
-      class="text-base text-[var(--o2-info)] capitalize cursor-pointer"
-    >
-      {{ column.error_type || "Error" }}
-    </div>
-    <div
-      class="text-sm cursor-pointer truncate mt-1"
-      :title="column.error_message"
-    >
-      {{ column.error_message }}
-    </div>
-    <div class="text-xs flex items-center mt-1">
-      <span class="mr-3 text-gray-500"> {{ column.service }}</span>
-      <div
-        class="mr-3"
-        :class="
-          column.error_handling === 'unhandled'
-            ? 'text-red-6 px-1 border border-[rgb(246,68,68)] rounded'
-            : 'text-gray-500'
-        "
-      >
-        {{ column.error_handling }}
-      </div>
-      <OIcon name="schedule" size="sm" class="text-gray-500" />
-      <span class="pl-1 text-gray-500">{{
-        getFormattedDate(column.zo_sql_timestamp / 1000)
-      }}</span>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import { formatDate } from "@/utils/date";
-import { defineProps } from "vue";
-import OIcon from "@/lib/core/Icon/OIcon.vue";
-const props = defineProps({
-  column: {
-    type: Object,
-    required: true,
-  },
-});
-
-const emit = defineEmits(["event-emitted"]);
-
-const getFormattedDate = (timestamp: number) =>
-  formatDate(Math.floor(timestamp), "MMM DD, YYYY HH:mm:ss.SSS Z");
-
-const handleErrorTypeClick = () => {
-  emit("event-emitted", {
-    type: "error_type_click",
-    data: {
-      error_type: props,
-    },
-  });
-};
-</script>
diff --git a/web/src/components/rum/ErrorsList.spec.ts b/web/src/components/rum/ErrorsList.spec.ts
deleted file mode 100644
index a003d7a07e..0000000000
--- a/web/src/components/rum/ErrorsList.spec.ts
+++ /dev/null
@@ -1,457 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { describe, expect, it, beforeEach, afterEach, vi } from "vitest";
-import { mount, flushPromises } from "@vue/test-utils";
-import ErrorsList from "@/components/rum/ErrorsList.vue";
-import i18n from "@/locales";
-import store from "@/test/unit/helpers/store";
-import router from "@/test/unit/helpers/router";
-
-// Mock zincutils
-vi.mock("@/utils/zincutils", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("@/utils/zincutils")>();
-  return {
-    ...actual,
-    formatDuration: vi.fn((duration) => {
-      if (duration < 60) return `${duration}s`;
-      if (duration < 3600) return `${Math.floor(duration / 60)}m`;
-      return `${Math.floor(duration / 3600)}h`;
-    }),
-    mergeRoutes: vi.fn((route1: any, route2: any) => [
-      ...(route1 || []),
-      ...(route2 || []),
-    ]),
-  };
-});
-
-vi.mock("@/components/rum/SearchBar.vue", () => ({
-  default: {
-    name: "SearchBar",
-    template: '<div data-test="search-bar">Search Bar</div>',
-  },
-}));
-
-vi.mock("@/plugins/traces/IndexList.vue", () => ({
-  default: {
-    name: "IndexList",
-    template: '<div data-test="index-list">Index List</div>',
-  },
-}));
-
-vi.mock("@/lib/core/Table/OTable.vue", () => ({
-  default: {
-    name: "OTable",
-    template: `
-      <div data-test="app-table">
-        <div data-test="table-columns" v-if="columns">{{ columns.length }} columns</div>
-        <div data-test="table-rows" v-if="data">{{ data.length }} rows</div>
-        <slot name="cell-error" :row="{ error: 'Test Error', error_type: 'JavaScript Error' }"></slot>
-      </div>
-    `,
-    props: ["columns", "data"],
-  },
-}));
-
-vi.mock("@/components/rum/ErrorDetail.vue", () => ({
-  default: {
-    name: "ErrorDetail",
-    template: '<div data-test="error-detail">{{ column.error || "No Error" }}</div>',
-    props: ["column"],
-  },
-}));
-
-describe("ErrorsList", () => {
-  let wrapper: any;
-
-  const splitterStub = {
-    template: `
-      <div data-test="splitter">
-        <div data-test="before-section"><slot name="before" /></div>
-        <div data-test="separator-section"><slot name="separator" /></div>
-        <div data-test="after-section"><slot name="after" /></div>
-      </div>
-    `,
-    props: ["modelValue", "unit", "vertical"],
-  };
-
-  beforeEach(async () => {
-    vi.clearAllMocks();
-
-    wrapper = mount(ErrorsList, {
-      global: {
-        plugins: [i18n, router],
-        provide: { store },
-        stubs: { OSplitter: splitterStub },
-      },
-    });
-
-    await flushPromises();
-    await wrapper.vm.$nextTick();
-  });
-
-  afterEach(() => {
-    if (wrapper) wrapper.unmount();
-    vi.clearAllTimers();
-    vi.restoreAllMocks();
-  });
-
-  // ==========================================================================
-  // COMPONENT MOUNTING
-  // ==========================================================================
-
-  describe("Component Mounting", () => {
-    it("mounts successfully without errors", () => {
-      // Arrange & Assert
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it("renders SearchBar component in the layout", () => {
-      // Arrange & Assert
-      expect(wrapper.find('[data-test="search-bar"]').exists()).toBe(true);
-    });
-
-    it("renders IndexList component in the before slot", () => {
-      // Arrange & Assert
-      expect(wrapper.find('[data-test="index-list"]').exists()).toBe(true);
-    });
-
-    it("renders OTable component in the after slot", () => {
-      // Arrange & Assert
-      expect(wrapper.findComponent({ name: "OTable" }).exists()).toBe(true);
-    });
-
-    it("renders splitter layout with before, separator and after sections", () => {
-      // Arrange & Assert
-      expect(wrapper.find('[data-test="splitter"]').exists()).toBe(true);
-      expect(wrapper.find('[data-test="before-section"]').exists()).toBe(true);
-      expect(wrapper.find('[data-test="separator-section"]').exists()).toBe(true);
-      expect(wrapper.find('[data-test="after-section"]').exists()).toBe(true);
-    });
-
-    it("renders the drag grip element in the separator slot", () => {
-      // Arrange & Assert
-      expect(wrapper.find('[data-test="errors-list-splitter-drag-grip"]').exists()).toBe(true);
-    });
-  });
-
-  // ==========================================================================
-  // COMPONENT STRUCTURE
-  // ==========================================================================
-
-  describe("Component Structure", () => {
-    it("renders IndexList inside the before section", () => {
-      // Arrange
-      const beforeSection = wrapper.find('[data-test="before-section"]');
-
-      // Assert
-      expect(beforeSection.find('[data-test="index-list"]').exists()).toBe(true);
-    });
-
-    it("renders OTable inside the after section", () => {
-      // Arrange
-      const afterSection = wrapper.find('[data-test="after-section"]');
-
-      // Assert
-      expect(afterSection.findComponent({ name: "OTable" }).exists()).toBe(true);
-    });
-
-    it("renders SearchBar component in the component tree", () => {
-      // Arrange & Assert
-      expect(wrapper.findComponent({ name: "SearchBar" }).exists()).toBe(true);
-    });
-  });
-
-  // ==========================================================================
-  // TABLE COLUMNS CONFIGURATION
-  // ==========================================================================
-
-  describe("Columns Configuration", () => {
-    it("passes an array of columns to OTable with more than zero columns", () => {
-      // Arrange
-      const oTable = wrapper.findComponent({ name: "OTable" });
-
-      // Assert
-      expect(Array.isArray(oTable.props("columns"))).toBe(true);
-      expect(oTable.props("columns").length).toBeGreaterThan(0);
-    });
-
-    it("includes an error column with header Error and sortable true", () => {
-      // Arrange
-      const oTable = wrapper.findComponent({ name: "OTable" });
-      const columns = oTable.props("columns");
-
-      // Assert
-      const errorColumn = columns.find((col: any) => col.id === "error");
-      expect(errorColumn).toBeDefined();
-      expect(errorColumn.header).toBe("Error");
-      expect(errorColumn.sortable).toBe(true);
-    });
-
-    it("includes a type column with header Session Type and sortable true", () => {
-      // Arrange
-      const oTable = wrapper.findComponent({ name: "OTable" });
-      const columns = oTable.props("columns");
-
-      // Assert
-      const typeColumn = columns.find((col: any) => col.id === "type");
-      expect(typeColumn).toBeDefined();
-      expect(typeColumn.header).toBe("Session Type");
-      expect(typeColumn.sortable).toBe(true);
-    });
-
-    it("includes a time_spent column with header Time Spent and accessorFn", () => {
-      // Arrange
-      const oTable = wrapper.findComponent({ name: "OTable" });
-      const columns = oTable.props("columns");
-
-      // Assert
-      const timeSpentColumn = columns.find((col: any) => col.id === "time_spent");
-      expect(timeSpentColumn).toBeDefined();
-      expect(timeSpentColumn.header).toBe("Time Spent");
-      expect(timeSpentColumn.sortable).toBe(true);
-      expect(typeof timeSpentColumn.accessorFn).toBe("function");
-    });
-
-    it("includes an error_count column with header Error Count and sortable true", () => {
-      // Arrange
-      const oTable = wrapper.findComponent({ name: "OTable" });
-      const columns = oTable.props("columns");
-
-      // Assert
-      const errorCountColumn = columns.find((col: any) => col.id === "error_count");
-      expect(errorCountColumn).toBeDefined();
-      expect(errorCountColumn.header).toBe("Error Count");
-      expect(errorCountColumn.sortable).toBe(true);
-    });
-
-    it("includes an initial_view_name column with header Initial View Name and sortable true", () => {
-      // Arrange
-      const oTable = wrapper.findComponent({ name: "OTable" });
-      const columns = oTable.props("columns");
-
-      // Assert
-      const initialViewColumn = columns.find((col: any) => col.id === "initial_view_name");
-      expect(initialViewColumn).toBeDefined();
-      expect(initialViewColumn.header).toBe("Initial View Name");
-      expect(initialViewColumn.sortable).toBe(true);
-    });
-
-    it("error column has accessorKey set to error", () => {
-      // Arrange
-      const oTable = wrapper.findComponent({ name: "OTable" });
-      const columns = oTable.props("columns");
-      const errorColumn = columns.find((col: any) => col.id === "error");
-
-      // Assert
-      expect(errorColumn.accessorKey).toBe("error");
-    });
-
-    it("type column has accessorKey set to type", () => {
-      // Arrange
-      const oTable = wrapper.findComponent({ name: "OTable" });
-      const columns = oTable.props("columns");
-      const typeColumn = columns.find((col: any) => col.id === "type");
-
-      // Assert
-      expect(typeColumn.accessorKey).toBe("type");
-    });
-
-    it("time_spent column accessorFn converts 120 seconds of nanoseconds to 2m", () => {
-      // Arrange
-      const oTable = wrapper.findComponent({ name: "OTable" });
-      const columns = oTable.props("columns");
-      const timeSpentColumn = columns.find((col: any) => col.id === "time_spent");
-      const mockRow = { time_spent: "120000000" };
-
-      // Act
-      const result = timeSpentColumn.accessorFn(mockRow);
-
-      // Assert
-      expect(result).toBe("2m");
-    });
-
-    it("error_count column has accessorKey set to error_count", () => {
-      // Arrange
-      const oTable = wrapper.findComponent({ name: "OTable" });
-      const columns = oTable.props("columns");
-      const errorCountColumn = columns.find((col: any) => col.id === "error_count");
-
-      // Assert
-      expect(errorCountColumn.accessorKey).toBe("error_count");
-    });
-
-    it("initial_view_name column has accessorKey set to initial_view_name", () => {
-      // Arrange
-      const oTable = wrapper.findComponent({ name: "OTable" });
-      const columns = oTable.props("columns");
-      const initialViewColumn = columns.find((col: any) => col.id === "initial_view_name");
-
-      // Assert
-      expect(initialViewColumn.accessorKey).toBe("initial_view_name");
-    });
-  });
-
-  // ==========================================================================
-  // OTABLE INTEGRATION
-  // ==========================================================================
-
-  describe("OTable Integration", () => {
-    it("passes an empty array as data to OTable on initial mount", () => {
-      // Arrange
-      const oTable = wrapper.findComponent({ name: "OTable" });
-
-      // Assert
-      expect(oTable.props("data")).toEqual([]);
-    });
-
-    it("renders ErrorDetail component inside the error cell slot", () => {
-      // Arrange & Assert
-      expect(wrapper.find('[data-test="error-detail"]').exists()).toBe(true);
-    });
-
-    it("passes column prop to ErrorDetail component in cell slot", () => {
-      // Arrange
-      const errorDetail = wrapper.findComponent({ name: "ErrorDetail" });
-
-      // Assert
-      expect(errorDetail.exists()).toBe(true);
-      expect(errorDetail.props("column")).toBeDefined();
-    });
-
-    it("renders correct column count text in OTable when columns are set", () => {
-      // Arrange & Assert
-      expect(wrapper.find('[data-test="table-columns"]').text()).toContain("5 columns");
-    });
-
-    it("renders zero rows text in OTable when data is empty", () => {
-      // Arrange & Assert
-      expect(wrapper.find('[data-test="table-rows"]').text()).toContain("0 rows");
-    });
-  });
-
-  // ==========================================================================
-  // COLUMN FUNCTIONS
-  // ==========================================================================
-
-  describe("Column Functions", () => {
-    it("time_spent accessorFn does not throw when given invalid value", () => {
-      // Arrange
-      const oTable = wrapper.findComponent({ name: "OTable" });
-      const columns = oTable.props("columns");
-      const timeSpentColumn = columns.find((col: any) => col.id === "time_spent");
-      const invalidRow = { time_spent: "invalid" };
-
-      // Assert
-      expect(() => timeSpentColumn.accessorFn(invalidRow)).not.toThrow();
-    });
-  });
-
-  // ==========================================================================
-  // TRANSLATED LABELS
-  // ==========================================================================
-
-  describe("Column Label Translation", () => {
-    it("renders all expected column headers in correct order", () => {
-      // Arrange
-      const oTable = wrapper.findComponent({ name: "OTable" });
-      const columns = oTable.props("columns");
-
-      // Assert
-      expect(columns[0].header).toBe("Error");
-      expect(columns[1].header).toBe("Session Type");
-      expect(columns[2].header).toBe("Time Spent");
-      expect(columns[3].header).toBe("Error Count");
-      expect(columns[4].header).toBe("Initial View Name");
-    });
-  });
-
-  // ==========================================================================
-  // SLOT RENDERING
-  // ==========================================================================
-
-  describe("Slot Rendering", () => {
-    it("renders error-detail slot with non-empty content", () => {
-      // Arrange
-      const errorDetailSlot = wrapper.find('[data-test="error-detail"]');
-
-      // Assert
-      expect(errorDetailSlot.exists()).toBe(true);
-      expect(errorDetailSlot.text().length).toBeGreaterThan(0);
-    });
-
-    it("passes column prop to the slotted ErrorDetail component", () => {
-      // Arrange
-      const errorDetail = wrapper.findComponent({ name: "ErrorDetail" });
-
-      // Assert
-      expect(errorDetail.props()).toHaveProperty("column");
-    });
-  });
-
-  // ==========================================================================
-  // DATA UPDATES
-  // ==========================================================================
-
-  describe("Data Updates", () => {
-    it("OTable data prop is an empty array on initial mount", () => {
-      // Arrange
-      const oTable = wrapper.findComponent({ name: "OTable" });
-
-      // Assert
-      expect(Array.isArray(oTable.props("data"))).toBe(true);
-      expect(oTable.props("data")).toHaveLength(0);
-    });
-
-    it("OTable columns prop is a non-empty array on initial mount", () => {
-      // Arrange
-      const oTable = wrapper.findComponent({ name: "OTable" });
-
-      // Assert
-      expect(Array.isArray(oTable.props("columns"))).toBe(true);
-      expect(oTable.props("columns").length).toBeGreaterThan(0);
-    });
-  });
-
-  // ==========================================================================
-  // SPLITTER LAYOUT
-  // ==========================================================================
-
-  describe("Splitter Layout", () => {
-    it("renders IndexList inside the before section", () => {
-      // Arrange
-      const beforeSection = wrapper.find('[data-test="before-section"]');
-
-      // Assert
-      expect(beforeSection.findComponent({ name: "IndexList" }).exists()).toBe(true);
-    });
-
-    it("renders OTable inside the after section", () => {
-      // Arrange
-      const afterSection = wrapper.find('[data-test="after-section"]');
-
-      // Assert
-      expect(afterSection.findComponent({ name: "OTable" }).exists()).toBe(true);
-    });
-
-    it("renders drag grip element inside the separator slot", () => {
-      // Arrange
-      const separatorSection = wrapper.find('[data-test="separator-section"]');
-
-      // Assert
-      expect(separatorSection.find('[data-test="errors-list-splitter-drag-grip"]').exists()).toBe(true);
-    });
-  });
-});
diff --git a/web/src/components/rum/ErrorsList.vue b/web/src/components/rum/ErrorsList.vue
deleted file mode 100644
index cf9773b5a9..0000000000
--- a/web/src/components/rum/ErrorsList.vue
+++ /dev/null
@@ -1,146 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <div class="sessions_page">
-    <SearchBar></SearchBar>
-    <OSplitter
-      class="logs-horizontal-splitter full-height"
-      v-model="splitterModel"
-      unit="px"
-    >
-      <template #before>
-        <IndexList></IndexList>
-      </template>
-      <template #separator>
-        <div
-          data-test="errors-list-splitter-drag-grip"
-          class="bg-primary text-white inline-flex items-center justify-center w-5 h-5 rounded-full top-[0.625rem]"
-        >
-          <OIcon name="drag-indicator" size="xs" />
-        </div>
-      </template>
-      <template #after>
-        <OTable
-          :data="tableRows"
-          :columns="tableColumns"
-          :default-columns="false"
-          row-key="id"
-          pagination="none"
-          virtual-scroll
-          dense
-          data-test="rum-errors-list-table"
-        >
-          <template #cell-error="{ row }">
-            <ErrorDetail :column="row" />
-          </template>
-        </OTable>
-      </template>
-    </OSplitter>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from "vue";
-import { useI18n } from "vue-i18n";
-import OTable from "@/lib/core/Table/OTable.vue";
-import { COL } from "@/lib/core/Table/OTable.types";
-import OIcon from "@/lib/core/Icon/OIcon.vue";
-import OSplitter from "@/lib/core/Splitter/OSplitter.vue";
-import { formatDuration } from "@/utils/zincutils";
-import SearchBar from "./SearchBar.vue";
-import IndexList from "@/plugins/traces/IndexList.vue";
-import ErrorDetail from "./ErrorDetail.vue";
-
-interface Session {
-  timestamp: string;
-  type: string;
-  time_spent: string;
-  error_count: string;
-  initial_view_name: string;
-  id: string;
-}
-
-const { t } = useI18n();
-
-const splitterModel = ref(250);
-const tableColumns = [
-  {
-    id: "error",
-    header: t("rum.error"),
-    accessorKey: "error",
-    sortable: true,
-    size: COL.description,
-    meta: { align: "left", autoWidth: true },
-  },
-  {
-    id: "type",
-    header: t("rum.sessionType"),
-    accessorKey: "type",
-    sortable: true,
-    size: COL.type,
-    meta: { align: "left" },
-  },
-  {
-    id: "time_spent",
-    header: t("rum.timeSpent"),
-    accessorFn: (row: any) => formatDuration(row["time_spent"] / 1000000),
-    sortable: true,
-    size: COL.duration,
-    meta: { align: "left" },
-  },
-  {
-    id: "error_count",
-    header: t("rum.errorCount"),
-    accessorKey: "error_count",
-    sortable: true,
-    size: COL.count,
-    meta: { align: "right" },
-  },
-  {
-    id: "initial_view_name",
-    header: t("rum.initialViewName"),
-    accessorKey: "initial_view_name",
-    sortable: true,
-    size: COL.name,
-    meta: { align: "left" },
-  },
-];
-
-const rows = ref<Session[]>([]);
-
-const tableRows = computed(() => rows.value);
-</script>
-
-<style>
-.sessions_page .index-table :hover::-webkit-scrollbar,
-#tracesSearchGridComponent:hover::-webkit-scrollbar {
-  height: 0.8125rem;
-  width: 0.8125rem;
-}
-
-.sessions_page .index-table ::-webkit-scrollbar-track,
-#tracesSearchGridComponent::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-  border-radius: 0.625rem;
-}
-
-.sessions_page .index-table ::-webkit-scrollbar-thumb,
-#tracesSearchGridComponent::-webkit-scrollbar-thumb {
-  border-radius: 0.625rem;
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
-}
-</style>
diff --git a/web/src/components/rum/EventDetailDrawerContent.spec.ts b/web/src/components/rum/EventDetailDrawerContent.spec.ts
index d0a490770b..24213e2582 100644
--- a/web/src/components/rum/EventDetailDrawerContent.spec.ts
+++ b/web/src/components/rum/EventDetailDrawerContent.spec.ts
@@ -1101,11 +1101,11 @@ describe("EventDetailDrawerContent", () => {
   // ==========================================================================
 
   describe.skip("Event type styling", () => {
-    it.skip("applies bg-red-100 class to badge for error event type", async () => {
+    it.skip("applies bg-error-100 class to badge for error event type", async () => {
       // Skip: class-based assertions are forbidden by test standards
       await wrapper.setProps({ event: createMockEvent({ type: "error" }) });
       await flushPromises();
-      expect(wrapper.find(".bg-red-100").exists()).toBe(true);
+      expect(wrapper.find(".bg-error-100").exists()).toBe(true);
     });
 
     it.skip("applies bg-blue-100 class to badge for action event type", () => {
@@ -1113,11 +1113,11 @@ describe("EventDetailDrawerContent", () => {
       expect(wrapper.find(".bg-blue-100").exists()).toBe(true);
     });
 
-    it.skip("applies bg-green-100 class to badge for view event type", async () => {
+    it.skip("applies bg-success-100 class to badge for view event type", async () => {
       // Skip: class-based assertions are forbidden by test standards
       await wrapper.setProps({ event: createMockEvent({ type: "view" }) });
       await flushPromises();
-      expect(wrapper.find(".bg-green-100").exists()).toBe(true);
+      expect(wrapper.find(".bg-success-100").exists()).toBe(true);
     });
 
     it.skip("applies bg-grey-100 class to badge for unknown event type", async () => {
diff --git a/web/src/components/rum/EventDetailDrawerContent.vue b/web/src/components/rum/EventDetailDrawerContent.vue
index 687ec91508..b0cdee03fe 100644
--- a/web/src/components/rum/EventDetailDrawerContent.vue
+++ b/web/src/components/rum/EventDetailDrawerContent.vue
@@ -16,21 +16,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <ODrawer data-test="event-detail-drawer"
+    bleed
     :open="open"
     size="xl"
     @update:open="emit('update:open', $event)"
   >
     <template #header>
-      <div class="px-1 py-[0.625rem] w-full">
+      <div class="px-1 py-2.5 w-full">
         <div class="flex items-center flex-nowrap w-full">
         <div class="flex flex-col w-full">
           <!-- Event Header -->
-          <div class="flex items-center justify-between mb-[0.625rem]">
+          <div class="flex items-center justify-between mb-2.5">
               <div
                 class="flex items-center w-full"
               >
                 <div
-                  class="px-1.5 py-0.5 rounded text-[10px] font-semibold uppercase mr-1.5"
+                  class="px-1.5 py-0.5 rounded-default text-3xs font-semibold uppercase mr-1.5"
                   :class="getEventTypeClass(event.type)"
                 >
                   {{ event.type }}
@@ -93,7 +94,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </template>
 
     <!-- Tabs Navigation -->
-    <div class="flex pt-2 px-2">
+    <div class="flex pt-2 px-page-edge">
       <div class="w-full">
         <OTabs v-model="activeTab" align="left" dense>
           <OTab
@@ -137,10 +138,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <div>
               <div
                 v-if="rawEvent?.error_type"
-                class="flex py-1 px-1.5 border-b border-solid border-[var(--o2-border-color)] text-xs"
+                class="flex py-1 px-1.5 border-b border-solid border-card-glass-border text-xs"
               >
                 <div
-                  class="w-[100px] font-medium text-[var(--o2-text-secondary)] shrink-0"
+                  class="w-25 font-medium text-text-secondary shrink-0"
                 >
                   Error Type:
                 </div>
@@ -150,10 +151,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </div>
               <div
                 v-if="rawEvent?.error_message"
-                class="flex py-1 px-1.5 border-b border-solid border-[var(--o2-border-color)] text-xs"
+                class="flex py-1 px-1.5 border-b border-solid border-card-glass-border text-xs"
               >
                 <div
-                  class="w-[100px] font-medium text-[var(--o2-text-secondary)] shrink-0"
+                  class="w-25 font-medium text-text-secondary shrink-0"
                 >
                   Message:
                 </div>
@@ -163,20 +164,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </div>
               <div
                 v-if="rawEvent?.error_handling"
-                class="flex py-1 px-1.5 border-b border-solid border-[var(--o2-border-color)] text-xs"
+                class="flex py-1 px-1.5 border-b border-solid border-card-glass-border text-xs"
               >
                 <div
-                  class="w-[100px] font-medium text-[var(--o2-text-secondary)] shrink-0"
+                  class="w-25 font-medium text-text-secondary shrink-0"
                 >
                   Handling:
                 </div>
                 <div class="flex-1 break-words">
                   <span
-                    class="px-1 py-0.5 rounded text-[10px]"
+                    class="px-1 py-0.5 rounded-default text-3xs"
                     :class="
                       rawEvent.error_handling === 'unhandled'
-                        ? 'text-red-6 border border-solid border-red-6'
-                        : 'text-gray-500'
+                        ? 'text-status-error-text border border-solid border-status-negative'
+                        : 'text-text-secondary'
                     "
                   >
                     {{ rawEvent.error_handling }}
@@ -188,13 +189,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 class="flex py-1 px-1.5 text-xs"
               >
                 <div
-                  class="w-[100px] font-medium text-[var(--o2-text-secondary)] shrink-0"
+                  class="w-25 font-medium text-text-secondary shrink-0"
                 >
                   Error ID:
                 </div>
                 <div class="flex-1 break-words">
                   <code
-                    class="font-mono text-[10px] px-1 py-0.5 bg-(--color-surface-accent) rounded"
+                    class="font-mono text-3xs px-1 py-0.5 bg-surface-accent rounded-default"
                   >
                     {{ formatId(rawEvent.error_id) }}
                   </code>
@@ -213,10 +214,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <div>
               <div
                 v-if="rawEvent?.view_loading_type"
-                class="flex py-1 px-1.5 border-b border-solid border-[var(--o2-border-color)] text-xs"
+                class="flex py-1 px-1.5 border-b border-solid border-card-glass-border text-xs"
               >
                 <div
-                  class="w-[100px] font-medium text-[var(--o2-text-secondary)] shrink-0"
+                  class="w-25 font-medium text-text-secondary shrink-0"
                 >
                   Loading Type:
                 </div>
@@ -226,10 +227,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </div>
               <div
                 v-if="rawEvent?.view_url"
-                class="flex py-1 px-1.5 border-b border-solid border-[var(--o2-border-color)] text-xs"
+                class="flex py-1 px-1.5 border-b border-solid border-card-glass-border text-xs"
               >
                 <div
-                  class="w-[100px] font-medium text-[var(--o2-text-secondary)] shrink-0"
+                  class="w-25 font-medium text-text-secondary shrink-0"
                 >
                   URL:
                 </div>
@@ -245,13 +246,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 class="flex py-1 px-1.5 text-xs"
               >
                 <div
-                  class="w-[100px] font-medium text-[var(--o2-text-secondary)] shrink-0"
+                  class="w-25 font-medium text-text-secondary shrink-0"
                 >
                   View ID:
                 </div>
                 <div class="flex-1 break-words">
                   <code
-                    class="font-mono text-[10px] px-1 py-0.5 bg-(--color-surface-accent) rounded"
+                    class="font-mono text-3xs px-1 py-0.5 bg-surface-accent rounded-default"
                   >
                     {{ formatId(rawEvent.view_id) }}
                   </code>
@@ -274,7 +275,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <template v-if="isLoadingRelatedResources">
               <div class="mt-2 p-2 text-center">
                 <OSpinner size="xs" />
-                <div class="mt-1 text-gray-400 text-xs">
+                <div class="mt-1 text-text-secondary text-xs">
                   Loading related events...
                 </div>
               </div>
@@ -287,14 +288,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <div
                   v-for="item in relatedResources"
                   :key="item[`${item.type}_id`] || item.id"
-                  class="p-1.5 mb-1 bg-(--color-surface-accent) rounded cursor-pointer hover:bg-[#e0e0e0] transition-colors"
+                  class="p-1.5 mb-1 bg-surface-accent rounded-default cursor-pointer hover:bg-interactive-hover-bg transition-colors"
                   data-test="related-resource-item"
                   @click="viewResourceDetails(item)"
                 >
                   <!-- Event Type Badge -->
                   <div class="flex items-center mb-0.5">
                     <div
-                      class="px-1 py-0.5 rounded text-[10px] font-semibold uppercase mr-1.5"
+                      class="px-1 py-0.5 rounded-default text-3xs font-semibold uppercase mr-1.5"
                       :class="getEventTypeClass(item.type)"
                     >
                       {{ item.type }}
@@ -303,7 +304,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <!-- Resource -->
                     <template v-if="item.type === 'resource'">
                       <span
-                        class="mr-1 font-bold text-[10px] text-[var(--o2-primary-btn-bg)]"
+                        class="mr-1 font-bold text-3xs text-button-primary"
                       >
                         {{ item.resource_method || "GET" }}
                       </span>
@@ -352,7 +353,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </div>
 
                   <!-- Event Details Row -->
-                  <div class="flex items-center text-gray-400 text-[10px]">
+                  <div class="flex items-center text-text-secondary text-3xs">
                     <OIcon name="schedule" size="xs" class="mr-1" />
                     <span class="mr-2">{{
                       formatTimestamp(item.date)
@@ -407,12 +408,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <div
               v-for="resource in networkResources"
               :key="resource.resource_id"
-              class="p-2 mb-2 bg-(--color-surface-accent) rounded"
+              class="p-2 mb-2 bg-surface-accent rounded-default"
               data-test="network-resource-item"
             >
               <div class="flex items-center mb-1">
                 <span
-                  class="px-1.5 py-0.5 rounded text-[10px] font-bold mr-2 bg-blue-100 text-blue-700"
+                  class="px-1.5 py-0.5 rounded-default text-3xs font-bold mr-2 bg-badge-blue-soft-bg text-badge-blue-soft-text"
                 >
                   {{ resource.resource_method || "GET" }}
                 </span>
@@ -421,7 +422,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </span>
               </div>
               <div
-                class="flex items-center gap-x-3 text-[10px] text-gray-400"
+                class="flex items-center gap-x-3 text-3xs text-text-secondary"
               >
                 <div class="flex items-center">
                   <OIcon name="access-time" size="xs" class="mr-1" />
@@ -445,7 +446,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </template>
         <div
           v-else
-          class="text-center py-8 text-gray-400 text-sm"
+          class="text-center py-8 text-text-muted text-sm"
           data-test="network-empty-state"
         >
           No network requests found for this event
@@ -454,7 +455,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
       <!-- Console Tab -->
       <OTabPanel name="console" padding="sm" data-test="console-tab">
-        <div class="text-center py-8 text-gray-400 text-sm">
+        <div class="text-center py-8 text-text-muted text-sm">
           Console logs coming soon
         </div>
       </OTabPanel>
@@ -465,7 +466,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         padding="sm"
         data-test="performance-tab"
       >
-        <div class="text-center py-8 text-gray-400 text-sm">
+        <div class="text-center py-8 text-text-muted text-sm">
           Performance metrics coming soon
         </div>
       </OTabPanel>
@@ -484,7 +485,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </OButton>
         </div>
         <div
-          class="p-2 rounded overflow-x-auto font-mono text-[10px]"
+          class="p-2 rounded-default overflow-x-auto font-mono text-3xs"
           data-test="raw-event-json"
         >
           <div>
@@ -494,7 +495,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :key="key"
               class="ml-4"
             >
-              <span :class="store.state.theme === 'dark' ? 'dark' : ''">
+              <span>
                 <LogsHighLighting
                   :data="{ [key]: rawEvent[key] }"
                   :show-braces="false"
@@ -768,6 +769,3 @@ defineExpose({
 });
 </script>
 
-<style>
-@import "@/assets/styles/log-highlighting.css";
-</style>
diff --git a/web/src/components/rum/FrustrationBadge.spec.ts b/web/src/components/rum/FrustrationBadge.spec.ts
deleted file mode 100644
index 90dead31f3..0000000000
--- a/web/src/components/rum/FrustrationBadge.spec.ts
+++ /dev/null
@@ -1,207 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { describe, expect, it, afterEach, vi } from "vitest";
-import { mount, VueWrapper } from "@vue/test-utils";
-import FrustrationBadge from "./FrustrationBadge.vue";
-
-describe("FrustrationBadge", () => {
-  let wrapper: VueWrapper;
-
-  afterEach(() => {
-    wrapper.unmount();
-    vi.restoreAllMocks();
-  });
-
-  describe("count = 0 renders the none placeholder", () => {
-    it("shows the em-dash placeholder when count is 0", () => {
-      // Arrange
-      wrapper = mount(FrustrationBadge, { props: { count: 0 } });
-
-      // Act — nothing, static render
-
-      // Assert
-      expect(wrapper.find('[data-test="frustration-badge-none"]').exists()).toBe(true);
-      expect(wrapper.find('[data-test="frustration-badge-none"]').text()).toBe("—");
-    });
-
-    it("does not render a severity badge when count is 0", () => {
-      // Arrange
-      wrapper = mount(FrustrationBadge, { props: { count: 0 } });
-
-      // Assert
-      expect(wrapper.find('[data-test="frustration-badge-low"]').exists()).toBe(false);
-      expect(wrapper.find('[data-test="frustration-badge-medium"]').exists()).toBe(false);
-      expect(wrapper.find('[data-test="frustration-badge-high"]').exists()).toBe(false);
-    });
-  });
-
-  describe("low severity (count 1–3)", () => {
-    it("shows a low-severity badge for count 1", () => {
-      // Arrange
-      wrapper = mount(FrustrationBadge, { props: { count: 1 } });
-
-      // Assert
-      expect(wrapper.find('[data-test="frustration-badge-low"]').exists()).toBe(true);
-      expect(wrapper.text()).toContain("1");
-    });
-
-    it("shows a low-severity badge for count 3 (boundary)", () => {
-      // Arrange
-      wrapper = mount(FrustrationBadge, { props: { count: 3 } });
-
-      // Assert
-      expect(wrapper.find('[data-test="frustration-badge-low"]').exists()).toBe(true);
-      expect(wrapper.text()).toContain("3");
-    });
-
-    it("has singular tooltip text for count 1", () => {
-      // Arrange
-      wrapper = mount(FrustrationBadge, { props: { count: 1 } });
-
-      // Assert
-      expect(wrapper.find('[data-test="frustration-badge-low"]').attributes("title")).toBe(
-        "1 frustration signal detected"
-      );
-    });
-  });
-
-  describe("medium severity (count 4–7)", () => {
-    it("shows a medium-severity badge for count 5", () => {
-      // Arrange
-      wrapper = mount(FrustrationBadge, { props: { count: 5 } });
-
-      // Assert
-      expect(wrapper.find('[data-test="frustration-badge-medium"]').exists()).toBe(true);
-      expect(wrapper.text()).toContain("5");
-    });
-
-    it("shows a medium-severity badge for count 4 (lower boundary)", () => {
-      // Arrange
-      wrapper = mount(FrustrationBadge, { props: { count: 4 } });
-
-      // Assert
-      expect(wrapper.find('[data-test="frustration-badge-medium"]').exists()).toBe(true);
-    });
-
-    it("shows a medium-severity badge for count 7 (upper boundary)", () => {
-      // Arrange
-      wrapper = mount(FrustrationBadge, { props: { count: 7 } });
-
-      // Assert
-      expect(wrapper.find('[data-test="frustration-badge-medium"]').exists()).toBe(true);
-    });
-
-    it("has correct plural tooltip with medium severity label", () => {
-      // Arrange
-      wrapper = mount(FrustrationBadge, { props: { count: 5 } });
-
-      // Assert
-      expect(wrapper.find('[data-test="frustration-badge-medium"]').attributes("title")).toBe(
-        "5 frustration signals (Medium severity)"
-      );
-    });
-  });
-
-  describe("high severity (count 8+)", () => {
-    it("shows a high-severity badge for count 8 (boundary)", () => {
-      // Arrange
-      wrapper = mount(FrustrationBadge, { props: { count: 8 } });
-
-      // Assert
-      expect(wrapper.find('[data-test="frustration-badge-high"]').exists()).toBe(true);
-    });
-
-    it("shows a high-severity badge for count 12", () => {
-      // Arrange
-      wrapper = mount(FrustrationBadge, { props: { count: 12 } });
-
-      // Assert
-      expect(wrapper.find('[data-test="frustration-badge-high"]').exists()).toBe(true);
-      expect(wrapper.text()).toContain("12");
-    });
-
-    it("has correct tooltip with high severity warning for count 10", () => {
-      // Arrange
-      wrapper = mount(FrustrationBadge, { props: { count: 10 } });
-
-      // Assert
-      expect(wrapper.find('[data-test="frustration-badge-high"]').attributes("title")).toBe(
-        "10 frustration signals (High severity - requires attention)"
-      );
-    });
-  });
-
-  describe("container data-test attribute", () => {
-    it("always renders the container element", () => {
-      // Arrange
-      wrapper = mount(FrustrationBadge, { props: { count: 5 } });
-
-      // Assert
-      expect(wrapper.find('[data-test="frustration-badge-container"]').exists()).toBe(true);
-    });
-  });
-
-  describe("tooltip attribute is present on severity badges", () => {
-    it("has a title attribute containing frustration signals text", () => {
-      // Arrange
-      wrapper = mount(FrustrationBadge, { props: { count: 5 } });
-
-      // Assert
-      const title = wrapper.find('[data-test="frustration-badge-medium"]').attributes("title");
-      expect(title).toBeDefined();
-      expect(title).toContain("frustration signals");
-    });
-  });
-
-  describe("reactivity", () => {
-    it("updates from low to high severity when count prop changes", async () => {
-      // Arrange
-      wrapper = mount(FrustrationBadge, { props: { count: 2 } });
-      expect(wrapper.find('[data-test="frustration-badge-low"]').exists()).toBe(true);
-
-      // Act
-      await wrapper.setProps({ count: 10 });
-
-      // Assert
-      expect(wrapper.find('[data-test="frustration-badge-high"]').exists()).toBe(true);
-      expect(wrapper.find('[data-test="frustration-badge-low"]').exists()).toBe(false);
-    });
-
-    it("switches from badge to placeholder when count changes to 0", async () => {
-      // Arrange
-      wrapper = mount(FrustrationBadge, { props: { count: 5 } });
-      expect(wrapper.find('[data-test="frustration-badge-medium"]').exists()).toBe(true);
-
-      // Act
-      await wrapper.setProps({ count: 0 });
-
-      // Assert
-      expect(wrapper.find('[data-test="frustration-badge-medium"]').exists()).toBe(false);
-      expect(wrapper.find('[data-test="frustration-badge-none"]').exists()).toBe(true);
-    });
-  });
-
-  describe("large numbers", () => {
-    it("handles count 999 as high severity and displays the number", () => {
-      // Arrange
-      wrapper = mount(FrustrationBadge, { props: { count: 999 } });
-
-      // Assert
-      expect(wrapper.find('[data-test="frustration-badge-high"]').exists()).toBe(true);
-      expect(wrapper.text()).toContain("999");
-    });
-  });
-});
diff --git a/web/src/components/rum/FrustrationBadge.vue b/web/src/components/rum/FrustrationBadge.vue
deleted file mode 100644
index b119081c1e..0000000000
--- a/web/src/components/rum/FrustrationBadge.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <div class="inline-flex items-center justify-center" data-test="frustration-badge-container">
-    <OTag
-      v-if="count > 0"
-      type="frustrationSeverity"
-      :value="severity"
-      :data-test="`frustration-badge-${severity}`"
-      :title="tooltipText"
-      data-test-tooltip="frustration-badge-tooltip"
-    >{{ count }}</OTag>
-    <span v-else class="text-gray-400" data-test="frustration-badge-none">—</span>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import OTag from "@/lib/core/Badge/OTag.vue";
-
-interface Props {
-  count: number;
-}
-
-const props = defineProps<Props>();
-
-// Severity levels:
-// 1-3: Low friction — minor UX issues
-// 4-7: Medium — concerning pattern, needs investigation
-// 8+:  High — critical, immediate attention required
-const SEVERITY_THRESHOLDS = {
-  LOW: 3,
-  MEDIUM: 7,
-} as const;
-
-const severity = computed(() => {
-  if (props.count === 0) return "none";
-  if (props.count <= SEVERITY_THRESHOLDS.LOW) return "low";
-  if (props.count <= SEVERITY_THRESHOLDS.MEDIUM) return "medium";
-  return "high";
-});
-
-const tooltipText = computed(() => {
-  if (props.count === 0) return "No frustration signals detected";
-  if (props.count === 1) return "1 frustration signal detected";
-
-  const severityLabel = {
-    low: "Low severity",
-    medium: "Medium severity",
-    high: "High severity - requires attention",
-  }[severity.value as "low" | "medium" | "high"];
-
-  return `${props.count} frustration signals (${severityLabel})`;
-});
-</script>
diff --git a/web/src/components/rum/PlayerEventsSidebar.vue b/web/src/components/rum/PlayerEventsSidebar.vue
index 4ca41d8523..e8945fd267 100644
--- a/web/src/components/rum/PlayerEventsSidebar.vue
+++ b/web/src/components/rum/PlayerEventsSidebar.vue
@@ -57,7 +57,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </template>
     <template v-else>
       <div
-        class="flex items-center justify-between w-full pt-2 px-[0.375rem]"
+        class="flex items-center justify-between w-full pt-2 px-1.5"
       >
         <div class="pr-1 w-[60%]">
           <OInput
@@ -86,7 +86,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :key="filteredEvent.id + '-' + index"
         >
           <div
-            class="mb-1 px-2 py-2 cursor-pointer rounded hover:bg-[#ededed] hover:text-black"
+            class="mb-1 px-2 py-2 cursor-pointer rounded-default hover:bg-interactive-hover-bg hover:text-text-body"
             @click="handleEventClick(filteredEvent)"
             :data-test="`player-event-row-${filteredEvent.type}`"
           >
@@ -261,11 +261,3 @@ const handleEventClick = (event: any) => {
   emit("event-emitted", "event-click", event);
 };
 </script>
-
-<style>
-.event-type-selector .q-field__control .q-field__native span {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-</style>
diff --git a/web/src/components/rum/PlayerTracesTab.vue b/web/src/components/rum/PlayerTracesTab.vue
index 12369dcd0a..28512a82f7 100644
--- a/web/src/components/rum/PlayerTracesTab.vue
+++ b/web/src/components/rum/PlayerTracesTab.vue
@@ -32,7 +32,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       class="flex flex-col items-center justify-center h-full gap-4 p-4"
       data-test="rum-player-traces-tab-error"
     >
-      <OIcon name="error-outline" size="lg" class="text-[var(--o2-status-error)]" />
+      <OIcon name="error-outline" size="lg" class="text-status-error-text" />
       <p class="text-center">{{ error }}</p>
       <OButton
         variant="outline"
@@ -50,8 +50,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       class="flex flex-col items-center justify-center h-full gap-3 p-4"
       data-test="rum-player-traces-tab-empty"
     >
-      <OIcon name="info" size="lg" class="text-[var(--o2-text-muted)]" />
-      <p class="text-center text-[var(--o2-text-secondary)]">
+      <OIcon name="info" size="lg" class="text-text-muted" />
+      <p class="text-center text-text-secondary">
         {{ t("rum.noCorrelatedTraces") }}
       </p>
     </div>
@@ -62,7 +62,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       class="flex flex-col h-full overflow-hidden"
     >
       <!-- Trace detail header -->
-      <div class="flex items-center gap-1 px-2 py-1.5 border-b border-solid border-[var(--o2-border-color)]">
+      <div class="flex items-center gap-1 px-2 py-1.5 border-b border-solid border-card-glass-border">
         <OButton
           variant="ghost"
           size="xs"
@@ -72,37 +72,37 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         >
           <OIcon name="arrow-back" size="sm" />
         </OButton>
-        <code class="text-sm text-[var(--o2-text-secondary)] truncate min-w-0 flex-1">{{ shortRoute(selectedTrace.route) || selectedTrace.label }}</code>
+        <code class="text-sm text-text-secondary truncate min-w-0 flex-1">{{ shortRoute(selectedTrace.route) || selectedTrace.label }}</code>
         <div class="flex items-center gap-1.5 flex-shrink-0">
           <span
             v-if="selectedTrace.metadata?.errorCount > 0"
-            class="font-bold inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[0.6875rem] bg-[var(--o2-status-error-bg)]! text-[var(--o2-status-error-text)]!"
+            class="font-bold inline-flex items-center gap-1 px-1.5 py-0.5 rounded-default text-2xs bg-status-error-bg! text-status-error-text!"
           >
             <OIcon name="error" size="xs" />
             {{ selectedTrace.metadata.errorCount }} {{ selectedTrace.metadata.errorCount === 1 ? t("rum.error") : t("rum.errors") }}
           </span>
           <button
             v-if="selectedTrace.metadata?.start_time && props.startTime > 0"
-            class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[0.6875rem] bg-(--color-surface-accent) text-[var(--o2-text-body)] whitespace-nowrap cursor-pointer hover:bg-[var(--o2-border-color)]"
+            class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-default text-2xs bg-surface-accent text-text-body whitespace-nowrap cursor-pointer hover:bg-card-glass-border"
             :title="t('rum.seekToMoment')"
             data-test="rum-player-traces-tab-seek-btn"
             @click="seekToTrace(selectedTrace)"
           >
-            <OIcon name="play-arrow" size="xs" class="text-[var(--o2-text-secondary)]" />
+            <OIcon name="play-arrow" size="xs" class="text-text-secondary" />
             {{ traceTimeOffset(selectedTrace.metadata.start_time) }}
           </button>
           <span
             v-if="selectedTrace.metadata?.e2eDuration"
-            class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[0.6875rem] bg-(--color-surface-accent) text-[var(--o2-text-body)] whitespace-nowrap"
+            class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-default text-2xs bg-surface-accent text-text-body whitespace-nowrap"
           >
-            <OIcon name="timer" size="xs" class="text-[var(--o2-text-secondary)]" />
+            <OIcon name="timer" size="xs" class="text-text-secondary" />
             {{ formatTimeWithSuffix(selectedTrace.metadata.e2eDuration * 1000) }}
           </span>
           <span
             v-if="selectedTrace.metadata?.spanCount"
-            class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[0.6875rem] bg-(--color-surface-accent) text-[var(--o2-text-body)] whitespace-nowrap"
+            class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-default text-2xs bg-surface-accent text-text-body whitespace-nowrap"
           >
-            <OIcon name="lan" size="xs" class="text-[var(--o2-text-secondary)]" />
+            <OIcon name="lan" size="xs" class="text-text-secondary" />
             {{ selectedTrace.metadata.spanCount }} {{ selectedTrace.metadata.spanCount === 1 ? t("rum.span") : t("rum.spans") }}
           </span>
           <OButton
@@ -144,7 +144,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <!-- List view -->
     <div v-else class="flex flex-col overflow-hidden h-full px-2">
       <!-- Filter bar -->
-      <div class="flex items-center pr-2 py-1  shrink-0 min-h-[2rem]">
+      <div class="flex items-center pr-2 py-1  shrink-0 min-h-8">
         <OTag
           type="logsResultChip"
           value="neutral"
@@ -160,7 +160,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </div>
 
       <!-- Traces table -->
-      <div class="flex-1 min-h-0 overflow-hidden rounded">
+      <div class="flex-1 min-h-0 overflow-hidden rounded-default">
         <TenstackTable
           :rows="correlatedViews"
           :columns="traceColumns"
@@ -564,12 +564,10 @@ watch(
 );
 </script>
 
-<style>
-:deep(.trace-details-content .card-container) {
-  box-shadow: none;
-}
-
+<style scoped>
+/* keep(generated-content): reaches into TenstackTable-generated rows and the
+   embedded TraceDetails DOM, which Tailwind utilities on this template can't target */
 :deep(.trace-row--error td:first-child) {
-  border-left: 2px solid var(--o2-status-error);
+  border-left: 0.125rem solid var(--color-status-error-text);
 }
 </style>
diff --git a/web/src/components/rum/ResourceDetailDrawer.spec.ts b/web/src/components/rum/ResourceDetailDrawer.spec.ts
deleted file mode 100644
index cd7165a588..0000000000
--- a/web/src/components/rum/ResourceDetailDrawer.spec.ts
+++ /dev/null
@@ -1,890 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { describe, expect, it, beforeEach, afterEach, vi } from "vitest";
-import { mount, flushPromises, VueWrapper } from "@vue/test-utils";
-import ResourceDetailDrawer from "@/components/rum/ResourceDetailDrawer.vue";
-import i18n from "@/locales";
-import store from "@/test/unit/helpers/store";
-import router from "@/test/unit/helpers/router";
-
-// ============================================================================
-// TEST DATA FACTORIES
-// ============================================================================
-
-function createMockResource(overrides: Record<string, any> = {}) {
-  return {
-    resource_method: "GET",
-    resource_url: "http://localhost:5080/users",
-    resource_duration: 250,
-    resource_status_code: 200,
-    resource_type: "xhr",
-    resource_size: 2048,
-    resource_render_blocking_status: "non-blocking",
-    _timestamp: 1700000000000000,
-    session: {
-      id: "session-123",
-    },
-    view: {
-      url: "http://localhost:5080/dashboard",
-    },
-    // The component reads _oo?.trace_id to decide whether to show TraceCorrelationCard
-    // but passes _oo_trace_id (flat) as the :trace-id prop binding.
-    _oo: {
-      trace_id: "trace-123",
-      span_id: "span-456",
-    },
-    _oo_trace_id: "trace-123",
-    ...overrides,
-  };
-}
-
-function createMinimalResource() {
-  return {
-    resource_url: "http://localhost:5080",
-    _timestamp: 1700000000000000,
-  };
-}
-
-function createResourceWithStatus(statusCode: number) {
-  return createMockResource({ resource_status_code: statusCode });
-}
-
-// ============================================================================
-// TEST HELPERS
-// ============================================================================
-
-function mountComponent(options: { props?: Record<string, any>; stubs?: Record<string, any> } = {}) {
-  const defaultProps = {
-    modelValue: true,
-    resource: createMockResource(),
-  };
-
-  return mount(ResourceDetailDrawer, {
-    props: { ...defaultProps, ...options.props },
-    global: {
-      plugins: [i18n, router],
-      provide: { store },
-      stubs: {
-        TraceCorrelationCard: {
-          template: `<div
-            data-test="trace-correlation-card"
-            :data-trace-id="traceId"
-            :data-span-id="spanId"
-            :data-session-id="sessionId"
-            :data-resource-duration="resourceDuration"
-          >Trace Correlation</div>`,
-          props: ["traceId", "spanId", "sessionId", "resourceDuration"],
-        },
-        ...options.stubs,
-      },
-    },
-  });
-}
-
-// ============================================================================
-// TEST SUITE
-// ============================================================================
-
-describe("ResourceDetailDrawer", () => {
-  let wrapper: VueWrapper;
-
-  beforeEach(async () => {
-    vi.clearAllMocks();
-    store.state.zoConfig = {
-      ...(store.state.zoConfig || {}),
-      timestamp_column: "_timestamp",
-    } as any;
-
-    wrapper = mountComponent();
-    await flushPromises();
-  });
-
-  afterEach(() => {
-    if (wrapper) wrapper.unmount();
-    vi.clearAllTimers();
-    vi.restoreAllMocks();
-  });
-
-  // ==========================================================================
-  // INITIAL RENDERING
-  // ==========================================================================
-
-  describe("Initial Rendering", () => {
-    it("renders the component when mounted", () => {
-      // Arrange & Assert
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it("displays the header title when open", () => {
-      // Arrange & Assert
-      expect(wrapper.text()).toContain("Resource Details");
-    });
-
-    it("displays close button in header when open", () => {
-      // Arrange & Assert
-      expect(wrapper.find('[data-test="close-drawer-btn"]').exists()).toBe(true);
-    });
-  });
-
-  // ==========================================================================
-  // RESOURCE HEADER DISPLAY
-  // ==========================================================================
-
-  describe("Resource Header Information", () => {
-    it("displays HTTP method when resource has resource_method", () => {
-      // Arrange & Assert
-      expect(wrapper.text()).toContain("GET");
-    });
-
-    it("displays resource URL when resource has resource_url", () => {
-      // Arrange & Assert
-      expect(wrapper.text()).toContain("http://localhost:5080/users");
-    });
-
-    it("displays formatted timestamp containing the year when resource has _timestamp", () => {
-      // Arrange & Assert
-      expect(wrapper.text()).toContain("2023");
-    });
-
-    it("displays resource duration in milliseconds when duration < 1000", () => {
-      // Arrange & Assert
-      expect(wrapper.text()).toContain("250ms");
-    });
-
-    it("displays HTTP status code when resource has resource_status_code", () => {
-      // Arrange & Assert
-      expect(wrapper.text()).toContain("200");
-    });
-
-    it("renders a check-circle icon for a 200 success status code", () => {
-      // Arrange & Assert
-      const icons = wrapper.findAllComponents({ name: "OIcon" });
-      const successIcon = icons.find((icon: any) =>
-        icon.props("name")?.includes("check-circle"),
-      );
-      expect(successIcon).toBeTruthy();
-    });
-
-    it("displays the correct status code text for each HTTP status range", async () => {
-      // Arrange
-      const testCases = [200, 301, 404, 500];
-
-      for (const status of testCases) {
-        // Act
-        await wrapper.setProps({ resource: createResourceWithStatus(status) });
-        await flushPromises();
-
-        // Assert
-        expect(wrapper.text()).toContain(String(status));
-      }
-    });
-
-    it("renders a warning icon for a 404 client error status code", async () => {
-      // Arrange & Act
-      await wrapper.setProps({ resource: createResourceWithStatus(404) });
-      await flushPromises();
-
-      // Assert
-      const icons = wrapper.findAllComponents({ name: "OIcon" });
-      const warningIcon = icons.find((icon: any) =>
-        icon.props("name")?.includes("warning"),
-      );
-      expect(warningIcon).toBeTruthy();
-    });
-
-    it("renders an error icon for a 500 server error status code", async () => {
-      // Arrange & Act
-      await wrapper.setProps({ resource: createResourceWithStatus(500) });
-      await flushPromises();
-
-      // Assert
-      const icons = wrapper.findAllComponents({ name: "OIcon" });
-      const errorIcon = icons.find((icon: any) =>
-        icon.props("name")?.includes("error"),
-      );
-      expect(errorIcon).toBeTruthy();
-    });
-
-    it("provides a title attribute containing the page URL for truncated display", () => {
-      // Arrange & Assert
-      const urlElements = wrapper.findAll("[title]");
-      const urlElement = urlElements.find((el: any) =>
-        el.attributes("title")?.includes("http://localhost:5080/dashboard"),
-      );
-      expect(urlElement).toBeTruthy();
-    });
-  });
-
-  // ==========================================================================
-  // RESOURCE INFORMATION SECTION
-  // ==========================================================================
-
-  describe("Resource Information Details", () => {
-    it("displays Resource Information section heading when resource is present", () => {
-      // Arrange & Assert
-      expect(wrapper.text()).toContain("Resource Information");
-    });
-
-    it("displays the resource type field when resource has resource_type", () => {
-      // Arrange & Assert
-      expect(wrapper.text()).toContain("Type:");
-      expect(wrapper.text()).toContain("xhr");
-    });
-
-    it("displays formatted file size when resource has resource_size", () => {
-      // Arrange & Assert
-      expect(wrapper.text()).toContain("Size:");
-      expect(wrapper.text()).toContain("2.00 KB");
-    });
-
-    it("displays render blocking status when resource has resource_render_blocking_status", () => {
-      // Arrange & Assert
-      expect(wrapper.text()).toContain("Render Blocking:");
-      expect(wrapper.text()).toContain("non-blocking");
-    });
-
-    it("displays session ID field when resource has a session id", () => {
-      // Arrange & Assert
-      expect(wrapper.text()).toContain("Session ID:");
-      expect(
-        wrapper
-          .find('[data-test="resource-detail-drawer-session-id-text"]')
-          .exists(),
-      ).toBe(true);
-    });
-
-    it("displays Page URL field when resource has a view url", () => {
-      // Arrange & Assert
-      expect(wrapper.text()).toContain("Page URL:");
-      expect(wrapper.text()).toContain("http://localhost:5080/dashboard");
-    });
-
-    it("hides Type, Size, and Render Blocking fields when resource has no optional data", async () => {
-      // Arrange & Act
-      await wrapper.setProps({ resource: createMinimalResource() });
-      await flushPromises();
-
-      // Assert
-      const text = wrapper.text();
-      expect(text).not.toContain("Type:");
-      expect(text).not.toContain("Size:");
-      expect(text).not.toContain("Render Blocking:");
-    });
-
-    it("displays N/A for zero timestamp when resource has _timestamp=0", async () => {
-      // Arrange & Act
-      await wrapper.setProps({
-        resource: createMockResource({ _timestamp: 0 }),
-      });
-      await flushPromises();
-
-      // Assert
-      expect(wrapper.text()).toContain("N/A");
-    });
-
-    it("formats bytes as B when size is below 1 KB", async () => {
-      // Arrange & Act
-      await wrapper.setProps({
-        resource: createMockResource({ resource_size: 512 }),
-      });
-      await flushPromises();
-
-      // Assert
-      expect(wrapper.text()).toContain("512.00 B");
-    });
-
-    it("formats bytes as KB when size is in kilobyte range", async () => {
-      // Arrange & Act
-      await wrapper.setProps({
-        resource: createMockResource({ resource_size: 2048 }),
-      });
-      await flushPromises();
-
-      // Assert
-      expect(wrapper.text()).toContain("2.00 KB");
-    });
-
-    it("formats bytes as MB when size is in megabyte range", async () => {
-      // Arrange & Act
-      await wrapper.setProps({
-        resource: createMockResource({ resource_size: 2097152 }),
-      });
-      await flushPromises();
-
-      // Assert
-      expect(wrapper.text()).toContain("2.00 MB");
-    });
-
-    it("formats bytes as GB when size is in gigabyte range", async () => {
-      // Arrange & Act
-      await wrapper.setProps({
-        resource: createMockResource({ resource_size: 2147483648 }),
-      });
-      await flushPromises();
-
-      // Assert
-      expect(wrapper.text()).toContain("2.00 GB");
-    });
-
-    it("hides Size field when resource_size is 0", async () => {
-      // Arrange & Act
-      await wrapper.setProps({
-        resource: createMockResource({ resource_size: 0 }),
-      });
-      await flushPromises();
-
-      // Assert
-      expect(wrapper.text()).not.toContain("Size:");
-    });
-
-    it("displays truncated session ID when ID length exceeds 16 characters", async () => {
-      // Arrange
-      const longId = "session-123456789-abcdefgh";
-
-      // Act
-      await wrapper.setProps({
-        resource: createMockResource({ session: { id: longId } }),
-      });
-      await flushPromises();
-
-      // Assert — formatSessionId returns first 8 + "..." + last 8 chars
-      const text = wrapper.text();
-      expect(text).toContain("session-");
-      expect(text).toContain("abcdefgh");
-    });
-
-    it("displays short session IDs without truncation when length <= 16 characters", async () => {
-      // Arrange & Act
-      await wrapper.setProps({
-        resource: createMockResource({ session: { id: "session-123" } }),
-      });
-      await flushPromises();
-
-      // Assert
-      expect(wrapper.text()).toContain("session-123");
-    });
-  });
-
-  // ==========================================================================
-  // TRACE CORRELATION SECTION
-  // ==========================================================================
-
-  describe("Trace Correlation Integration", () => {
-    it("renders TraceCorrelationCard when resource has _oo.trace_id", () => {
-      // Arrange & Assert
-      expect(wrapper.find('[data-test="trace-correlation-card"]').exists()).toBe(true);
-    });
-
-    it("passes correct traceId via _oo_trace_id flat property to TraceCorrelationCard", () => {
-      // The component uses resource._oo_trace_id as the :trace-id binding.
-      // The mock supplies _oo_trace_id: "trace-123" alongside _oo.trace_id.
-      const traceCard = wrapper.find('[data-test="trace-correlation-card"]');
-      expect(traceCard.exists()).toBe(true);
-      expect(traceCard.attributes("data-trace-id")).toBe("trace-123");
-    });
-
-    it("passes correct spanId prop to TraceCorrelationCard", () => {
-      const traceCard = wrapper.find('[data-test="trace-correlation-card"]');
-      expect(traceCard.exists()).toBe(true);
-      expect(traceCard.attributes("data-span-id")).toBe("span-456");
-    });
-
-    it("passes correct sessionId prop to TraceCorrelationCard", () => {
-      const traceCard = wrapper.find('[data-test="trace-correlation-card"]');
-      expect(traceCard.exists()).toBe(true);
-      expect(traceCard.attributes("data-session-id")).toBe("session-123");
-    });
-
-    it("passes correct resourceDuration prop to TraceCorrelationCard", () => {
-      const traceCard = wrapper.find('[data-test="trace-correlation-card"]');
-      expect(traceCard.exists()).toBe(true);
-      expect(traceCard.attributes("data-resource-duration")).toBe("250");
-    });
-
-    it("passes updated traceId when resource _oo_trace_id flat property changes", async () => {
-      // The component reads _oo?.trace_id to conditionally render TraceCorrelationCard,
-      // but passes _oo_trace_id (flat) as the :trace-id prop.
-      const newTraceId = "trace-updated-999";
-      await wrapper.setProps({
-        resource: createMockResource({
-          _oo: { trace_id: newTraceId, span_id: "span-new" },
-          _oo_trace_id: newTraceId,
-        }),
-      });
-      await flushPromises();
-
-      const traceCard = wrapper.find('[data-test="trace-correlation-card"]');
-      expect(traceCard.exists()).toBe(true);
-      expect(traceCard.attributes("data-trace-id")).toBe(newTraceId);
-    });
-
-    it("shows no trace available message when resource has no _oo data", async () => {
-      // Arrange & Act
-      await wrapper.setProps({
-        resource: createMockResource({ _oo: undefined }),
-      });
-      await flushPromises();
-
-      // Assert
-      expect(wrapper.text()).toContain("No trace information available for this resource");
-    });
-
-    it("shows SDK version requirement message when resource has no trace data", async () => {
-      // Arrange & Act
-      await wrapper.setProps({
-        resource: createMockResource({ _oo: undefined }),
-      });
-      await flushPromises();
-
-      // Assert
-      expect(wrapper.text()).toContain("Trace correlation requires browser SDK v0.3.3+");
-    });
-  });
-
-  // ==========================================================================
-  // SESSION CONTEXT SECTION
-  // ==========================================================================
-
-  describe("Session Context Actions", () => {
-    it("displays Session Context section when resource has session id", () => {
-      // Arrange & Assert
-      expect(wrapper.text()).toContain("Session Context");
-    });
-
-    it("renders View Session Replay button when resource has session id", () => {
-      // Arrange & Assert
-      expect(wrapper.find('[data-test="view-session-replay-btn"]').exists()).toBe(true);
-    });
-
-    it("renders View All Session Events button when resource has session id", () => {
-      // Arrange & Assert
-      expect(wrapper.find('[data-test="view-session-events-btn"]').exists()).toBe(true);
-    });
-
-    it("hides Session Context section when resource has no session data", async () => {
-      // Arrange & Act
-      await wrapper.setProps({
-        resource: createMockResource({ session: undefined }),
-      });
-      await flushPromises();
-
-      // Assert
-      expect(wrapper.text()).not.toContain("Session Context");
-    });
-
-    it("hides Session Context section when resource has an empty session object", async () => {
-      // Arrange & Act
-      await wrapper.setProps({
-        resource: createMockResource({ session: {} }),
-      });
-      await flushPromises();
-
-      // Assert
-      expect(wrapper.text()).not.toContain("Session Context");
-    });
-  });
-
-  // ==========================================================================
-  // USER INTERACTIONS & NAVIGATION
-  // ==========================================================================
-
-  describe("User Interactions", () => {
-    describe("Closing the Drawer", () => {
-      it("emits update:modelValue with false when close button is clicked", async () => {
-        // Arrange
-        const closeBtn = wrapper.find('[data-test="close-drawer-btn"]');
-
-        // Act
-        await closeBtn.trigger("click");
-        await flushPromises();
-
-        // Assert
-        expect(wrapper.emitted("update:modelValue")).toBeTruthy();
-        expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([false]);
-      });
-
-      it("emits update:modelValue when modelValue prop changes to false", async () => {
-        // Arrange — component mounted with modelValue=true in beforeEach
-
-        // Act — parent sets prop to false (watch triggers emit)
-        await wrapper.setProps({ modelValue: false });
-        await flushPromises();
-
-        // Assert — the watcher emits the new value
-        expect(wrapper.emitted("update:modelValue")).toBeTruthy();
-      });
-    });
-
-    describe("Session Replay Navigation", () => {
-      it("navigates to rumSessions route with session_id when replay button is clicked", async () => {
-        // Arrange
-        const routerPushSpy = vi.spyOn(router, "push").mockResolvedValue(undefined as any);
-        const replayBtn = wrapper.find('[data-test="view-session-replay-btn"]');
-
-        // Act
-        await replayBtn.trigger("click");
-        await flushPromises();
-
-        // Assert
-        expect(routerPushSpy).toHaveBeenCalledWith({
-          name: "rumSessions",
-          query: { session_id: "session-123" },
-        });
-      });
-
-      it("emits update:modelValue with false after navigating to session replay", async () => {
-        // Arrange
-        vi.spyOn(router, "push").mockResolvedValue(undefined as any);
-        const replayBtn = wrapper.find('[data-test="view-session-replay-btn"]');
-
-        // Act
-        await replayBtn.trigger("click");
-        await flushPromises();
-
-        // Assert
-        expect(wrapper.emitted("update:modelValue")).toBeTruthy();
-        expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([false]);
-      });
-
-      it("does not render replay button when resource has no session id", async () => {
-        // Arrange & Act
-        await wrapper.setProps({
-          resource: createMockResource({ session: undefined }),
-        });
-        await flushPromises();
-
-        // Assert
-        expect(wrapper.find('[data-test="view-session-replay-btn"]').exists()).toBe(false);
-      });
-    });
-
-    describe.skip("Session Events Action", () => {
-      it("shows info notification when View All Session Events is clicked", async () => {
-        // Skip: requires intercepting toast calls which is complex
-        const eventsBtn = wrapper.find('[data-test="view-session-events-btn"]');
-        await eventsBtn.trigger("click");
-        await flushPromises();
-      });
-    });
-  });
-
-  // ==========================================================================
-  // ACCESSIBILITY
-  // ==========================================================================
-
-  describe.skip("Accessibility", () => {
-    it("closes drawer when close button receives Enter keydown then click", async () => {
-      const closeBtn = wrapper.find('[data-test="close-drawer-btn"]');
-      await closeBtn.trigger("keydown.enter");
-      await closeBtn.trigger("click");
-      await flushPromises();
-      expect(wrapper.emitted("update:modelValue")).toBeTruthy();
-      expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([false]);
-    });
-
-    it("closes drawer when close button receives Space keydown then click", async () => {
-      const closeBtn = wrapper.find('[data-test="close-drawer-btn"]');
-      await closeBtn.trigger("keydown.space");
-      await closeBtn.trigger("click");
-      await flushPromises();
-      expect(wrapper.emitted("update:modelValue")).toBeTruthy();
-    });
-
-    it("navigates when replay button receives Enter keydown then click", async () => {
-      const replayBtn = wrapper.find('[data-test="view-session-replay-btn"]');
-      const routerPushSpy = vi.spyOn(router, "push").mockResolvedValue(undefined as any);
-      await replayBtn.trigger("keydown.enter");
-      await replayBtn.trigger("click");
-      await flushPromises();
-      expect(routerPushSpy).toHaveBeenCalled();
-    });
-
-    it("navigates when replay button receives Space keydown then click", async () => {
-      const replayBtn = wrapper.find('[data-test="view-session-replay-btn"]');
-      const routerPushSpy = vi.spyOn(router, "push").mockResolvedValue(undefined as any);
-      await replayBtn.trigger("keydown.space");
-      await replayBtn.trigger("click");
-      await flushPromises();
-      expect(routerPushSpy).toHaveBeenCalled();
-    });
-
-    it("View All Session Events button is reachable via keyboard", async () => {
-      const eventsBtn = wrapper.find('[data-test="view-session-events-btn"]');
-      await eventsBtn.trigger("keydown.enter");
-      await eventsBtn.trigger("click");
-      await flushPromises();
-      expect(eventsBtn.exists()).toBe(true);
-    });
-
-    it.skip("closes drawer on Space keydown for View All Session Events button", async () => {
-      const eventsBtn = wrapper.find('[data-test="view-session-events-btn"]');
-      await eventsBtn.trigger("keydown.space");
-      await eventsBtn.trigger("click");
-      await flushPromises();
-      expect(eventsBtn.exists()).toBe(true);
-    });
-
-    it("provides title attributes for truncated text elements", () => {
-      const urlElements = wrapper.findAll("[title]");
-      expect(urlElements.length).toBeGreaterThan(0);
-    });
-
-    it("displays semantic headings for main content sections", () => {
-      expect(wrapper.text()).toContain("Resource Details");
-      expect(wrapper.text()).toContain("Resource Information");
-      expect(wrapper.text()).toContain("Session Context");
-    });
-  });
-
-  // ==========================================================================
-  // PROPS VALIDATION
-  // ==========================================================================
-
-  describe("Component Props", () => {
-    it("renders resource data when modelValue is true", () => {
-      // Arrange & Assert
-      expect(wrapper.text()).toContain("Resource Details");
-    });
-
-    it("displays all key resource fields when resource prop is fully populated", () => {
-      // Arrange & Assert
-      expect(wrapper.text()).toContain("GET");
-      expect(wrapper.text()).toContain("http://localhost:5080/users");
-      expect(wrapper.text()).toContain("200");
-      expect(wrapper.text()).toContain("250ms");
-    });
-
-    it("mounts successfully without optional props", async () => {
-      // Arrange
-      const newWrapper = mount(ResourceDetailDrawer, {
-        global: {
-          plugins: [i18n, router],
-          provide: { store },
-        },
-      });
-
-      // Assert
-      expect(newWrapper.exists()).toBe(true);
-      newWrapper.unmount();
-    });
-
-    it("reactively updates displayed URL when resource prop changes", async () => {
-      // Arrange
-      const newResource = createMockResource({
-        resource_url: "http://example.com/new",
-        resource_status_code: 404,
-      });
-
-      // Act
-      await wrapper.setProps({ resource: newResource });
-      await flushPromises();
-
-      // Assert
-      expect(wrapper.text()).toContain("http://example.com/new");
-      expect(wrapper.text()).toContain("404");
-    });
-  });
-
-  // ==========================================================================
-  // EDGE CASES & ERROR HANDLING
-  // ==========================================================================
-
-  describe("Edge Cases", () => {
-    it("does not throw when resource prop is null", async () => {
-      // Arrange & Act
-      await wrapper.setProps({ resource: null });
-      await flushPromises();
-
-      // Assert
-      expect(wrapper.exists()).toBe(true);
-      expect(() => wrapper.html()).not.toThrow();
-    });
-
-    it("does not throw when resource prop is undefined", async () => {
-      // Arrange & Act
-      await wrapper.setProps({ resource: undefined });
-      await flushPromises();
-
-      // Assert
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it("renders minimal resource URL when resource has only required fields", async () => {
-      // Arrange & Act
-      await wrapper.setProps({ resource: createMinimalResource() });
-      await flushPromises();
-
-      // Assert
-      expect(wrapper.text()).toContain("http://localhost:5080");
-    });
-
-    it("displays N/A when resource has undefined _timestamp", async () => {
-      // Arrange & Act
-      await wrapper.setProps({
-        resource: createMockResource({ _timestamp: undefined }),
-      });
-      await flushPromises();
-
-      // Assert
-      expect(wrapper.text()).toContain("N/A");
-    });
-
-    it("hides Session Context section when resource has an empty session object", async () => {
-      // Arrange & Act
-      await wrapper.setProps({
-        resource: createMockResource({ session: {} }),
-      });
-      await flushPromises();
-
-      // Assert
-      expect(wrapper.text()).not.toContain("Session Context");
-    });
-
-    it("displays N/A when resource has zero duration, size, and status", async () => {
-      // Arrange & Act
-      await wrapper.setProps({
-        resource: createMockResource({
-          resource_duration: 0,
-          resource_size: 0,
-          resource_status_code: 0,
-        }),
-      });
-      await flushPromises();
-
-      // Assert
-      expect(wrapper.text()).toContain("N/A");
-    });
-
-    it("renders correctly when resource_url contains special HTML characters", async () => {
-      // Arrange & Act
-      await wrapper.setProps({
-        resource: createMockResource({
-          resource_url: "http://example.com/?query=<script>alert('xss')</script>",
-        }),
-      });
-      await flushPromises();
-
-      // Assert
-      expect(wrapper.exists()).toBe(true);
-    });
-  });
-
-  // ==========================================================================
-  // DATA FORMATTING - USER-FACING DISPLAY
-  // ==========================================================================
-
-  describe("Data Formatting Display", () => {
-    describe("Timestamp Display", () => {
-      it("displays a formatted year from the timestamp when resource has valid _timestamp", () => {
-        // Arrange & Assert
-        expect(wrapper.text()).toContain("2023");
-      });
-
-      it("displays N/A when resource has _timestamp=0", async () => {
-        // Arrange & Act
-        await wrapper.setProps({
-          resource: createMockResource({ _timestamp: 0 }),
-        });
-        await flushPromises();
-
-        // Assert
-        expect(wrapper.text()).toContain("N/A");
-      });
-    });
-
-    describe("Duration Display", () => {
-      it("displays duration in milliseconds when duration is 500ms", async () => {
-        // Arrange & Act
-        await wrapper.setProps({
-          resource: createMockResource({ resource_duration: 500 }),
-        });
-        await flushPromises();
-
-        // Assert
-        expect(wrapper.text()).toContain("500ms");
-      });
-
-      it("displays duration in seconds when duration is 2500ms", async () => {
-        // Arrange & Act
-        await wrapper.setProps({
-          resource: createMockResource({ resource_duration: 2500 }),
-        });
-        await flushPromises();
-
-        // Assert
-        expect(wrapper.text()).toContain("2.50s");
-      });
-
-      it("displays N/A when resource duration is 0", async () => {
-        // Arrange & Act
-        await wrapper.setProps({
-          resource: createMockResource({ resource_duration: 0 }),
-        });
-        await flushPromises();
-
-        // Assert
-        expect(wrapper.text()).toContain("N/A");
-      });
-    });
-  });
-
-  // ==========================================================================
-  // INTEGRATION SCENARIOS
-  // ==========================================================================
-
-  describe("Integration Scenarios", () => {
-    it("shows all details sections when resource is fully populated", async () => {
-      // Arrange
-      const completeResource = createMockResource();
-      await wrapper.setProps({ resource: completeResource });
-      await flushPromises();
-
-      // Assert
-      expect(wrapper.text()).toContain("Resource Information");
-      expect(wrapper.text()).toContain("Session Context");
-      expect(wrapper.find('[data-test="trace-correlation-card"]').exists()).toBe(true);
-    });
-
-    it("shows no trace message and navigates on replay click in a full user flow", async () => {
-      // Arrange — resource without trace data
-      await wrapper.setProps({
-        resource: createMockResource({ _oo: undefined }),
-      });
-      await flushPromises();
-
-      // Assert — no trace section
-      expect(wrapper.text()).toContain("No trace information available");
-      expect(wrapper.text()).toContain("browser SDK v0.3.3+");
-    });
-
-    it("navigates and closes drawer when user clicks replay button", async () => {
-      // Arrange
-      expect(wrapper.text()).toContain("Resource Details");
-      expect(wrapper.text()).toContain("GET");
-
-      const routerPushSpy = vi.spyOn(router, "push").mockResolvedValue(undefined as any);
-      const replayBtn = wrapper.find('[data-test="view-session-replay-btn"]');
-
-      // Act
-      await replayBtn.trigger("click");
-      await flushPromises();
-
-      // Assert
-      expect(routerPushSpy).toHaveBeenCalled();
-      expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([false]);
-    });
-  });
-});
diff --git a/web/src/components/rum/ResourceDetailDrawer.vue b/web/src/components/rum/ResourceDetailDrawer.vue
deleted file mode 100644
index 184fa5c097..0000000000
--- a/web/src/components/rum/ResourceDetailDrawer.vue
+++ /dev/null
@@ -1,293 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <div class="h-full flex flex-col">
-    <!-- Header -->
-    <div
-      class="p-[0.625rem] border-b border-solid border-[var(--o2-border-color)]"
-    >
-      <div class="flex justify-between items-center">
-        <div class="font-bold text-xl font-semibold">Resource Details</div>
-        <OButton
-          icon-left="close"
-          variant="ghost"
-          size="icon-sm"
-          data-test="close-drawer-btn"
-          @click="closeDrawer"
-        />
-      </div>
-    </div>
-
-    <!-- Content -->
-    <div class="flex-1 overflow-y-auto p-[0.625rem]">
-      <template v-if="resource">
-        <!-- Resource Header -->
-        <div class="mb-3">
-          <div class="font-bold text-base font-medium mb-2">
-            {{ resource.resource_method || "GET" }}
-            {{ resource.resource_url }}
-          </div>
-          <div class="flex items-center gap-2 text-gray-400">
-            <div class="flex items-center">
-              <OIcon name="schedule" size="sm" class="mr-1" />
-              <span>{{
-                formatTimestamp(resource[store.state.zoConfig.timestamp_column])
-              }}</span>
-            </div>
-            <OSeparator vertical />
-            <div class="flex items-center">
-              <OIcon name="access-time" size="sm" class="mr-1" />
-              <span>{{ formatDuration(resource.resource_duration) }}</span>
-            </div>
-            <OSeparator vertical />
-            <div class="flex items-center">
-              <OIcon
-                :name="getStatusIcon(resource.resource_status_code)"
-                :class="['mr-1', getStatusColorClass(resource.resource_status_code)]"
-                size="sm"
-              />
-              <span>{{ resource.resource_status_code || "N/A" }}</span>
-            </div>
-          </div>
-        </div>
-
-        <OSeparator class="my-4" />
-
-        <!-- Resource Details -->
-        <div class="mb-3">
-          <div class="text-base text-[var(--o2-text-color)] font-bold ml-1 mb-2">
-            Resource Information
-          </div>
-          <div>
-            <div class="flex py-2 px-3 border-b border-solid border-[var(--o2-border-color)]" v-if="resource.resource_type">
-              <div class="w-[150px] text-[var(--o2-text-secondary)] font-medium shrink-0">Type:</div>
-              <div class="flex-1 text-[var(--o2-text-color)] break-words">{{ resource.resource_type }}</div>
-            </div>
-            <div class="flex py-2 px-3 border-b border-solid border-[var(--o2-border-color)]" v-if="resource.resource_size">
-              <div class="w-[150px] text-[var(--o2-text-secondary)] font-medium shrink-0">Size:</div>
-              <div class="flex-1 text-[var(--o2-text-color)] break-words">
-                {{ formatBytes(resource.resource_size) }}
-              </div>
-            </div>
-            <div
-              class="flex py-2 px-3 border-b border-solid border-[var(--o2-border-color)]"
-              v-if="resource.resource_render_blocking_status"
-            >
-              <div class="w-[150px] text-[var(--o2-text-secondary)] font-medium shrink-0">Render Blocking:</div>
-              <div class="flex-1 text-[var(--o2-text-color)] break-words">
-                {{ resource.resource_render_blocking_status }}
-              </div>
-            </div>
-            <div class="flex py-2 px-3 border-b border-solid border-[var(--o2-border-color)]" v-if="resource.session?.id">
-              <div class="w-[150px] text-[var(--o2-text-secondary)] font-medium shrink-0">Session ID:</div>
-              <div class="flex-1 text-[var(--o2-text-color)] break-words">
-                <code
-                  data-test="resource-detail-drawer-session-id-text"
-                  class="font-mono text-sm px-2 py-1 bg-(--color-surface-accent) rounded text-[var(--o2-text-color)]"
-                >{{
-                  formatSessionId(resource.session.id)
-                }}</code>
-              </div>
-            </div>
-            <div class="flex py-2 px-3" v-if="resource.view?.url">
-              <div class="w-[150px] text-[var(--o2-text-secondary)] font-medium shrink-0">Page URL:</div>
-              <div class="flex-1 text-[var(--o2-text-color)] truncate" :title="resource.view.url">
-                {{ resource.view.url }}
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <OSeparator class="my-4" />
-
-        <!-- Trace Correlation -->
-        <TraceCorrelationCard
-          v-if="resource._oo?.trace_id"
-          :trace-id="resource._oo_trace_id"
-          :span-id="resource._oo.span_id"
-          :session-id="resource.session?.id"
-          :resource-duration="resource.resource_duration"
-        />
-
-        <!-- No Trace ID Notice -->
-        <div
-          v-else
-          class="p-3 text-center bg-(--color-surface-accent) rounded"
-        >
-          <OIcon name="info" size="md" class="mb-2" />
-          <div class="text-gray-400">
-            No trace information available for this resource.
-          </div>
-          <div class="text-xs text-gray-400 mt-1">
-            Trace correlation requires browser SDK v0.3.3+ with trace
-            propagation enabled.
-          </div>
-        </div>
-
-        <!-- Session Context -->
-        <div v-if="resource.session?.id" class="mt-3">
-          <OSeparator class="my-4" />
-          <div class="text-base text-[var(--o2-text-color)] font-bold ml-1 mb-2">
-            Session Context
-          </div>
-          <div class="flex gap-2">
-            <OButton
-              icon-left="play-circle"
-              variant="outline"
-              size="sm-action"
-              data-test="view-session-replay-btn"
-              @click="viewSessionReplay"
-            >
-              View Session Replay
-            </OButton>
-            <OButton
-              icon-left="format-list-bulleted"
-              variant="ghost"
-              size="sm-action"
-              data-test="view-session-events-btn"
-              @click="viewSessionEvents"
-            >
-              View All Session Events
-            </OButton>
-          </div>
-        </div>
-      </template>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, watch } from "vue";
-import { formatToHuman } from "@/utils/date";
-import { useRouter } from "vue-router";
-import { useStore } from "vuex";
-import TraceCorrelationCard from "@/components/rum/correlation/TraceCorrelationCard.vue";
-import OButton from "@/lib/core/Button/OButton.vue";
-import OIcon from "@/lib/core/Icon/OIcon.vue";
-import { toast } from "@/lib/feedback/Toast/useToast";
-import OSeparator from '@/lib/core/Separator/OSeparator.vue';
-
-
-const props = defineProps({
-  modelValue: {
-    type: Boolean,
-    default: false,
-  },
-  resource: {
-    type: Object,
-    default: null,
-  },
-});
-
-const emit = defineEmits(["update:modelValue"]);
-
-const router = useRouter();
-const store = useStore();
-
-const isOpen = ref(props.modelValue);
-
-watch(
-  () => props.modelValue,
-  (val) => {
-    isOpen.value = val;
-  },
-);
-
-watch(isOpen, (val) => {
-  emit("update:modelValue", val);
-});
-
-const closeDrawer = () => {
-  isOpen.value = false;
-};
-
-const formatTimestamp = (timestamp: number) => {
-  if (!timestamp) return "N/A";
-  return formatToHuman(timestamp);
-};
-
-const formatDuration = (duration: number) => {
-  if (!duration) return "N/A";
-  if (duration < 1000) {
-    return `${Math.round(duration)}ms`;
-  }
-  return `${(duration / 1000).toFixed(2)}s`;
-};
-
-const formatBytes = (bytes: number) => {
-  if (!bytes) return "N/A";
-  const units = ["B", "KB", "MB", "GB"];
-  let size = bytes;
-  let unitIndex = 0;
-  while (size >= 1024 && unitIndex < units.length - 1) {
-    size /= 1024;
-    unitIndex++;
-  }
-  return `${size.toFixed(2)} ${units[unitIndex]}`;
-};
-
-const formatSessionId = (id: string) => {
-  if (!id) return "";
-  return id.length > 16
-    ? `${id.substring(0, 8)}...${id.substring(id.length - 8)}`
-    : id;
-};
-
-const getStatusIcon = (statusCode: number) => {
-  if (!statusCode) return "help-outline";
-  if (statusCode >= 200 && statusCode < 300) return "check-circle";
-  if (statusCode >= 300 && statusCode < 400) return "info";
-  if (statusCode >= 400 && statusCode < 500) return "warning";
-  return "error";
-};
-
-const getStatusColorClass = (statusCode: number) => {
-  if (!statusCode) return "text-gray-500";
-  if (statusCode >= 200 && statusCode < 300) return "text-[var(--o2-positive)]";
-  if (statusCode >= 300 && statusCode < 400) return "text-[var(--o2-info)]";
-  if (statusCode >= 400 && statusCode < 500) return "text-[var(--o2-warning)]";
-  return "text-[var(--o2-negative)]";
-};
-
-const viewSessionReplay = () => {
-  if (!props.resource?.session?.id) return;
-
-  // Navigate to session replay viewer
-  router.push({
-    name: "rumSessions",
-    query: {
-      session_id: props.resource.session.id,
-    },
-  });
-  closeDrawer();
-};
-
-const viewSessionEvents = () => {
-  if (!props.resource?.session?.id) return;
-
-  // TODO: Navigate to filtered session events view
-  toast({
-    variant: "info",
-    message: "Session events view coming soon",
-  });
-};
-
-defineExpose({
-  viewSessionEvents,
-});
-</script>
-
diff --git a/web/src/components/rum/SearchBar.spec.ts b/web/src/components/rum/SearchBar.spec.ts
deleted file mode 100644
index 9e01ca5c35..0000000000
--- a/web/src/components/rum/SearchBar.spec.ts
+++ /dev/null
@@ -1,971 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import {
-  describe,
-  expect,
-  it,
-  beforeEach,
-  afterEach,
-  vi,
-  beforeAll,
-} from "vitest";
-import { mount, flushPromises } from "@vue/test-utils";
-import i18n from "@/locales";
-import store from "@/test/unit/helpers/store";
-import router from "@/test/unit/helpers/router";
-
-// Mock Vue's defineAsyncComponent — must be hoisted before importing component
-vi.mock("vue", async (importOriginal) => {
-  const mod = await importOriginal<typeof import("vue")>();
-  return {
-    ...mod,
-    defineAsyncComponent: vi.fn(() => ({
-      name: "AsyncQueryEditor",
-      template: '<div data-test="query-editor">Query Editor</div>',
-      props: ["query", "keywords", "functions", "editor-id"],
-      emits: ["update:query", "run-query"],
-      methods: {
-        setValue: vi.fn(),
-        getCursorIndex: vi.fn().mockReturnValue(0),
-        triggerAutoComplete: vi.fn(),
-      },
-    })),
-  };
-});
-
-import SearchBar from "@/components/rum/SearchBar.vue";
-
-vi.mock("@/services/segment_analytics", () => ({
-  default: { track: vi.fn() },
-}));
-
-vi.mock("@/aws-exports", () => ({
-  default: { isCloud: "false" },
-}));
-
-const mockAutoCompleteKeywords = ["SELECT", "FROM", "WHERE"];
-const mockAutoCompleteData = {
-  value: {
-    query: "",
-    cursorIndex: 0,
-    fieldValues: {},
-    popup: { open: false },
-  },
-};
-
-vi.doMock("@/composables/useSuggestions", () => ({
-  default: () => ({
-    autoCompleteData: mockAutoCompleteData,
-    autoCompleteKeywords: mockAutoCompleteKeywords,
-    effectiveKeywords: { value: [] },
-    getSuggestions: vi.fn(),
-    updateFieldKeywords: vi.fn(),
-    updateStreamKeywords: vi.fn(),
-  }),
-}));
-
-const mockParser = {
-  astify: vi.fn().mockReturnValue({
-    type: "select",
-    from: [{ table: "test_stream" }],
-    where: null,
-  }),
-  sqlify: vi.fn().mockReturnValue("SELECT * FROM test_stream"),
-};
-
-vi.doMock("@/composables/useParser", () => ({
-  default: () => ({
-    sqlParser: () => Promise.resolve(mockParser),
-  }),
-}));
-
-const mockSearchObj = {
-  data: {
-    queryResults: {
-      hits: [
-        { field1: "value1", field2: "value2" },
-        { field1: "value3", field2: "value4" },
-      ],
-    },
-    stream: {
-      selectedStream: { label: "test_stream", value: "test_stream" },
-      selectedStreamFields: [{ name: "field1" }, { name: "field2" }],
-      addToFilter: "",
-      functions: [],
-    },
-    streamResults: {
-      list: [
-        {
-          name: "test_stream",
-          schema: [{ name: "field1" }, { name: "field2" }],
-        },
-      ],
-    },
-    editorValue: "",
-    query: "",
-    parsedQuery: null,
-    datetime: {
-      type: "relative",
-      relativeTimePeriod: "15m",
-      startTime: Date.now() - 900000,
-      endTime: Date.now(),
-    },
-  },
-  meta: {
-    sqlMode: false,
-    showQuery: true,
-  },
-  loading: false,
-  config: {
-    refreshTimes: [
-      { label: "5 sec", value: 5 },
-      { label: "30 sec", value: 30 },
-      { label: "1 min", value: 60 },
-    ],
-  },
-};
-
-vi.doMock("@/composables/useTraces", () => ({
-  default: () => ({ searchObj: mockSearchObj }),
-}));
-
-// Use vi.hoisted so mockToast is available in the factory function
-const { mockToast } = vi.hoisted(() => ({ mockToast: vi.fn() }));
-vi.mock("@/lib/feedback/Toast/useToast", () => ({
-  toast: (...args: any[]) => mockToast(...args),
-}));
-
-vi.mock("@/components/DateTime.vue", () => ({
-  default: {
-    name: "DateTime",
-    template: '<div data-test="date-time-picker">Date Time Picker</div>',
-    props: ["auto-apply", "default-type", "default-absolute-time", "default-relative-time"],
-    emits: ["on:date-change"],
-  },
-}));
-
-vi.mock("@/plugins/traces/SyntaxGuide.vue", () => ({
-  default: {
-    name: "SyntaxGuide",
-    template: '<div data-test="syntax-guide">Syntax Guide</div>',
-    props: ["sqlmode"],
-  },
-}));
-
-beforeAll(() => {
-  (globalThis as any).File = vi.fn(function (
-    bits: any[],
-    filename: string,
-    options?: any,
-  ) {
-    return {
-      name: filename,
-      type: options?.type || "",
-      size: bits[0]?.length || 0,
-    };
-  });
-
-  (globalThis as any).URL = {
-    createObjectURL: vi.fn(() => "blob:mock-url"),
-    revokeObjectURL: vi.fn(),
-  };
-});
-
-describe("SearchBar", () => {
-  let wrapper: any;
-
-  beforeEach(async () => {
-    vi.clearAllMocks();
-    mockToast.mockClear();
-
-    wrapper = mount(SearchBar, {
-      props: {
-        fieldValues: {
-          field1: ["value1", "value2"],
-          field2: ["value3", "value4"],
-        },
-        sqlMode: false,
-        disabled: false,
-        showQuery: true,
-      },
-      global: {
-        plugins: [i18n, router],
-        provide: { store },
-      },
-    });
-
-    await flushPromises();
-    await wrapper.vm.$nextTick();
-  });
-
-  afterEach(() => {
-    if (wrapper) wrapper.unmount();
-    vi.clearAllTimers();
-    vi.restoreAllMocks();
-  });
-
-  // ==========================================================================
-  // COMPONENT MOUNTING
-  // ==========================================================================
-
-  describe("Component Mounting", () => {
-    it("mounts successfully without errors", () => {
-      // Arrange & Assert
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it("renders the search-bar-component container element", () => {
-      // Arrange & Assert
-      expect(wrapper.find('[id="searchBarComponent"]').exists()).toBe(true);
-    });
-
-    it("renders refresh button with correct data-test attribute", () => {
-      // Arrange & Assert
-      expect(wrapper.find('[data-test="logs-search-bar-refresh-btn"]').exists()).toBe(true);
-    });
-  });
-
-  // ==========================================================================
-  // PROPS HANDLING
-  // ==========================================================================
-
-  describe("Props Handling", () => {
-    it("receives fieldValues prop with the provided object", () => {
-      // Arrange & Assert
-      expect(wrapper.props("fieldValues")).toEqual({
-        field1: ["value1", "value2"],
-        field2: ["value3", "value4"],
-      });
-    });
-  });
-
-  // ==========================================================================
-  // COMPONENT DATA (public return API)
-  // ==========================================================================
-
-  describe("Component Data", () => {
-    it("exposes searchObj with data sub-object via return API", () => {
-      // Arrange & Assert
-      expect(wrapper.vm.searchObj).toBeDefined();
-      expect(wrapper.vm.searchObj.data).toBeDefined();
-    });
-
-    it("exposes queryEditorRef via return API", () => {
-      // Arrange & Assert
-      expect(wrapper.vm.queryEditorRef).toBeDefined();
-    });
-  });
-
-  // ==========================================================================
-  // COMPONENT METHODS (public return API)
-  // ==========================================================================
-
-  describe("Component Methods", () => {
-    it("exposes searchData as a function via return API", () => {
-      // Arrange & Assert
-      expect(typeof wrapper.vm.searchData).toBe("function");
-    });
-
-    it("exposes updateDateTime as a function via return API", () => {
-      // Arrange & Assert
-      expect(typeof wrapper.vm.updateDateTime).toBe("function");
-    });
-
-    it("exposes updateQueryValue as a function via return API", () => {
-      // Arrange & Assert
-      expect(typeof wrapper.vm.updateQueryValue).toBe("function");
-    });
-
-    it("exposes updateQuery as a function via return API", () => {
-      // Arrange & Assert
-      expect(typeof wrapper.vm.updateQuery).toBe("function");
-    });
-
-    it("exposes downloadLogs as a function via return API", () => {
-      // Arrange & Assert
-      expect(typeof wrapper.vm.downloadLogs).toBe("function");
-    });
-
-    it("exposes setEditorValue as a function via return API", () => {
-      // Arrange & Assert
-      expect(typeof wrapper.vm.setEditorValue).toBe("function");
-    });
-
-    it("does not expose jsonToCsv as part of the public API", () => {
-      // Arrange & Assert
-      expect(wrapper.vm.jsonToCsv).toBeUndefined();
-    });
-
-    it("does not expose updateAutoComplete as part of the public API", () => {
-      // Arrange & Assert
-      expect(wrapper.vm.updateAutoComplete).toBeUndefined();
-    });
-  });
-
-  // ==========================================================================
-  // SEARCH FUNCTIONALITY
-  // ==========================================================================
-
-  describe("Search Functionality", () => {
-    it("emits searchdata event when searchData is called and loading is false", () => {
-      // Arrange
-      wrapper.vm.searchObj.loading = false;
-
-      // Act
-      wrapper.vm.searchData();
-
-      // Assert
-      expect(wrapper.emitted("searchdata")).toBeTruthy();
-    });
-
-    it("does not emit searchdata event when searchData is called while loading is true", () => {
-      // Arrange
-      wrapper.vm.searchObj.loading = true;
-
-      // Act
-      wrapper.vm.searchData();
-
-      // Assert
-      expect(wrapper.emitted("searchdata")).toBeFalsy();
-    });
-  });
-
-  // ==========================================================================
-  // DATE TIME HANDLING
-  // ==========================================================================
-
-  describe("Date Time Handling", () => {
-    it("updates datetime in searchObj and emits date-change when updateDateTime is called with relative type", async () => {
-      // Arrange
-      const dateTimeData = {
-        startTime: Date.now() - 3600000,
-        endTime: Date.now(),
-        relativeTimePeriod: "1h",
-        type: "relative",
-      };
-
-      // Act
-      await wrapper.vm.updateDateTime(dateTimeData);
-
-      // Assert
-      expect(wrapper.vm.searchObj.data.datetime).toMatchObject({
-        startTime: dateTimeData.startTime,
-        endTime: dateTimeData.endTime,
-        relativeTimePeriod: dateTimeData.relativeTimePeriod,
-        type: "relative",
-      });
-      expect(wrapper.emitted("date-change")).toBeTruthy();
-    });
-
-    it("sets datetime type to absolute and emits date-change when updateDateTime is called with absolute type", async () => {
-      // Arrange
-      const dateTimeData = {
-        startTime: Date.now() - 3600000,
-        endTime: Date.now(),
-        type: "absolute",
-      };
-
-      // Act
-      await wrapper.vm.updateDateTime(dateTimeData);
-
-      // Assert
-      expect(wrapper.vm.searchObj.data.datetime.type).toBe("absolute");
-      expect(wrapper.emitted("date-change")).toBeTruthy();
-    });
-  });
-
-  // ==========================================================================
-  // QUERY EDITOR INTEGRATION
-  // ==========================================================================
-
-  describe("Query Editor Integration", () => {
-    it("sets parsedQuery in searchObj when updateQueryValue is called with a valid query", async () => {
-      // Arrange
-      const queryValue = "SELECT * FROM test_stream";
-
-      // Act
-      await wrapper.vm.updateQueryValue(queryValue);
-
-      // Assert
-      expect(wrapper.vm.searchObj.data.parsedQuery).toBeDefined();
-    });
-
-    it("calls astify with query value when updateQueryValue is called in SQL mode", async () => {
-      // Arrange
-      wrapper.vm.searchObj.meta.sqlMode = true;
-      wrapper.vm.searchObj.data.streamResults = {
-        list: [
-          {
-            name: "test_stream",
-            schema: [{ name: "field1" }, { name: "field2" }],
-          },
-        ],
-      };
-
-      // Act
-      await wrapper.vm.updateQueryValue("SELECT * FROM test_stream");
-
-      // Assert
-      expect(mockParser.astify).toHaveBeenCalledWith("SELECT * FROM test_stream");
-    });
-
-    it("updates selectedStream to new_stream when query references new_stream in SQL mode", async () => {
-      // Arrange
-      wrapper.vm.searchObj.meta.sqlMode = true;
-      mockParser.astify.mockReturnValue({
-        type: "select",
-        from: [{ table: "new_stream" }],
-      });
-      wrapper.vm.searchObj.data.streamResults.list = [
-        {
-          name: "new_stream",
-          schema: [{ name: "field1" }, { name: "field2" }],
-        },
-      ];
-
-      // Act
-      await wrapper.vm.updateQueryValue("SELECT * FROM new_stream");
-
-      // Assert
-      expect(wrapper.vm.searchObj.data.stream.selectedStream.value).toBe("new_stream");
-    });
-
-    it("shows Stream not found toast when query references a non-existent stream in SQL mode", async () => {
-      // Arrange
-      wrapper.vm.searchObj.meta.sqlMode = true;
-      mockParser.astify.mockReturnValue({
-        type: "select",
-        from: [{ table: "nonexistent_stream" }],
-      });
-
-      // Act
-      await wrapper.vm.updateQueryValue("SELECT * FROM nonexistent_stream");
-
-      // Assert
-      expect(mockToast).toHaveBeenCalledWith(
-        expect.objectContaining({ message: "Stream not found" }),
-      );
-    });
-
-    it("calls setValue on queryEditorRef when updateQuery is called", () => {
-      // Arrange
-      wrapper.vm.searchObj.data.query = "new query value";
-      const mockSetValue = vi.fn();
-      wrapper.vm.queryEditorRef = { setValue: mockSetValue };
-
-      // Act
-      wrapper.vm.updateQuery();
-
-      // Assert
-      expect(mockSetValue).toHaveBeenCalledWith("new query value");
-    });
-
-    it("calls setValue on queryEditorRef with provided value when setEditorValue is called", () => {
-      // Arrange
-      const mockSetValue = vi.fn();
-      wrapper.vm.queryEditorRef = { setValue: mockSetValue };
-
-      // Act
-      wrapper.vm.setEditorValue("test value");
-
-      // Assert
-      expect(mockSetValue).toHaveBeenCalledWith("test value");
-    });
-  });
-
-  // ==========================================================================
-  // ERROR HANDLING
-  // ==========================================================================
-
-  describe("Error Handling", () => {
-    it("does not throw when updateQueryValue is called with invalid SQL in SQL mode", async () => {
-      // Arrange
-      wrapper.vm.searchObj.meta.sqlMode = true;
-
-      // Act & Assert
-      expect(() => wrapper.vm.updateQueryValue("INVALID SQL")).not.toThrow();
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it("does not throw when updateQuery is called with null queryEditorRef", () => {
-      // Arrange
-      wrapper.vm.queryEditorRef = null;
-
-      // Assert
-      expect(() => wrapper.vm.updateQuery()).not.toThrow();
-    });
-
-    it("does not throw when setEditorValue is called with null queryEditorRef", () => {
-      // Arrange
-      wrapper.vm.queryEditorRef = null;
-
-      // Assert
-      expect(() => wrapper.vm.setEditorValue("test")).not.toThrow();
-    });
-  });
-
-  // ==========================================================================
-  // INTEGRATION
-  // ==========================================================================
-
-  describe("Integration", () => {
-    it("exposes t function for i18n translation via return API", () => {
-      // Arrange & Assert
-      expect(wrapper.vm.t).toBeDefined();
-      expect(typeof wrapper.vm.t).toBe("function");
-    });
-
-    it("emits searchdata and date-change when calling searchData and updateDateTime sequentially", async () => {
-      // Arrange
-      wrapper.vm.searchObj.loading = false;
-
-      // Act
-      await wrapper.vm.searchData();
-
-      const dateData = { startTime: Date.now(), endTime: Date.now(), type: "relative" };
-      await wrapper.vm.updateDateTime(dateData);
-
-      // Assert
-      expect(wrapper.emitted("searchdata")).toBeTruthy();
-      expect(wrapper.emitted("date-change")).toBeTruthy();
-    });
-  });
-
-  // ==========================================================================
-  // DOWNLOAD LOGS FUNCTIONALITY
-  // ==========================================================================
-
-  describe("Download Logs Functionality", () => {
-    let originalCreateElement: any;
-    let originalAppendChild: any;
-    let originalRemoveChild: any;
-    let originalURL: any;
-    let originalFile: any;
-
-    beforeEach(() => {
-      originalCreateElement = document.createElement;
-      originalAppendChild = document.body.appendChild;
-      originalRemoveChild = document.body.removeChild;
-      originalURL = globalThis.URL;
-      originalFile = globalThis.File;
-
-      globalThis.URL = {
-        ...originalURL,
-        createObjectURL: vi.fn(() => "mock-url"),
-        revokeObjectURL: vi.fn(),
-      };
-
-      globalThis.File = class MockFile {
-        data: any;
-        name: string;
-        type: string;
-        constructor(data: any, filename: string, options?: any) {
-          this.data = data;
-          this.name = filename;
-          this.type = options?.type || "";
-        }
-      } as any;
-
-      const mockLink = {
-        href: "",
-        download: "",
-        click: vi.fn(),
-        setAttribute: vi.fn(),
-        removeAttribute: vi.fn(),
-      };
-      const mockCreateElement = vi.fn((tagName: string) => {
-        if (tagName === "a") return mockLink;
-        return originalCreateElement.call(document, tagName);
-      });
-
-      document.createElement = mockCreateElement;
-      document.body.appendChild = vi.fn();
-      document.body.removeChild = vi.fn();
-    });
-
-    afterEach(() => {
-      document.createElement = originalCreateElement;
-      document.body.appendChild = originalAppendChild;
-      document.body.removeChild = originalRemoveChild;
-      globalThis.URL = originalURL;
-      globalThis.File = originalFile;
-    });
-
-    it("creates a CSV File with correct headers when downloadLogs is called with data", () => {
-      // Arrange
-      wrapper.vm.searchObj.data.queryResults.hits = [
-        { field1: "value1", field2: "value2", timestamp: "2023-01-01" },
-        { field1: "value3", field2: "value4", timestamp: "2023-01-02" },
-      ];
-      const fileSpy = vi.spyOn(globalThis, "File" as any);
-
-      // Act
-      wrapper.vm.downloadLogs();
-
-      // Assert
-      expect(fileSpy).toHaveBeenCalled();
-      const csvData = fileSpy.mock.calls[0][0][0];
-      expect(csvData).toContain("field1,field2,timestamp");
-      expect(csvData).toContain('"value1","value2","2023-01-01"');
-      expect(csvData).toContain('"value3","value4","2023-01-02"');
-      expect(fileSpy).toHaveBeenCalledWith(
-        expect.any(Array),
-        "logs-data.csv",
-        { type: "text/csv" },
-      );
-      expect(globalThis.URL.createObjectURL).toHaveBeenCalled();
-      expect(document.createElement).toHaveBeenCalledWith("a");
-      expect(document.body.appendChild).toHaveBeenCalled();
-      expect(document.body.removeChild).toHaveBeenCalled();
-      expect(globalThis.URL.revokeObjectURL).toHaveBeenCalledWith("mock-url");
-
-      fileSpy.mockRestore();
-    });
-
-    it("throws when downloadLogs is called with empty query results", () => {
-      // Arrange
-      wrapper.vm.searchObj.data.queryResults.hits = [];
-
-      // Assert
-      expect(() => wrapper.vm.downloadLogs()).toThrow();
-    });
-
-    it("generates correct CSV format when field values contain special characters", () => {
-      // Arrange
-      wrapper.vm.searchObj.data.queryResults.hits = [
-        {
-          field1: 'value with "quotes"',
-          field2: "value,with,commas",
-          field3: null,
-        },
-      ];
-      const fileSpy = vi.spyOn(globalThis, "File" as any);
-
-      // Act
-      wrapper.vm.downloadLogs();
-
-      // Assert
-      const csvData = fileSpy.mock.calls[0][0][0];
-      expect(csvData).toContain("field1,field2,field3");
-      expect(csvData).toContain('"value with \\"quotes\\""');
-      expect(csvData).toContain('"value,with,commas"');
-      expect(csvData).toContain('""');
-
-      fileSpy.mockRestore();
-    });
-  });
-
-  // ==========================================================================
-  // ADD SEARCH TERM WATCH FUNCTIONALITY
-  // ==========================================================================
-
-  describe("AddSearchTerm Watch Functionality", () => {
-    beforeEach(() => {
-      const mockSetValue = vi.fn();
-      wrapper.vm.queryEditorRef = { setValue: mockSetValue };
-    });
-
-    it("does not call setValue when addToFilter is empty string", () => {
-      // Arrange
-      const mockSetValue = wrapper.vm.queryEditorRef.setValue;
-      wrapper.vm.searchObj.data.stream.addToFilter = "";
-      wrapper.vm.searchObj.data.editorValue = "existing query";
-
-      // Act
-      wrapper.vm.$options.watch.addSearchTerm.call(wrapper.vm);
-
-      // Assert
-      expect(mockSetValue).not.toHaveBeenCalled();
-    });
-
-    it("sets query to the filter value and calls setValue when addToFilter is set and editorValue is empty", () => {
-      // Arrange
-      const mockSetValue = wrapper.vm.queryEditorRef.setValue;
-      wrapper.vm.searchObj.data.stream.addToFilter = "field1='value1'";
-      wrapper.vm.searchObj.data.editorValue = "";
-
-      // Act
-      wrapper.vm.$options.watch.addSearchTerm.call(wrapper.vm);
-
-      // Assert
-      expect(wrapper.vm.searchObj.data.query).toBe("field1='value1'");
-      expect(wrapper.vm.searchObj.data.stream.addToFilter).toBe("");
-      expect(mockSetValue).toHaveBeenCalledWith("field1='value1'");
-    });
-
-    it("appends filter with AND operator to existing simple query when addToFilter is set", () => {
-      // Arrange
-      const mockSetValue = wrapper.vm.queryEditorRef.setValue;
-      wrapper.vm.searchObj.data.stream.addToFilter = "field2='value2'";
-      wrapper.vm.searchObj.data.editorValue = "field1='value1'";
-
-      // Act
-      wrapper.vm.$options.watch.addSearchTerm.call(wrapper.vm);
-
-      // Assert
-      expect(wrapper.vm.searchObj.data.query).toBe("field1='value1' and field2='value2'");
-      expect(mockSetValue).toHaveBeenCalledWith("field1='value1' and field2='value2'");
-    });
-
-    it("appends filter after pipe separator when editorValue has an existing where clause", () => {
-      // Arrange
-      const mockSetValue = wrapper.vm.queryEditorRef.setValue;
-      wrapper.vm.searchObj.data.stream.addToFilter = "field3='value3'";
-      wrapper.vm.searchObj.data.editorValue = "SELECT * FROM table | field1='value1'";
-
-      // Act
-      wrapper.vm.$options.watch.addSearchTerm.call(wrapper.vm);
-
-      // Assert
-      expect(wrapper.vm.searchObj.data.query).toBe(
-        "SELECT * FROM table |  field1='value1' and field3='value3'",
-      );
-      expect(mockSetValue).toHaveBeenCalledWith(
-        "SELECT * FROM table |  field1='value1' and field3='value3'",
-      );
-    });
-
-    it("appends filter after pipe when editorValue has an empty where clause", () => {
-      // Arrange
-      const mockSetValue = wrapper.vm.queryEditorRef.setValue;
-      wrapper.vm.searchObj.data.stream.addToFilter = "field2='value2'";
-      wrapper.vm.searchObj.data.editorValue = "SELECT * FROM table | ";
-
-      // Act
-      wrapper.vm.$options.watch.addSearchTerm.call(wrapper.vm);
-
-      // Assert
-      expect(wrapper.vm.searchObj.data.query).toBe("SELECT * FROM table | field2='value2'");
-      expect(mockSetValue).toHaveBeenCalledWith("SELECT * FROM table | field2='value2'");
-    });
-
-    it("converts null value filter to IS NULL syntax when addToFilter contains null value", () => {
-      // Arrange
-      const mockSetValue = wrapper.vm.queryEditorRef.setValue;
-      wrapper.vm.searchObj.data.stream.addToFilter = "field1='null'";
-      wrapper.vm.searchObj.data.editorValue = "";
-
-      // Act
-      wrapper.vm.$options.watch.addSearchTerm.call(wrapper.vm);
-
-      // Assert
-      expect(wrapper.vm.searchObj.data.query).toBe("field1 is null");
-      expect(mockSetValue).toHaveBeenCalledWith("field1 is null");
-    });
-
-    it("converts not-null value filter to IS NOT NULL syntax when addToFilter has !=null", () => {
-      // Arrange
-      const mockSetValue = wrapper.vm.queryEditorRef.setValue;
-      wrapper.vm.searchObj.data.stream.addToFilter = "field1!='null'";
-      wrapper.vm.searchObj.data.editorValue = "";
-
-      // Act
-      wrapper.vm.$options.watch.addSearchTerm.call(wrapper.vm);
-
-      // Assert
-      expect(wrapper.vm.searchObj.data.query).toBe("field1 is not null");
-      expect(mockSetValue).toHaveBeenCalledWith("field1 is not null");
-    });
-
-    it("does not throw when queryEditorRef is null and addToFilter is set", () => {
-      // Arrange
-      wrapper.vm.queryEditorRef = null;
-      wrapper.vm.searchObj.data.stream.addToFilter = "field1='value1'";
-      wrapper.vm.searchObj.data.editorValue = "";
-
-      // Act & Assert
-      expect(() => {
-        wrapper.vm.$options.watch.addSearchTerm.call(wrapper.vm);
-      }).not.toThrow();
-      expect(wrapper.vm.searchObj.data.query).toBe("field1='value1'");
-    });
-
-    it("does not throw when queryEditorRef has no setValue method and addToFilter is set", () => {
-      // Arrange
-      wrapper.vm.queryEditorRef = {};
-      wrapper.vm.searchObj.data.stream.addToFilter = "field1='value1'";
-      wrapper.vm.searchObj.data.editorValue = "";
-
-      // Act & Assert
-      expect(() => {
-        wrapper.vm.$options.watch.addSearchTerm.call(wrapper.vm);
-      }).not.toThrow();
-      expect(wrapper.vm.searchObj.data.query).toBe("field1='value1'");
-    });
-
-    it("appends filter to complex piped query with multiple existing conditions", () => {
-      // Arrange
-      const mockSetValue = wrapper.vm.queryEditorRef.setValue;
-      wrapper.vm.searchObj.data.stream.addToFilter = "status='error'";
-      wrapper.vm.searchObj.data.editorValue =
-        "SELECT * FROM logs | level='info' and timestamp > '2023-01-01'";
-
-      // Act
-      wrapper.vm.$options.watch.addSearchTerm.call(wrapper.vm);
-
-      // Assert
-      expect(wrapper.vm.searchObj.data.query).toBe(
-        "SELECT * FROM logs |  level='info' and timestamp > '2023-01-01' and status='error'",
-      );
-      expect(mockSetValue).toHaveBeenCalledWith(
-        "SELECT * FROM logs |  level='info' and timestamp > '2023-01-01' and status='error'",
-      );
-    });
-
-    it("replaces existing filter when same field is added again to simple query", () => {
-      // Arrange
-      const mockSetValue = wrapper.vm.queryEditorRef.setValue;
-      wrapper.vm.searchObj.data.stream.addToFilter = "field1='value2'";
-      wrapper.vm.searchObj.data.editorValue = "field1='value1'";
-
-      // Act
-      wrapper.vm.$options.watch.addSearchTerm.call(wrapper.vm);
-
-      // Assert
-      expect(wrapper.vm.searchObj.data.query).toBe("field1='value2'");
-      expect(mockSetValue).toHaveBeenCalledWith("field1='value2'");
-    });
-
-    it("replaces existing filter for same field in piped query", () => {
-      // Arrange
-      const mockSetValue = wrapper.vm.queryEditorRef.setValue;
-      wrapper.vm.searchObj.data.stream.addToFilter = "field1='value2'";
-      wrapper.vm.searchObj.data.editorValue = "SELECT * FROM table | field1='value1'";
-
-      // Act
-      wrapper.vm.$options.watch.addSearchTerm.call(wrapper.vm);
-
-      // Assert
-      expect(wrapper.vm.searchObj.data.query).toBe("SELECT * FROM table |  field1='value2'");
-      expect(mockSetValue).toHaveBeenCalledWith("SELECT * FROM table |  field1='value2'");
-    });
-
-    it("replaces multi-value group for same field when addToFilter has OR group", () => {
-      // Arrange
-      const mockSetValue = wrapper.vm.queryEditorRef.setValue;
-      wrapper.vm.searchObj.data.stream.addToFilter = "(field1='valueA' OR field1='valueB')";
-      wrapper.vm.searchObj.data.editorValue = "field1='value1'";
-
-      // Act
-      wrapper.vm.$options.watch.addSearchTerm.call(wrapper.vm);
-
-      // Assert
-      expect(wrapper.vm.searchObj.data.query).toBe("(field1='valueA' OR field1='valueB')");
-      expect(mockSetValue).toHaveBeenCalledWith("(field1='valueA' OR field1='valueB')");
-    });
-  });
-
-  // ==========================================================================
-  // COMPONENT STRUCTURE
-  // ==========================================================================
-
-  describe("Component Structure", () => {
-    it("has the component name ComponentSearchSearchBar", () => {
-      // Arrange & Assert
-      expect(wrapper.vm.$options.name).toBe("ComponentSearchSearchBar");
-    });
-  });
-
-  // ==========================================================================
-  // REMOVE FIELD TERM WATCH FUNCTIONALITY
-  // ==========================================================================
-
-  describe("RemoveFieldTerm Watch Functionality", () => {
-    beforeEach(() => {
-      const mockSetValue = vi.fn();
-      wrapper.vm.queryEditorRef = { setValue: mockSetValue };
-    });
-
-    it("does nothing when fieldName is empty string", () => {
-      // Arrange
-      const mockSetValue = wrapper.vm.queryEditorRef.setValue;
-      wrapper.vm.searchObj.data.editorValue = "field1='value1' AND field2='value2'";
-
-      // Act — call the watch handler directly with empty fieldName
-      wrapper.vm.$options.watch.removeFieldTerm.call(wrapper.vm, "");
-
-      // Assert — query unchanged
-      expect(mockSetValue).not.toHaveBeenCalled();
-    });
-
-    it("removes field condition from a simple query and updates query and editor", () => {
-      // Arrange
-      const mockSetValue = wrapper.vm.queryEditorRef.setValue;
-      wrapper.vm.searchObj.data.editorValue = "field1='value1'";
-
-      // Act
-      wrapper.vm.$options.watch.removeFieldTerm.call(wrapper.vm, "field1");
-
-      // Assert
-      expect(wrapper.vm.searchObj.data.query).toBe("");
-      expect(wrapper.vm.searchObj.data.stream.removeFilterField).toBe("");
-      expect(mockSetValue).toHaveBeenCalledWith("");
-    });
-
-    it("removes only the specified field from a multi-condition simple query", () => {
-      // Arrange
-      const mockSetValue = wrapper.vm.queryEditorRef.setValue;
-      wrapper.vm.searchObj.data.editorValue = "field1='value1' AND field2='value2'";
-
-      // Act
-      wrapper.vm.$options.watch.removeFieldTerm.call(wrapper.vm, "field1");
-
-      // Assert
-      expect(wrapper.vm.searchObj.data.query).toBe("field2='value2'");
-      expect(mockSetValue).toHaveBeenCalledWith("field2='value2'");
-    });
-
-    it("removes field condition from the WHERE part of a piped query", () => {
-      // Arrange
-      const mockSetValue = wrapper.vm.queryEditorRef.setValue;
-      wrapper.vm.searchObj.data.editorValue = "SELECT * FROM logs | field1='value1' AND field2='value2'";
-
-      // Act
-      wrapper.vm.$options.watch.removeFieldTerm.call(wrapper.vm, "field1");
-
-      // Assert
-      const result = wrapper.vm.searchObj.data.query;
-      expect(result).toContain("SELECT * FROM logs");
-      expect(result).toContain("field2='value2'");
-      expect(result).not.toMatch(/field1/);
-      expect(mockSetValue).toHaveBeenCalledWith(result);
-    });
-
-    it("does not throw when queryEditorRef is null and fieldName is set", () => {
-      // Arrange
-      wrapper.vm.queryEditorRef = null;
-      wrapper.vm.searchObj.data.editorValue = "field1='value1'";
-
-      // Act & Assert
-      expect(() => {
-        wrapper.vm.$options.watch.removeFieldTerm.call(wrapper.vm, "field1");
-      }).not.toThrow();
-      expect(wrapper.vm.searchObj.data.query).toBe("");
-    });
-
-    it("clears removeFilterField after removing the field condition", () => {
-      // Arrange
-      wrapper.vm.searchObj.data.stream.removeFilterField = "field1";
-      wrapper.vm.searchObj.data.editorValue = "field1='value1'";
-
-      // Act
-      wrapper.vm.$options.watch.removeFieldTerm.call(wrapper.vm, "field1");
-
-      // Assert
-      expect(wrapper.vm.searchObj.data.stream.removeFilterField).toBe("");
-    });
-  });
-});
diff --git a/web/src/components/rum/SearchBar.vue b/web/src/components/rum/SearchBar.vue
deleted file mode 100644
index b723384086..0000000000
--- a/web/src/components/rum/SearchBar.vue
+++ /dev/null
@@ -1,359 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <div class="search-bar-component border-b border-(--o2-border) pb-px" id="searchBarComponent">
-    <div class="flex my-1">
-      <div class="float-right flex flex-col">
-        <syntax-guide
-          data-test="logs-search-bar-sql-mode-toggle-btn"
-          :sqlmode="searchObj.meta.sqlMode"
-          class="syntax-guide-in-toolbar element-box-shadow"
-        ></syntax-guide>
-      </div>
-      <div class="float-right col-auto">
-        <OButton
-          v-if="searchObj.data.queryResults.hits"
-          class="mr-2 float-left h-7.5"
-          variant="ghost"
-          size="icon-sm"
-          icon-left="download"
-          :disabled="!searchObj.data.queryResults.hits.length"
-          :title="t('search.exportLogs')"
-          @click="downloadLogs"
-        />
-        <div class="float-left">
-          <date-time
-            auto-apply
-            menu-align="end"
-            :default-type="searchObj.data.datetime.type"
-            :default-absolute-time="{
-              startTime: searchObj.data.datetime.startTime,
-              endTime: searchObj.data.datetime.endTime,
-            }"
-            :default-relative-time="searchObj.data.datetime.relativeTimePeriod"
-            data-test="logs-search-bar-date-time-dropdown"
-            @on:date-change="updateDateTime"
-          />
-        </div>
-        <div class="pl-2 mr-2.5 float-left">
-          <OButton
-            data-test="logs-search-bar-refresh-btn"
-            data-cy="search-bar-refresh-button"
-            variant="primary"
-            size="sm-action"
-            :disabled="
-              searchObj.loading ||
-              searchObj.data.streamResults?.list?.length == 0
-            "
-            @click="searchData"
-          >
-            {{ t("search.runQuery") }}
-          </OButton>
-        </div>
-      </div>
-    </div>
-    <div class="flex" v-if="searchObj.meta.showQuery">
-      <div class="flex flex-col">
-        <query-editor
-          ref="queryEditorRef"
-          editor-id="rum-searchbar-query-editor"
-          class="w-full! h-17.5!"
-          v-model:query="searchObj.data.editorValue"
-          :keywords="effectiveKeywords"
-          v-model:functions="searchObj.data.stream.functions"
-          @update:query="updateQueryValue"
-          @run-query="searchData"
-          @focus="onQueryEditorFocus"
-          @blur="onQueryEditorBlur"
-        ></query-editor>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-// @ts-nocheck
-import {
-  defineComponent,
-  ref,
-  watch,
-  computed,
-  onBeforeMount,
-  defineAsyncComponent,
-  onBeforeUnmount,
-} from "vue";
-import { useI18n } from "vue-i18n";
-
-import DateTime from "@/components/DateTime.vue";
-import useTraces from "@/composables/useTraces";
-import { useSqlEditorDiagnostics } from "@/composables/useSqlEditorDiagnostics";
-import {
-  applyFilterTerm,
-  removeFieldCondition,
-} from "@/utils/traces/filterUtils";
-import SyntaxGuide from "@/plugins/traces/SyntaxGuide.vue";
-import OButton from '@/lib/core/Button/OButton.vue';
-
-
-import segment from "@/services/segment_analytics";
-import config from "@/aws-exports";
-import useSqlSuggestions from "@/composables/useSuggestions";
-import { toast } from "@/lib/feedback/Toast/useToast";
-
-export default defineComponent({
-  name: "ComponentSearchSearchBar",
-  components: {
-    DateTime,
-    QueryEditor: defineAsyncComponent(
-      () => import("@/components/CodeQueryEditor.vue"),
-    ),
-    SyntaxGuide,
-    OButton,
-  },
-  emits: ["searchdata", "date-change"],
-  props: {
-    fieldValues: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  methods: {
-    searchData() {
-      if (this.searchObj?.loading == false) {
-        this.$emit("searchdata");
-      }
-    },
-  },
-  setup(props, { emit }) {
-    const { t } = useI18n();
-
-    const { searchObj } = useTraces();
-    const queryEditorRef = ref(null);
-
-    const { onFocus: _sqlOnFocus, onBlur: _sqlOnBlur, onQueryChange: _sqlOnQueryChange } =
-      useSqlEditorDiagnostics({
-        queryEditorRef,
-        sqlMode: computed(() => searchObj.meta.sqlMode),
-        query: computed(() => searchObj.data.editorValue ?? ""),
-        streamName: computed(() => searchObj.data.stream.selectedStream?.value),
-      });
-
-    const onQueryEditorFocus = () => { _sqlOnFocus(); };
-    const onQueryEditorBlur = async () => { await _sqlOnBlur(); };
-
-    let parser: any;
-    let streamName = "";
-
-    const {
-      autoCompleteData,
-      autoCompleteKeywords,
-      effectiveKeywords,
-      getSuggestions,
-      updateFieldKeywords,
-      updateStreamKeywords,
-    } = useSqlSuggestions();
-
-    onBeforeMount(async () => {
-      await importSqlParser();
-    });
-
-    const importSqlParser = async () => {
-      const useSqlParser: any = await import("@/composables/useParser");
-      const { sqlParser }: any = useSqlParser.default();
-      parser = await sqlParser();
-    };
-
-    onBeforeUnmount(() => {
-      parser = null;
-    });
-
-    watch(
-      () => searchObj.data.stream.selectedStreamFields,
-      (fields) => {
-        if (fields.length) updateFieldKeywords(fields);
-      },
-      { immediate: true, deep: true },
-    );
-
-    // Feed all available RUM streams into FROM autocomplete.
-    watch(
-      () => searchObj.data.streamResults?.list,
-      (list) => {
-        updateStreamKeywords((list ?? []).map((s: any) => ({ name: s.name })));
-      },
-      { immediate: true },
-    );
-
-    const updateAutoComplete = (value) => {
-      autoCompleteData.value.query = value;
-      autoCompleteData.value.cursorIndex =
-        queryEditorRef.value.getCursorIndex();
-      autoCompleteData.value.fieldValues = props.fieldValues;
-      autoCompleteData.value.popup.open =
-        queryEditorRef.value.triggerAutoComplete;
-      getSuggestions();
-    };
-
-    const updateQueryValue = (value: string) => {
-      _sqlOnQueryChange();
-      updateAutoComplete(value);
-      if (searchObj.meta.sqlMode == true) {
-        searchObj.data.parsedQuery = parser.astify(value);
-        if (searchObj.data.parsedQuery?.from?.length > 0) {
-          if (
-            searchObj.data.parsedQuery.from[0].table !==
-              searchObj.data.stream.selectedStream.value &&
-            searchObj.data.parsedQuery.from[0].table !== streamName
-          ) {
-            let streamFound = false;
-            streamName = searchObj.data.parsedQuery.from[0].table;
-            searchObj.data.streamResults.list.forEach((stream) => {
-              if (stream.name == searchObj.data.parsedQuery.from[0].table) {
-                streamFound = true;
-                let itemObj = {
-                  label: stream.name,
-                  value: stream.name,
-                };
-                searchObj.data.stream.selectedStream = itemObj;
-                stream.schema.forEach((field) => {
-                  searchObj.data.stream.selectedStreamFields.push({
-                    name: field.name,
-                  });
-                });
-              }
-            });
-
-            if (streamFound == false) {
-              searchObj.data.stream.selectedStream = { label: "", value: "" };
-              searchObj.data.stream.selectedStreamFields = [];
-              toast({
-                message: "Stream not found",
-                variant: "warning",
-              });
-            }
-          }
-        }
-      }
-    };
-
-    const updateDateTime = (value: object) => {
-      searchObj.data.datetime = {
-        startTime: value.startTime,
-        endTime: value.endTime,
-        relativeTimePeriod: value.relativeTimePeriod
-          ? value.relativeTimePeriod
-          : searchObj.data.datetime.relativeTimePeriod,
-        type: value.relativeTimePeriod ? "relative" : "absolute",
-      };
-
-      emit("date-change", searchObj.data.datetime);
-
-      if (config.isCloud == "true" && value.userChangedValue) {
-        segment.track("Button Click", {
-          button: "Date Change",
-          tab: value.tab,
-          value: value,
-          stream_name: searchObj.data.stream.selectedStream.value,
-          page: "Search Logs",
-        });
-      }
-
-      if (value.valueType === "relative") emit("searchdata");
-    };
-
-    const updateQuery = () => {
-      if (queryEditorRef.value?.setValue)
-        queryEditorRef.value.setValue(searchObj.data.query);
-    };
-
-    // This method is used in parent component using ref
-    const setEditorValue = (value: String) => {
-      if (queryEditorRef.value?.setValue) queryEditorRef.value.setValue(value);
-    };
-
-    const jsonToCsv = (jsonData) => {
-      const replacer = (key, value) => (value === null ? "" : value);
-      const header = Object.keys(jsonData[0]);
-      let csv = header.join(",") + "\r\n";
-
-      for (let i = 0; i < jsonData.length; i++) {
-        const row = header
-          .map((fieldName) => JSON.stringify(jsonData[i][fieldName], replacer))
-          .join(",");
-        csv += row + "\r\n";
-      }
-
-      return csv;
-    };
-
-    const downloadLogs = () => {
-      const filename = "logs-data.csv";
-      const data = jsonToCsv(searchObj.data.queryResults.hits);
-      const file = new File([data], filename, {
-        type: "text/csv",
-      });
-      const url = URL.createObjectURL(file);
-      const link = document.createElement("a");
-      link.href = url;
-      link.download = filename;
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      URL.revokeObjectURL(url);
-    };
-
-    return {
-      t,
-      searchObj,
-      queryEditorRef,
-      onQueryEditorFocus,
-      onQueryEditorBlur,
-      updateQueryValue,
-      updateDateTime,
-      updateQuery,
-      downloadLogs,
-      setEditorValue,
-      autoCompleteKeywords,
-      effectiveKeywords,
-    };
-  },
-  watch: {
-    addSearchTerm() {
-      if (this.searchObj.data.stream.addToFilter != "") {
-        const newValue = applyFilterTerm(
-          this.searchObj.data.stream.addToFilter,
-          this.searchObj.data.editorValue,
-        );
-        this.searchObj.data.query = newValue;
-        this.searchObj.data.stream.addToFilter = "";
-        if (this.queryEditorRef?.setValue)
-          this.queryEditorRef.setValue(newValue);
-      }
-    },
-    removeFieldTerm(fieldName: string) {
-      if (!fieldName) return;
-      const newValue = removeFieldCondition(
-        this.searchObj.data.editorValue,
-        fieldName,
-      );
-      this.searchObj.data.query = newValue;
-      this.searchObj.data.stream.removeFilterField = "";
-      if (this.queryEditorRef?.setValue) this.queryEditorRef.setValue(newValue);
-    },
-  },
-});
-</script>
diff --git a/web/src/components/rum/SessionsList.spec.ts b/web/src/components/rum/SessionsList.spec.ts
deleted file mode 100644
index e6f5cb9411..0000000000
--- a/web/src/components/rum/SessionsList.spec.ts
+++ /dev/null
@@ -1,496 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { describe, expect, it, beforeEach, afterEach, vi } from "vitest";
-
-vi.mock("rudder-sdk-js", () => ({
-  default: {
-    ready: vi.fn(),
-    load: vi.fn(),
-    track: vi.fn(),
-  },
-}));
-
-vi.mock("@/services/segment_analytics", () => ({
-  default: { track: vi.fn() },
-}));
-
-import { mount, flushPromises } from "@vue/test-utils";
-import SessionsList from "@/components/rum/SessionsList.vue";
-import i18n from "@/locales";
-import store from "@/test/unit/helpers/store";
-import router from "@/test/unit/helpers/router";
-
-vi.mock("@/utils/zincutils", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("@/utils/zincutils")>();
-  return {
-    ...actual,
-    formatDuration: vi.fn((duration) => {
-      if (duration < 60) return `${duration}s`;
-      if (duration < 3600) return `${Math.floor(duration / 60)}m`;
-      return `${Math.floor(duration / 3600)}h`;
-    }),
-    mergeRoutes: vi.fn((route1: any, route2: any) => [
-      ...(route1 || []),
-      ...(route2 || []),
-    ]),
-  };
-});
-
-vi.mock("@/components/rum/SearchBar.vue", () => ({
-  default: {
-    name: "SearchBar",
-    template: '<div data-test="search-bar">Search Bar</div>',
-  },
-}));
-
-vi.mock("@/components/common/sidebar/SearchFieldList.vue", () => ({
-  default: {
-    name: "SearchFieldList",
-    template: '<div data-test="field-list">Field List</div>',
-  },
-}));
-
-vi.mock("@/lib/core/Table/OTable.vue", () => ({
-  default: {
-    name: "OTable",
-    template: `
-      <div data-test="app-table" @click="$emit('row-click', mockPayload)">
-        <div data-test="table-columns">{{ columns.length }} columns</div>
-        <div data-test="table-rows">{{ data.length }} rows</div>
-      </div>
-    `,
-    props: ["columns", "data"],
-    emits: ["row-click"],
-    setup() {
-      return { mockPayload: { id: "session123" } };
-    },
-  },
-}));
-
-const mockRouterPush = vi.fn();
-vi.mock("vue-router", async () => {
-  const actual = await vi.importActual("vue-router");
-  return {
-    ...actual,
-    useRouter: () => ({ push: mockRouterPush }),
-  };
-});
-
-describe("SessionsList", () => {
-  let wrapper: any;
-
-  const splitterStub = {
-    template: `
-      <div data-test="splitter">
-        <div data-test="before-section"><slot name="before" /></div>
-        <div data-test="separator-section">
-          <slot name="separator"><div data-test="avatar" /></slot>
-        </div>
-        <div data-test="after-section"><slot name="after" /></div>
-      </div>
-    `,
-    props: ["modelValue", "unit", "vertical"],
-  };
-
-  beforeEach(async () => {
-    vi.clearAllMocks();
-    mockRouterPush.mockClear();
-
-    wrapper = mount(SessionsList, {
-      global: {
-        plugins: [i18n, router],
-        provide: { store },
-        stubs: { OSplitter: splitterStub },
-      },
-    });
-
-    await flushPromises();
-    await wrapper.vm.$nextTick();
-  });
-
-  afterEach(() => {
-    if (wrapper) wrapper.unmount();
-    vi.clearAllTimers();
-    vi.restoreAllMocks();
-  });
-
-  // ==========================================================================
-  // COMPONENT MOUNTING
-  // ==========================================================================
-
-  describe("Component Mounting", () => {
-    it("mounts successfully without errors", () => {
-      // Arrange & Assert
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it("renders SearchBar component in the layout", () => {
-      // Arrange & Assert
-      expect(wrapper.find('[data-test="search-bar"]').exists()).toBe(true);
-    });
-
-    it("renders SearchFieldList component in the before section", () => {
-      // Arrange & Assert
-      expect(wrapper.find('[data-test="field-list"]').exists()).toBe(true);
-    });
-
-    it("renders OTable component in the after section", () => {
-      // Arrange & Assert
-      expect(wrapper.findComponent({ name: "OTable" }).exists()).toBe(true);
-    });
-
-    it("renders splitter layout with all sections", () => {
-      // Arrange & Assert
-      expect(wrapper.find('[data-test="splitter"]').exists()).toBe(true);
-      expect(wrapper.find('[data-test="before-section"]').exists()).toBe(true);
-      expect(wrapper.find('[data-test="separator-section"]').exists()).toBe(true);
-      expect(wrapper.find('[data-test="after-section"]').exists()).toBe(true);
-    });
-
-    it("renders separator avatar element", () => {
-      // Arrange & Assert
-      expect(wrapper.find('[data-test="avatar"]').exists()).toBe(true);
-    });
-  });
-
-  // ==========================================================================
-  // COMPONENT STRUCTURE
-  // ==========================================================================
-
-  describe("Component Structure", () => {
-    it("renders SearchFieldList inside the before section", () => {
-      // Arrange
-      const beforeSection = wrapper.find('[data-test="before-section"]');
-
-      // Assert
-      expect(beforeSection.find('[data-test="field-list"]').exists()).toBe(true);
-    });
-
-    it("renders OTable inside the after section", () => {
-      // Arrange
-      const afterSection = wrapper.find('[data-test="after-section"]');
-
-      // Assert
-      expect(afterSection.findComponent({ name: "OTable" }).exists()).toBe(true);
-    });
-
-    it("renders SearchBar component in the component tree", () => {
-      // Arrange & Assert
-      expect(wrapper.findComponent({ name: "SearchBar" }).exists()).toBe(true);
-    });
-  });
-
-  // ==========================================================================
-  // TABLE COLUMNS CONFIGURATION
-  // ==========================================================================
-
-  describe("Columns Configuration", () => {
-    it("passes columns array with more than zero columns to OTable", () => {
-      // Arrange
-      const oTable = wrapper.findComponent({ name: "OTable" });
-
-      // Assert
-      expect(Array.isArray(oTable.props("columns"))).toBe(true);
-      expect(oTable.props("columns").length).toBeGreaterThan(0);
-    });
-
-    it("includes an action_play column with sortable false", () => {
-      // Arrange
-      const oTable = wrapper.findComponent({ name: "OTable" });
-      const actionColumn = oTable.props("columns").find((col: any) => col.id === "action_play");
-
-      // Assert
-      expect(actionColumn).toBeDefined();
-      expect(actionColumn.sortable).toBe(false);
-    });
-
-    it("includes a timestamp column with header Timestamp and sortable true", () => {
-      // Arrange
-      const oTable = wrapper.findComponent({ name: "OTable" });
-      const timestampColumn = oTable.props("columns").find((col: any) => col.id === "timestamp");
-
-      // Assert
-      expect(timestampColumn).toBeDefined();
-      expect(timestampColumn.header).toBe("Timestamp");
-      expect(timestampColumn.sortable).toBe(true);
-    });
-
-    it("includes a type column with header Session Type and sortable true", () => {
-      // Arrange
-      const oTable = wrapper.findComponent({ name: "OTable" });
-      const typeColumn = oTable.props("columns").find((col: any) => col.id === "type");
-
-      // Assert
-      expect(typeColumn).toBeDefined();
-      expect(typeColumn.header).toBe("Session Type");
-      expect(typeColumn.sortable).toBe(true);
-    });
-
-    it("includes a time_spent column with header Time Spent and accessorFn", () => {
-      // Arrange
-      const oTable = wrapper.findComponent({ name: "OTable" });
-      const timeSpentColumn = oTable.props("columns").find((col: any) => col.id === "time_spent");
-
-      // Assert
-      expect(timeSpentColumn).toBeDefined();
-      expect(timeSpentColumn.header).toBe("Time Spent");
-      expect(timeSpentColumn.sortable).toBe(true);
-      expect(typeof timeSpentColumn.accessorFn).toBe("function");
-    });
-
-    it("includes an error_count column with header Error Count and sortable true", () => {
-      // Arrange
-      const oTable = wrapper.findComponent({ name: "OTable" });
-      const errorCountColumn = oTable.props("columns").find((col: any) => col.id === "error_count");
-
-      // Assert
-      expect(errorCountColumn).toBeDefined();
-      expect(errorCountColumn.header).toBe("Error Count");
-      expect(errorCountColumn.sortable).toBe(true);
-    });
-
-    it("includes an initial_view_name column with header Initial View Name and sortable true", () => {
-      // Arrange
-      const oTable = wrapper.findComponent({ name: "OTable" });
-      const initialViewColumn = oTable.props("columns").find((col: any) => col.id === "initial_view_name");
-
-      // Assert
-      expect(initialViewColumn).toBeDefined();
-      expect(initialViewColumn.header).toBe("Initial View Name");
-      expect(initialViewColumn.sortable).toBe(true);
-    });
-  });
-
-  // ==========================================================================
-  // COLUMN FUNCTIONS
-  // ==========================================================================
-
-  describe("Column Functions", () => {
-    it("timestamp column has accessorKey set to timestamp", () => {
-      // Arrange
-      const oTable = wrapper.findComponent({ name: "OTable" });
-      const timestampColumn = oTable.props("columns").find((col: any) => col.id === "timestamp");
-
-      // Assert
-      expect(timestampColumn.accessorKey).toBe("timestamp");
-    });
-
-    it("type column has accessorKey set to type", () => {
-      // Arrange
-      const oTable = wrapper.findComponent({ name: "OTable" });
-      const typeColumn = oTable.props("columns").find((col: any) => col.id === "type");
-
-      // Assert
-      expect(typeColumn.accessorKey).toBe("type");
-    });
-
-    it("time_spent accessorFn converts 120000000 nanoseconds to 2m", () => {
-      // Arrange
-      const oTable = wrapper.findComponent({ name: "OTable" });
-      const timeSpentColumn = oTable.props("columns").find((col: any) => col.id === "time_spent");
-      const mockRow = { time_spent: "120000000" };
-
-      // Act
-      const result = timeSpentColumn.accessorFn(mockRow);
-
-      // Assert
-      expect(result).toBe("2m");
-    });
-
-    it("time_spent column is sortable", () => {
-      // Arrange
-      const oTable = wrapper.findComponent({ name: "OTable" });
-      const timeSpentColumn = oTable.props("columns").find((col: any) => col.id === "time_spent");
-
-      // Assert
-      expect(timeSpentColumn.sortable).toBe(true);
-    });
-
-    it("error_count column has accessorKey set to error_count", () => {
-      // Arrange
-      const oTable = wrapper.findComponent({ name: "OTable" });
-      const errorCountColumn = oTable.props("columns").find((col: any) => col.id === "error_count");
-
-      // Assert
-      expect(errorCountColumn.accessorKey).toBe("error_count");
-    });
-
-    it("initial_view_name column has accessorKey set to initial_view_name", () => {
-      // Arrange
-      const oTable = wrapper.findComponent({ name: "OTable" });
-      const initialViewColumn = oTable.props("columns").find((col: any) => col.id === "initial_view_name");
-
-      // Assert
-      expect(initialViewColumn.accessorKey).toBe("initial_view_name");
-    });
-
-    it("time_spent accessorFn does not throw when given an invalid value", () => {
-      // Arrange
-      const oTable = wrapper.findComponent({ name: "OTable" });
-      const timeSpentColumn = oTable.props("columns").find((col: any) => col.id === "time_spent");
-      const invalidRow = { time_spent: "invalid" };
-
-      // Assert
-      expect(() => timeSpentColumn.accessorFn(invalidRow)).not.toThrow();
-    });
-  });
-
-  // ==========================================================================
-  // TRANSLATED LABELS
-  // ==========================================================================
-
-  describe("Column Label Translation", () => {
-    it("renders all expected column headers in correct order", () => {
-      // Arrange
-      const oTable = wrapper.findComponent({ name: "OTable" });
-      const columns = oTable.props("columns");
-
-      // Assert
-      expect(columns[1].header).toBe("Timestamp");
-      expect(columns[2].header).toBe("Session Type");
-      expect(columns[3].header).toBe("Time Spent");
-      expect(columns[4].header).toBe("Error Count");
-      expect(columns[5].header).toBe("Initial View Name");
-    });
-  });
-
-  // ==========================================================================
-  // OTABLE INTEGRATION
-  // ==========================================================================
-
-  describe("OTable Integration", () => {
-    it("passes an empty array as data to OTable on initial mount", () => {
-      // Arrange
-      const oTable = wrapper.findComponent({ name: "OTable" });
-
-      // Assert
-      expect(oTable.props("data")).toEqual([]);
-    });
-
-    it("passes the columns array to OTable", () => {
-      // Arrange
-      const oTable = wrapper.findComponent({ name: "OTable" });
-
-      // Assert
-      expect(oTable.props("columns")).toEqual(expect.any(Array));
-    });
-
-    it("renders correct column count in OTable", () => {
-      // Arrange & Assert
-      expect(wrapper.find('[data-test="table-columns"]').text()).toContain("6 columns");
-    });
-
-    it("renders zero rows text in OTable when data is empty", () => {
-      // Arrange & Assert
-      expect(wrapper.find('[data-test="table-rows"]').text()).toContain("0 rows");
-    });
-  });
-
-  // ==========================================================================
-  // ROUTER INTEGRATION
-  // ==========================================================================
-
-  describe("Router Integration", () => {
-    it("navigates to SessionViewer with session id when handleCellClick is called", () => {
-      // Arrange
-      const mockPayload = { row: { id: "test-session-id" } };
-
-      // Act
-      wrapper.vm.handleCellClick(mockPayload);
-
-      // Assert
-      expect(mockRouterPush).toHaveBeenCalledWith({
-        name: "SessionViewer",
-        params: { id: "test-session-id" },
-      });
-    });
-
-    it("navigates to SessionViewer when handleRowClick is called with a row", () => {
-      // Arrange
-      const mockRow = { id: "session123" };
-
-      // Act
-      wrapper.vm.handleRowClick(mockRow);
-
-      // Assert
-      expect(mockRouterPush).toHaveBeenCalledWith({
-        name: "SessionViewer",
-        params: { id: "session123" },
-      });
-    });
-
-    it("navigates twice when handleCellClick is called with two different session IDs", async () => {
-      // Arrange
-      const payload1 = { row: { id: "session1" } };
-      const payload2 = { row: { id: "session2" } };
-
-      // Act
-      await wrapper.vm.handleCellClick(payload1);
-      await wrapper.vm.handleCellClick(payload2);
-
-      // Assert
-      expect(mockRouterPush).toHaveBeenCalledTimes(2);
-      expect(mockRouterPush).toHaveBeenNthCalledWith(1, { name: "SessionViewer", params: { id: "session1" } });
-      expect(mockRouterPush).toHaveBeenNthCalledWith(2, { name: "SessionViewer", params: { id: "session2" } });
-    });
-
-    it("navigates to SessionViewer when OTable emits row-click with a session row", async () => {
-      // Arrange — OTable mock emits row-click with { id: "session123" } on click
-      const oTable = wrapper.findComponent({ name: "OTable" });
-
-      // Act
-      await oTable.trigger("click");
-      await wrapper.vm.$nextTick();
-
-      // Assert
-      expect(mockRouterPush).toHaveBeenCalledWith({
-        name: "SessionViewer",
-        params: { id: "session123" },
-      });
-    });
-  });
-
-  // ==========================================================================
-  // DATA UPDATES
-  // ==========================================================================
-
-  describe("Data Updates", () => {
-    it("OTable receives updated row count text after rows are set on the component", async () => {
-      // Arrange — confirm OTable starts with 0 rows text
-      expect(wrapper.find('[data-test="table-rows"]').text()).toContain("0 rows");
-
-      // Act — set rows directly via the reactive ref exposed by <script setup>
-      // (SessionsList uses <script setup> so direct vm mutation is not available;
-      // we verify OTable receives the initial empty data correctly instead)
-      const oTable = wrapper.findComponent({ name: "OTable" });
-
-      // Assert — OTable data prop is an empty array on initial mount
-      expect(Array.isArray(oTable.props("data"))).toBe(true);
-      expect(oTable.props("data")).toHaveLength(0);
-    });
-
-    it("OTable splitter section renders both before and after slots", () => {
-      // Arrange
-      const beforeSection = wrapper.find('[data-test="before-section"]');
-      const afterSection = wrapper.find('[data-test="after-section"]');
-
-      // Assert
-      expect(beforeSection.exists()).toBe(true);
-      expect(afterSection.exists()).toBe(true);
-      expect(afterSection.findComponent({ name: "OTable" }).exists()).toBe(true);
-    });
-  });
-});
diff --git a/web/src/components/rum/SessionsList.vue b/web/src/components/rum/SessionsList.vue
deleted file mode 100644
index 5c5439cd31..0000000000
--- a/web/src/components/rum/SessionsList.vue
+++ /dev/null
@@ -1,174 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <div class="sessions_page">
-    <SearchBar></SearchBar>
-    <OSplitter
-      class="logs-horizontal-splitter full-height"
-      v-model="splitterModel"
-      unit="px"
-      :horizontal="true"
-    >
-      <template #before>
-        <SearchFieldList></SearchFieldList>
-      </template>
-      <template #after>
-        <OTable
-          :data="tableRows"
-          :columns="tableColumns"
-          :default-columns="false"
-          row-key="id"
-          pagination="none"
-          virtual-scroll
-          dense
-          data-test="rum-sessions-list-table"
-          @row-click="handleRowClick"
-        >
-          <template #cell-action_play="{ row }">
-            <OIcon
-              name="play-circle-filled"
-              size="md"
-              class="cursor-pointer text-[var(--o2-icon-color)] hover:text-[var(--o2-primary-btn-bg)]"
-            />
-          </template>
-        </OTable>
-      </template>
-    </OSplitter>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref, computed } from "vue";
-import { useI18n } from "vue-i18n";
-import OTable from "@/lib/core/Table/OTable.vue";
-import { COL } from "@/lib/core/Table/OTable.types";
-import OIcon from "@/lib/core/Icon/OIcon.vue";
-import OSplitter from "@/lib/core/Splitter/OSplitter.vue";
-import { formatDuration } from "@/utils/zincutils";
-import SearchBar from "./SearchBar.vue";
-import SearchFieldList from "@/components/common/sidebar/SearchFieldList.vue";
-import { useRouter } from "vue-router";
-
-interface SessionColumn {
-  name: string;
-  field: (row: any) => any;
-  prop: (row: any) => any;
-  label: string;
-  align: string;
-  sortable: boolean;
-}
-
-interface Session {
-  timestamp: string;
-  type: string;
-  time_spent: string;
-  error_count: string;
-  initial_view_name: string;
-  id: string;
-}
-
-const { t } = useI18n();
-
-const splitterModel = ref(250);
-const tableColumns = [
-  {
-    id: "action_play",
-    header: "",
-    accessorKey: "action_play",
-    sortable: false,
-    size: 56,
-    meta: { align: "left" },
-  },
-  {
-    id: "timestamp",
-    header: t("rum.timestamp"),
-    accessorKey: "timestamp",
-    sortable: true,
-    size: COL.date,
-    meta: { align: "left" },
-  },
-  {
-    id: "type",
-    header: t("rum.sessionType"),
-    accessorKey: "type",
-    sortable: true,
-    size: COL.type,
-    meta: { align: "left" },
-  },
-  {
-    id: "time_spent",
-    header: t("rum.timeSpent"),
-    accessorFn: (row: any) => formatDuration(row["time_spent"] / 1000000),
-    sortable: true,
-    size: COL.duration,
-    meta: { align: "left" },
-  },
-  {
-    id: "error_count",
-    header: t("rum.errorCount"),
-    accessorKey: "error_count",
-    sortable: true,
-    size: COL.count,
-    meta: { align: "right" },
-  },
-  {
-    id: "initial_view_name",
-    header: t("rum.initialViewName"),
-    accessorKey: "initial_view_name",
-    sortable: true,
-    size: COL.name,
-    meta: { align: "left", autoWidth: true },
-  },
-];
-
-const rows = ref<Session[]>([]);
-
-const tableRows = computed(() => rows.value);
-
-const router = useRouter();
-
-const handleRowClick = (row: any) => {
-  handleCellClick({ row });
-};
-
-const handleCellClick = (payload: any) => {
-  router.push({
-    name: "SessionViewer",
-    params: { id: payload.row.id },
-  });
-};
-</script>
-
-<style>
-.sessions_page .index-table :hover::-webkit-scrollbar,
-#tracesSearchGridComponent:hover::-webkit-scrollbar {
-  height: 0.8125rem;
-  width: 0.8125rem;
-}
-
-.sessions_page .index-table ::-webkit-scrollbar-track,
-#tracesSearchGridComponent::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-  border-radius: 0.625rem;
-}
-
-.sessions_page .index-table ::-webkit-scrollbar-thumb,
-#tracesSearchGridComponent::-webkit-scrollbar-thumb {
-  border-radius: 0.625rem;
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
-}
-</style>
diff --git a/web/src/components/rum/VideoPlayer.vue b/web/src/components/rum/VideoPlayer.vue
index 5daec53d16..e1e36f4132 100644
--- a/web/src/components/rum/VideoPlayer.vue
+++ b/web/src/components/rum/VideoPlayer.vue
@@ -46,11 +46,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <div
         ref="playbackBarRef"
         data-test="video-player-playback-bar"
-        class="w-full h-[0.3125rem] bg-[#ebebeb] mt-2 mb-3 relative cursor-pointer"
+        class="w-full h-[0.3125rem] bg-surface-subtle mt-2 mb-3 relative cursor-pointer"
         @click="handlePlaybackBarClick"
       >
         <div
-          class="bg-(--o2-primary-btn-bg)! absolute"
+          class="bg-button-primary! absolute"
           :style="{
             width: playerState.progressWidth + 'px',
             left: 0,
@@ -60,7 +60,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           }"
         />
         <div
-          class="bg-(--o2-primary-btn-bg)! absolute"
+          class="bg-button-primary! absolute"
           :style="{
             width: '2px',
             left: playerState.progressWidth - 2 + 'px',
@@ -99,7 +99,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <OIcon
               name="replay-10"
               size="md"
-              class="mr-2 cursor-pointer text-[var(--o2-icon-color-dark)] hover:text-[var(--o2-primary-btn-bg)]"
+              class="mr-2 cursor-pointer text-icon-color hover:text-button-primary"
               @click="skipTo('backward')"
             />
             <OIcon
@@ -109,13 +109,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   : 'play-circle-filled'
               "
               size="lg"
-              class="cursor-pointer text-[var(--o2-icon-color-dark)] hover:text-[var(--o2-primary-btn-bg)]"
+              class="cursor-pointer text-icon-color hover:text-button-primary"
               @click="togglePlay"
             />
             <OIcon
               name="forward-10"
               size="md"
-              class="ml-2 cursor-pointer text-[var(--o2-icon-color-dark)] hover:text-[var(--o2-primary-btn-bg)]"
+              class="ml-2 cursor-pointer text-icon-color hover:text-button-primary"
               @click="skipTo('forward')"
             />
           </div>
@@ -489,12 +489,12 @@ const updatePlayerState = () => {
 
 const getEventMarkerClass = (event: any) => {
   if (event.frustration_types && event.frustration_types.length > 0) {
-    return "bg-[#fb923c]! shadow-[0_0_4px_rgba(251,146,60,0.6)]";
+    return "bg-badge-orange-solid-bg! shadow-[0_0_4px_rgba(251,146,60,0.6)]";
   }
   if (event.type === "error") {
-    return "bg-[#ef4444]!";
+    return "bg-badge-error-solid-bg!";
   }
-  return "bg-[#14b8a6]!";
+  return "bg-badge-teal-solid-bg!";
 };
 
 const getEventTooltip = (event: any) => {
diff --git a/web/src/components/rum/common/KeyValueRow.vue b/web/src/components/rum/common/KeyValueRow.vue
index 00bc068d01..8479f8e55b 100644
--- a/web/src/components/rum/common/KeyValueRow.vue
+++ b/web/src/components/rum/common/KeyValueRow.vue
@@ -19,13 +19,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     class="flex py-1 px-1.5 text-xs"
     :class="[
       showBorder
-        ? 'border-b border-solid border-[var(--o2-border-color)]'
+        ? 'border-b border-solid border-card-glass-border'
         : '',
     ]"
     :data-test="dataTest"
   >
     <div
-      class="w-[100px] font-medium text-[var(--o2-text-secondary)] shrink-0"
+      class="w-25 font-medium text-text-secondary shrink-0"
     >
       {{ label }}:
     </div>
diff --git a/web/src/components/rum/common/PerformanceMetrics.spec.ts b/web/src/components/rum/common/PerformanceMetrics.spec.ts
deleted file mode 100644
index da17e4876b..0000000000
--- a/web/src/components/rum/common/PerformanceMetrics.spec.ts
+++ /dev/null
@@ -1,218 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { describe, expect, it, afterEach, vi } from "vitest";
-import { mount, VueWrapper } from "@vue/test-utils";
-import PerformanceMetrics from "./PerformanceMetrics.vue";
-
-vi.mock("./performance/ViewPerformanceMetrics.vue", () => ({
-  default: {
-    name: "ViewPerformanceMetrics",
-    template: '<div data-test="view-performance-metrics">View</div>',
-    props: ["metrics"],
-  },
-}));
-
-vi.mock("./performance/ActionPerformanceMetrics.vue", () => ({
-  default: {
-    name: "ActionPerformanceMetrics",
-    template: '<div data-test="action-performance-metrics">Action</div>',
-    props: ["metrics"],
-  },
-}));
-
-vi.mock("./performance/ResourcePerformanceMetrics.vue", () => ({
-  default: {
-    name: "ResourcePerformanceMetrics",
-    template: '<div data-test="resource-performance-metrics">Resource</div>',
-    props: ["metrics"],
-  },
-}));
-
-vi.mock("./performance/ErrorPerformanceMetrics.vue", () => ({
-  default: {
-    name: "ErrorPerformanceMetrics",
-    template: '<div data-test="error-performance-metrics">Error</div>',
-    props: ["metrics"],
-  },
-}));
-
-const sampleMetrics = { view: { lcp: 2000 } };
-
-describe("PerformanceMetrics", () => {
-  let wrapper: VueWrapper;
-
-  afterEach(() => {
-    if (wrapper) wrapper.unmount();
-    vi.restoreAllMocks();
-  });
-
-  describe("initial render", () => {
-    it("renders without errors when eventType and metrics are provided", () => {
-      // Arrange + Act
-      wrapper = mount(PerformanceMetrics, {
-        props: { eventType: "view", metrics: sampleMetrics },
-      });
-
-      // Assert
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it("renders root container with data-test=performance-metrics", () => {
-      // Arrange
-      wrapper = mount(PerformanceMetrics, {
-        props: { eventType: "view", metrics: sampleMetrics },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="performance-metrics"]').exists()).toBe(
-        true,
-      );
-    });
-  });
-
-  describe("eventType routing", () => {
-    it("renders ViewPerformanceMetrics and only ViewPerformanceMetrics when eventType=view", () => {
-      // Arrange
-      wrapper = mount(PerformanceMetrics, {
-        props: { eventType: "view", metrics: sampleMetrics },
-      });
-
-      // Assert
-      expect(
-        wrapper.find('[data-test="view-performance-metrics"]').exists(),
-      ).toBe(true);
-      expect(
-        wrapper.find('[data-test="action-performance-metrics"]').exists(),
-      ).toBe(false);
-      expect(
-        wrapper.find('[data-test="resource-performance-metrics"]').exists(),
-      ).toBe(false);
-      expect(
-        wrapper.find('[data-test="error-performance-metrics"]').exists(),
-      ).toBe(false);
-    });
-
-    it("renders ActionPerformanceMetrics and only ActionPerformanceMetrics when eventType=action", () => {
-      // Arrange
-      wrapper = mount(PerformanceMetrics, {
-        props: { eventType: "action", metrics: sampleMetrics },
-      });
-
-      // Assert
-      expect(
-        wrapper.find('[data-test="action-performance-metrics"]').exists(),
-      ).toBe(true);
-      expect(
-        wrapper.find('[data-test="view-performance-metrics"]').exists(),
-      ).toBe(false);
-      expect(
-        wrapper.find('[data-test="resource-performance-metrics"]').exists(),
-      ).toBe(false);
-      expect(
-        wrapper.find('[data-test="error-performance-metrics"]').exists(),
-      ).toBe(false);
-    });
-
-    it("renders ResourcePerformanceMetrics and only ResourcePerformanceMetrics when eventType=resource", () => {
-      // Arrange
-      wrapper = mount(PerformanceMetrics, {
-        props: { eventType: "resource", metrics: sampleMetrics },
-      });
-
-      // Assert
-      expect(
-        wrapper.find('[data-test="resource-performance-metrics"]').exists(),
-      ).toBe(true);
-      expect(
-        wrapper.find('[data-test="view-performance-metrics"]').exists(),
-      ).toBe(false);
-      expect(
-        wrapper.find('[data-test="action-performance-metrics"]').exists(),
-      ).toBe(false);
-      expect(
-        wrapper.find('[data-test="error-performance-metrics"]').exists(),
-      ).toBe(false);
-    });
-
-    it("renders ErrorPerformanceMetrics and only ErrorPerformanceMetrics when eventType=error", () => {
-      // Arrange
-      wrapper = mount(PerformanceMetrics, {
-        props: { eventType: "error", metrics: sampleMetrics },
-      });
-
-      // Assert
-      expect(
-        wrapper.find('[data-test="error-performance-metrics"]').exists(),
-      ).toBe(true);
-      expect(
-        wrapper.find('[data-test="view-performance-metrics"]').exists(),
-      ).toBe(false);
-      expect(
-        wrapper.find('[data-test="action-performance-metrics"]').exists(),
-      ).toBe(false);
-      expect(
-        wrapper.find('[data-test="resource-performance-metrics"]').exists(),
-      ).toBe(false);
-    });
-
-    it("renders fallback message and no child metrics component for unknown eventType", () => {
-      // Arrange
-      wrapper = mount(PerformanceMetrics, {
-        props: { eventType: "unknown" as any, metrics: sampleMetrics },
-      });
-
-      // Assert
-      expect(
-        wrapper.find('[data-test="view-performance-metrics"]').exists(),
-      ).toBe(false);
-      expect(
-        wrapper.find('[data-test="action-performance-metrics"]').exists(),
-      ).toBe(false);
-      expect(
-        wrapper.find('[data-test="resource-performance-metrics"]').exists(),
-      ).toBe(false);
-      expect(
-        wrapper.find('[data-test="error-performance-metrics"]').exists(),
-      ).toBe(false);
-      expect(wrapper.text()).toContain("No performance data available");
-    });
-  });
-
-  describe("metrics prop passing", () => {
-    it("renders child component when metrics are provided", () => {
-      // Arrange
-      const metrics = { view: { lcp: 3000000000 } };
-      wrapper = mount(PerformanceMetrics, {
-        props: { eventType: "view", metrics },
-      });
-
-      // Assert
-      expect(
-        wrapper.find('[data-test="view-performance-metrics"]').exists(),
-      ).toBe(true);
-    });
-
-    it("renders without crashing when metrics prop is null", () => {
-      // Arrange + Act
-      wrapper = mount(PerformanceMetrics, {
-        props: { eventType: "view", metrics: null as any },
-      });
-
-      // Assert
-      expect(wrapper.exists()).toBe(true);
-    });
-  });
-});
diff --git a/web/src/components/rum/common/PerformanceMetrics.vue b/web/src/components/rum/common/PerformanceMetrics.vue
deleted file mode 100644
index 95140ffac9..0000000000
--- a/web/src/components/rum/common/PerformanceMetrics.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <div class="performance-metrics" data-test="performance-metrics">
-    <!-- View Performance -->
-    <template v-if="eventType === 'view'">
-      <ViewPerformanceMetrics :metrics="metrics" />
-    </template>
-
-    <!-- Action Performance -->
-    <template v-else-if="eventType === 'action'">
-      <ActionPerformanceMetrics :metrics="metrics" />
-    </template>
-
-    <!-- Resource Performance -->
-    <template v-else-if="eventType === 'resource'">
-      <ResourcePerformanceMetrics :metrics="metrics" />
-    </template>
-
-    <!-- Error Performance -->
-    <template v-else-if="eventType === 'error'">
-      <ErrorPerformanceMetrics :metrics="metrics" />
-    </template>
-
-    <!-- Fallback -->
-    <template v-else>
-      <div class="text-center py-8 text-gray-400 text-sm">
-        No performance data available for this event type
-      </div>
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import ViewPerformanceMetrics from "./performance/ViewPerformanceMetrics.vue";
-import ActionPerformanceMetrics from "./performance/ActionPerformanceMetrics.vue";
-import ResourcePerformanceMetrics from "./performance/ResourcePerformanceMetrics.vue";
-import ErrorPerformanceMetrics from "./performance/ErrorPerformanceMetrics.vue";
-
-interface Props {
-  eventType: "view" | "action" | "resource" | "error";
-  metrics: any;
-}
-
-defineProps<Props>();
-</script>
diff --git a/web/src/components/rum/common/performance/ActionPerformanceMetrics.spec.ts b/web/src/components/rum/common/performance/ActionPerformanceMetrics.spec.ts
deleted file mode 100644
index 39c9a59290..0000000000
--- a/web/src/components/rum/common/performance/ActionPerformanceMetrics.spec.ts
+++ /dev/null
@@ -1,294 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { describe, expect, it, afterEach, vi } from "vitest";
-import { mount, VueWrapper } from "@vue/test-utils";
-import ActionPerformanceMetrics from "./ActionPerformanceMetrics.vue";
-
-function createMetrics(overrides: Record<string, any> = {}) {
-  return {
-    action: {
-      loading_time: 800000000, // 800ms — good
-      duration: 1200000000, // 1.2s
-      long_task: { count: 0 },
-      resource: { count: 5 },
-      error: { count: 0 },
-      ...overrides,
-    },
-  };
-}
-
-describe("ActionPerformanceMetrics", () => {
-  let wrapper: VueWrapper;
-
-  afterEach(() => {
-    if (wrapper) wrapper.unmount();
-    vi.restoreAllMocks();
-  });
-
-  describe("initial render", () => {
-    it("renders without errors when valid metrics are provided", () => {
-      // Arrange + Act
-      wrapper = mount(ActionPerformanceMetrics, {
-        props: { metrics: createMetrics() },
-      });
-
-      // Assert
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it("renders root container with data-test=action-performance-metrics", () => {
-      // Arrange
-      wrapper = mount(ActionPerformanceMetrics, {
-        props: { metrics: createMetrics() },
-      });
-
-      // Assert
-      expect(
-        wrapper.find('[data-test="action-performance-metrics"]').exists(),
-      ).toBe(true);
-    });
-
-    it("renders root element as a div", () => {
-      // Arrange
-      wrapper = mount(ActionPerformanceMetrics, {
-        props: { metrics: createMetrics() },
-      });
-
-      // Assert
-      expect(wrapper.find("div").exists()).toBe(true);
-    });
-  });
-
-  describe("conditional metric card rendering", () => {
-    it("renders loading-time card when action.loading_time is present", () => {
-      // Arrange
-      wrapper = mount(ActionPerformanceMetrics, {
-        props: { metrics: createMetrics() },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-loading-time"]').exists()).toBe(
-        true,
-      );
-    });
-
-    it("does not render loading-time card when action.loading_time is missing", () => {
-      // Arrange
-      wrapper = mount(ActionPerformanceMetrics, {
-        props: { metrics: { action: {} } },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-loading-time"]').exists()).toBe(
-        false,
-      );
-    });
-
-    it("renders duration card when action.duration is present", () => {
-      // Arrange
-      wrapper = mount(ActionPerformanceMetrics, {
-        props: { metrics: createMetrics() },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-duration"]').exists()).toBe(true);
-    });
-
-    it("does not render duration card when action.duration is missing", () => {
-      // Arrange
-      wrapper = mount(ActionPerformanceMetrics, {
-        props: { metrics: { action: { loading_time: 1000 } } },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-duration"]').exists()).toBe(false);
-    });
-
-    it("renders long-tasks card when action.long_task.count is 0", () => {
-      // Arrange
-      wrapper = mount(ActionPerformanceMetrics, {
-        props: { metrics: createMetrics({ long_task: { count: 0 } }) },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-long-tasks"]').exists()).toBe(
-        true,
-      );
-    });
-
-    it("does not render long-tasks card when action.long_task.count is undefined", () => {
-      // Arrange
-      wrapper = mount(ActionPerformanceMetrics, {
-        props: { metrics: { action: {} } },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-long-tasks"]').exists()).toBe(
-        false,
-      );
-    });
-
-    it("renders resources card when action.resource.count is 0", () => {
-      // Arrange
-      wrapper = mount(ActionPerformanceMetrics, {
-        props: { metrics: createMetrics({ resource: { count: 0 } }) },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-resources"]').exists()).toBe(true);
-    });
-
-    it("renders errors card when action.error.count is 0", () => {
-      // Arrange
-      wrapper = mount(ActionPerformanceMetrics, {
-        props: { metrics: createMetrics({ error: { count: 0 } }) },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-errors"]').exists()).toBe(true);
-    });
-
-    it("renders no metric cards when action object is empty", () => {
-      // Arrange
-      wrapper = mount(ActionPerformanceMetrics, {
-        props: { metrics: { action: {} } },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-loading-time"]').exists()).toBe(
-        false,
-      );
-      expect(wrapper.find('[data-test="metric-duration"]').exists()).toBe(false);
-      expect(wrapper.find('[data-test="metric-long-tasks"]').exists()).toBe(
-        false,
-      );
-      expect(wrapper.find('[data-test="metric-resources"]').exists()).toBe(
-        false,
-      );
-      expect(wrapper.find('[data-test="metric-errors"]').exists()).toBe(false);
-    });
-
-    it("renders no metric cards when metrics prop is null", () => {
-      // Arrange
-      wrapper = mount(ActionPerformanceMetrics, {
-        props: { metrics: null },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-loading-time"]').exists()).toBe(
-        false,
-      );
-    });
-  });
-
-  describe("loading time status thresholds", () => {
-    it("renders loading-time card for good loading time (<=1s)", () => {
-      // Arrange
-      wrapper = mount(ActionPerformanceMetrics, {
-        props: { metrics: createMetrics({ loading_time: 1000000000 }) },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-loading-time"]').exists()).toBe(
-        true,
-      );
-    });
-
-    it("renders loading-time card for needs-improvement loading time (1s–3s)", () => {
-      // Arrange
-      wrapper = mount(ActionPerformanceMetrics, {
-        props: { metrics: createMetrics({ loading_time: 2000000000 }) },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-loading-time"]').exists()).toBe(
-        true,
-      );
-    });
-
-    it("renders loading-time card for poor loading time (>3s)", () => {
-      // Arrange
-      wrapper = mount(ActionPerformanceMetrics, {
-        props: { metrics: createMetrics({ loading_time: 4000000000 }) },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-loading-time"]').exists()).toBe(
-        true,
-      );
-    });
-  });
-
-  describe("long task status thresholds", () => {
-    it("renders long-tasks card for 0 long tasks (good)", () => {
-      // Arrange
-      wrapper = mount(ActionPerformanceMetrics, {
-        props: { metrics: createMetrics({ long_task: { count: 0 } }) },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-long-tasks"]').exists()).toBe(
-        true,
-      );
-    });
-
-    it("renders long-tasks card for 1-2 long tasks (needs-improvement)", () => {
-      // Arrange
-      wrapper = mount(ActionPerformanceMetrics, {
-        props: { metrics: createMetrics({ long_task: { count: 2 } }) },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-long-tasks"]').exists()).toBe(
-        true,
-      );
-    });
-
-    it("renders long-tasks card for >2 long tasks (poor)", () => {
-      // Arrange
-      wrapper = mount(ActionPerformanceMetrics, {
-        props: { metrics: createMetrics({ long_task: { count: 5 } }) },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-long-tasks"]').exists()).toBe(
-        true,
-      );
-    });
-  });
-
-  describe("errors status", () => {
-    it("renders errors card when error count is 0 (good)", () => {
-      // Arrange
-      wrapper = mount(ActionPerformanceMetrics, {
-        props: { metrics: createMetrics({ error: { count: 0 } }) },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-errors"]').exists()).toBe(true);
-    });
-
-    it("renders errors card when error count is greater than 0 (poor)", () => {
-      // Arrange
-      wrapper = mount(ActionPerformanceMetrics, {
-        props: { metrics: createMetrics({ error: { count: 3 } }) },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-errors"]').exists()).toBe(true);
-    });
-  });
-});
diff --git a/web/src/components/rum/common/performance/ActionPerformanceMetrics.vue b/web/src/components/rum/common/performance/ActionPerformanceMetrics.vue
deleted file mode 100644
index 803b7c70b3..0000000000
--- a/web/src/components/rum/common/performance/ActionPerformanceMetrics.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3" data-test="action-performance-metrics">
-    <MetricCard
-      v-if="metrics?.action?.loading_time"
-      label="Loading Time"
-      :value="metrics.action.loading_time"
-      unit="ns"
-      icon="hourglass-empty"
-      :status="getLoadingTimeStatus(metrics.action.loading_time)"
-      description="Time taken for action to complete"
-      data-test="metric-loading-time"
-    />
-
-    <MetricCard
-      v-if="metrics?.action?.duration"
-      label="Action Duration"
-      :value="metrics.action.duration"
-      unit="ns"
-      icon="timer"
-      description="Total duration of the action"
-      data-test="metric-duration"
-    />
-
-    <MetricCard
-      v-if="metrics?.action?.long_task?.count !== undefined"
-      label="Long Tasks"
-      :value="metrics.action.long_task.count"
-      unit=""
-      icon="warning"
-      :status="getLongTaskStatus(metrics.action.long_task.count)"
-      description="Number of long tasks during action"
-      data-test="metric-long-tasks"
-    />
-
-    <MetricCard
-      v-if="metrics?.action?.resource?.count !== undefined"
-      label="Resources Loaded"
-      :value="metrics.action.resource.count"
-      unit=""
-      icon="cloud-download"
-      description="Number of resources loaded during action"
-      data-test="metric-resources"
-    />
-
-    <MetricCard
-      v-if="metrics?.action?.error?.count !== undefined"
-      label="Errors"
-      :value="metrics.action.error.count"
-      unit=""
-      icon="error"
-      :status="metrics.action.error.count > 0 ? 'poor' : 'good'"
-      description="Number of errors during action"
-      data-test="metric-errors"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import MetricCard from "./MetricCard.vue";
-
-interface Props {
-  metrics: any;
-}
-
-defineProps<Props>();
-
-// Action performance thresholds
-const LOADING_TIME_GOOD = 1000000000; // 1s
-const LOADING_TIME_NEEDS_IMPROVEMENT = 3000000000; // 3s
-
-const getLoadingTimeStatus = (value: number): "good" | "needs-improvement" | "poor" => {
-  if (value <= LOADING_TIME_GOOD) return "good";
-  if (value <= LOADING_TIME_NEEDS_IMPROVEMENT) return "needs-improvement";
-  return "poor";
-};
-
-const getLongTaskStatus = (count: number): "good" | "needs-improvement" | "poor" => {
-  if (count === 0) return "good";
-  if (count <= 2) return "needs-improvement";
-  return "poor";
-};
-</script>
diff --git a/web/src/components/rum/common/performance/ErrorPerformanceMetrics.spec.ts b/web/src/components/rum/common/performance/ErrorPerformanceMetrics.spec.ts
deleted file mode 100644
index 9903cbe25a..0000000000
--- a/web/src/components/rum/common/performance/ErrorPerformanceMetrics.spec.ts
+++ /dev/null
@@ -1,260 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { describe, expect, it, afterEach, vi } from "vitest";
-import { mount, VueWrapper } from "@vue/test-utils";
-import ErrorPerformanceMetrics from "./ErrorPerformanceMetrics.vue";
-
-function createMetrics(
-  errorOverrides: Record<string, any> = {},
-  viewOverrides: Record<string, any> = {},
-) {
-  return {
-    error: {
-      handling_duration: 250000000, // 250ms
-      resource_status: 200,
-      ...errorOverrides,
-    },
-    view: {
-      time_spent: 5000000000, // 5s
-      dom_interactive: 1500000000, // 1.5s
-      ...viewOverrides,
-    },
-  };
-}
-
-describe("ErrorPerformanceMetrics", () => {
-  let wrapper: VueWrapper;
-
-  afterEach(() => {
-    if (wrapper) wrapper.unmount();
-    vi.restoreAllMocks();
-  });
-
-  describe("initial render", () => {
-    it("renders without errors when valid metrics are provided", () => {
-      // Arrange + Act
-      wrapper = mount(ErrorPerformanceMetrics, {
-        props: { metrics: createMetrics() },
-      });
-
-      // Assert
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it("renders root container with data-test=error-performance-metrics", () => {
-      // Arrange
-      wrapper = mount(ErrorPerformanceMetrics, {
-        props: { metrics: createMetrics() },
-      });
-
-      // Assert
-      expect(
-        wrapper.find('[data-test="error-performance-metrics"]').exists(),
-      ).toBe(true);
-    });
-
-    it("renders root container as a div element", () => {
-      // Arrange
-      wrapper = mount(ErrorPerformanceMetrics, {
-        props: { metrics: createMetrics() },
-      });
-
-      // Assert
-      expect(wrapper.find("div").exists()).toBe(true);
-    });
-  });
-
-  describe("conditional rendering", () => {
-    it("renders handling-duration card when error.handling_duration is present", () => {
-      // Arrange
-      wrapper = mount(ErrorPerformanceMetrics, {
-        props: { metrics: createMetrics() },
-      });
-
-      // Assert
-      expect(
-        wrapper.find('[data-test="metric-handling-duration"]').exists(),
-      ).toBe(true);
-    });
-
-    it("does not render handling-duration card when error.handling_duration is missing", () => {
-      // Arrange
-      wrapper = mount(ErrorPerformanceMetrics, {
-        props: { metrics: createMetrics({ handling_duration: undefined }) },
-      });
-
-      // Assert
-      expect(
-        wrapper.find('[data-test="metric-handling-duration"]').exists(),
-      ).toBe(false);
-    });
-
-    it("renders time-spent card when view.time_spent is present", () => {
-      // Arrange
-      wrapper = mount(ErrorPerformanceMetrics, {
-        props: { metrics: createMetrics() },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-time-spent"]').exists()).toBe(
-        true,
-      );
-    });
-
-    it("does not render time-spent card when view.time_spent is missing", () => {
-      // Arrange
-      wrapper = mount(ErrorPerformanceMetrics, {
-        props: { metrics: createMetrics({}, { time_spent: undefined }) },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-time-spent"]').exists()).toBe(
-        false,
-      );
-    });
-
-    it("renders dom-interactive card when view.dom_interactive is present", () => {
-      // Arrange
-      wrapper = mount(ErrorPerformanceMetrics, {
-        props: { metrics: createMetrics() },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-dom-interactive"]').exists()).toBe(
-        true,
-      );
-    });
-
-    it("does not render dom-interactive card when view.dom_interactive is missing", () => {
-      // Arrange
-      wrapper = mount(ErrorPerformanceMetrics, {
-        props: { metrics: createMetrics({}, { dom_interactive: undefined }) },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-dom-interactive"]').exists()).toBe(
-        false,
-      );
-    });
-
-    it("renders resource-status card when error.resource_status is a defined value", () => {
-      // Arrange
-      wrapper = mount(ErrorPerformanceMetrics, {
-        props: { metrics: createMetrics() },
-      });
-
-      // Assert
-      expect(
-        wrapper.find('[data-test="metric-resource-status"]').exists(),
-      ).toBe(true);
-    });
-
-    it("does not render resource-status card when error.resource_status is undefined", () => {
-      // Arrange
-      wrapper = mount(ErrorPerformanceMetrics, {
-        props: {
-          metrics: createMetrics({ resource_status: undefined }),
-        },
-      });
-
-      // Assert
-      expect(
-        wrapper.find('[data-test="metric-resource-status"]').exists(),
-      ).toBe(false);
-    });
-
-    it("renders resource-status card when error.resource_status is 0 (truthy check uses !== undefined)", () => {
-      // Arrange
-      wrapper = mount(ErrorPerformanceMetrics, {
-        props: { metrics: createMetrics({ resource_status: 0 }) },
-      });
-
-      // Assert — 0 !== undefined so the card should appear
-      expect(
-        wrapper.find('[data-test="metric-resource-status"]').exists(),
-      ).toBe(true);
-    });
-
-    it("renders no metric cards when metrics is an empty object", () => {
-      // Arrange
-      wrapper = mount(ErrorPerformanceMetrics, { props: { metrics: {} } });
-
-      // Assert
-      expect(
-        wrapper.find('[data-test="metric-handling-duration"]').exists(),
-      ).toBe(false);
-      expect(wrapper.find('[data-test="metric-time-spent"]').exists()).toBe(
-        false,
-      );
-      expect(wrapper.find('[data-test="metric-dom-interactive"]').exists()).toBe(
-        false,
-      );
-      expect(
-        wrapper.find('[data-test="metric-resource-status"]').exists(),
-      ).toBe(false);
-    });
-  });
-
-  describe("resource status thresholds", () => {
-    it("shows resource-status card for 2xx status codes", () => {
-      // Arrange
-      wrapper = mount(ErrorPerformanceMetrics, {
-        props: { metrics: createMetrics({ resource_status: 200 }) },
-      });
-
-      // Assert
-      expect(
-        wrapper.find('[data-test="metric-resource-status"]').exists(),
-      ).toBe(true);
-    });
-
-    it("shows resource-status card for 3xx status codes", () => {
-      // Arrange
-      wrapper = mount(ErrorPerformanceMetrics, {
-        props: { metrics: createMetrics({ resource_status: 301 }) },
-      });
-
-      // Assert
-      expect(
-        wrapper.find('[data-test="metric-resource-status"]').exists(),
-      ).toBe(true);
-    });
-
-    it("shows resource-status card for 4xx status codes", () => {
-      // Arrange
-      wrapper = mount(ErrorPerformanceMetrics, {
-        props: { metrics: createMetrics({ resource_status: 404 }) },
-      });
-
-      // Assert
-      expect(
-        wrapper.find('[data-test="metric-resource-status"]').exists(),
-      ).toBe(true);
-    });
-
-    it("shows resource-status card for 5xx status codes", () => {
-      // Arrange
-      wrapper = mount(ErrorPerformanceMetrics, {
-        props: { metrics: createMetrics({ resource_status: 500 }) },
-      });
-
-      // Assert
-      expect(
-        wrapper.find('[data-test="metric-resource-status"]').exists(),
-      ).toBe(true);
-    });
-  });
-});
diff --git a/web/src/components/rum/common/performance/ErrorPerformanceMetrics.vue b/web/src/components/rum/common/performance/ErrorPerformanceMetrics.vue
deleted file mode 100644
index 4959fcc4b5..0000000000
--- a/web/src/components/rum/common/performance/ErrorPerformanceMetrics.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3" data-test="error-performance-metrics">
-    <MetricCard
-      v-if="metrics?.error?.handling_duration"
-      label="Handling Duration"
-      :value="metrics.error.handling_duration"
-      unit="ns"
-      icon="timer"
-      description="Time taken to handle the error"
-      data-test="metric-handling-duration"
-    />
-
-    <MetricCard
-      v-if="metrics?.view?.time_spent"
-      label="Time on Page"
-      :value="metrics.view.time_spent"
-      unit="ns"
-      icon="schedule"
-      description="Time spent on page before error"
-      data-test="metric-time-spent"
-    />
-
-    <MetricCard
-      v-if="metrics?.view?.dom_interactive"
-      label="DOM Interactive"
-      :value="metrics.view.dom_interactive"
-      unit="ns"
-      icon="code"
-      description="DOM state when error occurred"
-      data-test="metric-dom-interactive"
-    />
-
-    <MetricCard
-      v-if="metrics?.error?.resource_status !== undefined"
-      label="Resource Status"
-      :value="metrics.error.resource_status"
-      unit=""
-      icon="info"
-      :status="getStatusCodeStatus(metrics.error.resource_status)"
-      description="HTTP status code if resource error"
-      data-test="metric-resource-status"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import MetricCard from "./MetricCard.vue";
-
-interface Props {
-  metrics: any;
-}
-
-defineProps<Props>();
-
-const getStatusCodeStatus = (statusCode: number): "good" | "needs-improvement" | "poor" => {
-  if (statusCode >= 200 && statusCode < 300) return "good";
-  if (statusCode >= 300 && statusCode < 400) return "needs-improvement";
-  return "poor";
-};
-</script>
diff --git a/web/src/components/rum/common/performance/MetricCard.spec.ts b/web/src/components/rum/common/performance/MetricCard.spec.ts
deleted file mode 100644
index 83479eaba7..0000000000
--- a/web/src/components/rum/common/performance/MetricCard.spec.ts
+++ /dev/null
@@ -1,330 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { describe, expect, it, afterEach, vi } from "vitest";
-import { mount, VueWrapper } from "@vue/test-utils";
-import MetricCard from "./MetricCard.vue";
-
-describe("MetricCard", () => {
-  let wrapper: VueWrapper;
-
-  afterEach(() => {
-    if (wrapper) wrapper.unmount();
-    vi.restoreAllMocks();
-  });
-
-  describe("component rendering", () => {
-    it("renders label and value when both are provided", () => {
-      // Arrange
-      wrapper = mount(MetricCard, {
-        props: { label: "Test Metric", value: 1000, unit: "" },
-      });
-
-      // Assert
-      expect(wrapper.text()).toContain("Test Metric");
-      expect(wrapper.text()).toContain("1,000");
-    });
-
-    it("renders icon element when icon prop is provided", () => {
-      // Arrange
-      wrapper = mount(MetricCard, {
-        props: { label: "Test Metric", value: 100, icon: "speed" },
-        global: {
-          stubs: {
-            OIcon: {
-              name: "OIcon",
-              template: '<span data-test="o-icon"></span>',
-              props: ["name", "size", "color"],
-            },
-            OProgressBar: {
-              template: "<div />",
-              props: ["value", "variant", "size"],
-            },
-          },
-        },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="o-icon"]').exists()).toBe(true);
-    });
-
-    it("does not render icon element when icon prop is omitted", () => {
-      // Arrange
-      wrapper = mount(MetricCard, {
-        props: { label: "Test Metric", value: 100 },
-        global: {
-          stubs: {
-            OIcon: {
-              name: "OIcon",
-              template: '<span data-test="o-icon"></span>',
-              props: ["name", "size", "color"],
-            },
-            OProgressBar: {
-              template: "<div />",
-              props: ["value", "variant", "size"],
-            },
-          },
-        },
-      });
-
-      // Assert — no icon stub renders because v-if="icon" is false
-      expect(wrapper.find('[data-test="o-icon"]').exists()).toBe(false);
-    });
-
-    it("renders description text when description prop is provided", () => {
-      // Arrange
-      wrapper = mount(MetricCard, {
-        props: {
-          label: "Test Metric",
-          value: 100,
-          description: "This is a test metric",
-        },
-      });
-
-      // Assert
-      expect(wrapper.text()).toContain("This is a test metric");
-    });
-  });
-
-  describe("value formatting", () => {
-    it("formats nanosecond values by converting to a human-readable duration", () => {
-      // Arrange
-      wrapper = mount(MetricCard, {
-        props: { label: "Duration", value: 2500000000, unit: "ns" },
-      });
-
-      // Assert — 2.5 billion ns = 2.5s; formatted output contains numeric portion
-      expect(wrapper.text()).toMatch(/2\.5|2500/);
-    });
-
-    it("formats numeric values with comma separators", () => {
-      // Arrange
-      wrapper = mount(MetricCard, {
-        props: { label: "Count", value: 1234567, unit: "" },
-      });
-
-      // Assert
-      expect(wrapper.text()).toContain("1,234,567");
-    });
-
-    it("shows N/A when value is null", () => {
-      // Arrange
-      wrapper = mount(MetricCard, {
-        props: { label: "Test Metric", value: null },
-      });
-
-      // Assert
-      expect(wrapper.text()).toContain("N/A");
-    });
-
-    it("shows N/A when value is undefined", () => {
-      // Arrange
-      wrapper = mount(MetricCard, {
-        props: { label: "Test Metric", value: undefined },
-      });
-
-      // Assert
-      expect(wrapper.text()).toContain("N/A");
-    });
-
-    it("renders decimal values without truncation", () => {
-      // Arrange
-      wrapper = mount(MetricCard, {
-        props: { label: "Resource Size", value: 10.5, unit: "MB" },
-      });
-
-      // Assert
-      expect(wrapper.text()).toContain("10.5");
-    });
-
-    it("renders zero value as 0", () => {
-      // Arrange
-      wrapper = mount(MetricCard, {
-        props: { label: "Count", value: 0 },
-      });
-
-      // Assert
-      expect(wrapper.text()).toContain("0");
-    });
-
-    it("renders negative values with minus sign", () => {
-      // Arrange
-      wrapper = mount(MetricCard, {
-        props: { label: "Delta", value: -100 },
-      });
-
-      // Assert
-      expect(wrapper.text()).toContain("-100");
-    });
-
-    it("renders very large numbers with commas", () => {
-      // Arrange
-      wrapper = mount(MetricCard, {
-        props: { label: "Count", value: 999999999999 },
-      });
-
-      // Assert
-      expect(wrapper.text()).toContain("999,999,999,999");
-    });
-
-    it("renders floating point numbers without loss of precision", () => {
-      // Arrange
-      wrapper = mount(MetricCard, {
-        props: { label: "CLS", value: 0.125, unit: "" },
-      });
-
-      // Assert
-      expect(wrapper.text()).toContain("0.125");
-    });
-  });
-
-  describe("status indicators", () => {
-    it("renders a status icon when status=good is provided", () => {
-      // Arrange
-      wrapper = mount(MetricCard, {
-        props: { label: "LCP", value: 2000000000, unit: "ns", status: "good" },
-        global: {
-          stubs: {
-            OIcon: {
-              name: "OIcon",
-              template: '<span data-test="o-icon"></span>',
-              props: ["name", "size", "color"],
-            },
-            OProgressBar: {
-              template: "<div />",
-              props: ["value", "variant", "size"],
-            },
-          },
-        },
-      });
-
-      // Assert — status icon is rendered (v-if="status" branch)
-      expect(wrapper.find('[data-test="o-icon"]').exists()).toBe(true);
-    });
-
-    it("renders a status icon when status=needs-improvement is provided", () => {
-      // Arrange
-      wrapper = mount(MetricCard, {
-        props: {
-          label: "LCP",
-          value: 3000000000,
-          unit: "ns",
-          status: "needs-improvement",
-        },
-        global: {
-          stubs: {
-            OIcon: {
-              name: "OIcon",
-              template: '<span data-test="o-icon"></span>',
-              props: ["name", "size", "color"],
-            },
-            OProgressBar: {
-              template: "<div />",
-              props: ["value", "variant", "size"],
-            },
-          },
-        },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="o-icon"]').exists()).toBe(true);
-    });
-
-    it("renders a status icon when status=poor is provided", () => {
-      // Arrange
-      wrapper = mount(MetricCard, {
-        props: {
-          label: "LCP",
-          value: 5000000000,
-          unit: "ns",
-          status: "poor",
-        },
-        global: {
-          stubs: {
-            OIcon: {
-              name: "OIcon",
-              template: '<span data-test="o-icon"></span>',
-              props: ["name", "size", "color"],
-            },
-            OProgressBar: {
-              template: "<div />",
-              props: ["value", "variant", "size"],
-            },
-          },
-        },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="o-icon"]').exists()).toBe(true);
-    });
-
-    it("does not render a status icon when status is not provided", () => {
-      // Arrange
-      wrapper = mount(MetricCard, {
-        props: { label: "Test Metric", value: 100 },
-        global: {
-          stubs: {
-            OIcon: {
-              name: "OIcon",
-              template: '<span data-test="o-icon"></span>',
-              props: ["name", "size", "color"],
-            },
-            OProgressBar: {
-              template: "<div />",
-              props: ["value", "variant", "size"],
-            },
-          },
-        },
-      });
-
-      // Assert — no icon at all (no icon prop, no status)
-      expect(wrapper.find('[data-test="o-icon"]').exists()).toBe(false);
-    });
-
-    it("does not render data-test status-indicator element when status is absent", () => {
-      // Arrange
-      wrapper = mount(MetricCard, {
-        props: { label: "Test Metric", value: 100 },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="status-indicator"]').exists()).toBe(false);
-    });
-  });
-
-  describe("data-test attribute", () => {
-    it("attaches data-test attribute to root element when dataTest prop is set", () => {
-      // Arrange
-      wrapper = mount(MetricCard, {
-        props: { label: "Test Metric", value: 100, dataTest: "test-metric-card" },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="test-metric-card"]').exists()).toBe(true);
-    });
-
-    it("renders root div element when dataTest prop is not provided", () => {
-      // Arrange
-      wrapper = mount(MetricCard, {
-        props: { label: "Test Metric", value: 100 },
-      });
-
-      // Assert — root element exists; data-test is empty string (default)
-      expect(wrapper.find("div").exists()).toBe(true);
-      const dataTest = wrapper.attributes("data-test");
-      expect(dataTest === undefined || dataTest === "").toBe(true);
-    });
-  });
-});
diff --git a/web/src/components/rum/common/performance/MetricCard.vue b/web/src/components/rum/common/performance/MetricCard.vue
deleted file mode 100644
index 2ac7a11138..0000000000
--- a/web/src/components/rum/common/performance/MetricCard.vue
+++ /dev/null
@@ -1,179 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <div
-    class="p-3 rounded border border-solid border-[var(--o2-border-color)]"
-    :class="statusClass"
-    :data-test="dataTest"
-  >
-    <div class="flex items-start justify-between mb-1">
-      <div class="flex items-center gap-2">
-        <OIcon
-          v-if="icon"
-          :name="icon"
-          size="sm"
-          :class="statusColorClass"
-        />
-        <span class="text-xs font-medium text-[var(--o2-text-secondary)]">
-          {{ label }}
-        </span>
-      </div>
-      <OIcon
-        v-if="status"
-        :name="statusIcon"
-        size="sm"
-        :class="statusColorClass"
-      />
-    </div>
-
-    <div class="flex items-baseline gap-2">
-      <span class="text-2xl font-bold">
-        {{ formattedValue }}
-      </span>
-      <span v-if="displayUnit" class="text-xs text-[var(--o2-text-secondary)]">
-        {{ displayUnit }}
-      </span>
-    </div>
-
-    <div v-if="description" class="mt-2 text-[10px] text-[var(--o2-text-secondary)]">
-      {{ description }}
-    </div>
-
-    <div v-if="threshold" class="mt-2">
-      <div class="flex justify-between text-[10px] mb-1">
-        <span class="text-[var(--o2-text-secondary)]">Threshold</span>
-        <span class="font-medium">{{ threshold }}</span>
-      </div>
-      <OProgressBar
-        :value="progressValue"
-        :variant="progressVariant"
-        size="xs"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import { useEventFormatters } from "@/composables/useEventFormatters";
-import OProgressBar from "@/lib/data/ProgressBar/OProgressBar.vue";
-
-import OIcon from "@/lib/core/Icon/OIcon.vue";
-interface Props {
-  label: string;
-  value: number | null | undefined;
-  unit?: string;
-  icon?: string;
-  status?: "good" | "needs-improvement" | "poor" | null;
-  threshold?: string;
-  maxValue?: number;
-  description?: string;
-  dataTest?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  unit: "",
-  icon: "",
-  status: null,
-  threshold: "",
-  maxValue: 100,
-  description: "",
-  dataTest: "",
-});
-
-const { formatResourceDuration } = useEventFormatters();
-
-const formattedValue = computed(() => {
-  if (props.value == null) return "N/A";
-
-  // Auto-format duration values
-  if (props.unit === "ns") {
-    // Convert nanoseconds to milliseconds for formatting
-    const ms = props.value / 1000000;
-    return formatResourceDuration(ms * 1000, false);
-  }
-
-  if (props.unit === "ms" || props.unit === "s") {
-    return formatResourceDuration(props.value, false);
-  }
-
-  // Format numbers with commas
-  if (typeof props.value === "number") {
-    return props.value.toLocaleString("en-US");
-  }
-
-  return String(props.value);
-});
-
-const displayUnit = computed(() => {
-  // Don't show unit for auto-formatted duration values
-  if (props.unit === "ns" || props.unit === "ms" || props.unit === "s") {
-    return "";
-  }
-  return props.unit;
-});
-
-const statusClass = computed(() => {
-  if (!props.status) return "";
-
-  const classes = {
-    good: "bg-green-50 dark:bg-green-900/10",
-    "needs-improvement": "bg-yellow-50 dark:bg-yellow-900/10",
-    poor: "bg-red-50 dark:bg-red-900/10",
-  };
-
-  return classes[props.status] || "";
-});
-
-const statusIcon = computed(() => {
-  if (!props.status) return "";
-
-  const icons = {
-    good: "check-circle",
-    "needs-improvement": "warning",
-    poor: "error",
-  };
-
-  return icons[props.status] || "";
-});
-
-const statusColorClass = computed(() => {
-  if (!props.status) return "text-gray-500";
-
-  const classes = {
-    good: "text-[var(--o2-positive)]",
-    "needs-improvement": "text-[var(--o2-warning)]",
-    poor: "text-[var(--o2-negative)]",
-  };
-
-  return classes[props.status] || "text-gray-500";
-});
-
-const progressValue = computed(() => {
-  if (props.value == null || !props.maxValue) return 0;
-  return Math.min((props.value / props.maxValue) * 1, 1);
-});
-const progressVariant = computed(() => {
-  if (!props.status) return "default";
-  const map: Record<string, string> = {
-    good: "default",
-    "needs-improvement": "warning",
-    poor: "danger",
-  };
-  return map[props.status] || "default";
-});
-</script>
diff --git a/web/src/components/rum/common/performance/ResourcePerformanceMetrics.spec.ts b/web/src/components/rum/common/performance/ResourcePerformanceMetrics.spec.ts
deleted file mode 100644
index c15a41de11..0000000000
--- a/web/src/components/rum/common/performance/ResourcePerformanceMetrics.spec.ts
+++ /dev/null
@@ -1,270 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { describe, expect, it, afterEach, vi } from "vitest";
-import { mount, VueWrapper } from "@vue/test-utils";
-import ResourcePerformanceMetrics from "./ResourcePerformanceMetrics.vue";
-
-function createMetrics(overrides: Record<string, any> = {}) {
-  return {
-    resource: {
-      duration: 400000000, // 400ms — good
-      dns: { duration: 10000000 }, // 10ms
-      connect: { duration: 20000000 },
-      ssl: { duration: 15000000 },
-      first_byte: { duration: 50000000 },
-      download: { duration: 100000000 },
-      size: 102400, // 100KB
-      redirect: { duration: 5000000 },
-      ...overrides,
-    },
-  };
-}
-
-describe("ResourcePerformanceMetrics", () => {
-  let wrapper: VueWrapper;
-
-  afterEach(() => {
-    if (wrapper) wrapper.unmount();
-    vi.restoreAllMocks();
-  });
-
-  describe("initial render", () => {
-    it("renders without errors when valid metrics are provided", () => {
-      // Arrange + Act
-      wrapper = mount(ResourcePerformanceMetrics, {
-        props: { metrics: createMetrics() },
-      });
-
-      // Assert
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it("renders root container with data-test=resource-performance-metrics", () => {
-      // Arrange
-      wrapper = mount(ResourcePerformanceMetrics, {
-        props: { metrics: createMetrics() },
-      });
-
-      // Assert
-      expect(
-        wrapper.find('[data-test="resource-performance-metrics"]').exists(),
-      ).toBe(true);
-    });
-
-    it("renders root element as a div", () => {
-      // Arrange
-      wrapper = mount(ResourcePerformanceMetrics, {
-        props: { metrics: createMetrics() },
-      });
-
-      // Assert
-      expect(wrapper.find("div").exists()).toBe(true);
-    });
-  });
-
-  describe("conditional rendering — all cards present", () => {
-    it("renders total duration card when resource.duration is present", () => {
-      // Arrange
-      wrapper = mount(ResourcePerformanceMetrics, {
-        props: { metrics: createMetrics() },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-duration"]').exists()).toBe(true);
-    });
-
-    it("renders DNS lookup card when resource.dns.duration is present", () => {
-      // Arrange
-      wrapper = mount(ResourcePerformanceMetrics, {
-        props: { metrics: createMetrics() },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-dns"]').exists()).toBe(true);
-    });
-
-    it("renders connection time card when resource.connect.duration is present", () => {
-      // Arrange
-      wrapper = mount(ResourcePerformanceMetrics, {
-        props: { metrics: createMetrics() },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-connect"]').exists()).toBe(true);
-    });
-
-    it("renders SSL handshake card when resource.ssl.duration is present", () => {
-      // Arrange
-      wrapper = mount(ResourcePerformanceMetrics, {
-        props: { metrics: createMetrics() },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-ssl"]').exists()).toBe(true);
-    });
-
-    it("renders TTFB card when resource.first_byte.duration is present", () => {
-      // Arrange
-      wrapper = mount(ResourcePerformanceMetrics, {
-        props: { metrics: createMetrics() },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-ttfb"]').exists()).toBe(true);
-    });
-
-    it("renders download time card when resource.download.duration is present", () => {
-      // Arrange
-      wrapper = mount(ResourcePerformanceMetrics, {
-        props: { metrics: createMetrics() },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-download"]').exists()).toBe(true);
-    });
-
-    it("renders resource size card when resource.size is present", () => {
-      // Arrange
-      wrapper = mount(ResourcePerformanceMetrics, {
-        props: { metrics: createMetrics() },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-size"]').exists()).toBe(true);
-    });
-
-    it("renders redirect time card when resource.redirect.duration is present", () => {
-      // Arrange
-      wrapper = mount(ResourcePerformanceMetrics, {
-        props: { metrics: createMetrics() },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-redirect"]').exists()).toBe(true);
-    });
-  });
-
-  describe("conditional rendering — missing metrics", () => {
-    it("does not render duration card when resource.duration is missing", () => {
-      // Arrange
-      wrapper = mount(ResourcePerformanceMetrics, {
-        props: { metrics: { resource: {} } },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-duration"]').exists()).toBe(false);
-    });
-
-    it("does not render DNS card when resource.dns.duration is missing", () => {
-      // Arrange
-      wrapper = mount(ResourcePerformanceMetrics, {
-        props: { metrics: { resource: { duration: 100 } } },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-dns"]').exists()).toBe(false);
-    });
-
-    it("does not render SSL card when resource.ssl.duration is missing", () => {
-      // Arrange
-      wrapper = mount(ResourcePerformanceMetrics, {
-        props: {
-          metrics: {
-            resource: { duration: 100, dns: { duration: 10 } },
-          },
-        },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-ssl"]').exists()).toBe(false);
-    });
-
-    it("does not render size card when resource.size is falsy (0)", () => {
-      // Arrange
-      wrapper = mount(ResourcePerformanceMetrics, {
-        props: { metrics: { resource: { duration: 100, size: 0 } } },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-size"]').exists()).toBe(false);
-    });
-
-    it("renders no cards when resource object is absent from metrics", () => {
-      // Arrange
-      wrapper = mount(ResourcePerformanceMetrics, {
-        props: { metrics: {} },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-duration"]').exists()).toBe(false);
-      expect(wrapper.find('[data-test="metric-dns"]').exists()).toBe(false);
-    });
-  });
-
-  describe("duration status thresholds", () => {
-    it("renders duration card for good status (<=500ms)", () => {
-      // Arrange
-      wrapper = mount(ResourcePerformanceMetrics, {
-        props: { metrics: createMetrics({ duration: 400000000 }) },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-duration"]').exists()).toBe(true);
-    });
-
-    it("renders duration card for needs-improvement status (500ms–1s)", () => {
-      // Arrange
-      wrapper = mount(ResourcePerformanceMetrics, {
-        props: { metrics: createMetrics({ duration: 750000000 }) },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-duration"]').exists()).toBe(true);
-    });
-
-    it("renders duration card for poor status (>1s)", () => {
-      // Arrange
-      wrapper = mount(ResourcePerformanceMetrics, {
-        props: { metrics: createMetrics({ duration: 2000000000 }) },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-duration"]').exists()).toBe(true);
-    });
-  });
-
-  describe("resource size formatting", () => {
-    it("renders size card when resource.size is a positive byte value", () => {
-      // Arrange
-      wrapper = mount(ResourcePerformanceMetrics, {
-        props: { metrics: createMetrics({ size: 1024 }) },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-size"]').exists()).toBe(true);
-    });
-
-    it("does not render size card when resource.size is undefined", () => {
-      // Arrange
-      wrapper = mount(ResourcePerformanceMetrics, {
-        props: { metrics: createMetrics({ size: undefined }) },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-size"]').exists()).toBe(false);
-    });
-  });
-});
diff --git a/web/src/components/rum/common/performance/ResourcePerformanceMetrics.vue b/web/src/components/rum/common/performance/ResourcePerformanceMetrics.vue
deleted file mode 100644
index 15befedcb1..0000000000
--- a/web/src/components/rum/common/performance/ResourcePerformanceMetrics.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3" data-test="resource-performance-metrics">
-    <MetricCard
-      v-if="metrics?.resource?.duration"
-      label="Total Duration"
-      :value="metrics.resource.duration"
-      unit="ns"
-      icon="schedule"
-      :status="getDurationStatus(metrics.resource.duration)"
-      description="Total time to load resource"
-      data-test="metric-duration"
-    />
-
-    <MetricCard
-      v-if="metrics?.resource?.dns?.duration"
-      label="DNS Lookup"
-      :value="metrics.resource.dns.duration"
-      unit="ns"
-      icon="dns"
-      description="DNS resolution time"
-      data-test="metric-dns"
-    />
-
-    <MetricCard
-      v-if="metrics?.resource?.connect?.duration"
-      label="Connection Time"
-      :value="metrics.resource.connect.duration"
-      unit="ns"
-      icon="link"
-      description="TCP connection establishment time"
-      data-test="metric-connect"
-    />
-
-    <MetricCard
-      v-if="metrics?.resource?.ssl?.duration"
-      label="SSL Handshake"
-      :value="metrics.resource.ssl.duration"
-      unit="ns"
-      icon="security"
-      description="SSL/TLS handshake time"
-      data-test="metric-ssl"
-    />
-
-    <MetricCard
-      v-if="metrics?.resource?.first_byte?.duration"
-      label="Time to First Byte"
-      :value="metrics.resource.first_byte.duration"
-      unit="ns"
-      icon="network-check"
-      description="Server processing and response time"
-      data-test="metric-ttfb"
-    />
-
-    <MetricCard
-      v-if="metrics?.resource?.download?.duration"
-      label="Download Time"
-      :value="metrics.resource.download.duration"
-      unit="ns"
-      icon="cloud-download"
-      description="Resource download time"
-      data-test="metric-download"
-    />
-
-    <MetricCard
-      v-if="metrics?.resource?.size"
-      label="Resource Size"
-      :value="formatBytes(metrics.resource.size)"
-      unit=""
-      icon="storage"
-      description="Total size of the resource"
-      data-test="metric-size"
-    />
-
-    <MetricCard
-      v-if="metrics?.resource?.redirect?.duration"
-      label="Redirect Time"
-      :value="metrics.resource.redirect.duration"
-      unit="ns"
-      icon="redo"
-      description="Time spent in redirects"
-      data-test="metric-redirect"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import MetricCard from "./MetricCard.vue";
-
-interface Props {
-  metrics: any;
-}
-
-defineProps<Props>();
-
-// Resource performance thresholds (in nanoseconds)
-const DURATION_GOOD = 500000000; // 500ms
-const DURATION_NEEDS_IMPROVEMENT = 1000000000; // 1s
-
-const getDurationStatus = (value: number): "good" | "needs-improvement" | "poor" => {
-  if (value <= DURATION_GOOD) return "good";
-  if (value <= DURATION_NEEDS_IMPROVEMENT) return "needs-improvement";
-  return "poor";
-};
-
-const formatBytes = (bytes: number): string => {
-  if (!bytes) return "0 B";
-  const k = 1024;
-  const sizes = ["B", "KB", "MB", "GB"];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
-};
-</script>
diff --git a/web/src/components/rum/common/performance/ViewPerformanceMetrics.spec.ts b/web/src/components/rum/common/performance/ViewPerformanceMetrics.spec.ts
deleted file mode 100644
index 4109b8d06e..0000000000
--- a/web/src/components/rum/common/performance/ViewPerformanceMetrics.spec.ts
+++ /dev/null
@@ -1,270 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { describe, expect, it, afterEach, vi } from "vitest";
-import { mount, VueWrapper } from "@vue/test-utils";
-import ViewPerformanceMetrics from "./ViewPerformanceMetrics.vue";
-
-function createMockMetrics(overrides: Record<string, any> = {}) {
-  return {
-    view: {
-      largest_contentful_paint: 2000000000, // 2s
-      first_input_delay: 50000000, // 50ms
-      cumulative_layout_shift: 0.05,
-      interaction_to_next_paint: 150000000, // 150ms
-      first_contentful_paint: 1000000000, // 1s
-      time_to_first_byte: 500000000, // 500ms
-      dom_interactive: 1500000000, // 1.5s
-      dom_content_loaded: 2000000000, // 2s
-      dom_complete: 3000000000, // 3s
-      load_event: 3500000000, // 3.5s
-      ...overrides,
-    },
-  };
-}
-
-describe("ViewPerformanceMetrics", () => {
-  let wrapper: VueWrapper;
-
-  afterEach(() => {
-    if (wrapper) wrapper.unmount();
-    vi.restoreAllMocks();
-  });
-
-  describe("core web vitals", () => {
-    it("renders LCP metric text when largest_contentful_paint is present", () => {
-      // Arrange
-      wrapper = mount(ViewPerformanceMetrics, {
-        props: { metrics: createMockMetrics() },
-      });
-
-      // Assert
-      expect(wrapper.text()).toContain("Largest Contentful Paint");
-      expect(wrapper.text()).toContain("LCP");
-    });
-
-    it("renders FID metric text when first_input_delay is present", () => {
-      // Arrange
-      wrapper = mount(ViewPerformanceMetrics, {
-        props: { metrics: createMockMetrics() },
-      });
-
-      // Assert
-      expect(wrapper.text()).toContain("First Input Delay");
-      expect(wrapper.text()).toContain("FID");
-    });
-
-    it("renders CLS metric text when cumulative_layout_shift is present", () => {
-      // Arrange
-      wrapper = mount(ViewPerformanceMetrics, {
-        props: { metrics: createMockMetrics() },
-      });
-
-      // Assert
-      expect(wrapper.text()).toContain("Cumulative Layout Shift");
-      expect(wrapper.text()).toContain("CLS");
-    });
-
-    it("renders INP metric text when interaction_to_next_paint is present", () => {
-      // Arrange
-      wrapper = mount(ViewPerformanceMetrics, {
-        props: { metrics: createMockMetrics() },
-      });
-
-      // Assert
-      expect(wrapper.text()).toContain("Interaction to Next Paint");
-      expect(wrapper.text()).toContain("INP");
-    });
-  });
-
-  describe("additional metrics", () => {
-    it("renders FCP metric text when first_contentful_paint is present", () => {
-      // Arrange
-      wrapper = mount(ViewPerformanceMetrics, {
-        props: { metrics: createMockMetrics() },
-      });
-
-      // Assert
-      expect(wrapper.text()).toContain("First Contentful Paint");
-      expect(wrapper.text()).toContain("FCP");
-    });
-
-    it("renders TTFB metric text when time_to_first_byte is present", () => {
-      // Arrange
-      wrapper = mount(ViewPerformanceMetrics, {
-        props: { metrics: createMockMetrics() },
-      });
-
-      // Assert
-      expect(wrapper.text()).toContain("Time to First Byte");
-      expect(wrapper.text()).toContain("TTFB");
-    });
-
-    it("renders DOM timing metric texts when dom metrics are present", () => {
-      // Arrange
-      wrapper = mount(ViewPerformanceMetrics, {
-        props: { metrics: createMockMetrics() },
-      });
-
-      // Assert
-      expect(wrapper.text()).toContain("DOM Interactive");
-      expect(wrapper.text()).toContain("DOM Content Loaded");
-      expect(wrapper.text()).toContain("DOM Complete");
-    });
-
-    it("renders Load Event metric text when load_event is present", () => {
-      // Arrange
-      wrapper = mount(ViewPerformanceMetrics, {
-        props: { metrics: createMockMetrics() },
-      });
-
-      // Assert
-      expect(wrapper.text()).toContain("Load Event");
-    });
-  });
-
-  describe("conditional rendering", () => {
-    it("does not render metric-lcp card when largest_contentful_paint is undefined", () => {
-      // Arrange
-      wrapper = mount(ViewPerformanceMetrics, {
-        props: {
-          metrics: createMockMetrics({ largest_contentful_paint: undefined }),
-        },
-      });
-
-      // Assert
-      expect(wrapper.findAll('[data-test="metric-lcp"]').length).toBe(0);
-    });
-
-    it("does not render metric-fid card when first_input_delay is undefined", () => {
-      // Arrange
-      wrapper = mount(ViewPerformanceMetrics, {
-        props: { metrics: createMockMetrics({ first_input_delay: undefined }) },
-      });
-
-      // Assert
-      expect(wrapper.findAll('[data-test="metric-fid"]').length).toBe(0);
-    });
-
-    it("renders without errors when view object is empty", () => {
-      // Arrange + Act
-      wrapper = mount(ViewPerformanceMetrics, {
-        props: { metrics: { view: {} } },
-      });
-
-      // Assert
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it("renders without errors when metrics prop is null", () => {
-      // Arrange + Act
-      wrapper = mount(ViewPerformanceMetrics, {
-        props: { metrics: null },
-      });
-
-      // Assert
-      expect(wrapper.exists()).toBe(true);
-    });
-  });
-
-  describe("data-test attributes", () => {
-    it("has data-test=view-performance-metrics on the container", () => {
-      // Arrange
-      wrapper = mount(ViewPerformanceMetrics, {
-        props: { metrics: createMockMetrics() },
-      });
-
-      // Assert
-      expect(
-        wrapper.find('[data-test="view-performance-metrics"]').exists(),
-      ).toBe(true);
-    });
-
-    it("has data-test attributes on all core web vital metric cards", () => {
-      // Arrange
-      wrapper = mount(ViewPerformanceMetrics, {
-        props: { metrics: createMockMetrics() },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-lcp"]').exists()).toBe(true);
-      expect(wrapper.find('[data-test="metric-fid"]').exists()).toBe(true);
-      expect(wrapper.find('[data-test="metric-cls"]').exists()).toBe(true);
-      expect(wrapper.find('[data-test="metric-inp"]').exists()).toBe(true);
-    });
-  });
-
-  describe("status indicators via card presence", () => {
-    it("renders metric-lcp card for LCP under 2.5s (good threshold)", () => {
-      // Arrange
-      wrapper = mount(ViewPerformanceMetrics, {
-        props: {
-          metrics: createMockMetrics({ largest_contentful_paint: 2000000000 }),
-        },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-lcp"]').exists()).toBe(true);
-    });
-
-    it("renders metric-lcp card for LCP between 2.5s and 4s (needs-improvement threshold)", () => {
-      // Arrange
-      wrapper = mount(ViewPerformanceMetrics, {
-        props: {
-          metrics: createMockMetrics({ largest_contentful_paint: 3000000000 }),
-        },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-lcp"]').exists()).toBe(true);
-    });
-
-    it("renders metric-lcp card for LCP over 4s (poor threshold)", () => {
-      // Arrange
-      wrapper = mount(ViewPerformanceMetrics, {
-        props: {
-          metrics: createMockMetrics({ largest_contentful_paint: 5000000000 }),
-        },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-lcp"]').exists()).toBe(true);
-    });
-
-    it("renders metric-fid card for FID under 100ms (good threshold)", () => {
-      // Arrange
-      wrapper = mount(ViewPerformanceMetrics, {
-        props: {
-          metrics: createMockMetrics({ first_input_delay: 50000000 }),
-        },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-fid"]').exists()).toBe(true);
-    });
-
-    it("renders metric-cls card for CLS under 0.1 (good threshold)", () => {
-      // Arrange
-      wrapper = mount(ViewPerformanceMetrics, {
-        props: {
-          metrics: createMockMetrics({ cumulative_layout_shift: 0.05 }),
-        },
-      });
-
-      // Assert
-      expect(wrapper.find('[data-test="metric-cls"]').exists()).toBe(true);
-    });
-  });
-});
diff --git a/web/src/components/rum/common/performance/ViewPerformanceMetrics.vue b/web/src/components/rum/common/performance/ViewPerformanceMetrics.vue
deleted file mode 100644
index 30ede51368..0000000000
--- a/web/src/components/rum/common/performance/ViewPerformanceMetrics.vue
+++ /dev/null
@@ -1,172 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3" data-test="view-performance-metrics">
-    <!-- Core Web Vitals -->
-    <MetricCard
-      v-if="metrics?.view?.largest_contentful_paint"
-      label="Largest Contentful Paint (LCP)"
-      :value="metrics.view.largest_contentful_paint"
-      unit="ns"
-      icon="speed"
-      :status="getLCPStatus(metrics.view.largest_contentful_paint)"
-      description="Time to render the largest content element"
-      data-test="metric-lcp"
-    />
-
-    <MetricCard
-      v-if="metrics?.view?.first_input_delay"
-      label="First Input Delay (FID)"
-      :value="metrics.view.first_input_delay"
-      unit="ns"
-      icon="touch-app"
-      :status="getFIDStatus(metrics.view.first_input_delay)"
-      description="Time from first user interaction to browser response"
-      data-test="metric-fid"
-    />
-
-    <MetricCard
-      v-if="metrics?.view?.cumulative_layout_shift !== undefined"
-      label="Cumulative Layout Shift (CLS)"
-      :value="metrics.view.cumulative_layout_shift"
-      unit=""
-      icon="swap-vert"
-      :status="getCLSStatus(metrics.view.cumulative_layout_shift)"
-      description="Visual stability score (lower is better)"
-      data-test="metric-cls"
-    />
-
-    <MetricCard
-      v-if="metrics?.view?.interaction_to_next_paint"
-      label="Interaction to Next Paint (INP)"
-      :value="metrics.view.interaction_to_next_paint"
-      unit="ns"
-      icon="mouse"
-      :status="getINPStatus(metrics.view.interaction_to_next_paint)"
-      description="Responsiveness to user interactions"
-      data-test="metric-inp"
-    />
-
-    <!-- Additional Metrics -->
-    <MetricCard
-      v-if="metrics?.view?.first_contentful_paint"
-      label="First Contentful Paint (FCP)"
-      :value="metrics.view.first_contentful_paint"
-      unit="ns"
-      icon="image"
-      description="Time to render first content element"
-      data-test="metric-fcp"
-    />
-
-    <MetricCard
-      v-if="metrics?.view?.time_to_first_byte"
-      label="Time to First Byte (TTFB)"
-      :value="metrics.view.time_to_first_byte"
-      unit="ns"
-      icon="network-check"
-      description="Server response time"
-      data-test="metric-ttfb"
-    />
-
-    <MetricCard
-      v-if="metrics?.view?.dom_interactive"
-      label="DOM Interactive"
-      :value="metrics.view.dom_interactive"
-      unit="ns"
-      icon="code"
-      description="Time until DOM is ready"
-      data-test="metric-dom-interactive"
-    />
-
-    <MetricCard
-      v-if="metrics?.view?.dom_content_loaded"
-      label="DOM Content Loaded"
-      :value="metrics.view.dom_content_loaded"
-      unit="ns"
-      icon="article"
-      description="Time until DOM and scripts are loaded"
-      data-test="metric-dom-content-loaded"
-    />
-
-    <MetricCard
-      v-if="metrics?.view?.dom_complete"
-      label="DOM Complete"
-      :value="metrics.view.dom_complete"
-      unit="ns"
-      icon="check-circle"
-      description="Time until page is fully loaded"
-      data-test="metric-dom-complete"
-    />
-
-    <MetricCard
-      v-if="metrics?.view?.load_event"
-      label="Load Event"
-      :value="metrics.view.load_event"
-      unit="ns"
-      icon="download"
-      description="Time until load event completes"
-      data-test="metric-load-event"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import MetricCard from "./MetricCard.vue";
-
-interface Props {
-  metrics: any;
-}
-
-defineProps<Props>();
-
-// Web Vitals thresholds (in nanoseconds)
-const LCP_GOOD = 2500000000; // 2.5s
-const LCP_NEEDS_IMPROVEMENT = 4000000000; // 4s
-
-const FID_GOOD = 100000000; // 100ms
-const FID_NEEDS_IMPROVEMENT = 300000000; // 300ms
-
-const CLS_GOOD = 0.1;
-const CLS_NEEDS_IMPROVEMENT = 0.25;
-
-const INP_GOOD = 200000000; // 200ms
-const INP_NEEDS_IMPROVEMENT = 500000000; // 500ms
-
-const getLCPStatus = (value: number): "good" | "needs-improvement" | "poor" => {
-  if (value <= LCP_GOOD) return "good";
-  if (value <= LCP_NEEDS_IMPROVEMENT) return "needs-improvement";
-  return "poor";
-};
-
-const getFIDStatus = (value: number): "good" | "needs-improvement" | "poor" => {
-  if (value <= FID_GOOD) return "good";
-  if (value <= FID_NEEDS_IMPROVEMENT) return "needs-improvement";
-  return "poor";
-};
-
-const getCLSStatus = (value: number): "good" | "needs-improvement" | "poor" => {
-  if (value <= CLS_GOOD) return "good";
-  if (value <= CLS_NEEDS_IMPROVEMENT) return "needs-improvement";
-  return "poor";
-};
-
-const getINPStatus = (value: number): "good" | "needs-improvement" | "poor" => {
-  if (value <= INP_GOOD) return "good";
-  if (value <= INP_NEEDS_IMPROVEMENT) return "needs-improvement";
-  return "poor";
-};
-</script>
diff --git a/web/src/components/rum/correlation/TraceCorrelationCard.vue b/web/src/components/rum/correlation/TraceCorrelationCard.vue
index 437204bd31..7ed471a707 100644
--- a/web/src/components/rum/correlation/TraceCorrelationCard.vue
+++ b/web/src/components/rum/correlation/TraceCorrelationCard.vue
@@ -15,18 +15,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="mt-3 border border-solid border-(--o2-border-color) rounded">
-    <div class="text-base text-(--o2-text-color) font-bold ml-1 mb-2">Distributed Trace</div>
+  <div class="mt-3 border border-solid border-card-glass-border rounded-default">
+    <div class="text-base text-text-heading font-bold ml-1 mb-2">Distributed Trace</div>
 
     <template v-if="isLoading">
       <div class="p-3 text-center">
         <OSpinner size="sm" />
-        <div class="mt-2 text-gray-400">Loading trace data...</div>
+        <div class="mt-2 text-text-muted">Loading trace data...</div>
       </div>
     </template>
 
     <template v-else-if="!traceId">
-      <div class="p-3 text-center text-gray-400">
+      <div class="p-3 text-center text-text-muted">
         <OIcon name="info" size="md" class="mb-2" />
         <div>No trace information available for this event</div>
       </div>
@@ -34,13 +34,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     <template v-else>
       <!-- Trace ID Section -->
-      <div class="bg-(--o2-card-bg) p-3">
+      <div class="bg-card-glass-bg p-3">
         <div class="flex items-center mb-3">
-          <div class="w-1/4 text-gray-400">Trace ID:</div>
+          <div class="w-1/4 text-text-label">Trace ID:</div>
           <div class="w-3/4 flex items-center flex-nowrap">
             <code
               data-test="trace-correlation-card-trace-id-text"
-              class="font-mono text-sm py-1 px-2 bg-(--color-surface-accent) rounded text-(--o2-text-color)"
+              class="font-mono text-sm py-1 px-2 bg-surface-accent rounded-default text-text-body"
             >{{ formatTraceId(traceId) }}</code>
             <OButton
               icon-left="content-copy"
@@ -55,27 +55,27 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
 
         <div class="flex items-center mb-3" v-if="spanId">
-          <div class="w-1/4 text-gray-400">Span ID:</div>
+          <div class="w-1/4 text-text-label">Span ID:</div>
           <div class="w-3/4">
             <code
               data-test="trace-correlation-card-span-id-text"
-              class="font-mono text-sm py-1 px-2 bg-(--color-surface-accent) rounded text-(--o2-text-color)"
+              class="font-mono text-sm py-1 px-2 bg-surface-accent rounded-default text-text-body"
             >{{ formatSpanId(spanId) }}</code>
           </div>
         </div>
 
         <!-- Span Hierarchy -->
         <div v-if="hasBackendTrace" class="mb-3">
-          <div class="text-gray-400 mb-1">Span Hierarchy:</div>
+          <div class="text-text-label mb-1">Span Hierarchy:</div>
           <div class="ml-3">
             <div class="flex items-center py-1 text-sm">
               <OIcon name="circle" size="xs" class="mr-1" />
-              <span class="text-gray-500">Application Span</span>
+              <span class="text-text-secondary">Application Span</span>
             </div>
             <div class="flex items-center py-1 text-sm ml-3">
               <OIcon name="arrow-right" size="sm" class="mr-1" />
               <OIcon name="circle" size="xs" class="mr-1" />
-              <span class="text-gray-500"
+              <span class="text-text-secondary"
                 >Browser SDK Span ({{ formatSpanId(spanId) }})</span
               >
             </div>
@@ -86,7 +86,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 size="xs"
                 class="mr-1"
               />
-              <span class="text-gray-500"
+              <span class="text-text-secondary"
                 >Backend Spans ({{ backendSpanCount }})</span
               >
             </div>
@@ -95,10 +95,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
         <!-- Performance Breakdown -->
         <div v-if="performanceData" class="mb-3">
-          <div class="text-gray-400 mb-1">Performance Breakdown:</div>
-          <div class="p-2 bg-(--color-surface-accent) rounded text-sm">
+          <div class="text-text-label mb-1">Performance Breakdown:</div>
+          <div class="p-2 bg-surface-accent rounded-default text-sm">
             <div class="flex items-center mb-1">
-              <div class="w-5/12 text-gray-500">Total Duration:</div>
+              <div class="w-5/12 text-text-label">Total Duration:</div>
               <div class="w-7/12 font-bold">
                 {{ performanceData.total_duration_ms }}ms
               </div>
@@ -107,10 +107,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               class="flex items-center mb-1"
               v-if="performanceData.browser_duration_ms"
             >
-              <div class="w-5/12 text-gray-500">Browser:</div>
+              <div class="w-5/12 text-text-label">Browser:</div>
               <div class="w-7/12">
                 {{ performanceData.browser_duration_ms }}ms
-                <span class="text-gray-400"
+                <span class="text-text-secondary"
                   >({{
                     calculatePercentage(
                       performanceData.browser_duration_ms,
@@ -124,10 +124,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               class="flex items-center mb-1"
               v-if="performanceData.network_latency_ms"
             >
-              <div class="w-5/12 text-gray-500">Network:</div>
+              <div class="w-5/12 text-text-label">Network:</div>
               <div class="w-7/12">
                 {{ performanceData.network_latency_ms }}ms
-                <span class="text-gray-400"
+                <span class="text-text-secondary"
                   >({{
                     calculatePercentage(
                       performanceData.network_latency_ms,
@@ -141,10 +141,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               class="flex items-center mb-1"
               v-if="performanceData.backend_duration_ms"
             >
-              <div class="w-5/12 text-gray-500">Backend:</div>
+              <div class="w-5/12 text-text-label">Backend:</div>
               <div class="w-7/12">
                 {{ performanceData.backend_duration_ms }}ms
-                <span class="text-gray-400"
+                <span class="text-text-secondary"
                   >({{
                     calculatePercentage(
                       performanceData.backend_duration_ms,
@@ -184,11 +184,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- Missing trace notice -->
         <div
           v-if="!hasBackendTrace && traceId"
-          class="mt-3 p-2 bg-(--color-surface-accent) rounded"
+          class="mt-3 p-2 bg-surface-accent rounded-default"
         >
           <div class="flex items-center">
             <OIcon name="info" size="sm" class="mr-2" />
-            <div class="text-gray-500 text-xs">
+            <div class="text-text-secondary text-xs">
               Backend trace data not yet available. Trace data may take up to 30
               seconds to be ingested.
             </div>
diff --git a/web/src/components/rum/errorTracking/list/ErrorIssueCell.vue b/web/src/components/rum/errorTracking/list/ErrorIssueCell.vue
index 9f2fda13ac..93a614ee6e 100644
--- a/web/src/components/rum/errorTracking/list/ErrorIssueCell.vue
+++ b/web/src/components/rum/errorTracking/list/ErrorIssueCell.vue
@@ -20,17 +20,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <div class="flex flex-col gap-0.5 min-w-0" data-test="rum-error-issue-cell">
     <div class="flex items-baseline gap-1 min-w-0">
       <span
-        class="issue-cell__type shrink-0"
+        class="font-semibold shrink-0"
         :class="
           isUnhandled
-            ? 'issue-cell__type--unhandled'
-            : 'issue-cell__type--handled'
+            ? 'text-severity-error-color'
+            : 'text-severity-warning-color'
         "
         data-test="rum-error-issue-cell-type"
         >{{ issue.error_type || t("rum.error") }}:</span
       >
       <span
-        class="font-semibold truncate min-w-0 text-[var(--o2-text-body)]"
+        class="font-semibold truncate min-w-0 text-text-body"
         :title="issue.error_message"
         data-test="rum-error-issue-cell-message"
         >{{ issue.error_message }}</span
@@ -43,7 +43,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :label="issue.error_handling"
         :variant="isUnhandled ? 'error-outline' : 'warning-outline'"
         size="xs"
-        shape="rounded"
+        shape="rounded-default"
         class="uppercase shrink-0"
         data-test="rum-error-issue-cell-handling-tag"
       />
@@ -62,7 +62,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :label="route"
         variant="default-soft"
         size="xs"
-        shape="rounded"
+        shape="rounded-default"
         class="shrink-0"
         data-test="rum-error-issue-cell-route-tag"
       />
@@ -102,17 +102,3 @@ const topFrame = computed(() => parseTopFrame(props.issue.error_stack));
 
 const route = computed(() => routeFromUrl(props.issue.view_url));
 </script>
-
-<style scoped lang="scss">
-.issue-cell__type {
-  font-weight: var(--font-semibold);
-
-  &--unhandled {
-    color: var(--o2-severity-error-color);
-  }
-
-  &--handled {
-    color: var(--o2-severity-warning-color);
-  }
-}
-</style>
diff --git a/web/src/components/rum/errorTracking/list/ErrorTrendCell.vue b/web/src/components/rum/errorTracking/list/ErrorTrendCell.vue
index 91492dc95d..76892455a9 100644
--- a/web/src/components/rum/errorTracking/list/ErrorTrendCell.vue
+++ b/web/src/components/rum/errorTracking/list/ErrorTrendCell.vue
@@ -32,20 +32,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <span
           v-for="(value, index) in displayBuckets"
           :key="index"
-          class="trend-bar w-1.5"
+          class="trend-bar rounded-default w-1.5"
           :class="
             value > 0
               ? isUnhandled
-                ? 'trend-bar--unhandled'
-                : 'trend-bar--handled'
-              : 'trend-bar--empty'
+                ? 'bg-severity-error-color opacity-55'
+                : 'bg-severity-warning-color opacity-55'
+              : 'bg-card-glass-border opacity-60'
           "
           :style="{ height: barHeight(value) }"
         />
       </div>
       <small
-        class="trend-annotation"
-        :class="`trend-annotation--${annotation.kind}`"
+        class="italic"
+        :class="annotationClass"
         data-test="rum-error-trend-cell-annotation"
         >{{ annotationLabel }}</small
       >
@@ -62,14 +62,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <span
         v-for="index in 12"
         :key="index"
-        class="trend-bar trend-bar--empty w-1.5"
+        class="trend-bar rounded-default bg-card-glass-border opacity-60 w-1.5"
         :style="{ height: `${20 + ((index * 11) % 60)}%` }"
       />
     </div>
 
     <span
       v-else
-      class="text-[var(--o2-text-muted)]"
+      class="text-text-muted"
       :title="t('rum.trendNoData')"
       data-test="rum-error-trend-cell-empty"
       >—</span
@@ -166,6 +166,19 @@ const annotation = computed(() =>
   computeTrendAnnotation(props.buckets, props.status),
 );
 
+// Static per-kind utility strings (not built by interpolation) so Tailwind's
+// scanner sees every class it has to emit.
+const ANNOTATION_CLASS: Record<string, string> = {
+  spike: "text-severity-error-color not-italic font-semibold",
+  drop: "text-status-success-text",
+  new: "text-text-secondary",
+  flat: "text-text-secondary",
+};
+
+const annotationClass = computed(
+  () => ANNOTATION_CLASS[annotation.value.kind] ?? "",
+);
+
 const annotationLabel = computed(() => {
   const { kind, factor } = annotation.value;
   if (kind === "spike") return `▲ ${factor!.toFixed(1)}×`;
@@ -193,42 +206,3 @@ const ariaLabel = computed(() =>
 );
 </script>
 
-<style scoped lang="scss">
-.trend-bar {
-  border-radius: 0.0625rem;
-
-  &--unhandled {
-    background: var(--o2-severity-error-color);
-    opacity: 0.55;
-  }
-
-  &--handled {
-    background: var(--o2-severity-warning-color);
-    opacity: 0.55;
-  }
-
-  &--empty {
-    background: var(--o2-border-color);
-    opacity: 0.6;
-  }
-}
-
-.trend-annotation {
-  font-style: italic;
-
-  &--spike {
-    color: var(--o2-severity-error-color);
-    font-style: normal;
-    font-weight: var(--font-semibold);
-  }
-
-  &--drop {
-    color: var(--o2-status-success-text);
-  }
-
-  &--new,
-  &--flat {
-    color: var(--o2-text-caption);
-  }
-}
-</style>
diff --git a/web/src/components/rum/errorTracking/list/ErrorsFilterBar.vue b/web/src/components/rum/errorTracking/list/ErrorsFilterBar.vue
index 5b5f5868b5..3ee12984ad 100644
--- a/web/src/components/rum/errorTracking/list/ErrorsFilterBar.vue
+++ b/web/src/components/rum/errorTracking/list/ErrorsFilterBar.vue
@@ -82,7 +82,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :model-value="service || ALL_SERVICES"
         :options="serviceOptions"
         size="sm"
-        class="min-w-[9rem]"
+        class="min-w-36"
         data-test="rum-errors-filter-service-select"
         @update:model-value="onServiceSelect"
       />
diff --git a/web/src/components/rum/errorTracking/list/ErrorsKpiCards.vue b/web/src/components/rum/errorTracking/list/ErrorsKpiCards.vue
index 15acbf84d0..e710badabb 100644
--- a/web/src/components/rum/errorTracking/list/ErrorsKpiCards.vue
+++ b/web/src/components/rum/errorTracking/list/ErrorsKpiCards.vue
@@ -23,11 +23,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <article
       v-for="card in cards"
       :key="card.key"
-      class="card-container flex flex-col items-start rounded-lg border border-border-default px-2.5 py-1.5 min-w-0"
+      class="bg-card-glass-bg flex flex-col items-start rounded-default border border-border-default px-2.5 py-1.5 min-w-0"
       :data-test="`rum-errors-kpi-${card.key}-card`"
     >
       <span
-        class="flex items-center gap-1.5 text-xs font-medium uppercase tracking-wide text-[var(--o2-text-label)]"
+        class="flex items-center gap-1.5 text-xs font-medium uppercase tracking-wide text-text-label"
       >
         {{ card.label }}
         <OTag
@@ -125,7 +125,7 @@ const cards = computed(() => {
         kpis.crashFreePct === null ? "—" : `${kpis.crashFreePct.toFixed(1)}%`,
       valueClass:
         kpis.crashFreePct !== null && kpis.crashFreePct < CRASH_FREE_FAIR_MIN
-          ? "text-[var(--o2-severity-error-color)]"
+          ? "text-severity-error-color"
           : "",
       caption: t("rum.sessionsHitError", {
         errorSessions: addCommasToNumber(kpis.errorSessions),
@@ -149,7 +149,7 @@ const cards = computed(() => {
       label: t("rum.newIssues"),
       value: String(kpis.newIssues),
       valueClass:
-        kpis.newIssues > 0 ? "text-[var(--o2-severity-error-color)]" : "",
+        kpis.newIssues > 0 ? "text-severity-error-color" : "",
       caption: kpis.deployVersion
         ? t("rum.firstSeenSinceDeploy", { version: kpis.deployVersion })
         : t("rum.firstSeenInWindow"),
diff --git a/web/src/components/rum/errorTracking/list/ErrorsOverTimeChart.vue b/web/src/components/rum/errorTracking/list/ErrorsOverTimeChart.vue
index ce7acd9483..a4def83105 100644
--- a/web/src/components/rum/errorTracking/list/ErrorsOverTimeChart.vue
+++ b/web/src/components/rum/errorTracking/list/ErrorsOverTimeChart.vue
@@ -16,7 +16,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <section
-    class="card-container flex flex-col h-full px-2.5 py-1.5 min-w-0"
+    class="bg-card-glass-bg flex flex-col h-full px-2.5 py-1.5 min-w-0"
     data-test="rum-errors-over-time-chart"
   >
     <h4>{{ t("rum.errorsOverTime") }}</h4>
@@ -40,7 +40,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       class="flex-1 flex items-center justify-center"
       data-test="rum-errors-over-time-chart-empty"
     >
-      <p class="text-[var(--o2-text-muted)]">
+      <p class="text-text-muted">
         {{ t("rum.noErrorsInWindow") }}
       </p>
     </div>
@@ -51,7 +51,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </div>
       <small
         v-if="spikeCaption"
-        class="text-right font-semibold text-[var(--o2-severity-error-color)]"
+        class="text-right font-semibold text-severity-error-color"
         data-test="rum-errors-over-time-chart-spike-caption"
         >{{ spikeCaption }}</small
       >
@@ -116,8 +116,8 @@ const chartOptions = computed(() => {
   // Read the theme so token colors are re-resolved when it flips —
   // getComputedStyle alone is not reactive.
   void store.state.theme;
-  const errorColor = resolveToken("--o2-severity-error-color", "#EF5350");
-  const warningColor = resolveToken("--o2-severity-warning-color", "#FB8C00");
+  const errorColor = resolveToken("--color-severity-error-color", "#EF5350");
+  const warningColor = resolveToken("--color-severity-warning-color", "#FB8C00");
   const labels = props.buckets.map((bucket) =>
     format(new Date(Math.floor(bucket.ts / 1000)), labelFormat.value),
   );
diff --git a/web/src/components/rum/errorTracking/view/ErrorEventDescription.vue b/web/src/components/rum/errorTracking/view/ErrorEventDescription.vue
index d5af251a3c..4a77d7765a 100644
--- a/web/src/components/rum/errorTracking/view/ErrorEventDescription.vue
+++ b/web/src/components/rum/errorTracking/view/ErrorEventDescription.vue
@@ -23,7 +23,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     >
       <pre
         data-test="error-event-description-navigation"
-        class="bg-[#ececec] rounded p-2"
+        class="bg-surface-subtle rounded-default p-2"
       >
 {
   <span class="text-primary">from</span> : {{ column.view_referrer }},
@@ -33,7 +33,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <template
       v-else-if="column.type === 'resource' && column.resource_type === 'xhr'"
     >
-      <span class="font-bold pr-2 text-[0.75rem]">{{
+      <span class="font-bold pr-2 text-xs">{{
         column.resource_method
       }}</span>
       <a
@@ -48,7 +48,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <template v-else>
       <span
         data-test="error-event-description-default"
-        class="text-[0.875rem]"
+        class="text-sm"
       >{{ getDescription }}</span>
     </template>
   </div>
diff --git a/web/src/components/rum/errorTracking/view/ErrorEvents.vue b/web/src/components/rum/errorTracking/view/ErrorEvents.vue
index 6f57ac667a..df493b322d 100644
--- a/web/src/components/rum/errorTracking/view/ErrorEvents.vue
+++ b/web/src/components/rum/errorTracking/view/ErrorEvents.vue
@@ -67,7 +67,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
         <div class="shrink-0 text-right">
           <span
-            class="tabular-nums text-[var(--o2-text-secondary)]"
+            class="tabular-nums text-text-secondary"
             :data-test="`error-events-timeline-offset-${index}`"
             :title="getFormattedDate(event._timestamp / 1000)"
           >{{ offsetLabel(event) }}</span>
@@ -127,6 +127,9 @@ const getFormattedDate = (timestamp: number) =>
 </script>
 
 <style scoped lang="scss">
+/* keep(generated-content): the timeline rail is a ::before pseudo-element on
+   .event-timeline (and the dots are absolutely positioned against it), so there
+   is no element for a utility class to land on. */
 .event-timeline {
   position: relative;
 
@@ -138,7 +141,7 @@ const getFormattedDate = (timestamp: number) =>
     top: 0.25rem;
     bottom: 0.25rem;
     width: 1px;
-    background: var(--o2-border-color);
+    background: var(--color-card-glass-border);
   }
 }
 
@@ -148,23 +151,23 @@ const getFormattedDate = (timestamp: number) =>
   top: 0.3125rem;
   width: 0.5625rem;
   height: 0.5625rem;
-  border-radius: 9999px;
-  border: 1px solid var(--o2-border-color);
+  border-radius: var(--radius-full);
+  border: 1px solid var(--color-card-glass-border);
 
   &--default {
-    background: var(--o2-card-bg, var(--o2-border-color));
+    background: var(--color-card-glass-bg, var(--color-card-glass-border));
   }
 
   &--error {
-    background: var(--o2-severity-error-color);
-    border-color: var(--o2-severity-error-color);
+    background: var(--color-severity-error-color);
+    border-color: var(--color-severity-error-color);
   }
 }
 
 .event-timeline__item--error {
   background: color-mix(
     in srgb,
-    var(--o2-severity-error-color) 6%,
+    var(--color-severity-error-color) 6%,
     transparent
   );
   border-radius: 0.375rem;
diff --git a/web/src/components/rum/errorTracking/view/ErrorHeader.spec.ts b/web/src/components/rum/errorTracking/view/ErrorHeader.spec.ts
index 39c59d58d2..8c0bcd23a1 100644
--- a/web/src/components/rum/errorTracking/view/ErrorHeader.spec.ts
+++ b/web/src/components/rum/errorTracking/view/ErrorHeader.spec.ts
@@ -88,7 +88,7 @@ describe("ErrorHeader", () => {
       wrapper = mountComponent();
       await flushPromises();
 
-      // Assert — AppPageHeader's back button uses the standard "Back" label.
+      // Assert — OPageHeader's back button uses the standard "Back" label.
       expect(wrapper.find('[data-test="back-button"]').attributes("title")).toBe("Back");
     });
 
diff --git a/web/src/components/rum/errorTracking/view/ErrorHeader.vue b/web/src/components/rum/errorTracking/view/ErrorHeader.vue
index 873c4d4d38..c91ce59321 100644
--- a/web/src/components/rum/errorTracking/view/ErrorHeader.vue
+++ b/web/src/components/rum/errorTracking/view/ErrorHeader.vue
@@ -17,7 +17,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div>
     <div>
-      <AppPageHeader
+      <OPageHeader
         :back="{ onClick: () => router.back(), dataTest: 'back-button' }"
       >
         <template #title>
@@ -30,18 +30,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <OIcon
               size="xs"
               name="content-copy"
-              class="hover:text-[var(--o2-primary-btn-bg)]"
+              class="hover:text-button-primary"
               @click="copyErrorId(error.error_id)"
           /></span>
         </template>
         <template #actions>
           <span>{{ error.timestamp }}</span>
         </template>
-      </AppPageHeader>
+      </OPageHeader>
       <div class="flex items-center flex-nowrap my-1">
         <div
           data-test="error-header-error-type"
-          class="text-[22px] font-bold"
+          class="text-2xl font-bold"
         >{{ error.type }}</div>
       </div>
       <div class="text-base pt-1 flex items-center">
@@ -50,7 +50,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           data-test="error-header-unhandled-badge"
           :class="
             error.error_handling === 'unhandled'
-              ? 'text-red-6 border border-[rgb(246,68,68)] rounded text-sm px-1 mr-2'
+              ? 'text-status-error-text border border-status-negative rounded-default text-sm px-1 mr-2'
               : ''
           "
         >
@@ -68,7 +68,7 @@ import { useRouter } from "vue-router";
 import { copyToClipboard } from "@/utils/clipboard";
 import { useI18n } from "vue-i18n";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageHeader from "@/lib/core/PageHeader/OPageHeader.vue";
 
 const { t } = useI18n();
 const router = useRouter();
diff --git a/web/src/components/rum/errorTracking/view/ErrorSessionReplay.vue b/web/src/components/rum/errorTracking/view/ErrorSessionReplay.vue
index 272e1916b3..e718137141 100644
--- a/web/src/components/rum/errorTracking/view/ErrorSessionReplay.vue
+++ b/web/src/components/rum/errorTracking/view/ErrorSessionReplay.vue
@@ -16,7 +16,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <section
-    class="mt-4 rounded-lg border border-border-default p-3"
+    class="mt-4 rounded-default border border-border-default p-3"
     data-test="error-session-replay-card"
   >
     <div class="flex items-center justify-between gap-2">
diff --git a/web/src/components/rum/errorTracking/view/ErrorStackTrace.spec.ts b/web/src/components/rum/errorTracking/view/ErrorStackTrace.spec.ts
index b0b6f5863a..44dc7320de 100644
--- a/web/src/components/rum/errorTracking/view/ErrorStackTrace.spec.ts
+++ b/web/src/components/rum/errorTracking/view/ErrorStackTrace.spec.ts
@@ -221,12 +221,16 @@ describe("ErrorStackTrace Component", () => {
     // Assert
     const stackLines = wrapper.findAll('[data-test="error-stack-trace-line"]');
     const firstStyle = stackLines[0].attributes("style");
-    expect(firstStyle).toContain("border-top: 1px solid rgb(224, 224, 224)");
+    expect(firstStyle).toContain(
+      "border-top: 1px solid var(--color-border-default)",
+    );
 
     for (let i = 1; i < stackLines.length; i++) {
       const style = stackLines[i].attributes("style");
       if (style) {
-        expect(style).not.toContain("border-top: 1px solid rgb(224, 224, 224)");
+        expect(style).not.toContain(
+          "border-top: 1px solid var(--color-border-default)",
+        );
       }
     }
   });
@@ -259,7 +263,9 @@ describe("ErrorStackTrace Component", () => {
     const stackLines = wrapper.findAll('[data-test="error-stack-trace-line"]');
     expect(stackLines).toHaveLength(1);
     const style = stackLines[0].attributes("style");
-    expect(style).toContain("border-top: 1px solid rgb(224, 224, 224)");
+    expect(style).toContain(
+      "border-top: 1px solid var(--color-border-default)",
+    );
     expect(style).toContain("border-radius: 0 0 4px 4px");
   });
 
diff --git a/web/src/components/rum/errorTracking/view/ErrorStackTrace.vue b/web/src/components/rum/errorTracking/view/ErrorStackTrace.vue
index 51eaf8ec69..bc09973aae 100644
--- a/web/src/components/rum/errorTracking/view/ErrorStackTrace.vue
+++ b/web/src/components/rum/errorTracking/view/ErrorStackTrace.vue
@@ -24,7 +24,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <OTabs
         v-model="activeTab"
         dense
-        class="text-gray-500 mb-1"
+        class="text-text-secondary mb-1"
         align="left"
       >
         <OTab name="raw" :label="t('rum.stackTraceRaw')" data-test="rum-error-stack-trace-raw-tab" />
@@ -42,9 +42,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <div
                 v-if="index"
                 data-test="error-stack-trace-line"
-                class="border-b border-l border-r border-solid border-(--o2-border) text-[13px] py-1.5 px-2"
+                class="border-b border-l border-r border-solid border-border-default text-compact py-1.5 px-2"
                 :style="{
-                  'border-top': Number(index) === 1 ? '1px solid #e0e0e0' : '',
+                  'border-top': Number(index) === 1 ? '1px solid var(--color-border-default)' : '',
                   'border-radius':
                     Number(index) === error_stack.length - 1
                       ? '0 0 4px 4px'
diff --git a/web/src/components/rum/errorTracking/view/PrettyStackTrace.vue b/web/src/components/rum/errorTracking/view/PrettyStackTrace.vue
index f004ae98a5..d52090e8f9 100644
--- a/web/src/components/rum/errorTracking/view/PrettyStackTrace.vue
+++ b/web/src/components/rum/errorTracking/view/PrettyStackTrace.vue
@@ -20,14 +20,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <div
       v-if="isLoadingTranslation"
       data-test="rum-pretty-stack-trace-loading"
-      class="loading-container p-6 text-center min-h-[200px] flex flex-col items-center justify-center rounded-md"
+      class="loading-container p-6 text-center min-h-50 flex flex-col items-center justify-center rounded-default"
       :style="{ 'background-color': backgroundColor, 'border': `1px solid ${borderColor}` }"
     >
       <OSpinner variant="dots" size="lg" />
-      <div class="mt-3 text-gray-400" style="font-size: 14px; font-weight: 500;">
+      <div class="mt-3 text-text-secondary font-medium" style="font-size: var(--text-sm);">
         {{ t("rum.translatingStackTrace") }}
       </div>
-      <div class="mt-1 text-gray-400" style="font-size: 12px;">
+      <div class="mt-1 text-text-secondary" style="font-size: var(--text-xs);">
         {{ t("rum.translatingStackTraceHint") }}
       </div>
     </div>
@@ -36,29 +36,27 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <div
       v-else-if="allSourceInfoNull"
       data-test="rum-pretty-stack-trace-unavailable"
-      class="no-source-maps-container p-3 text-center flex flex-col items-center justify-center rounded-md py-5 px-6"
+      class="no-source-maps-container p-3 text-center flex flex-col items-center justify-center rounded-default py-5 px-6"
       :style="{ 'background-color': backgroundColor, 'border': `1px solid ${borderColor}` }"
     >
       <OIcon name="code-off" size="lg" class="mb-2" />
-      <div class="text-base font-medium text-gray-500 mb-1" style="font-weight: 500;">
+      <div class="text-base font-medium text-text-secondary mb-1">
         {{ t("rum.sourceMapsNotAvailable") }}
       </div>
-      <div class="text-sm text-gray-400" style="max-width: 500px; margin: 0 auto; font-size: 13px;">
+      <div class="text-sm text-text-secondary" style="max-width: 500px; margin: 0 auto; font-size: var(--text-compact);">
         {{ t("rum.sourceMapsNotAvailableBody") }}
       </div>
       <div v-if="props.error.service || props.error.version" class="flex items-center justify-center gap-2 mt-2 mb-2">
         <span
           v-if="props.error.service"
-          class="service-version-badge service-badge inline-flex items-center gap-1 py-1 px-[10px] rounded text-xs font-medium"
-          :class="isDarkMode ? 'bg-[rgba(149,117,205,0.2)] text-[#b39ddb]' : 'bg-[rgba(103,58,183,0.12)] text-[#5e35b1]'"
+          class="service-version-badge service-badge inline-flex items-center gap-1 py-1 px-2.5 rounded-default text-xs font-medium bg-badge-purple-soft-bg text-badge-purple-soft-text"
         >
           <span class="badge-label opacity-80">{{ t("rum.serviceBadge") }}</span>
           <span class="badge-value font-semibold">{{ props.error.service }}</span>
         </span>
         <span
           v-if="props.error.version"
-          class="service-version-badge version-badge inline-flex items-center gap-1 py-1 px-[10px] rounded text-xs font-medium"
-          :class="isDarkMode ? 'bg-[rgba(66,165,245,0.2)] text-[#90caf9]' : 'bg-[rgba(25,118,210,0.12)] text-[#1976d2]'"
+          class="service-version-badge version-badge inline-flex items-center gap-1 py-1 px-2.5 rounded-default text-xs font-medium bg-badge-blue-soft-bg text-badge-blue-soft-text"
         >
           <span class="badge-label opacity-80">{{ t("rum.versionBadge") }}</span>
           <span class="badge-value font-semibold">{{ props.error.version }}</span>
@@ -85,7 +83,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- Error message -->
         <div
           v-if="stackTrace.error"
-          class="error-header px-3 py-2 text-weight-bold border border-solid rounded-t-md text-sm font-semibold [letter-spacing:0.01em] !px-4 !py-[10px] [box-shadow:0_1px_2px_rgba(0,0,0,0.05)] -mb-px"
+          class="error-header px-3 py-2 font-bold border border-solid rounded-t-default text-sm font-semibold [letter-spacing:0.01em] !px-4 !py-2.5 [box-shadow:0_1px_2px_rgba(0,0,0,0.05)] -mb-px"
           :style="{
             'background-color': errorHeaderBackground,
             'color': errorHeaderColor,
@@ -98,7 +96,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- First stack frame - expandable/collapsible -->
         <div
           v-if="stackTrace.stack.length > 0"
-          class="stack-frame-wrapper rounded-b-md [box-shadow:0_1px_3px_rgba(0,0,0,0.08)] overflow-hidden mt-0"
+          class="stack-frame-wrapper rounded-b-default [box-shadow:0_1px_3px_rgba(0,0,0,0.08)] overflow-hidden mt-0"
           :style="{
             'border-top': `1px solid ${borderColor}`,
             'border-bottom': `1px solid ${borderColor}`,
@@ -110,19 +108,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         >
           <!-- Frame header - clickable -->
           <div
-            class="frame-header px-3 py-2 cursor-pointer transition-all duration-200 ease-in-out !px-4 !py-3"
+            class="frame-header px-3 py-2 cursor-pointer transition-all duration-200 ease-in-out !px-4 !py-3 hover:bg-surface-subtle"
             @click="toggleFrame(traceIndex, 0)"
           >
             <div class="frame-header-content flex items-center gap-2">
               <OIcon
                 :name="isFrameExpanded(traceIndex, 0) ? 'expand-more' : 'chevron-right'"
                 size="xs"
-                class="mr-1 text-gray-400"
+                class="mr-1 text-icon-color"
               />
               <div
                 v-if="stackTrace.stack[0].line"
                 data-test="rum-pretty-stack-trace-frame-line"
-                class="stack-line-header [font-family:'SF_Mono','Monaco','Inconsolata','Fira_Code','Droid_Sans_Mono',monospace] text-[12.5px] font-medium break-all flex-1 [line-height:1.5]"
+                class="stack-line-header font-mono text-compact font-medium break-all flex-1 [line-height:1.5]"
                 :style="{ color: textColor }"
               >
                 {{ stackTrace.stack[0].line }}
@@ -134,11 +132,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <div
             v-if="isFrameExpanded(traceIndex, 0) && stackTrace.stack[0].source_info"
             data-test="rum-pretty-stack-trace-source-context"
-            class="source-context !px-4 !pb-4 !pt-0"
-            :style="{ 'background-color': isDarkMode ? '#0d0d0d' : '#f8f9fa' }"
+            class="source-context !px-4 !pb-4 !pt-0 bg-code-block-bg"
           >
             <!-- File location -->
-            <div class="source-location-header text-gray-400 text-xs !mb-[10px] text-[11px] font-semibold [letter-spacing:0.02em] opacity-80">
+            <div class="source-location-header text-text-secondary text-xs !mb-2.5 text-2xs font-semibold [letter-spacing:0.02em] opacity-80">
               {{ t("rum.stackLine") }} {{ stackTrace.stack[0].source_info.stack_line }}:{{ stackTrace.stack[0].source_info.stack_col }}
               <span class="ml-1">
                 ({{ t("rum.stackLines") }} {{ stackTrace.stack[0].source_info.source_line_start }}-{{ stackTrace.stack[0].source_info.source_line_end }})
@@ -146,7 +143,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </div>
 
             <!-- Source code snippet with syntax highlighting -->
-            <div class="source-code-box border border-solid rounded-md h-[200px] overflow-hidden [box-shadow:0_2px_6px_rgba(0,0,0,0.1)]" :style="{ 'border-color': borderColor }">
+            <div class="source-code-box border border-solid rounded-default h-50 overflow-hidden [box-shadow:0_2px_6px_rgba(0,0,0,0.1)]" :style="{ 'border-color': borderColor }">
               <CodeQueryEditor
                 :ref="(el: any) => setEditorRef(traceIndex, 0, el)"
                 :editor-id="`source-frame-${traceIndex}-0`"
@@ -162,7 +159,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- Remaining frames - collapsed by default -->
         <div
           v-if="stackTrace.stack.length > 1"
-          class="remaining-frames rounded-b-md [box-shadow:0_1px_3px_rgba(0,0,0,0.08)]"
+          class="remaining-frames rounded-b-default [box-shadow:0_1px_3px_rgba(0,0,0,0.08)]"
           :style="{
             'border-bottom': `1px solid ${borderColor}`,
             'border-left': `1px solid ${borderColor}`,
@@ -174,7 +171,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- Show more button - only visible when frames are hidden -->
           <div
             v-if="!expandedTraces[traceIndex]"
-            class="show-more-button px-3 py-2 cursor-pointer flex items-center gap-[6px] transition-all duration-200 ease-in-out !px-4 !py-[10px] text-xs font-medium"
+            class="show-more-button px-3 py-2 cursor-pointer flex items-center gap-1.5 transition-all duration-200 ease-in-out !px-4 !py-2.5 text-xs font-medium hover:bg-surface-subtle"
             :style="{ 'border-top': `1px solid ${borderColor}` }"
             @click="showFrames(traceIndex)"
           >
@@ -183,7 +180,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               size="xs"
               class="mr-1"
             />
-            <span class="text-xs text-gray-400">
+            <span class="text-xs text-text-secondary">
               {{
                 stackTrace.stack.length - 1 > 1
                   ? t("rum.showMoreFrames", { count: stackTrace.stack.length - 1 })
@@ -202,7 +199,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             >
               <!-- Frame header - clickable -->
               <div
-                class="collapsed-frame-header px-3 py-1 cursor-pointer transition-all duration-200 ease-in-out !px-4 !py-[10px]"
+                class="collapsed-frame-header px-3 py-1 cursor-pointer transition-all duration-200 ease-in-out !px-4 !py-2.5 hover:bg-surface-subtle"
                 :style="{ 'background-color': backgroundColor }"
                 @click="toggleFrame(traceIndex, frameIndex + 1)"
               >
@@ -210,12 +207,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   <OIcon
                     :name="isFrameExpanded(traceIndex, frameIndex + 1) ? 'expand-more' : 'chevron-right'"
                     size="xs"
-                    class="mr-1 text-gray-400"
+                    class="mr-1 text-icon-color"
                   />
                   <div
                     v-if="frame.line"
                     data-test="rum-pretty-stack-trace-frame-line"
-                    class="stack-line-collapsed [font-family:'SF_Mono','Monaco','Inconsolata','Fira_Code','Droid_Sans_Mono',monospace] text-[11.5px] [line-height:1.5] break-all flex-1 opacity-85"
+                    class="stack-line-collapsed font-mono text-2xs [line-height:1.5] break-all flex-1 opacity-85"
                     :style="{ color: mutedTextColor }"
                   >
                     {{ frame.line }}
@@ -226,17 +223,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <!-- Expandable source code context -->
               <div
                 v-if="isFrameExpanded(traceIndex, frameIndex + 1) && frame.source_info"
-                class="source-context !px-4 !pb-4 !pt-0"
-                :style="{ 'background-color': isDarkMode ? '#0d0d0d' : '#f8f9fa' }"
+                class="source-context !px-4 !pb-4 !pt-0 bg-code-block-bg"
               >
-                <div class="source-location-header text-gray-400 text-xs !mb-[10px] ml-4 text-[11px] font-semibold [letter-spacing:0.02em] opacity-80">
+                <div class="source-location-header text-text-secondary text-xs !mb-2.5 ml-4 text-2xs font-semibold [letter-spacing:0.02em] opacity-80">
                   {{ t("rum.stackLine") }} {{ frame.source_info.stack_line }}:{{ frame.source_info.stack_col }}
                   <span class="ml-1">
                     ({{ t("rum.stackLines") }} {{ frame.source_info.source_line_start }}-{{ frame.source_info.source_line_end }})
                   </span>
                 </div>
 
-                <div class="source-code-box ml-4 border border-solid rounded-md h-[200px] overflow-hidden [box-shadow:0_2px_6px_rgba(0,0,0,0.1)]" :style="{ 'border-color': borderColor }">
+                <div class="source-code-box ml-4 border border-solid rounded-default h-50 overflow-hidden [box-shadow:0_2px_6px_rgba(0,0,0,0.1)]" :style="{ 'border-color': borderColor }">
                   <CodeQueryEditor
                     :ref="(el: any) => setEditorRef(traceIndex, frameIndex + 1, el)"
                     :editor-id="`source-frame-${traceIndex}-${frameIndex + 1}`"
@@ -254,8 +250,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </div>
 
     <!-- Error state -->
-    <div v-else data-test="rum-pretty-stack-trace-error" class="p-3 text-center text-gray-400">
-      <div v-if="translationError" class="text-red-500">
+    <div v-else data-test="rum-pretty-stack-trace-error" class="p-3 text-center text-text-muted">
+      <div v-if="translationError" class="text-status-error-text">
         {{ translationError }}
       </div>
       <div v-else>
@@ -286,15 +282,14 @@ const store = useStore();
 const router = useRouter();
 const { t } = useI18n();
 
-const isDarkMode = computed(() => store.state.theme === "dark");
-
-const borderColor = computed(() => isDarkMode.value ? "#424242" : "#e0e0e0");
-const backgroundColor = computed(() => isDarkMode.value ? "#1e1e1e" : "#fafafa");
-const hoverBackgroundColor = computed(() => isDarkMode.value ? "#2a2a2a" : "#f0f0f0");
-const errorHeaderBackground = computed(() => isDarkMode.value ? "#3e2723" : "#fff3e0");
-const errorHeaderColor = computed(() => isDarkMode.value ? "#ff6b6b" : "#d32f2f");
-const textColor = computed(() => isDarkMode.value ? "#e0e0e0" : "#333");
-const mutedTextColor = computed(() => isDarkMode.value ? "#b0b0b0" : "#666");
+// Theme-reactive colors as CSS custom properties — the browser resolves them per
+// theme (light/dark) via dark.css, so no JS theme read is needed here.
+const borderColor = "var(--color-border-default)";
+const backgroundColor = "var(--color-surface-base)";
+const errorHeaderBackground = "var(--color-banner-warning-bg)";
+const errorHeaderColor = "var(--color-status-error-text)";
+const textColor = "var(--color-text-body)";
+const mutedTextColor = "var(--color-text-secondary)";
 
 const props = defineProps({
   error_stack: {
@@ -566,17 +561,3 @@ watch(
   }
 );
 </script>
-
-<style>
-.pretty-stack-container .stack-frame-wrapper .frame-header:hover {
-  background-color: v-bind(hoverBackgroundColor);
-}
-
-.pretty-stack-container .remaining-frames .show-more-button:hover {
-  background-color: v-bind(hoverBackgroundColor);
-}
-
-.pretty-stack-container .remaining-frames .collapsed-frame-wrapper .collapsed-frame-header:hover {
-  background-color: v-bind(hoverBackgroundColor);
-}
-</style>
diff --git a/web/src/components/rum/performance/ErrorsDashboard.vue b/web/src/components/rum/performance/ErrorsDashboard.vue
index 947e63979f..e9168c9295 100644
--- a/web/src/components/rum/performance/ErrorsDashboard.vue
+++ b/web/src/components/rum/performance/ErrorsDashboard.vue
@@ -17,7 +17,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <!-- eslint-disable vue/v-on-event-hyphenation -->
 <!-- eslint-disable vue/attribute-hyphenation -->
 <template>
-  <div data-test="performance-error-dashboard" class="rounded-md relative-position">
+  <div data-test="performance-error-dashboard" class="rounded-default relative-position">
     <div
       class="min-h-0! max-h-[calc(100vh-200px)] overflow-y-auto"
       :class="isLoading.length ? 'invisible' : 'visible'"
diff --git a/web/src/components/rum/performance/PerformanceSummary.vue b/web/src/components/rum/performance/PerformanceSummary.vue
index 7cdba14650..503cf58baa 100644
--- a/web/src/components/rum/performance/PerformanceSummary.vue
+++ b/web/src/components/rum/performance/PerformanceSummary.vue
@@ -32,7 +32,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         @variablesManagerReady="onVariablesManagerReady"
       >
         <template v-slot:before_panels>
-          <div class="flex items-center q-pb pt-3 text-base font-medium font-bold">
+          <div class="flex items-center pt-3 text-base font-medium font-bold">
             <div class="text-center w-[25%]">
               {{ t("rum.webVitalsLabel") }}
             </div>
diff --git a/web/src/components/rum/performance/WebVitalsDashboard.spec.ts.backup b/web/src/components/rum/performance/WebVitalsDashboard.spec.ts.backup
deleted file mode 100644
index 6f856c006f..0000000000
--- a/web/src/components/rum/performance/WebVitalsDashboard.spec.ts.backup
+++ /dev/null
@@ -1,1306 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { mount, flushPromises } from "@vue/test-utils";
-import WebVitalsDashboard from "./WebVitalsDashboard.vue";
-import { createI18n } from "vue-i18n";
-import { createStore } from "vuex";
-import { nextTick, ref } from "vue";
-
-// vi.mock("@/utils/date", () => ({
-//   parseDuration: vi.fn((duration) => {
-//     if (duration === "15m") return 15;
-//     if (duration === "1h") return 60;
-//     if (duration === "6h") return 360;
-//     return 0;
-//   }),
-//   generateDurationLabel: vi.fn((duration) => {
-//     if (duration === 15) return "15m";
-//     if (duration === 60) return "1h";
-//     if (duration === 360) return "6h";
-//     return "0s";
-//   }),
-//   getDurationObjectFromParams: vi.fn((params) => ({
-//     startTime: params.from || "2023-01-01T00:00:00Z",
-//     endTime: params.to || "2023-01-02T00:00:00Z",
-//     relativeTimePeriod: params.period,
-//   })),
-// }));
-
-vi.mock("@/utils/dashboard/convertDashboardSchemaVersion", () => ({
-  convertDashboardSchemaVersion: vi.fn((data) => data),
-}));
-
-vi.mock("@/utils/rum/web_vitals.json", () => ({
-  default: {
-    version: 2,
-    title: "Web Vitals Dashboard",
-    panels: [
-      { id: "panel1", title: "LCP" },
-      { id: "panel2", title: "FID" },
-      { id: "panel3", title: "CLS" },
-    ],
-  },
-}));
-
-// Create mock router functions
-const mockRouterPush = vi.fn();
-const mockRouterReplace = vi.fn();
-
-// Mock vue-router
-vi.mock("vue-router", () => ({
-  useRoute: () => ({
-    query: {
-      dashboard: "web-vitals-dashboard",
-      folder: "rum",
-      refresh: "15m",
-      period: "1h",
-    },
-  }),
-  useRouter: () => ({
-    push: mockRouterPush,
-    replace: mockRouterReplace,
-  }),
-}));
-
-vi.mock("@/views/Dashboards/RenderDashboardCharts.vue", () => ({
-  default: {
-    name: "RenderDashboardCharts",
-    template:
-      '<div class="render-dashboard-charts">Mock Web Vitals Charts</div>',
-    props: ["viewOnly", "dashboardData", "currentTimeObj", "searchType"],
-    methods: {
-      layoutUpdate: vi.fn(),
-    },
-  },
-}));
-
-
-const mockStore = createStore({
-  state: {
-    selectedOrganization: {
-      identifier: "test-org",
-    },
-    theme: "light",
-  },
-});
-
-const mockRouter = {
-  push: vi.fn(),
-  replace: vi.fn(),
-};
-
-const mockI18n = createI18n({
-  locale: "en",
-  messages: {
-    en: {
-      rum: {
-        learnWebVitalsLabel: "Learn about Web Vitals:",
-        clickHereLabel: "Click here",
-      },
-    },
-  },
-});
-
-describe("WebVitalsDashboard.vue", () => {
-  let wrapper: any;
-  let mockConvertDashboardSchemaVersion: any;
-  let mockGetDashboard: any;
-  let mockParseDuration: any;
-  let mockGenerateDurationLabel: any;
-
-  // Helper function to mount component with default options
-  const mountComponent = (props = {}, options = {}) => {
-    return mount(WebVitalsDashboard, {
-      props,
-      global: {
-        plugins: [mockI18n],
-        provide: {
-          store: mockStore,
-        },
-        mocks: {
-          $store: mockStore,
-          $router: mockRouter,
-          $route: { query: {} },
-        },
-        ...options.global,
-      },
-      ...options,
-    });
-  };
-
-  beforeEach(async () => {
-    vi.clearAllMocks();
-
-    // Setup mocks
-    const { convertDashboardSchemaVersion } = await import(
-      "@/utils/dashboard/convertDashboardSchemaVersion"
-    );
-    mockConvertDashboardSchemaVersion = vi.mocked(
-      convertDashboardSchemaVersion,
-    );
-
-    const { getDashboard } = await import("@/utils/commons.ts");
-    mockGetDashboard = vi.mocked(getDashboard);
-
-    const { parseDuration, generateDurationLabel } = await import(
-      "@/utils/date"
-    );
-    mockParseDuration = vi.mocked(parseDuration);
-    mockGenerateDurationLabel = vi.mocked(generateDurationLabel);
-
-    // Clear router mocks
-    mockRouterPush.mockClear();
-    mockRouterReplace.mockClear();
-
-    // Mock window methods
-    Object.defineProperty(window, "dispatchEvent", {
-      value: vi.fn(),
-      writable: true,
-    });
-
-    // Mount component with default setup for most tests
-    wrapper = mountComponent();
-  });
-
-  afterEach(() => {
-    if (wrapper) {
-      wrapper.unmount();
-    }
-    vi.restoreAllMocks();
-  });
-
-  describe("Component Mounting", () => {
-    it("should mount successfully with default props", async () => {
-      // Component is already mounted in beforeEach
-      await nextTick();
-      expect(wrapper.exists()).toBe(true);
-      expect(wrapper.find(".performance-dashboard").exists()).toBe(true);
-    });
-
-    it("should have correct component name", () => {
-      // Component is already mounted in beforeEach
-      expect(wrapper.vm.$options.name).toBe("WebVitalsDashboard");
-    });
-
-    it("should mount with custom dateTime prop", async () => {
-      const customDateTime = {
-        start_time: new Date("2023-01-01"),
-        end_time: new Date("2023-01-02"),
-      };
-
-      const customWrapper = mountComponent({ dateTime: customDateTime });
-      expect(customWrapper.props("dateTime")).toEqual(customDateTime);
-      customWrapper.unmount();
-    });
-  });
-
-  describe("Web Vitals Info Banner", () => {
-    it("should render learn web vitals info banner", () => {
-      const banner = wrapper.find(".learn-web-vitals-link");
-      expect(banner.exists()).toBe(true);
-      expect(banner.text()).toContain("Learn about Web Vitals:");
-      expect(banner.text()).toContain("Click here");
-    });
-
-    it("should have correct banner styling for light theme", () => {
-      mockStore.state.theme = "light";
-
-      wrapper = mount(WebVitalsDashboard, {
-        global: {
-          plugins: [mockI18n],
-          provide: {
-            store: mockStore,
-          },
-          mocks: {
-            $store: mockStore,
-            $router: mockRouter,
-            $route: { query: {} },
-          },
-        },
-      });
-
-      const banner = wrapper.find(".learn-web-vitals-link");
-      expect(banner.classes()).toContain("bg-indigo-2");
-
-      const link = banner.find("a");
-      expect(link.classes()).toContain("text-dark");
-    });
-
-    it("should have correct banner styling for dark theme", async () => {
-      mockStore.state.theme = "dark";
-
-      wrapper = mount(WebVitalsDashboard, {
-        global: {
-          plugins: [mockI18n],
-          provide: {
-            store: mockStore,
-          },
-          mocks: {
-            $store: mockStore,
-            $router: mockRouter,
-            $route: { query: {} },
-          },
-        },
-      });
-
-      await nextTick();
-
-      const banner = wrapper.find(".learn-web-vitals-link");
-      expect(banner.classes()).toContain("bg-indigo-7");
-
-      const link = banner.find("a");
-      expect(link.classes()).toContain("text-white");
-    });
-
-    it("should have external link with correct attributes", () => {
-      wrapper = mount(WebVitalsDashboard, {
-        global: {
-          plugins: [mockI18n],
-          provide: {
-            store: mockStore,
-          },
-          mocks: {
-            $store: mockStore,
-            $router: mockRouter,
-            $route: { query: {} },
-          },
-        },
-      });
-
-      const link = wrapper.find('a[href="https://web.dev/articles/vitals"]');
-      expect(link.exists()).toBe(true);
-      expect(link.attributes("target")).toBe("_blank");
-      expect(link.attributes("title")).toBe("https://web.dev/articles/vitals");
-    });
-
-    it("should render info icon in banner", () => {
-      wrapper = mount(WebVitalsDashboard, {
-        global: {
-          plugins: [mockI18n],
-          provide: {
-            store: mockStore,
-          },
-          mocks: {
-            $store: mockStore,
-            $router: mockRouter,
-            $route: { query: {} },
-          },
-          stubs: {
-            "q-icon": {
-              template: '<i class="q-icon" />',
-              props: ["name", "size"],
-            },
-          },
-        },
-      });
-
-      const icon = wrapper.find(".q-icon");
-      expect(icon.exists()).toBe(true);
-    });
-  });
-
-  describe("Dashboard Loading", () => {
-    it("should call loadDashboard on mount", async () => {
-      wrapper = mount(WebVitalsDashboard, {
-        global: {
-          plugins: [mockI18n],
-          provide: {
-            store: mockStore,
-          },
-          mocks: {
-            $store: mockStore,
-            $router: mockRouter,
-            $route: { query: {} },
-          },
-        },
-      });
-
-      await nextTick();
-      expect(mockConvertDashboardSchemaVersion).toHaveBeenCalled();
-    });
-
-    it("should load dashboard data correctly", async () => {
-      wrapper = mount(WebVitalsDashboard, {
-        global: {
-          plugins: [mockI18n],
-          provide: {
-            store: mockStore,
-          },
-          mocks: {
-            $store: mockStore,
-            $router: mockRouter,
-            $route: { query: {} },
-          },
-        },
-      });
-
-      await wrapper.vm.loadDashboard();
-      expect(mockConvertDashboardSchemaVersion).toHaveBeenCalled();
-      expect(wrapper.vm.currentDashboardData.data).toBeDefined();
-    });
-
-    it("should handle variables data when dashboard has no variables", async () => {
-      mockConvertDashboardSchemaVersion.mockReturnValue({
-        panels: [],
-        variables: null,
-      });
-
-      wrapper = mount(WebVitalsDashboard, {
-        global: {
-          plugins: [mockI18n],
-          provide: {
-            store: mockStore,
-          },
-          mocks: {
-            $store: mockStore,
-            $router: mockRouter,
-            $route: { query: {} },
-          },
-        },
-      });
-
-      await wrapper.vm.loadDashboard();
-
-      expect(wrapper.vm.variablesData.isVariablesLoading).toBe(false);
-      expect(wrapper.vm.variablesData.values).toEqual([]);
-    });
-
-    it("should handle existing variables data", async () => {
-      const mockDashboardWithVars = {
-        variables: {
-          list: [{ name: "service", value: "frontend" }],
-        },
-      };
-      mockConvertDashboardSchemaVersion.mockReturnValue(mockDashboardWithVars);
-
-      wrapper = mount(WebVitalsDashboard, {
-        global: {
-          plugins: [mockI18n],
-          provide: {
-            store: mockStore,
-          },
-          mocks: {
-            $store: mockStore,
-            $router: mockRouter,
-            $route: { query: {} },
-          },
-        },
-      });
-
-      await wrapper.vm.loadDashboard();
-
-      expect(wrapper.vm.currentDashboardData.data).toEqual(
-        mockDashboardWithVars,
-      );
-    });
-  });
-
-  describe("Component Layout", () => {
-    it("should execute updateLayout correctly", async () => {
-      wrapper = mount(WebVitalsDashboard, {
-        global: {
-          plugins: [mockI18n],
-          provide: {
-            store: mockStore,
-          },
-          mocks: {
-            $store: mockStore,
-            $router: mockRouter,
-            $route: { query: {} },
-          },
-        },
-      });
-
-      expect(typeof wrapper.vm.updateLayout).toBe("function");
-
-      await wrapper.vm.updateLayout();
-      expect(window.dispatchEvent).toHaveBeenCalledWith(expect.any(Event));
-    });
-
-    it("should handle updateLayout with null ref gracefully", async () => {
-      wrapper = mount(WebVitalsDashboard, {
-        global: {
-          plugins: [mockI18n],
-          provide: {
-            store: mockStore,
-          },
-          mocks: {
-            $store: mockStore,
-            $router: mockRouter,
-            $route: { query: {} },
-          },
-        },
-      });
-
-      wrapper.vm.webVitalsChartsRef = null;
-
-      await wrapper.vm.updateLayout();
-      expect(true).toBe(true); // Test passes if no error is thrown
-    });
-  });
-
-  describe("Loading States", () => {
-    it("should show loading spinner when isLoading has items", async () => {
-      wrapper = mount(WebVitalsDashboard, {
-        global: {
-          plugins: [mockI18n],
-          provide: {
-            store: mockStore,
-          },
-          mocks: {
-            $store: mockStore,
-            $router: mockRouter,
-            $route: { query: {} },
-          },
-          stubs: {
-            "q-spinner-hourglass": true,
-          },
-        },
-      });
-
-      wrapper.vm.isLoading.push("loading");
-      await nextTick();
-
-      expect(wrapper.find("q-spinner-hourglass-stub").exists()).toBe(true);
-      expect(wrapper.text()).toContain("Loading Dashboard");
-    });
-
-    it("should hide loading spinner when isLoading is empty", async () => {
-      wrapper = mount(WebVitalsDashboard, {
-        global: {
-          plugins: [mockI18n],
-          provide: {
-            store: mockStore,
-          },
-          mocks: {
-            $store: mockStore,
-            $router: mockRouter,
-            $route: { query: {} },
-          },
-        },
-      });
-
-      wrapper.vm.isLoading.splice(0);
-      await nextTick();
-
-      const dashboardDiv = wrapper.find(".performance-dashboard");
-      expect(dashboardDiv.attributes("style")).toContain("visibility: visible");
-    });
-
-    it("should hide dashboard when loading", async () => {
-      wrapper = mount(WebVitalsDashboard, {
-        global: {
-          plugins: [mockI18n],
-          provide: {
-            store: mockStore,
-          },
-          mocks: {
-            $store: mockStore,
-            $router: mockRouter,
-            $route: { query: {} },
-          },
-        },
-      });
-
-      wrapper.vm.isLoading.push("dashboard-loading");
-      await nextTick();
-
-      const dashboardDiv = wrapper.find(".performance-dashboard");
-      expect(dashboardDiv.attributes("style")).toContain("visibility: hidden");
-    });
-  });
-
-  describe("RenderDashboardCharts Integration", () => {
-    it("should render RenderDashboardCharts with correct props", async () => {
-      wrapper = mount(WebVitalsDashboard, {
-        global: {
-          plugins: [mockI18n],
-          provide: {
-            store: mockStore,
-          },
-          mocks: {
-            $store: mockStore,
-            $router: mockRouter,
-            $route: { query: {} },
-          },
-        },
-      });
-
-      const dashboardCharts = wrapper.findComponent({
-        name: "RenderDashboardCharts",
-      });
-      expect(dashboardCharts.exists()).toBe(true);
-      expect(dashboardCharts.props("viewOnly")).toBe(true);
-      expect(dashboardCharts.props("searchType")).toBe("RUM");
-    });
-
-    it("should pass dashboard data to RenderDashboardCharts", async () => {
-      const testDashboardData = {
-        title: "Test Web Vitals Dashboard",
-        panels: [{ id: "panel1", title: "LCP" }],
-      };
-
-      wrapper = mount(WebVitalsDashboard, {
-        global: {
-          plugins: [mockI18n],
-          provide: {
-            store: mockStore,
-          },
-          mocks: {
-            $store: mockStore,
-            $router: mockRouter,
-            $route: { query: {} },
-          },
-        },
-      });
-
-      wrapper.vm.currentDashboardData.data = testDashboardData;
-      await nextTick();
-
-      const dashboardCharts = wrapper.findComponent({
-        name: "RenderDashboardCharts",
-      });
-      expect(dashboardCharts.props("dashboardData")).toEqual(testDashboardData);
-    });
-
-    it("should pass dateTime prop to RenderDashboardCharts", async () => {
-      const customDateTime = {
-        start_time: new Date("2023-01-01"),
-        end_time: new Date("2023-01-02"),
-      };
-
-      wrapper = mount(WebVitalsDashboard, {
-        props: {
-          dateTime: customDateTime,
-        },
-        global: {
-          plugins: [mockI18n],
-          provide: {
-            store: mockStore,
-          },
-          mocks: {
-            $store: mockStore,
-            $router: mockRouter,
-            $route: { query: {} },
-          },
-        },
-      });
-
-      const dashboardCharts = wrapper.findComponent({
-        name: "RenderDashboardCharts",
-      });
-      expect(dashboardCharts.props("currentTimeObj")).toEqual(customDateTime);
-    });
-  });
-
-  describe("Navigation Functions", () => {
-    it("should navigate back to dashboard list", async () => {
-      wrapper = mount(WebVitalsDashboard, {
-        global: {
-          plugins: [mockI18n],
-          provide: {
-            store: mockStore,
-          },
-          mocks: {
-            $store: mockStore,
-            $router: mockRouter,
-            $route: {
-              query: {
-                dashboard: "web-vitals-dashboard",
-                folder: "rum",
-              },
-            },
-          },
-        },
-      });
-
-      await wrapper.vm.goBackToDashboardList();
-
-      expect(mockRouterPush).toHaveBeenCalledWith({
-        path: "/dashboards",
-        query: {
-          dashboard: "web-vitals-dashboard",
-          folder: "rum",
-        },
-      });
-    });
-
-    it("should navigate back to dashboard list with default folder", async () => {
-      wrapper = mount(WebVitalsDashboard, {
-        global: {
-          plugins: [mockI18n],
-          provide: {
-            store: mockStore,
-          },
-          mocks: {
-            $store: mockStore,
-            $router: mockRouter,
-            $route: {
-              query: {
-                dashboard: "web-vitals-dashboard",
-              },
-            },
-          },
-        },
-      });
-
-      await wrapper.vm.goBackToDashboardList();
-
-      expect(mockRouterPush).toHaveBeenCalledWith({
-        path: "/dashboards",
-        query: {
-          dashboard: "web-vitals-dashboard",
-          folder: "rum",
-        },
-      });
-    });
-
-    it("should navigate to add panel page", async () => {
-      wrapper = mount(WebVitalsDashboard, {
-        global: {
-          plugins: [mockI18n],
-          provide: {
-            store: mockStore,
-          },
-          mocks: {
-            $store: mockStore,
-            $router: mockRouter,
-            $route: {
-              query: {
-                dashboard: "web-vitals-dashboard",
-                folder: "rum",
-              },
-            },
-          },
-        },
-      });
-
-      await wrapper.vm.addPanelData();
-
-      expect(mockRouterPush).toHaveBeenCalledWith({
-        path: "/dashboards/add_panel",
-        query: {
-          dashboard: "web-vitals-dashboard",
-          folder: "rum",
-        },
-      });
-    });
-
-    it("should navigate to add panel page with default folder", async () => {
-      wrapper = mount(WebVitalsDashboard, {
-        global: {
-          plugins: [mockI18n],
-          provide: {
-            store: mockStore,
-          },
-          mocks: {
-            $store: mockStore,
-            $router: mockRouter,
-            $route: {
-              query: {
-                dashboard: "web-vitals-dashboard",
-              },
-            },
-          },
-        },
-      });
-
-      await wrapper.vm.addPanelData();
-
-      expect(mockRouterPush).toHaveBeenCalledWith({
-        path: "/dashboards/add_panel",
-        query: {
-          dashboard: "web-vitals-dashboard",
-          folder: "rum",
-        },
-      });
-    });
-  });
-
-  describe("Variables Data", () => {
-    it("should update variables data correctly", async () => {
-      wrapper = mount(WebVitalsDashboard, {
-        global: {
-          plugins: [mockI18n],
-          provide: {
-            store: mockStore,
-          },
-          mocks: {
-            $store: mockStore,
-            $router: mockRouter,
-            $route: { query: {} },
-          },
-        },
-      });
-
-      const testVariablesData = {
-        values: [
-          { name: "service", value: "frontend" },
-          { name: "environment", value: "production" },
-        ],
-      };
-
-      wrapper.vm.variablesDataUpdated(testVariablesData);
-
-      expect(wrapper.vm.variablesData).toMatchObject(testVariablesData);
-    });
-
-    it("should handle empty variables data", async () => {
-      wrapper = mount(WebVitalsDashboard, {
-        global: {
-          plugins: [mockI18n],
-          provide: {
-            store: mockStore,
-          },
-          mocks: {
-            $store: mockStore,
-            $router: mockRouter,
-            $route: { query: {} },
-          },
-        },
-      });
-
-      const emptyVariablesData = { values: [] };
-
-      wrapper.vm.variablesDataUpdated(emptyVariablesData);
-
-      expect(wrapper.vm.variablesData).toMatchObject(emptyVariablesData);
-    });
-  });
-
-  describe("Settings Dialog", () => {
-    it("should open settings dialog", () => {
-      wrapper = mount(WebVitalsDashboard, {
-        global: {
-          plugins: [mockI18n],
-          provide: {
-            store: mockStore,
-          },
-          mocks: {
-            $store: mockStore,
-            $router: mockRouter,
-            $route: { query: {} },
-          },
-        },
-      });
-
-      expect(wrapper.vm.showDashboardSettingsDialog).toBe(false);
-      wrapper.vm.addSettingsData();
-      expect(wrapper.vm.showDashboardSettingsDialog).toBe(true);
-    });
-  });
-
-  describe("Filter Function", () => {
-    it("should filter data correctly", () => {
-      wrapper = mount(WebVitalsDashboard, {
-        global: {
-          plugins: [mockI18n],
-          provide: {
-            store: mockStore,
-          },
-          mocks: {
-            $store: mockStore,
-            $router: mockRouter,
-            $route: { query: {} },
-          },
-        },
-      });
-
-      const testData = [
-        { name: "Frontend Service" },
-        { name: "Backend API" },
-        { name: "Database Service" },
-      ];
-
-      const filteredResults = wrapper.vm.filterData(testData, "frontend");
-
-      expect(filteredResults).toHaveLength(1);
-      expect(filteredResults[0].name).toBe("Frontend Service");
-    });
-
-    it("should handle case insensitive filtering", () => {
-      wrapper = mount(WebVitalsDashboard, {
-        global: {
-          plugins: [mockI18n],
-          provide: {
-            store: mockStore,
-          },
-          mocks: {
-            $store: mockStore,
-            $router: mockRouter,
-            $route: { query: {} },
-          },
-        },
-      });
-
-      const testData = [
-        { name: "Frontend Service" },
-        { name: "BACKEND API" },
-        { name: "database service" },
-      ];
-
-      const filteredResults = wrapper.vm.filterData(testData, "SERVICE");
-
-      expect(filteredResults).toHaveLength(2);
-      expect(filteredResults.map((r) => r.name)).toContain("Frontend Service");
-      expect(filteredResults.map((r) => r.name)).toContain("database service");
-    });
-
-    it("should return empty array when no matches found", () => {
-      wrapper = mount(WebVitalsDashboard, {
-        global: {
-          plugins: [mockI18n],
-          provide: {
-            store: mockStore,
-          },
-          mocks: {
-            $store: mockStore,
-            $router: mockRouter,
-            $route: { query: {} },
-          },
-        },
-      });
-
-      const testData = [{ name: "Frontend Service" }, { name: "Backend API" }];
-
-      const filteredResults = wrapper.vm.filterData(testData, "nonexistent");
-
-      expect(filteredResults).toHaveLength(0);
-    });
-  });
-
-  describe("Query Params and Watchers", () => {
-    it("should update router query when refreshInterval changes", async () => {
-      wrapper = mount(WebVitalsDashboard, {
-        global: {
-          plugins: [mockI18n],
-          provide: {
-            store: mockStore,
-          },
-          mocks: {
-            $store: mockStore,
-            $router: mockRouter,
-            $route: {
-              query: {
-                dashboard: "web-vitals-dashboard",
-                folder: "rum",
-              },
-            },
-          },
-        },
-      });
-
-      wrapper.vm.selectedDate = {
-        tab: "relative",
-        relative: { value: 1, period: "days" },
-        absolute: {
-          date: {
-            from: "2025-01-01",
-            to: "2025-01-02",
-          },
-        },
-      };
-
-      await nextTick();
-      await nextTick();
-      mockRouterReplace.mockClear();
-      wrapper.vm.refreshInterval = 60;
-
-      expect(mockRouterReplace).toHaveBeenCalled();
-    });
-
-    it("should update router query when selectedDate changes", async () => {
-      wrapper = mount(WebVitalsDashboard, {
-        global: {
-          plugins: [mockI18n],
-          provide: {
-            store: mockStore,
-          },
-          mocks: {
-            $store: mockStore,
-            $router: mockRouter,
-            $route: {
-              query: {
-                dashboard: "web-vitals-dashboard",
-                folder: "rum",
-              },
-            },
-          },
-        },
-      });
-
-      wrapper.vm.selectedDate = {
-        tab: "relative",
-        relative: { value: 1, period: "days" },
-        absolute: {
-          date: {
-            from: "2025-01-01",
-            to: "2025-01-02",
-          },
-        },
-      };
-
-      await nextTick();
-      await nextTick();
-
-      mockRouterReplace.mockClear();
-
-      const newSelectedDate = {
-        tab: "absolute",
-        relative: { value: 1, period: "days" },
-        absolute: {
-          from: "2025-01-01",
-          to: "2025-01-02",
-          startTime: "00:00:00",
-          endTime: "00:00:00",
-        },
-      };
-
-      wrapper.vm.selectedDate = newSelectedDate;
-      await nextTick();
-      await nextTick();
-
-      expect(mockRouterReplace).toHaveBeenCalled();
-    });
-  });
-
-  describe("Component Properties", () => {
-    it("should have all required reactive properties", () => {
-      wrapper = mount(WebVitalsDashboard, {
-        global: {
-          plugins: [mockI18n],
-          provide: {
-            store: mockStore,
-          },
-          mocks: {
-            $store: mockStore,
-            $router: mockRouter,
-            $route: { query: {} },
-          },
-        },
-      });
-
-      expect(wrapper.vm.currentDashboardData).toBeDefined();
-      expect(wrapper.vm.showDashboardSettingsDialog).toBe(false);
-      expect(wrapper.vm.viewOnly).toBe(true);
-      expect(wrapper.vm.eventLog).toEqual([]);
-      expect(wrapper.vm.refDateTime).toBe(null);
-      expect(wrapper.vm.refreshInterval).toBe(0);
-      expect(wrapper.vm.selectedDate).toBeDefined();
-      expect(wrapper.vm.isLoading).toEqual([]);
-      expect(wrapper.vm.variablesData).toBeDefined();
-    });
-
-    it("should expose all required methods", () => {
-      wrapper = mount(WebVitalsDashboard, {
-        global: {
-          plugins: [mockI18n],
-          provide: {
-            store: mockStore,
-          },
-          mocks: {
-            $store: mockStore,
-            $router: mockRouter,
-            $route: { query: {} },
-          },
-        },
-      });
-
-      expect(typeof wrapper.vm.loadDashboard).toBe("function");
-      expect(typeof wrapper.vm.updateLayout).toBe("function");
-      expect(typeof wrapper.vm.goBackToDashboardList).toBe("function");
-      expect(typeof wrapper.vm.addPanelData).toBe("function");
-      expect(typeof wrapper.vm.variablesDataUpdated).toBe("function");
-      expect(typeof wrapper.vm.addSettingsData).toBe("function");
-      expect(typeof wrapper.vm.filterData).toBe("function");
-    });
-
-    it("should have access to store and utilities", () => {
-      wrapper = mount(WebVitalsDashboard, {
-        global: {
-          plugins: [mockI18n],
-          provide: {
-            store: mockStore,
-          },
-          mocks: {
-            $store: mockStore,
-            $router: mockRouter,
-            $route: { query: {} },
-          },
-        },
-      });
-
-      expect(wrapper.vm.store).toBeDefined();
-      expect(wrapper.vm.store.state.selectedOrganization.identifier).toBe(
-        "test-org",
-      );
-      expect(typeof wrapper.vm.t).toBe("function");
-      expect(wrapper.vm.getDashboard).toBeDefined();
-    });
-  });
-
-  describe("Default Props", () => {
-    it("should use default props when none provided", () => {
-      wrapper = mount(WebVitalsDashboard, {
-        global: {
-          plugins: [mockI18n],
-          provide: {
-            store: mockStore,
-          },
-          mocks: {
-            $store: mockStore,
-            $router: mockRouter,
-            $route: { query: {} },
-          },
-        },
-      });
-
-      expect(wrapper.props("dateTime")).toEqual({});
-    });
-
-    it("should validate props correctly", () => {
-      const validDateTime = {
-        start_time: new Date(),
-        end_time: new Date(),
-      };
-
-      wrapper = mount(WebVitalsDashboard, {
-        props: {
-          dateTime: validDateTime,
-        },
-        global: {
-          plugins: [mockI18n],
-          provide: {
-            store: mockStore,
-          },
-          mocks: {
-            $store: mockStore,
-            $router: mockRouter,
-            $route: { query: {} },
-          },
-        },
-      });
-
-      expect(wrapper.props("dateTime")).toEqual(validDateTime);
-    });
-  });
-
-  describe("Component Lifecycle", () => {
-    it("should call loadDashboard and updateLayout on mount", async () => {
-      wrapper = mount(WebVitalsDashboard, {
-        global: {
-          plugins: [mockI18n],
-          provide: {
-            store: mockStore,
-          },
-          mocks: {
-            $store: mockStore,
-            $router: mockRouter,
-            $route: { query: {} },
-          },
-        },
-      });
-
-      await nextTick();
-
-      expect(mockConvertDashboardSchemaVersion).toHaveBeenCalled();
-      expect(window.dispatchEvent).toHaveBeenCalledWith(expect.any(Event));
-    });
-
-    it("should call updateLayout on activated", async () => {
-      wrapper = mount(WebVitalsDashboard, {
-        global: {
-          plugins: [mockI18n],
-          provide: {
-            store: mockStore,
-          },
-          mocks: {
-            $store: mockStore,
-            $router: mockRouter,
-            $route: { query: {} },
-          },
-        },
-      });
-
-      (window.dispatchEvent as any).mockClear();
-
-      await wrapper.vm.updateLayout();
-
-      expect(window.dispatchEvent).toHaveBeenCalledWith(expect.any(Event));
-    });
-
-    it("should unmount cleanly without errors", () => {
-      wrapper = mount(WebVitalsDashboard, {
-        global: {
-          plugins: [mockI18n],
-          provide: {
-            store: mockStore,
-          },
-          mocks: {
-            $store: mockStore,
-            $router: mockRouter,
-            $route: { query: {} },
-          },
-        },
-      });
-
-      expect(() => wrapper.unmount()).not.toThrow();
-    });
-  });
-
-  describe("Error Handling", () => {
-    it("should handle schema conversion errors gracefully", async () => {
-      mockConvertDashboardSchemaVersion.mockImplementation(() => {
-        throw new Error("Schema conversion failed");
-      });
-
-      expect(() => {
-        wrapper = mount(WebVitalsDashboard, {
-          global: {
-            plugins: [mockI18n],
-            provide: {
-              store: mockStore,
-            },
-            mocks: {
-              $store: mockStore,
-              $router: mockRouter,
-              $route: { query: {} },
-            },
-          },
-        });
-      }).not.toThrow();
-
-      // Reset mock for cleanup
-      mockConvertDashboardSchemaVersion.mockImplementation((data) => data);
-    });
-
-    it("should handle missing webVitalsChartsRef", async () => {
-      wrapper = mount(WebVitalsDashboard, {
-        global: {
-          plugins: [mockI18n],
-          provide: {
-            store: mockStore,
-          },
-          mocks: {
-            $store: mockStore,
-            $router: mockRouter,
-            $route: { query: {} },
-          },
-        },
-      });
-
-      wrapper.vm.webVitalsChartsRef = null;
-
-      expect(async () => {
-        await wrapper.vm.updateLayout();
-      }).not.toThrow();
-    });
-  });
-
-  describe("Integration Tests", () => {
-    it("should perform complete component workflow", async () => {
-      const customProps = {
-        dateTime: {
-          start_time: new Date("2023-01-01"),
-          end_time: new Date("2023-01-02"),
-        },
-      };
-
-      wrapper = mount(WebVitalsDashboard, {
-        props: customProps,
-        global: {
-          plugins: [mockI18n],
-          provide: {
-            store: mockStore,
-          },
-          mocks: {
-            $store: mockStore,
-            $router: mockRouter,
-            $route: {
-              query: {
-                dashboard: "web-vitals-dashboard",
-                folder: "rum",
-                refresh: "15m",
-              },
-            },
-          },
-        },
-      });
-
-      // Verify component mounted
-      expect(wrapper.exists()).toBe(true);
-
-      // Test web vitals banner
-      const banner = wrapper.find(".learn-web-vitals-link");
-      expect(banner.exists()).toBe(true);
-      expect(banner.text()).toContain("Learn about Web Vitals:");
-
-      // Test loadDashboard was called
-      expect(mockConvertDashboardSchemaVersion).toHaveBeenCalled();
-
-      // Test variables data update
-      const variableData = {
-        values: [{ name: "service", value: "frontend" }],
-      };
-      wrapper.vm.variablesDataUpdated(variableData);
-      expect(wrapper.vm.variablesData).toMatchObject(variableData);
-
-      // Test navigation functions
-      await wrapper.vm.goBackToDashboardList();
-      expect(mockRouterPush).toHaveBeenCalledWith({
-        path: "/dashboards",
-        query: {
-          dashboard: "web-vitals-dashboard",
-          folder: "rum",
-        },
-      });
-
-      await wrapper.vm.addPanelData();
-      expect(mockRouterPush).toHaveBeenCalledWith({
-        path: "/dashboards/add_panel",
-        query: {
-          dashboard: "web-vitals-dashboard",
-          folder: "rum",
-        },
-      });
-
-      // Test settings dialog
-      wrapper.vm.addSettingsData();
-      expect(wrapper.vm.showDashboardSettingsDialog).toBe(true);
-
-      // Test layout update
-      await wrapper.vm.updateLayout();
-      expect(window.dispatchEvent).toHaveBeenCalled();
-
-      // Test filter functionality
-      const testData = [{ name: "Frontend" }, { name: "Backend" }];
-      const filtered = wrapper.vm.filterData(testData, "front");
-      expect(filtered).toHaveLength(1);
-
-      // Verify dashboard charts integration
-      const chartsComponent = wrapper.findComponent({
-        name: "RenderDashboardCharts",
-      });
-      expect(chartsComponent.exists()).toBe(true);
-      expect(chartsComponent.props()).toMatchObject({
-        viewOnly: true,
-        searchType: "RUM",
-        currentTimeObj: customProps.dateTime,
-      });
-    });
-  });
-});
diff --git a/web/src/components/rum/performance/WebVitalsDashboard.vue b/web/src/components/rum/performance/WebVitalsDashboard.vue
index 9de5dc382e..61c093e628 100644
--- a/web/src/components/rum/performance/WebVitalsDashboard.vue
+++ b/web/src/components/rum/performance/WebVitalsDashboard.vue
@@ -17,15 +17,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <!-- eslint-disable vue/v-on-event-hyphenation -->
 <!-- eslint-disable vue/attribute-hyphenation -->
 <template>
-  <div class="rounded-md relative-position">
+  <div class="rounded-default relative-position">
     <div
       class="performance-dashboard"
       :class="isLoading.length ? 'invisible' : 'visible'"
     >
       <div
         data-test="learn-web-vitals-link"
-        class="font-bold ml-3 px-2 rounded mt-2 py-1 text-sm w-fit flex items-center"
-        :class="store.state.theme === 'dark' ? 'bg-indigo-7' : 'bg-indigo-2'"
+        class="font-bold ml-3 px-2 rounded-default mt-2 py-1 text-sm w-fit flex items-center bg-badge-indigo-soft-bg"
       >
         <OIcon
           name="info"
@@ -36,9 +35,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <a
           href="https://web.dev/articles/vitals"
           title="https://web.dev/articles/vitals"
-          class="ml-1"
+          class="ml-1 text-badge-indigo-soft-text"
           target="_blank"
-          :class="store.state.theme === 'dark' ? 'text-white' : 'text-gray-800'"
         >
           {{ t("rum.clickHereLabel") }}
         </a>
diff --git a/web/src/components/rum/sessionReplay/SessionActivitySparkline.vue b/web/src/components/rum/sessionReplay/SessionActivitySparkline.vue
index 9022d2b1c6..36ac04708a 100644
--- a/web/src/components/rum/sessionReplay/SessionActivitySparkline.vue
+++ b/web/src/components/rum/sessionReplay/SessionActivitySparkline.vue
@@ -20,7 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <div ref="rootEl" class="min-h-4">
   <small
     v-if="isBounce"
-    class="italic text-[var(--o2-text-muted)]"
+    class="italic text-text-muted"
     data-test="rum-session-activity-bounced"
   >{{ t("rum.noActivityBounced") }}</small>
 
@@ -42,21 +42,27 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       >
         <span
           v-if="bucket.errors > 0 || bucket.frustrations > 0"
-          class="spark-dot mb-[0.0938rem]"
+          class="w-1 h-1 rounded-full shrink-0 mb-[0.0938rem]"
           :class="
-            bucket.errors > 0 ? 'spark-dot--error' : 'spark-dot--frustration'
+            bucket.errors > 0
+              ? 'bg-severity-error-color'
+              : 'bg-severity-warning-color'
           "
           :data-test="`rum-session-activity-dot-${bucket.index}`"
         />
         <span
-          class="spark-bar w-full"
-          :class="bucket.events > 0 ? 'spark-bar--filled' : 'spark-bar--empty'"
+          class="rounded-default w-full"
+          :class="
+            bucket.events > 0
+              ? 'bg-accent opacity-40'
+              : 'bg-card-glass-border opacity-60'
+          "
           :style="{ height: barHeight(bucket.events) }"
         />
       </div>
     </div>
     <small
-      class="text-[var(--o2-text-caption)]"
+      class="text-text-secondary"
       data-test="rum-session-activity-events-text"
     >{{ t("rum.eventsCount", { count: activity.totalEvents }) }}</small>
   </div>
@@ -72,14 +78,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <span
       v-for="index in 24"
       :key="index"
-      class="spark-bar spark-bar--empty w-1.5"
+      class="rounded-default bg-card-glass-border opacity-60 w-1.5"
       :style="{ height: `${20 + ((index * 7) % 60)}%` }"
     />
   </div>
 
   <span
     v-else
-    class="text-[var(--o2-text-muted)]"
+    class="text-text-muted"
     data-test="rum-session-activity-empty"
   >—</span>
   </div>
@@ -176,33 +182,3 @@ const ariaLabel = computed(() => {
 });
 </script>
 
-<style scoped lang="scss">
-.spark-bar {
-  border-radius: 0.0625rem;
-
-  &--filled {
-    background: var(--o2-primary-color);
-    opacity: 0.4;
-  }
-
-  &--empty {
-    background: var(--o2-border-color);
-    opacity: 0.6;
-  }
-}
-
-.spark-dot {
-  width: 0.25rem;
-  height: 0.25rem;
-  border-radius: 9999px;
-  flex-shrink: 0;
-
-  &--error {
-    background: var(--o2-severity-error-color);
-  }
-
-  &--frustration {
-    background: var(--o2-severity-warning-color);
-  }
-}
-</style>
diff --git a/web/src/components/rum/sessionReplay/SessionLocationColumn.vue b/web/src/components/rum/sessionReplay/SessionLocationColumn.vue
index 57105ea9ea..93dcea2a46 100644
--- a/web/src/components/rum/sessionReplay/SessionLocationColumn.vue
+++ b/web/src/components/rum/sessionReplay/SessionLocationColumn.vue
@@ -30,7 +30,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           data-test="circle-icon"
           name="circle"
           size="xs"
-          class="mx-1.5 text-gray-400 shrink-0"
+          class="mx-1.5 text-icon-color shrink-0"
         />
         <span class="truncate">{{ part }}</span>
       </template>
diff --git a/web/src/components/rum/sessionReplay/SessionsInsightBanner.vue b/web/src/components/rum/sessionReplay/SessionsInsightBanner.vue
index 975572320a..c2d11c84af 100644
--- a/web/src/components/rum/sessionReplay/SessionsInsightBanner.vue
+++ b/web/src/components/rum/sessionReplay/SessionsInsightBanner.vue
@@ -38,7 +38,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <template v-if="insight.kind === 'error'">
           <button
             type="button"
-            class="insight-action-btn"
+            class="text-current text-compact font-medium underline underline-offset-3 hover:opacity-75"
             data-test="rum-sessions-insight-filter-btn"
             @click="emit('filter')"
           >
@@ -46,7 +46,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </button>
           <button
             type="button"
-            class="insight-action-btn"
+            class="text-current text-compact font-medium underline underline-offset-3 hover:opacity-75"
             data-test="rum-sessions-insight-open-error-tracking-btn"
             @click="emit('open-error-tracking')"
           >
@@ -56,7 +56,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <button
           v-else
           type="button"
-          class="insight-action-btn"
+          class="text-current text-compact font-medium underline underline-offset-3 hover:opacity-75"
           data-test="rum-sessions-insight-apply-btn"
           @click="emit('apply')"
         >
@@ -135,18 +135,3 @@ const message = computed(() => {
 });
 </script>
 
-<style scoped lang="scss">
-// Inherit the banner variant's text color — the soft variants use their
-// darkest palette step for text, so currentColor stays readable.
-.insight-action-btn {
-  color: currentColor;
-  font-size: var(--text-sm);
-  font-weight: var(--font-medium);
-  text-decoration: underline;
-  text-underline-offset: 0.1875rem;
-
-  &:hover {
-    opacity: 0.75;
-  }
-}
-</style>
diff --git a/web/src/components/rum/sessionReplay/SessionsMetricsStrip.vue b/web/src/components/rum/sessionReplay/SessionsMetricsStrip.vue
index dc2fe788b1..61534c0bda 100644
--- a/web/src/components/rum/sessionReplay/SessionsMetricsStrip.vue
+++ b/web/src/components/rum/sessionReplay/SessionsMetricsStrip.vue
@@ -24,10 +24,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       v-for="card in cards"
       :key="card.key"
       type="button"
-      class="metric-card flex flex-col items-start gap-0.5 text-left rounded-lg border p-3 transition-colors"
+      class="metric-card flex flex-col items-start gap-0.5 text-left rounded-default border p-3 transition-colors bg-card-glass-bg enabled:cursor-pointer enabled:hover:border-accent disabled:cursor-default"
       :class="
         card.key === activeCard
-          ? 'border-[var(--o2-primary-color)]'
+          ? 'border-accent'
           : 'border-border-default'
       "
       :aria-pressed="card.key === activeCard"
@@ -36,7 +36,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       @click="card.selectable && emit('select', card.key)"
     >
       <span
-        class="text-xs font-medium uppercase tracking-wide text-[var(--o2-text-label)]"
+        class="text-xs font-medium uppercase tracking-wide text-text-label"
         >{{ card.label }}</span
       >
       <span class="flex items-baseline gap-1.5">
@@ -48,11 +48,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         >
         <span
           v-if="card.rate"
-          class="text-sm text-[var(--o2-text-secondary)] tabular-nums"
+          class="text-sm text-text-secondary tabular-nums"
           >· {{ card.rate }}</span
         >
       </span>
-      <small :class="card.captionClass || 'text-[var(--o2-text-caption)]'">{{
+      <small :class="card.captionClass || 'text-text-secondary'">{{
         card.caption
       }}</small>
     </button>
@@ -128,10 +128,10 @@ const deltaCaption = (
     // More sessions is neutral; more errors/frustration is bad, fewer is good.
     captionClass:
       suffix === "%"
-        ? "text-[var(--o2-text-caption)]"
+        ? "text-text-secondary"
         : delta > 0
-          ? "text-[var(--o2-status-error-text)]"
-          : "text-[var(--o2-status-success-text)]",
+          ? "text-status-error-text"
+          : "text-status-success-text",
   };
 };
 
@@ -140,7 +140,7 @@ const cards = computed(() => [
     key: "sessions" as const,
     label: t("rum.sessions"),
     value: props.total.toLocaleString(),
-    valueClass: "text-[var(--o2-text-heading)]",
+    valueClass: "text-text-body",
     rate: "",
     ...deltaCaption(props.sessionsDeltaPct, t("rum.inTimeRange"), "%"),
     selectable: true,
@@ -151,8 +151,8 @@ const cards = computed(() => [
     value: props.errorSessions.toLocaleString(),
     valueClass:
       props.errorSessions > 0
-        ? "text-[var(--o2-severity-error-color)]"
-        : "text-[var(--o2-text-heading)]",
+        ? "text-severity-error-color"
+        : "text-text-body",
     rate: rate(props.errorSessions),
     ...deltaCaption(props.errorsDelta, t("rum.sessionsWithErrors")),
     selectable: true,
@@ -163,8 +163,8 @@ const cards = computed(() => [
     value: props.frustratedSessions.toLocaleString(),
     valueClass:
       props.frustratedSessions > 0
-        ? "text-[var(--o2-severity-warning-color)]"
-        : "text-[var(--o2-text-heading)]",
+        ? "text-severity-warning-color"
+        : "text-text-body",
     rate: rate(props.frustratedSessions),
     ...deltaCaption(props.frustratedDelta, t("rum.rageDeadClicks")),
     selectable: true,
@@ -173,7 +173,7 @@ const cards = computed(() => [
     key: "duration" as const,
     label: t("rum.avgDuration"),
     value: formatMs(props.avgDurationMs),
-    valueClass: "text-[var(--o2-text-heading)]",
+    valueClass: "text-text-body",
     rate: "",
     caption: `${t("rum.median")} ${formatMs(props.medianDurationMs)}`,
     captionClass: "",
@@ -183,7 +183,7 @@ const cards = computed(() => [
     key: "bounced" as const,
     label: t("rum.bounceRate"),
     value: bounceRate.value,
-    valueClass: "text-[var(--o2-text-heading)]",
+    valueClass: "text-text-body",
     rate: "",
     caption: t("rum.ofTotal", {
       count: props.bouncedSessions,
@@ -195,20 +195,3 @@ const cards = computed(() => [
 ]);
 </script>
 
-<style scoped lang="scss">
-.metric-card {
-  background: var(--o2-card-bg);
-
-  &:not(:disabled) {
-    cursor: pointer;
-
-    &:hover {
-      border-color: var(--o2-primary-color);
-    }
-  }
-
-  &:disabled {
-    cursor: default;
-  }
-}
-</style>
diff --git a/web/src/components/settings/AddRegexPattern.schema.ts b/web/src/components/settings/AddRegexPattern.schema.ts
index 8e3418812a..5d3cbe5193 100644
--- a/web/src/components/settings/AddRegexPattern.schema.ts
+++ b/web/src/components/settings/AddRegexPattern.schema.ts
@@ -1,8 +1,7 @@
 // Copyright 2026 OpenObserve Inc.
 //
 // Validation schema for AddRegexPattern.vue. `name` and `pattern` are the
-// validated fields — both required (mirroring the old per-field `:validators`
-// that just enforced "required"). Built via a factory so the required messages
+// validated fields — both required. Built via a factory so the required messages
 // stay i18n-driven (pass useI18n's `t`).
 //
 // Every control inside the OForm is form-owned (no bare base components): the
diff --git a/web/src/components/settings/AddRegexPattern.vue b/web/src/components/settings/AddRegexPattern.vue
index 18f3697b09..49e0d0bb1f 100644
--- a/web/src/components/settings/AddRegexPattern.vue
+++ b/web/src/components/settings/AddRegexPattern.vue
@@ -34,12 +34,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           size="icon-toolbar"
           @click="toggleAIChat"
           data-test="add-regex-pattern-open-close-ai-btn"
-          class="ai-hover-btn"
+          class="group [background:var(--color-gradient-ai-subtle)]! text-ai-accent! dark:text-white! [transition:background_0.3s_ease,box-shadow_0.3s_ease,color_0.3s_ease] dark:shadow-[0_0.25rem_0.75rem_0_color-mix(in_srgb,var(--color-ai-accent)_20%,transparent)] hover:[background:var(--color-gradient-ai)]! hover:text-white! hover:shadow-[0_0.25rem_0.75rem_0_color-mix(in_srgb,var(--color-ai-accent)_35%,transparent)] dark:hover:shadow-[0_0.25rem_0.75rem_0_color-mix(in_srgb,var(--color-ai-accent)_35%,transparent)]"
           :class="store.state.isAiChatEnabled ? 'ai-btn-active' : ''"
           @mouseenter="isHovered = true"
           @mouseleave="isHovered = false"
         >
-          <img :src="getBtnLogo" class="header-icon ai-icon" />
+          <img :src="getBtnLogo" class="header-icon [transition:transform_0.6s_ease] group-hover:rotate-180 group-hover:brightness-0 group-hover:invert group-hover:[transition:filter_0.3s_ease]" />
         </OButton>
         <OButton
           data-test="add-regex-pattern-fullscreen-btn"
@@ -50,20 +50,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <OIcon
             name="fullscreen"
             size="xs"
-            :class="isFullScreen ? 'text-[var(--o2-primary)]' : ''"
+            :class="isFullScreen ? 'text-accent' : ''"
           />
         </OButton>
       </div>
     </template>
     <!-- form inputs starts here -->
-    <div class="flex w-[100%] h-full">
+    <div class="flex w-full h-full">
       <div
         :class="
           store.state.isAiChatEnabled
             ? isFullScreen
               ? 'w-[75%] pl-2'
               : 'w-[65%] pl-2'
-            : 'w-[100%] px-3'
+            : 'w-full'
         "
       >
         <OForm
@@ -72,7 +72,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :schema="addRegexPatternSchema"
           :default-values="addRegexPatternDefaults"
           @submit="saveRegexPattern"
-          class="flex flex-col gap-4 mt-2"
+          class="flex flex-col gap-4"
         >
           <div class="flex flex-col gap-y-3">
             <OFormInput
@@ -99,11 +99,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               dense
               data-test="add-regex-pattern-lookaround-note"
             >
-              <div class="text-[12px] font-normal leading-[18px]">
+              <div class="text-xs font-normal leading-4.5">
                 {{ t("regex_patterns.unsupported_lookaround_note") }}
                 {{ t("regex_patterns.unsupported_lookaround_example") }}
                 <code
-                  class="font-mono text-[12px] px-[4px] py-[1px] rounded-[4px] bg-[var(--color-banner-info-border)]"
+                  class="font-mono text-xs px-1 py-px rounded-default bg-banner-info-border"
                   >(?=openobserve)\w+</code
                 >
                 <OIcon
@@ -112,7 +112,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   class="inline-block align-middle mx-1"
                 />
                 <code
-                  class="font-mono text-[12px] px-[4px] py-[1px] rounded-[4px] bg-[var(--color-banner-info-border)]"
+                  class="font-mono text-xs px-1 py-px rounded-default bg-banner-info-border"
                   >openobserve\w*</code
                 >
               </div>
@@ -131,46 +131,32 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 >
                   <img
                     :src="goToAILogo"
-                    class="w-[20px] h-[20px] mr-1"
+                    class="w-5 h-5 mr-1"
                   />
                   <span
-                    class="text-[#5960B2] text-sm flex items-center gap-1"
+                    class="text-brand-indigo text-sm flex items-center gap-1"
                   >
                     {{ t('settings.addRegexPattern.tryAiAssistant') }}
                   </span>
                   <OIcon
                     size="sm"
                     name="arrow-right-alt"
-                    class="text-[#5960B2] w-[20px] h-[20px] ml-1"
+                    class="text-brand-indigo w-5 h-5 ml-1"
                   />
                 </OButton>
               </div>
               <div class="regex-pattern-input">
-                <div
-                  class="py-[2px] h-[24px]"
-                  :class="
-                    store.state.theme === 'dark'
-                      ? 'bg-gray-500'
-                      : 'bg-gray-200 '
-                  "
-                >
-                  <div
-                    class="text-[12px] font-[500] px-2"
-                    :class="[
-                      store.state.theme === 'dark'
-                        ? 'text-[#ffffff]'
-                        : 'text-[#6B7280]',
-                    ]"
-                  >
+                <div class="py-0.5 h-6 bg-surface-subtle">
+                  <div class="text-xs font-[500] px-2 text-text-secondary">
                     {{ t('settings.addRegexPattern.writePattern') }}
                   </div>
                 </div>
                 <OFormTextarea
                   name="pattern"
                   data-test="add-regex-pattern-input"
-                  class="regex-pattern-input"
+                  class="regex-pattern-input w-full"
                   tabindex="0"
-                  style="width: 100%; resize: none"
+                  style="resize: none"
                   :placeholder="t('settings.addRegexPattern.patternPlaceholder')"
                   :rows="5"
                 />
@@ -197,11 +183,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 name="query"
                 v-model:is-expanded="expandState.regexTestString"
                 :label="t('settings.addRegexPattern.inputStringLabel')"
-                class="mt-1 py-md h-[24px]"
-                :labelClass="
-                  store.state.theme === 'dark'
-                    ? 'text-white font-medium text-xs leading-[21px]'
-                    : 'text-[#6b7280] font-medium text-xs leading-[21px] -ml-1'"
+                class="mt-1 py-md h-6"
+                labelClass="text-text-secondary font-medium text-xs leading-5.25 -ml-1"
               >
                 <template #right> </template>
               </FullViewContainer>
@@ -212,9 +195,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <OFormTextarea
                   name="testString"
                   data-test="add-regex-test-string-input"
-                  class="regex-test-string-input"
+                  class="regex-test-string-input w-full"
                   tabindex="0"
-                  style="width: 100%; resize: none"
+                  style="resize: none"
                   :placeholder="t('settings.addRegexPattern.testStringPlaceholder')"
                   :rows="5"
                 />
@@ -225,11 +208,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 name="output"
                 v-model:is-expanded="expandState.outputString"
                 :label="t('settings.addRegexPattern.outputLabel')"
-                class="mt-1 py-md h-[24px]"
-                :labelClass="
-                  store.state.theme === 'dark'
-                    ? 'text-white font-medium text-xs leading-[21px]'
-                    : 'text-[#6b7280] font-medium text-xs leading-[21px] -ml-1'"
+                class="mt-1 py-md h-6"
+                labelClass="text-text-secondary font-medium text-xs leading-5.25 -ml-1"
               >
               </FullViewContainer>
               <div v-if="expandState.outputString" class="regex-pattern-input">
@@ -238,40 +218,31 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   name="outputString"
                   :readonly="true"
                   data-test="add-regex-output-string-input"
-                  class="regex-test-string-input"
+                  class="regex-test-string-input w-full"
                   tabindex="0"
-                  style="width: 100%; resize: none"
+                  style="resize: none"
                   :placeholder="t('settings.addRegexPattern.outputStringPlaceholder')"
                   :rows="5"
                 />
                 <div
                   v-else
-                  class="flex flex-col items-center justify-center h-[111px] rounded-md border border-input-border bg-input-bg"
+                  class="flex flex-col items-center justify-center h-27.75 rounded-default border border-input-border bg-input-bg"
                 >
                   <div v-if="!testLoading && outputStringValue.length === 0">
                     <OIcon
                       name="lightbulb"
                       size="md"
-                      :class="
-                        store.state.theme === 'dark'
-                          ? 'text-[#ffffff]'
-                          : 'text-[#A8A8A8]'
-                      "
+                      class="text-icon-color"
                     />
                     <span
-                      class="text-[12px] font-[400] text-center"
-                      :class="
-                        store.state.theme === 'dark'
-                          ? 'text-[#ffffff]'
-                          : 'text-[#4B5563]'
-                      "
+                      class="text-xs font-[400] text-center text-text-secondary"
                     >
                       {{ t('settings.addRegexPattern.clickTestInputHint') }}
                     </span>
                   </div>
                   <div v-else-if="testLoading">
                     <span
-                      class="flex items-center justify-center h-[111px]"
+                      class="flex items-center justify-center h-27.75"
                     >
                       <OSpinner size="sm" />
                     </span>
@@ -283,19 +254,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </OForm>
       </div>
       <div
-        class="ml-2"
+        class="ml-2 max-w-full"
         v-if="store.state.isAiChatEnabled"
         style="
           width: 35%;
-          max-width: 100%;
           min-width: 75px;
           height: calc(100vh - 90px) !important;
         "
-        :class="
-          store.state.theme == 'dark'
-            ? 'dark-mode-chat-container'
-            : 'light-mode-chat-container'
-        "
       >
         <O2AIChat
           :aiChatInputContext="inputContext"
@@ -317,6 +282,7 @@ import {
 import { useI18n } from "vue-i18n";
 import { useStore } from "vuex";
 import { computed } from "vue";
+import useTheme from "@/composables/useTheme";
 import config from "@/aws-exports";
 import { getImageURL } from "@/utils/zincutils";
 import FullViewContainer from "../functions/FullViewContainer.vue";
@@ -373,6 +339,7 @@ export default defineComponent({
     const { t } = useI18n();
 
     const store = useStore();
+    const { isDark } = useTheme();
 
 
     const isHovered = ref(false);
@@ -401,7 +368,7 @@ export default defineComponent({
     // EDIT-prefill defaults as a typed computed. OForm reads `:default-values`
     // once at mount and the ODrawer (reka-ui `lazy`) unmounts/remounts its body
     // on close/open — so this re-seeds the form each time the drawer opens
-    // (edit → the loaded pattern, create → blank). No `formKey` remount hack.
+    // (edit → the loaded pattern, create → blank).
     const addRegexPatternDefaults = computed((): AddRegexPatternForm => {
       // "from logs" flow prefills the (non-saved) test string from the store.
       const testString =
@@ -483,7 +450,7 @@ export default defineComponent({
       if (isHovered.value || store.state.isAiChatEnabled) {
         return getImageURL("images/common/ai_icon_dark.svg");
       }
-      return store.state.theme === "dark"
+      return isDark.value
         ? getImageURL("images/common/ai_icon_dark.svg")
         : getImageURL("images/common/ai_icon_gradient.svg");
     });
@@ -500,15 +467,11 @@ export default defineComponent({
     // (the schema already gated it). `description` is the non-form local. OForm
     // awaits this handler → the ODrawer Save spinner is automatic (no isSaving).
     const saveRegexPattern = async (value: AddRegexPatternForm) => {
-      //payload for create and update regex pattern
-      // we need to send the name , pattern , description
       const payload = {
         name: value.name,
         pattern: value.pattern,
         description: value.description ?? "",
       };
-      //here we are emitting close and update:list to the parent component
-      //this is used to close the dialog and update the regex pattern list
       try {
         const response = props.isEdit
           ? await regexPatternService.update(
@@ -615,24 +578,14 @@ export default defineComponent({
 });
 </script>
 
-<style>
-.regex-pattern-input > div > div > div > textarea {
-  height: 200px !important;
-  resize: none !important;
-  padding-left: 0.5rem !important;
-}
-
-.regex-test-string-input > div > div > div > textarea {
-  resize: none !important;
-  padding-left: 0.5rem !important;
-}
-
-/* The section header strips (Write Pattern / Input string / Output) are flat
-   full-width bars. Square the textareas' own border box so each field reads as
-   one connected unit under its strip instead of a detached rounded box. */
-.regex-pattern-input .rounded-md.border,
-.regex-test-string-input .rounded-md.border {
+<style scoped>
+/* keep(lib-override:o2-textarea): squares the top corners of the textarea's own
+   border box (OTextarea's internal wrapper div, only reachable via :deep()) so
+   each field reads as one unit under its flat full-width section-header strip. */
+.regex-pattern-input :deep(.rounded-default.border),
+.regex-test-string-input :deep(.rounded-default.border) {
   border-top-left-radius: 0 !important;
   border-top-right-radius: 0 !important;
 }
 </style>
+
diff --git a/web/src/components/settings/AiToolsets.vue b/web/src/components/settings/AiToolsets.vue
index 1585ab5c5f..19ba67b2d2 100644
--- a/web/src/components/settings/AiToolsets.vue
+++ b/web/src/components/settings/AiToolsets.vue
@@ -17,15 +17,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <!-- eslint-disable vue/x-invalid-end-tag -->
 <template>
   <div class="p-0" style="min-height: inherit; height: calc(100vh - 88px);">
-    <div v-if="!showAddDialog">
-      <!-- Standard section header: title + actions only. Search moved into the
-           table toolbar below. -->
-      <AppPageHeader
-        :title="t('aiToolset.header')"
-        icon="smart-toy"
-        :subtitle="t('settings.aiToolsetsPage.subtitle')"
-        class="shrink-0 px-4 border-b border-border-default"
-      >
+    <OPageLayout
+      v-if="!showAddDialog"
+      :title="t('aiToolset.header')"
+      icon="smart-toy"
+      :subtitle="t('settings.aiToolsetsPage.subtitle')"
+      bleed
+    >
         <template #actions>
           <OButton
             data-test="ai-toolsets-add-btn"
@@ -34,10 +32,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             @click="addToolset"
           >{{ t('aiToolset.add') }}</OButton>
         </template>
-      </AppPageHeader>
 
       <!-- Table -->
-      <div class="card-container mt-2.5 overflow-hidden">
+      <div class="bg-card-glass-bg mt-2.5 overflow-hidden">
       <OTable
         :frame="false"
         :data="visibleRows"
@@ -48,6 +45,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :page-size-options="[20, 50, 100]"
         sorting="client"
         :default-columns="false"
+        show-index
         :enable-column-resize="true"
         :persist-columns="true"
         table-id="settings-ai-toolsets"
@@ -107,7 +105,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </template>
       </OTable>
       </div>
-    </div>
+    </OPageLayout>
 
     <!-- Add / Edit form -->
     <div v-else>
@@ -144,9 +142,9 @@ import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
 import OTag from "@/lib/core/Badge/OTag.vue";
 import OSearchInput from "@/lib/forms/SearchInput/OSearchInput.vue";
 import { toast } from "@/lib/feedback/Toast/useToast";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import OTable from "@/lib/core/Table/OTable.vue";
-import { TABLE_INDEX_COL_SIZE, COL } from "@/lib/core/Table/OTable.types";
+import { COL } from "@/lib/core/Table/OTable.types";
 import OEmptyState from "@/lib/core/EmptyState/OEmptyState.vue";
 import ConfirmDialog from "@/components/ConfirmDialog.vue";
 import AddAiToolset from "@/components/ai_toolsets/AddAiToolset.vue";
@@ -157,7 +155,7 @@ import { isInputFocused } from "@/utils/keyboardShortcuts";
 export default defineComponent({
   name: "PageAiToolsets",
   components: {
-    AppPageHeader,
+    OPageLayout,
     OEmptyState,
     ConfirmDialog,
     AddAiToolset,
@@ -178,7 +176,6 @@ export default defineComponent({
     const filterQuery = ref("");
 
     const columns: OTableColumnDef[] = [
-      { id: "#", header: "#", accessorKey: "#", size: TABLE_INDEX_COL_SIZE, meta: { align: "left" } },
       { id: "name", header: t("aiToolset.name"), accessorKey: "name", sortable: true, resizable: true, hideable: true, size: COL.name, minSize: 160, meta: { align: "left", flex: true } },
       { id: "kind", header: t("aiToolset.kind"), accessorKey: "kind", sortable: true, resizable: true, hideable: true, size: COL.type, meta: { align: "left" } },
       { id: "description", header: t("aiToolset.description"), accessorKey: "description", resizable: true, hideable: true, size: COL.description, meta: { align: "left" } },
@@ -234,8 +231,7 @@ export default defineComponent({
         .list(store.state.selectedOrganization.identifier)
         .then((res) => {
           const items = res.data?.toolsets ?? [];
-          tabledata.value = items.map((item: any, i: number) => ({
-            "#": i + 1,
+          tabledata.value = items.map((item: any) => ({
             id: item.id,
             name: item.name,
             kind: item.kind,
diff --git a/web/src/components/settings/BuiltInModelPricingTab.vue b/web/src/components/settings/BuiltInModelPricingTab.vue
deleted file mode 100644
index 573d0f83e0..0000000000
--- a/web/src/components/settings/BuiltInModelPricingTab.vue
+++ /dev/null
@@ -1,396 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <div class="built-in-model-pricing-container card-container h-full flex flex-col">
-    <!-- Search and Filter Bar -->
-    <div class="filters-bar p-3 shrink-0 border-b border-(--q-color-separator)">
-      <div class="flex items-center justify-between flex-wrap">
-        <!-- Text search -->
-        <div class="flex gap-3">
-          <OSearchInput
-            v-model="searchQuery"
-            :placeholder="t('modelPricing.searchByModelName')"
-            clearable
-            class="no-border w-[220px]"
-            data-test="built-in-model-pricing-search"
-          />
-        </div>
-
-        <!-- Refresh -->
-        <div>
-          <OButton
-            variant="outline"
-            size="sm-action"
-            :loading="loading"
-            @click="refreshModels"
-            data-test="built-in-model-pricing-refresh-btn"
-          >
-            {{ t("modelPricing.refresh") }}
-          </OButton>
-        </div>
-      </div>
-    </div>
-
-    <!-- Error State -->
-    <div v-if="error" class="text-center p-6">
-      <OIcon name="error" style="width: 50px; height: 50px;" />
-      <div class="mt-3 text-red-500">{{ error }}</div>
-      <span class="mt-2">
-        <OButton variant="ghost-primary" size="sm" @click="fetchModels()">
-          {{ t("modelPricing.tryAgain") }}
-        </OButton>
-      </span>
-    </div>
-
-    <div v-else class="mb-3 px-3">
-      <OTable
-        :data="filteredModels"
-        :columns="columns"
-        row-key="name"
-        :loading="loading"
-        pagination="none"
-        :bordered="false"
-        :default-columns="false"
-        :enable-column-resize="true"
-        :persist-columns="true"
-        table-id="settings-builtin-model-pricing"
-        selection="multiple"
-        v-model:selected-ids="selectedIds"
-        class="h-[calc(100vh-120px)]"
-        data-test="built-in-model-pricing-table"
-      >
-        <!-- Model name + description -->
-        <template #cell-name="{ row, value }">
-          <div class="font-semibold">{{ value }}</div>
-          <div
-            v-if="row.description"
-            class="text-xs"
-            style="max-width: 260px; white-space: normal; line-height: 1.3; color: var(--o2-text-muted)"
-          >
-            {{ row.description }}
-          </div>
-        </template>
-
-        <!-- Pattern -->
-        <template #cell-pattern="{ row, value }">
-          <code
-            class="text-xs"
-            style="word-break: break-all; white-space: normal"
-          >
-            {{ value || "—" }}
-          </code>
-        </template>
-
-        <!-- Tiered pricing — each tier on its own row -->
-        <template #cell-pricing="{ row }">
-          <div v-if="!row.tiers?.length">—</div>
-          <div v-else>
-            <div
-              v-for="(tier, idx) in [...row.tiers].sort(
-                (a: any, b: any) =>
-                  (a.condition ? 1 : 0) - (b.condition ? 1 : 0),
-              )"
-              :key="idx"
-              class="tier-row py-px"
-              :class="{ 'tier-conditional': !!tier.condition }"
-            >
-              <div class="tier-name text-[11px] font-semibold text-[#555] mb-px" :class="tier.condition ? 'text-[#888]' : ''">
-                <span v-if="tier.condition">
-                  {{ tier.name }}
-                  <span style="font-weight: 400; color: var(--o2-text-muted)">
-                    ({{ tier.condition.usage_key }}
-                    {{ tier.condition.operator }}
-                    {{ tier.condition.value.toLocaleString() }})
-                  </span>
-                </span>
-                <span v-else>{{ tier.name }}</span>
-              </div>
-              <div class="flex gap-0.75 flex-wrap items-center">
-                <span
-                  v-for="[key, price] in sortedPriceEntries(tier.prices)"
-                  :key="key"
-                  class="inline-flex items-center px-1.5 py-px rounded-[6px] text-[11px] font-semibold whitespace-nowrap text-[#555] border border-[#ccc] dark:text-[#bbb] dark:border-[#555]"
-                >
-                  {{ fmtKey(key) }}: ${{ fmtPrice(price) }}
-                </span>
-              </div>
-            </div>
-          </div>
-        </template>
-
-        <template #empty>
-          <div class="w-full flex flex-col flex-center p-6">
-            <OIcon name="search-off" style="width: 50px; height: 50px;" />
-            <div class="mt-3" style="color: var(--o2-text-muted)">
-              {{ t("modelPricing.noModelsFound") }}
-            </div>
-          </div>
-        </template>
-
-        <template #bottom="bottomProps">
-          <div
-            class="flex items-center gap-4 py-2 px-1 o2-table-footer-title"
-          >
-            <span
-              >{{
-                bottomProps.totalRows !== 1
-                  ? t("settings.builtInModelPricingTab.modelCountPlural", { count: bottomProps.totalRows })
-                  : t("settings.builtInModelPricingTab.modelCountSingular", { count: bottomProps.totalRows })
-              }}</span
-            >
-            <span
-              v-if="selectedIds.length > 0"
-              style="color: var(--o2-primary-color)"
-              class="font-semibold"
-            >
-              {{ t("settings.builtInModelPricingTab.selectedCount", { count: selectedIds.length }) }}
-            </span>
-          </div>
-        </template>
-      </OTable>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref, computed, onMounted } from "vue";
-import { useI18n } from "vue-i18n";
-import { useStore } from "vuex";
-import modelPricingService from "@/services/model_pricing";
-import { ModelPricingCache } from "@/utils/modelPricingCache";
-import OButton from "@/lib/core/Button/OButton.vue";
-import OIcon from "@/lib/core/Icon/OIcon.vue";
-import OSpinner from "@/lib/feedback/Spinner/OSpinner.vue";
-import OSearchInput from "@/lib/forms/SearchInput/OSearchInput.vue";
-import OTable from "@/lib/core/Table/OTable.vue";
-import { COL } from "@/lib/core/Table/OTable.types";
-import { toast } from "@/lib/feedback/Toast/useToast";
-
-interface ModelTier {
-  name: string;
-  condition: any;
-  prices: Record<string, number>;
-}
-
-interface BuiltInModel {
-  name: string;
-  match_pattern: string;
-  description?: string;
-  provider?: string;
-  tiers: ModelTier[];
-  sort_order?: number;
-  selected?: boolean;
-}
-
-export default defineComponent({
-  name: "BuiltInModelPricingTab",
-  components: { OButton, OSpinner, OSearchInput, OTable,
-    OIcon,
-},
-  emits: ["import-models"],
-  setup(props, { emit }) {
-    const { t } = useI18n();
-    const store = useStore();
-
-    const models = ref<BuiltInModel[]>([]);
-    const loading = ref(false);
-    const error = ref("");
-    const searchQuery = ref("");
-    const columns = [
-      {
-        id: "name",
-        header: t("modelPricing.colModel"),
-        accessorKey: "name",
-        sortable: true,
-        resizable: true,
-        hideable: true,
-        size: COL.defaultModel,
-        minSize: 160,
-        meta: { align: "left", flex: true },
-      },
-      {
-        id: "pattern",
-        header: t("modelPricing.colPattern"),
-        accessorKey: "match_pattern",
-        sortable: false,
-        resizable: true,
-        hideable: true,
-        size: COL.template,
-        meta: { align: "left" },
-      },
-      {
-        id: "pricing",
-        header: t("modelPricing.colPricingSimple"),
-        accessorKey: "tiers",
-        sortable: false,
-        resizable: true,
-        hideable: true,
-        size: COL.description,
-        meta: { align: "left" },
-      },
-    ];
-
-    const filteredModels = computed(() => {
-      let result = models.value;
-      if (searchQuery.value) {
-        const sq = searchQuery.value.toLowerCase();
-        result = result.filter(
-          (m) =>
-            m.name.toLowerCase().includes(sq) ||
-            (m.description || "").toLowerCase().includes(sq),
-        );
-      }
-      return result;
-    });
-
-    const selectedIds = ref<string[]>([]);
-
-    const selectedCount = computed(() => selectedIds.value.length);
-
-    // Deterministic key order: input before output, then alphabetical
-    const PRICE_KEY_ORDER: Record<string, number> = {
-      input_tokens: 0,
-      output_tokens: 1,
-    };
-
-    function sortedPriceEntries(
-      prices: Record<string, number>,
-    ): [string, number][] {
-      return Object.entries(prices).sort(([a], [b]) => {
-        const oa = PRICE_KEY_ORDER[a] ?? 99;
-        const ob = PRICE_KEY_ORDER[b] ?? 99;
-        if (oa !== ob) return oa - ob;
-        return a.localeCompare(b);
-      });
-    }
-
-    function fmtKey(key: string): string {
-      return key.replace(/_tokens$/, "").replace(/_/g, "-");
-    }
-
-    function fmtPrice(perToken: number): string {
-      const perM = perToken * 1_000_000;
-      if (perM >= 1) return perM.toFixed(2);
-      if (perM >= 0.1) return perM.toFixed(3);
-      if (perM >= 0.01) return perM.toFixed(4);
-      return perM.toPrecision(2);
-    }
-
-    const fetchModels = async (clearCache = false) => {
-      loading.value = true;
-      error.value = "";
-      const orgId = store.state.selectedOrganization?.identifier || "";
-
-      if (clearCache) ModelPricingCache.clear(orgId);
-
-      if (!clearCache) {
-        const cached = ModelPricingCache.get<BuiltInModel[]>(orgId);
-        if (cached) {
-          models.value = cached.map((m: BuiltInModel) => ({
-            ...m,
-            selected: false,
-          }));
-          loading.value = false;
-          toast({
-            message: t("settings.builtInModelPricingTab.modelsLoaded", { count: models.value.length }),
-            variant: "success",
-          });
-          return;
-        }
-      }
-
-      try {
-        const res = await modelPricingService.getBuiltIn(orgId);
-        const fetched: BuiltInModel[] = res.data.models || [];
-        ModelPricingCache.set(orgId, fetched);
-        models.value = fetched.map((m: BuiltInModel) => ({
-          ...m,
-          selected: false,
-        }));
-        toast({
-          message: `${models.value.length} models loaded`,
-          variant: "success",
-        });
-      } catch (e: any) {
-        error.value =
-          e.response?.data?.message ||
-          e.message ||
-          t("settings.builtInModelPricingTab.failedToLoadModels");
-        toast({
-          variant: "error",
-          message: error.value,
-        });
-      } finally {
-        loading.value = false;
-      }
-    };
-
-    const refreshModels = () => fetchModels(true);
-
-    const importSelectedModels = () => {
-      const selected = models.value.filter((m) => selectedIds.value.includes(m.name));
-      if (selected.length === 0) {
-        toast({
-          message: t("settings.builtInModelPricingTab.noModelsSelected"),
-          variant: "warning",
-        });
-        return;
-      }
-      emit(
-        "import-models",
-        selected.map((m) => ({
-          name: m.name,
-          match_pattern: m.match_pattern,
-          tiers: m.tiers,
-          description: m.description || "",
-          sort_order: m.sort_order ?? 0,
-          enabled: true,
-        })),
-      );
-    };
-
-    onMounted(() => fetchModels());
-
-    return {
-      t,
-      models,
-      loading,
-      error,
-      searchQuery,
-      columns,
-      filteredModels,
-      selectedIds,
-      selectedCount,
-      sortedPriceEntries,
-      fmtKey,
-      fmtPrice,
-      fetchModels,
-      refreshModels,
-      importSelectedModels,
-    };
-  },
-});
-</script>
-
-<style>
-/* Tier pricing rows — sibling selector not convertible to  */
-.tier-row + .tier-row {
-  border-top: 1px dashed var(--o2-border);
-  margin-top: 2px;
-  padding-top: 2px;
-}
-</style>
diff --git a/web/src/components/settings/BuiltInPatternsTab.spec.ts b/web/src/components/settings/BuiltInPatternsTab.spec.ts
index ab349d920a..4849b6960f 100644
--- a/web/src/components/settings/BuiltInPatternsTab.spec.ts
+++ b/web/src/components/settings/BuiltInPatternsTab.spec.ts
@@ -162,13 +162,6 @@ function mountComponent() {
       provide: { store: mockStore },
       stubs: {
         ODialog: ODialogStub,
-        "q-list": { template: "<div><slot /></div>", props: ["bordered", "separator"] },
-        "q-item": { template: "<div class='q-item'><slot /></div>", props: ["class"] },
-        "q-item-section": { template: "<div class='q-item-section'><slot /></div>", props: ["side"] },
-        "q-item-label": { template: "<div><slot /></div>", props: ["caption", "lines", "class"] },
-        "q-checkbox": { template: "<input type='checkbox' />", props: ["modelValue"], emits: ["update:modelValue"] },
-        "q-tooltip": { template: "<span><slot /></span>" },
-        "q-input": { template: "<input />", props: ["modelValue", "readonly", "outlined", "dense", "rows", "type"] },
       },
     },
   });
diff --git a/web/src/components/settings/BuiltInPatternsTab.vue b/web/src/components/settings/BuiltInPatternsTab.vue
index bed317b8e2..2f36dbfdb5 100644
--- a/web/src/components/settings/BuiltInPatternsTab.vue
+++ b/web/src/components/settings/BuiltInPatternsTab.vue
@@ -15,9 +15,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="built-in-patterns-container card-container h-full flex flex-col">
+  <div class="built-in-patterns-container bg-card-glass-bg h-full flex flex-col">
     <!-- Search and Filter Bar -->
-    <div class="filters-bar p-3 shrink-0 border-b border-(--o2-border-color)">
+    <div class="filters-bar p-3 shrink-0 border-b border-card-glass-border">
       <div class="flex gap-3">
         <div class="w-full col-md-6">
           <OSearchInput
@@ -64,7 +64,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <!-- Error State -->
     <div v-else-if="error" class="text-center p-6">
       <OIcon name="error" style="width: 50px; height: 50px;" />
-      <div class="mt-3 text-red-500">{{ error }}</div>
+      <div class="mt-3 text-status-error-text">{{ error }}</div>
       <span class="mt-2">
         <OButton variant="ghost-primary" size="sm" @click="fetchPatterns">
           {{ t("regex_patterns.try_again") }}
@@ -84,11 +84,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
 
         <!-- Pattern Cards -->
-        <ul class="flex flex-col divide-y divide-border border rounded-md">
+        <ul class="flex flex-col divide-y divide-border border rounded-default">
           <li
             v-for="(pattern, index) in filteredPatterns"
             :key="`${pattern.name}-${pattern.pattern.substring(0, 20)}`"
-            class="flex items-center gap-3 px-4 py-3 transition-colors duration-150 hover:bg-(--color-interactive-hover-bg)"
+            class="flex items-center gap-3 px-4 py-3 transition-colors duration-150 hover:bg-interactive-hover-bg"
             :data-test="`pattern-item-${index}`"
           >
             <div class="flex items-center shrink-0">
@@ -116,7 +116,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   +{{ pattern.tags.length - 3 }}
                 </OTag>
               </div>
-              <div class="font-mono text-[0.8125rem] leading-[1.4] text-(--o2-text-secondary) break-all line-clamp-1">
+              <div class="font-mono text-compact leading-[1.4] text-text-secondary break-all line-clamp-1">
                 {{ pattern.pattern.substring(0, 100)
                 }}{{ pattern.pattern.length > 100 ? "..." : "" }}
               </div>
@@ -136,7 +136,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </li>
 
           <li v-if="filteredPatterns.length === 0" class="flex items-center px-3 py-2">
-            <div class="flex flex-col flex-1 min-w-0 text-center text-gray-400">
+            <div class="flex flex-col flex-1 min-w-0 text-center text-text-muted">
               <div class="p-6">
                 <OIcon name="search-off" style="width: 50px; height: 50px;" />
                 <div class="mt-3">
@@ -160,9 +160,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       @click:secondary="showPreview = false"
       @click:primary="importSinglePattern"
     >
-      <div style="max-height: 60vh; overflow-y: auto">
+      <div style="max-height: 60vh" class="overflow-y-auto">
         <div class="mb-3">
-          <div class="text-weight-bold mb-1">
+          <div class="font-bold mb-1">
             {{ t('regex_patterns.description') }}
           </div>
           <div>
@@ -171,7 +171,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
 
         <div class="mb-3">
-          <div class="text-weight-bold mb-1">{{ t('regex_patterns.pattern') }}</div>
+          <div class="font-bold mb-1">{{ t('regex_patterns.pattern') }}</div>
           <OTextarea
             :model-value="previewedPattern?.pattern"
             readonly
@@ -180,7 +180,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
 
         <div class="mb-3">
-          <div class="text-weight-bold mb-1">{{ t('regex_patterns.tags') }}</div>
+          <div class="font-bold mb-1">{{ t('regex_patterns.tags') }}</div>
           <div class="flex flex-wrap gap-2">
             <OTag
               v-for="tag in previewedPattern?.tags"
@@ -194,7 +194,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
 
         <div class="mb-3">
-          <div class="text-weight-bold mb-1">{{ t('regex_patterns.rarity') }}</div>
+          <div class="font-bold mb-1">{{ t('regex_patterns.rarity') }}</div>
           <div>{{ previewedPattern?.rarity }}</div>
         </div>
 
@@ -202,10 +202,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           v-if="previewedPattern?.examples?.Valid?.length > 0"
           class="mb-3"
         >
-          <div class="text-weight-bold mb-1">
+          <div class="font-bold mb-1">
             {{ t('regex_patterns.valid_examples') }}
           </div>
-          <ul class="flex flex-col divide-y divide-border border rounded-md">
+          <ul class="flex flex-col divide-y divide-border border rounded-default">
             <li
               v-for="(example, idx) in previewedPattern.examples.Valid.slice(0, 3)"
               :key="idx"
diff --git a/web/src/components/settings/CipherKeys.spec.ts b/web/src/components/settings/CipherKeys.spec.ts
index 4e780b8bb1..8b15109b88 100644
--- a/web/src/components/settings/CipherKeys.spec.ts
+++ b/web/src/components/settings/CipherKeys.spec.ts
@@ -61,7 +61,7 @@ vi.mock("@/components/cipherkeys/AddCipherKey.vue", () => ({
 vi.mock("@/components/shared/grid/Pagination.vue", () => ({
   default: {
     name: "QTablePagination",
-    template: "<div data-test='q-table-pagination'></div>",
+    template: "<div data-test='table-pagination'></div>",
     props: ["scope", "pageTitle", "resultTotal", "perPageOptions", "position"],
     emits: ["update:changeRecordPerPage"],
   },
@@ -136,56 +136,6 @@ const createWrapper = (props = {}, options = {}) => {
         store: mockStore,
       },
       stubs: {
-                QTable: {
-          template: `<div data-test-stub='q-table'>
-            <slot name='top'></slot>
-            <slot name='header'></slot>
-            <div v-if='rows && rows.length > 0'>
-              <div v-for='(row, index) in rows' :key='row["#"] || index' class='table-row'>
-                <span>{{ row.name }}</span>
-              </div>
-            </div>
-            <div v-else class='no-data'>No data</div>
-            <slot name='no-data' v-if='!rows || rows.length === 0'></slot>
-            <slot name='bottom'></slot>
-          </div>`,
-          props: ["rows", "columns", "pagination", "filter", "filterMethod"],
-          data() {
-            return {
-              mockScope: { pagination: { page: 1, rowsPerPage: 20 } },
-              mockCols: [
-                { name: "name", label: "Name" },
-                { name: "actions", label: "Actions" },
-              ],
-            };
-          },
-          methods: {
-            setPagination: vi.fn(),
-          },
-        },
-        QBtn: {
-          template: `<button 
-            data-test-stub='q-btn' 
-            :data-test='$attrs["data-test"]'
-            @click='$emit("click", $event)'
-            :disabled='disable'
-          >
-            <slot></slot>
-            {{ label }}
-          </button>`,
-          props: ["label", "disable", "icon", "color", "class", "padding"],
-          emits: ["click"],
-        },
-        QInput: {
-          template: `<input
-            data-test-stub='q-input'
-            :value='modelValue'
-            @input='$emit("update:modelValue", $event.target.value)'
-            :placeholder='placeholder'
-          />`,
-          props: ["modelValue", "placeholder", "filled", "dense", "clearable"],
-          emits: ["update:modelValue"],
-        },
         OInput: {
           template: `<input
             data-test-stub='o-input'
@@ -196,28 +146,12 @@ const createWrapper = (props = {}, options = {}) => {
           props: ["modelValue", "placeholder", "class"],
           emits: ["update:modelValue"],
         },
-        QIcon: {
-          template: "<span data-test-stub='OIcon'></span>",
-          props: ["name"],
-        },
-        QTh: {
-          template: "<th data-test-stub='q-th'><slot></slot></th>",
-          props: ["props", "class", "style"],
-        },
-        QTr: {
-          template: "<tr data-test-stub='q-tr'><slot></slot></tr>",
-          props: ["props"],
-        },
-        QTd: {
-          template: "<td data-test-stub='q-td'><slot></slot></td>",
-          props: ["props"],
-        },
         AddCipherKey: {
           template: "<div data-test-stub='add-cipher-key'></div>",
           emits: ["cancel:hideform"],
         },
         QTablePagination: {
-          template: "<div data-test-stub='q-table-pagination'></div>",
+          template: "<div data-test-stub='table-pagination'></div>",
           props: ["scope", "pageTitle", "resultTotal", "perPageOptions", "position"],
           emits: ["update:changeRecordPerPage"],
         },
@@ -302,7 +236,7 @@ describe("CipherKeys", () => {
 
     it("should render cipher keys list title", () => {
       const wrapper = createWrapper();
-      // Title now lives in the standard AppPageHeader (row 1).
+      // Title now lives in the standard OPageHeader (row 1).
       const title = wrapper.find(".app-page-header h1");
       expect(title.exists()).toBe(true);
     });
@@ -322,7 +256,6 @@ describe("CipherKeys", () => {
       
       expect(wrapper.vm.tabledata).toHaveLength(2);
       expect(wrapper.vm.tabledata[0]).toEqual({
-        "#": 1,
         name: "test-key-1",
         store_type: "env",
         mechanism_type: "aes",
@@ -607,40 +540,36 @@ describe("CipherKeys", () => {
     it("should have correct table columns configuration", () => {
       const wrapper = createWrapper();
 
-      expect(wrapper.vm.columns).toHaveLength(5);
+      expect(wrapper.vm.columns).toHaveLength(4);
 
-      // Column 0: #
-      expect(wrapper.vm.columns[0].id).toBe("#");
-      expect(wrapper.vm.columns[0].accessorKey).toBe("#");
-      expect(wrapper.vm.columns[0].size).toBe(44);
+      // Row numbering moved to OTable's built-in show-index (no '#' column).
+
+      // Column 0: name
+      expect(wrapper.vm.columns[0].id).toBe("name");
+      expect(wrapper.vm.columns[0].accessorKey).toBe("name");
+      expect(wrapper.vm.columns[0].sortable).toBe(true);
       expect(wrapper.vm.columns[0].meta.align).toBe("left");
 
-      // Column 1: name
-      expect(wrapper.vm.columns[1].id).toBe("name");
-      expect(wrapper.vm.columns[1].accessorKey).toBe("name");
+      // Column 1: store_type
+      expect(wrapper.vm.columns[1].id).toBe("store_type");
+      expect(wrapper.vm.columns[1].accessorKey).toBe("store_type");
       expect(wrapper.vm.columns[1].sortable).toBe(true);
+      expect(wrapper.vm.columns[1].size).toBe(180);
       expect(wrapper.vm.columns[1].meta.align).toBe("left");
 
-      // Column 2: store_type
-      expect(wrapper.vm.columns[2].id).toBe("store_type");
-      expect(wrapper.vm.columns[2].accessorKey).toBe("store_type");
+      // Column 2: mechanism_type
+      expect(wrapper.vm.columns[2].id).toBe("mechanism_type");
+      expect(wrapper.vm.columns[2].accessorKey).toBe("mechanism_type");
       expect(wrapper.vm.columns[2].sortable).toBe(true);
       expect(wrapper.vm.columns[2].size).toBe(180);
       expect(wrapper.vm.columns[2].meta.align).toBe("left");
 
-      // Column 3: mechanism_type
-      expect(wrapper.vm.columns[3].id).toBe("mechanism_type");
-      expect(wrapper.vm.columns[3].accessorKey).toBe("mechanism_type");
-      expect(wrapper.vm.columns[3].sortable).toBe(true);
-      expect(wrapper.vm.columns[3].size).toBe(180);
-      expect(wrapper.vm.columns[3].meta.align).toBe("left");
-
-      // Column 4: actions
-      expect(wrapper.vm.columns[4].id).toBe("actions");
-      expect(wrapper.vm.columns[4].isAction).toBe(true);
-      expect(wrapper.vm.columns[4].pinned).toBe("right");
-      expect(wrapper.vm.columns[4].size).toBe(100);
-      expect(wrapper.vm.columns[4].meta.align).toBe("center");
+      // Column 3: actions
+      expect(wrapper.vm.columns[3].id).toBe("actions");
+      expect(wrapper.vm.columns[3].isAction).toBe(true);
+      expect(wrapper.vm.columns[3].pinned).toBe("right");
+      expect(wrapper.vm.columns[3].size).toBe(100);
+      expect(wrapper.vm.columns[3].meta.align).toBe("center");
     });
   });
 
diff --git a/web/src/components/settings/CipherKeys.vue b/web/src/components/settings/CipherKeys.vue
index a37eae0266..86be472c7a 100644
--- a/web/src/components/settings/CipherKeys.vue
+++ b/web/src/components/settings/CipherKeys.vue
@@ -17,15 +17,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <!-- eslint-disable vue/x-invalid-end-tag -->
 <template>
   <div class="flex flex-col h-full p-0">
-    <div v-if="!showAddDialog" class="flex flex-col h-full">
-      <!-- Standard section header: title + actions only. Search moved into the
-           table's own toolbar below. -->
-      <AppPageHeader
-        :title="t('cipherKey.header')"
-        icon="key"
-        :subtitle="t('settings.cipherKeysPage.subtitle')"
-        class="shrink-0 px-4 border-b border-border-default"
-      >
+    <OPageLayout
+      v-if="!showAddDialog"
+      :title="t('cipherKey.header')"
+      icon="key"
+      :subtitle="t('settings.cipherKeysPage.subtitle')"
+      bleed
+    >
         <template #actions>
           <OButton
             variant="primary"
@@ -36,8 +34,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             {{ t(`cipherKey.add`) }}
           </OButton>
         </template>
-      </AppPageHeader>
-      <div class="card-container flex-1 min-h-0 overflow-hidden">
+      <div class="bg-card-glass-bg flex-1 min-h-0 overflow-hidden">
       <OTable
         :frame="false"
         :data="visibleRows"
@@ -53,6 +50,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         sorting="client"
         filter-mode="client"
         :default-columns="false"
+        show-index
         :enable-column-resize="true"
         :persist-columns="true"
         table-id="settings-cipher-keys"
@@ -112,7 +110,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           v-if="selectedKeys.length > 0"
           #bottom
         >
-          <span class="text-xs text-text-primary font-medium">
+          <span class="text-xs text-text-body font-medium">
             {{ t('settings.cipherKeysPage.selected', { count: selectedKeys.length }) }}
           </span>
           <OButton
@@ -127,7 +125,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </template>
       </OTable>
       </div>
-    </div>
+    </OPageLayout>
     <div v-else>
       <add-cipher-key @cancel:hideform="hideAddDialog" />
     </div>
@@ -169,15 +167,15 @@ import OSearchInput from "@/lib/forms/SearchInput/OSearchInput.vue";
 import OTable from "@/lib/core/Table/OTable.vue";
 import type { OTableColumnDef } from "@/lib/core/Table/OTable.types";
 import { toast } from "@/lib/feedback/Toast/useToast";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
-import { TABLE_INDEX_COL_SIZE, COL } from "@/lib/core/Table/OTable.types";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
+import { COL } from "@/lib/core/Table/OTable.types";
 import { useShortcuts } from "@/lib/vue-shortcut-manager";
 import { isInputFocused } from "@/utils/keyboardShortcuts";
 
 export default defineComponent({
   name: "PageCipherKeys",
   components: {
-    AppPageHeader,
+    OPageLayout,
     OEmptyState,
     AddCipherKey,
     ConfirmDialog,
@@ -195,13 +193,6 @@ export default defineComponent({
     const loading = ref(false);
     const filterQuery = ref("");
     const columns: OTableColumnDef[] = [
-      {
-        id: "#",
-        header: "#",
-        accessorKey: "#",
-        size: TABLE_INDEX_COL_SIZE,
-        meta: { align: "left" },
-      },
       {
         id: "name",
         header: t("cipherKey.name"),
@@ -322,7 +313,6 @@ export default defineComponent({
           const responseData = response.data.keys;
           for (let i = 0; i < responseData.length; i++) {
             data.push({
-              "#": i + 1,
               name: responseData[i].name,
               store_type: responseData[i].key.store.type,
               mechanism_type: responseData[i].key.mechanism.type,
diff --git a/web/src/components/settings/CorrelationSettings.spec.ts b/web/src/components/settings/CorrelationSettings.spec.ts
index 6a4148a72e..afebb5fa3f 100644
--- a/web/src/components/settings/CorrelationSettings.spec.ts
+++ b/web/src/components/settings/CorrelationSettings.spec.ts
@@ -109,8 +109,6 @@ function mountComponent() {
       plugins: [mockI18n],
       provide: { store: mockStore },
       stubs: {
-        "q-tabs": { template: '<div class="q-tabs"><slot /></div>', props: ["modelValue"], emits: ["update:modelValue"] },
-        "q-tab": { template: '<div class="q-tab" :data-test="`tab-${name}`" :data-name="name"><slot /></div>', props: ["name", "label", "noCaps"] },
         OTabs: { template: '<div class="o-tabs"><slot /></div>', props: ["modelValue", "dense"], emits: ["update:modelValue"] },
         OTab: { template: '<div class="o-tab" :data-test="`tab-${name}`" :data-name="name"><slot /></div>', props: ["name", "label", "noCaps", "icon"] },
       },
diff --git a/web/src/components/settings/CorrelationSettings.vue b/web/src/components/settings/CorrelationSettings.vue
index ad0a3fc13a..889e1934d5 100644
--- a/web/src/components/settings/CorrelationSettings.vue
+++ b/web/src/components/settings/CorrelationSettings.vue
@@ -15,21 +15,26 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="flex flex-col h-full min-h-0">
-    <AppPageHeader
-      icon="group-work"
-      :subtitle="t('settings.correlationSettingsPage.subtitle')"
-      class="shrink-0 px-4 border-b border-border-default"
-      data-test="correlation-settings-header"
-    >
-      <template #title>
-        <span data-test="correlation-settings-page-title">{{ t('settings.correlationSettings') }}</span>
-      </template>
-    </AppPageHeader>
+  <OPageLayout
+    icon="group-work"
+    :subtitle="t('settings.correlationSettingsPage.subtitle')"
+    data-test="correlation-settings-header"
+    tabs-below
+    bleed
+  >
+    <template #title>
+      <span data-test="correlation-settings-page-title">{{ t('settings.correlationSettings') }}</span>
+    </template>
 
-    <!-- Tab bar -->
-    <div class="shrink-0 px-4 border-b border-border-subtle" data-test="correlation-settings-tabs">
-      <OTabs :model-value="activeTab" dense @update:model-value="onTabChange">
+    <!-- Module tabs (Level-2 nav) -->
+    <template #header-tabs>
+      <OTabs
+        :model-value="activeTab"
+        dense
+        align="left"
+        data-test="correlation-settings-tabs"
+        @update:model-value="onTabChange"
+      >
         <OTab
           name="services"
           :label="t('settings.correlation.discoveredServicesTab')"
@@ -48,7 +53,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :label="t('settings.correlation.fieldAliasesTab')"
         />
       </OTabs>
-    </div>
+    </template>
 
     <!-- Tab content -->
     <div class="flex-1 min-h-0 overflow-hidden">
@@ -56,7 +61,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <DiscoveredServices @navigate-to-configuration="onTabChange('discovery')" />
       </div>
 
-      <div v-show="activeTab === 'discovery'" class="h-full overflow-y-auto px-4 py-3">
+      <div v-show="activeTab === 'discovery'" class="h-full overflow-y-auto px-page-edge py-4">
         <ServiceIdentitySetup
           :org-identifier="store.state.selectedOrganization.identifier"
           :semantic-groups="semanticGroups"
@@ -66,7 +71,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         />
       </div>
 
-      <div v-show="activeTab === 'alert-correlation'" class="h-full overflow-y-auto px-4">
+      <div v-show="activeTab === 'alert-correlation'" class="h-full overflow-y-auto px-page-edge">
         <OrganizationDeduplicationSettings
           :org-id="store.state.selectedOrganization.identifier"
           :config="store.state.organizationSettings?.deduplication_config"
@@ -74,7 +79,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         />
       </div>
 
-      <div v-show="activeTab === 'field-aliases'" class="h-full overflow-y-auto px-4">
+      <div v-show="activeTab === 'field-aliases'" class="h-full overflow-y-auto px-page-edge py-4">
         <SemanticFieldGroupsConfig
           :key="`field-aliases-${fieldAliasesEditorKey}`"
           :semantic-field-groups="draftSemanticGroups"
@@ -95,7 +100,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </SemanticFieldGroupsConfig>
       </div>
     </div>
-  </div>
+  </OPageLayout>
 </template>
 
 <script lang="ts">
@@ -111,7 +116,7 @@ import ServiceIdentitySetup from "@/components/settings/ServiceIdentitySetup.vue
 import AppTabs from "@/components/common/AppTabs.vue";
 import SemanticFieldGroupsConfig from "@/components/alerts/SemanticFieldGroupsConfig.vue";
 import OButton from "@/lib/core/Button/OButton.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import serviceStreamsService from "@/services/service_streams";
 import { toast } from "@/lib/feedback/Toast/useToast";
 import { useConfirmDialog } from "@/composables/useConfirmDialog";
@@ -127,7 +132,7 @@ export default defineComponent({
     OTabs,
     OTab,
     OButton,
-    AppPageHeader,
+    OPageLayout,
   },
   setup() {
     const store = useStore();
diff --git a/web/src/components/settings/DiscoveredServices.spec.ts b/web/src/components/settings/DiscoveredServices.spec.ts
index d55dd673a5..2485535a51 100644
--- a/web/src/components/settings/DiscoveredServices.spec.ts
+++ b/web/src/components/settings/DiscoveredServices.spec.ts
@@ -164,21 +164,6 @@ const mockI18n = createI18n({
 
 const globalStubs = {
   "OIcon": { template: "<span />", props: ["name", "size", "color"] },
-  "q-btn": { template: '<button :data-test="$attrs[\'data-test\']" @click="$emit(\'click\')"><slot /></button>', props: ["label", "flat", "dense", "color", "loading", "icon"], emits: ["click"] },
-  "q-btn-toggle": { template: "<div />", props: ["modelValue", "options", "dense", "unelevated"] },
-  "q-input": { template: '<input :placeholder="placeholder" />', props: ["modelValue", "dense", "filled", "placeholder", "clearable"] },
-  "q-select": { template: "<select />", props: ["modelValue", "dense", "filled", "options", "emitValue", "mapOptions"] },
-  "q-table": { template: '<div class="q-table"><slot name="no-data" /></div>', props: ["rows", "columns", "pagination", "filter", "loading", "dense"] },
-  "q-tooltip": { template: "<span><slot /></span>" },
-  "q-card": { template: "<div><slot /></div>" },
-  "q-card-section": { template: "<div><slot /></div>" },
-  "q-card-actions": { template: "<div><slot /></div>" },
-  "q-list": { template: "<div><slot /></div>" },
-  "q-item": { template: "<div><slot /></div>" },
-  "q-item-section": { template: "<div><slot /></div>" },
-  "q-item-label": { template: "<div><slot /></div>" },
-  "q-separator": true,
-  "q-expansion-item": { template: "<div><slot /></div>", props: ["label", "icon", "dense"] },
   "i18n-t": { template: "<span><slot /></span>", props: ["keypath", "tag"] },
   ODrawer: ODrawerStub,
   ConfirmDialog: ConfirmDialogStub,
diff --git a/web/src/components/settings/DiscoveredServices.vue b/web/src/components/settings/DiscoveredServices.vue
index 5fcf1d1819..a547f7ace4 100644
--- a/web/src/components/settings/DiscoveredServices.vue
+++ b/web/src/components/settings/DiscoveredServices.vue
@@ -16,8 +16,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <div
-    class="flex flex-col w-full h-full bg-(--o2-card-bg) discovered-services"
-    :class="{ 'ds-dark': store.state.theme === 'dark' }"
+    class="flex flex-col w-full h-full bg-card-glass-bg discovered-services"
   >
     <!-- Loading State -->
     <div v-if="loading" class="flex flex-1 items-center justify-center">
@@ -28,8 +27,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <div v-else-if="error" class="flex flex-col flex-1 items-center justify-center gap-3">
       <OIcon
         name="error-outline"
-        class="text-red-500" style="width: 3rem; height: 3rem;" />
-      <div class="text-base text-red-500">{{ error }}</div>
+        class="text-status-error-text" style="width: 3rem; height: 3rem;" />
+      <div class="text-base text-status-error-text">{{ error }}</div>
       <OButton
         data-test="retry-discovered-services-btn"
         variant="outline"
@@ -69,22 +68,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <div v-else class="flex flex-col flex-1 min-h-0 pt-3">
       <!-- Info banner -->
       <div
-        class="info-banner shrink-0 mb-3 mx-4 rounded-lg flex items-center gap-3 py-3 px-4 bg-[rgba(59,130,246,0.04)] border border-[rgba(59,130,246,0.15)]"
-        :class="store.state.theme === 'dark' ? 'bg-[rgba(59,130,246,0.08)] border-[rgba(59,130,246,0.25)]' : ''"
+        class="info-banner shrink-0 mb-3 mx-page-edge rounded-default flex items-center gap-3 py-3 px-4 bg-banner-info-bg border border-banner-info-border"
       >
         <OIcon
           name="info"
           size="md"
-          class="shrink-0 info-banner-icon text-[#1d4ed8]"
-          :class="store.state.theme === 'dark' ? 'text-[#93c5fd]' : ''"
+          class="shrink-0 info-banner-icon text-status-info-text"
         />
         <div
-          class="text-sm leading-relaxed info-banner-text text-[#374151]"
-          :class="store.state.theme === 'dark' ? 'text-[#d1d5db]' : ''"
+          class="text-sm leading-relaxed info-banner-text text-text-body"
         >
           {{ t("settings.correlation.discoveredServicesDescription") }}
           <a
-            class="cursor-pointer inline-block mx-1 px-2 py-0.5 rounded text-xs font-semibold no-underline align-middle border border-[#3b82f6] text-[#2563eb] bg-[rgba(59,130,246,0.08)] transition-[background] duration-[150ms] hover:bg-[rgba(59,130,246,0.18)] dark:border-[#60a5fa] dark:text-[#93c5fd] dark:bg-[rgba(96,165,250,0.12)] dark:hover:bg-[rgba(96,165,250,0.22)]"
+            class="cursor-pointer inline-block mx-1 px-2 py-0.5 rounded-default text-xs font-semibold no-underline align-middle border border-text-link text-text-link bg-badge-blue-soft-bg transition-[background] duration-150 hover:bg-[color-mix(in_srgb,var(--color-badge-blue-ol-border)_18%,transparent)]"
             @click.prevent="$emit('navigate-to-configuration')"
             >{{ t("settings.correlation.goToConfiguration") }}</a
           >
@@ -93,9 +89,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </div>
 
       <!-- Header with title -->
-      <div class="card-container shrink-0 mb-[0.625rem]">
+      <div class="bg-card-glass-bg shrink-0 mb-2.5">
         <div
-          class="services-header-bar flex justify-between items-center w-full py-3 px-4 h-[4.25rem]"
+          class="services-header-bar flex justify-between items-center w-full py-3 px-page-edge h-[4.25rem]"
         >
           <div
             class="text-xl tracking-[0.005em] font-[600]"
@@ -105,7 +101,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </div>
           <!-- Filter bar -->
           <div class="flex items-center gap-2">
-            <span class="text-md text-gray-400 whitespace-nowrap">{{
+            <span class="text-md text-text-muted whitespace-nowrap">{{
               t("settings.correlation.filterBy")
             }}</span>
             <OSelect
@@ -117,7 +113,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               searchable
               :placeholder="t('settings.correlation.selectFieldPlaceholder')"
               data-test="service-filter-key"
-              class="o2-search-input filter-select min-w-[10rem]"
+              class="o2-search-input filter-select min-w-40"
               @update:model-value="filterValue = null"
             />
             <span>
@@ -129,7 +125,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :disabled="!filterKey"
                 :placeholder="t('settings.correlation.selectValuePlaceholder')"
                 data-test="service-filter-value"
-                class="o2-search-input filter-select min-w-[10rem]"
+                class="o2-search-input filter-select min-w-40"
               />
               <OTooltip v-if="!filterKey" :content="t('settings.correlation.selectFieldFirst')" side="top" />
             </span>
@@ -215,7 +211,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </OTag>
               </div>
               <div v-else class="flex items-center gap-2 flex-wrap">
-                <span class="set-id-badge inline-flex items-center py-[0.0625rem] px-2 rounded-[0.625rem] text-[0.6875rem] font-semibold border whitespace-nowrap shrink-0" :class="store.state.theme === 'dark' ? 'bg-[rgba(109,40,217,0.2)] text-[#c4b5fd] border-[#7c3aed]' : 'bg-[#ede9fe] text-[#5b21b6] border-[#a78bfa]'">{{ row.set_id }}</span>
+                <span class="set-id-badge inline-flex items-center py-[0.0625rem] px-2 rounded-default text-2xs font-semibold border whitespace-nowrap shrink-0 bg-badge-purple-soft-bg text-badge-purple-soft-text border-badge-purple-ol-border">{{ row.set_id }}</span>
                 <ODimensionChip
                   v-for="[key, value] in Object.entries(
                     row.disambiguation,
@@ -226,8 +222,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 />
                 <span
                   v-if="Object.keys(row.disambiguation).length === 0"
-                  class="text-xs italic no-dimensions-text text-[#9ca3af]"
-                  :class="store.state.theme === 'dark' ? 'text-[#6b7280]' : ''"
+                  class="text-xs italic no-dimensions-text text-text-muted"
                   >{{ t("settings.correlation.noDimensions") }}</span
                 >
               </div>
@@ -321,9 +316,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <!-- Bottom -->
             <template #bottom>
               <div
-                class="bottom-btn flex items-center justify-between w-full h-[2.25rem]"
+                class="flex items-center justify-between w-full h-9"
               >
-                <div class="o2-table-footer-title w-[15.625rem] mr-md">
+                <div class="text-xs font-normal w-[15.625rem] mr-md">
                   {{
                     filteredGroupCount === 1
                       ? t("settings.correlation.serviceCountSingular", {
@@ -348,6 +343,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     <!-- Service detail side panel -->
     <ODrawer
+      bleed
       :open="!!selectedService"
       @update:open="
         (val) => {
@@ -359,14 +355,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       data-test="service-side-panel"
     >
       <template #header-right>
-        <span class="set-id-badge inline-flex items-center py-[0.0625rem] px-2 rounded-[0.625rem] text-[0.6875rem] font-semibold border whitespace-nowrap shrink-0" :class="store.state.theme === 'dark' ? 'bg-[rgba(109,40,217,0.2)] text-[#c4b5fd] border-[#7c3aed]' : 'bg-[#ede9fe] text-[#5b21b6] border-[#a78bfa]'">{{ selectedService?.set_id }}</span>
+        <span class="set-id-badge inline-flex items-center py-[0.0625rem] px-2 rounded-default text-2xs font-semibold border whitespace-nowrap shrink-0 bg-badge-purple-soft-bg text-badge-purple-soft-text border-badge-purple-ol-border">{{ selectedService?.set_id }}</span>
       </template>
 
       <!-- Default set warning banner -->
       <div
         v-if="selectedService?.set_id === 'default'"
-        class="panel-warning-banner flex items-start gap-[0.625rem] py-3 px-5 bg-[rgba(234,179,8,0.08)] border-b border-b-[rgba(234,179,8,0.25)] text-[#854d0e]"
-        :class="store.state.theme === 'dark' ? 'bg-[rgba(234,179,8,0.1)] border-b-[rgba(234,179,8,0.3)] text-[#fde68a]' : ''"
+        class="panel-warning-banner flex items-start gap-2.5 py-3 px-5 bg-banner-warning-bg border-b border-b-banner-warning-border text-banner-warning-text"
       >
         <OIcon name="info-outline" size="sm" class="shrink-0 mt-0.5" />
         <div class="text-xs leading-relaxed">
@@ -382,8 +377,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <!-- Scrollable body -->
       <div class="panel-body flex-1 overflow-y-auto p-0">
         <!-- Instance Identity -->
-        <div class="panel-block py-4 px-5 border-b border-b-[#f3f4f6]" :class="store.state.theme === 'dark' ? 'border-b-[#1f2937]' : ''">
-          <div class="panel-block-label text-xs font-semibold normal-case tracking-normal text-[#9ca3af] mb-[0.625rem]">
+        <div class="panel-block py-4 px-5 border-b border-b-border-default">
+          <div class="panel-block-label text-xs font-semibold normal-case tracking-normal text-text-label mb-2.5">
             {{ t("settings.correlation.instanceIdentity") }}
           </div>
           <div
@@ -402,14 +397,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :value="value"
             />
           </div>
-          <div v-else class="panel-empty-text text-[0.8125rem] text-[#9ca3af] italic" :class="store.state.theme === 'dark' ? 'text-[#6b7280]' : ''">
+          <div v-else class="panel-empty-text text-compact text-text-muted italic">
             {{ t("settings.correlation.noDimensionsCatchAll") }}
           </div>
         </div>
 
         <!-- Stream Sources -->
-        <div class="panel-block py-4 px-5 border-b border-b-[#f3f4f6]" :class="store.state.theme === 'dark' ? 'border-b-[#1f2937]' : ''">
-          <div class="panel-block-label text-xs font-semibold normal-case tracking-normal text-[#9ca3af] mb-[0.625rem]">
+        <div class="panel-block py-4 px-5 border-b border-b-border-default">
+          <div class="panel-block-label text-xs font-semibold normal-case tracking-normal text-text-label mb-2.5">
             {{ t("settings.correlation.streamSources") }}
           </div>
           <div class="flex flex-col gap-3">
@@ -427,8 +422,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   <span
                     v-for="stream in selectedService.logs_streams"
                     :key="stream"
-                    class="stream-name-badge inline-flex items-center py-[0.0625rem] px-[0.4375rem] rounded text-[0.6875rem] font-mono border whitespace-nowrap"
-                    :class="store.state.theme === 'dark' ? 'bg-[#1f2937] text-[#d1d5db] border-[#374151]' : 'bg-[#f3f4f6] text-[#374151] border-[#e5e7eb]'"
+                    class="stream-name-badge inline-flex items-center py-[0.0625rem] px-[0.4375rem] rounded-default text-2xs font-mono border whitespace-nowrap bg-surface-subtle text-text-body border-border-default"
                     >{{ stream }}</span
                   >
                 </div>
@@ -451,8 +445,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   <span
                     v-for="stream in selectedService.traces_streams"
                     :key="stream"
-                    class="stream-name-badge inline-flex items-center py-[0.0625rem] px-[0.4375rem] rounded text-[0.6875rem] font-mono border whitespace-nowrap"
-                    :class="store.state.theme === 'dark' ? 'bg-[#1f2937] text-[#d1d5db] border-[#374151]' : 'bg-[#f3f4f6] text-[#374151] border-[#e5e7eb]'"
+                    class="stream-name-badge inline-flex items-center py-[0.0625rem] px-[0.4375rem] rounded-default text-2xs font-mono border whitespace-nowrap bg-surface-subtle text-text-body border-border-default"
                     >{{ stream }}</span
                   >
                 </div>
@@ -475,8 +468,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   <span
                     v-for="stream in selectedService.metrics_streams"
                     :key="stream"
-                    class="stream-name-badge inline-flex items-center py-[0.0625rem] px-[0.4375rem] rounded text-[0.6875rem] font-mono border whitespace-nowrap"
-                    :class="store.state.theme === 'dark' ? 'bg-[#1f2937] text-[#d1d5db] border-[#374151]' : 'bg-[#f3f4f6] text-[#374151] border-[#e5e7eb]'"
+                    class="stream-name-badge inline-flex items-center py-[0.0625rem] px-[0.4375rem] rounded-default text-2xs font-mono border whitespace-nowrap bg-surface-subtle text-text-body border-border-default"
                     >{{ stream }}</span
                   >
                 </div>
@@ -491,9 +483,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             selectedService &&
             Object.keys(selectedService.field_name_mapping ?? {}).length > 0
           "
-          class="panel-block py-4 px-5 border-b border-b-[#f3f4f6]" :class="store.state.theme === 'dark' ? 'border-b-[#1f2937]' : ''"
+          class="panel-block py-4 px-5 border-b border-b-border-default"
         >
-          <div class="panel-block-label text-xs font-semibold normal-case tracking-normal text-[#9ca3af] mb-[0.625rem]">
+          <div class="panel-block-label text-xs font-semibold normal-case tracking-normal text-text-label mb-2.5">
             {{ t("settings.correlation.fieldNameMapping") }}
           </div>
           <div class="panel-mapping-grid">
@@ -503,13 +495,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               ).sort(([a], [b]) => a.localeCompare(b))"
               :key="raw"
             >
-              <span class="mapping-key font-mono text-[0.6875rem] py-[0.0625rem] px-[0.375rem] rounded border whitespace-nowrap" :class="store.state.theme === 'dark' ? 'bg-[#1f2937] text-[#d1d5db] border-[#374151]' : 'bg-[#f3f4f6] text-[#374151] border-[#e5e7eb]'">{{ raw }}</span>
+              <span class="mapping-key font-mono text-2xs py-[0.0625rem] px-1.5 rounded-default border whitespace-nowrap bg-surface-subtle text-text-body border-border-default">{{ raw }}</span>
               <OIcon
                 name="arrow-forward"
                 size="xs"
-                class="text-gray-400 justify-self-center"
+                class="text-text-muted justify-self-center"
               />
-              <span class="mapping-val font-mono text-[0.6875rem] py-[0.0625rem] px-[0.375rem] rounded border whitespace-nowrap" :class="store.state.theme === 'dark' ? 'bg-[rgba(6,95,70,0.2)] text-[#6ee7b7] border-[#065f46]' : 'bg-[#ecfdf5] text-[#065f46] border-[#a7f3d0]'">{{ mapped }}</span>
+              <span class="mapping-val font-mono text-2xs py-[0.0625rem] px-1.5 rounded-default border whitespace-nowrap bg-badge-success-soft-bg text-badge-success-soft-text border-badge-success-ol-border">{{ mapped }}</span>
             </template>
           </div>
         </div>
diff --git a/web/src/components/settings/DomainManagement.integration.spec.ts b/web/src/components/settings/DomainManagement.integration.spec.ts
index e8a8da07b8..6e6fcc0c2d 100644
--- a/web/src/components/settings/DomainManagement.integration.spec.ts
+++ b/web/src/components/settings/DomainManagement.integration.spec.ts
@@ -184,12 +184,7 @@ describe("DomainManagement Integration Tests", () => {
       props,
       global: {
         plugins: [i18n],
-        stubs: {
-          QDrawer: {
-            template: '<div class="q-drawer-stub"><slot /></div>',
-            props: ['modelValue', 'side', 'bordered', 'width', 'overlay', 'elevated'],
-          },
-        },
+        stubs: {},
       },
     });
   };
diff --git a/web/src/components/settings/DomainManagement.schema.ts b/web/src/components/settings/DomainManagement.schema.ts
index a37f808c7d..bc953f735c 100644
--- a/web/src/components/settings/DomainManagement.schema.ts
+++ b/web/src/components/settings/DomainManagement.schema.ts
@@ -6,18 +6,9 @@
 // lists + radios are display, and the save-time "domain needs emails" check
 // stays a submit-level guard in saveChanges().
 //
-// Restores the original BEFORE rules (truthy→Zod inversion):
-//   • newDomain: `isValidDomain(v) || invalidDomain` → required + domain regex
-//     (the audit adds ≤253 + reject-malicious, already enforced by isValidDomain).
-//   • domain.newEmail: REQUIRED for the Add-Email action — the email must be
-//     present, valid, and belong to the domain (clicking "Add Email" with an
-//     empty box shows "Email is required" on first submit). The add-email form is
-//     its OWN OForm, so requiring it does NOT affect the domain-level
-//     "Save Changes" button. (Deliberate UX choice over the old empty-passes rule.)
-//
 // The pure validators live here so they are shared by the schema AND re-exposed
-// from the component (the spec exercises them directly). Validation TIMING is
-// owned by OForm (submit-then-change); these schemas only describe what is valid.
+// from the component. Validation timing is owned by OForm (submit-then-change);
+// these schemas only describe what is valid.
 
 import { z } from "zod";
 
@@ -118,9 +109,7 @@ export const makeAddDomainSchema = (t: (_key: string) => string) =>
 
 export type AddDomainForm = z.infer<ReturnType<typeof makeAddDomainSchema>>;
 
-// Typed default-values factory (matches the pattern used by every other
-// settings form: licenseDefaults / extendTrialDefaults / generalSettingsDefaults
-// …) instead of an inline `{ newDomain: '' }` literal in the template.
+// Typed default-values factory for the add-domain row.
 export const addDomainDefaults = (): AddDomainForm => ({ newDomain: "" });
 
 // ── Add-email row (per-domain): REQUIRED + valid + belongs to the domain.
diff --git a/web/src/components/settings/DomainManagement.vue b/web/src/components/settings/DomainManagement.vue
index dedb774a49..642cc4a2d2 100644
--- a/web/src/components/settings/DomainManagement.vue
+++ b/web/src/components/settings/DomainManagement.vue
@@ -29,7 +29,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       >
         {{ t("settings.claimParserFunction") }}
       </div>
-      <div class="text-sm text-gray-400 mb-3">
+      <div class="text-sm text-text-secondary mb-3">
         {{ t("settings.claimParserFunctionDescription") }}
       </div>
 
@@ -76,13 +76,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         side="right"
         :width="40"
       >
-        <div class="p-4 text-sm">
-          <div class="mb-4 p-4 rounded" :class="store.state.theme === 'dark' ? 'bg-[#2a2a2a]' : 'bg-[#f5f5f5]'">
+        <div class="text-sm">
+          <div class="mb-4 p-4 rounded-default bg-surface-subtle">
             <div class="font-medium mb-2">{{ t("settings.claimParserFunctionInputTitle") }}</div>
             <div>{{ t("settings.claimParserFunctionInputDescription") }}</div>
           </div>
 
-          <div class="mb-4 p-4 rounded" :class="store.state.theme === 'dark' ? 'bg-[#2a2a2a]' : 'bg-[#f5f5f5]'">
+          <div class="mb-4 p-4 rounded-default bg-surface-subtle">
             <div class="font-medium mb-2">{{ t("settings.claimParserFunctionOutputTitle") }}</div>
             <div class="mb-2">{{ t("settings.claimParserFunctionOutputDescription") }}</div>
             <div class="ml-4">
@@ -92,7 +92,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </div>
 
           <!-- Recent Errors Section -->
-          <div v-if="claimParserFunction" class="p-4 rounded border-l-[3px]" :class="store.state.theme === 'dark' ? 'bg-[#2a2a2a] border-l-[#ff6b6b]' : 'bg-[#f5f5f5] border-l-[#c10015]'">
+          <div v-if="claimParserFunction" class="p-4 rounded-default border-l-[3px] bg-surface-subtle border-l-status-negative">
             <div class="flex items-center mb-2">
               <div class="flex-1 font-medium">{{ t("settings.claimParserRecentErrors") }}</div>
               <div>
@@ -112,7 +112,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <OSpinner size="xs" />
             </div>
 
-            <div v-else-if="recentErrors.length === 0" class="text-center py-2" style="color: var(--o2-text-muted)">
+            <div v-else-if="recentErrors.length === 0" class="text-center py-2 text-text-muted">
               {{ t("settings.noRecentErrors") }}
             </div>
 
@@ -120,17 +120,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <div
                 v-for="(error, index) in recentErrors.slice(0, 3)"
                 :key="index"
-                class="p-2 mb-1 rounded border-l-2"
-                :class="store.state.theme === 'dark' ? 'bg-[#2a1f1f] border-l-[#ff6b6b]' : 'bg-[#fff9f9] border-l-[#ff9e9e]'"
+                class="p-2 mb-1 rounded-default border-l-2 bg-status-error-bg border-l-status-negative"
               >
                 <div class="flex items-start mb-1">
                   <OIcon name="error" size="xs" class="mr-1 mt-1" />
                   <div class="flex-1">
                     <div class="text-xs font-medium">{{ error.error_type }}</div>
-                    <div class="text-xs" style="color: var(--o2-text-muted)">{{ formatTimestamp(error._timestamp) }}</div>
+                    <div class="text-xs text-text-muted">{{ formatTimestamp(error._timestamp) }}</div>
                   </div>
                 </div>
-                <div class="text-xs wrap-break-word" :class="store.state.theme === 'dark' ? 'text-[#ccc]' : 'text-[#666]'">{{ error.error }}</div>
+                <div class="text-xs wrap-break-word text-text-secondary">{{ error.error }}</div>
               </div>
 
               <!-- Show More Button -->
@@ -159,7 +158,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     >
       {{ t("settings.domainRestrictionsSubsection") }}
     </div>
-    <div class="text-sm text-gray-400 mb-4">
+    <div class="text-sm text-text-secondary mb-4">
       {{ t("settings.domainRestrictionsSubsectionDescription") }}
     </div>
 
@@ -194,11 +193,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           >{{ t('settings.addDomain') }}
           </OButton>
       </OForm>
-      <div class="text-xs text-gray-400 mt-1">
+      <div class="text-xs text-text-secondary mt-1">
         {{ t('settings.domainHint', { at_sign: '@' }) }}
       </div>
 
-      <div class="text-xs text-gray-400 mt-1 mb-3" v-if="domains.length > 0">
+      <div class="text-xs text-text-secondary mt-1 mb-3" v-if="domains.length > 0">
         {{ t("settings.domainConfiguredCount", { count: domains.length }) }}
       </div>
     </div>
@@ -208,10 +207,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <template v-for="(domain, index) in domains" :key="domain?.name || `domain-${index}`">
         <div
           v-if="domain && domain.name"
-          class="mb-1 border border-(--o2-border) rounded-lg"
-          :class="store.state.theme === 'dark' ? 'border-[#444] bg-[#1e1e1e]' : 'bg-white'"
+          class="mb-1 border border-border-default rounded-default bg-surface-base"
         >
-          <div class="flex items-center justify-between px-3 py-2 border-b border-b-(--o2-border) rounded-t-lg" :class="store.state.theme === 'dark' ? 'bg-[#2a2a2a] border-b-[#444]' : 'bg-[#f5f5f5]'">
+          <div class="flex items-center justify-between px-3 py-2 border-b border-b-border-default rounded-t-default bg-surface-subtle">
           <div
             :data-test="`domain-management-domain-name-${domain.name}`"
             class="text-base font-bold"
@@ -261,8 +259,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- Info message for all users -->
           <div
             v-if="domain.policy === 'allow_all'"
-            class="p-2 rounded mb-3"
-            :class="store.state.theme === 'dark' ? 'bg-[#1a2535] text-blue-300' : 'bg-blue-50 text-blue-700'"
+            class="p-2 rounded-default mb-3 bg-status-info-bg text-status-info-text"
           >
             {{ t("settings.allUsersAllowedMessage", { domain: '@'+domain.name }) }}
           </div>
@@ -270,8 +267,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- Info message for whole-domain block -->
           <div
             v-if="domain.policy === 'block_all'"
-            class="p-2 rounded mb-3"
-            :class="store.state.theme === 'dark' ? 'bg-[#351a1a] text-red-300' : 'bg-red-50 text-red-700'"
+            class="p-2 rounded-default mb-3 bg-status-error-bg text-status-error-text"
           >
             {{ t("settings.allUsersBlockedMessage", { domain: '@'+domain.name }) }}
           </div>
@@ -287,7 +283,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               >
                 <!-- Hint label above the row, so the error can grow below the
                      input without shoving the Add button out of alignment. -->
-                <div class="o-input-label text-sm font-semibold leading-tight mb-1">
+                <div class="o-input-label text-compact font-medium leading-tight text-input-label-text mb-1">
                   {{ t('settings.emailPlaceholder', { domain: '@' + domain.name }) }}
                 </div>
                 <div class="flex gap-x-2 items-start">
@@ -311,8 +307,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <div
                 v-for="(email, emailIndex) in domain.allowedEmails"
                 :key="email"
-                class="flex items-center justify-between p-2 mb-1 rounded border border-(--o2-border)"
-                :class="store.state.theme === 'dark' ? 'bg-[#2a2a2a] border-[#444]' : 'bg-[#f9f9f9]'"
+                class="flex items-center justify-between p-2 mb-1 rounded-default border border-border-default bg-surface-subtle"
               >
                 <div class="text-sm">{{ email }}</div>
                 <OButton
@@ -335,7 +330,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 @submit="(v) => addBlockedEmail(domain, v.newEmail)"
                 v-slot="{ isSubmitting }"
               >
-                <div class="o-input-label text-sm font-semibold leading-tight mb-1">
+                <div class="o-input-label text-compact font-medium leading-tight text-input-label-text mb-1">
                   {{ t('settings.blockedEmailPlaceholder', { domain: '@' + domain.name }) }}
                 </div>
                 <div class="flex gap-x-2 items-start">
@@ -359,8 +354,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <div
                 v-for="(email, emailIndex) in domain.blockedEmails"
                 :key="email"
-                class="flex items-center justify-between p-2 mb-1 rounded border"
-                :class="store.state.theme === 'dark' ? 'bg-[#2a1f1f] border-[#5a3a3a]' : 'bg-[#fff5f5] border-[#f3c6c6]'"
+                class="flex items-center justify-between p-2 mb-1 rounded-default border bg-banner-error-soft-bg border-banner-error-soft-border"
               >
                 <div class="text-sm">{{ email }}</div>
                 <OButton
@@ -377,7 +371,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- Hint for any block policy -->
           <div
             v-if="domain.policy === 'block_specific' || domain.policy === 'block_all'"
-            class="text-xs text-gray-400 mt-3"
+            class="text-xs text-text-secondary mt-3"
           >
             {{ t("settings.blockedUsersHint") }}
           </div>
@@ -388,26 +382,25 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <div
       v-else
       data-test="domain-management-no-domain-message"
-      class="text-xl font-semibold text-gray-400 mt-3 mb-4 w-full text-center p-4 border border-(--o2-border) rounded-lg"
-      :class="store.state.theme === 'dark' ? 'border-[#444] bg-[#1e1e1e]' : 'bg-white'"
+      class="text-xl font-semibold text-text-muted mt-3 mb-4 w-full text-center p-4 border border-border-default rounded-default bg-surface-base"
     >
       {{ t("settings.noDomainMessage") }}
     </div>
 
   </div>
     <!-- Action Buttons — flow inline at the end of the constrained column. -->
-    <div class="flex items-center justify-between gap-2 pt-4 mt-2 border-t border-(--o2-border-color)">
+    <div class="flex items-center justify-between gap-2 pt-4 mt-2 border-t border-card-glass-border">
       <!-- Unsaved-changes indicator: makes it obvious the in-card edits (domains, policies,
            allow/block emails) are staged until Save is clicked. -->
       <div
         v-if="isDirty"
         data-test="domain-management-unsaved-indicator"
-        class="flex items-center gap-2 text-sm"
-        style="color: var(--o2-text-muted)"
+        class="flex items-center gap-2 text-sm text-text-muted"
+       
       >
         <span
-          class="inline-block w-2 h-2 rounded-full shrink-0"
-          style="background: var(--o2-primary-color)"
+          class="inline-block w-2 h-2 rounded-full shrink-0 bg-accent"
+         
         ></span>
         {{ t('common.unsavedChanges') }}
       </div>
diff --git a/web/src/components/settings/GenAiAgentMappingSettings.vue b/web/src/components/settings/GenAiAgentMappingSettings.vue
index 228160011d..80086fb5e2 100644
--- a/web/src/components/settings/GenAiAgentMappingSettings.vue
+++ b/web/src/components/settings/GenAiAgentMappingSettings.vue
@@ -1,14 +1,10 @@
 <template>
-  <div
+  <OPageLayout
     data-test="gen-ai-agent-mapping-settings"
-    class="flex flex-col h-full min-h-0"
+    :subtitle="t('settings.genAiAgentMapping.description')"
+    icon="smart-toy"
+    bleed
   >
-    <AppPageHeader
-      :subtitle="t('settings.genAiAgentMapping.description')"
-      icon="smart-toy"
-      class="shrink-0 px-4 border-b border-border-default"
-      data-test="gen-ai-agent-mapping-header"
-    >
       <template #title>
         <span data-test="gen-ai-agent-mapping-page-title">{{
           t("settings.genAiAgentMapping.title")
@@ -45,7 +41,6 @@
           {{ t("settings.genAiAgentMapping.clearRegistry") }}
         </OButton>
       </template>
-    </AppPageHeader>
 
     <div
       v-if="loading"
@@ -122,11 +117,11 @@
       @click:secondary="clearRegistryDialogOpen = false"
       @click:primary="clearAgentRegistry"
     >
-      <p class="text-sm text-text-primary">
+      <p class="text-sm text-text-body">
         {{ t("settings.genAiAgentMapping.clearRegistryDescription") }}
       </p>
     </ODialog>
-  </div>
+  </OPageLayout>
 </template>
 
 <script setup lang="ts">
@@ -138,7 +133,7 @@ import OSpinner from "@/lib/feedback/Spinner/OSpinner.vue";
 import OTextarea from "@/lib/forms/Input/OTextarea.vue";
 import ODialog from "@/lib/overlay/Dialog/ODialog.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import { toast } from "@/lib/feedback/Toast/useToast";
 import genAiAgentMappingService, {
   fetchDefaultGenAiAgentMapping,
diff --git a/web/src/components/settings/General.schema.ts b/web/src/components/settings/General.schema.ts
index f036cc7059..6caaa7dec0 100644
--- a/web/src/components/settings/General.schema.ts
+++ b/web/src/components/settings/General.schema.ts
@@ -5,11 +5,10 @@
 // chips are pure-UI controls with their own inline actions and are decoupled
 // OUTSIDE the form, so they are NOT in this schema.
 //
-// Restores the original BEFORE rules (truthy→Zod inversion):
-//   • scrapeInterval: `!!v || scrapeIntervalRequired` (+ HTML min=0)
-//       → required AND ≥ 0 (0 is a valid value).
-//   • maxSeriesPerQuery: empty→pass; else `v>=1000 && v<=1000000`
-//       → OPTIONAL, only range-checked when present (NOT required).
+// Rules:
+//   • scrape_interval: required AND ≥ 0 (0 is a valid value).
+//   • max_series_per_query: OPTIONAL, only range-checked (1000..1000000) when
+//     present.
 //
 // The <input type="number"> emits a string, so the rules read the raw value via
 // Number(); the submit handler coerces at use.
@@ -21,8 +20,7 @@ import { z } from "zod";
 
 const isEmpty = (v: unknown) => v === "" || v === null || v === undefined;
 
-// Factory (takes `t`) so the messages are localized like makeLicenseSchema /
-// makeAddEmailSchema, rather than hardcoded English. The component owns the
+// Factory (takes `t`) so the messages are localized. The component owns the
 // `t` instance and builds the schema once in setup().
 export const makeGeneralSettingsSchema = (t: (_key: string) => string) =>
   z.object({
diff --git a/web/src/components/settings/General.vue b/web/src/components/settings/General.vue
index 59ca06eae1..823dae0561 100644
--- a/web/src/components/settings/General.vue
+++ b/web/src/components/settings/General.vue
@@ -31,7 +31,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           v-slot="{ isSubmitting }"
         >
           <!-- scape interval section -->
-          <div class="settings-grid-item grid grid-cols-3 gap-4 items-center py-4 border-b border-(--o2-border-color)">
+          <div class="settings-grid-item grid grid-cols-3 gap-4 items-center py-4 border-b border-card-glass-border">
             <span class="individual-setting-title text-sm font-medium leading-5">
               {{ t("settings.scrapintervalLabel") }}
             </span>
@@ -39,17 +39,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               name="scrape_interval"
               type="number"
               min="0"
-              class="ml-2"
+              class="ml-2 w-30!"
               data-test="general-settings-scrape-interval"
-              style="width: 120px"
             />
-            <span class="individual-setting-description text-[13px] opacity-70">
+            <span class="individual-setting-description text-compact opacity-70">
               {{ t("settings.scrapeIntervalDescription") }}
             </span>
           </div>
 
           <!-- Max Series Per Query section -->
-          <div class="settings-grid-item grid grid-cols-3 gap-4 items-center py-4 border-b border-(--o2-border-color)">
+          <div class="settings-grid-item grid grid-cols-3 gap-4 items-center py-4 border-b border-card-glass-border">
             <span class="individual-setting-title text-sm font-medium leading-5">
               {{ t("settings.maxSeriesPerQueryLabel") }}
             </span>
@@ -58,10 +57,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               type="number"
               :min="1000"
               :max="1000000"
-              class="ml-2"
+              class="ml-2 w-45!"
               :placeholder="'40000 (' + t('settings.systemDefault') + ')'"
               data-test="general-settings-max-series-per-query"
-              style="width: 180px"
             >
               <template v-slot:icon-right>
                 <OIcon name="info" size="sm" class="cursor-pointer">
@@ -69,71 +67,70 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </OIcon>
               </template>
             </OFormInput>
-            <span class="individual-setting-description text-[13px] opacity-70">
+            <span class="individual-setting-description text-compact opacity-70">
               {{ t("settings.maxSeriesPerQueryDescription") }}
             </span>
           </div>
 
           <!-- Manage Theme section -->
-          <div class="settings-grid-item grid grid-cols-3 gap-4 items-center py-4 border-b border-(--o2-border-color)">
+          <div class="settings-grid-item grid grid-cols-3 gap-4 items-center py-4 border-b border-card-glass-border">
             <span class="individual-setting-title text-sm font-medium leading-5">
               {{ t("settings.manageTheme") }}
             </span>
             <div
-              class="flex gap-2 items-center"
-              style="margin-left: -60px"
+              class="flex gap-2 items-center -ml-15"
             >
               <!-- Light Mode Theme -->
               <div
-                class="group/chip inline-flex items-center gap-2 py-[6px] pr-3 pl-[6px] rounded-[20px] cursor-pointer transition-all duration-200 bg-[rgba(0,0,0,0.04)] border border-[rgba(0,0,0,0.1)] hover:bg-[rgba(0,0,0,0.06)] hover:border-(--o2-primary-color) hover:-translate-y-px hover:shadow-[0_2px_8px_rgba(0,0,0,0.1)] dark:bg-[rgba(255,255,255,0.05)] dark:border-[rgba(255,255,255,0.15)] dark:hover:bg-[rgba(255,255,255,0.08)] dark:hover:shadow-[0_2px_8px_rgba(0,0,0,0.3)]"
+                class="group/chip inline-flex items-center gap-2 py-1.5 pr-3 pl-1.5 rounded-full cursor-pointer transition-all duration-200 bg-surface-subtle border border-border-default hover:bg-surface-subtle-hover hover:border-accent hover:-translate-y-px hover:shadow-md"
                 @click="handleThemeChipClick('light')"
                 data-test="theme-light-chip"
               >
                 <div
-                  class="color-circle w-6 h-6 rounded-full shrink-0 flex items-center justify-center shadow-[0_1px_3px_rgba(0,0,0,0.2)] relative overflow-hidden"
+                  class="color-circle w-6 h-6 rounded-full shrink-0 flex items-center justify-center shadow-[0_1px_3px_color-mix(in_srgb,var(--color-black)_20%,transparent)] relative overflow-hidden"
                   :style="{ backgroundColor: customLightColor }"
                 >
                   <OIcon
                     name="palette"
                     size="xs"
-                    class="opacity-0 transition-opacity duration-200 [filter:drop-shadow(0_1px_1px_rgba(0,0,0,0.3))] group-hover/chip:opacity-90"
+                    class="opacity-0 transition-opacity duration-200 filter-[drop-shadow(0_1px_1px_color-mix(in_srgb,var(--color-black)_30%,transparent))] group-hover/chip:opacity-90"
                   />
                 </div>
-                <span class="chip-label text-[11px] font-semibold opacity-50 tracking-[0.5px]">{{ t("settings.light") }}</span>
-                <span class="chip-value font-['SF_Mono','Monaco','Menlo',monospace] text-[11px] font-medium opacity-70 tracking-[-0.2px]">{{ customLightColor }}</span>
+                <span class="chip-label text-2xs font-semibold opacity-50 tracking-wider">{{ t("settings.light") }}</span>
+                <span class="chip-value font-mono text-2xs font-medium opacity-70 tracking-tight">{{ customLightColor }}</span>
               </div>
 
               <!-- Dark Mode Theme -->
               <div
-                class="group/chip inline-flex items-center gap-2 py-[6px] pr-3 pl-[6px] rounded-[20px] cursor-pointer transition-all duration-200 bg-[rgba(0,0,0,0.04)] border border-[rgba(0,0,0,0.1)] hover:bg-[rgba(0,0,0,0.06)] hover:border-(--o2-primary-color) hover:-translate-y-px hover:shadow-[0_2px_8px_rgba(0,0,0,0.1)] dark:bg-[rgba(255,255,255,0.05)] dark:border-[rgba(255,255,255,0.15)] dark:hover:bg-[rgba(255,255,255,0.08)] dark:hover:shadow-[0_2px_8px_rgba(0,0,0,0.3)]"
+                class="group/chip inline-flex items-center gap-2 py-1.5 pr-3 pl-1.5 rounded-full cursor-pointer transition-all duration-200 bg-surface-subtle border border-border-default hover:bg-surface-subtle-hover hover:border-accent hover:-translate-y-px hover:shadow-md"
                 @click="handleThemeChipClick('dark')"
                 data-test="theme-dark-chip"
               >
                 <div
-                  class="color-circle w-6 h-6 rounded-full shrink-0 flex items-center justify-center shadow-[0_1px_3px_rgba(0,0,0,0.2)] relative overflow-hidden"
+                  class="color-circle w-6 h-6 rounded-full shrink-0 flex items-center justify-center shadow-[0_1px_3px_color-mix(in_srgb,var(--color-black)_20%,transparent)] relative overflow-hidden"
                   :style="{ backgroundColor: customDarkColor }"
                 >
                   <OIcon
                     name="palette"
                     size="xs"
-                    class="opacity-0 transition-opacity duration-200 [filter:drop-shadow(0_1px_1px_rgba(0,0,0,0.3))] group-hover/chip:opacity-90"
+                    class="opacity-0 transition-opacity duration-200 filter-[drop-shadow(0_1px_1px_color-mix(in_srgb,var(--color-black)_30%,transparent))] group-hover/chip:opacity-90"
                   />
                 </div>
-                <span class="chip-label text-[11px] font-semibold opacity-50 tracking-[0.5px]">{{ t("settings.dark") }}</span>
-                <span class="chip-value font-['SF_Mono','Monaco','Menlo',monospace] text-[11px] font-medium opacity-70 tracking-[-0.2px]">{{ customDarkColor }}</span>
+                <span class="chip-label text-2xs font-semibold opacity-50 tracking-wider">{{ t("settings.dark") }}</span>
+                <span class="chip-value font-mono text-2xs font-medium opacity-70 tracking-tight">{{ customDarkColor }}</span>
               </div>
 
               <!-- Reset Button -->
               <div
-                class="group/resetChip inline-flex items-center justify-center w-8 h-8 rounded-full cursor-pointer transition-all duration-200 bg-transparent border border-dashed border-[rgba(0,0,0,0.2)] opacity-60 hover:bg-[rgba(239,68,68,0.08)] hover:border-[rgba(239,68,68,0.4)] hover:border-solid hover:opacity-100 hover:-translate-y-px hover:rotate-180 dark:border-[rgba(255,255,255,0.25)] dark:hover:bg-[rgba(239,68,68,0.15)] dark:hover:border-[rgba(239,68,68,0.5)]"
+                class="group/resetChip inline-flex items-center justify-center w-8 h-8 rounded-full cursor-pointer transition-all duration-200 bg-transparent border border-dashed border-border-default opacity-60 hover:bg-[color-mix(in_srgb,var(--color-error-500)_10%,transparent)] hover:border-error-400 hover:border-solid hover:opacity-100 hover:-translate-y-px hover:rotate-180"
                 @click="resetThemeColors"
                 data-test="reset-theme-colors-btn"
               >
-                <OIcon name="refresh" size="sm" class="group-hover/resetChip:text-[rgb(239,68,68)] dark:group-hover/resetChip:text-[rgb(248,113,113)]" />
+                <OIcon name="refresh" size="sm" class="group-hover/resetChip:text-error-500 dark:group-hover/resetChip:text-error-400" />
                 <OTooltip :content="t('settings.resetToDefaultColors')" side="top" />
               </div>
             </div>
-            <span class="individual-setting-description self-start text-[13px] opacity-70">
+            <span class="individual-setting-description self-start text-compact opacity-70">
               {{ t("settings.themeManagementDescription") }}
             </span>
           </div>
@@ -169,7 +166,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         />
       </div>
       <div>
-        <div class="settings-grid-item no-border-bottom grid grid-cols-3 gap-4 items-center py-4 border-b border-(--o2-border-color)">
+        <div class="settings-grid-item no-border-bottom grid grid-cols-3 gap-4 items-center py-4 border-b border-card-glass-border">
           <span class="individual-setting-title text-sm font-medium leading-5">
             {{ t("settings.customLogoText") }}
           </span>
@@ -178,7 +175,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             class="flex gap-2 items-center"
           >
             <OInput
-              class="w-[250px] mr-sm"
+              class="w-62.5 mr-sm"
               data-test="settings_ent_logo_custom_text"
               v-model="customText"
             />
@@ -202,7 +199,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </div>
           </div>
           <div v-else class="flex items-center">
-            <span class="w-[190px] text-center truncate"
+            <span class="w-47.5 text-center truncate"
               >{{
                 store.state.zoConfig.custom_logo_text ||
                 t("settings.noTextAvailable")
@@ -226,12 +223,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               icon-left="edit"
             />
           </div>
-          <span class="individual-setting-description text-[13px] opacity-70">
+          <span class="individual-setting-description text-compact opacity-70">
             {{ t("settings.customLogoTextDescription") }}
           </span>
         </div>
         <!-- Light Mode Logo -->
-        <div class="settings-grid-item grid grid-cols-3 gap-4 items-center py-4 border-b border-(--o2-border-color)">
+        <div class="settings-grid-item grid grid-cols-3 gap-4 items-center py-4 border-b border-card-glass-border">
           <div class="pt-2 individual-setting-title text-sm font-medium leading-5 w-full mb-5">
             {{ t("settings.customLogoTitle") }} ({{ t("settings.lightMode") }})
           </div>
@@ -248,8 +245,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 `data:image; base64, ` + store.state.zoConfig.custom_logo_img
               "
               :alt="t('settings.logoLabel')"
-              style="max-width: 150px; max-height: 31px"
-              class="mx-3"
+              class="mx-3 max-w-37.5 max-h-7.75"
             />
             <OButton
               data-test="setting_ent_custom_logo_img_delete_btn"
@@ -295,13 +291,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               />
             </div>
           </div>
-          <span class="individual-setting-description -translate-y-[5px] text-[13px] opacity-70">
+          <span class="individual-setting-description -translate-y-1.25 text-compact opacity-70">
               {{ t("settings.customLogoLightDescription") }}
             </span>
           </div>
 
         <!-- Dark Mode Logo -->
-        <div class="settings-grid-item grid grid-cols-3 gap-4 items-center py-4 border-b border-(--o2-border-color)">
+        <div class="settings-grid-item grid grid-cols-3 gap-4 items-center py-4 border-b border-card-glass-border">
           <div class="pt-2 individual-setting-title text-sm font-medium leading-5 w-full mb-5">
             {{ t("settings.customLogoTitle") }} ({{ t("settings.darkMode") }})
           </div>
@@ -319,8 +315,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 store.state.zoConfig.custom_logo_dark_img
               "
               :alt="t('settings.logoLabel')"
-              style="max-width: 150px; max-height: 31px"
-              class="mx-3"
+              class="mx-3 max-w-37.5 max-h-7.75"
             />
             <OButton
               data-test="setting_ent_custom_logo_dark_img_delete_btn"
@@ -366,7 +361,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               />
             </div>
           </div>
-          <span class="individual-setting-description -translate-y-[5px] text-[13px] opacity-70">
+          <span class="individual-setting-description -translate-y-1.25 text-compact opacity-70">
               {{ t("settings.customLogoDarkDescription") }}
             </span>
           </div>
@@ -380,14 +375,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       id="dangerZone"
       v-if="canDeleteOrg"
       data-test="general-settings-danger-zone"
-      class="mt-8 overflow-hidden rounded-lg border border-(--color-banner-error-soft-border)"
+      class="mt-8 overflow-hidden rounded-default border border-banner-error-soft-border"
     >
       <!-- Red-accented header signals this section is destructive. -->
       <div
-        class="flex items-center gap-2 border-b border-(--color-banner-error-soft-border) bg-(--color-banner-error-soft-bg) px-5 py-3"
+        class="flex items-center gap-2 border-b border-banner-error-soft-border bg-banner-error-soft-bg px-5 py-3"
       >
-        <OIcon name="warning" size="sm" class="text-(--color-banner-error-soft-text)" />
-        <span class="text-base font-bold text-(--color-banner-error-soft-text)">
+        <OIcon name="warning" size="sm" class="text-banner-error-soft-text" />
+        <span class="text-base font-bold text-banner-error-soft-text">
           {{ t("settings.dangerZone") }}
         </span>
       </div>
@@ -396,7 +391,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
            name is interpolated so the sentence names the thing being destroyed. -->
       <div class="flex items-start justify-between gap-6 bg-surface-base px-5 py-4">
         <div class="flex flex-col gap-1">
-          <span class="text-sm font-semibold text-text-primary">
+          <span class="text-sm font-semibold text-text-heading">
             {{ t("settings.deleteOrganizationTitle") }}
           </span>
           <i18n-t
@@ -405,7 +400,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             class="max-w-3xl text-sm text-text-secondary"
           >
             <template #name>
-              <span class="font-semibold text-text-primary">{{ deleteOrgName }}</span>
+              <span class="font-semibold text-text-body">{{ deleteOrgName }}</span>
             </template>
           </i18n-t>
         </div>
@@ -436,7 +431,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         >
           <div class="flex items-center gap-2">
             <OIcon :name="fact.icon" size="sm" class="shrink-0 text-text-muted" />
-            <span class="text-sm font-semibold text-text-primary">{{ fact.title }}</span>
+            <span class="text-sm font-semibold text-text-heading">{{ fact.title }}</span>
           </div>
           <span class="text-xs text-text-secondary">{{ fact.detail }}</span>
         </div>
@@ -487,7 +482,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   >
     <div class="flex flex-col gap-3">
       <!-- What will happen -->
-      <p class="text-sm text-text-primary">
+      <p class="text-sm text-text-body">
         {{
           t("settings.deleteOrganizationConfirm", {
             name: deleteOrgName,
@@ -507,25 +502,25 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <p
         v-else-if="orgScope"
         data-test="general-delete-org-scope"
-        class="text-xs font-semibold text-text-primary"
+        class="text-xs font-semibold text-text-body"
       >
         {{ orgScope }}
       </p>
 
       <!-- Irreversible-action warning callout -->
       <div
-        class="flex items-start gap-2 rounded border border-(--color-banner-error-soft-border) bg-(--color-banner-error-soft-bg) px-3 py-2"
+        class="flex items-start gap-2 rounded-default border border-banner-error-soft-border bg-banner-error-soft-bg px-3 py-2"
       >
         <OIcon
           name="warning"
           size="sm"
-          class="mt-0.5 shrink-0 text-(--color-banner-error-soft-text)"
+          class="mt-0.5 shrink-0 text-banner-error-soft-text"
         />
         <div class="flex flex-col gap-1">
-          <p class="text-xs text-(--color-banner-error-soft-text)">
+          <p class="text-xs text-banner-error-soft-text">
             {{ t("settings.deleteOrganizationWarning") }}
           </p>
-          <p class="text-xs text-(--color-banner-error-soft-text)">
+          <p class="text-xs text-banner-error-soft-text">
             {{ t("settings.deleteOrganizationRecoverable") }}
           </p>
         </div>
@@ -536,7 +531,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <label class="block text-xs text-text-secondary">
           <i18n-t keypath="settings.deleteOrganizationTypeToConfirm" tag="span">
             <template #name>
-              <span class="font-semibold text-text-primary">{{ deleteOrgName }}</span>
+              <span class="font-semibold text-text-body">{{ deleteOrgName }}</span>
             </template>
           </i18n-t>
         </label>
@@ -558,6 +553,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { computed, defineComponent, onActivated, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { useStore } from "vuex";
+import { useTheme } from "@/composables/useTheme";
 import { useRouter } from "vue-router";
 import organizations from "@/services/organizations";
 import usersService from "@/services/users";
@@ -567,7 +563,7 @@ import configService from "@/services/config";
 import DOMPurify from "dompurify";
 import GroupHeader from "../common/GroupHeader.vue";
 import store from "@/test/unit/helpers/store";
-import { applyThemeColors } from "@/utils/theme";
+import { applyThemeColors, switchThemeMode } from "@/utils/theme";
 import { useLocalOrganization } from "@/utils/zincutils";
 import { formatSizeFromMB } from "@/utils/formatters";
 import OButton from "@/lib/core/Button/OButton.vue";
@@ -618,10 +614,9 @@ export default defineComponent({
     const { t } = useI18n();
 
     const store = useStore();
+    const { isDark } = useTheme();
     const router: any = useRouter();
 
-    // Schema-driven validation replaces the manual scrapeIntervalError /
-    // maxSeriesError refs + the imperative if-checks in onSubmit.
     // Built once from the component's `t` so the messages are localized.
     const generalSettingsSchema = makeGeneralSettingsSchema(t);
     // Dynamic defaults (edit-prefill from the store) → a typed computed.
@@ -668,7 +663,7 @@ export default defineComponent({
     // Color picker dialog state
     const showColorPicker = ref(false); // Controls dialog visibility
     const currentPickerMode = ref<"light" | "dark">("light"); // Which mode is being edited
-    const tempColor = ref(DEFAULT_LIGHT_COLOR); // Bound to q-color component
+    const tempColor = ref(DEFAULT_LIGHT_COLOR); // Bound to the color picker component
 
     /**
      * Update theme colors from Vuex store
@@ -676,8 +671,6 @@ export default defineComponent({
      * Priority: Vuex store tempThemeColors > organizationSettings > defaults
      */
     const updateFromStore = () => {
-      // (scrape_interval is now form-owned via :default-values — no ref to sync.)
-
       // Get theme colors from store with priority order
       // 1. Check Vuex store for temporary preview colors (highest priority)
       // 2. Check organization settings for backend defaults
@@ -710,7 +703,7 @@ export default defineComponent({
 
       // Apply the theme colors if they changed
       if (shouldApply) {
-        const currentMode = store.state.theme === "dark" ? "dark" : "light";
+        const currentMode = isDark.value ? "dark" : "light";
         const color = currentMode === "light" ? newLightColor : newDarkColor;
         const isDefault =
           color === DEFAULT_LIGHT_COLOR || color === DEFAULT_DARK_COLOR;
@@ -935,7 +928,7 @@ export default defineComponent({
         );
 
         // Apply the current mode's theme
-        const currentMode = store.state.theme === "dark" ? "dark" : "light";
+        const currentMode = isDark.value ? "dark" : "light";
         const color =
           currentMode === "light"
             ? customLightColor.value
@@ -957,7 +950,7 @@ export default defineComponent({
       }
     };
 
-    const uploadImage = (fileList: any = null, theme: string = "light") => {
+    const uploadImage = (fileList: any = null, mode: string = "light") => {
       const selectedFiles = fileList || files.value;
       // Handle single file or file array
       //but mostly we will support single file because we only show one image at a time right
@@ -984,7 +977,7 @@ export default defineComponent({
           .createLogo(
             store.state.selectedOrganization?.identifier || orgIdentifier,
             formData,
-            theme,
+            mode,
           )
           .then(async (res) => {
             if (res.status == 200) {
@@ -992,7 +985,7 @@ export default defineComponent({
                 variant: "success",
                 message: t("settings.logoUpdatedSuccessfully", {
                   mode:
-                    theme === "dark"
+                    mode === "dark"
                       ? t("settings.darkMode")
                       : t("settings.lightMode"),
                 }),
@@ -1003,7 +996,7 @@ export default defineComponent({
               });
 
               // Clear the appropriate file ref
-              if (theme === "dark") {
+              if (mode === "dark") {
                 filesDark.value = null;
               } else {
                 filesLight.value = null;
@@ -1038,7 +1031,7 @@ export default defineComponent({
       }
     };
 
-    const deleteLogo = (theme: string = "light") => {
+    const deleteLogo = (mode: string = "light") => {
       loadingState.value = true;
       let orgIdentifier = "default";
       for (let item of store.state.organizations) {
@@ -1049,7 +1042,7 @@ export default defineComponent({
       settingsService
         .deleteLogo(
           store.state.selectedOrganization?.identifier || orgIdentifier,
-          theme,
+          mode,
         )
         .then(async (res: any) => {
           if (res.status == 200) {
@@ -1057,7 +1050,7 @@ export default defineComponent({
               variant: "success",
               message: t("settings.logoDeletedSuccessfully", {
                 mode:
-                  theme === "dark"
+                  mode === "dark"
                     ? t("settings.darkMode")
                     : t("settings.lightMode"),
               }),
@@ -1178,7 +1171,7 @@ export default defineComponent({
       // Apply the theme immediately for current mode.
       // isDefault=false so the default theme's (O2 Signature) actual colors are
       // applied rather than reverting to the base stylesheet palette.
-      const currentMode = store.state.theme === "dark" ? "dark" : "light";
+      const currentMode = isDark.value ? "dark" : "light";
       const color =
         currentMode === "light" ? DEFAULT_LIGHT_COLOR : DEFAULT_DARK_COLOR;
       applyThemeColors(color, currentMode, false);
@@ -1196,12 +1189,6 @@ export default defineComponent({
      * @param mode - 'light' or 'dark' theme mode to switch to
      */
     const toggleThemeMode = (mode: "light" | "dark") => {
-      // Update theme mode in store
-      store.dispatch("appTheme", mode);
-
-      // Update dark mode — this is critical for proper theme application
-      document.documentElement.classList.toggle("dark", mode === "dark");
-
       // Persist theme preference to localStorage
       localStorage.setItem("theme", mode);
 
@@ -1209,9 +1196,19 @@ export default defineComponent({
       const color =
         mode === "light" ? customLightColor.value : customDarkColor.value;
 
-      // Apply the theme color for the new mode. isDefault=false so the resolved
-      // color (including the O2 Signature default) is always applied directly.
-      applyThemeColors(color, mode, false);
+      // All DOM writes of the switch run inside switchThemeMode so the mode
+      // flip cross-fades as one frame.
+      switchThemeMode(mode, () => {
+        // Update theme mode in store
+        store.dispatch("appTheme", mode);
+
+        // Update dark mode — this is critical for proper theme application
+        document.documentElement.classList.toggle("dark", mode === "dark");
+
+        // Apply the theme color for the new mode. isDefault=false so the resolved
+        // color (including the O2 Signature default) is always applied directly.
+        applyThemeColors(color, mode, false);
+      });
     };
 
     const cancelLogoText = () => {
@@ -1296,7 +1293,7 @@ export default defineComponent({
 
         // Re-apply the correct (saved) colors for the current mode so the rest
         // of the app doesn't remain stuck with the preview's CSS variables.
-        const currentMode = store.state.theme === "dark" ? "dark" : "light";
+        const currentMode = isDark.value ? "dark" : "light";
         const defaultLight = store.state.defaultThemeColors?.light || "#3F7994";
         const defaultDark = store.state.defaultThemeColors?.dark || "#5B9FBE";
 
@@ -1388,18 +1385,3 @@ export default defineComponent({
   },
 });
 </script>
-
-<style>
-/* The theme chips' dark background/border are set via `dark:*` utilities,
-   which don't apply in this app (dark mode is toggled by `body.body--dark`,
-   not the OS media query Tailwind's `dark:` variant targets). Restore them
-   with class-based rules so the chips keep their fill + border in dark mode. */
-.body--dark [data-test="theme-light-chip"],
-.body--dark [data-test="theme-dark-chip"] {
-  background: rgba(255, 255, 255, 0.05);
-  border-color: rgba(255, 255, 255, 0.15);
-}
-.body--dark [data-test="reset-theme-colors-btn"] {
-  border-color: rgba(255, 255, 255, 0.25);
-}
-</style>
diff --git a/web/src/components/settings/ImportModelPricing.vue b/web/src/components/settings/ImportModelPricing.vue
index 0d307f9271..4d0bfcfbe7 100644
--- a/web/src/components/settings/ImportModelPricing.vue
+++ b/web/src/components/settings/ImportModelPricing.vue
@@ -1,4 +1,4 @@
-<!-- Copyright 2026 OpenObserve Inc.
+<!-- Copyright 2026 OpenObserve Inc.
 
 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU Affero General Public License as published by
@@ -31,11 +31,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <div class="w-full h-full flex flex-col border-l border-border-default" style="min-width: 400px;">
         <div
           v-if="modelPricingErrorsToDisplay.length > 0"
-          class="text-center text-[0.9375rem] font-semibold text-text-primary py-3 shrink-0"
+          class="text-center text-sm font-semibold text-text-heading py-3 shrink-0"
         >
           {{ t('modelPricing.errorValidations') }}
         </div>
-        <div v-else class="text-center text-[0.9375rem] font-semibold text-text-primary py-3 shrink-0">{{ t('modelPricing.outputMessages') }}</div>
+        <div v-else class="text-center text-sm font-semibold text-text-heading py-3 shrink-0">{{ t('modelPricing.outputMessages') }}</div>
         <OSeparator class="mt-1 shrink-0" />
         <div class="flex-1 min-h-0 overflow-auto resize-none">
           <!-- Model Pricing Errors Section -->
@@ -56,7 +56,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 >
                   <span
                     data-test="model-pricing-import-name-error"
-                    class="text-red"
+                    class="text-status-negative"
                     v-if="
                       typeof errorMessage === 'object' &&
                       errorMessage.field == 'model_pricing_name'
@@ -74,7 +74,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </span>
                   <span
                     data-test="model-pricing-import-pattern-error"
-                    class="text-red"
+                    class="text-status-negative"
                     v-else-if="
                       typeof errorMessage === 'object' &&
                       errorMessage.field == 'model_pricing_pattern'
@@ -90,7 +90,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       />
                     </div>
                   </span>
-                  <span class="text-red" v-else>{{ errorMessage }}</span>
+                  <span class="text-status-negative" v-else>{{ errorMessage }}</span>
                 </div>
               </div>
             </div>
@@ -113,11 +113,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :class="{
                   'py-1.25 text-sm font-bold': true,
                   'text-green ': val.success,
-                  'text-red': !val.success,
+                  'text-status-negative': !val.success,
                 }"
                 :data-test="`model-pricing-import-creation-${index}-message`"
               >
-                <pre class="creators-message" style="white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; max-width: 100%;">{{ val.message }}</pre>
+                <pre class="creators-message whitespace-pre-wrap max-w-full" style="word-wrap: break-word; overflow-wrap: break-word; word-break: break-word;">{{ val.message }}</pre>
               </div>
             </div>
           </div>
diff --git a/web/src/components/settings/ImportRegexPattern.spec.ts b/web/src/components/settings/ImportRegexPattern.spec.ts
index 1c837ad2d5..5712cc0bc7 100644
--- a/web/src/components/settings/ImportRegexPattern.spec.ts
+++ b/web/src/components/settings/ImportRegexPattern.spec.ts
@@ -87,11 +87,6 @@ describe("ImportRegexPattern", () => {
               return { jsonArrayOfObj, jsonStr, isImporting, jsonFiles, url, updateJsonArray };
             },
           },
-          "q-input": true,
-          "q-btn": true,
-          "q-separator": true,
-          "q-form": true,
-          "q-file": true,
           "app-tabs": {
             template: '<div :data-test="$attrs[\'data-test\']" :class="$attrs.class"><slot></slot></div>',
             props: ['tabs', 'activeTab'],
diff --git a/web/src/components/settings/ImportRegexPattern.vue b/web/src/components/settings/ImportRegexPattern.vue
index a3b9d4013c..80abcb0f11 100644
--- a/web/src/components/settings/ImportRegexPattern.vue
+++ b/web/src/components/settings/ImportRegexPattern.vue
@@ -1,4 +1,4 @@
-<!-- Copyright 2026 OpenObserve Inc.
+<!-- Copyright 2026 OpenObserve Inc.
 
 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU Affero General Public License as published by
@@ -14,18 +14,11 @@ You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <div class="flex flex-col flex-1 min-h-0 h-full">
-    <!-- Standard page header (AppPageHeader), matching Add Panel / Import Dashboard.
-         BaseImport's built-in header is hidden (hide-header) so this single header
-         serves all three tabs. The title preserves the existing per-tab text: the
-         Built-in Patterns tab keeps t('regex_patterns.import_title') ("Import
-         Pattern") and the File / URL tabs keep "Import Regex Pattern" — no header
-         text is changed by this migration. -->
-    <AppPageHeader
-      :title="headerTitle"
-      :back="{ label: t('regex_patterns.title'), onClick: arrowBackFn, dataTest: 'regex-pattern-import-back-btn' }"
-      class="px-4 border-b border-border-default"
-    >
+  <OPageLayout
+    :title="headerTitle"
+    :back="{ label: t('regex_patterns.title'), onClick: arrowBackFn, dataTest: 'regex-pattern-import-back-btn' }"
+    bleed
+  >
       <template #actions>
         <OButton
           variant="outline"
@@ -43,7 +36,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           data-test="regex-pattern-import-json-btn"
         >{{ t('dashboard.import') }}</OButton>
       </template>
-    </AppPageHeader>
 
     <base-import
       v-if="activeTab !== 'import_built_in_patterns'"
@@ -64,11 +56,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <div class="w-full h-full flex flex-col border-l border-border-default" style="min-width: 400px;">
         <div
           v-if="regexPatternErrorsToDisplay.length > 0"
-          class="text-center text-[0.9375rem] font-semibold text-text-primary py-3 shrink-0"
+          class="text-center text-sm font-semibold text-text-heading py-3 shrink-0"
         >
           {{ t('settings.importRegexPattern.errorValidations') }}
         </div>
-        <div v-else class="text-center text-[0.9375rem] font-semibold text-text-primary py-3 shrink-0">{{ t('settings.importRegexPattern.outputMessages') }}</div>
+        <div v-else class="text-center text-sm font-semibold text-text-heading py-3 shrink-0">{{ t('settings.importRegexPattern.outputMessages') }}</div>
         <OSeparator class="mt-1 shrink-0" />
         <div class="flex-1 min-h-0 overflow-auto resize-none">
               <!-- Regex Pattern Errors Section -->
@@ -91,7 +83,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     >
                       <span
                         data-test="regex-pattern-import-name-error"
-                        class="text-red"
+                        class="text-status-negative"
                         v-if="
                           typeof errorMessage === 'object' &&
                           errorMessage.field == 'regex_pattern_name'
@@ -109,7 +101,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       </span>
                       <span
                         data-test="regex-pattern-import-pattern-error"
-                        class="text-red"
+                        class="text-status-negative"
                         v-else-if="
                           typeof errorMessage === 'object' &&
                           errorMessage.field == 'regex_pattern'
@@ -126,7 +118,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                           />
                         </div>
                       </span>
-                      <span class="text-red" v-else>{{ errorMessage }}</span>
+                      <span class="text-status-negative" v-else>{{ errorMessage }}</span>
                     </div>
                   </div>
                 </div>
@@ -148,11 +140,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     :class="{
                       'py-1.25 text-sm font-bold': true,
                       'text-green ': val.success,
-                      'text-red': !val.success,
+                      'text-status-negative': !val.success,
                     }"
                     :data-test="`regex-pattern-import-creation-${index}-message`"
                   >
-                    <pre style="white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; max-width: 100%;">{{ val.message }}</pre>
+                    <pre class="whitespace-pre-wrap max-w-full" style="word-wrap: break-word; overflow-wrap: break-word; word-break: break-word;">{{ val.message }}</pre>
                   </div>
                 </div>
               </div>
@@ -166,7 +158,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       v-if="activeTab === 'import_built_in_patterns'"
       class="w-full flex-1 min-h-0 overflow-hidden flex flex-col"
     >
-      <div class="card-container pt-2 px-2.5">
+      <div class="bg-card-glass-bg pt-2 px-2.5">
         <div class="app-tabs-container h-9 w-fit">
           <app-tabs
             data-test="regex-pattern-import-tabs"
@@ -183,7 +175,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         data-test="built-in-patterns-tab"
       />
     </div>
-  </div>
+  </OPageLayout>
 </template>
 
 <script lang="ts">
@@ -202,7 +194,7 @@ import { useRouter } from "vue-router";
 
 
 import AppTabs from "../common/AppTabs.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import OButton from "@/lib/core/Button/OButton.vue";
 import OInput from "@/lib/forms/Input/OInput.vue";
 import OSeparator from '@/lib/core/Separator/OSeparator.vue';
@@ -553,7 +545,7 @@ export default defineComponent({
     OSeparator,
     BaseImport,
     AppTabs,
-    AppPageHeader,
+    OPageLayout,
     OButton,
     OInput,
     BuiltInPatternsTab: defineAsyncComponent(
diff --git a/web/src/components/settings/License.schema.ts b/web/src/components/settings/License.schema.ts
index 4b2ca2bcc5..3711671121 100644
--- a/web/src/components/settings/License.schema.ts
+++ b/web/src/components/settings/License.schema.ts
@@ -4,9 +4,6 @@
 // `licenseKey` field is entered in two mutually-exclusive cards (the "no
 // license" card and the "update license" card); both share this schema.
 //
-// Replaces the `:disabled="!licenseKey.trim()"` Save gate with a schema rule
-// (R3 — the Save button stays enabled; the schema blocks an empty submit).
-//
 // Validation TIMING is owned by OForm (submit-then-change via revalidateLogic);
 // this file only describes WHAT is valid.
 
diff --git a/web/src/components/settings/License.vue b/web/src/components/settings/License.vue
index bcf2e22e59..5252116022 100644
--- a/web/src/components/settings/License.vue
+++ b/web/src/components/settings/License.vue
@@ -13,7 +13,7 @@
     >
       <div class="col-span-1 min-h-0">
         <div v-if="licenseData.license === null || !licenseData.license">
-          <OCard class="mb-4 border border-solid border-[var(--o2-border-color)]">
+          <OCard class="mb-4 border border-solid border-card-glass-border">
             <OCardSection role="body">
               <div class="text-xl font-semibold">{{ t("about.no_license_found") }}</div>
               <div class="mt-2 text-sm">
@@ -36,7 +36,7 @@
             </OCardSection>
           </OCard>
 
-          <OCard class="border border-solid border-[var(--o2-border-color)]">
+          <OCard class="border border-solid border-card-glass-border">
             <OCardSection role="body">
               <div class="text-base font-medium mb-3">
                 {{ t("about.enter_license_key") }}
@@ -56,10 +56,10 @@
                   style="min-height: 200px"
                 />
                 <div v-if="isLicenseKeyAutoFilled" class="mt-2 mb-3">
-                  <div class="flex items-center py-3 px-4 bg-[rgba(34,197,94,0.08)] border border-solid border-[rgba(34,197,94,0.2)] rounded-lg [backdrop-filter:blur(10px)] transition-all duration-200 dark:bg-[rgba(34,197,94,0.15)] dark:border-[rgba(34,197,94,0.3)] dark:shadow-[0_2px_8px_rgba(0,0,0,0.2)]">
+                  <div class="flex items-center py-3 px-4 bg-banner-success-bg border border-solid border-banner-success-border rounded-default backdrop-blur-md transition-all duration-200 dark:shadow-md">
                     <OIcon
                       name="check-circle"
-                      class="text-green-600 mr-2"
+                      class="text-status-positive mr-2"
                       size="md"
                     />
                     <span class="text-sm">{{
@@ -83,25 +83,25 @@
         </div>
 
         <div v-else>
-          <OCard class="border border-solid border-[var(--o2-border-color)]">
+          <OCard class="border border-solid border-card-glass-border">
             <OCardSection role="body">
               <div class="text-xl font-semibold mb-3">{{ t("about.license_info") }}</div>
-              <table class="w-full border-collapse border border-solid border-[var(--color-table-header-border)]">
+              <table class="w-full border-collapse border border-solid border-table-header-border">
                 <tbody>
-                  <tr class="border-b border-solid border-[var(--color-table-row-divider)]">
-                    <td class="font-bold px-3 py-2 leading-[1.2] border-r border-solid border-[var(--color-table-row-divider)]">
+                  <tr class="border-b border-solid border-table-row-divider">
+                    <td class="font-bold px-3 py-2 leading-[1.2] border-r border-solid border-table-row-divider">
                       {{ t("about.installation_id") }}
                     </td>
                     <td class="px-3 py-2 leading-[1.2]">{{ licenseData.installation_id }}</td>
                   </tr>
-                  <tr class="border-b border-solid border-[var(--color-table-row-divider)]">
-                    <td class="font-bold px-3 py-2 leading-[1.2] border-r border-solid border-[var(--color-table-row-divider)]">
+                  <tr class="border-b border-solid border-table-row-divider">
+                    <td class="font-bold px-3 py-2 leading-[1.2] border-r border-solid border-table-row-divider">
                       {{ t("about.license_id") }}
                     </td>
                     <td class="px-3 py-2 leading-[1.2]">{{ licenseData.license.license_id }}</td>
                   </tr>
-                  <tr class="border-b border-solid border-[var(--color-table-row-divider)]">
-                    <td class="font-bold px-3 py-2 leading-[1.2] border-r border-solid border-[var(--color-table-row-divider)]">
+                  <tr class="border-b border-solid border-table-row-divider">
+                    <td class="font-bold px-3 py-2 leading-[1.2] border-r border-solid border-table-row-divider">
                       {{ t("about.status_lbl") }}
                     </td>
                     <td class="px-3 py-2 leading-[1.2]">
@@ -114,24 +114,24 @@
                       </OBadge>
                     </td>
                   </tr>
-                  <tr class="border-b border-solid border-[var(--color-table-row-divider)]">
-                    <td class="font-bold px-3 py-2 leading-[1.2] border-r border-solid border-[var(--color-table-row-divider)]">
+                  <tr class="border-b border-solid border-table-row-divider">
+                    <td class="font-bold px-3 py-2 leading-[1.2] border-r border-solid border-table-row-divider">
                       {{ t("about.create_at_lbl") }}
                     </td>
                     <td class="px-3 py-2 leading-[1.2]">{{ formatDate(licenseData.license.created_at) }}</td>
                   </tr>
-                  <tr class="border-b border-solid border-[var(--color-table-row-divider)]">
-                    <td class="font-bold px-3 py-2 leading-[1.2] border-r border-solid border-[var(--color-table-row-divider)]">
+                  <tr class="border-b border-solid border-table-row-divider">
+                    <td class="font-bold px-3 py-2 leading-[1.2] border-r border-solid border-table-row-divider">
                       {{ t("about.expires_at_lbl") }}
                     </td>
                     <td class="px-3 py-2 leading-[1.2]">{{ formatDate(licenseData.license.expires_at) }}</td>
                   </tr>
-                  <tr class="border-b border-solid border-[var(--color-table-row-divider)]">
-                    <td class="font-bold px-3 py-2 leading-[1.2] border-r border-solid border-[var(--color-table-row-divider)]">{{ t("about.company") }}</td>
+                  <tr class="border-b border-solid border-table-row-divider">
+                    <td class="font-bold px-3 py-2 leading-[1.2] border-r border-solid border-table-row-divider">{{ t("about.company") }}</td>
                     <td class="px-3 py-2 leading-[1.2]">{{ licenseData.license.company }}</td>
                   </tr>
-                  <tr v-if="licenseData.key" class="border-b border-solid border-[var(--color-table-row-divider)]">
-                    <td class="font-bold px-3 py-2 leading-[1.2] border-r border-solid border-[var(--color-table-row-divider)]">
+                  <tr v-if="licenseData.key" class="border-b border-solid border-table-row-divider">
+                    <td class="font-bold px-3 py-2 leading-[1.2] border-r border-solid border-table-row-divider">
                       {{ t("about.license_key") }}
                     </td>
                     <td class="px-3 py-2 leading-[1.2]">
@@ -149,20 +149,20 @@
                       </div>
                     </td>
                   </tr>
-                  <tr v-if="licenseData.license.contact_name" class="border-b border-solid border-[var(--color-table-row-divider)]">
-                    <td class="font-bold px-3 py-2 leading-[1.2] border-r border-solid border-[var(--color-table-row-divider)]">
+                  <tr v-if="licenseData.license.contact_name" class="border-b border-solid border-table-row-divider">
+                    <td class="font-bold px-3 py-2 leading-[1.2] border-r border-solid border-table-row-divider">
                       {{ t("about.contact_name") }}
                     </td>
                     <td class="px-3 py-2 leading-[1.2]">{{ licenseData.license.contact_name }}</td>
                   </tr>
-                  <tr v-if="licenseData.license.contact_email" class="border-b border-solid border-[var(--color-table-row-divider)]">
-                    <td class="font-bold px-3 py-2 leading-[1.2] border-r border-solid border-[var(--color-table-row-divider)]">
+                  <tr v-if="licenseData.license.contact_email" class="border-b border-solid border-table-row-divider">
+                    <td class="font-bold px-3 py-2 leading-[1.2] border-r border-solid border-table-row-divider">
                       {{ t("about.contact_email") }}
                     </td>
                     <td class="px-3 py-2 leading-[1.2]">{{ licenseData.license.contact_email }}</td>
                   </tr>
                   <tr v-if="licenseData.license.environment_type">
-                    <td class="font-bold px-3 py-2 leading-[1.2] border-r border-solid border-[var(--color-table-row-divider)]">
+                    <td class="font-bold px-3 py-2 leading-[1.2] border-r border-solid border-table-row-divider">
                       {{ t("about.environment_type") }}
                     </td>
                     <td class="px-3 py-2 leading-[1.2]">{{ licenseData.license.environment_type }}</td>
@@ -199,7 +199,7 @@
             </OCardSection>
           </OCard>
 
-          <OCard v-show="showUpdateForm" class="mt-4 border border-solid border-[var(--o2-border-color)]">
+          <OCard v-show="showUpdateForm" class="mt-4 border border-solid border-card-glass-border">
             <OCardSection role="body">
               <div class="text-base font-medium mb-2">
                 {{ t("about.update_license_key") }}
@@ -219,10 +219,10 @@
                   style="min-height: 150px"
                 />
                 <div v-if="isLicenseKeyAutoFilled" class="mt-2 mb-3">
-                  <div class="flex items-center py-3 px-4 bg-[rgba(34,197,94,0.08)] border border-solid border-[rgba(34,197,94,0.2)] rounded-lg [backdrop-filter:blur(10px)] transition-all duration-200 dark:bg-[rgba(34,197,94,0.15)] dark:border-[rgba(34,197,94,0.3)] dark:shadow-[0_2px_8px_rgba(0,0,0,0.2)]">
+                  <div class="flex items-center py-3 px-4 bg-banner-success-bg border border-solid border-banner-success-border rounded-default backdrop-blur-md transition-all duration-200 dark:shadow-md">
                     <OIcon
                       name="check-circle"
-                      class="text-green-600 mr-2"
+                      class="text-status-positive mr-2"
                       size="md"
                     />
                     <span class="text-sm">{{
@@ -261,10 +261,10 @@
       </div>
 
       <div class="col-span-1 self-start">
-        <OCard class="futuristic-card border border-solid" :class="store.state.theme === 'dark' ? 'bg-[linear-gradient(135deg,rgba(99,102,241,0.08)_0%,rgba(168,85,247,0.08)_100%)] border-[rgba(99,102,241,0.25)]' : 'border-[var(--o2-border-color)]'">
+        <OCard class="futuristic-card border border-solid border-card-glass-border dark:bg-[linear-gradient(135deg,rgba(99,102,241,0.08)_0%,rgba(168,85,247,0.08)_100%)] dark:border-[rgba(99,102,241,0.25)]">
           <OCardSection class="p-3">
             <div>
-              <div :class="store.state.theme === 'dark' ? 'bg-[radial-gradient(ellipse_at_center,rgba(99,102,241,0.15)_0%,transparent_70%)]' : ''"></div>
+              <div class="dark:bg-[radial-gradient(ellipse_at_center,rgba(99,102,241,0.15)_0%,transparent_70%)]"></div>
               <div class="text-xl font-semibold relative z-10">
                 {{ t("about.usage_information") }}
               </div>
@@ -272,8 +272,8 @@
 
             <div class="flex flex-col gap-2 mt-3">
               <!-- Summary Message -->
-              <div class="ingestion-summary-compact border border-solid rounded-lg py-3 px-[14px] [backdrop-filter:blur(10px)] relative overflow-hidden" :class="store.state.theme === 'dark' ? 'bg-[linear-gradient(135deg,rgba(99,102,241,0.1)_0%,rgba(168,85,247,0.1)_100%)] border-[rgba(99,102,241,0.3)]' : 'border-[rgba(99,102,241,0.2)]'">
-                <div class="summary-text-compact text-sm leading-[1.6] text-inherit text-[13px]">
+              <div class="ingestion-summary-compact border border-solid rounded-default py-3 px-3.5 [backdrop-filter:blur(10px)] relative overflow-hidden border-[rgba(99,102,241,0.2)] dark:bg-[linear-gradient(135deg,rgba(99,102,241,0.1)_0%,rgba(168,85,247,0.1)_100%)] dark:border-[rgba(99,102,241,0.3)]">
+                <div class="summary-text-compact text-sm leading-[1.6] text-inherit text-compact">
                   <!-- Line 1: License Info -->
                   <div class="flex items-center gap-2 mb-2">
                     <OIcon name="info" size="sm" class="flex-shrink-0" />
@@ -309,7 +309,7 @@
                       "
                       name="warning"
                       size="sm"
-                      class="text-red-500 flex-shrink-0"
+                      class="text-status-error-text flex-shrink-0"
                     />
                     <OIcon
                       v-else-if="
@@ -318,13 +318,13 @@
                       "
                       name="check-circle"
                       size="sm"
-                      class="text-amber-500 flex-shrink-0"
+                      class="text-status-warning-text flex-shrink-0"
                     />
                     <OIcon
                       v-else
                       name="check-circle"
                       size="sm"
-                      class="text-green-500 flex-shrink-0"
+                      class="text-status-positive flex-shrink-0"
                     />
                     <span>
                       <span
@@ -339,8 +339,8 @@
                               t('about.limit_exceeded_days', {
                                 colorClass:
                                   licenseData?.ingestion_exceeded > 30
-                                    ? 'text-red-500'
-                                    : 'text-amber-500',
+                                    ? 'text-status-error-text'
+                                    : 'text-status-warning-text',
                                 days: licenseData?.ingestion_exceeded,
                                 plural:
                                   licenseData?.ingestion_exceeded > 1
@@ -368,7 +368,7 @@
                         ></span
                         ><span
                           v-else
-                          class="text-[12px] opacity-80 italic"
+                          class="text-xs opacity-80 italic"
                           v-html="
                             DOMPurify.sanitize(
                               t('about.limit_exceeded_info', {
@@ -415,8 +415,8 @@
                   </div>
                   <div
                     v-if="isIngestionUnlimited"
-                    class="text-xs text-gray-400 mt-1 text-center"
-                    style="font-size: 10px"
+                    class="text-xs text-text-secondary mt-1 text-center"
+                    style="font-size: var(--text-3xs)"
                   >
                     {{ t("about.usage_shows_zero_unlimited") }}
                   </div>
@@ -448,7 +448,7 @@
         v-model="licenseData.key"
         readonly
         :rows="8"
-        style="font-family: monospace; font-size: 12px"
+        style="font-family: var(--font-mono); font-size: var(--text-xs)"
       />
     </ODialog>
   </div>
@@ -1033,49 +1033,42 @@ export default defineComponent({
 });
 </script>
 
-<style>
-.usage-chart-container .grid-stack-item-content {
-  border: 0px !important;
+<style scoped>
+/* keep(lib-override:gridstack): zero the gridstack item border inside the usage chart */
+.usage-chart-container :deep(.grid-stack-item-content) {
+  border: 0 !important;
 }
 
+/* keep(brand): gradient accent bar on the ingestion summary (generated ::before) */
 .ingestion-summary-compact::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
-  width: 3px;
+  width: 0.1875rem;
   height: 100%;
   background: linear-gradient(
     180deg,
-    var(--o2-menu-color) 0%,
-    var(--o2-menu-color) 100%
+    var(--color-theme-menu-color) 0%,
+    var(--color-theme-menu-color) 100%
   );
   opacity: 0.6;
 }
 
-.ingestion-summary-compact .summary-text-compact strong {
-  font-weight: 700;
-  background: linear-gradient(
-    135deg,
-    var(--o2-menu-color) 0%,
-    var(--o2-menu-color) 100%
-  );
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.dark .futuristic-card::before {
-  background: linear-gradient(
-    90deg,
-    transparent 0%,
-    rgba(99, 102, 241, 0.7) 20%,
-    rgba(168, 85, 247, 0.7) 80%,
-    transparent 100%
-  );
-}
-
 .dark .ingestion-summary-compact::before {
   opacity: 0.8;
 }
+
+/* keep(generated-content): gradient text on the v-html <strong> in the summary */
+.ingestion-summary-compact .summary-text-compact :deep(strong) {
+  font-weight: 700;
+  background: linear-gradient(
+    135deg,
+    var(--color-theme-menu-color) 0%,
+    var(--color-theme-menu-color) 100%
+  );
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
 </style>
diff --git a/web/src/components/settings/LlmProvidersSettings.vue b/web/src/components/settings/LlmProvidersSettings.vue
index ae1a73cfbb..bf7d0d79f8 100644
--- a/web/src/components/settings/LlmProvidersSettings.vue
+++ b/web/src/components/settings/LlmProvidersSettings.vue
@@ -9,12 +9,13 @@
       @cancel="closeForm"
     />
 
-    <template v-else>
-      <AppPageHeader
-        icon="smart-toy"
-        :subtitle="t('settings.llmProvidersSettings.subtitle')"
-        class="shrink-0 px-4 border-b border-border-default"
-      >
+    <OPageLayout
+      v-else
+      icon="smart-toy"
+      :subtitle="t('settings.llmProvidersSettings.subtitle')"
+      bleed
+      :scroll="false"
+    >
         <template #title>
           <span data-test="llm-providers-settings-title">{{ t("llmProviders.title") }}</span>
         </template>
@@ -28,7 +29,6 @@
             {{ t("llmProviders.newButton") }}
           </OButton>
         </template>
-      </AppPageHeader>
 
       <div v-if="isLoading" class="flex flex-1 items-center justify-center">
         <OSpinner size="md" />
@@ -63,6 +63,7 @@
           :global-filter="searchQuery"
           :show-global-filter="false"
           :default-columns="false"
+          show-index
           :enable-column-resize="true"
           :persist-columns="true"
           table-id="settings-llm-providers"
@@ -78,7 +79,7 @@
               class="flex-1"
               :placeholder="t('llmProviders.searchPlaceholder')"
               data-test="llm-providers-search-input"
-            />
+              />
           </template>
           <template #toolbar-trailing>
             <OButton
@@ -119,7 +120,7 @@
               type="providerDefaultFlag"
               value="default"
             />
-            <span v-else class="text-text-primary">—</span>
+            <span v-else class="text-text-body">—</span>
           </template>
 
           <template #cell-actions="{ row }">
@@ -146,7 +147,7 @@
           </template>
         </OTable>
       </div>
-    </template>
+    </OPageLayout>
 
     <ConfirmDialog
       v-model="confirmDeleteOpen"
@@ -182,8 +183,8 @@ import { showError } from "@/enterprise/components/onlineEvals/utils/evalFormat"
 import ProviderFormPage from "@/enterprise/components/onlineEvals/forms/ProviderFormPage.vue";
 import OEmptyState from "@/lib/core/EmptyState/OEmptyState.vue";
 import ConfirmDialog from "@/components/ConfirmDialog.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
-import { TABLE_INDEX_COL_SIZE, COL } from "@/lib/core/Table/OTable.types";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
+import { COL } from "@/lib/core/Table/OTable.types";
 import { useShortcuts } from "@/lib/vue-shortcut-manager";
 import { isInputFocused } from "@/utils/keyboardShortcuts";
 
@@ -203,14 +204,6 @@ const pendingDeleteRow = ref<Provider | null>(null);
 const orgId = computed(() => store.state.selectedOrganization?.identifier);
 
 const columns = computed(() => [
-  {
-    id: "#",
-    header: "#",
-    accessorKey: "#",
-    sortable: false,
-    size: TABLE_INDEX_COL_SIZE,
-    meta: { align: "left" },
-  },
   {
     id: "name",
     header: t("llmProviders.columns.name"),
@@ -281,10 +274,7 @@ const filteredProviders = computed(() => {
           .filter(Boolean)
           .some((v) => String(v).toLowerCase().includes(query)),
       );
-  return filtered.map((row, index) => ({
-    ...row,
-    "#": index + 1 <= 9 ? `0${index + 1}` : String(index + 1),
-  }));
+  return filtered;
 });
 
 onBeforeMount(async () => {
diff --git a/web/src/components/settings/ModelPricingEditor.schema.ts b/web/src/components/settings/ModelPricingEditor.schema.ts
index d2b66475bd..b550d5ee73 100644
--- a/web/src/components/settings/ModelPricingEditor.schema.ts
+++ b/web/src/components/settings/ModelPricingEditor.schema.ts
@@ -1,26 +1,19 @@
 // Copyright 2026 OpenObserve Inc.
 //
-// Full validation schema for ModelPricingEditor.vue — scalars (name +
-// match_pattern) AND the dynamic tiers/prices array.
+// Validation schema for ModelPricingEditor.vue — scalars (name +
+// match_pattern) and the dynamic tiers/prices array.
 //
 // The API model stores prices as a `{ key: perTokenPrice }` MAP; TanStack
 // field-arrays operate on ARRAYS, so the form models prices as an array of
 // `{ key, value }` rows (value held as PER-MILLION for display). The component
 // converts map↔rows at edit-prefill and submit.
 //
-// Restores the manual-`:error` BEFORE rules (inventory §6b) AND the imperative
-// save() guards as schema rules:
-//   • name:          required + max 256
-//   • match_pattern: required + max 512 + valid RegExp (Rust inline flags stripped)
-//   • price-row key:        not a pure integer, no spaces  (per row)
-//   • condition.usage_key:  not a pure integer  (non-default tiers)
-//
 // Two structural rules with no single field to attach to — "default tier needs
 // ≥1 non-zero price" and "a draft price has a value but no key" — stay as
 // submit-handler guards (toasts), since they don't map to one OForm* field.
 //
-// Validation TIMING is owned by OForm (submit-then-change via revalidateLogic);
-// this file only describes WHAT is valid.
+// Validation timing is owned by OForm (submit-then-change via revalidateLogic);
+// this file only describes what is valid.
 
 import { z } from "zod";
 
diff --git a/web/src/components/settings/ModelPricingEditor.spec.ts b/web/src/components/settings/ModelPricingEditor.spec.ts
index 181e716b74..401f6c74ba 100644
--- a/web/src/components/settings/ModelPricingEditor.spec.ts
+++ b/web/src/components/settings/ModelPricingEditor.spec.ts
@@ -140,59 +140,6 @@ const OButtonStub = {
   `,
 };
 
-const QInputStub = {
-  name: "QInput",
-  props: [
-    "modelValue",
-    "type",
-    "min",
-    "label",
-    "placeholder",
-    "error",
-    "errorMessage",
-    "dense",
-    "borderless",
-    "step",
-  ],
-  emits: ["update:modelValue", "blur"],
-  template: `
-    <input
-      data-test-stub="q-input"
-      :data-test="$attrs['data-test']"
-      :data-error="String(error)"
-      :data-error-message="errorMessage"
-      :value="modelValue"
-      :type="type"
-      :placeholder="placeholder"
-      @input="$emit('update:modelValue', type === 'number' ? Number($event.target.value) : $event.target.value)"
-      @blur="$emit('blur', $event)"
-    />
-  `,
-};
-
-const QSelectStub = {
-  name: "QSelect",
-  props: ["modelValue", "options", "displayValue"],
-  emits: ["update:modelValue"],
-  template: `<div data-test-stub="q-select" :data-display="displayValue"></div>`,
-};
-
-const QIconStub = {
-  name: "QIcon",
-  props: ["name", "size"],
-  template: `<span data-test-stub="OIcon" :data-name="name"><slot /></span>`,
-};
-
-const QTooltipStub = {
-  name: "QTooltip",
-  template: `<span data-test-stub="q-tooltip"><slot /></span>`,
-};
-
-const QPageStub = {
-  name: "QPage",
-  template: `<div data-test-stub="q-page"><slot /></div>`,
-};
-
 const createWrapper = (overrides: { query?: Record<string, any> } = {}) => {
   mockRouteQuery = overrides.query || {};
   return mount(ModelPricingEditor, {
@@ -205,11 +152,6 @@ const createWrapper = (overrides: { query?: Record<string, any> } = {}) => {
         store: mockStore,
       },
       stubs: {
-        QPage: QPageStub,
-        QInput: QInputStub,
-        QSelect: QSelectStub,
-        QIcon: QIconStub,
-        QTooltip: QTooltipStub,
         ODialog: ODialogStub,
         OButton: OButtonStub,
       },
diff --git a/web/src/components/settings/ModelPricingEditor.vue b/web/src/components/settings/ModelPricingEditor.vue
index af04a67369..a8100621ce 100644
--- a/web/src/components/settings/ModelPricingEditor.vue
+++ b/web/src/components/settings/ModelPricingEditor.vue
@@ -15,55 +15,42 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div
-    class="rounded-md p-0 flex flex-col"
-    style="min-height: 0; height: 100%; overflow: hidden"
+  <OPageLayout
+    :back="{
+      label: t('modelPricing.header'),
+      onClick: goBack,
+      dataTest: 'model-pricing-editor-back-btn',
+    }"
+    :title="headerTitle"
+    bleed
   >
-    <!-- Header -->
-    <AppPageHeader
-      :back="{
-        label: t('modelPricing.header'),
-        onClick: goBack,
-        dataTest: 'model-pricing-editor-back-btn',
-      }"
-      :title="headerTitle"
-      class="shrink-0 px-4 border-b border-border-default"
-    >
       <template #title>
         <span data-test="model-pricing-editor-title">{{ headerTitle }}</span>
       </template>
-    </AppPageHeader>
 
     <!-- Form Body -->
     <OForm
       :form="form"
       v-slot="{ isSubmitting }"
-      class="flex flex-col"
-      style="flex: 1; min-height: 0;"
+      class="flex flex-col flex-1 min-h-0"
     >
     <div
-      class="px-3 py-3"
-      style="
-        flex: 1;
-        min-height: 0;
-        height: calc(100vh - 170px);
-        overflow-y: auto;
-      "
+      class="px-3 py-3 flex-1 min-h-0 h-[calc(100vh-10.625rem)] overflow-y-auto"
     >
-      <div style="max-width: 760px" class="flex flex-col gap-6">
+      <div class="max-w-190 flex flex-col gap-6">
         <!-- ── Model Details Card ── -->
-        <div class="border border-(--o2-border-color) rounded-[10px] shadow-[0_1px_3px_rgba(0,0,0,0.05)] dark:shadow-[0_1px_3px_rgba(0,0,0,0.3)]">
-          <div class="flex flex-row items-center justify-between gap-3 py-[10px] px-4 bg-[rgba(0,0,0,0.025)] border-b border-(--o2-border-color) rounded-t-[10px] dark:bg-[rgba(255,255,255,0.04)]">
+        <div class="border border-card-glass-border rounded-default">
+          <div class="flex flex-row items-center justify-between gap-3 py-2.5 px-4 bg-surface-panel border-b border-card-glass-border rounded-t-default">
             <div>
-              <div class="form-card-title text-[13px] font-semibold">
+              <div class="form-card-title text-compact font-semibold">
                 {{ t("modelPricing.modelDetails") }}
               </div>
-              <div class="form-card-subtitle text-[11px] opacity-60 mt-px">
+              <div class="form-card-subtitle text-2xs opacity-60 mt-px">
                 {{ t("modelPricing.modelDetailsDesc") }}
               </div>
             </div>
           </div>
-          <div class="form-card-body flex flex-row gap-4 px-4 pt-[10px] pb-2">
+          <div class="form-card-body flex flex-row gap-4 px-4 pt-2.5 pb-2">
             <div class="flex-1">
               <div class="flex items-center gap-1 mb-1 field-label text-xs font-semibold opacity-75 h-5">
                 {{ t("modelPricing.modelNameField") }}
@@ -72,7 +59,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     name="info"
                     size="xs"
                     :class="
-                      store.state.theme === 'dark' ? 'text-gray-400' : 'text-gray-400'
+                      'text-text-secondary'
                     "
                   />
                   <OTooltip
@@ -99,9 +86,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       name="info"
                       size="xs"
                       :class="
-                        store.state.theme === 'dark'
-                          ? 'text-gray-400'
-                          : 'text-gray-400'
+                        'text-text-secondary'
                       "
                     />
                     <OTooltip
@@ -120,7 +105,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <OButton
                 variant="ghost"
                 size="icon-xs-sq"
-                class="opacity-50 text-(--q-primary) hover:opacity-100"
+                class="opacity-50 text-theme-accent hover:opacity-100"
                 data-test="model-pricing-pattern-examples-btn"
                 @click="showExamples = true"
               >
@@ -144,18 +129,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :title="t('modelPricing.patternExamplesTitle')"
           :sub-title="t('modelPricing.patternExamplesDesc')"
         >
-          <div class="examples-table border border-(--o2-border-color) rounded-lg overflow-hidden">
-            <div class="grid grid-cols-[180px_1fr_auto] gap-3 py-[6px] px-3 bg-[rgba(0,0,0,0.03)] border-b border-(--o2-border-color) text-[10px] font-bold uppercase tracking-[0.06em] opacity-45 dark:bg-[rgba(255,255,255,0.05)]">
+          <div class="examples-table border border-card-glass-border rounded-default overflow-hidden">
+            <div class="grid grid-cols-[11.25rem_1fr_auto] gap-3 py-1.5 px-3 bg-surface-subtle border-b border-card-glass-border text-3xs font-bold uppercase tracking-[0.06em] opacity-45">
               <span>{{ t("modelPricing.patternExamplesModelCol") }}</span>
               <span>{{ t("modelPricing.patternExamplesPatternCol") }}</span>
             </div>
             <div
               v-for="ex in patternExamples"
               :key="ex.name"
-              class="examples-table-row grid grid-cols-[180px_1fr_auto] gap-3 items-center py-2 px-3 border-b border-(--o2-border-color) text-xs"
+              class="grid grid-cols-[11.25rem_1fr_auto] gap-3 items-center py-2 px-3 border-b border-card-glass-border text-xs last:border-b-0"
             >
               <span class="examples-model-name font-medium">{{ ex.name }}</span>
-              <code class="font-mono text-[11px] bg-[rgba(0,0,0,0.04)] py-px px-[6px] rounded break-all dark:bg-[rgba(255,255,255,0.08)]">{{ ex.match_pattern }}</code>
+              <code class="font-mono text-2xs bg-surface-subtle py-px px-1.5 rounded-default break-all">{{ ex.match_pattern }}</code>
               <OButton
                 variant="ghost"
                 size="icon-xs-sq"
@@ -172,7 +157,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   size="xs"
                   :class="
                     copiedPattern === ex.match_pattern
-                      ? 'text-green-500'
+                      ? 'text-status-positive'
                       : ''
                   "
                 />
@@ -190,26 +175,26 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </ODialog>
 
         <!-- ── Pricing Tiers ── -->
-        <div class="border border-(--o2-border-color) rounded-[10px] shadow-[0_1px_3px_rgba(0,0,0,0.05)] dark:shadow-[0_1px_3px_rgba(0,0,0,0.3)]">
-          <div class="flex flex-row items-center justify-between gap-3 py-[10px] px-4 bg-[rgba(0,0,0,0.025)] border-b border-(--o2-border-color) rounded-t-[10px] dark:bg-[rgba(255,255,255,0.04)]">
+        <div class="border border-card-glass-border rounded-default">
+          <div class="flex flex-row items-center justify-between gap-3 py-2.5 px-4 bg-surface-panel border-b border-card-glass-border rounded-t-default">
             <div>
-              <div class="form-card-title text-[13px] font-semibold">
+              <div class="form-card-title text-compact font-semibold">
                 {{ t("modelPricing.pricingTiers") }}
               </div>
-              <div class="form-card-subtitle text-[11px] opacity-60 mt-px">
+              <div class="form-card-subtitle text-2xs opacity-60 mt-px">
                 {{ t("modelPricing.pricingTiersDesc") }}
               </div>
             </div>
           </div>
 
-          <div class="form-card-body flex flex-col gap-3 px-4 pt-[10px] pb-2">
+          <div class="form-card-body flex flex-col gap-3 px-4 pt-2.5 pb-2">
             <div
               v-for="(tier, idx) in formTiers"
               :key="idx"
-              class="border border-(--o2-border-color) rounded-[10px] overflow-hidden shadow-[0_1px_4px_rgba(0,0,0,0.05)] dark:shadow-[0_1px_4px_rgba(0,0,0,0.3)]"
+              class="border border-card-glass-border rounded-default overflow-hidden"
             >
               <!-- Tier Header -->
-              <div class="flex items-center justify-between gap-2 py-2 px-4 bg-[rgba(0,0,0,0.025)] border-b border-(--o2-border-color) dark:bg-[rgba(255,255,255,0.04)]">
+              <div class="flex items-center justify-between gap-2 py-2 px-4 bg-surface-panel border-b border-card-glass-border">
                 <div class="flex items-center gap-2">
                   <span class="tier-name-label text-xs font-medium opacity-50 whitespace-nowrap shrink-0">{{
                     t("modelPricing.tierName")
@@ -220,7 +205,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     :data-test="`model-pricing-tier-name-input-${idx}`"
                   />
                 </div>
-                <div class="flex items-center gap-2 flex-shrink-0">
+                <div class="flex items-center gap-2 shrink-0">
                   <OButton
                     v-if="formTiers.length > 1"
                     variant="outline-destructive"
@@ -239,13 +224,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <!-- Condition row (non-default tiers only) -->
                 <div
                   v-if="idx > 0 && tier.condition"
-                  class="py-3 px-[14px] rounded-lg bg-[rgba(0,0,0,0.02)] border border-(--o2-border-color) dark:bg-[rgba(255,255,255,0.03)]"
+                  class="py-3 px-3.5 rounded-default bg-surface-panel border border-card-glass-border"
                 >
-                  <div class="sub-label mb-2 text-[11px] font-semibold tracking-[0.06em] opacity-65">
+                  <div class="sub-label mb-2 text-2xs font-semibold tracking-[0.06em] opacity-65">
                     {{ t("modelPricing.applyTierWhen") }}
                   </div>
                   <div class="flex gap-2 items-end flex-nowrap">
-                    <div class="flex-1 min-w-[130px]">
+                    <div class="flex-1 min-w-32.5">
                       <OFormInput
                         :name="`tiers[${idx}].condition.usage_key`"
                         :label="t('modelPricing.usageKeyCol')"
@@ -253,7 +238,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         :data-test="`model-pricing-tier-condition-key-input-${idx}`"
                       />
                     </div>
-                    <div class="w-[90px] flex-shrink-0">
+                    <div class="w-22.5 shrink-0">
                       <OFormSelect
                         :name="`tiers[${idx}].condition.operator`"
                         :options="operators"
@@ -262,7 +247,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         :data-test="`model-pricing-tier-condition-operator-select-${idx}`"
                       />
                     </div>
-                    <div class="w-[140px] flex-shrink-0">
+                    <div class="w-35 shrink-0">
                       <OFormInput
                         :name="`tiers[${idx}].condition.value`"
                         :label="t('modelPricing.threshold')"
@@ -275,7 +260,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
                 <!-- Quick Setup -->
                 <div class="flex items-center gap-2 flex-wrap">
-                  <span class="sub-label text-[11px] font-semibold tracking-[0.06em] opacity-65">{{
+                  <span class="sub-label text-2xs font-semibold tracking-[0.06em] opacity-65">{{
                     t("modelPricing.quickSetup")
                   }}</span>
                   <OButton
@@ -284,13 +269,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     variant="pricing-chip"
                     type="button"
                     :active="isTemplateActive(idx, tpl.keys)"
-                    class="!rounded-[1.25rem] !h-auto !py-[0.3125rem] !px-[0.875rem] !text-xs !font-medium !gap-[0.375rem]"
+                    class="rounded-full! h-auto! py-1.25! px-3.5! text-xs! font-medium! gap-1.5!"
                     :data-test="`model-pricing-tier-template-btn-${idx}-${tpl.name.toLowerCase()}`"
                     @click="applyTemplate(idx, tpl.keys)"
                   >
                     <template #icon-left>
                       <span
-                        class="pricing-chip-dot w-[7px] h-[7px] rounded-full shrink-0 inline-block"
+                        class="pricing-chip-dot w-1.75 h-1.75 rounded-full shrink-0 inline-block"
                         :style="{ background: tpl.color }"
                       />
                     </template>
@@ -306,7 +291,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
                 <!-- Price Table -->
                 <div>
-                  <div class="price-table-label mb-2 text-[11px] font-semibold tracking-[0.03em]">
+                  <div class="price-table-label mb-2 text-2xs font-semibold tracking-[0.03em]">
                     {{ t("modelPricing.tokenPrices") }}
                     <span class="price-table-label-sub font-normal opacity-55 tracking-normal">
                       {{ t("modelPricing.tokenPricesUnit") }}</span
@@ -317,7 +302,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <!-- Column headers (only when rows exist) -->
                     <div
                       v-if="tier.prices.length"
-                      class="price-table-head grid grid-cols-[1fr_160px_auto] gap-2 py-[6px] px-3 text-[11px] font-semibold tracking-[0.01em] opacity-45"
+                      class="price-table-head grid grid-cols-[1fr_10rem_auto] gap-2 py-1.5 px-3 text-2xs font-semibold tracking-[0.01em] opacity-45"
                     >
                       <span>{{ t("modelPricing.usageKeyCol") }}</span>
                       <span>{{ t("modelPricing.pricePerMillionHeader") }}</span>
@@ -331,12 +316,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                          middle delete, but each field's `form.Field` binds to its
                          `name` at creation and does NOT re-bind when the name
                          shifts — so reused rows would show stale (shifted) values.
-                         Index keys keep each position's name fixed. (Same pattern
-                         as CreateDestinationForm's headers.) -->
+                         Index keys keep each position's name fixed. -->
                     <div
                       v-for="(_entry, entryIdx) in tier.prices"
                       :key="entryIdx"
-                      class="price-row grid grid-cols-[1fr_160px_auto] gap-2 items-start py-0.5 px-3"
+                      class="price-row grid grid-cols-[1fr_10rem_auto] gap-2 items-start py-0.5 px-3"
                     >
                       <OFormInput
                         :name="`tiers[${idx}].prices[${entryIdx}].key`"
@@ -375,19 +359,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <!-- Empty state -->
                     <div
                       v-if="!tier.prices.length"
-                      class="price-empty flex flex-col items-center p-4 gap-[3px]"
+                      class="price-empty flex flex-col items-center p-4 gap-0.75"
                     >
                       <div class="price-empty-title text-xs font-medium">
                         {{ t("modelPricing.noPricesDefined") }}
                       </div>
-                      <div class="price-empty-sub text-[11px] opacity-55">
+                      <div class="price-empty-sub text-2xs opacity-55">
                         {{ t("modelPricing.noPricesDesc") }}
                       </div>
                     </div>
 
                     <!-- Add row (staging draft, form-owned) -->
                     <div
-                      class="price-add-row grid grid-cols-[1fr_160px_auto] gap-2 items-center py-1 px-3"
+                      class="price-add-row grid grid-cols-[1fr_10rem_auto] gap-2 items-center py-1 px-3"
                       :class="{
                         'price-add-row--no-top': !tier.prices.length,
                       }"
@@ -425,26 +409,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   <!-- Price Preview Table -->
                   <div
                     v-if="previewEntries(tier).length"
-                    class="mt-5 border rounded"
-                    style="
-                      background: rgba(0, 0, 0, 0.015);
-                      border-color: var(--o2-border-color);
-                    "
+                    class="mt-5 border rounded-default bg-surface-panel border-card-glass-border"
                   >
                     <div
-                      class="px-4 py-2 text-xs text-gray-500 font-semibold border-b"
-                      style="border-color: var(--o2-border-color)"
+                      class="px-4 py-2 text-xs text-text-secondary font-semibold border-b border-card-glass-border"
                     >
                       {{ t("modelPricing.pricePreview") }}
                     </div>
                     <table
-                      class="w-full text-xs"
-                      style="border-collapse: collapse"
+                      class="w-full text-xs border-collapse"
                     >
                       <thead>
                         <tr
-                          class="text-left text-gray-400 border-b"
-                          style="border-color: var(--o2-border-color)"
+                          class="text-left text-text-secondary border-b border-card-glass-border"
                         >
                           <th class="px-4 py-2 font-medium">
                             {{ t("modelPricing.usageType") }}
@@ -461,21 +438,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         <tr
                           v-for="entry in previewEntries(tier)"
                           :key="entry.pending ? '__pending__' : entry.key"
-                          class="border-b last:border-none"
+                          class="border-b last:border-none border-card-glass-border"
                           :class="{
                             'preview-row-pending opacity-50 italic': entry.pending,
                           }"
-                          style="border-color: var(--o2-border-color)"
                         >
                           <td
-                            class="px-4 py-2 text-gray-600 font-medium"
+                            class="px-4 py-2 text-text-body font-medium"
                           >
                             {{ entry.key }}
                           </td>
-                          <td class="px-4 py-2 text-gray-600">
+                          <td class="px-4 py-2 text-text-body">
                             ${{ formatPreviewCost(fromPerMillion(entry.value), 1000) }}
                           </td>
-                          <td class="px-4 py-2 text-gray-600">
+                          <td class="px-4 py-2 text-text-body">
                             ${{ formatPreviewCost(fromPerMillion(entry.value), 1000000) }}
                           </td>
                         </tr>
@@ -501,7 +477,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </div>
 
     <!-- Footer -->
-    <div class="page-footer flex items-center justify-end gap-2 px-6 h-[50px] shrink-0 border-t border-(--o2-border-color)">
+    <div class="page-footer flex items-center justify-end gap-2 px-6 h-12.5 shrink-0 border-t border-card-glass-border">
       <OButton
         variant="outline"
         size="sm-action"
@@ -523,7 +499,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </OButton>
     </div>
     </OForm>
-  </div>
+  </OPageLayout>
 </template>
 
 <script lang="ts" setup>
@@ -540,7 +516,7 @@ import { useOForm } from "@/lib/forms/Form/useOForm";
 import OFormInput from "@/lib/forms/Input/OFormInput.vue";
 import OFormSelect from "@/lib/forms/Select/OFormSelect.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import { copyToClipboard } from "@/utils/clipboard";
 import { toast } from "@/lib/feedback/Toast/useToast";
 import {
@@ -581,9 +557,7 @@ const orgIdentifier = computed(
   () => store.state.selectedOrganization?.identifier || "",
 );
 
-// Scalar validation is now schema-driven (name + match_pattern). The manual
-// nameError/regexError computeds + nameTouched/patternTouched refs + the
-// :disabled Save gate are gone (R3).
+// Scalar validation is schema-driven (name + match_pattern).
 const modelPricingSchema = makeModelPricingSchema(t);
 
 const isEdit = computed(
@@ -603,11 +577,10 @@ const modelPricingDefaults = computed(
   (): ModelPricingForm => modelToForm(model.value),
 );
 
-// Rule ③ OWNER pattern: this component OWNS <OForm> and must read the form-owned
-// `tiers` array reactively to drive the v-for rows, so it creates the form here
-// with useOForm and hands it to <OForm :form="form"> — ONE source of truth, no
-// mirror ref / store.subscribe copy. `save` is the awaited submit handler (auto
-// Save spinner). Async edit-prefill re-seeds via form.reset() once data loads.
+// This component reads the form-owned `tiers` array reactively to drive the
+// v-for rows, so it creates the form here with useOForm and hands it to
+// <OForm :form="form">. `save` is the awaited submit handler (auto Save
+// spinner). Async edit-prefill re-seeds via form.reset() once data loads.
 const form = useOForm<ModelPricingForm>({
   defaultValues: modelPricingDefaults.value,
   schema: modelPricingSchema,
@@ -697,9 +670,8 @@ function formToModelTiers(tiers: any[]): any[] {
   });
 }
 
-// Replace the whole form-owned tiers array (the safe field-array mutation, as
-// CreateDestinationForm does for `headers`); `formTiers` (form.useStore) re-syncs
-// reactively and the template re-renders.
+// Replace the whole form-owned tiers array; `formTiers` (form.useStore)
+// re-syncs reactively and the template re-renders.
 function setTiers(next: any[]) {
   form.setFieldValue("tiers", next, { dontUpdateMeta: true });
 }
@@ -889,16 +861,16 @@ function notifyError(prefix: string, e: any) {
 }
 
 // @submit handler. The schema validates name/match_pattern + per-row key
-// validity + condition.usage_key before @submit fires (R3). Two STRUCTURAL
-// rules that don't map to a single field stay here as guards (toasts): a draft
-// row with a value but no key, and "the default tier needs ≥1 non-zero price".
+// validity + condition.usage_key before @submit fires. Two STRUCTURAL rules
+// that don't map to a single field stay here as guards (toasts): a draft row
+// with a value but no key, and "the default tier needs ≥1 non-zero price".
 // `value` is the raw form value (per-million ROW shape); convert to the API
 // (per-token MAP) shape for the payload.
 async function save(value?: ModelPricingForm) {
   const tiers = (value?.tiers ?? formTiers.value) as any[];
 
   // Draft-row guards: a non-empty draft key must be a valid usage key; a draft
-  // with a value but no key is an error (mirrors the old addPrice/save guards).
+  // with a value but no key is an error.
   for (const tier of tiers) {
     const dk = String(tier.draftKey ?? "").trim();
     if (dk) {
@@ -1019,9 +991,8 @@ onBeforeMount(async () => {
           }
         }
         // Data arrived after mount → re-seed the whole form (scalars + the
-        // converted tier/price rows) once (the documented "async edit-prefill"
-        // pattern; not a per-keystroke watch). formTiers (form.useStore) updates
-        // reactively from the reset — no manual re-sync.
+        // converted tier/price rows) once. formTiers (form.useStore) updates
+        // reactively from the reset.
         form.reset(modelToForm(model.value));
       }
     } catch (e: any) {
@@ -1030,10 +1001,3 @@ onBeforeMount(async () => {
   }
 });
 </script>
-
-<style>
-/* :last-child pseudo selector — kept in <style> per project rules */
-.examples-table-row:last-child {
-  border-bottom: none;
-}
-</style>
diff --git a/web/src/components/settings/ModelPricingList.spec.ts b/web/src/components/settings/ModelPricingList.spec.ts
index 3eb24b7870..0974a05a96 100644
--- a/web/src/components/settings/ModelPricingList.spec.ts
+++ b/web/src/components/settings/ModelPricingList.spec.ts
@@ -161,7 +161,7 @@ const QTablePaginationStub = {
   name: "QTablePagination",
   props: ["scope", "position", "resultTotal", "perPageOptions"],
   emits: ["update:changeRecordPerPage"],
-  template: `<div data-test="q-table-pagination-stub" />`,
+  template: `<div data-test="table-pagination-stub" />`,
 };
 
 // ── Fixtures ─────────────────────────────────────────────────────────────────
@@ -288,42 +288,10 @@ const mockI18n = createI18n({
 // ── Global stubs ─────────────────────────────────────────────────────────────
 
 const globalStubs: Record<string, any> = {
-  "q-page": { template: "<div><slot /></div>" },
-  "q-table": {
-    name: "q-table",
-    props: ["rows", "columns", "pagination", "sortMethod"],
-    template: `
-      <div class="q-table">
-        <slot name="header" :cols="columns" />
-        <template v-for="(row, idx) in rows" :key="row.id">
-          <slot name="body" :row="row" :rowIndex="idx" :cols="columns" />
-        </template>
-        <slot name="no-data" />
-        <slot name="bottom" />
-      </div>
-    `,
-  },
-  "q-tr": { template: "<tr><slot /></tr>" },
-  "q-th": { template: "<th><slot /></th>" },
-  "q-td": { template: "<td><slot /></td>" },
   "OIcon": {
     template: '<span class="OIcon"><slot /></span>',
     props: ["name", "size", "color"],
   },
-  "q-tooltip": { template: "<span><slot /></span>" },
-  "q-checkbox": {
-    name: "q-checkbox",
-    props: ["modelValue", "indeterminate", "size"],
-    emits: ["update:modelValue"],
-    template: `<input type="checkbox" :checked="modelValue" @change="$emit('update:modelValue', !modelValue)" />`,
-  },
-  "q-input": {
-    name: "q-input",
-    props: ["modelValue", "placeholder", "borderless", "dense"],
-    emits: ["update:modelValue"],
-    template: `<input :value="modelValue" :placeholder="placeholder" @input="$emit('update:modelValue', $event.target.value)" />`,
-  },
-  "q-separator": true,
   ODrawer: ODrawerStub,
   OButton: OButtonStub,
   ConfirmDialog: ConfirmDialogStub,
@@ -421,7 +389,7 @@ describe("ModelPricingList.vue", () => {
     it("should render the list header when not showing the import page", async () => {
       wrapper = mountComponent();
       await flushPromises();
-      // Title now lives in the standard AppPageHeader (row 1).
+      // Title now lives in the standard OPageHeader (row 1).
       expect(wrapper.find(".app-page-header h1").exists()).toBe(true);
     });
 
diff --git a/web/src/components/settings/ModelPricingList.vue b/web/src/components/settings/ModelPricingList.vue
index 196396ed25..24c35fe223 100644
--- a/web/src/components/settings/ModelPricingList.vue
+++ b/web/src/components/settings/ModelPricingList.vue
@@ -30,11 +30,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <TestModelMatchDialog v-model="showTestMatchDialog" />
 
     <!-- Main List View -->
-    <div v-if="!showImportModelPricingPage" class="flex flex-col h-full">
-      <!-- List View Header -->
-      <!-- Standard section header: title + actions only. Tabs + search moved
-           into the table toolbar below. -->
-      <AppPageHeader icon="paid" :subtitle="t('settings.modelPricingList.subtitle')" class="shrink-0 px-4 border-b border-border-default">
+    <OPageLayout
+      v-if="!showImportModelPricingPage"
+      icon="paid"
+      :subtitle="t('settings.modelPricingList.subtitle')"
+      bleed
+    >
         <template #title>
           {{ t("modelPricing.header") }}
           <OButton
@@ -82,10 +83,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             {{ t("modelPricing.newModel") }}
           </OButton>
         </template>
-      </AppPageHeader>
 
       <!-- List Table -->
-      <div class="card-container flex-1 min-h-0 overflow-hidden">
+      <div class="bg-card-glass-bg flex-1 min-h-0 overflow-hidden">
       <OTable
         ref="qTableRef"
         :frame="false"
@@ -143,7 +143,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </template>
         <template #tree-warning="{ row }">
           <div class="flex items-center gap-2 py-1 text-sm leading-none">
-            <OIcon name="warning-amber" size="sm" class="text-[#f59e0b] opacity-85" />
+            <OIcon name="warning-amber" size="sm" class="text-status-warning-text opacity-85" />
             <span class="leading-tight">
               {{
                 t("modelPricing.shadowedWarningBanner", { name: row.name })
@@ -152,14 +152,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </div>
         </template>
         <template #cell-name="{ row }">
-          <div class="flex items-center flex-nowrap relative z-[2] min-h-[24px]">
+          <div class="flex items-center flex-nowrap relative z-[2] min-h-6">
             <span
               v-if="getSource(row) === 'built_in'"
               class="shrink-0 cursor-default inline-flex mr-1"
             >
               <img
                 :src="ooLogo"
-                class="w-[16px] h-[16px]"
+                class="w-4 h-4"
                 alt="OpenObserve"
               />
               <OTooltip side="top" align="center" :content="t('modelPricing.sourceBuiltIn')" />
@@ -175,7 +175,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <OIcon
                 name="corporate-fare"
                 size="sm"
-                class="text-[#757575] dark:text-[#bdbdbd]"
+                class="text-text-secondary"
                />
               <OTooltip side="top" align="center" :content="t('modelPricing.sourceInherited')" />
             </span>
@@ -186,7 +186,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <OIcon
                 name="person"
                 size="sm"
-                class="text-[#757575] dark:text-[#bdbdbd]"
+                class="text-text-secondary"
                />
               <OTooltip side="top" align="center" :content="t('modelPricing.sourceCustom')" />
             </span>
@@ -196,7 +196,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <template #cell-match_pattern="{ row }">
           <div class="flex items-center gap-1 min-w-0">
             <code
-              class="text-xs block max-w-full bg-[rgba(0,0,0,0.04)] border border-(--o2-border-color) py-[2px] px-[6px] rounded text-inherit dark:bg-[rgba(255,255,255,0.05)]"
+              class="text-xs block max-w-full bg-surface-subtle border border-card-glass-border py-0.5 px-1.5 rounded-default text-inherit"
               :class="{ 'opacity-50 [text-decoration:line-through] [text-decoration-color:currentColor]': isChildRow(row) }"
               >{{ row.match_pattern }}</code
             >
@@ -204,7 +204,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               v-if="isChildRow(row)"
               name="warning-amber"
               size="xs"
-              class="shrink-0 text-[#f59e0b] opacity-85"
+              class="shrink-0 text-status-warning-text opacity-85"
             >
               <OTooltip side="top" align="center" :content="t('modelPricing.shadowedTooltip', { name: getParentName(row) })" />
             </OIcon>
@@ -236,15 +236,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 {{ t("modelPricing.overflowMore") }}
                 <OTooltip>
                   <template #content>
-                    <div class="min-w-[240px]">
-                      <div class="font-bold text-[13px] mb-[3px]">
+                    <div class="min-w-60">
+                      <div class="font-bold text-compact mb-0.75">
                         {{ row.name }}
                       </div>
-                      <table class="w-full border-collapse pricing-breakdown-table">
+                      <table class="w-full border-collapse">
                         <thead>
                           <tr>
-                            <th>{{ t("modelPricing.usageType") }}</th>
-                            <th>
+                            <th class="text-2xs font-semibold text-table-header-text bg-table-header-bg text-left pt-0 pb-1 pl-0 pr-4 border-b border-table-header-border">{{ t("modelPricing.usageType") }}</th>
+                            <th class="text-2xs font-semibold text-table-header-text bg-table-header-bg text-right pt-0 pb-1 pl-0 pr-0 border-b border-table-header-border">
                               {{ t("modelPricing.colPricingSimple") }}
                             </th>
                           </tr>
@@ -256,8 +256,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                             )"
                             :key="key"
                           >
-                            <td>{{ formatPriceKey(key) }}</td>
-                            <td>{{ formatPerMillion(price) }}</td>
+                            <td class="text-xs py-0.5 pl-0 pr-4">{{ formatPriceKey(key) }}</td>
+                            <td class="text-xs py-0.5 pl-0 pr-0 text-right font-medium">{{ formatPerMillion(price) }}</td>
                           </tr>
                         </tbody>
                       </table>
@@ -266,7 +266,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </OTooltip>
               </OTag>
             </template>
-            <span v-else class="text-text-primary">&mdash;</span>
+            <span v-else class="text-text-muted">&mdash;</span>
           </div>
         </template>
         <template #cell-actions="{ row }">
@@ -340,9 +340,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </template>
 
         <template #bottom="scope">
-          <div class="flex items-center w-full h-[48px] gap-x-2">
+          <div class="flex items-center w-full h-12 gap-x-2">
             <div
-              class="o2-table-footer-title flex items-center w-[100px]"
+              class="text-xs font-normal flex items-center w-25"
             >
               {{ t("modelPricing.modelsCount", { count: resultTotal }) }}
             </div>
@@ -372,7 +372,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </template>
       </OTable>
       </div>
-    </div>
+    </OPageLayout>
     <!-- end v-if="!showImportModelPricingPage" -->
 
     <!-- Pricing detail side panel -->
@@ -392,7 +392,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           >
             <img
               :src="ooLogo"
-              class="w-[18px] h-[18px]"
+              class="w-4.5 h-4.5"
               alt="OpenObserve"
             />
             <OTooltip side="top" align="center" :content="t('modelPricing.sourceBuiltIn')" />
@@ -409,7 +409,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <OIcon
               name="corporate-fare"
               size="sm"
-              class="text-[#757575] dark:text-[#bdbdbd]"
+              class="text-text-secondary"
              />
             <OTooltip side="top" align="center" :content="t('modelPricing.sourceInherited')" />
           </span>
@@ -420,26 +420,26 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <OIcon
               name="person"
               size="sm"
-              class="text-[#757575] dark:text-[#bdbdbd]"
+              class="text-text-secondary"
              />
             <OTooltip side="top" align="center" :content="t('modelPricing.sourceCustom')" />
           </span>
       </template>
 
-      <div class="p-3 flex-1 overflow-y-auto">
+      <div class="flex-1 overflow-y-auto">
         <div v-if="pricingDialogRow">
           <div class="mb-4">
-            <div class="text-xs font-semibold mb-[6px] text-[#555] dark:text-[#aaa]">
+            <div class="text-xs font-semibold mb-1.5 text-text-secondary">
               {{ t("modelPricing.colPattern") }}
             </div>
-            <code class="text-xs block bg-[rgba(0,0,0,0.04)] border border-(--o2-border-color) py-[2px] px-[6px] rounded text-inherit text-[13px] px-[10px] py-[6px] whitespace-pre-wrap break-all max-h-[300px] overflow-y-auto dark:bg-[rgba(255,255,255,0.05)]">{{
+            <code class="text-xs block bg-surface-subtle border border-card-glass-border py-0.5 px-1.5 rounded-default text-inherit text-compact px-2.5 py-1.5 whitespace-pre-wrap break-all max-h-75 overflow-y-auto">{{
               pricingDialogRow.match_pattern
             }}</code>
           </div>
           <OSeparator class="mb-4" />
 
           <div>
-            <div class="text-xs font-semibold mb-[6px] text-[#555] mt-2 pricing-section-label">
+            <div class="text-xs font-semibold mb-1.5 text-text-secondary mt-2 pricing-section-label">
               {{ t("modelPricing.colPricing") }}
             </div>
             <div
@@ -448,13 +448,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   getDefaultTier(pricingDialogRow)?.prices || {},
                 ).length
               "
-              class="mt-2 border border-(--o2-border-color) rounded-lg overflow-hidden"
+              class="mt-2 border border-card-glass-border rounded-default overflow-hidden"
             >
-              <table class="w-full border-collapse pricing-panel-table">
+              <table class="w-full border-collapse">
                 <thead>
                   <tr>
-                    <th>{{ t("modelPricing.usageType") }}</th>
-                    <th>{{ t("modelPricing.colPricing") }}</th>
+                    <th class="text-2xs font-semibold text-table-header-text text-left py-1.5 px-3.5 bg-table-header-bg border-b border-table-header-border">{{ t("modelPricing.usageType") }}</th>
+                    <th class="text-2xs font-semibold text-table-header-text text-right py-1.5 px-3.5 bg-table-header-bg border-b border-table-header-border">{{ t("modelPricing.colPricing") }}</th>
                   </tr>
                 </thead>
                 <tbody>
@@ -463,14 +463,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       getDefaultTier(pricingDialogRow)?.prices || {},
                     )"
                     :key="key"
+                    class="last:[&>td]:border-b-0"
                   >
-                    <td>{{ formatPriceKey(key) }}</td>
-                    <td>{{ formatPerMillion(price) }}</td>
+                    <td class="text-compact py-2 px-3.5 border-b border-table-row-divider">{{ formatPriceKey(key) }}</td>
+                    <td class="text-compact py-2 px-3.5 border-b border-table-row-divider text-right font-semibold">{{ formatPerMillion(price) }}</td>
                   </tr>
                 </tbody>
               </table>
             </div>
-            <span v-else class="text-gray-400">&mdash;</span>
+            <span v-else class="text-text-muted">&mdash;</span>
           </div>
         </div>
       </div>
@@ -490,9 +491,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { ref, computed, onBeforeMount, onActivated } from "vue";
 import { useI18n } from "vue-i18n";
 import { useStore } from "vuex";
+import useTheme from "@/composables/useTheme";
 import { useRouter } from "vue-router";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import { getImageURL } from "@/utils/zincutils";
 import modelPricingService from "@/services/model_pricing";
 import ImportModelPricing from "@/components/settings/ImportModelPricing.vue";
@@ -516,6 +518,7 @@ import { isInputFocused } from "@/utils/keyboardShortcuts";
 
 const { t } = useI18n();
 const store = useStore();
+const { isDark } = useTheme();
 const router = useRouter();
 
 const qTableRef = ref<any>(null);
@@ -758,7 +761,7 @@ const orgIdentifier = computed(
 );
 
 const ooLogo = computed(() =>
-  store.state.theme === "dark"
+  isDark.value
     ? getImageURL("openobserve_favicon_dark.ico")
     : getImageURL("images/common/openobserve_favicon.png"),
 );
@@ -955,68 +958,3 @@ useShortcuts([
   { id: "modelPricingRefresh", handler: () => { if (!isInputFocused()) fetchModels(); } },
 ]);
 </script>
-
-<style>
-/* ── Pricing panel table (side panel) child selectors ──────────────── */
-.pricing-panel-table th {
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--color-table-header-text);
-  text-align: left;
-  padding: 6px 14px;
-  background: var(--color-table-header-bg);
-  border-bottom: 1px solid var(--color-table-header-border);
-}
-
-.pricing-panel-table th:last-child {
-  text-align: right;
-}
-
-.pricing-panel-table td {
-  font-size: 13px;
-  padding: 8px 14px;
-  border-bottom: 1px solid var(--color-table-row-divider);
-}
-
-.pricing-panel-table td:last-child {
-  text-align: right;
-  font-weight: 600;
-}
-
-.pricing-panel-table tr:last-child td {
-  border-bottom: none;
-}
-
-/* ── Pricing breakdown tooltip table child selectors ──────────────── */
-.pricing-breakdown-table th {
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--color-table-header-text);
-  background: var(--color-table-header-bg);
-  text-align: left;
-  padding: 0 16px 4px 0;
-  border-bottom: 1px solid var(--color-table-header-border);
-}
-
-.pricing-breakdown-table th:last-child {
-  text-align: right;
-  padding-right: 0;
-}
-
-.pricing-breakdown-table td {
-  font-size: 12px;
-  padding: 2px 16px 2px 0;
-  border-bottom: none;
-}
-
-.pricing-breakdown-table td:last-child {
-  text-align: right;
-  padding-right: 0;
-  font-weight: 500;
-}
-
-.pricing-breakdown-table tr:last-child td {
-  border-bottom: none;
-}
-
-</style>
diff --git a/web/src/components/settings/Nodes.spec.ts b/web/src/components/settings/Nodes.spec.ts
index 6850925101..4fcde2f900 100644
--- a/web/src/components/settings/Nodes.spec.ts
+++ b/web/src/components/settings/Nodes.spec.ts
@@ -137,17 +137,6 @@ function mountComponent() {
       plugins: [mockI18n],
       provide: { store: mockStore },
       stubs: {
-                "q-splitter": { template: '<div><slot name="before" /><slot name="after" /></div>', props: ["modelValue", "limits", "unit", "style"] },
-        "q-table": { template: '<div class="q-table"><slot name="bottom" :scope="{}" /><slot name="no-data" /></div>', props: ["rows", "columns", "rowKey", "pagination", "filter", "filterMethod", "loading", "dense", "style", "hideTop"] },
-        "q-expansion-item": { template: '<div><slot /></div>', props: ["expandSeparator", "label", "class"] },
-        "q-card": { template: "<div><slot /></div>" },
-        "q-card-section": { template: "<div><slot /></div>", props: ["class"] },
-        "q-checkbox": { template: "<input type='checkbox' />", props: ["modelValue", "size"], emits: ["update:modelValue"] },
-        "q-range": { template: '<div class="q-range" />', props: ["modelValue", "min", "max", "disable"], emits: ["change"] },
-        "q-tooltip": { template: "<span><slot /></span>" },
-        "q-list": { template: "<div><slot /></div>" },
-        "q-btn": { template: '<button @click="$emit(\'click\')"><slot /></button>', props: ["label", "icon", "flat"], emits: ["click"] },
-        "q-td": { template: "<td><slot /></td>", props: ["props"] },
         "QTablePagination": { template: "<div class='pagination' />", props: ["scope", "resultTotal", "perPageOptions", "position"], emits: ["update:changeRecordPerPage"] },
         "NoData": { template: "<div class='no-data'>No Data</div>" },
       },
@@ -393,16 +382,6 @@ describe("Nodes", () => {
           plugins: [mockI18n],
           provide: { store: storeWithoutSuperCluster },
           stubs: {
-                        "q-splitter": { template: '<div><slot name="before" /><slot name="after" /></div>', props: ["modelValue"] },
-            "q-table": { template: "<div />", props: ["rows", "columns", "rowKey", "pagination", "filter", "filterMethod", "loading"] },
-            "q-expansion-item": { template: "<div><slot /></div>", props: ["label"] },
-            "q-card": { template: "<div><slot /></div>" },
-            "q-card-section": { template: "<div><slot /></div>" },
-            "q-checkbox": { template: "<input type='checkbox' />" },
-            "q-range": { template: "<div />" },
-            "q-tooltip": { template: "<span><slot /></span>" },
-            "q-list": { template: "<div><slot /></div>" },
-            "q-btn": { template: "<button />" },
             "QTablePagination": { template: "<div />" },
             "NoData": { template: "<div />" },
           },
diff --git a/web/src/components/settings/Nodes.vue b/web/src/components/settings/Nodes.vue
index 694d15bd6d..c15bdeba0a 100644
--- a/web/src/components/settings/Nodes.vue
+++ b/web/src/components/settings/Nodes.vue
@@ -16,28 +16,23 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <!-- eslint-disable vue/x-invalid-end-tag -->
 <template>
-  <div class="flex flex-col h-full overflow-hidden">
-    <!-- Standard page header on top (full-width). The filter panel (left) + table
-         (right) sit below in the splitter — the standard header + left + right model. -->
-    <AppPageHeader
-      :title="t('nodes.header')"
-      icon="hub"
-      :subtitle="t('settings.nodesPage.subtitle')"
-      class="shrink-0 px-4 border-b border-border-default"
-    >
-    </AppPageHeader>
+  <OPageLayout
+    :title="t('nodes.header')"
+    icon="hub"
+    :subtitle="t('settings.nodesPage.subtitle')"
+    bleed
+  >
     <OSplitter
       :model-value="splitterModel"
       @update:model-value="(v: number) => splitterModel = v"
       :limits="[0, 250]"
       unit="px"
-      class="flex-1 min-h-0"
-      style="overflow: hidden"
+      class="flex-1 min-h-0 overflow-hidden"
     >
       <template #before>
-        <div class="flex flex-col border-r4 border-r border-border-default " style="height: 100%">
+        <div class="flex flex-col border-r4 border-r border-border-default h-full">
           <div class="sticky top-0 px-2 shrink-0">
-            <div class="flex items-center justify-between p-2 " style="font-size: 18px">
+            <div class="flex items-center justify-between p-2 " style="font-size: var(--text-lg)">
               <span class="flex items-center gap-1">
                 {{ t("nodes.filter_header") }}
                 <OIcon name="filter-list" size="sm" />
@@ -517,7 +512,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
       </template>
     </OSplitter>
-  </div>
+  </OPageLayout>
 </template>
 
 <script lang="ts">
@@ -552,14 +547,14 @@ import OCollapsible from "@/lib/core/Collapsible/OCollapsible.vue";
 import OSeparator from "@/lib/core/Separator/OSeparator.vue";
 import OSplitter from "@/lib/core/Splitter/OSplitter.vue";
 import { toast } from "@/lib/feedback/Toast/useToast";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import { useShortcuts } from "@/lib/vue-shortcut-manager";
 import { isInputFocused } from "@/utils/keyboardShortcuts";
 
 export default defineComponent({
   name: "PageCipherKeys",
   components: {
-    AppPageHeader,
+    OPageLayout,
     OEmptyState,
     OButton,
     OProgressBar,
@@ -1103,36 +1098,38 @@ export default defineComponent({
 });
 </script>
 
-<style>
-tr.status-row > td:first-child {
+<style scoped>
+/* keep(generated-content): status stripe on OTable rows (row-class-driven ::before,
+   rendered inside the child OTable DOM — needs :deep) */
+:deep(tr.status-row) > td:first-child {
   position: relative;
 }
-tr.status-row > td:first-child::before {
+:deep(tr.status-row) > td:first-child::before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
-  width: 5px;
+  width: 0.3125rem;
 }
-tr.status-online > td:first-child::before {
-  background: #00a76f;
+:deep(tr.status-online) > td:first-child::before {
+  background: var(--color-status-positive);
 }
-tr.status-offline > td:first-child::before {
-  background: #ce2528;
+:deep(tr.status-offline) > td:first-child::before {
+  background: var(--color-status-negative);
 }
-tr.status-prepare > td:first-child::before {
-  background: #ffab00;
+:deep(tr.status-prepare) > td:first-child::before {
+  background: var(--color-status-warning-text);
 }
 
-/* Legacy span-based status indicator (still used by status filter list) */
+/* Legacy span-based status indicator (slotted status filter list — parent-scoped) */
 span.status-online {
-  border-left: #00a76f 5px solid !important;
+  border-left: var(--color-status-positive) 0.3125rem solid !important;
 }
 span.status-offline {
-  border-left: 5px solid #ce2528 !important;
+  border-left: 0.3125rem solid var(--color-status-negative) !important;
 }
 span.status-prepare {
-  border-left: 5px solid #ffab00 !important;
+  border-left: 0.3125rem solid var(--color-status-warning-text) !important;
 }
 </style>
diff --git a/web/src/components/settings/OrgStorageEditor.schema.ts b/web/src/components/settings/OrgStorageEditor.schema.ts
index b1631df1e0..ead9931e3e 100644
--- a/web/src/components/settings/OrgStorageEditor.schema.ts
+++ b/web/src/components/settings/OrgStorageEditor.schema.ts
@@ -2,18 +2,13 @@
 //
 // Provider-discriminated validation schema for OrgStorageEditor.vue. The storage
 // provider is chosen from a custom card grid (not an <input>), so it is bridged
-// into the form as `selectedProvider` (the documented sanctioned discriminator
-// bridge, as CreateDestinationForm does) and `superRefine` branches on it.
+// into the form as `selectedProvider` and `superRefine` branches on it.
 //
-// Restores the original BEFORE rules (truthy→Zod inversion) — every per-provider
-// credential was `(v)=>!!v?.trim() || t(<key>)`:
-//   • AwsCredentials  → bucket_name, access_key, secret_key required (trim)
-//   • AzureCredentials→ storage_account, bucket_name, secret_key required
-//   • GcpCredentials  → bucket_name, access_key required
-//   • AwsRoleArn      → bucket_name, region, role_arn, external_id required
-//
-// Validation TIMING is owned by OForm (submit-then-change via revalidateLogic);
-// this file only describes WHAT is valid.
+// Per-provider required credentials (all trimmed):
+//   • AwsCredentials  → bucket_name, access_key, secret_key
+//   • AzureCredentials→ storage_account, bucket_name, secret_key
+//   • GcpCredentials  → bucket_name, access_key
+//   • AwsRoleArn      → bucket_name, region, role_arn, external_id
 
 import { z } from "zod";
 
diff --git a/web/src/components/settings/OrgStorageEditor.spec.ts b/web/src/components/settings/OrgStorageEditor.spec.ts
index 8011fe3b21..f962a1fbd6 100644
--- a/web/src/components/settings/OrgStorageEditor.spec.ts
+++ b/web/src/components/settings/OrgStorageEditor.spec.ts
@@ -79,7 +79,7 @@ const createWrapper = (action: "add" | "edit" = "add") =>
       stubs: {
         OStepper: { template: "<div><slot /></div>" },
         OStep: { template: "<div><slot /></div>" },
-        AppPageHeader: { template: "<div><slot name='title' /></div>" },
+        OPageHeader: { template: "<div><slot name='title' /></div>" },
         OIcon: { template: "<span />" },
         OButton: {
           template: `<button :data-test="$attrs['data-test']" :type="type" @click="$emit('click', $event)"><slot /></button>`,
diff --git a/web/src/components/settings/OrgStorageEditor.vue b/web/src/components/settings/OrgStorageEditor.vue
index a3fe0a326c..7a1f8a0d3a 100644
--- a/web/src/components/settings/OrgStorageEditor.vue
+++ b/web/src/components/settings/OrgStorageEditor.vue
@@ -15,24 +15,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="p-0 storage-settings-editor">
-    <!-- Header -->
-    <AppPageHeader
-      :back="{
-        label: t('storage_settings.title'),
-        onClick: () => emit('cancel'),
-        dataTest: 'storage-settings-editor-back-btn',
-      }"
-      :title="headerTitle"
-      class="px-4 border-b border-border-default mb-[0.675rem]"
-    >
+  <OPageLayout
+    :back="{
+      label: t('storage_settings.title'),
+      onClick: () => emit('cancel'),
+      dataTest: 'storage-settings-editor-back-btn',
+    }"
+    :title="headerTitle"
+  >
       <template #title>
         <span data-test="storage-settings-editor-title">{{ headerTitle }}</span>
       </template>
-    </AppPageHeader>
 
     <!-- Stepper -->
-    <div class="card-container h-[calc(100vh-7rem)] py-2 px-3 overflow-auto">
+    <div class="bg-card-glass-bg h-[calc(100vh-7rem)] py-2 px-3 overflow-auto">
     <div style="max-width: 720px;">
       <OForm
         ref="storageForm"
@@ -54,72 +50,60 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             :done="step > 1"
             :navigable="step > 1 && !isEditMode"
           >
-            <div class="text-sm text-gray-500 mb-3">
+            <div class="text-sm text-text-secondary mb-3">
               {{ t("storage_settings.selectProviderDesc") }}
               {{ t("settings.orgStorageEditor.selectProviderDescCont") }}
             </div>
             <div
               v-if="!isEditMode"
-              class="flex items-start gap-[10px] px-3 py-[10px] mb-3 rounded-[10px] border"
-              :class="store.state.theme === 'dark'
-                ? 'bg-amber-950/20 border-amber-400/30'
-                : 'bg-amber-50 border-amber-300'"
+              class="flex items-start gap-2.5 px-3 py-2.5 mb-3 rounded-default border bg-banner-warning-bg border-banner-warning-border"
             >
               <OIcon name="warning" size="sm" class="flex-shrink-0 mt-px" />
-              <div class="text-[0.82rem] leading-[1.55] text-[var(--o2-text-primary)]">
+              <div class="text-compact leading-[1.55] text-text-body">
                 {{ t("settings.orgStorageEditor.irreversibleWarnPre") }}<strong>{{ t("settings.orgStorageEditor.irreversibleWarnEmphasis") }}</strong>{{ t("settings.orgStorageEditor.irreversibleWarnPost") }}
               </div>
             </div>
             <div
               v-if="!isEditMode"
-              class="flex items-start gap-[10px] px-3 py-[10px] mb-3 rounded-[10px] border"
-              :class="store.state.theme === 'dark'
-                ? 'bg-blue-950/20 border-blue-400/20'
-                : 'bg-blue-50 border-blue-200'"
+              class="flex items-start gap-2.5 px-3 py-2.5 mb-3 rounded-default border bg-banner-info-bg border-banner-info-border"
             >
               <OIcon name="info" size="sm" class="flex-shrink-0 mt-px" />
-              <div class="text-[0.82rem] leading-[1.55] text-[var(--o2-text-primary)]">
+              <div class="text-compact leading-[1.55] text-text-body">
                 {{ t("settings.orgStorageEditor.credentialsOnlyInfo") }}
               </div>
             </div>
-            <div class="text-sm font-medium mb-2" style="font-weight: 500">
-              {{ t("settings.orgStorageEditor.selectStorageProviderLabel") }}<span class="text-red">*</span>
+            <div class="text-sm font-medium mb-2">
+              {{ t("settings.orgStorageEditor.selectStorageProviderLabel") }}<span class="text-status-negative">*</span>
             </div>
-            <div class="destination-type-grid grid gap-3" style="grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));">
+            <div class="destination-type-grid grid gap-3 grid-cols-[repeat(auto-fill,minmax(8.75rem,1fr))]">
               <div
                 v-for="provider in availableProviders"
                 :key="provider.value"
                 :data-test="`storage-settings-provider-card-${provider.value}`"
-                class="group/card relative flex flex-col items-center justify-center py-5 px-3 border-2 rounded-xl cursor-pointer transition-all duration-300 min-h-30 hover:-translate-y-0.5"
-                :class="[
-                  { selected: selectedProvider === provider.value },
-                  store.state.theme === 'dark'
-                    ? 'bg-[#1e1e1e] border-[#424242] hover:border-[#5d9cec] hover:shadow-[0_4px_12px_rgba(93,156,236,0.2)]'
-                    : 'bg-white border-(--o2-border) hover:border-(--o2-border-color) hover:shadow-[0_4px_12px_rgba(25,118,210,0.15)]'
-                ]"
-                :style="selectedProvider === provider.value && store.state.theme !== 'dark'
-                  ? 'border-color: var(--o2-border-color); background: linear-gradient(135deg, #e3f2fd 0%, #ffffff 100%); box-shadow: 0 4px 16px rgba(25,118,210,0.2);'
-                  : selectedProvider === provider.value && store.state.theme === 'dark'
-                  ? 'border-color: #5d9cec; background: linear-gradient(135deg, #1a3a52 0%, #1e1e1e 100%); box-shadow: 0 4px 16px rgba(93,156,236,0.25);'
-                  : ''"
+                class="group/card relative flex flex-col items-center justify-center py-5 px-3 border-2 rounded-default cursor-pointer transition-all duration-300 min-h-30 hover:-translate-y-0.5 hover:shadow-md"
+                :class="
+                  selectedProvider === provider.value
+                    ? 'selected bg-table-row-selected-bg border-accent shadow-md'
+                    : 'bg-surface-base border-border-default hover:border-card-glass-border'
+                "
                 @click="selectedProvider = provider.value"
               >
                 <img
                   v-if="provider.image"
                   :src="provider.image"
                   :alt="provider.label"
-                  class="card-image w-[48px] h-[48px] mb-2 object-contain"
+                  class="card-image w-12 h-12 mb-2 object-contain"
                 />
                 <OIcon
                   v-else
                   :name="provider.icon"
                   size="lg"
-                  class="mb-2 text-[#666] [transition:color_0.3s_ease] group-[.selected]/card:text-(--o2-border-color) dark:group-[.selected]/card:text-[#5d9cec]"
+                  class="mb-2 text-text-secondary [transition:color_0.3s_ease] group-[.selected]/card:text-card-glass-border"
                 />
-                <div class="text-[13px] font-medium text-center [line-height:1.3] mt-1 text-[var(--o2-text-primary)] group-[.selected]/card:text-[#333333] dark:group-[.selected]/card:text-white">{{ provider.label }}</div>
+                <div class="text-compact font-medium text-center [line-height:1.3] mt-1 text-text-body">{{ provider.label }}</div>
                 <div
                   v-if="selectedProvider === provider.value"
-                  class="check-icon absolute top-[0.375rem] right-[0.375rem] w-[1.25rem] h-[1.25rem] rounded-full overflow-hidden bg-[var(--o2-positive)] text-white flex items-center justify-center z-[1]"
+                  class="check-icon absolute top-1.5 right-1.5 w-5 h-5 rounded-full overflow-hidden bg-status-positive text-white flex items-center justify-center z-[1]"
                 >
                   <OIcon name="check" size="xs" />
                 </div>
@@ -262,13 +246,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <!-- AwsRoleArn Fields -->
               <template v-if="selectedProvider === 'AwsRoleArn'">
                 <div
-                  class="flex items-start gap-[10px] px-3 py-[10px] mb-3 rounded-[10px] border"
-                  :class="store.state.theme === 'dark'
-                    ? 'bg-blue-950/20 border-blue-400/20'
-                    : 'bg-blue-50 border-blue-200'"
+                  class="flex items-start gap-2.5 px-3 py-2.5 mb-3 rounded-default border bg-banner-info-bg border-banner-info-border"
                 >
                   <OIcon name="info" size="sm" class="flex-shrink-0 mt-px" />
-                  <div class="text-[0.82rem] leading-[1.55] text-[var(--o2-text-primary)]">
+                  <div class="text-compact leading-[1.55] text-text-body">
                     <template v-if="isCloud">
                       {{ t("storage_settings.awsStsCloudInfo") }}
                     </template>
@@ -324,9 +305,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <OButton
               data-test="step1-cancel-btn"
               variant="outline"
-              class="o2-secondary-button h-[36px] mr-2"
+              class="o2-secondary-button h-9 mr-2"
               :class="
-                store.state.theme === 'dark'
+                isDark
                   ? 'o2-secondary-button-dark'
                   : 'o2-secondary-button-light'
               "
@@ -337,9 +318,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <OButton
               data-test="step1-continue-btn"
               variant="primary"
-              class="no-border o2-primary-button h-[36px]"
+              class="no-border o2-primary-button h-9"
               :class="
-                store.state.theme === 'dark'
+                isDark
                   ? 'o2-primary-button-dark'
                   : 'o2-primary-button-light'
               "
@@ -354,9 +335,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               v-if="!isEditMode"
               data-test="step2-back-btn"
               variant="outline"
-              class="o2-secondary-button h-[36px] mr-2"
+              class="o2-secondary-button h-9 mr-2"
               :class="
-                store.state.theme === 'dark'
+                isDark
                   ? 'o2-secondary-button-dark'
                   : 'o2-secondary-button-light'
               "
@@ -367,9 +348,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <OButton
               data-test="step2-cancel-btn"
               variant="outline"
-              class="o2-secondary-button h-[36px]"
+              class="o2-secondary-button h-9"
               :class="
-                store.state.theme === 'dark'
+                isDark
                   ? 'o2-secondary-button-dark'
                   : 'o2-secondary-button-light'
               "
@@ -380,9 +361,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <OButton
               data-test="storage-settings-submit-btn"
               variant="primary"
-              class="no-border ml-2 o2-primary-button h-[36px]"
+              class="no-border ml-2 o2-primary-button h-9"
               :class="
-                store.state.theme === 'dark'
+                isDark
                   ? 'o2-primary-button-dark'
                   : 'o2-primary-button-light'
               "
@@ -395,7 +376,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </OForm>
     </div>
     </div>
-  </div>
+  </OPageLayout>
 </template>
 
 <script lang="ts" setup>
@@ -404,6 +385,7 @@ import { ref, computed, onMounted, watch } from "vue";
 defineOptions({ name: "OrgStorageEditor" });
 import { useI18n } from "vue-i18n";
 import { useStore } from "vuex";
+import { useTheme } from "@/composables/useTheme";
 import config from "@/aws-exports";
 import orgStorageService from "@/services/org_storage";
 import { getImageURL } from "@/utils/zincutils";
@@ -413,7 +395,7 @@ import OStepper from "@/lib/navigation/Stepper/OStepper.vue";
 import OStep from "@/lib/navigation/Stepper/OStep.vue";
 import OForm from "@/lib/forms/Form/OForm.vue";
 import OFormInput from "@/lib/forms/Input/OFormInput.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import { toast } from "@/lib/feedback/Toast/useToast";
 import {
   makeOrgStorageEditorSchema,
@@ -430,6 +412,7 @@ const emit = defineEmits<{
 }>();
 
 const store = useStore();
+    const { isDark } = useTheme();
 const { t } = useI18n();
 
 const step = ref(1);
@@ -439,8 +422,7 @@ const selectedProvider = ref("");
 // provider-change reset, and async edit-prefill (form.reset).
 const storageForm = ref<any>(null);
 
-// Schema-driven validation replaces the manual fieldErrors map +
-// validateStorageForm(). Provider-discriminated via superRefine on the bridged
+// Provider-discriminated validation via superRefine on the bridged
 // `selectedProvider` field.
 const orgStorageEditorSchema = makeOrgStorageEditorSchema(t);
 
@@ -562,10 +544,9 @@ function buildDataPayload(value: OrgStorageEditorForm) {
   return data;
 }
 
-// @submit handler — fires only once the provider-discriminated schema passes,
-// so the manual validateStorageForm()/fieldErrors are gone. The Save button is
-// inline (type=submit inside <OForm>) so Enter works natively; OForm awaits this
-// so the spinner spans the POST.
+// @submit handler — fires only once the provider-discriminated schema passes.
+// The Save button is inline (type=submit inside <OForm>) so Enter works
+// natively; OForm awaits this so the spinner spans the POST.
 async function submitStorage(value: OrgStorageEditorForm) {
   const dismiss = toast({
     variant: "loading",
@@ -622,11 +603,10 @@ onMounted(async () => {
         step.value = 2;
         // data is already a parsed object from the API
         const parsed = res.data.data || {};
-        // Prefill the form once the (async) config arrives — form.reset, not a
-        // per-field loop (the documented "data arrives after mount" pattern).
-        // Non-credential fields are disabled in the form; credentials must be
-        // entered fresh — never prefill with masked values. external_id is a
-        // credential but not masked, so it IS prefilled.
+        // Prefill the form once the (async) config arrives. Non-credential
+        // fields are disabled in the form; credentials must be entered fresh —
+        // never prefill with masked values. external_id is a credential but not
+        // masked, so it IS prefilled.
         storageForm.value?.form?.reset({
           selectedProvider: res.data.provider,
           bucket_name: parsed.bucket_name || "",
@@ -648,9 +628,9 @@ onMounted(async () => {
   }
 });
 
-// Bridge the provider card grid into the form (the documented sanctioned
-// discriminator bridge) so superRefine can branch on it. On a create-mode
-// provider change, reset the credential fields fresh for the new provider.
+// Bridge the provider card grid into the form so superRefine can branch on it.
+// On a create-mode provider change, reset the credential fields fresh for the
+// new provider.
 watch(selectedProvider, (newProvider) => {
   storageForm.value?.form?.setFieldValue("selectedProvider", newProvider);
   if (newProvider && !isEditMode.value) {
diff --git a/web/src/components/settings/OrgStorageSettings.vue b/web/src/components/settings/OrgStorageSettings.vue
index 41f6cf29ed..d623b3425e 100644
--- a/web/src/components/settings/OrgStorageSettings.vue
+++ b/web/src/components/settings/OrgStorageSettings.vue
@@ -15,24 +15,25 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="org-storage-settings ">
-      <template v-if="currentAction === 'list'">
-          <AppPageHeader
-            :title="t('storage_settings.title')"
-            icon="cloud"
-            :subtitle="t('settings.orgStorageSettings.subtitle')"
-            class="shrink-0 px-4 border-b border-border-default"
-          />
+  <div class="org-storage-settings h-full">
+      <OPageLayout
+        v-if="currentAction === 'list'"
+        :title="t('storage_settings.title')"
+        icon="cloud"
+        :subtitle="t('settings.orgStorageSettings.subtitle')"
+        bleed
+        scroll
+      >
 
     <!-- Loading state -->
-    <div v-if="loading" class="flex justify-center items-center" style="min-height: calc(100vh - var(--navbar-height) - 120px)">
+    <div v-if="loading" class="flex justify-center items-center min-h-[calc(100vh-var(--navbar-height)-7.5rem)]">
       <OSpinner size="md" data-test="org-storage-settings-loading-indicator" />
     </div>
 
     <!-- Cloud: storage not enabled -->
     <div
       v-else-if="isCloud && !orgStorageEnabled"
-      class="text-sm text-gray-500 py-3"
+      class="text-sm text-text-secondary py-3"
     >
       {{ t('storage_settings.notEnabled') }}
     </div>
@@ -40,19 +41,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <!-- ========== NOT CONFIGURED: cloud hero ========== -->
     <div
       v-else-if="!isConfigured && isCloud"
-      class="hero-page flex flex-col"
-      :style="{ minHeight: 'calc(100vh - var(--navbar-height) - 100px)' }"
-      :class="store.state.theme === 'dark' ? 'hero-page--dark' : ''"
+      class="hero-page flex flex-col min-h-[calc(100vh-var(--navbar-height)-6.25rem)]"
     >
-      <div class="hero-page__body flex items-center justify-between flex-1 py-[72px] px-[80px]" style="gap: 56px;">
+      <div class="hero-page__body flex items-center justify-between flex-1 py-18 px-20 gap-14">
         <!-- left -->
-        <div class="hero-page__left flex-1 max-w-[480px]">
+        <div class="hero-page__left flex-1 max-w-120">
 
-          <div class="hero-page__headline font-bold leading-tight mb-[18px] text-[#111827]" :class="store.state.theme === 'dark' ? 'text-[#f1f1f5]' : ''" style="font-size: 2.6rem; letter-spacing: -0.6px; line-height: 1.2;">
-            {{ t("storage_settings.heroHeadline") }} <span class="hero-page__brand-text text-(--q-primary)">OpenObserve.</span>
+          <div class="hero-page__headline font-bold leading-tight mb-4.5 text-text-heading text-4xl tracking-tight">
+            {{ t("storage_settings.heroHeadline") }} <span class="hero-page__brand-text text-theme-accent">OpenObserve.</span>
           </div>
 
-          <div class="hero-page__sub leading-[1.7] text-[#6b7280] mb-9 max-w-[400px]" :class="store.state.theme === 'dark' ? 'text-[#9ca3af]' : ''" style="font-size: 0.97rem;">
+          <div class="hero-page__sub leading-[1.7] text-text-secondary mb-9 max-w-100 text-base">
             {{ t("storage_settings.heroSub") }}
           </div>
 
@@ -60,8 +59,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <OButton
               data-test="storage-settings-configure-btn"
               variant="primary"
-              class="no-border o2-primary-button hero-cta-btn h-11 px-7 font-semibold" style="font-size: 0.95rem;"
-              :class="store.state.theme === 'dark' ? 'o2-primary-button-dark' : 'o2-primary-button-light'"
+              class="no-border o2-primary-button hero-cta-btn h-11 px-7 font-semibold text-base"
               @click="navigateToCreate"
             >
               {{ t("storage_settings.configureStorage") }}
@@ -70,14 +68,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
           <!-- supported infrastructure -->
           <div class="hero-page__inline-providers flex items-center gap-3">
-            <span class="hero-page__inline-label font-medium whitespace-nowrap text-[#aaa]" :class="store.state.theme === 'dark' ? 'text-[#666]' : ''" style="font-size: 0.8rem; letter-spacing: 0px;">{{ t("storage_settings.supportedProviders") }}</span>
-            <div class="hero-page__inline-logos flex items-center" style="gap: 10px;">
+            <span class="hero-page__inline-label font-medium whitespace-nowrap text-text-muted text-compact">{{ t("storage_settings.supportedProviders") }}</span>
+            <div class="hero-page__inline-logos flex items-center gap-2.5">
               <div
                 v-for="p in availableProviders"
                 :key="p.value"
-                class="hero-page__inline-logo-wrap w-7 h-7 flex items-center justify-center shrink-0 cursor-default opacity-70 transition-opacity duration-150"
+                class="hero-page__inline-logo-wrap w-7 h-7 flex items-center justify-center shrink-0 cursor-default opacity-70 hover:opacity-100 transition-opacity duration-150"
               >
-                <img :src="p.image" :alt="p.label" class="hero-page__inline-logo w-7 h-7 max-w-[28px] max-h-[28px] object-contain block" />
+                <img :src="p.image" :alt="p.label" class="hero-page__inline-logo w-7 h-7 max-w-7 max-h-7 object-contain block" />
                 <OTooltip :content="p.label" />
               </div>
             </div>
@@ -85,19 +83,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
 
         <!-- right: feature cards -->
-        <div class="hero-page__right w-[340px] shrink-0 flex flex-col" style="gap: 14px;">
+        <div class="hero-page__right w-85 shrink-0 flex flex-col gap-3.5">
           <div
             v-for="feature in features"
             :key="feature.title"
-            class="feature-card flex items-start rounded-[16px] border border-[rgba(0,0,0,0.07)] bg-white transition-all duration-200" style="gap: 16px; padding: 20px 22px; box-shadow: 0 2px 12px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.04);"
-            :class="store.state.theme === 'dark' ? 'feature-card--dark bg-[rgba(255,255,255,0.05)] border-[rgba(255,255,255,0.08)] [box-shadow:0_2px_12px_rgba(0,0,0,0.3)]' : ''"
+            class="feature-card flex items-start rounded-default border border-border-default bg-surface-base shadow-md transition-all duration-200 gap-4 py-5 px-5.5 hover:shadow-lg hover:-translate-y-px"
           >
-            <div class="feature-card__icon-box w-10 h-10 rounded-[10px] bg-[rgba(66,133,244,0.08)] flex items-center justify-center shrink-0" :class="store.state.theme === 'dark' ? 'feature-card__icon-box--dark bg-[rgba(66,133,244,0.15)]' : ''">
-              <OIcon :name="feature.icon" size="md" class="feature-card__icon text-(--q-primary) opacity-85" />
+            <div class="feature-card__icon-box w-10 h-10 rounded-default bg-[color-mix(in_srgb,var(--color-theme-accent)_8%,transparent)] flex items-center justify-center shrink-0">
+              <OIcon :name="feature.icon" size="md" class="feature-card__icon text-theme-accent opacity-85" />
             </div>
-            <div class="feature-card__content pt-[2px] flex-1">
-              <div class="feature-card__title font-bold text-[#111827] mb-[5px]" :class="store.state.theme === 'dark' ? 'text-[#f3f4f6]' : ''" style="font-size: 0.92rem;">{{ feature.title }}</div>
-              <div class="feature-card__desc text-[#6b7280] leading-[1.55]" :class="store.state.theme === 'dark' ? 'text-[#9ca3af]' : ''" style="font-size: 0.8rem;">{{ feature.desc }}</div>
+            <div class="feature-card__content pt-0.5 flex-1">
+              <div class="feature-card__title font-bold text-text-heading mb-1.25 text-sm">{{ feature.title }}</div>
+              <div class="feature-card__desc text-text-secondary leading-[1.55] text-compact">{{ feature.desc }}</div>
             </div>
           </div>
         </div>
@@ -107,8 +104,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <!-- ========== NOT CONFIGURED: enterprise empty state ========== -->
     <div
       v-else-if="!isConfigured && !isCloud"
-      class="w-full"
-      :style="{ minHeight: 'calc(100vh - var(--navbar-height) - 160px)' }"
+      class="w-full min-h-[calc(100vh-var(--navbar-height)-10rem)]"
     >
       <OEmptyState
         size="hero"
@@ -156,20 +152,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
       <div class="p-3">
       <OCard
-        class="storage-card rounded-xl"
-        :class="store.state.theme === 'dark' ? 'storage-card--dark bg-[#1e1e1e]' : ''"
-        style="max-width: 680px;"
+        class="storage-card rounded-default bg-surface-base max-w-170"
       >
         <!-- Card header: logo + name + badge | update button -->
         <OCardSection role="header">
-          <div class="flex items-center flex-nowrap flex-1" style="gap: 14px;">
+          <div class="flex items-center flex-nowrap flex-1 gap-3.5">
             <img
               :src="configuredProviderImage"
               :alt="configuredProviderLabel"
-              style="width: 44px; height: 44px; object-fit: contain; flex-shrink: 0;"
+              class="w-11 h-11 object-contain shrink-0"
             />
             <div>
-              <div class="text-base font-medium" style="font-weight: 700; line-height: 1.3;">
+              <div class="text-base font-bold leading-tight">
                 {{ configuredProviderLabel }}
               </div>
               <OTag type="activeFlag" class="mt-1" />
@@ -180,7 +174,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             variant="primary"
             size="sm"
             class="no-border o2-primary-button"
-            :class="store.state.theme === 'dark' ? 'o2-primary-button-dark' : 'o2-primary-button-light'"
             @click="navigateToEdit"
           >
             {{ t("storage_settings.updateStorage") }}
@@ -191,30 +184,30 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
         <!-- Field grid -->
         <OCardSection role="body">
-          <div class="storage-detail-grid grid gap-x-8 gap-y-5" style="grid-template-columns: repeat(2, 1fr);">
+          <div class="storage-detail-grid grid gap-x-8 gap-y-5 grid-cols-2">
             <div v-if="storageData.bucket_name" class="storage-field">
-              <div class="storage-field__label text-xs text-[#6b7280] capitalize mb-[3px] font-medium">{{ t("storage_settings.bucketName") }}</div>
-              <div class="storage-field__value text-[#6b7280] break-all" style="font-size: 0.9rem; color: var(--o2-text-primary);">{{ storageData.bucket_name }}</div>
+              <div class="storage-field__label text-xs text-text-label capitalize mb-0.75 font-medium">{{ t("storage_settings.bucketName") }}</div>
+              <div class="storage-field__value break-all text-sm text-text-body">{{ storageData.bucket_name }}</div>
             </div>
             <div v-if="storageData.region" class="storage-field">
-              <div class="storage-field__label text-xs text-[#6b7280] capitalize mb-[3px] font-medium">{{ t("storage_settings.region") }}</div>
-              <div class="storage-field__value break-all" style="font-size: 0.9rem; color: var(--o2-text-primary);">{{ storageData.region }}</div>
+              <div class="storage-field__label text-xs text-text-label capitalize mb-0.75 font-medium">{{ t("storage_settings.region") }}</div>
+              <div class="storage-field__value break-all text-sm text-text-body">{{ storageData.region }}</div>
             </div>
             <div v-if="storageData.server_url && !isCloud" class="storage-field">
-              <div class="storage-field__label text-xs text-[#6b7280] capitalize mb-[3px] font-medium">{{ t("storage_settings.serverUrl") }}</div>
-              <div class="storage-field__value break-all" style="font-size: 0.9rem; color: var(--o2-text-primary);">{{ storageData.server_url }}</div>
+              <div class="storage-field__label text-xs text-text-label capitalize mb-0.75 font-medium">{{ t("storage_settings.serverUrl") }}</div>
+              <div class="storage-field__value break-all text-sm text-text-body">{{ storageData.server_url }}</div>
             </div>
             <div v-if="storageData.access_key" class="storage-field">
-              <div class="storage-field__label text-xs text-[#6b7280] capitalize mb-[3px] font-medium">{{ t("storage_settings.accessKey") }}</div>
-              <div class="storage-field__value break-all" style="font-size: 0.9rem; color: var(--o2-text-primary);">{{ storageData.access_key }}</div>
+              <div class="storage-field__label text-xs text-text-label capitalize mb-0.75 font-medium">{{ t("storage_settings.accessKey") }}</div>
+              <div class="storage-field__value break-all text-sm text-text-body">{{ storageData.access_key }}</div>
             </div>
             <div v-if="storageData.secret_key" class="storage-field">
-              <div class="storage-field__label text-xs text-[#6b7280] capitalize mb-[3px] font-medium">{{ t("storage_settings.secretKey") }}</div>
-              <div class="storage-field__value break-all" style="font-size: 0.9rem; color: var(--o2-text-primary);">{{ storageData.secret_key }}</div>
+              <div class="storage-field__label text-xs text-text-label capitalize mb-0.75 font-medium">{{ t("storage_settings.secretKey") }}</div>
+              <div class="storage-field__value break-all text-sm text-text-body">{{ storageData.secret_key }}</div>
             </div>
             <div v-if="storageData.role_arn" class="storage-field">
-              <div class="storage-field__label text-xs text-[#6b7280] capitalize mb-[3px] font-medium">{{ t("storage_settings.roleArn") }}</div>
-              <div class="storage-field__value break-all" style="font-size: 0.9rem; color: var(--o2-text-primary); word-break: break-all;">{{ storageData.role_arn }}</div>
+              <div class="storage-field__label text-xs text-text-label capitalize mb-0.75 font-medium">{{ t("storage_settings.roleArn") }}</div>
+              <div class="storage-field__value break-all text-sm text-text-body">{{ storageData.role_arn }}</div>
             </div>
           </div>
         </OCardSection>
@@ -223,13 +216,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
         <!-- Timestamps -->
         <OCardSection v-if="configTimestamps">
-          <div class="flex" style="gap: 40px;">
-            <div v-if="configTimestamps.created_at" class="flex items-center" style="gap: 6px;">
-              <span class="storage-field__label text-xs text-[#6b7280] capitalize font-medium" style="margin-bottom: 0;">{{ t("storage_settings.createdAt") }}</span>
+          <div class="flex gap-10">
+            <div v-if="configTimestamps.created_at" class="flex items-center gap-1.5">
+              <span class="storage-field__label text-xs text-text-label capitalize font-medium mb-0">{{ t("storage_settings.createdAt") }}</span>
               <span class="text-sm">{{ configTimestamps.created_at }}</span>
             </div>
-            <div v-if="configTimestamps.updated_at" class="flex items-center" style="gap: 6px;">
-              <span class="storage-field__label text-xs text-[#6b7280] capitalize font-medium" style="margin-bottom: 0;">{{ t("storage_settings.updatedAt") }}</span>
+            <div v-if="configTimestamps.updated_at" class="flex items-center gap-1.5">
+              <span class="storage-field__label text-xs text-text-label capitalize font-medium mb-0">{{ t("storage_settings.updatedAt") }}</span>
               <span class="text-sm">{{ configTimestamps.updated_at }}</span>
             </div>
           </div>
@@ -237,7 +230,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </OCard>
       </div>
     </div>
-    </template>
+    </OPageLayout>
     <OrgStorageEditor
       v-else
       :action="currentAction"
@@ -249,7 +242,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <script lang="ts" setup>
 import { ref, computed, onMounted } from "vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import OCard from "@/lib/core/Card/OCard.vue";
 import OCardSection from "@/lib/core/Card/OCardSection.vue";
 import { useI18n } from "vue-i18n";
@@ -398,14 +391,3 @@ onMounted(() => {
   fetchExistingConfig();
 });
 </script>
-
-<style>
-.hero-page__inline-logo-wrap:hover {
-  opacity: 1;
-}
-
-.feature-card:hover {
-  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
-  transform: translateY(-1px);
-}
-</style>
diff --git a/web/src/components/settings/OrganizationManagement.schema.ts b/web/src/components/settings/OrganizationManagement.schema.ts
index e3dba893d8..d97e6c7b55 100644
--- a/web/src/components/settings/OrganizationManagement.schema.ts
+++ b/web/src/components/settings/OrganizationManagement.schema.ts
@@ -3,20 +3,15 @@
 // Validation schemas for the two self-owned dialogs in OrganizationManagement.vue
 // (meta-org admin): the External Contract dialog and the Extend-Trial dialog.
 //
-// Both dialogs previously gated their POST on imperative JS guards inside the
-// @click:primary handlers (a toast + early-return for a missing contract end
-// date). Those guards are replaced here by Zod rules wired to <OForm>, so the
-// footer Save + Enter submit through `form-id` and validation is schema-driven.
-//
-// Validation TIMING is owned by OForm (submit-then-change via revalidateLogic);
-// these schemas only describe WHAT is valid.
+// Validation timing is owned by OForm (submit-then-change via revalidateLogic);
+// these schemas only describe what is valid.
 
 import { z } from "zod";
 
 // ── External Contract dialog ─────────────────────────────────────────────────
 // The single date field is required. The message is mode-aware so it reads
 // "End date is required." when creating a new contract and "New end date is
-// required." when extending an existing one (mirrors the old toast guards).
+// required." when extending an existing one.
 export const makeContractSchema = (mode: "create" | "extend") =>
   z.object({
     contractEndDate: z
diff --git a/web/src/components/settings/OrganizationManagement.spec.ts b/web/src/components/settings/OrganizationManagement.spec.ts
index 70687aadd7..362e088b91 100644
--- a/web/src/components/settings/OrganizationManagement.spec.ts
+++ b/web/src/components/settings/OrganizationManagement.spec.ts
@@ -300,16 +300,15 @@ describe("OrganizationManagement.vue", () => {
     it("should have correct column configuration", () => {
       wrapper = createWrapper();
       const columns = wrapper.vm.columns;
-      expect(columns).toHaveLength(9);
-      expect(columns[0].id).toBe("#");
-      expect(columns[1].id).toBe("name");
-      expect(columns[2].id).toBe("identifier");
-      expect(columns[3].id).toBe("subscription_status");
-      expect(columns[4].id).toBe("billing_provider");
-      expect(columns[5].id).toBe("created_on");
-      expect(columns[6].id).toBe("trial_expiry");
-      expect(columns[7].id).toBe("contract_end_date");
-      expect(columns[8].id).toBe("actions");
+      expect(columns).toHaveLength(8);
+      expect(columns[0].id).toBe("name");
+      expect(columns[1].id).toBe("identifier");
+      expect(columns[2].id).toBe("subscription_status");
+      expect(columns[3].id).toBe("billing_provider");
+      expect(columns[4].id).toBe("created_on");
+      expect(columns[5].id).toBe("trial_expiry");
+      expect(columns[6].id).toBe("contract_end_date");
+      expect(columns[7].id).toBe("actions");
     });
 
     it("should have subscription plans mapping", () => {
@@ -446,7 +445,6 @@ describe("OrganizationManagement.vue", () => {
 
       expect(wrapper.vm.tabledata).toHaveLength(2);
       expect(wrapper.vm.tabledata[0]).toEqual({
-        "#": 1,
         id: 1,
         name: "Test Org 1",
         identifier: "test-org-1",
@@ -1071,7 +1069,7 @@ describe("OrganizationManagement.vue", () => {
 
     it("should render the title", () => {
       wrapper = createWrapper();
-      // Title now lives in the standard AppPageHeader (row 1).
+      // Title now lives in the standard OPageHeader (row 1).
       const title = wrapper.find(".app-page-header h1");
       expect(title.text()).toBe("Organization Management");
     });
diff --git a/web/src/components/settings/OrganizationManagement.vue b/web/src/components/settings/OrganizationManagement.vue
index 227bfc1839..251d88a270 100644
--- a/web/src/components/settings/OrganizationManagement.vue
+++ b/web/src/components/settings/OrganizationManagement.vue
@@ -16,15 +16,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <div class="flex flex-col h-full p-0">
-    <div class="flex flex-col h-full">
-      <!-- Standard section header: title only. Search moved into the table toolbar. -->
-      <AppPageHeader
-        :title="t('settings.organizationManagement')"
-        icon="lan"
-        :subtitle="t('settings.organizationManagementPage.subtitle')"
-        class="shrink-0 px-4 border-b border-border-default"
-      />
-      <div class="card-container flex-1 min-h-0 mt-2.5 overflow-hidden">
+    <OPageLayout
+      :title="t('settings.organizationManagement')"
+      icon="lan"
+      :subtitle="t('settings.organizationManagementPage.subtitle')"
+      bleed
+    >
+      <div class="bg-card-glass-bg flex-1 min-h-0 mt-2.5 overflow-hidden">
       <OTable
         :frame="false"
         data-test="org-management-list-table"
@@ -37,6 +35,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         sorting="client"
         filter-mode="client"
         :default-columns="false"
+        show-index
         :enable-column-resize="true"
         :persist-columns="true"
         table-id="org-management-list"
@@ -129,7 +128,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               size="icon-xs-circle"
               icon-left="cloud-done"
               disabled
-              class="text-green-500"
+              class="text-status-positive"
               data-test="org-management-storage-enabled-btn"
             >
               <OTooltip :content="t('settings.organizationManagementPage.storageEnabled')" />
@@ -138,7 +137,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </template>
       </OTable>
       </div>
-    </div>
+    </OPageLayout>
 
     <!-- Extend Trial Dialog -->
     <ODialog
@@ -167,10 +166,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :key="page"
               @click="extendedTrial = page"
               :class="[
-                'cursor-pointer px-2 py-1 border border-gray-300',
+                'cursor-pointer px-2 py-1 border border-border-default',
                 extendedTrial === page
-                  ? 'bg-(--o2-primary-btn-bg) text-(--o2-primary-btn-text) border-(--o2-primary-btn-bg)'
-                  : 'bg-white text-gray-700 border-gray-300',
+                  ? 'bg-button-primary text-button-primary-foreground border-button-primary'
+                  : 'bg-surface-base text-text-body border-border-default',
               ]"
             >
               {{ page }}
@@ -214,7 +213,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
         <div
           v-if="contractMode === 'extend' && contractDataRow?.contract_end_date"
-          class="text-xs text-gray-500"
+          class="text-xs text-text-secondary"
         >
           {{ t('settings.organizationManagementPage.currentEndDate', { date: formatMicrosToDate(contractDataRow.contract_end_date) }) }}
         </div>
@@ -248,7 +247,7 @@ import { COL } from "@/lib/core/Table/OTable.types";
 import orgStorageService from "@/services/org_storage";
 import { toast } from "@/lib/feedback/Toast/useToast";
 import { useConfirmDialog } from "@/composables/useConfirmDialog";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import { useShortcuts } from "@/lib/vue-shortcut-manager";
 import { isInputFocused } from "@/utils/keyboardShortcuts";
 import {
@@ -262,7 +261,7 @@ import {
 export default defineComponent({
   name: "PageAlerts",
   components: {
-    AppPageHeader,
+    OPageLayout,
     OEmptyState,
     OButton,
     ODialog,
@@ -328,13 +327,6 @@ export default defineComponent({
     });
 
     const columns: OTableColumnDef[] = [
-      {
-        id: "#",
-        header: "#",
-        accessorKey: "#",
-        size: 50,
-        meta: { align: "left" },
-      },
       {
         id: "name",
         header: t("settings.org_name"),
@@ -450,7 +442,6 @@ export default defineComponent({
           const responseData = response.data.data;
           for (let i = 0; i < responseData.length; i++) {
             data.push({
-              "#": i + 1,
               id: responseData[i].id,
               name: responseData[i].name,
               identifier: responseData[i].identifier,
diff --git a/web/src/components/settings/OrganizationSettings.schema.ts b/web/src/components/settings/OrganizationSettings.schema.ts
index 2f749aee22..ae941cdaa2 100644
--- a/web/src/components/settings/OrganizationSettings.schema.ts
+++ b/web/src/components/settings/OrganizationSettings.schema.ts
@@ -6,10 +6,6 @@
 // crossLinks composite (CrossLinkManager) has no OForm* equivalent so it stays
 // bare and is merged at submit (declared optional here for documentation).
 //
-// Restores the original BEFORE rule (truthy→Zod inversion):
-//   `!!v ? isValidTraceField || 'Use alphanumeric…' : nameRequired`
-//   → required (min 1) + regex(/^[a-zA-Z0-9+=,.@_-]+$/).
-//
 // Validation TIMING is owned by OForm (submit-then-change via revalidateLogic);
 // this file only describes WHAT is valid.
 
@@ -33,11 +29,11 @@ export const makeOrganizationSettingsSchema = (t: (_key: string) => string) =>
       .string()
       .min(1, t("common.nameRequired"))
       .regex(orgSettingsFieldNameRegex, FIELD_FORMAT_MESSAGE),
-    // Non-validated form state (R1-strict: still form-owned via OFormSwitch).
+    // Non-validated form state (still form-owned via OFormSwitch).
     toggleIngestionLogs: z.boolean().optional().default(false),
     usageStreamEnabled: z.boolean().optional().default(false),
-    // CrossLinkManager is a composite custom control (documented no-OForm*
-    // exception) — kept bare and merged at submit; optional so it never blocks.
+    // CrossLinkManager is a composite custom control — kept bare and merged at
+    // submit; optional so it never blocks.
     crossLinks: z.array(z.any()).optional(),
   });
 
diff --git a/web/src/components/settings/RegexPatternList.spec.ts b/web/src/components/settings/RegexPatternList.spec.ts
index 1b9da89896..8d9a0686da 100644
--- a/web/src/components/settings/RegexPatternList.spec.ts
+++ b/web/src/components/settings/RegexPatternList.spec.ts
@@ -1056,7 +1056,7 @@ describe('RegexPatternList.vue Component Logic', () => {
 // -----------------------------------------------------------------------------
 // ODrawer Migration tests
 //
-// The AddRegexPattern dialog was migrated from <q-dialog> to <ODrawer>. The
+// The AddRegexPattern dialog was migrated to <ODrawer>. The
 // rest of the spec exercises the setup() function in isolation, so a focused
 // describe block here mounts the real component with a minimal stub surface
 // to assert the new ODrawer contract (open binding, width based on
@@ -1107,7 +1107,7 @@ describe('RegexPatternList.vue - ODrawer Migration', () => {
   };
 
   // Stub AddRegexPattern so the tests don't pull in the full implementation
-  // (heavy q-input/q-table/AI chat dependencies). The component now owns the
+  // (heavy input/table/AI chat dependencies). The component now owns the
   // ODrawer internally, so the host passes v-model:open and the drawer
   // mechanics are encapsulated here.
   const AddRegexPatternStub = {
@@ -1178,9 +1178,9 @@ describe('RegexPatternList.vue - ODrawer Migration', () => {
           Trash2: true,
           Download: true,
           // Layout primitives are stubbed so the page renders without
-          // needing a Layout context (q-page normally requires a QLayout
-          // ancestor; without one it silently fails to render its slot,
-          // which would hide the ODrawer that lives inside).
+          // needing a Layout context; without one the page could silently
+          // fail to render its slot, which would hide the ODrawer that lives
+          // inside.
           QPage: { template: '<div><slot /></div>' },
           QTable: { template: '<div><slot name="no-data" /></div>' },
           QInput: { template: '<input />' },
diff --git a/web/src/components/settings/RegexPatternList.vue b/web/src/components/settings/RegexPatternList.vue
index d3cc92edf4..59cd0c5f5f 100644
--- a/web/src/components/settings/RegexPatternList.vue
+++ b/web/src/components/settings/RegexPatternList.vue
@@ -18,11 +18,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <div class="flex flex-col h-full p-0">
     <template v-if="!showImportRegexPatternDialog">
     <!-- Standard section header: title + actions only. Search moved to toolbar. -->
-    <AppPageHeader
+    <OPageLayout
       :title="t('regex_patterns.title')"
       icon="pattern"
       :subtitle="t('settings.regexPatternList.subtitle')"
-      class="shrink-0 px-4 border-b border-border-default"
+      bleed
     >
       <template #actions>
         <OButton
@@ -38,8 +38,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           @click="createRegexPattern"
         >{{ t("regex_patterns.create_pattern") }}</OButton>
       </template>
-    </AppPageHeader>
-    <div class="card-container flex-1 min-h-0 overflow-hidden">
+    <div class="bg-card-glass-bg flex-1 min-h-0 overflow-hidden">
     <OTable
       :frame="false"
       data-test="regex-pattern-list-table"
@@ -54,6 +53,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       sorting="client"
       filter-mode="client"
       :default-columns="false"
+      show-index
       :enable-column-resize="true"
       :persist-columns="true"
       table-id="settings-regex-patterns"
@@ -131,7 +131,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </template>
       <template #bottom>
         <div class="flex items-center gap-2">
-          <span class="o2-table-footer-title">
+          <span class="text-xs font-normal">
             {{ resultTotal }} {{ t("regex_patterns.bottom_header") }}
           </span>
           <OButton
@@ -148,6 +148,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </template>
     </OTable>
     </div>
+    </OPageLayout>
     </template>
     <ImportRegexPattern
       v-else-if="showImportRegexPatternDialog"
@@ -202,15 +203,15 @@ import OCodeCell from "@/lib/core/Table/cells/OCodeCell.vue";
 import OTimeCell from "@/lib/core/Table/cells/OTimeCell.vue";
 import type { OTableColumnDef } from "@/lib/core/Table/OTable.types";
 import { toast } from "@/lib/feedback/Toast/useToast";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
-import { TABLE_INDEX_COL_SIZE, COL } from "@/lib/core/Table/OTable.types";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
+import { COL } from "@/lib/core/Table/OTable.types";
 import { useShortcuts } from "@/lib/vue-shortcut-manager";
 import { isInputFocused } from "@/utils/keyboardShortcuts";
 
 export default defineComponent({
   name: "RegexPatternList",
   components: {
-    AppPageHeader,
+    OPageLayout,
     ConfirmDialog,
     AddRegexPattern,
     ImportRegexPattern,
@@ -229,13 +230,6 @@ export default defineComponent({
     const router = useRouter();
 
     const columns: OTableColumnDef[] = [
-      {
-        id: "#",
-        header: "#",
-        accessorKey: "#",
-        size: TABLE_INDEX_COL_SIZE,
-        meta: { align: "left" },
-      },
       {
         id: "name",
         header: t("regex_patterns.name"),
@@ -363,10 +357,8 @@ export default defineComponent({
         const response = await regexPatternsService.list(
           store.state.selectedOrganization.identifier,
         );
-        let counter = 1;
         regexPatterns.value = response.data.patterns.map((pattern: any) => ({
           ...pattern,
-          "#": counter <= 9 ? `0${counter++}` : counter++,
           created_at: convertUnixToDateFormat(pattern.created_at),
           updated_at: convertUnixToDateFormat(pattern.updated_at),
         }));
diff --git a/web/src/components/settings/ServiceIdentityConfig.spec.ts b/web/src/components/settings/ServiceIdentityConfig.spec.ts
deleted file mode 100644
index 3b20ad745c..0000000000
--- a/web/src/components/settings/ServiceIdentityConfig.spec.ts
+++ /dev/null
@@ -1,225 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { describe, expect, it, beforeEach, afterEach, vi } from "vitest";
-import { mount, VueWrapper, flushPromises } from "@vue/test-utils";
-import { createStore } from "vuex";
-import { createI18n } from "vue-i18n";
-import ServiceIdentityConfig from "./ServiceIdentityConfig.vue";
-
-
-vi.mock("@/services/alerts", () => ({
-  default: {
-    getSemanticGroups: vi.fn(),
-  },
-}));
-
-vi.mock("@/services/settings", () => ({
-  default: {
-    getSetting: vi.fn(),
-    setOrgSetting: vi.fn(),
-  },
-}));
-
-vi.mock("@/components/alerts/SemanticFieldGroupsConfig.vue", () => ({
-  default: {
-    name: "SemanticFieldGroupsConfig",
-    template: '<div data-test="semantic-field-groups-config" />',
-    props: ["modelValue", "orgId"],
-    emits: ["update:modelValue"],
-  },
-}));
-
-vi.mock("@/components/common/GroupHeader.vue", () => ({
-  default: {
-    name: "GroupHeader",
-    template: '<div class="group-header"><slot /></div>',
-    props: ["title", "showIcon"],
-  },
-}));
-
-
-import alertsService from "@/services/alerts";
-import settingsService from "@/services/settings";
-
-const mockSemanticGroups = [
-  {
-    id: "k8s-cluster",
-    display: "K8s Cluster",
-    group: "Kubernetes",
-    fields: ["k8s.cluster.name"],
-    normalize: false,
-    is_stable: true,
-    is_scope: true,
-  },
-  {
-    id: "k8s-deployment",
-    display: "K8s Deployment",
-    group: "Kubernetes",
-    fields: ["k8s.deployment.name"],
-    normalize: false,
-    is_stable: true,
-    is_scope: false,
-  },
-  {
-    id: "service",
-    display: "Service Name",
-    group: "Common",
-    fields: ["service.name"],
-    normalize: true,
-    is_stable: false,
-    is_scope: false,
-  },
-];
-
-const mockStore = createStore({
-  state: {
-    selectedOrganization: { identifier: "test-org" },
-    theme: "light",
-    zoConfig: {},
-  },
-});
-
-const mockI18n = createI18n({
-  locale: "en",
-  messages: {
-    en: {
-      settings: {
-        correlation: {
-          serviceIdentityTitle: "Service Identity Configuration",
-          serviceIdentityDescription: "Configure how services are identified",
-          howItWorksTitle: "How it works",
-          serviceIdentityLabel: "Service Identity",
-          howItWorksDescription: "...",
-          exampleLabel: "Example",
-          exampleText: "Dimensions {dim1} and {dim2} produce {value}",
-          configSaveFailed: "Failed to save",
-          fallbackGroup: "Fallback",
-          otherGroup: "Other",
-          emptyIdError: " has empty ID",
-          semanticMappingsSaved: "Semantic mappings saved",
-        },
-      },
-      common: {
-        nameRequired: "Name is required",
-      },
-    },
-  },
-});
-
-const globalStubs = {
-  "OIcon": { template: "<span />", props: ["name", "size", "color"] },
-  "q-btn": { template: '<button :data-test="$attrs[\'data-test\']" @click="$emit(\'click\')"><slot /></button>', props: ["label", "flat", "dense", "loading", "disable"], emits: ["click"] },
-  "q-expansion-item": { template: '<div class="expansion-item"><slot /><slot name="header" /></div>', props: ["label", "icon", "dense", "class", "modelValue"], emits: ["update:modelValue"] },
-  "q-input": { template: '<input />', props: ["modelValue", "dense", "filled", "clearable", "placeholder"] },
-  "q-item": { template: "<div class='q-item' @click=\"$emit('click')\"><slot /></div>", emits: ["click"] },
-  "q-item-section": { template: "<div><slot /></div>", props: ["side", "avatar"] },
-  "q-item-label": { template: "<div><slot /></div>", props: ["caption"] },
-  "q-list": { template: "<div><slot /></div>", props: ["dense", "bordered"] },
-  "q-separator": true,
-  "q-tooltip": { template: "<span><slot /></span>" },
-  "q-card": { template: "<div><slot /></div>" },
-  "q-card-section": { template: "<div><slot /></div>" },
-  "q-tab-panels": { template: "<div><slot /></div>", props: ["modelValue"] },
-  "q-tab-panel": { template: "<div><slot /></div>", props: ["name"] },
-  "q-tabs": { template: "<div><slot /></div>", props: ["modelValue"], emits: ["update:modelValue"] },
-  "q-tab": { template: "<div />", props: ["name", "label"] },
-  "i18n-t": { template: "<span><slot /></span>", props: ["keypath", "tag"] },
-};
-
-function mountComponent(propsOverrides = {}) {
-  return mount(ServiceIdentityConfig, {
-    props: {
-      orgId: "test-org",
-      ...propsOverrides,
-    },
-    global: {
-      plugins: [mockI18n],
-      provide: { store: mockStore },
-      stubs: globalStubs,
-    },
-  });
-}
-
-describe("ServiceIdentityConfig", () => {
-  let wrapper: VueWrapper;
-
-  beforeEach(() => {
-    vi.mocked(settingsService.getSetting).mockRejectedValue(new Error("not found"));
-    vi.mocked(alertsService.getSemanticGroups).mockResolvedValue({
-      data: mockSemanticGroups,
-    } as any);
-    vi.mocked(settingsService.setOrgSetting).mockResolvedValue({ data: {} } as any);
-  });
-
-  afterEach(() => {
-    wrapper?.unmount();
-    vi.clearAllMocks();
-  });
-
-  describe("initial render", () => {
-    it("should render without errors", async () => {
-      wrapper = mountComponent();
-      await flushPromises();
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it("should call getSetting for semantic_field_groups on mount", async () => {
-      wrapper = mountComponent();
-      await flushPromises();
-      expect(settingsService.getSetting).toHaveBeenCalledWith("test-org", "semantic_field_groups");
-    });
-
-    it("should load semantic groups from alertsService when settings not found", async () => {
-      wrapper = mountComponent();
-      await flushPromises();
-      expect(alertsService.getSemanticGroups).toHaveBeenCalledWith("test-org");
-    });
-
-    it("should set loading to false after config loads", async () => {
-      wrapper = mountComponent();
-      await flushPromises();
-      expect(wrapper.vm.loading).toBe(false);
-    });
-  });
-
-  describe("settings v2 semantic groups loading", () => {
-    it("should use semantic groups from settings v2 when available", async () => {
-      const customGroups = [mockSemanticGroups[0], mockSemanticGroups[1]];
-      vi.mocked(settingsService.getSetting).mockImplementation(
-        (_orgId: string, key: string) => {
-          if (key === "semantic_field_groups") {
-            return Promise.resolve({
-              data: { setting_value: customGroups },
-            } as any);
-          }
-          return Promise.reject(new Error("not found"));
-        },
-      );
-      wrapper = mountComponent();
-      await flushPromises();
-      expect(wrapper.vm.localSemanticGroups).toHaveLength(2);
-      // alertsService should not be called since we got from settings
-      expect(alertsService.getSemanticGroups).not.toHaveBeenCalled();
-    });
-  });
-
-  describe("initial state", () => {
-    it("should initialize semanticSectionExpanded to true", async () => {
-      wrapper = mountComponent();
-      expect(wrapper.vm.semanticSectionExpanded).toBe(true);
-    });
-  });
-});
diff --git a/web/src/components/settings/ServiceIdentityConfig.vue b/web/src/components/settings/ServiceIdentityConfig.vue
deleted file mode 100644
index a99f0a0d39..0000000000
--- a/web/src/components/settings/ServiceIdentityConfig.vue
+++ /dev/null
@@ -1,375 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <div class="w-full service-identity-config mt-2 bg-(--o2-card-bg)">
-    <!-- Loading State -->
-    <div v-if="loading" class="flex justify-center py-8">
-      <OSpinner size="sm" />
-    </div>
-
-    <div v-else>
-      <!-- Section Header -->
-      <GroupHeader
-        :title="t('settings.correlation.serviceIdentityTitle')"
-        :showIcon="false"
-        class="mb-2"
-      />
-      <div class="text-sm mb-4">
-        {{ t("settings.correlation.serviceIdentityDescription") }}
-      </div>
-
-      <!-- How it works explanation -->
-      <OCollapsible
-        v-model="howItWorksOpen"
-        icon="help-outline"
-        :label="t('settings.correlation.howItWorksTitle')"
-        class="mb-4 rounded-lg border border-solid"
-        :class="
-          store.state.theme === 'dark'
-            ? 'bg-gray-700 border-gray-700'
-            : 'bg-gray-100 border-gray-200'
-        "
-      >
-        <div class="p-4 text-sm leading-relaxed">
-          <div class="mb-3">
-            <div class="font-semibold text-primary mb-1">
-              {{ t("settings.correlation.serviceIdentityLabel") }}
-            </div>
-            <div>{{ t("settings.correlation.howItWorksDescription") }}</div>
-          </div>
-          <div
-            class="mb-3 p-3 rounded"
-            :class="store.state.theme === 'dark' ? 'bg-gray-800' : 'bg-white'"
-          >
-            <div class="font-semibold text-primary mb-1">
-              {{ t("settings.correlation.exampleLabel") }}
-            </div>
-            <div>
-              <i18n-t keypath="settings.correlation.exampleText" tag="span">
-                <template #dim1>
-                  <OTag
-                    type="exampleChip"
-                    value="dim"
-                    class="mx-1 my-1 example-chip"
-                    >k8s-cluster=prod</OTag
-                  >
-                </template>
-                <template #dim2>
-                  <OTag
-                    type="exampleChip"
-                    value="dim"
-                    class="mx-1 my-1 example-chip"
-                    >k8s-deployment=api-server</OTag
-                  >
-                </template>
-                <template #value>
-                  <OTag
-                    type="exampleChip"
-                    value="value"
-                    class="mx-1 my-1 example-chip"
-                    >prod/api-server</OTag
-                  >
-                </template>
-              </i18n-t>
-            </div>
-          </div>
-          <div>
-            <div class="font-semibold text-primary mb-1">
-              {{ t("settings.correlation.correlationLabel") }}
-            </div>
-            <div>
-              <i18n-t
-                keypath="settings.correlation.correlationDescription"
-                tag="span"
-              >
-                <template #field>
-                  <span class="font-mono font-semibold text-sm"
-                    >service</span
-                  >
-                </template>
-              </i18n-t>
-            </div>
-          </div>
-        </div>
-      </OCollapsible>
-
-      <!-- Semantic Field Groups - Collapsible Section -->
-      <OCollapsible
-        v-model="semanticSectionExpanded"
-        icon="category"
-        :label="t('settings.correlation.semanticFieldTitle')"
-        :caption="t('settings.correlation.semanticFieldDescription')"
-        class="mb-4 rounded-lg border border-solid"
-        :class="
-          store.state.theme === 'dark'
-            ? 'border-gray-700'
-            : 'border-gray-200'
-        "
-      >
-        <div class="p-4">
-          <SemanticFieldGroupsConfig
-            v-model:semantic-field-groups="localSemanticGroups"
-            @update:semantic-field-groups="handleSemanticGroupsUpdate"
-          />
-
-          <!-- Save Semantic Mappings Button -->
-          <div class="flex justify-end mt-4">
-            <OButton
-              variant="primary"
-              size="sm-action"
-              @click="saveSemanticMappings"
-              :loading="savingSemanticMappings"
-            >{{ t('common.save') }}</OButton>
-          </div>
-        </div>
-      </OCollapsible>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-import { useStore } from "vuex";
-import { useI18n } from "vue-i18n";
-import OButton from "@/lib/core/Button/OButton.vue";
-import OTag from "@/lib/core/Badge/OTag.vue";
-import OCollapsible from "@/lib/core/Collapsible/OCollapsible.vue";
-import SemanticFieldGroupsConfig from "@/components/alerts/SemanticFieldGroupsConfig.vue";
-import GroupHeader from "@/components/common/GroupHeader.vue";
-import alertsService from "@/services/alerts";
-import settingsService from "@/services/settings";
-import OSpinner from "@/lib/feedback/Spinner/OSpinner.vue";
-import { toast } from "@/lib/feedback/Toast/useToast";
-
-const store = useStore();
-const { t } = useI18n();
-
-interface FieldAlias {
-  id: string;
-  display: string;
-  group?: string;
-  fields: string[];
-  normalize: boolean;
-  is_stable?: boolean;
-  is_scope?: boolean;
-}
-
-interface Props {
-  orgId: string;
-}
-
-const props = defineProps<Props>();
-
-const emit = defineEmits<{
-  (e: "saved"): void;
-  (e: "cancel"): void;
-}>();
-
-const loading = ref(true);
-const savingSemanticMappings = ref(false);
-const semanticSectionExpanded = ref(true);
-const howItWorksOpen = ref(false);
-const localSemanticGroups = ref<SemanticFieldGroup[]>([]);
-
-const handleSemanticGroupsUpdate = (groups: SemanticFieldGroup[]) => {
-  localSemanticGroups.value = groups;
-};
-
-const saveSemanticMappings = async () => {
-  savingSemanticMappings.value = true;
-  try {
-    // Check for duplicate IDs before saving
-    const idCounts = new Map<string, number>();
-    const duplicateIds: string[] = [];
-
-    // Check for duplicate display names within the same category
-    const categoryDisplayNames = new Map<string, Map<string, string>>();
-
-    for (const group of localSemanticGroups.value) {
-      if (!group.id) {
-        toast({
-          variant: "error",
-          message: group.group + t("settings.correlation.emptyIdError"),
-        });
-        savingSemanticMappings.value = false;
-        return;
-      }
-
-      // Validate display name is not empty
-      if (!group.display || group.display.trim() === "") {
-        toast({
-          variant: "error",
-          message: t("common.nameRequired"),
-        });
-        savingSemanticMappings.value = false;
-        return;
-      }
-
-      // Validate fields array is not empty
-      if (!group.fields || group.fields.length === 0) {
-        toast({
-          variant: "error",
-          message: `"${group.display || group.id}": ${t("settings.correlation.emptyFieldsError")}`,
-        });
-        savingSemanticMappings.value = false;
-        return;
-      }
-
-      // Check for duplicate display names within the same category
-      const category = group.group || "Other";
-      const displayNameLower = group.display.trim().toLowerCase();
-
-      if (!categoryDisplayNames.has(category)) {
-        categoryDisplayNames.set(category, new Map<string, string>());
-      }
-
-      const categoryMap = categoryDisplayNames.get(category)!;
-      if (categoryMap.has(displayNameLower)) {
-        const existingId = categoryMap.get(displayNameLower);
-        // Only flag as duplicate if it's a different group (different ID)
-        if (existingId !== group.id) {
-          toast({
-            variant: "error",
-            message: t("settings.correlation.duplicateNamesInCategoryError", {
-              name: group.display,
-              category: category,
-            }),
-            timeout: 5000,
-          });
-          savingSemanticMappings.value = false;
-          return;
-        }
-      } else {
-        categoryMap.set(displayNameLower, group.id);
-      }
-
-      const count = idCounts.get(group.id) || 0;
-      idCounts.set(group.id, count + 1);
-
-      if (count === 1 && !duplicateIds.includes(group.id)) {
-        duplicateIds.push(group.id);
-      }
-    }
-
-    if (duplicateIds.length > 0) {
-      toast({
-        variant: "error",
-        message: t("settings.correlation.duplicateIdsError", {
-          ids: duplicateIds.join(", "),
-        }),
-        timeout: 5000,
-      });
-      savingSemanticMappings.value = false;
-      return;
-    }
-
-    // Save semantic field groups using settings v2 API (org-level setting)
-    await settingsService.setOrgSetting(
-      props.orgId,
-      "semantic_field_groups",
-      localSemanticGroups.value,
-      "correlation",
-      "Semantic field groups for dimension extraction and correlation",
-    );
-
-    toast({
-      variant: "success",
-      message: t("settings.correlation.semanticMappingsSaved"),
-    });
-
-    emit("saved");
-  } catch (error: any) {
-    console.error("Error saving semantic mappings:", error);
-    toast({
-      variant: "error",
-      message: error?.message || t("settings.correlation.configSaveFailed"),
-    });
-  } finally {
-    savingSemanticMappings.value = false;
-  }
-};
-
-// Fetch config on mount
-const loadConfig = async () => {
-  loading.value = true;
-
-  try {
-    // Load semantic field groups from settings v2 API
-    let semanticGroupsFromSettings: FieldAlias[] | null = null;
-    try {
-      const semanticSettingResponse = await settingsService.getSetting(
-        props.orgId,
-        "semantic_field_groups",
-      );
-      const semanticSetting = semanticSettingResponse.data;
-      if (
-        semanticSetting?.setting_value &&
-        Array.isArray(semanticSetting.setting_value) &&
-        semanticSetting.setting_value.length > 0
-      ) {
-        semanticGroupsFromSettings = semanticSetting.setting_value;
-      }
-    } catch (settingError: any) {
-      // Error loading setting, will use defaults
-    }
-
-    // Use settings v2 semantic groups if available, otherwise load defaults from backend
-    let semanticGroups: FieldAlias[] = [];
-    if (semanticGroupsFromSettings) {
-      semanticGroups = semanticGroupsFromSettings;
-    } else {
-      // Load default semantic groups from backend
-      try {
-        const semanticGroupsResponse = await alertsService.getSemanticGroups(
-          props.orgId,
-        );
-        semanticGroups = semanticGroupsResponse.data ?? [];
-      } catch (semanticError) {
-        console.error("Failed to load default semantic groups:", semanticError);
-      }
-    }
-
-    localSemanticGroups.value = semanticGroups;
-  } catch (error) {
-    // Error loading config, using defaults
-    localSemanticGroups.value = [];
-  } finally {
-    loading.value = false;
-  }
-};
-
-// Load config on mount
-loadConfig();
-</script>
-
-<style>
-:deep(.section-header) {
-  font-weight: 600;
-}
-
-:deep(.tooltip-text) {
-  font-size: 0.75rem;
-}
-
-:deep(.example-chip) {
-  font-size: 13px;
-}
-
-:deep(.text-caption) {
-  color: var(--o2-text-primary);
-}
-</style>
diff --git a/web/src/components/settings/ServiceIdentitySetup.spec.ts b/web/src/components/settings/ServiceIdentitySetup.spec.ts
index d3e1141cc7..9687fddb57 100644
--- a/web/src/components/settings/ServiceIdentitySetup.spec.ts
+++ b/web/src/components/settings/ServiceIdentitySetup.spec.ts
@@ -224,8 +224,6 @@ function mountComponent(props: Record<string, unknown> = {}) {
     global: {
       plugins: [i18n, store],
       stubs: {
-        "q-menu": true,
-        "q-tooltip": true,
         ODialog: ODialogStub,
         ODrawer: ODrawerStub,
       },
diff --git a/web/src/components/settings/ServiceIdentitySetup.vue b/web/src/components/settings/ServiceIdentitySetup.vue
index 8b5093424f..b5d98fa039 100644
--- a/web/src/components/settings/ServiceIdentitySetup.vue
+++ b/web/src/components/settings/ServiceIdentitySetup.vue
@@ -15,36 +15,29 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div
-    class="w-full service-identity-setup mt-2"
-    :class="{ 'sis-dark': store.state.theme === 'dark' }"
-  >
+  <div class="w-full service-identity-setup mt-2">
     <!-- Loading skeleton while fetching recommendations -->
     <div v-if="loading" class="flex flex-col gap-4 py-4">
-      <OSkeleton class="rounded-lg h-14 w-full" />
-      <OSkeleton class="rounded-lg h-14 w-full" />
-      <OSkeleton class="rounded-lg h-10 w-40" />
+      <OSkeleton class="rounded-default h-14 w-full" />
+      <OSkeleton class="rounded-default h-14 w-full" />
+      <OSkeleton class="rounded-default h-10 w-40" />
     </div>
 
     <div v-else>
       <!-- Section 1: Service Configuration -->
       <div
-        class="mb-3 rounded-lg overflow-hidden"
-        style="border: 1px solid var(--o2-border-color)"
+        class="mb-3 rounded-default overflow-hidden border border-card-glass-border"
+       
       >
         <div class="p-3 flex flex-col gap-3">
           <!-- Service name source banner -->
           <div
             v-if="!serviceOptional"
-            class="rounded-lg border overflow-hidden transition-all"
+            class="rounded-default border overflow-hidden transition-all"
             :class="
               serviceNameDetected
-                ? store.state.theme === 'dark'
-                  ? 'bg-sky-900/10 border-sky-300/30'
-                  : 'bg-sky-50/80 border-sky-200'
-                : store.state.theme === 'dark'
-                  ? 'bg-amber-900/10 border-amber-800/30'
-                  : 'bg-amber-50/80 border-amber-200'
+                ? 'bg-banner-info-bg border-banner-info-border'
+                : 'bg-banner-warning-bg border-banner-warning-border'
             "
           >
             <!-- Collapsed row -->
@@ -56,9 +49,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <OIcon
                 :name="serviceNameDetected ? 'check-circle' : 'warning'"
                 size="sm"
-                :class="serviceNameDetected ? 'text-[var(--o2-positive)]' : 'text-amber-500'"
+                :class="serviceNameDetected ? 'text-status-positive' : 'text-status-warning-text'"
               />
-              <div class="flex-1 min-w-0 text-[13px] leading-tight">
+              <div class="flex-1 min-w-0 text-compact leading-tight">
                 <template v-if="serviceNameDetected">
                   {{ t("settings.serviceIdentitySetup.serviceNameDetectedFrom") }}
                   <span class="font-bold text-primary">Service</span>
@@ -92,29 +85,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               class="px-3 pb-3 pt-2 border-t"
               :class="
                 serviceNameDetected
-                  ? store.state.theme === 'dark'
-                    ? 'border-sky-300/30'
-                    : 'border-sky-200'
-                  : store.state.theme === 'dark'
-                    ? 'border-amber-800/30'
-                    : 'border-amber-200'
+                  ? 'border-banner-info-border'
+                  : 'border-banner-warning-border'
               "
             >
               <!-- Inner card -->
               <div
-                class="rounded-lg p-2.5"
+                class="rounded-default p-2.5"
                 :class="
-                  store.state.theme === 'dark'
-                    ? 'bg-gray-700/60'
-                    : 'bg-gray-50'
+                  'bg-surface-subtle'
                 "
               >
                 <div
                   class="text-xs font-medium mb-2"
                   :class="
-                    store.state.theme === 'dark'
-                      ? 'text-gray-300'
-                      : 'text-gray-400'
+                    'text-text-secondary'
                   "
                 >
                   {{ t("settings.correlation.serviceNameExpandedHelp") }}
@@ -126,12 +111,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   <div
                     v-for="field in detectedServiceFields"
                     :key="field.name"
-                    class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md font-mono text-xs font-medium"
-                    style="border: 1px solid var(--o2-border-color)"
+                    class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-default font-mono text-xs font-medium border border-card-glass-border"
+                   
                     :class="
-                      store.state.theme === 'dark'
-                        ? 'bg-gray-600 text-gray-100'
-                        : 'bg-white text-gray-500 shadow-sm'
+                      'bg-surface-base text-text-secondary'
                     "
                   >
                     <div class="flex items-center gap-0.5 mr-0.5">
@@ -140,9 +123,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         :key="st"
                         class="w-1.5 h-1.5 rounded-full"
                         :class="{
-                          'bg-blue-500': st === 'logs',
-                          'bg-orange-500': st === 'traces',
-                          'bg-green-500': st === 'metrics',
+                          'bg-badge-blue-solid-bg': st === 'logs',
+                          'bg-badge-orange-solid-bg': st === 'traces',
+                          'bg-badge-success-solid-bg': st === 'metrics',
                         }"
                         :title="st"
                       />
@@ -154,12 +137,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   <div
                     v-for="field in unseenServiceFields"
                     :key="field"
-                    class="inline-flex items-center px-2.5 py-1 rounded-md border-dashed font-mono text-xs"
-                    style="border: 1px dashed var(--o2-border-color)"
+                    class="inline-flex items-center px-2.5 py-1 rounded-default border-dashed font-mono text-xs border border-dashed border-card-glass-border"
+                   
                     :class="
-                      store.state.theme === 'dark'
-                        ? 'text-gray-400'
-                        : 'text-gray-400'
+                      'text-text-secondary'
                     "
                     :title="
                       t('settings.correlation.serviceNameConfiguredNotSeen')
@@ -174,28 +155,26 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   class="flex flex-wrap items-center justify-between gap-2"
                 >
                   <div
-                    class="flex flex-wrap items-center gap-3 text-[10px]"
+                    class="flex flex-wrap items-center gap-3 text-3xs"
                     :class="
-                      store.state.theme === 'dark'
-                        ? 'text-gray-400'
-                        : 'text-gray-400'
+                      'text-text-secondary'
                     "
                   >
                     <div class="flex items-center gap-1">
                       <span
-                        class="w-1.5 h-1.5 rounded-full bg-blue-500"
+                        class="w-1.5 h-1.5 rounded-full bg-badge-blue-solid-bg"
                       />
                       {{ t("settings.correlation.foundInLogs") }}
                     </div>
                     <div class="flex items-center gap-1">
                       <span
-                        class="w-1.5 h-1.5 rounded-full bg-orange-500"
+                        class="w-1.5 h-1.5 rounded-full bg-badge-orange-solid-bg"
                       />
                       {{ t("settings.correlation.foundInTraces") }}
                     </div>
                     <div class="flex items-center gap-1">
                       <span
-                        class="w-1.5 h-1.5 rounded-full bg-green-500"
+                        class="w-1.5 h-1.5 rounded-full bg-badge-success-solid-bg"
                       />
                       {{ t("settings.correlation.foundInMetrics") }}
                     </div>
@@ -214,8 +193,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
                   <!-- Customize link -->
                   <a
-                    class="config-link-btn cursor-pointer inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-semibold no-underline border border-blue-500 text-blue-600 bg-blue-500/[.08] transition-[background]"
-                    :class="store.state.theme === 'dark' ? 'border-[#60a5fa] text-[#93c5fd] bg-[rgba(96,165,250,0.12)]' : ''"
+                    class="config-link-btn cursor-pointer inline-flex items-center gap-1 px-2 py-0.5 rounded-default text-xs font-semibold no-underline border border-text-link text-text-link bg-badge-blue-soft-bg transition-[background] hover:bg-[color-mix(in_srgb,var(--color-badge-blue-ol-border)_18%,transparent)]"
                     @click.prevent="emit('navigate-to-aliases', 'service')"
                   >
                     {{ t("settings.correlation.customizeFieldMappings") }}
@@ -257,9 +235,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <div
               class="text-xs mt-1 leading-snug ml-9"
               :class="
-                store.state.theme === 'dark'
-                  ? 'text-gray-400'
-                  : 'text-gray-400'
+                'text-text-secondary'
               "
             >
               {{ t("settings.correlation.serviceOptionalHelp") }}
@@ -277,9 +253,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <div
               class="text-xs mb-3"
               :class="
-                store.state.theme === 'dark'
-                  ? 'text-gray-400'
-                  : 'text-gray-400'
+                'text-text-secondary'
               "
             >
               {{ t("settings.correlation.distinguishByHelp") }}
@@ -288,20 +262,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <!-- Empty state: nothing configured anywhere -->
             <div
               v-if="allConfiguredEnvs.length === 0 && !addingToEnv"
-              class="flex flex-col items-center gap-2 py-3 px-4 rounded-md border border-dashed"
+              class="flex flex-col items-center gap-2 py-3 px-4 rounded-default border border-dashed"
               :class="
-                store.state.theme === 'dark'
-                  ? 'border-grey-7 bg-gray-700/40'
-                  : 'border-grey-4 bg-gray-50'
+                'border-border-default bg-surface-subtle'
               "
             >
-              <OIcon name="tune" size="lg" class="text-gray-400 mb-1" />
+              <OIcon name="tune" size="lg" class="text-icon-color mb-1" />
               <span
                 class="text-sm font-medium"
                 :class="
-                  store.state.theme === 'dark'
-                    ? 'text-gray-300'
-                    : 'text-gray-400'
+                  'text-text-secondary'
                 "
               >
                 {{ t("settings.serviceIdentitySetup.noFieldsConfiguredYet") }}
@@ -323,11 +293,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <!-- Auto-suggested banner (only when fields came from suggestion, not saved config) -->
               <div
                 v-if="isAutoSuggested"
-                class="flex items-start gap-2 px-3 py-2 rounded-md text-xs"
+                class="flex items-start gap-2 px-3 py-2 rounded-default text-xs"
                 :class="
-                  store.state.theme === 'dark'
-                    ? 'bg-blue-900/15 text-blue-300'
-                    : 'bg-blue-50 text-blue-700'
+                  'bg-status-info-bg text-status-info-text'
                 "
               >
                 <OIcon
@@ -350,11 +318,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   :class="{ 'pt-2 border-t': envIdx > 0 }"
                 >
                   <span
-                    class="text-[10px] font-bold"
+                    class="text-3xs font-bold"
                     :class="
-                      store.state.theme === 'dark'
-                        ? 'text-gray-400'
-                        : 'text-gray-400'
+                      'text-text-secondary'
                     "
                   >
                     {{ getIdentitySetLabel(envKey) }}
@@ -368,12 +334,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       Boolean,
                     )"
                     :key="fieldId"
-                    class="flex items-center gap-1 pl-3 pr-1 py-1 rounded-md text-xs font-medium transition-colors"
-                    style="border: 1px solid var(--o2-border-color)"
+                    class="flex items-center gap-1 pl-3 pr-1 py-1 rounded-default text-xs font-medium transition-colors border border-card-glass-border"
+                   
                     :class="
-                      store.state.theme === 'dark'
-                        ? 'bg-gray-700 text-gray-100 shadow-sm'
-                        : 'bg-white text-gray-500 shadow-sm'
+                      'bg-surface-base text-text-secondary'
                     "
                   >
                     <span>{{
@@ -474,8 +438,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 v-if="addingToEnv && !allConfiguredEnvs.includes(addingToEnv)"
               >
                 <div
-                  class="flex flex-wrap items-center gap-2 pt-2"
-                  style="border-top: 1px solid var(--o2-border-color)"
+                  class="flex flex-wrap items-center gap-2 pt-2 border-t border-card-glass-border"
+                 
                 >
                   <OSelect
                     ref="addFieldSelectRef"
@@ -556,13 +520,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <!-- Section 3: Workload Detection -->
       <div
         v-if="workloadDetectedGroups.length > 0"
-        class="mb-3 rounded-lg overflow-hidden"
-        style="border: 1px solid var(--o2-border-color)"
+        class="mb-3 rounded-default overflow-hidden border border-card-glass-border"
+       
       >
         <!-- Section header -->
         <div
-          class="px-4 py-3 flex items-center gap-2"
-          style="border-bottom: 1px solid var(--o2-border-color)"
+          class="px-4 py-3 flex items-center gap-2 border-b border-card-glass-border"
+         
         >
           <OIcon name="radar" size="sm" class="text-teal-6" />
           <span class="font-bold text-sm">{{ t("settings.serviceIdentitySetup.workloadDetection") }}</span>
@@ -570,11 +534,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
         <!-- Collapsible: Workload detected using fields (N) -->
         <div
-          class="mx-3 mt-3 rounded-lg border overflow-hidden transition-all"
+          class="mx-3 mt-3 rounded-default border overflow-hidden transition-all"
           :class="
-            store.state.theme === 'dark'
-              ? 'bg-sky-900/10 border-sky-300/30'
-              : 'bg-sky-50/80 border-sky-200'
+            'bg-banner-info-bg border-banner-info-border'
           "
         >
           <div
@@ -582,7 +544,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             @click="trackedAliasExpanded = !trackedAliasExpanded"
           >
             <OIcon name="check-circle" size="sm" />
-            <div class="flex-1 min-w-0 text-[13px] leading-tight">
+            <div class="flex-1 min-w-0 text-compact leading-tight">
               {{ t("settings.serviceIdentitySetup.workloadDetectedUsingFields") }}
               <span class="text-xs opacity-60"
                 >({{ trackedAliasIds.length }})</span
@@ -603,31 +565,24 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             v-if="trackedAliasExpanded"
             class="px-3 pb-3 pt-2 border-t"
             :class="
-              store.state.theme === 'dark'
-                ? 'border-sky-300/30'
-                : 'border-sky-200'
+              'border-banner-info-border'
             "
           >
             <div
-              class="rounded-lg p-2.5"
+              class="rounded-default p-2.5"
               :class="
-                store.state.theme === 'dark'
-                  ? 'bg-gray-700/60'
-                  : 'bg-gray-50'
+                'bg-surface-subtle'
               "
             >
               <div
                 class="text-xs mb-3"
                 :class="
-                  store.state.theme === 'dark'
-                    ? 'text-gray-400'
-                    : 'text-gray-400'
+                  'text-text-secondary'
                 "
               >
                 {{ t("settings.serviceIdentitySetup.workloadTrackedHelp") }}
                 <a
-                  class="config-link-btn cursor-pointer inline-block mx-1 px-2 py-0.5 rounded text-xs font-semibold no-underline align-middle border border-blue-500 text-blue-600 bg-blue-500/[.08] transition-[background]"
-                  :class="store.state.theme === 'dark' ? 'border-[#60a5fa] text-[#93c5fd] bg-[rgba(96,165,250,0.12)]' : ''"
+                  class="config-link-btn cursor-pointer inline-block mx-1 px-2 py-0.5 rounded-default text-xs font-semibold no-underline align-middle border border-text-link text-text-link bg-badge-blue-soft-bg transition-[background] hover:bg-[color-mix(in_srgb,var(--color-badge-blue-ol-border)_18%,transparent)]"
                   @click.prevent="emit('navigate-to-aliases', 'service')"
                   >{{ t("settings.serviceIdentitySetup.goToFieldAliases") }}</a
                 >
@@ -638,12 +593,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <div
                   v-for="alias in resolvedTrackedAliases"
                   :key="alias.id"
-                  class="flex items-center gap-1 pl-3 pr-1 py-1 rounded-md text-xs font-medium transition-colors"
-                  style="border: 1px solid var(--o2-border-color)"
+                  class="flex items-center gap-1 pl-3 pr-1 py-1 rounded-default text-xs font-medium transition-colors border border-card-glass-border"
+                 
                   :class="
-                    store.state.theme === 'dark'
-                      ? 'bg-gray-700 text-gray-100 shadow-sm'
-                      : 'bg-white text-gray-500 shadow-sm'
+                    'bg-surface-base text-text-secondary'
                   "
                 >
                   <span>{{ alias.label }}</span>
@@ -742,13 +695,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <div
             class="text-xs"
             :class="
-              store.state.theme === 'dark' ? 'text-gray-400' : 'text-gray-400'
+              'text-text-secondary'
             "
           >
             {{ t("settings.serviceIdentitySetup.discoveredPatternsHelp") }}
             <a
-              class="config-link-btn cursor-pointer inline-block mx-1 px-2 py-0.5 rounded text-xs font-semibold no-underline align-middle border border-blue-500 text-blue-600 bg-blue-500/[.08] transition-[background]"
-              :class="store.state.theme === 'dark' ? 'border-[#60a5fa] text-[#93c5fd] bg-[rgba(96,165,250,0.12)]' : ''"
+              class="config-link-btn cursor-pointer inline-block mx-1 px-2 py-0.5 rounded-default text-xs font-semibold no-underline align-middle border border-text-link text-text-link bg-badge-blue-soft-bg transition-[background] hover:bg-[color-mix(in_srgb,var(--color-badge-blue-ol-border)_18%,transparent)]"
               @click.prevent="emit('navigate-to-services')"
               >{{ t("settings.serviceIdentitySetup.goToServices") }}</a
             >
@@ -758,25 +710,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
         <!-- Environment Tabs (Chrome-style) -->
         <div
-          class="flex items-end gap-0 px-4"
-          style="border-bottom: 1px solid var(--o2-border-color)"
+          class="flex items-end gap-0 px-4 border-b border-card-glass-border"
+         
         >
           <div
             v-for="env in detectedEnvironments"
             :key="env.key"
-            class="relative px-4 py-2 cursor-pointer transition-all text-xs font-medium min-w-[70px] text-center rounded-t-lg border border-b-0"
+            class="relative px-4 py-2 cursor-pointer transition-all text-xs font-medium min-w-17.5 text-center rounded-t-default border border-b-0"
             :class="
               activeEnvironment === env.key
-                ? store.state.theme === 'dark'
-                  ? 'text-gray-500-1'
-                  : 'text-gray-600'
-                : store.state.theme === 'dark'
-                  ? 'bg-transparent text-gray-400 border-transparent hover:text-gray-200'
-                  : 'bg-transparent text-gray-400 border-transparent hover:text-gray-400'
+                ? 'text-text-body'
+                : 'bg-transparent text-text-muted border-transparent hover:text-text-secondary'
             "
             :style="
               activeEnvironment === env.key
-                ? 'margin-bottom: -1px; padding-bottom: 9px; background-color: var(--o2-card-bg-solid); border-color: var(--o2-border-color);'
+                ? 'margin-bottom: -1px; padding-bottom: 9px; background-color: var(--color-card-glass-solid); border-color: var(--color-card-glass-border);'
                 : ''
             "
             @click="activeEnvironment = env.key"
@@ -786,7 +734,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               v-if="
                 (setDistinguishBy[env.key] ?? []).filter(Boolean).length > 0
               "
-              class="absolute top-1 right-1 w-1.5 h-1.5 rounded-full bg-green-500"
+              class="absolute top-1 right-1 w-1.5 h-1.5 rounded-full bg-badge-success-solid-bg"
               :title="t('settings.serviceIdentitySetup.fieldsConfigured', { n: (setDistinguishBy[env.key] ?? []).filter(Boolean).length })"
             />
           </div>
@@ -802,17 +750,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <template v-for="(card, idx) in dimCards" :key="card.dim.group_id">
               <!-- Plus connector between cards -->
               <div v-if="idx > 0" class="flex items-center shrink-0">
-                <OIcon name="add" size="sm" class="text-gray-400" />
+                <OIcon name="add" size="sm" class="text-icon-color" />
               </div>
 
               <!-- Dim card -->
               <div
-                class="dim-stat-card flex-1 min-w-0 rounded-lg p-3 flex flex-col"
-                :style="
-                  store.state.theme === 'dark'
-                    ? card.theme.borderDark
-                    : card.theme.borderLight
-                "
+                class="dim-stat-card flex-1 min-w-0 rounded-default p-3 flex flex-col"
+                :style="card.theme.border"
               >
                 <div class="flex items-center gap-2 mb-2">
                   <OIcon
@@ -821,11 +765,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     :class="card.theme.iconClass"
                   />
                   <span
-                    class="text-[11px] font-medium"
+                    class="text-2xs font-medium"
                     :class="
-                      store.state.theme === 'dark'
-                        ? 'text-gray-300'
-                        : 'text-gray-400'
+                      'text-text-secondary'
                     "
                     >{{ card.label }}</span
                   >
@@ -839,11 +781,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   <span
                     v-for="val in card.values.slice(0, 5)"
                     :key="val"
-                    class="max-w-[calc(50%-4px)] h-[22px] box-border text-[11px] py-0.5 px-2 rounded-full border cursor-pointer hover:opacity-70 transition-opacity inline-flex items-center gap-1"
+                    class="max-w-[calc(50%-4px)] h-5.5 box-border text-2xs py-0.5 px-2 rounded-full border cursor-pointer hover:opacity-70 transition-opacity inline-flex items-center gap-1"
                     :class="
-                      store.state.theme === 'dark'
-                        ? card.theme.pillDark
-                        : card.theme.pillLight
+                      card.theme.pill
                     "
                     :title="val"
                     @click.stop="openInsightDialogByIdx(val, idx)"
@@ -859,9 +799,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         :key="st"
                         class="w-1.5 h-1.5 rounded-full inline-block"
                         :class="{
-                          'bg-blue-500': st === 'logs',
-                          'bg-orange-500': st === 'traces',
-                          'bg-green-500': st === 'metrics',
+                          'bg-badge-blue-solid-bg': st === 'logs',
+                          'bg-badge-orange-solid-bg': st === 'traces',
+                          'bg-badge-success-solid-bg': st === 'metrics',
                         }" /></span
                   ></span>
                   <ODropdown
@@ -872,29 +812,25 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   >
                     <template #trigger>
                       <span
-                        class="max-w-[calc(50%-4px)] h-[22px] box-border text-[11px] py-0.5 px-2 rounded-full cursor-pointer hover:opacity-70 transition-opacity"
+                        class="max-w-[calc(50%-4px)] h-5.5 box-border text-2xs py-0.5 px-2 rounded-full cursor-pointer hover:opacity-70 transition-opacity"
                         :class="
-                          store.state.theme === 'dark'
-                            ? 'text-gray-300'
-                            : 'text-gray-400'
+                          'text-text-secondary'
                         "
                         >+{{ card.values.length - 5 }}</span
                       >
                     </template>
                     <div
-                      class="p-2 flex flex-wrap gap-1 max-w-[280px] max-h-[200px] overflow-y-auto"
+                      class="p-2 flex flex-wrap gap-1 max-w-70 max-h-50 overflow-y-auto"
                       :class="
-                        store.state.theme === 'dark' ? 'bg-gray-800' : ''
+                        'bg-surface-overlay'
                       "
                     >
                       <span
                         v-for="val in card.values.slice(5)"
                         :key="val"
-                        class="text-[11px] py-0.5 px-2 rounded-full border cursor-pointer hover:opacity-70 transition-opacity inline-flex items-center gap-1"
+                        class="text-2xs py-0.5 px-2 rounded-full border cursor-pointer hover:opacity-70 transition-opacity inline-flex items-center gap-1"
                         :class="
-                          store.state.theme === 'dark'
-                            ? card.theme.pillDark
-                            : card.theme.pillLight
+                          card.theme.pill
                         "
                         :title="val"
                         @click.stop="openInsightDialogByIdx(val, idx); dimCardMoreMenuOpen[idx] = false"
@@ -910,9 +846,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                             :key="st"
                             class="w-1.5 h-1.5 rounded-full inline-block"
                             :class="{
-                              'bg-blue-500': st === 'logs',
-                              'bg-orange-500': st === 'traces',
-                              'bg-green-500': st === 'metrics',
+                              'bg-badge-blue-solid-bg': st === 'logs',
+                              'bg-badge-orange-solid-bg': st === 'traces',
+                              'bg-badge-success-solid-bg': st === 'metrics',
                             }" /></span
                       ></span>
                     </div>
@@ -925,41 +861,35 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- Stream type legend -->
           <div class="flex items-center gap-3 mt-2 ml-1">
             <div
-              class="flex items-center gap-1 text-[10px]"
+              class="flex items-center gap-1 text-3xs"
               :class="
-                store.state.theme === 'dark'
-                  ? 'text-gray-400'
-                  : 'text-gray-400'
+                'text-text-secondary'
               "
             >
               <span
-                class="w-1.5 h-1.5 rounded-full inline-block bg-blue-500"
+                class="w-1.5 h-1.5 rounded-full inline-block bg-badge-blue-solid-bg"
               />
               <span>{{ t("settings.correlation.foundInLogs") }}</span>
             </div>
             <div
-              class="flex items-center gap-1 text-[10px]"
+              class="flex items-center gap-1 text-3xs"
               :class="
-                store.state.theme === 'dark'
-                  ? 'text-gray-400'
-                  : 'text-gray-400'
+                'text-text-secondary'
               "
             >
               <span
-                class="w-1.5 h-1.5 rounded-full inline-block bg-orange-500"
+                class="w-1.5 h-1.5 rounded-full inline-block bg-badge-orange-solid-bg"
               />
               <span>{{ t("settings.correlation.foundInTraces") }}</span>
             </div>
             <div
-              class="flex items-center gap-1 text-[10px]"
+              class="flex items-center gap-1 text-3xs"
               :class="
-                store.state.theme === 'dark'
-                  ? 'text-gray-400'
-                  : 'text-gray-400'
+                'text-text-secondary'
               "
             >
               <span
-                class="w-1.5 h-1.5 rounded-full inline-block bg-green-500"
+                class="w-1.5 h-1.5 rounded-full inline-block bg-badge-success-solid-bg"
               />
               <span>{{ t("settings.correlation.foundInMetrics") }}</span>
             </div>
@@ -976,21 +906,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           "
           class="flex items-center gap-3 px-4 py-2.5"
           :class="
-            store.state.theme === 'dark' ? 'bg-gray-700/30' : 'bg-gray-50/30'
+            'bg-surface-subtle'
           "
         >
           <div
             class="flex-1 min-w-0 text-xs truncate"
             :class="
-              store.state.theme === 'dark' ? 'text-gray-300' : 'text-gray-400'
+              'text-text-secondary'
             "
           >
             <span
               class="font-bold"
               :class="
-                store.state.theme === 'dark'
-                  ? 'text-gray-100'
-                  : 'text-gray-500'
+                'text-text-body'
               "
               >{{ t("settings.serviceIdentitySetup.recommended") }}</span
             >
@@ -1028,14 +956,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                Cannot be expressed cleanly with title + sub-title props alone. -->
           <template #header>
             <div class="flex-1 min-w-0">
-              <div class="text-[16px] flex items-center">
+              <div class="text-base flex items-center">
                 {{ insightData.subtitle }}
                 <span
                   :class="[
-                    'font-semibold px-2 py-0.5 rounded-md ml-2 inline-block',
-                    store.state.theme === 'dark'
-                      ? 'text-blue-400 bg-blue-900/50'
-                      : 'text-blue-600 bg-blue-50',
+                    'font-semibold px-2 py-0.5 rounded-default ml-2 inline-block',
+                    'text-status-info-text bg-status-info-bg',
                   ]"
                 >
                   {{ insightData.title }}
@@ -1053,12 +979,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 "
                 class="flex items-center gap-1.5 text-xs mt-1"
                 :class="
-                  store.state.theme === 'dark'
-                    ? 'text-gray-300'
-                    : 'text-gray-400'
+                  'text-text-secondary'
                 "
               >
-                <OIcon name="verified" size="xs" class="text-green-500" />
+                <OIcon name="verified" size="xs" class="text-status-positive" />
                 <span
                   >{{ t("settings.serviceIdentitySetup.percentOfServices", { coverage: insightData.coverage }) }}
                   <span
@@ -1072,7 +996,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </div>
           </template>
           <!-- Stream contribution chart (single-value only) -->
-          <div class="px-5 py-4 flex flex-col h-full">
+          <div class="flex flex-col h-full">
           <template
             v-if="
               !(insightData as any).isCardLevel &&
@@ -1081,8 +1005,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           >
             <div class="mb-3 shrink-0">
               <div
-                class="text-[11px] tracking-wide font-medium mb-2"
-                style="color: var(--color-text-primary)"
+                class="text-2xs tracking-wide font-medium mb-2 text-text-label"
+               
               >
                 {{ t("settings.serviceIdentitySetup.streamSources") }}
               </div>
@@ -1096,19 +1020,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <div
                   v-for="sd in (insightData as any).streamDetails"
                   :key="sd.streamType"
-                  class="flex items-center gap-1.5 text-[11px]"
+                  class="flex items-center gap-1.5 text-2xs"
                   :class="
-                    store.state.theme === 'dark'
-                      ? 'text-gray-300'
-                      : 'text-gray-400'
+                    'text-text-secondary'
                   "
                 >
                   <span
                     class="w-2 h-2 rounded-full"
                     :class="{
-                      'bg-blue-500': sd.streamType === 'logs',
-                      'bg-orange-500': sd.streamType === 'traces',
-                      'bg-green-500': sd.streamType === 'metrics',
+                      'bg-badge-blue-solid-bg': sd.streamType === 'logs',
+                      'bg-badge-orange-solid-bg': sd.streamType === 'traces',
+                      'bg-badge-success-solid-bg': sd.streamType === 'metrics',
                     }"
                   />
                   <span class="capitalize">{{ sd.streamType }}</span>
@@ -1130,11 +1052,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             "
           >
             <div
-              class="text-[11px] font-medium mb-3"
+              class="text-2xs font-medium mb-3"
               :class="
-                store.state.theme === 'dark'
-                  ? 'text-gray-400'
-                  : 'text-gray-400'
+                'text-text-secondary'
               "
             >
               {{ t("settings.serviceIdentitySetup.allValues", { count: insightData.children.length }) }}
@@ -1154,9 +1074,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   <span
                     class="shrink-0 ml-2 tabular-nums"
                     :class="
-                      store.state.theme === 'dark'
-                        ? 'text-gray-300'
-                        : 'text-gray-400'
+                      'text-text-secondary'
                     "
                     >{{ child.count }} {{ insightData.childCountLabel }}</span
                   >
@@ -1164,9 +1082,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <div
                   class="w-full h-2 rounded-full overflow-hidden"
                   :class="
-                    store.state.theme === 'dark'
-                      ? 'bg-gray-600'
-                      : 'bg-gray-100'
+                    'bg-surface-subtle'
                   "
                 >
                   <div
@@ -1196,11 +1112,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           >
             <!-- Explanation -->
             <div
-              class="flex items-center gap-1.5 text-[11px] mb-2 shrink-0 py-1.5 px-2.5 rounded-md"
+              class="flex items-center gap-1.5 text-2xs mb-2 shrink-0 py-1.5 px-2.5 rounded-default"
               :class="
-                store.state.theme === 'dark'
-                  ? 'bg-gray-700 text-gray-400'
-                  : 'bg-blue-1/40 text-gray-400'
+                'bg-status-info-bg text-text-secondary'
               "
             >
               <OIcon name="info" size="xs" />
@@ -1221,27 +1135,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 class="flex-1 min-w-0 flex flex-col px-3"
                 :class="[
                   dimIdx > 0
-                    ? store.state.theme === 'dark'
-                      ? 'border-l border-grey-8'
-                      : 'border-l border-grey-3'
+                    ? 'border-l border-border-default'
                     : '',
                 ]"
               >
                 <div
-                  class="text-[13px] font-bold mb-2"
+                  class="text-compact font-bold mb-2"
                   :class="
-                    store.state.theme === 'dark'
-                      ? 'text-gray-200'
-                      : 'text-gray-500'
+                    'text-text-body'
                   "
                 >
                   {{ dim.label }}
                   <span
                     class="font-normal"
                     :class="
-                      store.state.theme === 'dark'
-                        ? 'text-gray-400'
-                        : 'text-gray-400'
+                      'text-text-secondary'
                     "
                     >({{ dim.values.length }})</span
                   >
@@ -1252,20 +1160,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   <span
                     v-for="dVal in dim.values"
                     :key="dVal"
-                    class="text-[13px] py-1 px-2.5 rounded-md border truncate shrink-0"
+                    class="text-compact py-1 px-2.5 rounded-default border truncate shrink-0"
                     :class="{
-                      'bg-teal-10/30 border-teal-9/50 text-teal-3':
-                        dim.color === 'teal' && store.state.theme === 'dark',
-                      'bg-teal-1/50 border-teal-2 text-teal-8':
-                        dim.color === 'teal' && store.state.theme !== 'dark',
-                      'bg-purple-10/30 border-purple-9/50 text-purple-3':
-                        dim.color === 'purple' && store.state.theme === 'dark',
-                      'bg-purple-1/50 border-purple-2 text-purple-8':
-                        dim.color === 'purple' && store.state.theme !== 'dark',
-                      'bg-blue-10/30 border-blue-9/50 text-blue-3':
-                        dim.color === 'blue' && store.state.theme === 'dark',
-                      'bg-blue-1/50 border-blue-2 text-blue-8':
-                        dim.color === 'blue' && store.state.theme !== 'dark',
+                      'bg-badge-teal-soft-bg border-badge-teal-ol-border text-badge-teal-soft-text': dim.color === 'teal',
+                      'bg-badge-purple-soft-bg border-badge-purple-ol-border text-badge-purple-soft-text': dim.color === 'purple',
+                      'bg-badge-blue-soft-bg border-badge-blue-ol-border text-badge-blue-soft-text': dim.color === 'blue',
                     }"
                     :title="dVal"
                     >{{ dVal }}</span
@@ -1274,9 +1173,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     v-if="dim.values.length === 0"
                     class="text-xs italic"
                     :class="
-                      store.state.theme === 'dark'
-                        ? 'text-gray-400'
-                        : 'text-gray-400'
+                      'text-text-secondary'
                     "
                     >{{ t("settings.serviceIdentitySetup.noValues") }}</span
                   >
@@ -1348,19 +1245,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               selectedFieldAnalytics?.sample_values &&
               Object.keys(selectedFieldAnalytics.sample_values).length
             "
-            class="flex h-[300px]"
+            class="flex h-75"
           >
             <!-- Left Pane: Streams List -->
             <div
-              class="w-1/3 border-r bg-gray-50 dark:bg-dark flex flex-col"
+              class="w-1/3 border-r bg-surface-subtle flex flex-col"
             >
               <!-- Static column header — never scrolls, never gets covered -->
               <div
-                class="px-4 py-2 font-medium text-xs uppercase text-gray-400 border-b flex items-center justify-between shrink-0"
-                :style="{
-                  backgroundColor:
-                    store.state.theme === 'dark' ? '#1d1d1d' : '#eeeeee',
-                }"
+                class="px-4 py-2 font-medium text-xs uppercase text-text-label border-b flex items-center justify-between shrink-0 bg-surface-subtle"
               >
                 <span>{{
                   selectedStreamType ||
@@ -1368,7 +1261,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     (t) => selectedFieldAnalytics.sample_values[t],
                   )
                 }}</span>
-                <span class="text-gray-400">{{ t("settings.serviceIdentitySetup.streams") }}</span>
+                <span class="text-text-label">{{ t("settings.serviceIdentitySetup.streams") }}</span>
               </div>
 
               <!-- Scrollable content -->
@@ -1408,11 +1301,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   >
                     <div
                       v-if="typeIdx > 0"
-                      class="px-4 py-1 text-[10px] font-bold uppercase text-gray-400 sticky top-0 z-10 border-b border-t"
-                      :style="{
-                        backgroundColor:
-                          store.state.theme === 'dark' ? '#1d1d1d' : '#eeeeee',
-                      }"
+                      class="px-4 py-1 text-3xs font-bold uppercase text-text-label sticky top-0 z-10 border-b border-t bg-surface-subtle"
                     >
                       {{ typeName }}
                     </div>
@@ -1441,24 +1330,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
             <!-- Right Pane: N-1 hierarchy columns -->
             <div
-              class="flex-1 flex overflow-x-auto"
-              :style="{
-                backgroundColor:
-                  store.state.theme === 'dark' ? '#1d1d1d' : '#ffffff',
-              }"
+              class="flex-1 flex overflow-x-auto bg-surface-base"
             >
               <div
                 v-for="(col, colIdx) in popupColumns"
                 :key="col.group_id"
-                class="min-w-[160px] flex-1 overflow-y-auto"
+                class="min-w-40 flex-1 overflow-y-auto"
                 :class="{ 'border-l': colIdx > 0 }"
               >
                 <div
-                  class="px-4 py-2 font-medium text-xs uppercase text-gray-400 sticky top-0 z-10 border-b"
-                  :style="{
-                    backgroundColor:
-                      store.state.theme === 'dark' ? '#1d1d1d' : '#eeeeee',
-                  }"
+                  class="px-4 py-2 font-medium text-xs uppercase text-text-label sticky top-0 z-10 border-b bg-surface-subtle"
                 >
                   {{ col.display }}
                 </div>
@@ -1466,23 +1347,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   <div
                     v-for="val in getPopupColumnValues(colIdx)"
                     :key="val"
-                    class="px-3 py-2 rounded border transition-colors cursor-pointer font-mono truncate"
-                    :style="
-                      popupColumnSelections[colIdx] === val
-                        ? {}
-                        : {
-                            backgroundColor:
-                              store.state.theme === 'dark'
-                                ? '#2d2d2d'
-                                : '#f5f5f5',
-                            borderColor:
-                              store.state.theme === 'dark' ? '#444' : '#e0e0e0',
-                          }
-                    "
+                    class="px-3 py-2 rounded-default border transition-colors cursor-pointer font-mono truncate"
                     :class="
                       popupColumnSelections[colIdx] === val
                         ? 'bg-primary/15 border-primary/40 text-primary ring-1 ring-primary/30'
-                        : ''
+                        : 'bg-surface-subtle border-border-default'
                     "
                     @click="selectPopupColumnValue(colIdx, val)"
                   >
@@ -1490,7 +1359,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </div>
                   <div
                     v-if="getPopupColumnValues(colIdx).length === 0"
-                    class="text-gray-400 text-xs italic p-2"
+                    class="text-text-muted text-xs italic p-2"
                   >
                     {{ t("settings.serviceIdentitySetup.noValues") }}
                   </div>
@@ -1499,14 +1368,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <!-- Fallback when no ranked dims beyond the selected field -->
               <div
                 v-if="popupColumns.length === 0"
-                class="flex items-center justify-center flex-1 text-gray-400 text-sm italic"
+                class="flex items-center justify-center flex-1 text-text-muted text-sm italic"
               >
                 {{ t("settings.serviceIdentitySetup.noAdditionalDimensions") }}
               </div>
             </div>
           </div>
 
-          <div v-else class="text-gray-500 italic p-4 text-center">
+          <div v-else class="text-text-muted italic p-4 text-center">
             {{ t("settings.serviceIdentitySetup.noSampleData") }}
           </div>
         </OCardSection>
@@ -1519,6 +1388,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { ref, computed, onMounted, watch, nextTick } from "vue";
 import OCardSection from "@/lib/core/Card/OCardSection.vue";
 import { useStore } from "vuex";
+import useTheme from "@/composables/useTheme";
 import { useI18n } from "vue-i18n";
 import CustomChartRenderer from "@/components/dashboards/panels/CustomChartRenderer.vue";
 import OTagInput from "@/lib/forms/TagInput/OTagInput.vue";
@@ -1572,6 +1442,7 @@ const props = defineProps<{
 // ─── Setup ────────────────────────────────────────────────────────────────────
 
 const store = useStore();
+const { isDark: isDarkTheme } = useTheme();
 const { t } = useI18n();
 
 // ─── State ────────────────────────────────────────────────────────────────────
@@ -1898,60 +1769,45 @@ const DIM_CARD_THEMES = [
     icon: "cloud",
     iconClass: "text-blue-5",
     countClass: "text-blue-6",
-    borderDark:
+    border:
       "border: 1px solid rgba(59,130,246,0.4); background: rgba(59,130,246,0.06)",
-    borderLight:
-      "border: 1px solid rgba(59,130,246,0.3); background: rgba(59,130,246,0.05)",
-    pillDark: "bg-blue-10/30 border-blue-9/50 text-blue-3",
-    pillLight: "bg-blue-1/50 border-blue-2 text-blue-8",
+    pill: "bg-badge-blue-soft-bg border-badge-blue-ol-border text-badge-blue-soft-text",
   },
   {
     // teal
     icon: "folder-open",
     iconClass: "text-teal-5",
     countClass: "text-teal-6",
-    borderDark:
+    border:
       "border: 1px solid rgba(20,184,166,0.4); background: rgba(20,184,166,0.06)",
-    borderLight:
-      "border: 1px solid rgba(20,184,166,0.3); background: rgba(20,184,166,0.05)",
-    pillDark: "bg-teal-10/30 border-teal-9/50 text-teal-3",
-    pillLight: "bg-teal-1/50 border-teal-2 text-teal-8",
+    pill: "bg-badge-teal-soft-bg border-badge-teal-ol-border text-badge-teal-soft-text",
   },
   {
     // purple
     icon: "widgets",
     iconClass: "text-purple-5",
     countClass: "text-purple-6",
-    borderDark:
+    border:
       "border: 1px solid rgba(168,85,247,0.4); background: rgba(168,85,247,0.06)",
-    borderLight:
-      "border: 1px solid rgba(168,85,247,0.3); background: rgba(168,85,247,0.05)",
-    pillDark: "bg-purple-10/30 border-purple-9/50 text-purple-3",
-    pillLight: "bg-purple-1/50 border-purple-2 text-purple-8",
+    pill: "bg-badge-purple-soft-bg border-badge-purple-ol-border text-badge-purple-soft-text",
   },
   {
     // amber
     icon: "lan",
     iconClass: "text-amber-5",
     countClass: "text-amber-6",
-    borderDark:
+    border:
       "border: 1px solid rgba(245,158,11,0.4); background: rgba(245,158,11,0.06)",
-    borderLight:
-      "border: 1px solid rgba(245,158,11,0.3); background: rgba(245,158,11,0.05)",
-    pillDark: "bg-amber-10/30 border-amber-9/50 text-amber-3",
-    pillLight: "bg-amber-1/50 border-amber-2 text-amber-8",
+    pill: "bg-badge-amber-soft-bg border-badge-amber-ol-border text-badge-amber-soft-text",
   },
   {
     // rose
     icon: "hub",
     iconClass: "text-red-4",
     countClass: "text-red-5",
-    borderDark:
+    border:
       "border: 1px solid rgba(244,63,94,0.4); background: rgba(244,63,94,0.06)",
-    borderLight:
-      "border: 1px solid rgba(244,63,94,0.3); background: rgba(244,63,94,0.05)",
-    pillDark: "bg-red-10/30 border-red-9/50 text-red-3",
-    pillLight: "bg-red-1/50 border-red-2 text-red-8",
+    pill: "bg-badge-error-soft-bg border-badge-error-ol-border text-badge-error-soft-text",
   },
 ] as const;
 
@@ -2132,11 +1988,14 @@ function formatDimLabels(dims: any[]): string {
 
 /** Returns inline style for selected dimension pill — subtle primary highlight */
 function getDimSelectedStyle(_color: string): Record<string, string> {
-  const isDark = store.state.theme === "dark";
   return {
-    backgroundColor: isDark ? "rgba(59,130,246,0.15)" : "rgba(59,130,246,0.1)",
-    borderColor: isDark ? "rgba(59,130,246,0.5)" : "rgba(59,130,246,0.4)",
-    color: isDark ? "#93c5fd" : "#1d4ed8",
+    backgroundColor: isDarkTheme.value
+      ? "rgba(59,130,246,0.15)"
+      : "rgba(59,130,246,0.1)",
+    borderColor: isDarkTheme.value
+      ? "rgba(59,130,246,0.5)"
+      : "rgba(59,130,246,0.4)",
+    color: isDarkTheme.value ? "#93c5fd" : "#1d4ed8",
     fontWeight: "600",
   };
 }
@@ -2463,7 +2322,6 @@ const STREAM_TYPE_COLORS: Record<string, string> = {
 const insightChartData = computed(() => {
   if (!insightDialogOpen.value) return { options: {} };
 
-  const isDark = store.state.theme === "dark";
   const data = insightData.value;
   const streamDetails: { streamType: string; streamNames: string[] }[] =
     (data as any).streamDetails ?? [];
@@ -2485,10 +2343,10 @@ const insightChartData = computed(() => {
         appendToBody: true,
         confine: false,
         textStyle: {
-          color: isDark ? "#fff" : "#000",
+          color: isDarkTheme.value ? "#fff" : "#000",
           fontSize: 12,
         },
-        backgroundColor: isDark ? "rgba(0,0,0,1)" : "rgba(255,255,255,1)",
+        backgroundColor: isDarkTheme.value ? "rgba(0,0,0,1)" : "rgba(255,255,255,1)",
         extraCssText: "max-height: 240px; overflow-y: auto;",
         formatter: function (params: any) {
           const names: string[] = params.data?.streamNames ?? [];
@@ -2497,7 +2355,7 @@ const insightChartData = computed(() => {
           const list = names
             .map(
               (n) =>
-                `<div style="padding:1px 0;padding-left:14px;font-size:11px;">${n}</div>`,
+                `<div style="padding:1px 0;padding-left:14px;font-size: var(--text-2xs);">${n}</div>`,
             )
             .join("");
           return header + '<div style="margin-top:4px;">' + list + "</div>";
@@ -2514,7 +2372,7 @@ const insightChartData = computed(() => {
           avoidLabelOverlap: true,
           itemStyle: {
             borderRadius: 4,
-            borderColor: isDark ? "#111827" : "#fff",
+            borderColor: isDarkTheme.value ? "#111827" : "#fff",
             borderWidth: 2,
           },
           label: { show: false },
@@ -2540,7 +2398,7 @@ const insightChartData = computed(() => {
                   text: `${totalStreams}`,
                   fontSize: 22,
                   fontWeight: "bold",
-                  fill: isDark ? "#e5e7eb" : "#1f2937",
+                  fill: isDarkTheme.value ? "#e5e7eb" : "#1f2937",
                   textAlign: "center",
                 },
                 subtextStyle: {
@@ -2674,8 +2532,8 @@ const totalServices = computed(() => {
 });
 
 /**
- * Logic previously on backend: Detect environment and suggest fields based on available data.
- * Now dynamic based on the active environment tab.
+ * Detect environment and suggest fields based on available data, driven by the
+ * active environment tab.
  */
 const detectedEnvironment = computed<DetectedEnvironment | null>(() => {
   if (!activeEnvironment.value) return null;
@@ -2722,8 +2580,8 @@ const detectedEnvironment = computed<DetectedEnvironment | null>(() => {
 });
 
 /**
- * Logic previously on backend: Detect environment and suggest fields based on available data.
- * Now dynamic based on the active environment tab.
+ * Detect environment and suggest fields based on available data, driven by the
+ * active environment tab.
  */
 const suggestedConfig = computed<SuggestedConfig | null>(() => {
   if (!activeEnvironment.value || suggestionDismissed.value) return null;
@@ -3675,13 +3533,3 @@ onMounted(() => {
   loadData();
 });
 </script>
-
-<style>
-.config-link-btn:hover {
-  background: rgba(59, 130, 246, 0.18);
-}
-
-.sis-dark .config-link-btn:hover {
-  background: rgba(96, 165, 250, 0.22);
-}
-</style>
diff --git a/web/src/components/settings/TestModelMatchDialog.spec.ts b/web/src/components/settings/TestModelMatchDialog.spec.ts
index c7dbeb1367..d1919bab1e 100644
--- a/web/src/components/settings/TestModelMatchDialog.spec.ts
+++ b/web/src/components/settings/TestModelMatchDialog.spec.ts
@@ -89,28 +89,6 @@ const ODialogStub = {
   `,
 };
 
-const QInputStub = {
-  name: "QInput",
-  props: ["modelValue", "dense", "borderless", "placeholder"],
-  emits: ["update:modelValue"],
-  template: `
-    <div data-test="q-input-stub">
-      <slot name="prepend" />
-      <input
-        data-test="q-input-stub-input"
-        :value="modelValue"
-        @input="$emit('update:modelValue', $event.target.value)"
-      />
-      <slot name="append" />
-    </div>
-  `,
-  methods: {
-    focus() {
-      /* no-op for tests */
-    },
-  },
-};
-
 const QIconStub = {
   name: "QIcon",
   props: ["name", "size", "color"],
@@ -162,7 +140,6 @@ function mountDialog(props: Record<string, unknown> = {}) {
         ODialog: ODialogStub,
         OButton: OButtonStub,
         OInput: OInputStub,
-        "q-input": QInputStub,
         "OIcon": QIconStub,
         OBadge: OBadgeStub,
       },
@@ -253,7 +230,6 @@ describe("TestModelMatchDialog", () => {
             ODialog: ODialogStub,
             OButton: OButtonStub,
             OInput: OInputStub,
-            "q-input": QInputStub,
             "OIcon": QIconStub,
             OBadge: OBadgeStub,
           },
diff --git a/web/src/components/settings/TestModelMatchDialog.vue b/web/src/components/settings/TestModelMatchDialog.vue
index 3db87831b2..eb4e04f891 100644
--- a/web/src/components/settings/TestModelMatchDialog.vue
+++ b/web/src/components/settings/TestModelMatchDialog.vue
@@ -15,14 +15,14 @@
   >
 
     <!-- Two-column body -->
-    <div class="flex flex-1 overflow-hidden min-h-0" style="height: 100%">
+    <div class="flex flex-1 overflow-hidden min-h-0 h-full">
         <!-- ── Left: Inputs ── -->
-        <div class="w-[340px] shrink-0 overflow-y-auto py-5 pr-5 pl-6 flex flex-col gap-5">
+        <div class="w-85 shrink-0 overflow-y-auto py-5 pr-5 pl-6 flex flex-col gap-5">
           <!-- Model Name -->
-          <div class="flex flex-col gap-[6px]">
-            <label class="text-[13px] font-semibold text-(--color-text-primary)"
+          <div class="flex flex-col gap-1.5">
+            <label class="text-compact font-semibold text-text-heading"
               >{{ t("modelPricing.modelNameInput") }}
-              <span class="text-[#ef4444]">*</span></label
+              <span class="text-status-error-text">*</span></label
             >
             <div class="text-xs opacity-50 leading-normal mb-0.5">
               {{ t("modelPricing.modelNameHint") }}
@@ -53,7 +53,7 @@
         </div>
 
         <!-- ── Vertical divider ── -->
-        <div class="w-px bg-(--o2-border-color) shrink-0"></div>
+        <div class="w-px bg-card-glass-border shrink-0"></div>
 
         <!-- ── Right: Live Results ── -->
         <div class="flex-1 overflow-y-auto py-5 pl-5 pr-6">
@@ -62,11 +62,11 @@
             <div
               v-if="!testModelName"
               key="empty"
-              class="flex flex-col items-center justify-center h-full min-h-[200px] gap-[10px]"
+              class="flex flex-col items-center justify-center h-full min-h-50 gap-2.5"
               data-test="test-match-empty"
             >
               <OIcon name="manage-search" size="xl" class="opacity-[0.12]" />
-              <div class="text-[13px] opacity-[0.35] text-center">
+              <div class="text-compact opacity-[0.35] text-center">
                 {{ t("modelPricing.enterModelName") }}
               </div>
             </div>
@@ -75,11 +75,11 @@
             <div
               v-else-if="testResult === null"
               key="waiting"
-              class="flex flex-col items-center justify-center h-full min-h-[200px] gap-[10px]"
+              class="flex flex-col items-center justify-center h-full min-h-50 gap-2.5"
               data-test="test-match-waiting"
             >
               <OIcon name="ads-click" size="xl" class="opacity-[0.12]" />
-              <div class="text-[13px] opacity-[0.35] text-center">
+              <div class="text-compact opacity-[0.35] text-center">
                 {{ t("modelPricing.clickToTest") }}
               </div>
             </div>
@@ -91,12 +91,12 @@
               class="flex flex-col gap-3"
               data-test="test-match-no-result"
             >
-              <div class="flex items-center gap-3 py-3 px-[14px] rounded-lg border bg-[rgba(239,68,68,0.04)] border-[rgba(239,68,68,0.15)] dark:bg-[rgba(239,68,68,0.08)] dark:border-[rgba(239,68,68,0.2)]">
-                <div class="w-8 h-8 rounded-lg flex items-center justify-center shrink-0 bg-[rgba(239,68,68,0.1)] text-[#dc2626]">
+              <div class="flex items-center gap-3 py-3 px-3.5 rounded-default border bg-banner-error-soft-bg border-banner-error-soft-border">
+                <div class="w-8 h-8 rounded-default flex items-center justify-center shrink-0 bg-status-error-bg text-status-error-text">
                   <OIcon name="error-outline" size="md" />
                 </div>
                 <div>
-                  <div class="text-[13px] font-bold text-[#b91c1c] dark:text-[#fca5a5]">
+                  <div class="text-compact font-bold text-status-error-text">
                     {{ t("modelPricing.noMatchFound") }}
                   </div>
                   <div class="text-xs mt-0.5 opacity-70">
@@ -108,8 +108,8 @@
                   </div>
                 </div>
               </div>
-              <div class="py-3 px-[14px] rounded-lg bg-[rgba(0,0,0,0.02)] dark:bg-[rgba(255,255,255,0.02)] border border-(--o2-border-color)">
-                <div class="text-[11px] font-semibold opacity-55 mb-[6px]">
+              <div class="py-3 px-3.5 rounded-default bg-surface-panel border border-card-glass-border">
+                <div class="text-2xs font-semibold opacity-55 mb-1.5">
                   {{ t("modelPricing.troubleshootingTitle") }}
                 </div>
                 <ul class="m-0 pl-4 text-xs leading-[1.9] opacity-60">
@@ -128,16 +128,16 @@
               data-test="test-match-result"
             >
               <!-- Match status -->
-              <div class="flex items-center gap-3 py-3 px-[14px] rounded-lg border bg-[rgba(22,163,74,0.05)] border-[rgba(22,163,74,0.2)] dark:bg-[rgba(22,163,74,0.08)] dark:border-[rgba(22,163,74,0.25)]">
-                <div class="w-8 h-8 rounded-lg flex items-center justify-center shrink-0 bg-[rgba(22,163,74,0.12)] text-[#16a34a]">
+              <div class="flex items-center gap-3 py-3 px-3.5 rounded-default border bg-banner-success-bg border-banner-success-border">
+                <div class="w-8 h-8 rounded-default flex items-center justify-center shrink-0 bg-status-success-bg text-status-success-text">
                   <OIcon name="check-circle" size="md" />
                 </div>
                 <div class="flex-1 min-w-0">
-                  <div class="text-[13px] font-bold text-[#15803d] dark:text-[#4ade80]">
+                  <div class="text-compact font-bold text-status-success-text">
                     {{ t("modelPricing.matchFound") }}
                   </div>
                   <div class="text-xs mt-0.5 opacity-70 truncate">
-                    <code class="inline py-px px-[6px] rounded text-xs font-semibold font-[SF_Mono,JetBrains_Mono,monospace] bg-[rgba(22,163,74,0.08)] border border-[rgba(22,163,74,0.2)] text-inherit">{{
+                    <code class="inline py-px px-1.5 rounded-default text-xs font-semibold font-mono bg-banner-success-bg border border-banner-success-border text-inherit">{{
                       testResult.matched.name
                     }}</code>
                   </div>
@@ -145,18 +145,18 @@
                 <OTag
                   type="modelSource"
                   :value="testResult.matched.source || 'org'"
-                  class="shrink-0 text-[11px] font-semibold ml-auto"
+                  class="shrink-0 text-2xs font-semibold ml-auto"
                 >
                   {{ sourceLabel(testResult.matched) }}
                 </OTag>
               </div>
 
               <!-- Priority flow -->
-              <div class="py-3 px-[14px] border border-(--o2-border-color) rounded-lg bg-[rgba(0,0,0,0.015)] dark:bg-[rgba(255,255,255,0.02)]">
-                <div class="text-[10px] font-semibold opacity-40 mb-2">
+              <div class="py-3 px-3.5 border border-card-glass-border rounded-default bg-surface-panel">
+                <div class="text-3xs font-semibold opacity-40 mb-2">
                   {{ t("modelPricing.matchPriority") }}
                 </div>
-                <div class="flex items-center gap-[6px] flex-wrap">
+                <div class="flex items-center gap-1.5 flex-wrap">
                   <template
                     v-for="(step, sIdx) in matchFlowSteps"
                     :key="step.key"
@@ -165,9 +165,9 @@
                       <OIcon name="arrow-forward" size="xs" />
                     </div>
                     <div
-                      class="flex items-center gap-[5px] py-[5px] px-[10px] rounded-md border border-(--o2-border-color) text-[11px] font-medium bg-transparent"
+                      class="flex items-center gap-1.25 py-1.25 px-2.5 rounded-default border border-card-glass-border text-2xs font-medium bg-transparent"
                       :class="{
-                        'border-[#16a34a] bg-[rgba(22,163,74,0.06)] font-bold dark:bg-[rgba(22,163,74,0.1)]': step.key === winnerSource,
+                        'border-status-positive bg-banner-success-bg font-bold': step.key === winnerSource,
                         'opacity-40': step.key !== winnerSource,
                       }"
                     >
@@ -181,7 +181,7 @@
                         v-if="step.key === winnerSource"
                         name="check-circle"
                         size="xs"
-                        class="text-[#16a34a]"
+                        class="text-status-success-text"
                       />
                     </div>
                   </template>
@@ -189,48 +189,48 @@
               </div>
 
               <!-- Tier + cost card -->
-              <div class="border border-(--o2-border-color) rounded-lg overflow-hidden">
-                <div class="py-3 px-[14px] bg-[rgba(0,0,0,0.02)] dark:bg-[rgba(255,255,255,0.03)] border-b border-(--o2-border-color)">
+              <div class="border border-card-glass-border rounded-default overflow-hidden">
+                <div class="py-3 px-3.5 bg-surface-panel border-b border-card-glass-border">
                   <div>
-                    <div class="text-[13px] font-bold">
+                    <div class="text-compact font-bold">
                       {{ testResult.tier || t("settings.testModelMatchDialog.defaultTier") }}
                     </div>
                     <div
-                      class="text-[11px] opacity-50 mt-0.5"
+                      class="text-2xs opacity-50 mt-0.5"
                       v-if="matchedTierDef?.condition"
                     >
                       {{ t("settings.testModelMatchDialog.condition") }}
-                      <code class="tmm-cost-tier-desc-code py-px px-1 rounded-[3px] bg-[rgba(0,0,0,0.05)] dark:bg-[rgba(255,255,255,0.08)] text-[11px]"
+                      <code class="tmm-cost-tier-desc-code py-px px-1 rounded-default bg-surface-subtle text-2xs"
                         >{{ matchedTierDef.condition.usage_key }}
                         {{ operatorSymbol(matchedTierDef.condition.operator) }}
                         {{ matchedTierDef.condition.value }}</code
                       >
                     </div>
-                    <div class="text-[11px] opacity-50 mt-0.5" v-else>
+                    <div class="text-2xs opacity-50 mt-0.5" v-else>
                       {{ t("modelPricing.defaultPricingTier") }}
                     </div>
                   </div>
                 </div>
 
                 <div class="text-xs" v-if="pricingRows.length > 0">
-                  <div class="grid gap-2 py-[7px] px-[14px] border-b border-(--o2-border-color) bg-[rgba(0,0,0,0.015)] dark:bg-[rgba(255,255,255,0.02)] [grid-template-columns:1.5fr_1fr]">
-                    <span class="text-[10px] font-semibold opacity-40">{{ t("modelPricing.usageType") }}</span>
-                    <span class="text-[10px] font-semibold opacity-40 text-right">{{
+                  <div class="grid gap-2 py-1.75 px-3.5 border-b border-card-glass-border bg-surface-panel grid-cols-[1.5fr_1fr]">
+                    <span class="text-3xs font-semibold opacity-40">{{ t("modelPricing.usageType") }}</span>
+                    <span class="text-3xs font-semibold opacity-40 text-right">{{
                       t("modelPricing.pricePerMTokens")
                     }}</span>
                   </div>
                   <div
                     v-for="row in pricingRows"
                     :key="row.key"
-                    class="tmm-cost-table-row grid gap-2 py-2 px-[14px] text-xs border-b border-[rgba(0,0,0,0.04)] dark:border-[rgba(255,255,255,0.04)] hover:bg-[rgba(0,0,0,0.015)] dark:hover:bg-[rgba(255,255,255,0.02)] [grid-template-columns:1.5fr_1fr]"
+                    class="tmm-cost-table-row grid gap-2 py-2 px-3.5 text-xs border-b border-border-default last:border-b-0 hover:bg-hover-gray grid-cols-[1.5fr_1fr]"
                   >
-                    <span class="font-semibold font-[SF_Mono,JetBrains_Mono,monospace] text-[11px]">{{ row.key }}</span>
-                    <span class="font-semibold [font-variant-numeric:tabular-nums] text-right"
+                    <span class="font-semibold font-mono text-2xs">{{ row.key }}</span>
+                    <span class="font-semibold tabular-nums text-right"
                       >${{ formatRate(row.rate) }}</span
                     >
                   </div>
                 </div>
-                <div v-else class="flex items-center gap-[7px] p-[14px] text-xs opacity-40 italic">
+                <div v-else class="flex items-center gap-1.75 p-3.5 text-xs opacity-40 italic">
                   <OIcon name="info-outline" size="sm" />
                   {{ t("modelPricing.noPricingForTier") }}
                 </div>
@@ -394,13 +394,11 @@ function formatRate(rate: number) {
 }
 </script>
 
-<style>
-/* :last-child pseudo selector — kept in <style> per project rules */
-.tmm-cost-table-row:last-child {
-  border-bottom: none;
-}
-
-/* ── Transition animations ── */
+<style scoped>
+/* keep(complex-state): the enter/leave classes Vue applies for
+   <Transition name="tmm-fade"> — Vue adds them itself, mid-transition, so no
+   template utility can express them. Scoped is correct: every transitioned
+   element is this component's own template child. */
 .tmm-fade-enter-active,
 .tmm-fade-leave-active {
   transition: all 0.18s ease;
@@ -408,7 +406,7 @@ function formatRate(rate: number) {
 
 .tmm-fade-enter-from {
   opacity: 0;
-  transform: translateY(5px);
+  transform: translateY(0.3125rem);
 }
 
 .tmm-fade-leave-to {
diff --git a/web/src/components/settings/index.spec.ts b/web/src/components/settings/index.spec.ts
index 9a251049f3..b4ed94c04a 100644
--- a/web/src/components/settings/index.spec.ts
+++ b/web/src/components/settings/index.spec.ts
@@ -87,7 +87,7 @@ const createWrapper = (props = {}, options = {}) => {
         store: mockStore,
       },
       stubs: {
-        PageLayout: {
+        OPageLayout: {
           template: `<div data-test-stub="page-layout">
             <slot name="sidebar"></slot>
             <slot></slot>
@@ -98,7 +98,7 @@ const createWrapper = (props = {}, options = {}) => {
           template: `<div data-test-stub="section-rail"></div>`,
           props: ["groups", "activeKey", "title"],
         },
-        AppPageHeader: {
+        OPageHeader: {
           template: `<div data-test-stub="app-page-header">
             <slot name="title"></slot>
           </div>`,
diff --git a/web/src/components/settings/index.vue b/web/src/components/settings/index.vue
index 770bd05f8d..423f67097d 100644
--- a/web/src/components/settings/index.vue
+++ b/web/src/components/settings/index.vue
@@ -17,7 +17,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <!-- Grouped left rail (prototype admin model) — same shell as IAM. The rail is
        always present; the chosen section renders to the right. -->
-  <PageLayout :sidebar-width="232">
+  <OPageLayout bleed :sidebar-width="230">
     <template #sidebar>
       <SectionRail
         :groups="sectionGroups"
@@ -32,12 +32,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       v-if="isConstrainedSection"
       class="h-full min-h-0 flex flex-col"
     >
-      <AppPageHeader
+      <OPageHeader
         :title="activeSectionItem?.label || ''"
         :title-data-test="`settings-${activeSectionItem?.key}-page-title`"
         :subtitle="activeSectionItem?.description || ''"
         :icon="(activeSectionItem?.icon as any)"
-        class="shrink-0 px-4 border-b border-border-subtle"
+        class="shrink-0 border-b border-border-default"
       />
       <ConstrainedPage
         size="lg"
@@ -48,17 +48,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <router-view title="" />
       </ConstrainedPage>
     </div>
-    <!-- Table/list sections render their own AppPageHeader inside. -->
+    <!-- Table/list sections render their own header (OPageLayout) inside. Do NOT
+         pass a `title` attr here: these children are OPageLayout-rooted, so a
+         fallthrough `title` would clobber their own `:title` prop and blank the
+         header (regression seen on Query Management / Nodes). -->
     <section v-else class="h-full min-w-0 min-h-0 overflow-y-auto overflow-x-hidden">
-      <router-view title="" />
+      <router-view />
     </section>
-  </PageLayout>
+  </OPageLayout>
 </template>
 
 <script lang="ts">
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageHeader from "@/lib/core/PageHeader/OPageHeader.vue";
 import ConstrainedPage from "@/components/common/ConstrainedPage.vue";
-import PageLayout from "@/components/common/PageLayout.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import SectionRail from "@/components/common/SectionRail.vue";
 import {
   type SectionHubGroup,
@@ -77,6 +80,7 @@ import {
 } from "vue";
 import { useI18n } from "vue-i18n";
 import { useStore } from "vuex";
+import useTheme from "@/composables/useTheme";
 import { useRouter, useRoute } from "vue-router";
 import config from "@/aws-exports";
 import useIsMetaOrg from "@/composables/useIsMetaOrg";
@@ -85,14 +89,15 @@ import { getImageURL } from "@/utils/zincutils";
 export default defineComponent({
   name: "AppSettings",
   components: {
-    AppPageHeader,
+    OPageHeader,
     ConstrainedPage,
-    PageLayout,
+    OPageLayout,
     SectionRail,
   },
   setup() {
     const { t } = useI18n();
     const store = useStore();
+    const { isDark } = useTheme();
     const router: any = useRouter();
     const route = useRoute();
 
@@ -184,7 +189,7 @@ export default defineComponent({
 
     const regexIcon = computed(() =>
       getImageURL(
-        store.state.theme === "dark"
+        isDark.value
           ? "images/regex_pattern/regex_icon_dark.svg"
           : "images/regex_pattern/regex_icon_light.svg",
       ),
diff --git a/web/src/components/settings/settingsIndex.spec.ts b/web/src/components/settings/settingsIndex.spec.ts
index 9cf8be9184..05ad221fb2 100644
--- a/web/src/components/settings/settingsIndex.spec.ts
+++ b/web/src/components/settings/settingsIndex.spec.ts
@@ -145,11 +145,11 @@ describe("SettingsIndex.vue", () => {
         },
         stubs: {
           "router-view": true,
-          PageLayout: {
+          OPageLayout: {
             template: '<div><slot name="sidebar" /><slot /></div>',
           },
           SectionRail: true,
-          AppPageHeader: true,
+          OPageHeader: true,
           ConstrainedPage: {
             template: "<div><slot /></div>",
           },
diff --git a/web/src/components/shared/HomeViewSkeleton.spec.ts b/web/src/components/shared/HomeViewSkeleton.spec.ts
index bea8c974da..560a142684 100644
--- a/web/src/components/shared/HomeViewSkeleton.spec.ts
+++ b/web/src/components/shared/HomeViewSkeleton.spec.ts
@@ -17,7 +17,7 @@ import { describe, it, expect, beforeEach } from "vitest";
 import { mount } from "@vue/test-utils";
 import HomeViewSkeleton from "./HomeViewSkeleton.vue";
 import { createStore } from "vuex";
-import SkeletonBox from "./SkeletonBox.vue";
+import OSkeleton from "@/lib/feedback/Skeleton/OSkeleton.vue";
 
 
 describe("HomeViewSkeleton", () => {
@@ -36,7 +36,7 @@ describe("HomeViewSkeleton", () => {
       global: {
         plugins: [store],
         stubs: {
-          SkeletonBox: true,
+          OSkeleton: true,
         },
       },
     });
@@ -49,15 +49,15 @@ describe("HomeViewSkeleton", () => {
       global: {
         plugins: [store],
         stubs: {
-          SkeletonBox: true,
+          OSkeleton: true,
         },
       },
     });
 
-    const featureCard = wrapper.find('[data-test="home-view-skeleton-streams-container"]');
-    expect(featureCard.exists()).toBe(true);
-    const firstChart = wrapper.find(".first-chart-container");
-    expect(firstChart.classes()).toContain("[--tile-bg:#ffffff]");
+    const streamsHeader = wrapper.find('[data-test="home-view-skeleton-streams-header"]');
+    expect(streamsHeader.exists()).toBe(true);
+    const firstChart = wrapper.findAll('[data-test="home-view-skeleton-chart"]')[0];
+    expect(firstChart.classes()).toContain("bg-card-glass-bg");
   });
 
   it("should render with dark theme", () => {
@@ -71,15 +71,16 @@ describe("HomeViewSkeleton", () => {
       global: {
         plugins: [darkStore],
         stubs: {
-          SkeletonBox: true,
+          OSkeleton: true,
         },
       },
     });
 
-    const featureCard = wrapper.find('[data-test="home-view-skeleton-streams-container"]');
-    expect(featureCard.exists()).toBe(true);
-    const firstChart = wrapper.find(".first-chart-container");
-    expect(firstChart.classes()).toContain("[--tile-bg:#2b2c2d]");
+    const streamsHeader = wrapper.find('[data-test="home-view-skeleton-streams-header"]');
+    expect(streamsHeader.exists()).toBe(true);
+    const firstChart = wrapper.findAll('[data-test="home-view-skeleton-chart"]')[0];
+    // Glass surface uses a single semantic token; class is theme-independent now.
+    expect(firstChart.classes()).toContain("bg-card-glass-bg");
   });
 
   it("should render streams header", () => {
@@ -87,7 +88,7 @@ describe("HomeViewSkeleton", () => {
       global: {
         plugins: [store],
         stubs: {
-          SkeletonBox: true,
+          OSkeleton: true,
         },
       },
     });
@@ -101,15 +102,12 @@ describe("HomeViewSkeleton", () => {
       global: {
         plugins: [store],
         stubs: {
-          SkeletonBox: true,
+          OSkeleton: true,
         },
       },
     });
 
-    const tilesGrid = wrapper.find(".tiles-grid");
-    expect(tilesGrid.exists()).toBe(true);
-
-    const tiles = tilesGrid.findAll('[data-test="home-view-skeleton-tile"]');
+    const tiles = wrapper.findAll('[data-test="home-view-skeleton-tile"]');
     expect(tiles).toHaveLength(5);
   });
 
@@ -118,15 +116,18 @@ describe("HomeViewSkeleton", () => {
       global: {
         plugins: [store],
         stubs: {
-          SkeletonBox: true,
+          OSkeleton: true,
         },
       },
     });
 
     const tiles = wrapper.findAll('[data-test="home-view-skeleton-tile"]');
+    expect(tiles).toHaveLength(5);
     tiles.forEach((tile) => {
-      const tileContent = tile.find(".tile-content");
-      expect(tileContent.exists()).toBe(true);
+      // Each tile is a vertical flex column carrying its skeleton placeholders.
+      expect(tile.classes()).toContain("flex");
+      expect(tile.classes()).toContain("flex-col");
+      expect(tile.findAll("o-skeleton-stub").length).toBe(3);
     });
   });
 
@@ -135,41 +136,42 @@ describe("HomeViewSkeleton", () => {
       global: {
         plugins: [store],
         stubs: {
-          SkeletonBox: true,
+          OSkeleton: true,
         },
       },
     });
 
-    const chartsContainer = wrapper.find(".charts-main-container");
-    expect(chartsContainer.exists()).toBe(true);
+    const charts = wrapper.findAll('[data-test="home-view-skeleton-chart"]');
+    expect(charts).toHaveLength(2);
   });
 
-  it("should render functions and dashboards column", () => {
+  it("should render resources rail column", () => {
     const wrapper = mount(HomeViewSkeleton, {
       global: {
         plugins: [store],
         stubs: {
-          SkeletonBox: true,
+          OSkeleton: true,
         },
       },
     });
 
-    const functionsColumn = wrapper.find(".functions-dashboards-column");
-    expect(functionsColumn.exists()).toBe(true);
+    const rail = wrapper.find('[data-test="home-view-skeleton-rail"]');
+    expect(rail.exists()).toBe(true);
+    expect(rail.classes()).toContain("bg-card-glass-bg");
   });
 
-  it("should render two tile wrappers in functions-dashboards column", () => {
+  it("should render two chart cards in the main region", () => {
     const wrapper = mount(HomeViewSkeleton, {
       global: {
         plugins: [store],
         stubs: {
-          SkeletonBox: true,
+          OSkeleton: true,
         },
       },
     });
 
-    const tileWrappers = wrapper.findAll(".tile-wrapper");
-    expect(tileWrappers.length).toBeGreaterThanOrEqual(2);
+    const chartCards = wrapper.findAll('[data-test="home-view-skeleton-chart"]');
+    expect(chartCards).toHaveLength(2);
   });
 
   it("should render first chart container", () => {
@@ -177,12 +179,12 @@ describe("HomeViewSkeleton", () => {
       global: {
         plugins: [store],
         stubs: {
-          SkeletonBox: true,
+          OSkeleton: true,
         },
       },
     });
 
-    const firstChart = wrapper.find(".first-chart-container");
+    const firstChart = wrapper.findAll('[data-test="home-view-skeleton-chart"]')[0];
     expect(firstChart.exists()).toBe(true);
   });
 
@@ -191,26 +193,26 @@ describe("HomeViewSkeleton", () => {
       global: {
         plugins: [store],
         stubs: {
-          SkeletonBox: true,
+          OSkeleton: true,
         },
       },
     });
 
-    const secondChart = wrapper.find(".second-chart-container");
+    const secondChart = wrapper.findAll('[data-test="home-view-skeleton-chart"]')[1];
     expect(secondChart.exists()).toBe(true);
   });
 
-  it("should render SkeletonBox components", () => {
+  it("should render OSkeleton components", () => {
     const wrapper = mount(HomeViewSkeleton, {
       global: {
         plugins: [store],
         components: {
-          SkeletonBox,
+          OSkeleton,
         },
       },
     });
 
-    const skeletonBoxes = wrapper.findAllComponents(SkeletonBox);
+    const skeletonBoxes = wrapper.findAllComponents(OSkeleton);
     expect(skeletonBoxes.length).toBeGreaterThan(0);
   });
 
@@ -219,30 +221,34 @@ describe("HomeViewSkeleton", () => {
       global: {
         plugins: [store],
         stubs: {
-          SkeletonBox: true,
+          OSkeleton: true,
         },
       },
     });
 
-    const firstChart = wrapper.find(".first-chart-container");
-    const secondChart = wrapper.find(".second-chart-container");
+    const charts = wrapper.findAll('[data-test="home-view-skeleton-chart"]');
+    expect(charts).toHaveLength(2);
 
-    expect(firstChart.classes()).toContain("[--tile-bg:#ffffff]");
-    expect(secondChart.classes()).toContain("[--tile-bg:#ffffff]");
+    expect(charts[0].classes()).toContain("bg-card-glass-bg");
+    expect(charts[1].classes()).toContain("bg-card-glass-bg");
   });
 
-  it("should render details container in chart sections", () => {
+  it("should render skeleton placeholders in each chart section", () => {
     const wrapper = mount(HomeViewSkeleton, {
       global: {
         plugins: [store],
         stubs: {
-          SkeletonBox: true,
+          OSkeleton: true,
         },
       },
     });
 
-    const detailsContainers = wrapper.findAll(".details-container");
-    expect(detailsContainers.length).toBeGreaterThanOrEqual(2);
+    const charts = wrapper.findAll('[data-test="home-view-skeleton-chart"]');
+    expect(charts).toHaveLength(2);
+    charts.forEach((chart) => {
+      // Header (3), stats row (4) and chart area (1) => 8 skeleton stubs each.
+      expect(chart.findAll("o-skeleton-stub").length).toBe(8);
+    });
   });
 
   it("should have correct structure for responsive layout", () => {
@@ -250,17 +256,16 @@ describe("HomeViewSkeleton", () => {
       global: {
         plugins: [store],
         stubs: {
-          SkeletonBox: true,
+          OSkeleton: true,
         },
       },
     });
 
-    // The skeleton intentionally has NO outer card-container border: it must
-    // match the loaded UsageTab content (which is borderless), otherwise a
-    // border flashes only while loading and disappears once data arrives.
-    expect(wrapper.find(".card-container").exists()).toBe(false);
+    // The skeleton mirrors the loaded UsageTab: KPI tiles, the resources rail
+    // and both chart cards all sit on the card-glass surface.
+    expect(wrapper.find(".bg-card-glass-bg").exists()).toBe(true);
 
-    const chartsContainer = wrapper.find(".charts-main-container");
-    expect(chartsContainer.exists()).toBe(true);
+    const charts = wrapper.findAll('[data-test="home-view-skeleton-chart"]');
+    expect(charts).toHaveLength(2);
   });
 });
diff --git a/web/src/components/shared/HomeViewSkeleton.vue b/web/src/components/shared/HomeViewSkeleton.vue
index d319823af0..82a8285afa 100644
--- a/web/src/components/shared/HomeViewSkeleton.vue
+++ b/web/src/components/shared/HomeViewSkeleton.vue
@@ -1,210 +1,90 @@
-<template>
-  <!-- No card-container: the loaded UsageTab content has no outer border, so the
-       skeleton must not add one (otherwise a top/outer border flashes only while
-       loading and disappears once data arrives). -->
+<template>
+  <!-- Mirrors the loaded UsageTab layout 1:1 so nothing shifts when data lands:
+       Streams header → KPI tile strip → resources rail + two chart cards. No
+       outer card-container (the loaded content has none either). -->
   <div
-    class="home-view-skeleton w-full px-[0.625rem] py-[0.625rem]"
-    style="display: flex; flex-direction: column; height: calc(100vh - 52px)"
+    class="home-view-skeleton w-full h-full flex flex-col px-page-edge pt-2 pb-1 overflow-hidden"
   >
-    <!-- 1st section - Streams container -->
-    <div
-      data-test="home-view-skeleton-streams-container"
-      class="feature-card bg-(--tile-bg) border-[0.0625rem] border-(--o2-border-color) rounded-lg p-4"
-    >
-      <!-- Header -->
-      <div data-test="home-view-skeleton-streams-header" class="flex justify-between items-center mb-4">
-        <div class="flex items-center gap-2">
-          <SkeletonBox variant="avatar" width="40px" height="40px" />
-          <SkeletonBox variant="title" width="100px" />
-        </div>
-        <SkeletonBox variant="button" width="40px" height="40px" />
+    <!-- Streams section header -->
+    <div data-test="home-view-skeleton-streams-header" class="flex items-center justify-between mb-2">
+      <div class="flex items-center gap-2">
+        <OSkeleton class="w-8 h-8" />
+        <OSkeleton type="text" class="w-24 h-5" />
       </div>
+      <OSkeleton class="w-8 h-8" />
+    </div>
 
-      <!-- Tiles using same grid as HomeView -->
-      <div class="tiles-grid grid gap-4" style="grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))">
-        <div v-for="n in 5" :key="n" data-test="home-view-skeleton-tile" class="rounded-[0.325rem] border-[0.0625rem] border-(--o2-border-color)">
-          <div
-            class="tile-content h-full p-4 rounded-lg gap-2 rounded text-center flex flex-col justify-between bg-(--tile-bg) border border-(--tile-border) text-(--text-primary)"
-            :class="
-              store.state.theme === 'dark'
-                ? '[--tile-bg:#2b2c2d] [--tile-border:#444444] [--text-primary:#cccfd1]'
-                : '[--tile-bg:#ffffff] [--tile-border:#e7eaee] [--text-primary:#2e3133]'
-            "
-          >
-            <!-- Top Section (60%) -->
-            <div class="flex flex-col justify-between">
-              <!-- Title row -->
-              <div class="flex justify-between">
-                <SkeletonBox variant="text" width="100px" height="20px" />
-                <SkeletonBox variant="avatar" width="40px" height="40px" />
-              </div>
-            </div>
-
-            <!-- Bottom Section (40%) -->
-            <div class="data-to-display flex items-end text-[28px] font-semibold leading-8">
-              <SkeletonBox variant="title" width="80px" height="32px" />
-            </div>
-          </div>
+    <!-- KPI tile strip (mirrors KpiCardRow / KpiCard) -->
+    <div class="grid gap-2.5 mb-4 grid-cols-[repeat(auto-fit,minmax(12rem,1fr))]">
+      <div
+        v-for="n in 5"
+        :key="`kpi-${n}`"
+        data-test="home-view-skeleton-tile"
+        class="bg-card-glass-bg rounded-default border border-border-default px-3.5 py-2.5 flex flex-col gap-1"
+      >
+        <div class="flex items-center justify-between gap-2 mb-1">
+          <OSkeleton type="text" class="w-20 h-4" />
+          <OSkeleton class="w-10 h-10" />
         </div>
+        <OSkeleton type="text" class="w-24 h-7" />
       </div>
     </div>
 
-    <!-- 2nd section - functions and dashboards tiles + 2 charts -->
-    <div class="charts-main-container grid gap-4 mt-4 items-stretch" style="grid-template-columns: minmax(min-content, max-content) 1fr 2fr">
-      <!-- Functions and Dashboards column -->
-      <div class="functions-dashboards-column flex flex-col gap-4 w-full">
-        <!-- Functions tile -->
-        <div class="tile-wrapper flex-1 flex min-w-0 w-full">
-          <div
-            class="feature-card bg-(--tile-bg) border-[0.0625rem] border-(--tile-border) rounded-lg p-4 w-full rounded text-center flex flex-col justify-between text-(--text-primary)"
-            :class="
-              store.state.theme === 'dark'
-                ? '[--tile-bg:#2b2c2d] [--tile-border:#444444] [--text-primary:#cccfd1]'
-                : '[--tile-bg:#ffffff] [--tile-border:#e7eaee] [--text-primary:#2e3133]'
-            "
-          >
-            <div class="flex flex-col justify-between">
-              <div
-                class="flex items-center gap-2 flex-nowrap w-full"
-              >
-                <SkeletonBox variant="avatar" width="40px" height="40px" />
-                <SkeletonBox variant="text" width="100px" height="20px" />
-                <SkeletonBox variant="button" width="40px" height="40px" />
-              </div>
-            </div>
-            <div class="data-to-display flex items-end text-[28px] font-semibold leading-8">
-              <SkeletonBox variant="title" width="60px" height="32px" />
-            </div>
-          </div>
+    <!-- Main region: resources rail + two status-chart cards -->
+    <div class="grid grid-cols-1 lg:grid-cols-[16rem_minmax(0,1fr)_minmax(0,1fr)] gap-3 flex-1 min-h-0">
+      <!-- Resources rail -->
+      <div
+        data-test="home-view-skeleton-rail"
+        class="rounded-default p-4 bg-card-glass-bg border border-card-glass-border flex flex-col"
+      >
+        <OSkeleton type="text" class="w-24 h-4 mb-2" />
+        <div v-for="n in 2" :key="`res-${n}`" class="flex items-center gap-2.5 py-2">
+          <OSkeleton class="w-8 h-8" />
+          <OSkeleton type="text" class="flex-1 h-4" />
+          <OSkeleton type="text" class="w-6 h-4" />
         </div>
-
-        <!-- Dashboards tile -->
-        <div class="tile-wrapper flex-1 flex min-w-0 w-full">
-          <div
-            class="feature-card bg-(--tile-bg) border-[0.0625rem] border-(--tile-border) rounded-lg p-4 w-full rounded text-center flex flex-col justify-between text-(--text-primary)"
-            :class="
-              store.state.theme === 'dark'
-                ? '[--tile-bg:#2b2c2d] [--tile-border:#444444] [--text-primary:#cccfd1]'
-                : '[--tile-bg:#ffffff] [--tile-border:#e7eaee] [--text-primary:#2e3133]'
-            "
-          >
-            <div class="flex flex-col justify-between">
-              <div
-                class="flex items-center gap-2 flex-nowrap w-full"
-              >
-                <SkeletonBox variant="avatar" width="40px" height="40px" />
-                <SkeletonBox variant="text" width="100px" height="20px" />
-                <SkeletonBox variant="button" width="40px" height="40px" />
-              </div>
-            </div>
-            <div class="data-to-display flex items-end text-[28px] font-semibold leading-8">
-              <SkeletonBox variant="title" width="60px" height="32px" />
-            </div>
-          </div>
+        <div class="h-px bg-border-default my-3"></div>
+        <OSkeleton type="text" class="w-16 h-3.5 mb-2" />
+        <div v-for="n in 4" :key="`exp-${n}`" class="flex items-center gap-2.5 py-2">
+          <OSkeleton class="w-8 h-8" />
+          <OSkeleton type="text" class="flex-1 h-4" />
         </div>
       </div>
 
-      <!-- Alerts Chart -->
+      <!-- Alerts + Pipelines chart cards (identical shells) -->
       <div
-        class="feature-card first-chart-container bg-(--tile-bg) border-[0.0625rem] border-(--tile-border) rounded-lg rounded p-4"
-        :class="
-          store.state.theme === 'dark'
-            ? '[--tile-bg:#2b2c2d] [--tile-border:#444444]'
-            : '[--tile-bg:#ffffff] [--tile-border:#e7eaee]'
-        "
+        v-for="n in 2"
+        :key="`chart-${n}`"
+        data-test="home-view-skeleton-chart"
+        class="rounded-default p-4 bg-card-glass-bg border border-card-glass-border flex flex-col min-h-0"
       >
-        <div class="details-container flex flex-col gap-3 mb-4">
-          <!-- Header -->
-          <div class="flex justify-between items-center">
-            <span class="text-title flex items-center gap-2 text-lg font-medium leading-5">
-              <SkeletonBox variant="avatar" width="40px" height="40px" />
-              <SkeletonBox variant="text" width="120px" height="20px" />
-            </span>
-            <SkeletonBox variant="button" width="40px" height="40px" />
+        <!-- Header -->
+        <div class="flex justify-between items-center">
+          <span class="flex items-center gap-2">
+            <OSkeleton class="w-10 h-10" />
+            <OSkeleton type="text" class="w-24 h-5" />
+          </span>
+          <OSkeleton class="w-8 h-8" />
+        </div>
+        <!-- Stats row -->
+        <div class="flex pt-3 gap-4">
+          <div class="flex flex-col gap-1">
+            <OSkeleton type="text" class="w-16 h-3.5" />
+            <OSkeleton type="text" class="w-8 h-5" />
           </div>
-          <!-- Stats row -->
-          <div class="flex pt-2" style="gap: 16px">
-            <div class="flex flex-col">
-              <SkeletonBox
-                variant="text"
-                width="100px"
-                height="14px"
-                class="mb-1"
-              />
-              <SkeletonBox variant="text" width="40px" height="20px" />
-            </div>
-            <OSeparator vertical />
-            <div class="flex flex-col">
-              <SkeletonBox
-                variant="text"
-                width="80px"
-                height="14px"
-                class="mb-1"
-              />
-              <SkeletonBox variant="text" width="40px" height="20px" />
-            </div>
+          <OSeparator vertical />
+          <div class="flex flex-col gap-1">
+            <OSkeleton type="text" class="w-16 h-3.5" />
+            <OSkeleton type="text" class="w-8 h-5" />
           </div>
         </div>
         <!-- Chart area -->
-        <div
-          class="custom-first-chart my-auto xl:min-h-[200px] h-[calc(100vh-500px)] md:h-[calc(100vh-500px)] lg:h-[calc(100vh-550px)] xl:h-[calc(100vh-645px)] w-full"
-        >
-          <div
-            class="skeleton-box bg-[var(--color-skeleton-base,#f5f5f5)] relative overflow-hidden rounded-lg"
-            style="width: 100%; height: 100%"
-          ></div>
-        </div>
-      </div>
-
-      <!-- Pipelines Chart -->
-      <div
-        class="feature-card second-chart-container bg-(--tile-bg) border-[0.0625rem] border-(--tile-border) rounded-lg rounded p-4"
-        :class="
-          store.state.theme === 'dark'
-            ? '[--tile-bg:#2b2c2d] [--tile-border:#444444]'
-            : '[--tile-bg:#ffffff] [--tile-border:#e7eaee]'
-        "
-      >
-        <div class="details-container flex flex-col gap-3 mb-4">
-          <!-- Header -->
-          <div class="flex justify-between items-center">
-            <span class="text-title flex items-center gap-2 text-lg font-medium leading-5">
-              <SkeletonBox variant="avatar" width="40px" height="40px" />
-              <SkeletonBox variant="text" width="140px" height="20px" />
-            </span>
-            <SkeletonBox variant="button" width="40px" height="40px" />
-          </div>
-          <!-- Stats row -->
-          <div class="flex pt-2" style="gap: 16px">
-            <div class="flex flex-col">
-              <SkeletonBox
-                variant="text"
-                width="120px"
-                height="14px"
-                class="mb-1"
-              />
-              <SkeletonBox variant="text" width="40px" height="20px" />
-            </div>
-            <OSeparator vertical />
-            <div class="flex flex-col">
-              <SkeletonBox
-                variant="text"
-                width="100px"
-                height="14px"
-                class="mb-1"
-              />
-              <SkeletonBox variant="text" width="40px" height="20px" />
-            </div>
-          </div>
-        </div>
-        <!-- Chart area -->
-        <div
-          class="custom-second-chart my-auto xl:min-h-[200px] h-[calc(100vh-500px)] md:h-[calc(100vh-500px)] lg:h-[calc(100vh-550px)] xl:h-[calc(100vh-645px)]"
-        >
-          <div
-            class="skeleton-box bg-[var(--color-skeleton-base,#f5f5f5)] relative overflow-hidden rounded-lg"
-            style="width: 100%; height: 100%"
-          ></div>
+        <div class="flex-1 min-h-50 w-full mt-3">
+          <!-- custom-radius, not the boolean radius prop, is what actually lands
+               lg corners here: OSkeleton type="text" base `rounded-default` beats
+               `rounded-default` on Tailwind's alphabetical emit order, while this
+               inline binding beats both. -->
+          <OSkeleton type="text" custom-radius="var(--radius-surface)" class="w-full h-full" />
         </div>
       </div>
     </div>
@@ -212,56 +92,6 @@
 </template>
 
 <script setup lang="ts">
-import { useStore } from "vuex";
-import SkeletonBox from "./SkeletonBox.vue";
+import OSkeleton from "@/lib/feedback/Skeleton/OSkeleton.vue";
 import OSeparator from "@/lib/core/Separator/OSeparator.vue";
-
-const store = useStore();
 </script>
-
-<style>
-/* Responsive overrides for charts-main-container */
-@media (max-width: 1280px) {
-  .charts-main-container {
-    grid-template-columns: 1fr;
-    grid-template-rows: auto auto auto;
-  }
-}
-
-/* Responsive overrides for functions-dashboards-column */
-@media (max-width: 1280px) {
-  .functions-dashboards-column {
-    flex-direction: row;
-  }
-}
-
-@media (max-width: 768px) {
-  .functions-dashboards-column {
-    flex-direction: column;
-  }
-}
-
-/* Skeleton base/shimmer theming for the child SkeletonBox component.
-   The base ::after overlay + keyframes live in SkeletonBox.vue; these only
-   override the surface colour + dim the shimmer per theme, scoped to this
-   component so they don't leak to other SkeletonBox usages. The explicit
-   colours guard against this legacy view loading before the token root. */
-.home-view-skeleton .skeleton-box {
-  background-color: #f5f5f5;
-}
-
-.dark .home-view-skeleton .skeleton-box {
-  background-color: #262626;
-}
-
-.dark .home-view-skeleton .skeleton-box::after {
-  background: linear-gradient(
-    90deg,
-    transparent                   0%,
-    transparent                  30%,
-    rgba(255, 255, 255, 0.07)    50%,
-    transparent                  70%,
-    transparent                 100%
-  );
-}
-</style>
diff --git a/web/src/components/shared/SkeletonBox.spec.ts b/web/src/components/shared/SkeletonBox.spec.ts
deleted file mode 100644
index 0684e1894b..0000000000
--- a/web/src/components/shared/SkeletonBox.spec.ts
+++ /dev/null
@@ -1,337 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { describe, it, expect, beforeEach } from "vitest";
-import { mount } from "@vue/test-utils";
-import SkeletonBox from "./SkeletonBox.vue";
-import { createStore } from "vuex";
-
-
-describe("SkeletonBox", () => {
-  let store: any;
-
-  beforeEach(() => {
-    store = createStore({
-      state: {
-        theme: "light",
-      },
-    });
-  });
-
-  it("should render the component", () => {
-    const wrapper = mount(SkeletonBox, {
-      global: {
-        plugins: [store],
-      },
-    });
-
-    expect(wrapper.exists()).toBe(true);
-    expect(wrapper.find(".skeleton-box").exists()).toBe(true);
-  });
-
-  it("should apply default width and height", () => {
-    const wrapper = mount(SkeletonBox, {
-      global: {
-        plugins: [store],
-      },
-    });
-
-    const skeletonBox = wrapper.find(".skeleton-box");
-    expect(skeletonBox.element.style.width).toBe("100px");
-    expect(skeletonBox.element.style.height).toBe("16px");
-  });
-
-  it("should accept custom width and height", () => {
-    const wrapper = mount(SkeletonBox, {
-      props: {
-        width: "200px",
-        height: "50px",
-      },
-      global: {
-        plugins: [store],
-      },
-    });
-
-    const skeletonBox = wrapper.find(".skeleton-box");
-    expect(skeletonBox.element.style.width).toBe("200px");
-    expect(skeletonBox.element.style.height).toBe("50px");
-  });
-
-  it("should apply text variant class", () => {
-    const wrapper = mount(SkeletonBox, {
-      props: {
-        variant: "text",
-      },
-      global: {
-        plugins: [store],
-      },
-    });
-
-    expect(wrapper.find(".skeleton-box").classes()).toContain("rounded-[3px]");
-  });
-
-  it("should apply title variant class", () => {
-    const wrapper = mount(SkeletonBox, {
-      props: {
-        variant: "title",
-      },
-      global: {
-        plugins: [store],
-      },
-    });
-
-    expect(wrapper.find(".skeleton-box").classes()).toContain("rounded");
-  });
-
-  it("should apply button variant class", () => {
-    const wrapper = mount(SkeletonBox, {
-      props: {
-        variant: "button",
-      },
-      global: {
-        plugins: [store],
-      },
-    });
-
-    expect(wrapper.find(".skeleton-box").classes()).toContain("rounded-md");
-  });
-
-  it("should apply avatar variant class", () => {
-    const wrapper = mount(SkeletonBox, {
-      props: {
-        variant: "avatar",
-      },
-      global: {
-        plugins: [store],
-      },
-    });
-
-    expect(wrapper.find(".skeleton-box").classes()).toContain("rounded-full");
-  });
-
-  it("should apply image variant class", () => {
-    const wrapper = mount(SkeletonBox, {
-      props: {
-        variant: "image",
-      },
-      global: {
-        plugins: [store],
-      },
-    });
-
-    expect(wrapper.find(".skeleton-box").classes()).toContain("rounded-lg");
-  });
-
-  it("should apply rounded class when rounded prop is true", () => {
-    const wrapper = mount(SkeletonBox, {
-      props: {
-        rounded: true,
-      },
-      global: {
-        plugins: [store],
-      },
-    });
-
-    expect(wrapper.find(".skeleton-box").classes()).toContain("rounded-lg");
-  });
-
-  it("should apply circle class when circle prop is true", () => {
-    const wrapper = mount(SkeletonBox, {
-      props: {
-        circle: true,
-      },
-      global: {
-        plugins: [store],
-      },
-    });
-
-    const skeletonBox = wrapper.find(".skeleton-box");
-    expect(skeletonBox.classes()).toContain("rounded-full");
-    expect(skeletonBox.classes()).toContain("aspect-square");
-  });
-
-  it("should apply custom border radius", () => {
-    const wrapper = mount(SkeletonBox, {
-      props: {
-        customRadius: "20px",
-      },
-      global: {
-        plugins: [store],
-      },
-    });
-
-    const skeletonBox = wrapper.find(".skeleton-box");
-    expect(skeletonBox.element.style.borderRadius).toBe("20px");
-  });
-
-  it("should use default dimensions for text variant", () => {
-    const wrapper = mount(SkeletonBox, {
-      props: {
-        variant: "text",
-      },
-      global: {
-        plugins: [store],
-      },
-    });
-
-    const element = wrapper.element as HTMLElement;
-    // Since width/height are not explicitly provided, it should use computed defaults
-    expect(wrapper.props("variant")).toBe("text");
-  });
-
-  it("should use default dimensions for title variant", () => {
-    const wrapper = mount(SkeletonBox, {
-      props: {
-        variant: "title",
-      },
-      global: {
-        plugins: [store],
-      },
-    });
-
-    expect(wrapper.props("variant")).toBe("title");
-  });
-
-  it("should use default dimensions for button variant", () => {
-    const wrapper = mount(SkeletonBox, {
-      props: {
-        variant: "button",
-      },
-      global: {
-        plugins: [store],
-      },
-    });
-
-    expect(wrapper.props("variant")).toBe("button");
-  });
-
-  it("should use default dimensions for avatar variant", () => {
-    const wrapper = mount(SkeletonBox, {
-      props: {
-        variant: "avatar",
-      },
-      global: {
-        plugins: [store],
-      },
-    });
-
-    expect(wrapper.props("variant")).toBe("avatar");
-  });
-
-  it("should use default dimensions for image variant", () => {
-    const wrapper = mount(SkeletonBox, {
-      props: {
-        variant: "image",
-      },
-      global: {
-        plugins: [store],
-      },
-    });
-
-    expect(wrapper.props("variant")).toBe("image");
-  });
-
-  it("should accept lines prop for text variant", () => {
-    const wrapper = mount(SkeletonBox, {
-      props: {
-        variant: "text",
-        lines: 3,
-      },
-      global: {
-        plugins: [store],
-      },
-    });
-
-    expect(wrapper.props("lines")).toBe(3);
-  });
-
-  it("should combine multiple classes", () => {
-    const wrapper = mount(SkeletonBox, {
-      props: {
-        variant: "button",
-        rounded: true,
-        circle: true,
-      },
-      global: {
-        plugins: [store],
-      },
-    });
-
-    const skeletonBox = wrapper.find(".skeleton-box");
-    expect(skeletonBox.classes()).toContain("rounded-md");
-    expect(skeletonBox.classes()).toContain("rounded-lg");
-    expect(skeletonBox.classes()).toContain("rounded-full");
-    expect(skeletonBox.classes()).toContain("aspect-square");
-  });
-
-  it("should have skeleton-wave animation class", () => {
-    const wrapper = mount(SkeletonBox, {
-      global: {
-        plugins: [store],
-      },
-    });
-
-    const skeletonBox = wrapper.find(".skeleton-box");
-    expect(skeletonBox.exists()).toBe(true);
-    // The animation is applied via CSS, just verify the element exists
-  });
-
-  it("should override default width for title variant", () => {
-    const wrapper = mount(SkeletonBox, {
-      props: {
-        variant: "title",
-        width: "300px",
-      },
-      global: {
-        plugins: [store],
-      },
-    });
-
-    const skeletonBox = wrapper.find(".skeleton-box");
-    expect(skeletonBox.element.style.width).toBe("300px");
-  });
-
-  it("should override default height for button variant", () => {
-    const wrapper = mount(SkeletonBox, {
-      props: {
-        variant: "button",
-        height: "40px",
-      },
-      global: {
-        plugins: [store],
-      },
-    });
-
-    const skeletonBox = wrapper.find(".skeleton-box");
-    expect(skeletonBox.element.style.height).toBe("40px");
-  });
-
-  it("should work with custom variant", () => {
-    const wrapper = mount(SkeletonBox, {
-      props: {
-        variant: "custom",
-        width: "150px",
-        height: "75px",
-      },
-      global: {
-        plugins: [store],
-      },
-    });
-
-    const skeletonBox = wrapper.find(".skeleton-box");
-    expect(skeletonBox.element.style.width).toBe("150px");
-    expect(skeletonBox.element.style.height).toBe("75px");
-  });
-});
diff --git a/web/src/components/shared/SkeletonBox.vue b/web/src/components/shared/SkeletonBox.vue
index 35fd693056..6428fc8842 100644
--- a/web/src/components/shared/SkeletonBox.vue
+++ b/web/src/components/shared/SkeletonBox.vue
@@ -1,22 +1,18 @@
 <template>
   <div
-    class="skeleton-box bg-skeleton-base relative overflow-hidden rounded"
-    :class="[
-      variantClass,
-      rounded && 'rounded-lg',
-      circle && 'rounded-full aspect-square'
-    ]"
+    class="skeleton-box relative overflow-hidden inline-block [background:linear-gradient(90deg,var(--color-skeleton-base)_0%,var(--color-skeleton-highlight)_50%,var(--color-skeleton-base)_100%)] [background-size:200%_100%] [animation:o2-skel-shimmer_1.5s_ease-in-out_infinite]"
+    :class="shapeClass"
     :style="{
       width: width,
       height: height,
       borderRadius: customRadius
     }"
+    aria-hidden="true"
   ></div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useStore } from 'vuex'
 
 interface Props {
   // Size props
@@ -44,77 +40,18 @@ const props = withDefaults(defineProps<Props>(), {
   lines: 1
 })
 
-const store = useStore()
-
-const variantClass = computed(() => {
+// Corner radius resolves from a single source: an explicit circle/rounded prop
+// wins, otherwise the variant preset maps onto the sanctioned radius scale.
+const shapeClass = computed(() => {
+  if (props.circle) return 'rounded-full aspect-square'
+  if (props.rounded) return 'rounded-surface'
   switch (props.variant) {
-    case 'text':    return 'rounded-[3px]'
-    case 'title':   return 'rounded'
-    case 'button':  return 'rounded-md'
-    case 'avatar':  return 'rounded-full'
-    case 'image':   return 'rounded-lg'
-    default:        return ''
-  }
-})
-
-// Computed styles based on variant
-const computedWidth = computed(() => {
-  switch (props.variant) {
-    case 'text':
-      return props.width
-    case 'title':
-      return props.width || '200px'
-    case 'button':
-      return props.width || '80px'
-    case 'avatar':
-      return props.width || '40px'
-    case 'image':
-      return props.width || '100px'
-    default:
-      return props.width
-  }
-})
-
-const computedHeight = computed(() => {
-  switch (props.variant) {
-    case 'text':
-      return props.height || '14px'
-    case 'title':
-      return props.height || '24px'
-    case 'button':
-      return props.height || '32px'
-    case 'avatar':
-      return props.height || '40px'
-    case 'image':
-      return props.height || '100px'
-    default:
-      return props.height
+    case 'text':   return 'rounded-default'
+    case 'title':  return 'rounded-default'
+    case 'button': return 'rounded-default'
+    case 'avatar': return 'rounded-full'
+    case 'image':  return 'rounded-surface'
+    default:       return 'rounded-default'
   }
 })
 </script>
-
-<style>
-/* Flat base colour + sliding ::after overlay.
-   The base is always solid (no moving gradient), the shimmer is a separate
-   translucent gloss that physically slides left→right via translateX.
-   ease-in-out on translateX is intentional — it mimics real light reflection. */
-.skeleton-box::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(
-    90deg,
-    transparent       0%,
-    transparent      30%,
-    var(--color-skeleton-shimmer, rgba(255, 255, 255, 0.8)) 50%,
-    transparent      70%,
-    transparent     100%
-  );
-  animation: skeleton-shimmer 1.8s ease-in-out infinite;
-}
-
-@keyframes skeleton-shimmer {
-  0%   { transform: translateX(-100%); }
-  100% { transform: translateX(100%); }
-}
-</style>
diff --git a/web/src/components/shared/filter/FilterCreatorPopup.schema.ts b/web/src/components/shared/filter/FilterCreatorPopup.schema.ts
deleted file mode 100644
index 7464720eca..0000000000
--- a/web/src/components/shared/filter/FilterCreatorPopup.schema.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// Validation schema for FilterCreatorPopup.vue — the shared field-filter popup.
-// Built via a factory so the required message stays i18n-driven (pass `t`).
-//
-// Restored from the BEFORE baseline:
-//   selectedOperator — `!!v || 'Field is required!'`
-//                    → z.string().min(1, t("validation.fieldRequired")).
-//
-// `selectedValues` is the checkbox-list value collected into the emit payload.
-// It has no validation rule, but under R1-strict it is still a form-owned field
-// (an OFormCheckboxGroup) → kept in the schema as an array with a `[]` default
-// (effectively optional on input).
-
-import { z } from "zod";
-
-export const makeFilterCreatorPopupSchema = (t: (_key: string) => string) =>
-  z.object({
-    selectedOperator: z.string().min(1, t("validation.fieldRequired")),
-    selectedValues: z.array(z.any()).default([]),
-  });
-
-export type FilterCreatorPopupForm = z.infer<
-  ReturnType<typeof makeFilterCreatorPopupSchema>
->;
diff --git a/web/src/components/shared/filter/FilterCreatorPopup.spec.ts b/web/src/components/shared/filter/FilterCreatorPopup.spec.ts
deleted file mode 100644
index 55a522834f..0000000000
--- a/web/src/components/shared/filter/FilterCreatorPopup.spec.ts
+++ /dev/null
@@ -1,256 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { describe, expect, it, afterEach, vi } from "vitest";
-import { mount, VueWrapper, flushPromises } from "@vue/test-utils";
-import { createI18n } from "vue-i18n";
-import FilterCreatorPopup from "./FilterCreatorPopup.vue";
-
-const mockI18n = createI18n({
-  locale: "en",
-  messages: {
-    en: {
-      filter: { operator: "Operator" },
-      common: { cancel: "Cancel", apply: "Apply" },
-    },
-  },
-});
-
-// Stub ONLY the ODialog overlay (so its body slot renders inline instead of
-// teleporting to document.body). The OForm + OForm* fields stay REAL so the
-// schema-validation wiring is exercised (playbook §5 / R22).
-const globalStubs = {
-  ODialog: {
-    name: "ODialog",
-    template:
-      '<div class="o-dialog"><slot name="header" /><slot /><slot name="footer" /></div>',
-    props: [
-      "open",
-      "size",
-      "title",
-      "formId",
-      "secondaryButtonLabel",
-      "primaryButtonLabel",
-    ],
-    emits: ["update:open", "click:primary", "click:secondary", "click:neutral"],
-  },
-};
-
-function mountComponent(props: Record<string, any> = {}) {
-  return mount(FilterCreatorPopup, {
-    global: {
-      plugins: [mockI18n],
-      stubs: globalStubs,
-    },
-    props: {
-      fieldName: "test_field",
-      fieldValues: ["value1", "value2", "value3"],
-      operators: [
-        { label: "equals", value: "=" },
-        { label: "not equals", value: "!=" },
-        { label: "contains", value: "LIKE" },
-      ],
-      defaultOperator: "=",
-      defaultValues: ["value1"],
-      ...props,
-    },
-  });
-}
-
-const getForm = (wrapper: VueWrapper) =>
-  (wrapper.findComponent({ name: "OForm" }).vm as any).form;
-
-const submit = async (wrapper: VueWrapper) => {
-  await getForm(wrapper).handleSubmit();
-  await flushPromises();
-};
-
-describe("FilterCreatorPopup", () => {
-  let wrapper: VueWrapper;
-
-  afterEach(() => {
-    wrapper?.unmount();
-    vi.clearAllMocks();
-  });
-
-  describe("initial render", () => {
-    it("should render without errors", () => {
-      wrapper = mountComponent();
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it("should display the field name as title", () => {
-      wrapper = mountComponent({ fieldName: "custom_field" });
-      const dialog = wrapper.findComponent({ name: "ODialog" });
-      expect(dialog.props("title")).toBe("custom_field");
-    });
-
-    it("should wire the dialog footer to the form via form-id", () => {
-      wrapper = mountComponent();
-      const dialog = wrapper.findComponent({ name: "ODialog" });
-      expect(dialog.props("formId")).toBe("filter-creator-popup-form");
-    });
-
-    it("should render the operator OFormSelect inside the real OForm", () => {
-      wrapper = mountComponent();
-      expect(wrapper.findComponent({ name: "OForm" }).exists()).toBe(true);
-      expect(
-        wrapper.find('[data-test="filter-creator-popup-operator-select"]').exists(),
-      ).toBe(true);
-    });
-
-    it("should display Values section label", () => {
-      wrapper = mountComponent();
-      expect(wrapper.text()).toContain("Values");
-    });
-
-    it("should render cancel and apply buttons", () => {
-      wrapper = mountComponent();
-      const dialog = wrapper.findComponent({ name: "ODialog" });
-      expect(dialog.props("secondaryButtonLabel")).toBe("Cancel");
-      expect(dialog.props("primaryButtonLabel")).toBe("Apply");
-    });
-  });
-
-  describe("field values display", () => {
-    it("should render a checkbox row for each fieldValue", () => {
-      wrapper = mountComponent({
-        fieldValues: ["a", "b", "c"],
-        defaultValues: [],
-      });
-      expect(
-        wrapper.findAll('[data-test^="filter-creator-popup-value-"]'),
-      ).toHaveLength(3);
-    });
-
-    it("should show No values present when fieldValues is empty", () => {
-      wrapper = mountComponent({ fieldValues: [] });
-      expect(wrapper.text()).toContain("No values present");
-    });
-
-    it("should show No values present when fieldValues is null", () => {
-      wrapper = mountComponent({ fieldValues: null });
-      expect(wrapper.text()).toContain("No values present");
-    });
-
-    it("should display each value as a label", () => {
-      wrapper = mountComponent({
-        fieldValues: ["option1", "option2"],
-        defaultValues: [],
-      });
-      expect(wrapper.text()).toContain("option1");
-      expect(wrapper.text()).toContain("option2");
-    });
-
-    it("should handle special characters in field values", () => {
-      const special = ["val@#$", "val with spaces", "val/slashes"];
-      wrapper = mountComponent({ fieldValues: special, defaultValues: [] });
-      special.forEach((v) => expect(wrapper.text()).toContain(v));
-    });
-  });
-
-  describe("OForm schema validation (real form)", () => {
-    it("emits apply with the validated payload on submit", async () => {
-      wrapper = mountComponent({
-        defaultOperator: "LIKE",
-        defaultValues: ["value1", "value2"],
-      });
-
-      await submit(wrapper);
-
-      expect(getForm(wrapper).state.isValid).toBe(true);
-      expect(wrapper.emitted("apply")).toBeTruthy();
-      expect(wrapper.emitted("apply")![0]).toEqual([
-        {
-          fieldName: "test_field",
-          selectedValues: ["value1", "value2"],
-          selectedOperator: "LIKE",
-        },
-      ]);
-    });
-
-    it("includes fieldName from props in emitted event", async () => {
-      wrapper = mountComponent({ fieldName: "my_custom_field" });
-      await submit(wrapper);
-      const emitted = wrapper.emitted("apply")![0][0] as any;
-      expect(emitted.fieldName).toBe("my_custom_field");
-    });
-
-    it("emits apply with empty selectedValues when none are selected", async () => {
-      wrapper = mountComponent({ defaultValues: [] });
-      await submit(wrapper);
-      const emitted = wrapper.emitted("apply")![0][0] as any;
-      expect(emitted.selectedValues).toEqual([]);
-    });
-
-    // The restored required rule: an empty operator must block submit and the
-    // schema (not a disabled button) is what gates it.
-    it("blocks submit + does NOT emit apply when operator is empty", async () => {
-      wrapper = mountComponent({ defaultOperator: "", defaultValues: [] });
-
-      await submit(wrapper);
-
-      expect(getForm(wrapper).state.isValid).toBe(false);
-      expect(wrapper.emitted("apply")).toBeFalsy();
-    });
-
-    it("collects a checkbox toggle into the emitted selectedValues", async () => {
-      wrapper = mountComponent({
-        fieldValues: ["value1", "value2"],
-        defaultOperator: "=",
-        defaultValues: [],
-      });
-
-      // Toggle the first value's checkbox (real OCheckbox inside the group).
-      await wrapper
-        .find('[data-test="filter-creator-popup-value-value1"] button[role="checkbox"]')
-        .trigger("click");
-
-      await submit(wrapper);
-
-      const emitted = wrapper.emitted("apply")![0][0] as any;
-      expect(emitted.selectedValues).toEqual(["value1"]);
-    });
-
-    it("does NOT close the dialog implicitly on apply (parent owns closing)", async () => {
-      wrapper = mountComponent();
-      await submit(wrapper);
-      expect((wrapper.vm as any).show).toBe(true);
-    });
-  });
-
-  describe("cancel", () => {
-    it("should close dialog when Cancel (secondary) is clicked", async () => {
-      wrapper = mountComponent();
-      expect((wrapper.vm as any).show).toBe(true);
-      const dialog = wrapper.findComponent({ name: "ODialog" });
-      await dialog.vm.$emit("click:secondary");
-      expect((wrapper.vm as any).show).toBe(false);
-      expect(wrapper.emitted("apply")).toBeFalsy();
-    });
-  });
-
-  describe("component structure", () => {
-    it("should have an ODialog as root", () => {
-      wrapper = mountComponent();
-      expect(wrapper.find(".o-dialog").exists()).toBe(true);
-    });
-
-    it("should handle empty operators array without error", () => {
-      wrapper = mountComponent({ operators: [] });
-      expect(wrapper.exists()).toBe(true);
-    });
-  });
-});
diff --git a/web/src/components/shared/filter/FilterCreatorPopup.vue b/web/src/components/shared/filter/FilterCreatorPopup.vue
deleted file mode 100644
index 9cf78dbc67..0000000000
--- a/web/src/components/shared/filter/FilterCreatorPopup.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<template>
-  <ODialog data-test="filter-creator-popup-dialog" v-model:open="show" size="sm" :title="fieldName"
-    form-id="filter-creator-popup-form"
-    :secondary-button-label="t('common.cancel')"
-    :primary-button-label="t('common.apply')"
-    @click:secondary="show = false"
-  >
-    <OForm
-      id="filter-creator-popup-form"
-      :schema="filterCreatorPopupSchema"
-      :default-values="filterCreatorDefaults"
-      @submit="applyFilter"
-    >
-      <div class="p-3 w-50 overflow-hidden">
-        <OCardSection class="p-0">
-          <OFormSelect
-            name="selectedOperator"
-            data-test="filter-creator-popup-operator-select"
-            :options="operators"
-            :label="t('filter.operator')"
-            required
-            class="py-2"
-          />
-        </OCardSection>
-        <OCardSection class="p-0">
-          <div class="font-bold pb-1 pt-2">Values</div>
-          <div class="max-h-37.5 overflow-auto">
-            <div v-show="!fieldValues?.length">No values present</div>
-            <OFormCheckboxGroup name="selectedValues">
-              <ul class="flex flex-col m-0 p-0 list-none">
-                <li v-for="value in fieldValues" :key="value">
-                  <label
-                    :data-test="`filter-creator-popup-value-${value}`"
-                    class="flex items-center gap-2 px-2 py-1 cursor-pointer hover:bg-muted/50"
-                  >
-                    <OCheckbox
-                      :value="value"
-                      class="shrink-0"
-                    />
-                    <span class="text-sm flex-1 min-w-0 truncate">{{ value }}</span>
-                  </label>
-                </li>
-              </ul>
-            </OFormCheckboxGroup>
-          </div>
-        </OCardSection>
-      </div>
-    </OForm>
-  </ODialog>
-</template>
-
-<script lang="ts">
-// Define setup function
-import { computed, defineComponent, ref } from "vue";
-import { useI18n } from "vue-i18n";
-import ODialog from "@/lib/overlay/Dialog/ODialog.vue";
-import OCardSection from "@/lib/core/Card/OCardSection.vue";
-import OForm from "@/lib/forms/Form/OForm.vue";
-import OFormSelect from "@/lib/forms/Select/OFormSelect.vue";
-import OFormCheckboxGroup from "@/lib/forms/Checkbox/OFormCheckboxGroup.vue";
-import OCheckbox from "@/lib/forms/Checkbox/OCheckbox.vue";
-import {
-  makeFilterCreatorPopupSchema,
-  type FilterCreatorPopupForm,
-} from "./FilterCreatorPopup.schema";
-export default defineComponent({
-  name: "FilterCreatorPopup",
-  components: {
-    ODialog,
-    OForm,
-    OFormSelect,
-    OFormCheckboxGroup,
-    OCheckbox,
-    OCardSection,
-  },
-  props: [
-    "fieldName",
-    "fieldValues",
-    "operators",
-    "defaultOperator",
-    "defaultValues",
-  ],
-  setup(props, { emit }) {
-    const show = ref(true);
-    const { t } = useI18n();
-
-    // Factory-built so the required message resolves through i18n.
-    const filterCreatorPopupSchema = makeFilterCreatorPopupSchema(t);
-
-    // Dynamic defaults (seeded from props) → a typed component computed, not a
-    // factory in the schema file. selectedValues must always be an array so the
-    // OFormCheckboxGroup binds correctly even when defaultValues is absent.
-    const filterCreatorDefaults = computed((): FilterCreatorPopupForm => ({
-      selectedOperator: props.defaultOperator ?? "",
-      selectedValues: Array.isArray(props.defaultValues)
-        ? props.defaultValues
-        : [],
-    }));
-
-    interface Filter {
-      fieldName: string;
-      selectedValues: string[];
-      selectedOperator: string;
-    }
-
-    // @submit fires only once the schema passes (selectedOperator required), so
-    // there is no imperative required-guard here anymore.
-    const applyFilter = (value: FilterCreatorPopupForm) => {
-      emit("apply", {
-        fieldName: props.fieldName,
-        selectedValues: value.selectedValues,
-        selectedOperator: value.selectedOperator,
-      } as Filter);
-    };
-    return {
-      t,
-      show,
-      // Returned from setup() so the Options-API template can resolve
-      // `:schema` / `:default-values` (a module-level import would be out of
-      // the template's scope → `:schema` would be undefined and never validate).
-      filterCreatorPopupSchema,
-      filterCreatorDefaults,
-      applyFilter,
-    };
-  },
-});
-</script>
diff --git a/web/src/components/shared/grid/NoOrganizationSelected.spec.ts b/web/src/components/shared/grid/NoOrganizationSelected.spec.ts
index f913bab8bc..243f29f690 100644
--- a/web/src/components/shared/grid/NoOrganizationSelected.spec.ts
+++ b/web/src/components/shared/grid/NoOrganizationSelected.spec.ts
@@ -60,13 +60,15 @@ describe("NoOrganizationSelected", () => {
     expect(wrapper.classes()).toContain('w-full');
     expect(wrapper.classes()).toContain('flex');
     expect(wrapper.classes()).toContain('flex-col');
-    expect(wrapper.classes()).toContain('flex-center');
+    expect(wrapper.classes()).toContain('items-center');
+    expect(wrapper.classes()).toContain('justify-center');
     expect(wrapper.classes()).toContain('gap-2');
   });
 
   it("should have correct font size styling", () => {
-    const style = wrapper.attributes('style');
-    expect(style).toContain('font-size: 1.5rem');
+    // Was inline `style="font-size: 1.5rem"`; now the `text-2xl` utility (1.5rem).
+    expect(wrapper.classes()).toContain('text-2xl');
+    expect(wrapper.attributes('style')).toBeUndefined();
   });
 
   it("should apply correct styling to no organization selected text", () => {
diff --git a/web/src/components/shared/grid/NoOrganizationSelected.vue b/web/src/components/shared/grid/NoOrganizationSelected.vue
index 1b7d3a19a4..0e58813dbc 100644
--- a/web/src/components/shared/grid/NoOrganizationSelected.vue
+++ b/web/src/components/shared/grid/NoOrganizationSelected.vue
@@ -1,4 +1,4 @@
-<!-- Copyright 2026 OpenObserve Inc.
+<!-- Copyright 2026 OpenObserve Inc.
 
 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU Affero General Public License as published by
@@ -16,17 +16,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
     <div
-      class="w-full flex flex-col flex-center gap-2"
-      style="font-size: 1.5rem"
+      class="w-full flex flex-col items-center justify-center gap-2 text-2xl"
     >
-      <img
+      <img class="size-50 mt-[20vh]"
         data-test="no-organization-selected-image"
         :src="getImageURL('images/common/selectOrganization.svg')"
-        style="width: 200px; height: 200px; margin-top: 20vh"
         alt=""
       />
-      <div data-test="no-organization-selected-title" class="m-0 text-[18px] font-semibold">{{ t("ticket.noOrganizationSelected") }}</div>
-      <div data-test="no-organization-selected-message" class="m-0 text-sm font-normal leading-5 text-[#7F7777]">{{ t("ticket.selectOrganizationForQuota") }}</div>
+      <div data-test="no-organization-selected-title" class="m-0 text-lg font-semibold">{{ t("ticket.noOrganizationSelected") }}</div>
+      <div data-test="no-organization-selected-message" class="m-0 text-sm font-normal leading-5 text-text-secondary">{{ t("ticket.selectOrganizationForQuota") }}</div>
     </div>
   </template>
   
diff --git a/web/src/components/shared/grid/NoPanel.spec.ts b/web/src/components/shared/grid/NoPanel.spec.ts
index aaae60342d..a03726b69b 100644
--- a/web/src/components/shared/grid/NoPanel.spec.ts
+++ b/web/src/components/shared/grid/NoPanel.spec.ts
@@ -33,13 +33,6 @@ const i18n = createI18n({
 });
 
 // Stubs for components not under test
-const qBtnStub = {
-  template:
-    "<button :data-test=\"$attrs['data-test']\" @click=\"$emit('click')\">{{ label }}</button>",
-  props: ["label", "stack", "padding", "outline", "icon"],
-  emits: ["click"],
-};
-
 const oBtnStub = {
   template:
     "<button :data-test=\"$attrs['data-test']\" @click=\"$emit('click')\"><slot></slot></button>",
@@ -52,7 +45,6 @@ function mountNoPanel(props: Record<string, unknown> = {}) {
     global: {
       plugins: [i18n],
       stubs: {
-        "q-btn": qBtnStub,
         OButton: oBtnStub,
       },
     },
diff --git a/web/src/components/shared/grid/Pagination.spec.ts b/web/src/components/shared/grid/Pagination.spec.ts
index 7ee529a843..98e71a2270 100644
--- a/web/src/components/shared/grid/Pagination.spec.ts
+++ b/web/src/components/shared/grid/Pagination.spec.ts
@@ -57,23 +57,7 @@ describe("Pagination", () => {
         provide: {
           store,
         },
-        stubs: {
-          'q-input': {
-            template: '<input @blur="$emit(\'blur\', $event)" />',
-          },
-          'q-select': {
-            template: '<select @update:modelValue="$emit(\'update:modelValue\', $event)"><option value="10">10</option><option value="20">20</option></select>',
-          },
-          'q-btn': {
-            template: '<button @click="$emit(\'click\')"><slot /></button>'
-          },
-          'q-btn-group': {
-            template: '<div class="q-btn-group"><slot /></div>'
-          },
-          'q-separator': {
-            template: '<div class="q-separator"></div>'
-          }
-        }
+        stubs: {},
       },
     });
   };
diff --git a/web/src/components/shared/grid/Pagination.vue b/web/src/components/shared/grid/Pagination.vue
index 25b58071fe..09185eaa87 100644
--- a/web/src/components/shared/grid/Pagination.vue
+++ b/web/src/components/shared/grid/Pagination.vue
@@ -22,8 +22,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   >
     <div
       v-if="position === 'bottom' && maxRecords"
-      class="flex items-center whitespace-nowrap w-50 justify-center"
-      style="justify-content: start"
+      class="flex items-center whitespace-nowrap w-50 justify-center justify-start"
     >
       <span class="mr-4 text-xs font-semibold">{{ t("search.maxRecords") }}</span>
       <OInput
diff --git a/web/src/components/synthetic-monitoring/MonitorTable.vue b/web/src/components/synthetic-monitoring/MonitorTable.vue
index 9d3142ec58..d051a82cba 100644
--- a/web/src/components/synthetic-monitoring/MonitorTable.vue
+++ b/web/src/components/synthetic-monitoring/MonitorTable.vue
@@ -122,7 +122,7 @@
             class="flex-1"
           />
           <span
-            :class="'font-mono text-sm font-semibold min-w-[2.75rem] text-right text-xs '
+            :class="'font-mono text-sm font-semibold min-w-11 text-right text-xs '
               + ((row as any).uptime >= 99 ? 'text-[var(--color-success-600)]' : (row as any).uptime >= 95 ? 'text-[var(--color-warning-600)]' : 'text-[var(--color-error-600)]')"
           >{{ (row as any).uptime }}%</span>
         </div>
@@ -134,7 +134,7 @@
     <template #cell-locations="{ row }">
       <div class="flex items-center gap-1 cursor-default" @mouseenter="showLoc($event, (row as any).locations)" @mouseleave="hideLoc">
         <span class="text-xs truncate max-w-[4.375rem]">{{ (row as any).locations[0] }}</span>
-        <span v-if="(row as any).locations.length > 1" class="text-xs font-bold px-1 py-0.5 rounded bg-[var(--color-surface-subtle)] whitespace-nowrap shrink-0">+{{ (row as any).locations.length - 1 }}</span>
+        <span v-if="(row as any).locations.length > 1" class="text-xs font-bold px-1 py-0.5 rounded-default bg-[var(--color-surface-subtle)] whitespace-nowrap shrink-0">+{{ (row as any).locations.length - 1 }}</span>
       </div>
     </template>
 
diff --git a/web/src/components/synthetics/CreateBrowserTestSkeleton.vue b/web/src/components/synthetics/CreateBrowserTestSkeleton.vue
index b65329eee0..82eb102405 100644
--- a/web/src/components/synthetics/CreateBrowserTestSkeleton.vue
+++ b/web/src/components/synthetics/CreateBrowserTestSkeleton.vue
@@ -17,7 +17,7 @@ withDefaults(defineProps<{
     role="status"
     :aria-label="t('synthetics.createBrowserTest.loading')"
     aria-live="polite"
-    style="flex: 1; display: flex; flex-direction: column; min-height: 0; background: var(--color-surface-base)"
+    class="flex-1 flex flex-col min-h-0 bg-surface-base"
     data-test="synthetics-createBrowserTest-skeleton"
   >
     <!--
@@ -27,13 +27,13 @@ withDefaults(defineProps<{
         button: flex flex-row items-center gap-2 px-2 py-1.5
           span: size-8(2rem) rounded-full
           span: flex flex-col → title(text-xs) + desc(11px)
-      Connector: h-px flex-1 shrink mt-[22px] mx-1 min-w-[8px]
+      Connector: h-px flex-1 shrink mt-5.5 mx-1 min-w-2
     -->
     <div
-      style="display: flex; align-items: flex-start; padding: 0 1rem 0.5rem; gap: 0.25rem; flex-shrink: 0"
+      class="flex items-start pt-0 px-4 pb-2 gap-1 shrink-0"
     >
       <!-- Step 1: Journey (active) -->
-      <div style="display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.5rem; flex-shrink: 0">
+      <div class="flex items-center gap-2 py-1.5 px-2 shrink-0">
         <div style="width: 2rem; height: 2rem">
           <OSkeleton type="circle" animation="wave" />
         </div>
@@ -41,12 +41,12 @@ withDefaults(defineProps<{
           <OSkeleton type="text" animation="wave" />
         </div>
       </div>
-      <!-- Connector line (mt-[22px]=1.375rem) -->
+      <!-- Connector line (mt-5.5=1.375rem) -->
       <div
-        style="flex: 1; height: 0.0625rem; background: var(--color-border-default); margin: 1.375rem 0.25rem 0; min-width: 0.5rem; flex-shrink: 1"
+        class="flex-1 h-px bg-border-default mt-5.5 mx-1 mb-0 min-w-2 shrink"
       ></div>
       <!-- Step 2: Configure (inactive) -->
-      <div style="display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.5rem; flex-shrink: 0">
+      <div class="flex items-center gap-2 py-1.5 px-2 shrink-0">
         <div style="width: 2rem; height: 2rem">
           <OSkeleton type="circle" animation="wave" />
         </div>
@@ -57,7 +57,7 @@ withDefaults(defineProps<{
     </div>
 
     <!-- ── Journey tab content (OStep panel) ── -->
-    <div style="flex: 1; overflow-y: auto; display: flex; flex-direction: column; min-height: 0">
+    <div class="flex-1 overflow-y-auto flex flex-col min-h-0">
 
       <!--
         BrowserJourney Toolbar
@@ -65,14 +65,15 @@ withDefaults(defineProps<{
         ml-5.5 = 1.375rem, px-3 = 0.75rem
       -->
       <div
-        style="display: flex; align-items: center; gap: 1rem; margin: 0 0 0.75rem 1.375rem; padding: 0 0.75rem"
+        class="flex items-center gap-4 py-0 px-3"
+        style="margin: 0 0 0.75rem 1.375rem"
       >
         <!-- Select-all checkbox -->
-        <div style="width: 1rem; height: 1rem; flex-shrink: 0">
+        <div class="shrink-0" style="width: 1rem; height: 1rem">
           <OSkeleton type="rect" animation="wave" />
         </div>
         <!-- "Steps" h3 + OBadge -->
-        <div style="display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0">
+        <div class="flex items-center gap-1 shrink-0">
           <div style="width: 2.5rem; height: 1.25rem">
             <OSkeleton type="text" animation="wave" />
           </div>
@@ -81,11 +82,11 @@ withDefaults(defineProps<{
           </div>
         </div>
         <!-- Filter OInput -->
-        <div style="flex: 1; height: 2rem; min-width: 8rem">
+        <div class="flex-1" style="height: 2rem; min-width: 8rem">
           <OSkeleton type="rect" animation="wave" />
         </div>
         <!-- Button cluster: Add Step | Replay | Record (OButton size="sm") -->
-        <div style="display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0">
+        <div class="flex items-center gap-2 shrink-0">
           <div style="width: 5.5rem; height: 2rem">
             <OSkeleton type="rect" animation="wave" />
           </div>
@@ -105,38 +106,38 @@ withDefaults(defineProps<{
         Real cell-details: step# | icon-chip(1.75rem) | badge | name(flex-1) | selector(25%)
         Real cell-actions: 3 ghost xs buttons
       -->
-      <div style="display: flex; flex-direction: column; flex: 1">
+      <div class="flex flex-col flex-1">
         <div
           v-for="i in rows"
           :key="i"
-          style="display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border-bottom: 0.0625rem solid var(--color-border-default)"
+          class="flex items-center gap-2 py-1.5 px-3 border-b border-border-default"
         >
           <!-- OTable expand toggle (built-in) -->
-          <div style="width: 1rem; height: 1rem; flex-shrink: 0">
+          <div class="shrink-0" style="width: 1rem; height: 1rem">
             <OSkeleton type="rect" animation="wave" />
           </div>
           <!-- Step number (w-6=1.5rem, text-sm) -->
-          <div style="width: 1.5rem; height: 0.875rem; flex-shrink: 0">
+          <div class="shrink-0" style="width: 1.5rem; height: 0.875rem">
             <OSkeleton type="text" animation="wave" />
           </div>
           <!-- Action icon chip: bg-primary-50, rounded, p-1 -->
-          <div style="width: 1.75rem; height: 1.75rem; flex-shrink: 0; border-radius: 0.25rem">
+          <div class="shrink-0" style="width: 1.75rem; height: 1.75rem; border-radius: 0.25rem">
             <OSkeleton type="rect" animation="wave" />
           </div>
           <!-- Action badge pill -->
-          <div style="width: 3.5rem; height: 1.25rem; flex-shrink: 0; border-radius: 0.25rem">
+          <div class="shrink-0" style="width: 3.5rem; height: 1.25rem; border-radius: 0.25rem">
             <OSkeleton type="rect" animation="wave" />
           </div>
           <!-- Step name (flex-1, truncate, min-w-0) -->
-          <div style="flex: 1; height: 0.875rem; min-width: 5rem">
+          <div class="flex-1" style="height: 0.875rem; min-width: 5rem">
             <OSkeleton type="text" animation="wave" />
           </div>
           <!-- Selector/value (font-mono, text-xs, text-secondary, max-w-[25%]) -->
-          <div style="width: 20%; height: 0.75rem; flex-shrink: 0; min-width: 4rem">
+          <div class="shrink-0" style="width: 20%; height: 0.75rem; min-width: 4rem">
             <OSkeleton type="text" animation="wave" />
           </div>
           <!-- Action buttons: insert(+) | duplicate | delete (3 x OButton ghost xs) -->
-          <div style="display: flex; align-items: center; gap: 0.125rem; flex-shrink: 0">
+          <div class="flex items-center gap-0.5 shrink-0">
             <div style="width: 1.25rem; height: 1.25rem">
               <OSkeleton type="rect" animation="wave" />
             </div>
@@ -157,9 +158,9 @@ withDefaults(defineProps<{
       Journey tab: Cancel(ghost) | spacer | Continue(primary + chevron-right)
     -->
     <div
-      style="display: flex; align-items: center; padding: 0.625rem 0.75rem; gap: 0.5rem; border-top: 0.0625rem solid var(--color-border-default); flex-shrink: 0; background: var(--color-surface-base)"
+      class="flex items-center py-2.5 px-3 gap-2 border-t border-border-default shrink-0 bg-surface-base"
     >
-      <div style="flex: 1"></div>
+      <div class="flex-1"></div>
       <!-- Cancel button (ghost, sm) -->
       <div style="width: 4rem; height: 2rem">
         <OSkeleton type="rect" animation="wave" />
diff --git a/web/src/components/synthetics/configure/CheckAlerts.vue b/web/src/components/synthetics/configure/CheckAlerts.vue
index 8ab6805b6d..228b0d46af 100644
--- a/web/src/components/synthetics/configure/CheckAlerts.vue
+++ b/web/src/components/synthetics/configure/CheckAlerts.vue
@@ -80,9 +80,9 @@ const silenceMinutes = computed({
 </script>
 
 <template>
-  <div class="rounded-lg border border-border-default mb-4">
-    <div class="flex items-center border-b border-border-default py-[0.625rem] px-3">
-      <div class="w-[0.1875rem] h-4 rounded-sm mr-2 shrink-0 bg-primary-600" />
+  <div class="rounded-default border border-border-default mb-4">
+    <div class="flex items-center border-b border-border-default py-2.5 px-3">
+      <div class="w-[0.1875rem] h-4 rounded-default mr-2 shrink-0 bg-primary-600" />
       <h3 class="text-base font-semibold text-text-heading">
         {{ t('synthetics.scheduleAlert.alerts') }}
       </h3>
@@ -139,7 +139,7 @@ const silenceMinutes = computed({
             :options="destinations"
             multiple
             :error="destinationError"
-            class="min-w-[180px] max-w-[300px]"
+            class="min-w-45 max-w-75"
             data-test="synthetics-check-alerts-destinations-select"
             @update:model-value="onDestinationsChange"
           >
@@ -174,7 +174,7 @@ const silenceMinutes = computed({
           {{ t('synthetics.scheduleAlert.cooldownPeriod') }} *
         </label>
         <div class="flex items-center">
-          <div class="w-[87px]">
+          <div class="w-21.75">
             <OInput
               v-model="silenceMinutes"
               type="number"
diff --git a/web/src/components/synthetics/configure/CheckAuthNetwork.vue b/web/src/components/synthetics/configure/CheckAuthNetwork.vue
index 66c24db144..67eb2566e3 100644
--- a/web/src/components/synthetics/configure/CheckAuthNetwork.vue
+++ b/web/src/components/synthetics/configure/CheckAuthNetwork.vue
@@ -137,9 +137,9 @@ function removeCookie(index: number) {
 </script>
 
 <template>
-  <div class="rounded-lg border border-border-default mb-4">
-    <div class="flex items-center border-b border-border-default py-[0.625rem] px-3">
-      <div class="w-[0.1875rem] h-4 rounded-sm mr-2 shrink-0 bg-primary-600" />
+  <div class="rounded-default border border-border-default mb-4">
+    <div class="flex items-center border-b border-border-default py-2.5 px-3">
+      <div class="w-[0.1875rem] h-4 rounded-default mr-2 shrink-0 bg-primary-600" />
       <h3 class="text-base font-semibold text-text-heading">
         {{ t('synthetics.authNetwork.title') }}
       </h3>
diff --git a/web/src/components/synthetics/configure/CheckBrowserDevices.vue b/web/src/components/synthetics/configure/CheckBrowserDevices.vue
index 842807471b..fdd5f0ab56 100644
--- a/web/src/components/synthetics/configure/CheckBrowserDevices.vue
+++ b/web/src/components/synthetics/configure/CheckBrowserDevices.vue
@@ -83,11 +83,11 @@ function toggle(browserId: string, deviceId: string) {
 
 <template>
   <div
-    class="rounded-lg border border-border-default mb-4"
+    class="rounded-default border border-border-default mb-4"
     data-test="synthetics-check-browser-devices"
   >
-    <div class="flex items-center border-b border-border-default py-[0.625rem] px-3">
-      <div class="w-[0.1875rem] h-4 rounded-sm mr-2 shrink-0 bg-primary-600" />
+    <div class="flex items-center border-b border-border-default py-2.5 px-3">
+      <div class="w-[0.1875rem] h-4 rounded-default mr-2 shrink-0 bg-primary-600" />
       <h3 class="text-base font-semibold text-text-heading">
         {{ t('synthetics.browserDevices.title') }}
       </h3>
@@ -98,7 +98,7 @@ function toggle(browserId: string, deviceId: string) {
         <div
           v-for="device in activeDevices"
           :key="device.id"
-          class="flex items-center gap-1 text-xs font-semibold capitalize w-20 text-text-heading"
+          class="flex items-center gap-1 text-xs font-semibold capitalize w-20 text-text-label"
         >
           <OIcon :name="DEVICE_ICONS[device.id] ?? 'devices'" size="sm" />
           {{ t(deviceLabelKey(device.label)) }}
@@ -113,7 +113,7 @@ function toggle(browserId: string, deviceId: string) {
       >
         <div class="flex items-center gap-2 w-32 shrink-0">
           <img :src="BROWSER_ICONS[browser.id]" class="size-5" alt="" />
-          <span class="text-sm font-medium text-text-heading capitalize">{{ browser.label }}</span>
+          <span class="text-sm font-medium text-text-body capitalize">{{ browser.label }}</span>
         </div>
         <div
           v-for="device in activeDevices"
diff --git a/web/src/components/synthetics/configure/CheckCapture.vue b/web/src/components/synthetics/configure/CheckCapture.vue
index 0908844c42..c8177b9ca1 100644
--- a/web/src/components/synthetics/configure/CheckCapture.vue
+++ b/web/src/components/synthetics/configure/CheckCapture.vue
@@ -36,9 +36,9 @@ const screenshotDescription = computed(() => {
 </script>
 
 <template>
-  <div class="rounded-lg border border-border-default mb-4">
-    <div class="flex items-center border-b border-border-default py-[0.625rem] px-3">
-      <div class="w-[0.1875rem] h-4 rounded-sm mr-2 shrink-0 bg-primary-600" />
+  <div class="rounded-default border border-border-default mb-4">
+    <div class="flex items-center border-b border-border-default py-2.5 px-3">
+      <div class="w-[0.1875rem] h-4 rounded-default mr-2 shrink-0 bg-primary-600" />
       <h3 class="text-base font-semibold text-text-heading">{{ t('synthetics.capture.title') }}</h3>
     </div>
     <div class="px-3 py-2 flex flex-col gap-4">
diff --git a/web/src/components/synthetics/configure/CheckDetails.vue b/web/src/components/synthetics/configure/CheckDetails.vue
index 716b623f19..faf43934ec 100644
--- a/web/src/components/synthetics/configure/CheckDetails.vue
+++ b/web/src/components/synthetics/configure/CheckDetails.vue
@@ -84,9 +84,9 @@ function handleTagKeydown(event: KeyboardEvent) {
 </script>
 
 <template>
-  <div class="rounded-lg border border-border-default mb-4">
-    <div class="flex items-center border-b border-border-default py-[0.625rem] px-3">
-      <div class="w-[0.1875rem] h-4 rounded-sm mr-2 shrink-0 bg-primary-600" />
+  <div class="rounded-default border border-border-default mb-4">
+    <div class="flex items-center border-b border-border-default py-2.5 px-3">
+      <div class="w-[0.1875rem] h-4 rounded-default mr-2 shrink-0 bg-primary-600" />
       <h3 class="text-base font-semibold text-text-heading">{{ t('synthetics.checkDetails.title') }}</h3>
     </div>
     <div class="px-3 py-2 flex flex-col gap-4">
diff --git a/web/src/components/synthetics/configure/CheckLocations.vue b/web/src/components/synthetics/configure/CheckLocations.vue
index f0c2eefae4..b484bf417f 100644
--- a/web/src/components/synthetics/configure/CheckLocations.vue
+++ b/web/src/components/synthetics/configure/CheckLocations.vue
@@ -29,9 +29,9 @@ const selectedLocations = computed({
 </script>
 
 <template>
-  <div class="rounded-lg border border-border-default mb-4">
-    <div class="flex items-center border-b border-border-default py-[0.625rem] px-3">
-      <div class="w-[0.1875rem] h-4 rounded-sm mr-2 shrink-0 bg-primary-600" />
+  <div class="rounded-default border border-border-default mb-4">
+    <div class="flex items-center border-b border-border-default py-2.5 px-3">
+      <div class="w-[0.1875rem] h-4 rounded-default mr-2 shrink-0 bg-primary-600" />
       <h3 class="text-base font-semibold text-text-heading">
         {{ t('synthetics.locations.title') }}
       </h3>
@@ -61,7 +61,7 @@ const selectedLocations = computed({
 
     <div
       v-else
-      class="flex items-center justify-center rounded-md border border-dashed border-border-default px-3 py-3 text-sm text-text-muted"
+      class="flex items-center justify-center rounded-default border border-dashed border-border-default px-3 py-3 text-sm text-text-muted"
       data-test="synthetics-check-locations-empty"
     >
       {{ t('synthetics.locations.empty') }}
diff --git a/web/src/components/synthetics/configure/CheckRUM.vue b/web/src/components/synthetics/configure/CheckRUM.vue
index d54aef676d..3116fb0cac 100644
--- a/web/src/components/synthetics/configure/CheckRUM.vue
+++ b/web/src/components/synthetics/configure/CheckRUM.vue
@@ -33,7 +33,7 @@ const sessionReplay = computed({
 </script>
 
 <template>
-  <div class="rounded-lg border border-border-default bg-surface-base p-6 mb-4">
+  <div class="rounded-default border border-border-default bg-surface-base p-6 mb-4">
     <h3 class="text-base font-semibold text-text-heading pb-4">{{ t('synthetics.rum.title') }}</h3>
     <div class="flex flex-col gap-4">
       <div>
diff --git a/web/src/components/synthetics/configure/CheckSchedule.vue b/web/src/components/synthetics/configure/CheckSchedule.vue
index 97641f1231..e873f83480 100644
--- a/web/src/components/synthetics/configure/CheckSchedule.vue
+++ b/web/src/components/synthetics/configure/CheckSchedule.vue
@@ -170,9 +170,9 @@ const startTime = computed({
 </script>
 
 <template>
-  <div class="rounded-lg border border-border-default mb-4">
-    <div class="flex items-center border-b border-border-default py-[0.625rem] px-3">
-      <div class="w-[0.1875rem] h-4 rounded-sm mr-2 shrink-0 bg-primary-600" />
+  <div class="rounded-default border border-border-default mb-4">
+    <div class="flex items-center border-b border-border-default py-2.5 px-3">
+      <div class="w-[0.1875rem] h-4 rounded-default mr-2 shrink-0 bg-primary-600" />
       <h3 class="text-base font-semibold text-text-heading">
         {{ t('synthetics.scheduleAlert.schedule') }}
       </h3>
diff --git a/web/src/components/synthetics/configure/types/CheckHttpConfig.vue b/web/src/components/synthetics/configure/types/CheckHttpConfig.vue
index 8ff34f3c51..da8d4bdbae 100644
--- a/web/src/components/synthetics/configure/types/CheckHttpConfig.vue
+++ b/web/src/components/synthetics/configure/types/CheckHttpConfig.vue
@@ -78,9 +78,9 @@ function removeAssertion(index: number) {
 </script>
 
 <template>
-  <div class="rounded-lg border border-border-default mb-4">
-    <div class="flex items-center border-b border-border-default py-[0.625rem] px-3">
-      <div class="w-[0.1875rem] h-4 rounded-sm mr-2 shrink-0 bg-primary-600" />
+  <div class="rounded-default border border-border-default mb-4">
+    <div class="flex items-center border-b border-border-default py-2.5 px-3">
+      <div class="w-[0.1875rem] h-4 rounded-default mr-2 shrink-0 bg-primary-600" />
       <h3 class="text-base font-semibold text-text-heading">{{ t('synthetics.protocolConfig.http.title') }}</h3>
     </div>
     <div class="px-3 py-2 flex flex-col gap-4">
diff --git a/web/src/components/synthetics/configure/types/CheckSshConfig.vue b/web/src/components/synthetics/configure/types/CheckSshConfig.vue
index 336e63ecd2..2ea21d2d11 100644
--- a/web/src/components/synthetics/configure/types/CheckSshConfig.vue
+++ b/web/src/components/synthetics/configure/types/CheckSshConfig.vue
@@ -42,9 +42,9 @@ const timeoutMs = computed({
 </script>
 
 <template>
-  <div class="rounded-lg border border-border-default mb-4">
-    <div class="flex items-center border-b border-border-default py-[0.625rem] px-3">
-      <div class="w-[0.1875rem] h-4 rounded-sm mr-2 shrink-0 bg-primary-600" />
+  <div class="rounded-default border border-border-default mb-4">
+    <div class="flex items-center border-b border-border-default py-2.5 px-3">
+      <div class="w-[0.1875rem] h-4 rounded-default mr-2 shrink-0 bg-primary-600" />
       <h3 class="text-base font-semibold text-text-heading">{{ t('synthetics.protocolConfig.ssh.title') }}</h3>
     </div>
     <div class="px-3 py-2 flex flex-col gap-4">
diff --git a/web/src/components/synthetics/configure/types/CheckTcpConfig.vue b/web/src/components/synthetics/configure/types/CheckTcpConfig.vue
index 6ab3bff177..a301d4a7ce 100644
--- a/web/src/components/synthetics/configure/types/CheckTcpConfig.vue
+++ b/web/src/components/synthetics/configure/types/CheckTcpConfig.vue
@@ -31,9 +31,9 @@ const responseContains = computed({
 </script>
 
 <template>
-  <div class="rounded-lg border border-border-default mb-4">
-    <div class="flex items-center border-b border-border-default py-[0.625rem] px-3">
-      <div class="w-[0.1875rem] h-4 rounded-sm mr-2 shrink-0 bg-primary-600" />
+  <div class="rounded-default border border-border-default mb-4">
+    <div class="flex items-center border-b border-border-default py-2.5 px-3">
+      <div class="w-[0.1875rem] h-4 rounded-default mr-2 shrink-0 bg-primary-600" />
       <h3 class="text-base font-semibold text-text-heading">{{ t('synthetics.protocolConfig.tcp.title') }}</h3>
     </div>
     <div class="px-3 py-2 flex flex-col gap-4">
diff --git a/web/src/components/synthetics/configure/types/CheckTlsConfig.vue b/web/src/components/synthetics/configure/types/CheckTlsConfig.vue
index 7a4ceed661..9bce17050a 100644
--- a/web/src/components/synthetics/configure/types/CheckTlsConfig.vue
+++ b/web/src/components/synthetics/configure/types/CheckTlsConfig.vue
@@ -40,9 +40,9 @@ const verifyHostname = computed({
 </script>
 
 <template>
-  <div class="rounded-lg border border-border-default mb-4">
-    <div class="flex items-center border-b border-border-default py-[0.625rem] px-3">
-      <div class="w-[0.1875rem] h-4 rounded-sm mr-2 shrink-0 bg-primary-600" />
+  <div class="rounded-default border border-border-default mb-4">
+    <div class="flex items-center border-b border-border-default py-2.5 px-3">
+      <div class="w-[0.1875rem] h-4 rounded-default mr-2 shrink-0 bg-primary-600" />
       <h3 class="text-base font-semibold text-text-heading">{{ t('synthetics.protocolConfig.tls.title') }}</h3>
     </div>
     <div class="px-3 py-2 flex flex-col gap-4">
diff --git a/web/src/components/synthetics/journey/BrowserJourney.vue b/web/src/components/synthetics/journey/BrowserJourney.vue
index 7b377c7df2..37320f1873 100644
--- a/web/src/components/synthetics/journey/BrowserJourney.vue
+++ b/web/src/components/synthetics/journey/BrowserJourney.vue
@@ -463,7 +463,7 @@ function openChromeExtensions() {
       <OInput
         v-model="filterQuery"
         :placeholder="t('synthetics.journey.filterSteps')"
-        class="flex-1 min-w-[8rem]!"
+        class="flex-1 min-w-32!"
         data-test="synthetics-journey-filter-input"
       />
       <!-- Fixed-width action area — buttons right-aligned, widest set (Add Step + Record + Replay/Stop) fits in 320px -->
@@ -554,7 +554,7 @@ function openChromeExtensions() {
     <!-- Incognito blocked warning card (pre-flight failure) -->
     <div
       v-if="blockedReason === 'incognito'"
-      class="flex flex-col gap-3 px-3 py-3 mb-3 rounded-lg border border-[var(--color-warning-300)] bg-warning-50"
+      class="flex flex-col gap-3 px-3 py-3 mb-3 rounded-default border border-[var(--color-warning-300)] bg-warning-50"
       role="alert"
       data-test="synthetics-journey-incognito-warning"
     >
@@ -604,13 +604,13 @@ function openChromeExtensions() {
     <!-- Replay running banner -->
     <div
       v-if="replayPhase === 'running'"
-      class="flex items-center gap-2 mx-2 px-3 py-2 mb-3 rounded bg-[var(--color-badge-primary-soft-bg)] border border-border-default"
+      class="flex items-center gap-2 mx-2 px-3 py-2 mb-3 rounded-default bg-[var(--color-badge-primary-soft-bg)] border border-border-default"
       role="status"
       data-test="synthetics-journey-replay-banner"
     >
       <OIcon name="sync" size="sm" class="animate-spin text-primary-500" aria-hidden="true" />
       <span
-        class="text-sm text-text-heading"
+        class="text-sm text-text-body"
         data-test="synthetics-journey-replay-banner-text"
       >
         {{ t('synthetics.journey.replaying') }}
@@ -623,7 +623,7 @@ function openChromeExtensions() {
     <!-- Replay passed banner -->
     <div
       v-else-if="replayPhase === 'passed'"
-      class="flex items-center gap-2 mx-2 px-3 py-2 mb-3 rounded bg-[var(--color-badge-success-soft-bg)] border border-badge-success-ol-border/50"
+      class="flex items-center gap-2 mx-2 px-3 py-2 mb-3 rounded-default bg-[var(--color-badge-success-soft-bg)] border border-badge-success-ol-border/50"
       role="status"
       data-test="synthetics-journey-passed-banner"
     >
@@ -638,7 +638,7 @@ function openChromeExtensions() {
     <!-- Replay failed banner -->
     <div
       v-else-if="replayPhase === 'failed'"
-      class="flex items-start gap-2 px-3 py-2 mb-3 rounded bg-[var(--color-badge-error-soft-bg)] border border-badge-error-ol-border/30"
+      class="flex items-start gap-2 px-3 py-2 mb-3 rounded-default bg-[var(--color-badge-error-soft-bg)] border border-badge-error-ol-border/30"
       role="alert"
       data-test="synthetics-journey-failed-banner"
     >
@@ -655,12 +655,12 @@ function openChromeExtensions() {
     <!-- Replay stopped banner -->
     <div
       v-else-if="replayPhase === 'stopped'"
-      class="flex items-center gap-2 px-3 py-2 mb-3 rounded bg-surface-subtle border border-border-default"
+      class="flex items-center gap-2 px-3 py-2 mb-3 rounded-default bg-surface-subtle border border-border-default"
       role="status"
       data-test="synthetics-journey-stopped-banner"
     >
       <OIcon name="stop" size="sm" class="text-text-secondary" aria-hidden="true" />
-      <span class="text-sm text-text-heading">{{ t('synthetics.journey.replayStopped', { completed: stepResults?.size ?? 0, total: modelValue.length }) }}</span>
+      <span class="text-sm text-text-body">{{ t('synthetics.journey.replayStopped', { completed: stepResults?.size ?? 0, total: modelValue.length }) }}</span>
       <span class="flex-1" />
       <OButton variant="outline" size="xs" data-test="synthetics-journey-stopped-retry-btn" @click="emit('replay')">
         {{ t('synthetics.journey.reRun') }}
@@ -673,7 +673,7 @@ function openChromeExtensions() {
     <!-- Recorder error (extension missing / failed to start) -->
     <div
       v-if="recordingError && !isRecording"
-      class="flex items-center gap-2 px-3 py-2 mb-3 rounded bg-status-error-bg text-status-error-text text-sm"
+      class="flex items-center gap-2 px-3 py-2 mb-3 rounded-default bg-status-error-bg text-status-error-text text-sm"
       role="alert"
       data-test="synthetics-journey-record-error"
     >
@@ -684,11 +684,11 @@ function openChromeExtensions() {
     <!-- Live capture area (shown while recording) -->
     <template v-if="isRecording">
       <!-- Recording banner with current URL + controls -->
-      <div class="flex items-center gap-3 px-3 py-2 mb-3 rounded bg-status-error-bg border border-border-default">
+      <div class="flex items-center gap-3 px-3 py-2 mb-3 rounded-default bg-status-error-bg border border-border-default">
         <span class="flex items-center gap-1.5">
           <span class="relative inline-flex items-center justify-center w-[0.7rem] h-[0.7rem]" aria-hidden="true">
             <span class="absolute w-[0.7rem] h-[0.7rem] rounded-full bg-status-error-text z-1" />
-            <span class="absolute w-[0.7rem] h-[0.7rem] rounded-full bg-status-error-text opacity-0 animate-[recording-pulse-expand_1.5s_ease-out_infinite]" />
+            <span class="recording-pulse-ring absolute w-[0.7rem] h-[0.7rem] rounded-full bg-status-error-text opacity-0" />
           </span>
           <span class="text-sm font-semibold text-status-error-text pl-1.5">{{ t('synthetics.journey.recording') }}</span>
         </span>
@@ -848,7 +848,14 @@ function openChromeExtensions() {
   </div>
 </template>
 
-<style>
+<style scoped>
+/* keep(keyframes): single-consumer pulse for the recording indicator. The
+   animation lives here as a class (not a template `animate-[…]` utility)
+   because scoped hashes the keyframe name and only rewrites references made
+   inside this block. */
+.recording-pulse-ring {
+  animation: recording-pulse-expand 1.5s ease-out infinite;
+}
 @keyframes recording-pulse-expand {
   0% {
     transform: scale(1);
diff --git a/web/src/components/synthetics/journey/BrowserJourneyStep.vue b/web/src/components/synthetics/journey/BrowserJourneyStep.vue
index ad9ffb2db3..4c79176926 100644
--- a/web/src/components/synthetics/journey/BrowserJourneyStep.vue
+++ b/web/src/components/synthetics/journey/BrowserJourneyStep.vue
@@ -193,7 +193,7 @@ function toggleExpanded() {
 </script>
 
 <template>
-  <div class="rounded border border-border-default bg-surface-base mb-1">
+  <div class="rounded-default border border-border-default bg-surface-base mb-1">
     <!-- Compact row -->
     <div
       class="flex items-center gap-2 px-2 h-9 min-h-9 group relative"
@@ -233,7 +233,7 @@ function toggleExpanded() {
       </span>
 
       <!-- Action icon chip -->
-      <span class="bg-primary-50 rounded p-1 shrink-0 flex items-center">
+      <span class="bg-primary-50 rounded-default p-1 shrink-0 flex items-center">
         <OIcon :name="actionIcon" size="sm" class="text-primary-500" aria-hidden="true" />
       </span>
 
@@ -307,7 +307,7 @@ function toggleExpanded() {
     <!-- Inline error card (shown when a step fails during replay) -->
     <div
       v-if="showErrorCard"
-      class="border border-badge-error-ol-border/30 rounded-lg mx-6 my-2 overflow-hidden"
+      class="border border-badge-error-ol-border/30 rounded-default mx-6 my-2 overflow-hidden"
       data-test="synthetics-journey-step-error-card"
     >
       <!-- Header -->
@@ -319,7 +319,7 @@ function toggleExpanded() {
 
       <!-- Error message -->
       <div class="px-3 py-3">
-        <p class="text-[12.5px] text-text-body m-0">
+        <p class="text-xs text-text-body m-0">
           {{ se?.message || props.replayResult?.error }}
         </p>
       </div>
@@ -349,7 +349,7 @@ function toggleExpanded() {
         </div>
         <pre
           v-if="showStackTrace"
-          class="mt-2 bg-code-bg rounded p-3 overflow-x-auto max-h-[300px] overflow-y-auto text-xs font-mono leading-relaxed m-0"
+          class="mt-2 bg-code-bg rounded-default p-3 overflow-x-auto max-h-75 overflow-y-auto text-xs font-mono leading-relaxed m-0"
           data-test="synthetics-journey-step-stack-content"
         >{{ se.stack }}</pre>
       </div>
@@ -357,11 +357,11 @@ function toggleExpanded() {
       <!-- Info boxes -->
       <div v-if="se?.selector" class="flex gap-4 px-3 pb-3">
         <div class="flex flex-col gap-1">
-          <span class="text-[11px] font-medium text-text-label">{{ t('synthetics.stepErrors.selectorTestId') }}</span>
+          <span class="text-2xs font-medium text-text-label">{{ t('synthetics.stepErrors.selectorTestId') }}</span>
           <span class="text-xs font-mono text-status-error-text">{{ se.selector }}</span>
         </div>
         <div class="flex flex-col gap-1">
-          <span class="text-[11px] font-medium text-text-label">{{ t('synthetics.stepErrors.waited') }}</span>
+          <span class="text-2xs font-medium text-text-label">{{ t('synthetics.stepErrors.waited') }}</span>
           <span class="text-xs font-mono text-text-secondary">{{ errorDurationFormatted }} · {{ exitReasonTag }}</span>
         </div>
       </div>
diff --git a/web/src/components/synthetics/journey/JourneySteps.vue b/web/src/components/synthetics/journey/JourneySteps.vue
index 5605d1b4c2..dfd9274e54 100644
--- a/web/src/components/synthetics/journey/JourneySteps.vue
+++ b/web/src/components/synthetics/journey/JourneySteps.vue
@@ -220,10 +220,10 @@ function handleUpdateExpanded(ids: string[]) {
     <!-- ── cell-screenshot: Thumbnail (results mode) ───────────── -->
     <template v-if="mode === 'results'" #cell-screenshot="{ row }">
       <div
-        class="w-18 h-12 shrink-0 rounded border border-border-default bg-surface-subtle flex items-center justify-center overflow-hidden"
+        class="w-18 h-12 shrink-0 rounded-default border border-border-default bg-surface-subtle flex items-center justify-center overflow-hidden"
       >
         <slot name="screenshot-thumb" :row="row">
-          <OIcon name="image" size="xs" class="text-text-caption" />
+          <OIcon name="image" size="xs" class="text-text-secondary" />
         </slot>
       </div>
     </template>
@@ -253,7 +253,7 @@ function handleUpdateExpanded(ids: string[]) {
 
         <!-- Action icon chip -->
         <span
-          class="bg-primary-50 rounded p-1 shrink-0 flex items-center"
+          class="bg-primary-50 rounded-default p-1 shrink-0 flex items-center"
         >
           <OIcon
             :name="actionIcon(row)"
diff --git a/web/src/components/synthetics/results/ExecutionDetailDrawer.vue b/web/src/components/synthetics/results/ExecutionDetailDrawer.vue
index a00b27d411..f47227175a 100644
--- a/web/src/components/synthetics/results/ExecutionDetailDrawer.vue
+++ b/web/src/components/synthetics/results/ExecutionDetailDrawer.vue
@@ -77,7 +77,7 @@ function fmtDuration(ms: number) {
         <div class="absolute inset-0 bg-black/40" @click="emit('close')" />
 
         <!-- Drawer panel -->
-        <div class="relative z-10 w-full max-w-2xl h-full border-l border-border-default flex flex-col overflow-hidden shadow-2xl" style="background: var(--color-surface-base, #18181b)">
+        <div class="relative z-10 w-full max-w-2xl h-full border-l border-border-default flex flex-col overflow-hidden shadow-lg bg-surface-base">
 
           <!-- Header -->
           <div class="flex items-center gap-3 px-5 py-4 border-b border-border-default shrink-0">
@@ -98,7 +98,7 @@ function fmtDuration(ms: number) {
                 v-if="execution.traceKey"
                 :href="artifactUrlFn(execution.traceKey)"
                 target="_blank"
-                class="inline-flex items-center gap-1 text-xs font-medium text-text-link border border-current rounded px-2 py-1 hover:opacity-80"
+                class="inline-flex items-center gap-1 text-xs font-medium text-text-link border border-current rounded-default px-2 py-1 hover:opacity-80"
               >
                 <OIcon name="download" size="xs" />
                 trace.zip
@@ -116,7 +116,7 @@ function fmtDuration(ms: number) {
           <!-- Error banner (probe crash) -->
           <div
             v-if="execution.error && !execution.steps.length"
-            class="mx-5 mt-4 rounded border border-[var(--color-warning-500)]/30 bg-[var(--color-warning-500)]/10 px-4 py-3 shrink-0"
+            class="mx-5 mt-4 rounded-default border border-[var(--color-warning-500)]/30 bg-[var(--color-warning-500)]/10 px-4 py-3 shrink-0"
           >
             <p class="text-xs font-semibold text-[var(--color-warning-600)] mb-1">{{ t('synthetics.executionDetail.probeError') }}</p>
             <p class="text-xs text-[var(--color-warning-600)] font-mono whitespace-pre-wrap leading-relaxed">{{ execution.error }}</p>
@@ -132,7 +132,7 @@ function fmtDuration(ms: number) {
               <div
                 v-for="(step, i) in mergedSteps"
                 :key="step.stepId"
-                class="rounded-lg border overflow-hidden"
+                class="rounded-default border overflow-hidden"
                 :class="step.status === 'fail' ? 'border-[var(--color-error-500)]/40' : 'border-border-default'"
               >
                 <!-- Step header -->
@@ -141,14 +141,14 @@ function fmtDuration(ms: number) {
                   :class="step.status === 'fail' ? 'bg-[var(--color-error-500)]/10' : 'bg-surface-panel'"
                 >
                   <span
-                    class="shrink-0 w-5 h-5 rounded-full flex items-center justify-center text-white text-[0.6rem] font-bold mt-0.5"
+                    class="shrink-0 w-5 h-5 rounded-full flex items-center justify-center text-white text-3xs font-bold mt-0.5"
                     :class="step.status === 'fail' ? 'bg-[var(--color-error-500)]' : 'bg-[var(--color-success-600)]'"
                   >{{ i + 1 }}</span>
                   <div class="flex-1 min-w-0">
                     <p class="text-sm font-medium text-text-heading truncate" :title="step.name">
                       {{ step.name || step.stepId }}
                     </p>
-                    <p class="text-[0.65rem] text-text-muted font-mono mt-0.5 truncate" :title="step.stepId">
+                    <p class="text-3xs text-text-muted font-mono mt-0.5 truncate" :title="step.stepId">
                       {{ step.stepId }}
                     </p>
                   </div>
diff --git a/web/src/components/synthetics/results/ProtocolRunSummary.spec.ts b/web/src/components/synthetics/results/ProtocolRunSummary.spec.ts
index 4ed4217b1d..d5d516ae8e 100644
--- a/web/src/components/synthetics/results/ProtocolRunSummary.spec.ts
+++ b/web/src/components/synthetics/results/ProtocolRunSummary.spec.ts
@@ -39,9 +39,9 @@ vi.mock("vue-i18n", () => ({
 }));
 
 // ── Stubs for O2 and layout components ──────────────────────────────────────
-vi.mock("@/components/common/AppPageHeader.vue", () => ({
+vi.mock("@/lib/core/PageHeader/OPageHeader.vue", () => ({
   default: {
-    name: "AppPageHeader",
+    name: "OPageHeader",
     props: ["subtitle", "back", "drawerMode"],
     template: '<div data-test="app-page-header"><slot name="title"></slot><slot name="title-trail"></slot></div>',
   },
diff --git a/web/src/components/synthetics/results/ProtocolRunSummary.vue b/web/src/components/synthetics/results/ProtocolRunSummary.vue
index 591af5722a..daa596567c 100644
--- a/web/src/components/synthetics/results/ProtocolRunSummary.vue
+++ b/web/src/components/synthetics/results/ProtocolRunSummary.vue
@@ -7,7 +7,8 @@
 import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useStore } from 'vuex'
-import AppPageHeader from '@/components/common/AppPageHeader.vue'
+import OPageHeader from '@/lib/core/PageHeader/OPageHeader.vue'
+import OPageLayout from '@/lib/core/PageLayout/OPageLayout.vue'
 import OBadge from '@/lib/core/Badge/OBadge.vue'
 import OSkeleton from '@/lib/feedback/Skeleton/OSkeleton.vue'
 import OEmptyState from '@/lib/core/EmptyState/OEmptyState.vue'
@@ -163,10 +164,10 @@ const showAssertions = computed(
 </script>
 
 <template>
-  <div class="flex flex-col h-full min-h-0" data-test="synthetics-protocol-run-detail">
-    <AppPageHeader
-      v-if="!drawerMode"
-      class="px-2!"
+  <OPageLayout data-test="synthetics-protocol-run-detail" bleed>
+    <template #header v-if="!drawerMode">
+    <OPageHeader
+      class=""
       :subtitle="run ? fmtTs(run.timestamp) : ''"
       :back="{
         label: t('synthetics.results.monitors'),
@@ -182,14 +183,15 @@ const showAssertions = computed(
           {{ statusMeta.label }}
         </OBadge>
         <OBadge v-if="run" variant="default" size="sm">{{ run.type.toUpperCase() }}</OBadge>
-        <OBadge v-if="run?.target" variant="default" size="sm" icon="link" class="truncate max-w-[15rem]">
+        <OBadge v-if="run?.target" variant="default" size="sm" icon="link" class="truncate max-w-60">
           {{ run.target }}
         </OBadge>
       </template>
-    </AppPageHeader>
+    </OPageHeader>
+    </template>
 
-    <div class="flex-1 min-h-0 overflow-y-auto p-4">
-      <OSkeleton v-if="loading" class="h-[20rem] w-full" />
+    <div class="flex-1 min-h-0 overflow-y-auto px-page-edge py-4">
+      <OSkeleton v-if="loading" class="h-80 w-full" />
 
       <OEmptyState
         v-else-if="!run"
@@ -199,32 +201,32 @@ const showAssertions = computed(
 
       <div v-else class="max-w-[53.75rem] flex flex-col gap-4">
         <!-- ── Result ── -->
-        <div class="rounded-lg border border-border-default">
+        <div class="rounded-default border border-border-default">
           <div class="flex items-center border-b border-border-default py-2 px-3">
-            <div class="w-[0.1875rem] h-4 rounded-sm mr-2 shrink-0 bg-primary-600" />
+            <div class="w-[0.1875rem] h-4 rounded-default mr-2 shrink-0 bg-primary-600" />
             <h3 class="text-base font-semibold text-text-heading">{{ t('synthetics.protocolRun.result') }}</h3>
           </div>
           <div class="px-3 py-3 grid grid-cols-2 gap-3">
-            <div class="flex flex-col gap-1.5 p-3 rounded-md bg-surface-subtle">
+            <div class="flex flex-col gap-1.5 p-3 rounded-default bg-surface-subtle">
               <span class="text-xs text-text-muted">{{ t('synthetics.protocolRun.status') }}</span>
               <span class="flex items-center gap-2">
                 <OBadge :variant="statusMeta.variant" size="sm" :icon="statusMeta.icon">{{ statusMeta.label }}</OBadge>
                 <OBadge v-if="run.errorClass" variant="default" size="sm">{{ run.errorClass }}</OBadge>
               </span>
             </div>
-            <div v-if="run.statusCode != null" class="flex flex-col gap-1.5 p-3 rounded-md bg-surface-subtle">
+            <div v-if="run.statusCode != null" class="flex flex-col gap-1.5 p-3 rounded-default bg-surface-subtle">
               <span class="text-xs text-text-muted">{{ t('synthetics.protocolRun.statusCode') }}</span>
               <span class="text-sm font-medium">{{ run.statusCode }}</span>
             </div>
-            <div class="flex flex-col gap-1.5 p-3 rounded-md bg-surface-subtle">
+            <div class="flex flex-col gap-1.5 p-3 rounded-default bg-surface-subtle">
               <span class="text-xs text-text-muted">{{ t('synthetics.protocolRun.responseTime') }}</span>
               <span class="text-sm font-medium">{{ fmtMs(run.responseTimeMs) }}</span>
             </div>
-            <div v-if="run.responseBytes != null" class="flex flex-col gap-1.5 p-3 rounded-md bg-surface-subtle">
+            <div v-if="run.responseBytes != null" class="flex flex-col gap-1.5 p-3 rounded-default bg-surface-subtle">
               <span class="text-xs text-text-muted">{{ t('synthetics.protocolRun.responseSize') }}</span>
               <span class="text-sm font-medium">{{ fmtBytes(run.responseBytes) }}</span>
             </div>
-            <div v-if="run.error" class="col-span-2 flex flex-col gap-1.5 p-3 rounded-md bg-surface-subtle">
+            <div v-if="run.error" class="col-span-2 flex flex-col gap-1.5 p-3 rounded-default bg-surface-subtle">
               <span class="text-xs text-text-muted">{{ t('synthetics.protocolRun.error') }}</span>
               <span class="text-sm font-medium text-status-error-text break-all">{{ run.error }}</span>
             </div>
@@ -232,24 +234,24 @@ const showAssertions = computed(
         </div>
 
         <!-- ── Timing breakdown ── -->
-        <div v-if="timingBars.length" class="rounded-lg border border-border-default">
+        <div v-if="timingBars.length" class="rounded-default border border-border-default">
           <div class="flex items-center border-b border-border-default py-2 px-3">
-            <div class="w-[0.1875rem] h-4 rounded-sm mr-2 shrink-0 bg-primary-600" />
+            <div class="w-[0.1875rem] h-4 rounded-default mr-2 shrink-0 bg-primary-600" />
             <h3 class="text-base font-semibold text-text-heading">{{ t('synthetics.protocolRun.timings') }}</h3>
           </div>
           <div class="px-3 py-3 flex flex-col gap-2">
             <div v-for="bar in timingBars" :key="bar.phase" class="flex items-center gap-2">
-              <span class="w-[5rem] shrink-0 text-xs text-text-secondary">{{ t(`synthetics.protocolRun.phase.${bar.phase}`) }}</span>
-              <div class="flex-1 h-3 rounded-sm bg-surface-subtle overflow-hidden">
+              <span class="w-20 shrink-0 text-xs text-text-secondary">{{ t(`synthetics.protocolRun.phase.${bar.phase}`) }}</span>
+              <div class="flex-1 h-3 rounded-default bg-surface-subtle overflow-hidden">
                 <div
-                  class="h-full rounded-sm bg-primary-600"
+                  class="h-full rounded-default bg-primary-600"
                   :style="{ width: bar.pct + '%' }"
                 />
               </div>
               <span class="w-[4.5rem] shrink-0 text-right text-xs text-text-secondary">{{ fmtMs(bar.ms) }}</span>
             </div>
             <div class="flex items-center gap-2 pt-1 border-t border-border-default">
-              <span class="w-[5rem] shrink-0 text-xs font-semibold text-text-body">{{ t('synthetics.protocolRun.phase.total') }}</span>
+              <span class="w-20 shrink-0 text-xs font-semibold text-text-body">{{ t('synthetics.protocolRun.phase.total') }}</span>
               <div class="flex-1" />
               <span class="w-[4.5rem] shrink-0 text-right text-xs font-semibold text-text-body">{{ fmtMs(run.totalMs) }}</span>
             </div>
@@ -257,9 +259,9 @@ const showAssertions = computed(
         </div>
 
         <!-- ── Assertions (http) ── -->
-        <div v-if="showAssertions" class="rounded-lg border border-border-default">
+        <div v-if="showAssertions" class="rounded-default border border-border-default">
           <div class="flex items-center border-b border-border-default py-2 px-3">
-            <div class="w-[0.1875rem] h-4 rounded-sm mr-2 shrink-0 bg-primary-600" />
+            <div class="w-[0.1875rem] h-4 rounded-default mr-2 shrink-0 bg-primary-600" />
             <h3 class="text-base font-semibold text-text-heading">{{ t('synthetics.protocolRun.assertions') }}</h3>
             <OBadge
               class="ml-2"
@@ -283,9 +285,9 @@ const showAssertions = computed(
         </div>
 
         <!-- ── TLS certificate ── -->
-        <div v-if="certExpiryDate" class="rounded-lg border border-border-default">
+        <div v-if="certExpiryDate" class="rounded-default border border-border-default">
           <div class="flex items-center border-b border-border-default py-2 px-3">
-            <div class="w-[0.1875rem] h-4 rounded-sm mr-2 shrink-0 bg-primary-600" />
+            <div class="w-[0.1875rem] h-4 rounded-default mr-2 shrink-0 bg-primary-600" />
             <h3 class="text-base font-semibold text-text-heading">{{ t('synthetics.protocolRun.tlsCert') }}</h3>
           </div>
           <div class="px-3 py-3 flex items-center gap-2 text-sm">
@@ -301,29 +303,29 @@ const showAssertions = computed(
         </div>
 
         <!-- ── Probe ── -->
-        <div class="rounded-lg border border-border-default">
+        <div class="rounded-default border border-border-default">
           <div class="flex items-center border-b border-border-default py-2 px-3">
-            <div class="w-[0.1875rem] h-4 rounded-sm mr-2 shrink-0 bg-primary-600" />
+            <div class="w-[0.1875rem] h-4 rounded-default mr-2 shrink-0 bg-primary-600" />
             <h3 class="text-base font-semibold text-text-heading">{{ t('synthetics.protocolRun.probe') }}</h3>
           </div>
           <div class="px-3 py-3 grid grid-cols-2 gap-3 text-sm">
-            <div class="flex flex-col gap-1.5 p-3 rounded-md bg-surface-subtle">
+            <div class="flex flex-col gap-1.5 p-3 rounded-default bg-surface-subtle">
               <span class="text-xs text-text-muted">{{ t('synthetics.protocolRun.location') }}</span>
               <span class="font-medium">{{ run.location || '—' }}</span>
             </div>
-            <div class="flex flex-col gap-1.5 p-3 rounded-md bg-surface-subtle">
+            <div class="flex flex-col gap-1.5 p-3 rounded-default bg-surface-subtle">
               <span class="text-xs text-text-muted">{{ t('synthetics.protocolRun.runtime') }}</span>
               <span class="font-medium">{{ run.runtime || '—' }} <span v-if="run.initMs" class="text-text-muted">(+{{ fmtMs(run.initMs) }} {{ t('synthetics.protocolRun.init') }})</span></span>
             </div>
-            <div class="flex flex-col gap-1.5 p-3 rounded-md bg-surface-subtle">
+            <div class="flex flex-col gap-1.5 p-3 rounded-default bg-surface-subtle">
               <span class="text-xs text-text-muted">{{ t('synthetics.protocolRun.probeId') }}</span>
               <span class="font-mono text-xs break-all">{{ run.probeId || '—' }}</span>
             </div>
-            <div class="flex flex-col gap-1.5 p-3 rounded-md bg-surface-subtle">
+            <div class="flex flex-col gap-1.5 p-3 rounded-default bg-surface-subtle">
               <span class="text-xs text-text-muted">{{ t('synthetics.protocolRun.trigger') }}</span>
               <span class="font-medium">{{ run.triggerType }}</span>
             </div>
-            <div class="col-span-2 flex flex-col gap-1.5 p-3 rounded-md bg-surface-subtle">
+            <div class="col-span-2 flex flex-col gap-1.5 p-3 rounded-default bg-surface-subtle">
               <span class="text-xs text-text-muted">{{ t('synthetics.protocolRun.timeline') }}</span>
               <span class="text-xs">
                 {{ t('synthetics.protocolRun.scheduled') }} {{ fmtTs(run.scheduledTs) }}
@@ -335,5 +337,5 @@ const showAssertions = computed(
         </div>
       </div>
     </div>
-  </div>
+  </OPageLayout>
 </template>
diff --git a/web/src/components/synthetics/results/RunDetailDrawer.vue b/web/src/components/synthetics/results/RunDetailDrawer.vue
index 7b301ee3bc..94c13eed76 100644
--- a/web/src/components/synthetics/results/RunDetailDrawer.vue
+++ b/web/src/components/synthetics/results/RunDetailDrawer.vue
@@ -121,6 +121,7 @@ function toggleSteps(executionId: string) {
 
 <template>
   <ODrawer
+    bleed
     :open="open"
     size="lg"
     :title="t('synthetics.runDetail.title')"
@@ -142,15 +143,15 @@ function toggleSteps(executionId: string) {
       <!-- ── Loading skeleton ── -->
       <div v-if="loading" class="flex flex-col gap-3 p-5">
         <div class="flex gap-6 mb-2">
-          <div class="bg-[var(--color-border-default)] animate-pulse h-10 w-28 rounded" />
-          <div class="bg-[var(--color-border-default)] animate-pulse h-10 w-20 rounded" />
-          <div class="bg-[var(--color-border-default)] animate-pulse h-10 w-40 rounded" />
+          <div class="bg-[var(--color-border-default)] animate-pulse h-10 w-28 rounded-default" />
+          <div class="bg-[var(--color-border-default)] animate-pulse h-10 w-20 rounded-default" />
+          <div class="bg-[var(--color-border-default)] animate-pulse h-10 w-40 rounded-default" />
         </div>
-        <div v-for="i in 2" :key="i" class="rounded-lg border border-border-default overflow-hidden">
+        <div v-for="i in 2" :key="i" class="rounded-default border border-border-default overflow-hidden">
           <div class="bg-[var(--color-border-default)] animate-pulse h-11 w-full" />
           <div class="p-4 flex flex-col gap-2">
-            <div class="bg-[var(--color-border-default)] animate-pulse h-4 w-2/3 rounded" />
-            <div class="bg-[var(--color-border-default)] animate-pulse h-4 w-1/2 rounded" />
+            <div class="bg-[var(--color-border-default)] animate-pulse h-4 w-2/3 rounded-default" />
+            <div class="bg-[var(--color-border-default)] animate-pulse h-4 w-1/2 rounded-default" />
           </div>
         </div>
       </div>
@@ -162,7 +163,7 @@ function toggleSteps(executionId: string) {
       >
         <OIcon name="error_outline" size="xl" class="text-status-error-text" />
         <p class="text-sm font-medium text-status-error-text">{{ t('synthetics.runDetail.loadFailed') }}</p>
-        <p class="text-xs font-mono text-text-caption text-center max-w-sm">{{ queryError }}</p>
+        <p class="text-xs font-mono text-text-secondary text-center max-w-sm">{{ queryError }}</p>
       </div>
 
       <!-- ── No data ── -->
@@ -172,7 +173,7 @@ function toggleSteps(executionId: string) {
       >
         <OIcon name="hourglass_empty" size="xl" />
         <p class="text-sm font-medium">{{ t('synthetics.runDetail.noExecutionData') }}</p>
-        <p class="text-xs text-text-caption text-center">
+        <p class="text-xs text-text-secondary text-center">
           {{ t('synthetics.runDetail.noExecutionDataDesc', { runId: runId }) }}
         </p>
       </div>
@@ -182,15 +183,15 @@ function toggleSteps(executionId: string) {
         <!-- Summary strip -->
         <div class="grid grid-cols-3 gap-x-6 px-5 py-4 border-b border-border-default bg-surface-panel shrink-0">
           <div>
-            <p class="text-[0.65rem] font-semibold uppercase tracking-[0.06em] text-text-muted mb-[0.2rem]">{{ t('synthetics.runDetail.maxDuration') }}</p>
-            <p class="text-[0.9rem] font-semibold text-text-primary">{{ fmtDuration(overallDurationMs) }}</p>
+            <p class="text-3xs font-semibold uppercase tracking-[0.06em] text-text-muted mb-[0.2rem]">{{ t('synthetics.runDetail.maxDuration') }}</p>
+            <p class="text-sm font-semibold text-text-body">{{ fmtDuration(overallDurationMs) }}</p>
           </div>
           <div>
-            <p class="text-[0.65rem] font-semibold uppercase tracking-[0.06em] text-text-muted mb-[0.2rem]">{{ t('synthetics.runDetail.locations') }}</p>
-            <p class="text-[0.9rem] font-semibold text-text-primary">{{ locations.length }}</p>
+            <p class="text-3xs font-semibold uppercase tracking-[0.06em] text-text-muted mb-[0.2rem]">{{ t('synthetics.runDetail.locations') }}</p>
+            <p class="text-sm font-semibold text-text-body">{{ locations.length }}</p>
           </div>
           <div>
-            <p class="text-[0.65rem] font-semibold uppercase tracking-[0.06em] text-text-muted mb-[0.2rem]">{{ t('synthetics.runDetail.runId') }}</p>
+            <p class="text-3xs font-semibold uppercase tracking-[0.06em] text-text-muted mb-[0.2rem]">{{ t('synthetics.runDetail.runId') }}</p>
             <p class="text-xs font-mono text-text-secondary truncate mt-0.5" :title="runId">{{ runId }}</p>
           </div>
         </div>
@@ -200,7 +201,7 @@ function toggleSteps(executionId: string) {
           <div
             v-for="loc in locations"
             :key="loc.executionId"
-            class="bg-surface-base rounded-lg border border-border-default overflow-hidden"
+            class="bg-surface-base rounded-default border border-border-default overflow-hidden"
           >
             <!-- Card header -->
             <div
@@ -210,7 +211,7 @@ function toggleSteps(executionId: string) {
               <span class="text-sm font-semibold text-text-heading truncate">{{ loc.location || '—' }}</span>
               <div class="ml-auto flex items-center gap-3 shrink-0">
                 <span class="text-xs text-text-muted">{{ [loc.browserEngine, loc.device].filter(Boolean).join(' · ') }}</span>
-                <span class="text-sm font-medium tabular-nums text-text-primary">{{ fmtDuration(loc.durationMs) }}</span>
+                <span class="text-sm font-medium tabular-nums text-text-body">{{ fmtDuration(loc.durationMs) }}</span>
               </div>
             </div>
 
@@ -225,7 +226,7 @@ function toggleSteps(executionId: string) {
                   <OIcon name="cancel" size="xs" />
                   {{ t('synthetics.results.error') }}
                 </p>
-                <pre class="whitespace-pre-wrap font-mono text-xs text-text-secondary leading-relaxed bg-status-error-bg rounded px-3 py-2 border border-[var(--color-status-error-text)]">{{ loc.error }}</pre>
+                <pre class="whitespace-pre-wrap font-mono text-xs text-text-secondary leading-relaxed bg-status-error-bg rounded-default px-3 py-2 border border-[var(--color-status-error-text)]">{{ loc.error }}</pre>
               </div>
 
               <!-- Steps -->
@@ -233,7 +234,7 @@ function toggleSteps(executionId: string) {
                 <OButton
                   variant="ghost"
                   size="xs"
-                  class="flex items-center gap-1.5 font-semibold text-text-heading mb-2"
+                  class="flex items-center gap-1.5 font-semibold text-text-body mb-2"
                   :data-test="`synthetics-run-detail-toggle-steps-${loc.executionId}-btn`"
                   @click="toggleSteps(loc.executionId)"
                 >
@@ -251,7 +252,7 @@ function toggleSteps(executionId: string) {
                     class="flex items-start gap-2.5 py-1.5 text-xs"
                   >
                     <span
-                      class="shrink-0 w-4 h-4 rounded-full flex items-center justify-center text-white text-[0.6rem] font-bold mt-px"
+                      class="shrink-0 w-4 h-4 rounded-full flex items-center justify-center text-white text-3xs font-bold mt-px"
                       :class="step.status === 'ok' ? 'bg-[var(--color-success-600)]' : 'bg-[var(--color-error-500)]'"
                     >{{ idx + 1 }}</span>
                     <div class="flex-1 min-w-0">
@@ -272,14 +273,14 @@ function toggleSteps(executionId: string) {
                   <div
                     v-for="step in loc.steps.filter(s => s.screenshotKey)"
                     :key="step.stepId"
-                    class="rounded border border-border-default overflow-hidden bg-surface-panel"
+                    class="rounded-default border border-border-default overflow-hidden bg-surface-panel"
                   >
                     <div class="flex items-center gap-1.5 px-2 py-1 border-b border-border-default">
                       <span
                         class="w-2 h-2 rounded-full shrink-0"
                         :class="step.status === 'ok' ? 'bg-[var(--color-success-500)]' : 'bg-[var(--color-error-500)]'"
                       />
-                      <span class="text-[0.65rem] font-mono text-text-muted truncate">{{ step.stepId }}</span>
+                      <span class="text-3xs font-mono text-text-muted truncate">{{ step.stepId }}</span>
                     </div>
                     <a :href="artifactUrl(step.screenshotKey!)" target="_blank">
                       <img
@@ -298,7 +299,7 @@ function toggleSteps(executionId: string) {
                 <a
                   :href="artifactUrl(loc.traceKey)"
                   target="_blank"
-                  class="inline-flex items-center gap-2 text-xs font-medium text-text-link hover:text-text-link-hover bg-surface-panel border border-border-default rounded px-3 py-1.5 transition-colors"
+                  class="inline-flex items-center gap-2 text-xs font-medium text-text-link hover:text-text-link-hover bg-surface-panel border border-border-default rounded-default px-3 py-1.5 transition-colors"
                 >
                   <OIcon name="download" size="xs" />
                   {{ t('synthetics.runDetail.downloadTrace', { filename: 'trace.zip' }) }}
diff --git a/web/src/components/synthetics/results/RunRowExpansion.vue b/web/src/components/synthetics/results/RunRowExpansion.vue
index da64012312..bc26651f6a 100644
--- a/web/src/components/synthetics/results/RunRowExpansion.vue
+++ b/web/src/components/synthetics/results/RunRowExpansion.vue
@@ -122,10 +122,10 @@ function worstStatus(statuses: RunStatus[]): RunStatus {
 
 const STATUS_COLOR: Record<RunStatus | 'pending', string> = {
   passed:  'text-[var(--color-success-500)]',
-  warning: 'text-amber-500',
+  warning: 'text-(--color-orange-500)',
   failed:  'text-[var(--color-error-500)]',
   error:   'text-[var(--color-warning-500)]',
-  pending: 'text-gray-400',
+  pending: 'text-text-muted',
 }
 
 function statusDot(s: RunStatus) {
@@ -168,11 +168,11 @@ function failedAtStep(steps: StepResult[]): string {
     <!-- Loading skeleton -->
     <div v-if="loading" class="flex flex-col gap-2 p-4">
       <div class="flex gap-3 items-center py-2">
-        <div class="bg-[var(--color-border-default)] animate-pulse h-4 w-24 rounded" />
-        <div class="bg-[var(--color-border-default)] animate-pulse h-4 w-16 rounded" />
-        <div class="bg-[var(--color-border-default)] animate-pulse h-4 w-40 rounded" />
+        <div class="bg-[var(--color-border-default)] animate-pulse h-4 w-24 rounded-default" />
+        <div class="bg-[var(--color-border-default)] animate-pulse h-4 w-16 rounded-default" />
+        <div class="bg-[var(--color-border-default)] animate-pulse h-4 w-40 rounded-default" />
       </div>
-      <div class="bg-[var(--color-border-default)] animate-pulse h-24 w-full rounded" />
+      <div class="bg-[var(--color-border-default)] animate-pulse h-24 w-full rounded-default" />
     </div>
 
     <!-- Query error -->
@@ -193,7 +193,7 @@ function failedAtStep(steps: StepResult[]): string {
       <!-- Warning banner for warning runs -->
       <div
         v-if="locationGroups.some(g => g.status === 'warning') && locationGroups.every(g => g.status !== 'failed' && g.status !== 'error')"
-        class="flex items-center gap-2 px-4 py-2 text-xs text-amber-600 bg-amber-500/10 border-b border-amber-500/20"
+        class="flex items-center gap-2 px-4 py-2 text-xs text-(--color-orange-600) bg-(--color-orange-500)/10 border-b border-(--color-orange-500)/20"
       >
         <OIcon name="warning" size="xs" />
         {{ t('synthetics.runRowExpansion.flakyWarning') }}
@@ -235,15 +235,15 @@ function failedAtStep(steps: StepResult[]): string {
           <div v-if="expandedLocations.has(group.location)" class="px-4 pb-3">
 
             <!-- Execution summary table -->
-            <div class="rounded border border-border-default overflow-hidden mb-3">
+            <div class="rounded-default border border-border-default overflow-hidden mb-3">
               <table class="w-full text-xs">
                 <thead>
                   <tr class="bg-surface-panel border-b border-border-default">
-                    <th class="px-3 py-2 text-left font-semibold text-text-muted uppercase tracking-wide text-[0.62rem]">{{ t('synthetics.runRowExpansion.browserHeader') }}</th>
-                    <th class="px-3 py-2 text-left font-semibold text-text-muted uppercase tracking-wide text-[0.62rem]">{{ t('synthetics.runRowExpansion.deviceHeader') }}</th>
-                    <th class="px-3 py-2 text-left font-semibold text-text-muted uppercase tracking-wide text-[0.62rem]">{{ t('synthetics.results.status') }}</th>
-                    <th class="px-3 py-2 text-right font-semibold text-text-muted uppercase tracking-wide text-[0.62rem]">{{ t('synthetics.results.duration') }}</th>
-                    <th class="px-3 py-2 text-left font-semibold text-text-muted uppercase tracking-wide text-[0.62rem]">{{ t('synthetics.runRowExpansion.failedAtHeader') }}</th>
+                    <th class="px-3 py-2 text-left font-semibold text-text-muted uppercase tracking-wide text-3xs">{{ t('synthetics.runRowExpansion.browserHeader') }}</th>
+                    <th class="px-3 py-2 text-left font-semibold text-text-muted uppercase tracking-wide text-3xs">{{ t('synthetics.runRowExpansion.deviceHeader') }}</th>
+                    <th class="px-3 py-2 text-left font-semibold text-text-muted uppercase tracking-wide text-3xs">{{ t('synthetics.results.status') }}</th>
+                    <th class="px-3 py-2 text-right font-semibold text-text-muted uppercase tracking-wide text-3xs">{{ t('synthetics.results.duration') }}</th>
+                    <th class="px-3 py-2 text-left font-semibold text-text-muted uppercase tracking-wide text-3xs">{{ t('synthetics.runRowExpansion.failedAtHeader') }}</th>
                   </tr>
                 </thead>
                 <tbody class="divide-y divide-border-default">
@@ -268,7 +268,7 @@ function failedAtStep(steps: StepResult[]): string {
                       </span>
                     </td>
                     <td class="px-3 py-2 text-right tabular-nums text-text-secondary">{{ fmtDuration(ex.durationMs) }}</td>
-                    <td class="px-3 py-2 text-text-muted font-mono truncate max-w-[12rem]">
+                    <td class="px-3 py-2 text-text-muted font-mono truncate max-w-48">
                       {{ ex.status !== 'passed' ? failedAtStep(ex.steps) : '—' }}
                     </td>
                   </tr>
diff --git a/web/src/components/traces/FlameGraphView.spec.ts b/web/src/components/traces/FlameGraphView.spec.ts
index e96cc71055..504bcbf9bf 100644
--- a/web/src/components/traces/FlameGraphView.spec.ts
+++ b/web/src/components/traces/FlameGraphView.spec.ts
@@ -1043,7 +1043,7 @@ describe("FlameGraphView", () => {
       });
 
       expect(result).toContain("⚠ Has errors");
-      expect(result).toContain("#f87171");
+      expect(result).toContain("var(--color-flame-tooltip-error)");
     });
 
     it("should not show error indicator for normal spans", async () => {
@@ -1148,10 +1148,10 @@ describe("FlameGraphView", () => {
 
       expect(result).toContain("<div");
       expect(result).toContain("font-weight: bold");
-      expect(result).toContain("font-size: 11px");
+      expect(result).toContain("font-size: var(--text-2xs)");
       expect(result).toContain("display: flex");
       expect(result).toContain("justify-content: space-between");
-      expect(result).toContain("color: #cbd5e1");
+      expect(result).toContain("color: var(--color-flame-tooltip-label)");
     });
 
     it("should handle very small percentages correctly", async () => {
diff --git a/web/src/components/traces/FlameGraphView.vue b/web/src/components/traces/FlameGraphView.vue
index 5424399cd8..3160469192 100644
--- a/web/src/components/traces/FlameGraphView.vue
+++ b/web/src/components/traces/FlameGraphView.vue
@@ -4,23 +4,23 @@
 -->
 <template>
   <div
-    class="flame-graph-view flex flex-col h-full bg-white w-full bg-[var(--o2-card-bg)]!"
-    style="min-height: 400px; height: 100%"
+    class="flame-graph-view flex flex-col h-full bg-white w-full bg-card-glass-bg!"
+    style="min-height: 400px"
   >
     <!-- Upper area: controls + ruler + chart -->
-    <div class="flex flex-col flex-1" style="min-height: 0">
+    <div class="flex flex-col flex-1 min-h-0">
       <!-- Controls Bar -->
       <div
-        class="px-6 py-3 border-b border-[var(--o2-border)] flex items-center justify-between bg-[var(--o2-card-bg)]!"
+        class="px-6 py-3 border-b border-border-default flex items-center justify-between bg-card-glass-bg!"
       >
         <div class="flex items-center space-x-4">
           <div
-            class="text-xs font-bold text-[var(--o2-text-secondary)]"
+            class="text-xs font-bold text-text-secondary"
           >
-            <span class="text-[var(--o2-text-primary)]">{{ totalSpans }}</span>
+            <span class="text-text-body">{{ totalSpans }}</span>
             {{ t('traces.flameGraphView.spans') }}
             <span class="mx-2">•</span>
-            <span class="text-[var(--o2-text-primary)]">{{ maxDepth }}</span>
+            <span class="text-text-body">{{ maxDepth }}</span>
             {{ t('traces.flameGraphView.depth') }}
           </div>
         </div>
@@ -29,21 +29,20 @@
       <!-- Ruler + chart: outer flex column, mousemove for cursor badge on ruler -->
       <div
         data-test="flame-graph-view-chart-wrapper"
-        class="flex flex-col flex-1"
-        style="min-height: 0"
+        class="flex flex-col flex-1 min-h-0"
         @mousemove="handleChartMouseMove"
         @mouseleave="cursorVisible = false"
       >
         <!-- Timeline Ruler — stays fixed above the scrollable chart -->
         <div
-          class="relative bg-[var(--o2-card-bg)] select-none flex-shrink-0"
+          class="relative bg-card-glass-bg select-none flex-shrink-0"
           style="height: 1.5rem"
         >
           <!-- Static tick labels -->
           <span
             v-for="(tick, index) in timelineTicks"
             :key="'lbl-' + index"
-            class="absolute text-[10px] text-[var(--o2-text-secondary)] leading-none whitespace-nowrap"
+            class="absolute text-3xs text-text-secondary leading-none whitespace-nowrap"
             style="top: 50%; padding-left: 3px"
             :style="{ left: tick.left, transform: tick.transform }"
             >{{ tick.label }}</span
@@ -56,8 +55,7 @@
           >
             <div
               v-if="index > 0 && index < timelineTicks.length - 1"
-              class="absolute w-px"
-              style="bottom: 0; height: 100%; background: #aaa"
+              class="absolute w-px bottom-0 h-full bg-grey-400"
               :style="{ left: tick.left, transform: 'translateX(-50%)' }"
             ></div>
           </template>
@@ -65,12 +63,12 @@
           <!-- Cursor time badge with downward arrow -->
           <div
             v-if="cursorVisible"
-            class="absolute pointer-events-none flex flex-col items-center"
-            style="top: 2px; z-index: 20; transform: translateX(-50%)"
+            class="absolute pointer-events-none flex flex-col items-center z-20"
+            style="top: 2px; transform: translateX(-50%)"
             :style="{ left: cursorX + 'px' }"
           >
             <div
-              class="text-[10px] text-white px-[6px] py-[2px] rounded whitespace-nowrap font-medium"
+              class="text-3xs text-white px-1.5 py-0.5 rounded-default whitespace-nowrap font-medium"
               style="background: rgba(30, 30, 30, 0.9); line-height: 1.4"
             >
               {{ cursorTimeLabel }}
@@ -91,8 +89,7 @@
         <!-- Scrollable chart area: grows to fit all rows, scrolls vertically -->
         <div
           ref="chartScrollRef"
-          class="flex-1 overflow-y-auto relative"
-          style="min-height: 0"
+          class="flex-1 overflow-y-auto overflow-x-hidden relative min-h-0"
         >
           <div
             :style="{
@@ -104,18 +101,17 @@
             <ChartRenderer
               v-if="hasData"
               :data="chartData"
-              style="height: 100%; width: 100%"
+              class="h-full w-full"
               @click="handleChartClick"
             />
 
             <!-- Vertical cursor line -->
             <div
               v-if="cursorVisible"
-              class="absolute top-0 bottom-0 pointer-events-none"
+              class="absolute top-0 bottom-0 pointer-events-none z-10"
               style="
                 width: 1px;
                 background: rgba(80, 80, 80, 0.6);
-                z-index: 10;
               "
               :style="{ left: cursorX + 'px' }"
             ></div>
@@ -129,7 +125,7 @@
         class="absolute inset-0 flex items-center justify-center bg-white"
         style="top: 60px"
       >
-        <div class="text-center text-[var(--o2-text-secondary)]">
+        <div class="text-center text-text-secondary">
           <div class="text-sm">{{ t('traces.flameGraphView.noSpansToDisplay') }}</div>
         </div>
       </div>
@@ -138,7 +134,7 @@
     <!-- Resize handle -->
     <div
       v-if="sidebarVisible"
-      class="h-1 cursor-row-resize bg-[var(--o2-border)] hover:bg-[var(--o2-primary-color)] flex-shrink-0 transition-colors"
+      class="h-1 cursor-row-resize bg-border-default hover:bg-accent flex-shrink-0 transition-colors"
       style="min-height: 4px"
       data-test="flame-graph-resizer"
       @mousedown="startResize"
@@ -148,7 +144,7 @@
     <div
       v-if="sidebarVisible"
       data-test="trace-details-flame-graph-sidebar"
-      class="border-t border-t-solid border-t-[var(--o2-border-color)] bg-[var(--o2-card-bg)]! flex-shrink-0 overflow-hidden"
+      class="border-t border-t-solid border-t-card-glass-border bg-card-glass-bg! flex-shrink-0 overflow-hidden"
       :style="{ height: bottomPanelHeight + 'px' }"
     >
       <TraceDetailsSidebar
@@ -425,20 +421,20 @@ const chartOptions = computed(() => {
         return `
           <div style="padding: 4px 0;">
             <div style="font-weight: bold; margin-bottom: 6px;">${escapeHtml(span.operationName)}</div>
-            <div style="font-size: 11px; line-height: 1.6;">
+            <div style="font-size: var(--text-2xs); line-height: 1.6;">
               <div style="display: flex; justify-content: space-between; gap: 16px;">
-                <span style="color: #cbd5e1;">${t('traces.flameGraphView.service')}</span>
+                <span style="color: var(--color-flame-tooltip-label);">${t('traces.flameGraphView.service')}</span>
                 <span>${escapeHtml(span.serviceName)}</span>
               </div>
               <div style="display: flex; justify-content: space-between; gap: 16px;">
-                <span style="color: #cbd5e1;">${t('traces.flameGraphView.duration')}</span>
+                <span style="color: var(--color-flame-tooltip-label);">${t('traces.flameGraphView.duration')}</span>
                 <span>${formatDuration(span.durationMs)}</span>
               </div>
               <div style="display: flex; justify-content: space-between; gap: 16px;">
-                <span style="color: #cbd5e1;">${t('traces.flameGraphView.percentOfTrace')}</span>
+                <span style="color: var(--color-flame-tooltip-label);">${t('traces.flameGraphView.percentOfTrace')}</span>
                 <span>${percentage}%</span>
               </div>
-              ${span.hasError ? `<div style="color: #f87171; margin-top: 4px;">${t('traces.flameGraphView.hasErrors')}</div>` : ""}
+              ${span.hasError ? `<div style="color: var(--color-flame-tooltip-error); margin-top: 4px;">${t('traces.flameGraphView.hasErrors')}</div>` : ""}
             </div>
           </div>
         `;
diff --git a/web/src/components/traces/TracesTable.spec.ts b/web/src/components/traces/TracesTable.spec.ts
index b002430ff0..3ba3a209a6 100644
--- a/web/src/components/traces/TracesTable.spec.ts
+++ b/web/src/components/traces/TracesTable.spec.ts
@@ -275,13 +275,13 @@ describe("TenstackTable — generic features", () => {
             accessorKey: "svc",
             header: "SVC",
             size: 150,
-            meta: { cellClass: "text-[var(--o2-text-1)]" },
+            meta: { cellClass: "text-[var(--color-text-secondary)]" },
           },
         ],
         rows: [{ svc: "auth" }],
       });
       const tds = wrapper.findAll("td[data-test]");
-      expect(tds[0].classes()).toContain("text-[var(--o2-text-1)]");
+      expect(tds[0].classes()).toContain("text-[var(--color-text-secondary)]");
     });
   });
 
diff --git a/web/src/composables/dashboard/usePanelDataLoader.ts b/web/src/composables/dashboard/usePanelDataLoader.ts
index e95a471d05..3de11a9501 100644
--- a/web/src/composables/dashboard/usePanelDataLoader.ts
+++ b/web/src/composables/dashboard/usePanelDataLoader.ts
@@ -466,7 +466,6 @@ export const usePanelDataLoader = (
     async (newVal, oldVal) => {
       log("PanelSchema/Time Wather: called");
 
-      // CRITICAL FIX: Check if this specific panel should refresh
       // If panelIdToBeRefreshed is set and doesn't match this panel, skip loading
       // This prevents all panels from refreshing when only one panel's time changes
       if (
@@ -515,23 +514,13 @@ export const usePanelDataLoader = (
       case "promql": {
         // A PromQL failure comes back as the backend's internal envelope
         // ("Error during planning: ErrorCode# {...}") rather than a sentence.
-        // Shown raw, that is what a user reads on a broken panel; the sentence
-        // they need is buried in the middle of it. parseSearchError digs it out
-        // and truncates, so this branch no longer has to.
-        // No `""` fallback. `parseSearchError` guarantees a non-empty message —
-        // "a card or panel that failed has to say *something*" — and passing ""
-        // is precisely what defeats it: an error whose body carries no `error`,
-        // no `message` and no `error.message` (a bare network failure, a 502 with
-        // an empty body) fell through to the fallback and rendered as a BLANK
-        // error, which reads as a second bug on top of the first.
+        // parseSearchError digs the readable message out and truncates it, and
+        // guarantees a non-empty message.
         const parsed = parseSearchError(error);
 
         state.errorDetail = {
           message: parsed.message,
-          // No `?? error.response.status` fallback: `parseSearchError` already folds
-          // the HTTP status into `code` (searchError.ts), so the fallbacks were
-          // unreachable — and code that cannot run is code that lies about what the
-          // function above it does.
+          // `parseSearchError` already folds the HTTP status into `code`.
           code: parsed.code ?? "",
         };
         break;
@@ -697,9 +686,9 @@ export const usePanelDataLoader = (
       threshold: 0, // Adjust as needed
     });
 
-    // Keep the working solution - setTimeout ensures the element is fully rendered
-    // This is necessary because IntersectionObserver checks immediately after observe()
-    // but the element might not be fully laid out yet (especially in popups/drawers)
+    // setTimeout ensures the element is fully rendered: IntersectionObserver
+    // checks immediately after observe(), but the element might not be fully
+    // laid out yet (especially in popups/drawers).
     setTimeout(() => {
       if (chartPanelRef?.value) {
         observer.observe(chartPanelRef?.value);
diff --git a/web/src/composables/dashboard/usePanelDrilldown.ts b/web/src/composables/dashboard/usePanelDrilldown.ts
index 7cb6ffdccb..0a2b112f40 100644
--- a/web/src/composables/dashboard/usePanelDrilldown.ts
+++ b/web/src/composables/dashboard/usePanelDrilldown.ts
@@ -317,7 +317,7 @@ export function usePanelDrilldown({
             placeHolder: `{{${variable.name}}}`,
             value: queryType === "sql" ? value : variable.value.join("|"),
           },
-          // Dollar-sign forms (existing)
+          // Dollar-sign forms
           {
             placeHolder: `\${${variable.name}:csv}`,
             value: variable.value.join(","),
diff --git a/web/src/composables/dashboard/usePanelPromQLExecutor.ts b/web/src/composables/dashboard/usePanelPromQLExecutor.ts
index dce0ca4ca0..880dae8e54 100644
--- a/web/src/composables/dashboard/usePanelPromQLExecutor.ts
+++ b/web/src/composables/dashboard/usePanelPromQLExecutor.ts
@@ -98,8 +98,7 @@ export const usePanelPromQLExecutor = (ctx: {
       const queryMetadata: any[] = [];
       const completedQueries = new Set<number>(); // Track completed queries
 
-      // Process each query using streaming
-      // Process all queries in parallel using Promise.all
+      // Process all queries in parallel using streaming
       await Promise.all(
         panelSchema.value.queries.map(async (it, queryIndex) => {
           const { query: query1, metadata: metadata1 } = replaceQueryValue(
@@ -131,10 +130,7 @@ export const usePanelPromQLExecutor = (ctx: {
 
           // "0" is not a step — it is the panel schema's way of saying "no step
           // set, let the server decide", and it is what a dashboard panel
-          // carries by default. Treating it as an explicit value made it beat
-          // the heatmap cap below (the metrics editor's blob has `null` here,
-          // which is why the same heatmap was bounded there and unbounded on a
-          // dashboard). Normalising it to `undefined` changes nothing else: the
+          // carries by default. Normalising it to `undefined` here is safe: the
           // fallback at the end sends "0" anyway.
           const explicitStep = (value?: string) => {
             const trimmed = value?.trim();
@@ -148,35 +144,18 @@ export const usePanelPromQLExecutor = (ctx: {
 
           // A heatmap's cost is COLUMNS x ROWS, and `step: "0"` hands the column
           // count to the backend — which returns ~300 points regardless of
-          // range. Against a ~24-bucket histogram that is ~7,000 cells for a
-          // full-size panel, and ECharts falls over drawing them. Nothing is
-          // gained by it either: you cannot see more columns than the panel has
-          // pixels.
-          //
-          // So a heatmap without an explicit step gets one that bounds the
-          // columns. EVERY heatmap, not only the Prometheus-histogram mode that
-          // prompted this: the argument is about pixels, not about buckets, so
-          // it holds for a `sum by (pod)` heatmap just as well, and a rule that
-          // applied to one chart and not another would be a rule nobody could
-          // predict. A saved panel therefore redraws at up to 120 columns rather
-          // than ~300 — coarser, but only in a dimension the panel was never
-          // wide enough to show. An explicit `step_value` still wins.
-          //
-          // Same helper the Metrics Explorer cards use (a coarse step is why the
-          // same metric renders fine on a card and kills the editor), so the two
-          // cannot drift.
+          // range. Against a multi-bucket histogram that is enough cells to make
+          // ECharts fall over. So a heatmap without an explicit step gets one
+          // that bounds the columns (applies to EVERY heatmap). An explicit
+          // `step_value` still wins.
           const isHeatmap = panelSchema.value?.type === "heatmap";
           const heatmapStepValue =
             isHeatmap && !queryStepValue && !panelStepValue
               ? `${computeStepSeconds(
                   // MILLISECONDS. `usePanelDataLoader` builds these with
-                  // `new Date(...).getTime()` (:408), and only the request payload
-                  // converts to the microseconds the backend wants — these raw
-                  // values never are. Dividing by 1e6 made the range look ~1000x
-                  // shorter, so the step collapsed to MIN_STEP_SECONDS and the cap
-                  // silently inverted: 15s columns at ANY range. A 24h heatmap asked
-                  // for 5,760 columns instead of 120 — worse than no cap at all,
-                  // because the backend's own default would have returned ~300.
+                  // `new Date(...).getTime()`; only the request payload converts
+                  // to the microseconds the backend wants — these raw values
+                  // never are. Divide by 1000 (not 1e6) to get seconds.
                   (endISOTimestamp - startISOTimestamp) / 1000,
                   HEATMAP_MAX_COLUMNS,
                 )}s`
@@ -270,13 +249,9 @@ export const usePanelPromQLExecutor = (ctx: {
             // Mark this query as completed (even with error)
             completedQueries.add(queryIndex);
 
-            // Through the shared reader. The backend hands back its internal
-            // envelope ("Error during planning: ErrorCode# {...}") rather than a
-            // sentence, and reading `content.message` raw is what put that in
-            // front of users. This is the path a dashboard actually takes —
-            // `usePanelDataLoader.processApiError` handles the axios path and is
-            // never called for a streaming query, so unwrapping there alone left
-            // the envelope on screen exactly where it is most often seen.
+            // parseSearchError unwraps the backend's internal error envelope
+            // ("Error during planning: ErrorCode# {...}") into a readable
+            // sentence; the raw `content.message` would show the envelope.
             const parsed = parseSearchError(err, "Unknown error");
 
             state.errorDetail = {
diff --git a/web/src/composables/dashboard/usePanelSearchHandlers.ts b/web/src/composables/dashboard/usePanelSearchHandlers.ts
index b9435efd03..2f98894c57 100644
--- a/web/src/composables/dashboard/usePanelSearchHandlers.ts
+++ b/web/src/composables/dashboard/usePanelSearchHandlers.ts
@@ -23,9 +23,8 @@ import {
  * Composable that encapsulates all streaming search response event handlers
  * for histogram / SQL panel queries.
  *
- * All handlers receive `state` by reference (it is the same reactive object
- * created in usePanelDataLoader) so mutations here are equivalent to
- * mutations in the original closure ΓÇö no behavioural change.
+ * All handlers receive `state` by reference (the same reactive object created
+ * in usePanelDataLoader), so mutations here update the caller's state directly.
  */
 export const usePanelSearchHandlers = ({
   state,
diff --git a/web/src/composables/dashboard/useVariablesManager.ts b/web/src/composables/dashboard/useVariablesManager.ts
index f9570af78a..d820900043 100644
--- a/web/src/composables/dashboard/useVariablesManager.ts
+++ b/web/src/composables/dashboard/useVariablesManager.ts
@@ -567,7 +567,7 @@ export const useVariablesManager = () => {
     variablesData.isInitialized = true;
   };
 
-  // ========== COMMIT MECHANISM (like __global in main branch) ==========
+  // ========== COMMIT MECHANISM ==========
   /**
    * Commits all live variable changes to committed state
    * This is triggered when user clicks the Dashboard Refresh button
@@ -841,7 +841,6 @@ export const useVariablesManager = () => {
 
   /**
    * Get COMMITTED variables for a panel (used by panels for queries)
-   * This is similar to how panels use currentVariablesDataRef.__global in main branch
    */
   const getCommittedVariablesForPanel = (
     panelId: string,
diff --git a/web/src/composables/fieldValueDB.ts b/web/src/composables/fieldValueDB.ts
index 152c7789bb..79217378f4 100644
--- a/web/src/composables/fieldValueDB.ts
+++ b/web/src/composables/fieldValueDB.ts
@@ -24,10 +24,8 @@
  *   Index 1  : by_expires (expiresAt)  — used by evictExpired for TTL sweeps
  *   Index 2  : by_updated (updatedAt)  — used by trimToMaxFields to evict LRU
  *
- * Why two indexes?
- *   evictExpired needs records sorted by expiry time (delete the expired ones).
- *   trimToMaxFields needs records sorted by last-used time (delete the oldest).
- *   These are different orderings so they require separate indexes.
+ * Two indexes because the orderings differ: by expiry time (TTL) vs by
+ * last-used time (LRU).
  */
 
 const DB_NAME = "o2FieldValues";
@@ -50,22 +48,13 @@ let _db: IDBDatabase | null = null;
 
 /**
  * Opens the database lazily — returns the cached connection on subsequent calls.
+ * Lazy open avoids the ~5–10ms IDB open cost for users who never trigger
+ * autocomplete; the cached connection is reused so all operations share one
+ * transaction queue.
  *
- * Why lazy (open on first use, not at app startup)?
- * IDB open is async and costs ~5–10ms. Opening eagerly would always pay that
- * cost even if the user never uses the query editor or never triggers
- * autocomplete. Lazy open means zero cost for users who don't need it.
- *
- * Why cache the connection in _db?
- * IDBDatabase.open() creates a new connection object each time. Connections
- * are cheap but not free. More importantly, reusing one connection means all
- * operations share the same transaction queue, which is correct IDB behaviour.
- *
- * onclose / onversionchange handlers:
- * If another tab opens a newer version of this DB (DB_VERSION bumped in a
- * future release), the browser fires versionchange on existing connections and
- * then closes them. We close and null out _db so the next call to openDB()
- * reopens cleanly with the new version.
+ * onclose / onversionchange: if another tab opens a newer DB version, the
+ * browser closes existing connections — we null out _db so the next openDB()
+ * reopens cleanly.
  */
 export const openDB = (): Promise<IDBDatabase> => {
   if (_db) return Promise.resolve(_db);
@@ -103,19 +92,13 @@ export const openDB = (): Promise<IDBDatabase> => {
  * Used by captureFromValuesApi (Values API path — one field at a time).
  *
  * Merge strategy:
- *   existing values + incoming values → deduplicate via Set → cap to maxValues
- *   If total > maxValues, keep the LAST maxValues (most recently seen / freshest).
+ *   existing values + incoming values → deduplicate via Set → cap to maxValues,
+ *   keeping the LAST maxValues (freshest).
  *
- * Why sliding TTL (reset expiresAt on every write)?
- *   Fields from streams you query frequently stay fresh forever — every new
- *   search resets their 7-day clock. Fields from streams you stop using expire
- *   naturally after 7 days of inactivity without any manual cleanup.
+ * Sliding TTL: expiresAt is reset on every write, so frequently-queried fields
+ * stay fresh and streams you stop using expire naturally after the TTL.
  *
- * Why track source ("values_api" | "search_hits" | "mixed")?
- *   Purely for debugging. In DevTools → Application → IndexedDB you can see
- *   whether a field's values came from explicit field expansion (values_api),
- *   passively from search results (search_hits), or both (mixed). Helps when
- *   investigating why certain values appear or don't appear in autocomplete.
+ * `source` ("values_api" | "search_hits" | "mixed") is tracked for debugging only.
  */
 export const mergeValues = async (
   key: string,
@@ -132,13 +115,10 @@ export const mergeValues = async (
     getReq.onsuccess = () => {
       const existing: FieldValueRecord | undefined = getReq.result;
       // Combine existing + incoming into a Set for automatic deduplication.
-      // No need to manually check "have I seen this value before?".
       const valueSet = new Set(existing?.values ?? []);
       for (const v of incoming) valueSet.add(String(v));
       const merged = Array.from(valueSet);
-      // Keep the last maxValues entries — the most recently added values are
-      // at the end of the array and are most likely to be relevant to the
-      // user's current query context.
+      // Keep the last maxValues entries (most recently added, at the array's end).
       const values =
         merged.length > maxValues
           ? merged.slice(merged.length - maxValues)
@@ -166,14 +146,9 @@ export const mergeValues = async (
  * Merge values for multiple fields in a single IDB transaction.
  * Used by captureFromSearchHits — the hot path after every Run Query.
  *
- * Why one transaction instead of N mergeValues calls?
- * IDB transactions have a fixed cost: acquire the store lock, execute
- * operations, commit. If a stream has 40 fields, calling mergeValues 40 times
- * = 40 separate transactions = 40× that fixed cost. One transaction with 40
- * get+put operations = 1× that cost. On a wide schema this is ~40× cheaper.
- *
- * The merge logic per field is identical to mergeValues above — the only
- * difference is that all operations share one tx.oncomplete callback.
+ * One transaction instead of N mergeValues calls: IDB transactions have a fixed
+ * per-tx cost, so batching 40 fields into one tx is ~40× cheaper than 40 txs.
+ * Per-field merge logic is identical to mergeValues.
  */
 export const mergeMultipleValues = async (
   entries: Array<{
@@ -217,8 +192,7 @@ export const mergeMultipleValues = async (
       };
     }
 
-    // All get+put operations for every field complete before this fires.
-    // Resolving here means the caller knows the full batch is safely written.
+    // Resolves once every field's get+put has completed — the full batch is written.
     tx.oncomplete = () => resolve();
     tx.onerror = () => reject(tx.error);
   });
@@ -228,11 +202,8 @@ export const mergeMultipleValues = async (
  * Fast point-read for a single field's values.
  * Returns empty array if record is missing or expired.
  *
- * Why check expiresAt at read time (not just rely on evictExpired)?
- * evictExpired only runs on ~5% of searches — a record can be expired but not
- * yet swept from the DB. Without this check, we could serve stale values to
- * autocomplete for up to several searches after the TTL has passed.
- * This makes the read authoritative regardless of when cleanup last ran.
+ * Checks expiresAt at read time (not just via evictExpired, which runs on ~5%
+ * of searches) so an expired-but-not-yet-swept record never serves stale values.
  */
 export const getValues = async (key: string): Promise<string[]> => {
   let db: IDBDatabase;
@@ -268,16 +239,9 @@ export const getValues = async (key: string): Promise<string[]> => {
  * Evict all records whose expiresAt < now (TTL cleanup).
  * Called opportunistically on ~5% of searches to amortize the scan cost.
  *
- * Why use the by_expires index instead of a full store scan?
- * A full scan would read every record regardless of expiry status.
- * IDBKeyRange.upperBound(now, true) on the by_expires index reads ONLY records
- * with expiresAt < now — exactly the ones we want to delete. On 5000 records
- * with 10 expired, this reads 10 records instead of 5000. O(expired) not O(total).
- *
- * Why "opportunistic" (5% chance) instead of every search?
- * When nothing has expired (the common case), this scan still costs ~5–10ms.
- * Running it on every search wastes that time for zero benefit. 1-in-20 gives
- * periodic cleanup while spreading the cost across many searches.
+ * Uses the by_expires index so the cursor reads ONLY expired records —
+ * O(expired), not O(total). Opportunistic rather than every-search because the
+ * scan costs ~5–10ms even when nothing has expired.
  */
 export const evictExpired = async (): Promise<number> => {
   const db = await openDB();
@@ -308,15 +272,9 @@ export const evictExpired = async (): Promise<number> => {
  * Trim total record count to maxFields — evict least-recently-used fields first.
  * Called opportunistically alongside evictExpired (~5% of searches).
  *
- * Why trim by updatedAt (oldest first)?
- * Fields with the oldest updatedAt are the ones the user hasn't queried in the
- * longest time — least likely to be useful in autocomplete. Evicting them
- * preserves the most relevant, recently-used field values.
- *
- * Why is this a last-resort guard?
- * In practice, 5000 fields = ~100 streams × 50 fields each, which is far more
- * than most users will encounter. This function is mainly here to prevent
- * unbounded growth in edge cases (many orgs, many streams, very long sessions).
+ * Trims by updatedAt (oldest first): the least-recently-queried fields are least
+ * useful in autocomplete. A last-resort guard against unbounded growth in edge
+ * cases (many orgs/streams, very long sessions).
  */
 export const trimToMaxFields = async (maxFields: number): Promise<void> => {
   const db = await openDB();
diff --git a/web/src/composables/metrics/useFilterHint.ts b/web/src/composables/metrics/useFilterHint.ts
index 11582d55c2..e4756c5114 100644
--- a/web/src/composables/metrics/useFilterHint.ts
+++ b/web/src/composables/metrics/useFilterHint.ts
@@ -19,28 +19,16 @@ import { useTypewriterPlaceholder } from "@/components/ai-assistant/welcome/useT
 /**
  * The typewriter hint on the empty filter row.
  *
- * Prefers the org's REAL label names — the way the Logs editor's placeholder is
- * generated from real stream fields rather than invented copy — and falls back to
- * static examples until they exist.
- *
- * The fallback is the common case, and deliberately so: label names are fetched
- * lazily, on the first click of `+ Filter` (`@focus-picker`), because the call
- * walks up to three widening time windows against a backend that already times
- * out on heavy metrics. Firing that on every page load to animate a hint would
- * be a bad trade. So the row teaches the SHAPE of a filter for free, and sharpens
- * itself into real names once the user has opened the picker once.
+ * Prefers the org's real label names, falling back to static examples until they
+ * exist. Label names are fetched lazily on the first click of `+ Filter`
+ * (`@focus-picker`) — that call walks up to three widening time windows against a
+ * backend that already times out on heavy metrics, so it must not fire on page load.
  */
 
 /**
- * Matcher shapes, not real labels — examples of syntax, so they do not pretend
- * to be this org's data.
- *
- * Two of the four demonstrate ALTERNATION (`a|b`) rather than just regex,
- * because that is the one thing the UI cannot otherwise teach: chips are ANDed,
- * PromQL has no selector-level OR, and this engine rejects `or` matchers — so
- * `=~ "500|503"` is the ONLY way to say "either of these", and nothing else on
- * screen would ever show a user that. A bare `5..` proves regex works but leaves
- * the question they actually have unanswered.
+ * Matcher shapes, not real labels — examples of syntax. Two of the four show
+ * ALTERNATION (`a|b`): chips are ANDed and this engine has no OR matcher, so
+ * `=~ "500|503"` is the only way to say "either of these".
  */
 const EXAMPLES = [
   'pod = "api-1"',
diff --git a/web/src/composables/metrics/useMetricsExplorerGrid.spec.ts b/web/src/composables/metrics/useMetricsExplorerGrid.spec.ts
index ebd1f66b5f..8fcec04c16 100644
--- a/web/src/composables/metrics/useMetricsExplorerGrid.spec.ts
+++ b/web/src/composables/metrics/useMetricsExplorerGrid.spec.ts
@@ -655,13 +655,59 @@ describe("useMetricsExplorerGrid", () => {
 
       expect(grid.pagedCards.value).toHaveLength(INITIAL_PAGE_SIZE);
 
+      /**
+       * Answer every query the grid fires for this preview, until it goes quiet.
+       *
+       * The shared `landPreview` caps itself at 5 rounds, which is not enough
+       * here: partway through the loop below the grid's own debounced sweep
+       * (SWEEP_DEBOUNCE_MS) fires and resolves the REST of the slice, six
+       * queries at a time. Those batches arrive on later rounds, so a 5-round
+       * cap stops answering and strands them, and the awaited preview never
+       * settles — the test times out rather than failing an assertion. Draining
+       * to quiescence is timing-independent; the round cap only exists so a
+       * genuine storm terminates the test instead of hanging it.
+       */
+      /**
+       * Count only the queries THIS org fires. Earlier tests in this file leave
+       * their own grids' debounced sweeps running, and those land in the shared
+       * `inFlight` array during the rounds below — they are this file's own
+       * cross-talk (they name `cpu_temperature`, `lat_seconds_*`, `code="500"`
+       * …, none of which exist in `sparseOrg`), not a storm from this grid.
+       */
+      const asked: number[] = [];
+      const drain = async (preview: Promise<any>) => {
+        for (let round = 0; round < 100; round++) {
+          await flush();
+          if (!inFlight.length) break;
+          for (const q of inFlight) {
+            const m = q.query.match(/metric_(\d+)_total/);
+            if (m) asked.push(Number(m[1]));
+          }
+          inFlight.splice(0, inFlight.length).forEach((q) => q.complete(NO_SERIES));
+        }
+        await preview;
+      };
+
       // Every card on the page comes back empty — the worst case.
       const page = [...grid.pagedCards.value];
       for (const card of page) {
-        await landPreview(grid.requestPreview(card), NO_SERIES);
+        await drain(grid.requestPreview(card));
         inFlight.length = 0;
       }
 
+      // The point of the test, now actually measured rather than assumed.
+      // No metric outside the first page is ever queried: this is the cascade
+      // itself, caught at the query layer rather than only at its after-effect.
+      expect(Math.max(...asked)).toBeLessThan(INITIAL_PAGE_SIZE);
+      expect(new Set(asked).size).toBe(INITIAL_PAGE_SIZE);
+      // And each card is asked at most twice — the rate query, plus the presence
+      // probe that confirms an empty rate() result is real.
+      const perMetric = [...new Set(asked)].map(
+        (i) => asked.filter((a) => a === i).length,
+      );
+      expect(Math.max(...perMetric)).toBeLessThanOrEqual(2);
+      expect(asked).toHaveLength(2 * INITIAL_PAGE_SIZE);
+
       // The page is now EMPTY (all 30 hidden) — it must not have refilled itself
       // from the other 470 metrics.
       expect(grid.pagedCards.value).toHaveLength(0);
diff --git a/web/src/composables/metrics/useMetricsExplorerGrid.ts b/web/src/composables/metrics/useMetricsExplorerGrid.ts
index 112bda8446..bf88436a33 100644
--- a/web/src/composables/metrics/useMetricsExplorerGrid.ts
+++ b/web/src/composables/metrics/useMetricsExplorerGrid.ts
@@ -206,18 +206,14 @@ const PREVIEW_STATE_LIMIT = 300;
 /**
  * Page one holds this many cards; "Show more" reveals another increment.
  *
- * This IS an upfront query budget, whatever an earlier version of this comment
- * claimed. `hideEmptyPanels` defaults on, and emptiness is only knowable by
- * asking, so `sweepSlice` queries the WHOLE slice on load — not just what is on
- * screen. At 30 that was 30 PromQL range queries before the user had done
- * anything, against a backend that already times out on heavy metrics, and most
- * of the answers were thrown away: a typical org hides two thirds of them as
- * empty and renders ~11.
+ * This is an upfront query budget: `hideEmptyPanels` defaults on and emptiness
+ * is only knowable by asking, so `sweepSlice` queries the WHOLE slice on load —
+ * not just what is on screen. Kept small because the backend already times out
+ * on heavy metrics and most answers are thrown away (a typical org hides two
+ * thirds as empty).
  *
- * 8 is four rows of the 2-up grid — a bit more than a screenful, so page one
- * still fills once the empties are dropped, and a click costs another six.
- * Divides evenly by both column counts the grid uses (2, and 1 when narrow), so
- * no row is ever left half-empty at the fold.
+ * 8 is four rows of the 2-up grid — a bit more than a screenful — and divides
+ * evenly by both column counts the grid uses (2, and 1 when narrow).
  */
 export const INITIAL_PAGE_SIZE = 8;
 
@@ -230,13 +226,8 @@ export const SWEEP_DEBOUNCE_MS = 250;
 /**
  * Cards revealed per "Show more" click — three rows of the 2-up grid.
  *
- * Was 12, from when the grid was 3-up (four rows). At 2 columns that reveals six
- * rows at once: more than a screenful, so the user loses their place and pays for
- * a batch of queries they did not ask to see. Six lands just past the fold, which
- * is what makes the click feel like "a bit more" rather than "a whole new page".
- *
- * The button's label is computed from this constant, so it always tells the truth
- * about what a click will do.
+ * Six lands just past the fold, so the click feels like "a bit more" rather than
+ * "a whole new page". The button's label is computed from this constant.
  */
 export const PAGE_SIZE_INCREMENT = 6;
 
@@ -360,9 +351,9 @@ export function useMetricsExplorerGrid() {
 
   const overrides = ref<Record<string, FnOverride>>({});
 
-  // The SCRATCHPAD's pinned metrics — a first-class, persisted (localStorage,
-  // org-keyed) working set of hand-picked metrics. `toggleFavorite` is its writer.
-  // The Workspace tab shows exactly this set (via showFavoritesOnly).
+  // The scratchpad's pinned metrics — a persisted (localStorage, org-keyed)
+  // working set of hand-picked metrics. `toggleFavorite` is its writer, and the
+  // Workspace tab shows exactly this set (via showFavoritesOnly).
   const favorites = ref<string[]>([]);
 
   const loadLocalState = () => {
@@ -480,11 +471,8 @@ export function useMetricsExplorerGrid() {
 
   /**
    * The load currently in flight, so a second caller AWAITS it instead of
-   * returning early. `ensureSchemas` used to answer `void` while
-   * `schemaLoading` was true — but `loadLabelValues` awaits it precisely to
-   * read `labelsByStream` on the next line, so the early return handed it an
-   * empty map, its fan-out matched no streams, and the resulting `[]` was
-   * cached as this label's answer for the whole session.
+   * returning early — callers like `loadLabelValues` read `labelsByStream`
+   * immediately after awaiting, so an early return would hand them an empty map.
    */
   let schemaInFlight: Promise<void> | null = null;
 
@@ -542,20 +530,14 @@ export function useMetricsExplorerGrid() {
 
   /**
    * Do we KNOW the label membership — not "did we finish trying to find out".
-   *
-   * `schemaLoaded` is set even when the load FAILS (that is what stops it
-   * retrying on every keystroke), so gating eligibility on it meant a failed
-   * load left an empty `labelsByStream` behind a flag that said "loaded". Every
-   * card then failed the membership test and the grid went blank the moment a
-   * chip was added — the exact opposite of the fail-open it documents. Without
-   * membership data we cannot prove a card ineligible, so we do not claim it is.
+   * `schemaLoaded` is set even when the load FAILS, so it cannot answer this:
+   * without membership data we cannot prove a card ineligible, so we do not
+   * claim it is (fail open).
    *
    * A `computed`, NOT an `Object.keys` call inside `isLabelEligible`: that runs
-   * once per card across five separate passes (`filteredCards`,
-   * `emptyHiddenCount` and the three facet counts), so materialising a
-   * 3,000-element key array in it cost ~90ms per keystroke on a large org — the
-   * search box visibly stuttered on every character. `labelsByStream` is a
-   * shallowRef, so this recomputes only when the map is actually replaced.
+   * once per card across five separate passes, so materialising a 3,000-element
+   * key array in it cost ~90ms per keystroke on a large org. `labelsByStream` is
+   * a shallowRef, so this recomputes only when the map is actually replaced.
    */
   const membershipKnown = computed(
     () => Object.keys(labelsByStream.value).length > 0,
@@ -947,13 +929,9 @@ export function useMetricsExplorerGrid() {
    * The org's scrape interval — the SAME field the panel substitution resolves
    * `$__rate_interval` against (usePanelVariableSubstitution).
    *
-   * The rate window is `max(step + scrape, 4 * scrape)`. Assuming a scrape
-   * interval of our own here meant a card charted a metric with different
-   * smoothing from the panel you land on when you click it: `[4m]` on the card
-   * against `[1m]` in the editor, for the same metric at the same range. One
-   * source of truth, so the drill-in is what you actually clicked — and if the
-   * number is wrong, it is wrong in one place for the whole product rather than
-   * in two places that disagree.
+   * The rate window is `max(step + scrape, 4 * scrape)`. One source of truth, so
+   * a card charts a metric with the same smoothing as the panel you land on when
+   * you click it, rather than two places that disagree.
    */
   const scrapeIntervalSeconds = computed(
     () =>
@@ -968,14 +946,11 @@ export function useMetricsExplorerGrid() {
   /**
    * How many points a card's preview asks for. Heatmaps are coarser.
    *
-   * EVERY derivation must go through this, including the default below. The rate
-   * window is computed from the point count, and above ~2h of range the
-   * 4x-scrape floor stops dominating, so 40 points and 50 points produce
-   * genuinely different queries: at 6h, `[10m]` against `[8m12s]`. Callers that
-   * took the old `PREVIEW_POINTS` default therefore disagreed with the ones that
-   * used `pointsFor` — a histogram card CHARTED one query and handed a different
-   * one to the editor on click, and the dialog's default tile could not hit the
-   * cache entry the card had just filled.
+   * EVERY derivation must go through this. The rate window is computed from the
+   * point count, and above ~2h of range the 4x-scrape floor stops dominating, so
+   * 40 points and 50 points produce genuinely different queries (at 6h, `[10m]`
+   * against `[8m12s]`). A caller using a different point count would generate a
+   * query the card, editor and dialog tile could not share via the cache.
    */
   const pointsFor = (card: MetricCard) =>
     card.chartType === "heatmap" ? HEATMAP_POINTS : PREVIEW_POINTS;
@@ -1098,9 +1073,8 @@ export function useMetricsExplorerGrid() {
   /**
    * Drops a card's rendered preview and abandons whatever it still has running.
    *
-   * The queue is keyed on the generated query string, never on the card name —
-   * cancelling `card:<name>` matched nothing and silently left the superseded
-   * query holding a concurrency slot.
+   * The queue is keyed on the generated query string, never on the card name, so
+   * cancellation must go through the card's query keys.
    *
    * @param alsoCancel keys the card occupied under a state it has since left.
    *   `previewKeysOf` can only describe the CURRENT state, so a caller that
@@ -1367,15 +1341,11 @@ export function useMetricsExplorerGrid() {
       nanGuardApplied: !!cached.value.nanGuardApplied,
       /**
        * The window this data was actually FETCHED for — not the one currently
-       * selected. The card pins its x-axis to this.
-       *
-       * Without it the axis was pinned to `timeRange`, which a relative range
-       * re-stamps to `now` on every mount: the axis marched forward with the
-       * wall clock while the cached points underneath stayed put, so a chart
-       * claimed to show 10:15-10:30 while plotting data from 09:40. Dashboards
-       * avoid this by restoring `metadata` from the cache too
-       * (usePanelDataLoader.ts:841) and pinning from the QUERY's window, never
-       * the selected one — this is the same idea, carried on the preview.
+       * selected. The card pins its x-axis to this so a relative range that
+       * re-stamps `timeRange` to `now` on every mount does not march the axis
+       * forward while the cached points underneath stay put. Same idea as the
+       * dashboards restoring `metadata` and pinning from the QUERY's window
+       * (usePanelDataLoader.ts:841), carried on the preview.
        */
       cachedTimeRange:
         range.start_time && range.end_time
@@ -1526,8 +1496,7 @@ export function useMetricsExplorerGrid() {
       cachedDataDiffersFromTimeRange: false,
       // Carried with `results` above: a re-query keeps the OLD chart on screen
       // while it runs, so the axis must keep describing that old data until the
-      // new data lands. Dropping it snapped the axis to the selected window for
-      // the duration of every refresh, then back — a visible twitch.
+      // new data lands.
       cachedTimeRange: existing?.cachedTimeRange ?? null,
       footerLabel: resolved.footerLabel,
     };
@@ -1737,13 +1706,6 @@ export function useMetricsExplorerGrid() {
     queue.clearCache();
   };
 
-  /**
-   * Runs one query for a ⚙-dialog tile.
-   *
-   * Deliberately shares the grid's scheduler and cache: dialog tiles outrank
-   * background grid work while the dialog is open, and a tile whose query the
-   * grid already ran is a cache hit rather than a second request.
-   */
   /** Distinguishes dialog interest from card interest on the same query. */
   const DIALOG_OWNER = "\u0000dialog";
 
@@ -1796,15 +1758,13 @@ export function useMetricsExplorerGrid() {
    *
    * The names are WINDOW-SCOPED: `labels` is asked over `start_time`/`end_time`,
    * so a label that only exists on a job that ran last week is absent from a
-   * 15-minute window and present in a 30-day one. Caching them for the life of
-   * the page, as this did, meant the picker kept offering the first window's
-   * answer forever — widen the range to go looking for a label, and the label
-   * still would not be there.
+   * 15-minute window and present in a 30-day one — the picker must re-ask when
+   * the window changes.
    *
-   * A plain `labelNames.value = []` would not be enough: a request already in
-   * flight for the OLD window would land afterwards and repopulate the list with
-   * exactly the stale answer we were trying to drop. The generation is what lets
-   * that late response identify itself as obsolete and do nothing.
+   * A plain `labelNames.value = []` is not enough: a request already in flight
+   * for the OLD window would land afterwards and repopulate the list with the
+   * stale answer. The generation lets that late response identify itself as
+   * obsolete and do nothing.
    */
   let labelNamesGeneration = 0;
 
diff --git a/web/src/composables/metrics/useMetricsPreviewQueue.ts b/web/src/composables/metrics/useMetricsPreviewQueue.ts
index fd234f014a..6eeb56cd89 100644
--- a/web/src/composables/metrics/useMetricsPreviewQueue.ts
+++ b/web/src/composables/metrics/useMetricsPreviewQueue.ts
@@ -67,14 +67,7 @@ interface PendingJob {
    * last owner has let go.
    */
   waiters: Waiter[];
-  /**
-   * Whether this job's result may enter the LRU.
-   *
-   * Lives on the JOB, not in a side Set keyed by request key. The Set only ever
-   * grew: every label-value fan-out mints keys that embed the time range, so it
-   * accumulated a fresh entry per label per range for the life of the page and
-   * nothing ever removed them. The flag dies with the job it describes.
-   */
+  /** Whether this job's result may enter the LRU. */
   cache: boolean;
 
   /**
@@ -107,12 +100,6 @@ export interface RunOptions {
    * This is what a refresh means, and it is not `cache: false` — that one also
    * refuses to store the result, so the next card to ask the same question would
    * re-fetch it too.
-   *
-   * Without it, "skip the cache" was only true by accident of call order: the
-   * caller had to remember to wipe the whole LRU first, and a refresh that forgot
-   * was silently answered from the cache it was trying to get past — the user
-   * clicked refresh and got the same stale answer back, instantly, with no way to
-   * tell. The flag belongs on the request that wants fresh data.
    */
   refresh?: boolean;
 }
@@ -297,12 +284,9 @@ export function createPreviewQueue(
       // Same key already running or queued: join it rather than issuing a second
       // identical request.
       // Whoever joins, the STRICTEST intent wins: if any participant says this
-      // result does not belong in the LRU, it does not go in. A joiner used to
-      // inherit whatever the job's creator had asked for, so the answer to
-      // "should this be cached" depended on who happened to ask first — and the
-      // one caller that passes `cache: false` does it to keep label-value strings
-      // out of a cache sized for chart results. Losing that race quietly
-      // reintroduces the eviction storm it exists to prevent.
+      // result does not belong in the LRU, it does not go in. The one caller that
+      // passes `cache: false` does it to keep label-value strings out of a cache
+      // sized for chart results.
       const join = <U>(job: PendingJob): Promise<U> => {
         job.cache = job.cache && cache;
         return attach<U>(job, ownerId);
diff --git a/web/src/composables/shared/router.ts b/web/src/composables/shared/router.ts
index a7afb41840..7fd7322238 100644
--- a/web/src/composables/shared/router.ts
+++ b/web/src/composables/shared/router.ts
@@ -96,7 +96,7 @@ const useRoutes = () => {
     {
       path: "/logout",
       beforeEnter(to: any, from: any, next: any) {
-        // Clear backend auth cookies before redirecting to login (#10900)
+        // Clear backend auth cookies before redirecting to login
         invalidateLoginData();
         useLocalCurrentUser("", true);
         useLocalUserInfo("", true);
diff --git a/web/src/composables/useAiIcon.ts b/web/src/composables/useAiIcon.ts
index 71f6086453..6fd31f9252 100644
--- a/web/src/composables/useAiIcon.ts
+++ b/web/src/composables/useAiIcon.ts
@@ -29,13 +29,15 @@
 
 import { computed } from "vue";
 import { useStore } from "vuex";
+import { useTheme } from "@/composables/useTheme";
 import { getImageURL } from "@/utils/zincutils";
 
 export function useAiIcon() {
   const store = useStore();
+  const { isDark } = useTheme();
 
   const aiIconSrc = computed<string>(() =>
-    store.state.theme === "dark"
+    isDark.value
       ? getImageURL("images/common/ai_icon_dark.svg")
       : getImageURL("images/common/ai_icon_gradient.svg"),
   );
diff --git a/web/src/composables/useAlertForm.ts b/web/src/composables/useAlertForm.ts
index 9a5efbc529..1d770e2b2d 100644
--- a/web/src/composables/useAlertForm.ts
+++ b/web/src/composables/useAlertForm.ts
@@ -64,8 +64,7 @@ import {
   type PayloadContext,
   type SaveAlertContext,
 } from "@/utils/alerts/alertPayload";
-// Pure cron helpers — used by the cron save gate in runImperativeQueryChecks
-// (re-homed from the pre-migration AlertSettings.validateFrequency).
+// Pure cron helpers — used by the cron save gate in runImperativeQueryChecks.
 import {
   getCronIntervalDifferenceInSeconds,
   isAboveMinRefreshInterval,
@@ -223,13 +222,13 @@ export function useAlertForm(props: AlertFormProps, emit: AlertFormEmit) {
   const addAlertForm: any = ref(null);
   const disableColor: any = ref("");
 
-  // ── Headless OForm (Rule ③ OWNER pattern) ─────────────────────────────────
+  // ── Headless OForm ────────────────────────────────────────────────────────
   // AddAlert OWNS the ONE form for the whole wizard (topbar scalars + the
-  // already-migrated descendant steps QueryConfig/AlertSettings bind their
-  // fields by nested `name=` into it). `formData` is a READ-VIEW of the form's
-  // values (form.useStore) — the SINGLE source of truth, no mirror. Every write
-  // goes through setF / resetForm; NEVER mutate the read-view directly (that
-  // bypasses TanStack). See START-HERE.md Rule ③.
+  // descendant steps QueryConfig/AlertSettings bind their fields by nested
+  // `name=` into it). `formData` is a READ-VIEW of the form's values
+  // (form.useStore) — the SINGLE source of truth, no mirror. Every write goes
+  // through setF / resetForm; NEVER mutate the read-view directly (that bypasses
+  // TanStack).
   /** The org's min evaluation frequency, in SECONDS (0 when unset — the schema
    *  then skips the floor rule rather than inventing one). */
   const minAutoRefreshInterval = (): number =>
@@ -534,9 +533,7 @@ export function useAlertForm(props: AlertFormProps, emit: AlertFormEmit) {
   const step4Ref = ref(null);
   const lastValidStep = ref(1);
 
-  // Topbar field refs (for focus-on-error only). The name/stream error states
-  // are now owned by the composed schema (inline OForm* field errors), so the
-  // old alertNameError / streamTypeError / streamNameError refs are removed.
+  // Topbar field refs (for focus-on-error only).
   const streamTypeRef = ref<any>(null);
   const streamNameRef = ref<any>(null);
   const anomalyNameRef = ref<any>(null);
@@ -1163,10 +1160,8 @@ export function useAlertForm(props: AlertFormProps, emit: AlertFormEmit) {
   // AlertSettings) is a DESCENDANT of the ONE AddAlert form, so their field
   // rules run through the composed schema (AddAlert.schema.ts) on the real save
   // path (handleSave → form.handleSubmit), and the non-schema query-text gates
-  // live in runImperativeQueryChecks. The old per-step `.validate()` calls are
-  // gone — the step1Ref one was a permanent no-op anyway (it points at the
-  // topbar OFormInput, a <script setup> component that exposes no validate()).
-  // Kept as a function so wizard navigation keeps its gate seam.
+  // live in runImperativeQueryChecks. Kept as a function so wizard navigation
+  // keeps its gate seam.
   const validateStep = async (_stepNumber: number) => {
     return true;
   };
@@ -1176,7 +1171,7 @@ export function useAlertForm(props: AlertFormProps, emit: AlertFormEmit) {
   };
 
   // Focus the first field showing a validation message. This used to query
-  // `.q-field--error` — a Quasar class with no producer left in the app after the
+  // a legacy error class — one with no producer left in the app after the
   // OForm migration, so it silently matched nothing and the "fix the highlighted
   // fields" toast pointed at a field we never actually focused. OInput/OSelect
   // render their message as [role="alert"] inside the field wrapper, so walk up
@@ -1247,7 +1242,7 @@ export function useAlertForm(props: AlertFormProps, emit: AlertFormEmit) {
     });
   };
 
-  // Focus a topbar q-select/q-input by its Vue component ref
+  // Focus a topbar select/input by its Vue component ref
   const focusTopbarField = (fieldRef: any) => {
     nextTick(() => {
       const el = fieldRef?.value?.$el as HTMLElement | null;
diff --git a/web/src/composables/useCorrelatedLogs.ts b/web/src/composables/useCorrelatedLogs.ts
index 11045fcc8f..c1a4db787d 100644
--- a/web/src/composables/useCorrelatedLogs.ts
+++ b/web/src/composables/useCorrelatedLogs.ts
@@ -125,16 +125,6 @@ export function useCorrelatedLogs(props: CorrelatedLogsProps) {
   // Number of correlated log streams available
   const logStreamsCount = computed(() => props.logStreams.length);
 
-  // REMOVED: getDefaultSemanticPatterns() function
-  // No longer needed - we use exact field names from StreamInfo.filters
-
-  // REMOVED: loadSemanticPatterns() function
-  // No longer needed - we use exact field names from StreamInfo.filters
-
-  // REMOVED: getSemanticToFieldMapping() function
-  // No longer needed - we use exact field names from StreamInfo.filters
-  // The /_correlate API (or fallback) provides the correct field names for each stream
-
   /**
    * Build SQL queries for ALL correlated log streams.
    * Each stream gets its own independent query using its exact field names from StreamInfo.filters.
diff --git a/web/src/composables/useDurationPercentiles.ts b/web/src/composables/useDurationPercentiles.ts
index 0966476200..44013e7e88 100644
--- a/web/src/composables/useDurationPercentiles.ts
+++ b/web/src/composables/useDurationPercentiles.ts
@@ -28,24 +28,6 @@ const DURATION_UNIT_MULTIPLIERS: Record<string, number> = {
   m: 60 * 1_000_000,
 };
 
-/**
- * Converts duration comparisons in a WHERE clause that carry human-readable
- * unit suffixes (produced by `formatTimeWithSuffix`) back to raw microseconds.
- *
- * Accepts a WHERE clause and the already-loaded SQL parser instance.  Wraps
- * the clause in a full `SELECT * FROM "stream" WHERE …` query, uses the parser
- * to produce an AST, walks the tree to locate duration binary expressions whose
- * right-hand side is a quoted string value (e.g. `'1.50ms'`), converts the
- * value, and applies the replacement back on the original WHERE string.
- *
- * Falls back to the original string if the parser throws (malformed input).
- *
- * Examples:
- *   `duration >= '100.00us'`  →  `duration >= 100`
- *   `duration >= '1.50ms'`    →  `duration >= 1500`
- *   `duration >= '2.50s'`     →  `duration >= 2500000`
- *   `duration >= '1.50m'`     →  `duration >= 90000000`
- */
 /** Maps every accepted unit spelling to a canonical key in DURATION_UNIT_MULTIPLIERS. */
 const UNIT_ALIASES: Record<string, string> = {
   // Microseconds
diff --git a/web/src/composables/useEventFormatters.spec.ts b/web/src/composables/useEventFormatters.spec.ts
index a686a5cc53..f05616a41b 100644
--- a/web/src/composables/useEventFormatters.spec.ts
+++ b/web/src/composables/useEventFormatters.spec.ts
@@ -121,36 +121,36 @@ describe("useEventFormatters", () => {
   });
 
   describe("getStatusColorClass", () => {
-    it("returns 'text-gray-500' for 0 (falsy)", () => {
-      expect(formatters.getStatusColorClass(0)).toBe("text-gray-500");
+    it("returns 'text-text-secondary' for 0 (falsy)", () => {
+      expect(formatters.getStatusColorClass(0)).toBe("text-text-secondary");
     });
 
-    it("returns 'text-gray-500' for null-like input", () => {
-      expect(formatters.getStatusColorClass(null as unknown as number)).toBe("text-gray-500");
+    it("returns 'text-text-secondary' for null-like input", () => {
+      expect(formatters.getStatusColorClass(null as unknown as number)).toBe("text-text-secondary");
     });
 
     it("returns positive color class for status 200", () => {
-      expect(formatters.getStatusColorClass(200)).toBe("text-[var(--o2-positive)]");
+      expect(formatters.getStatusColorClass(200)).toBe("text-[var(--color-status-positive)]");
     });
 
     it("returns positive color class for status 201", () => {
-      expect(formatters.getStatusColorClass(201)).toBe("text-[var(--o2-positive)]");
+      expect(formatters.getStatusColorClass(201)).toBe("text-[var(--color-status-positive)]");
     });
 
     it("returns info color class for status 301", () => {
-      expect(formatters.getStatusColorClass(301)).toBe("text-[var(--o2-info)]");
+      expect(formatters.getStatusColorClass(301)).toBe("text-[var(--color-info)]");
     });
 
     it("returns warning color class for status 404", () => {
-      expect(formatters.getStatusColorClass(404)).toBe("text-[var(--o2-warning)]");
+      expect(formatters.getStatusColorClass(404)).toBe("text-[var(--color-warning)]");
     });
 
     it("returns negative color class for status 500", () => {
-      expect(formatters.getStatusColorClass(500)).toBe("text-[var(--o2-negative)]");
+      expect(formatters.getStatusColorClass(500)).toBe("text-[var(--color-status-negative)]");
     });
 
     it("returns negative color class for status 502", () => {
-      expect(formatters.getStatusColorClass(502)).toBe("text-[var(--o2-negative)]");
+      expect(formatters.getStatusColorClass(502)).toBe("text-[var(--color-status-negative)]");
     });
   });
 
@@ -190,7 +190,7 @@ describe("useEventFormatters", () => {
   describe("getEventTypeClass", () => {
     it("returns error CSS classes for type 'error'", () => {
       expect(formatters.getEventTypeClass("error")).toBe(
-        "bg-red-100 text-red-700 border border-solid border-red-300"
+        "bg-error-100 text-error-700 border border-solid border-error-300"
       );
     });
 
@@ -202,13 +202,13 @@ describe("useEventFormatters", () => {
 
     it("returns view CSS classes for type 'view'", () => {
       expect(formatters.getEventTypeClass("view")).toBe(
-        "bg-green-100 text-green-700 border border-solid border-green-300"
+        "bg-success-100 text-success-700 border border-solid border-success-400"
       );
     });
 
     it("returns resource CSS classes for type 'resource'", () => {
       expect(formatters.getEventTypeClass("resource")).toBe(
-        "bg-purple-100 text-purple-700 border border-solid border-purple-300"
+        "bg-purple-100 text-purple-700 border border-solid border-purple-400"
       );
     });
 
diff --git a/web/src/composables/useEventFormatters.ts b/web/src/composables/useEventFormatters.ts
index a7e0ec9c66..b9d6e70a10 100644
--- a/web/src/composables/useEventFormatters.ts
+++ b/web/src/composables/useEventFormatters.ts
@@ -42,11 +42,11 @@ export function useEventFormatters() {
    * Get status color class (Tailwind text-color) based on HTTP status code
    */
   const getStatusColorClass = (statusCode: number): string => {
-    if (!statusCode) return "text-gray-500";
-    if (statusCode >= 200 && statusCode < 300) return "text-[var(--o2-positive)]";
-    if (statusCode >= 300 && statusCode < 400) return "text-[var(--o2-info)]";
-    if (statusCode >= 400 && statusCode < 500) return "text-[var(--o2-warning)]";
-    return "text-[var(--o2-negative)]";
+    if (!statusCode) return "text-text-secondary";
+    if (statusCode >= 200 && statusCode < 300) return "text-[var(--color-status-positive)]";
+    if (statusCode >= 300 && statusCode < 400) return "text-[var(--color-info)]";
+    if (statusCode >= 400 && statusCode < 500) return "text-[var(--color-warning)]";
+    return "text-[var(--color-status-negative)]";
   };
 
   /**
@@ -67,12 +67,12 @@ export function useEventFormatters() {
   const getEventTypeClass = (type: string): string => {
     const classes: { [key: string]: string } = {
       error:
-        "bg-red-100 text-red-700 border border-solid border-red-300",
+        "bg-error-100 text-error-700 border border-solid border-error-300",
       action:
         "bg-blue-100 text-blue-700 border border-solid border-blue-300",
-      view: "bg-green-100 text-green-700 border border-solid border-green-300",
+      view: "bg-success-100 text-success-700 border border-solid border-success-400",
       resource:
-        "bg-purple-100 text-purple-700 border border-solid border-purple-300",
+        "bg-purple-100 text-purple-700 border border-solid border-purple-400",
     };
     return classes[type] || "bg-grey-100 text-grey-700";
   };
diff --git a/web/src/composables/useFieldValueStore.ts b/web/src/composables/useFieldValueStore.ts
index a8e4f3e88a..6f08c30cbd 100644
--- a/web/src/composables/useFieldValueStore.ts
+++ b/web/src/composables/useFieldValueStore.ts
@@ -28,26 +28,19 @@ import { extractValuesFromHits } from "@/utils/fieldValueUtils";
 
 // ─── Configuration ────────────────────────────────────────────────────────────
 
-// Max unique values stored per field in IDB. 50 is enough for all realistic
-// observability filter fields (status codes, env names, log levels). More than
-// 50 items in a dropdown is noise rather than help. Overridable via .env so
-// team can tune without a code change.
+// Max unique values stored per field in IDB. Overridable via .env.
 const MAX_VALUES_PER_FIELD = Number(
   (import.meta as any).env?.VITE_MAX_FIELD_VALUES ?? 50,
 );
 
 // Total IDB record cap across all orgs/streams/fields combined. Prevents the
-// browser's IndexedDB storage from growing forever across many sessions.
-// 5000 records × ~50 values × ~20 chars avg ≈ ~5MB — well within browser limits.
-// Overridable via .env.
+// browser's IndexedDB storage from growing forever. Overridable via .env.
 const MAX_FIELDS_STORED = Number(
   (import.meta as any).env?.VITE_MAX_FIELDS_STORED ?? 5000,
 );
 
 // How long a field's values stay valid in IDB after the last write.
-// Sliding window — every new write resets the 7-day clock. Fields from streams
-// you stop querying disappear automatically after 7 days of inactivity.
-// Overridable via .env (unit: days).
+// Sliding window — every new write resets the clock. Overridable via .env (unit: days).
 const FIELD_VALUE_TTL_MS =
   Number((import.meta as any).env?.VITE_FIELD_VALUE_TTL_DAYS ?? 7) *
   86400 *
@@ -55,13 +48,11 @@ const FIELD_VALUE_TTL_MS =
 
 // ─── In-memory read cache ─────────────────────────────────────────────────────
 
-// Two-level cache: memory → IDB → [].
-// Without this, every keystroke in the query editor (e.g. "status = ") would
-// trigger an async IDB read (~1ms). With it, the first keystroke pays the IDB
-// cost; all subsequent keystrokes in the same minute return from memory in ~0ms.
+// Two-level cache: memory → IDB → []. Spares repeated keystrokes an async IDB
+// read; only the first read in each TTL window hits IDB.
 const readCache = new Map<string, { values: string[]; ts: number }>();
-const READ_CACHE_TTL_MS = 60_000; // 1 minute — balance between freshness and cost
-const READ_CACHE_MAX_ENTRIES = 500; // ~10 streams × ~50 fields each; enough for any session
+const READ_CACHE_TTL_MS = 60_000; // 1 minute
+const READ_CACHE_MAX_ENTRIES = 500;
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
@@ -75,13 +66,7 @@ export interface StreamContext {
 
 // Composite string key used as the IDB primary key.
 // Format: "org|streamType|streamName|fieldName"
-// e.g.  : "myorg|logs|http_logs|status"
-//
-// Why a flat string instead of a compound key?
-// IDB compound keys require an array and more complex range queries.
-// A flat string is simpler, human-readable in DevTools, and works perfectly
-// for our point-read access pattern. The "|" separator is safe because
-// org/stream names in OO cannot contain "|".
+// The "|" separator is safe because org/stream names in OO cannot contain "|".
 const makeKey = (ctx: StreamContext, fieldName: string): string =>
   `${ctx.org}|${ctx.streamType}|${ctx.streamName}|${fieldName}`;
 
@@ -89,18 +74,9 @@ const makeKey = (ctx: StreamContext, fieldName: string): string =>
  * Schedule a background write using requestIdleCallback.
  * Falls back to setTimeout(0) in environments without rIC (e.g. Safari).
  *
- * Why this wrapper exists:
- * - requestIdleCallback runs the work AFTER the browser has finished rendering
- *   the current frame — zero impact on the search results appearing on screen.
- * - timeout: 2000 is a safety valve: if the browser stays busy for 2 full
- *   seconds without an idle slot, the write is forced anyway so data is never
- *   permanently lost.
- * - Safari does not support requestIdleCallback. setTimeout(0) is the next
- *   best thing — it defers to the next event loop tick, which still avoids
- *   blocking the current render cycle.
- * - The .catch() wrapper ensures IDB failures (private browsing, quota
- *   exceeded, IDB unavailable) never crash the app. Autocomplete is a
- *   nice-to-have, not a critical feature. Errors are logged in dev only.
+ * `timeout: 2000` forces the write even if the browser never goes idle, so data
+ * is never lost. The .catch() keeps IDB failures (private browsing, quota) from
+ * crashing the app — autocomplete is non-critical; errors are logged in dev only.
  */
 const scheduleWrite = (fn: () => Promise<void>): void => {
   const wrapped = () =>
@@ -118,12 +94,8 @@ const scheduleWrite = (fn: () => Promise<void>): void => {
 };
 
 /**
- * Write to the in-memory read cache with a bounded size.
- *
- * Why evict 10% at a time instead of 1 entry?
- * Evicting a single entry on every insert-at-cap means paying the eviction
- * cost on every new entry once the map is full. Evicting 10% (50 entries) at
- * once amortizes that cost — we only pay it once every 50 inserts.
+ * Write to the in-memory read cache with a bounded size. Evicts 10% at a time
+ * once full so eviction cost is amortized rather than paid on every insert.
  */
 const setCacheEntry = (key: string, values: string[]): void => {
   readCache.set(key, { values, ts: Date.now() });
@@ -142,20 +114,12 @@ const setCacheEntry = (key: string, values: string[]): void => {
 
 /**
  * Capture values returned by the Values API (field expansion in FieldList).
- * Called from useFieldValuesStream.handleResponse() AFTER the existing UI
- * state update — returns synchronously in ~1µs.
+ * Called from useFieldValuesStream.handleResponse() after the existing UI update.
  *
- * Why 200-char filter here (vs 150 in extractValuesFromHits)?
- * The Values API returns pre-selected top values from the server — they have
- * already been ranked and filtered for relevance. The 200-char limit is just
- * a safety net against malformed responses. We don't need the aggressive
- * filtering used for raw log hits where any field can appear.
- *
- * Why delete readCache after write?
- * If the user had already triggered autocomplete for this field (cache was
- * populated), the write would update IDB but the stale cache entry would be
- * returned for the next 60 seconds. Deleting it forces a fresh IDB read the
- * next time the user types, ensuring they see the newly captured values.
+ * The 200-char filter is just a safety net against malformed responses (the
+ * server has already ranked/filtered these values). readCache is deleted after
+ * the write so the next autocomplete read returns the freshly captured values
+ * instead of a stale cache entry.
  */
 export const captureFromValuesApi = (
   ctx: StreamContext,
@@ -187,21 +151,9 @@ export const captureFromValuesApi = (
  * Limits to first 100 hits; skips high-cardinality and excluded fields.
  * Uses a single IDB transaction for all fields to minimise transaction overhead.
  *
- * Why hits.slice(0, 100) even though the logs page already caps at 100?
- * Defensive programming — this function is a public export and could be called
- * by future code that passes a larger array. The slice keeps the contract clear.
- *
- * Why one mergeMultipleValues call instead of N mergeValues calls?
- * Each IDB transaction has a fixed overhead (open, commit, IDB lock). If a
- * stream has 40 fields, 40 individual transactions = 40× that overhead.
- * One transaction with 40 operations = 1× overhead. Substantially cheaper
- * for wide schemas.
- *
- * Why 5% chance for housekeeping (evictExpired + trimToMaxFields)?
- * evictExpired scans the entire IDB by_expires index — on 5000 records that
- * takes 10–20ms even in an idle callback. Running it on every search wastes
- * that time when 99% of searches produce no newly expired records.
- * 1-in-20 gives periodic cleanup with 1/20th the cumulative cost.
+ * Housekeeping (evictExpired + trimToMaxFields) runs on a 5% chance per capture
+ * because evictExpired scans the whole by_expires index (~10–20ms on 5000
+ * records) — too costly to run on every search.
  */
 export const captureFromSearchHits = (
   ctx: StreamContext,
@@ -248,18 +200,8 @@ export const captureFromSearchHits = (
 /**
  * Read stored values for a field — used by autocomplete suggestion provider.
  * Uses in-memory cache (1-minute TTL, 500-entry cap) to avoid IndexedDB
- * round-trips during typing. Never throws — returns empty array on any failure.
- *
- * Why return [] on error instead of propagating?
- * IDB can be unavailable in private browsing mode or certain enterprise
- * browser configurations. Users in those environments should still be able to
- * use the query editor — they just won't see value suggestions. Crashing or
- * showing an error for a non-critical enhancement would be a worse experience.
- *
- * Why check Date.now() - cached.ts < TTL instead of storing expiresAt?
- * Minor: computing expiresAt = Date.now() + TTL at write time and comparing
- * at read time is equivalent. The ts approach is slightly more readable
- * because the TTL constant appears only in one place (READ_CACHE_TTL_MS).
+ * round-trips during typing. Never throws — returns empty array on any failure
+ * (IDB can be unavailable in private browsing; suggestions are non-critical).
  */
 export const getFieldValuesForSuggestion = async (
   ctx: StreamContext,
diff --git a/web/src/composables/useFieldValuesStream.ts b/web/src/composables/useFieldValuesStream.ts
index 9a5e90b5e7..9c82578406 100644
--- a/web/src/composables/useFieldValuesStream.ts
+++ b/web/src/composables/useFieldValuesStream.ts
@@ -167,7 +167,7 @@ const useFieldValuesStream = () => {
           });
         });
 
-        // [NEW] Background capture — does not block handleResponse return
+        // Background capture — does not block handleResponse return
         if (chunkValues.length > 0 && fieldName) {
           captureFromValuesApi(
             {
diff --git a/web/src/composables/useLogs/logsUtils.ts b/web/src/composables/useLogs/logsUtils.ts
index 17ba152fd4..a883f4aec0 100644
--- a/web/src/composables/useLogs/logsUtils.ts
+++ b/web/src/composables/useLogs/logsUtils.ts
@@ -18,6 +18,7 @@ import { useStore } from "vuex";
 import { useRouter } from "vue-router";
 import config from "@/aws-exports";
 import { b64EncodeUnicode, useLocalLogFilterField, } from "@/utils/zincutils";
+import { canvasFont } from "@/utils/fonts";
 
 import {
   encodeVisualizationConfig,
@@ -105,9 +106,8 @@ export const logsUtils = () => {
   /**
    * Parses a SQL query string into a structured AST (Abstract Syntax Tree) object.
    *
-   * This function takes a SQL query string, removes comment lines (lines starting with '--'),
-   * and parses it using the DataFusion SQL parser to return a structured object containing
-   * the query components like columns, tables, conditions, etc.
+   * Removes comment lines (starting with '--') before parsing with the DataFusion
+   * SQL parser.
    *
    * @param queryString - The SQL query string to parse. If empty or not provided,
    *                      it will use the query from searchObj.data.query
@@ -118,14 +118,6 @@ export const logsUtils = () => {
    *          - limit: LIMIT clause (null if none)
    *          - groupby: GROUP BY clauses (null if none)
    *          - where: WHERE conditions (null if none)
-   *
-   * @example
-   * ```typescript
-   * const result = fnParsedSQL("SELECT name, age FROM users WHERE age > 25");
-   * console.log(result.columns); // Array of column definitions
-   * console.log(result.from);    // Array with 'users' table
-   * console.log(result.where);   // WHERE condition object
-   * ```
    */
   const fnParsedSQL = (queryString: string = ""): ParsedSQLResult => {
     try {
@@ -149,29 +141,11 @@ export const logsUtils = () => {
   /**
    * Converts a parsed SQL AST object back into a SQL query string.
    *
-   * This function takes a structured SQL object (typically returned by fnParsedSQL)
-   * and converts it back into a valid SQL query string using the DataFusion SQL parser.
-   *
    * @param parsedObj - The parsed SQL object to convert back to string.
    *                    Can be a ParsedSQLResult interface or any AST object
    *                    from the SQL parser
    * @returns A SQL query string representation of the parsed object.
    *          Returns empty string if parsing fails or input is invalid
-   *
-   * @example
-   * ```typescript
-   * const parsedSQL = fnParsedSQL("SELECT * FROM users");
-   * const sqlString = fnUnparsedSQL(parsedSQL);
-   * console.log(sqlString); // "SELECT * FROM users"
-   * ```
-   *
-   * @example
-   * ```typescript
-   * // Handle conversion errors gracefully
-   * const malformedObj = { invalid: "structure" };
-   * const result = fnUnparsedSQL(malformedObj);
-   * console.log(result); // "" (empty string on error)
-   * ```
    */
   const fnUnparsedSQL = (parsedObj: ParsedSQLResult | any): string => {
     try {
@@ -187,32 +161,14 @@ export const logsUtils = () => {
   /**
    * Extracts timestamp range based on a relative time period string.
    *
-   * This function parses a time period string (e.g., "5m", "2h", "1d") and returns
-   * a timestamp range from the calculated past time to the current time. It supports
-   * seconds, minutes, hours, days, weeks, and months with special handling for
-   * month calculations to account for variable month lengths.
+   * Parses a time period string (e.g., "5m", "2h", "1d") and returns a range from
+   * the calculated past time to now. Supports s/m/h/d/w/M, with special handling
+   * for months to account for variable month lengths.
    *
    * @param period - Time period string ending with unit (s/m/h/d/w/M)
    *                 Examples: "30s", "5m", "2h", "1d", "1w", "1M"
    * @returns Object containing 'from' and 'to' timestamps in milliseconds,
    *          or undefined if the period format is invalid
-   *
-   * @example
-   * ```typescript
-   * // Get timestamps for last 5 minutes
-   * const range = extractTimestamps("5m");
-   * console.log(range); // { from: 1640000000000, to: 1640000300000 }
-   *
-   * // Get timestamps for last 2 hours
-   * const hourRange = extractTimestamps("2h");
-   * console.log(hourRange); // { from: 1639992800000, to: 1640000000000 }
-   *
-   * // Handle invalid format
-   * const invalid = extractTimestamps("5x");
-   * console.log(invalid); // undefined
-   * ```
-   *
-   * @throws {Error} Logs error to console for invalid period formats
    */
   const extractTimestamps = (
     period: string,
@@ -263,30 +219,11 @@ export const logsUtils = () => {
   /**
    * Determines if a SQL query contains aggregation functions or GROUP BY clauses.
    *
-   * This function checks for aggregation by examining both the parsed column expressions
-   * for aggregation functions (like COUNT, SUM, AVG) and the raw query string for
-   * GROUP BY keywords. It's used to determine whether a query requires aggregation
-   * processing or can be handled as a simple select query.
+   * Checks the parsed column expressions for aggregation functions and the raw
+   * query string for GROUP BY.
    *
    * @param columns - Array of parsed SQL column objects from the query AST
    * @returns true if aggregation is detected, false otherwise
-   *
-   * @example
-   * ```typescript
-   * // Query with aggregation function
-   * const parsedQuery = fnParsedSQL("SELECT COUNT(*) FROM users");
-   * const hasAgg = hasAggregation(parsedQuery.columns);
-   * console.log(hasAgg); // true
-   *
-   * // Query with GROUP BY
-   * searchObj.data.query = "SELECT name FROM users GROUP BY department";
-   * const hasGroupBy = hasAggregation([]);
-   * console.log(hasGroupBy); // true
-   *
-   * // Simple select query
-   * const simpleQuery = hasAggregation([{ expr: { type: 'column' } }]);
-   * console.log(simpleQuery); // false
-   * ```
    */
   const hasAggregation = (columns: SQLColumn[]): boolean => {
     // Check for aggregation functions in column expressions
@@ -310,24 +247,8 @@ export const logsUtils = () => {
   /**
    * Determines if a parsed SQL query contains a LIMIT clause.
    *
-   * This function checks whether the parsed SQL AST includes a LIMIT clause
-   * with valid values. It's used to identify queries that restrict the number
-   * of returned results, which affects result processing and pagination behavior.
-   *
    * @param parsedSQL - The parsed SQL AST object (typically from fnParsedSQL)
    * @returns true if a LIMIT clause with values is present, false otherwise
-   *
-   * @example
-   * ```typescript
-   * const query1 = fnParsedSQL("SELECT * FROM users LIMIT 10");
-   * console.log(isLimitQuery(query1)); // true
-   *
-   * const query2 = fnParsedSQL("SELECT * FROM users");
-   * console.log(isLimitQuery(query2)); // false
-   *
-   * // Handle null/undefined input
-   * console.log(isLimitQuery(null)); // false
-   * ```
    */
   const isLimitQuery = (
     parsedSQL: ParsedSQLResult | null = null,
@@ -343,24 +264,8 @@ export const logsUtils = () => {
   /**
    * Determines if a parsed SQL query contains a DISTINCT clause.
    *
-   * This function checks whether the parsed SQL AST includes a DISTINCT modifier
-   * in the SELECT statement. DISTINCT queries eliminate duplicate rows from
-   * results, which affects query execution and result processing strategies.
-   *
    * @param parsedSQL - The parsed SQL AST object (typically from fnParsedSQL)
    * @returns true if DISTINCT clause is present, false otherwise
-   *
-   * @example
-   * ```typescript
-   * const query1 = fnParsedSQL("SELECT DISTINCT name FROM users");
-   * console.log(isDistinctQuery(query1)); // true
-   *
-   * const query2 = fnParsedSQL("SELECT name FROM users");
-   * console.log(isDistinctQuery(query2)); // false
-   *
-   * // Handle null/undefined input
-   * console.log(isDistinctQuery(null)); // false
-   * ```
    */
   const isDistinctQuery = (
     parsedSQL: ParsedSQLResult | any = null,
@@ -371,27 +276,8 @@ export const logsUtils = () => {
   /**
    * Determines if a parsed SQL query contains WITH clauses (Common Table Expressions).
    *
-   * This function checks whether the parsed SQL AST includes WITH clauses,
-   * also known as Common Table Expressions (CTEs). WITH clauses allow for
-   * complex query structuring and temporary result set definitions.
-   *
    * @param parsedSQL - The parsed SQL AST object (typically from fnParsedSQL)
    * @returns true if WITH clauses are present, false otherwise
-   *
-   * @example
-   * ```typescript
-   * const query1 = fnParsedSQL(`
-   *   WITH user_stats AS (SELECT COUNT(*) as total FROM users)
-   *   SELECT * FROM user_stats
-   * `);
-   * console.log(isWithQuery(query1)); // true
-   *
-   * const query2 = fnParsedSQL("SELECT * FROM users");
-   * console.log(isWithQuery(query2)); // false
-   *
-   * // Handle null/undefined input
-   * console.log(isWithQuery(null)); // false
-   * ```
    */
   const isWithQuery = (
     parsedSQL: ParsedSQLResult | any = null,
@@ -405,30 +291,11 @@ export const logsUtils = () => {
 
   // Todo: Duplicate function in IndexList.vue same for removeTraceId
   /**
-   * Adds a trace ID to the appropriate trace ID collection based on communication method.
-   *
-   * This function adds a trace ID to either the HTTP request trace IDs or WebSocket
-   * trace IDs array, depending on the current communication method. It prevents
-   * duplicate trace IDs by checking if the ID already exists before adding it.
-   * This is essential for tracking ongoing search operations and preventing
-   * duplicate request handling.
+   * Adds a trace ID to the search request trace-ID collection, skipping duplicates.
    *
    * @param traceId - The unique trace identifier to add to the collection.
    *                  Must be a non-empty string representing a valid trace ID
    * @returns void - No return value, modifies searchObj state directly
-   *
-   * @example
-   * ```typescript
-   * // Add trace ID for HTTP communication
-   * searchObj.communicationMethod = "http";
-   * addTraceId("trace-123-456-789");
-   * console.log(searchObj.data.searchRequestTraceIds); // ["trace-123-456-789"]
-   *
-   * // Attempting to add duplicate trace ID (no-op)
-   * addTraceId("trace-123-456-789"); // Won't add duplicate
-   * ```
-   *
-   * @throws {Error} Implicitly throws if traceId is not a string or searchObj is undefined
    */
   const addTraceId = (traceId: string): void => {
     // Validate input parameter
@@ -450,30 +317,11 @@ export const logsUtils = () => {
   };
 
   /**
-   * Removes a trace ID from the appropriate trace ID collection based on communication method.
-   *
-   * This function removes a specific trace ID from either the HTTP request trace IDs
-   * or WebSocket trace IDs array, depending on the current communication method.
-   * It uses the filter method to create a new array without the specified trace ID,
-   * which is essential for cleanup when search operations complete or are cancelled.
+   * Removes a trace ID from the search request trace-ID collection.
    *
    * @param traceId - The unique trace identifier to remove from the collection.
    *                  Must be a string representing the trace ID to be removed
    * @returns void - No return value, modifies searchObj state directly
-   *
-   * @example
-   * ```typescript
-   * // Remove trace ID from HTTP communication
-   * searchObj.communicationMethod = "http";
-   * searchObj.data.searchRequestTraceIds = ["trace-123", "trace-456"];
-   * removeTraceId("trace-123");
-   * console.log(searchObj.data.searchRequestTraceIds); // ["trace-456"]
-   *
-   * // Attempting to remove non-existent trace ID (no effect)
-   * removeTraceId("non-existent-id"); // Array remains unchanged
-   * ```
-   *
-   * @throws {Error} Implicitly throws if searchObj or its data properties are undefined
    */
   const removeTraceId = (traceId: string): void => {
     // Validate input parameter
@@ -530,12 +378,13 @@ export const logsUtils = () => {
    * @returns - Width of the column
    */
   const getColumnWidth = (context: any, field: string) => {
-    // Font of table header
-    context.font = "bold 14px sans-serif";
+    // Font of table header — must match what actually renders, or the measured
+    // width is wrong and cells truncate/overflow.
+    context.font = canvasFont("14px", "sans", "bold");
     let max = context.measureText(field).width + 16;
 
     // Font of the table content
-    context.font = "12px monospace";
+    context.font = canvasFont("12px", "mono");
     let width = 0;
     try {
       for (let i = 0; i < 5; i++) {
diff --git a/web/src/composables/useLogs/searchAround.ts b/web/src/composables/useLogs/searchAround.ts
index 911a9ac73b..716ac70e1d 100644
--- a/web/src/composables/useLogs/searchAround.ts
+++ b/web/src/composables/useLogs/searchAround.ts
@@ -193,11 +193,9 @@ export const useSearchAround = () => {
           } else {
             searchObj.data.queryResults = res.data;
           }
-          //extract fields from query response
           await extractFields();
           generateHistogramSkeleton();
           generateHistogramData();
-          //update grid columns
           updateGridColumns();
           await filterHitsColumns();
 
diff --git a/web/src/composables/useLogs/searchState.ts b/web/src/composables/useLogs/searchState.ts
index 3e06ab23ae..fcbb51ed52 100644
--- a/web/src/composables/useLogs/searchState.ts
+++ b/web/src/composables/useLogs/searchState.ts
@@ -147,18 +147,10 @@ export const searchState = () => {
   /**
    * Initializes the logs state from cached store data.
    *
-   * This function restores the search object state from the Vuex store cache,
-   * including organization identifier, configuration, meta data, and search results.
-   * It performs deep cloning to prevent reference issues and resets specific properties
-   * like refresh interval and query results to ensure clean state initialization.
+   * Deep-clones from the Vuex cache and resets refresh interval + query
+   * results for a clean start.
    *
    * @returns Promise that resolves to true when initialization is complete
-   *
-   * @example
-   * ```typescript
-   * await initialLogsState();
-   * // Search state is now initialized from store cache
-   * ```
    */
   const initialLogsState = async (): Promise<boolean | undefined> => {
     if (!store.state.logs.isInitialized) {
@@ -252,18 +244,8 @@ export const searchState = () => {
   };
 
   /**
-   * Resets the search object to its default state.
-   *
-   * This function clears all search-related data including streams, query results,
-   * histogram data, queries, and various search configurations. It's typically used
-   * when switching organizations, handling errors, or performing a complete reset
-   * of the search interface.
-   *
-   * @example
-   * ```typescript
-   * resetSearchObj();
-   * // Search object is now reset to default state
-   * ```
+   * Resets the search object to its default state — streams, query results,
+   * histogram, queries, and search configuration.
    */
   const resetSearchObj = (): void => {
     // Reset error message and stream data
@@ -304,17 +286,7 @@ export const searchState = () => {
   };
 
   /**
-   * Resets histogram error state to default values.
-   *
-   * Clears all error messages, codes, and details related to histogram operations.
-   * This is typically called before new histogram data is loaded or when
-   * recovering from histogram-related errors.
-   *
-   * @example
-   * ```typescript
-   * resetHistogramError();
-   * // Histogram errors are now cleared
-   * ```
+   * Resets histogram error state (message, code, detail) to default values.
    */
   const resetHistogramError = (): void => {
     searchObj.data.histogram.errorMsg = "";
@@ -323,11 +295,7 @@ export const searchState = () => {
   };
 
   /**
-   * Resets log search error state to default values.
-   *
-   * Clears all error messages, code and details related to search logs operations.
-   * This is typically called before logs and patterns are loaded or when
-   * recovering from logs-related errors.
+   * Resets log search error state (messages, code, details) to default values.
    */
   const resetSearchError = (): void => {
     searchObj.data.errorMsg = "";
@@ -338,17 +306,8 @@ export const searchState = () => {
   };
 
   /**
-   * Resets query-related data and pagination state.
-   *
-   * Clears query results, resets pagination to first page, stops any running queries,
-   * and clears error messages. This function is commonly used before executing
-   * new queries or when switching between different query contexts.
-   *
-   * @example
-   * ```typescript
-   * resetQueryData();
-   * // Query data is now cleared and ready for new search
-   * ```
+   * Resets query-related data: clears results, resets pagination to page 1,
+   * stops any running query, and clears errors.
    */
   const resetQueryData = (): void => {
     searchObj.data.sortedQueryResults = [];
@@ -358,17 +317,8 @@ export const searchState = () => {
   };
 
   /**
-   * Resets search around data to default state.
-   *
-   * Clears the search around timestamp and size, effectively disabling
-   * any active search around context. Used when starting fresh searches
-   * or switching between different search modes.
-   *
-   * @example
-   * ```typescript
-   * resetSearchAroundData();
-   * // Search around context is now cleared
-   * ```
+   * Resets search-around data (timestamp + size), disabling any active
+   * search-around context.
    */
   const resetSearchAroundData = (): void => {
     searchObj.data.searchAround.indexTimestamp = -1;
@@ -376,17 +326,8 @@ export const searchState = () => {
   };
 
   /**
-   * Resets all function-related data and clears store.
-   *
-   * Dispatches store action to clear functions and resets local function
-   * data including transforms and stream functions. This ensures a clean
-   * state when switching contexts or organizations.
-   *
-   * @example
-   * ```typescript
-   * resetFunctions();
-   * // All function data is now cleared from store and local state
-   * ```
+   * Resets all function-related data (transforms + stream functions) and
+   * clears functions from the store.
    */
   const resetFunctions = (): void => {
     searchObj.data.transforms = [];
@@ -395,20 +336,9 @@ export const searchState = () => {
   };
 
   /**
-   * Comprehensively resets all stream-related data.
-   *
-   * This function performs a complete reset of stream state including:
-   * - Dispatches store action to reset streams
-   * - Clears selected streams and fields
-   * - Resets filter configurations
-   * - Sets stream type from route or defaults to 'logs'
-   * - Calls resetQueryData() and resetSearchAroundData() for related cleanup
-   *
-   * @example
-   * ```typescript
-   * resetStreamData();
-   * // All stream data, queries, and search around context are now reset
-   * ```
+   * Comprehensively resets all stream-related data: store streams, selections,
+   * fields, filters, stream type (from route, default 'logs'), plus
+   * resetQueryData() and resetSearchAroundData().
    */
   const resetStreamData = (): void => {
     // Reset store stream data
diff --git a/web/src/composables/useLogs/useHistogram.ts b/web/src/composables/useLogs/useHistogram.ts
index 34fb260bee..a061389205 100644
--- a/web/src/composables/useLogs/useHistogram.ts
+++ b/web/src/composables/useLogs/useHistogram.ts
@@ -22,7 +22,6 @@ import { INTERVAL_MAP } from "@/utils/logs/constants";
 // Severity-aware sort order for stacked histogram breakdown categories.
 // Lower index = bottom of stack (least severe), higher = top (most severe).
 // Categories not in this map fall back to alphabetical order at rank 100.
-// Defined at module scope so it is allocated once, not on every generateHistogramData call.
 const SEVERITY_ORDER: Record<string, number> = {
   trace: 0, debug: 1, info: 2, success: 3,
   pending: 4, cancelled: 5,
@@ -153,9 +152,6 @@ export const useHistogram = () => {
       const xData: number[] = [];
       const yData: number[] = [];
 
-      // hasAggregationFlag is set here but consumed by commented-out code below;
-      // kept in place so it's ready if that code is re-enabled.
-       
       let hasAggregationFlag = false;
       const parsedSQL: any = fnParsedSQL();
       if (searchObj.meta.sqlMode && parsedSQL.hasOwnProperty("columns")) {
@@ -166,10 +162,10 @@ export const useHistogram = () => {
         searchObj.data.queryResults.hasOwnProperty("aggs") &&
         searchObj.data.queryResults.aggs
       ) {
-        // NEW: read the breakdown field returned by the backend.
+        // Read the breakdown field returned by the backend.
         // When present, the histogram is rendered as a stacked bar chart grouped
         // by this field (e.g. "severity"). When absent, falls through to the
-        // original flat single-series path below.
+        // flat single-series path below.
         const breakdownField: string | null =
           searchObj.data.queryResults.histogram_breakdown_field ?? null;
 
@@ -182,7 +178,7 @@ export const useHistogram = () => {
           );
 
         if (hasBreakdown) {
-          // --- NEW: Stacked breakdown path ---
+          // --- Stacked breakdown path ---
           // Uses a composite key "timestamp|||category" so that the same
           // (timestamp, category) pair from different pages is merged correctly.
           const breakdownMap = new Map<
@@ -192,9 +188,8 @@ export const useHistogram = () => {
 
           // Collect every timestamp we know about — including zero-filled
           // skeleton entries that have no breakdown — so the x-axis matches
-          // the full query range from the first render (same behaviour as
-          // the flat path). Without this the chart would appear to grow
-          // outward from the center as partitions stream in.
+          // the full query range from the first render. Without this the chart
+          // would appear to grow outward from the center as partitions stream in.
           const timestampSet = new Set<string>();
 
           // Seed from previously accumulated pages
@@ -282,8 +277,8 @@ export const useHistogram = () => {
           searchObj.data.histogram = {
             xData,
             yData,
-            breakdownField,       // NEW: field name used for grouping
-            breakdownSeries: seriesMap, // NEW: Map<category, counts[]> for stacked chart
+            breakdownField,       // field name used for grouping
+            breakdownSeries: seriesMap, // Map<category, counts[]> for stacked chart
             chartParams: {
               title: getHistogramTitle(),
               unparsed_x_data,
@@ -294,10 +289,7 @@ export const useHistogram = () => {
             errorDetail: "",
           };
         } else {
-          // --- EXISTING: Single-series (flat) path ---
-          // Original logic moved here unchanged; previously this was the only path.
-          // num_records was originally declared at the top of the function but is
-          // only used here, so it is now scoped to this block.
+          // --- Single-series (flat) path ---
           histogramMappedData = new Map(
             histogramResults.value.map((item: any) => [
               item.zo_sql_key,
@@ -314,7 +306,7 @@ export const useHistogram = () => {
             }
           });
 
-          let num_records = 0; // moved from top of function — only needed in this path
+          let num_records = 0;
           const mergedData: any = Array.from(histogramMappedData.values());
           mergedData.forEach(
             (bucket: { zo_sql_key: string | number | Date; zo_sql_num: string }) => {
diff --git a/web/src/composables/useLogs/usePagination.ts b/web/src/composables/useLogs/usePagination.ts
index 9323b469e4..7024af3b11 100644
--- a/web/src/composables/useLogs/usePagination.ts
+++ b/web/src/composables/useLogs/usePagination.ts
@@ -98,7 +98,6 @@ export const usePagination = () => {
 
       if (searchObj.meta.sqlMode == true && parsedSQL != undefined) {
         // if query has aggregation or groupby then we need to set size to -1 to get all records
-        // issue #5432
         //here BE return all the records if we set the size to -1 and we are doing it as we dont support pagination for aggregation and groupby
         if (hasAggregation(parsedSQL?.columns) || parsedSQL.groupby != null) {
           queryReq.query.size = -1;
diff --git a/web/src/composables/useLogs/useSearchBar.ts b/web/src/composables/useLogs/useSearchBar.ts
index d22b0d90fe..a5a27cec1a 100644
--- a/web/src/composables/useLogs/useSearchBar.ts
+++ b/web/src/composables/useLogs/useSearchBar.ts
@@ -335,12 +335,9 @@ export const useSearchBar = () => {
       const streamFieldNames = new Set(
         allStreamFields.map((item) => item.name),
       );
-      // Clear carried-over display columns on stream change. The previous
-      // stream's selection (e.g. "log") is not a deliberate choice for the new
-      // stream, so we drop it and let the post-search fill-rate check pick a
-      // fresh default FTS column for the new stream.
+      // Clear carried-over display columns; the post-search fill-rate check
+      // then picks a fresh default FTS column for the new stream.
       searchObj.data.stream.selectedFields = [];
-      // The cleared selection is no longer a system pick from the old stream.
       searchObj.meta.isFtsDefaultColumn = false;
 
       // Update interesting fields list
diff --git a/web/src/composables/useLogs/useSearchPagination.ts b/web/src/composables/useLogs/useSearchPagination.ts
index 213cc3c14c..aff8e95b7f 100644
--- a/web/src/composables/useLogs/useSearchPagination.ts
+++ b/web/src/composables/useLogs/useSearchPagination.ts
@@ -237,7 +237,6 @@ export const useSearchPagination = () => {
   };
 
   const shouldGetPageCount = (queryReq: any): boolean => {
-    // Simplified logic - in the actual implementation this would be more complex
     if (!queryReq || !queryReq.query) return false;
 
     // Check if it's a simple query that supports page count
diff --git a/web/src/composables/useLogs/useSearchQuery.ts b/web/src/composables/useLogs/useSearchQuery.ts
index bd8f6e91b9..00a3d29d42 100644
--- a/web/src/composables/useLogs/useSearchQuery.ts
+++ b/web/src/composables/useLogs/useSearchQuery.ts
@@ -209,7 +209,6 @@ export const useSearchQuery = () => {
 
     if (searchObj.meta.sqlMode == true) {
       // if query has aggregation or groupby then we need to set size to -1 to get all records
-      // issue #5432
       // BUT: Don't override size when patterns mode is enabled - we need the configured scan size for pattern extraction
       if (
         (hasAggregation(parsedSQL?.columns) || parsedSQL.groupby != null) &&
diff --git a/web/src/composables/useLogs/useSearchStream.ts b/web/src/composables/useLogs/useSearchStream.ts
index 2ff3bfb211..7d1959524e 100644
--- a/web/src/composables/useLogs/useSearchStream.ts
+++ b/web/src/composables/useLogs/useSearchStream.ts
@@ -14,25 +14,12 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 /**
- * REFACTORED VERSION OF useSearchStream
- *
- * This is a refactored version that demonstrates how to split the large useSearchStream
- * composable into smaller, more focused composables. The original file had 2100+ lines
- * and handled multiple responsibilities.
- *
- * STRUCTURE:
- * - Main orchestrator (this file) - coordinates between split composables
- * - useSearchQuery - handles SQL query building and validation
- * - useSearchConnection - manages WebSocket/HTTP streaming connections
+ * Orchestrator that coordinates the split search composables:
+ * - useSearchQuery - SQL query building and validation
+ * - useSearchConnection - WebSocket/HTTP streaming connections
  * - useSearchResponseHandler - processes different response types
  * - useSearchHistogramManager - histogram-specific logic
  * - useSearchPagination - pagination calculations and state
- *
- * BENEFITS:
- * - Better separation of concerns
- * - Easier testing of individual components
- * - Improved maintainability
- * - Cleaner code organization
  */
 
 import { searchState } from "@/composables/useLogs/searchState";
@@ -135,7 +122,6 @@ export const useSearchStream = () => {
       searchObj.loadingHistogramProgressPercentage = 0;
     }
 
-    //we need ot make if false
     if(searchObj.meta.clearCache){
       searchObj.meta.clearCache = false;
     }
@@ -190,8 +176,7 @@ export const useSearchStream = () => {
   };
 
   /**
-   * Expose the necessary methods for backward compatibility
-   * This maintains the same interface as the original composable
+   * Expose the composable's public methods.
    */
   return {
     // Main search method
@@ -228,7 +213,7 @@ export const useSearchStream = () => {
     extractFilterColumns: queryBuilder.extractFilterColumns,
     constructErrorMessage: responseProcessor.constructErrorMessage,
 
-    // Backward compatibility - expose individual composables if needed
+    // Expose individual composables if needed
     queryBuilder,
     connectionManager,
     responseProcessor,
@@ -238,27 +223,5 @@ export const useSearchStream = () => {
   };
 };
 
-/**
- * How to migrate to the refactored version:
- *
- * 1. Replace imports:
- *    - Change: import useSearchStream from "@/composables/useLogs/useSearchStream";
- *    - To: import { useSearchStreamRefactored } from "@/composables/useLogs/useSearchStreamRefactored";
- *
- * 2. Update usage:
- *    - Change: const { getDataThroughStream } = useSearchStream();
- *    - To: const { getDataThroughStream } = useSearchStreamRefactored();
- *
- * 3. Test thoroughly to ensure all functionality works
- *
- * 4. If needed, access individual composables:
- *    - const { queryBuilder, connectionManager } = useSearchStreamRefactored();
- *
- * MIGRATION STRATEGY:
- * - Start with components that use simple methods from useSearchStream
- * - Gradually migrate more complex usage
- * - Keep the original file until all migrations are complete
- * - Add comprehensive tests for each split composable
- */
-
 export default useSearchStream;
+
diff --git a/web/src/composables/useLogs/useSearchStreamRefactored.ts b/web/src/composables/useLogs/useSearchStreamRefactored.ts
index 2db23599b0..12c60c7829 100644
--- a/web/src/composables/useLogs/useSearchStreamRefactored.ts
+++ b/web/src/composables/useLogs/useSearchStreamRefactored.ts
@@ -14,25 +14,13 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 /**
- * REFACTORED VERSION OF useSearchStream
- *
- * This is a refactored version that demonstrates how to split the large useSearchStream
- * composable into smaller, more focused composables. The original file had 2100+ lines
- * and handled multiple responsibilities.
- *
- * STRUCTURE:
- * - Main orchestrator (this file) - coordinates between split composables
- * - useSearchQuery - handles SQL query building and validation
- * - useSearchConnection - manages WebSocket/HTTP streaming connections
+ * Search-stream orchestrator: coordinates the split composables that each own
+ * one responsibility.
+ * - useSearchQuery - SQL query building and validation
+ * - useSearchConnection - WebSocket/HTTP streaming connections
  * - useSearchResponseHandler - processes different response types
  * - useSearchHistogramManager - histogram-specific logic
  * - useSearchPagination - pagination calculations and state
- *
- * BENEFITS:
- * - Better separation of concerns
- * - Easier testing of individual components
- * - Improved maintainability
- * - Cleaner code organization
  */
 
 import { searchState } from "@/composables/useLogs/searchState";
@@ -198,7 +186,7 @@ export const useSearchStreamRefactored = () => {
     extractFilterColumns: queryBuilder.extractFilterColumns,
     constructErrorMessage: responseProcessor.constructErrorMessage,
 
-    // Backward compatibility - expose individual composables if needed
+    // Individual composables
     queryBuilder,
     connectionManager,
     responseProcessor,
@@ -207,27 +195,4 @@ export const useSearchStreamRefactored = () => {
   };
 };
 
-/**
- * How to migrate to the refactored version:
- *
- * 1. Replace imports:
- *    - Change: import useSearchStream from "@/composables/useLogs/useSearchStream";
- *    - To: import { useSearchStreamRefactored } from "@/composables/useLogs/useSearchStreamRefactored";
- *
- * 2. Update usage:
- *    - Change: const { getDataThroughStream } = useSearchStream();
- *    - To: const { getDataThroughStream } = useSearchStreamRefactored();
- *
- * 3. Test thoroughly to ensure all functionality works
- *
- * 4. If needed, access individual composables:
- *    - const { queryBuilder, connectionManager } = useSearchStreamRefactored();
- *
- * MIGRATION STRATEGY:
- * - Start with components that use simple methods from useSearchStream
- * - Gradually migrate more complex usage
- * - Keep the original file until all migrations are complete
- * - Add comprehensive tests for each split composable
- */
-
 export default useSearchStreamRefactored;
diff --git a/web/src/composables/useLogs/useStreamFields.ts b/web/src/composables/useLogs/useStreamFields.ts
index 4489ca6cde..d171e78a2c 100644
--- a/web/src/composables/useLogs/useStreamFields.ts
+++ b/web/src/composables/useLogs/useStreamFields.ts
@@ -89,10 +89,9 @@ export const useStreamFields = () => {
     try {
       const hits = searchObj.data.queryResults.hits;
 
-      // [NEW] Background capture into IndexedDB — must be placed BEFORE the
-      // loop below because that loop contains an early `return` when it
-      // encounters excluded fields (pre-existing behaviour), which would
-      // prevent this code from running if placed after.
+      // Background capture into IndexedDB — must run BEFORE the loop below,
+      // which has an early `return` on excluded fields that would otherwise
+      // prevent this from running.
       if (hits?.length > 0) {
         const schemaFields = (
           searchObj.data.stream.selectedStreamFields ?? []
diff --git a/web/src/composables/useLogs/useTemplateTokenizer.ts b/web/src/composables/useLogs/useTemplateTokenizer.ts
index cb486c163c..90a8a1746e 100644
--- a/web/src/composables/useLogs/useTemplateTokenizer.ts
+++ b/web/src/composables/useLogs/useTemplateTokenizer.ts
@@ -138,16 +138,16 @@ export function wildcardChipColor(token: string, sampleValues?: any[]): string {
 export function chipColorForLabel(label: string): string {
   const colorMap: Record<string, string> = {
     ip:      "bg-label-chip-ip-bg text-label-chip-ip-text",
-    ipv4:    "bg-label-chip-ipv4-bg text-label-chip-ipv4-text",
-    ipv6:    "bg-label-chip-ipv6-bg text-label-chip-ipv6-text",
+    ipv4:    "bg-label-chip-ip-bg text-label-chip-ip-text",
+    ipv6:    "bg-label-chip-ip-bg text-label-chip-ip-text",
     method:  "bg-label-chip-method-bg text-label-chip-method-text",
     url:     "bg-label-chip-url-bg text-label-chip-url-text",
     num:     "bg-label-chip-num-bg text-label-chip-num-text",
     float:   "bg-label-chip-float-bg text-label-chip-float-text",
     hex:     "bg-label-chip-hex-bg text-label-chip-hex-text",
     ts:      "bg-label-chip-ts-bg text-label-chip-ts-text",
-    date:    "bg-label-chip-date-bg text-label-chip-date-text",
-    time:    "bg-label-chip-time-bg text-label-chip-time-text",
+    date:    "bg-label-chip-ts-bg text-label-chip-ts-text",
+    time:    "bg-label-chip-ts-bg text-label-chip-ts-text",
     id:      "bg-label-chip-id-bg text-label-chip-id-text",
     email:   "bg-label-chip-email-bg text-label-chip-email-text",
     str:     "bg-label-chip-str-bg text-label-chip-str-text",
@@ -291,7 +291,7 @@ export function inferTypeFromValues(rawValues: any[]): string {
 
 /**
  * Generate a human-readable explanation of why a pattern is flagged as an
- * anomaly, using the statistical fields the backend now provides.
+ * anomaly, using the statistical fields the backend provides.
  */
 export function anomalyExplanation(
   pattern: {
diff --git a/web/src/composables/useLogsHighlighter.ts b/web/src/composables/useLogsHighlighter.ts
index 8a78eea147..26b940005d 100644
--- a/web/src/composables/useLogsHighlighter.ts
+++ b/web/src/composables/useLogsHighlighter.ts
@@ -17,7 +17,6 @@
  * Logs Highlighting Composable
  * ============================
  *
- * Extracted from LogsHighlighting.vue for reusability and performance optimization.
  * Provides the core highlighting logic that can be used with caching.
  */
 
@@ -26,13 +25,15 @@ import { getThemeColors } from "@/utils/logs/keyValueParser";
 import { escapeHtml } from "@/utils/html";
 import { computed, ref, watch, onBeforeUnmount, getCurrentInstance } from "vue";
 import { useStore } from "vuex";
+import { useTheme } from "@/composables/useTheme";
 import { searchState } from "@/composables/useLogs/searchState";
 
 export function useLogsHighlighter() {
   const processedResults = ref({});
 
   const store = useStore();
-  const currentColors = ref(getThemeColors(store.state.theme === "dark"));
+  const { isDark } = useTheme();
+  const currentColors = ref(getThemeColors(isDark.value));
   const { searchObj } = searchState();
 
   // Track active processing to prevent memory leaks
@@ -60,7 +61,7 @@ export function useLogsHighlighter() {
   }
 
   watch(
-    () => store.state.theme,
+    () => isDark.value,
     (newTheme) => {
       currentColors.value = getThemeColors(newTheme === "dark");
     },
@@ -212,7 +213,6 @@ export function useLogsHighlighter() {
   };
 
   /**
-   * Legacy function - kept for backward compatibility
    * @deprecated Use processHitsInChunks instead
    */
   const processHitsHighlighting = (data: any): Promise<any> => {
@@ -554,7 +554,6 @@ export function useLogsHighlighter() {
   }
 
   /**
-   * Legacy function - kept for backward compatibility
    * @deprecated Use createStyledSpanWithClasses instead
    */
   function createStyledSpan(
@@ -711,7 +710,6 @@ export function useLogsHighlighter() {
   }
 
   /**
-   * Legacy function - kept for backward compatibility
    * @deprecated Use colorizeObjectWithClasses instead
    */
   function colorizeObject(
@@ -726,7 +724,6 @@ export function useLogsHighlighter() {
 
   /**
    * Main colorization logic with integrated highlighting
-   * This is the core function extracted from LogsHighlighting.vue
    */
   function colorizeJson(
     data: any,
@@ -928,7 +925,7 @@ export function useLogsHighlighter() {
 
   return {
     colorizeJson,
-    colorizeJsonProgressive, // New progressive rendering function
+    colorizeJsonProgressive, // Progressive rendering function
     simpleHighlight,
     createStyledSpan,
     createStyledSpanWithClasses,
diff --git a/web/src/composables/useMetricSubjectButtons.ts b/web/src/composables/useMetricSubjectButtons.ts
index 63ba478077..97ee0378c0 100644
--- a/web/src/composables/useMetricSubjectButtons.ts
+++ b/web/src/composables/useMetricSubjectButtons.ts
@@ -81,9 +81,7 @@ export const SUBJECT_BUTTONS_BY_SET: Record<string, SubjectButtonSpec[]> = {
     {
       id: "node",
       semanticIds: ["k8s-node-name"],
-      // Node view includes pod-level metrics too — they're all running on
-      // that node, so scoping to a node means "show me what's happening
-      // on this node" (pod metrics + any node-aggregated metrics).
+      // Also pool pod-level metrics — they run on this node.
       poolSemanticIds: ["k8s-node-name", "k8s-pod-name"],
       label: "Node",
     },
diff --git a/web/src/composables/usePrebuiltDestinations.ts b/web/src/composables/usePrebuiltDestinations.ts
index 37fb6ce18b..2712ad5f62 100644
--- a/web/src/composables/usePrebuiltDestinations.ts
+++ b/web/src/composables/usePrebuiltDestinations.ts
@@ -97,18 +97,8 @@ export function usePrebuiltDestinations() {
    */
   const typesByCategory = computed(() => getPrebuiltTypesByCategory());
 
-  /**
-   * Ensure system templates exist in DEFAULT_ORG
-   * NOTE: System templates are now managed by the backend via prebuilt destinations config
-   * This function is kept for backward compatibility but does nothing
-   */
-  /**
-   * Ensure system templates exist for all prebuilt destinations
-   * Creates templates if they don't exist in the backend
-   */
   /**
    * Fetch system templates from backend and cache them
-   * System templates are now managed entirely by the backend
    */
   async function fetchSystemTemplates(): Promise<void> {
     try {
diff --git a/web/src/composables/useServiceGraphTree.ts b/web/src/composables/useServiceGraphTree.ts
index 57100601c8..20acb7356e 100644
--- a/web/src/composables/useServiceGraphTree.ts
+++ b/web/src/composables/useServiceGraphTree.ts
@@ -43,7 +43,6 @@ export interface ServiceGraphEdge {
 
 /**
  * Composable for ServiceGraph tree visualization
- * Extracts and reuses the tree logic from convertServiceGraphToTree function
  */
 export function useServiceGraphTree(
   graphData: Ref<ServiceGraphData>,
@@ -51,14 +50,13 @@ export function useServiceGraphTree(
 ) {
   /**
    * Transform service graph data (nodes + edges) to TreeNode format
-   * Reuses the exact logic from convertServiceGraphToTree
    */
   const transformServiceGraphToTree = (data: ServiceGraphData): TreeNode[] => {
     if (!data || !data.nodes || !data.edges) {
       return []
     }
 
-    // Build adjacency maps for edges (same logic as original function)
+    // Build adjacency maps for edges
     const edgesMap = new Map<string, ServiceGraphEdge[]>()
     data.edges.forEach((edge: ServiceGraphEdge) => {
       if (!edgesMap.has(edge.from)) {
@@ -85,7 +83,7 @@ export function useServiceGraphTree(
     // Track all visited nodes across all trees to find orphaned components
     const globalVisited = new Set<string>()
 
-    // Helper to build tree recursively (same logic as original)
+    // Helper to build tree recursively
     const buildTree = (
       nodeId: string,
       visited = new Set<string>(),
@@ -181,7 +179,7 @@ export function useServiceGraphTree(
   }
 
   /**
-   * Get health-based color using the same thresholds as original ServiceGraph
+   * Get health-based color
    */
   const getHealthColor = (errorRate: number, isDarkMode: boolean): string => {
     const green = isDarkMode ? "#10b981" : "#52c41a"
diff --git a/web/src/composables/useSqlEditorDiagnostics.ts b/web/src/composables/useSqlEditorDiagnostics.ts
index 19e8392bb9..d0cbc0db9b 100644
--- a/web/src/composables/useSqlEditorDiagnostics.ts
+++ b/web/src/composables/useSqlEditorDiagnostics.ts
@@ -57,8 +57,7 @@ interface Options {
   streamName?: Ref<string | undefined>;
   /**
    * Optional reactive array written by the server response handler.
-   * When provided, the composable watches it and forwards ranges to the editor,
-   * replacing the per-page watcher that was previously in Index.vue / parent components.
+   * When provided, the composable watches it and forwards ranges to the editor.
    */
   externalErrors?: Ref<SqlErrorRange[]>;
 }
@@ -96,7 +95,6 @@ export function useSqlEditorDiagnostics({
   }
 
   // ── Forward externalErrors (server errors) to the editor ────────────────────
-  // This replaces the per-page watcher that previously lived in Index.vue.
   if (externalErrors) {
     watch(
       externalErrors,
diff --git a/web/src/composables/useStickyColumns.spec.ts b/web/src/composables/useStickyColumns.spec.ts
index 3f0bce6e38..2678a84abc 100644
--- a/web/src/composables/useStickyColumns.spec.ts
+++ b/web/src/composables/useStickyColumns.spec.ts
@@ -16,6 +16,7 @@
 import { describe, expect, it, beforeEach, afterEach } from "vitest";
 import { nextTick } from "vue";
 import { useStickyColumns } from "./useStickyColumns";
+import { chartColor } from "@/utils/chartTheme";
 
 describe("useStickyColumns", () => {
   let mockProps: any;
@@ -218,7 +219,7 @@ describe("useStickyColumns", () => {
         position: "sticky",
         left: "0px",
         "z-index": 2,
-        "background-color": "#fff",
+        "background-color": chartColor("--color-surface-base"),
         "box-shadow": "4px 0 8px rgba(0, 0, 0, 0.15)",
       });
     });
@@ -250,22 +251,23 @@ describe("useStickyColumns", () => {
       expect(style.left).toBe("0px");
     });
 
-    it("should apply dark theme background color", () => {
+    it("should apply the surface-base token color in dark theme", () => {
       mockStore.state.theme = "dark";
       composable = useStickyColumns(mockProps, mockStore);
 
       const style = composable.getStickyColumnStyle({ sticky: true, name: "col1" });
 
-      expect(style["background-color"]).toBe("#1a1a1a");
+      // Background is now the resolved --color-surface-base token (theme-independent in jsdom)
+      expect(style["background-color"]).toBe(chartColor("--color-surface-base"));
     });
 
-    it("should apply light theme background color", () => {
+    it("should apply the surface-base token color in light theme", () => {
       mockStore.state.theme = "light";
       composable = useStickyColumns(mockProps, mockStore);
 
       const style = composable.getStickyColumnStyle({ sticky: true, name: "col1" });
 
-      expect(style["background-color"]).toBe("#fff");
+      expect(style["background-color"]).toBe(chartColor("--color-surface-base"));
     });
   });
 
@@ -314,8 +316,8 @@ describe("useStickyColumns", () => {
 
       const style = composable.getStickyColumnStyle({ sticky: true, name: "col1" });
 
-      // Theme determines background color
-      expect(style["background-color"]).toBe("#1a1a1a");
+      // Background color is driven by the --color-surface-base token
+      expect(style["background-color"]).toBe(chartColor("--color-surface-base"));
     });
 
     it("should skip offset calculation for non-sticky columns", () => {
@@ -540,19 +542,20 @@ describe("useStickyColumns", () => {
       expect(composable.stickyColumnOffsets.value).toBeDefined();
     });
 
-    it("should update style when theme changes in store", () => {
+    it("should return the token-driven color regardless of theme", () => {
       mockProps.columns = [{ name: "col1", sticky: true }];
       mockStore.state.theme = "light";
       composable = useStickyColumns(mockProps, mockStore);
 
       const style1 = composable.getStickyColumnStyle({ sticky: true, name: "col1" });
-      expect(style1["background-color"]).toBe("#fff");
+      expect(style1["background-color"]).toBe(chartColor("--color-surface-base"));
 
-      // After theme change, getStickyColumnStyle should return new color
+      // The color now comes from the --color-surface-base token, which resolves the
+      // same in jsdom for both themes (dark handled by CSS, not JS).
       mockStore.state.theme = "dark";
 
       const style2 = composable.getStickyColumnStyle({ sticky: true, name: "col1" });
-      expect(style2["background-color"]).toBe("#1a1a1a");
+      expect(style2["background-color"]).toBe(chartColor("--color-surface-base"));
     });
 
     it("should handle immediate watcher execution", () => {
diff --git a/web/src/composables/useStickyColumns.ts b/web/src/composables/useStickyColumns.ts
index 680c916a05..e60b11366d 100644
--- a/web/src/composables/useStickyColumns.ts
+++ b/web/src/composables/useStickyColumns.ts
@@ -14,6 +14,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { ref, watch, onMounted, onBeforeUnmount } from "vue";
+import { chartColor } from "@/utils/chartTheme";
 
 export function useStickyColumns(props: any, store: any) {
   const stickyColumnOffsets = ref<{ [key: string]: number }>({});
@@ -55,7 +56,7 @@ export function useStickyColumns(props: any, store: any) {
       position: "sticky",
       left: `${leftOffset}px`,
       "z-index": 2,
-      "background-color": store.state.theme === "dark" ? "#1a1a1a" : "#fff",
+      "background-color": chartColor("--color-surface-base"),
       "box-shadow": "4px 0 8px rgba(0, 0, 0, 0.15)",
     };
   };
@@ -71,7 +72,7 @@ export function useStickyColumns(props: any, store: any) {
     styleElement.setAttribute("data-sticky-styles", "true");
 
     const columns = (props.columns || []) as any[];
-    const bgColor = store.state.theme === "dark" ? "#1a1a1a" : "#fff";
+    const bgColor = chartColor("--color-surface-base");
     let css = "";
 
     const stickyColTotals = !!props.stickyColTotals;
@@ -96,7 +97,7 @@ export function useStickyColumns(props: any, store: any) {
             position: sticky !important;
             left: ${offset}px !important;
             z-index: 4 !important;
-            background-color: var(--o2-sticky-col-header-bg) !important;
+            background-color: var(--color-sticky-col-header-bg) !important;
             box-shadow: ${shadow} !important;
           }
           ${scope} tbody td:nth-child(${colIndex + 1}).sticky-column {
@@ -116,7 +117,7 @@ export function useStickyColumns(props: any, store: any) {
             right: ${rightOffset}px !important;
             z-index: 4 !important;
             min-width: ${TOTAL_COL_WIDTH}px !important;
-            background-color: var(--o2-sticky-col-header-bg) !important;
+            background-color: var(--color-sticky-col-header-bg) !important;
             box-shadow: ${shadow} !important;
           }
         `;
diff --git a/web/src/composables/useSuggestions.ts b/web/src/composables/useSuggestions.ts
index ceddd2ff52..c5b35574a8 100644
--- a/web/src/composables/useSuggestions.ts
+++ b/web/src/composables/useSuggestions.ts
@@ -275,7 +275,7 @@ const useSqlSuggestions = () => {
       open: (val: string) => {},
       close: (val: string) => {},
     },
-    // [NEW] Stream context — set by SearchBar.vue when a stream is selected.
+    // Stream context — set by SearchBar.vue when a stream is selected.
     // Required to build the composite IDB key: "org|streamType|streamName|fieldName".
     // Without these three, getFieldValuesForSuggestion cannot look up stored values.
     org: "",
@@ -445,14 +445,14 @@ const useSqlSuggestions = () => {
     if (sqlWhereClause.meta.label) {
       const fieldName = sqlWhereClause.meta.label;
 
-      // [EXISTING] In-session values — collected from the current session's
+      // In-session values — collected from the current session's
       // search result hits and stored in the reactive fieldValues prop.
       // These are available immediately (no async) but disappear on page reload.
       const inSessionValues = Array.from(
         autoCompleteData.value.fieldValues[fieldName] || new Set(),
       ) as string[];
 
-      // [NEW] Persisted values — read from IndexedDB (via in-memory cache).
+      // Persisted values — read from IndexedDB (via in-memory cache).
       // These survive page reloads and accumulate across multiple searches.
       // Guard: only query IDB if stream context is set — without org/streamType/
       // streamName we cannot build the composite key and would get empty results.
diff --git a/web/src/composables/useTextHighlighter.ts b/web/src/composables/useTextHighlighter.ts
index e8e5f8a57f..e25661e37b 100644
--- a/web/src/composables/useTextHighlighter.ts
+++ b/web/src/composables/useTextHighlighter.ts
@@ -88,7 +88,6 @@ export function useTextHighlighter() {
 
   /**
    * Splits text by highlight keywords and marks matched parts
-   * Similar to the original HighLight component logic
    *
    * @param text - Text to process
    * @param keywords - Array of keywords to highlight
@@ -128,57 +127,8 @@ export function useTextHighlighter() {
   }
 
   /**
-   * Simplified tokenization - just split by whitespace
-   *
-   * KEY SIMPLIFICATION: We removed the complex "quoted" and "bracketed" types!
-   *
-   * OLD BEHAVIOR (COMPLEX - ~180 lines):
-   * ────────────────────────────────────
-   * Input:  'Hello "quoted text" world [bracket]'
-   * Output: [
-   *   {content: "Hello", type: "token"},
-   *   {content: " ", type: "whitespace"},
-   *   {content: '"quoted text"', type: "quoted"},      ← Special handling!
-   *   {content: " ", type: "whitespace"},
-   *   {content: "world", type: "token"},
-   *   {content: " ", type: "whitespace"},
-   *   {content: "[bracket]", type: "bracketed"}        ← Special handling!
-   * ]
-   *
-   * Problems with old approach:
-   * - Complex state machine to track quotes/brackets
-   * - Special logic for apostrophes (don't, it's, 5'10")
-   * - Used .trim() which caused character loss
-   * - Hard to maintain and debug
-   *
-   * NEW BEHAVIOR (SIMPLIFIED - 19 lines):
-   * ────────────────────────────────────
-   * Input:  'Hello "quoted text" world [bracket]'
-   * Output: [
-   *   {content: "Hello", type: "token"},
-   *   {content: " ", type: "whitespace"},
-   *   {content: '"quoted', type: "token"},              ← Just a token!
-   *   {content: " ", type: "whitespace"},
-   *   {content: 'text"', type: "token"},                ← Just a token!
-   *   {content: " ", type: "whitespace"},
-   *   {content: "world", type: "token"},
-   *   {content: " ", type: "whitespace"},
-   *   {content: "[bracket]", type: "token"}             ← Just a token!
-   * ]
-   *
-   * Why this works better:
-   * 1. Quotes and brackets are just regular characters - they're part of the data!
-   * 2. No character loss - every character appears exactly once
-   * 3. Semantic detection (IPs, URLs, emails) happens AFTER tokenization
-   * 4. Much simpler to understand and maintain
-   * 5. Identical performance (837ms → 839ms, within variance)
-   *
-   * How quotes/brackets are now handled:
-   * - They stay attached to the text they're part of
-   * - Split happens ONLY on whitespace
-   * - Example: '"hello' and 'world"' are separate tokens
-   * - Semantic highlighting still works correctly
-   * - Keyword highlighting works correctly
+   * Tokenizes text by splitting on whitespace only. Quotes and brackets stay
+   * attached to the text they are part of; semantic detection happens afterwards.
    *
    * @param text - Text to tokenize
    * @returns Array of token objects with only 2 types: "token" or "whitespace"
@@ -202,15 +152,12 @@ export function useTextHighlighter() {
     const tokens: Array<{ content: string; type: string }> = [];
 
     // Split by whitespace but keep the whitespace in the result
-    // Using a regex with capturing group (\s+) preserves the separators
-    // This is the ONLY splitting logic - no quote/bracket detection!
+    // (capturing group (\s+) preserves the separators)
     const parts = text.split(/(\s+)/);
 
     for (const part of parts) {
       if (!part) continue; // Skip empty strings from split
 
-      // Only 2 types now: "whitespace" or "token"
-      // No more "quoted", "bracketed", or other complex types
       const isWhitespace = /^\s+$/.test(part);
       tokens.push({
         content: part,
diff --git a/web/src/composables/useTheme.ts b/web/src/composables/useTheme.ts
new file mode 100644
index 0000000000..19da413f61
--- /dev/null
+++ b/web/src/composables/useTheme.ts
@@ -0,0 +1,34 @@
+// Copyright 2026 OpenObserve Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import { computed } from "vue";
+import { useStore } from "vuex";
+
+/**
+ * The single sanctioned JS seam for reading dark mode.
+ *
+ * This is the ONLY file (besides `utils/chartTheme.ts`) permitted to string-compare
+ * `store.state.theme`. Everywhere else, use a design token (dark handled automatically
+ * by `dark.css`), the Tailwind `dark:` variant, or — for JS-only surfaces — this
+ * composable / `chartColor()`. Never `store.state.theme === 'dark'`, a private `isDark`
+ * const, or `classList.contains('body--dark')`.
+ */
+export function useTheme() {
+  const store = useStore();
+  const isDark = computed(() => store.state.theme === "dark");
+  return { isDark };
+}
+
+export default useTheme;
diff --git a/web/src/composables/useToolbarPins.ts b/web/src/composables/useToolbarPins.ts
index 50f1822101..f9eedc0a00 100644
--- a/web/src/composables/useToolbarPins.ts
+++ b/web/src/composables/useToolbarPins.ts
@@ -40,8 +40,6 @@ const STORAGE_KEY = "logs_toolbar_pinned_items";
 // arrays persisted before the item existed as a pin key) means "never
 // decided", not "unpinned" — the per-item flag below records the user's first
 // explicit pin/unpin, after which STORAGE_KEY alone is authoritative.
-//
-// - histogram: was a fixed toolbar control before it became pinnable.
 const DEFAULT_PINNED: ToolbarPinKey[] = ["histogram"];
 const PIN_DECIDED_KEYS: Partial<Record<ToolbarPinKey, string>> = {
   histogram: "logs_toolbar_histogram_pin_decided",
diff --git a/web/src/constants/features.ts b/web/src/constants/features.ts
index a6377da396..6d2457936c 100644
--- a/web/src/constants/features.ts
+++ b/web/src/constants/features.ts
@@ -23,12 +23,6 @@
  * 1. Add a new entry to features.json
  * 2. Add corresponding i18n translation keys to all locale files
  * 3. The feature will automatically appear in the UI
- *
- * Benefits of JSON-based configuration:
- * - Non-developers (product managers) can easily update features
- * - No TypeScript knowledge required
- * - Changes are validated by JSON schema
- * - Bundled with UI build automatically
  */
 
 import featuresData from './features.json';
diff --git a/web/src/constants/themes.ts b/web/src/constants/themes.ts
index 492da3b383..bceafd6f9a 100644
--- a/web/src/constants/themes.ts
+++ b/web/src/constants/themes.ts
@@ -31,8 +31,6 @@ import type { SemanticColors } from "@/utils/theme";
 export interface ThemeModeColors {
   // Hex color used for buttons/toggles/borders and to derive the primary palette
   themeColor: string;
-  // Opacity on a 1-10 scale (10 = fully opaque). Kept for backwards-compat.
-  themeColorOpacity?: number;
   // Optional multi-color semantic palette (errors/success/secondary button, etc.)
   semanticColors?: SemanticColors;
 }
@@ -68,24 +66,16 @@ export const THEME_STORAGE_KEYS = {
   },
 } as const;
 
-/**
- * Predefined themes with both light and dark mode colors.
- * Update a theme's color codes here and every user who selected it by name
- * (or who is on the default) will pick up the change on next load.
- */
+/** Predefined themes with both light and dark mode colors. */
 export const PREDEFINED_THEMES: PredefinedTheme[] = [
-  // Theme names are intentionally color-agnostic (observability/product terms),
-  // so a theme's accent colors can change in any release without the name going stale.
   {
     id: 10,
     name: "O2 Signature",
     light: {
       themeColor: "#6B76E3",
-      themeColorOpacity: 10,
     },
     dark: {
       themeColor: "#8B8DF0",
-      themeColorOpacity: 10,
     },
   },
   {
@@ -93,11 +83,9 @@ export const PREDEFINED_THEMES: PredefinedTheme[] = [
     name: "O2 Pulse",
     light: {
       themeColor: "#3F7994",
-      themeColorOpacity: 10,
     },
     dark: {
       themeColor: "#3F7994",
-      themeColorOpacity: 10,
     },
   },
   {
@@ -105,11 +93,9 @@ export const PREDEFINED_THEMES: PredefinedTheme[] = [
     name: "O2 Horizon",
     light: {
       themeColor: "#077A7F",
-      themeColorOpacity: 10,
     },
     dark: {
       themeColor: "#588CF3",
-      themeColorOpacity: 10,
     },
   },
   {
@@ -117,11 +103,9 @@ export const PREDEFINED_THEMES: PredefinedTheme[] = [
     name: "O2 Beacon",
     light: {
       themeColor: "#3369D6",
-      themeColorOpacity: 10,
     },
     dark: {
       themeColor: "#6EA8FE",
-      themeColorOpacity: 10,
     },
   },
   {
@@ -129,11 +113,9 @@ export const PREDEFINED_THEMES: PredefinedTheme[] = [
     name: "O2 Lens",
     light: {
       themeColor: "#4682FA",
-      themeColorOpacity: 10,
     },
     dark: {
       themeColor: "#E56D17",
-      themeColorOpacity: 10,
     },
   },
   {
@@ -141,7 +123,6 @@ export const PREDEFINED_THEMES: PredefinedTheme[] = [
     name: "O2 Crimson Ink",
     light: {
       themeColor: "#E11D48",
-      themeColorOpacity: 10,
       semanticColors: {
         error: "#F97316",
         errorBg: "#FFF7ED",
@@ -159,7 +140,6 @@ export const PREDEFINED_THEMES: PredefinedTheme[] = [
     },
     dark: {
       themeColor: "#FB7185",
-      themeColorOpacity: 10,
       semanticColors: {
         error: "#FB923C",
         errorBg: "#3A1A08",
diff --git a/web/src/enterprise/components/EvalTemplateEditor.schema.ts b/web/src/enterprise/components/EvalTemplateEditor.schema.ts
deleted file mode 100644
index 6635764f59..0000000000
--- a/web/src/enterprise/components/EvalTemplateEditor.schema.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// Validation schema for EvalTemplateEditor.vue (the eval-template create/edit
-// page). Replaces the hand-rolled `errors` ref + the `saveTemplate()` manual
-// checks with a schema-driven OForm (online-evals-migration.md re-audit row).
-//
-// `dimensions` is a creatable multi-select → a form-owned `z.array(...)` field
-// (TanStack owns arrays). Edit-prefill arrives async (fetched in onBeforeMount),
-// so the component seeds blank defaults and `form.reset(record)` once it loads.
-
-import { z } from "zod";
-
-const requiredText = (message: string) =>
-  z.string().refine((val) => val.trim().length > 0, { message });
-
-export const makeEvalTemplateSchema = (t: (_key: string) => string) =>
-  z.object({
-    name: requiredText(t("evalTemplate.nameRequired")),
-    description: z.string().optional().default(""),
-    response_type: requiredText(t("evalTemplate.responseTypeRequired")),
-    dimensions: z.array(z.string()).min(1, t("evalTemplate.dimensionRequired")),
-    content: requiredText(t("evalTemplate.contentRequired")),
-  });
-
-export type EvalTemplateForm = z.infer<ReturnType<typeof makeEvalTemplateSchema>>;
-
-export const evalTemplateDefaults = (): EvalTemplateForm => ({
-  name: "",
-  description: "",
-  response_type: "",
-  dimensions: [],
-  content: "",
-});
diff --git a/web/src/enterprise/components/EvalTemplateEditor.spec.ts b/web/src/enterprise/components/EvalTemplateEditor.spec.ts
deleted file mode 100644
index 35bb637598..0000000000
--- a/web/src/enterprise/components/EvalTemplateEditor.spec.ts
+++ /dev/null
@@ -1,239 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// Behavior tests for EvalTemplateEditor after the OForm + Zod migration
-// (online-evals-migration.md re-audit row). The old internals-driven tests
-// (vm.form / vm.saving / calling vm.saveTemplate() directly) were rewritten to
-// drive the REAL <OForm> so the schema actually gates submits — an unwired
-// `:schema` would now be caught.
-
-import { describe, expect, it, beforeEach, vi, afterEach } from "vitest";
-import { mount, flushPromises } from "@vue/test-utils";
-import i18n from "@/locales";
-import store from "@/test/unit/helpers/store";
-
-const mockPush = vi.fn();
-let mockRouteParams: Record<string, string> = {};
-
-vi.mock("vue-router", () => ({
-  useRouter: () => ({ push: mockPush }),
-  useRoute: () => ({ params: mockRouteParams }),
-}));
-
-vi.mock("@/services/eval-template.service", () => ({
-  evalTemplateService: {
-    getTemplate: vi.fn(),
-    createTemplate: vi.fn(),
-    updateTemplate: vi.fn(),
-  },
-}));
-
-import EvalTemplateEditor from "@/enterprise/components/EvalTemplateEditor.vue";
-import { evalTemplateService } from "@/services/eval-template.service";
-
-const existingTemplate = {
-  id: "tmpl-abc",
-  name: "My Template",
-  response_type: "score",
-  description: "Some description",
-  content: "Evaluate {{input}} on accuracy.",
-  dimensions: ["accuracy", "relevance"],
-  version: 2,
-  created_at: Date.now(),
-  updated_at: Date.now(),
-};
-
-async function mountEditor() {
-  return mount(EvalTemplateEditor, {
-    global: { plugins: [i18n, store] },
-  });
-}
-
-function oform(w: any) {
-  return w.findComponent({ name: "OForm" }).vm as any;
-}
-function setField(w: any, name: string, value: unknown) {
-  oform(w).form.setFieldValue(name, value);
-}
-async function submit(w: any) {
-  await oform(w).form.handleSubmit();
-  await flushPromises();
-}
-
-describe("EvalTemplateEditor - rendering (create mode)", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    mockRouteParams = {};
-  });
-  afterEach(() => vi.restoreAllMocks());
-
-  it("renders the editor page + real OForm", async () => {
-    const wrapper = await mountEditor();
-    expect(wrapper.find('[data-test="eval-template-editor-page"]').exists()).toBe(true);
-    expect(wrapper.findComponent({ name: "OForm" }).exists()).toBe(true);
-  });
-
-  it("renders the title, back, cancel and save buttons", async () => {
-    const wrapper = await mountEditor();
-    expect(wrapper.find('[data-test="eval-template-editor-title"]').exists()).toBe(true);
-    expect(wrapper.find('[data-test="eval-template-editor-back-btn"]').exists()).toBe(true);
-    expect(wrapper.find('[data-test="eval-template-editor-cancel-btn"]').exists()).toBe(true);
-    expect(wrapper.find('[data-test="eval-template-editor-save-btn"]').exists()).toBe(true);
-  });
-
-  it("shows the create title + save label in create mode", async () => {
-    const wrapper = await mountEditor();
-    expect(wrapper.find('[data-test="eval-template-editor-title"]').text()).toContain("Create");
-    const btn = wrapper.find('[data-test="eval-template-editor-save-btn"]');
-    expect(btn.text().toLowerCase()).toContain("save");
-  });
-
-  it("keeps Save enabled with no errors before first submit (R3)", async () => {
-    const wrapper = await mountEditor();
-    const save = wrapper.find('[data-test="eval-template-editor-save-btn"]');
-    expect(save.attributes("disabled")).toBeUndefined();
-    expect(oform(wrapper).form.state.isValid).toBe(true);
-  });
-});
-
-describe("EvalTemplateEditor - rendering (edit mode)", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    mockRouteParams = { id: "tmpl-abc" };
-    vi.mocked(evalTemplateService.getTemplate).mockResolvedValue(existingTemplate as any);
-  });
-  afterEach(() => vi.restoreAllMocks());
-
-  it("calls getTemplate on mount with the route id", async () => {
-    await mountEditor();
-    await flushPromises();
-    expect(evalTemplateService.getTemplate).toHaveBeenCalledWith(expect.any(String), "tmpl-abc");
-  });
-
-  it("resets the form from the fetched template", async () => {
-    const wrapper: any = await mountEditor();
-    await flushPromises();
-    const values = oform(wrapper).form.state.values;
-    expect(values.name).toBe(existingTemplate.name);
-    expect(values.response_type).toBe(existingTemplate.response_type);
-    expect(values.content).toBe(existingTemplate.content);
-    expect(values.dimensions).toEqual(existingTemplate.dimensions);
-  });
-
-  it("shows the edit title + update label", async () => {
-    const wrapper = await mountEditor();
-    await flushPromises();
-    expect(wrapper.find('[data-test="eval-template-editor-title"]').text()).toContain("Edit");
-    const btn = wrapper.find('[data-test="eval-template-editor-save-btn"]');
-    expect(btn.text().toLowerCase()).toContain("update");
-  });
-});
-
-describe("EvalTemplateEditor - schema validation (create mode)", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    mockRouteParams = {};
-    vi.mocked(evalTemplateService.createTemplate).mockResolvedValue(existingTemplate as any);
-  });
-  afterEach(() => vi.restoreAllMocks());
-
-  const fillValid = (w: any) => {
-    setField(w, "name", "New Template");
-    setField(w, "response_type", "score");
-    setField(w, "content", "Evaluate {{input}}.");
-    setField(w, "dimensions", ["accuracy", "relevance"]);
-  };
-
-  it("blocks an empty submit and does NOT call createTemplate", async () => {
-    const wrapper = await mountEditor();
-    await submit(wrapper);
-    expect(oform(wrapper).form.state.isValid).toBe(false);
-    expect(evalTemplateService.createTemplate).not.toHaveBeenCalled();
-  });
-
-  it.each(["name", "response_type", "content"])(
-    "blocks submit when %s is missing",
-    async (field) => {
-      const wrapper = await mountEditor();
-      fillValid(wrapper);
-      setField(wrapper, field, "");
-      await submit(wrapper);
-      expect(oform(wrapper).form.state.isValid).toBe(false);
-      expect(evalTemplateService.createTemplate).not.toHaveBeenCalled();
-    },
-  );
-
-  it("blocks submit when dimensions are empty", async () => {
-    const wrapper = await mountEditor();
-    fillValid(wrapper);
-    setField(wrapper, "dimensions", []);
-    await submit(wrapper);
-    expect(oform(wrapper).form.state.isValid).toBe(false);
-    expect(evalTemplateService.createTemplate).not.toHaveBeenCalled();
-  });
-
-  it("calls createTemplate + navigates when the schema passes", async () => {
-    const wrapper = await mountEditor();
-    fillValid(wrapper);
-    await submit(wrapper);
-
-    expect(oform(wrapper).form.state.isValid).toBe(true);
-    expect(evalTemplateService.createTemplate).toHaveBeenCalledWith(
-      expect.any(String),
-      expect.objectContaining({
-        name: "New Template",
-        response_type: "score",
-        content: "Evaluate {{input}}.",
-        dimensions: ["accuracy", "relevance"],
-      }),
-    );
-    expect(mockPush).toHaveBeenCalledWith({ name: "evalTemplates" });
-  });
-});
-
-describe("EvalTemplateEditor - save (edit mode)", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    mockRouteParams = { id: "tmpl-abc" };
-    vi.mocked(evalTemplateService.getTemplate).mockResolvedValue(existingTemplate as any);
-    vi.mocked(evalTemplateService.updateTemplate).mockResolvedValue(existingTemplate as any);
-  });
-  afterEach(() => vi.restoreAllMocks());
-
-  it("calls updateTemplate (not create) with the route id and navigates", async () => {
-    const wrapper = await mountEditor();
-    await flushPromises(); // edit prefill makes the form valid
-    await submit(wrapper);
-    expect(evalTemplateService.updateTemplate).toHaveBeenCalledWith(
-      expect.any(String),
-      "tmpl-abc",
-      expect.any(Object),
-    );
-    expect(evalTemplateService.createTemplate).not.toHaveBeenCalled();
-    expect(mockPush).toHaveBeenCalledWith({ name: "evalTemplates" });
-  });
-});
-
-describe("EvalTemplateEditor - cancel / back", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    mockRouteParams = {};
-  });
-  afterEach(() => vi.restoreAllMocks());
-
-  it("navigates to the list when cancel is clicked", async () => {
-    const wrapper = await mountEditor();
-    await wrapper.find('[data-test="eval-template-editor-cancel-btn"]').trigger("click");
-    expect(mockPush).toHaveBeenCalledWith({ name: "evalTemplates" });
-  });
-
-  it("navigates to the list when back is clicked", async () => {
-    const wrapper = await mountEditor();
-    await wrapper.find('[data-test="eval-template-editor-back-btn"]').trigger("click");
-    expect(mockPush).toHaveBeenCalledWith({ name: "evalTemplates" });
-  });
-});
diff --git a/web/src/enterprise/components/EvalTemplateEditor.vue b/web/src/enterprise/components/EvalTemplateEditor.vue
deleted file mode 100644
index 0aef2947c5..0000000000
--- a/web/src/enterprise/components/EvalTemplateEditor.vue
+++ /dev/null
@@ -1,360 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <div
-    data-test="eval-template-editor-page"
-    class="flex flex-col px-2.5"
-    style="height: calc(100vh - var(--navbar-height) - 14px)"
-  >
-    <!-- Standard app header: back tile + title (Save/Cancel stay in the footer). -->
-    <AppPageHeader
-      :title="isEdit ? t('evalTemplate.editTemplate') : t('evalTemplate.createTemplate')"
-      :back="{
-        label: t('pipeline.evalTemplates'),
-        onClick: cancel,
-        dataTest: 'eval-template-editor-back-btn',
-      }"
-      class="-mx-2.5 px-4 border-b border-border-default mb-2 shrink-0"
-    >
-      <template #title>
-        <span data-test="eval-template-editor-title">{{
-          isEdit ? t("evalTemplate.editTemplate") : t("evalTemplate.createTemplate")
-        }}</span>
-      </template>
-    </AppPageHeader>
-
-    <OForm
-      class="flex flex-col flex-1 min-h-0"
-      :form="form"
-      v-slot="{ isSubmitting }"
-    >
-      <!-- Form content -->
-      <div class="card-container flex-1 min-h-0 mb-2 flex flex-col" style="padding: 1rem">
-        <!-- Row 1: Name & Description -->
-        <div style="display: flex; gap: 1rem; margin-bottom: 1rem">
-          <div style="flex: 1; display: flex; flex-direction: column">
-            <div class="flex items-center gap-1 mb-2">
-              <label class="text-xs font-medium mb-0 text-(--q-color-text) leading-none">{{ t("evalTemplate.templateName") }} *</label>
-              <OIcon name="info" size="xs" class="opacity-45 cursor-default shrink-0 hover:opacity-75">
-                <OTooltip :content="t('evalTemplate.tooltipName')" side="top" />
-              </OIcon>
-            </div>
-            <div class="o2-input">
-              <OFormInput name="name" data-test="eval-template-editor-name-input" />
-            </div>
-          </div>
-          <div style="flex: 1; display: flex; flex-direction: column">
-            <div class="flex items-center gap-1 mb-2">
-              <label class="text-xs font-medium mb-0 text-(--q-color-text) leading-none">{{ t("common.description") }}</label>
-              <OIcon name="info" size="xs" class="opacity-45 cursor-default shrink-0 hover:opacity-75">
-                <OTooltip :content="t('evalTemplate.tooltipDescription')" side="top" />
-              </OIcon>
-            </div>
-            <div class="o2-input">
-              <OFormInput name="description" data-test="eval-template-editor-description-input" />
-            </div>
-          </div>
-        </div>
-
-        <!-- Row 2: Response Type & Dimensions -->
-        <div style="display: flex; gap: 1rem; margin-bottom: 1rem">
-          <div style="flex: 0 0 200px; display: flex; flex-direction: column">
-            <div class="flex items-center gap-1 mb-2">
-              <label class="text-xs font-medium mb-0 text-(--q-color-text) leading-none">{{ t("evalTemplate.responseType") }} *</label>
-              <OIcon name="info" size="xs" class="opacity-45 cursor-default shrink-0 hover:opacity-75">
-                <OTooltip :content="t('evalTemplate.tooltipResponseType')" side="top" />
-              </OIcon>
-            </div>
-            <div class="o2-input">
-              <OFormSelect
-                name="response_type"
-                :options="responseTypes"
-                labelKey="label"
-                valueKey="value"
-                data-test="eval-template-editor-response-type-select"
-              />
-            </div>
-          </div>
-          <div style="flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden">
-            <div class="flex items-center gap-1 mb-2">
-              <label class="text-xs font-medium mb-0 text-(--q-color-text) leading-none">{{ t("evalTemplate.dimensions") }} *</label>
-              <OIcon name="info" size="xs" class="opacity-45 cursor-default shrink-0 hover:opacity-75">
-                <OTooltip :content="t('evalTemplate.tooltipDimensions')" side="top" />
-              </OIcon>
-            </div>
-            <OFormSelect
-              name="dimensions"
-              :options="defaultDimensionOptions"
-              class="no-case dimensions-select w-full"
-              multiple
-              searchable
-              creatable
-              data-test="eval-template-editor-dimensions-select"
-            />
-            <OTooltip v-if="dimensions.length >= 5" :content="dimensions.join(', ')" side="top" />
-          </div>
-        </div>
-
-        <!-- Row 3: Prompt Template -->
-        <div style="display: flex; flex-direction: column; flex: 1; min-height: 0">
-          <div class="flex items-center gap-1 mb-2">
-            <label class="text-xs font-medium mb-0 text-(--q-color-text) leading-none">{{ t("evalTemplate.promptTemplate") }} *</label>
-            <OIcon name="info" size="xs" class="opacity-45 cursor-default shrink-0 hover:opacity-75">
-              <OTooltip :content="t('evalTemplate.tooltipPromptTemplate')" side="top" />
-            </OIcon>
-          </div>
-          <OFormTextarea name="content" fill data-test="eval-template-editor-content-input" />
-        </div>
-      </div>
-
-      <!-- Footer -->
-      <div
-        class="card-container flex items-center justify-end px-3 py-2.5 shrink-0 gap-2"
-      >
-        <OButton
-          data-test="eval-template-editor-cancel-btn"
-          type="button"
-          variant="outline"
-          size="sm-action"
-          :disabled="isSubmitting"
-          @click="cancel"
-        >
-          {{ t('common.cancel') }}
-        </OButton>
-        <OButton
-          data-test="eval-template-editor-save-btn"
-          type="submit"
-          variant="primary"
-          size="sm-action"
-          :loading="isSubmitting"
-        >
-          {{ isEdit ? t('common.update') : t('common.save') }}
-        </OButton>
-      </div>
-    </OForm>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, computed, onBeforeMount } from "vue";
-import { useI18n } from "vue-i18n";
-import { useStore } from "vuex";
-import { useRouter, useRoute } from "vue-router";
-import { evalTemplateService } from "@/services/eval-template.service";
-import OButton from '@/lib/core/Button/OButton.vue';
-import OForm from '@/lib/forms/Form/OForm.vue';
-import { useOForm } from '@/lib/forms/Form/useOForm';
-import OFormInput from '@/lib/forms/Input/OFormInput.vue';
-import OFormTextarea from '@/lib/forms/Input/OFormTextarea.vue';
-import OFormSelect from '@/lib/forms/Select/OFormSelect.vue';
-import OTooltip from '@/lib/overlay/Tooltip/OTooltip.vue';
-import OIcon from "@/lib/core/Icon/OIcon.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
-import { toast } from "@/lib/feedback/Toast/useToast";
-import {
-  makeEvalTemplateSchema,
-  evalTemplateDefaults,
-  type EvalTemplateForm,
-} from "./EvalTemplateEditor.schema";
-
-
-const { t } = useI18n();
-const store = useStore();
-const router = useRouter();
-const route = useRoute();
-
-const isEdit = computed(() => !!route.params.id);
-
-// Co-located Zod schema replaces the hand-rolled `errors` ref + manual checks.
-const evalTemplateSchema = makeEvalTemplateSchema(t);
-
-// OWNER pattern (Rule ③): this component owns <OForm>, so it creates the form
-// with useOForm — a SINGLE source of truth, NO mirror. `dimensions` is read
-// reactively via form.useStore for the parent template's ">= 5" overflow
-// tooltip; the @submit handler reads the validated `value`. Edit data arrives
-// async (onBeforeMount) → form.reset(record) once it loads.
-const form = useOForm<EvalTemplateForm>({
-  defaultValues: evalTemplateDefaults(),
-  schema: evalTemplateSchema,
-  onSubmit: saveTemplate,
-});
-const dimensions = form.useStore((s: any) => s.values.dimensions as string[]);
-
-// ── Dimension options ──────────────────────────────────────────────────────────
-const defaultDimensionOptions = [
-  "accuracy",
-  "clarity",
-  "completeness",
-  "coherence",
-  "conciseness",
-  "correctness",
-  "faithfulness",
-  "helpfulness",
-  "relevance",
-  "safety",
-  "toxicity",
-];
-
-const filteredDimensionOptions = ref<string[]>(defaultDimensionOptions);
-
-const filterDimensions = (val: string, update: (fn: () => void) => void) => {
-  update(() => {
-    if (!val) {
-      filteredDimensionOptions.value = defaultDimensionOptions;
-    } else {
-      const needle = val.toLowerCase();
-      filteredDimensionOptions.value = defaultDimensionOptions.filter((d) =>
-        d.includes(needle),
-      );
-    }
-  });
-};
-
-const responseTypes = [
-  { label: t("evalTemplate.typeScore"), value: "score" },
-  { label: t("evalTemplate.typeBoolean"), value: "boolean" },
-  { label: t("evalTemplate.typeCustom"), value: "custom" },
-];
-
-// ── Actions ────────────────────────────────────────────────────────────────────
-const cancel = () => {
-  router.push({ name: "evalTemplates" });
-};
-
-// @submit handler — OForm only calls this once the schema passes (name/
-// response_type/content required + dimensions ≥ 1), so the schema (not the old
-// manual `errors` checks) gates the save. OForm awaits this → the Save spinner
-// is form-driven (no manual `saving` ref).
-async function saveTemplate(value: EvalTemplateForm) {
-  const dismiss = toast({ variant: "loading", message: t("common.loading"), timeout: 0 });
-
-  try {
-    const orgId = store.state.selectedOrganization.identifier;
-    const payload = {
-      name: value.name,
-      response_type: value.response_type,
-      description: value.description,
-      content: value.content,
-      dimensions: value.dimensions,
-    };
-
-    if (isEdit.value) {
-      await evalTemplateService.updateTemplate(orgId, route.params.id as string, payload);
-      toast({ variant: "success", message: t("evalTemplate.updateSuccess") });
-    } else {
-      await evalTemplateService.createTemplate(orgId, payload);
-      toast({ variant: "success", message: t("evalTemplate.createSuccess") });
-    }
-
-    router.push({ name: "evalTemplates" });
-  } catch (err: any) {
-    toast({
-      variant: "error",
-      message:
-        err?.response?.data?.message ||
-        (isEdit.value ? t("evalTemplate.updateFailed") : t("evalTemplate.createFailed")),
-    });
-  } finally {
-    dismiss();
-  }
-}
-
-// ── Lifecycle: load template for edit ─────────────────────────────────────────
-onBeforeMount(async () => {
-  if (!isEdit.value) return;
-
-  try {
-    const orgId = store.state.selectedOrganization.identifier;
-    const template = await evalTemplateService.getTemplate(
-      orgId,
-      route.params.id as string,
-    );
-    // Edit data arrives AFTER mount → reset the one form once it loads (not a
-    // per-field write); the `dimensions` useStore view updates with it.
-    form.reset({
-      name: template.name,
-      response_type: template.response_type,
-      description: template.description || "",
-      content: template.content,
-      dimensions: [...(template.dimensions ?? [])],
-    });
-  } catch (err: any) {
-    if (err?.response?.status !== 403) {
-      toast({
-        variant: "error",
-        message: err?.response?.data?.message || t("evalTemplate.loadFailed"),
-      });
-    }
-    router.push({ name: "evalTemplates" });
-  }
-});
-</script>
-
-<style scoped lang="scss">
-:deep(.dimensions-select) {
-  .q-field__bottom {
-    display: none !important;
-  }
-}
-
-:deep(.dimensions-select.q-field--auto-height) {
-  max-width: 100%;
-  min-width: 0;
-
-  .q-field__control {
-    height: 40px !important;
-    max-height: 40px !important;
-    overflow: hidden !important;
-    display: flex;
-    align-items: center;
-  }
-
-  .q-field__control-container {
-    padding-top: 0 !important;
-    padding-bottom: 0 !important;
-    padding-right: 36px;
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-    height: 100%;
-  }
-
-  .q-field__native {
-    height: 100% !important;
-    min-height: unset !important;
-    gap: 4px;
-    overflow-x: auto !important;
-    overflow-y: hidden !important;
-    display: flex !important;
-    flex-wrap: nowrap !important;
-    align-items: center !important;
-    padding-top: 0 !important;
-    padding-bottom: 0 !important;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-
-  input {
-    min-width: 80px !important;
-    flex-shrink: 0 !important;
-  }
-}
-</style>
diff --git a/web/src/enterprise/components/EvalTemplateList.spec.ts b/web/src/enterprise/components/EvalTemplateList.spec.ts
deleted file mode 100644
index 671759082c..0000000000
--- a/web/src/enterprise/components/EvalTemplateList.spec.ts
+++ /dev/null
@@ -1,241 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { describe, expect, it, beforeEach, vi, afterEach } from "vitest";
-import { mount, flushPromises } from "@vue/test-utils";
-import i18n from "@/locales";
-import store from "@/test/unit/helpers/store";
-
-const mockPush = vi.fn();
-
-vi.mock("vue-router", () => ({
-  useRouter: () => ({ push: mockPush }),
-  useRoute: () => ({ params: {}, query: {} }),
-}));
-
-vi.mock("@/services/eval-template.service", () => ({
-  evalTemplateService: {
-    listTemplates: vi.fn(),
-    deleteTemplate: vi.fn(),
-  },
-}));
-
-import EvalTemplateList from "@/enterprise/components/EvalTemplateList.vue";
-import { evalTemplateService } from "@/services/eval-template.service";
-
-// ── Helpers ────────────────────────────────────────────────────────────────────
-
-interface Template {
-  id: string;
-  name: string;
-  response_type: string;
-  description?: string;
-  content: string;
-  dimensions: string[];
-  version: number;
-  created_at: number;
-  updated_at: number;
-}
-
-const makeTemplate = (idx: number, overrides: Partial<Template> = {}): Template => ({
-  id: `tmpl-${idx}`,
-  name: overrides.name ?? `Template ${idx}`,
-  response_type: overrides.response_type ?? "score",
-  description: "",
-  content: `Evaluate {{input}} for quality.`,
-  dimensions: ["accuracy", "relevance"],
-  version: 1,
-  created_at: Date.now(),
-  updated_at: Date.now(),
-  ...overrides,
-});
-
-let templatesDB: Template[] = [];
-
-async function mountList() {
-  return mount(EvalTemplateList, {
-    global: {
-      plugins: [i18n, store],
-      stubs: {
-        NoData: true,
-        ConfirmDialog: true,
-      },
-    },
-  });
-}
-
-// ── Tests ──────────────────────────────────────────────────────────────────────
-
-describe("EvalTemplateList - rendering", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    templatesDB = [
-      makeTemplate(1, { name: "Accuracy Check", response_type: "score" }),
-      makeTemplate(2, { name: "Toxicity Filter", response_type: "boolean" }),
-      makeTemplate(3, { name: "Custom Eval", response_type: "custom" }),
-    ];
-    vi.mocked(evalTemplateService.listTemplates).mockResolvedValue(templatesDB as any);
-  });
-
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  it("renders the list page container", async () => {
-    const wrapper = await mountList();
-    expect(wrapper.find('[data-test="eval-template-list-page"]').exists()).toBe(true);
-  });
-
-  it("renders the page title", async () => {
-    const wrapper = await mountList();
-    expect(wrapper.find('[data-test="eval-template-list-title"]').exists()).toBe(true);
-  });
-
-  it("renders search input", async () => {
-    const wrapper = await mountList();
-    expect(wrapper.find('[data-test="eval-template-list-search-input"]').exists()).toBe(true);
-  });
-
-  it("renders refresh button", async () => {
-    const wrapper = await mountList();
-    expect(wrapper.find('[data-test="eval-template-list-refresh-btn"]').exists()).toBe(true);
-  });
-
-  it("renders add button", async () => {
-    const wrapper = await mountList();
-    expect(wrapper.find('[data-test="eval-template-list-add-btn"]').exists()).toBe(true);
-  });
-
-  it("renders the table", async () => {
-    const wrapper = await mountList();
-    expect(wrapper.find('[data-test="eval-template-list-table"]').exists()).toBe(true);
-  });
-});
-
-describe("EvalTemplateList - data loading", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    templatesDB = [
-      makeTemplate(1, { name: "Accuracy Check" }),
-      makeTemplate(2, { name: "Toxicity Filter" }),
-    ];
-    vi.mocked(evalTemplateService.listTemplates).mockResolvedValue(templatesDB as any);
-  });
-
-  afterEach(() => vi.restoreAllMocks());
-
-  it("calls listTemplates on mount", async () => {
-    await mountList();
-    await flushPromises();
-    expect(evalTemplateService.listTemplates).toHaveBeenCalledOnce();
-  });
-
-  it("populates rows after loading", async () => {
-    const wrapper: any = await mountList();
-    await flushPromises();
-    expect(wrapper.vm.rows.length).toBe(templatesDB.length);
-  });
-
-  it("sets isLoading to false after load completes", async () => {
-    const wrapper: any = await mountList();
-    await flushPromises();
-    expect(wrapper.vm.isLoading).toBe(false);
-  });
-
-  it("calls listTemplates again when refresh button is clicked", async () => {
-    const wrapper: any = await mountList();
-    await flushPromises();
-    await wrapper.find('[data-test="eval-template-list-refresh-btn"]').trigger("click");
-    await flushPromises();
-    expect(evalTemplateService.listTemplates).toHaveBeenCalledTimes(2);
-  });
-});
-
-describe("EvalTemplateList - navigation", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    vi.mocked(evalTemplateService.listTemplates).mockResolvedValue([]);
-  });
-
-  afterEach(() => vi.restoreAllMocks());
-
-  it("navigates to create page when add button is clicked", async () => {
-    const wrapper = await mountList();
-    await wrapper.find('[data-test="eval-template-list-add-btn"]').trigger("click");
-    expect(mockPush).toHaveBeenCalledWith({ name: "evalTemplatesAdd" });
-  });
-
-  it("navigates to edit page when goToEdit is called", async () => {
-    const wrapper: any = await mountList();
-    const template = makeTemplate(1);
-    wrapper.vm.goToEdit(template);
-    expect(mockPush).toHaveBeenCalledWith({
-      name: "evalTemplatesEdit",
-      params: { id: template.id },
-    });
-  });
-});
-
-describe("EvalTemplateList - delete", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    templatesDB = [makeTemplate(1, { name: "To Delete" }), makeTemplate(2)];
-    vi.mocked(evalTemplateService.listTemplates).mockResolvedValue(templatesDB as any);
-    vi.mocked(evalTemplateService.deleteTemplate).mockResolvedValue(undefined as any);
-  });
-
-  afterEach(() => vi.restoreAllMocks());
-
-  it("opens delete dialog when confirmDelete is called", async () => {
-    const wrapper: any = await mountList();
-    const template = templatesDB[0];
-    wrapper.vm.confirmDelete(template);
-    await wrapper.vm.$nextTick();
-    expect(wrapper.vm.deleteDialog.show).toBe(true);
-    expect(wrapper.vm.deleteDialog.data).toEqual(template);
-  });
-
-  it("calls deleteTemplate and reloads on deleteTemplate confirm", async () => {
-    const wrapper: any = await mountList();
-    await flushPromises();
-    const template = templatesDB[0];
-    wrapper.vm.deleteDialog.data = template;
-    await wrapper.vm.deleteTemplate();
-    await flushPromises();
-    expect(evalTemplateService.deleteTemplate).toHaveBeenCalledWith(
-      expect.any(String),
-      template.id,
-    );
-    expect(evalTemplateService.listTemplates).toHaveBeenCalledTimes(2);
-  });
-
-  it("closes dialog after deletion", async () => {
-    const wrapper: any = await mountList();
-    await flushPromises();
-    wrapper.vm.deleteDialog.data = templatesDB[0];
-    await wrapper.vm.deleteTemplate();
-    await flushPromises();
-    expect(wrapper.vm.deleteDialog.show).toBe(false);
-  });
-
-  it("bulk delete calls deleteTemplate for each selected item", async () => {
-    const wrapper: any = await mountList();
-    await flushPromises();
-    wrapper.vm.selectedIds = [templatesDB[0].id, templatesDB[1].id];
-    await wrapper.vm.bulkDeleteTemplates();
-    await flushPromises();
-    expect(evalTemplateService.deleteTemplate).toHaveBeenCalledTimes(2);
-  });
-});
diff --git a/web/src/enterprise/components/EvalTemplateList.vue b/web/src/enterprise/components/EvalTemplateList.vue
deleted file mode 100644
index be2f0ba848..0000000000
--- a/web/src/enterprise/components/EvalTemplateList.vue
+++ /dev/null
@@ -1,420 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <div
-    data-test="eval-template-list-page"
-    class="flex flex-col h-full min-h-0"
-  >
-    <!-- Standard section header: title + section tabs + actions. -->
-    <AppPageHeader
-      :title="t('evalTemplate.header')"
-      icon="fact-check"
-      :subtitle="'Reusable scoring templates for LLM evaluations'"
-      tabs-below
-      class="shrink-0 px-4"
-    >
-      <template #title>
-        <span data-test="eval-template-list-title">{{ t("evalTemplate.header") }}</span>
-      </template>
-      <template #tabs>
-        <PipelineSectionTabs />
-      </template>
-      <template #actions>
-        <OButton
-          data-test="eval-template-list-add-btn"
-          variant="primary"
-          size="sm"
-          @click="goToCreate"
-        >
-          {{ t('evalTemplate.newTemplate') }}
-        </OButton>
-      </template>
-    </AppPageHeader>
-
-    <!-- Table area -->
-    <div class="w-full flex-1 min-h-0 overflow-hidden">
-      <div class="card-container h-full">
-        <OTable
-          :frame="false"
-          data-test="eval-template-list-table"
-          :data="rows"
-          :columns="columns"
-          row-key="id"
-          :loading="isLoading"
-          v-model:global-filter="filterQuery"
-          :show-global-filter="false"
-          filter-mode="client"
-          :page-size="20"
-          :page-size-options="[20, 50, 100, 250, 500]"
-          selection="multiple"
-          v-model:selected-ids="selectedIds"
-          :default-columns="false"
-          :enable-column-resize="true"
-          :persist-columns="true"
-          table-id="pipelines-evaluation-templates"
-          width="100%"
-          class="w-full h-full"
-        >
-          <template #toolbar>
-            <div class="flex items-center gap-2 w-full">
-              <OSearchInput
-                data-test="eval-template-list-search-input"
-                v-model="filterQuery"
-                class="flex-1"
-                :placeholder="t('evalTemplate.search')"
-              />
-            </div>
-          </template>
-          <template #toolbar-trailing>
-            <OButton
-              variant="outline"
-              size="icon-sm"
-              icon-left="refresh"
-              :loading="isLoading"
-              data-test="eval-template-list-refresh-btn"
-              @click="loadTemplates"
-            >
-              <OTooltip side="bottom" :content="t('common.refresh')" shortcut-id="evalTemplatesRefresh" />
-            </OButton>
-          </template>
-          <!-- Version column -->
-          <template #cell-version="{ row }">
-            <OTag type="fieldTag" value="soft">v{{ row.version }}</OTag>
-          </template>
-
-          <!-- Actions column -->
-          <template #cell-actions="{ row }">
-            <div class="flex items-center justify-center actions-container">
-              <OButton
-                :data-test="`eval-template-list-${row.name}-edit-btn`"
-                data-row-action="edit"
-                icon-left="edit"
-                variant="ghost"
-                size="icon-sm"
-                :title="t('common.edit')"
-                @click="goToEdit(row)"
-              />
-              <OButton
-                :data-test="`eval-template-list-${row.name}-delete-btn`"
-                data-row-action="delete"
-                icon-left="delete"
-                variant="ghost-destructive"
-                size="icon-sm"
-                :title="t('common.delete')"
-                @click="confirmDelete(row)"
-              />
-            </div>
-          </template>
-
-          <!-- Empty state -->
-          <template #empty>
-            <OEmptyState
-              size="hero"
-              preset="no-eval-templates"
-              :filtered="!!filterQuery"
-              @action="
-                (id) => (id === 'clear-filters' ? (filterQuery = '') : goToCreate())
-              "
-            />
-          </template>
-
-          <!-- Pagination footer -->
-          <template #bottom="bottomProps">
-            <div
-              class="flex items-center justify-between w-full py-2"
-            >
-              <div
-                class="flex items-center o2-table-footer-title mr-4"
-              >
-                {{ bottomProps.totalRows }} {{ t("evalTemplate.header") }}
-              </div>
-              <OButton
-                v-if="selectedIds.length > 0"
-                data-test="eval-template-list-bulk-delete-btn"
-                icon-left="delete"
-                variant="outline-destructive"
-                size="sm"
-                @click="openBulkDeleteDialog"
-              >
-                {{ t("common.delete") }}
-              </OButton>
-            </div>
-          </template>
-        </OTable>
-      </div>
-    </div>
-
-    <!-- Single delete confirm dialog -->
-    <ConfirmDialog
-      v-model="deleteDialog.show"
-      :title="deleteDialog.title"
-      :message="deleteDialog.message"
-      @update:ok="deleteTemplate"
-      @update:cancel="deleteDialog.show = false"
-    />
-
-    <!-- Bulk delete confirm dialog -->
-    <ConfirmDialog
-      v-model="bulkDeleteDialog.show"
-      :title="bulkDeleteDialog.title"
-      :message="bulkDeleteDialog.message"
-      @update:ok="bulkDeleteTemplates"
-      @update:cancel="bulkDeleteDialog.show = false"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, onBeforeMount, computed } from "vue";
-import { useI18n } from "vue-i18n";
-import { useStore } from "vuex";
-import { useRouter } from "vue-router";
-import OTable from "@/lib/core/Table/OTable.vue";
-import type { OTableColumnDef } from "@/lib/core/Table/OTable.types";
-import { COL } from "@/lib/core/Table/OTable.types";
-import OEmptyState from "@/lib/core/EmptyState/OEmptyState.vue";
-import OTag from "@/lib/core/Badge/OTag.vue";
-import ConfirmDialog from "@/components/ConfirmDialog.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
-import { evalTemplateService } from "@/services/eval-template.service";
-import OButton from '@/lib/core/Button/OButton.vue';
-import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
-import OSearchInput from '@/lib/forms/SearchInput/OSearchInput.vue';
-import PipelineSectionTabs from "@/components/pipeline/PipelineSectionTabs.vue";
-import { toast } from "@/lib/feedback/Toast/useToast";
-import { useShortcuts } from "@/lib/vue-shortcut-manager";
-import { isInputFocused } from "@/utils/keyboardShortcuts";
-
-interface Template {
-  id: string;
-  org_id: string;
-  response_type: string;
-  name: string;
-  description?: string;
-  content: string;
-  dimensions: string[];
-  version: number;
-  created_at: number;
-  updated_at: number;
-}
-
-const { t } = useI18n();
-const store = useStore();
-const router = useRouter();
-// ── State ──────────────────────────────────────────────────────────────────────
-const rows = ref<Template[]>([]);
-const filterQuery = ref("");
-const isLoading = ref(true);
-const selectedIds = ref<string[]>([]);
-const selectedItems = computed(() =>
-  rows.value.filter((r: Template) => selectedIds.value.includes(r.id))
-);
-// ── Columns ────────────────────────────────────────────────────────────────────
-const columns = ref<OTableColumnDef<Template>[]>([
-  { id: "#", header: "#", accessorKey: "#", sortable: false, size: 67, meta: { align: "left" } },
-  {
-    id: "name",
-    header: t("common.name"),
-    accessorKey: "name",
-    sortable: true,
-    resizable: true,
-    hideable: true,
-    size: COL.name,
-    minSize: 160,
-    meta: { align: "left", flex: true },
-  },
-  {
-    id: "response_type",
-    header: t("evalTemplate.responseType"),
-    accessorKey: "response_type",
-    sortable: true,
-    resizable: true,
-    hideable: true,
-    size: COL.type,
-    meta: { align: "left" },
-  },
-  {
-    id: "version",
-    header: t("common.version"),
-    accessorKey: "version",
-    sortable: true,
-    resizable: true,
-    hideable: true,
-    size: COL.version,
-    meta: { align: "right" },
-  },
-  {
-    id: "updated_at",
-    header: t("common.updated_at"),
-    accessorKey: "updated_at",
-    sortable: true,
-    resizable: true,
-    hideable: true,
-    size: COL.updatedAt,
-    meta: {
-      align: "left",
-      format: (val: number) =>
-        val
-          ? new Date(val).toLocaleDateString("en-US", {
-              year: "numeric",
-              month: "short",
-              day: "numeric",
-              hour: "2-digit",
-              minute: "2-digit",
-            })
-          : t("evalTemplate.never"),
-    },
-  },
-  {
-    id: "actions",
-    header: t("common.actions"),
-    sortable: false,
-    isAction: true,
-    size: 80,
-    meta: { align: "center", cellClass: "actions-column", actionCount: 2 },
-  },
-]);
-
-// ── Delete dialogs ─────────────────────────────────────────────────────────────
-const deleteDialog = ref({
-  show: false,
-  title: "",
-  message: "",
-  data: null as Template | null,
-});
-
-const bulkDeleteDialog = ref({
-  show: false,
-  title: "",
-  message: "",
-});
-// ── Data loading ───────────────────────────────────────────────────────────────
-const loadTemplates = async () => {
-  isLoading.value = true;
-  try {
-    const orgId = store.state.selectedOrganization.identifier;
-    const data = await evalTemplateService.listTemplates(orgId);
-    rows.value = (data ?? []).map((item: Template, i: number) => ({
-      "#": i + 1,
-      ...item,
-    }));
-  } catch (err: any) {
-    if (err?.response?.status !== 403) {
-      toast({
-        variant: "error",
-        message: err?.response?.data?.message || t("evalTemplate.loadFailed"),
-      });
-    }
-  } finally {
-    isLoading.value = false;
-  }
-};
-
-// ── Navigation ─────────────────────────────────────────────────────────────────
-const goToCreate = () => {
-  router.push({ name: "evalTemplatesAdd" });
-};
-
-const goToEdit = (template: Template) => {
-  router.push({ name: "evalTemplatesEdit", params: { id: template.id } });
-};
-
-// ── Delete ─────────────────────────────────────────────────────────────────────
-const confirmDelete = (template: Template) => {
-  deleteDialog.value.show = true;
-  deleteDialog.value.title = t("evalTemplate.deleteTemplate");
-  deleteDialog.value.message = t("evalTemplate.deleteConfirmation", {
-    name: template.name,
-  });
-  deleteDialog.value.data = template;
-};
-
-const deleteTemplate = async () => {
-  const template = deleteDialog.value.data;
-  if (!template) return;
-
-  const dismiss = toast({ variant: "loading", message: t("common.loading"), timeout: 0 });
-
-  try {
-    const orgId = store.state.selectedOrganization.identifier;
-    await evalTemplateService.deleteTemplate(orgId, template.id);
-    toast({
-      variant: "success",
-      message: t("evalTemplate.deleteSuccess"),
-    });
-    await loadTemplates();
-  } catch (err: any) {
-    if (err?.response?.status !== 403) {
-      toast({
-        variant: "error",
-        message:
-          err?.response?.data?.message ||
-          err?.message ||
-          t("evalTemplate.deleteFailed"),
-      });
-    }
-  } finally {
-    dismiss();
-    deleteDialog.value.show = false;
-    deleteDialog.value.data = null;
-  }
-};
-
-const openBulkDeleteDialog = () => {
-  bulkDeleteDialog.value.show = true;
-  bulkDeleteDialog.value.title = t("evalTemplate.deleteTemplate");
-  bulkDeleteDialog.value.message = t("evalTemplate.bulkDeleteConfirmation", {
-    count: selectedItems.value.length,
-  });
-};
-
-const bulkDeleteTemplates = async () => {
-  const dismiss = toast({ variant: "loading", message: t("common.loading"), timeout: 0 });
-
-  try {
-    const orgId = store.state.selectedOrganization.identifier;
-    await Promise.all(
-      selectedItems.value.map((item) =>
-        evalTemplateService.deleteTemplate(orgId, item.id),
-      ),
-    );
-    toast({ variant: "success", message: t("evalTemplate.deleteSuccess") });
-    selectedItems.value = [];
-    await loadTemplates();
-  } catch (err: any) {
-    if (err?.response?.status !== 403) {
-      toast({
-        variant: "error",
-        message: err?.response?.data?.message || t("evalTemplate.deleteFailed"),
-      });
-    }
-  } finally {
-    dismiss();
-    bulkDeleteDialog.value.show = false;
-  }
-};
-
-// ── Lifecycle ──────────────────────────────────────────────────────────────────
-onBeforeMount(async () => {
-  await loadTemplates();
-});
-
-useShortcuts([
-  { id: "evalTemplatesRefresh", handler: () => { if (!isInputFocused()) loadTemplates(); } },
-]);
-</script>
-
diff --git a/web/src/enterprise/components/OnlineEvals.vue b/web/src/enterprise/components/OnlineEvals.vue
index 2204316b25..7e0bc2711c 100644
--- a/web/src/enterprise/components/OnlineEvals.vue
+++ b/web/src/enterprise/components/OnlineEvals.vue
@@ -7,7 +7,7 @@ the Free Software Foundation, either version 3 of the License, or
 
 <template>
   <div
-    class="flex flex-col gap-2.5 h-[calc(100vh-var(--navbar-height))] min-h-0 pt-1 px-2.5 pb-2.5 text-(--o2-text)"
+    class="flex flex-col gap-2.5 h-[calc(100vh-var(--navbar-height))] min-h-0 pt-1 px-2.5 pb-2.5 text-text-body"
     :class="{ 'h-full! p-0! gap-0!': hideTabBar }"
     data-test="online-evals-page"
   >
@@ -54,18 +54,18 @@ the Free Software Foundation, either version 3 of the License, or
     />
 
     <template v-else>
-      <div v-if="!hideTabBar" class="online-evals__header card-container flex items-center justify-between gap-4 min-h-17 py-2.5 px-4 shrink-0 bg-(--o2-card-bg)">
+      <div v-if="!hideTabBar" class="online-evals__header flex items-center justify-between gap-4 min-h-17 py-2.5 px-4 shrink-0 bg-card-glass-bg">
         <div>
-          <h1 class="m-0 text-[var(--text-lg)] font-semibold text-[var(--color-text-heading)] [letter-spacing:0]">{{ t("onlineEvals.title") }}</h1>
+          <h1 class="m-0 text-[var(--text-lg)] font-semibold text-text-heading [letter-spacing:0]">{{ t("onlineEvals.title") }}</h1>
         </div>
       </div>
 
-      <AppPageHeader
+      <OPageHeader
         v-if="hideTabBar && embeddedHeader"
         :title="embeddedHeader.title"
         :subtitle="embeddedHeader.subtitle"
         :icon="embeddedHeader.icon"
-        class="shrink-0 px-4 border-b border-border-default"
+        class="shrink-0 border-b border-border-default"
       >
         <template
           v-if="activeTab === 'scorers' || activeTab === 'scoreConfigs'"
@@ -155,7 +155,7 @@ the Free Software Foundation, either version 3 of the License, or
           <!-- Bordered wrapper matches the Sessions / LLM Insights headers —
                ORefreshButton renders no border of its own. -->
           <div
-            class="inline-flex items-center border border-border-default rounded-md px-1 h-[2rem] overflow-hidden"
+            class="inline-flex items-center border border-border-default rounded-default px-1 h-8 overflow-hidden"
           >
             <ORefreshButton
               :last-run-at="qualityLastRunAt"
@@ -166,15 +166,15 @@ the Free Software Foundation, either version 3 of the License, or
             />
           </div>
         </template>
-      </AppPageHeader>
+      </OPageHeader>
 
-      <section class="online-evals__content card-container flex flex-1 flex-col min-h-0 overflow-hidden bg-(--o2-card-bg)">
-        <div v-if="!hideTabBar" class="online-evals__tabs flex items-center gap-2 shrink-0 py-0 px-3.5 bg-transparent border-b border-(--o2-border)">
+      <section class="online-evals__content flex flex-1 flex-col min-h-0 overflow-hidden bg-card-glass-bg">
+        <div v-if="!hideTabBar" class="online-evals__tabs flex items-center gap-2 shrink-0 py-0 px-3.5 bg-transparent border-b border-border-default">
           <button
             v-for="tab in tabs"
             :key="tab.value"
-            class="online-evals__tab inline-flex items-center gap-1.75 h-9.5 py-0 px-3.5 bg-transparent border-0 border-b-2 border-b-transparent text-(--o2-text-muted) cursor-pointer font-semibold text-[13px]"
-            :class="activeTab === tab.value ? 'is-active text-[var(--o2-text)] border-b-[var(--o2-brand)] -mb-px' : ''"
+            class="online-evals__tab inline-flex items-center gap-1.75 h-9.5 py-0 px-3.5 bg-transparent border-0 border-b-2 border-b-transparent text-text-muted cursor-pointer font-semibold text-compact"
+            :class="activeTab === tab.value ? 'is-active text-text-body border-b-accent -mb-px' : ''"
             type="button"
             @click="activeTab = tab.value"
           >
@@ -270,6 +270,7 @@ the Free Software Foundation, either version 3 of the License, or
       />
 
       <ODrawer
+        bleed
         v-model:open="showScoreConfigLibrary"
         side="right"
         size="lg"
@@ -293,6 +294,7 @@ the Free Software Foundation, either version 3 of the License, or
       </ODrawer>
 
       <ODrawer
+        bleed
         v-model:open="showScorerLibrary"
         side="right"
         size="lg"
@@ -401,7 +403,7 @@ import ScoreConfigLibrary from "./onlineEvals/ScoreConfigLibrary.vue";
 import ScorerLibrary from "./onlineEvals/ScorerLibrary.vue";
 import ImportScoreConfig from "./onlineEvals/ImportScoreConfig.vue";
 import ImportScorer from "./onlineEvals/ImportScorer.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageHeader from "@/lib/core/PageHeader/OPageHeader.vue";
 import type { IconName } from "@/lib/core/Icon/OIcon.icons";
 import OButton from "@/lib/core/Button/OButton.vue";
 import ORefreshButton from "@/lib/core/RefreshButton/ORefreshButton.vue";
@@ -566,7 +568,7 @@ const embeddedHeader = computed<{ title: string; subtitle: string; icon: IconNam
   },
 );
 
-// Per-tab "create" button label for the embedded AppPageHeader. Quality has
+// Per-tab "create" button label for the embedded OPageHeader. Quality has
 // no list-style create, so it returns an empty string and the button is
 // suppressed via v-if.
 const addButtonLabel = computed<string>(() => {
@@ -589,10 +591,10 @@ const importI18nKey = computed<"scorer" | "scoreConfig">(() =>
 );
 
 // ── Quality tab: date picker + refresh state ─────────────────────────────
-// Lifted out of QualityPage so the picker + refresh button live in the
-// embedded AppPageHeader's #actions slot (matching LLM Insights / Sessions).
-// QualityPage consumes `qualityDateWindow` as a prop and exposes
-// `refreshAll` + `isAnyLoading` for the Refresh button below.
+// The picker + refresh button live in the embedded OPageHeader's #actions
+// slot (matching LLM Insights / Sessions). QualityPage consumes
+// `qualityDateWindow` as a prop and exposes `refreshAll` + `isAnyLoading` for
+// the Refresh button below.
 //
 // Date state is the shared `useAiDateRange()` ref — the same singleton
 // driving LLM Insights and Sessions — so picking a window on one page
@@ -601,11 +603,8 @@ const { state: qualitySelectedDate } = useAiDateRange();
 
 // Seed the window from the *persisted* AI date range (relative or absolute),
 // resolved synchronously, so QualityPage's initial onMounted refresh queries
-// the correct window from the very first paint. Previously this was a hardcoded
-// 15-minute placeholder, so the first KPI query ran against 15m (e.g. "2
-// evaluated") and then the picker-mount sync re-queried the real range (e.g.
-// "36"), causing a visible flash. Fall back to the 15m default only if the
-// persisted state can't be resolved.
+// the correct window from the very first paint. Fall back to the 15m default
+// only if the persisted state can't be resolved.
 const initialQualityWindow = resolveAiDateWindow(qualitySelectedDate.value);
 const qualityDateWindow = ref<DateWindow>(
   initialQualityWindow
@@ -1296,15 +1295,3 @@ async function performBulkJobsDelete() {
   }
 }
 </script>
-
-<!-- Non-scoped @media-only rule: responsive override for the form side rail
-     (.eval-form-page__side is used by ScorerTestPanel). Kept as a plain style
-     block per the "don't convert @media to " rule. -->
-<style>
-@media (max-width: 960px) {
-  .eval-form-page__side {
-    border-left: 0;
-    border-top: 1px solid var(--o2-border);
-  }
-}
-</style>
diff --git a/web/src/enterprise/components/billings/Billing.spec.ts b/web/src/enterprise/components/billings/Billing.spec.ts
index 31377b2c8f..f39378cf34 100644
--- a/web/src/enterprise/components/billings/Billing.spec.ts
+++ b/web/src/enterprise/components/billings/Billing.spec.ts
@@ -91,14 +91,7 @@ describe("Billing Component", () => {
           store,
         },
         stubs: {
-                    'q-separator': true,
-          'q-splitter': {
-            template: '<div><slot name="before"></slot><slot name="after"></slot></div>'
-          },
-          'q-tabs': true,
-          'q-route-tab': true,
           'router-view': true,
-          'q-select': true,
           'OIcon': true,
           'ConfirmDialog': true,
           'Usage': true,
@@ -196,14 +189,7 @@ describe("Billing Component", () => {
           plugins: [i18n],
           provide: { store },
           stubs: {
-                        'q-separator': true,
-            'q-splitter': {
-              template: '<div><slot name="before"></slot><slot name="after"></slot></div>'
-            },
-            'q-tabs': true,
-            'q-route-tab': true,
             'router-view': true,
-            'q-select': true,
             'OIcon': true,
             'ConfirmDialog': true,
             'Usage': true,
@@ -238,14 +224,7 @@ describe("Billing Component", () => {
           plugins: [i18n],
           provide: { store },
           stubs: {
-                        'q-separator': true,
-            'q-splitter': {
-              template: '<div><slot name="before"></slot><slot name="after"></slot></div>'
-            },
-            'q-tabs': true,
-            'q-route-tab': true,
             'router-view': true,
-            'q-select': true,
             'OIcon': true,
             'ConfirmDialog': true,
             'Usage': true,
@@ -307,14 +286,7 @@ describe("Billing Component", () => {
           plugins: [i18n],
           provide: { store },
           stubs: {
-            'q-separator': true,
-            'q-splitter': {
-              template: '<div><slot name="before"></slot><slot name="after"></slot></div>'
-            },
-            'q-tabs': true,
-            'q-route-tab': true,
             'router-view': true,
-            'q-select': true,
             'OIcon': true,
             'ConfirmDialog': true,
             'Usage': true,
@@ -521,14 +493,7 @@ describe("Billing Component", () => {
           plugins: [i18n],
           provide: { store },
           stubs: {
-                        'q-separator': true,
-            'q-splitter': {
-              template: '<div><slot name="before"></slot><slot name="after"></slot></div>'
-            },
-            'q-tabs': true,
-            'q-route-tab': true,
             'router-view': true,
-            'q-select': true,
             'OIcon': true,
             'ConfirmDialog': true,
             'Usage': true,
@@ -555,14 +520,7 @@ describe("Billing Component", () => {
           plugins: [i18n],
           provide: { store },
           stubs: {
-                        'q-separator': true,
-            'q-splitter': {
-              template: '<div><slot name="before"></slot><slot name="after"></slot></div>'
-            },
-            'q-tabs': true,
-            'q-route-tab': true,
             'router-view': true,
-            'q-select': true,
             'OIcon': true,
             'ConfirmDialog': true,
             'Usage': true,
@@ -589,14 +547,7 @@ describe("Billing Component", () => {
           plugins: [i18n],
           provide: { store },
           stubs: {
-                        'q-separator': true,
-            'q-splitter': {
-              template: '<div><slot name="before"></slot><slot name="after"></slot></div>'
-            },
-            'q-tabs': true,
-            'q-route-tab': true,
             'router-view': true,
-            'q-select': true,
             'OIcon': true,
             'ConfirmDialog': true,
             'Usage': true,
diff --git a/web/src/enterprise/components/billings/Billing.vue b/web/src/enterprise/components/billings/Billing.vue
index 491016491c..80d32b55e4 100644
--- a/web/src/enterprise/components/billings/Billing.vue
+++ b/web/src/enterprise/components/billings/Billing.vue
@@ -16,14 +16,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <!-- eslint-disable vue/x-invalid-end-tag -->
 <template>
-  <div class="p-0 pt-1 overflow-hidden h-full flex flex-col">
-    <!-- Standard page header: title + icon. Usage date / data-type controls live
-         in the toolbar row below. -->
-    <AppPageHeader
-      :title="headerBasedOnRoute()"
-      icon="paid"
-      class="shrink-0 px-4 border-b border-border-default"
-    >
+  <OPageLayout
+    :title="headerBasedOnRoute()"
+    icon="paid"
+    bleed
+  >
       <template #actions>
         <div v-if="isOrgGroupRoute" class="flex items-center gap-2">
           <OButton
@@ -37,7 +34,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </OButton>
         </div>
       </template>
-    </AppPageHeader>
     <OSplitter
       v-model="splitterModel"
       unit="px"
@@ -46,7 +42,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       class="flex-1 min-h-0"
     >
       <template v-slot:before>
-        <div class="w-full h-full pl-[0.625rem] pt-2 pb-[0.625rem]">
+        <div class="w-full h-full pl-2.5 pt-2 pb-2.5">
           <div class="overflow-y-auto h-full">
             <OTabs
               v-model="billingtab"
@@ -131,7 +127,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 labelKey="label"
                 valueKey="value"
                 @update:model-value="selectUsageDate"
-                class="p-0 mx-0 h-[40px] mt-1"
+                class="p-0 mx-0 h-10 mt-1"
               >
                 <template v-slot:prepend>
                   <OIcon name="schedule" size="xs" class="mr-2 mt-1" @click.stop.prevent />
@@ -148,15 +144,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               @hide="onRangeChange"
             />
             <div class="flex items-center">
-              <div class="app-tabs-container h-[36px]">
+              <div class="app-tabs-container h-9">
                 <AppTabs class="tabs-selection-container" :tabs="tabs" :activeTab="usageDataType" @update:activeTab="(value: any) => updateActiveTab(value)" />
               </div>
             </div>
           </div>
-          <div class="flex-1 min-h-0 pr-[0.625rem] pb-[0.625rem] flex gap-[0.625rem]">
+          <div class="flex-1 min-h-0 pr-2.5 pb-2.5 flex gap-2.5">
             <div
               v-if="isUsageRoute && billingMembers.length > 0"
-              class="w-[260px] shrink-0 h-full"
+              class="w-65 shrink-0 h-full"
               data-test="usage-member-list"
             >
               <UsageMemberList
@@ -171,7 +167,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
       </template>
     </OSplitter>
-  </div>
+  </OPageLayout>
 </template>
 
 <script lang="ts">
@@ -190,7 +186,7 @@ import Usage from "./usage.vue";
 import { getImageURL } from "@/utils/zincutils";
 import { resolveTab } from "@/utils/routeTabMaps";
 import AppTabs from "@/components/common/AppTabs.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 
 import BillingService from "@/services/billings";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
@@ -202,7 +198,7 @@ import { getConsumableRelativeTime } from "@/utils/date";
 export default defineComponent({
   name: "PageIngestion",
   components: {
-    AppPageHeader, OTabs, ORouteTab, ConfirmDialog, Usage, AppTabs, OSelect,
+    OPageLayout, OTabs, ORouteTab, ConfirmDialog, Usage, AppTabs, OSelect,
     OIcon, OSplitter, OButton, UsageMemberList, DateTimePickerDashboard },
   setup() {
     const { t } = useI18n();
diff --git a/web/src/enterprise/components/billings/BillingGroup.schema.ts b/web/src/enterprise/components/billings/BillingGroup.schema.ts
index cfa5205e39..132a2bb485 100644
--- a/web/src/enterprise/components/billings/BillingGroup.schema.ts
+++ b/web/src/enterprise/components/billings/BillingGroup.schema.ts
@@ -5,9 +5,9 @@
 // org id is read at validation time through a getter (it can change between
 // opens).
 //
-// Encodes the behaviour that was previously a disabled-button gate + a toast:
-//   • inviteOrgId required (was `:primary-button-disabled="!inviteOrgId"`);
-//   • cannot invite your own org (was an imperative `inviteSameOrg` toast).
+// Two rules:
+//   • inviteOrgId required;
+//   • cannot invite your own org.
 
 import { z } from "zod";
 
diff --git a/web/src/enterprise/components/billings/BillingGroup.vue b/web/src/enterprise/components/billings/BillingGroup.vue
index f33e452964..64722367d8 100644
--- a/web/src/enterprise/components/billings/BillingGroup.vue
+++ b/web/src/enterprise/components/billings/BillingGroup.vue
@@ -36,22 +36,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           data-test="org-group-stats"
         >
           <div class="feature-card flex-1">
-            <div class="text-[15px] font-semibold leading-5 opacity-85 whitespace-nowrap">
+            <div class="text-sm font-semibold leading-5 opacity-85 whitespace-nowrap">
               {{ t("billing.billingGroup.statTotal") }}
             </div>
-            <div class="text-[24px] font-semibold leading-[1.2] mt-[6px]">{{ totalCount }}</div>
+            <div class="text-2xl font-semibold leading-[1.2] mt-1.5">{{ totalCount }}</div>
           </div>
           <div class="feature-card flex-1">
-            <div class="text-[15px] font-semibold leading-5 opacity-85 whitespace-nowrap">
+            <div class="text-sm font-semibold leading-5 opacity-85 whitespace-nowrap">
               {{ t("billing.billingGroup.statActive") }}
             </div>
-            <div class="text-[24px] font-semibold leading-[1.2] mt-[6px] text-green-600">{{ activeCount }}</div>
+            <div class="text-2xl font-semibold leading-[1.2] mt-1.5 text-status-positive">{{ activeCount }}</div>
           </div>
           <div class="feature-card flex-1">
-            <div class="text-[15px] font-semibold leading-5 opacity-85 whitespace-nowrap">
+            <div class="text-sm font-semibold leading-5 opacity-85 whitespace-nowrap">
               {{ t("billing.billingGroup.statPending") }}
             </div>
-            <div class="text-[24px] font-semibold leading-[1.2] mt-[6px] text-amber-500">
+            <div class="text-2xl font-semibold leading-[1.2] mt-1.5 text-status-warning-text">
               {{ pendingCount }}
             </div>
           </div>
@@ -116,16 +116,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         class="flex-1 min-h-0 overflow-auto flex flex-col justify-center"
         data-test="org-group-child-view"
       >
-        <div class="flex items-center justify-between gap-[56px] py-[48px] px-[40px] flex-wrap">
+        <div class="flex items-center justify-between gap-14 py-12 px-10 flex-wrap">
           <!-- Left: headline + CTA -->
-          <div class="flex-1 min-w-[280px] max-w-[480px]">
-            <div class="inline-flex items-center gap-[6px] text-[0.72rem] font-semibold tracking-[0.4px] text-(--color-primary-600) bg-[color-mix(in_srgb,var(--color-primary-600)_10%,transparent)] border border-[color-mix(in_srgb,var(--color-primary-600)_25%,transparent)] py-1 px-[10px] rounded-full mb-5">
+          <div class="flex-1 min-w-70 max-w-120">
+            <div class="inline-flex items-center gap-1.5 text-xs font-semibold tracking-[0.4px] text-primary-600 bg-[color-mix(in_srgb,var(--color-primary-600)_10%,transparent)] border border-[color-mix(in_srgb,var(--color-primary-600)_25%,transparent)] py-1 px-2.5 rounded-full mb-5">
               <OIcon name="verified" size="xs" />
               {{ t("billing.billingGroup.statusActive") }}
             </div>
-            <div class="text-[2.4rem] font-bold leading-[1.2] tracking-[-0.6px] mb-4">
+            <div class="text-4xl font-bold leading-[1.2] tracking-[-0.6px] mb-4">
               {{ t("billing.billingGroup.childHeadline") }}
-              <span class="text-(--color-tabs-active-text) cursor-pointer inline-block max-w-full overflow-hidden text-ellipsis whitespace-nowrap align-bottom">
+              <span class="text-tabs-active-text cursor-pointer inline-block max-w-full overflow-hidden text-ellipsis whitespace-nowrap align-bottom">
                 {{ payerName }}
                 <OTooltip side="bottom">
                   <template #content>
@@ -139,12 +139,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </OTooltip>
               </span>
             </div>
-            <div class="text-[0.95rem] leading-[1.7] opacity-70 mb-8 max-w-[420px]">
+            <div class="text-base leading-[1.7] opacity-70 mb-8 max-w-105">
               {{ t("billing.billingGroup.childHeroSub") }}
             </div>
             <OButton
               variant="primary"
-              class="h-[44px] px-6 font-semibold"
+              class="h-11 px-6 font-semibold"
               data-test="org-group-child-view-usage-btn"
               @click="goToUsage"
             >
@@ -156,29 +156,29 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </div>
 
           <!-- Right: membership facts -->
-          <div class="w-[340px] shrink-0 flex flex-col gap-[14px]" data-test="org-group-child-details">
-            <div class="og-feature flex items-start gap-4 p-[18px_20px] rounded-2xl bg-(--tile-bg) border border-(--o2-border-color,rgba(0,0,0,0.08)) transition-all duration-200 hover:shadow-[0_8px_28px_rgba(0,0,0,0.1)] hover:-translate-y-px">
-              <div class="w-10 h-10 rounded-[10px] shrink-0 flex items-center justify-center bg-[color-mix(in_srgb,var(--color-primary-600)_10%,transparent)] text-(--color-primary-600)">
+          <div class="w-85 shrink-0 flex flex-col gap-3.5" data-test="org-group-child-details">
+            <div class="og-feature flex items-start gap-4 py-4.5 px-5 rounded-default bg-surface-base border border-card-glass-border transition-all duration-200 hover:shadow-lg hover:-translate-y-px">
+              <div class="w-10 h-10 rounded-default shrink-0 flex items-center justify-center bg-[color-mix(in_srgb,var(--color-primary-600)_10%,transparent)] text-primary-600">
                 <OIcon name="person-add" />
               </div>
               <div class="flex-1 min-w-0">
-                <div class="text-[0.78rem] font-semibold opacity-60 mb-1">
+                <div class="text-xs font-semibold opacity-60 mb-1">
                   {{ t("billing.billingGroup.invitedBy") }}
                 </div>
-                <div class="text-[0.95rem] font-semibold truncate">
+                <div class="text-base font-semibold truncate">
                   {{ membership?.created_by }}
                 </div>
               </div>
             </div>
-            <div class="og-feature flex items-start gap-4 p-[18px_20px] rounded-2xl bg-(--tile-bg) border border-(--o2-border-color,rgba(0,0,0,0.08)) transition-all duration-200 hover:shadow-[0_8px_28px_rgba(0,0,0,0.1)] hover:-translate-y-px">
-              <div class="w-10 h-10 rounded-[10px] shrink-0 flex items-center justify-center bg-[color-mix(in_srgb,var(--color-primary-600)_10%,transparent)] text-(--color-primary-600)">
+            <div class="og-feature flex items-start gap-4 py-4.5 px-5 rounded-default bg-surface-base border border-card-glass-border transition-all duration-200 hover:shadow-lg hover:-translate-y-px">
+              <div class="w-10 h-10 rounded-default shrink-0 flex items-center justify-center bg-[color-mix(in_srgb,var(--color-primary-600)_10%,transparent)] text-primary-600">
                 <OIcon name="how-to-reg" />
               </div>
               <div class="flex-1 min-w-0">
-                <div class="text-[0.78rem] font-semibold opacity-60 mb-1">
+                <div class="text-xs font-semibold opacity-60 mb-1">
                   {{ t("billing.billingGroup.acceptedBy") }}
                 </div>
-                <div class="text-[0.95rem] font-semibold truncate">
+                <div class="text-base font-semibold truncate">
                   {{
                     membership?.accepted_by ||
                     t("billing.billingGroup.addedOnCreation")
@@ -186,15 +186,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </div>
               </div>
             </div>
-            <div class="og-feature flex items-start gap-4 p-[18px_20px] rounded-2xl bg-(--tile-bg) border border-(--o2-border-color,rgba(0,0,0,0.08)) transition-all duration-200 hover:shadow-[0_8px_28px_rgba(0,0,0,0.1)] hover:-translate-y-px">
-              <div class="w-10 h-10 rounded-[10px] shrink-0 flex items-center justify-center bg-[color-mix(in_srgb,var(--color-primary-600)_10%,transparent)] text-(--color-primary-600)">
+            <div class="og-feature flex items-start gap-4 py-4.5 px-5 rounded-default bg-surface-base border border-card-glass-border transition-all duration-200 hover:shadow-lg hover:-translate-y-px">
+              <div class="w-10 h-10 rounded-default shrink-0 flex items-center justify-center bg-[color-mix(in_srgb,var(--color-primary-600)_10%,transparent)] text-primary-600">
                 <OIcon name="schedule" />
               </div>
               <div class="flex-1 min-w-0">
-                <div class="text-[0.78rem] font-semibold opacity-60 mb-1">
+                <div class="text-xs font-semibold opacity-60 mb-1">
                   {{ t("billing.billingGroup.memberSince") }}
                 </div>
-                <div class="text-[0.95rem] font-semibold">
+                <div class="text-base font-semibold">
                   {{ formatDate(membership?.created_at) }}
                 </div>
               </div>
@@ -260,23 +260,23 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         data-test="org-group-standalone-view"
       >
         <div
-          class="flex flex-col items-center justify-center text-center min-h-full py-[48px] px-6"
+          class="flex flex-col items-center justify-center text-center min-h-full py-12 px-6"
           data-test="org-group-standalone-invite"
         >
-          <div class="w-[100px] h-[100px] rounded-full border border-dashed border-[color-mix(in_srgb,var(--color-primary-600)_30%,transparent)] flex items-center justify-center mb-[28px]">
-            <div class="w-[68px] h-[68px] rounded-full bg-[color-mix(in_srgb,var(--color-primary-600)_10%,transparent)] border-[1.5px] border-solid border-[color-mix(in_srgb,var(--color-primary-600)_24%,transparent)] flex items-center justify-center">
-              <OIcon name="group-add" size="lg" class="text-(--color-primary-600) opacity-85" />
+          <div class="w-25 h-25 rounded-full border border-dashed border-[color-mix(in_srgb,var(--color-primary-600)_30%,transparent)] flex items-center justify-center mb-7">
+            <div class="w-17 h-17 rounded-full bg-[color-mix(in_srgb,var(--color-primary-600)_10%,transparent)] border-[1.5px] border-solid border-[color-mix(in_srgb,var(--color-primary-600)_24%,transparent)] flex items-center justify-center">
+              <OIcon name="group-add" size="lg" class="text-primary-600 opacity-85" />
             </div>
           </div>
 
-          <div class="text-[1.2rem] font-bold tracking-[-0.2px] mb-[10px]">
+          <div class="text-xl font-bold tracking-[-0.2px] mb-2.5">
             {{
               allowedForBillingGroup
                 ? t("billing.billingGroup.emptyTitle")
                 : t("billing.billingGroup.notEnabledTitle")
             }}
           </div>
-          <div class="text-[0.88rem] leading-[1.65] opacity-65 max-w-[420px] mb-6">
+          <div class="text-sm leading-[1.65] opacity-65 max-w-105 mb-6">
             {{
               allowedForBillingGroup
                 ? t("billing.billingGroup.inviteTabPrompt")
@@ -286,11 +286,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
           <template v-if="allowedForBillingGroup">
             <div class="flex items-center gap-2 flex-wrap justify-center mb-8">
-              <span class="inline-flex items-center gap-[5px] text-xs font-medium opacity-85 bg-[color-mix(in_srgb,currentColor_6%,transparent)] border border-(--o2-border-color,rgba(0,0,0,0.1)) rounded-full py-1 px-3">
+              <span class="inline-flex items-center gap-1.25 text-xs font-medium opacity-85 bg-[color-mix(in_srgb,currentColor_6%,transparent)] border border-card-glass-border rounded-full py-1 px-3">
                 <OIcon name="receipt-long" size="xs" />
                 {{ t("billing.billingGroup.chipConsolidatedBill") }}
               </span>
-              <span class="inline-flex items-center gap-[5px] text-xs font-medium opacity-85 bg-[color-mix(in_srgb,currentColor_6%,transparent)] border border-(--o2-border-color,rgba(0,0,0,0.1)) rounded-full py-1 px-3">
+              <span class="inline-flex items-center gap-1.25 text-xs font-medium opacity-85 bg-[color-mix(in_srgb,currentColor_6%,transparent)] border border-card-glass-border rounded-full py-1 px-3">
                 <OIcon name="groups" size="xs" />
                 {{ t("billing.billingGroup.chipLinkOrgs") }}
               </span>
@@ -298,7 +298,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
             <OButton
               variant="primary"
-              class="h-[40px] px-6 font-semibold"
+              class="h-10 px-6 font-semibold"
               data-test="org-group-standalone-invite-btn-empty"
               @click="showInviteDialog = true"
             >
diff --git a/web/src/enterprise/components/billings/LicensePeriod.vue b/web/src/enterprise/components/billings/LicensePeriod.vue
index 098234a219..e04a1b052c 100644
--- a/web/src/enterprise/components/billings/LicensePeriod.vue
+++ b/web/src/enterprise/components/billings/LicensePeriod.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-if="showLicenseExpiryWarning && config.isEnterprise == 'true' && config.isCloud === 'false'" data-test="license-period-container" class="w-full p-3 border border-[#D7D7D7] rounded-md [background:linear-gradient(to_right,transparent_60%,#f7f7ff_70%,#cdf7e4_100%)] dark:[background:linear-gradient(to_right,transparent_60%,#24262F_70%,#2C3934_100%)] dark:border-[#454F5B]">
+    <div v-if="showLicenseExpiryWarning && config.isEnterprise == 'true' && config.isCloud === 'false'" data-test="license-period-container" class="w-full p-3 border border-border-default rounded-default [background:var(--color-usage-banner-success-bg)]">
         <div class="flex" >
         <div class="flex flex-col">
         <span data-test="license-period-message" class="text-lg font-semibold leading-8">{{ getLicenseExpiryMessage() }}</span>
diff --git a/web/src/enterprise/components/billings/TrialPeriod.spec.ts b/web/src/enterprise/components/billings/TrialPeriod.spec.ts
index 8237436697..840e8bb1ef 100644
--- a/web/src/enterprise/components/billings/TrialPeriod.spec.ts
+++ b/web/src/enterprise/components/billings/TrialPeriod.spec.ts
@@ -553,7 +553,7 @@ describe("TrialPeriod.vue", () => {
       const container = wrapper.find('[data-test="trial-period-container"]');
       expect(container.exists()).toBe(true);
       expect(container.classes()).toContain('w-full');
-      expect(container.classes()).toContain('rounded-md');
+      expect(container.classes()).toContain('rounded-default');
     });
 
     it("should display correct subtitle text", () => {
diff --git a/web/src/enterprise/components/billings/TrialPeriod.vue b/web/src/enterprise/components/billings/TrialPeriod.vue
index b396accd23..d622770e1a 100644
--- a/web/src/enterprise/components/billings/TrialPeriod.vue
+++ b/web/src/enterprise/components/billings/TrialPeriod.vue
@@ -18,10 +18,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <div
     v-if="showTrialPeriodMsg"
     data-test="trial-period-container"
-    class="flex items-center gap-3 px-4 py-2 rounded-md w-full bg-(--o2-status-warning-bg) border border-(--o2-status-warning-text) text-(--o2-status-warning-text)"
+    class="flex items-center gap-3 px-4 py-2 rounded-default w-full bg-status-warning-bg border border-status-warning-text text-status-warning-text"
   >
     <!-- Warning icon -->
-    <OIcon name="warning" size="sm" class="shrink-0 text-(--o2-status-warning-text)" />
+    <OIcon name="warning" size="sm" class="shrink-0 text-status-warning-text" />
 
     <!-- Message + subtitle on one line -->
     <p class="flex-1 min-w-0 m-0 text-sm truncate">
diff --git a/web/src/enterprise/components/billings/UsageMemberList.vue b/web/src/enterprise/components/billings/UsageMemberList.vue
index 453f81470d..d827f5a663 100644
--- a/web/src/enterprise/components/billings/UsageMemberList.vue
+++ b/web/src/enterprise/components/billings/UsageMemberList.vue
@@ -15,14 +15,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="card-container h-full flex flex-col pb-[0.3rem]">
+  <div class="bg-card-glass-bg h-full flex flex-col pb-[0.3rem]">
     <!-- Current org section (if super org, not a member) -->
     <div v-if="currentOrgToShow" class="mb-3">
-      <div class="rounded-[0.625rem] bg-(--o2-card-bg) dark:bg-[var(--o2-card-background)]">
+      <div class="rounded-default bg-card-glass-bg dark:bg-surface-base">
         <div class="font-semibold px-2 py-2">
           {{ t("billing.billingGroup.currentOrgTitle") }}
         </div>
-        <OSeparator class="mb-1 mt-[3px]" />
+        <OSeparator class="mb-1 mt-0.75" />
 
         <OTabs
           orientation="vertical"
@@ -36,7 +36,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </div>
               <div
                 v-if="currentOrgToShow.secondary"
-                class="member-id text-[0.72rem] opacity-60 truncate max-w-full normal-case"
+                class="member-id text-xs opacity-60 truncate max-w-full normal-case"
                 :title="currentOrgToShow.secondary"
               >
                 {{ currentOrgToShow.secondary }}
@@ -49,11 +49,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     <!-- Member organizations section -->
     <div class="flex-1 flex flex-col min-h-0">
-      <div class="rounded-[0.625rem] bg-(--o2-card-bg) dark:bg-[var(--o2-card-background)]">
+      <div class="rounded-default bg-card-glass-bg dark:bg-surface-base">
         <div class="font-semibold px-2 py-2">
           {{ t("billing.billingGroup.memberOrgsTitle") }}
         </div>
-        <OSeparator class="mb-1 mt-[3px]" />
+        <OSeparator class="mb-1 mt-0.75" />
 
         <div class="flex items-center py-1 w-full">
           <OInput
@@ -69,7 +69,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
       </div>
 
-      <div class="members-tabs flex-1 overflow-y-auto">
+      <div class="members-tabs flex-1 overflow-y-auto px-1.5">
         <OTabs
           orientation="vertical"
           v-model="activeMember"
@@ -85,7 +85,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <div class="member-name font-semibold truncate max-w-full normal-case" :title="opt.title">
                 {{ opt.primary }}
               </div>
-              <div v-if="opt.secondary" class="member-id text-[0.72rem] opacity-60 truncate max-w-full normal-case" :title="opt.secondary">
+              <div v-if="opt.secondary" class="member-id text-xs opacity-60 truncate max-w-full normal-case" :title="opt.secondary">
                 {{ opt.secondary }}
               </div>
             </div>
@@ -195,24 +195,29 @@ export default defineComponent({
 });
 </script>
 
-<style>
-.card-container .o-tabs--vertical {
-  margin: 5px;
+<style scoped>
+/* keep(lib-override:o2-tabs): OTabs/OTab internals (.o-tabs--vertical, .o-tab,
+   .o-tabs) are child-component DOM this component can only reach through :deep();
+   the active-tab → .member-id opacity is a descendant state chain. */
+.members-tabs :deep(.o-tabs--vertical) {
+  margin: 0.3125rem;
 }
 
-.card-container .o-tabs--vertical .o-tab {
+/* Vertical padding only — the horizontal inset comes from OTab's vertical
+   variant (--spacing-page-edge) so this rail aligns with the page header. */
+.members-tabs :deep(.o-tabs--vertical .o-tab) {
   justify-content: flex-start;
-  padding: 0.375rem 1rem 0.375rem 1.25rem;
+  padding-block: 0.375rem;
   border-radius: 0.5rem;
   min-height: 1.5rem;
   text-transform: none;
 }
 
-.card-container .o-tabs--vertical .o-tab[data-state="active"] .member-id {
+.members-tabs :deep(.o-tabs--vertical .o-tab[data-state="active"] .member-id) {
   opacity: 0.85;
 }
 
-.members-tabs .o-tabs {
+.members-tabs :deep(.o-tabs) {
   height: auto !important;
   max-height: none !important;
 }
diff --git a/web/src/enterprise/components/billings/UsageReportBanner.vue b/web/src/enterprise/components/billings/UsageReportBanner.vue
index 9bddcce6ab..132ae439b4 100644
--- a/web/src/enterprise/components/billings/UsageReportBanner.vue
+++ b/web/src/enterprise/components/billings/UsageReportBanner.vue
@@ -1,10 +1,10 @@
 <template>
-    <div v-if="showBanner && config.isEnterprise == 'true' && config.isCloud === 'false'" class="w-full rounded-md p-3" :class="bannerClass">
+    <div v-if="showBanner && config.isEnterprise == 'true' && config.isCloud === 'false'" class="w-full rounded-default p-3" :class="bannerClass">
         <div class="flex">
         <div class="flex flex-col">
-        <span class="text-(--text-lg) font-semibold leading-(--leading-xl) text-(--color-text-heading)">{{ message }}</span>
+        <span class="text-lg font-semibold leading-(--leading-xl) text-text-heading">{{ message }}</span>
         <br />
-        <span class="text-(--text-md) font-normal leading-(--leading-md) text-(--color-text-body)">{{ subtitle }}</span>
+        <span class="text-base font-normal leading-(--leading-md) text-text-body">{{ subtitle }}</span>
         </div>
   </div>
     </div>
@@ -63,8 +63,8 @@ export default defineComponent({
 
     const bannerClass = computed(() => {
       return isSevere.value
-        ? 'border border-[#f87171] [background:linear-gradient(to_right,transparent_60%,#fff5f5_70%,#fecdd3_100%)] dark:border-[#dc2626] dark:[background:linear-gradient(to_right,transparent_60%,#2d1f1f_70%,#3d2020_100%)]'
-        : 'border border-[#f0c674] [background:linear-gradient(to_right,transparent_60%,#fffbf0_70%,#fff3cd_100%)] dark:border-[#a08530] dark:[background:linear-gradient(to_right,transparent_60%,#2d2a1f_70%,#3d3520_100%)]';
+        ? 'border border-usage-banner-error-border [background:var(--color-usage-banner-error-bg)]'
+        : 'border border-usage-banner-warning-border [background:var(--color-usage-banner-warning-bg)]';
     });
 
     return {
diff --git a/web/src/enterprise/components/billings/enterprisePlan.spec.ts b/web/src/enterprise/components/billings/enterprisePlan.spec.ts
index 4f33d0c197..ecda17d35b 100644
--- a/web/src/enterprise/components/billings/enterprisePlan.spec.ts
+++ b/web/src/enterprise/components/billings/enterprisePlan.spec.ts
@@ -55,13 +55,7 @@ describe('enterprisePlan.vue', () => {
           store
         },
         stubs: {
-          'q-card': true,
-          'q-separator': true,
           'OIcon': true,
-          'q-btn': {
-            template: '<button @click="$emit(\'click\')" v-bind="$attrs"><slot/></button>',
-            emits: ['click']
-          }
         }
       }
     });
diff --git a/web/src/enterprise/components/billings/enterprisePlan.vue b/web/src/enterprise/components/billings/enterprisePlan.vue
index ae8ae7b033..a112603ce6 100644
--- a/web/src/enterprise/components/billings/enterprisePlan.vue
+++ b/web/src/enterprise/components/billings/enterprisePlan.vue
@@ -15,13 +15,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <OCard class="flex flex-col shadow-none border border-(--o2-border-color) bg-(--o2-card-bg) rounded-lg w-full h-full dark:bg-(--o2-card-background) dark:border-(--o2-border)">
+  <OCard class="flex flex-col shadow-none border border-card-glass-border bg-card-glass-bg rounded-default w-full h-full dark:bg-surface-base dark:border-border-default">
     <div class="flex items-center justify-between px-3 py-2">
       <div>
-        <h3 class="pt-2 text-base font-semibold leading-6 text-(--o2-text-heading) m-0">
+        <h3 class="pt-2 text-base font-semibold leading-6 text-text-heading m-0">
           {{ t("billing.enterpriseLabel") }}
         </h3>
-        <p class="mt-2 text-sm font-normal leading-[1.125rem] text-(--o2-text-secondary) m-0">
+        <p class="mt-2 text-sm font-normal leading-[1.125rem] text-text-secondary m-0">
           {{ t("billing.enterpriseSubtitle") }}
         </p>
       </div>
@@ -34,18 +34,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     <OSeparator class="my-2" />
 
-    <div class="px-3 pt-2 h-[550px]">
-      <h4 class="text-[0.8125rem] font-semibold leading-[0.983rem] text-(--o2-text-heading) m-0">{{ t("billing.features") }}</h4>
-      <p class="mb-3 mt-1 text-[0.8125rem] font-normal leading-[1.125rem] text-(--o2-text-secondary) m-0">
+    <div class="px-3 pt-2 h-137.5">
+      <h4 class="text-compact font-semibold leading-[0.983rem] text-text-heading m-0">{{ t("billing.features") }}</h4>
+      <p class="mb-3 mt-1 text-compact font-normal leading-[1.125rem] text-text-secondary m-0">
         {{ t("billing.included") }}
       </p>
 
       <div
         v-if="pricingError && !features?.length"
-        class="flex items-center mb-2 text-red-500"
+        class="flex items-center mb-2 text-status-error-text"
       >
         <OIcon name="warning" size="sm" class="mr-2" />
-        <span class="text-[0.938rem] leading-[1.375rem] text-(--o2-text-body)"
+        <span class="text-base leading-[1.375rem] text-text-body"
           >Failed to load pricing details. Please refresh the page.</span
         >
       </div>
@@ -59,21 +59,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             v-if="feature.is_parent"
             name="check-circle"
             size="md"
-            class="mr-2 text-green-500 check-icon"
+            class="mr-2 text-status-positive check-icon"
           />
-          <div class="text-[0.938rem] leading-[1.375rem] text-(--o2-text-body)" :class="{ 'ml-6': !feature.is_parent }">{{ feature.name }}</div>
+          <div class="text-base leading-[1.375rem] text-text-body" :class="{ 'ml-6': !feature.is_parent }">{{ feature.name }}</div>
         </div>
-        <div class="text-[0.938rem] leading-[1.375rem] text-(--o2-text-body) font-bold">{{ feature.price }}</div>
+        <div class="text-base leading-[1.375rem] text-text-body font-bold">{{ feature.price }}</div>
       </div>
     </div>
 
     <OSeparator />
 
-    <p class="px-3 pt-2 text-[0.8125rem] font-normal leading-[1.125rem] text-(--o2-text-secondary) m-0">
+    <p class="px-3 pt-2 text-compact font-normal leading-[1.125rem] text-text-secondary m-0">
       {{ t("billing.enterpriseNote") }}
     </p>
 
-    <div class="flex justify-between p-3 mt-[18px]">
+    <div class="flex justify-between p-3 mt-4.5">
       <OButton variant="primary" size="sm-action" class="w-full" @click="contactSales">
         {{ t("billing.contactLabel") }}
       </OButton>
diff --git a/web/src/enterprise/components/billings/invoiceHistory.vue b/web/src/enterprise/components/billings/invoiceHistory.vue
index 7a00ebb136..1324e1dd32 100644
--- a/web/src/enterprise/components/billings/invoiceHistory.vue
+++ b/web/src/enterprise/components/billings/invoiceHistory.vue
@@ -15,7 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div data-test="invoice-history-container" class="rounded-md flex flex-col h-full">
+  <div data-test="invoice-history-container" class="rounded-default flex flex-col h-full">
     <div class="flex-1 min-h-0">
       <div class="w-full h-full">
         <invoice-table></invoice-table>
diff --git a/web/src/enterprise/components/billings/plans.vue b/web/src/enterprise/components/billings/plans.vue
index 18a0724dd7..4c24e72185 100644
--- a/web/src/enterprise/components/billings/plans.vue
+++ b/web/src/enterprise/components/billings/plans.vue
@@ -15,24 +15,24 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="rounded-md px-4 pt-3" style="min-height: inherit; overflow: auto">
-    <!-- Page title is supplied by the parent Billing.vue AppPageHeader; no local title here. -->
+  <div class="rounded-default px-4 pt-3 overflow-auto" style="min-height: inherit">
+    <!-- Page title is supplied by the parent Billing.vue OPageHeader; no local title here. -->
     <!-- Managed billing empty state for child orgs -->
     <div
       v-if="isChildOrg"
       class="flex flex-col items-center justify-center text-center min-h-[calc(100vh-var(--navbar-height)-200px)] py-12 px-6"
       data-test="plans-managed-billing-panel"
     >
-      <div class="w-[100px] h-[100px] rounded-full border border-dashed border-[color-mix(in_srgb,var(--color-primary-600)_30%,transparent)] flex items-center justify-center mb-7">
-        <div class="w-[68px] h-[68px] rounded-full bg-[color-mix(in_srgb,var(--color-primary-600)_10%,transparent)] border-[1.5px] border-[color-mix(in_srgb,var(--color-primary-600)_24%,transparent)] border-solid flex items-center justify-center">
-          <OIcon name="account-balance" size="lg" class="text-(--color-primary-600) opacity-85" />
+      <div class="w-25 h-25 rounded-full border border-dashed border-[color-mix(in_srgb,var(--color-primary-600)_30%,transparent)] flex items-center justify-center mb-7">
+        <div class="w-17 h-17 rounded-full bg-[color-mix(in_srgb,var(--color-primary-600)_10%,transparent)] border-[1.5px] border-[color-mix(in_srgb,var(--color-primary-600)_24%,transparent)] border-solid flex items-center justify-center">
+          <OIcon name="account-balance" size="lg" class="text-primary-600 opacity-85" />
         </div>
       </div>
 
-      <div class="text-[1.2rem] font-bold tracking-[-0.2px] mb-[10px]">
+      <div class="text-xl font-bold tracking-[-0.2px] mb-2.5">
         {{ t("billing.billingGroup.plansManagedTitle") }}
       </div>
-      <div class="text-[0.88rem] leading-[1.65] opacity-65 max-w-[440px] mb-6">
+      <div class="text-sm leading-[1.65] opacity-65 max-w-110 mb-6">
         {{
           t("billing.billingGroup.plansManagedDescription", {
             name: membership?.payer_org_name,
@@ -42,15 +42,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </div>
 
       <div class="flex items-center gap-2 flex-wrap justify-center mb-8">
-        <span class="inline-flex items-center gap-[5px] text-xs font-medium opacity-85 bg-[color-mix(in_srgb,currentColor_6%,transparent)] border border-(--o2-border-color,rgba(0,0,0,0.1)) rounded-[20px] py-1 px-3">
+        <span class="inline-flex items-center gap-1.25 text-xs font-medium opacity-85 bg-[color-mix(in_srgb,currentColor_6%,transparent)] border border-(--color-card-glass-border,rgba(0,0,0,0.1)) rounded-full py-1 px-3">
           <OIcon name="receipt-long" size="xs" />
           {{ t("billing.billingGroup.chipConsolidatedBill") }}
         </span>
-        <span class="inline-flex items-center gap-[5px] text-xs font-medium opacity-85 bg-[color-mix(in_srgb,currentColor_6%,transparent)] border border-(--o2-border-color,rgba(0,0,0,0.1)) rounded-[20px] py-1 px-3">
+        <span class="inline-flex items-center gap-1.25 text-xs font-medium opacity-85 bg-[color-mix(in_srgb,currentColor_6%,transparent)] border border-(--color-card-glass-border,rgba(0,0,0,0.1)) rounded-full py-1 px-3">
           <OIcon name="lock" size="xs" />
           {{ t("billing.billingGroup.chipPlanManaged") }}
         </span>
-        <span class="inline-flex items-center gap-[5px] text-xs font-medium opacity-85 bg-[color-mix(in_srgb,currentColor_6%,transparent)] border border-(--o2-border-color,rgba(0,0,0,0.1)) rounded-[20px] py-1 px-3">
+        <span class="inline-flex items-center gap-1.25 text-xs font-medium opacity-85 bg-[color-mix(in_srgb,currentColor_6%,transparent)] border border-(--color-card-glass-border,rgba(0,0,0,0.1)) rounded-full py-1 px-3">
           <OIcon name="description" size="xs" />
           {{ t("billing.billingGroup.chipNoInvoices") }}
         </span>
@@ -72,12 +72,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <trial-period class="mb-3" currentPage="billing"></trial-period>
     <!-- AI Credits card -->
     <div v-if="aiUsage" class="grid grid-cols-1 gap-4 w-full mb-4">
-      <div class="bg-(--o2-card-bg) border border-(--o2-border-color) rounded-lg p-4 shadow-none transition-shadow duration-200 hover:shadow-[0_1px_3px_rgba(0,0,0,0.1)] dark:bg-[var(--o2-card-background)] dark:border-[var(--o2-border)]">
-        <div class="min-h-full rounded-lg transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] text-center flex flex-col justify-between">
+      <div class="bg-card-glass-bg border border-card-glass-border rounded-default p-4 shadow-none transition-shadow duration-200 hover:shadow-[0_1px_3px_rgba(0,0,0,0.1)] dark:bg-surface-base dark:border-border-default">
+        <div class="min-h-full rounded-default transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] text-center flex flex-col justify-between">
           <div class="flex flex-col justify-between">
             <div class="flex justify-between items-center">
-              <div class="text-base font-medium leading-5 text-(--o2-text-heading) text-left">{{ t("billing.aiCredits") }}</div>
-              <div style="opacity: 0.8;">
+              <div class="text-base font-medium leading-5 text-text-heading text-left">{{ t("billing.aiCredits") }}</div>
+              <div class="opacity-80">
                 <img :src="aiIcon" />
               </div>
             </div>
@@ -95,13 +95,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :variant="aiUsageRatio >= 1 ? 'danger' : aiUsageRatio >= 0.9 ? 'warning' : 'default'"
             />
           </div>
-          <div class="text-2xl font-semibold leading-7 text-(--o2-text-heading) text-left flex items-end">
+          <div class="text-2xl font-semibold leading-7 text-text-body text-left flex items-end">
             {{ aiUsage.credits_used }} / {{ aiUsage.credits_limit }} credits used
           </div>
-          <div v-if="aiUsage.mode === 'exhausted'" class="text-red-500 mt-2" style="font-size: 13px;">
+          <div v-if="aiUsage.mode === 'exhausted'" class="text-status-error-text mt-2" style="font-size: var(--text-compact);">
             {{ t("billing.aiExhaustedMessage") }}
           </div>
-          <div v-else-if="aiUsage.mode === 'pay_as_you_go'" class="text-info mt-2" style="font-size: 13px;">
+          <div v-else-if="aiUsage.mode === 'pay_as_you_go'" class="text-info mt-2" style="font-size: var(--text-compact);">
             {{ t("billing.aiPaygMessage") }}
           </div>
         </div>
@@ -112,12 +112,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         store.state.selectedOrganization.hasOwnProperty('note') &&
         store.state.selectedOrganization.note
       "
-      class="flex justify-start items-center gap-2 text-red-500 text-xl font-semibold pl-6 pb-4"
+      class="flex justify-start items-center gap-2 text-status-error-text text-xl font-semibold pl-6 pb-4"
     >
       <OIcon name="warning" size="sm" class="pt-2" />
       >{{ store.state.selectedOrganization.note }}
     </div>
-    <div v-if="loading" class="text-xl font-semibold text-weight-medium text-center">
+    <div v-if="loading" class="text-xl font-semibold font-medium text-center">
       <OSpinner size="md" class="mx-auto block text-center mt-3" />
     </div>
     <div v-else class="grid grid-cols-2 gap-3 mt-3">
@@ -148,6 +148,7 @@ import OButton from "@/lib/core/Button/OButton.vue";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import BillingService from "@/services/billings";
 import { useStore } from "vuex";
+import useTheme from "@/composables/useTheme";
 import { useLocalOrganization, convertToTitleCase, getImageURL } from "@/utils/zincutils";
 import config from "@/aws-exports";
 import TrialPeriod from "@/enterprise/components/billings/TrialPeriod.vue";
@@ -372,6 +373,7 @@ export default defineComponent({
   setup() {
     const { t } = useI18n();
     const store = useStore();
+    const { isDark } = useTheme();
     const frmPayment = ref();
     const planType = ref("");
     const isActiveSubscription = ref(false);
@@ -386,7 +388,7 @@ export default defineComponent({
     const subscriptionType = ref("");
     const aiUsage = ref<any>(null);
     const aiIcon = computed(() =>
-      store.state.theme === "dark"
+      isDark.value
         ? getImageURL("images/common/ai_icon_dark.svg")
         : getImageURL("images/common/ai_icon_gradient.svg")
     );
diff --git a/web/src/enterprise/components/billings/proPlan.spec.ts b/web/src/enterprise/components/billings/proPlan.spec.ts
index 9c90e129d1..3564c09a9f 100644
--- a/web/src/enterprise/components/billings/proPlan.spec.ts
+++ b/web/src/enterprise/components/billings/proPlan.spec.ts
@@ -54,14 +54,7 @@ describe("proPlan.vue", () => {
         plugins: [i18n],
         provide: { store },
         stubs: {
-          "q-card": true,
-          "q-separator": true,
           "OIcon": true,
-          "q-btn": {
-            template:
-              '<button @click="$emit(\'click\')" v-bind="$attrs"><slot/></button>',
-            emits: ["click"],
-          },
         },
       },
     });
diff --git a/web/src/enterprise/components/billings/proPlan.vue b/web/src/enterprise/components/billings/proPlan.vue
index 9a361212a7..4ccddb949a 100644
--- a/web/src/enterprise/components/billings/proPlan.vue
+++ b/web/src/enterprise/components/billings/proPlan.vue
@@ -15,11 +15,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <OCard class="flex flex-col shadow-none border border-(--o2-border-color) bg-(--o2-card-bg) rounded-lg w-full h-full dark:bg-[var(--o2-card-background)] dark:border-[var(--o2-border)]">
+  <OCard class="flex flex-col shadow-none border border-card-glass-border bg-card-glass-bg rounded-default w-full h-full dark:bg-surface-base dark:border-border-default">
     <div class="flex items-center justify-between px-3 py-2">
       <div>
-        <h3 class="pt-2 text-base font-semibold leading-6 text-(--o2-text-heading) m-0">{{ t("billing.proPlanLabel") }}</h3>
-        <p class="mt-2 text-sm font-normal leading-4.5 text-(--o2-text-secondary) m-0">
+        <h3 class="pt-2 text-base font-semibold leading-6 text-text-heading m-0">{{ t("billing.proPlanLabel") }}</h3>
+        <p class="mt-2 text-sm font-normal leading-4.5 text-text-secondary m-0">
           {{ t("billing.proPlanSubtitle") }}
         </p>
       </div>
@@ -34,17 +34,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <OSeparator class="my-2" />
 
     <div class="px-3 py-2">
-      <h4 class="text-[0.8125rem] font-semibold leading-[0.983rem] text-(--o2-text-heading) m-0">{{ t("billing.features") }}</h4>
-      <p class="mb-3 mt-1 text-[0.8125rem] font-normal leading-4.5 text-(--o2-text-secondary) m-0">
+      <h4 class="text-compact font-semibold leading-[0.983rem] text-text-heading m-0">{{ t("billing.features") }}</h4>
+      <p class="mb-3 mt-1 text-compact font-normal leading-4.5 text-text-secondary m-0">
         {{ t("billing.included") }}
       </p>
 
       <div
         v-if="pricingError && !features?.length"
-        class="flex items-center mb-2 text-red-500"
+        class="flex items-center mb-2 text-status-error-text"
       >
         <OIcon name="warning" size="sm" class="mr-2" />
-        <span class="text-[0.938rem] leading-5.5 text-(--o2-text-body)"
+        <span class="text-base leading-5.5 text-text-body"
           >Failed to load pricing details. Please refresh the page.</span
         >
       </div>
@@ -58,27 +58,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             v-if="feature.is_parent"
             name="check-circle"
             size="md"
-            class="mr-2 text-green-500 check-icon"
+            class="mr-2 text-status-positive check-icon"
           />
-          <div class="text-[0.938rem] leading-5.5 text-(--o2-text-body)" :class="{ 'ml-6': !feature.is_parent }">{{ feature.name }}</div>
+          <div class="text-base leading-5.5 text-text-body" :class="{ 'ml-6': !feature.is_parent }">{{ feature.name }}</div>
         </div>
         <div
           v-if="feature.price !== ''"
-          class="mx-2"
-          style="
-            flex: 1;
-            border-top: 1px dotted #454f5b;
-            height: 0;
-            opacity: 0.4;
-          "
+          class="mx-2 flex-1 h-0 opacity-40 border-t border-dotted border-border-default"
         ></div>
-        <div class="text-[0.938rem] leading-5.5 text-(--o2-text-body) font-bold">{{ feature.price }}</div>
+        <div class="text-base leading-5.5 text-text-body font-bold">{{ feature.price }}</div>
       </div>
     </div>
 
     <OSeparator />
 
-    <p class="px-3 pt-2 text-[0.8125rem] font-normal leading-4.5 text-(--o2-text-secondary) m-0">
+    <p class="px-3 pt-2 text-compact font-normal leading-4.5 text-text-secondary m-0">
       {{ t("billing.unlimitedNote") }}<br />
       {{ t("billing.paymentNote") }}
     </p>
@@ -95,7 +89,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <OIcon name="check-circle" size="xs" />
           </template>
         </OTag>
-        <div class="text-xs text-gray-400 mt-2">
+        <div class="text-xs text-text-secondary mt-2">
           Billing is handled through your AWS account
         </div>
       </div>
@@ -112,7 +106,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <OIcon name="check-circle" size="xs" />
           </template>
         </OTag>
-        <div class="text-xs text-gray-400 mt-2">
+        <div class="text-xs text-text-secondary mt-2">
           Billing is handled through your Azure account
         </div>
       </div>
@@ -130,7 +124,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <OIcon name="description" size="xs" />
           </template>
         </OTag>
-        <div class="text-xs text-gray-400 mt-2">
+        <div class="text-xs text-text-secondary mt-2">
           Billing is handled through your contract — contact your account
           manager for changes
         </div>
diff --git a/web/src/enterprise/components/billings/usage.spec.ts b/web/src/enterprise/components/billings/usage.spec.ts
index bdce6a200c..edf1c3a678 100644
--- a/web/src/enterprise/components/billings/usage.spec.ts
+++ b/web/src/enterprise/components/billings/usage.spec.ts
@@ -663,10 +663,11 @@ describe("Usage Component", () => {
 
   // Test 46: Component container styling
   it("should have correct container styling", () => {
-    const container = wrapper.find('[style="height: calc(100vh - 130px); width: 100%;"]');
+    const container = wrapper.find('[style="height: calc(100vh - 130px);"]');
     expect(container.exists()).toBe(true);
     expect(container.attributes('style')).toContain('height: calc(100vh - 130px)');
-    expect(container.attributes('style')).toContain('width: 100%');
+    // width is now applied via the w-full utility class rather than inline style
+    expect(container.classes()).toContain('w-full');
   });
 
 
diff --git a/web/src/enterprise/components/billings/usage.vue b/web/src/enterprise/components/billings/usage.vue
index 237e0da174..e7384c31e0 100644
--- a/web/src/enterprise/components/billings/usage.vue
+++ b/web/src/enterprise/components/billings/usage.vue
@@ -15,13 +15,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-    <div class="p-3 " style="height: calc(100vh - 130px); width: 100%;" >
+    <div class="p-3 w-full" style="height: calc(100vh - 130px);" >
       <!-- Billing usage tiles (always shown). When self-usage reporting is
            enabled, the calendar in the toolbar drives the range and a daily
            chart is appended below. -->
       <div>
         <div v-if="Object.keys(usageData).length === 0" >
-          <div class="text-xl font-semibold text-weight-medium text-center">
+          <div class="text-xl font-semibold font-medium text-center">
             {{ t("billing.messageDataNotFound") }}
           </div>
         </div>
@@ -31,59 +31,59 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <!-- tab-info-section -->
       <!-- this will be unlocked when we get the actionscripts , rum sessions , error tracking from BE -->
         <div v-if="false" class="grid grid-cols-3 gap-4 w-full">
-            <div class="bg-(--o2-card-bg) border border-(--o2-border-color) rounded-lg p-4 min-h-32 flex flex-col justify-between transition-shadow duration-200 ease-in-out hover:shadow-sm">
-              <div class="flex flex-col justify-between rounded-[0.325rem] h-full gap-4 ">
+            <div class="bg-card-glass-bg border border-card-glass-border rounded-default p-4 min-h-32 flex flex-col justify-between transition-shadow duration-200 ease-in-out">
+              <div class="flex flex-col justify-between rounded-default h-full gap-4 ">
               <!-- Top Section (60%) -->
               <div class="flex flex-col justify-between">
                 <!-- Title row -->
                 <div class="flex justify-between items-center">
-                  <div class="text-(length:--text-sm) font-semibold leading-(--leading-base) tracking-normal text-(--color-text-heading) text-left"> Action Scripts</div>
-                  <div style="opacity: 0.8;">
+                  <div class="text-(length:--text-sm) font-semibold leading-(--leading-base) tracking-normal text-text-heading text-left"> Action Scripts</div>
+                  <div class="opacity-80">
                     <img :src="actionScriptIcon" />
                   </div>
                 </div>
               </div>
 
             <!-- Bottom Section (40%) -->
-            <div class="text-(length:--text-2xl) font-semibold leading-(--leading-xl) tracking-normal text-(--color-text-heading) text-left flex items-end ">
+            <div class="text-(length:--text-2xl) font-semibold leading-(--leading-xl) tracking-normal text-text-body text-left flex items-end ">
               2
             </div>
             </div>
             </div>
-            <div class="bg-(--o2-card-bg) border border-(--o2-border-color) rounded-lg p-4 min-h-32 flex flex-col justify-between transition-shadow duration-200 ease-in-out hover:shadow-sm">
-              <div class="flex flex-col justify-between rounded-[0.325rem] h-full gap-4 ">
+            <div class="bg-card-glass-bg border border-card-glass-border rounded-default p-4 min-h-32 flex flex-col justify-between transition-shadow duration-200 ease-in-out">
+              <div class="flex flex-col justify-between rounded-default h-full gap-4 ">
               <!-- Top Section (60%) -->
               <div class="flex flex-col justify-between">
                 <!-- Title row -->
                 <div class="flex justify-between items-center">
-                  <div class="text-(length:--text-sm) font-semibold leading-(--leading-base) tracking-normal text-(--color-text-heading) text-left">Error Tracking</div>
-                  <div style="opacity: 0.8;">
+                  <div class="text-(length:--text-sm) font-semibold leading-(--leading-base) tracking-normal text-text-heading text-left">Error Tracking</div>
+                  <div class="opacity-80">
                     <img :src="errorTrackingIcon" />
                   </div>
                 </div>
               </div>
 
             <!-- Bottom Section (40%) -->
-            <div class="text-(length:--text-2xl) font-semibold leading-(--leading-xl) tracking-normal text-(--color-text-heading) text-left flex items-end ">
+            <div class="text-(length:--text-2xl) font-semibold leading-(--leading-xl) tracking-normal text-text-body text-left flex items-end ">
               300
             </div>
             </div>
             </div>
-            <div class="bg-(--o2-card-bg) border border-(--o2-border-color) rounded-lg p-4 min-h-32 flex flex-col justify-between transition-shadow duration-200 ease-in-out hover:shadow-sm">
-              <div class="flex flex-col justify-between rounded-[0.325rem] h-full gap-4 ">
+            <div class="bg-card-glass-bg border border-card-glass-border rounded-default p-4 min-h-32 flex flex-col justify-between transition-shadow duration-200 ease-in-out">
+              <div class="flex flex-col justify-between rounded-default h-full gap-4 ">
               <!-- Top Section (60%) -->
               <div class="flex flex-col justify-between">
                 <!-- Title row -->
                 <div class="flex justify-between items-center">
-                  <div class="text-(length:--text-sm) font-semibold leading-(--leading-base) tracking-normal text-(--color-text-heading) text-left" data-test="billings-usage-tile-title">RUM Session</div>
-                  <div style="opacity: 0.8;">
+                  <div class="text-(length:--text-sm) font-semibold leading-(--leading-base) tracking-normal text-text-heading text-left" data-test="billings-usage-tile-title">RUM Session</div>
+                  <div class="opacity-80">
                     <img :src="rumSessionIcon" />
                   </div>
                 </div>
               </div>
 
             <!-- Bottom Section (40%) -->
-            <div class="text-(length:--text-2xl) font-semibold leading-(--leading-xl) tracking-normal text-(--color-text-heading) text-left flex items-end ">
+            <div class="text-(length:--text-2xl) font-semibold leading-(--leading-xl) tracking-normal text-text-body text-left flex items-end ">
               20
             </div>
             </div>
@@ -101,31 +101,31 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             v-for="tile in usageTiles"
             :key="tile.key"
             data-test="billings-usage-tile"
-            class="usage-tile bg-(--o2-card-bg) border border-(--o2-border-color) rounded-lg px-3 py-3 flex flex-col gap-2 transition-shadow duration-200 ease-in-out hover:shadow-sm"
+            class="usage-tile bg-card-glass-bg border border-card-glass-border rounded-default px-3 py-3 flex flex-col gap-2 transition-shadow duration-200 ease-in-out"
           >
             <div class="flex items-center justify-between gap-2">
               <div
-                class="text-(length:--text-xs) font-medium text-(--o2-text-secondary) truncate"
+                class="text-(length:--text-xs) font-medium text-text-secondary truncate"
                 data-test="billings-usage-tile-title"
                 :title="tile.label"
               >
                 {{ tile.label }}
               </div>
-              <div class="usage-tile__icon shrink-0 flex items-center justify-center rounded-lg">
+              <div class="h-7 w-7 bg-bg-gray shrink-0 flex items-center justify-center rounded-default">
                 <img :src="tile.icon" class="h-4 w-4" />
               </div>
             </div>
             <div class="flex items-baseline gap-1 whitespace-nowrap">
-              <span class="text-(length:--text-xl) font-bold text-(--color-text-heading) leading-none">
+              <span class="text-(length:--text-xl) font-bold text-text-body leading-none">
                 {{ tile.value }}
               </span>
-              <span class="text-(length:--text-xs) font-medium text-(--o2-text-secondary)">
+              <span class="text-(length:--text-xs) font-medium text-text-secondary">
                 {{ tile.unit }}
               </span>
             </div>
             <div
               v-if="usageCost[tile.key]"
-              class="text-(length:--text-xs) font-medium text-(--o2-text-secondary)"
+              class="text-(length:--text-xs) font-medium text-text-secondary"
             >
               ${{ usageCost[tile.key] }}
             </div>
@@ -136,7 +136,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
         </div>
       </div>
-      <div v-if="dataLoading" class="text-xl font-semibold text-weight-medium text-center">
+      <div v-if="dataLoading" class="text-xl font-semibold font-medium text-center">
         <OSpinner size="md" class="mx-auto block text-center mt-3" />
       </div>
 
@@ -145,16 +145,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <div
         v-if="usageStreamEnabled"
         data-test="usage-daily-chart"
-        class="bg-(--o2-card-bg) border border-(--o2-border-color) rounded-lg p-4 mt-4"
+        class="bg-card-glass-bg border border-card-glass-border rounded-default p-4 mt-4"
       >
-        <div class="text-(length:--text-sm) font-semibold text-(--color-text-heading) mb-2">
+        <div class="text-(length:--text-sm) font-semibold text-text-heading mb-2">
           {{ t("billing.usageTrends.dailyUsage") }}
         </div>
-        <div class="usage-daily-chart__body w-full">
+        <div class="h-90 relative w-full">
           <PanelSchemaRenderer
             v-if="combinedSchema && dailyTimeObj"
             :key="'chart-r-' + dailyChartKey"
-            class="usage-daily-chart__renderer"
+            class="h-full w-full"
             :panelSchema="combinedSchema"
             :selectedTimeObj="dailyTimeObj"
             :variablesData="{}"
@@ -170,7 +170,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <div
             v-if="usageStreamMissing"
             data-test="usage-waiting-for-data"
-            class="usage-daily-chart__waiting absolute inset-0 bg-(--o2-card-bg)"
+            class="flex items-center justify-center z-2 absolute inset-0 bg-card-glass-bg"
           >
             <OEmptyState
               size="block"
@@ -188,7 +188,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <OEmptyState
         v-else
         data-test="usage-enable-cta"
-        class="mt-4 border border-(--o2-border-color) rounded-lg bg-(--o2-card-bg)"
+        class="mt-4 border border-card-glass-border rounded-default bg-card-glass-bg"
         size="block"
         illustration="wave-bars"
         :title="t('billing.usageTrends.enableTitle')"
@@ -214,6 +214,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <script lang="ts">
   import { defineComponent, ref, onMounted, defineAsyncComponent, watch, computed, onUnmounted, onActivated   , onBeforeMount, nextTick, inject } from "vue";
   import { useStore } from "vuex";
+  import useTheme from "@/composables/useTheme";
   import { useI18n } from "vue-i18n";
   import BillingService from "@/services/billings";
   import organizations from "@/services/organizations";
@@ -229,9 +230,8 @@ import OEmptyState from "@/lib/core/EmptyState/OEmptyState.vue";
 import ConfirmDialog from "@/components/ConfirmDialog.vue";
 import { buildUsageCombinedLinePanelSchema } from "./usageDailyPanelSchema";
 
-  let currentDate = new Date(); // Get the current date and time
+  let currentDate = new Date();
 
-  // Subtract 30 days from the current date
   let thirtyDaysAgo = new Date(currentDate.getTime() - 30 * 24 * 60 * 60 * 1000);
 
   export default defineComponent({
@@ -249,6 +249,7 @@ import { buildUsageCombinedLinePanelSchema } from "./usageDailyPanelSchema";
     setup() {
       const { t } = useI18n();
       const store = useStore();
+      const { isDark } = useTheme();
       const router = useRouter();
       const dataLoading = ref(false);
       const lastUsageUpdated = ref(0);
@@ -488,7 +489,7 @@ import { buildUsageCombinedLinePanelSchema } from "./usageDailyPanelSchema";
       const remotePipelineIcon = getImageURL("images/usage/remote_pipeline.svg");
       const dataRetentionIcon = getImageURL("images/usage/data_retention.svg");
       const aiIcon = computed(() =>
-        store.state.theme === "dark"
+        isDark.value
           ? getImageURL("images/common/ai_icon_dark.svg")
           : getImageURL("images/common/ai_icon_gradient.svg")
       );
@@ -1149,30 +1150,3 @@ import { buildUsageCombinedLinePanelSchema } from "./usageDailyPanelSchema";
   });
   </script>
 
-<style lang="scss" scoped>
-/* Compact stat cards (six across): label + icon badge, then the value. */
-.usage-tile__icon {
-  height: 1.75rem;
-  width: 1.75rem;
-  background: var(--o2-bg-gray);
-}
-
-/* PanelSchemaRenderer fills its container and needs an explicit height, or the
-   echarts canvas collapses to a sliver. */
-.usage-daily-chart__body {
-  height: 22.5rem;
-  position: relative;
-}
-.usage-daily-chart__renderer {
-  height: 100%;
-  width: 100%;
-}
-/* "Waiting for usage data" overlay sits over the (still-mounted) chart until
-   the org's usage stream exists and the search stops erroring. */
-.usage-daily-chart__waiting {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 2;
-}
-</style>
diff --git a/web/src/enterprise/components/onlineEvals/EvalJobList.vue b/web/src/enterprise/components/onlineEvals/EvalJobList.vue
index 0708969bb5..d2236dbb99 100644
--- a/web/src/enterprise/components/onlineEvals/EvalJobList.vue
+++ b/web/src/enterprise/components/onlineEvals/EvalJobList.vue
@@ -71,7 +71,7 @@
         </template>
 
         <template #bottom="{ totalRows }">
-          <span class="o2-table-footer-title">
+          <span class="text-xs font-normal">
             {{ totalRows.toLocaleString() }} {{ t("onlineEvals.job.listTitle") }}
           </span>
           <OButton
@@ -96,11 +96,11 @@
         </template>
 
         <template #cell-stream="{ row }">
-          <span class="font-mono text-xs">{{ row.stream }}</span>
+          {{ row.stream }}
         </template>
 
         <template #cell-scorers="{ row }">
-          <span class="font-mono text-xs">{{ scorerCountText(row) }}</span>
+          <span class="tabular-nums">{{ scorerCountText(row) }}</span>
         </template>
 
         <template #cell-created="{ row }">
@@ -319,7 +319,7 @@ const hasFilters = computed(
 );
 
 // Wire OEmptyState's action ids back into the existing emit contract.
-// `create` mirrors a click on the AppPageHeader's "New job" button;
+// `create` mirrors a click on the OPageHeader's "New job" button;
 // `clear-filters` resets the search + status filter inline.
 function onEmptyAction(id?: string) {
   if (id === "create") emit("create");
diff --git a/web/src/enterprise/components/onlineEvals/EvalListShell.spec.ts b/web/src/enterprise/components/onlineEvals/EvalListShell.spec.ts
index f544d08d5a..4b60476bc0 100644
--- a/web/src/enterprise/components/onlineEvals/EvalListShell.spec.ts
+++ b/web/src/enterprise/components/onlineEvals/EvalListShell.spec.ts
@@ -5,7 +5,7 @@
 //   • a data-test prefix on the outer page wrapper
 // Search, filters, and the "create" button now live inside each list's
 // OTable #toolbar slot (matching the IncidentList pattern), and per-tab
-// action buttons (Import, "New X") live in OnlineEvals's AppPageHeader.
+// action buttons (Import, "New X") live in OnlineEvals's OPageHeader.
 
 import { describe, it, expect } from "vitest";
 import { mount } from "@vue/test-utils";
diff --git a/web/src/enterprise/components/onlineEvals/EvalListShell.vue b/web/src/enterprise/components/onlineEvals/EvalListShell.vue
index 3e1cbd3ca4..c51dd7b2ee 100644
--- a/web/src/enterprise/components/onlineEvals/EvalListShell.vue
+++ b/web/src/enterprise/components/onlineEvals/EvalListShell.vue
@@ -4,13 +4,13 @@
     class="flex flex-col flex-1 min-w-0 h-full min-h-0"
   >
     <div v-if="showEmpty" class="flex-1 min-h-0">
-      <div class="card-container h-full flex items-center justify-center">
+      <div class="bg-card-glass-bg h-full flex items-center justify-center">
         <slot name="empty" />
       </div>
     </div>
 
     <div v-else class="flex-1 min-h-0">
-      <div class="card-container h-full">
+      <div class="bg-card-glass-bg h-full">
         <slot name="table" />
       </div>
     </div>
diff --git a/web/src/enterprise/components/onlineEvals/ImportScoreConfig.vue b/web/src/enterprise/components/onlineEvals/ImportScoreConfig.vue
index e6bee11cfb..f1c17895ac 100644
--- a/web/src/enterprise/components/onlineEvals/ImportScoreConfig.vue
+++ b/web/src/enterprise/components/onlineEvals/ImportScoreConfig.vue
@@ -21,14 +21,14 @@ the Free Software Foundation, either version 3 of the License, or
       <div class="w-full h-full flex flex-col" style="min-width: 380px">
         <div
           v-if="errors.length"
-          class="text-center text-[0.9375rem] font-semibold text-(--color-text-heading) py-3 shrink-0"
+          class="text-center text-sm font-semibold text-text-heading py-3 shrink-0"
           data-test="score-config-import-errors-title"
         >
           {{ t("onlineEvals.scoreConfig.import.errors.title") }}
         </div>
         <div
           v-else
-          class="text-center text-[0.9375rem] font-semibold text-(--color-text-heading) py-3 shrink-0"
+          class="text-center text-sm font-semibold text-text-heading py-3 shrink-0"
           data-test="score-config-import-output-title"
         >
           {{ t("onlineEvals.scoreConfig.import.outputMessages") }}
@@ -46,7 +46,7 @@ the Free Software Foundation, either version 3 of the License, or
               >
                 <span
                   v-if="err.field === 'name'"
-                  class="text-(--color-error-600)"
+                  class="text-error-600"
                   data-test="score-config-import-name-error"
                 >
                   {{ err.message }}
@@ -62,7 +62,7 @@ the Free Software Foundation, either version 3 of the License, or
 
                 <span
                   v-else-if="err.field === 'nameConflict'"
-                  class="text-(--color-error-600)"
+                  class="text-error-600"
                   data-test="score-config-import-name-conflict-error"
                 >
                   {{ err.message }}
@@ -78,7 +78,7 @@ the Free Software Foundation, either version 3 of the License, or
 
                 <span
                   v-else-if="err.field === 'dataType'"
-                  class="text-(--color-error-600)"
+                  class="text-error-600"
                   data-test="score-config-import-datatype-error"
                 >
                   {{ err.message }}
@@ -95,7 +95,7 @@ the Free Software Foundation, either version 3 of the License, or
 
                 <span
                   v-else-if="err.field === 'numericRange' && numericRangeFixers[err.itemIndex]"
-                  class="text-(--color-error-600)"
+                  class="text-error-600"
                   data-test="score-config-import-numeric-range-error"
                 >
                   {{ err.message }}
@@ -119,7 +119,7 @@ the Free Software Foundation, either version 3 of the License, or
 
                 <span
                   v-else-if="err.field === 'categories'"
-                  class="text-(--color-error-600)"
+                  class="text-error-600"
                   data-test="score-config-import-categories-error"
                 >
                   {{ err.message }}
@@ -134,13 +134,13 @@ the Free Software Foundation, either version 3 of the License, or
                   </div>
                 </span>
 
-                <span v-else class="text-(--color-error-600)">{{ err.message }}</span>
+                <span v-else class="text-error-600">{{ err.message }}</span>
               </div>
             </div>
           </div>
 
           <div v-if="creators.length" class="p-2.5 mb-2.5">
-            <div class="text-base mb-2.5 uppercase text-(--color-text-heading)" data-test="score-config-import-creation-title">
+            <div class="text-base mb-2.5 uppercase text-text-heading" data-test="score-config-import-creation-title">
               {{ t("onlineEvals.scoreConfig.import.creation") }}
             </div>
             <div
@@ -152,9 +152,9 @@ the Free Software Foundation, either version 3 of the License, or
               <div
                 :class="{
                   'font-bold py-1.25 px-0 text-sm': true,
-                  'text-(--color-success-600)': c.status === 'success',
-                  'text-(--color-error-600)': c.status === 'error',
-                  'text-(--color-text-secondary)': c.status === 'exists',
+                  'text-status-success-text': c.status === 'success',
+                  'text-error-600': c.status === 'error',
+                  'text-text-secondary': c.status === 'exists',
                 }"
                 :data-test="`score-config-import-creation-${i}-message`"
               >
diff --git a/web/src/enterprise/components/onlineEvals/ImportScorer.vue b/web/src/enterprise/components/onlineEvals/ImportScorer.vue
index c0ab8a4487..d169ebe53b 100644
--- a/web/src/enterprise/components/onlineEvals/ImportScorer.vue
+++ b/web/src/enterprise/components/onlineEvals/ImportScorer.vue
@@ -21,14 +21,14 @@ the Free Software Foundation, either version 3 of the License, or
       <div class="w-full h-full flex flex-col" style="min-width: 380px">
         <div
           v-if="errors.length"
-          class="text-center text-[0.9375rem] font-semibold text-(--color-text-heading) py-3 shrink-0"
+          class="text-center text-sm font-semibold text-text-heading py-3 shrink-0"
           data-test="scorer-import-errors-title"
         >
           {{ t("onlineEvals.scorer.import.errors.title") }}
         </div>
         <div
           v-else
-          class="text-center text-[0.9375rem] font-semibold text-(--color-text-heading) py-3 shrink-0"
+          class="text-center text-sm font-semibold text-text-heading py-3 shrink-0"
           data-test="scorer-import-output-title"
         >
           {{ t("onlineEvals.scorer.import.outputMessages") }}
@@ -46,7 +46,7 @@ the Free Software Foundation, either version 3 of the License, or
               >
                 <span
                   v-if="err.field === 'name'"
-                  class="text-(--color-error-600)"
+                  class="text-error-600"
                   data-test="scorer-import-name-error"
                 >
                   {{ err.message }}
@@ -62,7 +62,7 @@ the Free Software Foundation, either version 3 of the License, or
 
                 <span
                   v-else-if="err.field === 'nameConflict'"
-                  class="text-(--color-error-600)"
+                  class="text-error-600"
                   data-test="scorer-import-name-conflict-error"
                 >
                   {{ err.message }}
@@ -78,7 +78,7 @@ the Free Software Foundation, either version 3 of the License, or
 
                 <span
                   v-else-if="err.field === 'type'"
-                  class="text-(--color-error-600)"
+                  class="text-error-600"
                   data-test="scorer-import-type-error"
                 >
                   {{ err.message }}
@@ -95,7 +95,7 @@ the Free Software Foundation, either version 3 of the License, or
 
                 <span
                   v-else-if="err.field === 'scoreConfigRef'"
-                  class="text-(--color-error-600)"
+                  class="text-error-600"
                   data-test="scorer-import-score-config-ref-error"
                 >
                   {{ err.message }}
@@ -112,7 +112,7 @@ the Free Software Foundation, either version 3 of the License, or
 
                 <span
                   v-else-if="err.field === 'providerRef'"
-                  class="text-(--color-error-600)"
+                  class="text-error-600"
                   data-test="scorer-import-provider-ref-error"
                 >
                   {{ err.message }}
@@ -127,13 +127,13 @@ the Free Software Foundation, either version 3 of the License, or
                   </div>
                 </span>
 
-                <span v-else class="text-(--color-error-600)">{{ err.message }}</span>
+                <span v-else class="text-error-600">{{ err.message }}</span>
               </div>
             </div>
           </div>
 
           <div v-if="creators.length" class="p-2.5 mb-2.5">
-            <div class="section-title text-(--color-text-heading) text-base mb-2.5 uppercase" data-test="scorer-import-creation-title">
+            <div class="section-title text-text-heading text-base mb-2.5 uppercase" data-test="scorer-import-creation-title">
               {{ t("onlineEvals.scorer.import.creation") }}
             </div>
             <div
@@ -145,9 +145,9 @@ the Free Software Foundation, either version 3 of the License, or
               <div
                 :class="{
                   'py-1.25 px-0 text-sm font-bold': true,
-                  'text-(--color-success-600)': c.status === 'success',
-                  'text-(--color-error-600)': c.status === 'error',
-                  'text-(--color-text-secondary)': c.status === 'exists',
+                  'text-status-success-text': c.status === 'success',
+                  'text-error-600': c.status === 'error',
+                  'text-text-secondary': c.status === 'exists',
                 }"
                 :data-test="`scorer-import-creation-${i}-message`"
               >
diff --git a/web/src/enterprise/components/onlineEvals/QualityPage.vue b/web/src/enterprise/components/onlineEvals/QualityPage.vue
index a688488a68..fbbd41040e 100644
--- a/web/src/enterprise/components/onlineEvals/QualityPage.vue
+++ b/web/src/enterprise/components/onlineEvals/QualityPage.vue
@@ -1,22 +1,16 @@
 <template>
   <div
-    class="quality-page flex flex-col gap-[14px] p-[14px_16px_18px] min-h-0 flex-1"
+    class="quality-page flex flex-col gap-3.5 pt-3.5 pb-4 min-h-0 flex-1"
     data-test="quality-page"
   >
     <!-- Agent filter — right-aligned at the top of the content container so it
          sits with the KPIs + table it scopes (matches LLM Insights). -->
-    <div class="flex items-center justify-end px-4">
+    <div class="flex items-center justify-end px-page-edge">
       <div class="w-[17rem] flex-shrink-0">
         <!-- While the agent list is loading we swap the select for a skeleton
              of the same height so the control reads as "loading" (and can't be
              opened on an empty list) instead of showing an empty dropdown. -->
-        <SkeletonBox
-          v-if="agentsLoading"
-          width="100%"
-          height="2.125rem"
-          rounded
-          data-test="quality-agent-filter-skeleton"
-        />
+        <OSkeleton type="text" v-if="agentsLoading" data-test="quality-agent-filter-skeleton" class="w-full h-8.5" />
         <OSelect
           v-else
           v-model="agentModel"
@@ -26,7 +20,7 @@
           :options="agentOptions || []"
           labelKey="label"
           valueKey="value"
-          class="rounded"
+          class="rounded-default"
           data-test="quality-agent-filter"
         />
       </div>
@@ -35,23 +29,20 @@
     <QualityKpiSkeleton
       v-if="showKpiSkeleton"
       :count="visibleKpis.length"
-      class="px-4"
+      class="px-page-edge"
     />
-    <section v-else class="quality-page__kpis grid gap-[10px] px-4" aria-label="Tier 1 KPIs"
-      style="grid-template-columns: repeat(auto-fit, minmax(180px, 1fr))"
-    >
+    <KpiCardRow v-else class="quality-page__kpis px-page-edge" aria-label="Tier 1 KPIs">
       <QualityKpiCard
         v-for="kpi in visibleKpis"
         :key="kpi.id"
         :kpi="kpi"
         :delta="deltaByKpi[kpi.id] ?? null"
       />
-    </section>
+    </KpiCardRow>
 
-    <!-- Tier 2: the configs table is now the persistent view; selecting a
-         row opens the detail in a right-side ODrawer (70% width) instead
-         of replacing the whole page. The user keeps full context of the
-         list behind the drawer. -->
+    <!-- Tier 2: the configs table is the persistent view; selecting a
+         row opens the detail in a right-side ODrawer (70% width). The user
+         keeps full context of the list behind the drawer. -->
     <div class="quality-page__tier2 grid gap-3 min-h-0 flex-1"
       style="grid-template-columns: minmax(0, 1fr)"
     >
@@ -64,6 +55,7 @@
     </div>
 
     <ODrawer
+      bleed
       v-model:open="detailDrawerOpen"
       side="right"
       :width="70"
@@ -74,20 +66,15 @@
            the drawer chrome owns the entire identification block;
            the inner panel no longer renders its own title row. -->
       <template #header-right>
-        <span
-          class="qpd-type inline-flex py-0 px-1 rounded-[2px] font-bold text-[13px] leading-[1.4] tracking-[0.02em]"
-          :class="{
-            'bg-[color-mix(in_srgb,var(--color-indigo-500)_14%,transparent)] text-[var(--color-indigo-700)]': detailDataType === 'numeric',
-            'bg-[color-mix(in_srgb,var(--color-purple-600)_14%,transparent)] text-[var(--color-purple-700)]': detailDataType === 'categorical',
-            'bg-[color-mix(in_srgb,var(--color-success-600)_14%,transparent)] text-[var(--color-success-700)]': detailDataType === 'boolean',
-          }"
+        <OTag
+          v-if="detailDataType === 'numeric' || detailDataType === 'categorical' || detailDataType === 'boolean'"
+          type="evalDataType"
+          :value="detailDataType"
           data-test="quality-detail-type-badge"
-        >
-          {{ shortType(detailDataType) }}
-        </span>
+        />
         <span
           v-if="selectedConfig?.version"
-          class="qpd-version ml-[6px] text-[11px] text-(--color-text-secondary) [font-variant-numeric:tabular-nums]"
+          class="qpd-version ml-1.5 text-2xs text-text-secondary [font-variant-numeric:tabular-nums]"
           data-test="quality-detail-version-badge"
           >v{{ selectedConfig.version }}</span
         >
@@ -126,19 +113,21 @@ import {
 } from "./composables/useQualityScoreConfigs";
 import { useQualityConfigDetail } from "./composables/useQualityConfigDetail";
 import { useQualityDetailCharts } from "./composables/useQualityDetailCharts";
+import KpiCardRow from "@/components/common/KpiCardRow.vue";
 import QualityKpiCard from "./quality/QualityKpiCard.vue";
 import QualityKpiSkeleton from "./quality/QualityKpiSkeleton.vue";
 import QualityScoreConfigsTable from "./quality/QualityScoreConfigsTable.vue";
 import QualityDetailPanel from "./quality/QualityDetailPanel.vue";
 import ODrawer from "@/lib/overlay/Drawer/ODrawer.vue";
 import OSelect from "@/lib/forms/Select/OSelect.vue";
-import SkeletonBox from "@/components/shared/SkeletonBox.vue";
+import OTag from "@/lib/core/Badge/OTag.vue";
+import OSkeleton from "@/lib/feedback/Skeleton/OSkeleton.vue";
 import type { AgentFilterSelection } from "./utils/agentFilterSql";
 
 const props = defineProps<{
   scoreConfigs: ScoreConfig[];
   // Date window is owned by OnlineEvals (so the picker + refresh button live
-  // in the embedded AppPageHeader). Quality just consumes it as a reactive
+  // in the embedded OPageHeader). Quality just consumes it as a reactive
   // input to its data loaders.
   dateWindow: DateWindow;
   agentFilter?: AgentFilterSelection | null;
@@ -184,12 +173,8 @@ const { isLoading, kpis, deltaByKpi, refresh } = useQualityData(
   agentFilterRef,
 );
 
-// Evaluation cost is intentionally hidden until the backend writes cost data.
-// To restore it, remove this filter and re-add `kpis` to the v-for.
-// Now that `gen_ai_usage_cost` on `_evaluator` is populated, the
-// Evaluation Cost card is sourced live (see useQualityData) — no longer
-// hidden. Keep the set in place so future placeholder KPIs can be
-// hidden the same way without touching the render loop.
+// Placeholder KPIs can be hidden here without touching the render loop — add
+// their ids to this set to filter them out of the v-for.
 const HIDDEN_KPI_IDS = new Set<string>();
 const visibleKpis = computed(() =>
   kpis.value.filter((k) => !HIDDEN_KPI_IDS.has(k.id)),
@@ -267,7 +252,7 @@ const isAnyLoading = computed(
 );
 
 // Surface refresh + an aggregated loading flag so OnlineEvals can drive the
-// Refresh button it now renders in the embedded AppPageHeader actions slot.
+// Refresh button it now renders in the embedded OPageHeader actions slot.
 defineExpose({ refreshAll, isAnyLoading });
 
 /** Show the KPI skeleton whenever the KPI queries are running — on the initial
@@ -333,14 +318,4 @@ const detailDrawerOpen = computed<boolean>({
     if (!open) clearSelection();
   },
 });
-
-// Used by the drawer header's #header-right slot — same mapping the
-// detail panel used for its in-panel badge so type/version chrome looks
-// identical, just relocated into the drawer header.
-function shortType(type: string): string {
-  if (type === "numeric") return "Num";
-  if (type === "categorical") return "Cat";
-  if (type === "boolean") return "Bool";
-  return "—";
-}
 </script>
diff --git a/web/src/enterprise/components/onlineEvals/ScoreConfigLibrary.vue b/web/src/enterprise/components/onlineEvals/ScoreConfigLibrary.vue
index 25cc8f9207..eac9c71850 100644
--- a/web/src/enterprise/components/onlineEvals/ScoreConfigLibrary.vue
+++ b/web/src/enterprise/components/onlineEvals/ScoreConfigLibrary.vue
@@ -20,11 +20,11 @@ the Free Software Foundation, either version 3 of the License, or
 
     <div
       v-else-if="loadError"
-      class="flex flex-col items-center justify-center flex-1 p-8 text-(--color-text-secondary)"
+      class="flex flex-col items-center justify-center flex-1 p-8 text-text-secondary"
       data-test="score-config-library-error"
     >
       <OIcon name="error-outline" class="mb-2" style="width: 3em; height: 3em" />
-      <div class="text-red-500">{{ loadError }}</div>
+      <div class="text-status-error-text">{{ loadError }}</div>
       <OButton variant="primary" size="sm" class="mt-4" @click="loadCatalog">
         Retry
       </OButton>
@@ -42,7 +42,7 @@ the Free Software Foundation, either version 3 of the License, or
       <div class="flex items-center justify-between gap-3 mb-2 pl-4.25 pr-3">
         <div
           v-if="filteredEntries.length > 0"
-          class="inline-flex items-center gap-2 py-0.5 px-1 text-xs font-medium text-(--color-text-secondary) select-none"
+          class="inline-flex items-center gap-2 py-0.5 px-1 text-xs font-medium text-text-secondary select-none"
           data-test="score-config-library-select-all"
         >
           <OCheckbox
@@ -51,7 +51,7 @@ the Free Software Foundation, either version 3 of the License, or
           />
           <span class="cursor-pointer" @click="toggleSelectAll">{{ allVisibleSelected ? "Clear all" : "Select all" }}</span>
         </div>
-        <span class="text-xs text-(--color-text-secondary)">
+        <span class="text-xs text-text-secondary">
           {{ filteredEntries.length }} score config(s)
         </span>
       </div>
@@ -64,13 +64,13 @@ the Free Software Foundation, either version 3 of the License, or
           :data-test="`score-config-library-section-${group.dataType}`"
         >
           <div
-            class="flex items-baseline gap-1.5 mt-0 mx-0 mb-1.5 text-xs font-bold uppercase tracking-[0.04em] text-(--color-text-heading)"
+            class="flex items-baseline gap-1.5 mt-0 mx-0 mb-1.5 text-xs font-bold uppercase tracking-[0.04em] text-text-heading"
           >
-            <span class="text-(--color-text-heading)">{{ group.label }}</span>
-            <span class="font-medium text-(--color-text-secondary)">({{ group.entries.length }})</span>
+            <span class="text-text-heading">{{ group.label }}</span>
+            <span class="font-medium text-text-secondary">({{ group.entries.length }})</span>
           </div>
           <ul
-            class="flex flex-col rounded border border-(--color-border-default)"
+            class="flex flex-col rounded-default border border-border-default"
           >
             <li
               v-for="entry in group.entries"
@@ -95,7 +95,7 @@ the Free Software Foundation, either version 3 of the License, or
                 <span class="text-sm font-medium">{{ entry.displayName }}</span>
                 <span
                   v-if="entry.description"
-                  class="block text-xs text-(--color-text-secondary)"
+                  class="block text-xs text-text-secondary"
                 >
                   {{ entry.description }}
                 </span>
diff --git a/web/src/enterprise/components/onlineEvals/ScoreConfigList.vue b/web/src/enterprise/components/onlineEvals/ScoreConfigList.vue
index 113eada159..53f7ef9347 100644
--- a/web/src/enterprise/components/onlineEvals/ScoreConfigList.vue
+++ b/web/src/enterprise/components/onlineEvals/ScoreConfigList.vue
@@ -79,21 +79,21 @@
         </template>
 
         <template #cell-rangeValues="{ row }">
-          <span class="font-[ui-monospace,SFMono-Regular,Menlo,monospace] text-xs">{{ rangeOrValues(row) }}</span>
+          <span class="tabular-nums">{{ rangeOrValues(row) }}</span>
         </template>
 
         <template #cell-healthy="{ row }">
-          <span class="font-[ui-monospace,SFMono-Regular,Menlo,monospace] text-xs font-semibold">{{ healthyDisplay(row) }}</span>
+          <span class="font-semibold">{{ healthyDisplay(row) }}</span>
         </template>
 
         <template #cell-version="{ row }">
-          <span class="inline-flex items-center gap-1.5 font-[ui-monospace,SFMono-Regular,Menlo,monospace] text-xs">
-            <span class="w-1.5 h-1.5 rounded-full bg-(--color-success-600) inline-block" />v{{ row.version }}
+          <span class="inline-flex items-center gap-1.5 tabular-nums">
+            <span class="w-1.5 h-1.5 rounded-full bg-status-positive inline-block" />v{{ row.version }}
           </span>
         </template>
 
         <template #cell-usedBy="{ row }">
-          <span class="font-[ui-monospace,SFMono-Regular,Menlo,monospace] text-xs">{{ usedByText(row) }}</span>
+          <span class="tabular-nums">{{ usedByText(row) }}</span>
         </template>
 
         <template #cell-created="{ row }">
@@ -101,7 +101,7 @@
         </template>
 
         <template #bottom="{ totalRows }">
-          <span class="o2-table-footer-title">
+          <span class="text-xs font-normal">
             {{ totalRows.toLocaleString() }} {{ t("onlineEvals.scoreConfig.listTitle") }}
           </span>
           <OButton
@@ -388,9 +388,9 @@ function formatDateShort(value: number) {
 }
 
 function dtypeChipClass(dataType: string): string {
-  if (dataType === 'numeric') return 'bg-[color-mix(in_srgb,var(--color-info-700)_14%,transparent)] text-(--color-info-700)';
-  if (dataType === 'categorical') return 'bg-[color-mix(in_srgb,var(--color-warning-700)_14%,transparent)] text-(--color-warning-700)';
-  if (dataType === 'boolean') return 'bg-[color-mix(in_srgb,var(--color-success-600)_14%,transparent)] text-(--color-success-600)';
+  if (dataType === 'numeric') return 'bg-[color-mix(in_srgb,var(--color-blue-700)_14%,transparent)] text-status-info-text';
+  if (dataType === 'categorical') return 'bg-[color-mix(in_srgb,var(--color-warning-700)_14%,transparent)] text-warning-700';
+  if (dataType === 'boolean') return 'bg-[color-mix(in_srgb,var(--color-success-600)_14%,transparent)] text-status-success-text';
   return '';
 }
 
diff --git a/web/src/enterprise/components/onlineEvals/ScorerLibrary.vue b/web/src/enterprise/components/onlineEvals/ScorerLibrary.vue
index cb92d31c33..64f2e25e5c 100644
--- a/web/src/enterprise/components/onlineEvals/ScorerLibrary.vue
+++ b/web/src/enterprise/components/onlineEvals/ScorerLibrary.vue
@@ -17,11 +17,11 @@ the Free Software Foundation, either version 3 of the License, or
 
     <div
       v-else-if="loadError"
-      class="flex flex-col items-center justify-center flex-1 p-8 text-(--color-text-secondary)"
+      class="flex flex-col items-center justify-center flex-1 p-8 text-text-secondary"
       data-test="scorer-library-error"
     >
       <OIcon name="error-outline" class="mb-2" style="width: 3em; height: 3em" />
-      <div class="text-red-500">{{ loadError }}</div>
+      <div class="text-status-error-text">{{ loadError }}</div>
       <OButton variant="primary" size="sm" class="mt-4" @click="loadCatalog">
         Retry
       </OButton>
@@ -29,7 +29,7 @@ the Free Software Foundation, either version 3 of the License, or
 
     <div
       v-else-if="providers.length === 0"
-      class="flex flex-col items-center justify-center flex-1 p-8 text-(--color-text-secondary)"
+      class="flex flex-col items-center justify-center flex-1 p-8 text-text-secondary"
       data-test="scorer-library-no-providers"
     >
       Create a Provider first before importing LLM Judge scorers.
@@ -38,7 +38,7 @@ the Free Software Foundation, either version 3 of the License, or
     <div v-else class="flex flex-col min-h-0 flex-1">
       <div class="flex items-end gap-3 mb-4">
         <div class="flex items-center gap-2 shrink-0 w-60">
-          <label class="text-xs font-semibold text-(--color-text-secondary) whitespace-nowrap">Provider</label>
+          <label class="text-xs font-semibold text-text-secondary whitespace-nowrap">Provider</label>
           <OSelect
             v-model="selectedProviderId"
             :options="providerOptions"
@@ -60,7 +60,7 @@ the Free Software Foundation, either version 3 of the License, or
       <div class="flex items-center justify-between gap-3 mb-2 pl-4.25 pr-3">
         <label
           v-if="filteredEntries.length > 0"
-          class="inline-flex items-center gap-2 py-0.5 px-1 text-xs font-medium text-(--color-text-secondary) select-none"
+          class="inline-flex items-center gap-2 py-0.5 px-1 text-xs font-medium text-text-secondary select-none"
           data-test="scorer-library-select-all"
         >
           <OCheckbox
@@ -69,7 +69,7 @@ the Free Software Foundation, either version 3 of the License, or
           />
           <span>{{ allVisibleSelected ? "Clear all" : "Select all" }}</span>
         </label>
-        <span class="text-xs text-(--color-text-secondary)">
+        <span class="text-xs text-text-secondary">
           {{ filteredEntries.length }} scorer(s)
         </span>
       </div>
@@ -81,12 +81,12 @@ the Free Software Foundation, either version 3 of the License, or
           class="mt-4 first:mt-0"
           :data-test="`scorer-library-section-${group.category}`"
         >
-          <h4 class="flex items-baseline gap-1.5 m-0 mb-1.5 text-xs font-bold uppercase tracking-[0.04em] text-(--color-text-heading)">
+          <h4 class="flex items-baseline gap-1.5 m-0 mb-1.5 text-xs font-bold uppercase tracking-[0.04em] text-text-heading">
             <span>{{ group.category }}</span>
-            <span class="font-medium text-(--color-text-secondary)">({{ group.entries.length }})</span>
+            <span class="font-medium text-text-secondary">({{ group.entries.length }})</span>
           </h4>
           <ul
-            class="flex flex-col rounded border border-(--color-border-default)"
+            class="flex flex-col rounded-default border border-border-default"
           >
             <li
               v-for="entry in group.entries"
@@ -95,7 +95,7 @@ the Free Software Foundation, either version 3 of the License, or
               :class="[
                 isSelected(entry.name)
                   ? 'selected-item bg-[color-mix(in_srgb,var(--color-primary-600)_6%,transparent)] border-primary'
-                  : 'border-transparent hover:bg-(--color-table-row-hover-bg)',
+                  : 'border-transparent hover:bg-table-row-hover-bg',
               ]"
               :data-test="`scorer-library-item-${entry.name}`"
               @click="toggle(entry)"
@@ -111,7 +111,7 @@ the Free Software Foundation, either version 3 of the License, or
                 <span class="text-sm font-medium">{{ entry.displayName }}</span>
                 <span
                   v-if="entry.description"
-                  class="block text-xs text-(--color-text-secondary)"
+                  class="block text-xs text-text-secondary"
                 >
                   {{ entry.description }}
                 </span>
diff --git a/web/src/enterprise/components/onlineEvals/ScorerList.vue b/web/src/enterprise/components/onlineEvals/ScorerList.vue
index c47e8f4cfa..410f6bcd1d 100644
--- a/web/src/enterprise/components/onlineEvals/ScorerList.vue
+++ b/web/src/enterprise/components/onlineEvals/ScorerList.vue
@@ -92,7 +92,7 @@
         </template>
 
         <template #bottom="{ totalRows }">
-          <span class="o2-table-footer-title">
+          <span class="text-xs font-normal">
             {{ totalRows.toLocaleString() }} {{ t("onlineEvals.scorer.listTitle") }}
           </span>
           <OButton
@@ -116,15 +116,15 @@
         </template>
 
         <template #cell-produces="{ row }">
-          <span class="font-mono text-xs">{{ producesLabel(row) || "—" }}</span>
+          {{ producesLabel(row) || "—" }}
         </template>
 
         <template #cell-version="{ row }">
-          <span class="font-mono text-xs">v{{ row.version }}</span>
+          <span class="tabular-nums">v{{ row.version }}</span>
         </template>
 
         <template #cell-usedBy="{ row }">
-          <span class="font-mono text-xs">{{ usedByText(row) }}</span>
+          <span class="tabular-nums">{{ usedByText(row) }}</span>
         </template>
 
         <template #cell-actions="{ row }">
diff --git a/web/src/enterprise/components/onlineEvals/composables/useQualityData.ts b/web/src/enterprise/components/onlineEvals/composables/useQualityData.ts
index 5da9fa832b..0b03fb50d9 100644
--- a/web/src/enterprise/components/onlineEvals/composables/useQualityData.ts
+++ b/web/src/enterprise/components/onlineEvals/composables/useQualityData.ts
@@ -1,6 +1,6 @@
 // Quality page data composable.
 // Queries `_llm_scores` (Logs) and `_evaluator` (Traces) system streams
-// for Tier 1 KPI values. Each refresh runs current-window and prev-window
+// for KPI values. Each refresh runs current-window and prev-window
 // aggregates in parallel; one stream's failure doesn't break the page.
 
 import { computed, ref, type Ref } from "vue";
@@ -126,7 +126,7 @@ function emptyKpis(): KpiCard[] {
 }
 
 // Org-wide KPI aggregate over `_llm_scores`. Only the evaluated-spans count
-// is surfaced here — per-config unhealthy counts live on the Tier 2 table
+// is surfaced here — per-config unhealthy counts live on the table
 // in `useQualityScoreConfigs`. Scores are written per-span (each evaluated
 // span produces one row per scorer), so distinct span_id is the right unit
 // for "evaluated"; a single trace can have many evaluated spans.
diff --git a/web/src/enterprise/components/onlineEvals/composables/useQualityScoreConfigs.ts b/web/src/enterprise/components/onlineEvals/composables/useQualityScoreConfigs.ts
index 185fc01852..f4e46f98c3 100644
--- a/web/src/enterprise/components/onlineEvals/composables/useQualityScoreConfigs.ts
+++ b/web/src/enterprise/components/onlineEvals/composables/useQualityScoreConfigs.ts
@@ -1,7 +1,6 @@
-// Tier 2 Overview composable.
+// Overview composable.
 // Single batched aggregate query against `_llm_scores` per config,
-// keyed by entity_id. No per-config "unhealthy" detection — the table no
-// longer surfaces an unhealthy column.
+// keyed by entity_id.
 
 import { computed, ref, type Ref } from "vue";
 import { useLLMStreamQuery } from "@/plugins/traces/composables/useLLMStreamQuery";
@@ -61,8 +60,7 @@ function joinId(config: ScoreConfig): string {
 
 /** Aggregate SQL that only references columns guaranteed to exist on the
  * `_llm_scores` schema, so it never trips DataFusion's parse-time column
- * check. No per-config unhealthy detection — the table doesn't render an
- * unhealthy column anymore. */
+ * check. */
 function buildAggSql(agentWhere: string | null): string {
   const where = combineWhere("score_config_id IS NOT NULL", agentWhere);
   return [
diff --git a/web/src/enterprise/components/onlineEvals/forms/EvalJobDetail.vue b/web/src/enterprise/components/onlineEvals/forms/EvalJobDetail.vue
index a176597ce8..8110d7fb4e 100644
--- a/web/src/enterprise/components/onlineEvals/forms/EvalJobDetail.vue
+++ b/web/src/enterprise/components/onlineEvals/forms/EvalJobDetail.vue
@@ -1,5 +1,6 @@
 <template>
   <ODrawer
+    bleed
     :open="open"
     side="right"
     :width="70"
@@ -18,7 +19,7 @@
            above the cards (right-aligned) so it reads as a page-level control,
            not a per-tab filter. Refresh re-queries everything. -->
       <div
-        class="flex items-center justify-end gap-[0.5rem] px-5 pt-3"
+        class="flex items-center justify-end gap-2 px-5 pt-3"
       >
         <DateTimePickerDashboard
           ref="dateTimePickerRef"
@@ -44,7 +45,7 @@
            consistent. Pinned band (shrink-0) with a bottom divider; the cards
            below carry their own chrome via Tailwind. -->
       <section
-        class="flex-shrink-0 grid grid-cols-4 gap-[0.625rem] px-5 py-4 border-b border-b-[var(--color-dialog-header-border,var(--o2-border))]"
+        class="flex-shrink-0 grid grid-cols-4 gap-2.5 px-5 py-4 border-b border-b-dialog-header-border"
       >
         <!-- While the KPI query is in flight, show skeleton tiles in place of
              the cards (matches the LLM Insights dashboard pattern). -->
@@ -53,22 +54,22 @@
           v-for="card in kpiCards"
           v-else
           :key="card.label"
-          class="rounded-lg flex flex-col px-[0.875rem] pt-[0.625rem] pb-[0.625rem] gap-[0.25rem] bg-[var(--color-surface-base)] border border-[var(--color-border-default)] transition-shadow duration-200 hover:shadow-[0_0.0625rem_0.375rem_rgba(0,0,0,0.08)]"
+          class="rounded-default flex flex-col px-3.5 pt-2.5 pb-2.5 gap-1 bg-surface-base border border-border-default transition-shadow duration-200 hover:shadow-[0_0.0625rem_0.375rem_color-mix(in_srgb,var(--color-black)_8%,transparent)]"
         >
           <div
-            class="kpi-label text-[0.7rem] leading-normal font-semibold mb-[0.25rem] text-[var(--color-text-secondary)]"
+            class="kpi-label text-2xs leading-normal font-semibold mb-1 text-text-secondary"
           >
             {{ card.label }}
           </div>
           <div class="flex items-baseline gap-[0.2rem]">
             <span
-              class="text-[1.4rem] font-bold leading-none text-[var(--color-grey-600)]"
+              class="text-2xl font-bold leading-none text-text-secondary"
             >
               {{ card.value }}
             </span>
             <span
               v-if="card.unit"
-              class="text-[0.8rem] font-semibold text-[var(--color-text-secondary)]"
+              class="text-compact font-semibold text-text-secondary"
             >
               {{ card.unit }}
             </span>
@@ -110,13 +111,13 @@
           v-show="tableEnabled"
           class="flex items-center justify-end gap-2 flex-wrap px-5"
         >
-          <div class="w-[14rem] flex-shrink-0">
+          <div class="w-56 flex-shrink-0">
             <OSelect
               v-model="agentKey"
               :options="agentOptions"
               labelKey="label"
               valueKey="value"
-              class="w-full rounded"
+              class="w-full rounded-default"
               data-test="eval-job-detail-runs-agent-filter"
             />
           </div>
@@ -127,23 +128,28 @@
           <!-- Target -->
           <section class="flex flex-col gap-2 px-5">
             <h4
-              class="m-0 pb-[0.375rem] inline-flex items-center gap-[0.375rem] text-[0.8125rem] font-semibold leading-[1.5] text-[var(--color-text-primary)] border-b border-b-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)]"
+              class="m-0 pb-1.5 inline-flex items-center gap-1.5 text-compact font-semibold leading-[1.5] text-text-heading border-b border-b-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)]"
             >
               {{ t("onlineEvals.job.detail.targetSection") }}
             </h4>
-            <dl class="jd-kv">
-              <dt>{{ t("onlineEvals.job.detail.streamLabel") }}</dt>
-              <dd>{{ row.stream }}</dd>
+            <dl class="grid grid-cols-[8.125rem_1fr] gap-x-3.5 gap-y-1.5 m-0">
+              <dt class="text-xs font-semibold text-text-secondary">{{ t("onlineEvals.job.detail.streamLabel") }}</dt>
+              <dd class="m-0 text-compact text-text-body wrap-break-word">{{ row.stream }}</dd>
 
-              <dt>{{ t("onlineEvals.job.detail.streamTypeLabel") }}</dt>
-              <dd>{{ streamType }}</dd>
+              <dt class="text-xs font-semibold text-text-secondary">{{ t("onlineEvals.job.detail.streamTypeLabel") }}</dt>
+              <dd class="m-0 text-compact text-text-body wrap-break-word">{{ streamType }}</dd>
             </dl>
 
             <!-- Filter rendered as a code block with a header bar + copy action,
                  matching the Alert History condition view. -->
-            <div class="jd-codeblock" data-test="eval-job-detail-filter">
-              <div class="jd-codeblock__header">
-                <span class="jd-codeblock__label">{{
+            <div
+              class="border border-dialog-header-border rounded-default overflow-hidden bg-[color-mix(in_srgb,var(--color-text-secondary)_4%,var(--color-card-bg))]"
+              data-test="eval-job-detail-filter"
+            >
+              <div
+                class="flex items-center justify-between px-2.5 py-1.5 border-b border-b-dialog-header-border bg-[color-mix(in_srgb,var(--color-text-secondary)_6%,var(--color-card-bg))]"
+              >
+                <span class="text-2xs font-medium text-text-secondary">{{
                   t("onlineEvals.job.detail.filterLabel")
                 }}</span>
                 <OButton
@@ -161,7 +167,10 @@
                   <OTooltip :content="t('common.copy')" />
                 </OButton>
               </div>
-              <pre class="jd-codeblock__content">{{
+              <!-- Hard cap the filter condition height; longer conditions scroll. -->
+              <pre
+                class="m-0 px-3.5 py-2.5 font-mono text-compact leading-[1.6] text-text-body whitespace-pre-wrap overflow-x-auto max-h-50 overflow-y-auto"
+              >{{
                 filterText || t("onlineEvals.job.detail.filterEmpty")
               }}</pre>
             </div>
@@ -170,7 +179,7 @@
           <!-- Scorers -->
           <section class="flex flex-col gap-2 px-5">
             <h4
-              class="m-0 pb-[0.375rem] inline-flex items-center gap-[0.375rem] text-[0.8125rem] font-semibold leading-[1.5] text-[var(--color-text-primary)] border-b border-b-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)]"
+              class="m-0 pb-1.5 inline-flex items-center gap-1.5 text-compact font-semibold leading-[1.5] text-text-heading border-b border-b-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)]"
             >
               {{ t("onlineEvals.job.detail.scorersSection") }}
               <OTag type="fieldTag" value="soft">{{ resolvedScorers.length }}</OTag>
@@ -181,18 +190,32 @@
               :title="t('onlineEvals.job.detail.scorersEmpty')"
               data-test="eval-job-detail-scorers-empty"
             />
-            <ul v-else class="jd-scorers">
+            <!-- Show ~3 scorer cards; the rest scroll. The small extra lets the
+                 4th card peek as a scroll affordance. padding-right keeps the
+                 scrollbar off the card edges. -->
+            <ul
+              v-else
+              class="list-none m-0 p-0 flex flex-col gap-2.5 max-h-100 overflow-y-auto pr-1 pt-2.5"
+            >
               <li v-for="item in resolvedScorers" :key="item.id">
+                <!-- `group` drives the card's hover affordances on the CTA /
+                     chevron below. The chain is hover-AND-enabled, so the group
+                     variant carries :not(:disabled) with it — a disabled card
+                     must not light up on hover. -->
                 <button
                   type="button"
-                  class="jd-scorers__card"
+                  class="group w-full flex items-center gap-3.5 px-4 py-3.5 bg-card-bg border border-[color-mix(in_srgb,var(--color-text-secondary)_16%,transparent)] rounded-default text-left cursor-pointer transition-[border-color,background,box-shadow,transform] duration-150 enabled:hover:border-[color-mix(in_srgb,var(--color-primary-600)_45%,transparent)] enabled:hover:bg-[color-mix(in_srgb,var(--color-primary-600)_4%,var(--color-card-bg))] enabled:hover:shadow-[0_0.0625rem_0.1875rem_color-mix(in_srgb,var(--color-primary-600)_12%,transparent)] enabled:hover:-translate-y-px disabled:opacity-55 disabled:cursor-not-allowed"
                   :data-test="`eval-job-detail-scorer-item-${item.name}`"
                   :disabled="!findScorerById(item.id)"
                   @click="onScorerClick(item.id)"
                 >
                   <span
-                    class="jd-scorers__icon"
-                    :class="`jd-scorers__icon--${item.scorerType}`"
+                    class="shrink-0 inline-flex items-center justify-center size-8.5 rounded-default"
+                    :class="{
+                      'bg-badge-indigo-soft-bg text-badge-indigo-soft-text': item.scorerType === 'llm_judge',
+                      'bg-badge-orange-soft-bg text-badge-orange-soft-text': item.scorerType === 'remote',
+                      'bg-[color-mix(in_srgb,var(--color-text-secondary)_14%,transparent)] text-text-secondary': item.scorerType === 'unknown',
+                    }"
                   >
                     <OIcon
                       :name="
@@ -201,9 +224,9 @@
                       size="sm"
                     />
                   </span>
-                  <div class="jd-scorers__main">
-                    <div class="jd-scorers__row">
-                      <span class="jd-scorers__name">{{
+                  <div class="flex-1 min-w-0 flex flex-col gap-1.25">
+                    <div class="flex items-center gap-2 flex-wrap">
+                      <span class="font-bold text-sm text-text-heading">{{
                         item.name
                       }}</span>
                       <OTag
@@ -211,49 +234,49 @@
                         type="scorerType"
                         :value="item.scorerType"
                       />
-                      <span class="jd-scorers__version"
+                      <span class="text-2xs text-text-secondary"
                         >v{{ item.version }}</span
                       >
                     </div>
                     <div
                       v-if="item.scoreConfigName"
-                      class="jd-scorers__produces"
+                      class="flex items-center gap-1.5 text-xs text-text-secondary flex-wrap"
                     >
                       <OIcon
                         name="rule"
                         size="xs"
-                        class="jd-scorers__produces-icon"
+                        class="shrink-0 text-text-secondary opacity-70"
                       />
-                      <span class="jd-scorers__produces-prefix">
+                      <span class="font-medium">
                         {{ t("onlineEvals.job.detail.producesPrefix") }}
                       </span>
-                      <span class="jd-scorers__produces-name">{{
+                      <span class="text-text-body font-bold">{{
                         item.scoreConfigName
                       }}</span>
                       <template v-if="item.scoreConfigDataType">
-                        <span class="jd-scorers__sep">·</span>
-                        <span class="jd-scorers__produces-type">
+                        <span class="text-text-secondary opacity-50">·</span>
+                        <span class="text-text-secondary">
                           {{ item.scoreConfigDataType }}
                         </span>
                       </template>
                       <template v-if="item.scoreConfigRangeText">
-                        <span class="jd-scorers__sep">·</span>
-                        <span class="jd-scorers__produces-range">
+                        <span class="text-text-secondary opacity-50">·</span>
+                        <span class="text-text-secondary">
                           {{ item.scoreConfigRangeText }}
                         </span>
                       </template>
                     </div>
                   </div>
                   <span
-                    class="jd-scorers__cta text-[0.6875rem] font-semibold"
+                    class="shrink-0 inline-flex items-center gap-1 text-text-secondary text-2xs font-semibold group-[:hover:not(:disabled)]:text-primary-600"
                   >
-                    <span class="jd-scorers__cta-label">
+                    <span class="opacity-0 transition-opacity duration-150 group-[:hover:not(:disabled)]:opacity-100">
                       {{ t("onlineEvals.job.detail.viewScorerHint") }}
                     </span>
                     <OIcon
                       name="chevron-right"
                       size="sm"
-                      class="jd-scorers__chevron"
+                      class="shrink-0 opacity-50 transition-[opacity,transform] duration-150 group-[:hover:not(:disabled)]:opacity-100 group-[:hover:not(:disabled)]:translate-x-0.5"
                     />
                   </span>
                 </button>
@@ -264,18 +287,18 @@
           <!-- Sampling -->
           <section class="flex flex-col gap-2 px-5">
             <h4
-              class="m-0 pb-[0.375rem] inline-flex items-center gap-[0.375rem] text-[0.8125rem] font-semibold leading-[1.5] text-[var(--color-text-primary)] border-b border-b-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)]"
+              class="m-0 pb-1.5 inline-flex items-center gap-1.5 text-compact font-semibold leading-[1.5] text-text-heading border-b border-b-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)]"
             >
               {{ t("onlineEvals.job.detail.samplingSection") }}
             </h4>
-            <dl class="jd-kv">
-              <dt>{{ t("onlineEvals.job.detail.samplingModeLabel") }}</dt>
-              <dd>{{ samplingModeLabel }}</dd>
+            <dl class="grid grid-cols-[8.125rem_1fr] gap-x-3.5 gap-y-1.5 m-0">
+              <dt class="text-xs font-semibold text-text-secondary">{{ t("onlineEvals.job.detail.samplingModeLabel") }}</dt>
+              <dd class="m-0 text-compact text-text-body wrap-break-word">{{ samplingModeLabel }}</dd>
 
-              <dt v-if="samplingValue != null">
+              <dt v-if="samplingValue != null" class="text-xs font-semibold text-text-secondary">
                 {{ t("onlineEvals.job.detail.samplingValueLabel") }}
               </dt>
-              <dd v-if="samplingValue != null">
+              <dd v-if="samplingValue != null" class="m-0 text-compact text-text-body wrap-break-word">
                 {{ samplingValue }}
               </dd>
             </dl>
@@ -284,27 +307,27 @@
           <!-- Metadata -->
           <section class="flex flex-col gap-2 px-5">
             <h4
-              class="m-0 pb-[0.375rem] inline-flex items-center gap-[0.375rem] text-[0.8125rem] font-semibold leading-[1.5] text-[var(--color-text-primary)] border-b border-b-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)]"
+              class="m-0 pb-1.5 inline-flex items-center gap-1.5 text-compact font-semibold leading-[1.5] text-text-heading border-b border-b-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)]"
             >
               {{ t("onlineEvals.job.detail.metadataSection") }}
             </h4>
-            <dl class="jd-kv">
-              <dt>{{ t("onlineEvals.job.detail.versionLabel") }}</dt>
-              <dd>v{{ row.version }}</dd>
-              <dt v-if="pipelineId">
+            <dl class="grid grid-cols-[8.125rem_1fr] gap-x-3.5 gap-y-1.5 m-0">
+              <dt class="text-xs font-semibold text-text-secondary">{{ t("onlineEvals.job.detail.versionLabel") }}</dt>
+              <dd class="m-0 text-compact text-text-body wrap-break-word">v{{ row.version }}</dd>
+              <dt v-if="pipelineId" class="text-xs font-semibold text-text-secondary">
                 {{ t("onlineEvals.job.detail.pipelineLabel") }}
               </dt>
-              <dd v-if="pipelineId">{{ pipelineId }}</dd>
-              <dt v-if="createdAt">
+              <dd v-if="pipelineId" class="m-0 text-compact text-text-body wrap-break-word">{{ pipelineId }}</dd>
+              <dt v-if="createdAt" class="text-xs font-semibold text-text-secondary">
                 {{ t("onlineEvals.job.detail.createdLabel") }}
               </dt>
-              <dd v-if="createdAt">
+              <dd v-if="createdAt" class="m-0 text-compact text-text-body wrap-break-word">
                 {{ formatTimestamp(createdAt) }}
               </dd>
-              <dt v-if="updatedAt">
+              <dt v-if="updatedAt" class="text-xs font-semibold text-text-secondary">
                 {{ t("onlineEvals.job.detail.updatedLabel") }}
               </dt>
-              <dd v-if="updatedAt">
+              <dd v-if="updatedAt" class="m-0 text-compact text-text-body wrap-break-word">
                 {{ formatTimestamp(updatedAt) }}
               </dd>
             </dl>
@@ -333,7 +356,7 @@
             class="w-full"
           >
             <template #cell-timestampMs="{ row }">
-              <span class="text-[var(--color-text-secondary)]">{{
+              <span class="text-text-secondary">{{
                 relativeTime(row.timestampMs)
               }}</span>
             </template>
@@ -347,7 +370,7 @@
                 :title="row.targetSpanId"
                 >{{ row.targetSpanId }}</span
               >
-              <span v-else class="text-[var(--color-text-secondary)]">—</span>
+              <span v-else class="text-text-secondary">—</span>
             </template>
             <template #cell-targetTraceId="{ row }">
               <span
@@ -356,7 +379,7 @@
                 :title="row.targetTraceId"
                 >{{ row.targetTraceId }}</span
               >
-              <span v-else class="text-[var(--color-text-secondary)]">—</span>
+              <span v-else class="text-text-secondary">—</span>
             </template>
             <template #cell-scoreDisplay="{ row }">
               <span>{{ row.scoreDisplay }}</span>
@@ -395,7 +418,7 @@
             class="w-full"
           >
             <template #cell-timestampMs="{ row }">
-              <span class="text-[var(--color-text-secondary)]">{{
+              <span class="text-text-secondary">{{
                 relativeTime(row.timestampMs)
               }}</span>
             </template>
@@ -409,7 +432,7 @@
                 :title="row.targetSpanId"
                 >{{ row.targetSpanId }}</span
               >
-              <span v-else class="text-[var(--color-text-secondary)]">—</span>
+              <span v-else class="text-text-secondary">—</span>
             </template>
             <template #cell-targetTraceId="{ row }">
               <span
@@ -418,7 +441,7 @@
                 :title="row.targetTraceId"
                 >{{ row.targetTraceId }}</span
               >
-              <span v-else class="text-[var(--color-text-secondary)]">—</span>
+              <span v-else class="text-text-secondary">—</span>
             </template>
             <template #cell-scoreDisplay="{ row }">
               <span>{{ row.scoreDisplay }}</span>
@@ -949,301 +972,3 @@ function relativeTime(timestampMs: number): string {
   return `${day}d ago`;
 }
 </script>
-
-<style lang="scss">
-// Page layout, spacing, colors, and text styling are Tailwind utilities in the
-// template (matching SessionDetails.vue). Only cohesive blocks that rely on
-// descendant/element selectors or hover state remain here. Font-family is never
-// set per component — it inherits the global --font-sans.
-
-/* — Key/value description lists — */
-.jd-kv {
-  display: grid;
-  grid-template-columns: 8.125rem 1fr;
-  gap: 0.375rem 0.875rem;
-  margin: 0;
-}
-
-// Field labels follow the alert form convention (AddAlert.vue's
-// `.alert-v3-inline-label`): 12px / 600, in the muted-secondary color so the
-// label reads as a strong caption while the value below stays primary.
-.jd-kv dt {
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--color-text-secondary, var(--o2-text-secondary));
-}
-
-.jd-kv dd {
-  margin: 0;
-  font-size: 0.8125rem;
-  color: var(--color-text-primary, currentColor);
-  word-break: break-word;
-}
-
-// Filter code block — mirrors the Alert History condition view (rounded,
-// bordered, neutral surface + header bar) so condition rendering is consistent
-// across drawers.
-.jd-codeblock {
-  border: 0.0625rem solid var(--color-dialog-header-border, var(--o2-border));
-  border-radius: 0.5rem;
-  overflow: hidden;
-  background: color-mix(
-    in srgb,
-    var(--color-text-secondary) 4%,
-    var(--color-card-bg)
-  );
-}
-
-.jd-codeblock__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.375rem 0.625rem;
-  border-bottom: 0.0625rem solid var(--color-dialog-header-border, var(--o2-border));
-  background: color-mix(
-    in srgb,
-    var(--color-text-secondary) 6%,
-    var(--color-card-bg)
-  );
-}
-
-.jd-codeblock__label {
-  font-size: 0.6875rem;
-  font-weight: 500;
-  color: var(--color-text-secondary, var(--o2-text-secondary));
-}
-
-.jd-codeblock__content {
-  margin: 0;
-  padding: 0.625rem 0.875rem;
-  font-family: var(--font-mono);
-  font-size: 0.8125rem;
-  line-height: 1.6;
-  color: var(--color-text-primary, currentColor);
-  white-space: pre-wrap;
-  overflow-x: auto;
-  // Hard cap the filter condition height; longer conditions scroll.
-  max-height: 12.5rem;
-  overflow-y: auto;
-}
-
-.jd-scorers {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.625rem;
-  // Show ~3 scorer cards (~65px each + 10px gap); the rest scroll. The small
-  // extra lets the 4th card peek as a scroll affordance. padding-right keeps
-  // the scrollbar off the card edges.
-  max-height: 25rem;
-  overflow-y: auto;
-  padding-right: 0.25rem;
-  padding-top:0.625rem
-}
-
-.jd-scorers__card {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 0.875rem;
-  padding: 0.875rem 1rem;
-  background: var(--color-card-bg);
-  border: 0.0625rem solid
-    color-mix(in srgb, var(--color-text-secondary) 16%, transparent);
-  border-radius: 0.5rem;
-  text-align: left;
-  cursor: pointer;
-  transition:
-    border-color 0.15s,
-    background 0.15s,
-    box-shadow 0.15s,
-    transform 0.15s;
-}
-
-.jd-scorers__card:hover:not(:disabled) {
-  border-color: color-mix(
-    in srgb,
-    var(--color-primary-600, #3f7994) 45%,
-    transparent
-  );
-  background: color-mix(
-    in srgb,
-    var(--color-primary-600, #3f7994) 4%,
-    var(--color-card-bg)
-  );
-  box-shadow: 0 0.0625rem 0.1875rem
-    color-mix(in srgb, var(--color-primary-600, #3f7994) 12%, transparent);
-  transform: translateY(-0.0625rem);
-}
-
-.jd-scorers__card:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
-
-.jd-scorers__icon {
-  flex-shrink: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 2.125rem;
-  height: 2.125rem;
-  border-radius: 0.5rem;
-  background: color-mix(in srgb, #6b76e3 14%, transparent);
-  color: #4f5bcf;
-}
-
-.jd-scorers__icon--remote {
-  background: color-mix(in srgb, #b25400 14%, transparent);
-  color: #b25400;
-}
-
-.jd-scorers__icon--unknown {
-  background: color-mix(in srgb, var(--color-text-secondary) 14%, transparent);
-  color: var(--color-text-secondary, var(--o2-text-secondary));
-}
-
-.jd-scorers__main {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.3125rem;
-}
-
-.jd-scorers__row {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-}
-
-.jd-scorers__name {
-  font-weight: 700;
-  font-size: 0.875rem;
-  color: var(--color-text-primary, currentColor);
-}
-
-.jd-scorers__type {
-  display: inline-flex;
-  padding: 0.0625rem 0.4375rem;
-  border-radius: 0.1875rem;
-  background: color-mix(in srgb, #6b76e3 14%, transparent);
-  color: #4f5bcf;
-}
-
-.jd-scorers__type--remote {
-  background: color-mix(in srgb, #b25400 14%, transparent);
-  color: #b25400;
-}
-
-.jd-scorers__version {
-  font-size: 0.6875rem;
-  color: var(--color-text-secondary, var(--o2-text-secondary));
-}
-
-.jd-scorers__produces {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  font-size: 0.75rem;
-  color: var(--color-text-secondary, var(--o2-text-secondary));
-  flex-wrap: wrap;
-}
-
-.jd-scorers__produces-icon {
-  flex-shrink: 0;
-  color: var(--color-text-secondary, var(--o2-text-secondary));
-  opacity: 0.7;
-}
-
-.jd-scorers__produces-prefix {
-  font-weight: 500;
-}
-
-.jd-scorers__produces-name {
-  color: var(--color-text-primary, currentColor);
-  font-weight: 700;
-}
-
-.jd-scorers__produces-type,
-.jd-scorers__produces-range {
-  color: var(--color-text-secondary, var(--o2-text-secondary));
-}
-
-.jd-scorers__sep {
-  color: var(--color-text-secondary, var(--o2-text-secondary));
-  opacity: 0.5;
-}
-
-.jd-scorers__cta {
-  flex-shrink: 0;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  color: var(--color-text-secondary, var(--o2-text-secondary));
-}
-
-.jd-scorers__cta-label {
-  opacity: 0;
-  transition: opacity 0.15s;
-}
-
-.jd-scorers__card:hover:not(:disabled) .jd-scorers__cta {
-  color: var(--color-primary-600, #3f7994);
-}
-
-.jd-scorers__card:hover:not(:disabled) .jd-scorers__cta-label {
-  opacity: 1;
-}
-
-.jd-scorers__chevron {
-  flex-shrink: 0;
-  opacity: 0.5;
-  transition:
-    opacity 0.15s,
-    transform 0.15s;
-}
-
-.jd-scorers__card:hover:not(:disabled) .jd-scorers__chevron {
-  opacity: 1;
-  transform: translateX(0.125rem);
-}
-
-/* — Runs / Failures status cell — */
-.jd-status-cell {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.3125rem;
-  color: var(--color-text-secondary, var(--o2-text-secondary));
-}
-
-.jd-status-cell__dot {
-  width: 0.375rem;
-  height: 0.375rem;
-  border-radius: 50%;
-  background: var(--color-text-secondary, var(--o2-text-secondary));
-}
-
-.jd-status-cell--success {
-  color: var(--color-status-success-text);
-}
-.jd-status-cell--success .jd-status-cell__dot {
-  background: var(--color-status-success-text);
-}
-
-.jd-status-cell--error,
-.jd-status-cell--timeout {
-  color: var(--color-status-error-text);
-}
-.jd-status-cell--error .jd-status-cell__dot,
-.jd-status-cell--timeout .jd-status-cell__dot {
-  background: var(--color-status-error-text);
-}
-
-.jd-status-cell--skipped .jd-status-cell__dot {
-  background: color-mix(in srgb, var(--color-text-secondary) 60%, transparent);
-}
-</style>
diff --git a/web/src/enterprise/components/onlineEvals/forms/JobFormPage.schema.ts b/web/src/enterprise/components/onlineEvals/forms/JobFormPage.schema.ts
index dc108a5c84..d7aada9e6c 100644
--- a/web/src/enterprise/components/onlineEvals/forms/JobFormPage.schema.ts
+++ b/web/src/enterprise/components/onlineEvals/forms/JobFormPage.schema.ts
@@ -30,13 +30,10 @@ export const makeJobFormSchema = (t: (_key: string) => string) =>
       name: requiredText(t("onlineEvals.job.validation.nameRequired")),
       stream: requiredText(t("onlineEvals.job.validation.streamRequired")),
       description: z.string().optional().default(""),
-      // Internal metadata (not a rendered control) — kept in the form per
-      // note 3 (non-validated → optional).
+      // Internal metadata (not a rendered control), non-validated.
       streamType: z.string().optional().default("traces"),
-      // Scorer selection is NOT validated here: the composite JobScorerPicker
-      // has no inline error slot, so the "≥1 scorer" rule is enforced as a toast
-      // guard in the component's onSubmit (see JobFormPage.vue). Bridged from the
-      // picker via setFieldValue.
+      // Not validated here: JobScorerPicker has no inline error slot, so the
+      // "≥1 scorer" rule is enforced as a toast guard in the component's onSubmit.
       scorerIds: z.array(z.string()),
       samplingMode: z.string().default("rate"),
       samplingValue: z.string().optional().default(""),
diff --git a/web/src/enterprise/components/onlineEvals/forms/JobFormPage.spec.ts b/web/src/enterprise/components/onlineEvals/forms/JobFormPage.spec.ts
index b82f0bb8fd..5ed3170bf6 100644
--- a/web/src/enterprise/components/onlineEvals/forms/JobFormPage.spec.ts
+++ b/web/src/enterprise/components/onlineEvals/forms/JobFormPage.spec.ts
@@ -53,7 +53,7 @@ function createWrapper(props: Record<string, any> = {}) {
     global: {
       plugins: [store, i18n],
       stubs: {
-        AppPageHeader: true,
+        OPageHeader: true,
         JobScorerPicker: true,
         JobFilterBuilder: true,
         JobInputMapping: true,
diff --git a/web/src/enterprise/components/onlineEvals/forms/JobFormPage.vue b/web/src/enterprise/components/onlineEvals/forms/JobFormPage.vue
index 644cd34d6e..beb35b857b 100644
--- a/web/src/enterprise/components/onlineEvals/forms/JobFormPage.vue
+++ b/web/src/enterprise/components/onlineEvals/forms/JobFormPage.vue
@@ -4,14 +4,13 @@
     :form="form"
     v-slot="{ isSubmitting }"
   >
-    <AppPageHeader
+    <OPageLayout
       :back="{
         label: t('onlineEvals.job.backTo'),
         onClick: () => $emit('cancel'),
         dataTest: 'job-form-back-btn',
       }"
-      class="px-3 border-b border-border-default"
-      style="flex-shrink: 0"
+      bleed
     >
       <template #title>
         <span data-test="job-form-title">
@@ -30,22 +29,21 @@
           @click="$emit('cancel')"
         />
       </template>
-    </AppPageHeader>
 
-    <div class="job-form__body flex-1 min-h-0 overflow-hidden flex gap-2">
-      <div class="job-form__main flex-[6.5] min-w-0 min-h-0 overflow-auto flex flex-col gap-2 p-2">
+    <div class="job-form__body flex-1 min-h-0 overflow-hidden flex gap-2 max-[68.75rem]:flex-col">
+      <div class="job-form__main flex-[6.5] min-w-0 min-h-0 overflow-auto flex flex-col gap-2 p-2 max-[68.75rem]:flex-auto">
         <!-- Target -->
-        <section class="card-container border border-(--color-dialog-header-border,var(--o2-border)) rounded-md overflow-hidden shrink-0">
-          <div class="flex items-center py-[10px] px-3 border-b border-(--color-border-default,var(--o2-border))">
-            <div class="w-[3px] h-4 rounded-[2px] mr-2 shrink-0 bg-(--q-primary)" />
-            <span class="text-[13px] font-semibold tracking-[0.01em] text-(--color-text-primary,currentColor)">{{ t("onlineEvals.job.targetSection") }}</span>
+        <section class="bg-card-glass-bg border border-(--color-dialog-header-border,var(--color-border-default)) rounded-default overflow-hidden shrink-0">
+          <div class="flex items-center py-2.5 px-3 border-b border-(--color-border-default,var(--color-border-default))">
+            <div class="w-0.75 h-4 rounded-default mr-2 shrink-0 bg-theme-accent" />
+            <span class="text-compact font-semibold tracking-[0.01em] text-(--color-text-heading,currentColor)">{{ t("onlineEvals.job.targetSection") }}</span>
           </div>
           <div class="flex flex-col gap-3 py-3.5 px-4">
           <div class="job-field">
-            <label class="flex items-center text-xs font-semibold text-(--color-text-primary,currentColor) mb-1">
+            <label class="flex items-center text-xs font-semibold text-(--color-text-heading,currentColor) mb-1">
               {{ t("onlineEvals.job.nameLabel") }}
-              <span class="text-(--color-status-error-text) ml-0.5">*</span>
-              <OIcon v-if="mode === 'edit'" name="lock" size="xs" class="ml-1.5 text-(--color-text-secondary,var(--o2-text-secondary))" />
+              <span class="text-status-error-text ml-0.5">*</span>
+              <OIcon v-if="mode === 'edit'" name="lock" size="xs" class="ml-1.5 text-(--color-text-secondary,var(--color-text-secondary))" />
             </label>
             <OFormInput
               name="name"
@@ -57,10 +55,10 @@
           </div>
 
           <div class="job-field">
-            <label class="flex items-center text-xs font-semibold text-(--color-text-primary,currentColor) mb-1">
+            <label class="flex items-center text-xs font-semibold text-(--color-text-heading,currentColor) mb-1">
               {{ t("onlineEvals.job.streamLabel") }}
-              <span class="text-(--color-status-error-text) ml-0.5">*</span>
-              <OIcon v-if="mode === 'edit'" name="lock" size="xs" class="ml-1.5 text-(--color-text-secondary,var(--o2-text-secondary))" />
+              <span class="text-status-error-text ml-0.5">*</span>
+              <OIcon v-if="mode === 'edit'" name="lock" size="xs" class="ml-1.5 text-(--color-text-secondary,var(--color-text-secondary))" />
             </label>
             <OFormSelect
               name="stream"
@@ -86,10 +84,10 @@
         </section>
 
         <!-- Scorers + Filter + Mapping -->
-        <section class="card-container border border-(--color-dialog-header-border,var(--o2-border)) rounded-md overflow-hidden shrink-0">
-          <div class="flex items-center py-[10px] px-3 border-b border-(--color-border-default,var(--o2-border))">
-            <div class="w-[3px] h-4 rounded-[2px] mr-2 shrink-0 bg-(--q-primary)" />
-            <span class="text-[13px] font-semibold tracking-[0.01em] text-(--color-text-primary,currentColor)">{{ t("onlineEvals.job.scorersSection") }}</span>
+        <section class="bg-card-glass-bg border border-(--color-dialog-header-border,var(--color-border-default)) rounded-default overflow-hidden shrink-0">
+          <div class="flex items-center py-2.5 px-3 border-b border-(--color-border-default,var(--color-border-default))">
+            <div class="w-0.75 h-4 rounded-default mr-2 shrink-0 bg-theme-accent" />
+            <span class="text-compact font-semibold tracking-[0.01em] text-(--color-text-heading,currentColor)">{{ t("onlineEvals.job.scorersSection") }}</span>
           </div>
           <div class="flex flex-col gap-3 py-3.5 px-4">
           <JobScorerPicker
@@ -109,13 +107,13 @@
         </section>
 
         <!-- Sampling -->
-        <section class="card-container border border-(--color-dialog-header-border,var(--o2-border)) rounded-md overflow-hidden shrink-0">
-          <div class="flex items-center py-[10px] px-3 border-b border-(--color-border-default,var(--o2-border))">
-            <div class="w-[3px] h-4 rounded-[2px] mr-2 shrink-0 bg-(--q-primary)" />
-            <span class="text-[13px] font-semibold tracking-[0.01em] text-(--color-text-primary,currentColor)">{{ t("onlineEvals.job.stepper.sampling") }}</span>
+        <section class="bg-card-glass-bg border border-(--color-dialog-header-border,var(--color-border-default)) rounded-default overflow-hidden shrink-0">
+          <div class="flex items-center py-2.5 px-3 border-b border-(--color-border-default,var(--color-border-default))">
+            <div class="w-0.75 h-4 rounded-default mr-2 shrink-0 bg-theme-accent" />
+            <span class="text-compact font-semibold tracking-[0.01em] text-(--color-text-heading,currentColor)">{{ t("onlineEvals.job.stepper.sampling") }}</span>
           </div>
           <div class="flex flex-col gap-3 py-3.5 px-4">
-          <div class="job-field-row grid grid-cols-2 max-[1100px]:grid-cols-1 gap-[14px]">
+          <div class="job-field-row grid grid-cols-2 max-[68.75rem]:grid-cols-1 gap-3.5">
             <div class="job-field">
               <label class="job-field__label">{{ t("onlineEvals.job.samplingModeLabel") }}</label>
               <OFormSelect
@@ -124,13 +122,13 @@
                 size="md"
                 data-test="job-form-sampling-mode-select"
               />
-              <div class="job-field__help text-[11.5px] text-(--color-text-secondary,var(--o2-text-secondary)) mt-1">{{ t("onlineEvals.job.samplingHelp") }}</div>
+              <div class="job-field__help text-2xs text-(--color-text-secondary,var(--color-text-secondary)) mt-1">{{ t("onlineEvals.job.samplingHelp") }}</div>
             </div>
 
             <div class="job-field">
-              <label class="flex items-center text-xs font-semibold text-(--color-text-primary,currentColor) mb-1">
+              <label class="flex items-center text-xs font-semibold text-(--color-text-heading,currentColor) mb-1">
                 {{ t("onlineEvals.job.samplingValueLabel") }}
-                <span v-if="formValues.samplingMode !== 'all'" class="text-(--color-status-error-text) ml-0.5">*</span>
+                <span v-if="formValues.samplingMode !== 'all'" class="text-status-error-text ml-0.5">*</span>
               </label>
               <OFormInput
                 name="samplingValue"
@@ -159,7 +157,7 @@
       />
     </div>
 
-    <footer class="sticky bottom-0 flex items-center justify-end gap-2 px-5.5 py-3 bg-(--color-surface-base) rounded-md shadow-[0_0_0.313rem_0.063rem_var(--o2-hover-shadow)] shrink-0 z-1">
+    <footer class="sticky bottom-0 flex items-center justify-end gap-2 px-5.5 py-3 bg-surface-base border-t border-border-default shrink-0 z-1">
       <OButton
         data-test="job-form-cancel-btn"
         type="button"
@@ -208,6 +206,7 @@
         {{ t("onlineEvals.buttons.save") }}
       </OButton>
     </footer>
+    </OPageLayout>
   </OForm>
 </template>
 
@@ -221,7 +220,7 @@ import { useOForm } from "@/lib/forms/Form/useOForm";
 import OFormInput from "@/lib/forms/Input/OFormInput.vue";
 import OFormTextarea from "@/lib/forms/Input/OFormTextarea.vue";
 import OFormSelect from "@/lib/forms/Select/OFormSelect.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import { toast } from "@/lib/feedback/Toast/useToast";
 import useStreams from "@/composables/useStreams";
 import onlineEvalsService, {
@@ -274,9 +273,9 @@ const { t } = useI18n();
 // mounted fresh per create/edit action, so building it once is safe.
 const jobFormSchema = makeJobFormSchema(t);
 
-// OWNER pattern (Rule ③): this component owns <OForm>, so it creates the form
-// with useOForm and reads it reactively via form.useStore — a SINGLE source of
-// truth, NO mirror ref. `formValues` drives the parent-side reads a parent can't
+// This component owns <OForm>, so it creates the form with useOForm and reads
+// it reactively via form.useStore (single source of truth, no mirror ref).
+// `formValues` drives the parent-side reads a parent can't
 // get from form context: JobPreviewPanel (name/streamType), the stream-option
 // list (stream), selectedScorers + the mapping sync (scorerIds), and the
 // sampling `v-if`/disabled (samplingMode). Writes go through form.setFieldValue
@@ -431,8 +430,7 @@ function syncMappings() {
 async function onSubmit(value: JobForm) {
   if (!props.orgId) return;
   // Scorer selection is validated here, not in the schema: surface the empty
-  // case as a toast (matching the pre-migration guard) since JobScorerPicker
-  // renders no inline error.
+  // case as a toast since JobScorerPicker renders no inline error.
   if (!value.scorerIds.length) {
     showError(new Error(t("onlineEvals.job.selectAtLeastOne")), t("onlineEvals.job.saveError"));
     return;
@@ -489,28 +487,16 @@ async function onSubmit(value: JobForm) {
 }
 </script>
 
-<style lang="scss">
-// Layout, spacing, colors, and text styling are Tailwind utilities in the
-// template. Only descendant/`:deep` selectors (targeting child-component
-// internals) and the responsive @media block remain here.
+<style scoped lang="scss">
+/* keep(lib-override:o2-forms): caps the height of the native <textarea> rendered
+   inside OFormTextarea — a child-component element this component can only reach
+   through :deep(). */
 .job-form__main :deep(textarea) {
-  max-height: 200px;
+  max-height: 12.5rem;
   overflow-y: auto;
 }
 
 .job-form__main .job-field--desc :deep(textarea) {
-  max-height: 120px;
-}
-
-@media (max-width: 1100px) {
-  .job-form__body {
-    flex-direction: column;
-  }
-  .job-form__main {
-    flex: 1 1 auto;
-  }
-  .job-field-row {
-    grid-template-columns: 1fr;
-  }
+  max-height: 7.5rem;
 }
 </style>
diff --git a/web/src/enterprise/components/onlineEvals/forms/KpiCardsSkeleton.vue b/web/src/enterprise/components/onlineEvals/forms/KpiCardsSkeleton.vue
index 06cef5b1bc..1ef2a6fed1 100644
--- a/web/src/enterprise/components/onlineEvals/forms/KpiCardsSkeleton.vue
+++ b/web/src/enterprise/components/onlineEvals/forms/KpiCardsSkeleton.vue
@@ -2,31 +2,22 @@
      drawers. Renders `count` card-shaped tiles (multi-root v-for) so they drop
      straight into the parent's KPI grid as direct children, keeping the same
      columns + gap. Card chrome mirrors SessionDetails.vue's `.kpi-card` so the
-     skeleton matches the real cards it stands in for. Shimmer comes from the
-     shared SkeletonBox (theme-aware), same approach as LLMInsightsSkeleton. -->
+     skeleton matches the real cards it stands in for. Shimmer comes from
+     OSkeleton (theme-aware), the single skeleton primitive. -->
 <template>
   <div
     v-for="n in count"
     :key="n"
-    class="kpi-card-skeleton rounded-lg flex flex-col px-[0.875rem] pt-[0.625rem] pb-[0.625rem] gap-[0.5rem]"
+    class="kpi-card-skeleton rounded-default flex flex-col px-3.5 pt-2.5 pb-2.5 gap-2 bg-surface-base border border-border-default"
     data-test="kpi-cards-skeleton"
   >
-    <SkeletonBox width="55%" height="12px" rounded />
-    <SkeletonBox width="45%" height="22px" rounded />
+    <OSkeleton type="text" class="w-[55%] h-3" />
+    <OSkeleton type="text" class="w-[45%] h-5.5" />
   </div>
 </template>
 
 <script setup lang="ts">
-import SkeletonBox from "@/components/shared/SkeletonBox.vue";
+import OSkeleton from "@/lib/feedback/Skeleton/OSkeleton.vue";
 
 withDefaults(defineProps<{ count?: number }>(), { count: 4 });
 </script>
-
-<style lang="scss" scoped>
-// Same chrome as the real `.kpi-card` (SessionDetails.vue) — scoped styles
-// don't pierce into child components, so the skeleton carries its own copy.
-.kpi-card-skeleton {
-  background: var(--color-surface-base);
-  border: 1px solid var(--color-border-default);
-}
-</style>
diff --git a/web/src/enterprise/components/onlineEvals/forms/ProviderFormPage.schema.ts b/web/src/enterprise/components/onlineEvals/forms/ProviderFormPage.schema.ts
index b2697b084d..ceecaf98de 100644
--- a/web/src/enterprise/components/onlineEvals/forms/ProviderFormPage.schema.ts
+++ b/web/src/enterprise/components/onlineEvals/forms/ProviderFormPage.schema.ts
@@ -1,25 +1,21 @@
 // Copyright 2026 OpenObserve Inc.
 //
 // Validation schema for ProviderFormPage.vue (online-evals LLM provider
-// create/edit page). This native-`<form>` page predates the Quasar era and
-// shipped with `*` markers but NO client-side validation — the migration to
-// OForm + Zod ADDS the missing validation (see online-evals-migration.md row 67).
+// create/edit page).
 //
 // Built via a factory so messages can stay i18n-driven (pass useI18n's `t`).
-// Validation TIMING is owned by OForm (submit-then-change via revalidateLogic);
-// this file only describes WHAT is valid.
+// Validation TIMING is owned by OForm; this file only describes WHAT is valid.
 //
-// apiKey is intentionally NOT validated client-side — this matches the
-// pre-migration form, which showed a cosmetic `*` on create but never enforced
-// it. Whether a key is required depends on the provider type: self-hosted
-// providers (Ollama, vLLM) run without one, while cloud providers need it. That
-// per-type rule is owned by the enterprise backend (e.g. it rejects an empty
-// key for `openai` with "No API key found in auth_config"), so we keep the
-// client permissive rather than duplicate — and risk drifting from — that list.
+// apiKey is intentionally NOT validated client-side. Whether a key is required
+// depends on the provider type: self-hosted providers (Ollama, vLLM) run without
+// one, while cloud providers need it. That per-type rule is owned by the
+// enterprise backend (e.g. it rejects an empty key for `openai` with "No API key
+// found in auth_config"), so we keep the client permissive rather than duplicate
+// — and risk drifting from — that list.
 //
-// Note: the @submit payload carries the RAW field values (strings) — the schema
-// validates them but does not transform them, so the component trims/splits at
-// save time exactly as the old `v-model.trim` did.
+// The @submit payload carries the RAW field values (strings) — the schema
+// validates them but does not transform them; the component trims/splits at
+// save time.
 
 import { z } from "zod";
 
diff --git a/web/src/enterprise/components/onlineEvals/forms/ProviderFormPage.vue b/web/src/enterprise/components/onlineEvals/forms/ProviderFormPage.vue
index 241fdabfba..070482c883 100644
--- a/web/src/enterprise/components/onlineEvals/forms/ProviderFormPage.vue
+++ b/web/src/enterprise/components/onlineEvals/forms/ProviderFormPage.vue
@@ -4,15 +4,14 @@
     :form="form"
     v-slot="{ isSubmitting }"
   >
-    <AppPageHeader
+    <OPageLayout
       :subtitle="t('onlineEvals.provider.subtitle')"
       :back="{
         label: t('onlineEvals.provider.backTo'),
         onClick: () => $emit('cancel'),
         dataTest: 'provider-form-back-btn',
       }"
-      class="px-3 border-b border-border-default"
-      style="flex-shrink: 0"
+      scroll
     >
       <template #title>
         <span data-test="provider-form-title">
@@ -31,20 +30,19 @@
           @click="$emit('cancel')"
         />
       </template>
-    </AppPageHeader>
 
-    <div class="flex-1 min-h-0 overflow-auto px-6 py-4.5 [&_textarea]:max-h-[220px] [&_textarea]:overflow-y-auto [&_textarea]:font-mono">
+    <div class="py-4.5 [&_textarea]:max-h-55 [&_textarea]:overflow-y-auto [&_textarea]:font-mono">
       <section class="mb-6">
         <div class="flex items-center gap-2.5 pb-2.5 border-b border-dialog-header-border mb-3">
-          <span class="inline-flex items-center justify-center w-[22px] h-[22px] rounded-full bg-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)] text-text-secondary font-bold text-[11px] font-[ui-monospace,SFMono-Regular,Menlo,monospace]">01</span>
-          <div class="m-0 text-sm font-semibold text-(--color-text-primary)">{{ t("onlineEvals.provider.sectionTitle") }}</div>
+          <span class="inline-flex items-center justify-center w-5.5 h-5.5 rounded-full bg-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)] text-text-secondary font-bold text-2xs font-mono">01</span>
+          <div class="m-0 text-sm font-semibold text-text-heading">{{ t("onlineEvals.provider.sectionTitle") }}</div>
         </div>
 
-        <div class="provider-field-row grid grid-cols-2 gap-[14px]">
+        <div class="grid grid-cols-2 max-[56.25rem]:grid-cols-1 gap-3.5">
           <div class="mb-3">
-            <div class="flex items-center text-xs font-semibold text-(--color-text-primary) mb-1">
+            <div class="flex items-center text-xs font-semibold text-text-heading mb-1">
               {{ t("onlineEvals.provider.nameLabel") }}
-              <span class="text-(--color-status-error-text) ml-0.5">*</span>
+              <span class="text-status-error-text ml-0.5">*</span>
               <OIcon v-if="mode === 'edit'" name="lock" size="xs" class="ml-1.5 text-text-secondary" />
             </div>
             <OFormInput
@@ -54,15 +52,15 @@
               :disabled="mode === 'edit'"
               data-test="provider-form-name-input"
             />
-            <div v-if="mode === 'edit'" class="text-[11.5px] text-text-secondary mt-1">
+            <div v-if="mode === 'edit'" class="text-2xs text-text-secondary mt-1">
               {{ t("onlineEvals.provider.cannotRename") }}
             </div>
           </div>
 
           <div class="mb-3">
-            <div class="flex items-center text-xs font-semibold text-(--color-text-primary) mb-1">
+            <div class="flex items-center text-xs font-semibold text-text-heading mb-1">
               {{ t("onlineEvals.provider.typeLabel") }}
-              <span class="text-(--color-status-error-text) ml-0.5">*</span>
+              <span class="text-status-error-text ml-0.5">*</span>
               <OIcon v-if="mode === 'edit'" name="lock" size="xs" class="ml-1.5 text-text-secondary" />
             </div>
             <OFormSelect
@@ -76,7 +74,7 @@
         </div>
 
         <div class="mb-3">
-          <div class="flex items-center text-xs font-semibold text-(--color-text-primary) mb-1">{{ t("onlineEvals.provider.endpointLabel") }}</div>
+          <div class="flex items-center text-xs font-semibold text-text-heading mb-1">{{ t("onlineEvals.provider.endpointLabel") }}</div>
           <OFormInput
             name="endpoint"
             :placeholder="endpointPlaceholder"
@@ -85,11 +83,11 @@
           />
         </div>
 
-        <div class="provider-field-row grid grid-cols-2 gap-[14px]">
+        <div class="grid grid-cols-2 max-[56.25rem]:grid-cols-1 gap-3.5">
           <div class="mb-3">
-            <div class="flex items-center text-xs font-semibold text-(--color-text-primary) mb-1">
+            <div class="flex items-center text-xs font-semibold text-text-heading mb-1">
               {{ t("onlineEvals.provider.defaultModelLabel") }}
-              <span class="text-(--color-status-error-text) ml-0.5">*</span>
+              <span class="text-status-error-text ml-0.5">*</span>
             </div>
             <OFormInput
               name="defaultModel"
@@ -100,14 +98,14 @@
           </div>
 
           <div class="mb-3">
-            <div class="flex items-center text-xs font-semibold text-(--color-text-primary) mb-1">{{ t("onlineEvals.provider.availableModelsLabel") }}</div>
+            <div class="flex items-center text-xs font-semibold text-text-heading mb-1">{{ t("onlineEvals.provider.availableModelsLabel") }}</div>
             <OFormInput
               name="availableModels"
               :placeholder="t('onlineEvals.provider.availableModelsPlaceholder')"
               size="sm"
               data-test="provider-form-available-models-input"
             />
-            <div class="text-[11.5px] text-text-secondary mt-1">{{ t("onlineEvals.provider.availableModelsHelp") }}</div>
+            <div class="text-2xs text-text-secondary mt-1">{{ t("onlineEvals.provider.availableModelsHelp") }}</div>
           </div>
         </div>
 
@@ -115,19 +113,19 @@
 
       <section class="mb-6">
         <div class="flex items-center gap-2.5 pb-2.5 border-b border-dialog-header-border mb-3">
-          <span class="inline-flex items-center justify-center w-[22px] h-[22px] rounded-full bg-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)] text-text-secondary font-bold text-[11px] font-[ui-monospace,SFMono-Regular,Menlo,monospace]">02</span>
-          <div class="m-0 text-sm font-semibold text-(--color-text-primary)">{{ t("onlineEvals.provider.authSection") }}</div>
+          <span class="inline-flex items-center justify-center w-5.5 h-5.5 rounded-full bg-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)] text-text-secondary font-bold text-2xs font-mono">02</span>
+          <div class="m-0 text-sm font-semibold text-text-heading">{{ t("onlineEvals.provider.authSection") }}</div>
         </div>
 
-        <div v-if="mode === 'edit'" class="provider-callout flex gap-2 items-start px-3 py-2 mb-3 bg-[color-mix(in_srgb,var(--color-status-info-text)_12%,transparent)] border border-[color-mix(in_srgb,var(--color-status-info-text)_30%,transparent)] rounded-md text-[11.5px] text-(--color-text-primary) leading-[1.4]">
-          <OIcon name="lock" size="xs" class="shrink-0 mt-px text-[var(--color-status-info-text)]" />
+        <div v-if="mode === 'edit'" class="provider-callout flex gap-2 items-start px-3 py-2 mb-3 bg-[color-mix(in_srgb,var(--color-status-info-text)_12%,transparent)] border border-[color-mix(in_srgb,var(--color-status-info-text)_30%,transparent)] rounded-default text-2xs text-text-secondary leading-[1.4]">
+          <OIcon name="lock" size="xs" class="shrink-0 mt-px text-status-info-text" />
           <span>{{ t("onlineEvals.provider.authEditNote") }}</span>
         </div>
 
         <div class="mb-3">
-          <div class="flex items-center text-xs font-semibold text-(--color-text-primary) mb-1">
+          <div class="flex items-center text-xs font-semibold text-text-heading mb-1">
             {{ t("onlineEvals.provider.apiKeyLabel") }}
-            <span v-if="mode === 'create'" class="text-(--color-status-error-text) ml-0.5">*</span>
+            <span v-if="mode === 'create'" class="text-status-error-text ml-0.5">*</span>
           </div>
           <OFormInput
             name="apiKey"
@@ -136,7 +134,7 @@
             :placeholder="t('onlineEvals.provider.apiKeyPlaceholder')"
             data-test="provider-form-api-key-input"
           />
-          <div class="text-[11.5px] text-text-secondary mt-1">{{ t("onlineEvals.provider.apiKeyHelp") }}</div>
+          <div class="text-2xs text-text-secondary mt-1">{{ t("onlineEvals.provider.apiKeyHelp") }}</div>
         </div>
       </section>
     </div>
@@ -162,6 +160,7 @@
         {{ mode === "create" ? t("onlineEvals.buttons.create") : t("onlineEvals.buttons.save") }}
       </OButton>
     </footer>
+    </OPageLayout>
   </OForm>
 </template>
 
@@ -174,7 +173,7 @@ import OForm from "@/lib/forms/Form/OForm.vue";
 import { useOForm } from "@/lib/forms/Form/useOForm";
 import OFormInput from "@/lib/forms/Input/OFormInput.vue";
 import OFormSelect from "@/lib/forms/Select/OFormSelect.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import { toast } from "@/lib/feedback/Toast/useToast";
 import onlineEvalsService, { type Provider } from "@/services/online-evals.service";
 import {
@@ -202,7 +201,7 @@ const emit = defineEmits<{
 const { t } = useI18n();
 
 // Co-located Zod schema (factory keeps messages i18n-driven). apiKey is optional
-// in both modes, so the schema no longer branches on `mode`.
+// in both modes.
 const providerFormSchema = makeProviderFormSchema(t);
 
 // Headless OForm instance (matches ScorerFormPage): created here so the endpoint
@@ -271,9 +270,9 @@ function initForm(row: Provider | null): ProviderForm {
 
 // @submit handler — OForm only calls this once the whole schema passes, so the
 // schema (not a manual guard) gates the save. `value` carries the RAW field
-// values (the schema validates but does not transform), so trim/split here just
-// as the old `v-model.trim` did. OForm awaits this promise → the Save button
-// spinner spans the whole save (no manual `isSaving` ref).
+// values (the schema validates but does not transform), so trim/split here.
+// OForm awaits this promise → the Save button spinner spans the whole save
+// (no manual `isSaving` ref).
 async function save(value: ProviderForm) {
   if (!props.orgId) return;
   try {
@@ -285,11 +284,10 @@ async function save(value: ProviderForm) {
       availableModels: splitCsv(value.availableModels),
       // Backend expects an authConfig object; the form only collects an
       // API key, which is the only auth secret the supported providers
-      // need today. Wrap it as { api_key: <value> }. Trim to match the
-      // pre-migration `v-model.trim` (a pasted key with trailing
-      // whitespace/newline must not be sent verbatim).
+      // need today. Wrap it as { api_key: <value> }. Trim it — a pasted key
+      // with trailing whitespace/newline must not be sent verbatim.
       authConfig: { api_key: value.apiKey.trim() },
-      // `isDefault` is no longer surfaced in the form. Always send false;
+      // `isDefault` is not surfaced in the form. Always send false;
       // backend defaults to non-default and the user manages default-ness
       // (if ever needed) outside this create/edit flow.
       isDefault: false,
@@ -310,11 +308,3 @@ async function save(value: ProviderForm) {
   }
 }
 </script>
-
-<style>
-@media (max-width: 900px) {
-  .provider-field-row {
-    grid-template-columns: 1fr;
-  }
-}
-</style>
diff --git a/web/src/enterprise/components/onlineEvals/forms/ScoreConfigDetail.vue b/web/src/enterprise/components/onlineEvals/forms/ScoreConfigDetail.vue
index 7ade29c967..1060e9da5b 100644
--- a/web/src/enterprise/components/onlineEvals/forms/ScoreConfigDetail.vue
+++ b/web/src/enterprise/components/onlineEvals/forms/ScoreConfigDetail.vue
@@ -1,57 +1,17 @@
 <template>
-  <div
-    class="scd-scrim fixed inset-0 bg-[rgba(0,0,0,0.32)] z-[1010] flex justify-end [animation:scd-fade_0.18s_ease-out]"
-    role="dialog"
-    aria-modal="true"
-    @click.self="$emit('close')"
+  <ODrawer
+    bleed
+    :open="open"
+    side="right"
+    size="lg"
+    :title="row?.name"
+    title-data-test="score-config-detail-name-badge"
+    :sub-title="t('onlineEvals.scoreConfig.detail.eyebrow')"
+    data-test="score-config-detail"
+    @update:open="handleOpenChange"
   >
-    <aside
-      class="scd w-[560px] max-w-[92vw] h-full bg-(--color-card-bg) border-l border-(--color-dialog-header-border) flex flex-col [animation:scd-slide_0.22s_ease-out]"
-      @click.stop
-      data-test="score-config-detail"
-    >
-      <!-- Header: eyebrow + title + status meta + close -->
-      <header class="flex items-start gap-2.5 px-5 pt-4 pb-3.5 border-b border-dialog-header-border bg-card-bg shrink-0">
-        <div class="flex-1 min-w-0 flex flex-col gap-1">
-          <div class="flex items-center gap-2 flex-nowrap">
-            <span class="font-semibold text-[11px] leading-[1.4] tracking-[0.02em] text-text-secondary">{{ t("onlineEvals.scoreConfig.detail.eyebrow") }}</span>
-            <span
-              v-if="row.name"
-              :class="[
-                'font-semibold px-2 py-1 rounded-md inline-block',
-                store.state.theme === 'dark'
-                  ? 'text-blue-400 bg-blue-900/50'
-                  : 'text-blue-600 bg-blue-50',
-              ]"
-            >
-              {{ row.name }}
-              <OTooltip
-                v-if="row.name && row.name.length > 35"
-                :content="row.name"
-                side="top"
-              />
-            </span>
-          </div>
-        </div>
-        <button
-          type="button"
-          class="scd__close shrink-0 bg-transparent border-0 p-1 rounded cursor-pointer text-(--color-text-secondary)"
-          :aria-label="t('onlineEvals.scoreConfig.detail.close')"
-          data-test="score-config-detail-close-btn"
-          @click="$emit('close')"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="16" height="16" viewBox="0 0 24 24" fill="none"
-            stroke="currentColor" stroke-width="2"
-            stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
-          >
-            <line x1="18" y1="6" x2="6" y2="18" />
-            <line x1="6" y1="6" x2="18" y2="18" />
-          </svg>
-        </button>
-      </header>
-
+    <!-- Body: the tab bar stays pinned; only the tab content scrolls. -->
+    <div class="flex flex-col h-full min-h-0">
       <!-- Tab strip -->
       <OTabs
         :model-value="activeTab"
@@ -82,90 +42,90 @@
         <!-- ─────────── OVERVIEW TAB ─────────── -->
         <template v-if="activeTab === 'overview'">
           <section v-if="row.description" class="flex flex-col gap-2">
-            <h4 class="scd-section__title m-0 font-semibold text-[13px] leading-normal text-(--color-text-primary) pb-1.5 border-b border-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)] inline-flex items-center gap-1.5">{{ t("onlineEvals.scoreConfig.detail.descriptionSection") }}</h4>
-            <p class="m-0 text-[13px] leading-[1.55] text-(--color-text-primary)">{{ row.description }}</p>
+            <h4 class="scd-section__title m-0 font-semibold text-compact leading-normal text-text-heading pb-1.5 border-b border-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)] inline-flex items-center gap-1.5">{{ t("onlineEvals.scoreConfig.detail.descriptionSection") }}</h4>
+            <p class="m-0 text-compact leading-[1.55] text-text-body">{{ row.description }}</p>
           </section>
 
           <section class="flex flex-col gap-2">
-            <h4 class="scd-section__title m-0 font-semibold text-[13px] leading-normal text-(--color-text-primary) pb-1.5 border-b border-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)] inline-flex items-center gap-1.5">{{ t("onlineEvals.scoreConfig.detail.configurationSection") }}</h4>
-            <dl class="scd-kv grid gap-x-3.5 gap-y-1.5 m-0" style="grid-template-columns: 120px 1fr;">
-              <dt>{{ t("onlineEvals.scoreConfig.detail.dataTypeLabel") }}</dt>
-              <dd>
+            <h4 class="scd-section__title m-0 font-semibold text-compact leading-normal text-text-heading pb-1.5 border-b border-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)] inline-flex items-center gap-1.5">{{ t("onlineEvals.scoreConfig.detail.configurationSection") }}</h4>
+            <dl class="grid grid-cols-[7.5rem_1fr] gap-x-3.5 gap-y-1.5 m-0">
+              <dt class="text-xs font-semibold text-text-secondary">{{ t("onlineEvals.scoreConfig.detail.dataTypeLabel") }}</dt>
+              <dd class="m-0 text-compact text-text-body">
                 <OTag type="evalDataType" :value="dataType" />
               </dd>
 
               <template v-if="dataType === 'numeric' && numericRange">
-                <dt>{{ t("onlineEvals.scoreConfig.detail.rangeLabel") }}</dt>
-                <dd class="font-[ui-monospace,SFMono-Regular,Menlo,monospace] [font-variant-numeric:tabular-nums]">{{ numericRange.min }} – {{ numericRange.max }}</dd>
+                <dt class="text-xs font-semibold text-text-secondary">{{ t("onlineEvals.scoreConfig.detail.rangeLabel") }}</dt>
+                <dd class="m-0 text-compact text-text-body font-mono [font-variant-numeric:tabular-nums]">{{ numericRange.min }} – {{ numericRange.max }}</dd>
               </template>
 
               <template v-if="dataType === 'categorical' && categories.length">
-                <dt>{{ t("onlineEvals.scoreConfig.detail.categoriesLabel") }}</dt>
-                <dd>
+                <dt class="text-xs font-semibold text-text-secondary">{{ t("onlineEvals.scoreConfig.detail.categoriesLabel") }}</dt>
+                <dd class="m-0 text-compact text-text-body">
                   <OTag v-for="cat in categories" :key="cat" type="fieldTag" value="soft">{{ cat }}</OTag>
                 </dd>
               </template>
 
               <template v-if="dataType === 'boolean'">
-                <dt>{{ t("onlineEvals.scoreConfig.detail.valuesLabel") }}</dt>
-                <dd class="font-[ui-monospace,SFMono-Regular,Menlo,monospace] [font-variant-numeric:tabular-nums]">true / false</dd>
+                <dt class="text-xs font-semibold text-text-secondary">{{ t("onlineEvals.scoreConfig.detail.valuesLabel") }}</dt>
+                <dd class="m-0 text-compact text-text-body font-mono [font-variant-numeric:tabular-nums]">true / false</dd>
               </template>
             </dl>
           </section>
 
           <section class="flex flex-col gap-2">
-            <h4 class="scd-section__title m-0 font-semibold text-[13px] leading-normal text-(--color-text-primary) pb-1.5 border-b border-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)] inline-flex items-center gap-1.5">
+            <h4 class="scd-section__title m-0 font-semibold text-compact leading-normal text-text-heading pb-1.5 border-b border-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)] inline-flex items-center gap-1.5">
               {{ t("onlineEvals.scoreConfig.detail.thresholdSection") }}
               <OTag v-if="!healthyLabel" type="thresholdFlag" value="notdeclared" />
             </h4>
             <div
               v-if="healthyLabel"
-              class="flex items-baseline gap-2 p-[12px_14px] border border-[color-mix(in_srgb,var(--color-status-success-text)_35%,transparent)] bg-[color-mix(in_srgb,var(--color-status-success-text)_8%,transparent)] rounded-md"
+              class="flex items-baseline gap-2 p-[12px_14px] border border-[color-mix(in_srgb,var(--color-status-success-text)_35%,transparent)] bg-[color-mix(in_srgb,var(--color-status-success-text)_8%,transparent)] rounded-default"
             >
-              <span class="text-lg font-bold text-(--color-status-success-text)">{{ thresholdSign }}</span>
-              <span class="font-[ui-monospace,SFMono-Regular,Menlo,monospace] font-bold text-sm text-(--color-text-primary)">{{ healthyLabel }}</span>
-              <span class="ml-auto text-[11px] text-(--color-text-secondary)">{{ t("onlineEvals.scoreConfig.detail.thresholdHint") }}</span>
+              <span class="text-lg font-bold text-status-success-text">{{ thresholdSign }}</span>
+              <span class="font-mono font-bold text-sm text-text-body">{{ healthyLabel }}</span>
+              <span class="ml-auto text-2xs text-text-secondary">{{ t("onlineEvals.scoreConfig.detail.thresholdHint") }}</span>
             </div>
-            <p v-else class="m-0 text-[13px] leading-[1.55] text-(--color-text-secondary)">
+            <p v-else class="m-0 text-compact leading-[1.55] text-text-secondary">
               {{ t("onlineEvals.scoreConfig.detail.noThresholdHint") }}
             </p>
           </section>
 
           <section class="flex flex-col gap-2">
-            <h4 class="scd-section__title m-0 font-semibold text-[13px] leading-normal text-(--color-text-primary) pb-1.5 border-b border-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)] inline-flex items-center gap-1.5">{{ t("onlineEvals.scoreConfig.detail.metadataSection") }}</h4>
-            <dl class="scd-kv grid gap-x-3.5 gap-y-1.5 m-0" style="grid-template-columns: 120px 1fr;">
-              <dt>{{ t("onlineEvals.scoreConfig.detail.statusLabel") }}</dt>
-              <dd>
+            <h4 class="scd-section__title m-0 font-semibold text-compact leading-normal text-text-heading pb-1.5 border-b border-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)] inline-flex items-center gap-1.5">{{ t("onlineEvals.scoreConfig.detail.metadataSection") }}</h4>
+            <dl class="grid grid-cols-[7.5rem_1fr] gap-x-3.5 gap-y-1.5 m-0">
+              <dt class="text-xs font-semibold text-text-secondary">{{ t("onlineEvals.scoreConfig.detail.statusLabel") }}</dt>
+              <dd class="m-0 text-compact text-text-body">
                 <OTag type="booleanState" :value="isActive ? 'enabled' : 'disabled'">
                   {{ isActive
                     ? t("onlineEvals.scoreConfig.detail.statusActive")
                     : t("onlineEvals.scoreConfig.detail.statusInactive") }}
                 </OTag>
               </dd>
-              <dt>{{ t("onlineEvals.scoreConfig.detail.versionLabel") }}</dt>
-              <dd class="font-[ui-monospace,SFMono-Regular,Menlo,monospace] [font-variant-numeric:tabular-nums]">v{{ row.version }}</dd>
-              <dt v-if="createdAt">{{ t("onlineEvals.scoreConfig.detail.createdLabel") }}</dt>
-              <dd v-if="createdAt" class="font-[ui-monospace,SFMono-Regular,Menlo,monospace] [font-variant-numeric:tabular-nums]">{{ formatTimestamp(createdAt) }}</dd>
-              <dt v-if="updatedAt">{{ t("onlineEvals.scoreConfig.detail.updatedLabel") }}</dt>
-              <dd v-if="updatedAt" class="font-[ui-monospace,SFMono-Regular,Menlo,monospace] [font-variant-numeric:tabular-nums]">{{ formatTimestamp(updatedAt) }}</dd>
+              <dt class="text-xs font-semibold text-text-secondary">{{ t("onlineEvals.scoreConfig.detail.versionLabel") }}</dt>
+              <dd class="m-0 text-compact text-text-body font-mono [font-variant-numeric:tabular-nums]">v{{ row.version }}</dd>
+              <dt v-if="createdAt" class="text-xs font-semibold text-text-secondary">{{ t("onlineEvals.scoreConfig.detail.createdLabel") }}</dt>
+              <dd v-if="createdAt" class="m-0 text-compact text-text-body font-mono [font-variant-numeric:tabular-nums]">{{ formatTimestamp(createdAt) }}</dd>
+              <dt v-if="updatedAt" class="text-xs font-semibold text-text-secondary">{{ t("onlineEvals.scoreConfig.detail.updatedLabel") }}</dt>
+              <dd v-if="updatedAt" class="m-0 text-compact text-text-body font-mono [font-variant-numeric:tabular-nums]">{{ formatTimestamp(updatedAt) }}</dd>
             </dl>
           </section>
         </template>
 
         <!-- ─────────── VERSIONS TAB ─────────── -->
         <template v-else-if="activeTab === 'versions'">
-          <p class="m-0 text-xs leading-normal text-(--color-text-secondary)">{{ t("onlineEvals.scoreConfig.detail.versionsIntro") }}</p>
+          <p class="m-0 text-xs leading-normal text-text-secondary">{{ t("onlineEvals.scoreConfig.detail.versionsIntro") }}</p>
           <ul class="list-none m-0 p-0 flex flex-col gap-2">
             <li
-              class="p-[12px_14px] bg-(--color-card-bg) border border-[color-mix(in_srgb,var(--color-primary-600,#3F7994)_30%,transparent)] bg-[color-mix(in_srgb,var(--color-primary-600,#3F7994)_5%,var(--color-card-bg))]! rounded-md"
+              class="p-[12px_14px] bg-card-bg border border-[color-mix(in_srgb,var(--color-primary-600,#3F7994)_30%,transparent)] bg-[color-mix(in_srgb,var(--color-primary-600,#3F7994)_5%,var(--color-card-bg))]! rounded-default"
             >
               <div class="flex items-center gap-2">
-                <span class="font-[ui-monospace,SFMono-Regular,Menlo,monospace] [font-variant-numeric:tabular-nums] font-bold text-[13px] text-(--color-text-primary)">v{{ row.version }}</span>
+                <span class="font-mono [font-variant-numeric:tabular-nums] font-bold text-compact text-text-body">v{{ row.version }}</span>
                 <OTag type="activeVersionFlag" value="active" />
               </div>
-              <div v-if="updatedAt" class="mt-1.5 text-[11.5px] text-(--color-text-secondary)">
+              <div v-if="updatedAt" class="mt-1.5 text-2xs text-text-secondary">
                 {{ t("onlineEvals.scoreConfig.detail.lastUpdated") }}
-                <span class="font-[ui-monospace,SFMono-Regular,Menlo,monospace] [font-variant-numeric:tabular-nums]">{{ formatTimestamp(updatedAt) }}</span>
+                <span class="font-mono [font-variant-numeric:tabular-nums]">{{ formatTimestamp(updatedAt) }}</span>
               </div>
             </li>
           </ul>
@@ -173,10 +133,10 @@
 
         <!-- ─────────── USED BY TAB ─────────── -->
         <template v-else-if="activeTab === 'usedBy'">
-          <p class="m-0 text-xs leading-normal text-(--color-text-secondary)">{{ t("onlineEvals.scoreConfig.detail.usedByIntro") }}</p>
+          <p class="m-0 text-xs leading-normal text-text-secondary">{{ t("onlineEvals.scoreConfig.detail.usedByIntro") }}</p>
           <div
             v-if="usedByScorers.length === 0"
-            class="inline-flex items-center gap-1.5 p-[8px_10px] bg-[color-mix(in_srgb,var(--color-text-secondary)_6%,transparent)] rounded-[5px] text-xs text-(--color-text-secondary)"
+            class="inline-flex items-center gap-1.5 p-[8px_10px] bg-[color-mix(in_srgb,var(--color-text-secondary)_6%,transparent)] rounded-default text-xs text-text-secondary"
           >
             <OIcon name="info" size="xs" />
             <span>{{ t("onlineEvals.scoreConfig.detail.usedByEmpty") }}</span>
@@ -185,35 +145,34 @@
             <li v-for="scorer in usedByScorers" :key="scorer.id">
               <OButton
                 variant="ghost"
-                class="scd-used-card w-full bg-(--color-card-bg)! border! border-[color-mix(in_srgb,var(--color-text-secondary)_16%,transparent)]! rounded-md! transition-[border-color,background] duration-150"
+                class="scd-used-card w-full bg-card-bg! border! border-[color-mix(in_srgb,var(--color-text-secondary)_16%,transparent)]! rounded-default! transition-[border-color,background] duration-150"
                 :data-test="`score-config-detail-used-by-item-${scorer.name}`"
                 @click="emit('view-scorer', scorer)"
               >
                 <div class="flex-1 min-w-0">
                   <div class="flex items-center gap-2">
-                    <span class="font-[ui-monospace,SFMono-Regular,Menlo,monospace] [font-variant-numeric:tabular-nums] font-bold text-[13px] text-(--color-text-primary)">{{ scorer.name }}</span>
+                    <span class="font-mono [font-variant-numeric:tabular-nums] font-bold text-compact text-text-heading">{{ scorer.name }}</span>
                     <OTag type="scorerType" :value="scorerTypeOf(scorer)" />
-                    <span class="text-[11px] text-(--color-text-secondary) [font-variant-numeric:tabular-nums]">v{{ scorer.version }}</span>
+                    <span class="text-2xs text-text-secondary [font-variant-numeric:tabular-nums]">v{{ scorer.version }}</span>
                   </div>
                 </div>
-                <OIcon name="chevron-right" size="sm" class="scd-used-card__chevron shrink-0 text-(--color-text-secondary) opacity-50" />
+                <OIcon name="chevron-right" size="sm" class="scd-used-card__chevron shrink-0 text-text-secondary opacity-50" />
               </OButton>
             </li>
           </ul>
         </template>
       </div>
-    </aside>
-  </div>
+    </div>
+  </ODrawer>
 </template>
 
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
-import { useStore } from "vuex";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import OTag from "@/lib/core/Badge/OTag.vue";
 import OButton from "@/lib/core/Button/OButton.vue";
-import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
+import ODrawer from "@/lib/overlay/Drawer/ODrawer.vue";
 import OTabs from "@/lib/navigation/Tabs/OTabs.vue";
 import OTab from "@/lib/navigation/Tabs/OTab.vue";
 import type { ScoreConfig, Scorer } from "@/services/online-evals.service";
@@ -222,8 +181,6 @@ import {
   entityId,
 } from "../utils/evalEntity";
 
-const store = useStore();
-
 const props = defineProps<{
   row: ScoreConfig;
   /** All scorers in the org — used to compute the "used by" list. */
@@ -236,6 +193,15 @@ const emit = defineEmits<{
 }>();
 
 const { t } = useI18n();
+
+// Drawer open state — starts open (the parent mounts this only when a score
+// config row is selected). ODrawer's update:open(false) — via ×, Escape, or
+// overlay click — forwards `close` to the parent, which unmounts us.
+const open = ref(true);
+function handleOpenChange(value: boolean) {
+  open.value = value;
+  if (!value) emit("close");
+}
 type TabId = "overview" | "versions" | "usedBy";
 const activeTab = ref<TabId>("overview");
 
@@ -347,37 +313,11 @@ function formatTimestamp(microsOrMs: number): string {
 }
 </script>
 
-<style>
-@keyframes scd-fade {
-  from { background: rgba(0, 0, 0, 0); }
-  to   { background: rgba(0, 0, 0, 0.32); }
-}
-
-@keyframes scd-slide {
-  from { transform: translateX(100%); }
-  to   { transform: translateX(0); }
-}
-
-.scd__close:hover {
-  background: color-mix(in srgb, var(--color-text-primary) 8%, transparent);
-  color: var(--color-text-primary, currentColor);
-}
-
-/* scd-kv dt/dd — descendant selectors, cannot inline */
-.scd-kv dt {
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--color-text-secondary, var(--o2-text-secondary));
-}
-
-.scd-kv dd {
-  margin: 0;
-  font-size: 0.8125rem;
-  color: var(--color-text-primary, currentColor);
-}
-
-/* OButton internals — child selector targeting component internals */
-.scd-used-card button {
+<style scoped>
+/* keep(complex-state): the "used by" card hover overrides OButton's border/bg and
+   reveals its chevron; the height/padding reset targets the native <button>
+   rendered inside OButton, reachable only via :deep(). */
+.scd-used-card :deep(button) {
   height: auto !important;
   padding: 0.75rem 0.875rem !important;
   gap: 0.625rem;
@@ -386,17 +326,12 @@ function formatTimestamp(microsOrMs: number): string {
 }
 
 .scd-used-card:hover {
-  border-color: color-mix(in srgb, var(--color-primary-600, #3F7994) 35%, transparent) !important;
-  background: color-mix(in srgb, var(--color-primary-600, #3F7994) 4%, var(--color-card-bg)) !important;
-}
-
-.scd-used-card__type--remote {
-  background: color-mix(in srgb, #b25400 14%, transparent);
-  color: #b25400;
+  border-color: color-mix(in srgb, var(--color-primary-600) 35%, transparent) !important;
+  background: color-mix(in srgb, var(--color-primary-600) 4%, var(--color-card-bg)) !important;
 }
 
 .scd-used-card:hover .scd-used-card__chevron {
-  color: var(--color-primary-600, #3F7994);
+  color: var(--color-primary-600);
   opacity: 1;
 }
 </style>
diff --git a/web/src/enterprise/components/onlineEvals/forms/ScoreConfigDialog.schema.ts b/web/src/enterprise/components/onlineEvals/forms/ScoreConfigDialog.schema.ts
index 5a7462755a..6f5328a34f 100644
--- a/web/src/enterprise/components/onlineEvals/forms/ScoreConfigDialog.schema.ts
+++ b/web/src/enterprise/components/onlineEvals/forms/ScoreConfigDialog.schema.ts
@@ -2,42 +2,33 @@
 //
 // Validation schema for ScoreConfigDialog.vue (online-evals score-config drawer).
 // Client-side validation: (1) name — required + a create-only lowercase-slug
-// pattern (matching origin/main); (2) min/max — each must be a non-empty number,
-// but ONLY when the data type is numeric (the inputs are hidden and the values are
-// dropped from the payload for categorical/boolean, so a blank must not block Save
-// there — the check is gated on dataType in superRefine). There is NO min<max
-// ordering rule and NO "≥1 category" rule — main allowed both, so those stay
-// deliberately absent (online-evals-migration.md row 68).
+// pattern; (2) min/max — each must be a non-empty number, but ONLY when the data
+// type is numeric (the inputs are hidden and the values are dropped from the
+// payload for categorical/boolean, so a blank must not block Save there — the
+// check is gated on dataType in superRefine). There is NO min<max ordering rule
+// and NO "≥1 category" rule.
 //
-// The component OWNS <OForm> via the Rule-③ owner pattern: it creates the form
-// with `useOForm` and reads it reactively through `form.useStore` — a SINGLE
-// source of truth, NO mirror ref, NO `v-model`, NO `watch → setFieldValue` sync.
-// That read view (`formValues`) drives the `dataType`/`healthyDirection`/
-// `categories` `v-if` branches; the @submit payload builders read the validated
-// `value`; `isDirty` comes from the form store (a save-affordance, not a
-// validation gate). The real text/number inputs (name/description/min/max/healthy
-// values) are plain form-owned `name=` fields. The bespoke choice grids (the
-// dataType radio-cards, the healthy-threshold radios/checkboxes — several of which
-// embed inline number inputs, so they have NO OForm* representation) plus the
-// categories tag-entry write DIRECTLY into the one form via `form.setFieldValue`
-// from each control's own `@change`/`@click` handler (the sanctioned custom-grid
-// bridge — NOT a watch on a local mirror). Every field thus lives in the schema —
-// validated or `.optional()`. Validation TIMING is owned by OForm.
+// The component owns <OForm>: it creates the form with `useOForm` and reads it
+// reactively through `form.useStore` (single source of truth, no mirror ref, no
+// `v-model`). That read view (`formValues`) drives the `dataType`/
+// `healthyDirection`/`categories` `v-if` branches. The real text/number inputs
+// (name/description/min/max/healthy values) are plain form-owned `name=` fields.
+// The bespoke choice grids (dataType radio-cards, healthy-threshold
+// radios/checkboxes — several embed inline number inputs, so they have no OForm*
+// representation) plus the categories tag-entry write directly into the form via
+// `form.setFieldValue` from each control's own `@change`/`@click` handler.
 
 import { z } from "zod";
 import type { ScoreDataType } from "@/services/online-evals.service";
 
-// Stable-identifier rule (letters, digits, underscores), restored from the
-// pre-migration `validateName()`: the name is a lowercase slug. Only enforced on
-// create — in edit the name is immutable (the input is disabled), so a legacy
-// config whose name predates this rule must still be editable (description-only).
+// Stable-identifier rule (lowercase letters, digits, underscores). Only enforced
+// on create — in edit the name is immutable (the input is disabled).
 const NAME_PATTERN = /^[a-z0-9_]+$/;
 
-// True when a number <input>'s RAW store value is not a usable number — "" (the
+// True when a number <input>'s raw store value is not a usable number — "" (the
 // cleared state), null / undefined, or non-numeric. Used to require min/max, but
 // ONLY for the numeric data type (see superRefine). `z.coerce.number()` can't do
-// this: it would silently turn "" into 0. The payload builder in the component
-// re-coerces the raw store value on submit.
+// this: it would silently turn "" into 0.
 const isBlankNumber = (v: unknown) =>
   v === "" || v === null || v === undefined || Number.isNaN(Number(v));
 
@@ -104,12 +95,8 @@ export const makeScoreConfigSchema = (
         });
       }
     });
-    // NOTE: matching pre-migration (origin/main) behavior, there is intentionally
-    // NO numeric `min < max` ordering rule and NO categorical "≥1 category" rule —
-    // main allowed both (min≥max ranges, and empty categorical → `categories:
-    // null`). The only validation the migration restores is name required + the
-    // create-only slug pattern above (plus the numeric-only min/max requirement).
-    // See ScoreConfigDialog.vue save().
+    // Intentionally NO numeric `min < max` ordering rule and NO categorical
+    // "≥1 category" rule — both min≥max ranges and empty categorical are allowed.
 
 export type ScoreConfigForm = z.infer<ReturnType<typeof makeScoreConfigSchema>>;
 
diff --git a/web/src/enterprise/components/onlineEvals/forms/ScoreConfigDialog.vue b/web/src/enterprise/components/onlineEvals/forms/ScoreConfigDialog.vue
index 774833697b..b25ee480ca 100644
--- a/web/src/enterprise/components/onlineEvals/forms/ScoreConfigDialog.vue
+++ b/web/src/enterprise/components/onlineEvals/forms/ScoreConfigDialog.vue
@@ -1,9 +1,8 @@
 <template>
-  <!-- Standard shared drawer (main's ux-revamp): the drawer owns the header
-       (title + ×), the scrim, and the footer buttons. The body is an <OForm>
-       tied to the footer's primary button via `form-id`, so Save (and Enter)
-       route through the schema-validated submit; the Save spinner is auto-driven
-       by the nested OForm's isSubmitting (no manual `isSaving`). -->
+  <!-- The drawer owns the header (title + ×), the scrim, and the footer buttons.
+       The body is an <OForm> tied to the footer's primary button via `form-id`,
+       so Save (and Enter) route through the schema-validated submit; the Save
+       spinner is auto-driven by the nested OForm's isSubmitting. -->
   <ODrawer
     :open="open"
     side="right"
@@ -21,25 +20,28 @@
     @update:open="handleOpenChange"
     @click:secondary="$emit('cancel')"
   >
-    <OForm id="score-config-form" class="sc-form" :form="form">
-      <div v-if="mode === 'edit'" class="sc-callout">
-        <OIcon name="info" size="xs" />
-        <div class="sc-callout__text flex flex-col gap-0.5 min-w-0">
+    <OForm id="score-config-form" :form="form">
+      <div
+        v-if="mode === 'edit'"
+        class="flex gap-2.5 items-start px-3 py-2.5 bg-[color-mix(in_srgb,var(--color-status-info-text)_14%,transparent)] border border-[color-mix(in_srgb,var(--color-status-info-text)_20%,transparent)] rounded-default text-xs leading-normal text-text-body mb-4"
+      >
+        <OIcon name="info" size="xs" class="shrink-0 mt-px text-status-info-text" />
+        <div class="flex flex-col gap-0.5 min-w-0">
           <i18n-t
             :keypath="`onlineEvals.scoreConfig.editInfoBannerEmphasis.${formValues.dataType}`"
             tag="span"
-            class="sc-callout__lead font-normal"
+            class="font-normal"
           >
             <template #nextVersion>
-              <strong>{{ nextVersionLabel }}</strong>
+              <strong class="font-bold">{{ nextVersionLabel }}</strong>
             </template>
           </i18n-t>
-          <em class="sc-callout__detail italic font-normal text-(--color-text-secondary)">{{ t("onlineEvals.scoreConfig.editInfoBannerDetail") }}</em>
+          <em class="italic font-normal text-text-secondary">{{ t("onlineEvals.scoreConfig.editInfoBannerDetail") }}</em>
         </div>
       </div>
 
       <!-- Name -->
-      <div class="sc-field">
+      <div class="mb-2.5">
         <OFormInput
           name="name"
           :label="t('onlineEvals.scoreConfig.nameLabel')"
@@ -52,7 +54,7 @@
       </div>
 
       <!-- Description -->
-      <div class="sc-field">
+      <div class="mb-2.5">
         <OFormTextarea
           name="description"
           :label="t('onlineEvals.scoreConfig.descriptionLabel')"
@@ -61,14 +63,14 @@
           :rows="3"
           data-test="score-config-description-input"
         />
-        <div v-if="mode === 'edit'" class="sc-field__help text-[11px] text-(--color-text-secondary) mt-1">
+        <div v-if="mode === 'edit'" class="text-2xs text-text-secondary mt-1">
           {{ t("onlineEvals.scoreConfig.descriptionHelp") }}
         </div>
       </div>
 
       <!-- Data type -->
-      <div class="sc-field">
-        <label class="sc-field__label o-input-label">
+      <div class="mb-2.5">
+        <label class="o-input-label text-compact font-medium leading-tight text-input-label-text flex items-center mb-1">
           {{ t("onlineEvals.scoreConfig.dataTypeLabel")
           }}<span v-if="mode === 'create'" class="select-none" aria-hidden="true">&nbsp;*</span>
         </label>
@@ -79,18 +81,26 @@
           :model-value="formValues.dataType"
           :disabled="mode === 'edit'"
           orientation="horizontal"
-          class="sc-dtype-radios"
+          class="mt-0.5"
           data-test="score-config-datatype-radios"
           @update:model-value="form.setFieldValue('dataType', $event)"
         >
+          <!-- `sc-dtype-radio` is kept purely as the hook for the ORadio
+               :deep() keeper below; all of its own chrome is utilities. In edit
+               mode the cards are locked, so the hover utility is simply not
+               applied (rather than being re-neutralised by a second rule). -->
           <div
             v-for="type in DATA_TYPES"
             :key="type"
-            class="sc-dtype-radio"
-            :class="{
-              'sc-dtype-radio--selected': formValues.dataType === type,
-              'sc-dtype-radio--locked': mode === 'edit',
-            }"
+            class="sc-dtype-radio flex-1 min-w-0 border rounded-default transition-[border-color,background] duration-120"
+            :class="[
+              formValues.dataType === type
+                ? 'border-primary-600 bg-[color-mix(in_srgb,var(--color-primary-600)_5%,var(--color-card-bg))]'
+                : 'border-dialog-header-border bg-card-bg',
+              mode === 'edit'
+                ? ''
+                : 'hover:border-[color-mix(in_srgb,var(--color-primary-600)_40%,var(--color-dialog-header-border))]',
+            ]"
           >
             <ORadio
               :value="type"
@@ -99,8 +109,8 @@
               :data-test="`score-config-datatype-${type}`"
             >
               <template #label>
-                <span class="sc-dtype-radio__hd">{{ t(`onlineEvals.scoreConfig.dataTypes.${type}`) }}</span>
-                <span class="sc-dtype-radio__sub">{{ t(`onlineEvals.scoreConfig.dataTypeHelp.${type}`) }}</span>
+                <span class="text-compact font-bold text-text-heading">{{ t(`onlineEvals.scoreConfig.dataTypes.${type}`) }}</span>
+                <span class="text-2xs font-normal text-text-secondary mt-0.75 leading-[1.4]">{{ t(`onlineEvals.scoreConfig.dataTypeHelp.${type}`) }}</span>
               </template>
             </ORadio>
           </div>
@@ -108,12 +118,12 @@
       </div>
 
       <!-- Numeric range -->
-      <div v-if="formValues.dataType === 'numeric'" class="sc-field">
-        <label class="sc-field__label o-input-label">
+      <div v-if="formValues.dataType === 'numeric'" class="mb-2.5">
+        <label class="o-input-label text-compact font-medium leading-tight text-input-label-text flex items-center mb-1">
           {{ t("onlineEvals.scoreConfig.numericRangeLabel") }}
         </label>
-        <div class="sc-range-row flex items-center gap-[10px]">
-          <span class="sc-range-row__label text-(--color-text-secondary) text-[11px]">{{ t("onlineEvals.scoreConfig.minLabel") }}</span>
+        <div class="flex items-center gap-2.5">
+          <span class="text-text-secondary text-2xs">{{ t("onlineEvals.scoreConfig.minLabel") }}</span>
           <OFormInput
             name="min"
             type="number"
@@ -121,7 +131,7 @@
             field-width="xs"
             data-test="score-config-min-input"
           />
-          <span class="sc-range-row__label text-(--color-text-secondary) text-[11px]">{{ t("onlineEvals.scoreConfig.maxLabel") }}</span>
+          <span class="text-text-secondary text-2xs">{{ t("onlineEvals.scoreConfig.maxLabel") }}</span>
           <OFormInput
             name="max"
             type="number"
@@ -133,8 +143,8 @@
       </div>
 
       <!-- Categories -->
-      <div v-if="formValues.dataType === 'categorical'" class="sc-field">
-        <label class="sc-field__label o-input-label">
+      <div v-if="formValues.dataType === 'categorical'" class="mb-2.5">
+        <label class="o-input-label text-compact font-medium leading-tight text-input-label-text flex items-center mb-1">
           {{ t("onlineEvals.scoreConfig.categoriesLabel") }}
         </label>
         <!-- Categories are a `string[]` OForm field — OFormTagInput binds it by
@@ -149,20 +159,22 @@
       <!-- Boolean info banner -->
       <div
         v-if="formValues.dataType === 'boolean'"
-        class="sc-callout sc-callout--neutral flex gap-[10px] items-start px-3 py-[10px] bg-[color-mix(in_srgb,var(--color-text-secondary,var(--o2-text-secondary))_12%,transparent)] border border-(--color-dialog-header-border) rounded-md text-xs leading-normal text-(--color-text-primary) mb-4"
+        class="flex gap-2.5 items-start px-3 py-2.5 bg-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)] border border-dialog-header-border rounded-default text-xs leading-normal text-text-body mb-4"
       >
-        <OIcon name="info" size="xs" />
+        <OIcon name="info" size="xs" class="shrink-0 mt-px text-text-secondary" />
         <span>
           {{ t("onlineEvals.scoreConfig.booleanInfo", { trueLabel: "true", falseLabel: "false" }) }}
         </span>
       </div>
 
       <!-- Healthy threshold -->
-      <div class="sc-ht-section">
-        <div class="sc-ht-section__head">
-          <span class="sc-ht-section__title-group">
-            <span class="o-input-label">{{ t("onlineEvals.scoreConfig.healthyThresholdTitle") }}</span>
-            <OIcon name="info-outline" size="sm" class="sc-ht-section__info">
+      <div
+        class="mt-1 pt-3 px-3.5 pb-2.5 border border-dialog-header-border rounded-default bg-[color-mix(in_srgb,var(--color-primary-600)_2.5%,var(--color-card-bg))]"
+      >
+        <div class="flex items-center gap-2.5 mb-3">
+          <span class="inline-flex items-center gap-1">
+            <span class="o-input-label text-compact font-medium leading-tight text-input-label-text">{{ t("onlineEvals.scoreConfig.healthyThresholdTitle") }}</span>
+            <OIcon name="info-outline" size="sm" class="text-text-secondary">
               <OTooltip
                 :content="t('onlineEvals.scoreConfig.healthyThresholdIntro')"
                 max-width="300px"
@@ -174,11 +186,16 @@
 
         <!-- Numeric threshold -->
         <template v-if="formValues.dataType === 'numeric'">
-          <div class="sc-ht-field-label text-[11.5px] font-semibold text-(--color-text-primary) mb-1.5">{{ t("onlineEvals.scoreConfig.healthyWhenValueIs") }}</div>
-          <div class="sc-ht-radio-row flex flex-col gap-1.5">
+          <div class="text-xs font-medium text-text-secondary mb-2">{{ t("onlineEvals.scoreConfig.healthyWhenValueIs") }}</div>
+          <!-- Narrow drawers (<51.25rem): stack so the label + input don't crush. -->
+          <div class="flex flex-col gap-2.5 min-[51.25rem]:flex-row">
             <label
-              class="sc-ht-num-radio grid grid-cols-[18px_22px_1fr_110px] items-center gap-[10px] px-3 py-1.5 border border-(--color-dialog-header-border) rounded-[5px] bg-(--color-card-bg) cursor-pointer transition-[border-color,background] duration-[120ms]"
-              :class="{ 'sc-ht-num-radio--selected': formValues.healthyDirection === 'gte' }"
+              class="flex-1 min-w-0 grid grid-cols-[1.125rem_1.25rem_minmax(0,1fr)_5rem] items-center gap-2 px-3 py-1.5 border rounded-default cursor-pointer transition-[border-color,background] duration-120 hover:border-[color-mix(in_srgb,var(--color-primary-600)_40%,var(--color-dialog-header-border))]"
+              :class="
+                formValues.healthyDirection === 'gte'
+                  ? 'border-primary-600 bg-[color-mix(in_srgb,var(--color-primary-600)_4%,var(--color-card-bg))]'
+                  : 'border-dialog-header-border bg-card-bg'
+              "
             >
               <input
                 type="radio"
@@ -187,8 +204,8 @@
                 :checked="formValues.healthyDirection === 'gte'"
                 @change="form.setFieldValue('healthyDirection', 'gte')"
               />
-              <span class="sc-ht-sym sc-mono text-[17px] font-bold text-(--color-text-primary) text-center">≥</span>
-              <span class="sc-ht-op text-[12.5px] text-(--color-text-primary)">{{ t("onlineEvals.scoreConfig.gteLabel") }}</span>
+              <span class="font-mono text-lg font-bold text-text-body text-center">≥</span>
+              <span class="text-compact text-text-body">{{ t("onlineEvals.scoreConfig.gteLabel") }}</span>
               <OFormInput
                 name="healthyGteValue"
                 type="number"
@@ -200,8 +217,12 @@
               />
             </label>
             <label
-              class="sc-ht-num-radio grid grid-cols-[18px_22px_1fr_110px] items-center gap-[10px] px-3 py-1.5 border border-(--color-dialog-header-border) rounded-[5px] bg-(--color-card-bg) cursor-pointer transition-[border-color,background] duration-[120ms]"
-              :class="{ 'sc-ht-num-radio--selected': formValues.healthyDirection === 'lte' }"
+              class="flex-1 min-w-0 grid grid-cols-[1.125rem_1.25rem_minmax(0,1fr)_5rem] items-center gap-2 px-3 py-1.5 border rounded-default cursor-pointer transition-[border-color,background] duration-120 hover:border-[color-mix(in_srgb,var(--color-primary-600)_40%,var(--color-dialog-header-border))]"
+              :class="
+                formValues.healthyDirection === 'lte'
+                  ? 'border-primary-600 bg-[color-mix(in_srgb,var(--color-primary-600)_4%,var(--color-card-bg))]'
+                  : 'border-dialog-header-border bg-card-bg'
+              "
             >
               <input
                 type="radio"
@@ -210,8 +231,8 @@
                 :checked="formValues.healthyDirection === 'lte'"
                 @change="form.setFieldValue('healthyDirection', 'lte')"
               />
-              <span class="sc-ht-sym sc-mono text-[17px] font-bold text-(--color-text-primary) text-center">≤</span>
-              <span class="sc-ht-op text-[12.5px] text-(--color-text-primary)">{{ t("onlineEvals.scoreConfig.lteLabel") }}</span>
+              <span class="font-mono text-lg font-bold text-text-body text-center">≤</span>
+              <span class="text-compact text-text-body">{{ t("onlineEvals.scoreConfig.lteLabel") }}</span>
               <OFormInput
                 name="healthyLteValue"
                 type="number"
@@ -227,16 +248,20 @@
 
         <!-- Categorical threshold -->
         <template v-else-if="formValues.dataType === 'categorical'">
-          <div class="sc-ht-field-label text-[11.5px] font-semibold text-(--color-text-primary) mb-1.5">{{ t("onlineEvals.scoreConfig.healthyCategories") }}</div>
-          <div v-if="formValues.categories.length === 0" class="sc-ht-empty text-[11.5px] italic text-(--color-text-secondary) px-3 py-[10px] border border-dashed border-(--color-dialog-header-border) rounded-[5px] bg-(--color-card-bg)">
+          <div class="text-xs font-medium text-text-secondary mb-2">{{ t("onlineEvals.scoreConfig.healthyCategories") }}</div>
+          <div v-if="formValues.categories.length === 0" class="text-2xs italic text-text-secondary px-3 py-2.5 border border-dashed border-dialog-header-border rounded-default bg-card-bg">
             {{ t("onlineEvals.scoreConfig.addCategoryPlaceholder") }}…
           </div>
-          <div v-else class="sc-ht-checks flex flex-col gap-0.5 border border-(--color-dialog-header-border) rounded-[5px] bg-(--color-card-bg) p-1">
+          <div v-else class="flex flex-col gap-0.5 border border-dialog-header-border rounded-default bg-card-bg p-1">
             <label
               v-for="cat in formValues.categories"
               :key="cat"
-              class="sc-ht-check flex items-center gap-[10px] px-[10px] py-[7px] rounded cursor-pointer transition-[background] duration-[120ms]"
-              :class="{ 'sc-ht-check--on': formValues.healthyCategories.includes(cat) }"
+              class="flex items-center gap-2.5 px-2.5 py-1.75 rounded-default cursor-pointer transition-[background] duration-120 hover:bg-[color-mix(in_srgb,var(--color-text-heading)_6%,transparent)]"
+              :class="
+                formValues.healthyCategories.includes(cat)
+                  ? 'bg-[color-mix(in_srgb,color-mix(in_srgb,var(--color-status-success-text)_14%,transparent)_35%,transparent)]'
+                  : ''
+              "
             >
               <input
                 type="checkbox"
@@ -244,22 +269,27 @@
                 :checked="formValues.healthyCategories.includes(cat)"
                 @change="toggleHealthyCategory(cat)"
               />
-              <span class="sc-mono font-[var(--o2-font-mono)]">{{ cat }}</span>
+              <span class="font-mono">{{ cat }}</span>
             </label>
           </div>
-          <div class="sc-ht-example flex items-center gap-1.5 mt-2 text-[11px] text-(--color-text-secondary)">
-            <OIcon name="info" size="xs" />
+          <div class="flex items-center gap-1.5 mt-2 text-2xs text-text-secondary">
+            <OIcon name="info" size="xs" class="shrink-0 text-status-info-text" />
             <span>{{ t("onlineEvals.scoreConfig.healthyCategoriesHint") }}</span>
           </div>
         </template>
 
         <!-- Boolean threshold -->
         <template v-else>
-          <div class="sc-ht-field-label text-[11.5px] font-semibold text-(--color-text-primary) mb-1.5">{{ t("onlineEvals.scoreConfig.healthyValue") }}</div>
-          <div class="sc-ht-bool-radios flex flex-col gap-1.5">
+          <div class="text-xs font-medium text-text-secondary mb-2">{{ t("onlineEvals.scoreConfig.healthyValue") }}</div>
+          <!-- Narrow drawers (<51.25rem): stack so the label + hint don't crush. -->
+          <div class="flex flex-col gap-2.5 min-[51.25rem]:flex-row">
             <label
-              class="sc-ht-bool-radio grid grid-cols-[16px_1fr] items-start gap-[10px] px-3 py-[7px] border border-(--color-dialog-header-border) rounded-[5px] bg-(--color-card-bg) cursor-pointer transition-[border-color,background] duration-[120ms]"
-              :class="{ 'sc-ht-bool-radio--selected': formValues.healthyBool === true }"
+              class="flex-1 min-w-0 grid grid-cols-[1rem_1fr] items-start gap-2.5 px-3 py-1.75 border rounded-default cursor-pointer transition-[border-color,background] duration-120 hover:border-[color-mix(in_srgb,var(--color-primary-600)_40%,var(--color-dialog-header-border))]"
+              :class="
+                formValues.healthyBool === true
+                  ? 'border-primary-600 bg-[color-mix(in_srgb,var(--color-primary-600)_4%,var(--color-card-bg))]'
+                  : 'border-dialog-header-border bg-card-bg'
+              "
             >
               <input
                 type="radio"
@@ -269,13 +299,17 @@
                 @change="form.setFieldValue('healthyBool', true)"
               />
               <div>
-                <div class="sc-ht-bool-radio__hd text-(--color-text-primary) font-[var(--o2-font-mono)]">{{ t("onlineEvals.scoreConfig.trueIsHealthy") }}</div>
-                <div class="sc-ht-bool-radio__sub text-[11px] text-(--color-text-secondary) mt-0.5 leading-[1.4]">{{ t("onlineEvals.scoreConfig.trueIsHealthyHint") }}</div>
+                <div class="text-text-body font-mono">{{ t("onlineEvals.scoreConfig.trueIsHealthy") }}</div>
+                <div class="text-2xs text-text-secondary mt-0.5 leading-[1.4]">{{ t("onlineEvals.scoreConfig.trueIsHealthyHint") }}</div>
               </div>
             </label>
             <label
-              class="sc-ht-bool-radio grid grid-cols-[16px_1fr] items-start gap-[10px] px-3 py-[7px] border border-(--color-dialog-header-border) rounded-[5px] bg-(--color-card-bg) cursor-pointer transition-[border-color,background] duration-[120ms]"
-              :class="{ 'sc-ht-bool-radio--selected': formValues.healthyBool === false }"
+              class="flex-1 min-w-0 grid grid-cols-[1rem_1fr] items-start gap-2.5 px-3 py-1.75 border rounded-default cursor-pointer transition-[border-color,background] duration-120 hover:border-[color-mix(in_srgb,var(--color-primary-600)_40%,var(--color-dialog-header-border))]"
+              :class="
+                formValues.healthyBool === false
+                  ? 'border-primary-600 bg-[color-mix(in_srgb,var(--color-primary-600)_4%,var(--color-card-bg))]'
+                  : 'border-dialog-header-border bg-card-bg'
+              "
             >
               <input
                 type="radio"
@@ -285,15 +319,15 @@
                 @change="form.setFieldValue('healthyBool', false)"
               />
               <div>
-                <div class="sc-ht-bool-radio__hd text-(--color-text-primary) font-[var(--o2-font-mono)]">{{ t("onlineEvals.scoreConfig.falseIsHealthy") }}</div>
-                <div class="sc-ht-bool-radio__sub text-[11px] text-(--color-text-secondary) mt-0.5 leading-[1.4]">{{ t("onlineEvals.scoreConfig.falseIsHealthyHint") }}</div>
+                <div class="text-text-body font-mono">{{ t("onlineEvals.scoreConfig.falseIsHealthy") }}</div>
+                <div class="text-2xs text-text-secondary mt-0.5 leading-[1.4]">{{ t("onlineEvals.scoreConfig.falseIsHealthyHint") }}</div>
               </div>
             </label>
           </div>
         </template>
 
-        <div class="sc-ht-section__foot flex items-start gap-1.5 mt-[10px] pt-2 border-t border-dashed border-(--color-dialog-header-border) text-[11px] text-(--color-text-secondary) leading-normal">
-          <OIcon name="info" size="xs" />
+        <div class="flex items-start gap-1.5 mt-2.5 pt-2 border-t border-dashed border-dialog-header-border text-2xs text-text-secondary leading-normal">
+          <OIcon name="info" size="xs" class="shrink-0 mt-0.5 text-text-secondary" />
           <span>{{ t("onlineEvals.scoreConfig.thresholdEmptyHint") }}</span>
         </div>
       </div>
@@ -360,7 +394,7 @@ const drawerTitle = computed(() =>
 const DATA_TYPES = ["numeric", "categorical", "boolean"] as const;
 
 // Co-located Zod schema (factory keeps messages i18n-driven and branches the
-// create-only name-slug rule on `mode`, matching main's validateName).
+// create-only name-slug rule on `mode`).
 const scoreConfigSchema = makeScoreConfigSchema(t, props.mode);
 
 // OWNER pattern (Rule ③): this component owns <OForm>, so it creates the form
@@ -385,9 +419,9 @@ const nextVersionLabel = computed(() => {
   return `v${v + 1}`;
 });
 
-// Dirty affordance (a save-affordance, NOT a validation gate — R3). TanStack
-// tracks per-field dirtiness against the seeded defaults, so editing any field
-// (incl. the bridged choice controls) flips this true.
+// Dirty affordance (a save-affordance, not a validation gate). TanStack tracks
+// per-field dirtiness against the seeded defaults, so editing any field (incl.
+// the bridged choice controls) flips this true.
 const isDirty = form.useStore((s: any) => s.isDirty);
 
 const defaultGteValue = computed(() => {
@@ -477,7 +511,7 @@ function buildNumericRange(v: ScoreConfigForm) {
   if (v.dataType !== "numeric") return null;
   // A number <input> emits a STRING and the @submit value is TanStack's RAW store
   // value (the schema's z.coerce.number coerces for validation only, not the
-  // stored value) — so coerce here, exactly as the old `v-model.number` did.
+  // stored value) — so coerce to a number here.
   const min = Number(v.min);
   const max = Number(v.max);
   if (Number.isNaN(min) || Number.isNaN(max)) return null;
@@ -508,11 +542,10 @@ function buildHealthyThreshold(v: ScoreConfigForm) {
 }
 
 // @submit handler — OForm only calls this once the schema passes (name required
-// + the create-only slug pattern; matching main, there is NO min<max ordering
-// rule). A categorical config with zero categories is also allowed (pre-migration
-// behavior: buildCategories() just sends `categories: null`). The handler builds
-// the payload from the validated `value` ONLY. OForm awaits this → the ODrawer
-// Save spinner spans the save (no manual `isSaving`).
+// + the create-only slug pattern; there is no min<max ordering rule). A
+// categorical config with zero categories is allowed (buildCategories() just
+// sends `categories: null`). The handler builds the payload from the validated
+// `value` only. OForm awaits this, so the ODrawer Save spinner spans the save.
 async function save(value: ScoreConfigForm) {
   if (!props.orgId) return;
   try {
@@ -543,356 +576,54 @@ async function save(value: ScoreConfigForm) {
 }
 </script>
 
-<style lang="scss">
-/* Body form inside the shared ODrawer — the drawer owns the scroll/chrome, the
-   form just carries the field padding the old .sc-drawer__body had. */
-.sc-form {
-  padding: 14px 22px;
-}
-
-.sc-mono { font-family: var(--o2-font-mono); }
-
-.sc-callout {
-  display: flex;
-  gap: 10px;
-  align-items: flex-start;
-  padding: 10px 12px;
-  background: color-mix(in srgb, var(--color-status-info-text) 14%, transparent);
-  border: 1px solid color-mix(in srgb, var(--color-status-info-text) 20%, transparent);
-  border-radius: 6px;
-  font-size: 12px;
-  line-height: 1.5;
-  color: var(--color-text-primary, currentColor);
-  margin-bottom: 16px;
-}
-
-.sc-callout > :first-child {
-  flex-shrink: 0;
-  margin-top: 1px;
-  color: var(--color-status-info-text);
-}
-
-/* descendant selector: cannot be inlined */
-.sc-callout__lead strong { font-weight: 700; }
-
-/* child selector for neutral callout icon: cannot be inlined */
-.sc-callout--neutral > :first-child { color: var(--color-text-secondary, var(--o2-text-secondary)); }
-
-.sc-field {
-  margin-bottom: 10px;
-}
-
-/* Layout only — typography comes from the shared .o-input-label class (added on
-   these group labels) so they match OInput's rendered labels exactly. */
-.sc-field__label {
-  display: flex;
-  align-items: center;
-  margin-bottom: 4px;
-}
-
-/* Info icon sitting after a field label (e.g. Data type's "can't change"). */
-.sc-field__info {
-  margin-left: 4px;
-  color: var(--color-text-secondary, var(--o2-text-secondary));
-}
-
-/* ── Data-type radio cards (reuse ORadio inside ORadioGroup) ────────────────
-   ORadioGroup(orientation=horizontal) lays the three wrappers in one row; each
-   wrapper carries the card chrome while ORadio renders the circle + label. */
-.sc-dtype-radios {
-  margin-top: 2px;
-}
-
-.sc-dtype-radio {
-  flex: 1;
-  min-width: 0;
-  border: 1px solid var(--color-dialog-header-border, var(--o2-border));
-  border-radius: 6px;
-  background: var(--color-card-bg);
-  transition: border-color 0.12s, background 0.12s;
-}
-
-/* ORadio renders its own <label>; make it fill the card and top-align so the
-   circle lines up with the title above the inline description. */
-.sc-dtype-radio > label {
+<style scoped>
+/* keep(lib-override:o-radio): the data-type cards wrap <ORadio>, whose root
+   <label> and label-content <span> are rendered INSIDE the ORadio component —
+   this file cannot put utilities on them. The card needs that label to fill its
+   full width and top-align (ORadio ships `inline-flex items-center`), and the
+   label span to stack the title above the help text. Everything else on the
+   card (border/radius/background/hover/selected) is utilities in the template;
+   `.sc-dtype-radio` survives only as the hook for these two rules. */
+.sc-dtype-radio :deep(label) {
   display: flex;
   width: 100%;
   align-items: flex-start;
-  gap: 8px;
-  padding: 8px 12px;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
 }
 
-/* ORadio's label-content <span> → stack the title + help vertically. */
-.sc-dtype-radio > label > span {
+.sc-dtype-radio :deep(label > span) {
   display: flex;
   flex-direction: column;
   min-width: 0;
 }
 
-.sc-dtype-radio:hover {
-  border-color: color-mix(in srgb, var(--color-primary-600, #3F7994) 40%, var(--color-dialog-header-border, var(--o2-border)));
+/* keep(generated-content): the healthy-threshold choice controls are native
+   <input type="radio"|"checkbox">; their checked affordance is drawn with
+   ::after on the input itself, which no utility can express. */
+.sc-radio:checked {
+  border-color: var(--color-primary-600);
 }
 
-/* dynamic selected state: cannot be inlined */
-.sc-dtype-radio--selected {
-  border-color: var(--color-primary-600, #3F7994);
-  background: color-mix(in srgb, var(--color-primary-600, #3F7994) 5%, var(--color-card-bg));
-}
-
-/* Edit mode: cards are locked — no hover affordance, but the selected card keeps
-   its highlight so the current type stays obvious. */
-.sc-dtype-radio--locked:hover {
-  border-color: var(--color-dialog-header-border, var(--o2-border));
-  background: var(--color-card-bg);
-}
-.sc-dtype-radio--locked.sc-dtype-radio--selected,
-.sc-dtype-radio--locked.sc-dtype-radio--selected:hover {
-  border-color: var(--color-primary-600, #3F7994);
-  background: color-mix(in srgb, var(--color-primary-600, #3F7994) 5%, var(--color-card-bg));
-}
-
-.sc-dtype-radio__hd {
-  font: 700 12.5px var(--o2-font);
-  color: var(--color-text-primary, currentColor);
-}
-
-.sc-dtype-radio__sub {
-  font-size: 11px;
-  font-weight: 400;
-  color: var(--color-text-secondary, var(--o2-text-secondary));
-  margin-top: 3px;
-  line-height: 1.4;
-}
-
-.sc-range-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.sc-range-row__label {
-  color: var(--color-text-secondary, var(--o2-text-secondary));
-  font-size: 11px;
-}
-
-.sc-ht-section {
-  margin-top: 4px;
-  padding: 12px 14px 10px;
-  border: 1px solid var(--color-dialog-header-border, var(--o2-border));
-  border-radius: 6px;
-  background: color-mix(in srgb, var(--color-primary-600, #3F7994) 2.5%, var(--color-card-bg));
-}
-
-.sc-ht-section__head {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 12px;
-}
-
-/* Title + info icon hug together; the 10px head gap separates them from the
-   "optional" badge. */
-.sc-ht-section__title-group {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.sc-ht-section__info {
-  color: var(--color-text-secondary, var(--o2-text-secondary));
-}
-
-.sc-ht-section__foot {
-  display: flex;
-  align-items: flex-start;
-  gap: 6px;
-  margin-top: 10px;
-  padding-top: 8px;
-  border-top: 1px dashed var(--color-dialog-header-border, var(--o2-border));
-  font-size: 11px;
-  color: var(--color-text-secondary, var(--o2-text-secondary));
-  line-height: 1.5;
-}
-
-/* child selector: cannot be inlined */
-.sc-ht-section__foot > :first-child {
-  flex-shrink: 0;
-  margin-top: 2px;
-  color: var(--color-text-secondary, var(--o2-text-secondary));
-}
-
-.sc-ht-field-label {
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--color-text-secondary, var(--o2-text-secondary));
-  margin-bottom: 8px;
-}
-
-.sc-ht-radio-row {
-  display: flex;
-  gap: 10px;
-}
-
-/* Narrow drawers: fall back to stacked so the label + input don't crush. */
-@media (max-width: 820px) {
-  .sc-ht-radio-row {
-    flex-direction: column;
-  }
-}
-
-.sc-ht-num-radio {
-  flex: 1;
-  min-width: 0;
-  display: grid;
-  grid-template-columns: 18px 20px minmax(0, 1fr) 80px;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 12px;
-  border: 1px solid var(--color-dialog-header-border, var(--o2-border));
-  border-radius: 5px;
-  background: var(--color-card-bg);
-  cursor: pointer;
-  transition: border-color 0.12s, background 0.12s;
-}
-
-.sc-ht-num-radio:hover {
-  border-color: color-mix(in srgb, var(--color-primary-600, #3F7994) 40%, var(--color-dialog-header-border, var(--o2-border)));
-}
-
-.sc-ht-num-radio--selected {
-  border-color: var(--color-primary-600, #3F7994);
-  background: color-mix(in srgb, var(--color-primary-600, #3F7994) 4%, var(--color-card-bg));
-}
-
-.sc-ht-sym {
-  font-size: 17px;
-  font-weight: 700;
-  color: var(--color-text-primary, currentColor);
-  text-align: center;
-}
-
-.sc-ht-op { font-size: 12.5px; color: var(--color-text-primary, currentColor); }
-
-.sc-ht-num-input { width: 100%; }
-
-.sc-ht-example {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-top: 8px;
-  font-size: 11px;
-  color: var(--color-text-secondary, var(--o2-text-secondary));
-}
-
-/* child selector: cannot be inlined */
-.sc-ht-example > :first-child {
-  flex-shrink: 0;
-  color: var(--color-status-info-text);
-}
-
-/* descendant selector: cannot be inlined */
-.sc-ht-example code {
-  font-family: var(--o2-font-mono);
-  font-weight: 700;
-  color: var(--color-text-primary, var(--o2-text));
-}
-
-.sc-ht-checks {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  border: 1px solid var(--color-dialog-header-border, var(--o2-border));
-  border-radius: 5px;
-  background: var(--color-card-bg);
-  padding: 4px;
-}
-
-.sc-ht-check {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 7px 10px;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: background 0.12s;
-}
-
-.sc-ht-check:hover { background: color-mix(in srgb, var(--color-text-primary) 6%, transparent); }
-
-.sc-ht-check--on {
-  background: color-mix(in srgb, color-mix(in srgb, var(--color-status-success-text) 14%, transparent) 35%, transparent);
-}
-
-.sc-ht-empty {
-  font-size: 11.5px;
-  font-style: italic;
-  color: var(--color-text-secondary, var(--o2-text-secondary));
-  padding: 10px 12px;
-  border: 1px dashed var(--color-dialog-header-border, var(--o2-border));
-  border-radius: 5px;
-  background: var(--color-card-bg);
-}
-
-.sc-ht-bool-radios {
-  display: flex;
-  gap: 10px;
-}
-
-/* Narrow drawers: stack so the label + hint don't crush. */
-@media (max-width: 820px) {
-  .sc-ht-bool-radios {
-    flex-direction: column;
-  }
-}
-
-.sc-ht-bool-radio {
-  flex: 1;
-  min-width: 0;
-  display: grid;
-  grid-template-columns: 16px 1fr;
-  align-items: start;
-  gap: 10px;
-  padding: 7px 12px;
-  border: 1px solid var(--color-dialog-header-border, var(--o2-border));
-  border-radius: 5px;
-  background: var(--color-card-bg);
-  cursor: pointer;
-  transition: border-color 0.12s, background 0.12s;
-}
-
-.sc-ht-bool-radio:hover {
-  border-color: color-mix(in srgb, var(--color-primary-600, #3F7994) 40%, var(--color-dialog-header-border, var(--o2-border)));
-}
-
-/* dynamic selected state: cannot be inlined */
-.sc-ht-bool-radio--selected {
-  border-color: var(--color-primary-600, #3F7994);
-  background: color-mix(in srgb, var(--color-primary-600, #3F7994) 4%, var(--color-card-bg));
-}
-
-/* pseudo-class + pseudo-element: cannot be inlined */
-.sc-radio:checked { border-color: var(--color-primary-600, #3F7994); }
-
 .sc-radio:checked::after {
   content: "";
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: var(--color-primary-600, #3F7994);
+  width: 0.4375rem;
+  height: 0.4375rem;
+  border-radius: var(--radius-full);
+  background: var(--color-primary-600);
 }
 
-/* pseudo-class + pseudo-element: cannot be inlined */
 .sc-checkbox:checked {
-  background: var(--color-primary-600, #3F7994);
-  border-color: var(--color-primary-600, #3F7994);
+  background: var(--color-primary-600);
+  border-color: var(--color-primary-600);
 }
 
 .sc-checkbox:checked::after {
   content: "";
-  width: 7px;
-  height: 4px;
-  border-left: 1.5px solid white;
-  border-bottom: 1.5px solid white;
-  transform: rotate(-45deg) translate(0, -1px);
+  width: 0.4375rem;
+  height: 0.25rem;
+  border-left: 0.09375rem solid var(--color-white);
+  border-bottom: 0.09375rem solid var(--color-white);
+  transform: rotate(-45deg) translate(0, -0.0625rem);
 }
 </style>
diff --git a/web/src/enterprise/components/onlineEvals/forms/ScorerDetail.vue b/web/src/enterprise/components/onlineEvals/forms/ScorerDetail.vue
index 7e5b92ada5..6c19228de9 100644
--- a/web/src/enterprise/components/onlineEvals/forms/ScorerDetail.vue
+++ b/web/src/enterprise/components/onlineEvals/forms/ScorerDetail.vue
@@ -1,5 +1,6 @@
 <template>
   <ODrawer
+    bleed
     :open="open"
     side="right"
     :width="70"
@@ -18,7 +19,7 @@
            (right-aligned) so it reads as a page-level control, not a per-tab
            filter. Refresh re-queries everything. -->
       <div
-        class="flex items-center justify-end gap-[0.5rem] px-5 pt-3"
+        class="flex items-center justify-end gap-2 px-5 pt-3"
       >
         <DateTimePickerDashboard
           ref="dateTimePickerRef"
@@ -44,7 +45,7 @@
            consistent. Pinned band (shrink-0) with a bottom divider; the cards
            below carry their own chrome via Tailwind. -->
       <section
-        class="flex-shrink-0 grid grid-cols-4 gap-[0.625rem] px-5 py-4 border-b border-b-[var(--color-dialog-header-border,var(--o2-border))]"
+        class="shrink-0 grid grid-cols-4 gap-2.5 px-5 py-4 border-b border-b-dialog-header-border"
       >
         <!-- While the KPI query is in flight, show skeleton tiles in place of
              the cards (matches the LLM Insights dashboard pattern). -->
@@ -53,22 +54,22 @@
           v-for="card in kpiCards"
           v-else
           :key="card.label"
-          class="rounded-lg flex flex-col px-[0.875rem] pt-[0.625rem] pb-[0.625rem] gap-[0.25rem] bg-[var(--color-surface-base)] border border-[var(--color-border-default)] transition-shadow duration-200 hover:shadow-[0_0.0625rem_0.375rem_rgba(0,0,0,0.08)]"
+          class="rounded-default flex flex-col px-3.5 pt-2.5 pb-2.5 gap-1 bg-surface-base border border-border-default transition-shadow duration-200 hover:shadow-md"
         >
           <div
-            class="kpi-label text-[0.7rem] leading-normal font-semibold mb-[0.25rem] text-[var(--color-text-secondary)]"
+            class="kpi-label text-2xs leading-normal font-semibold mb-1 text-text-secondary"
           >
             {{ card.label }}
           </div>
-          <div class="flex items-baseline gap-[0.2rem]">
+          <div class="flex items-baseline gap-0.75">
             <span
-              class="text-[1.4rem] font-bold leading-none text-[var(--color-grey-600)]"
+              class="text-2xl font-bold leading-none text-text-secondary"
             >
               {{ card.value }}
             </span>
             <span
               v-if="card.unit"
-              class="text-[0.8rem] font-semibold text-[var(--color-text-secondary)]"
+              class="text-compact font-semibold text-text-secondary"
             >
               {{ card.unit }}
             </span>
@@ -80,7 +81,7 @@
       <OTabs
         :model-value="activeTab"
         bordered
-        class="flex-shrink-0 px-5"
+        class="shrink-0 px-5"
         data-test="scorer-detail-tabs"
         @update:model-value="activeTab = $event as TabId"
       >
@@ -104,8 +105,8 @@
 
       <!-- ── Body ── -->
       <div
-        class="flex-1 overflow-auto flex flex-col gap-[1.125rem] min-h-0 pt-[1.125rem]"
-        :class="{ 'pb-[1.125rem]': activeTab !== 'runs' }"
+        class="flex-1 overflow-auto flex flex-col gap-4.5 min-h-0 pt-4.5"
+        :class="{ 'pb-4.5': activeTab !== 'runs' }"
       >
         <!-- Runs filter row — agent filter, right-aligned. The date picker +
              refresh live in the global toolbar above the cards, so they're not
@@ -115,13 +116,13 @@
           v-show="runsEnabled"
           class="flex items-center justify-end gap-2 flex-wrap px-5"
         >
-          <div class="w-[14rem] flex-shrink-0">
+          <div class="w-56 shrink-0">
             <OSelect
               v-model="agentKey"
               :options="agentOptions"
               labelKey="label"
               valueKey="value"
-              class="w-full rounded"
+              class="w-full rounded-default"
               data-test="scorer-detail-runs-agent-filter"
             />
           </div>
@@ -146,7 +147,7 @@
                   <span v-if="provider">{{
                     provider.name
                   }}</span>
-                  <span v-else class="sd-muted">{{
+                  <span v-else class="text-text-secondary italic">{{
                     t("onlineEvals.scorer.detail.providerUnknown")
                   }}</span>
                 </dd>
@@ -166,7 +167,7 @@
 
           <section class="flex flex-col gap-2 px-5">
             <h4
-              class="m-0 pb-[0.375rem] inline-flex items-center gap-[0.375rem] text-[0.8125rem] font-semibold leading-[1.5] text-[var(--color-text-primary)] border-b border-b-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)]"
+              class="m-0 pb-1.5 inline-flex items-center gap-1.5 text-compact font-semibold leading-normal text-text-heading border-b border-b-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)]"
             >
               {{ t("onlineEvals.scorer.detail.producesSection") }}
             </h4>
@@ -197,7 +198,7 @@
 
           <section v-if="row.template" class="flex flex-col gap-2 px-5">
             <h4
-              class="m-0 pb-[0.375rem] inline-flex items-center gap-[0.375rem] text-[0.8125rem] font-semibold leading-[1.5] text-[var(--color-text-primary)] border-b border-b-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)]"
+              class="m-0 pb-1.5 inline-flex items-center gap-1.5 text-compact font-semibold leading-normal text-text-heading border-b border-b-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)]"
             >
               {{
                 scorerType === "llm_judge"
@@ -216,7 +217,7 @@
 
           <section v-if="outputSchemaPretty" class="flex flex-col gap-2 px-5">
             <h4
-              class="m-0 pb-[0.375rem] inline-flex items-center gap-[0.375rem] text-[0.8125rem] font-semibold leading-[1.5] text-[var(--color-text-primary)] border-b border-b-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)]"
+              class="m-0 pb-1.5 inline-flex items-center gap-1.5 text-compact font-semibold leading-normal text-text-heading border-b border-b-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)]"
             >
               {{ t("onlineEvals.scorer.detail.outputSchemaSection") }}
             </h4>
@@ -225,7 +226,7 @@
 
           <section class="flex flex-col gap-2 px-5">
             <h4
-              class="m-0 pb-[0.375rem] inline-flex items-center gap-[0.375rem] text-[0.8125rem] font-semibold leading-[1.5] text-[var(--color-text-primary)] border-b border-b-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)]"
+              class="m-0 pb-1.5 inline-flex items-center gap-1.5 text-compact font-semibold leading-normal text-text-heading border-b border-b-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)]"
             >
               {{ t("onlineEvals.scorer.detail.metadataSection") }}
             </h4>
@@ -291,7 +292,7 @@
             class="w-full"
           >
             <template #cell-timestampMs="{ row }">
-              <span class="text-[var(--color-text-secondary)]">{{
+              <span class="text-text-secondary">{{
                 relativeTime(row.timestampMs)
               }}</span>
             </template>
@@ -305,7 +306,7 @@
                 :title="row.targetSpanId"
                 >{{ row.targetSpanId }}</span
               >
-              <span v-else class="text-[var(--color-text-secondary)]">—</span>
+              <span v-else class="text-text-secondary">—</span>
             </template>
             <template #cell-targetTraceId="{ row }">
               <span
@@ -314,7 +315,7 @@
                 :title="row.targetTraceId"
                 >{{ row.targetTraceId }}</span
               >
-              <span v-else class="text-[var(--color-text-secondary)]">—</span>
+              <span v-else class="text-text-secondary">—</span>
             </template>
             <template #cell-scoreDisplay="{ row }">
               <span>{{ row.scoreDisplay }}</span>
@@ -791,6 +792,9 @@ function relativeTime(timestampMs: number): string {
 </script>
 
 <style lang="scss" scoped>
+/* keep(complex-state): The <dl>/<dt>/<dd> element-selector grid, the used-by list's hover/:deep(button)
+   overrides, and the status-cell dot variants — descendant and pseudo-class
+   selectors with no element of their own to carry a utility. */
 // Page layout, spacing, colors, and text styling are Tailwind utilities in the
 // template (matching SessionDetails.vue). Only cohesive blocks that rely on
 // descendant/element selectors or hover state remain here. Font-family is never
@@ -798,14 +802,14 @@ function relativeTime(timestampMs: number): string {
 
 .sd__tab-intro {
   margin: 0;
-  font-size: 0.75rem;
+  font-size: var(--text-xs);
   line-height: 1.5;
-  color: var(--color-text-secondary, var(--o2-text-secondary));
+  color: var(--color-text-secondary, var(--color-text-secondary));
 }
 
 // Versions / Used By tab content sits directly in the body (not in a
-// .sd-section), so it needs the same horizontal inset the body no longer
-// carries. The Runs tab keeps its full-bleed table and is not wrapped here.
+// .sd-section), so it needs its own horizontal inset. The Runs tab keeps its
+// full-bleed table and is not wrapped here.
 .sd__tab-pad {
   display: flex;
   flex-direction: column;
@@ -822,35 +826,30 @@ function relativeTime(timestampMs: number): string {
 }
 
 .sd-kv dt {
-  font-size: 0.75rem;
+  font-size: var(--text-xs);
   font-weight: 600;
-  color: var(--color-text-secondary, var(--o2-text-secondary));
+  color: var(--color-text-secondary, var(--color-text-secondary));
 }
 
 .sd-kv dd {
   margin: 0;
-  font-size: 0.8125rem;
-  color: var(--color-text-primary, currentColor);
-}
-
-.sd-muted {
-  color: var(--color-text-secondary, var(--o2-text-secondary));
-  font-style: italic;
+  font-size: var(--text-compact);
+  color: var(--color-text-heading, currentColor);
 }
 
 .sd-type-chip {
   display: inline-flex;
   padding: 0.0625rem 0.375rem;
   border-radius: 0.1875rem;
-  font-size: 0.6875rem;
+  font-size: var(--text-2xs);
   font-weight: 600;
-  background: color-mix(in srgb, #6b76e3 14%, transparent);
-  color: #4f5bcf;
+  background: var(--color-badge-indigo-soft-bg);
+  color: var(--color-badge-indigo-soft-text);
 }
 
 .sd-type-chip--remote {
-  background: color-mix(in srgb, #b25400 14%, transparent);
-  color: #b25400;
+  background: var(--color-badge-orange-soft-bg);
+  color: var(--color-badge-orange-soft-text);
 }
 
 .sd-version-chip {
@@ -858,10 +857,10 @@ function relativeTime(timestampMs: number): string {
   margin-left: 0.375rem;
   padding: 0.0625rem 0.375rem;
   border-radius: 0.1875rem;
-  font-size: 0.6875rem;
+  font-size: var(--text-2xs);
   font-weight: 600;
   background: color-mix(in srgb, var(--color-text-secondary) 10%, transparent);
-  color: var(--color-text-secondary, var(--o2-text-secondary));
+  color: var(--color-text-secondary, var(--color-text-secondary));
 }
 
 .sd-produces {
@@ -871,14 +870,14 @@ function relativeTime(timestampMs: number): string {
   padding: 0.625rem 0.75rem;
   background: color-mix(
     in srgb,
-    var(--color-primary-600, #3f7994) 8%,
+    var(--color-primary-600) 8%,
     transparent
   );
   border: 0.0625rem solid
-    color-mix(in srgb, var(--color-primary-600, #3f7994) 30%, transparent);
+    color-mix(in srgb, var(--color-primary-600) 30%, transparent);
   border-radius: 0.3125rem;
-  font-size: 0.75rem;
-  color: var(--color-text-primary, currentColor);
+  font-size: var(--text-xs);
+  color: var(--color-text-heading, currentColor);
 }
 
 .sd-produces__name {
@@ -888,22 +887,22 @@ function relativeTime(timestampMs: number): string {
 .sd-produces__version,
 .sd-produces__sep,
 .sd-produces__type {
-  color: var(--color-text-secondary, var(--o2-text-secondary));
-  font-size: 0.6875rem;
+  color: var(--color-text-secondary, var(--color-text-secondary));
+  font-size: var(--text-2xs);
 }
 
 
 .sd-code {
   margin: 0;
   padding: 0.75rem;
-  background: color-mix(in srgb, var(--color-text-primary) 5%, transparent);
+  background: color-mix(in srgb, var(--color-text-heading) 5%, transparent);
   border: 0.0625rem solid
     color-mix(in srgb, var(--color-text-secondary) 14%, transparent);
   border-radius: 0.375rem;
   font-family: var(--font-mono);
-  font-size: 0.75rem;
+  font-size: var(--text-xs);
   line-height: 1.55;
-  color: var(--color-text-primary, currentColor);
+  color: var(--color-text-heading, currentColor);
   white-space: pre-wrap;
   word-break: break-word;
   max-height: 12.5rem;
@@ -935,12 +934,12 @@ function relativeTime(timestampMs: number): string {
 .sd-versions__item--active {
   border-color: color-mix(
     in srgb,
-    var(--color-primary-600, #3f7994) 30%,
+    var(--color-primary-600) 30%,
     transparent
   );
   background: color-mix(
     in srgb,
-    var(--color-primary-600, #3f7994) 5%,
+    var(--color-primary-600) 5%,
     var(--color-card-bg)
   );
 }
@@ -953,15 +952,15 @@ function relativeTime(timestampMs: number): string {
 
 .sd-versions__label {
   font-weight: 700;
-  font-size: 0.8125rem;
-  color: var(--color-text-primary, currentColor);
+  font-size: var(--text-compact);
+  color: var(--color-text-heading, currentColor);
 }
 
 .sd-versions__chip {
   display: inline-flex;
   padding: 0.0625rem 0.4375rem;
   border-radius: 0.1875rem;
-  font-size: 0.625rem;
+  font-size: var(--text-3xs);
   font-weight: 600;
   background: color-mix(
     in srgb,
@@ -973,8 +972,8 @@ function relativeTime(timestampMs: number): string {
 
 .sd-versions__meta {
   margin-top: 0.375rem;
-  font-size: 0.71875rem;
-  color: var(--color-text-secondary, var(--o2-text-secondary));
+  font-size: var(--text-2xs);
+  color: var(--color-text-secondary, var(--color-text-secondary));
 }
 
 /* — Runs tab — */
@@ -982,14 +981,14 @@ function relativeTime(timestampMs: number): string {
   display: inline-flex;
   align-items: center;
   gap: 0.3125rem;
-  color: var(--color-text-secondary, var(--o2-text-secondary));
+  color: var(--color-text-secondary, var(--color-text-secondary));
 }
 
 .sd-status-cell__dot {
   width: 0.375rem;
   height: 0.375rem;
   border-radius: 50%;
-  background: var(--color-text-secondary, var(--o2-text-secondary));
+  background: var(--color-text-secondary, var(--color-text-secondary));
 }
 
 .sd-status-cell--success {
@@ -1039,12 +1038,12 @@ function relativeTime(timestampMs: number): string {
 .sd-used-list__item:hover {
   border-color: color-mix(
     in srgb,
-    var(--color-primary-600, #3f7994) 35%,
+    var(--color-primary-600) 35%,
     transparent
   ) !important;
   background: color-mix(
     in srgb,
-    var(--color-primary-600, #3f7994) 5%,
+    var(--color-primary-600) 5%,
     transparent
   ) !important;
 }
@@ -1053,26 +1052,26 @@ function relativeTime(timestampMs: number): string {
   height: auto !important;
   padding: 0.5rem 0.625rem !important;
   gap: 0.5rem;
-  font-size: 0.75rem;
+  font-size: var(--text-xs);
   justify-content: flex-start;
   text-align: left;
 }
 
 .sd-used-list__meta {
   margin-left: auto;
-  font-size: 0.625rem;
+  font-size: var(--text-3xs);
   text-transform: uppercase;
   letter-spacing: 0.04em;
-  color: var(--color-text-secondary, var(--o2-text-secondary));
+  color: var(--color-text-secondary, var(--color-text-secondary));
 }
 
 .sd-used-list__chevron {
-  color: var(--color-text-secondary, var(--o2-text-secondary));
+  color: var(--color-text-secondary, var(--color-text-secondary));
   opacity: 0.5;
 }
 
 .sd-used-list__item:hover .sd-used-list__chevron {
-  color: var(--color-primary-600, #3f7994);
+  color: var(--color-primary-600);
   opacity: 1;
 }
 </style>
diff --git a/web/src/enterprise/components/onlineEvals/forms/ScorerFormPage.schema.ts b/web/src/enterprise/components/onlineEvals/forms/ScorerFormPage.schema.ts
index 926165c669..2bce5f34d1 100644
--- a/web/src/enterprise/components/onlineEvals/forms/ScorerFormPage.schema.ts
+++ b/web/src/enterprise/components/onlineEvals/forms/ScorerFormPage.schema.ts
@@ -1,26 +1,11 @@
 // Copyright 2026 OpenObserve Inc.
 //
 // Validation schema for ScorerFormPage.vue (online-evals scorer create/edit
-// page, llm_judge + remote variants). This native-`<form>` page shipped with
-// `*` markers but NO client-side validation — the migration to OForm + Zod ADDS
-// the missing validation (online-evals-migration.md row 33).
+// page, llm_judge + remote variants).
 //
-// The component OWNS <OForm> via the Rule-③ owner pattern: it creates the form
-// with `useOForm` and reads it reactively through `form.useStore` — a SINGLE
-// source of truth, NO mirror ref, NO `v-model`, NO `store.subscribe` sync. That
-// read view (`formValues`) drives the parent-side conditionals a parent can't get
-// from form context: the `scorerType`/`authType` `v-if` sections, the previews,
-// the live Scorer Test panel + schema-preview dialog, and the duplicate-field
-// highlight; programmatic writes (`handleScoreConfigSelection`, version-pinning)
-// go through `form.setFieldValue`. Every rendered control is form-owned (`name=` +
-// a schema entry below) so validation stays schema-driven; the two repeatable-row
-// arrays (extraMetadataFields / customHeaders) are form-owned `z.array`
-// field-arrays (START-HERE ① — arrays are TanStack-owned), rendered from the form
-// store with index `:key`s and add/remove via `form.setFieldValue`.
-//
-// Validation TIMING is owned by OForm (submit-then-change); this file only
+// Validation timing is owned by OForm (submit-then-change); this file only
 // describes WHAT is valid. The @submit payload carries RAW values, so the
-// component trims/coerces at save just as the old `v-model.trim`/`.number` did.
+// component trims/coerces at save.
 
 import { z } from "zod";
 
@@ -54,13 +39,12 @@ export const makeScorerFormSchema = (t: (_key: string) => string) =>
       // Discriminator — seeded once, drives the conditional requireds below.
       scorerType: z.enum(["llm_judge", "remote"]).default("llm_judge"),
       description: z.string().optional().default(""),
-      // Optional — matches main + the backend contract. A scorer with no score
-      // config is a valid server-side entity (`produces_score_config_id:
-      // Option<String>` with #[serde(default)]), and it was creatable on main
-      // (the `*` marker was cosmetic, never enforced). The @submit handler maps
-      // an empty selection to `null`. Do NOT make this `requiredText`: that
-      // made scorers without a score config uncreatable, and blocked editing
-      // legacy scorers that already have none (the field is locked in edit).
+      // Optional — a scorer with no score config is a valid server-side entity
+      // (`produces_score_config_id: Option<String>` with #[serde(default)]). The
+      // @submit handler maps an empty selection to `null`. Do NOT make this
+      // `requiredText`: that would make scorers without a score config uncreatable
+      // and block editing legacy scorers that already have none (the field is
+      // locked in edit).
       producesScoreConfigId: z.string().optional().default(""),
       // Internal version-pinning state — not a rendered control; optional.
       producesScoreConfigVersion: z.string().optional().default(""),
@@ -69,11 +53,9 @@ export const makeScorerFormSchema = (t: (_key: string) => string) =>
       // ── LLM judge ───────────────────────────────────────────────────────
       providerId: z.string().optional().default(""),
       model: z.string().optional().default(""),
-      // Template is intentionally NOT required, matching pre-migration
-      // (origin/main) behavior: main had no template validation, so legacy
-      // scorers may exist with an empty template. Requiring it here would block
-      // re-saving those records on edit — so it stays optional (create seeds a
-      // default template; edit preserves whatever was stored).
+      // Intentionally NOT required: legacy scorers may exist with an empty
+      // template, and requiring it here would block re-saving those on edit
+      // (create seeds a default template; edit preserves whatever was stored).
       template: z.string().optional().default(""),
       includeReasoning: z.boolean().optional().default(true),
       extraMetadataFields: z.array(extraMetadataFieldSchema).default([]),
@@ -161,8 +143,7 @@ export const makeScorerFormSchema = (t: (_key: string) => string) =>
         }
       }
 
-      // Extra-metadata field names must be unique (mirrors the old CSS-only
-      // duplicate highlight, now an enforced rule). Flag every duplicate row.
+      // Extra-metadata field names must be unique. Flag every duplicate row.
       const counts = new Map<string, number>();
       val.extraMetadataFields.forEach((field) => {
         const key = field.name.trim();
diff --git a/web/src/enterprise/components/onlineEvals/forms/ScorerFormPage.vue b/web/src/enterprise/components/onlineEvals/forms/ScorerFormPage.vue
index fa0a8e6691..0f97df6894 100644
--- a/web/src/enterprise/components/onlineEvals/forms/ScorerFormPage.vue
+++ b/web/src/enterprise/components/onlineEvals/forms/ScorerFormPage.vue
@@ -7,14 +7,13 @@
     <!-- Shared page header (same as JobFormPage) so the two eval forms read
          identically: Back pill in the module-icon slot, title, and the
          scorer-type badge + close button in #actions. -->
-    <AppPageHeader
+    <OPageLayout
       :back="{
         label: t('onlineEvals.scorer.backTo'),
         onClick: () => $emit('cancel'),
         dataTest: 'scorer-form-back-btn',
       }"
-      class="px-3 border-b border-border-default"
-      style="flex-shrink: 0"
+      bleed
     >
       <template #title>
         <span data-test="scorer-form-title">{{ titleText }}</span>
@@ -39,22 +38,21 @@
           @click="$emit('cancel')"
         />
       </template>
-    </AppPageHeader>
 
     <div class="flex-1 min-h-0 overflow-hidden grid grid-cols-[minmax(0,1.6fr)_minmax(320px,0.9fr)] max-[1100px]:grid-cols-1 gap-2.5">
-      <div class="scorer-form__main min-w-0 overflow-auto p-[18px_24px_24px] bg-(--color-surface-base) rounded-md shadow-[0_0_0.313rem_0.063rem_var(--o2-hover-shadow)]">
+      <div class="scorer-form__main min-w-0 overflow-auto p-[18px_24px_24px] bg-surface-base rounded-default border border-border-default">
         <!-- Section 01: Identity -->
         <section class="mb-6">
-          <div class="flex items-center gap-[10px] pb-[10px] border-b border-(--color-dialog-header-border) mb-3">
-            <span class="inline-flex items-center justify-center w-[22px] h-[22px] rounded-full bg-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)] text-(--color-text-secondary) font-bold text-[11px] font-mono">01</span>
-            <h3 class="m-0 text-sm font-semibold text-(--color-text-primary)">{{ t("onlineEvals.scorer.identitySection") }}</h3>
+          <div class="flex items-center gap-2.5 pb-2.5 border-b border-dialog-header-border mb-3">
+            <span class="inline-flex items-center justify-center w-5.5 h-5.5 rounded-full bg-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)] text-text-secondary font-bold text-2xs font-mono">01</span>
+            <h3 class="m-0 text-sm font-semibold text-text-heading">{{ t("onlineEvals.scorer.identitySection") }}</h3>
           </div>
 
           <div class="mb-3">
-            <label class="flex items-center text-xs font-semibold text-(--color-text-primary) mb-1">
+            <label class="flex items-center text-xs font-semibold text-text-heading mb-1">
               {{ t("onlineEvals.scorer.nameLabel") }}
-              <span class="text-(--color-status-error-text) ml-[2px]">*</span>
-              <OIcon v-if="mode === 'edit'" name="lock" size="xs" class="ml-1.5 text-(--color-text-secondary)" />
+              <span class="text-status-error-text ml-0.5">*</span>
+              <OIcon v-if="mode === 'edit'" name="lock" size="xs" class="ml-1.5 text-text-secondary" />
             </label>
             <OFormInput
               name="name"
@@ -66,7 +64,7 @@
           </div>
 
           <div class="mb-3">
-            <label class="flex items-center text-xs font-semibold text-(--color-text-primary) mb-1">
+            <label class="flex items-center text-xs font-semibold text-text-heading mb-1">
               {{ t("onlineEvals.scorer.descriptionLabel") }}
             </label>
             <OFormTextarea
@@ -79,9 +77,9 @@
           </div>
 
           <div class="mb-3">
-            <label class="flex items-center text-xs font-semibold text-(--color-text-primary) mb-1">
+            <label class="flex items-center text-xs font-semibold text-text-heading mb-1">
               {{ t("onlineEvals.scorer.producesScoreConfigLabel") }}
-              <OIcon v-if="mode === 'edit'" name="lock" size="xs" class="ml-1.5 text-(--color-text-secondary)" />
+              <OIcon v-if="mode === 'edit'" name="lock" size="xs" class="ml-1.5 text-text-secondary" />
             </label>
             <OFormSelect
               name="producesScoreConfigId"
@@ -92,28 +90,28 @@
               data-test="scorer-form-score-config-select"
               @update:modelValue="handleScoreConfigSelection"
             />
-            <div class="text-[11.5px] text-(--color-text-secondary) mt-1">{{ t("onlineEvals.scorer.producesScoreHelp") }}</div>
+            <div class="text-2xs text-text-secondary mt-1">{{ t("onlineEvals.scorer.producesScoreHelp") }}</div>
 
-            <div v-if="selectedScoreConfig" class="flex items-center flex-wrap gap-[6px_10px] p-[8px_12px] mt-2 border border-[color-mix(in_srgb,var(--color-status-info-text)_25%,transparent)] rounded-md bg-[color-mix(in_srgb,var(--color-status-info-text)_8%,transparent)] text-xs text-(--color-text-primary)">
-              <span class="w-2 h-2 rounded-full bg-(--color-status-info-text) shrink-0" />
+            <div v-if="selectedScoreConfig" class="flex items-center flex-wrap gap-[6px_10px] p-[8px_12px] mt-2 border border-[color-mix(in_srgb,var(--color-status-info-text)_25%,transparent)] rounded-default bg-[color-mix(in_srgb,var(--color-status-info-text)_8%,transparent)] text-xs text-text-body">
+              <span class="w-2 h-2 rounded-full bg-status-info-text shrink-0" />
               <span class="font-medium">
                 {{ t("onlineEvals.scorer.selectedPrefix") }}
                 <strong class="font-mono">{{ selectedScoreConfig.name }}</strong>
               </span>
-              <span class="text-(--color-text-secondary)">·</span>
-              <span class="text-(--color-text-secondary)">
+              <span class="text-text-secondary">·</span>
+              <span class="text-text-secondary">
                 {{ t("onlineEvals.scorer.typeLabel") }}
                 <span class="font-mono">{{ dataTypeOf(selectedScoreConfig) }}</span>
               </span>
               <template v-if="selectedRange">
-                <span class="text-(--color-text-secondary)">·</span>
-                <span class="text-(--color-text-secondary)">
+                <span class="text-text-secondary">·</span>
+                <span class="text-text-secondary">
                   {{ t("onlineEvals.scorer.rangeLabel") }}
                   <span class="font-mono">{{ selectedRange }}</span>
                 </span>
               </template>
-              <span class="text-(--color-text-secondary)">·</span>
-              <span class="text-(--color-text-secondary)">
+              <span class="text-text-secondary">·</span>
+              <span class="text-text-secondary">
                 {{ t("onlineEvals.scorer.healthyLabel") }}
                 <span class="font-mono">{{ selectedHealthy }}</span>
               </span>
@@ -123,15 +121,15 @@
 
         <!-- Section 02: LLM Judge configuration -->
         <section v-if="formValues.scorerType === 'llm_judge'" class="mb-6">
-          <div class="flex items-center gap-[10px] pb-[10px] border-b border-(--color-dialog-header-border) mb-3">
-            <span class="inline-flex items-center justify-center w-[22px] h-[22px] rounded-full bg-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)] text-(--color-text-secondary) font-bold text-[11px] font-mono">02</span>
-            <h3 class="m-0 text-sm font-semibold text-(--color-text-primary)">{{ t("onlineEvals.scorer.judgeSection") }}</h3>
+          <div class="flex items-center gap-2.5 pb-2.5 border-b border-dialog-header-border mb-3">
+            <span class="inline-flex items-center justify-center w-5.5 h-5.5 rounded-full bg-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)] text-text-secondary font-bold text-2xs font-mono">02</span>
+            <h3 class="m-0 text-sm font-semibold text-text-heading">{{ t("onlineEvals.scorer.judgeSection") }}</h3>
           </div>
 
           <div class="mb-3">
-            <label class="flex items-center text-xs font-semibold text-(--color-text-primary) mb-1">
+            <label class="flex items-center text-xs font-semibold text-text-heading mb-1">
               {{ t("onlineEvals.scorer.providerLabel") }}
-              <span class="text-(--color-status-error-text) ml-[2px]">*</span>
+              <span class="text-status-error-text ml-0.5">*</span>
             </label>
             <div class="flex items-center gap-2">
               <OFormSelect
@@ -153,30 +151,30 @@
               />
             </div>
 
-            <div v-if="selectedProvider" class="flex items-center flex-wrap gap-[6px_10px] p-[8px_12px] mt-2 border border-[color-mix(in_srgb,var(--color-status-info-text)_25%,transparent)] rounded-md bg-[color-mix(in_srgb,var(--color-status-info-text)_8%,transparent)] text-xs text-(--color-text-primary)">
-              <span class="w-2 h-2 rounded-full bg-(--color-status-info-text) shrink-0" />
-              <span class="text-(--color-text-secondary)">
+            <div v-if="selectedProvider" class="flex items-center flex-wrap gap-[6px_10px] p-[8px_12px] mt-2 border border-[color-mix(in_srgb,var(--color-status-info-text)_25%,transparent)] rounded-default bg-[color-mix(in_srgb,var(--color-status-info-text)_8%,transparent)] text-xs text-text-body">
+              <span class="w-2 h-2 rounded-full bg-status-info-text shrink-0" />
+              <span class="text-text-secondary">
                 {{ t("onlineEvals.scorer.endpointLabel") }}
                 <span class="font-mono">{{ providerEndpoint(selectedProvider) }}</span>
               </span>
-              <span class="text-(--color-text-secondary)">·</span>
-              <span class="text-(--color-text-secondary)">
+              <span class="text-text-secondary">·</span>
+              <span class="text-text-secondary">
                 {{ t("onlineEvals.scorer.defaultModelPreviewLabel") }}
                 <span class="font-mono">{{ defaultModelOf(selectedProvider) || "—" }}</span>
               </span>
-              <span class="text-(--color-text-secondary)">·</span>
-              <span class="text-(--color-text-secondary)">
+              <span class="text-text-secondary">·</span>
+              <span class="text-text-secondary">
                 {{ t("onlineEvals.scorer.authLabel") }}
                 <span class="font-mono">{{ t("onlineEvals.scorer.authConfigured") }}</span>
               </span>
             </div>
 
-            <div class="text-[11.5px] text-(--color-text-secondary) mt-1">
+            <div class="text-2xs text-text-secondary mt-1">
               <i18n-t keypath="onlineEvals.scorer.providerHelp" tag="span">
                 <template #settingsLink>
                   <router-link
                     :to="{ name: 'llmProviders' }"
-                    class="scorer-field__help-link text-(--color-primary-600) font-semibold no-underline hover:underline"
+                    class="scorer-field__help-link text-primary-600 font-semibold no-underline hover:underline"
                     target="_blank"
                   >
                     {{ t("onlineEvals.scorer.providerHelpSettingsLink") }}
@@ -187,7 +185,7 @@
           </div>
 
           <div class="mb-3">
-            <label class="flex items-center text-xs font-semibold text-(--color-text-primary) mb-1">{{ t("onlineEvals.scorer.modelLabel") }}</label>
+            <label class="flex items-center text-xs font-semibold text-text-heading mb-1">{{ t("onlineEvals.scorer.modelLabel") }}</label>
             <OFormInput
               name="model"
               :placeholder="t('onlineEvals.scorer.modelPlaceholder')"
@@ -196,10 +194,10 @@
             />
           </div>
 
-          <div class="mb-3 flex flex-col gap-[14px]">
-            <label class="flex items-center text-xs font-semibold text-(--color-text-primary) mb-1">
+          <div class="mb-3 flex flex-col gap-3.5">
+            <label class="flex items-center text-xs font-semibold text-text-heading mb-1">
               {{ t("onlineEvals.scorer.promptLabel") }}
-              <span class="text-(--color-status-error-text) ml-[2px]">*</span>
+              <span class="text-status-error-text ml-0.5">*</span>
             </label>
             <OFormTextarea
               name="template"
@@ -207,17 +205,17 @@
               :rows="8"
               data-test="scorer-form-prompt-input"
             />
-            <div class="flex items-center flex-wrap gap-1.5 mt-1.5 text-[11.5px]">
-              <span class="text-(--color-text-secondary)">
+            <div class="flex items-center flex-wrap gap-1.5 mt-1.5 text-2xs">
+              <span class="text-text-secondary">
                 {{ t("onlineEvals.scorer.promptVariablesLabel") }}
               </span>
               <span
                 v-for="v in promptVariables"
                 :key="v"
-                class="py-[1px] px-1.5 rounded-[3px] text-[11px] font-mono bg-[color-mix(in_srgb,var(--color-text-secondary)_10%,transparent)] text-(--color-text-primary)"
+                class="py-px px-1.5 rounded-default text-2xs font-mono bg-[color-mix(in_srgb,var(--color-text-secondary)_10%,transparent)] text-text-body"
               >{{ formatTemplateVariable(v) }}</span>
             </div>
-            <div class="text-[11.5px] text-(--color-text-secondary) mt-1">
+            <div class="text-2xs text-text-secondary mt-1">
               {{
                 t("onlineEvals.scorer.promptHelp", {
                   inputVar: formatTemplateVariable("input"),
@@ -227,7 +225,7 @@
             </div>
           </div>
 
-          <div class="mb-3 flex flex-col gap-[14px]">
+          <div class="mb-3 flex flex-col gap-3.5">
             <OFormCheckbox
               name="includeReasoning"
               class="scorer-extras__toggle"
@@ -235,8 +233,8 @@
             >
               <template #label>
                 <span>
-                  <strong class="block text-xs text-(--color-text-primary)">{{ t("onlineEvals.scorer.includeReasoningLabel") }}</strong>
-                  <small class="block text-[11px] text-(--color-text-secondary)">{{ t("onlineEvals.scorer.includeReasoningHint") }}</small>
+                  <strong class="block text-xs text-text-heading">{{ t("onlineEvals.scorer.includeReasoningLabel") }}</strong>
+                  <small class="block text-2xs text-text-secondary">{{ t("onlineEvals.scorer.includeReasoningHint") }}</small>
                 </span>
               </template>
             </OFormCheckbox>
@@ -244,19 +242,19 @@
             <div class="flex justify-between items-baseline gap-3">
               <div class="flex flex-col gap-0.5">
                 <strong class="text-xs font-semibold">{{ t("onlineEvals.scorer.extraFieldsLabel") }}</strong>
-                <span class="text-[10px] font-semibold text-(--color-text-muted) uppercase tracking-[0.04em]">
+                <span class="text-3xs font-semibold text-text-muted uppercase tracking-[0.04em]">
                   {{ t("onlineEvals.scorer.extraFieldsOptional") }}
                 </span>
-                <small class="block text-[11px] text-(--color-text-secondary)">{{ t("onlineEvals.scorer.extraFieldsHint") }}</small>
+                <small class="block text-2xs text-text-secondary">{{ t("onlineEvals.scorer.extraFieldsHint") }}</small>
               </div>
             </div>
 
             <div
               v-if="formValues.extraMetadataFields.length"
-              class="flex flex-col gap-1.5 border border-(--color-border) rounded-md p-[8px_10px] bg-(--color-card-bg-solid)"
+              class="flex flex-col gap-1.5 border border-border-default rounded-default p-[8px_10px] bg-card-bg"
               data-test="scorer-form-extra-fields"
             >
-              <div class="grid grid-cols-[minmax(120px,1fr)_110px_minmax(140px,2fr)_28px] gap-2 items-center text-[10px] font-semibold uppercase tracking-[0.04em]">
+              <div class="grid grid-cols-[minmax(120px,1fr)_110px_minmax(140px,2fr)_28px] gap-2 items-center text-3xs font-semibold uppercase tracking-[0.04em]">
                 <span>{{ t("onlineEvals.scorer.extraFields.colName") }}</span>
                 <span>{{ t("onlineEvals.scorer.extraFields.colType") }}</span>
                 <span>{{ t("onlineEvals.scorer.extraFields.colDescription") }}</span>
@@ -288,7 +286,7 @@
                 />
                 <button
                   type="button"
-                  class="w-6 h-6 border-0 bg-transparent text-(--color-text-secondary) text-base cursor-pointer rounded hover:bg-[color-mix(in_srgb,var(--color-status-error-text)_12%,transparent)] hover:text-(--color-status-error-text)"
+                  class="w-6 h-6 border-0 bg-transparent text-text-secondary text-base cursor-pointer rounded-default hover:bg-[color-mix(in_srgb,var(--color-status-error-text)_12%,transparent)] hover:text-status-error-text"
                   :aria-label="t('onlineEvals.buttons.remove')"
                   :data-test="`scorer-form-extra-field-remove-${idx}`"
                   @click="removeExtraField(idx)"
@@ -301,20 +299,20 @@
             <div class="flex justify-between gap-3">
               <button
                 type="button"
-                class="border-0 bg-transparent py-1 px-0 text-xs font-semibold text-(--color-primary-600) cursor-pointer disabled:text-(--color-text-muted) disabled:cursor-not-allowed"
+                class="border-0 bg-transparent py-1 px-0 text-xs font-semibold text-primary-600 cursor-pointer disabled:text-text-muted disabled:cursor-not-allowed"
                 :disabled="formValues.extraMetadataFields.length >= MAX_EXTRA_FIELDS"
                 data-test="scorer-form-extra-field-add"
                 @click="addExtraField"
               >
                 {{ t("onlineEvals.scorer.extraFields.addButton") }}
-                <span class="font-normal text-(--color-text-secondary) ml-1">
+                <span class="font-normal text-text-secondary ml-1">
                   ({{ formValues.extraMetadataFields.length }} / {{ MAX_EXTRA_FIELDS }})
                 </span>
               </button>
 
               <button
                 type="button"
-                class="scorer-extras__preview border-0 bg-transparent py-1 px-0 text-xs font-semibold text-(--color-primary-600) cursor-pointer"
+                class="scorer-extras__preview border-0 bg-transparent py-1 px-0 text-xs font-semibold text-primary-600 cursor-pointer"
                 data-test="scorer-form-preview-schema"
                 @click="previewOutputSchema"
               >
@@ -327,15 +325,15 @@
 
         <!-- Section 02: Endpoint -->
         <section v-else class="mb-6">
-          <div class="flex items-center gap-[10px] pb-[10px] border-b border-(--color-dialog-header-border) mb-3">
-            <span class="inline-flex items-center justify-center w-[22px] h-[22px] rounded-full bg-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)] text-(--color-text-secondary) font-bold text-[11px] font-mono">02</span>
-            <h3 class="m-0 text-sm font-semibold text-(--color-text-primary)">{{ t("onlineEvals.scorer.endpointSection") }}</h3>
+          <div class="flex items-center gap-2.5 pb-2.5 border-b border-dialog-header-border mb-3">
+            <span class="inline-flex items-center justify-center w-5.5 h-5.5 rounded-full bg-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)] text-text-secondary font-bold text-2xs font-mono">02</span>
+            <h3 class="m-0 text-sm font-semibold text-text-heading">{{ t("onlineEvals.scorer.endpointSection") }}</h3>
           </div>
 
           <div class="mb-3">
-            <label class="flex items-center text-xs font-semibold text-(--color-text-primary) mb-1">
+            <label class="flex items-center text-xs font-semibold text-text-heading mb-1">
               {{ t("onlineEvals.scorer.remoteUrlLabel") }}
-              <span class="text-(--color-status-error-text) ml-[2px]">*</span>
+              <span class="text-status-error-text ml-0.5">*</span>
             </label>
             <div class="scorer-url-bar grid grid-cols-[104px_minmax(0,1fr)] gap-0">
               <OFormSelect
@@ -356,7 +354,7 @@
 
           <div class="mb-3 grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)] gap-3">
             <div class="flex flex-col gap-1.5">
-              <label class="flex items-center text-xs font-semibold text-(--color-text-primary) mb-1">
+              <label class="flex items-center text-xs font-semibold text-text-heading mb-1">
                 {{ t("onlineEvals.scorer.remoteTimeoutLabel") }}
               </label>
               <OFormInput
@@ -368,7 +366,7 @@
               />
             </div>
             <div class="flex flex-col gap-1.5">
-              <label class="flex items-center text-xs font-semibold text-(--color-text-primary) mb-1">
+              <label class="flex items-center text-xs font-semibold text-text-heading mb-1">
                 {{ t("onlineEvals.scorer.remoteRetriesLabel") }}
               </label>
               <OFormInput
@@ -380,7 +378,7 @@
               />
             </div>
             <div class="flex flex-col gap-1.5">
-              <label class="flex items-center text-xs font-semibold text-(--color-text-primary) mb-1">
+              <label class="flex items-center text-xs font-semibold text-text-heading mb-1">
                 {{ t("onlineEvals.scorer.remoteBackoffLabel") }}
               </label>
               <OFormSelect
@@ -396,13 +394,13 @@
 
         <!-- Section 03: Authentication -->
         <section v-if="formValues.scorerType === 'remote'" class="mb-6">
-          <div class="flex items-center gap-[10px] pb-[10px] border-b border-(--color-dialog-header-border) mb-3">
-            <span class="inline-flex items-center justify-center w-[22px] h-[22px] rounded-full bg-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)] text-(--color-text-secondary) font-bold text-[11px] font-mono">03</span>
-            <h3 class="m-0 text-sm font-semibold text-(--color-text-primary)">{{ t("onlineEvals.scorer.authSection") }}</h3>
+          <div class="flex items-center gap-2.5 pb-2.5 border-b border-dialog-header-border mb-3">
+            <span class="inline-flex items-center justify-center w-5.5 h-5.5 rounded-full bg-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)] text-text-secondary font-bold text-2xs font-mono">03</span>
+            <h3 class="m-0 text-sm font-semibold text-text-heading">{{ t("onlineEvals.scorer.authSection") }}</h3>
           </div>
 
           <div class="mb-3">
-            <label class="flex items-center text-xs font-semibold text-(--color-text-primary) mb-1">
+            <label class="flex items-center text-xs font-semibold text-text-heading mb-1">
               {{ t("onlineEvals.scorer.remoteAuthLabel") }}
             </label>
             <!-- Clearable so a user can return to "no auth": the auth-type
@@ -423,9 +421,9 @@
           </div>
 
           <div v-if="formValues.authType === 'bearer'" class="mb-3">
-            <label class="flex items-center text-xs font-semibold text-(--color-text-primary) mb-1">
+            <label class="flex items-center text-xs font-semibold text-text-heading mb-1">
               {{ t("onlineEvals.scorer.remoteAuth.tokenLabel") }}
-              <span class="text-(--color-status-error-text) ml-[2px]">*</span>
+              <span class="text-status-error-text ml-0.5">*</span>
             </label>
             <OFormInput
               name="authBearerToken"
@@ -434,16 +432,16 @@
               type="password"
               data-test="scorer-form-remote-auth-bearer-token"
             />
-            <div class="text-[11.5px] text-(--color-text-secondary) mt-1">
+            <div class="text-2xs text-text-secondary mt-1">
               {{ t("onlineEvals.scorer.remoteAuth.encryptedHint") }}
             </div>
           </div>
 
           <div v-if="formValues.authType === 'basic'" class="mb-3 grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)] gap-3">
             <div class="flex flex-col gap-1.5">
-              <label class="flex items-center text-xs font-semibold text-(--color-text-primary) mb-1">
+              <label class="flex items-center text-xs font-semibold text-text-heading mb-1">
                 {{ t("onlineEvals.scorer.remoteAuth.usernameLabel") }}
-                <span class="text-(--color-status-error-text) ml-[2px]">*</span>
+                <span class="text-status-error-text ml-0.5">*</span>
               </label>
               <OFormInput
                 name="authBasicUsername"
@@ -453,9 +451,9 @@
               />
             </div>
             <div class="flex flex-col gap-1.5">
-              <label class="flex items-center text-xs font-semibold text-(--color-text-primary) mb-1">
+              <label class="flex items-center text-xs font-semibold text-text-heading mb-1">
                 {{ t("onlineEvals.scorer.remoteAuth.passwordLabel") }}
-                <span class="text-(--color-status-error-text) ml-[2px]">*</span>
+                <span class="text-status-error-text ml-0.5">*</span>
               </label>
               <OFormInput
                 name="authBasicPassword"
@@ -464,7 +462,7 @@
                 type="password"
                 data-test="scorer-form-remote-auth-basic-password"
               />
-              <div class="text-[11.5px] text-(--color-text-secondary) mt-1">
+              <div class="text-2xs text-text-secondary mt-1">
                 {{ t("onlineEvals.scorer.remoteAuth.encryptedHint") }}
               </div>
             </div>
@@ -472,9 +470,9 @@
 
           <div v-if="formValues.authType === 'api_key'" class="mb-3 grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)] gap-3">
             <div class="flex flex-col gap-1.5">
-              <label class="flex items-center text-xs font-semibold text-(--color-text-primary) mb-1">
+              <label class="flex items-center text-xs font-semibold text-text-heading mb-1">
                 {{ t("onlineEvals.scorer.remoteAuth.headerNameLabel") }}
-                <span class="text-(--color-status-error-text) ml-[2px]">*</span>
+                <span class="text-status-error-text ml-0.5">*</span>
               </label>
               <OFormInput
                 name="authApiKeyHeaderName"
@@ -484,9 +482,9 @@
               />
             </div>
             <div class="flex flex-col gap-1.5">
-              <label class="flex items-center text-xs font-semibold text-(--color-text-primary) mb-1">
+              <label class="flex items-center text-xs font-semibold text-text-heading mb-1">
                 {{ t("onlineEvals.scorer.remoteAuth.tokenLabel") }}
-                <span class="text-(--color-status-error-text) ml-[2px]">*</span>
+                <span class="text-status-error-text ml-0.5">*</span>
               </label>
               <OFormInput
                 name="authApiKeyToken"
@@ -495,7 +493,7 @@
                 type="password"
                 data-test="scorer-form-remote-auth-apikey-token"
               />
-              <div class="text-[11.5px] text-(--color-text-secondary) mt-1">
+              <div class="text-2xs text-text-secondary mt-1">
                 {{ t("onlineEvals.scorer.remoteAuth.encryptedHint") }}
               </div>
             </div>
@@ -504,10 +502,10 @@
 
         <!-- Section 04: Custom headers -->
         <section v-if="formValues.scorerType === 'remote'" class="mb-6">
-          <div class="flex items-center gap-[10px] pb-[10px] border-b border-(--color-dialog-header-border) mb-3">
-            <span class="inline-flex items-center justify-center w-[22px] h-[22px] rounded-full bg-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)] text-(--color-text-secondary) font-bold text-[11px] font-mono">04</span>
-            <h3 class="m-0 text-sm font-semibold text-(--color-text-primary)">{{ t("onlineEvals.scorer.headersSection") }}</h3>
-            <span class="ml-auto text-[11.5px] text-(--color-text-secondary) italic">
+          <div class="flex items-center gap-2.5 pb-2.5 border-b border-dialog-header-border mb-3">
+            <span class="inline-flex items-center justify-center w-5.5 h-5.5 rounded-full bg-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)] text-text-secondary font-bold text-2xs font-mono">04</span>
+            <h3 class="m-0 text-sm font-semibold text-text-heading">{{ t("onlineEvals.scorer.headersSection") }}</h3>
+            <span class="ml-auto text-2xs text-text-secondary italic">
               {{ t("onlineEvals.scorer.remoteHeaders.subtitle") }}
             </span>
           </div>
@@ -515,10 +513,10 @@
           <div class="mb-3">
             <div
               v-if="formValues.customHeaders.length"
-              class="flex flex-col gap-1.5 border border-(--color-border) rounded-md p-[8px_10px] bg-(--color-card-bg-solid)"
+              class="flex flex-col gap-1.5 border border-border-default rounded-default p-[8px_10px] bg-card-bg"
               data-test="scorer-form-remote-headers"
             >
-              <div class="grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_28px] gap-1.5 items-center text-[10px] font-semibold uppercase tracking-[0.04em]">
+              <div class="grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_28px] gap-1.5 items-center text-3xs font-semibold uppercase tracking-[0.04em]">
                 <span>{{ t("onlineEvals.scorer.remoteHeaders.colName") }}</span>
                 <span>{{ t("onlineEvals.scorer.remoteHeaders.colValue") }}</span>
                 <span aria-hidden="true" />
@@ -542,7 +540,7 @@
                 />
                 <button
                   type="button"
-                  class="w-6 h-6 border-0 bg-transparent text-(--color-text-secondary) text-base cursor-pointer rounded hover:bg-[color-mix(in_srgb,var(--color-status-error-text)_12%,transparent)] hover:text-(--color-status-error-text)"
+                  class="w-6 h-6 border-0 bg-transparent text-text-secondary text-base cursor-pointer rounded-default hover:bg-[color-mix(in_srgb,var(--color-status-error-text)_12%,transparent)] hover:text-status-error-text"
                   :aria-label="t('onlineEvals.buttons.remove')"
                   :data-test="`scorer-form-remote-header-remove-${idx}`"
                   @click="removeCustomHeader(idx)"
@@ -555,7 +553,7 @@
             <div class="flex justify-between gap-3">
               <button
                 type="button"
-                class="border-0 bg-transparent py-1 px-0 text-xs font-semibold text-(--color-primary-600) cursor-pointer"
+                class="border-0 bg-transparent py-1 px-0 text-xs font-semibold text-primary-600 cursor-pointer"
                 data-test="scorer-form-remote-header-add"
                 @click="addCustomHeader"
               >
@@ -567,15 +565,15 @@
 
         <!-- Section 05: Request body template -->
         <section v-if="formValues.scorerType === 'remote'" class="mb-6">
-          <div class="flex items-center gap-[10px] pb-[10px] border-b border-(--color-dialog-header-border) mb-3">
-            <span class="inline-flex items-center justify-center w-[22px] h-[22px] rounded-full bg-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)] text-(--color-text-secondary) font-bold text-[11px] font-mono">05</span>
-            <h3 class="m-0 text-sm font-semibold text-(--color-text-primary)">{{ t("onlineEvals.scorer.requestBodySection") }}</h3>
+          <div class="flex items-center gap-2.5 pb-2.5 border-b border-dialog-header-border mb-3">
+            <span class="inline-flex items-center justify-center w-5.5 h-5.5 rounded-full bg-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)] text-text-secondary font-bold text-2xs font-mono">05</span>
+            <h3 class="m-0 text-sm font-semibold text-text-heading">{{ t("onlineEvals.scorer.requestBodySection") }}</h3>
           </div>
 
           <div class="mb-3">
-            <label class="flex items-center text-xs font-semibold text-(--color-text-primary) mb-1">
+            <label class="flex items-center text-xs font-semibold text-text-heading mb-1">
               {{ t("onlineEvals.scorer.requestBodyLabel") }}
-              <span class="text-(--color-status-error-text) ml-[2px]">*</span>
+              <span class="text-status-error-text ml-0.5">*</span>
             </label>
             <OFormTextarea
               name="template"
@@ -583,14 +581,14 @@
               :rows="10"
               data-test="scorer-form-request-body-input"
             />
-            <div class="flex items-center flex-wrap gap-1.5 mt-1.5 text-[11.5px]">
-              <span class="text-(--color-text-secondary)">
+            <div class="flex items-center flex-wrap gap-1.5 mt-1.5 text-2xs">
+              <span class="text-text-secondary">
                 {{ t("onlineEvals.scorer.promptVariablesLabel") }}
               </span>
               <span
                 v-for="v in promptVariables"
                 :key="v"
-                class="py-[1px] px-1.5 rounded-[3px] text-[11px] font-mono bg-[color-mix(in_srgb,var(--color-text-secondary)_10%,transparent)] text-(--color-text-primary)"
+                class="py-px px-1.5 rounded-default text-2xs font-mono bg-[color-mix(in_srgb,var(--color-text-secondary)_10%,transparent)] text-text-body"
               >{{ formatTemplateVariable(v) }}</span>
             </div>
           </div>
@@ -609,7 +607,7 @@
       />
     </div>
 
-    <footer class="sticky bottom-0 flex items-center justify-end gap-2 px-5.5 py-3 bg-(--color-surface-base) rounded-md shadow-[0_0_0.313rem_0.063rem_var(--o2-hover-shadow)] shrink-0 z-1">
+    <footer class="sticky bottom-0 flex items-center justify-end gap-2 px-5.5 py-3 bg-surface-base border-t border-border-default shrink-0 z-1">
       <OButton
         data-test="scorer-form-cancel-btn"
         type="button"
@@ -637,16 +635,16 @@
       size="md"
       :title="t('onlineEvals.scorer.extraFields.schemaTitle')"
     >
-      <p v-if="isLoadingSchemaPreview" class="m-0 p-3 text-xs text-(--color-text-secondary)">
+      <p v-if="isLoadingSchemaPreview" class="m-0 p-3 text-xs text-text-secondary">
         {{ t("onlineEvals.scorer.extraFields.schemaLoading") }}
       </p>
       <p
         v-else-if="schemaPreviewError"
-        class="m-0 p-3 text-xs text-(--color-status-error-text)"
+        class="m-0 p-3 text-xs text-status-error-text"
       >
         {{ schemaPreviewError }}
       </p>
-      <pre class="m-0 max-h-[60vh] overflow-auto p-3 rounded-md bg-(--color-card-bg-solid) border border-(--color-border) font-normal text-xs font-(family-name:--o2-font-mono) text-(--color-text-primary) whitespace-pre [tab-size:2]" v-else>{{ schemaPreview }}</pre>
+      <pre class="m-0 max-h-[60vh] overflow-auto p-3 rounded-default bg-card-bg border border-border-default font-normal text-xs font-(family-name:--font-mono) text-text-body whitespace-pre [tab-size:2]" v-else>{{ schemaPreview }}</pre>
 
       <template #footer>
         <div class="flex items-center justify-between gap-2 w-full">
@@ -671,6 +669,7 @@
         </div>
       </template>
     </ODialog>
+    </OPageLayout>
   </OForm>
 </template>
 
@@ -686,7 +685,7 @@ import OFormTextarea from "@/lib/forms/Input/OFormTextarea.vue";
 import OFormSelect from "@/lib/forms/Select/OFormSelect.vue";
 import OFormCheckbox from "@/lib/forms/Checkbox/OFormCheckbox.vue";
 import ODialog from "@/lib/overlay/Dialog/ODialog.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import OTag from "@/lib/core/Badge/OTag.vue";
 import { toast } from "@/lib/feedback/Toast/useToast";
 import onlineEvalsService, {
@@ -738,10 +737,9 @@ const { t } = useI18n();
 // mounted fresh for each create/edit action, so building it once is safe.
 const scorerFormSchema = makeScorerFormSchema(t);
 
-// OWNER pattern (Rule ③): this component owns <OForm>, so it creates the form
-// with useOForm and reads it reactively via form.useStore — a SINGLE source of
-// truth, NO mirror ref and NO store.subscribe array sync. `formValues` drives
-// the parent-side reads a parent can't get from form context: the
+// This component owns <OForm>, so it creates the form with useOForm and reads it
+// reactively via form.useStore. `formValues` drives the template reads that need
+// live form state: the
 // `scorerType`/`authType` `v-if` sections, the previews
 // (selectedScoreConfig/selectedProvider), the duplicate-field highlight, the
 // repeatable-row arrays (extraMetadataFields/customHeaders), and the live Scorer
@@ -913,7 +911,6 @@ function buildAuthPayload(src: ScorerForm): Record<string, any> | null {
   }
   if (kind === "basic") {
     const username = src.authBasicUsername.trim();
-    // Trim parity with the pre-migration `v-model.trim` on the password field.
     const password = src.authBasicPassword.trim();
     if (!username || !password) return null;
     return { type: "basic", username, password };
@@ -929,8 +926,7 @@ function buildAuthPayload(src: ScorerForm): Record<string, any> | null {
 
 function buildRemoteParams(src: ScorerForm): Record<string, any> {
   const params: Record<string, any> = {
-    // Trim parity with the pre-migration `v-model.trim` (stray whitespace around
-    // a pasted URL should never reach the payload).
+    // Trim stray whitespace around a pasted URL so it never reaches the payload.
     endpoint: src.remoteEndpoint.trim(),
     http_method: src.httpMethod || DEFAULT_HTTP_METHOD,
     timeout_ms: Number(src.timeoutMs) || DEFAULT_TIMEOUT_MS,
@@ -1282,9 +1278,8 @@ async function prepareSelectedScoreConfigVersion(keepSelectedVersion: boolean) {
 
 // @submit handler — OForm only calls this once the whole schema passes (incl.
 // the conditional auth/provider/endpoint requireds + extra-field uniqueness), so
-// the schema (not a manual guard) gates the save. The entangled `form` mirror is
-// schema-synced, so the existing build helpers read from it unchanged; OForm
-// awaits this promise → the Save spinner spans the save (no manual `isSaving`).
+// the schema (not a manual guard) gates the save. OForm awaits this promise → the
+// Save spinner spans the save.
 async function save(value: ScorerForm) {
   if (!props.orgId) return;
   try {
@@ -1345,29 +1340,33 @@ async function save(value: ScorerForm) {
 }
 </script>
 
-<style>
-/* The global `label:not(.o-input-label)` rule (unlayered) overrides these
-   field labels' `text-(--color-text-primary)`/`font-semibold`/`text-xs`
-   utilities, graying them out. This higher-specificity selector restores the
-   dark primary color + weight/size, matching main's scoped `.scorer-field__label`. */
+<style scoped>
+/* keep(complex-state): the global `label:not(.o-input-label)` element rule
+   (unlayered) out-specifies the color/weight/size utilities on these field
+   labels, graying them out — this higher-specificity :not() selector restores
+   the primary color + weight/size. */
 .scorer-form__main label:not(.o-input-label) {
-  color: var(--color-text-primary, currentColor);
+  color: var(--color-text-heading, currentColor);
   font-weight: 600;
-  font-size: 12px;
+  font-size: var(--text-xs);
 }
 
-.scorer-form__main textarea {
-  max-height: 280px;
+/* keep(lib-override:o2-forms): native <textarea>/<select>/<input> rendered inside
+   OFormTextarea / OFormSelect / OFormInput are child-component DOM reachable only
+   through :deep(); the url-bar rules butt-join the method select and endpoint
+   input into one control. */
+.scorer-form__main :deep(textarea) {
+  max-height: 17.5rem;
   overflow-y: auto;
 }
 
-.scorer-url-bar .o-select__trigger,
-.scorer-url-bar select {
+.scorer-url-bar :deep(.o-select__trigger),
+.scorer-url-bar :deep(select) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 
-.scorer-url-bar input {
+.scorer-url-bar :deep(input) {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
diff --git a/web/src/enterprise/components/onlineEvals/forms/ScorerTypeDialog.vue b/web/src/enterprise/components/onlineEvals/forms/ScorerTypeDialog.vue
index 097912c37d..bb2afafab9 100644
--- a/web/src/enterprise/components/onlineEvals/forms/ScorerTypeDialog.vue
+++ b/web/src/enterprise/components/onlineEvals/forms/ScorerTypeDialog.vue
@@ -1,16 +1,16 @@
 <template>
   <div
-    class="fixed inset-0 bg-black/32 z-6000 flex items-center justify-center animate-[scorer-type-scrim-in_0.15s_ease-out]"
+    class="scorer-type-scrim fixed inset-0 bg-black/32 z-6000 flex items-center justify-center"
     role="dialog"
     aria-modal="true"
     @click.self="$emit('close')"
   >
-    <div class="w-[min(820px,calc(100vw-48px))] bg-card-bg border border-dialog-header-border rounded-lg shadow-(--o2-shadow-lg,0_8px_24px_rgba(0,0,0,0.12),0_2px_6px_rgba(0,0,0,0.08)) px-5.5 pt-5 pb-6 animate-[scorer-type-pop-in_0.18s_ease-out]">
+    <div class="scorer-type-panel w-[min(820px,calc(100vw-48px))] bg-card-bg border border-dialog-header-border rounded-default shadow-(--shadow-lg,0_8px_24px_rgba(0,0,0,0.12),0_2px_6px_rgba(0,0,0,0.08)) px-5.5 pt-5 pb-6">
       <header class="flex items-center gap-3 pb-3 border-b border-dialog-header-border mb-4">
-        <h2 class="flex-1 m-0 text-base font-semibold text-text-primary">{{ t("onlineEvals.scorerTypeDialog.title") }}</h2>
+        <h2 class="flex-1 m-0 text-base font-semibold text-text-heading">{{ t("onlineEvals.scorerTypeDialog.title") }}</h2>
         <button
           type="button"
-          class="inline-flex items-center justify-center w-7 h-7 p-0 text-(--color-text-secondary,var(--o2-text-secondary)) bg-transparent border-0 rounded-md cursor-pointer transition-[background,color] duration-150 hover:bg-[color-mix(in_srgb,var(--color-text-primary)_6%,transparent)] hover:text-(--color-primary-600,#3F7994)"
+          class="inline-flex items-center justify-center w-7 h-7 p-0 text-(--color-text-secondary,var(--color-text-secondary)) bg-transparent border-0 rounded-default cursor-pointer transition-[background,color] duration-150 hover:bg-[color-mix(in_srgb,var(--color-text-heading)_6%,transparent)] hover:text-(--color-primary-600,#3F7994)"
           :aria-label="t('onlineEvals.buttons.cancel')"
           data-test="scorer-type-close-btn"
           @click="$emit('close')"
@@ -32,22 +32,22 @@
         </button>
       </header>
 
-      <p class="m-0 mb-4 text-text-secondary text-[13px] leading-normal">{{ t("onlineEvals.scorerTypeDialog.intro") }}</p>
+      <p class="m-0 mb-4 text-text-secondary text-compact leading-normal">{{ t("onlineEvals.scorerTypeDialog.intro") }}</p>
 
       <div class="grid grid-cols-3 max-[720px]:grid-cols-1 gap-3">
         <button
           type="button"
-          class="scorer-type-card relative flex flex-col items-start gap-[10px] min-h-[180px] py-4 px-4 pb-[14px] border border-(--color-dialog-header-border,var(--o2-border)) rounded-lg bg-(--color-card-bg) text-(--color-text-primary,currentColor) text-left cursor-pointer transition-[border-color,background,box-shadow] duration-[120ms]"
+          class="relative flex flex-col items-start gap-2.5 min-h-45 py-4 px-4 pb-3.5 border border-(--color-dialog-header-border,var(--color-border-default)) rounded-default bg-card-bg text-(--color-text-heading,currentColor) text-left cursor-pointer transition-[border-color,background,box-shadow] duration-[120ms] hover:border-(--color-primary-600,#3F7994) hover:bg-[color-mix(in_srgb,var(--color-primary-600)_4%,var(--color-card-bg))] hover:shadow-[0_0_0_3px_color-mix(in_srgb,var(--color-primary-600)_12%,transparent)]"
           data-test="scorer-type-llm-judge"
           @click="$emit('select', 'llm_judge')"
         >
-          <div class="inline-flex items-center justify-center w-9 h-9 rounded-lg bg-[color-mix(in_srgb,var(--color-primary-600)_10%,transparent)] text-(--color-primary-600,#3F7994)">
+          <div class="inline-flex items-center justify-center w-9 h-9 rounded-default bg-[color-mix(in_srgb,var(--color-primary-600)_10%,transparent)] text-(--color-primary-600,#3F7994)">
             <OIcon name="smart-toy" size="md" />
           </div>
-          <div class="text-sm font-semibold text-(--color-text-primary,currentColor)">
+          <div class="text-sm font-semibold text-(--color-text-heading,currentColor)">
             {{ t("onlineEvals.scorerTypeDialog.llmJudgeTitle") }}
           </div>
-          <div class="flex-1 text-xs leading-normal text-(--color-text-secondary,var(--o2-text-secondary))">
+          <div class="flex-1 text-xs leading-normal text-(--color-text-secondary,var(--color-text-secondary))">
             {{ t("onlineEvals.scorerTypeDialog.llmJudgeDescription") }}
           </div>
           <div class="inline-flex items-center gap-1 mt-auto text-xs font-semibold text-(--color-primary-600,#3F7994)">
@@ -58,17 +58,17 @@
 
         <button
           type="button"
-          class="scorer-type-card relative flex flex-col items-start gap-[10px] min-h-[180px] py-4 px-4 pb-[14px] border border-(--color-dialog-header-border,var(--o2-border)) rounded-lg bg-(--color-card-bg) text-(--color-text-primary,currentColor) text-left cursor-pointer transition-[border-color,background,box-shadow] duration-[120ms]"
+          class="relative flex flex-col items-start gap-2.5 min-h-45 py-4 px-4 pb-3.5 border border-(--color-dialog-header-border,var(--color-border-default)) rounded-default bg-card-bg text-(--color-text-heading,currentColor) text-left cursor-pointer transition-[border-color,background,box-shadow] duration-[120ms] hover:border-(--color-primary-600,#3F7994) hover:bg-[color-mix(in_srgb,var(--color-primary-600)_4%,var(--color-card-bg))] hover:shadow-[0_0_0_3px_color-mix(in_srgb,var(--color-primary-600)_12%,transparent)]"
           data-test="scorer-type-remote"
           @click="$emit('select', 'remote')"
         >
-          <div class="inline-flex items-center justify-center w-9 h-9 rounded-lg bg-[color-mix(in_srgb,var(--color-primary-600)_10%,transparent)] text-(--color-primary-600,#3F7994)">
+          <div class="inline-flex items-center justify-center w-9 h-9 rounded-default bg-[color-mix(in_srgb,var(--color-primary-600)_10%,transparent)] text-(--color-primary-600,#3F7994)">
             <OIcon name="cloud" size="md" />
           </div>
-          <div class="text-sm font-semibold text-(--color-text-primary,currentColor)">
+          <div class="text-sm font-semibold text-(--color-text-heading,currentColor)">
             {{ t("onlineEvals.scorerTypeDialog.remoteTitle") }}
           </div>
-          <div class="flex-1 text-xs leading-normal text-(--color-text-secondary,var(--o2-text-secondary))">
+          <div class="flex-1 text-xs leading-normal text-(--color-text-secondary,var(--color-text-secondary))">
             {{ t("onlineEvals.scorerTypeDialog.remoteDescription") }}
           </div>
           <div class="inline-flex items-center gap-1 mt-auto text-xs font-semibold text-(--color-primary-600,#3F7994)">
@@ -79,23 +79,23 @@
 
         <button
           type="button"
-          class="scorer-type-card scorer-type-card--disabled relative flex flex-col items-start gap-[10px] min-h-[180px] py-4 px-4 pb-[14px] border border-(--color-dialog-header-border,var(--o2-border)) rounded-lg bg-(--color-card-bg) text-(--color-text-primary,currentColor) text-left cursor-not-allowed opacity-60 transition-[border-color,background,box-shadow] duration-[120ms]"
+          class="relative flex flex-col items-start gap-2.5 min-h-45 py-4 px-4 pb-3.5 border border-(--color-dialog-header-border,var(--color-border-default)) rounded-default bg-card-bg text-(--color-text-heading,currentColor) text-left cursor-not-allowed opacity-60 transition-[border-color,background,box-shadow] duration-[120ms]"
           data-test="scorer-type-code"
           disabled
         >
-          <span class="absolute top-3 right-3 py-[2px] px-2 rounded text-[11px] font-semibold leading-normal bg-[color-mix(in_srgb,var(--color-status-warning-text)_14%,transparent)] text-(--color-status-warning-text)">
+          <span class="absolute top-3 right-3 py-0.5 px-2 rounded-default text-2xs font-semibold leading-normal bg-[color-mix(in_srgb,var(--color-status-warning-text)_14%,transparent)] text-status-warning-text">
             {{ t("onlineEvals.scorerTypeDialog.comingSoonBadge") }}
           </span>
-          <div class="inline-flex items-center justify-center w-9 h-9 rounded-lg bg-[color-mix(in_srgb,var(--color-primary-600)_10%,transparent)] text-(--color-primary-600,#3F7994)">
+          <div class="inline-flex items-center justify-center w-9 h-9 rounded-default bg-[color-mix(in_srgb,var(--color-primary-600)_10%,transparent)] text-(--color-primary-600,#3F7994)">
             <OIcon name="code" size="md" />
           </div>
-          <div class="text-sm font-semibold text-(--color-text-primary,currentColor)">
+          <div class="text-sm font-semibold text-(--color-text-heading,currentColor)">
             {{ t("onlineEvals.scorerTypeDialog.codeTitle") }}
           </div>
-          <div class="flex-1 text-xs leading-normal text-(--color-text-secondary,var(--o2-text-secondary))">
+          <div class="flex-1 text-xs leading-normal text-(--color-text-secondary,var(--color-text-secondary))">
             {{ t("onlineEvals.scorerTypeDialog.codeDescription") }}
           </div>
-          <div class="inline-flex items-center gap-1 mt-auto text-xs font-semibold text-(--color-text-secondary,var(--o2-text-secondary))">
+          <div class="inline-flex items-center gap-1 mt-auto text-xs font-semibold text-(--color-text-secondary,var(--color-text-secondary))">
             {{ t("onlineEvals.scorerTypeDialog.codeCta") }}
           </div>
         </button>
@@ -117,20 +117,36 @@ defineEmits<{
 const { t } = useI18n();
 </script>
 
-<style>
-.scorer-type-card:hover:not(.scorer-type-card--disabled) {
-  border-color: var(--color-primary-600, #3F7994);
-  background: color-mix(in srgb, var(--color-primary-600) 4%, var(--color-card-bg));
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-600) 12%, transparent);
+<style scoped>
+/* keep(keyframes): the scrim fade and the panel pop are used only by this dialog.
+   Both `animation`s are declared here, not as template `animate-[…]` utilities, so
+   Vue's scoped compiler renames each keyframe and its reference together. */
+.scorer-type-scrim {
+  animation: scrim-in 0.15s ease-out;
 }
 
-@keyframes scorer-type-scrim-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
+.scorer-type-panel {
+  animation: pop-in 0.18s ease-out;
 }
 
-@keyframes scorer-type-pop-in {
-  from { opacity: 0; transform: scale(0.96); }
-  to { opacity: 1; transform: scale(1); }
+@keyframes scrim-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes pop-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
 }
 </style>
+
diff --git a/web/src/enterprise/components/onlineEvals/forms/job/JobFilterBuilder.vue b/web/src/enterprise/components/onlineEvals/forms/job/JobFilterBuilder.vue
index 387558b56f..0ae06123f4 100644
--- a/web/src/enterprise/components/onlineEvals/forms/job/JobFilterBuilder.vue
+++ b/web/src/enterprise/components/onlineEvals/forms/job/JobFilterBuilder.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="mb-4">
     <div class="flex flex-col gap-0.5 mb-2">
-      <span class="text-xs font-semibold text-text-primary">{{ t("onlineEvals.job.filter.title") }}</span>
-      <span class="text-[11.5px] text-text-secondary">{{ t("onlineEvals.job.filter.hint") }}</span>
+      <span class="text-xs font-semibold text-text-heading">{{ t("onlineEvals.job.filter.title") }}</span>
+      <span class="text-2xs text-text-secondary">{{ t("onlineEvals.job.filter.hint") }}</span>
     </div>
     <div class="job-filter__group min-w-0">
       <FilterGroup
@@ -12,7 +12,7 @@
         :stream-fields="streamFields"
         :stream-fields-map="streamFieldsMap"
         :show-sql-preview="true"
-        condition-input-width="w-[150px]"
+        condition-input-width="w-37.5"
         :allow-custom-columns="true"
         module="alerts"
         @add-condition="handleUpdate"
@@ -81,22 +81,25 @@ function handleInputUpdate() {
 }
 </script>
 
-<style>
-.job-filter__group  .el-border {
+<style scoped>
+/* keep(lib-override:alerts-filter-group): .filter-group-box / .group-container are
+   FilterGroup's internal DOM, reachable only through :deep(); the width/margin
+   overrides fit the shared builder into this narrow column. */
+.job-filter__group :deep(.filter-group-box) {
   width: 100%;
   max-width: 100%;
   margin-left: 0 !important;
-  border-color: var(--color-dialog-header-border, var(--o2-border));
+  border-color: var(--color-dialog-header-border, var(--color-border-default));
 }
 
 /* Only the root group sits flush under the label. Nested groups keep their
    top margin so the upward-shifted AND/OR toggle isn't clipped by the
    parent .group-container (overflow-x-auto also clips vertically). */
-.job-filter__group > .el-border {
+.job-filter__group > :deep(.filter-group-box) {
   margin-top: 0 !important;
 }
 
-.job-filter__group .group-container {
+.job-filter__group :deep(.group-container) {
   width: 100%;
 }
 </style>
diff --git a/web/src/enterprise/components/onlineEvals/forms/job/JobInputMapping.vue b/web/src/enterprise/components/onlineEvals/forms/job/JobInputMapping.vue
index eaf15aea4b..f752c00adb 100644
--- a/web/src/enterprise/components/onlineEvals/forms/job/JobInputMapping.vue
+++ b/web/src/enterprise/components/onlineEvals/forms/job/JobInputMapping.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="flex flex-col gap-[10px]">
+  <div class="flex flex-col gap-2.5">
     <div class="flex flex-col gap-0.5">
-      <span class="text-xs font-semibold text-text-primary">{{ t("onlineEvals.job.inputMapping.title") }}</span>
-      <span class="text-[11.5px] text-text-secondary">{{ t("onlineEvals.job.inputMapping.hint") }}</span>
+      <span class="text-xs font-semibold text-text-heading">{{ t("onlineEvals.job.inputMapping.title") }}</span>
+      <span class="text-2xs text-text-secondary">{{ t("onlineEvals.job.inputMapping.hint") }}</span>
     </div>
     <div
       v-if="selectedScorers.length === 0"
-      class="py-2.5 px-3 border border-dashed border-dialog-header-border rounded-md text-text-secondary text-xs text-center"
+      class="py-2.5 px-3 border border-dashed border-dialog-header-border rounded-default text-text-secondary text-xs text-center"
     >
       {{ t("onlineEvals.job.inputMapping.selectScorers") }}
     </div>
@@ -14,19 +14,19 @@
       <article
         v-for="scorer in selectedScorers"
         :key="entityId(scorer)"
-        class="border border-dialog-header-border rounded-md bg-card-bg overflow-hidden"
+        class="border border-dialog-header-border rounded-default bg-card-bg overflow-hidden"
       >
         <div class="flex items-center justify-between gap-3 py-2.5 px-3 border-b border-dialog-header-border">
           <div class="flex flex-col gap-px min-w-0">
-            <strong class="text-[13px] font-semibold text-text-primary truncate">{{ scorer.name }}</strong>
-            <small class="text-[11px] text-text-secondary">{{
+            <strong class="text-compact font-semibold text-text-heading truncate">{{ scorer.name }}</strong>
+            <small class="text-2xs text-text-secondary">{{
               t("onlineEvals.job.scorerPicker.meta", {
                 type: scorerTypeOf(scorer).replace("_", " "),
                 version: scorer.version,
               })
             }}</small>
           </div>
-          <span class="shrink-0 text-[11px] font-semibold text-text-secondary">
+          <span class="shrink-0 text-2xs font-semibold text-text-secondary">
             {{ t("onlineEvals.job.inputMapping.variableCount", { count: variablesFor(scorer).length }) }}
           </span>
         </div>
@@ -36,9 +36,9 @@
             :key="`${entityId(scorer)}-${variable}`"
             class="grid grid-cols-[minmax(130px,0.35fr)_minmax(0,1fr)] items-center gap-2.5"
           >
-            <code class="overflow-hidden py-1.25 px-2 rounded bg-[color-mix(in_srgb,var(--color-text-secondary)_10%,transparent)] text-text-primary font-semibold text-[11px] font-mono truncate">{{ formatTemplateVariable(variable) }}</code>
+            <code class="overflow-hidden py-1.25 px-2 rounded-default bg-[color-mix(in_srgb,var(--color-text-secondary)_10%,transparent)] text-text-label font-semibold text-2xs font-mono truncate">{{ formatTemplateVariable(variable) }}</code>
             <input
-              class="w-full h-7 py-0 px-2.5 border border-input-border rounded bg-input-bg text-input-text font-normal text-xs font-mono outline-none transition-colors duration-120 focus:border-[var(--color-primary-600,#3F7994)]"
+              class="w-full h-7 py-0 px-2.5 border border-input-border rounded-default bg-input-bg text-input-text font-normal text-xs font-mono outline-none transition-colors duration-120 focus:border-primary-600"
               :value="inputMappings[entityId(scorer)]?.[variable] || ''"
               :placeholder="defaultJobMappingValue(variable)"
               @input="updateMapping(entityId(scorer), variable, ($event.target as HTMLInputElement).value)"
@@ -47,7 +47,7 @@
         </div>
         <div
           v-else
-          class="py-2.5 px-3 border border-dashed border-dialog-header-border rounded-md text-text-secondary text-xs text-center"
+          class="py-2.5 px-3 border border-dashed border-dialog-header-border rounded-default text-text-secondary text-xs text-center"
         >
           {{ t("onlineEvals.job.inputMapping.noVariables") }}
         </div>
diff --git a/web/src/enterprise/components/onlineEvals/forms/job/JobPreviewPanel.vue b/web/src/enterprise/components/onlineEvals/forms/job/JobPreviewPanel.vue
index cc7d87824d..8c706f8343 100644
--- a/web/src/enterprise/components/onlineEvals/forms/job/JobPreviewPanel.vue
+++ b/web/src/enterprise/components/onlineEvals/forms/job/JobPreviewPanel.vue
@@ -1,9 +1,9 @@
 <template>
-  <aside class="flex-[3.5] min-w-0 overflow-auto p-2 bg-(--color-surface-base) rounded-md shadow-[0_0_0.313rem_0.063rem_var(--o2-hover-shadow)]">
-    <section class="py-[14px] px-4 mb-3 border border-(--color-dialog-header-border,var(--o2-border)) rounded-md">
-      <header class="flex items-center gap-[6px] mb-[6px] text-(--color-text-secondary,var(--o2-text-secondary))">
+  <aside class="flex-[3.5] min-w-0 overflow-auto p-2 bg-surface-base rounded-default shadow-[0_0_0.313rem_0.063rem_var(--color-hover-shadow)]">
+    <section class="py-3.5 px-4 mb-3 border border-(--color-dialog-header-border,var(--color-border-default)) rounded-default">
+      <header class="flex items-center gap-1.5 mb-1.5 text-(--color-text-secondary,var(--color-text-secondary))">
         <OIcon name="visibility" size="xs" />
-        <span class="m-0 text-[0.8125rem] font-semibold text-(--color-text-primary,currentColor)">{{ t("onlineEvals.job.preview.title") }}</span>
+        <span class="m-0 text-compact font-semibold text-(--color-text-heading,currentColor)">{{ t("onlineEvals.job.preview.title") }}</span>
       </header>
       <div v-if="!stream" class="m-0 text-text-secondary text-xs leading-normal">
         {{ t("onlineEvals.job.preview.hint") }}
@@ -14,23 +14,23 @@
       <div v-else-if="matchedLoading" class="m-0 text-text-secondary text-xs leading-normal">
         {{ t("onlineEvals.job.preview.matchedLoading") }}
       </div>
-      <div v-else-if="matchedError" class="m-0 text-xs text-(--color-status-error-text)">
+      <div v-else-if="matchedError" class="m-0 text-xs text-status-error-text">
         {{ t("onlineEvals.job.preview.matchedError") }}
       </div>
       <div v-else class="flex items-baseline gap-1.5">
-        <span class="text-2xl font-bold text-(--color-grey-600) [font-variant-numeric:tabular-nums]">{{ formattedCount }}</span>
-        <span class="text-xs text-(--color-text-secondary,var(--o2-text-secondary))">
+        <span class="text-2xl font-bold text-text-secondary [font-variant-numeric:tabular-nums]">{{ formattedCount }}</span>
+        <span class="text-xs text-(--color-text-secondary,var(--color-text-secondary))">
           {{ t("onlineEvals.job.preview.matchedSuffix") }}
         </span>
       </div>
     </section>
 
-    <section class="py-[14px] px-4 mb-0 border border-(--color-dialog-header-border,var(--o2-border)) rounded-md">
-      <header class="flex items-center gap-[6px] mb-[6px] text-(--color-text-secondary,var(--o2-text-secondary))">
+    <section class="py-3.5 px-4 mb-0 border border-(--color-dialog-header-border,var(--color-border-default)) rounded-default">
+      <header class="flex items-center gap-1.5 mb-1.5 text-(--color-text-secondary,var(--color-text-secondary))">
         <OIcon name="info" size="xs" />
-        <span class="m-0 text-[0.8125rem] font-semibold text-(--color-text-primary,currentColor)">{{ t("onlineEvals.job.preview.summaryTitle") }}</span>
+        <span class="m-0 text-compact font-semibold text-(--color-text-heading,currentColor)">{{ t("onlineEvals.job.preview.summaryTitle") }}</span>
       </header>
-      <dl class="grid grid-cols-[96px_1fr] gap-x-3 gap-y-2 m-0 text-xs [&_dt]:text-text-secondary [&_dd]:m-0 [&_dd]:text-text-primary">
+      <dl class="grid grid-cols-[96px_1fr] gap-x-3 gap-y-2 m-0 text-xs [&_dt]:text-text-secondary [&_dd]:m-0 [&_dd]:text-text-body">
         <dt>{{ t("onlineEvals.job.preview.summaryName") }}</dt>
         <dd>{{ name || t("onlineEvals.job.preview.emptyValue") }}</dd>
         <dt>{{ t("onlineEvals.job.preview.summaryType") }}</dt>
diff --git a/web/src/enterprise/components/onlineEvals/forms/job/JobScorerPicker.vue b/web/src/enterprise/components/onlineEvals/forms/job/JobScorerPicker.vue
index 4e74d3ec0f..afe242d63c 100644
--- a/web/src/enterprise/components/onlineEvals/forms/job/JobScorerPicker.vue
+++ b/web/src/enterprise/components/onlineEvals/forms/job/JobScorerPicker.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="mb-4">
     <div class="flex flex-col gap-0.5 mb-2">
-      <span class="text-xs font-semibold text-text-primary">{{ t("onlineEvals.job.scorerPicker.title") }}</span>
-      <span class="text-[11.5px] text-text-secondary">{{ t("onlineEvals.job.scorerPicker.hint") }}</span>
+      <span class="text-xs font-semibold text-text-heading">{{ t("onlineEvals.job.scorerPicker.title") }}</span>
+      <span class="text-2xs text-text-secondary">{{ t("onlineEvals.job.scorerPicker.hint") }}</span>
     </div>
     <OSelect
       :model-value="modelValue"
@@ -18,7 +18,7 @@
     />
     <div
       v-if="!scorers.length"
-      class="mt-2 py-3 px-3.5 border border-dashed border-dialog-header-border rounded-[6px] text-center text-text-secondary text-xs"
+      class="mt-2 py-3 px-3.5 border border-dashed border-dialog-header-border rounded-default text-center text-text-secondary text-xs"
     >
       {{ t("onlineEvals.job.scorerPicker.empty") }}
     </div>
diff --git a/web/src/enterprise/components/onlineEvals/forms/scorer/ScorerTestPanel.vue b/web/src/enterprise/components/onlineEvals/forms/scorer/ScorerTestPanel.vue
index ad785d7593..60de06428d 100644
--- a/web/src/enterprise/components/onlineEvals/forms/scorer/ScorerTestPanel.vue
+++ b/web/src/enterprise/components/onlineEvals/forms/scorer/ScorerTestPanel.vue
@@ -1,16 +1,16 @@
 <template>
-  <aside class="eval-form-page__side eval-form-page__side--test p-0">
-    <section class="eval-test-panel min-h-full p-5 bg-(--color-surface-base) rounded-md shadow-[0_0_0.313rem_0.063rem_var(--o2-hover-shadow)]">
+  <aside class="eval-form-page__side eval-form-page__side--test p-0 max-[60rem]:border-l-0 max-[60rem]:border-t max-[60rem]:border-border-default">
+    <section class="eval-test-panel min-h-full p-5 bg-surface-base rounded-default shadow-[0_0_0.313rem_0.063rem_var(--color-hover-shadow)]">
       <!-- Header -->
       <div class="flex flex-col gap-1">
-        <h3 class="m-0 text-(--color-text-heading) text-sm font-bold">{{ t("onlineEvals.scorer.testPanel.title") }}</h3>
-        <p class="m-0 text-(--color-text-secondary) text-xs leading-[1.45]">{{ t("onlineEvals.scorer.testPanel.hint") }}</p>
+        <h3 class="m-0 text-text-heading text-sm font-bold">{{ t("onlineEvals.scorer.testPanel.title") }}</h3>
+        <p class="m-0 text-text-secondary text-xs leading-[1.45]">{{ t("onlineEvals.scorer.testPanel.hint") }}</p>
       </div>
 
       <!-- Variable inputs -->
       <div v-if="variables.length" class="eval-test-panel__fields flex flex-col gap-3">
-        <div v-for="variable in variables" :key="variable" class="flex flex-col gap-[6px]">
-          <label class="text-(--color-text-primary) font-semibold text-xs [font-family:var(--o2-font-mono)]">{{ formatTemplateVariable(variable) }}</label>
+        <div v-for="variable in variables" :key="variable" class="flex flex-col gap-1.5">
+          <label class="text-text-label font-semibold text-xs font-mono">{{ formatTemplateVariable(variable) }}</label>
           <textarea
             :value="inputs[variable]"
             :rows="variable === 'metadata' ? 2 : 3"
@@ -20,19 +20,19 @@
               })
             "
             :data-test="`scorer-test-input-${variable}`"
-            class="w-full box-border border border-(--color-border-default) rounded bg-(--color-surface-base) text-(--color-text-primary) font-normal text-xs [font-family:var(--o2-font)] leading-normal py-2 px-[9px] [resize:vertical] max-h-[160px] overflow-y-auto"
+            class="w-full box-border border border-border-default rounded-default bg-surface-base text-text-body font-normal text-xs font-sans leading-normal py-2 px-2.25 [resize:vertical] max-h-40 overflow-y-auto placeholder:text-text-muted focus:outline-none focus:border-primary-600"
             @input="
               updateInput(variable, ($event.target as HTMLTextAreaElement).value)
             "
           />
         </div>
       </div>
-      <div v-else class="eval-test-panel__empty text-(--color-text-secondary) text-xs py-[10px] px-3 border border-(--color-border-default) rounded-md bg-(--color-surface-base) [&_code]:[font-family:var(--o2-font-mono)] [&_code]:font-semibold [&_code]:text-(--color-text-primary)">
+      <div v-else class="eval-test-panel__empty text-text-secondary text-xs py-2.5 px-3 border border-border-default rounded-default bg-surface-base [&_code]:font-mono [&_code]:font-semibold [&_code]:text-text-body">
         {{ t("onlineEvals.scorer.testPanel.emptyPrefix") }}<code v-text="'{{ input }}'" />{{ t("onlineEvals.scorer.testPanel.emptySuffix") }}
       </div>
 
       <!-- Run -->
-      <div class="eval-test-panel__actions flex flex-col items-start gap-[6px] mt-[14px]">
+      <div class="eval-test-panel__actions flex flex-col items-start gap-1.5 mt-3.5">
         <OButton
           variant="primary"
           size="sm-action"
@@ -46,7 +46,7 @@
         </OButton>
         <span
           v-if="!canRun && state !== 'running'"
-          class="text-[11px] italic text-(--color-text-secondary)"
+          class="text-2xs italic text-text-secondary"
           data-test="scorer-test-disabled-hint"
         >
           {{ t("onlineEvals.scorer.testPanel.disabledHint") }}
@@ -56,48 +56,48 @@
       <!-- Result — only shown once a test has run (no idle placeholder box). -->
       <div
         v-if="state !== 'idle'"
-        class="flex flex-col gap-2 mt-4 p-3 border border-(--color-border-default) rounded-md bg-(--color-surface-base) text-(--color-text-secondary) text-xs"
-        :class="{ 'border-[color-mix(in_srgb,var(--color-status-success-text)_35%,var(--color-border-default))]': state === 'success', 'border-[color-mix(in_srgb,var(--color-status-error-text)_35%,var(--color-border-default))] text-(--color-status-error-text)': state === 'error' }"
+        class="flex flex-col gap-2 mt-4 p-3 border border-border-default rounded-default bg-surface-base text-text-secondary text-xs"
+        :class="{ 'border-[color-mix(in_srgb,var(--color-status-success-text)_35%,var(--color-border-default))]': state === 'success', 'border-[color-mix(in_srgb,var(--color-status-error-text)_35%,var(--color-border-default))] text-status-error-text': state === 'error' }"
         data-test="scorer-test-result"
       >
         <template v-if="state === 'running'">
-          <span class="text-(--color-text-secondary)">{{ t("onlineEvals.scorer.testPanel.stateRunning") }}</span>
+          <span class="text-text-secondary">{{ t("onlineEvals.scorer.testPanel.stateRunning") }}</span>
         </template>
 
         <template v-else-if="state === 'success' && result">
-          <strong class="text-(--color-text-primary) text-[13px] font-semibold">{{ t("onlineEvals.scorer.testPanel.successHeader") }}</strong>
-          <dl class="eval-test-panel__result-grid grid gap-x-3 gap-y-1 m-0 text-(--color-text-secondary) text-xs" style="grid-template-columns: max-content 1fr">
+          <strong class="text-text-heading text-compact font-semibold">{{ t("onlineEvals.scorer.testPanel.successHeader") }}</strong>
+          <dl class="eval-test-panel__result-grid grid gap-x-3 gap-y-1 m-0 text-text-secondary text-xs" style="grid-template-columns: max-content 1fr">
             <template v-if="displayValue !== null">
-              <dt class="text-(--color-text-secondary) font-medium">{{ t("onlineEvals.scorer.testPanel.resultScore") }}</dt>
-              <dd class="eval-test-panel__result-score m-0 text-(--color-grey-600) font-bold text-[13px] [font-family:var(--o2-font-mono)]">{{ displayValue }}</dd>
+              <dt class="text-text-secondary font-medium">{{ t("onlineEvals.scorer.testPanel.resultScore") }}</dt>
+              <dd class="eval-test-panel__result-score m-0 text-text-secondary font-bold text-compact font-mono">{{ displayValue }}</dd>
             </template>
             <template v-if="latencyLabel">
-              <dt class="text-(--color-text-secondary) font-medium">{{ t("onlineEvals.scorer.testPanel.resultLatency") }}</dt>
-              <dd class="m-0 text-(--color-text-primary)">{{ latencyLabel }}</dd>
+              <dt class="text-text-secondary font-medium">{{ t("onlineEvals.scorer.testPanel.resultLatency") }}</dt>
+              <dd class="m-0 text-text-body">{{ latencyLabel }}</dd>
             </template>
             <template v-if="modelLabel">
-              <dt class="text-(--color-text-secondary) font-medium">{{ t("onlineEvals.scorer.testPanel.resultModel") }}</dt>
-              <dd class="eval-test-panel__result-mono m-0 text-(--color-text-primary) font-medium text-xs [font-family:var(--o2-font-mono)]">{{ modelLabel }}</dd>
+              <dt class="text-text-secondary font-medium">{{ t("onlineEvals.scorer.testPanel.resultModel") }}</dt>
+              <dd class="eval-test-panel__result-mono m-0 text-text-body font-medium text-xs font-mono">{{ modelLabel }}</dd>
             </template>
             <template v-if="tokensLabel">
-              <dt class="text-(--color-text-secondary) font-medium">{{ t("onlineEvals.scorer.testPanel.resultTokens") }}</dt>
-              <dd class="m-0 text-(--color-text-primary)">{{ tokensLabel }}</dd>
+              <dt class="text-text-secondary font-medium">{{ t("onlineEvals.scorer.testPanel.resultTokens") }}</dt>
+              <dd class="m-0 text-text-body">{{ tokensLabel }}</dd>
             </template>
           </dl>
-          <details v-if="reasoningText" class="eval-test-panel__details border-t border-(--color-border-default) pt-2 text-(--color-text-secondary)">
-            <summary class="cursor-pointer text-(--color-text-primary) text-xs font-semibold">{{ t("onlineEvals.scorer.testPanel.resultReasoning") }}</summary>
-            <p class="m-0 mt-[6px] text-(--color-text-secondary) font-normal text-[11.5px] [font-family:var(--o2-font-mono)] whitespace-pre-wrap break-words">{{ reasoningText }}</p>
+          <details v-if="reasoningText" class="eval-test-panel__details border-t border-border-default pt-2 text-text-secondary">
+            <summary class="cursor-pointer text-text-heading text-xs font-semibold">{{ t("onlineEvals.scorer.testPanel.resultReasoning") }}</summary>
+            <p class="m-0 mt-1.5 text-text-secondary font-normal text-2xs font-mono whitespace-pre-wrap break-words">{{ reasoningText }}</p>
           </details>
-          <details v-if="rawResponseText" class="eval-test-panel__details border-t border-(--color-border-default) pt-2 text-(--color-text-secondary)">
-            <summary class="cursor-pointer text-(--color-text-primary) text-xs font-semibold">{{ t("onlineEvals.scorer.testPanel.resultRaw") }}</summary>
-            <pre class="m-0 mt-[6px] text-(--color-text-secondary) font-normal text-[11.5px] [font-family:var(--o2-font-mono)] whitespace-pre-wrap break-words">{{ rawResponseText }}</pre>
+          <details v-if="rawResponseText" class="eval-test-panel__details border-t border-border-default pt-2 text-text-secondary">
+            <summary class="cursor-pointer text-text-heading text-xs font-semibold">{{ t("onlineEvals.scorer.testPanel.resultRaw") }}</summary>
+            <pre class="m-0 mt-1.5 text-text-secondary font-normal text-2xs font-mono whitespace-pre-wrap break-words">{{ rawResponseText }}</pre>
           </details>
         </template>
 
         <template v-else>
-          <strong class="text-[13px] font-semibold">{{ t("onlineEvals.scorer.testPanel.errorHeader") }}</strong>
-          <p class="eval-test-panel__error-message m-0 text-(--color-status-error-text) text-xs whitespace-pre-wrap break-words">{{ errorText }}</p>
-          <p v-if="latencyLabel" class="eval-test-panel__error-meta m-0 text-(--color-text-secondary) text-[11.5px]">
+          <strong class="text-compact font-semibold">{{ t("onlineEvals.scorer.testPanel.errorHeader") }}</strong>
+          <p class="eval-test-panel__error-message m-0 text-status-error-text text-xs whitespace-pre-wrap break-words">{{ errorText }}</p>
+          <p v-if="latencyLabel" class="eval-test-panel__error-meta m-0 text-text-secondary text-2xs">
             {{ t("onlineEvals.scorer.testPanel.resultLatency") }}: {{ latencyLabel }}
           </p>
         </template>
@@ -205,15 +205,3 @@ const errorText = computed(
     t("onlineEvals.scorer.testPanel.errorFallback"),
 );
 </script>
-
-<style>
-/* :focus and ::placeholder cannot be expressed inline. */
-.eval-test-panel textarea::placeholder {
-  color: var(--color-text-muted);
-}
-
-.eval-test-panel textarea:focus {
-  outline: none;
-  border-color: var(--color-primary-600, #3f7994);
-}
-</style>
diff --git a/web/src/enterprise/components/onlineEvals/quality/QualityBooleanBarsChart.vue b/web/src/enterprise/components/onlineEvals/quality/QualityBooleanBarsChart.vue
index 513faaef2d..56437fecd5 100644
--- a/web/src/enterprise/components/onlineEvals/quality/QualityBooleanBarsChart.vue
+++ b/web/src/enterprise/components/onlineEvals/quality/QualityBooleanBarsChart.vue
@@ -6,6 +6,8 @@
 import { onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { useStore } from "vuex";
 import * as echarts from "echarts";
+import { chartColor } from "@/utils/chartTheme";
+import { withChartFont } from "@/utils/fonts";
 
 const props = defineProps<{
   trueCount: number;
@@ -19,9 +21,8 @@ let chart: echarts.ECharts | null = null;
 const store = useStore();
 
 function buildOption(): echarts.EChartsOption {
-  const isDark = store.state.theme === "dark";
-  const text = isDark ? "#d4d4d4" : "#374151";
-  const grid = isDark ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.08)";
+  const text = chartColor("--color-text-secondary");
+  const grid = chartColor("--color-border-subtle");
   return {
     grid: { left: 80, right: 32, top: 16, bottom: 16 },
     tooltip: { trigger: "axis", confine: true },
@@ -59,7 +60,7 @@ function buildOption(): echarts.EChartsOption {
 
 function render() {
   if (!chart) return;
-  chart.setOption(buildOption(), true);
+  chart.setOption(withChartFont(buildOption()), true);
 }
 
 onMounted(() => {
diff --git a/web/src/enterprise/components/onlineEvals/quality/QualityBooleanTrendChart.vue b/web/src/enterprise/components/onlineEvals/quality/QualityBooleanTrendChart.vue
index 6084e7d039..543b875aa5 100644
--- a/web/src/enterprise/components/onlineEvals/quality/QualityBooleanTrendChart.vue
+++ b/web/src/enterprise/components/onlineEvals/quality/QualityBooleanTrendChart.vue
@@ -6,10 +6,12 @@
 import { onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { useStore } from "vuex";
 import * as echarts from "echarts";
+import { chartColor } from "@/utils/chartTheme";
 import type {
   BooleanTrendPoint,
   BooleanTrendSeries,
 } from "../composables/useQualityDetailCharts";
+import { withChartFont } from "@/utils/fonts";
 
 const props = defineProps<{
   series?: BooleanTrendSeries[];
@@ -43,9 +45,8 @@ function effectiveSeries(): BooleanTrendSeries[] {
 }
 
 function buildOption(): echarts.EChartsOption {
-  const isDark = store.state.theme === "dark";
-  const text = isDark ? "#d4d4d4" : "#374151";
-  const grid = isDark ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.08)";
+  const text = chartColor("--color-text-secondary");
+  const grid = chartColor("--color-border-subtle");
   const seriesList = effectiveSeries();
   const isSplit = seriesList.length > 1 || seriesList.some((s) => s.id !== "__default__" && s.id !== "default");
 
@@ -104,7 +105,7 @@ function buildOption(): echarts.EChartsOption {
 
 function render() {
   if (!chart) return;
-  chart.setOption(buildOption(), true);
+  chart.setOption(withChartFont(buildOption()), true);
 }
 
 onMounted(() => {
diff --git a/web/src/enterprise/components/onlineEvals/quality/QualityCategoryBarsChart.vue b/web/src/enterprise/components/onlineEvals/quality/QualityCategoryBarsChart.vue
index 4bccb0e28a..31490e5ad9 100644
--- a/web/src/enterprise/components/onlineEvals/quality/QualityCategoryBarsChart.vue
+++ b/web/src/enterprise/components/onlineEvals/quality/QualityCategoryBarsChart.vue
@@ -6,6 +6,8 @@
 import { onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { useStore } from "vuex";
 import * as echarts from "echarts";
+import { chartColor } from "@/utils/chartTheme";
+import { withChartFont } from "@/utils/fonts";
 
 interface CategoryRow {
   value_categorical?: string | null;
@@ -28,9 +30,8 @@ function toNumber(v: unknown): number {
 }
 
 function buildOption(): echarts.EChartsOption {
-  const isDark = store.state.theme === "dark";
-  const text = isDark ? "#d4d4d4" : "#374151";
-  const grid = isDark ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.08)";
+  const text = chartColor("--color-text-secondary");
+  const grid = chartColor("--color-border-subtle");
   // Sort by count DESC (per spec §7.6.6 categorical secondary chart).
   const sorted = [...props.rows].sort((a, b) => toNumber(b.c) - toNumber(a.c));
   const labels = sorted.map((r) => r.value_categorical ?? "(null)");
@@ -78,7 +79,7 @@ function buildOption(): echarts.EChartsOption {
 
 function render() {
   if (!chart) return;
-  chart.setOption(buildOption(), true);
+  chart.setOption(withChartFont(buildOption()), true);
 }
 
 onMounted(() => {
diff --git a/web/src/enterprise/components/onlineEvals/quality/QualityConfigSidebar.vue b/web/src/enterprise/components/onlineEvals/quality/QualityConfigSidebar.vue
deleted file mode 100644
index 3155b3e0d8..0000000000
--- a/web/src/enterprise/components/onlineEvals/quality/QualityConfigSidebar.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<template>
-  <aside class="flex flex-col gap-2.5 p-3 pb-4 bg-(--color-surface-base) border border-dialog-header-border rounded-md min-h-0 max-h-[calc(100vh-var(--navbar-height)-200px)] overflow-hidden" data-test="quality-config-sidebar">
-    <header class="flex items-baseline gap-2">
-      <span class="text-[11px] font-semibold text-text-secondary">{{ t("onlineEvals.quality.overview.title") }}</span>
-      <span class="text-[11px] text-text-secondary bg-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)] px-1.5 py-px rounded-[4px] [font-variant-numeric:tabular-nums]">{{ filteredRows.length }}</span>
-    </header>
-
-    <OInput
-      v-model="filter"
-      :placeholder="t('onlineEvals.quality.overview.searchPlaceholder')"
-      size="sm"
-      class="w-full"
-      data-test="quality-sidebar-filter"
-    >
-      <template #icon-left>
-        <OIcon name="search" size="xs" />
-      </template>
-    </OInput>
-
-    <button
-      type="button"
-      class="qcs__all inline-flex items-center gap-1 bg-transparent border-0 py-[2px] px-0 text-xs text-(--color-primary-600,#3F7994) cursor-pointer w-max hover:underline"
-      data-test="quality-sidebar-all-configs"
-      @click="$emit('clear')"
-    >
-      <OIcon name="chevron-left" size="xs" />
-      {{ t("onlineEvals.quality.sidebar.allConfigs") }}
-    </button>
-
-    <div class="flex-1 min-h-0 overflow-auto flex flex-col gap-1">
-      <button
-        v-for="row in filteredRows"
-        :key="row.configId"
-        type="button"
-        class="qcs-item flex gap-2 py-[10px] px-[10px] pb-2 bg-transparent border border-transparent rounded-md text-left cursor-pointer w-full [font:inherit] text-inherit transition-[background,border-color] duration-[120ms] hover:bg-[color-mix(in_srgb,var(--color-text-primary)_5%,transparent)]"
-        :class="String(row.config.id) === selectedId ? ['qcs-item--selected', 'bg-[color-mix(in_srgb,var(--color-primary-600)_14%,transparent)]', 'border-[color-mix(in_srgb,var(--color-primary-600)_45%,transparent)]', 'relative'] : []"
-        :data-test="`quality-sidebar-item-${row.name}`"
-        @click="$emit('select', row)"
-      >
-        <OTag type="qualityStatus" :value="row.status" label="" :aria-label="row.status" />
-
-        <div class="qcs-item__main flex-1 min-w-0 flex flex-col gap-1">
-          <div class="flex items-center gap-[6px]">
-            <span class="qcs-item__name flex-1 min-w-0 font-semibold text-[13px] text-(--color-text-primary) truncate font-mono">{{ row.name }}</span>
-            <span class="qcs-item__type shrink-0 px-1 rounded-[2px] font-bold text-[4px] leading-[1.4] tracking-[0.02em]" :class="{ 'bg-[color-mix(in_srgb,#6b76e3_14%,transparent)] text-[#4f5bcf]': row.dataType === 'numeric', 'bg-[color-mix(in_srgb,#9333ea_14%,transparent)] text-[#7c3aed]': row.dataType === 'categorical', 'bg-[color-mix(in_srgb,#16a34a_14%,transparent)] text-[#15803d]': row.dataType === 'boolean' }">
-              {{ shortType(row.dataType) }}
-            </span>
-          </div>
-
-          <div class="flex items-center gap-[6px] [font-variant-numeric:tabular-nums]">
-            <div v-if="row.hasThreshold" class="qcs-item__bar flex-1 h-1 bg-[color-mix(in_srgb,var(--color-text-secondary)_12%,transparent)] rounded-full overflow-hidden">
-              <div
-                class="qcs-item__bar-fill h-full"
-                :class="{ 'bg-[var(--color-status-warning-text)]': row.status === 'unhealthy' || row.status === 'warn', 'bg-[var(--color-status-success-text)]': row.status === 'healthy', 'bg-[color-mix(in_srgb,var(--color-text-secondary)_30%,transparent)]': row.status === 'noThreshold' }"
-                :style="{ width: `${Math.min(100, row.unhealthyPct ?? 0)}%` }"
-              />
-            </div>
-            <span v-if="row.hasThreshold" class="qcs-item__pct shrink-0 text-[11px] font-semibold text-(--color-warning-700)">{{ formatPct(row.unhealthyPct) }}</span>
-            <span v-else class="qcs-item__pct--muted shrink-0 text-[11px] font-semibold text-(--color-text-secondary)">—</span>
-            <span class="shrink-0 text-[11px] text-(--color-text-secondary)">{{ formatCount(row.totalScores) }}</span>
-          </div>
-
-          <svg
-            v-if="row.trendSparkline.length > 0"
-            class="qcs-item__spark w-full h-5"
-            :class="{ 'text-[var(--color-status-warning-text)]': row.status === 'unhealthy' || row.status === 'warn', 'text-[var(--color-status-success-text)]': row.status === 'healthy', 'text-[color-mix(in_srgb,var(--color-text-secondary)_50%,transparent)]': row.status === 'noThreshold' }"
-            viewBox="0 0 100 20"
-            preserveAspectRatio="none"
-            aria-hidden="true"
-          >
-            <polyline
-              fill="none"
-              stroke="currentColor"
-              stroke-width="1.4"
-              :points="sparkPoints(row.trendSparkline)"
-            />
-          </svg>
-        </div>
-      </button>
-
-      <div v-if="filteredRows.length === 0" class="py-5 px-2 text-center text-xs text-text-secondary">
-        {{ t("onlineEvals.quality.sidebar.empty") }}
-      </div>
-    </div>
-  </aside>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from "vue";
-import { useI18n } from "vue-i18n";
-import OIcon from "@/lib/core/Icon/OIcon.vue";
-import OInput from "@/lib/forms/Input/OInput.vue";
-import OTag from "@/lib/core/Badge/OTag.vue";
-import type { ScoreConfigRow } from "../composables/useQualityScoreConfigs";
-
-const props = defineProps<{
-  rows: ScoreConfigRow[];
-  selectedId: string | null;
-}>();
-
-defineEmits<{
-  (e: "select", row: ScoreConfigRow): void;
-  (e: "clear"): void;
-}>();
-
-const { t } = useI18n();
-const filter = ref("");
-
-const filteredRows = computed(() => {
-  const q = filter.value.trim().toLowerCase();
-  if (!q) return props.rows;
-  return props.rows.filter(
-    (r) => r.name.toLowerCase().includes(q) || r.description.toLowerCase().includes(q),
-  );
-});
-
-function shortType(type: ScoreConfigRow["dataType"]): string {
-  if (type === "numeric") return "Num";
-  if (type === "categorical") return "Cat";
-  if (type === "boolean") return "Bool";
-  return "—";
-}
-
-function formatCount(n: number | null): string {
-  if (n == null) return "—";
-  if (n >= 1000000) return `${(n / 1000000).toFixed(1)}M`;
-  if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;
-  return String(Math.round(n));
-}
-
-function formatPct(n: number | null): string {
-  if (n == null) return "—";
-  if (n === 0) return "0%";
-  if (n < 0.1) return "<0.1%";
-  return `${n.toFixed(0)}%`;
-}
-
-function sparkPoints(series: number[]): string {
-  if (!series || series.length === 0) return "";
-  const points = series.length === 1 ? [series[0], series[0]] : series;
-  const min = Math.min(...points);
-  const max = Math.max(...points);
-  const range = max - min || 1;
-  return points
-    .map((value, idx) => {
-      const x = (idx / (points.length - 1)) * 100;
-      const y = 18 - ((value - min) / range) * 14;
-      return `${x.toFixed(2)},${y.toFixed(2)}`;
-    })
-    .join(" ");
-}
-</script>
-
-<style>
-/* .qcs-item selected state — pseudo-element and hover cannot be expressed inline */
-.qcs-item--selected:hover {
-  background: color-mix(in srgb, var(--color-primary-600, #3F7994) 18%, transparent);
-}
-
-.qcs-item--selected::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 8px;
-  bottom: 8px;
-  width: 3px;
-  border-radius: 0 3px 3px 0;
-  background: var(--color-primary-600, #3F7994);
-}
-
-/* descendant selector: selected item overrides name color */
-.qcs-item--selected .qcs-item__name {
-  color: var(--color-primary-600, #3F7994);
-}
-</style>
diff --git a/web/src/enterprise/components/onlineEvals/quality/QualityDetailPanel.vue b/web/src/enterprise/components/onlineEvals/quality/QualityDetailPanel.vue
index 68edf39ea0..2e4e0dd7aa 100644
--- a/web/src/enterprise/components/onlineEvals/quality/QualityDetailPanel.vue
+++ b/web/src/enterprise/components/onlineEvals/quality/QualityDetailPanel.vue
@@ -4,7 +4,7 @@
          ODrawer header (QualityPage) so the panel content starts straight
          from the KPI tiles without a duplicated identification block. -->
 
-    <div v-if="isLoading && !hasScores" class="qdp__loading">
+    <div v-if="isLoading && !hasScores" class="flex flex-col items-center gap-2 py-7 px-3 border border-dashed border-dialog-header-border rounded-default text-center text-text-secondary text-xs">
       <OSpinner size="sm" />
       <span>{{ t("onlineEvals.quality.detail.loading") }}</span>
     </div>
@@ -12,7 +12,7 @@
     <!-- No scores landed for this config in the window: show one focused
          empty state (same OEmptyState used across list pages) instead of a
          grid of dashed KPI cards + a chart placeholder. -->
-    <div v-else-if="!hasScores" class="qdp__empty">
+    <div v-else-if="!hasScores" class="flex-1 min-h-0 flex items-center justify-center">
       <OEmptyState
         size="block"
         illustration="hourglass"
@@ -30,28 +30,28 @@
         <div
           v-for="kpi in kpis"
           :key="kpi.id"
-          class="kpi-card rounded-lg flex flex-col px-[0.875rem] pt-[0.625rem] pb-[0.625rem] gap-[0.25rem] bg-(--color-surface-base) border border-(--color-border-default) transition-shadow duration-200"
+          class="rounded-default flex flex-col px-3.5 pt-2.5 pb-2.5 gap-1 bg-surface-base border border-border-default transition-shadow duration-200 hover:shadow-[0_0.0625rem_0.375rem_rgba(0,0,0,0.08)]"
           :data-test="`quality-detail-kpi-${kpi.id}`"
         >
-          <div class="text-[0.7rem] font-semibold text-[var(--color-text-secondary)]">
+          <div class="text-2xs font-semibold text-text-secondary">
             {{ kpiTitle(kpi) }}
           </div>
           <div class="flex items-baseline gap-[0.2rem]">
-            <span class="text-[1.4rem] font-bold leading-none text-[var(--color-grey-600)]">
+            <span class="text-2xl font-bold leading-none text-text-secondary">
               {{ formatKpi(kpi) }}
             </span>
           </div>
         </div>
       </div>
 
-      <section v-if="dataType === 'numeric'" class="card-container py-3 px-[14px] pb-[14px] bg-(--color-surface-base) border border-(--color-border-default) rounded-md">
-        <header class="mb-[6px]">
-          <h4 class="m-0 text-[13px] font-semibold text-(--color-text-primary)">
+      <section v-if="dataType === 'numeric'" class="bg-card-glass-bg py-3 px-3.5 pb-3.5 border border-border-default rounded-default">
+        <header class="mb-1.5">
+          <h4 class="m-0 text-compact font-semibold text-text-heading">
             {{ t("onlineEvals.quality.detail.trendTitle") }}
-            <span class="font-normal text-(--color-text-secondary) text-[11px]">— {{ config.name }}</span>
+            <span class="font-normal text-text-secondary text-2xs">— {{ config.name }}</span>
           </h4>
         </header>
-        <div class="h-[260px]">
+        <div class="h-65">
           <QualityTrendChart
             v-if="numericTrend.length > 0"
             :points="numericTrend"
@@ -62,15 +62,15 @@
             :legend-p95="t('onlineEvals.quality.detail.legendP95')"
             :legend-threshold-fmt="t('onlineEvals.quality.detail.legendThreshold')"
           />
-          <p v-else class="m-0 h-full flex items-center justify-center text-xs text-(--color-text-secondary)">{{ t("onlineEvals.quality.detail.noData") }}</p>
+          <p v-else class="m-0 h-full flex items-center justify-center text-xs text-text-secondary">{{ t("onlineEvals.quality.detail.noData") }}</p>
         </div>
       </section>
 
-      <section v-if="dataType === 'numeric'" class="card-container py-3 px-[14px] pb-[14px] bg-(--color-surface-base) border border-(--color-border-default) rounded-md">
-        <header class="mb-[6px]">
-          <h4 class="m-0 text-[13px] font-semibold text-(--color-text-primary)">{{ t("onlineEvals.quality.detail.distributionTitle") }}</h4>
+      <section v-if="dataType === 'numeric'" class="bg-card-glass-bg py-3 px-3.5 pb-3.5 border border-border-default rounded-default">
+        <header class="mb-1.5">
+          <h4 class="m-0 text-compact font-semibold text-text-heading">{{ t("onlineEvals.quality.detail.distributionTitle") }}</h4>
         </header>
-        <div class="h-[220px]">
+        <div class="h-55">
           <QualityDistributionChart
             v-if="numericDistribution.length > 0"
             :buckets="numericDistribution"
@@ -78,33 +78,33 @@
             :legend-healthy="t('onlineEvals.quality.detail.legendHealthy')"
             :legend-unhealthy="t('onlineEvals.quality.detail.legendUnhealthy')"
           />
-          <p v-else class="m-0 h-full flex items-center justify-center text-xs text-(--color-text-secondary)">{{ t("onlineEvals.quality.detail.noData") }}</p>
+          <p v-else class="m-0 h-full flex items-center justify-center text-xs text-text-secondary">{{ t("onlineEvals.quality.detail.noData") }}</p>
         </div>
       </section>
 
-      <section v-if="dataType === 'boolean'" class="card-container py-3 px-[14px] pb-[14px] bg-(--color-surface-base) border border-(--color-border-default) rounded-md">
-        <header class="mb-[6px]">
-          <h4 class="m-0 text-[13px] font-semibold text-(--color-text-primary)">
+      <section v-if="dataType === 'boolean'" class="bg-card-glass-bg py-3 px-3.5 pb-3.5 border border-border-default rounded-default">
+        <header class="mb-1.5">
+          <h4 class="m-0 text-compact font-semibold text-text-heading">
             {{ t("onlineEvals.quality.detail.passRateTitle") }}
-            <span class="font-normal text-(--color-text-secondary) text-[11px]">— {{ config.name }}</span>
+            <span class="font-normal text-text-secondary text-2xs">— {{ config.name }}</span>
           </h4>
         </header>
-        <div class="h-[260px]">
+        <div class="h-65">
           <QualityBooleanTrendChart
             v-if="booleanTrendSeries.length > 0"
             :series="booleanTrendSeries"
             :points="booleanTrend"
             :legend-pass-rate="t('onlineEvals.quality.detail.legendHealthy')"
           />
-          <p v-else class="m-0 h-full flex items-center justify-center text-xs text-(--color-text-secondary)">{{ t("onlineEvals.quality.detail.noData") }}</p>
+          <p v-else class="m-0 h-full flex items-center justify-center text-xs text-text-secondary">{{ t("onlineEvals.quality.detail.noData") }}</p>
         </div>
       </section>
 
-      <section v-if="dataType === 'boolean'" class="card-container py-3 px-[14px] pb-[14px] bg-(--color-surface-base) border border-(--color-border-default) rounded-md">
-        <header class="mb-[6px]">
-          <h4 class="m-0 text-[13px] font-semibold text-(--color-text-primary)">{{ t("onlineEvals.quality.detail.trueFalseTitle") }}</h4>
+      <section v-if="dataType === 'boolean'" class="bg-card-glass-bg py-3 px-3.5 pb-3.5 border border-border-default rounded-default">
+        <header class="mb-1.5">
+          <h4 class="m-0 text-compact font-semibold text-text-heading">{{ t("onlineEvals.quality.detail.trueFalseTitle") }}</h4>
         </header>
-        <div class="h-[120px]">
+        <div class="h-30">
           <QualityBooleanBarsChart
             v-if="booleanCounts.trueCount + booleanCounts.falseCount > 0"
             :true-count="booleanCounts.trueCount"
@@ -112,21 +112,21 @@
             :legend-true="`true (${booleanCounts.trueCount})`"
             :legend-false="`false (${booleanCounts.falseCount})`"
           />
-          <p v-else class="m-0 h-full flex items-center justify-center text-xs text-(--color-text-secondary)">{{ t("onlineEvals.quality.detail.noData") }}</p>
+          <p v-else class="m-0 h-full flex items-center justify-center text-xs text-text-secondary">{{ t("onlineEvals.quality.detail.noData") }}</p>
         </div>
       </section>
 
-      <section v-if="dataType === 'categorical'" class="card-container py-3 px-[14px] pb-[14px] bg-(--color-surface-base) border border-(--color-border-default) rounded-md">
-        <header class="mb-[6px]">
-          <h4 class="m-0 text-[13px] font-semibold text-(--color-text-primary)">{{ t("onlineEvals.quality.detail.categoryDistributionTitle") }}</h4>
+      <section v-if="dataType === 'categorical'" class="bg-card-glass-bg py-3 px-3.5 pb-3.5 border border-border-default rounded-default">
+        <header class="mb-1.5">
+          <h4 class="m-0 text-compact font-semibold text-text-heading">{{ t("onlineEvals.quality.detail.categoryDistributionTitle") }}</h4>
         </header>
-        <div class="h-[260px]">
+        <div class="h-65">
           <QualityCategoryBarsChart
             v-if="categoricalRows.length > 0"
             :rows="categoricalRows"
             :healthy-categories="healthyCategories"
           />
-          <p v-else class="m-0 h-full flex items-center justify-center text-xs text-(--color-text-secondary)">{{ t("onlineEvals.quality.detail.noData") }}</p>
+          <p v-else class="m-0 h-full flex items-center justify-center text-xs text-text-secondary">{{ t("onlineEvals.quality.detail.noData") }}</p>
         </div>
       </section>
     </template>
@@ -214,35 +214,3 @@ function formatKpi(kpi: DetailKpi): string {
   return String(kpi.value);
 }
 </script>
-
-<style>
-/* ::before pseudo-element for KPI accent bar — cannot inline */
-
-.qdp__loading {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  padding: 28px 12px;
-  border: 1px dashed var(--color-dialog-header-border);
-  border-radius: 6px;
-  text-align: center;
-  color: var(--color-text-secondary);
-  font-size: 12px;
-}
-
-.qdp__empty {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* Hover shadow on KPI tiles — pseudo-class cannot be inlined. Mirrors the
- * LLM Sessions detail page card chrome so the AI module's KPI tiles look
- * identical across pages. */
-.kpi-card:hover {
-  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
-}
-</style>
diff --git a/web/src/enterprise/components/onlineEvals/quality/QualityDistributionChart.vue b/web/src/enterprise/components/onlineEvals/quality/QualityDistributionChart.vue
index 9718a027c8..277a6d4f14 100644
--- a/web/src/enterprise/components/onlineEvals/quality/QualityDistributionChart.vue
+++ b/web/src/enterprise/components/onlineEvals/quality/QualityDistributionChart.vue
@@ -6,7 +6,9 @@
 import { onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { useStore } from "vuex";
 import * as echarts from "echarts";
+import { chartColor } from "@/utils/chartTheme";
 import type { DistributionBucket } from "../composables/useQualityDetailCharts";
+import { withChartFont } from "@/utils/fonts";
 
 const props = defineProps<{
   buckets: DistributionBucket[];
@@ -20,9 +22,8 @@ let chart: echarts.ECharts | null = null;
 const store = useStore();
 
 function buildOption(): echarts.EChartsOption {
-  const isDark = store.state.theme === "dark";
-  const text = isDark ? "#d4d4d4" : "#374151";
-  const grid = isDark ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.08)";
+  const text = chartColor("--color-text-secondary");
+  const grid = chartColor("--color-border-subtle");
   const labels = props.buckets.map((b) => b.label);
 
   const seriesData = props.buckets.map((b) => ({
@@ -108,7 +109,7 @@ function thresholdBucketIndex(): number {
 
 function render() {
   if (!chart) return;
-  chart.setOption(buildOption(), true);
+  chart.setOption(withChartFont(buildOption()), true);
 }
 
 onMounted(() => {
diff --git a/web/src/enterprise/components/onlineEvals/quality/QualityKpiCard.vue b/web/src/enterprise/components/onlineEvals/quality/QualityKpiCard.vue
index b012cec562..3dc374c2e7 100644
--- a/web/src/enterprise/components/onlineEvals/quality/QualityKpiCard.vue
+++ b/web/src/enterprise/components/onlineEvals/quality/QualityKpiCard.vue
@@ -1,36 +1,36 @@
 <template>
   <div
-    class="card-container rounded-lg flex flex-col px-[0.875rem] pt-[0.625rem] pb-[0.625rem] gap-[0.25rem] bg-(--color-surface-base) border border-(--color-border-default) transition-shadow duration-200 ease-in-out hover:shadow-[0_1px_6px_rgba(0,0,0,0.08)]"
+    class="bg-card-glass-bg rounded-default flex flex-col px-3.5 pt-2.5 pb-2.5 gap-1 border border-border-default transition-shadow duration-200 ease-in-out hover:shadow-[0_1px_6px_rgba(0,0,0,0.08)]"
     :data-test="`quality-kpi-${kpi.id}`"
   >
-    <div class="flex flex-col gap-[0.25rem]">
+    <div class="flex flex-col gap-1">
       <!-- Label + a metric icon in a soft corner tile — same KPI-card pattern
            as LLM Insights / Session Detail so every card reads the same. -->
-      <div class="flex items-center justify-between gap-2 mb-[0.25rem]">
-        <div class="kpi-label text-[0.7rem] font-semibold leading-normal text-(--color-text-secondary) min-w-0 truncate">
+      <div class="flex items-center justify-between gap-2 mb-1">
+        <div class="kpi-label text-2xs font-semibold leading-normal text-text-secondary min-w-0 truncate">
           {{ t(`onlineEvals.quality.kpis.${kpi.id}.title`) }}
         </div>
         <span
-          class="inline-flex items-center justify-center shrink-0 w-6 h-6 rounded-md bg-(--color-surface-subtle) text-(--color-text-secondary)"
+          class="inline-flex items-center justify-center shrink-0 w-6 h-6 rounded-default bg-surface-subtle text-text-secondary"
         >
           <OIcon :name="cardIcon" size="sm" />
         </span>
       </div>
       <div class="flex items-baseline gap-[0.2rem]">
         <template v-if="kpi.value != null">
-          <span class="text-[1.4rem] font-bold leading-none text-[var(--color-grey-600)]">
+          <span class="text-2xl font-bold leading-none text-text-secondary">
             {{ bigNumber }}
           </span>
           <span
             v-if="unitLabel"
-            class="text-[0.8rem] font-semibold text-[var(--color-text-secondary)] "
+            class="text-compact font-semibold text-text-secondary "
           >
             {{ unitLabel }}
           </span>
         </template>
         <span
           v-else
-          class="text-[0.95rem] font-medium leading-none text-[var(--color-text-muted)]"
+          class="text-base font-medium leading-none text-text-muted"
         >
           {{ t("onlineEvals.quality.kpis.noData") }}
         </span>
@@ -42,11 +42,11 @@
            short history) rather than zero. -->
       <div
         v-if="kpi.value != null"
-        class="text-[0.65rem] font-medium flex items-center gap-[0.25rem]"
+        class="text-3xs font-medium flex items-center gap-1"
         :class="{
-          'text-[var(--color-success-600)]': (delta != null ? trendSentiment : 'neutral') === 'good',
-          'text-[var(--color-error-600)]': (delta != null ? trendSentiment : 'neutral') === 'bad',
-          'text-[var(--color-text-muted)]': (delta != null ? trendSentiment : 'neutral') === 'neutral',
+          'text-status-success-text': (delta != null ? trendSentiment : 'neutral') === 'good',
+          'text-error-600': (delta != null ? trendSentiment : 'neutral') === 'bad',
+          'text-text-muted': (delta != null ? trendSentiment : 'neutral') === 'neutral',
         }"
       >
         <template v-if="delta != null">
diff --git a/web/src/enterprise/components/onlineEvals/quality/QualityKpiSkeleton.vue b/web/src/enterprise/components/onlineEvals/quality/QualityKpiSkeleton.vue
index db9d8bdd85..39c9271c4c 100644
--- a/web/src/enterprise/components/onlineEvals/quality/QualityKpiSkeleton.vue
+++ b/web/src/enterprise/components/onlineEvals/quality/QualityKpiSkeleton.vue
@@ -1,70 +1,28 @@
 <template>
-  <div
-    class="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-[10px]"
-    :class="store.state.theme === 'dark' ? 'dark-tile-content' : 'light-tile-content'"
-  >
+  <!-- Same KpiCardRow grid and the same card padding/background as the real
+       QualityKpiCard, so the tiles don't resize or change colour on load. -->
+  <KpiCardRow>
     <div
       v-for="n in count"
       :key="n"
-      class="pt-3 px-3.5 pb-2.5 bg-(--color-surface-base) border border-(--color-border-default) rounded-lg flex flex-col gap-2 min-h-24"
-      :class="store.state.theme === 'dark' ? 'dark-tile-content' : 'light-tile-content'"
+      class="px-3.5 py-2.5 bg-card-glass-bg border border-border-default rounded-default flex flex-col gap-2 min-h-24"
       data-test="quality-kpi-skeleton"
     >
-      <SkeletonBox width="55%" height="11px" rounded />
+      <OSkeleton type="text" class="w-[55%] h-2.75" />
       <div class="flex items-baseline justify-between gap-2">
-        <SkeletonBox width="50%" height="22px" rounded />
-        <SkeletonBox width="22%" height="11px" rounded />
+        <OSkeleton type="text" class="w-[50%] h-5.5" />
+        <OSkeleton type="text" class="w-[22%] h-2.75" />
       </div>
-      <div class="flex items-end gap-[3px] h-[28px] mt-auto">
-        <SkeletonBox
-          v-for="bar in 14"
-          :key="bar"
-          width="100%"
-          :height="`${30 + ((bar * 23) % 65)}%`"
-          rounded
-        />
+      <div class="flex items-end gap-0.75 h-7 mt-auto">
+        <OSkeleton type="text" v-for="bar in 14" :key="bar" :style="{ height: `${30 + ((bar * 23) % 65)}%` }" class="w-full" />
       </div>
     </div>
-  </div>
+  </KpiCardRow>
 </template>
 
 <script setup lang="ts">
-import { useStore } from "vuex";
-import SkeletonBox from "@/components/shared/SkeletonBox.vue";
+import OSkeleton from "@/lib/feedback/Skeleton/OSkeleton.vue";
+import KpiCardRow from "@/components/common/KpiCardRow.vue";
 
 withDefaults(defineProps<{ count?: number }>(), { count: 5 });
-
-const store = useStore();
 </script>
-
-<style>
-.skeleton-box {
-  position: relative;
-  overflow: hidden;
-  background-size: 200% 100%;
-  animation: qkpi-skel-wave 1.5s ease-in-out infinite;
-}
-
-.light-tile-content .skeleton-box {
-  background: linear-gradient(
-    90deg,
-    rgba(0, 0, 0, 0.04),
-    rgba(0, 0, 0, 0.1),
-    rgba(0, 0, 0, 0.04)
-  );
-}
-
-.dark-tile-content .skeleton-box {
-  background: linear-gradient(
-    90deg,
-    rgba(255, 255, 255, 0.04),
-    rgba(255, 255, 255, 0.12),
-    rgba(255, 255, 255, 0.04)
-  );
-}
-
-@keyframes qkpi-skel-wave {
-  0%   { background-position: -200% 0; }
-  100% { background-position:  200% 0; }
-}
-</style>
diff --git a/web/src/enterprise/components/onlineEvals/quality/QualityScoreConfigsTable.vue b/web/src/enterprise/components/onlineEvals/quality/QualityScoreConfigsTable.vue
index 66e802b180..dafd50b855 100644
--- a/web/src/enterprise/components/onlineEvals/quality/QualityScoreConfigsTable.vue
+++ b/web/src/enterprise/components/onlineEvals/quality/QualityScoreConfigsTable.vue
@@ -1,6 +1,6 @@
 <template>
-  <section class="flex flex-col gap-[10px] min-h-0 flex-1" data-test="quality-score-configs-overview">
-    <div v-if="isLoading && rows.length === 0" class="flex flex-col items-center gap-2 py-8 px-3 border border-dashed border-[var(--color-dialog-header-border,var(--o2-border))] rounded-md text-center text-[var(--color-text-secondary)]">
+  <section class="flex flex-col gap-2.5 min-h-0 flex-1" data-test="quality-score-configs-overview">
+    <div v-if="isLoading && rows.length === 0" class="flex flex-col items-center gap-2 py-8 px-3 border border-dashed border-dialog-header-border rounded-default text-center text-text-secondary">
       <OSpinner size="sm" />
       <span>{{ t("onlineEvals.quality.loading") }}</span>
     </div>
@@ -64,7 +64,7 @@
         </template>
 
         <template #cell-name="{ row }">
-          <div class="text-[var(--color-text-primary)]">{{ row.name }}</div>
+          <div class="text-text-body">{{ row.name }}</div>
         </template>
 
         <template #cell-type="{ row }">
@@ -73,7 +73,7 @@
             type="evalDataType"
             :value="row.dataType"
           />
-          <span v-else class="text-[var(--color-text-secondary)]">—</span>
+          <span v-else class="text-text-secondary">—</span>
         </template>
 
         <template #cell-totalScores="{ row }">
@@ -82,7 +82,7 @@
 
         <template #cell-coverage="{ row }">
           <span v-if="row.coveragePct != null" class="[font-variant-numeric:tabular-nums]">{{ formatPct(row.coveragePct) }}</span>
-          <span v-else class="text-[var(--color-text-secondary)]">—</span>
+          <span v-else class="text-text-secondary">—</span>
         </template>
 
         <template #cell-trend="{ row }">
@@ -101,14 +101,14 @@
               :points="sparkPoints(row.trendSparkline)"
             />
           </svg>
-          <span v-else class="text-[var(--color-text-secondary)]">—</span>
+          <span v-else class="text-text-secondary">—</span>
         </template>
 
         <template #cell-updated="{ row }">
-          <span v-if="row.lastUpdatedMs" class="text-[11px] text-[var(--color-text-secondary)] [font-variant-numeric:tabular-nums]">
+          <span v-if="row.lastUpdatedMs" class="text-2xs text-text-secondary [font-variant-numeric:tabular-nums]">
             {{ relativeTime(row.lastUpdatedMs) }}
           </span>
-          <span v-else class="text-[var(--color-text-secondary)]">—</span>
+          <span v-else class="text-text-secondary">—</span>
         </template>
       </OTable>
     </div>
@@ -167,10 +167,10 @@ const filteredRows = computed(() => {
 });
 
 function sparkClass(status: string): string {
-  if (status === 'unhealthy' || status === 'warn') return 'text-[var(--color-status-warning-text)]';
-  if (status === 'healthy') return 'text-[var(--color-status-success-text)]';
-  if (status === 'noData') return 'text-[var(--color-text-secondary)] opacity-[0.55]';
-  return 'text-[var(--color-text-secondary)]';
+  if (status === 'unhealthy' || status === 'warn') return 'text-status-warning-text';
+  if (status === 'healthy') return 'text-status-success-text';
+  if (status === 'noData') return 'text-text-secondary opacity-[0.55]';
+  return 'text-text-secondary';
 }
 
 function rowClassOf(row: ScoreConfigRow): string {
diff --git a/web/src/enterprise/components/onlineEvals/quality/QualityTrendChart.vue b/web/src/enterprise/components/onlineEvals/quality/QualityTrendChart.vue
index d2fbeb14c1..f94bbb7420 100644
--- a/web/src/enterprise/components/onlineEvals/quality/QualityTrendChart.vue
+++ b/web/src/enterprise/components/onlineEvals/quality/QualityTrendChart.vue
@@ -6,7 +6,9 @@
 import { onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { useStore } from "vuex";
 import * as echarts from "echarts";
+import { chartColor } from "@/utils/chartTheme";
 import type { TrendPoint } from "../composables/useQualityDetailCharts";
+import { withChartFont } from "@/utils/fonts";
 
 const props = defineProps<{
   points: TrendPoint[];
@@ -23,9 +25,8 @@ let chart: echarts.ECharts | null = null;
 const store = useStore();
 
 function buildOption(): echarts.EChartsOption {
-  const isDark = store.state.theme === "dark";
-  const text = isDark ? "#d4d4d4" : "#374151";
-  const grid = isDark ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.08)";
+  const text = chartColor("--color-text-secondary");
+  const grid = chartColor("--color-border-subtle");
 
   const avgSeries = props.points.map((p) => [p.t, p.avg ?? null]);
   const p95Series = props.points.map((p) => [p.t, p.p95 ?? null]);
@@ -111,7 +112,7 @@ function buildOption(): echarts.EChartsOption {
 
 function render() {
   if (!chart) return;
-  chart.setOption(buildOption(), true);
+  chart.setOption(withChartFont(buildOption()), true);
 }
 
 onMounted(() => {
diff --git a/web/src/enterprise/views/AIObservability/AgentGraphPage.vue b/web/src/enterprise/views/AIObservability/AgentGraphPage.vue
index de8c2a679e..26fae95091 100644
--- a/web/src/enterprise/views/AIObservability/AgentGraphPage.vue
+++ b/web/src/enterprise/views/AIObservability/AgentGraphPage.vue
@@ -15,16 +15,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div
+  <OPageLayout
     data-test="ai-agent-graph-page"
-    class="flex flex-col h-full min-h-0 overflow-hidden"
+    :title="t('aiObservability.nav.agentGraph')"
+    :subtitle="t('aiObservability.subtitle.agentGraph')"
+    icon="hub"
+    bleed
+    :scroll="false"
   >
-    <AppPageHeader
-      :title="t('aiObservability.nav.agentGraph')"
-      :subtitle="t('aiObservability.subtitle.agentGraph')"
-      icon="hub"
-      class="px-4 border-b border-border-default"
-    >
       <template #actions>
         <date-time
           ref="dateTimeRef"
@@ -43,14 +41,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           @on:date-change="onDateChange"
         />
       </template>
-    </AppPageHeader>
 
     <!-- Scope control — same Stream/Agent pattern as LLM Insights, so the two
          AI pages read as one product. Stream tab picks a trace stream; Agent
-         tab picks a discovered agent and the graph follows its source_stream. -->
-    <div
-      class="flex items-center gap-3 px-4 py-2 border-b border-border-default"
-    >
+         tab picks a discovered agent and the graph follows its source_stream.
+         Lives in OPageLayout's #subnav (which draws the full-bleed divider). -->
+    <template #subnav>
+    <div class="flex items-center gap-3 px-page-edge py-2">
       <OToggleGroup
         :model-value="filterMode"
         type="single"
@@ -68,7 +65,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <div
         v-if="filterMode === 'stream'"
         data-test="agent-graph-stream-selector"
-        class="w-[14rem] flex-shrink-0"
+        class="w-56 shrink-0"
       >
         <OSelect
           v-model="activeStream"
@@ -77,19 +74,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :options="availableStreams.map((s) => ({ label: s, value: s }))"
           labelKey="label"
           valueKey="value"
-          class="w-full rounded"
+          class="w-full rounded-default"
         />
       </div>
       <div
         v-else
         data-test="agent-graph-agent-selector"
-        class="w-[14rem] flex-shrink-0"
+        class="w-56 shrink-0"
       >
         <SkeletonBox
           v-if="!agentsLoaded"
           width="100%"
           height="2.125rem"
-          rounded
+          :rounded="true"
         />
         <OSelect
           v-else
@@ -99,20 +96,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :options="agentSelectOptions"
           labelKey="label"
           valueKey="value"
-          class="w-full rounded"
+          class="w-full rounded-default"
         />
       </div>
     </div>
+    </template>
 
-    <div class="flex-1 min-h-0 overflow-hidden">
-      <ServiceGraph
-        :stream-filter="effectiveStream"
-        hide-stream-selector
-        agent-highlight
-        class="h-full"
-      />
-    </div>
-  </div>
+    <ServiceGraph
+      :stream-filter="effectiveStream"
+      hide-stream-selector
+      agent-highlight
+      class="flex-1 min-h-0"
+    />
+  </OPageLayout>
 </template>
 
 <script setup lang="ts">
@@ -120,7 +116,7 @@ import { defineAsyncComponent, ref, computed, onMounted } from "vue";
 import { useI18n } from "vue-i18n";
 import { useStore } from "vuex";
 import DateTime from "@/components/DateTime.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import OSelect from "@/lib/forms/Select/OSelect.vue";
 import OToggleGroup from "@/lib/core/ToggleGroup/OToggleGroup.vue";
 import OToggleGroupItem from "@/lib/core/ToggleGroup/OToggleGroupItem.vue";
diff --git a/web/src/enterprise/views/AIObservability/Index.vue b/web/src/enterprise/views/AIObservability/Index.vue
index b0e3cce214..5608921386 100644
--- a/web/src/enterprise/views/AIObservability/Index.vue
+++ b/web/src/enterprise/views/AIObservability/Index.vue
@@ -21,7 +21,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   picks the route the rail/breadcrumb highlight.
 -->
 <template>
-  <PageLayout :sidebar-width="232">
+  <OPageLayout bleed :sidebar-width="230">
     <template #sidebar>
       <SectionRail
         :groups="sectionGroups"
@@ -33,7 +33,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <section class="h-full min-w-0 min-h-0 overflow-y-auto">
       <router-view />
     </section>
-  </PageLayout>
+  </OPageLayout>
 </template>
 
 <script setup lang="ts">
@@ -41,7 +41,7 @@ import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { useStore } from "vuex";
 import { useRoute } from "vue-router";
-import PageLayout from "@/components/common/PageLayout.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import SectionRail from "@/components/common/SectionRail.vue";
 import type {
   SectionHubGroup,
@@ -70,6 +70,7 @@ function evalLink(tab: EvalTab) {
 const activeSection = computed<string>(() => {
   if (route.name === "aiLLMInsights") return "llmInsights";
   if (route.name === "aiSessions") return "sessions";
+  if (route.name === "aiAgentGraph") return "agentGraph";
   if (route.name === "aiEvaluations") {
     const tab = (route.query.tab as string) || "quality";
     return tab;
diff --git a/web/src/enterprise/views/AIObservability/LLMInsightsPage.vue b/web/src/enterprise/views/AIObservability/LLMInsightsPage.vue
index c1c8fd3bcd..65c54ec022 100644
--- a/web/src/enterprise/views/AIObservability/LLMInsightsPage.vue
+++ b/web/src/enterprise/views/AIObservability/LLMInsightsPage.vue
@@ -15,16 +15,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div
+  <OPageLayout
     data-test="ai-llm-insights-page"
-    class="flex flex-col h-full min-h-0 overflow-hidden"
+    :title="t('aiObservability.nav.llmInsights')"
+    :subtitle="t('aiObservability.subtitle.llmInsights')"
+    icon="dashboard"
+    bleed
+    :scroll="false"
   >
-    <AppPageHeader
-      :title="t('aiObservability.nav.llmInsights')"
-      :subtitle="t('aiObservability.subtitle.llmInsights')"
-      icon="dashboard"
-      class="px-4 border-b border-border-default"
-    >
       <template #actions>
         <date-time
           ref="dateTimeRef"
@@ -37,13 +35,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           }"
           :default-relative-time="dateState.relativeTimePeriod ?? ''"
           data-test="ai-llm-insights-date-time"
-          class="h-[2rem]"
+          class="h-8"
           @on:date-change="onDateChange"
         />
         <!-- Whole-page last-refresh + refresh control (logs-style): relative
              time + freshness dot, ticking on its own. -->
         <div
-          class="inline-flex items-center border border-border-default rounded-md px-1 h-[2rem] overflow-hidden"
+          class="inline-flex items-center border border-border-default rounded-default px-1 h-8 overflow-hidden"
         >
           <ORefreshButton
             :last-run-at="dashboardLastRunAt"
@@ -54,18 +52,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           />
         </div>
       </template>
-    </AppPageHeader>
 
-    <div class="flex-1 min-h-0 overflow-hidden">
-      <LLMInsightsDashboard
-        ref="dashboardRef"
-        :stream-name="streamName"
-        :start-time="timeRange.startTime"
-        :end-time="timeRange.endTime"
-        class="h-full"
-      />
-    </div>
-  </div>
+    <LLMInsightsDashboard
+      ref="dashboardRef"
+      :stream-name="streamName"
+      :start-time="timeRange.startTime"
+      :end-time="timeRange.endTime"
+      class="flex-1 min-h-0"
+    />
+  </OPageLayout>
 </template>
 
 <script setup lang="ts">
@@ -74,7 +69,7 @@ import { useI18n } from "vue-i18n";
 import { useRoute, useRouter } from "vue-router";
 import DateTime from "@/components/DateTime.vue";
 import LLMInsightsDashboard from "@/plugins/traces/LLMInsightsDashboard.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import ORefreshButton from "@/lib/core/RefreshButton/ORefreshButton.vue";
 import { getConsumableRelativeTime } from "@/utils/date";
 import {
diff --git a/web/src/enterprise/views/AIObservability/SessionsPage.vue b/web/src/enterprise/views/AIObservability/SessionsPage.vue
index 37b4b33253..7c587f4e55 100644
--- a/web/src/enterprise/views/AIObservability/SessionsPage.vue
+++ b/web/src/enterprise/views/AIObservability/SessionsPage.vue
@@ -15,16 +15,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div
+  <OPageLayout
     data-test="ai-sessions-page"
-    class="flex flex-col h-full min-h-0 overflow-hidden"
+    :title="t('aiObservability.nav.sessions')"
+    :subtitle="t('aiObservability.subtitle.sessions')"
+    icon="forum"
+    bleed
+    :scroll="false"
   >
-    <AppPageHeader
-      :title="t('aiObservability.nav.sessions')"
-      :subtitle="t('aiObservability.subtitle.sessions')"
-      icon="forum"
-      class="px-4 border-b border-border-default"
-    >
       <template #actions>
         <date-time
           ref="dateTimeRef"
@@ -37,13 +35,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           }"
           :default-relative-time="dateState.relativeTimePeriod ?? ''"
           data-test="ai-sessions-date-time"
-          class="h-[2rem]"
+          class="h-8"
           @on:date-change="onDateChange"
         />
         <!-- Last-refresh + refresh control (logs-style), consistent with the
              LLM Insights page header. -->
         <div
-          class="inline-flex items-center border border-border-default rounded-md px-1 h-[2rem] overflow-hidden"
+          class="inline-flex items-center border border-border-default rounded-default px-1 h-8 overflow-hidden"
         >
           <ORefreshButton
             :last-run-at="sessionsLastRunAt"
@@ -54,19 +52,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           />
         </div>
       </template>
-    </AppPageHeader>
 
-    <div class="flex-1 min-h-0 overflow-hidden">
-      <SessionsList
-        ref="sessionsRef"
-        :stream-name="streamName"
-        :start-time="timeRange.startTime"
-        :end-time="timeRange.endTime"
-        detail-route-name="aiSessionDetails"
-        class="h-full"
-      />
-    </div>
-  </div>
+    <SessionsList
+      ref="sessionsRef"
+      :stream-name="streamName"
+      :start-time="timeRange.startTime"
+      :end-time="timeRange.endTime"
+      detail-route-name="aiSessionDetails"
+      class="flex-1 min-h-0"
+    />
+  </OPageLayout>
 </template>
 
 <script setup lang="ts">
@@ -75,7 +70,7 @@ import { useI18n } from "vue-i18n";
 import { useRoute, useRouter } from "vue-router";
 import DateTime from "@/components/DateTime.vue";
 import SessionsList from "@/plugins/traces/SessionsList.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import ORefreshButton from "@/lib/core/RefreshButton/ORefreshButton.vue";
 import { getConsumableRelativeTime } from "@/utils/date";
 import {
diff --git a/web/src/layouts/MainLayout.spec.ts b/web/src/layouts/MainLayout.spec.ts
index dac56cf88e..141b352d19 100644
--- a/web/src/layouts/MainLayout.spec.ts
+++ b/web/src/layouts/MainLayout.spec.ts
@@ -1421,7 +1421,7 @@ describe("MainLayout Methods and Functions", () => {
       expect(localStorage.getItem("isFirstTimeLogin")).toBeNull();
     });
 
-    it("does NOT forward any q-dialog-specific props (migration removed maximized/full-height)", () => {
+    it("does NOT forward any legacy dialog-specific props (migration removed maximized/full-height)", () => {
       const wrapper = mount(Host);
       const dialog = wrapper.findComponent(ODialogStub);
 
diff --git a/web/src/layouts/MainLayout.vue b/web/src/layouts/MainLayout.vue
index 01704eca5b..c1747ec80c 100644
--- a/web/src/layouts/MainLayout.vue
+++ b/web/src/layouts/MainLayout.vue
@@ -16,13 +16,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <div
-    :class="[store.state.printMode === true ? 'printMode' : '', 'o2-app-root', 'min-h-screen', 'h-screen', 'flex', 'flex-col']"
+    :class="[store.state.printMode === true ? 'printMode' : '', 'o2-app-root', 'w-full', 'transition-[width]', 'duration-300', 'ease-[ease]', 'min-h-screen', 'h-screen', 'flex', 'flex-col']"
   >
     <header class="o2-app-header shrink-0" :class="store.state.printMode === true ? 'hidden' : ''">
       <!-- Webinar announcement bar: shown above toolbar for cloud users -->
       <div
         v-if="config.isCloud === 'true'"
-        class="bg-[var(--o2-primary-btn-bg)] text-[var(--o2-primary-btn-text)] text-center"
+        class="bg-button-primary text-button-primary-foreground text-center"
       >
         <WebinarBanner variant="header" />
       </div>
@@ -71,7 +71,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- Main Panel -->
         <main
           data-test="main-content"
-          class="flex flex-col min-h-0 bg-[var(--color-surface-chrome-deeper)] pr-2 pb-2"
+          class="flex flex-col min-h-0 bg-surface-chrome-deeper pr-2 pb-2"
           :style="{
             width:
               store.state.isAiChatEnabled && !store.state.isAiChatExpanded
@@ -79,10 +79,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 : '100%',
           }"
         >
-          <!-- White content card — rounded, soft shadow (light) / border (dark). All pages render inside this. -->
+          <!-- Content card — all pages render inside this. The border stays present in both
+               themes (transparent in light) so toggling dark mode can't shift page content by 1px. -->
           <div
-            class="flex-1 flex flex-col min-h-0 bg-surface-base rounded-xl overflow-hidden shadow-[0_1px_3px_rgba(16,40,55,0.06),0_6px_20px_rgba(16,40,55,0.08)]"
-            :class="store.state.theme === 'dark' ? 'border border-border-default' : ''"
+            class="flex-1 flex flex-col min-h-0 bg-surface-base rounded-surface overflow-hidden border shadow-[0_1px_3px_rgba(16,40,55,0.06),0_6px_20px_rgba(16,40,55,0.08)]"
+            :class="isDark ? 'border-border-default' : 'border-transparent'"
           >
             <div
               v-if="isLoading"
@@ -101,7 +102,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           v-show="store.state.isAiChatEnabled && isLoading"
           class="o2-sidebar o2-sidebar-right overflow-y-auto sticky top-[var(--navbar-height,2.25rem)] self-start shrink-0"
           :class="[
-            store.state.theme == 'dark'
+            isDark
               ? 'dark-mode-chat-container'
               : 'light-mode-chat-container',
             { 'o2-sidebar--expanded': store.state.isAiChatExpanded },
@@ -176,6 +177,7 @@ import {
   onBeforeMount,
 } from "vue";
 import { useStore } from "vuex";
+import { useTheme } from "@/composables/useTheme";
 import { useRouter, RouterView } from "vue-router";
 import config from "../aws-exports";
 
@@ -294,6 +296,7 @@ export default defineComponent({
   },
   setup() {
     const store: any = useStore();
+    const { isDark } = useTheme();
     const router: any = useRouter();
     const { t } = useI18n();
     const miniMode = ref(false);
@@ -1192,7 +1195,7 @@ export default defineComponent({
     };
 
     const getBtnLogo = computed(() => {
-      if (store.state.theme === "dark") {
+      if (isDark.value) {
         return getImageURL("images/common/ai_icon_dark.svg");
       }
 
@@ -1270,6 +1273,7 @@ export default defineComponent({
     useShortcuts([{ id: "aiChatToggle", handler: () => toggleAIChat() }]);
 
     return {
+      isDark,
       t,
       router,
       store,
@@ -1373,10 +1377,16 @@ export default defineComponent({
 });
 </script>
 
-
-<style>
-/* Print mode — hide header + sidebar, show body overflow */
-.printMode body {
-  overflow: auto !important;
+<style scoped>
+/* keep(print): This layout's root is the ONLY writer of `.printMode` (store.state.printMode,
+   above), so the rule can only ever fire on descendants of that root — but
+   `.hideOnPrintMode` is placed by other components (VariableAdHocValueSelector,
+   pipeline/PipelineEditor, Dashboards/ViewDashboard) that render through
+   <router-view> and so do not carry this scope id. :deep() pierces to them while
+   keeping the ancestor condition scoped to the owner. */
+.printMode :deep(.hideOnPrintMode) {
+  display: none;
 }
 </style>
+
+
diff --git a/web/src/lib/core/Badge/OBadge.types.ts b/web/src/lib/core/Badge/OBadge.types.ts
index 76043e0361..74bc73d71d 100644
--- a/web/src/lib/core/Badge/OBadge.types.ts
+++ b/web/src/lib/core/Badge/OBadge.types.ts
@@ -34,7 +34,7 @@ export type BadgeVariant =
   | "success-soft"
   | "warning-soft"
   | "error-soft"
-  // NEW: Extended color families for correlation dimensions (8 colors × 3 variants = 24 new variants)
+  // Extended color families for correlation dimensions.
   | "teal" | "teal-outline" | "teal-soft"
   | "orange" | "orange-outline" | "orange-soft"
   | "lime" | "lime-outline" | "lime-soft"
@@ -50,7 +50,7 @@ export type BadgeSize = "xs" | "sm" | "md";
 /**
  * Corner shape:
  *   pill    — fully rounded (rounded-full). The default; classic status pill.
- *   rounded — small radius (rounded-md). For code/identifier-style chips.
+ *   rounded — small radius (rounded-default). For code/identifier-style chips.
  *   square  — no radius (rounded-none).
  */
 export type BadgeShape = "pill" | "rounded" | "square";
@@ -70,18 +70,18 @@ export interface BadgeProps {
   /**
    * Numeric count rendered in a trailing segment on the right.
    * Overridden by the `#trailing` slot when provided.
-   * NOTE: `count: 0` still renders the `0` chip (different from q-badge which
-   * hid empty counts). To hide an empty count, pass `count: undefined` or use
+   * NOTE: `count: 0` still renders the `0` chip (different from the previous badge
+   * which hid empty counts). To hide an empty count, pass `count: undefined` or use
    * `hideZeroCount`.
    */
   count?: number;
   /**
    * When true and `count` is 0, the trailing segment is suppressed
-   * (q-badge-compatible behavior).
+   * (matches the previous badge behavior).
    */
   hideZeroCount?: boolean;
   /**
-   * Renders a 7px solid status dot before the label (HANDOFF §11). The dot
+   * Renders a 7px solid status dot before the label. The dot
    * inherits the badge's foreground colour (`currentColor`), so a `success`
    * badge gets a green dot, an `error` badge a red dot, etc. Use for live
    * status pills like "active" / "suspended".
diff --git a/web/src/lib/core/Badge/OBadge.vue b/web/src/lib/core/Badge/OBadge.vue
index 79b49f199e..31b3a61ba4 100644
--- a/web/src/lib/core/Badge/OBadge.vue
+++ b/web/src/lib/core/Badge/OBadge.vue
@@ -31,7 +31,7 @@ const isOIcon = computed<boolean>(() =>
 
 /** True when the right trailing area should render (slot OR count prop).
  *  When hideZeroCount is set and count is 0, the trailing area is suppressed
- *  (q-badge-compatible behavior). */
+ *  (matches the previous badge behavior). */
 const hasTrailing = computed(() => {
   if (slots.trailing) return true;
   if (props.count === undefined) return false;
@@ -191,15 +191,15 @@ const variantClasses: Record<NonNullable<BadgeProps["variant"]>, string> = {
 
 // ── Size class map ────────────────────────────────────────────────────────
 const sizeClasses: Record<NonNullable<BadgeProps["size"]>, string> = {
-  xs: "px-1.5 py-0.5 text-[10px] gap-0.5",
-  sm: "px-2.5 py-1.5 text-[11px] gap-1",
+  xs: "px-1.5 py-0.5 text-3xs gap-0.5",
+  sm: "px-2.5 py-1.5 text-2xs gap-1",
   md: "px-2.5 py-2 text-xs gap-1.5",
 };
 
 // ── Shape (corner radius) class map ───────────────────────────────────────
 const shapeClasses: Record<NonNullable<BadgeProps["shape"]>, string> = {
   pill: "rounded-full",
-  rounded: "rounded-md",
+  rounded: "rounded-default",
   square: "rounded-none",
 };
 
@@ -211,8 +211,6 @@ const trailingSizeClasses = computed(() =>
 // ── Root element classes ──────────────────────────────────────────────────
 const classes = computed(() => [
   // Base — layout + typography + shape.
-  // Weight 600 per the design-system weight scale (HANDOFF §2.2: badges = 600).
-  // Pill shape (rounded-full) per HANDOFF §11 + this component's own contract.
   "inline-flex items-center whitespace-nowrap",
   "font-medium leading-none",
   "transition-colors duration-150",
diff --git a/web/src/lib/core/Badge/ODimensionChip.vue b/web/src/lib/core/Badge/ODimensionChip.vue
index b8aa6c2020..78db927e3f 100644
--- a/web/src/lib/core/Badge/ODimensionChip.vue
+++ b/web/src/lib/core/Badge/ODimensionChip.vue
@@ -27,7 +27,7 @@ withDefaults(
     value: string | number;
     /** Optional display override for the key segment (e.g. a shortened key). */
     keyLabel?: string;
-    /** Show a `key=value` hover tooltip. Default false (main had none). */
+    /** Show a `key=value` hover tooltip. Default false. */
     tooltip?: boolean;
   }>(),
   { tooltip: false },
@@ -38,7 +38,7 @@ withDefaults(
   <span class="inline-flex min-w-0 max-w-full">
     <OTag
       :variant="dimensionVariant(dimKey)"
-      shape="rounded"
+      shape="rounded-default"
       class="min-w-0 !p-0 overflow-hidden"
     >
       <span class="inline-flex items-stretch min-w-0">
diff --git a/web/src/lib/core/Badge/OTag.spec.ts b/web/src/lib/core/Badge/OTag.spec.ts
index 676ed180f6..a7e0a517a9 100644
--- a/web/src/lib/core/Badge/OTag.spec.ts
+++ b/web/src/lib/core/Badge/OTag.spec.ts
@@ -74,11 +74,11 @@ describe("OTag shape", () => {
   });
   it("fieldType (dtype chip) renders rounded, matching the wildcard pattern chip", () => {
     const html = mount(OTag, { props: { type: "fieldType", value: "string" } }).html();
-    expect(html.includes("rounded-md")).toBe(true);
+    expect(html.includes("rounded-default")).toBe(true);
   });
-  it("groups that opt into rounded render rounded-md", () => {
+  it("groups that opt into rounded render rounded-default", () => {
     const html = mount(OTag, { props: { type: "logsResultChip", value: "neutral" } }).html();
-    expect(html.includes("rounded-md")).toBe(true);
+    expect(html.includes("rounded-default")).toBe(true);
   });
   it("group-declared class is merged onto the badge (qualityStatus naked dot)", () => {
     const html = mount(OTag, { props: { type: "qualityStatus", value: "healthy" } }).html();
diff --git a/web/src/lib/core/Badge/OTag.vue b/web/src/lib/core/Badge/OTag.vue
index f641b76208..2ecc123c21 100644
--- a/web/src/lib/core/Badge/OTag.vue
+++ b/web/src/lib/core/Badge/OTag.vue
@@ -14,14 +14,14 @@
 //        <OTag value="whatever" />                       → generic semantic map
 //
 //   2. Manual (OBadge passthrough) — no `type`; drive it with `variant`, slots,
-//      `count`, etc. exactly like the old OBadge:
+//      `count`, etc.:
 //        <OTag variant="default-soft">Steps</OTag>
 //        <OTag variant="primary-soft" :count="12" />
 //        <OTag variant="teal-soft"><template #icon>…</template> Label </OTag>
 //
 // Per-call props (`label`, `variant`, `icon`, `dot`, `size`, `shape`) win over
 // the registry. Default size is "sm" for semantic (typed) badges and "md" for
-// manual badges, matching the legacy OBadge default.
+// manual badges.
 //
 // Label precedence (most → least specific):
 //   1. default slot      — arbitrary child content (spinner, tooltip, …)
@@ -47,7 +47,7 @@ const props = withDefaults(
     /** Raw value (string | boolean | number). Optional for manual badges. */
     value?: unknown;
     size?: BadgeSize;
-    /** Override the corner shape (pill | rounded | square). */
+    /** Override the corner shape: pill, rounded, or square. */
     shape?: BadgeShape;
     /** Override the resolved label with dynamic/runtime text. */
     label?: string;
@@ -95,19 +95,16 @@ const isEmpty = computed(
 
 const variant = computed<BadgeVariant>(() => {
   if (props.variant) return props.variant;
-  // Manual badge with neither a registry type nor a value → match the legacy
-  // OBadge default ("default") so a plain passthrough doesn't shift colour.
+  // Manual badge with neither a registry type nor a value → "default" variant so
+  // a plain passthrough doesn't shift colour.
   if (!props.type && normalizeKey(props.value) === "") return "default";
   return resolved.value.variant;
 });
-// Size precedence: prop → registry → "sm". `main`'s OTag defaulted every badge
-// to sm, so typed and untyped badges match height (e.g. builtin vs custom roles).
+// Size precedence: prop → registry → "sm".
 const size = computed<BadgeSize>(
   () => props.size ?? resolved.value.size ?? "sm",
 );
-// Shape precedence: prop → registry group → "pill". `main`'s OBadge was always
-// rounded-full (pill); only a few chips (logs/traces counts, status codes) were
-// rounded, and those groups set `shape:"rounded"` explicitly.
+// Shape precedence: prop → registry group → "pill".
 const shape = computed<BadgeShape>(
   () => props.shape ?? resolved.value.shape ?? "pill",
 );
@@ -130,7 +127,7 @@ const dot = computed(() =>
 
 <template>
   <!-- Empty typed value: a plain dash in PRIMARY text (never the disabled grey). -->
-  <span v-if="isEmpty" class="text-text-primary" v-bind="$attrs">{{ emptyLabel }}</span>
+  <span v-if="isEmpty" class="text-text-body" v-bind="$attrs">{{ emptyLabel }}</span>
   <OBadge
     v-else
     :variant="variant"
diff --git a/web/src/lib/core/Badge/badgeGroups.ts b/web/src/lib/core/Badge/badgeGroups.ts
index 3f30c22ba7..92ab271cad 100644
--- a/web/src/lib/core/Badge/badgeGroups.ts
+++ b/web/src/lib/core/Badge/badgeGroups.ts
@@ -322,13 +322,10 @@ export const BADGE_GROUPS = {
     },
   },
 
-  // CLI command presets (AddAiToolset) — every preset shares ONE colour, so this
-  // is a "named-colour" group: a fallback-only entry centralises the chip colour
-  // in the registry (R5) without enumerating each preset (the list is data-driven
-  // via CLI_PRESETS). The `value` is passed for semantics but always resolves to
-  // the fallback. shape:pill + size:md keep it pixel-identical to the old manual
-  // `variant="primary-soft"` chip. (If presets ever need per-preset colours, add
-  // them under `values`.)
+  // CLI command presets (AddAiToolset) — every preset shares ONE colour via a
+  // fallback-only entry (the list is data-driven via CLI_PRESETS). The `value` is
+  // passed for semantics but always resolves to the fallback. Add per-preset
+  // colours under `values` if ever needed.
   cliPreset: {
     mode: "plain",
     shape: "pill",
@@ -338,9 +335,8 @@ export const BADGE_GROUPS = {
   },
 
   // Count chip — numeric count/total badges, keyed by colour INTENT (the number
-  // itself is the slot). Centralises count-badge styling per the type-drives-
-  // styling rule. pill + sm; the leading `dot` (where present) stays a per-call
-  // decorative prop. Reusable across count badges.
+  // itself is the slot). pill + sm; the leading `dot` (where present) stays a
+  // per-call decorative prop.
   countChip: {
     mode: "plain",
     shape: "pill",
@@ -545,8 +541,7 @@ export const BADGE_GROUPS = {
 
   // Neutral field/value tag — plain chips that just display a field or value name
   // (CrossLinkManager fields, PipelinesDestinationList type/format, …). `soft` =
-  // the lighter default-soft variant; bare (fallback) = solid default. pill + md =
-  // matches a bare <OTag> (the manual default these replaced). Reusable.
+  // the lighter default-soft variant; bare (fallback) = solid default. pill + md.
   fieldTag: {
     mode: "plain",
     shape: "pill",
@@ -578,10 +573,8 @@ export const BADGE_GROUPS = {
     fallback: { variant: "default-soft" },
   },
 
-  // Report-row markers (ReportList) — report format + preview flag.
-  // png→primary-outline, preview→default-outline. pill + md; label is the slot.
   // Alert template origin — prebuilt vs custom. i18n labels via labelKey so the
-  // component needs no slot (was dimensionKey/fieldTag + hardcoded t() slots).
+  // component needs no slot.
   templateOrigin: {
     mode: "plain",
     shape: "pill",
@@ -630,8 +623,7 @@ export const BADGE_GROUPS = {
   },
 
   // Service-account kind (ServiceAccountsList) — system vs system-managed.
-  // system→primary-outline (sm), managed→default-outline (md) — per-value size
-  // preserves the two badges' original sizes. pill.
+  // system→primary-outline (sm), managed→default-outline (md). pill.
   serviceAccountKind: {
     mode: "plain",
     shape: "pill",
@@ -643,8 +635,8 @@ export const BADGE_GROUPS = {
   },
 
   // Dashboard variable SCOPE (VariableSettings) — global vs tabs vs panels.
-  // global→primary-soft, tabs/panels→primary-outline. pill + md to match the old
-  // manual chips; the count/label is the slot (e.g. "3 Tabs").
+  // global→primary-soft, tabs/panels→primary-outline. pill; the count/label is
+  // the slot (e.g. "3 Tabs").
   variableScope: {
     mode: "plain",
     shape: "pill",
@@ -682,9 +674,7 @@ export const BADGE_GROUPS = {
 
   // Field-name chips (ImportSemanticGroups dialogs) — decorative chips listing
   // field names. `highlight` = a group's member fields (primary), `muted` = the
-  // "current/old" side of a compare (light grey). Replaces dead
-  // `color="primary"/text-color/color="grey-4"` props that OTag silently ignored
-  // (so these had been rendering default). pill + sm.
+  // "current/old" side of a compare (light grey). pill + sm.
   fieldNameChip: {
     mode: "plain",
     shape: "pill",
@@ -697,8 +687,7 @@ export const BADGE_GROUPS = {
   },
 
   // Normalize state (ImportSemanticGroups) — boolean → colour + label.
-  // true → primary "Normalized", false → default "Not Normalized". SOLID + pill +
-  // md to match the old manual v-if/v-else chips (zero change).
+  // true → primary "Normalized", false → default "Not Normalized". SOLID + pill + md.
   normalizeState: {
     mode: "plain",
     shape: "pill",
@@ -712,8 +701,7 @@ export const BADGE_GROUPS = {
 
   // Field diff status (ImportSemanticGroups modification compare) — a proposed
   // field is either NEW (success) or already EXISTING (default). Plain colour
-  // only; the leading field name + trailing "add" icon stay as slots. SOLID +
-  // pill + sm = 1:1 with the old manual chips.
+  // only; the leading field name + trailing "add" icon stay as slots. SOLID + pill + sm.
   fieldDiffStatus: {
     mode: "plain",
     shape: "pill",
@@ -727,9 +715,8 @@ export const BADGE_GROUPS = {
 
   // Import diff summary categories (ImportSemanticGroups + …Drawer) — the diff
   // CATEGORY drives the colour (new→green, modified→amber, unchanged→grey); the
-  // count + label are the slot. A real value→colour family (not a pure count), so
-  // it's typed per R5/R2. SOLID + pill + md = 1:1 with the old manual chips; the
-  // count text sizing stays per-call (`.summary-chip` font-size on the list page).
+  // count + label are the slot. SOLID + pill + md; the count text sizing stays
+  // per-call (`.summary-chip` font-size on the list page).
   diffCategory: {
     mode: "plain",
     shape: "pill",
@@ -743,9 +730,7 @@ export const BADGE_GROUPS = {
   },
 
   // "Default" template marker (AlertsDestinationList) — fixed neutral flag.
-  // Named-colour group (R5). SOLID `default` + pill + md to match the old manual
-  // chip (no size prop → md; its `text-xs` class was redundant since md is
-  // already text-xs). Label stays an i18n slot at the call site.
+  // SOLID `default` + pill + md. Label stays an i18n slot at the call site.
   templateDefaultFlag: {
     mode: "plain",
     shape: "pill",
@@ -758,7 +743,7 @@ export const BADGE_GROUPS = {
 
   // "Active version" marker in scorer / score-config version lists — dot +
   // success. i18n label lives in the registry (labelKey) so the component needs
-  // no slot or per-instance :label. Was booleanState value="enabled" + t() slot.
+  // no slot or per-instance :label.
   activeVersionFlag: {
     mode: "dot",
     shape: "pill",
@@ -772,7 +757,7 @@ export const BADGE_GROUPS = {
   },
 
   // Default LLM-provider marker (LlmProvidersSettings) — dot + success, i18n
-  // label via labelKey. Was booleanState value="yes" + :label="t()".
+  // label via labelKey.
   providerDefaultFlag: {
     mode: "dot",
     shape: "pill",
@@ -782,10 +767,8 @@ export const BADGE_GROUPS = {
     fallback: { variant: "success-soft" },
   },
 
-  // Readonly marker (AddDestination) — single fixed neutral flag. Named-colour
-  // group (R5): centralises the colour so the badge isn't a manual `variant`.
-  // SOLID `default` + pill + sm to match the old manual chip exactly. Label stays
-  // an i18n slot at the call site. Reusable for any "readonly" marker.
+  // Readonly marker (AddDestination) — single fixed neutral flag. SOLID `default`
+  // + pill + sm. Label stays an i18n slot at the call site.
   readonlyFlag: {
     mode: "plain",
     shape: "pill",
@@ -798,8 +781,7 @@ export const BADGE_GROUPS = {
 
   // Destination ORIGIN — prebuilt vs custom (AlertsDestinationList). Colour is the
   // prebuilt/custom distinction (NOT the specific type — that's `destinationType`);
-  // the type NAME is passed as the slot label. SOLID variants + pill to match main
-  // exactly (the OBadge default these replaced was solid `primary`/`default`, pill).
+  // the type NAME is passed as the slot label. SOLID variants + pill.
   destinationKind: {
     mode: "plain",
     shape: "pill",
@@ -877,10 +859,10 @@ export const BADGE_GROUPS = {
 
   // ── Tracing ───────────────────────────────────────────────────────────────
 
-  // Span / trace status — dot. Mirrors SpanStatusPill / TraceStatusCell.
+  // Span / trace status — dot.
   spanStatus: {
     mode: "dot",
-    shape: "rounded",
+    shape: "pill",
     values: {
       ok: { variant: "success-soft", label: "OK" },
       success: { variant: "success-soft" },
@@ -922,7 +904,7 @@ export const BADGE_GROUPS = {
 
   // ── Online evals ────────────────────────────────────────────────────────
 
-  // Scorer type — plain. Mirrors scorerTypeBadgeVariant().
+  // Scorer type — plain.
   scorerType: {
     mode: "plain",
     shape: "pill",
@@ -935,7 +917,7 @@ export const BADGE_GROUPS = {
     },
   },
 
-  // Eval data type — plain. Mirrors dataTypeBadgeVariant().
+  // Eval data type — plain.
   evalDataType: {
     mode: "plain",
     shape: "pill",
@@ -948,8 +930,7 @@ export const BADGE_GROUPS = {
 
   // Threshold-declaration flag (Score Config detail → Healthy threshold section).
   // Muted, its own group so the label mapping stays scoped and never leaks into
-  // the shared `fieldTag` chips. Uses the default sm/pill sizing so it reads as a
-  // normal status chip, consistent with the sibling `evalDataType`/`evalStatus`.
+  // the shared `fieldTag` chips.
   thresholdFlag: {
     mode: "plain",
     shape: "pill",
@@ -959,12 +940,10 @@ export const BADGE_GROUPS = {
     fallback: { variant: "default-soft" },
   },
 
-  // LLM observation type — plain, PILL. Mirrors the in-component map that used
-  // to live in TraceDetailsSidebar (getObservationTypeColor → getObservationTypeVariant):
-  // many distinct semantic colours collapse to SOLID success/primary/warning/error/
-  // default. Kept 1:1 (solid variants, pill shape) so colour & shape match `main`.
-  // Keys are normalised (no underscores). `getObservationTypeColor` still drives
-  // TraceDAG graph-node fills — that is not a badge and is intentionally untouched.
+  // LLM observation type — plain, PILL. Many distinct semantic colours collapse
+  // to SOLID success/primary/warning/error/default. Keys are normalised (no
+  // underscores). NOTE: `getObservationTypeColor` still drives TraceDAG graph-node
+  // fills — that is not a badge and is intentionally untouched.
   observationType: {
     mode: "plain",
     shape: "pill",
@@ -989,8 +968,8 @@ export const BADGE_GROUPS = {
     fallback: { variant: "default" },
   },
 
-  // Enrichment URL-job status — dot, SOLID variants. Mirrors the inline map in
-  // EnrichmentTableList (completed→success, failed→error, processing→primary).
+  // Enrichment URL-job status — dot, SOLID variants (completed→success,
+  // failed→error, processing→primary).
   enrichmentJobStatus: {
     mode: "dot",
     shape: "pill",
@@ -1002,9 +981,8 @@ export const BADGE_GROUPS = {
     fallback: { variant: "default" },
   },
 
-  // Backfill job status — plain (no dot), SOLID variants. Mirrors getStatusColor()
-  // in BackfillJobDetails. `deletionfailed` is the deletion-overlay state the
-  // caller passes when deletion_status.failed is set.
+  // Backfill job status — plain (no dot), SOLID variants. `deletionfailed` is the
+  // deletion-overlay state the caller passes when deletion_status.failed is set.
   backfillJobStatus: {
     mode: "plain",
     shape: "pill",
@@ -1020,7 +998,7 @@ export const BADGE_GROUPS = {
   },
 
   // Model source (TestModelMatchDialog) — plain. org → primary, meta_org →
-  // default-outline, anything else (built-in) → default. Mirrors sourceColor().
+  // default-outline, anything else (built-in) → default.
   modelSource: {
     mode: "plain",
     shape: "pill",
@@ -1031,7 +1009,7 @@ export const BADGE_GROUPS = {
     fallback: { variant: "default" },
   },
 
-  // Evaluation verdict — icon. Mirrors TraceEvaluationsView verdict styling.
+  // Evaluation verdict — icon.
   evaluationVerdict: {
     mode: "icon",
     shape: "pill",
@@ -1045,8 +1023,7 @@ export const BADGE_GROUPS = {
 
   // ── Anomaly detection ─────────────────────────────────────────────────────
 
-  // Anomaly-detection job status — dot. Mirrors statusColor() in
-  // AnomalyDetectionList (softened from solid for table density).
+  // Anomaly-detection job status — dot (soft variants for table density).
   anomalyStatus: {
     mode: "dot",
     shape: "pill",
@@ -1062,7 +1039,7 @@ export const BADGE_GROUPS = {
 
   // ── Misc lifecycle ────────────────────────────────────────────────────────
 
-  // Backfill / async deletion job status — dot. Mirrors getDeletionStatusColor().
+  // Backfill / async deletion job status — dot.
   deletionStatus: {
     mode: "dot",
     shape: "pill",
@@ -1086,7 +1063,7 @@ export const BADGE_GROUPS = {
     },
   },
 
-  // RUM frustration EVENT type — plain. Mirrors FrustrationEventBadge config.
+  // RUM frustration EVENT type — plain.
   // (Frustration SEVERITY is count-derived → bucket the count yourself, then
   //  use the `severity` group; it can't be a value→variant entry.)
   frustrationEventType: {
@@ -1114,8 +1091,7 @@ export const BADGE_GROUPS = {
     },
   },
 
-  // Alert run state (alert history) — icon, PILL (status badge). Icons mirror
-  // the original status chip (✓ ok, ⊘ skipped, ✕ failed, ⏲ pending, 🔔 completed).
+  // Alert run state (alert history) — icon, PILL (status badge).
   alertState: {
     mode: "icon",
     shape: "pill",
@@ -1123,18 +1099,16 @@ export const BADGE_GROUPS = {
       firing: { variant: "error-soft", icon: "error-outline" },
       error: { variant: "error-soft", icon: "error-outline" },
       anomaly: { variant: "error-soft", icon: "error-outline" },
-      // `completed` = a finished/OK run → GREEN (matches the pre-migration
-      // AlertHistory badge + AlertHistorySummary.getStateColorClass). It is NOT
-      // a firing state for the badge (the timeline aggregates it under firing
-      // separately, but the per-row badge reads as Ok).
+      // `completed` = a finished/OK run → GREEN. It is NOT a firing state for the
+      // badge (the timeline aggregates it under firing separately, but the per-row
+      // badge reads as Ok).
       completed: { variant: "success-soft", icon: "check-circle-outline" },
       ok: { variant: "success-soft", icon: "check-circle-outline", label: "Ok" },
       success: { variant: "success-soft", icon: "check-circle-outline" },
       normal: { variant: "success-soft", icon: "check-circle-outline" },
       // A non-firing/passed evaluation. The histogram counts these as "Ok", so
-      // the badge shows "Ok" too (matches the alert-history summary).
-      // Key MUST be normalised (no separators) so "condition_not_satisfied",
-      // "Condition Not Satisfied", etc. all resolve here.
+      // the badge shows "Ok" too. Key MUST be normalised (no separators) so
+      // "condition_not_satisfied", "Condition Not Satisfied", etc. all resolve here.
       conditionnotsatisfied: { variant: "success-soft", icon: "check-circle-outline", label: "Ok" },
       skipped: { variant: "warning-soft", icon: "block" },
       flapping: { variant: "warning-soft", icon: "bolt", label: "Flapping" },
@@ -1145,7 +1119,7 @@ export const BADGE_GROUPS = {
   },
 
   // Recent-event result (overview) — plain. Failed/Firing run hot (red), Error
-  // is the milder amber, matching the original overview event badges.
+  // is the milder amber.
   eventStatus: {
     mode: "plain",
     shape: "pill",
@@ -1212,7 +1186,7 @@ export const BADGE_GROUPS = {
     fallback: { variant: "default-soft" },
   },
 
-  // Online-eval RUN status (per-record) — dot, PILL. 999px in source.
+  // Online-eval RUN status (per-record) — dot, PILL.
   evalRunStatus: {
     mode: "dot",
     shape: "pill",
@@ -1228,9 +1202,7 @@ export const BADGE_GROUPS = {
     fallback: { variant: "default-soft" },
   },
 
-  // Quality-config health — dot.
-  // LLM session outcome (derived from error_count) — dot + soft colour, mirrors
-  // the old manual statusBadgeClass/statusDotClass in SessionsList.
+  // LLM session outcome (derived from error_count) — dot + soft colour.
   sessionStatus: {
     mode: "dot",
     shape: "pill",
@@ -1272,7 +1244,7 @@ export const BADGE_GROUPS = {
     fallback: { variant: "default-soft" },
   },
 
-  // RUM event type — plain. Mirrors EventTypeBadge getEventTypeClass.
+  // RUM event type — plain.
   rumEventType: {
     mode: "plain",
     shape: "rounded",
diff --git a/web/src/lib/core/Button/OButton.types.ts b/web/src/lib/core/Button/OButton.types.ts
index 8476a6e1e0..5ea8e5d97d 100644
--- a/web/src/lib/core/Button/OButton.types.ts
+++ b/web/src/lib/core/Button/OButton.types.ts
@@ -68,7 +68,7 @@ export type ButtonSize =
   | "icon-circle-sm"
   // 30×30px square — matches toolbar icon button height (share/hamburger/auto-refresh)
   | "icon-toolbar"
-  // 26px rounded-lg — compact modern icon button for panel header collapse/expand
+  // 26px rounded-default — compact modern icon button for panel header collapse/expand
   | "icon-panel"
   // Tall narrow vertical rectangle — 32×20px for splitter collapse/expand buttons
   | "sidebar-button"
diff --git a/web/src/lib/core/Button/OButton.vue b/web/src/lib/core/Button/OButton.vue
index 823c1e4ffd..b5efc8cf8a 100644
--- a/web/src/lib/core/Button/OButton.vue
+++ b/web/src/lib/core/Button/OButton.vue
@@ -144,7 +144,7 @@ const variantClasses: Record<NonNullable<ButtonProps["variant"]>, string> = {
   ].join(" "),
   // Sidebar toggle: bg-surface border shadow — for persistent panel collapse/expand buttons
   "sidebar-toggle": [
-    "bg-surface-panel text-button-ghost-text border border-border-default shadow-sm",
+    "bg-surface-panel text-button-ghost-text border border-border-default",
     "enabled:hover:bg-button-ghost-hover-bg enabled:hover:border-button-border-hover",
     "enabled:active:bg-button-ghost-active-bg",
     "focus-visible:ring-[3px] focus-visible:ring-button-ghost-focus-ring",
@@ -152,16 +152,16 @@ const variantClasses: Record<NonNullable<ButtonProps["variant"]>, string> = {
   ].join(" "),
   // AI-themed gradient — purple→pink gradient background, white text
   "ai-gradient": [
-    "bg-[linear-gradient(135deg,#8B5CF6_0%,#EC4899_100%)] text-white border-0",
+    "bg-[image:var(--color-gradient-ai)] text-white border-0",
     "enabled:hover:shadow-[0_4px_12px_rgba(139,92,246,0.4)]",
     "enabled:active:opacity-90",
-    "focus-visible:ring-[3px] focus-visible:ring-[#8B5CF6]",
+    "focus-visible:ring-[3px] focus-visible:ring-ai-accent",
     "disabled:opacity-40",
   ].join(" "),
   // On-dark primary — white background with primary color text, for use on dark gradient panels
   "on-dark-primary": [
     "bg-white text-primary-600 font-bold border-0 shadow-md",
-    "enabled:hover:shadow-xl",
+    "enabled:hover:shadow-lg",
     "enabled:active:opacity-90",
     "focus-visible:ring-[3px] focus-visible:ring-white/50",
     "disabled:opacity-50",
@@ -177,20 +177,20 @@ const variantClasses: Record<NonNullable<ButtonProps["variant"]>, string> = {
   // Destination preview buttons — brand-colored CTAs inside alert destination preview cards
   // preview-slack: Slack green (#007a5a)
   "preview-slack": [
-    "bg-[#007a5a] text-white border-0 !rounded !text-sm !h-auto !py-2 !px-3",
-    "enabled:hover:bg-[#005a42]",
+    "bg-brand-slack text-text-inverse border-0 !rounded !text-sm !h-auto !py-2 !px-3",
+    "enabled:hover:bg-brand-slack-hover",
     "disabled:opacity-60",
   ].join(" "),
   // preview-teams: Microsoft Teams purple (#6264a7)
   "preview-teams": [
-    "bg-[#6264a7] text-white border-0 !rounded !h-auto !py-2 !px-4",
-    "enabled:hover:bg-[#464775]",
+    "bg-brand-teams text-text-inverse border-0 !rounded !h-auto !py-2 !px-4",
+    "enabled:hover:bg-brand-teams-hover",
     "disabled:opacity-60",
   ].join(" "),
   // preview-email: Email blue (#007bff)
   "preview-email": [
-    "bg-[#007bff] text-white border-0 !rounded !h-auto !py-3 !px-6",
-    "enabled:hover:bg-[#0056b3]",
+    "bg-brand-email text-text-inverse border-0 !rounded !h-auto !py-3 !px-6",
+    "enabled:hover:bg-brand-email-hover",
     "disabled:opacity-60",
   ].join(" "),
   // preview-action: Generic action button for destination previews with no brand color
@@ -201,9 +201,9 @@ const variantClasses: Record<NonNullable<ButtonProps["variant"]>, string> = {
   ].join(" "),
   // webinar-dismiss: Inline text-link style for the webinar top bar banner dismiss button
   "webinar-dismiss": [
-    "bg-transparent border-0 text-[#1e3a8a] underline font-bold text-[0.8125rem] whitespace-nowrap",
+    "bg-transparent border-0 text-promo-webinar-link underline font-bold text-compact whitespace-nowrap",
     "!h-auto !p-0",
-    "enabled:hover:text-[#1e40af]",
+    "enabled:hover:text-promo-webinar-link-hover",
     "disabled:opacity-60",
   ].join(" "),
   // outline-primary: Subtle primary bg + primary text + primary border — always visually highlighted.
@@ -218,7 +218,7 @@ const variantClasses: Record<NonNullable<ButtonProps["variant"]>, string> = {
   // pricing-chip: Pill-shaped toggle chip for model pricing quick-setup template selection
   "pricing-chip": [
     "bg-transparent text-inherit border border-border-default",
-    "!rounded-[20px] !text-xs !font-medium !h-auto !py-[5px] !px-[14px] !gap-[6px]",
+    "!rounded-full !text-xs !font-medium !h-auto !py-1.25 !px-3.5 !gap-1.5",
     "transition-colors duration-150",
     "enabled:hover:border-primary-600 enabled:hover:text-primary-600 enabled:hover:bg-button-ghost-hover-bg",
     "disabled:opacity-60",
@@ -226,43 +226,43 @@ const variantClasses: Record<NonNullable<ButtonProps["variant"]>, string> = {
 };
 
 const sizeClasses: Record<NonNullable<ButtonProps["size"]>, string> = {
-  xs: "h-7 ps-2.5 pe-2.5 text-xs gap-1.5 rounded",
-  // 34px control height per HANDOFF §11 — the workhorse compact button that
-  // pairs with 34px inputs in toolbars/headers. (radius 8 = rounded-lg per §11.)
-  sm: "h-[2.125rem] ps-3 pe-3 text-sm gap-2 rounded-lg",
+  xs: "h-7 ps-2.5 pe-2.5 text-xs gap-1.5 rounded-default",
+  // 34px control height — the workhorse compact button that pairs with 34px
+  // inputs in toolbars/headers. (radius 8 = rounded-default.)
+  sm: "h-[2.125rem] ps-3 pe-3 text-sm gap-2 rounded-default",
   // 30px labeled — matches icon-toolbar height for labeled outline buttons in toolbars
   "sm-toolbar":
-    "h-[1.875rem] ps-2 pe-2 text-xs gap-1.5 rounded-md",
+    "h-[1.875rem] ps-2 pe-2 text-xs gap-1.5 rounded-default",
   // Compact labeled size for inline field chips (axis items) — ~28px, matches the dense button size
   // Extra-compact chip size — 24px height for axis field chips in query builder
-  chip: "h-6 ps-2 pe-1.5 text-xs gap-1 rounded leading-none",
+  chip: "h-6 ps-2 pe-1.5 text-xs gap-1 rounded-default leading-none",
   // Same as chip but with fixed 12px font — for dashboard query builder axis field chips
   // (needed because the html font-size is 14px, making text-xs = 10.5px instead of 12px)
-  "chip-12": "h-6 ps-2 pe-1.5 !text-[12px] gap-1 rounded leading-none",
+  "chip-12": "h-6 ps-2 pe-1.5 !text-xs gap-1 rounded-default leading-none",
   "sm-action":
-    "h-[2.125rem] ps-3 pe-3 min-w-[80px] text-sm gap-2 rounded-lg",
-  md: "h-10 ps-4 pe-4 text-sm gap-2 rounded-lg",
-  lg: "h-12 ps-6 pe-6 text-base gap-3 rounded-lg",
-  icon: "size-6 p-0 rounded-md gap-x-0",
-  "icon-xs": "h-[30px] px-2 text-[18px] rounded-md gap-x-0",
+    "h-[2.125rem] ps-3 pe-3 min-w-20 text-sm gap-2 rounded-default",
+  md: "h-10 ps-4 pe-4 text-sm gap-2 rounded-default",
+  lg: "h-12 ps-6 pe-6 text-base gap-3 rounded-default",
+  icon: "size-6 p-0 rounded-default gap-x-0",
+  "icon-xs": "h-7.5 px-2 text-lg rounded-default gap-x-0",
   // 24px round circle — for small inline add/action icon buttons (e.g. + Joins, + Filters)
   "icon-xs-circle": "size-6 p-0 rounded-full gap-x-0",
   // 28px square — matches xs chip height for paired close/remove buttons
-  "icon-xs-sq": "h-7 w-7 p-0 rounded-md gap-x-0",
+  "icon-xs-sq": "h-7 w-7 p-0 rounded-default gap-x-0",
   // 24px square — matches chip size for paired close/remove buttons
-  "icon-chip": "h-6 w-6 p-0 rounded gap-x-0",
-  "icon-sm": "h-8 w-8 p-0 rounded-md gap-x-0",
-  "icon-md": "h-10 w-10 p-0 rounded-lg gap-x-0",
-  "icon-lg": "h-12 w-12 p-0 rounded-lg gap-x-0",
+  "icon-chip": "h-6 w-6 p-0 rounded-default gap-x-0",
+  "icon-sm": "h-8 w-8 p-0 rounded-default gap-x-0",
+  "icon-md": "h-10 w-10 p-0 rounded-default gap-x-0",
+  "icon-lg": "h-12 w-12 p-0 rounded-default gap-x-0",
   "icon-circle": "size-8 p-0 rounded-full gap-x-0",
   "icon-circle-sm": "size-7 p-0 rounded-full gap-x-0",
   // 30×30px square — for toolbar icon buttons (auto-refresh, share, hamburger)
-  "icon-toolbar": "size-[1.875rem] p-0 rounded-md gap-x-0",
-  // 26px rounded-lg — compact modern icon button for panel header collapse/expand
-  "icon-panel": "size-[1.625rem] p-0 rounded-lg gap-x-0",
+  "icon-toolbar": "size-[1.875rem] p-0 rounded-default gap-x-0",
+  // 26px rounded-default — compact modern icon button for panel header collapse/expand
+  "icon-panel": "size-[1.625rem] p-0 rounded-default gap-x-0",
   // Tall narrow vertical rectangle — 32px × 20px for splitter collapse/expand buttons
   "sidebar-button":
-    "h-8 w-3 p-0 rounded-sm overflow-hidden gap-x-0",
+    "h-8 w-3 p-0 rounded-default overflow-hidden gap-x-0",
 };
 
 const activeClasses = [
diff --git a/web/src/lib/core/Button/OButtonGroup.types.ts b/web/src/lib/core/Button/OButtonGroup.types.ts
index fb0b97a038..e7ac305830 100644
--- a/web/src/lib/core/Button/OButtonGroup.types.ts
+++ b/web/src/lib/core/Button/OButtonGroup.types.ts
@@ -1,35 +1,35 @@
-/**
- * ButtonGroup.types.ts — single source of truth for all OButtonGroup public types.
- */
-
-/** Layout axis for the group */
-export type ButtonGroupOrientation = "horizontal" | "vertical";
-
-/** Cross-axis alignment of items in the group */
-export type ButtonGroupAlign = "stretch" | "center" | "start" | "end";
-
-/**
- * Corner radius of the group clip — matches the inner button radius.
- * Use "sm" for chip/icon-chip sized button groups (4px).
- * Defaults to "md" (6px) to match md/sm sized buttons.
- */
-export type ButtonGroupRadius = "sm" | "md" | "lg";
-
-export interface ButtonGroupProps {
-  /** Stack buttons horizontally (default) or vertically */
-  orientation?: ButtonGroupOrientation;
-  /** Cross-axis alignment of child buttons. Defaults to 'stretch' */
-  align?: ButtonGroupAlign;
-  /**
-   * Corner radius applied to the group container clip.
-   * Must match the radius of the inner buttons to avoid corner artifacts.
-   * Use "sm" when children use size="chip" or size="icon-chip".
-   * Defaults to "md".
-   */
-  radius?: ButtonGroupRadius;
-}
-
-export interface ButtonGroupSlots {
-  /** One or more OButton children */
-  default?: () => unknown;
-}
+/**
+ * ButtonGroup.types.ts — single source of truth for all OButtonGroup public types.
+ */
+
+/** Layout axis for the group */
+export type ButtonGroupOrientation = "horizontal" | "vertical";
+
+/** Cross-axis alignment of items in the group */
+export type ButtonGroupAlign = "stretch" | "center" | "start" | "end";
+
+/**
+ * Corner radius of the group clip — matches the inner button radius.
+ * Use "sm" for chip/icon-chip sized button groups (4px).
+ * Defaults to "md" (6px) to match md/sm sized buttons.
+ */
+export type ButtonGroupRadius = "sm" | "md" | "lg";
+
+export interface ButtonGroupProps {
+  /** Stack buttons horizontally (default) or vertically */
+  orientation?: ButtonGroupOrientation;
+  /** Cross-axis alignment of child buttons. Defaults to 'stretch' */
+  align?: ButtonGroupAlign;
+  /**
+   * Corner radius applied to the group container clip.
+   * Must match the radius of the inner buttons to avoid corner artifacts.
+   * Use "sm" when children use size="chip" or size="icon-chip".
+   * Defaults to "md".
+   */
+  radius?: ButtonGroupRadius;
+}
+
+export interface ButtonGroupSlots {
+  /** One or more OButton children */
+  default?: () => unknown;
+}
diff --git a/web/src/lib/core/Button/OButtonGroup.vue b/web/src/lib/core/Button/OButtonGroup.vue
index ddaed08b6d..c47c625924 100644
--- a/web/src/lib/core/Button/OButtonGroup.vue
+++ b/web/src/lib/core/Button/OButtonGroup.vue
@@ -10,9 +10,9 @@ const props = withDefaults(defineProps<ButtonGroupProps>(), {
 defineSlots<ButtonGroupSlots>();
 
 const radiusClasses: Record<NonNullable<ButtonGroupProps["radius"]>, string> = {
-  sm: "rounded",
-  md: "rounded-md",
-  lg: "rounded-lg",
+  sm: "rounded-default",
+  md: "rounded-default",
+  lg: "rounded-default",
 };
 
 const alignClasses: Record<NonNullable<ButtonGroupProps["align"]>, string> = {
diff --git a/web/src/lib/core/Card/OCard.vue b/web/src/lib/core/Card/OCard.vue
index 597bd03695..5a0724aa99 100644
--- a/web/src/lib/core/Card/OCard.vue
+++ b/web/src/lib/core/Card/OCard.vue
@@ -7,7 +7,7 @@ defineSlots<OCardSlots>();
 
 <template>
   <div
-    class="bg-card-bg text-card-text rounded-lg flex flex-col"
+    class="bg-card-bg text-card-text rounded-default flex flex-col"
     v-bind="$attrs"
   >
     <slot />
diff --git a/web/src/lib/core/Code/OCode.vue b/web/src/lib/core/Code/OCode.vue
index 84068d5447..d0cece9fa6 100644
--- a/web/src/lib/core/Code/OCode.vue
+++ b/web/src/lib/core/Code/OCode.vue
@@ -40,15 +40,15 @@ async function copy() {
   <!-- ── Block mode: full-width scrollable pre/code ── -->
   <pre
     v-if="block"
-    class="relative block w-full rounded-md border border-code-border bg-code-block-bg text-code-block-text overflow-x-auto"
+    class="relative block w-full rounded-default border border-code-border bg-code-block-bg text-code-block-text overflow-x-auto"
   ><code
       ref="codeRef"
-      class="block px-3 py-2 text-xs [font-family:var(--font-mono)] leading-relaxed whitespace-pre"
+      class="block px-3 py-2 text-xs font-mono leading-relaxed whitespace-pre"
     ><slot /></code><button
       v-if="copyable"
       type="button"
       :aria-label="copied ? 'Copied!' : 'Copy to clipboard'"
-      class="absolute top-2 right-2 rounded p-1 transition-colors duration-150 text-code-copy-icon hover:text-code-copy-hover-icon hover:bg-code-copy-hover-bg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400"
+      class="absolute top-2 right-2 rounded-default p-1 transition-colors duration-150 text-code-copy-icon hover:text-code-copy-hover-icon hover:bg-code-copy-hover-bg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400"
       @click.prevent="copy"
     ><OIcon
         :name="copied ? 'check' : 'content-copy'"
@@ -62,9 +62,9 @@ async function copy() {
     ref="codeRef"
     :class="[
       'inline-flex items-center gap-1',
-      'rounded border border-code-border bg-code-bg text-code-text',
+      'rounded-default border border-code-border bg-code-bg text-code-text',
       'px-1 py-px',
-      'text-xs [font-family:var(--font-mono)] leading-none',
+      'text-xs font-mono leading-none',
       truncate ? 'max-w-full truncate' : '',
     ]"
   >
@@ -73,7 +73,7 @@ async function copy() {
       v-if="copyable"
       type="button"
       :aria-label="copied ? 'Copied!' : 'Copy'"
-      class="shrink-0 rounded p-px transition-colors duration-150 text-code-copy-icon hover:text-code-copy-hover-icon hover:bg-code-copy-hover-bg focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-400"
+      class="shrink-0 rounded-default p-px transition-colors duration-150 text-code-copy-icon hover:text-code-copy-hover-icon hover:bg-code-copy-hover-bg focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-400"
       @click.prevent="copy"
     >
       <OIcon
diff --git a/web/src/lib/core/Code/OCodeBlock.vue b/web/src/lib/core/Code/OCodeBlock.vue
index 8bd33f81e5..e717c1705f 100644
--- a/web/src/lib/core/Code/OCodeBlock.vue
+++ b/web/src/lib/core/Code/OCodeBlock.vue
@@ -24,7 +24,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <script setup lang="ts">
 import { computed, ref } from "vue";
-import { useStore } from "vuex";
 import hljs from "highlight.js";
 import { copyToClipboard } from "@/utils/clipboard";
 import OButton from "@/lib/core/Button/OButton.vue";
@@ -47,9 +46,6 @@ const props = withDefaults(defineProps<CodeBlockProps>(), {
 const emit = defineEmits<CodeBlockEmits>();
 defineSlots<CodeBlockSlots>();
 
-const store = useStore();
-const isDark = computed(() => store.state?.theme === "dark");
-
 // Secret reveal state — only relevant when `codeMasked` is provided.
 const revealed = ref(false);
 const displayCode = computed(() =>
@@ -94,20 +90,38 @@ const onCopy = () => {
 
 <template>
   <div
-    class="o2-code-block"
-    :class="[isDark ? 'o2-dark' : 'o2-light', chrome ? `o2-chrome-${chrome}` : '']"
+    class="o2-code-block my-3 overflow-hidden rounded-default border border-border-default"
+    :class="chrome ? `o2-chrome-${chrome}` : ''"
     :data-test="dataTest"
   >
-    <div class="o2-code-toolbar">
-      <span v-if="chrome === 'terminal'" class="o2-code-head">
-        <span class="o2-win-dots" aria-hidden="true"><i /><i /><i /></span>
-        <span class="o2-code-lang">Terminal</span>
+    <div
+      class="o2-code-toolbar flex items-center justify-between border-b border-border-default py-1 pl-3 pr-1.5"
+    >
+      <span
+        v-if="chrome === 'terminal'"
+        class="o2-code-head inline-flex min-w-0 items-center gap-2"
+      >
+        <span class="inline-flex gap-1.5" aria-hidden="true">
+          <i class="block size-2.5 rounded-full bg-status-negative" />
+          <i class="block size-2.5 rounded-full bg-warning" />
+          <i class="block size-2.5 rounded-full bg-status-positive" />
+        </span>
+        <span class="o2-code-lang font-mono text-2xs uppercase tracking-wider opacity-55"
+          >Terminal</span
+        >
       </span>
-      <span v-else-if="chrome === 'editor'" class="o2-code-head">
-        <OIcon name="code" size="xs" class="o2-code-file-ico" />
-        <span class="o2-code-file">{{ filename || lang || "text" }}</span>
+      <span
+        v-else-if="chrome === 'editor'"
+        class="o2-code-head inline-flex min-w-0 items-center gap-2"
+      >
+        <OIcon name="code" size="xs" class="opacity-60" />
+        <span class="font-mono text-xs font-semibold tracking-[0.01em] opacity-75">{{
+          filename || lang || "text"
+        }}</span>
       </span>
-      <span v-else class="o2-code-lang">{{ lang || "text" }}</span>
+      <span v-else class="o2-code-lang font-mono text-2xs uppercase tracking-wider opacity-55">{{
+        lang || "text"
+      }}</span>
       <div class="flex items-center gap-1">
         <OButton
           v-if="codeMasked"
@@ -138,74 +152,34 @@ const onCopy = () => {
 </template>
 
 <style scoped lang="scss">
+/* keep(generated-content): the `:deep(.hljs-*)` rules below colour highlight.js
+   markup injected via v-html — those class names never appear in this template,
+   so Tailwind cannot see them and no utility can reach them. The few non-:deep
+   rules here are the ones whose values are unregistered tokens
+   (--color-syntax-bg / --color-syntax-text have no @theme entry, so `bg-syntax-bg`
+   would compile to nothing) or need color-mix over one. */
 .o2-code-block {
-  border-radius: 8px;
-  overflow: hidden;
-  margin: 0.75rem 0;
-  border: 1px solid;
+  /* --color-syntax-* are :root-only (no @theme registration) → no utility exists.
+     They flip light→dark in dark.css, so one rule set covers both themes. */
+  background: var(--color-syntax-bg);
 }
 
 .o2-code-toolbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.25rem 0.4rem 0.25rem 0.75rem;
-  border-bottom: 1px solid;
+  background: color-mix(in srgb, var(--color-syntax-text) 4%, transparent);
 }
 
-.o2-code-lang {
-  font-size: 0.68rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  opacity: 0.55;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-}
-
-/* window chrome (terminal / editor) */
-.o2-code-head {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  min-width: 0;
-}
-.o2-win-dots {
-  display: inline-flex;
-  gap: 5px;
-}
-.o2-win-dots i {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  display: block;
-}
-.o2-win-dots i:nth-child(1) {
-  background: #ec6a5e;
-}
-.o2-win-dots i:nth-child(2) {
-  background: #f4bf4f;
-}
-.o2-win-dots i:nth-child(3) {
-  background: #61c454;
-}
-.o2-code-file {
-  font-size: 0.72rem;
-  font-weight: 600;
-  letter-spacing: 0.01em;
-  opacity: 0.75;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-}
-.o2-code-file-ico {
-  opacity: 0.6;
-}
 /* editor tab: a subtle raised tab on the toolbar's left */
 .o2-chrome-editor .o2-code-head {
   padding: 0.18rem 0.6rem;
   margin: -0.05rem 0;
-  border-radius: 6px;
-  background: var(--o2-tab-bg, rgba(0, 0, 0, 0.05));
+  border-radius: 0.375rem;
+  background: var(--color-theme-tab-bg);
 }
-.o2-dark.o2-chrome-editor .o2-code-head {
-  --o2-tab-bg: rgba(255, 255, 255, 0.06);
+/* Dark keeps a neutral white wash rather than the accent-tinted token, so the
+   tab reads as a highlight on the near-black syntax surface. `.dark` is set on
+   the root by utils/theme.ts (see dark.css). */
+.dark .o2-chrome-editor .o2-code-head {
+  background: color-mix(in srgb, var(--color-white) 6%, transparent);
 }
 
 .o2-code-pre {
@@ -217,24 +191,15 @@ const onCopy = () => {
 .o2-code-pre code {
   background: transparent;
   white-space: pre;
-  font-size: 0.8125rem;
+  font-size: var(--text-compact);
   line-height: 1.55;
   padding: 0;
+  color: var(--color-syntax-text);
 }
 
-/* ===================== LIGHT THEME ===================== */
-.o2-light {
-  background: #f6f8fa;
-  border-color: rgba(0, 0, 0, 0.1);
-
-  .o2-code-toolbar {
-    background: rgba(0, 0, 0, 0.03);
-    border-bottom-color: rgba(0, 0, 0, 0.08);
-  }
-  .o2-code-pre code {
-    color: #24292e;
-  }
-  // github (light) token palette
+/* ============ CODE THEME (token-driven; tokens flip via dark.css,
+   so one rule set covers both themes) ============ */
+.o2-code-block {
   :deep(.hljs-doctag),
   :deep(.hljs-keyword),
   :deep(.hljs-meta .hljs-keyword),
@@ -242,12 +207,12 @@ const onCopy = () => {
   :deep(.hljs-template-variable),
   :deep(.hljs-type),
   :deep(.hljs-variable.language_) {
-    color: #d73a49;
+    color: var(--color-syntax-keyword);
   }
   :deep(.hljs-title),
   :deep(.hljs-title.class_),
   :deep(.hljs-title.function_) {
-    color: #6f42c1;
+    color: var(--color-syntax-function);
   }
   :deep(.hljs-attr),
   :deep(.hljs-attribute),
@@ -259,95 +224,30 @@ const onCopy = () => {
   :deep(.hljs-selector-attr),
   :deep(.hljs-selector-class),
   :deep(.hljs-selector-id) {
-    color: #005cc5;
+    color: var(--color-syntax-number);
   }
   :deep(.hljs-regexp),
   :deep(.hljs-string),
   :deep(.hljs-meta .hljs-string) {
-    color: #032f62;
+    color: var(--color-syntax-string);
   }
   :deep(.hljs-built_in),
   :deep(.hljs-symbol) {
-    color: #e36209;
+    color: var(--color-syntax-builtin);
   }
   :deep(.hljs-comment),
   :deep(.hljs-code),
   :deep(.hljs-formula) {
-    color: #6a737d;
+    color: var(--color-syntax-comment);
   }
   :deep(.hljs-name),
   :deep(.hljs-quote),
   :deep(.hljs-selector-tag),
   :deep(.hljs-selector-pseudo) {
-    color: #22863a;
+    color: var(--color-syntax-tag);
   }
   :deep(.hljs-section) {
-    color: #005cc5;
-    font-weight: 600;
-  }
-}
-
-/* ===================== DARK THEME ===================== */
-.o2-dark {
-  background: #0d1117;
-  border-color: rgba(255, 255, 255, 0.08);
-
-  .o2-code-toolbar {
-    background: rgba(255, 255, 255, 0.04);
-    border-bottom-color: rgba(255, 255, 255, 0.08);
-  }
-  .o2-code-pre code {
-    color: #c9d1d9;
-  }
-  // github-dark token palette
-  :deep(.hljs-doctag),
-  :deep(.hljs-keyword),
-  :deep(.hljs-meta .hljs-keyword),
-  :deep(.hljs-template-tag),
-  :deep(.hljs-template-variable),
-  :deep(.hljs-type),
-  :deep(.hljs-variable.language_) {
-    color: #ff7b72;
-  }
-  :deep(.hljs-title),
-  :deep(.hljs-title.class_),
-  :deep(.hljs-title.function_) {
-    color: #d2a8ff;
-  }
-  :deep(.hljs-attr),
-  :deep(.hljs-attribute),
-  :deep(.hljs-literal),
-  :deep(.hljs-meta),
-  :deep(.hljs-number),
-  :deep(.hljs-operator),
-  :deep(.hljs-variable),
-  :deep(.hljs-selector-attr),
-  :deep(.hljs-selector-class),
-  :deep(.hljs-selector-id) {
-    color: #79c0ff;
-  }
-  :deep(.hljs-regexp),
-  :deep(.hljs-string),
-  :deep(.hljs-meta .hljs-string) {
-    color: #a5d6ff;
-  }
-  :deep(.hljs-built_in),
-  :deep(.hljs-symbol) {
-    color: #ffa657;
-  }
-  :deep(.hljs-comment),
-  :deep(.hljs-code),
-  :deep(.hljs-formula) {
-    color: #8b949e;
-  }
-  :deep(.hljs-name),
-  :deep(.hljs-quote),
-  :deep(.hljs-selector-tag),
-  :deep(.hljs-selector-pseudo) {
-    color: #7ee787;
-  }
-  :deep(.hljs-section) {
-    color: #1f6feb;
+    color: var(--color-syntax-number);
     font-weight: 600;
   }
 }
diff --git a/web/src/lib/core/Collapsible/OCollapsible.vue b/web/src/lib/core/Collapsible/OCollapsible.vue
index 4957ef27b9..ae2f1b8606 100644
--- a/web/src/lib/core/Collapsible/OCollapsible.vue
+++ b/web/src/lib/core/Collapsible/OCollapsible.vue
@@ -100,8 +100,8 @@ watch(
         'hover:bg-collapsible-trigger-hover-bg active:bg-collapsible-trigger-active-bg',
         'focus-visible:ring-2 focus-visible:ring-collapsible-trigger-focus-ring focus-visible:ring-offset-1',
         variant === 'sidebar'
-          ? 'px-3 py-0 min-h-[36px] rounded-none'
-          : 'px-2 py-2 rounded-md',
+          ? 'px-3 py-0 min-h-9 rounded-none'
+          : 'px-2 py-2 rounded-default',
         triggerClass,
       ]"
     >
@@ -140,7 +140,7 @@ watch(
           <span
             :class="[
               'font-medium text-collapsible-label truncate',
-              variant === 'sidebar' ? 'text-[13px]' : 'text-sm',
+              variant === 'sidebar' ? 'text-compact' : 'text-sm',
             ]"
             >{{ label }}</span
           >
@@ -169,7 +169,16 @@ watch(
   </CollapsibleRoot>
 </template>
 
-<style>
+<style scoped>
+/* keep(keyframes): reka-ui height animation keyed off [data-state] +
+   --reka-collapsible-content-height; no utility can express it.
+   These keyframes are referenced ONLY from the CSS in this block (never from a
+   template `[animation:…]` utility), so `scoped` is safe: Vue renames the
+   @keyframes and the `animation:` shorthands together and stays consistent.
+   That is also why they do NOT belong in styles/keyframes.css.
+   `.o-collapsible-content` sits on reka's CollapsibleContent in THIS
+   component's template, so it carries this scope id. FieldExpansion.vue reaches
+   the same class through its own `:deep()`, which is unaffected. */
 .o-collapsible-content[data-state="open"] {
   animation: o-collapsible-open 200ms ease-out;
 }
diff --git a/web/src/lib/core/Content/OContent.vue b/web/src/lib/core/Content/OContent.vue
new file mode 100644
index 0000000000..4764017ab7
--- /dev/null
+++ b/web/src/lib/core/Content/OContent.vue
@@ -0,0 +1,70 @@
+<!-- Copyright 2026 OpenObserve Inc.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<!--
+  OContent — the single content-inset primitive for the app.
+
+  It applies the app's ONE horizontal content inset (`--spacing-page-edge`, the
+  same grid line the page header, tables, rails and tab labels all align to) so
+  every page body, panel, tab-panel and dialog section lines up on the same
+  vertical rule. Use it instead of hand-picking `px-2` / `px-4` / `p-2.5` on a
+  wrapper — that is exactly how screens drift out of alignment.
+
+    <OContent class="flex-1 min-h-0 overflow-auto">…</OContent>
+
+  Escape hatches (mirror ODrawer/ODialog's `bleed`):
+    • `bleed`  — remove the inset on BOTH axes (full-bleed tables/charts/editors
+                 that own their own edge — e.g. an OTable, a flow canvas).
+    • `bleed-x`— remove only the horizontal inset (keep vertical).
+    • `bleed-y`— remove only the vertical inset (keep horizontal).
+
+  By default OContent insets the HORIZONTAL axis only (the alignment-critical
+  one). Pass `y` to also apply the standard vertical inset, or add your own
+  `py-*` / `gap-*` via class. The root merges any class you pass, so layout
+  utilities (`flex`, `h-full`, `overflow-*`) compose normally.
+-->
+<template>
+  <component :is="as" :class="paddingClass">
+    <slot />
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    /** Remove the content inset on both axes (full-bleed). */
+    bleed?: boolean;
+    /** Remove only the horizontal inset. */
+    bleedX?: boolean;
+    /** Remove only the vertical inset. */
+    bleedY?: boolean;
+    /** Also apply the standard vertical inset (off by default). */
+    y?: boolean;
+    /** Root element tag. */
+    as?: string;
+  }>(),
+  { bleed: false, bleedX: false, bleedY: false, y: false, as: "div" },
+);
+
+const paddingClass = computed(() => {
+  const classes: string[] = [];
+  if (!props.bleed && !props.bleedX) classes.push("px-page-edge");
+  if (props.y && !props.bleed && !props.bleedY) classes.push("py-page-edge");
+  return classes.join(" ");
+});
+</script>
diff --git a/web/src/lib/core/EmptyState/EmptyStateActionCard.spec.ts b/web/src/lib/core/EmptyState/EmptyStateActionCard.spec.ts
index f84b292571..0f78443cdf 100644
--- a/web/src/lib/core/EmptyState/EmptyStateActionCard.spec.ts
+++ b/web/src/lib/core/EmptyState/EmptyStateActionCard.spec.ts
@@ -53,9 +53,9 @@ describe("EmptyStateActionCard", () => {
 
   it("renders the icon inside the tile wrapper with correct classes", () => {
     const wrapper = mountCard();
-    const tileSpan = wrapper.find("button span.rounded-lg");
+    const tileSpan = wrapper.find("button span.rounded-default");
     expect(tileSpan.exists()).toBe(true);
-    expect(tileSpan.classes()).toContain("rounded-lg");
+    expect(tileSpan.classes()).toContain("rounded-default");
     expect(tileSpan.classes()).toContain("bg-tabs-active-bg");
   });
 
@@ -118,11 +118,12 @@ describe("EmptyStateActionCard", () => {
     expect(btn.classes()).toContain("group");
     expect(btn.classes()).toContain("flex");
     expect(btn.classes()).toContain("items-center");
-    expect(btn.classes()).toContain("rounded-xl");
+    expect(btn.classes()).toContain("rounded-default");
     expect(btn.classes()).toContain("border");
     expect(btn.classes()).toContain("border-border-default");
     expect(btn.classes()).toContain("bg-surface-base");
-    expect(btn.classes()).toContain("shadow-sm");
+    // Base state has no shadow; the lift only appears on hover (hover:shadow-md).
+    expect(btn.classes()).toContain("hover:shadow-md");
     expect(btn.classes()).toContain("text-left");
     expect(btn.classes()).toContain("cursor-pointer");
   });
diff --git a/web/src/lib/core/EmptyState/EmptyStateActionCard.vue b/web/src/lib/core/EmptyState/EmptyStateActionCard.vue
index b528bf89eb..5026f96e61 100644
--- a/web/src/lib/core/EmptyState/EmptyStateActionCard.vue
+++ b/web/src/lib/core/EmptyState/EmptyStateActionCard.vue
@@ -23,10 +23,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <button
     type="button"
-    class="group relative flex items-center gap-3 flex-1 basis-56 min-w-0 max-w-72 min-h-16 ps-3 pe-3.5 py-2.5 rounded-xl border border-border-default bg-surface-base shadow-sm text-left cursor-pointer transition-[color,background-color,border-color,box-shadow,transform] duration-150 outline-none hover:shadow-md hover:border-primary-400 hover:bg-tabs-hover-bg focus-visible:ring-[0.125rem] focus-visible:ring-primary-500/40"
+    class="group relative flex items-center gap-3 flex-1 basis-56 min-w-0 max-w-72 min-h-16 ps-3 pe-3.5 py-2.5 rounded-default border border-border-default bg-surface-base text-left cursor-pointer transition-[color,background-color,border-color,box-shadow,transform] duration-150 outline-none hover:shadow-md hover:border-primary-400 hover:bg-tabs-hover-bg focus-visible:ring-[0.125rem] focus-visible:ring-primary-500/40"
   >
     <span
-      class="relative inline-flex items-center justify-center shrink-0 w-10 h-10 rounded-lg bg-tabs-active-bg text-tabs-active-text transition-colors group-hover:bg-primary-600 group-hover:text-white"
+      class="relative inline-flex items-center justify-center shrink-0 w-10 h-10 rounded-default bg-tabs-active-bg text-tabs-active-text transition-colors group-hover:bg-primary-600 group-hover:text-white"
     >
       <OIcon :name="icon" size="md" />
     </span>
@@ -34,7 +34,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <span class="relative flex-1 min-w-0">
       <span
         :title="label"
-        class="block text-sm font-medium text-text-primary wrap-break-word"
+        class="block text-sm font-medium text-text-heading wrap-break-word"
         >{{ label }}</span
       >
       <span
diff --git a/web/src/lib/core/EmptyState/EmptyStateIngestionCard.vue b/web/src/lib/core/EmptyState/EmptyStateIngestionCard.vue
index 49bd69ad22..1efe5aad47 100644
--- a/web/src/lib/core/EmptyState/EmptyStateIngestionCard.vue
+++ b/web/src/lib/core/EmptyState/EmptyStateIngestionCard.vue
@@ -22,17 +22,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <button
     type="button"
-    class="es-ing-card relative flex items-center gap-3 flex-1 basis-56 min-w-0 max-w-72 min-h-16 py-2.5 pr-3.5 pl-3 rounded-xl border border-border-default bg-surface-base shadow-sm text-left cursor-pointer outline-none transition-[color,background-color,border-color,box-shadow] duration-150"
+    class="es-ing-card group relative flex items-center gap-3 flex-1 basis-56 min-w-0 max-w-72 min-h-16 py-2.5 pr-3.5 pl-3 rounded-default border border-border-default bg-surface-base text-left cursor-pointer outline-none transition-[color,background-color,border-color,box-shadow] duration-150 hover:shadow-md hover:border-primary-400 hover:bg-tabs-hover-bg focus-visible:ring-2 focus-visible:ring-primary-500/40"
     @click="emit('click')"
   >
-    <span class="es-ing-card__icon inline-flex items-center justify-center shrink-0 w-10 h-10 rounded-lg bg-tabs-active-bg text-tabs-active-text transition-[background-color,color] duration-150" :class="iconClass">
+    <span class="es-ing-card__icon inline-flex items-center justify-center shrink-0 w-10 h-10 rounded-default bg-tabs-active-bg text-tabs-active-text transition-[background-color,color] duration-150" :class="iconClass">
       <OIcon :name="icon" size="md" />
     </span>
     <span class="es-ing-card__body flex-1 min-w-0 flex flex-col gap-0.5">
-      <span class="text-[length:var(--text-sm)] font-semibold text-text-primary truncate">{{ label }}</span>
-      <span v-if="sublabel" class="text-[length:var(--text-xs)] text-text-secondary leading-[1.4]">{{ sublabel }}</span>
+      <span class="text-compact font-semibold text-text-heading truncate">{{ label }}</span>
+      <span v-if="sublabel" class="text-xs text-text-secondary leading-[1.4]">{{ sublabel }}</span>
     </span>
-    <OIcon name="chevron-right" size="sm" class="es-ing-card__chevron shrink-0 text-text-disabled transition-[transform,color] duration-150" />
+    <OIcon name="chevron-right" size="sm" class="es-ing-card__chevron shrink-0 text-text-disabled transition-[transform,color] duration-150 group-hover:translate-x-0.5 group-hover:text-primary-600" />
   </button>
 </template>
 
@@ -60,34 +60,19 @@ const iconClass = computed(() =>
 );
 </script>
 
-<style>
-/* hover / focus-visible states (compound selectors — can't be inlined) */
-.es-ing-card:hover {
-  box-shadow: var(--shadow-md);
-  border-color: var(--color-primary-400);
-  background: var(--color-tabs-hover-bg);
-}
-.es-ing-card:focus-visible {
-  box-shadow: 0 0 0 0.125rem color-mix(in srgb, var(--color-primary-500) 40%, transparent);
-}
+<style scoped>
+/* keep(brand): decorative icon accent tints — color-mix on palette tokens has
+   no semantic equivalent; the parent-hover override must outrank the variant
+   classes, so both live here rather than as utilities. */
+.es-ing-card__icon--blue   { background: color-mix(in srgb, var(--color-blue-500) 12%, transparent); color: var(--color-blue-500); }
+.es-ing-card__icon--teal   { background: color-mix(in srgb, var(--color-teal-600) 12%, transparent); color: var(--color-teal-600); }
+.es-ing-card__icon--purple { background: color-mix(in srgb, var(--color-purple-500) 12%, transparent); color: var(--color-purple-500); }
+.es-ing-card__icon--amber  { background: color-mix(in srgb, var(--color-amber-600) 12%, transparent); color: var(--color-amber-600); }
+.es-ing-card__icon--orange { background: color-mix(in srgb, var(--color-orange-500) 12%, transparent); color: var(--color-orange-500); }
 
-/* icon color variants (color-mix not expressible in Tailwind arbitrary) */
-.es-ing-card__icon--blue   { background: color-mix(in srgb, #3b82f6 12%, transparent); color: #3b82f6; }
-.es-ing-card__icon--teal   { background: color-mix(in srgb, #0d9488 12%, transparent); color: #0d9488; }
-.es-ing-card__icon--purple { background: color-mix(in srgb, #8b5cf6 12%, transparent); color: #8b5cf6; }
-.es-ing-card__icon--amber  { background: color-mix(in srgb, #d97706 12%, transparent); color: #d97706; }
-.es-ing-card__icon--orange { background: color-mix(in srgb, #f97316 12%, transparent); color: #f97316; }
-
-/* parent-context compound: icon highlight on card hover */
 .es-ing-card:hover .es-ing-card__icon,
 .es-ing-card:hover [class*="es-ing-card__icon--"] {
   background: var(--color-primary-600);
-  color: #fff;
-}
-
-/* chevron nudge on card hover */
-.es-ing-card:hover .es-ing-card__chevron {
-  transform: translateX(0.125rem);
-  color: var(--color-primary-600);
+  color: var(--color-white);
 }
 </style>
diff --git a/web/src/lib/core/EmptyState/EmptyStateIngestionChip.vue b/web/src/lib/core/EmptyState/EmptyStateIngestionChip.vue
index 487d500d9d..b0b0b787e0 100644
--- a/web/src/lib/core/EmptyState/EmptyStateIngestionChip.vue
+++ b/web/src/lib/core/EmptyState/EmptyStateIngestionChip.vue
@@ -21,7 +21,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <component
     :is="href ? 'a' : 'button'"
-    class="es-ing-chip inline-flex items-center gap-1.25 py-1 px-3 text-[length:var(--text-sm)] font-medium rounded-full border border-border-default bg-surface-panel no-underline cursor-pointer outline-none transition-[border-color,color,background-color] duration-150 hover:border-primary-400 hover:bg-[color-mix(in_srgb,var(--color-primary-500)_6%,transparent)] focus-visible:shadow-[0_0_0_0.125rem_color-mix(in_srgb,var(--color-primary-500)_40%,transparent)]"
+    class="es-ing-chip inline-flex items-center gap-1.25 py-1 px-3 text-compact font-medium rounded-full border border-border-default bg-surface-panel no-underline! text-text-secondary! cursor-pointer outline-none transition-[border-color,color,background-color] duration-150 hover:border-primary-400 hover:text-primary-600! hover:bg-[color-mix(in_srgb,var(--color-primary-500)_6%,transparent)] focus-visible:shadow-[0_0_0_0.125rem_color-mix(in_srgb,var(--color-primary-500)_40%,transparent)]"
     v-bind="href ? { href, target: '_blank', rel: 'noopener noreferrer' } : { type: 'button' }"
     @click="!href && emit('click')"
   >
@@ -42,10 +42,39 @@ defineProps<{
 const emit = defineEmits<{ click: [] }>();
 </script>
 
-<style>
-/* Color can't be inlined: as an <a> the chip inherits the global unlayered
-   `a { color: var(--o2-text-link) }`, which beats any layered  utility.
-   A class selector outranks the bare `a` selector without needing `!`. */
-.es-ing-chip { color: var(--color-text-secondary); }
-.es-ing-chip:hover { color: var(--color-primary-600); text-decoration: none; }
+<style scoped>
+/* keep(complex-state): `.ai-hover-btn` is this chip's public modifier API — the
+   four ingestion empty states (logs/traces NoData + NoEvents) pass it onto the
+   chip's OWN root to turn it into the "Ask AI" pill. It needs a hover-state
+   gradient swap plus a filter on the SLOTTED <img> (hence `:deep`), so it
+   cannot be expressed as template utilities on the call sites. `!important`
+   preserves the previous global rule's win over the chip's own
+   `bg-surface-panel` / `text-text-secondary!` / `hover:text-primary-600!`
+   utilities. Dark mode rides the `--color-gradient-ai-subtle` token flip. */
+.ai-hover-btn {
+  background: var(--color-gradient-ai-subtle) !important;
+  color: var(--color-ai-accent) !important;
+  transition:
+    background 0.3s ease,
+    box-shadow 0.3s ease,
+    color 0.3s ease;
+}
+
+.dark .ai-hover-btn {
+  box-shadow: 0 0.25rem 0.75rem 0
+    color-mix(in srgb, var(--color-ai-accent) 20%, transparent);
+  color: white !important;
+}
+
+.ai-hover-btn:hover {
+  background: var(--color-gradient-ai) !important;
+  box-shadow: 0 0.25rem 0.75rem 0
+    color-mix(in srgb, var(--color-ai-accent) 35%, transparent);
+  color: white !important;
+}
+
+.ai-hover-btn:hover :deep(img) {
+  filter: brightness(0) invert(1);
+  transition: filter 0.3s ease;
+}
 </style>
diff --git a/web/src/lib/core/EmptyState/OEmptyState.vue b/web/src/lib/core/EmptyState/OEmptyState.vue
index ddf2a4a7bf..4c2790edaf 100644
--- a/web/src/lib/core/EmptyState/OEmptyState.vue
+++ b/web/src/lib/core/EmptyState/OEmptyState.vue
@@ -35,6 +35,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <div
     :class="[
       'o2-empty-state relative flex flex-col items-center justify-center overflow-hidden',
+      '[--empty-dot:var(--color-grey-300)] dark:[--empty-dot:var(--color-grey-800)]',
       sizeClass.root,
       { 'o2-empty-state--hero': size === 'hero' },
     ]"
@@ -72,7 +73,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <div :class="['flex flex-col max-w-xl', sizeClass.copy]">
         <component
           :is="size === 'inline' ? 'p' : 'h2'"
-          :class="['font-medium text-text-primary tracking-[-0.01em]', sizeClass.title]"
+          :class="['font-medium text-text-heading tracking-[-0.01em]', sizeClass.title]"
         >
           <slot name="title">{{ resolvedTitle }}</slot>
         </component>
@@ -334,7 +335,7 @@ const SIZE_MAP: Record<
   }
 > = {
   hero: {
-    root: "w-full h-full min-h-[320px] px-6 py-12",
+    root: "w-full h-full min-h-80 px-6 py-12",
     stack: "gap-7",
     copy: "gap-2.5",
     actions: "gap-3 pt-1",
@@ -345,7 +346,7 @@ const SIZE_MAP: Record<
     iconWrap: "",
   },
   block: {
-    root: "w-full min-h-[260px] px-6 py-10",
+    root: "w-full min-h-65 px-6 py-10",
     stack: "gap-5",
     copy: "gap-2",
     actions: "gap-2.5 pt-0.5",
@@ -356,7 +357,7 @@ const SIZE_MAP: Record<
     iconWrap: "",
   },
   inline: {
-    root: "w-full min-h-[160px] px-4 py-8",
+    root: "w-full min-h-40 px-4 py-8",
     stack: "gap-3",
     copy: "gap-1",
     actions: "gap-2 pt-1",
@@ -370,9 +371,3 @@ const SIZE_MAP: Record<
 };
 const sizeClass = computed(() => SIZE_MAP[size.value]);
 </script>
-
-<style>
-/* CSS custom property for the dot-grid backdrop; dark mode overrides it. */
-.o2-empty-state { --empty-dot: var(--color-grey-300); }
-.dark .o2-empty-state { --empty-dot: var(--color-grey-800); }
-</style>
diff --git a/web/src/lib/core/EmptyState/illustrations/EmptyAlert.vue b/web/src/lib/core/EmptyState/illustrations/EmptyAlert.vue
index bb0895e5cf..a4b45f9008 100644
--- a/web/src/lib/core/EmptyState/illustrations/EmptyAlert.vue
+++ b/web/src/lib/core/EmptyState/illustrations/EmptyAlert.vue
@@ -65,7 +65,13 @@ withDefaults(
 );
 </script>
 
-<style>
+<style scoped>
+/* keep(keyframes): SVG illustration animation. Scoped on purpose (W2.b): the
+   20 illustrations reused generic keyframe names (es-pulse, es-twinkle, …) with
+   DIFFERENT bodies from unscoped blocks — a global name collision where the
+   last-loaded illustration hijacked the others' animations. Vue rewrites scoped
+   keyframe names per component, which ends the collision. All selectors and the
+   es-static gate live in this file's own template. */
 .es-bell {
   transform-box: view-box;
   transform-origin: 120px 48px;
diff --git a/web/src/lib/core/EmptyState/illustrations/EmptyAllClear.vue b/web/src/lib/core/EmptyState/illustrations/EmptyAllClear.vue
index e4009dda2c..723c03eaef 100644
--- a/web/src/lib/core/EmptyState/illustrations/EmptyAllClear.vue
+++ b/web/src/lib/core/EmptyState/illustrations/EmptyAllClear.vue
@@ -78,11 +78,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
       <!-- head (content, eyes closed) -->
       <g>
-        <ellipse cx="120" cy="166" rx="15" ry="16" fill="#f0c29a" transform="rotate(-28 120 166)" />
-        <path d="M106 156 Q108 140 124 141 Q140 144 136 160 Q135 152 127 150 Q131 155 129 161 Q122 151 114 154 Q108 156 107 164 Z" fill="#5b4a3a" />
-        <path d="M110 164 Q114 167 118 164" stroke="#3a2f25" stroke-width="1.7" stroke-linecap="round" fill="none" />
-        <path d="M122 161 Q126 164 130 160" stroke="#3a2f25" stroke-width="1.7" stroke-linecap="round" fill="none" />
-        <path d="M111 172 Q116 177 122 170" stroke="#b5764a" stroke-width="1.7" stroke-linecap="round" fill="none" />
+        <ellipse cx="120" cy="166" rx="15" ry="16" fill="var(--color-illustration-sand)" transform="rotate(-28 120 166)" />
+        <path d="M106 156 Q108 140 124 141 Q140 144 136 160 Q135 152 127 150 Q131 155 129 161 Q122 151 114 154 Q108 156 107 164 Z" fill="var(--color-illustration-umber)" />
+        <path d="M110 164 Q114 167 118 164" stroke="var(--color-illustration-espresso)" stroke-width="1.7" stroke-linecap="round" fill="none" />
+        <path d="M122 161 Q126 164 130 160" stroke="var(--color-illustration-espresso)" stroke-width="1.7" stroke-linecap="round" fill="none" />
+        <path d="M111 172 Q116 177 122 170" stroke="var(--color-illustration-clay)" stroke-width="1.7" stroke-linecap="round" fill="none" />
       </g>
     </g>
   </svg>
@@ -95,7 +95,13 @@ withDefaults(
 );
 </script>
 
-<style>
+<style scoped>
+/* keep(keyframes): SVG illustration animation. Scoped on purpose (W2.b): the
+   20 illustrations reused generic keyframe names (es-pulse, es-twinkle, …) with
+   DIFFERENT bodies from unscoped blocks — a global name collision where the
+   last-loaded illustration hijacked the others' animations. Vue rewrites scoped
+   keyframe names per component, which ends the collision. All selectors and the
+   es-static gate live in this file's own template. */
 .es-badge,
 .es-spark {
   transform-box: fill-box;
diff --git a/web/src/lib/core/EmptyState/illustrations/EmptyBoard.vue b/web/src/lib/core/EmptyState/illustrations/EmptyBoard.vue
index e2db4b186b..8486d382b2 100644
--- a/web/src/lib/core/EmptyState/illustrations/EmptyBoard.vue
+++ b/web/src/lib/core/EmptyState/illustrations/EmptyBoard.vue
@@ -39,10 +39,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </g>
 
     <!-- drifting + confetti -->
-    <g class="es-cf es-cf-a [transform-box:fill-box] origin-center [animation:es-cf_5s_ease-in-out_infinite]" transform="translate(196 40)" stroke="var(--color-primary-400)" stroke-width="3" stroke-linecap="round">
+    <g class="es-cf es-cf-a [transform-box:fill-box] origin-center" transform="translate(196 40)" stroke="var(--color-primary-400)" stroke-width="3" stroke-linecap="round">
       <line x1="-5" y1="0" x2="5" y2="0" /><line x1="0" y1="-5" x2="0" y2="5" />
     </g>
-    <g class="es-cf es-cf-b [transform-box:fill-box] origin-center [animation:es-cf_6.2s_ease-in-out_infinite] [animation-delay:-2.4s]" transform="translate(40 56)" stroke="var(--color-primary-300)" stroke-width="3" stroke-linecap="round">
+    <g class="es-cf es-cf-b [transform-box:fill-box] origin-center" transform="translate(40 56)" stroke="var(--color-primary-300)" stroke-width="3" stroke-linecap="round">
       <line x1="-4" y1="0" x2="4" y2="0" /><line x1="0" y1="-4" x2="0" y2="4" />
     </g>
 
@@ -68,7 +68,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </g>
 
     <!-- sparkle near the slot -->
-    <g class="es-spark [transform-box:fill-box] origin-center [animation:es-twinkle_2.6s_ease-in-out_infinite] [animation-delay:-0.6s]" transform="translate(190 92)">
+    <g class="es-spark [transform-box:fill-box] origin-center" transform="translate(190 92)">
       <path d="M0 -6 L1.4 -1.4 L6 0 L1.4 1.4 L0 6 L-1.4 1.4 L-6 0 L-1.4 -1.4 Z" fill="var(--color-primary-400)" />
     </g>
   </svg>
@@ -81,7 +81,13 @@ withDefaults(
 );
 </script>
 
-<style>
+<style scoped>
+/* keep(keyframes): SVG illustration animation. Scoped on purpose (W2.b): the
+   20 illustrations reused generic keyframe names (es-pulse, es-twinkle, …) with
+   DIFFERENT bodies from unscoped blocks — a global name collision where the
+   last-loaded illustration hijacked the others' animations. Vue rewrites scoped
+   keyframe names per component, which ends the collision. All selectors and the
+   es-static gate live in this file's own template. */
 @keyframes es-twinkle {
   0%,
   100% {
@@ -105,11 +111,34 @@ withDefaults(
   }
 }
 
-.es-static :where(.es-spark, .es-cf) {
+/* Animations MUST start from this block, not from a template arbitrary utility:
+   Vue's scoped compiler rewrites `@keyframes es-cf` -> `es-cf-<hash>` and rewrites
+   `animation:` in THIS block to match, but it cannot rewrite a class string in the
+   template — an `[animation:es-cf_5s_...]` utility there would reference a name
+   that no longer exists, silently killing the motion. */
+.es-cf-a {
+  animation: es-cf 5s ease-in-out infinite;
+}
+.es-cf-b {
+  animation: es-cf 6.2s ease-in-out infinite;
+  animation-delay: -2.4s;
+}
+.es-spark {
+  animation: es-twinkle 2.6s ease-in-out infinite;
+  animation-delay: -0.6s;
+}
+
+/* Gates must out-specify the rules above. `:where()` adds 0 specificity, so a
+   `:where(.es-spark, .es-cf)` gate would score only (0,1,0) from the scoped
+   attribute and LOSE to `.es-spark[data-v]` (0,2,0) — plain lists score (0,2,0)
+   / (0,3,0) and win. */
+.es-static .es-spark,
+.es-static .es-cf {
   animation: none;
 }
 @media (prefers-reduced-motion: reduce) {
-  :where(.es-spark, .es-cf) {
+  .es-spark,
+  .es-cf {
     animation: none;
   }
 }
diff --git a/web/src/lib/core/EmptyState/illustrations/EmptyBox.vue b/web/src/lib/core/EmptyState/illustrations/EmptyBox.vue
index 7f33a8939a..14c9dd8fa7 100644
--- a/web/src/lib/core/EmptyState/illustrations/EmptyBox.vue
+++ b/web/src/lib/core/EmptyState/illustrations/EmptyBox.vue
@@ -80,7 +80,13 @@ withDefaults(
 );
 </script>
 
-<style>
+<style scoped>
+/* keep(keyframes): SVG illustration animation. Scoped on purpose (W2.b): the
+   20 illustrations reused generic keyframe names (es-pulse, es-twinkle, …) with
+   DIFFERENT bodies from unscoped blocks — a global name collision where the
+   last-loaded illustration hijacked the others' animations. Vue rewrites scoped
+   keyframe names per component, which ends the collision. All selectors and the
+   es-static gate live in this file's own template. */
 .es-spark {
   transform-box: fill-box;
   transform-origin: center;
diff --git a/web/src/lib/core/EmptyState/illustrations/EmptyBrokenPanel.vue b/web/src/lib/core/EmptyState/illustrations/EmptyBrokenPanel.vue
index 049baaa5b0..cafecf2b1a 100644
--- a/web/src/lib/core/EmptyState/illustrations/EmptyBrokenPanel.vue
+++ b/web/src/lib/core/EmptyState/illustrations/EmptyBrokenPanel.vue
@@ -68,7 +68,13 @@ withDefaults(
 );
 </script>
 
-<style>
+<style scoped>
+/* keep(keyframes): SVG illustration animation. Scoped on purpose (W2.b): the
+   20 illustrations reused generic keyframe names (es-pulse, es-twinkle, …) with
+   DIFFERENT bodies from unscoped blocks — a global name collision where the
+   last-loaded illustration hijacked the others' animations. Vue rewrites scoped
+   keyframe names per component, which ends the collision. All selectors and the
+   es-static gate live in this file's own template. */
 .es-warn {
   transform-box: fill-box;
   transform-origin: center;
diff --git a/web/src/lib/core/EmptyState/illustrations/EmptyBrowserCheck.vue b/web/src/lib/core/EmptyState/illustrations/EmptyBrowserCheck.vue
index 2803b4fea7..42a1fbbd10 100644
--- a/web/src/lib/core/EmptyState/illustrations/EmptyBrowserCheck.vue
+++ b/web/src/lib/core/EmptyState/illustrations/EmptyBrowserCheck.vue
@@ -89,6 +89,8 @@ withDefaults(
 </script>
 
 <style scoped>
+/* keep(keyframes): single-consumer SVG animation choreography (offset-path
+   travel, stroke draw, staged opacity) — none of it expressible as utilities. */
 /* ── Path appears ─────────────────────────────────────────────────────────── */
 .es-path {
   animation: es-path-show 3.5s ease-in-out infinite;
diff --git a/web/src/lib/core/EmptyState/illustrations/EmptyBuilder.vue b/web/src/lib/core/EmptyState/illustrations/EmptyBuilder.vue
index e8db0923a8..274d1a2f85 100644
--- a/web/src/lib/core/EmptyState/illustrations/EmptyBuilder.vue
+++ b/web/src/lib/core/EmptyState/illustrations/EmptyBuilder.vue
@@ -88,16 +88,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <!-- presenting arm (gestures toward the board) -->
       <g class="es-present">
         <path d="M292 207 Q282 203 276 194 Q274 190 278 189 Q282 188 284 192 Q289 200 298 202 Z" fill="var(--color-primary-500)" />
-        <ellipse cx="278" cy="191" rx="4" ry="3.5" fill="#f0c29a" />
+        <ellipse cx="278" cy="191" rx="4" ry="3.5" fill="var(--color-illustration-sand)" />
       </g>
       <!-- head facing the board -->
       <g class="es-head">
-        <rect x="299" y="190" width="8" height="9" rx="3" fill="#e8b48c" />
-        <ellipse cx="302" cy="180" rx="11" ry="12" fill="#f0c29a" />
-        <circle cx="296" cy="181" r="2.2" fill="#e8b48c" />
-        <path d="M313 177 Q315 166 302 165 Q289 166 291 177 Q291 171 297 170 Q294 173 295 177 Q300 171 306 172 Q310 173 312 178 Q313 175 313 177 Z" fill="#5b4a3a" />
-        <circle cx="297" cy="180" r="1.4" fill="#3a2f25" />
-        <path d="M294 185 Q297 188 300 185" stroke="#b5764a" stroke-width="1.4" stroke-linecap="round" fill="none" />
+        <rect x="299" y="190" width="8" height="9" rx="3" fill="var(--color-illustration-tan)" />
+        <ellipse cx="302" cy="180" rx="11" ry="12" fill="var(--color-illustration-sand)" />
+        <circle cx="296" cy="181" r="2.2" fill="var(--color-illustration-tan)" />
+        <path d="M313 177 Q315 166 302 165 Q289 166 291 177 Q291 171 297 170 Q294 173 295 177 Q300 171 306 172 Q310 173 312 178 Q313 175 313 177 Z" fill="var(--color-illustration-umber)" />
+        <circle cx="297" cy="180" r="1.4" fill="var(--color-illustration-espresso)" />
+        <path d="M294 185 Q297 188 300 185" stroke="var(--color-illustration-clay)" stroke-width="1.4" stroke-linecap="round" fill="none" />
       </g>
     </g>
   </svg>
@@ -110,7 +110,13 @@ withDefaults(
 );
 </script>
 
-<style>
+<style scoped>
+/* keep(keyframes): SVG illustration animation. Scoped on purpose (W2.b): the
+   20 illustrations reused generic keyframe names (es-pulse, es-twinkle, …) with
+   DIFFERENT bodies from unscoped blocks — a global name collision where the
+   last-loaded illustration hijacked the others' animations. Vue rewrites scoped
+   keyframe names per component, which ends the collision. All selectors and the
+   es-static gate live in this file's own template. */
 .es-slot {
   transform-box: fill-box;
   transform-origin: center;
diff --git a/web/src/lib/core/EmptyState/illustrations/EmptyCheck.vue b/web/src/lib/core/EmptyState/illustrations/EmptyCheck.vue
index 73e0600033..a8a2beec6c 100644
--- a/web/src/lib/core/EmptyState/illustrations/EmptyCheck.vue
+++ b/web/src/lib/core/EmptyState/illustrations/EmptyCheck.vue
@@ -69,7 +69,13 @@ withDefaults(
 );
 </script>
 
-<style>
+<style scoped>
+/* keep(keyframes): SVG illustration animation. Scoped on purpose (W2.b): the
+   20 illustrations reused generic keyframe names (es-pulse, es-twinkle, …) with
+   DIFFERENT bodies from unscoped blocks — a global name collision where the
+   last-loaded illustration hijacked the others' animations. Vue rewrites scoped
+   keyframe names per component, which ends the collision. All selectors and the
+   es-static gate live in this file's own template. */
 .es-badge,
 .es-spark {
   transform-box: fill-box;
diff --git a/web/src/lib/core/EmptyState/illustrations/EmptyConnect.vue b/web/src/lib/core/EmptyState/illustrations/EmptyConnect.vue
index 98d58aca24..8135f2283e 100644
--- a/web/src/lib/core/EmptyState/illustrations/EmptyConnect.vue
+++ b/web/src/lib/core/EmptyState/illustrations/EmptyConnect.vue
@@ -66,7 +66,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </g>
     </g>
 
-    <!-- dashed flowchart connectors: right-angle routing with rounded elbows,
+    <!-- dashed flowchart connectors: right-angle routing with rounded-default elbows,
          merging onto the database like a real diagram, not diagonal lines -->
     <g stroke="var(--color-primary-300)" stroke-width="1.75" stroke-dasharray="4 5" stroke-linecap="round" fill="none">
       <path d="M52 46 L52 64 Q52 70 58 70 L98 70 Q104 70 104 76 L104 104" />
@@ -107,7 +107,13 @@ withDefaults(
 );
 </script>
 
-<style>
+<style scoped>
+/* keep(keyframes): SVG illustration animation. Scoped on purpose (W2.b): the
+   20 illustrations reused generic keyframe names (es-pulse, es-twinkle, …) with
+   DIFFERENT bodies from unscoped blocks — a global name collision where the
+   last-loaded illustration hijacked the others' animations. Vue rewrites scoped
+   keyframe names per component, which ends the collision. All selectors and the
+   es-static gate live in this file's own template. */
 /* packets — straight-line translate along each connector (per-line deltas) */
 .es-pk {
   transform-box: fill-box;
diff --git a/web/src/lib/core/EmptyState/illustrations/EmptyError.vue b/web/src/lib/core/EmptyState/illustrations/EmptyError.vue
index 8c4bf14a8f..2b47581309 100644
--- a/web/src/lib/core/EmptyState/illustrations/EmptyError.vue
+++ b/web/src/lib/core/EmptyState/illustrations/EmptyError.vue
@@ -73,11 +73,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
       <!-- bowed head, face hidden in hands -->
       <g class="es-head">
-        <ellipse cx="198" cy="184" rx="15" ry="15" fill="#f0c29a" transform="rotate(18 198 184)" />
-        <path d="M183 180 Q182 164 199 163 Q216 165 214 182 Q214 172 206 170 Q210 175 208 182 Q200 171 191 174 Q185 176 184 184 Z" fill="#5b4a3a" />
+        <ellipse cx="198" cy="184" rx="15" ry="15" fill="var(--color-illustration-sand)" transform="rotate(18 198 184)" />
+        <path d="M183 180 Q182 164 199 163 Q216 165 214 182 Q214 172 206 170 Q210 175 208 182 Q200 171 191 174 Q185 176 184 184 Z" fill="var(--color-illustration-umber)" />
         <!-- hands covering the face -->
-        <ellipse cx="190" cy="190" rx="5" ry="6" fill="#f0c29a" transform="rotate(20 190 190)" />
-        <ellipse cx="205" cy="188" rx="5" ry="6" fill="#e8b48c" transform="rotate(20 205 188)" />
+        <ellipse cx="190" cy="190" rx="5" ry="6" fill="var(--color-illustration-sand)" transform="rotate(20 190 190)" />
+        <ellipse cx="205" cy="188" rx="5" ry="6" fill="var(--color-illustration-tan)" transform="rotate(20 205 188)" />
       </g>
     </g>
   </svg>
@@ -90,7 +90,13 @@ withDefaults(
 );
 </script>
 
-<style>
+<style scoped>
+/* keep(keyframes): SVG illustration animation. Scoped on purpose (W2.b): the
+   20 illustrations reused generic keyframe names (es-pulse, es-twinkle, …) with
+   DIFFERENT bodies from unscoped blocks — a global name collision where the
+   last-loaded illustration hijacked the others' animations. Vue rewrites scoped
+   keyframe names per component, which ends the collision. All selectors and the
+   es-static gate live in this file's own template. */
 .es-warn,
 .es-frag {
   transform-box: fill-box;
diff --git a/web/src/lib/core/EmptyState/illustrations/EmptyExplorer.vue b/web/src/lib/core/EmptyState/illustrations/EmptyExplorer.vue
index f0a385d535..afe35f3583 100644
--- a/web/src/lib/core/EmptyState/illustrations/EmptyExplorer.vue
+++ b/web/src/lib/core/EmptyState/illustrations/EmptyExplorer.vue
@@ -44,8 +44,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     <!-- signpost -->
     <g>
-      <rect x="70" y="120" width="7" height="134" rx="2" fill="#8a6d4f" />
-      <rect x="70" y="120" width="3" height="134" fill="#7a5e43" />
+      <rect x="70" y="120" width="7" height="134" rx="2" fill="var(--color-illustration-bark)" />
+      <rect x="70" y="120" width="3" height="134" fill="var(--color-illustration-wood)" />
       <!-- left arrow -->
       <path d="M86 142 H44 L32 152 L44 162 H86 Z" fill="var(--color-primary-500)" />
       <rect x="80" y="146" width="14" height="3" rx="1.5" fill="var(--color-white)" opacity="0.55" />
@@ -84,22 +84,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <line x1="172" y1="199" x2="204" y2="199" stroke="var(--color-border-default)" stroke-width="1.5" />
       </g>
       <!-- tablet hand -->
-      <ellipse cx="183" cy="186" rx="5.5" ry="4.5" fill="#e8b48c" transform="rotate(-12 183 186)" />
+      <ellipse cx="183" cy="186" rx="5.5" ry="4.5" fill="var(--color-illustration-tan)" transform="rotate(-12 183 186)" />
 
       <!-- head (3/4 facing the bubble) — subtle "thinking" tilt -->
       <g class="es-head">
         <!-- neck -->
-        <rect x="192" y="132" width="12" height="14" rx="4" fill="#e8b48c" />
-        <ellipse cx="200" cy="114" rx="19" ry="21" fill="#f0c29a" />
+        <rect x="192" y="132" width="12" height="14" rx="4" fill="var(--color-illustration-tan)" />
+        <ellipse cx="200" cy="114" rx="19" ry="21" fill="var(--color-illustration-sand)" />
         <!-- ear -->
-        <circle cx="210" cy="116" r="3.5" fill="#e8b48c" />
+        <circle cx="210" cy="116" r="3.5" fill="var(--color-illustration-tan)" />
         <!-- hair -->
-        <path d="M182 110 Q179 90 200 88 Q221 89 219 110 Q219 100 210 98 Q214 104 213 110 Q205 100 195 102 Q188 103 185 112 Q183 108 182 110 Z" fill="#5b4a3a" />
-        <path d="M181 110 Q179 96 188 90 Q183 99 186 108 Z" fill="#4a3b2d" />
+        <path d="M182 110 Q179 90 200 88 Q221 89 219 110 Q219 100 210 98 Q214 104 213 110 Q205 100 195 102 Q188 103 185 112 Q183 108 182 110 Z" fill="var(--color-illustration-umber)" />
+        <path d="M181 110 Q179 96 188 90 Q183 99 186 108 Z" fill="var(--color-illustration-cocoa)" />
         <!-- face: brow (raised/puzzled), eye, mouth -->
-        <path d="M186 108 Q190 105 194 107" stroke="#4a3b2d" stroke-width="1.8" stroke-linecap="round" fill="none" />
-        <circle cx="190" cy="113" r="2" fill="#3a2f25" />
-        <path d="M187 124 Q191 126 195 123" stroke="#b5764a" stroke-width="1.8" stroke-linecap="round" fill="none" />
+        <path d="M186 108 Q190 105 194 107" stroke="var(--color-illustration-cocoa)" stroke-width="1.8" stroke-linecap="round" fill="none" />
+        <circle cx="190" cy="113" r="2" fill="var(--color-illustration-espresso)" />
+        <path d="M187 124 Q191 126 195 123" stroke="var(--color-illustration-clay)" stroke-width="1.8" stroke-linecap="round" fill="none" />
       </g>
 
       <!-- raised arm — actually scratches the head (rubs back and forth) -->
@@ -108,8 +108,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- sleeve shade -->
         <path d="M226 114 Q232 116 230 124 Q227 134 222 140 L219 132 Q224 124 222 116 Z" fill="var(--color-primary-600)" opacity="0.5" />
         <!-- scratching hand + fingers -->
-        <ellipse cx="224" cy="111" rx="6.5" ry="6" fill="#f0c29a" />
-        <path d="M219 108 Q221 104 223 108 M223 107 Q225 103 227 107 M227 108 Q229 105 230 109" stroke="#e8b48c" stroke-width="1.4" stroke-linecap="round" fill="none" />
+        <ellipse cx="224" cy="111" rx="6.5" ry="6" fill="var(--color-illustration-sand)" />
+        <path d="M219 108 Q221 104 223 108 M223 107 Q225 103 227 107 M227 108 Q229 105 230 109" stroke="var(--color-illustration-tan)" stroke-width="1.4" stroke-linecap="round" fill="none" />
       </g>
     </g>
 
@@ -129,7 +129,13 @@ withDefaults(
 );
 </script>
 
-<style>
+<style scoped>
+/* keep(keyframes): SVG illustration animation. Scoped on purpose (W2.b): the
+   20 illustrations reused generic keyframe names (es-pulse, es-twinkle, …) with
+   DIFFERENT bodies from unscoped blocks — a global name collision where the
+   last-loaded illustration hijacked the others' animations. Vue rewrites scoped
+   keyframe names per component, which ends the collision. All selectors and the
+   es-static gate live in this file's own template. */
 /* Subtle, looping motion. transform-box/origin keep scale + translate sane on
    SVG groups. All gated behind `animated` (es-static) and the OS reduce-motion
    preference. */
diff --git a/web/src/lib/core/EmptyState/illustrations/EmptyFunction.vue b/web/src/lib/core/EmptyState/illustrations/EmptyFunction.vue
index 8e7241d89a..664b9bc076 100644
--- a/web/src/lib/core/EmptyState/illustrations/EmptyFunction.vue
+++ b/web/src/lib/core/EmptyState/illustrations/EmptyFunction.vue
@@ -64,7 +64,13 @@ withDefaults(
 );
 </script>
 
-<style>
+<style scoped>
+/* keep(keyframes): SVG illustration animation. Scoped on purpose (W2.b): the
+   20 illustrations reused generic keyframe names (es-pulse, es-twinkle, …) with
+   DIFFERENT bodies from unscoped blocks — a global name collision where the
+   last-loaded illustration hijacked the others' animations. Vue rewrites scoped
+   keyframe names per component, which ends the collision. All selectors and the
+   es-static gate live in this file's own template. */
 .es-token {
   transform-box: view-box;
   animation: es-flow 2.8s ease-in-out infinite;
diff --git a/web/src/lib/core/EmptyState/illustrations/EmptyHistory.vue b/web/src/lib/core/EmptyState/illustrations/EmptyHistory.vue
index 147b52fe98..20c11f31b9 100644
--- a/web/src/lib/core/EmptyState/illustrations/EmptyHistory.vue
+++ b/web/src/lib/core/EmptyState/illustrations/EmptyHistory.vue
@@ -47,7 +47,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <line x1="120" y1="58" x2="120" y2="63" /><line x1="150" y1="88" x2="145" y2="88" /><line x1="120" y1="118" x2="120" y2="113" /><line x1="90" y1="88" x2="95" y2="88" />
     </g>
     <!-- hands -->
-    <line x1="120" y1="88" x2="120" y2="70" stroke="var(--color-text-primary)" stroke-width="3" stroke-linecap="round" opacity="0.75" />
+    <line x1="120" y1="88" x2="120" y2="70" stroke="var(--color-text-heading)" stroke-width="3" stroke-linecap="round" opacity="0.75" />
     <line class="es-hand" x1="120" y1="88" x2="138" y2="88" stroke="var(--color-primary-600)" stroke-width="2.5" stroke-linecap="round" />
     <circle cx="120" cy="88" r="3.5" fill="var(--color-primary-600)" />
   </svg>
@@ -60,7 +60,13 @@ withDefaults(
 );
 </script>
 
-<style>
+<style scoped>
+/* keep(keyframes): SVG illustration animation. Scoped on purpose (W2.b): the
+   20 illustrations reused generic keyframe names (es-pulse, es-twinkle, …) with
+   DIFFERENT bodies from unscoped blocks — a global name collision where the
+   last-loaded illustration hijacked the others' animations. Vue rewrites scoped
+   keyframe names per component, which ends the collision. All selectors and the
+   es-static gate live in this file's own template. */
 .es-hand {
   transform-box: view-box;
   transform-origin: 120px 88px;
diff --git a/web/src/lib/core/EmptyState/illustrations/EmptyHourglass.vue b/web/src/lib/core/EmptyState/illustrations/EmptyHourglass.vue
index 25ea62cc60..54f90b8384 100644
--- a/web/src/lib/core/EmptyState/illustrations/EmptyHourglass.vue
+++ b/web/src/lib/core/EmptyState/illustrations/EmptyHourglass.vue
@@ -56,9 +56,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <path d="M96 150 L144 150 L120 128 Z" fill="var(--color-warning-400)" />
 
     <!-- falling grains -->
-    <circle class="es-grain es-grain-a [transform-box:view-box] [animation:es-grain_1.5s_linear_infinite]" cx="120" cy="96" r="2.4" fill="var(--color-warning-500)" />
-    <circle class="es-grain es-grain-b [transform-box:view-box] [animation:es-grain_1.5s_linear_infinite] [animation-delay:-0.5s]" cx="120" cy="96" r="2" fill="var(--color-warning-500)" />
-    <circle class="es-grain es-grain-c [transform-box:view-box] [animation:es-grain_1.5s_linear_infinite] [animation-delay:-1s]" cx="120" cy="96" r="2.4" fill="var(--color-warning-600)" />
+    <circle class="es-grain es-grain-a [transform-box:view-box]" cx="120" cy="96" r="2.4" fill="var(--color-warning-500)" />
+    <circle class="es-grain es-grain-b [transform-box:view-box]" cx="120" cy="96" r="2" fill="var(--color-warning-500)" />
+    <circle class="es-grain es-grain-c [transform-box:view-box]" cx="120" cy="96" r="2.4" fill="var(--color-warning-600)" />
   </svg>
 </template>
 
@@ -69,7 +69,13 @@ withDefaults(
 );
 </script>
 
-<style>
+<style scoped>
+/* keep(keyframes): SVG illustration animation. Scoped on purpose: the
+   20 illustrations reused generic keyframe names (es-pulse, es-twinkle, …) with
+   DIFFERENT bodies from unscoped blocks — a global name collision where the
+   last-loaded illustration hijacked the others' animations. Vue rewrites scoped
+   keyframe names per component, which ends the collision. All selectors and the
+   es-static gate live in this file's own template. */
 @keyframes es-grain {
   0% {
     transform: translateY(0);
@@ -87,11 +93,30 @@ withDefaults(
   }
 }
 
-.es-static :where(.es-grain) {
+/* Animations MUST start from this block, not from a template arbitrary utility:
+   Vue's scoped compiler rewrites `@keyframes es-grain` -> `es-grain-<hash>` and
+   rewrites `animation:` in THIS block to match, but it cannot rewrite a class
+   string in the template — an `[animation:es-grain_1.5s_...]` utility there would
+   reference a name that no longer exists, silently killing the motion. */
+.es-grain {
+  animation: es-grain 1.5s linear infinite;
+}
+.es-grain-b {
+  animation-delay: -0.5s;
+}
+.es-grain-c {
+  animation-delay: -1s;
+}
+
+/* Gates must out-specify the rules above. `:where()` adds 0 specificity, so a
+   `:where(.es-grain)` gate would score only (0,1,0) from the scoped attribute and
+   LOSE to `.es-grain[data-v]` (0,2,0) — plain selectors score (0,2,0) / (0,3,0)
+   and win. */
+.es-static .es-grain {
   animation: none;
 }
 @media (prefers-reduced-motion: reduce) {
-  :where(.es-grain) {
+  .es-grain {
     animation: none;
   }
 }
diff --git a/web/src/lib/core/EmptyState/illustrations/EmptyLogs.vue b/web/src/lib/core/EmptyState/illustrations/EmptyLogs.vue
index 3262ac46cf..f409fa85c3 100644
--- a/web/src/lib/core/EmptyState/illustrations/EmptyLogs.vue
+++ b/web/src/lib/core/EmptyState/illustrations/EmptyLogs.vue
@@ -64,7 +64,13 @@ withDefaults(
 );
 </script>
 
-<style>
+<style scoped>
+/* keep(keyframes): SVG illustration animation. Scoped on purpose (W2.b): the
+   20 illustrations reused generic keyframe names (es-pulse, es-twinkle, …) with
+   DIFFERENT bodies from unscoped blocks — a global name collision where the
+   last-loaded illustration hijacked the others' animations. Vue rewrites scoped
+   keyframe names per component, which ends the collision. All selectors and the
+   es-static gate live in this file's own template. */
 .es-cursor {
   animation: es-blink 1.1s steps(1, end) infinite;
 }
diff --git a/web/src/lib/core/EmptyState/illustrations/EmptyPipeline.vue b/web/src/lib/core/EmptyState/illustrations/EmptyPipeline.vue
index 1cd09cdd93..b74808fe6c 100644
--- a/web/src/lib/core/EmptyState/illustrations/EmptyPipeline.vue
+++ b/web/src/lib/core/EmptyState/illustrations/EmptyPipeline.vue
@@ -70,7 +70,13 @@ withDefaults(
 );
 </script>
 
-<style>
+<style scoped>
+/* keep(keyframes): SVG illustration animation. Scoped on purpose (W2.b): the
+   20 illustrations reused generic keyframe names (es-pulse, es-twinkle, …) with
+   DIFFERENT bodies from unscoped blocks — a global name collision where the
+   last-loaded illustration hijacked the others' animations. Vue rewrites scoped
+   keyframe names per component, which ends the collision. All selectors and the
+   es-static gate live in this file's own template. */
 .es-packet {
   transform-box: view-box;
   animation: es-travel 3s ease-in-out infinite;
diff --git a/web/src/lib/core/EmptyState/illustrations/EmptyQuery.vue b/web/src/lib/core/EmptyState/illustrations/EmptyQuery.vue
index be03aa3723..11caf2b660 100644
--- a/web/src/lib/core/EmptyState/illustrations/EmptyQuery.vue
+++ b/web/src/lib/core/EmptyState/illustrations/EmptyQuery.vue
@@ -60,7 +60,13 @@ withDefaults(
 );
 </script>
 
-<style>
+<style scoped>
+/* keep(keyframes): SVG illustration animation. Scoped on purpose (W2.b): the
+   20 illustrations reused generic keyframe names (es-pulse, es-twinkle, …) with
+   DIFFERENT bodies from unscoped blocks — a global name collision where the
+   last-loaded illustration hijacked the others' animations. Vue rewrites scoped
+   keyframe names per component, which ends the collision. All selectors and the
+   es-static gate live in this file's own template. */
 .es-cursor {
   animation: es-blink 1.1s steps(1, end) infinite;
 }
diff --git a/web/src/lib/core/EmptyState/illustrations/EmptyReport.vue b/web/src/lib/core/EmptyState/illustrations/EmptyReport.vue
index 8a0f409b46..288e40438a 100644
--- a/web/src/lib/core/EmptyState/illustrations/EmptyReport.vue
+++ b/web/src/lib/core/EmptyState/illustrations/EmptyReport.vue
@@ -70,7 +70,13 @@ withDefaults(
 );
 </script>
 
-<style>
+<style scoped>
+/* keep(keyframes): SVG illustration animation. Scoped on purpose (W2.b): the
+   20 illustrations reused generic keyframe names (es-pulse, es-twinkle, …) with
+   DIFFERENT bodies from unscoped blocks — a global name collision where the
+   last-loaded illustration hijacked the others' animations. Vue rewrites scoped
+   keyframe names per component, which ends the collision. All selectors and the
+   es-static gate live in this file's own template. */
 .es-plane {
   transform-box: view-box;
   animation: es-fly 4s ease-in-out infinite;
diff --git a/web/src/lib/core/EmptyState/illustrations/EmptySchedule.vue b/web/src/lib/core/EmptyState/illustrations/EmptySchedule.vue
index 4483b97c1b..26f14f92af 100644
--- a/web/src/lib/core/EmptyState/illustrations/EmptySchedule.vue
+++ b/web/src/lib/core/EmptyState/illustrations/EmptySchedule.vue
@@ -57,7 +57,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <!-- clock badge (overlapping bottom-right corner) -->
     <circle cx="182" cy="128" r="22" fill="var(--color-surface-base)" stroke="var(--color-border-strong)" stroke-width="2.5" />
     <circle cx="182" cy="128" r="17.5" fill="var(--color-primary-500)" opacity="0.08" />
-    <line x1="182" y1="128" x2="182" y2="116" stroke="var(--color-text-primary)" stroke-width="2.5" stroke-linecap="round" opacity="0.75" />
+    <line x1="182" y1="128" x2="182" y2="116" stroke="var(--color-text-heading)" stroke-width="2.5" stroke-linecap="round" opacity="0.75" />
     <line class="es-hand" x1="182" y1="128" x2="192" y2="128" stroke="var(--color-primary-600)" stroke-width="2.25" stroke-linecap="round" />
     <circle cx="182" cy="128" r="2.75" fill="var(--color-primary-600)" />
   </svg>
@@ -70,7 +70,13 @@ withDefaults(
 );
 </script>
 
-<style>
+<style scoped>
+/* keep(keyframes): SVG illustration animation. Scoped on purpose (W2.b): the
+   20 illustrations reused generic keyframe names (es-pulse, es-twinkle, …) with
+   DIFFERENT bodies from unscoped blocks — a global name collision where the
+   last-loaded illustration hijacked the others' animations. Vue rewrites scoped
+   keyframe names per component, which ends the collision. All selectors and the
+   es-static gate live in this file's own template. */
 .es-hand {
   transform-box: view-box;
   transform-origin: 182px 128px;
diff --git a/web/src/lib/core/EmptyState/illustrations/EmptyServiceGraph.vue b/web/src/lib/core/EmptyState/illustrations/EmptyServiceGraph.vue
index 595ec6686d..decc060e7c 100644
--- a/web/src/lib/core/EmptyState/illustrations/EmptyServiceGraph.vue
+++ b/web/src/lib/core/EmptyState/illustrations/EmptyServiceGraph.vue
@@ -78,6 +78,17 @@ withDefaults(
 </script>
 
 <style scoped>
+/* keep(keyframes): SVG illustration animation. Scoped on purpose (W2.b): the
+   illustrations reuse generic keyframe names (es-pulse, es-twinkle, …) with
+   DIFFERENT bodies, so an unscoped block lets the last-loaded illustration
+   hijack the others' animations. Vue rewrites scoped keyframe names per
+   component, which ends the collision. All selectors and the es-static gate
+   live in this file's own template.
+   The px in these keyframes are SVG USER-SPACE units (viewBox), not layout px:
+   each translate lands the packet on a vertex of the connector path drawn in
+   the template. They must stay px — rem is font-relative, so it would decouple
+   the motion from the fixed-unit path geometry whenever the root font-size is
+   not the browser default. */
 .es-packet-top {
   transform-box: view-box;
   animation: es-packet-top 3s ease-in-out infinite;
diff --git a/web/src/lib/core/EmptyState/illustrations/EmptyServicesCatalog.vue b/web/src/lib/core/EmptyState/illustrations/EmptyServicesCatalog.vue
index 26d2cbf29c..d9b89ff72b 100644
--- a/web/src/lib/core/EmptyState/illustrations/EmptyServicesCatalog.vue
+++ b/web/src/lib/core/EmptyState/illustrations/EmptyServicesCatalog.vue
@@ -82,6 +82,12 @@ withDefaults(
 </script>
 
 <style scoped>
+/* keep(keyframes): SVG illustration animation. Scoped on purpose (W2.b): the
+   illustrations reuse generic keyframe names (es-pulse, es-twinkle, …) with
+   DIFFERENT bodies, so an unscoped block lets the last-loaded illustration
+   hijack the others' animations. Vue rewrites scoped keyframe names per
+   component, which ends the collision. All selectors and the es-static gate
+   live in this file's own template. */
 .es-dot {
   transform-box: fill-box;
   transform-origin: center;
diff --git a/web/src/lib/core/EmptyState/illustrations/EmptyStreamSelect.vue b/web/src/lib/core/EmptyState/illustrations/EmptyStreamSelect.vue
index d6e049634f..f3fb6a1c20 100644
--- a/web/src/lib/core/EmptyState/illustrations/EmptyStreamSelect.vue
+++ b/web/src/lib/core/EmptyState/illustrations/EmptyStreamSelect.vue
@@ -75,6 +75,12 @@ withDefaults(
 </script>
 
 <style scoped>
+/* keep(keyframes): SVG illustration animation. Scoped on purpose (W2.b): the
+   illustrations reuse generic keyframe names (es-pulse, es-twinkle, …) with
+   DIFFERENT bodies, so an unscoped block lets the last-loaded illustration
+   hijack the others' animations. Vue rewrites scoped keyframe names per
+   component, which ends the collision. All selectors and the es-static gate
+   live in this file's own template. */
 .es-dot {
   transform-box: fill-box;
   transform-origin: center;
diff --git a/web/src/lib/core/EmptyState/illustrations/EmptyTrace.vue b/web/src/lib/core/EmptyState/illustrations/EmptyTrace.vue
index f4c1efd884..2f201160d0 100644
--- a/web/src/lib/core/EmptyState/illustrations/EmptyTrace.vue
+++ b/web/src/lib/core/EmptyState/illustrations/EmptyTrace.vue
@@ -61,7 +61,13 @@ withDefaults(
 );
 </script>
 
-<style>
+<style scoped>
+/* keep(keyframes): SVG illustration animation. Scoped on purpose (W2.b): the
+   20 illustrations reused generic keyframe names (es-pulse, es-twinkle, …) with
+   DIFFERENT bodies from unscoped blocks — a global name collision where the
+   last-loaded illustration hijacked the others' animations. Vue rewrites scoped
+   keyframe names per component, which ends the collision. All selectors and the
+   es-static gate live in this file's own template. */
 .es-scan {
   transform-box: view-box;
   animation: es-scan 3.4s ease-in-out infinite;
diff --git a/web/src/lib/core/EmptyState/illustrations/EmptyWaiting.vue b/web/src/lib/core/EmptyState/illustrations/EmptyWaiting.vue
index 818dbfca56..aaba792bdb 100644
--- a/web/src/lib/core/EmptyState/illustrations/EmptyWaiting.vue
+++ b/web/src/lib/core/EmptyState/illustrations/EmptyWaiting.vue
@@ -53,14 +53,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <!-- collected sand (bottom pile) -->
       <path d="M110 208 L166 208 L138 182 Z" fill="var(--color-warning-400)" />
       <!-- falling grains -->
-      <circle class="es-grain es-grain-a" cx="138" cy="138" r="2.4" fill="var(--color-warning-500)" [transform-box:view-box] origin-center [animation:es-grain_1.6s_linear_infinite] />
-      <circle class="es-grain es-grain-b" cx="138" cy="138" r="2" fill="var(--color-warning-500)" [transform-box:view-box] origin-center [animation:es-grain_1.6s_linear_infinite] [animation-delay:-0.55s] />
-      <circle class="es-grain es-grain-c" cx="138" cy="138" r="2.4" fill="var(--color-warning-600)" [transform-box:view-box] origin-center [animation:es-grain_1.6s_linear_infinite] [animation-delay:-1.1s] />
+      <circle class="es-grain es-grain-a" cx="138" cy="138" r="2.4" fill="var(--color-warning-500)" />
+      <circle class="es-grain es-grain-b" cx="138" cy="138" r="2" fill="var(--color-warning-500)" />
+      <circle class="es-grain es-grain-c" cx="138" cy="138" r="2.4" fill="var(--color-warning-600)" />
     </g>
 
     <!-- SMALL person seated at the base, gazing up -->
     <ellipse cx="252" cy="248" rx="32" ry="6" fill="var(--color-primary-900)" opacity="0.1" />
-    <g class="es-sit" [transform-box:fill-box] origin-center [animation:es-breathe_4s_ease-in-out_infinite]>
+    <g class="es-sit">
       <!-- folded legs / lap -->
       <path d="M230 236 Q230 224 252 224 Q274 224 274 236 L274 242 Q274 246 268 246 L236 246 Q230 246 230 240 Z" fill="var(--color-grey-700)" />
       <ellipse cx="240" cy="232" rx="9" ry="7" fill="var(--color-grey-800)" />
@@ -68,13 +68,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <path d="M250 230 Q246 224 252 220 L266 216 Q272 215 274 221 L280 236 Q281 240 275 241 L258 240 Q251 240 250 234 Z" fill="var(--color-primary-500)" />
       <!-- arm: elbow on knee, hand to chin -->
       <path d="M254 226 Q246 222 244 212 Q243 207 248 208 Q252 209 253 214 Q254 220 260 222 Z" fill="var(--color-primary-600)" opacity="0.9" />
-      <ellipse cx="247" cy="210" rx="4" ry="3.5" fill="#f0c29a" />
+      <ellipse cx="247" cy="210" rx="4" ry="3.5" fill="var(--color-illustration-sand)" />
       <!-- head tilted up toward the hourglass -->
-      <g class="es-head" [transform-box:view-box] [transform-origin:250px_206px] [animation:es-gaze_5s_ease-in-out_infinite]>
-        <ellipse cx="250" cy="200" rx="11" ry="12" fill="#f0c29a" transform="rotate(-12 250 200)" />
-        <path d="M239 196 Q236 184 249 182 Q262 183 261 195 Q261 188 255 187 Q258 191 256 196 Q251 188 245 190 Q240 191 239 197 Z" fill="#5b4a3a" />
-        <circle cx="246" cy="198" r="1.5" fill="#3a2f25" />
-        <path d="M243 203 Q246 205 249 202" stroke="#b5764a" stroke-width="1.4" stroke-linecap="round" fill="none" />
+      <g class="es-head">
+        <ellipse cx="250" cy="200" rx="11" ry="12" fill="var(--color-illustration-sand)" transform="rotate(-12 250 200)" />
+        <path d="M239 196 Q236 184 249 182 Q262 183 261 195 Q261 188 255 187 Q258 191 256 196 Q251 188 245 190 Q240 191 239 197 Z" fill="var(--color-illustration-umber)" />
+        <circle cx="246" cy="198" r="1.5" fill="var(--color-illustration-espresso)" />
+        <path d="M243 203 Q246 205 249 202" stroke="var(--color-illustration-clay)" stroke-width="1.4" stroke-linecap="round" fill="none" />
       </g>
     </g>
   </svg>
@@ -87,7 +87,13 @@ withDefaults(
 );
 </script>
 
-<style>
+<style scoped>
+/* keep(keyframes): SVG illustration animation. Scoped on purpose (W2.b): the
+   20 illustrations reused generic keyframe names (es-pulse, es-twinkle, …) with
+   DIFFERENT bodies from unscoped blocks — a global name collision where the
+   last-loaded illustration hijacked the others' animations. Vue rewrites scoped
+   keyframe names per component, which ends the collision. All selectors and the
+   es-static gate live in this file's own template. */
 @keyframes es-grain {
   0% {
     transform: translateY(0);
@@ -123,11 +129,53 @@ withDefaults(
   }
 }
 
-.es-static :where(.es-grain, .es-sit, .es-head) {
+/* Animations MUST start from this block, not from a template arbitrary utility:
+   Vue's scoped compiler rewrites `@keyframes es-grain` -> `es-grain-<hash>` and
+   rewrites `animation:` in THIS block to match, but it cannot rewrite a class
+   string in the template — an `[animation:es-grain_1.6s_...]` utility there would
+   reference a name that no longer exists, silently killing the motion. The
+   transform-box / transform-origin declarations live here for the same reason:
+   in the template they sat OUTSIDE `class=""` as bare attributes, so they were
+   never classes at all and never applied. transform-box is load-bearing — it
+   picks the reference box these SVG transforms resolve against. */
+.es-grain {
+  transform-box: view-box;
+  transform-origin: center;
+  animation: es-grain 1.6s linear infinite;
+}
+.es-grain-b {
+  animation-delay: -0.55s;
+}
+.es-grain-c {
+  animation-delay: -1.1s;
+}
+.es-sit {
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: es-breathe 4s ease-in-out infinite;
+}
+.es-head {
+  transform-box: view-box;
+  /* The intended pivot is viewBox point (250 206). With transform-box: view-box the
+     reference box IS the viewBox (360x280), and percentages resolve against it, so
+     250/360 and 206/280 are that exact point expressed without a px unit. */
+  transform-origin: 69.4444% 73.5714%;
+  animation: es-gaze 5s ease-in-out infinite;
+}
+
+/* Gates must out-specify the rules above. `:where()` adds 0 specificity, so a
+   `:where(.es-grain, …)` gate would score only (0,1,0) from the scoped attribute
+   and LOSE to `.es-grain[data-v]` (0,2,0) — plain lists score (0,2,0) / (0,3,0)
+   and win. */
+.es-static .es-grain,
+.es-static .es-sit,
+.es-static .es-head {
   animation: none;
 }
 @media (prefers-reduced-motion: reduce) {
-  :where(.es-grain, .es-sit, .es-head) {
+  .es-grain,
+  .es-sit,
+  .es-head {
     animation: none;
   }
 }
diff --git a/web/src/lib/core/EmptyState/illustrations/index.ts b/web/src/lib/core/EmptyState/illustrations/index.ts
index 920e7ba73f..fb559cfb3c 100644
--- a/web/src/lib/core/EmptyState/illustrations/index.ts
+++ b/web/src/lib/core/EmptyState/illustrations/index.ts
@@ -81,7 +81,7 @@ export const illustrations = {
   "browser-check": EmptyBrowserCheck,
   // ---- character scenes (opt-in — use ONLY where a person adds value) ------
   explorer: EmptyExplorer,
-  // ---- earlier geometric experiments (kept for reference) ------------------
+  // ---- earlier geometric experiments ------------------
   constellation: EmptyConstellation,
   observatory: EmptyObservatory,
   "data-scene": EmptyDataScene,
diff --git a/web/src/lib/core/Icon/McpLogo.vue b/web/src/lib/core/Icon/McpLogo.vue
index 3fc2fb86fc..a1da80d6de 100644
--- a/web/src/lib/core/Icon/McpLogo.vue
+++ b/web/src/lib/core/Icon/McpLogo.vue
@@ -15,7 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <!--
-  Official Model Context Protocol brand mark — three interlocking rounded
+  Official Model Context Protocol brand mark — three interlocking curved
   strokes. Registered in OIcon.icons.ts as the "mcp" icon because brand logos
   are not part of Material Symbols. Strokes use currentColor so it inherits the
   theme text color exactly like every other OIcon (adapts to light/dark). Inline
diff --git a/web/src/lib/core/Icon/OIcon.icons.ts b/web/src/lib/core/Icon/OIcon.icons.ts
index b70e7d6ea5..0d10abc61d 100644
--- a/web/src/lib/core/Icon/OIcon.icons.ts
+++ b/web/src/lib/core/Icon/OIcon.icons.ts
@@ -168,14 +168,12 @@ import VerifiedUser from "~icons/material-symbols/verified-user-outline";
 import Webhook from "~icons/material-symbols/webhook";
 import MenuBook from "~icons/material-symbols/menu-book-outline";
 
-// Batch 3: Synthetics / browser-check icons (2026-06-22)
 import OpenInBrowser from "~icons/material-symbols/open-in-browser";
 import StackedLineChart from "~icons/material-symbols/stacked-line-chart";
 import Keyboard from "~icons/material-symbols/keyboard";
 import Checklist from "~icons/material-symbols/checklist";
 import PhotoCamera from "~icons/material-symbols/photo-camera-outline";
 
-// Batch 2: Additional icons from full codebase audit (2026-05-16)
 import AddCircleIcon from "~icons/material-symbols/add-circle-outline";
 import AdsClickIcon from "~icons/material-symbols/ads-click";
 import AnalyticsIcon from "~icons/material-symbols/analytics-outline";
@@ -187,9 +185,8 @@ import AssessmentIcon from "~icons/material-symbols/analytics-outline";
 import AssignmentIcon from "~icons/material-symbols/assignment-outline";
 import AttachFileIcon from "~icons/material-symbols/attach-file";
 import AttachMoneyIcon from "~icons/material-symbols/attach-money";
-// Material Symbols replacements for the old `material-symbols-outlined` icon set
-// (these specific icons don't ship an `-outline` variant in @iconify/material-symbols;
-// the base names render the outlined glyph by default)
+// These icons don't ship an `-outline` variant in @iconify/material-symbols;
+// the base names render the outlined glyph by default.
 import SoundSampler from "~icons/material-symbols/sound-sampler";
 import ClockLoader20 from "~icons/material-symbols/clock-loader-20";
 import DataInfoAlert from "~icons/material-symbols/data-info-alert";
diff --git a/web/src/lib/core/Icon/OIcon.vue b/web/src/lib/core/Icon/OIcon.vue
index 185add1ac1..179dcce664 100644
--- a/web/src/lib/core/Icon/OIcon.vue
+++ b/web/src/lib/core/Icon/OIcon.vue
@@ -53,7 +53,7 @@ const isDestructiveIcon = computed<boolean>(() =>
     :class="[
       sizeClasses[size],
       isDestructiveIcon
-        ? 'text-[var(--o2-destructive,#dc2626)] rounded transition-colors hover:bg-[var(--color-error-100,#fee2e2)]'
+        ? 'text-error-500 rounded-default transition-colors hover:bg-error-100'
         : '',
     ]"
     :data-destructive-icon="isDestructiveIcon ? 'true' : undefined"
diff --git a/web/src/lib/core/Navbar/ONavGroup.vue b/web/src/lib/core/Navbar/ONavGroup.vue
index 4ceaf52fa8..a9fce3881b 100644
--- a/web/src/lib/core/Navbar/ONavGroup.vue
+++ b/web/src/lib/core/Navbar/ONavGroup.vue
@@ -43,6 +43,7 @@ const openGroupKey = moduleRef<string | null>(null);
  */
 import { computed, nextTick, onBeforeUnmount, ref, watch } from "vue";
 import { useStore } from "vuex";
+import { useTheme } from "@/composables/useTheme";
 import { useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
@@ -72,9 +73,9 @@ const isLinkMode = computed(() => !!props.parentItem);
 // text stays legible on the dark surface.
 //
 // `!` is REQUIRED: the flyout items are <router-link> (<a>) and the app's global
-// `a { color: var(--o2-text-link) }` rule (app.scss, unlayered) otherwise wins
+// `a { color: var(--color-text-link) }` rule (app.scss, unlayered) otherwise wins
 // over the layered Tailwind color utility, tinting the link text/icon primary.
-const isDark = computed(() => store.state.theme === "dark");
+const { isDark } = useTheme();
 const flyoutTextClass = computed(() =>
   isDark.value ? "text-dropdown-item-text!" : "text-black!",
 );
@@ -403,14 +404,14 @@ function onChildMouseenter(event: MouseEvent) {
         :data-test="`nav-group-flyout-${groupKey}`"
         role="menu"
         :aria-label="title"
-        class="nav-group-flyout min-w-52 p-1 rounded-lg border border-dropdown-border bg-dropdown-bg shadow-md"
+        class="nav-group-flyout min-w-52 p-1 rounded-default border border-dropdown-border bg-dropdown-bg shadow-md"
         :style="flyoutStyle"
         @mouseenter="clearTimers"
         @mouseleave="scheduleClose"
         @keydown="onFlyoutKeydown"
       >
         <div
-          class="px-3 pt-1.5 pb-1 text-[11px] font-semibold"
+          class="px-3 pt-1.5 pb-1 text-2xs font-semibold"
           :class="flyoutTextClass"
         >
           {{ title }}
@@ -418,7 +419,7 @@ function onChildMouseenter(event: MouseEvent) {
         <template v-for="(row, rowIndex) in flyoutRows" :key="row.key">
           <div
             v-if="row.kind === 'header'"
-            class="px-3 pb-1 text-[10.5px] font-medium text-tabs-inactive-text"
+            class="px-3 pb-1 text-2xs font-medium text-tabs-inactive-text"
             :class="rowIndex === 0 ? 'pt-2' : 'pt-4'"
           >
             {{ row.label }}
@@ -428,7 +429,7 @@ function onChildMouseenter(event: MouseEvent) {
             :data-test="`nav-group-item-${row.child.name}`"
             role="menuitem"
             :to="childTo(row.child)"
-            class="nav-group-item flex items-center gap-2.5 px-3 py-1.5 rounded-md text-sm [text-decoration:none]! cursor-pointer select-none outline-none transition-colors duration-150 focus-visible:ring-2 focus-visible:ring-primary-500"
+            class="nav-group-item flex items-center gap-2.5 px-3 py-1.5 rounded-default text-sm [text-decoration:none]! cursor-pointer select-none outline-none transition-colors duration-150 focus-visible:ring-2 focus-visible:ring-primary-500"
             :class="[
               flyoutTextClass,
               isChildActive(row.child)
@@ -451,14 +452,19 @@ function onChildMouseenter(event: MouseEvent) {
 </template>
 
 <style scoped>
-/* Reveal animation for the flyout — a quick fade + slight slide from the rail. */
+/* keep(keyframes): reveal animation for the flyout — a quick fade + slight slide
+   from the rail. A @keyframes body cannot be expressed as a utility. The
+   `animation:` declaration is co-located here on purpose: Vue rewrites the
+   keyframe name and the animation shorthand together only when both live in the
+   same scoped block — moving either out (e.g. to a template `[animation:…]`
+   arbitrary value) would break the rename and the animation would not resolve. */
 .nav-group-flyout {
   animation: nav-group-flyout-in 140ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 @keyframes nav-group-flyout-in {
   from {
     opacity: 0;
-    transform: translateX(-4px);
+    transform: translateX(-0.25rem);
   }
   to {
     opacity: 1;
diff --git a/web/src/lib/core/Navbar/ONavbar.spec.ts b/web/src/lib/core/Navbar/ONavbar.spec.ts
index 421ddf5e29..7a698abf80 100644
--- a/web/src/lib/core/Navbar/ONavbar.spec.ts
+++ b/web/src/lib/core/Navbar/ONavbar.spec.ts
@@ -31,7 +31,7 @@ const mockLinks: NavItem[] = [
 
 const menuLinkStub = {
   template:
-    '<a class="q-item" :data-test="\'menu-link-\' + linkName + \'-item\'" @mouseenter="$emit(\'menu-hover\', link)"><slot /></a>',
+    '<a :data-test="\'menu-link-\' + linkName + \'-item\'" @mouseenter="$emit(\'menu-hover\', link)"><slot /></a>',
   props: ["linkName", "mini", "title", "icon", "link", "name", "exact", "display", "hide"],
   emits: ["menu-hover"],
   inheritAttrs: true,
diff --git a/web/src/lib/core/Navbar/ONavbar.types.ts b/web/src/lib/core/Navbar/ONavbar.types.ts
index 281f99dda1..9ab1132973 100644
--- a/web/src/lib/core/Navbar/ONavbar.types.ts
+++ b/web/src/lib/core/Navbar/ONavbar.types.ts
@@ -13,6 +13,8 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
+import type { ComputedRef, InjectionKey } from "vue";
+
 export interface NavItem {
   title: string;
   icon: string;
@@ -24,6 +26,18 @@ export interface NavItem {
   badge?: number;
 }
 
+/**
+ * Provided by ONavbar, injected by each MenuLink. True once the rail's single
+ * sliding-selection pill is positioned and visible — while true, an active
+ * MenuLink defers its fill (background + left accent) to that pill and keeps only
+ * its active text/icon colour. False (e.g. before first measure, or while the
+ * rail is hidden) means each active tile paints its own pill as before, so the
+ * nav never renders without a visible selection.
+ */
+export const RailIndicatorActiveKey: InjectionKey<ComputedRef<boolean>> = Symbol(
+  "o-navbar-rail-indicator-active",
+);
+
 /**
  * A flyout sub-item. These mirror the target page's own in-page section nav
  * EXACTLY — same label (i18n key), same icon, same category grouping — so the
diff --git a/web/src/lib/core/Navbar/ONavbar.vue b/web/src/lib/core/Navbar/ONavbar.vue
index 05272662ff..e8ae8c9bdf 100644
--- a/web/src/lib/core/Navbar/ONavbar.vue
+++ b/web/src/lib/core/Navbar/ONavbar.vue
@@ -22,7 +22,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     aria-label="Main navigation"
     data-test="navbar-main-nav"
     data-o2-navbar
-    class="left-drawer navbar-links o2-navbar-scroll flex flex-col bg-[var(--color-surface-chrome-deeper)] shrink-0 min-h-0 overflow-y-auto w-[5.5rem] pb-1"
+    class="left-drawer o2-navbar-scroll flex flex-col bg-surface-chrome-deeper shrink-0 min-h-0 overflow-y-auto w-[5.5rem] pb-1"
     @keydown="handleKeydown"
   >
     <!-- Three rail-entry shapes (see navGroups.ts):
@@ -32,7 +32,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
          - group:     a pure flyout group with no page of its own (click toggles);
                       supported here but not currently emitted by groupNavLinks.
          `pinBottom` groups float to the foot of the rail via the flex spacer. -->
-    <div class="flex flex-col flex-1 min-h-0 gap-y-1">
+    <div class="relative flex flex-col flex-1 min-h-0 gap-y-1">
+      <!-- Single sliding-selection pill: tracks the active rail tile and slides to
+           it on navigation. Active MenuLinks defer their fill to this (see
+           RailIndicatorActiveKey). Snaps (no slide) on mount/reflow/reveal. -->
+      <div
+        ref="indicatorRef"
+        aria-hidden="true"
+        :class="indicatorClass"
+        :style="indicatorStyle"
+      />
       <template
         v-for="entry in topEntries"
         :key="
@@ -85,14 +94,24 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
  * Left sidebar navigation bar. Renders a list of MenuLink items with keyboard
  * navigation (ArrowUp/ArrowDown) and Tab trapping.
  */
-import { computed } from "vue";
+import {
+  computed,
+  provide,
+  ref,
+  watch,
+  nextTick,
+  onMounted,
+  onBeforeUnmount,
+} from "vue";
 import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
 import type {
   NavbarProps,
   NavbarEmits,
   NavbarSlots,
   RailEntry,
 } from "./ONavbar.types";
+import { RailIndicatorActiveKey } from "./ONavbar.types";
 import { groupNavLinks } from "./navGroups";
 import MenuLink from "@/components/MenuLink.vue";
 import ONavGroup from "./ONavGroup.vue";
@@ -127,6 +146,95 @@ const bottomEntries = computed(
     ) as Extract<RailEntry, { type: "group" }>[],
 );
 
+// ── Sliding-selection pill ──────────────────────────────────────────────────
+// One indicator tracks the active rail tile (.nav-menu-item--active) and slides
+// to it when the route changes. Same approach as OToggleGroup: animate only real
+// selection changes; snap on mount, reflow and reveal; skip measuring while the
+// rail is hidden so a bogus 0-position is never stored.
+const router: any = useRouter();
+
+const indicatorRef = ref<HTMLElement | null>(null);
+const indicatorStyle = ref<Record<string, string>>({});
+const indicatorVisible = ref(false);
+const hasValidPosition = ref(false);
+const transitionOn = ref(false);
+
+let resizeObserver: ResizeObserver | null = null;
+
+const measure = (animated: boolean) => {
+  const indicator = indicatorRef.value;
+  const list = indicator?.parentElement;
+  if (!indicator || !list) return;
+
+  const active = list.querySelector<HTMLElement>(".nav-menu-item--active");
+  // Skip while hidden/unlaid-out (e.g. the rail is v-show'd off) — measuring here
+  // would store a 0-position and slide the pill in from the corner on reveal.
+  if (!active || active.offsetParent === null) {
+    indicatorVisible.value = false;
+    return;
+  }
+
+  const listRect = list.getBoundingClientRect();
+  const activeRect = active.getBoundingClientRect();
+  if (activeRect.height === 0) {
+    indicatorVisible.value = false;
+    return;
+  }
+
+  transitionOn.value = animated && hasValidPosition.value;
+  hasValidPosition.value = true;
+  indicatorVisible.value = true;
+  indicatorStyle.value = {
+    width: `${activeRect.width}px`,
+    height: `${activeRect.height}px`,
+    transform: `translate(${activeRect.left - listRect.left}px, ${activeRect.top - listRect.top}px)`,
+  };
+};
+
+// Slide to the newly-active tile when the route changes …
+watch(
+  () => router.currentRoute.value.fullPath,
+  async () => {
+    await nextTick();
+    measure(true);
+  },
+);
+
+onMounted(async () => {
+  await nextTick();
+  measure(false);
+  // … but snap (not slide) when tile sizes/visibility change — reflow, the rail
+  // being revealed, labels rewrapping — none of which are user selections.
+  const list = indicatorRef.value?.parentElement;
+  if (list && typeof ResizeObserver !== "undefined") {
+    resizeObserver = new ResizeObserver(() => measure(false));
+    resizeObserver.observe(list);
+  }
+});
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect();
+  resizeObserver = null;
+});
+
+// Theme-aware pill via `dark:` utilities (no JS theme branch, so ONavbar needs no
+// store): mirrors MenuLink's own active pill — white + primary accent in light;
+// tinted selected pill + lighter accent in dark, where a white pill would vanish
+// on the near-black rail.
+const indicatorClass = computed(() => [
+  "pointer-events-none absolute left-0 top-0 z-0 rounded-surface border-l-2",
+  "bg-surface-base border-primary-600 dark:bg-tabs-active-bg dark:border-primary-400",
+  transitionOn.value &&
+    "transition-[transform,width,height] duration-300 ease-out motion-reduce:transition-none",
+  indicatorVisible.value ? "opacity-100" : "opacity-0",
+]);
+
+// Tiles read this to know whether to defer their fill to the sliding pill.
+provide(
+  RailIndicatorActiveKey,
+  computed(() => indicatorVisible.value),
+);
+
 const NAV_KEYS = ["ArrowDown", "ArrowUp", "Tab"] as const;
 
 function handleKeydown(event: KeyboardEvent) {
@@ -182,17 +290,12 @@ function handleKeydown(event: KeyboardEvent) {
 }
 </script>
 
-<style>
-/* Thin overlay scrollbar: hidden at rest, revealed on hover, and — crucially —
-   it never reserves layout width, so there is no empty strip beside the labels.
-
-   A styled WebKit scrollbar is normally a classic, space-reserving bar (that is
-   what previously pushed the labels inward and clipped "Management"). The only
-   way a native scrollbar floats *over* content instead of reserving space is
-   `overflow: overlay`, which Blink/WebKit honor. Firefox doesn't support it, so
-   it falls back to `scrollbar-width: none` — a hidden bar that also reserves
-   nothing. Either way the rail keeps its full width and still scrolls via
-   wheel, trackpad, and the ArrowUp/ArrowDown keyboard handler above. */
+<style scoped>
+/* keep(scrollbar): thin overlay scrollbar — hidden at rest, revealed on hover,
+   and never reserves layout width (so no empty strip beside the labels).
+   `overflow: overlay` (Blink/WebKit) floats the bar over content; Firefox falls
+   back to `scrollbar-width: none`. WebKit scrollbar pseudo-elements and the
+   @supports/overlay behaviour can't be expressed as utilities. */
 .o2-navbar-scroll {
   scrollbar-width: none; /* Firefox: hidden, reserves nothing */
   -ms-overflow-style: none; /* legacy Edge/IE */
@@ -203,23 +306,18 @@ function handleKeydown(event: KeyboardEvent) {
   }
 }
 .o2-navbar-scroll::-webkit-scrollbar {
-  width: 6px;
+  width: 0.375rem;
 }
 .o2-navbar-scroll::-webkit-scrollbar-track {
   background: transparent;
 }
 .o2-navbar-scroll::-webkit-scrollbar-thumb {
   background-color: transparent;
-  border-radius: 9999px;
+  border-radius: var(--radius-full);
   transition: background-color 150ms ease;
 }
 /* Reveal the thumb only while the rail is hovered. */
 .o2-navbar-scroll:hover::-webkit-scrollbar-thumb {
-  background-color: var(--color-border-soft, rgba(148, 163, 184, 0.5));
-}
-
-/* Right border only in dark mode — light mode uses shadow on the content card */
-:global(.body--dark) .o2-navbar-scroll {
-  border-right: 1px solid var(--o2-border-color);
+  background-color: var(--color-scrollbar-thumb);
 }
 </style>
diff --git a/web/src/components/common/AppPageHeader.vue b/web/src/lib/core/PageHeader/OPageHeader.vue
similarity index 75%
rename from web/src/components/common/AppPageHeader.vue
rename to web/src/lib/core/PageHeader/OPageHeader.vue
index 73e8cdcbfa..db7dcc867e 100644
--- a/web/src/components/common/AppPageHeader.vue
+++ b/web/src/lib/core/PageHeader/OPageHeader.vue
@@ -15,50 +15,45 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <!--
-  AppPageHeader — the standard page header used across the app (dashboards,
+  OPageHeader — the standard page header used across the app (dashboards,
   pipelines, logs, …). The single header contract (the "TAS law"):
 
     ROW 1 (fixed h-14, never reflows): module icon tile + <h1> current-item
       title + right-aligned actions.
     ROW 2 (fixed h-5 band): EXACTLY ONE of —
       • Level 2 (list w/ peer sections): peer tabs (#tabs slot).
-      • Level 3+ (detail/deeper): ancestor breadcrumb (`breadcrumb` prop or
-        #subtitle slot) — the path back to the parent list.
       • true module index: a plain tagline (`subtitle` prop / #subtitle).
-    Tabs XOR breadcrumb XOR tagline — never two at once.
-
-  Breadcrumb: pass `:breadcrumb="[...]"` (BreadcrumbItem[]) for the common case;
-  it renders an AppBreadcrumb (depth-bounded, auto-collapsing) into the subtitle
-  band so detail views don't re-import it. The #subtitle slot is the escape
-  hatch (e.g. to append a spinner) and takes precedence over the prop.
+    Tabs XOR tagline — never both at once.
 
   Sub-navigation (CRUD add/edit, drill-down editors): pass
   `:back="{ label, to|onClick }"` (or the #back slot). On a sub-page the leading
   module-icon TILE is replaced by a Back button (a ‹ chevron in the same 8×8
   footprint) — so a listing page shows the module icon and its add/edit page
   shows a Back button in the exact same spot, with the title's X position
-  unchanged. The breadcrumb (chrome bar) still shows the full path.
+  unchanged.
 
   NOTE: title/heading font sizes use `!important` because the app defines
   global, *unlayered* h1/h2 rules (styles/app.scss) that otherwise beat
   Tailwind utilities (unlayered CSS wins over layered utilities in v4).
 
-  Props: title | titleDataTest | subtitle | icon | breadcrumb | breadcrumbMaxInline | back | tabsBelow
+  Props: title | titleDataTest | subtitle | icon | back | tabsBelow
   Slots: title-prefix | title | subtitle | actions | tabs | back
 -->
 <template>
   <!-- No overflow-hidden here: it clipped the focus ring of the right-most
        action button. Title overflow is handled by truncate + min-w-0 on the
        title block instead. h-14 gives the header a touch more breathing room. -->
+  <!-- The header ALWAYS owns its own bottom divider (border-b, inside its own
+       h-15 box so the header is exactly 60px whether it's used directly or via
+       OPageLayout). Never wrap it in a bordered div and never hand-draw a
+       border-b on a wrapper — that adds a second 1px line and makes the header
+       61px on some pages and 60px on others. -->
   <header
-    class="app-page-header shrink-0"
+    class="app-page-header shrink-0 px-page-edge border-b border-border-default"
     :class="[
       tabsBelow
         ? 'flex flex-col'
         : 'h-15 flex items-center justify-between gap-4',
-      // The header owns its bottom divider whenever it carries tabs, so the tab
-      // underline always lands on it — consumers never hand-draw a border-b.
-      { 'border-b border-border-default': hasTabs && tabsBelow },
     ]"
   >
     <!-- Row 1. In two-row mode this is its own flex row; otherwise it collapses
@@ -80,7 +75,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <slot name="back">
           <button
             type="button"
-            class="inline-flex items-center justify-center shrink-0 w-9.5 h-9.5 rounded-[0.625rem] bg-surface-subtle text-text-primary transition-colors hover:bg-button-ghost-hover-bg outline-none focus-visible:ring-4 focus-visible:ring-primary-500/25 focus-visible:ring-inset"
+            class="inline-flex items-center justify-center shrink-0 w-9.5 h-9.5 rounded-default bg-surface-subtle text-text-body transition-colors hover:bg-button-ghost-hover-bg outline-none focus-visible:ring-4 focus-visible:ring-primary-500/25 focus-visible:ring-inset"
             :title="backLabel"
             :aria-label="backLabel"
             :data-test="props.back?.dataTest ?? 'app-page-header-back'"
@@ -94,7 +89,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <!-- Listing/index page: the module icon tile. -->
       <span
         v-else-if="icon"
-        class="inline-flex items-center justify-center shrink-0 w-9.5 h-9.5 rounded-[0.625rem] bg-tabs-active-bg text-tabs-active-text"
+        class="inline-flex items-center justify-center shrink-0 w-9.5 h-9.5 rounded-default bg-tabs-active-bg text-tabs-active-text"
         aria-hidden="true"
       >
         <OIcon :name="icon" size="md" />
@@ -102,32 +97,26 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
       <div class="flex flex-col justify-center min-w-0 shrink-0">
         <h1
-          class="text-[1.0625rem]! font-semibold! leading-[1.45]! tracking-[-0.02em]! text-text-primary truncate min-h-6"
+          class="text-base! font-semibold! leading-[1.45]! tracking-[-0.02em]! text-text-heading truncate min-h-6"
           :title="title"
           :data-test="titleDataTest"
         >
           <slot name="title">{{ title }}</slot>
         </h1>
         <!-- Fixed-height subtitle band: keeps the <h1> at an identical Y whether
-             the subtitle is plain text (listing) or a taller breadcrumb nav
-             (detail view), so the title doesn't appear to shift when navigating
-             between the two. Content is vertically centered within the band. -->
+             the subtitle is present or not, so the title doesn't appear to shift
+             when navigating between views. Content is vertically centered. -->
         <OText
           v-if="hasSubtitle"
           variant="meta"
           as="div"
-          class="flex items-center h-5 min-w-0"
+          class="flex items-center h-5 min-w-0 -mt-0.5"
         >
           <slot name="subtitle">
-            <AppBreadcrumb
-              v-if="hasBreadcrumb"
-              :items="breadcrumb!"
-              :max-inline="breadcrumbMaxInline"
-            />
             <!-- leading-normal (not the meta variant's leading-none): truncate
                  sets overflow:hidden, and a 1em line box clips descenders
                  (g/y/p). The h-5 band + items-center leaves room for it. -->
-            <span v-else class="truncate min-w-0 leading-normal">{{ subtitle }}</span>
+            <span class="truncate min-w-0 leading-normal">{{ subtitle }}</span>
           </slot>
         </OText>
       </div>
@@ -172,9 +161,6 @@ import { useRouter } from "vue-router";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import OText from "@/lib/core/Typography/OText.vue";
 import type { IconName } from "@/lib/core/Icon/OIcon.icons";
-import AppBreadcrumb, {
-  type BreadcrumbItem,
-} from "@/components/common/AppBreadcrumb.vue";
 
 interface BackTarget {
   label: string;
@@ -191,10 +177,6 @@ const props = withDefaults(
     titleDataTest?: string;
     subtitle?: string;
     icon?: IconName;
-    /** Level-3+ ancestor path; renders an AppBreadcrumb into the subtitle band. */
-    breadcrumb?: BreadcrumbItem[];
-    /** Forwarded to AppBreadcrumb — inline crumbs before middles collapse. */
-    breadcrumbMaxInline?: number;
     /** Overlay/dialog back-pill ("‹ {label}") shown leading, before the icon. */
     back?: BackTarget;
     /** Render the #tabs slot as a full-width strip below row 1 (prototype's
@@ -225,14 +207,8 @@ const slotHasContent = (name: string): boolean => {
   });
 };
 
-const hasBreadcrumb = computed(
-  () => Array.isArray(props.breadcrumb) && props.breadcrumb.length > 0,
-);
 const hasSubtitle = computed(
-  () =>
-    Boolean(props.subtitle) ||
-    hasBreadcrumb.value ||
-    slotHasContent("subtitle"),
+  () => Boolean(props.subtitle) || slotHasContent("subtitle"),
 );
 const hasTabs = computed(() => slotHasContent("tabs"));
 const hasActions = computed(() => slotHasContent("actions"));
diff --git a/web/src/lib/core/PageLayout/OPageLayout.vue b/web/src/lib/core/PageLayout/OPageLayout.vue
new file mode 100644
index 0000000000..c8b5d7fa45
--- /dev/null
+++ b/web/src/lib/core/PageLayout/OPageLayout.vue
@@ -0,0 +1,257 @@
+<!-- Copyright 2026 OpenObserve Inc.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<!--
+  OPageLayout — THE single page-structure component. Every routed view is an
+  OPageLayout: it owns the full-height column, the header, an optional left rail,
+  an optional sub-nav strip, and the body's inset. You plug in data (title,
+  actions, tabs, sidebar, body); there is no place to hand-roll a padded <div>,
+  so no screen can drift off the grid.
+
+  Header — from props (the normal case):
+    :title :subtitle :icon :back :titleDataTest
+    #actions      — right-aligned header actions (O2 buttons)
+    #header-tabs  — inline module tabs in the header row (Level-2 nav)
+    #title        — custom title node (when a string title isn't enough)
+    #header       — ESCAPE HATCH: a fully custom header the props can't express.
+                    Prefer the props; reach for this only when you must.
+
+  Sub-nav — a full-width tab/toolbar strip under the header:
+    #subnav       — put an <OTabs> or a filter bar here. It self-aligns to the
+                    page-edge grid and gets a full-bleed bottom divider.
+
+  Left rail — optional:
+    #sidebar      — FolderList / SectionRail. `sidebarWidth` (px) for a fixed
+                    rail, or `resizable` for a drag-resizable OSplitter.
+
+  Body — the default slot. Inset to the ONE `--spacing-page-edge` grid line by
+  default (so it lines up with the header, tabs and rails). Escape hatches:
+    bleed         — full-bleed body: a table/chart/canvas/router-view that owns
+                    its own edge inset (an OTable self-insets its first column).
+    constrained   — center the body in a max-width reading column (forms/settings);
+                    `contentSize` = 'sm'|'md'|'lg'|'xl'.
+    padY          — also apply the standard vertical inset.
+    scroll        — the WHOLE body scrolls (overflow-auto). Default OFF: the body
+                    is a fixed `flex flex-col` column so inner content (a table,
+                    a dashboard) scrolls internally at full height. Turn on only
+                    for a page whose entire body should scroll (a long form).
+
+  v-model:sidebarWidth — bidirectional bind for the rail width (resizable mode).
+-->
+<template>
+  <div class="flex flex-col h-full">
+    <!-- ── Header (props → OPageHeader, or #header escape hatch) ── -->
+    <!-- Just a shrink-0 slot: OPageHeader draws its OWN border-b (so the header
+         is a consistent 60px). Don't add a border here — it would double the
+         divider and add 1px. -->
+    <div
+      v-if="hasHeader"
+      :class="headerClass ?? 'shrink-0'"
+    >
+      <slot name="header">
+        <OPageHeader
+          :title="title"
+          :subtitle="subtitle"
+          :icon="icon"
+          :back="back"
+          :title-data-test="titleDataTest"
+          :tabs-below="tabsBelow"
+        >
+          <template v-if="!!slots.title" #title><slot name="title" /></template>
+          <template v-if="!!slots['title-prefix']" #title-prefix><slot name="title-prefix" /></template>
+          <template v-if="!!slots['title-trail']" #title-trail><slot name="title-trail" /></template>
+          <template v-if="!!slots.subtitle" #subtitle><slot name="subtitle" /></template>
+          <template v-if="!!slots.actions" #actions><slot name="actions" /></template>
+          <template v-if="!!slots['header-tabs']" #tabs><slot name="header-tabs" /></template>
+        </OPageHeader>
+      </slot>
+    </div>
+
+    <!-- ── Sub-nav strip (tab/toolbar) under the header ──────────── -->
+    <div v-if="!!slots.subnav" class="shrink-0 border-b border-border-default">
+      <slot name="subnav" />
+    </div>
+
+    <!-- ── Body: resizable sidebar + main (OSplitter) ───────────── -->
+    <OSplitter
+      v-if="!!slots.sidebar && resizable"
+      v-model="internalWidth"
+      unit="px"
+      :limits="splitterLimits"
+      :horizontal="false"
+      class="flex-1 min-h-0 overflow-hidden"
+    >
+      <template #before>
+        <div
+          v-if="sidebarVisible"
+          class="w-full h-full flex flex-col overflow-hidden border-r border-border-default"
+        >
+          <slot name="sidebar" />
+        </div>
+      </template>
+      <template #separator>
+        <slot name="separator">
+          <div
+            class="w-1 h-full bg-transparent transition-colors duration-300 hover:bg-[var(--color-orange-500)]"
+          ></div>
+        </slot>
+      </template>
+      <template #after>
+        <OContent
+          :bleed="bleed"
+          :y="padY"
+          class="w-full h-full flex flex-col overflow-hidden"
+        >
+          <slot />
+        </OContent>
+      </template>
+    </OSplitter>
+
+    <!-- ── Body: fixed-width sidebar + main ─────────────────────── -->
+    <div
+      v-else-if="!!slots.sidebar"
+      class="flex-1 flex min-h-0"
+    >
+      <aside
+        class="shrink-0 h-full flex flex-col overflow-hidden border-r border-border-default"
+        :style="{ width: (sidebarWidth ?? 200) + 'px' }"
+      >
+        <slot name="sidebar" />
+      </aside>
+      <OContent
+        as="section"
+        :bleed="bleed"
+        :y="padY"
+        class="flex-1 min-w-0 h-full overflow-hidden"
+      >
+        <slot />
+      </OContent>
+    </div>
+
+    <!-- ── Body: constrained reading column (no sidebar) ────────── -->
+    <ConstrainedPage
+      v-else-if="constrained"
+      :size="contentSize"
+      class="flex-1 min-h-0"
+    >
+      <slot />
+    </ConstrainedPage>
+
+    <!-- ── Body: main only (no sidebar) ─────────────────────────── -->
+    <OContent
+      v-else
+      :bleed="bleed"
+      :y="padY"
+      :class="scroll ? 'flex-1 min-h-0 overflow-auto' : 'flex-1 min-h-0 flex flex-col overflow-hidden'"
+    >
+      <slot />
+    </OContent>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, useSlots } from "vue";
+import OSplitter from "@/lib/core/Splitter/OSplitter.vue";
+import ConstrainedPage from "@/components/common/ConstrainedPage.vue";
+import OPageHeader from "@/lib/core/PageHeader/OPageHeader.vue";
+import OContent from "@/lib/core/Content/OContent.vue";
+import type { IconName } from "@/lib/core/Icon/OIcon.icons";
+
+interface BackTarget {
+  label: string;
+  to?: import("vue-router").RouteLocationRaw;
+  onClick?: () => void;
+  dataTest?: string;
+}
+
+const props = withDefaults(
+  defineProps<{
+    // Header (from props)
+    title?: string;
+    subtitle?: string;
+    icon?: IconName;
+    back?: BackTarget;
+    titleDataTest?: string;
+    /** Render #header-tabs on a second row below the title (Level-2 module nav). */
+    tabsBelow?: boolean;
+    // Body
+    bleed?: boolean;
+    padY?: boolean;
+    /** Whole-body scroll (overflow-auto). Default off → fixed flex column so
+     *  inner content (table/dashboard) scrolls internally at full height. */
+    scroll?: boolean;
+    // Sidebar
+    sidebarWidth?: number;
+    resizable?: boolean;
+    splitterLimits?: [number, number];
+    // Reading-column mode
+    constrained?: boolean;
+    contentSize?: "sm" | "md" | "lg" | "xl";
+    // Header wrapper override (rare)
+    headerClass?: string;
+  }>(),
+  {
+    tabsBelow: false,
+    bleed: false,
+    padY: false,
+    scroll: false,
+    sidebarWidth: 200,
+    resizable: false,
+    splitterLimits: () => [0, 400] as [number, number],
+    constrained: false,
+    contentSize: "lg",
+    headerClass: undefined,
+  },
+);
+
+const emit = defineEmits<{
+  "update:sidebarWidth": [value: number];
+}>();
+
+const slots = useSlots();
+
+const hasHeader = computed(
+  () =>
+    !!props.title ||
+    !!props.subtitle ||
+    !!props.icon ||
+    !!props.back ||
+    !!slots.header ||
+    !!slots.title ||
+    !!slots.subtitle ||
+    !!slots.actions ||
+    !!slots["header-tabs"],
+);
+
+const internalWidth = ref(props.sidebarWidth);
+
+const sidebarVisible = computed(() => internalWidth.value > 0);
+
+// Sync from parent when using v-model:sidebarWidth
+watch(
+  () => props.sidebarWidth,
+  (val) => {
+    if (val !== undefined && val !== internalWidth.value) {
+      internalWidth.value = val;
+    }
+  },
+);
+
+// Emit to parent on every width change (enables v-model:sidebarWidth)
+watch(internalWidth, (val) => {
+  emit("update:sidebarWidth", val);
+});
+</script>
diff --git a/web/src/lib/core/Shortcut/OShortcut.vue b/web/src/lib/core/Shortcut/OShortcut.vue
index e85abee0cb..5311b76c3e 100644
--- a/web/src/lib/core/Shortcut/OShortcut.vue
+++ b/web/src/lib/core/Shortcut/OShortcut.vue
@@ -74,7 +74,7 @@ const caps = computed<string[]>(() => {
 });
 
 const sizeClasses: Record<NonNullable<ShortcutProps["size"]>, string> = {
-  sm: "h-5 min-w-5 px-1.5 text-[11px]",
+  sm: "h-5 min-w-5 px-1.5 text-2xs",
   md: "h-6 min-w-6 px-1.5 text-xs",
 };
 </script>
@@ -89,8 +89,8 @@ const sizeClasses: Record<NonNullable<ShortcutProps["size"]>, string> = {
       :key="i"
       :class="[
         'inline-flex items-center justify-center',
-        'rounded border border-kbd-border bg-kbd-bg text-kbd-text',
-        'font-medium leading-none whitespace-nowrap shadow-xs',
+        'rounded-default border border-kbd-border bg-kbd-bg text-kbd-text',
+        'font-medium leading-none whitespace-nowrap shadow-md',
         sizeClasses[size],
       ]"
       >{{ cap }}</kbd
diff --git a/web/src/lib/core/Splitter/OSplitter.vue b/web/src/lib/core/Splitter/OSplitter.vue
index 4cf1f2e1c0..d501b0fb63 100644
--- a/web/src/lib/core/Splitter/OSplitter.vue
+++ b/web/src/lib/core/Splitter/OSplitter.vue
@@ -31,8 +31,8 @@
         'select-none',
         'relative',
         'z-10',
-        'focus:outline-2 focus:outline-(--o2-primary-color) focus:-outline-offset-2',
-        disable ? 'cursor-default! opacity-50' : '',
+        'focus:outline-2 focus:outline-accent focus:-outline-offset-2',
+        disable ? 'cursor-default! opacity-50 pointer-events-none' : '',
         horizontal ? 'h-px w-full cursor-row-resize' : 'h-full cursor-col-resize',
         separatorClass
       ]"
@@ -167,3 +167,28 @@ watch(() => props.modelValue, (newValue) => {
   currentValue.value = newValue
 }, { immediate: true })
 </script>
+
+<style scoped>
+/* keep(complex-state): `.field-list-separator` is a public modifier on
+   this component's separator element — it can ONLY arrive through the
+   `separatorClass` prop (plugins/logs/Index.vue and
+   dashboards/PanelEditor/PanelEditor.vue x2 pass it), so no consumer's scope can
+   reach the element and the hover affordance has to be declared here. The ::after
+   pseudo-element has no markup of its own to carry utilities. Migrated from
+   styles/utilities.css (W2.b). */
+.field-list-separator::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0.125rem;
+  background-color: transparent;
+  transition: background-color 0.3s;
+}
+
+.field-list-separator:hover::after {
+  background-color: var(--color-accent);
+}
+</style>
diff --git a/web/src/lib/core/Table/OTable.flexwidth.spec.ts b/web/src/lib/core/Table/OTable.flexwidth.spec.ts
index de644da4af..c1e7aaee9f 100644
--- a/web/src/lib/core/Table/OTable.flexwidth.spec.ts
+++ b/web/src/lib/core/Table/OTable.flexwidth.spec.ts
@@ -69,27 +69,29 @@ describe("OTable flex column width", () => {
     expect(tableWidth(wrapper)).toBe(-1);
 
     // Resize freezes the flex column at its current fill width. With no layout,
-    // the arithmetic fallback = container − nonFlex (1000 − 272) = 728 is pinned
-    // into columnSizing. Then widen Type to 400 (TanStack preserves name).
+    // the arithmetic fallback = container − nonFlex (1000 − 284) = 716 is pinned
+    // into columnSizing. nonFlex = #(56) + type(100) + actions(84) + checkbox(44).
+    // Then widen Type to 400 (TanStack preserves name).
     st.freezeFlexColumns();
     st.columnSizing = { ...st.columnSizing, type: 400 };
     await flushPromises();
 
-    // Now explicit width: Name HOLDS at 728, table grows to 1300 (scroll),
-    // # stays 44, and w-full is dropped.
+    // Now explicit width: Name HOLDS at 716, table grows to 1300 (scroll)
+    // (56 + 716 + 400 + 84 + 44 = 1300), # stays 56, and w-full is dropped.
     expect(isWFull(wrapper)).toBe(false);
-    expect(colVar(wrapper, "name")).toBe(728);
+    expect(colVar(wrapper, "name")).toBe(716);
     expect(tableWidth(wrapper)).toBe(1300);
-    expect(colVar(wrapper, "#")).toBe(44);
+    expect(colVar(wrapper, "#")).toBe(56);
 
     // DECREASE Type to 50 (below its original 100). Name must NOT grow to
-    // absorb the freed space — it stays frozen at 728. Real columns sum to 950
-    // (< container) so the invisible spacer absorbs the 50px (its var) and the
-    // table stays at the container width (1000) → actions flush-right.
+    // absorb the freed space — it stays frozen at 716. Real columns sum to 950
+    // (56 + 716 + 50 + 84 + 44 = 950 < container) so the invisible spacer absorbs
+    // the 50px (its var) and the table stays at the container width (1000) →
+    // actions flush-right.
     st.columnSizing = { ...st.columnSizing, type: 50 };
     await flushPromises();
-    expect(colVar(wrapper, "name")).toBe(728);
-    expect(colVar(wrapper, "#")).toBe(44);
+    expect(colVar(wrapper, "name")).toBe(716);
+    expect(colVar(wrapper, "#")).toBe(56);
     expect(colVar(wrapper, "__spacer__")).toBe(50);
     expect(tableWidth(wrapper)).toBe(1000);
 
@@ -115,9 +117,9 @@ describe("OTable flex column width", () => {
     (wrapper.vm.$ as any).setupState.containerWidth = 1000;
     await flushPromises();
 
-    // The flex (name) column fills explicitly (container 1000 − nonFlex 272).
+    // The flex (name) column fills explicitly (container 1000 − nonFlex 284).
     expect(thHasExplicitWidth(wrapper, "name")).toBe(true);
-    expect(headerVar(wrapper, "name")).toBe(728);
+    expect(headerVar(wrapper, "name")).toBe(716);
     // The invisible spacer must be 0 in the fill state — no trailing gap.
     expect(headerVar(wrapper, "--spacer--")).toBe(0);
   });
diff --git a/web/src/lib/core/Table/OTable.spec.ts b/web/src/lib/core/Table/OTable.spec.ts
index 9daca9fc6c..2bd076dad3 100644
--- a/web/src/lib/core/Table/OTable.spec.ts
+++ b/web/src/lib/core/Table/OTable.spec.ts
@@ -862,7 +862,7 @@ describe("OTable", () => {
     it("applies custom cell styles via getCellStyle callback", () => {
       const getCellStyle = vi.fn(({ columnId, value }) => {
         if (columnId === "status" && value === "Active") {
-          return { backgroundColor: "var(--color-success-bg)" };
+          return { backgroundColor: "var(--color-status-success-bg)" };
         }
         return {};
       });
diff --git a/web/src/lib/core/Table/OTable.types.ts b/web/src/lib/core/Table/OTable.types.ts
index 99e5657297..a361fd7755 100644
--- a/web/src/lib/core/Table/OTable.types.ts
+++ b/web/src/lib/core/Table/OTable.types.ts
@@ -5,17 +5,20 @@ import type { ColumnDef, Row, Table } from "@tanstack/vue-table";
 
 // ─── Shared column size constants ────────────────────────────────
 /**
- * Fixed width (px) of the auto-rendered selection-checkbox column. Includes the
- * left padding (TABLE_CHECKBOX_COL_PAD_LEFT) that insets the box from the table
- * edge. Imported by OTableHeader/OTableBodyRow so the three stay in sync.
+ * Fixed width (px) of the auto-rendered selection-checkbox column. Imported by
+ * OTableHeader/OTableBodyRow/OTableLoading so the three stay in sync. The box's
+ * left inset is the shared `--spacing-table-edge` token (applied in inline
+ * style), the same edge line the first data column and toolbar search bar use.
  */
-export const TABLE_CHECKBOX_COL_PAD_LEFT = 18;
 export const TABLE_CHECKBOX_COL_SIZE = 44;
 /**
- * Fixed width (px) of the row-index ("#") column. Wide enough to fit a
- * zero-padded 3-digit number at text-xs plus the cell's horizontal padding.
+ * Fixed width (px) of the row-index ("#") column. Fits a 4-digit number at
+ * text-xs after the `--spacing-table-edge` left inset (14px) + right padding.
+ * Paired with `tabular-nums` on the cell so every digit is the same advance
+ * width — otherwise a proportional font makes wide-glyph values (209, 200) clip
+ * to "2…" while narrow ones (215) fit, at the same column width.
  */
-export const TABLE_INDEX_COL_SIZE = 44;
+export const TABLE_INDEX_COL_SIZE = 56;
 
 export const COL = {
   name:         200,
@@ -70,10 +73,10 @@ export interface OTableColumnMeta {
   /** Additional class applied to the <td> */
   cellClass?: string;
   /**
-   * Mark this as the primary "name" column. Per the design system (HANDOFF §8.2)
-   * the record-name column renders at weight 500 — enough to separate it from
-   * metadata columns (which stay 400 / --text-3) without the "wall of bold".
-   * Only affects default-rendered cells; custom `cell` renderers style their own.
+   * Mark this as the primary "name" column. The record-name column renders at
+   * weight 500 — enough to separate it from metadata columns (which stay 400 /
+   * --text-3) without the "wall of bold". Only affects default-rendered cells;
+   * custom `cell` renderers style their own.
    */
   isName?: boolean;
   /** Format function applied to cell value before rendering */
diff --git a/web/src/lib/core/Table/OTable.vue b/web/src/lib/core/Table/OTable.vue
index 24a5ab01ab..e6b26bb6b7 100644
--- a/web/src/lib/core/Table/OTable.vue
+++ b/web/src/lib/core/Table/OTable.vue
@@ -368,16 +368,11 @@ const {
 
 const isVirtual = computed(() => props.virtualScroll && displayRows.value.length > 0);
 
-// ── Actions column content-measurement ──────────────────────────
-// The actions column has no fixed semantic width — it's "as wide as its
-// buttons, no more". We can't know that from the column def (buttons live in a
-// slot), so after each render we measure the rendered action cells and pin the
-// column's CSS size var to the widest content. These vars override the nominal
-// sizes computed in useTableCore.
-// Per-column CSS size-var overrides. The actions column is NO LONGER measured
-// from the DOM at runtime (it's sized deterministically from its icon count in
-// useTableCore, so the skeleton and loaded table match) — this stays empty for
-// now but is kept as the override channel the table style/sums read from.
+// ── Per-column CSS size-var overrides ──────────────────────────
+// Override channel the table style/sums read from, overriding the nominal sizes
+// computed in useTableCore. The actions column is sized deterministically from
+// its icon count in useTableCore (so the skeleton and loaded table match), so
+// this currently stays empty.
 const measuredColumnSizeVars = ref<Record<string, string>>({});
 
 // ── Flex-fill measurement ───────────────────────────────────────
@@ -662,9 +657,8 @@ function freezeFlexColumns(): void {
   // Pin each flex column to its ACTUAL rendered width so TanStack's resize
   // starts from exactly where the column is — no jump. The DOM is current at
   // mousedown, so getBoundingClientRect is reliable; the arithmetic fill is a
-  // fallback for when the element isn't found / has no layout (tests). (The
-  // arithmetic alone was off on some pages where a column's rendered width
-  // differs from its nominal size.)
+  // fallback for when the element isn't found / has no layout (tests). (Arithmetic
+  // alone can be off where a column's rendered width differs from its nominal size.)
   const fills = fillWidths();
   const sizing = { ...columnSizing.value };
   for (const id of ids) {
@@ -809,7 +803,7 @@ defineExpose({
     <!-- ── Custom toolbar slot (rendered INSIDE the frame, above the table) ── -->
     <div
       v-if="slots.toolbar || slots['toolbar-trailing']"
-      class="flex items-center px-3 py-2 gap-2 border-b border-[var(--color-table-row-divider)]"
+      class="flex items-center px-page-edge py-2 gap-2 border-b border-table-row-divider"
       data-test="o2-table-toolbar"
     >
       <slot name="toolbar" />
@@ -828,7 +822,7 @@ defineExpose({
     <!-- ── Built-in global search ─────────────────────────── -->
     <div
       v-if="props.showGlobalFilter && !slots.top && !slots.toolbar"
-      class="flex items-center gap-2 px-3 py-2 border-b border-[var(--color-table-row-divider)] bg-[var(--color-table-header-bg)]"
+      class="flex items-center gap-2 px-page-edge py-2 border-b border-table-row-divider bg-table-header-bg"
       data-test="o2-table-global-filter"
     >
       <div class="relative max-w-xs flex-1">
@@ -894,16 +888,21 @@ defineExpose({
           props.horizontalScroll ? 'min-w-max' : ((useComputedWidth && frozen) ? '' : 'w-full'),
           props.horizontalScroll || props.defaultColumns ? 'table-auto' : 'table-fixed',
           (props.bordered && !props.columns.some((c) => c.pinned || c.isAction)) ? '' : 'border-separate border-spacing-0',
-          // Without a leading selection/expansion gutter the first column would
-          // hug the table's left edge; inset it so it aligns like gutter tables.
-          (!selection.isEnabled.value && !expansion.isEnabled.value) ? 'o2-table--inset-first' : '',
+          // Symmetric edge inset (SPACING_AUDIT.md §7): the first and last cell
+          // content sit --spacing-table-edge (14px) from the table edges on EVERY
+          // table, while the per-cell row dividers still span the full width
+          // (full-bleed). Applied unconditionally so all tables align identically;
+          // the compact `.o2-table` modifier still overrides it via !important, and
+          // a leading checkbox/expand/drag gutter supplies the left inset on its
+          // own (same token — see the CSS).
+          'o2-table--edge-inset',
         ]"
         :style="{
           ...columnSizeVars,
           ...measuredColumnSizeVars,
           ...dynamicSizeVars,
           ...(computedTableWidth ? { width: computedTableWidth } : {}),
-          '--o2-table-row-height': props.rowHeight != null
+          '--table-row-height': props.rowHeight != null
             ? `${props.rowHeight}px`
             : (props.dense ? 'var(--table-row-height-dense, 2.25rem)' : 'var(--table-row-height-normal, 2.75rem)'),
         }"
@@ -951,6 +950,7 @@ defineExpose({
           :selection-enabled="selection.isEnabled.value"
           :expansion-enabled="expansion.isEnabled.value"
           :enable-row-reorder="props.enableRowReorder"
+          :bordered="props.bordered"
         />
 
         <!-- ── Body ─────────────────────────────────────────── -->
@@ -1036,7 +1036,7 @@ defineExpose({
           <tr
             v-for="footerGroup in table.getFooterGroups()"
             :key="footerGroup.id"
-            class="bg-[var(--color-table-header-bg)]"
+            class="bg-table-header-bg"
           >
             <!-- Expand placeholder -->
             <th
@@ -1059,8 +1059,8 @@ defineExpose({
               :colspan="header.colSpan"
               :data-test="`o2-table-footer-cell-${header.id}`"
               :class="[
-                'px-2 py-1 text-left text-text-primary text-xs',
-                'border-t border-[var(--color-table-header-border)]',
+                'px-2 py-1 text-left text-text-body text-xs',
+                'border-t border-table-header-border',
                 (header.column.columnDef.meta as any)?.align === 'center' ? 'text-center' : '',
                 (header.column.columnDef.meta as any)?.align === 'right' ? 'text-right' : '',
               ]"
@@ -1128,7 +1128,7 @@ defineExpose({
       <div
         v-if="showStreaming"
         data-test="o2-table-streaming-bar"
-        class="sticky bottom-0 h-1 w-full bg-[var(--color-table-streaming-bar)] animate-pulse z-10"
+        class="sticky bottom-0 h-1 w-full bg-table-streaming-bar animate-pulse z-10"
         aria-label="Data streaming in progress"
       />
     </div>
@@ -1181,14 +1181,58 @@ defineExpose({
 </template>
 
 <style scoped>
-/* When the table has no leading selection/expansion gutter, the first data
-   column would otherwise sit flush against the left edge with only the default
-   cell padding (0.5rem). Inset the first header + body cell so these tables read
-   with the same comfortable left margin as tables that do have a checkbox
-   gutter. Targeted by data-test prefix so full-width colspan rows (expanded /
-   tree-warning) are left untouched. */
-.o2-table--inset-first :deep(th[data-test^="o2-table-th-"]:first-child),
-.o2-table--inset-first :deep(td[data-test^="o2-table-cell-"]:first-child) {
-  padding-left: 1rem;
+/* Symmetric edge inset (SPACING_AUDIT.md §7). The first and last real cell of
+   every row are inset 1rem so a table's content aligns to the same 1rem grid
+   line as the page header, on BOTH edges — while the per-cell row dividers
+   (border-b on each td) still span the full table width, so separators stay
+   full-bleed. Targeted by the data-test prefix so full-width colspan rows
+   (expanded / tree-warning) are untouched, and the invisible trailing __spacer__
+   column is excluded so the right inset lands on real content. A leading
+   checkbox/expand/drag gutter is excluded from the left rule — that gutter cell
+   already supplies the left inset itself; padding it would squish its icon. */
+.o2-table--edge-inset :deep(th[data-test^="o2-table-th-"]:first-child:not([data-test="o2-table-th-select"]):not([data-test="o2-table-th-expand"]):not([data-test="o2-table-th-drag"])),
+.o2-table--edge-inset :deep(td[data-test^="o2-table-cell-"]:first-child) {
+  padding-left: var(--spacing-table-edge);
+}
+.o2-table--edge-inset :deep(th[data-test^="o2-table-th-"]:last-child:not([data-test="o2-table-th-__spacer__"])),
+.o2-table--edge-inset :deep(td[data-test^="o2-table-cell-"]:last-child:not([data-test="o2-table-cell-__spacer__"])) {
+  padding-right: var(--spacing-table-edge);
+}
+
+/* keep(lib-override:o2-table-modifiers): `.o2-table` / `.o2-row-md` /
+   `.o2-table-header-sticky` are a PUBLIC modifier API — call sites put them on
+   <OTable>, so they land on this component's root (attr fallthrough), but every
+   declaration targets OTable's OWN th/td/thead, which OTableHeader /
+   OTableBodyCell render. That is why they live here behind :deep() instead of
+   as template utilities: no call site owns the DOM being styled. Scoping adds
+   [data-v] to the root compound only, which the root already carries.
+   Consumers: settings/DiscoveredServices.vue, plugins/logs/DetailTable.vue,
+   plugins/logs/SearchJobInspector.vue. */
+.o2-table :deep(th),
+.o2-table :deep(td) {
+  padding: 0 0.3125rem !important;
+  height: 2.25rem;
+}
+
+.o2-table.o2-row-md :deep(th),
+.o2-table.o2-row-md :deep(td) {
+  height: 2.25rem !important;
+}
+
+.o2-table :deep(tr td) {
+  border-bottom: 1px solid var(--color-card-glass-border) !important;
+}
+
+/* keep(lib-override:o2-table-hide-header): public modifier, same shape as the
+   block above — `thead` is this component's own render, and the class is passed
+   in by components/queries/QueryList.vue and plugins/logs/SearchBar.vue (x2). */
+.o2-table-hide-header :deep(thead) {
+  display: none;
+}
+
+.o2-table-header-sticky :deep(thead) {
+  position: sticky;
+  top: 0;
+  z-index: 1000;
 }
 </style>
diff --git a/web/src/lib/core/Table/cells/OCodeCell.vue b/web/src/lib/core/Table/cells/OCodeCell.vue
index 7edcdaca50..bf06daf9e9 100644
--- a/web/src/lib/core/Table/cells/OCodeCell.vue
+++ b/web/src/lib/core/Table/cells/OCodeCell.vue
@@ -2,7 +2,7 @@
 // Copyright 2026 OpenObserve Inc.
 //
 // OCodeCell — monospace rendering for identifiers / SQL / tokens with an
-// optional copy-on-hover affordance (audit §3). Truncates with ellipsis and
+// optional copy-on-hover affordance. Truncates with ellipsis and
 // exposes the full value via a native title tooltip.
 //
 //   <OCodeCell :value="row.trace_id" />
@@ -44,7 +44,7 @@ async function handleCopy(e: MouseEvent) {
 <template>
   <span
     v-if="text === null"
-    class="text-text-primary text-xs"
+    class="text-text-muted text-xs"
   >{{ emptyLabel }}</span>
   <span
     v-else
@@ -57,7 +57,7 @@ async function handleCopy(e: MouseEvent) {
     <button
       v-if="copy"
       type="button"
-      class="shrink-0 opacity-0 group-hover/code:opacity-60 hover:opacity-100! cursor-pointer text-text-primary transition-opacity leading-none"
+      class="shrink-0 opacity-0 group-hover/code:opacity-60 hover:opacity-100! cursor-pointer text-text-body transition-opacity leading-none"
       :title="copied ? 'Copied!' : 'Copy'"
       @click="handleCopy"
     >
diff --git a/web/src/lib/core/Table/cells/ODataBarCell.vue b/web/src/lib/core/Table/cells/ODataBarCell.vue
index 613674e183..052a266591 100644
--- a/web/src/lib/core/Table/cells/ODataBarCell.vue
+++ b/web/src/lib/core/Table/cells/ODataBarCell.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // Copyright 2026 OpenObserve Inc.
 //
-// ODataBarCell — the headline "bars like Datadog" cell (audit §2.2). Renders
+// ODataBarCell — the headline "bars like Datadog" cell. Renders
 // a (right-aligned) formatted value with a subtle horizontal bar behind it,
 // width proportional to value / columnMax. The caller computes the column max
 // over the visible page and passes it in, plus the already-formatted display
@@ -65,7 +65,7 @@ const barClass = computed(
   <div class="flex flex-col items-end justify-center gap-0.75 w-full min-w-0">
     <span
       class="tabular-nums whitespace-nowrap leading-none"
-      :class="num === null ? 'text-text-primary text-xs' : ''"
+      :class="num === null ? 'text-text-body text-xs' : ''"
     >{{ text }}</span>
     <div
       v-if="widthPct > 0"
diff --git a/web/src/lib/core/Table/cells/ONumberCell.vue b/web/src/lib/core/Table/cells/ONumberCell.vue
index 8fbc8e5fc3..05fc1e9b9e 100644
--- a/web/src/lib/core/Table/cells/ONumberCell.vue
+++ b/web/src/lib/core/Table/cells/ONumberCell.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // Copyright 2026 OpenObserve Inc.
 //
-// ONumberCell — consistent numeric rendering for tables (audit §2.4):
+// ONumberCell — consistent numeric rendering for tables:
 // tabular-nums so digits stack, one set of shared formatters, muted dash for
 // empty. Pair the column with `meta.align: "right"` for proper alignment.
 //
@@ -77,12 +77,12 @@ const formatted = computed<string | null>(() => {
 <template>
   <span
     v-if="formatted === null"
-    class="text-text-primary text-xs tabular-nums"
+    class="text-text-muted text-xs tabular-nums"
   >{{ emptyLabel }}</span>
   <span v-else class="tabular-nums whitespace-nowrap">
     {{ formatted }}<span
       v-if="suffix"
-      class="text-text-primary ml-0.5"
+      class="text-text-muted ml-0.5"
     >{{ suffix }}</span>
   </span>
 </template>
diff --git a/web/src/lib/core/Table/cells/OTimeCell.vue b/web/src/lib/core/Table/cells/OTimeCell.vue
index 6c174eb77e..6e95b590aa 100644
--- a/web/src/lib/core/Table/cells/OTimeCell.vue
+++ b/web/src/lib/core/Table/cells/OTimeCell.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // Copyright 2026 OpenObserve Inc.
 //
-// OTimeCell — the ONE timestamp renderer for every table (audit §2.1).
+// OTimeCell — the ONE timestamp renderer for every table.
 // Default display is relative ("2m ago"); set mode="absolute" to show the full
 // timezone-aware datetime instead. Relative cells get a hover tooltip (OTooltip,
 // not the native browser title) revealing the full absolute datetime; absolute/
@@ -167,7 +167,7 @@ const tooltip = computed(() => {
 <template>
   <span
     v-if="display === null"
-    class="text-text-primary text-xs"
+    class="text-text-body text-xs"
   >{{ emptyLabel }}</span>
   <template v-else>
     <span class="tabular-nums whitespace-nowrap">{{ display }}</span>
diff --git a/web/src/lib/core/Table/cells/OUserCell.vue b/web/src/lib/core/Table/cells/OUserCell.vue
index 2cdb45ea8a..5f8f33e3fa 100644
--- a/web/src/lib/core/Table/cells/OUserCell.vue
+++ b/web/src/lib/core/Table/cells/OUserCell.vue
@@ -27,10 +27,10 @@ const displayText = computed(() =>
 </script>
 
 <template>
-  <span v-if="isEmpty" class="text-text-primary">{{ emptyLabel }}</span>
+  <span v-if="isEmpty" class="text-text-body">{{ emptyLabel }}</span>
   <span
     v-else
-    class="whitespace-nowrap text-text-primary"
+    class="whitespace-nowrap text-text-body"
     :title="raw"
   >{{ displayText }}</span>
 </template>
diff --git a/web/src/lib/core/Table/cells/statusVariant.ts b/web/src/lib/core/Table/cells/statusVariant.ts
index f70fb507ae..7e62ccdb3d 100644
--- a/web/src/lib/core/Table/cells/statusVariant.ts
+++ b/web/src/lib/core/Table/cells/statusVariant.ts
@@ -2,9 +2,8 @@
 //
 // statusVariant — the single source of truth that maps a raw status/state
 // string (from any table, any feature) onto a semantic OBadge variant + a
-// human label. Per TABLE_VISUAL_AUDIT.md §2.3 / §5: define ONE map so that
-// "active"/"paused"/"failed" look identical everywhere instead of every
-// table inventing its own colours.
+// human label. One map so that "active"/"paused"/"failed" look identical
+// everywhere instead of every table inventing its own colours.
 //
 // Usage:
 //   const { variant, label, dot } = statusVariant("paused", "pipeline");
@@ -13,7 +12,7 @@
 import type { BadgeVariant } from "@/lib/core/Badge/OBadge.types";
 
 /** Semantic tone — the calm, low-chroma "soft" badge family reads best at
- *  table density (HANDOFF §11 / audit §2.3). Each tone maps to one variant. */
+ *  table density. Each tone maps to one variant. */
 export type StatusTone = "success" | "warning" | "error" | "info" | "neutral";
 
 const TONE_VARIANT: Record<StatusTone, BadgeVariant> = {
diff --git a/web/src/lib/core/Table/composables/useTableColumnPersistence.ts b/web/src/lib/core/Table/composables/useTableColumnPersistence.ts
index e4545c7aac..b912d41aa2 100644
--- a/web/src/lib/core/Table/composables/useTableColumnPersistence.ts
+++ b/web/src/lib/core/Table/composables/useTableColumnPersistence.ts
@@ -15,9 +15,7 @@
  *   }
  *
  * The key is versioned (-v1). The width model is Excel-style (a persisted width
- * is a frozen fixed width, not a hint). Pre-existing per-table entries from the
- * older schema (`o2-table-{tableId}-column-sizes-v2` / `-column-visibility`) are
- * intentionally not migrated and become orphaned on upgrade.
+ * is a frozen fixed width, not a hint).
  */
 const GLOBAL_STORAGE_KEY = "o2-tables-column-state-v1";
 
diff --git a/web/src/lib/core/Table/composables/useTableCore.ts b/web/src/lib/core/Table/composables/useTableCore.ts
index 1c6da741cd..1de85d628a 100644
--- a/web/src/lib/core/Table/composables/useTableCore.ts
+++ b/web/src/lib/core/Table/composables/useTableCore.ts
@@ -53,7 +53,7 @@ export function useTableCore<TData>(
   // ── Effective columns ───────────────────────────────────────────
   // When `showIndex` is set (and the caller hasn't already declared a `#`
   // column), prepend an auto-rendered, auto-numbered row-index column. Its
-  // value is derived from the row's position so pages no longer hand-roll a
+  // value is derived from the row's position so pages need not hand-roll a
   // `"#"` field in their data. Under server pagination we add the page offset
   // so numbering stays continuous across pages.
   const indexColumn = computed<OTableColumnDef<TData> | null>(() => {
@@ -77,7 +77,9 @@ export function useTableCore<TData>(
         const n = index + 1 + offset;
         return n <= 9 ? `0${n}` : `${n}`;
       }) as any,
-      meta: { align: "left" },
+      // tabular-nums: uniform digit width so 3-/4-digit values never clip to
+      // "2…" on the fixed-width column (see TABLE_INDEX_COL_SIZE).
+      meta: { align: "left", cellClass: "tabular-nums" },
     };
   });
 
@@ -86,6 +88,23 @@ export function useTableCore<TData>(
   // column can stay pinned flush-right. Only added when resizing is on and the
   // table has no explicit elastic (`autoWidth`) column — if a column is marked
   // autoWidth, THAT column is the filler instead and no spacer is needed.
+  // Whether an invisible trailing `__spacer__` column will be appended. When
+  // true the actions column is NOT the row's last cell (the spacer is), so it
+  // keeps px-2; when false the actions column is last and gets the 1rem right
+  // edge inset. `actionColumnWidth` reads this to budget the right padding.
+  const hasTrailingSpacer = computed<boolean>(() => {
+    const base = indexColumn.value
+      ? [indexColumn.value, ...props.columns]
+      : props.columns;
+    const hasAutoWidth = base.some((c) => c.meta?.autoWidth);
+    return (
+      (props.enableColumnResize ?? false) &&
+      !props.horizontalScroll &&
+      !props.defaultColumns &&
+      !hasAutoWidth
+    );
+  });
+
   const effectiveColumns = computed<OTableColumnDef<TData>[]>(() => {
     const base = indexColumn.value
       ? [indexColumn.value, ...props.columns]
@@ -97,13 +116,7 @@ export function useTableCore<TData>(
     // flush-right) and blank space lands in the spacer when a column shrinks.
     // `flex` tables need it too — the flex column freezes after the first resize
     // and no longer re-absorbs, so the spacer takes over.
-    const hasAutoWidth = base.some((c) => c.meta?.autoWidth);
-    const wantSpacer =
-      (props.enableColumnResize ?? false) &&
-      !props.horizontalScroll &&
-      !props.defaultColumns &&
-      !hasAutoWidth;
-    if (!wantSpacer) return base;
+    if (!hasTrailingSpacer.value) return base;
     const spacer: OTableColumnDef<TData> = {
       id: "__spacer__",
       header: "",
@@ -129,11 +142,18 @@ export function useTableCore<TData>(
   // header. Computed (not DOM-measured) so the skeleton and loaded table match.
   const ACTION_ICON_BTN = 32; // OButton size="icon-sm" → w-8
   const ACTION_BTN_GAP = 4; // gap-1 between buttons
-  const ACTION_CELL_PAD = 16; // td px-2
   const ACTIONS_HEADER_MIN = 80; // enough to show the "Actions" header in full
+  // The page-edge inset (--spacing-page-edge) that OTable applies to the last
+  // cell's right padding, in px. Keep in sync with the token (0.75rem = 12px).
+  const PAGE_EDGE_PX = 12;
   const actionColumnWidth = (actionCount?: number): number => {
     const n = Math.max(1, Number(actionCount) || 2);
-    const content = n * ACTION_ICON_BTN + (n - 1) * ACTION_BTN_GAP + ACTION_CELL_PAD;
+    // Cell padding: px-2 is 8+8=16. When the actions column is the row's last
+    // cell (no trailing spacer) the edge inset replaces its right padding with
+    // the page-edge inset, so budget 8 + PAGE_EDGE_PX — exact, so the buttons
+    // land on the same right-edge grid line as everything else (no over-width).
+    const cellPad = hasTrailingSpacer.value ? 16 : 8 + PAGE_EDGE_PX;
+    const content = n * ACTION_ICON_BTN + (n - 1) * ACTION_BTN_GAP + cellPad;
     return Math.max(content, ACTIONS_HEADER_MIN);
   };
 
@@ -228,7 +248,9 @@ export function useTableCore<TData>(
         enableResizing: (rigid || col.meta?.autoWidth || col.meta?.spacer) ? false : (col.resizable ?? props.enableColumnResize ?? false),
         enablePinning: col.pinnable ?? props.enableColumnPin ?? false,
         meta: {
-          align: col.meta?.align ?? "left",
+          // Action columns (pinned-right icon buttons) center by default — the
+          // app-wide convention — unless a column opts into a specific align.
+          align: col.meta?.align ?? (isActionCol ? "center" : "left"),
           headerClass: col.meta?.headerClass ?? "",
           cellClass: col.meta?.cellClass ?? "",
           isAction: col.isAction,
diff --git a/web/src/lib/core/Table/composables/useTableHighlight.ts b/web/src/lib/core/Table/composables/useTableHighlight.ts
index 682a873d63..5ed37c71d6 100644
--- a/web/src/lib/core/Table/composables/useTableHighlight.ts
+++ b/web/src/lib/core/Table/composables/useTableHighlight.ts
@@ -81,11 +81,16 @@ export function useTableHighlight(props: {
       props.ftsKeys?.length &&
       isFTSColumn(columnId, cellValue, props.ftsKeys)
     ) {
-      // Full semantic + keyword highlighting
+      // Full semantic + keyword highlighting. Semantic colours are applied by
+      // CLASS (`log-ip`, `log-url`, … — see assets/styles/log-highlighting.css,
+      // which carries the light/dark token values); `processTextWithHighlights`
+      // reads its `colors` argument only from `getSingleSemanticColor`, which no
+      // production caller uses. It is threaded through purely for API compat —
+      // do not reintroduce a literal colour map here.
       return processTextWithHighlights(
         cellValue,
         props.highlightText,
-        colors ?? getDefaultColors(),
+        colors,
         false,
       );
     }
@@ -151,16 +156,3 @@ export function useTableHighlight(props: {
     processTextWithHighlights,
   };
 }
-
-function getDefaultColors(): Record<string, string> {
-  return {
-    ip: "#3b82f6",
-    url: "#22c55e",
-    email: "#a855f7",
-    timestamp: "#f59e0b",
-    path: "#06b6d4",
-    numberValue: "#ef4444",
-    stringValue: "#6b7280",
-    uuid: "#ec4899",
-  };
-}
diff --git a/web/src/lib/core/Table/sub-components/OTableBody.vue b/web/src/lib/core/Table/sub-components/OTableBody.vue
index 274a07bfa8..a5ee8acd5c 100644
--- a/web/src/lib/core/Table/sub-components/OTableBody.vue
+++ b/web/src/lib/core/Table/sub-components/OTableBody.vue
@@ -324,16 +324,18 @@ function getRowForItem(item: any): Row<any> {
   </tbody>
 </template>
 
-<style>
-/* Row drag reorder — ghost & dragging classes for VueDraggableNext */
+<style scoped>
+/* keep(third-party): VueDraggableNext applies these classes to row clones at
+   RUNTIME (ghost / dragging); no template ever writes them, so they cannot be
+   utilities. Scoped still matches — the clones keep the row's data-v attr. */
 .o2-table-drag-ghost {
   opacity: 0.3;
-  background: var(--o2-primary-50);
-  border: 1px dashed var(--o2-primary-color);
+  background: var(--color-primary-50);
+  border: 1px dashed var(--color-accent);
   border-radius: 0.375rem;
 }
 .o2-table-drag-dragging {
   opacity: 0.5;
-  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  box-shadow: var(--shadow-lg);
 }
 </style>
diff --git a/web/src/lib/core/Table/sub-components/OTableBodyCell.vue b/web/src/lib/core/Table/sub-components/OTableBodyCell.vue
index 9169fe6e03..44c82690fd 100644
--- a/web/src/lib/core/Table/sub-components/OTableBodyCell.vue
+++ b/web/src/lib/core/Table/sub-components/OTableBodyCell.vue
@@ -54,10 +54,10 @@ const emit = defineEmits<{
 const meta = computed(() => props.cell.column.columnDef.meta as any);
 const align = computed(() => meta.value?.align ?? "left");
 
-// Record-name column → weight 500 (HANDOFF §8.2). Metadata columns stay 400.
-// Only the default-rendered text path uses this; custom cells style their own.
+// Record-name column weight. Only the default-rendered text path uses this;
+// custom cells style their own.
 const defaultTextClass = computed(() => [
-  "text-text-primary",
+  "text-text-body",
 ]);
 
 const alignClass = computed(() => {
@@ -203,15 +203,15 @@ function handleClick() {
       // the default text wrapper) still inherit the theme-aware primary color
       // instead of falling back to a grey inherited value in dark mode. Inner
       // links/badges override this with their own color.
-      'text-text-primary',
+      'text-text-body',
       meta?.spacer ? 'px-0 align-middle' : (meta?.compactPadding ? 'px-1 align-middle' : 'px-2 align-middle'),
-      bordered ? 'border-b border-[var(--color-table-row-divider)]' : '',
+      bordered ? 'border-b border-table-row-divider' : '',
       alignClass,
       isAction ? 'w-0 whitespace-nowrap' : '',
        isPinned
         ? (rowSelected
-            ? 'bg-[var(--color-table-row-selected-bg)] group-hover/row:bg-table-row-hover-bg transition-colors duration-150'
-            : 'bg-[var(--color-table-cell-bg)] group-hover/row:bg-[var(--color-table-row-hover-bg)] transition-colors duration-150')
+            ? 'bg-table-row-selected-bg group-hover/row:bg-table-row-hover-bg transition-colors duration-150'
+            : 'bg-table-cell-bg group-hover/row:bg-table-row-hover-bg transition-colors duration-150')
         : '',
       wrap
         ? 'break-words whitespace-normal'
@@ -231,8 +231,8 @@ function handleClick() {
       cellStyle,
       isTreeColumn
         ? {
-            '--o2-tree-x': treeChevronX + 'px',
-            '--o2-tree-parent-x': treeParentChevronX + 'px',
+            '--tree-x': treeChevronX + 'px',
+            '--tree-parent-x': treeParentChevronX + 'px',
           }
         : {},
     ]"
@@ -246,12 +246,12 @@ function handleClick() {
     >
       <span
         v-if="treeMeta?.hasChildren || (treeMeta && treeMeta.parentId !== null)"
-        class="inline-flex items-center justify-center w-[18px] h-[18px] shrink-0"
+        class="inline-flex items-center justify-center w-4.5 h-4.5 shrink-0"
       >
         <button
           v-if="treeMeta?.hasChildren"
           type="button"
-          class="inline-flex items-center justify-center w-[18px] h-[18px] p-0 bg-transparent border-0 rounded cursor-pointer text-(--color-text-secondary,#6b7280) hover:bg-(--color-table-row-hover-bg,rgba(0,0,0,0.05)) hover:text-(--color-text-primary)"
+          class="inline-flex items-center justify-center w-4.5 h-4.5 p-0 bg-transparent border-0 rounded-default cursor-pointer text-text-secondary hover:bg-table-row-hover-bg hover:text-text-body"
           :data-test="`o2-table-tree-toggle-${cell.column.id}`"
           :aria-expanded="treeMeta?.isExpanded ? 'true' : 'false'"
           @click="onTreeToggle"
@@ -263,7 +263,7 @@ function handleClick() {
         </button>
         <span
           v-else
-          class="w-[7px] h-[7px] bg-(--q-primary,#6366f1) opacity-75 rounded-[1px] shadow-[0_0_0_2px_var(--color-table-cell-bg,#fff)] z-3 relative"
+          class="size-1.75 bg-theme-accent opacity-75 rounded-default ring-2 ring-table-cell-bg z-3 relative"
           aria-hidden="true"
         />
       </span>
@@ -317,7 +317,7 @@ function handleClick() {
       v-if="enableCellCopy && !$slots.default"
       type="button"
       :data-test="`o2-table-cell-copy-${cell.column.id}`"
-      class="absolute right-1 opacity-0 group-hover:opacity-100 bg-[var(--color-surface-base)] border border-[var(--color-border-default)] rounded cursor-pointer p-0.5 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] leading-none transition-opacity"
+      class="absolute right-1 opacity-0 group-hover:opacity-100 bg-surface-base border border-border-default rounded-default cursor-pointer p-0.5 text-text-muted hover:text-text-body leading-none transition-opacity"
       :title="copied ? 'Copied!' : 'Copy'"
       @click="handleCopy"
     >
@@ -326,18 +326,19 @@ function handleClick() {
   </td>
 </template>
 
-<style>
-/* ── Tree connector lines (parent ↓ children) ────────────────── */
+<style scoped>
+/* keep(generated-content): tree connector lines (parent ↓ children) drawn as
+   ::before/::after pseudo-elements positioned off inline --tree-x vars. */
 
 /* Vertical line going down from below the chevron, on expanded parent rows */
 .o2-tree-parent-expanded::after {
   content: "";
   position: absolute;
-  left: var(--o2-tree-x);
-  top: calc(50% + 9px);
+  left: var(--tree-x, 0);
+  top: calc(50% + 0.5625rem);
   bottom: 0;
-  width: 1.5px;
-  background-color: var(--q-primary, #6366f1);
+  width: 0.09375rem;
+  background-color: var(--color-theme-accent);
   opacity: 0.55;
   z-index: 1;
 }
@@ -349,11 +350,11 @@ function handleClick() {
 .o2-tree-child::before {
   content: "";
   position: absolute;
-  left: var(--o2-tree-parent-x);
+  left: var(--tree-parent-x, 0);
   top: 0;
   bottom: 0;
-  width: 1.5px;
-  background-color: var(--q-primary, #6366f1);
+  width: 0.09375rem;
+  background-color: var(--color-theme-accent);
   opacity: 0.55;
   z-index: 1;
 }
@@ -363,19 +364,19 @@ function handleClick() {
 .o2-tree-child::after {
   content: "";
   position: absolute;
-  left: var(--o2-tree-parent-x);
+  left: var(--tree-parent-x, 0);
   top: 50%;
-  /* Parent-row child (has its own chevron): stop the stub 9px before the
+  /* Parent-row child (has its own chevron): stop the stub 0.5625rem before the
      chevron center so the line doesn't run into the icon. */
-  width: calc(var(--o2-tree-x) - var(--o2-tree-parent-x) - 9px);
-  height: 1.5px;
-  background-color: var(--q-primary, #6366f1);
+  width: calc(var(--tree-x, 0) - var(--tree-parent-x, 0) - 0.5625rem);
+  height: 0.09375rem;
+  background-color: var(--color-theme-accent);
   opacity: 0.55;
   z-index: 1;
 }
 /* Leaf children (no chevron, endpoint marker dot instead): run the stub all
    the way to the dot's centre so the line visually touches it. */
 .o2-tree-child.o2-tree-leaf::after {
-  width: calc(var(--o2-tree-x) - var(--o2-tree-parent-x));
+  width: calc(var(--tree-x, 0) - var(--tree-parent-x, 0));
 }
 </style>
diff --git a/web/src/lib/core/Table/sub-components/OTableBodyRow.vue b/web/src/lib/core/Table/sub-components/OTableBodyRow.vue
index b87df31ecf..9633316202 100644
--- a/web/src/lib/core/Table/sub-components/OTableBodyRow.vue
+++ b/web/src/lib/core/Table/sub-components/OTableBodyRow.vue
@@ -22,10 +22,7 @@ import OTableSelectCheckbox from "./OTableSelectCheckbox.vue";
 import OTableExpandButton from "./OTableExpandButton.vue";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import { OTableTreeContextKey } from "../composables/useTableTree";
-import {
-  TABLE_CHECKBOX_COL_SIZE as TABLE_CHECKBOX_COL_WIDTH,
-  TABLE_CHECKBOX_COL_PAD_LEFT,
-} from "../OTable.types";
+import { TABLE_CHECKBOX_COL_SIZE as TABLE_CHECKBOX_COL_WIDTH } from "../OTable.types";
 import { isInputFocused } from "@/utils/keyboardShortcuts";
 
 const props = defineProps<{
@@ -270,8 +267,8 @@ function onRowBlur() {
       rowClass,
     ]"
     :style="{
-      height: 'var(--o2-table-row-height, 2.25rem)',
-      ...(statusBarColor ? { '--o2-row-status-color': statusBarColor } : {}),
+      height: 'var(--table-row-height, 2.25rem)',
+      ...(statusBarColor ? { '--row-status-color': statusBarColor } : {}),
       ...rowStyle,
     }"
     :data-status-bar="statusBarColor ? 'true' : undefined"
@@ -313,7 +310,7 @@ function onRowBlur() {
         width: TABLE_CHECKBOX_COL_WIDTH + 'px',
         minWidth: TABLE_CHECKBOX_COL_WIDTH + 'px',
         maxWidth: TABLE_CHECKBOX_COL_WIDTH + 'px',
-        paddingLeft: TABLE_CHECKBOX_COL_PAD_LEFT + 'px',
+        paddingLeft: 'var(--spacing-table-edge)',
       }"
       data-test="o2-table-select-cell"
     >
@@ -373,7 +370,7 @@ function onRowBlur() {
   <tr
     v-if="showTreeWarning"
     :data-test="`o2-table-tree-warning-${row.index}`"
-    class="bg-(--color-warning-surface,rgba(251,191,36,0.08))"
+    class="bg-warning-surface"
   >
     <td
       :colspan="
@@ -386,7 +383,7 @@ function onRowBlur() {
         'o2-table-tree-warning-cell relative',
         bordered ? 'border-b border-table-row-divider' : '',
       ]"
-      :style="{ '--o2-tree-connector-x': treeConnectorX + 'px' }"
+      :style="{ '--tree-connector-x': treeConnectorX + 'px' }"
     >
       <div class="relative z-1 flex items-center justify-center">
         <slot name="tree-warning" :row="row.original" />
@@ -414,23 +411,24 @@ function onRowBlur() {
   </tr>
 </template>
 
-<style>
-/* Per-row status spine. Painted as an inset box-shadow on the row's first
-   cell — an extra <td> would add a phantom column on only the rows that have
-   a status color and shift their cells out of alignment under table-fixed. */
+<style scoped>
+/* keep(complex-state): per-row status spine, painted as an inset box-shadow on
+   the row's first cell (a `> td:first-child` child-combinator target) — an extra
+   <td> would add a phantom column and misalign cells under table-fixed. */
 .o2-table-row-with-status > td:first-child {
-  box-shadow: inset 0.25rem 0 0 0 var(--o2-row-status-color);
+  box-shadow: inset 0.25rem 0 0 0 var(--row-status-color, transparent);
 }
 
-/* Continuation of the tree connector vertical line through the warning row */
+/* keep(generated-content): continuation of the tree connector vertical line
+   through the warning row, drawn as an ::after off the inline connector-x var. */
 .o2-table-tree-warning-cell::after {
   content: "";
   position: absolute;
-  left: var(--o2-tree-connector-x);
+  left: var(--tree-connector-x, 0);
   top: 0;
   bottom: 0;
-  width: 1.5px;
-  background-color: var(--q-primary, #6366f1);
+  width: 0.09375rem;
+  background-color: var(--color-theme-accent);
   opacity: 0.55;
   z-index: 0;
 }
diff --git a/web/src/lib/core/Table/sub-components/OTableColumnToggle.vue b/web/src/lib/core/Table/sub-components/OTableColumnToggle.vue
index 7731edec2f..5cf34606ab 100644
--- a/web/src/lib/core/Table/sub-components/OTableColumnToggle.vue
+++ b/web/src/lib/core/Table/sub-components/OTableColumnToggle.vue
@@ -74,7 +74,7 @@ function resetToDefault(): void {
         </OButton>
         <span
           v-if="hiddenCount > 0"
-          class="absolute -top-1 -right-1 inline-flex items-center justify-center rounded-full bg-[var(--color-primary-600)] text-white text-[10px] font-medium w-4 h-4 leading-none pointer-events-none"
+          class="absolute -top-1 -right-1 inline-flex items-center justify-center rounded-full bg-primary-600 text-white text-3xs font-medium w-4 h-4 leading-none pointer-events-none"
           data-test="o2-table-column-toggle-hidden-badge"
         >
           {{ hiddenCount }}
@@ -87,7 +87,7 @@ function resetToDefault(): void {
       class="py-1 min-w-44"
       data-test="o2-table-column-toggle-panel"
     >
-      <p class="px-3 py-1 text-xs font-medium text-[var(--color-text-secondary)]">
+      <p class="px-3 py-1 text-xs font-medium text-text-secondary">
         Columns
       </p>
 
@@ -95,7 +95,7 @@ function resetToDefault(): void {
         <li
           v-for="col in toggleableColumns"
           :key="col.id"
-          class="flex items-center gap-2 px-3 py-1.5 cursor-pointer rounded hover:bg-surface-panel transition-colors"
+          class="flex items-center gap-2 px-3 py-1.5 cursor-pointer rounded-default hover:bg-surface-panel transition-colors"
           :data-test="`o2-table-column-toggle-item-${col.id}`"
           @click.stop="toggleColumn(col.id)"
         >
@@ -106,7 +106,7 @@ function resetToDefault(): void {
             @update:model-value="toggleColumn(col.id)"
             @click.stop
           />
-          <span class="text-sm text-text-primary select-none flex-1">
+          <span class="text-sm text-text-body select-none flex-1">
             {{ typeof col.header === "string" ? col.header : col.id }}
           </span>
         </li>
@@ -115,11 +115,11 @@ function resetToDefault(): void {
       <!-- Reset buttons — same px-3 gap-2 structure as list items for alignment -->
       <div
         v-if="hiddenCount > 0 || props.hasResizedColumns"
-        class="border-t border-[var(--color-border-default)] mt-1 pt-1 pb-1"
+        class="border-t border-border-default mt-1 pt-1 pb-1"
       >
         <button
           v-if="hiddenCount > 0"
-          class="flex items-center gap-2 px-3 py-1.5 w-full text-sm cursor-pointer rounded hover:bg-surface-panel transition-colors text-text-primary"
+          class="flex items-center gap-2 px-3 py-1.5 w-full text-sm cursor-pointer rounded-default hover:bg-surface-panel transition-colors text-text-body"
           data-test="o2-table-column-toggle-reset-btn"
           @click="resetToDefault"
         >
@@ -128,7 +128,7 @@ function resetToDefault(): void {
         </button>
         <button
           v-if="props.hasResizedColumns"
-          class="flex items-center gap-2 px-3 py-1.5 w-full text-sm cursor-pointer rounded hover:bg-surface-panel transition-colors text-text-primary"
+          class="flex items-center gap-2 px-3 py-1.5 w-full text-sm cursor-pointer rounded-default hover:bg-surface-panel transition-colors text-text-body"
           data-test="o2-table-column-resize-reset-btn"
           @click="emit('reset:columnSizes')"
         >
diff --git a/web/src/lib/core/Table/sub-components/OTableError.vue b/web/src/lib/core/Table/sub-components/OTableError.vue
index f217f672b9..bc1039867e 100644
--- a/web/src/lib/core/Table/sub-components/OTableError.vue
+++ b/web/src/lib/core/Table/sub-components/OTableError.vue
@@ -27,7 +27,7 @@ defineSlots<{
         <template v-if="message" #actions>
           <button
             data-test="o2-table-error-retry-btn"
-            class="px-3 py-1 text-sm rounded bg-white/20 hover:bg-white/30 transition-colors"
+            class="px-3 py-1 text-sm rounded-default bg-white/20 hover:bg-white/30 transition-colors"
             @click="$emit('retry')"
           >
             Retry
diff --git a/web/src/lib/core/Table/sub-components/OTableExpandButton.vue b/web/src/lib/core/Table/sub-components/OTableExpandButton.vue
index 18300d6dd3..40afb8f2c0 100644
--- a/web/src/lib/core/Table/sub-components/OTableExpandButton.vue
+++ b/web/src/lib/core/Table/sub-components/OTableExpandButton.vue
@@ -17,7 +17,7 @@ defineEmits<{
   <button
     type="button"
     :data-test="`o2-table-expand-${rowId}`"
-    class="inline-flex items-center justify-center size-6 rounded bg-transparent border-0 cursor-pointer text-secondary hover:bg-button-ghost-hover-bg transition-colors"
+    class="inline-flex items-center justify-center size-6 rounded-default bg-transparent border-0 cursor-pointer text-secondary hover:bg-button-ghost-hover-bg transition-colors"
     @click.stop="$emit('toggle')"
   >
     <OIcon
diff --git a/web/src/lib/core/Table/sub-components/OTableHeader.vue b/web/src/lib/core/Table/sub-components/OTableHeader.vue
index 80809b364f..18f4eea091 100644
--- a/web/src/lib/core/Table/sub-components/OTableHeader.vue
+++ b/web/src/lib/core/Table/sub-components/OTableHeader.vue
@@ -8,7 +8,7 @@ import { VueDraggableNext as VueDraggable } from "vue-draggable-next";
 import OTableSelectCheckbox from "./OTableSelectCheckbox.vue";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import { PIVOT_TABLE_TOTAL_COLUMN_WIDTH } from "@/utils/dashboard/constants";
-import { TABLE_CHECKBOX_COL_SIZE as TABLE_CHECKBOX_COL_WIDTH, TABLE_CHECKBOX_COL_PAD_LEFT } from "../OTable.types";
+import { TABLE_CHECKBOX_COL_SIZE as TABLE_CHECKBOX_COL_WIDTH } from "../OTable.types";
 
 const props = defineProps<{
   headerGroups: HeaderGroup<any>[];
@@ -166,13 +166,13 @@ function getPivotTotalHeaderStyle(cell: any): Record<string, any> {
             v-if="getSortIcon?.(col.id) === 'asc'"
             name="arrow-upward"
             size="sm"
-            class="text-[var(--color-table-sort-icon-active)]"
+            class="text-table-sort-icon-active"
           />
           <OIcon
             v-else-if="getSortIcon?.(col.id) === 'desc'"
             name="arrow-downward"
             size="sm"
-            class="text-[var(--color-table-sort-icon-active)]"
+            class="text-table-sort-icon-active"
           />
           <OIcon
             v-else
@@ -215,13 +215,13 @@ function getPivotTotalHeaderStyle(cell: any): Record<string, any> {
           v-if="level.isLeaf && cell._sortColumn && getSortIcon?.(cell._sortColumn) === 'asc'"
           name="arrow-upward"
           size="sm"
-          class="text-[var(--color-table-sort-icon-active)] ml-1"
+          class="text-table-sort-icon-active ml-1"
         />
         <OIcon
           v-else-if="level.isLeaf && cell._sortColumn && getSortIcon?.(cell._sortColumn) === 'desc'"
           name="arrow-downward"
           size="sm"
-          class="text-[var(--color-table-sort-icon-active)] ml-1"
+          class="text-table-sort-icon-active ml-1"
         />
         <OIcon
           v-else-if="level.isLeaf && cell._sortColumn"
@@ -239,8 +239,8 @@ function getPivotTotalHeaderStyle(cell: any): Record<string, any> {
     v-for="headerGroup in headerGroups"
     :key="headerGroup.id"
     :class="[
-      'bg-[var(--color-table-header-bg)]',
-      'border-b border-[var(--color-table-header-border)]',
+      'bg-table-header-bg',
+      'border-b border-table-header-border',
       stickyHeader ? 'sticky top-0 z-10' : '',
     ]"
     data-test="o2-table-header"
@@ -255,7 +255,7 @@ function getPivotTotalHeaderStyle(cell: any): Record<string, any> {
       handle=".table-head"
       tag="tr"
       :class="[
-        'bg-[var(--color-table-header-bg)]',
+        'bg-table-header-bg',
         columnOrder.length > 1 ? 'cursor-move' : '',
       ]"
       :style="{
@@ -268,15 +268,15 @@ function getPivotTotalHeaderStyle(cell: any): Record<string, any> {
       <!-- Expand placeholder -->
       <th
         v-if="expansionEnabled"
-        class="w-4 min-w-4 px-0 border-b border-[var(--color-table-header-border)]"
+        class="w-4 min-w-4 px-0 border-b border-table-header-border"
         data-test="o2-table-th-expand"
       />
 
       <!-- Selection checkbox header -->
       <th
         v-if="selectionMultiple"
-        class="text-left border-b border-[var(--color-table-header-border)]"
-        :style="{ width: TABLE_CHECKBOX_COL_WIDTH + 'px', minWidth: TABLE_CHECKBOX_COL_WIDTH + 'px', maxWidth: TABLE_CHECKBOX_COL_WIDTH + 'px', paddingLeft: TABLE_CHECKBOX_COL_PAD_LEFT + 'px' }"
+        class="text-left border-b border-table-header-border"
+        :style="{ width: TABLE_CHECKBOX_COL_WIDTH + 'px', minWidth: TABLE_CHECKBOX_COL_WIDTH + 'px', maxWidth: TABLE_CHECKBOX_COL_WIDTH + 'px', paddingLeft: 'var(--spacing-table-edge)' }"
         data-test="o2-table-th-select"
       >
         <OTableSelectCheckbox
@@ -290,7 +290,7 @@ function getPivotTotalHeaderStyle(cell: any): Record<string, any> {
       <!-- Drag handle placeholder column -->
       <th
         v-if="enableRowReorder"
-        class="w-4 min-w-4 px-0 border-b border-[var(--color-table-header-border)]"
+        class="w-4 min-w-4 px-0 border-b border-table-header-border"
         data-test="o2-table-th-drag"
         aria-hidden="true"
       />
@@ -306,9 +306,9 @@ function getPivotTotalHeaderStyle(cell: any): Record<string, any> {
           `${headerPaddingClass(header)} text-left font-medium text-table-header-text text-xs select-none relative`,
           'table-head',
           dense ? 'h-8' : 'h-9',
-          'border-b border-[var(--color-table-header-border)]',
+          'border-b border-table-header-border',
           'group',
-          header.column.getIsPinned?.() ? 'bg-[var(--color-table-header-bg)]' : '',
+          header.column.getIsPinned?.() ? 'bg-table-header-bg' : '',
           (header.column.columnDef.meta as any)?.headerClass ?? '',
         ]"
         :style="{
@@ -360,7 +360,7 @@ function getPivotTotalHeaderStyle(cell: any): Record<string, any> {
                 v-if="getSortIcon(header.id) === 'asc'"
                 name="arrow-upward"
                 size="sm"
-                class="text-[var(--color-table-sort-icon-active)]"
+                class="text-table-sort-icon-active"
                 data-test="o2-table-sort-icon-active"
                 data-test-sort-direction="asc"
               />
@@ -368,7 +368,7 @@ function getPivotTotalHeaderStyle(cell: any): Record<string, any> {
                 v-else-if="getSortIcon(header.id) === 'desc'"
                 name="arrow-downward"
                 size="sm"
-                class="text-[var(--color-table-sort-icon-active)]"
+                class="text-table-sort-icon-active"
                 data-test="o2-table-sort-icon-active"
                 data-test-sort-direction="desc"
               />
@@ -397,7 +397,7 @@ function getPivotTotalHeaderStyle(cell: any): Record<string, any> {
         <!-- Column resize handle -->
         <div
           v-if="header.column.getCanResize()"
-          class="resizer absolute right-0 top-0 h-full w-2 flex items-center justify-end cursor-col-resize select-none touch-none z-10 group/resizer"
+          class="resizer absolute right-0 top-0 h-full w-1.25 flex items-center justify-end cursor-col-resize select-none touch-none z-10 group/resizer"
           :title="'Drag to resize · double-click to reset'"
           @dblclick="header.column.resetSize()"
           @mousedown.prevent.stop="startResize(header, $event)"
@@ -409,8 +409,8 @@ function getPivotTotalHeaderStyle(cell: any): Record<string, any> {
             :class="[
               'rounded-full transition-all duration-150',
               header.column.getIsResizing()
-                ? 'w-0.5 h-full bg-[var(--color-table-resize-handle)]'
-                : 'w-px h-4 bg-[var(--color-border-default)] group-hover/resizer:w-0.5 group-hover/resizer:h-full group-hover/resizer:bg-[var(--color-table-resize-handle)]',
+                ? 'w-0.5 h-full bg-table-resize-handle'
+                : 'w-px h-4 bg-border-default group-hover/resizer:w-0.5 group-hover/resizer:h-full group-hover/resizer:bg-table-resize-handle',
             ]"
           />
         </div>
@@ -424,12 +424,22 @@ function getPivotTotalHeaderStyle(cell: any): Record<string, any> {
          while the toolbar <div> stays white. -->
     <tr
       v-if="!enableColumnReorder"
-      class="bg-[var(--color-table-header-bg)]"
+      class="bg-table-header-bg"
     >
+      <!-- Gutter order MUST be expansion → selection → drag, matching
+           OTableBodyRow and OTableLoading. This branch used to render
+           selection → drag → expansion, so any table with both an expand and a
+           checkbox gutter had its header columns offset from its body. -->
+      <th
+        v-if="expansionEnabled"
+        class="w-4 min-w-4 px-0 border-b border-table-header-border"
+        data-test="o2-table-th-expand"
+      />
+
       <th
         v-if="selectionMultiple"
-        class="text-left border-b border-[var(--color-table-header-border)]"
-        :style="{ width: TABLE_CHECKBOX_COL_WIDTH + 'px', minWidth: TABLE_CHECKBOX_COL_WIDTH + 'px', maxWidth: TABLE_CHECKBOX_COL_WIDTH + 'px', paddingLeft: TABLE_CHECKBOX_COL_PAD_LEFT + 'px' }"
+        class="text-left border-b border-table-header-border"
+        :style="{ width: TABLE_CHECKBOX_COL_WIDTH + 'px', minWidth: TABLE_CHECKBOX_COL_WIDTH + 'px', maxWidth: TABLE_CHECKBOX_COL_WIDTH + 'px', paddingLeft: 'var(--spacing-table-edge)' }"
         data-test="o2-table-th-select"
       >
         <OTableSelectCheckbox
@@ -442,16 +452,11 @@ function getPivotTotalHeaderStyle(cell: any): Record<string, any> {
 
       <th
         v-if="enableRowReorder"
-        class="w-4 min-w-4 px-0 border-b border-[var(--color-table-header-border)]"
+        class="w-4 min-w-4 px-0 border-b border-table-header-border"
         data-test="o2-table-th-drag"
         aria-hidden="true"
       />
 
-      <th
-        v-if="expansionEnabled"
-        class="w-4 min-w-4 px-0 border-b border-[var(--color-table-header-border)]"
-        data-test="o2-table-th-expand"
-      />
       <th
         v-for="header in headerGroup.headers"
         :key="header.id"
@@ -459,8 +464,8 @@ function getPivotTotalHeaderStyle(cell: any): Record<string, any> {
         :class="[
           `${headerPaddingClass(header)} text-left font-medium text-table-header-text text-xs select-none relative`,
           dense ? 'h-8 group' : 'h-9 group',
-          'border-b border-[var(--color-table-header-border)]',
-          header.column.getIsPinned?.() ? 'bg-[var(--color-table-header-bg)]' : '',
+          'border-b border-table-header-border',
+          header.column.getIsPinned?.() ? 'bg-table-header-bg' : '',
           (header.column.columnDef.meta as any)?.headerClass ?? '',
         ]"
         :style="{
@@ -506,7 +511,7 @@ function getPivotTotalHeaderStyle(cell: any): Record<string, any> {
                 v-if="getSortIcon(header.id) === 'asc'"
                 name="arrow-upward"
                 size="sm"
-                class="shrink-0 text-[var(--color-table-sort-icon-active)]"
+                class="shrink-0 text-table-sort-icon-active"
                 data-test="o2-table-sort-icon-active"
                 data-test-sort-direction="asc"
               />
@@ -514,7 +519,7 @@ function getPivotTotalHeaderStyle(cell: any): Record<string, any> {
                 v-else-if="getSortIcon(header.id) === 'desc'"
                 name="arrow-downward"
                 size="sm"
-                class="shrink-0 text-[var(--color-table-sort-icon-active)]"
+                class="shrink-0 text-table-sort-icon-active"
                 data-test="o2-table-sort-icon-active"
                 data-test-sort-direction="desc"
               />
@@ -538,7 +543,7 @@ function getPivotTotalHeaderStyle(cell: any): Record<string, any> {
         </div>
         <div
           v-if="header.column.getCanResize()"
-          class="resizer absolute right-0 top-0 h-full w-2 flex items-center justify-end cursor-col-resize select-none touch-none z-10 group/resizer"
+          class="resizer absolute right-0 top-0 h-full w-1.25 flex items-center justify-end cursor-col-resize select-none touch-none z-10 group/resizer"
           :title="'Drag to resize · double-click to reset'"
           @dblclick="header.column.resetSize()"
           @mousedown.prevent.stop="startResize(header, $event)"
@@ -550,8 +555,8 @@ function getPivotTotalHeaderStyle(cell: any): Record<string, any> {
             :class="[
               'rounded-full transition-all duration-150',
               header.column.getIsResizing()
-                ? 'w-0.5 h-full bg-[var(--color-table-resize-handle)]'
-                : 'w-px h-4 bg-[var(--color-border-default)] group-hover/resizer:w-0.5 group-hover/resizer:h-full group-hover/resizer:bg-[var(--color-table-resize-handle)]',
+                ? 'w-0.5 h-full bg-table-resize-handle'
+                : 'w-px h-4 bg-border-default group-hover/resizer:w-0.5 group-hover/resizer:h-full group-hover/resizer:bg-table-resize-handle',
             ]"
           />
         </div>
diff --git a/web/src/lib/core/Table/sub-components/OTableLoading.vue b/web/src/lib/core/Table/sub-components/OTableLoading.vue
index 40023e7a03..22b68c8fe8 100644
--- a/web/src/lib/core/Table/sub-components/OTableLoading.vue
+++ b/web/src/lib/core/Table/sub-components/OTableLoading.vue
@@ -1,9 +1,9 @@
 <!-- Copyright 2026 OpenObserve Inc. -->
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, inject } from "vue";
 import type { Column } from "@tanstack/vue-table";
-import { TABLE_CHECKBOX_COL_SIZE, TABLE_CHECKBOX_COL_PAD_LEFT, type OTableColumnDef } from "../OTable.types";
+import { TABLE_CHECKBOX_COL_SIZE, type OTableColumnDef } from "../OTable.types";
 
 const props = defineProps<{
   /** Number of skeleton rows. Default: 10 */
@@ -16,8 +16,18 @@ const props = defineProps<{
   expansionEnabled?: boolean;
   /** Render placeholder for the drag-handle column */
   enableRowReorder?: boolean;
+  /** Mirror the loaded body's row divider so the skeleton is the same height. */
+  bordered?: boolean;
 }>();
 
+// Same injection OTableBodyCell uses — under horizontal scroll the real cells
+// may grow past their size var, so capping maxWidth here (when the body doesn't)
+// would make columns visibly widen the moment data arrives.
+const horizontalScroll = inject<{ value: boolean } | null>(
+  "o2TableHorizontalScroll",
+  null,
+);
+
 const BASE_WIDTHS = [55, 70, 60, 45, 65, 50, 75, 40, 58, 68, 48, 62];
 const JITTER = [0, 6, -4, 3, -2, 5, -3, 2, -5, 4, -1, 6];
 
@@ -34,22 +44,49 @@ const safeId = (id: string) => id.replace(/[^a-zA-Z0-9]/g, "-");
 const defOf = (col: Column<any, any>): OTableColumnDef =>
   col.columnDef as unknown as OTableColumnDef;
 
-// `isAction` lives on meta after useTableCore's column conversion.
+// `isAction` lives on meta after useTableCore's column conversion. useTableCore
+// also treats a column literally named "actions" as one (isRigidColumn), so the
+// skeleton must too — otherwise such a column renders as a text bar in a
+// ~80px cell and then snaps to icon buttons on load.
 const isActionCol = (col: Column<any, any>): boolean => {
   const def = defOf(col);
-  return !!def.isAction || !!(def.meta as any)?.isAction;
+  return !!def.isAction || !!(def.meta as any)?.isAction || col.id === "actions";
+};
+
+const isSpacerCol = (col: Column<any, any>): boolean =>
+  !!(defOf(col).meta as any)?.spacer;
+
+// Mirror OTableBodyCell's horizontal padding exactly: the invisible spacer must
+// be able to reach 0 width, and compact columns are px-1.
+const cellPadClass = (col: Column<any, any>): string => {
+  const meta = (defOf(col).meta as any) ?? {};
+  if (meta.spacer) return "px-0";
+  return meta.compactPadding ? "px-1" : "px-2";
 };
 
 // Mirror OTableBodyCell's width + sticky-pinning behaviour exactly.
 const cellStyle = (col: Column<any, any>): Record<string, any> => {
   const style: Record<string, any> = {};
+  const meta = (defOf(col).meta as any) ?? {};
+  const def = defOf(col);
   // Auto-width columns (meta.autoWidth) flex to fill remaining space —
-  // OTableBodyCell skips the width style for these, and we must too.
-  const isAutoWidth = (defOf(col).meta as any)?.autoWidth === true;
-  if (!isAutoWidth) {
+  // OTableBodyCell skips the width style for these, and we must too, but it
+  // still honours minSize so the elastic column can't collapse.
+  const isAutoWidth = meta.autoWidth === true;
+  if (isAutoWidth) {
+    if (def.minSize) style.minWidth = `${def.minSize}px`;
+  } else {
     const sizeVar = `var(--header-${safeId(col.id)}-size)`;
     style.width = sizeVar;
-    style.maxWidth = sizeVar;
+    // Rigid columns (index, actions) pin min+max so their width never depends
+    // on siblings — without minWidth the skeleton's actions cell can be
+    // squeezed below its budget and then jump wider on load.
+    if (meta.fixedWidth) {
+      style.minWidth = sizeVar;
+      style.maxWidth = sizeVar;
+    } else if (!horizontalScroll?.value) {
+      style.maxWidth = sizeVar;
+    }
   }
   const pin = col.getIsPinned?.();
   if (pin === "left") {
@@ -74,11 +111,15 @@ const actionCountFor = (col: Column<any, any>): number => {
   return 2;
 };
 
+// The visual pill drawn INSIDE the fixed footprint below. The footprint itself
+// is always the real button box (w-8 h-8 = ACTION_ICON_BTN in useTableCore), so
+// the cell's geometry matches the loaded row exactly; only the shimmer inside is
+// smaller, which reads as an icon rather than a heavy solid block.
 const actionDimsFor = (col: Column<any, any>): string => {
   const s = (defOf(col).meta as any)?.actionSize;
-  if (s === "button") return "h-7 w-7 rounded-md";
-  if (s === "pill") return "h-5 w-12 rounded-md";
-  return "h-[22px] w-[22px] rounded-md"; // icon (Vercel/GitHub style)
+  if (s === "button") return "h-5 w-5 rounded-default";
+  if (s === "pill") return "h-4 w-10 rounded-default";
+  return "h-4.5 w-4.5 rounded-default"; // icon
 };
 
 const alignClassFor = (col: Column<any, any>): string => {
@@ -102,7 +143,7 @@ const alignClassFor = (col: Column<any, any>): string => {
       class="o2-skel-row opacity-0 [animation:o2-skel-row-in_320ms_ease-out_forwards]"
       :style="{
         animationDelay: `${(r - 1) * 40}ms`,
-        height: 'var(--o2-table-row-height)',
+        height: 'var(--table-row-height, 2.25rem)',
       }"
     >
       <!-- Expand chevron placeholder — matches OTableBodyRow exactly -->
@@ -115,10 +156,10 @@ const alignClassFor = (col: Column<any, any>): string => {
       <td
         v-if="selectionEnabled"
         class="text-left align-middle"
-        :style="{ width: TABLE_CHECKBOX_COL_SIZE + 'px', minWidth: TABLE_CHECKBOX_COL_SIZE + 'px', maxWidth: TABLE_CHECKBOX_COL_SIZE + 'px', paddingLeft: TABLE_CHECKBOX_COL_PAD_LEFT + 'px' }"
+        :style="{ width: TABLE_CHECKBOX_COL_SIZE + 'px', minWidth: TABLE_CHECKBOX_COL_SIZE + 'px', maxWidth: TABLE_CHECKBOX_COL_SIZE + 'px', paddingLeft: 'var(--spacing-table-edge)' }"
       >
         <span
-          class="inline-block h-3.5 w-3.5 rounded-[3px] border border-[var(--color-skeleton-base)]"
+          class="inline-block h-3.5 w-3.5 rounded-default border border-skeleton-base"
           aria-hidden="true"
         />
       </td>
@@ -129,18 +170,26 @@ const alignClassFor = (col: Column<any, any>): string => {
         class="w-4 min-w-4 px-0 text-center align-middle"
       />
 
-      <!-- Data cells — class & style mirror OTableBodyCell exactly -->
+      <!-- Data cells — class, data-test & style mirror OTableBodyCell exactly.
+           The data-test prefix matters: OTable's edge-inset rule is keyed on
+           `td[data-test^="o2-table-cell-"]`, so without it the skeleton would
+           miss the 1rem first/last-cell inset and every row would shift
+           horizontally the moment loading finished. -->
       <td
         v-for="(col, c) in tableColumns"
         :key="col.id"
+        :data-test="`o2-table-cell-${col.id}`"
         :class="[
-          'px-2 align-middle',
+          cellPadClass(col),
+          'align-middle',
           alignClassFor(col),
           isActionCol(col) ? 'w-0 whitespace-nowrap' : '',
+          bordered ? 'border-b border-table-row-divider' : '',
         ]"
         :style="cellStyle(col)"
       >
-        <!-- Action column → inline group of N icon-sized placeholders -->
+        <!-- Action column → N placeholders, each in the REAL button footprint
+             (w-8 h-8) so the cell measures identically to the loaded row. -->
         <span
           v-if="isActionCol(col)"
           class="inline-flex items-center gap-1 align-middle"
@@ -148,14 +197,22 @@ const alignClassFor = (col: Column<any, any>): string => {
           <span
             v-for="a in actionCountFor(col)"
             :key="`a-${r}-${c}-${a}`"
-            :class="['o2-skel-pill inline-block shrink-0 [background:linear-gradient(90deg,var(--color-skeleton-base)_0%,var(--color-skeleton-highlight)_50%,var(--color-skeleton-base)_100%)] [background-size:200%_100%] [animation:o2-skel-shimmer_1.5s_ease-in-out_infinite]', actionDimsFor(col)]"
+            class="inline-flex items-center justify-center shrink-0 w-8 h-8"
             aria-hidden="true"
-          />
+          >
+            <span
+              :class="['o2-skel-pill inline-block [background:linear-gradient(90deg,var(--color-skeleton-base)_0%,var(--color-skeleton-highlight)_50%,var(--color-skeleton-base)_100%)] [background-size:200%_100%] [animation:o2-skel-shimmer_1.5s_ease-in-out_infinite]', actionDimsFor(col)]"
+            />
+          </span>
         </span>
-        <!-- Data column → chunky rounded bar with shimmer; td text-align positions it -->
+        <!-- The invisible spacer column must stay empty: it collapses to 0 width
+             in the loaded table, so drawing a bar in it would reserve width the
+             real table never uses. -->
+        <template v-else-if="isSpacerCol(col)" />
+        <!-- Data column → chunky rounded-default bar with shimmer; td text-align positions it -->
         <span
           v-else
-          class="o2-skel-pill inline-block h-3 rounded-md align-middle [background:linear-gradient(90deg,var(--color-skeleton-base)_0%,var(--color-skeleton-highlight)_50%,var(--color-skeleton-base)_100%)] [background-size:200%_100%] [animation:o2-skel-shimmer_1.5s_ease-in-out_infinite]"
+          class="o2-skel-pill inline-block h-3 rounded-default align-middle [background:linear-gradient(90deg,var(--color-skeleton-base)_0%,var(--color-skeleton-highlight)_50%,var(--color-skeleton-base)_100%)] [background-size:200%_100%] [animation:o2-skel-shimmer_1.5s_ease-in-out_infinite]"
           :style="{ width: `${cellWidth(r - 1, c)}%` }"
           aria-hidden="true"
         />
@@ -164,23 +221,14 @@ const alignClassFor = (col: Column<any, any>): string => {
   </tbody>
 </template>
 
-<style>
-@keyframes o2-skel-shimmer {
-  0% { background-position: 200% 0; }
-  100% { background-position: -200% 0; }
-}
-
-@keyframes o2-skel-row-in {
-  from {
-    opacity: 0;
-    transform: translateY(2px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
+<style scoped>
+/* keep(keyframes): reduced-motion opt-out for the skeleton animations. The
+   `o2-skel-shimmer` / `o2-skel-row-in` keyframes themselves now live in
+   styles/keyframes.css (shared with TenstackTable + OTablePagination) because
+   the template starts them from `[animation:…]` utilities. This cancel rule
+   stays as CSS: a `motion-reduce:animate-none` utility does not reliably
+   outrank the arbitrary `[animation:…]` utility it has to override. Both
+   selectors are this component's own elements, so scoping is safe. */
 @media (prefers-reduced-motion: reduce) {
   .o2-skel-row {
     opacity: 1;
diff --git a/web/src/lib/core/Table/sub-components/OTablePagination.vue b/web/src/lib/core/Table/sub-components/OTablePagination.vue
index 6c18c7ec70..3e07eeb794 100644
--- a/web/src/lib/core/Table/sub-components/OTablePagination.vue
+++ b/web/src/lib/core/Table/sub-components/OTablePagination.vue
@@ -58,12 +58,15 @@ const pageSizeSelectOptions = computed(() =>
     <!-- Left: bulk actions slot or row count.
          The footer-title typography lives on this wrapper so BOTH the default
          row count and any custom #bottom (actions) slot content inherit it —
-         consumers don't need to remember to add `o2-table-footer-title`. -->
-    <div class="flex items-center gap-2 o2-table-footer-title">
+         font-size / weight / line-height are inherited properties. -->
+    <div
+      class="flex items-center gap-2 text-xs font-normal"
+      data-test="o2-table-pagination-actions"
+    >
       <!-- Loading: always skeleton, regardless of slot/count -->
       <span
         v-if="loading"
-        class="o2-pag-skel inline-block h-3 w-24 rounded-md [background:linear-gradient(90deg,var(--color-skeleton-base)_0%,var(--color-skeleton-highlight)_50%,var(--color-skeleton-base)_100%)] [background-size:200%_100%] [animation:o2-pag-shimmer_1.5s_ease-in-out_infinite]"
+        class="o2-pag-skel inline-block h-3 w-24 rounded-default [background:linear-gradient(90deg,var(--color-skeleton-base)_0%,var(--color-skeleton-highlight)_50%,var(--color-skeleton-base)_100%)] [background-size:200%_100%] [animation:o2-skel-shimmer_1.5s_ease-in-out_infinite]"
         aria-hidden="true"
         data-test="o2-table-pagination-count-skel"
       />
@@ -77,7 +80,7 @@ const pageSizeSelectOptions = computed(() =>
     <div class="flex items-center gap-3">
       <span
         v-if="loading"
-        class="o2-pag-skel inline-block h-3 w-36 rounded-md [background:linear-gradient(90deg,var(--color-skeleton-base)_0%,var(--color-skeleton-highlight)_50%,var(--color-skeleton-base)_100%)] [background-size:200%_100%] [animation:o2-pag-shimmer_1.5s_ease-in-out_infinite]"
+        class="o2-pag-skel inline-block h-3 w-36 rounded-default [background:linear-gradient(90deg,var(--color-skeleton-base)_0%,var(--color-skeleton-highlight)_50%,var(--color-skeleton-base)_100%)] [background-size:200%_100%] [animation:o2-skel-shimmer_1.5s_ease-in-out_infinite]"
         aria-hidden="true"
         data-test="o2-table-pagination-info-skel"
       />
@@ -142,11 +145,15 @@ const pageSizeSelectOptions = computed(() =>
   </div>
 </template>
 
-<style>
-@keyframes o2-pag-shimmer {
-  0% { background-position: 200% 0; }
-  100% { background-position: -200% 0; }
-}
+<style scoped>
+/* keep(keyframes): reduced-motion opt-out for the pagination skeleton shimmer.
+   The keyframe itself was `o2-pag-shimmer`, byte-identical to the table
+   skeleton's `o2-skel-shimmer` — merged into that one name in
+   styles/keyframes.css, which is where it must live because the template starts
+   it from an `[animation:…]` utility. This cancel rule stays as CSS: a
+   `motion-reduce:animate-none` utility does not reliably outrank the arbitrary
+   `[animation:…]` utility it has to override. `.o2-pag-skel` is this
+   component's own element, so scoping is safe. */
 @media (prefers-reduced-motion: reduce) {
   .o2-pag-skel { animation: none; }
 }
diff --git a/web/src/lib/core/ToggleGroup/OToggleGroup.types.ts b/web/src/lib/core/ToggleGroup/OToggleGroup.types.ts
index e706494669..c2eae4bd78 100644
--- a/web/src/lib/core/ToggleGroup/OToggleGroup.types.ts
+++ b/web/src/lib/core/ToggleGroup/OToggleGroup.types.ts
@@ -3,6 +3,7 @@
  */
 
 import type { AcceptableValue } from "reka-ui";
+import type { ComputedRef, InjectionKey } from "vue";
 
 // Re-export item types so callers can import everything from one place if needed
 export type {
@@ -37,6 +38,16 @@ export interface ToggleGroupProps {
   labelPosition?: "left" | "right" | "top";
 }
 
+/**
+ * Provided by OToggleGroup, injected by each OToggleGroupItem so the item knows to
+ * defer its active fill to the group's sliding indicator. True for single-select
+ * groups (which have exactly one item to track); false for multiple-select, where
+ * each item keeps painting its own fill.
+ */
+export const ToggleGroupAnimatedKey: InjectionKey<ComputedRef<boolean>> = Symbol(
+  "o-toggle-group-animated-selection",
+);
+
 export interface ToggleGroupEmits {
   (e: "update:modelValue", value: AcceptableValue | AcceptableValue[]): void;
 }
diff --git a/web/src/lib/core/ToggleGroup/OToggleGroup.vue b/web/src/lib/core/ToggleGroup/OToggleGroup.vue
index 35cf923442..a4e21c8fec 100644
--- a/web/src/lib/core/ToggleGroup/OToggleGroup.vue
+++ b/web/src/lib/core/ToggleGroup/OToggleGroup.vue
@@ -4,8 +4,17 @@ import type {
   ToggleGroupEmits,
   ToggleGroupSlots,
 } from "./OToggleGroup.types";
+import { ToggleGroupAnimatedKey } from "./OToggleGroup.types";
 import { ToggleGroupRoot } from "reka-ui";
-import { computed } from "vue";
+import {
+  computed,
+  provide,
+  ref,
+  watch,
+  nextTick,
+  onMounted,
+  onBeforeUnmount,
+} from "vue";
 
 const props = withDefaults(defineProps<ToggleGroupProps>(), {
   type: "single",
@@ -23,6 +32,108 @@ const hasLabel = computed(
   () => Boolean(slots.label) || props.label !== undefined,
 );
 
+// Sliding-selection indicator ------------------------------------------------
+// On by default for every single-select group (one active item to track). A
+// multiple-select group has no single active item, so it keeps per-item fills.
+const animate = computed(() => props.type === "single");
+
+// Tell descendant items to defer their active fill to the shared indicator.
+provide(ToggleGroupAnimatedKey, animate);
+
+const indicatorRef = ref<HTMLElement | null>(null);
+// Runtime, per-render geometry of the active item — inherently pixel values from
+// layout, so they live in an inline :style binding (there is no token/utility that
+// can express "wherever the active item currently sits"). Mirrors the OToast
+// progress-bar precedent for genuinely runtime style longhands.
+const indicatorStyle = ref<Record<string, string>>({});
+const indicatorVisible = ref(false);
+// True once the indicator holds a real, laid-out position. Until then (and after
+// any reveal) the next placement snaps rather than slides.
+const hasValidPosition = ref(false);
+// Drives whether the transition is present in the *after-change* style: only a
+// genuine selection change turns it on, so mount/reveal/reflow snap into place.
+const transitionOn = ref(false);
+
+let resizeObserver: ResizeObserver | null = null;
+
+/**
+ * Place the indicator over the active item.
+ * @param animated slide to the new position (a real selection change) vs. snap
+ *   instantly (mount, reveal, or reflow — never animate those).
+ */
+const measure = (animated: boolean) => {
+  const indicator = indicatorRef.value;
+  const track = indicator?.parentElement;
+  if (!indicator || !track) return;
+
+  const active = track.querySelector<HTMLElement>('[data-state="on"]');
+  // Skip while the group (or an ancestor) is hidden / not laid out — e.g. a tab
+  // panel that isn't the visible one. Measuring here would store a bogus
+  // 0-position, and revealing later would slide the pill in from the corner
+  // (the "random animation" bug). Keep the last valid position instead.
+  if (!active || active.offsetParent === null) return;
+
+  // Position relative to the track's padding box (where an absolute left:0/top:0
+  // child originates), subtracting the track border so the bordered variant lines
+  // up as exactly as the borderless one.
+  const trackRect = track.getBoundingClientRect();
+  const activeRect = active.getBoundingClientRect();
+  if (activeRect.width === 0) return; // laid out but zero-sized → not ready yet
+  const trackStyle = getComputedStyle(track);
+  const borderLeft = parseFloat(trackStyle.borderLeftWidth) || 0;
+  const borderTop = parseFloat(trackStyle.borderTopWidth) || 0;
+  const x = activeRect.left - trackRect.left - borderLeft;
+  const y = activeRect.top - trackRect.top - borderTop;
+
+  // Transition only when asked AND we already had a valid position (i.e. the group
+  // was already visible). The very first placement always snaps. Setting the flag
+  // and the style in the same tick means the transition property and the transform
+  // update together, so `false` reliably suppresses the slide.
+  transitionOn.value = animated && hasValidPosition.value;
+  hasValidPosition.value = true;
+  indicatorVisible.value = true;
+  indicatorStyle.value = {
+    width: `${activeRect.width}px`,
+    height: `${activeRect.height}px`,
+    transform: `translate(${x}px, ${y}px)`,
+  };
+};
+
+// Slide when the selection changes …
+watch(
+  () => props.modelValue,
+  async () => {
+    if (!animate.value) return;
+    await nextTick();
+    measure(true);
+  },
+);
+
+onMounted(async () => {
+  if (!animate.value) return;
+  await nextTick();
+  measure(false);
+  // … but only snap when item sizes/visibility change (responsive icon-only mode,
+  // items shown/hidden, the group being revealed) — these are not user selections.
+  const track = indicatorRef.value?.parentElement;
+  if (track && typeof ResizeObserver !== "undefined") {
+    resizeObserver = new ResizeObserver(() => measure(false));
+    resizeObserver.observe(track);
+  }
+});
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect();
+  resizeObserver = null;
+});
+
+const indicatorClasses = computed(() => [
+  "pointer-events-none absolute left-0 top-0 rounded-default bg-toggle-item-active-bg",
+  transitionOn.value &&
+    "transition-[transform,width,height] duration-300 ease-out motion-reduce:transition-none",
+  indicatorVisible.value ? "opacity-100" : "opacity-0",
+]);
+
 // Wrapper layout depends on label position: top stacks vertically, left/right
 // sits inline. When there is no label, render only the ToggleGroupRoot.
 const wrapperClasses = computed(() => {
@@ -45,8 +156,8 @@ const wrapperClasses = computed(() => {
   <div v-if="hasLabel" :class="wrapperClasses">
     <span
       :class="[
-        'o-input-label text-sm font-medium select-none leading-tight',
-        disabled && 'o-input-label--disabled',
+        'o-input-label text-compact select-none leading-tight',
+        disabled ? 'font-normal text-input-label-text-disabled' : 'font-medium text-input-label-text',
       ]"
     >
       <slot name="label">{{ label }}</slot>
@@ -59,9 +170,9 @@ const wrapperClasses = computed(() => {
       :orientation="orientation"
       :data-variant="variant"
       :class="[
-        'inline-flex items-stretch',
+        'relative inline-flex items-stretch',
         orientation === 'vertical' ? 'flex-col' : 'flex-row',
-        'bg-[var(--color-toggle-track-bg)] rounded-lg p-0.5',
+        'bg-toggle-track-bg rounded-default p-0.5',
       ]"
       @update:model-value="
         (v) => {
@@ -70,6 +181,14 @@ const wrapperClasses = computed(() => {
         }
       "
     >
+      <!-- Sliding active-selection indicator (opt-in via animatedSelection) -->
+      <div
+        v-if="animate"
+        ref="indicatorRef"
+        aria-hidden="true"
+        :class="indicatorClasses"
+        :style="indicatorStyle"
+      />
       <slot />
     </ToggleGroupRoot>
   </div>
@@ -82,9 +201,9 @@ const wrapperClasses = computed(() => {
     :orientation="orientation"
     :data-variant="variant"
     :class="[
-      'inline-flex items-stretch',
+      'relative inline-flex items-stretch',
       orientation === 'vertical' ? 'flex-col' : 'flex-row',
-      'bg-[var(--color-toggle-track-bg)] rounded-lg p-0.5',
+      'bg-toggle-track-bg rounded-default p-0.5',
       'border border-toggle-border',
     ]"
     @update:model-value="
@@ -94,6 +213,14 @@ const wrapperClasses = computed(() => {
       }
     "
   >
+    <!-- Sliding active-selection indicator (opt-in via animatedSelection) -->
+    <div
+      v-if="animate"
+      ref="indicatorRef"
+      aria-hidden="true"
+      :class="indicatorClasses"
+      :style="indicatorStyle"
+    />
     <slot />
   </ToggleGroupRoot>
 </template>
diff --git a/web/src/lib/core/ToggleGroup/OToggleGroupItem.vue b/web/src/lib/core/ToggleGroup/OToggleGroupItem.vue
index 0c20e19ffb..57ef121bc5 100644
--- a/web/src/lib/core/ToggleGroup/OToggleGroupItem.vue
+++ b/web/src/lib/core/ToggleGroup/OToggleGroupItem.vue
@@ -3,12 +3,18 @@ import type {
   ToggleGroupItemProps,
   ToggleGroupItemSlots,
 } from "./OToggleGroup.types";
+import { ToggleGroupAnimatedKey } from "./OToggleGroup.types";
 import { ToggleGroupItem } from "reka-ui";
+import { computed, inject } from "vue";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
 
 defineOptions({ inheritAttrs: false });
 
+// Opt-in from the parent OToggleGroup: when set, the active item runs the sheen.
+const animatedSelection = inject(ToggleGroupAnimatedKey, undefined);
+const isAnimated = computed(() => Boolean(animatedSelection?.value));
+
 const props = withDefaults(defineProps<ToggleGroupItemProps>(), {
   disabled: false,
   size: "md",
@@ -48,15 +54,19 @@ const iconSize: Record<NonNullable<ToggleGroupItemProps["size"]>, "xs" | "sm"> =
         sizeClasses[props.size],
         // Base state - inactive (transparent on track)
         'bg-toggle-item-bg text-toggle-item-text font-medium whitespace-nowrap',
-        'rounded-md',
+        'rounded-default',
         'transition-all duration-150',
         'outline-none cursor-pointer',
-        // Hover (inactive only)
-        'hover:bg-toggle-item-hover-bg',
-        // Active / pressed state (data-state=on) — white chip with shadow
-        'data-[state=on]:bg-toggle-item-active-bg',
+        // Hover (inactive only) — scoped to data-state=off so hovering the
+        // active item never repaints over the sliding indicator / active fill.
+        'data-[state=off]:hover:bg-toggle-item-hover-bg',
+        // Active fill: normally painted per-item. When the group animates the
+        // selection (opt-in), a single sliding indicator paints the fill instead,
+        // so suppress the per-item background and just keep the active text colour.
+        !isAnimated && 'data-[state=on]:bg-toggle-item-active-bg',
         'data-[state=on]:text-toggle-item-active-text',
-        'data-[state=on]:shadow-sm',
+        // Sit above the sliding indicator so the icon/label stay readable.
+        isAnimated && 'relative z-10',
         // Focus ring
         'focus-visible:ring-2 focus-visible:ring-toggle-focus-ring focus-visible:ring-inset',
         // Disabled — cursor is on the wrapper span; pointer-events-none prevents hover/active styles
diff --git a/web/src/lib/core/Typography/OText.types.ts b/web/src/lib/core/Typography/OText.types.ts
index 2d43fd3790..d8db199256 100644
--- a/web/src/lib/core/Typography/OText.types.ts
+++ b/web/src/lib/core/Typography/OText.types.ts
@@ -31,7 +31,7 @@ export type TextVariant =
   | "label"
   /** Metadata: timestamps, counts, hints. 12px normal secondary. */
   | "meta"
-  /** Monospace: cron expressions, IDs, field names. 12px IBM Plex Mono. */
+  /** Monospace: cron expressions, IDs, field names. 12px Geist Mono. */
   | "mono";
 
 export interface TextProps {
diff --git a/web/src/lib/core/Typography/OText.vue b/web/src/lib/core/Typography/OText.vue
index 1f3a84398e..159e35b66b 100644
--- a/web/src/lib/core/Typography/OText.vue
+++ b/web/src/lib/core/Typography/OText.vue
@@ -55,7 +55,7 @@ const variantClasses: Record<NonNullable<TextProps["variant"]>, string> = {
 
   // Section group label (gray eyebrow). Recedes via color + size, not weight.
   "section": [
-    "text-[11.5px] font-medium",
+    "text-2xs font-medium",
     "text-typography-section",
     "leading-none",
   ].join(" "),
@@ -96,11 +96,11 @@ const variantClasses: Record<NonNullable<TextProps["variant"]>, string> = {
   ].join(" "),
 
   // Monospace: cron expressions, stream names (non-linked), field paths, IDs.
-  // Uses IBM Plex Mono via the --font-mono CSS custom property.
+  // Uses Geist Mono via the --font-mono CSS custom property.
   // For actual executable code / query content, prefer OCode instead.
   "mono": [
-    "text-xs [font-family:var(--font-mono)]",
-    // HANDOFF §2.1: tabular figures + tight tracking for IDs/counts/timestamps.
+    "text-xs font-mono",
+    // tabular figures + tight tracking for IDs/counts/timestamps.
     "[font-feature-settings:'tnum'] tracking-[-0.2px]",
     "text-typography-mono",
     "leading-none",
diff --git a/web/src/lib/data/Timeline/OTimeline.vue b/web/src/lib/data/Timeline/OTimeline.vue
index 51e61f1f9e..2102082b8a 100644
--- a/web/src/lib/data/Timeline/OTimeline.vue
+++ b/web/src/lib/data/Timeline/OTimeline.vue
@@ -8,19 +8,17 @@ defineSlots<TimelineSlots>();
 
 <template>
   <ol
-    class="relative list-none m-0 p-0"
+    class="o-timeline relative list-none m-0 p-0"
     v-bind="$attrs"
   >
     <slot />
   </ol>
 </template>
 
-<style>
-/*
- * Hide the connecting line for the last OTimelineItem.
- * Targets the .timeline-connector div rendered inside OTimelineItem.
- */
-li:last-child .timeline-connector {
+<style scoped>
+/* keep(complex-state): :last-child structural rule hiding the connector line that
+   OTimelineItem renders inside the final item (child DOM → :deep). */
+.o-timeline > li:last-child :deep(.timeline-connector) {
   display: none;
 }
 </style>
diff --git a/web/src/lib/data/Timeline/OTimelineItem.types.ts b/web/src/lib/data/Timeline/OTimelineItem.types.ts
index 0f696c03c8..4bd06ebd29 100644
--- a/web/src/lib/data/Timeline/OTimelineItem.types.ts
+++ b/web/src/lib/data/Timeline/OTimelineItem.types.ts
@@ -1,13 +1,13 @@
 /**
  * Visual emphasis variants — map to dot background colours.
  *
- * | Variant       | Token                          | Legacy color prop        |
- * |---------------|--------------------------------|--------------------------|
- * | primary       | --color-timeline-dot-primary   | color="primary" (default)|
- * | success       | --color-timeline-dot-success   | color="positive"         |
- * | destructive   | --color-timeline-dot-destructive| color="negative"        |
- * | info          | --color-timeline-dot-info      | color="blue"             |
- * | muted         | --color-timeline-dot-muted     | color="grey"             |
+ * | Variant       | Token                            |
+ * |---------------|----------------------------------|
+ * | primary       | --color-timeline-dot-primary     |
+ * | success       | --color-timeline-dot-success     |
+ * | destructive   | --color-timeline-dot-destructive |
+ * | info          | --color-timeline-dot-info        |
+ * | muted         | --color-timeline-dot-muted       |
  */
 export type TimelineItemVariant =
   | "primary"
diff --git a/web/src/lib/data/Timeline/OTimelineItem.vue b/web/src/lib/data/Timeline/OTimelineItem.vue
index bee73f1178..92f5b3c25f 100644
--- a/web/src/lib/data/Timeline/OTimelineItem.vue
+++ b/web/src/lib/data/Timeline/OTimelineItem.vue
@@ -51,7 +51,7 @@ const isOIcon = computed<boolean>(() =>
         />
         <span
           v-else-if="icon"
-          class="material-icons text-[14px] leading-none text-timeline-dot-fg select-none"
+          class="material-icons text-sm leading-none text-timeline-dot-fg select-none"
         >{{ icon }}</span>
       </div>
 
@@ -69,7 +69,7 @@ const isOIcon = computed<boolean>(() =>
     <div class="flex-1 min-w-0 pt-0.5 pb-1">
       <p
         v-if="title"
-        class="m-0 text-sm font-medium leading-snug text-text-primary"
+        class="m-0 text-sm font-medium leading-snug text-text-heading"
       >
         {{ title }}
       </p>
diff --git a/web/src/lib/data/Tree/OTreeNode.vue b/web/src/lib/data/Tree/OTreeNode.vue
index 76e80278be..c278b9d858 100644
--- a/web/src/lib/data/Tree/OTreeNode.vue
+++ b/web/src/lib/data/Tree/OTreeNode.vue
@@ -110,7 +110,7 @@ function onTickChange(newVal: CheckboxModelValue) {
   >
     <!-- Node row ────────────────────────────────────────────────────── -->
     <div
-      class="flex items-center gap-1 min-h-7 px-1 rounded select-none transition-colors duration-100"
+      class="flex items-center gap-1 min-h-7 px-1 rounded-default select-none transition-colors duration-100"
       :class="
         !isLeaf
           ? 'cursor-pointer hover:bg-tree-node-hover-bg'
@@ -152,21 +152,17 @@ function onTickChange(newVal: CheckboxModelValue) {
       -->
       <span
         v-else
-        class="relative shrink-0 self-stretch opacity-35"
-        style="width: 1rem;"
+        class="relative shrink-0 self-stretch opacity-35 w-4"
         aria-hidden="true"
       >
+        <!-- Elbow connector. The 0.75px offsets are half the 1.5px hairline, so
+             the stroke lands on the same physical line as the sibling connectors.
+             `- -0.75px` is deliberate and means `+ 0.75px`: Tailwind's candidate
+             scanner drops any class containing a literal `+`, so `w-[calc(…+…)]`
+             silently compiles to NOTHING. Subtracting a negative is the only form
+             that survives extraction. Verified against the compiled stylesheet. -->
         <span
-          style="
-            position: absolute;
-            left: calc(-0.75rem - 0.75px);
-            top: 0;
-            width: calc(1.75rem + 0.75px);
-            height: calc(50% + 0.75px);
-            border-left: 1.5px solid currentColor;
-            border-bottom: 1.5px solid currentColor;
-            border-bottom-left-radius: 3px;
-          "
+          class="absolute top-0 left-[calc(-0.75rem_-_0.75px)] w-[calc(1.75rem_-_-0.75px)] h-[calc(50%_-_-0.75px)] border-l-[1.5px] border-b-[1.5px] rounded-bl-default"
         />
       </span>
 
@@ -182,7 +178,7 @@ function onTickChange(newVal: CheckboxModelValue) {
 
       <!-- Label -->
       <span
-        class="text-sm text-text-primary leading-snug truncate"
+        class="text-sm text-text-body leading-snug truncate"
         :class="isDisabled ? 'opacity-50' : ''"
       >
         {{ node.label }}
diff --git a/web/src/lib/feedback/Banner/OBanner.vue b/web/src/lib/feedback/Banner/OBanner.vue
index 38f2a7a0d9..bbfc654889 100644
--- a/web/src/lib/feedback/Banner/OBanner.vue
+++ b/web/src/lib/feedback/Banner/OBanner.vue
@@ -32,18 +32,18 @@ const showIconArea = computed(() => !!props.icon || hasIconSlot.value);
 const variantClass = computed(() => {
   switch (props.variant) {
     case "info":
-      return "bg-(--color-banner-info-bg) border border-(--color-banner-info-border) text-(--color-banner-info-text)";
+      return "bg-banner-info-bg border border-banner-info-border text-banner-info-text";
     case "success":
-      return "bg-(--color-banner-success-bg) border border-(--color-banner-success-border) text-(--color-banner-success-text)";
+      return "bg-banner-success-bg border border-banner-success-border text-banner-success-text";
     case "warning":
-      return "bg-(--color-banner-warning-bg) border border-(--color-banner-warning-border) border-l-4 border-l-(--color-banner-warning-border) text-(--color-banner-warning-text)";
+      return "bg-banner-warning-bg border border-banner-warning-border border-l-4 border-l-banner-warning-border text-banner-warning-text";
     case "error":
-      return "bg-(--color-banner-error-bg) text-(--color-banner-error-text)";
+      return "bg-banner-error-bg text-banner-error-text";
     // Tinted error for hints/insights — solid `error` stays for hard failures.
     case "error-soft":
-      return "bg-(--color-banner-error-soft-bg) border border-(--color-banner-error-soft-border) border-l-4 border-l-(--color-banner-error-soft-border) text-(--color-banner-error-soft-text)";
+      return "bg-banner-error-soft-bg border border-banner-error-soft-border border-l-4 border-l-banner-error-soft-border text-banner-error-soft-text";
     default:
-      return "bg-(--color-banner-default-bg) text-(--color-banner-default-text)";
+      return "bg-banner-default-bg text-banner-default-text";
   }
 });
 </script>
@@ -53,7 +53,7 @@ const variantClass = computed(() => {
     :role="ariaRole"
     :data-test="dataTest"
     :class="[
-      'flex rounded-md',
+      'flex rounded-default',
       inlineActions ? 'flex-row items-center gap-3' : 'flex-col gap-2',
       dense ? 'p-2' : 'p-4',
       variantClass,
diff --git a/web/src/lib/feedback/InnerLoading/OInnerLoading.types.ts b/web/src/lib/feedback/InnerLoading/OInnerLoading.types.ts
index bc5052602b..4db00dd556 100644
--- a/web/src/lib/feedback/InnerLoading/OInnerLoading.types.ts
+++ b/web/src/lib/feedback/InnerLoading/OInnerLoading.types.ts
@@ -10,4 +10,14 @@ export interface InnerLoadingProps {
   label?: string;
   /** Spinner size. Default: "xs" */
   size?: InnerLoadingSize;
+  /**
+   * Paint the dimming scrim behind the spinner. Default: true.
+   *
+   * The scrim is `--color-inner-loading-overlay` — 70% of `--color-surface-base`
+   * — so it only reads correctly over base-surface content it is actually
+   * covering. Set false when this is a placeholder in empty space rather than an
+   * overlay: with nothing behind it the scrim dims nothing, and on any surface
+   * other than base it just paints a pale box.
+   */
+  scrim?: boolean;
 }
diff --git a/web/src/lib/feedback/InnerLoading/OInnerLoading.vue b/web/src/lib/feedback/InnerLoading/OInnerLoading.vue
index d9568a9c86..7dcef65b02 100644
--- a/web/src/lib/feedback/InnerLoading/OInnerLoading.vue
+++ b/web/src/lib/feedback/InnerLoading/OInnerLoading.vue
@@ -4,6 +4,7 @@ import OSpinner from "../Spinner/OSpinner.vue";
 
 withDefaults(defineProps<InnerLoadingProps>(), {
   size: "xs",
+  scrim: true,
 });
 </script>
 
@@ -16,7 +17,8 @@ withDefaults(defineProps<InnerLoadingProps>(), {
   >
     <div
       v-if="showing"
-      class="absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 bg-inner-loading-overlay"
+      class="absolute inset-0 z-10 flex flex-col items-center justify-center gap-2"
+      :class="scrim ? 'bg-inner-loading-overlay' : ''"
       role="status"
       aria-live="polite"
       :aria-label="label ?? 'Loading'"
diff --git a/web/src/lib/feedback/Skeleton/OSkeleton.spec.ts b/web/src/lib/feedback/Skeleton/OSkeleton.spec.ts
index ebb7519c7e..ea996f2cbb 100644
--- a/web/src/lib/feedback/Skeleton/OSkeleton.spec.ts
+++ b/web/src/lib/feedback/Skeleton/OSkeleton.spec.ts
@@ -9,9 +9,9 @@ describe("OSkeleton", () => {
   });
 
   describe("type prop", () => {
-    it("applies rounded-md and w-full for type=rect (default)", () => {
+    it("applies rounded-default and w-full for type=rect (default)", () => {
       const wrapper = mount(OSkeleton);
-      expect(wrapper.find("span").classes()).toContain("rounded-md");
+      expect(wrapper.find("span").classes()).toContain("rounded-default");
       expect(wrapper.find("span").classes()).toContain("w-full");
     });
 
@@ -21,9 +21,9 @@ describe("OSkeleton", () => {
       expect(wrapper.find("span").classes()).toContain("aspect-square");
     });
 
-    it("applies rounded and h-4 for type=text", () => {
+    it("applies rounded-default and h-4 for type=text", () => {
       const wrapper = mount(OSkeleton, { props: { type: "text" } });
-      expect(wrapper.find("span").classes()).toContain("rounded");
+      expect(wrapper.find("span").classes()).toContain("rounded-default");
       expect(wrapper.find("span").classes()).toContain("h-4");
     });
   });
@@ -62,4 +62,49 @@ describe("OSkeleton", () => {
       expect(wrapper.find("[role='status']").attributes("aria-label")).toBe("Loading");
     });
   });
+
+  // Tailwind resolves conflicts by CSS source order, not class order, so a
+  // baked-in w-full silently beat every caller width — sized skeletons rendered
+  // full-bleed app-wide. The default must stand down when the caller sizes it.
+  describe("caller size overrides", () => {
+    it("should drop the default w-full when the caller sets a width", () => {
+      const wrapper = mount(OSkeleton, { attrs: { class: "w-1/2" } });
+      const classes = wrapper.find("span").classes();
+      expect(classes).not.toContain("w-full");
+      expect(classes).toContain("w-1/2");
+    });
+
+    it("should drop the default w-full for an arbitrary width value", () => {
+      const wrapper = mount(OSkeleton, { attrs: { class: "w-[0.875rem] h-[0.875rem]" } });
+      expect(wrapper.find("span").classes()).not.toContain("w-full");
+    });
+
+    it("should drop the default w-full when the caller uses flex-1", () => {
+      const wrapper = mount(OSkeleton, { attrs: { class: "flex-1" } });
+      expect(wrapper.find("span").classes()).not.toContain("w-full");
+    });
+
+    it("should drop only h-4 for type=text when the caller sets height alone", () => {
+      const wrapper = mount(OSkeleton, { props: { type: "text" }, attrs: { class: "h-3" } });
+      const classes = wrapper.find("span").classes();
+      expect(classes).not.toContain("h-4");
+      expect(classes).toContain("w-full");
+      expect(classes).toContain("rounded-default");
+    });
+
+    it("should keep both defaults for type=text when the caller sets neither axis", () => {
+      const wrapper = mount(OSkeleton, { props: { type: "text" }, attrs: { class: "shrink-0" } });
+      const classes = wrapper.find("span").classes();
+      expect(classes).toContain("w-full");
+      expect(classes).toContain("h-4");
+    });
+
+    it("should never impose an axis on type=circle, which derives height from width", () => {
+      const wrapper = mount(OSkeleton, { props: { type: "circle" }, attrs: { class: "w-4" } });
+      const classes = wrapper.find("span").classes();
+      expect(classes).not.toContain("w-full");
+      expect(classes).not.toContain("h-4");
+      expect(classes).toContain("aspect-square");
+    });
+  });
 });
diff --git a/web/src/lib/feedback/Skeleton/OSkeleton.vue b/web/src/lib/feedback/Skeleton/OSkeleton.vue
index 89182b4219..8e56e76399 100644
--- a/web/src/lib/feedback/Skeleton/OSkeleton.vue
+++ b/web/src/lib/feedback/Skeleton/OSkeleton.vue
@@ -1,17 +1,57 @@
 <script setup lang="ts">
 import type { SkeletonProps } from "./OSkeleton.types";
-import { computed } from "vue";
+import { computed, useAttrs } from "vue";
 
 const props = withDefaults(defineProps<SkeletonProps>(), {
   type: "rect",
   animation: "wave",
 });
 
-const shapeClasses: Record<NonNullable<SkeletonProps["type"]>, string> = {
-  rect: "rounded-md w-full",
-  circle: "rounded-full aspect-square",
-  text: "rounded w-full h-4",
-};
+const attrs = useAttrs();
+
+/* The caller's `class`, flattened. Vue hands `class` through as a string, an
+   array, or an object depending on how it was bound. */
+const callerClass = computed(() => {
+  const c = attrs.class as unknown;
+  if (typeof c === "string") return c;
+  if (Array.isArray(c)) return c.filter((x) => typeof x === "string").join(" ");
+  if (c && typeof c === "object")
+    return Object.entries(c)
+      .filter(([, on]) => on)
+      .map(([k]) => k)
+      .join(" ");
+  return "";
+});
+
+/* Tailwind resolves same-property conflicts by CSS source order, NOT by the
+   order classes appear on the element. So a baked-in `w-full` beats a caller's
+   `w-3/4` / `w-3.5` / `flex-1` every time, and the caller silently gets a
+   full-width block. That made every sized OSkeleton render full-bleed and is why
+   a rival SkeletonBox primitive (with real width/height props) grew alongside it.
+   Rather than ship a class-merge dependency, stand the default down whenever the
+   caller expresses the same axis themselves. */
+const setsWidth = computed(() =>
+  /(?:^|\s)-?(?:w-|size-|flex-1|flex-auto|grow|basis-)/.test(callerClass.value),
+);
+const setsHeight = computed(() =>
+  /(?:^|\s)-?(?:h-|size-)/.test(callerClass.value),
+);
+
+const shapeClasses = computed<string[]>(() => {
+  switch (props.type ?? "rect") {
+    case "circle":
+      // aspect-square derives height from width; never impose either axis.
+      return ["rounded-full", "aspect-square"];
+    case "text":
+      return [
+        "rounded-default",
+        ...(setsWidth.value ? [] : ["w-full"]),
+        ...(setsHeight.value ? [] : ["h-4"]),
+      ];
+    default:
+      return ["rounded-default", ...(setsWidth.value ? [] : ["w-full"])];
+  }
+});
 
 const animationClasses: Record<NonNullable<SkeletonProps["animation"]>, string> = {
   pulse: "animate-pulse",
@@ -21,7 +61,7 @@ const animationClasses: Record<NonNullable<SkeletonProps["animation"]>, string>
 
 const classes = computed(() => [
   "block bg-skeleton-base",
-  shapeClasses[props.type ?? "rect"],
+  ...shapeClasses.value,
   animationClasses[props.animation ?? "pulse"],
 ]);
 </script>
@@ -36,20 +76,10 @@ const classes = computed(() => [
   />
 </template>
 
-<style>
-/*
-  translateX shimmer — fundamentally more natural than background-position.
-
-  Why this feels better:
-  • The base is a flat solid colour (bg-skeleton-base). No moving gradient.
-  • A ::after overlay physically slides across with translateX. This is
-    GPU-composited (no layout cost) and maps 1:1 to visual motion.
-  • ease-in-out on translateX mimics how light actually reflects off a surface —
-    it eases in and out naturally. (ease-in-out was wrong for background-position
-    but is correct here.)
-  • The shimmer beam is a 105° tilted gradient — a slight diagonal makes it
-    read as a gloss catch, not a mechanical wipe.
-*/
+<style scoped>
+/* keep(generated-content): translateX shimmer overlay (::after) + its keyframes.
+   A GPU-composited beam physically slides across the flat base — no moving
+   background-position — which reads as a natural gloss catch. */
 .skeleton-wave::after {
   content: "";
   position: absolute;
@@ -58,7 +88,7 @@ const classes = computed(() => [
     90deg,
     transparent        0%,
     transparent       30%,
-    var(--color-skeleton-shimmer, rgba(255, 255, 255, 0.8)) 50%,
+    var(--color-skeleton-shimmer) 50%,
     transparent       70%,
     transparent      100%
   );
diff --git a/web/src/lib/feedback/Toast/OToast.vue b/web/src/lib/feedback/Toast/OToast.vue
index c09ca5316c..6496334a6f 100644
--- a/web/src/lib/feedback/Toast/OToast.vue
+++ b/web/src/lib/feedback/Toast/OToast.vue
@@ -191,7 +191,7 @@ onUnmounted(() => {
     <!-- Inner shell: carries all visual styling + overflow-hidden to clip the progress bar -->
     <div
       :class="[
-        'relative flex gap-2 rounded-lg overflow-hidden p-3 shadow-toast w-full',
+        'relative flex gap-2 rounded-default overflow-hidden p-3 shadow-toast w-full',
         title ? 'items-start' : 'items-center',
         variantClasses[variant ?? 'default'],
       ]"
@@ -258,7 +258,7 @@ onUnmounted(() => {
             v-if="action"
             type="button"
             :class="[
-              'inline-flex items-center gap-1 justify-center rounded px-2.5 py-0.5 text-xs font-semibold shadow-sm transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1',
+              'inline-flex items-center gap-1 justify-center rounded-default px-2.5 py-0.5 text-xs font-semibold transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1',
               actionSucceeded
                 ? 'bg-toast-success-icon text-white focus-visible:ring-toast-success-icon'
                 : 'bg-toast-action-text text-white hover:bg-toast-action-hover focus-visible:ring-toast-action-text',
@@ -313,13 +313,13 @@ onUnmounted(() => {
 
       <!-- Dismiss button -->
       <ToastClose
-        :class="['shrink-0 flex items-center rounded p-0.5 text-toast-fg-secondary hover:text-toast-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-toast-info-border', title ? 'self-start' : 'self-center']"
+        :class="['shrink-0 flex items-center rounded-default p-0.5 text-toast-fg-secondary hover:text-toast-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-toast-info-border', title ? 'self-start' : 'self-center']"
         aria-label="Dismiss notification"
       >
         <OIcon name="close" size="sm" class="size-4" aria-hidden="true" />
       </ToastClose>
 
-      <!-- Timeout progress bar — clipped by parent overflow-hidden + rounded-lg.
+      <!-- Timeout progress bar — clipped by parent overflow-hidden + rounded-default.
            :key on the outer div ensures Vue remounts it (restarting the CSS animation)
            whenever timerKey increments (i.e. a duplicate toast resets the timer). -->
       <div
@@ -329,7 +329,7 @@ onUnmounted(() => {
         aria-hidden="true"
       >
         <div
-          :class="['h-full w-full origin-left [animation:toast-shrink_linear_forwards]', progressBarColorClasses[variant ?? 'default']]"
+          :class="['toast-progress-bar h-full w-full origin-left', progressBarColorClasses[variant ?? 'default']]"
           :style="{
             animationDuration: `${timeout}ms`,
             animationPlayState: isPaused ? 'paused' : 'running',
@@ -340,8 +340,18 @@ onUnmounted(() => {
   </ToastRoot>
 </template>
 
-<style>
-@keyframes toast-shrink {
+<style scoped>
+/* keep(keyframes): the auto-dismiss progress bar is used only by this toast. The
+   `animation` shorthand is declared here, not as a template `[animation:…]`
+   utility, so Vue's scoped compiler renames the keyframe and this reference
+   together. Duration and play-state stay as inline `:style` longhands because
+   they are runtime values (per-toast timeout, pause-on-hover) — inline longhands
+   override this shorthand's initial values, so the pairing is intentional. */
+.toast-progress-bar {
+  animation: shrink linear forwards;
+}
+
+@keyframes shrink {
   from {
     transform: scaleX(1);
   }
@@ -350,3 +360,4 @@ onUnmounted(() => {
   }
 }
 </style>
+
diff --git a/web/src/lib/forms/Checkbox/OCheckbox.types.ts b/web/src/lib/forms/Checkbox/OCheckbox.types.ts
index fbed78e016..30667e8fa4 100644
--- a/web/src/lib/forms/Checkbox/OCheckbox.types.ts
+++ b/web/src/lib/forms/Checkbox/OCheckbox.types.ts
@@ -26,7 +26,7 @@ export interface CheckboxProps {
    * of the group's checked-values array.
    */
   value?: CheckboxPrimitive;
-  /** q-checkbox compatibility alias for `value` */
+  /** Compatibility alias for `value` */
   val?: CheckboxPrimitive;
   /** Accessible label rendered next to the checkbox */
   label?: string;
diff --git a/web/src/lib/forms/Checkbox/OCheckbox.vue b/web/src/lib/forms/Checkbox/OCheckbox.vue
index 4295531540..6065b8b230 100644
--- a/web/src/lib/forms/Checkbox/OCheckbox.vue
+++ b/web/src/lib/forms/Checkbox/OCheckbox.vue
@@ -157,7 +157,7 @@ const labelSizeClasses: Record<NonNullable<CheckboxProps["size"]>, string> = {
       :data-state="dataState"
       :disabled="isDisabled"
       :class="[
-        'shrink-0 rounded-sm border cursor-[inherit]',
+        'shrink-0 rounded-checkbox border cursor-[inherit]',
         boxSizeClasses[size ?? 'md'],
         // Base / unchecked
         'bg-checkbox-bg border-checkbox-border',
@@ -225,8 +225,8 @@ const labelSizeClasses: Record<NonNullable<CheckboxProps["size"]>, string> = {
     <span
       v-if="$slots.label || label"
       :class="[
-        'o-input-label text-sm font-semibold select-none leading-tight',
-        isDisabled && 'o-input-label--disabled',
+        'o-input-label text-compact select-none leading-tight',
+        isDisabled ? 'font-normal text-input-label-text-disabled' : 'font-medium text-input-label-text',
       ]"
     >
       <slot name="label">{{ label }}</slot><span v-if="required" aria-hidden="true">&nbsp;*</span>
diff --git a/web/src/lib/forms/Color/OColor.vue b/web/src/lib/forms/Color/OColor.vue
index 5cd5671b70..c61f08694d 100644
--- a/web/src/lib/forms/Color/OColor.vue
+++ b/web/src/lib/forms/Color/OColor.vue
@@ -119,7 +119,7 @@ function handleClear() {
 }
 
 const wrapperClasses = computed(() => [
-  "flex items-stretch w-full rounded-md border transition-[color,background-color,border-color,box-shadow] duration-150",
+  "flex items-stretch w-full rounded-default border transition-[color,background-color,border-color,box-shadow] duration-150",
   "ring-offset-1 ring-offset-surface-base",
   "bg-datepicker-bg",
   hasError.value
@@ -158,12 +158,12 @@ const wrapperClasses = computed(() => [
           type="button"
           :disabled="disabled || readonly"
           :aria-label="label ? `${label} — pick color` : 'Pick color'"
-          class="flex items-center ps-2 pe-1 shrink-0 outline-none ring-offset-1 ring-offset-surface-base focus-visible:ring-2 focus-visible:ring-datepicker-focus-ring transition-[box-shadow] duration-150 rounded-s-md"
+          class="flex items-center ps-2 pe-1 shrink-0 outline-none ring-offset-1 ring-offset-surface-base focus-visible:ring-2 focus-visible:ring-datepicker-focus-ring transition-[box-shadow] duration-150 rounded-s-default"
           :class="disabled || readonly ? 'cursor-not-allowed' : 'cursor-pointer'"
         >
           <span
             :class="[
-              'rounded border border-datepicker-border shadow-sm',
+              'rounded-default border border-datepicker-border',
               swatchSize[size ?? 'md'],
             ]"
             :style="{ background: swatchHex }"
@@ -175,8 +175,7 @@ const wrapperClasses = computed(() => [
         <PopoverContent
           :side-offset="6"
           align="start"
-          class="z-[10001] rounded-lg border shadow-md p-3 flex flex-col gap-3 bg-colorpicker-popup-bg border-colorpicker-popup-border"
-          style="width: 220px"
+          class="z-[10001] rounded-default border shadow-md p-3 flex flex-col gap-3 bg-colorpicker-popup-bg border-colorpicker-popup-border w-55"
         >
           <!-- Saturation / Brightness area -->
           <!-- ColorAreaRoot passes gradient styles via scoped slot -->
@@ -185,8 +184,7 @@ const wrapperClasses = computed(() => [
             color-space="hsb"
             x-channel="saturation"
             y-channel="brightness"
-            class="w-full rounded overflow-hidden relative"
-            style="height: 140px"
+            class="w-full rounded-default overflow-hidden relative h-35"
             @update:model-value="handlePickerChange"
             v-slot="{ style: areaStyle }"
           >
@@ -201,10 +199,10 @@ const wrapperClasses = computed(() => [
             :model-value="pickerColor"
             color-space="hsb"
             channel="hue"
-            class="relative flex items-center w-full h-4 rounded"
+            class="relative flex items-center w-full h-4 rounded-default"
             @update:model-value="handlePickerChange"
           >
-            <ColorSliderTrack class="w-full h-3 rounded overflow-hidden" />
+            <ColorSliderTrack class="w-full h-3 rounded-default overflow-hidden" />
             <ColorSliderThumb
               class="size-4 rounded-full border-2 border-colorpicker-thumb shadow outline-none ring-offset-1 ring-offset-surface-base focus-visible:ring-2 focus-visible:ring-datepicker-focus-ring transition-[box-shadow] duration-150"
             />
@@ -217,7 +215,7 @@ const wrapperClasses = computed(() => [
             maxlength="7"
             placeholder="#000000"
             :disabled="disabled"
-            class="w-full rounded border px-2 py-1 text-xs font-mono outline-none text-datepicker-text placeholder:text-datepicker-placeholder bg-datepicker-bg border-datepicker-border focus:border-datepicker-focus-border"
+            class="w-full rounded-default border px-2 py-1 text-xs font-mono outline-none text-datepicker-text placeholder:text-datepicker-placeholder bg-datepicker-bg border-datepicker-border focus:border-datepicker-focus-border"
             @input="handleText"
           />
         </PopoverContent>
diff --git a/web/src/lib/forms/Combobox/OCombobox.vue b/web/src/lib/forms/Combobox/OCombobox.vue
index fcb5305025..3a76228875 100644
--- a/web/src/lib/forms/Combobox/OCombobox.vue
+++ b/web/src/lib/forms/Combobox/OCombobox.vue
@@ -199,8 +199,8 @@ const hasInsideLabel = computed(
       v-if="(hasLabel || $slots.tooltip) && labelPosition !== 'inside'"
       :for="inputId"
       :class="[
-        'o-input-label text-sm font-semibold leading-tight flex items-center gap-1',
-        disabled && 'o-input-label--disabled',
+        'o-input-label text-compact leading-tight flex items-center gap-1',
+        disabled ? 'font-normal text-input-label-text-disabled' : 'font-medium text-input-label-text',
       ]"
     >
       <slot name="label">{{ label }}</slot><span v-if="required" aria-hidden="true" class="select-none">*</span>
@@ -225,7 +225,7 @@ const hasInsideLabel = computed(
         <!-- Inside label -->
         <span
           v-if="hasInsideLabel"
-          class="absolute top-1 start-3 text-[10px] leading-none text-input-placeholder select-none pointer-events-none z-10"
+          class="absolute top-1 start-3 text-3xs leading-none text-input-placeholder select-none pointer-events-none z-10"
         >
           <slot name="label">{{ label }}</slot><span v-if="required" aria-hidden="true">&nbsp;*</span>
         </span>
@@ -237,7 +237,7 @@ const hasInsideLabel = computed(
           :tabindex="inputTabindex"
           auto-complete="off"
           :class="[
-            'w-full rounded-md border ps-3 pe-3',
+            'w-full rounded-default border ps-3 pe-3',
             'bg-input-bg text-input-text',
             'placeholder:text-input-placeholder',
             'outline-none transition-[border-color,box-shadow] duration-150',
@@ -261,7 +261,7 @@ const hasInsideLabel = computed(
           :class="[
             'z-10001 min-w-(--reka-combobox-trigger-width) max-w-(--reka-combobox-trigger-width) w-(--reka-combobox-trigger-width)',
             'max-h-60 overflow-hidden',
-            'rounded-md border shadow-lg',
+            'rounded-default border shadow-lg',
             'bg-select-content-bg border-select-content-border',
             'p-1',
             // Clip-path reveal: unveiled at full size from its trigger edge (no
@@ -289,7 +289,7 @@ const hasInsideLabel = computed(
               :class="[
                 'relative flex items-start gap-2 w-full',
                 'ps-3 pe-8 py-1.5 text-sm',
-                'text-select-item-text rounded-sm',
+                'text-select-item-text rounded-default',
                 'cursor-pointer select-none outline-none',
                 'transition-colors duration-100',
                 'data-highlighted:bg-select-item-hover-bg',
diff --git a/web/src/lib/forms/Date/ODate.vue b/web/src/lib/forms/Date/ODate.vue
index 3effe27682..8b8776e39f 100644
--- a/web/src/lib/forms/Date/ODate.vue
+++ b/web/src/lib/forms/Date/ODate.vue
@@ -124,7 +124,7 @@ const heightClasses: Record<NonNullable<DateProps["size"]>, string> = {
 };
 
 const wrapperClasses = computed(() => [
-  "flex items-center w-full rounded-md border transition-[color,background-color,border-color,box-shadow] duration-150",
+  "flex items-center w-full rounded-default border transition-[color,background-color,border-color,box-shadow] duration-150",
   "ring-offset-1 ring-offset-surface-base",
   "bg-datepicker-bg",
   hasError.value
@@ -199,7 +199,7 @@ const wrapperClasses = computed(() => [
                 :class="[
                   'text-datepicker-text',
                   seg.part !== 'literal'
-                    ? 'rounded-sm px-px outline-none tabular-nums data-placeholder:text-datepicker-placeholder focus:bg-datepicker-segment-focus-bg focus:text-datepicker-segment-focus-text focus:data-placeholder:text-datepicker-segment-focus-text'
+                    ? 'rounded-default px-px outline-none tabular-nums data-placeholder:text-datepicker-placeholder focus:bg-datepicker-segment-focus-bg focus:text-datepicker-segment-focus-text focus:data-placeholder:text-datepicker-segment-focus-text'
                     : 'select-none text-datepicker-placeholder',
                 ]"
               >{{ seg.value }}</DatePickerInput>
@@ -234,14 +234,14 @@ const wrapperClasses = computed(() => [
       <DatePickerContent
         :side-offset="4"
         align="start"
-        class="z-50 rounded-lg border shadow-md p-3 bg-datepicker-popup-bg border-datepicker-popup-border"
+        class="z-50 rounded-default border shadow-md p-3 bg-datepicker-popup-bg border-datepicker-popup-border"
       >
         <DatePickerCalendar v-slot="{ weekDays, grid }">
           <DatePickerHeader
             class="flex items-center justify-between mb-3"
           >
             <DatePickerPrev
-              class="flex items-center justify-center size-7 rounded transition-[color,background-color,border-color,box-shadow] duration-150 outline-none ring-offset-1 ring-offset-surface-base text-datepicker-icon hover:bg-datepicker-nav-hover-bg focus-visible:ring-2 focus-visible:ring-datepicker-focus-ring"
+              class="flex items-center justify-center size-7 rounded-default transition-[color,background-color,border-color,box-shadow] duration-150 outline-none ring-offset-1 ring-offset-surface-base text-datepicker-icon hover:bg-datepicker-nav-hover-bg focus-visible:ring-2 focus-visible:ring-datepicker-focus-ring"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -263,7 +263,7 @@ const wrapperClasses = computed(() => [
             />
 
             <DatePickerNext
-              class="flex items-center justify-center size-7 rounded transition-[color,background-color,border-color,box-shadow] duration-150 outline-none ring-offset-1 ring-offset-surface-base text-datepicker-icon hover:bg-datepicker-nav-hover-bg focus-visible:ring-2 focus-visible:ring-datepicker-focus-ring"
+              class="flex items-center justify-center size-7 rounded-default transition-[color,background-color,border-color,box-shadow] duration-150 outline-none ring-offset-1 ring-offset-surface-base text-datepicker-icon hover:bg-datepicker-nav-hover-bg focus-visible:ring-2 focus-visible:ring-datepicker-focus-ring"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -311,7 +311,7 @@ const wrapperClasses = computed(() => [
                   <DatePickerCellTrigger
                     :day="date"
                     :month="month.value"
-                    class="flex items-center justify-center size-8 rounded text-xs cursor-pointer outline-none transition-[color,background-color,border-color,box-shadow] duration-150 ring-offset-1 ring-offset-surface-base text-datepicker-day-text hover:bg-datepicker-day-hover-bg focus-visible:ring-2 focus-visible:ring-datepicker-focus-ring data-selected:bg-datepicker-day-selected-bg data-selected:text-datepicker-day-selected-text data-today:border data-today:border-datepicker-day-today-border data-outside-view:text-datepicker-day-outside-text data-unavailable:text-datepicker-day-disabled-text data-unavailable:cursor-not-allowed data-unavailable:hover:bg-transparent"
+                    class="flex items-center justify-center size-8 rounded-default text-xs cursor-pointer outline-none transition-[color,background-color,border-color,box-shadow] duration-150 ring-offset-1 ring-offset-surface-base text-datepicker-day-text hover:bg-datepicker-day-hover-bg focus-visible:ring-2 focus-visible:ring-datepicker-focus-ring data-selected:bg-datepicker-day-selected-bg data-selected:text-datepicker-day-selected-text data-today:border data-today:border-datepicker-day-today-border data-outside-view:text-datepicker-day-outside-text data-unavailable:text-datepicker-day-disabled-text data-unavailable:cursor-not-allowed data-unavailable:hover:bg-transparent"
                   >
                     {{ date.day }}
                   </DatePickerCellTrigger>
@@ -326,7 +326,7 @@ const wrapperClasses = computed(() => [
           <button
             type="button"
             :disabled="disabled"
-            class="px-4 py-1.5 rounded text-xs font-medium bg-datepicker-day-selected-bg text-datepicker-day-selected-text outline-none ring-offset-1 ring-offset-surface-base hover:opacity-90 transition-[box-shadow] duration-150 focus-visible:ring-2 focus-visible:ring-datepicker-focus-ring disabled:opacity-50 disabled:cursor-not-allowed"
+            class="px-4 py-1.5 rounded-default text-xs font-medium bg-datepicker-day-selected-bg text-datepicker-day-selected-text outline-none ring-offset-1 ring-offset-surface-base hover:opacity-90 transition-[box-shadow] duration-150 focus-visible:ring-2 focus-visible:ring-datepicker-focus-ring disabled:opacity-50 disabled:cursor-not-allowed"
             @click="handleApply"
           >Apply</button>
         </div>
diff --git a/web/src/lib/forms/DateTime/OFormDateTimeRange.vue b/web/src/lib/forms/DateTime/OFormDateTimeRange.vue
index 0d8dfd54b5..4ef75eebb0 100644
--- a/web/src/lib/forms/DateTime/OFormDateTimeRange.vue
+++ b/web/src/lib/forms/DateTime/OFormDateTimeRange.vue
@@ -72,8 +72,8 @@ if (form) {
   );
 }
 
-// Mirror the old updateDateTime() translation: DateTime's event shape →
-// the form's { type, from, to, period } timerange object.
+// Translate DateTime's event shape → the form's { type, from, to, period }
+// timerange object.
 const toTimerange = (dt: any): DateTimeRangeValue => ({
   type: dt.valueType === "relative-custom" ? "relative" : dt.valueType,
   from: dt.startTime,
@@ -93,15 +93,11 @@ const onDateChange = (field: any, dt: any) => {
   <component v-if="form" :is="form.Field" :name="props.name">
     <template #default="{ field }">
       <div v-if="props.label || props.description" class="mb-2">
-        <div
-          v-if="props.label"
-          style="font-size: 14px"
-          class="font-bold text-gray-500"
-        >
+        <div v-if="props.label" class="text-sm font-bold text-input-label-text">
           {{ props.label
           }}<span v-if="props.required" class="text-input-error-text"> *</span>
         </div>
-        <div v-if="props.description" style="font-size: 12px">
+        <div v-if="props.description" class="text-xs">
           {{ props.description }}
         </div>
       </div>
diff --git a/web/src/lib/forms/DateTimeRange/ODateRangeCalendar.vue b/web/src/lib/forms/DateTimeRange/ODateRangeCalendar.vue
index a10b50697c..a6147d61fc 100644
--- a/web/src/lib/forms/DateTimeRange/ODateRangeCalendar.vue
+++ b/web/src/lib/forms/DateTimeRange/ODateRangeCalendar.vue
@@ -158,7 +158,7 @@ function handleRangeChange(value: DateRange | undefined) {
         class="flex items-center justify-between mb-3"
       >
         <RangeCalendarPrev
-          class="flex items-center justify-center size-7 rounded transition-[color,background-color,border-color,box-shadow] duration-150 outline-none ring-offset-1 ring-offset-surface-base text-datepicker-icon hover:bg-datepicker-nav-hover-bg focus-visible:ring-2 focus-visible:ring-datepicker-focus-ring data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none"
+          class="flex items-center justify-center size-7 rounded-default transition-[color,background-color,border-color,box-shadow] duration-150 outline-none ring-offset-1 ring-offset-surface-base text-datepicker-icon hover:bg-datepicker-nav-hover-bg focus-visible:ring-2 focus-visible:ring-datepicker-focus-ring data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none"
           data-test="daterangecalendar-prev"
         >
           <svg
@@ -180,7 +180,7 @@ function handleRangeChange(value: DateRange | undefined) {
           data-test="daterangecalendar-heading"
         />
         <RangeCalendarNext
-          class="flex items-center justify-center size-7 rounded transition-[color,background-color,border-color,box-shadow] duration-150 outline-none ring-offset-1 ring-offset-surface-base text-datepicker-icon hover:bg-datepicker-nav-hover-bg focus-visible:ring-2 focus-visible:ring-datepicker-focus-ring data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none"
+          class="flex items-center justify-center size-7 rounded-default transition-[color,background-color,border-color,box-shadow] duration-150 outline-none ring-offset-1 ring-offset-surface-base text-datepicker-icon hover:bg-datepicker-nav-hover-bg focus-visible:ring-2 focus-visible:ring-datepicker-focus-ring data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none"
           data-test="daterangecalendar-next"
         >
           <svg
@@ -227,7 +227,7 @@ function handleRangeChange(value: DateRange | undefined) {
                 :data-test="`daterangecalendar-cell-${d.toString()}`"
                 :data-preview="isCellInPreview(d) ? '' : undefined"
                 @mouseenter="handleCellMouseEnter(d)"
-                class="flex items-center justify-center size-8 rounded text-xs cursor-pointer outline-none transition-[color,background-color,border-color,box-shadow] duration-150 ring-offset-1 ring-offset-surface-base text-datepicker-day-text hover:bg-datepicker-day-hover-bg focus-visible:ring-2 focus-visible:ring-datepicker-focus-ring data-selected:bg-datepicker-day-selected-bg data-selected:text-datepicker-day-selected-text data-today:border data-today:border-datepicker-day-today-border data-outside-view:text-datepicker-day-outside-text data-unavailable:text-datepicker-day-disabled-text data-unavailable:cursor-not-allowed data-unavailable:pointer-events-none data-disabled:text-datepicker-day-disabled-text data-disabled:cursor-not-allowed data-disabled:pointer-events-none data-highlighted:bg-datepicker-day-range-bg data-highlighted:text-datepicker-day-range-text data-selection-start:bg-datepicker-day-selected-bg data-selection-start:text-datepicker-day-selected-text data-selection-end:bg-datepicker-day-selected-bg data-selection-end:text-datepicker-day-selected-text"
+                class="flex items-center justify-center size-8 rounded-default text-xs cursor-pointer outline-none transition-[color,background-color,border-color,box-shadow] duration-150 ring-offset-1 ring-offset-surface-base text-datepicker-day-text hover:bg-datepicker-day-hover-bg focus-visible:ring-2 focus-visible:ring-datepicker-focus-ring data-selected:bg-datepicker-day-selected-bg data-selected:text-datepicker-day-selected-text data-today:border data-today:border-datepicker-day-today-border data-outside-view:text-datepicker-day-outside-text data-unavailable:text-datepicker-day-disabled-text data-unavailable:cursor-not-allowed data-unavailable:pointer-events-none data-disabled:text-datepicker-day-disabled-text data-disabled:cursor-not-allowed data-disabled:pointer-events-none data-highlighted:bg-datepicker-day-range-bg data-highlighted:text-datepicker-day-range-text data-selection-start:bg-datepicker-day-selected-bg data-selection-start:text-datepicker-day-selected-text data-selection-end:bg-datepicker-day-selected-bg data-selection-end:text-datepicker-day-selected-text"
                 >{{ d.day }}</RangeCalendarCellTrigger
               >
             </RangeCalendarCell>
@@ -238,26 +238,21 @@ function handleRangeChange(value: DateRange | undefined) {
   </RangeCalendarRoot>
 </template>
 
-<style>
-/*
-  While awaiting the second click, reka-ui flags every still-pickable cell
-  with [data-highlighted] (start → max-date), which would visually wash out
-  the whole future calendar. Strip that styling in awaiting mode and rely on
-  our own [data-preview] flag, which we set only on cells between start and
-  the user's current hover position.
-
-  The :not([data-selected]) guards keep the chosen start cell (which carries
-  BOTH data-selected and data-highlighted) from being affected — it should
-  continue to show the solid "selected" background.
-*/
-.o-range-cal--awaiting [data-highlighted]:not([data-selected]) {
+<style scoped>
+/* keep(lib-override:reka-ui): while awaiting the second click, reka flags every
+   still-pickable cell with [data-highlighted] (start → max-date), washing out
+   the future calendar. Strip that and paint only our own [data-preview] cells
+   (set between start and hover). The :not([data-selected]) guards keep the
+   chosen start cell's solid background. Targets reka-generated cell DOM state,
+   so the selectors need :deep. */
+.o-range-cal--awaiting :deep([data-highlighted]:not([data-selected])) {
   background-color: transparent;
   color: inherit;
 }
-.o-range-cal--awaiting [data-preview]:not([data-selected]) {
+.o-range-cal--awaiting :deep([data-preview]:not([data-selected])) {
   background-color: var(--color-datepicker-day-range-bg);
   color: var(--color-datepicker-day-range-text);
   outline: 1px dashed currentColor;
-  outline-offset: -2px;
+  outline-offset: -0.125rem;
 }
 </style>
diff --git a/web/src/lib/forms/DateTimeRange/ODateTimeRange.vue b/web/src/lib/forms/DateTimeRange/ODateTimeRange.vue
index 220256649e..d95b3a8c2f 100644
--- a/web/src/lib/forms/DateTimeRange/ODateTimeRange.vue
+++ b/web/src/lib/forms/DateTimeRange/ODateTimeRange.vue
@@ -296,7 +296,7 @@ const isPlaceholder = computed(
 );
 
 const triggerClasses = computed(() => [
-  "flex items-center gap-2 w-full min-h-10 px-3 rounded-md border text-sm transition-[color,background-color,border-color,box-shadow] duration-150 outline-none ring-offset-1 ring-offset-surface-base focus-visible:ring-2 focus-visible:ring-datepicker-focus-ring bg-datepicker-bg",
+  "flex items-center gap-2 w-full min-h-10 px-3 rounded-default border text-sm transition-[color,background-color,border-color,box-shadow] duration-150 outline-none ring-offset-1 ring-offset-surface-base focus-visible:ring-2 focus-visible:ring-datepicker-focus-ring bg-datepicker-bg",
   hasError.value
     ? "border-datepicker-error-border"
     : "border-datepicker-border hover:border-datepicker-hover-border",
@@ -380,7 +380,7 @@ const triggerClasses = computed(() => [
       <PopoverContent
         :side-offset="4"
         align="start"
-        class="z-50 rounded-lg border shadow-lg bg-datepicker-popup-bg border-datepicker-popup-border w-80 outline-none"
+        class="z-50 rounded-default border shadow-lg bg-datepicker-popup-bg border-datepicker-popup-border w-80 outline-none"
         data-test="datetimerange-popup"
       >
         <!-- Tab bar -->
@@ -439,7 +439,7 @@ const triggerClasses = computed(() => [
                 type="button"
                 :disabled="isRelativeDisabled(unit, val) || disabled"
                 :class="[
-                  'w-8 h-7 rounded text-xs transition-[color,background-color,border-color,box-shadow] duration-150 outline-none ring-offset-1 ring-offset-surface-base focus-visible:ring-2 focus-visible:ring-datepicker-focus-ring tabular-nums',
+                  'w-8 h-7 rounded-default text-xs transition-[color,background-color,border-color,box-shadow] duration-150 outline-none ring-offset-1 ring-offset-surface-base focus-visible:ring-2 focus-visible:ring-datepicker-focus-ring tabular-nums',
                   stagedRelativeUnit === unit && stagedRelativeAmount === val && !isRelativeDisabled(unit, val)
                     ? 'bg-datepicker-relative-btn-selected-bg text-datepicker-relative-btn-selected-text'
                     : isRelativeDisabled(unit, val)
@@ -463,14 +463,14 @@ const triggerClasses = computed(() => [
               type="number"
               min="1"
               :disabled="disabled"
-              class="w-16 h-7 rounded border border-datepicker-border bg-datepicker-bg text-datepicker-text text-xs px-2 outline-none focus:border-datepicker-focus-border tabular-nums disabled:opacity-50"
+              class="w-16 h-7 rounded-default border border-datepicker-border bg-datepicker-bg text-datepicker-text text-xs px-2 outline-none focus:border-datepicker-focus-border tabular-nums disabled:opacity-50"
               data-test="datetimerange-custom-amount"
               @keydown.enter="applyCustomRelative"
             />
             <select
               v-model="customUnit"
               :disabled="disabled"
-              class="flex-1 h-7 rounded border border-datepicker-border bg-datepicker-bg text-datepicker-text text-xs px-2 outline-none focus:border-datepicker-focus-border disabled:opacity-50"
+              class="flex-1 h-7 rounded-default border border-datepicker-border bg-datepicker-bg text-datepicker-text text-xs px-2 outline-none focus:border-datepicker-focus-border disabled:opacity-50"
               data-test="datetimerange-custom-unit"
             >
               <option
@@ -492,7 +492,7 @@ const triggerClasses = computed(() => [
             <button
               type="button"
               :disabled="disabled"
-              class="flex items-center justify-between w-full h-7 rounded border border-datepicker-inner-border bg-datepicker-bg text-datepicker-text text-xs px-2 outline-none disabled:opacity-50 disabled:cursor-not-allowed"
+              class="flex items-center justify-between w-full h-7 rounded-default border border-datepicker-inner-border bg-datepicker-bg text-datepicker-text text-xs px-2 outline-none disabled:opacity-50 disabled:cursor-not-allowed"
               data-test="datetimerange-timezone-trigger"
               @click="!disabled && (tzOpen = !tzOpen)"
             >
@@ -514,7 +514,7 @@ const triggerClasses = computed(() => [
             </button>
             <div
               v-if="tzOpen && !disabled"
-              class="rounded border border-datepicker-inner-border overflow-hidden"
+              class="rounded-default border border-datepicker-inner-border overflow-hidden"
             >
               <input
                 v-model="tzSearch"
@@ -553,7 +553,7 @@ const triggerClasses = computed(() => [
             <button
               type="button"
               :disabled="disabled || stagedRelativeAmount <= 0"
-              class="px-4 py-1.5 rounded text-sm font-medium transition-[color,background-color,border-color,box-shadow] duration-150 outline-none ring-offset-1 ring-offset-surface-base bg-datepicker-day-selected-bg text-datepicker-day-selected-text hover:opacity-90 focus-visible:ring-2 focus-visible:ring-datepicker-focus-ring disabled:opacity-50 disabled:cursor-not-allowed"
+              class="px-4 py-1.5 rounded-default text-sm font-medium transition-[color,background-color,border-color,box-shadow] duration-150 outline-none ring-offset-1 ring-offset-surface-base bg-datepicker-day-selected-bg text-datepicker-day-selected-text hover:opacity-90 focus-visible:ring-2 focus-visible:ring-datepicker-focus-ring disabled:opacity-50 disabled:cursor-not-allowed"
               data-test="datetimerange-relative-apply"
               @click="commitRelative"
             >Apply</button>
@@ -580,7 +580,7 @@ const triggerClasses = computed(() => [
                 class="flex items-center justify-between mb-3"
               >
                 <RangeCalendarPrev
-                  class="flex items-center justify-center size-7 rounded transition-[color,background-color,border-color,box-shadow] duration-150 outline-none ring-offset-1 ring-offset-surface-base text-datepicker-icon hover:bg-datepicker-nav-hover-bg focus-visible:ring-2 focus-visible:ring-datepicker-focus-ring"
+                  class="flex items-center justify-center size-7 rounded-default transition-[color,background-color,border-color,box-shadow] duration-150 outline-none ring-offset-1 ring-offset-surface-base text-datepicker-icon hover:bg-datepicker-nav-hover-bg focus-visible:ring-2 focus-visible:ring-datepicker-focus-ring"
                 >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -600,7 +600,7 @@ const triggerClasses = computed(() => [
                   class="text-sm font-medium text-datepicker-heading-text"
                 />
                 <RangeCalendarNext
-                  class="flex items-center justify-center size-7 rounded transition-[color,background-color,border-color,box-shadow] duration-150 outline-none ring-offset-1 ring-offset-surface-base text-datepicker-icon hover:bg-datepicker-nav-hover-bg focus-visible:ring-2 focus-visible:ring-datepicker-focus-ring"
+                  class="flex items-center justify-center size-7 rounded-default transition-[color,background-color,border-color,box-shadow] duration-150 outline-none ring-offset-1 ring-offset-surface-base text-datepicker-icon hover:bg-datepicker-nav-hover-bg focus-visible:ring-2 focus-visible:ring-datepicker-focus-ring"
                 >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -647,7 +647,7 @@ const triggerClasses = computed(() => [
                       <RangeCalendarCellTrigger
                         :day="date"
                         :month="month.value"
-                        class="flex items-center justify-center size-8 rounded text-xs cursor-pointer outline-none transition-[color,background-color,border-color,box-shadow] duration-150 ring-offset-1 ring-offset-surface-base text-datepicker-day-text hover:bg-datepicker-day-hover-bg focus-visible:ring-2 focus-visible:ring-datepicker-focus-ring data-selected:bg-datepicker-day-selected-bg data-selected:text-datepicker-day-selected-text data-today:border data-today:border-datepicker-day-today-border data-outside-view:text-datepicker-day-outside-text data-unavailable:text-datepicker-day-disabled-text data-unavailable:cursor-not-allowed data-highlighted:bg-datepicker-day-range-bg data-highlighted:text-datepicker-day-range-text data-selection-start:bg-datepicker-day-selected-bg data-selection-start:text-datepicker-day-selected-text data-selection-end:bg-datepicker-day-selected-bg data-selection-end:text-datepicker-day-selected-text"
+                        class="flex items-center justify-center size-8 rounded-default text-xs cursor-pointer outline-none transition-[color,background-color,border-color,box-shadow] duration-150 ring-offset-1 ring-offset-surface-base text-datepicker-day-text hover:bg-datepicker-day-hover-bg focus-visible:ring-2 focus-visible:ring-datepicker-focus-ring data-selected:bg-datepicker-day-selected-bg data-selected:text-datepicker-day-selected-text data-today:border data-today:border-datepicker-day-today-border data-outside-view:text-datepicker-day-outside-text data-unavailable:text-datepicker-day-disabled-text data-unavailable:cursor-not-allowed data-highlighted:bg-datepicker-day-range-bg data-highlighted:text-datepicker-day-range-text data-selection-start:bg-datepicker-day-selected-bg data-selection-start:text-datepicker-day-selected-text data-selection-end:bg-datepicker-day-selected-bg data-selection-end:text-datepicker-day-selected-text"
                       >{{ date.day }}</RangeCalendarCellTrigger>
                     </RangeCalendarCell>
                   </RangeCalendarGridRow>
@@ -691,7 +691,7 @@ const triggerClasses = computed(() => [
             <button
               type="button"
               :disabled="disabled"
-              class="flex items-center justify-between w-full h-9 rounded-md border border-datepicker-inner-border bg-datepicker-bg text-datepicker-text text-sm px-3 outline-none disabled:opacity-50 disabled:cursor-not-allowed"
+              class="flex items-center justify-between w-full h-9 rounded-default border border-datepicker-inner-border bg-datepicker-bg text-datepicker-text text-sm px-3 outline-none disabled:opacity-50 disabled:cursor-not-allowed"
               data-test="datetimerange-timezone-trigger"
               @click="!disabled && (tzOpen = !tzOpen)"
             >
@@ -713,7 +713,7 @@ const triggerClasses = computed(() => [
             </button>
             <div
               v-if="tzOpen && !disabled"
-              class="rounded-md border border-datepicker-inner-border overflow-hidden"
+              class="rounded-default border border-datepicker-inner-border overflow-hidden"
             >
               <input
                 v-model="tzSearch"
@@ -749,7 +749,7 @@ const triggerClasses = computed(() => [
             <button
               type="button"
               :disabled="disabled"
-              class="px-4 py-1.5 rounded text-sm font-medium transition-[color,background-color,border-color,box-shadow] duration-150 outline-none ring-offset-1 ring-offset-surface-base bg-datepicker-day-selected-bg text-datepicker-day-selected-text hover:opacity-90 focus-visible:ring-2 focus-visible:ring-datepicker-focus-ring disabled:opacity-50 disabled:cursor-not-allowed"
+              class="px-4 py-1.5 rounded-default text-sm font-medium transition-[color,background-color,border-color,box-shadow] duration-150 outline-none ring-offset-1 ring-offset-surface-base bg-datepicker-day-selected-bg text-datepicker-day-selected-text hover:opacity-90 focus-visible:ring-2 focus-visible:ring-datepicker-focus-ring disabled:opacity-50 disabled:cursor-not-allowed"
               data-test="datetimerange-apply"
               @click="handleApply"
             >Apply</button>
diff --git a/web/src/lib/forms/File/OFile.vue b/web/src/lib/forms/File/OFile.vue
index c1d897e73b..7cae68e427 100644
--- a/web/src/lib/forms/File/OFile.vue
+++ b/web/src/lib/forms/File/OFile.vue
@@ -184,7 +184,7 @@ function formatSize(bytes: number) {
 }
 
 const wrapperClasses = computed(() => [
-  "relative flex items-center gap-2 w-full rounded-md border px-3 py-1 transition-[color,background-color,border-color,box-shadow] duration-150",
+  "relative flex items-center gap-2 w-full rounded-default border px-3 py-1 transition-[color,background-color,border-color,box-shadow] duration-150",
   "ring-offset-1 ring-offset-surface-base",
   heightClasses[props.size ?? "md"],
   isDragging.value
@@ -204,7 +204,7 @@ const wrapperClasses = computed(() => [
     <label
       v-if="$slots.label || label || $slots.tooltip"
       :for="inputId"
-      class="o-input-label text-sm font-semibold leading-tight flex items-center gap-1"
+      class="o-input-label text-compact font-medium leading-tight text-input-label-text flex items-center gap-1"
     >
       <slot name="label">{{ label }}</slot><span v-if="required" aria-hidden="true" class="select-none">*</span>
       <OIcon
@@ -274,13 +274,13 @@ const wrapperClasses = computed(() => [
         <span
           v-for="(file, i) in files"
           :key="`${file.name}-${i}`"
-          class="inline-flex items-center gap-1 rounded-md bg-file-chip-bg text-file-chip-text px-2 py-0.5 text-xs max-w-[12rem] shrink-0"
+          class="inline-flex items-center gap-1 rounded-default bg-file-chip-bg text-file-chip-text px-2 py-0.5 text-xs max-w-48 shrink-0"
           :data-test="`o-file-chip-${i}`"
         >
           <span class="truncate" :title="`${file.name} (${formatSize(file.size)})`">
             {{ file.name }}
           </span>
-          <span class="text-[0.65rem] opacity-70 shrink-0">
+          <span class="text-3xs opacity-70 shrink-0">
             {{ formatSize(file.size) }}
           </span>
           <button
@@ -352,8 +352,11 @@ const wrapperClasses = computed(() => [
 </template>
 
 <style scoped>
-/* Single-line file chips: keep horizontal scrolling but hide the scrollbar so
-   the row stays a clean one-line input regardless of how many files are chosen. */
+/* keep(scrollbar): single-line file chips — keep horizontal scrolling but hide
+   the scrollbar so the row stays a clean one-line input regardless of how many
+   files are chosen. `scrollbar-width`/`-ms-overflow-style` and the
+   `::-webkit-scrollbar` pseudo-element are native-control surfaces with no
+   Tailwind utility equivalent. */
 .o-file-chips {
   scrollbar-width: none; /* Firefox */
   -ms-overflow-style: none; /* IE/Edge legacy */
diff --git a/web/src/lib/forms/Form/OForm.spec.ts b/web/src/lib/forms/Form/OForm.spec.ts
index 881d1e4600..45c851a63c 100644
--- a/web/src/lib/forms/Form/OForm.spec.ts
+++ b/web/src/lib/forms/Form/OForm.spec.ts
@@ -37,7 +37,7 @@ describe("OForm", () => {
     expect(wrapper.exists()).toBe(true);
   });
 
-  describe("q-form compatibility ref methods", () => {
+  describe("legacy-compatibility ref methods", () => {
     function mountWithRequiredField(
       initial = "",
       onSubmit?: (_v: unknown) => unknown,
diff --git a/web/src/lib/forms/Form/OForm.types.ts b/web/src/lib/forms/Form/OForm.types.ts
index 445a244475..0172ed4fd1 100644
--- a/web/src/lib/forms/Form/OForm.types.ts
+++ b/web/src/lib/forms/Form/OForm.types.ts
@@ -28,7 +28,7 @@ export interface OFormProps<T extends Record<string, unknown>> {
   defaultValues: T;
   /**
    * Validate every field before stopping on the first error.
-   * Mirrors q-form's `greedy` prop. Without this, validation short-circuits
+   * Enables greedy validation (validate all fields, not just stop at the first). Without this, validation short-circuits
    * on the first failed field.
    */
   greedy?: boolean;
diff --git a/web/src/lib/forms/Form/OForm.vue b/web/src/lib/forms/Form/OForm.vue
index 29f938a619..14b61f24fb 100644
--- a/web/src/lib/forms/Form/OForm.vue
+++ b/web/src/lib/forms/Form/OForm.vue
@@ -14,7 +14,7 @@ const props = defineProps<{
   defaultValues?: T;
   /**
    * Validate every field before stopping on the first error.
-   * Mirrors q-form's `greedy` prop. Without this, validation short-circuits
+   * Enables greedy validation (validate all fields, not just stop at the first). Without this, validation short-circuits
    * on the first failed field.
    */
   greedy?: boolean;
@@ -44,8 +44,7 @@ const props = defineProps<{
    * and does NOT create its own — this lets the component that OWNS <OForm>
    * read the form reactively (form.useStore) to drive parent-side conditional
    * rendering. When absent, OForm creates its own form from
-   * `defaultValues`/`schema`/`onSubmit` (the ~60 existing simple forms are
-   * untouched). See START-HERE.md (Rule ③).
+   * `defaultValues`/`schema`/`onSubmit`.
    */
   form?: OFormInstance;
 }>();
@@ -100,10 +99,9 @@ async function handleSubmit(e: Event) {
   }
 }
 
-// ── q-form compatibility surface ──────────────────────────────────────────
-// q-form exposes these methods on its ref. The 50 existing q-form refs in
-// the codebase rely on them — keep names identical to avoid touching every
-// call site during migration.
+// ── Form compatibility surface ──────────────────────────────────────────
+// These methods mirror the legacy form ref API — keep the names identical so existing
+// call sites keep working.
 
 /**
  * All registered fields by dot-notation path.
@@ -126,7 +124,7 @@ function registeredFieldPaths(): string[] {
 async function validate(): Promise<boolean> {
   // TanStack form's validateAllFields runs every field's validators
   // concurrently. Without `greedy`, run them sequentially and stop at the
-  // first failure to match q-form semantics.
+  // first failure to match the legacy form semantics.
   if (props.greedy) {
     await form.validateAllFields("submit");
   } else {
@@ -142,7 +140,7 @@ async function validate(): Promise<boolean> {
 
 /**
  * Clear validation errors on every field without resetting their values.
- * Mirrors q-form's `resetValidation()`.
+ * Mirrors the legacy form's `resetValidation()`.
  */
 function resetValidation() {
   // Clear each field's errorMap so no stale message lingers (errors[] is a
@@ -156,7 +154,7 @@ function resetValidation() {
 
 /**
  * Programmatically trigger submission (runs validators → onSubmit).
- * Mirrors q-form's `submit()`.
+ * Mirrors the legacy form's `submit()`.
  */
 function submit() {
   if (isSubmitting.value) return; // guard double-submit
diff --git a/web/src/lib/forms/Form/useOForm.ts b/web/src/lib/forms/Form/useOForm.ts
index 3e6cc84f98..361b201892 100644
--- a/web/src/lib/forms/Form/useOForm.ts
+++ b/web/src/lib/forms/Form/useOForm.ts
@@ -12,7 +12,7 @@
 // `inject(FORM_CONTEXT_KEY)` and call `form.useStore(...)` directly. And simple
 // forms with no parent-side conditional rendering keep the plain
 // <OForm :schema :default-values @submit> form (OForm creates the form itself
-// via this same helper). See START-HERE.md (Rule ③) for the full rationale.
+// via this same helper).
 //
 // The config here MUST stay identical to OForm.vue's fallback so an internal and
 // an externally-supplied form behave the same: submit-then-change timing
diff --git a/web/src/lib/forms/Input/OInput.types.ts b/web/src/lib/forms/Input/OInput.types.ts
index f444cd7cc2..8d18521b06 100644
--- a/web/src/lib/forms/Input/OInput.types.ts
+++ b/web/src/lib/forms/Input/OInput.types.ts
@@ -108,7 +108,7 @@ export interface InputSlots {
   suffix?: () => unknown;
   /**
    * Tooltip content rendered inside an info icon in the label area.
-   * Provide a `<q-tooltip>` element as the slot content.
+   * Provide a tooltip element as the slot content.
    */
   tooltip?: () => unknown;
 }
diff --git a/web/src/lib/forms/Input/OInput.vue b/web/src/lib/forms/Input/OInput.vue
index 961c7f8596..e19ad3464e 100644
--- a/web/src/lib/forms/Input/OInput.vue
+++ b/web/src/lib/forms/Input/OInput.vue
@@ -82,13 +82,13 @@ const isTextarea = computed(() => props.type === "textarea");
 const fieldWidthClass = computed(() => {
   switch (props.width) {
     case "xs":
-      return "w-[var(--spacing-field-width-xs)]";
+      return "w-field-width-xs";
     case "sm":
-      return "w-[var(--spacing-field-width-sm)]";
+      return "w-field-width-sm";
     case "md":
-      return "w-[var(--spacing-field-width-md)]";
+      return "w-field-width-md";
     case "lg":
-      return "w-[var(--spacing-field-width-lg)]";
+      return "w-field-width-lg";
     default:
       return "w-full";
   }
@@ -209,10 +209,9 @@ watch(
 );
 
 // ── Styles ─────────────────────────────────────────────────────────────────
-// md was h-10 (40px); reduced to h-8 (32px) for compact config panel density.
-// Height applied to the wrapper (so border is included in the box, matching OSelect).
-// The inner input fills the wrapper via h-full.
-// 34px control height per the design system (HANDOFF §11: input height 34px).
+// Height applied to the wrapper (so border is included in the box, matching
+// OSelect); the inner input fills it via h-full. 34px control height per the
+// design system.
 const heightClasses: Record<NonNullable<InputProps["size"]>, string> = {
   sm: "h-[2.125rem]",
   md: "h-[2.125rem]",
@@ -223,7 +222,7 @@ const textSizeClasses: Record<NonNullable<InputProps["size"]>, string> = {
 };
 
 const wrapperClasses = computed(() => [
-  "flex items-stretch w-full rounded-md border transition-[color,background-color,border-color,box-shadow] duration-150",
+  "flex items-stretch w-full rounded-default border transition-[color,background-color,border-color,box-shadow] duration-150",
   "bg-input-bg",
   !isTextarea.value ? heightClasses[props.size ?? "md"] : "",
   /* Focus affordance = soft glow: a 4px translucent halo hugging the border
@@ -234,9 +233,8 @@ const wrapperClasses = computed(() => [
   hasError.value
     ? "border-input-border-error focus-within:ring-[0.125rem] focus-within:ring-input-border-error/30"
     : "border-input-border hover:border-input-border-hover focus-within:border-input-border-focus focus-within:ring-[0.125rem] focus-within:ring-primary-500/25",
-  /* Disabled inputs were almost indistinguishable from enabled ones — same
-     near-white bg, same border. Added opacity-60 + dashed border so they
-     read as obviously inactive at a glance. */
+  /* Disabled inputs get a muted bg + dashed border so they read as obviously
+     inactive at a glance. */
   props.disabled
     ? "bg-input-disabled-bg border-input-disabled-border cursor-not-allowed border-dashed"
     : "",
@@ -252,8 +250,8 @@ const wrapperClasses = computed(() => [
       v-if="(label || $slots.tooltip) && labelPosition !== 'inside'"
       :for="inputId"
       :class="[
-        'o-input-label text-sm font-semibold leading-tight flex items-center gap-1',
-        props.disabled && 'o-input-label--disabled',
+        'o-input-label text-compact leading-tight flex items-center gap-1',
+        props.disabled ? 'font-normal text-input-label-text-disabled' : 'font-medium text-input-label-text',
       ]"
     >
       {{ label }}<span v-if="required" aria-hidden="true" class="select-none">*</span>
@@ -271,7 +269,7 @@ const wrapperClasses = computed(() => [
       <!-- Inside label: floating mini-label at the top of the input border -->
       <span
         v-if="label && labelPosition === 'inside' && !isTextarea"
-        class="absolute top-1 start-3 end-7 text-[0.6875rem] font-medium leading-none text-text-secondary select-none pointer-events-none whitespace-nowrap overflow-hidden text-ellipsis"
+        class="absolute top-1 start-3 end-7 text-2xs font-medium leading-none text-text-secondary select-none pointer-events-none whitespace-nowrap overflow-hidden text-ellipsis"
       >{{ label }}<span v-if="required" aria-hidden="true">&nbsp;*</span></span>
 
       <!-- Icon-left slot (inside border, left — matches OButton #icon-left pattern) -->
@@ -341,6 +339,7 @@ const wrapperClasses = computed(() => [
         :maxlength="maxlength"
         :autocomplete="autocomplete"
         :tabindex="inputTabindex"
+        :aria-invalid="hasError || undefined"
         :class="[
           'flex-1 min-w-0 bg-transparent outline-none rounded-[inherit]',
           'text-input-text placeholder:text-input-placeholder',
diff --git a/web/src/lib/forms/Input/OTextarea.types.ts b/web/src/lib/forms/Input/OTextarea.types.ts
index e1948c0e43..b98f339fb6 100644
--- a/web/src/lib/forms/Input/OTextarea.types.ts
+++ b/web/src/lib/forms/Input/OTextarea.types.ts
@@ -65,7 +65,7 @@ export interface TextareaSlots {
   append?: () => unknown;
   /**
    * Tooltip content rendered inside an info icon in the label area.
-   * Provide a `<q-tooltip>` element as the slot content.
+   * Provide a tooltip element as the slot content.
    */
   tooltip?: () => unknown;
 }
diff --git a/web/src/lib/forms/Input/OTextarea.vue b/web/src/lib/forms/Input/OTextarea.vue
index 3589ce9460..c4bda634b7 100644
--- a/web/src/lib/forms/Input/OTextarea.vue
+++ b/web/src/lib/forms/Input/OTextarea.vue
@@ -77,13 +77,13 @@ watch(
 const fieldWidthClass = computed(() => {
   switch (props.width) {
     case "xs":
-      return "w-[var(--spacing-field-width-xs)]";
+      return "w-field-width-xs";
     case "sm":
-      return "w-[var(--spacing-field-width-sm)]";
+      return "w-field-width-sm";
     case "md":
-      return "w-[var(--spacing-field-width-md)]";
+      return "w-field-width-md";
     case "lg":
-      return "w-[var(--spacing-field-width-lg)]";
+      return "w-field-width-lg";
     default:
       return "w-full";
   }
@@ -95,7 +95,7 @@ const charCount = computed(() => {
 });
 
 const wrapperClasses = computed(() => [
-  "flex items-stretch w-full rounded-md border transition-[color,background-color,border-color,box-shadow] duration-150",
+  "flex items-stretch w-full rounded-default border transition-[color,background-color,border-color,box-shadow] duration-150",
   "ring-offset-1 ring-offset-surface-base",
   "bg-input-bg",
   /* Keep the red error border on focus (don't let the focus color override it);
@@ -125,8 +125,8 @@ const wrapperClasses = computed(() => [
       v-if="label || $slots.tooltip"
       :for="textareaId"
       :class="[
-        'o-input-label text-sm font-semibold leading-tight flex items-center gap-1',
-        props.disabled && 'o-input-label--disabled',
+        'o-input-label text-compact leading-tight flex items-center gap-1',
+        props.disabled ? 'font-normal text-input-label-text-disabled' : 'font-medium text-input-label-text',
       ]"
     >
       {{ label }}<span v-if="required" aria-hidden="true" class="select-none">*</span>
@@ -161,7 +161,7 @@ const wrapperClasses = computed(() => [
           'text-input-text placeholder:text-input-placeholder',
           'disabled:cursor-not-allowed',
           'py-2 px-3 text-sm',
-          fill ? 'h-full min-h-0 resize-none' : 'min-h-[80px]',
+          fill ? 'h-full min-h-0 resize-none' : 'min-h-20',
           !fill && (autogrow ? 'resize-none' : 'resize-y'),
         ]"
         @input="
diff --git a/web/src/lib/forms/OptionGroup/OOptionGroup.vue b/web/src/lib/forms/OptionGroup/OOptionGroup.vue
index 1f669dabe8..7c2c3d6fda 100644
--- a/web/src/lib/forms/OptionGroup/OOptionGroup.vue
+++ b/web/src/lib/forms/OptionGroup/OOptionGroup.vue
@@ -68,8 +68,8 @@ function handleCheckbox(val: (string | number)[]) {
     <div
       v-if="$slots.label || label || $slots.tooltip"
       :class="[
-        'o-input-label text-sm font-semibold leading-tight flex items-center gap-1',
-        disabled && 'o-input-label--disabled',
+        'o-input-label text-compact leading-tight flex items-center gap-1',
+        disabled ? 'font-normal text-input-label-text-disabled' : 'font-medium text-input-label-text',
       ]"
     >
       <slot name="label">{{ label }}</slot><span v-if="required" aria-hidden="true" class="select-none">*</span>
diff --git a/web/src/lib/forms/Radio/ORadio.types.ts b/web/src/lib/forms/Radio/ORadio.types.ts
index 858d8e1992..87c22907cf 100644
--- a/web/src/lib/forms/Radio/ORadio.types.ts
+++ b/web/src/lib/forms/Radio/ORadio.types.ts
@@ -40,7 +40,7 @@ export interface RadioProps {
    * Compared against ORadioGroup's modelValue to determine checked state.
    */
   value?: RadioValue;
-  /** q-radio compatibility alias for `value` */
+  /** Compatibility alias for `value` */
   val?: RadioValue;
   /** Accessible label */
   label?: string;
diff --git a/web/src/lib/forms/Radio/ORadio.vue b/web/src/lib/forms/Radio/ORadio.vue
index 0c7b03b6a5..340501aadc 100644
--- a/web/src/lib/forms/Radio/ORadio.vue
+++ b/web/src/lib/forms/Radio/ORadio.vue
@@ -22,7 +22,7 @@ defineOptions({ inheritAttrs: false });
 // tests target the actual interactive element via [data-test="…"] without
 // relying on element-tag/class selectors. Mirrors OInput / OFile patterns.
 // Also forward `data-test-value` so consumers that render N radios from a
-// list can target each option by its value (audit pattern shared with OSelect).
+// list can target each option by its value.
 const $attrs = useAttrs();
 const parentDataTest = computed(() => $attrs["data-test"] as string | undefined);
 const parentDataTestValue = computed(() => $attrs["data-test-value"] as string | undefined);
@@ -117,8 +117,8 @@ const resolvedSize = computed(() => (props.size ?? "md") as "xs" | "sm" | "md");
     <span
       v-if="$slots.label || props.label"
       :class="[
-        'o-input-label text-sm font-semibold select-none leading-tight',
-        props.disabled && 'o-input-label--disabled',
+        'o-input-label text-compact select-none leading-tight',
+        props.disabled ? 'font-normal text-input-label-text-disabled' : 'font-medium text-input-label-text',
       ]"
     >
       <slot name="label">{{ props.label }}</slot>
diff --git a/web/src/lib/forms/Range/ORange.vue b/web/src/lib/forms/Range/ORange.vue
index fb8cf09db2..fd462c54a4 100644
--- a/web/src/lib/forms/Range/ORange.vue
+++ b/web/src/lib/forms/Range/ORange.vue
@@ -404,8 +404,7 @@ function onHorizCancel() {
       <!-- Value labels on left (labelAlways) -->
       <div
         v-if="labelAlways"
-        class="relative h-full shrink-0"
-        style="width: 1.5rem"
+        class="relative h-full shrink-0 w-6"
         aria-hidden="true"
       >
         <span
@@ -457,7 +456,7 @@ function onHorizCancel() {
         <span
           data-thumb="min"
           :class="[
-            'absolute rounded-full shadow-sm border-2 border-slider-thumb-border',
+            'absolute rounded-full border-2 border-slider-thumb-border',
             'left-1/2 -translate-x-1/2 touch-none select-none',
             thumbSize[resolvedSize],
             vertMinZClass,
@@ -475,7 +474,7 @@ function onHorizCancel() {
         <span
           data-thumb="max"
           :class="[
-            'absolute rounded-full shadow-sm border-2 border-slider-thumb-border',
+            'absolute rounded-full border-2 border-slider-thumb-border',
             'left-1/2 -translate-x-1/2 touch-none select-none',
             thumbSize[resolvedSize],
             vertMaxZClass,
@@ -494,8 +493,7 @@ function onHorizCancel() {
       <!-- Marker labels on right -->
       <div
         v-if="markerLabels?.length"
-        class="relative h-full pl-1 shrink-0"
-        style="width: 1.5rem"
+        class="relative h-full pl-1 shrink-0 w-6"
         aria-hidden="true"
       >
         <span
@@ -632,7 +630,7 @@ function onHorizCancel() {
            overflow-y:auto ancestor containers. -->
       <span
         :class="[
-          'absolute rounded-full pointer-events-none shadow-sm border-2 border-slider-thumb-border z-30',
+          'absolute rounded-full pointer-events-none border-2 border-slider-thumb-border z-30',
           thumbSize[resolvedSize],
           disabled ? 'bg-slider-disabled-thumb' : 'bg-slider-thumb',
         ]"
@@ -641,7 +639,7 @@ function onHorizCancel() {
       />
       <span
         :class="[
-          'absolute rounded-full pointer-events-none shadow-sm border-2 border-slider-thumb-border z-30',
+          'absolute rounded-full pointer-events-none border-2 border-slider-thumb-border z-30',
           thumbSize[resolvedSize],
           disabled ? 'bg-slider-disabled-thumb' : 'bg-slider-thumb',
         ]"
@@ -678,7 +676,11 @@ function onHorizCancel() {
   </div>
 </template>
 
-<style>
+<style scoped>
+/* keep(lib-override:native-range): browser <input type=range> shadow pseudo-
+   elements. The native thumb is hidden (transparent, pointer-events auto so the
+   real input still handles keyboard) while a custom visual thumb is rendered in
+   the template; none of this is expressible as utilities. */
 .o2-range-input::-webkit-slider-thumb {
   appearance: none;
   -webkit-appearance: none;
diff --git a/web/src/lib/forms/Select/OSelect.types.ts b/web/src/lib/forms/Select/OSelect.types.ts
index 36f3c4ed39..6a214d9277 100644
--- a/web/src/lib/forms/Select/OSelect.types.ts
+++ b/web/src/lib/forms/Select/OSelect.types.ts
@@ -162,7 +162,7 @@ export interface SelectSlots {
   "icon-left"?: () => unknown;
   /**
    * Tooltip content rendered inside an info icon in the label area.
-   * Provide a `<q-tooltip>` element as the slot content.
+   * Provide a tooltip element as the slot content.
    */
   tooltip?: () => unknown;
 }
diff --git a/web/src/lib/forms/Select/OSelect.vue b/web/src/lib/forms/Select/OSelect.vue
index c4d132574b..cd9fdb3c83 100644
--- a/web/src/lib/forms/Select/OSelect.vue
+++ b/web/src/lib/forms/Select/OSelect.vue
@@ -67,21 +67,12 @@ type NormalizedOption = {
   colorPalette?: string[];
   /** Optional badge/chip text rendered inline next to the label (e.g. "recommended"). */
   badge?: string;
-  /**
-   * Tooltip for the badge. Use when the badge is abbreviated — a one-letter chip
-   * is compact but not self-explanatory, and this is what tells you `C` is
-   * "Counter" without costing a row of width.
-   */
+  /** Tooltip for the badge. Use when the badge is abbreviated (e.g. `C` → "Counter"). */
   badgeTitle?: string;
   /**
-   * Per-option badge colours, e.g. `{ color, background }`. Without it the badge
-   * is a green outline — fine for a one-off "recommended" tag, wrong for a badge
-   * that CLASSIFIES (every option green says nothing). Supplying a style turns it
-   * into a filled pill in that option's own colour, right-aligned so the chips
-   * form a single scannable column instead of ragging along the label ends.
-   *
-   * The right-align applies only to STYLED badges: a bare "recommended" tag reads
-   * as part of the label and belongs next to it, so those are left where they are.
+   * Per-option badge colours, e.g. `{ color, background }`. A styled badge renders
+   * as a filled pill in that option's own colour, right-aligned into a single
+   * column; a bare (unstyled) badge stays inline next to the label.
    */
   badgeStyle?: Record<string, string>;
 };
@@ -397,12 +388,9 @@ watch(popoverOpen, (open) => {
 });
 
 // ── Error state ────────────────────────────────────────────────────────────
-// The error message is only shown when `props.error` is true. Previously this
-// computed returned `props.errorMessage || (props.error ? " " : null)`, which
-// meant a static (non-conditional) error-message prop would render the error
-// permanently regardless of `props.error` — so a select with valid defaults
-// still showed "X is required". Now `error` is the single source of truth
-// for whether the error is visible; `errorMessage` only controls the text.
+// The error message is only shown when `props.error` is true. `error` is the
+// single source of truth for whether the error is visible; `errorMessage` only
+// controls the text.
 const effectiveError = computed(() => {
   if (!props.error) return null;
   return props.errorMessage || " ";
@@ -990,13 +978,13 @@ const triggerEndPadding = computed(() =>
 const fieldWidthClass = computed(() => {
   switch (props.width) {
     case "xs":
-      return "w-[var(--spacing-field-width-xs)]";
+      return "w-field-width-xs";
     case "sm":
-      return "w-[var(--spacing-field-width-sm)]";
+      return "w-field-width-sm";
     case "md":
-      return "w-[var(--spacing-field-width-md)]";
+      return "w-field-width-md";
     case "lg":
-      return "w-[var(--spacing-field-width-lg)]";
+      return "w-field-width-lg";
     default:
       return "w-full";
   }
@@ -1017,8 +1005,8 @@ const fieldWidthClass = computed(() => {
       v-if="(label || $slots.tooltip) && labelPosition !== 'inside'"
       :for="inputId"
       :class="[
-        'o-input-label text-sm font-semibold leading-tight flex items-center gap-1',
-        disabled ? 'o-input-label--disabled' : 'cursor-pointer',
+        'o-input-label text-compact leading-tight flex items-center gap-1',
+        disabled ? 'font-normal text-input-label-text-disabled' : 'font-medium text-input-label-text cursor-pointer',
       ]"
       @click.prevent="handleLabelClick"
     >
@@ -1050,6 +1038,7 @@ const fieldWidthClass = computed(() => {
             :tabindex="inputTabindex"
             role="combobox"
             :aria-expanded="popoverOpen"
+            :aria-invalid="hasError || undefined"
             @keydown="handleTriggerKeydown"
             :data-test="
               parentDataTest ? `${parentDataTest}-trigger` : undefined
@@ -1063,7 +1052,7 @@ const fieldWidthClass = computed(() => {
             "
             :data-test-selected-label="triggerDisplayLabel"
             :class="[
-              'relative flex w-full rounded-md border',
+              'relative flex w-full rounded-default border',
               // In inside-label mode padding is handled per-row; in normal mode it goes on the trigger
               labelPosition === 'inside' && label ? '' : ($slots['icon-left'] ? 'ps-2' : 'ps-3'),
               'bg-select-bg',
@@ -1085,7 +1074,7 @@ const fieldWidthClass = computed(() => {
             <!-- Inside label: in-flow with whitespace-nowrap so it drives the trigger's auto-width -->
             <span
               v-if="label && labelPosition === 'inside'"
-              class="text-[0.625rem] leading-none whitespace-nowrap text-start text-select-placeholder select-none pointer-events-none ps-3 pe-7"
+              class="text-3xs leading-none whitespace-nowrap text-start text-text-secondary select-none pointer-events-none ps-3 pe-7"
               >{{ label }}<span v-if="required" aria-hidden="true">&nbsp;*</span></span
             >
 
@@ -1116,14 +1105,14 @@ const fieldWidthClass = computed(() => {
                     >
                       <span
                         :key="`${idx}-${String(labelText ?? '')}`"
-                        class="inline-flex items-center rounded px-2 py-0.5 text-xs leading-none bg-select-item-selected-bg text-select-item-selected-text max-w-40 truncate shrink-0"
+                        class="inline-flex items-center rounded-default px-2 py-0.5 text-xs leading-none bg-select-item-selected-bg text-select-item-selected-text max-w-40 truncate shrink-0"
                       >
                         {{ labelText }}
                       </span>
                     </slot>
                     <span
                       v-if="overflowSelectedCount > 0"
-                      class="inline-flex items-center rounded px-2 py-0.5 text-xs bg-select-item-hover-bg text-select-text shrink-0"
+                      class="inline-flex items-center rounded-default px-2 py-0.5 text-xs bg-select-item-hover-bg text-select-text shrink-0"
                       data-test="o-select-overflow-chip"
                     >
                       +{{ overflowSelectedCount }} more
@@ -1227,7 +1216,7 @@ const fieldWidthClass = computed(() => {
             :class="[
               'z-[10001] min-w-(--reka-popover-trigger-width)',
               'overflow-hidden flex flex-col',
-              'rounded-md shadow-lg',
+              'rounded-default shadow-lg',
               'bg-select-content-bg',
             ]"
             :style="[dropdownStyle, { maxHeight: 'min(18rem, var(--reka-popover-content-available-height, 18rem))' }]"
@@ -1243,7 +1232,7 @@ const fieldWidthClass = computed(() => {
               <!-- Single bordered container wrapping search + list -->
               <div
                 :class="[
-                  'rounded-md border border-input-border overflow-hidden',
+                  'rounded-default border border-input-border overflow-hidden',
                   'bg-select-content-bg flex flex-col flex-1 min-h-0',
                 ]"
               >
@@ -1282,7 +1271,7 @@ const fieldWidthClass = computed(() => {
                   :class="[
                     'relative flex items-center w-full gap-2 shrink-0',
                     'ps-3 pe-3 py-1.5 text-sm',
-                    'text-select-item-text rounded-sm',
+                    'text-select-item-text rounded-default',
                     'cursor-pointer select-none outline-none',
                     'hover:bg-select-item-hover-bg',
                     'focus-visible:bg-select-item-hover-bg',
@@ -1297,7 +1286,7 @@ const fieldWidthClass = computed(() => {
                   <span
                     :class="[
                       'flex items-center justify-center shrink-0',
-                      'size-3.5 rounded-sm border transition-colors',
+                      'size-3.5 rounded-default border transition-colors',
                       allSelected
                         ? 'bg-checkbox-checked-bg border-checkbox-checked-border'
                         : 'bg-checkbox-bg border-checkbox-border',
@@ -1326,7 +1315,7 @@ const fieldWidthClass = computed(() => {
 
                 <!-- Virtual scroll container — keyboard nav handled by handleDropdownKeydown
                    on the ListboxFilter input above. Items are index-highlighted reactively. -->
-                <div ref="listboxScrollEl" :class="['overflow-auto', multiple && rowClickSingleSelect ? 'flex-1 min-h-[6rem]' : 'max-h-60']">
+                <div ref="listboxScrollEl" :class="['overflow-auto', multiple && rowClickSingleSelect ? 'flex-1 min-h-24' : 'max-h-60']">
                   <div
                     v-if="filteredOptions.length === 0"
                     class="px-3 py-2 text-sm text-select-placeholder"
@@ -1397,7 +1386,7 @@ const fieldWidthClass = computed(() => {
                         :class="[
                           'relative flex w-full h-full gap-2',
                           'ps-3 pe-3 text-sm',
-                          'text-select-item-text rounded-sm',
+                          'text-select-item-text rounded-default',
                           'cursor-pointer select-none outline-none',
                           'transition-colors duration-100',
                           // Use flex-col for stacked rich items; flex-row for inline subLabel or simple items
@@ -1421,7 +1410,7 @@ const fieldWidthClass = computed(() => {
                           <span
                             :class="[
                               'flex items-center justify-center shrink-0',
-                              'size-3.5 rounded-sm border transition-colors',
+                              'size-3.5 rounded-default border transition-colors',
                               selectedValues.includes(
                                 filteredOptions[vRow.index].value,
                               )
@@ -1453,8 +1442,7 @@ const fieldWidthClass = computed(() => {
                           <!-- Separator between checkbox zone and label zone (rowClickSingleSelect only) -->
                           <span
                             v-if="rowClickSingleSelect"
-                            class="w-px shrink-0 bg-[var(--o2-border-color)] mx-1 my-1"
-                            style="align-self: stretch"
+                            class="w-px shrink-0 bg-card-glass-border mx-1 my-1 self-stretch"
                             aria-hidden="true"
                             data-select-separator
                           />
@@ -1480,18 +1468,18 @@ const fieldWidthClass = computed(() => {
                               <span class="truncate font-medium" :title="optionTooltip ? filteredOptions[vRow.index].label : undefined">{{ filteredOptions[vRow.index].label }}</span>
                               <span
                                 v-if="filteredOptions[vRow.index].badge"
-                                class="shrink-0 rounded border border-solid"
+                                class="shrink-0 rounded-default border border-solid"
                                 :class="[
                                   filteredOptions[vRow.index].badgeTitle ? 'cursor-help' : undefined,
                                   filteredOptions[vRow.index].badgeStyle
                                     ? 'inline-flex items-center justify-center leading-none ml-auto min-w-[1.125rem] h-[1.125rem] px-1 text-xs font-semibold border-current'
-                                    : 'text-[10px] font-medium px-1 py-px leading-tight',
+                                    : 'text-3xs font-medium px-1 py-px leading-tight',
                                 ]"
                                 :title="filteredOptions[vRow.index].badgeTitle"
                                 :style="
                                   filteredOptions[vRow.index].badgeStyle ?? {
-                                    color: 'var(--o2-positive)',
-                                    borderColor: 'var(--o2-positive)',
+                                    color: 'var(--color-status-positive)',
+                                    borderColor: 'var(--color-status-positive)',
                                   }
                                 "
                               >{{ filteredOptions[vRow.index].badge }}</span>
@@ -1502,7 +1490,7 @@ const fieldWidthClass = computed(() => {
                             >{{ filteredOptions[vRow.index].subLabel }}</span>
                             <div
                               v-if="filteredOptions[vRow.index].colorPalette?.length"
-                              class="h-1.5 w-full rounded-sm"
+                              class="h-1.5 w-full rounded-default"
                               :style="{
                                 background: getPaletteGradient(
                                   filteredOptions[vRow.index].colorPalette!,
@@ -1551,9 +1539,9 @@ const fieldWidthClass = computed(() => {
                 class="flex items-center gap-2 px-3 py-2 select-none pointer-events-none shrink-0"
               >
                 <!-- Checkbox zone hint -->
-                <span class="flex items-center gap-1.5 text-[0.6875rem] text-select-placeholder shrink-0">
+                <span class="flex items-center gap-1.5 text-2xs text-select-placeholder shrink-0">
                   <span
-                    class="inline-flex items-center justify-center size-3.5 rounded-sm border border-select-placeholder shrink-0"
+                    class="inline-flex items-center justify-center size-3.5 rounded-default border border-select-placeholder shrink-0"
                     aria-hidden="true"
                   >
                     <svg viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-2.5 p-px">
@@ -1566,7 +1554,7 @@ const fieldWidthClass = computed(() => {
                 <span class="w-px h-3.5 bg-input-border shrink-0" aria-hidden="true" />
 
                 <!-- Name zone hint -->
-                <span class="flex items-center gap-1.5 text-[0.6875rem] text-select-placeholder shrink-0">
+                <span class="flex items-center gap-1.5 text-2xs text-select-placeholder shrink-0">
                   <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="size-3 shrink-0" aria-hidden="true">
                     <path d="M4 2h6M4 5h6M4 8h3" />
                   </svg>
@@ -1607,7 +1595,7 @@ const fieldWidthClass = computed(() => {
             parentDataTest ? `${parentDataTest}-trigger` : undefined
           "
           :class="[
-            'relative flex w-full rounded-md border',
+            'relative flex w-full rounded-default border',
             // In inside-label mode padding is handled per-row
             labelPosition === 'inside' && label ? '' : 'ps-3',
             'bg-select-bg',
@@ -1629,7 +1617,7 @@ const fieldWidthClass = computed(() => {
           <!-- Inside label: in-flow with whitespace-nowrap so it drives the trigger's auto-width -->
           <span
             v-if="label && labelPosition === 'inside'"
-            class="text-[0.625rem] leading-none whitespace-nowrap text-start text-select-placeholder select-none pointer-events-none ps-3 pe-7"
+            class="text-3xs leading-none whitespace-nowrap text-start text-text-secondary select-none pointer-events-none ps-3 pe-7"
             >{{ label }}<span v-if="required" aria-hidden="true">&nbsp;*</span></span
           >
 
@@ -1724,7 +1712,7 @@ const fieldWidthClass = computed(() => {
           :class="[
             'z-[10001] min-w-(--reka-select-trigger-width)',
             'overflow-hidden',
-            'rounded-md border shadow-md',
+            'rounded-default border shadow-md',
             'bg-select-content-bg border-select-content-border',
             // Clip-path reveal: unveiled at full size from its trigger edge (no
             // scale/squish). Wipes down by default; top-placed wipes up. Soft
diff --git a/web/src/lib/forms/Select/OSelectItem.vue b/web/src/lib/forms/Select/OSelectItem.vue
index 3251a94d20..95fc4a2ad1 100644
--- a/web/src/lib/forms/Select/OSelectItem.vue
+++ b/web/src/lib/forms/Select/OSelectItem.vue
@@ -46,7 +46,7 @@ onUnmounted(() => {
     :class="[
       'relative flex items-center w-full',
       'ps-3 pe-3 py-1.5 text-sm',
-      'text-select-item-text rounded-sm',
+      'text-select-item-text rounded-default',
       'cursor-pointer select-none outline-none',
       'transition-colors duration-100',
       'data-highlighted:bg-select-item-hover-bg',
diff --git a/web/src/lib/forms/Slider/OSlider.vue b/web/src/lib/forms/Slider/OSlider.vue
index 96969355d4..26641dc2e8 100644
--- a/web/src/lib/forms/Slider/OSlider.vue
+++ b/web/src/lib/forms/Slider/OSlider.vue
@@ -184,7 +184,7 @@ const resolvedSize = computed(() => props.size ?? "md");
 
       <span
         :class="[
-          'absolute rounded-full pointer-events-none shadow-sm border-2 border-slider-thumb-border',
+          'absolute rounded-full pointer-events-none border-2 border-slider-thumb-border',
           thumbSize[resolvedSize],
           disabled ? 'bg-slider-disabled-thumb' : 'bg-slider-thumb',
         ]"
@@ -216,7 +216,10 @@ const resolvedSize = computed(() => props.size ?? "md");
   </div>
 </template>
 
-<style>
+<style scoped>
+/* keep(lib-override:native-range): browser <input type=range> shadow pseudo-
+   elements. The native thumb is collapsed to 0 (a custom visual thumb is drawn
+   in the template) and the native track is cleared; not expressible as utilities. */
 .o2-slider-input::-webkit-slider-thumb {
   appearance: none;
   -webkit-appearance: none;
diff --git a/web/src/lib/forms/Switch/OSwitch.types.ts b/web/src/lib/forms/Switch/OSwitch.types.ts
index 0bb850ffd5..e8ca0fda53 100644
--- a/web/src/lib/forms/Switch/OSwitch.types.ts
+++ b/web/src/lib/forms/Switch/OSwitch.types.ts
@@ -19,9 +19,9 @@ export interface SwitchProps {
   labelPosition?: "left" | "right";
   /** Control size */
   size?: SwitchSize;
-  /** Value to emit when checked — replaces q-toggle `true-value` */
+  /** Value to emit when checked — replaces the legacy toggle's `true-value` */
   checkedValue?: SwitchCustomValue;
-  /** Value to emit when unchecked — replaces q-toggle `false-value` */
+  /** Value to emit when unchecked — replaces the legacy toggle's `false-value` */
   uncheckedValue?: SwitchCustomValue;
   /** Prevents interaction */
   disabled?: boolean;
diff --git a/web/src/lib/forms/Switch/OSwitch.vue b/web/src/lib/forms/Switch/OSwitch.vue
index 7724bb3633..be3cd13ec6 100644
--- a/web/src/lib/forms/Switch/OSwitch.vue
+++ b/web/src/lib/forms/Switch/OSwitch.vue
@@ -138,7 +138,7 @@ const hasLabel = computed(
         props.disabled
           ? 'bg-transparent border-switch-disabled-border border-dashed'
           : isChecked
-            ? 'bg-[var(--color-primary-500)] border-switch-border'
+            ? 'bg-primary-500 border-switch-border'
             : 'bg-transparent border-switch-border-off',
         props.disabled ? 'cursor-not-allowed' : 'cursor-pointer',
         'outline-none',
@@ -165,8 +165,8 @@ const hasLabel = computed(
       v-if="hasLabel || $slots.tooltip"
       :id="labelId"
       :class="[
-        'o-input-label text-sm font-semibold select-none leading-tight flex items-center gap-1',
-        disabled && 'o-input-label--disabled',
+        'o-input-label text-compact select-none leading-tight flex items-center gap-1',
+        disabled ? 'font-normal text-input-label-text-disabled' : 'font-medium text-input-label-text',
       ]"
     >
       <slot name="label">{{ label }}</slot><span v-if="required" aria-hidden="true">&nbsp;*</span>
diff --git a/web/src/lib/forms/TagInput/OTagInput.vue b/web/src/lib/forms/TagInput/OTagInput.vue
index 71ac036cd6..07d030e7c1 100644
--- a/web/src/lib/forms/TagInput/OTagInput.vue
+++ b/web/src/lib/forms/TagInput/OTagInput.vue
@@ -18,23 +18,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <div data-test="tag-input-container" class="w-full h-full">
     <div
       data-test="tag-input-wrapper"
-      class="tag-input-wrapper relative flex flex-col px-[5px] py-0 border border-(--o2-border-color,rgba(0,0,0,0.12)) rounded bg-(--o2-card-bg) min-h-14 h-full w-full max-w-full cursor-text transition-colors duration-300 overflow-hidden"
-      :class="{ 'has-content': hasContent }"
+      class="group relative flex flex-col px-1.25 py-0 border border-card-glass-border rounded-default bg-card-glass-bg min-h-14 h-full w-full max-w-full cursor-text transition-colors duration-300 overflow-hidden focus-within:border-theme-accent"
     >
       <label
         v-if="label"
         data-test="tag-input-label"
-        class="tag-input-label absolute top-4 left-3 text-base text-[rgba(0,0,0,0.6)] pointer-events-none transition-all duration-300 bg-transparent px-1 -ml-1"
-        style="transition-timing-function: cubic-bezier(0.25, 0.8, 0.5, 1); transform-origin: left top;"
+        class="absolute top-4 left-3 text-base pointer-events-none transition-all duration-300 bg-transparent px-1 -ml-1 group-focus-within:text-theme-accent ease-[cubic-bezier(0.25,0.8,0.5,1)] origin-top-left"
+        :class="hasContent ? '-translate-y-2 scale-75 text-theme-accent' : 'text-text-secondary'"
       >{{ label }}</label>
-      <div data-test="tags-and-input" class="flex flex-wrap items-start gap-1 mt-[5px] w-full overflow-hidden">
+      <div data-test="tags-and-input" class="flex flex-wrap items-start gap-1 mt-1.25 w-full overflow-hidden">
         <OTag
           v-for="(tag, index) in modelValue"
           :key="index"
           :data-test="`tag-chip-${index}`"
           type="selectionChip"
-          class="tag-chip m-0! shrink-0 grow-0 basis-auto"
-          style="background-color: color-mix(in srgb, var(--o2-primary-btn-bg) 20%, white 10%)"
+          class="tag-chip m-0! shrink-0 grow-0 basis-auto bg-[color-mix(in_srgb,var(--color-button-primary)_20%,white_10%)]"
         >
           {{ tag }}
           <template #trailing>
@@ -54,7 +52,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           v-model="inputValue"
           type="text"
           :placeholder="modelValue.length > 0 ? '' : placeholder"
-          class="tag-input [flex:1_1_100px] min-w-[100px] border-0 outline-none bg-transparent p-1 text-sm text-(--q-color-text-primary)"
+          class="[flex:1_1_100px] min-w-25 border-0 outline-none bg-transparent p-1 text-sm text-text-body placeholder:text-text-secondary"
           @keydown.enter.prevent="addTag"
           @input="handleInput"
           @keydown.delete="handleBackspace"
@@ -132,22 +130,3 @@ const handleBackspace = () => {
   }
 };
 </script>
-
-<style>
-.tag-input-wrapper:focus-within {
-  border-color: var(--q-primary);
-}
-
-.tag-input-wrapper:focus-within .tag-input-label {
-  color: var(--q-primary);
-}
-
-.tag-input-wrapper.has-content .tag-input-label {
-  transform: translateY(-8px) scale(0.75);
-  color: var(--q-primary);
-}
-
-.tag-input::placeholder {
-  color: var(--color-text-secondary, var(--o2-text-secondary));
-}
-</style>
diff --git a/web/src/lib/forms/Time/OTime.vue b/web/src/lib/forms/Time/OTime.vue
index 7135c35de6..a60cffaae8 100644
--- a/web/src/lib/forms/Time/OTime.vue
+++ b/web/src/lib/forms/Time/OTime.vue
@@ -223,7 +223,7 @@ const heightClasses: Record<NonNullable<TimeProps["size"]>, string> = {
 };
 
 const fieldClasses = computed(() => [
-  "flex items-center w-full rounded-md border transition-[color,background-color,border-color,box-shadow] duration-150",
+  "flex items-center w-full rounded-default border transition-[color,background-color,border-color,box-shadow] duration-150",
   "ring-offset-1 ring-offset-surface-base",
   "bg-datepicker-bg",
   hasError.value
@@ -316,7 +316,7 @@ const fieldClasses = computed(() => [
         :side-offset="4"
         align="start"
         :class="[
-          'z-60 rounded-lg border shadow-md overflow-hidden bg-datepicker-popup-bg border-datepicker-popup-border outline-none',
+          'z-60 rounded-default border shadow-md overflow-hidden bg-datepicker-popup-bg border-datepicker-popup-border outline-none',
           withSeconds ? 'w-64' : 'w-56',
         ]"
         data-test="otime-popup"
@@ -328,7 +328,7 @@ const fieldClasses = computed(() => [
             <button
               type="button"
               :class="[
-                'text-2xl font-semibold tabular-nums rounded-sm px-1 pb-0.5 outline-none ring-offset-1 ring-offset-surface-base transition-[color,background-color,border-color,box-shadow] duration-150 border-b-2 focus-visible:ring-2 focus-visible:ring-datepicker-focus-ring',
+                'text-2xl font-semibold tabular-nums rounded-default px-1 pb-0.5 outline-none ring-offset-1 ring-offset-surface-base transition-[color,background-color,border-color,box-shadow] duration-150 border-b-2 focus-visible:ring-2 focus-visible:ring-datepicker-focus-ring',
                 clockMode === 'hour'
                   ? 'text-datepicker-day-selected-bg border-datepicker-day-selected-bg'
                   : 'text-datepicker-heading-text border-transparent hover:text-datepicker-day-selected-bg',
@@ -340,7 +340,7 @@ const fieldClasses = computed(() => [
             <button
               type="button"
               :class="[
-                'text-2xl font-semibold tabular-nums rounded-sm px-1 pb-0.5 outline-none ring-offset-1 ring-offset-surface-base transition-[color,background-color,border-color,box-shadow] duration-150 border-b-2 focus-visible:ring-2 focus-visible:ring-datepicker-focus-ring',
+                'text-2xl font-semibold tabular-nums rounded-default px-1 pb-0.5 outline-none ring-offset-1 ring-offset-surface-base transition-[color,background-color,border-color,box-shadow] duration-150 border-b-2 focus-visible:ring-2 focus-visible:ring-datepicker-focus-ring',
                 clockMode === 'minute'
                   ? 'text-datepicker-day-selected-bg border-datepicker-day-selected-bg'
                   : 'text-datepicker-heading-text border-transparent hover:text-datepicker-day-selected-bg',
@@ -353,7 +353,7 @@ const fieldClasses = computed(() => [
               <button
                 type="button"
                 :class="[
-                  'text-2xl font-semibold tabular-nums rounded-sm px-1 pb-0.5 outline-none ring-offset-1 ring-offset-surface-base transition-[color,background-color,border-color,box-shadow] duration-150 border-b-2 focus-visible:ring-2 focus-visible:ring-datepicker-focus-ring',
+                  'text-2xl font-semibold tabular-nums rounded-default px-1 pb-0.5 outline-none ring-offset-1 ring-offset-surface-base transition-[color,background-color,border-color,box-shadow] duration-150 border-b-2 focus-visible:ring-2 focus-visible:ring-datepicker-focus-ring',
                   clockMode === 'second'
                     ? 'text-datepicker-day-selected-bg border-datepicker-day-selected-bg'
                     : 'text-datepicker-heading-text border-transparent hover:text-datepicker-day-selected-bg',
@@ -366,7 +366,7 @@ const fieldClasses = computed(() => [
 
           <!-- AM / PM horizontal pill -->
           <div
-            class="flex rounded-md border border-datepicker-border overflow-hidden ms-3 shrink-0"
+            class="flex rounded-default border border-datepicker-border overflow-hidden ms-3 shrink-0"
           >
             <button
               type="button"
@@ -525,8 +525,10 @@ const fieldClasses = computed(() => [
   </div>
 </template>
 
-<style>
-/* Hide the native browser clock picker dropdown */
+<style scoped>
+/* keep(lib-override:native-time): hide the browser's native clock-picker
+   indicator on <input type=time> (a custom analog-clock popover replaces it).
+   Scoped so the override only affects this component's input. */
 input[type="time"]::-webkit-calendar-picker-indicator {
   display: none;
 }
diff --git a/web/src/lib/lists/FieldList/OFieldLabel.vue b/web/src/lib/lists/FieldList/OFieldLabel.vue
index d72af407fb..1859003a08 100644
--- a/web/src/lib/lists/FieldList/OFieldLabel.vue
+++ b/web/src/lib/lists/FieldList/OFieldLabel.vue
@@ -16,7 +16,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <div
-    class="o-field-label flex items-center gap-[0.375rem] min-w-0 flex-1 py-[0.25rem]"
+    class="o-field-label flex items-center gap-1.5 min-w-0 flex-1 py-1"
   >
     <OIcon
       v-if="showTypeIcon"
@@ -27,7 +27,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <OTooltip :content="field.label ?? field.name" :disabled="!isTruncated" side="right">
       <span
         ref="labelRef"
-        class="truncate flex-1 min-w-0 leading-relaxed text-[0.82rem] text-field-list-label-text"
+        class="truncate flex-1 min-w-0 leading-relaxed text-compact text-field-list-label-text"
       >
         {{ field.label ?? field.name }}
       </span>
diff --git a/web/src/lib/lists/FieldList/OFieldList.vue b/web/src/lib/lists/FieldList/OFieldList.vue
index 3d20a76e73..0fa751f536 100644
--- a/web/src/lib/lists/FieldList/OFieldList.vue
+++ b/web/src/lib/lists/FieldList/OFieldList.vue
@@ -7,8 +7,12 @@
       <slot name="before-list" />
     </div>
 
-    <!-- Search input -->
-    <div v-if="showSearch" class="shrink-0 py-1.5">
+    <!-- Search input. The horizontal inset is the page-edge grid line, baked in
+         here so every field list (logs, traces, RUM, dashboards) lines up with
+         the page header instead of each panel supplying its own gutter — that's
+         how this drifted to four different values. `searchClass` remains as an
+         escape hatch for a panel that genuinely needs to differ. -->
+    <div v-if="showSearch" class="shrink-0 py-1.5 px-page-edge" :class="searchClass">
       <OInput
         :model-value="searchModel"
         data-test="o-field-list-search"
@@ -49,7 +53,7 @@
         <!-- Group header -->
         <div
           v-if="row.isGroup"
-          class="o-field-list__group-header h-7 flex items-center justify-between text-[0.6875rem] font-semibold text-(--color-field-list-group-text) cursor-default select-none tracking-[0.01em] sticky top-0 z-[2] bg-transparent"
+          class="o-field-list__group-header h-7 px-page-edge flex items-center justify-between text-2xs font-semibold text-field-list-group-text cursor-default select-none tracking-[0.01em] sticky top-0 z-[2] bg-surface-panel"
           :data-test="`o-field-list-group-${row.groupName}`"
         >
           <slot name="group-header" :row="row" :group-name="row.groupName">
@@ -62,7 +66,7 @@
         <!-- Field row -->
         <div
           v-else
-          class="o-field-list__row mt-[0.25rem] flex items-center w-full min-h-[24px] p-0 relative cursor-pointer rounded-[0.1875rem] text-xs leading-[0.8rem]"
+          class="o-field-list__row group mt-1 flex items-center w-full min-h-6 px-page-edge relative cursor-pointer rounded-default text-xs leading-[0.8rem]"
           :class="{ 'o-field-list__row--draggable': draggable }"
           :data-test="`o-field-list-row-${row.name}`"
           :draggable="draggable && isDragEnabled(row, row._index ?? 0)"
@@ -86,7 +90,7 @@
                   name="drag-indicator"
                   size="sm"
                   :class="[
-                    'shrink-0 inline-flex items-center justify-center w-4 text-[var(--color-field-list-drag-icon)]',
+                    'shrink-0 inline-flex items-center justify-center w-4 text-field-list-drag-icon',
                     isDragEnabled(row, row._index ?? 0)
                       ? 'cursor-grab'
                       : 'cursor-not-allowed opacity-40',
@@ -97,7 +101,7 @@
               </OFieldRow>
             </slot>
           </div>
-          <div v-if="$slots['field-actions']" class="o-field-list__actions flex items-stretch shrink-0 invisible opacity-0 transition-[opacity,visibility] duration-[120ms] ease-[ease] absolute right-1 top-1/2 -translate-y-1/2 border border-(--color-field-list-actions-border) rounded-[0.1875rem] overflow-hidden bg-(--color-field-list-actions-bg)">
+          <div v-if="$slots['field-actions']" class="o-field-list__actions flex items-stretch shrink-0 invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-[opacity,visibility] duration-[120ms] ease-[ease] absolute right-1 top-1/2 -translate-y-1/2 border border-field-list-actions-border rounded-default overflow-hidden bg-field-list-actions-bg">
             <slot name="field-actions" :row="row" :index="row._index" />
           </div>
         </div>
@@ -105,7 +109,7 @@
         <!-- Expanded content -->
         <div
           v-if="isExpanded(row) && $slots.expansion"
-          class="w-full pt-1 pb-[0.375rem] border border-[var(--color-field-list-expansion-border)] border-t-0 rounded-b-[0.1875rem] mb-[0.375rem] relative z-[1] box-border"
+          class="w-full pt-1 pb-1.5 border border-field-list-expansion-border border-t-0 rounded-b-default mb-1.5 relative z-[1] box-border"
         >
           <slot name="expansion" :row="row" />
         </div>
@@ -133,6 +137,8 @@ const props = withDefaults(
     fields: FieldItem[];
     search?: string;
     searchPlaceholder?: string;
+    /** Extra classes for the search block — see the template note on gutters. */
+    searchClass?: string;
     loading?: boolean;
     currentPage?: number;
     pageSize?: number;
@@ -148,6 +154,7 @@ const props = withDefaults(
   {
     search: "",
     searchPlaceholder: "Search fields",
+    searchClass: "",
     loading: false,
     currentPage: 1,
     pageSize: 50,
@@ -376,11 +383,15 @@ function scrollToTop() {
 defineExpose({ scrollToTop });
 </script>
 
-<style>
-/* =============================================================
-   OFieldList — compact data-panel variant
-   Tokens mapped to O2 design system, small fonts for dense UI
-   ============================================================= */
+<style scoped>
+/* keep(lib-override:OButton): the __actions rules flatten SLOT content (OButton
+   roots rendered by consumers) — they need `!important` to beat the button's own
+   utilities. Slotted nodes carry the CONSUMER's scope id, not ours, so the child
+   selectors go through `:deep()`; the block itself is scoped (the wrapper is our
+   own element, so it still gets our scope id). The group-header sibling-combinator
+   spacing is co-located here (adjacent/`:not(:first-child)` selectors aren't
+   expressible per-element as utilities). Row-hover reveal of __actions is handled
+   by `group`/`group-hover` utilities in the template. */
 
 /* Defensive: two adjacent group headers shouldn't double their separator. */
 .o-field-list__group-header + .o-field-list__group-header {
@@ -390,32 +401,19 @@ defineExpose({ scrollToTop });
 /* Add a section break above every group header except the first one,
    so consecutive streams render as visually distinct sections.
    Pure margin — no border-top, because in dark mode the border-color token
-   resolves to `rgba(255, 255, 255, 0.40)` and renders as a glaring white
-   line above the header band. */
+   resolves to a translucent white that renders as a glaring line above the band. */
 .o-field-list__group-header:not(:first-child) {
   margin-top: 0.5rem;
 }
 
-/* No background-color here — each slot consumer owns its own hover highlight.
-   __row:hover is kept solely to reveal __actions (PanelFieldList +X/+Y buttons).
-   Hovering any child (including expanded slot content) propagates :hover up to
-   __row, so __actions appear correctly without the background bleeding into
-   expansion panels or value rows. */
-.o-field-list__row:hover .o-field-list__actions {
-  visibility: visible;
-  opacity: 1;
-}
-
-/* Make each chip flush (no individual border, no rounded corners),
-   and put a vertical separator between adjacent chips.
-   `!important` overrides Tailwind utility classes on the OButton root
-   (`border-0`, `rounded`, etc.) which otherwise win on specificity. */
-.o-field-list__actions > * {
+/* Make each chip flush (no individual border, no rounded-default corners),
+   and put a vertical separator between adjacent chips. */
+.o-field-list__actions > :deep(*) {
   border: 0 !important;
   border-radius: 0 !important;
   background-color: transparent !important;
 }
-.o-field-list__actions > *:not(:first-child) {
+.o-field-list__actions > :deep(*:not(:first-child)) {
   border-left: 1px solid var(--color-field-list-actions-border) !important;
 }
 </style>
diff --git a/web/src/lib/lists/FieldList/OFieldRow.vue b/web/src/lib/lists/FieldList/OFieldRow.vue
index fe71fc2192..5c6f81fc1e 100644
--- a/web/src/lib/lists/FieldList/OFieldRow.vue
+++ b/web/src/lib/lists/FieldList/OFieldRow.vue
@@ -16,13 +16,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <div
-    class="o-field-row group h-6 flex items-center gap-1 w-full relative pl-1 rounded-[0.25rem] hover:bg-field-list-row-hover-bg"
+    class="o-field-row group h-6 flex items-center gap-1 w-full relative pl-1 rounded-default hover:bg-field-list-row-hover-bg"
     :class="[highlight && 'bg-field-list-row-hover-bg!']"
   >
     <slot />
     <div
       v-if="$slots.actions"
-      class="o-field-row__actions absolute right-0 top-0 bottom-0 hidden group-hover:flex items-center py-0 px-1 gap-[0.375rem] bg-(--color-field-list-actions-bg) rounded overflow-hidden"
+      class="o-field-row__actions absolute right-0 top-0 bottom-0 hidden group-hover:flex items-center py-0 px-1 gap-1.5 bg-field-list-actions-bg rounded-default overflow-hidden"
     >
       <slot name="actions" />
     </div>
diff --git a/web/src/lib/navigation/Pagination/OPagination.vue b/web/src/lib/navigation/Pagination/OPagination.vue
index 48d33fa19f..f291955290 100644
--- a/web/src/lib/navigation/Pagination/OPagination.vue
+++ b/web/src/lib/navigation/Pagination/OPagination.vue
@@ -65,7 +65,7 @@ const navigate = (page: number) => {
     <!-- Previous page -->
     <button
       type="button"
-      class="o-pagination__btn flex size-7 items-center justify-center rounded transition-colors"
+      class="o-pagination__btn flex size-7 items-center justify-center rounded-default transition-colors"
       :class="[
         isFirst || disable
           ? 'text-pagination-nav-disabled-text cursor-not-allowed opacity-50'
@@ -84,7 +84,7 @@ const navigate = (page: number) => {
       v-for="page in pages"
       :key="page"
       type="button"
-      class="o-pagination__btn flex size-7 items-center justify-center rounded text-sm font-medium transition-colors"
+      class="o-pagination__btn flex size-7 items-center justify-center rounded-default text-sm font-medium transition-colors"
       :class="[
         page === modelValue
           ? 'bg-pagination-item-active-bg text-pagination-item-active-text cursor-default'
@@ -106,7 +106,7 @@ const navigate = (page: number) => {
     <!-- Next page -->
     <button
       type="button"
-      class="o-pagination__btn flex size-7 items-center justify-center rounded transition-colors"
+      class="o-pagination__btn flex size-7 items-center justify-center rounded-default transition-colors"
       :class="[
         isLast || disable
           ? 'text-pagination-nav-disabled-text cursor-not-allowed opacity-50'
diff --git a/web/src/lib/navigation/Stepper/OStep.vue b/web/src/lib/navigation/Stepper/OStep.vue
index 5941d8025b..86d215e9ef 100644
--- a/web/src/lib/navigation/Stepper/OStep.vue
+++ b/web/src/lib/navigation/Stepper/OStep.vue
@@ -143,7 +143,7 @@ const titleClasses = computed<string>(() => {
 const triggerClasses = computed<string>(() => {
   const base = [
     'flex items-center gap-3 w-full text-start',
-    'rounded-md px-1.5 py-1.5 outline-none select-none',
+    'rounded-default px-1.5 py-1.5 outline-none select-none',
     'transition-colors duration-150',
   ].join(' ')
   if (canClick.value) {
diff --git a/web/src/lib/navigation/Stepper/OStepper.vue b/web/src/lib/navigation/Stepper/OStepper.vue
index 9cba7adf1a..3c177f2a44 100644
--- a/web/src/lib/navigation/Stepper/OStepper.vue
+++ b/web/src/lib/navigation/Stepper/OStepper.vue
@@ -98,7 +98,7 @@ function titleClasses(step: StepRegistration): string {
 function triggerClasses(step: StepRegistration): string {
   const base = [
     'flex flex-row items-center gap-2 px-2 py-1.5',
-    'rounded-md outline-none select-none',
+    'rounded-default outline-none select-none',
     'transition-colors duration-150',
   ].join(' ')
   if (canNavigateTo(step)) {
@@ -128,7 +128,7 @@ function triggerClasses(step: StepRegistration): string {
       v-if="isHorizontal"
       role="list"
       aria-label="Steps"
-      class="sticky top-0 z-10 flex items-start w-full pb-2 bg-[var(--o2-primary-background)]!"
+      class="sticky top-0 z-10 flex items-start w-full pb-2 bg-surface-base!"
     >
       <template v-for="(step, index) in sortedSteps" :key="step.name">
         <!-- Step trigger (indicator circle + title) -->
@@ -158,7 +158,7 @@ function triggerClasses(step: StepRegistration): string {
               <span :class="titleClasses(step)">{{ step.title }}</span>
               <span
                 v-if="step.description"
-                class="text-[11px] text-text-secondary mt-0.5 leading-tight"
+                class="text-2xs text-text-secondary mt-0.5 leading-tight"
               >
                 {{ step.description }}
               </span>
@@ -169,7 +169,7 @@ function triggerClasses(step: StepRegistration): string {
         <!-- Connector line between consecutive steps -->
         <div
           v-if="index < sortedSteps.length - 1"
-          class="h-px flex-1 shrink mt-[22px] mx-1 min-w-[8px]"
+          class="h-px flex-1 shrink mt-5.5 mx-1 min-w-2"
           :class="step.done ? 'bg-stepper-connector-done' : 'bg-stepper-connector'"
           aria-hidden="true"
         />
diff --git a/web/src/lib/navigation/Tabs/OTab.vue b/web/src/lib/navigation/Tabs/OTab.vue
index e56de18d76..5c2ce28a01 100644
--- a/web/src/lib/navigation/Tabs/OTab.vue
+++ b/web/src/lib/navigation/Tabs/OTab.vue
@@ -78,8 +78,17 @@ const baseClasses = computed<string>(() => [
   isVertical.value
     ? 'flex justify-start'
     : 'inline-flex justify-center',
-  'px-2 font-normal text-sm whitespace-nowrap',
-  isVertical.value ? 'rounded-lg' : 'rounded-t-md',
+  // Horizontal inset. A vertical (side-rail) tab is a selectable PILL, so the
+  // rail container insets it (px-1.5) to give the pill breathing room from the
+  // rail edges. With that 6px container inset + the tab's own 2px active border
+  // + this pl-1, the label lands on the page-edge grid line (12px) while the
+  // pill never touches the rail edge. Rails add the px-1.5; tabs don't hand-roll
+  // their own padding override.
+  isVertical.value
+    ? 'pl-1 pr-2'
+    : 'px-2',
+  'font-normal text-sm whitespace-nowrap',
+  isVertical.value ? 'rounded-default' : 'rounded-t-default',
   'outline-none transition-[color,background-color,border-color,text-decoration-color,fill,stroke,box-shadow] duration-150',
   'select-none',
   'ring-offset-1 ring-offset-surface-base',
@@ -123,7 +132,7 @@ const heightClasses = computed<string>(() => {
   if (isVertical.value) {
     return isDense.value ? 'py-1.5' : 'py-2'
   }
-  return isDense.value ? 'h-[32px]' : 'h-[40px]'
+  return isDense.value ? 'h-8' : 'h-10'
 })
 </script>
 
diff --git a/web/src/lib/navigation/Tabs/OTabPanel.spec.ts b/web/src/lib/navigation/Tabs/OTabPanel.spec.ts
index 8dec810531..02979b67c5 100644
--- a/web/src/lib/navigation/Tabs/OTabPanel.spec.ts
+++ b/web/src/lib/navigation/Tabs/OTabPanel.spec.ts
@@ -165,12 +165,4 @@ describe('OTabPanel', () => {
     const wrapper = mountTabPanel({ name: 'tab1', activeTab: 'tab1', stretch: true })
     expect(wrapper.find('[role="tabpanel"]').classes()).toContain('h-full')
   })
-
-  // --- No default padding (legacy check) ---
-
-  it('does not add q-tab-panel class', () => {
-    const wrapper = mountTabPanel({ name: 'tab1', activeTab: 'tab1' })
-    const panel = wrapper.find('[role="tabpanel"]')
-    expect(panel.classes()).not.toContain('q-tab-panel')
-  })
 })
diff --git a/web/src/lib/navigation/Tabs/OTabs.spec.ts b/web/src/lib/navigation/Tabs/OTabs.spec.ts
index 6558fea09f..860f30a829 100644
--- a/web/src/lib/navigation/Tabs/OTabs.spec.ts
+++ b/web/src/lib/navigation/Tabs/OTabs.spec.ts
@@ -266,7 +266,10 @@ describe('OTabs', () => {
 
   it('applies horizontal tablist horizontal padding for focus spacing', () => {
     const wrapper = mountTabs()
-    expect(wrapper.find('.o-tabs').classes()).toContain('px-[3px]')
+    // The hardcoded arbitrary px-[3px] is now px-0.75 (0.1875rem = 3px) on the
+    // rem-based scale, matching the pt-0.75 on the scroll container above.
+    expect(wrapper.find('.o-tabs').classes()).toContain('px-0.75')
+    expect(wrapper.html()).not.toContain('px-[3px]')
   })
 
   // --- Numeric modelValue ---
diff --git a/web/src/lib/navigation/Tabs/OTabs.vue b/web/src/lib/navigation/Tabs/OTabs.vue
index e055ee36f7..5ef0e50c13 100644
--- a/web/src/lib/navigation/Tabs/OTabs.vue
+++ b/web/src/lib/navigation/Tabs/OTabs.vue
@@ -168,7 +168,7 @@ function updateScrollState(): void {
       const right = tab.offsetLeft + tab.offsetWidth
       if (right > contentWidth) contentWidth = right
     }
-    if (contentWidth > 0) contentWidth += 3 // tablist px-[3px] right padding
+    if (contentWidth > 0) contentWidth += 3 // tablist px-0.75 (3px) right padding
   }
   hasOverflow.value = contentWidth > el.clientWidth + 1
   canScrollLeft.value = el.scrollLeft > 1
@@ -269,7 +269,7 @@ const alignClasses: Record<NonNullable<OTabsProps['align']>, string> = {
     <TabsList as-child :loop="true">
       <div
         ref="tablistRef"
-        :class="['o-tabs flex flex-col gap-0.5 relative p-1', alignClasses[align], { 'border-b border-solid border-[var(--o2-border-color)]': bordered }]"
+        :class="['o-tabs flex flex-col gap-0.5 relative p-1', alignClasses[align], { 'border-b border-solid border-card-glass-border': bordered }]"
         @dragstart="onTabDragStart"
         @dragover="onTabDragOver"
         @drop="onTabDrop"
@@ -289,7 +289,7 @@ const alignClasses: Record<NonNullable<OTabsProps['align']>, string> = {
     as-child
     @update:model-value="(v) => onTabClick(v as string | number)"
   >
-    <div :class="['flex flex-row items-stretch', { 'border-b border-solid border-[var(--o2-border-color)]': bordered }]">
+    <div :class="['flex flex-row items-stretch', { 'border-b border-solid border-card-glass-border': bordered }]">
       <!-- Left arrow -->
       <button
         v-show="hasOverflow"
@@ -311,7 +311,7 @@ const alignClasses: Record<NonNullable<OTabsProps['align']>, string> = {
         <TabsList as-child :loop="true">
           <div
             ref="tablistRef"
-            :class="['o-tabs flex flex-row relative px-[3px]', alignClasses[align]]"
+            :class="['o-tabs flex flex-row relative px-0.75', alignClasses[align]]"
             @focusin="handleFocusin"
             @dragstart="onTabDragStart"
             @dragover="onTabDragOver"
diff --git a/web/src/lib/overlay/Dialog/ODialog.spec.ts b/web/src/lib/overlay/Dialog/ODialog.spec.ts
index 84d0063f6a..15f2a50ebf 100644
--- a/web/src/lib/overlay/Dialog/ODialog.spec.ts
+++ b/web/src/lib/overlay/Dialog/ODialog.spec.ts
@@ -215,46 +215,6 @@ describe("ODialog", () => {
   });
 
   describe("body action button validation suppression", () => {
-    it("AC-1/AC-2: focusin on a non-input body element calls resetValidation on q-fields", async () => {
-      const resetValidation = vi.fn();
-      const wrapper = mount(ODialog, {
-        props: { open: true },
-        slots: {
-          default: `
-            <div class="q-field" data-testid="name-field"></div>
-            <button data-testid="action-btn">+</button>
-          `,
-        },
-      });
-      // Attach the vue component instance mock so clearBodyValidation can reach it
-      const qField = wrapper.find('[data-testid="name-field"]').element as any;
-      qField.__vueParentComponent = { ctx: { resetValidation } };
-
-      await wrapper.find('[data-testid="action-btn"]').trigger("focusin");
-
-      expect(resetValidation).toHaveBeenCalled();
-    });
-
-    it("AC-1/AC-2: focusin on a native input inside q-field does NOT call resetValidation", async () => {
-      const resetValidation = vi.fn();
-      const wrapper = mount(ODialog, {
-        props: { open: true },
-        slots: {
-          default: `
-            <div class="q-field">
-              <input data-testid="name-input" />
-            </div>
-          `,
-        },
-      });
-      const qField = wrapper.find(".q-field").element as any;
-      qField.__vueParentComponent = { ctx: { resetValidation } };
-
-      await wrapper.find('[data-testid="name-input"]').trigger("focusin");
-
-      expect(resetValidation).not.toHaveBeenCalled();
-    });
-
     it("AC-4: primary button emits click:primary so consumer can trigger validation", async () => {
       const wrapper = mount(ODialog, {
         props: { open: true, primaryButtonLabel: "Save" },
diff --git a/web/src/lib/overlay/Dialog/ODialog.vue b/web/src/lib/overlay/Dialog/ODialog.vue
index 74c3d0fe21..8e0b273501 100644
--- a/web/src/lib/overlay/Dialog/ODialog.vue
+++ b/web/src/lib/overlay/Dialog/ODialog.vue
@@ -22,7 +22,7 @@ defineOptions({ inheritAttrs: false });
 const $attrs = useAttrs();
 // Forward the consumer's `data-test` from <ODialog data-test="…"> onto the
 // rendered panel so e2e selectors can scope to the specific dialog instance
-// using the audit pattern: [data-test="<parent>"] [data-test="o-dialog-*-btn"].
+// using the pattern: [data-test="<parent>"] [data-test="o-dialog-*-btn"].
 // (DialogRoot is renderless, so default attribute inheritance would lose it.)
 const parentDataTest = computed(() => $attrs["data-test"] as string | undefined);
 
@@ -84,7 +84,6 @@ function handleEscapeKeyDown(e: KeyboardEvent) {
     e.preventDefault();
     return;
   }
-  clearBodyValidation();
   handleOpenChange(false);
 }
 
@@ -125,7 +124,6 @@ function handleInteractOutside(e: Event) {
     e.preventDefault();
     return;
   }
-  clearBodyValidation();
 }
 
 // Header renders when there is a header slot, a title, any sub-slot, OR a visible close button.
@@ -207,43 +205,12 @@ const contentStyle = computed(() => {
   return Object.keys(style).length ? style : undefined;
 });
 
-// ── Validation reset on cancel-path close ───────────────────────────────────
-/** Reset q-field validation for every field in the body slot so that
- *  cancel-path closes (Cancel button, ×, Escape, overlay click) never surface
- *  lazy-rules validation errors to the user. */
-function clearBodyValidation() {
-  const body = bodyRef.value;
-  if (!body) return;
-  body.querySelectorAll<HTMLElement>('.q-field').forEach((el) => {
-    const vm = (el as any).__vueParentComponent;
-    if (vm?.ctx?.resetValidation) {
-      vm.ctx.resetValidation();
-    } else if (typeof vm?.exposed?.resetValidation === 'function') {
-      vm.exposed.resetValidation();
-    }
-  });
-}
-
-/** When focus moves to a non-form element inside the body (e.g. an action
- *  button), reset all field validation so sibling fields never show
- *  premature errors before the user clicks Save. */
-function handleBodyFocusIn(e: FocusEvent) {
-  const target = e.target as HTMLElement | null;
-  if (!target) return;
-  const isFormField =
-    target.matches('input, textarea, select') ||
-    !!target.closest('.q-field, .q-input, .q-select');
-  if (!isFormField) {
-    clearBodyValidation();
-  }
-}
-
 // ── Auto-focus logic ─────────────────────────────────────────────────────────
 const bodyRef = ref<HTMLElement | null>(null);
 const primaryBtnRef = ref<InstanceType<typeof OButton> | null>(null);
 
 // Text fields take priority; a select/combobox trigger (OSelect listbox
-// trigger, reka SelectTrigger, q-select) is the second tier so a dialog whose
+// trigger, reka SelectTrigger) is the second tier so a dialog whose
 // only field is a select still keeps keyboard focus on a field — otherwise
 // keystrokes land on a plain button and leak to page-level single-letter
 // shortcuts (e.g. "s" on logs opening Save View over an open dialog).
@@ -263,7 +230,7 @@ function findAutoFocusTarget(root: Element): HTMLElement | null {
   const textField = scan(AUTOFOCUS_TEXT_FIELDS).find(
     (el) =>
       !el.closest(
-        '.q-select, .o-select, [role="combobox"], [role="listbox"], [data-no-autofocus]',
+        '.o-select, [role="combobox"], [role="listbox"], [data-no-autofocus]',
       ),
   );
   if (textField) return textField;
@@ -429,7 +396,7 @@ watch(internalOpen, (open) => {
           !isFullSize && 'max-h-[90vh]',
           // Surface
           'bg-dialog-bg border border-dialog-border',
-          !isFullSize && 'rounded-xl',
+          !isFullSize && 'rounded-surface',
           'shadow-dialog',
           // Typography
           'text-dialog-content-text',
@@ -467,10 +434,10 @@ watch(internalOpen, (open) => {
           v-if="hasHeader"
           :class="[
             'flex items-center gap-2 shrink-0',
-            'px-(--spacing-dialog-header-px) py-(--spacing-dialog-header-py)',
+            'px-dialog-header-px py-dialog-header-py',
             'bg-dialog-header-bg text-dialog-header-text',
             'border-b border-dialog-header-border',
-            !isFullSize && 'rounded-t-xl',
+            !isFullSize && 'rounded-t-surface',
           ]"
         >
           <!-- CASE 1: Full override — backward compat, sub-slots are ignored -->
@@ -519,7 +486,7 @@ watch(internalOpen, (open) => {
               @mousedown.prevent
               :class="[
                 'shrink-0 flex items-center justify-center',
-                'h-7 w-7 rounded-md',
+                'h-7 w-7 rounded-default',
                 'text-dialog-close-text',
                 'hover:bg-dialog-close-hover-bg',
                 'active:bg-dialog-close-active-bg',
@@ -557,13 +524,12 @@ watch(internalOpen, (open) => {
           :class="[
             'min-h-0 overflow-x-hidden',
             isFullSize ? 'flex-1 overflow-hidden p-0' : 'overflow-y-auto',
-            !isFullSize && 'px-(--spacing-dialog-content-px) py-(--spacing-dialog-content-py)',
+            !isFullSize && 'px-dialog-content-px py-dialog-content-py',
             'text-dialog-content-text',
             !isFullSize && canScrollUp && '[box-shadow:inset_0_8px_6px_-6px_rgba(0,0,0,0.1)]',
             !isFullSize && canScrollDown && '[box-shadow:inset_0_-8px_6px_-6px_rgba(0,0,0,0.1)]',
             !isFullSize && canScrollUp && canScrollDown && '[box-shadow:inset_0_8px_6px_-6px_rgba(0,0,0,0.1),inset_0_-8px_6px_-6px_rgba(0,0,0,0.1)]',
           ]"
-          @focusin="handleBodyFocusIn"
         >
           <slot />
         </div>
@@ -573,10 +539,10 @@ watch(internalOpen, (open) => {
           v-if="hasFooter"
           :class="[
             'shrink-0',
-            'px-(--spacing-dialog-footer-px) py-(--spacing-dialog-footer-py)',
+            'px-dialog-footer-px py-dialog-footer-py',
             'bg-dialog-footer-bg',
             'border-t border-dialog-footer-border',
-            !isFullSize && 'rounded-b-xl',
+            !isFullSize && 'rounded-b-surface',
           ]"
         >
           <!-- ── Built-in footer buttons ──────────────────────────────────────── -->
diff --git a/web/src/lib/overlay/Drawer/ODrawer.spec.ts b/web/src/lib/overlay/Drawer/ODrawer.spec.ts
index bbe191bb96..7b4c09a699 100644
--- a/web/src/lib/overlay/Drawer/ODrawer.spec.ts
+++ b/web/src/lib/overlay/Drawer/ODrawer.spec.ts
@@ -207,46 +207,6 @@ describe("ODrawer", () => {
   });
 
   describe("body action button validation suppression", () => {
-    it("AC-1/AC-2: focusin on a non-input body element calls resetValidation on q-fields", async () => {
-      const resetValidation = vi.fn();
-      const wrapper = mount(ODrawer, {
-        props: { open: true },
-        slots: {
-          default: `
-            <div class="q-field" data-testid="name-field"></div>
-            <button data-testid="action-btn">+</button>
-          `,
-        },
-      });
-      // Attach the vue component instance mock so clearBodyValidation can reach it
-      const qField = wrapper.find('[data-testid="name-field"]').element as any;
-      qField.__vueParentComponent = { ctx: { resetValidation } };
-
-      await wrapper.find('[data-testid="action-btn"]').trigger("focusin");
-
-      expect(resetValidation).toHaveBeenCalled();
-    });
-
-    it("AC-1/AC-2: focusin on a native input inside q-field does NOT call resetValidation", async () => {
-      const resetValidation = vi.fn();
-      const wrapper = mount(ODrawer, {
-        props: { open: true },
-        slots: {
-          default: `
-            <div class="q-field">
-              <input data-testid="name-input" />
-            </div>
-          `,
-        },
-      });
-      const qField = wrapper.find(".q-field").element as any;
-      qField.__vueParentComponent = { ctx: { resetValidation } };
-
-      await wrapper.find('[data-testid="name-input"]').trigger("focusin");
-
-      expect(resetValidation).not.toHaveBeenCalled();
-    });
-
     it("AC-4: primary button emits click:primary so consumer can trigger validation", async () => {
       const wrapper = mount(ODrawer, {
         props: { open: true, primaryButtonLabel: "Save" },
diff --git a/web/src/lib/overlay/Drawer/ODrawer.types.ts b/web/src/lib/overlay/Drawer/ODrawer.types.ts
index ffb35b869c..94307e9fbf 100644
--- a/web/src/lib/overlay/Drawer/ODrawer.types.ts
+++ b/web/src/lib/overlay/Drawer/ODrawer.types.ts
@@ -47,6 +47,18 @@ export interface DrawerProps {
    */
   width?: number;
 
+  /**
+   * Full-bleed body (SPACING_AUDIT.md §7/§8). By default the drawer body owns a
+   * single, fixed inset — the same `--spacing-dialog-content-*` token ODialog
+   * uses — so every drawer's content lines up identically and consumers never
+   * hand-roll their own body padding. Set `bleed` for the exceptions that must
+   * reach the edges: code/JSON editors, embedded dashboards, and full-width
+   * tables/detail views that supply their own inset. This is the only body-
+   * spacing knob, on purpose — a fixed default with one escape hatch, not a
+   * size scale.
+   */
+  bleed?: boolean;
+
   /**
    * Convenience prop: plain-text title rendered in the header.
    * Ignored when the `header` slot is provided.
diff --git a/web/src/lib/overlay/Drawer/ODrawer.vue b/web/src/lib/overlay/Drawer/ODrawer.vue
index 195a1353d4..c9bd2dbe8f 100644
--- a/web/src/lib/overlay/Drawer/ODrawer.vue
+++ b/web/src/lib/overlay/Drawer/ODrawer.vue
@@ -19,8 +19,8 @@ import { FORM_SUBMIT_STATE_KEY } from "@/lib/forms/Form/OForm.types";
 defineOptions({ inheritAttrs: false });
 const $attrs = useAttrs();
 // Forward the consumer's `data-test` from <ODrawer data-test="…"> onto the
-// rendered panel so e2e selectors can scope to the specific drawer instance
-// using the audit pattern: [data-test="<parent>"] [data-test="o-drawer-*-btn"].
+// rendered panel so e2e selectors can scope to the specific drawer instance via
+// [data-test="<parent>"] [data-test="o-drawer-*-btn"].
 // (DialogRoot is renderless, so default attribute inheritance would lose it.)
 const parentDataTest = computed(() => $attrs["data-test"] as string | undefined);
 
@@ -28,6 +28,7 @@ const props = withDefaults(defineProps<DrawerProps>(), {
   persistent: false,
   side: "right",
   size: "md",
+  bleed: false,
   showClose: true,
   width: undefined,
   seamless: false,
@@ -72,7 +73,6 @@ function handleEscapeKeyDown(e: KeyboardEvent) {
     e.preventDefault();
     return;
   }
-  clearBodyValidation();
   handleOpenChange(false);
 }
 
@@ -98,7 +98,6 @@ function handleInteractOutside(e: Event) {
     e.preventDefault();
     return;
   }
-  clearBodyValidation();
 }
 
 // Stacking support: each nested ODrawer gets a higher z-index layer
@@ -133,6 +132,12 @@ const hasFooter = computed(
 const hasTrigger = computed(() => !!slots.trigger);
 const isRight = computed(() => props.side !== "left");
 
+// Fixed body inset (same token as ODialog's body) unless `bleed` is set. One
+// value app-wide → every drawer's content aligns identically. See the `bleed` prop.
+const bodyPaddingClass = computed(() =>
+  props.bleed ? "" : "px-dialog-content-px py-dialog-content-py",
+);
+
 // The primary button is loading when the consumer says so OR a nested OForm is
 // mid-submit (auto). Kept as a computed so the disabled logic below picks it up.
 const primaryLoading = computed(
@@ -190,37 +195,6 @@ const contentStyle = computed(() => {
   return style;
 });
 
-// ── Validation reset on cancel-path close ───────────────────────────────────
-/** Reset q-field validation for every field in the body slot so that
- *  cancel-path closes (Cancel button, ×, Escape, overlay click) never surface
- *  lazy-rules validation errors to the user. */
-function clearBodyValidation() {
-  const body = bodyRef.value;
-  if (!body) return;
-  body.querySelectorAll<HTMLElement>('.q-field').forEach((el) => {
-    const vm = (el as any).__vueParentComponent;
-    if (vm?.ctx?.resetValidation) {
-      vm.ctx.resetValidation();
-    } else if (typeof vm?.exposed?.resetValidation === 'function') {
-      vm.exposed.resetValidation();
-    }
-  });
-}
-
-/** When focus moves to a non-form element inside the body (e.g. an action
- *  button), reset all field validation so sibling fields never show
- *  premature errors before the user clicks Save. */
-function handleBodyFocusIn(e: FocusEvent) {
-  const target = e.target as HTMLElement | null;
-  if (!target) return;
-  const isFormField =
-    target.matches('input, textarea, select') ||
-    !!target.closest('.q-field, .q-input, .q-select');
-  if (!isFormField) {
-    clearBodyValidation();
-  }
-}
-
 // ── Auto-focus logic ─────────────────────────────────────────────────────────
 const bodyRef = ref<HTMLElement | null>(null);
 const primaryBtnRef = ref<InstanceType<typeof OButton> | null>(null);
@@ -237,7 +211,7 @@ function handleOpenAutoFocus(event: Event) {
         ].join(', ')
       );
       const firstField = Array.from(candidates).find(
-        (el) => !el.closest('.q-select, .o-select, [role="combobox"], [role="listbox"], [data-no-autofocus]')
+        (el) => !el.closest('.o-select, [role="combobox"], [role="listbox"], [data-no-autofocus]')
       );
       if (firstField) {
         firstField.focus();
@@ -354,7 +328,7 @@ watch(internalOpen, (open) => {
           isRight
             ? 'border-s border-t border-dialog-border'
             : 'border-e border-t border-dialog-border',
-          'shadow-xl',
+          'shadow-lg',
           // Focus ring
           'outline-none focus-visible:ring-2 focus-visible:ring-dialog-focus-ring',
           // Slide-in animation — direction matches side.
@@ -388,7 +362,7 @@ watch(internalOpen, (open) => {
           v-if="hasHeader"
           :class="[
             'flex items-center gap-2 shrink-0',
-            'px-(--spacing-dialog-header-px) py-(--spacing-dialog-header-py)',
+            'px-dialog-header-px py-dialog-header-py',
             'bg-dialog-header-bg text-dialog-header-text',
             'border-b border-dialog-header-border',
           ]"
@@ -442,7 +416,7 @@ watch(internalOpen, (open) => {
               @mousedown.prevent
               :class="[
                 'shrink-0 flex items-center justify-center',
-                'h-7 w-7 rounded-md',
+                'h-7 w-7 rounded-default',
                 'text-dialog-close-text',
                 'hover:bg-dialog-close-hover-bg',
                 'active:bg-dialog-close-active-bg',
@@ -477,11 +451,11 @@ watch(internalOpen, (open) => {
           :class="[
             'flex-1 min-h-0 overflow-y-auto overflow-x-hidden',
             'text-dialog-content-text',
+            bodyPaddingClass,
             canScrollUp && '[box-shadow:inset_0_8px_6px_-6px_rgba(0,0,0,0.1)]',
             canScrollDown && '[box-shadow:inset_0_-8px_6px_-6px_rgba(0,0,0,0.1)]',
             canScrollUp && canScrollDown && '[box-shadow:inset_0_8px_6px_-6px_rgba(0,0,0,0.1),inset_0_-8px_6px_-6px_rgba(0,0,0,0.1)]',
           ]"
-          @focusin="handleBodyFocusIn"
         >
           <template v-if="!props.lazy || internalOpen">
             <slot />
@@ -493,7 +467,7 @@ watch(internalOpen, (open) => {
           v-if="hasFooter"
           :class="[
             'shrink-0',
-            'px-(--spacing-dialog-footer-px) py-(--spacing-dialog-footer-py)',
+            'px-dialog-footer-px py-dialog-footer-py',
             'bg-dialog-footer-bg',
             'border-t border-dialog-footer-border',
             'border-b border-dialog-footer-border',
diff --git a/web/src/lib/overlay/Dropdown/ODropdown.vue b/web/src/lib/overlay/Dropdown/ODropdown.vue
index 19d5ddf8c2..b027e12b4e 100644
--- a/web/src/lib/overlay/Dropdown/ODropdown.vue
+++ b/web/src/lib/overlay/Dropdown/ODropdown.vue
@@ -285,7 +285,7 @@ onBeforeUnmount(() => {
           // Layout + stacking (must be above the app header/drawer: 2000/3000)
           'min-w-40 p-1 z-[6000]',
           // Surface
-          'bg-dropdown-bg border border-dropdown-border rounded-lg shadow-md',
+          'bg-dropdown-bg border border-dropdown-border rounded-default shadow-md',
           // Typography
           'text-sm text-dropdown-item-text',
           // Animation — clip-path reveal: the menu is unveiled at full size from
diff --git a/web/src/lib/overlay/Dropdown/ODropdownItem.vue b/web/src/lib/overlay/Dropdown/ODropdownItem.vue
index 3b1ff1d0fd..419f5d002d 100644
--- a/web/src/lib/overlay/Dropdown/ODropdownItem.vue
+++ b/web/src/lib/overlay/Dropdown/ODropdownItem.vue
@@ -34,7 +34,7 @@ const variantClasses: Record<
     :text-value="textValue"
     :class="[
       'relative flex items-center gap-2',
-      'w-full px-3 py-1.5 rounded-md',
+      'w-full px-3 py-1.5 rounded-default',
       'cursor-pointer select-none outline-none',
       'transition-colors duration-150',
       variantClasses[variant],
diff --git a/web/src/lib/overlay/Popover/OPopover.vue b/web/src/lib/overlay/Popover/OPopover.vue
index 6d8beb1b01..92e184f73b 100644
--- a/web/src/lib/overlay/Popover/OPopover.vue
+++ b/web/src/lib/overlay/Popover/OPopover.vue
@@ -219,7 +219,7 @@ onBeforeUnmount(() => {
         :class="[
           'outline-none',
           // Surface
-          'bg-dropdown-bg border border-dropdown-border rounded-lg shadow-md',
+          'bg-dropdown-bg border border-dropdown-border rounded-default shadow-md',
           // Open/close reveal animation (matches ODropdown)
           'data-[state=open]:animate-[o2-reveal-down-in_140ms_cubic-bezier(0.16,1,0.3,1)]',
           'data-[state=closed]:animate-[o2-reveal-down-out_100ms_cubic-bezier(0.4,0,1,1)]',
diff --git a/web/src/lib/overlay/Tooltip/OTooltip.vue b/web/src/lib/overlay/Tooltip/OTooltip.vue
index 2d0aa50552..7c3e42d5d2 100644
--- a/web/src/lib/overlay/Tooltip/OTooltip.vue
+++ b/web/src/lib/overlay/Tooltip/OTooltip.vue
@@ -34,9 +34,9 @@ defineSlots<TooltipSlots>();
 const slots = useSlots();
 const hasDefaultSlot = computed(() => !!slots.default);
 
-// ΓöÇΓöÇΓöÇ Child mode (placed inside a parent like q-tooltip) ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ
-// When no default slot is provided, OTooltip acts like q-tooltip: it finds its
-// parent element via a hidden DOM anchor span and attaches hover listeners to it.
+// ─── Child mode (placed inside a parent element as its tooltip) ───────────────
+// When no default slot is provided, OTooltip attaches to its parent: it finds
+// its parent element via a hidden DOM anchor span and attaches hover listeners to it.
 const childAnchorRef = ref<HTMLSpanElement | null>(null);
 const parentEl = ref<Element | null>(null);
 const childOpen = ref(false);
@@ -149,8 +149,8 @@ const contentStyle = computed(() => ({
 
 const contentClasses = computed(() => [
   "z-[10100] px-2.5 py-1.5",
-  "bg-[var(--color-surface-overlay)] rounded-md",
-  "text-xs text-[var(--color-text-primary)] font-medium leading-relaxed",
+  "bg-surface-overlay rounded-default",
+  "text-xs text-text-body font-medium leading-relaxed",
   // Force long unbreakable tokens (file paths, hashes, URLs) to wrap inside the
   // max-width box instead of overflowing onto the content behind the tooltip.
   // overflow-wrap is inherited, so nested content (e.g. pre-wrap divs) wraps too.
@@ -201,14 +201,14 @@ const contentClasses = computed(() => [
           <TooltipArrow
             :width="10"
             :height="5"
-            :class="'fill-[var(--color-surface-overlay)]'"
+            :class="'fill-surface-overlay'"
           />
         </TooltipContent>
       </TooltipPortal>
     </TooltipRoot>
   </TooltipProvider>
 
-  <!-- ΓöÇΓöÇ Child mode: no default slot, attaches to parent element like q-tooltip -->
+  <!-- ── Child mode: no default slot, attaches to parent element as its tooltip -->
   <template v-else>
     <TooltipProvider>
       <TooltipRoot
@@ -217,6 +217,12 @@ const contentClasses = computed(() => [
         @update:open="childOpen = $event"
       >
         <!-- Hidden trigger span; reference overrides positioning anchor to parentEl -->
+        <!-- NOTE: `style="display:none"` here is a FUNCTIONAL CONTRACT, not
+             decoration — do NOT convert it to `class="hidden"`. The anchor
+             resolution in onMounted() skips hidden siblings by testing
+             `.style.display === "none"`, which only sees an INLINE style. With a
+             class, that loop stops on this span and anchors every child-mode
+             tooltip to a zero-size hidden element, so it never opens on hover. -->
         <TooltipTrigger
           as="span"
           :reference="parentEl ?? undefined"
@@ -246,13 +252,14 @@ const contentClasses = computed(() => [
             <TooltipArrow
               :width="10"
               :height="5"
-              :class="'fill-[var(--color-surface-overlay)]'"
+              :class="'fill-surface-overlay'"
             />
           </TooltipContent>
         </TooltipPortal>
       </TooltipRoot>
     </TooltipProvider>
-    <!-- Anchor placeholder: inserted at the real DOM position to resolve parentElement -->
+    <!-- Anchor placeholder: inserted at the real DOM position to resolve parentElement.
+         `style="display:none"` is required, not decorative — see the note above. -->
     <span ref="childAnchorRef" style="display:none" aria-hidden="true" />
   </template>
 </template>
diff --git a/web/src/lib/styles/tokens/base.css b/web/src/lib/styles/tokens/base.css
index 9a1960a76b..e27db40214 100644
--- a/web/src/lib/styles/tokens/base.css
+++ b/web/src/lib/styles/tokens/base.css
@@ -16,485 +16,6 @@
   font-display: swap;
 }
 
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: italic;
-  font-weight: 400;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url(@/styles/fonts/pe0RMImSLYBIv1o4X1M8cce4OdVisMz5nZRqy6cmmmU3t2FQWEAEOvV9wNvrwlNstMKW3Y6K5WMwd-RaLZx3lE4-Hw.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: italic;
-  font-weight: 400;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url(@/styles/fonts/pe0RMImSLYBIv1o4X1M8cce4OdVisMz5nZRqy6cmmmU3t2FQWEAEOvV9wNvrwlNstMKW3Y6K5WMwd-1aLZx3lE4-Hw.woff2) format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: italic;
-  font-weight: 400;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url(@/styles/fonts/pe0RMImSLYBIv1o4X1M8cce4OdVisMz5nZRqy6cmmmU3t2FQWEAEOvV9wNvrwlNstMKW3Y6K5WMwd-ZaLZx3lE4-Hw.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: italic;
-  font-weight: 400;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url(@/styles/fonts/pe0RMImSLYBIv1o4X1M8cce4OdVisMz5nZRqy6cmmmU3t2FQWEAEOvV9wNvrwlNstMKW3Y6K5WMwd-daLZx3lE4-Hw.woff2) format('woff2');
-  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: italic;
-  font-weight: 400;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url(@/styles/fonts/pe0RMImSLYBIv1o4X1M8cce4OdVisMz5nZRqy6cmmmU3t2FQWEAEOvV9wNvrwlNstMKW3Y6K5WMwd-laLZx3lE4.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: italic;
-  font-weight: 600;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url(@/styles/fonts/pe0RMImSLYBIv1o4X1M8cce4OdVisMz5nZRqy6cmmmU3t2FQWEAEOvV9wNvrwlNstMKW3Y6K5WMwd-RaLZx3lE4-Hw.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: italic;
-  font-weight: 600;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url(@/styles/fonts/pe0RMImSLYBIv1o4X1M8cce4OdVisMz5nZRqy6cmmmU3t2FQWEAEOvV9wNvrwlNstMKW3Y6K5WMwd-1aLZx3lE4-Hw.woff2) format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: italic;
-  font-weight: 600;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url(@/styles/fonts/pe0RMImSLYBIv1o4X1M8cce4OdVisMz5nZRqy6cmmmU3t2FQWEAEOvV9wNvrwlNstMKW3Y6K5WMwd-ZaLZx3lE4-Hw.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: italic;
-  font-weight: 600;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url(@/styles/fonts/pe0RMImSLYBIv1o4X1M8cce4OdVisMz5nZRqy6cmmmU3t2FQWEAEOvV9wNvrwlNstMKW3Y6K5WMwd-daLZx3lE4-Hw.woff2) format('woff2');
-  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: italic;
-  font-weight: 600;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url(@/styles/fonts/pe0RMImSLYBIv1o4X1M8cce4OdVisMz5nZRqy6cmmmU3t2FQWEAEOvV9wNvrwlNstMKW3Y6K5WMwd-laLZx3lE4.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: italic;
-  font-weight: 700;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url(@/styles/fonts/pe0RMImSLYBIv1o4X1M8cce4OdVisMz5nZRqy6cmmmU3t2FQWEAEOvV9wNvrwlNstMKW3Y6K5WMwd-RaLZx3lE4-Hw.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: italic;
-  font-weight: 700;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url(@/styles/fonts/pe0RMImSLYBIv1o4X1M8cce4OdVisMz5nZRqy6cmmmU3t2FQWEAEOvV9wNvrwlNstMKW3Y6K5WMwd-1aLZx3lE4-Hw.woff2) format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: italic;
-  font-weight: 700;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url(@/styles/fonts/pe0RMImSLYBIv1o4X1M8cce4OdVisMz5nZRqy6cmmmU3t2FQWEAEOvV9wNvrwlNstMKW3Y6K5WMwd-ZaLZx3lE4-Hw.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: italic;
-  font-weight: 700;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url(@/styles/fonts/pe0RMImSLYBIv1o4X1M8cce4OdVisMz5nZRqy6cmmmU3t2FQWEAEOvV9wNvrwlNstMKW3Y6K5WMwd-daLZx3lE4-Hw.woff2) format('woff2');
-  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: italic;
-  font-weight: 700;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url(@/styles/fonts/pe0RMImSLYBIv1o4X1M8cce4OdVisMz5nZRqy6cmmmU3t2FQWEAEOvV9wNvrwlNstMKW3Y6K5WMwd-laLZx3lE4.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: normal;
-  font-weight: 300;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url(@/styles/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t4R-tQKr51pE8.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: normal;
-  font-weight: 300;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url(@/styles/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7txR-tQKr51pE8.woff2) format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: normal;
-  font-weight: 300;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url(@/styles/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t6R-tQKr51pE8.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: normal;
-  font-weight: 300;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url(@/styles/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t7R-tQKr51pE8.woff2) format('woff2');
-  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: normal;
-  font-weight: 300;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url(@/styles/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t1R-tQKr51.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: normal;
-  font-weight: 400;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url(@/styles/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t4R-tQKr51pE8.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: normal;
-  font-weight: 400;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url(@/styles/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7txR-tQKr51pE8.woff2) format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: normal;
-  font-weight: 400;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url(@/styles/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t6R-tQKr51pE8.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: normal;
-  font-weight: 400;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url(@/styles/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t7R-tQKr51pE8.woff2) format('woff2');
-  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: normal;
-  font-weight: 400;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url(@/styles/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t1R-tQKr51.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: normal;
-  font-weight: 600;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url(@/styles/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t4R-tQKr51pE8.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: normal;
-  font-weight: 600;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url(@/styles/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7txR-tQKr51pE8.woff2) format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: normal;
-  font-weight: 600;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url(@/styles/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t6R-tQKr51pE8.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: normal;
-  font-weight: 600;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url(@/styles/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t7R-tQKr51pE8.woff2) format('woff2');
-  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: normal;
-  font-weight: 600;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url(@/styles/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t1R-tQKr51.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: normal;
-  font-weight: 700;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url(@/styles/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t4R-tQKr51pE8.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: normal;
-  font-weight: 700;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url(@/styles/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7txR-tQKr51pE8.woff2) format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: normal;
-  font-weight: 700;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url(@/styles/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t6R-tQKr51pE8.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: normal;
-  font-weight: 700;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url(@/styles/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t7R-tQKr51pE8.woff2) format('woff2');
-  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: normal;
-  font-weight: 700;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url(@/styles/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t1R-tQKr51.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-/* IBM Plex Sans — latin (weight 400) */
-@font-face {
-  font-family: 'IBM Plex Sans';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('@/styles/fonts/ibm-plex-sans-latin-400.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* IBM Plex Sans — latin-ext (weight 400) */
-@font-face {
-  font-family: 'IBM Plex Sans';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('@/styles/fonts/ibm-plex-sans-latin-ext-400.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* IBM Plex Sans — latin (weight 500) */
-@font-face {
-  font-family: 'IBM Plex Sans';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url('@/styles/fonts/ibm-plex-sans-latin-500.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* IBM Plex Sans — latin-ext (weight 500) */
-@font-face {
-  font-family: 'IBM Plex Sans';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url('@/styles/fonts/ibm-plex-sans-latin-ext-500.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* IBM Plex Sans — latin (weight 600) */
-@font-face {
-  font-family: 'IBM Plex Sans';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url('@/styles/fonts/ibm-plex-sans-latin-600.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* IBM Plex Sans — latin-ext (weight 600) */
-@font-face {
-  font-family: 'IBM Plex Sans';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url('@/styles/fonts/ibm-plex-sans-latin-ext-600.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* IBM Plex Sans — latin (weight 700) */
-@font-face {
-  font-family: 'IBM Plex Sans';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url('@/styles/fonts/ibm-plex-sans-latin-700.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* IBM Plex Sans — latin-ext (weight 700) */
-@font-face {
-  font-family: 'IBM Plex Sans';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url('@/styles/fonts/ibm-plex-sans-latin-ext-700.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-/* IBM Plex Mono — latin (weight 400) */
-@font-face {
-  font-family: 'IBM Plex Mono';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('@/styles/fonts/ibm-plex-mono-latin-400.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* IBM Plex Mono — latin-ext (weight 400) */
-@font-face {
-  font-family: 'IBM Plex Mono';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('@/styles/fonts/ibm-plex-mono-latin-ext-400.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* IBM Plex Mono — latin (weight 500) */
-@font-face {
-  font-family: 'IBM Plex Mono';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url('@/styles/fonts/ibm-plex-mono-latin-500.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* IBM Plex Mono — latin-ext (weight 500) */
-@font-face {
-  font-family: 'IBM Plex Mono';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url('@/styles/fonts/ibm-plex-mono-latin-ext-500.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* IBM Plex Mono — latin (weight 600) */
-@font-face {
-  font-family: 'IBM Plex Mono';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url('@/styles/fonts/ibm-plex-mono-latin-600.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* IBM Plex Mono — latin-ext (weight 600) */
-@font-face {
-  font-family: 'IBM Plex Mono';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url('@/styles/fonts/ibm-plex-mono-latin-ext-600.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
 /* ============================================================
    BASE TOKENS — raw palette, spacing, radius, shadows, fonts
    These are NEVER referenced directly in components.
@@ -504,21 +25,28 @@
 :root {
   /* --- Font family tokens --- */
   --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
-  --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
+  /* Fallbacks are per-glyph: any character Geist Mono lacks (CJK, box-drawing,
+     symbols in log data) falls through to the next family automatically. Do NOT
+     add families we don't ship a @font-face for — they resolve only on machines
+     that happen to have them installed, giving a different look per OS. */
+  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
 
-  /* --- Font size scale --- */
-  --text-xs:   0.75rem;   /* 12px */
-  --text-sm:   0.8125rem; /* 13px */
-  --text-base: 0.875rem; /* 16px */
-  --text-md:   1rem;      /* 16px */
-  --text-lg:   1.125rem;  /* 18px */
-  --text-xl:   1.25rem;   /* 20px */
-  --text-2xl:  1.5rem;    /* 24px */
-  --text-3xl:  1.875rem;  /* 30px */
-  --text-4xl:  2.25rem;   /* 36px */
+  /* --- Font size scale — single source of truth ---
+     Values match Tailwind's conventional scale, so token-driven element rules and
+     the text-* utilities agree pixel-for-pixel. Do NOT use raw text-[..px]. */
+  --text-3xs:  0.625rem;  /* 10px — chart axis micro-labels, dense table sub-text */
+  --text-2xs:  0.6875rem; /* 11px — tiny labels, chips, badge text */
+  --text-xs:   0.75rem;   /* 12px — captions, metadata, timestamps */
+  --text-compact: 0.8125rem; /* 13px — dense body / data tables */
+  --text-sm:   0.875rem;  /* 14px — DEFAULT body text */
+  --text-base: 1rem;      /* 16px — comfortable body, form inputs */
+  --text-lg:   1.125rem;  /* 18px — card / panel titles */
+  --text-xl:   1.25rem;   /* 20px — section headings */
+  --text-2xl:  1.5rem;    /* 24px — page / modal titles */
+  --text-3xl:  1.875rem;  /* 30px — hero numbers / large display */
+  --text-4xl:  2.25rem;   /* 36px — display */
 
   /* --- Line-height scale --- */
-  --leading-xs:    1rem;      /* 16px */
   --leading-sm:    1.125rem;  /* 18px */
   --leading-base:  1.25rem;   /* 20px */
   --leading-md:    1.375rem;  /* 22px */
@@ -529,7 +57,6 @@
   --leading-4xl:   2.5rem;    /* 40px */
 
   /* --- Letter-spacing scale --- */
-  --tracking-tighter: -0.05em;
   --tracking-tight:   -0.025em;
   --tracking-normal:   0;
   --tracking-wide:     0.025em;
@@ -539,8 +66,14 @@
   --font-medium: 500;
   --font-semibold: 600;
   --font-bold: 700;
-  --font-black: 900;
-  /* --- Primary palette — blue-teal #3F7994 --- */
+  /* --- Primary palette — blue-teal #3F7994 ---
+     The runtime theme engine is the AUTHORITY for brand colour. `constants/themes.ts`
+     defines the selectable themes; `utils/theme.ts#generatePrimaryPalette` derives the
+     full 50–950 ramp from the chosen base and writes it as inline styles on <html>,
+     which beat this stylesheet. The values below are the DEFAULT O2 theme only —
+     theme.ts removes its inline overrides when the default theme is active, so these
+     then apply. To change the brand: edit constants/themes.ts (or pick a theme in the
+     UI) — do NOT edit this ramp and expect custom themes to follow. */
   --color-primary-50:  #f5f8fa;
   --color-primary-100: #e2ebef;
   --color-primary-200: #c5d7df;
@@ -554,10 +87,9 @@
   --color-primary-950: #0d181e;   /* darkest — dark-mode hover/drag bgs */
 
   /* --- Grey palette --- */
-  /* Tailwind "neutral" palette — true greys with no blue undertone.
-     Previously used "gray" (#1f2937, #111827, …) which has a cool/blue tint,
-     causing inputs / selects / dropdowns / dialogs to read as dark blue in
-     dark mode. Neutral matches user expectation of "dark grey, not blue". */
+  /* Tailwind "neutral" palette — true greys with no blue undertone. Tailwind's
+     "gray" has a cool/blue tint that makes inputs / selects / dropdowns / dialogs
+     read as dark blue in dark mode; neutral reads as "dark grey, not blue". */
   --color-grey-0:   #ffffff;
   --color-grey-50:  #fafafa;
   --color-grey-100: #f5f5f5;
@@ -576,7 +108,7 @@
   /* --- Error palette --- */
   --color-error-50:  #fef2f2;
   --color-error-100: #fee2e2;
-  --color-error-300: #fca5a5;   /* referenced by destructive-disabled / focus-ring */
+  --color-error-300: #fca5a5;
   --color-error-400: #f87171;
   --color-error-500: #ef4444;
   --color-error-600: #dc2626;
@@ -586,9 +118,9 @@
   --color-success-50:  #f0fdf4;
   --color-success-100: #dcfce7;
   --color-success-200: #bbf7d0;
-  --color-success-400: #4ade80;   /* referenced by EmptyState check illustration */
+  --color-success-400: #4ade80;
   --color-success-500: #22c55e;
-  --color-success-600: #16a34a;   /* parity with error-600 — ghost-success play/resume text */
+  --color-success-600: #16a34a;
   --color-success-700: #15803d;
   --color-success-900: #14532d;
 
@@ -611,60 +143,30 @@
   --color-purple-700: #7e22ce;
   --color-purple-900: #581c87;
 
-  /* --- Info palette (blue, used by OBanner info variant) --- */
-  --color-info-50:  #eff6ff;
-  --color-info-100: #dbeafe;
-  --color-info-200: #bfdbfe;
-  --color-info-700: #1d4ed8;
-  --color-info-800: #1e3a8a;
-  --color-info-900: #1e3a5f;
-
-  /* --- Note container palette (pipeline guideline cards) --- */
-  --color-note-light-bg:        #f9f290;
-  --color-note-light-border:    #f5a623;
-  --color-note-light-text:      #865300;
-  --color-note-dark-border:     #b45309;
-  --color-note-dark-text:       #fef3c7;
-  --color-note-highlight-light: #007bff;
-  --color-note-highlight-dark:  #93c5fd;
-  --color-note-code-light:      #d63384;
-  --color-note-code-dark:       #f9a8d4;
-
   /* --- Teal palette --- */
   --color-teal-50:  #f0fdfa;
-  --color-teal-100: #ccfbf1;
-  --color-teal-200: #99f6e4;
   --color-teal-300: #5eead4;
   --color-teal-400: #2dd4bf;
   --color-teal-500: #14b8a6;
   --color-teal-600: #0d9488;
   --color-teal-700: #0f766e;
-  --color-teal-800: #115e59;
-  --color-teal-900: #134e4a;
 
   /* --- Orange palette --- */
   --color-orange-50:  #fff7ed;
-  --color-orange-100: #ffedd5;
-  --color-orange-200: #fed7aa;
   --color-orange-300: #fdba74;
   --color-orange-400: #fb923c;
   --color-orange-500: #f97316;
   --color-orange-600: #ea580c;
   --color-orange-700: #c2410c;
-  --color-orange-800: #9a3412;
   --color-orange-900: #7c2d12;
 
   /* --- Lime palette --- */
   --color-lime-50:  #f7fee7;
-  --color-lime-100: #ecfccb;
-  --color-lime-200: #d9f99d;
   --color-lime-300: #bef264;
   --color-lime-400: #a3e635;
   --color-lime-500: #84cc16;
   --color-lime-600: #65a30d;
   --color-lime-700: #4d7c0f;
-  --color-lime-800: #365314;
-  --color-lime-900: #1a2e05;
 
   /* --- Amber palette --- */
   --color-amber-50:  #fffbeb;
@@ -675,19 +177,14 @@
   --color-amber-500: #f59e0b;
   --color-amber-600: #d97706;
   --color-amber-700: #b45309;
-  --color-amber-800: #92400e;
-  --color-amber-900: #78350f;
 
   /* --- Cyan palette --- */
   --color-cyan-50:  #ecfeff;
-  --color-cyan-100: #cffafe;
-  --color-cyan-200: #a5f3fc;
   --color-cyan-300: #67e8f9;
   --color-cyan-400: #22d3ee;
   --color-cyan-500: #06b6d4;
   --color-cyan-600: #0891b2;
   --color-cyan-700: #0e7490;
-  --color-cyan-800: #155e75;
   --color-cyan-900: #164e63;
 
   /* --- Blue palette --- */
@@ -714,6 +211,60 @@
   --color-indigo-800: #3730a3;
   --color-indigo-900: #312e81;
 
+  /* --- Trace span categorical palette (50 colors) ---
+     Theme-neutral (same in light/dark); consumed as --color-span-{n} by
+     utils/traces/traceColors.ts. */
+  --color-span-1: #3B82F6;
+  --color-span-2: #EF4444;
+  --color-span-3: #10B981;
+  --color-span-4: #A855F7;
+  --color-span-5: #F97316;
+  --color-span-6: #06B6D4;
+  --color-span-7: #EC4899;
+  --color-span-8: #84CC16;
+  --color-span-9: #6366F1;
+  --color-span-10: #F59E0B;
+  --color-span-11: #14B8A6;
+  --color-span-12: #D946EF;
+  --color-span-13: #16A34A;
+  --color-span-14: #7C3AED;
+  --color-span-15: #F59E0B;
+  --color-span-16: #0284C7;
+  --color-span-17: #E11D48;
+  --color-span-18: #84CC16;
+  --color-span-19: #6366F1;
+  --color-span-20: #EF4444;
+  --color-span-21: #10B981;
+  --color-span-22: #8B5CF6;
+  --color-span-23: #F97316;
+  --color-span-24: #06B6D4;
+  --color-span-25: #EC4899;
+  --color-span-26: #22C55E;
+  --color-span-27: #A855F7;
+  --color-span-28: #FBBF24;
+  --color-span-29: #3B82F6;
+  --color-span-30: #F43F5E;
+  --color-span-31: #14B8A6;
+  --color-span-32: #D946EF;
+  --color-span-33: #84CC16;
+  --color-span-34: #6366F1;
+  --color-span-35: #FB923C;
+  --color-span-36: #0EA5E9;
+  --color-span-37: #F472B6;
+  --color-span-38: #22D3EE;
+  --color-span-39: #A78BFA;
+  --color-span-40: #34D399;
+  --color-span-41: #FCA5A5;
+  --color-span-42: #818CF8;
+  --color-span-43: #FCD34D;
+  --color-span-44: #2DD4BF;
+  --color-span-45: #F9A8D4;
+  --color-span-46: #67E8F9;
+  --color-span-47: #C4B5FD;
+  --color-span-48: #86EFAC;
+  --color-span-49: #FDE68A;
+  --color-span-50: #FCA5A5;
+
   /* --- White / Black --- */
   --color-white: #ffffff;
   --color-black: #000000;
@@ -728,16 +279,274 @@
   --spacing-10:  2.5rem;    /* 40px */
 
   /* --- Radius scale --- */
-  --radius-sm:   0.25rem;   /* 4px  */
-  --radius-md:   0.375rem;  /* 6px  */
-  --radius-lg:   0.5rem;    /* 8px  */
-  --radius-xl:   0.75rem;   /* 12px */
-  --radius-full: 9999px;
+  /* Two real corner radii, one job each — no fake tiers:
+       --radius-default (6px)   tight interactive controls (buttons, inputs,
+                                chips, small icon buttons)
+       --radius-surface (12px)  large surfaces (dialogs, drawers, cards/panels,
+                                the app-shell content area)
+     plus --radius-full for pills/avatars/circles. Changing either knob retunes
+     its whole tier at once. The old sm/md/lg/xl scale was retired — it exposed
+     five names for what was one value; every former ref was repointed
+     (small→default, large→surface). Do NOT reintroduce sm/md/lg/xl. */
+  --radius-default: 0.375rem;  /* 6px  — control tier */
+  --radius-surface: 0.75rem;   /* 12px — surface tier (matches the historical dialog curve) */
+  --radius-full: 9999px;       /* pills / avatars / circles */
+  /* Checkboxes stay at the original 4px: the tick box is tiny (12–16px), and the
+     control tier's 6px reads as visibly round on a box that small. Pinned to its
+     own knob so it holds independent of --radius-default. */
+  --radius-checkbox: 0.25rem;  /* 4px  — checkbox tick box only */
 
   /* --- Shadow scale — hairline-border philosophy ---
-     sm is intentionally none: cards use a 1px border, not a drop shadow.
-     md/lg retained for overlays (dialogs, menus) that need real elevation. */
-  --shadow-sm: none;
+     Only md/lg render real elevation (overlays: dialogs, menus). Cards use a
+     1px border, not a drop shadow — a flat surface needs NO shadow class. */
   --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.08), 0 2px 6px -2px rgb(0 0 0 / 0.06);
   --shadow-lg: 0 12px 24px -4px rgb(0 0 0 / 0.10), 0 4px 8px -4px rgb(0 0 0 / 0.06);
 }
+
+/* ============================================================
+   DOMAIN / DATA-VIZ / BRAND LITERAL TOKENS
+   Fixed categorical / brand values (label chips, trace DAG nodes, code
+   syntax, external-brand replicas, json / service-health / wildcard,
+   gradients, …) — raw values that belong with the palette, not the
+   semantic intent layer. Registered for utilities in semantic.css /
+   component.css @theme inline; dark overrides in dark.css.
+   ============================================================ */
+/* Label chips (field-value type chips). Dark overrides in dark.css;
+   component.css's @theme inline registers these for Tailwind. */
+:root {
+  --color-label-chip-ip-bg:      #F2FCF3;
+  --color-label-chip-ip-text:    #208A3C;
+  --color-label-chip-method-bg:  #FFF2F3;
+  --color-label-chip-method-text: #CC3645;
+  --color-label-chip-url-bg:     #E4E9FE;
+  --color-label-chip-url-text:   #575FC5;
+  --color-label-chip-num-bg:     #FFF4EB;
+  --color-label-chip-num-text:   #A14916;
+  --color-label-chip-float-bg:   #FFF4EB;
+  --color-label-chip-float-text: #A14916;
+  --color-label-chip-hex-bg:     #FFFAEB;
+  --color-label-chip-hex-text:   #C27D04;
+  --color-label-chip-ts-bg:      #FAF5FF;
+  --color-label-chip-ts-text:    #643CB8;
+  --color-label-chip-id-bg:      #F2FCFC;
+  --color-label-chip-id-text:    #077A7F;
+  --color-label-chip-email-bg:   #FFF7F7;
+  --color-label-chip-email-text: #E55765;
+  --color-label-chip-str-bg:     #E8ECF0;
+  --color-label-chip-str-text:   #5A5D6B;
+  --color-label-chip-default-bg: #E8ECF0;
+  --color-label-chip-default-text: #5A5D6B;
+  --color-label-chip-pattern-bg: #EDF3FF;
+  --color-label-chip-pattern-text: #2E55A3;
+}
+
+/* Domain data-viz color tokens */
+:root {
+  --color-actions-column-shadow: rgba(0, 0, 0, 0.1);
+  --color-bg-gray: color-mix(in srgb, var(--color-theme-accent) 10%, rgb(237, 237, 237));
+  --color-card-glass-border: rgba(0, 0, 0, 0.12);
+  --color-cancel-query-bg: #f67a7a;
+  --color-highlight-bg: #e7e6e6;   /* syntax-guide highlight chip (dark: #747474) */
+  --color-brand-indigo: #5960B2;   /* brand indigo — loading bar, AI accents (theme-independent) */
+  --color-card-glass-bg: rgba(255, 255, 255, 0.8);
+  --color-card-glass-solid: rgba(255, 255, 255);
+  --color-dashboard-placeholder-bg: #B3BDF1;
+  --color-error-tag-bg: #f9d3d3;
+  --color-error-tag-text: #e74c3c;
+  --color-field-type-boolean-bg: #e74c3c;
+  --color-field-type-boolean-text: #fff;
+  --color-field-type-float-bg: oklch(94.6% 0.033 307.174);
+  --color-field-type-float-text: oklch(55.8% 0.288 302.321);
+  --color-field-type-number-bg: oklch(95.4% 0.038 75.164);
+  --color-field-type-number-text: oklch(64.6% 0.222 41.116);
+  --color-field-type-string-bg: oklch(95% 0.052 163.051);
+  --color-field-type-string-text: oklch(59.6% 0.145 163.225);
+  --color-field-type-timestamp-bg: oklch(93.2% 0.032 255.585);
+  --color-field-type-timestamp-text: oklch(54.6% 0.245 262.881);
+  --color-focus-ring: #282D5D;
+  --color-gray: #818594;
+  /* AI-assistant identity accents (welcome hero + prompt chips). Same values in
+     both themes — translucent bgs sit fine on light and dark surfaces. */
+  --color-ai-accent: #7B61FF;
+  /* SQL / query-editor violet accent (stream-name label, sql status bar). Theme-aware:
+     lighter in dark for legibility. */
+  --color-sql-accent: #7C3AED;
+  /* VRL-function blue accent, the sibling of --color-sql-accent: the two mark the
+     SQL vs function halves of an expanded search-history / scheduler row.
+     Theme-aware: lighter in dark for legibility. */
+  --color-function-accent: #0A7EBC;
+  --color-lang-sql-text: #7B61FF;
+  --color-lang-sql-bg: rgba(123, 97, 255, 0.10);
+  --color-lang-vrl-text: #F59E0B;
+  --color-lang-vrl-bg: rgba(245, 158, 11, 0.12);
+  --color-lang-promql-text: #10B981;
+  --color-lang-promql-bg: rgba(16, 185, 129, 0.12);
+  /* Trace DAG node-type palette (LLM span types). ONE base color per type;
+     at the call site border = base, bg = base@12% over surface, text = base
+     mixed toward the foreground. Dark values live in dark.css — the base flips,
+     so consumers need NO dark: variant. */
+  --color-dag-node-generation: #4caf50;
+  --color-dag-node-embedding:  #2196f3;
+  --color-dag-node-agent:      #9c27b0;
+  --color-dag-node-tool:       #ff9800;
+  --color-dag-node-chain:      #3f51b5;
+  --color-dag-node-retriever:  #00bcd4;
+  --color-dag-node-task:       #009688;
+  --color-dag-node-evaluator:  #e91e63;
+  --color-dag-node-workflow:   #673ab7;
+  --color-dag-node-rerank:     #03a9f4;
+  --color-dag-node-guardrail:  #f44336;
+  --color-dag-node-event:      #ffc107;
+  --color-dag-node-default:    #9e9e9e;
+  /* Code syntax highlighting (highlight.js) — GitHub light palette. Shared by
+     O2AIChat + OCodeBlock; dark values in dark.css so one rule covers both themes. */
+  --color-syntax-bg:       #f6f8fa;
+  --color-syntax-text:     #24292e;
+  --color-syntax-keyword:  #d73a49;
+  --color-syntax-function: #6f42c1;
+  --color-syntax-number:   #005cc5;
+  --color-syntax-string:   #032f62;
+  --color-syntax-builtin:  #e36209;
+  --color-syntax-comment:  #6a737d;
+  --color-syntax-tag:      #22863a;
+  --color-syntax-bullet:   #735c0f;
+  --color-syntax-addition-fg: #22863a;
+  --color-syntax-addition-bg: #f0fff4;
+  --color-syntax-deletion-fg: #b31d28;
+  --color-syntax-deletion-bg: #ffeef0;
+  /* Brand gradients — theme-independent (same in light/dark) unless noted.
+     One AI gradient reused widely; -subtle/-faint are its idle washes
+     (dark alpha bumped in dark.css). */
+  --color-gradient-ai:        linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
+  --color-gradient-ai-subtle: linear-gradient(135deg, rgba(139,92,246,0.15) 0%, rgba(236,72,153,0.15) 100%);
+  --color-gradient-ai-faint:  linear-gradient(135deg, rgba(139,92,246,0.05) 0%, rgba(236,72,153,0.05) 100%);
+  --color-gradient-brand-ribbon: linear-gradient(90deg, #f59e0b, #ec4899, #7b61ff);
+  --color-gradient-notification: linear-gradient(135deg, #ef4444 0%, #ec4899 100%);
+  --color-gradient-danger:       linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
+  --color-gradient-danger-hover: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
+  /* External brand colors (destination-preview CTAs, promo banner) — fixed,
+     theme-independent by design (replicate other products' brands). */
+  --color-brand-slack:        #007a5a;
+  --color-brand-slack-hover:  #005a42;
+  --color-brand-teams:        #6264a7;
+  --color-brand-teams-hover:  #464775;
+  --color-brand-email:        #007bff;
+  --color-brand-email-hover:  #0056b3;
+  --color-promo-webinar-link:       #1e3a8a;
+  --color-promo-webinar-link-hover: #1e40af;
+  /* Home-banner accent (theme-independent, matches the amber header top-bar).
+     `-accent` is decorative only (gradient wash, border tint, blur blobs, badge
+     dot); `-accent-text` is the darker step the badge LABEL needs to stay legible
+     on the near-white banner. */
+  --color-promo-webinar-accent:      var(--color-amber-400);
+  --color-promo-webinar-accent-text: var(--color-amber-700);
+  /* Body text + separator on the amber top-bar. Fixed (theme-independent) like
+     the rest of the promo art — the bar is always amber, so the text is always
+     the same near-black and the pipe the same muted slate. */
+  --color-promo-webinar-text:        #1a1a1a;
+  --color-promo-webinar-sep:         #374151;
+
+  /* Tool-call thread identity accent (traces LLM thread view). A distinct GREEN
+     that is deliberately NOT --color-dag-node-tool (orange) nor a status/success
+     green — collapsing it onto either would merge two visually-distinct roles.
+     `-accent` is the base the borders/fills derive from via color-mix; `-text`
+     is the readable label colour (flips lighter in dark, see dark.css). */
+  --color-tool-thread-accent:        #4caf50;
+  --color-tool-thread-accent-text:   #2f7a31;
+  /* Flame-graph tooltip (traces) — the tooltip is a FIXED dark glass
+     (rgba(30,41,59,.95), white text) in both themes, so its label/error colours
+     are deliberately theme-independent, like the brand replicas. */
+  --color-flame-tooltip-label: #cbd5e1;
+  --color-flame-tooltip-error: #f87171;
+  /* Global scrollbar treatment (consumed by styles/base-elements.css).
+     Dark steps in dark.css. */
+  --color-scrollbar-thumb:       var(--color-grey-300);
+  --color-scrollbar-thumb-hover: var(--color-grey-400);
+  /* Secondary section-header accent bar. The alert/query editors mark most
+     sections with a --color-theme-accent bar and VRL-editor sections with a
+     deliberately DIFFERENT hue; this token carries that distinction. Dark step
+     in dark.css. */
+  --color-section-accent-secondary: var(--color-teal-600);
+  /* AI-chat message bubbles — subtle theme-aware gradient tints (dark in dark.css). */
+  --color-chat-bubble-user: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%);
+  --color-chat-bubble-ai:   linear-gradient(135deg, #f8f9ff 0%, #e8edff 100%);
+  /* Destination-preview brand replicas (Slack/Teams/Email message mockups) —
+     FIXED, theme-independent (must look like the real product in any app theme). */
+  --color-brand-msg-text: #4a5568;
+  --color-brand-msg-meta: #6c757d;
+  --color-brand-msg-border: #e9ecef;
+  --color-brand-teams-bg: #f3f2f1;
+  --color-brand-teams-text: #605e5c;
+  --color-brand-msg-text-strong: #495057;
+  --color-brand-teams-ink: #323130;
+  --color-brand-slack-text: #1d1c1d;
+  --color-brand-slack-meta: #616061;
+  --color-brand-msg-divider: #ddd;
+  --color-brand-slack-green: #06ac38;
+  --color-brand-msg-bg: #f8f9fa;
+  --color-brand-msg-error: #d63638;
+  --color-brand-email-ink: #172b4d;
+  --color-brand-msg-text-dark: #2d3748;
+  --color-brand-email-warning: #ffab00;
+  --color-brand-msg-border-2: #e1e5e9;
+  --color-brand-email-accent: #d13212;
+  --color-brand-slack-avatar: #81b5a1;
+  --color-brand-slack-aubergine: #4a154b;
+  --color-brand-slack-link: #1264a3;
+  --color-brand-email-ink-deep: #0f1c2e;
+  --color-hover-gray: color-mix(in srgb, var(--color-theme-accent) 2%, rgb(244, 244, 244));
+  --color-hover-shadow: #dddddd;
+  --color-icon-color: #808080;
+  --color-info: #4682FA;
+  --color-json-boolean: #6D28D9;
+  --color-json-key: #B71C1C;
+  --color-json-null: #6B7280;
+  --color-json-number: #2563EB;
+  --color-json-object: #4B5563;
+  --color-json-string: #047857;
+  --color-latency-p95: #0a4ce8;
+  --color-log-table-header-bg: #f1f3f7;
+  --color-log-table-row-bg: #ffffff;
+  --color-log-table-row-border: #e4e6ec;
+  --color-log-table-row-hover: #eff1fd;
+  --color-pivot-header-border: rgba(0, 0, 0, 0.15);
+  --color-section-header-bg: color-mix(in srgb, var(--color-theme-accent) 3%, rgb(247, 247, 247));
+  --color-service-health-critical: #f5222d;
+  --color-service-health-degraded: #faad14;
+  --color-service-health-healthy: #52c41a;
+  --color-service-health-warning: #fa8c16;
+  --color-severity-error-color: #EF5350;
+  --color-severity-warning-color: #FB8C00;
+  --color-status-info-bg: #EDF3FF;
+  --color-status-info-text: #588CF3;
+  --color-status-neutral-text: #6C707E;
+  --color-status-warning-bg: #FFF4EB;
+  --color-status-warning-text: #E56D17;
+  --color-sticky-col-header-bg: #E0E0E0;
+  --color-tab-text-color: #19191E;
+  --color-trace-border: #E8ECF0;
+  --color-trace-hover: #F7F8FA;
+  --color-trace-selected: #F5F8FE;
+  --color-trace-surface: #FFFFFF;
+  --color-trace-text-primary: #19191E;
+  --color-trace-text-secondary: #5A5D6B;
+  --color-warning: #DF9303;
+  --color-wildcard-bar-blue: #88ADF7;
+  --color-wildcard-bar-green: #55A76A;
+  --color-wildcard-bar-orange: #E56D17;
+  --color-wildcard-bar-purple: #834DF0;
+
+  /* Empty-state illustration palette — a fixed warm-earth decorative set for the
+     empty-state character/scene art. Theme-independent: the illustrations read the
+     same in light and dark. Consumed as SVG fill/stroke in
+     lib/core/EmptyState/illustrations/**; not registered as Tailwind utilities.
+     Ordered light → dark. */
+  --color-illustration-sand:     #f0c29a;
+  --color-illustration-tan:      #e8b48c;
+  --color-illustration-clay:     #b5764a;
+  --color-illustration-bark:     #8a6d4f;
+  --color-illustration-wood:     #7a5e43;
+  --color-illustration-umber:    #5b4a3a;
+  --color-illustration-cocoa:    #4a3b2d;
+  --color-illustration-espresso: #3a2f25;
+}
diff --git a/web/src/lib/styles/tokens/component.css b/web/src/lib/styles/tokens/component.css
index da7ec2b50d..344bee24fb 100644
--- a/web/src/lib/styles/tokens/component.css
+++ b/web/src/lib/styles/tokens/component.css
@@ -1,4 +1,4 @@
-/* ============================================================
+/* ============================================================
    COMPONENT TOKENS — per-component design decisions
    Each section is owned exclusively by one component.
    ============================================================
@@ -16,6 +16,10 @@
   --color-separator: var(--color-border-default);
   --color-separator-strong: var(--color-border-strong);
 
+  /* Form field label (dark overrides in dark.css) */
+  --color-input-label-text: var(--color-grey-800);
+  --color-input-label-text-disabled: var(--color-grey-400);
+
   /* Button — primary */
   --color-button-primary: var(--color-primary-600);
   --color-button-primary-hover: var(--color-primary-700);
@@ -25,35 +29,33 @@
   --color-button-primary-focus-ring: var(--color-primary-400);
 
   /* Button — secondary */
-  --o2-secondary-btn-bg: var(--color-surface-panel);
-  --o2-secondary-btn-text: var(--color-text-primary);
-  --o2-secondary-btn-border: var(--color-border-subtle, #e5e7eb);
-  --color-button-secondary: var(--o2-secondary-btn-bg);
-  --color-button-secondary-hover: var(--color-primary-50);
-  --color-button-secondary-active: var(--color-primary-100);
+  --color-button-secondary: var(--color-surface-panel);
+  --color-button-secondary-foreground: var(--color-text-heading);
+  --color-button-secondary-border: var(--color-border-subtle, #e5e7eb);
+  --color-button-secondary-hover: var(--color-surface-accent-hover);
+  --color-button-secondary-active: var(--color-surface-accent-active);
   --color-button-secondary-disabled: var(--color-surface-panel);
-  --color-button-secondary-foreground: var(--o2-secondary-btn-text);
   --color-button-secondary-focus-ring: var(--color-primary-400);
 
   /* Button — outline */
-  --color-button-outline-text: var(--color-text-primary);
+  --color-button-outline-text: var(--color-text-heading);
   --color-button-outline-border: var(--color-border-default);
-  --color-button-outline-hover-bg: var(--o2-hover-accent);
+  --color-button-outline-hover-bg: var(--color-interactive-hover-bg);
   --color-button-outline-hover-border: var(--color-primary-300);
-  --color-button-outline-active-bg: var(--color-primary-100);
+  --color-button-outline-active-bg: var(--color-surface-accent-active);
   --color-button-outline-focus-ring: var(--color-primary-200);
 
   /* Button — ghost */
-  --color-button-ghost-text: var(--color-text-primary);
-  --color-button-ghost-hover-bg: var(--color-primary-50);
-  --color-button-ghost-active-bg: var(--color-primary-100);
+  --color-button-ghost-text: var(--color-text-heading);
+  --color-button-ghost-hover-bg: var(--color-surface-accent-hover);
+  --color-button-ghost-active-bg: var(--color-surface-accent-active);
   --color-button-ghost-hover-ring: var(--color-primary-300);
   --color-button-ghost-focus-ring: var(--color-primary-400);
 
   /* Button — ghost-primary (flat + primary color text) */
   --color-button-ghost-primary-text: var(--color-primary-600);
-  --color-button-ghost-primary-hover-bg: var(--color-primary-50);
-  --color-button-ghost-primary-active-bg: var(--color-primary-100);
+  --color-button-ghost-primary-hover-bg: var(--color-surface-accent-hover);
+  --color-button-ghost-primary-active-bg: var(--color-surface-accent-active);
   --color-button-ghost-primary-focus-ring: var(--color-primary-400);
 
   /* Button — ghost-destructive (flat + destructive color text) */
@@ -71,14 +73,14 @@
   /* Button — ghost-muted (secondary text at rest → primary text + bg on hover) */
   --color-button-ghost-muted-text: var(--color-text-secondary);
   --color-button-ghost-muted-hover-text: var(--color-primary-600);
-  --color-button-ghost-muted-hover-bg: var(--color-primary-50);
-  --color-button-ghost-muted-active-bg: var(--color-primary-100);
+  --color-button-ghost-muted-hover-bg: var(--color-surface-accent-hover);
+  --color-button-ghost-muted-active-bg: var(--color-surface-accent-active);
   --color-button-ghost-muted-focus-ring: var(--color-primary-400);
 
   /* Button — ghost-subtle (secondary text, 60 % opacity at rest, full on hover) */
   --color-button-ghost-subtle-text: var(--color-text-secondary);
-  --color-button-ghost-subtle-hover-bg: var(--color-primary-50);
-  --color-button-ghost-subtle-active-bg: var(--color-primary-100);
+  --color-button-ghost-subtle-hover-bg: var(--color-surface-accent-hover);
+  --color-button-ghost-subtle-active-bg: var(--color-surface-accent-active);
   --color-button-ghost-subtle-focus-ring: var(--color-primary-400);
 
   /* Button — ghost-warning (yellow-600 text for contrast on white, faint yellow tint on hover) */
@@ -115,9 +117,9 @@
   /* ToggleGroup */
   --color-toggle-track-bg: var(--color-surface-subtle);
   --color-toggle-item-bg: transparent;
-  --color-toggle-item-text: var(--color-text-primary);
+  --color-toggle-item-text: var(--color-text-heading);
   --color-toggle-item-hover-bg: var(--color-primary-50);
-  --color-toggle-item-active-bg: var(--color-primary-100);
+  --color-toggle-item-active-bg: var(--color-surface-accent-active);
   --color-toggle-item-active-text: var(--color-primary-700);
   --color-toggle-item-disabled: var(--color-text-disabled);
   --color-toggle-border: var(--color-border-default);
@@ -126,9 +128,9 @@
   /* Dropdown */
   --color-dropdown-bg: var(--color-surface-overlay);
   --color-dropdown-border: var(--color-border-default);
-  --color-dropdown-item-text: var(--color-text-primary);
-  --color-dropdown-item-hover-bg: var(--color-primary-50);
-  --color-dropdown-item-active-bg: var(--color-primary-100);
+  --color-dropdown-item-text: var(--color-text-heading);
+  --color-dropdown-item-hover-bg: var(--color-surface-accent-hover);
+  --color-dropdown-item-active-bg: var(--color-surface-accent-active);
   --color-dropdown-item-disabled: var(--color-text-disabled);
   --color-dropdown-label: var(--color-text-secondary);
   --color-dropdown-separator: var(--color-border-default);
@@ -136,11 +138,12 @@
   --color-dropdown-item-destructive-text: var(--color-error-600);
   --color-dropdown-item-destructive-hover-bg: var(--color-error-50);
 
-  /* Tooltip */
-  --color-tooltip-bg: var(--color-primary-100);
-  --color-tooltip-text: var(--color-text-primary);
-  --color-tooltip-border: var(--color-border-strong);
-  --color-tooltip-arrow: var(--color-primary-100);
+  /* Tooltip — the overlay surface, matching OTooltip's own `bg-surface-overlay`.
+     Chart tooltips (ECharts) read these via chartTheme's chartColor(). */
+  --color-tooltip-bg: var(--color-surface-overlay);
+  --color-tooltip-text: var(--color-text-heading);
+  --color-tooltip-border: var(--color-border-subtle);
+  --color-tooltip-arrow: var(--color-surface-overlay);
 
   /* Icon sizes */
   --text-icon-xs: var(--spacing-3);
@@ -163,9 +166,9 @@
   /* Tabs */
   --color-tabs-indicator: var(--color-primary-600);
   --color-tabs-active-text: var(--color-primary-600);
-  --color-tabs-active-bg: var(--color-primary-100);
+  --color-tabs-active-bg: var(--color-surface-accent-active);
   --color-tabs-inactive-text: var(--color-text-heading);
-  --color-tabs-hover-text: var(--color-text-primary);
+  --color-tabs-hover-text: var(--color-text-heading);
   --color-tabs-hover-bg: color-mix(in srgb, var(--color-primary-100) 50%, var(--color-primary-50));
   --color-tabs-disabled-text: var(--color-text-disabled);
   --color-tabs-bar-border: var(--color-border-default);
@@ -175,20 +178,20 @@
 
   /* Card */
   --color-card-bg: var(--color-surface-panel);
-  --color-card-text: var(--color-text-primary);
+  --color-card-text: var(--color-text-heading);
 
   /* Collapsible */
-  --color-collapsible-label: var(--color-text-primary);
+  --color-collapsible-label: var(--color-text-heading);
   --color-collapsible-caption: var(--color-text-secondary);
   --color-collapsible-icon: var(--color-text-secondary);
   --color-collapsible-trigger-hover-bg: var(--color-primary-100);
-  --color-collapsible-trigger-active-bg: var(--color-primary-100);
+  --color-collapsible-trigger-active-bg: var(--color-surface-accent-active);
   --color-collapsible-trigger-focus-ring: var(--color-primary-400);
 
   /* OFieldList / OFieldRow / OFieldLabel */
   --color-field-list-row-hover-bg:     var(--color-primary-100);
   --color-field-list-group-text:       var(--color-text-secondary);
-  --color-field-list-label-text:       var(--color-text-body);
+  --color-field-list-label-text:       var(--color-text-heading);
   --color-field-list-label-icon:       var(--color-text-secondary);
   --color-field-list-drag-icon:        var(--color-text-secondary);
   --color-field-list-expand-icon:      var(--color-text-secondary);
@@ -208,8 +211,8 @@
   --color-stepper-connector: var(--color-border-default);
   --color-stepper-connector-done: var(--color-primary-300);
   --color-stepper-title-default: var(--color-text-secondary);
-  --color-stepper-title-active: var(--color-text-primary);
-  --color-stepper-title-done: var(--color-text-primary);
+  --color-stepper-title-active: var(--color-text-heading);
+  --color-stepper-title-done: var(--color-text-heading);
   --color-stepper-trigger-hover: var(--color-surface-subtle);
   --color-stepper-trigger-focus-ring: var(--color-primary-400);
 
@@ -225,11 +228,11 @@
 
   /* Header */
   --color-dialog-header-bg:     var(--color-surface-panel);
-  --color-dialog-header-text:   var(--color-text-primary);
+  --color-dialog-header-text:   var(--color-text-heading);
   --color-dialog-header-border: var(--color-border-default);
 
   /* Content */
-  --color-dialog-content-text:  var(--color-text-primary);
+  --color-dialog-content-text:  var(--color-text-heading);
 
   /* Footer */
   --color-dialog-footer-bg:     var(--color-surface-panel);
@@ -241,12 +244,37 @@
   --color-dialog-close-active-bg: var(--color-surface-subtle-hover);
   --color-dialog-focus-ring:      var(--color-primary-400);
 
-  /* Spacing */
-  --spacing-dialog-header-px: var(--spacing-5);
+  /* Page edge inset — THE single horizontal grid line of the app.
+     Everything that sits at the edge of a page derives from this one knob: the
+     OPageHeader/OPageLayout header, an OTable's first/last cell content (via
+     --spacing-table-edge below), and the left rails (folder lists, field lists).
+     Change it here and the whole app's left/right alignment moves together.
+     See SPACING_AUDIT.md §7. */
+  --spacing-page-edge: var(--spacing-3);
+
+  /* Table content edge inset. The page grid line plus a 2px optical nudge: a
+     table's first/last cell content (a 14px checkbox box, index digits, short
+     text) is small and reads as cramped sitting exactly on the edge, so tables
+     inset 2px more than the page header while still tracking the knob above.
+     Drives BOTH the OTable first/last-cell edge-inset rule AND the leading
+     selection-checkbox gutter, so they always share one value. */
+  --spacing-table-edge: calc(var(--spacing-page-edge) + 0.125rem);
+
+  /* Left rail width (folder lists, catalogs, section rails). One value so the
+     rails across Dashboards/Alerts/Reports/Traces/Synthetics are identical —
+     this was previously the same 230px written five different ways. */
+  --spacing-rail: 14.375rem;
+
+  /* Spacing — dialog/drawer surfaces share the SAME horizontal grid line as
+     pages (--spacing-page-edge): the header title, body content and footer
+     actions inside an ODialog/ODrawer land on one line, and a `bleed` body
+     (e.g. a full-bleed OTable, whose first column self-insets to page-edge)
+     aligns with the surface's own header instead of sitting 8px off it. */
+  --spacing-dialog-header-px: var(--spacing-page-edge);
   --spacing-dialog-header-py: var(--spacing-3);
-  --spacing-dialog-content-px: var(--spacing-5);
+  --spacing-dialog-content-px: var(--spacing-page-edge);
   --spacing-dialog-content-py: var(--spacing-3);
-  --spacing-dialog-footer-px: var(--spacing-5);
+  --spacing-dialog-footer-px: var(--spacing-page-edge);
   --spacing-dialog-footer-py: var(--spacing-3);
 
   /* Badge — default (neutral grey) */
@@ -298,8 +326,8 @@
   --color-badge-error-soft-text: var(--color-error-700);
 
   /* Badge — info (blue, for logs stream type) */
-  --color-badge-info-ol-border: var(--color-info-700);
-  --color-badge-info-ol-text:   var(--color-info-700);
+  --color-badge-info-ol-border: var(--color-blue-700);
+  --color-badge-info-ol-text:   var(--color-blue-700);
 
   /* Badge — purple (for metrics stream type) */
   --color-badge-purple-ol-border: var(--color-purple-600);
@@ -399,7 +427,7 @@
   --color-toast-default-border: var(--color-border-default);
 
   /* shared foreground */
-  --color-toast-fg:             var(--color-text-primary);
+  --color-toast-fg:             var(--color-text-heading);
   --color-toast-fg-secondary:   var(--color-text-secondary);
   --color-toast-action-text:    var(--color-primary-600);
   --color-toast-action-hover:   var(--color-primary-700);
@@ -467,19 +495,17 @@
   --color-input-disabled-border: var(--color-border-default);
   --color-input-disabled-text: var(--color-text-secondary);
   --color-input-focus-ring: var(--color-primary-200);
-  --color-input-text: var(--color-text-primary);
+  --color-input-text: var(--color-text-heading);
   --color-input-placeholder: var(--color-text-disabled);
-  /* Labels were resolving to text-secondary which is the same muted grey
-     used for disabled / hint text — making every form label look disabled.
-     Bumped to text-primary so labels read as active form metadata. */
-  --color-input-label: var(--color-text-primary);
+  /* text-heading (not text-secondary) so labels don't read as disabled/hint text */
+  --color-input-label: var(--color-text-heading);
   --color-input-hint: var(--color-text-secondary);
   --color-input-help-text: var(--color-text-secondary);
   --color-input-error-text: var(--color-error-600);
   --color-input-addon-bg: var(--color-surface-panel);
   --color-input-addon-text: var(--color-text-secondary);
   --color-input-clear-btn: var(--color-text-secondary);
-  --color-input-clear-btn-hover: var(--color-text-primary);
+  --color-input-clear-btn-hover: var(--color-text-heading);
 
   /* Select (OSelect) */
   --color-select-bg: var(--color-surface-base);
@@ -493,21 +519,21 @@
   --color-select-focus-ring: var(--color-primary-200);
   --color-select-text: var(--color-text-soft);
   --color-select-placeholder: var(--color-text-disabled);
-  /* Select labels were grey (text-secondary) — same fix as input-label. */
-  --color-select-label: var(--color-text-primary);
+  /* text-heading, not text-secondary (same as input-label) */
+  --color-select-label: var(--color-text-heading);
   --color-select-icon: var(--color-text-secondary);
   --color-select-error-text: var(--color-error-600);
   --color-select-content-bg: var(--color-surface-overlay);
   --color-select-content-border: var(--color-border-default);
-  --color-select-item-text: var(--color-text-primary);
-  --color-select-item-hover-bg: var(--color-primary-50);
-  --color-select-item-selected-bg: var(--color-primary-100);
+  --color-select-item-text: var(--color-text-heading);
+  --color-select-item-hover-bg: var(--color-surface-accent-hover);
+  --color-select-item-selected-bg: var(--color-surface-accent-active);
   --color-select-item-selected-text: var(--color-primary-700);
   --color-select-item-disabled: var(--color-text-disabled);
 
   /* Switch (OSwitch) */
   --color-switch-focus-ring: var(--color-primary-400);
-  --color-switch-label: var(--color-text-primary);
+  --color-switch-label: var(--color-text-heading);
   --color-switch-label-disabled: var(--color-text-secondary);
   /* Switch palette — single solid color (primary-500) for both border AND
      fill on ON state so the track reads as one color, not two-tone.
@@ -531,7 +557,7 @@
   --color-checkbox-disabled-bg: var(--color-surface-subtle);
   --color-checkbox-disabled-border: var(--color-border-default);
   --color-checkbox-focus-ring: var(--color-primary-400);
-  --color-checkbox-label: var(--color-text-primary);
+  --color-checkbox-label: var(--color-text-heading);
   --color-checkbox-label-disabled: var(--color-text-disabled);
 
   /* Radio (ORadio) — primary outline by default (interactive signal),
@@ -544,7 +570,7 @@
   --color-radio-disabled-bg: var(--color-surface-subtle);
   --color-radio-disabled-border: var(--color-grey-300);
   --color-radio-focus-ring: var(--color-primary-400);
-  --color-radio-label: var(--color-text-primary);
+  --color-radio-label: var(--color-text-heading);
   --color-radio-label-disabled: var(--color-text-disabled);
 
   /* Slider (OSlider) */
@@ -556,7 +582,7 @@
   --color-slider-disabled-track-fill: var(--color-grey-300);
   --color-slider-disabled-thumb: var(--color-grey-400);
   --color-slider-focus-ring: var(--color-primary-400);
-  --color-slider-label: var(--color-text-primary);
+  --color-slider-label: var(--color-text-heading);
   --color-slider-value: var(--color-text-secondary);
   --color-slider-error-text: var(--color-error-600);
 
@@ -568,7 +594,7 @@
   --color-file-focus-ring: var(--color-primary-400);
   --color-file-disabled-bg: var(--color-surface-subtle);
   --color-file-disabled-border: var(--color-border-default);
-  --color-file-text: var(--color-text-primary);
+  --color-file-text: var(--color-text-heading);
   --color-file-placeholder: var(--color-text-disabled);
   --color-file-label: var(--color-text-secondary);
   --color-file-icon: var(--color-text-secondary);
@@ -588,9 +614,9 @@
   --color-datepicker-focus-ring: var(--color-primary-400);
   --color-datepicker-disabled-bg: var(--color-surface-subtle);
   --color-datepicker-disabled-border: var(--color-border-default);
-  --color-datepicker-text: var(--color-text-primary);
+  --color-datepicker-text: var(--color-text-heading);
   --color-datepicker-placeholder: var(--color-text-disabled);
-  --color-datepicker-label: var(--color-text-primary);
+  --color-datepicker-label: var(--color-text-label);
   --color-datepicker-icon: var(--color-text-secondary);
   --color-datepicker-error-text: var(--color-error-600);
   --color-datepicker-error-border: var(--color-error-500);
@@ -599,15 +625,15 @@
   /* DatePicker calendar popup */
   --color-datepicker-popup-bg: var(--color-surface-overlay);
   --color-datepicker-popup-border: var(--color-border-default);
-  --color-datepicker-day-text: var(--color-text-primary);
-  --color-datepicker-day-hover-bg: var(--color-primary-50);
+  --color-datepicker-day-text: var(--color-text-heading);
+  --color-datepicker-day-hover-bg: var(--color-surface-accent-hover);
   --color-datepicker-day-selected-bg: var(--color-primary-600);
   --color-datepicker-day-selected-text: var(--color-white);
   --color-datepicker-day-today-border: var(--color-primary-400);
   --color-datepicker-day-outside-text: var(--color-text-disabled);
   --color-datepicker-day-disabled-text: var(--color-text-disabled);
-  --color-datepicker-nav-hover-bg: var(--color-primary-50);
-  --color-datepicker-heading-text: var(--color-text-primary);
+  --color-datepicker-nav-hover-bg: var(--color-surface-accent-hover);
+  --color-datepicker-heading-text: var(--color-text-heading);
   --color-datepicker-weekday-text: var(--color-text-secondary);
   --color-datepicker-day-range-bg: var(--color-primary-100);
   --color-datepicker-day-range-text: var(--color-primary-700);
@@ -618,13 +644,13 @@
   --color-datepicker-clock-hand: var(--color-primary-600);
   --color-datepicker-clock-selected-bg: var(--color-primary-600);
   --color-datepicker-clock-selected-text: var(--color-white);
-  --color-datepicker-clock-hover-bg: var(--color-primary-50);
+  --color-datepicker-clock-hover-bg: var(--color-surface-accent-hover);
   /* DateTimeRange relative quick-select buttons */
   --color-datepicker-relative-btn-bg: var(--color-surface-subtle);
-  --color-datepicker-relative-btn-text: var(--color-text-primary);
+  --color-datepicker-relative-btn-text: var(--color-text-heading);
   --color-datepicker-relative-btn-selected-bg: var(--color-primary-600);
   --color-datepicker-relative-btn-selected-text: var(--color-white);
-  --color-datepicker-relative-btn-hover-bg: var(--color-primary-50);
+  --color-datepicker-relative-btn-hover-bg: var(--color-surface-accent-hover);
   --color-datepicker-relative-label: var(--color-text-secondary);
 
   /* Color picker (OColor) */
@@ -633,40 +659,37 @@
   --color-colorpicker-thumb: var(--color-white);
 
   /* Option Group (OOptionGroup) */
-  --color-option-group-label: var(--color-text-primary);
+  --color-option-group-label: var(--color-text-heading);
   --color-option-group-label-disabled: var(--color-text-disabled);
   --color-option-group-error-text: var(--color-error-600);
 
   /* OTable */
-  /* Near-white header (prototype thead bg = --g-50 ≈ #FBFBFD): barely distinct
-     from the white body, not a grey band. */
+  /* Near-white header, barely distinct from the white body, not a grey band. */
   --color-table-header-bg: var(--color-surface-panel);
   --color-table-header-text: var(--color-text-secondary);
   --color-table-header-border: var(--color-border-default);
   --color-table-row-hover-bg: var(--color-primary-50);
   --color-table-row-selected-bg: var(--color-primary-100);
   --color-table-row-striped-bg: var(--color-surface-subtle);
-  /* Row dividers use the SOFT border (HANDOFF.md §8.1): lighter than the
-     structural table outline / sticky-header underline so rows read as a calm
-     list, not a hard grid. The header underline + outer border stay default. */
+  /* Row dividers use the SOFT border: lighter than the structural table outline /
+     sticky-header underline so rows read as a calm list, not a hard grid. The
+     header underline + outer border stay default. */
   --color-table-row-divider: var(--color-border-subtle);
   --color-table-border: var(--color-border-default);
   --color-table-cell-bg: var(--color-surface-base);
-  --color-table-cell-text: var(--color-text-primary);
+  --color-table-cell-text: var(--color-text-heading);
   --color-table-highlight-bg: color-mix(in srgb, var(--color-warning-400) 35%, transparent);
-  --color-table-highlight-text: var(--color-text-primary);
+  --color-table-highlight-text: var(--color-text-heading);
   --color-table-pagination-text: var(--color-text-secondary);
   --color-table-resize-handle: var(--color-primary-400);
   --color-table-sort-icon-active: var(--color-primary-600);
   --color-table-sort-icon-inactive: var(--color-text-disabled);
   --color-table-streaming-bar: var(--color-primary-500);
   --color-table-row-expanded-bg: var(--color-surface-subtle);
-  /* Subtle amber wash for warning/flagged rows (was an undefined token relying
-     on an inline rgba fallback; now token-based so it's theme-aware). */
+  /* Subtle amber wash for warning/flagged rows (theme-aware). */
   --color-warning-surface: color-mix(in srgb, var(--color-warning-400) 10%, transparent);
-  /* Row height tokens — change these to resize all OTable rows globally.
-     Compact = prototype --row-h 38px. */
-  --table-row-height-dense: 2.375rem;  /* 38px (prototype compact) */
+  /* Row height tokens: change these to resize all OTable rows globally. */
+  --table-row-height-dense: 2.375rem;  /* 38px */
   --table-row-height-normal: 2.75rem;  /* 44px */
 
   /* ── Banner (OBanner) ──────────────────────────────────── */
@@ -675,9 +698,9 @@
   --color-banner-default-text:    var(--color-grey-800);
 
   /* info */
-  --color-banner-info-bg:         var(--color-info-100);
-  --color-banner-info-border:     var(--color-info-200);
-  --color-banner-info-text:       var(--color-info-900);
+  --color-banner-info-bg:         var(--color-blue-100);
+  --color-banner-info-border:     var(--color-blue-200);
+  --color-banner-info-text:       var(--color-blue-900);
 
   /* success */
   --color-banner-success-bg:      var(--color-success-50);
@@ -693,54 +716,58 @@
   --color-banner-error-bg:        var(--color-error-600);
   --color-banner-error-text:      var(--color-grey-0);
 
-  /* error-soft — tinted error banner for hints/insights (the solid `error`
-     variant stays reserved for hard failures). Mirrors the warning build. */
+  /* error-soft: tinted error banner for hints/insights; the solid `error`
+     variant stays reserved for hard failures. */
   --color-banner-error-soft-bg:     var(--color-error-50);
   --color-banner-error-soft-border: var(--color-error-300);
   --color-banner-error-soft-text:   var(--color-error-700);
 
+  /* usage-report severity banners (enterprise billings) — right-fade gradient bg +
+     border. Light values here / dark overrides in dark.css, so the token carries
+     the theme automatically (no dark: variant needed at the call site). */
+  --color-usage-banner-success-bg: linear-gradient(to right, transparent 60%, #f7f7ff 70%, #cdf7e4 100%);
+  --color-usage-banner-error-border:   #f87171;
+  --color-usage-banner-error-bg:       linear-gradient(to right, transparent 60%, #fff5f5 70%, #fecdd3 100%);
+  --color-usage-banner-warning-border: #f0c674;
+  --color-usage-banner-warning-bg:     linear-gradient(to right, transparent 60%, #fffbf0 70%, #fff3cd 100%);
+
   /* ── Note Container (pipeline guideline cards) ─────────── */
-  --color-note-bg:               var(--color-note-light-bg);
-  --color-note-border:           var(--color-note-light-border);
-  --color-note-text:             var(--color-note-light-text);
-  --color-note-highlight:        var(--color-note-highlight-light);
-  --color-note-emphasis:         var(--color-grey-600);
-  --color-note-code:             var(--color-note-code-light);
 
-  /* ── OText typography colours (one per variant) — these were previously only
-     in the parallel .css token set, which the app does NOT load, so OText's
-     per-variant colours (esp. meta/section grey) silently fell back to inherited
-     text. Define them here in the .scss set the app actually loads. ── */
-  --color-typography-page-title:  var(--color-text-primary);
+  /* OText typography colours (one per variant) */
+  --color-typography-page-title:  var(--color-text-heading);
   --color-typography-section:     var(--color-text-secondary);
-  --color-typography-panel-title: var(--color-text-primary);
-  --color-typography-body:        var(--color-text-primary);
-  --color-typography-label:       var(--color-text-primary);
+  --color-typography-panel-title: var(--color-text-heading);
+  /* Body typography routes through the body token (not the heading alias) */
+  --color-typography-body:        var(--color-text-body);
+  --color-typography-label:       var(--color-text-heading);
   --color-typography-meta:        var(--color-text-secondary);
-  --color-typography-mono:        var(--color-text-primary);
+  --color-typography-mono:        var(--color-text-heading);
 
-  /* ── OCode (inline chip + block) — same .css-only gap as above ── */
-  --color-code-text:              var(--color-text-primary);
+  /* OCode (inline chip + block) */
+  --color-code-text:              var(--color-text-heading);
   --color-code-bg:                var(--color-surface-subtle);
   --color-code-border:            var(--color-border-default);
-  --color-code-block-text:        var(--color-text-primary);
+  --color-code-block-text:        var(--color-text-heading);
   --color-code-block-bg:          var(--color-surface-panel);
   --color-code-copy-icon:         var(--color-text-secondary);
-  --color-code-copy-hover-icon:   var(--color-text-primary);
+  --color-code-copy-hover-icon:   var(--color-text-heading);
   --color-code-copy-hover-bg:     var(--color-surface-subtle-hover);
 
-  /* Skeleton shimmer + datepicker inner border (were .css-only too) */
+  /* Skeleton shimmer + datepicker inner border */
   --color-skeleton-shimmer:        rgba(255, 255, 255, 0.8);
   --color-datepicker-inner-border: var(--color-grey-100);
 
-  /* Shared hover + surface accent — wraps --o2-hover-accent so templates use
-     component tokens, not semantic tokens directly */
-  --color-interactive-hover-bg: var(--o2-hover-accent);
-  --color-surface-accent: var(--o2-hover-accent);
+  /* Shared hover + surface accent — real formula owned by semantic.css
+     (theme-accent tinted); --color-surface-accent is an alias of it. */
+  --color-surface-accent: var(--color-interactive-hover-bg);
 }
 
-
-/* ToggleGroup — primary variant (colored tray) */
+/* ToggleGroup — primary variant (colored tray).
+   Token-override block (custom properties only), so it belongs in the token
+   layer, not in a component: its dark twin `.dark [data-variant="primary"]`
+   lives in dark.css. Scoping this half into OToggleGroup would raise it to
+   (0,2,0) and inject it after the token sheets, outranking the dark twin and
+   killing dark mode on primary toggle groups. The pair must stay together. */
 [data-variant="primary"] {
   --color-toggle-track-bg: var(--color-primary-200);
   --color-toggle-border: var(--color-primary-300);
@@ -912,6 +939,9 @@
 
   /* Input (OInput, OTextarea) */
   --color-input-bg: var(--color-input-bg);
+  /* Registered so the text-input-label-text utility compiles */
+  --color-input-label-text: var(--color-input-label-text);
+  --color-input-label-text-disabled: var(--color-input-label-text-disabled);
   --color-input-border: var(--color-input-border);
   --color-input-border-hover: var(--color-input-border-hover);
   --color-input-border-focus: var(--color-input-border-focus);
@@ -1092,7 +1122,7 @@
   /* OFieldList / OFieldRow / OFieldLabel */
   --color-field-list-row-hover-bg:     var(--color-field-list-row-hover-bg);
   --color-field-list-group-text:       var(--color-field-list-group-text);
-  --color-field-list-label-text:       var(--color-text-body);
+  --color-field-list-label-text:       var(--color-text-heading);
   --color-field-list-label-icon:       var(--color-field-list-label-icon);
   --color-field-list-drag-icon:        var(--color-field-list-drag-icon);
   --color-field-list-expand-icon:      var(--color-field-list-expand-icon);
@@ -1117,6 +1147,8 @@
   --color-dialog-close-hover-bg: var(--color-dialog-close-hover-bg);
   --color-dialog-close-active-bg: var(--color-dialog-close-active-bg);
   --color-dialog-focus-ring: var(--color-dialog-focus-ring);
+  --spacing-page-edge: var(--spacing-page-edge);
+  --spacing-rail: var(--spacing-rail);
   --spacing-dialog-header-px: var(--spacing-dialog-header-px);
   --spacing-dialog-header-py: var(--spacing-dialog-header-py);
   --spacing-dialog-content-px: var(--spacing-dialog-content-px);
@@ -1371,2671 +1403,60 @@
 }
 
 /* ── Menu animations ── */
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.7; }
-}
-@keyframes glow-pulse {
-  0%, 100% { box-shadow: 0 0 8px rgba(168, 85, 247, 0.3); }
-  50% { box-shadow: 0 0 16px rgba(168, 85, 247, 0.6); }
-}
-
-/* ── Field type badges ── */
-.field-type-container {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1rem;
-  height: 1rem;
-  margin-right: 0.3rem;
-  margin-left: 0.2rem;
-  flex-shrink: 0;
-  vertical-align: middle;
-}
-
-.field-expand-icon {
-  position: absolute;
-}
 
 /* ── sdr-fields ── */
 @theme inline {
-  --color-label-chip-ip-bg:        var(--o2-label-chip-ip-bg);
-  --color-label-chip-ip-text:      var(--o2-label-chip-ip-text);
-  --color-label-chip-ipv4-bg:      var(--o2-label-chip-ipv4-bg);
-  --color-label-chip-ipv4-text:    var(--o2-label-chip-ipv4-text);
-  --color-label-chip-ipv6-bg:      var(--o2-label-chip-ipv6-bg);
-  --color-label-chip-ipv6-text:    var(--o2-label-chip-ipv6-text);
-  --color-label-chip-method-bg:    var(--o2-label-chip-method-bg);
-  --color-label-chip-method-text:  var(--o2-label-chip-method-text);
-  --color-label-chip-url-bg:       var(--o2-label-chip-url-bg);
-  --color-label-chip-url-text:     var(--o2-label-chip-url-text);
-  --color-label-chip-num-bg:       var(--o2-label-chip-num-bg);
-  --color-label-chip-num-text:     var(--o2-label-chip-num-text);
-  --color-label-chip-float-bg:     var(--o2-label-chip-float-bg);
-  --color-label-chip-float-text:   var(--o2-label-chip-float-text);
-  --color-label-chip-hex-bg:       var(--o2-label-chip-hex-bg);
-  --color-label-chip-hex-text:     var(--o2-label-chip-hex-text);
-  --color-label-chip-ts-bg:        var(--o2-label-chip-ts-bg);
-  --color-label-chip-ts-text:      var(--o2-label-chip-ts-text);
-  --color-label-chip-date-bg:      var(--o2-label-chip-date-bg);
-  --color-label-chip-date-text:    var(--o2-label-chip-date-text);
-  --color-label-chip-time-bg:      var(--o2-label-chip-time-bg);
-  --color-label-chip-time-text:    var(--o2-label-chip-time-text);
-  --color-label-chip-id-bg:        var(--o2-label-chip-id-bg);
-  --color-label-chip-id-text:      var(--o2-label-chip-id-text);
-  --color-label-chip-email-bg:     var(--o2-label-chip-email-bg);
-  --color-label-chip-email-text:   var(--o2-label-chip-email-text);
-  --color-label-chip-str-bg:       var(--o2-label-chip-str-bg);
-  --color-label-chip-str-text:     var(--o2-label-chip-str-text);
-  --color-label-chip-default-bg:   var(--o2-label-chip-default-bg);
-  --color-label-chip-default-text: var(--o2-label-chip-default-text);
-  --color-label-chip-pattern-bg:   var(--o2-label-chip-pattern-bg);
-  --color-label-chip-pattern-text: var(--o2-label-chip-pattern-text);
+  --color-label-chip-ip-bg:        var(--color-label-chip-ip-bg);
+  --color-label-chip-ip-text:      var(--color-label-chip-ip-text);
+  --color-label-chip-method-bg:    var(--color-label-chip-method-bg);
+  --color-label-chip-method-text:  var(--color-label-chip-method-text);
+  --color-label-chip-url-bg:       var(--color-label-chip-url-bg);
+  --color-label-chip-url-text:     var(--color-label-chip-url-text);
+  --color-label-chip-num-bg:       var(--color-label-chip-num-bg);
+  --color-label-chip-num-text:     var(--color-label-chip-num-text);
+  --color-label-chip-float-bg:     var(--color-label-chip-float-bg);
+  --color-label-chip-float-text:   var(--color-label-chip-float-text);
+  --color-label-chip-hex-bg:       var(--color-label-chip-hex-bg);
+  --color-label-chip-hex-text:     var(--color-label-chip-hex-text);
+  --color-label-chip-ts-bg:        var(--color-label-chip-ts-bg);
+  --color-label-chip-ts-text:      var(--color-label-chip-ts-text);
+  --color-label-chip-id-bg:        var(--color-label-chip-id-bg);
+  --color-label-chip-id-text:      var(--color-label-chip-id-text);
+  --color-label-chip-email-bg:     var(--color-label-chip-email-bg);
+  --color-label-chip-email-text:   var(--color-label-chip-email-text);
+  --color-label-chip-str-bg:       var(--color-label-chip-str-bg);
+  --color-label-chip-str-text:     var(--color-label-chip-str-text);
+  --color-label-chip-default-bg:   var(--color-label-chip-default-bg);
+  --color-label-chip-default-text: var(--color-label-chip-default-text);
+  --color-label-chip-pattern-bg:   var(--color-label-chip-pattern-bg);
+  --color-label-chip-pattern-text: var(--color-label-chip-pattern-text);
 }
 
 /* ── Table ── */
-.o2-table th,
-.o2-table td {
-  padding: 0px 5px !important;
-  height: 36px;
-}
-.o2-table.o2-row-md th,
-.o2-table.o2-row-md td {
-  height: 36px !important;
-}
-.o2-table.o2-row-sm th,
-.o2-table.o2-row-sm td {
-  height: 20px !important;
-}
-.o2-table th:last-child.actions-column,
-.o2-table td:last-child.actions-column {
-  position: sticky;
-  right: 0;
-  z-index: 1;
-  width: 150px;
-  box-shadow: -2px 0px 2px 0 var(--o2-actions-column-shawdow) !important;
-}
-.o2-table td:last-child.actions-column {
-  background-color: var(--o2-table-actions-bg);
-}
-.o2-table tr td {
-  border-bottom: 1px solid var(--o2-border-color) !important;
-}
-.o2-table-header-sticky thead {
-  position: sticky;
-  top: 0;
-  z-index: 1000;
-}
 
 /* ── App utilities ── */
-html, body {
-  margin: 0 !important;
-  padding: 0 !important;
-}
-
-html {
-  overflow: hidden;
-}
-
-body {
-  background: var(--o2-body-primary-bg);
-  overflow: hidden;
-  color: var(--o2-text-body);
-  font-family: var(--font-sans);
-  font-size: var(--text-sm);
-  font-weight: var(--font-normal);
-  line-height: var(--leading-base);
-}
-
-/*
- * Element typography resets must live in `@layer base` so Tailwind utilities
- * (which live in `@layer utilities`) can override them. Unlayered rules beat
- * any layered rule regardless of specificity, so leaving these outside a layer
- * would silently suppress utilities like `mb-4` / `text-base` applied to
- * bare <p>/<h2>/… elements.
- */
-@layer base {
-h1, h2, h3, h4, h5, h6 {
-  color: var(--o2-text-heading);
-  margin: 0;
-}
-
-h1 {
-  font-size: var(--text-2xl);
-  font-weight: var(--font-semibold);
-  line-height: var(--leading-2xl);
-  letter-spacing: var(--tracking-tight);
-}
-
-h2 {
-  font-size: var(--text-xl);
-  font-weight: var(--font-medium);
-  line-height: var(--leading-xl);
-  letter-spacing: var(--tracking-normal);
-}
-
-h3 {
-  font-size: var(--text-lg);
-  font-weight: var(--font-medium);
-  line-height: var(--leading-lg);
-  letter-spacing: var(--tracking-normal);
-}
-
-h4 {
-  font-size: var(--text-md);
-  font-weight: var(--font-medium);
-  line-height: var(--leading-md);
-  letter-spacing: var(--tracking-normal);
-}
-
-h5 {
-  font-size: var(--text-base);
-  font-weight: var(--font-medium);
-  line-height: var(--leading-base);
-  letter-spacing: var(--tracking-normal);
-}
-
-h6 {
-  font-size: var(--text-sm);
-  font-weight: var(--font-medium);
-  line-height: var(--leading-sm);
-  letter-spacing: var(--tracking-normal);
-}
-
-p {
-  color: var(--o2-text-body);
-  font-size: var(--text-base);
-  line-height: var(--leading-base);
-  margin: 0;
-}
-
-a {
-  color: var(--o2-text-link);
-  text-decoration: none;
-}
-
-a:hover {
-  color: var(--o2-text-link-hover);
-  text-decoration: underline;
-}
-
-small {
-  font-size: var(--text-xs);
-  color: var(--o2-text-caption);
-}
-
-label:not(.o-input-label) {
-  font-size: var(--text-sm);
-  color: var(--o2-text-label);
-  font-weight: var(--font-normal);
-}
-}
-
-@layer base {
-  code {
-    font-family: var(--font-mono);
-    font-size: var(--text-sm);
-    color: var(--o2-text-code);
-    font-feature-settings: "tnum";
-    letter-spacing: -0.2px;
-  }
-
-  pre,
-  kbd,
-  samp,
-  .log-line {
-    font-family: var(--font-mono);
-    font-size: var(--text-sm);
-    line-height: 1.6;
-  }
-}
-
-::placeholder {
-  color: var(--o2-text-placeholder);
-}
-
-.o2-app-root {
-  width: 100%;
-  transition: width 0.3s ease;
-}
-
-/*
- * NOTE: the legacy `.bg-white { background-color: var(--o2-body-primary-bg) }`
- * shim was removed. It collided with Tailwind's `bg-white` utility once the
- * `tw:` prefix was dropped, silently overriding every `bg-white` with the 1%
- * body tint (e.g. the OSwitch thumb rendered invisible). Components that need
- * the tint reference `var(--o2-body-primary-bg)` directly (QueryInspector,
- * `.o2-custom-bg`); `bg-white` now means Tailwind white everywhere.
- */
-
-.o2-custom-bg {
-  background: var(--o2-body-secondary-bg);
-  background: -webkit-linear-gradient(to bottom right, var(--o2-body-primary-bg), var(--o2-body-secondary-bg));
-  background: linear-gradient(to bottom right, var(--o2-body-primary-bg), var(--o2-body-secondary-bg));
-  overflow: hidden;
-}
-
-.card-container {
-  background-color: var(--o2-card-bg);
-}
-
-.el-border {
-  border: 0.063rem solid var(--o2-border-color);
-}
-
-.el-border-radius {
-  border-radius: 0.375rem;
-}
-
-.o2-monospace-font {
-  font-family: var(--font-mono);
-}
-
-.ai-hover-btn {
-  background: linear-gradient(
-    135deg,
-    rgba(139, 92, 246, 0.15) 0%,
-    rgba(236, 72, 153, 0.15) 100%
-  ) !important;
-  color: #6d28d9 !important;
-  transition:
-    background 0.3s ease,
-    box-shadow 0.3s ease,
-    color 0.3s ease;
-}
-
-html.dark .ai-hover-btn,
-body.body--dark .ai-hover-btn {
-  background: linear-gradient(
-    135deg,
-    rgba(139, 92, 246, 0.5) 0%,
-    rgba(236, 72, 153, 0.5) 100%
-  ) !important;
-  box-shadow: 0 0.25rem 0.75rem 0 rgba(139, 92, 246, 0.2);
-  color: #ede9fe !important;
-}
-
-.ai-hover-btn:hover {
-  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%) !important;
-  box-shadow: 0 0.25rem 0.75rem 0 rgba(139, 92, 246, 0.35);
-  color: white !important;
-}
-
-html.dark .ai-hover-btn:hover,
-body.body--dark .ai-hover-btn:hover {
-  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%) !important;
-  box-shadow: 0 0.25rem 0.75rem 0 rgba(139, 92, 246, 0.35);
-  color: white !important;
-}
-
-.ai-btn-active {
-  background: linear-gradient(
-    135deg,
-    rgba(139, 92, 246, 0.15) 0%,
-    rgba(236, 72, 153, 0.15) 100%
-  ) !important;
-}
-
-html.dark .ai-btn-active,
-body.body--dark .ai-btn-active {
-  background: linear-gradient(
-    135deg,
-    rgba(139, 92, 246, 0.5) 0%,
-    rgba(236, 72, 153, 0.5) 100%
-  ) !important;
-  box-shadow: 0 0.25rem 0.75rem 0 rgba(139, 92, 246, 0.2);
-}
-
-.ai-btn-active:hover {
-  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%) !important;
-}
-
-.ai-icon {
-  transition: transform 0.6s ease;
-}
-
-.o2-ai-context-btn {
-  background: linear-gradient(
-    135deg,
-    rgba(139, 92, 246, 0.15) 0%,
-    rgba(236, 72, 153, 0.15) 100%
-  ) !important;
-  transition:
-    background 0.3s ease,
-    box-shadow 0.3s ease;
-}
-
-html.dark .o2-ai-context-btn,
-body.body--dark .o2-ai-context-btn {
-  background: linear-gradient(
-    135deg,
-    rgba(139, 92, 246, 0.5) 0%,
-    rgba(236, 72, 153, 0.5) 100%
-  ) !important;
-  box-shadow: 0 0.25rem 0.75rem 0 rgba(139, 92, 246, 0.2);
-}
-
-.o2-ai-context-btn:hover {
-  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%) !important;
-  box-shadow: 0 0.25rem 0.75rem 0 rgba(139, 92, 246, 0.35);
-}
-
-html.dark .o2-ai-context-btn:hover,
-body.body--dark .o2-ai-context-btn:hover {
-  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%) !important;
-  box-shadow: 0 0.25rem 0.75rem 0 rgba(139, 92, 246, 0.35) !important;
-}
-
-.ai-floating-button {
-  background: linear-gradient(
-    135deg,
-    rgba(139, 92, 246, 0.15) 0%,
-    rgba(236, 72, 153, 0.15) 100%
-  ) !important;
-  transition:
-    background 0.3s ease,
-    box-shadow 0.3s ease;
-}
-
-html.dark .ai-floating-button,
-body.body--dark .ai-floating-button {
-  background: linear-gradient(
-    135deg,
-    rgba(139, 92, 246, 0.5) 0%,
-    rgba(236, 72, 153, 0.5) 100%
-  ) !important;
-  box-shadow: 0 0.25rem 0.75rem 0 rgba(139, 92, 246, 0.2);
-}
-
-.ai-floating-button:hover {
-  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%) !important;
-  box-shadow: 0 0.25rem 0.75rem 0 rgba(139, 92, 246, 0.35);
-}
-
-html.dark .ai-floating-button:hover,
-body.body--dark .ai-floating-button:hover {
-  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%) !important;
-  box-shadow: 0 0.25rem 0.75rem 0 rgba(139, 92, 246, 0.35) !important;
-}
-
-.ai-icon-button {
-  background: linear-gradient(
-    135deg,
-    rgba(139, 92, 246, 0.15) 0%,
-    rgba(236, 72, 153, 0.15) 100%
-  ) !important;
-  transition:
-    background 0.3s ease,
-    box-shadow 0.3s ease;
-}
-
-html.dark .ai-icon-button,
-body.body--dark .ai-icon-button {
-  background: linear-gradient(
-    135deg,
-    rgba(139, 92, 246, 0.5) 0%,
-    rgba(236, 72, 153, 0.5) 100%
-  ) !important;
-  border: none !important;
-  box-shadow: 0 0.25rem 0.75rem 0 rgba(139, 92, 246, 0.2);
-}
-
-.ai-icon-button:hover {
-  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%) !important;
-  box-shadow: 0 0.25rem 0.75rem 0 rgba(139, 92, 246, 0.35);
-}
-
-html.dark .ai-icon-button:hover,
-body.body--dark .ai-icon-button:hover {
-  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%) !important;
-  box-shadow: 0 0.25rem 0.75rem 0 rgba(139, 92, 246, 0.35) !important;
-}
-
-.o-input-label {
-  font-size: var(--text-sm);
-  font-weight: 500;
-  line-height: 1.25;
-  color: #262626;
-}
-
-html.dark .o-input-label,
-body.body--dark .o-input-label {
-  color: #e5e5e5;
-}
-
-.o-input-label--disabled {
-  color: #a3a3a3 !important;
-  font-weight: 400 !important;
-}
-
-html.dark .o-input-label--disabled,
-body.body--dark .o-input-label--disabled {
-  color: #c4c4c4 !important;
-  font-weight: 400 !important;
-}
-
-button:not(:disabled):not([aria-disabled="true"]),
-a[href]:not([aria-disabled="true"]),
-[role="button"]:not([aria-disabled="true"]):not([disabled]),
-[role="tab"]:not([aria-disabled="true"]):not([disabled]),
-[role="menuitem"]:not([aria-disabled="true"]):not([disabled]),
-[role="option"]:not([aria-disabled="true"]):not([disabled]),
-[role="switch"]:not(:disabled):not([aria-disabled="true"]),
-[role="checkbox"]:not(:disabled):not([aria-disabled="true"]),
-[role="radio"]:not(:disabled):not([aria-disabled="true"]),
-label:has(input:not(:disabled)),
-summary,
-select:not(:disabled),
-input[type="checkbox"]:not(:disabled),
-input[type="radio"]:not(:disabled),
-input[type="file"]:not(:disabled),
-input[type="submit"]:not(:disabled),
-input[type="reset"]:not(:disabled),
-input[type="button"]:not(:disabled) {
-  cursor: pointer;
-}
-
-button:disabled,
-button[aria-disabled="true"],
-input:disabled,
-select:disabled,
-textarea:disabled,
-[disabled],
-[aria-disabled="true"],
-.is-disabled {
-  cursor: not-allowed !important;
-}
-
-[draggable="true"],
-.draggable,
-.drag-handle {
-  cursor: grab;
-}
-
-[draggable="true"]:active,
-.draggable:active,
-.drag-handle:active,
-.is-dragging,
-[data-dragging="true"] {
-  cursor: grabbing !important;
-}
-
-input[type="text"],
-input[type="email"],
-input[type="password"],
-input[type="number"],
-input[type="search"],
-input[type="url"],
-input[type="tel"],
-textarea {
-  cursor: text;
-}
-
-input[type="text"]:disabled,
-input[type="email"]:disabled,
-input[type="password"]:disabled,
-input[type="number"]:disabled,
-input[type="search"]:disabled,
-input[type="url"]:disabled,
-input[type="tel"]:disabled,
-textarea:disabled {
-  cursor: not-allowed;
-}
-
-[data-o2-variant="destructive"] [data-destructive-icon="true"],
-[data-o2-variant="outline-destructive"] [data-destructive-icon="true"],
-[data-o2-variant="ghost-destructive"] [data-destructive-icon="true"] {
-  color: inherit !important;
-}
-
-button:has([data-destructive-icon="true"]):hover,
-a:has([data-destructive-icon="true"]):hover,
-[role="button"]:has([data-destructive-icon="true"]):hover {
-  background-color: var(--color-error-100, #fee2e2) !important;
-}
-
-html.dark button:has([data-destructive-icon="true"]):hover,
-body.body--dark button:has([data-destructive-icon="true"]):hover,
-html.dark a:has([data-destructive-icon="true"]):hover,
-body.body--dark a:has([data-destructive-icon="true"]):hover,
-html.dark [role="button"]:has([data-destructive-icon="true"]):hover,
-body.body--dark [role="button"]:has([data-destructive-icon="true"]):hover {
-  background-color: rgba(220, 38, 38, 0.18) !important;
-}
-
-html.dark [data-destructive-icon="true"]:hover,
-body.body--dark [data-destructive-icon="true"]:hover {
-  background-color: rgba(220, 38, 38, 0.18) !important;
-}
-
-.ai-hover-btn:hover .ai-icon {
-  transform: rotate(180deg);
-}
-
-:root.dark .navbar-links,
-.dark .navbar-links {
-  --color-tabs-inactive-text: var(--color-text-secondary);
-}
-
-:root.dark [data-test="navbar-organizations-select-trigger"],
-:root.dark [data-test="upgrade-to-enterprise-btn"],
-.dark [data-test="navbar-organizations-select-trigger"],
-.dark [data-test="upgrade-to-enterprise-btn"] {
-  --color-button-ghost-primary-active-bg: var(--color-primary-900);
-  --color-button-ghost-primary-text: var(--color-primary-200);
-}
 
 /* ── Index list ── */
 
-.field-group-header {
-  line-height: 1.75rem;
-  padding-left: 0.625rem;
-  border-radius: 0.5rem;
-}
-
-.field-name {
-  max-width: 90% !important;
-  display: inline-block;
-}
-
-.field-icon-spacing {
-  margin-right: 0.375rem;
-}
-
-.field-value-container {
-  border-radius: 0.5rem;
-
-  &--multi-stream {
-    width: calc(100% - 3.125rem);
-  }
-
-  &--single-stream {
-    width: 100%;
-  }
-}
-
-.field-value-key {
-  width: calc(100% - 3.125rem);
-  border-radius: 0.5rem;
-}
-
-.field-value-count {
-  display: contents;
-
-  &--with-actions {
-    width: 3.125rem;
-  }
-}
-
-.field-loading {
-  height: 3.75rem;
-  border-radius: 0.5rem;
-}
-
-.field-loading-label {
-  font-size: 1.1em;
-}
-
-.expanded-field-row {
-  opacity: 0.7;
-}
-
-.stream-option-item {
-  cursor: pointer;
-  border-radius: 0.5rem;
-}
-
-.field-value-container {
-  border-radius: 0.5rem;
-
-  &--multi-stream {
-    width: calc(100% - 2.625rem);
-  }
-
-  &--single-stream {
-    width: calc(100% - 0rem);
-  }
-}
-
-.field-value-key {
-  width: calc(100% - 3.125rem);
-  border-radius: 0.5rem;
-}
-
-.field-value-count {
-  display: contents;
-
-  &--with-actions {
-    width: 3.125rem;
-  }
-}
-
-.field-table {
-  transition: opacity 0.2s ease-in-out;
-
-  &.loading-fields {
-    opacity: 0.5;
-    pointer-events: none;
-  }
-}
-
 /* ── Pagination ── */
 
-.paginator-section {
-  line-height: 1.5rem;
-  max-height: 2rem;
-  border-radius: 0.5rem;
-  padding: 0.125rem 0.25rem;
-  background: rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(10px);
-  margin-top: 0;
-  overflow: visible;
-
-  .o-pagination__btn {
-    padding: 0.125rem 0.25rem !important;
-    height: 1.5rem !important;
-    min-height: 1.5rem !important;
-    min-width: 1.5rem !important;
-    font-size: 0.75rem !important;
-    border-radius: 0.25rem !important;
-    line-height: 1rem !important;
-
-    svg {
-      width: 1rem !important;
-      height: 1rem !important;
-    }
-  }
-}
-
-.select-pagination {
-  position: relative;
-  width: 4rem !important;
-  height: 1.5rem !important;
-  margin-top: 0;
-
-  button {
-    height: 1.5rem !important;
-    min-height: 1.5rem !important;
-    font-size: 0.75rem !important;
-    padding-inline: 0.5rem !important;
-  }
-}
-
 /* ── Schema view ── */
 
-.add-fields-card {
-  width: 100vw;
-  max-width: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.indexDetailsContainer {
-  th:first-child,
-  td:first-child {
-    padding-left: 8px !important;
-  }
-
-  th:nth-child(5),
-  td:nth-child(5) {
-    min-width: 15rem;
-    width: 15rem;
-    max-width: 15rem;
-  }
-}
-
-.schema-fields-tabs {
-  height: fit-content;
-
-  .rum-tab {
-    width: fit-content !important;
-    padding: 4px 12px !important;
-    border: none !important;
-
-    &.active {
-      background: #5960b2;
-      color: #ffffff !important;
-    }
-  }
-}
-
-.floating-buttons {
-  position: sticky;
-  bottom: 0;
-  z-index: 1;
-  width: 100%;
-  margin-top: auto;
-  background-color: var(--o2-card-bg-solid);
-}
-
-.warning-text {
-  color: #f5a623;
-  border: 1px solid #f5a623;
-  border-radius: 10px;
-  padding: 6px 3px;
-}
-
-.schema-index-select-dropdown-light {
-  background-color: white !important;
-  border-radius: 4px !important;
-  border: 1px solid #C9CCD6 !important;
-}
-
-.schema-index-select-dropdown-dark {
-  background-color: #2B2D30 !important;
-  border-radius: 4px !important;
-  border: 1px solid #4E5157 !important;
-}
-
-.field-name-ellipsis {
-  max-width: 200px;
-}
-
-.field-name-text {
-  display: inline-block;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.o2-schema-table {
-  th,
-  td {
-    height: 14px !important;
-    min-height: 14px !important;
-    padding: 2px 3px !important;
-  }
-
-  thead {
-    position: sticky;
-    top: 0;
-    z-index: 1000;
-  }
-}
-
-.o2-schema-table-header-sticky-dark {
-  thead {
-    background-color: #181A1B;
-  }
-}
-
-.o2-schema-table-header-sticky-light {
-  thead {
-    background-color: #ffffff;
-  }
-}
-
-.field-type-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 2px 8px;
-  border-radius: 6px;
-  font-size: 11px;
-  font-weight: 600;
-}
-
-.badge-int64 {
-  background: #dbeafe;
-  color: #1d4ed8;
-}
-
-.badge-float64 {
-  background: #d1fae5;
-  color: #065f46;
-}
-
-.badge-utf8 {
-  background: #fef3c7;
-  color: #92400e;
-}
-
-.badge-bool {
-  background: #fce7f3;
-  color: #9f1239;
-}
-
-.schema-input-box {
-  background-color: white !important;
-  border-radius: 4px !important;
-  padding: 0px 8px !important;
-  border: 1px solid #C9CCD6 !important;
-}
-
-.schema-input-box-dark {
-  background-color: #2B2D30 !important;
-  border-radius: 4px !important;
-  border: 1px solid #4E5157 !important;
-}
-
-.bottom-btn {
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.tile-content-dark {
-  background-color: #181a1b;
-}
-
-.tile-content-light {
-  background-color: #ffffff;
-}
-
 /* ── RCA Report ── */
 
-.rca-report-content {
-  --rca-bg-primary: #eff6ff;
-  --rca-bg-secondary: #eff6ff;
-  --rca-bg-code: #f3f4f6;
-  --rca-bg-table-even: #eff6ff;
-  --rca-bg-table-hover: #dbeafe;
-  --rca-bg-section: rgba(37, 99, 235, 0.05);
-  --rca-bg-blockquote: #eff6ff;
-
-  --rca-text-primary: #1e293b;
-  --rca-text-secondary: #334155;
-  --rca-text-tertiary: #475569;
-  --rca-text-heading: #2563eb;
-  --rca-text-code: #be185d;
-  --rca-text-blockquote: #1e40af;
-  --rca-text-strong: #1e40af;
-  --rca-text-em: #475569;
-  --rca-text-list: #1f2937;
-
-  --rca-border-primary: #cbd5e1;
-  --rca-border-secondary: #bfdbfe;
-  --rca-border-tertiary: #d1d5db;
-  --rca-border-table: #bfdbfe;
-  --rca-border-accent: #3b82f6;
-
-  --rca-icon-color: #334155;
-  --rca-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
-
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
-  line-height: 1.6;
-  color: var(--rca-text-secondary);
-}
-
-body.body--dark .rca-report-content {
-  --rca-bg-primary: #1f2937;
-  --rca-bg-secondary: #1e293b;
-  --rca-bg-code: #1f2937;
-  --rca-bg-table-even: #1a2332;
-  --rca-bg-table-hover: #2d3748;
-  --rca-bg-section: rgba(96, 165, 250, 0.08);
-  --rca-bg-blockquote: #1e3a5f;
-
-  --rca-text-primary: #e5e7eb;
-  --rca-text-secondary: #cbd5e1;
-  --rca-text-tertiary: #94a3b8;
-  --rca-text-heading: #67a6ff;
-  --rca-text-code: #fda4af;
-  --rca-text-blockquote: #67a6ff;
-  --rca-text-strong: #639ced;
-  --rca-text-em: #cbd5e1;
-  --rca-text-list: #d1d5db;
-
-  --rca-border-primary: #4b5563;
-  --rca-border-secondary: #374151;
-  --rca-border-tertiary: #374151;
-  --rca-border-table: #334155;
-  --rca-border-accent: #60a5fa;
-
-  --rca-icon-color: #cbd5e1;
-  --rca-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
-}
-
-.rca-report-content {
-  .rca-h1 {
-    color: var(--rca-text-primary);
-    border-bottom-color: var(--rca-border-primary);
-  }
-
-  .rca-h2 {
-    color: var(--rca-text-heading);
-    border-left-color: var(--rca-text-heading);
-  }
-
-  .rca-section-bg {
-    background-color: var(--rca-bg-section);
-  }
-
-  .rca-h3 {
-    color: var(--rca-text-secondary);
-    position: relative;
-    padding-left: 1rem;
-
-    &::before {
-      content: '»';
-      position: absolute;
-      left: 0rem;
-      top: 50%;
-      transform: translateY(-50%);
-      color: var(--rca-icon-color);
-      font-size: 20px;
-      line-height: 1;
-    }
-  }
-
-  .rca-h4 {
-    color: var(--rca-text-tertiary);
-  }
-
-  .rca-ul,
-  .rca-ol {
-    list-style-position: outside;
-  }
-
-  .rca-ul {
-    list-style-type: disc;
-  }
-
-  .rca-list-item {
-    color: var(--rca-text-list);
-  }
-
-  .rca-ol-item {
-    color: var(--rca-text-list);
-  }
-
-  .rca-code-block {
-    background-color: var(--rca-bg-code);
-    border-color: var(--rca-border-tertiary);
-
-    pre {
-      color: var(--rca-text-list);
-    }
-  }
-
-  .rca-inline-code {
-    background-color: var(--rca-bg-code);
-    color: var(--rca-text-code);
-  }
-
-  .rca-table-wrapper {
-    border-radius: 8px;
-    overflow: hidden;
-    box-shadow: var(--rca-shadow);
-  }
-
-  .rca-table {
-    border-collapse: separate;
-    border-spacing: 0;
-    background-color: var(--rca-bg-primary);
-    border: 1px solid var(--rca-border-secondary);
-
-    thead {
-      background: linear-gradient(to bottom, var(--rca-bg-secondary) 0%, var(--rca-bg-secondary) 100%);
-      border-bottom: 2px solid var(--rca-border-primary);
-    }
-
-    th {
-      padding: 8px 12px;
-      color: var(--rca-text-primary);
-      font-weight: 700;
-      text-transform: uppercase;
-      font-size: 10px;
-      letter-spacing: 0.8px;
-      text-align: left;
-      border-right: 1px solid var(--rca-border-secondary);
-
-      &:last-child {
-        border-right: none;
-      }
-    }
-
-    td {
-      padding: 8px 12px;
-      border-bottom: 1px solid var(--rca-border-table);
-      border-right: 1px solid var(--rca-border-table);
-      color: var(--rca-text-secondary);
-      font-size: 13px;
-      line-height: 1.6;
-      vertical-align: top;
-
-      &:last-child {
-        border-right: none;
-      }
-    }
-
-    tbody {
-      tr {
-        &:last-child td {
-          border-bottom: none;
-        }
-
-        &:hover {
-          background-color: var(--rca-bg-table-hover);
-        }
-      }
-    }
-
-    td:first-child,
-    td.rca-first-cell {
-      font-weight: 600;
-      color: var(--rca-text-tertiary);
-      white-space: nowrap;
-      background-color: var(--rca-bg-secondary);
-      min-width: 160px;
-    }
-
-    tbody tr:hover td:first-child,
-    tbody tr:hover td.rca-first-cell {
-      background-color: var(--rca-bg-table-hover);
-    }
-  }
-
-  .rca-blockquote {
-    background-color: var(--rca-bg-blockquote);
-    border-left-color: var(--rca-border-accent);
-    color: var(--rca-text-blockquote);
-  }
-
-  hr {
-    border-top-color: var(--rca-border-tertiary);
-  }
-
-  strong {
-    color: var(--rca-text-strong);
-  }
-
-  em {
-    color: var(--rca-text-em);
-  }
-
-  p {
-    color: var(--rca-text-secondary);
-  }
-}
-
 /* ── Logs page ── */
 
-/* --- logs-page.scss --- */
-
-.logPage_bkcss {
-  padding: 0 !important;
-  margin: 0 !important;
-  box-sizing: border-box !important;
-}
-
-.full-width {
-  width: 100%;
-}
-
-.full-height {
-  height: 100% !important;
-  max-height: 100% !important;
-  padding: 0 !important;
-  margin: 0 !important;
-  box-sizing: border-box !important;
-  overflow: hidden !important;
-}
-
-.visualize-container {
-  height: 100%;
-}
-
-.build-container {
-  height: 100%;
-  overflow: hidden;
-}
-
-.search-history-empty {
-  height: 12.5rem;
-  border-radius: 0.5rem;
-
-  &__content {
-    height: 80vh;
-    border-radius: 0.5rem;
-  }
-
-  &__icon {
-    font-size: 6.25rem;
-    opacity: 0.1;
-  }
-
-  &__title {
-    opacity: 0.8;
-  }
-
-  &__info {
-    opacity: 0.8;
-  }
-}
-
-.error-display {
-  border-radius: 0.5rem;
-
-  &__message {
-    font-size: 0.875rem;
-    margin: 0;
-  }
-}
-
-.logs-saved-view-icon:hover {
-  color: var(--o2-text-primary) !important;
-  background-color: var(--o2-hover-accent) !important;
-}
-
-.logs-search-bar-component {
-  height: 100%;
-  overflow: visible;
-
-  > .row:first-child {
-    align-items: center;
-    padding: 0.25rem 0;
-
-    > .col {
-      display: flex;
-      align-items: center;
-      flex-wrap: nowrap;
-    }
-  }
-
-  .reset-filters {
-    width: 2rem;
-    height: 2rem;
-    border-radius: 0.375rem;
-    border: 0.11rem solid var(--o2-border) !important;
-  }
-
-  .toggle-container {
-    border: 0.0625rem solid var(--o2-border);
-    border-radius: 0.375rem;
-  }
-
-  .icon-sm {
-    width: 1.25rem;
-    height: 1.25rem;
-  }
-
-  .btn-height-32 {
-    height: 2rem;
-    min-height: 2rem;
-  }
-
-  #logsQueryEditor,
-  #fnEditor {
-    height: 100% !important;
-  }
-
-  #fnEditor {
-    width: 100%;
-    border-radius: 0.375rem;
-    border: 0 solid var(--o2-border);
-    overflow: hidden;
-  }
-
-  .row:nth-child(2) {
-    height: 100%;
-  }
-
-  .function-dropdown {
-    width: 12.8125rem;
-    padding-bottom: 0;
-    border: 0.0625rem solid var(--o2-border);
-    border-radius: 0.375rem;
-    cursor: pointer;
-  }
-
-  .casesensitive-btn {
-    padding: 0.5rem;
-    margin-left: -0.375rem;
-    background-color: var(--o2-muted-background);
-    border-radius: 0 0.25rem 0.25rem 0;
-  }
-
-  .search-dropdown {
-    padding: 0;
-
-    .block {
-      color: var(--o2-text-primary);
-      font-weight: 600;
-      font-size: 0.75rem;
-    }
-  }
-
-  .refresh-rate-dropdown-container {
-    width: 13.75rem;
-  }
-
-  .flex-start {
-    justify-content: flex-start;
-    align-items: flex-start;
-    display: flex;
-  }
-
-  .resultsOverChart {
-    margin-bottom: 0.75rem;
-    font-size: 0.875rem;
-    color: var(--o2-text-primary);
-    font-weight: 700;
-  }
-
-  .ddlWrapper {
-    position: relative;
-    z-index: 10;
-
-    .listWrapper {
-      box-shadow: 0 0.1875rem 0.9375rem rgba(0, 0, 0, 0.1);
-      transition: height 0.25s ease;
-      height: calc(100vh - 9.125rem);
-      background-color: var(--o2-card-background);
-      position: absolute;
-      top: 2.75rem;
-      width: 100%;
-      left: 0;
-      border-radius: 0.375rem;
-
-      &:empty {
-        height: 0;
-      }
-
-      & {
-        border-radius: 0.375rem;
-      }
-    }
-  }
-
-  .fields_autocomplete {
-    max-height: 15.625rem;
-  }
-
-  .search-button {
-    min-width: 4.8125rem;
-    line-height: 1.8125rem;
-    font-weight: bold;
-    text-transform: initial;
-    font-size: 0.6875rem;
-    color: var(--o2-primary-foreground);
-    border-radius: 0.375rem;
-  }
-
-  .download-logs-btn {
-    height: 1.875rem;
-    border-radius: 0.375rem;
-    transition: all 0.2s ease;
-
-    &:hover {
-      background-color: var(--o2-hover-accent);
-    }
-  }
-
-  .save-transform-btn {
-    height: 1rem;
-    border-radius: 0.375rem;
-  }
-
-  .query-editor-container {
-    height: calc(100% - 2.9rem) !important;
-  }
-
-  .saved-views-dropdown {
-    border-radius: 0.375rem;
-
-    button {
-      padding: 0.25rem 0.3125rem;
-      border-radius: 0.375rem;
-    }
-
-    &:hover {
-      background-color: var(--o2-hover-accent);
-    }
-  }
-
-  .savedview-dropdown {
-    width: 13.4375rem;
-    display: inline-block;
-    border: 0.0625rem solid var(--o2-border);
-    border-radius: 0.375rem;
-  }
-
-  .saved-view-item {
-    padding: 0.125rem 0.25rem !important;
-  }
-
-  .download-menu-parent {
-    position: relative;
-
-    &::after {
-      content: "";
-      position: absolute;
-      right: -10px;
-      top: 0;
-      width: 10px;
-      height: 100%;
-      pointer-events: auto;
-    }
-  }
-
-  .body--dark {
-    .btn-function {
-      filter: brightness(100);
-    }
-  }
-
-  .favorite-label {
-    line-height: 1.5rem !important;
-    font-weight: bold !important;
-  }
-
-  .region-dropdown-btn {
-    text-transform: capitalize;
-    font-weight: 600;
-    font-size: 0.75rem;
-    padding-left: 0.5rem;
-    height: 1.875rem;
-    padding-top: 0.1875rem;
-    border-radius: 0.375rem;
-  }
-
-  .region-dropdown-list {
-    min-width: 9.375rem;
-    border-radius: 0.375rem;
-  }
-}
-
-.saved-view-table {
-  td {
-    padding: 0;
-    height: 1.5625rem !important;
-    min-height: 1.5625rem !important;
-  }
-
-  .saved-view-item {
-    padding: 0.25rem 0.3125rem 0.25rem 0.625rem !important;
-  }
-}
-
-.logs-index-menu {
-  width: 100%;
-
-  .index-table {
-    width: 100%;
-    height: calc(100% - 40px);
-
-    tr {
-      margin-bottom: 1px;
-    }
-
-    tbody,
-    tr,
-    td {
-      width: 100%;
-      display: block;
-      height: fit-content;
-      overflow: hidden;
-    }
-  }
-
-  .field-table {
-    width: 100%;
-
-    .field-list-pagination {
-      display: flex;
-      align-items: center;
-      gap: 0.125rem;
-
-      .pagination-nav-btn {
-        padding: 0 !important;
-        margin: 0 !important;
-        min-width: auto !important;
-        min-height: auto !important;
-        width: auto !important;
-        height: auto !important;
-        border-radius: 0 !important;
-
-        &.disabled {
-          opacity: 0.4;
-        }
-      }
-
-      .pagination-page-btn {
-        padding: 0.375rem 0.25rem !important;
-        margin: 0 !important;
-        min-width: 1.5rem !important;
-        width: 1.5rem !important;
-        min-height: 1.375rem !important;
-        height: 1.375rem !important;
-        font-size: 0.75rem !important;
-        font-weight: 500;
-        line-height: 1;
-        color: var(--o2-text-primary) !important;
-        border-radius: 0.25rem !important;
-        overflow: visible !important;
-      }
-    }
-
-    .field-list-reset {
-      display: flex;
-      align-items: center;
-
-      .reset-icon {
-        font-size: 1.25rem !important;
-        color: var(--o2-text-primary);
-        transition: color 0.2s ease;
-      }
-    }
-  }
-
-  .field_list {
-    padding: 0px;
-    margin-bottom: 0.125rem;
-    position: relative;
-    overflow: visible;
-    cursor: default;
-
-    .field_label {
-      pointer-events: none;
-      font-size: 0.825rem;
-      position: relative;
-      display: inline;
-      z-index: 2;
-      left: 0;
-      height: 20px;
-      color: var(--o2-text-primary);
-    }
-
-    .field-container {
-      height: 25px;
-    }
-
-    .field_overlay {
-      position: absolute;
-      height: 100%;
-      right: 0;
-      top: 0;
-      z-index: 5;
-      padding: 0 6px;
-      visibility: hidden;
-      display: flex;
-      align-items: center;
-    }
-
-    &.selected {
-      .field_overlay {
-        background-color: var(--o2-hover-accent);
-
-        .field_icons {
-          opacity: 0;
-        }
-      }
-    }
-  }
-
-  &.theme-dark {
-    .field_list {
-      &:hover {
-        .field_overlay {
-          background-color: var(--o2-hover-accent);
-        }
-      }
-    }
-
-    .field-list-reset {
-      .reset-icon {
-        color: var(--o2-text-primary);
-        border: 1px solid rgba(196, 196, 196);
-        border-radius: 0.375rem !important;
-        padding: 0.125rem;
-
-        &:hover {
-          color: white;
-        }
-      }
-    }
-  }
-
-  &.theme-light {
-    .field_list {
-      &:hover {
-        .field_overlay {
-          background-color: var(--o2-hover-accent);
-          opacity: 1;
-        }
-      }
-    }
-  }
-
-  .index-table {
-    .schema-field-toggle {
-      border: 1px solid var(--o2-border-color);
-      border-radius: 0.325rem;
-      background-color: transparent;
-      line-height: 10px;
-    }
-
-    .pagination-field-count {
-      line-height: 1.95rem;
-      font-weight: 700;
-      font-size: 0.8125rem;
-    }
-  }
-}
-
-.histogram-container {
-  border-radius: 0.5rem;
-  position: relative;
-
-  &--visible {
-    height: 6.25rem;
-    padding-top: 0.25rem;
-    opacity: 1;
-    transition: all 0.3s ease-in-out;
-  }
-
-  &--hidden {
-    height: 0;
-    opacity: 0;
-    overflow: hidden;
-    transition: all 0.3s ease-in-out;
-  }
-}
-
-.histogram-chart {
-  max-height: 6.25rem;
-  border-radius: 0.5rem;
-}
-
-.histogram-empty {
-  height: 6.25rem;
-  border-radius: 0.5rem;
-
-  &__message {
-    min-height: 2rem;
-  }
-}
-
-.histogram-skeleton {
-  --hsk-bar:     var(--color-grey-100);
-  --hsk-shimmer: rgba(255, 255, 255, 0.65);
-
-  .body--dark & {
-    --hsk-bar:     var(--color-grey-700);
-    --hsk-shimmer: rgba(255, 255, 255, 0.06);
-  }
-
-  height: 6.25rem;
-  display: flex;
-  flex-direction: column;
-  padding-top: 0.25rem;
-  overflow: hidden;
-
-  &__main {
-    flex: 1;
-    display: flex;
-    min-height: 0;
-  }
-
-  &__y-axis {
-    width: 2.25rem;
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: flex-end;
-    padding-right: 0.3125rem;
-    padding-bottom: 2px;
-  }
-
-  &__y-label {
-    height: 0.4375rem;
-    border-radius: 0.125rem;
-    background-color: var(--hsk-bar);
-  }
-
-  &__plot {
-    flex: 1;
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-    border-left: 1px solid var(--o2-border-color);
-    border-bottom: 1px solid var(--o2-border-color);
-  }
-
-  &__bars {
-    flex: 1;
-    display: flex;
-    align-items: flex-end;
-    gap: 2px;
-    padding: 0.25rem 0.25rem 0;
-    overflow: hidden;
-    position: relative;
-
-    &::after {
-      content: "";
-      position: absolute;
-      top: 0;
-      left: -100%;
-      width: 100%;
-      height: 100%;
-      background: linear-gradient(
-        90deg,
-        transparent        0%,
-        transparent       20%,
-        var(--hsk-shimmer) 50%,
-        transparent       80%,
-        transparent       100%
-      );
-      animation: histogram-bar-shimmer 1.6s ease-in-out infinite;
-      pointer-events: none;
-    }
-  }
-
-  &__bar {
-    flex: 0 0 7px;
-    flex-shrink: 0;
-    border-radius: 1px 1px 0 0;
-    background-color: var(--hsk-bar);
-  }
-
-  &__x-axis {
-    display: flex;
-    justify-content: space-between;
-    padding-left: 2.25rem;
-    padding-top: 0.1875rem;
-  }
-
-  &__x-label {
-    width: 2.25rem;
-    height: 0.4375rem;
-    border-radius: 0.125rem;
-    background-color: var(--color-skeleton-base);
-  }
-}
-
-@keyframes histogram-bar-shimmer {
-  from { left: -100%; }
-  to   { left: 100%; }
-}
-
-.histogram-error {
-  margin: 0.5rem 0;
-  border-radius: 0.5rem;
-
-  &__message {
-    min-height: 2rem;
-  }
-}
-
-.table-container {
-  border-radius: 0.5rem;
-  overflow: auto !important;
-
-  &--with-histogram {
-    min-height: calc(100% - 6.25rem) !important;
-  }
-
-  &--without-histogram {
-    min-height: 100% !important;
-  }
-}
-
-.search-spinner {
-  margin: 0 auto;
-  display: block;
-}
-
-.search-loading-text {
-  font-size: 0.875rem;
-}
-
-.detail-table-dialog {
-  border-radius: 0.5rem;
-}
-
-.search-list {
-  padding: 0 !important;
-  margin: 0 !important;
-  height: 100%;
-  overflow: hidden !important;
-}
-
-.dark-theme {
+.dark {
   .pagination__content {
     input {
       border: 1px solid rgba(255, 255, 255, 0.28) !important;
-      color: var(--o2-text-primary);
+      color: var(--color-text-heading);
       background-color: transparent;
     }
   }
 }
 
-.histogram-unavailable-text {
-  color: #f5a623;
-}
-
-.histogram-unavailable-text-light {
-  color: #ff8800;
-}
-
-.searchdetaildialog {
-  .select-noof-records {
-    width: 5rem;
-
-    button[type="button"] {
-      height: 2.25rem;
-    }
-  }
-}
-
-.logs-json-preview-tabs {
-  height: fit-content;
-  overflow: hidden;
-  border: none;
-  border-top: 1px solid var(--o2-border-color);
-  border-left: 1px solid var(--o2-border-color);
-  border-right: 1px solid var(--o2-border-color);
-
-  .o2-tab {
-    width: fit-content !important;
-    padding: 0.25rem 0.5rem !important;
-    font-size: 12px !important;
-    border-bottom: 3px solid var(--o2-border-color) !important;
-  }
-
-  .active {
-    border-bottom: 3px solid var(--o2-primary-btn-bg) !important;
-  }
-}
-
-.context-menu {
-  min-width: 200px;
-  padding: 4px 0;
-  font-size: 13px;
-
-  .context-menu-item {
-    padding: 6px 12px;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    transition: background-color 0.2s;
-  }
-}
-
-.context-menu-dark {
-  background-color: #1a1a1a;
-  border: 1px solid #4a5568;
-
-  .context-menu-item {
-    color: #e2e8f0;
-
-    &:hover {
-      background-color: #4a5568;
-    }
-  }
-}
-
-.context-menu-light {
-  background-color: #ffffff;
-  border: 1px solid #e2e8f0;
-
-  .context-menu-item {
-    &:hover {
-      background-color: #f3f4f6;
-    }
-  }
-}
-
-.logs-splitter-icon-collapse {
-  min-height: 3em !important;
-  min-width: 0.3rem !important;
-  position: absolute !important;
-  top: 1rem !important;
-  left: 0.6rem !important;
-  z-index: 100 !important;
-  border-radius: 0.325rem;
-}
-
-.logs-splitter-icon-expand {
-  min-height: 3em !important;
-  min-width: 0.3rem !important;
-  position: absolute !important;
-  top: 1rem !important;
-  left: 0 !important;
-  z-index: 100 !important;
-  border-radius: 0.325rem;
-}
-
-/* --- detail-table.scss --- */
-
-.searchdetaildialog {
-  width: 85vw;
-}
-
-.indexDetailsContainer {
-  .log_json_content {
-    white-space: pre-wrap;
-    font-family: monospace;
-    font-size: 12px;
-  }
-}
-
-.table-pre {
-  word-wrap: break-word;
-  display: inline;
-  font-weight: normal;
-  font-family: monospace;
-  margin: 0;
-  padding: 0;
-}
-
-.json-pre {
-  height: calc(100vh - 290px);
-  white-space: pre-wrap;
-  word-wrap: break-word;
-}
-
-.tab-panels-container {
-  height: calc(100vh - 198px);
-}
-
-.detail-table-list {
-  height: calc(100vh - 290px);
-}
-
-.searchdetaildialog .o2-schema-table {
-  thead th {
-    border-right: 1px solid var(--o2-border-color);
-    border-bottom: 1px solid var(--o2-border-color);
-
-    &:last-child {
-      border-right: none;
-    }
-  }
-
-  tbody td {
-    border-right: 1px solid var(--o2-border-color);
-    border-bottom: 1px solid var(--o2-border-color);
-
-    &:last-child {
-      border-right: none;
-    }
-  }
-
-  tbody tr:last-child td {
-    border-bottom: none;
-  }
-}
-
-/* --- json-preview.scss --- */
-/* NOTE: the .monaco-editor rules from json-preview.scss were originally
-   scoped to JsonPreview.vue (<style scoped>). They are now applied inline on
-   that component's editor instead of here, so they don't leak onto every
-   .monaco-editor app-wide (which made a stray #515151 outline appear around
-   unrelated editors such as the dashboard query editor). */
-
-/* The query-editor wrappers used to carry a stray `monaco-editor` class (left
-   over from the old SCSS that sized the editor via `.monaco-editor { ... }`).
-   With the class present, monaco's base stylesheet applied to the wrapper —
-   including `--vscode-focusBorder` (#0090f1) and its outline — so a stray focus
-   border was painted around the non-editor wrapper, doubling up with the real
-   inner editor's border. The fix is to remove that leftover class from every
-   query-editor usage (see the *.vue templates). This rule is the safety net for
-   the real inner monaco editor: `.logs-query-editor` is present on every
-   CodeQueryEditor mount, so it covers the editor on every page. Neutralise the
-   outline / focus-border on the mount, the real inner editor, the overflow
-   guard, and the hidden focus textarea so no stray border can show. */
-.logs-query-editor,
-.logs-query-editor .monaco-editor,
-.logs-query-editor .overflow-guard,
-.logs-query-editor .inputarea {
-  outline: none !important;
-  --vscode-focusBorder: transparent !important;
-}
-
-.log_json_content {
-  white-space: pre-wrap;
-  font-family: monospace;
-  font-size: 12px;
-}
-
-.log-json-field-dropdown-btn {
-  height: 20px !important;
-  width: 20px !important;
-  min-height: 20px !important;
-  min-width: 20px !important;
-  padding: 0 !important;
-  vertical-align: middle;
-}
-
-.log-key {
-  color: #b71c1c;
-  font-weight: normal;
-}
-
-.dark .log-key {
-  color: #f67a7aff;
-}
-
-.log-separator {
-  color: #666;
-  font-weight: normal;
-}
-
-.dark .log-separator {
-  color: #999;
-}
-
-.load-more-container {
-  margin-top: 12px;
-  padding: 12px;
-  border-top: 1px solid var(--o2-border-color);
-  background-color: rgba(0, 0, 0, 0.02);
-  border-radius: 4px;
-}
-
-.dark .load-more-container {
-  background-color: rgba(255, 255, 255, 0.03);
-}
-
-.load-more-btn {
-  font-weight: 600 !important;
-  font-size: 13px !important;
-  min-height: 32px !important;
-  padding: 6px 16px !important;
-  border-width: 1.5px !important;
-
-  &:hover {
-    background-color: rgba(var(--o2-theme-color), 0.1) !important;
-    border-width: 2px !important;
-  }
-}
-
-/* --- search-history.scss --- */
-
-.expanded-content {
-  padding: 0 0.5rem 0rem 1rem;
-  width: calc(95vw - 40px);
-  max-height: 100vh;
-  overflow: hidden;
-}
-
-.scrollable-content {
-  width: 100%;
-  overflow-y: auto;
-  padding: 10px;
-  border: 1px solid #ddd;
-  height: 100%;
-  max-height: 200px;
-  text-wrap: normal;
-  background-color: #e8e8e8;
-  color: black;
-}
-
-.copy-btn-sql {
-  border: #7a54a2 1px solid;
-  color: #7a54a2;
-}
-
-.copy-btn-function {
-  border: #0a7ebc 1px solid;
-  color: #0a7ebc;
-}
-
-.warning-text {
-  color: #f5a623;
-  border: 1px solid #f5a623;
-}
-
-button.date-time-button {
-  height: 36px !important;
-}
-
-/*
- * Relative-period chips ("Past 15m" grid) shared by DateTime.vue, DateTimePicker.vue
- * and CustomDateTimePicker.vue. They render as ghost OButtons (transparent bg), so these
- * classes supply the grey fill, size, and the selected primary fill — same rules that
- * used to live in each component's <style> block on main, just hoisted here as global CSS
- * after the per-component SCSS was removed.
- */
-.rp-selector,
-.rp-selector-selected {
-  height: 32px;
-  width: 32px;
-  background: rgba(0, 0, 0, 0.07);
-  font-weight: 700;
-}
-.rp-selector:disabled,
-.rp-selector-selected:disabled {
-  opacity: 0.35;
-  cursor: not-allowed;
-}
-.rp-selector-selected {
-  color: #ffffff;
-  background: var(--o2-primary-btn-bg);
-}
-
-.wrap-content-btn {
-  height: 1.5rem !important;
-  min-height: 1.5rem !important;
-  width: 1.45rem !important;
-  padding: 0 !important;
-  border: 0.0626rem solid var(--o2-border-color) !important;
-  border-radius: 0.25rem !important;
-  transition: all 0.2s ease;
-  margin: 0;
-  background: rgba(255, 255, 255, 0.1) !important;
-  backdrop-filter: blur(10px) !important;
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-
-  &:hover {
-    background: rgba(255, 255, 255, 0.15) !important;
-  }
-}
-
-.wrap-content-btn--active {
-  background: var(--q-primary) !important;
-  color: white;
-}
-
-.wrap-content-btn--active:hover {
-  background: var(--q-primary) !important;
-  opacity: 0.85;
-}
-
-.expanded-sql {
-  border-left: #7a54a2 3px solid;
-}
-
-.expanded-function {
-  border-left: #0a7ebc 3px solid;
-}
-
-.report-list-tabs {
-  height: fit-content;
-
-  .rum-tabs {
-    border: 1px solid #464646;
-  }
-
-  .rum-tab {
-    &:hover {
-      background: #464646;
-    }
-
-    &.active {
-      background: #5960b2;
-      color: #ffffff !important;
-    }
-  }
-}
-
-.report-list-tabs {
-  padding: 0 1rem;
-  height: fit-content;
-  width: fit-content;
-
-  .rum-tabs {
-    border: 1px solid #eaeaea;
-    height: fit-content;
-    border-radius: 4px;
-    overflow: hidden;
-  }
-
-  .rum-tab {
-    width: fit-content !important;
-    padding: 4px 12px !important;
-    border: none !important;
-
-    &:hover {
-      background: #eaeaea;
-    }
-
-    &.active {
-      background: #5960b2;
-      color: #ffffff !important;
-    }
-  }
-}
-
-/* --- search-result.scss --- */
-
-.max-result {
-  width: 170px;
-}
-
-.result-bar {
-  border-bottom: 1px solid var(--o2-border-color);
-  background: var(--o2-card-bg);
-}
-
-.pagination-block {
-  .select-pagination {
-    position: relative;
-  }
-}
-
-.search-list {
-  width: 100%;
-  height: 100%;
-  padding: 0 !important;
-  margin: 0 !important;
-  box-sizing: border-box !important;
-  overflow: hidden !important;
-
-  .chart {
-    width: 100%;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-  }
-
-  .my-sticky-header-table {
-    thead tr th {
-      background-color: white;
-      position: sticky;
-      z-index: 1;
-    }
-
-    thead tr:first-child th {
-      top: 0;
-    }
-  }
-}
-
-.thead-sticky tr > *,
-.tfoot-sticky tr > * {
-  position: sticky;
-  opacity: 1;
-  z-index: 1;
-  background: #f5f5f5;
-}
-
-.thead-sticky tr:last-child > * {
-  top: 0;
-}
-
-.tfoot-sticky tr:first-child > * {
-  bottom: 0;
-}
-
-.field_list,
-.table-head-chip {
-  padding: 0px;
-  margin-bottom: 0;
-  position: relative;
-  overflow: visible;
-  cursor: default;
-  font-size: 12px;
-  font-family: monospace;
-
-  .field_overlay {
-    width: fit-content;
-    position: absolute;
-    height: 100%;
-    right: 0;
-    top: 0;
-    background-color: #ffffff;
-    border-radius: 6px;
-    padding: 0 6px;
-    visibility: hidden;
-    display: flex;
-    align-items: center;
-    transition: all 0.3s linear;
-    pointer-events: none;
-
-    &.field_overlay_dark {
-      background-color: #181a1b;
-    }
-  }
-
-  &:hover {
-    .field_overlay {
-      visibility: visible;
-    }
-  }
-}
-
-.table-head-chip {
-  font-family: var(--font-sans);
-
-  .field_overlay {
-    background-color: #f5f5f5;
-    pointer-events: none;
-
-    &.field_overlay_dark {
-      background-color: #565656;
-    }
-  }
-}
-
-.logs-analyzed-input {
-  width: 80%;
-}
-
-.pattern-block-actions {
-  opacity: 0;
-  transition: opacity 0.2s ease-in-out;
-}
-
-.oo-pin-backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 9998;
-}
-
-.oo-pin-tooltip {
-  position: fixed;
-  z-index: 9999;
-  min-width: 200px;
-  max-height: 20vh;
-  overflow-y: auto;
-  overflow-x: hidden;
-  background: var(--q-color-dark, #1e1e2e);
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  border-radius: 8px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
-  padding: 8px 0;
-  font-size: 12px;
-  outline: none;
-
-  .body--light & {
-    background: #fff;
-    border-color: rgba(0, 0, 0, 0.12);
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-    color: #222;
-  }
-
-  &__time {
-    font-size: 11px;
-    font-weight: 500;
-    opacity: 0.65;
-    padding: 0 10px 4px;
-    margin-bottom: 0;
-    border-bottom: 1px solid rgba(128, 128, 128, 0.15);
-  }
-
-  &__row {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 1px 10px;
-    transition: background 0.1s;
-
-    &:hover {
-      background: rgba(128, 128, 128, 0.12);
-    }
-  }
-
-  &__dot {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    flex-shrink: 0;
-  }
-
-  &__name {
-    flex: 1;
-    white-space: nowrap;
-  }
-
-  &__count {
-    font-weight: 600;
-    min-width: 32px;
-    text-align: right;
-    transition: opacity 0.1s;
-  }
-
-  &__row-actions {
-    display: flex;
-    gap: 3px;
-    flex-shrink: 0;
-    margin-left: 4px;
-  }
-
-  &__action {
-    width: 22px;
-    height: 22px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 13px;
-    font-weight: 700;
-    line-height: 1;
-
-    &--include {
-      background: rgba(25, 118, 210, 0.12);
-      color: #1976D2;
-
-      .body--dark & {
-        color: #64B5F6;
-        background: rgba(100, 181, 246, 0.15);
-      }
-
-      &:hover {
-        background: rgba(25, 118, 210, 0.25);
-      }
-    }
-
-    &--exclude {
-      background: rgba(198, 40, 40, 0.08);
-      color: #c62828;
-
-      .body--dark & {
-        color: #EF9A9A;
-        background: rgba(239, 154, 154, 0.12);
-      }
-
-      &:hover {
-        background: rgba(198, 40, 40, 0.2);
-      }
-    }
-  }
-}
-
-/* --- search-schedulerlist.scss --- */
-
-.expanded-content {
-  padding: 0 1rem;
-  min-width: calc(90vw - 20px);
-  max-height: 100vh;
-  overflow: hidden;
-}
-
-.scrollable-content {
-  width: 100%;
-  overflow-y: auto;
-  padding: 10px;
-  border: 1px solid #ddd;
-  height: 100%;
-  max-height: 200px;
-  text-wrap: normal;
-  background-color: #e8e8e8;
-  color: black;
-}
-
-.copy-btn-sql {
-  border: #7a54a2 1px solid;
-  color: #7a54a2;
-}
-
-.copy-btn-function {
-  border: #0a7ebc 1px solid;
-  color: #0a7ebc;
-}
-
-.warning-text {
-  color: #f5a623;
-  border: 1px solid #f5a623;
-  border-radius: 2px;
-}
-
-.expanded-sql {
-  border-left: #7a54a2 3px solid;
-}
-
-.expanded-function {
-  border-left: #0a7ebc 3px solid;
-}
-
-/* --- syntax-guide.scss --- */
-
-.guide-list {
-  padding: 0 10px;
-  margin: 10px 0 0 0;
-}
-
-.guide-list li {
-  font-size: 14px;
-  line-height: 23px;
-}
-
-.syntax-guide-button {
-  cursor: pointer;
-  text-transform: capitalize;
-  min-width: 1.875rem;
-  min-height: 1.875rem;
-  padding: 0.25rem 0.375rem;
-  font-weight: normal;
-  border: 0.0625rem solid rgba(0, 0, 0, 0.12) !important;
-  border-radius: 0.375rem;
-  transition: all 0.2s ease;
-
-  &:hover {
-    background-color: var(--o2-hover-accent);
-  }
-}
-
-.syntax-guide-button-dark {
-  border: 0.0625rem solid var(--o2-border-color) !important;
-}
-
-.dark-theme .syntax-guide-in-toolbar {
-  border: 0.0625rem solid var(--o2-border-color) !important;
-}
-
-.syntax-guide-title {
-  width: 420px;
-
-  .label {
-    font-size: 15px;
-    font-weight: bold;
-  }
-}
-
-.syntax-guide-sub-title {
-  color: #3F7994;
-  font-size: 15px;
-  margin-left: 5px;
-}
-
-.syntax-guide-text {
-  font-size: 12px;
-  margin-left: 5px;
-}
-
-.syntax-section {
-  margin-bottom: 5px;
-}
-
-.bg-highlight {
-  padding-left: 5px;
-  padding-right: 5px;
-}
-
-.theme-dark .bg-highlight {
-  background-color: #747474;
-}
-
-.theme-light .bg-highlight {
-  background-color: #e7e6e6;
-}
-
-/* --- tenstack-table.scss --- */
-
-.resizer {
-  position: absolute;
-  top: 0;
-  height: 100%;
-  width: 5px;
-  cursor: col-resize;
-  user-select: none;
-  touch-action: none;
-}
-
-.resizer.ltr {
-  right: 0;
-}
-
-.resizer.rtl {
-  left: 0;
-}
-
-.resizer.isResizing {
-  background: #3F7994;
-  opacity: 1;
-}
-
-/* Namespaced: a bare `.container` collides with Tailwind's built-in container
-   utility, which adds viewport-keyed max-width caps and clips wide tables. */
-.o2-scroll-container {
-  overflow: auto;
-  border-radius: 0.5rem;
-}
-
-.o2-scroll-container.virtual-scroll-active {
-  will-change: scroll-position;
-}
-
-.height-stretch {
-  align-self: stretch;
-}
-
-.cursor-pointer {
-  cursor: pointer;
-}
-
-.select-none {
-  user-select: none;
-}
-
-.text-left {
-  text-align: left;
-}
-
-/* Scoped to .logs-table (TenstackTable). In main these bare-element rules lived
-   in a <style scoped> block and only affected this component; keep them scoped
-   here so they don't change fonts on every table in the app. */
-.logs-table {
-  border-collapse: separate;
-  border-spacing: 0;
-  font-size: 12px !important;
-}
-
-/* This "table" lays out entirely with flexbox + explicit column widths — it
-   does not use native table column layout. Rendering the table/thead/tbody as
-   block boxes makes `position: relative` (the containing block for the
-   position:absolute virtual rows), `height`, and `position: sticky` on the
-   header behave identically across browsers. Firefox does NOT honor these on
-   native table-row-group boxes, which left the Firefox results table collapsed
-   with no visible rows. */
-.logs-table,
-.logs-table > thead,
-.logs-table > tbody {
-  display: block;
-}
-
-/* Unified list-page header — logs + traces read as one system.
-   Fixes: logs headers looked too bold/heavy (14px slate on a near-white bar);
-   traces headers looked washed out & blurry (light slate #5A5D6B, wide
-   0.06rem tracking, no weight) AND had no header background at all.
-   One crisp, medium-weight, neutral-grey style on a shared header band. */
-/* Header font-family is the only shared thead concern kept in CSS; all header
-   chrome (bg band, underline, label color/size/weight/capitalize) is now
-   applied via token-backed utility classes in-template (the OTable pattern),
-   so there are no per-file !important overrides here. */
-.logs-table thead,
-.traces-table-container thead {
-  font-family: var(--font-sans);
-}
-
-.table-row {
-  border-bottom: 1px solid gray;
-}
-
-.logs-table th {
-  text-align: left;
-
-  .column-actions {
-    background: var(--o2-log-table-header-bg);
-  }
-
-  &:hover {
-    .column-actions {
-      visibility: visible !important;
-    }
-  }
-}
-
-.logs-table td {
-  /* Brand monospace (Geist Mono), not the OS-default `monospace` keyword. */
-  font-family: var(--font-mono);
-  /* Monospace renders heavier than the sans UI chrome, so at the body-text
-     grey (#404040) log rows read as near-black. Step the data text to grey-500
-     so it optically matches the sans field list's weight — lighter, not faded. */
-  color: var(--color-grey-500);
-}
-
-.thead-sticky tr > *,
-.tfoot-sticky tr > * {
-  position: sticky;
-  opacity: 1;
-  z-index: 1;
-  background: #E0E0E0;
-}
-
-.table-cell {
-  &:hover {
-    .table-cell-actions {
-      display: block !important;
-    }
-  }
-}
-
-.oz-table__row--error {
-}
-
-.table-row-hover {
-  &:hover {
-    .ai-btn {
-      visibility: visible !important;
-      z-index: 2;
-    }
-  }
-}
-
-/* --- function-selector.scss --- */
-
-.toolbar-toggle-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 0.175rem;
-  margin-left: 0.25rem;
-  border: 0.0625rem solid var(--o2-border-color);
-  border-radius: 0.375rem;
-  transition: all 0.2s ease;
-  cursor: pointer;
-
-  &:hover {
-    background-color: var(--o2-hover-accent);
-  }
-}
-
-.dark-theme .toolbar-toggle-container {
-  border: 0.0625rem solid var(--o2-border-color);
-}
-
-.toolbar-icon-in-toggle {
-  font-size: 0.9rem;
-}
-
-.function-selector {
-  margin-right: 0.25rem;
-  border-radius: 0.375rem;
-
-  .btn-function {
-    transition: all 0.2s ease;
-    padding-right: 0.375rem;
-    padding-left: 0.375rem;
-    min-width: auto;
-
-    &:hover {
-      background-color: var(--o2-hover-accent);
-    }
-  }
-}
-
-/* --- transform-selector.scss --- */
-
-.dark-theme {
+.dark {
   .transform-icon,
   .function-icon {
     img {
@@ -4048,217 +1469,285 @@ button.date-time-button {
   }
 }
 
-.transform-selector {
-  border-radius: 0.375rem;
+/* ── Register component/domain tokens used in class utilities ──
+   Generates real Tailwind utilities (bg-card-glass-bg, text-status-error-text, …)
+   so component classes don't need arbitrary var() values. */
+@theme inline {
+  --color-banner-default-bg: var(--color-banner-default-bg);
+  --color-banner-default-text: var(--color-banner-default-text);
+  --color-banner-error-bg: var(--color-banner-error-bg);
+  --color-usage-banner-error-border: var(--color-usage-banner-error-border);
+  --color-usage-banner-warning-border: var(--color-usage-banner-warning-border);
+  --color-banner-error-soft-bg: var(--color-banner-error-soft-bg);
+  --color-banner-error-soft-border: var(--color-banner-error-soft-border);
+  --color-banner-error-soft-text: var(--color-banner-error-soft-text);
+  --color-banner-error-text: var(--color-banner-error-text);
+  --color-banner-info-bg: var(--color-banner-info-bg);
+  --color-banner-info-border: var(--color-banner-info-border);
+  --color-banner-info-text: var(--color-banner-info-text);
+  --color-banner-success-bg: var(--color-banner-success-bg);
+  --color-banner-success-border: var(--color-banner-success-border);
+  --color-banner-success-text: var(--color-banner-success-text);
+  /* Registered so bg-warning-surface compiles */
+  --color-warning-surface: var(--color-warning-surface);
+  --color-banner-warning-bg: var(--color-banner-warning-bg);
+  --color-banner-warning-border: var(--color-banner-warning-border);
+  --color-banner-warning-text: var(--color-banner-warning-text);
+  --color-ai-accent: var(--color-ai-accent);
+  --color-sql-accent: var(--color-sql-accent);
+  --color-function-accent: var(--color-function-accent);
+  --color-brand-slack: var(--color-brand-slack);
+  --color-brand-slack-hover: var(--color-brand-slack-hover);
+  --color-brand-teams: var(--color-brand-teams);
+  --color-brand-teams-hover: var(--color-brand-teams-hover);
+  --color-brand-email: var(--color-brand-email);
+  --color-brand-email-hover: var(--color-brand-email-hover);
+  --color-promo-webinar-link: var(--color-promo-webinar-link);
+  --color-promo-webinar-link-hover: var(--color-promo-webinar-link-hover);
+  --color-promo-webinar-accent: var(--color-promo-webinar-accent);
+  --color-promo-webinar-accent-text: var(--color-promo-webinar-accent-text);
+  --color-promo-webinar-text: var(--color-promo-webinar-text);
+  --color-promo-webinar-sep: var(--color-promo-webinar-sep);
+  --color-tool-thread-accent: var(--color-tool-thread-accent);
+  --color-tool-thread-accent-text: var(--color-tool-thread-accent-text);
+  --color-section-accent-secondary: var(--color-section-accent-secondary);
+  --color-bg-gray: var(--color-bg-gray);
+  --color-cancel-query-bg: var(--color-cancel-query-bg);
+  --color-card-glass-bg: var(--color-card-glass-bg);
+  --color-card-glass-border: var(--color-card-glass-border);
+  --color-card-glass-solid: var(--color-card-glass-solid);
+  --color-error-tag-bg: var(--color-error-tag-bg);
+  --color-error-tag-text: var(--color-error-tag-text);
+  --color-gray: var(--color-gray);
+  --color-hover-gray: var(--color-hover-gray);
+  --color-icon-color: var(--color-icon-color);
+  /* TODO(tier-integrity): indigo-700 / purple-700 are BASE primitives, exposed
+     here only because a few decorative/categorical badges (eval data-type chips,
+     the indigo-themed RCA panel) consume them directly. They need proper
+     categorical/component tokens. Do not add more. */
+  --color-indigo-700: var(--color-indigo-700);
+  --color-info: var(--color-info);
+  --color-json-key: var(--color-json-key);
+  --color-lang-promql-bg: var(--color-lang-promql-bg);
+  --color-lang-promql-text: var(--color-lang-promql-text);
+  --color-lang-sql-bg: var(--color-lang-sql-bg);
+  --color-lang-sql-text: var(--color-lang-sql-text);
+  --color-lang-vrl-bg: var(--color-lang-vrl-bg);
+  --color-lang-vrl-text: var(--color-lang-vrl-text);
+  --color-latency-p95: var(--color-latency-p95);
+  --color-log-table-row-bg: var(--color-log-table-row-bg);
+  --color-log-table-row-border: var(--color-log-table-row-border);
+  --color-purple-700: var(--color-purple-700);
+  --color-section-header-bg: var(--color-section-header-bg);
+  --color-service-health-critical: var(--color-service-health-critical);
+  --color-service-health-degraded: var(--color-service-health-degraded);
+  --color-service-health-healthy: var(--color-service-health-healthy);
+  --color-service-health-warning: var(--color-service-health-warning);
+  --color-severity-error-color: var(--color-severity-error-color);
+  --color-severity-warning-color: var(--color-severity-warning-color);
+  --color-status-error-bg: var(--color-status-error-bg);
+  --color-status-error-text: var(--color-status-error-text);
+  --color-status-info-bg: var(--color-status-info-bg);
+  --color-status-info-text: var(--color-status-info-text);
+  --color-status-negative: var(--color-status-negative);
+  --color-status-neutral-text: var(--color-status-neutral-text);
+  --color-status-positive: var(--color-status-positive);
+  --color-status-success-bg: var(--color-status-success-bg);
+  --color-status-success-text: var(--color-status-success-text);
+  --color-status-warning-bg: var(--color-status-warning-bg);
+  --color-status-warning-text: var(--color-status-warning-text);
+  --color-sticky-col-header-bg: var(--color-sticky-col-header-bg);
+  --color-tab-text-color: var(--color-tab-text-color);
+  --color-theme-accent: var(--color-theme-accent);
+  --color-theme-body-bg-primary: var(--color-theme-body-bg-primary);
+  --color-theme-tab-bg: var(--color-theme-tab-bg);
+  --color-warning: var(--color-warning);
+  --color-wildcard-bar-blue: var(--color-wildcard-bar-blue);
+  --color-wildcard-bar-green: var(--color-wildcard-bar-green);
+  --color-wildcard-bar-orange: var(--color-wildcard-bar-orange);
+  --color-wildcard-bar-purple: var(--color-wildcard-bar-purple);
 
-  .saved-views-dropdown {
-    margin-right: 0.1rem;
-  }
+  /* JSON syntax colors */
+  --color-json-boolean: var(--color-json-boolean);
+  --color-json-null: var(--color-json-null);
+  --color-json-number: var(--color-json-number);
+  --color-json-object: var(--color-json-object);
+  --color-json-string: var(--color-json-string);
+  /* Trace surface palette */
+  --color-trace-border: var(--color-trace-border);
+  --color-trace-hover: var(--color-trace-hover);
+  --color-trace-selected: var(--color-trace-selected);
+  --color-trace-surface: var(--color-trace-surface);
+  --color-trace-text-primary: var(--color-trace-text-primary);
+  --color-trace-text-secondary: var(--color-trace-text-secondary);
+  /* Field-type chips */
+  --color-field-type-boolean-bg: var(--color-field-type-boolean-bg);
+  --color-field-type-boolean-text: var(--color-field-type-boolean-text);
+  --color-field-type-float-bg: var(--color-field-type-float-bg);
+  --color-field-type-float-text: var(--color-field-type-float-text);
+  --color-field-type-number-bg: var(--color-field-type-number-bg);
+  --color-field-type-number-text: var(--color-field-type-number-text);
+  --color-field-type-string-bg: var(--color-field-type-string-bg);
+  --color-field-type-string-text: var(--color-field-type-string-text);
+  --color-field-type-timestamp-bg: var(--color-field-type-timestamp-bg);
+  --color-field-type-timestamp-text: var(--color-field-type-timestamp-text);
+  /* Misc semantic tokens */
+  --color-focus-ring: var(--color-focus-ring);
+  --color-text-soft: var(--color-text-soft);
+  --color-log-table-header-bg: var(--color-log-table-header-bg);
+  --color-log-table-row-hover: var(--color-log-table-row-hover);
+  /* Type-scale utilities — the whole ladder is registered so `text-sm`/`text-lg`/etc.
+     derive their font-size from our tokens (base.css), not Tailwind's built-in scale.
+     Token px values already equal Tailwind's defaults, so this is visually neutral and
+     makes the token the single source of truth. Paired `--text-*--line-height` keys
+     reproduce the exact line-heights. `leading-*` overrides still win via `--tw-leading`. */
+  --text-3xs: var(--text-3xs);
+  --text-2xs: var(--text-2xs);
+  --text-xs: var(--text-xs);
+  --text-xs--line-height: calc(1 / 0.75);
+  --text-compact: var(--text-compact);
+  --text-sm: var(--text-sm);
+  --text-sm--line-height: calc(1.25 / 0.875);
+  --text-base: var(--text-base);
+  --text-base--line-height: calc(1.5 / 1);
+  --text-lg: var(--text-lg);
+  --text-lg--line-height: calc(1.75 / 1.125);
+  --text-xl: var(--text-xl);
+  --text-xl--line-height: calc(1.75 / 1.25);
+  --text-2xl: var(--text-2xl);
+  --text-2xl--line-height: calc(2 / 1.5);
+  /* Register the used font/tracking steps so the tokens declare the utilities.
+     Weight tokens live in base.css under the legacy --font-<weight> names; v4's
+     --font-* namespace is font-FAMILY, so they are re-exported here under the
+     correct --font-weight-* keys. --leading-sm..xl are deliberately NOT registered
+     (0 utility uses; var()-layer sources for element styles only). */
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+  --font-weight-normal: var(--font-normal);
+  --font-weight-medium: var(--font-medium);
+  --font-weight-semibold: var(--font-semibold);
+  --font-weight-bold: var(--font-bold);
+  --tracking-tight: var(--tracking-tight);
+  --tracking-normal: var(--tracking-normal);
+  --tracking-wide: var(--tracking-wide);
+  /* Domain tokens */
+  --color-highlight-bg: var(--color-highlight-bg);
+  --color-brand-indigo: var(--color-brand-indigo);
 
-  .btn-function {
-    transition: all 0.2s ease;
-    padding: 0 0rem;
-    padding-left: 0.1rem;
-    min-width: auto;
-
-    &:hover {
-      background-color: var(--o2-hover-accent);
-    }
-
-    .btn__content {
-      justify-content: center !important;
-    }
-  }
+  /* Ring-3 categorical shades consumed as utilities by the RUM event-type badges
+     (useEventFormatters.ts: action=blue, resource=purple). Values equal Tailwind's,
+     so no visual change. red/green there map to the error/success ramps instead. */
+  --color-blue-100: var(--color-blue-100);
+  --color-blue-300: var(--color-blue-300);
+  --color-blue-700: var(--color-blue-700);
+  --color-purple-100: var(--color-purple-100);
+  --color-purple-400: var(--color-purple-400);
 }
 
-.save-transform-btn {
-  transition: all 0.2s ease;
-
-  &:hover {
-    background-color: var(--o2-hover-accent);
-  }
+/* ── Register defined-but-unregistered solid domain tokens ──
+   Generates real Tailwind bg / text / border utilities instead of forcing arbitrary
+   var() usage in style blocks. Excludes raw palette ramps, gradient values (would
+   emit invalid background-color), the dead note chain, and runtime span colours. */
+@theme inline {
+  --color-brand-email-accent: var(--color-brand-email-accent);
+  --color-brand-email-ink: var(--color-brand-email-ink);
+  --color-brand-email-ink-deep: var(--color-brand-email-ink-deep);
+  --color-brand-email-warning: var(--color-brand-email-warning);
+  --color-brand-msg-bg: var(--color-brand-msg-bg);
+  --color-brand-msg-border: var(--color-brand-msg-border);
+  --color-brand-msg-border-2: var(--color-brand-msg-border-2);
+  --color-brand-msg-divider: var(--color-brand-msg-divider);
+  --color-brand-msg-error: var(--color-brand-msg-error);
+  --color-brand-msg-meta: var(--color-brand-msg-meta);
+  --color-brand-msg-text: var(--color-brand-msg-text);
+  --color-brand-msg-text-dark: var(--color-brand-msg-text-dark);
+  --color-brand-msg-text-strong: var(--color-brand-msg-text-strong);
+  --color-brand-slack-aubergine: var(--color-brand-slack-aubergine);
+  --color-brand-slack-avatar: var(--color-brand-slack-avatar);
+  --color-brand-slack-green: var(--color-brand-slack-green);
+  --color-brand-slack-link: var(--color-brand-slack-link);
+  --color-brand-slack-meta: var(--color-brand-slack-meta);
+  --color-brand-slack-text: var(--color-brand-slack-text);
+  --color-brand-teams-bg: var(--color-brand-teams-bg);
+  --color-brand-teams-ink: var(--color-brand-teams-ink);
+  --color-brand-teams-text: var(--color-brand-teams-text);
+  --color-dag-node-agent: var(--color-dag-node-agent);
+  --color-dag-node-chain: var(--color-dag-node-chain);
+  --color-dag-node-default: var(--color-dag-node-default);
+  --color-dag-node-embedding: var(--color-dag-node-embedding);
+  --color-dag-node-evaluator: var(--color-dag-node-evaluator);
+  --color-dag-node-event: var(--color-dag-node-event);
+  --color-dag-node-generation: var(--color-dag-node-generation);
+  --color-dag-node-guardrail: var(--color-dag-node-guardrail);
+  --color-dag-node-rerank: var(--color-dag-node-rerank);
+  --color-dag-node-retriever: var(--color-dag-node-retriever);
+  --color-dag-node-task: var(--color-dag-node-task);
+  --color-dag-node-tool: var(--color-dag-node-tool);
+  --color-dag-node-workflow: var(--color-dag-node-workflow);
+  --color-dashboard-placeholder-bg: var(--color-dashboard-placeholder-bg);
+  --color-hover-shadow: var(--color-hover-shadow);
+  --color-pivot-header-border: var(--color-pivot-header-border);
+  --color-scrollbar-thumb: var(--color-scrollbar-thumb);
+  --color-scrollbar-thumb-hover: var(--color-scrollbar-thumb-hover);
+  --color-theme-body-bg-secondary: var(--color-theme-body-bg-secondary);
+  --color-theme-header-menu-bg: var(--color-theme-header-menu-bg);
+  --color-theme-menu-color: var(--color-theme-menu-color);
+  --color-theme-menu-gradient-end: var(--color-theme-menu-gradient-end);
+  --color-theme-menu-gradient-start: var(--color-theme-menu-gradient-start);
+  --color-theme-tab-bg-inactive: var(--color-theme-tab-bg-inactive);
+  --color-theme-table-header-bg: var(--color-theme-table-header-bg);
 }
 
-/* --- visualizelogs-query.scss --- */
-
-.layout-panel-container {
-  display: flex;
-  flex-direction: column;
+/* ── Register defined-but-unregistered solid domain tokens ──
+   Generates real Tailwind bg / text / border utilities instead of forcing arbitrary
+   var() usage in style blocks. Excludes raw palette ramps, gradient values (would
+   emit invalid background-color), the dead note chain, and runtime span colours. */
+@theme inline {
+  --color-brand-email-accent: var(--color-brand-email-accent);
+  --color-brand-email-ink: var(--color-brand-email-ink);
+  --color-brand-email-ink-deep: var(--color-brand-email-ink-deep);
+  --color-brand-email-warning: var(--color-brand-email-warning);
+  --color-brand-msg-bg: var(--color-brand-msg-bg);
+  --color-brand-msg-border: var(--color-brand-msg-border);
+  --color-brand-msg-border-2: var(--color-brand-msg-border-2);
+  --color-brand-msg-divider: var(--color-brand-msg-divider);
+  --color-brand-msg-error: var(--color-brand-msg-error);
+  --color-brand-msg-meta: var(--color-brand-msg-meta);
+  --color-brand-msg-text: var(--color-brand-msg-text);
+  --color-brand-msg-text-dark: var(--color-brand-msg-text-dark);
+  --color-brand-msg-text-strong: var(--color-brand-msg-text-strong);
+  --color-brand-slack-aubergine: var(--color-brand-slack-aubergine);
+  --color-brand-slack-avatar: var(--color-brand-slack-avatar);
+  --color-brand-slack-green: var(--color-brand-slack-green);
+  --color-brand-slack-link: var(--color-brand-slack-link);
+  --color-brand-slack-meta: var(--color-brand-slack-meta);
+  --color-brand-slack-text: var(--color-brand-slack-text);
+  --color-brand-teams-bg: var(--color-brand-teams-bg);
+  --color-brand-teams-ink: var(--color-brand-teams-ink);
+  --color-brand-teams-text: var(--color-brand-teams-text);
+  --color-dag-node-agent: var(--color-dag-node-agent);
+  --color-dag-node-chain: var(--color-dag-node-chain);
+  --color-dag-node-default: var(--color-dag-node-default);
+  --color-dag-node-embedding: var(--color-dag-node-embedding);
+  --color-dag-node-evaluator: var(--color-dag-node-evaluator);
+  --color-dag-node-event: var(--color-dag-node-event);
+  --color-dag-node-generation: var(--color-dag-node-generation);
+  --color-dag-node-guardrail: var(--color-dag-node-guardrail);
+  --color-dag-node-rerank: var(--color-dag-node-rerank);
+  --color-dag-node-retriever: var(--color-dag-node-retriever);
+  --color-dag-node-task: var(--color-dag-node-task);
+  --color-dag-node-tool: var(--color-dag-node-tool);
+  --color-dag-node-workflow: var(--color-dag-node-workflow);
+  --color-dashboard-placeholder-bg: var(--color-dashboard-placeholder-bg);
+  --color-hover-shadow: var(--color-hover-shadow);
+  --color-pivot-header-border: var(--color-pivot-header-border);
+  --color-scrollbar-thumb: var(--color-scrollbar-thumb);
+  --color-scrollbar-thumb-hover: var(--color-scrollbar-thumb-hover);
+  --color-theme-body-bg-secondary: var(--color-theme-body-bg-secondary);
+  --color-theme-header-menu-bg: var(--color-theme-header-menu-bg);
+  --color-theme-menu-color: var(--color-theme-menu-color);
+  --color-theme-menu-gradient-end: var(--color-theme-menu-gradient-end);
+  --color-theme-menu-gradient-start: var(--color-theme-menu-gradient-start);
+  --color-theme-tab-bg-inactive: var(--color-theme-tab-bg-inactive);
+  --color-theme-table-header-bg: var(--color-theme-table-header-bg);
 }
-
-.splitter {
-  height: 4px;
-  width: 100%;
-}
-
-.splitter-vertical {
-  width: 4px;
-  height: 100%;
-}
-
-.splitter-enabled {
-  background-color: transparent;
-  transition: background-color 0.3s;
-}
-
-.splitter-enabled:hover {
-  background-color: orange;
-}
-
-.field-list-sidebar-header-collapsed {
-  cursor: pointer;
-  width: 50px;
-  height: 100%;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-}
-
-.field-list-collapsed-icon {
-  margin-top: 10px;
-  font-size: 20px;
-}
-
-.field-list-collapsed-title {
-  writing-mode: vertical-rl;
-  text-orientation: mixed;
-  font-weight: bold;
-}
-
-.warning {
-  color: var(--o2-warning);
-}
-
-.ai-hover-btn:hover img {
-  filter: brightness(0) invert(1);
-  transition: filter 0.3s ease;
-}
-
-::-webkit-scrollbar {
-  width: 0.5625rem;
-  height: 0.5625rem;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--color-grey-300);
-  border-radius: 0.375rem;
-  border: 2px solid transparent;
-  background-clip: content-box;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--color-grey-400);
-  background-clip: content-box;
-}
-
-* {
-  scrollbar-width: thin;
-  scrollbar-color: var(--color-grey-300) transparent;
-}
-
-.dark ::-webkit-scrollbar-thumb {
-  background: var(--color-grey-700);
-  background-clip: content-box;
-}
-
-.dark ::-webkit-scrollbar-thumb:hover {
-  background: var(--color-grey-600);
-  background-clip: content-box;
-}
-
-.dark * {
-  scrollbar-color: var(--color-grey-700) transparent;
-}
-
-.splitter-icon-collapse {
-  min-height: 3em !important;
-  min-width: 0.3rem !important;
-  position: absolute !important;
-  top: 1.625rem !important;
-  left: 0rem !important;
-  z-index: 100 !important;
-  border-radius: 0.325rem;
-}
-
-.splitter-icon-expand {
-  min-height: 3em !important;
-  min-width: 0.3rem !important;
-  position: absolute !important;
-  top: 1.625rem !important;
-  left: 0.25rem !important;
-  z-index: 100 !important;
-  border-radius: 0.325rem;
-}
-
-.spitter-container {
-  width: 100%;
-  height: 100%;
-  background-color: var(--o2-card-bg);
-  border-radius: 0.375rem;
-  overflow: auto;
-  flex: 10000 1 0%;
-}
-
-.alert-field-highlight {
-  border: 0.125rem solid var(--o2-primary-color) !important;
-  border-radius: 0.25rem;
-  transition: border 0.3s ease;
-}
-
-.warning-msg {
-  background-color: var(--o2-status-warning-bg);
-  padding: 0.313rem;
-  border-radius: 0.313rem;
-}
-
-.displayDiv .vue-grid-item.vue-grid-placeholder {
-  background: var(--o2-dashboard-placeholder-bg) !important;
-}
-
-.dashboard-chart-border {
-  border-right: 0.03rem solid var(--o2-border-color);
-  border-bottom: 0.03rem solid var(--o2-border-color);
-}
-
-/* Single source of truth for the count/label shown in a listing-table footer
-   (e.g. "20 Dashboards"). Deliberately sets NO color so it inherits the exact
-   same ambient color as the "Showing X of Y / Records per page" pagination
-   text sitting beside it — the two must always read identically. Only size and
-   weight are fixed here; consumers apply ONLY this class plus layout utilities,
-   never their own color/size/weight, so every listing footer reads the same. */
-.o2-table-footer-title {
-  font-size: 0.75rem;
-  font-weight: 400;
-  line-height: 1rem;
-}
-
-.no-data-image {
-  color: var(--o2-primary-btn-bg);
-}
-
-@media print {
-  .h-full,
-  .h-\[calc\(100vh-105px\)\],
-  .overflow-y-auto,
-  .overflow-auto,
-  .overflow-hidden,
-  .min-h-0,
-  .flex-1 {
-    height: auto !important;
-    min-height: 0 !important;
-    max-height: none !important;
-    overflow: visible !important;
-  }
-
-  .o2-app-header,
-  .o2-sidebar,
-  .o2-sidebar-right {
-    display: none !important;
-  }
-}
\ No newline at end of file
diff --git a/web/src/lib/styles/tokens/dark.css b/web/src/lib/styles/tokens/dark.css
index 8d6a4dd7c6..4f03567cdc 100644
--- a/web/src/lib/styles/tokens/dark.css
+++ b/web/src/lib/styles/tokens/dark.css
@@ -1,4 +1,4 @@
-/* ============================================================
+/* ============================================================
    DARK MODE TOKEN OVERRIDES
    Overrides semantic (and component) tokens for dark themes.
    ============================================================ */
@@ -6,25 +6,18 @@
 :root.dark,
 .dark :root,
 .dark {
-    /*
-     * Tell the browser to render native UI (date/time/color picker icons,
-     * scrollbars, autofill backgrounds, etc.) in dark theme. Without this,
-     * Chromium's default ::-webkit-calendar-picker-indicator stays dark
-     * gray and disappears against the dark input background. This is
-     * inherited by every descendant, so a single declaration on the dark
-     * root flips every native widget at once.
-     */
+    /* Dark theme for native UI (date/time/color pickers, scrollbars,
+       autofill); inherited by all descendants. Without it Chromium's
+       calendar-picker icon stays dark gray and vanishes on dark inputs. */
     color-scheme: dark;
 
-    /* ═══════════════════════════════════════════════════════════
-       DARK MODE FOUNDATION — tune these ~16 values to taste.
-       Everything below (surfaces, borders, text, and the per-component
-       overrides further down) references ONLY these vars, so the whole
-       dark theme is tuned from here without touching components.
+    /* DARK MODE FOUNDATION — tune these ~16 values to taste. Everything
+       below (surfaces, borders, text, per-component overrides) references
+       ONLY these vars, so the whole dark theme is tuned from here.
 
-       Elevation order (deepest → lightest), preserving the light-mode
+       Elevation order (deepest → lightest) preserves the light-mode
        relationship (subtle < panel < base < overlay) so cards LIFT and
-       sub-rails RECEDE — that's what creates visible "sections":
+       sub-rails RECEDE — what creates visible "sections":
 
          chrome   top bar / left rail / gutter behind the card  (deepest)
          well     recessed fills, segmented-control track
@@ -36,19 +29,18 @@
         1. BASE (the content card) is clearly LIGHTER than the chrome behind
            it, so the card visibly floats off the frame.
         2. Borders read clearly ABOVE the surface they outline — a border
-           close to its background is invisible (the bug this fixes).
+           close to its background is invisible.
 
-       Accents stay on the teal brand palette (--color-primary-*), which is
-       theme-driven at runtime (utils/theme.ts) — no accent is hardcoded here.
-       Surfaces are a neutral slate. Want warmer/cooler? Nudge the hex below.
-       ═══════════════════════════════════════════════════════════ */
+       Accents stay on the teal brand palette (--color-primary-*), theme-driven
+       at runtime (utils/theme.ts). Surfaces are a neutral slate; nudge the hex
+       below to go warmer/cooler. */
 
-    /* Surfaces — VS Code Dark+ exact values.
-       chrome  = title bar + activity bar (icon strip)   #333333
-       panel   = sidebar / folder list                   #252526
-       base    = editor / main content canvas            #1E1E1E
-       well    = recessed / segmented track              #2D2D2D
-       overlay = menus, dropdowns, tooltips              #202020 */
+    /* Surfaces — role of each elevation step:
+       chrome  = title bar + activity-bar strip
+       panel   = sidebar / folder list
+       base    = editor / main content canvas
+       well    = recessed / segmented track
+       overlay = menus, dropdowns, tooltips */
     --d-chrome:    #0E0F11;  /* title bar + left activity-bar strip             */
     --d-base:      #0d1117;  /* MAIN: content card + table canvas               */
     --d-well:      #2D2D2D;  /* recessed wells, segmented-control track         */
@@ -61,10 +53,11 @@
     --d-border:        #454545;  /* default: card / input / table / rail edges  */
     --d-border-strong: #6B6B6B;  /* strong: checkbox / radio / file outlines    */
 
-    /* Text — VS Code editor foreground scale */
-    --d-text:      #D4D4D4;  /* primary text, headings, record names            */
-    --d-text-2:    #AAAAAA;  /* secondary: body, nav, labels                    */
-    --d-text-3:    #858585;  /* metadata, captions, column heads, IDs           */
+    /* Text — mapped straight to the registered --color-grey-* palette in the
+       block below (mirrors light mode, where each tier = a grey step). No
+       separate --d-text* anchors: they were just hardcoded hex standing in for
+       grey shades, which flattened the hierarchy (body==secondary, and
+       label==muted==disabled==placeholder all landed on one value). */
 
     /* Row / item states on the content surface */
     --d-hover:     var(--color-primary-900);  /* row & list-item hover — MATCHES
@@ -73,21 +66,56 @@
                              /* selected row — teal-tinted (brand signal)       */
     --d-zebra:     #252526;  /* striped-row bg — VS Code list alternating row    */
 
-    /* --- Text (mapped to the foundation) --- */
-    --color-text-heading:     var(--d-text);   /* h1-h6, modal titles */
-    --color-text-primary:     var(--d-text);   /* alias for heading */
-    --color-text-soft:        var(--d-text);   /* feeds --color-select-text (OSelect trigger value). Soft variant: var(--d-text-2) */
-    --color-text-body:        var(--d-text-2); /* paragraphs, default body */
-    --color-text-secondary:   var(--d-text-2); /* supporting text, descriptions */
-    --color-text-caption:     var(--d-text-3); /* captions, footnotes, timestamps */
-    --color-text-label:       var(--d-text-3); /* form labels, metadata */
-    --color-text-muted:       var(--d-text-3); /* disabled, de-emphasized */
-    --color-text-disabled:    var(--d-text-3);
-    --color-text-placeholder: var(--d-text-3); /* input placeholders */
+    /* --- Text — grey palette steps, one per tier (light half of the ramp) --- */
+    --color-text-heading:     var(--color-grey-200); /* h1-h6, modal titles — brightest */
+    --color-text-soft:        var(--color-grey-200); /* feeds --color-select-text (OSelect trigger value) */
+    --color-text-body:        var(--color-grey-300); /* paragraphs, default body */
+    --color-text-secondary:   var(--color-grey-400); /* supporting text, descriptions */
+    --color-text-label:       var(--color-grey-500); /* form labels, metadata */
+    --color-text-muted:       var(--color-grey-500); /* de-emphasized */
+    --color-text-disabled:    var(--color-grey-600); /* dimmer than labels so disabled reads disabled */
+    --color-text-placeholder: var(--color-grey-500); /* input placeholders — dim but legible, above disabled */
     --color-text-link:        var(--color-primary-400);  /* clickable links (teal) */
     --color-text-link-hover:  var(--color-primary-300);  /* link hover state (teal) */
-    --color-text-code:        var(--d-text-2);           /* inline code, monospace */
+    --color-text-code:        var(--color-grey-300);     /* inline code, monospace */
     --color-text-inverse:     var(--color-grey-900);     /* text on light/colored bg */
+    --color-accent:           var(--color-primary-400);  /* brand accent — lighter shade for dark surfaces */
+    --color-sql-accent:       #A78BFA;                    /* SQL/query violet — lighter for dark surfaces */
+    --color-function-accent:  var(--color-blue-400);      /* VRL-function blue - lighter for dark surfaces */
+    --color-tool-thread-accent-text: #6dd170;             /* tool-thread green - lighter for dark surfaces */
+    /* Trace DAG node-type palette (dark) — lighter step per hue */
+    --color-dag-node-generation: #66bb6a;
+    --color-dag-node-embedding:  #64b5f6;
+    --color-dag-node-agent:      #ce93d8;
+    --color-dag-node-tool:       #ffb74d;
+    --color-dag-node-chain:      #7986cb;
+    --color-dag-node-retriever:  #4dd0e1;
+    --color-dag-node-task:       #4db6ac;
+    --color-dag-node-evaluator:  #f48fb1;
+    --color-dag-node-workflow:   #b39ddb;
+    --color-dag-node-rerank:     #4fc3f7;
+    --color-dag-node-guardrail:  #ef5350;
+    --color-dag-node-event:      #ffd54f;
+    --color-dag-node-default:    #9e9e9e;
+    /* Code syntax highlighting — GitHub dark palette */
+    --color-syntax-bg:       #0d1117;
+    --color-syntax-text:     #c9d1d9;
+    --color-syntax-keyword:  #ff7b72;
+    --color-syntax-function: #d2a8ff;
+    --color-syntax-number:   #79c0ff;
+    --color-syntax-string:   #a5d6ff;
+    --color-syntax-builtin:  #ffa657;
+    --color-syntax-comment:  #8b949e;
+    --color-syntax-tag:      #7ee787;
+    --color-syntax-bullet:   #f2cc60;
+    --color-syntax-addition-fg: #aff5b4;
+    --color-syntax-addition-bg: #033a16;
+    --color-syntax-deletion-fg: #ffdcd7;
+    --color-syntax-deletion-bg: #67060c;
+    /* AI idle washes are denser in dark for legibility */
+    --color-gradient-ai-subtle: linear-gradient(135deg, rgba(139,92,246,0.5) 0%, rgba(236,72,153,0.5) 100%);
+    --color-chat-bubble-user: linear-gradient(135deg, #1e2235 0%, #252a3d 100%);
+    --color-chat-bubble-ai:   linear-gradient(135deg, #2a2d47 0%, #1e213a 100%);
 
     /* --- Surfaces (mapped — elevation order preserved from light mode) --- */
     --color-surface-base:         var(--d-base);    /* content card + table canvas (lifted) */
@@ -95,6 +123,9 @@
     --color-surface-overlay:      var(--d-overlay); /* dropdowns, dialogs, selects, popovers */
     --color-surface-subtle:       var(--d-well);    /* recessed fills, segmented track */
     --color-surface-subtle-hover: var(--d-panel);   /* hover on a recessed fill (one step up) */
+    /* Accent-tinted interaction surfaces — dark accent hover/active values. */
+    --color-surface-accent-hover:  var(--color-primary-900);
+    --color-surface-accent-active: var(--color-primary-800);
     --color-surface-chrome:        var(--d-chrome);  /* top bar + left rail */
     --color-surface-chrome-deeper: var(--d-chrome);  /* gutter behind card (same frame) */
 
@@ -107,32 +138,36 @@
 
     /* ---- Button overrides ---- */
 
+    /* primary — disabled fill: the light-mode value (--color-primary-300, a
+       light lavender) left the white foreground text near-invisible on dark
+       surfaces (~2:1). Use a dark, desaturated teal so the shared white label
+       keeps a strong, readable contrast while still reading as muted/disabled. */
+    --color-button-primary-disabled: color-mix(in srgb, var(--color-primary-600) 30%, var(--color-surface-overlay));
+
     /* secondary (darkened surface) */
-    --o2-secondary-btn-bg: var(--color-surface-overlay);
-    --o2-secondary-btn-text: var(--color-text-primary);
-    --o2-secondary-btn-border: var(--color-border-subtle, rgba(255,255,255,0.12));
-    --color-button-secondary: var(--o2-secondary-btn-bg);
-    --color-button-secondary-hover: var(--color-primary-900);
-    --color-button-secondary-active: var(--color-primary-800);
+    --color-button-secondary: var(--color-surface-overlay);
+    --color-button-secondary-foreground: var(--color-text-heading);
+    --color-button-secondary-border: var(--color-border-subtle, rgba(255,255,255,0.12));
+    --color-button-secondary-hover: var(--color-surface-accent-hover);
+    --color-button-secondary-active: var(--color-surface-accent-active);
     --color-button-secondary-disabled: var(--color-surface-overlay);
-    --color-button-secondary-foreground: var(--o2-secondary-btn-text);
 
     /* outline */
-    --color-button-outline-text: var(--color-text-primary);
+    --color-button-outline-text: var(--color-text-heading);
     --color-button-outline-border: var(--color-border-default);
     --color-button-outline-hover-bg: var(--color-primary-900);
     --color-button-outline-hover-border: var(--color-border-strong);
-    --color-button-outline-active-bg: var(--color-primary-800);
+    --color-button-outline-active-bg: var(--color-surface-accent-active);
 
     /* ghost */
-    --color-button-ghost-text: var(--color-text-primary);
-    --color-button-ghost-hover-bg: var(--color-primary-900);
-    --color-button-ghost-active-bg: var(--color-primary-800);
+    --color-button-ghost-text: var(--color-text-heading);
+    --color-button-ghost-hover-bg: var(--color-surface-accent-hover);
+    --color-button-ghost-active-bg: var(--color-surface-accent-active);
 
     /* ghost-primary */
     --color-button-ghost-primary-text: var(--color-primary-400);
-    --color-button-ghost-primary-hover-bg: var(--color-primary-900);
-    --color-button-ghost-primary-active-bg: var(--color-primary-800);
+    --color-button-ghost-primary-hover-bg: var(--color-surface-accent-hover);
+    --color-button-ghost-primary-active-bg: var(--color-surface-accent-active);
 
     /* ghost-destructive */
     --color-button-ghost-destructive-text: var(--color-error-400);
@@ -146,27 +181,25 @@
 
     /* ghost-muted */
     --color-button-ghost-muted-hover-text: var(--color-primary-400);
-    --color-button-ghost-muted-hover-bg: var(--color-primary-900);
-    --color-button-ghost-muted-active-bg: var(--color-primary-800);
+    --color-button-ghost-muted-hover-bg: var(--color-surface-accent-hover);
+    --color-button-ghost-muted-active-bg: var(--color-surface-accent-active);
 
     /* ghost-subtle */
-    --color-button-ghost-subtle-hover-bg: var(--color-primary-900);
-    --color-button-ghost-subtle-active-bg: var(--color-primary-800);
+    --color-button-ghost-subtle-hover-bg: var(--color-surface-accent-hover);
+    --color-button-ghost-subtle-active-bg: var(--color-surface-accent-active);
 
     /* destructive */
     --color-button-destructive-focus-ring: var(--color-error-300);
 
-    /* ButtonGroup ΓÇö divider inherits from border-default override above */
-
     /* Dropdown */
-    --color-dropdown-item-hover-bg: var(--color-primary-900);
-    --color-dropdown-item-active-bg: var(--color-primary-800);
+    --color-dropdown-item-hover-bg: var(--color-surface-accent-hover);
+    --color-dropdown-item-active-bg: var(--color-surface-accent-active);
     --color-dropdown-item-destructive-text: var(--color-error-400);
     --color-dropdown-item-destructive-hover-bg: var(--color-surface-overlay);
 
     /* Tooltip */
     --color-tooltip-bg: var(--d-overlay);
-    --color-tooltip-text: var(--d-text);
+    --color-tooltip-text: var(--color-text-heading);
     --color-tooltip-border: var(--d-border);
     --color-tooltip-arrow: var(--d-overlay);
 
@@ -176,14 +209,14 @@
     --color-toggle-item-active-text: var(--color-white);
 
     /* Tabs */
-    --color-tabs-active-bg: var(--color-primary-800);
+    --color-tabs-active-bg: var(--color-surface-accent-active);
     --color-tabs-active-text: var(--color-white);
     --color-tabs-hover-bg: var(--color-primary-900);
     --color-tabs-bar-border: var(--color-grey-700);
 
     /* Collapsible */
     --color-collapsible-trigger-hover-bg: var(--color-primary-900);
-    --color-collapsible-trigger-active-bg: var(--color-primary-800);
+    --color-collapsible-trigger-active-bg: var(--color-surface-accent-active);
 
     /* OFieldList / OFieldRow / OFieldLabel */
     --color-field-list-row-hover-bg:   var(--color-primary-900);
@@ -226,8 +259,8 @@
     --color-badge-error-soft-text: var(--color-error-400);
 
     /* info (blue): brighten for dark bg */
-    --color-badge-info-ol-border: var(--color-info-200);
-    --color-badge-info-ol-text:   var(--color-info-200);
+    --color-badge-info-ol-border: var(--color-blue-200);
+    --color-badge-info-ol-text:   var(--color-blue-200);
 
     /* purple: brighten for dark bg */
     --color-badge-purple-ol-border: var(--color-purple-400);
@@ -297,7 +330,7 @@
     --color-input-border: var(--color-border-default);
     --color-input-disabled-bg: var(--d-well);
     --color-input-disabled-text: var(--color-text-secondary);
-    --color-input-placeholder: var(--color-text-disabled);
+    --color-input-placeholder: var(--color-text-placeholder);
     --color-input-error-text: var(--color-error-400);
     --color-input-border-error: var(--color-error-400);
 
@@ -306,13 +339,13 @@
     --color-select-border: var(--color-border-default);
     --color-select-disabled-bg: var(--d-well);
     --color-select-disabled-text: var(--color-text-secondary);
-    --color-select-placeholder: var(--color-text-disabled);
+    --color-select-placeholder: var(--color-text-placeholder);
     --color-select-error-text: var(--color-error-400);
     --color-select-border-error: var(--color-error-400);
     --color-select-content-bg: var(--color-surface-overlay);
     --color-select-content-border: var(--color-border-default);
-    --color-select-item-hover-bg: var(--color-primary-900);
-    --color-select-item-selected-bg: var(--color-primary-800);
+    --color-select-item-hover-bg: var(--color-surface-accent-hover);
+    --color-select-item-selected-bg: var(--color-surface-accent-active);
     --color-select-item-selected-text: var(--color-primary-200);
     --color-select-item-disabled: var(--color-text-disabled);
 
@@ -377,20 +410,20 @@
     /* DatePicker calendar popup */
     --color-datepicker-popup-bg: var(--color-surface-overlay);
     --color-datepicker-popup-border: var(--color-border-default);
-    --color-datepicker-day-hover-bg: var(--color-primary-900);
+    --color-datepicker-day-hover-bg: var(--color-surface-accent-hover);
     --color-datepicker-day-selected-bg: var(--color-primary-500);
     --color-datepicker-day-today-border: var(--color-primary-400);
     --color-datepicker-day-outside-text: var(--color-text-disabled);
-    --color-datepicker-nav-hover-bg: var(--color-primary-900);
+    --color-datepicker-nav-hover-bg: var(--color-surface-accent-hover);
     --color-datepicker-day-range-bg: var(--color-primary-900);
     --color-datepicker-day-range-text: var(--color-primary-200);
     --color-datepicker-clock-face-bg: var(--color-surface-panel);
     --color-datepicker-clock-header-bg: var(--color-primary-800);
     --color-datepicker-clock-selected-bg: var(--color-primary-500);
-    --color-datepicker-clock-hover-bg: var(--color-primary-900);
+    --color-datepicker-clock-hover-bg: var(--color-surface-accent-hover);
     --color-datepicker-relative-btn-bg: var(--color-surface-panel);
     --color-datepicker-relative-btn-selected-bg: var(--color-primary-500);
-    --color-datepicker-relative-btn-hover-bg: var(--color-primary-900);
+    --color-datepicker-relative-btn-hover-bg: var(--color-surface-accent-hover);
 
     /* Color picker */
     --color-colorpicker-popup-bg: var(--color-surface-overlay);
@@ -404,12 +437,12 @@
     --color-dialog-bg: var(--color-surface-base);
     --color-dialog-border: var(--d-border);
     --color-dialog-header-bg: var(--color-surface-panel);
-    --color-dialog-header-text: var(--d-text);
+    --color-dialog-header-text: var(--color-text-heading);
     --color-dialog-header-border: var(--d-border);
-    --color-dialog-content-text: var(--d-text);
+    --color-dialog-content-text: var(--color-text-heading);
     --color-dialog-footer-bg: var(--color-surface-panel);
     --color-dialog-footer-border: var(--d-border);
-    --color-dialog-close-text: var(--d-text-3);
+    --color-dialog-close-text: var(--color-text-muted);
     --color-dialog-close-hover-bg: var(--d-divider);
     --color-dialog-close-active-bg: var(--d-border);
 
@@ -452,9 +485,9 @@
     /* Banner (OBanner) */
     --color-banner-default-bg:     var(--color-grey-800);
     --color-banner-default-text:   var(--color-grey-200);
-    --color-banner-info-bg:        color-mix(in srgb, var(--color-info-800) 20%, transparent);
-    --color-banner-info-border:    var(--color-info-700);
-    --color-banner-info-text:      var(--color-info-100);
+    --color-banner-info-bg:        color-mix(in srgb, var(--color-blue-800) 20%, transparent);
+    --color-banner-info-border:    var(--color-blue-700);
+    --color-banner-info-text:      var(--color-blue-100);
     --color-banner-success-bg:     color-mix(in srgb, var(--color-success-900) 20%, transparent);
     --color-banner-success-border: var(--color-success-700);
     --color-banner-success-text:   var(--color-success-100);
@@ -467,208 +500,74 @@
     --color-banner-error-soft-border: var(--color-error-700);
     --color-banner-error-soft-text:   var(--color-error-100);
 
-    /* Note Container */
-    --color-note-bg:               color-mix(in srgb, var(--color-warning-900) 15%, transparent);
-    --color-note-border:           var(--color-note-dark-border);
-    --color-note-text:             var(--color-note-dark-text);
-    --color-note-highlight:        var(--color-note-highlight-dark);
-    --color-note-emphasis:         var(--color-grey-300);
-    --color-note-code:             var(--color-note-code-dark);
+    /* usage-report severity banners (dark) */
+    --color-usage-banner-success-bg: linear-gradient(to right, transparent 60%, #24262F 70%, #2C3934 100%);
+    --color-usage-banner-error-border:   #dc2626;
+    --color-usage-banner-error-bg:       linear-gradient(to right, transparent 60%, #2d1f1f 70%, #3d2020 100%);
+    --color-usage-banner-warning-border: #a08530;
+    --color-usage-banner-warning-bg:     linear-gradient(to right, transparent 60%, #2d2a1f 70%, #3d3520 100%);
+
 }
 
-/* ── Legacy semantic tokens (_variables.scss dark mode) ── */
-.body--dark {
-  --o2-theme-mode: #112027;
-  --o2-primary-background: #2B2D30;
-  --o2-secondary-background: #F0F1F2;
-  --o2-muted-background: #CEDDD6;
-  --o2-text-heading:     #F0F1F2;
-  --o2-text-primary:     var(--o2-text-heading);
-  --o2-text-body:        #CEDDD6;
-  --o2-text-secondary:   #B4B8BF;
-  --o2-text-caption:     #9DA0A8;
-  --o2-text-label:       #868A91;
-  --o2-text-muted:       #6F737A;
-  --o2-text-placeholder: #6F737A;
-  --o2-text-link:        #525BAD;
-  --o2-text-link-hover:  #454D93;
-  --o2-text-code:        #B4B8BF;
-  --o2-text-inverse:     #2B2D30;
-  --o2-text-4: var(--o2-text-heading);
-  --o2-text-2: var(--o2-text-secondary);
-  --o2-text-1: var(--o2-text-caption);
-  --o2-text-3: var(--o2-text-label);
-  --o2-card-background: #2B2D30;
-  --o2-card-text: #D3D3D3;
-  --o2-popover-background: #F0F1F2;
-  --o2-popover-text: #D3D3D3;
-  --o2-code-bg: #2B2D30;
-  --o2-border: #868A91;
-  --o2-border-input: #B4B8BF;
-  --o2-primary-color: var(--color-primary-400);
-  --o2-primary-foreground: #1E1F22;
-  --o2-hover-accent: color-mix(in srgb, var(--o2-theme-color) 20%, rgb(39, 39, 39));
-  --color-interactive-hover-bg: color-mix(in srgb, var(--o2-theme-color) 20%, rgb(39, 39, 39));
-  --o2-destructive-foreground: #1E1F22;
-  --o2-focus-ring: #3A4180;
-  --o2-hover-shadow: rgba(0, 0, 0, 0.6);
-  --o2-hover-gray: color-mix(in srgb, var(--o2-theme-color) 8%, rgb(38, 38, 38));
-  --o2-bg-gray: color-mix(in srgb, var(--o2-theme-color) 5%, rgb(42, 42, 42));
-  --o2-scrollbar-track-bg: rgba(0, 0, 0, 0.01);
-  --o2-scrollbar-track-hover-bg: rgba(0, 0, 0, 0.01);
-  --o2-scrollbar-thumb-bg: color-mix(in srgb, #3F7994 20%, white);
-  --o2-scrollbar-thumb-hover-bg: color-mix(in srgb, var(--o2-theme-elements) 0%, white);
-  --o2-scrollbar-thumb-active-bg: color-mix(in srgb, var(--o2-theme-elements) 0%, white);
-  --o2-theme-color: #112027;
-  --o2-dark-theme-color: #3F7994;
-  --o2-body-primary-bg: rgba(14, 19, 29, 0.01);
-  --o2-body-secondary-bg: rgba(14, 19, 29, 0.4);
-  --o2-primary-btn-bg: var(--o2-dark-theme-color);
-  --o2-primary-btn-text: #FFFFFF;
-  --q-primary: var(--o2-theme-color);
-  --o2-toggle-track-bg: var(--o2-dark-theme-color);
-  --o2-toggle-track-off-bg: color-mix(in srgb, var(--o2-dark-theme-color) 30%, rgb(100, 100, 100));
-  --o2-card-bg: var(--color-surface-base);
-  --o2-card-bg-solid: var(--color-surface-base);
-  --o2-header-menu-bg: color-mix(in srgb, #19191e 90%, white);
-  --o2-border-color: rgba(255, 255, 255, 0.40);
-  --o2-border-2: rgba(255, 255, 255, 0.12);
-  --o2-box-shadow: 0px 0px rgba(0, 0, 0, 0.2), 0 0.063rem 0.063rem rgba(0, 0, 0, 0.14), 0 3px 0.063rem -3px rgba(0, 0, 0, 0.12);
-  --o2-menu-gradient-start: rgba(89, 155, 174, 0.3);
-  --o2-menu-gradient-end: rgba(48, 193, 233, 0.3);
-  --o2-menu-border-color: #3F7994;
-  --o2-menu-color: #FFFFFF;
-  --o2-table-header-bg: color-mix(in srgb, var(--o2-theme-color) 80%, white);
-  --o2-sticky-col-header-bg: #565656;
-  --o2-pivot-header-border: rgba(255, 255, 255, 0.12);
-  --o2-table-actions-bg: #1f2223;
-  /* Legacy log-table row tokens alias the OTable --color-table-row-* tokens
-     (see semantic.css), which are themselves dark-paired further down this
-     file — so no separate dark override is needed here. Kept as aliases for
-     any code that still references the light-mode names. */
-  --o2-log-table-row-bg: var(--color-surface-base);
-  --o2-log-table-row-alt-bg: var(--color-table-row-striped-bg);
-  --o2-log-table-row-hover: var(--color-table-row-hover-bg);
-  --o2-log-table-row-border: var(--color-table-row-divider);
-  --o2-log-table-header-bg: var(--color-table-header-bg);
-  --o2-tab-bg: color-mix(in srgb, white 20%, var(--o2-theme-color));
-  --o2-tab-text-color: #FFFFFF;
-  --o2-inactive-tab-bg: color-mix(in srgb, var(--o2-theme-color) 10%, #112027);
-  --o2-actions-column-shawdow: rgba(125, 125, 125, 0.694);
-  --q-primary: var(--o2-dark-theme-color);
-  --o2-json-key: #f67a7aff;
-  --o2-json-string: #6EE7B7;
-  --o2-json-number: #60A5FA;
-  --o2-json-boolean: #A5B4FC;
-  --o2-json-null: #9CA3AF;
-  --o2-json-object: #D1D5DB;
-  --o2-input-label-text-color: #BDBDBD;
-  --tw-border-style: #e5e7eb;
-  --o2-trace-surface: #2B2D30;
-  --o2-trace-border: #5A5D63;
-  --o2-trace-text-primary: #F0F1F2;
-  --o2-trace-text-secondary: #B4B8BF;
-  --o2-trace-hover: #393840;
-  --o2-trace-selected: #D4E2FF;
-  --o2-latency-p95: #5586f7;
-  --o2-latency-p99: #ef8e43;
-  --o2-error-tag-bg: #681a1a;
-  --o2-error-tag-text: #f9cbcb;
-  --o2-status-success-text: #A0DBA5;
-  --o2-status-success-bg: #253627;
-  --o2-status-info-text: #A1AFFF;
-  --o2-status-info-bg: #181829;
-  --o2-status-warning-text: #E37774;
-  --o2-status-warning-bg: #402929;
-  --o2-status-error-text: #EB938D;
-  --o2-status-error-bg: #402929;
-  /* New --color-status-* tokens — same dark values as the --o2-status-* set
-     above, so both systems render identically in dark mode. */
-  --color-status-success-text: #A0DBA5;
-  --color-status-success-bg: #253627;
-  --color-status-info-text: #A1AFFF;
-  --color-status-info-bg: #181829;
-  --color-status-warning-text: #E37774;
-  --color-status-warning-bg: #402929;
+/* ── Theme-driven runtime tokens, dark mode (utils/theme.ts) ──
+   See semantic.css for the light-mode defaults + rationale. */
+:root.dark,
+.dark :root,
+.dark {
+  --color-theme-accent: #112027;
+  --color-theme-table-header-bg: color-mix(in srgb, var(--color-theme-accent) 80%, white);
+  --color-theme-tab-bg: color-mix(in srgb, white 20%, var(--color-theme-accent));
+  --color-theme-tab-bg-inactive: color-mix(in srgb, var(--color-theme-accent) 10%, #112027);
+  --color-theme-menu-color: #FFFFFF;
+  --color-theme-menu-gradient-start: rgba(89, 155, 174, 0.3);
+  --color-theme-menu-gradient-end: rgba(48, 193, 233, 0.3);
+  --color-theme-body-bg-primary: rgba(14, 19, 29, 0.01);
+  --color-theme-body-bg-secondary: rgba(14, 19, 29, 0.4);
+  --color-theme-header-menu-bg: color-mix(in srgb, #19191e 90%, white);
+
+  /* Shared hover + surface accent formula */
+  --color-interactive-hover-bg: color-mix(in srgb, var(--color-theme-accent) 20%, rgb(39, 39, 39));
+
+  /* Status/semantic colors driven by utils/theme.ts */
+  --color-status-negative: #E37774;
+  --color-status-positive: #89CC8E;
   --color-status-error-text: #EB938D;
   --color-status-error-bg: #402929;
+  --color-status-success-text: #A0DBA5;
+  --color-status-success-bg: #253627;
   /* Favorite (filled heart) — lighter rose (rose-400) so it reads clearly on
      dark surfaces without vibrating the way a saturated rose-500 would. */
   --color-favorite: #FB7185;
-  /* Log-severity colors — aligned with STATUS_COLORS_DARK in statusParser.ts */
-  --o2-severity-error-color: #D95C5C;
-  --o2-severity-warning-color: #D4944A;
-  --o2-status-neutral-text: #9DA0A8;
-  --o2-status-neutral-bg: #2B2D30;
-  --o2-span-kind-client-text: #A1AFFF;
-  --o2-span-kind-client-bg: #181829;
-  --o2-span-kind-server-text: #A0DBA5;
-  --o2-span-kind-server-bg: #253627;
-  --o2-span-kind-producer-text: #C4A0F3;
-  --o2-span-kind-producer-bg: #2F2936;
-  --o2-span-kind-consumer-text: #60C0B5;
-  --o2-span-kind-consumer-bg: #1D3838;
-  --o2-span-kind-internal-text: #9DA0A8;
-  --o2-span-kind-internal-bg: #2B2D30;
-  --o2-positive: #89CC8E;
-  --o2-negative: #E37774;
-  --o2-warning: #F2C55C;
-  --o2-info: #588CF3;
-  --o2-gray: #868A91;
-  --o2-service-health-healthy: #52c41a;
-  --o2-service-health-degraded: #faad14;
-  --o2-service-health-warning: #fa8c16;
-  --o2-service-health-critical: #f5222d;
-  --o2-section-header-bg: #28292a;
-  --o2-tag-grey-1: #565b60;
-  --o2-tag-grey-2: #313234;
-  --o2-wildcard-header-blue-bg: #F5F8FE;
-  --o2-wildcard-header-blue-text: #588CF3;
-  --o2-wildcard-header-green-bg: #253627;
-  --o2-wildcard-header-green-text: #89CC8E;
-  --o2-wildcard-header-orange-bg: #402929;
-  --o2-wildcard-header-orange-text: #E37774;
-  --o2-wildcard-header-purple-bg: #2F2936;
-  --o2-wildcard-header-purple-text: #A571E6;
-  --o2-wildcard-header-grey-bg: #2B2D30;
-  --o2-wildcard-header-grey-text: #B4B8BF;
-  --o2-wildcard-bar-blue: #88ADF7;
-  --o2-wildcard-bar-green: #5FAD65;
-  --o2-wildcard-bar-orange: #DB5C5C;
-  --o2-wildcard-bar-purple: #955AE0;
-  --o2-wildcard-bar-grey: #6F737A;
-  --o2-label-chip-ip-bg:       #253627;
-  --o2-label-chip-ip-text:     #89CC8E;
-  --o2-label-chip-ipv4-bg:     #253627;
-  --o2-label-chip-ipv4-text:   #89CC8E;
-  --o2-label-chip-ipv6-bg:     #253627;
-  --o2-label-chip-ipv6-text:   #89CC8E;
-  --o2-label-chip-method-bg:   #5E3838;
-  --o2-label-chip-method-text: #F2B1AA;
-  --o2-label-chip-url-bg:      #22264A;
-  --o2-label-chip-url-text:    #A1AFFF;
-  --o2-label-chip-num-bg:      #402929;
-  --o2-label-chip-num-text:    #E37774;
-  --o2-label-chip-float-bg:    #402929;
-  --o2-label-chip-float-text:  #E37774;
-  --o2-label-chip-hex-bg:      #3D3223;
-  --o2-label-chip-hex-text:    #F7DE8B;
-  --o2-label-chip-ts-bg:       #2F2936;
-  --o2-label-chip-ts-text:     #A571E6;
-  --o2-label-chip-date-bg:     #2F2936;
-  --o2-label-chip-date-text:   #A571E6;
-  --o2-label-chip-time-bg:     #2F2936;
-  --o2-label-chip-time-text:   #A571E6;
-  --o2-label-chip-id-bg:       #1D3838;
-  --o2-label-chip-id-text:     #9BDDD6;
-  --o2-label-chip-email-bg:    #402929;
-  --o2-label-chip-email-text:  #EB938D;
-  --o2-label-chip-str-bg:      #393840;
-  --o2-label-chip-str-text:    #B4B8BF;
-  --o2-label-chip-default-bg:  #393840;
-  --o2-label-chip-default-text: #B4B8BF;
-  --o2-label-chip-pattern-bg:  #393840;
-  --o2-label-chip-pattern-text: #88ADF7;
+}
+
+/* ── Domain data-viz: label chips, dark mode ── */
+:root.dark,
+.dark :root,
+.dark {
+  --color-label-chip-ip-bg:      #253627;
+  --color-label-chip-ip-text:    #89CC8E;
+  --color-label-chip-method-bg:  #5E3838;
+  --color-label-chip-method-text: #F2B1AA;
+  --color-label-chip-url-bg:     #22264A;
+  --color-label-chip-url-text:   #A1AFFF;
+  --color-label-chip-num-bg:     #402929;
+  --color-label-chip-num-text:   #E37774;
+  --color-label-chip-float-bg:   #402929;
+  --color-label-chip-float-text: #E37774;
+  --color-label-chip-hex-bg:     #3D3223;
+  --color-label-chip-hex-text:   #F7DE8B;
+  --color-label-chip-ts-bg:      #2F2936;
+  --color-label-chip-ts-text:    #A571E6;
+  --color-label-chip-id-bg:      #1D3838;
+  --color-label-chip-id-text:    #9BDDD6;
+  --color-label-chip-email-bg:   #402929;
+  --color-label-chip-email-text: #EB938D;
+  --color-label-chip-str-bg:     #393840;
+  --color-label-chip-str-text:   #B4B8BF;
+  --color-label-chip-default-bg: #393840;
+  --color-label-chip-default-text: #B4B8BF;
+  --color-label-chip-pattern-bg: #393840;
+  --color-label-chip-pattern-text: #88ADF7;
 }
 
 /* ToggleGroup — primary variant dark overrides */
@@ -676,7 +575,7 @@
     --color-toggle-track-bg: var(--color-primary-900);
     --color-toggle-border: var(--color-primary-700);
     --color-toggle-item-hover-bg: var(--color-primary-950);
-    --color-toggle-item-active-bg: var(--color-primary-800);
+    --color-toggle-item-active-bg: var(--color-surface-accent-active);
     --color-toggle-item-active-text: var(--color-primary-200);
 }
 
@@ -703,7 +602,7 @@
     --color-toast-action-text:    var(--color-primary-400);
     --color-toast-action-hover:   var(--color-primary-300);
 
-    /* ── OTable (dark) — pulled onto the elevation ladder ─── */
+    /* OTable (dark) */
     --color-table-header-bg: var(--d-overlay);          /* header band lifts off rows */
     --color-table-row-hover-bg: var(--d-hover);        /* neutral hover (not teal-washed) */
     --color-table-row-selected-bg: var(--d-selected);  /* teal-tinted selection */
@@ -713,4 +612,99 @@
     --color-table-sort-icon-active: var(--color-primary-400);
     --color-table-streaming-bar: var(--color-primary-400);
     --color-table-row-expanded-bg: var(--d-overlay);
-}
\ No newline at end of file
+}
+/* Domain data-viz & color tokens (dark) */
+:root.dark,
+.dark :root,
+.dark {
+  --color-actions-column-shadow: rgba(125, 125, 125, 0.694);
+  --color-bg-gray: color-mix(in srgb, var(--color-theme-accent) 5%, rgb(42, 42, 42));
+  /* Form field label — dark steps. #c4c4c4 has no palette equivalent. */
+  --color-input-label-text: var(--color-grey-200);
+  --color-input-label-text-disabled: #c4c4c4;
+  /* Global scrollbar treatment — dark steps. */
+  --color-scrollbar-thumb:       var(--color-grey-700);
+  --color-scrollbar-thumb-hover: var(--color-grey-600);
+  /* Lighter teal step so the VRL section bar stays visible on dark surfaces.
+     (--color-promo-* is deliberately NOT overridden — promo art is theme-independent.) */
+  --color-section-accent-secondary: var(--color-teal-400);
+  --color-card-glass-border: rgba(255, 255, 255, 0.40);
+  --color-card-glass-bg: var(--color-surface-base);
+  --color-card-glass-solid: var(--color-surface-base);
+  --color-error-tag-bg: #681a1a;
+  --color-error-tag-text: #f9cbcb;
+  --color-focus-ring: #3A4180;
+  --color-gray: #868A91;
+  --color-hover-gray: color-mix(in srgb, var(--color-theme-accent) 8%, rgb(38, 38, 38));
+  --color-hover-shadow: rgba(0, 0, 0, 0.6);
+  --color-info: #588CF3;
+  --color-json-boolean: #A5B4FC;
+  --color-json-key: #f67a7aff;
+  --color-json-null: #9CA3AF;
+  --color-json-number: #60A5FA;
+  --color-json-object: #D1D5DB;
+  --color-json-string: #6EE7B7;
+  --color-latency-p95: #5586f7;
+  --color-log-table-header-bg: var(--color-table-header-bg);
+  --color-log-table-row-bg: #21242c;
+  --color-log-table-row-border: rgba(255, 255, 255, 0.14);
+  --color-log-table-row-hover: #3a4a78;
+  --color-pivot-header-border: rgba(255, 255, 255, 0.12);
+  --color-section-header-bg: #28292a;
+  --color-severity-error-color: #D95C5C;
+  --color-severity-warning-color: #D4944A;
+  --color-status-info-bg: #181829;
+  --color-status-info-text: #A1AFFF;
+  --color-status-neutral-text: #9DA0A8;
+  /* Warning must stay visually distinct from error on dark surfaces;
+     uses the app's dark warning amber (same formula as banner-warning-bg). */
+  --color-status-warning-bg: color-mix(in srgb, var(--color-warning-900) 20%, transparent);
+  --color-status-warning-text: var(--color-warning);
+  --color-sticky-col-header-bg: #565656;
+  --color-tab-text-color: #FFFFFF;
+  --color-trace-border: #5A5D63;
+  --color-trace-hover: #393840;
+  --color-trace-selected: #D4E2FF;
+  --color-trace-surface: #2B2D30;
+  --color-trace-text-primary: #F0F1F2;
+  --color-trace-text-secondary: #B4B8BF;
+  --color-warning: #F2C55C;
+  --color-wildcard-bar-blue: #7BA0F5;
+  --color-wildcard-bar-green: #5FAD65;
+  --color-wildcard-bar-orange: #DB5C5C;
+  --color-wildcard-bar-purple: #955AE0;
+
+  /* Field-type chips — dark treatment mirrors the label-chip families by
+     hue (darken pastel bg toward surface, lighten text 1–2 steps). */
+  --color-field-type-boolean-bg: #5E3838;   /* red family (cf. method chip) */
+  --color-field-type-boolean-text: #F2B1AA;
+  --color-field-type-float-bg: #2F2936;      /* purple family (cf. ts chip) */
+  --color-field-type-float-text: #A571E6;
+  --color-field-type-number-bg: #3D3223;     /* amber family (cf. hex chip) */
+  --color-field-type-number-text: #F7DE8B;
+  --color-field-type-string-bg: #253627;     /* green family (cf. ip chip) */
+  --color-field-type-string-text: #89CC8E;
+  --color-field-type-timestamp-bg: #22264A;  /* blue family (cf. url chip) */
+  --color-field-type-timestamp-text: #A1AFFF;
+
+  /* Service-health — lightened ~1 step for dark-surface contrast. */
+  --color-service-health-critical: #FF5A5A;
+  --color-service-health-degraded: #FFC53D;
+  --color-service-health-healthy: #73D13D;
+  --color-service-health-warning: #FFA940;
+
+  /* Soft-tinted icon chips — dark accent tint (mirrors the badge-soft
+     treatment) so a chip reads as a faint coloured square, not a bright
+     light block on the dark canvas. */
+  --color-icon-chip-primary-bg:   color-mix(in srgb, var(--color-primary-400) 15%, transparent);
+  --color-icon-chip-primary-text: var(--color-primary-300);
+  --color-icon-chip-success-bg:   color-mix(in srgb, var(--color-success-500) 15%, transparent);
+  --color-icon-chip-success-text: var(--color-success-400);
+  --color-icon-chip-warning-bg:   color-mix(in srgb, var(--color-warning-400) 15%, transparent);
+  --color-icon-chip-warning-text: var(--color-warning-400);
+
+  /* Misc dark overrides. */
+  --color-cancel-query-bg: #7A3838;
+  --color-highlight-bg: #747474;
+  --color-icon-color: #5e5e5e;
+}
diff --git a/web/src/lib/styles/tokens/semantic.css b/web/src/lib/styles/tokens/semantic.css
index ba8f0a2b12..7a208e9724 100644
--- a/web/src/lib/styles/tokens/semantic.css
+++ b/web/src/lib/styles/tokens/semantic.css
@@ -1,4 +1,4 @@
-/* ============================================================
+/* ============================================================
    SEMANTIC TOKENS — maps base palette to intent/meaning
    Used directly in components for shared design decisions.
    ============================================================
@@ -12,13 +12,14 @@
 /* ── Light-mode defaults ─────────────────────────────────── */
 :root {
   /* Text — grey-based semantic hierarchy */
-  --color-text-heading:     var(--color-grey-900);  /* h1-h6, modal titles */
-  --color-text-primary:     var(--color-grey-900);  /* alias for heading — backward compat */
+  --color-text-heading:     var(--color-grey-800);  /* h1-h6, modal titles, page/panel titles */
   --color-text-body:        var(--color-grey-700);  /* paragraphs, default body */
-  --color-text-secondary:   var(--color-grey-500);  /* supporting text, descriptions */
-  --color-text-caption:     var(--color-grey-500);  /* captions, footnotes, timestamps */
+  --color-text-secondary:   var(--color-grey-500);  /* supporting text, descriptions, captions */
   --color-text-label:       var(--color-grey-400);  /* form labels, metadata, badges */
   --color-text-muted:       var(--color-grey-300);  /* disabled, placeholder, de-emphasized */
+  /* label / disabled / placeholder (+ border-strong, scrollbar-thumb-hover) are
+     intentionally equal for now: all route through the grey-400 primitive so any one
+     can diverge later. Distinct intents kept as distinct tokens on purpose, NOT aliases. */
   --color-text-disabled:    var(--color-grey-400);
   --color-text-placeholder: var(--color-grey-400);
   --color-text-soft:        rgba(0, 0, 0, 0.75);   /* black at 75% — readable but not harsh */
@@ -33,13 +34,24 @@
   --color-surface-overlay: var(--color-white);
   --color-surface-subtle:       var(--color-grey-100);
   --color-surface-subtle-hover: var(--color-grey-200);
+  /* Accent-tinted interaction surfaces. The ONE place the "hover/active on an
+     accent-tinted control" treatment lives, so buttons, menu items, tabs, selected
+     rows etc. share it — change it here and every accent hover/active surface moves. */
+  --color-surface-accent-hover:  var(--color-primary-50);
+  --color-surface-accent-active: var(--color-primary-100);
+  /* Soft-tinted icon chips — a pale accent square holding a coloured glyph
+     (Home resource/explore rows, KPI-card icons, section headers). Registered
+     as semantic tokens so the pale light-mode fill flips to a dark accent tint
+     in dark.css instead of staying light on the dark canvas. */
+  --color-icon-chip-primary-bg:   var(--color-primary-50);
+  --color-icon-chip-primary-text: var(--color-primary-600);
+  --color-icon-chip-success-bg:   var(--color-success-50);
+  --color-icon-chip-success-text: var(--color-success-600);
+  --color-icon-chip-warning-bg:   var(--color-warning-50);
+  --color-icon-chip-warning-text: var(--color-warning-700);
   /* App chrome (top bar + side rail + the gutter behind the content card) — a
-     BARELY-tinted near-white (prototype --g-100 ≈ #F5F6F9), just a whisper of
-     brand hue so the white content card floats on a calm backdrop. A strong
-     tint reads as "too bright". (Must live here in the .scss set the app loads —
-     the parallel .css set is NOT imported by the app, so a value defined only
-     there leaves the token undefined and the chrome falls through to the body
-     tint.) */
+     barely-tinted near-white, just a whisper of brand hue so the white content
+     card floats on a calm backdrop. A strong tint reads as "too bright". */
   --color-surface-chrome:  color-mix(in srgb, var(--color-primary-50) 55%, var(--color-grey-50));
   --color-surface-chrome-deeper: var(--color-primary-100);
 
@@ -47,23 +59,16 @@
   --color-border-default: var(--color-grey-200);
   --color-border-strong:  var(--color-grey-400);
   /* Soft divider — lighter than the structural border. Use for in-list row
-     dividers and intra-card section splits (HANDOFF.md §1.3 --border-soft). */
+     dividers and intra-card section splits. */
   --color-border-subtle:  var(--color-grey-150);
 
   /* Overlay scrim — semi-transparent backdrop */
   --color-overlay-scrim: color-mix(in srgb, var(--color-grey-950) 50%, transparent);
 
-  /* Status (semantic text+bg pairs) — the --color-* home for what used to be
-     --o2-status-*. Theme-paired via dark.css. Use these for status TEXT and
-     tinted status BACKGROUNDS (badges, callouts, required-field marks, etc.). */
-  --color-status-success-text: #208A3C;
-  --color-status-success-bg:   #F2FCF3;
-  --color-status-info-text:    #588CF3;
-  --color-status-info-bg:      #EDF3FF;
-  --color-status-warning-text: #E56D17;
-  --color-status-warning-bg:   #FFF4EB;
-  --color-status-error-text:   #CC3645;
-  --color-status-error-bg:     #FFF7F7;
+  /* Accent — the single brand colour, exposed as a semantic knob so feature code
+     never hardcodes `primary-600`. It flips to primary-400 in dark mode (dark.css)
+     so thin small marks stay readable — that dark flip is why it can't be raw primary-600. */
+  --color-accent: var(--color-primary-600);
 
   /* Favorite (filled heart) — a rose/pink-leaning red, deliberately warmer
      than the destructive error red so "loved" and "danger" never read as the
@@ -76,10 +81,8 @@
 @theme inline {
   /* Text */
   --color-text-heading:     var(--color-text-heading);
-  --color-text-primary:     var(--color-text-primary);
   --color-text-body:        var(--color-text-body);
   --color-text-secondary:   var(--color-text-secondary);
-  --color-text-caption:     var(--color-text-caption);
   --color-text-label:       var(--color-text-label);
   --color-text-muted:       var(--color-text-muted);
   --color-text-disabled:    var(--color-text-disabled);
@@ -95,30 +98,59 @@
   --color-surface-overlay: var(--color-surface-overlay);
   --color-surface-subtle:       var(--color-surface-subtle);
   --color-surface-subtle-hover: var(--color-surface-subtle-hover);
+  --color-surface-accent-hover:  var(--color-surface-accent-hover);
+  --color-surface-accent-active: var(--color-surface-accent-active);
+  --color-icon-chip-primary-bg:   var(--color-icon-chip-primary-bg);
+  --color-icon-chip-primary-text: var(--color-icon-chip-primary-text);
+  --color-icon-chip-success-bg:   var(--color-icon-chip-success-bg);
+  --color-icon-chip-success-text: var(--color-icon-chip-success-text);
+  --color-icon-chip-warning-bg:   var(--color-icon-chip-warning-bg);
+  --color-icon-chip-warning-text: var(--color-icon-chip-warning-text);
   --color-surface-chrome:        var(--color-surface-chrome);
   --color-surface-chrome-deeper: var(--color-surface-chrome-deeper);
 
-  /* Borders */
+  /* Borders — only `default` is registered as an app-facing utility. `strong`/`subtle`
+     are library-internal: defined in :root above and consumed by component tokens
+     (checkbox, table row-divider, tooltip, …) via var(), but NOT registered here, so
+     no `border-border-strong/subtle` utility exists. Feature code uses `default` only. */
   --color-border-default: var(--color-border-default);
-  --color-border-strong:  var(--color-border-strong);
-  --color-border-subtle:  var(--color-border-subtle);
 
   /* Overlay scrim */
   --color-overlay-scrim: var(--color-overlay-scrim);
 
-  /* Status (self-references so `text-status-error-text` etc. utilities exist
-     and dark.css overrides apply) */
-  --color-status-success-text: var(--color-status-success-text);
-  --color-status-success-bg:   var(--color-status-success-bg);
-  --color-status-info-text:    var(--color-status-info-text);
-  --color-status-info-bg:      var(--color-status-info-bg);
-  --color-status-warning-text: var(--color-status-warning-text);
-  --color-status-warning-bg:   var(--color-status-warning-bg);
-  --color-status-error-text:   var(--color-status-error-text);
-  --color-status-error-bg:     var(--color-status-error-bg);
+  /* Accent */
+  --color-accent: var(--color-accent);
 
-  /* Favorite (self-reference so `text-favorite` utility exists + dark override
-     applies) */
+  /* White / black / transparent / current / inherit — Tailwind ships these as
+     --color-* theme keys, so the `--color-*: initial` reset (palette-reset.css) wipes
+     them too. Re-register here so bg-white/text-black/bg-transparent/border-transparent/
+     text-current/text-inherit keep compiling. */
+  --color-white: var(--color-white);
+  --color-black: var(--color-black);
+  --color-transparent: transparent;
+  --color-current: currentColor;
+  --color-inherit: inherit;
+
+  /* Brand neutral scale (re-exports from base.css). Registered so `text-grey-500`
+     etc. compile as utilities. Note the British spelling — `grey-*` is ours; `gray-*`
+     is Tailwind's un-themed gray (#6b7280 vs our #737373) and is banned by the
+     rawPalette guard. */
+  --color-grey-0:   var(--color-grey-0);
+  --color-grey-50:  var(--color-grey-50);
+  --color-grey-100: var(--color-grey-100);
+  --color-grey-150: var(--color-grey-150);
+  --color-grey-200: var(--color-grey-200);
+  --color-grey-300: var(--color-grey-300);
+  --color-grey-400: var(--color-grey-400);
+  --color-grey-500: var(--color-grey-500);
+  --color-grey-600: var(--color-grey-600);
+  --color-grey-700: var(--color-grey-700);
+  --color-grey-800: var(--color-grey-800);
+  --color-grey-850: var(--color-grey-850);
+  --color-grey-900: var(--color-grey-900);
+  --color-grey-950: var(--color-grey-950);
+
+  /* Favorite */
   --color-favorite: var(--color-favorite);
 
   /* Brand / Primary (re-exports from base.css) */
@@ -132,15 +164,25 @@
   --color-primary-700: var(--color-primary-700);
   --color-primary-800: var(--color-primary-800);
   --color-primary-900: var(--color-primary-900);
+  --color-primary-950: var(--color-primary-950);
 
   /* Error / Danger (re-exports from base.css) */
   --color-error-50:  var(--color-error-50);
   --color-error-100: var(--color-error-100);
+  --color-error-300: var(--color-error-300);
   --color-error-400: var(--color-error-400);
   --color-error-500: var(--color-error-500);
   --color-error-600: var(--color-error-600);
   --color-error-700: var(--color-error-700);
 
+  /* Success (re-exports from base.css) */
+  --color-success-50:  var(--color-success-50);
+  --color-success-100: var(--color-success-100);
+  --color-success-400: var(--color-success-400);
+  --color-success-500: var(--color-success-500);
+  --color-success-600: var(--color-success-600);
+  --color-success-700: var(--color-success-700);
+
   /* Warning (re-exports from base.css) */
   --color-warning-50:  var(--color-warning-50);
   --color-warning-100: var(--color-warning-100);
@@ -149,214 +191,73 @@
   --color-warning-600: var(--color-warning-600);
   --color-warning-700: var(--color-warning-700);
 
-  /* Radius / Shadow (re-exports from base.css) */
-  --radius-sm:   var(--radius-sm);
-  --radius-md:   var(--radius-md);
-  --radius-lg:   var(--radius-lg);
-  --radius-xl:   var(--radius-xl);
+  /* Radius / Shadow (re-exports from base.css for @theme registration).
+     Two real tiers only: rounded-default (controls) + rounded-surface (large
+     surfaces), plus rounded-full. sm/md/lg/xl were retired — see base.css. */
+  --radius-default: var(--radius-default);
+  --radius-surface: var(--radius-surface);
   --radius-full: var(--radius-full);
+  --radius-checkbox: var(--radius-checkbox);
 
-  --shadow-sm: var(--shadow-sm);
   --shadow-md: var(--shadow-md);
   --shadow-lg: var(--shadow-lg);
+
+  /* Code-syntax family. Registered so bg-syntax-bg / text-syntax-keyword etc.
+     compile as utilities. */
+  --color-syntax-bg:          var(--color-syntax-bg);
+  --color-syntax-text:        var(--color-syntax-text);
+  --color-syntax-keyword:     var(--color-syntax-keyword);
+  --color-syntax-function:    var(--color-syntax-function);
+  --color-syntax-number:      var(--color-syntax-number);
+  --color-syntax-string:      var(--color-syntax-string);
+  --color-syntax-builtin:     var(--color-syntax-builtin);
+  --color-syntax-comment:     var(--color-syntax-comment);
+  --color-syntax-tag:         var(--color-syntax-tag);
+  --color-syntax-bullet:      var(--color-syntax-bullet);
+  --color-syntax-addition-fg: var(--color-syntax-addition-fg);
+  --color-syntax-addition-bg: var(--color-syntax-addition-bg);
+  --color-syntax-deletion-fg: var(--color-syntax-deletion-fg);
+  --color-syntax-deletion-bg: var(--color-syntax-deletion-bg);
+
+  /* The --color-gradient-* family is deliberately NOT registered here: it would
+     generate `bg-gradient-ai` as `background-color: <linear-gradient()>` — invalid
+     CSS the browser drops. Consume gradients as
+     `bg-[image:var(--color-gradient-ai)]` (background-image) instead. */
 }
 
-/* ── Legacy semantic tokens (_variables.scss light mode) ── */
+/* ── Theme-driven runtime tokens (set inline by utils/theme.ts) ──
+   Static values below are the light-mode DEFAULT theme; theme.ts overrides
+   them via inline style when a custom accent color is picked or dark mode is active. */
 :root {
-  --o2-theme-mode: white;
-  --o2-primary-background: #FFFFFF;
-  --o2-secondary-background: #F7F9FE;
-  --o2-muted-background: #E8ECF0;
-  --o2-text-heading:     #19191E;
-  --o2-text-primary:     var(--o2-text-heading);
-  --o2-text-body:        #404040;
-  --o2-text-secondary:   #5A5D6B;
-  --o2-text-caption:     #6C707E;
-  --o2-text-label:       #818594;
-  --o2-text-muted:       #A8ADBD;
-  --o2-text-placeholder: #A8ADBD;
-  --o2-text-link:        #6069D3;
-  --o2-text-link-hover:  #575FC5;
-  --o2-text-code:        #5A5D6B;
-  --o2-text-inverse:     #FFFFFF;
-  --o2-text-4: var(--o2-text-heading);
-  --o2-text-2: var(--o2-text-secondary);
-  --o2-text-1: var(--o2-text-caption);
-  --o2-text-3: var(--o2-text-label);
-  --o2-card-background: #FFFFFF;
-  --o2-card-text: #19191E;
-  --o2-popover-background: #FFFFFF;
-  --o2-popover-text: #19191E;
-  --o2-code-bg: #F7F8FA;
-  --o2-border: #E8ECF0;
-  --o2-border-input: #D3D5DB;
-  --o2-primary-color: var(--color-primary-600);
-  --o2-primary-foreground: #FFFFFF;
-  --o2-hover-accent: color-mix(in srgb, var(--o2-theme-color) 15%, white);
-  --o2-destructive-foreground: #FFFFFF;
-  --o2-focus-ring: #282D5D;
-  --o2-hover-shadow: #dddddd;
-  --o2-hover-gray: color-mix(in srgb, var(--o2-theme-color) 2%, rgb(244, 244, 244));
-  --o2-bg-gray: color-mix(in srgb, var(--o2-theme-color) 10%, rgb(237, 237, 237));
-  --o2-scrollbar-track-bg: rgba(0, 0, 0, 0.01);
-  --o2-scrollbar-track-hover-bg: rgba(0, 0, 0, 0.01);
-  --o2-scrollbar-thumb-bg: color-mix(in srgb, #3F7994 20%, white);
-  --o2-scrollbar-thumb-hover-bg: color-mix(in srgb, var(--o2-theme-elements) 0%, white);
-  --o2-scrollbar-thumb-active-bg: color-mix(in srgb, var(--o2-theme-elements) 0%, white);
-  --o2-theme-color: #3F7994;
-  --o2-dark-theme-color: #112027;
-  --o2-body-primary-bg: rgba(89, 155, 174, 0.01);
-  --o2-body-secondary-bg: rgba(89, 155, 174, 0.4);
-  --o2-primary-btn-bg: color-mix(in srgb, var(--o2-theme-color) 100%, white);
-  --o2-primary-btn-text: #FFFFFF;
-  --o2-toggle-track-bg: color-mix(in srgb, var(--o2-theme-color) 90%, white);
-  --o2-toggle-track-off-bg: color-mix(in srgb, var(--o2-theme-color) 30%, white);
-  --o2-card-bg: rgba(255, 255, 255, 0.8);
-  --o2-card-bg-solid: rgba(255, 255, 255);
-  --o2-header-menu-bg: rgba(255, 255, 255, 0.5);
-  --o2-border-color: rgba(0, 0, 0, 0.12);
-  --o2-border-2: rgba(0, 0, 0, 0.08);
-  --o2-box-shadow: 0px 0px rgba(0, 0, 0, 0.2), 0 0.063rem 0.063rem rgba(0, 0, 0, 0.14), 0 3px 0.063rem -3px rgba(0, 0, 0, 0.12);
-  --o2-menu-gradient-start: rgba(89, 175, 199, 0.3);
-  --o2-menu-gradient-end: rgba(48, 193, 233, 0.3);
-  --o2-menu-border-color: rgba(89, 155, 174, 0.6);
-  --o2-menu-color: #3F7994;
-  --o2-table-header-bg: color-mix(in srgb, var(--o2-theme-color) 20%, white);
-  --o2-sticky-col-header-bg: #E0E0E0;
-  --o2-pivot-header-border: rgba(0, 0, 0, 0.15);
-  --o2-table-actions-bg: white;
-  /* Legacy log-table row tokens now ALIAS the OTable row standard, so the
-     TenstackTable (logs/traces/etc.) rows match every OTable across the app.
-     Theme-paired automatically via the --color-table-row-* tokens. */
-  --o2-log-table-row-bg: var(--color-surface-base);
-  --o2-log-table-row-alt-bg: var(--color-table-row-striped-bg);
-  --o2-log-table-row-hover: var(--color-table-row-hover-bg);
-  --o2-log-table-row-border: var(--color-table-row-divider);
-  --o2-log-table-header-bg: #f1f3f7;
-  --o2-tab-bg: color-mix(in srgb, var(--o2-theme-color) 20%, white);
-  --o2-tab-text-color: #19191E;
-  --o2-inactive-tab-bg: color-mix(in srgb, var(--o2-theme-color) 10%, white);
-  --o2-actions-column-shawdow: rgba(0, 0, 0, 0.1);
-  --q-primary: var(--o2-theme-color);
-  --o2-icon-color: #808080;
-  --o2-icon-color-dark: #5e5e5e;
-  --o2-json-key: #B71C1C;
-  --o2-json-string: #047857;
-  --o2-json-number: #2563EB;
-  --o2-json-boolean: #6D28D9;
-  --o2-json-null: #6B7280;
-  --o2-json-object: #4B5563;
-  --o2-input-label-text-color: #636464;
-  --tw-border-style: #e5e7eb;
-  --o2-section-header-bg: color-mix(in srgb, var(--o2-theme-color) 3%, rgb(247, 247, 247));
-  --o2-tag-grey-1: #E2E8F0;
-  --o2-tag-grey-2: #eaebec;
-  --o2-wildcard-header-blue-bg: #F5F8FE;
-  --o2-wildcard-header-blue-text: #2E55A3;
-  --o2-wildcard-header-green-bg: #F2FCF3;
-  --o2-wildcard-header-green-text: #208A3C;
-  --o2-wildcard-header-orange-bg: #FFF4EB;
-  --o2-wildcard-header-orange-text: #A14916;
-  --o2-wildcard-header-purple-bg: #FAF5FF;
-  --o2-wildcard-header-purple-text: #643CB8;
-  --o2-wildcard-header-grey-bg: #F7F8FA;
-  --o2-wildcard-header-grey-text: #5A5D6B;
-  --o2-wildcard-bar-blue: #88ADF7;
-  --o2-wildcard-bar-green: #55A76A;
-  --o2-wildcard-bar-orange: #E56D17;
-  --o2-wildcard-bar-purple: #834DF0;
-  --o2-wildcard-bar-grey: #818594;
-  --o2-label-chip-ip-bg:       #F2FCF3;
-  --o2-label-chip-ip-text:     #208A3C;
-  --o2-label-chip-ipv4-bg:     #F2FCF3;
-  --o2-label-chip-ipv4-text:   #208A3C;
-  --o2-label-chip-ipv6-bg:     #F2FCF3;
-  --o2-label-chip-ipv6-text:   #208A3C;
-  --o2-label-chip-method-bg:   #FFF2F3;
-  --o2-label-chip-method-text: #CC3645;
-  --o2-label-chip-url-bg:      #E4E9FE;
-  --o2-label-chip-url-text:    #575FC5;
-  --o2-label-chip-num-bg:      #FFF4EB;
-  --o2-label-chip-num-text:    #A14916;
-  --o2-label-chip-float-bg:    #FFF4EB;
-  --o2-label-chip-float-text:  #A14916;
-  --o2-label-chip-hex-bg:      #FFFAEB;
-  --o2-label-chip-hex-text:    #C27D04;
-  --o2-label-chip-ts-bg:       #FAF5FF;
-  --o2-label-chip-ts-text:     #643CB8;
-  --o2-label-chip-date-bg:     #FAF5FF;
-  --o2-label-chip-date-text:   #643CB8;
-  --o2-label-chip-time-bg:     #FAF5FF;
-  --o2-label-chip-time-text:   #643CB8;
-  --o2-label-chip-id-bg:       #F2FCFC;
-  --o2-label-chip-id-text:     #077A7F;
-  --o2-label-chip-email-bg:    #FFF7F7;
-  --o2-label-chip-email-text:  #E55765;
-  --o2-label-chip-str-bg:      #E8ECF0;
-  --o2-label-chip-str-text:    #5A5D6B;
-  --o2-label-chip-default-bg:  #E8ECF0;
-  --o2-label-chip-default-text: #5A5D6B;
-  --o2-label-chip-pattern-bg:  #EDF3FF;
-  --o2-label-chip-pattern-text: #2E55A3;
-  --o2-dashboard-placeholder-bg: #B3BDF1;
-  --o2-field-type-string-bg: oklch(95% 0.052 163.051);
-  --o2-field-type-string-text: oklch(59.6% 0.145 163.225);
-  --o2-field-type-boolean-bg: #e74c3c;
-  --o2-field-type-boolean-text: #fff;
-  --o2-field-type-float-bg: oklch(94.6% 0.033 307.174);
-  --o2-field-type-float-text: oklch(55.8% 0.288 302.321);
-  --o2-field-type-number-bg: oklch(95.4% 0.038 75.164);
-  --o2-field-type-number-text: oklch(64.6% 0.222 41.116);
-  --o2-field-type-timestamp-bg: oklch(93.2% 0.032 255.585);
-  --o2-field-type-timestamp-text: oklch(54.6% 0.245 262.881);
-  --o2-trace-surface: #FFFFFF;
-  --o2-trace-border: #E8ECF0;
-  --o2-trace-text-primary: #19191E;
-  --o2-trace-text-secondary: #5A5D6B;
-  --o2-trace-hover: #F7F8FA;
-  --o2-trace-selected: #F5F8FE;
-  --o2-latency-p99: #de6d17;
-  --o2-latency-p95: #0a4ce8;
-  --o2-cancel-query-bg: #f67a7a;
-  --o2-error-tag-bg: #f9d3d3;
-  --o2-error-tag-text: #e74c3c;
-  --o2-status-success-text: #208A3C;
-  --o2-status-success-bg: #F2FCF3;
-  --o2-status-info-text: #588CF3;
-  --o2-status-info-bg: #EDF3FF;
-  --o2-status-warning-text: #E56D17;
-  --o2-status-warning-bg: #FFF4EB;
-  --o2-status-error-text: #CC3645;
-  --o2-status-error-bg: #FFF7F7;
-  /* Log-severity colors — MUST stay aligned with STATUS_COLORS in
-     src/utils/logs/statusParser.ts (row spines / severity accents, so RUM
-     sessions match the logs page). */
-  --o2-severity-error-color: #EF5350;
-  --o2-severity-warning-color: #FB8C00;
-  --o2-status-neutral-text: #6C707E;
-  --o2-status-neutral-bg: #F7F8FA;
-  --o2-span-kind-client-text: #588CF3;
-  --o2-span-kind-client-bg: #EDF3FF;
-  --o2-span-kind-server-text: #208A3C;
-  --o2-span-kind-server-bg: #F2FCF3;
-  --o2-span-kind-producer-text: #7444D4;
-  --o2-span-kind-producer-bg: #EFE5FF;
-  --o2-span-kind-consumer-text: #058B90;
-  --o2-span-kind-consumer-bg: #DAF4F5;
-  --o2-span-kind-internal-text: #6C707E;
-  --o2-span-kind-internal-bg: #E8ECF0;
-  --o2-positive: #208A3C;
-  --o2-negative: #DB3B4B;
-  --o2-warning: #DF9303;
-  --o2-info: #4682FA;
-  --o2-gray: #818594;
-  --o2-service-health-healthy: #52c41a;
-  --o2-service-health-degraded: #faad14;
-  --o2-service-health-warning: #fa8c16;
-  --o2-service-health-critical: #f5222d;
+  --color-theme-accent: #3F7994;
+  --color-theme-table-header-bg: color-mix(in srgb, var(--color-theme-accent) 20%, white);
+  --color-theme-tab-bg: color-mix(in srgb, var(--color-theme-accent) 20%, white);
+  --color-theme-tab-bg-inactive: color-mix(in srgb, var(--color-theme-accent) 10%, white);
+  --color-theme-menu-color: #3F7994;
+  --color-theme-menu-gradient-start: rgba(89, 175, 199, 0.3);
+  --color-theme-menu-gradient-end: rgba(48, 193, 233, 0.3);
+  --color-theme-body-bg-primary: rgba(89, 155, 174, 0.01);
+  --color-theme-body-bg-secondary: rgba(89, 155, 174, 0.4);
+  --color-theme-header-menu-bg: rgba(255, 255, 255, 0.5);
+
+  /* Shared hover + surface accent formula */
+  --color-interactive-hover-bg: color-mix(in srgb, var(--color-theme-accent) 15%, white);
+
+  /* Status/semantic colors driven by utils/theme.ts (O2 Signature default
+     + any custom semantic theme, e.g. Crimson Ink) */
+  --color-status-negative: #DB3B4B;
+  --color-status-positive: #208A3C;
+  --color-status-error-text: #CC3645;
+  --color-status-error-bg: #FFF7F7;
+  --color-status-success-text: #208A3C;
+  --color-status-success-bg: #F2FCF3;
 }
 
-/* ── Legacy aliases (_legacy-variables.scss) ── */
+/* ── Domain / data-viz / brand literal tokens ──
+   Defined in base.css (raw values live with the palette); their @theme
+   registrations live in semantic.css / component.css. */
+
+/* ── Layout aliases ── */
 :root {
   --navbar-height: 36px;
 }
diff --git a/web/src/lib/vue-shortcut-manager/ShortcutCheatsheet.vue b/web/src/lib/vue-shortcut-manager/ShortcutCheatsheet.vue
index 5b6d458e0b..a7a73f47eb 100644
--- a/web/src/lib/vue-shortcut-manager/ShortcutCheatsheet.vue
+++ b/web/src/lib/vue-shortcut-manager/ShortcutCheatsheet.vue
@@ -14,28 +14,21 @@
         <div class="flex items-center gap-3">
           <div class="flex items-center gap-2.5 shrink-0">
             <div
-              class="flex items-center justify-center w-8 h-8 rounded-lg shrink-0"
-              style="
-                background: color-mix(
-                  in srgb,
-                  var(--o2-primary-color) 12%,
-                  transparent
-                );
-              "
+              class="flex items-center justify-center w-8 h-8 rounded-default shrink-0 bg-[color-mix(in_srgb,var(--color-accent)_12%,transparent)]"
             >
               <OIcon
                 name="key"
-                class="text-[var(--o2-primary-color)] w-4 h-4"
+                class="text-accent w-4 h-4"
               />
             </div>
             <div>
               <div
-                class="text-[15px] font-semibold leading-tight text-[var(--o2-text-primary)]"
+                class="text-sm font-semibold leading-tight text-text-heading"
               >
                 {{ t("shortcuts.title") }}
               </div>
               <div
-                class="text-[11px] text-[var(--o2-text-secondary)] mt-0.5"
+                class="text-2xs text-text-secondary mt-0.5"
               >
                 {{ t("shortcuts.subtitle") }}
               </div>
@@ -87,7 +80,7 @@
     <div class="contents">
       <div
         v-if="!hasResults"
-        class="text-center py-10 text-[13px] text-[var(--o2-text-secondary)]"
+        class="text-center py-10 text-compact text-text-secondary"
         data-test="shortcut-cheatsheet-no-results"
       >
         {{ t("shortcuts.noResults") }}
@@ -101,7 +94,7 @@
             :key="m.title"
             :ref="(el) => registerModuleRef(m.title, el)"
             :data-module="m.title"
-            class="px-1 pb-2 rounded-md bg-transparent transition-colors"
+            class="px-1 pb-2 rounded-default bg-transparent transition-colors"
           >
             <!-- Module header (partition line above the title) -->
             <div
@@ -109,12 +102,12 @@
               :class="
                 idx === 0
                   ? 'pt-1'
-                  : 'mt-2 pt-3 border-t border-[var(--o2-border)]'
+                  : 'mt-2 pt-3 border-t border-border-default'
               "
               data-test="shortcut-cheatsheet-module"
             >
               <span
-                class="text-[12px] font-semibold tracking-wide text-[var(--o2-primary-color)]"
+                class="text-xs font-semibold tracking-wide text-accent"
               >
                 {{ m.title }}
               </span>
@@ -124,7 +117,7 @@
             <template v-for="sec in m.sections" :key="sec.title">
               <div
                 v-if="m.sections.length > 1"
-                class="text-[10px] font-semibold uppercase tracking-wider text-[var(--o2-primary-color)] pt-2 pb-1 px-1"
+                class="text-3xs font-semibold uppercase tracking-wider text-accent pt-2 pb-1 px-1"
                 data-test="shortcut-cheatsheet-category"
               >
                 {{ sec.title }}
@@ -133,11 +126,11 @@
                 <li
                   v-for="entry in sec.entries"
                   :key="entry.id"
-                  class="flex justify-between items-center py-1.5 px-2 rounded-md transition-colors duration-100 hover:bg-[var(--o2-primary-background)]"
+                  class="flex justify-between items-center py-1.5 px-2 rounded-default transition-colors duration-100 hover:bg-surface-base"
                   :data-test="`shortcut-cheatsheet-row-${entry.id}`"
                 >
                   <span
-                    class="text-[13px] text-[var(--o2-text-primary)] truncate leading-snug"
+                    class="text-compact text-text-body truncate leading-snug"
                     >{{ entry.label }}</span
                   >
                   <div
@@ -149,12 +142,12 @@
                     >
                       <span
                         v-if="part === 'then'"
-                        class="text-[10px] text-[var(--o2-text-secondary)] mx-0.5"
+                        class="text-3xs text-text-secondary mx-0.5"
                         >then</span
                       >
                       <kbd
                         v-else
-                        class="inline-flex items-center justify-center min-w-[1.5rem] h-6 px-1.5 bg-[var(--o2-card-background)] border border-[var(--o2-border)] rounded font-mono text-[11px] font-medium text-[var(--o2-text-secondary)] whitespace-nowrap shadow-[0_1px_0_0_var(--o2-border)]"
+                        class="inline-flex items-center justify-center min-w-6 h-6 px-1.5 bg-surface-base border border-border-default rounded-default font-mono text-2xs font-medium text-text-secondary whitespace-nowrap shadow-[0_1px_0_0_var(--color-border-default)]"
                         >{{ part }}</kbd
                       >
                     </template>
@@ -167,14 +160,14 @@
 
         <!-- Right column -->
         <div
-          class="flex flex-col border-l border-[var(--o2-border)] pl-8"
+          class="flex flex-col border-l border-border-default pl-8"
         >
           <div
             v-for="(m, idx) in filteredColumns[1]"
             :key="m.title"
             :ref="(el) => registerModuleRef(m.title, el)"
             :data-module="m.title"
-            class="px-1 pb-2 rounded-md bg-transparent transition-colors"
+            class="px-1 pb-2 rounded-default bg-transparent transition-colors"
           >
             <!-- Module header (partition line above the title) -->
             <div
@@ -182,12 +175,12 @@
               :class="
                 idx === 0
                   ? 'pt-1'
-                  : 'mt-2 pt-3 border-t border-[var(--o2-border)]'
+                  : 'mt-2 pt-3 border-t border-border-default'
               "
               data-test="shortcut-cheatsheet-module"
             >
               <span
-                class="text-[12px] font-semibold tracking-wide text-[var(--o2-primary-color)]"
+                class="text-xs font-semibold tracking-wide text-accent"
               >
                 {{ m.title }}
               </span>
@@ -197,7 +190,7 @@
             <template v-for="sec in m.sections" :key="sec.title">
               <div
                 v-if="m.sections.length > 1"
-                class="text-[10px] font-semibold uppercase tracking-wider text-[var(--o2-primary-color)] pt-2 pb-1 px-1"
+                class="text-3xs font-semibold uppercase tracking-wider text-accent pt-2 pb-1 px-1"
                 data-test="shortcut-cheatsheet-category"
               >
                 {{ sec.title }}
@@ -206,11 +199,11 @@
                 <li
                   v-for="entry in sec.entries"
                   :key="entry.id"
-                  class="flex justify-between items-center py-1.5 px-2 rounded-md transition-colors duration-100 hover:bg-[var(--o2-primary-background)]"
+                  class="flex justify-between items-center py-1.5 px-2 rounded-default transition-colors duration-100 hover:bg-surface-base"
                   :data-test="`shortcut-cheatsheet-row-${entry.id}`"
                 >
                   <span
-                    class="text-[13px] text-[var(--o2-text-primary)] truncate leading-snug"
+                    class="text-compact text-text-body truncate leading-snug"
                     >{{ entry.label }}</span
                   >
                   <div
@@ -222,12 +215,12 @@
                     >
                       <span
                         v-if="part === 'then'"
-                        class="text-[10px] text-[var(--o2-text-secondary)] mx-0.5"
+                        class="text-3xs text-text-secondary mx-0.5"
                         >then</span
                       >
                       <kbd
                         v-else
-                        class="inline-flex items-center justify-center min-w-[1.5rem] h-6 px-1.5 bg-[var(--o2-card-background)] border border-[var(--o2-border)] rounded font-mono text-[11px] font-medium text-[var(--o2-text-secondary)] whitespace-nowrap shadow-[0_1px_0_0_var(--o2-border)]"
+                        class="inline-flex items-center justify-center min-w-6 h-6 px-1.5 bg-surface-base border border-border-default rounded-default font-mono text-2xs font-medium text-text-secondary whitespace-nowrap shadow-[0_1px_0_0_var(--color-border-default)]"
                         >{{ part }}</kbd
                       >
                     </template>
@@ -243,17 +236,17 @@
     <!-- ── Sticky footer ── -->
     <template #footer>
       <div
-        class="flex justify-between items-center text-[11px] text-[var(--o2-text-secondary)]"
+        class="flex justify-between items-center text-2xs text-text-secondary"
       >
         <div class="flex items-center gap-1.5 flex-wrap">
           <kbd
-            class="inline-flex items-center justify-center h-5 px-1.5 bg-[var(--o2-card-background)] border border-[var(--o2-border)] rounded font-mono text-[11px] shadow-[0_1px_0_0_var(--o2-border)]"
+            class="inline-flex items-center justify-center h-5 px-1.5 bg-surface-base border border-border-default rounded-default font-mono text-2xs shadow-[0_1px_0_0_var(--color-border-default)]"
             >Esc</kbd
           >
           <span>{{ t("shortcuts.footerClose") }}</span>
           <span class="opacity-40">·</span>
           <kbd
-            class="inline-flex items-center justify-center h-5 px-1.5 bg-[var(--o2-card-background)] border border-[var(--o2-border)] rounded font-mono text-[11px] shadow-[0_1px_0_0_var(--o2-border)]"
+            class="inline-flex items-center justify-center h-5 px-1.5 bg-surface-base border border-border-default rounded-default font-mono text-2xs shadow-[0_1px_0_0_var(--color-border-default)]"
             >?</kbd
           >
           <span>{{ t("shortcuts.footerReopen") }}</span>
diff --git a/web/src/locales/languages/en-US.json b/web/src/locales/languages/en-US.json
index 7ad48fcd46..79d9dc0e6b 100644
--- a/web/src/locales/languages/en-US.json
+++ b/web/src/locales/languages/en-US.json
@@ -862,6 +862,7 @@
   },
   "rum": {
     "title": "Real User Monitoring",
+    "subtitle": "Monitor real-user sessions, errors, and frontend performance",
     "issueColumn": "Issue",
     "trendColumn": "Trend",
     "usersColumn": "Users",
@@ -931,6 +932,7 @@
     "getStartedTitle": "Get Started with Real User Monitoring",
     "getStartedLabel": "Get Started",
     "performanceSummaryLabel": "Performance Summary",
+    "performanceSummarySubtitle": "Core Web Vitals, page load, and API performance for your frontend",
     "webVitalsLabel": "Web Vitals",
     "errorLabel": "Errors",
     "sessionLabel": "Sessions",
@@ -3762,7 +3764,9 @@
     "tabOverview": "Overview",
     "tabUsage": "Usage",
     "removeHomeDashboard": "Remove home dashboard",
-    "subtitle": "Your observability workspace at a glance"
+    "subtitle": "Your observability workspace at a glance",
+    "resources": "Resources",
+    "explore": "Explore"
   },
   "overview": {
     "title": "System Overview",
@@ -3776,6 +3780,8 @@
     "colErrorRate": "Error rate",
     "colLatency": "Latency",
     "colReqs": "Reqs",
+    "scrollLeft": "Scroll services left",
+    "scrollRight": "Scroll services right",
     "untitledIncident": "Untitled Incident",
     "viewLatencyCharts": "View latency & RED charts",
     "elevatedErrorRate": "Elevated error rate",
@@ -5238,11 +5244,14 @@
         "selectedCount": "{count} selected",
         "searchPrefixes": "Search prefixes",
         "searchSuffixes": "Search suffixes",
+        "searchTypes": "Search types",
         "searchPrefixesAria": "Search prefix filters",
         "searchSuffixesAria": "Search suffix filters",
+        "searchTypesAria": "Search type filters",
         "facetAria": "{label}, {count} metrics",
         "noPrefixMatch": "No prefixes match.",
-        "noSuffixMatch": "No suffixes match."
+        "noSuffixMatch": "No suffixes match.",
+        "noTypeMatch": "No types match."
       }
     },
     "index": {
@@ -6253,6 +6262,11 @@
     "addToTable": "Add to table",
     "timestamp": "Timestamp",
     "noErrorPresent": "No error present for this span",
+    "noEventsPresent": "No events for this span",
+    "noLinksPresent": "No links for this span",
+    "loadingTraceDag": "Loading trace DAG...",
+    "loadingServiceGraph": "Loading service graph...",
+    "loadingMetrics": "Loading metrics...",
     "httpStatusCode": "HTTP Status Code",
     "grpcStatusCode": "gRPC Status Code",
     "dbResponseStatusCode": "DB Response Status Code",
diff --git a/web/src/locales/numberFormat.ts b/web/src/locales/numberFormat.ts
index c51f6bf9b7..fa44a959d0 100644
--- a/web/src/locales/numberFormat.ts
+++ b/web/src/locales/numberFormat.ts
@@ -34,9 +34,9 @@ export const APP_LOCALE_TO_BCP47: Record<string, string> = {
   vi: "vi-VN",
 };
 
-// Resolve the active app language without importing the i18n instance — kept
-// standalone so widely-used utils don't pull `createI18n` into their import
-// graph (which breaks specs that partially mock vue-i18n).
+// Resolve the active app language without importing the i18n instance, so
+// widely-used utils don't pull `createI18n` into their import graph (which
+// breaks specs that partially mock vue-i18n).
 const resolveAppLanguage = (): string => {
   const cookieLanguage = getLanguage();
   if (cookieLanguage) return cookieLanguage;
diff --git a/web/src/main.ts b/web/src/main.ts
index 9b25d033d5..a4890d0ff3 100644
--- a/web/src/main.ts
+++ b/web/src/main.ts
@@ -19,6 +19,10 @@ import App from "./App.vue";
 import createRouter from "./router";
 import i18n, { getLocale, loadLocaleMessages } from "./locales";
 import "./styles/tailwind.css";
+// Global generated-content stylesheet: syntax classes (.log-key, .log-string, …)
+// applied to v-html-highlighted log output across logs/traces/RUM. Loaded once
+// here instead of re-@imported inside each consumer's <style> block.
+import "./assets/styles/log-highlighting.css";
 import config from "./aws-exports";
 import configService from "./services/config";
 
diff --git a/web/src/plugins/correlation/CorrelatedLogsTable.vue b/web/src/plugins/correlation/CorrelatedLogsTable.vue
index 9fdd66a4b6..e6a0a28b34 100644
--- a/web/src/plugins/correlation/CorrelatedLogsTable.vue
+++ b/web/src/plugins/correlation/CorrelatedLogsTable.vue
@@ -16,14 +16,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <div
-    class="correlated-logs-table flex flex-col h-full w-full"
-    :class="themeClass"
+    class="correlated-logs-table flex flex-col h-full w-full relative overflow-hidden"
     data-test="correlated-logs-table"
   >
     <!-- Header with Inline Filters -->
     <div
       v-if="!props.hideDimensionFilters"
-      class="correlation-controls p-0 border-b border-solid border-[var(--o2-border-color)] bg-[var(--o2-card-bg)]"
+      class="correlation-controls p-0 max-md:p-2 border-b border-solid border-card-glass-border bg-card-glass-bg"
     >
       <!-- Dimension Filters Bar with Pending/Apply Pattern -->
       <template v-if="!isLoading || hasResults">
@@ -48,7 +47,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <OButton
             variant="ghost"
             size="icon"
-            :class="{ 'text-white! bg-[var(--o2-theme-color)]!': wrapTableCells }"
+            :class="{ 'text-white! bg-theme-accent!': wrapTableCells }"
             data-test="correlated-logs-table-wrap-content-btn"
             @click="wrapTableCells = !wrapTableCells"
           >
@@ -80,7 +79,7 @@ class="mr-1" />
               <div class="column-visibility-list min-w-62.5 max-h-100 overflow-y-auto">
                 <!-- Select All / Deselect All -->
                 <ODropdownItem
-                  class="border-b border-solid border-[var(--o2-border-color)]"
+                  class="border-b border-solid border-card-glass-border"
                   data-test="select-all-columns"
                   @select="(e) => { e.preventDefault(); toggleSelectAll(); }"
                 >
@@ -107,7 +106,7 @@ class="mr-1" />
                   @dragstart="handleDragStart($event, index)"
                   @dragover.prevent
                   @drop="handleDrop($event, index)"
-                  :class="['column-item', { 'dragging': draggedIndex === index }]"
+                  :class="['group cursor-grab transition-colors duration-200 hover:bg-interactive-hover-bg', { 'opacity-50 cursor-grabbing!': draggedIndex === index }]"
                   :data-test="`column-item-${field}`"
                   @select="(e) => { e.preventDefault(); toggleColumnVisibility(field); }"
                 >
@@ -125,7 +124,7 @@ class="mr-1" />
                     <OIcon
                       name="drag-indicator"
                       size="xs"
-                      class="drag-handle cursor-move"
+                      class="cursor-move opacity-40 transition-opacity duration-200 group-hover:opacity-80"
                     />
                   </template>
                 </ODropdownItem>
@@ -136,10 +135,10 @@ class="mr-1" />
       </template>
 
       <!-- Show skeleton while loading -->
-      <div v-else class="flex items-center gap-3 flex-wrap p-3">
-        <OSkeleton class="w-[200px] h-8" />
-        <OSkeleton class="w-[200px] h-8" />
-        <OSkeleton class="w-[200px] h-8" />
+      <div v-else class="flex items-center gap-3 flex-wrap p-3 max-md:flex-col max-md:items-start">
+        <OSkeleton class="w-50 h-8" />
+        <OSkeleton class="w-50 h-8" />
+        <OSkeleton class="w-50 h-8" />
       </div>
 
       <!-- Results Summary Row -->
@@ -156,7 +155,7 @@ class="mr-1" />
           </template>
           <OSkeleton
             v-else-if="isLoading"
-            class="w-[200px] h-[14px]"
+            class="w-50 h-3.5"
           />
         </div>
       </div> -->
@@ -174,7 +173,7 @@ class="mr-1" />
           variant="ghost"
           size="icon"
           class="h-5!"
-          :class="{ 'text-white! bg-[var(--o2-theme-color)]! hover:opacity-80': wrapTableCells }"
+          :class="{ 'text-white! bg-theme-accent! hover:opacity-80': wrapTableCells }"
           data-test="correlated-logs-table-wrap-content-btn"
           @click="wrapTableCells = !wrapTableCells"
         >
@@ -230,7 +229,7 @@ class="mr-1" />
           >
             <!-- Loading indicator -->
             <div
-              class="flex items-center justify-center gap-3"
+              class="flex items-center justify-center gap-3 max-md:flex-col"
             >
               <OSpinner size="sm" />
               <span class="text-sm opacity-70">
@@ -270,7 +269,7 @@ class="mr-1" />
         <!-- Pagination bar -->
         <div
           v-if="hasResults && totalPages > 1"
-          class="flex items-center justify-between px-4 py-2 border-t border-solid border-[var(--o2-border-color)] bg-[var(--o2-card-bg)] text-xs shrink-0"
+          class="flex items-center justify-between px-4 py-2 border-t border-solid border-card-glass-border bg-card-glass-bg text-xs shrink-0"
           data-test="correlated-logs-pagination"
         >
           <span class="opacity-60">
@@ -323,6 +322,7 @@ import OSpinner from "@/lib/feedback/Spinner/OSpinner.vue";
 import OSkeleton from "@/lib/feedback/Skeleton/OSkeleton.vue";
 import OCheckbox from "@/lib/forms/Checkbox/OCheckbox.vue";
 import { toast } from "@/lib/feedback/Toast/useToast";
+import { canvasFont } from "@/utils/fonts";
 
 // Props
 const props = defineProps<CorrelatedLogsProps>();
@@ -510,9 +510,6 @@ watch(
 );
 
 // Computed
-const themeClass = computed(() =>
-  store.state.theme === "dark" ? "dark-theme" : "light-theme",
-);
 
 const matchedDimensions = computed(() => props.matchedDimensions);
 const additionalDimensions = computed(() => props.additionalDimensions || {});
@@ -626,7 +623,7 @@ const getFilterOptions = (
     }
   }
 
-  // Convert to { label, value } format for q-select with map-options
+  // Convert to { label, value } format for the select with map-options
   return Array.from(uniqueValues).map((val) => ({
     label: val === SELECT_ALL_VALUE ? "All Values" : val,
     value: val,
@@ -725,7 +722,7 @@ watch(
   (fields) => {
     if (fields.length === 0) return;
     
-    // Added check for <=1 as _timestamp is also stored in localstorage, which is a bydefault column
+    // Check for <=1 since _timestamp is also stored in localStorage as a default column
     if(visibleColumns.value.size <= 1) initializeVisibleColumns(fields);
 
     // Initialize column order if not set
@@ -784,12 +781,13 @@ const getColumnWidth = (
   }
 
   try {
-    // Font of table header
-    canvasContext.font = "bold 14px sans-serif";
+    // Font of table header — must match what actually renders, or the measured
+    // width is wrong and cells truncate/overflow.
+    canvasContext.font = canvasFont("14px", "sans", "bold");
     let max = canvasContext.measureText(field).width + 16;
 
     // Font of the table content
-    canvasContext.font = "12px monospace";
+    canvasContext.font = canvasFont("12px", "mono");
 
     const hits = searchResults.value || [];
     for (let i = 0; i < Math.min(5, hits.length); i++) {
@@ -1288,47 +1286,8 @@ const unifiedChips = computed<DimensionChip[]>(() =>
 
 </script>
 
-<style lang="scss" scoped>
-.correlated-logs-table {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.correlation-controls {
-  background-color: var(--o2-card-bg);
-  border-bottom: 1px solid var(--o2-border-color);
-}
-
-.light-theme {
-  background-color: var(--o2-bg-light);
-  color: var(--o2-text-primary);
-}
-
-.dark-theme {
-  background-color: var(--o2-bg-dark);
-  color: var(--o2-text-primary-dark);
-}
-
-// Dimension dropdown styling (matches TelemetryCorrelationDashboard)
-.dimension-dropdown {
-  :deep(.q-field__control) {
-    min-height: 2rem;
-    padding: 0 0.5rem;
-  }
-
-  :deep(.q-field__native) {
-    font-size: 0.875rem;
-    padding: 0.25rem 0;
-  }
-
-  :deep(.q-field__append) {
-    padding-left: 0.25rem;
-  }
-}
-
-// Table skeleton container
+<style scoped>
+/* keep(keyframes): scoped rewrites the animation name, so @keyframes and its consumer must stay together */
 [data-test="table-skeleton"] {
   animation: fadeIn 0.3s ease-in;
 }
@@ -1342,51 +1301,8 @@ const unifiedChips = computed<DimensionChip[]>(() =>
   }
 }
 
-.column-visibility-list .column-item {
-  cursor: grab;
-  transition: background-color 0.2s ease;
-}
-
-.column-visibility-list .column-item:hover {
-  background-color: var(--o2-hover-bg);
-}
-
-.column-visibility-list .column-item.dragging {
-  opacity: 0.5;
-  cursor: grabbing;
-}
-
-.column-visibility-list .column-item .drag-handle {
-  opacity: 0.4;
-  transition: opacity 0.2s ease;
-}
-
-.column-visibility-list .column-item:hover .drag-handle {
-  opacity: 0.8;
-}
-
-@media (max-width: 768px) {
-  .correlation-controls {
-    padding: 0.5rem;
-  }
-
-  .flex-wrap {
-    flex-direction: column;
-    align-items: flex-start !important;
-  }
-
-  // Adjust skeleton for mobile
-  [data-test="table-skeleton"] {
-    .flex {
-      flex-direction: column;
-    }
-  }
-}
-
-</style>
-
-<style lang="scss">
-.logs-table-container .o2-scroll-container {
+/* keep(lib-override:tenstack-table): stretch TenstackTable's internal scroll container to full height */
+.logs-table-container :deep(.o2-scroll-container) {
   height: 100% !important;
 }
 </style>
diff --git a/web/src/plugins/correlation/CorrelationEventHeader.vue b/web/src/plugins/correlation/CorrelationEventHeader.vue
index dd5c461977..9cca43815a 100644
--- a/web/src/plugins/correlation/CorrelationEventHeader.vue
+++ b/web/src/plugins/correlation/CorrelationEventHeader.vue
@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <!-- Source Event Banner -->
   <div
     v-if="sourceEvent && (sourceEvent.timestamp || sourceEvent.message)"
-    class="source-event-banner flex items-start gap-3 px-4 py-2 border-b border-solid border-[var(--o2-border-color)]"
+    class="flex items-start gap-3 px-page-edge py-2 border-b border-solid border-card-glass-border bg-card-glass-bg"
   >
     <OTag
       v-if="sourceEvent.severity"
@@ -36,7 +36,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     />
     <span
       v-if="sourceEvent.message"
-      class="text-xs flex-1 font-mono text-typography-meta source-event-message"
+      class="text-xs flex-1 font-mono text-typography-meta line-clamp-2 text-ellipsis whitespace-normal wrap-break-word leading-[1.4]"
       :title="sourceEvent.message"
     >
       {{ sourceEvent.message }}
@@ -46,7 +46,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <!-- Chips Row -->
   <div
     v-if="hasChips || $slots['chip-actions']"
-    class="flex items-center gap-6 px-4 border-b border-solid border-[var(--o2-border-color)]"
+    class="flex items-center gap-6 px-page-edge border-b border-solid border-card-glass-border"
   >
     <!-- Context chips (Correlated by) — flex-1 so it occupies exactly the space
          left after the shrink-0 subject section (toggles + dynamic badge). Its
@@ -317,19 +317,3 @@ const formatEventTimestamp = (ts: number | string | undefined): string => {
   }
 };
 </script>
-
-<style scoped>
-.source-event-banner {
-  background: var(--o2-card-bg, var(--o2-bg-color));
-}
-.source-event-message {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: normal;
-  word-break: break-word;
-  line-height: 1.4;
-}
-</style>
diff --git a/web/src/plugins/correlation/DimensionFilterEditor.spec.ts b/web/src/plugins/correlation/DimensionFilterEditor.spec.ts
deleted file mode 100644
index ede93136dc..0000000000
--- a/web/src/plugins/correlation/DimensionFilterEditor.spec.ts
+++ /dev/null
@@ -1,697 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { mount } from "@vue/test-utils";
-import { createI18n } from "vue-i18n";
-import DimensionFilterEditor from "./DimensionFilterEditor.vue";
-import store from "@/test/unit/helpers/store";
-import { nextTick } from "vue";
-
-// Mock SELECT_ALL_VALUE constant
-vi.mock("@/utils/dashboard/constants", () => ({
-  SELECT_ALL_VALUE: "*",
-}));
-
-const mockTranslations = {
-  "correlation.logs.filters.title": "Edit Filters",
-  "correlation.logs.filters.description": "Configure dimension filters",
-  "correlation.logs.filters.matchedDimensions": "Matched Dimensions",
-  "correlation.logs.filters.matchedDimensionsTooltip": "These are stable",
-  "correlation.logs.filters.additionalDimensions": "Additional Dimensions",
-  "correlation.logs.filters.additionalDimensionsTooltip": "These may vary",
-  "correlation.logs.filters.stableDimension": "Stable",
-  "correlation.logs.filters.unstableDimension": "Unstable",
-  "correlation.logs.filters.showingAll": "Showing All",
-  "correlation.logs.filters.setToAll": "Set to All",
-  "correlation.logs.filters.wildcardHelp": "Show all values",
-  "correlation.logs.filters.noAdditionalDimensions": "No additional dimensions",
-  "common.close": "Close",
-  "common.cancel": "Cancel",
-  "common.reset": "Reset",
-  "common.apply": "Apply",
-};
-
-const i18n = createI18n({
-  locale: "en",
-  legacy: false,
-  messages: {
-    en: mockTranslations,
-  },
-});
-
-const ODialogStub = {
-  name: "ODialog",
-  template:
-    '<div class="o-dialog-stub" :data-open="open"><slot name="header" /><slot /><slot name="footer" /></div>',
-  props: [
-    "open",
-    "size",
-    "title",
-    "subTitle",
-    "persistent",
-    "showClose",
-    "width",
-    "primaryButtonLabel",
-    "secondaryButtonLabel",
-    "neutralButtonLabel",
-    "primaryVariant",
-    "secondaryVariant",
-    "neutralVariant",
-    "primaryButtonDisabled",
-    "secondaryButtonDisabled",
-    "neutralButtonDisabled",
-    "primaryButtonLoading",
-    "secondaryButtonLoading",
-    "neutralButtonLoading",
-  ],
-  emits: ["update:open", "click:primary", "click:secondary", "click:neutral"],
-};
-
-describe("DimensionFilterEditor.vue", () => {
-  let wrapper: any;
-
-  const defaultProps = {
-    modelValue: true,
-    matchedDimensions: {
-      service: "api",
-      environment: "prod",
-    },
-    additionalDimensions: {
-      region: "us-west",
-      cluster: "cluster-1",
-    },
-    currentFilters: {
-      service: "api",
-      environment: "prod",
-      region: "us-west",
-      cluster: "cluster-1",
-    },
-  };
-
-  const createWrapper = (props = {}) => {
-    return mount(DimensionFilterEditor, {
-      props: {
-        ...defaultProps,
-        ...props,
-      },
-      global: {
-        plugins: [i18n, store],
-        stubs: {
-          ODialog: ODialogStub,
-          OButton: {
-            name: "OButton",
-            template: '<button class="o-button-stub" @click="$emit(\'click\', $event)"><slot /></button>',
-            props: ["variant", "size", "disabled", "loading"],
-            emits: ["click"],
-          },
-          "OIcon": true,
-          "q-tooltip": true,
-          "q-input": {
-            name: "QInput",
-            template:
-              '<input class="q-input-stub" :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" />',
-            props: ["modelValue", "dense", "outlined", "placeholder"],
-            emits: ["update:modelValue"],
-          },
-        },
-      },
-    });
-  };
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  afterEach(() => {
-    if (wrapper) {
-      wrapper.unmount();
-    }
-  });
-
-  describe("Component Mounting", () => {
-    it("should mount successfully", () => {
-      wrapper = createWrapper();
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it("should render ODialog with open=true when modelValue is true", () => {
-      wrapper = createWrapper({ modelValue: true });
-      const dialog = wrapper.findComponent(ODialogStub);
-      expect(dialog.exists()).toBe(true);
-      expect(dialog.props("open")).toBe(true);
-    });
-
-    it("should render ODialog with open=false when modelValue is false", () => {
-      wrapper = createWrapper({ modelValue: false });
-      const dialog = wrapper.findComponent(ODialogStub);
-      expect(dialog.props("open")).toBe(false);
-    });
-
-    it("should pass title to ODialog", () => {
-      wrapper = createWrapper();
-      const dialog = wrapper.findComponent(ODialogStub);
-      expect(dialog.props("title")).toBe("Edit Filters");
-    });
-
-    it("should pass size md to ODialog", () => {
-      wrapper = createWrapper();
-      const dialog = wrapper.findComponent(ODialogStub);
-      expect(dialog.props("size")).toBe("md");
-    });
-
-    it("should pass primary/secondary/neutral button labels to ODialog", () => {
-      wrapper = createWrapper();
-      const dialog = wrapper.findComponent(ODialogStub);
-      expect(dialog.props("primaryButtonLabel")).toBe("Apply");
-      expect(dialog.props("secondaryButtonLabel")).toBe("Cancel");
-      expect(dialog.props("neutralButtonLabel")).toBe("Reset");
-    });
-  });
-
-  describe("Props Handling", () => {
-    it("should accept modelValue prop", () => {
-      wrapper = createWrapper({ modelValue: true });
-      expect(wrapper.props().modelValue).toBe(true);
-    });
-
-    it("should accept matchedDimensions prop", () => {
-      wrapper = createWrapper();
-      expect(wrapper.props().matchedDimensions).toEqual({
-        service: "api",
-        environment: "prod",
-      });
-    });
-
-    it("should accept additionalDimensions prop", () => {
-      wrapper = createWrapper();
-      expect(wrapper.props().additionalDimensions).toEqual({
-        region: "us-west",
-        cluster: "cluster-1",
-      });
-    });
-
-    it("should accept currentFilters prop", () => {
-      wrapper = createWrapper();
-      expect(wrapper.props().currentFilters).toEqual(defaultProps.currentFilters);
-    });
-  });
-
-  describe("Pending Filters State", () => {
-    it("should initialize pendingFilters with currentFilters", () => {
-      wrapper = createWrapper();
-      expect(wrapper.vm.pendingFilters).toEqual(defaultProps.currentFilters);
-    });
-
-    it("should sync pendingFilters when currentFilters change", async () => {
-      wrapper = createWrapper();
-      const newFilters = { service: "new-api", environment: "dev" };
-
-      await wrapper.setProps({ currentFilters: newFilters });
-      await nextTick();
-
-      expect(wrapper.vm.pendingFilters).toEqual(newFilters);
-    });
-
-    it("should reset pendingFilters when dialog opens", async () => {
-      wrapper = createWrapper({ modelValue: false });
-      wrapper.vm.pendingFilters = { modified: "value" };
-
-      await wrapper.setProps({ modelValue: true });
-      await nextTick();
-
-      expect(wrapper.vm.pendingFilters).toEqual(defaultProps.currentFilters);
-    });
-  });
-
-  describe("Matched Dimensions Section", () => {
-    it("should have matched dimensions in props", () => {
-      wrapper = createWrapper();
-      expect(wrapper.props().matchedDimensions).toEqual({
-        service: "api",
-        environment: "prod",
-      });
-    });
-
-    it("should initialize with matched dimensions", () => {
-      wrapper = createWrapper();
-      expect(Object.keys(wrapper.props().matchedDimensions)).toContain("service");
-      expect(Object.keys(wrapper.props().matchedDimensions)).toContain(
-        "environment",
-      );
-    });
-
-    it("should render dialog containing matched dimension rows", () => {
-      wrapper = createWrapper();
-      expect(wrapper.find('[data-test="matched-dimension-service"]').exists()).toBe(
-        true,
-      );
-      expect(
-        wrapper.find('[data-test="matched-dimension-environment"]').exists(),
-      ).toBe(true);
-    });
-
-    it("should track matched dimension keys", () => {
-      wrapper = createWrapper();
-      const matchedKeys = Object.keys(wrapper.props().matchedDimensions);
-      expect(matchedKeys).toContain("service");
-      expect(matchedKeys).toContain("environment");
-    });
-
-    it("should have stable dimension tracking", () => {
-      wrapper = createWrapper();
-      expect(wrapper.props().matchedDimensions).toBeDefined();
-    });
-  });
-
-  describe("Additional Dimensions Section", () => {
-    it("should have additional dimensions in props", () => {
-      wrapper = createWrapper();
-      expect(wrapper.props().additionalDimensions).toEqual({
-        region: "us-west",
-        cluster: "cluster-1",
-      });
-    });
-
-    it("should initialize with additional dimensions", () => {
-      wrapper = createWrapper();
-      expect(Object.keys(wrapper.props().additionalDimensions)).toContain("region");
-      expect(Object.keys(wrapper.props().additionalDimensions)).toContain(
-        "cluster",
-      );
-    });
-
-    it("should track additional dimension keys", () => {
-      wrapper = createWrapper();
-      const additionalKeys = Object.keys(wrapper.props().additionalDimensions);
-      expect(additionalKeys.length).toBe(2);
-    });
-
-    it("should render additional dimension rows", () => {
-      wrapper = createWrapper();
-      expect(wrapper.find('[data-test="additional-dimension-region"]').exists()).toBe(
-        true,
-      );
-      expect(
-        wrapper.find('[data-test="additional-dimension-cluster"]').exists(),
-      ).toBe(true);
-    });
-
-    it("should handle wildcard toggle logic", () => {
-      wrapper = createWrapper();
-      wrapper.vm.pendingFilters = { region: "us-west" };
-
-      wrapper.vm.toggleWildcard("region");
-      expect(wrapper.vm.pendingFilters.region).toBe("*");
-    });
-
-    it("should handle empty additional dimensions", () => {
-      wrapper = createWrapper({ additionalDimensions: {} });
-      expect(Object.keys(wrapper.props().additionalDimensions).length).toBe(0);
-    });
-  });
-
-  describe("Wildcard Toggle", () => {
-    it("should toggle dimension to wildcard", async () => {
-      wrapper = createWrapper();
-      wrapper.vm.pendingFilters = { region: "us-west" };
-
-      wrapper.vm.toggleWildcard("region");
-      await nextTick();
-
-      expect(wrapper.vm.pendingFilters.region).toBe("*");
-    });
-
-    it("should restore original value when toggling from wildcard", async () => {
-      wrapper = createWrapper();
-      wrapper.vm.pendingFilters = { region: "*" };
-
-      wrapper.vm.toggleWildcard("region");
-      await nextTick();
-
-      expect(wrapper.vm.pendingFilters.region).toBe("us-west");
-    });
-
-    it("should check if showing all wildcard", () => {
-      wrapper = createWrapper();
-      wrapper.vm.pendingFilters = { region: "*" };
-      expect(wrapper.vm.pendingFilters.region).toBe("*");
-    });
-
-    it("should check if showing specific value", () => {
-      wrapper = createWrapper();
-      wrapper.vm.pendingFilters = { region: "us-west" };
-      expect(wrapper.vm.pendingFilters.region).toBe("us-west");
-    });
-  });
-
-  describe("hasChanges Computed", () => {
-    it("should return false when no changes", () => {
-      wrapper = createWrapper();
-      wrapper.vm.pendingFilters = { ...defaultProps.currentFilters };
-
-      expect(wrapper.vm.hasChanges).toBe(false);
-    });
-
-    it("should return true when values changed", () => {
-      wrapper = createWrapper();
-      wrapper.vm.pendingFilters = {
-        ...defaultProps.currentFilters,
-        service: "new-api",
-      };
-
-      expect(wrapper.vm.hasChanges).toBe(true);
-    });
-
-    it("should return true when keys added", () => {
-      wrapper = createWrapper();
-      wrapper.vm.pendingFilters = {
-        ...defaultProps.currentFilters,
-        newKey: "newValue",
-      };
-
-      expect(wrapper.vm.hasChanges).toBe(true);
-    });
-
-    it("should return true when keys removed", () => {
-      wrapper = createWrapper();
-      wrapper.vm.pendingFilters = { service: "api" };
-
-      expect(wrapper.vm.hasChanges).toBe(true);
-    });
-
-    it("should disable ODialog primary button when hasChanges is false", async () => {
-      wrapper = createWrapper();
-      wrapper.vm.pendingFilters = { ...defaultProps.currentFilters };
-      await nextTick();
-
-      const dialog = wrapper.findComponent(ODialogStub);
-      expect(dialog.props("primaryButtonDisabled")).toBe(true);
-    });
-
-    it("should enable ODialog primary button when hasChanges is true", async () => {
-      wrapper = createWrapper();
-      wrapper.vm.pendingFilters = {
-        ...defaultProps.currentFilters,
-        service: "changed",
-      };
-      await nextTick();
-
-      const dialog = wrapper.findComponent(ODialogStub);
-      expect(dialog.props("primaryButtonDisabled")).toBe(false);
-    });
-  });
-
-  describe("Action Buttons", () => {
-    it("should have close handler", () => {
-      wrapper = createWrapper();
-      expect(typeof wrapper.vm.handleClose).toBe("function");
-    });
-
-    it("should have cancel handler", () => {
-      wrapper = createWrapper();
-      expect(typeof wrapper.vm.handleCancel).toBe("function");
-    });
-
-    it("should have reset handler", () => {
-      wrapper = createWrapper();
-      expect(typeof wrapper.vm.handleReset).toBe("function");
-    });
-
-    it("should have apply handler", () => {
-      wrapper = createWrapper();
-      expect(typeof wrapper.vm.handleApply).toBe("function");
-    });
-
-    it("should compute hasChanges as false when no changes", () => {
-      wrapper = createWrapper();
-      wrapper.vm.pendingFilters = { ...defaultProps.currentFilters };
-
-      expect(wrapper.vm.hasChanges).toBe(false);
-    });
-
-    it("should compute hasChanges as true when there are changes", async () => {
-      wrapper = createWrapper();
-      wrapper.vm.pendingFilters = {
-        ...defaultProps.currentFilters,
-        service: "modified",
-      };
-      await nextTick();
-
-      expect(wrapper.vm.hasChanges).toBe(true);
-    });
-  });
-
-  describe("ODialog Emit Wiring", () => {
-    it("should call handleApply on click:primary", async () => {
-      wrapper = createWrapper();
-      wrapper.vm.pendingFilters = { modified: "value" };
-
-      const dialog = wrapper.findComponent(ODialogStub);
-      await dialog.vm.$emit("click:primary");
-      await nextTick();
-
-      expect(wrapper.emitted("update:filters")).toBeTruthy();
-      expect(wrapper.emitted("update:filters")?.[0]).toEqual([
-        { modified: "value" },
-      ]);
-      expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual([false]);
-    });
-
-    it("should call handleCancel on click:secondary", async () => {
-      wrapper = createWrapper();
-      wrapper.vm.pendingFilters = { modified: "value" };
-
-      const dialog = wrapper.findComponent(ODialogStub);
-      await dialog.vm.$emit("click:secondary");
-      await nextTick();
-
-      expect(wrapper.vm.pendingFilters).toEqual(defaultProps.currentFilters);
-      expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual([false]);
-      expect(wrapper.emitted("close")).toBeTruthy();
-    });
-
-    it("should call handleReset on click:neutral", async () => {
-      wrapper = createWrapper();
-      wrapper.vm.pendingFilters = { extra: "value" };
-
-      const dialog = wrapper.findComponent(ODialogStub);
-      await dialog.vm.$emit("click:neutral");
-      await nextTick();
-
-      expect(wrapper.vm.pendingFilters).toEqual(defaultProps.matchedDimensions);
-    });
-
-    it("should propagate update:open false to update:modelValue and emit close", async () => {
-      wrapper = createWrapper();
-
-      const dialog = wrapper.findComponent(ODialogStub);
-      await dialog.vm.$emit("update:open", false);
-      await nextTick();
-
-      expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual([false]);
-      expect(wrapper.emitted("close")).toBeTruthy();
-    });
-
-    it("should propagate update:open true to update:modelValue without emitting close", async () => {
-      wrapper = createWrapper({ modelValue: false });
-
-      const dialog = wrapper.findComponent(ODialogStub);
-      await dialog.vm.$emit("update:open", true);
-      await nextTick();
-
-      expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual([true]);
-      expect(wrapper.emitted("close")).toBeFalsy();
-    });
-  });
-
-  describe("Event Handlers", () => {
-    it("should emit update:filters on apply", async () => {
-      wrapper = createWrapper();
-      wrapper.vm.pendingFilters = { modified: "value" };
-
-      wrapper.vm.handleApply();
-      await nextTick();
-
-      expect(wrapper.emitted("update:filters")).toBeTruthy();
-      expect(wrapper.emitted("update:filters")?.[0]).toEqual([
-        { modified: "value" },
-      ]);
-    });
-
-    it("should emit update:modelValue on apply", async () => {
-      wrapper = createWrapper();
-
-      wrapper.vm.handleApply();
-      await nextTick();
-
-      expect(wrapper.emitted("update:modelValue")).toBeTruthy();
-      expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([false]);
-    });
-
-    it("should restore filters on cancel", async () => {
-      wrapper = createWrapper();
-      wrapper.vm.pendingFilters = { modified: "value" };
-
-      wrapper.vm.handleCancel();
-      await nextTick();
-
-      expect(wrapper.vm.pendingFilters).toEqual(defaultProps.currentFilters);
-    });
-
-    it("should emit close on cancel", async () => {
-      wrapper = createWrapper();
-
-      wrapper.vm.handleCancel();
-      await nextTick();
-
-      expect(wrapper.emitted("close")).toBeTruthy();
-    });
-
-    it("should reset to matched dimensions only", async () => {
-      wrapper = createWrapper();
-      wrapper.vm.pendingFilters = { extra: "value" };
-
-      wrapper.vm.handleReset();
-      await nextTick();
-
-      expect(wrapper.vm.pendingFilters).toEqual(defaultProps.matchedDimensions);
-    });
-
-    it("should restore filters on dialog close", async () => {
-      wrapper = createWrapper();
-      wrapper.vm.pendingFilters = { modified: "value" };
-
-      wrapper.vm.handleClose();
-      await nextTick();
-
-      expect(wrapper.vm.pendingFilters).toEqual(defaultProps.currentFilters);
-    });
-  });
-
-  describe("Input Bindings", () => {
-    it("should update pendingFilters for matched dimensions", async () => {
-      wrapper = createWrapper();
-
-      wrapper.vm.pendingFilters = {
-        ...wrapper.vm.pendingFilters,
-        service: "new-service",
-      };
-      await nextTick();
-
-      expect(wrapper.vm.pendingFilters.service).toBe("new-service");
-    });
-
-    it("should update pendingFilters for additional dimensions", async () => {
-      wrapper = createWrapper();
-
-      wrapper.vm.pendingFilters = {
-        ...wrapper.vm.pendingFilters,
-        region: "us-east",
-      };
-      await nextTick();
-
-      expect(wrapper.vm.pendingFilters.region).toBe("us-east");
-    });
-  });
-
-  describe("Tooltips", () => {
-    it("should have tooltip logic for dimensions", () => {
-      wrapper = createWrapper();
-      expect(wrapper.props().matchedDimensions).toBeDefined();
-      expect(wrapper.props().additionalDimensions).toBeDefined();
-    });
-
-    it("should track stable dimensions for tooltips", () => {
-      wrapper = createWrapper();
-      const matchedKeys = Object.keys(wrapper.props().matchedDimensions);
-      expect(matchedKeys.length).toBeGreaterThan(0);
-    });
-
-    it("should track unstable dimensions for tooltips", () => {
-      wrapper = createWrapper();
-      const additionalKeys = Object.keys(wrapper.props().additionalDimensions);
-      expect(additionalKeys.length).toBeGreaterThan(0);
-    });
-  });
-
-  describe("Edge Cases", () => {
-    it("should handle empty matchedDimensions", () => {
-      wrapper = createWrapper({ matchedDimensions: {} });
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it("should handle undefined additionalDimensions", () => {
-      wrapper = createWrapper({ additionalDimensions: {} });
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it("should handle dimension with special characters", () => {
-      wrapper = createWrapper({
-        matchedDimensions: { "special-key": "special-value" },
-      });
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it("should handle very long dimension values", () => {
-      wrapper = createWrapper({
-        currentFilters: {
-          key: "a".repeat(1000),
-        },
-      });
-      expect(wrapper.exists()).toBe(true);
-    });
-  });
-
-  describe("Styling and Layout", () => {
-    it("should mount component successfully", () => {
-      wrapper = createWrapper({ modelValue: true });
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it("should have ODialog component", () => {
-      wrapper = createWrapper({ modelValue: true });
-      const dialog = wrapper.findComponent(ODialogStub);
-      expect(dialog.exists()).toBe(true);
-    });
-
-    it("should pass open prop to ODialog", () => {
-      wrapper = createWrapper({ modelValue: true });
-      const dialog = wrapper.findComponent(ODialogStub);
-      expect(dialog.props("open")).toBe(true);
-    });
-  });
-
-  describe("Reactivity", () => {
-    it("should react to modelValue changes", async () => {
-      wrapper = createWrapper({ modelValue: false });
-
-      await wrapper.setProps({ modelValue: true });
-      await nextTick();
-
-      expect(wrapper.vm.pendingFilters).toEqual(defaultProps.currentFilters);
-    });
-
-    it("should react to currentFilters prop changes", async () => {
-      wrapper = createWrapper();
-      const newFilters = { newKey: "newValue" };
-
-      await wrapper.setProps({ currentFilters: newFilters });
-      await nextTick();
-
-      expect(wrapper.vm.pendingFilters).toEqual(newFilters);
-    });
-  });
-});
diff --git a/web/src/plugins/correlation/DimensionFilterEditor.vue b/web/src/plugins/correlation/DimensionFilterEditor.vue
deleted file mode 100644
index d9f20092eb..0000000000
--- a/web/src/plugins/correlation/DimensionFilterEditor.vue
+++ /dev/null
@@ -1,255 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <ODialog data-test="dimension-filter-editor-dialog"
-    :open="modelValue"
-    @update:open="(v) => { $emit('update:modelValue', v); if (!v) handleClose(); }"
-    size="md"
-    :title="t('correlation.logs.filters.title')"
-    :secondary-button-label="t('common.cancel')"
-    :neutral-button-label="t('common.reset')"
-    :primary-button-label="t('common.apply')"
-    :primary-button-disabled="!hasChanges"
-    @click:secondary="handleCancel"
-    @click:neutral="handleReset"
-    @click:primary="handleApply"
-  >
-        <!-- Description -->
-        <div class="mb-4 text-sm text-gray-600">
-          {{ t('correlation.logs.filters.description') }}
-        </div>
-
-        <!-- Matched Dimensions (Stable) -->
-        <div class="mb-6">
-          <div class="flex items-center gap-2 mb-3">
-            <h3 class="text-base font-semibold m-0">
-              {{ t('correlation.logs.filters.matchedDimensions') }}
-            </h3>
-            <OIcon name="info" size="sm">
-              <OTooltip :content="t('correlation.logs.filters.matchedDimensionsTooltip')" side="top" />
-            </OIcon>
-          </div>
-
-          <div class="space-y-3">
-            <div
-              v-for="(value, key) in matchedDimensions"
-              :key="`matched-${key}`"
-              class="flex items-center gap-3 p-3 border border-solid border-[var(--o2-border-color)] rounded"
-              :data-test="`matched-dimension-${key}`"
-            >
-              <div class="flex-1 flex items-center gap-3">
-                <OIcon name="lock" size="sm" />
-                <span class="font-semibold text-sm">{{ key }}:</span>
-                <OInput
-                  v-model="pendingFilters[key]"
-                  class="flex-1"
-                  :placeholder="String(value)"
-                  :data-test="`matched-dimension-input-${key}`"
-                />
-              </div>
-              <OIcon name="check-circle" size="sm">
-                <OTooltip :content="t('correlation.logs.filters.stableDimension')" side="top" />
-              </OIcon>
-            </div>
-          </div>
-        </div>
-
-        <!-- Additional Dimensions (Unstable) -->
-        <div v-if="Object.keys(additionalDimensions).length > 0" class="mb-4">
-          <div class="flex items-center gap-2 mb-3">
-            <h3 class="text-base font-semibold m-0">
-              {{ t('correlation.logs.filters.additionalDimensions') }}
-            </h3>
-            <OIcon name="info" size="sm">
-              <OTooltip :content="t('correlation.logs.filters.additionalDimensionsTooltip')" side="top" />
-            </OIcon>
-          </div>
-
-          <div class="space-y-3">
-            <div
-              v-for="(value, key) in additionalDimensions"
-              :key="`additional-${key}`"
-              class="flex items-center gap-3 p-3 border border-solid border-[var(--o2-border-color)] rounded bg-surface-panel"
-              :data-test="`additional-dimension-${key}`"
-            >
-              <div class="flex-1 flex flex-col gap-2">
-                <div class="flex items-center gap-3">
-                  <OIcon name="warning" size="sm" />
-                  <span class="font-semibold text-sm">{{ key }}:</span>
-                  <OInput
-                    v-model="pendingFilters[key]"
-                    class="flex-1"
-                    :placeholder="String(value)"
-                    :data-test="`additional-dimension-input-${key}`"
-                  />
-                </div>
-                <div class="ml-8">
-                  <OButton
-                    icon-left="all-inclusive"
-                    variant="ghost"
-                    size="sm-action"
-                    :class="pendingFilters[key] === SELECT_ALL_VALUE ? 'text-green-600' : ''"
-                    @click="toggleWildcard(key)"
-                    :data-test="`toggle-wildcard-${key}`"
-                  >
-                    {{
-                      pendingFilters[key] === SELECT_ALL_VALUE
-                        ? t('correlation.logs.filters.showingAll')
-                        : t('correlation.logs.filters.setToAll')
-                    }}
-                  </OButton>
-                  <span class="ml-2 text-xs text-gray-500">
-                    {{ t('correlation.logs.filters.wildcardHelp') }}
-                  </span>
-                </div>
-              </div>
-              <OIcon name="sync-problem" size="sm">
-                <OTooltip :content="t('correlation.logs.filters.unstableDimension')" side="top" />
-              </OIcon>
-            </div>
-          </div>
-        </div>
-
-        <!-- No Additional Dimensions Message -->
-        <div
-          v-else
-          class="p-3 border border-dashed border-gray-300 rounded text-center text-sm text-gray-500"
-        >
-          {{ t('correlation.logs.filters.noAdditionalDimensions') }}
-        </div>
-
-  </ODialog>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { SELECT_ALL_VALUE } from '@/utils/dashboard/constants';
-import OButton from '@/lib/core/Button/OButton.vue';
-import ODialog from '@/lib/overlay/Dialog/ODialog.vue';
-import OInput from '@/lib/forms/Input/OInput.vue';
-import OTooltip from '@/lib/overlay/Tooltip/OTooltip.vue';
-import OIcon from "@/lib/core/Icon/OIcon.vue";
-
-interface Props {
-  modelValue: boolean;
-  matchedDimensions: Record<string, string>;
-  additionalDimensions?: Record<string, string>;
-  currentFilters: Record<string, string>;
-  availableDimensions?: Record<string, any>;
-}
-
-// Props & Emits
-const props = defineProps<Props>();
-const emit = defineEmits<{
-  'update:modelValue': [value: boolean];
-  'update:filters': [filters: Record<string, string>];
-  'close': [];
-}>();
-
-// Composables
-const { t } = useI18n();
-
-// State - Pending filters (staged changes)
-const pendingFilters = ref<Record<string, string>>({ ...props.currentFilters });
-
-// Computed
-const hasChanges = computed(() => {
-  const current = props.currentFilters;
-  const pending = pendingFilters.value;
-
-  // Check if any keys are different
-  const allKeys = new Set([...Object.keys(current), ...Object.keys(pending)]);
-  for (const key of allKeys) {
-    if (current[key] !== pending[key]) {
-      return true;
-    }
-  }
-
-  return false;
-});
-
-/**
- * Toggle a dimension between specific value and wildcard (SELECT_ALL_VALUE)
- */
-const toggleWildcard = (key: string) => {
-  if (pendingFilters.value[key] === SELECT_ALL_VALUE) {
-    // Restore original value
-    const originalValue =
-      props.additionalDimensions?.[key] || props.matchedDimensions[key] || '';
-    pendingFilters.value[key] = String(originalValue);
-  } else {
-    // Set to wildcard
-    pendingFilters.value[key] = SELECT_ALL_VALUE;
-  }
-};
-
-/**
- * Handle apply button click
- */
-const handleApply = () => {
-  emit('update:filters', { ...pendingFilters.value });
-  emit('update:modelValue', false);
-};
-
-/**
- * Handle cancel button click
- */
-const handleCancel = () => {
-  // Restore original filters
-  pendingFilters.value = { ...props.currentFilters };
-  emit('update:modelValue', false);
-  emit('close');
-};
-
-/**
- * Handle reset button click
- */
-const handleReset = () => {
-  // Reset to matched dimensions only
-  pendingFilters.value = { ...props.matchedDimensions };
-};
-
-/**
- * Handle dialog close
- */
-const handleClose = () => {
-  // Restore original filters on close
-  pendingFilters.value = { ...props.currentFilters };
-  emit('close');
-};
-
-// Watch for prop changes
-watch(
-  () => props.currentFilters,
-  (newFilters) => {
-    pendingFilters.value = { ...newFilters };
-  },
-  { deep: true }
-);
-
-watch(
-  () => props.modelValue,
-  (isOpen) => {
-    if (isOpen) {
-      // Reset pending filters when dialog opens
-      pendingFilters.value = { ...props.currentFilters };
-    }
-  }
-);
-</script>
-
diff --git a/web/src/plugins/correlation/DimensionFiltersBar.vue b/web/src/plugins/correlation/DimensionFiltersBar.vue
index 78f8916def..fd0f476d4c 100644
--- a/web/src/plugins/correlation/DimensionFiltersBar.vue
+++ b/web/src/plugins/correlation/DimensionFiltersBar.vue
@@ -16,7 +16,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <div
-    class="py-2 px-4 border-b border-solid border-[var(--o2-border-color)]"
+    class="py-2 px-4 border-b border-solid border-card-glass-border"
   >
     <div class="flex items-center gap-3 flex-wrap">
       <span class="text-xs font-semibold opacity-70">
diff --git a/web/src/plugins/correlation/TelemetryCorrelationDashboard.spec.ts b/web/src/plugins/correlation/TelemetryCorrelationDashboard.spec.ts
index 4082d7d6ef..ad1693ab55 100644
--- a/web/src/plugins/correlation/TelemetryCorrelationDashboard.spec.ts
+++ b/web/src/plugins/correlation/TelemetryCorrelationDashboard.spec.ts
@@ -165,7 +165,7 @@ const i18n = createI18n({
 });
 
 // ---------------------------------------------------------------------------
-// ODrawer stub — replaces the migrated dialog-mode overlay (q-dialog -> ODrawer).
+// ODrawer stub — the dialog-mode overlay.
 // Renders header/default/footer slots and exposes migrated props/emits so we
 // can assert wiring without going through the real Reka portal/teleport.
 // ---------------------------------------------------------------------------
@@ -214,7 +214,7 @@ const ODrawerStub = {
 };
 
 // ---------------------------------------------------------------------------
-// ODialog stub — replaces the metric selector dialog (q-dialog -> ODialog).
+// ODialog stub — the metric selector dialog.
 // ---------------------------------------------------------------------------
 const ODialogStub = {
   name: "ODialog",
@@ -793,7 +793,7 @@ describe("TelemetryCorrelationDashboard.vue", () => {
   });
 
   // -------------------------------------------------------------------------
-  // Dialog-mode ODrawer wiring (replaces previous q-dialog)
+  // Dialog-mode ODrawer wiring
   // -------------------------------------------------------------------------
   describe("ODrawer wiring (dialog mode)", () => {
     it("should render an ODrawer when mode is dialog", () => {
@@ -871,7 +871,7 @@ describe("TelemetryCorrelationDashboard.vue", () => {
   });
 
   // -------------------------------------------------------------------------
-  // Metric selector ODialog wiring (replaces previous q-dialog)
+  // Metric selector ODialog wiring
   // -------------------------------------------------------------------------
   describe("ODialog wiring (metric selector)", () => {
     it("should render an ODialog stub for the metric selector", () => {
diff --git a/web/src/plugins/correlation/TelemetryCorrelationDashboard.vue b/web/src/plugins/correlation/TelemetryCorrelationDashboard.vue
index c63aad5a76..5a02786e19 100644
--- a/web/src/plugins/correlation/TelemetryCorrelationDashboard.vue
+++ b/web/src/plugins/correlation/TelemetryCorrelationDashboard.vue
@@ -17,6 +17,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <!-- Dialog Mode -->
   <ODrawer data-test="telemetry-correlation-dashboard-drawer"
+    bleed
     v-if="props.mode === 'dialog'"
     v-model:open="isOpen"
     side="right"
@@ -31,7 +32,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
       <!-- Dimensions Display - Stable (matched) and Unstable (additional) -->
       <div
-        class="py-2 px-4 border-b border-solid border-[var(--o2-border-color)]"
+        class="py-2 px-4 border-b border-solid border-card-glass-border"
       >
         <div class="flex items-center gap-3 flex-wrap">
           <span class="text-xs font-semibold opacity-70">
@@ -88,7 +89,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       />
 
       <!-- Tabs (only in dialog mode, hidden in embedded-tabs mode) -->
-      <div class="px-4">
+      <div class="px-page-edge">
       <OTabs
         v-if="!isEmbeddedTabs"
         v-model="activeTab"
@@ -113,7 +114,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- Refresh Button (dialog mode) -->
           <div
             v-if="logsDashboardData"
-            class="p-2 border-b border-solid border-[var(--o2-border-color)] flex justify-end"
+            class="p-2 border-b border-solid border-card-glass-border flex justify-end"
           >
             <OButton
               variant="ghost"
@@ -164,10 +165,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
         <!-- Metrics Tab Panel -->
         <OTabPanel name="metrics" layout="flex-col" stretch class="min-h-0">
-          <!-- Two-column body: sidebar + charts (q-splitter matching TracesAnalysisDashboard style) -->
+          <!-- Two-column body: sidebar + charts (splitter matching TracesAnalysisDashboard style) -->
           <OSplitter
             v-model="splitterModel"
-            class="flex-1 min-h-0 full-height w-full"
+            class="flex-1 min-h-0 h-full max-h-full overflow-hidden w-full"
           >
             <!-- -- Left sidebar -- -->
             <template #before>
@@ -176,7 +177,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               >
                 <!-- Search -->
                   <div
-                    class="dimension-sidebar-search-container p-[0.625rem] border-b border-solid border-[var(--o2-border-color)]"
+                    class="dimension-sidebar-search-container px-1.5 py-2 border-b border-solid border-card-glass-border"
                   >
                     <OSearchInput
                       v-model="metricSearchText"
@@ -187,7 +188,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
                 <!-- Grouped metric list -->
                 <div
-                  class="dimension-list-container flex-1 min-h-0 overflow-y-auto px-[0.325rem]"
+                  class="dimension-list-container flex-1 min-h-0 overflow-y-auto px-1.5"
                   style="max-height: calc(100vh - 210px)"
                 >
                   <template
@@ -203,10 +204,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     >
                       <template v-if="group.streams.length > 0">
                         <div
-                          class="flex items-center justify-between py-1.5 px-2 bg-(--o2-section-header-bg) border-b border-solid border-(--o2-border) sticky top-0 z-10 cursor-pointer"
+                          class="flex items-center justify-between py-1.5 px-2 bg-section-header-bg border-b border-solid border-border-default sticky top-0 z-10 cursor-pointer"
                           @click="toggleGroupCollapse(group.id)"
                         >
-                          <div class="flex items-center gap-[0.375rem] text-[0.6875rem] font-bold uppercase tracking-[0.05em] opacity-75">
+                          <div class="flex items-center gap-1.5 text-2xs font-bold uppercase tracking-[0.05em] opacity-75">
                             <OIcon
                               :name="
                                 collapsedGroups.has(group.id)
@@ -264,7 +265,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                           </div>
                           <div class="flex flex-col flex-1 min-w-0">
                             <span
-                              class="truncate cursor-pointer text-[var(--o2-text-2)]! text-sm"
+                              class="truncate cursor-pointer text-text-secondary! text-sm"
                               >{{ stream.stream_name }}</span
                             >
                           </div>
@@ -283,7 +284,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
                 <!-- Footer: selected count -->
                 <div
-                  class="p-3 border-t border-solid border-[var(--o2-border-color)] o2-table-footer-title"
+                  class="p-3 border-t border-solid border-card-glass-border text-xs font-normal"
                 >
                   {{ selectedMetricStreams.length }} of
                   {{ uniqueMetricStreams.length }} selected
@@ -293,7 +294,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
             <!-- -- Separator -- -->
             <template #separator>
-              <div class="w-px h-full bg-(--o2-border) cursor-col-resize dark:bg-[rgba(255,255,255,0.12)]" />
+              <div class="w-px h-full bg-border-default cursor-col-resize dark:bg-[rgba(255,255,255,0.12)]" />
             </template>
 
             <!-- -- Right area: group tabs + dashboard -- -->
@@ -305,15 +306,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   v-model="activeOuterTab"
                   dense
                   align="left"
-                  class="metric-group-tabs border-b border-solid border-[var(--o2-border-color)]"
+                  class="px-page-edge shrink-0 border-b border-solid border-card-glass-border"
                 >
                   <OTab
                     v-for="outerGroup in groupDefs"
                     :key="outerGroup.id"
                     :name="outerGroup.id"
-                    class="flex-none!"
                   >
-                    <div class="flex flex-col items-start px-1 py-0.5 min-w-0">
+                    <div class="flex flex-col items-start min-w-0">
                       <div class="flex items-center gap-1">
                         <OIcon v-if="typeof outerGroup.icon === 'string'" :name="outerGroup.icon" size="xs" />
                         <component v-else :is="outerGroup.icon" />
@@ -321,7 +321,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       </div>
                       <span
                         v-if="outerTabResourceName[outerGroup.id]"
-                        class="text-xs leading-tight opacity-75 whitespace-nowrap"
+                        class="text-xs leading-tight opacity-75 truncate max-w-40"
                         :title="outerTabResourceName[outerGroup.id]"
                       >{{ outerTabResourceName[outerGroup.id] }}</span>
                     </div>
@@ -334,7 +334,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   v-model="activeMetricGroupTab"
                   dense
                   align="left"
-                  class="metric-group-tabs shrink-0 bg-surface-panel border-b border-solid border-(--o2-border-color)"
+                  class="px-page-edge shrink-0 bg-surface-panel border-b border-solid border-card-glass-border"
                 >
                   <OTab
                     v-for="group in groupedUniqueMetricStreams.groups.filter(
@@ -342,23 +342,23 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     )"
                     :key="group.id"
                     :name="group.id"
-                    class="flex-none!"
                   >
-                    <div class="flex items-center gap-1 px-1">
+                    <div class="flex items-center gap-1">
                       <OIcon v-if="typeof group.icon === 'string'" :name="group.icon" size="xs" />
                       <component v-else :is="group.icon" />
                       <span>{{ group.label }}</span>
                       <OTag
                         type="tabChip"
                         :value="activeMetricGroupTab === group.id ? 'active' : 'inactive'"
-                        class="ml-0.5"
+                        class="ml-1"
+                        :class="{ 'opacity-40': (groupedSelectedMetricStreams.byGroup[group.id]?.length ?? 0) === 0 }"
                       >{{ groupedSelectedMetricStreams.byGroup[group.id]?.length ?? 0 }}</OTag>
                     </div>
                   </OTab>
                 </OTabs>
 
                 <!-- Dashboard content -->
-                <div class="flex-1 overflow-auto">
+                <div class="flex-1 min-h-0 overflow-auto">
                   <div
                     v-if="loading"
                     class="flex flex-col items-center justify-center h-full py-20 gap-3"
@@ -502,7 +502,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           >
             <!-- Header -->
             <div
-              class="p-3 border-b border-solid border-(--o2-border-color) bg-surface-panel"
+              class="p-3 border-b border-solid border-card-glass-border bg-surface-panel"
             >
               <div class="flex items-center gap-3">
                 <OIcon name="hub" size="md" />
@@ -510,7 +510,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   <span class="text-sm font-semibold">{{
                     t("correlation.dimensionBasedCorrelation")
                   }}</span>
-                  <span class="text-xs text-gray-500">{{
+                  <span class="text-xs text-text-secondary">{{
                     t("correlation.tracesFromService", { service: serviceName })
                   }}</span>
                 </div>
@@ -548,7 +548,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- No Traces Found State -->
           <div
             v-else-if="traceCorrelationMode !== null"
-            class="min-h-[20rem]"
+            class="min-h-80"
           >
             <OEmptyState
               size="hero"
@@ -605,16 +605,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     <!-- Tab Panels (no tabs in embedded mode, controlled by parent) -->
     <OCard
-      class="flex flex-col flex-1 min-h-0 overflow-auto"
+      :class="['flex flex-col flex-1 min-h-0', activeTab === 'metrics' ? 'overflow-hidden' : 'overflow-auto']"
     >
       <div
         v-if="activeTab == 'logs'"
-        style="display: flex; flex-direction: column; flex: 1; min-height: 0"
+        class="flex flex-col flex-1 min-h-0"
       >
           <!-- Refresh Button (embedded mode) -->
           <div
             v-if="logsDashboardData"
-            class="p-2 border-b border-solid border-[var(--o2-border-color)] flex justify-end"
+            class="p-2 border-b border-solid border-card-glass-border flex justify-end"
           >
             <OButton
               variant="ghost"
@@ -630,8 +630,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- Loading State -->
         <div
           v-if="loading"
-          class="flex flex-col items-center justify-center gap-3"
-          style="flex: 1; min-height: 300px"
+          class="flex flex-col items-center justify-center gap-3 flex-1"
+          style="min-height: 300px"
         >
           <OSpinner size="sm" />
           <div class="text-sm opacity-70">
@@ -668,10 +668,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         v-if="activeTab == 'metrics'"
         class="h-full flex flex-col overflow-hidden min-h-0 metrics-correlation-dashboard"
       >
-        <!-- Two-column body: sidebar + charts (q-splitter matching TracesAnalysisDashboard style) -->
+        <!-- Two-column body: sidebar + charts (splitter matching TracesAnalysisDashboard style) -->
         <OSplitter
           v-model="splitterModel"
-          class="flex-1 min-h-0 full-height w-full"
+          class="flex-1 min-h-0 h-full max-h-full overflow-hidden w-full"
         >
           <!-- -- Left sidebar -- -->
           <template #before>
@@ -679,7 +679,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               class="h-full min-h-0 flex flex-col bg-surface-overlay"
             >
             <div
-              class="dimension-sidebar-search-container p-[0.625rem] border-b border-solid border-[var(--o2-border-color)]"
+              class="dimension-sidebar-search-container p-2.5 border-b border-solid border-card-glass-border"
             >
               <OSearchInput
                 v-model="metricSearchText"
@@ -690,7 +690,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
               <!-- Grouped metric list -->
               <div
-                class="dimension-list-container flex-1 min-h-0 overflow-y-auto px-[0.325rem]"
+                class="dimension-list-container flex-1 min-h-0 overflow-y-auto"
                 style="max-height: calc(100vh - 210px)"
               >
                 <template
@@ -706,10 +706,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   >
                     <template v-if="group.streams.length > 0">
                       <div
-                        class="flex items-center justify-between py-1.5 px-2 bg-(--o2-section-header-bg) border-b border-solid border-(--o2-border) sticky top-0 z-10 cursor-pointer"
+                        class="flex items-center justify-between py-1.5 px-2 bg-section-header-bg border-b border-solid border-border-default sticky top-0 z-10 cursor-pointer"
                         @click="toggleGroupCollapse(group.id)"
                       >
-                        <div class="flex items-center gap-[0.375rem] text-[0.6875rem] font-bold uppercase tracking-[0.05em] opacity-75">
+                        <div class="flex items-center gap-1.5 text-2xs font-bold uppercase tracking-[0.05em] opacity-75">
                           <OIcon
                             :name="
                               collapsedGroups.has(group.id)
@@ -767,7 +767,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         </div>
                         <div class="flex flex-col flex-1 min-w-0">
                           <span
-                            class="truncate cursor-pointer text-[var(--o2-text-2)]! text-sm"
+                            class="truncate cursor-pointer text-text-secondary! text-sm"
                             >{{ stream.stream_name }}</span
                           >
                         </div>
@@ -786,7 +786,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
               <!-- Footer: selected count -->
               <div
-                class="p-3 border-t border-solid border-[var(--o2-border-color)] o2-table-footer-title"
+                class="p-3 border-t border-solid border-card-glass-border text-xs font-normal"
               >
                 {{ selectedMetricStreams.length }} of
                 {{ uniqueMetricStreams.length }} selected
@@ -796,7 +796,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
           <!-- -- Separator -- -->
           <template #separator>
-            <div class="w-px h-full bg-(--o2-border) cursor-col-resize dark:bg-[rgba(255,255,255,0.12)]" />
+            <div class="w-px h-full bg-border-default cursor-col-resize dark:bg-[rgba(255,255,255,0.12)]" />
           </template>
 
           <!-- -- Right area: group tabs + dashboard -- -->
@@ -808,23 +808,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 v-model="activeOuterTab"
                 dense
                 align="left"
-                class="metric-group-tabs border-b border-solid border-[var(--o2-border-color)]"
+                class="shrink-0 border-b border-solid border-card-glass-border"
               >
                 <OTab
                   v-for="outerGroup in groupDefs"
                   :key="outerGroup.id"
                   :name="outerGroup.id"
-                  class="flex-none!"
                 >
-                  <div class="flex flex-col items-start px-1 py-0.5 min-w-0">
+                  <div class="flex flex-col items-start min-w-0">
                     <div class="flex items-center gap-1">
                       <OIcon v-if="typeof outerGroup.icon === 'string'" :name="outerGroup.icon" size="xs" />
                       <component v-else :is="outerGroup.icon" />
-                      <span class="whitespace-nowrap">{{ outerGroup.label }}</span>
+                      <span class="whitespace-nowrap text-xs">{{ outerGroup.label }}</span>
                     </div>
                     <span
                       v-if="outerTabResourceName[outerGroup.id]"
-                      class="text-xs leading-tight opacity-75 whitespace-nowrap"
+                      class="text-xs leading-tight opacity-75 truncate max-w-40"
                       :title="outerTabResourceName[outerGroup.id]"
                     >{{ outerTabResourceName[outerGroup.id] }}</span>
                   </div>
@@ -837,7 +836,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 v-model="activeMetricGroupTab"
                 dense
                 align="left"
-                class="metric-group-tabs shrink-0 bg-surface-panel border-b border-solid border-(--o2-border-color)"
+                class="shrink-0 bg-surface-panel border-b border-solid border-card-glass-border"
               >
                 <OTab
                   v-for="group in groupedUniqueMetricStreams.groups.filter(
@@ -845,9 +844,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   )"
                   :key="group.id"
                   :name="group.id"
-                  class="flex-none!"
                 >
-                  <div class="flex items-center gap-1 px-1">
+                  <div class="flex items-center gap-1">
                     <component
                       v-if="typeof group.icon !== 'string'"
                       :is="group.icon"
@@ -861,14 +859,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <OTag
                       type="tabChip"
                       :value="activeMetricGroupTab === group.id ? 'active' : 'inactive'"
-                      class="ml-0.5"
+                      class="ml-1"
+                      :class="{ 'opacity-40': (groupedSelectedMetricStreams.byGroup[group.id]?.length ?? 0) === 0 }"
                     >{{ groupedSelectedMetricStreams.byGroup[group.id]?.length ?? 0 }}</OTag>
                   </div>
                 </OTab>
               </OTabs>
 
               <!-- Dashboard content -->
-              <div class="flex-1 overflow-auto">
+              <div class="flex-1 min-h-0 overflow-auto">
                 <div
                   v-if="loading"
                   class="flex flex-col items-center justify-center h-full py-20 gap-3"
@@ -915,7 +914,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 />
                 <div
                   v-else
-                  class="flex flex-col items-center justify-center h-[calc(100vh-7.5rem)] py-20"
+                  class="flex flex-col items-center justify-center h-full py-20"
                 >
                   <div
                     class="text-base font-medium mb-2 opacity-90"
@@ -936,7 +935,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- Loading State -->
         <div
           v-if="tracesLoading"
-          class="flex flex-col items-center justify-center h-[calc(100vh-272px)] py-20"
+          class="flex flex-col items-center justify-center h-full py-20"
         >
           <OSpinner size="xl" class="mb-4" />
           <div class="text-base">{{ t("correlation.loadingTraces") }}</div>
@@ -953,7 +952,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <div class="text-base mb-2">
             {{ t("correlation.tracesError") }}
           </div>
-          <div class="text-sm text-gray-500">{{ tracesError }}</div>
+          <div class="text-sm text-text-secondary">{{ tracesError }}</div>
           <OButton
             variant="outline"
             size="sm-action"
@@ -1005,7 +1004,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         >
           <!-- Header -->
           <div
-            class="p-3 border-b border-solid border-(--o2-border-color) bg-surface-panel"
+            class="p-3 border-b border-solid border-card-glass-border bg-surface-panel"
           >
             <div class="flex items-center gap-3">
               <OIcon name="hub" size="md" />
@@ -1013,7 +1012,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <span class="text-sm font-semibold">{{
                   t("correlation.dimensionBasedCorrelation")
                 }}</span>
-                <span class="text-xs text-gray-500">{{
+                <span class="text-xs text-text-secondary">{{
                   t("correlation.tracesFromService", { service: serviceName })
                 }}</span>
               </div>
@@ -1051,7 +1050,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- No Traces Found State -->
         <div
           v-else-if="traceCorrelationMode !== null"
-          class="h-[calc(100vh-7.5rem)]"
+          class="h-full"
         >
           <OEmptyState
             size="hero"
@@ -1073,7 +1072,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <div class="text-base">
             {{ t("correlation.correlatedTraces") }}
           </div>
-          <div class="text-sm text-gray-500 mt-2">
+          <div class="text-sm text-text-secondary mt-2">
             {{ t("correlation.correlatedTracesFor", { service: serviceName }) }}
           </div>
         </div>
@@ -1106,8 +1105,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- Group section — hidden when no streams match -->
           <template v-if="group.streams.length > 0">
             <!-- Group header -->
-            <div class="flex items-center justify-between py-1.5 px-2 bg-(--o2-section-header-bg) border-b border-solid border-(--o2-border) sticky top-0 z-10">
-              <div class="flex items-center gap-[0.375rem] text-[0.6875rem] font-bold uppercase tracking-[0.05em] opacity-75">
+            <div class="flex items-center justify-between py-1.5 px-2 bg-section-header-bg border-b border-solid border-border-default sticky top-0 z-10">
+              <div class="flex items-center gap-1.5 text-2xs font-bold uppercase tracking-[0.05em] opacity-75">
                 <OIcon v-if="typeof group.icon === 'string'" :name="group.icon" size="xs" class="mr-0.5" />
                 <component v-else :is="group.icon" />
                 <span>{{ group.label }}</span>
@@ -1140,7 +1139,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <div
               v-for="stream in group.streams"
               :key="stream.stream_name"
-              class="flex items-center gap-2 py-2 px-4 border-b border-solid border-[var(--o2-border)] hover:bg-[rgba(0,0,0,0.04)] dark:border-[rgba(255,255,255,0.1)] dark:hover:bg-[rgba(255,255,255,0.05)]"
+              class="flex items-center gap-2 py-2 px-4 border-b border-solid border-border-default hover:bg-[rgba(0,0,0,0.04)] dark:border-[rgba(255,255,255,0.1)] dark:hover:bg-[rgba(255,255,255,0.05)]"
             >
               <div class="flex items-center shrink-0">
                 <OCheckbox
@@ -1154,7 +1153,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 />
               </div>
               <div class="flex flex-col flex-1 min-w-0">
-                <span class="text-sm font-[monospace]">{{ stream.stream_name }}</span>
+                <span class="text-sm font-mono">{{ stream.stream_name }}</span>
               </div>
             </div>
           </template>
@@ -3446,20 +3445,12 @@ watch(
 );
 </script>
 
-<style>
-.telemetry-correlation-traces .trace-details-content {
+<style scoped>
+/* keep(lib-override:o2-traces-tabs): reach child TraceDetails and O2 tab internals via :deep */
+.telemetry-correlation-traces :deep(.trace-details-content) {
   padding: 0 !important;
 }
-.telemetry-correlation-traces .trace-combined-header-wrapper {
+.telemetry-correlation-traces :deep(.trace-combined-header-wrapper) {
   margin-bottom: 0 !important;
 }
-.metric-group-tabs .o-tab {
-  min-height: 2rem;
-  padding: 0 0.75rem;
-  font-size: 0.8125rem;
-}
-.metric-group-tabs .o-tab__indicator {
-  height: 0.125rem;
-}
-
 </style>
diff --git a/web/src/plugins/correlation/TimeRangeEditor.schema.ts b/web/src/plugins/correlation/TimeRangeEditor.schema.ts
deleted file mode 100644
index e2eda61367..0000000000
--- a/web/src/plugins/correlation/TimeRangeEditor.schema.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// Validation schema for TimeRangeEditor.vue — the module's cross-field refine
-// exemplar. Built via a factory so messages stay i18n-driven (pass `t`).
-//
-// The hand-rolled validateStartTime / validateEndTime are combined into a
-// single superRefine:
-//   • When selectedWindow === "custom", BOTH custom times are required
-//     (`!v` → t("validation.required")), AND start < end
-//     (start: t("correlation.logs.timeRange.startBeforeEnd");
-//      end:   t("correlation.logs.timeRange.endAfterStart")).
-//   • For preset windows the custom times are irrelevant → no rule.
-//
-// `selectedWindow` is form-owned too (it gates the conditional) — a plain string
-// (one of the preset keys or "custom"); it has no per-field rule.
-
-import { z } from "zod";
-
-export const makeTimeRangeEditorSchema = (t: (_key: string) => string) =>
-  z
-    .object({
-      selectedWindow: z.string(),
-      customStartTime: z.string(),
-      customEndTime: z.string(),
-    })
-    .superRefine((val, ctx) => {
-      if (val.selectedWindow !== "custom") return;
-
-      const hasStart = !!val.customStartTime;
-      const hasEnd = !!val.customEndTime;
-
-      if (!hasStart) {
-        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
-          path: ["customStartTime"],
-          message: t("validation.required"),
-        });
-      }
-      if (!hasEnd) {
-        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
-          path: ["customEndTime"],
-          message: t("validation.required"),
-        });
-      }
-
-      // Cross-field: start must be strictly before end. Emit on BOTH paths so
-      // both inline messages light up.
-      if (hasStart && hasEnd) {
-        const start = new Date(val.customStartTime).getTime();
-        const end = new Date(val.customEndTime).getTime();
-        if (!(start < end)) {
-          ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            path: ["customStartTime"],
-            message: t("correlation.logs.timeRange.startBeforeEnd"),
-          });
-          ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            path: ["customEndTime"],
-            message: t("correlation.logs.timeRange.endAfterStart"),
-          });
-        }
-      }
-    });
-
-export type TimeRangeEditorForm = z.infer<
-  ReturnType<typeof makeTimeRangeEditorSchema>
->;
diff --git a/web/src/plugins/correlation/TimeRangeEditor.spec.ts b/web/src/plugins/correlation/TimeRangeEditor.spec.ts
deleted file mode 100644
index 69091726bc..0000000000
--- a/web/src/plugins/correlation/TimeRangeEditor.spec.ts
+++ /dev/null
@@ -1,323 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { mount, flushPromises } from "@vue/test-utils";
-import { createI18n } from "vue-i18n";
-import { nextTick } from "vue";
-import TimeRangeEditor from "./TimeRangeEditor.vue";
-import store from "@/test/unit/helpers/store";
-
-const mockTranslations = {
-  "correlation.logs.timeRange.title": "Edit Time Range",
-  "correlation.logs.timeRange.sourceTime": "Source Log Time",
-  "correlation.logs.timeRange.window": "Time Window",
-  "correlation.logs.timeRange.minute1": "±1 minute",
-  "correlation.logs.timeRange.minute5": "±5 minutes",
-  "correlation.logs.timeRange.minute15": "±15 minutes",
-  "correlation.logs.timeRange.minute30": "±30 minutes",
-  "correlation.logs.timeRange.hour1": "±1 hour",
-  "correlation.logs.timeRange.custom": "Custom",
-  "correlation.logs.timeRange.customStart": "Start Time",
-  "correlation.logs.timeRange.customEnd": "End Time",
-  "correlation.logs.timeRange.currentRange": "Current Range",
-  "correlation.logs.timeRange.start": "Start",
-  "correlation.logs.timeRange.end": "End",
-  "correlation.logs.timeRange.duration": "Duration",
-  "correlation.logs.timeRange.startBeforeEnd": "Start must be before end",
-  "correlation.logs.timeRange.endAfterStart": "End must be after start",
-  "common.close": "Close",
-  "common.cancel": "Cancel",
-  "common.reset": "Reset",
-  "common.apply": "Apply",
-  "validation.required": "Required",
-};
-
-const i18n = createI18n({
-  locale: "en",
-  legacy: false,
-  messages: { en: mockTranslations },
-});
-
-// Stub ONLY the ODialog overlay (renders its slot inline, exposes the
-// click:secondary/neutral + update:open emits we drive). The OForm + OForm*
-// fields stay REAL so the schema cross-field refine is exercised.
-const ODialogStub = {
-  name: "ODialog",
-  props: [
-    "open",
-    "size",
-    "title",
-    "formId",
-    "primaryButtonLabel",
-    "secondaryButtonLabel",
-    "neutralButtonLabel",
-  ],
-  emits: ["update:open", "click:primary", "click:secondary", "click:neutral"],
-  template: `
-    <div data-test="o-dialog-stub" :data-open="String(open)">
-      <slot />
-      <button data-test="o-dialog-stub-secondary" @click="$emit('click:secondary')">Cancel</button>
-      <button data-test="o-dialog-stub-neutral" @click="$emit('click:neutral')">Reset</button>
-    </div>
-  `,
-};
-
-const SOURCE_TIMESTAMP_US = 1704110400000000; // Jan 1, 2024 12:00:00 UTC (µs)
-const FIVE_MIN_US = 5 * 60 * 1000 * 1000;
-
-describe("TimeRangeEditor.vue", () => {
-  let wrapper: any;
-
-  const defaultProps = {
-    modelValue: true,
-    currentRange: {
-      startTime: SOURCE_TIMESTAMP_US - FIVE_MIN_US,
-      endTime: SOURCE_TIMESTAMP_US + FIVE_MIN_US,
-    },
-    sourceTimestamp: SOURCE_TIMESTAMP_US,
-  };
-
-  const createWrapper = (props = {}) =>
-    mount(TimeRangeEditor, {
-      props: { ...defaultProps, ...props },
-      global: {
-        plugins: [i18n, store],
-        stubs: { ODialog: ODialogStub },
-      },
-      attachTo: document.body,
-    });
-
-  const getForm = (w: any) =>
-    (w.findComponent({ name: "OForm" }).vm as any).form;
-
-  const submit = async (w: any) => {
-    await getForm(w).handleSubmit();
-    await flushPromises();
-  };
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  afterEach(() => {
-    if (wrapper) wrapper.unmount();
-  });
-
-  describe("Mounting & wiring", () => {
-    it("mounts and renders the dialog", () => {
-      wrapper = createWrapper();
-      expect(wrapper.exists()).toBe(true);
-      expect(
-        wrapper.find('[data-test="time-range-editor-dialog"]').exists(),
-      ).toBe(true);
-    });
-
-    it("forwards title + button labels + form-id to ODialog", () => {
-      wrapper = createWrapper();
-      const dialog = wrapper.findComponent(ODialogStub);
-      expect(dialog.props("title")).toBe("Edit Time Range");
-      expect(dialog.props("primaryButtonLabel")).toBe("Apply");
-      expect(dialog.props("secondaryButtonLabel")).toBe("Cancel");
-      expect(dialog.props("neutralButtonLabel")).toBe("Reset");
-      expect(dialog.props("formId")).toBe("time-range-editor-form");
-    });
-
-    it("renders the window radio options + preserves data-tests", () => {
-      wrapper = createWrapper();
-      for (const t of [
-        "window-1min",
-        "window-5min",
-        "window-15min",
-        "window-30min",
-        "window-1hour",
-        "window-custom",
-      ]) {
-        expect(wrapper.find(`[data-test="${t}"]`).exists()).toBe(true);
-      }
-    });
-  });
-
-  describe("detect window + preview (seeded from currentRange)", () => {
-    it("seeds 5min when range is ±5 minutes", () => {
-      wrapper = createWrapper();
-      expect(getForm(wrapper).state.values.selectedWindow).toBe("5min");
-      expect(wrapper.vm.pendingStartTime).toBe(
-        defaultProps.currentRange.startTime,
-      );
-      expect(wrapper.vm.pendingEndTime).toBe(defaultProps.currentRange.endTime);
-    });
-
-    it.each([
-      ["1min", 1],
-      ["15min", 15],
-      ["30min", 30],
-      ["1hour", 60],
-    ])("seeds %s for the matching symmetric range", (win, minutes) => {
-      const half = minutes * 60 * 1000 * 1000;
-      wrapper = createWrapper({
-        currentRange: {
-          startTime: SOURCE_TIMESTAMP_US - half,
-          endTime: SOURCE_TIMESTAMP_US + half,
-        },
-      });
-      expect(getForm(wrapper).state.values.selectedWindow).toBe(win);
-    });
-
-    it("falls back to custom for an asymmetric range", () => {
-      wrapper = createWrapper({
-        currentRange: {
-          startTime: SOURCE_TIMESTAMP_US - 1000000,
-          endTime: SOURCE_TIMESTAMP_US + 9999000,
-        },
-      });
-      expect(getForm(wrapper).state.values.selectedWindow).toBe("custom");
-    });
-
-    it("updates the preview when a preset window is chosen", async () => {
-      wrapper = createWrapper();
-      getForm(wrapper).setFieldValue("selectedWindow", "1hour");
-      await nextTick();
-      const oneHour = 60 * 60 * 1000 * 1000;
-      expect(wrapper.vm.pendingStartTime).toBe(SOURCE_TIMESTAMP_US - oneHour);
-      expect(wrapper.vm.pendingEndTime).toBe(SOURCE_TIMESTAMP_US + oneHour);
-    });
-  });
-
-  // ───────────────────────────────────────────────────────────────────────────
-  // Real-OForm cross-field validation (playbook §5 / R22): the superRefine
-  // gates custom mode — both times required AND start < end.
-  describe("OForm schema validation (real form)", () => {
-    it("preset window submits + emits the preview range", async () => {
-      wrapper = createWrapper();
-      await submit(wrapper);
-
-      expect(getForm(wrapper).state.isValid).toBe(true);
-      expect(wrapper.emitted("update:range")?.[0]).toEqual([
-        SOURCE_TIMESTAMP_US - FIVE_MIN_US,
-        SOURCE_TIMESTAMP_US + FIVE_MIN_US,
-      ]);
-      expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([false]);
-    });
-
-    it("custom window with empty times blocks submit", async () => {
-      wrapper = createWrapper();
-      const form = getForm(wrapper);
-      form.setFieldValue("selectedWindow", "custom");
-      form.setFieldValue("customStartTime", "");
-      form.setFieldValue("customEndTime", "");
-      await submit(wrapper);
-
-      expect(form.state.isValid).toBe(false);
-      expect(wrapper.emitted("update:range")).toBeFalsy();
-    });
-
-    it("custom window with start >= end blocks submit (cross-field)", async () => {
-      wrapper = createWrapper();
-      const form = getForm(wrapper);
-      form.setFieldValue("selectedWindow", "custom");
-      form.setFieldValue("customStartTime", "2024-01-01T13:00");
-      form.setFieldValue("customEndTime", "2024-01-01T11:00");
-      await submit(wrapper);
-
-      expect(form.state.isValid).toBe(false);
-      expect(wrapper.emitted("update:range")).toBeFalsy();
-    });
-
-    it("custom window with a valid range submits + emits the custom range", async () => {
-      wrapper = createWrapper();
-      const form = getForm(wrapper);
-      form.setFieldValue("selectedWindow", "custom");
-      form.setFieldValue("customStartTime", "2024-01-01T11:00");
-      form.setFieldValue("customEndTime", "2024-01-01T13:00");
-      await submit(wrapper);
-
-      const startMicros = new Date("2024-01-01T11:00").getTime() * 1000;
-      const endMicros = new Date("2024-01-01T13:00").getTime() * 1000;
-      expect(form.state.isValid).toBe(true);
-      expect(wrapper.emitted("update:range")?.[0]).toEqual([
-        startMicros,
-        endMicros,
-      ]);
-      expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([false]);
-    });
-  });
-
-  describe("reset / cancel / close", () => {
-    it("reset switches back to the ±5 minute preset", async () => {
-      wrapper = createWrapper({
-        currentRange: {
-          startTime: SOURCE_TIMESTAMP_US - 60 * 60 * 1000 * 1000,
-          endTime: SOURCE_TIMESTAMP_US + 60 * 60 * 1000 * 1000,
-        },
-      });
-      expect(getForm(wrapper).state.values.selectedWindow).toBe("1hour");
-
-      const dialog = wrapper.findComponent(ODialogStub);
-      await dialog.vm.$emit("click:neutral");
-      await nextTick();
-
-      expect(getForm(wrapper).state.values.selectedWindow).toBe("5min");
-      expect(wrapper.vm.pendingStartTime).toBe(SOURCE_TIMESTAMP_US - FIVE_MIN_US);
-      expect(wrapper.vm.pendingEndTime).toBe(SOURCE_TIMESTAMP_US + FIVE_MIN_US);
-    });
-
-    it("cancel emits update:modelValue false + close", async () => {
-      wrapper = createWrapper();
-      const dialog = wrapper.findComponent(ODialogStub);
-      await dialog.vm.$emit("click:secondary");
-
-      expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([false]);
-      expect(wrapper.emitted("close")).toBeTruthy();
-      expect(wrapper.emitted("update:range")).toBeFalsy();
-    });
-
-    it("dialog update:open=false forwards modelValue false + close", async () => {
-      wrapper = createWrapper();
-      const dialog = wrapper.findComponent(ODialogStub);
-      await dialog.vm.$emit("update:open", false);
-
-      expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([false]);
-      expect(wrapper.emitted("close")).toBeTruthy();
-    });
-
-    it("dialog update:open=true forwards modelValue true without close", async () => {
-      wrapper = createWrapper({ modelValue: false });
-      const dialog = wrapper.findComponent(ODialogStub);
-      await dialog.vm.$emit("update:open", true);
-
-      expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([true]);
-      expect(wrapper.emitted("close")).toBeFalsy();
-    });
-  });
-
-  describe("currentRange reactivity", () => {
-    it("re-seeds the form when currentRange changes while open", async () => {
-      wrapper = createWrapper();
-      const oneMin = 1 * 60 * 1000 * 1000;
-      await wrapper.setProps({
-        currentRange: {
-          startTime: SOURCE_TIMESTAMP_US - oneMin,
-          endTime: SOURCE_TIMESTAMP_US + oneMin,
-        },
-      });
-      await flushPromises();
-      await nextTick();
-
-      expect(getForm(wrapper).state.values.selectedWindow).toBe("1min");
-      expect(wrapper.vm.pendingStartTime).toBe(SOURCE_TIMESTAMP_US - oneMin);
-    });
-  });
-});
diff --git a/web/src/plugins/correlation/TimeRangeEditor.vue b/web/src/plugins/correlation/TimeRangeEditor.vue
deleted file mode 100644
index dac65c57a2..0000000000
--- a/web/src/plugins/correlation/TimeRangeEditor.vue
+++ /dev/null
@@ -1,376 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <ODialog
-    data-test="time-range-editor-dialog"
-    :open="modelValue"
-    @update:open="
-      (v) => {
-        $emit('update:modelValue', v);
-        if (!v) handleClose();
-      }
-    "
-    size="sm"
-    form-id="time-range-editor-form"
-    :title="t('correlation.logs.timeRange.title')"
-    :secondary-button-label="t('common.cancel')"
-    :neutral-button-label="t('common.reset')"
-    :primary-button-label="t('common.apply')"
-    @click:secondary="handleCancel"
-    @click:neutral="handleReset"
-  >
-    <OForm id="time-range-editor-form" :form="form">
-      <!-- Source Log Time -->
-      <div class="mb-6">
-        <div class="text-sm font-semibold mb-2">
-          {{ t("correlation.logs.timeRange.sourceTime") }}
-        </div>
-        <div
-          class="p-3 border border-solid border-[var(--o2-border-color)] rounded bg-surface-panel flex items-center gap-2"
-        >
-          <OIcon name="schedule" size="sm" />
-          <span class="font-mono text-sm">{{
-            formatTimestamp(sourceTimestamp)
-          }}</span>
-        </div>
-      </div>
-
-      <!-- Time Window Presets -->
-      <div class="mb-6">
-        <div class="text-sm font-semibold mb-3">
-          {{ t("correlation.logs.timeRange.window") }}
-        </div>
-
-        <div class="space-y-2">
-          <OFormRadioGroup name="selectedWindow" orientation="vertical">
-            <ORadio
-              val="1min"
-              :label="t('correlation.logs.timeRange.minute1')"
-              data-test="window-1min"
-            />
-            <ORadio
-              val="5min"
-              :label="t('correlation.logs.timeRange.minute5')"
-              data-test="window-5min"
-            />
-            <ORadio
-              val="15min"
-              :label="t('correlation.logs.timeRange.minute15')"
-              data-test="window-15min"
-            />
-            <ORadio
-              val="30min"
-              :label="t('correlation.logs.timeRange.minute30')"
-              data-test="window-30min"
-            />
-            <ORadio
-              val="1hour"
-              :label="t('correlation.logs.timeRange.hour1')"
-              data-test="window-1hour"
-            />
-            <ORadio
-              val="custom"
-              :label="t('correlation.logs.timeRange.custom')"
-              data-test="window-custom"
-            />
-          </OFormRadioGroup>
-        </div>
-      </div>
-
-      <!-- Custom Time Range Inputs (only shown when custom is selected) -->
-      <div v-if="mSelectedWindow === 'custom'" class="mb-4 space-y-3">
-        <div>
-          <div class="text-sm font-semibold mb-2">
-            {{ t("correlation.logs.timeRange.customStart") }}
-          </div>
-          <OFormInput
-            name="customStartTime"
-            type="datetime-local"
-            data-test="custom-start-input"
-          />
-        </div>
-
-        <div>
-          <div class="text-sm font-semibold mb-2">
-            {{ t("correlation.logs.timeRange.customEnd") }}
-          </div>
-          <OFormInput
-            name="customEndTime"
-            type="datetime-local"
-            data-test="custom-end-input"
-          />
-        </div>
-      </div>
-
-      <!-- Current Range Display -->
-    <div
-      class="p-3 border border-solid border-[var(--o2-border-color)] rounded bg-blue-50"
-    >
-      <div class="text-xs font-semibold mb-2 opacity-70">
-        {{ t("correlation.logs.timeRange.currentRange") }}
-      </div>
-      <div class="flex flex-col gap-1 text-sm">
-        <div class="flex items-center gap-2">
-          <span class="font-semibold"
-            >{{ t("correlation.logs.timeRange.start") }}:</span
-          >
-          <span class="font-mono">{{
-            formatTimestamp(pendingStartTime)
-          }}</span>
-        </div>
-        <div class="flex items-center gap-2">
-          <span class="font-semibold"
-            >{{ t("correlation.logs.timeRange.end") }}:</span
-          >
-          <span class="font-mono">{{
-            formatTimestamp(pendingEndTime)
-          }}</span>
-        </div>
-        <div class="flex items-center gap-2 mt-1">
-          <span class="font-semibold"
-            >{{ t("correlation.logs.timeRange.duration") }}:</span
-          >
-          <span>{{ formatDuration(pendingEndTime - pendingStartTime) }}</span>
-        </div>
-      </div>
-    </div>
-    </OForm>
-  </ODialog>
-</template>
-
-<script setup lang="ts">
-import { computed, watch, nextTick } from "vue";
-import { useI18n } from "vue-i18n";
-import { useStore } from "vuex";
-import { formatDate } from "@/utils/date";
-import { timestampToTimezoneDate } from "@/utils/timezone";
-import ODialog from "@/lib/overlay/Dialog/ODialog.vue";
-import OIcon from "@/lib/core/Icon/OIcon.vue";
-import ORadio from "@/lib/forms/Radio/ORadio.vue";
-import OForm from "@/lib/forms/Form/OForm.vue";
-import { useOForm } from "@/lib/forms/Form/useOForm";
-import OFormInput from "@/lib/forms/Input/OFormInput.vue";
-import OFormRadioGroup from "@/lib/forms/Radio/OFormRadioGroup.vue";
-import {
-  makeTimeRangeEditorSchema,
-  type TimeRangeEditorForm,
-} from "./TimeRangeEditor.schema";
-
-interface Props {
-  modelValue: boolean;
-  currentRange: { startTime: number; endTime: number };
-  sourceTimestamp: number;
-}
-
-// Props & Emits
-const props = defineProps<Props>();
-const emit = defineEmits<{
-  "update:modelValue": [value: boolean];
-  "update:range": [startTime: number, endTime: number];
-  close: [];
-}>();
-
-// Composables
-const { t } = useI18n();
-const store = useStore();
-const timeRangeEditorSchema = makeTimeRangeEditorSchema(t);
-
-// Preset window half-widths (±) in microseconds.
-const WINDOW_MICROS: Record<string, number> = {
-  "1min": 1 * 60 * 1000 * 1000,
-  "5min": 5 * 60 * 1000 * 1000,
-  "15min": 15 * 60 * 1000 * 1000,
-  "30min": 30 * 60 * 1000 * 1000,
-  "1hour": 60 * 60 * 1000 * 1000,
-};
-
-/** Convert a datetime-local string to a microsecond timestamp. */
-const datetimeToMicros = (datetime: string): number =>
-  new Date(datetime).getTime() * 1000;
-
-/** Convert a microsecond timestamp to datetime-local (minute precision). */
-const microsToDatetime = (micros: number): string => {
-  const ms = Math.floor(micros / 1000);
-  return formatDate(ms, "YYYY-MM-DDTHH:mm");
-};
-
-/** Detect the preset window (or "custom") that produced a given range. Pure. */
-const detectWindow = (
-  range: { startTime: number; endTime: number },
-  sourceTimestamp: number,
-): string => {
-  const duration = range.endTime - range.startTime;
-  const center = (range.startTime + range.endTime) / 2;
-  // Symmetric around the source timestamp (within 1 second tolerance)?
-  const isSymmetric = Math.abs(center - sourceTimestamp) < 1000000;
-  if (!isSymmetric) return "custom";
-
-  const durationMinutes = duration / (60 * 1000 * 1000);
-  if (Math.abs(durationMinutes - 2) < 0.1) return "1min"; // ±1 min
-  if (Math.abs(durationMinutes - 10) < 0.1) return "5min"; // ±5 min
-  if (Math.abs(durationMinutes - 30) < 0.1) return "15min"; // ±15 min
-  if (Math.abs(durationMinutes - 60) < 0.1) return "30min"; // ±30 min
-  if (Math.abs(durationMinutes - 120) < 0.1) return "1hour"; // ±1 hour
-  return "custom";
-};
-
-// Dynamic (edit-prefill) defaults → a typed component computed. Seeds the
-// detected window + the custom datetime inputs from the current range.
-const timeRangeEditorDefaults = computed((): TimeRangeEditorForm => ({
-  selectedWindow: detectWindow(props.currentRange, props.sourceTimestamp),
-  customStartTime: microsToDatetime(props.currentRange.startTime),
-  customEndTime: microsToDatetime(props.currentRange.endTime),
-}));
-
-// ── Owner-pattern form (Rule ③) ─────────────────────────────────────────────
-// TimeRangeEditor OWNS the <OForm>, and its template needs form state to drive
-// the custom-inputs v-if + the live "Current Range" preview. We create the form
-// here with useOForm and read it reactively via form.useStore — ONE source of
-// truth (no mirror ref / store.subscribe). Programmatic changes (reset / window)
-// go THROUGH the form; the result is handed to <OForm :form="form">.
-const form = useOForm<TimeRangeEditorForm>({
-  defaultValues: timeRangeEditorDefaults.value,
-  schema: timeRangeEditorSchema,
-  onSubmit: handleApply,
-});
-
-// Reactive read-only views of the form-owned fields (NOT copies). useOForm
-// keeps the form's TFormData generic, so cast the loose reads to the schema's
-// string shape.
-const mSelectedWindow = form.useStore((s) => s.values.selectedWindow as string);
-const mCustomStart = form.useStore((s) => s.values.customStartTime as string);
-const mCustomEnd = form.useStore((s) => s.values.customEndTime as string);
-
-// Live preview range (microseconds), derived from the form-owned values:
-//  • preset window → source ± window;
-//  • custom → the custom datetime inputs (fall back to the current range while
-//    a custom input is still blank).
-const pendingStartTime = computed<number>(() => {
-  if (mSelectedWindow.value === "custom") {
-    return mCustomStart.value
-      ? datetimeToMicros(mCustomStart.value)
-      : props.currentRange.startTime;
-  }
-  return props.sourceTimestamp - (WINDOW_MICROS[mSelectedWindow.value] ?? 0);
-});
-const pendingEndTime = computed<number>(() => {
-  if (mSelectedWindow.value === "custom") {
-    return mCustomEnd.value
-      ? datetimeToMicros(mCustomEnd.value)
-      : props.currentRange.endTime;
-  }
-  return props.sourceTimestamp + (WINDOW_MICROS[mSelectedWindow.value] ?? 0);
-});
-
-/**
- * Format timestamp (microseconds) to human-readable format
- */
-const formatTimestamp = (timestamp: number): string => {
-  const ms = Math.floor(timestamp / 1000);
-  return timestampToTimezoneDate(
-    ms,
-    store.state.timezone || "UTC",
-    "yyyy-MM-dd HH:mm:ss.SSS",
-  );
-};
-
-/**
- * Format duration (microseconds) to human-readable format
- */
-const formatDuration = (durationMicros: number): string => {
-  const durationMs = durationMicros / 1000;
-  const durationSeconds = durationMs / 1000;
-
-  if (durationSeconds < 60) {
-    return `${Math.round(durationSeconds)} seconds`;
-  } else if (durationSeconds < 3600) {
-    const minutes = Math.floor(durationSeconds / 60);
-    const seconds = Math.round(durationSeconds % 60);
-    return seconds > 0 ? `${minutes} min ${seconds} sec` : `${minutes} minutes`;
-  } else {
-    const hours = Math.floor(durationSeconds / 3600);
-    const minutes = Math.floor((durationSeconds % 3600) / 60);
-    return minutes > 0 ? `${hours} hour ${minutes} min` : `${hours} hours`;
-  }
-};
-
-// Re-seed the form to the current range. `:default-values` is read once at
-// mount, so re-seed explicitly on open + when currentRange changes while open.
-const reseedForm = async () => {
-  await nextTick();
-  form.reset(timeRangeEditorDefaults.value);
-};
-
-/**
- * Apply handler — @submit fires only when the schema passes (custom → both
- * times present + start < end; presets always pass), so no manual gating.
- */
-// Declared as a hoisted function so useOForm (above) can reference it.
-function handleApply(value: TimeRangeEditorForm) {
-  if (value.selectedWindow === "custom") {
-    emit(
-      "update:range",
-      datetimeToMicros(value.customStartTime),
-      datetimeToMicros(value.customEndTime),
-    );
-  } else {
-    emit("update:range", pendingStartTime.value, pendingEndTime.value);
-  }
-  emit("update:modelValue", false);
-}
-
-/**
- * Handle cancel button click
- */
-const handleCancel = () => {
-  emit("update:modelValue", false);
-  emit("close");
-};
-
-/**
- * Handle reset button click — reset to the ±5 minute preset (through the form).
- */
-const handleReset = () => {
-  form.setFieldValue("selectedWindow", "5min");
-};
-
-/**
- * Handle dialog close
- */
-const handleClose = () => {
-  emit("close");
-};
-
-// Re-seed when the range changes while the dialog is open.
-watch(
-  () => props.currentRange,
-  () => {
-    if (props.modelValue) reseedForm();
-  },
-  { deep: true },
-);
-
-// On open, re-seed the form from the current range (covers overlays that keep
-// the body mounted; a fresh remount also re-reads :default-values).
-watch(
-  () => props.modelValue,
-  (isOpen) => {
-    if (isOpen) reseedForm();
-  },
-);
-</script>
-
diff --git a/web/src/plugins/logs/DetailTable.spec.ts b/web/src/plugins/logs/DetailTable.spec.ts
index bb09346bc3..3ec9f2a1ee 100644
--- a/web/src/plugins/logs/DetailTable.spec.ts
+++ b/web/src/plugins/logs/DetailTable.spec.ts
@@ -147,25 +147,25 @@ describe("DetailTable Component", () => {
         plugins: [i18n, router],
         stubs: {
           'OTabs': {
-            template: '<div class="q-tabs"><slot /></div>',
+            template: '<div><slot /></div>',
             props: ['modelValue'],
             emits: ['update:modelValue']
           },
           'OTab': {
-            template: '<div class="q-tab" :data-test="$attrs[\'data-test\']" @click="$emit(\'click\')"><slot /></div>',
+            template: '<div :data-test="$attrs[\'data-test\']" @click="$emit(\'click\')"><slot /></div>',
             props: ['name', 'label'],
             emits: ['click']
           },
           'OTabPanels': {
-            template: '<div class="q-tab-panels" :data-test="$attrs[\'data-test\']"><slot /></div>',
+            template: '<div :data-test="$attrs[\'data-test\']"><slot /></div>',
             props: ['modelValue']
           },
           'OTabPanel': {
-            template: '<div class="q-tab-panel"><slot /></div>',
+            template: '<div><slot /></div>',
             props: ['name']
           },
           'OSwitch': {
-            template: '<div class="q-toggle" :data-test="$attrs[\'data-test\']" @click="toggle"><slot /></div>',
+            template: '<div :data-test="$attrs[\'data-test\']" @click="toggle"><slot /></div>',
             props: ['modelValue', 'label'],
             methods: {
               toggle() {
@@ -311,7 +311,7 @@ describe("DetailTable Component", () => {
     expect(wrapper.vm.tab).toBe("json");
     const jsonTab = wrapper.find('[data-test="log-detail-json-tab"]');
     expect(jsonTab.exists()).toBe(true);
-    // OTab uses Tailwind classes for active state, not q-tab--active
+    // OTab uses Tailwind classes for active state
   });
 
   it("should switch to table tab when clicked", async () => {
diff --git a/web/src/plugins/logs/DetailTable.vue b/web/src/plugins/logs/DetailTable.vue
index ecfdaa4aea..215cebf399 100644
--- a/web/src/plugins/logs/DetailTable.vue
+++ b/web/src/plugins/logs/DetailTable.vue
@@ -20,7 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     data-test="dialog-box"
   >
     <!-- Single Tab Row -->
-    <div class="flex justify-between pt-2 items-center">
+    <div class="flex justify-between items-center shrink-0">
       <div class="flex items-center gap-2 -mb-0.75">
         <OTabs v-model="tab" align="left">
           <OTab
@@ -74,7 +74,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     <div
       :class="[
-        'flex flex-col h-full',
+        'flex flex-col flex-1 min-h-0',
         tab.startsWith('correlated-') ? 'overflow-hidden full-height-panels' : 'overflow-y-auto',
       ]"
     >
@@ -83,12 +83,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       v-model="tab"
       keep-alive
       grow
-      class="overflow-y-auto!"
+      :class="tab.startsWith('correlated-') ? 'overflow-hidden!' : 'overflow-y-auto!'"
     >
       <OTabPanel name="json">
         <OCardSection
           data-test="log-detail-json-content"
-          class="p-0 mb-6 pt-2"
+          class="px-page-edge pt-2 mb-6"
         >
           <json-preview
             :value="rowData"
@@ -109,10 +109,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </OTabPanel>
       <OTabPanel name="table">
         <OCardSection
-          class="p-[0.675rem] mb-6"
+          class="px-page-edge py-[0.675rem] mb-6"
           data-test="log-detail-table-content"
         >
-          <div v-if="rowData.length == 0" class="pt-3 max-w-[350px]">
+          <div v-if="rowData.length == 0" class="pt-3 max-w-87.5">
             {{ t('logs.detailTable.noDataAvailable') }}
           </div>
           <OTable
@@ -123,18 +123,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             row-key="_rowKey"
             pagination="none"
             :default-columns="false"
-            class="o2-table o2-row-md o2-schema-table log-detail-source-table w-full border border-solid border-[var(--o2-border-color)]"
-            :class="store.state.theme === 'dark' && 'dark'"
+            class="o2-table o2-row-md o2-schema-table log-detail-source-table w-full border border-solid border-card-glass-border"
           >
             <template #cell-field="{ row, value }">
               <div
                 :data-test="`log-detail-${value}-key`"
-                class="text-left"
-                :class="
-                  store.state.theme == 'dark'
-                    ? 'text-[#f67a7aff]'
-                    : 'text-[#B71C1C]'
-                "
+                class="text-left text-status-error-text"
               >
                 {{ value }}
               </div>
@@ -149,7 +143,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         :data-test="`log-details-include-exclude-field-btn-${row.field}`"
                         size="icon-xs"
                         variant="ghost"
-                        class="log-json-field-dropdown-btn"
+                        class="h-5! w-5! min-h-5! min-w-5! p-0! align-middle"
                         :aria-label="t('logs.detailTable.addIcon')"
                       >
                         <OIcon :name="tableDropdownOpenMap[row.field] ? 'arrow-drop-up' : 'arrow-drop-down'" size="sm" />
@@ -235,7 +229,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </ODropdown>
                   <pre
                     :data-test="`log-detail-${row.field}-value`"
-                    class="table-pre flex-1 min-w-0"
+                    class="wrap-break-word inline font-normal font-mono m-0 p-0 flex-1 min-w-0"
                     :class="
                       !shouldWrapValues
                         ? 'whitespace-nowrap overflow-hidden text-ellipsis'
@@ -280,7 +274,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :hide-search-term-actions="false"
           :hide-dimension-filters="true"
           :hide-reset-filters-button="true"
-          class="pr-3!"
           @sendToAiChat="sendToAiChat"
           @addSearchTerm="addSearchTerm"
         />
@@ -293,11 +286,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <OSpinner v-if="correlationLoading" size="lg" class="mb-4" data-test="logs-correlation-loading-indicator" />
             <div
               v-else-if="correlationError"
-              class="text-base text-red-500"
+              class="text-base text-status-error-text"
             >
               {{ correlationError }}
             </div>
-            <div v-else class="text-base text-gray-500">
+            <div v-else class="text-base text-text-muted">
               {{ t("correlation.clickToLoadLogs") }}
             </div>
           </div>
@@ -331,8 +324,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <div v-else class="flex items-center justify-center h-full py-20">
           <div class="text-center">
             <OSpinner v-if="correlationLoading" size="lg" class="mb-4" data-test="logs-correlation-loading-indicator" />
-            <div v-else-if="correlationError" class="text-base text-red-500">{{ correlationError }}</div>
-            <div v-else class="text-base text-gray-500">{{ t('correlation.clickToLoadMetrics') }}</div>
+            <div v-else-if="correlationError" class="text-base text-status-error-text">{{ correlationError }}</div>
+            <div v-else class="text-base text-text-muted">{{ t('correlation.clickToLoadMetrics') }}</div>
           </div>
         </div>
       </OTabPanel>
@@ -364,8 +357,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <div v-else class="flex items-center justify-center h-full py-20">
           <div class="text-center">
             <OSpinner v-if="correlationLoading" size="lg" class="mb-4" data-test="logs-correlation-loading-indicator" />
-            <div v-else-if="correlationError" class="text-base text-red-500">{{ correlationError }}</div>
-            <div v-else class="text-base text-gray-500">{{ t('correlation.clickToLoadTraces') }}</div>
+            <div v-else-if="correlationError" class="text-base text-status-error-text">{{ correlationError }}</div>
+            <div v-else class="text-base text-text-muted">{{ t('correlation.clickToLoadTraces') }}</div>
           </div>
         </div>
       </OTabPanel>
@@ -374,7 +367,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     <!-- Navigation buttons for log details (show only on JSON/Table tabs) -->
     <OSeparator v-if="tab === 'json' || tab === 'table'" />
-    <OCardSection v-if="tab === 'json' || tab === 'table'" class="p-4 pb-4 sticky bottom-0 bg-dialog-bg z-10">
+    <OCardSection v-if="tab === 'json' || tab === 'table'" class="px-page-edge py-4 sticky bottom-0 bg-dialog-bg z-10">
       <div class="flex items-center flex-nowrap justify-between">
         <div class="w-1/12">
           <OButton
@@ -431,6 +424,7 @@ import { defineComponent, ref, reactive, onBeforeMount, computed, watch } from "
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
 import { useStore } from "vuex";
+import { useTheme } from "@/composables/useTheme";
 import { getImageURL } from "../../utils/zincutils";
 import EqualIcon from "@/components/icons/EqualIcon.vue";
 import NotEqualIcon from "@/components/icons/NotEqualIcon.vue";
@@ -551,6 +545,7 @@ export default defineComponent({
     const rowData: any = ref({});
     const router = useRouter();
     const store = useStore();
+    const { isDark } = useTheme();
     const tableDropdownOpenMap = reactive<Record<string, boolean>>({});
     const tab = ref(props.initialTab || "json");
     const selectedRelativeValue = ref<number>(10);
@@ -805,14 +800,14 @@ export default defineComponent({
     };
 
     const getBtnLogo = computed(() => {
-      return store.state.theme === "dark"
+      return isDark.value
         ? getImageURL("images/common/ai_icon_dark.svg")
         : getImageURL("images/common/ai_icon_gradient.svg");
     });
 
     const regexIcon = computed(() => {
       return getImageURL(
-        store.state.theme == "dark"
+        isDark.value
           ? "images/regex_pattern/regex_icon_dark.svg"
           : "images/regex_pattern/regex_icon_light.svg",
       );
@@ -916,11 +911,57 @@ export default defineComponent({
 });
 </script>
 
-<style>
-.full-height-panels .o-tab-panel {
+<style scoped>
+/* keep(complex-state): :deep override of the child tab component's panel to fill height */
+.full-height-panels :deep(.o-tab-panel) {
   flex: 1;
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }
+
+.searchdetaildialog {
+  width: 85vw;
+}
+
+/* keep(lib-override:oselect): reaches into the OSelect-rendered button to size
+   the records-per-page control. */
+.select-noof-records {
+  width: 5rem;
+}
+
+.select-noof-records :deep(button[type="button"]) {
+  height: 2.25rem;
+}
+
+/* keep(lib-override:otable): reaches into the OTable-rendered th/td DOM to
+   compress the source table and pin its header; the !important is load-bearing
+   against OTable's own row sizing. */
+.o2-schema-table :deep(th),
+.o2-schema-table :deep(td) {
+  height: 0.875rem !important;
+  min-height: 0.875rem !important;
+  padding: 0.125rem 0.1875rem !important;
+}
+
+.o2-schema-table :deep(thead) {
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+}
+
+.o2-schema-table :deep(thead th),
+.o2-schema-table :deep(tbody td) {
+  border-right: 1px solid var(--color-card-glass-border);
+  border-bottom: 1px solid var(--color-card-glass-border);
+}
+
+.o2-schema-table :deep(thead th:last-child),
+.o2-schema-table :deep(tbody td:last-child) {
+  border-right: none;
+}
+
+.o2-schema-table :deep(tbody tr:last-child td) {
+  border-bottom: none;
+}
 </style>
diff --git a/web/src/plugins/logs/FunctionSelector.spec.ts b/web/src/plugins/logs/FunctionSelector.spec.ts
index b9fd676ce9..789e38f4f2 100644
--- a/web/src/plugins/logs/FunctionSelector.spec.ts
+++ b/web/src/plugins/logs/FunctionSelector.spec.ts
@@ -58,22 +58,6 @@ describe("FunctionSelector", () => {
       global: {
         plugins: [i18n, store],
         stubs: {
-          "q-toggle": {
-            template: '<button class="q-toggle" @click="$emit(\'update:modelValue\', !modelValue)" :data-test="$attrs[\'data-test\']"><slot /></button>',
-            props: ["modelValue"],
-          },
-          "q-btn-group": {
-            template: '<div class="q-btn-group" :class="{ disabled: disable }"><slot /></div>',
-            props: ["disable"],
-          },
-          "q-btn-dropdown": {
-            template: '<div class="q-btn-dropdown" :data-test="$attrs[\'data-test\']" @click="$emit(\'click\')"><slot /></div>',
-            props: ["modelValue", "size", "icon", "iconRight", "title", "split"],
-          },
-          "q-btn": {
-            template: '<button class="q-btn" :data-test="$attrs[\'data-test\']" @click="$emit(\'click\')"><slot /></button>',
-            props: ["icon", "class"],
-          },
           ODropdown: {
             name: "ODropdown",
             template: '<div class="o-dropdown-stub" v-bind="$attrs"><slot name="trigger" /><slot /></div>',
@@ -85,17 +69,6 @@ describe("FunctionSelector", () => {
             template: '<div class="o-dropdown-item-stub" v-bind="$attrs" @click="$emit(\'select\')"><slot /></div>',
             emits: ["select"],
           },
-          "q-tooltip": {
-            template: '<div class="q-tooltip"><slot /></div>',
-            props: ["class", "offset", "delay"],
-          },
-          "q-list": {
-            template: '<div class="q-list" :data-test="$attrs[\'data-test\']"><slot /></div>',
-          },
-          "q-input": {
-            template: '<input class="q-input" v-model="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" :data-test="$attrs[\'data-test\']" />',
-            props: ["modelValue", "dense", "filled", "borderless", "clearable", "debounce", "placeholder"],
-          },
           // OInput stub mirrors the real component's wrapper-div + inner-<input>
           // shape, so tests can keep using data-test on the wrapper but drill
           // into `wrapper.find('input')` for value mutation.
@@ -111,16 +84,6 @@ describe("FunctionSelector", () => {
             template: '<span class="OIcon" :name="name"></span>',
             props: ["name"],
           },
-          "q-item": {
-            template: '<div class="q-item" @click="$emit(\'click\')" v-close-popup><slot /></div>',
-            props: ["clickable"],
-          },
-          "q-item-section": {
-            template: '<div class="q-item-section" @click="$emit(\'click\')"><slot /></div>',
-          },
-          "q-item-label": {
-            template: '<div class="q-item-label"><slot /></div>',
-          },
         },
         directives: {
           "close-popup": {},
@@ -220,7 +183,7 @@ describe("FunctionSelector", () => {
     if (nativeInput.exists()) {
       await nativeInput.setValue("test");
     } else {
-      // Fallback for old q-input stub path which exposes the wrapper as the input.
+      // Fallback for legacy stub path which exposes the wrapper as the input.
       await searchWrapper.setValue("test");
     }
     expect(wrapper.vm.searchTerm).toBe("test");
diff --git a/web/src/plugins/logs/FunctionSelector.vue b/web/src/plugins/logs/FunctionSelector.vue
index baa36ac4e1..effa1c7597 100644
--- a/web/src/plugins/logs/FunctionSelector.vue
+++ b/web/src/plugins/logs/FunctionSelector.vue
@@ -15,7 +15,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
   <OButtonGroup
-    :class="store.state.theme === 'dark' ? 'dark-theme' : ''"
     class="p-0 float-left mr-1 function-selector element-box-shadow border border-button-outline-border"
   >
     <div v-if="!hideToggle" class="flex items-center px-1">
@@ -56,7 +55,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             v-for="(item, i) in filteredFunctionOptions"
             :key="'saved-view-' + i"
             :data-test="`logs-search-saved-function-${item.name}`"
-            class="saved-view-item border-b border-(--o2-border-color) rounded-none last:border-none"
+            class="saved-view-item border-b border-card-glass-border rounded-none last:border-none"
             @select="applyFunction(item, true)"
           >
             {{ item.name }}
@@ -99,6 +98,7 @@ import { useI18n } from "vue-i18n";
 import { searchState } from "@/composables/useLogs/searchState";
 import { getImageURL } from "@/utils/zincutils";
 import { useStore } from "vuex";
+import { useTheme } from "@/composables/useTheme";
 const props = withDefaults(defineProps<{
   functionOptions: { name: string; function: string }[];
   hideToggle?: boolean;
@@ -113,11 +113,12 @@ const { t } = useI18n();
 const { searchObj } = searchState();
 
 const store = useStore();
+  const { isDark } = useTheme();
 
 const functionToggleIcon = computed(() => {
   return (
     "img:" +
-    (store.state.theme == "dark"
+    (isDark.value
       ? getImageURL("images/common/function_dark.svg")
       : getImageURL("images/common/function.svg"))
   );
@@ -127,7 +128,7 @@ const iconRight = computed(() => {
   return (
     "img:" +
     getImageURL(
-      store.state.theme === "dark"
+      isDark.value
         ? "images/common/function_dark.svg"
         : "images/common/function.svg",
     )
@@ -167,3 +168,12 @@ const applyFunction = (
 };
 </script>
 
+<style scoped>
+/* keep(lib-override:obuttongroup): rounds OButtonGroup's own root, which this
+   component only receives as a class — not settable from the template without
+   losing to the group's internal radius. */
+.function-selector {
+  border-radius: 0.375rem;
+}
+</style>
+
diff --git a/web/src/plugins/logs/Index.vue b/web/src/plugins/logs/Index.vue
index 58ebb508db..7fe47599a3 100644
--- a/web/src/plugins/logs/Index.vue
+++ b/web/src/plugins/logs/Index.vue
@@ -1,4 +1,4 @@
-<!-- Copyright 2026 OpenObserve Inc.
+<!-- Copyright 2026 OpenObserve Inc.
 
 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU Affero General Public License as published by
@@ -17,14 +17,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <!-- eslint-disable vue/attribute-hyphenation -->
 <!-- eslint-disable vue/v-on-event-hyphenation -->
 <template>
-  <div class="rounded-md h-full min-h-full! max-h-full! overflow-hidden! logPage" id="logPage" data-test="logs-page-container">
+  <div class="rounded-default h-full min-h-full! max-h-full! overflow-hidden! logPage" id="logPage" data-test="logs-page-container">
     <div
       v-show="!showSearchHistory && !showSearchScheduler"
       id="secondLevel"
-      class="full-height"
+      class="h-full max-h-full overflow-hidden"
     >
       <OSplitter
-        class="full-height"
+        class="h-full max-h-full overflow-hidden"
         v-model="splitterModel"
         :horizontal="true"
         unit="px"
@@ -60,7 +60,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <template v-slot:after>
           <div
             id="thirdLevel"
-            class="flex scroll relative-position thirdlevel full-height overflow-hidden logsPageMainSection w-full border-t border-border-default"
+            class="flex scroll relative-position thirdlevel h-full max-h-full overflow-hidden p-0 m-0 box-border logsPageMainSection w-full border-t border-border-default"
             v-show="
               searchObj.meta.logsVisualizeToggle == 'logs' ||
               searchObj.meta.logsVisualizeToggle == 'patterns'
@@ -70,17 +70,23 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <OSplitter
               v-model="searchObj.config.splitterModel"
               :limits="searchObj.config.splitterLimit"
-              class="full-height w-full logs-splitter-smooth"
+              class="h-full max-h-full overflow-hidden w-full logs-splitter-smooth"
               separatorClass="field-list-separator"
               :separatorStyle="{ width: '10px', marginLeft: '-5px', marginRight: '-5px', zIndex: '10' }"
               @update:model-value="onSplitterUpdate"
             >
               <template #before>
-                <div class="relative-position h-full pl-[0.625rem] pt-2 border-r border-border-default bg-surface-panel">
+                <!-- 10px on top (matching the search bar's 4+6 above it).
+                     No right/bottom gutter here: the field list runs into the
+                     divider so its scrollbar sits on the panel edge, and scrolls
+                     into the panel foot. The form controls (stream selector, field
+                     search) carry their own matching px-1.5 gutter (see IndexList /
+                     OFieldList) so they line up — they're controls, not scrolling
+                     surfaces. -->
+                <div class="relative-position h-full pt-2.5 border-r border-border-default bg-surface-panel">
                   <index-list
                     v-if="searchObj.meta.showFields"
                     data-test="logs-search-index-list"
-                    class="card-container"
                     @setInterestingFieldInSQLQuery="
                       setInterestingFieldInSQLQuery
                     "
@@ -90,7 +96,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <template #after>
                 <div class="h-full">
                   <div
-                    class="card-container h-full w-full relative-position"
+                    class="bg-card-glass-bg h-full w-full relative-position"
                   >
                     <div
                       v-if="
@@ -112,8 +118,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       checked first and is NOT gated on errorMsg/loading/
                       loadingStream flags. Those could be stale (e.g. a stuck
                       loadingStream after an early-return in extractFields, or a
-                      leftover errorMsg after resetSearchObj) and previously left
-                      the center blank by falling through to the results branch.
+                      leftover errorMsg after resetSearchObj), which would
+                      otherwise fall through to the results branch and leave the
+                      center blank.
                     -->
                     <div
                       v-else-if="
@@ -225,7 +232,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <div
                       v-else
                       data-test="logs-search-search-result"
-                      class="full-height"
+                      class="h-full max-h-full overflow-hidden"
                     >
                       <search-result
                         ref="searchResultRef"
@@ -248,7 +255,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </div>
           <div
             v-show="searchObj.meta.logsVisualizeToggle == 'visualize'"
-            class="visualize-container border-t border-border-default"
+            class="h-full border-t border-border-default"
             :style="{ '--splitter-width': `${100 - splitterModel}vw` }"
           >
             <VisualizeLogsQuery
@@ -263,7 +270,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </div>
           <div
             v-if="searchObj.meta.logsVisualizeToggle == 'build'"
-            class="build-container"
+            class="h-full overflow-hidden"
             :style="{ '--splitter-width': `${100 - splitterModel}vw` }"
           >
             <BuildQueryPage
@@ -284,7 +291,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </template>
       </OSplitter>
     </div>
-    <div v-show="showSearchHistory" class="full-height">
+    <div v-show="showSearchHistory" class="h-full max-h-full overflow-hidden">
       <search-history
         v-if="store.state.zoConfig.usage_enabled"
         ref="searchHistoryRef"
@@ -293,22 +300,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       />
       <div
         v-else-if="showSearchHistory && !store.state.zoConfig.usage_enabled"
-        class="search-history-empty"
+        class="h-50 rounded-default"
       >
         <div
-          class="search-history-empty__content text-center p-3 flex flex-center"
+          class="h-[80vh] rounded-default text-center p-3 flex items-center justify-center"
         >
           <div>
             <div>
               <OIcon
                 name="history"
-                class="search-history-empty__icon" style="width: 100px; height: 100px;" />
+                class="w-25 h-25 [font-size: var(--text-4xl)] opacity-10" />
             </div>
-            <div class="text-3xl font-semibold search-history-empty__title">
+            <div class="text-3xl font-semibold opacity-80">
               {{ t("logs.index.searchHistoryNotEnabled") }}
             </div>
             <div
-              class="search-history-empty__info mt-2 flex items-center justify-center"
+              class="opacity-80 mt-2 flex items-center justify-center"
             >
               <OIcon name="info" class="mr-1"
 size="md" />
@@ -328,7 +335,7 @@ size="md" />
         </div>
       </div>
     </div>
-    <div v-show="showSearchScheduler" class="full-height">
+    <div v-show="showSearchScheduler" class="h-full max-h-full overflow-hidden">
       <SearchSchedulersList
         ref="searchSchedulerRef"
         @closeSearchHistory="closeSearchSchedulerFn"
@@ -2960,7 +2967,6 @@ export default defineComponent({
         if (schemaCache?.value && schemaCache?.value?.key === logsPageQuery) {
           extractedFields = schemaCache?.value?.response?.data;
         } else {
-          // Use the refactored getResultSchema function
           extractedFields = await getResultSchema(
             logsPageQuery,
             signal,
@@ -3033,7 +3039,6 @@ export default defineComponent({
           };
         }
 
-        // Use the refactored functions
         await setCustomQueryFields(
           fieldsForVisualization,
           shouldAutoSelectChartTypeForFields,
@@ -3634,49 +3639,12 @@ export default defineComponent({
 }) as any;
 </script>
 
-<style>
-.logPage .index-menu .field_list .field_overlay .field_label,
-.logPage .q-field__native,
-.logPage .q-field__input,
-.logPage .q-table tbody td {
-  font-size: 12px !important;
-}
-
-.logPage .q-table__top {
-  padding: 0px !important;
-}
-
-.logPage .q-table__control {
-  width: 100%;
-}
-
-.logPage .logsPageMainSection > .q-field__control-container {
-  padding-top: 0px !important;
-}
-
-.logPage .thirdlevel {
-  padding: 0 !important;
-  margin: 0 !important;
-  box-sizing: border-box !important;
-  height: 100% !important;
-  overflow: visible !important;
-  /* Changed from hidden to visible for button */
-}
-
-.field-list-separator::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 2px;
-  background-color: transparent;
-  transition: background-color 0.3s;
-}
-
-.field-list-separator:hover::after {
-  background-color: orange;
+<style scoped>
+/* keep(complex-state): the field label is rendered deep inside the IndexList /
+   FieldRow child components, so this reaches it with :deep() rather than a
+   template utility. Mirrors the identical rule in plugins/traces/Index.vue. */
+.logPage :deep(.index-menu .field_list .field_overlay .field_label) {
+  font-size: var(--text-xs) !important;
 }
 </style>
 
diff --git a/web/src/plugins/logs/IndexList.vue b/web/src/plugins/logs/IndexList.vue
index ac41e2c221..f7990fc532 100644
--- a/web/src/plugins/logs/IndexList.vue
+++ b/web/src/plugins/logs/IndexList.vue
@@ -16,12 +16,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <div
-    class="flex flex-col logs-index-menu pr-[0.375rem]! h-full bg-surface-panel!"
-    :class="store.state.theme == 'dark' ? 'theme-dark' : 'theme-light'"
+    class="flex flex-col logs-index-menu w-full h-full bg-surface-panel!"
   >
+    <!-- Stream type + stream selector. Shares the same page-edge gutter as the
+         field search input and the field rows below it (baked into OFieldList),
+         so all three form controls line up on one left/right edge. The scrolling
+         list itself deliberately runs flush to the divider so its scrollbar lands
+         on the panel edge — only the rows inside it carry the gutter. -->
     <div
-      class="flex items-center gap-2"
-      style="max-width: 100%; overflow: hidden"
+      class="flex items-center gap-2 px-page-edge max-w-full"
     >
       <OButton
         v-if="
@@ -31,7 +34,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         data-test="log-search-index-list-back-to-logs-btn"
         variant="outline"
         size="icon-sm"
-        class="shrink-0 h-8 w-8 border border-border-default rounded p-0"
+        class="shrink-0 h-8 w-8 border border-border-default rounded-default p-0"
         @click="onStreamTypeChange('logs')"
       >
         <OIcon name="swap-horiz" size="sm" />
@@ -200,60 +203,60 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           >
             <!-- Group 1 header -->
             <div class="h-7 flex items-center justify-between px-2">
-              <OSkeleton type="rect" class="h-3 w-24 rounded-sm" />
-              <OSkeleton type="rect" class="h-3 w-3 rounded-sm" />
+              <OSkeleton type="rect" class="h-3 w-24 rounded-default" />
+              <OSkeleton type="rect" class="h-3 w-3 rounded-default" />
             </div>
             <!-- Group 1 fields -->
-            <div class="flex items-center gap-2 px-3 py-[0.375rem]">
-              <OSkeleton type="rect" class="w-[0.875rem] h-[0.875rem] rounded-sm shrink-0" />
+            <div class="flex items-center gap-2 px-3 py-1.5">
+              <OSkeleton type="rect" class="w-3.5 h-3.5 rounded-default shrink-0" />
               <OSkeleton type="text" class="flex-1" />
             </div>
-            <div class="flex items-center gap-2 px-3 py-[0.375rem]">
-              <OSkeleton type="rect" class="w-[0.875rem] h-[0.875rem] rounded-sm shrink-0" />
+            <div class="flex items-center gap-2 px-3 py-1.5">
+              <OSkeleton type="rect" class="w-3.5 h-3.5 rounded-default shrink-0" />
               <OSkeleton type="text" class="w-3/4" />
             </div>
-            <div class="flex items-center gap-2 px-3 py-[0.375rem]">
-              <OSkeleton type="rect" class="w-[0.875rem] h-[0.875rem] rounded-sm shrink-0" />
+            <div class="flex items-center gap-2 px-3 py-1.5">
+              <OSkeleton type="rect" class="w-3.5 h-3.5 rounded-default shrink-0" />
               <OSkeleton type="text" class="flex-1" />
             </div>
-            <div class="flex items-center gap-2 px-3 py-[0.375rem]">
-              <OSkeleton type="rect" class="w-[0.875rem] h-[0.875rem] rounded-sm shrink-0" />
+            <div class="flex items-center gap-2 px-3 py-1.5">
+              <OSkeleton type="rect" class="w-3.5 h-3.5 rounded-default shrink-0" />
               <OSkeleton type="text" class="w-4/5" />
             </div>
             <!-- Group 2 header -->
             <div class="h-7 flex items-center justify-between px-2 mt-2">
-              <OSkeleton type="rect" class="h-3 w-16 rounded-sm" />
-              <OSkeleton type="rect" class="h-3 w-3 rounded-sm" />
+              <OSkeleton type="rect" class="h-3 w-16 rounded-default" />
+              <OSkeleton type="rect" class="h-3 w-3 rounded-default" />
             </div>
             <!-- Group 2 field -->
-            <div class="flex items-center gap-2 px-3 py-[0.375rem]">
-              <OSkeleton type="rect" class="w-[0.875rem] h-[0.875rem] rounded-sm shrink-0" />
+            <div class="flex items-center gap-2 px-3 py-1.5">
+              <OSkeleton type="rect" class="w-3.5 h-3.5 rounded-default shrink-0" />
               <OSkeleton type="text" class="w-2/3" />
             </div>
             <!-- Group 3 header -->
             <div class="h-7 flex items-center justify-between px-2 mt-2">
-              <OSkeleton type="rect" class="h-3 w-32 rounded-sm" />
-              <OSkeleton type="rect" class="h-3 w-3 rounded-sm" />
+              <OSkeleton type="rect" class="h-3 w-32 rounded-default" />
+              <OSkeleton type="rect" class="h-3 w-3 rounded-default" />
             </div>
             <!-- Group 3 fields -->
-            <div class="flex items-center gap-2 px-3 py-[0.375rem]">
-              <OSkeleton type="rect" class="w-[0.875rem] h-[0.875rem] rounded-sm shrink-0" />
+            <div class="flex items-center gap-2 px-3 py-1.5">
+              <OSkeleton type="rect" class="w-3.5 h-3.5 rounded-default shrink-0" />
               <OSkeleton type="text" class="flex-1" />
             </div>
-            <div class="flex items-center gap-2 px-3 py-[0.375rem]">
-              <OSkeleton type="rect" class="w-[0.875rem] h-[0.875rem] rounded-sm shrink-0" />
+            <div class="flex items-center gap-2 px-3 py-1.5">
+              <OSkeleton type="rect" class="w-3.5 h-3.5 rounded-default shrink-0" />
               <OSkeleton type="text" class="w-4/5" />
             </div>
-            <div class="flex items-center gap-2 px-3 py-[0.375rem]">
-              <OSkeleton type="rect" class="w-[0.875rem] h-[0.875rem] rounded-sm shrink-0" />
+            <div class="flex items-center gap-2 px-3 py-1.5">
+              <OSkeleton type="rect" class="w-3.5 h-3.5 rounded-default shrink-0" />
               <OSkeleton type="text" class="flex-1" />
             </div>
-            <div class="flex items-center gap-2 px-3 py-[0.375rem]">
-              <OSkeleton type="rect" class="w-[0.875rem] h-[0.875rem] rounded-sm shrink-0" />
+            <div class="flex items-center gap-2 px-3 py-1.5">
+              <OSkeleton type="rect" class="w-3.5 h-3.5 rounded-default shrink-0" />
               <OSkeleton type="text" class="w-3/4" />
             </div>
-            <div class="flex items-center gap-2 px-3 py-[0.375rem]">
-              <OSkeleton type="rect" class="w-[0.875rem] h-[0.875rem] rounded-sm shrink-0" />
+            <div class="flex items-center gap-2 px-3 py-1.5">
+              <OSkeleton type="rect" class="w-3.5 h-3.5 rounded-default shrink-0" />
               <OSkeleton type="text" class="flex-1" />
             </div>
           </div>
@@ -659,11 +662,10 @@ export default defineComponent({
       return result;
     });
 
-    // `immediate` seeds streamOptions on every (re)mount. The old q-select
-    // re-seeded via its `@filter` handler on each open; that was lost in the
-    // OSelect migration, so without `immediate` the lazy watcher never fired
-    // after a v-if remount (streamList itself is unchanged) and the list stayed
-    // empty. OSelect handles search filtering internally over these options.
+    // `immediate` seeds streamOptions on every (re)mount — without it the lazy
+    // watcher never fires after a v-if remount (streamList itself is unchanged)
+    // and the list stays empty. OSelect handles search filtering internally over
+    // these options.
     watch(
       () => streamList.value,
       () => {
@@ -816,7 +818,6 @@ export default defineComponent({
 
     // if interesting field is enabled, then set default tab as interesting fields
     // otherwise set default tab as user defined schema
-    // store.state.zoConfig.interesting_field_enabled was set as interesting fields was getting set by default with _timestamp field
     function setDefaultFieldTab() {
       if (store.state.zoConfig.log_page_default_field_list === "uds") {
         // reset pagination only if tab has changed
@@ -2091,3 +2092,36 @@ export default defineComponent({
   },
 });
 </script>
+
+<style scoped>
+/* keep(lib-override:o2-table): `.logs-index-menu` and both `.index-table` divs are
+   this component's own template, but the tbody/tr/td they lay out are OTable's
+   internal render (via GroupedFieldList) and `.schema-field-toggle` is
+   FieldListPagination's DOM — child DOM this owner can only reach with :deep().
+   The `.logs-index-menu` ancestor is kept so the selectors match at their original
+   specificity. */
+.logs-index-menu .index-table {
+  width: 100%;
+  height: calc(100% - 2.5rem);
+}
+
+.logs-index-menu .index-table :deep(tr) {
+  margin-bottom: 1px;
+}
+
+.logs-index-menu .index-table :deep(tbody),
+.logs-index-menu .index-table :deep(tr),
+.logs-index-menu .index-table :deep(td) {
+  width: 100%;
+  display: block;
+  height: fit-content;
+  overflow: hidden;
+}
+
+.logs-index-menu .index-table :deep(.schema-field-toggle) {
+  border: 1px solid var(--color-card-glass-border);
+  border-radius: 0.325rem;
+  background-color: transparent;
+  line-height: 0.625rem;
+}
+</style>
diff --git a/web/src/plugins/logs/JsonPreview.vue b/web/src/plugins/logs/JsonPreview.vue
index 70dd21fd7c..89e6c6fb55 100644
--- a/web/src/plugins/logs/JsonPreview.vue
+++ b/web/src/plugins/logs/JsonPreview.vue
@@ -3,7 +3,7 @@
     <div class="pb-1 flex justify-start px-3 copy-log-btn">
       <app-tabs
         v-if="filteredTabs.length"
-        class="mb-[0.375rem] logs-json-preview-tabs mr-2 border border-solid border-[var(--o2-border-color)] rounded-[0.25rem] text-[]"
+        class="mb-1.5 mr-2 h-fit overflow-hidden border-t border-l border-r border-solid border-card-glass-border rounded-default"
         data-test="logs-json-preview-tabs"
         :tabs="filteredTabs"
         v-model:active-tab="activeTab"
@@ -14,14 +14,14 @@
         :label="t('common.copyToClipboard')"
         size="xs"
         variant="outline"
-        class="mb-[0.375rem] mr-2"
+        class="mb-1.5 mr-2"
         @click="copyLogToClipboard"
       ><OIcon name="content-copy" size="xs" class="mr-1" />{{ t('common.copyToClipboard') }}</OButton>
         <OButton
         v-if="showViewRelatedBtn"
         size="xs"
         variant="outline"
-        class="mb-[0.375rem] mr-2"
+        class="mb-1.5 mr-2"
         @click="openCorrelation"
         data-test="log-correlation-btn"
       >
@@ -55,16 +55,15 @@
     <div v-show="activeTab === 'unflattened'" class="pl-3">
       <OSpinner size="md" />
       <div v-if="!loading">
-        <!-- Editor sizing is inlined here because it was originally scoped to this
-             component via <style scoped>; keeping it inline prevents it from
-             leaking onto every .monaco-editor app-wide. (The focus-border is left
-             off so this editor stays borderless like the others.) -->
+        <!-- Editor sizing is inlined (not scoped CSS) so it doesn't leak onto
+             every .monaco-editor app-wide. The focus-border is left off so this
+             editor stays borderless like the others. -->
         <code-query-editor
           v-model:query="unflattendData"
           ref="queryEditorRef"
           :editor-id="`logs-json-preview-unflattened-json-editor-${previewId}`"
           class="w-[calc(100%-16px)]!"
-          :class="[mode, mode === 'expanded' ? 'h-[300px]! max-w-[1024px]!' : 'h-[calc(100vh-250px)]!']"
+          :class="[mode, mode === 'expanded' ? 'h-75! max-w-256!' : 'h-[calc(100vh-250px)]!']"
           language="json"
         />
       </div>
@@ -72,7 +71,7 @@
     <div v-show="activeTab !== 'unflattened'" class="pl-3">
       {
       <div
-        class="log_json_content flex"
+        class="log_json_content whitespace-pre-wrap font-mono text-xs flex"
         v-for="(key, index) in Object.keys(value)"
         :key="key"
         :data-test="`log-detail-row-${key}`"
@@ -88,7 +87,7 @@
               data-test="log-details-include-exclude-field-btn"
               size="xs"
               variant="ghost"
-              class="ml-2 log-json-field-dropdown-btn"
+              class="ml-2 h-5! w-5! min-h-5! min-w-5! p-0! align-middle"
               :aria-label="t('logs.jsonPreview.addIcon')"
             >
               <OIcon :name="dropdownOpenMap[key] ? 'arrow-drop-up' : 'arrow-drop-down'" size="sm" />
@@ -168,7 +167,6 @@
         <span
           class="pl-1"
           :data-test="`log-expand-detail-key-${key}`"
-          :class="store.state.theme === 'dark' ? 'dark' : ''"
         >
           <span class="log-key">{{ key }}</span
           ><span class="log-separator">: </span
@@ -189,24 +187,25 @@
       }
       <div
         v-if="showMenu"
-        class="context-menu shadow-lg rounded-sm"
+        class="context-menu shadow-lg rounded-default min-w-50 py-1 [font-size: var(--text-compact)] bg-surface-overlay border border-border-default text-text-body"
         :style="{
           position: 'fixed',
           top: `${menuY}px`,
           left: `${menuX}px`,
           zIndex: 9999,
         }"
-        :class="
-          store.state.theme === 'dark'
-            ? 'context-menu-dark'
-            : 'context-menu-light'
-        "
       >
-        <div class="context-menu-item" @click="copySelectedText">
+        <div
+          class="py-1.5 px-3 flex items-center cursor-pointer [transition:background-color_0.2s] hover:bg-dropdown-item-hover-bg"
+          @click="copySelectedText"
+        >
           <OIcon name="content-copy" size="sm" class="mr-2" />
           {{ t('logs.jsonPreview.copy') }}
         </div>
-        <div class="context-menu-item" @click="handleCreateRegex">
+        <div
+          class="py-1.5 px-3 flex items-center cursor-pointer [transition:background-color_0.2s] hover:bg-dropdown-item-hover-bg"
+          @click="handleCreateRegex"
+        >
           <img
             :src="regexIconForContextMenu"
             class="mr-2"
@@ -249,6 +248,7 @@ import {
 } from "vue";
 import { getImageURL, getUUID } from "@/utils/zincutils";
 import { useStore } from "vuex";
+import { useTheme } from "@/composables/useTheme";
 import EqualIcon from "@/components/icons/EqualIcon.vue";
 import NotEqualIcon from "@/components/icons/NotEqualIcon.vue";
 import { useI18n } from "vue-i18n";
@@ -348,6 +348,7 @@ export default {
   setup(props: any, { emit }: any) {
     const { t } = useI18n();
     const store = useStore();
+    const { isDark } = useTheme();
     const activeTab = ref("flattened");
 
     const streamSearchValue = ref<string>("");
@@ -618,7 +619,8 @@ export default {
       // Handler for closing menu on outside click
       //because when user clicks on the log content with right click, the context menu is shown and when user clicks outside the log content, the context menu is closed
       const handleOutsideClick = (e: MouseEvent) => {
-        if (!(e.target as HTMLElement).closest(".q-btn")) {
+        // Guard on the menu itself: its items close it via their own handlers.
+        if (!(e.target as HTMLElement).closest(".context-menu")) {
           showMenu.value = false;
         }
       };
@@ -806,20 +808,20 @@ export default {
     };
 
     const getBtnLogo = computed(() => {
-      return store.state.theme === "dark"
+      return isDark.value
         ? getImageURL("images/common/ai_icon_dark.svg")
         : getImageURL("images/common/ai_icon_gradient.svg");
     });
     const regexIcon = computed(() => {
       return getImageURL(
-        store.state.theme == "dark"
+        isDark.value
           ? "images/regex_pattern/regex_icon_dark.svg"
           : "images/regex_pattern/regex_icon_light.svg",
       );
     });
     const regexIconForContextMenu = computed(() => {
       return getImageURL(
-        store.state.theme == "dark"
+        isDark.value
           ? "images/regex_pattern/regex_icon_dark.svg"
           : "images/regex_pattern/regex_icon_light.svg",
       );
diff --git a/web/src/plugins/logs/LogsNoStreamState.vue b/web/src/plugins/logs/LogsNoStreamState.vue
index 4a5e04a6f7..76962a65d1 100644
--- a/web/src/plugins/logs/LogsNoStreamState.vue
+++ b/web/src/plugins/logs/LogsNoStreamState.vue
@@ -58,7 +58,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           icon="storage"
           :data-test="`logs-no-stream-recent-${stream}`"
           @click="emit('pick-stream', stream)"
-        ><span class="truncate max-w-[10rem]">{{ stream }}</span></EmptyStateIngestionChip>
+        ><span class="truncate max-w-40">{{ stream }}</span></EmptyStateIngestionChip>
       </div>
     </template>
   </OEmptyState>
diff --git a/web/src/plugins/logs/SearchBar.SavedFunction.schema.ts b/web/src/plugins/logs/SearchBar.SavedFunction.schema.ts
index dd3c82cc69..c95dc7bdf4 100644
--- a/web/src/plugins/logs/SearchBar.SavedFunction.schema.ts
+++ b/web/src/plugins/logs/SearchBar.SavedFunction.schema.ts
@@ -6,11 +6,6 @@
 // to an OFormToggleGroup so the superRefine can branch on it):
 //   • create → savedFunctionName required + identifier regex;
 //   • update → savedFunctionSelectedName required.
-//
-// Restored from the current SearchBar code (preserve the regex in use TODAY):
-//   savedFunctionName — `!!v.trim() || 'This field is required'`
-//                    ;  `/^[a-zA-Z][a-zA-Z0-9_]*$/.test(v) || 'Input must be alphanumeric'`
-//   savedFunctionSelectedName — `!!v || 'Field is required!'` (update mode).
 
 import { z } from "zod";
 
diff --git a/web/src/plugins/logs/SearchBar.SavedView.schema.ts b/web/src/plugins/logs/SearchBar.SavedView.schema.ts
index a6fa5ed763..845a3683a5 100644
--- a/web/src/plugins/logs/SearchBar.SavedView.schema.ts
+++ b/web/src/plugins/logs/SearchBar.SavedView.schema.ts
@@ -1,19 +1,12 @@
 // Copyright 2026 OpenObserve Inc.
 //
-// Validation schema for the Saved View dialog in SearchBar.vue (row 58).
-// Built via a factory so all messages stay i18n-driven (pass `t`); the keys
-// resolve to the exact strings the component used before migration.
+// Validation schema for the Saved View dialog in SearchBar.vue.
+// Built via a factory so all messages stay i18n-driven (pass `t`).
 //
 // Mode-aware (conditional on `isSavedViewAction`, which is form-owned so the
 // superRefine can branch on it):
 //   • create → savedViewName required + alphanumeric regex;
 //   • update → savedViewSelectedName required.
-//
-// Restored from the current SearchBar code (preserve the regex in use TODAY,
-// per the brief's BEFORE-vs-current reconciliation note):
-//   savedViewName — `!!v.trim() || 'This field is required'`
-//                ;  `/^[A-Za-z0-9 _-]+$/.test(v) || 'Input must be alphanumeric'`
-//   savedViewSelectedName — `!!v || 'Field is required!'` (update mode).
 
 import { z } from "zod";
 
diff --git a/web/src/plugins/logs/SearchBar.spec.ts b/web/src/plugins/logs/SearchBar.spec.ts
index 52945199c8..8fd1719b62 100644
--- a/web/src/plugins/logs/SearchBar.spec.ts
+++ b/web/src/plugins/logs/SearchBar.spec.ts
@@ -5024,14 +5024,14 @@ describe("SearchBar.vue VRL Editor Disabled for Non-Table Charts", () => {
 // ─────────────────────────────────────────────────────────────────────────────
 // ODialog migration contract tests
 //
-// SearchBar.vue was migrated from q-dialog/q-card markup to <ODialog> for three
+// SearchBar.vue was migrated to <ODialog> for three
 // confirmation/utility dialogs:
 //   1. confirmDialog            — v-model:open="confirmDialogVisible"
 //   2. confirmSavedViewDialog   — v-model:open="confirmSavedViewDialogVisible"
 //   3. customDownloadDialog     — v-model:open="customDownloadDialog"
 //
 // Each dialog now emits update:open / click:primary / click:secondary instead
-// of relying on internal q-btn clicks to close itself. This block asserts the
+// of relying on internal button clicks to close itself. This block asserts the
 // new contract using a lightweight harness component that mirrors SearchBar's
 // exact template binding for each dialog, plus an ODialogStub registered via
 // the `stubs` mounting option (mirroring the pattern in
diff --git a/web/src/plugins/logs/SearchBar.vue b/web/src/plugins/logs/SearchBar.vue
index 5d7fa63e4c..9cc03f1173 100644
--- a/web/src/plugins/logs/SearchBar.vue
+++ b/web/src/plugins/logs/SearchBar.vue
@@ -16,11 +16,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <div
-    :class="store.state.theme === 'dark' ? 'dark-theme' : ''"
     class="logs-search-bar-component"
     id="searchBarComponent"
   >
-    <div class="flex m-0! p-[0.375rem]! items-center! w-full overflow-hidden border-b solid border-b-[var(--o2-border-color)]">
+    <div class="flex m-0! p-1.5! items-center! w-full overflow-hidden border-b solid border-b-card-glass-border">
       <div
         ref="toolbarLeftRef"
         class="flex items-center gap-1 flex-nowrap flex-1 min-w-0"
@@ -309,7 +308,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <template #trigger>
             <OButton
               data-test="logs-search-bar-utilities-menu-btn"
-              class="p-1! ml-1 [border:0.0625rem_solid_var(--color-button-outline-border)]! rounded-md [transition:all_0.2s_ease] min-h-[1.875rem]! text-xs font-medium hover:bg-(--color-button-outline-hover-bg) element-box-shadow"
+              class="p-1! ml-1 [border:0.0625rem_solid_var(--color-button-outline-border)]! rounded-default [transition:all_0.2s_ease] min-h-[1.875rem]! text-xs font-medium hover:bg-button-outline-hover-bg element-box-shadow"
               icon-left="more-horiz"
               variant="outline"
               size="xs"
@@ -326,7 +325,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               @select.prevent="!isSqlModeDisabled && (searchObj.meta.sqlMode = !searchObj.meta.sqlMode)"
             >
               <template #icon-left>
-                <span class="inline-flex items-center justify-center w-7 h-7 rounded-md bg-(--o2-section-header-bg) text-(--o2-text-secondary) shrink-0">
+                <span class="inline-flex items-center justify-center w-7 h-7 rounded-default bg-section-header-bg text-text-secondary shrink-0">
                   <OIcon name="code" size="sm" />
                 </span>
               </template>
@@ -360,7 +359,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               @select="resetFilters"
             >
               <template #icon-left>
-                <span class="inline-flex items-center justify-center w-7 h-7 rounded-md bg-(--o2-section-header-bg) text-(--o2-text-secondary) shrink-0">
+                <span class="inline-flex items-center justify-center w-7 h-7 rounded-default bg-section-header-bg text-text-secondary shrink-0">
                   <OIcon name="restart-alt" size="sm" />
                 </span>
               </template>
@@ -373,7 +372,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               @select.prevent="searchObj.meta.showHistogram = !searchObj.meta.showHistogram"
             >
               <template #icon-left>
-                <span class="inline-flex items-center justify-center w-7 h-7 rounded-md bg-(--o2-section-header-bg) text-(--o2-text-secondary) shrink-0">
+                <span class="inline-flex items-center justify-center w-7 h-7 rounded-default bg-section-header-bg text-text-secondary shrink-0">
                   <OIcon name="bar-chart" size="sm" />
                 </span>
               </template>
@@ -405,7 +404,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               @select.prevent="handleQuickMode"
             >
               <template #icon-left>
-                <span class="inline-flex items-center justify-center w-7 h-7 rounded-md bg-(--o2-section-header-bg) text-(--o2-text-secondary) shrink-0">
+                <span class="inline-flex items-center justify-center w-7 h-7 rounded-default bg-section-header-bg text-text-secondary shrink-0">
                   <OIcon name="bolt" size="sm" />
                 </span>
               </template>
@@ -437,7 +436,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               @select.prevent="searchObj.meta.showTransformEditor = !searchObj.meta.showTransformEditor"
             >
               <template #icon-left>
-                <span class="inline-flex items-center justify-center w-7 h-7 rounded-md bg-(--o2-section-header-bg) text-(--o2-text-secondary) shrink-0 [font-family:var(--font-mono,monospace)] text-[var(--text-sm)] italic [font-weight:var(--font-bold)] text-(--o2-primary-color)">fx</span>
+                <span class="inline-flex items-center justify-center w-7 h-7 rounded-default bg-section-header-bg text-text-secondary shrink-0 font-mono text-compact italic font-bold text-accent">fx</span>
               </template>
               {{ t('search.functionEditorLabel') }}
               <template #icon-right>
@@ -482,7 +481,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               @select="openSavedViewsList"
             >
               <template #icon-left>
-                <span class="inline-flex items-center justify-center w-7 h-7 rounded-md bg-(--o2-section-header-bg) text-(--o2-text-secondary) shrink-0">
+                <span class="inline-flex items-center justify-center w-7 h-7 rounded-default bg-section-header-bg text-text-secondary shrink-0">
                   <OIcon name="format-list-bulleted" size="sm" />
                 </span>
               </template>
@@ -495,7 +494,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               @select="fnSavedView"
             >
               <template #icon-left>
-                <span class="inline-flex items-center justify-center w-7 h-7 rounded-md bg-(--o2-section-header-bg) text-(--o2-text-secondary) shrink-0">
+                <span class="inline-flex items-center justify-center w-7 h-7 rounded-default bg-section-header-bg text-text-secondary shrink-0">
                   <OIcon name="add" size="sm" />
                 </span>
               </template>
@@ -583,7 +582,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               @select="showSearchHistoryfn"
             >
               <template #icon-left>
-                <span class="inline-flex items-center justify-center w-7 h-7 rounded-md bg-(--o2-section-header-bg) text-(--o2-text-secondary) shrink-0">
+                <span class="inline-flex items-center justify-center w-7 h-7 rounded-default bg-section-header-bg text-text-secondary shrink-0">
                   <OIcon name="history" size="sm" />
                 </span>
               </template>
@@ -601,10 +600,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :aria-disabled="isDownloadDisabled || undefined"
               @mouseenter="!isDownloadDisabled && (showDownloadSubmenu = true)"
               @mouseleave="showDownloadSubmenu = false"
-              class="relative flex items-center gap-2 py-[0.375rem] px-3 text-[var(--text-base)] [line-height:1.2] cursor-pointer select-none hover:bg-(--color-interactive-hover-bg) search-download-item"
-              :class="{ 'cursor-not-allowed! text-(--o2-text-muted) hover:bg-transparent!': isDownloadDisabled }"
+              class="relative flex items-center gap-2 py-1.5 px-3 text-[var(--text-sm)] [line-height:1.2] cursor-pointer select-none hover:bg-interactive-hover-bg search-download-item before:content-[''] before:absolute before:top-0 before:right-full before:w-2.5 before:h-full"
+              :class="{ 'cursor-not-allowed! text-text-muted hover:bg-transparent!': isDownloadDisabled }"
             >
-              <span class="inline-flex items-center justify-center w-7 h-7 rounded-md bg-(--o2-section-header-bg) text-(--o2-text-secondary) shrink-0">
+              <span class="inline-flex items-center justify-center w-7 h-7 rounded-default bg-section-header-bg text-text-secondary shrink-0">
                 <OIcon size="sm" name="download" />
               </span>
               <span class="flex-1 whitespace-nowrap">{{ t("search.downloadTable") }}</span>
@@ -612,13 +611,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
               <div
                 v-if="showDownloadSubmenu && !isDownloadDisabled"
-                class="search-download-submenu absolute right-full top-0 mr-1 min-w-40 bg-(--color-dropdown-bg) [border:0.063rem_solid_var(--o2-border-color)] rounded-md [box-shadow:0_0.5rem_1.5rem_var(--o2-hover-shadow)] py-1 px-0 z-[9999]"
+                class="search-download-submenu absolute right-full top-0 mr-1 min-w-40 bg-dropdown-bg [border:0.063rem_solid_var(--color-card-glass-border)] rounded-default [box-shadow:0_0.5rem_1.5rem_var(--color-hover-shadow)] py-1 px-0 z-[9999]"
                 data-test="search-download-submenu"
               >
                 <button
                   type="button"
                   data-test="search-download-csv-btn"
-                  class="flex items-center gap-[0.625rem] w-full py-[0.375rem] px-3 text-[var(--text-base)] [line-height:1.2] text-left bg-transparent border-0 cursor-pointer text-(--o2-text-body) hover:bg-(--color-interactive-hover-bg)"
+                  class="flex items-center gap-2.5 w-full py-1.5 px-3 text-[var(--text-sm)] [line-height:1.2] text-left bg-transparent border-0 cursor-pointer text-text-body hover:bg-interactive-hover-bg"
                   @click="downloadLogs(searchObj.data.queryResults.hits, 'csv'); showDownloadSubmenu = false"
                 >
                   <OIcon name="grid-on" size="sm" />
@@ -627,7 +626,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <button
                   type="button"
                   data-test="search-download-json-btn"
-                  class="flex items-center gap-[0.625rem] w-full py-[0.375rem] px-3 text-[var(--text-base)] [line-height:1.2] text-left bg-transparent border-0 cursor-pointer text-(--o2-text-body) hover:bg-(--color-interactive-hover-bg)"
+                  class="flex items-center gap-2.5 w-full py-1.5 px-3 text-[var(--text-sm)] [line-height:1.2] text-left bg-transparent border-0 cursor-pointer text-text-body hover:bg-interactive-hover-bg"
                   @click="downloadLogs(searchObj.data.queryResults.hits, 'json'); showDownloadSubmenu = false"
                 >
                   <OIcon name="data-object" size="sm" />
@@ -642,7 +641,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               @select="toggleCustomDownloadDialog"
             >
               <template #icon-left>
-                <span class="inline-flex items-center justify-center w-7 h-7 rounded-md bg-(--o2-section-header-bg) text-(--o2-text-secondary) shrink-0">
+                <span class="inline-flex items-center justify-center w-7 h-7 rounded-default bg-section-header-bg text-text-secondary shrink-0">
                   <img
                     :src="customRangeIcon"
                     :alt="t('logs.searchBar.customRangeAlt')"
@@ -666,7 +665,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               @select="createScheduleJob"
             >
               <template #icon-left>
-                <span class="inline-flex items-center justify-center w-7 h-7 rounded-md bg-(--o2-section-header-bg) text-(--o2-text-secondary) shrink-0">
+                <span class="inline-flex items-center justify-center w-7 h-7 rounded-default bg-section-header-bg text-text-secondary shrink-0">
                   <img
                     :src="createScheduledSearchIcon"
                     :alt="t('logs.searchBar.createScheduledSearchAlt')"
@@ -685,7 +684,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               @select="routeToSearchSchedule"
             >
               <template #icon-left>
-                <span class="inline-flex items-center justify-center w-7 h-7 rounded-md bg-(--o2-section-header-bg) text-(--o2-text-secondary) shrink-0">
+                <span class="inline-flex items-center justify-center w-7 h-7 rounded-default bg-section-header-bg text-text-secondary shrink-0">
                   <img
                     :src="listScheduledSearchIcon"
                     :alt="t('logs.searchBar.listScheduledSearchAlt')"
@@ -714,7 +713,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               @select="openSearchInspectDialog"
             >
               <template #icon-left>
-                <span class="inline-flex items-center justify-center w-7 h-7 rounded-md bg-(--o2-section-header-bg) text-(--o2-text-secondary) shrink-0">
+                <span class="inline-flex items-center justify-center w-7 h-7 rounded-default bg-section-header-bg text-text-secondary shrink-0">
                   <OIcon name="troubleshoot" size="sm" />
                 </span>
               </template>
@@ -736,7 +735,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               @select="openExplainDialog"
             >
               <template #icon-left>
-                <span class="inline-flex items-center justify-center w-7 h-7 rounded-md bg-(--o2-section-header-bg) text-(--o2-text-secondary) shrink-0">
+                <span class="inline-flex items-center justify-center w-7 h-7 rounded-default bg-section-header-bg text-text-secondary shrink-0">
                   <OIcon name="lightbulb" size="sm" />
                 </span>
               </template>
@@ -766,7 +765,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             :size="toolbarToggleIconOnly ? 'sm' : 'md'"
             @click.stop
           />
-          <span class="[font-family:var(--font-mono,monospace)] text-sm italic font-bold text-(--o2-primary-color) shrink-0">fx</span>
+          <span class="font-mono text-sm italic font-bold text-accent shrink-0">fx</span>
           <OTooltip :content="t('search.functionEditorLabel')" />
         </OButton>
 
@@ -798,7 +797,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <div class="search-time order-2">
           <div class="flex">
             <OButtonGroup
-              class="p-0 mr-1 element-box-shadow el-border"
+              class="p-0 mr-1 element-box-shadow border border-card-glass-border"
               v-if="
                 config.isEnterprise == 'true' &&
                 Object.keys(store.state.regionInfo).length > 0 &&
@@ -822,12 +821,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </OButton>
                 </template>
                 <div
-                  class="p-2 min-w-[240px]"
+                  class="p-2 min-w-60"
                   data-test="logs-search-bar-region-menu"
                 >
                   <OInput
                     clearable
-                    class="mb-[0.375rem]! indexlist-search-input mx-2 mt-2"
+                    class="mb-1.5! indexlist-search-input mx-2 mt-2"
                     v-model="regionFilter"
                     :label="t('search.regionFilterMsg')"
                   />
@@ -859,7 +858,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   :title="t('search.cancel')"
                   variant="ghost"
                   size="sm-toolbar"
-                  class="p-0 h-[1.875rem]! [font-weight:var(--font-medium)]! leading-4! px-1! w-[5.875rem]! whitespace-normal break-words text-center [transition:box-shadow_0.3s_ease,opacity_0.2s_ease] bg-[var(--o2-cancel-query-bg)]! text-[var(--o2-primary-btn-text)]! element-box-shadow [border-radius:0.375rem_0_0_0.375rem]!"
+                  class="p-0 h-[1.875rem]! font-medium! leading-4! px-1! w-[5.875rem]! whitespace-normal break-words text-center [transition:box-shadow_0.3s_ease,opacity_0.2s_ease] bg-cancel-query-bg! text-button-primary-foreground! element-box-shadow rounded-s-default! rounded-e-none!"
                   @click="cancelVisualizeQueries"
                   >{{ t("search.cancel") }}</OButton
                 >
@@ -887,9 +886,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   class="p-0 h-[1.875rem]! element-box-shadow"
                   :class="[
                     isNaturalLanguageDetected && !searchObj.meta.nlpMode
-                      ? 'o2-ai-generate-button [border-radius:0.375rem_0_0_0.375rem]!'
-                      : '[font-weight:var(--font-medium)]! leading-4! px-1! w-[5.875rem]! whitespace-normal break-words text-center [transition:box-shadow_0.3s_ease,opacity_0.2s_ease] bg-[var(--o2-primary-btn-bg)]! text-[var(--o2-primary-btn-text)]! hover:opacity-90 hover:[box-shadow:0_0_8px_color-mix(in_srgb,var(--o2-primary-btn-bg),transparent_30%)]',
-                    '[border-radius:0.375rem_0_0_0.375rem]!',
+                      ? 'o2-ai-generate-button rounded-s-default! rounded-e-none!'
+                      : 'font-medium! leading-4! px-1! w-[5.875rem]! whitespace-normal break-words text-center [transition:box-shadow_0.3s_ease,opacity_0.2s_ease] bg-button-primary! text-button-primary-foreground! hover:opacity-90 hover:[box-shadow:0_0_8px_color-mix(in_srgb,var(--color-button-primary),transparent_30%)]',
+                    'rounded-s-default! rounded-e-none!',
                   ]"
                   @click="
                     isNaturalLanguageDetected && !searchObj.meta.nlpMode
@@ -903,7 +902,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       : t("search.runQuery")
                   }}
                 </OButton>
-                <OSeparator class="h-[1.875rem]! w-[1px]" vertical />
+                <OSeparator class="h-[1.875rem]! w-px" vertical />
                 <ODropdown align="end" side="bottom">
                   <template #trigger>
                     <OButton
@@ -915,14 +914,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         ) &&
                         config.isEnterprise == 'true' &&
                         visualizeSearchRequestTraceIds.length
-                          ? 'bg-[var(--o2-cancel-query-bg)]! text-[var(--o2-primary-btn-text)]!'
+                          ? 'bg-cancel-query-bg! text-button-primary-foreground!'
                           : !(
                                 isNaturalLanguageDetected &&
                                 !searchObj.meta.nlpMode
                               )
-                            ? 'bg-[var(--o2-primary-btn-bg)]! text-[var(--o2-primary-btn-text)]! hover:opacity-90 hover:[box-shadow:0_0_8px_color-mix(in_srgb,var(--o2-primary-btn-bg),transparent_30%)]'
+                            ? 'bg-button-primary! text-button-primary-foreground! hover:opacity-90 hover:[box-shadow:0_0_8px_color-mix(in_srgb,var(--color-button-primary),transparent_30%)]'
                             : '',
-                        '[border-radius:0_0.375rem_0.375rem_0]!',
+                        'rounded-s-none! rounded-e-default!',
                       ]"
                     >
                       <OIcon name="arrow-drop-down" size="sm" />
@@ -947,7 +946,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </ODropdownItem>
                   <p
                     v-else
-                    class="text-xs text-[var(--o2-text-caption)] text-center px-3 py-2"
+                    class="text-xs text-text-secondary text-center px-3 py-2"
                   >
                     {{ t("nlMode.noAdditionalOptions") }}
                   </p>
@@ -961,7 +960,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   variant="ghost"
                   :title="t('search.cancel')"
                   size="sm-toolbar"
-                  class="p-0 h-[1.875rem]! [font-weight:var(--font-medium)]! leading-4! px-1! w-[5.875rem]! whitespace-normal break-words text-center [transition:box-shadow_0.3s_ease,opacity_0.2s_ease] bg-[var(--o2-cancel-query-bg)]! text-[var(--o2-primary-btn-text)]! element-box-shadow [border-radius:0.375rem_0_0_0.375rem]!"
+                  class="p-0 h-[1.875rem]! font-medium! leading-4! px-1! w-[5.875rem]! whitespace-normal break-words text-center [transition:box-shadow_0.3s_ease,opacity_0.2s_ease] bg-cancel-query-bg! text-button-primary-foreground! element-box-shadow rounded-s-default! rounded-e-none!"
                   @click="cancelVisualizeQueries"
                   >{{ t("search.cancel") }}</OButton
                 >
@@ -990,9 +989,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   class="p-0 h-[1.875rem]! element-box-shadow"
                   :class="[
                     isNaturalLanguageDetected && !searchObj.meta.nlpMode
-                      ? 'o2-ai-generate-button [border-radius:0.375rem_0_0_0.375rem]!'
-                      : '[font-weight:var(--font-medium)]! leading-4! px-1! w-[5.875rem]! whitespace-normal break-words text-center [transition:box-shadow_0.3s_ease,opacity_0.2s_ease] bg-[var(--o2-primary-btn-bg)]! text-[var(--o2-primary-btn-text)]! hover:opacity-90 hover:[box-shadow:0_0_8px_color-mix(in_srgb,var(--o2-primary-btn-bg),transparent_30%)]',
-                    '[border-radius:0.375rem_0_0_0.375rem]!',
+                      ? 'o2-ai-generate-button rounded-s-default! rounded-e-none!'
+                      : 'font-medium! leading-4! px-1! w-[5.875rem]! whitespace-normal break-words text-center [transition:box-shadow_0.3s_ease,opacity_0.2s_ease] bg-button-primary! text-button-primary-foreground! hover:opacity-90 hover:[box-shadow:0_0_8px_color-mix(in_srgb,var(--color-button-primary),transparent_30%)]',
+                    'rounded-s-default! rounded-e-none!',
                   ]"
                   @click="
                     isNaturalLanguageDetected && !searchObj.meta.nlpMode
@@ -1006,7 +1005,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       : t("search.runQuery")
                   }}
                 </OButton>
-                <OSeparator class="h-[1.875rem]! w-[1px]" vertical />
+                <OSeparator class="h-[1.875rem]! w-px" vertical />
                 <ODropdown align="end" side="bottom">
                   <template #trigger>
                     <OButton
@@ -1018,14 +1017,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         ) &&
                         config.isEnterprise == 'true' &&
                         visualizeSearchRequestTraceIds.length
-                          ? 'bg-[var(--o2-cancel-query-bg)]! text-[var(--o2-primary-btn-text)]!'
+                          ? 'bg-cancel-query-bg! text-button-primary-foreground!'
                           : !(
                                 isNaturalLanguageDetected &&
                                 !searchObj.meta.nlpMode
                               )
-                            ? 'bg-[var(--o2-primary-btn-bg)]! text-[var(--o2-primary-btn-text)]! hover:opacity-90 hover:[box-shadow:0_0_8px_color-mix(in_srgb,var(--o2-primary-btn-bg),transparent_30%)]'
+                            ? 'bg-button-primary! text-button-primary-foreground! hover:opacity-90 hover:[box-shadow:0_0_8px_color-mix(in_srgb,var(--color-button-primary),transparent_30%)]'
                             : '',
-                        '[border-radius:0_0.375rem_0.375rem_0]!',
+                        'rounded-s-none! rounded-e-default!',
                       ]"
                     >
                       <OIcon name="arrow-drop-down" size="sm" />
@@ -1050,7 +1049,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </ODropdownItem>
                   <p
                     v-else
-                    class="text-xs text-[var(--o2-text-caption)] text-center px-3 py-2"
+                    class="text-xs text-text-secondary text-center px-3 py-2"
                   >
                     {{ t("nlMode.noAdditionalOptions") }}
                   </p>
@@ -1068,7 +1067,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 variant="ghost"
                 :title="t('search.cancel')"
                 size="sm-toolbar"
-                class="p-0 h-[1.875rem]! [font-weight:var(--font-medium)]! leading-4! px-1! w-[5.875rem]! whitespace-normal break-words text-center [transition:box-shadow_0.3s_ease,opacity_0.2s_ease] bg-[var(--o2-cancel-query-bg)]! text-[var(--o2-primary-btn-text)]! element-box-shadow rounded-md"
+                class="p-0 h-[1.875rem]! font-medium! leading-4! px-1! w-[5.875rem]! whitespace-normal break-words text-center [transition:box-shadow_0.3s_ease,opacity_0.2s_ease] bg-cancel-query-bg! text-button-primary-foreground! element-box-shadow rounded-default"
                 @click="cancelPatterns"
                 >{{ t("search.cancel") }}</OButton
               >
@@ -1086,11 +1085,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 variant="primary"
                 :title="t('search.cancel')"
                 size="sm-toolbar"
-                class="p-0 h-[1.875rem]! [font-weight:var(--font-medium)]! leading-4! px-1! w-[5.875rem]! whitespace-normal break-words text-center [transition:box-shadow_0.3s_ease,opacity_0.2s_ease] bg-[var(--o2-cancel-query-bg)]! text-[var(--o2-primary-btn-text)]! element-box-shadow"
+                class="p-0 h-[1.875rem]! font-medium! leading-4! px-1! w-[5.875rem]! whitespace-normal break-words text-center [transition:box-shadow_0.3s_ease,opacity_0.2s_ease] bg-cancel-query-bg! text-button-primary-foreground! element-box-shadow"
                 :class="
                   config.isEnterprise == 'true'
-                    ? '[border-radius:0.375rem_0_0_0.375rem]!'
-                    : 'rounded-md'
+                    ? 'rounded-s-default! rounded-e-none!'
+                    : 'rounded-default'
                 "
                 @click="cancelQuery"
                 >{{ t("search.cancel") }}</OButton
@@ -1115,10 +1114,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :class="[
                   isNaturalLanguageDetected && !searchObj.meta.nlpMode
                     ? 'o2-ai-generate-button'
-                    : '[font-weight:var(--font-medium)]! leading-4! px-1! w-[5.875rem]! whitespace-normal break-words text-center [transition:box-shadow_0.3s_ease,opacity_0.2s_ease] bg-[var(--o2-primary-btn-bg)]! text-[var(--o2-primary-btn-text)]! hover:opacity-90 hover:[box-shadow:0_0_8px_color-mix(in_srgb,var(--o2-primary-btn-bg),transparent_30%)]',
+                    : 'font-medium! leading-4! px-1! w-[5.875rem]! whitespace-normal break-words text-center [transition:box-shadow_0.3s_ease,opacity_0.2s_ease] bg-button-primary! text-button-primary-foreground! hover:opacity-90 hover:[box-shadow:0_0_8px_color-mix(in_srgb,var(--color-button-primary),transparent_30%)]',
                   store.state.zoConfig.auto_query_enabled
-                    ? '[border-radius:0.375rem_0_0_0.375rem]!'
-                    : 'rounded-md',
+                    ? 'rounded-s-default! rounded-e-none!'
+                    : 'rounded-default',
                 ]"
                 @click="
                   isNaturalLanguageDetected && !searchObj.meta.nlpMode
@@ -1163,7 +1162,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <!-- Dropdown: shown for enterprise or when live mode feature is enabled -->
               <OSeparator
                 v-if="store.state.zoConfig.auto_query_enabled"
-                class="h-[1.875rem]! w-[1px]"
+                class="h-[1.875rem]! w-px"
                 vertical
               />
               <ODropdown
@@ -1184,16 +1183,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                           !!searchObj.data.searchWebSocketTraceIds.length) &&
                         (searchObj.loading == true ||
                           searchObj.loadingHistogram == true))
-                        ? 'bg-[var(--o2-cancel-query-bg)]! text-[var(--o2-primary-btn-text)]!'
+                        ? 'bg-cancel-query-bg! text-button-primary-foreground!'
                         : !(
                               isNaturalLanguageDetected &&
                               !searchObj.meta.nlpMode
                             )
-                          ? 'bg-[var(--o2-primary-btn-bg)]! text-[var(--o2-primary-btn-text)]! hover:opacity-90 hover:[box-shadow:0_0_8px_color-mix(in_srgb,var(--o2-primary-btn-bg),transparent_30%)]'
+                          ? 'bg-button-primary! text-button-primary-foreground! hover:opacity-90 hover:[box-shadow:0_0_8px_color-mix(in_srgb,var(--color-button-primary),transparent_30%)]'
                           : '',
                       store.state.zoConfig.auto_query_enabled
-                        ? '[border-radius:0_0.375rem_0.375rem_0]!'
-                        : 'rounded-md',
+                        ? 'rounded-s-none! rounded-e-default!'
+                        : 'rounded-default',
                     ]"
                   >
                     <OIcon name="arrow-drop-down" size="sm" />
@@ -1239,7 +1238,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         searchObj.meta.liveMode ? 'autorenew' : 'sync-disabled'
                       "
                       size="sm"
-                      :class="searchObj.meta.liveMode ? 'text-[var(--o2-primary)]' : ''"
+                      :class="searchObj.meta.liveMode ? 'text-accent' : ''"
                     />
                   </template>
                   <span>
@@ -1250,7 +1249,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                           : t("search.turnOnLiveMode")
                       }}
                     </div>
-                    <div class="text-xs text-[var(--o2-text-secondary)]">
+                    <div class="text-xs text-text-secondary">
                       {{ t("search.liveModeTooltip") }}
                     </div>
                   </span>
@@ -1258,7 +1257,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <!-- NLP mode: info message -->
                 <p
                   v-if="isNaturalLanguageDetected && !searchObj.meta.nlpMode"
-                  class="text-xs text-[var(--o2-text-caption)] text-center px-3 py-2"
+                  class="text-xs text-text-secondary text-center px-3 py-2"
                 >
                   {{ t("nlMode.noAdditionalOptions") }}
                 </p>
@@ -1283,11 +1282,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <!-- pr-1.5 mirrors the editor's ml-1.5 so the editor area sits at 10px on
          the right (4px wrapper + 6px), aligning with the results panel below.
          data-fullscreen is a stable test hook exposing the fullscreen state
-         (the styling itself is driven by the inline `isFocused` class binding). -->
+         (the styling itself is driven by the inline `isFocused` class binding).
+         Expanded state carries no border/radius/shadow of its own: the editor
+         fills the area it is given, and the panel chrome around it already
+         supplies the frame — a second curved, shadowed edge on top of it just
+         reads as a stray card. -->
     <div
       ref="editorContainerRef"
       class="flex relative query-editor-container w-full overflow-visible"
-      :class="{ 'overflow-hidden! bg-[var(--o2-body-primary-bg)]! border border-[var(--o2-border-color)] rounded-md [box-shadow:0_0.5rem_2rem_rgba(0,0,0,0.18)]': isFocused }"
+      :class="{ 'overflow-hidden! bg-theme-body-bg-primary!': isFocused }"
       :data-fullscreen="isFocused ? 'true' : 'false'"
       :style="editorFullscreenStyle"
     >
@@ -1298,7 +1301,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         variant="ghost"
         size="icon-toolbar"
         @click="toggleEditorFullscreen"
-        class="absolute! z-[51] top-[0.1875rem] right-[0.25rem] [border:1px_solid_var(--o2-border-color)]! rounded-md w-[30px]! h-[30px]! min-w-[30px]! min-h-[30px]!"
+        class="absolute! z-[51] top-[0.1875rem] right-1 [border:1px_solid_var(--color-card-glass-border)]! rounded-default w-7.5! h-7.5! min-w-7.5! min-h-7.5!"
       >
         <OTooltip :content="isFocused ? t('search.collapse') : t('search.expand')" />
       </OButton>
@@ -1311,7 +1314,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :limits="searchObj.config.fnSplitterLimit"
           :horizontal="false"
           :separator="!!searchObj.data.transformType"
-          separator-class="w-px! bg-[var(--o2-border-color)]"
+          separator-class="w-px! bg-card-glass-border"
         >
           <template #before>
             <div
@@ -1430,7 +1433,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     >
                       <OIcon name="warning" size="md" class="mx-2" />
                       <span
-                        class="text-red-500 p-2 font-semibold"
+                        class="text-status-error-text p-2 font-semibold"
                         >{{ t('search.vrlOnlyForTableWarning') }}</span
                       >
                     </div>
@@ -1508,8 +1511,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       />
       <div>
         <div
-          class="text-sm font-semibold leading-tight pr-2"
-          :class="store.state.theme === 'dark' ? 'text-[#e5e5e5]' : 'text-[#262626]'"
+          class="text-sm font-semibold leading-tight pr-2 text-text-label"
         >{{ t("search.fileType") }}</div>
         <OButtonGroup
           data-test="custom-download-file-type-button-group"
@@ -1659,7 +1661,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         {{ t("search.maxEventsScheduleJob") }}
       </div>
       <div class="opacity-80 text-left mapping-warning-msg mt-3">
-        <OIcon name="warning" size="sm" class="mr-2 text-red-500" />
+        <OIcon name="warning" size="sm" class="mr-2 text-status-error-text" />
         <span>{{ t("search.histogramDisabledScheduleJob") }}</span>
       </div>
     </ODialog>
@@ -1720,10 +1722,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <div data-test="logs-search-saved-view-list" class="flex">
             <div
               class="flex flex-col"
-              :class="localSavedViews.length > 0 ? 'border-r border-[var(--o2-border-color)]' : ''"
+              :class="localSavedViews.length > 0 ? 'border-r border-card-glass-border' : ''"
               :style="localSavedViews.length > 0 ? 'width: 60%' : 'width: 100%'"
             >
-              <div style="max-height: 486px; min-height: 280px; display: flex; flex-direction: column;">
+              <div class="flex flex-col" style="max-height: 486px; min-height: 280px">
               <OTable
                 data-test="log-search-saved-view-list-fields-table"
                 :data="searchObj.data.savedViews"
@@ -1732,7 +1734,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :global-filter="searchObj.data.savedViewFilterFields"
                 :page-size="rowsPerPage"
                 :page-size-options="[10, 20, 50]"
-                class="saved-view-table full-height o2-table-hide-header"
+                class="saved-view-table h-full! max-h-full o2-table-hide-header"
               >
                 <template #top>
                   <div class="px-2 py-2 w-full min-w-0 box-border">
@@ -1749,7 +1751,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     v-if="searchObj.loadingSavedView == true"
                     class="w-full p-2"
                   >
-                    <div class="text-sm font-medium text-weight-bold">
+                    <div class="text-sm font-medium font-bold">
                       <OSpinner size="xs" />
                       {{ t("confirmDialog.loading") }}
                     </div>
@@ -1772,7 +1774,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   <div class="flex items-center gap-0.5">
                     <OButton
                       :title="t('common.favourite')"
-                      class="logs-saved-view-icon action-btn-hover"
+                      class="hover:text-text-body! hover:bg-interactive-hover-bg! action-btn-hover"
                       variant="ghost-neutral"
                       size="icon-sm"
                       :data-test="`logs-search-bar-favorite-${row.view_id}-saved-view-btn`"
@@ -1799,7 +1801,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     </OButton>
                     <OButton
                       :title="t('common.edit')"
-                      class="logs-saved-view-icon action-btn-hover"
+                      class="hover:text-text-body! hover:bg-interactive-hover-bg! action-btn-hover"
                       variant="ghost-neutral"
                       size="icon-sm"
                       :data-test="`logs-search-bar-update-${row.view_id}-saved-view-btn`"
@@ -1809,7 +1811,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     </OButton>
                     <OButton
                       :title="t('common.delete')"
-                      class="logs-saved-view-icon action-btn-hover"
+                      class="hover:text-text-body! hover:bg-interactive-hover-bg! action-btn-hover"
                       variant="ghost-neutral"
                       size="icon-sm"
                       :data-test="`logs-search-bar-delete-${row.view_id}-saved-view-btn`"
@@ -1837,18 +1839,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               class="flex flex-col w-[40%] ml-0 pl-3"
               v-if="localSavedViews.length > 0"
             >
-              <div style="max-height: 480px; min-height: 280px; display: flex; flex-direction: column;">
+              <div class="flex flex-col" style="max-height: 480px; min-height: 280px">
               <OTable
                 data-test="log-search-saved-view-favorite-list-fields-table"
                 :data="localSavedViews"
                 :columns="savedViewColumns"
                 row-key="view_id"
                 pagination="none"
-                class="saved-view-table full-height o2-table-hide-header"
+                class="saved-view-table h-full! max-h-full o2-table-hide-header"
               >
                 <template #top>
                   <div
-                    class="p-2 font-bold favorite-label text-xs uppercase tracking-wide text-muted-foreground"
+                    class="p-2 font-bold text-xs leading-6 uppercase tracking-wide text-muted-foreground"
                   >
                     {{ t("search.favoriteViews") }}
                   </div>
@@ -1871,7 +1873,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   <div class="flex items-center gap-0.5">
                     <OButton
                       :title="t('common.favourite')"
-                      class="logs-saved-view-icon action-btn-hover"
+                      class="hover:text-text-body! hover:bg-interactive-hover-bg! action-btn-hover"
                       variant="ghost-neutral"
                       size="icon-sm"
                       :data-test="`logs-search-bar-favorite-${row.view_id}-saved-view-btn`"
@@ -1881,7 +1883,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     </OButton>
                     <OButton
                       :title="t('common.edit')"
-                      class="logs-saved-view-icon action-btn-hover"
+                      class="hover:text-text-body! hover:bg-interactive-hover-bg! action-btn-hover"
                       variant="ghost-neutral"
                       size="icon-sm"
                       :data-test="`logs-search-bar-update-${row.view_id}-favorite-saved-view-btn`"
@@ -1891,7 +1893,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     </OButton>
                     <OButton
                       :title="t('common.delete')"
-                      class="logs-saved-view-icon action-btn-hover"
+                      class="hover:text-text-body! hover:bg-interactive-hover-bg! action-btn-hover"
                       variant="ghost-neutral"
                       size="icon-sm"
                       :data-test="`logs-search-bar-delete-${row.view_id}-favorite-saved-view-btn`"
@@ -1929,6 +1931,7 @@ import {
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
 import { useStore } from "vuex";
+import { useTheme } from "@/composables/useTheme";
 import DateTime from "@/components/DateTime.vue";
 import ShareButton from "@/components/common/ShareButton.vue";
 import OButton from "@/lib/core/Button/OButton.vue";
@@ -2268,6 +2271,7 @@ export default defineComponent({
     const router = useRouter();
     const { t } = useI18n();
     const store = useStore();
+    const { isDark } = useTheme();
     const { showErrorNotification } = useNotifications();
     const rowsPerPage = ref(10);
     const savedViewColumns = [
@@ -2391,12 +2395,10 @@ export default defineComponent({
         if (open) savedFunctionForm.reset(savedFunctionDefaults.value);
       },
     );
-    // Parity with the pre-migration toggle handler (main cleared the name on
-    // every mode switch: `isSavedFunctionAction = $event; savedFunctionName = ''`).
     // Clear ONLY the create-mode name field when the mode changes so toggling
     // update→create shows a blank input, not a stale name (the update select is
-    // untouched). `dontUpdateMeta`/`dontValidate` mirror the old naked assignment
-    // — no touched/dirty marking, no premature "required" flash.
+    // untouched). `dontUpdateMeta`/`dontValidate` avoid touched/dirty marking
+    // and a premature "required" flash.
     watch(savedFunctionMode, () => {
       savedFunctionForm.setFieldValue("savedFunctionName", "", {
         dontUpdateMeta: true,
@@ -2672,7 +2674,7 @@ export default defineComponent({
     });
 
     const showFunctionEditor = computed(() => {
-      // IF actions are disabled, we are reverting to the old behavior of function editor
+      // When actions are disabled, fall back to the transform-editor toggle
       if (!isActionsEnabled.value) return searchObj.meta.showTransformEditor;
 
       return searchObj.data.transformType === "function";
@@ -3357,7 +3359,7 @@ export default defineComponent({
     });
 
     // @submit handler — the schema already gated the name/select per mode
-    // (required + the restored alphanumeric regexes), so there is no imperative
+    // (required + alphanumeric regexes), so there is no imperative
     // field validation here. The content check is a NON-form guard (about the
     // function-editor content). Loading is form-driven (OForm awaits this).
     // Declared as a hoisted function so useOForm (above) can reference it.
@@ -4107,7 +4109,7 @@ export default defineComponent({
     };
 
     // @submit handler — the schema already gated the name (required + the
-    // restored `/^[A-Za-z0-9 _-]+$/` alphanumeric rule) in create mode and the
+    // `/^[A-Za-z0-9 _-]+$/` alphanumeric rule) in create mode and the
     // selected view in update mode, so there is no imperative validation here.
     // Loading is form-driven (OForm awaits createSavedViews).
     const handleSavedView = async (value: SavedViewForm) => {
@@ -4115,8 +4117,8 @@ export default defineComponent({
         await createSavedViews(value.savedViewName);
       }
       // The update branch is intentionally a no-op: updating from this dialog
-      // was disabled (the legacy logic was commented out); the schema still
-      // requires a selected view so this path can't run with an empty select.
+      // is disabled; the schema still requires a selected view so this path
+      // can't run with an empty select.
     };
 
     const deleteSavedViews = async () => {
@@ -4878,7 +4880,7 @@ export default defineComponent({
       if (!searchObj.data.transformType === "function" && isFocused.value) {
         return {
           width: `calc(100 - ${searchObj.config.fnSplitterModel})%`,
-          borderBottom: "0.125rem solid var(--o2-border-color)",
+          borderBottom: "0.125rem solid var(--color-card-glass-border)",
         };
       } else {
         return {
@@ -4911,7 +4913,7 @@ export default defineComponent({
       return (
         "img:" +
         getImageURL(
-          store.state.theme === "dark"
+          isDark.value
             ? "images/common/function_dark.svg"
             : "images/common/function.svg",
         )
@@ -5058,47 +5060,47 @@ export default defineComponent({
     const visualizeIcon = computed(() => {
       return searchObj.meta.logsVisualizeToggle === "visualize"
         ? getImageURL("images/common/visualize_icon_light.svg")
-        : store.state.theme == "dark"
+        : isDark.value
           ? getImageURL("images/common/visualize_icon_light.svg")
           : getImageURL("images/common/visualize_icon_dark.svg");
     });
     const histogramIcon = computed(() => {
-      return store.state.theme === "dark"
+      return isDark.value
         ? getImageURL("images/common/bar_chart_histogram_light.svg")
         : getImageURL("images/common/bar_chart_histogram.svg");
     });
     const sqlIcon = computed(() => {
-      return store.state.theme === "dark"
+      return isDark.value
         ? getImageURL("images/common/hugeicons_sql_light.svg")
         : getImageURL("images/common/hugeicons_sql.svg");
     });
     const quickModeIcon = computed(() => {
-      return store.state.theme === "dark"
+      return isDark.value
         ? getImageURL("images/common/quick_mode_light.svg")
         : getImageURL("images/common/quick_mode.svg");
     });
     const searchHistoryIcon = computed(() => {
-      return store.state.theme === "dark"
+      return isDark.value
         ? getImageURL("images/common/search_history_light.svg")
         : getImageURL("images/common/search_history.svg");
     });
     const downloadTableIcon = computed(() => {
-      return store.state.theme === "dark"
+      return isDark.value
         ? getImageURL("images/common/download_table_light.svg")
         : getImageURL("images/common/download_table.svg");
     });
     const customRangeIcon = computed(() => {
-      return store.state.theme === "dark"
+      return isDark.value
         ? getImageURL("images/common/custom_range_light.svg")
         : getImageURL("images/common/custom_range.svg");
     });
     const createScheduledSearchIcon = computed(() => {
-      return store.state.theme === "dark"
+      return isDark.value
         ? getImageURL("images/common/create_scheduled_search_light.svg")
         : getImageURL("images/common/create_scheduled_search.svg");
     });
     const listScheduledSearchIcon = computed(() => {
-      return store.state.theme === "dark"
+      return isDark.value
         ? getImageURL("images/common/list_scheduled_search_light.svg")
         : getImageURL("images/common/list_scheduled_search.svg");
     });
@@ -5642,61 +5644,90 @@ export default defineComponent({
 });
 </script>
 
-<style>
-.search-download-item::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 100%;
-  width: 0.625rem;
-  height: 100%;
-}
-
-
-/* When function editor is open, move AI button flush to the right of the query panel */
-.fn-editor-open .ai-floating-button {
-  right: 0.25rem;
-}
-
-
-.o2-table-hide-header thead {
-  display: none;
-}
-
-.saved-view-table .action-btn-hover {
+<style scoped>
+/* keep(complex-state): every selector below reaches into OTable's internal DOM
+   (its <td>, its border/pagination wrappers, its footer chip) from the
+   .saved-view-table modifier this file puts on the OTable root, so they need
+   :deep() rather than template utilities — the markup is not ours to annotate. */
+.saved-view-table :deep(.action-btn-hover) {
   opacity: 0;
   transition: opacity 0.15s;
 }
 
-.saved-view-table tr:hover .action-btn-hover {
+.saved-view-table :deep(tr:hover .action-btn-hover) {
   opacity: 1;
 }
 
 /* Remove outer box border so both panels blend into the dialog background
-   Exclude elements that also have rounded-md (OInput wrapper) so the
+   Exclude elements that also have rounded-default (OInput wrapper) so the
    search input keeps its visible border. */
-.saved-view-table .border:not(.rounded-md) {
+.saved-view-table :deep(.border:not(.rounded-default)) {
   border: none;
 }
 
 /* Normalize cell background and strip the auto-pin shadow
    (isAction columns are auto-pinned right by OTable, which adds an inline box-shadow) */
-.saved-view-table td {
+.saved-view-table :deep(td) {
   background: transparent;
   box-shadow: none !important;
+  padding: 0;
+  height: 1.5625rem !important;
+  min-height: 1.5625rem !important;
+}
+
+/* ── .logs-search-bar-component: the root modifier this file puts on its own
+   wrapper. The rest of the former global block (18 nested rules — .reset-filters,
+   .toggle-container, .ddlWrapper/.listWrapper, .savedview-dropdown, #logsQueryEditor,
+   #fnEditor, the legacy `> .row` rules, …) targeted DOM that no longer exists
+   and was deleted rather than moved. */
+.logs-search-bar-component {
+  height: 100%;
+  overflow: visible;
+}
+
+.logs-search-bar-component .download-logs-btn {
+  height: 1.875rem;
+  border-radius: var(--radius-default);
+  transition: all 0.2s ease;
+}
+
+.logs-search-bar-component .download-logs-btn:hover {
+  background-color: var(--color-interactive-hover-bg);
+}
+
+.logs-search-bar-component .query-editor-container {
+  height: calc(100% - 2.9rem) !important;
+}
+
+/* padding-left intentionally outranks the `px-1` utility on this button — that
+   is the pre-existing computed result. */
+.logs-search-bar-component .region-dropdown-btn {
+  text-transform: capitalize;
+  font-weight: 600;
+  font-size: var(--text-xs);
+  padding-left: 0.5rem;
+  height: 1.875rem;
+  padding-top: 0.1875rem;
+  border-radius: var(--radius-default);
+}
+
+/* keep(lib-override:o2): .saved-view-item is rendered by the Function/Transform
+   selector child components, so it needs :deep(). The !important outranks the
+   px-3/py-2 utilities TransformSelector puts on the same node. */
+.logs-search-bar-component :deep(.saved-view-item) {
+  padding: 0.125rem 0.25rem !important;
 }
 
 /* Remove pagination top separator */
-.saved-view-table .border-t {
+.saved-view-table :deep(.border-t) {
   border-top: none;
 }
 
 /* Hide the redundant total-count chip on the left — "of N" on the right already shows it */
-.saved-view-table [data-test="o2-table-pagination-bottom"] .o2-table-footer-title {
+.saved-view-table :deep([data-test="o2-table-pagination-bottom"] [data-test="o2-table-pagination-actions"]) {
   display: none;
 }
 
-
 /* Query editor placeholder text styling is global (styles/tailwind.css) —
    shared with traces, RUM sessions, RUM error tracking, and alerts. */
 </style>
diff --git a/web/src/plugins/logs/SearchHistory.vue b/web/src/plugins/logs/SearchHistory.vue
index 8b59e82c21..e6fd9f0f93 100644
--- a/web/src/plugins/logs/SearchHistory.vue
+++ b/web/src/plugins/logs/SearchHistory.vue
@@ -1,25 +1,28 @@
 <template>
-  <div class="w-full h-full flex flex-col min-h-0">
-    <AppPageHeader
-      :title="t('search_history.title')"
-      icon="history"
-      :back="{ onClick: closeSearchHistory }"
-      class="shrink-0 px-4 border-b border-border-default"
-    >
+  <OPageLayout
+    :title="t('search_history.title')"
+    icon="history"
+    :back="{ onClick: closeSearchHistory }"
+    bleed
+  >
       <template #actions>
           <OButton
             data-test="search-history-wrap-content-btn"
             variant="ghost"
             size="icon"
-            class="wrap-content-btn"
-            :class="{ 'wrap-content-btn--active': wrapText }"
+            class="h-6! min-h-6! w-[1.45rem]! p-0! m-0 border-[0.0626rem]! border-solid! border-card-glass-border! rounded-default! [transition:all_0.2s_ease] backdrop-blur-[0.625rem]! flex! items-center! justify-center!"
+            :class="
+              wrapText
+                ? 'bg-theme-accent! text-white hover:opacity-85'
+                : 'bg-white/10! hover:bg-white/15!'
+            "
             @click="wrapText = !wrapText"
           >
             <OIcon name="wrap-text" size="sm" />
             <OTooltip :content="t('search.messageWrapContent')" />
           </OButton>
           <div
-            class="text-[#f5a623] border border-[#f5a623] flex items-center px-2 h-[36px] rounded-md"
+            class="text-status-warning-text border border-status-warning-text flex items-center px-2 h-9 rounded-default"
           >
             <OIcon name="info" class="mr-1" size="sm" />
             <div>
@@ -51,8 +54,7 @@
             </OButton>
           </div>
       </template>
-    </AppPageHeader>
-    <div class="card-container flex-1 min-h-0 overflow-hidden">
+    <div class="bg-card-glass-bg flex-1 min-h-0 overflow-hidden">
           <OTable
             :frame="false"
             :data="dataToBeLoaded"
@@ -83,11 +85,14 @@
             </template>
 
             <template #cell-sql="{ row }">
-              <span class="text-text-primary">{{ row.sql }}</span>
+              <span class="text-text-body">{{ row.sql }}</span>
             </template>
 
             <template #expansion="{ row }">
-              <div class="app-tabs-container w-fit my-1">
+              <!-- px-4 matches the SQL/Function/More-Details blocks below so the
+                   tabs line up with the query content instead of sitting flush
+                   to the cell edge (same inset the scheduler list uses). -->
+              <div class="app-tabs-container w-fit my-1 px-4">
                 <app-tabs
                   data-test="expanded-list-tabs"
                   class="tabs-selection-container"
@@ -96,29 +101,37 @@
                 />
               </div>
               <div v-show="activeTab === 'query'">
-                <div class="text-left px-2 mb-2 expanded-content">
+                <div class="text-left mb-2 px-4 py-0 w-[calc(95vw-2.5rem)] min-w-[calc(90vw-1.25rem)] max-h-screen overflow-hidden">
                   <div class="flex items-center py-2 gap-2">
                     <strong
                       >{{ t('logs.searchHistory.sqlQueryLabel') }}
                       <span>
+                        <!-- Copy is a neutral action in both sections; the SQL/VRL
+                             accent lives on the block's left border, which marks
+                             which language you're looking at. -->
                         <OButton
-                          variant="ghost"
-                          size="icon"
-                          class="copy-btn-sql ml-2"
+                          data-test="search-history-copy-sql-btn"
+                          variant="outline"
+                          size="icon-chip"
+                          class="ml-2"
                           @click.stop="
                             copyToClipboard(row.sql, { successMessage: t('logs.searchHistory.sqlQueryCopied'), timeout: 5000 })
                           "
                         >
-                          <OIcon name="content-copy" size="sm" /> </OButton></span
+                          <OIcon name="content-copy" size="xs" /> </OButton></span
                     ></strong>
+                    <!-- Logs and Inspect are both navigations, so they share one
+                         variant and size. -->
+                    <!-- No mx-2: the row is already `gap-2`, so a margin here
+                         stacked on top of it and doubled the spacing to 16px. -->
                     <OButton
-                      variant="outline-destructive"
+                      data-test="search-history-go-to-logs-btn"
+                      variant="outline"
                       size="chip"
-                      class="copy-btn mx-2"
                       @click.stop="goToLogs(row)"
                     >
                       <template #icon-left
-                        ><OIcon name="search" size="sm"
+                        ><OIcon name="search" size="xs"
                       /></template>
                       {{ t('logs.searchHistory.logs') }}
                     </OButton>
@@ -128,35 +141,49 @@
                         config.isCloud == 'false' &&
                         store.state.zoConfig.search_inspector_enabled
                       "
-                      variant="ghost"
-                      size="sm"
-                      class="copy-btn"
+                      data-test="search-history-inspect-btn"
+                      variant="outline"
+                      size="chip"
                       @click.stop="goToInspector(row)"
                     >
                       <template #icon-left
-                        ><OIcon name="analytics" size="sm"
+                        ><OIcon name="analytics" size="xs"
                       /></template>
                       {{ t('logs.searchHistory.inspect') }}
                     </OButton>
                   </div>
                   <div class="flex items-start justify-center">
-                    <div class="scrollable-content expanded-sql">
-                      <pre style="text-wrap: wrap">{{ row?.sql }}</pre>
+                    <div
+                      class="w-full overflow-y-auto p-2.5 h-full max-h-50 border border-border-default border-l-3 border-l-sql-accent bg-surface-subtle text-text-body o2-colorized-query"
+                    >
+                      <!-- Monaco-colorized SQL (sanitized in colorizeRow), same
+                           as the dashboard Query Inspector. Falls back to plain
+                           text for the frame before colorize resolves, and if
+                           Monaco throws (colorizeQuery escapes on failure). -->
+                      <pre
+                        v-if="colorizedSql[row.uuid]"
+                        class="font-mono text-compact leading-[1.6] m-0 whitespace-pre-wrap break-words"
+                        data-test="search-history-sql-colorized"
+                        v-html="colorizedSql[row.uuid]"
+                      ></pre>
+                      <pre v-else class="font-mono text-compact leading-[1.6] m-0 whitespace-pre-wrap break-words">{{ row?.sql }}</pre>
                     </div>
                   </div>
                 </div>
                 <div
                   v-if="row?.function"
-                  class="text-left mb-2 px-2 expanded-content"
+                  class="text-left mb-2 px-4 py-0 w-[calc(95vw-2.5rem)] min-w-[calc(90vw-1.25rem)] max-h-screen overflow-hidden"
                 >
                   <div class="flex items-center py-2">
                     <strong
                       >{{ t('logs.searchHistory.functionDefinitionLabel') }}
                       <span>
+                        <!-- Same neutral copy affordance as the SQL block above. -->
                         <OButton
-                          variant="ghost"
-                          size="icon"
-                          class="copy-btn-function ml-2"
+                          data-test="search-history-copy-function-btn"
+                          variant="outline"
+                          size="icon-chip"
+                          class="ml-2"
                           @click.stop="
                             copyToClipboard(
                               row.function,
@@ -164,27 +191,38 @@
                             )
                           "
                         >
-                          <OIcon name="content-copy" size="sm" /> </OButton></span
+                          <OIcon name="content-copy" size="xs" /> </OButton></span
                     ></strong>
                   </div>
 
                   <div class="flex items-start justify-center">
-                    <div class="scrollable-content expanded-function">
-                      <pre style="text-wrap: wrap">{{ row?.function }}</pre>
+                    <div
+                      class="w-full overflow-y-auto p-2.5 h-full max-h-50 border border-border-default border-l-3 border-l-function-accent bg-surface-subtle text-text-body o2-colorized-query"
+                    >
+                      <pre
+                        v-if="colorizedFunction[row.uuid]"
+                        class="font-mono text-compact leading-[1.6] m-0 whitespace-pre-wrap break-words"
+                        data-test="search-history-function-colorized"
+                        v-html="colorizedFunction[row.uuid]"
+                      ></pre>
+                      <pre v-else class="font-mono text-compact leading-[1.6] m-0 whitespace-pre-wrap break-words">{{ row?.function }}</pre>
                     </div>
                   </div>
                 </div>
               </div>
-              <query-editor
-                v-show="activeTab === 'more_details'"
-                style="height: 200px"
-                :ref="`QueryEditorRef${row.trace_id + row.sql}`"
-                :editor-id="`search-query-editor${row.trace_id + row.sql}`"
-                :debounceTime="600"
-                v-model:query="moreDetailsToDisplay"
-                language="json"
-                read-only
-              />
+              <!-- px-4 keeps the More Details editor aligned with the tabs and
+                   the query blocks above. -->
+              <div v-show="activeTab === 'more_details'" class="px-4">
+                <query-editor
+                  style="height: 200px"
+                  :ref="`QueryEditorRef${row.trace_id + row.sql}`"
+                  :editor-id="`search-query-editor${row.trace_id + row.sql}`"
+                  :debounceTime="600"
+                  v-model:query="moreDetailsToDisplay"
+                  language="json"
+                  read-only
+                />
+              </div>
             </template>
 
             <template #empty>
@@ -195,10 +233,10 @@
 
             <template #bottom>
               <div
-                class="flex items-center justify-between w-full h-[48px]"
+                class="flex items-center justify-between w-full h-12"
               >
                 <div
-                  class="o2-table-footer-title flex items-center w-[100px] mr-md"
+                  class="text-xs font-normal flex items-center w-25 mr-md"
                 >
                   {{ resultTotal }} {{ t("search_history.results") }}
                 </div>
@@ -207,7 +245,7 @@
             </template>
           </OTable>
     </div>
-  </div>
+  </OPageLayout>
 
   <!-- Show NoData component if there's no data to display -->
 </template>
@@ -226,6 +264,8 @@ import { defineAsyncComponent, defineComponent } from "vue";
 import { searchState } from "@/composables/useLogs/searchState";
 import TenstackTable from "../../plugins/logs/TenstackTable.vue";
 import searchService from "@/services/search";
+import DOMPurify from "dompurify";
+import { colorizeQuery } from "@/utils/query/colorizeQuery";
 import NoData from "@/components/shared/grid/NoData.vue";
 import OEmptyState from "@/lib/core/EmptyState/OEmptyState.vue";
 import DateTime from "@/components/DateTime.vue";
@@ -238,7 +278,7 @@ import OIcon from "@/lib/core/Icon/OIcon.vue";
 import OTable from "@/lib/core/Table/OTable.vue";
 import OTimeCell from "@/lib/core/Table/cells/OTimeCell.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import { useShortcuts, getManager } from "@/lib/vue-shortcut-manager";
 import { isInputFocused } from "@/utils/keyboardShortcuts";
 import type { OTableColumnDef } from "@/lib/core/Table/OTable.types";
@@ -267,7 +307,7 @@ export default defineComponent({
     OTooltip,
     OTable,
     OTimeCell,
-    AppPageHeader,
+    OPageLayout,
 },
   props: {
     isClicked: {
@@ -521,6 +561,27 @@ export default defineComponent({
       return { formatted: result, raw: rawDuration };
     };
 
+    /* Monaco-colorized SQL / VRL for the expanded row, keyed by row uuid — the
+       same treatment the dashboard Query Inspector gives its queries. Colorizing
+       is async and only the expanded row is ever visible, so it runs on expand
+       rather than up-front for every row. */
+    const colorizedSql = ref<Record<string, string>>({});
+    const colorizedFunction = ref<Record<string, string>>({});
+
+    const colorizeRow = async (row: any) => {
+      if (!row?.uuid) return;
+      if (row.sql && colorizedSql.value[row.uuid] === undefined) {
+        colorizedSql.value[row.uuid] = DOMPurify.sanitize(
+          await colorizeQuery(row.sql, "sql"),
+        );
+      }
+      if (row.function && colorizedFunction.value[row.uuid] === undefined) {
+        colorizedFunction.value[row.uuid] = DOMPurify.sanitize(
+          await colorizeQuery(row.function, "vrl"),
+        );
+      }
+    };
+
     const onExpandedIdsChange = (ids: string[]) => {
       expandedIds.value = ids;
       const expandedId = ids[0];
@@ -531,6 +592,7 @@ export default defineComponent({
       const row = dataToBeLoaded.value.find((r: any) => r.uuid === expandedId);
       if (row) {
         moreDetailsToDisplay.value = JSON.stringify(filterRow(row), null, 2);
+        colorizeRow(row);
       }
     };
     const goToLogs = (row) => {
@@ -641,6 +703,8 @@ export default defineComponent({
       goToLogs,
       goToInspector,
       onExpandedIdsChange,
+      colorizedSql,
+      colorizedFunction,
       copyToClipboard,
       formatTime,
       delayMessage,
@@ -657,3 +721,14 @@ export default defineComponent({
   },
 });
 </script>
+
+<style scoped>
+/* keep(generated-content): Monaco's colorize() injects .mtkN token spans via
+   v-html, so these can't be template utilities. Every colour but .mtk1 comes
+   from Monaco's own global stylesheet; .mtk1 is its default-text token, which
+   we point back at the block's own colour so the query inherits our theme
+   instead of Monaco's. Mirrors dashboards/QueryInspector.vue. */
+.o2-colorized-query :deep(.mtk1) {
+  color: inherit;
+}
+</style>
diff --git a/web/src/plugins/logs/SearchJobInspector.spec.ts b/web/src/plugins/logs/SearchJobInspector.spec.ts
index 742ef6625a..0e7ac62178 100644
--- a/web/src/plugins/logs/SearchJobInspector.spec.ts
+++ b/web/src/plugins/logs/SearchJobInspector.spec.ts
@@ -19,6 +19,7 @@ import SearchJobInspector from "@/plugins/logs/SearchJobInspector.vue";
 import i18n from "@/locales";
 import store from "@/test/unit/helpers/store";
 import searchService from "@/services/search";
+import { chartColor } from "@/utils/chartTheme";
 
 
 // ── Stubs for migrated ODialog / ODrawer ────────────────────────────────────
@@ -347,18 +348,19 @@ describe("SearchJobInspector — getResponseTimeLabel", () => {
     expect(wrapper.vm.getResponseTimeLabel(9999).text).toBe("Slow response");
   });
 
-  it("uses green color class in dark theme for ultra-fast/fast", () => {
+  // The dark/light green pair collapsed to a single semantic status token.
+  it("uses the positive status color class in dark theme for ultra-fast/fast", () => {
     store.commit("appTheme", "dark");
     const wrapper = mountComponent();
-    expect(wrapper.vm.getResponseTimeLabel(10).colorClass).toBe("text-green-400");
-    expect(wrapper.vm.getResponseTimeLabel(100).colorClass).toBe("text-green-400");
+    expect(wrapper.vm.getResponseTimeLabel(10).colorClass).toBe("text-status-positive");
+    expect(wrapper.vm.getResponseTimeLabel(100).colorClass).toBe("text-status-positive");
   });
 
-  it("uses green color class in light theme for ultra-fast/fast", () => {
+  it("uses the positive status color class in light theme for ultra-fast/fast", () => {
     store.commit("appTheme", "light");
     const wrapper = mountComponent();
-    expect(wrapper.vm.getResponseTimeLabel(10).colorClass).toBe("text-green-600");
-    expect(wrapper.vm.getResponseTimeLabel(100).colorClass).toBe("text-green-600");
+    expect(wrapper.vm.getResponseTimeLabel(10).colorClass).toBe("text-status-positive");
+    expect(wrapper.vm.getResponseTimeLabel(100).colorClass).toBe("text-status-positive");
     store.commit("appTheme", "dark"); // restore
   });
 });
@@ -373,8 +375,12 @@ describe("SearchJobInspector — getDurationColor", () => {
     setProfileData(wrapper, {
       events: [{ component: "a", duration: 100, timestamp: "0" }],
     });
-    expect(wrapper.vm.getDurationColor(100)).toBe("#f44336"); // 100% → red
-    expect(wrapper.vm.getDurationColor(76)).toBe("#f44336");  // 76% → red
+    expect(wrapper.vm.getDurationColor(100)).toBe(
+      chartColor("--color-service-health-critical"),
+    ); // 100% → critical
+    expect(wrapper.vm.getDurationColor(76)).toBe(
+      chartColor("--color-service-health-critical"),
+    ); // 76% → critical
   });
 
   it("returns orange for > 50% and <= 75% of maxDuration", () => {
@@ -382,8 +388,12 @@ describe("SearchJobInspector — getDurationColor", () => {
     setProfileData(wrapper, {
       events: [{ component: "a", duration: 100, timestamp: "0" }],
     });
-    expect(wrapper.vm.getDurationColor(51)).toBe("#ff9800");
-    expect(wrapper.vm.getDurationColor(75)).toBe("#ff9800");
+    expect(wrapper.vm.getDurationColor(51)).toBe(
+      chartColor("--color-service-health-degraded"),
+    );
+    expect(wrapper.vm.getDurationColor(75)).toBe(
+      chartColor("--color-service-health-degraded"),
+    );
   });
 
   it("returns yellow for > 25% and <= 50% of maxDuration", () => {
@@ -391,8 +401,12 @@ describe("SearchJobInspector — getDurationColor", () => {
     setProfileData(wrapper, {
       events: [{ component: "a", duration: 100, timestamp: "0" }],
     });
-    expect(wrapper.vm.getDurationColor(26)).toBe("#ffc107");
-    expect(wrapper.vm.getDurationColor(50)).toBe("#ffc107");
+    expect(wrapper.vm.getDurationColor(26)).toBe(
+      chartColor("--color-service-health-warning"),
+    );
+    expect(wrapper.vm.getDurationColor(50)).toBe(
+      chartColor("--color-service-health-warning"),
+    );
   });
 
   it("returns green for <= 25% of maxDuration", () => {
@@ -400,8 +414,12 @@ describe("SearchJobInspector — getDurationColor", () => {
     setProfileData(wrapper, {
       events: [{ component: "a", duration: 100, timestamp: "0" }],
     });
-    expect(wrapper.vm.getDurationColor(25)).toBe("#4caf50");
-    expect(wrapper.vm.getDurationColor(1)).toBe("#4caf50");
+    expect(wrapper.vm.getDurationColor(25)).toBe(
+      chartColor("--color-service-health-healthy"),
+    );
+    expect(wrapper.vm.getDurationColor(1)).toBe(
+      chartColor("--color-service-health-healthy"),
+    );
   });
 });
 
diff --git a/web/src/plugins/logs/SearchJobInspector.vue b/web/src/plugins/logs/SearchJobInspector.vue
index 486831dc3b..9c5fc3cf8b 100644
--- a/web/src/plugins/logs/SearchJobInspector.vue
+++ b/web/src/plugins/logs/SearchJobInspector.vue
@@ -15,71 +15,55 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="p-0 bg-(--q-background) w-full h-full flex flex-col min-h-0">
-    <AppPageHeader
-      :title="t('logs.searchJobInspector.title')"
-      :back="{ onClick: goBack, dataTest: 'inspector-close-button' }"
-      class="shrink-0 px-4 border-b border-border-default"
-    >
+  <OPageLayout
+    class="bg-surface-base"
+    :title="t('logs.searchJobInspector.title')"
+    :back="{ onClick: goBack, dataTest: 'inspector-close-button' }"
+    bleed
+  >
       <template #title>
         <span data-test="inspector-title">{{ t('logs.searchJobInspector.title') }}</span>
       </template>
       <template #actions>
         <div
           v-if="profileData && !hasNoData"
-          :class="[
-            'flex items-center gap-1.5 px-2 py-1 rounded-md border',
-            store.state.theme === 'dark'
-              ? 'bg-gray-800/50 border-gray-600'
-              : 'bg-gray-50 border-gray-200'
-          ]"
+          class="flex items-center gap-1.5 px-2 py-1 rounded-default border bg-surface-panel border-border-default"
         >
-          <svg class="w-3.5 h-3.5 opacity-70" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <rect x="3" y="6" width="18" height="14" rx="2" :stroke="store.state.theme === 'dark' ? '#9CA3AF' : '#6B7280'" stroke-width="2"/>
-            <path d="M3 10h18M8 3v4M16 3v4" :stroke="store.state.theme === 'dark' ? '#9CA3AF' : '#6B7280'" stroke-width="2" stroke-linecap="round"/>
+          <svg class="w-3.5 h-3.5 opacity-70 text-icon-color" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect x="3" y="6" width="18" height="14" rx="2" stroke="currentColor" stroke-width="2"/>
+            <path d="M3 10h18M8 3v4M16 3v4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
           </svg>
           <div class="flex items-center gap-1.5">
             <span
-              :class="[
-                'text-[10px] font-small px-1.5 py-0.5 rounded',
-                store.state.theme === 'dark'
-                  ? 'text-gray-300 bg-gray-700/50'
-                  : 'text-gray-600 bg-gray-100'
-              ]"
+              class="text-3xs font-small px-1.5 py-0.5 rounded-default text-text-secondary bg-surface-subtle"
             >
               {{ store.state.timezone || 'UTC' }}
             </span>
             <div
-              :class="[
-                'text-xs font-semibold',
-                store.state.theme === 'dark' ? 'text-gray-200' : 'text-gray-800'
-              ]"
+              class="text-xs font-semibold text-text-body"
             >
               {{ formatTimeRange(profileData.start_time, profileData.end_time) }}
             </div>
           </div>
         </div>
       </template>
-    </AppPageHeader>
     <div class="w-full flex flex-col flex-1 min-h-0 overflow-hidden pt-2.5">
       <!-- Summary Stats Card -->
-      <div v-if="!loading" class="mb-[0.625rem] mx-2.5 shrink-0">
+      <div v-if="!loading" class="mb-2.5 mx-2.5 shrink-0">
         <div class="grid gap-3" style="grid-template-columns: 1fr 1fr 1fr 1.6fr 0.9fr;">
           <!-- Results Returned -->
           <div class="stat-tile">
             <div
-              class="rounded-lg p-3 border shadow-sm h-28 flex flex-col justify-between"
-              :class="store.state.theme === 'dark' ? 'bg-[#181A1B] border-gray-700' : 'bg-white border-gray-200'"
+              class="rounded-default p-3 border h-28 flex flex-col justify-between bg-surface-base border-border-default"
             >
               <div class="flex justify-between items-start">
                 <div
-                  class="text-base font-small"
-                  :class="store.state.theme === 'dark' ? 'text-gray-400' : 'text-gray-500'"
+                  class="text-base font-small text-text-label"
                 >
                   {{ t('logs.searchJobInspector.results') }}
                 </div>
                 <div
-                  class="w-10 h-10 rounded-lg flex items-center justify-center border"
+                  class="w-10 h-10 rounded-default flex items-center justify-center border"
                   style="background: rgba(57, 126, 246, 0.2); border-color: rgba(57, 126, 246, 0.35);"
                 >
                   <img src="@/assets/images/home/records.svg" :alt="t('logs.searchJobInspector.resultsIconAlt')" class="h-6 w-6" />
@@ -87,14 +71,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </div>
               <div class="flex flex-col gap-1">
                 <div
-                  class="text-2xl font-bold"
-                  :class="store.state.theme === 'dark' ? 'text-white' : 'text-gray-900'"
+                  class="text-2xl font-bold text-text-body"
                 >
                   {{ hasNoData ? 'NA' : (profileData?.data_records || 0).toLocaleString() }}
                 </div>
                 <div
-                  class="text-[10px]"
-                  :class="store.state.theme === 'dark' ? 'text-gray-500' : 'text-gray-400'"
+                  class="text-3xs text-text-secondary"
                 >
                   {{ t('logs.searchJobInspector.returnedFromQuery') }}
                 </div>
@@ -105,18 +87,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- Events Scanned -->
           <div class="stat-tile">
             <div
-              class="rounded-lg p-3 border shadow-sm h-28 flex flex-col justify-between"
-              :class="store.state.theme === 'dark' ? 'bg-[#181A1B] border-gray-700' : 'bg-white border-gray-200'"
+              class="rounded-default p-3 border h-28 flex flex-col justify-between bg-surface-base border-border-default"
             >
               <div class="flex justify-between items-start">
                 <div
-                  class="text-base font-small"
-                  :class="store.state.theme === 'dark' ? 'text-gray-400' : 'text-gray-500'"
+                  class="text-base font-small text-text-label"
                 >
                   {{ t('logs.searchJobInspector.scannedEvents') }}
                 </div>
                 <div
-                  class="w-10 h-10 rounded-lg flex items-center justify-center border"
+                  class="w-10 h-10 rounded-default flex items-center justify-center border"
                   style="background: rgba(57, 126, 246, 0.2); border-color: rgba(57, 126, 246, 0.35);"
                 >
                   <img src="@/assets/images/home/streams.svg" :alt="t('logs.searchJobInspector.eventsIconAlt')" class="h-6 w-6" />
@@ -124,14 +104,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </div>
               <div class="flex flex-col gap-1">
                 <div
-                  class="text-2xl font-bold"
-                  :class="store.state.theme === 'dark' ? 'text-white' : 'text-gray-900'"
+                  class="text-2xl font-bold text-text-body"
                 >
                   {{ hasNoData ? 'NA' : (profileData?.scan_records || 0).toLocaleString() }}
                 </div>
                 <div
-                  class="text-[10px]"
-                  :class="store.state.theme === 'dark' ? 'text-gray-500' : 'text-gray-400'"
+                  class="text-3xs text-text-secondary"
                 >
                   {{ t('logs.searchJobInspector.scannedEventsForQuery') }}
                 </div>
@@ -142,36 +120,33 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- Time Taken -->
           <div class="stat-tile">
             <div
-              class="rounded-lg p-3 border shadow-sm h-28 flex flex-col justify-between"
-              :class="store.state.theme === 'dark' ? 'bg-[#181A1B] border-gray-700' : 'bg-white border-gray-200'"
+              class="rounded-default p-3 border h-28 flex flex-col justify-between bg-surface-base border-border-default"
             >
               <div class="flex justify-between items-start">
                 <div
-                  class="text-base font-small"
-                  :class="store.state.theme === 'dark' ? 'text-gray-400' : 'text-gray-500'"
+                  class="text-base font-small text-text-label"
                 >
                   {{ t('logs.searchJobInspector.timeTaken') }}
                 </div>
                 <div
-                  class="w-10 h-10 rounded-lg flex items-center justify-center border"
+                  class="w-10 h-10 rounded-default flex items-center justify-center border"
                   style="background: rgba(34, 197, 94, 0.2); border-color: rgba(34, 197, 94, 0.35);"
                 >
-                  <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <circle cx="12" cy="12" r="9" :stroke="store.state.theme === 'dark' ? '#10B981' : '#059669'" stroke-width="2"/>
-                    <path d="M12 6v6l4 2" :stroke="store.state.theme === 'dark' ? '#10B981' : '#059669'" stroke-width="2" stroke-linecap="round"/>
+                  <svg class="h-6 w-6 text-status-positive" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2"/>
+                    <path d="M12 6v6l4 2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                   </svg>
                 </div>
               </div>
               <div class="flex flex-col gap-1">
                 <div
-                  class="text-2xl font-bold"
-                  :class="store.state.theme === 'dark' ? 'text-white' : 'text-gray-900'"
+                  class="text-2xl font-bold text-text-body"
                 >
                   {{ hasNoData ? 'NA' : formatDuration(profileData?.time_taken || profileData?.total_duration) }}
                 </div>
                 <div
-                  class="text-[10px]"
-                  :class="hasNoData ? (store.state.theme === 'dark' ? 'text-gray-500' : 'text-gray-400') : getResponseTimeLabel(profileData?.time_taken || profileData?.total_duration).colorClass"
+                  class="text-3xs"
+                  :class="hasNoData ? 'text-text-secondary' : getResponseTimeLabel(profileData?.time_taken || profileData?.total_duration).colorClass"
                 >
                   {{ hasNoData ? t('logs.searchJobInspector.noData') : getResponseTimeLabel(profileData?.time_taken || profileData?.total_duration).text }}
                 </div>
@@ -182,30 +157,28 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- Trace ID -->
           <div class="stat-tile">
             <div
-              class="rounded-lg p-3 border shadow-sm h-28 flex flex-col justify-between"
-              :class="store.state.theme === 'dark' ? 'bg-[#181A1B] border-gray-700' : 'bg-white border-gray-200'"
+              class="rounded-default p-3 border h-28 flex flex-col justify-between bg-surface-base border-border-default"
             >
               <div class="flex justify-between items-start">
                 <div
-                  class="text-base font-small"
-                  :class="store.state.theme === 'dark' ? 'text-gray-400' : 'text-gray-500'"
+                  class="text-base font-small text-text-label"
                 >
                   {{ t('logs.searchJobInspector.traceId') }}
                 </div>
                 <div
-                  class="w-10 h-10 rounded-lg flex items-center justify-center border"
+                  class="w-10 h-10 rounded-default flex items-center justify-center border"
                   style="background: rgba(242, 220, 245, 0.25); border-color: rgba(242, 220, 245, 0.45);"
                 >
                   <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M7 8h10M7 12h10M7 16h6" :stroke="store.state.theme === 'dark' ? '#E9D5FD' : '#A855F7'" stroke-width="2" stroke-linecap="round"/>
-                    <rect x="3" y="4" width="18" height="16" rx="2" :stroke="store.state.theme === 'dark' ? '#E9D5FD' : '#A855F7'" stroke-width="2"/>
+                    <path d="M7 8h10M7 12h10M7 16h6" :stroke="isDark ? '#E9D5FD' : '#A855F7'" stroke-width="2" stroke-linecap="round"/>
+                    <rect x="3" y="4" width="18" height="16" rx="2" :stroke="isDark ? '#E9D5FD' : '#A855F7'" stroke-width="2"/>
                   </svg>
                 </div>
               </div>
               <div class="flex flex-col gap-1">
                 <div
                   class="text-sm font-mono truncate font-semibold leading-tight overflow-hidden"
-                  :class="hasNoData ? (store.state.theme === 'dark' ? 'text-gray-400' : 'text-gray-500') : (store.state.theme === 'dark' ? 'text-blue-400' : 'text-blue-600')"
+                  :class="hasNoData ? 'text-text-secondary' : 'text-text-link'"
                 >
                   {{ hasNoData ? 'NA' : traceId }}
                   <OTooltip v-if="!hasNoData" :content="traceId" />
@@ -217,24 +190,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- View Query -->
           <div class="stat-tile">
             <div
-              class="rounded-lg p-3 border shadow-sm h-28 flex flex-col items-center justify-center transition-all"
-              :class="[
-                store.state.theme === 'dark' ? 'bg-[#181A1B] border-gray-700' : 'bg-white border-gray-200',
-                hasNoData ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer hover:border-primary hover:shadow-lg'
-              ]"
+              class="rounded-default p-3 border h-28 flex flex-col items-center justify-center transition-all bg-surface-base border-border-default"
+              :class="hasNoData ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer hover:border-primary hover:shadow-lg'"
               @click="!hasNoData && (showSqlDialog = true)"
             >
               <div
-                class="w-12 h-12 rounded-lg flex items-center justify-center border mb-2"
+                class="w-12 h-12 rounded-default flex items-center justify-center border mb-2"
                 style="background: rgba(245, 235, 147, 0.25); border-color: rgba(245, 235, 147, 0.45);"
               >
-                <svg class="h-7 w-7" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M9 4H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-5M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z" :stroke="store.state.theme === 'dark' ? '#FDE68A' : '#CA8A04'" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                <svg class="h-7 w-7 text-status-warning-text" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M9 4H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-5M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
               </div>
               <div
-                class="text-sm font-semibold"
-                :class="store.state.theme === 'dark' ? 'text-blue-400' : 'text-blue-600'"
+                class="text-sm font-semibold text-text-link"
               >
                 {{ t('logs.searchJobInspector.viewQuery') }}
               </div>
@@ -249,13 +218,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         variant="error"
         icon="error"
         :content="errorMessage"
-        class="mb-[0.625rem] shrink-0"
+        class="mb-2.5 shrink-0"
         data-test="inspector-error-banner"
       />
 
       <!-- Profile Data Table (OTable handles loading skeleton) -->
       <div v-if="loading || (profileData && profileData.events)" class="w-full flex-1 min-h-0 overflow-hidden">
-        <div class="card-container h-full">
+        <div class="bg-card-glass-bg h-full">
           <OTable
             :data="hierarchicalEvents"
             :columns="columns"
@@ -269,8 +238,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             :enable-column-resize="true"
             :persist-columns="true"
             table-id="logs-search-job-inspector"
-            style="width: 100%;"
-            class="o2-table o2-row-md o2-table-header-sticky"
+            class="o2-table o2-row-md o2-table-header-sticky w-full"
             data-test="inspector-events-table"
           >
             <template #cell-index="{ row }">
@@ -278,15 +246,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </template>
 
             <template #cell-duration="{ row }">
-              <div class="flex items-center gap-2 min-w-[150px]">
+              <div class="flex items-center gap-2 min-w-37.5">
                 <div
-                  class="h-5 rounded-[3px] min-w-[4px] transition-[width] duration-300 ease-in-out"
+                  class="h-5 rounded-default min-w-1 transition-[width] duration-300 ease-in-out"
                   :style="{
                     width: calculateBarWidth(row.duration) + '%',
                     backgroundColor: getDurationColor(row.duration),
                   }"
                 ></div>
-                <span class="text-[13px] whitespace-nowrap min-w-[50px]">{{ formatDuration(row.duration) }}</span>
+                <span class="text-compact whitespace-nowrap min-w-12.5">{{ formatDuration(row.duration) }}</span>
               </div>
             </template>
 
@@ -307,7 +275,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </div>
 
     <!-- SQL Query Dialog -->
-    <ODrawer data-test="search-job-inspector-sql-drawer" v-model:open="showSqlDialog" size="lg" :title="t('logs.searchJobInspector.sqlQuery')">
+    <ODrawer data-test="search-job-inspector-sql-drawer" bleed v-model:open="showSqlDialog" size="lg" :title="t('logs.searchJobInspector.sqlQuery')">
       <template #header-right>
         <OButton
           v-if="profileData?.sql"
@@ -315,7 +283,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           size="icon-sm"
           :class="[
                 'border',
-                copiedSql ? 'text-green-600 border-green-400' : 'border-gray-300'
+                copiedSql ? 'text-status-positive border-status-positive' : 'border-border-default'
               ]"
           @click="copySql"
           data-test="inspector-copy-sql-btn"
@@ -326,11 +294,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </OButton>
       </template>
       <div
-        class="rounded p-4 max-h-[calc(100vh-150px)] overflow-auto"
-        :class="store.state.theme === 'dark' ? 'bg-[#1e1e1e]' : 'bg-[#f5f5f5]'"
+        class="rounded-default p-4 max-h-[calc(100vh-150px)] overflow-auto bg-surface-subtle"
       >
         <pre
-          class="font-mono text-[13px] leading-[1.6] m-0 whitespace-pre-wrap break-words"
+          class="font-mono text-compact leading-[1.6] m-0 whitespace-pre-wrap break-words"
           data-test="inspector-sql-query-content"
         >{{ profileData?.sql || t('logs.searchJobInspector.noSqlAvailable') }}</pre>
       </div>
@@ -339,8 +306,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <!-- Trace ID Dialog -->
     <ODialog data-test="search-job-inspector-trace-id-dialog" v-model:open="showTraceIdDialog" size="sm" :title="t('logs.searchJobInspector.fullTraceId')">
       <div class="flex items-center gap-3">
-        <div class="flex-1 font-mono text-sm break-all p-3 rounded border"
-             :class="store.state.theme === 'dark' ? 'bg-gray-800 border-gray-700 text-blue-400' : 'bg-gray-50 border-gray-200 text-blue-600'">
+        <div class="flex-1 font-mono text-sm break-all p-3 rounded-default border bg-surface-panel border-border-default text-text-link">
           {{ traceId }}
         </div>
         <OButton
@@ -350,7 +316,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         ><OIcon name="content-copy" size="sm"  class="mr-1" /></OButton>
       </div>
     </ODialog>
-  </div>
+  </OPageLayout>
 </template>
 
 <script lang="ts">
@@ -359,8 +325,9 @@ import { useRouter, useRoute } from "vue-router";
 import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
 import searchService from "@/services/search";
+import { chartColor } from "@/utils/chartTheme";
 import NoData from "@/components/shared/grid/NoData.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import OButton from "@/lib/core/Button/OButton.vue";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import ODrawer from "@/lib/overlay/Drawer/ODrawer.vue";
@@ -374,6 +341,7 @@ import { COL } from "@/lib/core/Table/OTable.types";
 import { toast } from "@/lib/feedback/Toast/useToast";
 import OBanner from "@/lib/feedback/Banner/OBanner.vue";
 import { copyToClipboard } from "@/utils/clipboard";
+import { useTheme } from "@/composables/useTheme";
 
 interface ProfileEvent {
   timestamp: string;
@@ -412,7 +380,7 @@ export default defineComponent({
   name: "SearchJobInspector",
   components: {
     NoData,
-    AppPageHeader,
+    OPageLayout,
     OButton,
     ODrawer,
     ODialog,
@@ -425,6 +393,7 @@ export default defineComponent({
     const router = useRouter();
     const route = useRoute();
     const store = useStore();
+    const { isDark } = useTheme();
     const { t } = useI18n();
 
     const loading = ref(false);
@@ -600,10 +569,10 @@ export default defineComponent({
 
     const getDurationColor = (duration: number) => {
       const percentage = (duration / maxDuration.value) * 100;
-      if (percentage > 75) return "#f44336"; // red
-      if (percentage > 50) return "#ff9800"; // orange
-      if (percentage > 25) return "#ffc107"; // yellow
-      return "#4caf50"; // green
+      if (percentage > 75) return chartColor("--color-service-health-critical");
+      if (percentage > 50) return chartColor("--color-service-health-degraded");
+      if (percentage > 25) return chartColor("--color-service-health-warning");
+      return chartColor("--color-service-health-healthy");
     };
 
     const formatDuration = (ms: number | undefined) => {
@@ -627,32 +596,32 @@ export default defineComponent({
     };
 
     const getResponseTimeLabel = (ms: number | undefined) => {
-      if (!ms) return { text: t("logs.searchJobInspector.noData"), colorClass: "text-gray-400" };
+      if (!ms) return { text: t("logs.searchJobInspector.noData"), colorClass: "text-text-secondary" };
 
       if (ms < 50) {
         return {
           text: t("logs.searchJobInspector.ultraFastResponse"),
-          colorClass: store.state.theme === 'dark' ? 'text-green-400' : 'text-green-600'
+          colorClass: "text-status-positive"
         };
       } else if (ms < 200) {
         return {
           text: t("logs.searchJobInspector.fastResponse"),
-          colorClass: store.state.theme === 'dark' ? 'text-green-400' : 'text-green-600'
+          colorClass: "text-status-positive"
         };
       } else if (ms < 500) {
         return {
           text: t("logs.searchJobInspector.goodResponse"),
-          colorClass: store.state.theme === 'dark' ? 'text-blue-400' : 'text-blue-600'
+          colorClass: "text-text-link"
         };
       } else if (ms < 1000) {
         return {
           text: t("logs.searchJobInspector.moderateResponse"),
-          colorClass: store.state.theme === 'dark' ? 'text-yellow-400' : 'text-yellow-600'
+          colorClass: "text-status-warning-text"
         };
       } else {
         return {
           text: t("logs.searchJobInspector.slowResponse"),
-          colorClass: store.state.theme === 'dark' ? 'text-red-400' : 'text-red-600'
+          colorClass: "text-status-error-text"
         };
       }
     };
diff --git a/web/src/plugins/logs/SearchResult.spec.ts b/web/src/plugins/logs/SearchResult.spec.ts
index 3e0c9da660..825b160089 100644
--- a/web/src/plugins/logs/SearchResult.spec.ts
+++ b/web/src/plugins/logs/SearchResult.spec.ts
@@ -833,7 +833,7 @@ describe("SearchResult Component", () => {
   // ───────────────────────────────────────────────────────────────────────────
   // ODrawer migration coverage
   //
-  // The Detail Tab was migrated from <q-dialog> to <ODrawer>. These tests
+  // The Detail Tab was migrated to <ODrawer>. These tests
   // pin the v-model:open binding to searchObj.meta.showDetailTab and the
   // close behaviour (which must trigger reDrawChart).
   // ───────────────────────────────────────────────────────────────────────────
diff --git a/web/src/plugins/logs/SearchResult.vue b/web/src/plugins/logs/SearchResult.vue
index 9d34e882a6..f7055af0f8 100644
--- a/web/src/plugins/logs/SearchResult.vue
+++ b/web/src/plugins/logs/SearchResult.vue
@@ -18,20 +18,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <!-- eslint-disable vue/attribute-hyphenation -->
 <template>
   <div
-    class="flex flex-col full-height"
-    style="
-      overflow: hidden !important;
-      padding: 0 !important;
-      margin: 0 !important;
-      height: 100%;
-    "
+    class="flex flex-col h-full max-h-full overflow-hidden"
   >
     <div
-      class="search-list full-height w-full flex flex-col"
+      class="h-full max-h-full overflow-hidden w-full flex flex-col"
       ref="searchListContainer"
     >
       <!-- Section header: static at top -->
-      <div class="flex items-center h-[2.25rem] shrink-0 result-bar bg-surface-panel">
+      <div class="flex items-center h-9 shrink-0 border-b border-card-glass-border bg-card-glass-bg">
         <!-- Field panel toggle — same style as add-panel config sidebar -->
         <OButton
           variant="outline"
@@ -51,7 +45,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           />
         </OButton>
         <div
-          class="flex-1 min-w-0 text-left pl-2 bg-amber-500 text-white rounded"
+          class="flex-1 min-w-0 text-left pl-2 bg-warning text-text-inverse rounded-default"
           v-if="searchObj.data.countErrorMsg != ''"
         >
           <SanitizedHtmlRenderer
@@ -61,7 +55,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
         <div
           v-else
-          class="flex-1 min-w-0 text-left pl-2 warning flex items-center flex-wrap gap-1.5"
+          class="flex-1 min-w-0 text-left pl-2 text-warning flex items-center flex-wrap gap-1.5"
           data-test="logs-search-result-title"
           :data-search-state="searchObj.loading || searchObj.loadingCounter ? 'loading' : 'complete'"
           :data-hits-count="searchObj.data?.queryResults?.hits?.length ?? 0"
@@ -110,7 +104,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <span v-else class="truncate min-w-0">{{ patternSummaryText }}</span>
           </template>
           <span v-if="searchObj.loadingCounter" class="shrink-0">
-            <OSpinner size="xs" class="search-spinner" />
+            <OSpinner size="xs" class="mx-auto block" />
           </span>
           <div
             v-else-if="
@@ -118,19 +112,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               !searchObj.loadingCounter &&
               searchObj.meta.showHistogram
             "
-            class="shrink-0 cursor-pointer"
-            :class="
-              store.state.theme == 'dark'
-                ? 'histogram-unavailable-text'
-                : 'histogram-unavailable-text-light'
-            "
+            class="shrink-0 cursor-pointer text-warning"
           >
             <OIcon name="info-outline" size="sm"> </OIcon>
             <OTooltip :content="searchObj.data.histogram.errorMsg" side="top" align="center" />
           </div>
         </div>
 
-        <div class="flex-none pr-2 pagination-block flex items-center justify-end gap-1">
+        <div class="flex-none pr-2 flex items-center justify-end gap-1">
           <!-- OVERFLOW MENU (narrow): refresh + all action buttons collapse here -->
           <ODropdown v-if="shouldMoveActionsToMenu" side="bottom" align="end">
             <template #trigger>
@@ -182,7 +171,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- INLINE BUTTONS (wider container) -->
           <template v-else>
             <!-- Refresh in bordered wrapper -->
-            <div class="inline-flex items-center border border-[var(--o2-border-color)] rounded-md px-1 h-6 overflow-hidden">
+            <div class="inline-flex items-center border border-card-glass-border rounded-default px-1 h-6 overflow-hidden">
               <ORefreshButton
                 :last-run-at="searchObj.meta.lastRunAt"
                 :loading="searchObj.loading || searchObj.loadingHistogram"
@@ -276,7 +265,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </div>
 
       <!-- Combined scroll area: histogram + logs/patterns scroll together -->
-      <div class="flex-1 overflow-y-auto overflow-x-hidden" ref="scrollContainerRef">
+      <div class="flex-1 overflow-auto" ref="scrollContainerRef">
         <div
           ref="histogramRef"
           :class="[
@@ -312,7 +301,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               ref="histogramChart"
               data-test="logs-search-result-bar-chart"
               :data="plotChart"
-              style="width: 100%; height: 100%"
+              class="w-full h-full"
               @updated:dataZoom="onChartUpdate"
             />
           </div>
@@ -502,8 +491,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               !searchObj.meta.showHistogram ||
               (searchObj.meta.showHistogram &&
                 searchObj.data.histogram.errorCode == -1)
-                ? 'table-container--without-histogram'
-                : 'table-container--with-histogram',
+                ? 'min-h-full!'
+                : 'min-h-[calc(100%-6.25rem)]!',
             ]"
             @update:columnSizes="handleColumnSizesUpdate"
             @update:columnOrder="handleColumnOrderUpdate"
@@ -527,8 +516,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             !searchObj.meta.showHistogram ||
             (searchObj.meta.showHistogram &&
               searchObj.data.histogram.errorCode == -1)
-              ? 'table-container--without-histogram'
-              : 'table-container--with-histogram',
+              ? 'min-h-full!'
+              : 'min-h-[calc(100%-6.25rem)]!',
           ]"
         >
           <!-- Patterns List -->
@@ -553,6 +542,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <!-- end combined scroll area -->
 
       <ODrawer
+        bleed
         lazy
         data-test="logs-search-result-detail-dialog"
         v-model:open="searchObj.meta.showDetailTab"
@@ -575,7 +565,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :correlation-loading="correlationLoading"
           :correlation-error="correlationError"
           :initial-tab="detailTableInitialTab"
-          class="detail-table-dialog"
+          class="rounded-default"
           :currentIndex="searchObj.meta.resultGrid.navigation.currentRowIndex"
           :totalLength="parseInt(searchObj.data.queryResults.hits.length)"
           :highlight-query="searchObj.data.highlightQuery"
@@ -667,6 +657,7 @@ import {
 } from "vue";
 import { copyToClipboard } from "@/utils/clipboard";
 import { useStore } from "vuex";
+import { useTheme } from "@/composables/useTheme";
 import { useI18n } from "vue-i18n";
 
 import { byString } from "../../utils/json";
@@ -966,6 +957,7 @@ export default defineComponent({
     // https://stackoverflow.com/questions/6491463/accessing-nested-javascript-objects-and-arrays-by-string-path
     const { t } = useI18n();
     const store = useStore();
+    const { isDark } = useTheme();
     const searchListContainer = ref<HTMLElement | null>(null);
 
     // Responsive: observe the outer container (reacts to splitter + window resize)
@@ -1163,7 +1155,7 @@ export default defineComponent({
 
     // Watch for theme color changes in localStorage
     const handleThemeColorChange = () => {
-      const currentMode = store.state.theme === "dark" ? "dark" : "light";
+      const currentMode = isDark.value ? "dark" : "light";
       const appliedThemeName = localStorage.getItem(
         THEME_STORAGE_KEYS[currentMode].appliedName,
       );
@@ -1181,7 +1173,7 @@ export default defineComponent({
 
     // Re-render stacked chart with correct palette when dark/light mode switches
     watch(
-      () => store.state.theme,
+      () => isDark.value,
       () => reDrawChart(),
     );
 
@@ -1358,7 +1350,7 @@ export default defineComponent({
             xData,
             breakdownSeries,
             { ...chartParams, breakdownField: breakdownField ?? null },
-            store.state.theme === "dark",
+            isDark.value,
           );
         } else {
           plotChart.value = convertLogData(xData, yData, chartParams);
@@ -1927,6 +1919,7 @@ export default defineComponent({
     });
 
     return {
+      isDark,
       t,
       store,
       config,
@@ -2088,3 +2081,305 @@ export default defineComponent({
 });
 </script>
 
+
+<style lang="scss" scoped>
+/* keep(generated-content): pin-breakdown tooltip. The rows are built from data
+   via v-for with per-row inline colours, and the whole tooltip is
+   <Teleport to="body">; Vue still stamps the scope id onto teleported nodes, so
+   `scoped` reaches it. Surfaces/borders/text use the theme-flipping tokens;
+   include/exclude actions use --color-status-info-* / --color-status-error-*
+   with color-mix tints. */
+.oo-pin-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 9998;
+}
+
+.oo-pin-tooltip {
+  position: fixed;
+  z-index: 9999;
+  min-width: 12.5rem;
+  max-height: 20vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background: var(--color-surface-base);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-surface);
+  box-shadow: var(--shadow-lg);
+  padding: 0.5rem 0;
+  font-size: var(--text-xs);
+  color: var(--color-text-heading);
+  outline: none;
+
+  &__time {
+    font-size: var(--text-2xs);
+    font-weight: 500;
+    opacity: 0.65;
+    padding: 0 0.625rem 0.25rem;
+    margin-bottom: 0;
+    border-bottom: 1px solid color-mix(in srgb, var(--color-grey-500) 15%, transparent);
+  }
+
+  &__row {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 1px 0.625rem;
+    transition: background 0.1s;
+
+    &:hover {
+      background: color-mix(in srgb, var(--color-grey-500) 12%, transparent);
+    }
+  }
+
+  &__dot {
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  &__name {
+    flex: 1;
+    white-space: nowrap;
+  }
+
+  &__count {
+    font-weight: 600;
+    min-width: 2rem;
+    text-align: right;
+    transition: opacity 0.1s;
+  }
+
+  &__row-actions {
+    display: flex;
+    gap: 0.1875rem;
+    flex-shrink: 0;
+    margin-left: 0.25rem;
+  }
+
+  &__action {
+    width: 1.375rem;
+    height: 1.375rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-default);
+    cursor: pointer;
+    font-size: var(--text-compact);
+    font-weight: 700;
+    line-height: 1;
+
+    &--include {
+      background: color-mix(in srgb, var(--color-status-info-text) 12%, transparent);
+      color: var(--color-status-info-text);
+
+      &:hover {
+        background: color-mix(in srgb, var(--color-status-info-text) 25%, transparent);
+      }
+    }
+
+    &--exclude {
+      background: color-mix(in srgb, var(--color-status-error-text) 8%, transparent);
+      color: var(--color-status-error-text);
+
+      &:hover {
+        background: color-mix(in srgb, var(--color-status-error-text) 20%, transparent);
+      }
+    }
+  }
+}
+
+/* keep(lib-override:opagination): reaches into the OPagination/OSelect-rendered
+   button DOM to compress the pagination controls into the results toolbar. */
+.paginator-section {
+  line-height: 1.5rem;
+  max-height: 2rem;
+  border-radius: 0.5rem;
+  padding: 0.125rem 0.25rem;
+  background: color-mix(in srgb, var(--color-white) 10%, transparent);
+  backdrop-filter: blur(0.625rem);
+  margin-top: 0;
+  overflow: visible;
+
+  :deep(.o-pagination__btn) {
+    padding: 0.125rem 0.25rem !important;
+    height: 1.5rem !important;
+    min-height: 1.5rem !important;
+    min-width: 1.5rem !important;
+    font-size: var(--text-xs) !important;
+    border-radius: 0.25rem !important;
+    line-height: 1rem !important;
+
+    svg {
+      width: 1rem !important;
+      height: 1rem !important;
+    }
+  }
+}
+
+.select-pagination {
+  position: relative;
+  width: 4rem !important;
+  height: 1.5rem !important;
+  margin-top: 0;
+
+  :deep(button) {
+    height: 1.5rem !important;
+    min-height: 1.5rem !important;
+    font-size: var(--text-xs) !important;
+    padding-inline: 0.5rem !important;
+  }
+}
+/* keep(keyframes): the histogram skeleton's shimmer @keyframes and the
+   animation: that references it must stay in the same scoped block so Vue
+   renames both consistently. */
+.histogram-container {
+  border-radius: 0.5rem;
+  position: relative;
+
+  &--visible {
+    height: 6.25rem;
+    padding-top: 0.25rem;
+    opacity: 1;
+    transition: all 0.3s ease-in-out;
+  }
+
+  &--hidden {
+    height: 0;
+    opacity: 0;
+    overflow: hidden;
+    transition: all 0.3s ease-in-out;
+  }
+}
+
+.histogram-chart {
+  /* Explicit height (not just max-height): the ChartRenderer inside sizes
+     with h-full, and a percentage height collapses to 0 against an
+     auto-height parent — which renders an empty histogram strip. */
+  height: 6rem;
+  max-height: 6.25rem;
+  border-radius: 0.5rem;
+}
+
+.histogram-empty {
+  height: 6.25rem;
+  border-radius: 0.5rem;
+
+  &__message {
+    min-height: 2rem;
+  }
+}
+
+.histogram-skeleton {
+  --hsk-bar:     var(--color-grey-100);
+  --hsk-shimmer: color-mix(in srgb, var(--color-white) 65%, transparent);
+
+  .dark & {
+    --hsk-bar:     var(--color-grey-700);
+    --hsk-shimmer: color-mix(in srgb, var(--color-white) 6%, transparent);
+  }
+
+  height: 6.25rem;
+  display: flex;
+  flex-direction: column;
+  padding-top: 0.25rem;
+  overflow: hidden;
+
+  &__main {
+    flex: 1;
+    display: flex;
+    min-height: 0;
+  }
+
+  &__y-axis {
+    width: 2.25rem;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-end;
+    padding-right: 0.3125rem;
+    padding-bottom: 0.125rem;
+  }
+
+  &__y-label {
+    height: 0.4375rem;
+    border-radius: 0.125rem;
+    background-color: var(--hsk-bar);
+  }
+
+  &__plot {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    border-left: 1px solid var(--color-card-glass-border);
+    border-bottom: 1px solid var(--color-card-glass-border);
+  }
+
+  &__bars {
+    flex: 1;
+    display: flex;
+    align-items: flex-end;
+    gap: 0.125rem;
+    padding: 0.25rem 0.25rem 0;
+    overflow: hidden;
+    position: relative;
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: -100%;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(
+        90deg,
+        transparent        0%,
+        transparent       20%,
+        var(--hsk-shimmer) 50%,
+        transparent       80%,
+        transparent       100%
+      );
+      animation: histogram-bar-shimmer 1.6s ease-in-out infinite;
+      pointer-events: none;
+    }
+  }
+
+  &__bar {
+    flex: 0 0 0.4375rem;
+    flex-shrink: 0;
+    border-radius: 0.0625rem 0.0625rem 0 0;
+    background-color: var(--hsk-bar);
+  }
+
+  &__x-axis {
+    display: flex;
+    justify-content: space-between;
+    padding-left: 2.25rem;
+    padding-top: 0.1875rem;
+  }
+
+  &__x-label {
+    width: 2.25rem;
+    height: 0.4375rem;
+    border-radius: 0.125rem;
+    background-color: var(--color-skeleton-base);
+  }
+}
+
+@keyframes histogram-bar-shimmer {
+  from { left: -100%; }
+  to   { left: 100%; }
+}
+
+.histogram-error {
+  margin: 0.5rem 0;
+  border-radius: 0.5rem;
+
+  &__message {
+    min-height: 2rem;
+  }
+}
+</style>
diff --git a/web/src/plugins/logs/SearchSchedulersList.spec.ts b/web/src/plugins/logs/SearchSchedulersList.spec.ts
index 42e22cac54..76c6f6607b 100644
--- a/web/src/plugins/logs/SearchSchedulersList.spec.ts
+++ b/web/src/plugins/logs/SearchSchedulersList.spec.ts
@@ -116,17 +116,7 @@ describe("SearchSchedulersList Component", () => {
           store,
         },
         stubs: {
-                    'q-table': true,
-          'q-tr': true,
-          'q-td': true,
-          'q-btn': true,
           'OIcon': true,
-          'q-toggle': true,
-          'q-tabs': true,
-          'q-tab': true,
-          'q-tab-panels': true,
-          'q-tab-panel': true,
-          'q-select': true,
           'DateTime': {
             template: '<div class="mock-datetime"></div>',
             methods: {
diff --git a/web/src/plugins/logs/SearchSchedulersList.vue b/web/src/plugins/logs/SearchSchedulersList.vue
index 6a3fbce033..ee0627599d 100644
--- a/web/src/plugins/logs/SearchSchedulersList.vue
+++ b/web/src/plugins/logs/SearchSchedulersList.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="w-full h-full flex flex-col min-h-0">
-    <div v-if="!showSearchResults" class="h-full flex flex-col min-h-0">
-      <AppPageHeader
-        :title="t('search_scheduler_job.title')"
-        icon="schedule"
-        :back="{ onClick: closeSearchHistory }"
-        class="shrink-0 px-4 border-b border-border-default"
-      >
+    <OPageLayout
+      v-if="!showSearchResults"
+      :title="t('search_scheduler_job.title')"
+      icon="schedule"
+      :back="{ onClick: closeSearchHistory }"
+      bleed
+    >
         <template #actions>
           <div class="flex items-center gap-1">
             <OTableColumnToggle
@@ -27,8 +27,7 @@
             </OButton>
           </div>
         </template>
-      </AppPageHeader>
-      <div class="card-container flex-1 min-h-0 overflow-hidden">
+      <div class="bg-card-glass-bg flex-1 min-h-0 overflow-hidden">
           <OTable
             :frame="false"
             data-test="search-scheduler-table"
@@ -116,7 +115,7 @@
               />
             </template>
             <template #expansion="{ row }">
-              <div class="app-tabs-schedule-list report-list-tabs">
+              <div class="app-tabs-schedule-list px-4 py-0 h-fit w-fit">
                 <app-tabs
                   data-test="expanded-list-tabs"
                   class="mr-3"
@@ -125,25 +124,24 @@
                 />
               </div>
               <div v-if="activeTab == 'query'">
-                <div class="text-left px-2 mb-2 expanded-content">
-                  <div class="flex items-center py-2">
+                <div class="text-left mb-2 px-4 py-0 w-[calc(95vw-2.5rem)] min-w-[calc(90vw-1.25rem)] max-h-screen overflow-hidden">
+                  <div class="flex items-center py-2 gap-2">
                     <strong
                       >{{ t('search_scheduler_job.sql_query') }} :
                       <span>
                         <OButton
-                          variant="ghost"
-                          size="icon"
-                          class="copy-btn-sql ml-2"
+                          variant="outline"
+                          size="icon-chip"
+                          class="ml-2"
                           data-test="search-scheduler-copy-sql-btn"
                           @click.stop="copyToClipboard(row.sql, { successMessage: `${t('logs.searchSchedulersList.sqlQuery')} ${t('search_scheduler_job.copy_success')}`, timeout: 5000 })"
                         >
-                          <OIcon name="content-copy" size="sm" />
+                          <OIcon name="content-copy" size="xs" />
                         </OButton></span
                     ></strong>
                     <OButton
-                      variant="ghost-destructive"
-                      size="sm"
-                      class="copy-btn mx-2"
+                      variant="outline"
+                      size="chip"
                       data-test="search-scheduler-go-to-logs-btn"
                       :disabled="
                         row.status_code == 0 ||
@@ -156,40 +154,59 @@
                     </OButton>
                   </div>
                   <div class="flex items-start justify-center">
-                    <div class="scrollable-content expanded-sql">
-                      <pre style="text-wrap: wrap">{{ row?.sql }}</pre>
+                    <div
+                      class="w-full overflow-y-auto p-2.5 h-full max-h-50 border border-border-default border-l-3 border-l-sql-accent bg-surface-subtle text-text-body o2-colorized-query"
+                    >
+                      <!-- Monaco-colorized SQL (sanitized in colorizeRow). Falls
+                           back to plain text before colorize resolves / if it throws. -->
+                      <pre
+                        v-if="colorizedSql[row.trace_id]"
+                        class="font-mono text-compact leading-[1.6] m-0 whitespace-pre-wrap break-words"
+                        data-test="search-scheduler-sql-colorized"
+                        v-html="colorizedSql[row.trace_id]"
+                      ></pre>
+                      <pre v-else class="font-mono text-compact leading-[1.6] m-0 whitespace-pre-wrap break-words">{{ row?.sql }}</pre>
                     </div>
                   </div>
                 </div>
                 <div
                   v-if="row?.function"
-                  class="text-left mb-2 px-2 expanded-content"
+                  class="text-left mb-2 px-4 py-0 w-[calc(95vw-2.5rem)] min-w-[calc(90vw-1.25rem)] max-h-screen overflow-hidden"
                 >
-                  <div class="flex items-center py-2">
+                  <div class="flex items-center py-2 gap-2">
                     <strong
                       >{{ t('search_scheduler_job.function_definition') }} :
                       <span>
                         <OButton
-                          variant="ghost"
-                          size="icon"
-                          class="copy-btn-function ml-2"
+                          data-test="search-scheduler-copy-function-btn"
+                          variant="outline"
+                          size="icon-chip"
+                          class="ml-2"
                           @click.stop="copyToClipboard(row.function, { successMessage: `${t('logs.searchSchedulersList.functionDefinationCopy')} ${t('search_scheduler_job.copy_success')}`, timeout: 5000 })"
                         >
-                          <OIcon name="content-copy" size="sm" />
+                          <OIcon name="content-copy" size="xs" />
                         </OButton></span
                     ></strong>
                   </div>
 
                   <div class="flex items-start justify-center">
-                    <div class="scrollable-content expanded-function">
-                      <pre style="text-wrap: wrap">{{ row?.function }}</pre>
+                    <div
+                      class="w-full overflow-y-auto p-2.5 h-full max-h-50 border border-border-default border-l-3 border-l-function-accent bg-surface-subtle text-text-body o2-colorized-query"
+                    >
+                      <pre
+                        v-if="colorizedFunction[row.trace_id]"
+                        class="font-mono text-compact leading-[1.6] m-0 whitespace-pre-wrap break-words"
+                        data-test="search-scheduler-function-colorized"
+                        v-html="colorizedFunction[row.trace_id]"
+                      ></pre>
+                      <pre v-else class="font-mono text-compact leading-[1.6] m-0 whitespace-pre-wrap break-words">{{ row?.function }}</pre>
                     </div>
                   </div>
                 </div>
               </div>
               <div class="py-3" v-else>
                 <div
-                  class="text-left px-2 mb-2 expanded-content flex flex-col"
+                  class="text-left mb-2 px-4 py-0 w-[calc(95vw-2.5rem)] min-w-[calc(90vw-1.25rem)] max-h-screen overflow-hidden flex flex-col"
                 >
                   <query-editor
                     style="height: 130px"
@@ -205,8 +222,8 @@
               </div>
             </template>
             <template #bottom>
-              <div class="flex items-center justify-between w-full h-[48px]">
-                <div class="o2-table-footer-title flex items-center w-[100px] mr-md">
+              <div class="flex items-center justify-between w-full h-12">
+                <div class="text-xs font-normal flex items-center w-25 mr-md">
                   {{ resultTotal }} {{ t('search_scheduler_job.results') }}
                 </div>
                 <div class="ml-auto mr-2">{{ t('search_scheduler_job.max_limit') }} : <b>1000</b></div>
@@ -233,7 +250,7 @@
           v-model="confirmCancel"
         />
       </div>
-    </div>
+    </OPageLayout>
   </div>
 
   <!-- Empty state is rendered via OEmptyState in the table #empty slot -->
@@ -262,6 +279,8 @@ import { defineAsyncComponent, defineComponent, reactive } from "vue";
 import { searchState } from "@/composables/useLogs/searchState";
 import TenstackTable from "../../plugins/logs/TenstackTable.vue";
 import searchService from "@/services/search";
+import DOMPurify from "dompurify";
+import { colorizeQuery } from "@/utils/query/colorizeQuery";
 import OEmptyState from "@/lib/core/EmptyState/OEmptyState.vue";
 import DateTime from "@/components/DateTime.vue";
 import { useI18n } from "vue-i18n";
@@ -283,7 +302,7 @@ import config from "@/aws-exports";
 import OButton from "@/lib/core/Button/OButton.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import OSpinner from "@/lib/feedback/Spinner/OSpinner.vue";
 import { toast } from "@/lib/feedback/Toast/useToast";
 import { copyToClipboard } from "@/utils/clipboard";
@@ -311,7 +330,7 @@ export default defineComponent({
       () => import("@/components/CodeQueryEditor.vue"),
     ),
     OIcon,
-    AppPageHeader,
+    OPageLayout,
 },
   props: {
     isClicked: {
@@ -642,6 +661,27 @@ export default defineComponent({
       return { formatted: result, raw: rawDuration };
     };
 
+    /* Monaco-colorized SQL / VRL for the expanded row, keyed by trace_id — the
+       same treatment the dashboard Query Inspector and Search History give their
+       queries. Runs on expand: colorizing is async and only the expanded row is
+       ever on screen. */
+    const colorizedSql = ref<Record<string, string>>({});
+    const colorizedFunction = ref<Record<string, string>>({});
+
+    const colorizeRow = async (row: any) => {
+      if (!row?.trace_id) return;
+      if (row.sql && colorizedSql.value[row.trace_id] === undefined) {
+        colorizedSql.value[row.trace_id] = DOMPurify.sanitize(
+          await colorizeQuery(row.sql, "sql"),
+        );
+      }
+      if (row.function && colorizedFunction.value[row.trace_id] === undefined) {
+        colorizedFunction.value[row.trace_id] = DOMPurify.sanitize(
+          await colorizeQuery(row.function, "vrl"),
+        );
+      }
+    };
+
     const onExpandedIdsChange = (ids: string[]) => {
       expandedIds.value = ids;
       const expandedId = ids[0];
@@ -652,6 +692,7 @@ export default defineComponent({
       const row = dataToBeLoaded.value.find((r: any) => r.trace_id === expandedId);
       if (row) {
         query.value = JSON.stringify(filterRow(row), null, 2);
+        colorizeRow(row);
       }
     };
     const goToLogs = (row) => {
@@ -745,15 +786,15 @@ export default defineComponent({
     const getStatusColorClass = (status) => {
       switch (status) {
         case 0:
-          return "text-orange-500"; // Pending
+          return "text-status-warning-text"; // Pending
         case 1:
-          return "text-blue-500"; // Running
+          return "text-status-info-text"; // Running
         case 2:
-          return "text-green-500"; // Finished
+          return "text-status-positive"; // Finished
         case 3:
-          return "text-red-500"; // Cancelled
+          return "text-status-error-text"; // Cancelled
         default:
-          return "text-gray-500"; // Unknown
+          return "text-text-muted"; // Unknown
       }
     };
     const getStatusColor = (status) => {
@@ -803,6 +844,8 @@ export default defineComponent({
       expandedIds,
       goToLogs,
       onExpandedIdsChange,
+      colorizedSql,
+      colorizedFunction,
       copyToClipboard,
       formatTime,
       delayMessage,
@@ -836,3 +879,14 @@ export default defineComponent({
   },
 });
 </script>
+
+<style scoped>
+/* keep(generated-content): Monaco's colorize() injects .mtkN token spans via
+   v-html, so these can't be template utilities. Every colour but .mtk1 comes
+   from Monaco's own global stylesheet; .mtk1 is its default-text token, which
+   we point back at the block's own colour so the query inherits our theme
+   instead of Monaco's. Mirrors dashboards/QueryInspector.vue. */
+.o2-colorized-query :deep(.mtk1) {
+  color: inherit;
+}
+</style>
diff --git a/web/src/plugins/logs/SyntaxGuide.spec.ts b/web/src/plugins/logs/SyntaxGuide.spec.ts
index d12c89c968..2bd1911eea 100644
--- a/web/src/plugins/logs/SyntaxGuide.spec.ts
+++ b/web/src/plugins/logs/SyntaxGuide.spec.ts
@@ -141,7 +141,7 @@ describe("SyntaxGuide.vue", () => {
   it("should have theme-dark class when store theme is dark", () => {
     store.state.theme = "dark";
     wrapper = createWrapper();
-    // q-menu was replaced by ODropdown; verify the wrapper exists.
+    // ODropdown wrapper exists.
     const dropdown = wrapper.findComponent({ name: "ODropdown" });
     expect(dropdown.exists()).toBe(true);
     // The theme class is bound on the content wrapper div inside the dropdown.
@@ -178,8 +178,7 @@ describe("SyntaxGuide.vue", () => {
   // Test 16: Menu content structure exists
   it("should have menu with card components", () => {
     wrapper = createWrapper({ sqlmode: false });
-    // The migrated component drops q-card/q-card-section in favor of native
-    // divs inside the ODropdown default slot.
+    // The migrated component uses native divs inside the ODropdown default slot.
     const dropdown = wrapper.findComponent({ name: "ODropdown" });
     expect(dropdown.exists()).toBe(true);
   });
@@ -291,7 +290,7 @@ describe("SyntaxGuide.vue", () => {
     wrapper = createWrapper({ sqlmode: false });
     const button = wrapper.findComponent({ name: "OButton" });
 
-    // OButton uses normal-mode class; syntax-guide-button and q-pa-xs were removed in migration
+    // OButton uses normal-mode class; syntax-guide-button and the legacy padding class were removed in migration
     expect(button.classes()).toContain("normal-mode");
   });
 
diff --git a/web/src/plugins/logs/SyntaxGuide.vue b/web/src/plugins/logs/SyntaxGuide.vue
index bef1ce0af6..516471c309 100644
--- a/web/src/plugins/logs/SyntaxGuide.vue
+++ b/web/src/plugins/logs/SyntaxGuide.vue
@@ -24,10 +24,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           data-cy="syntax-guide-button"
           variant="ghost"
           size="sm"
-          class="w-full! justify-start! px-3! py-1.5! h-auto! rounded-md! gap-2! font-normal!"
+          class="w-full! justify-start! px-3! py-1.5! h-auto! rounded-default! gap-2! font-normal!"
         >
           <template #icon-left>
-            <span class="inline-flex items-center justify-center w-7 h-7 rounded-md bg-[var(--o2-section-header-bg)] text-[var(--o2-text-secondary)] shrink-0">
+            <span class="inline-flex items-center justify-center w-7 h-7 rounded-default bg-section-header-bg text-text-secondary shrink-0">
               <OIcon name="help" size="sm" />
             </span>
           </template>
@@ -60,73 +60,73 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         >
           <OIcon name="help" size="sm" />
           <span v-if="label">{{ label }}</span>
-          <span v-else-if="!noBorder" class="ml-1">{{ t('search.syntaxGuideLabel') }}</span>
+          <span v-else-if="!noBorder" class="ml-1">Syntax Guide</span>
           <OTooltip :content="t('search.syntaxGuideLabel')" />
         </OButton>
       </div>
     </template>
-    <div :class="store.state.theme == 'dark' ? 'theme-dark' : 'theme-light'">
+    <div>
       <div v-if="!sqlmode">
-        <div class="syntax-guide-title">
-          <div class="label">{{ t("search.syntaxGuideLabel") }}</div>
+        <div class="w-105">
+          <div class="label text-sm font-bold">{{ t("search.syntaxGuideLabel") }}</div>
         </div>
         <div class="border-t my-1 border-dropdown-separator" />
         <div class="answers">
-          <div class="syntax-section">
-            <div class="syntax-guide-text">
-              <ul class="guide-list">
+          <div class="mb-1.25">
+            <div class="text-xs ml-1.25">
+              <ul class="px-2.5 mt-2.5 mb-0 text-sm leading-[1.4375rem]">
                 <li>
-                  {{ t('logs.syntaxGuide.invertedIndexPre') }}
-                  <span class="bg-highlight">match_all('error')</span>
-                  {{ t('logs.syntaxGuide.invertedIndexPost') }}
+                  For inverted index search of value 'error' use
+                  <span class="bg-highlight-bg px-1.25">match_all('error')</span>
+                  in query editor. Search terms are case-insensitive.
                 </li>
                 <li>
-                  {{ t('logs.syntaxGuide.prefixPre') }}
-                  <span class="bg-highlight">match_all('error*')</span>
-                  {{ t('logs.syntaxGuide.prefixPost') }}
+                  For prefix search use
+                  <span class="bg-highlight-bg px-1.25">match_all('error*')</span>
+                  to find all terms starting with 'error'.
                 </li>
                 <li>
-                  {{ t('logs.syntaxGuide.phrasePrefixPre') }}
-                  <span class="bg-highlight">match_all('error code*')</span>
-                  {{ t('logs.syntaxGuide.phrasePrefixPost') }}
+                  For phrase prefix search use
+                  <span class="bg-highlight-bg px-1.25">match_all('error code*')</span>
+                  to find phrases starting with 'error code'.
                 </li>
                 <li>
-                  {{ t('logs.syntaxGuide.caseSensitivePre') }}
-                  <span class="bg-highlight">match_all('traceHits')</span>
-                  {{ t('logs.syntaxGuide.caseSensitivePost') }}
+                  For case sensitive search use
+                  <span class="bg-highlight-bg px-1.25">match_all('traceHits')</span>
+                  with exact case matching.
                 </li>
                 <li>
-                  {{ t('logs.syntaxGuide.postfixPre') }}
-                  <span class="bg-highlight">match_all('*failed')</span>
-                  {{ t('logs.syntaxGuide.postfixPost') }}
+                  For postfix search use
+                  <span class="bg-highlight-bg px-1.25">match_all('*failed')</span>
+                  to find all terms ending with 'failed'.
                 </li>
                 <li>
-                  {{ t('logs.syntaxGuide.columnSearchPre') }}
-                  <span class="bg-highlight"
+                  For column search of value 'error' use
+                  <span class="bg-highlight-bg px-1.25"
                     >str_match(<b>fieldname</b>, 'error')</span
                   >
                 </li>
                 <li>
-                  {{ t('logs.syntaxGuide.columnSearchCaseInsensitivePre') }}
-                  <span class="bg-highlight"
+                  For case-insensitive column search of value 'error' use
+                  <span class="bg-highlight-bg px-1.25"
                     >str_match_ignore_case(<b>fieldname</b>, 'Error')</span
                   >
                 </li>
                 <li>
-                  {{ t('logs.syntaxGuide.codeColumnPre') }}
-                  <span class="bg-highlight">code=200</span>
+                  To search value 200 for code column use
+                  <span class="bg-highlight-bg px-1.25">code=200</span>
                 </li>
                 <li>
-                  {{ t('logs.syntaxGuide.streamColumnPre') }}
-                  <span class="bg-highlight">stream='stderr'</span>
+                  To search value 'stderr' for stream column use
+                  <span class="bg-highlight-bg px-1.25">stream='stderr'</span>
                 </li>
                 <li>
-                  {{ t('logs.syntaxGuide.additionalExamples') }}
+                  For additional examples,
                   <a
                     href="https://openobserve.ai/docs/example-queries/"
                     target="_blank"
                     class="hover:underline text-primary"
-                    >{{ t('logs.syntaxGuide.clickHere') }}</a
+                    >click here</a
                   >.
                 </li>
               </ul>
@@ -135,86 +135,86 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
       </div>
       <div v-else>
-        <div class="syntax-guide-title">
-          <div class="label">{{ t('logs.syntaxGuide.sqlModeTitle') }}</div>
+        <div class="w-105">
+          <div class="label text-sm font-bold">Syntax Guide: SQL Mode</div>
         </div>
         <div class="border-t my-1 border-dropdown-separator" />
         <div class="answers">
-          <div class="syntax-section">
-            <div class="syntax-guide-text">
-              <ul class="guide-list">
+          <div class="mb-1.25">
+            <div class="text-xs ml-1.25">
+              <ul class="px-2.5 mt-2.5 mb-0 text-sm leading-[1.4375rem]">
                 <li>
-                  {{ t('logs.syntaxGuide.invertedIndexPre') }}
-                  <span class="bg-highlight"
+                  For inverted index search of value 'error' use
+                  <span class="bg-highlight-bg px-1.25"
                     >SELECT * FROM <b>stream</b> WHERE match_all('error')</span
                   >
-                  {{ t('logs.syntaxGuide.invertedIndexPost') }}
+                  in query editor. Search terms are case-insensitive.
                 </li>
                 <li>
-                  {{ t('logs.syntaxGuide.prefixPre') }}
-                  <span class="bg-highlight"
+                  For prefix search use
+                  <span class="bg-highlight-bg px-1.25"
                     >SELECT * FROM <b>stream</b> WHERE match_all('error*')</span
                   >
-                  {{ t('logs.syntaxGuide.prefixPost') }}
+                  to find all terms starting with 'error'.
                 </li>
                 <li>
-                  {{ t('logs.syntaxGuide.phrasePrefixPre') }}
-                  <span class="bg-highlight"
+                  For phrase prefix search use
+                  <span class="bg-highlight-bg px-1.25"
                     >SELECT * FROM <b>stream</b> WHERE match_all('error
                     code*')</span
                   >
-                  {{ t('logs.syntaxGuide.phrasePrefixPost') }}
+                  to find phrases starting with 'error code'.
                 </li>
                 <li>
-                  {{ t('logs.syntaxGuide.caseSensitivePre') }}
-                  <span class="bg-highlight"
+                  For case sensitive search use
+                  <span class="bg-highlight-bg px-1.25"
                     >SELECT * FROM <b>stream</b> WHERE
                     match_all('traceHits')</span
                   >
-                  {{ t('logs.syntaxGuide.caseSensitivePost') }}
+                  with exact case matching.
                 </li>
                 <li>
-                  {{ t('logs.syntaxGuide.postfixPre') }}
-                  <span class="bg-highlight"
+                  For postfix search use
+                  <span class="bg-highlight-bg px-1.25"
                     >SELECT * FROM <b>stream</b> WHERE
                     match_all('*failed')</span
                   >
-                  {{ t('logs.syntaxGuide.postfixPost') }}
+                  to find all terms ending with 'failed'.
                 </li>
                 <li>
-                  {{ t('logs.syntaxGuide.columnSearchPre') }}
-                  <span class="bg-highlight"
+                  For column search of value 'error' use
+                  <span class="bg-highlight-bg px-1.25"
                     >SELECT * FROM <b>stream</b> WHERE
                     str_match(<b>fieldname</b>, 'error')</span
                   >
                 </li>
                 <li>
-                  {{ t('logs.syntaxGuide.codeColumnPre') }}
-                  <span class="bg-highlight"
+                  To search value 200 for code column use
+                  <span class="bg-highlight-bg px-1.25"
                     >SELECT * FROM <b>stream</b> WHERE code=200</span
                   >
                 </li>
                 <li>
-                  {{ t('logs.syntaxGuide.streamColumnPre') }}
-                  <span class="bg-highlight"
+                  To search value 'stderr' for stream column use
+                  <span class="bg-highlight-bg px-1.25"
                     >SELECT * FROM <b>stream</b> WHERE stream='stderr'</span
                   >
                 </li>
                 <li>
-                  {{ t('logs.syntaxGuide.queryFunctionPre') }} <i>extract_ip</i>
-                  {{ t('logs.syntaxGuide.queryFunctionPost') }}
-                  <span class="bg-highlight"
+                  To search and use query function <i>extract_ip</i> on column
+                  log use
+                  <span class="bg-highlight-bg px-1.25"
                     >SELECT extract_ip(log) FROM <b>stream</b> WHERE
                     code=200</span
                   >
                 </li>
                 <li>
-                  {{ t('logs.syntaxGuide.additionalExamples') }}
+                  For additional examples,
                   <a
                     href="https://openobserve.ai/docs/example-queries/"
                     target="_blank"
                     class="hover:underline text-primary"
-                    >{{ t('logs.syntaxGuide.clickHere') }}</a
+                    >click here</a
                   >.
                 </li>
               </ul>
diff --git a/web/src/plugins/logs/TenstackTable.vue b/web/src/plugins/logs/TenstackTable.vue
index 2925b539dd..174ceb8732 100644
--- a/web/src/plugins/logs/TenstackTable.vue
+++ b/web/src/plugins/logs/TenstackTable.vue
@@ -18,10 +18,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <div
     ref="parentRef"
     :class="[
-      'o2-scroll-container rounded-none! overflow-x-auto relative',
-      !props.scrollEl ? 'table-container' : '',
+      props.scrollEl
+        ? 'relative'
+        : 'o2-scroll-container overflow-auto rounded-none! overflow-x-auto table-container relative',
     ]"
-    style="color: var(--color-text-body)"
+    class="text-text-body"
   >
     <!-- Top progress bar: keeps rows visible while a new result set streams in
       (e.g. streaming_aggs replacing values). Same component dashboard panels
@@ -48,8 +49,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       }"
     >
       <thead
-        class="sticky top-0 z-10"
-        style="max-height: 44px"
+        class="sticky top-0 z-10 max-h-11"
         v-for="headerGroup in table.getHeaderGroups()"
         :key="headerGroup.id"
       >
@@ -63,7 +63,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             { 'cursor-move': table.getState().columnOrder.length > 1 },
             // Header-row chrome via centralized token utilities (same tokens
             // OTable uses): background band + full-width underline on the row.
-            'bg-[var(--color-table-header-bg)] border-b border-[var(--color-grey-300)]',
+            'bg-table-header-bg border-b border-table-header-border',
           ]"
           :style="{
             width:
@@ -77,7 +77,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           tag="tr"
           @start="(event) => handleDragStart(event)"
           @end="() => handleDragEnd()"
-          class="flex items-center"
+          class="flex items-center h-8"
         >
           <th
             v-for="(header, headerIndex) in headerGroup.headers"
@@ -109,16 +109,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   header.getResizeHandler()?.($event)
               "
               :class="[
-                'absolute right-0 top-0 h-full w-2 flex items-center justify-end select-none touch-none z-10 group/resizer',
-                header.column.getCanResize() ? 'resizer cursor-col-resize' : '',
+                'absolute right-0 top-0 h-full flex items-center justify-end select-none touch-none z-10 group/resizer',
+                header.column.getCanResize() ? 'resizer w-1.25 cursor-col-resize' : 'w-2',
               ]"
             >
               <div
                 :class="[
                   'rounded-full transition-all duration-150',
                   header.column.getIsResizing()
-                    ? 'w-0.5 h-full bg-[var(--color-table-resize-handle)]'
-                    : 'w-px h-4 bg-[var(--color-border-default)] group-hover/resizer:w-0.5 group-hover/resizer:h-full group-hover/resizer:bg-[var(--color-table-resize-handle)]',
+                    ? 'w-0.5 h-full bg-table-resize-handle'
+                    : 'w-px h-4 bg-border-default group-hover/resizer:w-0.5 group-hover/resizer:h-full group-hover/resizer:bg-[var(--color-table-resize-handle)]',
                 ]"
               />
             </div>
@@ -135,7 +135,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   header.column.getToggleSortingHandler(),
                 )
               "
-              class="overflow-hidden text-ellipsis text-[var(--color-table-header-text)] text-xs font-medium capitalize"
+              class="overflow-hidden text-ellipsis text-table-header-text text-xs font-medium"
             >
               <FlexRender
                 :render="header.column.columnDef.header"
@@ -152,18 +152,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 )
               "
               :data-test="`log-add-data-from-column-${header.column.columnDef.header}`"
-              class="invisible flex items-center absolute right-2 top-0 px-2 column-actions"
+              class="invisible flex items-center absolute right-2 top-0 h-full pl-3 bg-table-header-bg column-actions"
             >
               <OIcon
                 v-if="(header.column.columnDef.meta as any).closable"
                 :data-test="`logs-search-result-table-th-remove-${header.column.columnDef.header}-btn`"
                 name="close"
-                class="m-0 mt-[0.125rem]! close-icon cursor-pointer"
-                :class="
-                  store.state.theme === 'dark' ? 'text-white' : 'text-gray-700'
-                "
+                class="close-icon cursor-pointer text-icon-color hover:text-text-heading transition-colors"
                 :title="t('common.close')"
-                size="sm"
+                size="xs"
                 @click.stop="closeColumn(header.column.columnDef)"
               />
             </div>
@@ -174,10 +171,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <tr v-if="!loading && errMsg != ''" class="w-full">
           <td
             :colspan="columnOrder.length"
-            class="font-bold"
-            style="opacity: 0.7"
+            class="font-bold opacity-70"
           >
-            <div class="text-sm font-medium text-weight-bold bg-amber-500">
+            <div class="text-sm font-medium font-bold bg-warning">
               <OIcon size="xs"
 name="warning"
 class="mr-1" />
@@ -191,16 +187,10 @@ class="mr-1" />
         >
           <td
             :colspan="columnOrder.length"
-            class="font-bold"
-            style="opacity: 0.6"
+            class="font-bold opacity-60"
           >
             <div
-              class="text-sm font-medium text-weight-bold pl-2"
-              :class="
-                store.state.theme === 'dark'
-                  ? 'bg-yellow-600'
-                  : 'bg-amber-300'
-              "
+              class="text-sm font-medium font-bold pl-2 bg-status-warning-bg"
             >
               <OButton
                 variant="ghost"
@@ -219,13 +209,7 @@ class="mr-1" />
         <tr v-if="functionErrorMsg != '' && isFunctionErrorOpen">
           <td
             :colspan="columnOrder.length"
-            style="opacity: 0.7"
-            class="px-2"
-            :class="
-              store.state.theme === 'dark'
-                ? 'bg-yellow-600'
-                : 'bg-amber-300'
-            "
+            class="opacity-70 px-2 bg-status-warning-bg"
           >
             <pre>{{ functionErrorMsg }}</pre>
           </td>
@@ -245,13 +229,13 @@ class="mr-1" />
         <tr
           v-for="r in SKEL_ROW_COUNT"
           :key="`skel-${r}`"
-          class="logs-skel-row flex items-center w-full opacity-0 h-[29px] bg-(--o2-log-table-row-bg) border-b border-(--o2-log-table-row-border)"
+          class="logs-skel-row flex items-center w-full opacity-0 h-[1.8125rem] bg-log-table-row-bg border-b border-log-table-row-border"
           :style="{ animationDelay: `${(r - 1) * 40}ms` }"
         >
           <!-- No columns loaded yet (first page load) — full-width shimmer bar -->
           <td v-if="!headers?.length" class="w-full px-4 overflow-hidden">
             <span
-              class="logs-skel-pill inline-block h-3 rounded-md"
+              class="logs-skel-pill inline-block h-3 rounded-default"
               :style="{ width: `${skelCellWidth(r - 1, 0)}%` }"
               aria-hidden="true"
             />
@@ -266,7 +250,7 @@ class="mr-1" />
               :style="skelTdStyle(header, c)"
             >
               <span
-                class="logs-skel-pill inline-block h-3 rounded-md"
+                class="logs-skel-pill inline-block h-3 rounded-default"
                 :style="{ width: c === 0 ? `${SKEL_TIMESTAMP_PX}px` : `${skelCellWidth(r - 1, c)}%` }"
                 aria-hidden="true"
               />
@@ -310,7 +294,7 @@ class="mr-1" />
             "
             :ref="(node: any) => node && rowVirtualizer.measureElement(node)"
             :class="[
-              'absolute flex w-max items-center justify-start border-b-[1px]',
+              'absolute flex w-max items-center justify-start border-b',
               !(formattedRows[virtualRow.index]?.original as any)?.isExpandedRow
                 ? 'cursor-pointer'
                 : 'cursor-default',
@@ -323,12 +307,12 @@ class="mr-1" />
                 store.state.zoConfig.timestamp_column
               ] === highlightTimestamp &&
               !(formattedRows[virtualRow.index]?.original as any)?.isExpandedRow
-                ? 'bg-(--color-table-row-selected-bg)'
+                ? 'bg-table-row-selected-bg'
                 : !(formattedRows[virtualRow.index]?.original as any)?.isExpandedRow
-                  ? 'log-row-base bg-(--o2-log-table-row-bg)'
+                  ? 'log-row-base bg-log-table-row-bg'
                   : '',
               !(formattedRows[virtualRow.index]?.original as any)?.isExpandedRow
-                ? 'table-row-hover table-row-focus focus-visible:outline-none transition-[background-color,box-shadow] duration-[120ms] [transition-timing-function:ease-in-out] border-b-(--o2-log-table-row-border)!'
+                ? 'table-row-hover table-row-focus focus-visible:outline-none transition-[background-color,box-shadow] duration-120 [transition-timing-function:ease-in-out] border-b-log-table-row-border!'
                 : '',
             ]"
             @click="
@@ -367,7 +351,7 @@ class="mr-1" />
               <json-preview
                 :value="tableRows[virtualRow.index - 1] as any"
                 show-copy-button
-                class="py-[0.375rem]"
+                class="py-1.5"
                 mode="expanded"
                 :index="calculateActualIndex(virtualRow.index - 1)"
                 :highlight-query="highlightQuery"
@@ -470,7 +454,6 @@ class="mr-1" />
                     ]
                   "
                   :key="`${cell.column.id}_${calculateActualIndex(virtualRow.index)}`"
-                  :class="store.state.theme === 'dark' ? 'dark' : ''"
                   v-html="
                     processedResults[
                       `${cell.column.id}_${calculateActualIndex(virtualRow.index)}`
@@ -485,7 +468,7 @@ class="mr-1" />
                   class="absolute right-0 top-1/2 -translate-y-1/2 invisible"
                 >
                   <O2AIContextAddBtn
-                    class="right-0 ai-btn"
+                    class="ai-btn"
                     @send-to-ai-chat="sendToAiChat(JSON.stringify(cell.row.original), true)"
                     :size="'2px'"
                   />
@@ -1265,12 +1248,16 @@ defineExpose({
   processedResults,
 });
 </script>
-<style>
-@import "@/assets/styles/log-highlighting.css";
-</style>
-<style>
+<style scoped>
+/* keep(lib-override:monaco) does not apply here; the keepers below are:
+   keep(complex-state) — .table-row-hover/.table-row-focus drive the virtualized
+   row background+inset marker off :hover/:focus-visible on rows that the
+   virtualizer positions absolutely; expressing them as utilities would mean
+   editing every recycled row node.
+   keep(keyframes) — the skeleton shimmer/entrance animations are referenced only
+   from CSS in this block, so Vue's scoped @keyframes renaming stays consistent. */
 
-/* Compact expand/collapse button for log rows — matches original q-btn dense size="xs" flat */
+/* Compact expand/collapse button for log rows — matches the original dense xs flat button */
 .log-row-expand-btn {
   height: 1.25rem !important;
   width: 1.25rem !important;
@@ -1280,42 +1267,58 @@ defineExpose({
   vertical-align: middle !important;
 }
 
-.log-row-expand-btn svg {
+/* svg is rendered inside OButton's own template, so it needs :deep() */
+.log-row-expand-btn :deep(svg) {
   width: 0.75rem !important;
   height: 0.75rem !important;
 }
 
 .table-row-hover:hover,
 .table-row-focus:focus-visible {
-  background-color: var(--o2-log-table-row-hover) !important;
-  box-shadow: inset 3px 0 0 var(--o2-primary-color) !important;
+  background-color: var(--color-log-table-row-hover) !important;
+  box-shadow: inset 0.1875rem 0 0 var(--color-accent) !important;
 }
 
-/* Fix: OButton base class (relative) overrides absolute passed via props.
-   Use top:0 + translate:-50% 0 to anchor the button flush with the row top,
-   and height:100% to fill the td height (= row height minus 1px border).
-   Overriding the CSS `translate` property (not `transform`) is required because
-   Tailwind v4 sets -translate-y-1/2 via the CSS `translate` shorthand property. */
-.ai-btn {
-  position: absolute !important;
-  top: 50% !important;
-  right: 0.875rem !important;
-  translate: -50% -50% !important;
-  height: 0.875rem !important;
-  min-height: 0 !important;
-  width: 0.900rem !important;
-  min-width: 0 !important;
-  border-radius: 0.25rem !important;
+.table-row-hover:hover .ai-btn {
+  visibility: visible !important;
+  z-index: 2;
 }
 
-.ai-btn img.ai-icon {
-  width: 0.75rem !important;
-  height: 0.75rem !important;
+/* This "table" lays out entirely with flexbox + explicit column widths — it does
+   not use native table column layout. Rendering table/thead/tbody as block boxes
+   makes position:relative (the containing block for the position:absolute
+   virtual rows), height, and position:sticky on the header behave identically
+   across browsers; Firefox does not honor these on native table-row-group
+   boxes, which left the results table collapsed with no visible rows. */
+.logs-table {
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: var(--text-xs) !important;
 }
 
-/* Suppress the hover box-shadow — it visually bleeds outside the row boundary */
-.ai-btn:hover {
-  box-shadow: none !important;
+.logs-table,
+.logs-table > thead,
+.logs-table > tbody {
+  display: block;
+}
+
+.logs-table thead {
+  font-family: var(--font-sans);
+  font-size: var(--text-sm) !important;
+}
+
+.logs-table th {
+  text-align: left;
+}
+
+/* !important is load-bearing: it outranks the `invisible` utility the actions
+   carry by default. */
+.logs-table th:hover .column-actions {
+  visibility: visible !important;
+}
+
+.logs-table td {
+  font-family: var(--font-mono);
 }
 
 /* ── Loading skeleton ───────────────────────────────────────────── */
@@ -1323,35 +1326,25 @@ defineExpose({
   animation: logs-skel-row-in 320ms ease-out forwards;
 }
 
-/* Light mode — matches histogram-skeleton --hsk-bar (grey-100 #f5f5f5) */
+/* Token-backed shimmer: --color-skeleton-* already flip with the theme. */
 .logs-skel-pill {
   background: linear-gradient(
     90deg,
-    var(--color-grey-100)       0%,
-    rgba(255, 255, 255, 0.65)   50%,
-    var(--color-grey-100)       100%
+    var(--color-skeleton-base)      0%,
+    var(--color-skeleton-highlight) 50%,
+    var(--color-skeleton-base)      100%
   );
   background-size: 200% 100%;
   animation: logs-skel-shimmer 1.5s ease-in-out infinite;
 }
 
-/* Dark mode — matches histogram-skeleton dark --hsk-bar (grey-600 #525252) */
-.body--dark .logs-skel-pill {
-  background: linear-gradient(
-    90deg,
-    var(--color-grey-600)       0%,
-    rgba(255, 255, 255, 0.03)   50%,
-    var(--color-grey-600)       100%
-  );
-}
-
 @keyframes logs-skel-shimmer {
   0%   { background-position: 200% 0; }
   100% { background-position: -200% 0; }
 }
 
 @keyframes logs-skel-row-in {
-  from { opacity: 0; transform: translateY(2px); }
+  from { opacity: 0; transform: translateY(0.125rem); }
   to   { opacity: 1; transform: translateY(0); }
 }
 
diff --git a/web/src/plugins/logs/TransformSelector.vue b/web/src/plugins/logs/TransformSelector.vue
index d8f18bdc86..bb02700365 100644
--- a/web/src/plugins/logs/TransformSelector.vue
+++ b/web/src/plugins/logs/TransformSelector.vue
@@ -16,7 +16,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <OButtonGroup
-    :class="store.state.theme === 'dark' ? 'dark-theme' : ''"
     class="p-0 float-left mr-1 transform-selector element-box-shadow border border-button-outline-border"
   >
     <!-- Wrap toggle + dropdown together so divide-x only creates one separator (before save) -->
@@ -52,8 +51,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- Search Input -->
           <div
             data-test="logs-search-bar-transform-type-select"
-            class="logs-transform-type o2-input mx-2"
-            style="padding-top: 0"
+            class="logs-transform-type o2-input mx-2 pt-0"
           >
             <OSelect
               v-if="isActionsEnabled"
@@ -141,6 +139,7 @@ import { searchState } from "@/composables/useLogs/searchState";
 import { logsUtils } from "@/composables/useLogs/logsUtils";
 import { getImageURL } from "@/utils/zincutils";
 import { useStore } from "vuex";
+import { useTheme } from "@/composables/useTheme";
 import { toast } from "@/lib/feedback/Toast/useToast";
 
 const props = withDefaults(defineProps<{
@@ -159,6 +158,7 @@ const { searchObj } = searchState();
 const { isActionsEnabled } = logsUtils();
 
 const store = useStore();
+  const { isDark } = useTheme();
 
 const functionModel = ref(false);
 
@@ -215,7 +215,7 @@ const iconRight = computed(() => {
   return (
     "img:" +
     getImageURL(
-      store.state.theme === "dark"
+      isDark.value
         ? "images/common/function_dark.svg"
         : "images/common/function.svg",
     )
@@ -240,12 +240,12 @@ const transformsLabel = computed(() => {
 });
 
 const transformIcon = computed(() => {
-  const isDark = store.state.theme === "dark";
+  
   if (!isActionsEnabled.value)
     return (
       "img:" +
       getImageURL(
-        isDark
+        isDark.value
           ? "images/common/function_dark.svg"
           : "images/common/function.svg",
       )
@@ -255,7 +255,7 @@ const transformIcon = computed(() => {
     return (
       "img:" +
       getImageURL(
-        isDark
+        isDark.value
           ? "images/common/function_dark.svg"
           : "images/common/function.svg",
       )
@@ -267,7 +267,7 @@ const transformIcon = computed(() => {
     return (
       "img:" +
       getImageURL(
-        isDark
+        isDark.value
           ? "images/common/transform_dark.svg"
           : "images/common/transform.svg",
       )
@@ -335,3 +335,12 @@ const getTransformLabelTooltip = computed(() => {
 });
 </script>
 
+<style scoped>
+/* keep(lib-override:obuttongroup): rounds OButtonGroup's own root, which this
+   component only receives as a class — not settable from the template without
+   losing to the group's internal radius. */
+.transform-selector {
+  border-radius: 0.375rem;
+}
+</style>
+
diff --git a/web/src/plugins/logs/VisualizeLogsQuery.spec.ts b/web/src/plugins/logs/VisualizeLogsQuery.spec.ts
index d586971185..0236272477 100644
--- a/web/src/plugins/logs/VisualizeLogsQuery.spec.ts
+++ b/web/src/plugins/logs/VisualizeLogsQuery.spec.ts
@@ -252,13 +252,6 @@ describe("VisualizeLogsQuery Component", () => {
           CustomMarkdownEditor: true,
           AddToDashboard: true,
           CustomChartEditor: true,
-          "q-splitter": {
-            template:
-              '<div><slot name="before"></slot><slot name="after"></slot></div>',
-          },
-          "q-splitter-panel": {
-            template: "<div><slot></slot></div>",
-          },
         },
       },
     });
@@ -634,7 +627,7 @@ describe("VisualizeLogsQuery Component", () => {
     });
   });
 
-  // Migration coverage: q-dialog wrapper removed; AddToDashboard now uses
+  // Migration coverage: dialog wrapper removed; AddToDashboard now uses
   // v-model:open and emits update:open / save directly (ODialog/ODrawer contract).
   describe("AddToDashboard integration (ODialog/ODrawer migration)", () => {
     it("should render AddToDashboard stub bound to showAddToDashboardDialog", async () => {
@@ -673,12 +666,6 @@ describe("VisualizeLogsQuery Component", () => {
 
       expect(wrapper.vm.showAddToDashboardDialog).toBe(false);
     });
-
-    it("should not render any legacy q-dialog wrapper around AddToDashboard", () => {
-      // After migration, AddToDashboard is no longer wrapped in q-dialog;
-      // it controls its own ODialog/ODrawer via v-model:open.
-      expect(wrapper.find(".q-dialog").exists()).toBe(false);
-    });
   });
 
   // SKIPPED: collapseFieldList method moved to PanelEditor component
diff --git a/web/src/plugins/logs/VisualizeLogsQuery.vue b/web/src/plugins/logs/VisualizeLogsQuery.vue
index 4a74ace08e..de8d2ead75 100644
--- a/web/src/plugins/logs/VisualizeLogsQuery.vue
+++ b/web/src/plugins/logs/VisualizeLogsQuery.vue
@@ -16,7 +16,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <!-- eslint-disable vue/no-unused-components -->
 <template>
-  <div style="height: 100%; width: 100%">
+  <div class="h-full w-full">
     <!-- PanelEditor Content Area (no header for logs visualization) -->
     <PanelEditor
       ref="panelEditorRef"
diff --git a/web/src/plugins/logs/components/FieldExpansion.spec.ts b/web/src/plugins/logs/components/FieldExpansion.spec.ts
index 9b3e9a6631..d12360ab16 100644
--- a/web/src/plugins/logs/components/FieldExpansion.spec.ts
+++ b/web/src/plugins/logs/components/FieldExpansion.spec.ts
@@ -80,14 +80,14 @@ function createWrapper(props = {}) {
         OCollapsible: {
           name: "OCollapsible",
           template:
-            '<div class="q-expansion-item-stub"><slot name="trigger" /><slot /></div>',
+            '<div class="o-expansion-item-stub"><slot name="trigger" /><slot /></div>',
           props: ["modelValue", "label", "dense", "hideExpandIcon"],
           emits: ["before-show", "before-hide", "update:modelValue"],
         },
         OButton: {
           name: "OButton",
           template:
-            '<button class="q-btn-stub" v-bind="$attrs" @click="$emit(\'click\', $event)"><slot /></button>',
+            '<button v-bind="$attrs" @click="$emit(\'click\', $event)"><slot /></button>',
           emits: ["click"],
         },
         OIcon: {
@@ -115,7 +115,7 @@ describe("FieldExpansion", () => {
 
     it("renders the QExpansionItem stub", () => {
       const wrapper = createWrapper();
-      expect(wrapper.find(".q-expansion-item-stub").exists()).toBe(true);
+      expect(wrapper.find(".o-expansion-item-stub").exists()).toBe(true);
     });
 
     it("renders the field label header element", () => {
diff --git a/web/src/plugins/logs/components/FieldListPagination.spec.ts b/web/src/plugins/logs/components/FieldListPagination.spec.ts
deleted file mode 100644
index 24b73af445..0000000000
--- a/web/src/plugins/logs/components/FieldListPagination.spec.ts
+++ /dev/null
@@ -1,558 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//     http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { mount, flushPromises } from "@vue/test-utils";
-import FieldListPagination from "./FieldListPagination.vue";
-import enLocaleFull from "@/locales/languages/en-US.json";
-
-// Resolve real locale messages so migrated i18n keys render actual text
-// (with {placeholder} interpolation) instead of the raw key path.
-const resolveMessage = (key: string): unknown =>
-  key
-    .split(".")
-    .reduce<any>((obj, part) => (obj == null ? undefined : obj[part]), enLocaleFull);
-
-vi.mock("vue-i18n", () => ({
-  useI18n: () => ({
-    t: (key: string, params?: Record<string, unknown>) => {
-      const message = resolveMessage(key);
-      if (typeof message !== "string") return key;
-      if (!params) return message;
-      return message.replace(/\{(\w+)\}/g, (match, name) =>
-        params[name] != null ? String(params[name]) : match
-      );
-    },
-  }),
-}));
-
-const componentStubs = {
-  OToggleGroup: {
-    name: "OToggleGroup",
-    template:
-      '<div class="o-toggle-group-stub" v-bind="$attrs"><slot /></div>',
-    emits: ["update:modelValue"],
-    setup(_props: any, { emit }: any) {
-      return { triggerUpdate: (val: any) => emit("update:modelValue", val) };
-    },
-  },
-  OToggleGroupItem: {
-    name: "OToggleGroupItem",
-    template:
-      '<button class="o-toggle-group-item-stub" v-bind="$attrs"><slot /></button>',
-    props: ["value", "disabled", "size"],
-  },
-  QBtn: {
-    name: "QBtn",
-    template:
-      '<button class="q-btn-stub" :data-test="$attrs[\'data-test\']" :disabled="disable" @click="$emit(\'click\', $event)"><slot /></button>',
-    props: ["icon", "color", "flat", "disable"],
-    emits: ["click"],
-  },
-  QIcon: {
-    name: "QIcon",
-    template:
-      '<span class="OIcon-stub" :data-test="$attrs[\'data-test\']" :data-name="name" @click="$emit(\'click\', $event)"></span>',
-    props: ["name"],
-    emits: ["click"],
-  },
-  OTooltip: {
-    name: "OTooltip",
-    template:
-      '<div class="o-tooltip-stub" :data-test="$attrs[\'data-test\']">{{ content }}<slot /></div>',
-    props: ["anchor", "self", "maxWidth", "content", "side", "align"],
-  },
-  QSeparator: {
-    name: "QSeparator",
-    template: '<hr class="q-separator-stub" />',
-  },
-};
-
-const defaultProps = {
-  showUserDefinedSchemaToggle: false,
-  showQuickMode: false,
-  useUserDefinedSchemas: "all_fields",
-  showOnlyInterestingFields: false,
-  userDefinedSchemaBtnGroupOption: [
-    { value: "user_defined", slot: "user_defined_slot" },
-    { value: "all_fields", slot: "all_fields_slot" },
-  ],
-  selectedFieldsBtnGroupOption: [
-    { value: false, slot: "all_fields_slot" },
-    { value: true, slot: "interesting_fields_slot" },
-  ],
-  currentPage: 1,
-  pagesNumber: 1,
-  isFirstPage: true,
-  isLastPage: true,
-  totalFieldsCount: 10,
-};
-
-function createWrapper(props = {}) {
-  return mount(FieldListPagination, {
-    props: { ...defaultProps, ...props },
-    global: {
-      stubs: componentStubs,
-    },
-  });
-}
-
-describe("FieldListPagination", () => {
-  afterEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe("Component rendering", () => {
-    it("mounts without errors", () => {
-      const wrapper = createWrapper();
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it("renders the reset icon", () => {
-      const wrapper = createWrapper();
-      const resetIcon = wrapper.find(
-        '[data-test="logs-page-fields-list-reset-icon"]'
-      );
-      expect(resetIcon.exists()).toBe(true);
-    });
-
-    it("does not render pagination when pagesNumber is 1", () => {
-      const wrapper = createWrapper({ pagesNumber: 1 });
-      expect(
-        wrapper
-          .find('[data-test="logs-page-fields-list-pagination-firstpage-button"]')
-          .exists()
-      ).toBe(false);
-    });
-
-    it("renders pagination controls when pagesNumber > 1", () => {
-      const wrapper = createWrapper({
-        pagesNumber: 3,
-        currentPage: 1,
-        isFirstPage: true,
-        isLastPage: false,
-      });
-      const firstPageBtn = wrapper.find(
-        '[data-test="logs-page-fields-list-pagination-firstpage-button"]'
-      );
-      expect(firstPageBtn.exists()).toBe(true);
-    });
-
-    it("renders last page button when pagesNumber > 1", () => {
-      const wrapper = createWrapper({
-        pagesNumber: 3,
-        currentPage: 1,
-        isFirstPage: true,
-        isLastPage: false,
-      });
-      const lastPageBtn = wrapper.find(
-        '[data-test="logs-page-fields-list-pagination-lastpage-button"]'
-      );
-      expect(lastPageBtn.exists()).toBe(true);
-    });
-  });
-
-  describe("Schema toggle visibility", () => {
-    it("does not render schema toggle when showUserDefinedSchemaToggle is false and showQuickMode is false", () => {
-      const wrapper = createWrapper({
-        showUserDefinedSchemaToggle: false,
-        showQuickMode: false,
-      });
-      const toggle = wrapper.find(
-        '[data-test="logs-page-field-list-user-defined-schema-toggle"]'
-      );
-      expect(toggle.exists()).toBe(false);
-    });
-
-    it("renders schema toggle when showUserDefinedSchemaToggle is true", () => {
-      const wrapper = createWrapper({
-        showUserDefinedSchemaToggle: true,
-      });
-      const toggle = wrapper.find(
-        '[data-test="logs-page-field-list-user-defined-schema-toggle"]'
-      );
-      expect(toggle.exists()).toBe(true);
-    });
-
-    it("renders interesting fields toggle when showUserDefinedSchemaToggle is false but showQuickMode is true", () => {
-      const wrapper = createWrapper({
-        showUserDefinedSchemaToggle: false,
-        showQuickMode: true,
-      });
-      const toggle = wrapper.find(
-        '[data-test="logs-page-field-list-user-defined-schema-toggle"]'
-      );
-      expect(toggle.exists()).toBe(true);
-    });
-
-    it("shows user-defined-fields button when showUserDefinedSchemaToggle is true", () => {
-      const wrapper = createWrapper({
-        showUserDefinedSchemaToggle: true,
-      });
-      // Component generates data-test="logs-user-defined-fields-btn-${opt.slot}"
-      const userDefinedBtn = wrapper.find(
-        '[data-test="logs-user-defined-fields-btn-user_defined_slot"]'
-      );
-      expect(userDefinedBtn.exists()).toBe(true);
-    });
-
-    it("shows all-fields button when showUserDefinedSchemaToggle is true", () => {
-      const wrapper = createWrapper({
-        showUserDefinedSchemaToggle: true,
-      });
-      // Component generates data-test="logs-user-defined-fields-btn-${opt.slot}" for each option
-      const btns = wrapper.findAll('[data-test^="logs-user-defined-fields-btn-"]');
-      expect(btns.length).toBeGreaterThanOrEqual(1);
-    });
-
-    it("shows interesting-fields button inside schema toggle when showQuickMode is true", () => {
-      const wrapper = createWrapper({
-        showUserDefinedSchemaToggle: true,
-        showQuickMode: true,
-      });
-      // The schema toggle group itself is the container — verify it is rendered
-      const toggle = wrapper.find(
-        '[data-test="logs-page-field-list-user-defined-schema-toggle"]'
-      );
-      expect(toggle.exists()).toBe(true);
-    });
-  });
-
-  describe("Emits: toggle-schema", () => {
-    it("emits toggle-schema when schema toggle value changes", async () => {
-      const wrapper = createWrapper({ showUserDefinedSchemaToggle: true });
-      const toggle = wrapper.findComponent({ name: "OToggleGroup" });
-      await toggle.vm.$emit("update:modelValue", "user_defined");
-      expect(wrapper.emitted("toggle-schema")).toBeTruthy();
-      expect(wrapper.emitted("toggle-schema")![0]).toEqual(["user_defined"]);
-    });
-  });
-
-  describe("Emits: toggle-interesting-fields", () => {
-    it("emits toggle-interesting-fields when interesting fields toggle changes", async () => {
-      const wrapper = createWrapper({
-        showUserDefinedSchemaToggle: false,
-        showQuickMode: true,
-      });
-      const toggle = wrapper.findComponent({ name: "OToggleGroup" });
-      await toggle.vm.$emit("update:modelValue", true);
-      expect(wrapper.emitted("toggle-interesting-fields")).toBeTruthy();
-      expect(wrapper.emitted("toggle-interesting-fields")![0]).toEqual([true]);
-    });
-  });
-
-  describe("Emits: first-page", () => {
-    it("emits first-page when first page button is clicked", async () => {
-      const wrapper = createWrapper({
-        pagesNumber: 3,
-        currentPage: 2,
-        isFirstPage: false,
-        isLastPage: false,
-      });
-      const firstPageBtn = wrapper.find(
-        '[data-test="logs-page-fields-list-pagination-firstpage-button"]'
-      );
-      await firstPageBtn.trigger("click");
-      expect(wrapper.emitted("first-page")).toBeTruthy();
-    });
-
-    it("first page button is disabled when isFirstPage is true", () => {
-      const wrapper = createWrapper({
-        pagesNumber: 3,
-        currentPage: 1,
-        isFirstPage: true,
-        isLastPage: false,
-      });
-      const firstPageBtn = wrapper.find(
-        '[data-test="logs-page-fields-list-pagination-firstpage-button"]'
-      );
-      expect(firstPageBtn.attributes("disabled")).toBeDefined();
-    });
-
-    it("first page button is enabled when isFirstPage is false", () => {
-      const wrapper = createWrapper({
-        pagesNumber: 3,
-        currentPage: 2,
-        isFirstPage: false,
-        isLastPage: false,
-      });
-      const firstPageBtn = wrapper.find(
-        '[data-test="logs-page-fields-list-pagination-firstpage-button"]'
-      );
-      expect(firstPageBtn.attributes("disabled")).toBeUndefined();
-    });
-  });
-
-  describe("Emits: last-page", () => {
-    it("emits last-page when last page button is clicked", async () => {
-      const wrapper = createWrapper({
-        pagesNumber: 3,
-        currentPage: 1,
-        isFirstPage: true,
-        isLastPage: false,
-      });
-      const lastPageBtn = wrapper.find(
-        '[data-test="logs-page-fields-list-pagination-lastpage-button"]'
-      );
-      await lastPageBtn.trigger("click");
-      expect(wrapper.emitted("last-page")).toBeTruthy();
-    });
-
-    it("last page button is disabled when isLastPage is true", () => {
-      const wrapper = createWrapper({
-        pagesNumber: 3,
-        currentPage: 3,
-        isFirstPage: false,
-        isLastPage: true,
-      });
-      const lastPageBtn = wrapper.find(
-        '[data-test="logs-page-fields-list-pagination-lastpage-button"]'
-      );
-      expect(lastPageBtn.attributes("disabled")).toBeDefined();
-    });
-  });
-
-  describe("Emits: set-page", () => {
-    it("emits set-page with the page number when a page button is clicked", async () => {
-      const wrapper = createWrapper({
-        pagesNumber: 3,
-        currentPage: 1,
-        isFirstPage: true,
-        isLastPage: false,
-      });
-      const page1Btn = wrapper.find(
-        '[data-test="logs-page-fields-list-pagination-page-1-button"]'
-      );
-      await page1Btn.trigger("click");
-      expect(wrapper.emitted("set-page")).toBeTruthy();
-      expect(wrapper.emitted("set-page")![0]).toEqual([1]);
-    });
-  });
-
-  describe("Emits: reset-fields", () => {
-    it("emits reset-fields when the reset icon is clicked", async () => {
-      const wrapper = createWrapper();
-      const resetIcon = wrapper.find(
-        '[data-test="logs-page-fields-list-reset-icon"]'
-      );
-      await resetIcon.trigger("click");
-      expect(wrapper.emitted("reset-fields")).toBeTruthy();
-    });
-  });
-
-  describe("Computed: visiblePages", () => {
-    it("shows pages 1,2,3 when total pages <= 3", () => {
-      const wrapper = createWrapper({
-        pagesNumber: 3,
-        currentPage: 2,
-        isFirstPage: false,
-        isLastPage: false,
-      });
-      expect(wrapper.vm.visiblePages).toEqual([1, 2, 3]);
-    });
-
-    it("shows all pages when pagesNumber is exactly 3", () => {
-      const wrapper = createWrapper({
-        pagesNumber: 3,
-        currentPage: 1,
-        isFirstPage: true,
-        isLastPage: false,
-      });
-      expect(wrapper.vm.visiblePages).toEqual([1, 2, 3]);
-    });
-
-    it("shows 3 pages centered around current page when total > 3 and current is in the middle", () => {
-      const wrapper = createWrapper({
-        pagesNumber: 5,
-        currentPage: 3,
-        isFirstPage: false,
-        isLastPage: false,
-      });
-      expect(wrapper.vm.visiblePages).toEqual([2, 3, 4]);
-    });
-
-    it("shows pages 1,2,3 when on first page and total > 3", () => {
-      const wrapper = createWrapper({
-        pagesNumber: 5,
-        currentPage: 1,
-        isFirstPage: true,
-        isLastPage: false,
-      });
-      expect(wrapper.vm.visiblePages).toEqual([1, 2, 3]);
-    });
-
-    it("shows last 3 pages when on last page and total > 3", () => {
-      const wrapper = createWrapper({
-        pagesNumber: 5,
-        currentPage: 5,
-        isFirstPage: false,
-        isLastPage: true,
-      });
-      expect(wrapper.vm.visiblePages).toEqual([3, 4, 5]);
-    });
-
-    it("shows pages 3,4,5 when on second-to-last page of 5", () => {
-      const wrapper = createWrapper({
-        pagesNumber: 5,
-        currentPage: 4,
-        isFirstPage: false,
-        isLastPage: false,
-      });
-      expect(wrapper.vm.visiblePages).toEqual([3, 4, 5]);
-    });
-
-    it("returns empty array when pagesNumber is 0", () => {
-      const wrapper = createWrapper({
-        pagesNumber: 0,
-        currentPage: 1,
-        isFirstPage: true,
-        isLastPage: true,
-      });
-      expect(wrapper.vm.visiblePages).toEqual([]);
-    });
-
-    it("returns [1] when pagesNumber is 1", () => {
-      const wrapper = createWrapper({
-        pagesNumber: 1,
-        currentPage: 1,
-        isFirstPage: true,
-        isLastPage: true,
-      });
-      expect(wrapper.vm.visiblePages).toEqual([1]);
-    });
-
-    it("shows page buttons with correct data-test attributes", () => {
-      const wrapper = createWrapper({
-        pagesNumber: 3,
-        currentPage: 2,
-        isFirstPage: false,
-        isLastPage: false,
-      });
-      const page2Btn = wrapper.find(
-        '[data-test="logs-page-fields-list-pagination-page-2-button"]'
-      );
-      expect(page2Btn.exists()).toBe(true);
-    });
-
-    it("applies active class to current page button", () => {
-      const wrapper = createWrapper({
-        pagesNumber: 3,
-        currentPage: 2,
-        isFirstPage: false,
-        isLastPage: false,
-      });
-      const page2Btn = wrapper.find(
-        '[data-test="logs-page-fields-list-pagination-page-2-button"]'
-      );
-      expect(page2Btn.classes()).toContain("bg-button-primary");
-    });
-
-    it("does not apply active class to non-current page buttons", () => {
-      const wrapper = createWrapper({
-        pagesNumber: 3,
-        currentPage: 2,
-        isFirstPage: false,
-        isLastPage: false,
-      });
-      const page1Btn = wrapper.find(
-        '[data-test="logs-page-fields-list-pagination-page-1-button"]'
-      );
-      expect(page1Btn.classes()).not.toContain("bg-button-primary");
-    });
-  });
-
-  describe("Pagination tooltip", () => {
-    it("renders pagination tooltip with totalFieldsCount when pages > 1", () => {
-      const wrapper = createWrapper({
-        pagesNumber: 3,
-        currentPage: 1,
-        isFirstPage: true,
-        isLastPage: false,
-        totalFieldsCount: 75,
-      });
-      const tooltip = wrapper.find(
-        '[data-test="logs-page-fields-list-pagination-tooltip"]'
-      );
-      expect(tooltip.exists()).toBe(true);
-      expect(tooltip.text()).toContain("75");
-    });
-  });
-
-  describe("Layout class", () => {
-    it("applies flex layout when showUserDefinedSchemaToggle is true", () => {
-      const wrapper = createWrapper({ showUserDefinedSchemaToggle: true });
-      const container = wrapper.find("div");
-      expect(container.classes()).toContain("flex");
-    });
-
-    it("applies flex layout when showQuickMode is true", () => {
-      const wrapper = createWrapper({
-        showUserDefinedSchemaToggle: false,
-        showQuickMode: true,
-      });
-      const container = wrapper.find("div");
-      expect(container.classes()).toContain("flex");
-    });
-
-    it("does not apply flex layout when both toggles are false", () => {
-      const wrapper = createWrapper({
-        showUserDefinedSchemaToggle: false,
-        showQuickMode: false,
-      });
-      const container = wrapper.find("div");
-      expect(container.classes()).not.toContain("flex");
-    });
-  });
-
-  describe("Edge cases", () => {
-    it("handles pagesNumber of 2 correctly", () => {
-      const wrapper = createWrapper({
-        pagesNumber: 2,
-        currentPage: 1,
-        isFirstPage: true,
-        isLastPage: false,
-      });
-      expect(wrapper.vm.visiblePages).toEqual([1, 2]);
-    });
-
-    it("handles very large pagesNumber at page 1", () => {
-      const wrapper = createWrapper({
-        pagesNumber: 100,
-        currentPage: 1,
-        isFirstPage: true,
-        isLastPage: false,
-      });
-      expect(wrapper.vm.visiblePages).toEqual([1, 2, 3]);
-    });
-
-    it("handles very large pagesNumber at last page", () => {
-      const wrapper = createWrapper({
-        pagesNumber: 100,
-        currentPage: 100,
-        isFirstPage: false,
-        isLastPage: true,
-      });
-      expect(wrapper.vm.visiblePages).toEqual([98, 99, 100]);
-    });
-
-    it("renders reset tooltip", () => {
-      const wrapper = createWrapper();
-      const resetTooltip = wrapper.find(
-        '[data-test="logs-page-fields-list-reset-tooltip"]'
-      );
-      expect(resetTooltip.exists()).toBe(true);
-    });
-  });
-});
diff --git a/web/src/plugins/logs/components/FieldListPagination.vue b/web/src/plugins/logs/components/FieldListPagination.vue
deleted file mode 100644
index 87d733fcb0..0000000000
--- a/web/src/plugins/logs/components/FieldListPagination.vue
+++ /dev/null
@@ -1,258 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <div
-    class="pt-[0.125rem] justify-between w-full"
-    :class="showUserDefinedSchemaToggle || showQuickMode ? 'flex' : ''"
-  >
-    <!-- Schema Toggle Buttons -->
-    <div v-if="showUserDefinedSchemaToggle">
-      <OToggleGroup
-        :model-value="useUserDefinedSchemas"
-        @update:model-value="$emit('toggle-schema', $event)"
-        data-test="logs-page-field-list-user-defined-schema-toggle"
-        class="mr-1 p-0"
-      >
-        <OToggleGroupItem
-          v-for="opt in userDefinedSchemaBtnGroupOption"
-          :key="opt.value"
-          :value="opt.value"
-          size="sm"
-          :data-test="`logs-user-defined-fields-btn-${opt.slot}`"
-        >
-          <template v-if="opt.slot === 'user_defined_slot'">
-            <OIcon name="person" size="sm" class="text-[12px]!"></OIcon>
-            <OIcon name="schema" size="sm" class="text-[12px]!"></OIcon>
-            <OTooltip
-              data-test="logs-page-fields-list-user-defined-fields-warning-tooltip"
-              :content="t('search.userDefinedSchemaLabel')"
-              max-width="18.75rem"
-              side="right"
-              align="center"
-            />
-          </template>
-          <template v-else-if="opt.slot === 'all_fields_slot'">
-            <OIcon name="schema" size="sm" class="text-[12px]!"></OIcon>
-            <OTooltip
-              data-test="logs-page-fields-list-all-fields-warning-tooltip"
-              max-width="18.75rem"
-              side="right"
-              align="center"
-            >
-              <template #content>
-                <span class="font-bold">{{ t("search.allFieldsLabel") }}</span>
-                <hr class="my-1 opacity-50" />
-                {{ t("search.allFieldsWarningMsg") }}
-              </template>
-            </OTooltip>
-          </template>
-          <template
-            v-else-if="opt.slot === 'interesting_fields_slot' && showQuickMode"
-          >
-            <OIcon name="info-outline" size="sm" class="text-[12px]!" />
-            <OIcon name="schema" size="sm" class="text-[12px]!"></OIcon>
-            <OTooltip
-              :content="t('search.showOnlyInterestingFields')"
-              max-width="18.75rem"
-              side="right"
-              align="center"
-            />
-          </template>
-          <template v-else>{{ opt.label }}</template>
-        </OToggleGroupItem>
-      </OToggleGroup>
-    </div>
-
-    <!-- Interesting Fields Toggle (when no user defined schema) -->
-    <div v-else-if="showQuickMode">
-      <OToggleGroup
-        :model-value="showOnlyInterestingFields"
-        @update:model-value="$emit('toggle-interesting-fields', $event)"
-        data-test="logs-page-field-list-user-defined-schema-toggle"
-        class="mr-1"
-      >
-        <OToggleGroupItem
-          v-for="opt in selectedFieldsBtnGroupOption"
-          :key="opt.value"
-          :value="opt.value"
-          size="sm"
-          :data-test="opt.slot === 'all_fields_slot' ? 'logs-all-fields-btn' : 'logs-interesting-fields-btn'"
-        >
-          <template v-if="opt.slot === 'all_fields_slot'">
-            <OIcon name="schema" size="sm" class="text-[12px]!"></OIcon>
-            <OTooltip
-              data-test="logs-page-fields-list-all-fields-warning-tooltip"
-              max-width="18.75rem"
-              side="right"
-              align="center"
-            >
-              <template #content>
-                <span class="font-bold">{{ t("search.allFieldsLabel") }}</span>
-                <hr class="my-1 opacity-50" />
-                {{ t("search.allFieldsWarningMsg") }}
-              </template>
-            </OTooltip>
-          </template>
-          <template
-            v-else-if="opt.slot === 'interesting_fields_slot' && showQuickMode"
-          >
-            <OIcon name="info-outline" size="sm" class="text-[12px]!" />
-            <OIcon name="schema" size="sm" class="text-[12px]!"></OIcon>
-            <OTooltip
-              :content="t('search.showOnlyInterestingFields')"
-              max-width="18.75rem"
-              side="right"
-              align="center"
-            />
-          </template>
-          <template v-else>{{ opt.label }}</template>
-        </OToggleGroupItem>
-      </OToggleGroup>
-    </div>
-
-    <!-- Pagination and Reset Controls -->
-    <div class="flex items-center justify-end gap-2">
-      <!-- Pagination -->
-      <div v-if="pagesNumber > 1" class="flex items-center gap-1">
-        <OTooltip
-          data-test="logs-page-fields-list-pagination-tooltip"
-          :content="t('logs.fieldListPagination.totalFields', { count: totalFieldsCount })"
-          max-width="18.75rem"
-          side="left"
-          align="center"
-        />
-
-        <!-- First page button -->
-        <OButton
-          data-test="logs-page-fields-list-pagination-firstpage-button"
-          variant="ghost"
-          size="icon-xs-sq"
-          :disabled="isFirstPage"
-          @click="$emit('first-page')"
-          :aria-label="t('logs.fieldListPagination.firstPage')"
-        >
-          <OIcon name="fast-rewind" size="xs" />
-        </OButton>
-
-        <!-- Page number buttons (3 at a time) -->
-        <template v-for="page in visiblePages" :key="page">
-          <OButton
-            :variant="currentPage === page ? 'primary' : 'ghost'"
-            size="sm"
-            :data-test="`logs-page-fields-list-pagination-page-${page}-button`"
-            @click="$emit('set-page', page)"
-            >{{ page }}</OButton
-          >
-        </template>
-
-        <!-- Last page button -->
-        <OButton
-          data-test="logs-page-fields-list-pagination-lastpage-button"
-          variant="ghost"
-          size="icon-xs-sq"
-          :disabled="isLastPage"
-          @click="$emit('last-page')"
-          :aria-label="t('logs.fieldListPagination.lastPage')"
-        >
-          <OIcon name="fast-forward" size="xs" />
-        </OButton>
-      </div>
-
-      <!-- Reset Fields Icon -->
-      <div class="flex items-center">
-        <OIcon
-          name="restart-alt" size="sm"
-          data-test="logs-page-fields-list-reset-icon"
-          class="cursor-pointer text-xl opacity-70 transition-opacity duration-200 hover:opacity-100"
-          @click="$emit('reset-fields')"
-        />
-        <OTooltip
-          data-test="logs-page-fields-list-reset-tooltip"
-          :content="t('search.resetFields')"
-          max-width="18.75rem"
-          side="left"
-          align="center"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import { useI18n } from "vue-i18n";
-import OToggleGroup from "@/lib/core/ToggleGroup/OToggleGroup.vue";
-import OToggleGroupItem from "@/lib/core/ToggleGroup/OToggleGroupItem.vue";
-import OButton from "@/lib/core/Button/OButton.vue";
-import OIcon from "@/lib/core/Icon/OIcon.vue";
-import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
-
-const { t } = useI18n();
-
-interface Props {
-  showUserDefinedSchemaToggle: boolean;
-  showQuickMode: boolean;
-  useUserDefinedSchemas: string;
-  showOnlyInterestingFields: boolean;
-  userDefinedSchemaBtnGroupOption: any[];
-  selectedFieldsBtnGroupOption: any[];
-  currentPage: number;
-  pagesNumber: number;
-  isFirstPage: boolean;
-  isLastPage: boolean;
-  totalFieldsCount: number;
-}
-
-const props = defineProps<Props>();
-
-defineEmits<{
-  "toggle-schema": [value: string];
-  "toggle-interesting-fields": [value: boolean];
-  "first-page": [];
-  "last-page": [];
-  "set-page": [page: number];
-  "reset-fields": [];
-}>();
-
-// Get page numbers to display (3 at a time)
-const visiblePages = computed(() => {
-  const pages: number[] = [];
-  const { currentPage, pagesNumber } = props;
-
-  if (pagesNumber <= 3) {
-    // If 3 or fewer pages, show all
-    for (let i = 1; i <= pagesNumber; i++) {
-      pages.push(i);
-    }
-  } else {
-    // Show 3 pages centered around current page
-    let startPage = Math.max(1, currentPage - 1);
-    let endPage = Math.min(pagesNumber, startPage + 2);
-
-    // Adjust if we're near the end
-    if (endPage === pagesNumber) {
-      startPage = Math.max(1, endPage - 2);
-    }
-
-    for (let i = startPage; i <= endPage; i++) {
-      pages.push(i);
-    }
-  }
-
-  return pages;
-});
-</script>
diff --git a/web/src/plugins/logs/components/FieldRow.spec.ts b/web/src/plugins/logs/components/FieldRow.spec.ts
index f7034e59e4..40b5911f31 100644
--- a/web/src/plugins/logs/components/FieldRow.spec.ts
+++ b/web/src/plugins/logs/components/FieldRow.spec.ts
@@ -35,7 +35,7 @@ const componentStubs = {
   OButton: {
     name: "OButton",
     template:
-      '<button class="q-btn-stub" :data-test="$attrs[\'data-test\']" @click.stop="$emit(\'click\', $event)"><slot /></button>',
+      '<button :data-test="$attrs[\'data-test\']" @click.stop="$emit(\'click\', $event)"><slot /></button>',
     props: ["icon", "size", "round"],
     emits: ["click"],
   },
diff --git a/web/src/plugins/logs/components/LogsPluginFieldList.spec.ts b/web/src/plugins/logs/components/LogsPluginFieldList.spec.ts
deleted file mode 100644
index b8e653b08a..0000000000
--- a/web/src/plugins/logs/components/LogsPluginFieldList.spec.ts
+++ /dev/null
@@ -1,543 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//     http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { mount, flushPromises } from "@vue/test-utils";
-import FieldList from "./LogsPluginFieldList.vue";
-
-vi.mock("vue-i18n", () => ({
-  useI18n: () => ({ t: (key: string) => key }),
-}));
-
-vi.mock("@/components/common/FieldRow.vue", () => ({
-  default: {
-    name: "FieldRow",
-    template:
-      '<div class="field-row-stub" :data-field-name="field.name"><slot name="expansion" :field="field" /></div>',
-    props: [
-      "field",
-      "selectedFields",
-      "timestampColumn",
-      "theme",
-      "showQuickMode",
-    ],
-    emits: ["add-to-filter", "toggle-field", "toggle-interesting"],
-  },
-}));
-
-vi.mock("@/components/common/FieldExpansion.vue", () => ({
-  default: {
-    name: "FieldExpansion",
-    template: '<div class="field-expansion-stub"></div>',
-    props: [
-      "field",
-      "fieldValues",
-      "selectedFields",
-      "selectedStreamsCount",
-      "theme",
-      "showQuickMode",
-      "defaultValuesCount",
-    ],
-    emits: [
-      "add-to-filter",
-      "toggle-field",
-      "toggle-interesting",
-      "add-search-term",
-      "add-multiple-search-terms",
-      "before-show",
-      "before-hide",
-      "search-field-values",
-      "load-more-values",
-    ],
-  },
-}));
-
-vi.mock("@/components/common/FieldListPagination.vue", () => ({
-  default: {
-    name: "FieldListPagination",
-    template: '<div class="field-list-pagination-stub"></div>',
-    props: [
-      "showSchemaToggle",
-      "showQuickMode",
-      "useUserDefinedSchemas",
-      "showOnlyInterestingFields",
-      "schemaToggleOptions",
-      "interestingFieldsToggleOptions",
-      "currentPage",
-      "pagesNumber",
-      "isFirstPage",
-      "isLastPage",
-      "totalFieldsCount",
-      "dataTestPrefix",
-    ],
-    emits: [
-      "toggle-schema",
-      "toggle-interesting-fields",
-      "first-page",
-      "last-page",
-      "set-page",
-      "reset-fields",
-    ],
-  },
-}));
-
-const defaultProps = {
-  streamFieldsRows: [
-    {
-      name: "log_level",
-      label: null,
-      group: "schema",
-      isSchemaField: true,
-      isInterestingField: false,
-      ftsKey: false,
-      showValues: true,
-      dataType: "Utf8",
-      streams: ["stream1"],
-    },
-    {
-      name: "message",
-      label: null,
-      group: "schema",
-      isSchemaField: true,
-      isInterestingField: false,
-      ftsKey: false,
-      showValues: true,
-      dataType: "Utf8",
-      streams: ["stream1"],
-    },
-  ],
-  selectedStream: "stream1",
-  filterField: "",
-  filterFieldFn: (rows: any[], terms: any) => rows,
-  pagination: { page: 1, rowsPerPage: 25 },
-  wrapCells: false,
-  loadingStream: false,
-  showOnlyInterestingFields: false,
-  interestingExpandedGroupRowsFieldCount: { schema: 2 },
-  expandGroupRowsFieldCount: { schema: 2 },
-  expandGroupRows: { schema: true },
-  theme: "light",
-  selectedFields: [],
-  timestampColumn: "_timestamp",
-  showQuickMode: false,
-  fieldValues: {},
-  selectedStreamsCount: 1,
-  defaultValuesCount: 10,
-  showUserDefinedSchemaToggle: false,
-  useUserDefinedSchemas: "all_fields",
-  userDefinedSchemaBtnGroupOption: [],
-  selectedFieldsBtnGroupOption: [],
-  totalFieldsCount: 2,
-  showFtsFieldValues: false,
-};
-
-function createWrapper(props = {}) {
-  return mount(FieldList, {
-    props: { ...defaultProps, ...props },
-    global: {
-      stubs: {
-        OFieldList: {
-          name: "OFieldList",
-          template: `
-            <div data-test="log-search-index-list-fields-table">
-              <input
-                data-test="log-search-index-list-field-search-input"
-                :value="search"
-                @input="$emit('update:search', $event.target.value)"
-              />
-              <template v-for="(row, idx) in fields" :key="row.name || idx">
-                <slot v-if="row.isGroup" name="group-header" :row="row" :groupName="row.groupName" />
-                <slot v-else name="field-row" :row="row" />
-              </template>
-              <slot v-if="loading" name="loading" />
-              <slot name="empty" />
-              <slot name="after-list" :currentPage="currentPage" :totalPages="1" :isFirstPage="true" :isLastPage="true" :totalRows="totalFieldsCount ?? fields.length" :firstPage="() => {}" :lastPage="() => {}" />
-            </div>`,
-          props: [
-            "fields",
-            "search",
-            "searchPlaceholder",
-            "currentPage",
-            "pageSize",
-            "pageSizeOptions",
-            "rowKey",
-            "loading",
-            "showPagination",
-            "totalFieldsCount",
-          ],
-          emits: ["update:search", "update:currentPage"],
-        },
-        OInput: {
-          name: "OInput",
-          template:
-            '<input class="q-input-stub" :value="modelValue" :data-test="$attrs[\'data-test\']" @input="$emit(\'update:modelValue\', $event.target.value)" />',
-          props: ["modelValue", "placeholder", "debounce"],
-          emits: ["update:modelValue"],
-        },
-        OIcon: {
-          name: "OIcon",
-          template: '<span class="OIcon-stub" v-bind="$attrs"></span>',
-          props: ["name", "color", "size"],
-        },
-        OButton: {
-          name: "OButton",
-          template:
-            '<button class="q-btn-stub" v-bind="$attrs" @click="$emit(\'click\', $event)"><slot /></button>',
-          props: ["icon", "dense", "size", "flat"],
-          emits: ["click"],
-        },
-        OSkeleton: true,
-        OBadge: true,
-      },
-    },
-  });
-}
-
-describe("FieldList", () => {
-  afterEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe("Component rendering", () => {
-    it("mounts without errors", () => {
-      const wrapper = createWrapper();
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it("renders the q-table with correct data-test attribute", () => {
-      const wrapper = createWrapper();
-      const table = wrapper.find(
-        '[data-test="log-search-index-list-fields-table"]'
-      );
-      expect(table.exists()).toBe(true);
-    });
-
-    it("renders the field search input", () => {
-      const wrapper = createWrapper();
-      const input = wrapper.find(
-        '[data-test="log-search-index-list-field-search-input"]'
-      );
-      expect(input.exists()).toBe(true);
-    });
-
-    it("does not show loading skeleton when loadingStream is false", () => {
-      const wrapper = createWrapper({ loadingStream: false });
-      const skeleton = wrapper.find('[data-test="logs-fieldlist-loading-skeleton"]');
-      expect(skeleton.exists()).toBe(false);
-    });
-
-    it("shows loading skeleton when loadingStream is true", () => {
-      const wrapper = createWrapper({ loadingStream: true });
-      const skeleton = wrapper.find('[data-test="logs-fieldlist-loading-skeleton"]');
-      expect(skeleton.exists()).toBe(true);
-    });
-
-    it("renders field list when loadingStream is true", () => {
-      const wrapper = createWrapper({ loadingStream: true });
-      expect(wrapper.exists()).toBe(true);
-    });
-  });
-
-  describe("Field rows rendering", () => {
-    it("renders FieldRow for regular field rows", () => {
-      const wrapper = createWrapper();
-      const fieldRows = wrapper.findAllComponents({ name: "FieldRow" });
-      expect(fieldRows.length).toBeGreaterThan(0);
-    });
-
-    it("passes field prop correctly to FieldRow", () => {
-      const wrapper = createWrapper();
-      const firstFieldRow = wrapper.findComponent({ name: "FieldRow" });
-      expect(firstFieldRow.props("field")).toBeDefined();
-    });
-
-    it("passes selectedFields to FieldRow", () => {
-      const wrapper = createWrapper({ selectedFields: ["log_level"] });
-      const fieldRow = wrapper.findComponent({ name: "FieldRow" });
-      expect(fieldRow.props("selectedFields")).toEqual(["log_level"]);
-    });
-
-    it("passes timestampColumn to FieldRow", () => {
-      const wrapper = createWrapper({ timestampColumn: "_timestamp" });
-      const fieldRow = wrapper.findComponent({ name: "FieldRow" });
-      expect(fieldRow.props("timestampColumn")).toBe("_timestamp");
-    });
-
-    it("passes theme to FieldRow", () => {
-      const wrapper = createWrapper({ theme: "dark" });
-      const fieldRow = wrapper.findComponent({ name: "FieldRow" });
-      expect(fieldRow.props("theme")).toBe("dark");
-    });
-
-    it("passes showQuickMode to FieldRow", () => {
-      const wrapper = createWrapper({ showQuickMode: true });
-      const fieldRow = wrapper.findComponent({ name: "FieldRow" });
-      expect(fieldRow.props("showQuickMode")).toBe(true);
-    });
-  });
-
-  describe("FieldExpansion inside slot", () => {
-    it("renders FieldExpansion component within FieldRow expansion slot", () => {
-      const wrapper = createWrapper();
-      const expansion = wrapper.findComponent({ name: "FieldExpansion" });
-      expect(expansion.exists()).toBe(true);
-    });
-
-    it("passes fieldValues to FieldExpansion", () => {
-      const fieldValues = {
-        log_level: { isLoading: false, values: [], errMsg: "", hasMore: false },
-      };
-      const wrapper = createWrapper({ fieldValues });
-      const expansion = wrapper.findComponent({ name: "FieldExpansion" });
-      expect(expansion.props("fieldValues")).toEqual(fieldValues["log_level"]);
-    });
-
-    it("passes selectedStreamsCount to FieldExpansion", () => {
-      const wrapper = createWrapper({ selectedStreamsCount: 3 });
-      const expansion = wrapper.findComponent({ name: "FieldExpansion" });
-      expect(expansion.props("selectedStreamsCount")).toBe(3);
-    });
-
-    it("passes defaultValuesCount to FieldExpansion", () => {
-      const wrapper = createWrapper({ defaultValuesCount: 20 });
-      const expansion = wrapper.findComponent({ name: "FieldExpansion" });
-      expect(expansion.props("defaultValuesCount")).toBe(20);
-    });
-  });
-
-  describe("Emits: from FieldRow", () => {
-    it("re-emits add-to-filter from FieldRow", async () => {
-      const wrapper = createWrapper();
-      const fieldRow = wrapper.findComponent({ name: "FieldRow" });
-      await fieldRow.vm.$emit("add-to-filter", "log_level=''");
-      expect(wrapper.emitted("add-to-filter")).toBeTruthy();
-      expect(wrapper.emitted("add-to-filter")![0]).toEqual(["log_level=''"]);
-    });
-
-    it("re-emits toggle-field from FieldRow", async () => {
-      const wrapper = createWrapper();
-      const fieldRow = wrapper.findComponent({ name: "FieldRow" });
-      const field = defaultProps.streamFieldsRows[0];
-      await fieldRow.vm.$emit("toggle-field", field);
-      expect(wrapper.emitted("toggle-field")).toBeTruthy();
-      expect(wrapper.emitted("toggle-field")![0]).toEqual([field]);
-    });
-
-    it("re-emits toggle-interesting from FieldRow", async () => {
-      const wrapper = createWrapper();
-      const fieldRow = wrapper.findComponent({ name: "FieldRow" });
-      const field = defaultProps.streamFieldsRows[0];
-      await fieldRow.vm.$emit("toggle-interesting", field, false);
-      expect(wrapper.emitted("toggle-interesting")).toBeTruthy();
-      expect(wrapper.emitted("toggle-interesting")![0]).toEqual([field, false]);
-    });
-  });
-
-  describe("Emits: from FieldExpansion", () => {
-    it("re-emits add-to-filter from FieldExpansion", async () => {
-      const wrapper = createWrapper();
-      const expansion = wrapper.findComponent({ name: "FieldExpansion" });
-      await expansion.vm.$emit("add-to-filter", "log_level=''");
-      expect(wrapper.emitted("add-to-filter")).toBeTruthy();
-    });
-
-    it("re-emits toggle-field from FieldExpansion", async () => {
-      const wrapper = createWrapper();
-      const expansion = wrapper.findComponent({ name: "FieldExpansion" });
-      const field = defaultProps.streamFieldsRows[0];
-      await expansion.vm.$emit("toggle-field", field);
-      expect(wrapper.emitted("toggle-field")).toBeTruthy();
-    });
-
-    it("re-emits add-search-term from FieldExpansion", async () => {
-      const wrapper = createWrapper();
-      const expansion = wrapper.findComponent({ name: "FieldExpansion" });
-      await expansion.vm.$emit(
-        "add-search-term",
-        "log_level",
-        "error",
-        "include"
-      );
-      expect(wrapper.emitted("add-search-term")).toBeTruthy();
-      expect(wrapper.emitted("add-search-term")![0]).toEqual([
-        "log_level",
-        "error",
-        "include",
-      ]);
-    });
-
-    it("re-emits search-field-values from FieldExpansion", async () => {
-      const wrapper = createWrapper();
-      const expansion = wrapper.findComponent({ name: "FieldExpansion" });
-      await expansion.vm.$emit(
-        "search-field-values",
-        "log_level",
-        "err"
-      );
-      expect(wrapper.emitted("search-field-values")).toBeTruthy();
-      expect(wrapper.emitted("search-field-values")![0]).toEqual([
-        "log_level",
-        "err",
-      ]);
-    });
-
-    it("re-emits load-more-values from FieldExpansion", async () => {
-      const wrapper = createWrapper();
-      const expansion = wrapper.findComponent({ name: "FieldExpansion" });
-      await expansion.vm.$emit("load-more-values", "log_level");
-      expect(wrapper.emitted("load-more-values")).toBeTruthy();
-      expect(wrapper.emitted("load-more-values")![0]).toEqual(["log_level"]);
-    });
-
-    it("re-emits before-show from FieldExpansion", async () => {
-      const wrapper = createWrapper();
-      const expansion = wrapper.findComponent({ name: "FieldExpansion" });
-      const event = {};
-      const field = defaultProps.streamFieldsRows[0];
-      await expansion.vm.$emit("before-show", event, field);
-      expect(wrapper.emitted("before-show")).toBeTruthy();
-    });
-
-    it("re-emits before-hide from FieldExpansion", async () => {
-      const wrapper = createWrapper();
-      const expansion = wrapper.findComponent({ name: "FieldExpansion" });
-      const field = defaultProps.streamFieldsRows[0];
-      await expansion.vm.$emit("before-hide", field);
-      expect(wrapper.emitted("before-hide")).toBeTruthy();
-    });
-  });
-
-  describe("Emits: filter-field update", () => {
-    it("emits update:filter-field when search input changes", async () => {
-      const wrapper = createWrapper();
-      const input = wrapper.find(
-        '[data-test="log-search-index-list-field-search-input"]'
-      );
-      await input.trigger("input");
-      // The emit is wired to @update:model-value from QInput stub
-      // Since we are testing with stubs, we verify the input renders correctly
-      expect(input.exists()).toBe(true);
-    });
-  });
-
-  describe("FieldListPagination rendering", () => {
-    it("renders FieldListPagination component", () => {
-      const wrapper = createWrapper();
-      const pagination = wrapper.findComponent({
-        name: "FieldListPagination",
-      });
-      expect(pagination.exists()).toBe(true);
-    });
-
-    it("passes showSchemaToggle to FieldListPagination", () => {
-      const wrapper = createWrapper({ showUserDefinedSchemaToggle: true });
-      const pagination = wrapper.findComponent({
-        name: "FieldListPagination",
-      });
-      expect(pagination.props("showSchemaToggle")).toBe(true);
-    });
-
-    it("passes showQuickMode to FieldListPagination", () => {
-      const wrapper = createWrapper({ showQuickMode: true });
-      const pagination = wrapper.findComponent({
-        name: "FieldListPagination",
-      });
-      expect(pagination.props("showQuickMode")).toBe(true);
-    });
-
-    it("passes totalFieldsCount to FieldListPagination", () => {
-      const wrapper = createWrapper({ totalFieldsCount: 50 });
-      const pagination = wrapper.findComponent({
-        name: "FieldListPagination",
-      });
-      expect(pagination.props("totalFieldsCount")).toBeDefined();
-    });
-  });
-
-  describe("Emits: from FieldListPagination", () => {
-    it("re-emits toggle-schema from FieldListPagination", async () => {
-      const wrapper = createWrapper();
-      const pagination = wrapper.findComponent({
-        name: "FieldListPagination",
-      });
-      await pagination.vm.$emit("toggle-schema", "user_defined");
-      expect(wrapper.emitted("toggle-schema")).toBeTruthy();
-      expect(wrapper.emitted("toggle-schema")![0]).toEqual(["user_defined"]);
-    });
-
-    it("re-emits toggle-interesting-fields from FieldListPagination", async () => {
-      const wrapper = createWrapper();
-      const pagination = wrapper.findComponent({
-        name: "FieldListPagination",
-      });
-      await pagination.vm.$emit("toggle-interesting-fields", true);
-      expect(wrapper.emitted("toggle-interesting-fields")).toBeTruthy();
-      expect(wrapper.emitted("toggle-interesting-fields")![0]).toEqual([true]);
-    });
-
-    it("re-emits set-page from FieldListPagination", async () => {
-      const wrapper = createWrapper();
-      const pagination = wrapper.findComponent({
-        name: "FieldListPagination",
-      });
-      await pagination.vm.$emit("set-page", 2);
-      expect(wrapper.emitted("set-page")).toBeTruthy();
-      expect(wrapper.emitted("set-page")![0]).toEqual([2]);
-    });
-
-    it("re-emits reset-fields from FieldListPagination", async () => {
-      const wrapper = createWrapper();
-      const pagination = wrapper.findComponent({
-        name: "FieldListPagination",
-      });
-      await pagination.vm.$emit("reset-fields");
-      expect(wrapper.emitted("reset-fields")).toBeTruthy();
-    });
-  });
-
-  describe("Exposed API", () => {
-    it("exposes scrollToTop method", () => {
-      const wrapper = createWrapper();
-      expect(typeof wrapper.vm.scrollToTop).toBe("function");
-    });
-
-    it("scrollToTop runs without error when fieldListRef is null", () => {
-      const wrapper = createWrapper();
-      expect(() => wrapper.vm.scrollToTop()).not.toThrow();
-    });
-  });
-
-  describe("Edge cases", () => {
-    it("handles empty streamFieldsRows", () => {
-      const wrapper = createWrapper({ streamFieldsRows: [] });
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it("handles empty fieldValues object", () => {
-      const wrapper = createWrapper({ fieldValues: {} });
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it("handles dark theme", () => {
-      const wrapper = createWrapper({ theme: "dark" });
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it("handles wrapCells=true", () => {
-      const wrapper = createWrapper({ wrapCells: true });
-      expect(wrapper.exists()).toBe(true);
-    });
-  });
-});
diff --git a/web/src/plugins/logs/components/LogsPluginFieldList.vue b/web/src/plugins/logs/components/LogsPluginFieldList.vue
deleted file mode 100644
index 4260853d21..0000000000
--- a/web/src/plugins/logs/components/LogsPluginFieldList.vue
+++ /dev/null
@@ -1,348 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc. -->
-
-<template>
-  <OFieldList
-    ref="ofieldListRef"
-    :fields="visibleFields"
-    :search="filterField"
-    :search-placeholder="t('search.searchField')"
-    :current-page="pagination.page"
-    :page-size="pagination.rowsPerPage"
-    :page-size-options="[pagination.rowsPerPage]"
-    row-key="name"
-    :loading="loadingStream"
-    :show-pagination="true"
-    @update:search="$emit('update:filter-field', $event)"
-    @update:current-page="(page: number) => $emit('set-page', page)"
-  >
-    <!-- Group header -->
-    <template #group-header="{ row, groupName }">
-      <div
-        :data-test="`logs-page-field-list-group-header-${row.group}`"
-        class="font-semibold text-xs py-0.5 px-[0.325rem] cursor-pointer text-field-list-group-text bg-surface-subtle h-full w-full flex! justify-between items-center rounded-[0.25rem]"
-        @click="$emit('toggle-group', row.group)"
-      >
-        <div class="flex-1 min-w-0 flex items-center gap-1">
-          <span>{{ groupName }}</span>
-          <OTag type="fieldTag">{{
-            (showOnlyInterestingFields
-              ? interestingExpandedGroupRowsFieldCount[row.group]
-              : expandGroupRowsFieldCount[row.group]) ?? 0
-          }}</OTag>
-        </div>
-        <OButton
-          v-if="(expandGroupRowsFieldCount[row.group] ?? 0) > 0"
-          variant="ghost"
-          size="icon-xs-sq"
-          class="flex-shrink-0"
-        >
-          <OIcon
-            :name="
-              expandGroupRows[row.group] ? 'expand-more' : 'chevron-right'
-            "
-            size="sm"
-          />
-        </OButton>
-      </div>
-    </template>
-
-    <!-- Field row -->
-    <template #field-row="{ row }">
-      <FieldRow
-        :field="row"
-        :selected-fields="selectedFields"
-        :timestamp-column="timestampColumn"
-        :theme="theme"
-        :show-quick-mode="showQuickMode"
-        :show-fts-field-values="showFtsFieldValues"
-        @add-to-filter="$emit('add-to-filter', $event)"
-        @toggle-field="$emit('toggle-field', $event)"
-        @toggle-interesting="
-          (field, isInteresting) =>
-            $emit('toggle-interesting', field, isInteresting)
-        "
-      >
-        <template #expansion="{ field }">
-          <FieldExpansion
-            :field="field"
-            :field-values="fieldValues[field.name]"
-            :active-include-values="
-              activeIncludeFieldValues?.[field.name] ?? []
-            "
-            :active-exclude-values="
-              activeExcludeFieldValues?.[field.name] ?? []
-            "
-            :expanded="expandedFields?.[field.name] ?? false"
-            :selected-fields="selectedFields"
-            :selected-streams-count="selectedStreamsCount"
-            :theme="theme"
-            :show-quick-mode="showQuickMode"
-            :default-values-count="defaultValuesCount"
-            @add-to-filter="$emit('add-to-filter', $event)"
-            @toggle-field="$emit('toggle-field', $event)"
-            @toggle-interesting="
-              (field, isInteresting) =>
-                $emit('toggle-interesting', field, isInteresting)
-            "
-            @add-search-term="
-              (fieldName, value, action) =>
-                $emit('add-search-term', fieldName, value, action)
-            "
-            @add-multiple-search-terms="
-              (fieldName, values, action) =>
-                $emit(
-                  'add-multiple-search-terms',
-                  fieldName,
-                  values,
-                  action,
-                )
-            "
-            @remove-field-filter="
-              (fieldName) => $emit('remove-field-filter', fieldName)
-            "
-            @before-show="
-              (event, field) => $emit('before-show', event, field)
-            "
-            @before-hide="(field) => $emit('before-hide', field)"
-            @search-field-values="
-              (fieldName, searchTerm) =>
-                $emit('search-field-values', fieldName, searchTerm)
-            "
-            @load-more-values="
-              (fieldName) => $emit('load-more-values', fieldName)
-            "
-          />
-        </template>
-      </FieldRow>
-    </template>
-
-    <!-- Loading skeleton -->
-    <template #loading>
-      <div
-        data-test="logs-fieldlist-loading-skeleton"
-        class="w-full flex flex-col"
-      >
-        <!-- Group 1 header -->
-        <div class="h-7 flex items-center justify-between px-2">
-          <OSkeleton type="rect" class="h-3 w-24 rounded-sm" />
-          <OSkeleton type="rect" class="h-3 w-3 rounded-sm" />
-        </div>
-        <!-- Group 1 fields -->
-        <div class="flex items-center gap-2 px-3 py-[0.375rem]">
-          <OSkeleton type="rect" class="w-[0.875rem] h-[0.875rem] rounded-sm shrink-0" />
-          <OSkeleton type="text" class="flex-1" />
-        </div>
-        <div class="flex items-center gap-2 px-3 py-[0.375rem]">
-          <OSkeleton type="rect" class="w-[0.875rem] h-[0.875rem] rounded-sm shrink-0" />
-          <OSkeleton type="text" class="w-3/4" />
-        </div>
-        <div class="flex items-center gap-2 px-3 py-[0.375rem]">
-          <OSkeleton type="rect" class="w-[0.875rem] h-[0.875rem] rounded-sm shrink-0" />
-          <OSkeleton type="text" class="flex-1" />
-        </div>
-        <div class="flex items-center gap-2 px-3 py-[0.375rem]">
-          <OSkeleton type="rect" class="w-[0.875rem] h-[0.875rem] rounded-sm shrink-0" />
-          <OSkeleton type="text" class="w-4/5" />
-        </div>
-        <!-- Group 2 header -->
-        <div class="h-7 flex items-center justify-between px-2 mt-2">
-          <OSkeleton type="rect" class="h-3 w-16 rounded-sm" />
-          <OSkeleton type="rect" class="h-3 w-3 rounded-sm" />
-        </div>
-        <!-- Group 2 field -->
-        <div class="flex items-center gap-2 px-3 py-[0.375rem]">
-          <OSkeleton type="rect" class="w-[0.875rem] h-[0.875rem] rounded-sm shrink-0" />
-          <OSkeleton type="text" class="w-2/3" />
-        </div>
-        <!-- Group 3 header -->
-        <div class="h-7 flex items-center justify-between px-2 mt-2">
-          <OSkeleton type="rect" class="h-3 w-32 rounded-sm" />
-          <OSkeleton type="rect" class="h-3 w-3 rounded-sm" />
-        </div>
-        <!-- Group 3 fields -->
-        <div class="flex items-center gap-2 px-3 py-[0.375rem]">
-          <OSkeleton type="rect" class="w-[0.875rem] h-[0.875rem] rounded-sm shrink-0" />
-          <OSkeleton type="text" class="flex-1" />
-        </div>
-        <div class="flex items-center gap-2 px-3 py-[0.375rem]">
-          <OSkeleton type="rect" class="w-[0.875rem] h-[0.875rem] rounded-sm shrink-0" />
-          <OSkeleton type="text" class="w-4/5" />
-        </div>
-        <div class="flex items-center gap-2 px-3 py-[0.375rem]">
-          <OSkeleton type="rect" class="w-[0.875rem] h-[0.875rem] rounded-sm shrink-0" />
-          <OSkeleton type="text" class="flex-1" />
-        </div>
-        <div class="flex items-center gap-2 px-3 py-[0.375rem]">
-          <OSkeleton type="rect" class="w-[0.875rem] h-[0.875rem] rounded-sm shrink-0" />
-          <OSkeleton type="text" class="w-3/4" />
-        </div>
-        <div class="flex items-center gap-2 px-3 py-[0.375rem]">
-          <OSkeleton type="rect" class="w-[0.875rem] h-[0.875rem] rounded-sm shrink-0" />
-          <OSkeleton type="text" class="flex-1" />
-        </div>
-      </div>
-    </template>
-
-    <!-- Empty state -->
-    <template #empty>
-      <div
-        class="text-center py-[0.725rem] flex items-center justify-center"
-      >
-        <OIcon name="info" size="xs" />
-        <span class="pl-[0.375rem]">{{ t('logs.logsPluginFieldList.noMatchingFields') }}</span>
-      </div>
-    </template>
-
-    <!-- After list: pagination + toggles -->
-    <template #after-list="bottomProps">
-      <FieldListPagination
-        :data-test-prefix="'logs-page'"
-        :show-schema-toggle="showUserDefinedSchemaToggle"
-        :show-quick-mode="showQuickMode"
-        :use-user-defined-schemas="useUserDefinedSchemas"
-        :show-only-interesting-fields="showOnlyInterestingFields"
-        :schema-toggle-options="userDefinedSchemaBtnGroupOption"
-        :interesting-fields-toggle-options="selectedFieldsBtnGroupOption"
-        :current-page="bottomProps.currentPage"
-        :pages-number="bottomProps.totalPages"
-        :is-first-page="bottomProps.isFirstPage"
-        :is-last-page="bottomProps.isLastPage"
-        :total-fields-count="bottomProps.totalRows"
-        @toggle-schema="$emit('toggle-schema', $event)"
-        @toggle-interesting-fields="$emit('toggle-interesting-fields', $event)"
-        @first-page="bottomProps.firstPage()"
-        @last-page="bottomProps.lastPage()"
-        @set-page="$emit('set-page', $event)"
-        @reset-fields="$emit('reset-fields')"
-      />
-    </template>
-  </OFieldList>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from "vue";
-import { useI18n } from "vue-i18n";
-import FieldRow from "@/components/common/FieldRow.vue";
-import FieldExpansion from "@/components/common/FieldExpansion.vue";
-import FieldListPagination from "@/components/common/FieldListPagination.vue";
-import OButton from "@/lib/core/Button/OButton.vue";
-import OIcon from "@/lib/core/Icon/OIcon.vue";
-import OTag from "@/lib/core/Badge/OTag.vue";
-import OFieldList from "@/lib/lists/FieldList/OFieldList.vue";
-import OSkeleton from "@/lib/feedback/Skeleton/OSkeleton.vue";
-
-const { t } = useI18n();
-
-interface Props {
-  streamFieldsRows: any[];
-  selectedStream: string;
-  filterField: string;
-  filterFieldFn: (rows: any, terms: any) => any[];
-  pagination: { page: number; rowsPerPage: number };
-  wrapCells: boolean;
-  loadingStream: boolean;
-  showOnlyInterestingFields: boolean;
-  interestingExpandedGroupRowsFieldCount: Record<string, number>;
-  expandGroupRowsFieldCount: Record<string, number>;
-  expandGroupRows: Record<string, boolean>;
-  theme: string;
-  selectedFields: string[];
-  timestampColumn: string;
-  showQuickMode: boolean;
-  fieldValues: Record<string, any>;
-  activeIncludeFieldValues?: Record<string, string[]>;
-  activeExcludeFieldValues?: Record<string, string[]>;
-  expandedFields?: Record<string, boolean>;
-  selectedStreamsCount: number;
-  defaultValuesCount: number;
-  showUserDefinedSchemaToggle: boolean;
-  useUserDefinedSchemas: string;
-  userDefinedSchemaBtnGroupOption: any[];
-  selectedFieldsBtnGroupOption: any[];
-  totalFieldsCount: number;
-  showFtsFieldValues: boolean;
-}
-
-const props = defineProps<Props>();
-
-defineEmits<{
-  "update:pagination": [value: { page: number; rowsPerPage: number }];
-  "update:filter-field": [value: string];
-  "add-to-filter": [value: string];
-  "toggle-field": [field: any];
-  "toggle-interesting": [field: any, isInteresting: boolean];
-  "add-search-term": [fieldName: string, value: string, action: string];
-  "add-multiple-search-terms": [
-    fieldName: string,
-    values: string[],
-    action: string,
-  ];
-  "remove-field-filter": [fieldName: string];
-  "search-field-values": [fieldName: string, searchTerm: string];
-  "load-more-values": [fieldName: string];
-  "before-show": [event: any, field: any];
-  "before-hide": [field: any];
-  "toggle-group": [group: string];
-  "toggle-schema": [value: string];
-  "toggle-interesting-fields": [value: boolean];
-  "set-page": [page: number];
-  "reset-fields": [];
-}>();
-
-const ofieldListRef = ref<InstanceType<typeof OFieldList> | null>(null);
-
-// ---------------------------------------------------------------------------
-// Data transformation: filter & annotate rows for OFieldList
-// ---------------------------------------------------------------------------
-
-const visibleFields = computed(() => {
-  return props.streamFieldsRows
-    .filter((row) => {
-      // Group headers
-      if (row.label) {
-        if (props.showOnlyInterestingFields) {
-          return (
-            (props.interestingExpandedGroupRowsFieldCount[row.group] ?? 0) > 0
-          );
-        }
-        return true;
-      }
-      // Field rows — interesting fields filter
-      if (props.showOnlyInterestingFields) {
-        if (!row.isInterestingField) return false;
-        if (
-          (props.interestingExpandedGroupRowsFieldCount[row.group] ?? 0) === 0
-        )
-          return false;
-      }
-      // Group collapse
-      if (row.group && props.expandGroupRows[row.group] === false) return false;
-      return true;
-    })
-    .map((row) => ({
-      ...row,
-      isGroup: !!row.label,
-      groupName: row.label ? row.name : (row.group || row.name),
-      _index: row._index ?? 0,
-    }));
-});
-
-// ---------------------------------------------------------------------------
-// Expose for parent (IndexList.vue)
-// ---------------------------------------------------------------------------
-
-function scrollToTop() {
-  ofieldListRef.value?.scrollToTop?.();
-}
-
-function prepareScrollReset() {
-  // With OTable, scroll reset is handled by scrollToTop before data changes
-}
-
-defineExpose({
-  fieldListRef: ofieldListRef,
-  scrollToTop,
-  prepareScrollReset,
-});
-</script>
-
diff --git a/web/src/plugins/logs/data-table/CellActions.spec.ts b/web/src/plugins/logs/data-table/CellActions.spec.ts
index 754524d534..ef59d519be 100644
--- a/web/src/plugins/logs/data-table/CellActions.spec.ts
+++ b/web/src/plugins/logs/data-table/CellActions.spec.ts
@@ -86,16 +86,18 @@ describe("CellActions", () => {
 
   // ── backgroundClass computed ──────────────────────────────────────────────────
   describe("backgroundClass computed", () => {
-    it("applies dark background class in dark theme", () => {
+    // The dark/light pair collapsed to a single semantic token; the overlay now
+    // always renders bg-surface-base and dark mode is handled by the token itself.
+    it("applies the surface-base background token in dark theme", () => {
       mockStore.state.theme = "dark";
       const wrapper = mountComponent();
-      expect(wrapper.find(".field_overlay").classes()).toContain("bg-black");
+      expect(wrapper.find(".field_overlay").classes()).toContain("bg-surface-base");
     });
 
-    it("applies light background class in light theme", () => {
+    it("applies the surface-base background token in light theme", () => {
       mockStore.state.theme = "light";
       const wrapper = mountComponent();
-      expect(wrapper.find(".field_overlay").classes()).toContain("bg-white");
+      expect(wrapper.find(".field_overlay").classes()).toContain("bg-surface-base");
     });
   });
 
diff --git a/web/src/plugins/logs/data-table/CellActions.vue b/web/src/plugins/logs/data-table/CellActions.vue
index 4e93421df1..5e2d6848a5 100644
--- a/web/src/plugins/logs/data-table/CellActions.vue
+++ b/web/src/plugins/logs/data-table/CellActions.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="field_overlay absolute right-0 top-[50%] table-cell-actions translate-y-[-50%] h-full! flex! items-center justify-center rounded max-h-10! px-2"
+    class="field_overlay absolute right-0 top-[50%] table-cell-actions translate-y-[-50%] h-full! flex! items-center justify-center rounded-default max-h-10! px-2"
     :class="backgroundClass"
     :title="row[column.id]"
     :data-test="`log-add-data-from-column-${row[column.id]}`"
@@ -50,7 +50,7 @@
     <O2AIContextAddBtn
       v-if="!hideAi"
       @send-to-ai-chat="sendToAiChat(JSON.stringify(row[column.id]))"
-      :style="'border: 1px solid #fff;'"
+      class="border border-solid border-white"
       :size="'6px'"
       :imageHeight="'16px'"
       :imageWidth="'16px'"
@@ -61,7 +61,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import type { PropType } from "vue";
-import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
 import EqualIcon from "@/components/icons/EqualIcon.vue";
 import NotEqualIcon from "@/components/icons/NotEqualIcon.vue";
@@ -93,7 +92,6 @@ const props = defineProps({
   },
 });
 
-const store = useStore();
 const { t } = useI18n();
 
 const emit = defineEmits([
@@ -114,9 +112,7 @@ const addSearchTerm = (
   emit("addSearchTerm", field, field_value, action);
 };
 
-const backgroundClass = computed(() =>
-  store.state.theme === "dark" ? "bg-black" : "bg-white",
-);
+const backgroundClass = "bg-surface-base";
 const sendToAiChat = (value: any) => {
   emit("sendToAiChat", value);
 };
diff --git a/web/src/plugins/logs/patterns/PatternCard.vue b/web/src/plugins/logs/patterns/PatternCard.vue
index 8f9b021f38..2e5bddacf4 100644
--- a/web/src/plugins/logs/patterns/PatternCard.vue
+++ b/web/src/plugins/logs/patterns/PatternCard.vue
@@ -16,7 +16,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <div
-    class="flex border-b border-[var(--color-border-default)] cursor-pointer hover:bg-[var(--o2-hover-gray)] relative py-1 transition-colors duration-150 ease-in-out"
+    class="flex border-b border-border-default cursor-pointer hover:bg-hover-gray relative py-1 transition-colors duration-150 ease-in-out"
     :class="wrap ? 'items-start' : 'items-center'"
     @click="$emit('click', pattern, index)"
     :data-test="`pattern-card-${index}`"
@@ -30,9 +30,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <div class="flex-1 min-w-0 px-2 pl-3" :class="wrap ? '' : 'overflow-hidden'">
       <!-- Template rendered as tokenized chips so wildcards are visually distinct -->
       <div
-        class="font-mono text-xs w-full"
+        class="font-mono text-xs w-full text-text-secondary"
         :class="[
-          store.state.theme === 'dark' ? 'text-gray-300' : 'text-gray-500',
           wrap
             ? 'break-all'
             : 'flex items-baseline gap-x-[2px] gap-y-[1px] flex-nowrap overflow-hidden',
@@ -73,7 +72,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <!-- Anomaly badge with explanation tooltip -->
       <span
         v-if="pattern.is_anomaly"
-        class="text-badge-error-ol-text text-weight-bold text-[0.7rem] cursor-help"
+        class="text-badge-error-ol-text font-bold text-2xs cursor-help"
         :data-test="`pattern-card-${index}-anomaly-badge`"
       >
         ⚠️ {{ t("search.anomalyLabel") }}
@@ -84,14 +83,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <!-- Count & Percentage Column -->
     <div class="w-24 flex-shrink-0 px-2 text-right">
       <div
-        class="text-[var(--o2-text-4)] font-bold"
+        class="text-text-body font-bold"
         :data-test="`pattern-card-${index}-frequency`"
       >
         {{ pattern.frequency.toLocaleString() }}
       </div>
       <div
-        class="text-[0.6875rem] opacity-80"
-        :class="store.state.theme === 'dark' ? 'text-gray-400' : 'text-gray-400'"
+        class="text-2xs opacity-80"
+        :class="'text-text-secondary'"
         :data-test="`pattern-card-${index}-percentage`"
       >
         {{ pattern.percentage.toFixed(2) }}%
@@ -100,7 +99,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     <!-- Actions Column -->
     <div
-      class="w-20 flex-shrink-0 px-2 flex items-center justify-center gap-[2px]"
+      class="w-20 flex-shrink-0 px-2 flex items-center justify-center gap-0.5"
       :class="wrap ? 'pt-1' : ''"
     >
       <OButton
@@ -140,8 +139,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <script setup lang="ts">
 import { computed } from "vue";
-import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
+import useTheme from "@/composables/useTheme";
 import EqualIcon from "@/components/icons/EqualIcon.vue";
 import NotEqualIcon from "@/components/icons/NotEqualIcon.vue";
 import OButton from "@/lib/core/Button/OButton.vue";
@@ -170,8 +169,8 @@ defineEmits<{
   (e: "create-alert", pattern: any): void;
 }>();
 
-const store = useStore();
 const { t } = useI18n();
+const { isDark } = useTheme();
 const { onMouseEnter, onMouseLeave } = useWildcardHover();
 
 const templateTokens = computed(() =>
@@ -180,8 +179,6 @@ const templateTokens = computed(() =>
 
 const anomalyExplanationText = computed(() => anomalyExplanation(props.pattern, t));
 
-const isDark = computed(() => store.state.theme === "dark");
-
 const statusColor = computed(() =>
   extractStatusFromTemplate(props.pattern.template ?? "", isDark.value).color,
 );
@@ -215,6 +212,3 @@ function highlightLevels(text: string): HighlightSegment[] {
 }
 </script>
 
-<style>
-@import "@/assets/styles/log-highlighting.css";
-</style>
diff --git a/web/src/plugins/logs/patterns/PatternDetailsDialog.vue b/web/src/plugins/logs/patterns/PatternDetailsDialog.vue
index 72255f0d1b..a3685096ba 100644
--- a/web/src/plugins/logs/patterns/PatternDetailsDialog.vue
+++ b/web/src/plugins/logs/patterns/PatternDetailsDialog.vue
@@ -17,6 +17,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div>
     <ODrawer data-test="pattern-details-dialog"
+    bleed
     :open="modelValue"
     @update:open="$emit('update:modelValue', $event)"
     :width="90"
@@ -29,12 +30,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <div class="flex items-center gap-2 min-w-0">
           <span
             v-if="patternLevelInfo"
-            class="shrink-0 inline-flex items-center px-1.5 py-0.5 rounded text-xs font-semibold uppercase tracking-wide text-white"
+            class="shrink-0 inline-flex items-center px-1.5 py-0.5 rounded-default text-xs font-semibold uppercase tracking-wide text-white"
             :style="{ backgroundColor: patternLevelInfo.color }"
           >
             {{ patternLevelInfo.level }}
           </span>
-          <h4 class="font-semibold text-[var(--o2-text-heading)] truncate min-w-0 text-base leading-tight m-0">
+          <h4 class="font-semibold text-text-heading truncate min-w-0 text-base leading-tight m-0">
             {{ selectedPattern?.pattern?.description || t('search.patternDetailsTitle') }}
           </h4>
           <template v-if="selectedPattern">
@@ -49,7 +50,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- Row 2: full-width module path, truncates at edge -->
         <code
           v-if="selectedPattern && patternPathToken"
-          class="block w-full truncate text-[var(--o2-text-code)] font-mono text-[0.6875rem] text-[var(--o2-text-caption)]"
+          class="block w-full truncate text-text-code font-mono text-2xs text-text-secondary"
         >{{ patternPathToken }}</code>
       </div>
     </template>
@@ -63,21 +64,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <div class="flex gap-3">
             <div class="w-1/2">
               <OCard
-                class="bg-[var(--o2-card-bg-solid)] border border-solid border-[var(--o2-border-color)]"
+                class="bg-card-glass-solid border border-solid border-card-glass-border"
               >
-                <OCardSection class="p-[0.375rem]">
+                <OCardSection class="p-1.5">
                   <div
                     class="text-xs"
                     :class="
-                      store.state.theme === 'dark'
-                        ? 'text-gray-400'
-                        : 'text-gray-400'
+                      'text-text-secondary'
                     "
                   >
                     {{ t("search.patternOccurrences") }}
                   </div>
                   <div
-                    class="text-2xl font-semibold text-weight-bold text-primary mt-1"
+                    class="text-2xl font-semibold font-bold text-primary mt-1"
                   >
                     {{
                       selectedPattern.pattern.frequency.toLocaleString()
@@ -87,20 +86,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </OCard>
             </div>
             <div class="w-1/2">
-              <OCard class="bg-[var(--o2-card-bg-solid)] border border-solid border-[var(--o2-border-color)]">
-                <OCardSection class="p-[0.375rem]">
+              <OCard class="bg-card-glass-solid border border-solid border-card-glass-border">
+                <OCardSection class="p-1.5">
                   <div
                     class="text-xs"
                     :class="
-                      store.state.theme === 'dark'
-                        ? 'text-gray-400'
-                        : 'text-gray-400'
+                      'text-text-secondary'
                     "
                   >
                     {{ t("search.patternPercentage") }}
                   </div>
                   <div
-                    class="text-2xl font-semibold text-weight-bold text-primary mt-1"
+                    class="text-2xl font-semibold font-bold text-primary mt-1"
                   >
                     {{ selectedPattern.pattern.percentage.toFixed(2) }}%
                   </div>
@@ -113,22 +110,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             class="mt-3"
           >
             <div
-              class="rounded border border-solid border-[var(--o2-status-error-border)] px-3 py-2 flex gap-3 items-start"
-              :class="store.state.theme === 'dark' ? 'bg-gray-800' : 'bg-white'"
+              class="rounded-default border border-solid border-status-error-text px-3 py-2 flex gap-3 items-start bg-surface-base"
             >
               <OIcon name="warning" size="sm" class="mt-0.5 shrink-0" />
               <div>
-                <div class="text-weight-bold text-red-500">{{ t("search.patternAnomalyDetected") }}</div>
+                <div class="font-bold text-status-error-text">{{ t("search.patternAnomalyDetected") }}</div>
                 <div
-                  class="text-xs mt-1"
-                  :class="store.state.theme === 'dark' ? 'text-gray-300' : 'text-gray-500'"
+                  class="text-xs mt-1 text-text-secondary"
                 >
                   {{ anomalyExplanationForSelected }}
                 </div>
                 <div
                   v-if="selectedPattern.pattern.z_score !== undefined && selectedPattern.pattern.z_score < -1.5 && selectedPattern.pattern.avg_frequency"
                   class="text-xs mt-1"
-                  :class="store.state.theme === 'dark' ? 'text-gray-400' : 'text-gray-400'"
+                  :class="'text-text-secondary'"
                 >
                   {{ t("search.patternZScore", { zScore: selectedPattern.pattern.z_score.toFixed(2), avgFrequency: Math.round(selectedPattern.pattern.avg_frequency).toLocaleString() }) }}
                 </div>
@@ -143,10 +138,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             {{ t("search.patternVariablesHeader") }}
           </div>
           <div
-            class="px-2.5 py-1.5 rounded border-l-4 border-solid border-l-[var(--o2-primary-color)]"
-            :class="
-              store.state.theme === 'dark' ? 'bg-gray-800' : 'bg-gray-100'
-            "
+            class="px-2.5 py-1.5 rounded-default border-l-4 border-solid border-l-accent bg-surface-subtle"
           >
             {{
               selectedPattern.pattern.examples?.[0]?.variables
@@ -162,10 +154,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             {{ t("search.patternTemplate") }}
           </div>
           <div
-            class="px-2.5 py-1.5 font-mono text-[0.8125rem] leading-[1.6] rounded border-l-4 border-solid border-l-[var(--o2-primary-color)] break-all flex flex-wrap items-baseline gap-x-[2px] gap-y-[2px]"
-            :class="
-              store.state.theme === 'dark' ? 'bg-gray-800' : 'bg-gray-100'
-            "
+            class="px-2.5 py-1.5 font-mono text-compact leading-[1.6] rounded-default border-l-4 border-solid border-l-accent break-all flex flex-wrap items-baseline gap-x-[2px] gap-y-[2px] bg-surface-subtle"
           >
             <template v-for="(tok, i) in selectedTemplateTokens" :key="i">
               <span v-if="tok.kind === 'text'" class="whitespace-pre">{{ tok.value }}</span>
@@ -205,10 +194,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             :show-global-filter="false"
             :default-columns="false"
             :max-height="undefined"
-            class="w-full border border-solid border-[var(--o2-border-color)]"
+            class="w-full border border-solid border-card-glass-border"
           >
             <template #cell-name="{ row }">
-              <div class="text-left text-weight-bold text-primary">
+              <div class="text-left font-bold text-primary">
                 {{ row.name || "var_" + row.index }}
               </div>
             </template>
@@ -231,7 +220,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             selectedPattern.pattern.examples &&
             selectedPattern.pattern.examples.length > 0
           "
-          class="mb-[1rem]"
+          class="mb-4"
         >
           <div class="text-sm font-medium mb-1.5">
             {{ t("search.patternExampleLogsWithCount", { count: selectedPattern.pattern.examples.length }) }}
@@ -239,10 +228,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <div
             v-for="(example, exIdx) in selectedPattern.pattern.examples"
             :key="exIdx"
-            class="px-[0.625rem] py-[0.375rem] mb-[0.375rem] font-mono text-[0.75rem] leading-[1.6] rounded break-all whitespace-pre-wrap border-l-[0.1875rem] border-solid"
-            :class="[
-              store.state.theme === 'dark' ? 'bg-gray-800 border-l-[#3a3a3a]' : 'bg-gray-50 border-l-[#e0e0e0]'
-            ]"
+            class="px-2.5 py-1.5 mb-1.5 font-mono text-xs leading-[1.6] rounded-default break-all whitespace-pre-wrap border-l-[0.1875rem] border-solid bg-surface-panel border-l-border-default"
           >
             <LogsHighLighting
               :data="example.log_message"
@@ -272,7 +258,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </OButton>
           </div>
           <div class="col-auto text-center">
-            <span class="text-xs text-gray-400">
+            <span class="text-xs text-text-secondary">
               {{ t("search.patternXofYShort", { index: selectedPattern.index + 1, total: totalPatterns }) }}
             </span>
           </div>
@@ -307,7 +293,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <script setup lang="ts">
 
 import { computed } from "vue";
-import { useStore } from "vuex";
+import useTheme from "@/composables/useTheme";
 import LogsHighLighting from "@/components/logs/LogsHighLighting.vue";
 import OCard from "@/lib/core/Card/OCard.vue";
 import OCardSection from "@/lib/core/Card/OCardSection.vue";
@@ -341,8 +327,8 @@ defineEmits<{
   (e: "filter-value", value: string, action: "include" | "exclude"): void;
 }>();
 
-const store = useStore();
 const { t } = useI18n();
+const { isDark } = useTheme();
 
 const {
   hoveredToken,
@@ -352,8 +338,6 @@ const {
   onPopoverLeave,
 } = useWildcardHover();
 
-const isDark = computed(() => store.state.theme === "dark");
-
 const selectedTemplateTokens = computed(() =>
   tokenizeTemplate(
     props.selectedPattern?.pattern?.template ?? "",
@@ -388,6 +372,3 @@ const variableColumns = computed<OTableColumnDef[]>(() => [
 ]);
 </script>
 
-<style>
-@import "@/assets/styles/log-highlighting.css";
-</style>
diff --git a/web/src/plugins/logs/patterns/PatternList.spec.ts b/web/src/plugins/logs/patterns/PatternList.spec.ts
index a354cc43a3..9d13aa428a 100644
--- a/web/src/plugins/logs/patterns/PatternList.spec.ts
+++ b/web/src/plugins/logs/patterns/PatternList.spec.ts
@@ -87,7 +87,7 @@ describe("PatternList", () => {
   });
 
   describe("Pattern Display", () => {
-    it("should render q-virtual-scroll when patterns are available", () => {
+    it("should render the virtual scroll when patterns are available", () => {
       const virtualScroll = wrapper.findComponent({ name: "OVirtualScroll" });
       expect(virtualScroll.exists()).toBe(true);
     });
diff --git a/web/src/plugins/logs/patterns/PatternList.vue b/web/src/plugins/logs/patterns/PatternList.vue
index 276aa51e20..c6f532df88 100644
--- a/web/src/plugins/logs/patterns/PatternList.vue
+++ b/web/src/plugins/logs/patterns/PatternList.vue
@@ -20,16 +20,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <div v-if="!loading && patterns?.length > 0" class="flex flex-col">
       <!-- Table Header -->
       <div
-        class="flex items-center border-b border-[var(--o2-border-color)]"
-        style="background: var(--o2-table-header-bg); min-width: 100%"
+        class="flex items-center border-b border-table-header-border bg-table-header-bg min-w-full"
       >
         <!-- Pattern Column Header -->
         <div
           class="flex-1 min-w-0 px-2 relative table-head text-ellipsis text-left"
         >
           <span
-            class="font-bold"
-            :class="store.state.theme === 'dark' ? 'text-white' : 'text-gray-500'"
+            class="font-medium text-table-header-text text-xs"
           >
             {{ t("search.patternColumnHeader") }}
           </span>
@@ -40,16 +38,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           class="w-24 flex-shrink-0 px-2 relative table-head text-ellipsis text-right"
         >
           <span
-            class="font-bold"
-            :class="store.state.theme === 'dark' ? 'text-white' : 'text-gray-500'"
+            class="font-medium text-table-header-text text-xs"
           >
             {{ t("search.occurrenceColumnHeader") }}
           </span>
         </div>
 
-        <!-- Actions Column - No Header -->
+        <!-- Actions Column - No Header (width matches PatternCard's actions) -->
         <div
-          class="w-24 flex-shrink-0 px-2 relative table-head"
+          class="w-20 flex-shrink-0 px-2 relative table-head"
         ></div>
       </div>
 
@@ -101,14 +98,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     >
       <!-- Header skeleton -->
       <div
-        class="min-h-8 flex items-center border-b border-[var(--o2-border-color)]"
-        style="background: var(--o2-table-header-bg); min-width: 100%"
+        class="min-h-8 flex items-center border-b border-table-header-border bg-table-header-bg min-w-full"
       >
         <div class="flex-1 min-w-0 px-2">
-          <span class="pattern-skel-pill inline-block h-3 w-16 rounded-sm" aria-hidden="true" />
+          <span class="pattern-skel-pill inline-block h-3 w-16 rounded-default" aria-hidden="true" />
         </div>
         <div class="w-24 flex-shrink-0 px-2 flex justify-end">
-          <span class="pattern-skel-pill inline-block h-3 w-14 rounded-sm" aria-hidden="true" />
+          <span class="pattern-skel-pill inline-block h-3 w-14 rounded-default" aria-hidden="true" />
         </div>
         <div class="w-20 flex-shrink-0 px-2" />
       </div>
@@ -117,19 +113,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <div
         v-for="(skeletonWidth, n) in SKELETON_WIDTHS"
         :key="n"
-        class="pattern-skel-row flex items-center border-b border-[var(--color-table-row-divider)] relative opacity-0 h-8 bg-[var(--o2-log-table-row-bg,transparent)]"
+        class="pattern-skel-row flex items-center border-b border-table-row-divider relative opacity-0 h-8 bg-log-table-row-bg"
         :style="{ animationDelay: `${n * 40}ms` }"
       >
         <!-- Left accent bar -->
         <span class="absolute left-0 inset-y-0 w-1 pattern-skel-pill" aria-hidden="true" />
         <!-- Pattern column -->
         <div class="flex-1 min-w-0 px-2 pl-3">
-          <span class="pattern-skel-pill inline-block h-3 rounded-sm" :class="skeletonWidth" aria-hidden="true" />
+          <span class="pattern-skel-pill inline-block h-3 rounded-default" :class="skeletonWidth" aria-hidden="true" />
         </div>
         <!-- Count column -->
         <div class="w-24 flex-shrink-0 px-2 flex flex-col items-end gap-1">
-          <span class="pattern-skel-pill inline-block h-3 w-12 rounded-sm" aria-hidden="true" />
-          <span class="pattern-skel-pill inline-block h-2 w-10 rounded-sm" aria-hidden="true" />
+          <span class="pattern-skel-pill inline-block h-3 w-12 rounded-default" aria-hidden="true" />
+          <span class="pattern-skel-pill inline-block h-2 w-10 rounded-default" aria-hidden="true" />
         </div>
         <!-- Actions column — 3 icon-sized circles -->
         <div class="w-20 flex-shrink-0 px-2 flex items-center justify-center gap-1">
@@ -173,7 +169,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <!-- Bottom spacer so the last row isn't flush with the container edge -->
     <div v-if="!loading && patterns?.length > 0" class="h-4" />
 
-    <!-- Wildcard hover popover (outside q-virtual-scroll to avoid DOM recycling conflicts) -->
+    <!-- Wildcard hover popover (outside the virtual scroller to avoid DOM recycling conflicts) -->
     <WildcardValuePopover
       :visible="!!hoveredToken"
       :token="hoveredToken?.token ?? ''"
@@ -226,7 +222,7 @@ const props = defineProps<{
   loading: boolean;
   totalLogsAnalyzed?: number;
   wrap?: boolean;
-  /** External scroll container passed to q-virtual-scroll's scroll-target. */
+  /** External scroll container passed to the virtual scroller's scroll-target. */
   scrollTarget?: HTMLElement | null;
   /** Selected stream's doc time range (µs) — from the logs Index. */
   streamDocTimeRange?: { min: number; max: number };
@@ -285,7 +281,9 @@ const jumpTargetSublabel = computed(() => {
 });
 </script>
 
-<style>
+<style scoped>
+/* keep(keyframes): skeleton-loader shimmer + row-in @keyframes and the
+   prefers-reduced-motion opt-out cannot be expressed as Tailwind utilities. */
 /* ── Pattern list loading skeleton ────────────────────────────────────────
    Matches the shimmer style used by the logs table (TenstackTable.vue)
    but at the slightly lighter grey-100 / grey-600 palette for visual parity. */
@@ -298,18 +296,18 @@ const jumpTargetSublabel = computed(() => {
   background: linear-gradient(
     90deg,
     var(--color-grey-100) 0%,
-    rgba(255, 255, 255, 0.65) 50%,
+    color-mix(in srgb, var(--color-white) 65%, transparent) 50%,
     var(--color-grey-100) 100%
   );
   background-size: 200% 100%;
   animation: pattern-skel-shimmer 1.5s ease-in-out infinite;
 }
 
-.body--dark .pattern-skel-pill {
+.dark .pattern-skel-pill {
   background: linear-gradient(
     90deg,
     var(--color-grey-600) 0%,
-    rgba(255, 255, 255, 0.03) 50%,
+    color-mix(in srgb, var(--color-white) 3%, transparent) 50%,
     var(--color-grey-600) 100%
   );
 }
@@ -320,7 +318,7 @@ const jumpTargetSublabel = computed(() => {
 }
 
 @keyframes pattern-skel-row-in {
-  from { opacity: 0; transform: translateY(2px); }
+  from { opacity: 0; transform: translateY(0.125rem); }
   to   { opacity: 1; transform: translateY(0); }
 }
 
diff --git a/web/src/plugins/logs/patterns/PatternStatistics.spec.ts b/web/src/plugins/logs/patterns/PatternStatistics.spec.ts
deleted file mode 100644
index ed8c10e628..0000000000
--- a/web/src/plugins/logs/patterns/PatternStatistics.spec.ts
+++ /dev/null
@@ -1,213 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { describe, expect, it, beforeEach, vi } from "vitest";
-import { mount, config } from "@vue/test-utils";
-import PatternStatistics from "./PatternStatistics.vue";
-import store from "@/test/unit/helpers/store";
-import i18n from "@/locales";
-
-config.global.plugins = [...(config.global.plugins ?? []), i18n];
-
-describe("PatternStatistics", () => {
-  let wrapper: any;
-  const mockStatistics = {
-    total_patterns_found: 42,
-    coverage_percentage: 87.5,
-    extraction_time_ms: 150,
-    total_logs_analyzed: 1000,
-  };
-
-  beforeEach(() => {
-    wrapper = mount(PatternStatistics, {
-      props: {
-        statistics: mockStatistics,
-      },
-      global: {
-        provide: { store },
-      },
-    });
-  });
-
-  it("should mount PatternStatistics component", () => {
-    expect(wrapper.exists()).toBe(true);
-    expect(
-      wrapper.find('[data-test="pattern-statistics"]').exists(),
-    ).toBe(true);
-  });
-
-  describe("Summary Text", () => {
-    it("should display summary with correct statistics", () => {
-      const summaryElement = wrapper.find('[data-test="pattern-statistics"]');
-      const summaryText = summaryElement.text();
-
-      // Check that summary contains the key statistics
-      expect(summaryText).toContain((1000).toLocaleString()); // logs analyzed
-      expect(summaryText).toContain("42"); // patterns found
-      expect(summaryText).toContain("events");
-      expect(summaryText).toContain("patterns found");
-      expect(summaryText).toContain("ms");
-    });
-
-    it("should display correct format", () => {
-      const summaryElement = wrapper.find('[data-test="pattern-statistics"]');
-      const summaryText = summaryElement.text();
-
-      // Check the full format (locale-formatted numbers may contain commas)
-      expect(summaryText).toMatch(/Showing 1 to 50 out of [\d,]+/);
-      expect(summaryText).toMatch(/\d+ patterns found in [\d,]+/);
-    });
-
-    it("should handle totalEvents prop", async () => {
-      await wrapper.setProps({
-        statistics: mockStatistics,
-        totalEvents: 5000,
-      });
-
-      const summaryElement = wrapper.find('[data-test="pattern-statistics"]');
-      const summaryText = summaryElement.text();
-
-      expect(summaryText).toContain((5000).toLocaleString()); // totalEvents
-    });
-
-    it("should combine histogram time with extraction time", async () => {
-      await wrapper.setProps({
-        statistics: mockStatistics,
-        histogramTime: 50,
-      });
-
-      const summaryElement = wrapper.find('[data-test="pattern-statistics"]');
-      const summaryText = summaryElement.text();
-
-      // Should show 50 (histogram) + 150 (extraction) = 200ms
-      expect(summaryText).toContain("200 ms");
-    });
-  });
-
-  describe("Empty Statistics", () => {
-    it("should display zero values when statistics are null", async () => {
-      await wrapper.setProps({
-        statistics: null,
-      });
-
-      const summaryElement = wrapper.find('[data-test="pattern-statistics"]');
-      const summaryText = summaryElement.text();
-
-      expect(summaryText).toContain("0 patterns found");
-      expect(summaryText).toContain("0 events");
-    });
-  });
-
-  // --- New tests covering functionality added in Dec 29 changes ---
-
-  describe("histogramTime prop", () => {
-    it("should use only extraction_time_ms when histogramTime is not provided", () => {
-      const summaryElement = wrapper.find('[data-test="pattern-statistics"]');
-      const summaryText = summaryElement.text();
-      // histogramTime defaults to 0, extraction_time_ms is 150 → total = 150ms
-      expect(summaryText).toContain("150 ms");
-    });
-
-    it("should use only extraction_time_ms when histogramTime is 0", async () => {
-      await wrapper.setProps({ histogramTime: 0 });
-      const summaryElement = wrapper.find('[data-test="pattern-statistics"]');
-      expect(summaryElement.text()).toContain("150 ms");
-    });
-
-    it("should sum histogramTime and extraction_time_ms for total time", async () => {
-      await wrapper.setProps({ histogramTime: 100 });
-      const summaryElement = wrapper.find('[data-test="pattern-statistics"]');
-      // 100 + 150 = 250ms
-      expect(summaryElement.text()).toContain("250 ms");
-    });
-
-    it("should show 0 ms when both histogramTime and extraction_time_ms are absent", async () => {
-      await wrapper.setProps({
-        statistics: { total_patterns_found: 5, total_logs_analyzed: 200 },
-        histogramTime: 0,
-      });
-      const summaryElement = wrapper.find('[data-test="pattern-statistics"]');
-      expect(summaryElement.text()).toContain("0 ms");
-    });
-  });
-
-  describe("totalEvents prop", () => {
-    it("should fall back to total_logs_analyzed for event count when totalEvents is absent", () => {
-      const summaryElement = wrapper.find('[data-test="pattern-statistics"]');
-      const summaryText = summaryElement.text();
-      // totalEvents not set → uses logsAnalyzed = 1,000
-      expect(summaryText).toContain((1000).toLocaleString());
-    });
-
-    it("should use totalEvents for event count when provided", async () => {
-      await wrapper.setProps({ totalEvents: 9999 });
-      const summaryElement = wrapper.find('[data-test="pattern-statistics"]');
-      expect(summaryElement.text()).toContain((9999).toLocaleString());
-    });
-
-    it("should format totalEvents with locale separators", async () => {
-      await wrapper.setProps({ totalEvents: 1000000 });
-      const summaryElement = wrapper.find('[data-test="pattern-statistics"]');
-      expect(summaryElement.text()).toContain((1000000).toLocaleString());
-    });
-
-    it("should format total_logs_analyzed with locale separators in fallback path", async () => {
-      await wrapper.setProps({
-        statistics: { ...mockStatistics, total_logs_analyzed: 50000 },
-        totalEvents: undefined,
-      });
-      const summaryElement = wrapper.find('[data-test="pattern-statistics"]');
-      expect(summaryElement.text()).toContain((50000).toLocaleString());
-    });
-  });
-
-  describe("summaryText computed property", () => {
-    it("should always start with 'Showing 1 to 50 out of'", () => {
-      const summaryElement = wrapper.find('[data-test="pattern-statistics"]');
-      expect(summaryElement.text()).toMatch(/^Showing 1 to 50 out of/);
-    });
-
-    it("should include patterns found count in the output", () => {
-      const summaryElement = wrapper.find('[data-test="pattern-statistics"]');
-      expect(summaryElement.text()).toContain("42 patterns found");
-    });
-
-    it("should include logs analyzed count in the 'in X events' clause", () => {
-      const summaryElement = wrapper.find('[data-test="pattern-statistics"]');
-      // logs analyzed = 1000 → "in 1,000 events"
-      expect(summaryElement.text()).toContain(`in ${(1000).toLocaleString()} events`);
-    });
-
-    it("should produce correct full summary string", async () => {
-      await wrapper.setProps({ histogramTime: 0 });
-      const summaryElement = wrapper.find('[data-test="pattern-statistics"]');
-      const formatted = (1000).toLocaleString();
-      expect(summaryElement.text()).toBe(
-        `Showing 1 to 50 out of ${formatted} events & 42 patterns found in ${formatted} events in 150 ms.`,
-      );
-    });
-  });
-
-  describe("data-test attribute", () => {
-    it("should always render the pattern-statistics container", () => {
-      expect(wrapper.find('[data-test="pattern-statistics"]').exists()).toBe(true);
-    });
-
-    it("should still render the container when statistics is null", async () => {
-      await wrapper.setProps({ statistics: null });
-      expect(wrapper.find('[data-test="pattern-statistics"]').exists()).toBe(true);
-    });
-  });
-});
diff --git a/web/src/plugins/logs/patterns/PatternStatistics.vue b/web/src/plugins/logs/patterns/PatternStatistics.vue
deleted file mode 100644
index 049c58be21..0000000000
--- a/web/src/plugins/logs/patterns/PatternStatistics.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <div
-    class="py-2 px-4 shrink-0 bg-[var(--o2-bg-gray)] text-sm"
-    data-test="pattern-statistics"
-    :class="store.state.theme === 'dark' ? 'text-gray-400' : 'text-gray-400'"
-  >
-    {{ summaryText }}
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import { useStore } from "vuex";
-import { useI18n } from "vue-i18n";
-
-const { t } = useI18n();
-
-const props = defineProps<{
-  statistics: any;
-  totalEvents?: number;
-  histogramTime?: number;
-}>();
-
-const store = useStore();
-
-const summaryText = computed(() => {
-  const patternsFound = props.statistics?.total_patterns_found || 0;
-  const logsAnalyzed = (props.statistics?.total_logs_analyzed || 0).toLocaleString();
-  const totalEvents = props.totalEvents ? props.totalEvents.toLocaleString() : logsAnalyzed;
-
-  // Combine histogram time + pattern extraction time
-  const histogramMs = props.histogramTime || 0;
-  const patternMs = props.statistics?.extraction_time_ms || 0;
-  const totalTimeMs = histogramMs + patternMs;
-
-  return t("logs.patternStatistics.summary", {
-    totalEvents,
-    patternsFound,
-    logsAnalyzed,
-    totalTimeMs,
-  });
-});
-</script>
diff --git a/web/src/plugins/logs/patterns/WildcardValuePopover.vue b/web/src/plugins/logs/patterns/WildcardValuePopover.vue
index 51ab9d4e9b..aeb1d3d229 100644
--- a/web/src/plugins/logs/patterns/WildcardValuePopover.vue
+++ b/web/src/plugins/logs/patterns/WildcardValuePopover.vue
@@ -18,8 +18,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <div
     v-show="visible && !!anchorEl"
     ref="popoverRef"
-    class="wcp w-72 bg-(--o2-card-bg-solid) border border-(--o2-border) rounded-[0.625rem] overflow-hidden shadow-[0_0.5rem_1.5rem_rgba(0,0,0,0.14),0_0.125rem_0.375rem_rgba(0,0,0,0.06)] [animation:wcpIn_0.15s_ease-out]"
-    :class="{ '[animation-name:wcpInUp]': flipUpward }"
+    class="wcp w-72 bg-card-glass-solid border border-border-default rounded-default overflow-hidden shadow-[0_0.5rem_1.5rem_rgba(0,0,0,0.14),0_0.125rem_0.375rem_rgba(0,0,0,0.06)]"
+    :class="{ 'wcp--flip-up': flipUpward }"
     :style="popoverStyle"
     data-test="wildcard-value-popover"
     @mouseenter="$emit('popoverEnter')"
@@ -27,10 +27,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   >
     <!-- ── Header ── -->
     <div
-      class="wcp__header flex items-center justify-between gap-2 pt-[0.625rem] px-3 pb-[0.375rem]"
+      class="wcp__header flex items-center justify-between gap-2 pt-2.5 px-3 pb-1.5"
     >
       <div
-        class="wcp__header-left flex items-center gap-[0.375rem] min-w-0"
+        class="wcp__header-left flex items-center gap-1.5 min-w-0"
       >
         <OTag
           type="fieldType"
@@ -39,17 +39,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           class="wcp__type-badge shrink-0 font-mono font-bold"
         />
         <span
-          class="wcp__title text-[0.8125rem] font-semibold text-(--o2-text-heading) truncate"
+          class="wcp__title text-compact font-semibold text-text-heading truncate"
         >{{ t('logs.wildcardValuePopover.variableSlot', { type: tokenType }) }}</span>
       </div>
       <div
         class="wcp__header-right flex items-baseline gap-1 shrink-0"
       >
         <span
-          class="wcp__unique-count text-sm font-bold text-(--o2-text-heading) [font-variant-numeric:tabular-nums]"
+          class="wcp__unique-count text-sm font-bold text-text-body [font-variant-numeric:tabular-nums]"
         >{{ displayValues.length }}</span>
         <span
-          class="wcp__unique-label text-[0.6875rem] text-(--o2-text-caption)"
+          class="wcp__unique-label text-2xs text-text-secondary"
         >{{ t('logs.wildcardValuePopover.unique') }}</span>
       </div>
     </div>
@@ -62,7 +62,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <div
         v-for="(item, i) in displayValues.slice(0, 10)"
         :key="i"
-        class="wcp__row px-3 pt-[0.375rem] pb-1"
+        class="wcp__row px-3 pt-1.5 pb-1 not-first:pt-2"
         :data-test="`wildcard-value-row-${i}`"
       >
         <!-- Value name + count -->
@@ -70,15 +70,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           class="wcp__row-top flex items-baseline justify-between gap-2 mb-1"
         >
           <span
-            class="wcp__row-value text-xs font-semibold font-mono text-(--o2-text-body) truncate flex-1 min-w-0"
+            class="wcp__row-value text-xs font-semibold font-mono text-text-body truncate flex-1 min-w-0"
           >{{ item.value || t('logs.wildcardValuePopover.empty') }}</span>
           <span
-            class="wcp__row-count text-[0.8125rem] font-bold text-(--o2-text-heading) [font-variant-numeric:tabular-nums] shrink-0"
+            class="wcp__row-count text-compact font-bold text-text-body [font-variant-numeric:tabular-nums] shrink-0"
           >{{ item.count.toLocaleString() }}</span>
         </div>
         <!-- Full-width progress bar -->
         <div
-          class="wcp__bar-track w-full h-1 bg-(--o2-border-color) rounded-full overflow-hidden mb-[0.1875rem]"
+          class="wcp__bar-track w-full h-1 bg-card-glass-border rounded-full overflow-hidden mb-[0.1875rem]"
         >
           <div
             class="wcp__bar-fill h-full rounded-full transition-[width] duration-200"
@@ -88,7 +88,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
         <!-- Percentage -->
         <div
-          class="wcp__row-pct text-[0.625rem] text-(--o2-text-caption) [font-variant-numeric:tabular-nums]"
+          class="wcp__row-pct text-3xs text-text-secondary [font-variant-numeric:tabular-nums]"
         >
           {{ totalOccurrences > 0 ? ((item.count / totalOccurrences) * 100).toFixed(1) + '%' : '' }}
         </div>
@@ -96,7 +96,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
       <div
         v-if="displayValues.length === 0"
-        class="wcp__empty py-6 px-3 text-center text-[0.6875rem] text-(--o2-text-muted)"
+        class="wcp__empty py-6 px-3 text-center text-2xs text-text-muted"
       >
         {{ t("search.patternNoValuesAvailable") }}
       </div>
@@ -105,10 +105,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <!-- ── Footer ── -->
     <div
       v-if="displayValues.length > 0 && totalOccurrences > 0"
-      class="wcp__footer flex items-center justify-end py-[0.4375rem] px-3 border-t border-(--o2-border-color)"
+      class="wcp__footer flex items-center justify-end py-[0.4375rem] px-3 border-t border-card-glass-border"
     >
       <span
-        class="wcp__occurrences text-[0.6875rem] font-semibold text-(--o2-text-caption) [font-variant-numeric:tabular-nums]"
+        class="wcp__occurrences text-2xs font-semibold text-text-secondary [font-variant-numeric:tabular-nums]"
       >{{ t('logs.wildcardValuePopover.occurrences', { count: totalOccurrences.toLocaleString() }) }}</span>
     </div>
   </div>
@@ -155,11 +155,11 @@ const barWidth = (count: number): string => {
 
 const barColorClass = computed(() => {
   const cls = wildcardChipColor(props.token, props.displayValues);
-  if (cls.includes("blue"))   return "bg-(--o2-wildcard-bar-blue)";
-  if (cls.includes("green"))  return "bg-(--o2-wildcard-bar-green)";
-  if (cls.includes("orange")) return "bg-(--o2-wildcard-bar-orange)";
-  if (cls.includes("purple")) return "bg-(--o2-wildcard-bar-purple)";
-  return "bg-(--o2-primary-color)";
+  if (cls.includes("blue"))   return "bg-wildcard-bar-blue";
+  if (cls.includes("green"))  return "bg-wildcard-bar-green";
+  if (cls.includes("orange")) return "bg-wildcard-bar-orange";
+  if (cls.includes("purple")) return "bg-wildcard-bar-purple";
+  return "bg-accent";
 });
 
 // ── Positioning ──────────────────────────────────────────────────────────────
@@ -211,13 +211,40 @@ watch(
 );
 </script>
 
-<style>
-/* ── Animation ── */
-@keyframes wcpIn    { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
-@keyframes wcpInUp  { from { opacity: 0; transform: translateY(4px);  } to { opacity: 1; transform: none; } }
+<style scoped>
+/* keep(keyframes): the popover entrance is used only here. Both the `animation`
+   and the flipped variant's `animation-name` are declared in this block rather
+   than as template `[animation:…]` / `[animation-name:…]` utilities, so Vue's
+   scoped compiler renames the keyframes and both references together.
+   `.wcp--flip-up` follows `.wcp`, so the flipped name wins on source order. */
+.wcp {
+  animation: pop-in 0.15s ease-out;
+}
 
-/* ── Sibling spacing ── */
-.wcp__row + .wcp__row {
-  padding-top: 0.5rem;
+.wcp--flip-up {
+  animation-name: pop-in-up;
+}
+
+@keyframes pop-in {
+  from {
+    opacity: 0;
+    transform: translateY(-0.25rem);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes pop-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(0.25rem);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
 }
 </style>
+
diff --git a/web/src/plugins/metrics/AddToDashboard.spec.ts b/web/src/plugins/metrics/AddToDashboard.spec.ts
index 25c5d4590c..bcfe5f7732 100644
--- a/web/src/plugins/metrics/AddToDashboard.spec.ts
+++ b/web/src/plugins/metrics/AddToDashboard.spec.ts
@@ -164,17 +164,6 @@ const createWrapper = (props: Record<string, any> = {}) => {
             submit() { (this as any).$emit("submit", {}); },
           },
         },
-        QForm: {
-          template:
-            "<form class='q-form' @submit.prevent='$emit(\"submit\")'><slot /></form>",
-          emits: ["submit"],
-        },
-        QInput: {
-          template:
-            "<input class='q-input' :data-test='$attrs[\"data-test\"]' :value='modelValue' @input='$emit(\"update:modelValue\", $event.target.value)' />",
-          props: ["modelValue", "label", "rules", "lazyRules", "stackLabel"],
-          emits: ["update:modelValue"],
-        },
         SelectFolderDropdown: {
           template:
             "<div class='select-folder-dropdown' @click='$emit(\"folder-selected\", { value: \"folder-1\", label: \"Folder 1\" })'></div>",
@@ -320,8 +309,6 @@ describe("AddToDashboard — props", () => {
       global: {
         stubs: {
           ODialog: ODialogStub,
-          QForm: true,
-          QInput: true,
           SelectFolderDropdown: true,
           SelectDashboardDropdown: true,
           SelectTabDropdown: true,
diff --git a/web/src/plugins/metrics/AddToDashboard.vue b/web/src/plugins/metrics/AddToDashboard.vue
index 9a8fc3aea5..fa7a4b7acd 100644
--- a/web/src/plugins/metrics/AddToDashboard.vue
+++ b/web/src/plugins/metrics/AddToDashboard.vue
@@ -106,7 +106,7 @@ export default defineComponent({
       showConfictErrorNotificationWithRefreshBtn,
     } = useNotifications();
 
-    // Fetch folders only when the drawer opens (matches old q-dialog behaviour where the
+    // Fetch folders only when the drawer opens (matches old dialog behaviour where the
     // component mounted only on first open). Avoids an eager API call on page load.
     // On close, reset the non-form dropdown state (folder/dashboard/tab). The
     // form-owned `panelTitle` needs no manual reset — ODialog unmounts the body
diff --git a/web/src/plugins/metrics/Index.spec.ts b/web/src/plugins/metrics/Index.spec.ts
index 7b91b8f79e..f1fdac2b8d 100644
--- a/web/src/plugins/metrics/Index.spec.ts
+++ b/web/src/plugins/metrics/Index.spec.ts
@@ -244,12 +244,6 @@ const createWrapper = (props: Record<string, any> = {}) => {
           props: ["modelValue", "trigger", "minRefreshInterval"],
           emits: ["update:modelValue", "trigger"],
         },
-        QBtn: {
-          template:
-            "<button class='q-btn' :data-test='$attrs[\"data-test\"]' :disabled='disable || loading' @click='$emit(\"click\", $event)'><slot /></button>",
-          props: ["label", "loading", "disable", "color", "noCaps", "padding"],
-          emits: ["click"],
-        },
       },
     },
   });
diff --git a/web/src/plugins/metrics/Index.vue b/web/src/plugins/metrics/Index.vue
index 6a14633887..5f993dbf4e 100644
--- a/web/src/plugins/metrics/Index.vue
+++ b/web/src/plugins/metrics/Index.vue
@@ -15,19 +15,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div style="overflow-y: auto" class="scroll flex flex-col h-full" data-test="metrics-page">
-    <!-- Standard page header: title + icon + all query controls on ONE line
-         (syntax guide, legends, date range, refresh, Run). No extra toolbar row. -->
-    <AppPageHeader
-      :title="t('search.metrics')"
-      icon="bar-chart"
-      :back="{
-        label: t('search.metrics'),
-        onClick: goBackToExplorer,
-        dataTest: 'metrics-editor-back-btn',
-      }"
-      class="shrink-0 px-4 border-b border-border-default"
-    >
+  <OPageLayout
+    data-test="metrics-page"
+    :title="t('search.metrics')"
+    icon="bar-chart"
+    :back="{
+      label: t('search.metrics'),
+      onClick: goBackToExplorer,
+      dataTest: 'metrics-editor-back-btn',
+    }"
+    bleed
+  >
       <template #actions>
         <syntax-guide-metrics />
         <MetricLegends />
@@ -93,8 +91,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </OButton>
         </template>
       </template>
-    </AppPageHeader>
-
     <!-- PanelEditor Content Area -->
     <PanelEditor
       ref="panelEditorRef"
@@ -114,7 +110,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       :dashboardPanelData="dashboardPanelData"
       @save="addPanelToDashboard"
     />
-  </div>
+  </OPageLayout>
 </template>
 
 <script lang="ts">
@@ -136,7 +132,7 @@ import useDashboardPanelData from "../../composables/dashboard/useDashboardPanel
 import DateTimePickerDashboard from "@/components/DateTimePickerDashboard.vue";
 import SyntaxGuideMetrics from "./SyntaxGuideMetrics.vue";
 import MetricLegends from "./MetricLegends.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import { isEqual, debounce } from "lodash-es";
 import { provide } from "vue";
 import useNotifications from "@/composables/useNotifications";
@@ -176,7 +172,7 @@ export default defineComponent({
   props: ["metaData"],
 
   components: {
-    AppPageHeader,
+    OPageLayout,
     DateTimePickerDashboard,
     SyntaxGuideMetrics,
     MetricLegends,
diff --git a/web/src/plugins/metrics/MetricLegends.spec.ts b/web/src/plugins/metrics/MetricLegends.spec.ts
index 1de2a79a22..ad00d4eddd 100644
--- a/web/src/plugins/metrics/MetricLegends.spec.ts
+++ b/web/src/plugins/metrics/MetricLegends.spec.ts
@@ -21,11 +21,30 @@ import store from "@/test/unit/helpers/store";
 import { createRouter, createWebHistory } from "vue-router";
 
 /**
- * Helper to query the dropdown theme wrapper div. The migrated component
- * places the theme class on the first child <div> of the ODropdown default
- * slot. The ODropdown stub used in these tests renders the trigger and
- * default slots inline, so the wrapper is queryable from the test wrapper.
+ * Theming contract: the app puts `.dark` on <html> and flips `--color-*`
+ * design tokens; components no longer carry per-theme root classes
+ * (`theme-light`/`theme-dark`/`light-mode`/`dark-mode`). The assertions below
+ * therefore (a) guard that the legacy per-theme class mechanism has NOT come
+ * back, and (b) assert the structure the component actually renders now.
+ *
+ * The ODropdown stub used in these tests renders the trigger and default
+ * slots inline, so the dropdown content is queryable from the test wrapper.
  */
+const LEGACY_THEME_CLASSES = [
+  "theme-light",
+  "theme-dark",
+  "light-mode",
+  "dark-mode",
+];
+
+/** Every class present anywhere in the rendered component. */
+const renderedClasses = (w: any): string[] =>
+  w
+    .findAll("[class]")
+    .flatMap((el: any) => Array.from(el.element.classList as DOMTokenList));
+
+/** The content container rendered inside the ODropdown default slot. */
+const dropdownContent = (w: any) => w.find(".o-dropdown-stub > div");
 
 describe("MetricLegends", () => {
   let wrapper: any;
@@ -189,14 +208,21 @@ describe("MetricLegends", () => {
       expect(dropdown.exists()).toBe(true);
     });
 
-    it("should render theme wrapper inside dropdown content", () => {
-      // The theme class wrapper replaces the old <q-card> container
-      const themeWrapper = wrapper.find('.theme-dark, .theme-light');
-      expect(themeWrapper.exists()).toBe(true);
+    it("should render an untheme-classed content wrapper inside dropdown content", () => {
+      // The dropdown content is a plain padded div: theming comes from `.dark`
+      // on <html> + --color-* tokens, not from a per-theme wrapper class.
+      const content = dropdownContent(wrapper);
+      expect(content.exists()).toBe(true);
+      expect(content.classes()).toContain("px-2");
+      // Guard: the legacy per-theme root class mechanism must not return.
+      expect(wrapper.find(".theme-dark, .theme-light").exists()).toBe(false);
+      // The content wrapper actually hosts the title + legends sections.
+      expect(content.find(".metric-legends-title").exists()).toBe(true);
+      expect(content.find(".legends").exists()).toBe(true);
     });
 
     it("should render title and legends sections", () => {
-      // The migrated component uses native divs instead of <q-card-section>
+      // The migrated component uses native section divs
       const title = wrapper.find('.metric-legends-title');
       const legends = wrapper.find('.legends');
       expect(title.exists()).toBe(true);
@@ -214,7 +240,7 @@ describe("MetricLegends", () => {
     });
 
     it("should render separator", () => {
-      // The migrated component uses a native border div instead of <q-separator>
+      // The migrated component uses a native top-border div as the separator
       const separator = wrapper.find('.border-t');
       expect(separator.exists()).toBe(true);
     });
@@ -296,43 +322,55 @@ describe("MetricLegends", () => {
   });
 
   describe("Theme Integration", () => {
-    it("should apply dark theme class when store theme is dark", async () => {
+    it("should not emit a per-theme class when store theme is dark", async () => {
       // Default store theme is 'dark'
       expect(wrapper.vm.store.state.theme).toBe('dark');
 
-      // Migrated component places theme class on the first div inside ODropdown content
-      const themeWrapper = wrapper.find('.theme-dark');
-      expect(themeWrapper.exists()).toBe(true);
+      // Theming is driven by `.dark` on <html> + --color-* tokens; the
+      // component must not reintroduce a per-theme root class.
+      const classes = renderedClasses(wrapper);
+      LEGACY_THEME_CLASSES.forEach((legacy) =>
+        expect(classes).not.toContain(legacy),
+      );
+      // It still renders its content wrapper regardless of theme.
+      expect(dropdownContent(wrapper).exists()).toBe(true);
     });
 
-    it("should apply light theme class when store theme is light", async () => {
+    it("should not emit a per-theme class when store theme is light", async () => {
       // Change store theme to light
       wrapper.vm.store.state.theme = 'light';
       await wrapper.vm.$nextTick();
 
-      const themeWrapper = wrapper.find('.theme-light');
-      expect(themeWrapper.exists()).toBe(true);
+      const classes = renderedClasses(wrapper);
+      LEGACY_THEME_CLASSES.forEach((legacy) =>
+        expect(classes).not.toContain(legacy),
+      );
+      expect(dropdownContent(wrapper).exists()).toBe(true);
     });
 
-    it("should react to theme changes", async () => {
-      // Reset store theme to dark first
+    it("should render identical markup across theme changes", async () => {
+      // Theme is no longer a render input for this component: switching the
+      // store theme must produce byte-identical markup, because the visual
+      // difference comes entirely from token values resolved in CSS.
       wrapper.vm.store.state.theme = 'dark';
       await wrapper.vm.$nextTick();
+      const darkHtml = wrapper.html();
 
-      // Start with dark theme
-      expect(wrapper.vm.store.state.theme).toBe('dark');
-      expect(wrapper.find('.theme-dark').exists()).toBe(true);
-
-      // Change to light theme
       wrapper.vm.store.state.theme = 'light';
       await wrapper.vm.$nextTick();
+      const lightHtml = wrapper.html();
 
-      expect(wrapper.find('.theme-light').exists()).toBe(true);
+      expect(lightHtml).toBe(darkHtml);
+      expect(lightHtml).not.toContain("theme-light");
+      expect(darkHtml).not.toContain("theme-dark");
     });
 
-    it("should have theme-based class binding", () => {
-      const themeWrapper = wrapper.find('.theme-dark, .theme-light');
-      expect(themeWrapper.exists()).toBe(true);
+    it("should have no theme-based class binding", () => {
+      expect(wrapper.find('.theme-dark, .theme-light').exists()).toBe(false);
+      // ...while still rendering all four legend entries.
+      expect(
+        wrapper.findAll('[data-test^="metrics-legends-item-"]').length,
+      ).toBe(4);
     });
   });
 
@@ -369,9 +407,12 @@ describe("MetricLegends", () => {
       expect(typeof wrapper.vm.store.state.theme).toBe('string');
     });
 
-    it("should use store theme for conditional class application", () => {
-      const themeClass = wrapper.vm.store.state.theme === 'dark' ? 'theme-dark' : 'theme-light';
-      expect(wrapper.find(`.${themeClass}`).exists()).toBe(true);
+    it("should not use store theme for conditional class application", () => {
+      // The store theme is still readable from the component, but it must not
+      // drive any conditional class: theming is token-based now.
+      expect(['dark', 'light']).toContain(wrapper.vm.store.state.theme);
+      expect(wrapper.find('.theme-dark, .theme-light').exists()).toBe(false);
+      expect(wrapper.find('.light-mode, .dark-mode').exists()).toBe(false);
     });
 
     it("should maintain store reactivity", async () => {
@@ -454,28 +495,25 @@ describe("MetricLegends", () => {
       expect(wrapper.vm.metricsIconMapping).toEqual(originalMapping);
     });
 
-    it("should handle undefined theme gracefully", async () => {
-      wrapper.vm.store.state.theme = undefined;
+    // A bogus store theme can no longer break rendering, because theme is not
+    // a render input. These cases assert the component still renders its full
+    // content and emits no legacy per-theme class for any junk value.
+    it.each([
+      ["undefined", undefined],
+      ["empty string", ''],
+      ["null", null],
+    ])("should handle %s theme gracefully", async (_label, themeValue) => {
+      wrapper.vm.store.state.theme = themeValue as any;
       await wrapper.vm.$nextTick();
 
-      // Should default to theme-light when undefined
-      expect(wrapper.find('.theme-light').exists()).toBe(true);
-    });
-
-    it("should handle empty string theme gracefully", async () => {
-      wrapper.vm.store.state.theme = '';
-      await wrapper.vm.$nextTick();
-
-      // Should default to theme-light when empty
-      expect(wrapper.find('.theme-light').exists()).toBe(true);
-    });
-
-    it("should handle null theme gracefully", async () => {
-      wrapper.vm.store.state.theme = null;
-      await wrapper.vm.$nextTick();
-
-      // Should default to theme-light when null
-      expect(wrapper.find('.theme-light').exists()).toBe(true);
+      expect(dropdownContent(wrapper).exists()).toBe(true);
+      expect(
+        wrapper.findAll('[data-test^="metrics-legends-item-"]').length,
+      ).toBe(4);
+      const classes = renderedClasses(wrapper);
+      LEGACY_THEME_CLASSES.forEach((legacy) =>
+        expect(classes).not.toContain(legacy),
+      );
     });
   });
 
@@ -526,15 +564,18 @@ describe("MetricLegends", () => {
     });
 
     it("should maintain semantic HTML structure", () => {
-      // The migrated component drops <q-card>/<q-card-section> in favor of
-      // native divs (themed wrapper + title + legends sections).
+      // The migrated component uses native divs for the card surface
+      // (content wrapper + title + legends sections). The wrapper
+      // carries no per-theme class — theming is `.dark` + --color-* tokens.
       const button = wrapper.find('[data-cy="metric-legends-button"]');
-      const themeWrapper = wrapper.find('.theme-dark, .theme-light');
+      const content = dropdownContent(wrapper);
       const titleSection = wrapper.find('.metric-legends-title');
       const legendsSection = wrapper.find('.legends');
 
       expect(button.exists()).toBe(true);
-      expect(themeWrapper.exists()).toBe(true);
+      expect(content.exists()).toBe(true);
+      expect(content.classes()).not.toContain('theme-dark');
+      expect(content.classes()).not.toContain('theme-light');
       expect(titleSection.exists()).toBe(true);
       expect(legendsSection.exists()).toBe(true);
     });
diff --git a/web/src/plugins/metrics/MetricLegends.vue b/web/src/plugins/metrics/MetricLegends.vue
index df6f2b430e..5e3a6bf9f7 100644
--- a/web/src/plugins/metrics/MetricLegends.vue
+++ b/web/src/plugins/metrics/MetricLegends.vue
@@ -11,7 +11,7 @@
         <span>{{ t("search.legendLabel") }}</span>
       </OButton>
     </template>
-    <div :class="store.state.theme == 'dark' ? 'theme-dark' : 'theme-light'" class="px-2 pt-1.5 pb-1">
+    <div class="px-2 pt-1.5 pb-1">
       <div class="metric-legends-title">
         <div class="label">{{ t("search.legendLabel") }}</div>
       </div>
diff --git a/web/src/plugins/metrics/MetricList.spec.ts b/web/src/plugins/metrics/MetricList.spec.ts
deleted file mode 100644
index c46b80a688..0000000000
--- a/web/src/plugins/metrics/MetricList.spec.ts
+++ /dev/null
@@ -1,1274 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { mount, flushPromises } from "@vue/test-utils";
-import { describe, expect, it, beforeEach, vi, afterEach } from "vitest";
-import MetricList from "./MetricList.vue";
-import i18n from "@/locales";
-import { nextTick } from "vue";
-import store from "@/test/unit/helpers/store";
-
-
-// Mock toast
-const { mockToast } = vi.hoisted(() => ({
-  mockToast: vi.fn(() => vi.fn()),
-}));
-vi.mock("@/lib/feedback/Toast/useToast", () => ({
-  toast: mockToast,
-}));
-
-// Mock services
-vi.mock("@/services/stream", () => ({
-  default: {
-    fieldValues: vi.fn(),
-  },
-}));
-
-vi.mock("@/services/metrics", () => ({
-  default: {
-    formatPromqlQuery: vi.fn(),
-  },
-}));
-
-vi.mock("@/services/search", () => ({
-  default: {
-    get_promql_series: vi.fn(),
-  },
-}));
-
-// Mock composables
-const mockSearchObj = {
-  data: {
-    query: "",
-    datetime: {
-      startTime: "2023-01-01T00:00:00.000Z",
-      endTime: "2023-01-01T01:00:00.000Z",
-    },
-    metrics: {
-      selectedMetricType: "",
-    },
-  },
-};
-
-const mockParsePromQlQuery = vi.fn(() => ({
-  metricName: "test_metric",
-  label: {
-    labels: {
-      instance: "localhost",
-    },
-  },
-}));
-
-const mockGetStream = vi.fn(() => Promise.resolve({
-  schema: [
-    { name: "field1" },
-    { name: "field2" },
-  ],
-}));
-
-vi.mock("@/composables/useMetrics", () => ({
-  default: () => ({
-    searchObj: mockSearchObj,
-  }),
-}));
-
-vi.mock("@/composables/usePromqlSuggestions", () => ({
-  default: () => ({
-    parsePromQlQuery: mockParsePromQlQuery,
-  }),
-}));
-
-vi.mock("@/composables/useStreams", () => ({
-  default: () => ({
-    getStream: mockGetStream,
-  }),
-}));
-
-// Mock utils
-vi.mock("@/utils/zincutils", () => ({
-  formatLargeNumber: vi.fn((num) => num.toString()),
-  getImageURL: vi.fn(() => "test-image-url"),
-}));
-
-// Mock useStore to return our test store
-vi.mock("vuex", () => ({
-  useStore: () => mockStore,
-}));
-
-// Mock router
-const mockPush = vi.fn();
-vi.mock("vue-router", () => ({
-  useRouter: () => ({
-    push: mockPush,
-  }),
-}));
-
-// Import mocked services after mocking
-import streamService from "@/services/stream";
-import metricService from "@/services/metrics";
-import searchService from "@/services/search";
-
-const mockStreamService = streamService as any;
-const mockMetricService = metricService as any;
-const mockSearchService = searchService as any;
-
-// Create enhanced mock store
-const mockStore = {
-  ...store,
-  state: {
-    ...store.state,
-    theme: "dark",
-    selectedOrganization: {
-      identifier: "test-org-123",
-      label: "Test Organization",
-      id: 123,
-    },
-    zoConfig: {
-      timestamp_column: "_timestamp",
-    },
-  },
-};
-
-const createWrapper = (props = {}, options = {}) => {
-  return mount(MetricList, {
-    props: {
-      modelValue: null,
-      metricsList: [
-        { label: "test_metric_1", value: "test_metric_1", type: "counter" },
-        { label: "test_metric_2", value: "test_metric_2", type: "gauge" },
-        { label: "test_histogram", value: "test_histogram", type: "histogram" },
-      ],
-      ...props,
-    },
-    global: {
-      plugins: [i18n],
-      mocks: {
-        $store: mockStore,
-      },
-      provide: {
-        store: mockStore,
-      },
-      stubs: {
-        OSelect: {
-          template: `<div data-test-stub='o-select' :data-test='$attrs["data-test"]'>
-            <slot name="prepend"></slot>
-            <slot name="option" :opt="{}" v-for="i in 3" :key="i"></slot>
-            <slot name="no-option"></slot>
-          </div>`,
-          props: ["modelValue", "options", "label", "inputDebounce", "behavior", "useInput", "hideSelected", "fillInput"],
-          emits: ["update:modelValue", "filter"],
-        },
-        OTable: {
-          template: `<div data-test-stub='o-table' :data-test='$attrs["data-test"]'>
-            <div data-test="table-top"><slot name="top"></slot></div>
-            <div data-test="table-body">
-              <slot name="cell-name" v-for="row in data || [{name: 'test_field'}, {name: 'other_field'}]" :key="row.name" v-bind="{row: row}"></slot>
-            </div>
-          </div>`,
-          props: ["data", "columns", "rowKey", "pagination", "showGlobalFilter", "rowClass"],
-          emits: ["row-click"],
-        },
-        OInput: {
-          template: `<input
-            data-test-stub='o-input'
-            :data-test='$attrs["data-test"]'
-            :value='modelValue'
-            @input='$emit("update:modelValue", $event.target.value)'
-          />`,
-          props: ["modelValue", "placeholder", "clearable", "debounce"],
-          emits: ["update:modelValue"],
-        },
-        OIcon: {
-          template: "<span data-test-stub='o-icon' :title='title'></span>",
-          props: ["name", "size", "title"],
-        },
-        OCollapsible: {
-          template: `<div data-test-stub='o-collapsible'>
-            <div @click='$emit("update:modelValue", true)'><slot name="trigger"></slot></div>
-            <div v-if="true"><slot></slot></div>
-          </div>`,
-          props: ["variant", "modelValue"],
-          emits: ["update:modelValue"],
-        },
-        OInnerLoading: {
-          template: "<div data-test-stub='o-inner-loading' />",
-          props: ["showing", "label", "size"],
-        },
-        OButton: {
-          template: `<button
-            data-test-stub='o-button'
-            :data-test='$attrs["data-test"]'
-            @click.stop='$emit("click", $event)'
-            :title='title'
-          >
-            <slot></slot>
-          </button>`,
-          props: ["iconLeft", "variant", "size", "title"],
-          emits: ["click"],
-        },
-        EqualIcon: {
-          template: "<div data-test-stub='equal-icon'></div>",
-        },
-        NotEqualIcon: {
-          template: "<div data-test-stub='not-equal-icon'></div>",
-        },
-      },
-    },
-    attachTo: document.body,
-    ...options,
-  });
-};
-
-describe("MetricList", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    // Reset mock implementations
-    mockStreamService.fieldValues.mockResolvedValue({
-      data: {
-        hits: [
-          {
-            field: "test_field",
-            values: [
-              { zo_sql_key: "value1", zo_sql_num: 100 },
-              { zo_sql_key: "value2", zo_sql_num: 200 },
-            ],
-          },
-        ],
-      },
-    });
-    mockMetricService.formatPromqlQuery.mockResolvedValue({});
-    mockSearchService.get_promql_series.mockResolvedValue({
-      data: {
-        data: [
-          { test_field: "series_value1" },
-          { test_field: "series_value2" },
-        ],
-      },
-    });
-    
-    // Reset composable mocks
-    mockGetStream.mockResolvedValue({
-      schema: [
-        { name: "field1" },
-        { name: "field2" },
-      ],
-    });
-    
-    mockParsePromQlQuery.mockReturnValue({
-      metricName: "test_metric",
-      label: {
-        labels: {
-          instance: "localhost",
-        },
-      },
-    });
-    
-    // Reset searchObj
-    mockSearchObj.data.query = "";
-    mockSearchObj.data.metrics.selectedMetricType = "";
-  });
-
-  afterEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe("Component mounting and initialization", () => {
-    it("should mount successfully", async () => {
-      const wrapper = createWrapper();
-      await nextTick(); // Wait for component to fully initialize
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it("should initialize streamOptions from props", () => {
-      const metricsList = [{ label: "test_metric", value: "test_metric", type: "counter" }];
-      const wrapper = createWrapper({ metricsList });
-      expect(wrapper.vm.streamOptions).toEqual(metricsList);
-    });
-
-    it("should initialize selectedMetricLabels as empty array", () => {
-      const wrapper = createWrapper();
-      expect(wrapper.vm.selectedMetricLabels).toEqual([]);
-    });
-
-    it("should initialize searchMetricLabel as empty string", () => {
-      const wrapper = createWrapper();
-      expect(wrapper.vm.searchMetricLabel).toBe("");
-    });
-
-    it("should initialize filteredMetricLabels as empty array", () => {
-      const wrapper = createWrapper();
-      expect(wrapper.vm.filteredMetricLabels).toEqual([]);
-    });
-
-    it("should initialize metricLabelValues as empty object", () => {
-      const wrapper = createWrapper();
-      expect(wrapper.vm.metricLabelValues).toEqual({});
-    });
-
-    it("should have correct metricsIconMapping", () => {
-      const wrapper = createWrapper();
-      expect(wrapper.vm.metricsIconMapping).toEqual({
-        summary: "description",
-        gauge: "speed", 
-        histogram: "bar-chart",
-        counter: "tag",
-      });
-    });
-
-    it("should initialize with empty metricsList when prop is not provided", () => {
-      const wrapper = createWrapper({ metricsList: [] });
-      expect(wrapper.vm.streamOptions).toEqual([]);
-    });
-
-    it("should handle onMounted lifecycle correctly when streamOptions is empty", async () => {
-      const metricsList = [{ label: "mounted_metric", value: "mounted_metric", type: "gauge" }];
-      const wrapper = createWrapper({ metricsList }, { attachTo: document.body });
-      
-      // Simulate mounted behavior
-      if (!wrapper.vm.streamOptions.length) {
-        wrapper.vm.streamOptions = metricsList;
-      }
-      
-      await nextTick();
-      expect(wrapper.vm.streamOptions).toEqual(metricsList);
-    });
-  });
-
-  describe("selectedMetric computed property", () => {
-    it("should return modelValue from props", () => {
-      const modelValue = { label: "test", value: "test", type: "counter" };
-      const wrapper = createWrapper({ modelValue });
-      expect(wrapper.vm.selectedMetric).toEqual(modelValue);
-    });
-
-    it("should emit update:modelValue when set", async () => {
-      const wrapper = createWrapper();
-      const newValue = { label: "new_metric", value: "new_metric", type: "gauge" };
-      
-      wrapper.vm.selectedMetric = newValue;
-      await nextTick();
-      
-      expect(wrapper.emitted("update:modelValue")).toBeTruthy();
-      expect(wrapper.emitted("update:modelValue")[0]).toEqual([newValue]);
-    });
-
-    it("should handle null modelValue", () => {
-      const wrapper = createWrapper({ modelValue: null });
-      expect(wrapper.vm.selectedMetric).toBe(null);
-    });
-  });
-
-  describe("streamOptions — prop-driven filtering", () => {
-    // filterMetrics is an internal helper not exposed on the public API.
-    // The observable behaviour is: streamOptions mirrors the metricsList prop
-    // and updates reactively when the prop changes.  Tests here drive that
-    // behaviour through props and assert on the returned streamOptions ref.
-
-    it("initialises streamOptions to match the metricsList prop", () => {
-      const metricsList = [
-        { label: "cpu_usage", value: "cpu_usage", type: "gauge" },
-        { label: "memory_usage", value: "memory_usage", type: "gauge" },
-        { label: "disk_io", value: "disk_io", type: "counter" },
-      ];
-      const wrapper = createWrapper({ metricsList });
-
-      expect(wrapper.vm.streamOptions).toEqual(metricsList);
-    });
-
-    it("streamOptions contains all metrics when metricsList has multiple items", () => {
-      const metricsList = [
-        { label: "metric1", value: "metric1", type: "counter" },
-        { label: "metric2", value: "metric2", type: "gauge" },
-      ];
-      const wrapper = createWrapper({ metricsList });
-
-      expect(wrapper.vm.streamOptions).toHaveLength(2);
-      expect(wrapper.vm.streamOptions).toEqual(metricsList);
-    });
-
-    it("updates streamOptions reactively when metricsList prop changes to a smaller list", async () => {
-      const original = [
-        { label: "CPU_Usage", value: "CPU_Usage", type: "gauge" },
-        { label: "Memory_Usage", value: "Memory_Usage", type: "gauge" },
-      ];
-      const wrapper = createWrapper({ metricsList: original });
-
-      const reduced = [{ label: "CPU_Usage", value: "CPU_Usage", type: "gauge" }];
-      await wrapper.setProps({ metricsList: reduced });
-
-      expect(wrapper.vm.streamOptions).toEqual(reduced);
-    });
-
-    it("streamOptions becomes empty when metricsList prop is set to empty array", async () => {
-      const wrapper = createWrapper({
-        metricsList: [{ label: "metric1", value: "metric1", type: "counter" }],
-      });
-
-      await wrapper.setProps({ metricsList: [] });
-
-      expect(wrapper.vm.streamOptions).toEqual([]);
-    });
-
-    it("updates streamOptions when metricsList prop is replaced with a different list", async () => {
-      const first = [
-        { label: "metric1", value: "metric1", type: "counter" },
-        { label: "metric2", value: "metric2", type: "gauge" },
-      ];
-      const wrapper = createWrapper({ metricsList: first });
-
-      const second = [
-        { label: "metric1", value: "metric1", type: "counter" },
-        { label: "metric2", value: "metric2", type: "gauge" },
-        { label: "metric3", value: "metric3", type: "summary" },
-      ];
-      await wrapper.setProps({ metricsList: second });
-
-      expect(wrapper.vm.streamOptions).toHaveLength(3);
-    });
-  });
-
-  describe("filterMetricLabels function", () => {
-    it("should filter rows based on name field", () => {
-      const wrapper = createWrapper();
-      const rows = [
-        { name: "cpu_usage" },
-        { name: "memory_usage" },
-        { name: "disk_usage" },
-      ];
-      
-      const result = wrapper.vm.filterMetricLabels(rows, "cpu");
-      expect(result).toEqual([{ name: "cpu_usage" }]);
-    });
-
-    it("should return all rows when search term is empty", () => {
-      const wrapper = createWrapper();
-      const rows = [
-        { name: "field1" },
-        { name: "field2" },
-      ];
-      
-      const result = wrapper.vm.filterMetricLabels(rows, "");
-      expect(result).toEqual([]);
-    });
-
-    it("should be case insensitive", () => {
-      const wrapper = createWrapper();
-      const rows = [
-        { name: "CPU_Usage" },
-        { name: "Memory_Usage" },
-      ];
-      
-      const result = wrapper.vm.filterMetricLabels(rows, "cpu");
-      expect(result).toEqual([{ name: "CPU_Usage" }]);
-    });
-
-    it("should handle partial matches", () => {
-      const wrapper = createWrapper();
-      const rows = [
-        { name: "system_cpu_usage" },
-        { name: "user_cpu_time" },
-        { name: "memory_usage" },
-      ];
-      
-      const result = wrapper.vm.filterMetricLabels(rows, "cpu");
-      expect(result).toHaveLength(2);
-      expect(result).toEqual([
-        { name: "system_cpu_usage" },
-        { name: "user_cpu_time" },
-      ]);
-    });
-
-    it("should return empty array when no matches found", () => {
-      const wrapper = createWrapper();
-      const rows = [
-        { name: "field1" },
-        { name: "field2" },
-      ];
-      
-      const result = wrapper.vm.filterMetricLabels(rows, "nonexistent");
-      expect(result).toEqual([]);
-    });
-  });
-
-  describe("getMetricsFieldValues function", () => {
-    it("should set loading state and fetch field values", async () => {
-      const wrapper = createWrapper();
-      const fieldName = "test_field";
-      
-      await wrapper.vm.getMetricsFieldValues(fieldName);
-      
-      expect(mockStreamService.fieldValues).toHaveBeenCalledWith({
-        org_identifier: "test-org-123",
-        stream_name: undefined,
-        start_time: "2023-01-01T00:00:00.000Z",
-        end_time: "2023-01-01T01:00:00.000Z",
-        fields: [fieldName],
-        type: "metrics",
-        size: 10,
-      });
-    });
-
-    it("should handle successful response", async () => {
-      const wrapper = createWrapper();
-      const fieldName = "test_field";
-      
-      await wrapper.vm.getMetricsFieldValues(fieldName);
-      
-      // Wait for async operations to complete
-      await new Promise(resolve => setTimeout(resolve, 10));
-      
-      expect(wrapper.vm.metricLabelValues[fieldName]).toBeDefined();
-      expect(wrapper.vm.metricLabelValues[fieldName].isLoading).toBe(false);
-      expect(wrapper.vm.metricLabelValues[fieldName].values).toHaveLength(2);
-    });
-
-
-    it("should initialize loading state correctly", () => {
-      const wrapper = createWrapper();
-      const fieldName = "test_field";
-      
-      wrapper.vm.getMetricsFieldValues(fieldName);
-      
-      expect(wrapper.vm.metricLabelValues[fieldName]).toEqual({
-        isLoading: true,
-        values: [],
-      });
-    });
-
-    it("should handle empty response", async () => {
-      const wrapper = createWrapper();
-      mockStreamService.fieldValues.mockResolvedValue({
-        data: { hits: [] },
-      });
-      
-      const fieldName = "test_field";
-      await wrapper.vm.getMetricsFieldValues(fieldName);
-      
-      expect(wrapper.vm.metricLabelValues[fieldName].values).toEqual([]);
-    });
-
-    it("should handle null values in response", async () => {
-      const wrapper = createWrapper();
-      mockStreamService.fieldValues.mockResolvedValue({
-        data: {
-          hits: [
-            {
-              field: "test_field",
-              values: [
-                { zo_sql_key: null, zo_sql_num: 100 },
-              ],
-            },
-          ],
-        },
-      });
-      
-      const fieldName = "test_field";
-      await wrapper.vm.getMetricsFieldValues(fieldName);
-      
-      expect(wrapper.vm.metricLabelValues[fieldName].values[0].key).toBe("null");
-    });
-  });
-
-  describe("getFilteredMetricValues function", () => {
-    it("should fetch series data and process values", async () => {
-      const wrapper = createWrapper();
-      const fieldName = "test_field";
-      
-      await wrapper.vm.getFilteredMetricValues(fieldName);
-      
-      expect(mockSearchService.get_promql_series).toHaveBeenCalledWith({
-        org_identifier: "test-org-123",
-        start_time: expect.any(Number),
-        end_time: expect.any(Number),
-        labels: expect.any(String),
-      });
-    });
-
-    it("should handle successful response and build value counts", async () => {
-      const wrapper = createWrapper();
-      wrapper.vm.metricLabelValues["test_field"] = { isLoading: true, values: [] };
-      
-      await wrapper.vm.getFilteredMetricValues("test_field");
-      
-      // Wait for async operations to complete
-      await new Promise(resolve => setTimeout(resolve, 10));
-      
-      expect(wrapper.vm.metricLabelValues["test_field"].values).toHaveLength(2);
-      expect(wrapper.vm.metricLabelValues["test_field"].isLoading).toBe(false);
-    });
-
-    it("should handle API error", async () => {
-      const wrapper = createWrapper();
-      mockSearchService.get_promql_series.mockRejectedValue(new Error("API Error"));
-      wrapper.vm.metricLabelValues["test_field"] = { isLoading: true, values: [] };
-      
-      const consoleLogSpy = vi.spyOn(console, 'log').mockImplementation();
-      
-      await wrapper.vm.getFilteredMetricValues("test_field");
-      
-      // Wait for async operations
-      await new Promise(resolve => setTimeout(resolve, 10));
-      
-      expect(consoleLogSpy).toHaveBeenCalled();
-      expect(wrapper.vm.metricLabelValues["test_field"].isLoading).toBe(false);
-      
-      consoleLogSpy.mockRestore();
-    });
-
-    it("should handle empty response data", async () => {
-      const wrapper = createWrapper();
-      mockSearchService.get_promql_series.mockResolvedValue({
-        data: { data: [] },
-      });
-      wrapper.vm.metricLabelValues["test_field"] = { isLoading: true, values: [] };
-      
-      await wrapper.vm.getFilteredMetricValues("test_field");
-      
-      // Wait for async operations
-      await new Promise(resolve => setTimeout(resolve, 10));
-      
-      expect(wrapper.vm.metricLabelValues["test_field"].values).toEqual([]);
-      expect(wrapper.vm.metricLabelValues["test_field"].isLoading).toBe(false);
-    });
-
-    it("should count duplicate values correctly", async () => {
-      const wrapper = createWrapper();
-      mockSearchService.get_promql_series.mockResolvedValue({
-        data: {
-          data: [
-            { test_field: "value1" },
-            { test_field: "value1" },
-            { test_field: "value2" },
-          ],
-        },
-      });
-      wrapper.vm.metricLabelValues["test_field"] = { isLoading: true, values: [] };
-      
-      await wrapper.vm.getFilteredMetricValues("test_field");
-      
-      const values = wrapper.vm.metricLabelValues["test_field"].values;
-      expect(values).toHaveLength(2);
-      expect(values.find(v => v.key === "value1").count).toBe(2);
-      expect(values.find(v => v.key === "value2").count).toBe(1);
-    });
-  });
-
-  describe("openFilterCreator function", () => {
-    it("should initialize metric label values and try formatted query first", async () => {
-      const wrapper = createWrapper();
-      const mockEvent = {};
-      const mockField = { name: "test_field" };
-      
-      await wrapper.vm.openFilterCreator(mockEvent, mockField);
-      
-      // Wait for all async operations to complete
-      await new Promise(resolve => setTimeout(resolve, 50));
-      
-      expect(mockMetricService.formatPromqlQuery).toHaveBeenCalledWith({
-        org_identifier: "test-org-123",
-        query: "",
-      });
-      
-      expect(wrapper.vm.metricLabelValues["test_field"]).toEqual({
-        isLoading: false,
-        values: expect.any(Array),
-      });
-    });
-
-    it("should fallback to field values when format query fails", async () => {
-      const wrapper = createWrapper();
-      mockMetricService.formatPromqlQuery.mockRejectedValue(new Error("Format error"));
-      
-      const mockEvent = {};
-      const mockField = { name: "test_field" };
-      
-      await wrapper.vm.openFilterCreator(mockEvent, mockField);
-      
-      // Wait for all async operations to complete
-      await new Promise(resolve => setTimeout(resolve, 50));
-      
-      expect(mockMetricService.formatPromqlQuery).toHaveBeenCalled();
-      expect(mockStreamService.fieldValues).toHaveBeenCalled();
-    });
-
-    it("should set initial loading state", () => {
-      const wrapper = createWrapper();
-      const mockEvent = {};
-      const mockField = { name: "test_field" };
-      
-      wrapper.vm.openFilterCreator(mockEvent, mockField);
-      
-      expect(wrapper.vm.metricLabelValues["test_field"]).toEqual({
-        isLoading: true,
-        values: [],
-      });
-    });
-  });
-
-  describe("onMetricChange function", () => {
-
-    it("should wait for nextTick before emitting", async () => {
-      const wrapper = createWrapper();
-      
-      // Test that the function completes without error, indicating nextTick worked
-      await expect(wrapper.vm.onMetricChange()).resolves.toBeUndefined();
-    });
-  });
-
-  describe("setSelectedMetricType function", () => {
-    it("should set selected metric type in searchObj", () => {
-      const wrapper = createWrapper();
-      const option = { type: "histogram" };
-      
-      wrapper.vm.setSelectedMetricType(option);
-      
-      expect(wrapper.vm.searchObj.data.metrics.selectedMetricType).toBe("histogram");
-    });
-
-    it("should handle null option", () => {
-      const wrapper = createWrapper();
-      
-      wrapper.vm.setSelectedMetricType({ type: null });
-      
-      expect(wrapper.vm.searchObj.data.metrics.selectedMetricType).toBe(null);
-    });
-  });
-
-  describe("addLabelToEditor function", () => {
-    it("should emit select-label event with label", () => {
-      const wrapper = createWrapper();
-      const label = "cpu_usage";
-      
-      wrapper.vm.addLabelToEditor(label);
-      
-      expect(wrapper.emitted("select-label")).toBeTruthy();
-      expect(wrapper.emitted("select-label")[0]).toEqual([label]);
-    });
-
-    it("should handle empty label", () => {
-      const wrapper = createWrapper();
-      
-      wrapper.vm.addLabelToEditor("");
-      
-      expect(wrapper.emitted("select-label")).toBeTruthy();
-      expect(wrapper.emitted("select-label")[0]).toEqual([""]);
-    });
-  });
-
-  describe("addValueToEditor function", () => {
-    it("should format and emit label with equals operator", () => {
-      const wrapper = createWrapper();
-      
-      wrapper.vm.addValueToEditor("cpu_usage", "high", "=");
-      
-      expect(wrapper.emitted("select-label")).toBeTruthy();
-      expect(wrapper.emitted("select-label")[0]).toEqual(['cpu_usage="high"']);
-    });
-
-    it("should format and emit label with not equals operator", () => {
-      const wrapper = createWrapper();
-      
-      wrapper.vm.addValueToEditor("status", "error", "!=");
-      
-      expect(wrapper.emitted("select-label")).toBeTruthy();
-      expect(wrapper.emitted("select-label")[0]).toEqual(['status!="error"']);
-    });
-
-    it("should handle empty value", () => {
-      const wrapper = createWrapper();
-      
-      wrapper.vm.addValueToEditor("field", "", "=");
-      
-      expect(wrapper.emitted("select-label")).toBeTruthy();
-      expect(wrapper.emitted("select-label")[0]).toEqual(['field=""']);
-    });
-
-    it("should handle special characters in value", () => {
-      const wrapper = createWrapper();
-      
-      wrapper.vm.addValueToEditor("path", "/var/log/app.log", "=");
-      
-      expect(wrapper.emitted("select-label")).toBeTruthy();
-      expect(wrapper.emitted("select-label")[0]).toEqual(['path="/var/log/app.log"']);
-    });
-  });
-
-  describe("Watchers", () => {
-    it("should update streamOptions when metricsList prop changes", async () => {
-      const wrapper = createWrapper();
-      const newMetricsList = [
-        { label: "new_metric", value: "new_metric", type: "summary" },
-      ];
-      
-      await wrapper.setProps({ metricsList: newMetricsList });
-      
-      expect(wrapper.vm.streamOptions).toEqual(newMetricsList);
-    });
-
-    it("should call updateMetricLabels when selectedMetric changes", async () => {
-      const wrapper = createWrapper();
-      
-      // Clear previous calls
-      mockGetStream.mockClear();
-      
-      const newMetric = { label: "test", value: "test", type: "counter" };
-      
-      try {
-        // Trigger the watcher by setting the computed property
-        await wrapper.setProps({ modelValue: newMetric });
-        
-        // Wait for watcher to trigger
-        await nextTick();
-        await new Promise(resolve => setTimeout(resolve, 50));
-        
-        expect(mockGetStream).toHaveBeenCalledWith("test", "metrics", true);
-      } catch (error) {
-        // If there's an error in the watcher, just verify it was attempted
-        expect(mockGetStream).toHaveBeenCalled();
-      }
-    });
-
-    it("should not call updateMetricLabels when selectedMetric is null", async () => {
-      const wrapper = createWrapper();
-      
-      wrapper.vm.selectedMetric = null;
-      await nextTick();
-      
-      // Since no metric is selected, getStream should not be called
-      expect(mockGetStream).not.toHaveBeenCalled();
-    });
-  });
-
-  describe("Integration tests", () => {
-    it("should handle complete metric selection flow", async () => {
-      const wrapper = createWrapper();
-      const metric = { label: "test_metric", value: "test_metric", type: "gauge" };
-      
-      // Clear previous calls
-      mockGetStream.mockClear();
-      
-      try {
-        // Select metric through props to trigger watcher
-        await wrapper.setProps({ modelValue: metric });
-        
-        // Wait for watcher and async operations
-        await nextTick();
-        await new Promise(resolve => setTimeout(resolve, 50));
-        
-        // Spy on emit for onMetricChange test
-        const emitSpy = vi.spyOn(wrapper.vm, '$emit');
-        
-        // Verify metric change emission
-        await wrapper.vm.onMetricChange();
-        
-        expect(wrapper.emitted("update:modelValue")).toBeTruthy();
-        expect(emitSpy).toHaveBeenCalledWith("update:change-metric", metric);
-        expect(mockGetStream).toHaveBeenCalled();
-      } catch (error) {
-        // If there's an error in the integration flow, just check basic functionality
-        expect(mockGetStream).toHaveBeenCalled();
-      }
-    });
-
-    it("should handle field value fetching with error fallback", async () => {
-      const wrapper = createWrapper();
-      
-      // Mock format query to fail, field values to succeed
-      mockMetricService.formatPromqlQuery.mockRejectedValue(new Error("Format failed"));
-      
-      const mockEvent = {};
-      const mockField = { name: "test_field" };
-      
-      await wrapper.vm.openFilterCreator(mockEvent, mockField);
-      
-      // Wait for all async operations to complete
-      await new Promise(resolve => setTimeout(resolve, 50));
-      
-      expect(mockMetricService.formatPromqlQuery).toHaveBeenCalled();
-      expect(mockStreamService.fieldValues).toHaveBeenCalled();
-    });
-  });
-
-  describe("Edge cases", () => {
-    it("should handle undefined metricsList prop", () => {
-      const wrapper = createWrapper({ metricsList: undefined });
-      expect(wrapper.vm.streamOptions).toBeUndefined();
-    });
-
-    it("should handle missing field in series response", async () => {
-      const wrapper = createWrapper();
-      mockSearchService.get_promql_series.mockResolvedValue({
-        data: {
-          data: [
-            { other_field: "value1" },
-            { test_field: "value2" },
-          ],
-        },
-      });
-      wrapper.vm.metricLabelValues["test_field"] = { isLoading: true, values: [] };
-
-      await wrapper.vm.getFilteredMetricValues("test_field");
-
-      expect(wrapper.vm.metricLabelValues["test_field"].values).toHaveLength(1);
-      expect(wrapper.vm.metricLabelValues["test_field"].values[0].key).toBe("value2");
-    });
-  });
-});
-
-// ---------------------------------------------------------------------------
-// New test cases added 2026 — covering functionality not in the Aug 2026 spec
-// ---------------------------------------------------------------------------
-
-describe("MetricList — updateMetricLabels", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    mockGetStream.mockResolvedValue({
-      schema: [{ name: "label_a" }, { name: "label_b" }, { name: "label_c" }],
-    });
-  });
-
-  afterEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it("calls getStream with the selected metric value, 'metrics', and true", async () => {
-    const wrapper = createWrapper({
-      modelValue: { label: "my_metric", value: "my_metric", type: "gauge" },
-    });
-    mockGetStream.mockClear();
-
-    await wrapper.vm.updateMetricLabels();
-    await flushPromises();
-
-    expect(mockGetStream).toHaveBeenCalledWith("my_metric", "metrics", true);
-  });
-
-  it("sets selectedMetricLabels from the schema returned by getStream", async () => {
-    const wrapper = createWrapper({
-      modelValue: { label: "my_metric", value: "my_metric", type: "gauge" },
-    });
-    await wrapper.vm.updateMetricLabels();
-    await flushPromises();
-
-    expect(wrapper.vm.selectedMetricLabels).toEqual([
-      { name: "label_a" },
-      { name: "label_b" },
-      { name: "label_c" },
-    ]);
-  });
-
-  it("sets filteredMetricLabels to a copy of the schema", async () => {
-    const wrapper = createWrapper({
-      modelValue: { label: "my_metric", value: "my_metric", type: "gauge" },
-    });
-    await wrapper.vm.updateMetricLabels();
-    await flushPromises();
-
-    expect(wrapper.vm.filteredMetricLabels).toEqual([
-      { name: "label_a" },
-      { name: "label_b" },
-      { name: "label_c" },
-    ]);
-  });
-
-  it("does not set filteredMetricLabels when schema is not an array", async () => {
-    mockGetStream.mockResolvedValue({ schema: null });
-    const wrapper = createWrapper({
-      modelValue: { label: "my_metric", value: "my_metric", type: "gauge" },
-    });
-    // filteredMetricLabels starts empty; after update it should remain unchanged
-    const before = [...wrapper.vm.filteredMetricLabels];
-    await wrapper.vm.updateMetricLabels();
-    await flushPromises();
-
-    expect(wrapper.vm.filteredMetricLabels).toEqual(before);
-  });
-
-  it("calls getStream with empty string when modelValue is null", async () => {
-    const wrapper = createWrapper({ modelValue: null });
-    mockGetStream.mockClear();
-
-    await wrapper.vm.updateMetricLabels();
-    await flushPromises();
-
-    expect(mockGetStream).toHaveBeenCalledWith("", "metrics", true);
-  });
-});
-
-describe("MetricList — onMetricChange emit", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  afterEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it("emits 'update:change-metric' with the current selectedMetric value", async () => {
-    const metric = { label: "cpu_total", value: "cpu_total", type: "counter" };
-    const wrapper = createWrapper({ modelValue: metric });
-
-    await wrapper.vm.onMetricChange();
-
-    expect(wrapper.emitted("update:change-metric")).toBeTruthy();
-    expect(wrapper.emitted("update:change-metric")![0]).toEqual([metric]);
-  });
-
-  it("emits 'update:change-metric' with null when no metric is selected", async () => {
-    const wrapper = createWrapper({ modelValue: null });
-
-    await wrapper.vm.onMetricChange();
-
-    expect(wrapper.emitted("update:change-metric")).toBeTruthy();
-    expect(wrapper.emitted("update:change-metric")![0]).toEqual([null]);
-  });
-
-  it("resolves without throwing even when nextTick is pending", async () => {
-    const wrapper = createWrapper();
-    await expect(wrapper.vm.onMetricChange()).resolves.not.toThrow();
-  });
-});
-
-describe("MetricList — addValueToEditor operator formatting", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  afterEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it("formats label=value correctly with '=' operator", () => {
-    const wrapper = createWrapper();
-    wrapper.vm.addValueToEditor("env", "production", "=");
-    expect(wrapper.emitted("select-label")![0]).toEqual(['env="production"']);
-  });
-
-  it("formats label!=value correctly with '!=' operator", () => {
-    const wrapper = createWrapper();
-    wrapper.vm.addValueToEditor("status", "error", "!=");
-    expect(wrapper.emitted("select-label")![0]).toEqual(['status!="error"']);
-  });
-
-  it("formats label with empty operator string", () => {
-    const wrapper = createWrapper();
-    wrapper.vm.addValueToEditor("job", "apiserver", "");
-    expect(wrapper.emitted("select-label")![0]).toEqual(['job"apiserver"']);
-  });
-
-  it("wraps the value in double-quotes regardless of content", () => {
-    const wrapper = createWrapper();
-    wrapper.vm.addValueToEditor("path", 'some "quoted" value', "=");
-    const emitted = wrapper.emitted("select-label")![0][0] as string;
-    expect(emitted).toContain('"');
-  });
-
-  it("handles numeric-looking values as strings", () => {
-    const wrapper = createWrapper();
-    wrapper.vm.addValueToEditor("code", "200", "=");
-    expect(wrapper.emitted("select-label")![0]).toEqual(['code="200"']);
-  });
-});
-
-describe("MetricList — metricsIconMapping completeness", () => {
-  it("covers all four standard Prometheus metric types", () => {
-    const wrapper = createWrapper();
-    const mapping = wrapper.vm.metricsIconMapping;
-    expect(mapping).toHaveProperty("summary");
-    expect(mapping).toHaveProperty("gauge");
-    expect(mapping).toHaveProperty("histogram");
-    expect(mapping).toHaveProperty("counter");
-  });
-
-  it("maps 'summary' to 'description' icon", () => {
-    const wrapper = createWrapper();
-    expect(wrapper.vm.metricsIconMapping.summary).toBe("description");
-  });
-
-  it("maps 'gauge' to 'speed' icon", () => {
-    const wrapper = createWrapper();
-    expect(wrapper.vm.metricsIconMapping.gauge).toBe("speed");
-  });
-
-  it("maps 'histogram' to 'bar-chart' icon", () => {
-    const wrapper = createWrapper();
-    expect(wrapper.vm.metricsIconMapping.histogram).toBe("bar-chart");
-  });
-
-  it("maps 'counter' to 'tag' icon", () => {
-    const wrapper = createWrapper();
-    expect(wrapper.vm.metricsIconMapping.counter).toBe("tag");
-  });
-
-  it("returns empty string for an unknown metric type", () => {
-    const wrapper = createWrapper();
-    const icon = wrapper.vm.metricsIconMapping["unknown_type"] || "";
-    expect(icon).toBe("");
-  });
-});
-
-describe("MetricList — getMetricsFieldValues null / edge values", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  afterEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it("uses 'null' string when zo_sql_key is undefined", async () => {
-    mockStreamService.fieldValues.mockResolvedValue({
-      data: {
-        hits: [
-          {
-            field: "env",
-            values: [{ zo_sql_key: undefined, zo_sql_num: 5 }],
-          },
-        ],
-      },
-    });
-    const wrapper = createWrapper();
-    await wrapper.vm.getMetricsFieldValues("env");
-    await flushPromises();
-
-    expect(wrapper.vm.metricLabelValues["env"].values[0].key).toBe("null");
-  });
-
-  it("sets isLoading to false in finally block even after error", async () => {
-    mockStreamService.fieldValues.mockRejectedValue(new Error("network error"));
-    const wrapper = createWrapper();
-    wrapper.vm.getMetricsFieldValues("flaky_field");
-    await flushPromises();
-
-    // The catch block calls toast and the field may not be set at all
-    // What we verify is that the component does not throw and toast is called
-    expect(mockToast).toHaveBeenCalled();
-  });
-
-  it("passes the selected metric value as stream_name", async () => {
-    const wrapper = createWrapper({
-      modelValue: { label: "requests_total", value: "requests_total", type: "counter" },
-    });
-    wrapper.vm.getMetricsFieldValues("code");
-    await flushPromises();
-
-    expect(mockStreamService.fieldValues).toHaveBeenCalledWith(
-      expect.objectContaining({ stream_name: "requests_total" }),
-    );
-  });
-
-  it("passes the org identifier from store", async () => {
-    const wrapper = createWrapper();
-    wrapper.vm.getMetricsFieldValues("code");
-    await flushPromises();
-
-    expect(mockStreamService.fieldValues).toHaveBeenCalledWith(
-      expect.objectContaining({ org_identifier: "test-org-123" }),
-    );
-  });
-
-  it("passes type 'metrics' in the request", async () => {
-    const wrapper = createWrapper();
-    wrapper.vm.getMetricsFieldValues("code");
-    await flushPromises();
-
-    expect(mockStreamService.fieldValues).toHaveBeenCalledWith(
-      expect.objectContaining({ type: "metrics" }),
-    );
-  });
-});
-
-describe("MetricList — getFilteredMetricValues label building", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    mockSearchService.get_promql_series.mockResolvedValue({
-      data: { data: [] },
-    });
-  });
-
-  afterEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it("includes __name__ in labels when metricName is parsed", async () => {
-    mockParsePromQlQuery.mockReturnValue({
-      metricName: "http_requests",
-      label: { labels: { job: "api" } },
-    });
-    const wrapper = createWrapper();
-    wrapper.vm.metricLabelValues["job"] = { isLoading: true, values: [] };
-
-    await wrapper.vm.getFilteredMetricValues("job");
-    await flushPromises();
-
-    expect(mockSearchService.get_promql_series).toHaveBeenCalledWith(
-      expect.objectContaining({
-        labels: expect.stringContaining("__name__"),
-      }),
-    );
-  });
-
-  it("formats the labels string with curly braces", async () => {
-    mockParsePromQlQuery.mockReturnValue({
-      metricName: "up",
-      label: { labels: {} },
-    });
-    const wrapper = createWrapper();
-    wrapper.vm.metricLabelValues["instance"] = { isLoading: true, values: [] };
-
-    await wrapper.vm.getFilteredMetricValues("instance");
-    await flushPromises();
-
-    const call = mockSearchService.get_promql_series.mock.calls[0][0];
-    expect(call.labels).toMatch(/^\{.*\}$/);
-  });
-
-  it("handles empty labels object when parsePromQlQuery returns no labels", async () => {
-    mockParsePromQlQuery.mockReturnValue({
-      metricName: "",
-      label: { labels: {} },
-    });
-    const wrapper = createWrapper();
-    wrapper.vm.metricLabelValues["env"] = { isLoading: true, values: [] };
-
-    await wrapper.vm.getFilteredMetricValues("env");
-    await flushPromises();
-
-    expect(mockSearchService.get_promql_series).toHaveBeenCalled();
-  });
-
-  it("sets isLoading to false after successful call", async () => {
-    const wrapper = createWrapper();
-    wrapper.vm.metricLabelValues["region"] = { isLoading: true, values: [] };
-
-    await wrapper.vm.getFilteredMetricValues("region");
-    await flushPromises();
-
-    expect(wrapper.vm.metricLabelValues["region"].isLoading).toBe(false);
-  });
-
-  it("sets isLoading to false even on error", async () => {
-    mockSearchService.get_promql_series.mockRejectedValue(new Error("boom"));
-    const consoleLogSpy = vi.spyOn(console, "log").mockImplementation(() => {});
-    const wrapper = createWrapper();
-    wrapper.vm.metricLabelValues["region"] = { isLoading: true, values: [] };
-
-    await wrapper.vm.getFilteredMetricValues("region");
-    await flushPromises();
-
-    expect(wrapper.vm.metricLabelValues["region"].isLoading).toBe(false);
-    consoleLogSpy.mockRestore();
-  });
-});
\ No newline at end of file
diff --git a/web/src/plugins/metrics/MetricList.vue b/web/src/plugins/metrics/MetricList.vue
deleted file mode 100644
index 5def8da307..0000000000
--- a/web/src/plugins/metrics/MetricList.vue
+++ /dev/null
@@ -1,538 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <div
-    class="flex flex-col w-full index-menu"
-    :class="store.state.theme == 'dark' ? 'theme-dark' : 'theme-light'"
-  >
-    <OSelect
-      data-test="log-search-index-list-select-stream"
-      v-model="selectedMetric"
-      :label="selectedMetric ? '' : t('search.selectIndex')"
-      :options="streamOptions"
-      data-cy="index-dropdown"
-      class="metric-select-input"
-      @update:model-value="onMetricChange"
-    >
-      <template v-if="selectedMetric?.type" #icon-left>
-        <OIcon
-          :title="selectedMetric?.type"
-          size="xs"
-          :name="metricsIconMapping[selectedMetric?.type || '']"
-        />
-      </template>
-      <template #empty>
-        <li class="flex items-center gap-2 px-3 py-2">
-          <div class="flex flex-col flex-1 min-w-0">{{ t("search.noResult") }}</div>
-        </li>
-      </template>
-    </OSelect>
-    <div class="metric-list h-[calc(100vh-98px)] w-full overflow-x-hidden overflow-y-auto">
-      <div
-        class="metrics-label-table mt-1 w-full"
-        data-test="log-search-index-list-fields-table"
-      >
-        <OTable
-          :data="visibleMetricLabels"
-          :columns="metricColumns"
-          row-key="name"
-          pagination="none"
-          :show-global-filter="false"
-          class="field-table w-full"
-        >
-          <template #cell-name="{ row }">
-            <div class="p-0 mb-0.5 relative overflow-visible cursor-default group hover:shadow-[0px_4px_15px_rgba(0,0,0,0.17)] dark:hover:shadow-[0px_4px_15px_rgb(255,255,255,0.1)]">
-              <!-- TODO OK : Repeated code make separate component to display field  -->
-              <template
-                v-if="
-                  row.name === store.state.zoConfig.timestamp_column
-                "
-              >
-                <OFieldLabel :field="row" class="pl-4" />
-              </template>
-              <template v-else>
-                <OCollapsible
-                  variant="sidebar"
-                  :model-value="openMetricRows[row.name] === true"
-                  @update:model-value="(v) => { openMetricRows[row.name] = v; if (v) openFilterCreator(null, row); }"
-                >
-                  <template #trigger>
-                    <div class="flex items-center min-w-0">
-                      <OFieldLabel :field="row" class="flex-1 min-w-0" />
-                      <!-- `bg-surface-subtle`, not a hex pair with a `dark:`
-                           override: the token already resolves in both themes,
-                           which is the whole point of having it. -->
-                      <div class="absolute h-full right-0 top-0 z-[5] bg-surface-subtle px-[0.375rem] invisible flex items-center group-hover:visible group-hover:opacity-100">
-                        <OButton
-                          icon-left="add"
-                          :data-test="`metrics-list-add-${row.name}-label-btn`"
-                          variant="ghost"
-                          size="icon-xs"
-                          class="mr-0"
-                          @click.stop="addValueToEditor(row.name, '', '=')"
-                        />
-                      </div>
-                    </div>
-                  </template>
-                  <div class="pl-3 pr-1 py-1">
-                      <div class="filter-values-container">
-                        <div
-                          v-show="
-                            metricLabelValues[row.name]?.isLoading
-                          "
-                          class="pl-3 py-1"
-                          style="height: 60px"
-                        >
-                          <OInnerLoading
-                            :showing="
-                              metricLabelValues[row.name]?.isLoading
-                            "
-                            :label="t('metrics.metricList.fetchingValues')"
-                            size="xs"
-                          />
-                        </div>
-                        <div
-                          v-show="
-                            !metricLabelValues[row.name]?.values
-                              ?.length &&
-                            !metricLabelValues[row.name]?.isLoading
-                          "
-                          class="pl-3 py-1 text-sm font-medium"
-                        >
-                          {{ t('metrics.metricList.noValuesFound') }}
-                        </div>
-                        <div
-                          v-for="value in metricLabelValues[row.name]
-                            ?.values || []"
-                          :key="value.key + value.count"
-                        >
-                          <ul>
-                            <label class="flex items-center gap-2 px-3 py-2 cursor-pointer hover:bg-muted/50 pr-0">
-                              <div
-                                class="flex flex wrap justify-between"
-                                style="width: calc(100% - 46px)"
-                                :class="
-                                  store.state.theme === 'dark'
-                                    ? 'text-gray-300'
-                                    : 'text-gray-500'
-                                "
-                              >
-                                <div
-                                  :title="value.key"
-                                  class="truncate pr-1"
-                                  style="width: calc(100% - 50px)"
-                                >
-                                  {{ value.key }}
-                                </div>
-                                <div
-                                  :title="value.count?.toString()"
-                                  class="truncate text-right pr-2"
-                                  style="width: 50px"
-                                >
-                                  {{ value.count }}
-                                </div>
-                              </div>
-                              <div
-                                class="flex flex"
-                                :class="
-                                  store.state.theme === 'dark'
-                                    ? 'text-white'
-                                    : 'text-black'
-                                "
-                              >
-                                <OButton
-                                  class="mr-1"
-                                  size="icon-xs"
-                                  variant="ghost"
-                                  :title="t('metrics.metricList.includeTerm')"
-                                  @click="
-                                    addValueToEditor(
-                                      row.name,
-                                      value.key,
-                                      '=',
-                                    )
-                                  "
-                                >
-                                  <EqualIcon class="size-3" />
-                                </OButton>
-                                <OButton
-                                  class="mr-1"
-                                  size="icon-xs"
-                                  variant="ghost"
-                                  :title="t('metrics.metricList.excludeTerm')"
-                                  @click="
-                                    addValueToEditor(
-                                      row.name,
-                                      value.key,
-                                      '!=',
-                                    )
-                                  "
-                                >
-                                  <NotEqualIcon class="size-3" />
-                                </OButton>
-                              </div>
-                            </label>
-                          </ul>
-                        </div>
-                      </div>
-                  </div>
-                </OCollapsible>
-              </template>
-            </div>
-          </template>
-          <template #top>
-            <OSearchInput
-              data-test="log-search-index-list-field-search-input"
-              v-model="searchMetricLabel"
-              data-cy="index-field-search-input"
-              clearable
-              :debounce="1"
-              :placeholder="t('search.searchField')"
-            />
-          </template>
-        </OTable>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import {
-  defineComponent,
-  ref,
-  type Ref,
-  watch,
-  onMounted,
-  computed,
-  nextTick,
-  reactive,
-} from "vue";
-import { useI18n } from "vue-i18n";
-import { useStore } from "vuex";
-import { useRouter } from "vue-router";
-import useMetrics from "../../composables/useMetrics";
-import { formatLargeNumber, getImageURL } from "../../utils/zincutils";
-import stream from "@/services/stream";
-import EqualIcon from "@/components/icons/EqualIcon.vue";
-import metricService from "@/services/metrics";
-import NotEqualIcon from "@/components/icons/NotEqualIcon.vue";
-import usePromqlSuggestions from "@/composables/usePromqlSuggestions";
-import searchService from "@/services/search";
-import useStreams from "@/composables/useStreams";
-import OFieldLabel from "@/lib/lists/FieldList/OFieldLabel.vue";
-import OButton from '@/lib/core/Button/OButton.vue';
-import OSearchInput from '@/lib/forms/SearchInput/OSearchInput.vue';
-import OSelect from '@/lib/forms/Select/OSelect.vue';
-import OInnerLoading from "@/lib/feedback/InnerLoading/OInnerLoading.vue";
-import OIcon from "@/lib/core/Icon/OIcon.vue";
-import OTable from "@/lib/core/Table/OTable.vue";
-import OCollapsible from "@/lib/core/Collapsible/OCollapsible.vue";
-import { toast } from "@/lib/feedback/Toast/useToast";
-
-export default defineComponent({
-  name: "MetricsList",
-  emits: ["update:change-metric", "select-label", "update:modelValue"],
-  components: { EqualIcon, NotEqualIcon, OButton, OSearchInput, OInnerLoading,
-    OIcon, OTable, OCollapsible, OFieldLabel,
-},
-  props: ["modelValue", "metricsList"],
-  setup(props, { emit }) {
-    const store = useStore();
-    const router = useRouter();
-    const { t } = useI18n();
-    const { searchObj } = useMetrics();
-    const streamOptions: any = ref(props.metricsList || []);
-    const selectedMetricLabels = ref([]);
-    const searchMetricLabel = ref("");
-    const filteredMetricLabels = ref([]);
-    const metricLabelValues: Ref<{
-      [key: string]: {
-        isLoading: boolean;
-        values: {
-          key: string;
-          count: number | string;
-        }[];
-      };
-    }> = ref({});
-    const metricsIconMapping: any = {
-      summary: "description",
-      gauge: "speed",
-      histogram: "bar-chart",
-      counter: "tag",
-    };
-    const { parsePromQlQuery } = usePromqlSuggestions();
-    const { getStream } = useStreams();
-
-    const selectedMetric = computed({
-      get() {
-        return props.modelValue;
-      },
-      set(value) {
-        emit("update:modelValue", value);
-      },
-    });
-    watch(
-      () => props.metricsList,
-      () => {
-        streamOptions.value = props.metricsList;
-      },
-      { deep: true },
-    );
-    onMounted(() => {
-      if (!streamOptions.value.length) streamOptions.value = props.metricsList;
-    });
-    const filterMetrics = (val: string, update: any) => {
-      update(() => {
-        streamOptions.value = props.metricsList;
-        const needle = val.toLowerCase();
-        streamOptions.value = streamOptions.value.filter(
-          (v: any) => v.label.toLowerCase().indexOf(needle) > -1,
-        );
-      });
-    };
-    const updateMetricLabels = async () => {
-      const streamData = await getStream(
-        selectedMetric.value?.value || "",
-        "metrics",
-        true,
-      );
-
-      selectedMetricLabels.value = streamData.schema;
-
-      if (Array.isArray(selectedMetricLabels.value))
-        filteredMetricLabels.value = [...selectedMetricLabels.value];
-    };
-    watch(
-      () => selectedMetric.value,
-      (metric) => {
-        if (metric?.value) updateMetricLabels();
-      },
-      { immediate: true, deep: true },
-    );
-    const metricColumns = [{ id: "name", header: "", accessorKey: "name" }];
-
-    const visibleMetricLabels = computed(() => {
-      if (!searchMetricLabel.value) return filteredMetricLabels.value;
-      return filterMetricLabels(filteredMetricLabels.value, searchMetricLabel.value);
-    });
-
-    const filterMetricLabels = (rows: any, terms: any) => {
-      var filtered = [];
-      if (terms != "") {
-        terms = terms.toLowerCase();
-        for (var i = 0; i < rows.length; i++) {
-          if (rows[i]["name"].toLowerCase().includes(terms)) {
-            filtered.push(rows[i]);
-          }
-        }
-      }
-      return filtered;
-    };
-
-    const getMetricsFieldValues = (name: string) => {
-      const startISOTimestamp: any = searchObj.data.datetime.startTime;
-      const endISOTimestamp: any = searchObj.data.datetime.endTime;
-      metricLabelValues.value[name] = {
-        isLoading: true,
-        values: [],
-      };
-      try {
-        stream
-          .fieldValues({
-            org_identifier: store.state.selectedOrganization.identifier,
-            stream_name: selectedMetric.value?.value,
-            start_time: startISOTimestamp,
-            end_time: endISOTimestamp,
-            fields: [name],
-            type: "metrics",
-            size: store.state.zoConfig?.query_values_default_num || 10,
-          })
-          .then((res: any) => {
-            if (res.data.hits.length) {
-              metricLabelValues.value[name]["values"] = res.data.hits
-                .find((field: any) => field.field === name)
-                .values.map((value: any) => {
-                  return {
-                    key: value.zo_sql_key ? value.zo_sql_key : "null",
-                    count: formatLargeNumber(value.zo_sql_num),
-                  };
-                });
-            }
-          })
-          .catch(() => {
-            toast({
-              variant: "error",
-              message: t("metrics.metricList.errorFetchingFieldValues"),
-            });
-          })
-          .finally(() => {
-            metricLabelValues.value[name]["isLoading"] = false;
-          });
-      } catch (err) {
-        toast({
-          variant: "error",
-          message: "Error while fetching field values",
-        });
-      }
-    };
-
-    const getFilteredMetricValues = (name: string) => {
-      const parsedQuery: any = parsePromQlQuery(searchObj.data.query);
-      const metricName = parsedQuery?.metricName || "";
-      const labels = parsedQuery?.label?.labels || {};
-      if (metricName) labels["__name__"] = metricName;
-
-      const formattedLabels = Object.keys(labels).map((key) => {
-        return `${key}="${labels[key]}"`;
-      });
-
-      searchService
-        .get_promql_series({
-          org_identifier: store.state.selectedOrganization.identifier,
-          start_time: Number(searchObj.data.datetime.startTime),
-          end_time: Number(searchObj.data.datetime.endTime),
-          labels: `{${formattedLabels.join(",")}}`,
-        })
-        .then((res) => {
-          if (res.data.data.length) {
-            const valuesSet = new Map();
-            res.data.data.forEach((label: any) => {
-              if (!label[name]) return;
-              if (valuesSet.has(label[name])) {
-                valuesSet.set(label[name], valuesSet.get(label[name]) + 1);
-              } else {
-                valuesSet.set(label[name], 1);
-              }
-            });
-            metricLabelValues.value[name]["values"] = [];
-            valuesSet.forEach((value, key) => {
-              metricLabelValues.value[name]["values"].push({
-                key: key ? key : "null",
-                count: value,
-              });
-            });
-          }
-        })
-        .catch((err) => console.log(err))
-        .finally(() => {
-          metricLabelValues.value[name].isLoading = false;
-        });
-    };
-
-    const openMetricRows = reactive<Record<string, boolean>>({});
-    const openFilterCreator = (event: any, { name }: any) => {
-      metricLabelValues.value[name] = {
-        isLoading: true,
-        values: [],
-      };
-      metricService
-        .formatPromqlQuery({
-          org_identifier: store.state.selectedOrganization.identifier,
-          query: searchObj.data.query,
-        })
-        .then(() => {
-          getFilteredMetricValues(name);
-        })
-        .catch(() => {
-          getMetricsFieldValues(name);
-        });
-    };
-
-    const onMetricChange = async () => {
-      await nextTick();
-
-      emit("update:change-metric", selectedMetric.value);
-    };
-    const setSelectedMetricType = (option: any) => {
-      searchObj.data.metrics.selectedMetricType = option.type;
-    };
-    const addLabelToEditor = (label: string) => {
-      emit("select-label", label);
-    };
-    const addValueToEditor = (
-      label: string,
-      value: string,
-      operator: string,
-    ) => {
-      addLabelToEditor(`${label}${operator}"${value}"`);
-    };
-    return {
-      t,
-      store,
-      router,
-      searchObj,
-      streamOptions,
-      getImageURL,
-      filteredMetricLabels,
-      searchMetricLabel,
-      metricColumns,
-      visibleMetricLabels,
-      filterMetricLabels,
-      openFilterCreator,
-      openMetricRows,
-      metricLabelValues,
-      onMetricChange,
-      metricsIconMapping,
-      setSelectedMetricType,
-      "add": "add",
-      addLabelToEditor,
-      addValueToEditor,
-      selectedMetric,
-      // Exposed for testing
-      selectedMetricLabels,
-      getMetricsFieldValues,
-      getFilteredMetricValues,
-      updateMetricLabels,
-    };
-  },
-});
-</script>
-
-<style>
-.index-menu .metrics-label-table table {
-  display: table;
-  table-layout: fixed !important;
-}
-
-.index-menu .metrics-label-table thead {
-  display: none;
-}
-
-.index-menu .metrics-label-table tr {
-  margin-bottom: 1px;
-}
-
-.index-menu .metrics-label-table tbody,
-.index-menu .metrics-label-table tr,
-.index-menu .metrics-label-table td {
-  width: 100%;
-  display: block;
-  height: fit-content;
-  overflow: hidden;
-}
-
-.index-menu .metrics-label-table thead tr,
-.index-menu .metrics-label-table tbody td {
-  height: auto;
-}
-
-.metrics-label-table table {
-  width: 100%;
-  table-layout: fixed;
-}
-
-</style>
diff --git a/web/src/plugins/metrics/SyntaxGuideMetrics.spec.ts b/web/src/plugins/metrics/SyntaxGuideMetrics.spec.ts
index 0496bccab0..89ca821ce4 100644
--- a/web/src/plugins/metrics/SyntaxGuideMetrics.spec.ts
+++ b/web/src/plugins/metrics/SyntaxGuideMetrics.spec.ts
@@ -527,7 +527,6 @@ describe("SyntaxGuideMetrics — PromQL guide content (normal mode)", () => {
 
   afterEach(() => {
     if (wrapper) wrapper.unmount();
-    document.querySelectorAll(".q-menu").forEach((m) => m.remove());
     vi.clearAllTimers();
   });
 
@@ -587,7 +586,7 @@ describe("SyntaxGuideMetrics — PromQL guide content (normal mode)", () => {
     await button.trigger("click");
     await flushPromises();
     expect(document.querySelector(".answers ul")).toBeTruthy();
-    expect(document.querySelector(".answers .bg-surface-subtle")).toBeTruthy();
+    expect(document.querySelector(".answers .bg-highlight-bg")).toBeTruthy();
   });
 });
 
@@ -615,7 +614,6 @@ describe("SyntaxGuideMetrics — SQL mode guide content", () => {
 
   afterEach(() => {
     if (wrapper) wrapper.unmount();
-    document.querySelectorAll(".q-menu").forEach((m) => m.remove());
     vi.clearAllTimers();
   });
 
@@ -692,11 +690,11 @@ describe("SyntaxGuideMetrics — SQL mode guide content", () => {
     await button.trigger("click");
     await flushPromises();
     expect(document.querySelector(".answers ul")).toBeTruthy();
-    expect(document.querySelector(".answers .bg-surface-subtle")).toBeTruthy();
+    expect(document.querySelector(".answers .bg-highlight-bg")).toBeTruthy();
   });
 });
 
-describe("SyntaxGuideMetrics — q-menu theme class binding", () => {
+describe("SyntaxGuideMetrics — dropdown theme class binding", () => {
   let wrapper: any;
 
   const createWrapper = (propsData = {}) => {
@@ -721,14 +719,14 @@ describe("SyntaxGuideMetrics — q-menu theme class binding", () => {
     vi.clearAllTimers();
   });
 
-  it("q-menu has theme-dark class when store theme is 'dark'", () => {
+  it("resolves the dark theme binding when store theme is 'dark'", () => {
     store.state.theme = "dark";
     wrapper = createWrapper();
-    // The menu renders as a portal; verify via vm that the binding resolves correctly
+    // The dropdown content renders as a portal; verify via vm that the binding resolves correctly
     expect(wrapper.vm.store.state.theme).toBe("dark");
   });
 
-  it("q-menu has theme-light class when store theme is 'light'", () => {
+  it("resolves the light theme binding when store theme is 'light'", () => {
     store.state.theme = "light";
     wrapper = createWrapper();
     expect(wrapper.vm.store.state.theme).toBe("light");
@@ -769,7 +767,6 @@ describe("SyntaxGuideMetrics — mode switching content swap", () => {
 
   afterEach(() => {
     if (wrapper) wrapper.unmount();
-    document.querySelectorAll(".q-menu").forEach((m) => m.remove());
     vi.clearAllTimers();
   });
 
diff --git a/web/src/plugins/metrics/SyntaxGuideMetrics.vue b/web/src/plugins/metrics/SyntaxGuideMetrics.vue
index ede435ed27..3a26f92630 100644
--- a/web/src/plugins/metrics/SyntaxGuideMetrics.vue
+++ b/web/src/plugins/metrics/SyntaxGuideMetrics.vue
@@ -28,44 +28,44 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         {{ t('search.syntaxGuideLabel') }}
       </OButton>
     </template>
-    <div :class="store.state.theme == 'dark' ? 'theme-dark' : 'theme-light'">
+    <div>
       <div v-if="!sqlmode">
-        <div class="syntax-guide-title w-[26.25rem]">
-          <div class="label text-[0.9375rem] font-bold">{{ t("search.syntaxGuideLabel") }}</div>
+        <div class="w-105">
+          <div class="label text-sm font-bold">{{ t("search.syntaxGuideLabel") }}</div>
         </div>
         <div class="border-t my-1 border-dropdown-separator" />
         <div class="answers">
-          <div class="mb-[0.3125rem]">
-            <div class="text-xs ml-[0.3125rem]">
-              <ul class="px-[0.625rem] mt-[0.625rem] mb-0 text-[0.875rem] leading-[1.4375rem]">
+          <div class="mb-1.25">
+            <div class="text-xs ml-1.25">
+              <ul class="px-2.5 mt-2.5 mb-0 text-sm leading-[1.4375rem]">
                 <!-- The prose is translated; the PromQL samples beside it are
                      NOT — they are syntax, and a translated `rate(...)` would be
                      a query that does not run. -->
                 <li>
                   {{ t("metrics.syntaxGuide.instantVector") }}
-                  <span class="bg-surface-subtle px-[0.3125rem] rounded-sm"
+                  <span class="bg-highlight-bg px-1.25 rounded-default"
                     >metric_name{label1="value1", label2="value2"}</span
                   >
                 </li>
                 <li>
                   {{ t("metrics.syntaxGuide.rangeVector") }}
-                  <span class="bg-surface-subtle px-[0.3125rem] rounded-sm"
+                  <span class="bg-highlight-bg px-1.25 rounded-default"
                     >metric_name[5m]</span
                   >
                 </li>
                 <li>
                   {{ t("metrics.syntaxGuide.aggregate") }}
-                  <span class="bg-surface-subtle px-[0.3125rem] rounded-sm"
+                  <span class="bg-highlight-bg px-1.25 rounded-default"
                     >sum by (label)(metric_name)</span
                   >
                   {{ t("metrics.syntaxGuide.or") }}
-                  <span class="bg-surface-subtle px-[0.3125rem] rounded-sm"
+                  <span class="bg-highlight-bg px-1.25 rounded-default"
                     >avg by (label)(metric_name)</span
                   >
                 </li>
                 <li>
                   {{ t("metrics.syntaxGuide.rate") }}
-                  <span class="bg-surface-subtle px-[0.3125rem] rounded-sm"
+                  <span class="bg-highlight-bg px-1.25 rounded-default"
                     >rate(metric_name[5m])</span
                   >
                 </li>
@@ -75,39 +75,39 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
       </div>
       <div v-else>
-        <div class="syntax-guide-title w-[26.25rem]">
-          <div class="label text-[0.9375rem] font-bold">
+        <div class="w-105">
+          <div class="label text-sm font-bold">
             {{ t("metrics.syntaxGuide.sqlTitle") }}
           </div>
         </div>
         <div class="border-t my-1 border-dropdown-separator" />
         <div class="answers">
-          <div class="mb-[0.3125rem]">
-            <div class="text-xs ml-[0.3125rem]">
-              <ul class="px-[0.625rem] mt-[0.625rem] mb-0 text-[0.875rem] leading-[1.4375rem]">
+          <div class="mb-1.25">
+            <div class="text-xs ml-1.25">
+              <ul class="px-2.5 mt-2.5 mb-0 text-sm leading-[1.4375rem]">
                 <!-- As above: prose translated, SQL samples left literal. -->
                 <li>
                   {{ t("metrics.syntaxGuide.sqlFullText") }}
-                  <span class="bg-surface-subtle px-[0.3125rem] rounded-sm"
+                  <span class="bg-highlight-bg px-1.25 rounded-default"
                     >SELECT * FROM <b>stream</b> WHERE match_all('error')</span
                   >
                 </li>
                 <li>
                   {{ t("metrics.syntaxGuide.sqlColumn") }}
-                  <span class="bg-surface-subtle px-[0.3125rem] rounded-sm"
+                  <span class="bg-highlight-bg px-1.25 rounded-default"
                     >SELECT * FROM <b>stream</b> WHERE
                     str_match(<b>fieldname</b>, 'error')</span
                   >
                 </li>
                 <li>
                   {{ t("metrics.syntaxGuide.sqlCode") }}
-                  <span class="bg-surface-subtle px-[0.3125rem] rounded-sm"
+                  <span class="bg-highlight-bg px-1.25 rounded-default"
                     >SELECT * FROM <b>stream</b> WHERE code=200</span
                   >
                 </li>
                 <li>
                   {{ t("metrics.syntaxGuide.sqlStream") }}
-                  <span class="bg-surface-subtle px-[0.3125rem] rounded-sm"
+                  <span class="bg-highlight-bg px-1.25 rounded-default"
                     >SELECT * FROM <b>stream</b> WHERE stream='stderr'</span
                   >
                 </li>
@@ -117,7 +117,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   {{
                     t("metrics.syntaxGuide.sqlFunction", { fn: "extract_ip" })
                   }}
-                  <span class="bg-surface-subtle px-[0.3125rem] rounded-sm"
+                  <span class="bg-highlight-bg px-1.25 rounded-default"
                     >SELECT extract_ip(log) FROM <b>stream</b> WHERE
                     code=200</span
                   >
diff --git a/web/src/plugins/metrics/explorer/FunctionConfigDialog.vue b/web/src/plugins/metrics/explorer/FunctionConfigDialog.vue
index d3f7d5cbcc..6c9f5e85a7 100644
--- a/web/src/plugins/metrics/explorer/FunctionConfigDialog.vue
+++ b/web/src/plugins/metrics/explorer/FunctionConfigDialog.vue
@@ -79,11 +79,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <div
         v-for="variant in variants"
         :key="variant.id"
-        class="flex grow basis-[17.5rem] max-w-full min-w-0 cursor-pointer flex-col gap-1 rounded-md border p-2"
+        class="flex grow basis-[17.5rem] max-w-full min-w-0 cursor-pointer flex-col gap-1 rounded-default border p-2"
         :class="
           variant.id === selectedId
             ? 'border-primary-600 ring-1 ring-primary-600'
-            : 'border-border-default hover:border-border-strong'
+            : 'border-border-default hover:border-border-default'
         "
         :data-test="`metrics-fn-variant-${variant.id}`"
         @click="select(variant.id)"
@@ -96,14 +96,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         />
 
         <div
-          class="truncate font-mono text-[0.625rem] text-text-secondary"
+          class="truncate font-mono text-3xs text-text-secondary"
           :title="exprOf(variant)"
           :data-test="`metrics-fn-expr-${variant.id}`"
         >
           {{ exprOf(variant) }}
         </div>
 
-        <div class="relative h-[7.5rem]">
+        <div class="relative h-30">
           <div
             v-if="previewOf(variant).status === 'error'"
             class="flex h-full flex-col items-center justify-center gap-1 text-xs text-text-secondary"
@@ -132,15 +132,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
           <div
             v-else-if="previewOf(variant).status === 'done' && isEmpty(variant)"
-            class="flex h-full items-center justify-center rounded text-xs text-text-secondary"
+            class="flex h-full items-center justify-center rounded-default text-xs text-text-secondary"
             :data-test="`metrics-fn-nodata-${variant.id}`"
           >
             {{ t("metrics.explorer.noData") }}
           </div>
 
           <!-- @error: a conversion throw lands the tile in the SAME error state
-               a failed query does — without it the emit fell on the floor and
-               the tile was a blank region with no message. -->
+               a failed query does — without it the tile is a blank region with
+               no message. -->
           <MetricCardChart
             v-else-if="previewOf(variant).results.length"
             :results="previewOf(variant).results"
@@ -432,11 +432,8 @@ export default defineComponent({
     const isEmpty = (variant: any) => {
       const preview = previewOf(variant);
       if (preview.status !== "done") return false;
-      // The same reader the cards use. This was open-coded, which meant two
-      // answers to "what counts as empty" that would drift the first time one
-      // was amended — and the hand-rolled copy also unwrapped a `{data:{result}}`
-      // envelope that never reaches here (the chunk processor already returns
-      // `{resultType, result}`; if it did not, every CARD would report empty).
+      // The same reader the cards use, so "empty" means the same thing on a
+      // tile as on the card behind it.
       return !preview.results.some(hasSamples);
     };
 
@@ -477,10 +474,8 @@ export default defineComponent({
           [variant.id]: {
             status: "error",
             results: [],
-            // Through the same reader the cards use. Hand-picking fields off the
-            // payload put the backend's raw envelope ("Error during planning:
-            // ErrorCode# {…}") on a tile while the card behind it showed the
-            // sentence inside it ("Search query timed out") for the same failure.
+            // Through the same reader the cards use, so a tile shows the same
+            // message as the card behind it.
             error: parseSearchError(error).message,
           },
         };
diff --git a/web/src/plugins/metrics/explorer/LabelFilterBar.vue b/web/src/plugins/metrics/explorer/LabelFilterBar.vue
index 3afb6f10ab..335c3ba981 100644
--- a/web/src/plugins/metrics/explorer/LabelFilterBar.vue
+++ b/web/src/plugins/metrics/explorer/LabelFilterBar.vue
@@ -34,8 +34,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :key="labelFilterKey(filter)"
         type="fieldTag"
         value="primarysm"
-        shape="rounded"
-        class="max-w-[15.625rem]"
+        shape="rounded-default"
+        class="max-w-62.5"
       >
         <span class="font-mono text-xs truncate"
           >{{ filter.label }} {{ filter.operator || "=" }}
@@ -62,7 +62,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
            who wanted OR and now knows they did not get it. -->
       <span
         v-if="i > 0"
-        class="text-[0.625rem] uppercase tracking-wide text-text-secondary shrink-0 select-none"
+        class="text-3xs uppercase tracking-wide text-text-secondary shrink-0 select-none"
         :title="t('metrics.explorer.labels.andSeparatorTitle')"
         data-test="metrics-explorer-label-and"
         >{{ t("metrics.explorer.labels.andSeparator") }}</span
@@ -70,8 +70,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <OTag
         type="fieldTag"
         value="primarysm"
-        shape="rounded"
-        class="min-w-0 max-w-[15.625rem]"
+        shape="rounded-default"
+        class="min-w-0 max-w-62.5"
         :data-test="`metrics-explorer-label-chip-${filter.label}`"
       >
         <!-- The chip truncates its value; the tooltip is where the whole matcher
@@ -105,7 +105,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       type="countChip"
       value="neutral"
       size="sm"
-      shape="rounded"
+      shape="rounded-default"
       clickable
       class="shrink-0 h-7"
       role="button"
diff --git a/web/src/plugins/metrics/explorer/MetricCard.spec.ts b/web/src/plugins/metrics/explorer/MetricCard.spec.ts
index 139497b4ee..4e324e9dcd 100644
--- a/web/src/plugins/metrics/explorer/MetricCard.spec.ts
+++ b/web/src/plugins/metrics/explorer/MetricCard.spec.ts
@@ -527,7 +527,7 @@ describe("MetricCard (ported to @/lib)", () => {
       // Header bar (the dashboard panel bar's box — untinted, bordered),
       // footer, and the badge in the footer where it cannot truncate the name
       // it describes.
-      expect(wrapper.find(".min-h-7.border-b.border-border-subtle").exists()).toBe(
+      expect(wrapper.find(".min-h-7.border-b.border-border-default").exists()).toBe(
         true,
       );
       expect(
diff --git a/web/src/plugins/metrics/explorer/MetricCard.vue b/web/src/plugins/metrics/explorer/MetricCard.vue
index b72af3ebb3..e785b5f66e 100644
--- a/web/src/plugins/metrics/explorer/MetricCard.vue
+++ b/web/src/plugins/metrics/explorer/MetricCard.vue
@@ -17,7 +17,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div
     ref="root"
-    class="group relative flex flex-col h-full overflow-hidden border border-border-default rounded-md hover:border-primary focus-within:border-primary"
+    class="group relative flex flex-col h-full overflow-hidden border border-border-default rounded-default hover:border-primary focus-within:border-primary"
     role="group"
     :aria-label="
       t('metrics.explorer.card.ariaLabel', {
@@ -34,26 +34,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
          text stays selectable. Still fully keyboard reachable: the action bar
          reveals on `focus-within`, so tabbing lands on Refresh / Configure /
          Pin / Open. -->
-    <!-- EXACTLY the dashboard panel bar's box (PanelContainer's
+    <!-- Matches the dashboard panel bar's box (PanelContainer's
          dashboard-panel-bar): same min-height, padding and bottom border, no
-         tint — measured side by side, a card header and a panel header are now
-         indistinguishable.
-
-         Identical in both views: rows view is grid view with a single, wider
-         column, not a different card. -->
+         tint. -->
     <div
-      class="relative flex items-center gap-2 min-w-0 min-h-7 py-1 px-2 border-b border-border-subtle"
+      class="relative flex items-center gap-2 min-w-0 min-h-7 py-1 px-2 border-b border-border-default"
     >
       <!-- The name gets the full header width; the type badge sits in the
            footer, where it cannot truncate the name it describes. -->
       <div class="flex items-center gap-1.5 min-w-0">
-        <!-- EXACTLY the dashboard panel title's classes (PanelContainer's
-             dashboard-panel-header): same size, weight, tracking and token, so
-             a card's title and the panel it becomes read identically. Mono
-             semibold looked like a different COLOR at this size — denser
-             glyphs, same grey-900. -->
+        <!-- Matches the dashboard panel title's classes (PanelContainer's
+             dashboard-panel-header): same size, weight, tracking and token. -->
         <span
-          class="whitespace-nowrap overflow-hidden text-ellipsis text-[0.8125rem] font-medium text-(--color-text-primary) tracking-[0.02em]"
+          class="whitespace-nowrap overflow-hidden text-ellipsis text-compact font-medium text-text-heading tracking-[0.02em]"
           :title="card.name"
           >{{ card.name }}</span
         >
@@ -64,18 +57,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <div class="flex-1" />
 
       <!-- The action row: `size="icon"` buttons sitting adjacent (no gap).
-           Order (left→right): Help → Configure → Open → Pin → 🕑 clock → Refresh.
-           Secondary/info actions (Help, Config) group on the left; the primary
-           card actions (Open, Pin) in the middle; the freshness cluster (clock +
-           Refresh) sits rightmost, matching how the dashboard bar keeps refresh
-           and the last-refreshed stamp together at the edge. -->
+           Order (left→right): Help → Configure → Open → Pin → 🕑 clock → Refresh. -->
       <div class="flex flex-nowrap items-center shrink-0">
         <!-- Help — the SAME element the dashboard panel bar uses for its panel
              description (PanelContainer `dashboard-panel-description-info`): an
              info-outline icon with a width-capped, pre-wrapped OTooltip. NOT a
              dropdown item — a full help sentence in an unbounded menu item blew
-             the menu out to full-page width. This keeps the long text in a
-             bounded floating tooltip where it reads in full. -->
+             the menu out to full-page width. -->
         <OButton
           v-if="card.help"
           variant="ghost"
@@ -97,10 +85,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </OTooltip>
         </OButton>
 
-        <!-- Configure — visible icon button (only when the card is configurable).
-             Was in a ⋮ menu; promoted out because the menu was down to a single
-             item once refresh became a first-class button and help became an
-             info tooltip. -->
+        <!-- Configure — visible icon button (only when the card is configurable). -->
         <OButton
           v-if="card.configurable"
           variant="ghost"
@@ -115,17 +100,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <OTooltip :content="t('metrics.explorer.card.configureTooltip')" />
         </OButton>
 
-        <!-- The drill-in. Deliberately the ONLY thing that navigates; the chart
-             and card are not click targets, so the metric name stays selectable.
-             Kept as a discrete tinted icon (not buried in ⋮) — it is the primary
-             action on the card.
+        <!-- The drill-in. The ONLY thing that navigates; the chart and card are
+             not click targets, so the metric name stays selectable.
 
              `edit`, not `open-in-new`: this opens the metric in the in-page
              Visualize workspace to CHANGE it (query, chart type, functions), and
              open-in-new is the web's idiom for "leaves this page / new tab",
              which this does not do. -->
         <OButton
-          variant="ghost-primary"
+          variant="ghost"
           size="icon"
           icon-left="edit"
           :aria-label="t('metrics.explorer.card.openAria', { name: card.name })"
@@ -135,8 +118,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <OTooltip :content="t('metrics.explorer.card.openTooltip')" />
         </OButton>
 
-        <!-- Pin (star). Always visible — this is the affordance users could not
-             find when it was hover-gated. -->
+        <!-- Pin (star). Always visible. -->
         <OButton
           variant="ghost"
           size="icon"
@@ -221,7 +203,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
            editor icon still works, so the metric stays explorable. -->
       <div
         v-if="card.unsupported"
-        class="flex flex-col items-center justify-center gap-1.5 h-full text-[0.6875rem] opacity-65 text-text-secondary"
+        class="flex flex-col items-center justify-center gap-1.5 h-full text-2xs opacity-65 text-text-secondary"
         :data-test="`metrics-explorer-card-unsupported-${card.name}`"
       >
         <OIcon name="help-outline" size="sm" />
@@ -230,12 +212,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
       <!-- Understood, but the chosen variant is not something a card can draw —
            an info metric's label table renders through a component the card does
-           not use. Previously this was a silent no-preview, so the card sat on
-           the loading skeleton below forever and read as a chart that had failed
-           to load. The drill-in works: the editor renders the table properly. -->
+           not use. The drill-in works: the editor renders the table properly. -->
       <div
         v-else-if="preview?.status === 'unavailable'"
-        class="flex flex-col items-center justify-center gap-1.5 h-full text-[0.6875rem] opacity-65 text-text-secondary"
+        class="flex flex-col items-center justify-center gap-1.5 h-full text-2xs opacity-65 text-text-secondary"
         :data-test="`metrics-explorer-card-nopreview-${card.name}`"
       >
         <OIcon name="table-chart" size="sm" />
@@ -244,7 +224,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
       <div
         v-else-if="preview?.status === 'error'"
-        class="flex flex-col items-center justify-center gap-1.5 h-full text-[0.6875rem] opacity-65 text-text-secondary"
+        class="flex flex-col items-center justify-center gap-1.5 h-full text-2xs opacity-65 text-text-secondary"
         :data-test="`metrics-explorer-card-error-${card.name}`"
       >
         <!-- The backend's message is the only thing that distinguishes a
@@ -320,12 +300,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
       <!-- Has data, but `rate()` could not make a point out of it — fewer than two
            samples in its window. Deliberately NOT the "No data" tile: the metric
-           is populated, and saying otherwise is what used to hide it from the grid
-           entirely. The hint carries the actual remedy, which is the user's to
+           is populated. The hint carries the actual remedy, which is the user's to
            choose (a wider range, or a shorter scrape interval). -->
       <!-- The same inline OEmptyState a dashboard panel shows for no data
-           (PanelSchemaRenderer) — same component, same icon, same i18n key.
-           The old hatched grey band read as a different design language. -->
+           (PanelSchemaRenderer) — same component, same icon, same i18n key. -->
       <OEmptyState
         v-else-if="isSparse"
         size="inline"
@@ -358,12 +336,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       />
 
       <!-- The CONVERSION failed — the query succeeded, so the preview is
-           status "done" and none of the error branches above catch it. Without
-           this tile the emit fell on the floor and the card was a blank white
-           region with no message and no way out. -->
+           status "done" and none of the error branches above catch it. -->
       <div
         v-else-if="renderError"
-        class="flex flex-col items-center justify-center gap-1.5 h-full text-[0.6875rem] text-text-secondary"
+        class="flex flex-col items-center justify-center gap-1.5 h-full text-2xs text-text-secondary"
         :data-test="`metrics-explorer-card-render-error-${card.name}`"
       >
         <span class="inline-flex items-center gap-1 cursor-help">
@@ -454,7 +430,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     <!-- The footer pads itself now that the frame is flush, mirroring how the
          panel bar pads itself. -->
-    <div class="flex items-center justify-between gap-2 text-[0.625rem] px-2 py-1">
+    <div class="flex items-center justify-between gap-2 text-3xs px-2 py-1">
       <!-- The function actually in effect, so a ⚙ override is visible on the
            card rather than silently identical to the default. -->
       <span class="opacity-70 text-text-secondary truncate">{{
@@ -518,6 +494,7 @@ import {
 import { useI18n } from "vue-i18n";
 import { useStore } from "vuex";
 import { useRouter } from "vue-router";
+import useTheme from "@/composables/useTheme";
 import MetricCardChart from "./MetricCardChart.vue";
 
 // Async, exactly as PanelSchemaRenderer imports it: the menu is only ever
@@ -603,14 +580,11 @@ export default defineComponent({
     "toggle-favorite",
     "visible",
     "hidden",
-    // "refresh", not "retry". Both the header button and the no-data card's
+    // `refresh`, not `retry`: both the header button and the no-data card's
     // retry button emit `refresh` (the parent listens for `@refresh` and calls
-    // `grid.refreshCard`) — "retry" was declared here and emitted nowhere, while
-    // the event the component actually fires went undeclared. Undeclared emits
-    // fall through to $attrs and get bound to the root ELEMENT as a DOM
-    // listener, which is how a component ends up with a handler that silently
-    // never fires the day someone renames the event to something a DOM element
-    // also emits.
+    // `grid.refreshCard`). Declare it here — an undeclared emit falls through to
+    // $attrs and binds to the root ELEMENT as a DOM listener, so a handler can
+    // silently never fire when the event name matches a DOM event.
     "refresh",
     // A drag-select on the card's chart, as `{start, end}` epoch ms. Forwarded
     // straight from MetricCardChart — the card takes no action of its own,
@@ -623,7 +597,7 @@ export default defineComponent({
     const store = useStore();
     const router = useRouter();
     const root = ref<HTMLElement | null>(null);
-    const isDark = computed(() => store.state.theme === "dark");
+    const { isDark } = useTheme();
 
     /* ------------------------------------------------ create alert */
 
@@ -722,8 +696,7 @@ export default defineComponent({
      * asked for when they report the failure, so they go below the message
      * rather than into it. One preformatted string rather than a rich slot —
      * OTooltip renders its content in a portal that only mounts while open, so a
-     * slot's contents cannot be asserted in a test, and this must not regress
-     * quietly again.
+     * slot's contents cannot be asserted in a test.
      */
     const errorTooltip = computed(() => {
       const preview = props.preview;
diff --git a/web/src/plugins/metrics/explorer/MetricCardChart.vue b/web/src/plugins/metrics/explorer/MetricCardChart.vue
index d8489306e0..0ede006f78 100644
--- a/web/src/plugins/metrics/explorer/MetricCardChart.vue
+++ b/web/src/plugins/metrics/explorer/MetricCardChart.vue
@@ -78,10 +78,7 @@ export default defineComponent({
   },
   /**
    * `zoom` carries ECharts' `{start, end}` (epoch ms) from a drag-select on the
-   * chart. The converter already builds the dataZoom toolbox for any time-series
-   * panel and ChartRenderer already arms the drag cursor — the gesture was live
-   * on cards all along, it just had no listener, so a drag zoomed and then
-   * silently restored. Forwarding it is the whole fix.
+   * chart.
    *
    * Not emitted for the heatmap: its x-axis is categorical (one column per
    * bucket), so the converter withholds the toolbox there anyway.
@@ -103,9 +100,8 @@ export default defineComponent({
      *
      * The shared formatter applies no magnitude scaling to `numbers`/`custom`
      * units, so a rate of 0.004 c/s renders as a column of identical "0.00"
-     * ticks at the default 2 decimals. Scaling the precision to the series is a
-     * card-local presentation fix; giving those units real magnitude scaling
-     * (m/µ prefixes) is the proper fix and belongs in convertDataIntoUnitValue.
+     * ticks at the default 2 decimals. Scaling the precision to the series keeps
+     * the axis readable.
      */
     const adaptiveDecimals = () => {
       let max = 0;
@@ -169,18 +165,11 @@ export default defineComponent({
      *
      * `convertPromQLData` sets `xAxis.min`/`max` only while a panel is streaming;
      * a settled chart is left to ECharts, which scales the axis to the data it was
-     * given. On a dashboard that is close enough, because a panel-sized query
-     * comes back with points spread across the whole range. A card is not: a
-     * sparsely-scraped metric can come back with a handful of points, or ONE — and
-     * ECharts, asked to lay out a time axis around a single timestamp, invents a
-     * span of its own, which it rounds out to about two days. So a card whose
-     * picker said "Past 3 Hours" drew an axis two days wide, and the chart
-     * disagreed with the control that produced it.
-     *
-     * The window is the truth here and we already know it, so we state it rather
-     * than letting the axis be inferred from however much data happened to come
-     * back. Charts also stay comparable across the grid — every card spans the
-     * same window, so a spike at the same x is the same moment.
+     * given. A card with very few points (a sparsely-scraped metric can return
+     * ONE) makes ECharts invent a span of its own — widened out to about two days
+     * — so the axis disagrees with the picker. State the known window instead.
+     * This also keeps every card spanning the same window, so a spike at the same
+     * x is the same moment.
      *
      * Not applied to the heatmap: its x-axis is categorical (one column per
      * bucket), so a time min/max means nothing there.
@@ -248,9 +237,8 @@ export default defineComponent({
 
           if (props.chartType === "heatmap") {
             // Keep the colour bar — without it the cells are just colours with
-            // no scale, which is most of what made these charts unreadable. It
-            // was overlapping the plot only because it defaulted to a full-size
-            // legend; sized down and pinned under the axis, it fits.
+            // no scale. Sized down and pinned under the axis so it doesn't
+            // overlap the plot.
             if (options.visualMap) {
               options.visualMap = {
                 ...options.visualMap,
@@ -272,8 +260,7 @@ export default defineComponent({
             // Thin the bucket labels to what a card can actually render, but
             // ALWAYS keep the top row. A histogram's `+Inf` bucket is the one
             // that says "and everything slower than this", and ECharts'
-            // `hideOverlap` was dropping it — labelling all 19 rows instead just
-            // produces an illegible smear.
+            // `hideOverlap` would otherwise drop it.
             if (options.yAxis) {
               const rowCount = options.yAxis.data?.length ?? 0;
               const step = Math.max(1, Math.ceil(rowCount / 8));
@@ -284,9 +271,7 @@ export default defineComponent({
                 overflow: "truncate",
                 hideOverlap: false,
                 // Count DOWN from the top row, so `+Inf` is always labelled and
-                // the spacing stays even. Anchoring at the bottom and then
-                // force-adding the last index made the top two labels adjacent
-                // (5px apart on a card) — they collided and `+Inf` lost.
+                // the spacing stays even.
                 interval: (index: number) =>
                   (rowCount - 1 - index) % step === 0,
               };
@@ -337,11 +322,7 @@ export default defineComponent({
       resizeObserver = null;
     });
 
-    // Everything `render` reads. `unitCustom` / `bucketUnit` / `bucketUnitCustom`
-    // and `queries` were missing, so a card that switched between two variants
-    // sharing a chart type and a canonical unit — the unit is `custom` in both,
-    // only `unit_custom` differs ("c/s" vs "s/s") — kept formatting its cells with
-    // the superseded unit until something else forced a redraw.
+    // Everything `render` reads.
     watch(
       () => [
         props.results,
diff --git a/web/src/plugins/metrics/explorer/MetricsExplorer.spec.ts b/web/src/plugins/metrics/explorer/MetricsExplorer.spec.ts
index 307129129d..4b3d865837 100644
--- a/web/src/plugins/metrics/explorer/MetricsExplorer.spec.ts
+++ b/web/src/plugins/metrics/explorer/MetricsExplorer.spec.ts
@@ -148,7 +148,7 @@ const mountExplorer = (stubOverrides: Record<string, any> = {}) =>
   mount(MetricsExplorer, {
     global: {
       stubs: {
-        AppPageHeader: true,
+        OPageHeader: true,
         DateTimePickerDashboard: true,
         AutoRefreshInterval: true,
         MetricCard: true,
diff --git a/web/src/plugins/metrics/explorer/MetricsExplorer.vue b/web/src/plugins/metrics/explorer/MetricsExplorer.vue
index ed0663f5c8..9afac67715 100644
--- a/web/src/plugins/metrics/explorer/MetricsExplorer.vue
+++ b/web/src/plugins/metrics/explorer/MetricsExplorer.vue
@@ -23,27 +23,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
   <div class="flex flex-col h-full min-h-0 w-full" data-test="metrics-explorer">
-    <!-- No page title. Metrics is an EXPLORE surface, like Logs and Traces:
-         you arrive to look at data, so the data starts at the top of the frame.
-         An H1 saying "Metrics" above a nav item already saying "Metrics" bought
-         nothing and cost ~68px of chart. AppPageHeader stays where it earns its
-         keep — settings, billing, list and detail pages.
-
-         So the first row IS the toolbar, and it carries both clusters the way
-         the Logs toolbar does: scope on the left (what you are looking at),
-         time on the right (which window, and how often it reloads). -->
-    <!-- items-center: every control on this row (mode toggle, filter label +
-         button, time picker, refresh) sits on one centred line. LabelFilterBar
-         wraps its OWN chips internally (flex-wrap), so the row does not need
-         items-start to let chips grow — that only left the controls top-aligned
-         and visibly out of line with each other. -->
-    <!-- `p-[0.375rem]`, the SAME padding the Logs and Traces toolbars use
-         (SearchBar.vue:23 / traces SearchBar.vue:19). It was `px-4 py-2`, which
-         put the mode toggle 10px further right than the Logs one — switching
-         Logs -> Metrics visibly jumped the control that is in the same place on
-         both pages. The toolbars are the same object; they must share geometry. -->
+    <!-- No page title: Metrics is an EXPLORE surface like Logs and Traces, so the
+         first row is the toolbar — scope on the left, time on the right, like the
+         Logs toolbar. -->
+    <!-- items-center: LabelFilterBar wraps its own chips internally (flex-wrap),
+         so the row keeps every control on one centred line rather than items-start. -->
+    <!-- `p-1.5`, the SAME padding the Logs and Traces toolbars use
+         (SearchBar.vue:23 / traces SearchBar.vue:19), so the toolbars share geometry. -->
     <div
-      class="flex items-center gap-2 shrink-0 p-[0.375rem] border-b border-border-default"
+      class="flex items-center gap-2 shrink-0 p-1.5 border-b border-border-default"
       data-test="metrics-explorer-filter-bar"
     >
       <!-- Page mode toggle at the start of the toolbar — Explore (browse grid)
@@ -85,14 +73,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           size="sm"
           data-test="metrics-explorer-mode-workspace"
         >
-          <!-- The SAME ♥ the card's button carries: the icon the user clicks to
-               fill this tab is the icon that names it. `workspaces` was left over
-               from when this was called Scratchpad.
-
-               `favorite-border` (outline), not the filled `favorite`: a filled
-               heart is the card's ON state — on a tab it reads as "already
-               favourited" rather than "your favourites live here". The tab names
-               a place; it is not itself a toggle. -->
+          <!-- `favorite-border` (outline), not the filled `favorite`: a filled
+               heart is the card's ON state and on a tab would read as "already
+               favourited" rather than "your favourites live here". -->
           <template #icon-left>
             <OIcon name="favorite-border" size="sm" class="shrink-0" />
           </template>
@@ -140,27 +123,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </div>
 
     <!--
-      The filter row.
+      The filter row. Its own line, not a slot in the toolbar: a matcher's width
+      is unbounded (a regex value, any number of them), so it needs the full width.
 
-      Its own line, not a slot in the toolbar: filters are the one control here
-      whose width is UNBOUNDED (a matcher is `label=value`, the value can be a
-      regex, and there can be any number of them), and sharing a line with the
-      fixed-width mode toggle and time cluster meant they were permanently
-      squeezed. Given the full width, the chips simply fit.
-
-      ALWAYS present in grid mode, never `v-if="labelFilters.length"`. A row that
-      appears with the first filter would push the whole grid down at the exact
-      moment the user is reading it — the same shift we removed from the facet
-      panel's Clear control. The picker is the row's resting state, so the height
-      is identical at zero filters and at ten.
+      ALWAYS present in grid mode, never `v-if="labelFilters.length"` — a row that
+      appeared with the first filter would push the grid down as the user reads it.
 
       Explore + Workspace only: in Visualize the PromQL query carries its own
-      matchers, so a filter bar would be a second, conflicting way to say the
-      same thing — the same split Logs' visualize uses.
+      matchers, so a filter bar would conflict with it.
     -->
     <div
       v-if="isGridMode"
-      class="flex items-center gap-2 shrink-0 p-[0.375rem] border-b border-border-default"
+      class="flex items-center gap-2 shrink-0 p-1.5 border-b border-border-default"
       data-test="metrics-explorer-filter-row"
     >
       <!-- No "Filters" caption: the chips already read `action = accept_challenge`
@@ -219,7 +193,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <span class="flex items-center gap-1">
                 <span>{{ rail.label }}</span>
                 <span
-                  class="w-4 shrink-0 text-right text-[0.6875rem] font-semibold tabular-nums text-primary"
+                  class="w-4 shrink-0 text-right text-2xs font-semibold tabular-nums text-primary"
                   :data-test="`metrics-explorer-rail-count-${rail.id}`"
                   >{{ rail.count || "" }}</span
                 >
@@ -254,12 +228,26 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
         <div
           v-else-if="grid.activeRail.value === 'type'"
-          class="flex flex-col min-h-0"
+          class="flex flex-col min-h-0 flex-1 py-2"
         >
-          <!-- Type has no facet search, but carries the SAME always-present
-               "Clear filters" row so the affordance is consistent across all
-               three facets. Count + button always shown; button disabled when
-               nothing is selected — no disappearing controls, no shift. -->
+          <!-- Type search — narrows the type LIST (mirrors the prefix/suffix
+               rails). The flex-1/py-2 above match the PrefixFilterPanel wrapper
+               (class="flex-1 min-h-0 py-2") so the search box sits at the exact
+               same Y when switching Prefix / Suffix / Type. px-2 matches the
+               facet toggle's horizontal padding above. -->
+          <div class="px-2 pb-2">
+            <OInput
+              v-model="typeSearch"
+              size="sm"
+              clearable
+              :placeholder="t('metrics.explorer.facets.searchTypes')"
+              :aria-label="t('metrics.explorer.facets.searchTypesAria')"
+              data-test="metrics-explorer-type-search"
+            />
+          </div>
+          <!-- Always-present "Clear filters" row so the affordance is consistent
+               across all three facets. Count + button always shown; button
+               disabled when nothing is selected — no disappearing controls. -->
           <div
             class="flex items-center justify-between gap-2 px-3 pb-2"
           >
@@ -281,12 +269,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                composable / URL state — the array<->Set conversion is confined to
                this one binding (`selectedTypesArray`). -->
           <OCheckboxGroup
+            v-if="visibleTypeFacets.length"
             :model-value="selectedTypesArray"
             class="px-3 pb-2 overflow-y-auto"
             @update:model-value="onSelectedTypesChange"
           >
             <OCheckbox
-              v-for="facet in grid.typeFacets.value"
+              v-for="facet in visibleTypeFacets"
               :key="facet.id"
               size="xs"
               :value="facet.id"
@@ -294,6 +283,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :data-test="`metrics-explorer-type-${facet.id}`"
             />
           </OCheckboxGroup>
+          <OEmptyState
+            v-else
+            size="inline"
+            icon="search-off"
+            :title="t('metrics.explorer.facets.noTypeMatch')"
+            data-test="metrics-explorer-type-empty"
+          />
         </div>
       </aside>
 
@@ -386,11 +382,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             />
           </OToggleGroup>
 
-          <!-- Convert to dashboard — the bridge from ephemeral Favourites to a
-               durable Dashboard: each favourite becomes a panel. FAVOURITES only,
-               where they are what's on screen, so "convert what I'm looking at"
-               is unambiguous. This is why Favourites needs no save of its own —
-               you promote it to a real Dashboard instead. -->
+          <!-- Convert to dashboard: each favourite becomes a panel. FAVOURITES
+               only, where they are what's on screen. -->
           <OButton
             v-if="isWorkspace && grid.favorites.value.length"
             variant="outline"
@@ -585,6 +578,7 @@ import {
 import { useI18n } from "vue-i18n";
 import { useRoute, useRouter } from "vue-router";
 import { useStore } from "vuex";
+import useTheme from "@/composables/useTheme";
 import { useVirtualizer } from "@tanstack/vue-virtual";
 import { isEqual, debounce } from "lodash-es";
 
@@ -594,6 +588,7 @@ import OButton from "@/lib/core/Button/OButton.vue";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import OCheckbox from "@/lib/forms/Checkbox/OCheckbox.vue";
 import OCheckboxGroup from "@/lib/forms/Checkbox/OCheckboxGroup.vue";
+import OInput from "@/lib/forms/Input/OInput.vue";
 import OSearchInput from "@/lib/forms/SearchInput/OSearchInput.vue";
 import OSpinner from "@/lib/feedback/Spinner/OSpinner.vue";
 import OEmptyState from "@/lib/core/EmptyState/OEmptyState.vue";
@@ -653,10 +648,7 @@ const ROW_GAP = 12;
 const CARD_HEIGHT = 224;
 /**
  * Card height + the gap. The row box is sized to exactly this.
- *
- * The same in both views: rows view used to squeeze the card into 76px, which
- * left the chart a 56px strip — too short to read, which defeats the point of
- * the wider layout. One constant rather than two, so they cannot drift.
+ * The same in both views (one constant rather than two, so they cannot drift).
  */
 const ROW_HEIGHT = CARD_HEIGHT + ROW_GAP;
 
@@ -669,6 +661,7 @@ export default defineComponent({
     OIcon,
     OCheckbox,
     OCheckboxGroup,
+    OInput,
     OSearchInput,
     OSpinner,
     OEmptyState,
@@ -703,7 +696,7 @@ export default defineComponent({
     });
     const selectedDate = ref<any>(defaultSelectedDate());
 
-    const isDark = computed(() => store.state.theme === "dark");
+    const { isDark } = useTheme();
     const isGrid = computed(() => grid.viewMode.value === "grid");
     // The rendered slice. Colour index is a card's position here, which is a
     // prefix of the full sorted set, so colours stay stable as pages are added.
@@ -736,9 +729,6 @@ export default defineComponent({
 
     /* ---------------------------------------------------------- toolbar */
 
-    // No "Recent". It ranked by what you had opened, which in practice is a
-    // handful of metrics out of thousands — so the option mostly reordered
-    // nothing, and it made the sort control a three-way choice to say it.
     const sortOptions = computed(() => [
       { value: "a-z", label: t("metrics.explorer.sortAsc") },
       { value: "z-a", label: t("metrics.explorer.sortDesc") },
@@ -1072,6 +1062,17 @@ export default defineComponent({
       trackFilter("type");
     };
 
+    // Type-rail search — narrows the type LIST (mirrors the prefix/suffix rails).
+    // Matches against the human label (BADGE_LABELS), falling back to the id.
+    const typeSearch = ref("");
+    const visibleTypeFacets = computed(() => {
+      const term = typeSearch.value.trim().toLowerCase();
+      if (!term) return grid.typeFacets.value;
+      return grid.typeFacets.value.filter((facet: { id: string }) =>
+        (BADGE_LABELS[facet.id] ?? facet.id).toLowerCase().includes(term),
+      );
+    });
+
     const onPrefixChange = (next: Set<string>) => {
       grid.selectedPrefixes.value = next;
       trackFilter("prefix");
@@ -1637,9 +1638,7 @@ export default defineComponent({
           // it was hidden can never come back otherwise (hidden ⇒ not rendered ⇒
           // not queried ⇒ still hidden). The sweep re-queries them WHERE THEY ARE,
           // still hidden, and they return to the grid only if they now have
-          // samples. Un-hiding them first (which is what this used to do) put
-          // every no-data card back on screen and left the ones nobody scrolled
-          // to sitting there.
+          // samples.
           //
           // An auto-refresh tick sweeps too, but without `skipCache` — it picks
           // up cards the user has not reached yet and leaves the known-empty ones
@@ -1765,6 +1764,8 @@ export default defineComponent({
       onClearAllFilters,
       selectedTypesArray,
       onSelectedTypesChange,
+      typeSearch,
+      visibleTypeFacets,
       onPrefixChange,
       onSuffixChange,
       onAddLabelFilter,
diff --git a/web/src/plugins/metrics/explorer/PrefixFilterPanel.vue b/web/src/plugins/metrics/explorer/PrefixFilterPanel.vue
index 3efe9cb730..26833cc170 100644
--- a/web/src/plugins/metrics/explorer/PrefixFilterPanel.vue
+++ b/web/src/plugins/metrics/explorer/PrefixFilterPanel.vue
@@ -66,7 +66,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <div
         v-for="facet in visibleFacets"
         :key="facet.id"
-        class="flex items-center justify-between gap-2 px-2 py-1 rounded hover:bg-surface-subtle"
+        class="flex items-center justify-between gap-2 px-2 py-1 rounded-default hover:bg-surface-subtle"
         :class="{ 'bg-surface-subtle': selected.has(facet.id) }"
       >
         <OCheckbox
@@ -94,19 +94,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           type="countChip"
           value="neutral"
           size="xs"
-          shape="rounded"
+          shape="rounded-default"
           :data-test="`metrics-explorer-${mode}-count-${facet.id}`"
           >{{ facet.count }}</OTag
         >
       </div>
 
-      <div
+      <OEmptyState
         v-if="!visibleFacets.length"
-        class="px-2 py-3 text-xs text-text-secondary"
+        size="inline"
+        icon="search-off"
+        :title="emptyLabel"
         :data-test="`metrics-explorer-${mode}-empty`"
-      >
-        {{ emptyLabel }}
-      </div>
+      />
     </div>
   </div>
 </template>
@@ -118,6 +118,7 @@ import OCheckbox from "@/lib/forms/Checkbox/OCheckbox.vue";
 import OInput from "@/lib/forms/Input/OInput.vue";
 import OButton from "@/lib/core/Button/OButton.vue";
 import OTag from "@/lib/core/Badge/OTag.vue";
+import OEmptyState from "@/lib/core/EmptyState/OEmptyState.vue";
 
 /** A rail facet. Counts are recomputed by the caller against the OTHER active
  *  filters, so this component only ever renders them. */
diff --git a/web/src/plugins/pipelines/CustomEdge.vue b/web/src/plugins/pipelines/CustomEdge.vue
index 0f740c867f..48b4471035 100644
--- a/web/src/plugins/pipelines/CustomEdge.vue
+++ b/web/src/plugins/pipelines/CustomEdge.vue
@@ -7,7 +7,7 @@
     type="smoothstep"
   />
   <EdgeLabelRenderer>
-    <!-- Delete button removed - use keyboard delete instead -->
+    <!-- Edge deletion handled via keyboard delete -->
   </EdgeLabelRenderer>
 </template>
 
@@ -70,9 +70,6 @@ const { removeEdges, getSelectedEdges, addSelectedEdges, removeSelectedEdges } =
 const path = computed(() => getBezierPath(props))
 
 let clickTimeout = null
-
-// Edge click handling moved to PipelineFlow.vue using VueFlow events
-// These handlers are no longer used but kept for backwards compatibility
 </script>
 
 <script>
diff --git a/web/src/plugins/pipelines/CustomNode.spec.ts b/web/src/plugins/pipelines/CustomNode.spec.ts
index 5a1cb39dbb..ee0ced5a9c 100644
--- a/web/src/plugins/pipelines/CustomNode.spec.ts
+++ b/web/src/plugins/pipelines/CustomNode.spec.ts
@@ -627,12 +627,12 @@ describe("CustomNode.vue", () => {
           },
         },
       });
-      expect(wrapper.find(".error-badge").exists()).toBe(true);
+      expect(wrapper.find('[data-test="pipeline-node-error-badge"]').exists()).toBe(true);
     });
 
     it("does NOT render error badge when hasNodeError is false", () => {
       wrapper = createWrapper();
-      expect(wrapper.find(".error-badge").exists()).toBe(false);
+      expect(wrapper.find('[data-test="pipeline-node-error-badge"]').exists()).toBe(false);
     });
   });
 
diff --git a/web/src/plugins/pipelines/CustomNode.vue b/web/src/plugins/pipelines/CustomNode.vue
index 05113394dd..3031ff4998 100644
--- a/web/src/plugins/pipelines/CustomNode.vue
+++ b/web/src/plugins/pipelines/CustomNode.vue
@@ -95,12 +95,21 @@ const getNodeErrorInfo = computed(() => {
   return null;
 });
 
-// Edge color mapping for different node types
+// Edge color mapping for different node types.
+//
+// TODO(design-tokens): these are the same three node-TYPE roles the handle CSS
+// below now takes from --color-status-{info,positive,warning} — but they CANNOT
+// be CSS custom-property references here. vue-flow builds its arrowhead marker
+// id from this value (getMarkerId → `color=<value>&type=…`) and then references
+// it as `url(#<id>)`; a custom-property reference puts parentheses inside that
+// url(), which terminates it early and breaks the arrowhead. Resolving the token
+// to a literal (getComputedStyle on :root) at call time is the fix, and would
+// also give these edges the dark-mode step they currently lack.
 const getNodeColor = (ioType) => {
   const colorMap = {
-    input: "#3b82f6", // Blue
-    output: "#22c55e", // Green
-    default: "#f59e0b", // Orange/Amber
+    input: "#3b82f6", // Blue    — pairs with --color-status-info-text
+    output: "#22c55e", // Green   — pairs with --color-status-positive
+    default: "#f59e0b", // Amber   — pairs with --color-status-warning-text
   };
   return colorMap[ioType] || "#6b7280";
 };
@@ -487,17 +496,9 @@ function getIcon(data, ioType) {
 
     <div
       v-if="data.node_type == 'function'"
-      class="p-0 btn-fixed-width"
       :data-test="`pipeline-node-${io_type}-function-node`"
       data-node-type="function"
-      style="
-        padding: 5px 0px;
-        width: fit-content;
-        display: flex;
-        align-items: center;
-        border: none;
-        cursor: pointer;
-      "
+      class="btn-fixed-width py-1.25 px-0 w-fit flex items-center border-none cursor-pointer"
       @mouseenter="handleNodeHover(id, io_type)"
       @mouseleave="handleNodeLeave(id)"
       @click="editNode(id)"
@@ -515,16 +516,10 @@ function getIcon(data, ioType) {
       <OSeparator vertical class="mr-2" />
 
       <!-- Label -->
-      <div class="o2-scroll-container">
+      <div class="o2-scroll-container overflow-auto rounded-default">
         <div
-          class="flex text-[15px]! font-bold! leading-[1.4]!"
+          class="flex text-sm! font-bold! leading-[1.4]! text-left text-wrap w-auto text-ellipsis"
           align="left"
-          style="
-            text-align: left;
-            text-wrap: wrap;
-            width: auto;
-            text-overflow: ellipsis;
-          "
         >
           {{ data.name }} -
           <strong>{{ data.after_flatten ? "[RAF]" : "[RBF]" }}</strong>
@@ -535,7 +530,7 @@ function getIcon(data, ioType) {
       <div
         v-if="hasNodeError"
         data-test="pipeline-node-error-badge"
-        class="absolute top-[-12px] right-[-12px] w-[20px] h-[20px] bg-[#ef4444] border-2 border-white rounded-full flex items-center justify-center cursor-pointer z-[15] shadow-[0_2px_6px_rgba(239,68,68,0.5)] transition-all duration-200 error-badge"
+        class="absolute -top-3 -right-3 w-5 h-5 bg-status-negative border-2 border-white rounded-full flex items-center justify-center cursor-pointer z-[15] shadow-[0_0.125rem_0.375rem_color-mix(in_srgb,var(--color-error-500)_50%,transparent)] transition-all duration-200 hover:scale-120 hover:shadow-[0_0.1875rem_0.625rem_color-mix(in_srgb,var(--color-error-500)_70%,transparent)] hover:z-20"
         @click.stop="navigateToFunction(data.name)"
       >
         <OIcon name="error" size="sm" />
@@ -545,7 +540,7 @@ function getIcon(data, ioType) {
             pipelineObj.currentSelectedPipeline?.last_error?.node_errors?.[id]
               ?.error_count
           "
-          class="absolute top-[-6px] right-[-6px] bg-[#dc2626] text-white text-[9px] font-bold min-w-[14px] h-[14px] rounded-[7px] flex items-center justify-center px-[3px] border-[1.5px] border-solid border-white shadow-[0_1px_3px_rgba(0,0,0,0.4)]"
+          class="absolute -top-1.5 -right-1.5 bg-status-negative text-button-destructive-foreground text-3xs font-bold min-w-3.5 h-3.5 rounded-full flex items-center justify-center px-0.75 border-[1.5px] border-solid border-white shadow-[0_1px_0.1875rem_color-mix(in_srgb,var(--color-black)_40%,transparent)]"
         >
           {{
             pipelineObj.currentSelectedPipeline.last_error.node_errors[id]
@@ -554,7 +549,7 @@ function getIcon(data, ioType) {
         </span>
         <OTooltip side="top" align="center" :sideOffset="10" max-width="600px">
           <template #content>
-            <div style="max-height: 300px; overflow-y: auto">
+            <div class="max-h-75 overflow-y-auto">
               {{ getNodeErrorInfo || "Error occurred" }}
             </div>
           </template>
@@ -563,7 +558,7 @@ function getIcon(data, ioType) {
 
       <div
         v-show="showButtons"
-        class="absolute top-[-30px] right-0 flex gap-[6px] transition-all duration-300 z-10 pt-[5px] px-[5px] pb-[10px] node-action-buttons"
+        class="absolute -top-7.5 right-0 flex gap-1.5 transition-all duration-300 z-10 pt-1.25 px-1.25 pb-2.5 node-action-buttons"
         :data-test="`pipeline-node-${io_type}-actions`"
         :style="{ '--node-color': getNodeColor(io_type) }"
         @mouseenter="handleActionButtonsEnter"
@@ -573,7 +568,7 @@ function getIcon(data, ioType) {
           variant="ghost"
           size="icon"
           @click.stop="deleteNode(id)"
-          class="min-w-[20px]! w-[20px]! h-[20px]! p-0! rounded! bg-[rgba(255,255,255,0.95)]! border! border-(--node-color)! text-(--node-color)! transition-all! duration-200! node-action-btn delete-btn"
+          class="min-w-5! w-5! h-5! p-0! rounded-default! bg-[color-mix(in_srgb,var(--color-white)_95%,transparent)]! border! border-(--node-color)! text-(--node-color)! transition-all! duration-200! hover:bg-error-500! hover:border-error-500! hover:text-white! hover:scale-110! hover:shadow-[0_0.125rem_0.5rem_color-mix(in_srgb,var(--color-error-500)_30%,transparent)]!"
           :data-test="`pipeline-node-${io_type}-delete-btn`"
           @mouseenter="handleDeleteTooltipEnter"
           @mouseleave="handleDeleteTooltipLeave"
@@ -582,28 +577,19 @@ function getIcon(data, ioType) {
         </OButton>
         <div
           v-if="showDeleteTooltip"
-          class="fixed bg-[#dc2626] text-white py-[6px] px-[10px] rounded-md text-[11px] z-[1000] shadow-[0_4px_12px_rgba(0,0,0,0.3)] pointer-events-none whitespace-nowrap"
-          style="left: 15px"
+          class="fixed left-3.75 bg-status-negative text-button-destructive-foreground py-1.5 px-2.5 rounded-default text-2xs z-[1000] shadow-[0_0.25rem_0.75rem_color-mix(in_srgb,var(--color-black)_30%,transparent)] pointer-events-none whitespace-nowrap"
         >
           Delete Node
-          <div class="absolute top-full left-1/2 -translate-x-1/2 w-0 h-0 border-l-[5px] border-l-transparent border-r-[5px] border-r-transparent border-t-[5px] [border-top-color:#dc2626]"></div>
+          <div class="absolute top-full left-1/2 -translate-x-1/2 w-0 h-0 border-l-[5px] border-l-transparent border-r-[5px] border-r-transparent border-t-[5px] border-t-status-negative"></div>
         </div>
       </div>
     </div>
 
     <div
       v-if="data.node_type == 'stream'"
-      class="p-0 btn-fixed-width"
       :data-test="`pipeline-node-${io_type}-stream-node`"
       data-node-type="stream"
-      style="
-        width: fit-content;
-        display: flex;
-        align-items: center;
-        border: none;
-        cursor: pointer;
-        padding: 5px 0px;
-      "
+      class="btn-fixed-width py-1.25 px-0 w-fit flex items-center border-none cursor-pointer"
       @mouseenter="handleNodeHover(id, io_type)"
       @mouseleave="handleNodeLeave(id)"
       @click="editNode(id)"
@@ -621,35 +607,23 @@ function getIcon(data, ioType) {
       <OSeparator vertical class="mr-2" />
 
       <!-- Label -->
-      <div class="o2-scroll-container">
+      <div class="o2-scroll-container overflow-auto rounded-default">
         <div
           v-if="data.stream_name && data.stream_name.hasOwnProperty('label')"
-          class="flex text-[15px]! font-bold! leading-[1.4]!"
-          style="
-            text-align: left;
-            text-wrap: wrap;
-            width: auto;
-            text-overflow: ellipsis;
-          "
+          class="flex text-sm! font-bold! leading-[1.4]! text-left text-wrap w-auto text-ellipsis"
         >
           {{ data.stream_type }} - {{ data.stream_name.label }}
         </div>
         <div
           v-else
-          class="flex text-[15px]! font-bold! leading-[1.4]!"
-          style="
-            text-align: left;
-            text-wrap: wrap;
-            width: auto;
-            text-overflow: ellipsis;
-          "
+          class="flex text-sm! font-bold! leading-[1.4]! text-left text-wrap w-auto text-ellipsis"
         >
           {{ data.stream_type }} - {{ data.stream_name }}
         </div>
       </div>
       <div
         v-show="showButtons"
-        class="absolute top-[-30px] right-0 flex gap-[6px] transition-all duration-300 z-10 pt-[5px] px-[5px] pb-[10px] node-action-buttons"
+        class="absolute -top-7.5 right-0 flex gap-1.5 transition-all duration-300 z-10 pt-1.25 px-1.25 pb-2.5 node-action-buttons"
         :data-test="`pipeline-node-${io_type}-actions`"
         :style="{ '--node-color': getNodeColor(io_type) }"
         @mouseenter="handleActionButtonsEnter"
@@ -659,7 +633,7 @@ function getIcon(data, ioType) {
           variant="ghost"
           size="icon"
           @click.stop="deleteNode(id)"
-          class="min-w-[20px]! w-[20px]! h-[20px]! p-0! rounded! bg-[rgba(255,255,255,0.95)]! border! border-(--node-color)! text-(--node-color)! transition-all! duration-200! node-action-btn delete-btn"
+          class="min-w-5! w-5! h-5! p-0! rounded-default! bg-[color-mix(in_srgb,var(--color-white)_95%,transparent)]! border! border-(--node-color)! text-(--node-color)! transition-all! duration-200! hover:bg-error-500! hover:border-error-500! hover:text-white! hover:scale-110! hover:shadow-[0_0.125rem_0.5rem_color-mix(in_srgb,var(--color-error-500)_30%,transparent)]!"
           :data-test="`pipeline-node-${io_type}-delete-btn`"
           @mouseenter="handleDeleteTooltipEnter"
           @mouseleave="handleDeleteTooltipLeave"
@@ -668,27 +642,18 @@ function getIcon(data, ioType) {
         </OButton>
         <div
           v-if="showDeleteTooltip"
-          class="fixed bg-[#dc2626] text-white py-[6px] px-[10px] rounded-md text-[11px] z-[1000] shadow-[0_4px_12px_rgba(0,0,0,0.3)] pointer-events-none whitespace-nowrap"
-          style="left: 15px"
+          class="fixed left-3.75 bg-status-negative text-button-destructive-foreground py-1.5 px-2.5 rounded-default text-2xs z-[1000] shadow-[0_0.25rem_0.75rem_color-mix(in_srgb,var(--color-black)_30%,transparent)] pointer-events-none whitespace-nowrap"
         >
           Delete Node
-          <div class="absolute top-full left-1/2 -translate-x-1/2 w-0 h-0 border-l-[5px] border-l-transparent border-r-[5px] border-r-transparent border-t-[5px] [border-top-color:#dc2626]"></div>
+          <div class="absolute top-full left-1/2 -translate-x-1/2 w-0 h-0 border-l-[5px] border-l-transparent border-r-[5px] border-r-transparent border-t-[5px] border-t-status-negative"></div>
         </div>
       </div>
     </div>
     <div
       v-if="data.node_type == 'remote_stream'"
-      class="p-0 btn-fixed-width"
       :data-test="`pipeline-node-${io_type}-remote-stream-node`"
       data-node-type="remote_stream"
-      style="
-        width: fit-content;
-        display: flex;
-        align-items: center;
-        border: none;
-        cursor: pointer;
-        padding: 5px 0px;
-      "
+      class="btn-fixed-width py-1.25 px-0 w-fit flex items-center border-none cursor-pointer"
       @mouseenter="handleNodeHover(id, io_type)"
       @mouseleave="handleNodeLeave(id)"
       @click="editNode(id)"
@@ -706,22 +671,16 @@ function getIcon(data, ioType) {
       <OSeparator vertical class="mr-2" />
 
       <!-- Label -->
-      <div class="o2-scroll-container">
+      <div class="o2-scroll-container overflow-auto rounded-default">
         <div
-          class="flex text-[15px]! font-bold! leading-[1.4]!"
-          style="
-            text-align: left;
-            text-wrap: wrap;
-            width: auto;
-            text-overflow: ellipsis;
-          "
+          class="flex text-sm! font-bold! leading-[1.4]! text-left text-wrap w-auto text-ellipsis"
         >
           {{ data.destination_name }}
         </div>
       </div>
       <div
         v-show="showButtons"
-        class="absolute top-[-30px] right-0 flex gap-[6px] transition-all duration-300 z-10 pt-[5px] px-[5px] pb-[10px] node-action-buttons"
+        class="absolute -top-7.5 right-0 flex gap-1.5 transition-all duration-300 z-10 pt-1.25 px-1.25 pb-2.5 node-action-buttons"
         :data-test="`pipeline-node-${io_type}-actions`"
         :style="{ '--node-color': getNodeColor(io_type) }"
         @mouseenter="handleActionButtonsEnter"
@@ -731,7 +690,7 @@ function getIcon(data, ioType) {
           variant="ghost"
           size="icon"
           @click.stop="deleteNode(id)"
-          class="min-w-[20px]! w-[20px]! h-[20px]! p-0! rounded! bg-[rgba(255,255,255,0.95)]! border! border-(--node-color)! text-(--node-color)! transition-all! duration-200! node-action-btn delete-btn"
+          class="min-w-5! w-5! h-5! p-0! rounded-default! bg-[color-mix(in_srgb,var(--color-white)_95%,transparent)]! border! border-(--node-color)! text-(--node-color)! transition-all! duration-200! hover:bg-error-500! hover:border-error-500! hover:text-white! hover:scale-110! hover:shadow-[0_0.125rem_0.5rem_color-mix(in_srgb,var(--color-error-500)_30%,transparent)]!"
           :data-test="`pipeline-node-${io_type}-delete-btn`"
           @mouseenter="handleDeleteTooltipEnter"
           @mouseleave="handleDeleteTooltipLeave"
@@ -740,28 +699,19 @@ function getIcon(data, ioType) {
         </OButton>
         <div
           v-if="showDeleteTooltip"
-          class="fixed bg-[#dc2626] text-white py-[6px] px-[10px] rounded-md text-[11px] z-[1000] shadow-[0_4px_12px_rgba(0,0,0,0.3)] pointer-events-none whitespace-nowrap"
-          style="left: 15px"
+          class="fixed left-3.75 bg-status-negative text-button-destructive-foreground py-1.5 px-2.5 rounded-default text-2xs z-[1000] shadow-[0_0.25rem_0.75rem_color-mix(in_srgb,var(--color-black)_30%,transparent)] pointer-events-none whitespace-nowrap"
         >
           Delete Node
-          <div class="absolute top-full left-1/2 -translate-x-1/2 w-0 h-0 border-l-[5px] border-l-transparent border-r-[5px] border-r-transparent border-t-[5px] [border-top-color:#dc2626]"></div>
+          <div class="absolute top-full left-1/2 -translate-x-1/2 w-0 h-0 border-l-[5px] border-l-transparent border-r-[5px] border-r-transparent border-t-[5px] border-t-status-negative"></div>
         </div>
       </div>
     </div>
 
     <div
       v-if="data.node_type == 'query'"
-      class="p-0 btn-fixed-width"
       :data-test="`pipeline-node-${io_type}-query-node`"
       data-node-type="query"
-      style="
-        width: fit-content;
-        display: flex;
-        align-items: center;
-        border: none;
-        cursor: pointer;
-        padding: 5px 0px;
-      "
+      class="btn-fixed-width py-1.25 px-0 w-fit flex items-center border-none cursor-pointer"
       @mouseenter="handleNodeHover(id, io_type)"
       @mouseleave="handleNodeLeave(id)"
       @click="editNode(id)"
@@ -779,15 +729,9 @@ function getIcon(data, ioType) {
       <OSeparator vertical class="mr-2" />
 
       <!-- Label -->
-      <div class="o2-scroll-container">
+      <div class="o2-scroll-container overflow-auto rounded-default">
         <div
-          class="flex text-[15px]! font-bold! leading-[1.4]!"
-          style="
-            text-align: left;
-            text-wrap: wrap;
-            width: auto;
-            text-overflow: ellipsis;
-          "
+          class="flex text-sm! font-bold! leading-[1.4]! text-left text-wrap w-auto text-ellipsis"
         >
           {{ data.stream_type }} - {{ data.stream_name }}
         </div>
@@ -795,7 +739,7 @@ function getIcon(data, ioType) {
 
       <div
         v-show="showButtons"
-        class="absolute top-[-30px] right-0 flex gap-[6px] transition-all duration-300 z-10 pt-[5px] px-[5px] pb-[10px] node-action-buttons"
+        class="absolute -top-7.5 right-0 flex gap-1.5 transition-all duration-300 z-10 pt-1.25 px-1.25 pb-2.5 node-action-buttons"
         :data-test="`pipeline-node-${io_type}-actions`"
         :style="{ '--node-color': getNodeColor(io_type) }"
         @mouseenter="handleActionButtonsEnter"
@@ -805,7 +749,7 @@ function getIcon(data, ioType) {
           variant="ghost"
           size="icon"
           @click.stop="deleteNode(id)"
-          class="min-w-[20px]! w-[20px]! h-[20px]! p-0! rounded! bg-[rgba(255,255,255,0.95)]! border! border-(--node-color)! text-(--node-color)! transition-all! duration-200! node-action-btn delete-btn"
+          class="min-w-5! w-5! h-5! p-0! rounded-default! bg-[color-mix(in_srgb,var(--color-white)_95%,transparent)]! border! border-(--node-color)! text-(--node-color)! transition-all! duration-200! hover:bg-error-500! hover:border-error-500! hover:text-white! hover:scale-110! hover:shadow-[0_0.125rem_0.5rem_color-mix(in_srgb,var(--color-error-500)_30%,transparent)]!"
           :data-test="`pipeline-node-${io_type}-delete-btn`"
           @mouseenter="handleDeleteTooltipEnter"
           @mouseleave="handleDeleteTooltipLeave"
@@ -814,27 +758,19 @@ function getIcon(data, ioType) {
         </OButton>
         <div
           v-if="showDeleteTooltip"
-          class="fixed bg-[#dc2626] text-white py-[6px] px-[10px] rounded-md text-[11px] z-[1000] shadow-[0_4px_12px_rgba(0,0,0,0.3)] pointer-events-none whitespace-nowrap"
-          style="left: 15px"
+          class="fixed left-3.75 bg-status-negative text-button-destructive-foreground py-1.5 px-2.5 rounded-default text-2xs z-[1000] shadow-[0_0.25rem_0.75rem_color-mix(in_srgb,var(--color-black)_30%,transparent)] pointer-events-none whitespace-nowrap"
         >
           Delete Node
-          <div class="absolute top-full left-1/2 -translate-x-1/2 w-0 h-0 border-l-[5px] border-l-transparent border-r-[5px] border-r-transparent border-t-[5px] [border-top-color:#dc2626]"></div>
+          <div class="absolute top-full left-1/2 -translate-x-1/2 w-0 h-0 border-l-[5px] border-l-transparent border-r-[5px] border-r-transparent border-t-[5px] border-t-status-negative"></div>
         </div>
       </div>
     </div>
 
     <div
       v-if="data.node_type == 'condition'"
-      class="p-0 btn-fixed-width"
       :data-test="`pipeline-node-${io_type}-condition-node`"
       data-node-type="condition"
-      style="
-        width: fit-content;
-        display: flex;
-        align-items: center;
-        border: none;
-        cursor: pointer;
-      "
+      class="p-0 btn-fixed-width w-fit flex items-center border-none cursor-pointer"
       @mouseenter="handleNodeHover(id, io_type)"
       @mouseleave="handleNodeLeave(id)"
       @click="editNode(id)"
@@ -852,15 +788,9 @@ function getIcon(data, ioType) {
       <OSeparator vertical class="mr-2" />
 
       <!-- Label -->
-      <div class="o2-scroll-container">
+      <div class="o2-scroll-container overflow-auto rounded-default">
         <div
-          class="text-[15px]! font-bold! leading-[1.4]!"
-          style="
-            text-align: left;
-            text-wrap: wrap;
-            width: auto;
-            text-overflow: ellipsis;
-          "
+          class="text-sm! font-bold! leading-[1.4]! text-left text-wrap w-auto text-ellipsis"
         >
           {{ getTruncatedConditions(data.condition || data.conditions) }}
         </div>
@@ -868,7 +798,7 @@ function getIcon(data, ioType) {
 
       <div
         v-show="showButtons"
-        class="absolute top-[-30px] right-0 flex gap-[6px] transition-all duration-300 z-10 pt-[5px] px-[5px] pb-[10px] node-action-buttons"
+        class="absolute -top-7.5 right-0 flex gap-1.5 transition-all duration-300 z-10 pt-1.25 px-1.25 pb-2.5 node-action-buttons"
         :data-test="`pipeline-node-${io_type}-actions`"
         :style="{ '--node-color': getNodeColor(io_type) }"
         @mouseenter="handleActionButtonsEnter"
@@ -878,7 +808,7 @@ function getIcon(data, ioType) {
           variant="ghost"
           size="icon"
           @click.stop="deleteNode(id)"
-          class="min-w-[20px]! w-[20px]! h-[20px]! p-0! rounded! bg-[rgba(255,255,255,0.95)]! border! border-(--node-color)! text-(--node-color)! transition-all! duration-200! node-action-btn delete-btn"
+          class="min-w-5! w-5! h-5! p-0! rounded-default! bg-[color-mix(in_srgb,var(--color-white)_95%,transparent)]! border! border-(--node-color)! text-(--node-color)! transition-all! duration-200! hover:bg-error-500! hover:border-error-500! hover:text-white! hover:scale-110! hover:shadow-[0_0.125rem_0.5rem_color-mix(in_srgb,var(--color-error-500)_30%,transparent)]!"
           :data-test="`pipeline-node-${io_type}-delete-btn`"
           @mouseenter="handleDeleteTooltipEnter"
           @mouseleave="handleDeleteTooltipLeave"
@@ -887,11 +817,10 @@ function getIcon(data, ioType) {
         </OButton>
         <div
           v-if="showDeleteTooltip"
-          class="fixed bg-[#dc2626] text-white py-[6px] px-[10px] rounded-md text-[11px] z-[1000] shadow-[0_4px_12px_rgba(0,0,0,0.3)] pointer-events-none whitespace-nowrap"
-          style="left: 15px"
+          class="fixed left-3.75 bg-status-negative text-button-destructive-foreground py-1.5 px-2.5 rounded-default text-2xs z-[1000] shadow-[0_0.25rem_0.75rem_color-mix(in_srgb,var(--color-black)_30%,transparent)] pointer-events-none whitespace-nowrap"
         >
           Delete Node
-          <div class="absolute top-full left-1/2 -translate-x-1/2 w-0 h-0 border-l-[5px] border-l-transparent border-r-[5px] border-r-transparent border-t-[5px] [border-top-color:#dc2626]"></div>
+          <div class="absolute top-full left-1/2 -translate-x-1/2 w-0 h-0 border-l-[5px] border-l-transparent border-r-[5px] border-r-transparent border-t-[5px] border-t-status-negative"></div>
         </div>
       </div>
     </div>
@@ -899,16 +828,9 @@ function getIcon(data, ioType) {
     <!-- LLM Evaluation Node -->
     <div
       v-if="data.node_type == 'llm_evaluation'"
-      class="p-0 btn-fixed-width"
       :data-test="`pipeline-node-${io_type}-llm-evaluation-node`"
       data-node-type="llm_evaluation"
-      style="
-        width: fit-content;
-        display: flex;
-        align-items: center;
-        border: none;
-        cursor: pointer;
-      "
+      class="p-0 btn-fixed-width w-fit flex items-center border-none cursor-pointer"
       @mouseenter="handleNodeHover(id, io_type)"
       @mouseleave="handleNodeLeave(id)"
       @click="editNode(id)"
@@ -926,20 +848,14 @@ function getIcon(data, ioType) {
       <OSeparator vertical class="mr-2" />
 
       <!-- Label -->
-      <div class="o2-scroll-container">
+      <div class="o2-scroll-container overflow-auto rounded-default">
         <div
-          class="text-[15px]! font-bold! leading-[1.4]!"
-          style="
-            text-align: left;
-            text-wrap: wrap;
-            width: auto;
-            text-overflow: ellipsis;
-          "
+          class="text-sm! font-bold! leading-[1.4]! text-left text-wrap w-auto text-ellipsis"
         >
           <span>{{ data.name || "LLM Evaluation" }}</span>
           <span
             v-if="data.sampling_rate"
-            style="font-size: 0.85em; color: #666; margin-left: 8px"
+            class="text-[0.85em] text-text-secondary ml-2"
           >
             ({{ (data.sampling_rate * 100).toFixed(0) }}%)
           </span>
@@ -967,7 +883,7 @@ function getIcon(data, ioType) {
                   <strong>{{ t("pipeline.samplingLabel") }}:</strong>
                   {{ t("pipeline.samplingAllTraces") }}
                 </div>
-                <div class="mt-2 text-xs text-gray-400">
+                <div class="mt-2 text-xs text-text-secondary">
                   {{ t("pipeline.llmEvaluationDescription") }}
                 </div>
               </div>
@@ -978,7 +894,7 @@ function getIcon(data, ioType) {
 
       <div
         v-show="showButtons"
-        class="absolute top-[-30px] right-0 flex gap-[6px] transition-all duration-300 z-10 pt-[5px] px-[5px] pb-[10px] node-action-buttons"
+        class="absolute -top-7.5 right-0 flex gap-1.5 transition-all duration-300 z-10 pt-1.25 px-1.25 pb-2.5 node-action-buttons"
         :data-test="`pipeline-node-${io_type}-actions`"
         :style="{ '--node-color': getNodeColor(io_type) }"
         @mouseenter="handleActionButtonsEnter"
@@ -988,7 +904,7 @@ function getIcon(data, ioType) {
           variant="ghost"
           size="icon"
           @click.stop="deleteNode(id)"
-          class="min-w-[20px]! w-[20px]! h-[20px]! p-0! rounded! bg-[rgba(255,255,255,0.95)]! border! border-(--node-color)! text-(--node-color)! transition-all! duration-200! node-action-btn delete-btn"
+          class="min-w-5! w-5! h-5! p-0! rounded-default! bg-[color-mix(in_srgb,var(--color-white)_95%,transparent)]! border! border-(--node-color)! text-(--node-color)! transition-all! duration-200! hover:bg-error-500! hover:border-error-500! hover:text-white! hover:scale-110! hover:shadow-[0_0.125rem_0.5rem_color-mix(in_srgb,var(--color-error-500)_30%,transparent)]!"
           :data-test="`pipeline-node-${io_type}-delete-btn`"
           @mouseenter="handleDeleteTooltipEnter"
           @mouseleave="handleDeleteTooltipLeave"
@@ -997,11 +913,10 @@ function getIcon(data, ioType) {
         </OButton>
         <div
           v-if="showDeleteTooltip"
-          class="fixed bg-[#dc2626] text-white py-[6px] px-[10px] rounded-md text-[11px] z-[1000] shadow-[0_4px_12px_rgba(0,0,0,0.3)] pointer-events-none whitespace-nowrap"
-          style="left: 15px"
+          class="fixed left-3.75 bg-status-negative text-button-destructive-foreground py-1.5 px-2.5 rounded-default text-2xs z-[1000] shadow-[0_0.25rem_0.75rem_color-mix(in_srgb,var(--color-black)_30%,transparent)] pointer-events-none whitespace-nowrap"
         >
           Delete Node
-          <div class="absolute top-full left-1/2 -translate-x-1/2 w-0 h-0 border-l-[5px] border-l-transparent border-r-[5px] border-r-transparent border-t-[5px] [border-top-color:#dc2626]"></div>
+          <div class="absolute top-full left-1/2 -translate-x-1/2 w-0 h-0 border-l-[5px] border-l-transparent border-r-[5px] border-r-transparent border-t-[5px] border-t-status-negative"></div>
         </div>
       </div>
     </div>
@@ -1026,14 +941,18 @@ function getIcon(data, ioType) {
   />
 </template>
 
-<style>
+<style scoped>
+/* keep(lib-override:vue-flow): styles vue-flow Handle DOM (classes are built dynamically as `handle_${io_type}`, also targeted by PipelineView's tooltip preview) and the vue-flow-generated .vue-flow__node-custom wrapper; !important is required to beat vue-flow core CSS */
+/* Node-TYPE colours use the SAME status tokens PipelineView's read-only tooltip
+   preview already applies to these exact classes (see its :deep(.handle_input)
+   rules): input = info, output = positive/success, transform = warning. */
 .node_handle_custom {
-  width: 16px !important;
-  height: 16px !important;
-  border: 3px solid rgba(255, 255, 255, 0.9);
+  width: 1rem !important;
+  height: 1rem !important;
+  border: 0.1875rem solid color-mix(in srgb, var(--color-white) 90%, transparent);
   border-radius: 50% !important;
-  background: #6b7280;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  background: var(--color-border-strong);
+  box-shadow: 0 0.125rem 0.5rem color-mix(in srgb, var(--color-black) 15%, transparent);
   transition: all 0.3s ease;
 }
 
@@ -1043,45 +962,45 @@ function getIcon(data, ioType) {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  width: 8px;
-  height: 8px;
+  width: 0.5rem;
+  height: 0.5rem;
   border-radius: 50%;
-  background: #374151;
+  background: var(--color-text-secondary);
   transition: all 0.3s ease;
 }
 
-/* Input nodes - Blue theme */
+/* Input nodes - info theme */
 .handle_input {
-  background: #dbeafe !important;
+  background: var(--color-status-info-bg) !important;
 }
 
 .handle_input::before {
-  background: #3b82f6 !important;
+  background: var(--color-status-info-text) !important;
 }
 
-/* Output nodes - Green theme */
+/* Output nodes - success theme */
 .handle_output {
-  background: #dcfce7 !important;
+  background: var(--color-status-success-bg) !important;
 }
 
 .handle_output::before {
-  background: #22c55e !important;
+  background: var(--color-status-positive) !important;
 }
 
-/* Transform nodes (default) - Orange theme */
+/* Transform nodes (default) - warning theme */
 .handle_default {
-  background: #fef3c7 !important;
+  background: var(--color-status-warning-bg) !important;
 }
 
 .handle_default::before {
-  background: #f59e0b !important;
+  background: var(--color-status-warning-text) !important;
 }
 
-.vue-flow__node-custom {
-  padding: 10px;
-  border-radius: 3px;
-  width: 150px;
-  font-size: 12px;
+:global(.vue-flow__node-custom) {
+  padding: 0.625rem;
+  border-radius: 0.1875rem;
+  width: 9.375rem;
+  font-size: var(--text-xs);
   text-align: center;
   border-width: 1px;
   border-style: solid;
@@ -1089,68 +1008,4 @@ function getIcon(data, ioType) {
   background-color: var(--vf-node-bg);
   border-color: var(--vf-node-color);
 }
-
-.node-action-btn:hover {
-  background: var(--node-color) !important;
-  color: white !important;
-  transform: scale(1.1) !important;
-}
-
-.delete-btn:hover {
-  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3) !important;
-  background: #ef4444 !important;
-  border-color: #ef4444 !important;
-}
-
-.error-badge:hover {
-  transform: scale(1.2);
-  box-shadow: 0 3px 10px rgba(239, 68, 68, 0.7);
-  z-index: 20;
-}
-
-/* Pipeline error tooltip styling - increased specificity to override global theme styles */
-.body--dark .pipeline-error-tooltip,
-.body--light .pipeline-error-tooltip,
-.pipeline-error-tooltip {
-  background-color: #ef4444 !important;
-  color: white !important;
-  font-size: 12px !important;
-  white-space: pre-wrap !important;
-  word-wrap: break-word !important;
-  line-height: 1.5 !important;
-  padding: 10px 14px !important;
-}
-
-.body--dark .pipeline-error-tooltip div,
-.body--light .pipeline-error-tooltip div,
-.pipeline-error-tooltip div {
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-.body--dark .pipeline-error-tooltip div::-webkit-scrollbar,
-.body--light .pipeline-error-tooltip div::-webkit-scrollbar,
-.pipeline-error-tooltip div::-webkit-scrollbar {
-  width: 6px;
-}
-
-.body--dark .pipeline-error-tooltip div::-webkit-scrollbar-track,
-.body--light .pipeline-error-tooltip div::-webkit-scrollbar-track,
-.pipeline-error-tooltip div::-webkit-scrollbar-track {
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 3px;
-}
-
-.body--dark .pipeline-error-tooltip div::-webkit-scrollbar-thumb,
-.body--light .pipeline-error-tooltip div::-webkit-scrollbar-thumb,
-.pipeline-error-tooltip div::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.3);
-  border-radius: 3px;
-}
-
-.body--dark .pipeline-error-tooltip div::-webkit-scrollbar-thumb:hover,
-.body--light .pipeline-error-tooltip div::-webkit-scrollbar-thumb:hover,
-.pipeline-error-tooltip div::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.5);
-}
 </style>
diff --git a/web/src/plugins/pipelines/EdgeWithButton.vue b/web/src/plugins/pipelines/EdgeWithButton.vue
index 592a0f86cf..71667e8741 100644
--- a/web/src/plugins/pipelines/EdgeWithButton.vue
+++ b/web/src/plugins/pipelines/EdgeWithButton.vue
@@ -46,9 +46,6 @@ const { removeEdges, getSelectedEdges, addSelectedEdges, removeSelectedEdges } =
 const path = computed(() => getBezierPath(props))
 
 let clickTimeout = null
-
-// Edge click handling moved to PipelineFlow.vue using VueFlow events
-// These handlers are no longer used but kept for backwards compatibility
 </script>
 
 <script>
@@ -68,7 +65,6 @@ export default {
 
   <!-- Use the `EdgeLabelRenderer` to escape the SVG world of edges and render your own custom label in a `<div>` ctx -->
   <EdgeLabelRenderer>
-    <!-- Edge delete button removed - use keyboard delete instead -->
   </EdgeLabelRenderer>
 </template>
 
diff --git a/web/src/plugins/pipelines/PipelineFlow.vue b/web/src/plugins/pipelines/PipelineFlow.vue
index 3db889ef61..1b249e4129 100644
--- a/web/src/plugins/pipelines/PipelineFlow.vue
+++ b/web/src/plugins/pipelines/PipelineFlow.vue
@@ -17,13 +17,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <!-- src/components/PipelineFlow.vue -->
 <template>
   <div data-test="pipeline-flow-container" class="flex items-center justify-between">
-     <div data-test="pipeline-flow-unsaved-changes-warning-text" v-show="pipelineObj.dirtyFlag" class="text-[#F5A623] border border-[#F5A623] rounded-sm flex items-center px-2 mr-3">
+     <div data-test="pipeline-flow-unsaved-changes-warning-text" v-show="pipelineObj.dirtyFlag" class="text-status-warning-text border border-status-warning-text rounded-default flex items-center px-2 mr-3">
       <OIcon name="info" class="mr-1 " size="sm" />
      Unsaved changes detected. Click "Save" to preserve your updates.
    </div>
 
    <!-- Edge deletion help notification -->
-   <div v-if="showEdgeHelpNotification" class="edge-help-notification absolute top-5 left-1/2 -translate-x-1/2 z-[1000] bg-white text-[#374151] py-[10px] px-4 rounded-lg text-sm shadow-[0_4px_20px_rgba(0,0,0,0.15)] border border-[#e5e7eb] flex items-center dark:bg-(--o2-primary-background) dark:text-[#f3f4f6] dark:border-[#374151] dark:shadow-[0_4px_20px_rgba(0,0,0,0.4)] [animation:slideDown_0.3s_ease-out]">
+   <div v-if="showEdgeHelpNotification" class="edge-help-notification absolute top-5 left-1/2 -translate-x-1/2 z-[1000] bg-surface-base text-text-body py-2.5 px-4 rounded-default text-sm shadow-[0_4px_20px_rgba(0,0,0,0.15)] border border-border-default flex items-center dark:shadow-[0_4px_20px_rgba(0,0,0,0.4)]">
      <OIcon name="info" class="mr-1" size="sm" />
      Press Backspace/Delete to remove the edge
    </div>
@@ -77,9 +77,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :is-in-view = false
       />
     </template>
+      <!-- Drag-over highlight: same role as OFile's drop target, so it shares
+           --color-file-drag-bg (theme-aware; the old raw blue had no dark step).
+           Stays a binding because the fill is driven by isDragOver at runtime. -->
       <DropzoneBackground
         :style="{
-          backgroundColor: isDragOver ? '#e7f3ff' : 'transparent',
+          backgroundColor: isDragOver
+            ? 'var(--color-file-drag-bg)'
+            : 'transparent',
           transition: 'background-color 0.2s ease',
         }"
       >
@@ -101,7 +106,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         position="top-left">
     </Controls>
     </VueFlow>
-    <div v-if="isCanvasEmpty" data-test="pipeline-flow-empty-text" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-[#888] text-[1.5em] text-center pointer-events-none z-10">
+    <div v-if="isCanvasEmpty" data-test="pipeline-flow-empty-text" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-text-muted text-[1.5em] text-center pointer-events-none z-10">
       {{ t('pipeline.dragDropNodesHere') }}
     </div>
     <!-- Add UI elements or buttons to interact with the methods -->
@@ -227,11 +232,16 @@ function resetTransform() {
 };
 </script>
 
-<style>
-@keyframes slideDown {
+<style scoped>
+/* keep(keyframes): entry animation for the edge-deletion help toast; the animation reference must live in this scoped block (not a Tailwind utility) so Vue's scoped keyframe-name hashing resolves it */
+.edge-help-notification {
+  animation: pipeline-flow-slide-down 0.3s ease-out;
+}
+
+@keyframes pipeline-flow-slide-down {
   from {
     opacity: 0;
-    transform: translateX(-50%) translateY(-10px);
+    transform: translateX(-50%) translateY(-0.625rem);
   }
   to {
     opacity: 1;
diff --git a/web/src/plugins/traces/DbSpanDetails.vue b/web/src/plugins/traces/DbSpanDetails.vue
index 33a4808c4c..cc49ae8387 100644
--- a/web/src/plugins/traces/DbSpanDetails.vue
+++ b/web/src/plugins/traces/DbSpanDetails.vue
@@ -102,14 +102,14 @@ const metadataRows = computed(() =>
             v-for="row in metadataRows"
             :key="row.key"
             :data-test="`traces-db-span-details-tag-${row.key}`"
-            class="inline-flex items-center gap-1 rounded-md px-2 py-1 text-[0.85rem]"
+            class="inline-flex items-center gap-1 rounded-default px-2 py-1 text-sm"
             style="
-              background: var(--o2-card-background);
-              border: 1px solid var(--o2-border);
-              color: var(--o2-text-primary);
+              background: var(--color-surface-base);
+              border: 1px solid var(--color-border-default);
+              color: var(--color-text-heading);
             "
           >
-            <span style="color: var(--o2-text-secondary)"
+            <span class="text-text-secondary"
               >{{ row.label }}:</span
             >
             <span class="break-all">{{ row.value }}</span>
@@ -123,7 +123,7 @@ const metadataRows = computed(() =>
       data-test="traces-db-span-details-query-editor"
     >
       <OCardSection
-        class="flex-1 flex flex-col p-0 min-h-[18.75rem] p-[0.375rem]!"
+        class="flex-1 flex flex-col p-0 min-h-[18.75rem] p-1.5!"
       >
         <CodeQueryEditor
           v-if="queryText"
@@ -138,8 +138,7 @@ const metadataRows = computed(() =>
         <div
           v-else
           data-test="traces-db-span-details-no-query"
-          class="p-4 text-sm"
-          style="color: var(--o2-text-secondary)"
+          class="p-4 text-sm text-text-secondary"
         >
           {{ t("traces.dbSpanDetails.noQueryText") }}
         </div>
@@ -155,30 +154,29 @@ const metadataRows = computed(() =>
       <div class="py-2 px-3">
           <div class="grid grid-cols-2 gap-x-4 gap-y-1">
             <template v-if="span.db_response_returned_rows">
-              <div class="text-xs" style="color: var(--o2-text-secondary)">
+              <div class="text-xs text-text-secondary">
                 {{ t("traces.dbSpanDetails.rowsReturned") }}
               </div>
               <div class="text-xs">{{ span.db_response_returned_rows }}</div>
             </template>
             <template v-if="span.db_operation_batch_size">
-              <div class="text-xs" style="color: var(--o2-text-secondary)">
+              <div class="text-xs text-text-secondary">
                 {{ t("traces.dbSpanDetails.batchSize") }}
               </div>
               <div class="text-xs">{{ span.db_operation_batch_size }}</div>
             </template>
             <template v-if="span.db_query_summary">
-              <div class="text-xs" style="color: var(--o2-text-secondary)">
+              <div class="text-xs text-text-secondary">
                 {{ t("traces.dbSpanDetails.querySummary") }}
               </div>
               <div class="text-xs">{{ span.db_query_summary }}</div>
             </template>
             <template v-if="span.db_response_status_code">
-              <div class="text-xs" style="color: var(--o2-text-secondary)">
+              <div class="text-xs text-text-secondary">
                 {{ t("traces.dbSpanDetails.responseStatus") }}
               </div>
               <div
-                class="text-xs"
-                style="color: var(--o2-status-error-text)"
+                class="text-xs text-status-error-text"
               >
                 {{ span.db_response_status_code }}
               </div>
diff --git a/web/src/plugins/traces/Index.vue b/web/src/plugins/traces/Index.vue
index 32261aa5cc..59ce02d463 100644
--- a/web/src/plugins/traces/Index.vue
+++ b/web/src/plugins/traces/Index.vue
@@ -16,7 +16,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <!-- eslint-disable vue/attribute-hyphenation -->
 <template>
-  <div class="rounded-md tracePage h-full min-h-full! max-h-full! overflow-hidden!"
+  <div class="rounded-default tracePage h-full min-h-full! max-h-full! overflow-hidden!"
     id="tracePage"
     style="min-height: auto"
   >
@@ -57,7 +57,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :fieldValues="fieldValues"
               :isLoading="searchObj.loading"
               :activeTab="activeTab"
-              class="card-container"
+              class="bg-card-glass-bg"
               @searchdata="searchData"
               @onChangeTimezone="refreshTimezone"
               @update:activeTab="activeTab = $event"
@@ -114,10 +114,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <OSplitter
               v-model="searchObj.config.splitterModel"
               :limits="searchObj.config.splitterLimit"
-              style="width: 100%"
               separatorClass="w-px"
               @update:model-value="onSplitterUpdate"
-              class="h-full"
+              class="h-full w-full"
             >
               <template #before>
                 <div class="h-full border-r border-border-default bg-surface-panel">
@@ -128,7 +127,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     :active-include-field-values="activeIncludeFilterValues"
                     :active-exclude-field-values="activeExcludeFilterValues"
                     data-test="traces-search-index-list"
-                    class="card-container h-full"
+                    class="h-full"
                     :key="searchObj.data.stream.streamLists"
                     @update:changeStream="onChangeStream"
                     @update:selectedFields="updateFieldVisibility"
@@ -136,7 +135,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </div>
               </template>
               <template #after>
-                <div class="h-full pb-[0.625rem]">
+                <div class="h-full pb-2.5">
                   <!-- No trace streams in org yet -->
                   <TracesNoDataState
                     v-if="
@@ -152,11 +151,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                        so the empties don't flash in between. -->
                   <div
                     v-else-if="searchObj.loadingStream"
-                    class="card-container h-full flex flex-col items-center justify-center gap-2 text-[var(--o2-text-secondary)]"
+                    class="bg-card-glass-bg h-full flex flex-col items-center justify-center gap-2 text-text-secondary"
                     data-test="traces-search-loading"
                   >
-                    <OSpinner size="sm" />
-                    <span>{{ t("traces.fetchingTraces") }}</span>
+                    <OSpinner size="lg" />
+                    <span class="text-sm">{{ t("traces.fetchingTraces") }}</span>
                   </div>
                   <div
                     v-else-if="
@@ -164,13 +163,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       parseInt(searchObj.data.errorCode) !== 0 &&
                       searchObj.loading == false
                     "
-                    class="card-container h-full"
+                    class="bg-card-glass-bg h-full"
                   >
-                    <div class="text-center pt-[2rem]">
+                    <div class="text-center pt-8">
                       <!-- Actual error case -->
                       <div
                         data-test="traces-search-error-message"
-                        class="text-[1.3rem] pt-4"
+                        class="text-xl pt-4"
                       >
                         {{ t("traces.errorRetrievingTraces") }}
                         <OButton
@@ -187,16 +186,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       </div>
                       <!-- Collapsible error detail — shown below results when toggled -->
                       <div class="text-center">
-                        <div class="my-none text-[1rem]! px-[2rem]!">
+                        <div class="my-none text-base! px-8!">
                           <span v-if="disableMoreErrorDetails">
                             <SanitizedHtmlRenderer
                               data-test="traces-search-detail-error-message"
                               :htmlContent="searchObj?.data?.errorMsg"
-                              class="pt-[1rem]"
+                              class="pt-4"
                             />
                             <div
                               v-if="searchObj?.data?.errorDetail"
-                              class="error-display__message pt-[1rem]! text-[var(--o2-text-2)]!"
+                              class="error-display__message pt-4! text-text-secondary!"
                             >
                               {{ searchObj.data.errorDetail }}
                             </div>
@@ -232,12 +231,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       !searchObj.loading
                     "
                     data-test="traces-search-error-text"
-                    class="text-center py-[40px] text-[20px] card-container h-full"
+                    class="text-center py-10 text-xl bg-card-glass-bg h-full"
                   >
                     <SanitizedHtmlRenderer
                       data-test="traces-search-detail-error-message"
                       :htmlContent="searchObj?.data?.errorMsg"
-                      class="pt-[1rem]"
+                      class="pt-4"
                     />
                   </div>
                   <div v-else-if="!isStreamSelected">
@@ -345,6 +344,7 @@ import {
   getUUID,
   generateTraceContext,
 } from "@/utils/zincutils";
+import { chartColor } from "@/utils/chartTheme";
 import useHttpStreaming from "@/composables/useStreamingSearch";
 import segment from "@/services/segment_analytics";
 import config from "@/aws-exports";
@@ -558,7 +558,7 @@ async function getStreamList() {
 
         // Restore filter chips from the editor value. The single mount search is
         // owned by loadPageData() (after getStreamList resolves), so we do NOT
-        // trigger a search here — that previously produced a duplicate on load.
+        // trigger a search here.
         if (
           searchObj.data.editorValue &&
           searchObj.data.stream.selectedStreamFields.length
@@ -1525,7 +1525,7 @@ function generateHistogramData() {
       text: "",
       font: {
         size: 12,
-        color: store.state.theme === "dark" ? "#fff" : "#181a1b",
+        color: chartColor("--color-text-heading"),
       },
     },
     margin: {
@@ -1536,14 +1536,14 @@ function generateHistogramData() {
     },
     font: {
       size: 12,
-      color: store.state.theme === "dark" ? "#fff" : "#181a1b",
+      color: chartColor("--color-text-heading"),
     },
     xaxis: { type: "date" },
     yaxis: { ticksuffix: "ms" },
     scattergap: 0.7,
     height: 150,
-    paper_bgcolor: store.state.theme === "dark" ? "#181a1b" : "#fff",
-    plot_bgcolor: store.state.theme === "dark" ? "#181a1b" : "#fff",
+    paper_bgcolor: chartColor("--color-surface-base"),
+    plot_bgcolor: chartColor("--color-surface-base"),
     autosize: true,
   };
 
@@ -2260,10 +2260,9 @@ watch(
   { immediate: true },
 );
 
-// NOTE: auto-run in live mode is driven by explicit triggers at each user-intent
-// handler (filter add/remove, manual date change, redirect, metrics brush) — not
-// by watching `searchObj.data.query`. A query watcher duplicated those explicit
-// triggers (every writer of `data.query` also runs a search), so it was removed.
+// Auto-run in live mode is driven by explicit triggers at each user-intent
+// handler (filter add/remove, manual date change, redirect, metrics brush), not
+// by watching `searchObj.data.query`.
 
 // Handler for service graph view traces event
 const handleServiceGraphViewTraces = (data: any) => {
@@ -2411,32 +2410,31 @@ useShortcuts([
 ]);
 </script>
 
-<style>
-
-.tracePage .index-table :hover::-webkit-scrollbar,
-.tracePage #tracesSearchGridComponent:hover::-webkit-scrollbar {
-  height: 13px;
-  width: 13px;
+<style scoped>
+/* keep(scrollbar): native ::-webkit-scrollbar sizing/shadows on the child field-list
+   & result-grid scrollers, plus a field-label font-size override on child FieldRow
+   DOM — all reached through child components, so not expressible as utilities here. */
+.tracePage :deep(.index-table :hover::-webkit-scrollbar),
+.tracePage :deep(#tracesSearchGridComponent:hover::-webkit-scrollbar) {
+  height: 0.8125rem;
+  width: 0.8125rem;
 }
 
-.tracePage .index-table ::-webkit-scrollbar-track,
-.tracePage #tracesSearchGridComponent::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-  border-radius: 10px;
+.tracePage :deep(.index-table ::-webkit-scrollbar-track),
+.tracePage :deep(#tracesSearchGridComponent::-webkit-scrollbar-track) {
+  -webkit-box-shadow: inset 0 0 0.375rem
+    color-mix(in srgb, var(--color-black) 30%, transparent);
+  border-radius: 0.625rem;
 }
 
-.tracePage .index-table ::-webkit-scrollbar-thumb,
-.tracePage #tracesSearchGridComponent::-webkit-scrollbar-thumb {
-  border-radius: 10px;
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
+.tracePage :deep(.index-table ::-webkit-scrollbar-thumb),
+.tracePage :deep(#tracesSearchGridComponent::-webkit-scrollbar-thumb) {
+  border-radius: 0.625rem;
+  -webkit-box-shadow: inset 0 0 0.375rem
+    color-mix(in srgb, var(--color-black) 50%, transparent);
 }
 
-
-.tracePage .index-menu .field_list .field_overlay .field_label {
-  font-size: 12px !important;
-}
-.tracePage .traces-horizontal-splitter.hide-splitter-separator > .o-splitter__separator {
-  background: transparent !important;
-  border: none !important;
+.tracePage :deep(.index-menu .field_list .field_overlay .field_label) {
+  font-size: var(--text-xs) !important;
 }
 </style>
diff --git a/web/src/plugins/traces/IndexList.spec.ts b/web/src/plugins/traces/IndexList.spec.ts
index 8806637c34..20ff419fb5 100644
--- a/web/src/plugins/traces/IndexList.spec.ts
+++ b/web/src/plugins/traces/IndexList.spec.ts
@@ -793,7 +793,7 @@ describe("IndexList Component", () => {
     });
 
     it("should update selectedStream on stream change", async () => {
-      // onStreamChange now takes a string value (post q-select → OSelect migration)
+      // onStreamChange now takes a string value (post OSelect migration)
       // and looks up the stream from streamLists
       const newStream = { label: "new_stream", value: "new_stream" };
       wrapper.vm.searchObj.data.stream.streamLists = [newStream];
diff --git a/web/src/plugins/traces/IndexList.vue b/web/src/plugins/traces/IndexList.vue
index 0b933f13be..7395015acb 100644
--- a/web/src/plugins/traces/IndexList.vue
+++ b/web/src/plugins/traces/IndexList.vue
@@ -15,24 +15,27 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="flex flex-col w-full index-menu p-1.5! bg-surface-panel!">
-    <OSelect
-      data-test="log-search-index-list-select-stream"
-      :model-value="searchObj.data.stream.selectedStream?.value ?? null"
-      :label="
-        searchObj.data.stream.selectedStream?.label
-          ? ''
-          : t('search.selectIndex')
-      "
-      :options="streamOptions"
-      data-cy="index-dropdown"
-      @search="onStreamSearch"
-      @update:model-value="onStreamChange"
-    >
+  <div class="flex flex-col w-full index-menu py-1.5! bg-surface-panel!">
+    <!-- Stream selector sits on the same page-edge rail inset as the field list below it. -->
+    <div class="px-page-edge">
+      <OSelect
+        data-test="log-search-index-list-select-stream"
+        :model-value="searchObj.data.stream.selectedStream?.value ?? null"
+        :label="
+          searchObj.data.stream.selectedStream?.label
+            ? ''
+            : t('search.selectIndex')
+        "
+        :options="streamOptions"
+        data-cy="index-dropdown"
+        @search="onStreamSearch"
+        @update:model-value="onStreamChange"
+      >
         <template #empty>
           <div class="p-2">{{ t("search.noResult") }}</div>
         </template>
-    </OSelect>
+      </OSelect>
+    </div>
     <div
       class="index-table h-[calc(100%-2rem)]! w-full"
       data-test="log-search-index-list-fields-table"
@@ -87,7 +90,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <template v-if="field.name === 'duration'" #body>
                   <div
                     v-if="durationPercentilesLoading"
-                    class="flex justify-center py-[0.5rem]"
+                    class="flex justify-center py-2"
                   >
                     <OSpinner size="xs" />
                   </div>
@@ -95,31 +98,31 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <div
                       v-for="p in PERCENTILE_LABELS"
                       :key="p.key"
-                      class="flex items-center justify-between py-[0.15rem] pl-[0.5rem]"
+                      class="flex items-center justify-between py-[0.15rem] pl-2"
                     >
-                      <span class="text-[0.75rem] w-[2rem] shrink-0">{{ p.label }}</span>
-                      <span class="text-[0.75rem] flex-1 text-right pr-[0.25rem]">
+                      <span class="text-xs w-8 shrink-0">{{ p.label }}</span>
+                      <span class="text-xs flex-1 text-right pr-1">
                         {{ formatTimeWithSuffix(durationPercentiles[p.key]) }}
                       </span>
-                      <div class="flex w-[3rem]">
+                      <div class="flex w-12">
                         <OButton
                           v-if="p.key !== 'max'"
                           variant="ghost"
                           size="icon-xs-circle"
                           :title="`duration >= ${formatTimeWithSuffix(durationPercentiles[p.key])}`"
                           @click.stop="addSearchTerm(`duration>='${formatTimeWithSuffix(durationPercentiles[p.key])}'`)"
-                          class="o2-custom-button-hover ml-[0.25rem]! border! border-[var(--o2-border-color)]!"
+                          class="o2-custom-button-hover ml-1! border! border-card-glass-border!"
                         >
-                          <OIcon name="arrow-forward-ios" size="sm" class="h-[0.5rem]! w-[0.5rem]!" />
+                          <OIcon name="arrow-forward-ios" size="sm" class="h-2! w-2!" />
                         </OButton>
                         <OButton
                           variant="ghost"
                           size="icon-xs-circle"
                           :title="`duration <= ${formatTimeWithSuffix(durationPercentiles[p.key])}`"
                           @click.stop="addSearchTerm(`duration<='${formatTimeWithSuffix(durationPercentiles[p.key])}'`)"
-                          class="o2-custom-button-hover mr-[0.625rem]! border! border-[var(--o2-border-color)]! ml-auto!"
+                          class="o2-custom-button-hover mr-2.5! border! border-card-glass-border! ml-auto!"
                         >
-                          <OIcon name="arrow-back-ios" size="sm" class="h-[0.5rem]! w-[0.5rem]!" />
+                          <OIcon name="arrow-back-ios" size="sm" class="h-2! w-2!" />
                         </OButton>
                       </div>
                     </div>
@@ -150,10 +153,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
         <template #loading>
           <div
-            class="flex items-center justify-center w-full pt-[2rem]"
+            class="flex items-center justify-center w-full pt-8"
           >
             <div
-              class="text-sm font-medium text-weight-bold w-fit mx-auto my-0 flex-col justify-items-center"
+              class="text-sm font-medium w-fit mx-auto my-0 flex items-center gap-1.5"
             >
               <OSpinner size="sm" />
               {{ t("traces.loadingStream") }}
@@ -612,95 +615,92 @@ export default defineComponent({
 });
 </script>
 
-<style>
-
-.index-menu .index-table table {
+<style scoped>
+/* keep(lib-override:GroupedFieldList): fixed table-layout + block rows on the child
+   OTable's <table>, and field-row label/overlay/container overrides on the child
+   FieldRow DOM — reached through child components, so not expressible as utilities. */
+.index-menu .index-table :deep(table) {
   display: table;
   table-layout: fixed !important;
 }
 
-.index-menu .index-table thead {
+.index-menu .index-table :deep(thead) {
   display: none;
 }
 
-.index-menu .index-table tr {
+.index-menu .index-table :deep(tr) {
   margin-bottom: 1px;
 }
 
-.index-menu .index-table tbody,
-.index-menu .index-table tr,
-.index-menu .index-table td {
+.index-menu .index-table :deep(tbody),
+.index-menu .index-table :deep(tr),
+.index-menu .index-table :deep(td) {
   width: 100%;
   display: block;
   height: fit-content;
   overflow: hidden;
 }
 
-
-.index-menu .index-table thead tr,
-.index-menu .index-table tbody td {
+.index-menu .index-table :deep(thead tr),
+.index-menu .index-table :deep(tbody td) {
   height: auto;
 }
 
-.index-menu .field_list {
-  padding: 0px;
+.index-menu :deep(.field_list) {
+  padding: 0;
   margin-bottom: 0.125rem;
   position: relative;
   overflow: visible;
   cursor: default;
 }
 
-.index-menu .field_list.field-group-header {
+/* Vertical padding only — the horizontal inset comes from OFieldList's group
+   header (--spacing-page-edge) so this list lines up with the page header. */
+.index-menu :deep(.field_list.field-group-header) {
   font-weight: 600;
-  font-size: 0.75rem;
-  padding: 0.25rem 0.325rem;
+  font-size: var(--text-xs);
+  padding-block: 0.25rem;
 }
 
-.index-menu .field_list .field_label {
+.index-menu :deep(.field_list .field_label) {
   pointer-events: none;
-  font-size: 0.825rem;
+  font-size: var(--text-compact);
   position: relative;
   display: inline;
   z-index: 2;
   left: 0;
 }
 
-.index-menu .field_list .field-container {
-  height: 25px;
+.index-menu :deep(.field_list .field-container) {
+  height: 1.5625rem;
 }
 
-.index-menu .field_list .field_overlay {
+.index-menu :deep(.field_list .field_overlay) {
   position: absolute;
   height: 100%;
   right: 0;
   top: 0;
   z-index: 5;
-  padding: 0 6px;
+  padding: 0 0.375rem;
   visibility: hidden;
   display: flex;
   align-items: center;
 }
 
-.index-menu .field_list.selected .field_overlay {
+.index-menu :deep(.field_list.selected .field_overlay) {
   background-color: var(--color-interactive-hover-bg);
 }
 
-.index-menu .field_list.selected .field_overlay .field_icons {
-  opacity: 0;
-}
-
-
-.index-table table {
+.index-table :deep(table) {
   width: 100%;
   table-layout: fixed;
 }
 
-
-.index-table table .field-container:hover .field_overlay {
+.index-table :deep(table .field-container:hover .field_overlay) {
   visibility: visible;
 }
 
-.index-table table .field_list.selected {
+.index-table :deep(table .field_list.selected) {
   background-color: var(--color-interactive-hover-bg);
 }
 </style>
diff --git a/web/src/plugins/traces/LLMContentRenderer.vue b/web/src/plugins/traces/LLMContentRenderer.vue
index e6bab11cac..56d2278413 100644
--- a/web/src/plugins/traces/LLMContentRenderer.vue
+++ b/web/src/plugins/traces/LLMContentRenderer.vue
@@ -40,7 +40,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :show-auto-complete="false"
           :show-line-numbers="false"
           :sticky-scroll="false"
-          class="min-h-25 w-full rounded overflow-hidden max-h-full! h-full!"
+          class="min-h-25 w-full rounded-default overflow-hidden max-h-full! h-full!"
         />
       </div>
     </div>
@@ -92,8 +92,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </div>
               <div
                 v-if="isMessageJson(msg.content)"
-                class="message-content-json p-2 h-full text-[13px]"
-                style="background-color: var(--color-code-bg)"
+                class="message-content-json p-2 h-full text-compact bg-code-bg"
               >
                 <CodeQueryEditor
                   :editor-id="`${editorIdPrefix}msg-json-editor-${idx}`"
@@ -103,19 +102,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   :show-auto-complete="false"
                   :show-line-numbers="false"
                   :sticky-scroll="false"
-                  class="min-h-25 w-full rounded overflow-hidden max-h-full! h-full!"
+                  class="min-h-25 w-full rounded-default overflow-hidden max-h-full! h-full!"
                 />
               </div>
               <div
                 v-else
-                class="message-content markdown-body p-2 overflow-x-auto"
-                style="background-color: var(--color-code-bg)"
+                class="message-content markdown-body p-2 overflow-x-auto bg-code-bg"
                 v-html="renderMarkdown(msg.content)"
               />
             </div>
           </div>
           <div v-else-if="isPlainText" class="text-content">
-            <pre class="plain-text-content m-0 p-2 whitespace-pre-wrap wrap-break-word font-mono text-[13px] leading-normal bg-(--color-code-bg) rounded overflow-x-auto">{{ contentStats.previewText }}</pre>
+            <pre class="plain-text-content m-0 p-2 whitespace-pre-wrap wrap-break-word font-mono text-compact leading-normal bg-code-bg rounded-default overflow-x-auto">{{ contentStats.previewText }}</pre>
           </div>
           <div v-else class="json-content">
             <CodeQueryEditor
@@ -126,7 +124,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :show-auto-complete="false"
               :show-line-numbers="false"
               :sticky-scroll="false"
-              class="min-h-25 w-full rounded overflow-hidden max-h-full! h-full!"
+              class="min-h-25 w-full rounded-default overflow-hidden max-h-full! h-full!"
             />
           </div>
         </div>
@@ -141,7 +139,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             :show-auto-complete="false"
             :show-line-numbers="false"
             :sticky-scroll="false"
-            class="min-h-25 w-full rounded overflow-hidden max-h-full! h-full!"
+            class="min-h-25 w-full rounded-default overflow-hidden max-h-full! h-full!"
           />
         </div>
 
@@ -193,8 +191,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </div>
               <div
                 v-if="isMessageJson(msg.content)"
-                class="message-content-json p-2 h-full text-[13px]"
-                style="background-color: var(--color-code-bg)"
+                class="message-content-json p-2 h-full text-compact bg-code-bg"
               >
                 <CodeQueryEditor
                   :editor-id="`${editorIdPrefix}msg-json-editor-full-${idx}`"
@@ -204,19 +201,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   :show-auto-complete="false"
                   :show-line-numbers="false"
                   :sticky-scroll="false"
-                  class="min-h-25 w-full rounded overflow-hidden max-h-full! h-full!"
+                  class="min-h-25 w-full rounded-default overflow-hidden max-h-full! h-full!"
                 />
               </div>
               <div
                 v-else
-                class="message-content markdown-body p-2 overflow-x-auto"
-                style="background-color: var(--color-code-bg)"
+                class="message-content markdown-body p-2 overflow-x-auto bg-code-bg"
                 v-html="renderMarkdown(msg.content)"
               />
             </div>
           </div>
           <div v-else-if="isPlainText" class="text-content">
-            <pre class="plain-text-content m-0 p-2 whitespace-pre-wrap wrap-break-word font-mono text-[13px] leading-normal bg-(--color-code-bg) rounded overflow-x-auto">{{ fullText }}</pre>
+            <pre class="plain-text-content m-0 p-2 whitespace-pre-wrap wrap-break-word font-mono text-compact leading-normal bg-code-bg rounded-default overflow-x-auto">{{ fullText }}</pre>
           </div>
           <div v-else class="json-content h-full">
             <CodeQueryEditor
@@ -227,7 +223,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :show-auto-complete="false"
               :show-line-numbers="false"
               :sticky-scroll="false"
-              class="min-h-25 w-full rounded overflow-hidden max-h-full! h-full"
+              class="min-h-25 w-full rounded-default overflow-hidden max-h-full! h-full"
             />
           </div>
         </div>
@@ -242,7 +238,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             :show-auto-complete="false"
             :show-line-numbers="false"
             :sticky-scroll="false"
-            class="h-full max-h-full min-h-25 w-full rounded overflow-hidden"
+            class="h-full max-h-full min-h-25 w-full rounded-default overflow-hidden"
           />
         </div>
 
@@ -647,7 +643,7 @@ const previewMessages = computed(() => {
   return preview;
 });
 
-// Message item helpers (was previously in MessageItem render function)
+// Message item helpers
 const roleColor = (role: string) => {
   const colors: Record<string, string> = {
     user: "rgba(25, 118, 210, 0.1)",
@@ -691,116 +687,118 @@ const renderMarkdown = (content: string): string => {
 };
 </script>
 
-<style>
+<style scoped>
+/* keep(generated-content): styles the markdown DOM injected via v-html into
+   .message-content, which never receives the scope attribute — reached with
+   :deep(). Tailwind cannot target these runtime-generated nodes. */
 .messages-view .message-item .message-content {
-  font-size: 13px;
+  font-size: var(--text-compact);
   line-height: 1.6;
 }
 
-.messages-view .message-item .message-content p {
-  margin: 0 0 8px 0;
+.messages-view .message-item .message-content :deep(p) {
+  margin: 0 0 0.5rem 0;
 }
 
-.messages-view .message-item .message-content p:last-child {
+.messages-view .message-item .message-content :deep(p:last-child) {
   margin-bottom: 0;
 }
 
-.messages-view .message-item .message-content img {
+.messages-view .message-item .message-content :deep(img) {
   max-width: 50%;
-  max-height: 400px;
+  max-height: 25rem;
   object-fit: contain;
   display: block;
-  margin: 8px 0;
-  border-radius: 4px;
+  margin: 0.5rem 0;
+  border-radius: 0.25rem;
 }
 
-.messages-view .message-item .message-content pre {
-  background-color: rgba(0, 0, 0, 0.05);
-  padding: 8px;
-  border-radius: 4px;
+.messages-view .message-item .message-content :deep(pre) {
+  background-color: color-mix(in srgb, var(--color-black) 5%, transparent);
+  padding: 0.5rem;
+  border-radius: 0.25rem;
   overflow-x: auto;
-  margin: 8px 0;
+  margin: 0.5rem 0;
 }
 
-.messages-view .message-item .message-content code {
-  font-family: monospace;
-  font-size: 12px;
-  background-color: rgba(0, 0, 0, 0.05);
-  padding: 2px 4px;
-  border-radius: 3px;
+.messages-view .message-item .message-content :deep(code) {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  background-color: color-mix(in srgb, var(--color-black) 5%, transparent);
+  padding: 0.125rem 0.25rem;
+  border-radius: 0.1875rem;
 }
 
-.messages-view .message-item .message-content pre code {
+.messages-view .message-item .message-content :deep(pre code) {
   background-color: transparent;
   padding: 0;
 }
 
-.messages-view .message-item .message-content ul,
-.messages-view .message-item .message-content ol {
-  margin: 8px 0;
-  padding-left: 24px;
+.messages-view .message-item .message-content :deep(ul),
+.messages-view .message-item .message-content :deep(ol) {
+  margin: 0.5rem 0;
+  padding-left: 1.5rem;
 }
 
-.messages-view .message-item .message-content li {
-  margin: 4px 0;
+.messages-view .message-item .message-content :deep(li) {
+  margin: 0.25rem 0;
 }
 
-.messages-view .message-item .message-content a {
-  color: var(--q-primary);
+.messages-view .message-item .message-content :deep(a) {
+  color: var(--color-theme-accent);
   text-decoration: none;
 }
 
-.messages-view .message-item .message-content a:hover {
+.messages-view .message-item .message-content :deep(a:hover) {
   text-decoration: underline;
 }
 
-.messages-view .message-item .message-content blockquote {
-  border-left: 3px solid var(--color-border-default);
-  margin: 8px 0;
-  padding-left: 12px;
+.messages-view .message-item .message-content :deep(blockquote) {
+  border-left: 0.1875rem solid var(--color-border-default);
+  margin: 0.5rem 0;
+  padding-left: 0.75rem;
   color: var(--color-text-secondary);
 }
 
-.messages-view .message-item .message-content table {
+.messages-view .message-item .message-content :deep(table) {
   border-collapse: collapse;
   width: 100%;
-  margin: 8px 0;
+  margin: 0.5rem 0;
 }
 
-.messages-view .message-item .message-content table th,
-.messages-view .message-item .message-content table td {
+.messages-view .message-item .message-content :deep(table th),
+.messages-view .message-item .message-content :deep(table td) {
   border: 1px solid var(--color-border-default);
-  padding: 6px 8px;
+  padding: 0.375rem 0.5rem;
   text-align: left;
 }
 
-.messages-view .message-item .message-content table th {
-  background-color: rgba(0, 0, 0, 0.05);
+.messages-view .message-item .message-content :deep(table th) {
+  background-color: color-mix(in srgb, var(--color-black) 5%, transparent);
 }
 
-/* Unscoped — needed because innerHTML-injected nodes don't get the scoped attribute */
-.llm-content-renderer .messages-view .message-item .message-content h1,
-.llm-content-renderer .messages-view .message-item .message-content h2,
-.llm-content-renderer .messages-view .message-item .message-content h3,
-.llm-content-renderer .messages-view .message-item .message-content h4 {
+.messages-view .message-item .message-content :deep(h1),
+.messages-view .message-item .message-content :deep(h2),
+.messages-view .message-item .message-content :deep(h3),
+.messages-view .message-item .message-content :deep(h4) {
   font-weight: 600;
-  margin: 10px 0 6px 0;
+  margin: 0.625rem 0 0.375rem 0;
   line-height: 1.4;
 }
 
-.llm-content-renderer .messages-view .message-item .message-content h1 {
-  font-size: 1.15rem;
+.messages-view .message-item .message-content :deep(h1) {
+  font-size: var(--text-lg);
 }
 
-.llm-content-renderer .messages-view .message-item .message-content h2 {
-  font-size: 1.05rem;
+.messages-view .message-item .message-content :deep(h2) {
+  font-size: var(--text-base);
 }
 
-.llm-content-renderer .messages-view .message-item .message-content h3 {
-  font-size: 0.95rem;
+.messages-view .message-item .message-content :deep(h3) {
+  font-size: var(--text-base);
 }
 
-.llm-content-renderer .messages-view .message-item .message-content h4 {
-  font-size: 0.875rem;
+.messages-view .message-item .message-content :deep(h4) {
+  font-size: var(--text-sm);
 }
 </style>
diff --git a/web/src/plugins/traces/LLMErrorTable.vue b/web/src/plugins/traces/LLMErrorTable.vue
index 740b3ab849..18e7898c80 100644
--- a/web/src/plugins/traces/LLMErrorTable.vue
+++ b/web/src/plugins/traces/LLMErrorTable.vue
@@ -30,22 +30,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div
     ref="rootEl"
-    class="card-container llm-trend-panel rounded-lg flex flex-col overflow-hidden"
+    class="bg-card-glass-bg llm-trend-panel rounded-default flex flex-col overflow-hidden border border-border-default"
   >
     <!-- Padding lives on the header only, so the table spans edge-to-edge
          (no left/right/bottom inset) and sits flush within the card. -->
     <div
-      class="flex items-baseline justify-between mb-[0.5rem] px-[1rem] pt-[1rem]"
+      class="flex items-baseline justify-between mb-2 px-4 pt-4"
     >
       <div>
         <div
-          class="text-[0.85rem] font-semibold text-[var(--color-text-heading)]"
+          class="text-sm font-semibold text-text-heading"
         >
           {{ displayTitle }}
         </div>
         <div
           v-if="displaySubtitle"
-          class="text-[0.7rem] leading-normal mt-[0.1rem]"
+          class="text-2xs leading-normal mt-[0.1rem]"
         >
           {{ displaySubtitle }}
         </div>
@@ -79,7 +79,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <!-- Operation is the one cell we colour — it names the failed span, so it
            reads in the error colour. -->
       <template #cell-operation="{ value }">
-        <span class="text-[var(--color-error-600)]">{{ value }}</span>
+        <span class="text-error-600">{{ value }}</span>
       </template>
 
       <!-- Trace id: only a title for the full value on hover; default text. -->
@@ -265,9 +265,3 @@ onUnmounted(() => {
   observer = null;
 });
 </script>
-
-<style lang="scss" scoped>
-.llm-trend-panel {
-  border: 1px solid var(--color-border-default);
-}
-</style>
diff --git a/web/src/plugins/traces/LLMInsightsDashboard.spec.ts b/web/src/plugins/traces/LLMInsightsDashboard.spec.ts
index 6f0210aee1..e247f51f59 100644
--- a/web/src/plugins/traces/LLMInsightsDashboard.spec.ts
+++ b/web/src/plugins/traces/LLMInsightsDashboard.spec.ts
@@ -145,14 +145,6 @@ function mountDashboard(
           template: "<button @click=\"$emit('click')\"><slot /></button>",
           emits: ["click"],
         },
-        // Primitives the dashboard renders.
-        QSelect: {
-          template: "<div data-test=\"q-select\" />",
-          props: ["modelValue", "options", "disable"],
-          emits: ["update:model-value"],
-        },
-        QTooltip: { template: "<div />" },
-        QIcon: { template: "<i />" },
       },
     },
   });
@@ -333,7 +325,7 @@ describe("LLMInsightsDashboard — refresh (parent entry point)", () => {
 });
 
 // ===========================================================================
-// onStreamChange — the q-select v-model handler
+// onStreamChange — the OSelect v-model handler
 // ===========================================================================
 
 describe("LLMInsightsDashboard — onStreamChange", () => {
diff --git a/web/src/plugins/traces/LLMInsightsDashboard.vue b/web/src/plugins/traces/LLMInsightsDashboard.vue
index 2d2d225cd0..3ff71dc35f 100644
--- a/web/src/plugins/traces/LLMInsightsDashboard.vue
+++ b/web/src/plugins/traces/LLMInsightsDashboard.vue
@@ -16,11 +16,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <!-- Page wrapper is intentionally chrome-less: KPI tiles and trend
-       panels each carry their own `card-container`. Wrapping them in
-       another card-container would render same-bg-on-same-bg and the
+       panels each carry their own `bg-card-glass-bg`. Wrapping them in
+       another bg-card-glass-bg would render same-bg-on-same-bg and the
        inner cards would visually disappear (no border contrast). -->
   <div
-    class="bg-transparent h-full flex flex-col px-2.5"
+    class="bg-transparent h-full flex flex-col"
   >
     <!-- Toolbar: Stream/Agent mode tab (left) + the matching picker (right) —
          hidden when no streams are available. Padding lives on the toolbar +
@@ -28,7 +28,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
          instead of floating inside a padded box. -->
     <div
       v-if="availableStreams.length > 0"
-      class="flex items-center justify-end gap-[0.5rem] px-4 py-[0.5rem]"
+      class="flex items-center justify-end gap-2 px-page-edge py-2"
     >
       <!-- Filter mode: view a whole Stream, or a single Agent. Sits directly
            beside the picker so switching mode and choosing the value are one
@@ -49,7 +49,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <div
         v-if="filterMode === 'stream'"
         data-test="llm-insights-stream-selector"
-        class="w-[14rem] flex-shrink-0"
+        class="w-56 flex-shrink-0"
       >
         <OSelect
           v-model="activeStream"
@@ -58,24 +58,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :options="availableStreams.map((s) => ({ label: s, value: s }))"
           labelKey="label"
           valueKey="value"
-          class="w-full rounded"
+          class="w-full rounded-default"
           @update:model-value="onStreamChange"
         />
       </div>
       <div
         v-else
         data-test="llm-insights-agent-selector"
-        class="w-[14rem] flex-shrink-0"
+        class="w-56 flex-shrink-0"
       >
         <!-- Hold a picker-shaped skeleton until the agents list lands the first
              time, so the dropdown doesn't flash an empty "Agent" picker before
              its options exist. -->
-        <SkeletonBox
-          v-if="!agentsLoaded"
-          width="100%"
-          height="2.125rem"
-          rounded
-        />
+        <OSkeleton type="text" v-if="!agentsLoaded" class="w-full h-8.5" />
         <OSelect
           v-else
           v-model="activeAgent"
@@ -84,7 +79,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :options="agentSelectOptions"
           labelKey="label"
           valueKey="value"
-          class="w-full rounded"
+          class="w-full rounded-default"
           @update:model-value="onAgentChange"
         />
       </div>
@@ -97,7 +92,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <LLMInsightsSkeleton
       v-if="!streamsLoaded || switching"
       :hide-toolbar="streamsLoaded"
-      class="flex-1 px-4"
+      class="flex-1 px-page-edge"
     />
 
     <!-- Generic error state — kept separate because a failed request is a
@@ -124,7 +119,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
          the preset's "Instrument with OpenTelemetry" call to action. -->
     <div
       v-else-if="isEmpty"
-      class="flex-1 min-h-0 flex items-center justify-center px-4"
+      class="flex-1 min-h-0 flex items-center justify-center px-page-edge"
       data-test="llm-insights-empty"
     >
       <OEmptyState
@@ -139,7 +134,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
          back to the Stream tab. -->
     <div
       v-else-if="agentEmpty"
-      class="flex-1 min-h-0 flex items-center justify-center px-4"
+      class="flex-1 min-h-0 flex items-center justify-center px-page-edge"
       data-test="llm-insights-agent-empty"
     >
       <OEmptyState
@@ -155,63 +150,58 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <!-- Dashboard content — scrollable panel area. Horizontal padding lives
          here (inside the scroll container) so the scrollbar sits at the
          content-area edge with content padded away from it. -->
-    <div v-else class="flex-1 overflow-y-auto px-4 pb-3">
+    <div v-else class="flex-1 overflow-y-auto px-page-edge pb-3">
       <!-- KPI strip: keep a skeleton until the first KPI result lands so the
            cards never flash zeros. The panels below render regardless, so
            their queries fire in parallel with the KPI fetch. -->
       <LLMInsightsSkeleton
         v-if="loading || !hasLoadedOnce"
         kpi-only
-        class="mt-[0.625rem] mb-[0.625rem]"
+        class="mb-2.5"
       />
       <!-- KPI Cards Row -->
-      <div
+      <KpiCardRow
         v-else
-        class="grid grid-cols-5 gap-[0.625rem] mt-[0.625rem] mb-[0.625rem]"
+        :columns="5"
+        class="mt-2.5 mb-2.5"
       >
         <div
           v-for="card in kpiCards"
           :key="card.label"
-          class="card-container rounded-lg flex flex-col px-3.5 pt-2.5 pb-2.5 gap-1 bg-(--color-surface-base) border border-(--color-border-default) transition-shadow duration-200 hover:shadow-[0_1px_6px_rgba(0,0,0,0.08)]"
+          class="bg-card-glass-bg rounded-default flex flex-col px-3.5 py-2.5 gap-1 min-h-32.5 border border-border-default transition-colors duration-200 hover:border-border-strong"
         >
           <!-- P95 rides its own (slower) query — skeleton the WHOLE card while
                it loads, matching the initial strip skeleton tile (see
                LLMInsightsSkeleton). Its sparkline comes from the histogram, but
                showing a chart before the number reads as ready, so we hold both. -->
           <template v-if="card.loading">
-            <div class="flex flex-col gap-[0.25rem]">
-              <SkeletonBox width="60%" height="12px" rounded />
-              <SkeletonBox width="55%" height="22px" rounded />
+            <div class="flex flex-col gap-1">
+              <OSkeleton type="text" class="w-[60%] h-3" />
+              <OSkeleton type="text" class="w-[55%] h-5.5" />
             </div>
-            <div class="flex items-end gap-[0.15rem] h-[32px] mt-auto">
-              <SkeletonBox
-                v-for="bar in 16"
-                :key="bar"
-                width="100%"
-                :height="`${30 + ((bar * 23) % 65)}%`"
-                rounded
-              />
+            <div class="flex items-end gap-[0.15rem] h-8 mt-auto">
+              <OSkeleton type="text" v-for="bar in 16" :key="bar" :style="{ height: `${30 + ((bar * 23) % 65)}%` }" class="w-full" />
             </div>
           </template>
           <template v-else>
-            <div class="flex flex-col gap-[0.25rem]">
-              <div class="flex items-center justify-between gap-2 mb-[0.25rem]">
-                <div class="text-[0.7rem] leading-normal font-semibold text-(--color-text-secondary) min-w-0 truncate">
+            <div class="flex flex-col gap-1">
+              <div class="flex items-center justify-between gap-2 mb-1">
+                <div class="text-2xs leading-normal font-semibold text-text-secondary min-w-0 truncate">
                   {{ card.label }}
                 </div>
                 <span
-                  class="inline-flex items-center justify-center shrink-0 w-6 h-6 rounded-md bg-(--color-surface-subtle) text-(--color-text-secondary)"
+                  class="inline-flex items-center justify-center shrink-0 w-6 h-6 rounded-default bg-surface-subtle text-text-secondary"
                 >
                   <OIcon :name="card.icon" size="sm" />
                 </span>
               </div>
               <div class="flex items-baseline gap-[0.2rem]">
-                <span class="text-[1.4rem] font-bold leading-none text-(--color-grey-600)">
+                <span class="text-2xl font-bold leading-none text-text-secondary">
                   {{ card.value }}
                 </span>
                 <span
                   v-if="card.unit"
-                  class="text-[0.8rem] font-semibold text-(--color-text-secondary)"
+                  class="text-compact font-semibold text-text-secondary"
                 >
                   {{ card.unit }}
                 </span>
@@ -226,7 +216,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             />
           </template>
         </div>
-      </div>
+      </KpiCardRow>
 
       <!-- Trend panels (config-driven). The key carries the panel-cache id
            (stream + agent + window), so changing tab / agent / time range
@@ -235,7 +225,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
            remount is what lets it restore an already-fetched result instead of
            re-querying. Same selection + window → instant cache hit; a new one →
            a clean miss that fetches. -->
-      <div class="grid grid-cols-2 gap-[0.625rem]">
+      <div class="grid grid-cols-2 gap-2.5">
         <div
           v-for="panel in LLM_INSIGHTS_PANELS"
           :key="`${panel.id}::${panelCacheDashboardId}`"
@@ -282,10 +272,11 @@ import {
   splitCost,
 } from "./llmInsightsDashboard.utils";
 import KpiSparkline from "./KpiSparkline.vue";
+import KpiCardRow from "@/components/common/KpiCardRow.vue";
 import LLMSchemaPanel from "./LLMSchemaPanel.vue";
 import LLMErrorTable from "./LLMErrorTable.vue";
 import LLMInsightsSkeleton from "./LLMInsightsSkeleton.vue";
-import SkeletonBox from "@/components/shared/SkeletonBox.vue";
+import OSkeleton from "@/lib/feedback/Skeleton/OSkeleton.vue";
 import OButton from "@/lib/core/Button/OButton.vue";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import OEmptyState from "@/lib/core/EmptyState/OEmptyState.vue";
@@ -342,7 +333,7 @@ const {
   streamsLoaded,
 } = useLLMInsights();
 
-// activeStream is component-local (drives the q-select v-model), but its
+// activeStream is component-local (drives the select v-model), but its
 // initial value falls back to localStorage / parent prop. Once the streams
 // list is reconciled, it's clamped to a valid option.
 const activeStream = ref<string>(
diff --git a/web/src/plugins/traces/LLMInsightsSkeleton.vue b/web/src/plugins/traces/LLMInsightsSkeleton.vue
index 2f3ccc9835..cbffd734ed 100644
--- a/web/src/plugins/traces/LLMInsightsSkeleton.vue
+++ b/web/src/plugins/traces/LLMInsightsSkeleton.vue
@@ -16,10 +16,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <div
-    class="pt-[0.625rem] flex flex-col gap-[0.625rem]"
-    :class="
-      store.state.theme === 'dark' ? 'dark-tile-content' : 'light-tile-content'
-    "
+    class="pt-2.5 flex flex-col gap-2.5 tile-content"
   >
     <!-- Toolbar: Stream/Agent toggle + picker. Only in the full-page skeleton
          when the real toolbar is hidden (initial !streamsLoaded). On a mid-session
@@ -27,63 +24,51 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
          avoid a duplicate toggle/picker row. The kpiOnly variant never shows it. -->
     <div
       v-if="!kpiOnly && !hideToolbar"
-      class="flex items-center justify-end gap-[0.5rem] py-[0.5rem]"
+      class="flex items-center justify-end gap-2 py-2"
     >
-      <SkeletonBox width="116px" height="32px" rounded />
-      <SkeletonBox width="14rem" height="36px" rounded />
+      <OSkeleton type="text" class="w-29 h-8" />
+      <OSkeleton type="text" class="w-56 h-9" />
     </div>
 
     <!-- Row 1: 5 KPI cards -->
-    <div class="grid grid-cols-5 gap-[0.625rem]">
+    <div class="grid grid-cols-5 gap-2.5">
       <div
         v-for="n in 5"
         :key="n"
-        class="bg-(--tile-bg) border border-(--tile-border) text-(--text-primary) rounded-lg py-[0.625rem] px-[0.875rem] flex flex-col gap-2 h-[130px]"
-        :class="
-          store.state.theme === 'dark' ? 'dark-tile-content' : 'light-tile-content'
-        "
+        class="bg-(--tile-bg) border border-(--tile-border) text-(--text-primary) rounded-default py-2.5 px-3.5 flex flex-col gap-2 h-32.5 tile-content"
       >
-        <SkeletonBox width="60%" height="12px" rounded />
-        <SkeletonBox width="55%" height="22px" rounded />
-        <SkeletonBox width="40%" height="10px" rounded />
+        <OSkeleton type="text" class="w-[60%] h-3" />
+        <OSkeleton type="text" class="w-[55%] h-5.5" />
+        <OSkeleton type="text" class="w-[40%] h-2.5" />
         <div class="flex items-end gap-[0.15rem] h-8 mt-auto">
-          <SkeletonBox
-            v-for="bar in 16"
-            :key="bar"
-            width="100%"
-            :height="`${30 + ((bar * 23) % 65)}%`"
-            rounded
-          />
+          <OSkeleton type="text" v-for="bar in 16" :key="bar" :style="{ height: `${30 + ((bar * 23) % 65)}%` }" class="w-full" />
         </div>
       </div>
     </div>
 
     <!-- Row 2 & 3: 2-column trend panel grid -->
-    <div v-if="!kpiOnly" class="grid grid-cols-2 gap-[0.625rem]">
+    <div v-if="!kpiOnly" class="grid grid-cols-2 gap-2.5">
       <div
         v-for="n in 4"
         :key="n"
-        class="bg-(--tile-bg) border border-(--tile-border) text-(--text-primary) rounded-lg p-4 flex flex-col gap-[0.4rem]"
-        :class="
-          store.state.theme === 'dark' ? 'dark-tile-content' : 'light-tile-content'
-        "
+        class="bg-(--tile-bg) border border-(--tile-border) text-(--text-primary) rounded-default flex flex-col tile-content"
       >
-        <SkeletonBox width="120px" height="16px" rounded />
-        <SkeletonBox width="160px" height="10px" rounded />
-        <div class="relative h-[220px] mt-2 overflow-hidden">
+        <div class="flex flex-col gap-[0.4rem] mb-1 p-1.5">
+          <OSkeleton type="text" class="w-30 h-4" />
+          <OSkeleton type="text" class="w-40 h-2.5" />
+        </div>
+        <div class="relative h-55 overflow-hidden">
           <svg
             class="w-full h-full block"
             viewBox="0 0 200 80"
             preserveAspectRatio="none"
           >
             <path
-              class="panel-tile__area-fill [animation:llm-line-pulse_1.6s_ease-in-out_infinite]"
-              :class="store.state.theme === 'dark' ? 'fill-[rgba(255,255,255,0.08)]' : 'fill-[rgba(0,0,0,0.08)]'"
+              class="panel-tile__area-fill fill-[color-mix(in_srgb,var(--color-text-heading)_8%,transparent)]"
               d="M0,55 C20,42 35,52 55,46 C72,41 85,30 105,28 C125,26 140,42 160,38 C175,35 190,22 200,18 L200,80 L0,80 Z"
             />
             <path
-              class="panel-tile__line-stroke [animation:llm-line-pulse_1.6s_ease-in-out_infinite]"
-              :class="store.state.theme === 'dark' ? '[stroke:rgba(255,255,255,0.22)]' : '[stroke:rgba(0,0,0,0.18)]'"
+              class="panel-tile__line-stroke stroke-[color-mix(in_srgb,var(--color-text-heading)_18%,transparent)]"
               d="M0,55 C20,42 35,52 55,46 C72,41 85,30 105,28 C125,26 140,42 160,38 C175,35 190,22 200,18"
               fill="none"
               stroke-width="2"
@@ -96,25 +81,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <!-- Row 4: w-full recent errors table -->
     <div
       v-if="!kpiOnly"
-      class="bg-(--tile-bg) border border-(--tile-border) text-(--text-primary) rounded-lg p-4 flex flex-col gap-[0.4rem]"
-      :class="
-        store.state.theme === 'dark' ? 'dark-tile-content' : 'light-tile-content'
-      "
+      class="bg-(--tile-bg) border border-(--tile-border) text-(--text-primary) rounded-default p-4 flex flex-col gap-[0.4rem] tile-content"
     >
-      <SkeletonBox width="120px" height="16px" rounded />
-      <SkeletonBox width="160px" height="10px" rounded />
+      <OSkeleton type="text" class="w-30 h-4" />
+      <OSkeleton type="text" class="w-40 h-2.5" />
       <div class="flex flex-col gap-2 mt-2">
         <div
           v-for="row in 5"
           :key="row"
-          class="panel-tile__row flex items-center gap-3 py-1 border-t border-(--tile-border)"
+          class="panel-tile__row flex items-center gap-3 py-1 border-t first:border-t-0 border-(--tile-border)"
         >
-          <SkeletonBox width="70px" height="14px" rounded />
-          <SkeletonBox width="90px" height="20px" rounded />
-          <SkeletonBox width="180px" height="14px" rounded />
-          <SkeletonBox width="110px" height="14px" rounded />
-          <SkeletonBox width="60px" height="14px" rounded />
-          <SkeletonBox width="50px" height="14px" rounded />
+          <OSkeleton type="text" class="w-17.5 h-3.5" />
+          <OSkeleton type="text" class="w-22.5 h-5" />
+          <OSkeleton type="text" class="w-45 h-3.5" />
+          <OSkeleton type="text" class="w-27.5 h-3.5" />
+          <OSkeleton type="text" class="w-15 h-3.5" />
+          <OSkeleton type="text" class="w-12.5 h-3.5" />
         </div>
       </div>
     </div>
@@ -122,79 +104,33 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script setup lang="ts">
-import { useStore } from "vuex";
-import SkeletonBox from "@/components/shared/SkeletonBox.vue";
+import OSkeleton from "@/lib/feedback/Skeleton/OSkeleton.vue";
 
 // kpiOnly: render just the KPI tiles row. Used when the trend/table panels
 // render live underneath (firing their own queries) while only the KPI strip
 // is still loading — so the panels aren't blocked behind the KPI fetch.
 defineProps<{ kpiOnly?: boolean; hideToolbar?: boolean }>();
-
-const store = useStore();
 </script>
 
-<style>
-/* Tile tokens map to the centralized --color-* system, which is theme-paired
-   automatically — so the dark/light split no longer needs hardcoded hex.
-   Both classes are kept (the template toggles them) but resolve to the same
-   token-driven values in each theme. */
-.dark-tile-content,
-.light-tile-content {
+<style scoped>
+/* keep(keyframes): The `line-pulse` keyframe and its `animation:` must both live in this scoped
+   block: the scoped compiler renames a keyframe and its `animation:` together
+   only within the same block, and never rewrites class strings in the template.
+   `.tile-content` publishes the --tile-* contract for this component's tiles. */
+.tile-content {
   --tile-bg: var(--color-surface-base);
   --tile-border: var(--color-border-default);
   --text-primary: var(--color-text-heading);
 }
 
-.panel-tile__row:first-child {
-  border-top: none;
+/* Breathing sparkline placeholder — the area fill and the line stroke pulse in
+   step; the fill/stroke colours stay as utilities on the <path>s. */
+.panel-tile__area-fill,
+.panel-tile__line-stroke {
+  animation: line-pulse 1.6s ease-in-out infinite;
 }
 
-/* Skeleton overrides — same pattern as HomeViewSkeleton.
-   The SkeletonBox component's default gradient is theme-agnostic; redefining
-   here under .dark-tile-content / .light-tile-content gives proper contrast. */
-.skeleton-box {
-  background: linear-gradient(
-    90deg,
-    transparent,
-    rgba(255, 255, 255, 0.15),
-    transparent
-  );
-  background-size: 200% 100%;
-  animation: llm-skel-wave 1.5s ease-in-out infinite;
-  position: relative;
-  overflow: hidden;
-}
-
-.dark-tile-content .skeleton-box {
-  background: linear-gradient(
-    90deg,
-    rgba(255, 255, 255, 0.04),
-    rgba(255, 255, 255, 0.12),
-    rgba(255, 255, 255, 0.04)
-  );
-  background-size: 200% 100%;
-}
-
-.light-tile-content .skeleton-box {
-  background: linear-gradient(
-    90deg,
-    rgba(0, 0, 0, 0.04),
-    rgba(0, 0, 0, 0.1),
-    rgba(0, 0, 0, 0.04)
-  );
-  background-size: 200% 100%;
-}
-
-@keyframes llm-skel-wave {
-  0% {
-    background-position: -200% 0;
-  }
-  100% {
-    background-position: 200% 0;
-  }
-}
-
-@keyframes llm-line-pulse {
+@keyframes line-pulse {
   0%,
   100% {
     opacity: 0.55;
diff --git a/web/src/plugins/traces/LLMSchemaPanel.vue b/web/src/plugins/traces/LLMSchemaPanel.vue
index e4c3afec03..c14dad8f5d 100644
--- a/web/src/plugins/traces/LLMSchemaPanel.vue
+++ b/web/src/plugins/traces/LLMSchemaPanel.vue
@@ -26,28 +26,32 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
   <div
-    class="card-container llm-trend-panel rounded-lg p-[1rem] flex flex-col"
+    class="bg-card-glass-bg rounded-default flex flex-col border border-border-default"
   >
-    <div class="flex items-baseline justify-between mb-[0.25rem]">
+    <div class="flex items-baseline justify-between mb-1 p-page-edge">
       <div>
         <div
-          class="text-[0.85rem] font-semibold text-[var(--color-text-heading)]"
+          class="text-sm font-semibold text-text-heading"
         >
           {{ displayTitle }}
         </div>
         <div
           v-if="displaySubtitle"
-          class="text-[0.7rem] leading-normal mt-[0.1rem]"
+          class="text-2xs leading-normal mt-[0.1rem]"
         >
           {{ displaySubtitle }}
         </div>
       </div>
     </div>
 
-    <div class="llm-schema-panel__body w-full">
+    <!-- h-55 matches LLMTrendPanel's chart height (13.75rem) so the converted
+         panel lines up with the legacy ones in the same grid row. The renderer
+         needs an explicit full size to fill the box — without it the echarts
+         canvas collapses to a sliver. -->
+    <div class="llm-schema-panel__body w-full h-55 relative">
       <PanelSchemaRenderer
         v-if="chartData"
-        class="llm-schema-panel__renderer"
+        class="llm-schema-panel__renderer h-full w-full"
         :panelSchema="chartData"
         :selectedTimeObj="selectedTimeObj"
         :variablesData="{}"
@@ -150,23 +154,3 @@ const selectedTimeObj = computed(() => ({
   end_time: new Date(props.endTime),
 }));
 </script>
-
-<style lang="scss" scoped>
-.llm-trend-panel {
-  border: 1px solid var(--color-border-default);
-}
-
-/* Match LLMTrendPanel's chart height (.llm-trend-chart = 220px) so the
-   converted panel lines up with the legacy ones in the same grid row.
-   PanelSchemaRenderer needs an explicit 100% size to fill the box — without
-   it the echarts canvas collapses to a sliver. */
-.llm-schema-panel__body {
-  height: 220px;
-  position: relative;
-}
-
-.llm-schema-panel__renderer {
-  height: 100%;
-  width: 100%;
-}
-</style>
diff --git a/web/src/plugins/traces/SearchBar.vue b/web/src/plugins/traces/SearchBar.vue
index 0b5fa5e0f1..035f316eab 100644
--- a/web/src/plugins/traces/SearchBar.vue
+++ b/web/src/plugins/traces/SearchBar.vue
@@ -16,8 +16,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <div class="search-bar-component pb-px h-full flex flex-col" id="searchBarComponent">
-    <div class="flex m-0! p-[0.375rem] items-center justify-between w-full border-b border-border-default">
-      <div ref="toolbarLeftRef" class="flex flex-row items-center gap-[0.375rem] flex-1 min-w-0 overflow-hidden">
+    <div class="flex m-0! p-1.5 items-center justify-between w-full border-b border-border-default">
+      <div ref="toolbarLeftRef" class="flex flex-row items-center gap-1.5 flex-1 min-w-0 overflow-hidden">
         <!-- Unified View Toggle: Service Graph / Traces / Spans -->
         <OToggleGroup
           :model-value="searchObj.meta.searchMode"
@@ -91,7 +91,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </OButton>
 
           <div
-            class="py-1 px-[0.375rem] flex items-center justify-center border border-(--color-button-outline-border) rounded-md transition-all duration-200 cursor-pointer hover:bg-(--color-button-outline-hover-bg)"
+            class="py-1 px-1.5 flex items-center justify-center border border-button-outline-border rounded-default transition-all duration-200 cursor-pointer hover:bg-button-outline-hover-bg"
           >
             <OSwitch
               data-test="traces-search-bar-show-metrics-toggle-btn"
@@ -135,7 +135,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           searchObj.meta.searchMode !== 'service-graph' &&
           searchObj.meta.searchMode !== 'services-catalog'
         "
-        class="flex items-center gap-[0.375rem]"
+        class="flex items-center gap-1.5"
       >
         <date-time
           ref="dateTimeRef"
@@ -154,7 +154,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :queryRangeRestrictionMsg="
             searchObj.data.datetime.queryRangeRestrictionMsg
           "
-          class="h-[2rem]"
+          class="h-8"
           @on:date-change="updateDateTime"
           @on:timezone-change="updateTimezone"
         />
@@ -165,7 +165,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               variant="ghost"
               data-test="traces-search-bar-cancel-btn"
               :title="t('search.cancel')"
-              class="p-0 h-[1.875rem]! [transition:box-shadow_0.3s_ease,_opacity_0.2s_ease] text-xs! font-medium! leading-4! px-1! py-0! w-[5.875rem]! whitespace-normal break-words text-center bg-(--o2-cancel-query-bg)! text-(--o2-primary-btn-text)! element-box-shadow ![border-radius:0.375rem_0_0_0.375rem]"
+              class="p-0 h-[1.875rem]! [transition:box-shadow_0.3s_ease,_opacity_0.2s_ease] text-xs! font-medium! leading-4! px-1! py-0! w-[5.875rem]! whitespace-normal break-words text-center bg-cancel-query-bg! text-button-primary-foreground! element-box-shadow ![border-radius:0.375rem_0_0_0.375rem]"
               @click="cancelQueryData"
               >{{ t("search.cancel") }}</OButton
             >
@@ -175,11 +175,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               data-test="logs-search-bar-refresh-btn"
               data-cy="search-bar-refresh-button"
               :title="t('search.runQuery')"
-              class="p-0 h-[1.875rem]! element-box-shadow [transition:box-shadow_0.3s_ease,_opacity_0.2s_ease] hover:opacity-90 hover:shadow-[0_0_0.5rem_color-mix(in_srgb,var(--o2-primary-btn-bg),transparent_30%)] text-xs! font-medium! leading-4! px-1! py-0! w-[5.875rem]! whitespace-normal break-words text-center bg-(--o2-primary-btn-bg)! text-(--o2-primary-btn-text)!"
+              class="p-0 h-[1.875rem]! element-box-shadow [transition:box-shadow_0.3s_ease,_opacity_0.2s_ease] hover:opacity-90 hover:shadow-[0_0_0.5rem_color-mix(in_srgb,var(--color-button-primary),transparent_30%)] text-xs! font-medium! leading-4! px-1! py-0! w-[5.875rem]! whitespace-normal break-words text-center bg-button-primary! text-button-primary-foreground!"
               :class="
                 store.state.zoConfig.auto_query_enabled
                   ? '![border-radius:0.375rem_0_0_0.375rem]'
-                  : 'rounded-md'
+                  : 'rounded-default'
               "
               @click="searchData"
               :loading="isLoading"
@@ -202,7 +202,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               />
               {{ t("search.runQuery") }}
             </OButton>
-            <OSeparator class="h-[1.875rem]! w-[1px]" vertical />
+            <OSeparator class="h-[1.875rem]! w-px" vertical />
             <ODropdown
               v-if="store.state.zoConfig.auto_query_enabled"
               side="bottom"
@@ -215,8 +215,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   :disabled="isLoading"
                   :class="[
                     config.isEnterprise == 'true' && isLoading
-                      ? 'bg-(--o2-cancel-query-bg)! text-(--o2-primary-btn-text)!'
-                      : 'bg-(--o2-primary-btn-bg)! text-(--o2-primary-btn-text)! hover:opacity-90 hover:shadow-[0_0_0.5rem_color-mix(in_srgb,var(--o2-primary-btn-bg),transparent_30%)]',
+                      ? 'bg-cancel-query-bg! text-button-primary-foreground!'
+                      : 'bg-button-primary! text-button-primary-foreground! hover:opacity-90 hover:shadow-[0_0_0.5rem_color-mix(in_srgb,var(--color-button-primary),transparent_30%)]',
                     '![border-radius:0_0.375rem_0.375rem_0]',
                   ]"
                 >
@@ -233,18 +233,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       searchObj.meta.liveMode ? 'autorenew' : 'sync-disabled'
                     "
                     size="sm"
-                    :class="searchObj.meta.liveMode ? 'text-[var(--o2-primary)]' : ''"
+                    :class="searchObj.meta.liveMode ? 'text-accent' : ''"
                   />
                 </template>
                 <span>
-                  <div class="font-medium text-[12px]">
+                  <div class="font-medium text-xs">
                     {{
                       searchObj.meta.liveMode
                         ? t("search.turnOffLiveMode")
                         : t("search.turnOnLiveMode")
                     }}
                   </div>
-                  <div class="text-[11px] text-muted-foreground">
+                  <div class="text-2xs text-muted-foreground">
                     {{ t("search.liveModeTooltip") }}
                   </div>
                 </span>
@@ -275,7 +275,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         v-if="searchObj.meta.searchMode === 'service-graph'"
         class="ml-auto"
       >
-        <div class="flex items-center gap-[0.5rem]">
+        <div class="flex items-center gap-2">
           <date-time
             ref="dateTimeRef"
             auto-apply
@@ -286,7 +286,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             }"
             :default-relative-time="searchObj.data.datetime.relativeTimePeriod"
             data-test="service-graph-date-time-picker"
-            class="h-[2rem]!"
+            class="h-8!"
             @on:date-change="updateDateTime"
           />
           <OButton
@@ -327,7 +327,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             v-model="searchObj.meta.serviceGraphLayoutType"
             :options="serviceGraphLayoutOptions"
             :searchable="false"
-            class="w-[7.5rem] min-h-[2rem]! h-[2rem]!"
+            class="w-[7.5rem] min-h-8! h-8!"
             :disabled="searchObj.meta.serviceGraphVisualizationType === 'graph'"
             @update:model-value="onServiceGraphLayoutChange"
           />
@@ -339,7 +339,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         v-if="searchObj.meta.searchMode === 'services-catalog'"
         class="ml-auto"
       >
-        <div class="flex items-center gap-[0.5rem]">
+        <div class="flex items-center gap-2">
           <date-time
             ref="dateTimeRef"
             auto-apply
@@ -351,7 +351,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             }"
             :default-relative-time="searchObj.data.datetime.relativeTimePeriod"
             data-test="services-catalog-date-time-picker"
-            class="h-[2rem]! mr-[0.375rem]"
+            class="h-8! mr-1.5"
             @on:date-change="updateDateTime"
           />
         </div>
diff --git a/web/src/plugins/traces/SearchResult.spec.ts b/web/src/plugins/traces/SearchResult.spec.ts
index 40c40a5936..6a2294646d 100644
--- a/web/src/plugins/traces/SearchResult.spec.ts
+++ b/web/src/plugins/traces/SearchResult.spec.ts
@@ -145,7 +145,6 @@ const globalOptions = {
     store: mockStore,
   },
   stubs: {
-    "q-resize-observer": true,
     TracesSearchResultList: {
       name: "TracesSearchResultList",
       template: '<div data-test="traces-search-result-list" class="search-list w-full"></div>',
diff --git a/web/src/plugins/traces/SearchResult.vue b/web/src/plugins/traces/SearchResult.vue
index 94aea0c2c6..5707897bd9 100644
--- a/web/src/plugins/traces/SearchResult.vue
+++ b/web/src/plugins/traces/SearchResult.vue
@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div data-test="traces-search-result" class="overflow-hidden h-full">
     <div
-      class="card-container h-full flex flex-col overflow-hidden"
+      class="bg-card-glass-bg h-full flex flex-col overflow-hidden"
     >
       <!-- Section header: title + count badge + insights + pagination -->
       <div
@@ -30,7 +30,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         "
         ref="sectionHeaderRef"
         data-test="traces-section-header"
-        class="flex items-center px-[0.4rem]! h-[2.25rem] shrink-0 border-b border-[rgba(0,0,0,0.07)]"
+        class="flex items-center px-[0.4rem]! h-9 shrink-0 border-b border-border-default"
       >
         <!-- Field panel toggle — same style as logs page -->
         <OButton
@@ -65,10 +65,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           data-test="traces-error-count-badge"
           variant="error"
           :clickable="true"
-          class="text-xs rounded! py-[0.4rem]! px-[0.625rem]! text-[0.75rem]!"
+          class="text-xs rounded-default! py-[0.4rem]! px-2.5! text-xs!"
           :class="showErrorOnly
             ? 'bg-badge-error-solid-bg! text-badge-error-solid-text!'
-            : 'bg-[var(--o2-error-tag-bg)]! text-[var(--o2-error-tag-text)]!'"
+            : 'bg-error-tag-bg! text-error-tag-text!'"
           @click="toggleErrorOnly"
         >
           {{ `${formatLargeNumber(searchObj.data.queryResults.errorCount)} ${searchObj.meta.searchMode === 'traces' ? t('traces.errorTraces') : t('traces.errorSpans')}` }}
@@ -84,7 +84,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <div class="flex-1" />
 
         <!-- Right: Refresh → Insights → rows per page → pagination (same sequence as logs) -->
-        <div class="inline-flex items-center border border-[var(--o2-border-color)] rounded-md px-1 h-6 mr-1 overflow-hidden">
+        <div class="inline-flex items-center border border-card-glass-border rounded-default px-1 h-6 mr-1 overflow-hidden">
           <ORefreshButton
             :last-run-at="searchObj.meta.lastRunAt"
             :loading="searchObj.loading"
@@ -106,7 +106,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <OSelect
             :model-value="searchObj.meta.resultGrid.rowsPerPage"
             :options="rowsPerPageOptions"
-            class="select-pagination mr-[0.25rem] mt-0! ml-1"
+            class="select-pagination mr-1 mt-0! ml-1"
             size="sm"
             data-test="traces-search-result-records-per-page"
             @update:model-value="changeRowsPerPage"
@@ -122,15 +122,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </template>
       </div>
 
-      <!-- Combined scroll area: RED metrics + trace list scroll together -->
-      <div class="flex-1 overflow-y-auto bg-[var(--o2-card-bg-solid)]">
+      <!-- Combined scroll area: RED metrics + trace list scroll together.
+           This is the single vertical scroller — the trace table delegates its
+           virtualizer here (via :scroll-el) so it doesn't add a nested one. -->
+      <div ref="scrollContainerRef" class="flex-1 overflow-auto bg-card-glass-solid">
         <!-- ════════════════════ RED Metrics Section ════════════════════ -->
         <transition
           enter-active-class="transition-all duration-300 ease-in-out"
           leave-active-class="transition-all duration-300 ease-in-out"
           enter-from-class="opacity-0 -translate-y-4 max-h-0"
-          enter-to-class="opacity-100 translate-y-0 max-h-[1000px]"
-          leave-from-class="opacity-100 translate-y-0 max-h-[1000px]"
+          enter-to-class="opacity-100 translate-y-0 max-h-250"
+          leave-from-class="opacity-100 translate-y-0 max-h-250"
           leave-to-class="opacity-0 -translate-y-4 max-h-0"
         >
           <TracesMetricsDashboard
@@ -158,6 +160,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
         <TracesSearchResultList
           :hits="hits"
+          :scroll-el="scrollContainerRef"
           :loading="searchObj.loading"
           :search-performed="searchPerformed"
           :total="searchObj.data.queryResults.total"
@@ -297,6 +300,11 @@ export default defineComponent({
 
     const metricsDashboardRef: any = ref(null);
 
+    // Single vertical scroll container for the results area. Delegated to the
+    // trace table's virtualizer (:scroll-el) so the table doesn't render its own
+    // nested scrollbar — fixes the double-scrollbar on the traces page.
+    const scrollContainerRef = ref<HTMLElement | null>(null);
+
     const sectionHeaderRef = ref<HTMLElement | null>(null);
     const containerWidth = ref(9999);
     let headerResizeObserver: ResizeObserver | null = null;
@@ -441,6 +449,7 @@ export default defineComponent({
       searchObj,
       updatedLocalLogFilterField,
       metricsDashboardRef,
+      scrollContainerRef,
       sectionHeaderRef,
       showActionLabels,
       expandRowDetail,
@@ -461,3 +470,47 @@ export default defineComponent({
   },
 });
 </script>
+
+<style scoped>
+/* keep(lib-override:opagination): reaches into the OPagination/OSelect-rendered
+   button DOM to compress the pagination controls into the results toolbar. */
+.paginator-section {
+  line-height: 1.5rem;
+  max-height: 2rem;
+  border-radius: 0.5rem;
+  padding: 0.125rem 0.25rem;
+  background: color-mix(in srgb, var(--color-white) 10%, transparent);
+  backdrop-filter: blur(0.625rem);
+  margin-top: 0;
+  overflow: visible;
+}
+
+.paginator-section :deep(.o-pagination__btn) {
+  padding: 0.125rem 0.25rem !important;
+  height: 1.5rem !important;
+  min-height: 1.5rem !important;
+  min-width: 1.5rem !important;
+  font-size: var(--text-xs) !important;
+  border-radius: 0.25rem !important;
+  line-height: 1rem !important;
+}
+
+.paginator-section :deep(.o-pagination__btn svg) {
+  width: 1rem !important;
+  height: 1rem !important;
+}
+
+.select-pagination {
+  position: relative;
+  width: 4rem !important;
+  height: 1.5rem !important;
+  margin-top: 0;
+}
+
+.select-pagination :deep(button) {
+  height: 1.5rem !important;
+  min-height: 1.5rem !important;
+  font-size: var(--text-xs) !important;
+  padding-inline: 0.5rem !important;
+}
+</style>
diff --git a/web/src/plugins/traces/ServiceGraph.vue b/web/src/plugins/traces/ServiceGraph.vue
index 5a44ece3db..e61c46ed93 100644
--- a/web/src/plugins/traces/ServiceGraph.vue
+++ b/web/src/plugins/traces/ServiceGraph.vue
@@ -1,7 +1,7 @@
-<template>
+<template>
   <OCard class="h-full flex flex-col">
     <!-- Top toolbar: [stream-selector] [search-input]  ···spacer···  [legends] -->
-    <div class="flex items-center gap-2 p-[0.375rem] pb-0">
+    <div class="flex items-center gap-2 p-1.5 pb-0">
       <!-- Stream selector (hidden when a parent drives selection, e.g. the
            Agent Graph page which selects by agent). -->
       <div
@@ -14,7 +14,7 @@
           :options="availableStreams.map((s) => ({ label: s, value: s }))"
           labelKey="label"
           valueKey="value"
-          class="w-auto flex-shrink-0 rounded"
+          class="w-auto flex-shrink-0 rounded-default"
           :disabled="availableStreams.length === 0"
           @update:model-value="onStreamFilterChange"
         />
@@ -36,7 +36,7 @@
       <!-- Legends (horizontal) -->
       <div
         data-test="service-graph-legends"
-        class="flex flex-row items-center gap-3 p-[0.325rem] rounded border border-[var(--o2-border-color)]!"
+        class="flex flex-row items-center gap-3 p-[0.325rem] rounded-default border border-card-glass-border!"
       >
         <div
           data-test="sg-legend"
@@ -44,7 +44,7 @@
         >
           <!-- Border Color -->
           <div
-            class="mb-0! whitespace-nowrap text-(--o2-text-4)! font-bold text-xs"
+            class="mb-0! whitespace-nowrap text-text-label! font-bold text-xs"
           >
             {{ t("traces.serviceGraph.borderColor") }}
             <span class="font-normal opacity-55">| {{ t("traces.serviceGraph.borderColorMetric") }}</span>
@@ -57,23 +57,26 @@
               :data-test="`sg-legend-${level.key}`"
             >
               <span
-                class="sg-health-ring"
-                :class="`sg-health-ring--${level.key}`"
+                class="w-3 h-3 rounded-full border-2 bg-transparent flex-none"
+                :class="{
+                  'border-service-health-healthy': level.key === 'healthy',
+                  'border-service-health-degraded': level.key === 'degraded',
+                  'border-service-health-warning': level.key === 'warning',
+                  'border-service-health-critical': level.key === 'critical',
+                }"
               />
               <div class="flex flex-row items-baseline gap-1">
-                <div class="text-left text-(--o2-text-2)! text-xs font-semibold">
+                <div class="text-left text-text-secondary! text-xs font-semibold">
                   {{ level.label }}
                 </div>
-                <div class="text-left text-[0.625rem] opacity-55">{{ level.range }}</div>
+                <div class="text-left text-3xs opacity-55">{{ level.range }}</div>
               </div>
             </div>
           </div>
         </div>
         <OSeparator vertical class="self-stretch mx-1" />
-        <!-- Inventory chip: the at-a-glance "how big is my system" number. Fixed
-             width regardless of how many kinds exist. Click to expand the
-             per-kind distribution (read-only here — the show/hide toggles live
-             in the "Show types" control next to it). -->
+        <!-- Inventory chip: total entity count. Click to expand the per-kind
+             distribution (read-only; the show/hide toggles live in "Show types"). -->
         <ODropdown side="bottom" align="start">
           <template #trigger>
             <OButton
@@ -82,8 +85,8 @@
               size="xs"
               icon-right="expand-more"
             >
-              <span class="font-bold text-(--o2-text-2)">{{ totalEntities }}</span>
-              <span class="ml-1 text-(--o2-text-4)">{{ t("traces.serviceGraph.entities") }}</span>
+              <span class="font-bold text-text-secondary">{{ totalEntities }}</span>
+              <span class="ml-1 text-text-body">{{ t("traces.serviceGraph.entities") }}</span>
             </OButton>
           </template>
           <div class="min-w-48" data-test="service-graph-entity-distribution">
@@ -109,10 +112,8 @@
           </div>
         </ODropdown>
         <OSeparator vertical class="self-stretch mx-1" />
-        <!-- "Show types": one control that unifies the kind inventory (each
-             kind's count) with the kind filter (show/hide) and the layout mode.
-             Counts and toggles sit together so the numbers and the control that
-             acts on them are the same thing, not two divorced widgets. -->
+        <!-- "Show types": unifies the kind inventory (each kind's count) with
+             the kind filter (show/hide) and the layout mode. -->
         <ODropdown side="bottom" align="end">
           <template #trigger>
             <OButton
@@ -124,11 +125,8 @@
             >
               {{ t("traces.serviceGraph.showTypes") }}
               <!-- Filter-active dot: signals the graph is filtered (some types
-                   hidden → entities withheld) rather than simply empty. A plain
-                   dot avoids the "is that N shown or N hidden?" ambiguity of a
-                   count; the per-type detail lives in the dropdown below. The
-                   button is `active` (primary fill) when filtered, so a white
-                   dot reads clearly on top of it. -->
+                   hidden), not simply empty. Per-type detail lives in the
+                   dropdown below. -->
               <span
                 v-if="activeFilterCount > 0"
                 class="ml-1.5 inline-block w-1.5 h-1.5 rounded-full bg-white"
@@ -144,7 +142,7 @@
             class="p-2 flex flex-col gap-2 min-w-52"
             data-test="service-graph-collapse-mode"
           >
-            <div class="text-[0.625rem] font-bold uppercase opacity-60">
+            <div class="text-3xs font-bold uppercase opacity-60">
               {{ t("traces.serviceGraph.layout") }}
             </div>
             <OToggleGroup
@@ -163,12 +161,12 @@
                 {{ t(`traces.serviceGraph.mode.${m}`) }}
               </OToggleGroupItem>
             </OToggleGroup>
-            <div class="text-[0.625rem] font-bold uppercase opacity-60 mt-1">
+            <div class="text-3xs font-bold uppercase opacity-60 mt-1">
               {{ t("traces.serviceGraph.types") }}
             </div>
             <!-- Each row: type name + live count, with a checkbox to show/hide.
-                 Services are the graph's spine (always shown) so their row is a
-                 count-only, non-toggleable entry rather than a disabled box. -->
+                 Services are always shown, so their row is count-only
+                 (non-toggleable). -->
             <div
               v-for="row in kindRows"
               :key="row.key"
@@ -200,51 +198,50 @@
         >
           <!-- Node Size — Graph View only (Tree View uses fixed sizes) -->
           <div
-            class="mb-0! whitespace-nowrap text-(--o2-text-4)! font-bold text-xs"
+            class="mb-0! whitespace-nowrap text-text-label! font-bold text-xs"
           >
             {{ t("traces.serviceGraph.nodeSize") }}
             <span class="font-normal opacity-55">| {{ t("traces.serviceGraph.nodeSizeMetric") }}</span>
           </div>
           <div class="flex items-center gap-1 py-0!">
             <div class="flex flex-row items-center gap-1.5">
-              <span class="sg-size-ring sg-size-ring--sm" />
-              <span class="text-xs text-(--o2-text-2)!">{{ t("traces.serviceGraph.sizeLow") }}</span>
+              <span class="w-4 h-4 rounded-full border-2 border-service-health-healthy bg-transparent shrink-0" />
+              <span class="text-xs text-text-secondary!">{{ t("traces.serviceGraph.sizeLow") }}</span>
             </div>
             <div class="opacity-35 text-base tracking-[0.125rem] mb-0">···</div>
             <div class="flex flex-row items-center gap-1.5">
-              <span class="sg-size-ring sg-size-ring--lg" />
-              <span class="text-xs text-(--o2-text-2)!">{{ t("traces.serviceGraph.sizeHigh") }}</span>
+              <span class="w-7 h-7 rounded-full border-2 border-service-health-healthy bg-transparent shrink-0" />
+              <span class="text-xs text-text-secondary!">{{ t("traces.serviceGraph.sizeHigh") }}</span>
             </div>
           </div>
         </div>
       </div>
     </div>
     <OCardSection
-      class="flex-1 min-h-0 relative overflow-hidden service-graph-container"
+      class="flex-1 min-h-0 relative overflow-hidden service-graph-container bg-surface-subtle!"
     >
       <!-- Graph Visualization -->
-      <OCard class="rounded-lg shadow-sm h-full">
-        <OCardSection class="p-0 h-full" style="height: 100%">
+      <OCard class="rounded-default h-full">
+        <OCardSection class="p-0 h-full">
           <div
             data-test="service-graph-container"
-            class="graph-container h-full w-full rounded overflow-hidden bg-[var(--o2-bg)]"
-            style="position: relative"
+            class="graph-container h-full w-full rounded-default overflow-hidden bg-surface-subtle relative"
           >
             <div v-if="loading" class="flex items-center justify-center h-full">
               <div class="text-center flex flex-col items-center">
-                <OSpinner size="xl" />
-                <div class="text-base font-medium mt-3 text-gray-400">
+                <OSpinner size="lg" />
+                <div class="text-sm mt-3 text-text-secondary">
                   {{ t("traces.serviceGraph.loading") }}
                 </div>
               </div>
             </div>
             <div
               v-else-if="error"
-              class="flex flex-center h-full items-center justify-center p-[0.675rem]"
+              class="flex h-full items-center justify-center p-[0.675rem]"
             >
               <div>
                 <OIcon name="error-outline" style="width: 4em; height: 4em;" />
-                <div class="text-xl font-semibold mt-3 text-[var(--o2-text-primary)]">
+                <div class="text-xl font-semibold mt-3 text-text-heading">
                   {{ error }}
                 </div>
                 <OButton
@@ -283,11 +280,10 @@
                 @click="handleNodeClick"
               />
 
-              <!-- Zoom controls: mouse-wheel zoom is disabled (pan only), so
-                   these explicit buttons drive zoom + fit-to-screen. Floated
-                   bottom-right like a map control. -->
+              <!-- Zoom controls: explicit buttons drive zoom + fit-to-screen,
+                   floated bottom-right like a map control. -->
               <div
-                class="absolute bottom-3 right-3 z-10 flex flex-col rounded-md border border-border-default bg-surface-panel shadow-sm overflow-hidden"
+                class="absolute bottom-3 right-3 z-10 flex flex-col rounded-default border border-border-default bg-surface-panel overflow-hidden"
                 data-test="service-graph-zoom-controls"
               >
                 <OButton
@@ -343,7 +339,7 @@
     </OCardSection>
   </OCard>
 
-  <!-- Enhanced Settings Dialog -->
+  <!-- Settings Dialog -->
   <ODialog data-test="service-graph-settings-dialog"
     v-model:open="showSettings"
     size="sm"
@@ -354,7 +350,7 @@
     @click:primary="resetSettings"
   >
     <div class="gap-3">
-      <div class="text-xs text-gray-400">
+      <div class="text-xs text-text-muted">
         {{ t("traces.serviceGraph.settingsDescription") }}
         <OTooltip :content="t('traces.serviceGraph.settingsTooltip')" />
       </div>
@@ -374,6 +370,7 @@ import {
 } from "vue";
 import * as echarts from "echarts";
 import { useStore } from "vuex";
+import useTheme from "@/composables/useTheme";
 import { useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
 import serviceGraphService from "@/services/service_graph";
@@ -468,6 +465,7 @@ export default defineComponent({
   emits: ["view-traces", "request:stream-change", "jump-to-stream-data"],
   setup(props, { emit }) {
     const store = useStore();
+    const { isDark } = useTheme();
     const router = useRouter();
     const { t } = useI18n();
     const { getStreams } = useStreams();
@@ -553,9 +551,9 @@ export default defineComponent({
 
     // ── Zoom controls ─────────────────────────────────────────────────────────
     // The mouse still zooms (roam:true) so you can focus an area with the wheel;
-    // scaleLimit on the series bounds it so it can't run away (the old "erratic"
-    // feel). The +/- buttons drive the SAME series `zoom` option via setOption,
-    // reading the chart's CURRENT zoom first so button + wheel stay in sync.
+    // scaleLimit on the series bounds it so it can't run away. The +/- buttons
+    // drive the SAME series `zoom` option via setOption, reading the chart's
+    // CURRENT zoom first so button + wheel stay in sync.
     const ZOOM_MIN = 0.4;
     const ZOOM_MAX = 4;
 
@@ -630,21 +628,18 @@ export default defineComponent({
       return counts;
     });
 
-    // Total entity count for the header inventory chip. Sums every kind — the
-    // single "how big is my system" number a user reads at a glance.
+    // Total entity count for the header inventory chip. Sums every kind.
     const totalEntities = computed(() => {
       const c = kindCounts.value;
       return c.service + c.database + c.queue + c.external + c.rpc;
     });
 
     // The kind rows for the "Show types" control: label + count + whether the
-    // user can hide it. Services are always shown (they're the graph's spine),
-    // so only the dependency kinds are toggleable. Order matches the graph's
-    // reading order. Counts and toggles live together so the inventory and the
-    // filter are one thing, not two.
+    // user can hide it. Services are always shown, so only the dependency kinds
+    // are toggleable. Order matches the graph's reading order.
     // Health levels for the "Border Color | Errors" legend: label + error-rate
     // range + the CSS class carrying its color token. Data-driven so the legend
-    // markup is one v-for (no repeated inline-styled swatches).
+    // markup is one v-for.
     const healthLevels = computed(() => [
       { key: "healthy", label: t("traces.serviceGraph.status.healthy"), range: t("traces.serviceGraph.range.healthy") },
       { key: "degraded", label: t("traces.serviceGraph.status.degraded"), range: t("traces.serviceGraph.range.degraded") },
@@ -664,9 +659,7 @@ export default defineComponent({
     ]);
 
     // How many entity types the user has hidden. Non-zero means the graph is
-    // filtered — the "Show types" button reflects this (active state + count)
-    // so the user knows entities are being withheld, not that the graph is
-    // simply empty.
+    // filtered — the "Show types" button reflects this (active state + count).
     const activeFilterCount = computed(() => hiddenKinds.value.size);
 
     // Key to control chart recreation - only change when layout/visualization type changes
@@ -711,7 +704,7 @@ export default defineComponent({
           ? convertServiceGraphToTree(
               filteredGraphData.value,
               layoutType,
-              store.state.theme === 'dark',
+              isDark.value,
               // Pass the live panel height so the tree can auto-shrink its
               // label font + node size to the fit-to-view compression, keeping
               // labels from overlapping on tall (many-leaf) graphs.
@@ -725,7 +718,7 @@ export default defineComponent({
               // terminal leaves); honor an explicit 'force' choice from the user.
               layoutType === "force" ? "force" : "layered",
               new Map(),
-              store.state.theme === 'dark',
+              isDark.value,
               undefined,
               graphContainerRef.value?.clientWidth || 1200,
               graphContainerRef.value?.clientHeight || 700,
@@ -748,11 +741,11 @@ export default defineComponent({
       return {
         ...newOptions,
         // Always full-replace. ECharts cannot swap a series TYPE via a merge, so
-        // a merge (the old graph path) left the previous `tree` series in place
-        // and Graph View rendered blank after a tree→graph switch. Both views now
-        // use fixed node positions (tree: computeTreeLayout; graph: layered
-        // layout with explicit x/y), so a replace re-renders at the same
-        // coordinates — no zoom/pan jump — while guaranteeing the series swaps.
+        // a merge leaves the previous `tree` series in place and Graph View
+        // renders blank after a tree→graph switch. Both views use fixed node
+        // positions (tree: computeTreeLayout; graph: layered layout with explicit
+        // x/y), so a replace re-renders at the same coordinates — no zoom/pan
+        // jump — while guaranteeing the series swaps.
         notMerge: true,
         lazyUpdate: true, // Prevent viewport reset when only styles change
         silent: true, // Disable animations during update to prevent position jumps
@@ -905,7 +898,7 @@ export default defineComponent({
 
       // Custom tooltip element — node tooltips use innerHTML, edge tooltips use an ECharts mini chart
       const tooltipEl = document.createElement("div");
-      const isDarkInit = store.state.theme === 'dark';
+      const isDarkInit = isDark.value;
       tooltipEl.style.cssText = `
         position: absolute; pointer-events: none; z-index: 9999;
         background: ${isDarkInit ? "rgba(22, 22, 26, 0.90)" : "rgba(255, 255, 255, 0.88)"};
@@ -1131,7 +1124,7 @@ export default defineComponent({
           '-apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif';
         tooltipEl.style.letterSpacing = "0.01em";
         tooltipEl.style.whiteSpace = "nowrap";
-        tooltipEl.style.color = store.state.theme === 'dark'
+        tooltipEl.style.color = isDark.value
           ? "rgba(255,255,255,0.88)"
           : "rgba(0,0,0,0.82)";
       };
@@ -1895,55 +1888,11 @@ export default defineComponent({
 </script>
 
 <!-- Flowing edge animation — non-scoped so it reaches inside ECharts SVG output -->
-<style>
-/* Legend swatches — driven by the shared health-color design tokens so the
-   legend rings match the graph's node border colors without inline styles. */
-.sg-health-ring {
-  width: 0.75rem;
-  height: 0.75rem;
-  border-radius: 9999px;
-  border: 2px solid;
-  background: transparent;
-  flex: none;
-}
-.sg-health-ring--healthy {
-  border-color: var(--o2-service-health-healthy);
-}
-.sg-health-ring--degraded {
-  border-color: var(--o2-service-health-degraded);
-}
-.sg-health-ring--warning {
-  border-color: var(--o2-service-health-warning);
-}
-.sg-health-ring--critical {
-  border-color: var(--o2-service-health-critical);
-}
-
-/* Node-size legend rings: two sizes, both the "healthy" hue (size, not health,
-   is what this legend communicates). */
-.sg-size-ring {
-  border-radius: 9999px;
-  border: 2px solid var(--o2-service-health-healthy);
-  background: transparent;
-  flex-shrink: 0;
-}
-.sg-size-ring--sm {
-  width: 1rem;
-  height: 1rem;
-}
-.sg-size-ring--lg {
-  width: 1.75rem;
-  height: 1.75rem;
-}
-
-.service-graph-container {
-  background: #0f1419 !important;
-}
-
-.body--light .service-graph-container {
-  background: #ffffff !important;
-}
-
+<style scoped>
+/* keep(lib-override:echarts): dashed edge paths are rendered inside ECharts'
+   SVG DOM (no scope id, reached via :deep), animated by a keyframe that must
+   travel with the rule. ECharts may expose stroke-dasharray as an attribute or
+   an inline style depending on version — both are covered. */
 @keyframes sg-edge-flow {
   from {
     stroke-dashoffset: 14;
@@ -1953,19 +1902,9 @@ export default defineComponent({
   }
 }
 
-/*
- * Target dashed edge paths rendered by ECharts graph series.
- * ECharts SVG mode may set stroke-dasharray as an HTML attribute OR inside
- * an inline style depending on the version — we cover both.
- */
-.graph-container svg path[stroke-dasharray],
-.graph-container svg path[style*="stroke-dasharray"] {
+.graph-container :deep(svg path[stroke-dasharray]),
+.graph-container :deep(svg path[style*="stroke-dasharray"]) {
   animation: sg-edge-flow 0.5s linear infinite;
   animation-fill-mode: both;
 }
-
-.body--dark [data-test="service-graph-stream-selector"] .q-field,
-.body--dark [data-test="service-graph-search-input"] .q-field {
-  background: var(--o2-primary-background);
-}
 </style>
diff --git a/web/src/plugins/traces/ServiceGraphEdgeSidePanel.vue b/web/src/plugins/traces/ServiceGraphEdgeSidePanel.vue
deleted file mode 100644
index 5713951612..0000000000
--- a/web/src/plugins/traces/ServiceGraphEdgeSidePanel.vue
+++ /dev/null
@@ -1,1205 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <transition name="slide">
-    <div
-      v-if="visible"
-      class="service-graph-edge-side-panel absolute right-0 top-0 w-[420px] h-full z-[100] flex flex-col bg-[#1a1f2e] border-l border-[#2d3548] shadow-[0_10px_15px_-3px_rgba(0,0,0,0.5)] overflow-hidden animate-[slideIn_0.3s_ease-out]"
-      data-test="service-graph-edge-side-panel"
-    >
-      <!-- Header -->
-      <div
-        class="panel-header flex items-center justify-between py-3 px-4 border-b border-[#2d3548] bg-[#1a1f2e] shrink-0"
-        data-test="service-graph-edge-side-panel-header"
-      >
-        <div class="panel-title flex-1 min-w-0">
-          <h2
-            class="edge-name text-[15px] font-semibold m-0 leading-[1.2] text-[#e4e7eb] tracking-normal flex items-center gap-2 flex-wrap"
-            data-test="service-graph-edge-side-panel-route"
-          >
-            <span class="from-service text-[#60a5fa] overflow-hidden text-ellipsis whitespace-nowrap">{{ selectedEdge?.from }}</span>
-            <OIcon name="arrow-forward" size="xs" class="edge-arrow text-[rgba(255,255,255,0.35)] shrink-0" />
-            <span class="to-service text-[#a78bfa] overflow-hidden text-ellipsis whitespace-nowrap">{{ selectedEdge?.to }}</span>
-            <OTag type="serviceStatus" :value="edgeHealth.status">{{ edgeHealth.text }}</OTag>
-          </h2>
-        </div>
-        <div class="panel-header-actions flex items-center shrink-0">
-          <OButton
-            variant="ghost"
-            size="icon"
-            @click="handleClose"
-            data-test="service-graph-edge-side-panel-close-btn"
-          >
-            <OIcon name="close" size="xs" />
-          </OButton>
-        </div>
-      </div>
-
-      <!-- Content -->
-      <div
-        class="panel-content flex-1 min-h-0 flex flex-col overflow-x-hidden bg-[#0f1419] px-3 pb-3"
-      >
-
-        <!-- Metrics Section -->
-        <div class="panel-section metrics-section p-0 mt-3" data-test="service-graph-edge-side-panel-metrics">
-          <div class="metric-card metric-card-full" data-test="service-graph-edge-side-panel-request-rate">
-
-            <!-- Traffic Summary: Total | Failed | Error Rate -->
-            <div class="traffic-row">
-              <div class="traffic-pill total" data-test="service-graph-edge-side-panel-total">
-                <OIcon name="swap-horiz" size="xs" />
-                <span class="traffic-label">{{ t('traces.serviceGraphEdgeSidePanel.total') }}</span>
-                <span class="traffic-value">{{ formatNumber(selectedEdge?.total_requests ?? 0) }}</span>
-                <OTooltip :content="t('traces.serviceGraphEdgeSidePanel.totalTooltip')" />
-              </div>
-              <div class="traffic-pill failed" data-test="service-graph-edge-side-panel-failed">
-                <OIcon name="close" size="xs" />
-                <span class="traffic-label">{{ t('traces.serviceGraphEdgeSidePanel.failed') }}</span>
-                <span class="traffic-value">{{ formatNumber(selectedEdge?.failed_requests ?? 0) }}</span>
-                <OTooltip :content="t('traces.serviceGraphEdgeSidePanel.failedTooltip')" />
-              </div>
-              <div
-                class="traffic-pill error-rate"
-                :class="getErrorRateClass()"
-                data-test="service-graph-edge-side-panel-error-rate"
-              >
-                <OIcon name="error-outline" size="xs" />
-                <span class="traffic-label">{{ t('traces.serviceGraphEdgeSidePanel.errorRate') }}</span>
-                <span class="traffic-value">{{ errorRateFormatted }}</span>
-                <OTooltip :content="t('traces.serviceGraphEdgeSidePanel.errorRateTooltip')" />
-              </div>
-            </div>
-
-            <div class="metric-horizontal-divider"></div>
-
-            <!-- Latency baseline comparison table: P50 / P95 / P99 vs baseline -->
-            <div class="latency-table">
-              <div class="latency-header-row">
-                <span class="col-metric"></span>
-                <span class="col-current">{{ t('traces.serviceGraphEdgeSidePanel.current') }}</span>
-                <span class="col-baseline">{{ t('traces.serviceGraphEdgeSidePanel.baseline') }}</span>
-                <span class="col-delta">{{ t('traces.serviceGraphEdgeSidePanel.vsBaseline') }}</span>
-              </div>
-
-              <!-- P50 -->
-              <div
-                class="latency-data-row"
-                :class="getLatencyClass(p50Latency)"
-                data-test="service-graph-edge-side-panel-p50"
-              >
-                <span class="col-metric"><OTag type="percentileTag" value="p50" /></span>
-                <span class="col-current latency-current">{{ p50Latency }}</span>
-                <span class="col-baseline latency-baseline">{{ baselineP50 }}</span>
-                <span class="col-delta">
-                  <OTag type="deltaTrend" :value="getDeltaTrend(p50DeltaPct)">
-                    <template #icon>
-                      <OIcon
-                        :name="p50DeltaPct > 2 ? 'arrow-upward' : p50DeltaPct < -2 ? 'arrow-downward' : 'remove'"
-                        size="xs"
-                      />
-                    </template>
-                    {{ p50DeltaFormatted }}
-                  </OTag>
-                </span>
-              </div>
-
-              <!-- P95 -->
-              <div
-                class="latency-data-row"
-                :class="getLatencyClass(p95Latency)"
-                data-test="service-graph-edge-side-panel-p95"
-              >
-                <span class="col-metric"><OTag type="percentileTag" value="p95" /></span>
-                <span class="col-current latency-current">{{ p95Latency }}</span>
-                <span class="col-baseline latency-baseline">{{ baselineP95 }}</span>
-                <span class="col-delta">
-                  <OTag type="deltaTrend" :value="getDeltaTrend(p95DeltaPct)">
-                    <template #icon>
-                      <OIcon
-                        :name="p95DeltaPct > 2 ? 'arrow-upward' : p95DeltaPct < -2 ? 'arrow-downward' : 'remove'"
-                        size="xs"
-                      />
-                    </template>
-                    {{ p95DeltaFormatted }}
-                  </OTag>
-                </span>
-              </div>
-
-              <!-- P99 -->
-              <div
-                class="latency-data-row"
-                :class="getLatencyClass(p99Latency)"
-                data-test="service-graph-edge-side-panel-p99"
-              >
-                <span class="col-metric"><OTag type="percentileTag" value="p99" /></span>
-                <span class="col-current latency-current">{{ p99Latency }}</span>
-                <span class="col-baseline latency-baseline">{{ baselineP99 }}</span>
-                <span class="col-delta">
-                  <OTag type="deltaTrend" :value="getDeltaTrend(p99DeltaPct)">
-                    <template #icon>
-                      <OIcon
-                        :name="p99DeltaPct > 2 ? 'arrow-upward' : p99DeltaPct < -2 ? 'arrow-downward' : 'remove'"
-                        size="xs"
-                      />
-                    </template>
-                    {{ p99DeltaFormatted }}
-                  </OTag>
-                </span>
-              </div>
-            </div>
-
-          </div>
-        </div>
-
-        <!-- RED Chart Section -->
-        <div class="panel-section trend-section p-0 mt-3 flex-1 min-h-0 flex flex-col" data-test="service-graph-edge-side-panel-trend">
-          <div class="section-header flex items-center justify-between mb-2 shrink-0">
-            <!-- R·E·D Tab switcher -->
-            <OToggleGroup
-              :model-value="activeTab"
-              @update:model-value="switchTab($event as ChartTab)"
-              data-test="service-graph-edge-chart-tabs"
-              size="xs"
-            >
-              <OToggleGroupItem
-                v-for="tab in chartTabs"
-                :key="tab.key"
-                :value="tab.key"
-                :data-test="`service-graph-edge-chart-tab-${tab.key}`"
-              >
-                {{ tab.label }}
-              </OToggleGroupItem>
-            </OToggleGroup>
-            <span class="shrink-0">
-              <OButton
-                variant="ghost-muted"
-                size="xs"
-                @click="loadTrend"
-                :loading="trendLoading"
-              >
-                <template #icon-left>
-                  <OIcon name="refresh" size="xs" />
-                </template>
-                {{ t('traces.serviceGraphEdgeSidePanel.refresh') }}
-              </OButton>
-            </span>
-          </div>
-
-          <!-- Loading -->
-          <div v-if="trendLoading" class="trend-state">
-            <OSpinner size="xs" />
-            <span>{{ t('traces.serviceGraphEdgeSidePanel.loadingData') }}</span>
-          </div>
-
-          <!-- Error -->
-          <div v-else-if="trendError" class="trend-state trend-error">
-            <OIcon name="warning" size="sm" />
-            <span>{{ trendError }}</span>
-          </div>
-
-          <!-- Empty -->
-          <div v-else-if="!trendData || !trendDataPoints.length" class="trend-state trend-empty">
-            <OIcon name="show-chart" size="md" class="trend-empty-icon" />
-            <span>{{ t('traces.serviceGraphEdgeSidePanel.noDataAvailable') }}</span>
-          </div>
-
-          <!-- Chart — always in DOM when data exists so ref is stable -->
-          <div
-            ref="trendChartRef"
-            class="trend-chart"
-            :class="{ 'trend-chart--hidden': trendLoading || trendError || !trendData || !trendDataPoints.length }"
-            data-test="service-graph-edge-side-panel-trend-chart"
-          ></div>
-        </div>
-
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script lang="ts">
-import {
-  defineComponent,
-  ref,
-  computed,
-  watch,
-  onBeforeUnmount,
-  nextTick,
-  type PropType,
-} from 'vue';
-import { useStore } from 'vuex';
-import { useI18n } from "vue-i18n";
-import * as echarts from 'echarts';
-import serviceGraphService from '@/services/service_graph';
-import OButton from '@/lib/core/Button/OButton.vue';
-import OToggleGroup from '@/lib/core/ToggleGroup/OToggleGroup.vue';
-import OToggleGroupItem from '@/lib/core/ToggleGroup/OToggleGroupItem.vue';
-import OSpinner from "@/lib/feedback/Spinner/OSpinner.vue";
-import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
-import OIcon from "@/lib/core/Icon/OIcon.vue";
-import OTag from "@/lib/core/Badge/OTag.vue";
-
-type ChartTab = 'rate' | 'errors' | 'duration';
-
-export default defineComponent({
-  name: 'ServiceGraphEdgeSidePanel',
-  components: { OButton, OToggleGroup, OToggleGroupItem, OSpinner, OTooltip,
-    OIcon, OTag,
-},
-  props: {
-    selectedEdge: {
-      type: Object as PropType<{
-        from: string;
-        to: string;
-        total_requests: number;
-        failed_requests: number;
-        error_rate: number;
-        p50_latency_ns: number;
-        p95_latency_ns: number;
-        p99_latency_ns: number;
-        baseline_p50_latency_ns?: number;
-        baseline_p95_latency_ns?: number;
-        baseline_p99_latency_ns?: number;
-      } | null>,
-      default: null,
-    },
-    visible: {
-      type: Boolean,
-      required: true,
-    },
-  },
-  emits: ['close'],
-  setup(props, { emit }) {
-    const store = useStore();
-    const { t } = useI18n();
-
-    const trendChartRef = ref<HTMLElement | null>(null);
-    const trendLoading = ref(false);
-    const trendError = ref<string | null>(null);
-    const trendData = ref<any>(null);
-    let chartInstance: echarts.ECharts | null = null;
-    let chartResizeObserver: ResizeObserver | null = null;
-
-    // ── RED tab state ────────────────────────────────────────────────────────
-
-    const chartTabs: { key: ChartTab; label: string }[] = [
-      { key: 'rate',     label: t('traces.serviceGraphEdgeSidePanel.rate')     },
-      { key: 'errors',   label: t('traces.serviceGraphEdgeSidePanel.errors')   },
-      { key: 'duration', label: t('traces.serviceGraphEdgeSidePanel.duration') },
-    ];
-    const activeTab = ref<ChartTab>('rate');
-
-    // ── Formatters ──────────────────────────────────────────────────────────
-
-    const formatNumber = (num: number): string => {
-      if (num >= 1_000_000) return (num / 1_000_000).toFixed(1) + 'M';
-      if (num >= 1_000) return (num / 1_000).toFixed(1) + 'K';
-      return num.toString();
-    };
-
-    const formatLatencyNs = (ns: number): string => {
-      if (!ns || ns === 0) return 'N/A';
-      const ms = ns / 1_000_000;
-      if (ms >= 1_000) return (ms / 1_000).toFixed(2) + 's';
-      if (ms < 10) return ms.toFixed(2) + 'ms';
-      if (ms < 100) return ms.toFixed(1) + 'ms';
-      return ms.toFixed(0) + 'ms';
-    };
-
-    // ── Computed metrics ────────────────────────────────────────────────────
-
-    const errorRateFormatted = computed(() => {
-      const rate = props.selectedEdge?.error_rate ?? 0;
-      return rate.toFixed(2) + '%';
-    });
-
-    const p50Latency = computed(() =>
-      formatLatencyNs(props.selectedEdge?.p50_latency_ns ?? 0)
-    );
-    const p95Latency = computed(() =>
-      formatLatencyNs(props.selectedEdge?.p95_latency_ns ?? 0)
-    );
-    const p99Latency = computed(() =>
-      formatLatencyNs(props.selectedEdge?.p99_latency_ns ?? 0)
-    );
-
-    // ── Baseline latency computeds ───────────────────────────────────────────
-
-    const baselineP50 = computed(() =>
-      formatLatencyNs(props.selectedEdge?.baseline_p50_latency_ns ?? 0)
-    );
-    const baselineP95 = computed(() =>
-      formatLatencyNs(props.selectedEdge?.baseline_p95_latency_ns ?? 0)
-    );
-    const baselineP99 = computed(() =>
-      formatLatencyNs(props.selectedEdge?.baseline_p99_latency_ns ?? 0)
-    );
-
-    const calcDeltaPct = (current: number, baseline: number): number => {
-      if (!baseline || baseline === 0) return 0;
-      return ((current - baseline) / baseline) * 100;
-    };
-
-    const p50DeltaPct = computed(() =>
-      calcDeltaPct(
-        props.selectedEdge?.p50_latency_ns ?? 0,
-        props.selectedEdge?.baseline_p50_latency_ns ?? 0
-      )
-    );
-    const p95DeltaPct = computed(() =>
-      calcDeltaPct(
-        props.selectedEdge?.p95_latency_ns ?? 0,
-        props.selectedEdge?.baseline_p95_latency_ns ?? 0
-      )
-    );
-    const p99DeltaPct = computed(() =>
-      calcDeltaPct(
-        props.selectedEdge?.p99_latency_ns ?? 0,
-        props.selectedEdge?.baseline_p99_latency_ns ?? 0
-      )
-    );
-
-    const formatDelta = (pct: number): string => {
-      if (!props.selectedEdge?.baseline_p50_latency_ns) return 'N/A';
-      if (Math.abs(pct) < 0.5) return '±0%';
-      const sign = pct > 0 ? '+' : '';
-      return `${sign}${pct.toFixed(1)}%`;
-    };
-
-    const p50DeltaFormatted = computed(() => formatDelta(p50DeltaPct.value));
-    const p95DeltaFormatted = computed(() => formatDelta(p95DeltaPct.value));
-    const p99DeltaFormatted = computed(() => formatDelta(p99DeltaPct.value));
-
-    const getDeltaTrend = (pct: number): string => {
-      if (Math.abs(pct) < 2) return 'neutral';
-      if (pct <= -5) return 'improved';
-      if (pct < 0) return 'slight';
-      if (pct < 20) return 'warning';
-      return 'critical';
-    };
-
-    const trendDataPoints = computed<any[]>(
-      () => trendData.value?.data_points ?? []
-    );
-
-    // ── Health badge ────────────────────────────────────────────────────────
-
-    const edgeHealth = computed(() => {
-      const rate = props.selectedEdge?.error_rate ?? 0;
-      if (rate > 10) return { status: 'critical', text: t('traces.serviceGraphEdgeSidePanel.critical') };
-      if (rate > 5) return { status: 'degraded', text: t('traces.serviceGraphEdgeSidePanel.degraded') };
-      return { status: 'healthy', text: t('traces.serviceGraphEdgeSidePanel.healthy') };
-    });
-
-    // ── CSS class helpers ───────────────────────────────────────────────────
-
-    const getErrorRateClass = (): string => {
-      const rate = props.selectedEdge?.error_rate ?? 0;
-      if (rate < 1) return 'status-healthy';
-      if (rate < 5) return 'status-warning';
-      return 'status-critical';
-    };
-
-    const getLatencyClass = (latencyStr: string): string => {
-      if (latencyStr === 'N/A') return 'status-unknown';
-      let ms = 0;
-      if (latencyStr.endsWith('ms')) {
-        ms = parseFloat(latencyStr);
-      } else if (latencyStr.endsWith('s')) {
-        ms = parseFloat(latencyStr) * 1000;
-      }
-      if (ms < 100) return 'status-healthy';
-      if (ms < 500) return 'status-warning';
-      return 'status-critical';
-    };
-
-    // ── ECharts chart builders ──────────────────────────────────────────────
-
-    const disposeChart = () => {
-      chartResizeObserver?.disconnect();
-      chartResizeObserver = null;
-      if (chartInstance) {
-        chartInstance.dispose();
-        chartInstance = null;
-      }
-    };
-
-    /** Shared base: timestamps, colors, grid, tooltip base, legend, xAxis */
-    const getSharedBase = (points: any[]) => {
-      const isDark = store.state.theme === 'dark';
-      const textColor = isDark ? 'rgba(255,255,255,0.6)' : 'rgba(0,0,0,0.55)';
-      const gridColor = isDark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.08)';
-      const tooltipBg = isDark ? 'rgba(22,22,26,0.92)' : 'rgba(255,255,255,0.96)';
-      const tooltipBorder = isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.12)';
-      const tooltipText = isDark ? '#e4e7eb' : '#202124';
-
-      // Timestamps are in microseconds (1.77e15). Current time:
-      //   nanoseconds  ~1.77e18  → threshold > 1e16 → divide by 1_000_000
-      //   microseconds ~1.77e15  → threshold > 1e13 → divide by 1_000
-      //   milliseconds ~1.77e12  → threshold > 1e10 → use as-is
-      //   seconds      ~1.77e9   → multiply by 1_000
-      const toMs = (ts: number) =>
-        ts > 1e16 ? ts / 1_000_000   // nanoseconds
-        : ts > 1e13 ? ts / 1_000     // microseconds (actual format)
-        : ts > 1e10 ? ts             // milliseconds
-        : ts * 1_000;                // seconds
-
-      const xAxisLabels = points.map((p) => {
-        const d = new Date(toMs(p.timestamp));
-        return d.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false });
-      });
-      const tooltipLabels = points.map((p) => {
-        const d = new Date(toMs(p.timestamp));
-        const date = d.toLocaleDateString('en-CA');
-        const time = d.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false });
-        return `${date} ${time}`;
-      });
-      const xInterval = Math.max(0, Math.floor(xAxisLabels.length / 3) - 1);
-
-      return {
-        isDark, textColor, gridColor, tooltipBg, tooltipBorder, tooltipText,
-        xAxisLabels, tooltipLabels, xInterval,
-        xAxis: {
-          type: 'category',
-          data: xAxisLabels,
-          axisLine: { lineStyle: { color: gridColor } },
-          axisTick: { show: false },
-          axisLabel: { color: textColor, fontSize: 10, interval: xInterval },
-          splitLine: { show: false },
-        },
-        legend: {
-          bottom: 0,
-          left: 'center',
-          textStyle: { color: textColor, fontSize: 11 },
-          itemWidth: 12,
-          itemHeight: 4,
-          icon: 'roundRect',
-        },
-        baseTooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'cross',
-            lineStyle: { color: isDark ? 'rgba(255,255,255,0.3)' : 'rgba(0,0,0,0.2)' },
-          },
-          backgroundColor: tooltipBg,
-          borderColor: tooltipBorder,
-          textStyle: { color: tooltipText, fontSize: 11 },
-        },
-      };
-    };
-
-    /** Rate tab: total_requests over time — line chart matching traces page */
-    const buildRateOptions = (points: any[]) => {
-      const b = getSharedBase(points);
-      const data = points.map((p) => p.total_requests ?? 0);
-      const lineColor = '#5470c6';
-
-      return {
-        backgroundColor: 'transparent',
-        animation: true,
-        grid: { left: 44, right: 16, top: 12, bottom: 36 },
-        tooltip: {
-          ...b.baseTooltip,
-          formatter: (params: any[]) => {
-            const idx = params[0]?.dataIndex ?? 0;
-            const label = b.tooltipLabels[idx] ?? params[0]?.axisValue ?? '';
-            const val = params[0]?.value ?? 0;
-            return `<div style="font-size:11px;min-width:160px">
-              <div style="margin-bottom:4px;opacity:0.6">${label}</div>
-              <span style="color:${lineColor}">● </span><span style="font-weight:600">: ${formatNumber(val)}</span>
-            </div>`;
-          },
-        },
-        xAxis: b.xAxis,
-        yAxis: {
-          type: 'value',
-          axisLine: { show: false },
-          axisTick: { show: false },
-          axisLabel: {
-            color: b.textColor,
-            fontSize: 10,
-            formatter: (v: number) => formatNumber(v),
-          },
-          splitLine: { lineStyle: { color: b.gridColor } },
-        },
-        series: [
-          {
-            name: 'Rate',
-            type: 'line',
-            data,
-            smooth: true,
-            symbol: 'none',
-            lineStyle: { color: lineColor, width: 1.5 },
-            itemStyle: { color: lineColor },
-            areaStyle: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(84,112,198,0.3)' },
-                { offset: 1, color: 'rgba(84,112,198,0.02)' },
-              ]),
-            },
-          },
-        ],
-      };
-    };
-
-    /** Errors tab: failed_requests bar chart matching traces page style */
-    const buildErrorsOptions = (points: any[]) => {
-      const b = getSharedBase(points);
-      const failed = points.map((p) => p.failed_requests ?? 0);
-      const barColor = '#f44336';
-
-      return {
-        backgroundColor: 'transparent',
-        animation: true,
-        grid: { left: 44, right: 16, top: 12, bottom: 36 },
-        tooltip: {
-          ...b.baseTooltip,
-          formatter: (params: any[]) => {
-            const idx = params[0]?.dataIndex ?? 0;
-            const label = b.tooltipLabels[idx] ?? params[0]?.axisValue ?? '';
-            const val = params[0]?.value ?? 0;
-            return `<div style="font-size:11px;min-width:160px">
-              <div style="margin-bottom:4px;opacity:0.6">${label}</div>
-              <span style="color:${barColor}">● </span><span style="font-weight:600">: ${formatNumber(val)}</span>
-            </div>`;
-          },
-        },
-        xAxis: b.xAxis,
-        yAxis: {
-          type: 'value',
-          axisLine: { show: false },
-          axisTick: { show: false },
-          axisLabel: {
-            color: b.textColor,
-            fontSize: 10,
-            formatter: (v: number) => formatNumber(v),
-          },
-          splitLine: { lineStyle: { color: b.gridColor } },
-        },
-        series: [
-          {
-            name: 'Errors',
-            type: 'bar',
-            data: failed,
-            barMaxWidth: 8,
-            itemStyle: { color: barColor },
-          },
-        ],
-      };
-    };
-
-    /** Duration tab: P50/P95/P99 lines matching traces page colors & series names */
-    const buildDurationOptions = (points: any[]) => {
-      const b = getSharedBase(points);
-      const toMs = (ns: number) => ns / 1_000_000;
-      const fmtMs = (ms: number) => {
-        if (ms >= 60_000) return `${(ms / 60_000).toFixed(2)}m`;
-        if (ms >= 1_000) return `${(ms / 1_000).toFixed(2)}s`;
-        return `${ms.toFixed(2)}ms`;
-      };
-
-      const p50 = points.map((p) => toMs(p.p50_latency_ns ?? 0));
-      const p95 = points.map((p) => toMs(p.p95_latency_ns ?? 0));
-      const p99 = points.map((p) => toMs(p.p99_latency_ns ?? 0));
-
-      const makeSeries = (name: string, data: number[], color: string) => ({
-        name,
-        type: 'line',
-        data,
-        smooth: true,
-        symbol: 'none',
-        lineStyle: { color, width: 1.5 },
-        itemStyle: { color },
-      });
-
-      return {
-        backgroundColor: 'transparent',
-        animation: true,
-        grid: { left: 52, right: 16, top: 12, bottom: 36 },
-        tooltip: {
-          ...b.baseTooltip,
-          formatter: (params: any[]) => {
-            const idx = params[0]?.dataIndex ?? 0;
-            const label = b.tooltipLabels[idx] ?? params[0]?.axisValue ?? '';
-            const rows = params.map((p: any) =>
-              `<div style="display:flex;justify-content:space-between;gap:16px;">
-                <span style="color:${p.color}">● ${p.seriesName}</span>
-                <span style="font-weight:600">: ${fmtMs(p.value)}</span>
-              </div>`
-            ).join('');
-            return `<div style="font-size:11px;min-width:160px">
-              <div style="margin-bottom:4px;opacity:0.6">${label}</div>
-              ${rows}
-            </div>`;
-          },
-        },
-        legend: b.legend,
-        xAxis: b.xAxis,
-        yAxis: {
-          type: 'value',
-          axisLine: { show: false },
-          axisTick: { show: false },
-          axisLabel: { color: b.textColor, fontSize: 10, formatter: fmtMs },
-          splitLine: { lineStyle: { color: b.gridColor } },
-        },
-        series: [
-          makeSeries('p99',         p99, '#f44336'),
-          makeSeries('p95',         p95, '#ff9800'),
-          makeSeries('p50 (Median)', p50, '#4caf50'),
-        ],
-      };
-    };
-
-    /** Dispatch to the correct builder based on active tab */
-    const buildChartOptions = (points: any[]) => {
-      if (activeTab.value === 'rate') return buildRateOptions(points);
-      if (activeTab.value === 'errors') return buildErrorsOptions(points);
-      return buildDurationOptions(points);
-    };
-
-    const renderChart = () => {
-      if (!trendChartRef.value) return;
-      const points = trendDataPoints.value;
-      if (!points.length) return;
-
-      if (!chartInstance) {
-        chartInstance = echarts.init(trendChartRef.value, undefined, {
-          renderer: 'canvas',
-          devicePixelRatio: window.devicePixelRatio || 1,
-        });
-        chartResizeObserver = new ResizeObserver(() => {
-          chartInstance?.resize();
-        });
-        chartResizeObserver.observe(trendChartRef.value);
-      }
-      chartInstance.setOption(buildChartOptions(points), { notMerge: true });
-    };
-
-    // ── Fetch trend data ────────────────────────────────────────────────────
-
-    const loadTrend = async () => {
-      if (!props.selectedEdge) return;
-      const { from, to } = props.selectedEdge;
-      const orgId = store.state.selectedOrganization?.identifier;
-      if (!orgId) return;
-
-      trendLoading.value = true;
-      trendError.value = null;
-      trendData.value = null;
-      disposeChart();
-
-      try {
-        const res = await serviceGraphService.getEdgeHistory(orgId, {
-          client_service: from,
-          server_service: to,
-        });
-        trendData.value = res.data;
-      } catch {
-        trendError.value = t('traces.serviceGraphEdgeSidePanel.failedToLoadTrend');
-      } finally {
-        trendLoading.value = false;
-      }
-    };
-
-    // Switch tab and re-render immediately if data is already loaded
-    const switchTab = async (tab: ChartTab) => {
-      activeTab.value = tab;
-      if (!trendLoading.value && trendDataPoints.value.length && chartInstance) {
-        await nextTick();
-        chartInstance.setOption(buildChartOptions(trendDataPoints.value), { notMerge: true });
-      }
-    };
-
-    // ── Watchers ────────────────────────────────────────────────────────────
-
-    watch(
-      () => [props.selectedEdge?.from, props.selectedEdge?.to, props.visible] as const,
-      ([ , visible]) => {
-        if (visible && props.selectedEdge) {
-          loadTrend();
-        } else if (!visible) {
-          disposeChart();
-          trendData.value = null;
-          trendError.value = null;
-        }
-      },
-      { immediate: true }
-    );
-
-    // Render once data arrives (chart div becomes visible after loading=false)
-    watch(trendLoading, async (isLoading) => {
-      if (!isLoading && trendData.value && trendDataPoints.value.length) {
-        await nextTick();
-        renderChart();
-      }
-    });
-
-    // Re-render when dark mode toggles
-    watch(
-      () => store.state.theme === 'dark',
-      async () => {
-        if (!trendLoading.value && trendDataPoints.value.length) {
-          await nextTick();
-          if (chartInstance) {
-            chartInstance.setOption(buildChartOptions(trendDataPoints.value), { notMerge: true });
-          } else {
-            renderChart();
-          }
-        }
-      }
-    );
-
-    onBeforeUnmount(() => {
-      disposeChart();
-    });
-
-    const handleClose = () => emit('close');
-
-    return {
-      t,
-      trendChartRef,
-      trendLoading,
-      trendError,
-      trendData,
-      trendDataPoints,
-      chartTabs,
-      activeTab,
-      switchTab,
-      edgeHealth,
-      errorRateFormatted,
-      p50Latency,
-      p95Latency,
-      p99Latency,
-      baselineP50,
-      baselineP95,
-      baselineP99,
-      p50DeltaPct,
-      p95DeltaPct,
-      p99DeltaPct,
-      p50DeltaFormatted,
-      p95DeltaFormatted,
-      p99DeltaFormatted,
-      getDeltaTrend,
-      getErrorRateClass,
-      getLatencyClass,
-      formatNumber,
-      formatLatencyNs,
-      loadTrend,
-      handleClose,
-    };
-  },
-});
-</script>
-
-<style>
-@keyframes slideIn {
-  from { transform: translateX(100%); }
-  to   { transform: translateX(0); }
-}
-
-/* Slide transition */
-.slide-enter-active,
-.slide-leave-active {
-  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-.slide-enter-from,
-.slide-leave-to { transform: translateX(100%); }
-.slide-enter-to,
-.slide-leave-from { transform: translateX(0); }
-
-/* Header descendant selectors */
-.panel-header .panel-title {
-  flex: 1;
-  min-width: 0;
-}
-
-.panel-header .edge-name .health-badge::before {
-  content: '●';
-  font-size: 10px;
-}
-
-.panel-header .edge-name .health-badge.healthy  { background: rgba(16,185,129,0.15); color: #10b981; }
-.panel-header .edge-name .health-badge.degraded { background: rgba(251,191,36,0.15);  color: #fbbf24; }
-.panel-header .edge-name .health-badge.critical { background: rgba(239,68,68,0.15);   color: #ef4444; }
-
-.body--light .panel-header {
-  border-bottom: 1px solid var(--o2-border);
-  background: #f5f5f5;
-}
-
-.body--light .panel-header .edge-name {
-  color: #202124;
-}
-
-.body--light .panel-header .edge-name .from-service { color: #1d4ed8; }
-.body--light .panel-header .edge-name .to-service   { color: #6d28d9; }
-.body--light .panel-header .edge-name .edge-arrow   { color: rgba(0,0,0,0.3); }
-
-.body--light .panel-header .edge-name .health-badge.healthy  { background: rgba(16,185,129,0.08); color: #059669; }
-.body--light .panel-header .edge-name .health-badge.degraded { background: rgba(251,191,36,0.08); color: #d97706; }
-.body--light .panel-header .edge-name .health-badge.critical { background: rgba(239,68,68,0.08);  color: #dc2626; }
-
-/* Scrollbar pseudo-elements */
-.panel-content::-webkit-scrollbar { width: 6px; }
-.panel-content::-webkit-scrollbar-track { background: #1a1f2e; }
-.panel-content::-webkit-scrollbar-thumb {
-  background: #242938;
-  border-radius: 3px;
-}
-.panel-content::-webkit-scrollbar-thumb:hover { background: #2d3548; }
-
-.body--light .panel-content {
-  background: #ffffff;
-}
-.body--light .panel-content::-webkit-scrollbar-track { background: #f8f9fa; }
-.body--light .panel-content::-webkit-scrollbar-thumb { background: var(--o2-border); }
-.body--light .panel-content::-webkit-scrollbar-thumb:hover { background: #d0d0d0; }
-
-/* Metric card — descendant selectors */
-.metrics-section .metric-card-full {
-  padding: 10px 12px;
-  border-radius: 8px;
-  background: linear-gradient(135deg, #242938 0%, #1f2937 100%);
-  border: 1px solid #374151;
-  margin-bottom: 12px;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-}
-
-.metrics-section .metric-card-full:hover {
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(99, 102, 241, 0.3);
-  border-color: rgba(99, 102, 241, 0.4);
-}
-
-.metrics-section .metric-card-full .metric-horizontal-divider {
-  width: 100%;
-  height: 1px;
-  background: #374151;
-  margin: 10px 0 8px 0;
-}
-
-/* Traffic Summary row */
-.metrics-section .metric-card-full .traffic-row {
-  display: flex;
-  gap: 6px;
-}
-
-.metrics-section .metric-card-full .traffic-row .traffic-pill {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 3px;
-  padding: 7px 6px 6px;
-  border-radius: 6px;
-  border: 1px solid transparent;
-  transition: all 0.2s ease;
-  cursor: default;
-}
-
-.metrics-section .metric-card-full .traffic-row .traffic-pill .traffic-label {
-  font-size: 9px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  line-height: 1;
-  opacity: 0.65;
-}
-
-.metrics-section .metric-card-full .traffic-row .traffic-pill .traffic-value {
-  font-size: 16px;
-  font-weight: 700;
-  letter-spacing: -0.02em;
-  line-height: 1;
-}
-
-.metrics-section .metric-card-full .traffic-row .traffic-pill.total {
-  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(99, 102, 241, 0.02));
-  border-color: rgba(99, 102, 241, 0.2);
-  color: #a5b4fc;
-}
-.metrics-section .metric-card-full .traffic-row .traffic-pill.total .traffic-value { color: #c7d2fe; }
-.metrics-section .metric-card-full .traffic-row .traffic-pill.total:hover { box-shadow: 0 0 8px rgba(99, 102, 241, 0.2); }
-
-.metrics-section .metric-card-full .traffic-row .traffic-pill.failed {
-  background: linear-gradient(135deg, rgba(107, 114, 128, 0.1), rgba(107, 114, 128, 0.02));
-  border-color: rgba(107, 114, 128, 0.2);
-  color: #9ca3af;
-}
-.metrics-section .metric-card-full .traffic-row .traffic-pill.failed .traffic-value { color: #d1d5db; }
-
-.metrics-section .metric-card-full .traffic-row .traffic-pill.error-rate.status-healthy {
-  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.02));
-  border-color: rgba(16, 185, 129, 0.2);
-  color: #6ee7b7;
-}
-.metrics-section .metric-card-full .traffic-row .traffic-pill.error-rate.status-healthy .traffic-value { color: #10b981; }
-.metrics-section .metric-card-full .traffic-row .traffic-pill.error-rate.status-healthy:hover { box-shadow: 0 0 8px rgba(16, 185, 129, 0.2); }
-
-.metrics-section .metric-card-full .traffic-row .traffic-pill.error-rate.status-warning {
-  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(251, 191, 36, 0.02));
-  border-color: rgba(251, 191, 36, 0.2);
-  color: #fde68a;
-}
-.metrics-section .metric-card-full .traffic-row .traffic-pill.error-rate.status-warning .traffic-value { color: #fbbf24; }
-.metrics-section .metric-card-full .traffic-row .traffic-pill.error-rate.status-warning:hover { box-shadow: 0 0 8px rgba(251, 191, 36, 0.2); }
-
-.metrics-section .metric-card-full .traffic-row .traffic-pill.error-rate.status-critical {
-  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.02));
-  border-color: rgba(239, 68, 68, 0.2);
-  color: #fca5a5;
-}
-.metrics-section .metric-card-full .traffic-row .traffic-pill.error-rate.status-critical .traffic-value { color: #ef4444; }
-.metrics-section .metric-card-full .traffic-row .traffic-pill.error-rate.status-critical:hover { box-shadow: 0 0 8px rgba(239, 68, 68, 0.2); }
-
-/* Latency baseline comparison table */
-.metrics-section .metric-card-full .latency-table .latency-header-row {
-  display: grid;
-  grid-template-columns: 44px 1fr 1fr 1fr;
-  gap: 4px;
-  padding: 2px 6px 4px;
-}
-
-.metrics-section .metric-card-full .latency-table .latency-header-row span {
-  font-size: 10px;
-  font-weight: 600;
-  color: #9ca3af;
-  letter-spacing: 0.04em;
-}
-
-.metrics-section .metric-card-full .latency-table .latency-header-row .col-current,
-.metrics-section .metric-card-full .latency-table .latency-header-row .col-baseline,
-.metrics-section .metric-card-full .latency-table .latency-header-row .col-delta { text-align: right; }
-
-.metrics-section .metric-card-full .latency-table .latency-data-row {
-  display: grid;
-  grid-template-columns: 44px 1fr 1fr 1fr;
-  gap: 4px;
-  padding: 6px 6px;
-  border-radius: 5px;
-  margin-bottom: 3px;
-  align-items: center;
-  border: 1px solid transparent;
-  transition: all 0.2s ease;
-}
-
-.metrics-section .metric-card-full .latency-table .latency-data-row:last-child { margin-bottom: 0; }
-
-.metrics-section .metric-card-full .latency-table .latency-data-row.status-healthy {
-  background: linear-gradient(135deg, rgba(16, 185, 129, 0.06), rgba(16, 185, 129, 0.01));
-  border-color: rgba(16, 185, 129, 0.12);
-}
-.metrics-section .metric-card-full .latency-table .latency-data-row.status-healthy .latency-current { color: #10b981; }
-.metrics-section .metric-card-full .latency-table .latency-data-row.status-healthy:hover { background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.02)); }
-
-.metrics-section .metric-card-full .latency-table .latency-data-row.status-warning {
-  background: linear-gradient(135deg, rgba(251, 191, 36, 0.06), rgba(251, 191, 36, 0.01));
-  border-color: rgba(251, 191, 36, 0.12);
-}
-.metrics-section .metric-card-full .latency-table .latency-data-row.status-warning .latency-current { color: #fbbf24; }
-.metrics-section .metric-card-full .latency-table .latency-data-row.status-warning:hover { background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(251, 191, 36, 0.02)); }
-
-.metrics-section .metric-card-full .latency-table .latency-data-row.status-critical {
-  background: linear-gradient(135deg, rgba(239, 68, 68, 0.06), rgba(239, 68, 68, 0.01));
-  border-color: rgba(239, 68, 68, 0.12);
-}
-.metrics-section .metric-card-full .latency-table .latency-data-row.status-critical .latency-current { color: #ef4444; }
-.metrics-section .metric-card-full .latency-table .latency-data-row.status-critical:hover { background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.02)); }
-
-.metrics-section .metric-card-full .latency-table .latency-data-row.status-unknown {
-  background: rgba(107, 114, 128, 0.04);
-  border-color: rgba(107, 114, 128, 0.1);
-}
-.metrics-section .metric-card-full .latency-table .latency-data-row.status-unknown .latency-current { color: #9ca3af; }
-
-.metrics-section .metric-card-full .latency-table .latency-data-row .col-current,
-.metrics-section .metric-card-full .latency-table .latency-data-row .col-baseline,
-.metrics-section .metric-card-full .latency-table .latency-data-row .col-delta { text-align: right; }
-
-.metrics-section .metric-card-full .latency-table .latency-data-row .percentile-badge {
-  font-size: 11px;
-  font-weight: 700;
-  color: #9ca3af;
-  background: rgba(107, 114, 128, 0.14);
-  padding: 2px 6px;
-  border-radius: 3px;
-  letter-spacing: 0.03em;
-}
-
-.metrics-section .metric-card-full .latency-table .latency-data-row .latency-current {
-  font-size: 13px;
-  font-weight: 700;
-  letter-spacing: -0.01em;
-}
-
-.metrics-section .metric-card-full .latency-table .latency-data-row .latency-baseline {
-  font-size: 11px;
-  font-weight: 500;
-  color: #9ca3af;
-}
-
-.metrics-section .metric-card-full .latency-table .latency-data-row .delta-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 2px;
-  padding: 2px 5px;
-  border-radius: 3px;
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: -0.01em;
-}
-
-.metrics-section .metric-card-full .latency-table .latency-data-row .delta-badge.delta-improved       { background: rgba(16, 185, 129, 0.14); color: #10b981; }
-.metrics-section .metric-card-full .latency-table .latency-data-row .delta-badge.delta-improved-slight { background: rgba(16, 185, 129, 0.08); color: #34d399; }
-.metrics-section .metric-card-full .latency-table .latency-data-row .delta-badge.delta-neutral        { background: rgba(107, 114, 128, 0.12); color: #6b7280; }
-.metrics-section .metric-card-full .latency-table .latency-data-row .delta-badge.delta-warning        { background: rgba(251, 191, 36, 0.14);  color: #fbbf24; }
-.metrics-section .metric-card-full .latency-table .latency-data-row .delta-badge.delta-critical       { background: rgba(239, 68, 68, 0.14);   color: #ef4444; }
-
-/* Light mode metric card */
-.body--light .metrics-section .metric-card-full {
-  background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
-  border-color: #d1d5db;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-}
-
-.body--light .metrics-section .metric-card-full:hover {
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(99, 102, 241, 0.2);
-  border-color: rgba(99, 102, 241, 0.3);
-}
-
-.body--light .metrics-section .metric-card-full .metric-horizontal-divider { background: #e5e7eb; }
-
-.body--light .metrics-section .metric-card-full .traffic-row .traffic-pill.total {
-  background: linear-gradient(135deg, rgba(99, 102, 241, 0.06), rgba(99, 102, 241, 0.01));
-  border-color: rgba(99, 102, 241, 0.2);
-  color: #6366f1;
-}
-.body--light .metrics-section .metric-card-full .traffic-row .traffic-pill.total .traffic-value { color: #4338ca; }
-
-.body--light .metrics-section .metric-card-full .traffic-row .traffic-pill.failed {
-  background: linear-gradient(135deg, rgba(107, 114, 128, 0.06), rgba(107, 114, 128, 0.01));
-  border-color: rgba(107, 114, 128, 0.15);
-  color: #6b7280;
-}
-.body--light .metrics-section .metric-card-full .traffic-row .traffic-pill.failed .traffic-value { color: #374151; }
-
-.body--light .metrics-section .metric-card-full .traffic-row .traffic-pill.error-rate.status-healthy {
-  background: linear-gradient(135deg, rgba(16, 185, 129, 0.06), rgba(16, 185, 129, 0.01));
-  border-color: rgba(16, 185, 129, 0.2);
-  color: #059669;
-}
-.body--light .metrics-section .metric-card-full .traffic-row .traffic-pill.error-rate.status-healthy .traffic-value { color: #047857; }
-
-.body--light .metrics-section .metric-card-full .traffic-row .traffic-pill.error-rate.status-warning {
-  background: linear-gradient(135deg, rgba(217, 119, 6, 0.06), rgba(217, 119, 6, 0.01));
-  border-color: rgba(217, 119, 6, 0.2);
-  color: #d97706;
-}
-.body--light .metrics-section .metric-card-full .traffic-row .traffic-pill.error-rate.status-warning .traffic-value { color: #b45309; }
-
-.body--light .metrics-section .metric-card-full .traffic-row .traffic-pill.error-rate.status-critical {
-  background: linear-gradient(135deg, rgba(220, 38, 38, 0.06), rgba(220, 38, 38, 0.01));
-  border-color: rgba(220, 38, 38, 0.2);
-  color: #dc2626;
-}
-.body--light .metrics-section .metric-card-full .traffic-row .traffic-pill.error-rate.status-critical .traffic-value { color: #b91c1c; }
-
-.body--light .metrics-section .metric-card-full .latency-table .latency-header-row span { color: #9ca3af; }
-
-.body--light .metrics-section .metric-card-full .latency-table .latency-data-row.status-healthy {
-  background: linear-gradient(135deg, rgba(16, 185, 129, 0.04), rgba(16, 185, 129, 0.01));
-  border-color: rgba(16, 185, 129, 0.15);
-}
-.body--light .metrics-section .metric-card-full .latency-table .latency-data-row.status-healthy .latency-current { color: #059669; }
-
-.body--light .metrics-section .metric-card-full .latency-table .latency-data-row.status-warning {
-  background: linear-gradient(135deg, rgba(217, 119, 6, 0.04), rgba(217, 119, 6, 0.01));
-  border-color: rgba(217, 119, 6, 0.15);
-}
-.body--light .metrics-section .metric-card-full .latency-table .latency-data-row.status-warning .latency-current { color: #d97706; }
-
-.body--light .metrics-section .metric-card-full .latency-table .latency-data-row.status-critical {
-  background: linear-gradient(135deg, rgba(220, 38, 38, 0.04), rgba(220, 38, 38, 0.01));
-  border-color: rgba(220, 38, 38, 0.15);
-}
-.body--light .metrics-section .metric-card-full .latency-table .latency-data-row.status-critical .latency-current { color: #dc2626; }
-
-.body--light .metrics-section .metric-card-full .latency-table .latency-data-row .percentile-badge { background: rgba(107, 114, 128, 0.1); color: #6b7280; }
-.body--light .metrics-section .metric-card-full .latency-table .latency-data-row .latency-baseline { color: #6b7280; }
-
-.body--light .metrics-section .metric-card-full .latency-table .latency-data-row .delta-badge.delta-improved       { background: rgba(16, 185, 129, 0.1);  color: #059669; }
-.body--light .metrics-section .metric-card-full .latency-table .latency-data-row .delta-badge.delta-improved-slight { background: rgba(16, 185, 129, 0.06); color: #10b981; }
-.body--light .metrics-section .metric-card-full .latency-table .latency-data-row .delta-badge.delta-neutral        { background: rgba(107, 114, 128, 0.08); color: #6b7280; }
-.body--light .metrics-section .metric-card-full .latency-table .latency-data-row .delta-badge.delta-warning        { background: rgba(217, 119, 6, 0.1);    color: #d97706; }
-.body--light .metrics-section .metric-card-full .latency-table .latency-data-row .delta-badge.delta-critical       { background: rgba(220, 38, 38, 0.1);    color: #dc2626; }
-
-/* Trend chart — descendant selectors */
-.trend-section .section-header { flex-shrink: 0; }
-
-.trend-section .trend-state {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  gap: 8px;
-  padding: 24px;
-  font-size: 13px;
-  color: rgba(255,255,255,0.4);
-  border-radius: 8px;
-  border: 1px dashed rgba(255,255,255,0.1);
-}
-
-.trend-section .trend-state .trend-empty-icon { opacity: 0.3; margin-bottom: 4px; }
-
-.trend-section .trend-error { color: #f87171; border-color: rgba(239,68,68,0.2); }
-
-.trend-section .trend-chart {
-  flex: 1;
-  min-height: 180px;
-  width: 100%;
-  border-radius: 8px;
-  overflow: hidden;
-  border: 1px solid rgba(255,255,255,0.06);
-  background: rgba(255,255,255,0.02);
-}
-
-.trend-section .trend-chart.trend-chart--hidden { display: none; }
-
-.body--light .trend-section .trend-state {
-  color: rgba(0,0,0,0.4);
-  border-color: rgba(0,0,0,0.1);
-}
-.body--light .trend-section .trend-chart {
-  border-color: rgba(0,0,0,0.08);
-  background: rgba(0,0,0,0.02);
-}
-
-.body--dark .service-graph-edge-side-panel {
-  background: #1a1f2e;
-  color: #e4e7eb;
-  border-left: 1px solid rgba(255,255,255,0.08);
-}
-
-.body--light .service-graph-edge-side-panel {
-  background: #ffffff;
-  color: #333333;
-  border-left: 1px solid var(--o2-border);
-}
-</style>
diff --git a/web/src/plugins/traces/ServiceGraphNodeSidePanel.spec.ts b/web/src/plugins/traces/ServiceGraphNodeSidePanel.spec.ts
index 0eb3847892..3f16b59f39 100644
--- a/web/src/plugins/traces/ServiceGraphNodeSidePanel.spec.ts
+++ b/web/src/plugins/traces/ServiceGraphNodeSidePanel.spec.ts
@@ -937,26 +937,43 @@ describe("ServiceGraphNodeSidePanel", () => {
       wrapper = mountPanel();
     });
 
-    it("should set sortBy to the provided field when called with asc order", () => {
-      wrapper.vm.handleSortChange("p99", "asc");
+    it("should set sortBy to the field and sortOrder to asc on first click", () => {
+      wrapper.vm.handleSortChange("p99");
       expect(wrapper.vm.sortBy).toBe("p99");
       expect(wrapper.vm.sortOrder).toBe("asc");
     });
 
-    it("should set sortOrder to desc when provided", () => {
-      wrapper.vm.handleSortChange("requests", "desc");
+    it("should toggle sortOrder to desc when the same field is clicked twice", () => {
+      wrapper.vm.handleSortChange("requests");
+      expect(wrapper.vm.sortBy).toBe("requests");
+      expect(wrapper.vm.sortOrder).toBe("asc");
+
+      wrapper.vm.handleSortChange("requests");
       expect(wrapper.vm.sortBy).toBe("requests");
       expect(wrapper.vm.sortOrder).toBe("desc");
     });
 
-    it("should update both sortBy and sortOrder when called multiple times", () => {
-      wrapper.vm.handleSortChange("operation", "asc");
-      expect(wrapper.vm.sortBy).toBe("operation");
+    it("should clear sorting on the third click of the same field", () => {
+      wrapper.vm.handleSortChange("operation");
       expect(wrapper.vm.sortOrder).toBe("asc");
 
-      wrapper.vm.handleSortChange("p95", "desc");
-      expect(wrapper.vm.sortBy).toBe("p95");
+      wrapper.vm.handleSortChange("operation");
       expect(wrapper.vm.sortOrder).toBe("desc");
+
+      wrapper.vm.handleSortChange("operation");
+      expect(wrapper.vm.sortBy).toBe("");
+      expect(wrapper.vm.sortOrder).toBe("");
+    });
+
+    it("should reset sortOrder to asc when switching to a different field", () => {
+      wrapper.vm.handleSortChange("operation");
+      wrapper.vm.handleSortChange("operation");
+      expect(wrapper.vm.sortBy).toBe("operation");
+      expect(wrapper.vm.sortOrder).toBe("desc");
+
+      wrapper.vm.handleSortChange("p95");
+      expect(wrapper.vm.sortBy).toBe("p95");
+      expect(wrapper.vm.sortOrder).toBe("asc");
     });
   });
 
@@ -1013,7 +1030,7 @@ describe("ServiceGraphNodeSidePanel", () => {
       });
 
       it("should sort by p99 ascending when sortBy is p99 and sortOrder is asc", () => {
-        wrapper.vm.handleSortChange("p99", "asc");
+        wrapper.vm.handleSortChange("p99");
         const rows = wrapper.vm.sortedOperationsTableRows;
         expect(rows[0].p99).toBe(80000);
         expect(rows[1].p99).toBe(120000);
@@ -1021,7 +1038,8 @@ describe("ServiceGraphNodeSidePanel", () => {
       });
 
       it("should sort by p99 descending when sortBy is p99 and sortOrder is desc", () => {
-        wrapper.vm.handleSortChange("p99", "desc");
+        wrapper.vm.handleSortChange("p99"); // asc
+        wrapper.vm.handleSortChange("p99"); // toggle to desc
         const rows = wrapper.vm.sortedOperationsTableRows;
         expect(rows[0].p99).toBe(150000);
         expect(rows[1].p99).toBe(120000);
@@ -1029,7 +1047,7 @@ describe("ServiceGraphNodeSidePanel", () => {
       });
 
       it("should sort by operation alphabetically ascending", () => {
-        wrapper.vm.handleSortChange("operation", "asc");
+        wrapper.vm.handleSortChange("operation");
         const rows = wrapper.vm.sortedOperationsTableRows;
         expect(rows[0].operation).toBe("GET /api/products");
         expect(rows[1].operation).toBe("GET /api/users");
@@ -1037,7 +1055,8 @@ describe("ServiceGraphNodeSidePanel", () => {
       });
 
       it("should sort by requests numerically descending", () => {
-        wrapper.vm.handleSortChange("requests", "desc");
+        wrapper.vm.handleSortChange("requests"); // asc
+        wrapper.vm.handleSortChange("requests"); // toggle to desc
         const rows = wrapper.vm.sortedOperationsTableRows;
         expect(rows[0].requests).toBe(200);
         expect(rows[1].requests).toBe(100);
@@ -1045,7 +1064,7 @@ describe("ServiceGraphNodeSidePanel", () => {
       });
 
       it("should sort by errors numerically ascending", () => {
-        wrapper.vm.handleSortChange("errors", "asc");
+        wrapper.vm.handleSortChange("errors");
         const rows = wrapper.vm.sortedOperationsTableRows;
         expect(rows[0].errors).toBe(0);
         expect(rows[1].errors).toBe(5);
@@ -1063,7 +1082,7 @@ describe("ServiceGraphNodeSidePanel", () => {
       });
 
       it("should return an empty array without error when sortBy is set", () => {
-        wrapper.vm.handleSortChange("p99", "asc");
+        wrapper.vm.handleSortChange("p99");
         const rows = wrapper.vm.sortedOperationsTableRows;
         expect(rows).toHaveLength(0);
       });
diff --git a/web/src/plugins/traces/ServiceGraphNodeSidePanel.vue b/web/src/plugins/traces/ServiceGraphNodeSidePanel.vue
index 1cfae49975..e9d9ec2f04 100644
--- a/web/src/plugins/traces/ServiceGraphNodeSidePanel.vue
+++ b/web/src/plugins/traces/ServiceGraphNodeSidePanel.vue
@@ -16,6 +16,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <ODrawer
+    bleed
     :open="visible"
     :width="60"
     :seamless="true"
@@ -53,7 +54,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </template>
 
     <!-- Content Scrollable Area -->
-      <div class="panel-content flex-1 overflow-y-auto overflow-x-hidden bg-[#0f1419] p-2.5">
+      <!-- No horizontal padding here: sections that need an inset (charts, chip row, tab labels)
+           add px-page-edge themselves, so dividers and tables can bleed to the edges naturally. -->
+      <div class="panel-content flex-1 overflow-y-auto overflow-x-hidden bg-surface-base dark:bg-[color-mix(in_srgb,var(--color-grey-950)_85%,var(--color-indigo-900))] py-2.5">
         <!-- RED Charts Section -->
         <div
           v-if="streamFilter !== 'all' && dashboardData"
@@ -63,19 +66,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- DataZoom filter chips + View in Traces button -->
           <div
             v-if="filterChips.length"
-            class="flex items-center gap-2 px-2 py-[0.3rem] flex-wrap"
+            class="flex items-center gap-2 px-page-edge py-[0.3rem] flex-wrap"
             data-test="service-graph-side-panel-filter-chips"
           >
             <!-- Filter chip pills -->
             <div
               v-for="chip in filterChips"
               :key="chip.key"
-              class="inline-flex items-center gap-1 rounded border border-[var(--o2-border)] px-2 py-[0.325rem] text-[0.7rem] leading-none text-[var(--o2-text-primary)]"
+              class="inline-flex items-center gap-1 rounded-default border border-border-default px-2 py-[0.325rem] text-2xs leading-none text-text-body"
               :data-test="`service-graph-filter-chip-${chip.key}`"
               :class="
                 chip.type === 'duration'
-                  ? 'text-[var(--o2-latency-p95)]'
-                  : 'text-[var(--o2-status-error-text)]'
+                  ? 'text-latency-p95'
+                  : 'text-status-error-text'
               "
             >
               <!-- Duration chip icon -->
@@ -83,20 +86,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 v-if="chip.type === 'duration'"
                 name="schedule"
                 size="xs"
-                class="text-[var(--o2-latency-p95)]"
+                class="text-latency-p95"
               />
               <!-- Error chip icon -->
               <OIcon
                 v-else-if="chip.type === 'error'"
                 name="warning"
                 size="xs"
-                class="text-[var(--o2-status-error-text)]"
+                class="text-status-error-text"
               />
               <span
                 :class="
                   chip.type === 'duration'
-                    ? 'text-[var(--o2-latency-p95)]'
-                    : 'text-[var(--o2-status-error-text)]'
+                    ? 'text-latency-p95'
+                    : 'text-status-error-text'
                 "
                 >{{ chip.label }}</span
               >
@@ -143,11 +146,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </div>
         </div>
 
-        <OSeparator v-if="streamFilter !== 'all' && dashboardData" class="my-[1rem]!" />
+        <!-- Full-bleed divider: panel has no horizontal padding, so w-full reaches both edges -->
+        <OSeparator v-if="streamFilter !== 'all' && dashboardData" class="my-1.5!" />
         <!-- Tabs: Operations / Nodes / Pods -->
         <template v-if="streamFilter !== 'all'">
+          <!-- Row spans full width so the bottom border bleeds; px-page-edge keeps the tab labels inset -->
           <div
-            class="flex items-end border-b border-b-[var(--o2-border-color)] mx-[0.5rem] mb-[0.375rem]"
+            class="flex items-end border-b border-b-card-glass-border mb-0 px-page-edge"
             data-test="service-graph-node-panel-tabs-row"
           >
             <OTabs
@@ -160,7 +165,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <OTab
                 name="operations"
                 :label="t('traces.serviceGraphNodeSidePanel.operations')"
-                style="text-transform: capitalize"
+                class="capitalize"
                 data-test="service-graph-node-panel-tab-operations"
               />
               <OTab
@@ -168,14 +173,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :key="cfg.id"
                 :name="cfg.id"
                 :label="cfg.label"
-                style="text-transform: capitalize"
+                class="capitalize"
                 :data-test="`service-graph-node-panel-tab-${cfg.id}`"
               />
               <OTab
                 v-if="!isInferred"
                 name="metrics"
                 :label="t('traces.serviceGraphNodeSidePanel.metrics')"
-                style="text-transform: capitalize"
+                class="capitalize"
                 data-test="service-graph-node-panel-tab-metrics"
               />
             </OTabs>
@@ -198,12 +203,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </OButton>
               </template>
               <div
-                class="min-w-[12rem]!"
+                class="min-w-48!"
                 data-test="service-graph-node-panel-workload-fields-menu"
               >
                 <template v-for="env in detectedEnvironments" :key="env.key">
                   <div
-                    class="text-xs px-3 pb-0 py-[0.375rem]! uppercase tracking-wide text-muted-foreground"
+                    class="text-xs px-3 pb-0 py-1.5! uppercase tracking-wide text-muted-foreground"
                   >
                     {{ env.label }}
                   </div>
@@ -213,7 +218,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     )"
                     :key="cfg.id"
                     :data-test="`service-graph-node-panel-workload-field-${cfg.id}`"
-                    class="px-[0.325rem]! h-[30px]! min-h-[30px]!"
+                    class="px-[0.325rem]! h-7.5! min-h-7.5!"
                     @select="(e) => { e.preventDefault(); toggleWorkloadField(cfg.id); }"
                   >
                     <template #icon-left>
@@ -243,14 +248,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             >
               <div
                 v-if="recentOperations.length === 0 && !loadingOperations"
-                class="text-xs italic py-2 text-center"
-                style="color: var(--o2-text-secondary)"
+                class="flex flex-col items-center justify-center py-16 text-sm text-center text-text-secondary"
               >
                 {{ t('traces.serviceGraphNodeSidePanel.noOperationsFound') }}
               </div>
               <div
                   v-else-if="recentOperations.length > 0 || loadingOperations"
-                  class="overflow-hidden rounded"
+                  class="overflow-hidden svc-panel-table"
                   data-test="service-graph-side-panel-operations-table"
                 >
                   <TenstackTable
@@ -279,7 +283,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       <span
                         :class="
                           item.errors > 0
-                            ? 'text-[var(--q-negative)] font-semibold'
+                            ? 'text-[var(--color-status-negative)] font-semibold'
                             : ''
                         "
                         >{{ item.errors }}</span
@@ -291,6 +295,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         :max="rowMaxes(sortedOperationsTableRows, ['p99']).p99"
                         :label="formatOperationLatency(item.p99)"
                         variant="warning"
+                        align="right"
+                        inline
                       />
                     </template>
                     <template #cell-p95="{ item }">
@@ -298,6 +304,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         :value="item.p95"
                         :max="rowMaxes(sortedOperationsTableRows, ['p95']).p95"
                         :label="formatOperationLatency(item.p95)"
+                        align="right"
+                        inline
                       />
                     </template>
                     <template #cell-p75="{ item }">
@@ -305,6 +313,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         :value="item.p75"
                         :max="rowMaxes(sortedOperationsTableRows, ['p75']).p75"
                         :label="formatOperationLatency(item.p75)"
+                        align="right"
+                        inline
                       />
                     </template>
                     <template #cell-actions="{ row, column, active }">
@@ -312,7 +322,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         v-if="active"
                         variant="ghost"
                         size="icon"
-                        class="ml-1 absolute! right-2!"
+                        class="ml-1 absolute! right-1!"
                         data-test="service-graph-side-panel-view-traces-btn"
                         @click.stop="
                           navigateToTraces({
@@ -329,8 +339,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     </template>
                     <template #empty>
                       <div
-                        class="text-xs italic py-2 text-center"
-                        style="color: var(--o2-text-secondary)"
+                        class="flex flex-col items-center justify-center py-16 text-sm text-center text-text-secondary"
                       >
                         {{ t('traces.serviceGraphNodeSidePanel.noOperationsFound') }}
                       </div>
@@ -350,14 +359,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             >
               <div
                 v-if="!resourceTabData[cfg.id]?.length && !resourceTabLoading[cfg.id]"
-                class="text-xs italic py-2 text-center"
-                style="color: var(--o2-text-secondary)"
+                class="flex flex-col items-center justify-center py-16 text-sm text-center text-text-secondary"
               >
                 {{ t('traces.serviceGraphNodeSidePanel.noResourceDataFound', { resource: cfg.label.toLowerCase() }) }}
               </div>
               <div
                 v-else-if="resourceTabData[cfg.id]?.length > 0 || resourceTabLoading[cfg.id]"
-                class="overflow-hidden rounded"
+                class="overflow-hidden svc-panel-table"
                 :data-test="`service-graph-side-panel-${cfg.id}-table`"
               >
                 <TenstackTable
@@ -388,7 +396,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       v-if="active"
                       variant="ghost"
                       size="icon"
-                      class="ml-1 absolute! right-2!"
+                      class="ml-1 absolute! right-1! bg-table-row-hover-bg! rounded-default shadow-[-0.5rem_0_0.5rem_var(--color-table-row-hover-bg)]"
                       :data-test="`service-graph-side-panel-${cfg.id}-view-traces-btn`"
                       @click.stop="
                         navigateToTraces({
@@ -408,7 +416,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <span
                       :class="
                         item.errors > 0
-                          ? 'text-[var(--q-negative)] font-semibold'
+                          ? 'text-[var(--color-status-negative)] font-semibold'
                           : ''
                       "
                       >{{ item.errors }}</span
@@ -420,6 +428,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       :max="rowMaxes(sortResourceRows(buildResourceTableRows(cfg)), ['p99']).p99"
                       :label="formatOperationLatency(item.p99)"
                       variant="warning"
+                      align="right"
+                      inline
                     />
                   </template>
                   <template #cell-p95="{ item }">
@@ -427,6 +437,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       :value="item.p95"
                       :max="rowMaxes(sortResourceRows(buildResourceTableRows(cfg)), ['p95']).p95"
                       :label="formatOperationLatency(item.p95)"
+                      align="right"
+                      inline
                     />
                   </template>
                   <template #cell-p75="{ item }">
@@ -434,12 +446,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       :value="item.p75"
                       :max="rowMaxes(sortResourceRows(buildResourceTableRows(cfg)), ['p75']).p75"
                       :label="formatOperationLatency(item.p75)"
+                      align="right"
+                      inline
                     />
                   </template>
                   <template #empty>
                     <div
-                      class="text-xs italic py-2 text-center"
-                      style="color: var(--o2-text-secondary)"
+                      class="flex flex-col items-center justify-center py-16 text-sm text-center text-text-secondary"
                     >
                       {{ t('traces.serviceGraphNodeSidePanel.noResourceDataFound', { resource: cfg.label.toLowerCase() }) }}
                     </div>
@@ -455,22 +468,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               class="p-0! panel-section mb-0! h-full!"
               data-test="service-graph-side-panel-metrics"
             >
-              <!-- Loading state -->
+              <!-- Loading state — shimmer skeletons standing in for the metric charts -->
               <div
                 v-if="metricsCorrelationLoading"
-                class="flex items-center gap-2 py-3 text-sm"
-                style="color: var(--o2-text-secondary)"
+                class="flex flex-col gap-3 px-page-edge py-4"
                 data-test="service-graph-side-panel-metrics-loading"
               >
-                <OSpinner size="xs" />
-                <span>{{ t('traces.serviceGraphNodeSidePanel.loadingMetrics') }}</span>
+                <OSkeleton type="text" class="w-40! h-4" />
+                <OSkeleton type="rect" class="w-full! h-40" />
+                <OSkeleton type="rect" class="w-full! h-40" />
               </div>
 
               <!-- Error state -->
               <div
                 v-else-if="metricsCorrelationError"
-                class="flex flex-col items-center gap-3 py-6 text-center text-sm"
-                style="color: var(--o2-text-secondary)"
+                class="flex flex-col items-center gap-3 py-6 text-center text-sm text-text-secondary"
                 data-test="service-graph-side-panel-metrics-error"
               >
                 <span>{{ metricsCorrelationError }}</span>
@@ -509,15 +521,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 data-test="service-graph-side-panel-metrics-dashboard"
               />
 
-              <!-- Empty state -->
-              <div
+              <!-- Empty state — standard OEmptyState -->
+              <OEmptyState
                 v-else-if="metricsCorrelationLoaded"
-                class="text-xs italic py-2 text-center"
-                style="color: var(--o2-text-secondary)"
+                size="inline"
+                icon="insights"
+                :title="t('traces.serviceGraphNodeSidePanel.noMetricsAvailable')"
+                hide-action
+                class="py-16"
                 data-test="service-graph-side-panel-metrics-empty"
-              >
-                {{ t('traces.serviceGraphNodeSidePanel.noMetricsAvailable') }}
-              </div>
+              />
             </OTabPanel>
           </OTabPanels>
         </template>
@@ -590,10 +603,11 @@ import { buildWorkloadChipDimensions } from "@/composables/useMetricSubjectButto
 import { normalizeSeverity } from "@/utils/sourceEventSeverity";
 import DeployedCode from "@/components/icons/DeployedCode.vue";
 import { useI18n } from "vue-i18n";
-import OSpinner from "@/lib/feedback/Spinner/OSpinner.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
 import OCheckbox from "@/lib/forms/Checkbox/OCheckbox.vue";
 import OSeparator from '@/lib/core/Separator/OSeparator.vue';
+import OSkeleton from "@/lib/feedback/Skeleton/OSkeleton.vue";
+import OEmptyState from "@/lib/core/EmptyState/OEmptyState.vue";
 import { toast } from "@/lib/feedback/Toast/useToast";
 import ServiceCatalogBarCell from "./components/ServiceCatalogBarCell.vue";
 
@@ -828,6 +842,8 @@ export default defineComponent({
   components: {
     OTag,
     OSeparator,
+    OSkeleton,
+    OEmptyState,
     OTabs,
     OTab,
     OTabPanels,
@@ -839,7 +855,6 @@ export default defineComponent({
     TelemetryCorrelationDashboard,
     TenstackTable,
     RenderDashboardCharts,
-    OSpinner,
     OTooltip,
     OCheckbox,
     OIcon,
@@ -1463,7 +1478,7 @@ export default defineComponent({
     });
     const loadingOperations = ref(false);
 
-    // Dynamic resource tabs state (replaces per-resource recentNodes/recentPods/loadingNodes/loadingPods)
+    // Dynamic resource tabs state
     const resourceTabData = ref<Record<string, ResourceRow[]>>({});
     const resourceTabLoading = ref<Record<string, boolean>>({});
     // Resource groups from getDimensionAnalytics that match the current stream schema
@@ -1751,11 +1766,21 @@ export default defineComponent({
 
     // ── Sorting state ──────────────────────────────────────────────────────
     const sortBy = ref<string>("");
-    const sortOrder = ref<"asc" | "desc">("");
+    const sortOrder = ref<"asc" | "desc" | "">("");
 
-    function handleSortChange(field: string, order: "asc" | "desc") {
-      sortBy.value = field;
-      sortOrder.value = order;
+    // 3-state sort cycle to match other O2 tables (OTable): asc → desc → cleared.
+    // TenstackTable itself only toggles asc/desc, so we drive the cycle from our
+    // own state and ignore its computed order — clearing restores the default order.
+    function handleSortChange(field: string) {
+      if (sortBy.value !== field) {
+        sortBy.value = field;
+        sortOrder.value = "asc";
+      } else if (sortOrder.value === "asc") {
+        sortOrder.value = "desc";
+      } else {
+        sortBy.value = "";
+        sortOrder.value = "";
+      }
     }
 
     const compareRows = (a: any, b: any, field: string): number => {
@@ -1810,41 +1835,41 @@ export default defineComponent({
         id: "requests",
         accessorFn: (row: any) => formatNumber(row.requests),
         header: t("traces.serviceGraphNodeSidePanel.requests"),
-        size: 100,
+        size: 130,
         enableSorting: true,
-        meta: { sortable: true },
+        meta: { sortable: true, align: "right" },
       },
       {
         id: "errors",
         accessorKey: "errors",
         header: t("traces.serviceGraphNodeSidePanel.errors"),
-        size: 80,
+        size: 110,
         enableSorting: true,
-        meta: { slot: true, sortable: true },
+        meta: { slot: true, sortable: true, align: "right" },
       },
       {
         id: "p99",
         accessorKey: "p99",
         header: "P99",
-        size: 80,
+        size: 118,
         enableSorting: true,
-        meta: { slot: true, sortable: true },
+        meta: { slot: true, sortable: true, align: "right" },
       },
       {
         id: "p95",
         accessorKey: "p95",
         header: "P95",
-        size: 80,
+        size: 118,
         enableSorting: true,
-        meta: { slot: true, sortable: true },
+        meta: { slot: true, sortable: true, align: "right" },
       },
       {
         id: "p75",
         accessorKey: "p75",
         header: "P75",
-        size: 80,
+        size: 118,
         enableSorting: true,
-        meta: { slot: true, sortable: true },
+        meta: { slot: true, sortable: true, align: "right" },
       },
     ];
 
@@ -2506,95 +2531,67 @@ export default defineComponent({
 });
 </script>
 
-<style>
-.health-badge::before {
-  content: "●";
-  font-size: 10px;
-}
-
-.health-badge.healthy {
-  background: rgba(16, 185, 129, 0.15);
-  color: #10b981;
-}
-
-.health-badge.degraded {
-  background: rgba(251, 191, 36, 0.15);
-  color: #fbbf24;
-}
-
-.health-badge.critical {
-  background: rgba(239, 68, 68, 0.15);
-  color: #ef4444;
-}
-
-.health-badge.warning {
-  background: rgba(249, 115, 22, 0.15);
-  color: #f97316;
-}
-
-.body--light .health-badge.healthy {
-  background: rgba(16, 185, 129, 0.08);
-  color: #059669;
-}
-
-.body--light .health-badge.degraded {
-  background: rgba(251, 191, 36, 0.08);
-  color: #d97706;
-}
-
-.body--light .health-badge.critical {
-  background: rgba(239, 68, 68, 0.08);
-  color: #dc2626;
-}
-
-.body--light .health-badge.warning {
-  background: rgba(249, 115, 22, 0.08);
-  color: #ea580c;
-}
-
+<style scoped>
+/* keep(scrollbar): ::-webkit-scrollbar pseudo-elements have no utility form.
+   This panel has both a light treatment (default values) and a dark
+   indigo-tinted "glass" treatment (under `.dark &`). Keep the light rules — do
+   not make it always-dark. */
 .panel-content::-webkit-scrollbar {
-  width: 8px;
+  width: 0.5rem;
 }
 
 .panel-content::-webkit-scrollbar-track {
-  background: #1a1f2e;
+  background: var(--color-surface-panel);
 }
 
 .panel-content::-webkit-scrollbar-thumb {
-  background: #242938;
-  border-radius: 4px;
+  background: var(--color-border-default);
+  border-radius: 0.25rem;
 }
 
 .panel-content::-webkit-scrollbar-thumb:hover {
-  background: #2d3548;
+  background: var(--color-grey-300);
 }
 
-.body--light .panel-content {
-  background: #ffffff;
+.dark .panel-content::-webkit-scrollbar-track {
+  background: color-mix(in srgb, var(--color-grey-900) 70%, var(--color-indigo-900));
 }
 
-.body--light .panel-content::-webkit-scrollbar-track {
-  background: #f8f9fa;
+.dark .panel-content::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--color-grey-800) 80%, var(--color-indigo-900));
 }
 
-.body--light .panel-content::-webkit-scrollbar-thumb {
-  background: var(--o2-border);
-}
-
-.body--light .panel-content::-webkit-scrollbar-thumb:hover {
-  background: #d0d0d0;
+.dark .panel-content::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--color-grey-700) 80%, var(--color-indigo-900));
 }
 
 .panel-section:last-child {
   margin-bottom: 0;
 }
 
-.red-charts-section .card-container {
-  box-shadow: none;
+/* The panel itself scrolls, so these short summary tables should render at their
+   natural height without their own scrollbars. Let the inner scroll container
+   grow to content and hide its scrollbars. */
+.svc-panel-table :deep(.o2-scroll-container) {
+  overflow: hidden;
+  height: auto;
+  max-height: none;
 }
 
-.red-charts-section .card-container :first-child {
-  padding: 0 0.0625rem !important;
+/* Align the first column's content with the tab labels above (page-edge + the
+   tab's own 0.5rem px-2) while the header band and rows still bleed to the edge. */
+.svc-panel-table :deep(tr > th:first-child),
+.svc-panel-table :deep(tr > td:first-child) {
+  padding-left: calc(var(--spacing-page-edge) + 0.5rem);
+}
+
+/* Numeric columns reserve a fixed right-hand slot: the value sits just left of
+   it, and the per-cell "view in traces" button lives in that slot on hover — so
+   there's no overlap and no shift. Headers get the same reserve so their text /
+   sort-icon stay aligned with the values. */
+.svc-panel-table :deep(td[class~="text-right!"]) > div,
+.svc-panel-table :deep(th[class~="text-right!"]) {
+  padding-right: 1.75rem;
 }
 
 </style>
diff --git a/web/src/plugins/traces/ServicesCatalog.spec.ts b/web/src/plugins/traces/ServicesCatalog.spec.ts
index e923ebc5be..c70017732c 100644
--- a/web/src/plugins/traces/ServicesCatalog.spec.ts
+++ b/web/src/plugins/traces/ServicesCatalog.spec.ts
@@ -407,10 +407,7 @@ function mountServicesCatalog(
           ],
           emits: ["close", "view-traces"],
         },
-        "q-input": false,
-        "q-btn": false,
         "OIcon": false,
-        "q-tooltip": false,
       },
     },
   });
@@ -1577,7 +1574,9 @@ describe("ServicesCatalog", () => {
       wrapper = mountServicesCatalog();
       await flushPromises();
 
-      expect(wrapper.vm.errorRateClass(15)).toContain("text-red-500");
+      expect(wrapper.vm.errorRateClass(15)).toContain(
+        "text-service-health-critical",
+      );
     });
 
     it("should return correct class for warning error rate (5-10%)", async () => {
@@ -1592,7 +1591,9 @@ describe("ServicesCatalog", () => {
       wrapper = mountServicesCatalog();
       await flushPromises();
 
-      expect(wrapper.vm.errorRateClass(7)).toContain("text-orange-500");
+      expect(wrapper.vm.errorRateClass(7)).toContain(
+        "text-service-health-degraded",
+      );
     });
 
     it("should return correct class for degraded error rate (1-5%)", async () => {
@@ -1607,7 +1608,9 @@ describe("ServicesCatalog", () => {
       wrapper = mountServicesCatalog();
       await flushPromises();
 
-      expect(wrapper.vm.errorRateClass(2)).toContain("text-yellow-500");
+      expect(wrapper.vm.errorRateClass(2)).toContain(
+        "text-service-health-warning",
+      );
     });
 
     it("should return empty string for healthy error rate (<=1%)", async () => {
@@ -2239,12 +2242,12 @@ describe("ServicesCatalog", () => {
     });
 
     describe("unhealthy highlight & bracket count on tabs", () => {
-      // db-degraded + db-ok (datastore), svc-crit (service), q-ok (queue).
+      // db-degraded + db-ok (datastore), svc-crit (service), queue-ok (queue).
       const healthRows = [
         { service_name: "svc-crit", infer_service_type: undefined, status: "critical" },
         { service_name: "db-degraded", infer_service_type: "database", status: "degraded" },
         { service_name: "db-ok", infer_service_type: "database", status: "healthy" },
-        { service_name: "q-ok", infer_service_type: "queue", status: "healthy" },
+        { service_name: "queue-ok", infer_service_type: "queue", status: "healthy" },
       ].map((r) => ({
         total_requests: 100,
         error_count: 0,
diff --git a/web/src/plugins/traces/ServicesCatalog.vue b/web/src/plugins/traces/ServicesCatalog.vue
index b2b7442cb5..f7ae0110dd 100644
--- a/web/src/plugins/traces/ServicesCatalog.vue
+++ b/web/src/plugins/traces/ServicesCatalog.vue
@@ -17,26 +17,25 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div
     ref="catalogContainerRef"
-    class="services-catalog h-full! flex flex-col bg-[var(--o2-card-bg-solid)] card-container px-[0.625rem] relative overflow-hidden"
+    class="services-catalog h-full! flex flex-col bg-card-glass-bg px-2.5 relative overflow-hidden"
   >
     <!-- Toolbar: stream selector (width-matched to the rail below) + search
          (width-matched to the table below) + status pills. The stream selector
          sits exactly above the 230px left rail; the search + pills group starts
          exactly at the table's left edge (no gap between the two columns), so
          the toolbar columns line up with the body columns. -->
-    <div class="flex items-center py-[0.625rem]">
+    <div class="flex items-center py-2.5">
       <!-- Stream selector — same 230px width as the left rail below it. -->
       <div
         data-test="services-catalog-stream-selector"
-        class="flex-shrink-0"
-        :style="{ width: '230px' }"
+        class="flex-shrink-0 w-rail"
       >
         <OSelect
           :model-value="streamFilter"
           :options="availableStreams.map((s) => ({ label: s, value: s }))"
           labelKey="label"
           valueKey="value"
-          class="w-full rounded"
+          class="w-full rounded-default"
           :disabled="availableStreams.length === 0"
           @update:model-value="onStreamFilterChange"
         />
@@ -69,7 +68,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       >
         <template v-if="statusCounts.critical > 0">
           <div
-            class="inline-flex items-center gap-[0.375rem] px-[0.625rem] py-[0.25rem] rounded text-[0.75rem] font-medium bg-[color-mix(in_srgb,var(--o2-service-health-critical)_12%,transparent)] text-[var(--o2-service-health-critical)]"
+            class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-default text-xs font-medium bg-[color-mix(in_srgb,var(--color-service-health-critical)_12%,transparent)] text-service-health-critical"
             data-test="services-catalog-pill-critical"
           >
             <span>{{ statusCounts.critical }}</span>
@@ -84,7 +83,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </template>
         <template v-if="statusCounts.warning > 0">
           <div
-            class="inline-flex items-center gap-[0.375rem] px-[0.625rem] py-[0.25rem] rounded text-[0.75rem] font-medium bg-[color-mix(in_srgb,var(--o2-service-health-warning)_12%,transparent)] text-[var(--o2-service-health-warning)]"
+            class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-default text-xs font-medium bg-[color-mix(in_srgb,var(--color-service-health-warning)_12%,transparent)] text-service-health-warning"
             data-test="services-catalog-pill-warning"
           >
             <span>{{ statusCounts.warning }}</span>
@@ -99,7 +98,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </template>
         <template v-if="statusCounts.degraded > 0">
           <div
-            class="inline-flex items-center gap-[0.375rem] px-[0.625rem] py-[0.25rem] rounded text-[0.75rem] font-medium bg-[color-mix(in_srgb,var(--o2-service-health-degraded)_12%,transparent)] text-[var(--o2-service-health-degraded)]"
+            class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-default text-xs font-medium bg-[color-mix(in_srgb,var(--color-service-health-degraded)_12%,transparent)] text-service-health-degraded"
             data-test="services-catalog-pill-degraded"
           >
             <span>{{ statusCounts.degraded }}</span>
@@ -116,68 +115,68 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </div>
       <!-- Status legend -->
       <!-- <div
-        class="ml-auto flex items-center gap-3 px-[0.625rem] py-[0.325rem] rounded border border-[var(--o2-border-color)]"
+        class="ml-auto flex items-center gap-3 px-2.5 py-[0.325rem] rounded-default border border-card-glass-border"
         data-test="services-catalog-status-legend"
       >
         <span
-          class="text-[0.7rem] font-bold text-[var(--o2-text-4)] whitespace-nowrap"
+          class="text-2xs font-bold text-text-heading whitespace-nowrap"
         >
           {{ t("traces.servicesCatalog.legend.title") }}
         </span>
-        <div class="flex items-center gap-[0.875rem]">
+        <div class="flex items-center gap-3.5">
           <div
-            class="flex items-center gap-[0.375rem]"
+            class="flex items-center gap-1.5"
             data-test="services-catalog-legend-healthy"
           >
             <span class="sc-legend-dot sc-legend-dot--healthy" />
             <span
-              class="text-[0.7rem] font-semibold text-[var(--o2-text-2)]"
+              class="text-2xs font-semibold text-text-secondary"
               >{{ t("traces.servicesCatalog.status.healthy") }}</span
             >
             <span
-              class="text-[0.65rem] opacity-55 text-[var(--o2-text-4)]"
+              class="text-3xs opacity-55 text-text-label"
               >&lt;&nbsp;1%</span
             >
           </div>
           <div
-            class="flex items-center gap-[0.375rem]"
+            class="flex items-center gap-1.5"
             data-test="services-catalog-legend-degraded"
           >
             <span class="sc-legend-dot sc-legend-dot--degraded" />
             <span
-              class="text-[0.7rem] font-semibold text-[var(--o2-text-2)]"
+              class="text-2xs font-semibold text-text-secondary"
               >{{ t("traces.servicesCatalog.status.degraded") }}</span
             >
             <span
-              class="text-[0.65rem] opacity-55 text-[var(--o2-text-4)]"
+              class="text-3xs opacity-55 text-text-label"
               >1&nbsp;–&nbsp;5%</span
             >
           </div>
           <div
-            class="flex items-center gap-[0.375rem]"
+            class="flex items-center gap-1.5"
             data-test="services-catalog-legend-warning"
           >
             <span class="sc-legend-dot sc-legend-dot--warning" />
             <span
-              class="text-[0.7rem] font-semibold text-[var(--o2-text-2)]"
+              class="text-2xs font-semibold text-text-secondary"
               >{{ t("traces.servicesCatalog.status.warning") }}</span
             >
             <span
-              class="text-[0.65rem] opacity-55 text-[var(--o2-text-4)]"
+              class="text-3xs opacity-55 text-text-label"
               >5&nbsp;–&nbsp;10%</span
             >
           </div>
           <div
-            class="flex items-center gap-[0.375rem]"
+            class="flex items-center gap-1.5"
             data-test="services-catalog-legend-critical"
           >
             <span class="sc-legend-dot sc-legend-dot--critical" />
             <span
-              class="text-[0.7rem] font-semibold text-[var(--o2-text-2)]"
+              class="text-2xs font-semibold text-text-secondary"
               >{{ t("traces.servicesCatalog.status.critical") }}</span
             >
             <span
-              class="text-[0.65rem] opacity-55 text-[var(--o2-text-4)]"
+              class="text-3xs opacity-55 text-text-label"
               >&gt;&nbsp;10%</span
             >
           </div>
@@ -216,8 +215,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
            rails. The stream selector lives in the top toolbar alongside the
            search. -->
       <div
-        class="shrink-0 h-full bg-surface-panel border-r border-border-default flex flex-col gap-2 py-2 px-1"
-        :style="{ width: '230px' }"
+        class="w-rail shrink-0 h-full bg-surface-panel border-r border-border-default flex flex-col gap-2 py-2 px-1.5"
       >
         <!-- Entity-type filter: All / Services / Datastores / Queues /
              External / RPC. A vertical nav rail — same OTabs pattern as the
@@ -239,7 +237,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               v-for="cat in visibleTypeFilters"
               :key="cat"
               :name="cat"
-              class="min-h-[1.75rem]"
+              class="min-h-7"
               :data-test="`services-catalog-type-${cat}`"
             >
               <div
@@ -257,7 +255,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                        plain total to its left. Hover explains it. -->
                   <span
                     v-if="categoryUnhealthyCounts[cat] > 0"
-                    class="inline-flex items-center justify-center min-w-[1.05rem] h-[1.05rem] px-[0.25rem] rounded-full text-[0.65rem] font-semibold leading-none text-white"
+                    class="inline-flex items-center justify-center min-w-[1.05rem] h-[1.05rem] px-1 rounded-full text-3xs font-semibold leading-none text-white"
                     :style="{ backgroundColor: tabStatusColorVar(cat) }"
                     :data-test="`services-catalog-type-unhealthy-${cat}`"
                   >
@@ -298,7 +296,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
            + records-per-page + pager) all match. OTable owns pagination, so we
            feed it the full sorted list and it paginates internally. -->
       <div v-else class="flex-1 min-w-0 h-full">
-        <div class="h-full card-container">
+        <div class="h-full bg-card-glass-bg">
           <OTable
             ref="oTableRef"
             :data="sortedServices"
@@ -837,17 +835,16 @@ const categoryUnhealthyCounts = computed<Record<TypeFilter, number>>(() => {
   return counts;
 });
 
-// Tailwind text-color class for a tab's worst status; empty when healthy.
 // CSS color (var reference) for a tab's worst-status badge fill; empty when
 // healthy. Used as the filled-circle background for the unhealthy count.
 function tabStatusColorVar(filter: TypeFilter): string {
   switch (categoryWorstStatus.value[filter]) {
     case "critical":
-      return "var(--o2-service-health-critical)";
+      return "var(--color-service-health-critical)";
     case "warning":
-      return "var(--o2-service-health-warning)";
+      return "var(--color-service-health-warning)";
     case "degraded":
-      return "var(--o2-service-health-degraded)";
+      return "var(--color-service-health-degraded)";
     default:
       return "";
   }
@@ -908,16 +905,16 @@ function deriveStatus(
 }
 
 function statusBadgeClass(status: string): string {
-  if (status === "critical") return "text-(--o2-service-health-critical)";
-  if (status === "warning") return "text-(--o2-service-health-warning)";
-  if (status === "degraded") return "text-(--o2-service-health-degraded)";
-  return "text-(--o2-service-health-healthy)";
+  if (status === "critical") return "text-service-health-critical";
+  if (status === "warning") return "text-service-health-warning";
+  if (status === "degraded") return "text-service-health-degraded";
+  return "text-service-health-healthy";
 }
 
 function errorRateClass(rate: number): string {
-  if (rate > 10) return "text-red-500 font-medium";
-  if (rate > 5) return "text-orange-500";
-  if (rate > 1) return "text-yellow-500";
+  if (rate > 10) return "text-service-health-critical font-medium";
+  if (rate > 5) return "text-service-health-degraded";
+  if (rate > 1) return "text-service-health-warning";
   return "";
 }
 
@@ -1160,22 +1157,24 @@ onUnmounted(() => {
 });
 </script>
 
-<style>
-/* Vertical entity-type rail — same treatment as the Dashboards folder list so
-   the active row shows the app's standard left-rail tint + primary text, and
-   rows read calm (left-aligned, rounded, weight 500). */
-.catalog-type-filter .o-tabs {
+<style scoped>
+/* keep(lib-override:o-tabs): the vertical entity-type rail restyles OTabs' own
+   .o-tabs / .o-tabs--vertical / .o-tab DOM (rendered by the OTabs/OTab library
+   components) so the active row matches the Dashboards folder-list rail —
+   reachable only via :deep. */
+.catalog-type-filter :deep(.o-tabs) {
   height: auto !important;
   max-height: none !important;
 }
 
-.catalog-type-filter .o-tabs--vertical {
+.catalog-type-filter :deep(.o-tabs--vertical) {
   margin: 0;
 }
 
-.catalog-type-filter .o-tabs--vertical .o-tab {
+/* Horizontal padding intentionally omitted — OTab's vertical variant derives it
+   from --spacing-page-edge so this rail lines up with the page header. */
+.catalog-type-filter :deep(.o-tabs--vertical .o-tab) {
   justify-content: flex-start;
-  padding: 0 0.5rem;
   border-radius: 0.5rem;
   font-weight: 500;
   width: 100%;
diff --git a/web/src/plugins/traces/SessionDetails.spec.ts b/web/src/plugins/traces/SessionDetails.spec.ts
index 3dad85103c..1ca5538fca 100644
--- a/web/src/plugins/traces/SessionDetails.spec.ts
+++ b/web/src/plugins/traces/SessionDetails.spec.ts
@@ -198,12 +198,12 @@ const turnBodySelector = (traceId = "trace-xyz") =>
 
 const globalStubs = {
   OIcon: {
-    template: '<span class="q-icon-stub" :data-name="name"><slot /></span>',
+    template: '<span :data-name="name"><slot /></span>',
     props: ["name", "size"],
   },
   OTooltip: { template: '<div><slot /><span><slot name="content" /></span></div>', props: ["content", "maxWidth"] },
   OSkeleton: {
-    template: '<div class="q-skeleton-stub" />',
+    template: '<div class="o-skeleton-stub" />',
     props: ["type", "width", "height"],
   },
   OBadge: {
@@ -508,7 +508,7 @@ describe("SessionDetails — turn rows", () => {
 
     const wrapper = await mountComponent();
     const row = wrapper.find(turnRowSelector("ok-trace"));
-    expect(row.classes()).toContain("bg-[var(--color-surface-base)]");
+    expect(row.classes()).toContain("bg-surface-base");
   });
 
   it("status badge in turn header uses critical class for error traces", async () => {
@@ -521,7 +521,7 @@ describe("SessionDetails — turn rows", () => {
     const header = wrapper.find(turnHeaderSelector());
     // Look for the status badge span within the header
     const badgeSpan = header.findAll("span").find(
-      (s) => s.classes().join("").includes("text-[var(--color-error-500)]"),
+      (s) => s.classes().join("").includes("text-error-500"),
     );
     expect(badgeSpan).toBeTruthy();
   });
@@ -536,7 +536,7 @@ describe("SessionDetails — turn rows", () => {
     const header = wrapper.find(turnHeaderSelector());
     const badgeSpan = header.findAll("span").find(
       (s) =>
-        s.classes().join("").includes("text-[var(--color-text-secondary)]"),
+        s.classes().join("").includes("text-text-secondary"),
     );
     expect(badgeSpan).toBeTruthy();
   });
@@ -578,7 +578,7 @@ describe("SessionDetails — turn expand/collapse", () => {
     // While loading, skeleton should be shown (turn-body with loading state)
     const turnBody = wrapper.find(turnBodySelector());
     expect(turnBody.exists()).toBe(true);
-    const skeletons = wrapper.findAll(".q-skeleton-stub");
+    const skeletons = wrapper.findAll(".o-skeleton-stub");
     expect(skeletons.length).toBeGreaterThan(0);
 
     // Clean up
diff --git a/web/src/plugins/traces/SessionDetails.vue b/web/src/plugins/traces/SessionDetails.vue
index f0d7686d13..a43859e308 100644
--- a/web/src/plugins/traces/SessionDetails.vue
+++ b/web/src/plugins/traces/SessionDetails.vue
@@ -18,30 +18,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <div
     class="session-details-page h-[calc(100vh-2.6rem)]"
   >
-  <div
-    class="session-details card-container h-full flex flex-col overflow-hidden bg-[var(--color-surface-base)]"
+  <OPageLayout
+    class="session-details bg-card-glass-bg"
+    data-test="session-detail-header"
+    :title="t('traces.sessionDetail.pageTitle')"
+    :back="{
+      label: t('rum.sessions'),
+      onClick: goBack,
+      dataTest: 'session-detail-back-btn',
+    }"
+    bleed
   >
-    <!-- Header — fixed top bar (back button + title + session identity +
-         status/turns badges, trace-explorer action pinned right). Sits above the
-         scrolling body as a flex-shrink-0 sibling, mirroring IncidentDetailDrawer.
-         The card owns no horizontal padding, so the border spans edge-to-edge and
-         the header pads its own content. -->
-    <AppPageHeader
-      data-test="session-detail-header"
-      class="px-4 border-b border-border-default"
-      :title="t('traces.sessionDetail.pageTitle')"
-      :back="{
-        label: t('rum.sessions'),
-        onClick: goBack,
-        dataTest: 'session-detail-back-btn',
-      }"
-    >
       <!-- Session id pill (primary-tinted, copyable) — shows the full id -->
       <template #title-trail>
         <span
           v-if="detail"
-          class="font-semibold px-2 py-1 rounded-md inline-flex items-center gap-1.5 flex-shrink-0"
-          :class="store.state.theme === 'dark' ? 'text-blue-400 bg-blue-900/50' : 'text-blue-600 bg-blue-50'"
+          class="font-semibold px-2 py-1 rounded-default inline-flex items-center gap-1.5 flex-shrink-0 text-status-info-text bg-status-info-bg"
           data-test="session-detail-title"
         >
           <span class="font-mono text-sm">{{ detail.sessionId }}</span>
@@ -53,12 +45,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           />
         </span>
       </template>
-    </AppPageHeader>
 
     <!-- Scrollable body — owns its own scroll so the header above stays fixed.
          Pads itself horizontally (the card has no px) so focus rings on edge
          controls aren't clipped by the scroll container's overflow. -->
-    <div class="flex-1 flex flex-col min-h-0 overflow-y-auto px-[0.625rem] pt-[0.625rem]">
+    <div class="flex-1 flex flex-col min-h-0 overflow-y-auto px-page-edge pt-2.5">
     <!-- Loading — full-page skeleton mirroring the real layout (standard O2 wave
          shimmer) so nothing jumps when data lands. -->
     <div
@@ -67,52 +58,52 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       data-test="session-detail-skeleton"
     >
       <!-- Shape row: KPI tiles + ribbon -->
-      <div class="grid grid-cols-2 gap-[0.625rem] mb-[0.625rem] flex-shrink-0">
-        <div class="grid grid-cols-3 gap-[0.625rem]">
+      <div class="grid grid-cols-2 gap-2.5 mb-2.5 flex-shrink-0">
+        <div class="grid grid-cols-3 gap-2.5">
           <div v-for="n in 6" :key="n" :class="kpiCardClass()">
-            <OSkeleton type="rect" animation="wave" class="rounded w-[3rem] h-[0.7rem]" />
-            <OSkeleton type="rect" animation="wave" class="rounded w-[4.5rem] h-[1.3rem] mt-[0.3rem]" />
-            <OSkeleton type="rect" animation="wave" class="rounded w-[6.5rem] h-[0.6rem] mt-[0.4rem]" />
+            <OSkeleton type="rect" animation="wave" class="rounded-default w-12 h-[0.7rem]" />
+            <OSkeleton type="rect" animation="wave" class="rounded-default w-[4.5rem] h-[1.3rem] mt-[0.3rem]" />
+            <OSkeleton type="rect" animation="wave" class="rounded-default w-[6.5rem] h-[0.6rem] mt-[0.4rem]" />
           </div>
         </div>
-        <div class="card-container rounded-lg border border-[var(--color-border-default)] pt-[1rem] px-[1rem] pb-[0.625rem] flex flex-col">
-          <OSkeleton type="rect" animation="wave" class="rounded w-[8rem] h-[0.85rem] flex-shrink-0" />
+        <div class="bg-card-glass-bg rounded-default border border-border-default pt-4 px-4 pb-2.5 flex flex-col">
+          <OSkeleton type="rect" animation="wave" class="rounded-default w-32 h-[0.85rem] flex-shrink-0" />
           <!-- Fill the panel height (it stretches to the 6-tile block on the left)
                so the skeleton matches the real ribbon and leaves no gap below. -->
-          <OSkeleton type="rect" animation="wave" class="rounded w-full flex-1 min-h-0 mt-[0.75rem]" />
+          <OSkeleton type="rect" animation="wave" class="rounded-default w-full flex-1 min-h-0 mt-3" />
         </div>
       </div>
 
       <!-- Lower: conversation (left) + rail (right) -->
-      <div class="grid grid-cols-[minmax(0,1fr)_340px] gap-[0.625rem] flex-1 min-h-0">
+      <div class="grid grid-cols-[minmax(0,1fr)_340px] gap-2.5 flex-1 min-h-0">
         <!-- Conversation column: toolbar + panel -->
         <div class="flex flex-col min-w-0 min-h-0">
-          <div class="flex items-center gap-[0.5rem] mb-[0.625rem] flex-shrink-0">
-            <OSkeleton type="rect" animation="wave" class="rounded flex-1 h-[36px]" />
-            <OSkeleton v-for="n in 3" :key="n" type="rect" animation="wave" class="rounded w-[8rem] h-[36px]" />
+          <div class="flex items-center gap-2 mb-2.5 flex-shrink-0">
+            <OSkeleton type="rect" animation="wave" class="rounded-default flex-1 h-9" />
+            <OSkeleton v-for="n in 3" :key="n" type="rect" animation="wave" class="rounded-default w-32 h-9" />
           </div>
-          <div class="card-container rounded-lg border border-[var(--color-border-default)] flex flex-col overflow-hidden">
-            <div class="flex items-center gap-[0.625rem] px-[1rem] py-[0.75rem] border-b border-[var(--color-border-default)] flex-shrink-0">
-              <OSkeleton type="rect" animation="wave" class="rounded w-[7rem] h-[1rem]" />
+          <div class="bg-card-glass-bg rounded-default border border-border-default flex flex-col overflow-hidden">
+            <div class="flex items-center gap-2.5 px-4 py-3 border-b border-border-default flex-shrink-0">
+              <OSkeleton type="rect" animation="wave" class="rounded-default w-28 h-4" />
             </div>
-            <div class="flex flex-col gap-[0.5rem] p-[0.5rem] flex-1 min-h-0 overflow-hidden">
-              <OSkeleton v-for="n in 14" :key="n" type="rect" animation="wave" class="rounded w-full h-[3rem] flex-shrink-0" />
+            <div class="flex flex-col gap-2 p-2 flex-1 min-h-0 overflow-hidden">
+              <OSkeleton v-for="n in 14" :key="n" type="rect" animation="wave" class="rounded-default w-full h-12 flex-shrink-0" />
             </div>
           </div>
         </div>
 
         <!-- Rail: 3 hotspot card skeletons (share the rail height) -->
-        <div class="flex flex-col gap-[0.625rem] min-h-0">
+        <div class="flex flex-col gap-2.5 min-h-0">
           <div
             v-for="c in 3"
             :key="c"
-            class="card-container rounded-lg border border-[var(--color-border-default)] flex flex-col overflow-hidden"
+            class="bg-card-glass-bg rounded-default border border-border-default flex flex-col overflow-hidden"
           >
-            <div class="px-[0.75rem] py-[0.5rem] border-b border-[var(--color-border-default)] flex-shrink-0">
-              <OSkeleton type="rect" animation="wave" class="rounded w-[6rem] h-[0.8rem]" />
+            <div class="px-3 py-2 border-b border-border-default flex-shrink-0">
+              <OSkeleton type="rect" animation="wave" class="rounded-default w-24 h-[0.8rem]" />
             </div>
-            <div class="flex flex-col gap-[0.4rem] p-[0.5rem] flex-1 min-h-0 overflow-hidden">
-              <OSkeleton v-for="r in 8" :key="r" type="rect" animation="wave" class="rounded w-full h-[1.25rem] flex-shrink-0" />
+            <div class="flex flex-col gap-[0.4rem] p-2 flex-1 min-h-0 overflow-hidden">
+              <OSkeleton v-for="r in 8" :key="r" type="rect" animation="wave" class="rounded-default w-full h-5 flex-shrink-0" />
             </div>
           </div>
         </div>
@@ -127,13 +118,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <OIcon
         name="error-outline"
         size="xl"
-        class="mb-3 text-[var(--color-error-600)]"
+        class="mb-3 text-error-600"
       />
-      <div class="text-base text-[var(--color-text-heading)] mb-2">
+      <div class="text-base text-text-heading mb-2">
         {{ t('traces.sessionDetail.failedToLoad') }}
       </div>
       <div
-        class="text-sm text-[var(--color-text-muted)] mb-3 max-w-[30rem]"
+        class="text-sm text-text-muted mb-3 max-w-[30rem]"
       >
         {{ error }}
       </div>
@@ -148,12 +139,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <OIcon
         name="search-off"
         size="xl"
-        class="mb-3 text-[var(--color-text-muted)]"
+        class="mb-3 text-text-muted"
       />
-      <div class="text-base text-[var(--color-text-heading)] mb-2">
+      <div class="text-base text-text-heading mb-2">
         {{ t('traces.sessionDetail.sessionNotFound') }}
       </div>
-      <div class="text-sm text-[var(--color-text-muted)] max-w-[30rem]">
+      <div class="text-sm text-text-muted max-w-[30rem]">
         {{ t('traces.sessionDetail.noSpansFound', { id: sessionId }) }}
       </div>
     </div>
@@ -163,13 +154,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <!-- Shape row: KPI tiles (left) + session ribbon (right), always two
            equal columns side by side (matches the mockup's 1fr 1fr). -->
       <div
-        class="grid grid-cols-2 gap-[0.625rem] mb-[0.625rem] flex-shrink-0"
+        class="grid grid-cols-2 gap-2.5 mb-2.5 flex-shrink-0"
       >
       <!-- KPI strip — six session-level metric tiles. Card chrome + danger
            variant are Tailwind utilities (see kpiCardClass / kpiAccentClass),
            matching the LLM Insights dashboard so the AI module stays consistent. -->
       <div
-        class="grid grid-cols-3 grid-rows-2 h-full gap-[0.625rem]"
+        class="grid grid-cols-3 grid-rows-2 h-full gap-2.5"
         data-test="session-detail-kpis"
       >
         <div
@@ -178,29 +169,29 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :class="kpiCardClass(card.variant)"
           :data-test="`session-detail-kpi-${card.key}`"
         >
-          <!-- Title row: label on the left, a metric icon in a soft rounded
+          <!-- Title row: label on the left, a metric icon in a soft rounded-default
                tile on the right (KPI-card convention). The tile gives the icon
                room to render crisply and anchors each metric without crowding
                the label/value text. -->
           <div class="flex items-center justify-between gap-2">
-            <div class="text-[0.7rem] leading-normal font-semibold text-[var(--color-text-secondary)] min-w-0 truncate">
+            <div class="text-2xs leading-normal font-semibold text-text-secondary min-w-0 truncate">
               {{ card.label }}
             </div>
             <span
-              class="inline-flex items-center justify-center shrink-0 w-6 h-6 rounded-md bg-[var(--color-surface-subtle)] text-[var(--color-text-secondary)]"
+              class="inline-flex items-center justify-center shrink-0 w-6 h-6 rounded-default bg-surface-subtle text-text-secondary"
             >
               <OIcon :name="card.icon" size="sm" />
             </span>
           </div>
           <div class="flex items-baseline gap-[0.2rem]">
             <span
-              :class="['text-[1.4rem] font-bold leading-none tabular-nums', kpiAccentClass(card.variant) || 'text-[var(--color-grey-600)]']"
+              :class="['text-2xl font-bold leading-none tabular-nums', kpiAccentClass(card.variant) || 'text-text-secondary']"
             >
               {{ card.value }}
             </span>
             <span
               v-if="card.unit"
-              class="text-[0.8rem] font-semibold text-[var(--color-text-secondary)]"
+              class="text-compact font-semibold text-text-secondary"
             >
               {{ card.unit }}
             </span>
@@ -208,25 +199,25 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <OIcon
                 name="info"
                 size="xs"
-                class="ml-[0.15rem] cursor-default text-[var(--color-text-muted)]"
+                class="ml-[0.15rem] cursor-default text-text-muted"
               />
               <OTooltip max-width="280px">
                 <template #content>
-                  <div class="flex flex-col gap-2 min-w-[230px]">
-                    <div class="text-xs font-semibold text-[var(--color-text-heading)]">
+                  <div class="flex flex-col gap-2 min-w-57.5">
+                    <div class="text-xs font-semibold text-text-heading">
                       {{ t('traces.sessionDetail.kpiSub.cacheImpactTooltipTitle') }}
                     </div>
                     <div class="flex flex-col gap-1">
                       <div
                         v-for="row in card.tooltipRows || []"
                         :key="row.label"
-                        class="flex items-center justify-between gap-3 text-[11px]"
+                        class="flex items-center justify-between gap-3 text-2xs"
                       >
-                        <span class="text-[var(--color-text-secondary)]">{{ row.label }}</span>
-                        <span class="font-semibold tabular-nums text-[var(--color-text-heading)]">{{ row.value }}</span>
+                        <span class="text-text-secondary">{{ row.label }}</span>
+                        <span class="font-semibold tabular-nums text-text-body">{{ row.value }}</span>
                       </div>
                     </div>
-                    <div class="text-[10.5px] leading-snug text-[var(--color-text-secondary)]">
+                    <div class="text-2xs leading-snug text-text-secondary">
                       {{ t('traces.sessionDetail.kpiSub.cacheEstimate') }}
                     </div>
                   </div>
@@ -235,7 +226,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </template>
           </div>
           <div
-            class="flex items-center flex-wrap gap-1 text-[0.65rem] leading-normal font-medium text-[var(--color-text-secondary)]"
+            class="flex items-center flex-wrap gap-1 text-3xs leading-normal font-medium text-text-secondary"
           >
             <span v-if="card.subLead">{{ card.subLead }}</span>
             <template v-for="chip in card.subTurns" :key="chip.n">
@@ -246,7 +237,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :cache-pct="cacheRatio"
               >
                 <span
-                  class="inline-flex items-center justify-center min-w-[1rem] h-[1.05rem] px-[0.3rem] rounded-[0.3rem] border border-[var(--color-border-default)] bg-[var(--color-surface-base)] text-[var(--color-text-heading)] text-[0.68rem] font-bold leading-none cursor-pointer transition-colors hover:bg-[color-mix(in_srgb,var(--color-text-heading)_8%,var(--color-surface-base))] hover:border-[color-mix(in_srgb,var(--color-text-heading)_25%,var(--color-border-default))]"
+                  class="inline-flex items-center justify-center min-w-4 h-[1.05rem] px-[0.3rem] rounded-default border border-border-default bg-surface-base text-text-body text-2xs font-bold leading-none cursor-pointer transition-colors hover:bg-[color-mix(in_srgb,var(--color-text-heading)_8%,var(--color-surface-base))] hover:border-[color-mix(in_srgb,var(--color-text-heading)_25%,var(--color-border-default))]"
                   @click="jumpToTurn(chip.n)"
                 >{{ chip.label }}</span>
               </TurnPreviewCard>
@@ -282,23 +273,23 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
            scroll — the column grows with content; the rail sticks (items-start so
            it doesn't stretch to the tall conversation's height). -->
       <div
-        class="grid grid-cols-[minmax(0,1fr)_340px] gap-[0.625rem] items-start"
+        class="grid grid-cols-[minmax(0,1fr)_340px] gap-2.5 items-start"
       >
       <!-- Conversation column: toolbar + panel -->
       <div class="flex flex-col min-w-0 min-h-0">
 
       <!-- Conversation toolbar: search (fills width) + status + model filters.
            Sorting lives on the Collapsed view's metric column headers. -->
-      <div class="flex items-center gap-[0.5rem] mb-[0.625rem] flex-shrink-0">
+      <div class="flex items-center gap-2 mb-2.5 flex-shrink-0">
         <OSearchInput
           v-model="searchText"
           :placeholder="t('traces.sessionDetail.searchPlaceholder')"
           clearable
           :debounce="200"
           size="xs"
-          class="no-border flex-1! h-[36px]"
+          class="no-border flex-1! h-9"
         />
-        <div class="w-[9rem] flex-shrink-0">
+        <div class="w-36 flex-shrink-0">
           <OSelect
             v-model="statusFilter"
             :label="t('traces.sessionDetail.filters.status')"
@@ -306,7 +297,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             :options="statusOptions"
           />
         </div>
-        <div class="w-[12rem] flex-shrink-0">
+        <div class="w-48 flex-shrink-0">
           <OSelect
             v-model="modelFilter"
             :label="t('traces.sessionDetail.filters.model')"
@@ -318,14 +309,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
       <!-- Conversation panel -->
       <div
-        class="card-container rounded-lg border border-[var(--color-border-default)] mb-[0.625rem] flex flex-col overflow-hidden"
+        class="bg-card-glass-bg rounded-default border border-border-default mb-2.5 flex flex-col overflow-hidden"
         data-test="session-conversation-panel"
       >
         <!-- panel header: title + count chip + jump buttons -->
         <div
-          class="flex items-center gap-[0.625rem] px-[1rem] py-[0.75rem] border-b border-[var(--color-border-default)] flex-shrink-0"
+          class="flex items-center gap-2.5 px-4 py-3 border-b border-border-default flex-shrink-0"
         >
-          <span class="text-[0.95rem] font-semibold text-[var(--color-text-heading)]">
+          <span class="text-base font-semibold text-text-heading">
             {{ t('traces.sessionDetail.conversation') }}
           </span>
           <OTag type="countChip" value="neutral">
@@ -350,14 +341,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- turn list (Collapsed view) -->
         <div
           v-show="viewMode === 'collapsed'"
-          class="flex flex-col gap-[0.5rem] p-[0.5rem]"
+          class="flex flex-col gap-2 p-2"
         >
           <!-- column headers — clickable sort controls for the three metric bars
                (OTable-style arrows). Aligned to the same grid template as each
                turn row, sticky so they persist on scroll. -->
           <div
             v-if="filteredTraces.length"
-            class="sticky top-0 z-[5] grid grid-cols-[auto_auto_minmax(0,1fr)_5rem_5rem_5rem] items-center gap-[0.75rem] px-[0.75rem] py-[0.4rem] bg-[var(--color-surface-base)] border-b border-[var(--color-border-default)] text-[0.72rem] font-medium text-[var(--color-text-heading)]"
+            class="sticky top-0 z-[5] grid grid-cols-[auto_auto_minmax(0,1fr)_5rem_5rem_5rem] items-center gap-3 px-3 py-[0.4rem] bg-surface-base border-b border-border-default text-xs font-medium text-text-label"
             data-test="session-turn-columns"
           >
             <span></span>
@@ -367,7 +358,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               v-for="col in sortableColumns"
               :key="col.key"
               type="button"
-              class="flex items-center justify-end gap-[0.15rem] cursor-pointer select-none hover:text-[var(--color-text-heading)]"
+              class="flex items-center justify-end gap-[0.15rem] cursor-pointer select-none hover:text-text-body"
               :data-test="`session-turn-sort-${col.key}`"
               @click="toggleSort(col.key)"
             >
@@ -375,7 +366,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <OIcon
                 :name="sortIconName(col.key)"
                 size="xs"
-                :class="sortIcon(col.key) === 'none' ? 'opacity-40' : 'text-[var(--color-table-sort-icon-active)]'"
+                :class="sortIcon(col.key) === 'none' ? 'opacity-40' : 'text-table-sort-icon-active'"
               />
             </button>
           </div>
@@ -388,36 +379,36 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           >
             <!-- collapsed header (click to expand) -->
             <div
-              class="grid grid-cols-[auto_auto_minmax(0,1fr)_5rem_5rem_5rem] items-center gap-[0.75rem] px-[0.75rem] py-[0.6rem] cursor-pointer hover:bg-[color-mix(in_srgb,var(--color-text-heading)_3%,var(--color-surface-base))]"
+              class="grid grid-cols-[auto_auto_minmax(0,1fr)_5rem_5rem_5rem] items-center gap-3 px-3 py-[0.6rem] cursor-pointer hover:bg-[color-mix(in_srgb,var(--color-text-heading)_3%,var(--color-surface-base))]"
               :data-test="`session-turn-header-${trace.traceId}`"
               @click="toggleTurn(trace.traceId)"
             >
               <OIcon
                 :name="isExpanded(trace.traceId) ? 'expand-more' : 'chevron-right'"
                 size="sm"
-                class="text-[var(--color-text-muted)] flex-shrink-0"
+                class="text-text-muted flex-shrink-0"
               />
               <span
-                class="inline-flex items-center justify-center w-[1.5rem] h-[1.5rem] rounded-full text-[0.7rem] font-bold tabular-nums flex-shrink-0"
+                class="inline-flex items-center justify-center w-6 h-6 rounded-full text-2xs font-bold tabular-nums flex-shrink-0"
                 :class="trace.status === 'error'
-                  ? 'bg-[color-mix(in_srgb,var(--color-error-500)_15%,transparent)] text-[var(--color-error-500)]'
-                  : 'bg-[color-mix(in_srgb,var(--color-success-500)_15%,transparent)] text-[var(--color-success-500)]'"
+                  ? 'bg-[color-mix(in_srgb,var(--color-error-500)_15%,transparent)] text-error-500'
+                  : 'bg-[color-mix(in_srgb,var(--color-success-500)_15%,transparent)] text-status-success-text'"
               >
                 {{ originalTurnIndex(trace.traceId) + 1 }}
               </span>
               <div class="min-w-0 flex flex-col gap-[0.15rem]">
-                <div class="text-[0.8rem] font-semibold text-[var(--color-text-heading)] truncate">
+                <div class="text-compact font-semibold text-text-heading truncate">
                   {{ trace.turnUserMessage || '—' }}
                 </div>
                 <div
-                  class="text-[0.72rem] truncate"
-                  :class="trace.status === 'error' ? 'text-[var(--color-error-500)]' : 'text-[var(--color-text-secondary)]'"
+                  class="text-xs truncate"
+                  :class="trace.status === 'error' ? 'text-error-500' : 'text-text-secondary'"
                 >
                   {{ secondaryLine(trace) }}
                 </div>
               </div>
               <div class="flex flex-col gap-[0.2rem] min-w-0">
-                <span class="text-[0.72rem] font-semibold tabular-nums text-right text-[var(--color-text-secondary)]">
+                <span class="text-xs font-semibold tabular-nums text-right text-text-secondary">
                   {{ formatDuration(trace.durationNanos) }}
                 </span>
                 <OProgressBar
@@ -427,13 +418,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 />
               </div>
               <div class="flex flex-col gap-[0.2rem] min-w-0">
-                <span class="text-[0.72rem] font-semibold tabular-nums text-right text-[var(--color-text-secondary)]">
+                <span class="text-xs font-semibold tabular-nums text-right text-text-secondary">
                   ${{ trace.cost.toFixed(4) }}
                 </span>
                 <OProgressBar :value="ratio(trace.cost, maxTurnCost)" size="xs" />
               </div>
               <div class="flex flex-col gap-[0.2rem] min-w-0">
-                <span class="text-[0.72rem] font-semibold tabular-nums text-right text-[var(--color-text-secondary)]">
+                <span class="text-xs font-semibold tabular-nums text-right text-text-secondary">
                   {{ formatTokens(trace.tokens) }}
                 </span>
                 <OProgressBar :value="ratio(trace.tokens, maxTurnTokens)" size="xs" />
@@ -443,33 +434,33 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <!-- expanded body (basic messages + stats; full Ledger is S6) -->
             <div
               v-if="isExpanded(trace.traceId)"
-              class="border-t border-[var(--color-border-default)] bg-[var(--color-surface-base)] p-[0.75rem]"
+              class="border-t border-border-default bg-surface-base p-3"
               :data-test="`session-turn-body-${trace.traceId}`"
             >
               <!-- loading skeleton -->
               <div v-if="sessionSpansLoading" class="flex flex-col gap-[0.4rem]">
-                <OSkeleton type="rect" animation="wave" class="rounded w-[40%] h-[0.7rem]" />
-                <OSkeleton type="rect" animation="wave" class="rounded w-[90%] h-[0.65rem]" />
-                <OSkeleton type="rect" animation="wave" class="rounded w-[80%] h-[0.65rem]" />
-                <OSkeleton type="rect" animation="wave" class="rounded w-[60%] h-[0.65rem]" />
+                <OSkeleton type="rect" animation="wave" class="rounded-default w-[40%] h-[0.7rem]" />
+                <OSkeleton type="rect" animation="wave" class="rounded-default w-[90%] h-[0.65rem]" />
+                <OSkeleton type="rect" animation="wave" class="rounded-default w-[80%] h-[0.65rem]" />
+                <OSkeleton type="rect" animation="wave" class="rounded-default w-[60%] h-[0.65rem]" />
               </div>
 
-              <div v-else class="flex flex-col gap-[0.625rem]">
+              <div v-else class="flex flex-col gap-2.5">
                 <!-- user block -->
-                <div class="rounded-lg border border-[var(--color-border-default)] bg-[var(--color-surface-base)] overflow-hidden">
-                  <div class="flex items-center justify-between px-[0.625rem] py-[0.375rem] border-b border-[var(--color-border-default)]">
-                    <span class="text-[0.75rem] font-bold text-[var(--color-text-heading)]">
+                <div class="rounded-default border border-border-default bg-surface-base overflow-hidden">
+                  <div class="flex items-center justify-between px-2.5 py-1.5 border-b border-border-default">
+                    <span class="text-xs font-bold text-text-heading">
                       {{ t('traces.sessionDetail.roles.user') }}
                     </span>
                     <OIcon
                       v-if="turnDetail(trace.traceId)?.userMessage"
                       name="content-copy"
                       size="xs"
-                      class="cursor-pointer text-[var(--color-text-muted)] hover:text-[var(--color-text-heading)]"
+                      class="cursor-pointer text-text-muted hover:text-text-body"
                       @click="copyText(turnDetail(trace.traceId)?.userMessage?.content)"
                     />
                   </div>
-                  <div class="px-[0.75rem] py-[0.625rem] text-[0.8rem] leading-relaxed text-[var(--color-text-heading)] whitespace-pre-wrap break-words max-h-[12rem] overflow-y-auto">
+                  <div class="px-3 py-2.5 text-compact leading-relaxed text-text-body whitespace-pre-wrap break-words max-h-48 overflow-y-auto">
                     {{ turnDetail(trace.traceId)?.userMessage?.content || t('traces.sessionDetail.noUserMessage') }}
                   </div>
                 </div>
@@ -482,9 +473,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 />
 
                 <!-- assistant block -->
-                <div class="rounded-lg border border-[var(--color-border-default)] bg-[var(--color-surface-base)] overflow-hidden">
-                  <div class="flex items-center justify-between px-[0.625rem] py-[0.375rem] border-b border-[var(--color-border-default)]">
-                    <span class="flex items-center gap-[0.375rem] text-[0.75rem] font-bold text-[var(--color-text-heading)]">
+                <div class="rounded-default border border-border-default bg-surface-base overflow-hidden">
+                  <div class="flex items-center justify-between px-2.5 py-1.5 border-b border-border-default">
+                    <span class="flex items-center gap-1.5 text-xs font-bold text-text-heading">
                       {{ t('traces.sessionDetail.roles.assistant') }}
                       <OTag v-if="turnDetail(trace.traceId)?.model" variant="purple-soft" size="sm">
                         {{ turnDetail(trace.traceId)?.model }}
@@ -494,7 +485,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       v-if="turnDetail(trace.traceId)?.assistantMessage"
                       name="content-copy"
                       size="xs"
-                      class="cursor-pointer text-[var(--color-text-muted)] hover:text-[var(--color-text-heading)]"
+                      class="cursor-pointer text-text-muted hover:text-text-body"
                       @click="copyText(turnDetail(trace.traceId)?.assistantMessage?.content)"
                     />
                   </div>
@@ -502,19 +493,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                        code, bold). v-html is sanitized in renderMarkdown(). -->
                   <div
                     v-if="turnDetail(trace.traceId)?.assistantMessage?.content"
-                    class="markdown-body px-[0.75rem] py-[0.625rem] text-[0.8rem] text-[var(--color-text-heading)] break-words max-h-[16rem] overflow-auto"
+                    class="markdown-body px-3 py-2.5 text-compact text-text-body break-words max-h-64 overflow-auto"
                     v-html="renderMarkdown(turnDetail(trace.traceId)?.assistantMessage?.content)"
                   />
                   <div
                     v-else
-                    class="px-[0.75rem] py-[0.625rem] text-[0.8rem] text-[var(--color-text-muted)]"
+                    class="px-3 py-2.5 text-compact text-text-muted"
                   >
                     {{ t('traces.sessionDetail.noAssistantMessage') }}
                   </div>
                 </div>
 
                 <!-- compact stats footer -->
-                <div class="flex flex-wrap items-center gap-x-[0.75rem] gap-y-[0.25rem] text-[0.7rem] text-[var(--color-text-secondary)] tabular-nums">
+                <div class="flex flex-wrap items-center gap-x-3 gap-y-1 text-2xs text-text-secondary tabular-nums">
                   <span>{{ formatTime(trace.startTimeMicros) }}</span>
                   <span>· {{ formatDuration(trace.durationNanos) }}</span>
                   <span>· ${{ trace.cost.toFixed(4) }}</span>
@@ -525,7 +516,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </span>
                   <div class="flex-1"></div>
                   <OButton variant="outline" size="sm" @click="openTrace(trace.traceId)">
-                    <OIcon name="open-in-new" size="xs" class="mr-[0.25rem]" />
+                    <OIcon name="open-in-new" size="xs" class="mr-1" />
                     {{ t('traces.sessionDetail.openInTraceExplorer') }}
                   </OButton>
                 </div>
@@ -536,10 +527,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- empty state -->
           <div
             v-if="filteredTraces.length === 0"
-            class="flex flex-col items-center justify-center gap-[0.5rem] py-[3rem] text-[var(--color-text-muted)]"
+            class="flex flex-col items-center justify-center gap-2 py-12 text-text-muted"
           >
             <OIcon name="search-off" size="lg" />
-            <span class="text-[0.8rem]">{{ t('traces.sessionDetail.noTurnsMatch') }}</span>
+            <span class="text-compact">{{ t('traces.sessionDetail.noTurnsMatch') }}</span>
           </div>
         </div>
 
@@ -549,12 +540,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <div v-if="viewMode === 'pretty'">
           <div
             v-if="sessionSpansLoading"
-            class="flex flex-col gap-[0.5rem] p-[0.75rem]"
+            class="flex flex-col gap-2 p-3"
             data-test="session-pretty-skeleton"
           >
-            <OSkeleton type="rect" animation="wave" class="rounded w-[30%] h-[1.5rem]" />
-            <OSkeleton type="rect" animation="wave" class="rounded w-[70%] h-[3rem] mt-[0.5rem]" />
-            <OSkeleton type="rect" animation="wave" class="rounded w-[85%] h-[4rem]" />
+            <OSkeleton type="rect" animation="wave" class="rounded-default w-[30%] h-6" />
+            <OSkeleton type="rect" animation="wave" class="rounded-default w-[70%] h-12 mt-2" />
+            <OSkeleton type="rect" animation="wave" class="rounded-default w-[85%] h-16" />
           </div>
           <ThreadView
             v-else
@@ -576,26 +567,26 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
            scrolls internally when it genuinely overflows. The rail sticks to the
            top and never exceeds the viewport. -->
       <aside
-        class="sticky top-0 self-start flex flex-col gap-[0.625rem] max-h-[calc(100vh-2.6rem-68px-1.25rem)] overflow-y-auto pb-[0.625rem]"
+        class="sticky top-0 self-start flex flex-col gap-2.5 max-h-[calc(100vh-2.6rem-68px-1.25rem)] overflow-y-auto pb-2.5"
         data-test="session-rail"
       >
         <!-- Tool Hotspots (by time + calls; cost pending backend attribution) -->
-        <div class="card-container rounded-lg border border-[var(--color-border-default)] flex flex-col overflow-hidden">
-          <div class="flex items-center gap-[0.4rem] px-[0.75rem] py-[0.5rem] border-b border-[var(--color-border-default)] flex-shrink-0">
-            <OIcon name="build" size="xs" class="text-[var(--color-text-muted)]" />
-            <span class="text-[0.78rem] font-semibold text-[var(--color-text-heading)]">
+        <div class="bg-card-glass-bg rounded-default border border-border-default flex flex-col overflow-hidden">
+          <div class="flex items-center gap-[0.4rem] px-3 py-2 border-b border-border-default flex-shrink-0">
+            <OIcon name="build" size="xs" class="text-text-muted" />
+            <span class="text-xs font-semibold text-text-heading">
               {{ t('traces.sessionDetail.rail.toolHotspots') }}
             </span>
           </div>
           <div
             v-if="sessionSpansLoading"
-            class="flex flex-col gap-[0.4rem] p-[0.625rem]"
+            class="flex flex-col gap-[0.4rem] p-2.5"
           >
-            <OSkeleton v-for="n in 3" :key="n" type="rect" animation="wave" class="rounded w-full h-[1.1rem]" />
+            <OSkeleton v-for="n in 3" :key="n" type="rect" animation="wave" class="rounded-default w-full h-[1.1rem]" />
           </div>
           <div
             v-else-if="toolHotspots.length"
-            class="max-h-[15rem] overflow-y-auto p-[0.375rem] flex flex-col gap-[0.1rem]"
+            class="max-h-60 overflow-y-auto p-1.5 flex flex-col gap-[0.1rem]"
           >
             <span
               v-for="(row, i) in toolHotspots"
@@ -603,43 +594,43 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               class="contents"
             >
               <button
-                class="flex items-center gap-[0.5rem] w-full px-[0.4rem] py-[0.35rem] rounded-md text-left cursor-pointer hover:bg-[color-mix(in_srgb,var(--color-text-heading)_4%,transparent)]"
+                class="flex items-center gap-2 w-full px-[0.4rem] py-[0.35rem] rounded-default text-left cursor-pointer hover:bg-[color-mix(in_srgb,var(--color-text-heading)_4%,transparent)]"
                 @click="jumpToTurn(originalTurnIndex(row.topTraceId) + 1)"
               >
-                <span class="w-[1.25rem] h-[1.25rem] rounded-md grid place-items-center text-[0.62rem] font-bold tabular-nums flex-shrink-0 bg-[color-mix(in_srgb,var(--color-text-heading)_8%,transparent)] text-[var(--color-text-secondary)]">
+                <span class="w-5 h-5 rounded-default grid place-items-center text-3xs font-bold tabular-nums flex-shrink-0 bg-[color-mix(in_srgb,var(--color-text-heading)_8%,transparent)] text-text-secondary">
                   {{ i + 1 }}
                 </span>
-                <span class="text-[0.72rem] font-semibold text-[var(--color-text-heading)] flex-1 min-w-0 truncate" :title="row.name">
+                <span class="text-xs font-semibold text-text-heading flex-1 min-w-0 truncate" :title="row.name">
                   {{ row.name }}
                 </span>
-                <span class="flex items-center gap-[0.3rem] text-[0.7rem] tabular-nums flex-shrink-0">
-                  <span class="font-semibold text-[var(--color-text-secondary)]">
+                <span class="flex items-center gap-[0.3rem] text-2xs tabular-nums flex-shrink-0">
+                  <span class="font-semibold text-text-secondary">
                     {{ formatDuration(row.duration) }}
                   </span>
-                  <span class="text-[var(--color-text-muted)]">
+                  <span class="text-text-muted">
                     · {{ t(row.calls === 1 ? 'traces.sessionDetail.rail.call' : 'traces.sessionDetail.rail.calls', { n: row.calls }) }}
                   </span>
                 </span>
-                <OIcon name="chevron-right" size="xs" class="text-[var(--color-text-muted)] flex-shrink-0" />
+                <OIcon name="chevron-right" size="xs" class="text-text-muted flex-shrink-0" />
               </button>
               <!-- Hover: which turns this (deduped) tool actually ran in. side="left"
                    (like the Cost/Slowest hovers) so it opens to the side instead of
                    covering the rows above it. -->
               <OTooltip side="left" :delay="120" max-width="220px" content-class="p-0!">
                 <template #content>
-                  <div class="w-[200px] py-[9px] px-3 text-xs text-[var(--color-text-heading)]">
-                    <div class="font-bold mb-[2px] break-words">{{ row.name }}</div>
-                    <div class="text-[10px] text-[var(--color-text-muted)] mb-[7px]">
+                  <div class="w-50 py-2.25 px-3 text-xs text-text-body">
+                    <div class="font-bold mb-0.5 break-words">{{ row.name }}</div>
+                    <div class="text-3xs text-text-muted mb-1.75">
                       {{ t(row.calls === 1 ? 'traces.sessionDetail.rail.call' : 'traces.sessionDetail.rail.calls', { n: row.calls }) }}
                     </div>
-                    <div class="text-[9.5px] font-bold tracking-[0.05em] text-[var(--color-text-secondary)] mb-1">
+                    <div class="text-3xs font-bold tracking-[0.05em] text-text-secondary mb-1">
                       {{ t('traces.sessionDetail.rail.usedIn') }}
                     </div>
                     <div class="flex flex-wrap gap-1">
                       <span
                         v-for="tn in row.turns"
                         :key="tn"
-                        class="inline-flex items-center px-[0.35rem] h-[1.05rem] rounded-[0.3rem] border border-[var(--color-border-default)] bg-[var(--color-surface-base)] text-[10px] font-semibold tabular-nums"
+                        class="inline-flex items-center px-[0.35rem] h-[1.05rem] rounded-default border border-border-default bg-surface-base text-3xs font-semibold tabular-nums"
                       >{{ t('traces.sessionDetail.turnLabel') }} {{ tn }}</span>
                     </div>
                   </div>
@@ -647,20 +638,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </OTooltip>
             </span>
           </div>
-          <div v-else class="px-[0.75rem] py-[1.25rem] text-center text-[0.72rem] text-[var(--color-text-muted)]">
+          <div v-else class="px-3 py-5 text-center text-xs text-text-muted">
             {{ t('traces.sessionDetail.rail.noTools') }}
           </div>
         </div>
 
         <!-- Cost Hotspots -->
-        <div class="card-container rounded-lg border border-[var(--color-border-default)] flex flex-col overflow-hidden">
-          <div class="flex items-center gap-[0.4rem] px-[0.75rem] py-[0.5rem] border-b border-[var(--color-border-default)] flex-shrink-0">
-            <OIcon name="trending-up" size="xs" class="text-[var(--color-text-muted)]" />
-            <span class="text-[0.78rem] font-semibold text-[var(--color-text-heading)]">
+        <div class="bg-card-glass-bg rounded-default border border-border-default flex flex-col overflow-hidden">
+          <div class="flex items-center gap-[0.4rem] px-3 py-2 border-b border-border-default flex-shrink-0">
+            <OIcon name="trending-up" size="xs" class="text-text-muted" />
+            <span class="text-xs font-semibold text-text-heading">
               {{ t('traces.sessionDetail.rail.costHotspots') }}
             </span>
           </div>
-          <div class="max-h-[15rem] overflow-y-auto p-[0.375rem] flex flex-col gap-[0.1rem]">
+          <div class="max-h-60 overflow-y-auto p-1.5 flex flex-col gap-[0.1rem]">
             <TurnPreviewCard
               v-for="(row, i) in costHotspots"
               :key="row.n"
@@ -670,41 +661,41 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               side="right"
             >
               <button
-                class="flex items-center gap-[0.5rem] w-full px-[0.4rem] py-[0.35rem] rounded-md text-left cursor-pointer hover:bg-[color-mix(in_srgb,var(--color-text-heading)_4%,transparent)]"
+                class="flex items-center gap-2 w-full px-[0.4rem] py-[0.35rem] rounded-default text-left cursor-pointer hover:bg-[color-mix(in_srgb,var(--color-text-heading)_4%,transparent)]"
                 @click="jumpToTurn(row.n)"
               >
-                <span class="w-[1.25rem] h-[1.25rem] rounded-md grid place-items-center text-[0.62rem] font-bold tabular-nums flex-shrink-0 bg-[color-mix(in_srgb,var(--color-text-heading)_8%,transparent)] text-[var(--color-text-secondary)]">
+                <span class="w-5 h-5 rounded-default grid place-items-center text-3xs font-bold tabular-nums flex-shrink-0 bg-[color-mix(in_srgb,var(--color-text-heading)_8%,transparent)] text-text-secondary">
                   {{ i + 1 }}
                 </span>
-                <span class="text-[0.72rem] font-semibold text-[var(--color-text-heading)] w-[2.75rem] flex-shrink-0">
+                <span class="text-xs font-semibold text-text-heading w-11 flex-shrink-0">
                   {{ t('traces.sessionDetail.turnLabel') }} {{ row.n }}
                 </span>
                 <span class="flex-1 min-w-0">
                   <OProgressBar :value="ratio(row.cost, maxTurnCost)" size="xs" />
                 </span>
                 <span class="flex flex-col items-end min-w-[3.25rem]">
-                  <span class="text-[0.7rem] font-semibold tabular-nums text-[var(--color-text-secondary)]">
+                  <span class="text-2xs font-semibold tabular-nums text-text-secondary">
                     ${{ row.cost.toFixed(4) }}
                   </span>
-                  <span v-if="detail && detail.cost > 0" class="text-[0.6rem] tabular-nums text-[var(--color-text-muted)]">
+                  <span v-if="detail && detail.cost > 0" class="text-3xs tabular-nums text-text-muted">
                     {{ ((row.cost / detail.cost) * 100).toFixed(1) }}%
                   </span>
                 </span>
-                <OIcon name="chevron-right" size="xs" class="text-[var(--color-text-muted)] flex-shrink-0" />
+                <OIcon name="chevron-right" size="xs" class="text-text-muted flex-shrink-0" />
               </button>
             </TurnPreviewCard>
           </div>
         </div>
 
         <!-- Slowest Turns -->
-        <div class="card-container rounded-lg border border-[var(--color-border-default)] flex flex-col overflow-hidden">
-          <div class="flex items-center gap-[0.4rem] px-[0.75rem] py-[0.5rem] border-b border-[var(--color-border-default)] flex-shrink-0">
-            <OIcon name="schedule" size="xs" class="text-[var(--color-text-muted)]" />
-            <span class="text-[0.78rem] font-semibold text-[var(--color-text-heading)]">
+        <div class="bg-card-glass-bg rounded-default border border-border-default flex flex-col overflow-hidden">
+          <div class="flex items-center gap-[0.4rem] px-3 py-2 border-b border-border-default flex-shrink-0">
+            <OIcon name="schedule" size="xs" class="text-text-muted" />
+            <span class="text-xs font-semibold text-text-heading">
               {{ t('traces.sessionDetail.rail.slowestTurns') }}
             </span>
           </div>
-          <div class="max-h-[15rem] overflow-y-auto p-[0.375rem] flex flex-col gap-[0.1rem]">
+          <div class="max-h-60 overflow-y-auto p-1.5 flex flex-col gap-[0.1rem]">
             <TurnPreviewCard
               v-for="(row, i) in slowestTurns"
               :key="row.n"
@@ -714,22 +705,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               side="right"
             >
               <button
-                class="flex items-center gap-[0.5rem] w-full px-[0.4rem] py-[0.35rem] rounded-md text-left cursor-pointer hover:bg-[color-mix(in_srgb,var(--color-text-heading)_4%,transparent)]"
+                class="flex items-center gap-2 w-full px-[0.4rem] py-[0.35rem] rounded-default text-left cursor-pointer hover:bg-[color-mix(in_srgb,var(--color-text-heading)_4%,transparent)]"
                 @click="jumpToTurn(row.n)"
               >
-                <span class="w-[1.25rem] h-[1.25rem] rounded-md grid place-items-center text-[0.62rem] font-bold tabular-nums flex-shrink-0 bg-[color-mix(in_srgb,var(--color-text-heading)_8%,transparent)] text-[var(--color-text-secondary)]">
+                <span class="w-5 h-5 rounded-default grid place-items-center text-3xs font-bold tabular-nums flex-shrink-0 bg-[color-mix(in_srgb,var(--color-text-heading)_8%,transparent)] text-text-secondary">
                   {{ i + 1 }}
                 </span>
-                <span class="text-[0.72rem] font-semibold text-[var(--color-text-heading)] w-[2.75rem] flex-shrink-0">
+                <span class="text-xs font-semibold text-text-heading w-11 flex-shrink-0">
                   {{ t('traces.sessionDetail.turnLabel') }} {{ row.n }}
                 </span>
                 <span class="flex-1 min-w-0">
                   <OProgressBar :value="ratio(row.lat, maxTurnLat)" :variant="row.status === 'error' ? 'danger' : 'warning'" size="xs" />
                 </span>
-                <span class="text-[0.7rem] font-semibold tabular-nums text-[var(--color-text-secondary)] min-w-[2.75rem] text-right">
+                <span class="text-2xs font-semibold tabular-nums text-text-secondary min-w-11 text-right">
                   {{ formatDuration(row.lat) }}
                 </span>
-                <OIcon name="chevron-right" size="xs" class="text-[var(--color-text-muted)] flex-shrink-0" />
+                <OIcon name="chevron-right" size="xs" class="text-text-muted flex-shrink-0" />
               </button>
             </TurnPreviewCard>
           </div>
@@ -738,7 +729,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </div>
     </template>
     </div>
-  </div>
+  </OPageLayout>
   </div>
 </template>
 
@@ -763,7 +754,7 @@ import {
 } from "./threadView.utils";
 import OButton from "@/lib/core/Button/OButton.vue";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import OTag from "@/lib/core/Badge/OTag.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
 import OSkeleton from "@/lib/feedback/Skeleton/OSkeleton.vue";
@@ -878,15 +869,15 @@ function cacheInputDenominator(d: SessionDetail): number {
 // Errors uses a variant (red when > 50% error rate); every other tile is neutral.
 function kpiCardClass(variant?: "danger"): string {
   const base =
-    "flex flex-col justify-center gap-1 px-3.5 py-2.5 rounded-lg border transition-shadow hover:shadow-[0_1px_6px_rgba(0,0,0,0.08)]";
+    "flex flex-col justify-center gap-1 px-3.5 py-2.5 rounded-default border transition-shadow hover:shadow-[0_1px_6px_rgba(0,0,0,0.08)]";
   if (variant === "danger")
     return `${base} bg-[color-mix(in_srgb,var(--color-error-500)_5%,var(--color-surface-base))] border-[color-mix(in_srgb,var(--color-error-500)_35%,var(--color-border-default))]`;
-  return `${base} bg-[var(--color-surface-base)] border-[var(--color-border-default)]`;
+  return `${base} bg-surface-base border-border-default`;
 }
 
 // Accent text colour for a variant's value; "" → use the neutral default.
 function kpiAccentClass(variant?: "danger"): string {
-  if (variant === "danger") return "text-[var(--color-error-500)]";
+  if (variant === "danger") return "text-error-500";
   return "";
 }
 
@@ -1047,8 +1038,7 @@ const kpiCards = computed<
   ];
 });
 
-// ── Conversation: filters, sort, expand (logic restored from the pre-redesign
-// page; markup is rebuilt to the new design). All client-side over `traces`. ──
+// ── Conversation: filters, sort, expand. All client-side over `traces`. ──
 const searchText = ref("");
 const statusFilter = ref<"all" | "ok" | "error">("all");
 const modelFilter = ref<string>("all");
@@ -1110,10 +1100,8 @@ const expandedTurns = reactive<Record<string, boolean>>({});
 // Per-turn detail is DERIVED from the session spans we already fetch eagerly
 // (`sessionSpans`) — the SAME single source that powers the Pretty view and the
 // Tool Hotspots. This guarantees the collapsed turn body, the tool hotspots, and
-// the transcript can never disagree. (Previously a separate per-turn query could
-// come back empty while the spans clearly contained tools — so clicking a tool
-// hotspot jumped to a turn that reported "0 tool calls".) Spans are grouped by
-// `trace_id` and classified exactly like ThreadView / the old fetchTurnDetail.
+// the transcript can never disagree. Spans are grouped by `trace_id` and
+// classified exactly like ThreadView.
 const LLM_OPS = new Set([
   "chat",
   "text_completion",
@@ -1320,7 +1308,7 @@ function onSpanSelected(spanId: string) {
 // ── Right-rail hotspots ────────────────────────────────────────────────────
 // Slowest turns + cost hotspots come from `traces`. Tool hotspots come from the
 // session spans (ranked by total duration + calls — tool spans carry no cost,
-// pending a backend per-tool attribution; see redesign doc §3).
+// pending a backend per-tool attribution).
 const slowestTurns = computed(() =>
   traces.value
     .map((t, i) => ({ n: i + 1, lat: t.durationNanos, status: t.status }))
@@ -1487,10 +1475,10 @@ function turnRowClass(trace: SessionTraceRow): string {
   const surface =
     trace.status === "error"
       ? "bg-[color-mix(in_srgb,var(--color-error-500)_5%,var(--color-surface-base))]"
-      : "bg-[var(--color-surface-base)]";
+      : "bg-surface-base";
   const flash =
-    flashTurn.value === n ? " ring-2 ring-[var(--color-primary-500)]" : "";
-  return `rounded-lg border border-[var(--color-border-default)] ${surface} overflow-hidden${flash}`;
+    flashTurn.value === n ? " ring-2 ring-primary-500" : "";
+  return `rounded-default border border-border-default ${surface} overflow-hidden${flash}`;
 }
 
 async function load() {
@@ -1585,10 +1573,11 @@ onMounted(load);
 </script>
 
 <style scoped lang="scss">
-/* Markdown styling for the assistant message (v-html). Scoped CSS is the one
-   sanctioned case (§5a): you can't target innerHTML-injected elements with
-   Tailwind utility classes, so `:deep()` rules are used. All colours map to
-   --color-* tokens so it adapts to the theme. */
+/* keep(generated-content): markdown styling for the assistant message injected
+   with v-html. Those nodes carry no scope attribute and no classes of their own,
+   so :deep() element selectors are the only expressible form — a Tailwind
+   utility cannot reach them. All colours map to --color-* tokens, so this one
+   rule set covers light and dark. */
 .markdown-body {
   line-height: 1.55;
 
@@ -1610,16 +1599,16 @@ onMounted(load);
     line-height: 1.3;
   }
   :deep(h1) {
-    font-size: 1.05rem;
+    font-size: var(--text-base);
   }
   :deep(h2) {
-    font-size: 0.95rem;
+    font-size: var(--text-base);
   }
   :deep(h3) {
-    font-size: 0.875rem;
+    font-size: var(--text-sm);
   }
   :deep(h4) {
-    font-size: 0.8rem;
+    font-size: var(--text-compact);
   }
   :deep(ul),
   :deep(ol) {
@@ -1630,7 +1619,7 @@ onMounted(load);
     margin: 0.15rem 0;
   }
   :deep(a) {
-    color: var(--color-primary-500, #3b82f6);
+    color: var(--color-text-link);
     text-decoration: none;
 
     &:hover {
@@ -1638,17 +1627,17 @@ onMounted(load);
     }
   }
   :deep(code) {
-    font-family: monospace;
-    font-size: 0.72rem;
+    font-family: var(--font-mono);
+    font-size: var(--text-xs);
     background: color-mix(in srgb, var(--color-text-heading) 8%, transparent);
     padding: 0.1rem 0.3rem;
-    border-radius: 3px;
+    border-radius: 0.1875rem;
   }
   :deep(pre) {
     background: color-mix(in srgb, var(--color-text-heading) 5%, transparent);
     border: 1px solid var(--color-border-default);
     padding: 0.5rem 0.625rem;
-    border-radius: 4px;
+    border-radius: var(--radius-default);
     overflow-x: auto;
     margin: 0.5rem 0;
   }
@@ -1657,7 +1646,7 @@ onMounted(load);
     padding: 0;
   }
   :deep(blockquote) {
-    border-left: 3px solid var(--color-border-default);
+    border-left: 0.1875rem solid var(--color-border-default);
     margin: 0.5rem 0;
     padding-left: 0.75rem;
     color: var(--color-text-secondary);
@@ -1666,7 +1655,7 @@ onMounted(load);
     border-collapse: collapse;
     width: 100%;
     margin: 0.5rem 0;
-    font-size: 0.72rem;
+    font-size: var(--text-xs);
   }
   :deep(th),
   :deep(td) {
diff --git a/web/src/plugins/traces/SessionRibbon.vue b/web/src/plugins/traces/SessionRibbon.vue
index aeb438ce96..4e2eca3cbc 100644
--- a/web/src/plugins/traces/SessionRibbon.vue
+++ b/web/src/plugins/traces/SessionRibbon.vue
@@ -21,16 +21,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
   <div
-    class="card-container rounded-lg border border-[var(--color-border-default)] pt-[1rem] px-[1rem] pb-[0.625rem] flex flex-col"
+    class="bg-card-glass-bg rounded-default border border-border-default pt-4 px-4 pb-2.5 flex flex-col"
     data-test="session-ribbon"
   >
     <!-- Header: title + subtitle (left) · metric toggle (right) -->
-    <div class="flex items-baseline justify-between gap-[0.5rem] mb-[0.75rem]">
+    <div class="flex items-baseline justify-between gap-2 mb-3">
       <div>
-        <div class="text-[0.85rem] font-semibold text-[var(--color-text-heading)]">
+        <div class="text-sm font-semibold text-text-heading">
           {{ t('traces.sessionDetail.ribbon.title') }}
         </div>
-        <div class="text-[0.7rem] leading-normal text-[var(--color-text-secondary)] mt-[0.1rem]">
+        <div class="text-2xs leading-normal text-text-secondary mt-[0.1rem]">
           {{ t('traces.sessionDetail.ribbon.subtitle') }}
         </div>
       </div>
@@ -53,9 +53,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
          whole session when it fits, otherwise just the selected window. -->
     <div class="flex flex-col flex-1 min-h-0">
       <!-- chart region: y-axis labels + bars, sharing the grown height -->
-      <div class="flex gap-[0.5rem] flex-1 min-h-0">
+      <div class="flex gap-2 flex-1 min-h-0">
         <div
-          class="flex flex-col justify-between items-end h-full w-[2.75rem] flex-shrink-0 text-[0.6rem] text-[var(--color-text-muted)] tabular-nums"
+          class="flex flex-col justify-between items-end h-full w-11 flex-shrink-0 text-3xs text-text-muted tabular-nums"
         >
           <span>{{ maxLabel }}</span>
           <span>{{ midLabel }}</span>
@@ -63,11 +63,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
 
         <div
-          class="relative flex-1 min-w-0 min-h-0 flex items-end gap-[3px] border-l border-b border-[var(--color-border-default)]"
+          class="relative flex-1 min-w-0 min-h-0 flex items-end gap-0.75 border-l border-b border-border-default"
         >
           <!-- gridlines (top + mid) to echo the dashboard chart grid -->
-          <div class="absolute inset-x-0 top-0 border-t border-[var(--color-border-default)] opacity-60" />
-          <div class="absolute inset-x-0 top-1/2 border-t border-[var(--color-border-default)] opacity-40" />
+          <div class="absolute inset-x-0 top-0 border-t border-border-default opacity-60" />
+          <div class="absolute inset-x-0 top-1/2 border-t border-border-default opacity-40" />
 
           <TurnPreviewCard
             v-for="bar in detailBars"
@@ -78,7 +78,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             :delay="40"
           >
             <div
-              class="relative flex-1 min-w-0 rounded-t-[2px] cursor-pointer transition-[height] duration-300 ease-out hover:brightness-110"
+              class="relative flex-1 min-w-0 rounded-t-default cursor-pointer transition-[height] duration-300 ease-out hover:brightness-110"
               :style="{ height: bar.pct + '%', background: bar.color }"
               @click="emit('jump', bar.index + 1)"
             />
@@ -89,14 +89,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <!-- x-axis + title, offset by the y-axis column width so the numbers stay
            aligned under their bars. With the window capped at WINDOW turns, every
            visible bar is wide enough to print its turn number. -->
-      <div class="flex gap-[0.5rem] flex-shrink-0">
-        <div class="w-[2.75rem] flex-shrink-0" />
+      <div class="flex gap-2 flex-shrink-0">
+        <div class="w-11 flex-shrink-0" />
         <div class="flex-1 min-w-0">
-          <div class="flex gap-[3px] mt-[0.25rem]">
+          <div class="flex gap-0.75 mt-1">
             <span
               v-for="bar in detailBars"
               :key="bar.index"
-              class="flex-1 min-w-0 text-center text-[0.6rem] text-[var(--color-text-muted)] tabular-nums"
+              class="flex-1 min-w-0 text-center text-3xs text-text-muted tabular-nums"
             >
               {{ detailLabeled.has(bar.index + 1) ? bar.index + 1 : "" }}
             </span>
@@ -105,7 +105,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- x-axis title — matches the dashboard axis name (nameLocation
                "middle" + nameTextStyle bold/14px). -->
           <div
-            class="text-center text-[14px] font-bold text-[var(--color-text-heading)] mt-[0.25rem]"
+            class="text-center text-sm font-bold text-text-heading mt-1"
           >
             {{ t('traces.sessionDetail.turnLabel') }}
           </div>
@@ -121,12 +121,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
          up with the bars above. -->
     <div
       v-if="windowed"
-      class="flex gap-[0.5rem] flex-shrink-0 mt-[0.625rem]"
+      class="flex gap-2 flex-shrink-0 mt-2.5"
     >
-      <div class="w-[2.75rem] flex-shrink-0" />
+      <div class="w-11 flex-shrink-0" />
       <div
         ref="overviewTrackRef"
-        class="relative flex-1 min-w-0 h-[26px] flex items-end gap-[1px] select-none touch-none"
+        class="relative flex-1 min-w-0 h-6.5 flex items-end gap-px select-none touch-none"
         :class="dragging ? 'cursor-grabbing' : 'cursor-grab'"
         @pointerdown="onTrackPointerDown"
         data-test="session-ribbon-overview"
@@ -134,7 +134,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <div
           v-for="bar in bars"
           :key="bar.index"
-          class="flex-1 min-w-0 rounded-t-[1px] transition-opacity"
+          class="flex-1 min-w-0 rounded-t-default transition-opacity"
           :style="{
             height: Math.max(2, bar.pct) + '%',
             background: bar.color,
@@ -143,24 +143,24 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         />
         <!-- selected window: drag the body to pan, or either edge to resize -->
         <div
-          class="absolute top-0 bottom-0 rounded-[2px] border border-[color-mix(in_srgb,var(--color-text-heading)_45%,transparent)] bg-[color-mix(in_srgb,var(--color-text-heading)_8%,transparent)]"
+          class="absolute top-0 bottom-0 rounded-default border border-[color-mix(in_srgb,var(--color-text-heading)_45%,transparent)] bg-[color-mix(in_srgb,var(--color-text-heading)_8%,transparent)]"
           :class="dragging ? 'cursor-grabbing' : 'cursor-grab'"
           :style="{ left: brushLeftPct + '%', width: brushWidthPct + '%' }"
           @pointerdown.stop="(e) => beginDrag('pan', e)"
         >
           <!-- left resize handle (overhangs the edge so it's easy to grab) -->
           <div
-            class="absolute top-0 bottom-0 -left-[4px] w-[9px] cursor-ew-resize flex items-center justify-center"
+            class="absolute top-0 bottom-0 -left-1 w-2.25 cursor-ew-resize flex items-center justify-center"
             @pointerdown.stop="(e) => beginDrag('resize-left', e)"
           >
-            <div class="w-[2px] h-[55%] rounded bg-[color-mix(in_srgb,var(--color-text-heading)_60%,transparent)]" />
+            <div class="w-0.5 h-[55%] rounded-default bg-[color-mix(in_srgb,var(--color-text-heading)_60%,transparent)]" />
           </div>
           <!-- right resize handle -->
           <div
-            class="absolute top-0 bottom-0 -right-[4px] w-[9px] cursor-ew-resize flex items-center justify-center"
+            class="absolute top-0 bottom-0 -right-1 w-2.25 cursor-ew-resize flex items-center justify-center"
             @pointerdown.stop="(e) => beginDrag('resize-right', e)"
           >
-            <div class="w-[2px] h-[55%] rounded bg-[color-mix(in_srgb,var(--color-text-heading)_60%,transparent)]" />
+            <div class="w-0.5 h-[55%] rounded-default bg-[color-mix(in_srgb,var(--color-text-heading)_60%,transparent)]" />
           </div>
         </div>
       </div>
diff --git a/web/src/plugins/traces/SessionsList.spec.ts b/web/src/plugins/traces/SessionsList.spec.ts
index 87ea342520..f7503921db 100644
--- a/web/src/plugins/traces/SessionsList.spec.ts
+++ b/web/src/plugins/traces/SessionsList.spec.ts
@@ -264,14 +264,7 @@ async function mountComponent(props = defaultProps) {
   const wrapper = mount(SessionsList, {
     props,
     global: {
-      stubs: {
-        QSelect: { template: '<div class="q-select-stub"><slot /></div>' },
-        QPagination: { template: '<div class="q-pagination-stub" />' },
-        QIcon: { template: '<span class="q-icon-stub"><slot /></span>' },
-        QTooltip: { template: '<div class="q-tooltip-stub"><slot /></div>' },
-        QSpinnerHourglass: { template: '<div class="q-spinner-stub" />' },
-        QSkeleton: { template: '<div class="q-skeleton-stub" />' },
-      },
+      stubs: {},
     },
   });
   await flushPromises();
diff --git a/web/src/plugins/traces/SessionsList.vue b/web/src/plugins/traces/SessionsList.vue
index 12a5fbd759..ac16cb2790 100644
--- a/web/src/plugins/traces/SessionsList.vue
+++ b/web/src/plugins/traces/SessionsList.vue
@@ -16,7 +16,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <div
-    class="sessions-list h-full! flex flex-col bg-[var(--color-surface-base)] card-container"
+    class="sessions-list h-full! flex flex-col bg-card-glass-bg"
   >
     <!-- No LLM streams exist in the org at all — nothing to select, so show
          the rich first-run empty state on its own (no table chrome). -->
@@ -74,16 +74,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <div
               v-if="filterMode === 'stream'"
               data-test="sessions-list-stream-selector"
-              class="w-[14rem] flex-shrink-0"
+              class="w-56 flex-shrink-0"
             >
               <!-- Hold a picker-shaped skeleton until the stream list lands, so
                    the selector doesn't flash an empty dropdown then populate. -->
-              <SkeletonBox
-                v-if="!streamsLoaded"
-                width="100%"
-                height="2.125rem"
-                rounded
-              />
+              <OSkeleton type="text" v-if="!streamsLoaded" class="w-full h-8.5" />
               <OSelect
                 v-else
                 v-model="activeStream"
@@ -92,24 +87,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :options="availableStreams.map((s) => ({ label: s, value: s }))"
                 labelKey="label"
                 valueKey="value"
-                class="w-full rounded"
+                class="w-full rounded-default"
                 @update:model-value="onStreamChange"
               />
             </div>
             <div
               v-else
               data-test="sessions-list-agent-selector"
-              class="w-[14rem] flex-shrink-0"
+              class="w-56 flex-shrink-0"
             >
               <!-- Same treatment for agents: toggling to Agent mode kicks off the
                    listAgents fetch, so show the skeleton until it resolves
                    instead of an empty agent picker. -->
-              <SkeletonBox
-                v-if="!agentsLoaded"
-                width="100%"
-                height="2.125rem"
-                rounded
-              />
+              <OSkeleton type="text" v-if="!agentsLoaded" class="w-full h-8.5" />
               <OSelect
                 v-else
                 v-model="activeAgent"
@@ -118,7 +108,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :options="agentSelectOptions"
                 labelKey="label"
                 valueKey="value"
-                class="w-full rounded"
+                class="w-full rounded-default"
                 @update:model-value="onAgentChange"
               />
             </div>
@@ -174,14 +164,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </template>
         <!-- Timestamp -->
         <template #cell-firstSeenNanos="{ row }">
-          <span class="text-[0.75rem] tabular-nums">
+          <span class="text-xs tabular-nums">
             {{ formatTimestamp(row.firstSeenNanos) }}
           </span>
         </template>
 
         <!-- Session ID -->
         <template #cell-sessionId="{ row }">
-          <div class="text-[0.75rem] truncate w-full">
+          <div class="text-xs truncate w-full">
             {{ row.sessionId }}
             <OTooltip :content="row.sessionId" />
           </div>
@@ -199,22 +189,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <template #cell-firstUserMessage="{ row }">
           <div
             v-if="row.firstUserMessage"
-            class="text-[0.75rem] text-[var(--color-text-secondary)] truncate w-full"
+            class="text-xs text-text-secondary truncate w-full"
           >
             {{ row.firstUserMessage }}
             <OTooltip :content="row.firstUserMessage" />
           </div>
-          <span v-else class="text-[0.75rem] text-[var(--color-text-muted)]">—</span>
+          <span v-else class="text-xs text-text-muted">—</span>
         </template>
 
         <!-- Turns -->
         <template #cell-turns="{ row }">
-          <span class="text-[0.75rem]">{{ row.turns }}</span>
+          <span class="text-xs">{{ row.turns }}</span>
         </template>
 
         <!-- Duration -->
         <template #cell-durationNanos="{ row }">
-          <span class="text-[0.75rem]">
+          <span class="text-xs">
             {{ formatDuration(row.durationNanos) }}
             <OTooltip :content="`${row.durationNanos.toLocaleString()} ${t('traces.sessionsList.durationNs')}`" />
           </span>
@@ -222,7 +212,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
         <!-- Tokens -->
         <template #cell-tokens="{ row }">
-          <span class="text-[0.75rem] tabular-nums">
+          <span class="text-xs tabular-nums">
             {{ formatTokens(row.inputTokens) }} → {{ formatTokens(row.outputTokens) }} = {{ formatTokens(row.tokens) }}
             <OTooltip :content="t('traces.sessionsList.tokenTooltip', { input: row.inputTokens.toLocaleString(), output: row.outputTokens.toLocaleString(), total: row.tokens.toLocaleString() })" />
           </span>
@@ -230,7 +220,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
         <!-- Cost -->
         <template #cell-cost="{ row }">
-          <span class="text-[0.75rem]">${{ row.cost.toFixed(4) }}</span>
+          <span class="text-xs">${{ row.cost.toFixed(4) }}</span>
         </template>
 
         <!-- Status (derived from error_count) -->
@@ -262,7 +252,7 @@ import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
 import OButton from "@/lib/core/Button/OButton.vue";
 import { useShortcuts } from "@/lib/vue-shortcut-manager";
 import { isInputFocused } from "@/utils/keyboardShortcuts";
-import SkeletonBox from "@/components/shared/SkeletonBox.vue";
+import OSkeleton from "@/lib/feedback/Skeleton/OSkeleton.vue";
 import OToggleGroup from "@/lib/core/ToggleGroup/OToggleGroup.vue";
 import OToggleGroupItem from "@/lib/core/ToggleGroup/OToggleGroupItem.vue";
 import genAiAgentMappingService, {
diff --git a/web/src/plugins/traces/SpanBlock.spec.ts b/web/src/plugins/traces/SpanBlock.spec.ts
index 4dbf255fff..cf2439883c 100644
--- a/web/src/plugins/traces/SpanBlock.spec.ts
+++ b/web/src/plugins/traces/SpanBlock.spec.ts
@@ -166,7 +166,6 @@ describe("SpanBlock", () => {
           store: mockStore,
         },
         stubs: {
-          "q-resize-observer": true,
         },
       },
     });
@@ -274,7 +273,6 @@ describe("SpanBlock", () => {
             store: mockStore,
           },
           stubs: {
-            "q-resize-observer": true,
           },
         },
       });
@@ -578,7 +576,7 @@ describe("SpanBlock", () => {
         global: {
           plugins: [i18n, router],
           provide: { store: mockStore },
-          stubs: { "q-resize-observer": true },
+          stubs: {},
         },
       });
 
diff --git a/web/src/plugins/traces/SpanBlock.vue b/web/src/plugins/traces/SpanBlock.vue
index a89cb3dabc..85bbd5bc2d 100644
--- a/web/src/plugins/traces/SpanBlock.vue
+++ b/web/src/plugins/traces/SpanBlock.vue
@@ -16,11 +16,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <div
-    class="flex wrap justify-start items-center"
-    :class="[
-      defocusSpan ? 'opacity-30' : '',
-      store.state.theme === 'dark' ? 'bg-[var(--o2-bg-card-dark,#1a1a1a)]' : 'bg-white',
-    ]"
+    class="flex wrap justify-start items-center bg-surface-base"
+    :class="defocusSpan ? 'opacity-30' : ''"
     :style="{
       zIndex: 2,
     }"
@@ -28,12 +25,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     data-test="span-block-container"
   >
     <div
-      class="flex justify-between items-end cursor-pointer span-block relative-position"
-      :class="[store.state.theme === 'dark' ? 'bg-[var(--o2-bg-card-dark,#1a1a1a)]' : 'bg-white']"
+      class="flex justify-between items-end cursor-pointer span-block relative-position bg-surface-base w-full pb-1.5"
       :style="{
         height: spanDimensions.height + 'px',
-        width: '100%',
-        paddingBottom: '6px',
       }"
       ref="spanBlock"
       @click="selectSpan(span.spanId)"
@@ -41,11 +35,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       data-test="span-block"
     >
       <div
-        :style="{
-          width: '100%',
-          overflow: 'hidden',
-        }"
-        class="cursor-pointer flex items-center flex-nowrap position-relative"
+        class="cursor-pointer flex items-center flex-nowrap position-relative w-full overflow-hidden"
         :class="defocusSpan ? 'opacity-30' : ''"
         @click="selectSpan(span.spanId)"
         data-test="span-block-select-trigger"
@@ -55,29 +45,24 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             height: spanDimensions.barHeight + 'px',
             width: spanWidth + '%',
             left: leftPosition + '%',
-            position: 'relative',
           }"
-          class="flex justify-start items-center flex-nowrap"
+          class="flex justify-start items-center flex-nowrap relative"
           ref="spanMarkerRef"
           data-test="span-marker"
         >
           <div
+            class="w-[calc(100%-0.375rem)] h-full rounded-default"
             :style="{
-              width: 'calc(100% - 6px)',
-              height: '100%',
-              borderRadius: '2px',
-              backgroundColor: span.style?.color || '#58508d',
+              backgroundColor: span.style?.color || DEFAULT_SPAN_COLOR,
             }"
           />
         </div>
         <div
           :style="{
-            position: 'absolute',
             ...durationStyle,
-            transition: 'all 0.5s ease',
             zIndex: 1,
           }"
-          class="text-xs flex items-center"
+          class="text-xs flex items-center absolute transition-all duration-500 ease-[ease]"
           data-test="span-block-duration"
         >
           <div>
@@ -106,6 +91,12 @@ import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
 import { b64EncodeStandard } from "@/utils/zincutils";
 
+// TODO(design-tokens): fallback bar colour for a span the trace colour allocator
+// never assigned. No semantic token fits — it is a categorical "unassigned span"
+// slate-purple, not a status/surface/accent role. Needs e.g.
+// --color-trace-span-unassigned; this const is then the only site to change.
+const DEFAULT_SPAN_COLOR = "#58508d";
+
 export default defineComponent({
   name: "SpanBlock",
   props: {
@@ -300,6 +291,7 @@ export default defineComponent({
       onSpanHover,
       durationStyle,
       searchObj,
+      DEFAULT_SPAN_COLOR,
     };
   },
 });
diff --git a/web/src/plugins/traces/SpanRenderer.spec.ts b/web/src/plugins/traces/SpanRenderer.spec.ts
deleted file mode 100644
index e5cc082fdf..0000000000
--- a/web/src/plugins/traces/SpanRenderer.spec.ts
+++ /dev/null
@@ -1,292 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import {
-  describe,
-  expect,
-  it,
-  beforeEach,
-  afterEach,
-  vi,
-} from "vitest";
-import { mount, flushPromises } from "@vue/test-utils";
-import SpanRenderer from "@/plugins/traces/SpanRenderer.vue";
-import i18n from "@/locales";
-import router from "@/test/unit/helpers/router";
-import { createStore } from "vuex";
-
-
-const mockStore = createStore({
-  state: {
-    theme: "light",
-    API_ENDPOINT: "http://localhost:8080",
-  },
-});
-
-const mockSpans = [
-  {
-    spanId: "span-1",
-    operationName: "test-operation-1",
-    serviceName: "test-service-1",
-    startTimeMs: 1000,
-    endTimeMs: 1100,
-    durationMs: 100,
-    depth: 0,
-    style: {
-      color: "#1ab8be",
-      backgroundColor: "#1ab8be33",
-      top: "0px",
-      left: "0px",
-    },
-  },
-  {
-    spanId: "span-2",
-    operationName: "test-operation-2",
-    serviceName: "test-service-2",
-    startTimeMs: 1050,
-    endTimeMs: 1080,
-    durationMs: 30,
-    depth: 1,
-    style: {
-      color: "#ff6b6b",
-      backgroundColor: "#ff6b6b33",
-      top: "30px",
-      left: "50px",
-    },
-  },
-];
-
-const mockBaseTracePosition = {
-  durationMs: 200,
-  startTimeMs: 1000,
-  tics: [
-    { value: 0, label: "0.00us", left: "-1px" },
-    { value: 50, label: "50.00ms", left: "25%" },
-    { value: 100, label: "100.00ms", left: "50%" },
-    { value: 150, label: "150.00ms", left: "75%" },
-    { value: 200, label: "200.00ms", left: "100%" },
-  ],
-};
-
-const mockCollapseMapping = {
-  "span-1": false,
-  "span-2": true,
-};
-
-const mockSpanDimensions = {
-  height: 30,
-  barHeight: 8,
-  textHeight: 25,
-  gap: 15,
-  collapseHeight: "14",
-  collapseWidth: 14,
-  connectorPadding: 2,
-  paddingLeft: 8,
-  hConnectorWidth: 20,
-  dotConnectorWidth: 6,
-  dotConnectorHeight: 6,
-  colors: ["#b7885e", "#1ab8be", "#ffcb99", "#f89570", "#839ae2"],
-};
-
-describe("SpanRenderer", () => {
-  let wrapper: any;
-
-  beforeEach(() => {
-    wrapper = mount(SpanRenderer, {
-      props: {
-        spans: mockSpans,
-        isCollapsed: false,
-        collapseMapping: mockCollapseMapping,
-        baseTracePosition: mockBaseTracePosition,
-        depth: 0,
-        spanDimensions: mockSpanDimensions,
-      },
-      global: {
-        plugins: [i18n, router],
-        provide: {
-          store: mockStore,
-        },
-        stubs: {
-          "q-resize-observer": true,
-        },
-      },
-    });
-  });
-
-  afterEach(() => {
-    wrapper.unmount();
-  });
-
-  it("should mount SpanRenderer component", () => {
-    expect(wrapper.exists()).toBe(true);
-  });
-
-  it("should render container with correct styling", () => {
-    const container = wrapper.find(".relative-position");
-    expect(container.exists()).toBe(true);
-    expect(container.attributes("style")).toContain("height: 100%");
-  });
-
-  it("should not render spans when spans array is empty", async () => {
-    const emptyWrapper = mount(SpanRenderer, {
-      props: {
-        spans: [],
-        isCollapsed: false,
-        collapseMapping: {},
-        baseTracePosition: mockBaseTracePosition,
-        depth: 0,
-        spanDimensions: mockSpanDimensions,
-      },
-      global: {
-        plugins: [i18n, router],
-        provide: {
-          store: mockStore,
-        },
-        stubs: {
-          "q-resize-observer": true,
-        },
-      },
-    });
-
-    const spanRenderer = emptyWrapper.find("[data-test='span-renderer']");
-    expect(spanRenderer.exists()).toBe(true);
-    emptyWrapper.unmount();
-  });
-
-  it("should not render spans when spans is null", async () => {
-    const nullWrapper = mount(SpanRenderer, {
-      props: {
-        spans: null,
-        isCollapsed: false,
-        collapseMapping: {},
-        baseTracePosition: mockBaseTracePosition,
-        depth: 0,
-        spanDimensions: mockSpanDimensions,
-      },
-      global: {
-        plugins: [i18n, router],
-        provide: {
-          store: mockStore,
-        },
-        stubs: {
-          "q-resize-observer": true,
-        },
-      },
-    });
-
-    const spanRenderer = nullWrapper.find("[data-test='span-renderer']");
-    expect(spanRenderer.exists()).toBe(true);
-    nullWrapper.unmount();
-  });
-
-  it("should have correct props with default values", () => {
-    const defaultWrapper = mount(SpanRenderer, {
-      global: {
-        plugins: [i18n, router],
-        provide: {
-          store: mockStore,
-        },
-        stubs: {
-          "q-resize-observer": true,
-        },
-      },
-    });
-
-    expect(defaultWrapper.props("spans")).toEqual([]);
-    expect(defaultWrapper.props("isCollapsed")).toBe(false);
-    expect(defaultWrapper.props("collapseMapping")).toEqual({});
-    expect(defaultWrapper.props("baseTracePosition")).toBeNull();
-    expect(defaultWrapper.props("depth")).toBe(0);
-    expect(defaultWrapper.props("spanDimensions")).toEqual({});
-
-    defaultWrapper.unmount();
-  });
-
-  it("should have toggleSpanCollapse method", () => {
-    expect(typeof wrapper.vm.toggleSpanCollapse).toBe("function");
-  });
-
-  it("should emit toggleCollapse event when toggleSpanCollapse is called", async () => {
-    const spanId = "test-span-id";
-    await wrapper.vm.toggleSpanCollapse(spanId);
-
-    expect(wrapper.emitted("toggleCollapse")).toBeTruthy();
-    expect(wrapper.emitted("toggleCollapse")[0]).toEqual([spanId]);
-  });
-
-  it("should include SpanBlock component", () => {
-    expect(wrapper.vm.$options.components).toHaveProperty("SpanBlock");
-  });
-
-  describe("with different collapse states", () => {
-    it("should handle collapsed state", async () => {
-      const collapsedWrapper = mount(SpanRenderer, {
-        props: {
-          spans: mockSpans,
-          isCollapsed: true,
-          collapseMapping: mockCollapseMapping,
-          baseTracePosition: mockBaseTracePosition,
-          depth: 0,
-          spanDimensions: mockSpanDimensions,
-        },
-        global: {
-          plugins: [i18n, router],
-          provide: {
-            store: mockStore,
-          },
-          stubs: {
-            "q-resize-observer": true,
-          },
-        },
-      });
-
-      expect(collapsedWrapper.props("isCollapsed")).toBe(true);
-      collapsedWrapper.unmount();
-    });
-
-    it("should handle different depth values", async () => {
-      const depthWrapper = mount(SpanRenderer, {
-        props: {
-          spans: mockSpans,
-          isCollapsed: false,
-          collapseMapping: mockCollapseMapping,
-          baseTracePosition: mockBaseTracePosition,
-          depth: 5,
-          spanDimensions: mockSpanDimensions,
-        },
-        global: {
-          plugins: [i18n, router],
-          provide: {
-            store: mockStore,
-          },
-          stubs: {
-            "q-resize-observer": true,
-          },
-        },
-      });
-
-      expect(depthWrapper.props("depth")).toBe(5);
-      depthWrapper.unmount();
-    });
-  });
-
-  describe("component structure", () => {
-    it("should have correct template structure", () => {
-      const spanRenderer = wrapper.find("[data-test='span-renderer']");
-      expect(spanRenderer.exists()).toBe(true);
-      expect(spanRenderer.classes()).toContain("pt-2");
-    });
-  });
-});
diff --git a/web/src/plugins/traces/SpanRenderer.vue b/web/src/plugins/traces/SpanRenderer.vue
deleted file mode 100644
index 730dd55233..0000000000
--- a/web/src/plugins/traces/SpanRenderer.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <div
-    data-test="span-renderer"
-    class="relative-position pt-2"
-    :style="{ height: '100%' }"
-  >
-    <template v-if="spans?.length">
-      <template v-for="span in spans as any[]" :key="span.spanId"> </template>
-    </template>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-import SpanBlock from "./SpanBlock.vue";
-
-export default defineComponent({
-  name: "SpanRenderer",
-  props: {
-    spans: {
-      type: Array,
-      default: () => [],
-    },
-    isCollapsed: {
-      type: Boolean,
-      default: false,
-    },
-    collapseMapping: {
-      type: Object,
-      default: () => ({}),
-    },
-    baseTracePosition: {
-      type: Object,
-      default: () => null,
-    },
-    depth: {
-      type: Number,
-      default: 0,
-    },
-    spanDimensions: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  emits: ["toggleCollapse"],
-  setup(props, { emit }) {
-    function toggleSpanCollapse(spanId: number | string) {
-      emit("toggleCollapse", spanId);
-    }
-
-    return {
-      toggleSpanCollapse,
-    };
-  },
-  components: { SpanBlock },
-});
-</script>
diff --git a/web/src/plugins/traces/SyntaxGuide.spec.ts b/web/src/plugins/traces/SyntaxGuide.spec.ts
index c99e243b30..1d3adee4d1 100644
--- a/web/src/plugins/traces/SyntaxGuide.spec.ts
+++ b/web/src/plugins/traces/SyntaxGuide.spec.ts
@@ -1,4 +1,4 @@
-// Copyright 2026 OpenObserve Inc.
+// Copyright 2026 OpenObserve Inc.
 //
 // This program is free software: you can redistribute it and/or modify
 // it under the terms of the GNU Affero General Public License as published by
@@ -111,7 +111,11 @@ describe("SyntaxGuide", () => {
       const menu = document.querySelector('[data-test="syntax-guide-menu"]');
       expect(menu).toBeTruthy();
 
-      const title = document.querySelector(".syntax-guide-title .label");
+      // The .syntax-guide-title hook was removed when the rule moved to template
+
+      // utilities; the title still renders as .label inside the menu panel.
+
+      const title = document.querySelector('[data-test="syntax-guide-menu"] .label');
       expect(title?.textContent).toBe("Syntax Guide");
     });
 
@@ -120,10 +124,12 @@ describe("SyntaxGuide", () => {
       await button.trigger("click");
       await flushPromises();
 
-      const guideList = document.querySelector(".guide-list");
+      // .guide-list hook removed with its rule; the list is the panel's own <ul>.
+
+      const guideList = document.querySelector('[data-test="syntax-guide-menu"] ul');
       expect(guideList).toBeTruthy();
 
-      const listItems = document.querySelectorAll(".guide-list li");
+      const listItems = document.querySelectorAll('[data-test="syntax-guide-menu"] ul li');
       expect(listItems.length).toBeGreaterThan(0);
 
       // Check for specific normal mode content
@@ -159,7 +165,11 @@ describe("SyntaxGuide", () => {
       await button.trigger("click");
       await flushPromises();
 
-      const title = document.querySelector(".syntax-guide-title .label");
+      // The .syntax-guide-title hook was removed when the rule moved to template
+
+      // utilities; the title still renders as .label inside the menu panel.
+
+      const title = document.querySelector('[data-test="syntax-guide-menu"] .label');
       expect(title?.textContent).toBe("Syntax Guide: SQL Mode");
     });
 
@@ -168,10 +178,12 @@ describe("SyntaxGuide", () => {
       await button.trigger("click");
       await flushPromises();
 
-      const guideList = document.querySelector(".guide-list");
+      // .guide-list hook removed with its rule; the list is the panel's own <ul>.
+
+      const guideList = document.querySelector('[data-test="syntax-guide-menu"] ul');
       expect(guideList).toBeTruthy();
 
-      const listItems = document.querySelectorAll(".guide-list li");
+      const listItems = document.querySelectorAll('[data-test="syntax-guide-menu"] ul li');
       expect(listItems.length).toBeGreaterThan(0);
 
       // Check for specific SQL mode content
@@ -274,6 +286,10 @@ describe("SyntaxGuide", () => {
 
   // ─── New tests covering functionality added after Dec 29 2025 ───────────────
 
+  // Theming contract: `.dark` on <html> + --color-* tokens that flip
+  // automatically. The menu no longer carries a per-theme root class; it is
+  // styled solely by `.syntax-guide-menu` + tokens. These tests assert what the
+  // menu renders now AND guard that the legacy mechanism has not come back.
   describe("Menu theme class", () => {
     afterEach(() => {
       store.state.theme = "dark"; // restore shared store default
@@ -285,38 +301,60 @@ describe("SyntaxGuide", () => {
         .forEach((m) => m.remove());
     });
 
-    it("should apply theme-light class to menu when store theme is light", async () => {
+    it("should style the menu with tokens, not a theme-light class, when store theme is light", async () => {
       store.state.theme = "light";
       const button = wrapper.find('[data-cy="syntax-guide-button"]');
       await button.trigger("click");
       await flushPromises();
 
       const menu = document.querySelector('[data-test="syntax-guide-menu"]');
-      expect(menu?.classList.contains("theme-light")).toBe(true);
+      expect(menu).not.toBeNull();
+      expect(menu?.classList.contains("syntax-guide-menu")).toBe(true);
+      expect(menu?.classList.contains("theme-light")).toBe(false);
+      expect(menu?.classList.contains("light-mode")).toBe(false);
     });
 
-    it("should apply theme-dark class to menu when store theme is dark", async () => {
-      const { createStore } = await import("vuex");
-      const darkStore = createStore({ state: { theme: "dark" } });
-
-      const darkWrapper = mount(SyntaxGuide, {
-        attachTo: "#app",
-        props: { sqlmode: false },
-        global: {
-          provide: { store: darkStore },
-          plugins: [i18n],
-        },
-      });
-
-      await flushPromises();
-      const button = darkWrapper.find('[data-cy="syntax-guide-button"]');
+    it("should style the menu with tokens, not a theme-dark class, when store theme is dark", async () => {
+      store.state.theme = "dark";
+      const button = wrapper.find('[data-cy="syntax-guide-button"]');
       await button.trigger("click");
       await flushPromises();
 
       const menu = document.querySelector('[data-test="syntax-guide-menu"]');
-      expect(menu?.classList.contains("theme-dark")).toBe(true);
+      expect(menu).not.toBeNull();
+      expect(menu?.classList.contains("syntax-guide-menu")).toBe(true);
+      expect(menu?.classList.contains("theme-dark")).toBe(false);
+      expect(menu?.classList.contains("dark-mode")).toBe(false);
+    });
 
-      darkWrapper.unmount();
+    it("should render the same menu classes regardless of store theme", async () => {
+      // Theme is not a render input for the menu: its class list must be
+      // identical across themes, since the visual difference comes from
+      // --color-* token values resolved in CSS.
+      const classesForTheme = async (theme: string) => {
+        store.state.theme = theme;
+        const w = mount(SyntaxGuide, {
+          attachTo: "#app",
+          props: { sqlmode: false },
+          global: { provide: { store }, plugins: [i18n] },
+        });
+        await flushPromises();
+        await w.find('[data-cy="syntax-guide-button"]').trigger("click");
+        await flushPromises();
+        const menu = document.querySelector('[data-test="syntax-guide-menu"]');
+        const classes = [...(menu?.classList ?? [])].sort().join(" ");
+        w.unmount();
+        document
+          .querySelectorAll('[data-test="syntax-guide-menu"]')
+          .forEach((m) => m.remove());
+        return classes;
+      };
+
+      const light = await classesForTheme("light");
+      const dark = await classesForTheme("dark");
+
+      expect(light).toContain("syntax-guide-menu");
+      expect(dark).toBe(light);
     });
   });
 
diff --git a/web/src/plugins/traces/SyntaxGuide.vue b/web/src/plugins/traces/SyntaxGuide.vue
index 32fdcec7e1..a985e3da94 100644
--- a/web/src/plugins/traces/SyntaxGuide.vue
+++ b/web/src/plugins/traces/SyntaxGuide.vue
@@ -23,10 +23,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         data-cy="syntax-guide-button"
         variant="ghost"
         size="sm"
-        class="w-full! justify-start! px-3! py-1.5! h-auto! rounded-md! gap-2! font-normal!"
+        class="w-full! justify-start! px-3! py-1.5! h-auto! rounded-default! gap-2! font-normal!"
       >
         <template #icon-left>
-          <span class="inline-flex items-center justify-center w-7 h-7 rounded-md bg-[var(--o2-section-header-bg)] text-[var(--o2-text-secondary)] shrink-0">
+          <span class="inline-flex items-center justify-center w-7 h-7 rounded-default bg-section-header-bg text-text-secondary shrink-0">
             <OIcon name="help" size="sm" />
           </span>
         </template>
@@ -48,50 +48,49 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <div
       data-test="syntax-guide-menu"
       class="syntax-guide-menu"
-      :class="store.state.theme == 'dark' ? 'theme-dark' : 'theme-light'"
     >
       <div v-if="!sqlmode">
-        <div class="syntax-guide-title">
-          <div class="label">{{ t("search.syntaxGuideLabel") }}</div>
+        <div class="w-105">
+          <div class="label text-sm font-bold">{{ t("search.syntaxGuideLabel") }}</div>
         </div>
         <div class="border-t my-1 border-dropdown-separator" />
         <div class="answers">
-          <div class="syntax-section">
-            <div class="syntax-guide-text">
-              <ul class="guide-list">
+          <div class="mb-1.25">
+            <div class="text-xs ml-1.25">
+              <ul class="px-2.5 mt-2.5 mb-0 text-sm leading-[1.4375rem]">
                 <li>
-                  {{ t('traces.syntaxGuide.fullTextSearch') }}
-                  <span class="bg-highlight"
+                  For full text search of value 'error' use
+                  <span class="bg-highlight-bg px-1.25"
                     >match_all('error') in query editor</span
                   >
                 </li>
                 <li>
-                  {{ t('traces.syntaxGuide.columnSearch') }}
-                  <span class="bg-highlight"
+                  For column search of value 'error' use
+                  <span class="bg-highlight-bg px-1.25"
                     >str_match(<b>fieldname</b>, 'error')</span
                   >
                 </li>
                 <li>
-                  {{ t('traces.syntaxGuide.caseInsensitiveSearch') }}
-                  <span class="bg-highlight"
+                  For case-insensitive column search of value 'error' use
+                  <span class="bg-highlight-bg px-1.25"
                     >str_match_ignore_case(<b>fieldname</b>, 'Error')</span
                   >
                 </li>
                 <li>
-                  {{ t('traces.syntaxGuide.searchCode') }}
-                  <span class="bg-highlight">code=200</span>
+                  To search value 200 for code column use
+                  <span class="bg-highlight-bg px-1.25">code=200</span>
                 </li>
                 <li>
-                  {{ t('traces.syntaxGuide.searchStream') }}
-                  <span class="bg-highlight">stream='stderr'</span>
+                  To search value 'stderr' for stream column use
+                  <span class="bg-highlight-bg px-1.25">stream='stderr'</span>
                 </li>
                 <li>
-                  {{ t('traces.syntaxGuide.additionalExamples') }}
+                  For additional examples,
                   <a
                     href="https://openobserve.ai/docs/example-queries/"
                     target="_blank"
                     class="hover:underline text-primary"
-                    >{{ t('traces.syntaxGuide.clickHere') }}</a
+                    >click here</a
                   >.
                 </li>
               </ul>
@@ -100,53 +99,54 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
       </div>
       <div v-else>
-        <div class="syntax-guide-title">
-          <div class="label">{{ t('traces.syntaxGuide.sqlModeTitle') }}</div>
+        <div class="w-105">
+          <div class="label text-sm font-bold">Syntax Guide: SQL Mode</div>
         </div>
         <div class="border-t my-1 border-dropdown-separator" />
         <div class="answers">
-          <div class="syntax-section">
-            <div class="syntax-guide-text">
-              <ul class="guide-list">
+          <div class="mb-1.25">
+            <div class="text-xs ml-1.25">
+              <ul class="px-2.5 mt-2.5 mb-0 text-sm leading-[1.4375rem]">
                 <li>
-                  {{ t('traces.syntaxGuide.fullTextSearch') }}
-                  <span class="bg-highlight"
+                  For full text search of value 'error' use
+                  <span class="bg-highlight-bg px-1.25"
                     >SELECT * FROM <b>stream</b> WHERE match_all('error')</span
                   >
                 </li>
                 <li>
-                  {{ t('traces.syntaxGuide.columnSearch') }}
-                  <span class="bg-highlight"
+                  For column search of value 'error' use
+                  <span class="bg-highlight-bg px-1.25"
                     >SELECT * FROM <b>stream</b> WHERE
                     str_match(<b>fieldname</b>, 'error')</span
                   >
                 </li>
                 <li>
-                  {{ t('traces.syntaxGuide.searchCode') }}
-                  <span class="bg-highlight"
+                  To search value 200 for code column use
+                  <span class="bg-highlight-bg px-1.25"
                     >SELECT * FROM <b>stream</b> WHERE code=200</span
                   >
                 </li>
                 <li>
-                  {{ t('traces.syntaxGuide.searchStream') }}
-                  <span class="bg-highlight"
+                  To search value 'stderr' for stream column use
+                  <span class="bg-highlight-bg px-1.25"
                     >SELECT * FROM <b>stream</b> WHERE stream='stderr'</span
                   >
                 </li>
                 <li>
-                  {{ t('traces.syntaxGuide.queryFunctionPrefix') }} <i>extract_ip</i> {{ t('traces.syntaxGuide.queryFunctionSuffix') }}
-                  <span class="bg-highlight"
+                  To search and use query function <i>extract_ip</i> on column
+                  log use
+                  <span class="bg-highlight-bg px-1.25"
                     >SELECT extract_ip(log) FROM <b>stream</b> WHERE
                     code=200</span
                   >
                 </li>
                 <li>
-                  {{ t('traces.syntaxGuide.additionalExamples') }}
+                  For additional examples,
                   <a
                     href="https://openobserve.ai/docs/example-queries/"
                     target="_blank"
                     class="hover:underline text-primary"
-                    >{{ t('traces.syntaxGuide.clickHere') }}</a
+                    >click here</a
                   >.
                 </li>
               </ul>
diff --git a/web/src/plugins/traces/ThreadToolCalls.vue b/web/src/plugins/traces/ThreadToolCalls.vue
index 636b91bf11..c083d87e6f 100644
--- a/web/src/plugins/traces/ThreadToolCalls.vue
+++ b/web/src/plugins/traces/ThreadToolCalls.vue
@@ -29,7 +29,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <div
     v-if="toolCalls.length > 0"
     class="thread-tools-thread"
-    :class="{ 'thread-tools-thread--dark': isDark }"
   >
     <!-- One-way reveal: clicking shows the calls and removes the pill. -->
     <button v-if="!shown" class="tt-toggle" @click="shown = true">
@@ -95,7 +94,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <div class="thread-tool-body__section">
             <div class="thread-tool-body__label">
               {{ t('traces.threadToolCalls.result') }}
-              <span v-if="tool.span_status === 'ERROR'" class="text-[color:var(--color-error-600)]">
+              <span v-if="tool.span_status === 'ERROR'" class="text-error-600">
                 · ERROR
               </span>
             </div>
@@ -112,7 +111,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import { ref } from "vue";
 import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
@@ -126,7 +125,6 @@ const emit = defineEmits<{ (e: "span-selected", spanId: string): void }>();
 
 const store = useStore();
 const { t } = useI18n();
-const isDark = computed(() => store.state.theme === "dark");
 
 // One-way reveal for the whole group; per-tool rows expand independently.
 const shown = ref(false);
@@ -179,6 +177,9 @@ function formatDuration(ns: number): string {
 </script>
 
 <style scoped lang="scss">
+/* keep(complex-state): the tiled SVG zigzag artwork (masked so it takes a theme
+   token) plus the nested per-tool open/hover state cascade the utility layer
+   cannot express. */
 /* Tool thread — collapsed "Show calls" pill (redesign mockup .tools-thread). */
 .thread-tools-thread {
   margin: 0.5rem 0;
@@ -193,12 +194,18 @@ function formatDuration(ns: number): string {
     cursor: pointer;
   }
 
+  /* Zigzag rule: the SVG is a MASK (stroke=black → alpha 1), so the visible
+     colour comes from background-color and follows the theme token. A colour
+     baked into the data-URI could not. */
   .tt-zz {
     flex: 1;
     min-width: 1rem;
     height: 0.75rem;
-    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12'%3E%3Cpath d='M0 9L4 3L8 9' fill='none' stroke='%23d6dde7' stroke-width='1.4'/%3E%3C/svg%3E")
+    background-color: var(--color-border-strong);
+    --tt-zz-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12'%3E%3Cpath d='M0 9L4 3L8 9' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E")
       repeat-x center;
+    -webkit-mask: var(--tt-zz-mask);
+    mask: var(--tt-zz-mask);
     opacity: 0.7;
   }
 
@@ -208,29 +215,29 @@ function formatDuration(ns: number): string {
     display: inline-flex;
     flex-direction: column;
     align-items: center;
-    gap: 2px;
+    gap: 0.125rem;
     padding: 0.5rem 1.125rem;
     border: 1px solid var(--color-border-default);
     border-radius: 0.625rem;
     background: var(--color-surface-base);
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+    box-shadow: 0 1px 0.125rem color-mix(in srgb, var(--color-black) 4%, transparent);
     transition: box-shadow 0.15s ease, border-color 0.15s ease;
   }
 
   .tt-toggle:hover .tt-pill {
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--color-black) 10%, transparent);
   }
 
   .tt-count {
-    font-size: 0.72rem;
+    font-size: var(--text-xs);
     color: var(--color-text-secondary);
     font-weight: 600;
     white-space: nowrap;
   }
 
   .tt-link {
-    font-size: 0.78rem;
-    color: var(--color-primary-500, #3b82f6);
+    font-size: var(--text-xs);
+    color: var(--color-primary-500);
     font-weight: 650;
   }
 
@@ -242,9 +249,18 @@ function formatDuration(ns: number): string {
   }
 }
 
+/* The tool-call thread's identity accent — a distinct green with its own
+   semantic tokens (--color-tool-thread-accent / -text), deliberately not the
+   orange dag-node-tool role nor a status green. Local aliases keep the many
+   color-mix consumers below terse; the -text token flips in dark on its own. */
+.thread-tools-thread {
+  --tt-accent: var(--color-tool-thread-accent);
+  --tt-accent-text: var(--color-tool-thread-accent-text);
+}
+
 .thread-tool {
-  border-bottom: 1px solid rgba(76, 175, 80, 0.15);
-  background: rgba(76, 175, 80, 0.04);
+  border-bottom: 1px solid color-mix(in srgb, var(--tt-accent) 15%, transparent);
+  background: color-mix(in srgb, var(--tt-accent) 4%, transparent);
   transition: background 120ms ease;
 
   &:last-child {
@@ -252,7 +268,7 @@ function formatDuration(ns: number): string {
   }
 
   &--open {
-    background: rgba(76, 175, 80, 0.1);
+    background: color-mix(in srgb, var(--tt-accent) 10%, transparent);
   }
 }
 
@@ -261,34 +277,34 @@ function formatDuration(ns: number): string {
   align-items: center;
   gap: 0.5rem;
   padding: 0.45rem 0.5rem 0.45rem 0.75rem;
-  font-size: 0.78rem;
+  font-size: var(--text-xs);
   cursor: pointer;
-  color: #4a5568;
+  color: var(--color-text-secondary);
   transition: background 120ms ease;
 
   &:hover {
-    background: rgba(76, 175, 80, 0.12);
+    background: color-mix(in srgb, var(--tt-accent) 12%, transparent);
   }
 
   &__caret {
-    color: #4a5568;
-    font-size: 0.7rem;
-    width: 12px;
+    color: var(--color-text-secondary);
+    font-size: var(--text-2xs);
+    width: 0.75rem;
     text-align: center;
   }
 
   &__icon {
-    width: 18px;
-    height: 18px;
+    width: 1.125rem;
+    height: 1.125rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    font-size: 0.95rem;
+    font-size: var(--text-base);
   }
 
   &__name {
-    font-family: monospace;
-    color: #2f7a31;
+    font-family: var(--font-mono);
+    color: var(--tt-accent-text);
     font-weight: 500;
   }
 
@@ -296,8 +312,8 @@ function formatDuration(ns: number): string {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 22px;
-    height: 22px;
+    width: 1.375rem;
+    height: 1.375rem;
     border-radius: 0.25rem;
     background: transparent;
     border: none;
@@ -308,8 +324,8 @@ function formatDuration(ns: number): string {
     transition: all 120ms ease;
 
     &:hover {
-      background: rgba(76, 175, 80, 0.18);
-      color: #2f7a31;
+      background: color-mix(in srgb, var(--tt-accent) 18%, transparent);
+      color: var(--tt-accent-text);
     }
   }
 }
@@ -319,23 +335,23 @@ function formatDuration(ns: number): string {
   align-items: center;
   gap: 0.25rem;
   padding: 0.1rem 0.5rem;
-  border-radius: 999px;
-  font-size: 0.65rem;
+  border-radius: var(--radius-full);
+  font-size: var(--text-3xs);
   font-weight: 600;
   letter-spacing: 0.03rem;
-  font-family: monospace;
+  font-family: var(--font-mono);
   white-space: nowrap;
 
   &--ok {
-    background: rgba(22, 163, 74, 0.1);
+    background: color-mix(in srgb, var(--color-success-600) 10%, transparent);
     color: var(--color-success-600);
-    border: 1px solid rgba(22, 163, 74, 0.25);
+    border: 1px solid color-mix(in srgb, var(--color-success-600) 25%, transparent);
   }
 
   &--error {
-    background: rgba(220, 38, 38, 0.1);
+    background: color-mix(in srgb, var(--color-error-600) 10%, transparent);
     color: var(--color-error-600);
-    border: 1px solid rgba(220, 38, 38, 0.25);
+    border: 1px solid color-mix(in srgb, var(--color-error-600) 25%, transparent);
   }
 }
 
@@ -354,7 +370,7 @@ function formatDuration(ns: number): string {
   }
 
   &__label {
-    font-size: 0.62rem;
+    font-size: var(--text-3xs);
     font-weight: 700;
     letter-spacing: 0.06rem;
     color: var(--color-text-secondary);
@@ -366,60 +382,53 @@ function formatDuration(ns: number): string {
     background: var(--color-surface-base);
     border: 1px solid var(--color-border-default);
     border-radius: 0.25rem;
-    font-family: monospace;
-    font-size: 0.72rem;
+    font-family: var(--font-mono);
+    font-size: var(--text-xs);
     color: var(--color-text-body);
     line-height: 1.45;
     white-space: pre-wrap;
     word-break: break-word;
-    max-height: 280px;
+    max-height: 17.5rem;
     overflow: auto;
   }
 }
 
-/* ─── dark mode overrides ─────────────────────────────────────────────── */
-.thread-tools-thread--dark {
+/* ─── dark mode overrides ─────────────────────────────────────────────────
+   Only what genuinely differs in dark: the accent text step, the slightly
+   stronger accent washes (a translucent tint over a dark surface needs more
+   alpha to read), and the lighter status steps. The row/caret text colours
+   are gone from here — --color-text-secondary is already theme-paired. */
+.dark .thread-tools-thread {
+  /* --tt-accent-text flips via its own token (--color-tool-thread-accent-text). */
   .thread-tool {
-    background: rgba(76, 175, 80, 0.06);
-    border-bottom-color: rgba(76, 175, 80, 0.2);
-    color: #a0aec0;
+    background: color-mix(in srgb, var(--tt-accent) 6%, transparent);
+    border-bottom-color: color-mix(in srgb, var(--tt-accent) 20%, transparent);
 
     &--open {
-      background: rgba(76, 175, 80, 0.14);
+      background: color-mix(in srgb, var(--tt-accent) 14%, transparent);
     }
   }
 
   .thread-tool-row {
-    color: #a0aec0;
-
     &:hover {
-      background: rgba(76, 175, 80, 0.16);
-    }
-
-    &__caret {
-      color: #a0aec0;
-    }
-
-    &__name {
-      color: #6dd170;
+      background: color-mix(in srgb, var(--tt-accent) 16%, transparent);
     }
 
     &__view:hover {
-      background: rgba(76, 175, 80, 0.22);
-      color: #6dd170;
+      background: color-mix(in srgb, var(--tt-accent) 22%, transparent);
     }
   }
 
   .thread-pill--ok {
-    background: rgba(34, 197, 94, 0.14);
-    color: #4ade80;
-    border-color: rgba(34, 197, 94, 0.3);
+    background: color-mix(in srgb, var(--color-success-500) 14%, transparent);
+    color: var(--color-success-400);
+    border-color: color-mix(in srgb, var(--color-success-500) 30%, transparent);
   }
 
   .thread-pill--error {
-    background: rgba(248, 113, 113, 0.14);
-    color: #f87171;
-    border-color: rgba(248, 113, 113, 0.3);
+    background: color-mix(in srgb, var(--color-error-400) 14%, transparent);
+    color: var(--color-error-400);
+    border-color: color-mix(in srgb, var(--color-error-400) 30%, transparent);
   }
 }
 </style>
diff --git a/web/src/plugins/traces/ThreadView.vue b/web/src/plugins/traces/ThreadView.vue
index 4d92f726a1..2b022f1f20 100644
--- a/web/src/plugins/traces/ThreadView.vue
+++ b/web/src/plugins/traces/ThreadView.vue
@@ -17,50 +17,46 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <!--
   Thread view — chat-style projection of an LLM trace.
 
-  Phase A scope (this commit):
     - Classify spans by `gen_ai_operation_name`
     - Render the trace summary chip-bar (turn count, total duration, cost,
       model, tool calls, errors)
     - Empty + skeleton states
-
-  Phase B+ will add the actual conversation rendering.
 -->
 <template>
   <div
-    class="thread-view flex flex-col w-full h-full bg-(--color-surface-base)"
-    :class="{ 'thread-view--dark': isDark }"
+    class="thread-view flex flex-col w-full h-full bg-surface-base"
   >
     <!-- Summary toolbar — sidebar-style badge chips. Hidden in the Session
          Detail Pretty view (those metrics already show in the KPI cards). -->
-    <div v-if="props.showSummary" class="thread-summary flex flex-wrap items-center gap-[0.4rem] py-2 px-4 bg-(--color-surface-base,transparent) border-b border-(--color-border-default)">
+    <div v-if="props.showSummary" class="thread-summary flex flex-wrap items-center gap-[0.4rem] py-2 px-4 bg-surface-base border-b border-border-default">
       <OTag
         type="metricChip"
-        class="thread-chip thread-chip--steps h-[26px]! px-[0.625rem]! py-0! bg-(--color-surface-base)! border border-(--color-border-default) rounded! text-xs! text-(--color-text-body)! border-l-[3px]! border-l-[#cc785c]!"
+        class="thread-chip thread-chip--steps h-6.5! px-2.5! py-0! bg-surface-base! border border-border-default rounded-default! text-xs! text-text-body! border-l-[3px]! border-l-[color-mix(in_srgb,var(--color-orange-700)_75%,var(--color-grey-300))]!"
         :title="summary.turnCount === 1 ? t('traces.threadView.llmStep', { n: summary.turnCount }) : t('traces.threadView.llmSteps', { n: summary.turnCount })"
       >
         <template #icon><OIcon name="auto-awesome" size="xs" /></template>
-        <span class="thread-chip__label text-(--color-text-secondary) font-medium mr-[5px] tracking-normal text-[11.5px]">{{ t('traces.threadView.steps') }}</span>
-        <span class="thread-chip__value text-(--color-text-body) font-semibold text-xs">{{ summary.turnCount }}</span>
+        <span class="thread-chip__label text-text-secondary font-medium mr-[0.3125rem] tracking-normal text-2xs">{{ t('traces.threadView.steps') }}</span>
+        <span class="thread-chip__value text-text-body font-semibold text-xs">{{ summary.turnCount }}</span>
       </OTag>
 
-      <OTag type="metricChip" class="thread-chip thread-chip--tools h-[26px]! px-[0.625rem]! py-0! bg-(--color-surface-base)! border border-(--color-border-default) rounded! text-xs! text-(--color-text-body)! border-l-[3px]! border-l-[#0ea5e9]!">
+      <OTag type="metricChip" class="thread-chip thread-chip--tools h-6.5! px-2.5! py-0! bg-surface-base! border border-border-default rounded-default! text-xs! text-text-body! border-l-[3px]! border-l-[color-mix(in_srgb,var(--color-cyan-500)_55%,var(--color-blue-500))]!">
         <template #icon><OIcon name="build" size="xs" /></template>
-        <span class="thread-chip__label text-(--color-text-secondary) font-medium mr-[5px] tracking-normal text-[11.5px]">{{ t('traces.threadView.tools') }}</span>
-        <span class="thread-chip__value text-(--color-text-body) font-semibold text-xs">{{ summary.toolCallCount }}</span>
+        <span class="thread-chip__label text-text-secondary font-medium mr-[0.3125rem] tracking-normal text-2xs">{{ t('traces.threadView.tools') }}</span>
+        <span class="thread-chip__value text-text-body font-semibold text-xs">{{ summary.toolCallCount }}</span>
       </OTag>
 
-      <OTag type="metricChip" class="thread-chip thread-chip--duration h-[26px]! px-[0.625rem]! py-0! bg-(--color-surface-base)! border border-(--color-border-default) rounded! text-xs! text-(--color-text-body)! border-l-[3px]! border-l-[#64748b]!">
+      <OTag type="metricChip" class="thread-chip thread-chip--duration h-6.5! px-2.5! py-0! bg-surface-base! border border-border-default rounded-default! text-xs! text-text-body! border-l-[3px]! border-l-[color-mix(in_srgb,var(--color-grey-500)_80%,var(--color-blue-800))]!">
         <template #icon><OIcon name="schedule" size="xs" /></template>
-        <span class="thread-chip__label text-(--color-text-secondary) font-medium mr-[5px] tracking-normal text-[11.5px]">{{ t('traces.threadView.duration') }}</span>
-        <span class="thread-chip__value text-(--color-text-body) font-semibold text-xs">
+        <span class="thread-chip__label text-text-secondary font-medium mr-[0.3125rem] tracking-normal text-2xs">{{ t('traces.threadView.duration') }}</span>
+        <span class="thread-chip__value text-text-body font-semibold text-xs">
           {{ formatDuration(summary.totalDurationNs) }}
         </span>
       </OTag>
 
-      <OTag type="metricChip" class="thread-chip thread-chip--cost h-[26px]! px-[0.625rem]! py-0! bg-(--color-surface-base)! border border-(--color-border-default) rounded! text-xs! text-(--color-text-body)! border-l-[3px]! border-l-[#16a34a]!">
+      <OTag type="metricChip" class="thread-chip thread-chip--cost h-6.5! px-2.5! py-0! bg-surface-base! border border-border-default rounded-default! text-xs! text-text-body! border-l-[3px]! border-l-success-600!">
         <template #icon><OIcon name="payments" size="xs" /></template>
-        <span class="thread-chip__label text-(--color-text-secondary) font-medium mr-[5px] tracking-normal text-[11.5px]">{{ t('traces.threadView.cost') }}</span>
-        <span class="thread-chip__value text-(--color-text-body) font-semibold text-xs">
+        <span class="thread-chip__label text-text-secondary font-medium mr-[0.3125rem] tracking-normal text-2xs">{{ t('traces.threadView.cost') }}</span>
+        <span class="thread-chip__value text-text-body font-semibold text-xs">
           {{ formatCost(summary.totalCost) }}
         </span>
       </OTag>
@@ -68,22 +64,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <OTag
         v-if="summary.dominantModel"
         type="metricChip"
-        class="thread-chip thread-chip--model h-[26px]! px-[0.625rem]! py-0! bg-(--color-surface-base)! border border-(--color-border-default) rounded! text-xs! text-(--color-text-body)! border-l-[3px]! border-l-[#8b5cf6]!"
+        class="thread-chip thread-chip--model h-6.5! px-2.5! py-0! bg-surface-base! border border-border-default rounded-default! text-xs! text-text-body! border-l-[3px]! border-l-ai-accent! dark:border-l-(--color-purple-400)!"
         :title="summary.dominantModel"
       >
         <template #icon><OIcon name="bolt" size="xs" /></template>
-        <span class="thread-chip__label text-(--color-text-secondary) font-medium mr-[5px] tracking-normal text-[11.5px]">{{ t('traces.threadView.model') }}</span>
-        <span class="thread-chip__value text-(--color-text-body) font-semibold text-xs">{{ summary.dominantModel }}</span>
+        <span class="thread-chip__label text-text-secondary font-medium mr-[0.3125rem] tracking-normal text-2xs">{{ t('traces.threadView.model') }}</span>
+        <span class="thread-chip__value text-text-body font-semibold text-xs">{{ summary.dominantModel }}</span>
       </OTag>
 
       <OTag
         v-if="summary.errorCount > 0"
         type="metricChip"
-        class="thread-chip thread-chip--error h-[26px]! px-[0.625rem]! py-0! bg-(--color-surface-base)! border border-(--color-border-default) rounded! text-xs! text-(--color-text-body)! border-l-[3px]! border-l-[var(--color-error-600)]!"
+        class="thread-chip thread-chip--error h-6.5! px-2.5! py-0! bg-surface-base! border border-border-default rounded-default! text-xs! text-text-body! border-l-[3px]! border-l-error-600!"
       >
         <template #icon><OIcon name="error-outline" size="xs" /></template>
-        <span class="thread-chip__label text-(--color-text-secondary) font-medium mr-[5px] tracking-normal text-[11.5px]">{{ t('traces.threadView.errors') }}</span>
-        <span class="thread-chip__value thread-chip__value--error font-semibold text-xs text-(--color-error-600)">{{ summary.errorCount }}</span>
+        <span class="thread-chip__label text-text-secondary font-medium mr-[0.3125rem] tracking-normal text-2xs">{{ t('traces.threadView.errors') }}</span>
+        <span class="thread-chip__value thread-chip__value--error font-semibold text-xs text-error-600">{{ summary.errorCount }}</span>
       </OTag>
 
     </div>
@@ -91,39 +87,39 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <!-- Body -->
     <div
       v-if="!props.spans || props.spans.length === 0"
-      class="flex-1 flex items-center justify-center text-[var(--color-text-muted)] text-[0.85rem]"
+      class="flex-1 flex items-center justify-center text-text-muted text-sm"
     >
       {{ t('traces.threadView.noSpansLoaded') }}
     </div>
     <div
       v-else-if="turns.length === 0"
-      class="flex-1 flex items-center justify-center text-[var(--color-text-muted)] text-[0.85rem]"
+      class="flex-1 flex items-center justify-center text-text-muted text-sm"
     >
       {{ t('traces.threadView.noLlmTurns') }}
       <code>gen_ai.operation.name = chat</code>.
     </div>
-    <div v-else class="thread-scroll-body flex-1 overflow-auto px-[1rem] py-[0.75rem] bg-(--color-surface-base,var(--color-surface-base))">
+    <div v-else class="thread-scroll-body flex-1 overflow-auto px-4 py-3 bg-surface-base">
       <!-- System prompt (global — identical across traces in a session). -->
       <div
         v-if="head.systemPrompt"
-        class="thread-system mb-4 border border-(--color-border-default) border-l-[3px] border-l-[#8b5cf6] rounded-[0.4rem] bg-(--color-surface-base) overflow-hidden"
+        class="thread-system mb-4 border border-border-default border-l-[3px] border-l-ai-accent dark:border-l-(--color-purple-400) rounded-default bg-surface-base overflow-hidden"
       >
         <div
-          class="thread-system__head flex items-center gap-[0.625rem] py-2 px-3 cursor-pointer transition-all duration-[120ms]"
+          class="thread-system__head flex items-center gap-2.5 py-2 px-3 cursor-pointer transition-all duration-120 hover:bg-[color-mix(in_srgb,var(--color-ai-accent)_4%,transparent)] dark:hover:bg-[color-mix(in_srgb,var(--color-ai-accent)_8%,transparent)]"
           @click="showSystemFull = !showSystemFull"
         >
-          <span class="thread-system__badge inline-flex items-center py-[0.15rem] px-2 bg-[rgba(139,92,246,0.1)] text-[#8b5cf6] rounded text-[0.7rem] font-semibold tracking-[0.02rem] shrink-0">
+          <span class="thread-system__badge inline-flex items-center py-[0.15rem] px-2 bg-[color-mix(in_srgb,var(--color-ai-accent)_10%,transparent)] dark:bg-[color-mix(in_srgb,var(--color-ai-accent)_18%,transparent)] text-ai-accent dark:text-(--color-purple-400) rounded-default text-2xs font-semibold tracking-[0.02rem] shrink-0">
             <OIcon name="settings" size="xs" class="mr-1" />
             {{ t('traces.threadView.system') }}
           </span>
           <span
             v-if="!showSystemFull"
-            class="thread-system__preview flex-1 min-w-0 text-[0.8rem] text-(--color-text-secondary) truncate"
+            class="thread-system__preview flex-1 min-w-0 text-compact text-text-secondary truncate"
           >
             {{ truncate(head.systemPrompt, 160) }}
           </span>
           <span v-else class="flex-1" />
-          <span class="thread-system__toggle inline-flex items-center gap-[0.15rem] text-(--q-primary) text-[0.72rem] font-medium shrink-0">
+          <span class="thread-system__toggle inline-flex items-center gap-[0.15rem] text-theme-accent text-xs font-medium shrink-0">
             <OIcon
               :name="showSystemFull ? 'expand-less' : 'expand-more'"
               size="sm"
@@ -132,7 +128,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
         <div
           v-if="showSystemFull"
-          class="thread-system__content py-3 px-[0.875rem] border-t border-(--color-border-default) bg-(--color-surface-base,var(--color-surface-base)) text-[0.82rem] leading-[1.55] text-(--color-text-secondary) whitespace-pre-wrap break-words max-h-[360px] overflow-auto"
+          class="thread-system__content py-3 px-3.5 border-t border-border-default bg-surface-base text-compact leading-[1.55] text-text-secondary whitespace-pre-wrap break-words max-h-90 overflow-auto"
         >
           {{ head.systemPrompt }}
         </div>
@@ -143,7 +139,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
              same session — these are answered in earlier traces. -->
         <div
           v-if="group.historicalUserCount > 0"
-          class="thread-prior flex items-center gap-[0.5rem] px-[0.75rem] py-[0.4rem] mb-[0.5rem] rounded border border-dashed border-[var(--color-border-default)] text-[0.72rem] text-[var(--color-text-muted)]"
+          class="thread-prior flex items-center gap-2 px-3 py-[0.4rem] mb-2 rounded-default border border-dashed border-border-default text-xs text-text-muted"
         >
           <span>↶</span>
           <span>
@@ -156,10 +152,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- This group's user query. -->
         <div
           v-if="group.userQuery"
-          class="thread-bubble thread-bubble--user thread-user-row flex items-start gap-[0.625rem] mb-4 ml-auto max-w-[40%] w-fit py-[0.625rem] px-[0.875rem] rounded-lg text-[0.85rem] leading-normal whitespace-pre-wrap break-words bg-[linear-gradient(135deg,#f8f9ff_0%,#e8edff_100%)] border border-[#e0e6ff] text-[#2c3e50] shadow-[0_1px_2px_rgba(0,0,0,0.06)]"
+          class="thread-bubble thread-bubble--user thread-user-row flex items-start gap-2.5 mb-4 ml-auto max-w-[40%] w-fit py-2.5 px-3.5 rounded-default text-sm leading-normal whitespace-pre-wrap break-words bg-[image:var(--color-chat-bubble-user)] border border-(--color-indigo-100) dark:border-[color-mix(in_srgb,var(--color-indigo-900)_55%,var(--color-grey-700))] text-text-body shadow-[0_0.0625rem_0.125rem_color-mix(in_srgb,var(--color-black)_6%,transparent)] dark:shadow-[0_0.0625rem_0.125rem_color-mix(in_srgb,var(--color-white)_8%,transparent)]"
         >
           <div
-            class="thread-user-avatar w-6 h-6 rounded-full bg-[linear-gradient(135deg,#8b5cf6_0%,#ec4899_100%)] text-white inline-flex items-center justify-content-center text-[0.7rem] font-bold shrink-0 cursor-default"
+            class="thread-user-avatar w-6 h-6 rounded-full bg-[image:var(--color-gradient-ai)] dark:bg-[image:linear-gradient(135deg,var(--color-indigo-600)_0%,var(--color-indigo-500)_100%)] text-white inline-flex items-center justify-content-center text-2xs font-bold shrink-0 cursor-default"
             :title="group.userId || t('traces.threadView.user')"
           >
             <OIcon name="person" size="sm" />
@@ -179,9 +175,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <div
             v-for="turn in group.turns"
             :key="turn.span.span_id"
-            class="thread-turn relative flex gap-[0.875rem] pb-4"
+            class="thread-turn relative flex gap-3.5 pb-4 before:content-[''] before:absolute before:top-[1.875rem] before:bottom-0 before:left-3.5 before:w-0.5 before:rounded-full before:bg-border-default last:before:hidden"
           >
-          <div class="thread-turn__avatar shrink-0 relative z-[1] w-7 h-7 rounded-full bg-[#f3eaff] text-[#8b5cf6] flex items-center justify-center border border-[rgba(139,92,246,0.25)] shadow-[0_0_0_4px_var(--color-surface-base)]">
+          <div class="thread-turn__avatar shrink-0 relative z-1 w-7 h-7 rounded-full bg-(--color-purple-100) dark:bg-[color-mix(in_srgb,var(--color-ai-accent)_16%,transparent)] text-ai-accent dark:text-(--color-purple-400) flex items-center justify-center border border-[color-mix(in_srgb,var(--color-ai-accent)_25%,transparent)] dark:border-[color-mix(in_srgb,var(--color-ai-accent)_40%,transparent)] shadow-[0_0_0_0.25rem_var(--color-surface-base)]">
             <OIcon name="auto-awesome" size="xs" />
           </div>
           <div class="thread-turn__body flex-1 min-w-0 flex flex-col gap-2">
@@ -189,7 +185,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <div
             v-for="(u, uIdx) in turn.followupUsers"
             :key="`u-${uIdx}`"
-            class="thread-bubble thread-bubble--user thread-bubble--user-followup py-[0.625rem] px-[0.875rem] rounded-lg text-[0.85rem] leading-normal whitespace-pre-wrap break-words max-w-[min(640px,75%)] bg-[linear-gradient(135deg,#f8f9ff_0%,#e8edff_100%)] border border-[#e0e6ff] text-[#2c3e50] shadow-[0_1px_2px_rgba(0,0,0,0.06)]"
+            class="thread-bubble thread-bubble--user thread-bubble--user-followup py-2.5 px-3.5 rounded-default text-sm leading-normal whitespace-pre-wrap break-words max-w-[min(40rem,75%)] bg-[image:var(--color-chat-bubble-user)] border border-(--color-indigo-100) dark:border-[color-mix(in_srgb,var(--color-indigo-900)_55%,var(--color-grey-700))] text-text-body shadow-[0_0.0625rem_0.125rem_color-mix(in_srgb,var(--color-black)_6%,transparent)] dark:shadow-[0_0.0625rem_0.125rem_color-mix(in_srgb,var(--color-white)_8%,transparent)]"
           >
             {{ u.content }}
           </div>
@@ -208,42 +204,42 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <div
             v-for="(msg, mIdx) in turn.assistant"
             :key="`a-${mIdx}`"
-            class="thread-bubble thread-bubble--assistant markdown-body self-start bg-white border border-[#e5e7eb] text-[#2c3e50] max-w-full shadow-[0_1px_2px_rgba(0,0,0,0.06)] py-[0.625rem] px-[0.875rem] rounded-lg text-[0.85rem] leading-normal break-words"
+            class="thread-bubble thread-bubble--assistant markdown-body self-start bg-surface-base border border-border-default text-text-body max-w-full shadow-[0_0.0625rem_0.125rem_color-mix(in_srgb,var(--color-black)_6%,transparent)] dark:shadow-[0_0.0625rem_0.125rem_color-mix(in_srgb,var(--color-white)_8%,transparent)] py-2.5 px-3.5 rounded-default text-sm leading-normal break-words whitespace-normal"
             v-html="renderMarkdown(msg.content)"
           />
 
 
           <!-- Footer. -->
-          <div class="thread-turn__footer flex items-center flex-wrap gap-[0.35rem] mt-2 pt-2 border-t border-dashed border-(--color-border-default) text-[0.72rem] text-(--color-text-secondary)">
-            <span class="thread-metric inline-flex items-center gap-1 py-[0.18rem] px-2 rounded-[0.3rem] bg-(--color-surface-base,rgba(0,0,0,0.03)) border border-(--color-border-default) text-(--color-text-secondary) text-[0.7rem] leading-none whitespace-nowrap shrink-0" :title="t('traces.threadView.startedAt', { time: formatTime(turn.span.start_time) })">
+          <div class="thread-turn__footer flex items-center flex-wrap gap-[0.35rem] mt-2 pt-2 border-t border-dashed border-border-default text-xs text-text-secondary">
+            <span class="thread-metric inline-flex items-center gap-1 py-[0.18rem] px-2 rounded-default bg-surface-subtle border border-border-default text-text-secondary text-2xs leading-none whitespace-nowrap shrink-0" :title="t('traces.threadView.startedAt', { time: formatTime(turn.span.start_time) })">
               <OIcon name="schedule" size="xs" />
               {{ formatTime(turn.span.start_time) }}
             </span>
-            <span class="thread-metric thread-metric--model inline-flex items-center gap-1 py-[0.18rem] px-2 rounded-[0.3rem] text-[#8b5cf6] bg-[rgba(139,92,246,0.06)] border border-[rgba(139,92,246,0.2)] font-medium max-w-[200px] overflow-hidden text-ellipsis text-[0.7rem] leading-none whitespace-nowrap shrink-0" :title="getModel(turn.span)">
+            <span class="thread-metric thread-metric--model inline-flex items-center gap-1 py-[0.18rem] px-2 rounded-default text-ai-accent dark:text-(--color-purple-400) bg-[color-mix(in_srgb,var(--color-ai-accent)_6%,transparent)] dark:bg-[color-mix(in_srgb,var(--color-ai-accent)_12%,transparent)] border border-[color-mix(in_srgb,var(--color-ai-accent)_20%,transparent)] dark:border-[color-mix(in_srgb,var(--color-ai-accent)_30%,transparent)] font-medium max-w-50 overflow-hidden text-ellipsis text-2xs leading-none whitespace-nowrap shrink-0" :title="getModel(turn.span)">
               <OIcon name="bolt" size="xs" />
               {{ getModel(turn.span) || t('traces.threadView.unknown') }}
             </span>
-            <span class="thread-metric inline-flex items-center gap-1 py-[0.18rem] px-2 rounded-[0.3rem] bg-(--color-surface-base,rgba(0,0,0,0.03)) border border-(--color-border-default) text-(--color-text-secondary) text-[0.7rem] leading-none whitespace-nowrap shrink-0" :title="t('traces.threadView.duration')">
+            <span class="thread-metric inline-flex items-center gap-1 py-[0.18rem] px-2 rounded-default bg-surface-subtle border border-border-default text-text-secondary text-2xs leading-none whitespace-nowrap shrink-0" :title="t('traces.threadView.duration')">
               <OIcon name="timer" size="xs" />
               {{ formatDuration(turn.span.duration) }}
             </span>
-            <span class="thread-metric inline-flex items-center gap-1 py-[0.18rem] px-2 rounded-[0.3rem] bg-(--color-surface-base,rgba(0,0,0,0.03)) border border-(--color-border-default) text-(--color-text-secondary) text-[0.7rem] leading-none whitespace-nowrap shrink-0" :title="t('traces.threadView.tokens')">
+            <span class="thread-metric inline-flex items-center gap-1 py-[0.18rem] px-2 rounded-default bg-surface-subtle border border-border-default text-text-secondary text-2xs leading-none whitespace-nowrap shrink-0" :title="t('traces.threadView.tokens')">
               <OIcon name="data-usage" size="xs" />
               {{ formatNumber(getTokens(turn.span)) }} {{ t('traces.threadView.tokensSuffix') }}
             </span>
-            <span class="thread-metric inline-flex items-center gap-1 py-[0.18rem] px-2 rounded-[0.3rem] bg-(--color-surface-base,rgba(0,0,0,0.03)) border border-(--color-border-default) text-(--color-text-secondary) text-[0.7rem] leading-none whitespace-nowrap shrink-0" :title="t('traces.threadView.cost')">
+            <span class="thread-metric inline-flex items-center gap-1 py-[0.18rem] px-2 rounded-default bg-surface-subtle border border-border-default text-text-secondary text-2xs leading-none whitespace-nowrap shrink-0" :title="t('traces.threadView.cost')">
               <OIcon name="payments" size="xs" />
               {{ formatCost(getCost(turn.span)) }}
             </span>
             <span
               v-if="turn.span.span_status === 'ERROR'"
-              class="thread-metric thread-metric--error inline-flex items-center gap-1 py-[0.18rem] px-2 rounded-[0.3rem] text-[#dc2626] bg-[rgba(220,38,38,0.08)] border border-[rgba(220,38,38,0.25)] font-medium text-[0.7rem] leading-none whitespace-nowrap shrink-0"
+              class="thread-metric thread-metric--error inline-flex items-center gap-1 py-[0.18rem] px-2 rounded-default text-error-600 dark:text-error-400 bg-[color-mix(in_srgb,var(--color-error-600)_8%,transparent)] dark:bg-[color-mix(in_srgb,var(--color-error-400)_12%,transparent)] border border-[color-mix(in_srgb,var(--color-error-600)_25%,transparent)] dark:border-[color-mix(in_srgb,var(--color-error-400)_30%,transparent)] font-medium text-2xs leading-none whitespace-nowrap shrink-0"
             >
               <OIcon name="error-outline" size="xs" />
               {{ t('traces.threadView.error') }}
             </span>
             <button
-              class="thread-turn__view-span ml-auto inline-flex items-center gap-[0.2rem] py-[0.2rem] px-[0.55rem] rounded-[0.3rem] text-(--q-primary) text-[0.72rem] font-medium bg-transparent border border-transparent cursor-pointer transition-all duration-[120ms] shrink-0"
+              class="thread-turn__view-span ml-auto inline-flex items-center gap-[0.2rem] py-[0.2rem] px-[0.55rem] rounded-default text-theme-accent text-xs font-medium bg-transparent border border-transparent cursor-pointer transition-all duration-120 shrink-0 hover:bg-[color-mix(in_srgb,var(--color-blue-500)_8%,transparent)] hover:border-[color-mix(in_srgb,var(--color-blue-500)_25%,transparent)] dark:hover:bg-[color-mix(in_srgb,var(--color-blue-400)_12%,transparent)] dark:hover:border-[color-mix(in_srgb,var(--color-blue-400)_30%,transparent)]"
               @click="emit('span-selected', turn.span.span_id)"
             >
               {{ t('traces.threadView.viewSpan') }}
@@ -307,7 +303,6 @@ import { renderMarkdown } from "./markdown";
 const store = useStore();
 const { t } = useI18n();
 
-const isDark = computed(() => store.state.theme === "dark");
 
 interface ThreadHead {
   systemPrompt: string;
@@ -500,122 +495,13 @@ function formatTime(ns: number): string {
 }
 </script>
 
-<style>
-/* OIcon color inside chip — descendant selector, cannot inline. */
-.thread-chip .OIcon {
-  color: var(--color-text-secondary);
-}
-
-/* Error chip value color — descendant selector. */
-.thread-chip--error .thread-chip__value--error {
-  color: var(--color-error-600);
-}
-
-/* ::before connector line on timeline turn — pseudo-element, cannot inline. */
-.thread-turn::before {
-  content: "";
-  position: absolute;
-  top: 30px;
-  bottom: 0;
-  left: 14px; /* avatar width / 2 */
-  width: 2px;
-  background: var(--color-border-default);
-  border-radius: 1px;
-}
-
-.thread-turn:last-child::before {
-  display: none;
-}
-
-/* Hover states — cannot inline. */
-.thread-system__head:hover {
-  background: rgba(139, 92, 246, 0.04);
-}
-
-.thread-turn__view-span:hover {
-  background: rgba(59, 130, 246, 0.08);
-  border-color: rgba(59, 130, 246, 0.25);
-}
-
-/* ─── dark mode overrides — all descendant selectors, cannot inline ───── */
-.thread-view--dark .thread-bubble--user {
-  background: linear-gradient(135deg, #2a2d47 0%, #1e213a 100%);
-  border-color: #3a3d5c;
-  color: #e2e8f0;
-  box-shadow: 0 1px 2px rgba(255, 255, 255, 0.08);
-}
-
-.thread-view--dark .thread-bubble--assistant {
-  background: #1a1a1a;
-  border-color: #333333;
-  color: #e2e2e2;
-  box-shadow: 0 1px 2px rgba(255, 255, 255, 0.08);
-}
-
-.thread-view--dark .thread-user-avatar {
-  background: linear-gradient(135deg, #4c63d2 0%, #5a67d8 100%);
-  color: #ffffff;
-}
-
-.thread-view--dark .thread-turn__avatar {
-  background: rgba(139, 92, 246, 0.16);
-  color: #c4b5fd;
-  border-color: rgba(139, 92, 246, 0.4);
-  box-shadow: 0 0 0 4px var(--color-surface-base);
-}
-
-.thread-view--dark .thread-metric {
-  background: rgba(255, 255, 255, 0.04);
-  border-color: rgba(255, 255, 255, 0.08);
-}
-
-.thread-view--dark .thread-metric--model {
-  color: #c4b5fd;
-  background: rgba(139, 92, 246, 0.12);
-  border-color: rgba(139, 92, 246, 0.3);
-}
-
-.thread-view--dark .thread-metric--error {
-  color: #f87171;
-  background: rgba(248, 113, 113, 0.12);
-  border-color: rgba(248, 113, 113, 0.3);
-}
-
-.thread-view--dark .thread-turn__footer {
-  border-top-color: rgba(255, 255, 255, 0.08);
-}
-
-.thread-view--dark .thread-turn__view-span:hover {
-  background: rgba(96, 165, 250, 0.12);
-  border-color: rgba(96, 165, 250, 0.3);
-}
-
-.thread-view--dark .thread-system {
-  border-left-color: #a78bfa;
-}
-
-.thread-view--dark .thread-system__head:hover {
-  background: rgba(139, 92, 246, 0.08);
-}
-
-.thread-view--dark .thread-system__badge {
-  background: rgba(139, 92, 246, 0.18);
-  color: #c4b5fd;
-}
-</style>
-
-<!-- Scoped block: the markdown-body :deep() selectors + SCSS nesting require a
-     scoped lang="scss" style. :deep is the one sanctioned case for v-html
-     (innerHTML) content, so these rules stay in a style block rather than
-     inlined as  utilities. -->
 <style scoped lang="scss">
-/* ─── markdown rendering (assistant bubble v-html) ─────────────────────────
-   Element styling for the sanitized markdown HTML. Scoped :deep is the one
-   sanctioned case for innerHTML content; colours map to --color-* tokens. The
-   bubble's pre-wrap is reset so rendered block elements don't get extra gaps. */
-.thread-bubble--assistant.markdown-body {
-  white-space: normal;
-}
+/* keep(generated-content): element styling for the sanitized markdown HTML that
+   renderMarkdown() produces and the assistant bubble injects with v-html. Those
+   nodes carry neither a scope attribute nor classes of their own, so :deep()
+   element selectors are the only expressible form. Every colour is a --color-*
+   token, so this one rule set covers light and dark. The bubble's own
+   `whitespace-normal` utility keeps rendered block elements gap-free. */
 .markdown-body {
   :deep(> *:first-child) {
     margin-top: 0;
@@ -635,16 +521,16 @@ function formatTime(ns: number): string {
     line-height: 1.3;
   }
   :deep(h1) {
-    font-size: 1.05rem;
+    font-size: var(--text-base);
   }
   :deep(h2) {
-    font-size: 0.95rem;
+    font-size: var(--text-base);
   }
   :deep(h3) {
-    font-size: 0.9rem;
+    font-size: var(--text-sm);
   }
   :deep(h4) {
-    font-size: 0.85rem;
+    font-size: var(--text-sm);
   }
   :deep(ul),
   :deep(ol) {
@@ -655,7 +541,7 @@ function formatTime(ns: number): string {
     margin: 0.15rem 0;
   }
   :deep(a) {
-    color: var(--color-primary-500, #3b82f6);
+    color: var(--color-text-link);
     text-decoration: none;
 
     &:hover {
@@ -663,17 +549,17 @@ function formatTime(ns: number): string {
     }
   }
   :deep(code) {
-    font-family: monospace;
-    font-size: 0.78rem;
+    font-family: var(--font-mono);
+    font-size: var(--text-xs);
     background: color-mix(in srgb, var(--color-text-body) 8%, transparent);
     padding: 0.1rem 0.3rem;
-    border-radius: 3px;
+    border-radius: 0.1875rem;
   }
   :deep(pre) {
     background: color-mix(in srgb, var(--color-text-body) 5%, transparent);
     border: 1px solid var(--color-border-default);
     padding: 0.5rem 0.625rem;
-    border-radius: 4px;
+    border-radius: 0.25rem;
     overflow-x: auto;
     margin: 0.5rem 0;
   }
@@ -682,7 +568,7 @@ function formatTime(ns: number): string {
     padding: 0;
   }
   :deep(blockquote) {
-    border-left: 3px solid var(--color-border-default);
+    border-left: 0.1875rem solid var(--color-border-default);
     margin: 0.5rem 0;
     padding-left: 0.75rem;
     color: var(--color-text-secondary);
@@ -691,7 +577,7 @@ function formatTime(ns: number): string {
     border-collapse: collapse;
     width: 100%;
     margin: 0.5rem 0;
-    font-size: 0.78rem;
+    font-size: var(--text-xs);
   }
   :deep(th),
   :deep(td) {
diff --git a/web/src/plugins/traces/TraceDAG.spec.ts b/web/src/plugins/traces/TraceDAG.spec.ts
index e12ac494c3..bd2a27ff0f 100644
--- a/web/src/plugins/traces/TraceDAG.spec.ts
+++ b/web/src/plugins/traces/TraceDAG.spec.ts
@@ -16,11 +16,54 @@
 import { describe, expect, it, beforeEach, afterEach, vi } from "vitest";
 import { mount, VueWrapper, flushPromises, config } from "@vue/test-utils";
 import store from "@/test/unit/helpers/store";
+import i18n from "@/locales";
 import searchService from "@/services/search";
 import i18n from "@/locales";
 
 config.global.plugins = [...(config.global.plugins ?? []), i18n];
 
+// ---------------------------------------------------------------------------
+// LLM observation-type styling (decision D1): the 14 node types are a data-viz
+// palette driven by one `--color-dag-node-<suffix>` base token per type. The
+// token flips light/dark on its own, so the classes carry no `dark:` variant
+// and no hardcoded hex. These helpers spell out the exact literal format; the
+// specs additionally assert one hardcoded literal to anchor that format.
+// ---------------------------------------------------------------------------
+
+/** border = base token, bg = base token @12% over the surface. */
+const nodeStyleFor = (suffix: string): string =>
+  `border-[var(--color-dag-node-${suffix})] bg-[color-mix(in_srgb,var(--color-dag-node-${suffix})_12%,var(--color-surface-base))]`;
+
+/** text = base token mixed 70/30 toward the primary text color. */
+const textStyleFor = (suffix: string): string =>
+  `text-[color-mix(in_srgb,var(--color-dag-node-${suffix})_70%,var(--color-text-heading))]`;
+
+const NODE_STYLE_LITERAL_DEFAULT =
+  "border-[var(--color-dag-node-default)] bg-[color-mix(in_srgb,var(--color-dag-node-default)_12%,var(--color-surface-base))]";
+
+const TEXT_STYLE_LITERAL_DEFAULT =
+  "text-[color-mix(in_srgb,var(--color-dag-node-default)_70%,var(--color-text-heading))]";
+
+/** Every OTEL gen_ai operation name the component recognises. */
+const ALL_OBSERVATION_TYPES = [
+  "chat",
+  "text_completion",
+  "generate_content",
+  "embeddings",
+  "invoke_agent",
+  "create_agent",
+  "execute_tool",
+  "invoke_workflow",
+  "retrieval",
+  "chain",
+  "task",
+  "evaluator",
+  "rerank",
+  "guardrail",
+  "span",
+  "event",
+];
+
 // ---------------------------------------------------------------------------
 // vi.mock calls must sit at the top — Vitest hoists them before any imports
 // ---------------------------------------------------------------------------
@@ -132,6 +175,7 @@ function mountDAG(
     },
     global: {
       provide: { store },
+      plugins: [i18n],
     },
   });
 }
@@ -702,23 +746,60 @@ describe("TraceDAG", () => {
       expect(wrapper.vm.getObservationTypeClass(null)).toBe("");
     });
 
+    // Node styling is token-based now: ONE `--color-dag-node-*` base token per
+    // observation type drives border = base and bg = base@12% over the surface.
+    // The token itself flips light/dark, so there is no `dark:` variant and no
+    // hardcoded hex. Each entry below pins the exact token an input maps to.
     const nodeStyle = {
-      default: "border-[#9e9e9e] bg-[#fafafa] dark:border-[#9e9e9e] dark:bg-[#262626]",
-      generation: "border-[#4caf50] bg-[#e8f5e9] dark:border-[#66bb6a] dark:bg-[#1a2e1a]",
-      embedding: "border-[#2196f3] bg-[#e3f2fd] dark:border-[#64b5f6] dark:bg-[#1a2a3a]",
-      agent: "border-[#9c27b0] bg-[#f3e5f5] dark:border-[#ce93d8] dark:bg-[#2a1a2e]",
-      tool: "border-[#ff9800] bg-[#fff3e0] dark:border-[#ffb74d] dark:bg-[#2e2218]",
-      chain: "border-[#3f51b5] bg-[#e8eaf6] dark:border-[#7986cb] dark:bg-[#1a1a2e]",
-      retriever: "border-[#00bcd4] bg-[#e0f7fa] dark:border-[#4dd0e1] dark:bg-[#1a2a2e]",
-      task: "border-[#009688] bg-[#e0f2f1] dark:border-[#4db6ac] dark:bg-[#1a2e2a]",
-      evaluator: "border-[#e91e63] bg-[#fce4ec] dark:border-[#f48fb1] dark:bg-[#2e1a22]",
-      workflow: "border-[#673ab7] bg-[#ede7f6] dark:border-[#b39ddb] dark:bg-[#221a2e]",
-      rerank: "border-[#03a9f4] bg-[#e1f5fe] dark:border-[#4fc3f7] dark:bg-[#1a2a3a]",
-      guardrail: "border-[#f44336] bg-[#ffebee] dark:border-[#ef5350] dark:bg-[#2e1a1a]",
-      span: "border-[#9e9e9e] bg-[#f5f5f5] dark:border-[#9e9e9e] dark:bg-[#262626]",
-      event: "border-[#ffc107] bg-[#fff8e1] dark:border-[#ffd54f] dark:bg-[#2e2a18]",
+      default: NODE_STYLE_LITERAL_DEFAULT,
+      generation: nodeStyleFor("generation"),
+      embedding: nodeStyleFor("embedding"),
+      agent: nodeStyleFor("agent"),
+      tool: nodeStyleFor("tool"),
+      chain: nodeStyleFor("chain"),
+      retriever: nodeStyleFor("retriever"),
+      task: nodeStyleFor("task"),
+      evaluator: nodeStyleFor("evaluator"),
+      workflow: nodeStyleFor("workflow"),
+      rerank: nodeStyleFor("rerank"),
+      guardrail: nodeStyleFor("guardrail"),
+      // 'span' intentionally reuses the neutral default base token.
+      span: nodeStyleFor("default"),
+      event: nodeStyleFor("event"),
     };
 
+    it("should build node styles from a --color-dag-node-* token with a 12% bg mix and no dark: variant or hex", () => {
+      // Anchors the exact literal format the helper reproduces, so the helper
+      // cannot silently drift into mirroring a broken implementation.
+      expect(wrapper.vm.getObservationTypeClass("chat")).toBe(
+        "border-[var(--color-dag-node-generation)] bg-[color-mix(in_srgb,var(--color-dag-node-generation)_12%,var(--color-surface-base))]",
+      );
+      expect(nodeStyle.generation).toBe(
+        "border-[var(--color-dag-node-generation)] bg-[color-mix(in_srgb,var(--color-dag-node-generation)_12%,var(--color-surface-base))]",
+      );
+      // No legacy hardcoded hex and no dark: variant may return.
+      const all = ALL_OBSERVATION_TYPES.map((t) =>
+        wrapper.vm.getObservationTypeClass(t),
+      ).join(" ");
+      expect(all).not.toMatch(/#[0-9a-f]{3,8}\b/i);
+      expect(all).not.toContain("dark:");
+    });
+
+    it("should give each observation type its own distinct base token", () => {
+      // The 14 node types are a data-viz palette: every type keeps a distinct
+      // style, except 'span' which deliberately shares the neutral default.
+      const byType = new Map(
+        ALL_OBSERVATION_TYPES.map((t) => [
+          t,
+          wrapper.vm.getObservationTypeClass(t),
+        ]),
+      );
+      // 16 inputs collapse to 14 suffixes (3 generation aliases, 2 agent
+      // aliases); 'span' shares 'default', leaving 13 distinct styles.
+      expect(new Set(byType.values()).size).toBe(13);
+      expect(byType.get("span")).toBe(nodeStyle.default);
+    });
+
     it("should return the default node style for an unknown observation type", () => {
       expect(wrapper.vm.getObservationTypeClass("totally_unknown")).toBe(
         nodeStyle.default,
@@ -829,33 +910,55 @@ describe("TraceDAG", () => {
 
     it("should return the default text style for an unknown observation type", () => {
       expect(wrapper.vm.getObservationTypeTextClass("unknown")).toBe(
-        "text-[#757575] dark:text-[#bdbdbd]",
+        TEXT_STYLE_LITERAL_DEFAULT,
       );
     });
 
+    it("should build text styles as a 70/30 mix of the base token toward the primary text color", () => {
+      // Anchors the exact literal format that textStyleFor() reproduces.
+      expect(wrapper.vm.getObservationTypeTextClass("chat")).toBe(
+        "text-[color-mix(in_srgb,var(--color-dag-node-generation)_70%,var(--color-text-heading))]",
+      );
+      const all = ALL_OBSERVATION_TYPES.map((t) =>
+        wrapper.vm.getObservationTypeTextClass(t),
+      ).join(" ");
+      expect(all).not.toMatch(/#[0-9a-f]{3,8}\b/i);
+      expect(all).not.toContain("dark:");
+    });
+
+    // Each observation type keeps its own base token; 'span' deliberately
+    // shares the neutral default, matching the node-style map above.
     it.each([
-      ["chat", "text-[#388e3c] dark:text-[#81c784]"],
-      ["text_completion", "text-[#388e3c] dark:text-[#81c784]"],
-      ["generate_content", "text-[#388e3c] dark:text-[#81c784]"],
-      ["embeddings", "text-[#1976d2] dark:text-[#90caf9]"],
-      ["invoke_agent", "text-[#7b1fa2] dark:text-[#ce93d8]"],
-      ["create_agent", "text-[#7b1fa2] dark:text-[#ce93d8]"],
-      ["execute_tool", "text-[#e65100] dark:text-[#ffcc80]"],
-      ["invoke_workflow", "text-[#4527a0] dark:text-[#b39ddb]"],
-      ["retrieval", "text-[#00838f] dark:text-[#80deea]"],
-      ["chain", "text-[#283593] dark:text-[#9fa8da]"],
-      ["task", "text-[#00796b] dark:text-[#80cbc4]"],
-      ["evaluator", "text-[#c2185b] dark:text-[#f48fb1]"],
-      ["rerank", "text-[#0277bd] dark:text-[#81d4fa]"],
-      ["guardrail", "text-[#c62828] dark:text-[#ef9a9a]"],
-      ["span", "text-[#616161] dark:text-[#bdbdbd]"],
-      ["event", "text-[#f57f17] dark:text-[#ffe082]"],
+      ["chat", textStyleFor("generation")],
+      ["text_completion", textStyleFor("generation")],
+      ["generate_content", textStyleFor("generation")],
+      ["embeddings", textStyleFor("embedding")],
+      ["invoke_agent", textStyleFor("agent")],
+      ["create_agent", textStyleFor("agent")],
+      ["execute_tool", textStyleFor("tool")],
+      ["invoke_workflow", textStyleFor("workflow")],
+      ["retrieval", textStyleFor("retriever")],
+      ["chain", textStyleFor("chain")],
+      ["task", textStyleFor("task")],
+      ["evaluator", textStyleFor("evaluator")],
+      ["rerank", textStyleFor("rerank")],
+      ["guardrail", textStyleFor("guardrail")],
+      ["span", textStyleFor("default")],
+      ["event", textStyleFor("event")],
     ])(
       "should map '%s' to '%s'",
       (input, expected) => {
         expect(wrapper.vm.getObservationTypeTextClass(input)).toBe(expected);
       },
     );
+
+    it("should give each observation type its own distinct text token", () => {
+      const styles = ALL_OBSERVATION_TYPES.map((t) =>
+        wrapper.vm.getObservationTypeTextClass(t),
+      );
+      // Same collapse as the node map: 16 inputs → 13 distinct styles.
+      expect(new Set(styles).size).toBe(13);
+    });
   });
 
   // -------------------------------------------------------------------------
diff --git a/web/src/plugins/traces/TraceDAG.vue b/web/src/plugins/traces/TraceDAG.vue
index 8b760fe318..7e1d24951c 100644
--- a/web/src/plugins/traces/TraceDAG.vue
+++ b/web/src/plugins/traces/TraceDAG.vue
@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <div class="w-full h-full min-h-125">
     <div v-if="isLoading" data-test="traces-trace-dag-loading-container" class="flex items-center justify-center flex-col p-6 h-125">
       <OSpinner size="lg" />
-      <div class="mt-3 text-gray-400">{{ t('traces.traceDAG.loading') }}</div>
+      <div class="mt-3 text-sm text-text-secondary">{{ t("traces.loadingTraceDag") }}</div>
     </div>
 
     <div v-else-if="error" data-test="traces-trace-dag-error-message" class="p-3">
@@ -27,10 +27,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     <div v-else-if="!dagData || !dagData.nodes || dagData.nodes.length === 0" data-test="traces-trace-dag-empty-container" class="flex items-center justify-center flex-col p-6 h-125">
       <OIcon name="info" style="width: 48px; height: 48px;" />
-      <div class="mt-3 text-gray-400">{{ t('traces.traceDAG.noData') }}</div>
+      <div class="mt-3 text-text-muted">{{ t('traces.traceDAG.noData') }}</div>
     </div>
 
-    <div v-else data-test="traces-trace-dag-wrapper" class="w-full h-full min-h-150 border border-(--o2-border) rounded relative dark:border-[#444]">
+    <div v-else data-test="traces-trace-dag-wrapper" class="w-full h-full min-h-150 border border-border-default rounded-default relative">
       <VueFlow
         :nodes="nodes"
         :edges="edges"
@@ -39,27 +39,27 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :max-zoom="3"
         fit-view-on-init
         :fit-view-options="{ padding: 0.3, minZoom: 0.3, maxZoom: 0.7 }"
-        class="trace-dag-flow w-full h-full bg-[#fafafa] dark:bg-[#1e1e1e]!"
+        class="trace-dag-flow w-full h-full bg-surface-panel!"
       >
         <Background pattern-color="#aaa" :gap="16" />
         <Controls />
 
         <template #node-custom="{ data }">
           <Handle v-if="data.hasIncoming" type="target" :position="Position.Top"
-            class="w-2 h-2 bg-[#1976d2] border-2 border-white rounded-full shadow-[0_1px_3px_rgba(0,0,0,0.15)]" />
+            class="w-2 h-2 bg-info border-2 border-surface-base rounded-full shadow-[0_1px_3px_rgba(0,0,0,0.15)]" />
           <div
-            class="p-[6px_12px] rounded-md bg-white border-2 border-[#1976d2] min-w-[80px] max-w-[180px] min-h-[28px] shadow-[0_2px_6px_rgba(0,0,0,0.1)] transition-all duration-200 cursor-pointer text-center flex flex-col items-center justify-center hover:shadow-[0_4px_12px_rgba(0,0,0,0.15)] hover:[transform:translateY(-2px)] dark:bg-[#2a2a2a] dark:border-[#64b5f6] dark:text-[var(--o2-border)]"
+            class="p-[6px_12px] rounded-default bg-surface-base border-2 border-info min-w-20 max-w-45 min-h-7 shadow-[0_2px_6px_rgba(0,0,0,0.1)] transition-all duration-200 cursor-pointer text-center flex flex-col items-center justify-center hover:shadow-[0_4px_12px_rgba(0,0,0,0.15)] hover:[transform:translateY(-2px)]"
             :class="[
               {
-                'border-[#c62828]! bg-[#ffebee]! dark:border-[#ef5350]! dark:bg-[#3a1a1a]!': data.span_status === 'ERROR',
-                'border-[#2e7d32]! dark:border-[#66bb6a]!': data.span_status === 'OK' && !data.gen_ai_operation_name,
+                'border-status-negative! bg-status-error-bg!': data.span_status === 'ERROR',
+                'border-status-positive!': data.span_status === 'OK' && !data.gen_ai_operation_name,
               },
               getObservationTypeClass(data.gen_ai_operation_name),
             ]"
             @click="handleNodeClick(data.span_id)"
           >
             <div
-              class="text-[13px] text-[#1976d2] font-semibold break-words max-w-[160px] leading-[1.3] whitespace-nowrap overflow-hidden text-ellipsis dark:text-[#90caf9]"
+              class="text-compact text-info font-semibold break-words max-w-40 leading-[1.3] whitespace-nowrap overflow-hidden text-ellipsis"
               :class="getObservationTypeTextClass(data.gen_ai_operation_name)"
             >{{ data.operation_name }}</div>
             <OTag
@@ -67,11 +67,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               type="spanStatus"
               :value="data.span_status"
               label="ERR"
-              class="text-[10px] h-[14px] mt-0.5 px-1"
+              class="text-3xs h-3.5 mt-0.5 px-1"
             />
           </div>
           <Handle v-if="data.hasOutgoing" type="source" :position="Position.Bottom"
-            class="w-2 h-2 bg-[#1976d2] border-2 border-white rounded-full shadow-[0_1px_3px_rgba(0,0,0,0.15)]" />
+            class="w-2 h-2 bg-info border-2 border-surface-base rounded-full shadow-[0_1px_3px_rgba(0,0,0,0.15)]" />
         </template>
       </VueFlow>
     </div>
@@ -444,38 +444,43 @@ export default defineComponent({
       event: "event",
     };
 
+    // Node border+bg derived from ONE base token per type: border = base,
+    // bg = base@12% over the surface. The base flips light/dark (see dark.css),
+    // so no dark: variant is needed. Full literal classes so Tailwind compiles them.
     const llmNodeStyles: Record<string, string> = {
-      generation: 'border-[#4caf50] bg-[#e8f5e9] dark:border-[#66bb6a] dark:bg-[#1a2e1a]',
-      embedding:  'border-[#2196f3] bg-[#e3f2fd] dark:border-[#64b5f6] dark:bg-[#1a2a3a]',
-      agent:      'border-[#9c27b0] bg-[#f3e5f5] dark:border-[#ce93d8] dark:bg-[#2a1a2e]',
-      tool:       'border-[#ff9800] bg-[#fff3e0] dark:border-[#ffb74d] dark:bg-[#2e2218]',
-      chain:      'border-[#3f51b5] bg-[#e8eaf6] dark:border-[#7986cb] dark:bg-[#1a1a2e]',
-      retriever:  'border-[#00bcd4] bg-[#e0f7fa] dark:border-[#4dd0e1] dark:bg-[#1a2a2e]',
-      task:       'border-[#009688] bg-[#e0f2f1] dark:border-[#4db6ac] dark:bg-[#1a2e2a]',
-      evaluator:  'border-[#e91e63] bg-[#fce4ec] dark:border-[#f48fb1] dark:bg-[#2e1a22]',
-      workflow:   'border-[#673ab7] bg-[#ede7f6] dark:border-[#b39ddb] dark:bg-[#221a2e]',
-      rerank:     'border-[#03a9f4] bg-[#e1f5fe] dark:border-[#4fc3f7] dark:bg-[#1a2a3a]',
-      guardrail:  'border-[#f44336] bg-[#ffebee] dark:border-[#ef5350] dark:bg-[#2e1a1a]',
-      span:       'border-[#9e9e9e] bg-[#f5f5f5] dark:border-[#9e9e9e] dark:bg-[#262626]',
-      event:      'border-[#ffc107] bg-[#fff8e1] dark:border-[#ffd54f] dark:bg-[#2e2a18]',
-      default:    'border-[#9e9e9e] bg-[#fafafa] dark:border-[#9e9e9e] dark:bg-[#262626]',
+      generation: 'border-[var(--color-dag-node-generation)] bg-[color-mix(in_srgb,var(--color-dag-node-generation)_12%,var(--color-surface-base))]',
+      embedding:  'border-[var(--color-dag-node-embedding)] bg-[color-mix(in_srgb,var(--color-dag-node-embedding)_12%,var(--color-surface-base))]',
+      agent:      'border-[var(--color-dag-node-agent)] bg-[color-mix(in_srgb,var(--color-dag-node-agent)_12%,var(--color-surface-base))]',
+      tool:       'border-[var(--color-dag-node-tool)] bg-[color-mix(in_srgb,var(--color-dag-node-tool)_12%,var(--color-surface-base))]',
+      chain:      'border-[var(--color-dag-node-chain)] bg-[color-mix(in_srgb,var(--color-dag-node-chain)_12%,var(--color-surface-base))]',
+      retriever:  'border-[var(--color-dag-node-retriever)] bg-[color-mix(in_srgb,var(--color-dag-node-retriever)_12%,var(--color-surface-base))]',
+      task:       'border-[var(--color-dag-node-task)] bg-[color-mix(in_srgb,var(--color-dag-node-task)_12%,var(--color-surface-base))]',
+      evaluator:  'border-[var(--color-dag-node-evaluator)] bg-[color-mix(in_srgb,var(--color-dag-node-evaluator)_12%,var(--color-surface-base))]',
+      workflow:   'border-[var(--color-dag-node-workflow)] bg-[color-mix(in_srgb,var(--color-dag-node-workflow)_12%,var(--color-surface-base))]',
+      rerank:     'border-[var(--color-dag-node-rerank)] bg-[color-mix(in_srgb,var(--color-dag-node-rerank)_12%,var(--color-surface-base))]',
+      guardrail:  'border-[var(--color-dag-node-guardrail)] bg-[color-mix(in_srgb,var(--color-dag-node-guardrail)_12%,var(--color-surface-base))]',
+      span:       'border-[var(--color-dag-node-default)] bg-[color-mix(in_srgb,var(--color-dag-node-default)_12%,var(--color-surface-base))]',
+      event:      'border-[var(--color-dag-node-event)] bg-[color-mix(in_srgb,var(--color-dag-node-event)_12%,var(--color-surface-base))]',
+      default:    'border-[var(--color-dag-node-default)] bg-[color-mix(in_srgb,var(--color-dag-node-default)_12%,var(--color-surface-base))]',
     };
 
+    // Text = base mixed 70/30 toward the primary text color, which flips light/dark,
+    // so text darkens in light mode and lightens in dark mode from the one base.
     const llmTextStyles: Record<string, string> = {
-      generation: 'text-[#388e3c] dark:text-[#81c784]',
-      embedding:  'text-[#1976d2] dark:text-[#90caf9]',
-      agent:      'text-[#7b1fa2] dark:text-[#ce93d8]',
-      tool:       'text-[#e65100] dark:text-[#ffcc80]',
-      chain:      'text-[#283593] dark:text-[#9fa8da]',
-      retriever:  'text-[#00838f] dark:text-[#80deea]',
-      task:       'text-[#00796b] dark:text-[#80cbc4]',
-      evaluator:  'text-[#c2185b] dark:text-[#f48fb1]',
-      workflow:   'text-[#4527a0] dark:text-[#b39ddb]',
-      rerank:     'text-[#0277bd] dark:text-[#81d4fa]',
-      guardrail:  'text-[#c62828] dark:text-[#ef9a9a]',
-      span:       'text-[#616161] dark:text-[#bdbdbd]',
-      event:      'text-[#f57f17] dark:text-[#ffe082]',
-      default:    'text-[#757575] dark:text-[#bdbdbd]',
+      generation: 'text-[color-mix(in_srgb,var(--color-dag-node-generation)_70%,var(--color-text-heading))]',
+      embedding:  'text-[color-mix(in_srgb,var(--color-dag-node-embedding)_70%,var(--color-text-heading))]',
+      agent:      'text-[color-mix(in_srgb,var(--color-dag-node-agent)_70%,var(--color-text-heading))]',
+      tool:       'text-[color-mix(in_srgb,var(--color-dag-node-tool)_70%,var(--color-text-heading))]',
+      chain:      'text-[color-mix(in_srgb,var(--color-dag-node-chain)_70%,var(--color-text-heading))]',
+      retriever:  'text-[color-mix(in_srgb,var(--color-dag-node-retriever)_70%,var(--color-text-heading))]',
+      task:       'text-[color-mix(in_srgb,var(--color-dag-node-task)_70%,var(--color-text-heading))]',
+      evaluator:  'text-[color-mix(in_srgb,var(--color-dag-node-evaluator)_70%,var(--color-text-heading))]',
+      workflow:   'text-[color-mix(in_srgb,var(--color-dag-node-workflow)_70%,var(--color-text-heading))]',
+      rerank:     'text-[color-mix(in_srgb,var(--color-dag-node-rerank)_70%,var(--color-text-heading))]',
+      guardrail:  'text-[color-mix(in_srgb,var(--color-dag-node-guardrail)_70%,var(--color-text-heading))]',
+      span:       'text-[color-mix(in_srgb,var(--color-dag-node-default)_70%,var(--color-text-heading))]',
+      event:      'text-[color-mix(in_srgb,var(--color-dag-node-event)_70%,var(--color-text-heading))]',
+      default:    'text-[color-mix(in_srgb,var(--color-dag-node-default)_70%,var(--color-text-heading))]',
     };
 
     const getObservationTypeClass = (type: string | null): string => {
@@ -520,9 +525,11 @@ export default defineComponent({
 });
 </script>
 
-<style>
-.body--dark .trace-dag-flow .vue-flow__background {
-  background-color: #1e1e1e !important;
+<style scoped>
+/* keep: lib-override:vue-flow — the library's background layer paints its own
+   surface over the canvas, so it has to be repainted here. The token flips
+   light/dark on its own, which retires the `.dark`-only twin this replaced. */
+.trace-dag-flow :deep(.vue-flow__background) {
+  background-color: var(--color-surface-panel) !important;
 }
-
 </style>
diff --git a/web/src/plugins/traces/TraceDetails.all-missing-fields.spec.ts b/web/src/plugins/traces/TraceDetails.all-missing-fields.spec.ts
index 3340785bf9..8d6c294ab5 100644
--- a/web/src/plugins/traces/TraceDetails.all-missing-fields.spec.ts
+++ b/web/src/plugins/traces/TraceDetails.all-missing-fields.spec.ts
@@ -195,7 +195,6 @@ describe("TraceDetails - All Missing Fields (Real Data)", () => {
         plugins: [i18n, router],
         provide: { store },
         stubs: {
-          "q-resize-observer": true,
           "chart-renderer": {
             template: '<div data-test="chart-renderer">Chart</div>',
             props: ["data", "id"],
diff --git a/web/src/plugins/traces/TraceDetails.missing-span-kind.spec.ts b/web/src/plugins/traces/TraceDetails.missing-span-kind.spec.ts
index e3077efb2d..9c1e1d8548 100644
--- a/web/src/plugins/traces/TraceDetails.missing-span-kind.spec.ts
+++ b/web/src/plugins/traces/TraceDetails.missing-span-kind.spec.ts
@@ -257,7 +257,6 @@ describe("TraceDetails - Missing span_kind Field", () => {
         plugins: [i18n, router],
         provide: { store },
         stubs: {
-          "q-resize-observer": true,
           "chart-renderer": {
             template: '<div data-test="chart-renderer">Chart</div>',
             props: ["data", "id"],
@@ -347,7 +346,7 @@ describe("TraceDetails - Missing span_kind Field", () => {
     });
 
     it("should not display any error messages", () => {
-      const errorMessages = wrapper.findAll(".q-notification");
+      const errorMessages = wrapper.findAll('[role="alert"]');
       expect(errorMessages.length).toBe(0);
     });
 
diff --git a/web/src/plugins/traces/TraceDetails.spec.ts b/web/src/plugins/traces/TraceDetails.spec.ts
index 94337009f0..edeb2f9822 100644
--- a/web/src/plugins/traces/TraceDetails.spec.ts
+++ b/web/src/plugins/traces/TraceDetails.spec.ts
@@ -59,7 +59,7 @@ vi.mock("@/composables/useServiceCorrelation", () => ({
 
 // ---------------------------------------------------------------------------
 // ODrawer stub — replaces the migrated trace filters drawer
-// (q-dialog/q-card -> ODrawer with v-model:open). Renders default + footer
+// (-> ODrawer with v-model:open). Renders default + footer
 // slots and exposes migrated props/emits so we can assert wiring without
 // going through the real Reka portal/teleport.
 // ---------------------------------------------------------------------------
@@ -209,7 +209,6 @@ describe("TraceDetails", () => {
         plugins: [i18n, router],
         provide: { store },
         stubs: {
-          "q-resize-observer": true,
           ODrawer: ODrawerStub,
           CodeQueryEditor: {
             name: "CodeQueryEditor",
@@ -646,7 +645,6 @@ describe("TraceDetails", () => {
             plugins: [i18n, router],
             provide: { store },
             stubs: {
-              "q-resize-observer": true,
               ODrawer: ODrawerStub,
               CodeQueryEditor: {
                 name: "CodeQueryEditor",
@@ -811,7 +809,6 @@ describe("TraceDetails", () => {
           plugins: [i18n, router],
           provide: { store },
           stubs: {
-            "q-resize-observer": true,
             ODrawer: ODrawerStub,
             CodeQueryEditor: {
               name: "CodeQueryEditor",
@@ -954,7 +951,6 @@ describe("TraceDetails", () => {
             plugins: [i18n, router],
             provide: { store },
             stubs: {
-              "q-resize-observer": true,
               ODrawer: ODrawerStub,
               CodeQueryEditor: {
                 name: "CodeQueryEditor",
@@ -1014,7 +1010,6 @@ describe("TraceDetails", () => {
             plugins: [i18n, router],
             provide: { store },
             stubs: {
-              "q-resize-observer": true,
               ODrawer: ODrawerStub,
               CodeQueryEditor: {
                 name: "CodeQueryEditor",
@@ -1085,7 +1080,6 @@ describe("TraceDetails", () => {
             plugins: [i18n, router],
             provide: { store },
             stubs: {
-              "q-resize-observer": true,
               ODrawer: ODrawerStub,
               CodeQueryEditor: {
                 name: "CodeQueryEditor",
@@ -1147,7 +1141,6 @@ describe("TraceDetails", () => {
             plugins: [i18n, router],
             provide: { store },
             stubs: {
-              "q-resize-observer": true,
               ODrawer: ODrawerStub,
               CodeQueryEditor: {
                 name: "CodeQueryEditor",
@@ -1217,7 +1210,6 @@ describe("TraceDetails", () => {
             plugins: [i18n, router],
             provide: { store },
             stubs: {
-              "q-resize-observer": true,
               ODrawer: ODrawerStub,
               CodeQueryEditor: {
                 name: "CodeQueryEditor",
@@ -1308,7 +1300,6 @@ describe("TraceDetails", () => {
           plugins: [i18n, router],
           provide: { store },
           stubs: {
-            "q-resize-observer": true,
             ODrawer: ODrawerStub,
             CodeQueryEditor: {
               name: "CodeQueryEditor",
@@ -1359,7 +1350,6 @@ describe("TraceDetails", () => {
           plugins: [i18n, router],
           provide: { store },
           stubs: {
-            "q-resize-observer": true,
             ODrawer: ODrawerStub,
             CodeQueryEditor: {
               name: "CodeQueryEditor",
@@ -1412,7 +1402,6 @@ describe("TraceDetails", () => {
           plugins: [i18n, router],
           provide: { store },
           stubs: {
-            "q-resize-observer": true,
             ODrawer: ODrawerStub,
             CodeQueryEditor: {
               name: "CodeQueryEditor",
@@ -1749,7 +1738,6 @@ describe("TraceDetails", () => {
           plugins: [i18n, router],
           provide: { store },
           stubs: {
-            "q-resize-observer": true,
             ODrawer: ODrawerStub,
             CodeQueryEditor: {
               name: "CodeQueryEditor",
@@ -1852,7 +1840,6 @@ describe("TraceDetails", () => {
           plugins: [i18n, router],
           provide: { store },
           stubs: {
-            "q-resize-observer": true,
             ODrawer: ODrawerStub,
             CodeQueryEditor: {
               name: "CodeQueryEditor",
@@ -2322,7 +2309,6 @@ describe("TraceDetails", () => {
           plugins: [i18n, router],
           provide: { store },
           stubs: {
-            "q-resize-observer": true,
             ODrawer: ODrawerStub,
             CodeQueryEditor: {
               name: "CodeQueryEditor",
diff --git a/web/src/plugins/traces/TraceDetails.vue b/web/src/plugins/traces/TraceDetails.vue
index e14bd31ee3..5ea4d7a1c1 100644
--- a/web/src/plugins/traces/TraceDetails.vue
+++ b/web/src/plugins/traces/TraceDetails.vue
@@ -28,9 +28,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         )
       "
     >
-      <div v-if="showHeader" class="trace-combined-header-wrapper card-container border-b border-border-default">
-        <!-- Standalone (routed) header: shared AppPageHeader -->
-        <AppPageHeader
+      <div v-if="showHeader" class="trace-combined-header-wrapper bg-card-glass-bg py-[0.2rem] shrink-0">
+        <!-- Standalone (routed) header: shared OPageHeader -->
+        <OPageHeader
           v-if="mode === 'standalone'"
           :title="traceTree[0]?.operationName || t('traces.loadingTrace')"
           title-data-test="trace-details-operation-name"
@@ -42,21 +42,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 }
               : undefined
           "
-          class="px-4"
+          class=""
         >
           <template #subtitle>
             <div
-              class="flex items-center space-x-2 text-[0.6875rem] text-(--o2-text-secondary) whitespace-nowrap"
+              class="flex items-center space-x-2 text-2xs text-text-secondary whitespace-nowrap"
             >
               <span>{{
                 formatTimestamp(traceStartTime, store.state.timezone)
               }}</span>
-              <div class="bg-(--o2-text-3) py-0 w-px h-4" />
+              <div class="bg-text-label py-0 w-px h-4" />
               <span class="mr-1">
                 {{ t("traces.traceId") }}:
                 <span
                   data-test="trace-details-trace-id"
-                  class="text-(--o2-text-primary) font-mono"
+                  class="text-text-body font-mono"
                   :title="effectiveTraceId"
                 >
                   {{ effectiveTraceId }}
@@ -68,19 +68,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 data-test="trace-details-copy-trace-id-btn"
                 name="content-copy"
                 size="xs"
-                class="cursor-pointer hover:text-(--o2-text-primary)"
+                class="cursor-pointer hover:text-text-body"
                 :title="t('traces.copyTraceId')"
                 @click="copyTraceId"
               />
 
               <!-- Session ID (LLM traces) -->
               <template v-if="sessionId">
-                <div class="bg-(--o2-text-3) py-0 w-px h-4" />
+                <div class="bg-text-label py-0 w-px h-4" />
                 <span class="mr-1">
                   {{ t("traces.traceDetails.sessionId") }}:
                   <span
                     data-test="trace-details-session-id"
-                    class="text-(--o2-text-primary) font-mono"
+                    class="text-text-body font-mono"
                     :title="sessionId"
                   >
                     {{ sessionId }}
@@ -90,13 +90,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   data-test="trace-details-copy-session-id-btn"
                   name="content-copy"
                   size="xs"
-                  class="cursor-pointer hover:text-(--o2-text-primary)"
+                  class="cursor-pointer hover:text-text-body"
                   :title="t('traces.traceDetails.copySessionId')"
                   @click="copySessionId"
                 />
               </template>
 
-              <div class="bg-(--o2-text-3) py-0 w-px h-4" />
+              <div class="bg-text-label py-0 w-px h-4" />
               <!-- Span Count Badge -->
               <span class="inline-flex">
                 <OTag
@@ -116,7 +116,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 />
               </span>
 
-              <div class="bg-(--o2-text-3) py-0 w-px h-4" />
+              <div class="bg-text-label py-0 w-px h-4" />
 
               <!-- Error Count Badge -->
               <span class="inline-flex">
@@ -149,7 +149,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <template #icon-left
                 ><OIcon name="filter-alt" size="xs"
               /></template>
-              <span class="text-[0.75rem]">{{ t("traces.viewFilters") }}</span>
+              <span class="text-xs">{{ t("traces.viewFilters") }}</span>
               <OTooltip :content="t('traces.reviewAndApplyFilters')" />
             </OButton>
 
@@ -174,12 +174,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <OTooltip :content="t('common.cancel')" />
             </OButton>
           </template>
-        </AppPageHeader>
+        </OPageHeader>
 
-        <!-- Embedded (logs) header: existing inline header, kept as-is -->
+        <!-- Embedded (logs) header -->
         <header
           v-else
-          class="h-auto py-[0.125rem] flex! items-center justify-between bg-[var(--o2-surface)] pl-1"
+          class="h-auto py-0.5 flex! items-center justify-between bg-surface-base pl-1"
         >
           <div class="flex items-center space-x-4 w-fit!">
             <!-- Back button -->
@@ -196,12 +196,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </OButton>
 
             <div
-              class="flex min-w-0 w-full gap-[0.625rem]! items-center"
+              class="flex min-w-0 w-full gap-2.5! items-center"
             >
               <!-- Operation Name -->
               <div
                 data-test="trace-details-operation-name"
-                class="text-base font-semibold leading-tight text-[var(--o2-text-primary)] truncate min-w-0 max-w-[24rem]!"
+                class="text-base font-semibold leading-tight text-text-heading truncate min-w-0 max-w-96!"
                 :title="traceTree[0]?.operationName"
               >
                 {{ traceTree[0]?.operationName || t("traces.loadingTrace") }}
@@ -210,18 +210,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
               <!-- Service, Timestamp, and Trace ID -->
               <div
-                class="flex items-center space-x-2 text-[11px] text-[var(--o2-text-secondary)] whitespace-nowrap"
+                class="flex items-center space-x-2 text-2xs text-text-secondary whitespace-nowrap"
               >
                 <span>{{ formatTimestamp(traceStartTime, store.state.timezone) }}</span>
                 <div
-                  class="bg-[var(--o2-text-3)] py-[0rem] w-[1px] h-[16px]"
+                  class="bg-text-label py-0 w-px h-4"
                 />
-                <span class="mr-[0.25rem]">
+                <span class="mr-1">
                   {{ t("traces.traceId") }}:
                   <span
                     v-if="mode === 'embedded'"
                     data-test="trace-details-trace-id"
-                    class="text-[var(--o2-text-primary)] font-mono cursor-pointer hover:text-[var(--o2-theme-color)] transition-colors"
+                    class="text-text-body font-mono cursor-pointer hover:text-theme-accent transition-colors"
                     :title="t('traces.openInTraces')"
                     @click="handleExpandToFullView"
                   >
@@ -230,7 +230,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   <span
                     v-else
                     data-test="trace-details-trace-id"
-                    class="text-[var(--o2-text-primary)] font-mono"
+                    class="text-text-body font-mono"
                     :title="effectiveTraceId"
                   >
                     {{ effectiveTraceId }}
@@ -242,7 +242,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   data-test="trace-details-copy-trace-id-btn"
                   name="content-copy"
                   size="xs"
-                  class="cursor-pointer hover:text-[var(--o2-text-primary)]"
+                  class="cursor-pointer hover:text-text-body"
                   :title="t('traces.copyTraceId')"
                   @click="copyTraceId"
                 />
@@ -250,13 +250,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <!-- Session ID (LLM traces) -->
                 <template v-if="sessionId">
                   <div
-                    class="bg-[var(--o2-text-3)] py-[0rem] w-[1px] h-[16px]"
+                    class="bg-text-label py-0 w-px h-4"
                   />
-                  <span class="mr-[0.25rem]">
+                  <span class="mr-1">
                     {{ t("traces.traceDetails.sessionId") }}:
                     <span
                       data-test="trace-details-session-id"
-                      class="text-[var(--o2-text-primary)] font-mono"
+                      class="text-text-body font-mono"
                       :title="sessionId"
                     >
                       {{ sessionId }}
@@ -266,7 +266,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     data-test="trace-details-copy-session-id-btn"
                     name="content-copy"
                     size="xs"
-                    class="cursor-pointer hover:text-[var(--o2-text-primary)]"
+                    class="cursor-pointer hover:text-text-body"
                     :title="t('traces.traceDetails.copySessionId')"
                     @click="copySessionId"
                   />
@@ -276,7 +276,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <OIcon
                   v-if="mode === 'embedded' && showExpandButton"
                   data-test="trace-details-trace-id-open-btn"
-                  class="cursor-pointer hover:text-[var(--o2-theme-color)]"
+                  class="cursor-pointer hover:text-theme-accent"
                   size="xs"
                   name="open-in-new"
                   :title="t('traces.openInTraces')"
@@ -285,7 +285,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </div>
 
               <div
-                class="bg-[var(--o2-text-3)] py-[0rem] w-[1px] h-[16px]"
+                class="bg-text-label py-0 w-px h-4"
               />
               <!-- Span Count Badge -->
               <span class="inline-flex">
@@ -303,7 +303,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </span>
 
               <div
-                class="bg-[var(--o2-text-3)] py-[0rem] w-[1px] h-[16px]"
+                class="bg-text-label py-0 w-px h-4"
               />
 
               <!-- Error Count Badge -->
@@ -339,7 +339,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 ><OIcon name="filter-alt"
 size="xs"
               /></template>
-              <span class="text-[0.75rem]">{{ t("traces.viewFilters") }}</span>
+              <span class="text-xs">{{ t("traces.viewFilters") }}</span>
               <OTooltip :content="t('traces.reviewAndApplyFilters')" />
             </OButton>
 
@@ -381,12 +381,11 @@ size="xs"
         </header>
       </div>
       <div
-        class="card-container overflow-hidden h-full"
-        style="display: flex; flex-direction: column; min-height: 0"
+        class="bg-card-glass-bg overflow-hidden h-full flex flex-col min-h-0"
       >
         <!-- Tabs & Search Bar -->
         <div
-          class="py-0 border-b border-[var(--o2-border)] flex items-center justify-between bg-white bg-[var(--o2-card-bg)]!"
+          class="py-0 border-b border-border-default flex items-center justify-between bg-white bg-card-glass-bg!"
         >
           <div
             class="flex items-center space-x-4 trace-details-view-tabs ml-[0.325rem] py-[0.325rem]"
@@ -443,7 +442,7 @@ size="sm">
             </OToggleGroup>
           </div>
 
-          <div class="flex items-center space-x-2 gap-[0.5rem] pr-[0.325rem]">
+          <div class="flex items-center space-x-2 gap-2 pr-[0.325rem]">
             <!-- Unified Search Input Group -->
             <div
               v-if="
@@ -451,7 +450,7 @@ size="sm">
                 activeTab !== 'map' &&
                 activeTab !== 'thread'
               "
-              class="unified-search-group mr-1! gap-1 flex items-stretch w-fit rounded-md transition-colors duration-200"
+              class="unified-search-group mr-1! gap-1 flex items-stretch w-fit rounded-default transition-colors duration-200"
             >
               <div class="log-stream-search-input">
                 <OSearchInput
@@ -460,21 +459,21 @@ size="sm">
                   :placeholder="t('traces.searchInSpans')"
                   clearable
                   size="sm"
-                  class="text-[12px]!"
+                  class="text-xs!"
                   @update:model-value="handleSearchQueryChange"
                 />
               </div>
               <!-- Search Results Navigation -->
-              <div class="inline-flex items-center bg-transparent px-[0.125rem] [transition:all_0.2s_ease] rounded-[var(--radius-md)] border border-[var(--color-input-border)] dark:hover:border-[var(--o2-theme-color)] h-8.2! py-[0.125px]!">
+              <div class="inline-flex items-center bg-transparent px-0.5 [transition:all_0.2s_ease] rounded-default border border-input-border dark:hover:border-theme-accent h-8.2! py-0!">
                 <div
                   class="flex items-center text-xs font-medium px-1 gap-[0.0625rem] select-none"
                   data-test="trace-details-search-results"
                 >
-                  <span class="text-[var(--o2-text-secondary)]">{{
+                  <span class="text-text-secondary">{{
                     searchResults ? currentIndex + 1 : 0
                   }}</span>
-                  <span class="text-[var(--o2-text-secondary)] mx-[0.125rem]">/</span>
-                  <span class="text-[var(--o2-text-secondary)]">{{ searchResults }}</span>
+                  <span class="text-text-secondary mx-0.5">/</span>
+                  <span class="text-text-secondary">{{ searchResults }}</span>
                 </div>
                 <div class="flex items-center h-full ml-1">
                   <OButton
@@ -487,7 +486,7 @@ size="sm">
                     <OIcon name="keyboard-arrow-up" size="sm" />
                     <OTooltip :content="t('traces.previousMatch')" />
                   </OButton>
-                  <div class="w-px h-[1.125rem] bg-[var(--o2-border-color)] mx-[0.125rem]"></div>
+                  <div class="w-px h-[1.125rem] bg-card-glass-border mx-0.5"></div>
                   <OButton
                     data-test="trace-details-search-next-btn"
                     :disabled="
@@ -527,7 +526,7 @@ size="sm">
                     data-test="trace-details-view-logs-btn"
                     variant="outline"
                     size="sm"
-                    class="text-[0.75rem] h-8! font-normal!"
+                    class="text-xs h-8! font-normal!"
                     :disabled="isViewLogsDisabled"
                     @click="redirectToLogs"
                   >
@@ -573,7 +572,7 @@ size="sm">
             <!-- Waterfall View - show for waterfall tab, or when no LLM spans -->
             <div
               v-if="activeTab === 'waterfall'"
-              class="flex h-full bg-[var(--o2-card-bg)]!"
+              class="flex h-full bg-card-glass-bg!"
             >
               <div
                 class="flex flex-col min-h-0"
@@ -594,13 +593,13 @@ size="sm">
                 />
                 <div
                   ref="traceScrollContainer"
-                  class="relative-position trace-content-scroll overflow-y-auto! overflow-x-hidden! min-h-0! [scrollbar-gutter:stable]!"
+                  class="relative-position trace-content-scroll overflow-y-auto! overflow-x-hidden! min-h-0! [scrollbar-gutter:stable]! flex-1! max-w-full!"
                   :style="{
                     width: isSidebarOpen ? leftWidth + 'px' : '100%',
                   }"
                 >
                   <div
-                    class="pt-0 pb-0 mb-0 min-h-full bg-(--o2-card-bg)!"
+                    class="pt-0 pb-0 mb-0 min-h-full bg-card-glass-bg!"
                     data-test="trace-details-tree-container"
                   >
                     <div class="position-relative">
@@ -608,13 +607,9 @@ size="sm">
                         data-test="trace-details-resizer"
                         :style="{
                           left: `${leftWidth}px`,
-                          backgroundColor:
-                            store.state.theme === 'dark'
-                              ? '#3c3c3c'
-                              : '#ececec',
                           zIndex: 999,
                         }"
-                        class="absolute resize h-full cursor-col-resize top-0 w-[1px]"
+                        class="absolute resize h-full cursor-col-resize top-0 w-px bg-border-default hover:bg-accent rounded-default transition-colors duration-200 after:content-[''] after:absolute after:h-full after:-left-2.5 after:-right-2.5 after:top-0 after:bottom-0 after:z-999"
                         @mousedown="startResize"
                       />
                       <trace-tree
@@ -627,7 +622,7 @@ size="sm">
                         :leftWidth="leftWidth"
                         :scrollContainer="traceScrollContainer"
                         ref="traceTreeRef"
-                        class="bg-[var(--o2-card-bg)]!"
+                        class="bg-card-glass-bg!"
                         :search-query="searchQuery"
                         :spanList="spanList"
                         :selectedSpanId="selectedSpanId"
@@ -652,7 +647,7 @@ size="sm">
               </div>
               <div
                 v-if="isSidebarOpen && (selectedSpanId || showTraceDetails)"
-                class="shrink-0 overflow-y-auto overflow-x-hidden min-h-0 transition-all duration-300 border-l border-l-solid border-l-(--o2-border-color)"
+                class="shrink-0 overflow-y-auto overflow-x-hidden min-h-0 transition-all duration-300 border-l border-l-solid border-l-card-glass-border"
                 :class="isTimelineExpanded ? '' : 'full'"
                 :style="{
                   width: `calc(100% - ${leftWidth}px)`,
@@ -682,7 +677,7 @@ size="sm">
             <!-- DAG View - only for LLM traces -->
             <div
               v-if="hasLLMSpans && activeTab === 'dag'"
-              style="display: flex; flex: 1; min-height: 0"
+              class="flex flex-1 min-h-0"
             >
               <div
                 class="h-[calc(100vh-200px)] p-4 min-w-0 overflow-hidden"
@@ -711,10 +706,10 @@ size="sm">
               <!-- Resizable divider -->
               <div
                 v-if="isSidebarOpen && (selectedSpanId || showTraceDetails)"
-                class="dag-resizer w-2 cursor-col-resize flex items-center justify-center shrink-0 relative z-10"
+                class="dag-resizer group w-2 cursor-col-resize flex items-center justify-center shrink-0 relative z-10"
                 @mousedown="startDagResize"
               >
-                <div class="dag-resizer-line w-0.75 h-full bg-(--o2-border) rounded transition-colors duration-200"></div>
+                <div class="dag-resizer-line w-0.75 h-full bg-border-default group-hover:bg-accent rounded-default transition-colors duration-200"></div>
               </div>
               <div
                 v-if="isSidebarOpen && (selectedSpanId || showTraceDetails)"
@@ -748,8 +743,7 @@ size="sm">
             <!-- Flame Graph View -->
             <div
               v-if="activeTab === 'flame-graph'"
-              style="display: flex; flex: 1; min-height: 0"
-              class="w-full bg-[var(--o2-card-bg)]!"
+              class="w-full bg-card-glass-bg! flex flex-1 min-h-0"
             >
               <FlameGraphView
                 :spans="flatSpans"
@@ -779,8 +773,7 @@ size="sm">
             -->
             <div
               v-if="config.showLLMUI !== 'false' && activeTab === 'thread'"
-              style="display: flex; flex: 1; min-height: 0"
-              class="w-full bg-[var(--o2-card-bg)]!"
+              class="w-full bg-card-glass-bg! flex flex-1 min-h-0"
             >
               <div
                 class="thread-left-panel"
@@ -802,8 +795,8 @@ size="sm">
               </div>
               <div
                 v-if="isSidebarOpen && (selectedSpanId || showTraceDetails)"
-                class="border-l border-l-solid border-l-[var(--o2-border-color)]"
-                style="width: 40%; min-width: 300px; height: 100%; overflow: hidden;"
+                class="border-l border-l-solid border-l-card-glass-border h-full overflow-hidden"
+                style="width: 40%; min-width: 300px;"
               >
                 <trace-details-sidebar
                   data-test="trace-details-thread-sidebar"
@@ -829,64 +822,46 @@ size="sm">
             <!-- Spans Table View Placeholder -->
             <div
               v-if="activeTab === 'spans'"
-              style="
-                display: flex;
-                flex: 1;
-                min-height: 0;
-                align-items: center;
-                justify-content: center;
-              "
+              class="flex flex-1 min-h-0 items-center justify-center"
             >
               <div
+                class="text-center p-10"
                 style="
-                  text-align: center;
-                  color: var(--o2-text-secondary);
-                  padding: 40px;
+                  color: var(--color-text-secondary);
                 "
               >
                 <OIcon
                   name="table-chart"
-                  style="margin-bottom: 16px; width: 48px; height: 48px;"
+                  class="mb-4"
+                  style="width: 48px; height: 48px;"
                  />
                 <div
-                  style="font-size: 16px; font-weight: 600; margin-bottom: 8px"
+                  class="font-semibold mb-2"
+                  style="font-size: var(--text-base)"
                 >
                   {{ t("traces.spansTableView") }}
                 </div>
-                <div style="font-size: 14px">{{ t("traces.comingSoon") }}</div>
+                <div style="font-size: var(--text-sm)">{{ t("traces.comingSoon") }}</div>
               </div>
             </div>
 
             <!-- Map View with Pattern/Span Toggle -->
             <div
               v-if="activeTab === 'map'"
-              style="
-                display: flex;
-                flex: 1;
-                min-height: 0;
-                flex-direction: column;
-              "
-              class="w-full h-full"
+              class="w-full h-full flex flex-1 min-h-0 flex-col"
             >
               <!-- Chart Container -->
               <div
-                style="
-                  display: flex;
-                  flex: 1;
-                  min-height: 0;
-                  align-items: center;
-                  justify-content: center;
-                "
+                class="flex flex-1 min-h-0 items-center justify-center"
               >
                 <div
-                  style="text-align: center"
-                  class="w-full h-full p-[0.625rem]"
+                  class="w-full h-full p-2.5 text-center"
                 >
                   <ChartRenderer
                     ref="chartRendererRef"
                     data-test="trace-details-service-map-chart"
                     :data="traceServiceMapChartOptions"
-                    class="trace-chart-height h-full! w-full!"
+                    class="trace-chart-height h-50! min-h-50! w-full!"
                   />
                 </div>
               </div>
@@ -924,7 +899,7 @@ size="sm">
       @click:secondary="showFilterPopover = false"
       @click:primary="applyAndViewTraces"
     >
-      <div class="flex-1 border border-[var(--o2-border)] rounded">
+      <div class="flex-1 border border-border-default rounded-default">
         <CodeQueryEditor
           v-model:query="localEditorValue"
           language="sql"
@@ -951,7 +926,7 @@ import {
 } from "vue";
 import { cloneDeep } from "lodash-es";
 import ShareButton from "@/components/common/ShareButton.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageHeader from "@/lib/core/PageHeader/OPageHeader.vue";
 import OTag from "@/lib/core/Badge/OTag.vue";
 import useTraces from "@/composables/useTraces";
 import TraceDetailsSidebar from "./TraceDetailsSidebar.vue";
@@ -959,6 +934,7 @@ import TraceTree from "./TraceTree.vue";
 import TraceDAG from "./TraceDAG.vue";
 import TraceHeader from "./TraceHeader.vue";
 import { useStore } from "vuex";
+import useTheme from "@/composables/useTheme";
 import { createTracesContextProvider } from "@/composables/contextProviders/tracesContextProvider";
 import { contextRegistry } from "@/composables/contextProviders";
 import {
@@ -1116,7 +1092,7 @@ export default defineComponent({
   },
   components: {
     ShareButton,
-    AppPageHeader,
+    OPageHeader,
     OTag,
     TraceDetailsSidebar,
     TraceTree,
@@ -1194,7 +1170,7 @@ export default defineComponent({
 
     // Pattern View - new functionality
     const consolidatedPatterns = ref(new Map());
-    const isDarkMode = computed(() => store.state.theme === 'dark');
+    const { isDark: isDarkMode } = useTheme();
 
     // Set up pattern tree composable and visualization engine
     const { generateEChartsOptions } = createTreeVisualizationEngine();
@@ -1539,7 +1515,7 @@ export default defineComponent({
       return Math.min(...spans.map((span: any) => span.start_time));
     });
 
-    // Tabs configuration matching TraceDetailsV2 — inlined into template
+    // Tabs configuration
     const traceTabs = computed(() => {
       const tabs = [
         { label: "Waterfall", value: "waterfall" },
@@ -1668,7 +1644,7 @@ export default defineComponent({
     
     const backgroundStyle = computed(() => {
       return {
-        background: store.state.theme === "dark" ? "#181a1b" : "#ffffff",
+        background: "var(--color-surface-base)",
       };
     });
 
@@ -2520,7 +2496,7 @@ export default defineComponent({
       updateHeight();
     };
 
-    // Resizers are now handled by useResizer composable
+    // Resizers are handled by useResizer composable
 
     const toggleTimeline = () => {
       isTimelineExpanded.value = !isTimelineExpanded.value;
@@ -2925,81 +2901,21 @@ export default defineComponent({
 });
 </script>
 
-<style>
-.dag-resizer:hover .dag-resizer-line {
-  background-color: var(--o2-theme-color, #1976d2);
-}
-
-body.body--dark .dag-resizer-line {
-  background-color: #3c3c3c;
-}
-
-body.body--dark .dag-resizer:hover .dag-resizer-line {
-  background-color: #90caf9;
-}
-</style>
-
-<style>
-/* Prevent parent containers from adding scrollbars */
-body:has(.trace-details),
-html:has(.trace-details) {
+<style scoped>
+/* keep(complex-state): body/html :has() overflow lock reaches ancestor DOM the component doesn't own,
+   and the dark-only unified-search-group color states can't be tokenized as
+   utilities. */
+:global(body:has(.trace-details)),
+:global(html:has(.trace-details)) {
   overflow: hidden !important;
 }
 
-.histogram-container .trace-content-scroll {
-  flex: 1 !important;
-  max-width: 100% !important;
+.dark .unified-search-group {
+  background-color: var(--color-surface-base);
 }
 
-.histogram-container-full .trace-content-scroll {
-  flex: 1 !important;
-  max-width: 100% !important;
-}
-
-.trace-content-scroll {
-  overflow-y: auto !important;
-  overflow-x: hidden !important;
-  min-height: 0 !important;
-  scrollbar-gutter: stable !important;
-}
-
-.trace-details .trace-combined-header-wrapper {
-  padding: 0.2rem 0rem;
-  flex-shrink: 0;
-}
-
-.trace-details .trace-chart-height {
-  height: 12.5rem !important;
-  min-height: 12.5rem !important;
-}
-
-/* Unified Search Group - input and navigation as one element */
-.unified-search-group {
-  display: flex;
-  align-items: stretch;
-  width: fit-content;
-  border-radius: var(--radius-md);
-  transition: border-color 0.2s ease;
-}
-
-/* Dark mode support */
-body.body--dark .unified-search-group {
-  background-color: var(--o2-dark-page-bg);
-}
-
-body.body--dark .unified-search-group:hover,
-body.body--dark .unified-search-group:focus-within {
-  border-color: var(--o2-theme-color);
-}
-
-.resize::after {
-  content: " ";
-  position: absolute;
-  height: 100%;
-  left: -10px;
-  right: -10px;
-  top: 0;
-  bottom: 0;
-  z-index: 999;
+.dark .unified-search-group:hover,
+.dark .unified-search-group:focus-within {
+  border-color: var(--color-theme-accent);
 }
 </style>
diff --git a/web/src/plugins/traces/TraceDetailsSidebar.spec.ts b/web/src/plugins/traces/TraceDetailsSidebar.spec.ts
index 16cbed6d3b..8ba0dd601d 100644
--- a/web/src/plugins/traces/TraceDetailsSidebar.spec.ts
+++ b/web/src/plugins/traces/TraceDetailsSidebar.spec.ts
@@ -246,18 +246,6 @@ const traceErrorTabStub = {
 
 // Base stubs shared across all mount calls in this spec file
 const baseStubs = {
-  "q-resize-observer": true,
-  "q-virtual-scroll": {
-    template: `
-      <div>
-        <slot name="before"></slot>
-        <div v-for="(item, index) in items" :key="index">
-          <slot :item="item" :index="index"></slot>
-        </div>
-      </div>
-    `,
-    props: ["items"],
-  },
   TraceErrorTab: traceErrorTabStub,
   ...tabStubs,
 };
@@ -716,7 +704,7 @@ describe("TraceDetailsSidebar", async () => {
         '[data-test="trace-details-sidebar-no-events"]',
       );
       expect(noEventsMsg.exists()).toBe(true);
-      expect(noEventsMsg.text()).toContain("No events present for this span");
+      expect(noEventsMsg.text()).toContain("No events for this span");
     });
 
     describe("When events exist", () => {
@@ -1603,7 +1591,7 @@ describe("TraceDetailsSidebar", async () => {
 
   describe("apply-filter-immediately emit — getFilterValue called at the emit site", () => {
     // This describe block mounts a separate wrapper with JsonPreview stubbed to render
-    // its #field-dropdown slot directly in the DOM (no q-btn-dropdown popup layer).
+    // its #field-dropdown slot directly in the DOM (no popup layer).
     // This lets us click the filter item without needing popup mechanics.
     //
     // start_time and end_time are provided as nanosecond strings to reflect the real
@@ -1632,7 +1620,7 @@ describe("TraceDetailsSidebar", async () => {
           stubs: {
             ...baseStubs,
             // Stub JsonPreview to render its #field-dropdown slot inline for each key
-            // in `value`, so the q-item inside is immediately clickable without a popup.
+            // in `value`, so the dropdown item inside is immediately clickable without a popup.
             JsonPreview: {
               props: [
                 "value",
@@ -1828,7 +1816,6 @@ describe("TraceDetailsSidebar", async () => {
               ],
             },
             TenstackTable: true,
-            "q-expansion-item": true,
             CodemirrorEditor: true,
             CodeQueryEditor: true,
           },
diff --git a/web/src/plugins/traces/TraceDetailsSidebar.vue b/web/src/plugins/traces/TraceDetailsSidebar.vue
index 1279185ed5..b3e6c14bd5 100644
--- a/web/src/plugins/traces/TraceDetailsSidebar.vue
+++ b/web/src/plugins/traces/TraceDetailsSidebar.vue
@@ -15,15 +15,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="flex flex-col h-full">
+  <div class="trace-details-sidebar flex flex-col h-full">
     <div
-      class="flex justify-start items-center pl-3 pr-2 h-[2rem] border-b border-solid border-b-[var(--o2-border-color)] bg-surface-panel"
+      class="flex justify-start items-center px-page-edge h-8 border-b border-solid border-b-card-glass-border bg-surface-panel"
       data-test="trace-details-sidebar-header"
     >
       <div
         :title="span.operation_name"
-        :style="{ width: 'calc(100% - 24px)' }"
-        class="pb-0 pl-[0.25rem] truncate flex items-center"
+        class="w-[calc(100%-1.5rem)] pb-0 pl-1 truncate flex items-center"
         data-test="trace-details-sidebar-header-operation-name"
       >
         <!-- Status Code Badge -->
@@ -35,7 +34,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <OIcon
             name="error"
             size="sm"
-            class="mr-1 text-[var(--o2-status-error-text)]!"
+            class="mr-1 text-status-error-text!"
           />
         </span>
         <!-- Observation Type Badge (for LLM spans) -->
@@ -60,33 +59,30 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </OButton>
     </div>
     <div
-      class="trace-details-toolbar-container bg-[rgba(248,249,250,0.5)] whitespace-nowrap"
+      class="trace-details-toolbar-container bg-surface-panel/50 whitespace-nowrap"
       data-test="trace-details-sidebar-header-toolbar"
     >
       <!-- Row 1: Trace Details -->
-      <div
-        class="flex items-center justify-between p-1"
-        style="overflow-x: auto; flex-wrap: nowrap"
-      >
-        <div class="flex items-center" style="flex-wrap: nowrap">
+      <div class="flex items-center justify-between p-1 overflow-x-auto flex-nowrap">
+        <div class="flex items-center flex-nowrap">
           <!-- Service Badge -->
           <OTag
             type="metricChip"
-            class="toolbar-chip service-chip mr-[0.325rem]"
+            class="text-2xs h-5.5 px-1.5 mr-[0.325rem] bg-surface-base border border-solid border-border-default border-l-[0.1875rem] border-l-badge-blue-ol-border shrink-0 transition-all duration-200 hover:-translate-y-px hover:bg-surface-panel"
             :title="span.service_name"
             data-test="trace-details-sidebar-header-toolbar-service"
           >
             <template #icon>
               <img
                 :src="serviceIconUrl"
-                class="w-[0.875rem] h-[0.875rem] shrink-0"
+                class="w-3.5 h-3.5 shrink-0"
                 aria-hidden="true"
                 alt=""
               />
             </template>
-            <span class="chip-label">{{ t('traces.traceDetailsSidebar.service') }}</span>
+            <span class="text-3xs font-medium mr-0.75 text-text-secondary">{{ t('traces.traceDetailsSidebar.service') }}</span>
             <span
-              class="chip-value"
+              class="text-3xs font-semibold text-text-body"
               data-test="trace-details-sidebar-header-toolbar-service-name"
             >
               {{ span.service_name }}
@@ -96,51 +92,51 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- Duration Badge -->
           <OTag
             type="metricChip"
-            class="toolbar-chip duration-chip mr-[0.325rem]"
+            class="text-2xs h-5.5 px-1.5 mr-[0.325rem] bg-surface-base border border-solid border-border-default border-l-[0.1875rem] border-l-badge-indigo-ol-border shrink-0 transition-all duration-200 hover:-translate-y-px hover:bg-surface-panel"
             :title="getDuration"
             data-test="trace-details-sidebar-header-toolbar-duration"
           >
             <template #icon><OIcon name="schedule" size="xs" /></template>
-            <span class="chip-label">{{ t('traces.traceDetailsSidebar.duration') }}</span>
-            <span class="chip-value">{{ getDuration }}</span>
+            <span class="text-3xs font-medium mr-0.75 text-text-secondary">{{ t('traces.traceDetailsSidebar.duration') }}</span>
+            <span class="text-3xs font-semibold text-text-body">{{ getDuration }}</span>
           </OTag>
 
           <!-- TTFT Badge -->
           <OTag
             v-if="getTTFT"
             type="metricChip"
-            class="toolbar-chip ttft-chip mr-[0.325rem]"
+            class="text-2xs h-5.5 px-1.5 mr-[0.325rem] bg-surface-base border border-solid border-border-default border-l-[0.1875rem] border-l-badge-purple-ol-border shrink-0 transition-all duration-200 hover:-translate-y-px hover:bg-surface-panel"
             :title="getTTFT"
             data-test="trace-details-sidebar-header-toolbar-ttft"
           >
             <template #icon><OIcon name="speed" size="xs" /></template>
-            <span class="chip-label">TTFT</span>
-            <span class="chip-value">{{ getTTFT }}</span>
+            <span class="text-3xs font-medium mr-0.75 text-text-secondary">TTFT</span>
+            <span class="text-3xs font-semibold text-text-body">{{ getTTFT }}</span>
           </OTag>
 
           <!-- Start Time Badge -->
           <OTag
             type="metricChip"
-            class="toolbar-chip time-chip mr-[0.325rem]"
+            class="text-2xs h-5.5 px-1.5 mr-[0.325rem] bg-surface-base border border-solid border-border-default border-l-[0.1875rem] border-l-badge-amber-ol-border shrink-0 transition-all duration-200 hover:-translate-y-px hover:bg-surface-panel"
             :title="getStartTime"
             data-test="trace-details-sidebar-header-toolbar-start-time"
           >
             <template #icon><OIcon name="access-time" size="xs" /></template>
-            <span class="chip-label">{{ t('traces.traceDetailsSidebar.start') }}</span>
-            <span class="chip-value">{{ getStartTime }}</span>
+            <span class="text-3xs font-medium mr-0.75 text-text-secondary">{{ t('traces.traceDetailsSidebar.start') }}</span>
+            <span class="text-3xs font-semibold text-text-body">{{ getStartTime }}</span>
           </OTag>
 
           <!-- Resend Count Badge -->
           <OTag
             v-if="spanHttpResendCount"
             type="metricChip"
-            class="toolbar-chip resend-chip mr-[0.325rem]"
+            class="text-2xs h-5.5 px-1.5 mr-[0.325rem] bg-surface-base border border-solid border-border-default shrink-0 transition-all duration-200 hover:-translate-y-px hover:bg-surface-panel"
             :title="t('traces.traceDetailsSidebar.requestResent', { count: spanHttpResendCount })"
             data-test="trace-details-sidebar-header-toolbar-resend-count"
           >
             <template #icon><OIcon name="replay" size="xs" /></template>
-            <span class="chip-label">{{ t('traces.traceDetailsSidebar.resends') }}</span>
-            <span class="chip-value">{{ spanHttpResendCount }}</span>
+            <span class="text-3xs font-medium mr-0.75 text-text-secondary">{{ t('traces.traceDetailsSidebar.resends') }}</span>
+            <span class="text-3xs font-semibold text-text-body">{{ spanHttpResendCount }}</span>
           </OTag>
         </div>
 
@@ -149,17 +145,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <OTag
             type="metricChip"
             clickable
-            class="toolbar-chip span-id-chip mr-[0.325rem]"
+            class="group text-2xs h-5.5 px-1.5 mr-[0.325rem] bg-surface-base border border-solid border-border-default border-l-[0.1875rem] border-l-badge-teal-ol-border shrink-0 cursor-pointer transition-all duration-200 hover:-translate-y-px hover:bg-surface-panel"
             :title="t('traces.traceDetailsSidebar.spanIdTitle', { id: span.span_id })"
             @click="copySpanId"
             data-test="trace-details-sidebar-header-toolbar-span-id"
           >
             <template #icon><OIcon name="tag" size="xs" /></template>
-            <span class="chip-value">{{ span.span_id }}</span>
+            <span class="text-3xs font-semibold text-text-body">{{ span.span_id }}</span>
             <OIcon
               name="content-copy"
               size="xs"
-              class="ml-1 copy-icon"
+              class="ml-1 opacity-60 transition-opacity duration-200 group-hover:opacity-100"
               data-test="trace-details-sidebar-header-toolbar-span-id-copy-icon"
             />
           </OTag>
@@ -174,7 +170,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <OButton
                 variant="outline"
                 size="xs"
-                class="h-full text-[0.75rem]!"
+                class="h-full text-xs!"
                 :disabled="isViewLogsDisabled"
                 :loading="config.isEnterprise === 'true' && correlationLoading"
                 @click.stop="viewSpanLogs"
@@ -191,46 +187,41 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <!-- Row 2: LLM Metrics (conditional) -->
       <div
         v-if="isLLMSpan && llmMetrics && span.gen_ai_response_model"
-        class="flex items-center justify-between p-1 llm-metrics-row"
-        style="
-          overflow-x: auto;
-          flex-wrap: nowrap;
-          border-top: 1px solid #e9ecef;
-        "
+        class="flex items-center justify-between p-1 llm-metrics-row overflow-x-auto flex-nowrap border-t border-solid border-border-default"
       >
-        <div class="flex items-center" style="flex-wrap: nowrap">
+        <div class="flex items-center flex-nowrap">
           <!-- Model Chip -->
           <OTag
             type="metricChip"
             icon="psychology"
-            class="llm-chip model-chip"
+            class="text-3xs h-5 px-1.5 bg-surface-base border border-solid border-border-default border-l-[0.1875rem] border-l-badge-purple-ol-border shrink-0 transition-all duration-200 hover:-translate-y-px"
             :title="span.gen_ai_response_model"
           >
-            <span class="chip-value font-bold">{{ span.gen_ai_response_model }}</span>
+            <span class="text-3xs font-semibold text-badge-purple-ol-text">{{ span.gen_ai_response_model }}</span>
           </OTag>
 
           <!-- Token Usage Group -->
-          <div class="tokens-group">
+          <div class="inline-flex gap-0.75 shrink-0">
             <!-- Input Tokens -->
             <OTag
               type="metricChip"
-              class="llm-chip token-chip input-token-chip"
+              class="text-3xs h-5 px-1.5 min-w-15 justify-center bg-surface-base border border-solid border-border-default border-l-[0.1875rem] border-l-badge-blue-ol-border text-badge-blue-ol-text shrink-0 transition-all duration-200 hover:-translate-y-px"
               :title="t('traces.traceDetailsSidebar.inputTokens')"
             >
               <template #icon><OIcon name="arrow-upward" size="xs" /></template>
-              <span class="chip-label">{{ t('traces.traceDetailsSidebar.in') }}</span>
-              <span class="chip-value">{{ llmMetrics.usage.input }}</span>
+              <span class="text-3xs font-medium mr-0.5">{{ t('traces.traceDetailsSidebar.in') }}</span>
+              <span class="text-3xs font-medium">{{ llmMetrics.usage.input }}</span>
             </OTag>
 
             <!-- Output Tokens -->
             <OTag
               type="metricChip"
-              class="llm-chip token-chip output-token-chip"
+              class="text-3xs h-5 px-1.5 min-w-15 justify-center bg-surface-base border border-solid border-border-default border-l-[0.1875rem] border-l-badge-success-ol-border text-badge-success-ol-text shrink-0 transition-all duration-200 hover:-translate-y-px"
               :title="t('traces.traceDetailsSidebar.outputTokens')"
             >
               <template #icon><OIcon name="arrow-downward" size="xs" /></template>
-              <span class="chip-label">{{ t('traces.traceDetailsSidebar.out') }}</span>
-              <span class="chip-value">{{ llmMetrics.usage.output }}</span>
+              <span class="text-3xs font-medium mr-0.5">{{ t('traces.traceDetailsSidebar.out') }}</span>
+              <span class="text-3xs font-medium">{{ llmMetrics.usage.output }}</span>
             </OTag>
           </div>
 
@@ -238,10 +229,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <OTag
             type="metricChip"
             icon="attach-money"
-            class="llm-chip cost-chip"
+            class="text-3xs h-5 px-1.5 bg-surface-base border border-solid border-border-default border-l-[0.1875rem] border-l-badge-orange-ol-border shrink-0 transition-all duration-200 hover:-translate-y-px"
             :title="t('traces.traceDetailsSidebar.totalCost')"
           >
-            <span class="chip-value font-bold"
+            <span class="text-3xs font-semibold text-badge-orange-ol-text"
               >${{ Number(llmMetrics.cost.total).toFixed(5) }}</span
             >
           </OTag>
@@ -252,13 +243,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <OTag
             v-if="span.gen_ai_provider_name"
             type="metricChip"
-            class="provider-badge"
+            class="text-3xs font-semibold px-2 py-0.75 bg-badge-blue-solid-bg text-badge-blue-solid-text rounded-full uppercase tracking-wide shrink-0"
           >{{ span.gen_ai_provider_name }}</OTag>
         </div>
       </div>
     </div>
 
-    <div class="font-bold mx-2 span_details_tabs ">
+    <div class="px-page-edge span_details_tabs">
       <OTabs
         v-model="activeTab"
         dense
@@ -270,24 +261,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           v-if="isLLMSpan"
           name="preview"
           :label="t('traces.traceDetailsSidebar.preview')"
-          style="text-transform: capitalize"
           data-test="trace-details-sidebar-tabs-preview"
-                    class="font-normal!"
+                    class="font-normal! capitalize"
 
         />
 
         <OTab
           name="attributes"
           :label="t('common.attributes')"
-          style="text-transform: capitalize"
           data-test="trace-details-sidebar-tabs-attributes"
-          class="font-normal!"
+          class="font-normal! capitalize"
         />
         <OTab
           name="error"
-          style="text-transform: capitalize"
           data-test="trace-details-sidebar-tabs-error"
-          class="font-normal! gap-1!"
+          class="font-normal! gap-1! capitalize"
         >
           {{ t('common.error') }}
           <OTag
@@ -302,24 +290,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           v-if="hasDbSpan"
           name="database"
           :label="t('common.db')"
-          style="text-transform: capitalize"
-          class="font-normal!"
+          class="font-normal! capitalize"
           data-test="trace-details-sidebar-tabs-database"
         />
         <OTab
           name="events"
           :label="t('common.events')"
-          style="text-transform: capitalize"
           data-test="trace-details-sidebar-tabs-events"
-                    class="font-normal!"
+                    class="font-normal! capitalize"
 
         />
         <OTab
           name="links"
           :label="t('common.links')"
-          style="text-transform: capitalize"
           data-test="trace-details-sidebar-tabs-links"
-          class="font-normal!"
+          class="font-normal! capitalize"
 
         />
         <!-- Correlation Tabs (only visible when service streams enabled and enterprise license) -->
@@ -327,23 +312,28 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           v-if="serviceStreamsEnabled && config.isEnterprise === 'true'"
           name="correlated-logs"
           :label="t('correlation.correlatedLogs')"
-          style="text-transform: capitalize"
           data-test="trace-details-sidebar-tabs-correlated-logs"
-          class="font-normal!"
+          class="font-normal! capitalize"
 
         />
         <OTab
           v-if="serviceStreamsEnabled && config.isEnterprise === 'true'"
           name="correlated-metrics"
           :label="t('correlation.correlatedMetrics')"
-          style="text-transform: capitalize"
           data-test="trace-details-sidebar-tabs-correlated-metrics"
-          class="font-normal!"
+          class="font-normal! capitalize"
         />
       </OTabs>
     </div>
     <OSeparator class="w-full" />
-    <div class="span_details_tab-panels h-[calc(100%-6rem)] overflow-hidden p-2">
+    <div
+      class="span_details_tab-panels h-[calc(100%-6rem)] overflow-hidden"
+      :class="
+        activeTab === 'correlated-logs' || activeTab === 'correlated-metrics'
+          ? ''
+          : 'px-page-edge py-2'
+      "
+    >
       <OTabPanels v-model="activeTab"
 grow
 class="h-full overflow-y-auto">
@@ -357,13 +347,12 @@ class="h-full overflow-y-auto">
             <!-- Input and Output Side by Side -->
             <div
               class="flex io-container w-full! h-full!"
-              :class="{ 'io-container-dark': isDarkMode }"
               ref="ioContainerRef"
             >
               <!-- Input Section -->
-              <div class="w-1/2 io-section pr-[0.5rem]">
+              <div class="w-1/2 io-section basis-[calc(50%-0.4rem)] grow-0 shrink-0 flex flex-col h-full pr-2">
                 <div
-                  class="section-label font-bold mb-1 flex items-center justify-between"
+                  class="section-label font-bold mb-2 flex items-center justify-between text-text-heading text-sm"
                 >
                   <div>{{ t('traces.traceDetailsSidebar.input') }}</div>
                   <div class="flex items-center gap-1">
@@ -391,7 +380,7 @@ class="h-full overflow-y-auto">
                     </OButton>
                   </div>
                 </div>
-                <div class="llm-content-box">
+                <div class="llm-content-box flex-1 h-full max-h-[calc(100%-1.625rem)] border border-solid border-card-glass-border rounded-default p-3 overflow-y-auto overflow-x-hidden bg-code-bg">
                   <!-- System Instructions (when available) -->
                   <div v-if="parsedSystemInstructions" class="mb-3">
                     <OCollapsible
@@ -399,7 +388,7 @@ class="h-full overflow-y-auto">
                       icon="settings"
                       :label="t('traces.traceDetailsSidebar.systemInstructions')"
                     >
-                      <div class="p-2 bg-[var(--o2-code-bg)]">
+                      <div class="p-2 bg-code-bg">
                         <LLMContentRenderer
                           :content="JSON.stringify([{ role: 'system', content: parsedSystemInstructions }])"
                           :observation-type="span.gen_ai_operation_name"
@@ -411,7 +400,7 @@ class="h-full overflow-y-auto">
                   </div>
                   <div
                     v-if="!hasContent(span.gen_ai_input_messages) && !parsedSystemInstructions"
-                    class="no-data-message"
+                    class="text-text-secondary italic text-center p-8 text-sm"
                   >
                     {{ t('traces.traceDetailsSidebar.noDataAvailable') }}
 </div>
@@ -428,9 +417,9 @@ class="h-full overflow-y-auto">
               </div>
 
               <!-- Output Section -->
-              <div class="w-1/2 io-section">
+              <div class="w-1/2 io-section basis-[calc(50%-0.4rem)] grow-0 shrink-0 flex flex-col h-full">
                 <div
-                  class="section-label font-bold mb-1 flex items-center justify-between"
+                  class="section-label font-bold mb-2 flex items-center justify-between text-text-heading text-sm"
                 >
                   <div>{{ t('traces.traceDetailsSidebar.output') }}</div>
                   <div class="flex items-center gap-1">
@@ -458,10 +447,10 @@ class="h-full overflow-y-auto">
                     </OButton>
                   </div>
                 </div>
-                <div class="llm-content-box">
+                <div class="llm-content-box flex-1 h-full max-h-[calc(100%-1.625rem)] border border-solid border-card-glass-border rounded-default p-3 overflow-y-auto overflow-x-hidden bg-code-bg">
                   <div
                     v-if="!hasContent(span.gen_ai_output_messages)"
-                    class="no-data-message"
+                    class="text-text-secondary italic text-center p-8 text-sm"
                   >
                     {{ t('traces.traceDetailsSidebar.noDataAvailable') }}
 </div>
@@ -485,7 +474,7 @@ class="h-full overflow-y-auto">
               :label="t('traces.traceDetailsSidebar.modelParameters')"
               class="mt-3"
             >
-              <pre class="model-params-json p-2">{{
+              <pre class="bg-code-bg p-4 rounded-default overflow-x-auto font-mono text-xs m-0">{{
                 formatModelParams(span.llm_request_parameters)
               }}</pre>
             </OCollapsible>
@@ -498,10 +487,10 @@ class="h-full overflow-y-auto">
         >
           <!-- View mode toggle toolbar -->
           <div class="flex items-center justify-start pb-1.5! h-fit!">
-            <OToggleGroup v-model="attributesViewMode" class="rounded!">
+            <OToggleGroup v-model="attributesViewMode" class="rounded-default!">
               <OToggleGroupItem value="json"
 size="xs"
-class="h-5! text-[0.75rem]!">
+class="h-5! text-xs!">
                 <template #icon-left
                   ><OIcon name="data-object" size="xs" class="shrink-0"
                 /></template>
@@ -509,7 +498,7 @@ class="h-5! text-[0.75rem]!">
               </OToggleGroupItem>
               <OToggleGroupItem value="table"
 size="xs"
-class="h-5! text-[0.75rem]!">
+class="h-5! text-xs!">
                 <template #icon-left
                   ><OIcon name="table-chart" size="xs" class="shrink-0"
                 /></template>
@@ -552,7 +541,7 @@ class="h-5! text-[0.75rem]!">
                         </OIcon>
                       </OButton>
                     </span>
-                    <span class="text-[0.85rem]!">{{
+                    <span class="text-sm!">{{
                       $t("traces.applyAndSearch")
                     }}</span>
                   </li>
@@ -563,7 +552,7 @@ class="h-5! text-[0.75rem]!">
           <!-- Table View -->
           <div
             v-else
-            class="flex-1 overflow-hidden tab-content-dynamic-height border-1 border-solid border-[var(--o2-border-color)]"
+            class="flex-1 overflow-hidden tab-content-dynamic-height border-1 border-solid border-card-glass-border"
             :class="
               isLLMSpan && llmMetrics && span.gen_ai_response_model
                 ? '[height:calc(100vh-312px)]'
@@ -609,7 +598,7 @@ class="h-5! text-[0.75rem]!">
                             </OIcon>
                           </OButton>
                         </span>
-                        <span class="text-[0.85rem]!">{{
+                        <span class="text-sm!">{{
                           $t("traces.applyAndSearch")
                         }}</span>
                       </li>
@@ -636,7 +625,7 @@ class="h-5! text-[0.75rem]!">
             </div>
             <!-- TenstackTable for events -->
             <div
-              class="flex-1 traces-events-table-container overflow-hidden tab-content-dynamic-height border-1 border-solid border-[var(--o2-border-color)] rounded"
+              class="flex-1 traces-events-table-container overflow-hidden tab-content-dynamic-height border-1 border-solid border-card-glass-border rounded-default"
               :class="
                 isLLMSpan && llmMetrics && span.gen_ai_response_model
                   ? '[height:calc(100vh-312px)]'
@@ -663,26 +652,22 @@ class="h-5! text-[0.75rem]!">
                 <template #expanded-row="{ row }">
                   <json-preview
                     :value="row"
-                    class="py-[0.375rem] pl-[0.375rem]"
-                    copyButtonClass="left-[0.25rem]! w-fit! sticky!"
+                    class="py-1.5 pl-1.5"
+                    copyButtonClass="left-1! w-fit! sticky!"
                     mode="expanded"
                   />
                 </template>
               </TenstackTable>
             </div>
           </template>
-          <div
+          <OEmptyState
             v-else
-            class="w-full text-center flex items-center justify-center pt-4 font-bold tab-content-dynamic-height"
-            :class="
-              isLLMSpan && llmMetrics && span.gen_ai_response_model
-                ? '[height:calc(100vh-312px)]'
-                : '[height:calc(100vh-276px)]'
-            "
+            size="inline"
+            variant="no-results"
+            :title="t('traces.noEventsPresent')"
+            hide-action
             data-test="trace-details-sidebar-no-events"
-          >
-            {{ t('traces.traceDetailsSidebar.noEvents') }}
-          </div>
+          />
         </OTabPanel>
         <OTabPanel name="error" class="h-full">
           <TraceErrorTab
@@ -700,19 +685,18 @@ class="h-5! text-[0.75rem]!">
         </OTabPanel>
 
         <OTabPanel name="links">
-          <div v-if="spanLinks.length" class="overflow-auto max-h-[20rem]">
+          <div v-if="spanLinks.length" class="overflow-auto max-h-80">
             <table
-              class="trace-detail-tab-table border border-solid border-[var(--o2-border-color)] w-full"
+              class="trace-detail-tab-table border border-solid border-card-glass-border w-full"
               data-test="trace-details-sidebar-links-table"
             >
               <thead
-                class="thead-sticky text-left bg-(--color-surface-accent)"
+                class="thead-sticky text-left bg-surface-accent"
               >
                 <tr>
                   <th
                     v-for="(col, index) in linkColumns"
                     :key="'result_' + index"
-                    class="table-header"
                     :data-test="`trace-events-table-th-${col.label}`"
                   >
                     {{ col.label }}
@@ -727,14 +711,12 @@ class="h-5! text-[0.75rem]!">
                   tabindex="0"
                   @click="openReferenceTrace('span', row)"
                   @keydown="onLinkRowKeydown($event, row)"
-                  style="cursor: pointer"
-                  class="pointer focus-visible:outline-none focus-visible:bg-(--color-surface-accent)"
+                  class="pointer cursor-pointer focus-visible:outline-none focus-visible:bg-surface-accent"
                 >
                   <td
                     v-for="column in linkColumns"
                     :key="index + '-' + column.name"
-                    class="p-0 mb-0.5 relative overflow-visible cursor-default"
-                    style="cursor: pointer"
+                    class="p-0 mb-0.5 relative overflow-visible cursor-pointer"
                   >
                     <div class="flex flex items-center flex-nowrap">
                       {{ column.prop(row) }}
@@ -744,24 +726,20 @@ class="h-5! text-[0.75rem]!">
               </tbody>
             </table>
           </div>
-          <div
+          <OEmptyState
             v-else
-            class="w-full flex items-center justify-center text-center pt-4 font-bold tab-content-dynamic-height"
-            :class="
-              isLLMSpan && llmMetrics && span.gen_ai_response_model
-                ? '[height:calc(100vh-312px)]'
-                : '[height:calc(100vh-276px)]'
-            "
+            size="inline"
+            variant="no-results"
+            :title="t('traces.noLinksPresent')"
+            hide-action
             data-test="trace-details-sidebar-no-links"
-          >
-            {{ t('traces.traceDetailsSidebar.noLinks') }}
-          </div>
+          />
         </OTabPanel>
 
         <!-- Correlated Logs Tab Panel -->
         <OTabPanel
           name="correlated-logs"
-          class="p-0 full-height traces-correlated-logs-container"
+          class="p-0 h-full max-h-full overflow-hidden traces-correlated-logs-container"
         >
           <CorrelatedLogsTable
             v-if="correlationProps"
@@ -785,12 +763,7 @@ class="h-5! text-[0.75rem]!">
           <!-- Loading/Empty state when no data -->
           <div
             v-else
-            class="flex items-center justify-center py-20 tab-content-dynamic-height"
-            :class="
-              isLLMSpan && llmMetrics && span.gen_ai_response_model
-                ? '[height:calc(100vh-312px)]'
-                : '[height:calc(100vh-276px)]'
-            "
+            class="flex items-center justify-center py-20 h-full"
           >
             <div class="text-center">
               <OSpinner
@@ -800,11 +773,11 @@ class="h-5! text-[0.75rem]!">
               />
               <div
                 v-else-if="correlationError"
-                class="text-[0.875rem] font-bold"
+                class="text-sm font-bold"
               >
                 {{ correlationError }}
               </div>
-              <div v-else class="text-base text-gray-500">
+              <div v-else class="text-base text-text-muted">
                 {{ t("correlation.clickToLoadLogs") }}
               </div>
             </div>
@@ -814,7 +787,7 @@ class="h-5! text-[0.75rem]!">
         <!-- Correlated Metrics Tab Panel -->
         <OTabPanel
           name="correlated-metrics"
-          class="p-0 full-height traces-correlated-metrics-container"
+          class="p-0 h-full max-h-full overflow-hidden traces-correlated-metrics-container"
         >
           <TelemetryCorrelationDashboard
             v-if="correlationProps"
@@ -843,12 +816,7 @@ class="h-5! text-[0.75rem]!">
           <!-- Loading/Empty state when no data -->
           <div
             v-else
-            class="flex items-center justify-center py-20 tab-content-dynamic-height"
-            :class="
-              isLLMSpan && llmMetrics && span.gen_ai_response_model
-                ? '[height:calc(100vh-312px)]'
-                : '[height:calc(100vh-276px)]'
-            "
+            class="flex items-center justify-center py-20 h-full"
           >
             <div class="text-center">
               <OSpinner
@@ -858,11 +826,11 @@ class="h-5! text-[0.75rem]!">
               />
               <div
                 v-else-if="correlationError"
-                class="text-[0.875rem] font-bold"
+                class="text-sm font-bold"
               >
                 {{ correlationError }}
               </div>
-              <div v-else class="text-base text-gray-500">
+              <div v-else class="text-base text-text-muted">
                 {{ t("correlation.clickToLoadMetrics") }}
               </div>
             </div>
@@ -884,12 +852,14 @@ import OButton from "@/lib/core/Button/OButton.vue";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
 import OCollapsible from "@/lib/core/Collapsible/OCollapsible.vue";
+import OEmptyState from "@/lib/core/EmptyState/OEmptyState.vue";
 import { cloneDeep } from "lodash-es";
 import { timestampToTimezoneDate } from "@/utils/timezone";
 import { copyToClipboard } from "@/utils/clipboard";
 import { toggleFullscreen as domToggleFullScreen } from "@/utils/dom";
 import { defineComponent, onBeforeMount, ref, watch, type Ref, inject } from "vue";
 import { useStore } from "vuex";
+import useTheme from "@/composables/useTheme";
 import { useI18n } from "vue-i18n";
 import { computed } from "vue";
 import {
@@ -1003,6 +973,7 @@ export default defineComponent({
     OIcon,
     OTooltip,
     OCollapsible,
+    OEmptyState,
     LogsHighLighting,
     JsonPreview,
     LLMContentRenderer,
@@ -1087,16 +1058,6 @@ export default defineComponent({
     const { buildQueryDetails, navigateToLogs, navigateToCorrelatedLogs, searchObj } = useTraces();
     const router = useRouter();
 
-    // JSON syntax highlighting colors - using CSS variables for theme-aware colors
-    const themeColors = {
-      key: "var(--o2-json-key)",
-      stringValue: "var(--o2-json-string)",
-      numberValue: "var(--o2-json-number)",
-      booleanValue: "var(--o2-json-boolean)",
-      nullValue: "var(--o2-json-null)",
-      objectValue: "var(--o2-json-object)",
-    };
-
     const highlightTextMatch = (text: string, query: string): string => {
       if (!query) return escapeHtml(text);
       try {
@@ -1105,50 +1066,51 @@ export default defineComponent({
         const regex = new RegExp(`(${escapedQuery})`, "gi");
         return escapeHtml(text).replace(
           regex,
-          (match) => `<span class="highlight">${match}</span>`,
+          (match) => `<span class="trace-sidebar-highlight">${match}</span>`,
         );
       } catch (e) {
         return escapeHtml(text);
       }
     };
 
+    // Emits class names only — the colours live in the style block below, driven
+    // by the registered --color-json-* tokens, so the output themes itself.
     const highlightedJSON = (value) => {
-      const colors = themeColors;
       const attrs = value;
       const query = props.searchQuery;
 
       const formatValue = (value: any): string => {
         if (value === null) {
-          return `<span style="color: ${colors.nullValue};">${highlightTextMatch("null", query)}</span>`;
+          return `<span class="trace-json-null">${highlightTextMatch("null", query)}</span>`;
         } else if (typeof value === "boolean") {
-          return `<span style="color: ${colors.booleanValue};">${highlightTextMatch(String(value), query)}</span>`;
+          return `<span class="trace-json-boolean">${highlightTextMatch(String(value), query)}</span>`;
         } else if (typeof value === "number") {
-          return `<span style="color: ${colors.numberValue};">${highlightTextMatch(String(value), query)}</span>`;
+          return `<span class="trace-json-number">${highlightTextMatch(String(value), query)}</span>`;
         } else if (typeof value === "string") {
-          return `<span style="color: ${colors.stringValue};">"${highlightTextMatch(value, query)}"</span>`;
+          return `<span class="trace-json-string">"${highlightTextMatch(value, query)}"</span>`;
         } else if (typeof value === "object") {
-          return `<span style="color: ${colors.objectValue};">"${highlightTextMatch(JSON.stringify(value), query)}"</span>`;
+          return `<span class="trace-json-object">"${highlightTextMatch(JSON.stringify(value), query)}"</span>`;
         }
         return highlightTextMatch(String(value), query);
       };
 
       const lines: string[] = [];
-      lines.push('<span style="color: #9ca3af;">{</span>');
+      lines.push('<span class="trace-json-punct">{</span>');
 
       const entries = Object.entries(attrs);
       entries.forEach(([key, value], index) => {
-        const keyHtml = `<span style="color: ${colors.key};">"${escapeHtml(key)}"</span>`;
+        const keyHtml = `<span class="trace-json-key">"${escapeHtml(key)}"</span>`;
         const valueHtml = formatValue(value);
         const comma =
           index < entries.length - 1
-            ? '<span style="color: #9ca3af;">,</span>'
+            ? '<span class="trace-json-punct">,</span>'
             : "";
         lines.push(
-          `  ${keyHtml}<span style="color: #9ca3af;">:</span> ${valueHtml}${comma}`,
+          `  ${keyHtml}<span class="trace-json-punct">:</span> ${valueHtml}${comma}`,
         );
       });
 
-      lines.push('<span style="color: #9ca3af;">}</span>');
+      lines.push('<span class="trace-json-punct">}</span>');
       return lines.join("\n");
     };
 
@@ -1202,9 +1164,9 @@ export default defineComponent({
         size: 200,
         meta: {
           headerClass:
-            "border-b border-r border-b-[var(--o2-border-color)]",
+            "border-b border-r border-b-card-glass-border",
           cellClass:
-            "border-r border-b-[var(--o2-border-color)] text-[var(--o2-json-key)]",
+            "border-r border-b-card-glass-border text-json-key",
         },
       },
       {
@@ -1214,8 +1176,8 @@ export default defineComponent({
         size: 400,
         meta: {
           slot: true,
-          headerClass: "border-b border-b-[var(--o2-border-color)]",
-          cellClass: "border-b-[var(--o2-border-color)] p-0!",
+          headerClass: "border-b border-b-card-glass-border",
+          cellClass: "border-b-card-glass-border p-0!",
         },
       },
     ];
@@ -1283,8 +1245,8 @@ export default defineComponent({
       spanDetails.value = getFormattedSpanDetails();
     });
 
-    // Get current theme from store
-    const isDarkMode = computed(() => store.state.theme === "dark");
+    // Get current theme via the sanctioned dark-mode seam
+    const { isDark: isDarkMode } = useTheme();
 
     // Check if View Logs button should be disabled
     const isViewLogsDisabled = computed(() => {
@@ -1396,8 +1358,8 @@ export default defineComponent({
             ),
           meta: {
             headerClass:
-              "border-b border-r border-b-[var(--o2-border-color)]",
-            cellClass: "border-r border-b-[var(--o2-border-color)]",
+              "border-b border-r border-b-card-glass-border",
+            cellClass: "border-r border-b-card-glass-border",
           },
         });
         allKeys.delete(tsCol);
@@ -1424,8 +1386,8 @@ export default defineComponent({
           },
           meta: {
             headerClass:
-              "border-b border-r border-b-[var(--o2-border-color)]",
-            cellClass: "border-r border-b-[var(--o2-border-color)]",
+              "border-b border-r border-b-card-glass-border",
+            cellClass: "border-r border-b-card-glass-border",
           },
         });
       });
@@ -1839,7 +1801,7 @@ export default defineComponent({
           // Use filters from logStreams[0] as matchedDimensions — these contain
           // the correct field names for the log stream (e.g., k8s_namespace_name)
           // instead of semantic IDs (k8s-namespace) or trace field names
-          // (service_k8s_namespace_name). Same fix as 9127b6172 for incidents.
+          // (service_k8s_namespace_name).
           const logFilters =
             correlationData.related_streams.logs?.[0]?.filters || {};
           const actualMatchedDimensions =
@@ -2066,7 +2028,7 @@ export default defineComponent({
     const serviceIconUrl = computed(() =>
       getServiceIconDataUrl(
         props.span?.service_name ?? "",
-        store.state.theme === "dark",
+        isDarkMode.value,
         props.span
           ? getOrSetServiceColor(resolveSpanIdentity(props.span))
           : "#9e9e9e",
@@ -2148,648 +2110,213 @@ export default defineComponent({
 });
 </script>
 
-<style>
-.attributes-view-toggle .q-btn {
-  padding: 0.25rem 0.5rem;
+<style lang="scss" scoped>
+/* keep(complex-state): Deliberate CSS — generated content the template can't class up,
+   child-component internals reached with :deep(), :fullscreen chains, and
+   scrollbar rails. */
+
+/* generated-content — highlightedJSON()/highlightTextMatch() build these spans
+   as HTML strings, so scoped classes can't reach them; colours come from the
+   registered --color-json-* tokens and flip with the theme on their own. */
+.trace-details-sidebar {
+  :deep(.trace-json-key) {
+    color: var(--color-json-key);
+  }
+
+  :deep(.trace-json-string) {
+    color: var(--color-json-string);
+  }
+
+  :deep(.trace-json-number) {
+    color: var(--color-json-number);
+  }
+
+  :deep(.trace-json-boolean) {
+    color: var(--color-json-boolean);
+  }
+
+  :deep(.trace-json-null) {
+    color: var(--color-json-null);
+  }
+
+  :deep(.trace-json-object) {
+    color: var(--color-json-object);
+  }
+
+  :deep(.trace-json-punct) {
+    color: var(--color-text-label);
+  }
+
+  :deep(.trace-sidebar-highlight) {
+    background-color: var(--color-table-highlight-bg);
+  }
 }
 
-.span_details_tab-panels .o-tab-panel {
+/* .trace-detail-tab-table is also worn by TraceErrorTab.vue's table, which only
+   ever renders inside this sidebar — anchoring under the root keeps both
+   reachable without the bare th/td restyle leaking app-wide. */
+.trace-details-sidebar :deep(.trace-detail-tab-table) {
+  th,
+  td {
+    border-bottom: 1px solid var(--color-table-row-divider);
+    border-right: 1px solid var(--color-table-row-divider);
+    text-align: left;
+    padding: 0.5rem;
+    font-size: var(--text-compact);
+    word-break: break-word;
+    overflow-wrap: break-word;
+    min-height: 1.5rem;
+    height: auto;
+    max-width: 37.5rem;
+  }
+
+  th {
+    background-color: var(--color-surface-panel);
+  }
+
+  th:first-child,
+  td:first-child {
+    width: 12.5rem;
+    min-width: 12.5rem;
+  }
+
+  th:nth-child(2),
+  td:nth-child(2) {
+    width: auto;
+    min-width: 6.25rem;
+  }
+
+  th:last-child,
+  td:last-child {
+    border-right: none;
+  }
+
+  tr:last-child td {
+    border-bottom: none;
+  }
+
+  td span {
+    display: inline-block;
+    width: 100%;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    white-space: pre-wrap;
+  }
+
+  tbody tr:first-child {
+    td:first-child {
+      border-top-left-radius: var(--radius-surface);
+    }
+
+    td:last-child {
+      border-top-right-radius: var(--radius-surface);
+    }
+  }
+
+  tbody tr:last-child {
+    td:first-child {
+      border-bottom-left-radius: var(--radius-surface);
+    }
+
+    td:last-child {
+      border-bottom-right-radius: var(--radius-surface);
+    }
+  }
+}
+
+/* scrollbar — both toolbar rows overflow horizontally */
+.trace-details-toolbar-container > div {
+  &::-webkit-scrollbar {
+    height: 0.25rem;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--color-scrollbar-thumb);
+    border-radius: 0.125rem;
+
+    &:hover {
+      background: var(--color-scrollbar-thumb-hover);
+    }
+  }
+}
+
+/* complex-state — :fullscreen chains on the LLM input/output panes */
+.llm-preview-container {
+  .io-container:fullscreen {
+    background-color: var(--color-surface-panel);
+    padding: 0.75rem;
+    height: 100vh;
+    max-height: 100vh;
+    display: flex;
+    gap: 0.5rem;
+    align-items: stretch;
+
+    .io-section {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+
+      .section-label {
+        background: var(--color-surface-panel);
+        border-radius: var(--radius-default);
+      }
+
+      .llm-content-box {
+        height: calc(100vh - 5rem);
+        max-height: unset;
+        min-height: unset;
+      }
+    }
+  }
+
+  /* generated-content — LLMContentRenderer output rendered inside the box */
+  :deep(.llm-content-box .plain-text-content:hover) {
+    background-color: var(--color-interactive-hover-bg) !important;
+  }
+
+  /* lib-override:vue-json-pretty — suppress the library's own row hover */
+  :deep(.llm-content-box .vjs-tree *:hover) {
+    background-color: transparent !important;
+  }
+}
+
+/* child-component internals */
+.span_details_tab-panels :deep(.o-tab-panel) {
   height: 100%;
 }
 
-.traces-correlated-metrics-container .q-splitter--vertical .q-splitter__separator {
+.traces-correlated-metrics-container {
+  :deep(.dimension-sidebar) {
+    padding-left: 0.25rem;
+  }
+
+  :deep(.dimension-sidebar-search-container) {
+    padding: 0.375rem 0.2rem !important;
+  }
+}
+
+.traces-correlated-logs-container :deep(.logs-table-container .o2-scroll-container) {
   height: 100% !important;
 }
 
-.traces-correlated-metrics-container .q-card {
-  box-shadow: none !important;
-  border: 1px solid var(--o2-border) !important;
-}
-
-.traces-correlated-metrics-container .card-container {
-  box-shadow: none !important;
-}
-
-.traces-correlated-metrics-container .dimension-sidebar {
-  padding-left: 0.25rem;
-}
-
-.traces-correlated-metrics-container .dimension-sidebar-search-container {
-  padding: 0.375rem 0.2rem !important;
-}
-
-.traces-correlated-logs-container .logs-table-container .o2-scroll-container {
-  height: 100% !important;
-}
-
-.traces-events-table-container .table-container {
+.traces-events-table-container :deep(.table-container) {
   border-radius: 0 !important;
 }
-
-.trace-detail-tab-table table {
-  border-collapse: separate;
-  border-spacing: 0;
-  width: 100%;
-  background: rgba(255, 255, 255, 0.05);
-  backdrop-filter: blur(0.625rem);
-  border-radius: 0.5rem;
-  border: 0.125rem solid rgba(255, 255, 255, 0.3);
-  overflow: hidden;
-}
-
-.trace-detail-tab-table th,
-.trace-detail-tab-table td {
-  border-bottom: 1px solid var(--color-table-row-divider);
-  border-right: 1px solid var(--color-table-row-divider);
-  text-align: left;
-  padding: 8px !important;
-  font-size: 13px;
-  word-break: break-word;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  min-height: 24px;
-  height: auto;
-  max-width: 600px;
-}
-
-/* Add proper column sizing */
-.trace-detail-tab-table th:first-child,
-.trace-detail-tab-table td:first-child {
-  width: 200px;
-  min-width: 200px;
-}
-
-.trace-detail-tab-table th:nth-child(2),
-.trace-detail-tab-table td:nth-child(2) {
-  width: auto;
-  min-width: 100px;
-}
-
-.trace-detail-tab-table td span {
-  display: inline-block;
-  width: 100%;
-  word-break: break-word;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  white-space: pre-wrap;
-}
-
-.trace-detail-tab-table th:last-child,
-.trace-detail-tab-table td:last-child {
-  border-right: none;
-}
-
-.trace-detail-tab-table tr:last-child td {
-  border-bottom: none;
-}
-
-.trace-detail-tab-table tbody tr:first-child td:first-child {
-  border-top-left-radius: 0.5rem;
-}
-
-.trace-detail-tab-table tbody tr:first-child td:last-child {
-  border-top-right-radius: 0.5rem;
-}
-
-.trace-detail-tab-table tbody tr:last-child td:first-child {
-  border-bottom-left-radius: 0.5rem;
-}
-
-.trace-detail-tab-table tbody tr:last-child td:last-child {
-  border-bottom-right-radius: 0.5rem;
-}
-
-.trace-detail-tab-table table.q-table {
-  background: var(--color-surface-base);
-  backdrop-filter: blur(0.625rem);
-  border: 0.125rem solid var(--color-table-header-border);
-}
-
-.table-header .table-head-chip {
-  padding: 0px;
-}
-
-.table-header .table-head-chip .q-table th.sortable {
-  cursor: pointer;
-  text-transform: capitalize;
-  font-weight: bold;
-}
-
-.table-header.isClosable {
-  padding-right: 26px;
-  position: relative;
-}
-
-.table-header.isClosable .q-table-col-close {
-  transform: translateX(26px);
-  position: absolute;
-  margin-top: 2px;
-  color: grey;
-  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
-}
-
-.table-header .q-table th.sortable {
-  cursor: pointer;
-  text-transform: capitalize;
-  font-weight: bold;
-}
-
-.table-header .log_json_content {
-  white-space: pre-wrap;
-}
-
-.q-table__top {
-  padding-left: 0;
-  padding-top: 0;
-}
-
-.q-table thead tr,
-.q-table tbody td,
-.q-table th,
-.q-table td {
-  height: 25px;
-  padding: 0px 5px;
-  font-size: 0.75rem;
-}
-
-.q-table__bottom {
-  width: 100%;
-}
-
-.q-table__bottom {
-  min-height: 40px;
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-.q-td {
-  overflow: hidden;
-  min-width: 100px;
-}
-
-.q-td .expanded {
-  margin: 0;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  word-break: break-all;
-}
-
-/* Hide filter action buttons until the row is hovered */
-.filter-cell .filter-actions {
-  visibility: hidden;
-}
-
-.filter-cell:hover .filter-actions {
-  visibility: visible;
-}
-
-.cell-with-max-height .cell-content {
-  max-height: 200px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  display: block;
-  word-break: break-word;
-  word-wrap: break-word;
-  white-space: pre-wrap;
-}
-
-.thead-sticky tr > *,
-.tfoot-sticky tr > * {
+/* sticky header cells for the links table — position:sticky must sit on the
+   cells (tr > *), not the <thead>, so it cannot be a utility on the thead
+   element this template owns. */
+.thead-sticky tr > * {
   position: sticky;
   opacity: 1;
   z-index: 1;
+  background: var(--color-grey-200);
 }
 
 .thead-sticky tr:last-child > * {
   top: 0;
 }
-
-.tfoot-sticky tr:first-child > * {
-  bottom: 0;
-}
-
-/* Trace Details Toolbar - Modern Styling */
-.trace-details-toolbar-container .toolbar-chip {
-  font-size: 11px;
-  height: 22px;
-  padding: 0 6px;
-  background: white;
-  border: 1px solid #dee2e6;
-  transition: all 0.2s ease;
-  flex-shrink: 0;
-}
-
-.trace-details-toolbar-container .toolbar-chip:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.trace-details-toolbar-container .toolbar-chip .chip-label {
-  color: #6c757d;
-  font-size: 10px;
-  font-weight: 500;
-  margin-right: 3px;
-}
-
-.trace-details-toolbar-container .toolbar-chip .chip-value {
-  color: #212529;
-  font-weight: 600;
-  font-size: 10px;
-}
-
-.trace-details-toolbar-container .toolbar-chip.service-chip {
-  border-left: 3px solid #0d6efd;
-}
-
-.trace-details-toolbar-container .toolbar-chip.duration-chip {
-  border-left: 3px solid #6610f2;
-}
-
-.trace-details-toolbar-container .toolbar-chip.ttft-chip {
-  border-left: 3px solid #6f42c1;
-}
-
-.trace-details-toolbar-container .toolbar-chip.time-chip {
-  border-left: 3px solid #d63384;
-}
-
-.trace-details-toolbar-container .toolbar-chip.span-id-chip {
-  border-left: 3px solid #20c997;
-  cursor: pointer;
-}
-
-.trace-details-toolbar-container .toolbar-chip.span-id-chip .copy-icon {
-  opacity: 0.6;
-  transition: opacity 0.2s;
-}
-
-.trace-details-toolbar-container .toolbar-chip.span-id-chip:hover .copy-icon {
-  opacity: 1;
-}
-
-.trace-details-toolbar-container .view-logs-btn {
-  height: 24px;
-  font-size: 10px;
-  font-weight: 600;
-  padding: 0 10px;
-  border-radius: 4px;
-  text-transform: none;
-  flex-shrink: 0;
-}
-
-/* Scrollbar styling for horizontal scroll */
-.trace-details-toolbar-container > div::-webkit-scrollbar {
-  height: 4px;
-}
-
-.trace-details-toolbar-container > div::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.trace-details-toolbar-container > div::-webkit-scrollbar-thumb {
-  background: #cbd5e0;
-  border-radius: 2px;
-}
-
-.trace-details-toolbar-container > div::-webkit-scrollbar-thumb:hover {
-  background: #a0aec0;
-}
-
-/* LLM Chips - Modern Styling (now integrated into toolbar) */
-.trace-details-toolbar-container .llm-chip {
-  font-size: 10px;
-  height: 20px;
-  padding: 0 6px;
-  background: white;
-  border: 1px solid #dee2e6;
-  transition: all 0.2s ease;
-  flex-shrink: 0;
-}
-
-.trace-details-toolbar-container .llm-chip:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
-}
-
-.trace-details-toolbar-container .llm-chip .chip-value {
-  font-size: 10px;
-  font-weight: 500;
-}
-
-.trace-details-toolbar-container .llm-chip.model-chip {
-  border-left: 3px solid #ab47bc;
-}
-
-.trace-details-toolbar-container .llm-chip.model-chip .chip-value {
-  color: #4a148c;
-  font-weight: 600;
-}
-
-.trace-details-toolbar-container .llm-chip.token-chip {
-  min-width: 60px;
-  justify-content: center;
-}
-
-.trace-details-toolbar-container .llm-chip.token-chip .chip-label {
-  font-size: 9px;
-  font-weight: 500;
-  margin-right: 2px;
-}
-
-.trace-details-toolbar-container .llm-chip.token-chip.input-token-chip {
-  border-left: 3px solid #42a5f5;
-}
-
-.trace-details-toolbar-container .llm-chip.token-chip.input-token-chip .OIcon,
-.trace-details-toolbar-container .llm-chip.token-chip.input-token-chip .chip-label,
-.trace-details-toolbar-container .llm-chip.token-chip.input-token-chip .chip-value {
-  color: #1565c0;
-}
-
-.trace-details-toolbar-container .llm-chip.token-chip.output-token-chip {
-  border-left: 3px solid #66bb6a;
-}
-
-.trace-details-toolbar-container .llm-chip.token-chip.output-token-chip .OIcon,
-.trace-details-toolbar-container .llm-chip.token-chip.output-token-chip .chip-label,
-.trace-details-toolbar-container .llm-chip.token-chip.output-token-chip .chip-value {
-  color: #2e7d32;
-}
-
-.trace-details-toolbar-container .llm-chip.cost-chip {
-  border-left: 3px solid #ef6c00;
-}
-
-.trace-details-toolbar-container .llm-chip.cost-chip .chip-value {
-  color: #e65100;
-  font-weight: 600;
-}
-
-.trace-details-toolbar-container .tokens-group {
-  display: inline-flex;
-  gap: 3px;
-  flex-shrink: 0;
-}
-
-.trace-details-toolbar-container .provider-badge {
-  font-size: 10px;
-  font-weight: 600;
-  padding: 3px 8px;
-  background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
-  border-radius: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.3px;
-  flex-shrink: 0;
-}
-
-/* Scrollbar styling for horizontal scroll in llm-metrics-row */
-.trace-details-toolbar-container .llm-metrics-row::-webkit-scrollbar {
-  height: 4px;
-}
-
-.trace-details-toolbar-container .llm-metrics-row::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.trace-details-toolbar-container .llm-metrics-row::-webkit-scrollbar-thumb {
-  background: #cbd5e0;
-  border-radius: 2px;
-}
-
-.trace-details-toolbar-container .llm-metrics-row::-webkit-scrollbar-thumb:hover {
-  background: #a0aec0;
-}
-
-/* Dark Mode Styles */
-body.body--dark .trace-details-toolbar-container {
-  background: rgba(45, 55, 72, 0.5);
-  border-bottom-color: #4a5568;
-}
-
-body.body--dark .trace-details-toolbar-container .llm-metrics-row {
-  border-top-color: #4a5568 !important;
-}
-
-body.body--dark .trace-details-toolbar-container .toolbar-chip {
-  background: #1a202c;
-  border-color: #4a5568;
-  color: #e2e8f0;
-}
-
-body.body--dark .trace-details-toolbar-container .toolbar-chip .chip-label {
-  color: #a0aec0;
-}
-
-body.body--dark .trace-details-toolbar-container .toolbar-chip .chip-value {
-  color: #e2e8f0;
-}
-
-body.body--dark .trace-details-toolbar-container .toolbar-chip:hover {
-  background: #2d3748;
-}
-
-body.body--dark .trace-details-toolbar-container .llm-chip {
-  background: #1a202c;
-  border-color: #4a5568;
-}
-
-body.body--dark .trace-details-toolbar-container .llm-chip .chip-value {
-  color: #e2e8f0;
-}
-
-body.body--dark .trace-details-toolbar-container .llm-chip.model-chip {
-  border-left: 3px solid #ab47bc;
-}
-
-body.body--dark .trace-details-toolbar-container .llm-chip.model-chip .chip-value {
-  color: #e9d8fd;
-}
-
-body.body--dark .trace-details-toolbar-container .llm-chip.token-chip.input-token-chip {
-  border-left: 3px solid #42a5f5;
-}
-
-body.body--dark .trace-details-toolbar-container .llm-chip.token-chip.input-token-chip .OIcon,
-body.body--dark .trace-details-toolbar-container .llm-chip.token-chip.input-token-chip .chip-label,
-body.body--dark .trace-details-toolbar-container .llm-chip.token-chip.input-token-chip .chip-value {
-  color: #90cdf4;
-}
-
-body.body--dark .trace-details-toolbar-container .llm-chip.token-chip.output-token-chip {
-  border-left: 3px solid #66bb6a;
-}
-
-body.body--dark .trace-details-toolbar-container .llm-chip.token-chip.output-token-chip .OIcon,
-body.body--dark .trace-details-toolbar-container .llm-chip.token-chip.output-token-chip .chip-label,
-body.body--dark .trace-details-toolbar-container .llm-chip.token-chip.output-token-chip .chip-value {
-  color: #9ae6b4;
-}
-
-body.body--dark .trace-details-toolbar-container .llm-chip.cost-chip {
-  border-left: 3px solid #ef6c00;
-}
-
-body.body--dark .trace-details-toolbar-container .llm-chip.cost-chip .chip-value {
-  color: #fed7aa;
-}
-
-body.body--dark .trace-details-toolbar-container .provider-badge {
-  background: linear-gradient(135deg, #2b6cb0 0%, #2c5282 100%);
-}
-
-.llm-preview-container .section-label {
-  color: var(--o2-text-primary);
-  font-size: 14px;
-  margin-bottom: 0.5rem;
-}
-
-.llm-preview-container .io-section {
-  flex: 0 0 calc(50% - 0.4rem);
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.llm-preview-container .llm-content-box {
-  flex: 1;
-  height: 100%;
-  max-height: calc(100% - 1.625rem);
-  border: 1px solid var(--o2-border-color);
-  border-radius: 4px;
-  padding: 0.75rem;
-  overflow-y: auto;
-  overflow-x: hidden;
-  background-color: var(--o2-code-bg);
-}
-
-.llm-preview-container .llm-content-box .plain-text-content:hover {
-  background-color: rgba(0, 0, 0, 0.04) !important;
-}
-
-.llm-preview-container .llm-content-box .vjs-tree *:hover {
-  background-color: transparent !important;
-}
-
-.llm-preview-container .no-data-message {
-  color: var(--o2-text-secondary);
-  font-style: italic;
-  text-align: center;
-  padding: 2rem;
-  font-size: 14px;
-}
-
-.llm-preview-container .io-container:fullscreen {
-  background-color: #f5f5f5;
-  padding: 0.75rem;
-  height: 100vh;
-  max-height: 100vh;
-  display: flex;
-  gap: 0.5rem;
-  align-items: stretch;
-}
-
-.llm-preview-container .io-container:fullscreen .io-section {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-.llm-preview-container .io-container:fullscreen .io-section .section-label {
-  background: #f5f5f5;
-  border-radius: 4px;
-}
-
-.llm-preview-container .io-container:fullscreen .io-section .llm-content-box {
-  height: calc(100vh - 80px);
-  max-height: unset;
-  min-height: unset;
-}
-
-.llm-preview-container .io-container-dark:fullscreen {
-  background: #1e1e1e;
-}
-
-.llm-preview-container .io-container-dark:fullscreen .io-section .section-label {
-  background: #1e1e1e;
-  color: var(--o2-border);
-}
-
-.llm-preview-container .io-container-dark .llm-content-box .plain-text-content:hover {
-  background-color: rgba(255, 255, 255, 0.05) !important;
-}
-
-.llm-preview-container .io-container-dark .llm-content-box .vjs-tree *:hover {
-  background-color: transparent !important;
-}
-
-.llm-preview-container .model-params-json {
-  background-color: var(--o2-code-bg);
-  padding: 1rem;
-  border-radius: 4px;
-  overflow-x: auto;
-  font-family: monospace;
-  font-size: 12px;
-  margin: 0;
-}
-</style>
-
-<style>
-.span_details_tabs .q-tab__indicator {
-  display: none;
-}
-
-.span_details_tabs .q-tab--active {
-  border-bottom: 1px solid var(--q-primary);
-}
-
-.span_details_tab-panels .q-tab-panel {
-  padding: 8px 8px 8px 8px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  height: 100%;
-}
-
-.view-span-logs-btn .q-btn__content {
-  display: flex;
-  align-items: center;
-  font-size: 12px;
-}
-
-.highlight {
-  background-color: yellow; /* Adjust background color as desired */
-}
-</style>
-
-<style>
-/* Dark theme support for glassmorphic tables */
-.body--dark .trace-detail-tab-table table {
-  /* background: rgba(255, 255, 255, 0.05); */
-  /* border: 0.125rem solid rgba(255, 255, 255, 0.3); */
-}
-
-.body--dark .trace-detail-tab-table th,
-.body--dark .trace-detail-tab-table td {
-  border-bottom: 1px solid var(--color-table-row-divider);
-  border-right: 1px solid var(--color-table-row-divider);
-}
-
-/* Light theme support for glassmorphic tables */
-.body--light .trace-detail-tab-table table {
-  /* background: rgba(240, 240, 245, 0.8); */
-  /* border: 0.125rem solid rgba(100, 100, 120, 0.5); */
-}
-
-.body--light .trace-detail-tab-table th,
-.body--light .trace-detail-tab-table td {
-  border-bottom: 1px solid var(--color-table-row-divider);
-  border-right: 1px solid var(--color-table-row-divider);
-}
-
-.trace-detail-tab-table th {
-  background-color: #f5f5f5 !important;
-}
-
-.body--dark .trace-detail-tab-table th {
-  background-color: #424242 !important;
-}
 </style>
diff --git a/web/src/plugins/traces/TraceEvaluationsView.vue b/web/src/plugins/traces/TraceEvaluationsView.vue
deleted file mode 100644
index 59b0b16d37..0000000000
--- a/web/src/plugins/traces/TraceEvaluationsView.vue
+++ /dev/null
@@ -1,1121 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>. -->
-
-<template>
-  <div class="w-full h-full flex flex-col overflow-y-auto bg-(--color-surface-base) p-4 gap-4">
-    <!-- Loading state -->
-    <div v-if="isLoading" class="flex flex-col items-center justify-center h-[60vh] gap-4 text-(--color-text-secondary)">
-      <OSpinner size="xl" />
-      <div>{{ $t("traces.evaluations.loading") }}</div>
-    </div>
-
-    <!-- Empty state -->
-    <div v-else-if="evalData.length === 0" class="flex flex-col items-center justify-center h-[60vh] gap-4 text-(--color-text-secondary)">
-      <div class="text-[64px] opacity-30">
-        <OIcon name="assessment" size="sm" />
-      </div>
-      <div class="eval-empty-title">{{ $t("traces.evaluations.noDataTitle") }}</div>
-      <div class="eval-empty-subtitle">
-        {{ $t("traces.evaluations.noDataSubtitle") }}
-      </div>
-    </div>
-
-    <!-- Evaluation records -->
-    <template v-else>
-      <!-- Template Selector — page-level, above all records -->
-      <div class="flex justify-end items-center">
-        <div class="flex items-center gap-2">
-          <span class="text-xs font-medium text-[var(--color-text-secondary)]">{{ $t("traces.evaluations.templateLabel") }}</span>
-          <OSelect
-            v-model="selectedTemplate"
-            :options="availableTemplates"
-            valueKey="id"
-            labelKey="name"
-            class="w-[260px]"
-            @update:model-value="onTemplateChange"
-          >
-            <template v-slot:prepend>
-              <OIcon name="assignment" size="xs" />
-            </template>
-          </OSelect>
-        </div>
-      </div>
-
-      <div v-for="(record, idx) in evalData" :key="idx" class="flex flex-col gap-4 w-full">
-        <!-- SECTION 1: Hero Metrics (Top Row) -->
-        <div class="flex gap-3 mb-4 h-[100px]">
-          <!-- 1. Quality Score Card -->
-          <div
-            class="flex-1 flex flex-col justify-between border border-[var(--color-border-default)] rounded-lg bg-[var(--color-surface-base)] p-3"
-          >
-            <div class="flex justify-between items-start">
-              <div class="text-xs font-medium text-[var(--color-text-secondary)]">
-                {{ $t("traces.evaluations.qualityScore") }}
-              </div>
-              <div class="w-8 h-8 rounded-lg flex items-center justify-center"
-                   :class="getScoreClass(record.llm_evaluation_quality_score) === 'score-excellent' ? 'bg-green-500/10' : (getScoreClass(record.llm_evaluation_quality_score) === 'score-good' ? 'bg-amber-500/10' : 'bg-red-500/10')">
-                <OIcon name="insights" size="sm"
-                        :class="getScoreClass(record.llm_evaluation_quality_score) === 'score-excellent' ? 'text-green-500' : (getScoreClass(record.llm_evaluation_quality_score) === 'score-good' ? 'text-amber-500' : 'text-red-500')"
-                        class="text-[20px]" />
-              </div>
-            </div>
-            <div class="text-3xl font-bold tracking-tight leading-none text-[var(--color-grey-600)]">
-              {{ formatScore(record.llm_evaluation_quality_score) }}
-            </div>
-          </div>
-
-          <!-- 2. Verdict Card -->
-          <div
-            class="flex-1 flex flex-col justify-between border border-[var(--color-border-default)] rounded-lg bg-[var(--color-surface-base)] p-3"
-          >
-            <div class="flex justify-between items-start">
-              <div class="text-xs font-medium text-[var(--color-text-secondary)]">
-                {{ $t("traces.evaluations.verdict") }}
-              </div>
-              <div class="w-8 h-8 rounded-lg flex items-center justify-center"
-                   :class="getVerdict(record) === 'PASS' ? 'bg-green-500/10' : getVerdict(record) === 'FAIL' ? 'bg-red-500/10' : 'bg-gray-500/10'">
-                <OIcon :name="getVerdict(record) === 'PASS' ? 'check-circle' : getVerdict(record) === 'FAIL' ? 'cancel' : 'help-outline'" size="sm"
-                        :class="getVerdict(record) === 'PASS' ? 'text-green-500' : getVerdict(record) === 'FAIL' ? 'text-red-500' : 'text-gray-400'"
-                        class="text-[20px]" />
-              </div>
-            </div>
-            <div class="text-2xl font-bold tracking-tight leading-none"
-                 :class="getVerdict(record) === 'PASS' ? 'text-green-500' : getVerdict(record) === 'FAIL' ? 'text-red-500' : 'text-[var(--color-text-secondary)]'">
-              {{ getVerdict(record) }}
-            </div>
-          </div>
-
-          <!-- 3. Steps Card -->
-          <div
-            class="flex-1 flex flex-col justify-between border border-[var(--color-border-default)] rounded-lg bg-[var(--color-surface-base)] p-3"
-          >
-            <div class="flex justify-between items-start">
-              <div class="text-xs font-medium text-[var(--color-text-secondary)]">
-                {{ $t("traces.evaluations.traceSteps") }}
-              </div>
-              <div class="w-8 h-8 rounded-lg flex items-center justify-center bg-blue-500/10">
-                <OIcon name="layers" size="sm" class="text-blue-500 text-[20px]" />
-              </div>
-            </div>
-            <div class="text-3xl font-bold tracking-tight leading-none text-[var(--color-grey-600)]">
-              {{ record.total_steps || "0" }}
-            </div>
-          </div>
-
-          <!-- 4. Tools Card -->
-          <div
-            class="flex-1 flex flex-col justify-between border border-[var(--color-border-default)] rounded-lg bg-[var(--color-surface-base)] p-3"
-          >
-            <div class="flex justify-between items-start">
-              <div class="text-xs font-medium text-[var(--color-text-secondary)]">
-                {{ $t("traces.evaluations.toolCalls") }}
-              </div>
-              <div class="w-8 h-8 rounded-lg flex items-center justify-center bg-purple-500/10">
-                <OIcon name="build" size="sm" class="text-purple-500 text-[20px]" />
-              </div>
-            </div>
-            <div class="text-3xl font-bold leading-none text-[var(--color-grey-600)]">
-              {{ record.total_tool_calls || "0" }}
-            </div>
-          </div>
-
-          <!-- 5. Completion Card -->
-          <div
-            class="flex-1 flex flex-col justify-between border border-[var(--color-border-default)] rounded-lg bg-[var(--color-surface-base)] p-3"
-          >
-            <div class="flex justify-between items-start">
-              <div class="text-xs font-medium text-[var(--color-text-secondary)]">
-                {{ $t("traces.evaluations.doneVia") }}
-              </div>
-              <div class="w-8 h-8 rounded-lg flex items-center justify-center bg-teal-500/10">
-                <OIcon name="flag" size="sm" class="text-teal-500 text-[20px]" />
-              </div>
-            </div>
-            <div class="text-lg font-semibold leading-tight text-[var(--color-grey-600)] truncate" :title="record.completion_signal">
-              {{ record.completion_signal || "N/A" }}
-            </div>
-          </div>
-        </div>
-
-        <!-- SECTION 2: Main Content (2:1 Ratio Layout) -->
-        <div class="flex gap-4">
-          <!-- PART 1: Primary Content (Analysis & reasoning) - 2/3 Width -->
-          <div class="flex flex-col gap-4 w-[66.67%]">
-            <!-- 2.1A: Issues & Analysis Card -->
-            <div class="border border-[var(--color-border-default)] rounded-lg bg-[var(--color-surface-base)] p-4">
-              <div class="flex items-center gap-2 mb-3">
-                <OIcon name="rule" size="sm" />
-                <div class="text-sm font-semibold text-[var(--color-text-heading)]">{{ $t("traces.evaluations.issuesAnalysis") }}</div>
-              </div>
-
-              <!-- Template Evaluation Criteria (shown when a template with content is active) -->
-              <div v-if="selectedTemplateData?.content" class="mb-4">
-                <OCollapsible
-                  icon="description"
-                  :label="isTemplateMismatch(record) ? $t('traces.evaluations.criteriaDifferentTemplate') : $t('traces.evaluations.criteriaFromTemplate')"
-                >
-                  <!-- Mismatch notice inside the criteria panel -->
-                  <div
-                    v-if="isTemplateMismatch(record)"
-                    class="mt-2 mb-1 flex items-center gap-1.5 text-[10px] text-amber-700 dark:text-amber-400"
-                  >
-                    <OIcon name="warning" size="xs" />
-                    <span>{{ $t("traces.evaluations.criteriaTemplateMismatchNote", { template: selectedTemplateData?.name, evaluated: evaluatedTemplateName(record) }) }}</span>
-                  </div>
-                  <div class="mt-2 p-3 bg-[var(--color-border-default)] rounded-md text-xs leading-relaxed whitespace-pre-wrap text-[var(--color-text-heading)]">
-                    {{ selectedTemplateData.content }}
-                  </div>
-                  <div class="mt-1 text-[10px] text-[var(--color-text-secondary)] italic">
-                    {{ $t("traces.evaluations.criteriaSyntaxNote") }}
-                  </div>
-                </OCollapsible>
-              </div>
-
-              <!-- Critical Issues -->
-              <div v-if="record.llm_evaluation_judge_critical_issues" class="mb-4">
-                <div class="flex flex-wrap gap-2">
-                  <div
-                    v-for="(issue, i) in parseCriticalIssues(record.llm_evaluation_judge_critical_issues)"
-                    :key="i"
-                    class="flex items-center gap-2 px-3 py-1.5 rounded-md bg-red-500/10 text-red-600 text-xs font-medium border border-red-500/20"
-                  >
-                    <OIcon name="report-problem" size="xs" />
-                    <span>{{ issue }}</span>
-                  </div>
-                </div>
-              </div>
-
-              <!-- Fix Suggestions Card (Phase 2) -->
-              <div v-if="getFixSuggestions(record).length > 0" class="mb-4">
-                <div class="text-[10px] font-bold text-[var(--color-text-secondary)] uppercase mb-2">{{ $t("traces.evaluations.recommendedFixes") }}</div>
-                <div class="space-y-2">
-                  <div v-for="(fix, i) in getFixSuggestions(record)" :key="i"
-                       class="flex items-start gap-2 p-3 bg-blue-500/5 border border-blue-500/20 rounded-lg border-dashed">
-                    <OIcon name="lightbulb" size="sm" class="mt-1" />
-                    <div class="text-xs text-[var(--color-text-heading)] flex-1 leading-relaxed">
-                      <strong>{{ $t("traces.evaluations.fixSuggestion") }}</strong> {{ fix }}
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div v-if="getWeakestDimension(record)" class="mb-4">
-                <div class="flex items-center gap-2 mb-2">
-                  <OIcon name="trending-down" size="xs" />
-                  <span class="text-xs font-medium text-[var(--color-text-secondary)]">{{ $t("traces.evaluations.weakestDimension") }}</span>
-                  <OTag type="evalBadge" value="weakest">{{ formatDimLabel(getWeakestDimension(record)!.dimension) }}</OTag>
-                </div>
-                <div v-if="getWeakestDimension(record)!.reasoning" class="text-sm bg-[var(--color-border-default)] p-3 rounded-md leading-relaxed">
-                  {{ getWeakestDimension(record)!.reasoning }}
-                </div>
-              </div>
-            </div>
-
-            <!-- 2.1B: Score Reasoning Card -->
-            <div class="border border-[var(--color-border-default)] rounded-lg bg-[var(--color-surface-base)] p-4">
-              <div class="flex items-center gap-2 mb-3">
-                <OIcon name="psychology" size="sm" />
-                <div class="text-sm font-semibold text-[var(--color-text-heading)]">{{ $t("traces.evaluations.dimensionReasoning") }}</div>
-              </div>
-              <div class="grid grid-cols-2 gap-3">
-                <div
-                  v-for="dim in getDimensionScores(record).filter(d => d.reasoning).slice().sort((a, b) => (isTemplateDimension(b.dimension) ? 1 : 0) - (isTemplateDimension(a.dimension) ? 1 : 0))"
-                  :key="dim.dimension"
-                  class="p-3 rounded-md flex flex-col gap-1"
-                  :class="isTemplateDimension(dim.dimension) ? 'bg-[rgba(25,118,210,0.05)] border border-[rgba(25,118,210,0.2)] dark:bg-[rgba(96,165,250,0.07)] dark:border-[rgba(96,165,250,0.25)]' : 'bg-[var(--color-border-default)]'"
-                >
-                  <div class="flex items-center gap-1.5">
-                    <div class="text-[10px] font-bold text-[var(--color-text-secondary)] uppercase tracking-wider">
-                      {{ formatDimLabel(dim.dimension) }}
-                    </div>
-                    <!-- Pass/Fail inline -->
-                    <OTag
-                      v-if="isTemplateDimension(dim.dimension)"
-                      type="evaluationVerdict"
-                      :value="getDimVerdict(dim.score)"
-                      class="text-[9px] py-px px-1"
-                    />
-                  </div>
-                  <div class="text-xs leading-relaxed text-[var(--color-text-heading)]">
-                    {{ truncateContent(dim.reasoning, 200) }}
-                  </div>
-                </div>
-                <div v-if="!getDimensionScores(record).some(d => d.reasoning)" class="text-sm italic text-[var(--color-text-secondary)]">
-                  {{ $t("traces.evaluations.noDimensionReasoning") }}
-                </div>
-              </div>
-            </div>
-
-            <!-- 2.1C: Query & Response Card (Full Width in column) -->
-            <div class="border border-[var(--color-border-default)] rounded-lg bg-[var(--color-surface-base)] overflow-hidden">
-              <div class="px-4 py-3 border-b border-[var(--color-border-default)] bg-[var(--color-border-default)]/30">
-                <div class="flex items-center gap-2">
-                  <OIcon name="code" size="sm" />
-                  <div class="text-sm font-semibold text-[var(--color-text-heading)]">{{ $t("traces.evaluations.queryResponse") }}</div>
-                </div>
-              </div>
-
-              <div class="flex flex-col divide-y divide-[var(--color-border-default)]">
-                <!-- System Prompt (Expandable) -->
-                <OCollapsible
-                  v-if="parseMessages(record.gen_ai_input_messages, record.gen_ai_system_instructions).system"
-                  icon="settings"
-                  :label="$t('traces.evaluations.systemPrompt')"
-                >
-                  <div class="p-4 bg-[var(--color-code-bg)]">
-                    <LLMContentRenderer
-                      :content="JSON.stringify([{ role: 'system', content: parseMessages(record.gen_ai_input_messages, record.gen_ai_system_instructions).system }])"
-                      :contentType="'input'"
-                      :viewMode="'formatted'"
-                    />
-                  </div>
-                </OCollapsible>
-
-                <!-- User Messages -->
-                <OCollapsible
-                  v-if="parseMessages(record.gen_ai_input_messages, record.gen_ai_system_instructions).user.length > 0"
-                  icon="person"
-                  :model-value="true"
-                  :label="$t('traces.evaluations.userMessages')"
-                >
-                  <div class="p-4 bg-[var(--color-code-bg)]">
-                    <LLMContentRenderer
-                      :content="JSON.stringify(parseMessages(record.gen_ai_input_messages, record.gen_ai_system_instructions).user)"
-                      :contentType="'input'"
-                      :viewMode="'formatted'"
-                    />
-                  </div>
-                </OCollapsible>
-
-                <!-- Assistant Response -->
-                <OCollapsible
-                  v-if="record.gen_ai_output_messages"
-                  icon="smart-toy"
-                  :model-value="true"
-                  :label="$t('traces.evaluations.assistantResponse')"
-                >
-                  <div class="p-4 bg-[var(--color-code-bg)]">
-                    <LLMContentRenderer
-                      :content="getHighlightedResponse(record)"
-                      :contentType="'output'"
-                      :viewMode="'json'"
-                    />
-                  </div>
-                </OCollapsible>
-              </div>
-            </div>
-          </div>
-
-          <!-- PART 2: Sidebar Content (Dimensions & Metadata) - 1/3 Width -->
-          <div class="flex flex-col gap-4 w-[33.33%]">
-            <!-- 2.2A: Dimensions Card -->
-            <div class="border border-[var(--color-border-default)] rounded-lg bg-[var(--color-surface-base)] p-4 flex flex-col gap-4">
-              <div class="flex items-center justify-between">
-                <div class="flex items-center gap-2">
-                  <OIcon name="analytics" size="sm" />
-                  <div class="text-sm font-semibold text-[var(--color-text-heading)]">{{ $t("traces.evaluations.dimensions") }}</div>
-                </div>
-                <!-- Threshold explainer shown only when template dimensions are present -->
-                <div v-if="selectedTemplateData?.dimensions?.length" class="flex items-center gap-1">
-                  <span class="text-[10px] text-[var(--color-text-secondary)]">{{ $t("traces.evaluations.passThreshold") }}</span>
-                  <OIcon name="info-outline" size="xs" />
-                    <OTooltip :content="$t('traces.evaluations.passThresholdTooltip')" max-width="220px" />
-                </div>
-              </div>
-
-              <!-- Template aspects legend (shown when a template is active) -->
-              <div v-if="selectedTemplateData?.dimensions?.length" class="flex items-center gap-1.5 text-[10px] text-[var(--color-text-secondary)]">
-                <OIcon name="assignment" size="xs" />
-                <span>{{ $t("traces.evaluations.templateAspectsFrom", { template: selectedTemplateData.name }) }}</span>
-              </div>
-
-              <!-- Mismatch warning: selected template ≠ template used for evaluation -->
-              <div
-                v-if="isTemplateMismatch(record)"
-                class="flex items-start gap-2 p-2 rounded-md bg-amber-500/10 border border-amber-500/25 text-[10px] text-amber-700 dark:text-amber-400"
-              >
-                <OIcon name="warning" size="xs" class="mt-px shrink-0" />
-                <span>{{ $t("traces.evaluations.templateMismatchWarning", { selected: selectedTemplateData?.name, evaluated: evaluatedTemplateName(record) }) }}</span>
-              </div>
-
-              <div class="flex flex-col gap-4">
-                <div
-                  v-for="dim in getDimensionScores(record)"
-                  :key="dim.dimension"
-                  class="flex flex-col gap-1.5"
-                  :class="isTemplateDimension(dim.dimension) ? 'p-[6px_8px] rounded-md border border-[rgba(25,118,210,0.2)] bg-[rgba(25,118,210,0.04)] dark:border-[rgba(96,165,250,0.25)] dark:bg-[rgba(96,165,250,0.06)]' : ''"
-                >
-                  <div class="flex justify-between items-center">
-                    <div class="flex items-center gap-2">
-                      <OIcon :name="getDimIcon(dim.dimension)" :class="getDimColorClass(dim.dimension)" size="sm" />
-                      <span class="text-xs font-medium text-[var(--color-text-heading)]">{{ formatDimLabel(dim.dimension) }}</span>
-                      <!-- Template aspect badge -->
-                      <OTag
-                        v-if="isTemplateDimension(dim.dimension)"
-                        type="evalBadge"
-                        value="template"
-                        class="text-[9px] py-px px-1"
-                      />
-                    </div>
-                    <div class="flex items-center gap-1.5">
-                      <!-- Pass/Fail verdict badge for template dimensions -->
-                      <OTag
-                        v-if="isTemplateDimension(dim.dimension)"
-                        type="evaluationVerdict"
-                        :value="getDimVerdict(dim.score)"
-                        class="text-[9px] py-px px-1"
-                      />
-                      <span class="text-xs font-bold text-[var(--color-text-heading)]">{{ formatScore(dim.score) }}</span>
-                    </div>
-                  </div>
-                  <div class="h-1.5 w-full bg-[var(--color-border-default)] rounded-full overflow-hidden">
-                    <div
-                      class="h-full transition-all duration-500"
-                      :style="{
-                        width: getBarWidth(dim.score),
-                        backgroundColor: isTemplateDimension(dim.dimension)
-                          ? (getDimVerdict(dim.score) === 'PASS' ? '#22c55e' : '#ef4444')
-                          : getDimBarColor(dim.dimension)
-                      }"
-                    ></div>
-                  </div>
-                  <OTooltip v-if="dim.reasoning" :content="dim.reasoning" max-width="250px" />
-                </div>
-              </div>
-            </div>
-
-            <!-- 2.2B: Metadata Details Card -->
-            <div class="border border-[var(--color-border-default)] rounded-lg bg-[var(--color-surface-base)] p-4">
-              <div class="flex items-center gap-2 mb-4">
-                <OIcon name="info" size="sm" />
-                <div class="text-sm font-semibold">{{ $t("traces.evaluations.technicalDetails") }}</div>
-              </div>
-
-              <div class="flex flex-col gap-3">
-                <div class="grid grid-cols-[80px_1fr] gap-1">
-                  <div class="text-[10px] font-bold text-[var(--color-text-secondary)] uppercase">{{ $t("traces.evaluations.judge") }}</div>
-                  <div class="text-xs truncate">{{ getJudgeModel(record) }}</div>
-                </div>
-                <div class="grid grid-cols-[80px_1fr] gap-1">
-                  <div class="text-[10px] font-bold text-[var(--color-text-secondary)] uppercase">{{ $t("traces.evaluations.time") }}</div>
-                  <div class="text-xs">{{ formatTimestampDisplay(record._timestamp) }}</div>
-                </div>
-                <div class="grid grid-cols-[80px_1fr] gap-1">
-                  <div class="text-[10px] font-bold text-[var(--color-text-secondary)] uppercase">{{ $t("traces.evaluations.confidence") }}</div>
-                  <div class="text-xs">{{ formatScore(record.llm_evaluation_judge_confidence) }}</div>
-                </div>
-                <div class="grid grid-cols-[80px_1fr] gap-1">
-                  <div class="text-[10px] font-bold text-[var(--color-text-secondary)] uppercase">{{ $t("traces.evaluations.status") }}</div>
-                  <div>
-                    <OTag
-                      type="evalStatus"
-                      :value="record.exit_status"
-                      :label="record.exit_status?.toUpperCase() || 'UNKNOWN'"
-                    />
-                  </div>
-                </div>
-                <div v-if="record.is_multi_step" class="grid grid-cols-[80px_1fr] gap-1">
-                  <div class="text-[10px] font-bold text-[var(--color-text-secondary)] uppercase">{{ $t("traces.evaluations.type") }}</div>
-                  <div class="text-xs">{{ $t("traces.evaluations.multiStepAgent") }}</div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType, ref, watch, onMounted } from "vue";
-import { useI18n } from "vue-i18n";
-import { getQualityScoreColor } from "@/utils/llmUtils";
-import LLMContentRenderer from "./LLMContentRenderer.vue";
-import { useStore } from "vuex";
-import OSpinner from "@/lib/feedback/Spinner/OSpinner.vue";
-import OSelect from "@/lib/forms/Select/OSelect.vue";
-import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
-import OIcon from "@/lib/core/Icon/OIcon.vue";
-import OTag from "@/lib/core/Badge/OTag.vue";
-import OCollapsible from "@/lib/core/Collapsible/OCollapsible.vue";
-
-export default defineComponent({
-  name: "TraceEvaluationsView",
-  components: {
-    LLMContentRenderer,
-    OSpinner,
-    OSelect,
-    OTooltip,
-    OIcon,
-    OTag,
-    OCollapsible,
-  },
-  props: {
-    evalData: {
-      type: Array as PropType<any[]>,
-      default: () => [],
-    },
-    isLoading: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  setup(props) {
-    const store = useStore();
-    const { t } = useI18n();
-    const getBarWidth = (value: any): string => {
-      if (value == null) return "0%";
-      const num = parseFloat(value as any);
-      // If value is already in percentage range (> 1), use as is
-      // Otherwise multiply by 100
-      const percentage = num > 1 ? num : num * 100;
-      return `${Math.min(percentage, 100)}%`;
-    };
-
-    const formatScore = (score: number | null | undefined): string => {
-      if (score == null) return "N/A";
-      const num = parseFloat(score as any);
-      // If already in percentage range, use as is
-      const percentage = num > 1 ? num : num * 100;
-      return `${Math.min(percentage, 100).toFixed(0)}%`;
-    };
-
-    const getScoreClass = (score: number | null | undefined): string => {
-      if (score == null) return "score-neutral";
-      const s = parseFloat(score as any);
-      if (s >= 0.7) return "score-excellent";
-      if (s >= 0.4) return "score-good";
-      return "score-poor";
-    };
-
-    const formatTimestampDisplay = (timestamp: number | string): string => {
-      if (!timestamp) return "N/A";
-      try {
-        const ts =
-          typeof timestamp === "string" ? parseInt(timestamp) : timestamp;
-        const date = new Date(ts / 1000);
-        return date.toLocaleString();
-      } catch {
-        return "N/A";
-      }
-    };
-
-    // Normalise a flat span attribute (old schema) or a scores[] entry (new schema).
-    // Returns an array of { dimension, score (0.0-1.0), reasoning } objects.
-    type DimScore = { dimension: string; score: number; reasoning: string };
-
-    const LEGACY_DIM_FIELDS: Record<string, string> = {
-      llm_evaluation_judge_relevance: "relevance",
-      llm_evaluation_judge_groundedness: "groundedness",
-      llm_evaluation_judge_conciseness: "conciseness",
-      llm_evaluation_judge_instruction_following: "instruction_following",
-      llm_evaluation_judge_accuracy: "accuracy",
-      llm_evaluation_judge_trajectory_efficiency: "trajectory_efficiency",
-    };
-
-    const getDimensionScores = (record: any): DimScore[] => {
-      const dimsMap = new Map<string, DimScore>();
-
-      // 1. New Braintrust-style: llm_evaluation_judge_scores is a JSON string or array
-      const rawScores = record.llm_evaluation_judge_scores;
-      if (rawScores) {
-        try {
-          const parsed = typeof rawScores === "string" ? JSON.parse(rawScores) : rawScores;
-          if (Array.isArray(parsed)) {
-            parsed.forEach((s: any) => {
-              const dim = s.dimension ?? "unknown";
-              dimsMap.set(dim, {
-                dimension: dim,
-                score: parseFloat(s.score) ?? 0,
-                reasoning: s.reasoning ?? "",
-              });
-            });
-          }
-        } catch { /* ignore */ }
-      }
-
-      // 2. Scan for "evaluators" pattern: llm_evaluation_evaluators_{dim}_score
-      Object.keys(record).forEach(key => {
-        // Handle llm_evaluation_evaluators_{dim}_score
-        if (key.startsWith("llm_evaluation_evaluators_") && key.endsWith("_score")) {
-          const dim = key.replace("llm_evaluation_evaluators_", "").replace("_score", "");
-          // Skip if it's the main judge aggregate (we handled it or will handle it separately)
-          if (dim === "llm_judge") return;
-
-          const score = parseFloat(record[key]);
-          const reasoning = record[`llm_evaluation_evaluators_${dim}_reasoning`] ||
-                           record[`llm_evaluation_evaluators_${dim}_metadata`]?.reasoning || "";
-
-          if (!dimsMap.has(dim)) {
-            dimsMap.set(dim, { dimension: dim, score, reasoning });
-          }
-        }
-
-        // Handle other llm_evaluation_{dim}_score patterns
-        if (key.startsWith("llm_evaluation_") && key.endsWith("_score") &&
-            !key.includes("quality_score") && !key.includes("judge_scores") && !key.includes("evaluators")) {
-          const dim = key.replace("llm_evaluation_", "").replace("_score", "");
-          const score = parseFloat(record[key]);
-          const reasoning = record[`llm_evaluation_${dim}_reasoning`] || "";
-
-          if (!dimsMap.has(dim)) {
-            dimsMap.set(dim, { dimension: dim, score, reasoning });
-          }
-        }
-      });
-
-      // 3. Overall Judge as a dimension if available
-      if (record.llm_evaluation_evaluators_llm_judge_score != null && !dimsMap.has("llm_judge")) {
-        dimsMap.set("llm_judge", {
-          dimension: "llm_judge",
-          score: parseFloat(record.llm_evaluation_evaluators_llm_judge_score),
-          reasoning: record.llm_evaluation_evaluators_llm_judge_reasoning || ""
-        });
-      }
-
-      // 4. Legacy flat fields
-      for (const [field, dim] of Object.entries(LEGACY_DIM_FIELDS)) {
-        if (record[field] != null && !dimsMap.has(dim)) {
-          const raw = parseFloat(record[field]);
-          dimsMap.set(dim, {
-            dimension: dim,
-            score: raw > 1 ? raw / 100 : raw,
-            reasoning: ""
-          });
-        }
-      }
-
-      return Array.from(dimsMap.values());
-    };
-
-    const getVerdict = (record: any): string => {
-      if (record.llm_evaluation_judge_verdict) return record.llm_evaluation_judge_verdict;
-
-      // Try to extract from llm_judge_metadata
-      const metaStr = record.llm_evaluation_evaluators_llm_judge_metadata;
-      if (metaStr) {
-        try {
-          const meta = typeof metaStr === "string" ? JSON.parse(metaStr) : metaStr;
-          if (meta.verdict) return meta.verdict;
-        } catch { /* ignore */ }
-      }
-
-      return "N/A";
-    };
-
-    const getJudgeModel = (record: any): string => {
-      if (record.llm_evaluation_judge_model) return record.llm_evaluation_judge_model;
-
-      const metaStr = record.llm_evaluation_evaluators_llm_judge_metadata;
-      if (metaStr) {
-        try {
-          const meta = typeof metaStr === "string" ? JSON.parse(metaStr) : metaStr;
-          if (meta.model) return meta.model;
-        } catch { /* ignore */ }
-      }
-
-      return "LLM Judge";
-    };
-
-    const getWeakestDimension = (record: any): DimScore | null => {
-      const dims = getDimensionScores(record);
-      if (!dims.length) return null;
-      return dims.reduce((min, d) => d.score < min.score ? d : min, dims[0]);
-    };
-
-    const hasDimensionScores = (record: any): boolean => getDimensionScores(record).length > 0;
-
-    // Dimension label / icon / colour helpers
-    const DIM_LABELS: Record<string, string> = {
-      relevance: "Relevance",
-      groundedness: "Groundedness",
-      conciseness: "Conciseness",
-      instruction_following: "Instructions",
-      accuracy: "Accuracy",
-      trajectory_efficiency: "Efficiency",
-      completeness: "Completeness",
-      safety: "Safety",
-      slop_filter: "Slop Filter",
-      technical_question_retrieval: "Retrieval",
-      tool_effectiveness: "Tool Usage",
-      llm_judge: "Overall Judge",
-      numeric_grounding: "Numeric Grounding",
-    };
-    const DIM_ICONS: Record<string, string> = {
-      relevance: "done_all",
-      groundedness: "verified",
-      conciseness: "summarize",
-      instruction_following: "rule",
-      accuracy: "check-circle",
-      trajectory_efficiency: "flash_on",
-      completeness: "task_alt",
-      safety: "security",
-      slop_filter: "filter_alt",
-      technical_question_retrieval: "find_in_page",
-      tool_effectiveness: "build_circle",
-      llm_judge: "gavel",
-      numeric_grounding: "numbers",
-    };
-    const DIM_COLOR_CLASSES: Record<string, string> = {
-      relevance: "text-[var(--color-primary-600)]",
-      groundedness: "text-[var(--color-success-600)]",
-      conciseness: "text-purple-700",
-      instruction_following: "text-orange-500",
-      accuracy: "text-[var(--color-error-600)]",
-      trajectory_efficiency: "text-cyan-500",
-      completeness: "text-teal-500",
-      safety: "text-red-500",
-      slop_filter: "text-gray-600",
-      technical_question_retrieval: "text-slate-500",
-      tool_effectiveness: "text-indigo-500",
-      llm_judge: "text-amber-700",
-      numeric_grounding: "text-cyan-500",
-    };
-    const DIM_BAR_COLORS: Record<string, string> = {
-      relevance: "#2196F3",
-      groundedness: "#4CAF50",
-      conciseness: "#9C27B0",
-      instruction_following: "#FF9800",
-      accuracy: "#F44336",
-      trajectory_efficiency: "#00BCD4",
-      completeness: "#009688",
-      safety: "#F44336",
-      slop_filter: "#616161",
-      technical_question_retrieval: "#607D8B",
-      tool_effectiveness: "#3F51B5",
-      llm_judge: "#795548",
-      numeric_grounding: "#00BCD4",
-    };
-    const DIM_COLOR_CYCLE = ["#7C3AED","#0891B2","#D97706","#059669","#DC2626","#2563EB"];
-
-    const formatDimLabel = (dim: string): string =>
-      DIM_LABELS[dim] ?? dim.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
-    const getDimIcon = (dim: string): string => DIM_ICONS[dim] ?? "star-rate";
-    const getDimColorClass = (dim: string): string => DIM_COLOR_CLASSES[dim] ?? "text-gray-500";
-    const getDimBarColor = (dim: string): string => DIM_BAR_COLORS[dim] ?? DIM_COLOR_CYCLE[Math.abs(dim.charCodeAt(0)) % DIM_COLOR_CYCLE.length];
-
-    const parseCriticalIssues = (value: string | any[]): string[] => {
-      try {
-        if (Array.isArray(value)) return value;
-        if (typeof value === "string") {
-          const parsed = JSON.parse(value);
-          return Array.isArray(parsed) ? parsed : [value];
-        }
-        return [];
-      } catch {
-        // Fallback: check llm_judge_metadata for critical_issues
-        return [];
-      }
-    };
-
-    const getFixSuggestions = (record: any): string[] => {
-      const suggestions: string[] = [];
-
-      // 1. Try llm_evaluation_evaluators_llm_judge_metadata
-      const metaStr = record.llm_evaluation_evaluators_llm_judge_metadata;
-      if (metaStr) {
-        try {
-          const meta = typeof metaStr === "string" ? JSON.parse(metaStr) : metaStr;
-          if (Array.isArray(meta.improvement_suggestions) && meta.improvement_suggestions.length > 0) {
-            suggestions.push(...meta.improvement_suggestions);
-          } else if (meta.fix_recommendation) {
-            suggestions.push(meta.fix_recommendation);
-          }
-        } catch { /* ignore */ }
-      }
-
-      // 2. Fallback to generic reasoning if score is very low
-      if (suggestions.length === 0) {
-        const weakest = getWeakestDimension(record);
-        if (weakest && weakest.score < 0.3 && weakest.reasoning) {
-          suggestions.push(t('traces.traceEvaluationsView.focusOnImproving', { dimension: formatDimLabel(weakest.dimension), reasoning: weakest.reasoning }));
-        }
-      }
-
-      return suggestions;
-    };
-
-    const getHighlightedResponse = (record: any): string => {
-      let content = record.gen_ai_output_messages || "N/A";
-      if (content === "N/A") return content;
-
-      // 1. Try to get ungrounded numbers from metadata
-      const ungrounded: string[] = [];
-      const numericMetaStr = record.llm_evaluation_evaluators_numeric_grounding_metadata;
-      if (numericMetaStr) {
-        try {
-          const meta = typeof numericMetaStr === "string" ? JSON.parse(numericMetaStr) : numericMetaStr;
-          if (Array.isArray(meta.ungrounded)) {
-            ungrounded.push(...meta.ungrounded);
-          }
-        } catch { /* ignore */ }
-      }
-
-      if (ungrounded.length === 0) return content;
-
-      // 2. Highlight ungrounded numbers with a special class
-      // We wrap them in a span that we'll style to be prominent
-      ungrounded.forEach(val => {
-        // Simple string replacement for now, could be improved with regex
-        const regex = new RegExp(`\\b${val}\\b`, 'g');
-        content = content.replace(regex, `<span class="ungrounded-highlight" title="${t('traces.traceEvaluationsView.ungroundedValueDetected')}">${val}</span>`);
-      });
-
-      return content;
-    };
-
-    const truncateContent = (content: any, maxLength: number = 250): string => {
-      if (!content) return "N/A";
-      let text = "";
-      if (typeof content === "string") {
-        text = content;
-      } else {
-        try {
-          text = JSON.stringify(content, null, 2);
-        } catch {
-          text = String(content);
-        }
-      }
-      return text.length > maxLength
-        ? text.substring(0, maxLength) + "..."
-        : text;
-    };
-
-    const parseInputForMessages = (input: any): any[] => {
-      try {
-        // If it's already an array, return it
-        if (Array.isArray(input)) {
-          return input;
-        }
-        // If it's a string, try to parse as JSON
-        if (typeof input === "string") {
-          const parsed = JSON.parse(input);
-          if (Array.isArray(parsed)) {
-            return parsed;
-          }
-          // If parsed is an object with a "messages" field, use that
-          if (
-            parsed &&
-            typeof parsed === "object" &&
-            Array.isArray(parsed.messages)
-          ) {
-            return parsed.messages;
-          }
-        }
-        return [];
-      } catch {
-        return [];
-      }
-    };
-
-    const getRoleColor = (role: string): string => {
-      const colors: Record<string, string> = {
-        user: "rgba(25, 118, 210, 0.1)",
-        assistant: "rgba(76, 175, 80, 0.1)",
-        system: "rgba(255, 152, 0, 0.1)",
-        tool: "rgba(156, 39, 176, 0.1)",
-      };
-      return colors[role] || "rgba(158, 158, 158, 0.1)";
-    };
-
-    const parseMessages = (
-      input: any,
-      systemInstructions: any,
-    ): { system: string | null; user: any[] } => {
-      try {
-        let messages = [];
-        let system = null;
-
-        // Check gen_ai_system_instructions first (OTEL spec: separate attribute)
-        if (systemInstructions) {
-          let parsedSystem;
-          try {
-            if (typeof systemInstructions === "string") {
-              parsedSystem = JSON.parse(systemInstructions);
-            } else {
-              parsedSystem = systemInstructions;
-            }
-            if (Array.isArray(parsedSystem)) {
-              // OTEL system instructions format: [{"type": "text", "content": "..."}]
-              system = parsedSystem
-                .filter((p: any) => p.type === "text" && p.content)
-                .map((p: any) => p.content)
-                .join("\n") || null;
-            }
-          } catch {
-            system = typeof systemInstructions === "string"
-              ? systemInstructions
-              : null;
-          }
-        }
-
-        // Parse input into array for user/assistant messages
-        if (Array.isArray(input)) {
-          messages = input;
-        } else if (typeof input === "string") {
-          const parsed = JSON.parse(input);
-          if (Array.isArray(parsed)) {
-            messages = parsed;
-          } else if (parsed?.messages && Array.isArray(parsed.messages)) {
-            messages = parsed.messages;
-            system = parsed.system_instruction || null;
-          } else {
-            // If it's just a JSON object (not array), treat the whole thing as content
-            // but check for system_instruction first
-            if (parsed?.config?.system_instruction) {
-               return {
-                 system: parsed.config.system_instruction,
-                 user: [{ role: "user", content: t('traces.traceEvaluationsView.originalInputFullJson') + JSON.stringify(parsed, null, 2) }]
-               };
-            }
-            return {
-              system:
-                typeof input === "string"
-                  ? input
-                  : JSON.stringify(parsed, null, 2),
-              user: [],
-            };
-          }
-        } else {
-          // If input is not a string or array, stringify it
-          return { system: JSON.stringify(input, null, 2), user: [] };
-        }
-
-        // If no messages found, treat entire input as system/content
-        if (messages.length === 0) {
-          return {
-            system:
-              typeof input === "string"
-                ? input
-                : JSON.stringify(input, null, 2),
-            user: [],
-          };
-        }
-
-        // Separate system and user messages
-        const userMessages = messages.filter(
-          (msg: any) => msg.role !== "system" && msg.role !== undefined,
-        );
-        const systemMsg = messages.find((msg: any) => msg.role === "system");
-        system = systemMsg?.content || null;
-
-        return { system, user: userMessages };
-      } catch {
-        return { system: JSON.stringify(input, null, 2), user: [] };
-      }
-    };
-
-    const transformInputForRenderer = (input: any): string => {
-      try {
-        // If it's already an array of messages, stringify it for LLMContentRenderer
-        if (Array.isArray(input)) {
-          return JSON.stringify(input);
-        }
-        // If it's a string, try to parse and re-stringify to ensure valid JSON
-        if (typeof input === "string") {
-          try {
-            const parsed = JSON.parse(input);
-            // If it's already an array, stringify it
-            if (Array.isArray(parsed)) {
-              return JSON.stringify(parsed);
-            }
-            // If it's an object with a messages field, use that
-            if (
-              parsed &&
-              typeof parsed === "object" &&
-              Array.isArray(parsed.messages)
-            ) {
-              return JSON.stringify(parsed.messages);
-            }
-            // Otherwise return the original string
-            return input;
-          } catch {
-            // If parsing fails, return as is
-            return input;
-          }
-        }
-        // For other types, stringify
-        return JSON.stringify(input);
-      } catch {
-        return String(input);
-      }
-    };
-
-    // Template selector reactive data
-    const selectedTemplate = ref<string | null>(null);
-    const selectedTemplateData = ref<any | null>(null);
-    const availableTemplates = ref<any[]>([]);
-    const isLoadingTemplates = ref(false);
-
-    // Load available templates for the org
-    const loadTemplates = async (orgId: string) => {
-      try {
-        isLoadingTemplates.value = true;
-        const { evalTemplateService } =
-          await import("@/services/eval-template.service");
-        const templates = await evalTemplateService.listTemplates(orgId);
-        availableTemplates.value = templates;
-
-        // Auto-select based on llm_evaluation_template_id from the eval record
-        const templateIdFromRecord = props.evalData?.[0]?.llm_evaluation_template_id;
-        if (templateIdFromRecord) {
-          const matched = templates.find((t: any) => t.id === templateIdFromRecord);
-          if (matched) {
-            selectedTemplate.value = matched.id;
-            selectedTemplateData.value = matched;
-            return;
-          }
-        }
-        // Fallback: first template
-        if (templates.length > 0 && !selectedTemplate.value) {
-          selectedTemplate.value = templates[0].id;
-          selectedTemplateData.value = templates[0];
-        }
-      } catch (error) {
-        console.error("Failed to load evaluation templates:", error);
-        availableTemplates.value = [];
-      } finally {
-        isLoadingTemplates.value = false;
-      }
-    };
-
-    // Self-trigger when evalData arrives (handles async component mount timing)
-    const triggerLoad = (data: any[]) => {
-      if (data.length > 0) {
-        const orgId = store.state.selectedOrganization?.identifier;
-        if (orgId) loadTemplates(orgId);
-      }
-    };
-
-    onMounted(() => triggerLoad(props.evalData));
-    watch(() => props.evalData, triggerLoad);
-
-    // Handle template selection change
-    const onTemplateChange = (newTemplate: string | null) => {
-      if (newTemplate) {
-        const matched = availableTemplates.value.find((t: any) => t.id === newTemplate);
-        selectedTemplateData.value = matched || null;
-      } else {
-        selectedTemplateData.value = null;
-      }
-    };
-
-    // Returns true if this dimension was explicitly listed in the selected eval template
-    const isTemplateDimension = (dim: string): boolean => {
-      if (!selectedTemplateData.value?.dimensions?.length) return false;
-      return selectedTemplateData.value.dimensions.includes(dim);
-    };
-
-    // Returns PASS/FAIL for a dimension score (threshold: 0.5)
-    const getDimVerdict = (score: number): "PASS" | "FAIL" =>
-      score >= 0.5 ? "PASS" : "FAIL";
-
-    // Returns true if the currently selected template differs from the one
-    // that was actually used to evaluate this record.
-    const isTemplateMismatch = (record: any): boolean => {
-      if (!selectedTemplate.value) return false;
-      const usedId = record.llm_evaluation_template_id;
-      if (!usedId) return false; // unknown — no warning
-      return selectedTemplate.value !== usedId;
-    };
-
-    // Name of the template that was actually used to evaluate this record.
-    const evaluatedTemplateName = (record: any): string => {
-      const usedId = record.llm_evaluation_template_id;
-      if (!usedId) return t('traces.traceEvaluationsView.unknown');
-      const matched = availableTemplates.value.find((t: any) => t.id === usedId);
-      return matched?.name ?? usedId;
-    };
-
-    return {
-      formatScore,
-      getBarWidth,
-      getScoreClass,
-      formatTimestampDisplay,
-      hasDimensionScores,
-      getDimensionScores,
-      getWeakestDimension,
-      formatDimLabel,
-      getDimIcon,
-      getDimColorClass,
-      getDimBarColor,
-      parseCriticalIssues,
-      truncateContent,
-      parseInputForMessages,
-      transformInputForRenderer,
-      parseMessages,
-      getJudgeModel,
-      getVerdict,
-      getFixSuggestions,
-      getHighlightedResponse,
-      selectedTemplate,
-      selectedTemplateData,
-      availableTemplates,
-      isLoadingTemplates,
-      loadTemplates,
-      onTemplateChange,
-      isTemplateDimension,
-      getDimVerdict,
-      isTemplateMismatch,
-      evaluatedTemplateName,
-    };
-  },
-});
-</script>
-
-<style>
-/* Ungrounded highlighting */
-.ungrounded-highlight {
-  background-color: rgba(239, 68, 68, 0.15);
-  border-bottom: 2px dashed #ef4444;
-  padding: 0 2px;
-  border-radius: 2px;
-  font-weight: bold;
-  cursor: help;
-  color: #ef4444;
-}
-
-body.body--dark .ungrounded-highlight {
-  background-color: rgba(239, 68, 68, 0.25);
-}
-
-/* Mobile responsiveness */
-@media (max-width: 1024px) {
-  .flex.mb-4.h-28 {
-    flex-wrap: wrap;
-    height: auto !important;
-  }
-
-  .flex.mb-4.h-28 .flex-1 {
-    min-width: calc(33.33% - 8px);
-    height: 112px;
-  }
-
-  .flex.gap-4 {
-    flex-direction: column;
-  }
-
-  .flex.gap-4 .flex-col {
-    width: 100% !important;
-  }
-}
-
-@media (max-width: 640px) {
-  .flex.mb-4 .flex-1 {
-    min-width: calc(50% - 8px);
-  }
-}
-</style>
diff --git a/web/src/plugins/traces/TraceHeader.spec.ts b/web/src/plugins/traces/TraceHeader.spec.ts
index 59073fd60a..81c9aa1c6d 100644
--- a/web/src/plugins/traces/TraceHeader.spec.ts
+++ b/web/src/plugins/traces/TraceHeader.spec.ts
@@ -96,7 +96,6 @@ describe("TraceHeader", () => {
           store: mockStore,
         },
         stubs: {
-          "q-resize-observer": true,
         },
       },
     });
@@ -166,7 +165,7 @@ describe("TraceHeader", () => {
 
     it("should have correct avatar properties", () => {
       const resizeBtn = wrapper.find('[data-test="trace-header-resize-btn"]');
-      expect(resizeBtn.classes()).toContain("bg-(--o2-primary)");
+      expect(resizeBtn.classes()).toContain("bg-accent");
       expect(resizeBtn.classes()).toContain("rounded-full");
     });
   });
@@ -248,8 +247,7 @@ describe("TraceHeader", () => {
       );
       const ticLines = wrapper.findAll('[data-test^="trace-header-tic-line-"]');
       ticLines.forEach((tic) => {
-        expect(tic.classes()).toContain("bg-[#cacaca]");
-        expect(tic.classes()).not.toContain("bg-[#3c3c3c]");
+        expect(tic.classes()).toContain("bg-border-default");
       });
     });
 
@@ -279,7 +277,6 @@ describe("TraceHeader", () => {
             store: darkStore,
           },
           stubs: {
-            "q-resize-observer": true,
           },
         },
       });
@@ -288,7 +285,8 @@ describe("TraceHeader", () => {
         '[data-test^="trace-header-tic-line-"]',
       );
       ticLines.forEach((tic) => {
-        expect(tic.classes()).toContain("bg-[#3c3c3c]");
+        // Token-based utility handles dark mode; class is identical in both themes.
+        expect(tic.classes()).toContain("bg-border-default");
       });
 
       darkWrapper.unmount();
@@ -320,7 +318,6 @@ describe("TraceHeader", () => {
             store: darkStore,
           },
           stubs: {
-            "q-resize-observer": true,
           },
         },
       });
@@ -329,7 +326,8 @@ describe("TraceHeader", () => {
         '[data-test^="trace-header-tic-line-"]',
       );
       ticLines.forEach((tic) => {
-        expect(tic.classes()).toContain("bg-[#3c3c3c]");
+        // Token-based utility handles dark mode; class is identical in both themes.
+        expect(tic.classes()).toContain("bg-border-default");
       });
 
       darkWrapper.unmount();
@@ -535,7 +533,6 @@ describe("TraceHeader", () => {
             store: mockStore,
           },
           stubs: {
-            "q-resize-observer": true,
           },
         },
       });
diff --git a/web/src/plugins/traces/TraceHeader.vue b/web/src/plugins/traces/TraceHeader.vue
index 0589aa5c85..a7d7833900 100644
--- a/web/src/plugins/traces/TraceHeader.vue
+++ b/web/src/plugins/traces/TraceHeader.vue
@@ -16,7 +16,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <div
-    class="flex justify-start items-center bg-[color-mix(in_srgb,currentColor_5%,transparent)] h-7.5 top-0 z-1999 sticky rounded-t-lg"
+    class="flex justify-start items-center bg-[color-mix(in_srgb,currentColor_5%,transparent)] h-7.5 top-0 z-1999 sticky rounded-t-default"
     data-test="trace-header"
     :style="
       isSidebarOpen && {
@@ -33,11 +33,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     >
       {{ t('traces.traceHeader.operationName') }}
       <div
-        class="bg-(--o2-primary) inline-flex items-center justify-center w-5 h-5 rounded-full absolute -right-2.5 -top-0.5 z-10 cursor-col-resize"
+        class="bg-accent inline-flex items-center justify-center w-5 h-5 rounded-full absolute -right-2.5 -top-0.5 z-10 cursor-col-resize"
         @mousedown="handleMouseDown"
         data-test="trace-header-resize-btn"
       >
-        <OIcon name="drag-indicator" size="sm"  />
+        <OIcon name="drag-indicator" size="sm" class="text-white" />
       </div>
     </div>
     <div
@@ -77,10 +77,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </div>
       <div
         v-for="(tick, index) in baseTracePosition['tics']"
-        class="trace-tic absolute -top-0.75 w-px bg-[#cacaca] z-1 h-6.5"
+        class="trace-tic absolute -top-0.75 w-px bg-border-default z-1 h-6.5"
         :class="{
           'z-5 hidden': index === 0,
-          'bg-[#3c3c3c]': store.state.theme === 'dark',
         }"
         :key="tick.value + index"
         :style="{
diff --git a/web/src/plugins/traces/TraceTree.spec.ts b/web/src/plugins/traces/TraceTree.spec.ts
index 81eb3213a3..79dd3d38bc 100644
--- a/web/src/plugins/traces/TraceTree.spec.ts
+++ b/web/src/plugins/traces/TraceTree.spec.ts
@@ -249,7 +249,6 @@ function mountTraceTree(
     global: {
       plugins: [i18n, router, storePlugin],
       stubs: {
-        "q-resize-observer": true,
         "span-block": true,
       },
     },
@@ -426,7 +425,7 @@ describe("TraceTree", () => {
 
       const highlightedSpans = wrapper
         .findAll('[data-test^="trace-tree-span-service-name-"]')
-        .filter((el) => el.classes().includes("bg-yellow-300"));
+        .filter((el) => el.classes().includes("bg-table-highlight-bg"));
       expect(highlightedSpans.length).toBeGreaterThan(0);
     });
 
@@ -439,7 +438,7 @@ describe("TraceTree", () => {
 
       const currentMatch = wrapper
         .findAll('[data-test^="trace-tree-span-service-name-"]')
-        .filter((el) => el.classes().includes("text-red-600"));
+        .filter((el) => el.classes().includes("text-status-error-text"));
       expect(currentMatch.length).toBeGreaterThan(0);
     });
 
@@ -754,7 +753,7 @@ describe("TraceTree", () => {
         '[data-test="trace-tree-span-operation-name-container-d9603ec7f76eb499"]',
       );
       expect(operationContainer.exists()).toBe(true);
-      expect(operationContainer.classes()).toContain("bg-white");
+      expect(operationContainer.classes()).toContain("bg-surface-base");
     });
 
     it("should apply dark theme when store theme is dark", async () => {
@@ -777,7 +776,8 @@ describe("TraceTree", () => {
         '[data-test="trace-tree-span-operation-name-container-d9603ec7f76eb499"]',
       );
       expect(operationContainer.exists()).toBe(true);
-      expect(operationContainer.classes()).toContain("bg-dark");
+      // Token-based utility handles dark mode; class is identical in both themes.
+      expect(operationContainer.classes()).toContain("bg-surface-base");
 
       darkWrapper.unmount();
     });
diff --git a/web/src/plugins/traces/TraceTree.vue b/web/src/plugins/traces/TraceTree.vue
index e97669c688..ec151d3023 100644
--- a/web/src/plugins/traces/TraceTree.vue
+++ b/web/src/plugins/traces/TraceTree.vue
@@ -63,7 +63,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   : depth === 1
                     ? spanDimensions.height / 2 + 'px'
                     : spanDimensions.height + 'px',
-                borderLeft: '1.5px solid var(--o2-border-color)',
+                borderLeft: '1.5px solid var(--color-card-glass-border)',
                 pointerEvents: 'none',
                 zIndex: 1,
               }"
@@ -80,7 +80,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               width: (spans as any[])[virtualRow.index].hasChildSpans
                 ? (spanDimensions?.gap ?? 15) / 2 + 'px'
                 : (spanDimensions?.gap ?? 15) + 5 + 'px',
-              borderTop: '1.5px solid var(--o2-border-color)',
+              borderTop: '1.5px solid var(--color-card-glass-border)',
               pointerEvents: 'none',
               zIndex: 1,
             }"
@@ -103,7 +103,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           @mouseleave="onUnhoverSpan"
           :data-test="`trace-tree-span-container-${(spans as any[])[virtualRow.index].spanId}`"
         >
-          <div :style="{ width: leftWidth + 'px' }" class="pl-[0.375rem]">
+          <div :style="{ width: leftWidth + 'px' }" class="pl-1.5">
             <div
               :style="{
                 height: '100%',
@@ -119,10 +119,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :title="(spans as any[])[virtualRow.index].operationName"
             >
               <div
-                class="flex flex-nowrap w-full h-7.5 overflow-visible relative-position operation-name-container cursor-pointer items-center"
-                :class="[
-                  store.state.theme === 'dark' ? 'bg-dark' : 'bg-white',
-                ]"
+                class="flex flex-nowrap w-full h-7.5 overflow-visible relative-position operation-name-container cursor-pointer items-center bg-surface-base"
                 :data-test="`trace-tree-span-operation-name-container-${(spans as any[])[virtualRow.index].spanId}`"
                 @click="selectSpan((spans as any[])[virtualRow.index].spanId)"
                 @mouseenter="
@@ -149,7 +146,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </div>
                 <div
                   v-if="(spans as any[])[virtualRow.index].hasChildSpans"
-                  class="span-count-box min-w-5 h-5 py-0 px-1 rounded-full border flex items-center justify-center text-[0.7rem] font-semibold mr-1 transition-colors duration-200 cursor-pointer border-(--o2-border-color)! relative"
+                  class="span-count-box min-w-5 h-5 py-0 px-1 rounded-full border flex items-center justify-center text-2xs font-semibold mr-1 transition-colors duration-200 cursor-pointer border-card-glass-border! relative hover:bg-interactive-hover-bg"
                   :style="{
                     color: (spans as any[])[virtualRow.index].style.color,
                   }"
@@ -172,7 +169,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       left: '0.5rem',
                       bottom: '-6px',
                       height: '5px',
-                      borderLeft: '1.5px solid var(--o2-border-color)',
+                      borderLeft: '1.5px solid var(--color-card-glass-border)',
                       pointerEvents: 'none',
                       zIndex: 1,
                     }"
@@ -214,22 +211,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                           'ERROR'
                         "
                         name="error" size="sm"
-                        class="text-[var(--o2-status-error-text)]! mr-1"
+                        class="text-status-error-text! mr-1"
                         :title="t('traces.traceTree.errorSpan')"
                         :data-test="`trace-tree-span-error-icon-${(spans as any[])[virtualRow.index].spanId}`"
                       />
                       <span
                         class="text-sm font-medium font-bold mr-2"
                         :class="{
-                          'bg-yellow-300 font-bold': isHighlighted(
+                          'bg-table-highlight-bg text-table-highlight-text font-bold': isHighlighted(
                             (spans as any[])[virtualRow.index].spanId,
                           ),
-                          'text-gray-900':
-                            store.state.theme === 'dark' &&
-                            isHighlighted(
-                              (spans as any[])[virtualRow.index].spanId,
-                            ),
-                          'bg-yellow-300 text-red-600 font-bold':
+                          'bg-table-highlight-bg text-status-error-text font-bold':
                             currentSelectedValue ===
                             (spans as any[])[virtualRow.index].spanId,
                         }"
@@ -255,18 +247,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                           )
                         "
                         :title="getSpanTech((spans as any[])[virtualRow.index])"
-                        class="mr-1 shrink-0 w-[0.875rem] h-[0.875rem] inline-block opacity-60"
+                        class="mr-1 shrink-0 w-3.5 h-3.5 inline-block opacity-60"
                         aria-hidden="true"
                         alt=""
                         :data-test="`trace-tree-span-tech-icon-${(spans as any[])[virtualRow.index].spanId}`"
                       />
                       <span
-                        class="text-sm"
-                        :class="
-                          store.state.theme === 'dark'
-                            ? 'text-gray-400'
-                            : 'text-blue-grey-9'
-                        "
+                        class="text-sm text-text-secondary"
                         :data-test="`trace-tree-span-operation-name-${(spans as any[])[virtualRow.index].spanId}`"
                         >{{
                           (spans as any[])[virtualRow.index].operationName
@@ -276,7 +263,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <!-- LLM Metrics -->
                     <div
                       v-if="isLLMTrace((spans as any[])[virtualRow.index])"
-                      class="flex items-center text-xs text-[var(--o2-status-error-text)]! mt-[-0.125rem] mb-[0.125rem] leading-none"
+                      class="flex items-center text-xs text-status-error-text! mt-[-0.125rem] mb-0.5 leading-none"
                     >
                       <span
                         v-if="
@@ -312,7 +299,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       v-if="
                         getHttpStatusVars((spans as any[])[virtualRow.index])
                       "
-                      class="text-xs font-semibold leading-none py-[0.4rem] px-1 mr-[0.25rem] rounded whitespace-nowrap"
+                      class="text-xs font-semibold leading-none py-[0.4rem] px-1 mr-1 rounded-default whitespace-nowrap"
                       :style="{
                         backgroundColor: getHttpStatusVars(
                           (spans as any[])[virtualRow.index],
@@ -336,7 +323,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         fontSize: '0.625rem',
                         lineHeight: 1,
                         gap: '0.125rem',
-                        color: 'var(--o2-text-secondary)',
+                        color: 'var(--color-text-secondary)',
                         whiteSpace: 'nowrap',
                       }"
                       :title="getEventCount((spans as any[])[virtualRow.index]) > 1 ? t('traces.traceTree.spanEvents', { count: getEventCount((spans as any[])[virtualRow.index]) }) : t('traces.traceTree.spanEvent', { count: getEventCount((spans as any[])[virtualRow.index]) })"
@@ -405,6 +392,7 @@ import {
 } from "vue";
 import useTraces from "@/composables/useTraces";
 import { useStore } from "vuex";
+import useTheme from "@/composables/useTheme";
 import SpanBlock from "./SpanBlock.vue";
 import SpanKindBadge from "./components/SpanKindBadge.vue";
 import { useI18n } from "vue-i18n";
@@ -494,6 +482,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const { buildQueryDetails, navigateToLogs } = useTraces();
     const store = useStore();
+    const { isDark } = useTheme();
 
     const { t } = useI18n();
     const router = useRouter();
@@ -756,7 +745,6 @@ export default defineComponent({
 
     // ── Icon maps ────────────────────────────────────────────────────────────
     const spanServiceIconUrlMap = computed(() => {
-      const isDark = store.state.theme === "dark";
       const cache = new Map<string, string>();
       for (const span of props.spans as any[]) {
         const key = `${span.serviceName}/${span.style?.color ?? ""}`;
@@ -765,7 +753,7 @@ export default defineComponent({
             key,
             getServiceIconDataUrl(
               span.serviceName,
-              isDark,
+              isDark.value,
               span.style?.color ?? "#9e9e9e",
             ),
           );
@@ -788,12 +776,11 @@ export default defineComponent({
     };
 
     const spanTechIconUrlMap = computed(() => {
-      const isDark = store.state.theme === "dark";
       const map = new Map<string, string>();
       for (const span of props.spans as any[]) {
         const tech = getSpanTech(span);
         if (tech && !map.has(tech)) {
-          const url = getSpanTechIconDataUrl(tech, isDark);
+          const url = getSpanTechIconDataUrl(tech, isDark.value);
           if (url) map.set(tech, url);
         }
       }
@@ -814,22 +801,22 @@ export default defineComponent({
       if (code === null || code < 200) return null;
       if (code < 300)
         return {
-          text: "var(--o2-status-success-text)",
-          bg: "var(--o2-status-success-bg)",
+          text: "var(--color-status-success-text)",
+          bg: "var(--color-status-success-bg)",
         };
       if (code < 400)
         return {
-          text: "var(--o2-status-info-text)",
-          bg: "var(--o2-status-info-bg)",
+          text: "var(--color-status-info-text)",
+          bg: "var(--color-status-info-bg)",
         };
       if (code < 500)
         return {
-          text: "var(--o2-status-warning-text)",
-          bg: "var(--o2-status-warning-bg)",
+          text: "var(--color-status-warning-text)",
+          bg: "var(--color-status-warning-bg)",
         };
       return {
-        text: "var(--o2-status-error-text)",
-        bg: "var(--o2-status-error-bg)",
+        text: "var(--color-status-error-text)",
+        bg: "var(--color-status-error-bg)",
       };
     };
 
@@ -881,26 +868,27 @@ export default defineComponent({
 });
 </script>
 
-<style>
-.span-count-box:hover {
-  background-color: rgba(0, 0, 0, 0.05);
-}
-
-.bg-dark .span-count-box:hover {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-
-/* Hover highlight via CSS — no JS required */
-.span-row:hover::before {
+<style scoped>
+/* keep(complex-state): span-row hover/selected ::before overlay tints plus
+   parent-state child reveal chains target descendants and pseudo-overlays that
+   Tailwind utilities can't express. The overlay is always present (transparent
+   at rest) so its background-color can transition — matching OTable row hover
+   (transition-colors duration-150) instead of snapping in abruptly. */
+.span-row::before {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
-  background-color: rgba(0, 123, 255, 0.2);
+  background-color: transparent;
   pointer-events: none;
   z-index: 999;
+  transition: background-color 150ms ease;
+}
+
+.span-row:hover::before {
+  background-color: color-mix(in srgb, var(--color-accent) 20%, transparent);
 }
 
 .span-row:hover .operation-name-container {
@@ -912,15 +900,7 @@ export default defineComponent({
 }
 
 .span-row.span-row-selected::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background-color: rgba(0, 123, 255, 0.35);
-  pointer-events: none;
-  z-index: 999;
+  background-color: color-mix(in srgb, var(--color-accent) 35%, transparent);
 }
 
 .span-row.span-row-selected .operation-name-container {
diff --git a/web/src/plugins/traces/TracesNoStreamState.vue b/web/src/plugins/traces/TracesNoStreamState.vue
index fed4ad54a6..e88191766a 100644
--- a/web/src/plugins/traces/TracesNoStreamState.vue
+++ b/web/src/plugins/traces/TracesNoStreamState.vue
@@ -57,7 +57,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           icon="account-tree"
           :data-test="`traces-no-stream-recent-${recentStream}`"
           @click="emit('pick-stream', recentStream)"
-        ><span class="truncate max-w-[10rem]">{{ recentStream }}</span></EmptyStateIngestionChip>
+        ><span class="truncate max-w-40">{{ recentStream }}</span></EmptyStateIngestionChip>
       </div>
     </template>
   </OEmptyState>
diff --git a/web/src/plugins/traces/TurnPreviewCard.vue b/web/src/plugins/traces/TurnPreviewCard.vue
index 0920fda657..a415056c0c 100644
--- a/web/src/plugins/traces/TurnPreviewCard.vue
+++ b/web/src/plugins/traces/TurnPreviewCard.vue
@@ -33,15 +33,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <OTooltip :side="side" :delay="delay" max-width="260px" content-class="p-0!">
       <template #content>
         <div
-          class="w-[252px] py-[11px] px-3 text-xs text-[var(--o2-text-primary)]"
+          class="w-63 py-2.75 px-3 text-xs text-text-body"
           :data-test="`turn-preview-${index + 1}`"
         >
           <!-- Header: Turn N · time · status -->
           <div class="flex items-center gap-2 mb-2">
-            <span class="text-[12.5px] font-bold">
+            <span class="text-compact font-bold">
               {{ t('traces.sessionDetail.turnLabel') }} {{ index + 1 }}
             </span>
-            <span class="text-[10px] text-[var(--o2-text-muted)]">{{ timeLabel }}</span>
+            <span class="text-3xs text-text-muted">{{ timeLabel }}</span>
             <OBadge
               size="sm"
               class="ml-auto"
@@ -52,9 +52,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </div>
 
           <!-- User message preview -->
-          <div class="mb-[9px] leading-[1.5]">
+          <div class="mb-2.25 leading-[1.5]">
             <span
-              class="block text-[9.5px] font-bold uppercase tracking-[0.05em] text-[var(--o2-text-muted)] mb-0.5"
+              class="block text-3xs font-bold uppercase tracking-[0.05em] text-text-muted mb-0.5"
             >
               {{ t('traces.sessionDetail.roles.user') }}
             </span>
@@ -63,22 +63,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
           <!-- Stats grid: Cost · Latency · Tokens · Cache -->
           <div
-            class="grid grid-cols-2 gap-x-3 gap-y-[7px] border-t border-[var(--o2-border-color)] pt-[9px]"
+            class="grid grid-cols-2 gap-x-3 gap-y-[7px] border-t border-card-glass-border pt-2.25"
           >
-            <div class="flex items-center justify-between text-[11px]">
-              <span class="text-[var(--o2-text-muted)]">{{ t('traces.sessionDetail.stats.cost') }}</span>
+            <div class="flex items-center justify-between text-2xs">
+              <span class="text-text-muted">{{ t('traces.sessionDetail.stats.cost') }}</span>
               <span class="font-[650]">{{ costLabel }}</span>
             </div>
-            <div class="flex items-center justify-between text-[11px]">
-              <span class="text-[var(--o2-text-muted)]">{{ t('traces.sessionDetail.kpi.duration') }}</span>
+            <div class="flex items-center justify-between text-2xs">
+              <span class="text-text-muted">{{ t('traces.sessionDetail.kpi.duration') }}</span>
               <span class="font-[650]">{{ latencyLabel }}</span>
             </div>
-            <div class="flex items-center justify-between text-[11px]">
-              <span class="text-[var(--o2-text-muted)]">{{ t('traces.sessionDetail.kpi.tokens') }}</span>
+            <div class="flex items-center justify-between text-2xs">
+              <span class="text-text-muted">{{ t('traces.sessionDetail.kpi.tokens') }}</span>
               <span class="font-[650]">{{ tokensLabel }}</span>
             </div>
-            <div class="flex items-center justify-between text-[11px]">
-              <span class="text-[var(--o2-text-muted)]">{{ t('traces.sessionDetail.stats.cache') }}</span>
+            <div class="flex items-center justify-between text-2xs">
+              <span class="text-text-muted">{{ t('traces.sessionDetail.stats.cache') }}</span>
               <span class="font-[650]">{{ cachePct }}%</span>
             </div>
           </div>
diff --git a/web/src/plugins/traces/components/ServiceCatalogBarCell.vue b/web/src/plugins/traces/components/ServiceCatalogBarCell.vue
index dece023871..210d7e3018 100644
--- a/web/src/plugins/traces/components/ServiceCatalogBarCell.vue
+++ b/web/src/plugins/traces/components/ServiceCatalogBarCell.vue
@@ -15,8 +15,30 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="flex flex-col gap-[0.15rem] w-full min-w-0">
-    <span class="text-[0.75rem] leading-none tabular-nums truncate">
+  <!-- Inline: number vertically centered on the row's shared baseline, with the
+       bar pinned as a thin underline at the cell's bottom. Use when the column
+       sits alongside single-line numeric columns so the numbers line up. -->
+  <div
+    v-if="inline"
+    class="relative flex items-center h-full w-full min-w-0 min-h-7"
+    :class="align === 'right' ? 'justify-end' : 'justify-start'"
+  >
+    <span class="text-xs leading-none tabular-nums truncate min-w-0">
+      {{ label }}
+      <OTooltip v-if="tooltip" :content="tooltip" />
+    </span>
+    <!-- Bar wrapped in an absolute div: OProgressBar's own root is `relative w-full`,
+         so positioning it directly would keep it in flow and crush the number. -->
+    <div class="pointer-events-none absolute inset-x-0 bottom-0.5">
+      <OProgressBar :value="ratio" :variant="variant" size="xs" />
+    </div>
+  </div>
+  <!-- Stacked (default): number above a full-width bar. -->
+  <div v-else class="flex flex-col gap-[0.15rem] w-full min-w-0">
+    <span
+      class="text-xs leading-none tabular-nums truncate"
+      :class="align === 'right' ? 'text-right' : 'text-left'"
+    >
       {{ label }}
       <OTooltip v-if="tooltip" :content="tooltip" />
     </span>
@@ -36,6 +58,10 @@ const props = defineProps<{
   label: string;
   variant?: ProgressBarVariant;
   tooltip?: string;
+  align?: "left" | "right";
+  /** Render the number inline (row-baseline) with the bar as a bottom underline,
+   *  so it aligns with single-line numeric columns in the same table row. */
+  inline?: boolean;
 }>();
 
 const ratio = computed(() =>
diff --git a/web/src/plugins/traces/components/SpanStatusCodeBadge.vue b/web/src/plugins/traces/components/SpanStatusCodeBadge.vue
index 2be1c648d5..4747ee0a8e 100644
--- a/web/src/plugins/traces/components/SpanStatusCodeBadge.vue
+++ b/web/src/plugins/traces/components/SpanStatusCodeBadge.vue
@@ -20,13 +20,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>. -->
   - HTTP coloring: 2xx=success, 3xx=info, 4xx=warning, 5xx=error
   - gRPC coloring: 0=success (OK), non-zero=error (any error)
   - Renders "—" when neither value is present.
-  - Colors from --o2-status-* tokens defined in _variables.scss.
+  - Colors from the --color-status-* design tokens.
 -->
 <template>
   <span
     v-if="!displayValue"
     data-test="span-status-code-badge-empty"
-    class="text-[var(--o2-status-neutral-text)]"
+    class="text-status-neutral-text"
   >
     —
   </span>
diff --git a/web/src/plugins/traces/components/TraceErrorTab.vue b/web/src/plugins/traces/components/TraceErrorTab.vue
index d2096effd3..898e81a19f 100644
--- a/web/src/plugins/traces/components/TraceErrorTab.vue
+++ b/web/src/plugins/traces/components/TraceErrorTab.vue
@@ -15,22 +15,23 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div
+  <OEmptyState
     v-if="!hasSpanError"
-    class="w-full flex items-center justify-center text-center pt-4 font-bold tab-content-dynamic-height h-full"
+    size="inline"
+    variant="no-results"
+    :title="t('traces.noErrorPresent')"
+    hide-action
     data-test="trace-details-sidebar-no-error"
-  >
-    {{ t("traces.noErrorPresent") }}
-  </div>
+  />
   <!-- Error Summary: HTTP / gRPC status code -->
   <div
     v-if="hasSpanError && (spanStatusCode || spanGrpcStatusCode)"
-    class="error-summary rounded p-[0.5rem] mb-[0.5rem] border border-solid bg-[var(--o2-status-error-bg)] border-[var(--o2-status-error-text)]"
+    class="error-summary rounded-default p-2 mb-2 border border-solid bg-status-error-bg border-status-error-text"
     data-test="trace-details-sidebar-error-summary"
   >
     <div class="flex-col items-center gap-1">
       <div
-        class="text-[var(--o2-text-4)]! text-[0.85rem] tracking-[0.03rem] pl-[0.5rem] w-full pb-[0.125rem]"
+        class="text-text-label! text-sm tracking-[0.03rem] pl-2 w-full pb-0.5"
       >
         {{ spanStatusCode ? t("traces.traceErrorTab.httpStatusCode") : t("traces.traceErrorTab.grpcStatusCode") }}
       </div>
@@ -39,11 +40,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           v-if="spanStatusCode || spanGrpcStatusCode"
           :code="spanStatusCode"
           :grpc-code="spanGrpcStatusCode"
-          class="text-[0.9rem]! flex! items-center"
+          class="text-sm! flex! items-center"
         />
         <span
-          class="text-[0.9rem] font-semibold"
-          :style="{ color: 'var(--o2-status-error-text)' }"
+          class="text-sm font-semibold text-status-error-text"
           data-test="trace-details-sidebar-error-summary-title"
         >
           {{ statusCodeTitle }}
@@ -55,19 +55,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <!-- DB Response Status Code -->
   <div
     v-if="hasSpanError && spanDbResponseStatusCode"
-    class="error-summary rounded p-[0.5rem] mb-[0.5rem] border border-solid bg-[var(--o2-status-error-bg)] border-[var(--o2-status-error-text)]"
+    class="error-summary rounded-default p-2 mb-2 border border-solid bg-status-error-bg border-status-error-text"
     data-test="trace-details-sidebar-db-response-status-code"
   >
     <div class="flex-col items-center gap-1">
       <div
-        class="text-[var(--o2-text-4)]! text-[0.65rem] tracking-[0.03rem] pl-[0.5rem] w-full pb-[0.125rem]"
+        class="text-text-label! text-3xs tracking-[0.03rem] pl-2 w-full pb-0.5"
       >
         {{ t("traces.traceErrorTab.dbResponseStatusCode") }}
       </div>
-      <div class="flex items-center pl-[0.5rem]">
+      <div class="flex items-center pl-2">
         <span
-          class="text-[0.9rem] font-semibold"
-          :style="{ color: 'var(--o2-status-error-text)' }"
+          class="text-sm font-semibold text-status-error-text"
           data-test="trace-details-sidebar-db-response-status-code-value"
         >
           {{ spanDbResponseStatusCode }}
@@ -79,19 +78,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <!-- Process Exit Code -->
   <div
     v-if="hasSpanError && spanProcessExitCode"
-    class="error-summary rounded p-[0.5rem] mb-[0.5rem] border border-solid bg-[var(--o2-status-error-bg)] border-[var(--o2-status-error-text)]"
+    class="error-summary rounded-default p-2 mb-2 border border-solid bg-status-error-bg border-status-error-text"
     data-test="trace-details-sidebar-process-exit-code"
   >
     <div class="flex-col items-center gap-1">
       <div
-        class="text-[var(--o2-text-4)]! text-[0.65rem] tracking-[0.03rem] pl-[0.5rem] w-full pb-[0.125rem]"
+        class="text-text-label! text-3xs tracking-[0.03rem] pl-2 w-full pb-0.5"
       >
         {{ t("traces.traceErrorTab.processExitCode") }}
       </div>
-      <div class="flex items-center pl-[0.5rem]">
+      <div class="flex items-center pl-2">
         <span
-          class="text-[0.9rem] font-semibold"
-          :style="{ color: 'var(--o2-status-error-text)' }"
+          class="text-sm font-semibold text-status-error-text"
           data-test="trace-details-sidebar-process-exit-code-value"
         >
           {{ spanProcessExitCode }}
@@ -105,18 +103,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     v-if="
       hasSpanError && (errorBannerTitle || errorBannerMessage || spanErrorType)
     "
-    class="error-summary rounded p-[0.5rem] mb-[0.5rem] border border-solid bg-[var(--o2-status-error-bg)] border-[var(--o2-status-error-text)]"
+    class="error-summary rounded-default p-2 mb-2 border border-solid bg-status-error-bg border-status-error-text"
     data-test="trace-details-sidebar-error-summary"
   >
-    <div class="flex items-center gap-2 mb-[0.25rem]">
+    <div class="flex items-center gap-2 mb-1">
       <OIcon
         name="error"
         size="sm"
-        class="text-[var(--o2-status-error-text)]"
+        class="text-status-error-text"
       />
       <span
-        class="text-[1rem] font-semibold"
-        :style="{ color: 'var(--o2-status-error-text)' }"
+        class="text-base font-semibold text-status-error-text"
         data-test="trace-details-sidebar-error-summary-title"
       >
         {{ errorBannerTitle }}
@@ -124,8 +121,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </div>
     <div
       v-if="errorBannerMessage"
-      class="ml-[1.5rem] text-[0.875rem] mb-[0.25rem]"
-      :style="{ color: 'var(--o2-text-secondary)' }"
+      class="ml-6 text-sm mb-1 text-text-secondary"
       data-test="trace-details-sidebar-error-summary-message"
     >
       {{ errorBannerMessage }}
@@ -135,7 +131,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <!-- Exceptions Table -->
   <template v-if="hasExceptionEvents.length">
     <div
-      class="text-[0.9rem] pt-[0.325rem]! font-semibold pb-[0.325rem] text-[var(--o2-text-secondary)]!"
+      class="text-sm pt-[0.325rem]! font-semibold pb-[0.325rem] text-text-secondary!"
     >
       {{ t("traces.exceptionsWithCount", { count: hasExceptionEvents.length }) }}
     </div>
@@ -150,7 +146,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       expansion="multiple"
       :expanded-ids="expandedExceptionIds"
       @update:expanded-ids="expandedExceptionIds = $event"
-      class="trace-detail-tab-table w-full border border-solid border-[var(--o2-border-color)] tab-content-dynamic-height"
+      class="trace-detail-tab-table w-full border border-solid border-card-glass-border tab-content-dynamic-height"
     >
       <template #cell-@timestamp="{ row }">
         <span>{{ formatTimestamp(row) }}</span>
@@ -163,32 +159,32 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </template>
 
       <template #expansion="{ row }">
-        <div class="px-4 py-3 bg-[var(--o2-card-background)] rounded">
+        <div class="px-4 py-3 bg-surface-base rounded-default">
           <div class="space-y-3">
             <!-- Exception Type -->
             <div class="space-y-1">
-              <span class="block font-semibold text-[var(--o2-text-secondary)] text-sm mb-1">{{ t("traces.typeLabel") }}</span>
-              <span class="text-[#d32f2f] font-semibold bg-[rgba(211,47,47,0.1)] py-1 px-2 rounded inline-block text-sm dark:text-[#ef5350] dark:bg-[rgba(239,83,80,0.15)]">{{ row["exception.type"] }}</span>
+              <span class="block font-semibold text-text-secondary text-sm mb-1">{{ t("traces.typeLabel") }}</span>
+              <span class="text-status-error-text font-semibold bg-status-error-bg py-1 px-2 rounded-default inline-block text-sm">{{ row["exception.type"] }}</span>
             </div>
 
             <!-- Exception Message -->
             <div class="space-y-1">
-              <span class="block font-semibold text-[var(--o2-text-secondary)] text-sm mb-1">{{ t("traces.messageLabel") }}</span>
-              <div class="text-(--o2-text-secondary) bg-(--o2-code-bg) p-2 rounded border-l-[3px] border-l-[#ff9800] whitespace-pre-wrap break-words leading-normal text-sm dark:bg-[rgba(255,255,255,0.05)] dark:border-l-[#ffb74d] dark:text-[var(--o2-border)]">
+              <span class="block font-semibold text-text-secondary text-sm mb-1">{{ t("traces.messageLabel") }}</span>
+              <div class="text-text-secondary bg-code-bg p-2 rounded-default border-l-[3px] border-l-status-warning-text whitespace-pre-wrap break-words leading-normal text-sm">
                 {{ formatExceptionMessage(row["exception.message"]) }}
               </div>
             </div>
 
             <!-- Exception Escaped -->
             <div class="space-y-1">
-              <span class="block font-semibold text-[var(--o2-text-secondary)] text-sm mb-1">{{ t("traces.escapedLabel") }}</span>
+              <span class="block font-semibold text-text-secondary text-sm mb-1">{{ t("traces.escapedLabel") }}</span>
               <span class="text-sm">{{ row["exception.escaped"] }}</span>
             </div>
 
             <!-- Stacktrace -->
             <div class="space-y-2">
               <div class="flex items-center justify-between">
-                <span class="block font-semibold text-[var(--o2-text-secondary)] text-sm">{{ t("traces.stacktraceLabel") }}</span>
+                <span class="block font-semibold text-text-secondary text-sm">{{ t("traces.stacktraceLabel") }}</span>
                 <OButton
                   v-if="row['exception.stacktrace'] && row['exception.stacktrace'].trim()"
                   variant="secondary"
@@ -203,12 +199,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </div>
               <div
                 v-if="row['exception.stacktrace'] && row['exception.stacktrace'].trim()"
-                class="bg-(--o2-code-bg) rounded border border-(--o2-border) p-3 overflow-x-auto max-h-[600px] overflow-y-auto dark:bg-[#0d0d0d] dark:border-[#2a2a2a]"
+                class="bg-code-bg rounded-default border border-border-default p-3 overflow-x-auto max-h-150 overflow-y-auto"
                 data-test="exception-stacktrace-container"
               >
-                <div class="stacktrace-content m-0 p-0 text-[11px] leading-[1.6] text-[#2c3e50] font-[Monaco,Menlo,'Ubuntu_Mono',Consolas,'source-code-pro',monospace] whitespace-pre-wrap break-words dark:text-[#d4d4d4]" v-html="formatStackTrace(row['exception.stacktrace'])" />
+                <div class="stacktrace-content m-0 p-0 text-2xs leading-[1.6] text-code-text font-mono whitespace-pre-wrap break-words" v-html="formatStackTrace(row['exception.stacktrace'])" />
               </div>
-              <div v-else class="flex items-center justify-center bg-(--o2-code-bg) text-[#6c757d] text-xs italic py-4 px-3 border border-dashed border-(--o2-border) rounded dark:bg-[rgba(255,255,255,0.05)] dark:border-[#4a5568] dark:text-[#a0aec0]" data-test="exception-stacktrace-empty">
+              <div v-else class="flex items-center justify-center bg-code-bg text-text-muted text-xs italic py-4 px-3 border border-dashed border-border-default rounded-default" data-test="exception-stacktrace-empty">
                 <OIcon name="info" size="sm" class="mr-1" />
                 <span>{{ t("traces.noStacktraceAvailable") }}</span>
               </div>
@@ -231,6 +227,7 @@ import useTraceDetails from "@/composables/traces/useTraceDetails";
 import SpanStatusCodeBadge from "./SpanStatusCodeBadge.vue";
 import OButton from "@/lib/core/Button/OButton.vue";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
+import OEmptyState from "@/lib/core/EmptyState/OEmptyState.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
 import OTable from "@/lib/core/Table/OTable.vue";
 import type { OTableColumnDef } from "@/lib/core/Table/OTable.types";
@@ -563,141 +560,102 @@ function copyStackTrace(stacktrace: string) {
 }
 </script>
 
-<style>
-body.body--dark .stacktrace-content .stack-file {
-  color: #9cdcfe;
+<style scoped>
+/* keep(generated-content): the `.stack-*` classes style the stacktrace markup that
+   formatStackTrace() builds and the template injects with v-html — there is no
+   template element to carry a utility, so they stay as CSS (:deep, since the
+   generated nodes carry no scope attribute).
+   Every colour maps onto the shared --color-syntax-* family (the same palette
+   OCodeBlock uses); those tokens flip light<->dark in dark.css, so ONE rule set
+   covers both themes and the per-theme override list is gone. */
+.stacktrace-content :deep(.stack-line) {
+  padding: 0.125rem 0;
 }
 
-body.body--dark .stacktrace-content .stack-path {
-  color: #ce9178;
-}
-
-body.body--dark .stacktrace-content .stack-lineno {
-  color: #b5cea8;
-}
-
-body.body--dark .stacktrace-content .stack-function {
-  color: #dcdcaa;
-}
-
-body.body--dark .stacktrace-content .stack-keyword {
-  color: #c586c0;
-}
-
-body.body--dark .stacktrace-content .stack-exception {
-  color: #f48771;
-}
-
-body.body--dark .stacktrace-content .stack-traceback {
-  color: #808080;
-}
-
-body.body--dark .stacktrace-content .stack-traceback-header {
-  color: #808080;
-}
-
-body.body--dark .stacktrace-content .stack-during {
-  color: #808080;
-}
-
-body.body--dark .stacktrace-content .stack-code {
-  color: #d4d4d4;
-}
-
-body.body--dark .stacktrace-content .stack-call {
-  color: #4ec9b0;
-}
-
-body.body--dark .stacktrace-content .stack-ellipsis {
-  color: #808080;
-}
-
-body.body--dark .stacktrace-content .stack-error-msg {
-  color: #d4d4d4;
-}
-
-body.body--dark .stacktrace-content .stack-raise {
-  color: #f48771;
-}
-
-/* Child/descendant selectors for stacktrace-content */
-.stacktrace-content .stack-line {
-  padding: 2px 0;
-}
-
-.stacktrace-content .stack-empty {
+.stacktrace-content :deep(.stack-empty) {
   height: 0.5em;
 }
 
-.stacktrace-content .stack-file {
-  color: #0066cc;
+/* `File "…", line N, in fn` scaffolding literals — a frame-header role of its
+   own, distinct from path / lineno / function which the inner spans set. */
+.stacktrace-content :deep(.stack-file) {
+  color: var(--color-syntax-builtin);
   font-weight: 500;
 }
 
-.stacktrace-content .stack-path {
-  color: #d63384;
+/* file + module paths -> string role */
+.stacktrace-content :deep(.stack-path) {
+  color: var(--color-syntax-string);
 }
 
-.stacktrace-content .stack-lineno {
-  color: #087990;
+/* line and column numbers -> number role */
+.stacktrace-content :deep(.stack-lineno) {
+  color: var(--color-syntax-number);
   font-weight: 600;
 }
 
-.stacktrace-content .stack-function {
-  color: #6f42c1;
+/* function / frame names -> function role */
+.stacktrace-content :deep(.stack-function) {
+  color: var(--color-syntax-function);
 }
 
-.stacktrace-content .stack-keyword {
-  color: #8250df;
+/* language keywords (`at`, `raise`, `panic:`, `goroutine`, `Caused by:`) */
+.stacktrace-content :deep(.stack-keyword) {
+  color: var(--color-syntax-keyword);
   font-weight: 600;
 }
 
-.stacktrace-content .stack-exception {
-  color: #d73a49;
+/* exception / error type names -> the app's error text role */
+.stacktrace-content :deep(.stack-exception) {
+  color: var(--color-status-error-text);
   font-weight: 600;
 }
 
-.stacktrace-content .stack-traceback {
-  color: #6c757d;
+/* dim framing lines (Traceback header, "During handling of…", `... N more`) */
+.stacktrace-content :deep(.stack-traceback) {
+  color: var(--color-syntax-comment);
   font-style: italic;
 }
 
-.stacktrace-content .stack-traceback-header {
-  color: #6c757d;
+.stacktrace-content :deep(.stack-traceback-header) {
+  color: var(--color-syntax-comment);
   font-weight: 600;
 }
 
-.stacktrace-content .stack-during {
-  color: #6c757d;
+.stacktrace-content :deep(.stack-during) {
+  color: var(--color-syntax-comment);
   margin: 0.5em 0;
 }
 
-.stacktrace-content .stack-during-text {
+.stacktrace-content :deep(.stack-during-text) {
   font-style: italic;
 }
 
-.stacktrace-content .stack-code {
-  color: #2c3e50;
+.stacktrace-content :deep(.stack-ellipsis) {
+  color: var(--color-syntax-comment);
+}
+
+/* echoed source line + trailing error message -> plain code body text */
+.stacktrace-content :deep(.stack-code) {
+  color: var(--color-syntax-text);
   padding-left: 2em;
 }
 
-.stacktrace-content .stack-call {
-  color: #0969da;
+.stacktrace-content :deep(.stack-error-msg) {
+  color: var(--color-syntax-text);
 }
 
-.stacktrace-content .stack-ellipsis {
-  color: #6c757d;
+/* call sites `fn(` inside the echoed source line */
+.stacktrace-content :deep(.stack-call) {
+  color: var(--color-syntax-tag);
 }
 
-.stacktrace-content .stack-error {
+/* the `raise` line's residual text — same error red as the exception it names */
+.stacktrace-content :deep(.stack-raise) {
+  color: var(--color-status-error-text);
+}
+
+.stacktrace-content :deep(.stack-error) {
   margin-top: 0.5em;
 }
-
-.stacktrace-content .stack-error-msg {
-  color: #2c3e50;
-}
-
-.stacktrace-content .stack-raise {
-  color: #d73a49;
-}
 </style>
diff --git a/web/src/plugins/traces/components/TraceLatencyCell.vue b/web/src/plugins/traces/components/TraceLatencyCell.vue
index 2a7c8abdfd..978edba992 100644
--- a/web/src/plugins/traces/components/TraceLatencyCell.vue
+++ b/web/src/plugins/traces/components/TraceLatencyCell.vue
@@ -17,34 +17,33 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div
     data-test="trace-row-latency-bar"
-    class="flex flex-nowrap h-[0.85rem] rounded overflow-hidden w-full bg-[var(--o2-border-color)]"
+    class="flex flex-nowrap h-[0.85rem] rounded-default overflow-hidden w-full bg-card-glass-border"
   >
     <div
       v-for="[service, svc] in serviceEntries"
       :key="service"
       data-test="trace-row-latency-segment"
-      class="h-full min-w-[0.125rem]"
+      class="h-full min-w-0.5"
       :style="segmentStyle(service, svc as any)"
     >
       <OTooltip side="left" align="center">
         <template #content>
           <div
-            class="font-semibold mb-[0.35rem] tracking-[0.03rem] opacity-100 text-[0.75rem]"
+            class="font-semibold mb-[0.35rem] tracking-[0.03rem] opacity-100 text-xs"
           >
             {{ t('traces.traceLatencyCell.spansAcrossServices', { spans: item.spans, services: serviceEntries.length }) }}
           </div>
           <div
             v-for="[s, sv] in serviceEntries"
             :key="s"
-            class="grid items-center gap-x-[0.5rem] py-[0.1rem]"
+            class="grid items-center gap-x-2 py-[0.1rem] grid-cols-[0.5rem_1fr_auto_auto]"
             :class="
               s === service ? 'font-bold' : 'font-normal opacity-75'
             "
-            style="grid-template-columns: 0.5rem 1fr auto auto"
           >
             <span
-              class="inline-block w-[0.5rem] h-[0.5rem] rounded-full shrink-0"
-              :style="{ backgroundColor: serviceColors[s] || '#9e9e9e' }"
+              class="inline-block w-2 h-2 rounded-full shrink-0"
+              :style="serviceDotStyle(s)"
             />
             <span class="truncate">{{ s }}</span>
             <span class="text-right">{{
@@ -67,6 +66,14 @@ import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
 import useTraces from "@/composables/useTraces";
 import { formatTimeWithSuffix } from "@/utils/zincutils";
 
+// TODO(design-tokens): the "unknown service" grey has no semantic token. It is the
+// shared fallback for a service the colour allocator never assigned (also in
+// TraceServiceCell + TraceDetailsSidebar, and asserted by their specs), so it is
+// NOT --color-dag-node-default (same value, but that token means "LLM span type:
+// default"). Needs e.g. --color-trace-service-unknown; then this const is the only
+// site in this file to change.
+const UNKNOWN_SERVICE_COLOR = "#9e9e9e";
+
 const props = defineProps<{
   item: Record<string, any>;
 }>();
@@ -95,10 +102,20 @@ function segmentPercent(svc: any): number {
   return ((svc.duration ?? 0) / totalDuration.value) * 100;
 }
 
+function serviceColor(service: string): string {
+  return serviceColors.value[service] || UNKNOWN_SERVICE_COLOR;
+}
+
+/** Legend dot — per-service colour, so it can only be a runtime binding. */
+function serviceDotStyle(service: string): Record<string, string> {
+  return { backgroundColor: serviceColor(service) };
+}
+
+/** Segment — runtime width (share of total duration) + per-service colour. */
 function segmentStyle(service: string, svc: any): Record<string, string> {
   return {
     width: `${segmentPercent(svc)}%`,
-    backgroundColor: serviceColors.value[service] || "#9e9e9e",
+    backgroundColor: serviceColor(service),
   };
 }
 </script>
diff --git a/web/src/plugins/traces/components/TraceServiceCell.vue b/web/src/plugins/traces/components/TraceServiceCell.vue
index 951d1b050f..19cc3a02c4 100644
--- a/web/src/plugins/traces/components/TraceServiceCell.vue
+++ b/web/src/plugins/traces/components/TraceServiceCell.vue
@@ -20,7 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <img
       data-test="trace-row-service-icon"
       :src="serviceIconUrl"
-      class="mr-2 shrink-0 w-[1.25rem] h-[1.25rem]"
+      class="mr-2 shrink-0 w-5 h-5"
       aria-hidden="true"
       alt=""
     />
@@ -29,7 +29,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <div class="flex items-center gap-[0.325rem] min-w-0 flex-nowrap!">
       <span
         data-test="trace-row-service-name"
-        class="text-weight-bold truncate min-w-0 text-(--color-grey-500)! text-[0.8rem]! tracking-[0.03rem]! [font-family:var(--font-mono)]"
+        class="truncate min-w-0 text-xs text-text-body"
       >
         {{ item.service_name }}
         <OTooltip side="bottom" align="center">
@@ -42,17 +42,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <script setup lang="ts">
 import { computed } from "vue";
-import { useStore } from "vuex";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
 import useTraces from "@/composables/useTraces";
 import { getServiceIconDataUrl } from "@/utils/traces/convertTraceData";
+import useTheme from "@/composables/useTheme";
 
 const props = defineProps<{
   item: Record<string, any>;
   dataTest?: string;
 }>();
 
-const store = useStore();
+const { isDark } = useTheme();
 
 const { getOrSetServiceColor } = useTraces();
 
@@ -63,7 +63,7 @@ const rootColor = computed(
 const serviceIconUrl = computed(() =>
   getServiceIconDataUrl(
     props.item.service_name,
-    store.state.theme === "dark",
+    isDark.value,
     rootColor.value,
   ),
 );
diff --git a/web/src/plugins/traces/components/TraceTimestampCell.vue b/web/src/plugins/traces/components/TraceTimestampCell.vue
index ad18acf652..3ed70f9acf 100644
--- a/web/src/plugins/traces/components/TraceTimestampCell.vue
+++ b/web/src/plugins/traces/components/TraceTimestampCell.vue
@@ -17,7 +17,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div class="flex flex-col justify-center" data-test="trace-row-timestamp">
     <span
-      class="text-xs text-weight-medium text-(--color-grey-500)! [font-family:var(--font-mono)]"
+      class="text-xs text-text-body font-mono"
       data-test="trace-row-timestamp-day"
     >
       {{ value }}
diff --git a/web/src/plugins/traces/components/TracesSearchResultList.vue b/web/src/plugins/traces/components/TracesSearchResultList.vue
index add841ca31..d1d839557a 100644
--- a/web/src/plugins/traces/components/TracesSearchResultList.vue
+++ b/web/src/plugins/traces/components/TracesSearchResultList.vue
@@ -16,7 +16,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <div
-    class="traces-search-result-list h-auto! flex flex-col bg-[var(--o2-card-bg-solid)]"
+    class="traces-search-result-list h-auto! flex flex-col bg-card-glass-solid"
   >
     <!-- ════════════════════ Empty State ════════════════════ -->
     <TracesNoEventsState
@@ -40,7 +40,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <!-- Table scroll area: no overflow here — parent handles unified scroll -->
       <div
         data-test="traces-search-result-list"
-        class="w-full h-auto! overflow-x-auto relative"
+        class="w-full h-auto! relative"
       >
         <TenstackTable
           class="h-auto!"
@@ -52,6 +52,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :sort-order="props.sortOrder"
           :sort-field-map="sortFieldMap"
           :row-height="28"
+          :scroll-el="scrollEl"
+          :scroll-margin="0"
           :enable-column-reorder="true"
           :enable-row-expand="false"
           :enable-text-highlight="false"
@@ -97,7 +99,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
           <template #cell-operation_name="{ item }">
             <span
-              class="text-xs truncate text-(--color-grey-500)! [font-family:var(--font-mono)]"
+              class="text-xs truncate text-text-body"
               data-test="trace-row-operation-name"
             >
               {{ item.operation_name }}
@@ -106,13 +108,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </template>
 
           <template #cell-duration="{ item }">
-            <span class="text-xs text-(--color-grey-500) [font-family:var(--font-mono)]" data-test="trace-row-duration">
+            <span class="text-xs text-text-body font-mono" data-test="trace-row-duration">
               {{ formatTimeWithSuffix(item.duration) || "0us" }}
             </span>
           </template>
 
           <template #cell-spans="{ item }">
-            {{ item.spans }}
+            <span class="text-xs text-text-body font-mono" data-test="trace-row-spans">
+              {{ item.spans }}
+            </span>
           </template>
 
           <template #cell-status_code="{ item }">
@@ -127,7 +131,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <TraceStatusCell :item="item" />
           </template>
           <template #cell-input_tokens="{ item }">
-            <span class="text-xs text-(--color-grey-500) [font-family:var(--font-mono)]" data-test="trace-row-input-tokens">
+            <span class="text-xs text-text-body font-mono" data-test="trace-row-input-tokens">
               {{
                 isLLMTrace(item)
                   ? formatTokens(extractLLMData(item)?.usage?.input ?? 0)
@@ -137,7 +141,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </template>
 
           <template #cell-output_tokens="{ item }">
-            <span class="text-xs text-(--color-grey-500) [font-family:var(--font-mono)]" data-test="trace-row-output-tokens">
+            <span class="text-xs text-text-body font-mono" data-test="trace-row-output-tokens">
               {{
                 isLLMTrace(item)
                   ? formatTokens(extractLLMData(item)?.usage?.output ?? 0)
@@ -147,7 +151,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </template>
 
           <template #cell-cost="{ item }">
-            <span class="text-xs text-(--color-grey-500) [font-family:var(--font-mono)]" data-test="trace-row-cost">
+            <span class="text-xs text-text-body font-mono" data-test="trace-row-cost">
               {{
                 isLLMTrace(item)
                   ? `$${formatCost(extractLLMData(item)?.cost?.total ?? 0)}`
@@ -230,6 +234,10 @@ interface Props {
   streamDocTimeRange?: { min: number; max: number };
   /** Resolved query window (µs) for empty-state overlap detection. */
   queryWindowUs?: { start: number; end: number };
+  /** Parent scroll container that owns vertical scroll (unified with the RED
+   *  metrics charts above). Delegated to the table's virtualizer so the table
+   *  doesn't create a second, nested scrollbar. */
+  scrollEl?: HTMLElement | null;
 }
 
 const { t } = useI18n();
@@ -250,6 +258,7 @@ const props = withDefaults(defineProps<Props>(), {
   aiEnabled: false,
   streamDocTimeRange: undefined,
   queryWindowUs: undefined,
+  scrollEl: null,
 });
 
 const emit = defineEmits<{
@@ -400,8 +409,9 @@ const totalPages = computed(() =>
 );
 </script>
 
-<style>
-.traces-table-container .table-container {
+<style scoped>
+/* keep(complex-state): :deep override to square off the child table's corners */
+.traces-table-container :deep(.table-container) {
   border-radius: 0 !important;
 }
 </style>
diff --git a/web/src/plugins/traces/composables/useLLMInsights.ts b/web/src/plugins/traces/composables/useLLMInsights.ts
index 422f903715..dc203a7b2b 100644
--- a/web/src/plugins/traces/composables/useLLMInsights.ts
+++ b/web/src/plugins/traces/composables/useLLMInsights.ts
@@ -97,9 +97,6 @@ export function useLLMInsights() {
    * Called from the parent on org switch / unmount paths to free up
    * server-side resources and prevent stale results from arriving
    * after the user has moved on.
-   *
-   * @example
-   *   onUnmounted(() => cancelAll());
    */
   function cancelAll() {
     activeTraceIds.forEach((id) => {
@@ -120,11 +117,6 @@ export function useLLMInsights() {
    *
    * Resolves on `complete`. Rejects with an `Error` enriched with
    * `.status`, `.code`, `.raw` on the streaming endpoint's error event.
-   *
-   * @example (internal usage)
-   *   await executeQuery("SELECT count(*) ...", "default", 100, 200, (hits) => {
-   *     target.value.requestCount = Number(hits[0].count);
-   *   });
    */
   function executeQuery(
     sql: string,
@@ -196,9 +188,6 @@ export function useLLMInsights() {
    * are the model calls", so the fast child/tool spans must be excluded
    * or they drag the tail down. This matches the dedicated Latency trend
    * panel and the sparkline's per-bucket P95.
-   *
-   * @example (internal)
-   *   const p95 = await fetchLatency("default", 100, 200);
    */
   async function fetchLatency(
     streamName: string,
@@ -240,11 +229,6 @@ export function useLLMInsights() {
    * whole strip from one query. The error-rate CARD divides the summed
    * error count by the summed trace count; the per-bucket error-rate
    * SERIES is computed the same way per bucket.
-   *
-   * @example (internal)
-   *   const totals = await fetchSummary("default", 100, 200);
-   *   // sparklines.value.cost is now an array of per-bucket cost values
-   *   // totals.totalCost is the summed whole-window cost
    */
   async function fetchSummary(
     streamName: string,
@@ -252,11 +236,8 @@ export function useLLMInsights() {
     endTime: number,
     agent?: GenAiAgentListItem | null,
   ): Promise<Omit<LLMKPI, "p95DurationMicros">> {
-    // We need every bucket to render the sparkline — there is no
-    // pagination story here. Pass a generous size so the streaming
-    // endpoint never truncates the response. Even a 1-year window at a
-    // coarse auto-interval stays well under this, so 10_000 leaves a
-    // wide safety margin.
+    // One size must cover every bucket — there's no pagination here. 10_000
+    // is a wide margin (even a 1-year window at a coarse interval stays under).
     const size = 10_000;
 
     const agentFilter = buildAgentTraceFilter(agent, streamName);
diff --git a/web/src/plugins/traces/composables/useSessions.ts b/web/src/plugins/traces/composables/useSessions.ts
index 94ea9fb684..0e0043a656 100644
--- a/web/src/plugins/traces/composables/useSessions.ts
+++ b/web/src/plugins/traces/composables/useSessions.ts
@@ -462,11 +462,10 @@ export function useSessions() {
     }
     const safeId = traceId.replace(/'/g, "''");
 
-    // Fetch all gen_ai spans for this trace in one query. The
-    // gen_ai_input_messages IS NOT NULL filter was previously applied here
-    // but that meant a second parallel COUNT query was needed for LLM/tool
-    // call badge counts. Removing the filter lets us compute the counts
-    // client-side from the same result set, halving the number of API calls.
+    // Fetch all gen_ai spans for this trace in one query. No
+    // gen_ai_input_messages IS NOT NULL filter, so the LLM/tool call badge
+    // counts can be computed client-side from the same result set rather than
+    // via a second parallel COUNT query.
     const sql = compactSql(`
       SELECT
         gen_ai_input_messages,
diff --git a/web/src/plugins/traces/composables/useTracesTableColumns.ts b/web/src/plugins/traces/composables/useTracesTableColumns.ts
index 91be2c9bc5..e09e579de0 100644
--- a/web/src/plugins/traces/composables/useTracesTableColumns.ts
+++ b/web/src/plugins/traces/composables/useTracesTableColumns.ts
@@ -65,12 +65,12 @@ const KNOWN_COLUMN_META: Record<
   service_name: {
     header: "Service",
     size: 160,
-    meta: { cellClass: "text-[var(--o2-text-1)]", slot: true },
+    meta: { cellClass: "text-[var(--color-text-secondary)]", slot: true },
   },
   operation_name: {
     header: "Operation Name",
     size: 200,
-    meta: { cellClass: "text-[var(--o2-text-1)]", slot: true },
+    meta: { cellClass: "text-[var(--color-text-secondary)]", slot: true },
   },
   duration: {
     header: "Duration",
@@ -78,7 +78,7 @@ const KNOWN_COLUMN_META: Record<
     meta: {
       sortable: true,
       slot: true,
-      cellClass: "text-[var(--o2-text-4)]!",
+      cellClass: "text-[var(--color-text-heading)]!",
     },
   },
   spans: {
@@ -87,7 +87,7 @@ const KNOWN_COLUMN_META: Record<
     meta: {
       align: "right",
       slot: false,
-      cellClass: "text-[var(--o2-text-1)]!",
+      cellClass: "text-[var(--color-text-secondary)]!",
     },
     accessorFn: (row: any) => row.spans,
   },
diff --git a/web/src/plugins/traces/config/llmInsightsPanels.ts b/web/src/plugins/traces/config/llmInsightsPanels.ts
index b2ce39dfbb..489db2e29c 100644
--- a/web/src/plugins/traces/config/llmInsightsPanels.ts
+++ b/web/src/plugins/traces/config/llmInsightsPanels.ts
@@ -137,7 +137,7 @@ export const LLM_INSIGHTS_PANELS: LLMPanelDef[] = [
     query: {
       // Cost field populated by the backend extractor from
       // gen_ai.usage.cost / Langfuse cost_details — same source the Traces
-      // tab uses. Falls back to the legacy llm_usage_cost_total column.
+      // tab uses.
       sql: `
         SELECT
           histogram(_timestamp, '{{interval}}') as ts,
@@ -337,14 +337,11 @@ export const LLM_INSIGHTS_PANELS: LLMPanelDef[] = [
     query: {
       // No baseFilter for the same reason as errors-over-time. Operation
       // label uses `operation_name` (the actual OO traces column) — `span_name`
-      // does not exist in the schema and would fail at SQL parse time, which
-      // was producing the "Failed to fetch query data" error.
+      // does not exist in the schema and would fail at SQL parse time.
       //
-      // We deliberately don't surface model/cost here: the failure usually
-      // lives on a deep child span (e.g. `tool.<name>`) which doesn't carry
-      // those attributes — the LLM call that triggered the tool does, but
-      // joining back up the trace is out of scope for this panel. The
-      // dedicated Cost / Tokens panels handle attribution.
+      // Model/cost are not surfaced here: the failure usually lives on a deep
+      // child span (e.g. `tool.<name>`) which doesn't carry those attributes.
+      // The dedicated Cost / Tokens panels handle attribution.
       sql: `
         SELECT
           _timestamp,
@@ -405,8 +402,8 @@ export function renderPanelSql(
 
   if (!ctx.agentFilter) return compactSql(rendered);
 
-  // Append the agent predicate to the query's WHERE clause (Agent Filtering
-  // spec §6.6). Every panel has exactly one flat WHERE, so we splice ` AND
+  // Append the agent predicate to the query's WHERE clause. Every panel has
+  // exactly one flat WHERE, so we splice ` AND
   // <agentFilter>` in just before the first GROUP BY / ORDER BY / LIMIT (or at
   // the end if none). Panel templates carry no subqueries of their own, so the
   // first such keyword always belongs to the main query, not the agent
@@ -424,14 +421,11 @@ export function renderPanelSql(
 /**
  * Collapse a multi-line SQL template into a single clean line.
  *
- * Our panel/KPI/sparkline SQL is authored as indented template literals for
- * readability, which means every query carried its source indentation and
- * blank-line gaps onto the wire (and into the network tab / debug logs). This
- * flattens all runs of whitespace — newlines, tabs, the leading indentation —
- * down to a single space and trims the ends. The result is byte-for-byte
- * equivalent SQL: none of these queries embed intentional multi-space string
- * literals (`'1 hour'`, `'5 minutes'` etc. keep their single space), so
- * collapsing whitespace can't alter any value.
+ * Flattens all runs of whitespace — newlines, tabs, leading indentation — down
+ * to a single space and trims the ends. The result is byte-for-byte equivalent
+ * SQL: none of these queries embed intentional multi-space string literals
+ * (`'1 hour'`, `'5 minutes'` etc. keep their single space), so collapsing
+ * whitespace can't alter any value.
  *
  * @example
  *   compactSql(`
diff --git a/web/src/plugins/traces/llmAgentFilter.ts b/web/src/plugins/traces/llmAgentFilter.ts
index e4d86d11c8..b4527f6f5f 100644
--- a/web/src/plugins/traces/llmAgentFilter.ts
+++ b/web/src/plugins/traces/llmAgentFilter.ts
@@ -1,6 +1,6 @@
 // Copyright 2026 OpenObserve Inc.
 //
-// LLM Observability Phase 2 — Agent Filtering (Stream Contract v1.0, §6.4/§6.6).
+// Agent filtering for the LLM Insights dashboard.
 //
 // When an agent is selected on the LLM Insights dashboard, every query against
 // the agent's source trace stream can be scoped directly to that agent. Ingest
@@ -14,8 +14,8 @@ export const ALL_AGENTS_VALUE = "__all__";
 
 /**
  * Stable identity key for an agent option. The same agent name/id can appear in
- * multiple streams, so the key is scoped by stream + identity (spec §8). Agent
- * id is preferred over name (§6.3) because names are display labels.
+ * multiple streams, so the key is scoped by stream + identity. Agent id is
+ * preferred over name because names are display labels.
  */
 export function agentOptionKey(agent: GenAiAgentListItem): string {
   return `${agent.source_stream_type}/${agent.source_stream}/${
diff --git a/web/src/plugins/traces/llmInsightsCache.ts b/web/src/plugins/traces/llmInsightsCache.ts
index df3216b17b..2966ad54d9 100644
--- a/web/src/plugins/traces/llmInsightsCache.ts
+++ b/web/src/plugins/traces/llmInsightsCache.ts
@@ -18,7 +18,7 @@
  * dashboards' IndexedDB panel cache can't cover: the **KPI strip** (fetched by
  * the dashboard via `useLLMInsights`) and the **error table** (fetched by the
  * table via `useLLMStreamQuery`). The chart panels reuse the dashboards'
- * own IndexedDB cache instead — see `llminsights-caching.md`.
+ * own IndexedDB cache instead.
  *
  * Both caches key identically — stream + agent + time window — via
  * `selectionKey`, so a tab toggle back to the same selection is an instant hit
diff --git a/web/src/plugins/traces/llmInsightsDashboard.utils.ts b/web/src/plugins/traces/llmInsightsDashboard.utils.ts
index 09bc1e74ad..a84b39867a 100644
--- a/web/src/plugins/traces/llmInsightsDashboard.utils.ts
+++ b/web/src/plugins/traces/llmInsightsDashboard.utils.ts
@@ -15,8 +15,8 @@
 
 /**
  * Pure helpers for the KPI cards on the LLM Insights dashboard.
- * Extracted from the SFC so the trend / formatter logic can be tested
- * without mounting the component (no Vue / echarts deps).
+ * Trend / formatter logic, testable without mounting the component
+ * (no Vue / echarts deps).
  */
 
 export type TrendDirection = "up" | "down" | "flat";
diff --git a/web/src/plugins/traces/llmPanelSchema.ts b/web/src/plugins/traces/llmPanelSchema.ts
index 2ce1434025..bcfb95819b 100644
--- a/web/src/plugins/traces/llmPanelSchema.ts
+++ b/web/src/plugins/traces/llmPanelSchema.ts
@@ -16,24 +16,17 @@
 /**
  * Build a **dashboard panel schema** (version 2) from an LLM Insights panel
  * definition, so the panel can render through the shared
- * `PanelSchemaRenderer` (the same engine dashboards use) instead of our
- * hand-rolled echarts in `LLMTrendPanel.vue`.
- *
- * Why: `PanelSchemaRenderer` already owns timezone conversion (via
- * `applyCustomSQLTimeSeries` → `toZonedTime(store.state.timezone)`),
- * tooltips, axes, legends, units, lazy-loading and error states. Rendering
- * through it gives the LLM Insights trends the exact same behaviour as
- * dashboards — including correct, user-selected timezone — for free.
+ * `PanelSchemaRenderer` (the same engine dashboards use). This gives the LLM
+ * Insights trends the same behaviour as dashboards — timezone conversion,
+ * tooltips, axes, legends, units, lazy-loading and error states.
  *
  * The query is passed as a fully-rendered **custom SQL** string
  * (`customQuery: true`); the renderer fetches its own data. Column→axis
  * mapping is derived from the panel def's `query.timeField` / `seriesField`
- * / `valueField` (the same fields the legacy renderer used), so the SQL
- * output aliases (`ts`, `model`, `cost`, …) line up with `fields.x/y/breakdown`.
+ * / `valueField`, so the SQL output aliases (`ts`, `model`, `cost`, …) line
+ * up with `fields.x/y/breakdown`.
  *
- * Migration is incremental: only panel types present in `TYPE_MAP` are
- * convertible today (start with stacked-area). Others keep using
- * `LLMTrendPanel` until added here.
+ * Only panel types present in `TYPE_MAP` are convertible.
  */
 
 import type { LLMPanelDef } from "./config/llmInsightsPanels";
@@ -105,11 +98,8 @@ export function buildLLMPanelSchema(opts: {
     description: "",
     type: chartType,
     config: {
-      // A legend only earns its space when there's more than one series.
-      // Single-series panels (bars by model, single-series area) are already
-      // labelled by their axis + title, so the legend is pure redundancy.
-      // Multi-series panels keep it — a breakdown (stacked-area by model) or
-      // multiple value series (grouped percentile bars: p50/p90/p95/p99).
+      // Legend only when there's more than one series; single-series panels are
+      // already labelled by their axis + title.
       show_legends: !!breakdownName || (panel.series?.length ?? 0) > 1,
       legends_position: "bottom",
       // "numbers" → compact K/M/B/T suffixes (3.5M); "milliseconds" → ms/s/m
@@ -123,8 +113,7 @@ export function buildLLMPanelSchema(opts: {
             : "numbers",
       unit_custom: "",
       decimals: 2,
-      // Bucket gaps read as a continued line rather than a hole — mirrors the
-      // legacy renderer, which filled missing (bucket, series) cells with 0.
+      // Bucket gaps read as a continued line rather than a hole.
       connect_nulls: true,
       no_value_replacement: "",
       // Render a dot at each data point. LLM traffic is often sparse — a window
@@ -132,12 +121,10 @@ export function buildLLMPanelSchema(opts: {
       // draw a lone point (it'd be invisible). Symbols make single-bucket
       // windows show up as a dot. (`show_symbol` → echarts `showSymbol`.)
       show_symbol: true,
-      // Rounded (smooth) connectors between points — the trend area charts read
-      // cleaner as smooth curves than the default sharp/linear zig-zag. Only
-      // affects line/area panels; bar panels ignore it.
+      // Smooth connectors between points. Only affects line/area panels; bar
+      // panels ignore it.
       line_interpolation: "smooth",
-      // Slightly thicker line for a more solid, polished trend curve (default is
-      // 1.5). Keeps the per-point dots but makes the connecting line read cleaner.
+      // Slightly thicker line than the 1.5 default.
       line_thickness: 2.5,
       axis_border_show: true,
       wrap_table_cells: false,
diff --git a/web/src/plugins/traces/llmTrendPanel.utils.ts b/web/src/plugins/traces/llmTrendPanel.utils.ts
index 4b35110c98..12cd9f28f0 100644
--- a/web/src/plugins/traces/llmTrendPanel.utils.ts
+++ b/web/src/plugins/traces/llmTrendPanel.utils.ts
@@ -59,12 +59,6 @@ export function intervalToMs(interval: string): number {
  *   ≥ 100   → "456"  (no decimal — panel is already wide enough)
  *   ≥ 1     → "1.5"  (1 decimal, helps distinguish 1.0 from 1.5)
  *   < 1     → toString() — keeps small values readable
- *
- * @example formatCompact(2_500_000) // "2.5M"
- * @example formatCompact(12_345)    // "12.3K"
- * @example formatCompact(456)       // "456"
- * @example formatCompact(1.5)       // "1.5"
- * @example formatCompact(0.1)       // "0.1"
  */
 export function formatCompact(n: number): string {
   if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + "M";
@@ -77,10 +71,6 @@ export function formatCompact(n: number): string {
 /**
  * Format a latency in milliseconds for axis labels / threshold lines.
  * Switches to seconds beyond 1000ms for readability.
- *
- * @example formatLatencyMs(450)    // "450ms"
- * @example formatLatencyMs(1500)   // "1.5s"
- * @example formatLatencyMs(123.7)  // "124ms" (rounded)
  */
 export function formatLatencyMs(ms: number): string {
   if (ms >= 1000) return (ms / 1000).toFixed(1) + "s";
@@ -123,13 +113,6 @@ export function formatTimeCell(ts: any, timezone: string = "UTC"): string {
 /**
  * Format a cost cell. Adapts precision so very small values still
  * show non-zero (4 decimals for sub-cent, 3 for sub-dollar, 2 above).
- *
- * @example formatCostCell({ cost: 12.34 }) // "$12.34"
- * @example formatCostCell({ cost: 0.05 })  // "$0.050"
- * @example formatCostCell({ cost: 0.001 }) // "$0.0010"
- * @example formatCostCell({ cost: 0 })     // "$0"
- * @example formatCostCell({ cost: NaN })   // "—"
- * @example formatCostCell({})              // "—"
  */
 export function formatCostCell(row: any): string {
   const c = Number(row?.cost);
@@ -156,11 +139,6 @@ const CHIP_PALETTE = [
  * Pick a stable color for a service-name chip from the palette. Uses
  * a simple string hash so the same value always gets the same color
  * (visual continuity across renders).
- *
- * @example chipColor("api")     // a fixed color from the palette
- * @example chipColor("api")     // ...same color on every call
- * @example chipColor("worker")  // different color
- * @example chipColor(null)      // first palette entry
  */
 export function chipColor(value: any): string {
   const s = String(value || "");
diff --git a/web/src/plugins/traces/metrics/TracesAnalysisDashboard.vue b/web/src/plugins/traces/metrics/TracesAnalysisDashboard.vue
index 8bac999209..4bd471aca8 100644
--- a/web/src/plugins/traces/metrics/TracesAnalysisDashboard.vue
+++ b/web/src/plugins/traces/metrics/TracesAnalysisDashboard.vue
@@ -16,6 +16,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <ODrawer data-test="traces-analysis-dashboard-drawer"
+    bleed
     v-model:open="isOpen"
     :width="80"
     :title="drawerTitle"
@@ -29,20 +30,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       >
         <!-- Baseline Chip -->
         <div
-          class="time-range-chip baseline-chip flex items-center gap-1 px-2 py-[0.375rem] rounded text-[0.85rem]"
+          class="time-range-chip baseline-chip flex items-center gap-1 px-2 py-1.5 rounded-default text-sm"
           :style="{ '--chip-color': chipColors.baseline }"
         >
           <span class="uppercase tracking-wide opacity-70"
             >{{ t('traces.tracesAnalysisDashboard.baseline') }}</span
           >
-          <span class="whitespace-nowrap text-[0.7rem]">{{
+          <span class="whitespace-nowrap text-2xs">{{
             formatSmartTimestamp(
               baselineTimeRange.startTime,
               baselineTimeRange.endTime,
             ).start
           }}</span>
-          <span class="opacity-60 text-[0.65rem]">→</span>
-          <span class="whitespace-nowrap text-[0.7rem]">{{
+          <span class="opacity-60 text-3xs">→</span>
+          <span class="whitespace-nowrap text-2xs">{{
             formatSmartTimestamp(
               baselineTimeRange.startTime,
               baselineTimeRange.endTime,
@@ -53,20 +54,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- Selected Chip -->
         <div
           v-if="hasSelectedTimeRange"
-          class="time-range-chip selected-chip flex items-center gap-1 px-2 py-[0.375rem] rounded text-[0.85rem]"
+          class="time-range-chip selected-chip flex items-center gap-1 px-2 py-1.5 rounded-default text-sm"
           :style="{ '--chip-color': chipColors.selected }"
         >
           <span class="uppercase tracking-wide opacity-70"
             >{{ t('traces.tracesAnalysisDashboard.selected') }}</span
           >
-          <span class="whitespace-nowrap text-[0.7rem]">{{
+          <span class="whitespace-nowrap text-2xs">{{
             formatSmartTimestamp(
               selectedTimeRangeDisplay.startTime,
               selectedTimeRangeDisplay.endTime,
             ).start
           }}</span>
-          <span class="opacity-70 text-[0.65rem]">→</span>
-          <span class="whitespace-nowrap text-[0.7rem]">{{
+          <span class="opacity-70 text-3xs">→</span>
+          <span class="whitespace-nowrap text-2xs">{{
             formatSmartTimestamp(
               selectedTimeRangeDisplay.startTime,
               selectedTimeRangeDisplay.endTime,
@@ -77,7 +78,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- Additional filter info -->
         <span
           v-if="filterMetadata"
-          class="opacity-60 text-[0.65rem] ml-1"
+          class="opacity-60 text-3xs ml-1"
         >
           {{ filterMetadata }}
         </span>
@@ -101,7 +102,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         v-if="showTabs"
         v-model="activeAnalysisType"
         dense
-        class="border-b border-solid border-[var(--o2-border-color)] text-[var(--o2-text-1)]! insights-dashboard-tabs"
+        class="px-page-edge border-b border-solid border-card-glass-border text-text-secondary! insights-dashboard-tabs"
         align="left"
       >
         <OTab
@@ -111,22 +112,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :label="tab.label"
           :icon="tab.icon"
           :data-test="`traces-analysis-dashboard-${tab.name}-tab`"
-          class="min-h-[3rem]"
+          class="min-h-12"
         />
       </OTabs>
 
       <!-- Dashboard Content with Sidebar -->
-      <div class="analysis-content flex-1 pt-2 overflow-hidden flex min-h-0 bg-[#f5f5f5]">
+      <div class="analysis-content flex-1 pt-2 overflow-hidden flex min-h-0 bg-surface-subtle">
         <!-- Collapsed dimension sidebar bar (shown when hidden) -->
         <div
           v-if="!showDimensionSelector"
-          class="field-list-sidebar-header-collapsed card-container bg-surface-panel! shrink-0 cursor-pointer flex flex-col items-center justify-start pt-2 gap-1.5"
-          style="width: 50px; height: 100%"
+          class="bg-surface-panel! shrink-0 cursor-pointer flex flex-col items-center justify-start pt-2 gap-1.5 w-12.5 h-full overflow-y-auto"
           data-test="dimension-selector-collapsed-bar"
           @click="toggleDimensionSelector"
         >
-          <OIcon name="expand-all" size="sm" class="field-list-collapsed-icon rotate-90 mt-2.5 text-[20px]" />
-          <div class="field-list-collapsed-title [writing-mode:vertical-rl] [text-orientation:mixed] font-bold text-xs">{{ t('traces.tracesAnalysisDashboard.dimensions') }}</div>
+          <OIcon name="expand-all" size="sm" class="rotate-90 mt-2.5 text-xl" />
+          <div class="[writing-mode:vertical-rl] [text-orientation:mixed] font-bold text-xs">{{ t('traces.tracesAnalysisDashboard.dimensions') }}</div>
         </div>
 
         <OSplitter
@@ -141,12 +141,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <div class="relative-position h-full">
               <div
                 v-if="showDimensionSelector"
-                class="dimension-sidebar card-container h-full flex flex-col bg-white"
+                class="dimension-sidebar bg-card-glass-bg h-full flex flex-col"
                 data-test="dimension-selector-sidebar"
               >
                 <!-- Sidebar Header with collapse button -->
                 <div
-                  class="px-3 py-2 flex items-center justify-between shrink-0 border-b border-solid border-[var(--o2-border-color)]"
+                  class="px-3 py-2 flex items-center justify-between shrink-0 border-b border-solid border-card-glass-border"
                 >
                   <span class="font-semibold text-sm">{{ t('traces.tracesAnalysisDashboard.dimensions') }}</span>
                   <OButton
@@ -161,7 +161,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </div>
                 <!-- Search Input -->
                 <div
-                  class="p-[0.625rem] border-solid border-[var(--o2-border-color)]"
+                  class="p-2.5 border-solid border-card-glass-border"
                 >
                   <OSearchInput
                     v-model="dimensionSearchText"
@@ -180,7 +180,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <li
                       v-for="dimension in filteredDimensions"
                       :key="dimension.value"
-                      class="dimension-list-item flex items-center gap-2 px-3 py-1 border-none!"
+                      class="dimension-list-item flex items-center gap-2 px-3 py-1 border-none! hover:bg-interactive-hover-bg"
                     >
                       <div class="flex items-center shrink-0">
                         <OCheckbox
@@ -194,7 +194,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       </div>
                       <div class="flex flex-col flex-1 min-w-0">
                         <span
-                          class="dimension-label truncate cursor-pointer text-[var(--o2-text-2)]! text-sm [line-height:1.25rem]"
+                          class="dimension-label truncate cursor-pointer text-text-secondary! text-sm [line-height:1.25rem]"
                         >
                           {{ dimension.label }}
                           <OTooltip
@@ -211,14 +211,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </ul>
 
                   <!-- No results message -->
-                  <div v-else class="p-4 text-center text-gray-500">
+                  <div v-else class="p-4 text-center text-text-muted">
                     {{ t("search.noResult") }}
                   </div>
                 </div>
 
                 <!-- Selected Count Footer -->
                 <div
-                  class="p-3 border-t border-solid border-[var(--o2-border-color)] o2-table-footer-title"
+                  class="p-3 border-t border-solid border-card-glass-border text-xs font-normal"
                 >
                   {{ selectedDimensions.length }}
                   {{ t("latencyInsights.dimensionsSelected") }}
@@ -228,7 +228,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </template>
 
           <template #separator>
-            <div class="splitter-vertical splitter-enabled"></div>
+            <div
+              class="w-1 h-full bg-transparent transition-colors duration-300 hover:bg-[var(--color-orange-500)]"
+            ></div>
           </template>
 
           <!-- RIGHT: Dashboard Charts -->
@@ -243,14 +245,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   class="flex flex-col items-center justify-center h-full py-20"
                 >
                   <OSpinner
-                    size="xl"
+                    size="lg"
                     class="mb-4"
                     data-test="traces-analysis-dashboard-loading-indicator"
                   />
                   <div class="text-base">
                     {{ t("latencyInsights.analyzingDimensions") }}
                   </div>
-                  <div class="text-xs text-gray-500 mt-2">
+                  <div class="text-xs text-text-secondary mt-2">
                     {{
                       t("latencyInsights.computingDistributions", {
                         count: selectedDimensions.length,
@@ -271,7 +273,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   <div class="text-base mb-2">
                     {{ t("latencyInsights.failedToLoad") }}
                   </div>
-                  <div class="text-sm text-gray-500">{{ error }}</div>
+                  <div class="text-sm text-text-secondary">{{ error }}</div>
                   <OButton
                     variant="outline"
                     size="sm-action"
@@ -314,6 +316,7 @@ import OIcon from "@/lib/core/Icon/OIcon.vue";
 import ODrawer from "@/lib/overlay/Drawer/ODrawer.vue";
 import { ref, computed, watch, defineAsyncComponent, nextTick } from "vue";
 import { useStore } from "vuex";
+import useTheme from "@/composables/useTheme";
 import { useI18n } from "vue-i18n";
 import useNotifications from "@/composables/useNotifications";
 import { formatTimeWithSuffix } from "@/utils/zincutils";
@@ -389,10 +392,9 @@ const emit = defineEmits<{
 const { showErrorNotification } = useNotifications();
 const store = useStore();
 const { t } = useI18n();
+const { isDark } = useTheme();
 const chipColors = computed(() =>
-  store.state.theme === "dark"
-    ? COMPARISON_COLORS.dark
-    : COMPARISON_COLORS.light,
+  isDark.value ? COMPARISON_COLORS.dark : COMPARISON_COLORS.light,
 );
 const { loading, error, analyzeAllDimensions } = useLatencyInsightsAnalysis();
 const { generateDashboard } = useLatencyInsightsDashboard();
@@ -1114,24 +1116,22 @@ watch(
 );
 </script>
 
-<style>
-/* Non-scoped: ODrawer body for this drawer does not have flex:1 by default
- * (intentional for form drawers, but the Insights drawer needs a full-height
- * splitter layout). Override the body div — 4th child of the drawer panel after
- * the two sr-only elements (h2, p) and the header div.
- * Also adds the top gap (matching --spacing-dialog-content-py = 0.75rem)
- * that ODialog provides by default but ODrawer omits.
- */
-[data-test="traces-analysis-dashboard-drawer"] > div:nth-child(4) {
+<style scoped>
+/* keep(lib-override:o-drawer): ODrawer renders its own panel; the Insights drawer
+ * needs the body cell (4th child — after the two sr-only nodes h2/p and the header
+ * div) to flex to full height for the splitter layout, reachable only via :deep. */
+[data-test="traces-analysis-dashboard-drawer"] > :deep(div:nth-child(4)) {
   flex: 1 1 0 !important;
   overflow: hidden !important;
   display: flex;
   flex-direction: column;
 }
 
-/* Time range chips styling - matching chart colors */
+/* keep(brand): comparison chips are tinted from the runtime --chip-color
+ * (COMPARISON_COLORS baseline/selected palette) via color-mix — a dynamic brand
+ * color Tailwind can't express; the text mix flips through --color-text-heading. */
 .time-range-chip {
-  font-size: 0.7rem;
+  font-size: var(--text-2xs);
   line-height: 1.2;
   transition: all 0.2s ease;
 }
@@ -1140,39 +1140,7 @@ watch(
 .time-range-chip.selected-chip {
   background: color-mix(in srgb, var(--chip-color) 20%, transparent);
   border: 1px solid color-mix(in srgb, var(--chip-color) 50%, transparent);
-  color: color-mix(in srgb, var(--chip-color) 80%, #000) !important;
+  color: color-mix(in srgb, var(--chip-color) 80%, var(--color-text-heading)) !important;
   font-weight: 500;
 }
-
-.dimension-list-item:hover {
-  background-color: var(--q-hover-color, rgba(0, 0, 0, 0.04));
-}
-
-/* Splitter separator bar — visible narrow divider */
-.analysis-splitter-smooth.q-splitter--vertical > .q-splitter__separator {
-  width: 10px !important;
-}
-
-/* Dark mode support */
-body.body--dark .analysis-content {
-  background: #2a2a2a !important;
-}
-
-body.body--dark .dimension-sidebar {
-  background: #202223 !important;
-}
-
-body.body--dark .dimension-list-item {
-  border-bottom-color: rgba(255, 255, 255, 0.1);
-}
-
-body.body--dark .dimension-list-item:hover {
-  background-color: rgba(255, 255, 255, 0.05);
-}
-
-/* Time range chips: dark mode text adjustment */
-body.body--dark .time-range-chip.baseline-chip,
-body.body--dark .time-range-chip.selected-chip {
-  color: color-mix(in srgb, var(--chip-color) 80%, #fff) !important;
-}
 </style>
diff --git a/web/src/plugins/traces/metrics/TracesMetricsContextMenu.vue b/web/src/plugins/traces/metrics/TracesMetricsContextMenu.vue
index e27d3f2941..46b0fb29bc 100644
--- a/web/src/plugins/traces/metrics/TracesMetricsContextMenu.vue
+++ b/web/src/plugins/traces/metrics/TracesMetricsContextMenu.vue
@@ -18,28 +18,28 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <div
     v-if="visible"
     ref="menuRef"
-    class="fixed z-[9999] bg-white border border-solid border-[var(--o2-border)] rounded shadow-[0_2px_8px_rgba(0,0,0,0.15)] min-w-[200px] py-1 dark:bg-[#2c2c2c] dark:border-[#404040] dark:shadow-[0_2px_8px_rgba(0,0,0,0.4)]"
+    class="fixed z-[9999] bg-dropdown-bg border border-solid border-dropdown-border rounded-default shadow-[0_2px_8px_rgba(0,0,0,0.15)] min-w-50 py-1 dark:shadow-[0_2px_8px_rgba(0,0,0,0.4)]"
     :style="menuStyle"
     @click.stop
     data-test="traces-metrics-context-menu"
   >
     <div
-      class="flex items-center px-4 py-2 cursor-pointer transition-colors text-[13px] text-[#333] select-none dark:text-[var(--o2-border)] hover:bg-[#f5f5f5] dark:hover:bg-[#383838] active:bg-[var(--o2-border)] dark:active:bg-[#404040]"
+      class="flex items-center px-4 py-2 cursor-pointer transition-colors text-compact text-dropdown-item-text select-none hover:bg-dropdown-item-hover-bg active:bg-dropdown-item-active-bg"
       @click="handleMenuItemClick('gte')"
       @mouseenter="hoveredItem = 'gte'"
       @mouseleave="hoveredItem = null"
-      :class="{ 'bg-[#f5f5f5]! dark:bg-[#383838]!': hoveredItem === 'gte' }"
+      :class="{ 'bg-dropdown-item-hover-bg!': hoveredItem === 'gte' }"
       data-test="context-menu-gte"
     >
       <OIcon name="arrow-upward" size="xs" class="mr-2" />
       <span>{{ fieldName }} >= {{ formattedValue }}</span>
     </div>
     <div
-      class="flex items-center px-4 py-2 cursor-pointer transition-colors text-[13px] text-[#333] select-none dark:text-[var(--o2-border)] hover:bg-[#f5f5f5] dark:hover:bg-[#383838] active:bg-[var(--o2-border)] dark:active:bg-[#404040]"
+      class="flex items-center px-4 py-2 cursor-pointer transition-colors text-compact text-dropdown-item-text select-none hover:bg-dropdown-item-hover-bg active:bg-dropdown-item-active-bg"
       @click="handleMenuItemClick('lte')"
       @mouseenter="hoveredItem = 'lte'"
       @mouseleave="hoveredItem = null"
-      :class="{ 'bg-[#f5f5f5]! dark:bg-[#383838]!': hoveredItem === 'lte' }"
+      :class="{ 'bg-dropdown-item-hover-bg!': hoveredItem === 'lte' }"
       data-test="context-menu-lte"
     >
       <OIcon name="arrow-downward" size="xs" class="mr-2" />
diff --git a/web/src/plugins/traces/metrics/TracesMetricsDashboard.vue b/web/src/plugins/traces/metrics/TracesMetricsDashboard.vue
index f4110b356d..b87bb28cff 100644
--- a/web/src/plugins/traces/metrics/TracesMetricsDashboard.vue
+++ b/web/src/plugins/traces/metrics/TracesMetricsDashboard.vue
@@ -20,7 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <transition name="slide-fade">
       <div
         v-if="show"
-        class="charts-wrapper py-0! min-h-[8.5rem] h-[10rem] overflow-hidden will-change-[transform,opacity]"
+        class="charts-wrapper py-0! min-h-[8.5rem] h-40 overflow-hidden will-change-[transform,opacity]"
       >
         <div class="dark:border-[rgba(255,255,255,0.1)] dark:hover:shadow-[0_2px_8px_rgba(255,255,255,0.08)]">
           <RenderDashboardCharts
@@ -720,16 +720,25 @@ defineExpose({
 });
 </script>
 
-<style>
-.traces-metrics-dashboard .card-container {
-  box-shadow: none;
+<style scoped>
+/* keep(lib-override:render-dashboard-charts): RenderDashboardCharts renders its
+   own DOM (reached via :deep). Tighten the side padding AND collapse the top
+   padding/margin it adds for full dashboards (container pt-2 + inner .displayDiv
+   mt-2 = 1rem). In this compact traces view the charts live in a fixed h-40
+   (10rem) overflow-hidden wrapper, so that extra 1rem pushes the plot past the
+   clip line and cuts off the x-axis. Zeroing it restores the main-branch fit. */
+.charts-wrapper :deep(.render-dashboard-charts-container) {
+  padding-left: 0.2rem;
+  padding-right: 0.2rem;
+  padding-top: 0;
 }
 
-.traces-metrics-dashboard .card-container :first-child {
-  padding: 0 0.0625rem !important;
+.charts-wrapper :deep(.displayDiv) {
+  margin-top: 0;
 }
 
-/* Slide fade transition */
+/* keep(complex-state): slide-fade-* drive the <transition name="slide-fade">
+   reveal (enter/leave phases) — Tailwind can't express transition-group state. */
 .slide-fade-enter-active,
 .slide-fade-leave-active {
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
@@ -737,31 +746,25 @@ defineExpose({
 
 .slide-fade-enter-from {
   opacity: 0;
-  transform: translateY(-10px);
+  transform: translateY(-0.625rem);
   max-height: 0;
 }
 
 .slide-fade-enter-to {
   opacity: 1;
   transform: translateY(0);
-  max-height: 500px;
+  max-height: 31.25rem;
 }
 
 .slide-fade-leave-from {
   opacity: 1;
   transform: translateY(0);
-  max-height: 500px;
+  max-height: 31.25rem;
 }
 
 .slide-fade-leave-to {
   opacity: 0;
-  transform: translateY(-10px);
+  transform: translateY(-0.625rem);
   max-height: 0;
 }
-
-.charts-wrapper .render-dashboard-charts-container {
-  padding-left: 0.2rem;
-  padding-right: 0.2rem;
-}
-
 </style>
diff --git a/web/src/plugins/traces/threadView.utils.ts b/web/src/plugins/traces/threadView.utils.ts
index bd7f6ca6b1..30969cb769 100644
--- a/web/src/plugins/traces/threadView.utils.ts
+++ b/web/src/plugins/traces/threadView.utils.ts
@@ -28,8 +28,6 @@
 /**
  * Read the LLM operation kind from a span.
  * Uses the OTEL gen_ai.operation.name value directly.
- * @example getOp({ gen_ai_operation_name: "chat" })             // "chat"
- * @example getOp({})                                            // ""
  */
 export function getOp(span: any): string {
   return String(
@@ -40,8 +38,6 @@ export function getOp(span: any): string {
 /**
  * Read the model name. Prefers the response model (what actually served
  * the call) over the request model (what was asked for).
- * @example getModel({ gen_ai_response_model: "claude-sonnet-4-6" })
- *          // "claude-sonnet-4-6"
  */
 export function getModel(span: any): string {
   return String(
@@ -100,10 +96,6 @@ export type SpanKind = "llm_turn" | "tool_call" | "agent" | "root" | "other";
  * (Vertex/ADK tag `generate_content` with `gen_ai.operation.name=GENERATION`
  * even though it carries no `messages` array — the actual model call
  * is the inner span).
- *
- * @example hasLLMPayload({ gen_ai_input_messages: '[{"role":"user"}]' }) // true
- * @example hasLLMPayload({ gen_ai_input_messages: '{}' })                // false
- * @example hasLLMPayload({})                                             // false
  */
 export function hasLLMPayload(span: any): boolean {
   const inp = getInputRaw(span);
@@ -121,11 +113,6 @@ export function hasLLMPayload(span: any): boolean {
  *   - {invoke_agent, create_agent}              → agent
  *   - server span with no parent                → root
  *   - everything else                           → other
- *
- * @example classify({ gen_ai_operation_name: "chat",
- *                     gen_ai_input_messages: "[{...}]" })     // "llm_turn"
- * @example classify({ gen_ai_operation_name: "execute_tool" }) // "tool_call"
- * @example classify({ span_kind: "2" })                       // "root"
  */
 export function classify(span: any): SpanKind {
   const obs = getOp(span);
@@ -159,11 +146,6 @@ export interface Message {
 /**
  * Try to parse a value as JSON; return it untouched if it's already an
  * object/array, or `null` for non-strings / parse failures.
- *
- * @example safeParseJSON('{"a":1}')   // { a: 1 }
- * @example safeParseJSON({ a: 1 })    // { a: 1 } (passthrough)
- * @example safeParseJSON("not json")  // null
- * @example safeParseJSON(null)        // null
  */
 export function safeParseJSON<T = any>(value: unknown): T | null {
   if (value == null) return null;
diff --git a/web/src/plugins/traces/traceDetails.utils.ts b/web/src/plugins/traces/traceDetails.utils.ts
index 03755b2c7f..dc9ee2f0fa 100644
--- a/web/src/plugins/traces/traceDetails.utils.ts
+++ b/web/src/plugins/traces/traceDetails.utils.ts
@@ -14,10 +14,8 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 /**
- * Pure helpers for `TraceDetails.vue`. Extracted so we can unit-test
- * the small derivations (session ID resolution, etc.) without mounting
- * the SFC, which has a heavy dependency footprint (echarts, monaco,
- * vuex, several composables).
+ * Pure helpers for `TraceDetails.vue`, unit-testable without mounting the
+ * SFC (heavy dependency footprint: echarts, monaco, vuex, several composables).
  */
 
 /**
@@ -26,8 +24,7 @@
  * Looks through the span list for the first span with either:
  *   - `gen_ai_conversation_id` (OTEL Gen-AI semantic convention,
  *     preferred), or
- *   - `session_id` (legacy OO field, kept for backward compatibility
- *     with traces ingested before the rename).
+ *   - `session_id` (legacy OO field).
  *
  * Returns an empty string when no span carries either field — the
  * header template uses `v-if="sessionId"` to hide the chip in that
diff --git a/web/src/plugins/traces/tracesIndex.utils.ts b/web/src/plugins/traces/tracesIndex.utils.ts
index 971702994a..5660756521 100644
--- a/web/src/plugins/traces/tracesIndex.utils.ts
+++ b/web/src/plugins/traces/tracesIndex.utils.ts
@@ -14,9 +14,8 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 /**
- * Pure helpers for the traces page (`Index.vue`). Extracted so we can
- * unit-test the LLM Insights time-range resolution without mounting
- * the entire SFC.
+ * Pure helpers for the traces page (`Index.vue`), kept separate so the LLM
+ * Insights time-range resolution can be unit-tested without mounting the SFC.
  */
 
 export interface TraceDatetime {
diff --git a/web/src/plugins/traces/tracesSearchBar.utils.ts b/web/src/plugins/traces/tracesSearchBar.utils.ts
index e329b577d3..1937f5e1d9 100644
--- a/web/src/plugins/traces/tracesSearchBar.utils.ts
+++ b/web/src/plugins/traces/tracesSearchBar.utils.ts
@@ -14,9 +14,9 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 /**
- * Pure helpers for the traces SearchBar. Extracted so the change-
- * detection logic (mount-replay filter) can be unit-tested without
- * mounting the full SFC, which pulls in monaco / vuex.
+ * Pure helpers for the traces SearchBar change-detection logic
+ * (mount-replay filter), kept separate so they can be unit-tested without
+ * mounting the full SFC (which pulls in monaco / vuex).
  */
 
 /** Subset of `searchObj.data.datetime` that the comparison cares about. */
diff --git a/web/src/router/index.ts b/web/src/router/index.ts
index 5bcd772271..4eb828a629 100644
--- a/web/src/router/index.ts
+++ b/web/src/router/index.ts
@@ -107,10 +107,9 @@ export default function (store: any) {
           to.path !== "/cb" &&
           to.path != "/web/cb"
         ) {
-          // if query params contains redirect_url, store that URL in session storage
-          // else store the current URL in session storage
-          // this conditions added specifically for short URL feature where user will be redirected to backend API endpoint
-          // if user is not logged in, then user will be redirected to login page and after successful login, user will be redirected to the short URL
+          // If query params contain short_url, store that URL; else store the
+          // current URL. Needed for the short URL feature: after login the user
+          // is redirected to the stored short URL.
           if (Object.hasOwn(to.query, "short_url")) {
             window.sessionStorage.setItem("redirectURI", to.query.short_url);
           } else {
diff --git a/web/src/services/action_scripts.ts b/web/src/services/action_scripts.ts
index 3fbc678f87..1c8101ca31 100644
--- a/web/src/services/action_scripts.ts
+++ b/web/src/services/action_scripts.ts
@@ -22,7 +22,7 @@ const actions = {
   update: (org_identifier: string, action_id: string, data: any) => {
     return http().put(`/api/${org_identifier}/actions/${action_id}`, data);
   },
-  //as backend is not supporting the pagination,  page no, desc so as of now we removed it
+  // backend does not support pagination / page-no / desc
   list: (org_identifier: string) => {
     return http().get(`/api/${org_identifier}/actions`);
   },
diff --git a/web/src/services/incidents.ts b/web/src/services/incidents.ts
index 226e66f9e7..0b8a5278fe 100644
--- a/web/src/services/incidents.ts
+++ b/web/src/services/incidents.ts
@@ -194,7 +194,7 @@ const incidents = {
    * Get correlated telemetry streams for an incident
    *
    * Uses the incident's group_values to find related logs, metrics, and traces
-   * via the service correlation API. Now filters dimensions to only include
+   * via the service correlation API. Filters dimensions to only include
    * fields that are actually used for disambiguation.
    *
    * @param org_identifier Organization ID
diff --git a/web/src/services/reports.ts b/web/src/services/reports.ts
index 0565778778..0cbe4b1ad1 100644
--- a/web/src/services/reports.ts
+++ b/web/src/services/reports.ts
@@ -24,7 +24,7 @@ import http from "./http";
 // PUT /{org_id}/reports/{name}/trigger -- trigger report immediately
 
 const reports = {
-  // v1 — kept for backward compat (create/edit form still uses these)
+  // v1 API — used by the create/edit form
   list: (
     org_identifier: string = "",
     folder_id: string = "",
diff --git a/web/src/services/users.ts b/web/src/services/users.ts
index 8353fda7e4..5b19a8deb2 100644
--- a/web/src/services/users.ts
+++ b/web/src/services/users.ts
@@ -72,7 +72,7 @@ const users = {
     return http().get(`api/${orgId}/users/${userEmail}/roles`);
   },
   // Roles for every user in the org in a single request. Returns a map of
-  // user email -> role list, replacing one getUserRoles call per user.
+  // user email -> role list.
   getAllUserRoles: (orgId: string) => {
     return http().get(`api/${orgId}/users/roles/all`);
   },
diff --git a/web/src/styles/base-elements.css b/web/src/styles/base-elements.css
new file mode 100644
index 0000000000..9fbdabc5f3
--- /dev/null
+++ b/web/src/styles/base-elements.css
@@ -0,0 +1,331 @@
+/* Copyright 2026 OpenObserve Inc. */
+/* ============================================================
+   BASE ELEMENTS — the app's element reset / typography layer.
+   ============================================================
+   The ONE legitimate global stylesheet (O2_STYLE_MIGRATION_PLAN.md §3.2).
+   Element selectors here are RESETS, not classes — they style bare HTML the
+   app renders everywhere (html/body, headings, links, ::placeholder,
+   scrollbars, @media print).
+
+   Receives, from lib/styles/tokens/component.css during W1:
+     F4  element typography / reset   (W1.b)
+     F16 global scrollbar theming     (W1.a)
+     F18 @media print overrides       (W1.a)
+
+   RULES:
+   - Everything lives in `@layer base` so any utility beats it.
+   - Colours via var(--color-*) only — never a raw hex.
+   - rem units (1px hairline borders excepted).
+   - Element/pseudo-element selectors ONLY. A `.class` rule does not belong
+     here — it goes to utilities.css (last resort) or a component (preferred).
+   - Imported from tailwind.css at component.css's original position so the
+     cascade order is unchanged (plan risk R10).
+   ============================================================ */
+
+/* ── F16 — global scrollbar theming (from component.css, W1.a) ──────────────
+   Safe to sit in `@layer base`: no Tailwind utility targets scrollbars, so
+   nothing in a later layer can outrank these. Values are unchanged; the raw
+   `--color-grey-*` refs became semantic `--color-scrollbar-*` tokens.
+   The ~21 per-file `::-webkit-scrollbar` copies in .vue style blocks are
+   redundant with this and get deleted in W2.b. */
+@layer base {
+  ::-webkit-scrollbar {
+    width: 0.5625rem;
+    height: 0.5625rem;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--color-scrollbar-thumb);
+    border-radius: 0.375rem;
+    border: 2px solid transparent;
+    background-clip: content-box;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--color-scrollbar-thumb-hover);
+    background-clip: content-box;
+  }
+
+  /* Firefox */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-scrollbar-thumb) transparent;
+  }
+
+  /* The dark thumb/hover colours come from the tokens above; only the Firefox
+     shorthand needs re-stating, since it takes the colour as a value. */
+  .dark * {
+    scrollbar-color: var(--color-scrollbar-thumb) transparent;
+  }
+}
+
+/* ── F18 — print overrides (from component.css, W1.a) ───────────────────────
+   Verbatim move. Printable dashboards/reports are a product requirement (§9.3).
+   These are `!important`, so they outrank normal utility declarations
+   regardless of which layer they sit in. */
+@layer base {
+  @media print {
+    .h-full,
+    .h-\[calc\(100vh-105px\)\],
+    .overflow-y-auto,
+    .overflow-auto,
+    .overflow-hidden,
+    .min-h-0,
+    .flex-1 {
+      height: auto !important;
+      min-height: 0 !important;
+      max-height: none !important;
+      overflow: visible !important;
+    }
+
+    .o2-app-header,
+    .o2-sidebar,
+    .o2-sidebar-right {
+      display: none !important;
+    }
+  }
+}
+
+/* Print MODE (store.state.printMode, dashboard print/report capture): body must
+   release its overflow so the full page height is capturable. Was
+   `.printMode body { … }` in MainLayout.vue — dead as written, because
+   `.printMode` sits on a div INSIDE body, so "body as descendant of .printMode"
+   matches nothing. `:has()` expresses the intended relationship. */
+body:has(.printMode) {
+  overflow: auto !important;
+}
+
+/* ── F4 — element typography / reset (from component.css, W1.b) ─────────────
+   Verbatim move. The two @layer base sub-blocks keep their layer; the
+   html/body/::placeholder rules stay unlayered exactly as they were —
+   re-layering decisions belong to W2.d, after visual verification. */
+html, body {
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+html {
+  overflow: hidden;
+}
+
+body {
+  background: var(--color-theme-body-bg-primary);
+  overflow: hidden;
+  color: var(--color-text-body);
+  font-family: var(--font-sans);
+  font-size: var(--text-compact);
+  font-weight: var(--font-normal);
+  line-height: var(--leading-base);
+}
+
+/*
+ * Element typography resets must live in `@layer base` so Tailwind utilities
+ * (which live in `@layer utilities`) can override them. Unlayered rules beat
+ * any layered rule regardless of specificity, so leaving these outside a layer
+ * would silently suppress utilities like `mb-4` / `text-base` applied to
+ * bare <p>/<h2>/… elements.
+ */
+@layer base {
+h1, h2, h3, h4, h5, h6 {
+  color: var(--color-text-heading);
+  margin: 0;
+}
+
+h1 {
+  font-size: var(--text-2xl);
+  font-weight: var(--font-semibold);
+  line-height: var(--leading-2xl);
+  letter-spacing: var(--tracking-tight);
+}
+
+h2 {
+  font-size: var(--text-xl);
+  font-weight: var(--font-medium);
+  line-height: var(--leading-xl);
+  letter-spacing: var(--tracking-normal);
+}
+
+h3 {
+  font-size: var(--text-lg);
+  font-weight: var(--font-medium);
+  line-height: var(--leading-lg);
+  letter-spacing: var(--tracking-normal);
+}
+
+h4 {
+  font-size: var(--text-base);
+  font-weight: var(--font-medium);
+  line-height: var(--leading-md);
+  letter-spacing: var(--tracking-normal);
+}
+
+h5 {
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  line-height: var(--leading-base);
+  letter-spacing: var(--tracking-normal);
+}
+
+h6 {
+  font-size: var(--text-compact);
+  font-weight: var(--font-medium);
+  line-height: var(--leading-sm);
+  letter-spacing: var(--tracking-normal);
+}
+
+p {
+  color: var(--color-text-body);
+  font-size: var(--text-sm);
+  line-height: var(--leading-base);
+  margin: 0;
+}
+
+a {
+  color: var(--color-text-link);
+  text-decoration: none;
+}
+
+a:hover {
+  color: var(--color-text-link-hover);
+  text-decoration: underline;
+}
+
+small {
+  font-size: var(--text-xs);
+  color: var(--color-text-secondary);
+}
+
+label:not(.o-input-label) {
+  font-size: var(--text-compact);
+  color: var(--color-text-label);
+  font-weight: var(--font-normal);
+}
+}
+
+@layer base {
+  code {
+    font-family: var(--font-mono);
+    font-size: var(--text-compact);
+    color: var(--color-text-code);
+    font-feature-settings: "tnum";
+    letter-spacing: -0.2px;
+  }
+
+  pre,
+  kbd,
+  samp,
+  .log-line {
+    font-family: var(--font-mono);
+    font-size: var(--text-compact);
+    line-height: 1.6;
+  }
+}
+
+::placeholder {
+  color: var(--color-text-placeholder);
+}
+
+/* ── F7 — interaction affordances (from component.css, W1.b) ────────────────
+   Verbatim move, deliberately UNLAYERED (as before): cursor affordances for
+   every button-ish element, disabled/draggable cursors, text-input carets,
+   and the destructive-icon hover tint keyed on [data-o2-variant] /
+   [data-destructive-icon]. These are app-wide behavioural affordances on
+   semantic attributes — the one CSS family that legitimately styles other
+   components' DOM from a global sheet. */
+button:not(:disabled):not([aria-disabled="true"]),
+a[href]:not([aria-disabled="true"]),
+[role="button"]:not([aria-disabled="true"]):not([disabled]),
+[role="tab"]:not([aria-disabled="true"]):not([disabled]),
+[role="menuitem"]:not([aria-disabled="true"]):not([disabled]),
+[role="option"]:not([aria-disabled="true"]):not([disabled]),
+[role="switch"]:not(:disabled):not([aria-disabled="true"]),
+[role="checkbox"]:not(:disabled):not([aria-disabled="true"]),
+[role="radio"]:not(:disabled):not([aria-disabled="true"]),
+label:has(input:not(:disabled)),
+summary,
+select:not(:disabled),
+input[type="checkbox"]:not(:disabled),
+input[type="radio"]:not(:disabled),
+input[type="file"]:not(:disabled),
+input[type="submit"]:not(:disabled),
+input[type="reset"]:not(:disabled),
+input[type="button"]:not(:disabled) {
+  cursor: pointer;
+}
+
+button:disabled,
+button[aria-disabled="true"],
+input:disabled,
+select:disabled,
+textarea:disabled,
+[disabled],
+[aria-disabled="true"],
+.is-disabled {
+  cursor: not-allowed !important;
+}
+
+[draggable="true"],
+.draggable,
+.drag-handle {
+  cursor: grab;
+}
+
+[draggable="true"]:active,
+.draggable:active,
+.drag-handle:active,
+.is-dragging,
+[data-dragging="true"] {
+  cursor: grabbing !important;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="number"],
+input[type="search"],
+input[type="url"],
+input[type="tel"],
+textarea {
+  cursor: text;
+}
+
+input[type="text"]:disabled,
+input[type="email"]:disabled,
+input[type="password"]:disabled,
+input[type="number"]:disabled,
+input[type="search"]:disabled,
+input[type="url"]:disabled,
+input[type="tel"]:disabled,
+textarea:disabled {
+  cursor: not-allowed;
+}
+
+[data-o2-variant="destructive"] [data-destructive-icon="true"],
+[data-o2-variant="outline-destructive"] [data-destructive-icon="true"],
+[data-o2-variant="ghost-destructive"] [data-destructive-icon="true"] {
+  color: inherit !important;
+}
+
+button:has([data-destructive-icon="true"]):hover,
+a:has([data-destructive-icon="true"]):hover,
+[role="button"]:has([data-destructive-icon="true"]):hover {
+  background-color: var(--color-error-100, #fee2e2) !important;
+}
+
+html.dark button:has([data-destructive-icon="true"]):hover,
+.dark button:has([data-destructive-icon="true"]):hover,
+html.dark a:has([data-destructive-icon="true"]):hover,
+.dark a:has([data-destructive-icon="true"]):hover,
+html.dark [role="button"]:has([data-destructive-icon="true"]):hover,
+.dark [role="button"]:has([data-destructive-icon="true"]):hover {
+  background-color: rgba(220, 38, 38, 0.18) !important;
+}
+
+html.dark [data-destructive-icon="true"]:hover,
+.dark [data-destructive-icon="true"]:hover {
+  background-color: rgba(220, 38, 38, 0.18) !important;
+}
\ No newline at end of file
diff --git a/web/src/styles/fonts/ibm-plex-mono-latin-400.woff2 b/web/src/styles/fonts/ibm-plex-mono-latin-400.woff2
deleted file mode 100644
index 0804aaff92..0000000000
Binary files a/web/src/styles/fonts/ibm-plex-mono-latin-400.woff2 and /dev/null differ
diff --git a/web/src/styles/fonts/ibm-plex-mono-latin-500.woff2 b/web/src/styles/fonts/ibm-plex-mono-latin-500.woff2
deleted file mode 100644
index 090f82f7ec..0000000000
Binary files a/web/src/styles/fonts/ibm-plex-mono-latin-500.woff2 and /dev/null differ
diff --git a/web/src/styles/fonts/ibm-plex-mono-latin-600.woff2 b/web/src/styles/fonts/ibm-plex-mono-latin-600.woff2
deleted file mode 100644
index 67aeeb0104..0000000000
Binary files a/web/src/styles/fonts/ibm-plex-mono-latin-600.woff2 and /dev/null differ
diff --git a/web/src/styles/fonts/ibm-plex-mono-latin-ext-400.woff2 b/web/src/styles/fonts/ibm-plex-mono-latin-ext-400.woff2
deleted file mode 100644
index 732c64d4df..0000000000
Binary files a/web/src/styles/fonts/ibm-plex-mono-latin-ext-400.woff2 and /dev/null differ
diff --git a/web/src/styles/fonts/ibm-plex-mono-latin-ext-500.woff2 b/web/src/styles/fonts/ibm-plex-mono-latin-ext-500.woff2
deleted file mode 100644
index 6f33f8c057..0000000000
Binary files a/web/src/styles/fonts/ibm-plex-mono-latin-ext-500.woff2 and /dev/null differ
diff --git a/web/src/styles/fonts/ibm-plex-mono-latin-ext-600.woff2 b/web/src/styles/fonts/ibm-plex-mono-latin-ext-600.woff2
deleted file mode 100644
index c0b57de452..0000000000
Binary files a/web/src/styles/fonts/ibm-plex-mono-latin-ext-600.woff2 and /dev/null differ
diff --git a/web/src/styles/fonts/ibm-plex-sans-latin-400.woff2 b/web/src/styles/fonts/ibm-plex-sans-latin-400.woff2
deleted file mode 100644
index f0ee65dd7f..0000000000
Binary files a/web/src/styles/fonts/ibm-plex-sans-latin-400.woff2 and /dev/null differ
diff --git a/web/src/styles/fonts/ibm-plex-sans-latin-500.woff2 b/web/src/styles/fonts/ibm-plex-sans-latin-500.woff2
deleted file mode 100644
index 6d5527eef4..0000000000
Binary files a/web/src/styles/fonts/ibm-plex-sans-latin-500.woff2 and /dev/null differ
diff --git a/web/src/styles/fonts/ibm-plex-sans-latin-600.woff2 b/web/src/styles/fonts/ibm-plex-sans-latin-600.woff2
deleted file mode 100644
index 08c0d5adcb..0000000000
Binary files a/web/src/styles/fonts/ibm-plex-sans-latin-600.woff2 and /dev/null differ
diff --git a/web/src/styles/fonts/ibm-plex-sans-latin-700.woff2 b/web/src/styles/fonts/ibm-plex-sans-latin-700.woff2
deleted file mode 100644
index 953f94fa17..0000000000
Binary files a/web/src/styles/fonts/ibm-plex-sans-latin-700.woff2 and /dev/null differ
diff --git a/web/src/styles/fonts/ibm-plex-sans-latin-ext-400.woff2 b/web/src/styles/fonts/ibm-plex-sans-latin-ext-400.woff2
deleted file mode 100644
index ef4be2d9cf..0000000000
Binary files a/web/src/styles/fonts/ibm-plex-sans-latin-ext-400.woff2 and /dev/null differ
diff --git a/web/src/styles/fonts/ibm-plex-sans-latin-ext-500.woff2 b/web/src/styles/fonts/ibm-plex-sans-latin-ext-500.woff2
deleted file mode 100644
index 6b51734ca5..0000000000
Binary files a/web/src/styles/fonts/ibm-plex-sans-latin-ext-500.woff2 and /dev/null differ
diff --git a/web/src/styles/fonts/ibm-plex-sans-latin-ext-600.woff2 b/web/src/styles/fonts/ibm-plex-sans-latin-ext-600.woff2
deleted file mode 100644
index c19b3c63de..0000000000
Binary files a/web/src/styles/fonts/ibm-plex-sans-latin-ext-600.woff2 and /dev/null differ
diff --git a/web/src/styles/fonts/ibm-plex-sans-latin-ext-700.woff2 b/web/src/styles/fonts/ibm-plex-sans-latin-ext-700.woff2
deleted file mode 100644
index bacc88cd84..0000000000
Binary files a/web/src/styles/fonts/ibm-plex-sans-latin-ext-700.woff2 and /dev/null differ
diff --git a/web/src/styles/fonts/pe0RMImSLYBIv1o4X1M8cce4OdVisMz5nZRqy6cmmmU3t2FQWEAEOvV9wNvrwlNstMKW3Y6K5WMwd-1aLZx3lE4-Hw.woff2 b/web/src/styles/fonts/pe0RMImSLYBIv1o4X1M8cce4OdVisMz5nZRqy6cmmmU3t2FQWEAEOvV9wNvrwlNstMKW3Y6K5WMwd-1aLZx3lE4-Hw.woff2
deleted file mode 100644
index 9a3f6259e6..0000000000
Binary files a/web/src/styles/fonts/pe0RMImSLYBIv1o4X1M8cce4OdVisMz5nZRqy6cmmmU3t2FQWEAEOvV9wNvrwlNstMKW3Y6K5WMwd-1aLZx3lE4-Hw.woff2 and /dev/null differ
diff --git a/web/src/styles/fonts/pe0RMImSLYBIv1o4X1M8cce4OdVisMz5nZRqy6cmmmU3t2FQWEAEOvV9wNvrwlNstMKW3Y6K5WMwd-RaLZx3lE4-Hw.woff2 b/web/src/styles/fonts/pe0RMImSLYBIv1o4X1M8cce4OdVisMz5nZRqy6cmmmU3t2FQWEAEOvV9wNvrwlNstMKW3Y6K5WMwd-RaLZx3lE4-Hw.woff2
deleted file mode 100644
index aba2e1dc48..0000000000
Binary files a/web/src/styles/fonts/pe0RMImSLYBIv1o4X1M8cce4OdVisMz5nZRqy6cmmmU3t2FQWEAEOvV9wNvrwlNstMKW3Y6K5WMwd-RaLZx3lE4-Hw.woff2 and /dev/null differ
diff --git a/web/src/styles/fonts/pe0RMImSLYBIv1o4X1M8cce4OdVisMz5nZRqy6cmmmU3t2FQWEAEOvV9wNvrwlNstMKW3Y6K5WMwd-ZaLZx3lE4-Hw.woff2 b/web/src/styles/fonts/pe0RMImSLYBIv1o4X1M8cce4OdVisMz5nZRqy6cmmmU3t2FQWEAEOvV9wNvrwlNstMKW3Y6K5WMwd-ZaLZx3lE4-Hw.woff2
deleted file mode 100644
index dc4403c4c8..0000000000
Binary files a/web/src/styles/fonts/pe0RMImSLYBIv1o4X1M8cce4OdVisMz5nZRqy6cmmmU3t2FQWEAEOvV9wNvrwlNstMKW3Y6K5WMwd-ZaLZx3lE4-Hw.woff2 and /dev/null differ
diff --git a/web/src/styles/fonts/pe0RMImSLYBIv1o4X1M8cce4OdVisMz5nZRqy6cmmmU3t2FQWEAEOvV9wNvrwlNstMKW3Y6K5WMwd-daLZx3lE4-Hw.woff2 b/web/src/styles/fonts/pe0RMImSLYBIv1o4X1M8cce4OdVisMz5nZRqy6cmmmU3t2FQWEAEOvV9wNvrwlNstMKW3Y6K5WMwd-daLZx3lE4-Hw.woff2
deleted file mode 100644
index edd4970d41..0000000000
Binary files a/web/src/styles/fonts/pe0RMImSLYBIv1o4X1M8cce4OdVisMz5nZRqy6cmmmU3t2FQWEAEOvV9wNvrwlNstMKW3Y6K5WMwd-daLZx3lE4-Hw.woff2 and /dev/null differ
diff --git a/web/src/styles/fonts/pe0RMImSLYBIv1o4X1M8cce4OdVisMz5nZRqy6cmmmU3t2FQWEAEOvV9wNvrwlNstMKW3Y6K5WMwd-laLZx3lE4.woff2 b/web/src/styles/fonts/pe0RMImSLYBIv1o4X1M8cce4OdVisMz5nZRqy6cmmmU3t2FQWEAEOvV9wNvrwlNstMKW3Y6K5WMwd-laLZx3lE4.woff2
deleted file mode 100644
index ce553d9a74..0000000000
Binary files a/web/src/styles/fonts/pe0RMImSLYBIv1o4X1M8cce4OdVisMz5nZRqy6cmmmU3t2FQWEAEOvV9wNvrwlNstMKW3Y6K5WMwd-laLZx3lE4.woff2 and /dev/null differ
diff --git a/web/src/styles/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t1R-tQKr51.woff2 b/web/src/styles/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t1R-tQKr51.woff2
deleted file mode 100644
index 8e5c077f55..0000000000
Binary files a/web/src/styles/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t1R-tQKr51.woff2 and /dev/null differ
diff --git a/web/src/styles/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t4R-tQKr51pE8.woff2 b/web/src/styles/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t4R-tQKr51pE8.woff2
deleted file mode 100644
index c8ac62e23f..0000000000
Binary files a/web/src/styles/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t4R-tQKr51pE8.woff2 and /dev/null differ
diff --git a/web/src/styles/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t6R-tQKr51pE8.woff2 b/web/src/styles/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t6R-tQKr51pE8.woff2
deleted file mode 100644
index 1f607ea8f1..0000000000
Binary files a/web/src/styles/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t6R-tQKr51pE8.woff2 and /dev/null differ
diff --git a/web/src/styles/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t7R-tQKr51pE8.woff2 b/web/src/styles/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t7R-tQKr51pE8.woff2
deleted file mode 100644
index fc467448e0..0000000000
Binary files a/web/src/styles/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t7R-tQKr51pE8.woff2 and /dev/null differ
diff --git a/web/src/styles/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7txR-tQKr51pE8.woff2 b/web/src/styles/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7txR-tQKr51pE8.woff2
deleted file mode 100644
index 857b8bceaf..0000000000
Binary files a/web/src/styles/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7txR-tQKr51pE8.woff2 and /dev/null differ
diff --git a/web/src/styles/keyframes.css b/web/src/styles/keyframes.css
new file mode 100644
index 0000000000..cf7788967f
--- /dev/null
+++ b/web/src/styles/keyframes.css
@@ -0,0 +1,52 @@
+/*
+ * keyframes.css — the app-wide home for @keyframes with MORE THAN ONE consumer.
+ * A keyframe with a single consumer belongs in that component's own
+ * `<style scoped>` block.
+ *
+ * THE SCOPING RULE
+ * Vue's `scoped` compiler renames `@keyframes NAME` to `NAME-<hash>` and rewrites
+ * the `animation:` / `animation-name:` declarations *inside the same style block*
+ * to match — but it never looks at class strings in the template. So a scoped
+ * keyframe cannot be driven from a template `[animation:NAME_1s_linear]`
+ * arbitrary utility: the keyframe gets renamed, the template reference does not,
+ * and the animation silently dies. Declare the `animation:` in the component's
+ * scoped block (targeting the element's own class) instead of in the template.
+ *
+ * RULES FOR THIS FILE
+ * - Two or more real consumers, or it does not belong here.
+ * - Every name is namespaced with an owning-feature prefix. Never add a generic
+ *   name (`pulse`, `rotate`, `wave`, `fadeIn`, `shimmer`, `spin`) — it is global
+ *   here and will collide with Tailwind's built-ins or with another component.
+ *   (Scoped blocks may use short names — the hash makes them collision-proof.)
+ * - Prefer Tailwind's own built-ins over a copy: `animate-spin` is already
+ *   `spin 1s linear infinite`, so a hand-rolled rotate keyframe is dead weight.
+ * - Grep `web/src` for the name before adding it; exactly one definition may exist.
+ * - Colours via `var(--color-*)` / `color-mix()` only. Sizes in rem.
+ */
+
+/* ── Table skeletons — shared by TenstackTable.vue, OTableLoading.vue and
+      OTablePagination.vue. These three cannot be collapsed into one component:
+      OTableLoading renders a <tbody> of <td>s driven by Tanstack column
+      sizing/pinning, TenstackTable's skeleton is a flex row grid on the
+      log-table tokens at a different row height, and OTablePagination's is two
+      inline pills in a footer bar. ───── */
+@keyframes o2-skel-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* Shared by OTableLoading.vue and TenstackTable.vue (see above). */
+@keyframes o2-skel-row-in {
+  from {
+    opacity: 0;
+    transform: translateY(0.125rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
diff --git a/web/src/styles/palette-reset.css b/web/src/styles/palette-reset.css
new file mode 100644
index 0000000000..ce82e244c5
--- /dev/null
+++ b/web/src/styles/palette-reset.css
@@ -0,0 +1,31 @@
+/* ============================================================
+   Structural lock on the --color-* and --shadow-* theme namespaces.
+   ============================================================
+   Tailwind v4 ships a full built-in colour palette (--color-red-500,
+   --color-gray-400, --color-blue-100, …). Those generate utilities
+   (bg-red-500, text-gray-400 …) that bypass the design-token system —
+   un-themed, invisible to dark mode, and impossible to retheme.
+
+   This block clears the ENTIRE --color-* theme namespace. It is imported
+   AFTER `tailwindcss` but BEFORE the token files (base/semantic/component),
+   so Tailwind's defaults are removed here and only OUR registered tokens
+   (re-added by the `@theme inline` blocks in those files, which run later in
+   source order) survive. Net effect: `bg-gray-400` / `text-red-500` no longer
+   compile to anything — a raw-palette class becomes structurally impossible,
+   not merely lint-discouraged. `bg-surface-base`, `text-text-heading`,
+   `bg-primary-600`, `bg-grey-500`, `bg-transparent`, `text-white` etc. are all
+   re-registered downstream and keep working.
+
+   The same lock applies to --shadow-*: Tailwind's default scale spans
+   2xs…2xl, but the hairline-border philosophy sanctions only two real
+   elevation tiers — shadow-md / shadow-lg for overlays (dialogs, menus,
+   drawers). Flat surfaces (cards) use a 1px border, never a drop shadow.
+   Clearing the namespace here makes shadow-sm / shadow-xl / shadow-2xl
+   structurally impossible; semantic.css re-registers only --shadow-md and
+   --shadow-lg downstream. (`shadow-none` is a static Tailwind utility and is
+   unaffected.)
+   ============================================================ */
+@theme {
+  --color-*: initial;
+  --shadow-*: initial;
+}
diff --git a/web/src/styles/tailwind.css b/web/src/styles/tailwind.css
index a84cb89938..b89371a9dd 100644
--- a/web/src/styles/tailwind.css
+++ b/web/src/styles/tailwind.css
@@ -1,10 +1,18 @@
 @import "tailwindcss";
 @import "tw-animate-css";
-/* Design tokens — all SCSS files removed; these 4 CSS files are the sole source. */
+/* Clear Tailwind's built-in colour palette BEFORE our tokens load, so only
+   registered design tokens generate colour utilities (see the file header). */
+@import "./palette-reset.css";
+/* Design tokens — these 4 CSS files are the sole source. */
 @import "../lib/styles/tokens/base.css";
 @import "../lib/styles/tokens/semantic.css";
 @import "../lib/styles/tokens/component.css";
+/* Element reset/typography layer. Imported here so its cascade order is kept. */
+@import "./base-elements.css";
 @import "../lib/styles/tokens/dark.css";
+/* App-wide @keyframes referenced from template `[animation:…]` arbitrary
+   utilities — must be global, as Vue's scoped rewriter can't follow them. */
+@import "./keyframes.css";
 
 @plugin "@tailwindcss/typography";
 
@@ -15,40 +23,73 @@
 @source "../**/*.{vue,js,ts}";
 
 /*
- * Font-size parity with the pre-prefix-removal build.
- *
- * On main (`@import "tailwindcss" prefix(tw)`) Tailwind namespaced its theme
- * variables, so the `tw:text-sm` / `tw:text-base` utilities read Tailwind's
- * built-in scale (`--tw-text-sm` = 0.875rem/14px, `--tw-text-base` = 1rem/16px)
- * — independent of the O2 design tokens `--text-sm` (0.8125rem/13px) and
- * `--text-base` (0.875rem/14px), which drive element-level rules (body, p,
- * headings, label).
- *
- * Dropping the prefix collapsed both into the single `--text-*` variable, so the
- * ~780 `text-sm` / `text-base` utility usages inherited the smaller O2 tokens and
- * every label/header/button shrank ~1px. Re-pin ONLY the two utilities to
- * Tailwind's defaults so utility-driven text matches main pixel-for-pixel, while
- * the semantic element rules keep the O2 token sizes (unchanged from main).
- * `var(--tw-leading, …)` is preserved so `leading-*` overrides still win.
+ * Light↔dark mode switch — soft curtain sweep (View Transitions API, started
+ * by switchThemeMode in utils/theme.ts). The outgoing theme holds fully opaque
+ * underneath while the new theme sweeps top→bottom behind a tall feathered
+ * mask edge (~half a viewport of blend), so the change reads as a soft light
+ * pass rather than a hard wipe or a flash.
+ * Mask math: the mask box is 250% of the viewport tall — solid for the first
+ * 40%, feathering to transparent by 60%. Sliding mask-position 100%→0% walks
+ * that feathered band across the full viewport height.
+ * REVERT: delete this block (browsers fall back to their default cross-fade)
+ * and reduce switchThemeMode to `applyChanges()` for a fully instant switch.
  */
-@layer utilities {
-  .text-sm {
-    font-size: 0.875rem;
-    line-height: var(--tw-leading, calc(1.25 / 0.875));
+::view-transition-old(root) {
+  animation: none;
+}
+::view-transition-new(root) {
+  animation: o2-theme-sweep 0.45s ease-in-out both;
+  mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 60%);
+  mask-size: 100% 250%;
+  mask-repeat: no-repeat;
+}
+@keyframes o2-theme-sweep {
+  from {
+    mask-position: 0% 100%;
   }
-  .text-base {
-    font-size: 1rem;
-    line-height: var(--tw-leading, calc(1.5 / 1));
+  to {
+    mask-position: 0% 0%;
   }
-  /* `!important` variants (`text-sm!` / `text-base!`) are separate classes and
-     must be re-pinned too, or they fall back to the smaller O2 token. */
-  .text-sm\! {
-    font-size: 0.875rem !important;
-    line-height: var(--tw-leading, calc(1.25 / 0.875)) !important;
+}
+
+/*
+ * While a theme switch is in flight, suppress per-element color transitions
+ * (inputs, buttons, table action icons carry their own `transition-colors`)
+ * so nothing animates a beat behind the page cross-fade. The class is added
+ * and removed by switchThemeMode in utils/theme.ts.
+ */
+html.theme-switching *,
+html.theme-switching *::before,
+html.theme-switching *::after {
+  transition: none !important;
+}
+
+/*
+ * Navbar theme-toggle icon swap (sun ↔ moon): rotate + scale out-in. Driven by
+ * the <Transition name="theme-icon"> wrapper in ThemeSwitcher.vue. Uses CSS
+ * animations rather than transitions so the `theme-switching` freeze above
+ * doesn't suppress it — it plays live inside the theme sweep.
+ */
+.theme-icon-enter-active {
+  animation: theme-icon-in 0.3s ease-out;
+}
+.theme-icon-leave-active {
+  animation: theme-icon-out 0.15s ease-in forwards;
+}
+@keyframes theme-icon-in {
+  from {
+    transform: rotate(-90deg) scale(0.6);
+    opacity: 0;
   }
-  .text-base\! {
-    font-size: 1rem !important;
-    line-height: var(--tw-leading, calc(1.5 / 1)) !important;
+  to {
+    transform: rotate(0deg) scale(1);
+    opacity: 1;
+  }
+}
+@keyframes theme-icon-out {
+  to {
+    transform: rotate(90deg) scale(0.6);
+    opacity: 0;
   }
 }
 
@@ -70,21 +111,24 @@
  * a placeholder on the Monaco query editor (logs, traces, RUM sessions,
  * RUM error tracking, alerts). Mirrors Monaco's rendered text (monospace,
  * same line height) so the placeholder reads as the future typed query.
- * --o2-text-placeholder is theme-paired, so no dark override is needed.
+ * The placeholder text token is theme-paired, so no dark override is needed.
  */
 .query-editor-placeholder-overlay .query-editor-placeholder-typewriter {
-  font-family: monospace;
-  font-size: var(--text-base);
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
   line-height: 1.3125rem;
-  color: var(--o2-text-placeholder);
+  color: var(--color-text-placeholder);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 @layer base {
+  /* Tailwind's v3-compat default border colour, token-backed so it follows the
+     theme (a raw hex would paint light-grey borders in dark mode on any element
+     that sets a border-width without a colour). */
   *, :before, :after {
-    border-color: #e5e7eb;
+    border-color: var(--color-border-default);
   }
 
 }
diff --git a/web/src/test/unit/Nodes.spec.ts b/web/src/test/unit/Nodes.spec.ts
index e365ee1417..99dc9835ff 100644
--- a/web/src/test/unit/Nodes.spec.ts
+++ b/web/src/test/unit/Nodes.spec.ts
@@ -185,17 +185,6 @@ describe("Nodes.vue", () => {
         stubs: {
           QTablePagination: true,
           NoData: true,
-          'q-splitter': {
-            template: '<div><slot /></div>'
-          },
-          'q-table': true,
-          'q-select': true,
-          'q-range': true,
-          'q-toggle': true,
-          'q-btn': true,
-          'q-input': true,
-          'q-card': true,
-          'q-card-section': true
         }
       }
     });
diff --git a/web/src/test/unit/helpers/setupTests.ts b/web/src/test/unit/helpers/setupTests.ts
index 5313f604fd..4ccdf7f297 100644
--- a/web/src/test/unit/helpers/setupTests.ts
+++ b/web/src/test/unit/helpers/setupTests.ts
@@ -111,9 +111,7 @@ console.warn = (...args) => {
   // Filter out specific Vue warnings that are expected in test environment
   const message = args[0];
   if (typeof message === 'string') {
-    if (message.includes('Failed setting prop "prefix" on <q-input-stub>') ||
-        message.includes('Cannot set property prefix of [object Element]') ||
-        message.includes('Failed setting prop "prefix" on <q-select-stub>: value undefined is invalid') ||
+    if (message.includes('Cannot set property prefix of [object Element]') ||
         message.includes('onBeforeUnmount is called when there is no active component instance') ||
         // Suppress inject warnings that occur when testing composables outside component context
         // This is expected when testing composables directly with mocked dependencies
diff --git a/web/src/test/unit/mockData/overview.ts b/web/src/test/unit/mockData/overview.ts
new file mode 100644
index 0000000000..f4b29500dd
--- /dev/null
+++ b/web/src/test/unit/mockData/overview.ts
@@ -0,0 +1,131 @@
+// Copyright 2026 OpenObserve Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+// ---------------------------------------------------------------------------
+// Fixtures for the Overview tab (views/OverviewTab.vue).
+//
+// OverviewTab filters most payloads against its own time window (default: the
+// last 15 minutes, in µs). Fixtures whose rows must survive that filter are
+// exposed as builders taking `now` (ms) rather than frozen constants, so they
+// always land inside the window the component computes at mount.
+// ---------------------------------------------------------------------------
+
+/** `alertsService.getHistory` response — feeds the "Recent Events" section. */
+export const buildAlertHistory = (now: number = Date.now()) => ({
+  hits: [
+    {
+      id: "alert-history-1",
+      status: "firing",
+      stream_name: "k8s_logs",
+      alert_name: "High error rate",
+      timestamp: (now - 30_000) * 1000,
+    },
+    {
+      id: "alert-history-2",
+      status: "error",
+      stream_name: "default",
+      alert_name: "Ingestion stalled",
+      timestamp: (now - 120_000) * 1000,
+    },
+  ],
+});
+
+/** Empty `alertsService.getHistory` response. */
+export const emptyAlertHistory = { hits: [] };
+
+/** `anomalyService.list` response — anomaly detection configs. */
+export const anomalyConfigs = [
+  {
+    id: "anomaly-cfg-1",
+    name: "Checkout latency anomaly",
+    stream_name: "checkout_traces",
+  },
+];
+
+/** `anomalyService.getAllHistory` response — bulk history keyed by config. */
+export const buildAnomalyHistory = (now: number = Date.now()) => ({
+  configs: [
+    {
+      cfg: anomalyConfigs[0],
+      hits: [
+        {
+          id: "anomaly-hit-1",
+          timestamp: (now - 60_000) * 1000,
+          anomaly_count: 3,
+        },
+      ],
+    },
+  ],
+});
+
+/** `incidentsService.list` response — feeds the "Active Incidents" section. */
+export const buildIncidentList = (now: number = Date.now()) => ({
+  incidents: [
+    {
+      id: "incident-1",
+      title: "Checkout service degraded",
+      severity: "P1",
+      alert_count: 4,
+      first_alert_at: (now - 300_000) * 1000,
+      group_values: { "k8s-namespace": "prod" },
+    },
+  ],
+  total: 1,
+});
+
+/** Empty `incidentsService.list` response. */
+export const emptyIncidentList = { incidents: [], total: 0 };
+
+/** `serviceGraphService.getCurrentTopology` response — feeds "Services". */
+export const serviceGraphTopology = {
+  nodes: [
+    {
+      id: "checkout",
+      label: "checkout",
+      error_rate: 6.2,
+      requests: 1420,
+      stream_name: "default",
+    },
+    {
+      id: "payments",
+      label: "payments",
+      error_rate: 0,
+      requests: 310,
+      stream_name: "default",
+    },
+  ],
+  edges: [
+    {
+      from: "checkout",
+      to: "payments",
+      p99_latency_ns: 900_000_000,
+      baseline_p99_latency_ns: 300_000_000,
+    },
+  ],
+};
+
+/** Empty `serviceGraphService.getCurrentTopology` response. */
+export const emptyServiceGraphTopology = { nodes: [], edges: [] };
+
+export default {
+  buildAlertHistory,
+  emptyAlertHistory,
+  anomalyConfigs,
+  buildAnomalyHistory,
+  buildIncidentList,
+  emptyIncidentList,
+  serviceGraphTopology,
+  emptyServiceGraphTopology,
+};
diff --git a/web/src/test/unit/mockData/synthetics.ts b/web/src/test/unit/mockData/synthetics.ts
index 9242483e7f..e5be16c36f 100644
--- a/web/src/test/unit/mockData/synthetics.ts
+++ b/web/src/test/unit/mockData/synthetics.ts
@@ -253,7 +253,7 @@ export const mockCapabilities = {
 export const mockTimelineSegment = {
   runId: "run-001",
   status: "passed" as const,
-  color: "var(--o2-status-success)",
+  color: "var(--color-badge-success-solid-bg)",
   title: "Passed",
   timestampMs: 1_700_000_000_000,
   executions: [
@@ -272,7 +272,7 @@ export const mockTimelineSegments = [
   {
     runId: "run-002",
     status: "failed" as const,
-    color: "var(--o2-status-danger)",
+    color: "var(--color-badge-error-solid-bg)",
     title: "Failed",
     timestampMs: 1_700_003_600_000,
     executions: [
diff --git a/web/src/test/unit/plugins/logs/TransformSelector.spec.ts b/web/src/test/unit/plugins/logs/TransformSelector.spec.ts
index 4828eb6277..ca51a3284d 100644
--- a/web/src/test/unit/plugins/logs/TransformSelector.spec.ts
+++ b/web/src/test/unit/plugins/logs/TransformSelector.spec.ts
@@ -94,18 +94,7 @@ describe("TransformSelector.vue", () => {
       global: {
         plugins: [store, i18n],
         stubs: {
-          "q-toggle": { template: "<div class='q-toggle' />" },
-          "q-btn-group": { template: "<div class='q-btn-group'><slot /></div>" },
-          "q-btn-dropdown": { template: "<div class='q-btn-dropdown'><slot /></div>" },
-          "q-btn": { template: "<button class='q-btn'><slot /></button>" },
           "OIcon": { template: "<span class='OIcon' />" },
-          "q-tooltip": { template: "<div class='q-tooltip'><slot /></div>" },
-          "q-list": { template: "<div class='q-list'><slot /></div>" },
-          "q-item": { template: "<div class='q-item'><slot /></div>" },
-          "q-item-section": { template: "<div class='q-item-section'><slot /></div>" },
-          "q-item-label": { template: "<div class='q-item-label'><slot /></div>" },
-          "q-select": { template: "<div class='q-select' />" },
-          "q-input": { template: "<input class='q-input' />" },
           ...options.stubs,
         },
         ...options.global,
@@ -153,14 +142,7 @@ describe("TransformSelector.vue", () => {
         global: {
           plugins: [store, i18n],
           stubs: {
-            "q-toggle": true,
-            "q-btn-group": { template: "<div><slot /></div>" },
-            "q-btn-dropdown": { template: "<div><slot /></div>" },
-            "q-btn": {
-              template: '<button class="save-btn" />',
-            },
             "OIcon": true,
-            "q-tooltip": true,
             OButton: {
               name: 'OButton',
               template: '<button class="save-btn" :data-test="$attrs[\'data-test\']" @click="$emit(\'click\', $event)"><slot /></button>',
@@ -184,15 +166,7 @@ describe("TransformSelector.vue", () => {
         global: {
           plugins: [store, i18n],
           stubs: {
-            "q-toggle": true,
-            "q-btn-group": { template: "<div><slot /></div>" },
-            "q-btn-dropdown": { template: "<div><slot /></div>" },
-            "q-btn": true,
             "OIcon": true,
-            "q-tooltip": true,
-            "q-select": {
-              template: '<div class="q-select"><slot /></div>',
-            },
           },
         },
       });
@@ -209,17 +183,7 @@ describe("TransformSelector.vue", () => {
         global: {
           plugins: [store, i18n],
           stubs: {
-            "q-toggle": true,
-            "q-btn-group": { template: "<div><slot /></div>" },
-            "q-btn-dropdown": {
-              template: "<div><slot /></div>",
-            },
-            "q-btn": true,
             "OIcon": true,
-            "q-tooltip": true,
-            "q-input": true,
-            "q-select": true,
-            "q-list": { template: "<div><slot /></div>" },
           },
         },
       });
@@ -234,14 +198,7 @@ describe("TransformSelector.vue", () => {
         global: {
           plugins: [store, i18n],
           stubs: {
-            "q-toggle": true,
-            "q-btn-group": { template: "<div><slot /></div>" },
-            "q-btn-dropdown": { template: "<div><slot /></div>" },
-            "q-btn": true,
             "OIcon": true,
-            "q-tooltip": true,
-            "q-input": true,
-            "q-select": true,
           },
         },
       });
@@ -257,20 +214,7 @@ describe("TransformSelector.vue", () => {
         global: {
           plugins: [store, i18n],
           stubs: {
-            "q-toggle": true,
-            "q-btn-group": { template: "<div><slot /></div>" },
-            "q-btn-dropdown": {
-              template: "<div><slot /></div>",
-            },
-            "q-btn": true,
             "OIcon": true,
-            "q-tooltip": true,
-            "q-list": { template: "<div><slot /></div>" },
-            "q-item": { template: "<div><slot /></div>" },
-            "q-item-section": { template: "<div><slot /></div>" },
-            "q-item-label": { template: "<div><slot /></div>" },
-            "q-select": true,
-            "q-input": true,
             OButton: {
               name: 'OButton',
               template: '<button :data-test="$attrs[\'data-test\']" @click="$emit(\'click\', $event)"><slot /></button>',
@@ -300,22 +244,7 @@ describe("TransformSelector.vue", () => {
         global: {
           plugins: [store, i18n],
           stubs: {
-            "q-toggle": true,
-            "q-btn-group": { template: "<div><slot /></div>" },
-            "q-btn-dropdown": {
-              template: "<div><slot /></div>",
-            },
-            "q-btn": true,
             "OIcon": true,
-            "q-tooltip": true,
-            "q-list": { template: "<div><slot /></div>" },
-            "q-item": { template: "<div><slot /></div>" },
-            "q-item-section": {
-              template: '<div @click="$emit(\'click\')"><slot /></div>',
-            },
-            "q-item-label": { template: "<div><slot /></div>" },
-            "q-select": true,
-            "q-input": true,
           },
         },
       });
@@ -330,14 +259,7 @@ describe("TransformSelector.vue", () => {
         global: {
           plugins: [store, i18n],
           stubs: {
-            "q-toggle": true,
-            "q-btn-group": { template: "<div><slot /></div>" },
-            "q-btn-dropdown": { template: "<div><slot /></div>" },
-            "q-btn": {
-              template: '<button @click="$attrs.onClick" />',
-            },
             "OIcon": true,
-            "q-tooltip": true,
             OButton: {
               name: 'OButton',
               template: '<button :data-test="$attrs[\'data-test\']" @click="$emit(\'click\', $event)"><slot /></button>',
@@ -371,14 +293,7 @@ describe("TransformSelector.vue", () => {
         global: {
           plugins: [store, i18n],
           stubs: {
-            "q-toggle": {
-              template: '<div :disable="$attrs.disable" />',
-            },
-            "q-btn-group": { template: "<div><slot /></div>" },
-            "q-btn-dropdown": { template: "<div><slot /></div>" },
-            "q-btn": true,
             "OIcon": true,
-            "q-tooltip": true,
           },
         },
       });
@@ -394,14 +309,7 @@ describe("TransformSelector.vue", () => {
         global: {
           plugins: [store, i18n],
           stubs: {
-            "q-toggle": true,
-            "q-btn-group": { template: "<div><slot /></div>" },
-            "q-btn-dropdown": { template: "<div><slot /></div>" },
-            "q-btn": {
-              template: '<button :disable="$attrs.disable" />',
-            },
             "OIcon": true,
-            "q-tooltip": true,
           },
         },
       });
@@ -425,16 +333,7 @@ describe("TransformSelector.vue", () => {
         global: {
           plugins: [store, i18n],
           stubs: {
-            "q-toggle": {
-              template: '<div class="toggle" :disable="$attrs.disable" />',
-            },
-            "q-btn-group": { template: "<div><slot /></div>" },
-            "q-btn-dropdown": {
-              template: '<div :disable="$attrs.disable" />',
-            },
-            "q-btn": true,
             "OIcon": true,
-            "q-tooltip": true,
           },
         },
       });
@@ -453,14 +352,7 @@ describe("TransformSelector.vue", () => {
         global: {
           plugins: [store, i18n],
           stubs: {
-            "q-toggle": {
-              template: '<div class="toggle" :disable="$attrs.disable" />',
-            },
-            "q-btn-group": { template: "<div><slot /></div>" },
-            "q-btn-dropdown": { template: "<div><slot /></div>" },
-            "q-btn": true,
             "OIcon": true,
-            "q-tooltip": true,
           },
         },
       });
@@ -478,14 +370,7 @@ describe("TransformSelector.vue", () => {
         global: {
           plugins: [store, i18n],
           stubs: {
-            "q-toggle": true,
-            "q-btn-group": { template: "<div><slot /></div>" },
-            "q-btn-dropdown": { template: "<div><slot /></div>" },
-            "q-btn": {
-              template: '<button :disable="$attrs.disable" />',
-            },
             "OIcon": true,
-            "q-tooltip": true,
           },
         },
       });
@@ -504,14 +389,7 @@ describe("TransformSelector.vue", () => {
         global: {
           plugins: [store, i18n],
           stubs: {
-            "q-toggle": true,
-            "q-btn-group": { template: "<div><slot /></div>" },
-            "q-btn-dropdown": {
-              template: '<div class="dropdown" :disable="$attrs.disable"><slot /></div>',
-            },
-            "q-btn": true,
             "OIcon": true,
-            "q-tooltip": true,
           },
         },
       });
@@ -530,14 +408,7 @@ describe("TransformSelector.vue", () => {
         global: {
           plugins: [store, i18n],
           stubs: {
-            "q-toggle": true,
-            "q-btn-group": { template: "<div><slot /></div>" },
-            "q-btn-dropdown": {
-              template: '<div :label="$attrs.label"><slot /></div>',
-            },
-            "q-btn": true,
             "OIcon": true,
-            "q-tooltip": true,
           },
         },
       });
@@ -553,12 +424,7 @@ describe("TransformSelector.vue", () => {
         global: {
           plugins: [store, i18n],
           stubs: {
-            "q-toggle": true,
-            "q-btn-group": { template: "<div><slot /></div>" },
-            "q-btn-dropdown": { template: "<div><slot /></div>" },
-            "q-btn": true,
             "OIcon": true,
-            "q-tooltip": true,
           },
         },
       });
@@ -577,14 +443,7 @@ describe("TransformSelector.vue", () => {
         global: {
           plugins: [store, i18n],
           stubs: {
-            "q-toggle": true,
-            "q-btn-group": { template: "<div><slot /></div>" },
-            "q-btn-dropdown": {
-              template: '<div :label="$attrs.label"><slot /></div>',
-            },
-            "q-btn": true,
             "OIcon": true,
-            "q-tooltip": true,
           },
         },
       });
@@ -603,12 +462,7 @@ describe("TransformSelector.vue", () => {
         global: {
           plugins: [store, i18n],
           stubs: {
-            "q-toggle": true,
-            "q-btn-group": { template: "<div><slot /></div>" },
-            "q-btn-dropdown": { template: "<div><slot /></div>" },
-            "q-btn": true,
             "OIcon": true,
-            "q-tooltip": true,
           },
         },
       });
@@ -629,12 +483,7 @@ describe("TransformSelector.vue", () => {
         global: {
           plugins: [store, i18n],
           stubs: {
-            "q-toggle": true,
-            "q-btn-group": { template: "<div><slot /></div>" },
-            "q-btn-dropdown": { template: "<div><slot /></div>" },
-            "q-btn": true,
             "OIcon": true,
-            "q-tooltip": true,
           },
         },
       });
@@ -654,12 +503,7 @@ describe("TransformSelector.vue", () => {
         global: {
           plugins: [store, i18n],
           stubs: {
-            "q-toggle": true,
-            "q-btn-group": { template: "<div><slot /></div>" },
-            "q-btn-dropdown": { template: "<div><slot /></div>" },
-            "q-btn": true,
             "OIcon": true,
-            "q-tooltip": true,
           },
         },
       });
@@ -669,7 +513,11 @@ describe("TransformSelector.vue", () => {
   });
 
   describe("theme support", () => {
-    it("should apply dark theme class", () => {
+    // Theming is token-driven (.dark on <html> + --color-* tokens that flip on
+    // their own); components no longer carry a per-theme root class. This guards
+    // that the legacy `dark-theme` mechanism does not come back — the component
+    // renders its button group identically regardless of store theme.
+    it("does not apply a legacy dark-theme class", () => {
       const darkStore = createStore({
         state: {
           theme: "dark",
@@ -681,15 +529,7 @@ describe("TransformSelector.vue", () => {
         global: {
           plugins: [darkStore, i18n],
           stubs: {
-            "q-toggle": true,
-            "q-btn-group": {
-              template:
-                '<div class="btn-group" :class="$attrs.class"><slot /></div>',
-            },
-            "q-btn-dropdown": { template: "<div><slot /></div>" },
-            "q-btn": true,
             "OIcon": true,
-            "q-tooltip": true,
             OButton: {
               name: 'OButton',
               template: '<button :data-test="$attrs[\'data-test\']" @click="$emit(\'click\', $event)"><slot /></button>',
@@ -709,7 +549,9 @@ describe("TransformSelector.vue", () => {
       });
 
       const btnGroup = wrapper.find(".btn-group");
-      expect(btnGroup.classes()).toContain("dark-theme");
+      expect(btnGroup.exists()).toBe(true);
+      expect(btnGroup.classes()).not.toContain("dark-theme");
+      expect(btnGroup.classes()).not.toContain("light-theme");
     });
   });
 
@@ -731,14 +573,7 @@ describe("TransformSelector.vue", () => {
         global: {
           plugins: [store, i18n],
           stubs: {
-            "q-toggle": true,
-            "q-btn-group": { template: "<div><slot /></div>" },
-            "q-btn-dropdown": {
-              template: '<div :label="$attrs.label"><slot /></div>',
-            },
-            "q-btn": true,
             "OIcon": true,
-            "q-tooltip": true,
           },
         },
       });
@@ -759,12 +594,7 @@ describe("TransformSelector.vue", () => {
         global: {
           plugins: [store, i18n],
           stubs: {
-            "q-toggle": true,
-            "q-btn-group": { template: "<div><slot /></div>" },
-            "q-btn-dropdown": { template: "<div><slot /></div>" },
-            "q-btn": true,
             "OIcon": true,
-            "q-tooltip": true,
           },
         },
       });
@@ -784,12 +614,7 @@ describe("TransformSelector.vue", () => {
         global: {
           plugins: [store, i18n],
           stubs: {
-            "q-toggle": true,
-            "q-btn-group": { template: "<div><slot /></div>" },
-            "q-btn-dropdown": { template: "<div><slot /></div>" },
-            "q-btn": true,
             "OIcon": true,
-            "q-tooltip": true,
           },
         },
       });
@@ -809,12 +634,7 @@ describe("TransformSelector.vue", () => {
         global: {
           plugins: [store, i18n],
           stubs: {
-            "q-toggle": true,
-            "q-btn-group": { template: "<div><slot /></div>" },
-            "q-btn-dropdown": { template: "<div><slot /></div>" },
-            "q-btn": true,
             "OIcon": true,
-            "q-tooltip": { template: "<div class='tooltip'><slot /></div>" },
           },
         },
       });
@@ -833,12 +653,7 @@ describe("TransformSelector.vue", () => {
         global: {
           plugins: [store, i18n],
           stubs: {
-            "q-toggle": true,
-            "q-btn-group": { template: "<div><slot /></div>" },
-            "q-btn-dropdown": { template: "<div><slot /></div>" },
-            "q-btn": true,
             "OIcon": true,
-            "q-tooltip": { template: "<div class='tooltip'><slot /></div>" },
           },
         },
       });
diff --git a/web/src/test/unit/plugins/logs/components/FieldListPagination.spec.ts b/web/src/test/unit/plugins/logs/components/FieldListPagination.spec.ts
deleted file mode 100644
index e083005d5d..0000000000
--- a/web/src/test/unit/plugins/logs/components/FieldListPagination.spec.ts
+++ /dev/null
@@ -1,380 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { describe, it, expect } from "vitest";
-import { mount } from "@vue/test-utils";
-import FieldListPagination from "@/plugins/logs/components/FieldListPagination.vue";
-import i18n from "@/locales";
-
-
-describe("FieldListPagination.vue", () => {
-  const defaultProps = {
-    showUserDefinedSchemaToggle: false,
-    showQuickMode: false,
-    useUserDefinedSchemas: "user_defined_schema",
-    showOnlyInterestingFields: false,
-    userDefinedSchemaBtnGroupOption: [
-      { label: "User Defined", value: "user_defined_schema", slot: "user_defined_slot" },
-      { label: "All Fields", value: "all_fields", slot: "all_fields_slot" },
-    ],
-    selectedFieldsBtnGroupOption: [
-      { label: "All Fields", value: false, slot: "all_fields_slot" },
-      { label: "Interesting", value: true, slot: "interesting_fields_slot" },
-    ],
-    currentPage: 1,
-    pagesNumber: 1,
-    isFirstPage: true,
-    isLastPage: true,
-    totalFieldsCount: 50,
-  };
-
-  describe("schema toggle", () => {
-    it("should render user defined schema toggle when enabled", () => {
-      const wrapper = mount(FieldListPagination, {
-        props: {
-          ...defaultProps,
-          showUserDefinedSchemaToggle: true,
-        },
-        global: {
-          plugins: [i18n],
-        },
-      });
-
-      expect(wrapper.find('[data-test="logs-page-field-list-user-defined-schema-toggle"]').exists()).toBe(true);
-    });
-
-    it("should not render user defined schema toggle when disabled", () => {
-      const wrapper = mount(FieldListPagination, {
-        props: {
-          ...defaultProps,
-          showUserDefinedSchemaToggle: false,
-        },
-        global: {
-          plugins: [i18n],
-        },
-      });
-
-      expect(wrapper.find('[data-test="logs-user-defined-fields-btn"]').exists()).toBe(false);
-    });
-
-    it("should emit toggle-schema event when schema toggle changes", async () => {
-      const wrapper = mount(FieldListPagination, {
-        props: {
-          ...defaultProps,
-          showUserDefinedSchemaToggle: true,
-        },
-        global: {
-          plugins: [i18n],
-        },
-      });
-
-      const toggle = wrapper.findComponent({ name: "OToggleGroup" });
-      await toggle.vm.$emit("update:model-value", "all_fields");
-
-      expect(wrapper.emitted("toggle-schema")).toBeTruthy();
-      expect(wrapper.emitted("toggle-schema")?.[0]).toEqual(["all_fields"]);
-    });
-  });
-
-  describe("interesting fields toggle", () => {
-    it("should render interesting fields toggle when quick mode enabled and no user schema", () => {
-      const wrapper = mount(FieldListPagination, {
-        props: {
-          ...defaultProps,
-          showQuickMode: true,
-          showUserDefinedSchemaToggle: false,
-        },
-        global: {
-          plugins: [i18n],
-        },
-      });
-
-      expect(wrapper.find('[data-test="logs-page-field-list-user-defined-schema-toggle"]').exists()).toBe(true);
-    });
-
-    it("should emit toggle-interesting-fields event when interesting fields toggle changes", async () => {
-      const wrapper = mount(FieldListPagination, {
-        props: {
-          ...defaultProps,
-          showQuickMode: true,
-          showUserDefinedSchemaToggle: false,
-        },
-        global: {
-          plugins: [i18n],
-        },
-      });
-
-      const toggle = wrapper.findComponent({ name: "OToggleGroup" });
-      await toggle.vm.$emit("update:model-value", true);
-
-      expect(wrapper.emitted("toggle-interesting-fields")).toBeTruthy();
-      expect(wrapper.emitted("toggle-interesting-fields")?.[0]).toEqual([true]);
-    });
-  });
-
-  describe("pagination controls", () => {
-    it("should not show pagination when only one page", () => {
-      const wrapper = mount(FieldListPagination, {
-        props: {
-          ...defaultProps,
-          pagesNumber: 1,
-        },
-        global: {
-          plugins: [i18n],
-        },
-      });
-
-      expect(
-        wrapper
-          .find('[data-test="logs-page-fields-list-pagination-firstpage-button"]')
-          .exists(),
-      ).toBe(false);
-    });
-
-    it("should show pagination when multiple pages", () => {
-      const wrapper = mount(FieldListPagination, {
-        props: {
-          ...defaultProps,
-          pagesNumber: 5,
-          currentPage: 1,
-          isFirstPage: true,
-          isLastPage: false,
-        },
-        global: {
-          plugins: [i18n],
-        },
-      });
-
-      expect(
-        wrapper
-          .find('[data-test="logs-page-fields-list-pagination-firstpage-button"]')
-          .exists(),
-      ).toBe(true);
-    });
-
-    it("should disable first page button when on first page", () => {
-      const wrapper = mount(FieldListPagination, {
-        props: {
-          ...defaultProps,
-          pagesNumber: 5,
-          currentPage: 1,
-          isFirstPage: true,
-          isLastPage: false,
-        },
-        global: {
-          plugins: [i18n],
-        },
-      });
-
-      const firstBtn = wrapper.find('[data-test="logs-page-fields-list-pagination-firstpage-button"]');
-      expect(firstBtn.attributes("aria-disabled")).toBe("true");
-    });
-
-    it("should disable last page button when on last page", () => {
-      const wrapper = mount(FieldListPagination, {
-        props: {
-          ...defaultProps,
-          pagesNumber: 5,
-          currentPage: 5,
-          isFirstPage: false,
-          isLastPage: true,
-        },
-        global: {
-          plugins: [i18n],
-        },
-      });
-
-      const lastBtn = wrapper.find('[data-test="logs-page-fields-list-pagination-lastpage-button"]');
-      expect(lastBtn.attributes("aria-disabled")).toBe("true");
-    });
-
-    it("should emit first-page event when first page button clicked", async () => {
-      const wrapper = mount(FieldListPagination, {
-        props: {
-          ...defaultProps,
-          pagesNumber: 5,
-          currentPage: 3,
-          isFirstPage: false,
-          isLastPage: false,
-        },
-        global: {
-          plugins: [i18n],
-        },
-      });
-
-      const firstBtn = wrapper.find('[data-test="logs-page-fields-list-pagination-firstpage-button"]');
-      await firstBtn.trigger("click");
-
-      expect(wrapper.emitted("first-page")).toBeTruthy();
-    });
-
-    it("should emit last-page event when last page button clicked", async () => {
-      const wrapper = mount(FieldListPagination, {
-        props: {
-          ...defaultProps,
-          pagesNumber: 5,
-          currentPage: 3,
-          isFirstPage: false,
-          isLastPage: false,
-        },
-        global: {
-          plugins: [i18n],
-        },
-      });
-
-      const lastBtn = wrapper.find('[data-test="logs-page-fields-list-pagination-lastpage-button"]');
-      await lastBtn.trigger("click");
-
-      expect(wrapper.emitted("last-page")).toBeTruthy();
-    });
-
-    it("should emit set-page event when page button clicked", async () => {
-      const wrapper = mount(FieldListPagination, {
-        props: {
-          ...defaultProps,
-          pagesNumber: 5,
-          currentPage: 1,
-          isFirstPage: true,
-          isLastPage: false,
-        },
-        global: {
-          plugins: [i18n],
-        },
-      });
-
-      const pageBtn = wrapper.find('[data-test="logs-page-fields-list-pagination-page-2-button"]');
-      await pageBtn.trigger("click");
-
-      expect(wrapper.emitted("set-page")).toBeTruthy();
-      expect(wrapper.emitted("set-page")?.[0]).toEqual([2]);
-    });
-  });
-
-  describe("visible pages computation", () => {
-    it("should show all pages when 3 or fewer", () => {
-      const wrapper = mount(FieldListPagination, {
-        props: {
-          ...defaultProps,
-          pagesNumber: 3,
-          currentPage: 1,
-          isFirstPage: true,
-          isLastPage: false,
-        },
-        global: {
-          plugins: [i18n],
-        },
-      });
-
-      expect(wrapper.find('[data-test="logs-page-fields-list-pagination-page-1-button"]').exists()).toBe(true);
-      expect(wrapper.find('[data-test="logs-page-fields-list-pagination-page-2-button"]').exists()).toBe(true);
-      expect(wrapper.find('[data-test="logs-page-fields-list-pagination-page-3-button"]').exists()).toBe(true);
-    });
-
-    it("should show 3 pages centered around current page", () => {
-      const wrapper = mount(FieldListPagination, {
-        props: {
-          ...defaultProps,
-          pagesNumber: 10,
-          currentPage: 5,
-          isFirstPage: false,
-          isLastPage: false,
-        },
-        global: {
-          plugins: [i18n],
-        },
-      });
-
-      // Should show pages 4, 5, 6
-      expect(wrapper.find('[data-test="logs-page-fields-list-pagination-page-4-button"]').exists()).toBe(true);
-      expect(wrapper.find('[data-test="logs-page-fields-list-pagination-page-5-button"]').exists()).toBe(true);
-      expect(wrapper.find('[data-test="logs-page-fields-list-pagination-page-6-button"]').exists()).toBe(true);
-    });
-
-    it("should highlight current page", () => {
-      const wrapper = mount(FieldListPagination, {
-        props: {
-          ...defaultProps,
-          pagesNumber: 5,
-          currentPage: 3,
-          isFirstPage: false,
-          isLastPage: false,
-        },
-        global: {
-          plugins: [i18n],
-        },
-      });
-
-      const currentBtn = wrapper.find('[data-test="logs-page-fields-list-pagination-page-3-button"]');
-      expect(currentBtn.classes()).toContain("bg-button-primary");
-    });
-  });
-
-  describe("reset fields", () => {
-    it("should render reset icon", () => {
-      const wrapper = mount(FieldListPagination, {
-        props: defaultProps,
-        global: {
-          plugins: [i18n],
-        },
-      });
-
-      expect(wrapper.find('[data-test="logs-page-fields-list-reset-icon"]').exists()).toBe(true);
-    });
-
-    it("should emit reset-fields event when reset icon clicked", async () => {
-      const wrapper = mount(FieldListPagination, {
-        props: defaultProps,
-        global: {
-          plugins: [i18n],
-        },
-      });
-
-      const resetIcon = wrapper.find('[data-test="logs-page-fields-list-reset-icon"]');
-      await resetIcon.trigger("click");
-
-      expect(wrapper.emitted("reset-fields")).toBeTruthy();
-    });
-  });
-
-  describe("pagination wrapper element", () => {
-    it("should render pagination wrapper with tooltip", () => {
-      const wrapper = mount(FieldListPagination, {
-        props: {
-          ...defaultProps,
-          pagesNumber: 5,
-          currentPage: 1,
-          isFirstPage: true,
-          isLastPage: false,
-          totalFieldsCount: 123,
-        },
-        global: {
-          plugins: [i18n],
-        },
-      });
-
-      // Pagination wrapper is shown with first/last page controls
-      expect(
-        wrapper
-          .find('[data-test="logs-page-fields-list-pagination-firstpage-button"]')
-          .exists(),
-      ).toBe(true);
-      expect(
-        wrapper
-          .find('[data-test="logs-page-fields-list-pagination-lastpage-button"]')
-          .exists(),
-      ).toBe(true);
-    });
-  });
-});
diff --git a/web/src/test/unit/plugins/logs/components/LogsPluginFieldList.spec.ts b/web/src/test/unit/plugins/logs/components/LogsPluginFieldList.spec.ts
deleted file mode 100644
index 2e3e20e951..0000000000
--- a/web/src/test/unit/plugins/logs/components/LogsPluginFieldList.spec.ts
+++ /dev/null
@@ -1,549 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { describe, it, expect } from "vitest";
-import { mount } from "@vue/test-utils";
-import FieldList from "@/plugins/logs/components/LogsPluginFieldList.vue";
-import i18n from "@/locales";
-
-// Stub OFieldList: renders slots and emits search
-const OFieldListStub = {
-  name: "OFieldList",
-  template: `
-    <div data-test="o-field-list">
-      <input
-        data-test="log-search-index-list-field-search-input"
-        :value="search"
-        @input="$emit('update:search', $event.target.value)"
-      />
-      <div v-if="loading" class="o-field-list-loading">Loading...</div>
-      <div v-for="(row, idx) in fields" :key="idx">
-        <div v-if="row.isGroup">
-          <slot name="group-header" :row="row" :group-name="row.groupName" />
-        </div>
-        <div v-else data-test="log-search-field-row">
-          <slot name="field-row" :row="row" :index="idx" />
-        </div>
-      </div>
-      <div v-if="fields.length === 0">
-        <slot name="empty" />
-      </div>
-      <div>
-        <slot name="after-list" />
-      </div>
-    </div>
-  `,
-  props: [
-    "fields",
-    "search",
-    "searchPlaceholder",
-    "loading",
-    "pageSize",
-    "pageSizeOptions",
-    "rowKey",
-    "showPagination",
-  ],
-  emits: ["update:search", "row-click", "update:currentPage"],
-};
-
-describe("FieldList.vue", () => {
-  const defaultProps = {
-    streamFieldsRows: [
-      {
-        name: "Fields",
-        label: true,
-        group: "schema",
-      },
-      {
-        name: "status",
-        group: "schema",
-        isSchemaField: true,
-        isInterestingField: false,
-        streams: ["logs"],
-      },
-      {
-        name: "message",
-        group: "schema",
-        isSchemaField: true,
-        isInterestingField: true,
-        streams: ["logs"],
-      },
-    ],
-    selectedStream: "logs",
-    filterField: "",
-    filterFieldFn: (rows: any[], terms: any) => rows,
-    pagination: { page: 1, rowsPerPage: 100 },
-    wrapCells: false,
-    loadingStream: false,
-    showOnlyInterestingFields: false,
-    interestingExpandedGroupRowsFieldCount: { schema: 1 },
-    expandGroupRowsFieldCount: { schema: 2 },
-    expandGroupRows: { schema: true },
-    theme: "light",
-    selectedFields: [],
-    timestampColumn: "_timestamp",
-    showQuickMode: true,
-    fieldValues: {},
-    selectedStreamsCount: 1,
-    showUserDefinedSchemaToggle: false,
-    useUserDefinedSchemas: "user_defined_schema",
-    userDefinedSchemaBtnGroupOption: [],
-    selectedFieldsBtnGroupOption: [],
-    totalFieldsCount: 2,
-    showFtsFieldValues: false,
-  };
-
-  describe("rendering", () => {
-    it("should render OFieldList component", () => {
-      const wrapper = mount(FieldList, {
-        props: defaultProps,
-        global: {
-          plugins: [i18n],
-          stubs: {
-            OFieldList: OFieldListStub,
-            FieldRow: true,
-            FieldExpansion: true,
-            FieldListPagination: true,
-          },
-        },
-      });
-
-      expect(
-        wrapper.find('[data-test="o-field-list"]').exists(),
-      ).toBe(true);
-    });
-
-    it("should render search input via OFieldList", () => {
-      const wrapper = mount(FieldList, {
-        props: defaultProps,
-        global: {
-          plugins: [i18n],
-          stubs: {
-            OFieldList: OFieldListStub,
-            FieldRow: true,
-            FieldExpansion: true,
-            FieldListPagination: true,
-          },
-        },
-      });
-
-      expect(
-        wrapper
-          .find('[data-test="log-search-index-list-field-search-input"]')
-          .exists(),
-      ).toBe(true);
-    });
-
-    it("should pass loading prop to OFieldList", () => {
-      const wrapper = mount(FieldList, {
-        props: {
-          ...defaultProps,
-          loadingStream: true,
-        },
-        global: {
-          plugins: [i18n],
-          stubs: {
-            OFieldList: OFieldListStub,
-            FieldRow: true,
-            FieldExpansion: true,
-            FieldListPagination: true,
-          },
-        },
-      });
-
-      expect(wrapper.find(".o-field-list-loading").exists()).toBe(true);
-    });
-
-    it("should render no matching fields message via empty slot", () => {
-      const wrapper = mount(FieldList, {
-        props: {
-          ...defaultProps,
-          streamFieldsRows: [],
-        },
-        global: {
-          plugins: [i18n],
-          stubs: {
-            OFieldList: OFieldListStub,
-            FieldRow: true,
-            FieldExpansion: true,
-            FieldListPagination: true,
-          },
-        },
-      });
-
-      expect(wrapper.text()).toContain("No matching fields found.");
-    });
-  });
-
-  describe("field groups", () => {
-    it("should render field group header", () => {
-      const wrapper = mount(FieldList, {
-        props: defaultProps,
-        global: {
-          plugins: [i18n],
-          stubs: {
-            OFieldList: OFieldListStub,
-            FieldRow: true,
-            FieldExpansion: true,
-            FieldListPagination: true,
-          },
-        },
-      });
-
-      expect(wrapper.text()).toContain("Fields");
-    });
-
-    it("should show field count in group header", () => {
-      const wrapper = mount(FieldList, {
-        props: defaultProps,
-        global: {
-          plugins: [i18n],
-          stubs: {
-            OFieldList: OFieldListStub,
-            FieldRow: true,
-            FieldExpansion: true,
-            FieldListPagination: true,
-            OBadge: {
-              template: '<span class="obadge-stub"><slot /></span>',
-              props: ["variant"],
-            },
-          },
-        },
-      });
-
-      // Group name "Fields" and count "2" are rendered (OBadge displays count)
-      expect(wrapper.text()).toContain("Fields");
-      expect(wrapper.text()).toContain("2");
-    });
-
-    it("should show expand icon for groups with fields", () => {
-      const wrapper = mount(FieldList, {
-        props: defaultProps,
-        global: {
-          plugins: [i18n],
-          stubs: {
-            OFieldList: OFieldListStub,
-            FieldRow: true,
-            FieldExpansion: true,
-            FieldListPagination: true,
-          },
-        },
-      });
-
-      const groupHeader = wrapper.find('[data-test="logs-page-field-list-group-header-schema"]');
-      expect(groupHeader.exists()).toBe(true);
-    });
-
-    it("should emit toggle-group when group header is clicked", async () => {
-      const wrapper = mount(FieldList, {
-        props: defaultProps,
-        global: {
-          plugins: [i18n],
-          stubs: {
-            OFieldList: OFieldListStub,
-            FieldRow: true,
-            FieldExpansion: true,
-            FieldListPagination: true,
-          },
-        },
-      });
-
-      await wrapper.find('[data-test="logs-page-field-list-group-header-schema"]').trigger("click");
-      expect(wrapper.emitted("toggle-group")).toBeTruthy();
-      expect(wrapper.emitted("toggle-group")?.[0]).toEqual(["schema"]);
-    });
-  });
-
-  describe("field rows", () => {
-    it("should render FieldRow components for non-label rows", () => {
-      const wrapper = mount(FieldList, {
-        props: defaultProps,
-        global: {
-          plugins: [i18n],
-          stubs: {
-            OFieldList: OFieldListStub,
-            FieldRow: {
-              template: '<div class="field-row"></div>',
-              props: [
-                "field",
-                "selectedFields",
-                "timestampColumn",
-                "theme",
-                "showQuickMode",
-                "showFtsFieldValues",
-              ],
-            },
-            FieldExpansion: true,
-            FieldListPagination: true,
-          },
-        },
-      });
-
-      const fieldRows = wrapper.findAll('[data-test="log-search-field-row"]');
-      expect(fieldRows.length).toBe(2); // Two non-label rows in defaultProps
-    });
-
-    it("should apply selected class to selected fields", () => {
-      const wrapper = mount(FieldList, {
-        props: {
-          ...defaultProps,
-          selectedFields: ["status"],
-        },
-        global: {
-          plugins: [i18n],
-          stubs: {
-            OFieldList: OFieldListStub,
-            FieldRow: true,
-            FieldExpansion: true,
-            FieldListPagination: true,
-          },
-        },
-      });
-
-      expect(wrapper.find('[data-test="log-search-field-row"]').exists()).toBe(
-        true,
-      );
-    });
-  });
-
-  describe("search functionality", () => {
-    it("should emit update:filter-field when search input changes", async () => {
-      const wrapper = mount(FieldList, {
-        props: defaultProps,
-        global: {
-          plugins: [i18n],
-          stubs: {
-            OFieldList: OFieldListStub,
-            FieldRow: true,
-            FieldExpansion: true,
-            FieldListPagination: true,
-          },
-        },
-      });
-
-      const searchInput = wrapper.find(
-        '[data-test="log-search-index-list-field-search-input"]',
-      );
-      await searchInput.setValue("test");
-
-      expect(wrapper.emitted("update:filter-field")).toBeTruthy();
-    });
-  });
-
-  describe("pagination", () => {
-    it("should render FieldListPagination component", () => {
-      const wrapper = mount(FieldList, {
-        props: defaultProps,
-        global: {
-          plugins: [i18n],
-          stubs: {
-            OFieldList: OFieldListStub,
-            FieldRow: true,
-            FieldExpansion: true,
-            FieldListPagination: {
-              template: '<div class="field-list-pagination" />',
-            },
-          },
-        },
-      });
-
-      expect(wrapper.find(".field-list-pagination").exists()).toBe(true);
-    });
-
-    it("should emit set-page when pagination changes", async () => {
-      const wrapper = mount(FieldList, {
-        props: defaultProps,
-        global: {
-          plugins: [i18n],
-          stubs: {
-            OFieldList: OFieldListStub,
-            FieldRow: true,
-            FieldExpansion: true,
-            FieldListPagination: {
-              template:
-                '<button class="next-btn" @click="$emit(\'set-page\', 2)" />',
-              props: [
-                "currentPage",
-                "pagesNumber",
-                "isFirstPage",
-                "isLastPage",
-                "totalFieldsCount",
-              ],
-              emits: ["set-page", "first-page", "last-page", "reset-fields"],
-            },
-          },
-        },
-      });
-
-      await wrapper.find(".next-btn").trigger("click");
-      expect(wrapper.emitted("set-page")).toBeTruthy();
-      expect(wrapper.emitted("set-page")?.[0]).toEqual([2]);
-    });
-  });
-
-  describe("event forwarding", () => {
-    it("should forward add-to-filter event from FieldRow", async () => {
-      const FieldRowStub = {
-        template:
-          '<div class="field-row-stub" @click="$emit(\'add-to-filter\', \'test\')"></div>',
-        props: [
-          "field",
-          "selectedFields",
-          "timestampColumn",
-          "theme",
-          "showQuickMode",
-          "showFtsFieldValues",
-        ],
-        emits: ["add-to-filter"],
-      };
-
-      const wrapper = mount(FieldList, {
-        props: defaultProps,
-        global: {
-          plugins: [i18n],
-          stubs: {
-            OFieldList: OFieldListStub,
-            FieldRow: FieldRowStub,
-            FieldExpansion: true,
-            FieldListPagination: true,
-          },
-        },
-      });
-
-      const fieldRow = wrapper.find(".field-row-stub");
-      await fieldRow.trigger("click");
-
-      expect(wrapper.emitted("add-to-filter")).toBeTruthy();
-    });
-  });
-
-  describe("interesting fields mode", () => {
-    it("should show only interesting fields when enabled", () => {
-      const wrapper = mount(FieldList, {
-        props: {
-          ...defaultProps,
-          showOnlyInterestingFields: true,
-        },
-        global: {
-          plugins: [i18n],
-          stubs: {
-            OFieldList: OFieldListStub,
-            FieldRow: true,
-            FieldExpansion: true,
-            FieldListPagination: true,
-            OBadge: {
-              template: '<span class="obadge-stub"><slot /></span>',
-              props: ["variant"],
-            },
-          },
-        },
-      });
-
-      // Group renders "Fields" and count "1" via OBadge (not "(1)")
-      expect(wrapper.text()).toContain("Fields");
-      expect(wrapper.text()).toContain("1");
-    });
-
-    it("should use interesting count in group header when mode enabled", () => {
-      const wrapper = mount(FieldList, {
-        props: {
-          ...defaultProps,
-          showOnlyInterestingFields: true,
-        },
-        global: {
-          plugins: [i18n],
-          stubs: {
-            OFieldList: OFieldListStub,
-            FieldRow: true,
-            FieldExpansion: true,
-            FieldListPagination: true,
-          },
-        },
-      });
-
-      expect(wrapper.html()).toContain("1");
-    });
-
-    it("should filter out non-interesting field rows", () => {
-      const wrapper = mount(FieldList, {
-        props: {
-          ...defaultProps,
-          showOnlyInterestingFields: true,
-        },
-        global: {
-          plugins: [i18n],
-          stubs: {
-            OFieldList: OFieldListStub,
-            FieldRow: true,
-            FieldExpansion: true,
-            FieldListPagination: true,
-          },
-        },
-      });
-
-      // Only 1 interesting field row (message), not 2
-      const fieldRows = wrapper.findAll('[data-test="log-search-field-row"]');
-      expect(fieldRows.length).toBe(1);
-    });
-  });
-
-  describe("theme support", () => {
-    it("should render group headers when theme is dark", () => {
-      const wrapper = mount(FieldList, {
-        props: {
-          ...defaultProps,
-          theme: "dark",
-        },
-        global: {
-          plugins: [i18n],
-          stubs: {
-            OFieldList: OFieldListStub,
-            FieldRow: true,
-            FieldExpansion: true,
-            FieldListPagination: true,
-            OBadge: true,
-          },
-        },
-      });
-
-      const groupHeader = wrapper.find('[data-test="logs-page-field-list-group-header-schema"]');
-      expect(groupHeader.exists()).toBe(true);
-      expect(groupHeader.text()).toContain("Fields");
-    });
-
-    it("should render group headers when theme is light", () => {
-      const wrapper = mount(FieldList, {
-        props: {
-          ...defaultProps,
-          theme: "light",
-        },
-        global: {
-          plugins: [i18n],
-          stubs: {
-            OFieldList: OFieldListStub,
-            FieldRow: true,
-            FieldExpansion: true,
-            FieldListPagination: true,
-            OBadge: true,
-          },
-        },
-      });
-
-      const groupHeader = wrapper.find('[data-test="logs-page-field-list-group-header-schema"]');
-      expect(groupHeader.exists()).toBe(true);
-      expect(groupHeader.text()).toContain("Fields");
-    });
-  });
-});
diff --git a/web/src/test/unit/plugins/pipelines/CustomNode.spec.ts b/web/src/test/unit/plugins/pipelines/CustomNode.spec.ts
index 68593c0d84..3361e3c059 100644
--- a/web/src/test/unit/plugins/pipelines/CustomNode.spec.ts
+++ b/web/src/test/unit/plugins/pipelines/CustomNode.spec.ts
@@ -128,9 +128,6 @@ describe("CustomNode.vue", () => {
           stubs: {
             Handle: true,
             "OIcon": true,
-            "q-separator": true,
-            "q-btn": true,
-            "q-tooltip": true,
             ConfirmDialog: true,
           },
         },
@@ -157,8 +154,6 @@ describe("CustomNode.vue", () => {
           stubs: {
             Handle: true,
             "OIcon": true,
-            "q-separator": true,
-            "q-btn": true,
             ConfirmDialog: true,
           },
         },
@@ -185,8 +180,6 @@ describe("CustomNode.vue", () => {
           stubs: {
             Handle: true,
             "OIcon": true,
-            "q-separator": true,
-            "q-btn": true,
             ConfirmDialog: true,
           },
         },
@@ -213,8 +206,6 @@ describe("CustomNode.vue", () => {
           stubs: {
             Handle: true,
             "OIcon": true,
-            "q-separator": true,
-            "q-btn": true,
             ConfirmDialog: true,
           },
         },
@@ -240,8 +231,6 @@ describe("CustomNode.vue", () => {
           stubs: {
             Handle: true,
             "OIcon": true,
-            "q-separator": true,
-            "q-btn": true,
             ConfirmDialog: true,
           },
         },
@@ -269,8 +258,6 @@ describe("CustomNode.vue", () => {
           stubs: {
             Handle: true,
             "OIcon": true,
-            "q-separator": true,
-            "q-btn": true,
             ConfirmDialog: true,
           },
         },
@@ -302,8 +289,6 @@ describe("CustomNode.vue", () => {
           stubs: {
             Handle: true,
             "OIcon": true,
-            "q-separator": true,
-            "q-btn": true,
             ConfirmDialog: true,
           },
         },
@@ -332,8 +317,6 @@ describe("CustomNode.vue", () => {
           stubs: {
             Handle: true,
             "OIcon": true,
-            "q-separator": true,
-            "q-btn": true,
             ConfirmDialog: true,
           },
         },
@@ -378,8 +361,6 @@ describe("CustomNode.vue", () => {
           stubs: {
             Handle: true,
             "OIcon": true,
-            "q-separator": true,
-            "q-btn": true,
             ConfirmDialog: true,
           },
         },
@@ -406,8 +387,6 @@ describe("CustomNode.vue", () => {
               props: ["type", "id"],
             },
             "OIcon": true,
-            "q-separator": true,
-            "q-btn": true,
             ConfirmDialog: true,
           },
         },
@@ -432,8 +411,6 @@ describe("CustomNode.vue", () => {
               props: ["type", "id"],
             },
             "OIcon": true,
-            "q-separator": true,
-            "q-btn": true,
             ConfirmDialog: true,
           },
         },
@@ -458,8 +435,6 @@ describe("CustomNode.vue", () => {
               props: ["type", "id"],
             },
             "OIcon": true,
-            "q-separator": true,
-            "q-btn": true,
             ConfirmDialog: true,
           },
         },
@@ -483,8 +458,6 @@ describe("CustomNode.vue", () => {
           stubs: {
             Handle: true,
             "OIcon": true,
-            "q-separator": true,
-            "q-btn": true,
             ConfirmDialog: true,
           },
         },
@@ -506,8 +479,6 @@ describe("CustomNode.vue", () => {
           stubs: {
             Handle: true,
             "OIcon": true,
-            "q-separator": true,
-            "q-btn": true,
             ConfirmDialog: true,
           },
         },
@@ -529,8 +500,6 @@ describe("CustomNode.vue", () => {
           stubs: {
             Handle: true,
             "OIcon": true,
-            "q-separator": true,
-            "q-btn": true,
             ConfirmDialog: true,
           },
         },
@@ -582,15 +551,12 @@ describe("CustomNode.vue", () => {
           stubs: {
             Handle: true,
             "OIcon": true,
-            "q-separator": true,
-            "q-btn": true,
-            "q-tooltip": true,
             ConfirmDialog: true,
           },
         },
       });
 
-      expect(wrapper.find(".error-badge").exists()).toBe(true);
+      expect(wrapper.find('[data-test="pipeline-node-error-badge"]').exists()).toBe(true);
     });
 
     it("should show error count in badge", () => {
@@ -632,9 +598,6 @@ describe("CustomNode.vue", () => {
           stubs: {
             Handle: true,
             "OIcon": true,
-            "q-separator": true,
-            "q-btn": true,
-            "q-tooltip": true,
             ConfirmDialog: true,
           },
         },
@@ -665,11 +628,6 @@ describe("CustomNode.vue", () => {
           stubs: {
             Handle: true,
             "OIcon": true,
-            "q-separator": true,
-            "q-btn": {
-              template: '<button @click="$attrs.onClick"><slot /></button>',
-            },
-            "q-tooltip": true,
             ConfirmDialog: true,
           },
         },
@@ -696,8 +654,6 @@ describe("CustomNode.vue", () => {
           stubs: {
             Handle: true,
             "OIcon": true,
-            "q-separator": true,
-            "q-btn": true,
             "confirm-dialog": {
               template: '<div class="confirm-dialog" />',
             },
diff --git a/web/src/test/unit/views/AppMetrics.spec.ts b/web/src/test/unit/views/AppMetrics.spec.ts
deleted file mode 100644
index ce37f75c6a..0000000000
--- a/web/src/test/unit/views/AppMetrics.spec.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { describe, it, expect } from "vitest";
-import { mount } from "@vue/test-utils";
-import AppMetrics from "@/views/AppMetrics.vue";
-
-describe("AppMetrics.vue", () => {
-  it("should render zinc-metrics component", () => {
-    const wrapper = mount(AppMetrics, {
-      global: {
-        stubs: {
-          "zinc-metrics": {
-            template: '<div data-test="zinc-metrics" />',
-          },
-        },
-      },
-    });
-
-    expect(wrapper.find('[data-test="zinc-metrics"]').exists()).toBe(true);
-  });
-
-  it("should render zinc-metrics with pageType attribute", () => {
-    const wrapper = mount(AppMetrics, {
-      global: {
-        stubs: {
-          "zinc-metrics": {
-            template: '<div class="zinc-metrics" v-bind="$attrs" />',
-          },
-        },
-      },
-    });
-
-    expect(wrapper.find(".zinc-metrics").exists()).toBe(true);
-  });
-
-  it("should render without errors", () => {
-    expect(() => {
-      mount(AppMetrics, {
-        global: {
-          stubs: {
-            "zinc-metrics": true,
-          },
-        },
-      });
-    }).not.toThrow();
-  });
-});
diff --git a/web/src/test/unit/views/AppTraces.spec.ts b/web/src/test/unit/views/AppTraces.spec.ts
deleted file mode 100644
index 137fa48130..0000000000
--- a/web/src/test/unit/views/AppTraces.spec.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { describe, it, expect } from "vitest";
-import { mount } from "@vue/test-utils";
-import AppTraces from "@/views/AppTraces.vue";
-
-describe("AppTraces.vue", () => {
-  it("should render zinc-traces component", () => {
-    const wrapper = mount(AppTraces, {
-      global: {
-        stubs: {
-          "zinc-traces": {
-            template: '<div class="zinc-traces" />',
-          },
-        },
-      },
-    });
-
-    expect(wrapper.find(".zinc-traces").exists()).toBe(true);
-  });
-
-  it("should render zinc-traces component with data attribute", () => {
-    const wrapper = mount(AppTraces, {
-      global: {
-        stubs: {
-          "zinc-traces": {
-            template: '<div data-test="zinc-traces-component"><slot /></div>',
-          },
-        },
-      },
-    });
-
-    expect(wrapper.find('[data-test="zinc-traces-component"]').exists()).toBe(true);
-  });
-
-  it("should render without errors", () => {
-    expect(() => {
-      mount(AppTraces, {
-        global: {
-          stubs: {
-            "zinc-traces": true,
-          },
-        },
-      });
-    }).not.toThrow();
-  });
-
-  it("should mount successfully", () => {
-    const wrapper = mount(AppTraces, {
-      global: {
-        stubs: {
-          "zinc-traces": true,
-        },
-      },
-    });
-
-    expect(wrapper.exists()).toBe(true);
-  });
-});
diff --git a/web/src/test/unit/views/RUM/RealUserMonitoring.spec.ts b/web/src/test/unit/views/RUM/RealUserMonitoring.spec.ts
index 957359d296..0c3fdd5e00 100644
--- a/web/src/test/unit/views/RUM/RealUserMonitoring.spec.ts
+++ b/web/src/test/unit/views/RUM/RealUserMonitoring.spec.ts
@@ -148,7 +148,6 @@ describe("RealUserMonitoring.vue", () => {
           plugins: [store, router, i18n],
           stubs: {
             "router-view": true,
-            "q-btn": true,
             "OIcon": true,
             AppTabs: true,
           },
@@ -178,9 +177,6 @@ describe("RealUserMonitoring.vue", () => {
           plugins: [store, router, i18n],
           stubs: {
             "router-view": true,
-            "q-btn": {
-              template: '<button @click="$attrs.onClick"><slot /></button>',
-            },
             "OIcon": true,
             AppTabs: true,
           },
@@ -201,9 +197,6 @@ describe("RealUserMonitoring.vue", () => {
           plugins: [store, router, i18n],
           stubs: {
             "router-view": true,
-            "q-btn": {
-              template: '<button @click="$attrs.onClick"><slot /></button>',
-            },
             "OIcon": true,
             AppTabs: true,
           },
@@ -255,7 +248,6 @@ describe("RealUserMonitoring.vue", () => {
           plugins: [store, router, i18n],
           stubs: {
             "router-view": true,
-            "q-btn": true,
             "OIcon": true,
             AppTabs: {
               template:
@@ -290,7 +282,6 @@ describe("RealUserMonitoring.vue", () => {
             "router-view": {
               template: '<div class="router-view"><slot /></div>',
             },
-            "q-btn": true,
             "OIcon": true,
             AppTabs: true,
           },
@@ -319,7 +310,6 @@ describe("RealUserMonitoring.vue", () => {
                 '<component :is="Component" v-bind="$attrs" v-slot="{ Component }" />',
               components: { component: childComponentStub },
             },
-            "q-btn": true,
             "OIcon": true,
             AppTabs: true,
           },
@@ -344,7 +334,6 @@ describe("RealUserMonitoring.vue", () => {
           plugins: [store, router, i18n],
           stubs: {
             "router-view": true,
-            "q-btn": true,
             "OIcon": true,
             AppTabs: true,
           },
@@ -380,7 +369,6 @@ describe("RealUserMonitoring.vue", () => {
           plugins: [store, router, i18n],
           stubs: {
             "router-view": true,
-            "q-btn": true,
             "OIcon": true,
             AppTabs: true,
           },
@@ -401,7 +389,6 @@ describe("RealUserMonitoring.vue", () => {
           plugins: [store, router, i18n],
           stubs: {
             "router-view": true,
-            "q-btn": true,
             "OIcon": true,
             AppTabs: true,
           },
@@ -421,7 +408,6 @@ describe("RealUserMonitoring.vue", () => {
           plugins: [store, router, i18n],
           stubs: {
             "router-view": true,
-            "q-btn": true,
             "OIcon": true,
             AppTabs: true,
           },
@@ -441,7 +427,6 @@ describe("RealUserMonitoring.vue", () => {
           plugins: [store, router, i18n],
           stubs: {
             "router-view": true,
-            "q-btn": true,
             "OIcon": true,
             AppTabs: true,
           },
@@ -532,7 +517,6 @@ describe("RealUserMonitoring.vue", () => {
           plugins: [store, router, i18n],
           stubs: {
             "router-view": true,
-            "q-btn": true,
             "OIcon": true,
             AppTabs: true,
           },
diff --git a/web/src/utils/alerts/alertDataTransforms.ts b/web/src/utils/alerts/alertDataTransforms.ts
index 78ecea887a..bef7fbc234 100644
--- a/web/src/utils/alerts/alertDataTransforms.ts
+++ b/web/src/utils/alerts/alertDataTransforms.ts
@@ -1,6 +1,5 @@
 /**
  * Alert Data Transformation Utilities
- * Extracted from AddAlert.vue to reduce file complexity
  *
  * VERSION SUPPORT:
  * - Version 1: Old structure with {and: [...]} or {or: [...]} format
diff --git a/web/src/utils/alerts/alertPayload.ts b/web/src/utils/alerts/alertPayload.ts
index a28224e9b0..56f46d1114 100644
--- a/web/src/utils/alerts/alertPayload.ts
+++ b/web/src/utils/alerts/alertPayload.ts
@@ -1,6 +1,5 @@
 /**
  * Alert Payload Generation Utilities
- * Extracted from AddAlert.vue to reduce file complexity
  */
 
 import { cloneDeep } from "lodash-es";
@@ -60,15 +59,14 @@ export interface SaveAlertContext {
 }
 
 /**
- * Drop the FORM-ONLY keys added by the OForm migration. These are seeded into
- * the form by `withFormExtras` and are not part of the alert resource:
+ * Drop the FORM-ONLY keys that are seeded into the form (by `withFormExtras`) but
+ * are not part of the alert resource:
  *   _ui        → display-only state (the "Check every" hours/minutes value the
  *                user sees; the real value is trigger_condition.frequency)
  *   _meta      → schema discriminators (tab / mode / org floor)
  *   logGroupBy → the logs group-by field array (mirrored into
  *                query_condition.aggregation.group_by)
- * Pre-migration formData had none of these, so dropping them restores the
- * pre-migration shape exactly (Rule ④). Mutates and returns `obj`.
+ * Mutates and returns `obj`.
  *
  * BOTH save paths must use this: the normal one (getAlertPayload) and the JSON
  * editor one (prepareAndSaveAlert). It is also applied to the JSON editor's
@@ -148,9 +146,8 @@ export const getAlertPayload = (
   // input produced. Both are name=-owned OFormInputs, and OFormInput registers
   // `v-bind="$attrs"` BEFORE its own @update:model-value="field.handleChange" — so
   // QueryConfig's Number()-coercing consumer handler runs FIRST and handleChange
-  // commits the raw string LAST, overwriting it. Pre-migration both went out as
-  // numbers (promql via `v-model.number`; having via a direct Number() write onto
-  // inputData), so without this the saved type silently drifts string-vs-number.
+  // commits the raw string LAST, overwriting it. Without this the saved type
+  // silently drifts string-vs-number.
   //
   // Coerced HERE rather than in the form, for two reasons:
   //   • it is the same last-mile rescue threshold/period/frequency/silence already
@@ -215,7 +212,7 @@ export const prepareAndSaveAlert = async (
   const payload = cloneDeep(data);
 
   // The JSON editor's data comes from the form value set, so it can carry the
-  // form-only keys. Pre-migration formData had none of them (Rule ④).
+  // form-only keys.
   stripFormExtras(payload);
 
   if (!isAggregationEnabled.value) {
diff --git a/web/src/utils/alerts/alertQueryBuilder.ts b/web/src/utils/alerts/alertQueryBuilder.ts
index 640b1ff65e..6452918e23 100644
--- a/web/src/utils/alerts/alertQueryBuilder.ts
+++ b/web/src/utils/alerts/alertQueryBuilder.ts
@@ -102,9 +102,6 @@ export const generateSqlQuery = (
   // SELECT histgoram(_timestamp, '1 minute') AS zo_sql_key, avg(action_error_count) as zo_sql_val,
   // geo_info_city FROM _rundata WHERE geo_info_country='india' GROUP BY zo_sql_key,geo_info_city ORDER BY zo_sql_key ASC;
   let query = `SELECT histogram(${timestampColumn}) AS zo_sql_key,`;
-  //this method is used to generate the where clause
-  //previously it was just iterating over the conditions and getting the where clause
-  //now we are using the new format of conditions and getting the where clause using generateWhereClause method
   const whereClause = generateWhereClause(
     formData.query_condition.conditions,
     streamFieldsMap,
diff --git a/web/src/utils/alerts/alertSummaryGenerator.ts b/web/src/utils/alerts/alertSummaryGenerator.ts
index d4d4ee9332..bbd4d0765c 100644
--- a/web/src/utils/alerts/alertSummaryGenerator.ts
+++ b/web/src/utils/alerts/alertSummaryGenerator.ts
@@ -15,7 +15,7 @@ export interface SummarySegment {
  * @param formData - The alert form data
  * @param destinations - Array of destination objects
  * @param t - Translation function (optional, for i18n support)
- * @param wizardStep - Deprecated: no longer gates content; kept for backward compatibility
+ * @param wizardStep - Deprecated; unused.
  * @param previewQuery - The formatted preview query string
  * @param generatedSqlQuery - The generated SQL query for custom conditions (computed property)
  */
@@ -30,7 +30,7 @@ export function generateAlertSummary(formData: any, destinations: any[], t?: (ke
     return '';
   }
 
-  // Default translation function if not provided (fallback for backward compatibility)
+  // Default translation function if not provided.
   const translate = t || ((key: string) => {
     const fallbacks: Record<string, string> = {
       'alerts.summary.monitors': 'Monitors',
diff --git a/web/src/utils/alerts/conditionsFormatter.ts b/web/src/utils/alerts/conditionsFormatter.ts
index a0d232c78f..6fedd8ec43 100644
--- a/web/src/utils/alerts/conditionsFormatter.ts
+++ b/web/src/utils/alerts/conditionsFormatter.ts
@@ -1,228 +1,27 @@
 /**
- * =============================================================================
- * SHARED UTILITY FOR FORMATTING V2 CONDITIONS INTO STRINGS
- * =============================================================================
+ * Shared utility for formatting V2 condition structures into strings. Used by:
+ * 1. UI Preview (FilterGroup.vue) - human-readable display of conditions
+ * 2. SQL Generation (alertQueryBuilder.ts) - WHERE clauses in SQL queries
  *
- * This module provides the core logic for converting V2 condition structures
- * into string representations. It's used by:
- * 1. UI Preview (FilterGroup.vue) - for displaying conditions in human-readable format
- * 2. SQL Generation (alertQueryBuilder.ts) - for building WHERE clauses in SQL queries
+ * V2 format:
+ *   Group:     { filterType: 'group', logicalOperator, groupId, conditions: [...] }
+ *   Condition: { filterType: 'condition', column, operator, value, logicalOperator, id }
  *
- * =============================================================================
- * V2 FORMAT STRUCTURE:
- * =============================================================================
+ * KEY INSIGHT — logical operator placement:
+ * The group's logicalOperator is NOT used when building the WHERE clause; it is
+ * only a UI default when adding new items to that group. Each item (condition or
+ * nested group) carries its own logicalOperator, which determines the operator
+ * that appears BEFORE that item (the first item at index 0 has no operator prefix).
  *
- * Group:
- * {
- *   filterType: 'group',
- *   logicalOperator: 'AND' | 'OR',  // NOT USED in WHERE clause generation!
- *                                    // Only used in UI as default when adding new items to this group
- *                                    // Each item's own logicalOperator determines the actual operator used
- *   groupId: 'uuid',
- *   conditions: [...]                // Array of conditions or nested groups
- * }
+ * Example conditions:
+ *   [ { column: 'age',    operator: '>', value: 30,       logicalOperator: 'AND' }, // index 0: no prefix
+ *     { column: 'city',   operator: '=', value: 'NYC',    logicalOperator: 'AND' }, // AND before
+ *     { column: 'status', operator: '=', value: 'active', logicalOperator: 'OR'  } ]// OR before
+ *   → "age > 30 AND city = 'NYC' OR status = 'active'"
  *
- * Condition:
- * {
- *   filterType: 'condition',
- *   column: 'age',
- *   operator: '>' | '=' | 'contains' | etc,
- *   value: any,
- *   logicalOperator: 'AND' | 'OR',  // Connects this item to PREVIOUS sibling (not used for index 0)
- *   id: 'uuid'
- * }
- *
- * =============================================================================
- * KEY INSIGHT: LOGICAL OPERATOR PLACEMENT
- * =============================================================================
- *
- * IMPORTANT: The group's logicalOperator field is NOT used when building the WHERE clause!
- *
- * Instead, each item (condition or nested group) has its own logicalOperator field that
- * determines the operator that appears BEFORE that item (except for the first item at index 0).
- *
- * The group's logicalOperator is only used in the UI as a default value when adding new
- * items to that group. It has no effect on the actual SQL generation.
- *
- * Example:
- * {
- *   filterType: 'group',
- *   logicalOperator: 'AND',  // ← This is IGNORED when building WHERE clause
- *   conditions: [
- *     { column: 'age', operator: '>', value: 30, logicalOperator: 'AND' },     // index 0: NO operator before
- *     { column: 'city', operator: '=', value: 'NYC', logicalOperator: 'AND' }, // index 1: AND before (from item's own field)
- *     { column: 'status', operator: '=', value: 'active', logicalOperator: 'OR' } // index 2: OR before (from item's own field)
- *   ]
- * }
- *
- * Result: "age > 30 AND city = 'NYC' OR status = 'active'"
- *          ↑ no operator  ↑ uses item[1].logicalOperator  ↑ uses item[2].logicalOperator
- *
- * =============================================================================
- * COMPLEX EXAMPLE: STEP-BY-STEP WALKTHROUGH
- * =============================================================================
- *
- * INPUT V2 STRUCTURE:
- * {
- *   filterType: 'group',
- *   logicalOperator: 'AND',  // ← ROOT GROUP: This field is IGNORED (not used in WHERE clause)
- *   conditions: [
- *     {
- *       filterType: 'condition',
- *       column: 'age',
- *       operator: '>',
- *       value: 18,
- *       logicalOperator: 'AND'
- *     },
- *     {
- *       filterType: 'condition',
- *       column: 'age',
- *       operator: '<',
- *       value: 65,
- *       logicalOperator: 'AND'
- *     },
- *     {
- *       filterType: 'group',
- *       logicalOperator: 'OR',      // ← NESTED GROUP: Also IGNORED (not used in WHERE clause)
- *                                    //   Only used in UI as default for new items added to this nested group
- *       conditions: [
- *         {
- *           filterType: 'condition',
- *           column: 'city',
- *           operator: '=',
- *           value: 'NYC',
- *           logicalOperator: 'OR'    // ← NESTED GROUP ITEM 0: This is IGNORED (index 0 never has operator prefix)
- *         },
- *         {
- *           filterType: 'condition',
- *           column: 'city',
- *           operator: '=',
- *           value: 'LA',
- *           logicalOperator: 'OR'    // ← NESTED GROUP ITEM 1: This IS USED (appears before this condition)
- *         }
- *       ],
- *       logicalOperator: 'AND'     // ← THIS IS USED: Connects THIS nested group to previous items in parent
- *     },
- *     {
- *       filterType: 'condition',
- *       column: 'status',
- *       operator: 'contains',
- *       value: 'premium',
- *       logicalOperator: 'AND'
- *     }
- *   ]
- * }
- *
- * PROCESSING STEPS (with sqlMode=true, formatValues=true):
- *
- * Step 1: Process condition at index 0
- *   - Input: { column='age', operator='>', value=18, logicalOperator='AND' }
- *   - Call formatValue('age', '>', 18, streamFieldsMap)
- *     → Check: streamFieldsMap['age']?.type === 'Int64' → TRUE
- *     → shouldNotQuote=true
- *     → Return: "18" (no quotes)
- *   - Call getFormattedCondition('age', '>', '18', sqlMode=true)
- *     → operator='>' matches case ">"
- *     → Return: "age > 18"
- *   - index=0, so NO operator prefix
- *   - Push to parts: "age > 18"
- *
- * Step 2: Process condition at index 1
- *   - Input: { column='age', operator='<', value=65, logicalOperator='AND' }
- *   - Call formatValue('age', '<', 65, streamFieldsMap)
- *     → Check: streamFieldsMap['age']?.type === 'Int64' → TRUE
- *     → Return: "65" (no quotes)
- *   - Call getFormattedCondition('age', '<', '65', sqlMode=true)
- *     → Return: "age < 65"
- *   - index=1, logicalOperator='AND', sqlMode=true
- *     → operator = 'AND'.toUpperCase() = "AND"
- *   - Push to parts: "AND age < 65"
- *
- * Step 3: Process nested group at index 2
- *   - Input: filterType='group' → Recursively call parseNode()
- *
- *   Inner Step 3a: Process first condition in nested group (index 0)
- *     - Input: { column='city', operator='=', value='NYC', logicalOperator='OR' }
- *     - formatValue('city', '=', 'NYC', streamFieldsMap)
- *       → Check: streamFieldsMap['city']?.type === 'String'
- *       → shouldNotQuote=false
- *       → Return: "'NYC'" (with quotes)
- *     - getFormattedCondition('city', '=', "'NYC'", sqlMode=true)
- *       → Return: "city = 'NYC'"
- *     - index=0 → NO operator prefix
- *     - Push: "city = 'NYC'"
- *
- *   Inner Step 3b: Process second condition in nested group (index 1)
- *     - Input: { column='city', operator='=', value='LA', logicalOperator='OR' }
- *     - formatValue('city', '=', 'LA', streamFieldsMap)
- *       → Return: "'LA'" (with quotes)
- *     - getFormattedCondition('city', '=', "'LA'", sqlMode=true)
- *       → Return: "city = 'LA'"
- *     - index=1, logicalOperator='OR', sqlMode=true
- *       → operator = "OR"
- *     - Push: "OR city = 'LA'"
- *
- *   Inner result: parts = ["city = 'NYC'", "OR city = 'LA'"]
- *   Inner join: "city = 'NYC' OR city = 'LA'"
- *
- *   - Wrap in parentheses: conditionStr = "(city = 'NYC' OR city = 'LA')"
- *   - Outer index=2, logicalOperator='AND'
- *   - Push to outer parts: "AND (city = 'NYC' OR city = 'LA')"
- *
- * Step 4: Process condition at index 3
- *   - Input: { column='status', operator='contains', value='premium', logicalOperator='AND' }
- *   - formatValue('status', 'contains', 'premium', streamFieldsMap)
- *     → Check: operator === 'contains' → TRUE
- *     → shouldNotQuote=true
- *     → Return: "premium" (no quotes - LIKE will handle it)
- *   - getFormattedCondition('status', 'contains', 'premium', sqlMode=true)
- *     → op.toLowerCase() = 'contains'
- *     → sqlMode=true → Return: "status LIKE '%premium%'"
- *   - index=3, logicalOperator='AND'
- *   - Push to parts: "AND status LIKE '%premium%'"
- *
- * Step 5: Join all parts
- *   parts = [
- *     "age > 18",
- *     "AND age < 65",
- *     "AND (city = 'NYC' OR city = 'LA')",
- *     "AND status LIKE '%premium%'"
- *   ]
- *
- *   Join with single space:
- *   result = "age > 18 AND age < 65 AND (city = 'NYC' OR city = 'LA') AND status LIKE '%premium%'"
- *
- * Step 6: Add WHERE prefix (if addWherePrefix=true)
- *   FINAL OUTPUT:
- *   "WHERE age > 18 AND age < 65 AND (city = 'NYC' OR city = 'LA') AND status LIKE '%premium%'"
- *
- * =============================================================================
- * DISPLAY MODE vs SQL MODE COMPARISON:
- * =============================================================================
- *
- * SAME INPUT, DIFFERENT MODES:
- *
- * DISPLAY MODE (sqlMode=false, formatValues=false):
- *   Options: { sqlMode: false, addWherePrefix: false, formatValues: false }
- *   Output: "age > '18' and age < '65' and (city = 'NYC' or city = 'LA') and status contains 'premium'"
- *
- *   Differences:
- *   - Logical operators: lowercase ('and', 'or')
- *   - Contains operator: kept as-is "status contains 'premium'"
- *   - No WHERE prefix
- *   - All values quoted (no type checking)
- *
- * SQL MODE (sqlMode=true, formatValues=true, addWherePrefix=true):
- *   Options: { sqlMode: true, addWherePrefix: true, formatValues: true, streamFieldsMap }
- *   Output: "WHERE age > 18 AND age < 65 AND (city = 'NYC' OR city = 'LA') AND status LIKE '%premium%'"
- *
- *   Differences:
- *   - Logical operators: uppercase ('AND', 'OR')
- *   - Contains operator: converted to LIKE "status LIKE '%premium%'"
- *   - WHERE prefix included
- *   - Type-aware quoting (Int64 no quotes, String with quotes)
- *
- * =============================================================================
+ * Display mode (sqlMode=false): lowercase and/or, `contains` kept as-is, all values quoted.
+ * SQL mode (sqlMode=true): uppercase AND/OR, `contains` → LIKE, type-aware quoting
+ * (Int64 unquoted, String quoted), optional WHERE prefix.
  */
 
 import type { StreamFieldsMap } from './alertQueryBuilder';
diff --git a/web/src/utils/alerts/focusManager.ts b/web/src/utils/alerts/focusManager.ts
index c4a50d1d8e..4ccf91b236 100644
--- a/web/src/utils/alerts/focusManager.ts
+++ b/web/src/utils/alerts/focusManager.ts
@@ -151,7 +151,6 @@ export class AlertFocusManager {
       'input:not([type="hidden"])',
       'select',
       'textarea',
-      '.q-field__native', // legacy input
       '[contenteditable="true"]'
     ];
 
diff --git a/web/src/utils/chartTheme.ts b/web/src/utils/chartTheme.ts
new file mode 100644
index 0000000000..548e00e2d4
--- /dev/null
+++ b/web/src/utils/chartTheme.ts
@@ -0,0 +1,71 @@
+// Copyright 2026 OpenObserve Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Token-driven chart palette.
+ *
+ * Charting libraries (ECharts / Plotly) need *resolved* color strings, not CSS
+ * `var()` references. `chartColor()` reads the computed value of a design token
+ * off `<html>` so chart code can consume tokens without hardcoding hex or writing
+ * `theme === 'dark' ? '#x' : '#y'` ternaries. Values are cached and invalidated on
+ * theme change via `invalidateChartTheme()` (called from `utils/theme.ts`).
+ *
+ * This is one of exactly two files permitted to be theme-aware in JS (the other is
+ * `composables/useTheme.ts`); everything else must go through tokens or these seams.
+ */
+
+const cache = new Map<string, string>();
+
+// Fallback light-theme values, used when the computed value is empty — i.e. the
+// token stylesheet hasn't applied yet (very early call) or there is no live CSSOM
+// (jsdom unit tests / SSR). Keeps charts from rendering with empty color strings.
+// These are the light-theme resolutions of the corresponding tokens.
+const FALLBACKS: Record<string, string> = {
+  "--color-text-heading": "#171717",
+  "--color-text-secondary": "#737373",
+  "--color-border-default": "#e5e5e5",
+  "--color-border-subtle": "#ededed",
+  "--color-surface-base": "#ffffff",
+  "--color-tooltip-text": "#171717",
+  "--color-tooltip-bg": "#ffffff",
+  "--color-tooltip-border": "#ededed",
+  "--color-service-health-critical": "#f5222d",
+  "--color-service-health-degraded": "#faad14",
+  "--color-service-health-healthy": "#52c41a",
+  "--color-service-health-warning": "#fa8c16",
+};
+
+/** Resolve a `--color-*` (or `--text-*`) design token to its computed value. */
+export function chartColor(token: `--${string}`): string {
+  const cached = cache.get(token);
+  if (cached !== undefined) return cached;
+  const computed = getComputedStyle(document.documentElement).getPropertyValue(token).trim();
+  if (computed) {
+    cache.set(token, computed); // only cache real values; retry until CSS is live
+    return computed;
+  }
+  return FALLBACKS[token] ?? "";
+}
+
+/** Clear the resolved-token cache. Call on theme change so charts pick up new values. */
+export function invalidateChartTheme(): void {
+  cache.clear();
+}
+
+// Convenience getters used by the dashboard/trace chart converters.
+export const chartTextColor = (): string => chartColor("--color-text-secondary");
+export const chartAxisLine = (): string => chartColor("--color-border-default");
+export const chartBg = (): string => chartColor("--color-surface-base");
+export const chartGridLine = (): string => chartColor("--color-border-subtle");
diff --git a/web/src/utils/commons.ts b/web/src/utils/commons.ts
index 81378dc54b..51908fd148 100644
--- a/web/src/utils/commons.ts
+++ b/web/src/utils/commons.ts
@@ -62,7 +62,7 @@ export const modifySQLQuery = async (
   return modString;
 };
 
-// ----------- NEW Methods to retrieve dashboard data
+// ----------- Methods to retrieve dashboard data
 export function getConsumableDateTime(dateObj: any) {
   if (dateObj.tab == "relative") {
     // watcher issue based on changeRelativeDate() in logs/Index.vue
diff --git a/web/src/utils/dashboard/aliasUtils.ts b/web/src/utils/dashboard/aliasUtils.ts
index 537df577bb..f479d8d2e3 100644
--- a/web/src/utils/dashboard/aliasUtils.ts
+++ b/web/src/utils/dashboard/aliasUtils.ts
@@ -15,26 +15,16 @@
 
 /**
  * Retrieves a value from an object using a case-insensitive fallback strategy.
- * 
- * This function is performance-critical and may be called millions of times in nested loops.
- * It handles various edge cases including:
- * - Numeric keys (100, 200, etc.)
- * - CamelCase string keys (xAxis)
- * - Lowercase string keys (xaxis)
- * - Falsy values (0, false, '', null) which are valid and should be returned
- * - Null/undefined objects and aliases (returns undefined safely without errors)
- * 
- * Search strategy:
- * 1. First checks for exact key match (case-sensitive)
- * 2. If not found and alias is a string, falls back to lowercase version
- * 3. Returns undefined only if no match is found
- * 
- * Performance optimizations:
- * - Early return on null/undefined objects or alias
- * - Uses strict inequality (!==) to properly handle falsy values like 0 and false
- * - Minimizes string operations (only converts to lowercase when necessary)
- * - No unnecessary intermediate variables or complex conditionals
- * 
+ *
+ * Performance-critical: may be called millions of times in nested loops.
+ * Handles numeric keys, camelCase vs lowercase string keys, falsy values
+ * (0, false, '', null) which are valid and returned as-is, and null/undefined
+ * objects/aliases (returns undefined without throwing).
+ *
+ * Search strategy: exact (case-sensitive) match first; if not found and alias
+ * is a string, falls back to its lowercase form. Uses strict inequality (!==)
+ * so falsy values like 0 and false are returned rather than treated as missing.
+ *
  * @param obj - The object to search in (can be null/undefined)
  * @param alias - The key to search for (string or number, can be null/undefined)
  * @returns The value if found, undefined otherwise (never throws errors)
@@ -49,14 +39,11 @@
  * getDataValue({ key: 'value' }, null) // Returns undefined (no error)
  */
 export const getDataValue = (obj: any, alias: string | number): any => {
-  // Early return for null/undefined objects or alias
   if (!obj || alias == null) return undefined;
 
-  // Direct access - handle all types of keys (string, number)
   const value = obj[alias];
   if (value !== undefined) return value;
 
-  // Lowercase fallback only for string keys
-  // Numeric keys don't need this fallback
+  // Lowercase fallback only for string keys; numeric keys don't need it.
   return typeof alias === 'string' ? obj[alias.toLowerCase()] : undefined;
 };
diff --git a/web/src/utils/dashboard/chartColorUtils.ts b/web/src/utils/dashboard/chartColorUtils.ts
index 927d22324c..077463a860 100644
--- a/web/src/utils/dashboard/chartColorUtils.ts
+++ b/web/src/utils/dashboard/chartColorUtils.ts
@@ -99,7 +99,6 @@ export const isColorDark = (hex: string): boolean => {
   return (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255 < 0.5;
 };
 
-// Modify the getContrastColor function to consider theme
 export const getContrastColor = (
   backgroundColor: string,
   isDarkTheme: boolean,
diff --git a/web/src/utils/dashboard/chartDimensionUtils.ts b/web/src/utils/dashboard/chartDimensionUtils.ts
index 23cda88a95..5b19248a19 100644
--- a/web/src/utils/dashboard/chartDimensionUtils.ts
+++ b/web/src/utils/dashboard/chartDimensionUtils.ts
@@ -1,3 +1,5 @@
+import { canvasFont } from "@/utils/fonts";
+
 // Cached 2D context for text measurement — canvas measureText is the same
 // browser API ECharts measures its labels with, and it avoids the
 // DOM-append + forced-reflow cost of measuring with a <span>, which adds up
@@ -31,8 +33,9 @@ export const calculateWidthText = (
     }
   }
   if (measureTextCtx) {
-    // sans-serif matches the font ECharts renders axis labels with
-    measureTextCtx.font = `${fontSize || "12px"} sans-serif`;
+    // Must match the family ECharts renders axis labels with (set globally by
+    // registerO2EChartsTheme), otherwise nameGap/width come out wrong.
+    measureTextCtx.font = canvasFont(fontSize || "12px", "sans");
     return Math.ceil(measureTextCtx.measureText(String(text)).width);
   }
 
@@ -199,11 +202,8 @@ export const calculateRotatedLabelBottomSpace = (
     // Only add if totalNeeded exceeds a reasonable base (e.g., 40px)
     return Math.max(0, Math.ceil(totalNeededSpace - 40));
   } else {
-    // Without axis name, containLabel: true in grid config handles the space automatically
-    // for rotated labels. No additional bottom spacing is needed because:
-    // 1. containLabel: true makes ECharts automatically expand grid to fit labels
-    // 2. The grid.bottom value already provides base spacing
-    // 3. Adding extra space here causes unnecessary whitespace
+    // Without an axis name, grid's containLabel: true expands the grid to fit
+    // rotated labels, so no extra bottom spacing is needed.
     return 10; // Let ECharts handle it with containLabel
   }
 };
diff --git a/web/src/utils/dashboard/colorPalette.ts b/web/src/utils/dashboard/colorPalette.ts
index 6d137dd47f..2be332289a 100644
--- a/web/src/utils/dashboard/colorPalette.ts
+++ b/web/src/utils/dashboard/colorPalette.ts
@@ -54,7 +54,6 @@ export const classicColorPaletteDarkTheme = [
   "#fef08a", // amber
 ];
 
-// Update the getColorPalette function to handle string theme values
 export const getColorPalette = (theme: string) => {
   return theme === "dark"
     ? classicColorPaletteDarkTheme
diff --git a/web/src/utils/dashboard/convertCustomChartData.ts b/web/src/utils/dashboard/convertCustomChartData.ts
index eb4f308d38..24cc266675 100644
--- a/web/src/utils/dashboard/convertCustomChartData.ts
+++ b/web/src/utils/dashboard/convertCustomChartData.ts
@@ -1,325 +1,324 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import router from "src/router";
-import * as acorn from "acorn";
-import * as walk from "acorn-walk";
-import { ref } from 'vue';
-
-// Add at the top of the file
-export const panelIdToBeRefreshed = ref<string | null>(null);
-
-/**
- * Converts SQL data into a format suitable for rendering a chart.
- *
- * @param {any} panelSchema - the panel schema object
- * @param {any} searchQueryData - the search query data
- * @param {any} store - the store object
- * @return {Object} - the options object for rendering the chart
- */
-
-
-export const runJavaScriptCode = (panelSchema: any, searchQueryData: any) => {
-  return new Promise((resolve, reject) => {
-    // Skip if this panel is not the one to be refreshed
-    if (panelIdToBeRefreshed.value && panelIdToBeRefreshed.value !== panelSchema.id) {
-      return;
-    }
-
-    const iframe = document.createElement("iframe");
-    iframe.style.display = "none";
-    iframe.setAttribute("sandbox", "allow-scripts");
-    document.body.appendChild(iframe);
-
-    let staticEchartsRef = "/web/src/assets/dashboard/echarts.min.js";
-    let staticPurifierRef = "/web/src/assets/dashboard/purify.min.js";
-
-    if (!window.location.pathname.includes("web")) {
-      staticEchartsRef = "/src/assets/dashboard/echarts.min.js";
-      staticPurifierRef = "/src/assets/dashboard/purify.min.js";
-    }
-    let userCode = panelSchema.customChartContent;
-
-    // **Validation before execution**
-    const validationError = validateUserCode(userCode);
-    if (validationError) {
-      reject(new Error(`Unsafe code detected: ${validationError}`));
-      document.body.removeChild(iframe);
-      return;
-    }
-
-    // Generate a nonce
-    const nonce = Math.random().toString(36).substring(2);
-
-    const scriptContent = `
-  <meta http-equiv="Content-Security-Policy" content="
-    default-src 'none';
-    script-src 'self' 'nonce-${nonce}';
-    style-src 'none';
-    frame-src 'none';
-    connect-src 'none';
-  ">
-
-  <script src="${staticEchartsRef}" nonce="${nonce}"></script>
-  <script src="${staticPurifierRef}" nonce="${nonce}"></script>
-  <script nonce="${nonce}">
-    let securityPolicyError = false;
-    let cspViolationDetected = false;
-
-    window.onerror = function(message, source, lineno, colno, error) {
-      parent.postMessage({ type: 'error', message: message.toString() }, '*');
-    };
-
-    // Detect CSP Violations
-    document.addEventListener("securitypolicyviolation", (event) => {
-      securityPolicyError = true;
-      cspViolationDetected = true;
-      parent.postMessage({ 
-        type: 'error', 
-        message: 'CSP Violation: ' + event.violatedDirective + ' blocked ' + event.blockedURI 
-      }, '*');
-    });
-
-    // Handle script execution with a timeout
-    window.addEventListener('message', (event) => {
-      if (event.data.type === 'execute') {
-        try {
-          const data = JSON.parse(event.data.data);
-          const userCode = event.data.code.trim();
-
-          const convertFunctionsToString = (obj) => {
-            if (typeof obj === 'function') {
-              try {
-                const functionString = obj.toString();
-                return DOMPurify.sanitize(functionString); // Sanitize function string
-              } catch (e) {
-                return 'Error sanitizing function';
-              }
-            }
-            if (Array.isArray(obj)) return obj.map(convertFunctionsToString);
-            if (typeof obj === 'object' && obj !== null) {
-              return Object.fromEntries(
-                Object.entries(obj).map(([key, value]) => [key, convertFunctionsToString(value)])
-              );
-            }
-            return obj;
-          };
-
-
-          // Execution timeout to prevent infinite loops
-          const timeout = setTimeout(() => {
-            parent.postMessage({ type: 'error', message: 'Execution Timeout: Script took too long to run' }, '*');
-          }, 2000);
-
-          (function(data, echarts) {
-            try {
-              ${userCode};
-            } catch (err) {
-              parent.postMessage({ type: 'error', message: 'Execution Error: ' + err.message }, '*');
-              return;
-            }
-
-            clearTimeout(timeout); // Clear timeout if execution completes
-            
-            // Ensure CSP violations are detected before responding
-            setTimeout(() => {
-              
-              if (securityPolicyError || cspViolationDetected) {
-                parent.postMessage({ type: 'error', message: 'CSP Violation Detected. Execution blocked.' }, '*');
-              } else {
-                parent.postMessage({ type: 'success', result: JSON.stringify(convertFunctionsToString(option)) }, '*');
-              }
-            }, 0); // Delay to ensure CSP events have time to process
-
-          })(data, window.echarts);
-
-        } catch (error) {
-          parent.postMessage({ type: 'error', message: error.message }, '*');
-        }
-      }
-    });
-  </script>
-    `;
-
-
-
-    iframe.srcdoc = scriptContent;
-
-    window.addEventListener("message", function handler(event) {
-      if (event.source !== iframe.contentWindow) return;
-
-      // Double check if this is still the panel to be refreshed
-      if (panelIdToBeRefreshed.value && panelIdToBeRefreshed.value !== panelSchema.id) {
-        window.removeEventListener("message", handler);
-        document.body.removeChild(iframe);
-        return;
-      }
-
-      window.removeEventListener("message", handler);
-      setTimeout(() => {
-        document.body.removeChild(iframe);
-      }, 2000);
-
-      if (event.data.type === "success") {
-        resolve(JSON.parse(event.data.result));
-        // Clear the panelIdToBeRefreshed after success
-        if (panelIdToBeRefreshed.value === panelSchema.id) {
-          panelIdToBeRefreshed.value = null;
-        }
-      } else if (event.data.type === "error") {
-        console.error("Error executing code", event.data.message);
-        reject(new Error(event.data.message));
-      }
-    });
-
-    iframe.onload = () => {
-      iframe?.contentWindow?.postMessage(
-        {
-          type: "execute",
-          code: userCode, 
-          data: JSON.stringify(searchQueryData),
-        },
-        "*"
-      );
-    };
-  });
-};
-
-
-
-export const validateUserCode = (code: string): string | null => {
-  try {
-    // Parse the code using Acorn
-    const ast = acorn.parse(code, { ecmaVersion: 2020 }) as acorn.Node;
-
-    let errorMessage: string | null = null;
-
-    const forbiddenIdentifiers: string[] = [
-      "window",
-      "document",
-      "localStorage",
-      "sessionStorage",
-      "navigator",
-      "fetch",
-      "XMLHttpRequest",
-    ];
-
-    const forbiddenFunctions: string[] = [
-      "eval",
-      "setInterval", // Completely blocked
-      "Function",
-      "require",
-      "alert",
-      "fetch",
-      "XMLHttpRequest",
-    ];
-
-    // Walk through the AST and analyze the code
-    walk.simple(ast, {
-      CallExpression(node: acorn.Node & { callee: any; arguments: any[] }) {
-        // **Direct function call check (eval(), fetch(), etc.)**
-        if (
-          node.callee.type === "Identifier" &&
-          forbiddenFunctions.includes(node.callee.name)
-        ) {
-          errorMessage = `Use of '${node.callee.name}()' is not allowed.`;
-        }
-
-        // **Detect setTimeout() misuse**
-        if (
-          node.callee.type === "Identifier" &&
-          node.callee.name === "setTimeout"
-        ) {
-          if (
-            node.arguments.length > 1 &&
-            node.arguments[1].type === "Literal" &&
-            typeof node.arguments[1].value === "number"
-          ) {
-            const delay = node.arguments[1].value;
-            if (delay < 100) {
-              errorMessage = "Use of 'setTimeout()' with delay < 100ms is not allowed.";
-            }
-          } else {
-            errorMessage = "Invalid usage of 'setTimeout()'.";
-          }
-
-          // Block setTimeout(() => eval(...))
-          if (
-            node.arguments.length > 0 &&
-            node.arguments[0].type === "CallExpression" &&
-            node.arguments[0].callee.type === "Identifier" &&
-           ( node.arguments[0].callee.name === "eval" || node.arguments[0].callee.name === "Function")
-          ) {
-            errorMessage = `Use of ${node.arguments[0].callee.name} inside 'setTimeout()' is not allowed.`;
-          }
-        }
-
-        // **Detect obfuscation like ['f','e','t','c','h'].join('')**
-        if (
-          node.callee.type === "MemberExpression" &&
-          node.callee.property.type === "Identifier" &&
-          node.callee.property.name === "join" &&
-          node.arguments.length === 1 &&
-          node.arguments[0].type === "Literal" &&
-          node.arguments[0].value === ""
-        ) {
-          errorMessage = "Obfuscated function call detected.";
-        }
-      },
-
-      MemberExpression(node: acorn.Node & { object: any; property: any }) {
-        // **Detect direct access to forbidden objects (e.g., document.cookie, localStorage.setItem)**
-        if (
-          node.object.type === "Identifier" &&
-          forbiddenIdentifiers.includes(node.object.name)
-        ) {
-          errorMessage = `Access to '${node.object.name}' is not allowed.`;
-        }
-
-        // **Detect obfuscated method calls like this[x] where x is created using .join("")**
-        if (
-          node.property.type === "CallExpression" &&
-          node.property.callee.type === "MemberExpression" &&
-          node.property.callee.property.name === "join"
-        ) {
-          errorMessage = "Obfuscated method/property access detected.";
-        }
-      },
-
-      WhileStatement(node: acorn.Node & { test: any }) {
-        // **Detect `while (true)`**
-        if (node.test.type === "Literal" && node.test.value === true) {
-          errorMessage = "Infinite loop using 'while(true)' is not allowed.";
-        }
-      },
-
-      ForStatement(node: acorn.Node & acorn.ForStatement) {
-        // **Detect `for(;;)` which means infinite loop**
-        if (!node.test) {
-          errorMessage = "Infinite loop using 'for(;;)' is not allowed.";
-        }
-      },
-      NewExpression(node: acorn.Node & { callee: any }) {
-        if (node.callee.type === "Identifier" && node.callee.name === "Function") {
-          errorMessage = "Use of 'new Function()' is not allowed.";
-        }
-      },
-    });
-
-    return errorMessage;
-  } catch (error) {
-    return "Invalid JavaScript syntax.";
-  }
-};
+// Copyright 2026 OpenObserve Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import router from "src/router";
+import * as acorn from "acorn";
+import * as walk from "acorn-walk";
+import { ref } from 'vue';
+
+export const panelIdToBeRefreshed = ref<string | null>(null);
+
+/**
+ * Converts SQL data into a format suitable for rendering a chart.
+ *
+ * @param {any} panelSchema - the panel schema object
+ * @param {any} searchQueryData - the search query data
+ * @param {any} store - the store object
+ * @return {Object} - the options object for rendering the chart
+ */
+
+
+export const runJavaScriptCode = (panelSchema: any, searchQueryData: any) => {
+  return new Promise((resolve, reject) => {
+    // Skip if this panel is not the one to be refreshed
+    if (panelIdToBeRefreshed.value && panelIdToBeRefreshed.value !== panelSchema.id) {
+      return;
+    }
+
+    const iframe = document.createElement("iframe");
+    iframe.style.display = "none";
+    iframe.setAttribute("sandbox", "allow-scripts");
+    document.body.appendChild(iframe);
+
+    let staticEchartsRef = "/web/src/assets/dashboard/echarts.min.js";
+    let staticPurifierRef = "/web/src/assets/dashboard/purify.min.js";
+
+    if (!window.location.pathname.includes("web")) {
+      staticEchartsRef = "/src/assets/dashboard/echarts.min.js";
+      staticPurifierRef = "/src/assets/dashboard/purify.min.js";
+    }
+    let userCode = panelSchema.customChartContent;
+
+    // **Validation before execution**
+    const validationError = validateUserCode(userCode);
+    if (validationError) {
+      reject(new Error(`Unsafe code detected: ${validationError}`));
+      document.body.removeChild(iframe);
+      return;
+    }
+
+    // Generate a nonce
+    const nonce = Math.random().toString(36).substring(2);
+
+    const scriptContent = `
+  <meta http-equiv="Content-Security-Policy" content="
+    default-src 'none';
+    script-src 'self' 'nonce-${nonce}';
+    style-src 'none';
+    frame-src 'none';
+    connect-src 'none';
+  ">
+
+  <script src="${staticEchartsRef}" nonce="${nonce}"></script>
+  <script src="${staticPurifierRef}" nonce="${nonce}"></script>
+  <script nonce="${nonce}">
+    let securityPolicyError = false;
+    let cspViolationDetected = false;
+
+    window.onerror = function(message, source, lineno, colno, error) {
+      parent.postMessage({ type: 'error', message: message.toString() }, '*');
+    };
+
+    // Detect CSP Violations
+    document.addEventListener("securitypolicyviolation", (event) => {
+      securityPolicyError = true;
+      cspViolationDetected = true;
+      parent.postMessage({ 
+        type: 'error', 
+        message: 'CSP Violation: ' + event.violatedDirective + ' blocked ' + event.blockedURI 
+      }, '*');
+    });
+
+    // Handle script execution with a timeout
+    window.addEventListener('message', (event) => {
+      if (event.data.type === 'execute') {
+        try {
+          const data = JSON.parse(event.data.data);
+          const userCode = event.data.code.trim();
+
+          const convertFunctionsToString = (obj) => {
+            if (typeof obj === 'function') {
+              try {
+                const functionString = obj.toString();
+                return DOMPurify.sanitize(functionString); // Sanitize function string
+              } catch (e) {
+                return 'Error sanitizing function';
+              }
+            }
+            if (Array.isArray(obj)) return obj.map(convertFunctionsToString);
+            if (typeof obj === 'object' && obj !== null) {
+              return Object.fromEntries(
+                Object.entries(obj).map(([key, value]) => [key, convertFunctionsToString(value)])
+              );
+            }
+            return obj;
+          };
+
+
+          // Execution timeout to prevent infinite loops
+          const timeout = setTimeout(() => {
+            parent.postMessage({ type: 'error', message: 'Execution Timeout: Script took too long to run' }, '*');
+          }, 2000);
+
+          (function(data, echarts) {
+            try {
+              ${userCode};
+            } catch (err) {
+              parent.postMessage({ type: 'error', message: 'Execution Error: ' + err.message }, '*');
+              return;
+            }
+
+            clearTimeout(timeout); // Clear timeout if execution completes
+            
+            // Ensure CSP violations are detected before responding
+            setTimeout(() => {
+              
+              if (securityPolicyError || cspViolationDetected) {
+                parent.postMessage({ type: 'error', message: 'CSP Violation Detected. Execution blocked.' }, '*');
+              } else {
+                parent.postMessage({ type: 'success', result: JSON.stringify(convertFunctionsToString(option)) }, '*');
+              }
+            }, 0); // Delay to ensure CSP events have time to process
+
+          })(data, window.echarts);
+
+        } catch (error) {
+          parent.postMessage({ type: 'error', message: error.message }, '*');
+        }
+      }
+    });
+  </script>
+    `;
+
+
+
+    iframe.srcdoc = scriptContent;
+
+    window.addEventListener("message", function handler(event) {
+      if (event.source !== iframe.contentWindow) return;
+
+      // Double check if this is still the panel to be refreshed
+      if (panelIdToBeRefreshed.value && panelIdToBeRefreshed.value !== panelSchema.id) {
+        window.removeEventListener("message", handler);
+        document.body.removeChild(iframe);
+        return;
+      }
+
+      window.removeEventListener("message", handler);
+      setTimeout(() => {
+        document.body.removeChild(iframe);
+      }, 2000);
+
+      if (event.data.type === "success") {
+        resolve(JSON.parse(event.data.result));
+        // Clear the panelIdToBeRefreshed after success
+        if (panelIdToBeRefreshed.value === panelSchema.id) {
+          panelIdToBeRefreshed.value = null;
+        }
+      } else if (event.data.type === "error") {
+        console.error("Error executing code", event.data.message);
+        reject(new Error(event.data.message));
+      }
+    });
+
+    iframe.onload = () => {
+      iframe?.contentWindow?.postMessage(
+        {
+          type: "execute",
+          code: userCode, 
+          data: JSON.stringify(searchQueryData),
+        },
+        "*"
+      );
+    };
+  });
+};
+
+
+
+export const validateUserCode = (code: string): string | null => {
+  try {
+    // Parse the code using Acorn
+    const ast = acorn.parse(code, { ecmaVersion: 2020 }) as acorn.Node;
+
+    let errorMessage: string | null = null;
+
+    const forbiddenIdentifiers: string[] = [
+      "window",
+      "document",
+      "localStorage",
+      "sessionStorage",
+      "navigator",
+      "fetch",
+      "XMLHttpRequest",
+    ];
+
+    const forbiddenFunctions: string[] = [
+      "eval",
+      "setInterval", // Completely blocked
+      "Function",
+      "require",
+      "alert",
+      "fetch",
+      "XMLHttpRequest",
+    ];
+
+    // Walk through the AST and analyze the code
+    walk.simple(ast, {
+      CallExpression(node: acorn.Node & { callee: any; arguments: any[] }) {
+        // **Direct function call check (eval(), fetch(), etc.)**
+        if (
+          node.callee.type === "Identifier" &&
+          forbiddenFunctions.includes(node.callee.name)
+        ) {
+          errorMessage = `Use of '${node.callee.name}()' is not allowed.`;
+        }
+
+        // **Detect setTimeout() misuse**
+        if (
+          node.callee.type === "Identifier" &&
+          node.callee.name === "setTimeout"
+        ) {
+          if (
+            node.arguments.length > 1 &&
+            node.arguments[1].type === "Literal" &&
+            typeof node.arguments[1].value === "number"
+          ) {
+            const delay = node.arguments[1].value;
+            if (delay < 100) {
+              errorMessage = "Use of 'setTimeout()' with delay < 100ms is not allowed.";
+            }
+          } else {
+            errorMessage = "Invalid usage of 'setTimeout()'.";
+          }
+
+          // Block setTimeout(() => eval(...))
+          if (
+            node.arguments.length > 0 &&
+            node.arguments[0].type === "CallExpression" &&
+            node.arguments[0].callee.type === "Identifier" &&
+           ( node.arguments[0].callee.name === "eval" || node.arguments[0].callee.name === "Function")
+          ) {
+            errorMessage = `Use of ${node.arguments[0].callee.name} inside 'setTimeout()' is not allowed.`;
+          }
+        }
+
+        // **Detect obfuscation like ['f','e','t','c','h'].join('')**
+        if (
+          node.callee.type === "MemberExpression" &&
+          node.callee.property.type === "Identifier" &&
+          node.callee.property.name === "join" &&
+          node.arguments.length === 1 &&
+          node.arguments[0].type === "Literal" &&
+          node.arguments[0].value === ""
+        ) {
+          errorMessage = "Obfuscated function call detected.";
+        }
+      },
+
+      MemberExpression(node: acorn.Node & { object: any; property: any }) {
+        // **Detect direct access to forbidden objects (e.g., document.cookie, localStorage.setItem)**
+        if (
+          node.object.type === "Identifier" &&
+          forbiddenIdentifiers.includes(node.object.name)
+        ) {
+          errorMessage = `Access to '${node.object.name}' is not allowed.`;
+        }
+
+        // **Detect obfuscated method calls like this[x] where x is created using .join("")**
+        if (
+          node.property.type === "CallExpression" &&
+          node.property.callee.type === "MemberExpression" &&
+          node.property.callee.property.name === "join"
+        ) {
+          errorMessage = "Obfuscated method/property access detected.";
+        }
+      },
+
+      WhileStatement(node: acorn.Node & { test: any }) {
+        // **Detect `while (true)`**
+        if (node.test.type === "Literal" && node.test.value === true) {
+          errorMessage = "Infinite loop using 'while(true)' is not allowed.";
+        }
+      },
+
+      ForStatement(node: acorn.Node & acorn.ForStatement) {
+        // **Detect `for(;;)` which means infinite loop**
+        if (!node.test) {
+          errorMessage = "Infinite loop using 'for(;;)' is not allowed.";
+        }
+      },
+      NewExpression(node: acorn.Node & { callee: any }) {
+        if (node.callee.type === "Identifier" && node.callee.name === "Function") {
+          errorMessage = "Use of 'new Function()' is not allowed.";
+        }
+      },
+    });
+
+    return errorMessage;
+  } catch (error) {
+    return "Invalid JavaScript syntax.";
+  }
+};
diff --git a/web/src/utils/dashboard/convertPivotTableData.ts b/web/src/utils/dashboard/convertPivotTableData.ts
index 0f4af6eeb1..c395d6d84b 100644
--- a/web/src/utils/dashboard/convertPivotTableData.ts
+++ b/web/src/utils/dashboard/convertPivotTableData.ts
@@ -34,7 +34,7 @@ import {
  *
  * header_rows = max(1, pivot_count + (y_count > 1 ? 1 : 0))
  *
- * When header_rows === 1 (1 pivot + 1 Y), returns [] to use standard q-table headers.
+ * When header_rows === 1 (1 pivot + 1 Y), returns [] to use standard table headers.
  * Otherwise returns an array of header level objects with cells[] and isLeaf flag.
  */
 function buildPivotHeaderLevels(
diff --git a/web/src/utils/dashboard/convertPromQLData.spec.ts b/web/src/utils/dashboard/convertPromQLData.spec.ts
index 759011c693..936c609376 100644
--- a/web/src/utils/dashboard/convertPromQLData.spec.ts
+++ b/web/src/utils/dashboard/convertPromQLData.spec.ts
@@ -1,6 +1,7 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { convertPromQLData } from "./convertPromQLData";
 import { getPropsByChartTypeForSeries } from "./promqlChartSeriesProps";
+import { chartColor } from "@/utils/chartTheme";
 
 // Mock dependencies
 vi.mock("./convertDataIntoUnitValue", () => ({
@@ -806,8 +807,12 @@ describe("Convert PromQL Data Utils", () => {
       );
 
       expect(result.options).toBeDefined();
-      expect(result.options.tooltip.textStyle.color).toBe("#fff");
-      expect(result.options.tooltip.backgroundColor).toBe("rgba(22,23,25,0.97)");
+      expect(result.options.tooltip.textStyle.color).toBe(
+        chartColor("--color-tooltip-text"),
+      );
+      expect(result.options.tooltip.backgroundColor).toBe(
+        chartColor("--color-tooltip-bg"),
+      );
     });
 
     it("should handle non-UTC timezone", async () => {
@@ -1859,8 +1864,12 @@ describe("Convert PromQL Data Utils", () => {
         mockAnnotations,
       );
 
-      expect(result.options.tooltip.backgroundColor).toBe("rgba(22,23,25,0.97)");
-      expect(result.options.tooltip.textStyle.color).toBe("#fff");
+      expect(result.options.tooltip.backgroundColor).toBe(
+        chartColor("--color-tooltip-bg"),
+      );
+      expect(result.options.tooltip.textStyle.color).toBe(
+        chartColor("--color-tooltip-text"),
+      );
     });
 
     it("should configure tooltip backgroundColor for light theme", async () => {
@@ -1894,8 +1903,12 @@ describe("Convert PromQL Data Utils", () => {
         mockAnnotations,
       );
 
-      expect(result.options.tooltip.backgroundColor).toBe("rgba(255,255,255,0.97)");
-      expect(result.options.tooltip.textStyle.color).toBe("#000");
+      expect(result.options.tooltip.backgroundColor).toBe(
+        chartColor("--color-tooltip-bg"),
+      );
+      expect(result.options.tooltip.textStyle.color).toBe(
+        chartColor("--color-tooltip-text"),
+      );
     });
 
     it("should handle legend width calculation without explicit configuration", async () => {
@@ -2124,7 +2137,9 @@ describe("Convert PromQL Data Utils", () => {
       );
 
       // Test that dark theme sets correct backgroundColor (line 662)
-      expect(resultDark.options.tooltip.backgroundColor).toBe("rgba(22,23,25,0.97)");
+      expect(resultDark.options.tooltip.backgroundColor).toBe(
+        chartColor("--color-tooltip-bg"),
+      );
 
       // Test light theme
       const mockStoreLight = {
@@ -2145,7 +2160,9 @@ describe("Convert PromQL Data Utils", () => {
       );
 
       // Test that light theme sets correct backgroundColor (line 662)
-      expect(resultLight.options.tooltip.backgroundColor).toBe("rgba(255,255,255,0.97)");
+      expect(resultLight.options.tooltip.backgroundColor).toBe(
+        chartColor("--color-tooltip-bg"),
+      );
     });
 
     it("should test metric chart renderItem function (lines 704-724)", async () => {
diff --git a/web/src/utils/dashboard/convertPromQLData.ts b/web/src/utils/dashboard/convertPromQLData.ts
index 3e3e08d28e..33a8b1fee6 100644
--- a/web/src/utils/dashboard/convertPromQLData.ts
+++ b/web/src/utils/dashboard/convertPromQLData.ts
@@ -32,6 +32,7 @@ import {
   getGridLineStyle,
 } from "./colorPalette";
 import { getAnnotationsData } from "@/utils/dashboard/getAnnotationsData";
+import { chartColor } from "@/utils/chartTheme";
 import {
   calculateBottomLegendHeight,
   calculateRightLegendWidth,
@@ -400,14 +401,12 @@ export const convertPromQLData = async (
       appendToBody: true,
       className: "o2-echarts-tooltip",
       textStyle: {
-        color: store.state.theme === "dark" ? "#fff" : "#000",
+        color: chartColor("--color-tooltip-text"),
         fontSize: 12,
       },
       enterable: true,
-      backgroundColor:
-        store.state.theme === "dark" ? "rgba(22,23,25,0.97)" : "rgba(255,255,255,0.97)",
-      borderColor:
-        store.state.theme === "dark" ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.08)",
+      backgroundColor: chartColor("--color-tooltip-bg"),
+      borderColor: chartColor("--color-tooltip-border"),
       borderWidth: 1,
       padding: [8, 12],
       extraCssText:
@@ -941,7 +940,7 @@ export const convertPromQLData = async (
           show: true,
           trigger: "item",
           textStyle: {
-            color: store.state.theme === "dark" ? "#fff" : "#000",
+            color: chartColor("--color-tooltip-text"),
             fontSize: 12,
           },
           valueFormatter: (value: any) => {
@@ -955,14 +954,8 @@ export const convertPromQLData = async (
             );
           },
           enterable: true,
-          backgroundColor:
-            store.state.theme === "dark"
-              ? "rgba(22,23,25,0.97)"
-              : "rgba(255,255,255,0.97)",
-          borderColor:
-            store.state.theme === "dark"
-              ? "rgba(255,255,255,0.1)"
-              : "rgba(0,0,0,0.08)",
+          backgroundColor: chartColor("--color-tooltip-bg"),
+          borderColor: chartColor("--color-tooltip-border"),
           borderWidth: 1,
           padding: [8, 12],
           extraCssText:
diff --git a/web/src/utils/dashboard/convertSQLData.ts b/web/src/utils/dashboard/convertSQLData.ts
index f75a0f0efa..f77b298a43 100644
--- a/web/src/utils/dashboard/convertSQLData.ts
+++ b/web/src/utils/dashboard/convertSQLData.ts
@@ -23,6 +23,7 @@
  */
 import { convertSQLChartData } from "./sql";
 import { applySeriesColorMappings } from "./chartColorUtils";
+import { chartColor } from "@/utils/chartTheme";
 import { calculateMetricFontSize } from "./sql/charts/convertSQLMetricChart";
 import {
   calculateGridPositions,
@@ -347,7 +348,6 @@ export const convertMultiSQLData = async (
       panelH,
       allMetricSeries.length,
     );
-    const isDark = store?.state?.theme === "dark";
     const longestText = allMetricSeries.reduce(
       (acc: string, s: any) =>
         (s._metricText ?? "").length > acc.length ? (s._metricText ?? "") : acc,
@@ -373,7 +373,7 @@ export const convertMultiSQLData = async (
         ((parseFloat(cell.left) + parseFloat(cell.width) / 2) / 100) * panelW;
       const cy =
         ((parseFloat(cell.top) + parseFloat(cell.height) / 2) / 100) * panelH;
-      const fill = s?._metricFillColor ?? (isDark ? "#fff" : "#000");
+      const fill = s?._metricFillColor ?? chartColor("--color-text-heading");
       // Grid-cell rect (px) is the hover zone; cx/cy/fontSize place + size the
       // copy icon beside the number, clamped inside the cell.
       s._metricLayout = {
diff --git a/web/src/utils/dashboard/heatmapDefaults.spec.ts b/web/src/utils/dashboard/heatmapDefaults.spec.ts
index ce1e95eb13..b7b89e3582 100644
--- a/web/src/utils/dashboard/heatmapDefaults.spec.ts
+++ b/web/src/utils/dashboard/heatmapDefaults.spec.ts
@@ -25,6 +25,7 @@ import {
   heatmapValueLabel,
 } from "./heatmapDefaults";
 import { SPECTRAL_HEATMAP_STOP_COUNT } from "./promql/shared/spectral";
+import { chartColor } from "@/utils/chartTheme";
 
 describe("shared heatmap defaults", () => {
   it("runs the colour ramp cool-to-warm", () => {
@@ -41,11 +42,11 @@ describe("shared heatmap defaults", () => {
     // Without a border ECharts paints cells edge to edge and a dense heatmap
     // collapses into solid horizontal bands.
     expect(heatmapCellItemStyle({ state: { theme: "dark" } })).toEqual({
-      borderColor: "#1e1e1e",
+      borderColor: chartColor("--color-surface-base"),
       borderWidth: 1,
     });
     expect(heatmapCellItemStyle({ state: { theme: "light" } })).toEqual({
-      borderColor: "#ffffff",
+      borderColor: chartColor("--color-surface-base"),
       borderWidth: 1,
     });
   });
diff --git a/web/src/utils/dashboard/heatmapDefaults.ts b/web/src/utils/dashboard/heatmapDefaults.ts
index 71fb2357f1..9cd274f1bd 100644
--- a/web/src/utils/dashboard/heatmapDefaults.ts
+++ b/web/src/utils/dashboard/heatmapDefaults.ts
@@ -17,9 +17,8 @@
  * Shared visual defaults for every heatmap the app draws.
  *
  * Three separate renderers build heatmaps — the PromQL converter, its
- * Prometheus-histogram mode, and the SQL converter — and they had drifted into
- * three different looks. These are the defaults all of them use, so a heatmap
- * looks like a heatmap wherever it appears.
+ * Prometheus-histogram mode, and the SQL converter — and share these defaults so
+ * a heatmap looks like a heatmap wherever it appears.
  *
  * This is presentation only. It says nothing about how the data is prepared:
  * the classic-histogram `le`-sort and de-accumulation stay opt-in behind
@@ -28,6 +27,7 @@
  */
 
 import { SPECTRAL_HEATMAP_STOPS } from "./promql/shared/spectral";
+import { chartColor } from "@/utils/chartTheme";
 
 /**
  * Stroke every cell in the panel background colour.
@@ -38,7 +38,7 @@ import { SPECTRAL_HEATMAP_STOPS } from "./promql/shared/spectral";
  */
 export function heatmapCellItemStyle(store: any) {
   return {
-    borderColor: store?.state?.theme === "dark" ? "#1e1e1e" : "#ffffff",
+    borderColor: chartColor("--color-surface-base"),
     borderWidth: 1,
   };
 }
diff --git a/web/src/utils/dashboard/legendConfiguration.ts b/web/src/utils/dashboard/legendConfiguration.ts
index b8d6e94e0d..04a24b50f5 100644
--- a/web/src/utils/dashboard/legendConfiguration.ts
+++ b/web/src/utils/dashboard/legendConfiguration.ts
@@ -636,7 +636,7 @@ export const applyRightLegendPositioning = (
     // Reserve minimum space for scroll legends to prevent chart overlap
     const chartWidth = chartPanelRef.value?.offsetWidth || 800;
 
-    // Calculate legend width similar to old code approach - ensuring proper space reservation
+    // Calculate legend width - ensuring proper space reservation
     let legendWidth;
 
     // Get the longest series name to calculate appropriate width
@@ -655,7 +655,7 @@ export const applyRightLegendPositioning = (
     }
 
     // Calculate legend width based on content, with constraints for different container sizes
-    // Use the same logic as the old code - ensure legends and chart both get reasonable space
+    // Ensure legends and chart both get reasonable space
     legendWidth = Math.min(
       chartWidth / 3, // Never take more than 1/3 of the chart width
       calculateWidthText(maxValue) + 60, // Calculate based on text width + padding for icons and scroll
@@ -673,7 +673,7 @@ export const applyRightLegendPositioning = (
     options.legend.left = legendLeftPx;
     options.legend.right = 0;
 
-    // Set text width for truncation similar to old code
+    // Set text width for truncation
     options.legend.textStyle = options.legend.textStyle || {};
     options.legend.textStyle.width = legendWidth - 55; // Account for padding and scroll indicators
   }
diff --git a/web/src/utils/dashboard/panelTimeUtils.ts b/web/src/utils/dashboard/panelTimeUtils.ts
index a0c5281e45..e024c3bf7b 100644
--- a/web/src/utils/dashboard/panelTimeUtils.ts
+++ b/web/src/utils/dashboard/panelTimeUtils.ts
@@ -164,7 +164,7 @@ export const hasPanelTime = (
 };
 
 /**
- * Check if panel should use its own time (v4.0 simplified)
+ * Check if panel should use its own time.
  * Panel has its own time when panel_time_range is explicitly set (not null/undefined)
  */
 export const shouldUsePanelTime = (panel: any): boolean => {
diff --git a/web/src/utils/dashboard/promql/convertPromQLGaugeChart.spec.ts b/web/src/utils/dashboard/promql/convertPromQLGaugeChart.spec.ts
index dfb4539d9e..a81d8f46fc 100644
--- a/web/src/utils/dashboard/promql/convertPromQLGaugeChart.spec.ts
+++ b/web/src/utils/dashboard/promql/convertPromQLGaugeChart.spec.ts
@@ -16,6 +16,7 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { GaugeConverter } from "./convertPromQLGaugeChart";
 import type { ProcessedPromQLData } from "./shared/types";
+import { chartColor } from "@/utils/chartTheme";
 
 // Mock dependencies
 vi.mock("./shared/dataProcessor", () => ({
@@ -444,7 +445,9 @@ describe("GaugeConverter", () => {
         mockExtras,
       );
 
-      expect(result.tooltip.textStyle.color).toBe("#fff");
+      expect(result.tooltip.textStyle.color).toBe(
+        chartColor("--color-tooltip-text"),
+      );
     });
 
     it("should configure tooltip for light theme", () => {
@@ -477,7 +480,9 @@ describe("GaugeConverter", () => {
         mockExtras,
       );
 
-      expect(result.tooltip.textStyle.color).toBe("#000");
+      expect(result.tooltip.textStyle.color).toBe(
+        chartColor("--color-tooltip-text"),
+      );
     });
 
     it("should format tooltip value", () => {
diff --git a/web/src/utils/dashboard/promql/convertPromQLGaugeChart.ts b/web/src/utils/dashboard/promql/convertPromQLGaugeChart.ts
index cd968fe01a..384535ca3f 100644
--- a/web/src/utils/dashboard/promql/convertPromQLGaugeChart.ts
+++ b/web/src/utils/dashboard/promql/convertPromQLGaugeChart.ts
@@ -21,6 +21,7 @@ import {
 import { applyAggregation } from "./shared/dataProcessor";
 import { getUnitValue, formatUnitValue } from "../convertDataIntoUnitValue";
 import { getSeriesColor } from "../colorPalette";
+import { chartColor } from "@/utils/chartTheme";
 
 /**
  * Converter for gauge charts
@@ -141,7 +142,7 @@ export class GaugeConverter implements PromQLChartConverter {
         show: true,
         trigger: "item",
         textStyle: {
-          color: store.state.theme === "dark" ? "#fff" : "#000",
+          color: chartColor("--color-tooltip-text"),
           fontSize: 12,
         },
         extraCssText: TOOLTIP_SCROLL_STYLE,
diff --git a/web/src/utils/dashboard/promql/convertPromQLHeatmapChart.spec.ts b/web/src/utils/dashboard/promql/convertPromQLHeatmapChart.spec.ts
index 0a59f8b40f..66e1951af8 100644
--- a/web/src/utils/dashboard/promql/convertPromQLHeatmapChart.spec.ts
+++ b/web/src/utils/dashboard/promql/convertPromQLHeatmapChart.spec.ts
@@ -20,6 +20,7 @@ import {
 } from "./convertPromQLHeatmapChart";
 import type { ProcessedPromQLData } from "./shared/types";
 import { SPECTRAL_HEATMAP_STOP_COUNT } from "./shared/spectral";
+import { chartColor } from "@/utils/chartTheme";
 
 // Mock dependencies
 vi.mock("../convertDataIntoUnitValue", () => ({
@@ -601,8 +602,12 @@ describe("HeatmapConverter", () => {
         mockExtras,
       );
 
-      expect(result.tooltip.textStyle.color).toBe("#000");
-      expect(result.tooltip.backgroundColor).toBe("rgba(255,255,255,1)");
+      expect(result.tooltip.textStyle.color).toBe(
+        chartColor("--color-tooltip-text"),
+      );
+      expect(result.tooltip.backgroundColor).toBe(
+        chartColor("--color-tooltip-bg"),
+      );
     });
 
     it("should configure tooltip for dark theme", () => {
@@ -636,8 +641,12 @@ describe("HeatmapConverter", () => {
         mockExtras,
       );
 
-      expect(result.tooltip.textStyle.color).toBe("#fff");
-      expect(result.tooltip.backgroundColor).toBe("rgba(0,0,0,1)");
+      expect(result.tooltip.textStyle.color).toBe(
+        chartColor("--color-tooltip-text"),
+      );
+      expect(result.tooltip.backgroundColor).toBe(
+        chartColor("--color-tooltip-bg"),
+      );
     });
 
     describe("label formatter", () => {
diff --git a/web/src/utils/dashboard/promql/convertPromQLHeatmapChart.ts b/web/src/utils/dashboard/promql/convertPromQLHeatmapChart.ts
index 10e781e6e0..8be8727bab 100644
--- a/web/src/utils/dashboard/promql/convertPromQLHeatmapChart.ts
+++ b/web/src/utils/dashboard/promql/convertPromQLHeatmapChart.ts
@@ -19,6 +19,7 @@ import {
   TOOLTIP_SCROLL_STYLE,
 } from "./shared/types";
 import { getUnitValue, formatUnitValue } from "../convertDataIntoUnitValue";
+import { chartColor } from "@/utils/chartTheme";
 import {
   deaccumulateHistogramSeries,
   HistogramSeriesInput,
@@ -40,20 +41,10 @@ export const PROMETHEUS_HISTOGRAM_MODE = "prometheus_histogram";
 /**
  * The X axis for a heatmap: every timestamp any query reported, ascending.
  *
- * Not `processedData[0].timestamps`. The cells come from ALL queries, so taking
- * the axis from the first one alone had two failure modes, and neither announced
- * itself:
- *
- *   - If the FIRST query returned no data, its `timestamps` is empty, so the axis
- *     was empty and the panel rendered blank — even when the other queries had
- *     plenty to show. Any panel whose first query is typo'd, or whose first metric
- *     is simply idle over the chosen range, looked like a total outage.
- *   - If two queries landed on different grids, query 1's samples were looked up
- *     against query 0's timestamps (`bucket.data[ts]`), missed, and read as 0.
- *
- * A union is the honest axis: it is exactly the first query's timestamps in the
- * ordinary single-query / shared-grid case, and it degrades to the truth rather
- * than to blankness otherwise.
+ * A union rather than `processedData[0].timestamps`: if the first query returned
+ * no data the axis would be empty (blank panel), and if two queries land on
+ * different grids, later samples get looked up against query 0's timestamps and
+ * read as 0. The union degrades to the truth instead of to blankness.
  */
 function buildTimeAxis(
   processedData: ProcessedPromQLData[],
@@ -214,18 +205,13 @@ export class HeatmapConverter implements PromQLChartConverter {
         extras.legends.push(seriesData.name);
 
         // The row is the series' position on the Y AXIS — which spans every
-        // query — not its position within its own query. Using the per-query
-        // index put query 2's series back on rows 0..n, on top of query 1's,
-        // and left the categories they should have occupied permanently blank.
-        // A two-query heatmap silently charted the wrong series against the
-        // wrong labels.
+        // query — not its position within its own query (per-query indices
+        // overlap when there are multiple queries).
         const rowIndex = seriesNames.length - 1;
 
         queryData.timestamps.forEach(([ts]) => {
-          // The column is this timestamp's slot on the SHARED axis. The
-          // per-query loop index only agreed with it while every query reported
-          // the identical grid; when one query started late or stepped
-          // differently, its samples were drawn in another query's columns.
+          // The column is this timestamp's slot on the SHARED axis, not the
+          // per-query loop index (which diverges when queries use different grids).
           const timeIndex = columnOfTs.get(String(ts));
           if (timeIndex === undefined) return;
 
@@ -308,14 +294,11 @@ export class HeatmapConverter implements PromQLChartConverter {
       tooltip: {
         position: "top",
         textStyle: {
-          color: store.state.theme === "dark" ? "#fff" : "#000",
+          color: chartColor("--color-tooltip-text"),
           fontSize: 12,
         },
         enterable: true,
-        backgroundColor:
-          store.state.theme === "dark"
-            ? "rgba(0,0,0,1)"
-            : "rgba(255,255,255,1)",
+        backgroundColor: chartColor("--color-tooltip-bg"),
         extraCssText: TOOLTIP_SCROLL_STYLE,
         formatter: (params: any) => {
           try {
@@ -359,15 +342,10 @@ export class HeatmapConverter implements PromQLChartConverter {
     store: any,
     extras: any,
   ) {
-    // De-accumulate PER QUERY, then concatenate.
-    //
-    // Flattening every query's series into one list first was wrong: the bucket
-    // set is keyed on `le`, and `deaccumulateHistogramSeries` sorts by `le` and
-    // de-duplicates. Two histograms in one panel therefore had their buckets
-    // interleaved — a second histogram's `le="0.5"` was either discarded as a
-    // duplicate of the first's, or subtracted from it as though it were the next
-    // bucket up. Each query is its own cumulative histogram and must be
-    // de-accumulated on its own.
+    // De-accumulate PER QUERY, then concatenate. deaccumulateHistogramSeries
+    // sorts and de-duplicates by `le`, so flattening all queries first would
+    // interleave two histograms' buckets. Each query is its own cumulative
+    // histogram.
     const buckets = processedData.flatMap((queryData) => {
       const inputs: HistogramSeriesInput[] = (queryData.series ?? []).map(
         (seriesData) => ({
@@ -386,12 +364,9 @@ export class HeatmapConverter implements PromQLChartConverter {
     const bucketLabels: string[] = buckets.map((bucket) => {
       const base = formatBucketLabel(bucket.le, bucket.leValue, config);
 
-      // ECharts category axes need UNIQUE names, and there are two ways to collide:
-      // formatting can round two different bounds onto the same label, and — since
-      // each query is now de-accumulated separately — two histograms in one panel
-      // can carry the identical `le`. The old single-step fallback appended the raw
-      // `le`, which does not disambiguate the second case at all (both are "0.5")
-      // and still collides for a third series. Keep widening until it is unique.
+      // ECharts category axes need UNIQUE names, but two bounds can round to the
+      // same label and two histograms can carry the identical `le`. Keep widening
+      // until it is unique.
       let label = base;
       if (usedLabels.has(label)) label = `${base} (${bucket.le})`;
       for (let n = 2; usedLabels.has(label); n++) {
@@ -422,10 +397,8 @@ export class HeatmapConverter implements PromQLChartConverter {
       });
     });
 
-    // De-accumulated bucket counts are clamped at zero, so this resolves to the
-    // same [0, max] it always did. It goes through the shared helper anyway, so
-    // that the empty-data case (no cells at all) is handled in one place rather
-    // than by a `maxValue` that silently starts life as a legitimate value.
+    // De-accumulated counts are clamped at zero, so this resolves to [0, max];
+    // routed through the shared helper so the empty-data case is handled in one place.
     const visualMapRange = visualMapRangeOf(minValue, maxValue);
 
     const xAxisData = buildXAxisData(timestamps);
@@ -479,14 +452,11 @@ export class HeatmapConverter implements PromQLChartConverter {
       tooltip: {
         position: "top",
         textStyle: {
-          color: store.state.theme === "dark" ? "#fff" : "#000",
+          color: chartColor("--color-tooltip-text"),
           fontSize: 12,
         },
         enterable: true,
-        backgroundColor:
-          store.state.theme === "dark"
-            ? "rgba(0,0,0,1)"
-            : "rgba(255,255,255,1)",
+        backgroundColor: chartColor("--color-tooltip-bg"),
         extraCssText: TOOLTIP_SCROLL_STYLE,
         formatter: (params: any) => {
           try {
diff --git a/web/src/utils/dashboard/promql/convertPromQLTableChart.ts b/web/src/utils/dashboard/promql/convertPromQLTableChart.ts
index 610f7aa89d..b824c61605 100644
--- a/web/src/utils/dashboard/promql/convertPromQLTableChart.ts
+++ b/web/src/utils/dashboard/promql/convertPromQLTableChart.ts
@@ -49,7 +49,7 @@ export class TableConverter implements PromQLChartConverter {
     const rows = this.buildRows(processedData, panelSchema, store);
 
     // Return the same structure as SQL tables (convertTableData)
-    // TableRenderer component (q-table) handles pagination, sorting, filtering automatically
+    // TableRenderer component (table) handles pagination, sorting, filtering automatically
     const result = {
       rows,
       columns,
@@ -237,8 +237,6 @@ export class TableConverter implements PromQLChartConverter {
       columns.push(makeValueColumn(columnName, columnLabel));
     });
 
-    // Timestamp column removed as per user request
-
     return columns;
   }
 
diff --git a/web/src/utils/dashboard/promql/shared/axisBuilder.ts b/web/src/utils/dashboard/promql/shared/axisBuilder.ts
index bf0cb09631..0c2f8f2d97 100644
--- a/web/src/utils/dashboard/promql/shared/axisBuilder.ts
+++ b/web/src/utils/dashboard/promql/shared/axisBuilder.ts
@@ -15,6 +15,7 @@
 
 import { formatUnitValue, getUnitValue } from "../../convertDataIntoUnitValue";
 import { getGridLineStyle } from "../../colorPalette";
+import { chartColor } from "@/utils/chartTheme";
 import { TOOLTIP_SCROLL_STYLE } from "./types";
 
 /**
@@ -34,7 +35,6 @@ export function buildTooltip(
   const decimals = config.decimals ?? 2;
   const unit = config.unit;
   const unitCustom = config.unit_custom;
-  const isDark = store?.state?.theme === "dark";
 
   return {
     trigger: triggerType,
@@ -43,12 +43,12 @@ export function buildTooltip(
     appendToBody: true,
     className: "o2-echarts-tooltip",
     textStyle: {
-      color: isDark ? "#fff" : "#000",
+      color: chartColor("--color-tooltip-text"),
       fontSize: 12,
     },
     enterable: true,
-    backgroundColor: isDark ? "rgba(22,23,25,0.97)" : "rgba(255,255,255,0.97)",
-    borderColor: isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.08)",
+    backgroundColor: chartColor("--color-tooltip-bg"),
+    borderColor: chartColor("--color-tooltip-border"),
     borderWidth: 1,
     padding: [8, 12],
     extraCssText: TOOLTIP_SCROLL_STYLE,
diff --git a/web/src/utils/dashboard/promql/shared/spectral.ts b/web/src/utils/dashboard/promql/shared/spectral.ts
index 411a2b38a7..df58129edf 100644
--- a/web/src/utils/dashboard/promql/shared/spectral.ts
+++ b/web/src/utils/dashboard/promql/shared/spectral.ts
@@ -29,11 +29,10 @@
  * d3-scale-chromatic so this module stays dependency-free.
  *
  * Position 0 is the "low" end, position 1 is the "high" end. ColorBrewer
- * publishes Spectral warm-first (dark red -> purple); a heatmap needs the
- * opposite, because the eye reads hot as "more". Listing it red-first made an
- * almost-empty bucket the loudest thing on the chart: a histogram's high-`le`
- * rows, which hold near-zero counts, came out as a solid dark-red slab while
- * the busy low buckets sank into blue.
+ * publishes Spectral warm-first (dark red -> purple); this ramp is listed
+ * cool-first because a heatmap reads hot as "more" — otherwise a histogram's
+ * near-empty high-`le` rows would dominate as a dark-red slab while the busy
+ * low buckets sink into blue.
  */
 export const SPECTRAL_STOPS: string[] = [
   "#5e4fa2",
diff --git a/web/src/utils/dashboard/promqlSeed.ts b/web/src/utils/dashboard/promqlSeed.ts
index 35e5edd589..a85c7728ad 100644
--- a/web/src/utils/dashboard/promqlSeed.ts
+++ b/web/src/utils/dashboard/promqlSeed.ts
@@ -76,9 +76,7 @@ export function promqlSeedFor(
     // We may set the chart type only when the panel has not been shaped by the
     // user: either it is still on the new-panel default, or the query AND the
     // type still agree with what we would produce at that type — meaning we
-    // authored both. Asking the panel beats remembering what we did to it: the
-    // previous memo was keyed on an object `useDashboardPanel` reuses across
-    // every panel, so it leaked between them.
+    // authored both.
     allowChartTypeChange:
       isUntouchedPanelType(type) ||
       seedOwnsChartType(slot?.query, previousMetric, streams, {
@@ -169,16 +167,14 @@ export function applyPromqlSeed(
  * Write the PANEL-level part of a seed: the chart type, the unit, and the
  * chart-type contracts.
  *
- * Only from the FIRST query slot. `data.type` and `data.config` describe the
- * whole panel, not one query, but the metrics page seeds every empty slot in a
- * loop — so a second slot on a different metric was overwriting the panel shape
- * the first had established (a counter slot flipping a histogram panel to
- * `line`).
+ * Only from the FIRST query slot: `data.type` and `data.config` describe the
+ * whole panel, not one query, and the metrics page seeds every empty slot in a
+ * loop — a later slot on a different metric must not overwrite the panel shape
+ * the first established.
  *
- * And when we do change the type, the contracts belonging to the type we are
- * LEAVING are retracted. Merging alone only ever added keys, so a panel that
- * went heatmap -> line kept `heatmap_mode: prometheus_histogram` and
- * `bucket_unit` in its config forever.
+ * When the type changes, the contracts belonging to the type being LEFT are
+ * retracted (merging alone only adds keys, so a heatmap -> line panel would
+ * otherwise keep `heatmap_mode` / `bucket_unit` forever).
  */
 export function applySeedPanelShape(
   dashboardPanelData: any,
diff --git a/web/src/utils/dashboard/sql/charts/convertSQLGaugeChart.ts b/web/src/utils/dashboard/sql/charts/convertSQLGaugeChart.ts
index d51254d186..eef310c619 100644
--- a/web/src/utils/dashboard/sql/charts/convertSQLGaugeChart.ts
+++ b/web/src/utils/dashboard/sql/charts/convertSQLGaugeChart.ts
@@ -16,12 +16,13 @@
 import { formatUnitValue, getUnitValue } from "../../convertDataIntoUnitValue";
 import { calculateGridPositions } from "../../calculateGridForSubPlot";
 import { getSeriesColor } from "../../colorPalette";
+import { chartColor } from "@/utils/chartTheme";
 import { type SQLContext } from "../shared/types";
 
 /**
  * Applies chart-specific options for: gauge
  *
- * Mutates `ctx.options` in place, exactly as the original switch case did.
+ * Mutates `ctx.options` in place.
  */
 export function applyGaugeChart(ctx: SQLContext): void {
   const {
@@ -54,7 +55,7 @@ export function applyGaugeChart(ctx: SQLContext): void {
     show: true,
     trigger: "item",
     textStyle: {
-      color: store.state.theme === "dark" ? "#fff" : "#000",
+      color: chartColor("--color-tooltip-text"),
       fontSize: 12,
     },
     valueFormatter: (value: any) => {
@@ -73,8 +74,7 @@ export function applyGaugeChart(ctx: SQLContext): void {
       }
     },
     enterable: true,
-    backgroundColor:
-      store.state.theme === "dark" ? "rgba(0,0,0,1)" : "rgba(255,255,255,1)",
+    backgroundColor: chartColor("--color-tooltip-bg"),
     extraCssText:
       "max-height: 200px; overflow: auto; max-width: 500px; user-select: text; scrollbar-width: thin; scrollbar-color: rgba(128,128,128,0.5) transparent;",
   };
diff --git a/web/src/utils/dashboard/sql/charts/convertSQLHBarChart.ts b/web/src/utils/dashboard/sql/charts/convertSQLHBarChart.ts
index 79eb4a8d26..82c10d9904 100644
--- a/web/src/utils/dashboard/sql/charts/convertSQLHBarChart.ts
+++ b/web/src/utils/dashboard/sql/charts/convertSQLHBarChart.ts
@@ -20,7 +20,7 @@ import { type SQLContext } from "../shared/types";
 /**
  * Applies chart-specific options for: h-bar
  *
- * Mutates `ctx.options` in place, exactly as the original switch case did.
+ * Mutates `ctx.options` in place.
  */
 export function applyHBarChart(ctx: SQLContext): void {
   const {
diff --git a/web/src/utils/dashboard/sql/charts/convertSQLHStackedChart.ts b/web/src/utils/dashboard/sql/charts/convertSQLHStackedChart.ts
index b82299a04a..f0eb56e2f0 100644
--- a/web/src/utils/dashboard/sql/charts/convertSQLHStackedChart.ts
+++ b/web/src/utils/dashboard/sql/charts/convertSQLHStackedChart.ts
@@ -20,7 +20,7 @@ import { type SQLContext } from "../shared/types";
 /**
  * Applies chart-specific options for: h-stacked
  *
- * Mutates `ctx.options` in place, exactly as the original switch case did.
+ * Mutates `ctx.options` in place.
  */
 export function applyHStackedChart(ctx: SQLContext): void {
   const {
diff --git a/web/src/utils/dashboard/sql/charts/convertSQLHeatmapChart.ts b/web/src/utils/dashboard/sql/charts/convertSQLHeatmapChart.ts
index 116e7d6545..6b7a5119c3 100644
--- a/web/src/utils/dashboard/sql/charts/convertSQLHeatmapChart.ts
+++ b/web/src/utils/dashboard/sql/charts/convertSQLHeatmapChart.ts
@@ -17,6 +17,7 @@ import { toZonedTime } from "date-fns-tz";
 import { formatUnitValue, getUnitValue } from "../../convertDataIntoUnitValue";
 import { formatDate, isTimeSeries } from "../../dateTimeUtils";
 import { getDataValue } from "../../aliasUtils";
+import { chartColor } from "@/utils/chartTheme";
 import { type SQLContext } from "../shared/types";
 import {
   HEATMAP_SPLIT_AREA,
@@ -29,7 +30,7 @@ import {
 /**
  * Applies chart-specific options for: heatmap
  *
- * Mutates `ctx.options` in place, exactly as the original switch case did.
+ * Mutates `ctx.options` in place.
  */
 export function applyHeatmapChart(ctx: SQLContext): void {
   const {
@@ -67,7 +68,7 @@ export function applyHeatmapChart(ctx: SQLContext): void {
     const xAxisValue = getDataValue(row, key0);
     const compositeKey = `${yAxisValue}||${xAxisValue}`;
 
-    // Only set if NOT already present (keeps FIRST occurrence, matching original nested .find() behavior)
+    // Only set if NOT already present (keeps FIRST occurrence)
     if (!heatmapLookupMap.has(compositeKey)) {
       heatmapLookupMap.set(compositeKey, row);
     }
@@ -149,11 +150,10 @@ export function applyHeatmapChart(ctx: SQLContext): void {
   ((options.tooltip = {
     position: "top",
     textStyle: {
-      color: store.state.theme === "dark" ? "#fff" : "#000",
+      color: chartColor("--color-tooltip-text"),
       fontSize: 12,
     },
-    backgroundColor:
-      store.state.theme === "dark" ? "rgba(0,0,0,1)" : "rgba(255,255,255,1)",
+    backgroundColor: chartColor("--color-tooltip-bg"),
     formatter: (params: any) => {
       try {
         // show tooltip for hovered panel only for other we only need axis so just return empty string
diff --git a/web/src/utils/dashboard/sql/charts/convertSQLMetricChart.ts b/web/src/utils/dashboard/sql/charts/convertSQLMetricChart.ts
index e260d43108..354b23e6bc 100644
--- a/web/src/utils/dashboard/sql/charts/convertSQLMetricChart.ts
+++ b/web/src/utils/dashboard/sql/charts/convertSQLMetricChart.ts
@@ -59,7 +59,7 @@ export const calculateMetricFontSize = (
 /**
  * Applies chart-specific options for: metric
  *
- * Mutates `ctx.options` in place, exactly as the original switch case did.
+ * Mutates `ctx.options` in place.
  */
 export function applyMetricChart(ctx: SQLContext): void {
   const {
diff --git a/web/src/utils/dashboard/sql/charts/convertSQLPieDonutChart.ts b/web/src/utils/dashboard/sql/charts/convertSQLPieDonutChart.ts
index 7af9f76c19..c27dbfa185 100644
--- a/web/src/utils/dashboard/sql/charts/convertSQLPieDonutChart.ts
+++ b/web/src/utils/dashboard/sql/charts/convertSQLPieDonutChart.ts
@@ -15,6 +15,7 @@
 
 import { formatUnitValue, getUnitValue } from "../../convertDataIntoUnitValue";
 import { getSeriesColor } from "../../colorPalette";
+import { chartColor } from "@/utils/chartTheme";
 import {
   getChartDimensions,
   applyPieDonutChartAlignment,
@@ -26,7 +27,7 @@ import { type SQLContext } from "../shared/types";
 /**
  * Applies chart-specific options for: pie AND donut
  *
- * Mutates `ctx.options` in place, exactly as the original switch cases did.
+ * Mutates `ctx.options` in place.
  */
 export function applyPieDonutChart(ctx: SQLContext): void {
   const {
@@ -55,11 +56,10 @@ export function applyPieDonutChart(ctx: SQLContext): void {
     options.tooltip = {
       trigger: "item",
       textStyle: {
-        color: store.state.theme === "dark" ? "#fff" : "#000",
+        color: chartColor("--color-tooltip-text"),
         fontSize: 12,
       },
-      backgroundColor:
-        store.state.theme === "dark" ? "rgba(0,0,0,1)" : "rgba(255,255,255,1)",
+      backgroundColor: chartColor("--color-tooltip-bg"),
       formatter: function (name: any) {
         try {
           // show tooltip for hovered panel only for other we only need axis so just return empty string
@@ -206,11 +206,10 @@ export function applyPieDonutChart(ctx: SQLContext): void {
     options.tooltip = {
       trigger: "item",
       textStyle: {
-        color: store.state.theme === "dark" ? "#fff" : "#000",
+        color: chartColor("--color-tooltip-text"),
         fontSize: 12,
       },
-      backgroundColor:
-        store.state.theme === "dark" ? "rgba(0,0,0,1)" : "rgba(255,255,255,1)",
+      backgroundColor: chartColor("--color-tooltip-bg"),
       formatter: function (name: any) {
         try {
           // show tooltip for hovered panel only for other we only need axis so just return empty string
diff --git a/web/src/utils/dashboard/sql/charts/convertSQLStackedChart.ts b/web/src/utils/dashboard/sql/charts/convertSQLStackedChart.ts
index 7ceea4b9fb..76378ca617 100644
--- a/web/src/utils/dashboard/sql/charts/convertSQLStackedChart.ts
+++ b/web/src/utils/dashboard/sql/charts/convertSQLStackedChart.ts
@@ -20,7 +20,7 @@ import { type SQLContext } from "../shared/types";
 /**
  * Applies chart-specific options for: stacked
  *
- * Mutates `ctx.options` in place, exactly as the original switch case did.
+ * Mutates `ctx.options` in place.
  */
 export function applyStackedChart(ctx: SQLContext): void {
   const {
diff --git a/web/src/utils/dashboard/sql/shared/contextBuilder.ts b/web/src/utils/dashboard/sql/shared/contextBuilder.ts
index f681fa1b34..568c58952f 100644
--- a/web/src/utils/dashboard/sql/shared/contextBuilder.ts
+++ b/web/src/utils/dashboard/sql/shared/contextBuilder.ts
@@ -32,6 +32,7 @@ import {
   calculateChartDimensions,
   calculatePieChartRadius,
 } from "../../legendConfiguration";
+import { chartColor } from "@/utils/chartTheme";
 import { getPropsByChartTypeForSeries } from "../../sqlChartSeriesProps";
 import { processData } from "../../sqlProcessData";
 import { fillMissingValues } from "../../sqlMissingValueFiller";
@@ -53,11 +54,9 @@ export const largestLabel = (data: any) => {
 };
 
 /**
- * Builds the complete SQLContext for a given set of raw inputs.
- *
- * This function replicates all the work that `convertSQLData` used to do
- * *before* the chart-type switch statement ΓÇö axis-key extraction, data
- * processing, base-options construction, and helper-function creation.
+ * Builds the complete SQLContext for a given set of raw inputs — axis-key
+ * extraction, data processing, base-options construction, and helper-function
+ * creation.
  *
  * @returns The fully populated SQLContext, or `null` if the input is invalid.
  */
@@ -480,14 +479,12 @@ export function buildSQLContext(
       appendToBody: true,
       className: "o2-echarts-tooltip",
       textStyle: {
-        color: store.state.theme === "dark" ? "#fff" : "#000",
+        color: chartColor("--color-tooltip-text"),
         fontSize: 12,
       },
       enterable: true,
-      backgroundColor:
-        store.state.theme === "dark" ? "rgba(22,23,25,0.97)" : "rgba(255,255,255,0.97)",
-      borderColor:
-        store.state.theme === "dark" ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.08)",
+      backgroundColor: chartColor("--color-tooltip-bg"),
+      borderColor: chartColor("--color-tooltip-border"),
       borderWidth: 1,
       padding: [8, 12],
       extraCssText:
diff --git a/web/src/utils/dashboard/sql/shared/seriesBuilder.ts b/web/src/utils/dashboard/sql/shared/seriesBuilder.ts
index ef86c5053c..400c09d016 100644
--- a/web/src/utils/dashboard/sql/shared/seriesBuilder.ts
+++ b/web/src/utils/dashboard/sql/shared/seriesBuilder.ts
@@ -62,7 +62,7 @@ export function buildDataLookupMap(
     const xValue = getDataValue(item, xAxisKey);
     const key = `${breakdownValue}||${xValue}`;
 
-    // Only set if NOT already present (keeps FIRST occurrence, matching original .find() behavior)
+    // Only set if NOT already present (keeps FIRST occurrence)
     if (!dataMap.has(key)) {
       dataMap.set(key, item);
     }
@@ -73,8 +73,7 @@ export function buildDataLookupMap(
 
 /**
  * Creates all series-building helper functions.
- * All functions close over `deps` so they behave identically to the original
- * closures defined inside `convertSQLData`.
+ * All functions close over `deps`.
  */
 export function createSeriesBuilders(deps: SeriesDeps) {
   const {
diff --git a/web/src/utils/dashboard/sql/shared/trellisConfig.ts b/web/src/utils/dashboard/sql/shared/trellisConfig.ts
index af7261093f..b4dde36a79 100644
--- a/web/src/utils/dashboard/sql/shared/trellisConfig.ts
+++ b/web/src/utils/dashboard/sql/shared/trellisConfig.ts
@@ -39,8 +39,7 @@ export interface TrellisDeps {
 
 /**
  * Creates the four trellis-layout helper functions.
- * All functions close over `deps` so they behave identically to the original
- * closures defined inside `convertSQLData`.
+ * All functions close over `deps`.
  */
 export function createTrellisHelpers(deps: TrellisDeps) {
   const {
diff --git a/web/src/utils/dashboard/sqlProcessData.ts b/web/src/utils/dashboard/sqlProcessData.ts
index 7910545944..363ba13834 100644
--- a/web/src/utils/dashboard/sqlProcessData.ts
+++ b/web/src/utils/dashboard/sqlProcessData.ts
@@ -21,40 +21,9 @@ import { getDataValue } from "./aliasUtils";
  *
  * This function takes in the raw data returned from the SQL query and the
  * panel schema, and returns a processed data array that can be fed into the
- * echarts library.
- *
- * Here's a step-by-step breakdown of what this function does:
- *
- * 1. It checks if the data is empty or if the first item in the array is not
- * an object. If either condition is true, it returns an empty array.
- *
- * 2. It extracts the top_results and top_results_others values from the
- * panel schema config.
- *
- * 3. If top_results is not enabled, it simply returns the inner data array
- * without any modifications.
- *
- * 4. It extracts the breakdown key, y-axis key, and x-axis key from the
- * panel schema.
- *
- * 5. It aggregates the y-axis values by breakdown, ignoring items without a
- * breakdown key. This is done using the reduce() method.
- *
- * 6. It sorts the breakdown object by value in descending order and extracts
- * the top keys based on the configured number of top results. This is done
- * using the Object.entries() and sort() methods.
- *
- * 7. It initializes an empty result array and an empty others object.
- *
- * 8. It loops through the inner data array and checks if the breakdown value
- * is in the top keys. If it is, it adds the item to the result array. If it's
- * not, and top_results_others is enabled, it adds the item to the others
- * object.
- *
- * 9. If top_results_others is enabled, it loops through the others object and
- * adds the aggregated values to the result array.
- *
- * 10. Finally, it returns the result array.
+ * echarts library. When top_results is enabled it aggregates y-axis values by
+ * breakdown, keeps the top-N breakdown keys, and optionally folds the rest into
+ * an "others" bucket.
  *
  * @param {any[]} data - The data returned from the SQL query.
  * @param {any} panelSchema - The schema of the panel.
@@ -81,8 +50,6 @@ export const processData = (
   const { top_results, top_results_others } = panelSchema.config;
 
   // get the limit series from the config
-  // if top_results is enabled then use the top_results value
-  // otherwise use the max_dashboard_series value
   let limitSeries = top_results
     ? (Math.min(
         top_results,
@@ -92,7 +59,6 @@ export const processData = (
 
   // For multi y-axis charts, divide the limit by number of y-axes
   // to keep total series count at or below max_dashboard_series
-  // This applies when there are multiple y-axes AND breakdown fields
   if (yAxisKeys.length > 1 && breakDownKeys.length > 0) {
     limitSeries = Math.floor(limitSeries / yAxisKeys.length);
   }
diff --git a/web/src/utils/dashboard/urlTimeParams.ts b/web/src/utils/dashboard/urlTimeParams.ts
index eebdf9c9fd..f8b159b81b 100644
--- a/web/src/utils/dashboard/urlTimeParams.ts
+++ b/web/src/utils/dashboard/urlTimeParams.ts
@@ -13,7 +13,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-// Shared URL <-> time-range / refresh helpers (simple date-picker shape), lifted from ViewDashboard.
+// Shared URL <-> time-range / refresh helpers (simple date-picker shape).
 // ⚠️ Not the rich-shape date.ts helpers — those expect {tab,relative,absolute} and throw on this shape.
 
 import type { LocationQuery } from "vue-router";
diff --git a/web/src/utils/date.ts b/web/src/utils/date.ts
index f5de7d2642..324261b7fa 100644
--- a/web/src/utils/date.ts
+++ b/web/src/utils/date.ts
@@ -337,20 +337,12 @@ export function subtractRelativeTime(
 // Legacy / specific helpers
 // ---------------------------------------------------------------------------
 
-/** The format every caller used before this took a parameter. */
+/** Default timestamp format. */
 export const DATE_TIMESTAMP_FORMAT = "YYYY-MM-DDTHH:mm:ssZ";
 
 /**
  * Render a microsecond timestamp as a local-time string.
  *
- * THE one implementation. It previously existed six times over — here, in
- * formatters.ts, and inline in four components — and the copies had quietly
- * drifted: three different output formats behind the same name (the ISO-ish
- * default, `DD-MM-YYYY` in schema.vue, `YYYY-MM-DD HH:mm:ss` in AlertList.vue).
- * That is worse than duplication, because a reader has every reason to assume
- * they agree. The format is a parameter now, so the callers that wanted a
- * different one say so instead of reimplementing the function to get it.
- *
  * Local time is deliberate: these render "created at" / "last triggered at"
  * columns, which a user reads in their own timezone. The tests pin TZ=UTC for
  * exactly that reason (see vitest.config.ts).
diff --git a/web/src/utils/fieldCategories.ts b/web/src/utils/fieldCategories.ts
index c4118bcf23..640895dbb5 100644
--- a/web/src/utils/fieldCategories.ts
+++ b/web/src/utils/fieldCategories.ts
@@ -355,7 +355,7 @@ export function shouldApplyFieldGrouping(opts: {
  *
  * Rules:
  * - Label (header) rows are always kept.
- * - When `filterTerm` is non-empty, bypass collapse entirely so the q-table
+ * - When `filterTerm` is non-empty, bypass collapse entirely so the table
  *   filter-method can match fields inside collapsed groups.
  * - When a field's group is not tracked in `expandGroupRows`, it is visible
  *   (flat / ungrouped list behaviour).
diff --git a/web/src/utils/fonts.ts b/web/src/utils/fonts.ts
new file mode 100644
index 0000000000..1d46cb4972
--- /dev/null
+++ b/web/src/utils/fonts.ts
@@ -0,0 +1,117 @@
+// Copyright 2026 OpenObserve Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * JS-side access to the two font tokens.
+ *
+ * CSS reaches fonts via `var(--font-sans)` / `var(--font-mono)`. Anything that
+ * paints outside the CSS cascade cannot — canvas, ECharts (canvas renderer) and
+ * Monaco all need a real font string. This module is the single bridge, so those
+ * consumers stay in sync with `tokens/base.css` instead of hardcoding a stack.
+ *
+ * Read once and cached: the tokens are static (they do not vary by light/dark
+ * theme), and `getComputedStyle` forces a style recalc we don't want on every
+ * axis label of every panel.
+ */
+
+/** Compile-time fallbacks — used only when there is no DOM (SSR, jsdom). */
+const FALLBACK_SANS =
+  "'Geist', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif";
+const FALLBACK_MONO = "'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace";
+
+let sansCache: string | undefined;
+let monoCache: string | undefined;
+
+const readToken = (name: string, fallback: string): string => {
+  if (typeof document === "undefined" || !document.documentElement) {
+    return fallback;
+  }
+  try {
+    const value = getComputedStyle(document.documentElement)
+      .getPropertyValue(name)
+      .trim();
+    return value || fallback;
+  } catch {
+    return fallback;
+  }
+};
+
+/** The app's sans family stack — mirrors `--font-sans`. */
+export const getFontSans = (): string => {
+  if (sansCache === undefined) {
+    sansCache = readToken("--font-sans", FALLBACK_SANS);
+  }
+  return sansCache;
+};
+
+/** The app's mono family stack — mirrors `--font-mono`. */
+export const getFontMono = (): string => {
+  if (monoCache === undefined) {
+    monoCache = readToken("--font-mono", FALLBACK_MONO);
+  }
+  return monoCache;
+};
+
+/**
+ * Build a canvas `ctx.font` shorthand using a token stack.
+ *
+ * Canvas text measurement must use the same family the text will actually be
+ * painted in, otherwise computed column widths are wrong and cells truncate or
+ * overflow unpredictably.
+ *
+ * @param size  CSS size incl. unit, e.g. "12px"
+ * @param family "sans" | "mono"
+ * @param weight optional prefix, e.g. "bold"
+ */
+export const canvasFont = (
+  size: string,
+  family: "sans" | "mono" = "sans",
+  weight?: string,
+): string => {
+  const stack = family === "mono" ? getFontMono() : getFontSans();
+  return `${weight ? `${weight} ` : ""}${size} ${stack}`;
+};
+
+/**
+ * Stamp the sans token onto an ECharts option object as its default text family.
+ *
+ * ECharts renders to canvas, so it never inherits the CSS cascade — without this
+ * every axis, legend, label and tooltip falls back to ECharts' own `sans-serif`.
+ *
+ * Applied to the *options* rather than via `registerTheme` for two reasons:
+ * the renderers pass ECharts' built-in "dark"/"light" themes and a custom theme
+ * would replace (not extend) those palettes; and several `setOption` calls use
+ * `notMerge`, which discards anything applied post-init.
+ *
+ * Any `textStyle.fontFamily` already present in the options wins, so per-chart
+ * overrides keep working.
+ *
+ * Returns a NEW object — never mutates. The renderers pass `props.data.options`
+ * straight in, and writing to a reactive prop from inside the render watcher
+ * retriggers that watcher, which spins until the worker dies.
+ */
+export const withChartFont = <T extends Record<string, any>>(options: T): T => {
+  if (!options || typeof options !== "object") return options;
+  return {
+    ...options,
+    textStyle: { fontFamily: getFontSans(), ...(options.textStyle ?? {}) },
+  };
+};
+
+/** Test-only: drop the cached values so a fresh token read happens. */
+export const __resetFontCache = (): void => {
+  sansCache = undefined;
+  monoCache = undefined;
+};
diff --git a/web/src/utils/html.ts b/web/src/utils/html.ts
index 2f0094e299..56ff43df58 100644
--- a/web/src/utils/html.ts
+++ b/web/src/utils/html.ts
@@ -54,7 +54,7 @@ export function escapeHtml(str: string): string {
   const s = typeof str === "string" ? str : String(str);
   return s
     .replace(/&/g, "&amp;") // Must be first: & → &amp;
-    .replace(/</g, "&lt;") // Less than: < → &lt;
-    .replace(/>/g, "&gt;") // Greater than: > → &gt;
-    .replace(/"/g, "&quot;"); // Double quote: " → &quot;
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
 }
diff --git a/web/src/utils/logs/convertLogData.spec.ts b/web/src/utils/logs/convertLogData.spec.ts
index 53c6c80ac8..832dddbddc 100644
--- a/web/src/utils/logs/convertLogData.spec.ts
+++ b/web/src/utils/logs/convertLogData.spec.ts
@@ -34,8 +34,7 @@ describe("convertLogData.ts", () => {
     Object.defineProperty(window, "getComputedStyle", {
       value: () => ({
         getPropertyValue: (prop: string) => {
-          if (prop === "--o2-theme-color") return "#7A80C2";
-          if (prop === "--o2-dark-theme-color") return "#5A60A2";
+          if (prop === "--color-theme-accent") return "#7A80C2";
           return "";
         },
       }),
@@ -200,7 +199,7 @@ describe("convertLogData.ts", () => {
     });
 
     it("reads theme color from CSS custom property in light mode", () => {
-      document.body.classList.remove("body--dark");
+      document.documentElement.classList.remove("dark");
       const { options } = convertLogData([1], [10], {
         title: "",
         unparsed_x_data: [],
@@ -211,12 +210,12 @@ describe("convertLogData.ts", () => {
     });
 
     it("reads theme color from body CSS property in dark mode", () => {
-      document.body.classList.add("body--dark");
+      document.documentElement.classList.add("dark");
       Object.defineProperty(window, "getComputedStyle", {
         value: (el: Element) => ({
           getPropertyValue: (prop: string) => {
-            if (el === document.body && prop === "--o2-dark-theme-color") return "#5A60A2";
-            if (prop === "--o2-theme-color") return "#7A80C2";
+            if (el === document.body && prop === "--color-theme-accent") return "#5A60A2";
+            if (prop === "--color-theme-accent") return "#7A80C2";
             return "";
           },
         }),
@@ -230,7 +229,7 @@ describe("convertLogData.ts", () => {
         itemStyle: null,
       });
       expect(options.series[0].itemStyle.color).toBe("#5A60A2");
-      document.body.classList.remove("body--dark");
+      document.documentElement.classList.remove("dark");
     });
 
     it("handles empty x and y arrays", () => {
diff --git a/web/src/utils/logs/convertLogData.ts b/web/src/utils/logs/convertLogData.ts
index 07cfbb6ac1..c7fdea9b99 100644
--- a/web/src/utils/logs/convertLogData.ts
+++ b/web/src/utils/logs/convertLogData.ts
@@ -103,14 +103,14 @@ export const convertLogData = (
           ? params.itemStyle
           : {
               color: (() => {
-                const isDarkMode = document.body.classList.contains('body--dark');
+                const isDarkMode = document.documentElement.classList.contains('dark');
                 if (isDarkMode) {
                   return getComputedStyle(document.body)
-                    .getPropertyValue("--o2-dark-theme-color")
+                    .getPropertyValue("--color-theme-accent")
                     .trim();
                 } else {
                   return getComputedStyle(document.documentElement)
-                    .getPropertyValue("--o2-theme-color")
+                    .getPropertyValue("--color-theme-accent")
                     .trim();
                 }
               })(),
diff --git a/web/src/utils/logs/statusParser.ts b/web/src/utils/logs/statusParser.ts
index 392eeb18d5..d3274b10d7 100644
--- a/web/src/utils/logs/statusParser.ts
+++ b/web/src/utils/logs/statusParser.ts
@@ -113,39 +113,27 @@ export function extractStatusFromTemplate(text: string, isDark = false): StatusI
  * @returns StatusInfo with level, color, and priority
  */
 export function extractStatusFromLog(logEntry: any, isDark = false): StatusInfo {
-  // Handle null, undefined, or non-object inputs
-  //this is a fallback for when the log entry is not an object
-  //we simply return info level and info color
-  // Example: extractStatusFromLog(null) → { level: 'info', color: '#84a8f6ff', priority: 6 }
   if (!logEntry || typeof logEntry !== 'object') {
     return { level: 'info', color: isDark ? (STATUS_COLORS_DARK.info ?? STATUS_COLORS.info) : STATUS_COLORS.info, priority: 6 };
   }
 
-  // Search through predefined status fields in order of preference
-  // Example: { "status": "error", "level": "info" } → uses "error" from status field
-  //if we dont find a status field, we return info level and info color
+  // Search through predefined status fields in order of preference.
   for (const field of STATUS_FIELDS) {
     let statusValue = logEntry[field];
 
-    // Found a valid status value - parse and return it
-    // Example: logEntry["level"] = "WARNING" → parseStatusValue("WARNING")
-    // Also handles numeric strings: "200", "404", "500"
     if (statusValue !== undefined && statusValue !== null) {
-      // Skip empty or whitespace-only strings to avoid incorrect conversion to 0
-      // Example: "" → skip (would become 0/emergency), "   " → skip
+      // Skip empty/whitespace-only strings to avoid incorrect conversion to 0.
       if (typeof statusValue === 'string' && statusValue.trim() === '') {
         continue;
       }
 
-      // Convert numeric strings to numbers before parsing
-      // Example: "0" → 0, "1" → 1, "error" → "error"
+      // Convert numeric strings to numbers before parsing.
       statusValue = isNaN(Number(statusValue)) ? statusValue : Number(statusValue);
       return applyDarkColor(parseStatusValue(statusValue), isDark);
     }
   }
 
-  // No status field found - default to info level
-  // Example: { "message": "Hello world" } → { level: 'info', color: '#84a8f6ff', priority: 6 }
+  // No status field found - default to info level.
   return applyDarkColor({ level: 'info', color: STATUS_COLORS.info, priority: 6 }, isDark);
 }
 
@@ -163,20 +151,17 @@ function applyDarkColor(info: StatusInfo, isDark: boolean): StatusInfo {
  * @returns StatusInfo object
  */
 function parseStatusValue(value: any): StatusInfo {
-  // Handle numeric syslog severity levels (0-7)
-  // Example: parseStatusValue(3) → { level: 'error', color: '#dc2626', priority: 3 }
+  // Numeric syslog severity levels (0-7).
   if (typeof value === 'number') {
     return mapNumericStatus(value);
   }
 
-  // Handle string status levels (case-insensitive)
-  // Example: parseStatusValue("ERROR") → { level: 'error', color: '#dc2626', priority: 3 }
+  // String status levels (case-insensitive).
   if (typeof value === 'string') {
     return mapStringStatus(value);
   }
 
-  // Handle unexpected data types (boolean, object, etc.)
-  // Example: parseStatusValue(true) → { level: 'info', color: '#84a8f6ff', priority: 6 }
+  // Unexpected data types (boolean, object, etc.) default to info.
   return { level: 'info', color: STATUS_COLORS.info, priority: 6 };
 }
 
@@ -191,48 +176,39 @@ function parseStatusValue(value: any): StatusInfo {
  */
 function mapNumericStatus(value: number): StatusInfo {
   switch (value) {
-    // OTEL UNSPECIFIED level (0) - treat as info
-    // Example: mapNumericStatus(0) → { level: 'info', color: '#84a8f6ff', priority: 6 }
+    // OTEL UNSPECIFIED (0) - treat as info
     case 0:
       return { level: 'info', color: STATUS_COLORS.info, priority: 6 };
-    
+
     // Action must be taken immediately
-    // Example: mapNumericStatus(1) → { level: 'alert', color: '#ea580c', priority: 1 }
     case 1:
       return { level: 'alert', color: STATUS_COLORS.alert, priority: 1 };
-    
+
     // Critical conditions
-    // Example: mapNumericStatus(2) → { level: 'critical', color: '#d97706', priority: 2 }
     case 2:
       return { level: 'critical', color: STATUS_COLORS.critical, priority: 2 };
-    
+
     // Error conditions
-    // Example: mapNumericStatus(3) → { level: 'error', color: '#dc2626', priority: 3 }
     case 3:
       return { level: 'error', color: STATUS_COLORS.error, priority: 3 };
-    
+
     // Warning conditions
-    // Example: mapNumericStatus(4) → { level: 'warning', color: '#eab308', priority: 4 }
     case 4:
       return { level: 'warning', color: STATUS_COLORS.warning, priority: 4 };
-    
+
     // Normal but significant condition
-    // Example: mapNumericStatus(5) → { level: 'notice', color: '#16a34a', priority: 5 }
     case 5:
       return { level: 'notice', color: STATUS_COLORS.notice, priority: 5 };
-    
+
     // Informational messages
-    // Example: mapNumericStatus(6) → { level: 'info', color: '#84a8f6ff', priority: 6 }
     case 6:
       return { level: 'info', color: STATUS_COLORS.info, priority: 6 };
-    
+
     // Debug-level messages
-    // Example: mapNumericStatus(7) → { level: 'debug', color: '#6b7280', priority: 7 }
     case 7:
       return { level: 'debug', color: STATUS_COLORS.debug, priority: 7 };
-    
-    // Handle unexpected numeric values (negative, >7, etc.)
-    // Example: mapNumericStatus(99) → { level: 'info', color: '#84a8f6ff', priority: 6 }
+
+    // Unexpected numeric values (negative, >7, etc.)
     default:
       return { level: 'info', color: STATUS_COLORS.info, priority: 6 };
   }
@@ -248,61 +224,51 @@ function mapNumericStatus(value: number): StatusInfo {
 function mapStringStatus(value: string): StatusInfo {
   const lowerValue = value.toLowerCase().trim();
 
-  // Emergency/Fatal levels - system unusable
-  // Examples: "emergency", "emerg", "fatal" → emergency
+  // Emergency/Fatal - system unusable
   if (lowerValue === 'emergency' || lowerValue === 'emerg' || lowerValue === 'fatal') {
     return { level: 'emergency', color: STATUS_COLORS.emergency, priority: 0 };
   }
 
-  // Alert levels - immediate action required
-  // Examples: "alert" → alert
+  // Alert - immediate action required
   if (lowerValue === 'alert') {
     return { level: 'alert', color: STATUS_COLORS.alert, priority: 1 };
   }
 
-  // Critical levels - critical conditions
-  // Examples: "critical", "crit" → critical
+  // Critical conditions
   if (lowerValue === 'critical' || lowerValue === 'crit') {
     return { level: 'critical', color: STATUS_COLORS.critical, priority: 2 };
   }
 
-  // Error levels - error conditions
-  // Examples: "error", "err" → error
+  // Error conditions
   if (lowerValue === 'error' || lowerValue === 'err') {
     return { level: 'error', color: STATUS_COLORS.error, priority: 3 };
   }
 
-  // Warning levels - warning conditions
-  // Examples: "warning", "warn" → warning
+  // Warning conditions
   if (lowerValue === 'warning' || lowerValue === 'warn') {
     return { level: 'warning', color: STATUS_COLORS.warning, priority: 4 };
   }
 
-  // Notice levels - significant but normal condition
-  // Examples: "notice" → notice
+  // Notice - significant but normal condition
   if (lowerValue === 'notice') {
     return { level: 'notice', color: STATUS_COLORS.notice, priority: 5 };
   }
 
-  // Info levels - informational messages
-  // Examples: "info", "information" → info
+  // Informational messages
   if (lowerValue === 'info' || lowerValue === 'information') {
     return { level: 'info', color: STATUS_COLORS.info, priority: 6 };
   }
 
-  // Debug levels - debug messages and detailed logging
-  // Examples: "debug", "trace", "verbose" → debug
+  // Debug messages and detailed logging
   if (lowerValue === 'debug' || lowerValue === 'trace' || lowerValue === 'verbose') {
     return { level: 'debug', color: STATUS_COLORS.debug, priority: 7 };
   }
 
-  // Success/OK levels - positive status indicators
-  // Examples: "ok", "success" → ok
+  // Success/OK - positive status indicators
   if (lowerValue === 'ok' || lowerValue === 'success') {
     return { level: 'ok', color: STATUS_COLORS.ok, priority: 8 };
   }
 
   // Fallback for unrecognized string values
-  // Examples: "unknown", "xyz", "" → info
   return { level: 'info', color: STATUS_COLORS.info, priority: 6 };
 }
\ No newline at end of file
diff --git a/web/src/utils/metrics/explorerUrlState.ts b/web/src/utils/metrics/explorerUrlState.ts
index 19dbd9ddd5..0ade55bf93 100644
--- a/web/src/utils/metrics/explorerUrlState.ts
+++ b/web/src/utils/metrics/explorerUrlState.ts
@@ -127,8 +127,8 @@ export function queryToExplorerFilters(
     .filter((f): f is LabelFilter => f !== null);
   if (labelFilters.length) out.labelFilters = labelFilters;
 
-  // `favorites` is intentionally no longer read from the URL — the mode drives
-  // showFavoritesOnly now (see explorerFiltersToQuery).
+  // `favorites` is intentionally not read from the URL — the mode drives
+  // showFavoritesOnly (see explorerFiltersToQuery).
   if (query.show_empty === "true") out.hideEmptyPanels = false;
   if (query.sort === "z-a") out.sortBy = "z-a";
   if (query.view === "rows") out.viewMode = "rows";
diff --git a/web/src/utils/metrics/metricDefaults.js b/web/src/utils/metrics/metricDefaults.js
index b97b1c8063..20c70baefd 100644
--- a/web/src/utils/metrics/metricDefaults.js
+++ b/web/src/utils/metrics/metricDefaults.js
@@ -61,10 +61,10 @@ export const MIN_STEP_SECONDS = 15;
  * Card kinds. A card kind — not the declared metric type — drives a card's
  * query, badge, type-filter bucket, variant list and telemetry.
  *
- * `expHistogramFallback` is an addition to the PRD's enumeration: an
- * ExponentialHistogram `_bucket` card needs a preview query (the count line)
- * but must expose only that one variant, so it can be neither `other` (no
- * query at all) nor `counterRate` (full counter variant list).
+ * `expHistogramFallback`: an ExponentialHistogram `_bucket` card needs a
+ * preview query (the count line) but must expose only that one variant, so it
+ * can be neither `other` (no query at all) nor `counterRate` (full counter
+ * variant list).
  */
 export const CARD_KIND = {
   COUNTER_RATE: "counterRate",
@@ -287,7 +287,7 @@ function pickTypeEvidence(ownType, familyType) {
 }
 
 /* -------------------------------------------------------------------------- */
-/* Rule set A — type resolution (PRD 6.1)                                      */
+/* Rule set A — type resolution                                                */
 /* -------------------------------------------------------------------------- */
 
 /**
@@ -365,7 +365,7 @@ export function resolveCardKind(metricName, metricType, ctx) {
 }
 
 /* -------------------------------------------------------------------------- */
-/* PromQL construction (PRD 7.4)                                               */
+/* PromQL construction                                                         */
 /* -------------------------------------------------------------------------- */
 
 const LABEL_NAME_RE = /^[a-zA-Z_][a-zA-Z0-9_]*$/;
@@ -554,7 +554,7 @@ function withNanGuard(selector) {
 }
 
 /* -------------------------------------------------------------------------- */
-/* Rate window (PRD 6.4)                                                       */
+/* Rate window                                                                 */
 /* -------------------------------------------------------------------------- */
 
 /** Serializes whole seconds as a PromQL duration, e.g. 3660 -> "1h1m". */
@@ -637,12 +637,8 @@ export function computeRateWindow(
  * (usePanelVariableSubstitution: `max(interval + scrape, 4 * scrape)`, where
  * `interval` is the range over the PANEL's pixel width), every PromQL query goes
  * through the substitution on its way to the backend, and the PromQL builder's
- * own `rate()` operation defaults to exactly this token. Baking a literal `[4m]`
- * into a seeded panel meant the window stopped tracking the range the moment the
- * user changed it — a rate over a 4-minute window sampled every 30 minutes on a
- * 7-day view — and it disagreed with what the builder produces when the same
- * user adds `rate()` by hand. Hand over the variable and let the panel resolve
- * it, which is what a panel is for.
+ * own `rate()` operation defaults to exactly this token. Hand over the variable
+ * and let the panel resolve it against its own range and width.
  */
 export const PANEL_RATE_WINDOW = "$__rate_interval";
 
@@ -652,7 +648,7 @@ const DEFAULT_RATE_WINDOW = formatPromDuration(
 );
 
 /* -------------------------------------------------------------------------- */
-/* Rule set B — unit inference (PRD 7.0 - 7.3)                                 */
+/* Rule set B — unit inference                                                 */
 /* -------------------------------------------------------------------------- */
 
 function lookupSegment(segment) {
@@ -713,9 +709,9 @@ export function toO2Unit(canonicalUnit) {
 }
 
 /**
- * Resolves the unit for a card, honouring the PRD 7.0 precedence:
- * declared unit (normalized) beats name inference; a counter's observation unit
- * is then converted through the rated mapping.
+ * Resolves the unit for a card: declared unit (normalized) beats name
+ * inference; a counter's observation unit is then converted through the rated
+ * mapping.
  */
 function resolveUnit(metricName, cardKind, declaredUnit) {
   // `_created` is seconds-since-epoch by definition, whatever anyone declared.
@@ -741,7 +737,7 @@ function resolveUnit(metricName, cardKind, declaredUnit) {
 }
 
 /* -------------------------------------------------------------------------- */
-/* Rule set A — query templates and variants (PRD 6.2, 6.3)                    */
+/* Rule set A — query templates and variants                                   */
 /* -------------------------------------------------------------------------- */
 
 /**
@@ -985,11 +981,6 @@ function buildVariants(cardKind, ctx) {
           // CELLS: `rate(X_bucket)` is observations per second, whatever the
           // observation happens to be. The `le` axis keeps the observation unit
           // and rides separately on `bucketUnit`.
-          //
-          // Without this the cells inherited the card's unit — so every cell of a
-          // `*_seconds_bucket` heatmap was formatted as a duration ("0.42 s") when
-          // it is a rate ("0.42 c/s"). Wrong by a dimension, on the chart's whole
-          // colour scale and every tooltip.
           unit: "count-per-sec",
         },
         {
@@ -1190,11 +1181,6 @@ function buildVariants(cardKind, ctx) {
           // for every such metric — true, and useless. What carries information
           // is how MANY of them there are: `count(kube_pod_container_info)` is
           // the number of containers, and its shape over time is what you want.
-          //
-          // This card previously had no preview at all, which rendered as a grey
-          // box: every `*_info` metric in a Kubernetes org (`go_info`,
-          // `kube_node_info`, `coredns_build_info`, …) looked like a chart that
-          // had failed to load.
           queries: [
             q(
               `count(${sel})`,
@@ -1248,7 +1234,7 @@ const FOOTER_LABEL = {
  * @param {string|undefined} declaredUnit metrics_meta.unit (may be "")
  * @param {{
  *   streamNames?: Set<string>,   // feeds the `_sum` sibling check
- *   familyType?: string,         // the family's declared type (5.1 family model)
+ *   familyType?: string,         // the family's declared type
  *   filters?: Array<{label: string, value: string, operator?: string}>,
  *   rateWindow?: string,         // PromQL duration; defaults to the 4m floor
  *   labels?: string[],           // the stream's label names, when known
@@ -1370,10 +1356,8 @@ export function resolveVariant(defaults, variantId, options) {
     queries,
     chartType: variant.chartType ?? defaults.chartType,
     unit: variant.unit ?? defaults.unit,
-    // The card footer must name the function actually IN EFFECT. Falling back to
-    // the card-kind default left an overridden card still reading "sum(rate)"
-    // after the user switched to avg(rate) — so the change looked like it had
-    // never applied at all.
+    // The card footer must name the function actually IN EFFECT, not the
+    // card-kind default.
     footerLabel: variant.footerLabel ?? defaults.footerLabel,
   };
 }
diff --git a/web/src/utils/metrics/metricFamily.ts b/web/src/utils/metrics/metricFamily.ts
index 72c4e40752..ea9874bd54 100644
--- a/web/src/utils/metrics/metricFamily.ts
+++ b/web/src/utils/metrics/metricFamily.ts
@@ -493,7 +493,7 @@ export function buildTypeFilterBuckets(
  * metadata. The dropdown lists it, so it needs an honest badge.
  *
  * Deliberately narrow. `gaugehistogram` is absent because v1 really does treat it as
- * Other (PRD 6.1), and `_created`/info cards keep "other" because their card kinds
+ * Other, and `_created`/info cards keep "other" because their card kinds
  * are `timestamp`/`info`, not `other`, so they never reach this.
  */
 function declaredBucketOf(type: string | undefined): string | null {
diff --git a/web/src/utils/metrics/metricIntent.ts b/web/src/utils/metrics/metricIntent.ts
index a107048fc5..649e4be77a 100644
--- a/web/src/utils/metrics/metricIntent.ts
+++ b/web/src/utils/metrics/metricIntent.ts
@@ -20,10 +20,10 @@ import { resolveSetId } from "@/composables/useMetricSubjectButtons";
 /**
  * Intent-based metric organization.
  *
- * Replaces the legacy Network/Infra/Others taxonomy with question-shaped pills
- * (Essentials, Compute, Memory, Storage, Network, All). Each pill except
- * Essentials and All is a pattern filter on the metric stream name; Essentials
- * is a workload-specific curated whitelist; All is pass-through.
+ * Question-shaped metric pills (Essentials, Compute, Memory, Storage, Network,
+ * All). Each pill except Essentials and All is a pattern filter on the metric
+ * stream name; Essentials is a workload-specific curated whitelist; All is
+ * pass-through.
  *
  * Scope filtering (Pod / Node) is handled by `useMetricSubjectButtons` and
  * applied to the stream pool *before* an intent filter is applied.
diff --git a/web/src/utils/metrics/metricPanelSeed.ts b/web/src/utils/metrics/metricPanelSeed.ts
index 4f5a44388d..550b3d2be2 100644
--- a/web/src/utils/metrics/metricPanelSeed.ts
+++ b/web/src/utils/metrics/metricPanelSeed.ts
@@ -16,11 +16,9 @@
 /**
  * The explorer's rule set, applied to a *panel editor* query slot.
  *
- * Picking a metrics stream in the Add Panel page used to seed the bare selector
- * `metric{}` — a raw cumulative counter, which is almost never what anyone wants
- * to look at. The explorer already knows the right default function, unit and
- * chart type for every metric (§6–§7 of the PRD); this hands the same answer to
- * the panel editor, so a metric charts sensibly wherever you pick it.
+ * The explorer knows the right default function, unit and chart type for every
+ * metric; this hands the same answer to the panel editor, so a metric charts
+ * sensibly wherever you pick it.
  *
  * Pure: takes the streams list it is given and returns a description of what to
  * write. The call sites do the writing, because two of them must also update the
@@ -85,7 +83,7 @@ export const DEFAULT_NEW_PANEL_TYPE = "bar";
 export const isUntouchedPanelType = (type: string | undefined): boolean =>
   type === DEFAULT_NEW_PANEL_TYPE;
 
-/** What the editor seeded before this module existed. */
+/** The bare `metric{}` selector — the fallback seed. */
 const bareSeed = (metricName: string): PromqlSeed => ({
   query: `${metricName}{}`,
   customQuery: false,
@@ -267,12 +265,6 @@ export function isAutoSeededQuery(
  * both. The moment the user picks a chart type of their own, the query we seeded
  * no longer matches the variant that type implies, this returns false, and their
  * choice is never overridden.
- *
- * This replaces a module-level memo of "the type we last seeded". That memo was
- * keyed on the panel-data object, which `useDashboardPanel` holds as a SINGLETON
- * per page key and merely `Object.assign`s on reset — so it leaked across every
- * panel edited in the session and could override the saved chart type of a panel
- * it had never seeded. The panel already tells us what we need; no global state.
  */
 export function seedOwnsChartType(
   query: string | undefined | null,
diff --git a/web/src/utils/metrics/prefixGrouping.ts b/web/src/utils/metrics/prefixGrouping.ts
index dfba81dfd8..dcfbbb53f1 100644
--- a/web/src/utils/metrics/prefixGrouping.ts
+++ b/web/src/utils/metrics/prefixGrouping.ts
@@ -126,14 +126,6 @@ function candidatePrefixes(name: string, maxDepth: number): string[] {
  * once the other two claim the deeper `envoy_cluster`. A final pass folds such under-sized
  * groups into `misc`, so no rendered group is ever smaller than `minGroupSize`.
  *
- * The assignment comes OUT of the algorithm; it is never reconstructed from the
- * groups. "The deepest candidate that survived as a group" is a different
- * question from the one pass 2 answered — a name whose group was folded into
- * `misc` would be handed back to a shallower group that is still standing, and
- * the counts on the rail would stop agreeing with what the grid filters. That is
- * why there is one entry point returning both halves, rather than a groups-only
- * function that invites the caller to guess the other.
- *
  * Results are sorted by `count` descending, then `label` ascending. The `misc` group is
  * always sorted last regardless of its count.
  *
@@ -197,10 +189,8 @@ export function computePrefixAssignment(
   }
 
   // Pass 3: a prefix can qualify on coverage yet keep fewer than `minGroupSize`
-  // names once deeper groups have taken their share. Fold those into `misc` so
-  // the option actually holds for every group the user sees — and move their
-  // members with them, which is what keeps the counts and the assignment the
-  // same statement about the same names.
+  // names once deeper groups have taken their share. Fold those into `misc` (and
+  // move their members with them) so the minimum holds for every rendered group.
   for (const [id, members] of [...namesByGroup]) {
     if (id === MISC_GROUP_ID || members.length >= minGroupSize) continue;
 
diff --git a/web/src/utils/prebuilt-templates/email.ts b/web/src/utils/prebuilt-templates/email.ts
index 2a5d45c30a..4e395c527d 100644
--- a/web/src/utils/prebuilt-templates/email.ts
+++ b/web/src/utils/prebuilt-templates/email.ts
@@ -27,6 +27,10 @@ export const emailTemplate = {
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>OpenObserve Alert</title>
     <style>
+        /* INTENTIONAL EXCEPTION to the two-font rule: this markup renders inside a
+           mail client, which cannot load our self-hosted webfont and has no access
+           to our CSS custom properties. A system stack is correct here — do not
+           replace with var(--font-sans). */
         body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; margin: 0; padding: 20px; background-color: #f5f5f5; }
         .container { max-width: 600px; margin: 0 auto; background-color: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); overflow: hidden; }
         .header { background-color: #d63638; color: white; padding: 20px; text-align: center; }
@@ -119,7 +123,7 @@ export const emailConfig: PrebuiltConfig = {
         };
       }
     }
-    // CC and Subject fields removed - not supported by backend Email struct
+    // CC and Subject are not supported by the backend Email struct
     // {
     //   key: 'ccRecipients',
     //   label: 'CC Recipients (optional)',
diff --git a/web/src/utils/prebuilt-templates/slack.ts b/web/src/utils/prebuilt-templates/slack.ts
index f67a564e2c..ad0ab57e84 100644
--- a/web/src/utils/prebuilt-templates/slack.ts
+++ b/web/src/utils/prebuilt-templates/slack.ts
@@ -17,7 +17,7 @@ import { PrebuiltConfig } from './types';
 /**
  * Slack prebuilt destination configuration
  * Provides predefined configuration for Slack webhook notifications
- * Note: Template body is now managed by backend, this is just for fallback/reference
+ * Note: Template body is managed by the backend; this is just a fallback/reference.
  */
 const slackTemplateBody = JSON.stringify({
   text: "🚨 *Alert: {alert_name}*",
diff --git a/web/src/utils/rum/sessionReplayChangeFormat.ts b/web/src/utils/rum/sessionReplayChangeFormat.ts
index 8a143b4ed8..4d81538f09 100644
--- a/web/src/utils/rum/sessionReplayChangeFormat.ts
+++ b/web/src/utils/rum/sessionReplayChangeFormat.ts
@@ -16,22 +16,16 @@
 /**
  * Session Replay "Change format" -> classic (rrweb V1) record converter.
  *
- * Background
- * ----------
- * The Datadog/OpenObserve browser SDK v7 rewrote how session-replay snapshots are
- * serialized. Instead of the classic rrweb-style tree, snapshots are now encoded as a
- * compact stream of "changes":
+ * The browser SDK v7 encodes session-replay snapshots as a compact stream of
+ * "changes" instead of the classic rrweb-style tree:
  *
- *   - FullSnapshot record (type 2) now carries `format: 1` and `data: Change[]`
- *     (previously `data: { node, initialOffset }`).
- *   - DOM mutations moved to a new Change record (type 12, `data: Change[]`)
- *     (previously an IncrementalSnapshot type 3 with source 0).
+ *   - FullSnapshot record (type 2) carries `format: 1` and `data: Change[]`.
+ *   - DOM mutations are a Change record (type 12, `data: Change[]`).
  *
- * `@openobserve/rrweb-player` only understands the classic V1 format, so feeding it the
- * new records renders a blank screen. This module converts the new records back into the
- * V1 records the player expects, mirroring exactly what the old SDK emitted.
+ * `@openobserve/rrweb-player` only understands the classic V1 format, so this module
+ * converts the new records back into the V1 records the player expects.
  *
- * Key facts about the encoding (from the SDK):
+ * Key facts about the encoding:
  *   - Node ids are NOT stored in the stream. They are assigned by a sequential counter
  *     (starting at 0) as nodes are serialized top-down in document order. The counter,
  *     the string table and the stylesheet table are all reset before EVERY full snapshot
@@ -104,7 +98,7 @@ const MediaInteractionType = {
 const VISUAL_VIEWPORT_RECORD_TYPE = 8;
 
 // ---------------------------------------------------------------------------
-// getValidTagName — replicates the old SDK serializationUtils.getValidTagName
+// getValidTagName — normalize a tag name to a valid HTML tag name
 // ---------------------------------------------------------------------------
 
 const TAG_NAME_REGEX = /[^a-z1-6-_]/;
diff --git a/web/src/utils/theme.spec.ts b/web/src/utils/theme.spec.ts
index 61e2efc516..e19b25aa06 100644
--- a/web/src/utils/theme.spec.ts
+++ b/web/src/utils/theme.spec.ts
@@ -45,40 +45,40 @@ describe('applyThemeColors with semanticColors', () => {
   it('sets semantic tokens on documentElement in light mode', () => {
     applyThemeColors('#6B76E3', 'light', false, SEMANTIC);
     const style = document.documentElement.style;
-    expect(style.getPropertyValue('--o2-negative')).toBe('#F45B49');
-    expect(style.getPropertyValue('--o2-positive')).toBe('#5ACA7A');
-    expect(style.getPropertyValue('--o2-secondary-btn-bg')).toBe('#EFF1FD');
-    expect(style.getPropertyValue('--o2-secondary-btn-text')).toBe('#575FC5');
-    expect(style.getPropertyValue('--o2-secondary-btn-border')).toBe('#C8D0F9');
+    expect(style.getPropertyValue('--color-status-negative')).toBe('#F45B49');
+    expect(style.getPropertyValue('--color-status-positive')).toBe('#5ACA7A');
+    expect(style.getPropertyValue('--color-button-secondary')).toBe('#EFF1FD');
+    expect(style.getPropertyValue('--color-button-secondary-foreground')).toBe('#575FC5');
+    expect(style.getPropertyValue('--color-button-secondary-border')).toBe('#C8D0F9');
   });
 
   it('sets semantic tokens on body in dark mode', () => {
     applyThemeColors('#8B8DF0', 'dark', false, SEMANTIC);
     const style = document.body.style;
-    expect(style.getPropertyValue('--o2-negative')).toBe('#F45B49');
-    expect(style.getPropertyValue('--o2-positive')).toBe('#5ACA7A');
-    expect(style.getPropertyValue('--o2-secondary-btn-bg')).toBe('#EFF1FD');
+    expect(style.getPropertyValue('--color-status-negative')).toBe('#F45B49');
+    expect(style.getPropertyValue('--color-status-positive')).toBe('#5ACA7A');
+    expect(style.getPropertyValue('--color-button-secondary')).toBe('#EFF1FD');
   });
 
   it('clears semantic tokens from both targets when semanticColors is omitted', () => {
     applyThemeColors('#6B76E3', 'light', false, SEMANTIC);
     applyThemeColors('#7678ed', 'light', false);
-    expect(document.documentElement.style.getPropertyValue('--o2-negative')).toBe('');
-    expect(document.documentElement.style.getPropertyValue('--o2-secondary-btn-bg')).toBe('');
-    expect(document.body.style.getPropertyValue('--o2-negative')).toBe('');
+    expect(document.documentElement.style.getPropertyValue('--color-status-negative')).toBe('');
+    expect(document.documentElement.style.getPropertyValue('--color-button-secondary')).toBe('');
+    expect(document.body.style.getPropertyValue('--color-status-negative')).toBe('');
   });
 
   it('does not set semantic tokens when semanticColors is absent', () => {
     applyThemeColors('#7678ed', 'light', false);
-    expect(document.documentElement.style.getPropertyValue('--o2-theme-color')).not.toBe('');
-    expect(document.documentElement.style.getPropertyValue('--o2-negative')).toBe('');
+    expect(document.documentElement.style.getPropertyValue('--color-theme-accent')).not.toBe('');
+    expect(document.documentElement.style.getPropertyValue('--color-status-negative')).toBe('');
   });
 
   it('clears stale body tokens when switching from dark to light with semanticColors', () => {
     applyThemeColors('#8B8DF0', 'dark', false, SEMANTIC);
-    expect(document.body.style.getPropertyValue('--o2-negative')).toBe('#F45B49');
+    expect(document.body.style.getPropertyValue('--color-status-negative')).toBe('#F45B49');
     applyThemeColors('#6B76E3', 'light', false, SEMANTIC);
-    expect(document.body.style.getPropertyValue('--o2-negative')).toBe('');
-    expect(document.documentElement.style.getPropertyValue('--o2-negative')).toBe('#F45B49');
+    expect(document.body.style.getPropertyValue('--color-status-negative')).toBe('');
+    expect(document.documentElement.style.getPropertyValue('--color-status-negative')).toBe('#F45B49');
   });
 });
diff --git a/web/src/utils/theme.ts b/web/src/utils/theme.ts
index 4937c81606..93c3814e25 100644
--- a/web/src/utils/theme.ts
+++ b/web/src/utils/theme.ts
@@ -13,10 +13,72 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
+import { invalidateChartTheme } from "@/utils/chartTheme";
+
+/**
+ * Run a light↔dark mode switch inside a View Transition so the whole page
+ * cross-fades as one frame. Without this, elements that carry their own CSS
+ * color transitions (inputs, selects, buttons) animate to the new theme a beat
+ * after everything else snaps, which reads as a flash.
+ *
+ * Every DOM write of the switch (the `.dark` class toggle, store dispatch,
+ * applyThemeColors) must happen inside `applyChanges` so the transition
+ * captures them together.
+ *
+ * Applies instantly (no fade) when:
+ * - the requested mode is already active — callers sync each other, and a
+ *   second startViewTransition would cancel the fade already running;
+ * - the View Transitions API is unavailable;
+ * - the user prefers reduced motion.
+ */
+export const switchThemeMode = (
+  mode: "light" | "dark",
+  applyChanges: () => void,
+): void => {
+  const root = document.documentElement;
+  const alreadyApplied = root.classList.contains("dark") === (mode === "dark");
+  const doc = document as Document & {
+    startViewTransition?: (callback: () => void) => {
+      finished: Promise<void>;
+    };
+  };
+
+  if (alreadyApplied) {
+    applyChanges();
+    return;
+  }
+
+  // Freeze per-element CSS transitions (inputs, buttons carry their own
+  // `transition-colors`) while the switch is in flight, so every element snaps
+  // to its final color inside the sweep instead of animating a beat behind the
+  // rest of the page. The matching CSS lives in styles/tailwind.css.
+  const freeze = () => root.classList.add("theme-switching");
+  const unfreeze = () => root.classList.remove("theme-switching");
+
+  if (
+    typeof doc.startViewTransition !== "function" ||
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  ) {
+    freeze();
+    applyChanges();
+    // Two frames: let the new colors paint before transitions re-enable.
+    requestAnimationFrame(() => requestAnimationFrame(unfreeze));
+    return;
+  }
+
+  // The visual itself (soft top→bottom curtain sweep) is defined entirely in
+  // CSS on the ::view-transition pseudos in styles/tailwind.css.
+  const transition = doc.startViewTransition(() => {
+    freeze();
+    applyChanges();
+  });
+  transition.finished.then(unfreeze, unfreeze);
+};
+
 /**
  * Resolve a design-token CSS custom property to its concrete value at runtime.
  *
- * Charts (ECharts options, SVG data-URI symbols, canvas) can't use `var(--x)` —
+ * Charts (ECharts options, SVG data-URI symbols, canvas) can't use CSS `var()` —
  * they need a literal color string. This reads the token from the document root
  * so the single source of truth stays the token layer (`lib/styles/tokens/*`),
  * not a hardcoded hex. `fallback` is returned when the token is unset or the DOM
@@ -111,6 +173,10 @@ const generatePrimaryPalette = (baseHex: string): Record<string, string> => {
     '700': mixColors(baseHex, '#000000', 80),
     '800': mixColors(baseHex, '#000000', 60),
     '900': mixColors(baseHex, '#000000', 40),
+    // 950 continues the linear −20 step (700:80 → 800:60 → 900:40 → 950:20).
+    // dark.css consumes --color-primary-950 for two surfaces. For the default
+    // #3F7994 base, 20% reproduces the stock teal #0d181e (13/63 ≈ 0.20).
+    '950': mixColors(baseHex, '#000000', 20),
   };
 };
 
@@ -133,16 +199,11 @@ const syncO2LibraryTokens = (themeColor: string): void => {
  * @param isDefault - Whether this is the default theme
  */
 export const applyThemeColors = (themeColor: string, mode: "light" | "dark", isDefault: boolean = false, semanticColors?: SemanticColors) => {
-  const isDarkMode = mode === "dark";
+  const darkModeActive = mode === "dark";
 
-  // Toggle .dark class on <html> for the O2 component library (Tailwind dark variant)
-  document.documentElement.classList.toggle('dark', isDarkMode);
-
-  // Toggle the legacy `body.body--dark` / `body.body--light` compat classes so existing
-  // selectors (~200 across SCSS/Vue) and `document.body.classList.contains('body--dark')`
-  // JS checks continue to work.
-  document.body.classList.toggle('body--dark', isDarkMode);
-  document.body.classList.toggle('body--light', !isDarkMode);
+  // Toggle .dark class on <html> for the O2 component library (Tailwind dark
+  // variant). `.dark` on <html> is the single dark-mode signal.
+  document.documentElement.classList.toggle('dark', darkModeActive);
 
   // Sync O2 library tokens with the custom theme color.
   // When using the default theme, clear any previously-set inline primary palette so
@@ -156,57 +217,56 @@ export const applyThemeColors = (themeColor: string, mode: "light" | "dark", isD
     syncO2LibraryTokens(themeColor);
   }
 
-  if (isDarkMode) {
+  if (darkModeActive) {
     // Apply dark mode theme color
     const rgbaColor = hexToRgba(themeColor, 10);
-    document.body.style.setProperty('--o2-dark-theme-color', rgbaColor);
-    document.body.style.setProperty('--o2-theme-color', rgbaColor);
+    document.body.style.setProperty('--color-theme-accent', rgbaColor);
 
     // Apply table header background color (80% theme color mixed with 20% black for dark mode)
     const tableHeaderBg = mixColors(themeColor, '#000000', 40);
-    document.body.style.setProperty('--o2-table-header-bg', tableHeaderBg);
+    document.body.style.setProperty('--color-theme-table-header-bg', tableHeaderBg);
 
     // Apply tab background colors for dark mode
-    // --o2-tab-bg: 20% white + 80% theme color (inverted from light mode)
+    // --color-theme-tab-bg: 20% white + 80% theme color (inverted from light mode)
     const tabBg = hexToRgba(themeColor,3); // 0.8 alpha (80% theme color)
-    document.body.style.setProperty('--o2-tab-bg', tabBg);
+    document.body.style.setProperty('--color-theme-tab-bg', tabBg);
 
-    // --o2-inactive-tab-bg: 10% theme color mixed with dark background
+    // --color-theme-tab-bg-inactive: 10% theme color mixed with dark background
     const inactiveTabBg = hexToRgba(themeColor, 1); // 0.1 alpha (10% theme color)
-    document.body.style.setProperty('--o2-inactive-tab-bg', inactiveTabBg);
+    document.body.style.setProperty('--color-theme-tab-bg-inactive', inactiveTabBg);
 
     // // Apply header menu background color for dark mode (30% theme color)
     // const headerMenuBg = hexToRgba(themeColor, 2); // 0.3 alpha (30% theme color)
-    // document.body.style.setProperty('--o2-header-menu-bg', headerMenuBg);
+    // document.body.style.setProperty('--color-theme-header-menu-bg', headerMenuBg);
 
     // Apply menu gradient colors
     if (isDefault) {
       // Use default menu gradient colors
-      document.body.style.setProperty('--o2-menu-gradient-start', 'rgba(89, 155, 174, 0.3)');
-      document.body.style.setProperty('--o2-menu-gradient-end', 'rgba(48, 193, 233, 0.3)');
+      document.body.style.setProperty('--color-theme-menu-gradient-start', 'rgba(89, 155, 174, 0.3)');
+      document.body.style.setProperty('--color-theme-menu-gradient-end', 'rgba(48, 193, 233, 0.3)');
       // Use default menu color for dark mode
-      document.body.style.setProperty('--o2-menu-color', '#FFFFFF');
+      document.body.style.setProperty('--color-theme-menu-color', '#FFFFFF');
     } else {
       // Calculate menu gradient from theme color
       const menuGradientStart = hexToRgba(themeColor, 3); // 0.3 alpha (30%)
       const menuGradientEnd = hexToRgba(themeColor, 3); // 0.3 alpha (30%)
-      document.body.style.setProperty('--o2-menu-gradient-start', menuGradientStart);
-      document.body.style.setProperty('--o2-menu-gradient-end', menuGradientEnd);
+      document.body.style.setProperty('--color-theme-menu-gradient-start', menuGradientStart);
+      document.body.style.setProperty('--color-theme-menu-gradient-end', menuGradientEnd);
       // Use theme color as menu color for dark mode
-      document.body.style.setProperty('--o2-menu-color', themeColor);
+      document.body.style.setProperty('--color-theme-menu-color', themeColor);
     }
 
     // Clear light mode variables
-    document.documentElement.style.removeProperty('--o2-theme-color');
-    document.documentElement.style.removeProperty('--o2-body-primary-bg');
-    document.documentElement.style.removeProperty('--o2-body-secondary-bg');
-    document.documentElement.style.removeProperty('--o2-table-header-bg');
-    document.documentElement.style.removeProperty('--o2-tab-bg');
-    document.documentElement.style.removeProperty('--o2-inactive-tab-bg');
-    document.documentElement.style.removeProperty('--o2-header-menu-bg');
-    document.documentElement.style.removeProperty('--o2-menu-gradient-start');
-    document.documentElement.style.removeProperty('--o2-menu-gradient-end');
-    document.documentElement.style.removeProperty('--o2-menu-color');
+    document.documentElement.style.removeProperty('--color-theme-accent');
+    document.documentElement.style.removeProperty('--color-theme-body-bg-primary');
+    document.documentElement.style.removeProperty('--color-theme-body-bg-secondary');
+    document.documentElement.style.removeProperty('--color-theme-table-header-bg');
+    document.documentElement.style.removeProperty('--color-theme-tab-bg');
+    document.documentElement.style.removeProperty('--color-theme-tab-bg-inactive');
+    document.documentElement.style.removeProperty('--color-theme-header-menu-bg');
+    document.documentElement.style.removeProperty('--color-theme-menu-gradient-start');
+    document.documentElement.style.removeProperty('--color-theme-menu-gradient-end');
+    document.documentElement.style.removeProperty('--color-theme-menu-color');
     // Page background = a single near-black color with a subtle theme tint (no
     // gradient), mirroring the light-mode single-tint treatment.
     const darkBodyBg = mixColors(themeColor, '#000000', 8); // 8% theme + 92% black
@@ -214,71 +274,71 @@ export const applyThemeColors = (themeColor: string, mode: "light" | "dark", isD
   } else {
     // Apply light mode theme color
     const rgbaColor = hexToRgba(themeColor, 10);
-    document.documentElement.style.setProperty('--o2-theme-color', rgbaColor);
+    document.documentElement.style.setProperty('--color-theme-accent', rgbaColor);
 
     // Auto-calculate and apply background colors based on theme color.
     // primaryBg (1%) is reused as a subtle surface tint by other components
-    // (QueryInspector, .bg-white) — keep it. secondaryBg is kept for legacy
-    // .o2-custom-bg consumers.
+    // (QueryInspector, .bg-white) — keep it. secondaryBg is the far stop of the
+    // page-background gradient on alerts/AddDestination.vue + alerts/AddTemplate.vue.
     const primaryBg = hexToRgba(themeColor, 0.1); // 0.01 alpha (1%)
     const secondaryBg = hexToRgba(themeColor, 4); // 0.4 alpha (40%)
 
-    document.documentElement.style.setProperty('--o2-body-primary-bg', primaryBg);
-    document.documentElement.style.setProperty('--o2-body-secondary-bg', secondaryBg);
+    document.documentElement.style.setProperty('--color-theme-body-bg-primary', primaryBg);
+    document.documentElement.style.setProperty('--color-theme-body-bg-secondary', secondaryBg);
 
     // Page background = a single, subtle primary tint (no gradient) so the muted
     // area around the white content card reads as one calm color — matching the
     // page chrome (surface-chrome = primary-100).
-    const bodyBg = hexToRgba(themeColor, 0.5); // ~0.05 alpha — a calm, barely-tinted backdrop (was 0.10, read as too bright)
+    const bodyBg = hexToRgba(themeColor, 0.5); // ~0.05 alpha — a calm, barely-tinted backdrop
     document.body.style.setProperty('background', bodyBg, 'important');
 
     // Apply table header background color (80% theme color mixed with 20% white)
     const tableHeaderBg = mixColors(themeColor, '#FFFFFF', 30);
-    document.documentElement.style.setProperty('--o2-table-header-bg', tableHeaderBg);
+    document.documentElement.style.setProperty('--color-theme-table-header-bg', tableHeaderBg);
 
     // Apply tab background colors for light mode
-    // --o2-tab-bg: 20% theme color + 80% white
+    // --color-theme-tab-bg: 20% theme color + 80% white
     const tabBg = hexToRgba(themeColor, 2); // 0.2 alpha (20% theme color)
-    document.documentElement.style.setProperty('--o2-tab-bg', tabBg);
+    document.documentElement.style.setProperty('--color-theme-tab-bg', tabBg);
 
-    // --o2-inactive-tab-bg: 10% theme color + 90% white
+    // --color-theme-tab-bg-inactive: 10% theme color + 90% white
     const inactiveTabBg = hexToRgba(themeColor, 1); // 0.1 alpha (10% theme color)
-    document.documentElement.style.setProperty('--o2-inactive-tab-bg', inactiveTabBg);
+    document.documentElement.style.setProperty('--color-theme-tab-bg-inactive', inactiveTabBg);
 
 
     // Apply menu gradient colors
     if (isDefault) {
       // Use default menu gradient colors
-      document.documentElement.style.setProperty('--o2-menu-gradient-start', 'rgba(89, 175, 199, 0.3)');
-      document.documentElement.style.setProperty('--o2-menu-gradient-end', 'rgba(48, 193, 233, 0.3)');
+      document.documentElement.style.setProperty('--color-theme-menu-gradient-start', 'rgba(89, 175, 199, 0.3)');
+      document.documentElement.style.setProperty('--color-theme-menu-gradient-end', 'rgba(48, 193, 233, 0.3)');
       // Use default menu color for light mode
-      document.documentElement.style.setProperty('--o2-menu-color', '#3F7994');
+      document.documentElement.style.setProperty('--color-theme-menu-color', '#3F7994');
     } else {
       // Calculate menu gradient from theme color
       const menuGradientStart = hexToRgba(themeColor, 3); // 0.3 alpha (30%)
       const menuGradientEnd = hexToRgba(themeColor, 3); // 0.3 alpha (30%)
-      document.documentElement.style.setProperty('--o2-menu-gradient-start', menuGradientStart);
-      document.documentElement.style.setProperty('--o2-menu-gradient-end', menuGradientEnd);
+      document.documentElement.style.setProperty('--color-theme-menu-gradient-start', menuGradientStart);
+      document.documentElement.style.setProperty('--color-theme-menu-gradient-end', menuGradientEnd);
       // Use theme color as menu color for light mode
-      document.documentElement.style.setProperty('--o2-menu-color', themeColor);
+      document.documentElement.style.setProperty('--color-theme-menu-color', themeColor);
     }
 
     // Clear dark mode variables
-    document.body.style.removeProperty('--o2-dark-theme-color');
-    document.body.style.removeProperty('--o2-table-header-bg');
-    document.body.style.removeProperty('--o2-tab-bg');
-    document.body.style.removeProperty('--o2-inactive-tab-bg');
-    document.body.style.removeProperty('--o2-header-menu-bg');
-    document.body.style.removeProperty('--o2-menu-gradient-start');
-    document.body.style.removeProperty('--o2-menu-gradient-end');
-    document.body.style.removeProperty('--o2-menu-color');
+    document.body.style.removeProperty('--color-theme-accent');
+    document.body.style.removeProperty('--color-theme-table-header-bg');
+    document.body.style.removeProperty('--color-theme-tab-bg');
+    document.body.style.removeProperty('--color-theme-tab-bg-inactive');
+    document.body.style.removeProperty('--color-theme-header-menu-bg');
+    document.body.style.removeProperty('--color-theme-menu-gradient-start');
+    document.body.style.removeProperty('--color-theme-menu-gradient-end');
+    document.body.style.removeProperty('--color-theme-menu-color');
   }
 
   // Apply semantic colors (O2 Signature triadic theme and any future multi-color themes)
   const semanticTokenNames = [
-    '--o2-negative', '--o2-status-error-text', '--o2-status-error-bg',
-    '--o2-positive', '--o2-status-success-text', '--o2-status-success-bg',
-    '--o2-secondary-btn-bg', '--o2-secondary-btn-text', '--o2-secondary-btn-border',
+    '--color-status-negative', '--color-status-error-text', '--color-status-error-bg',
+    '--color-status-positive', '--color-status-success-text', '--color-status-success-bg',
+    '--color-button-secondary', '--color-button-secondary-foreground', '--color-button-secondary-border',
     '--color-button-outline-text', '--color-button-outline-border',
     '--color-button-ghost-text',
   ];
@@ -288,16 +348,16 @@ export const applyThemeColors = (themeColor: string, mode: "light" | "dark", isD
       document.body.style.removeProperty(t);
       document.documentElement.style.removeProperty(t);
     });
-    const target = isDarkMode ? document.body : document.documentElement;
-    target.style.setProperty('--o2-negative', semanticColors.error);
-    target.style.setProperty('--o2-status-error-text', semanticColors.errorText);
-    target.style.setProperty('--o2-status-error-bg', semanticColors.errorBg);
-    target.style.setProperty('--o2-positive', semanticColors.success);
-    target.style.setProperty('--o2-status-success-text', semanticColors.successText);
-    target.style.setProperty('--o2-status-success-bg', semanticColors.successBg);
-    target.style.setProperty('--o2-secondary-btn-bg', semanticColors.secondaryBtnBg);
-    target.style.setProperty('--o2-secondary-btn-text', semanticColors.secondaryBtnText);
-    target.style.setProperty('--o2-secondary-btn-border', semanticColors.secondaryBtnBorder);
+    const target = darkModeActive ? document.body : document.documentElement;
+    target.style.setProperty('--color-status-negative', semanticColors.error);
+    target.style.setProperty('--color-status-error-text', semanticColors.errorText);
+    target.style.setProperty('--color-status-error-bg', semanticColors.errorBg);
+    target.style.setProperty('--color-status-positive', semanticColors.success);
+    target.style.setProperty('--color-status-success-text', semanticColors.successText);
+    target.style.setProperty('--color-status-success-bg', semanticColors.successBg);
+    target.style.setProperty('--color-button-secondary', semanticColors.secondaryBtnBg);
+    target.style.setProperty('--color-button-secondary-foreground', semanticColors.secondaryBtnText);
+    target.style.setProperty('--color-button-secondary-border', semanticColors.secondaryBtnBorder);
     if (semanticColors.outlineText) target.style.setProperty('--color-button-outline-text', semanticColors.outlineText);
     if (semanticColors.outlineBorder) target.style.setProperty('--color-button-outline-border', semanticColors.outlineBorder);
     if (semanticColors.ghostText) target.style.setProperty('--color-button-ghost-text', semanticColors.ghostText);
@@ -308,6 +368,9 @@ export const applyThemeColors = (themeColor: string, mode: "light" | "dark", isD
     });
   }
 
+  // Invalidate the resolved-token cache so charts read fresh values on theme change.
+  invalidateChartTheme();
+
   // Dispatch event to notify components (like SearchResult) to re-render
   window.dispatchEvent(new CustomEvent('themeColorChanged'));
 };
diff --git a/web/src/utils/traces/convertTraceData.ts b/web/src/utils/traces/convertTraceData.ts
index 9c1048bf2a..aacba9188f 100644
--- a/web/src/utils/traces/convertTraceData.ts
+++ b/web/src/utils/traces/convertTraceData.ts
@@ -311,8 +311,8 @@ export const convertServiceGraphToTree = (
   // A row's visual height is the LARGER of its node symbol and its TWO-LINE label
   // (a bold name line + a smaller "N req" line). Both must fit inside the pitch
   // (with a breathing gap) or rows collide. The two-line label is the real
-  // driver here — budgeting a single line (as before) let the "req" line overlap
-  // the next node. So size everything against the pitch as a whole.
+  // driver here — budgeting only a single line lets the "req" line overlap the
+  // next node, so size everything against the pitch as a whole.
   const ROW_GAP = 6; // min clear space between adjacent rows
   const avail = Math.max(10, pitch - ROW_GAP);
   // Two-line label total height ≈ nameFont*1.35 + reqFont*1.35, with req ≈ 0.83×
diff --git a/web/src/utils/traces/traceColors.spec.ts b/web/src/utils/traces/traceColors.spec.ts
index cbbdb139c1..f452785c92 100644
--- a/web/src/utils/traces/traceColors.spec.ts
+++ b/web/src/utils/traces/traceColors.spec.ts
@@ -60,29 +60,29 @@ describe("traceColors", () => {
   describe("getSpanColor", () => {
     it("should return a CSS variable string", () => {
       const result = getSpanColor(1);
-      expect(result).toBe("var(--o2-span-1)");
+      expect(result).toBe("var(--color-span-1)");
     });
 
     it("should return correct CSS variable for index 25", () => {
       const result = getSpanColor(25);
-      expect(result).toBe("var(--o2-span-25)");
+      expect(result).toBe("var(--color-span-25)");
     });
 
     it("should wrap around correctly for index 51 (wraps to 1)", () => {
       const result = getSpanColor(51);
-      expect(result).toBe("var(--o2-span-1)");
+      expect(result).toBe("var(--color-span-1)");
     });
 
     it("should wrap around correctly for index 50", () => {
       const result = getSpanColor(50);
-      expect(result).toBe("var(--o2-span-50)");
+      expect(result).toBe("var(--color-span-50)");
     });
 
     it("should handle index 100 wrapping", () => {
       const result = getSpanColor(100);
-      expect(result).toMatch(/^var\(--o2-span-\d+\)$/);
+      expect(result).toMatch(/^var\(--color-span-\d+\)$/);
       const colorIndex = ((100 - 1) % 50) + 1;
-      expect(result).toBe(`var(--o2-span-${colorIndex})`);
+      expect(result).toBe(`var(--color-span-${colorIndex})`);
     });
   });
 
@@ -114,7 +114,7 @@ describe("traceColors", () => {
   describe("getServiceColor", () => {
     it("should return a CSS variable string", () => {
       const result = getServiceColor("my-service");
-      expect(result).toMatch(/^var\(--o2-span-\d+\)$/);
+      expect(result).toMatch(/^var\(--color-span-\d+\)$/);
     });
 
     it("should return consistent color for the same service name", () => {
@@ -127,13 +127,13 @@ describe("traceColors", () => {
       const color1 = getServiceColor("service-alpha");
       const color2 = getServiceColor("service-beta-very-different");
       // They should be valid CSS vars even if they happen to collide
-      expect(color1).toMatch(/^var\(--o2-span-\d+\)$/);
-      expect(color2).toMatch(/^var\(--o2-span-\d+\)$/);
+      expect(color1).toMatch(/^var\(--color-span-\d+\)$/);
+      expect(color2).toMatch(/^var\(--color-span-\d+\)$/);
     });
 
     it("should handle empty service name", () => {
       const result = getServiceColor("");
-      expect(result).toMatch(/^var\(--o2-span-\d+\)$/);
+      expect(result).toMatch(/^var\(--color-span-\d+\)$/);
     });
   });
 
@@ -176,7 +176,7 @@ describe("traceColors", () => {
 
     it("should use correct CSS variable", () => {
       const result = getSpanColorWithOpacity(5, 0.8);
-      expect(result).toContain("var(--o2-span-5)");
+      expect(result).toContain("var(--color-span-5)");
       expect(result).toContain("80%");
     });
   });
@@ -224,7 +224,7 @@ describe("traceColors", () => {
 
     it("should assign CSS variable strings", () => {
       const result = generateServiceColorMap(["service-a"]);
-      expect(result.get("service-a")).toMatch(/^var\(--o2-span-\d+\)$/);
+      expect(result.get("service-a")).toMatch(/^var\(--color-span-\d+\)$/);
     });
 
     it("should handle empty array", () => {
@@ -243,7 +243,7 @@ describe("traceColors", () => {
 
   describe("getContrastTextColor", () => {
     it("should return 'white'", () => {
-      expect(getContrastTextColor("var(--o2-span-1)")).toBe("white");
+      expect(getContrastTextColor("var(--color-span-1)")).toBe("white");
     });
 
     it("should always return white regardless of background", () => {
@@ -255,14 +255,14 @@ describe("traceColors", () => {
 
   describe("traceUIColors", () => {
     it("should have expected CSS variable keys", () => {
-      expect(traceUIColors.surface).toBe("var(--o2-trace-surface)");
-      expect(traceUIColors.border).toBe("var(--o2-trace-border)");
-      expect(traceUIColors.textPrimary).toBe("var(--o2-trace-text-primary)");
+      expect(traceUIColors.surface).toBe("var(--color-trace-surface)");
+      expect(traceUIColors.border).toBe("var(--color-trace-border)");
+      expect(traceUIColors.textPrimary).toBe("var(--color-trace-text-primary)");
       expect(traceUIColors.textSecondary).toBe(
-        "var(--o2-trace-text-secondary)",
+        "var(--color-trace-text-secondary)",
       );
-      expect(traceUIColors.hover).toBe("var(--o2-trace-hover)");
-      expect(traceUIColors.selected).toBe("var(--o2-trace-selected)");
+      expect(traceUIColors.hover).toBe("var(--color-trace-hover)");
+      expect(traceUIColors.selected).toBe("var(--color-trace-selected)");
     });
   });
 
@@ -276,7 +276,7 @@ describe("traceColors", () => {
 
     it("should use CSS variable strings", () => {
       Object.values(statusColors).forEach((color) => {
-        expect(color).toMatch(/^var\(--o2-/);
+        expect(color).toMatch(/^var\(--color-/);
       });
     });
   });
@@ -292,8 +292,8 @@ describe("traceColors", () => {
     });
 
     it("should use CSS variable strings for most kinds", () => {
-      expect(spanKindColors.client).toMatch(/^var\(--o2-/);
-      expect(spanKindColors.server).toMatch(/^var\(--o2-/);
+      expect(spanKindColors.client).toMatch(/^var\(--color-/);
+      expect(spanKindColors.server).toMatch(/^var\(--color-/);
     });
   });
 });
diff --git a/web/src/utils/traces/traceColors.ts b/web/src/utils/traces/traceColors.ts
index 07a5826235..5a43d250d8 100644
--- a/web/src/utils/traces/traceColors.ts
+++ b/web/src/utils/traces/traceColors.ts
@@ -1,10 +1,18 @@
 /**
  * Trace Span Color Utilities
- * Provides helper functions to access the 50 span colors defined in _variables.scss
+ *
+ * `getSpanColor(i)` returns the theme-aware CSS var for span colour i — the
+ * `--color-span-*` set (50 colours) in tokens/base.css — prefer it wherever a CSS
+ * colour is accepted.
+ *
+ * `getSpanColorHex(i, theme)` returns a raw hex from the two arrays below, for the
+ * canvas/ECharts call sites that cannot consume a CSS var. NOTE: these arrays hold
+ * 35 entries and do NOT match the 50 --color-span-* token values.
  */
 
 /**
- * Light mode span colors (50 colors)
+ * Light-mode span colours — 35-entry raw-hex fallback for getSpanColorHex (NOT the
+ * --color-span-* token set; see the file header). Used only where a CSS var can't go.
  */
 export const LIGHT_SPAN_COLORS = [
   "#10B981",
@@ -94,7 +102,7 @@ export const DARK_SPAN_COLORS = [
 export const getSpanColor = (index: number): string => {
   // Ensure index is within bounds (1-50)
   const colorIndex = ((index - 1) % 50) + 1;
-  return `var(--o2-span-${colorIndex})`;
+  return `var(--color-span-${colorIndex})`;
 };
 
 /**
@@ -128,7 +136,7 @@ export const getServiceColor = (serviceName: string): string => {
 
   // Map hash to color index (1-50)
   const colorIndex = (Math.abs(hash) % 50) + 1;
-  return `var(--o2-span-${colorIndex})`;
+  return `var(--color-span-${colorIndex})`;
 };
 
 /**
@@ -164,7 +172,7 @@ export const getSpanColorWithOpacity = (
   opacity: number = 1,
 ): string => {
   const colorIndex = ((index - 1) % 50) + 1;
-  return `color-mix(in srgb, var(--o2-span-${colorIndex}) ${opacity * 100}%, transparent)`;
+  return `color-mix(in srgb, var(--color-span-${colorIndex}) ${opacity * 100}%, transparent)`;
 };
 
 /**
@@ -177,7 +185,7 @@ export const getAllSpanColors = (
   theme: "light" | "dark" = "light",
 ): string[] => {
   const colors = theme === "dark" ? DARK_SPAN_COLORS : LIGHT_SPAN_COLORS;
-  // Return reversed order to maintain existing behavior (was 50-i)
+  // Return reversed order to maintain existing behavior
   return [...colors].reverse();
 };
 
@@ -185,12 +193,12 @@ export const getAllSpanColors = (
  * Trace UI color utilities
  */
 export const traceUIColors = {
-  surface: "var(--o2-trace-surface)",
-  border: "var(--o2-trace-border)",
-  textPrimary: "var(--o2-trace-text-primary)",
-  textSecondary: "var(--o2-trace-text-secondary)",
-  hover: "var(--o2-trace-hover)",
-  selected: "var(--o2-trace-selected)",
+  surface: "var(--color-trace-surface)",
+  border: "var(--color-trace-border)",
+  textPrimary: "var(--color-trace-text-primary)",
+  textSecondary: "var(--color-trace-text-secondary)",
+  hover: "var(--color-trace-hover)",
+  selected: "var(--color-trace-selected)",
 };
 
 /**
@@ -221,7 +229,7 @@ export const generateServiceColorMap = (
     }
 
     usedColors.add(colorIndex);
-    colorMap.set(serviceName, `var(--o2-span-${colorIndex})`);
+    colorMap.set(serviceName, `var(--color-span-${colorIndex})`);
   });
 
   return colorMap;
@@ -242,20 +250,20 @@ export const getContrastTextColor = (backgroundColor: string): string => {
  * Status colors (error, success, warning)
  */
 export const statusColors = {
-  error: "var(--o2-red-800)",
-  success: "var(--o2-green-700)",
-  warning: "var(--o2-yellow-700)",
-  info: "var(--o2-blue-700)",
+  error: "var(--color-status-error-text)",
+  success: "var(--color-status-success-text)",
+  warning: "var(--color-status-warning-text)",
+  info: "var(--color-status-info-text)",
 };
 
 /**
  * Span kind colors (following OpenTelemetry span kinds)
  */
 export const spanKindColors = {
-  client: "var(--o2-span-1)", // Blue
-  server: "var(--o2-span-3)", // Green
-  producer: "var(--o2-span-7)", // Pink
-  consumer: "var(--o2-span-4)", // Purple
-  internal: "var(--o2-span-10)", // Amber
-  unspecified: "var(--o2-gray-700)",
+  client: "var(--color-span-1)", // Blue
+  server: "var(--color-span-3)", // Green
+  producer: "var(--color-span-7)", // Pink
+  consumer: "var(--color-span-4)", // Purple
+  internal: "var(--color-span-10)", // Amber
+  unspecified: "var(--color-text-muted)",
 };
diff --git a/web/src/utils/traces/treeTooltipHelpers.spec.ts b/web/src/utils/traces/treeTooltipHelpers.spec.ts
index 8648722b9e..b32cf2834f 100644
--- a/web/src/utils/traces/treeTooltipHelpers.spec.ts
+++ b/web/src/utils/traces/treeTooltipHelpers.spec.ts
@@ -424,11 +424,13 @@ describe('treeTooltipHelpers', () => {
       const result = generateTracePatternTooltipContent(mockMetadata);
 
       // generateTracePatternTooltipContent uses inline styles, not CSS classes
-      expect(result).toContain('font-family: -apple-system');
+      expect(result).toContain("font-family: var(--font-sans)");
       expect(result).toContain('font-weight: 600');
       expect(result).toContain('border-bottom: 1px solid');
       expect(result).toContain('Calls:');
-      expect(result).toContain('<span style="font-family: monospace;">1</span>');
+      expect(result).toContain(
+        '<span style="font-family: var(--font-mono);">1</span>',
+      );
     });
   });
 
diff --git a/web/src/utils/traces/treeTooltipHelpers.ts b/web/src/utils/traces/treeTooltipHelpers.ts
index c54ec36a2b..491971696c 100644
--- a/web/src/utils/traces/treeTooltipHelpers.ts
+++ b/web/src/utils/traces/treeTooltipHelpers.ts
@@ -214,7 +214,7 @@ export const generateTracePatternTooltipContent = (metadata: any): string => {
   if (!metadata) {
     return `
       <div style="
-        font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
+        font-family: var(--font-sans);
         font-size: 12px;
         line-height: 1.4;
         max-width: 280px;
@@ -229,14 +229,14 @@ export const generateTracePatternTooltipContent = (metadata: any): string => {
           padding-bottom: 4px;
         ">Unknown Pattern</div>
         <div>
-          <div style="margin-bottom: 2px;">Calls: <span style="font-family: monospace;">1</span></div>
-          <div style="margin-bottom: 2px;">Average: <span style="font-family: monospace;">0.0ms</span></div>
-          <div style="margin-bottom: 2px;">Minimum: <span style="font-family: monospace;">0.0ms</span></div>
-          <div style="margin-bottom: 2px;">Maximum: <span style="font-family: monospace;">0.0ms</span></div>
-          <div style="margin-bottom: 2px;">P75: <span style="font-family: monospace;">0.0ms</span></div>
-          <div style="margin-bottom: 2px;">P95: <span style="font-family: monospace;">0.0ms</span></div>
-          <div style="margin-bottom: 2px;">P99: <span style="font-family: monospace;">0.0ms</span></div>
-          <div style="margin-bottom: 2px;">Error Rate: <span style="font-family: monospace; color: #10b981;">0.0%</span></div>
+          <div style="margin-bottom: 2px;">Calls: <span style="font-family: var(--font-mono);">1</span></div>
+          <div style="margin-bottom: 2px;">Average: <span style="font-family: var(--font-mono);">0.0ms</span></div>
+          <div style="margin-bottom: 2px;">Minimum: <span style="font-family: var(--font-mono);">0.0ms</span></div>
+          <div style="margin-bottom: 2px;">Maximum: <span style="font-family: var(--font-mono);">0.0ms</span></div>
+          <div style="margin-bottom: 2px;">P75: <span style="font-family: var(--font-mono);">0.0ms</span></div>
+          <div style="margin-bottom: 2px;">P95: <span style="font-family: var(--font-mono);">0.0ms</span></div>
+          <div style="margin-bottom: 2px;">P99: <span style="font-family: var(--font-mono);">0.0ms</span></div>
+          <div style="margin-bottom: 2px;">Error Rate: <span style="font-family: var(--font-mono); color: #10b981;">0.0%</span></div>
         </div>
       </div>
     `;
@@ -256,7 +256,7 @@ export const generateTracePatternTooltipContent = (metadata: any): string => {
 
   return `
     <div style="
-      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
+      font-family: var(--font-sans);
       font-size: 12px;
       line-height: 1.4;
       max-width: 280px;
@@ -272,14 +272,14 @@ export const generateTracePatternTooltipContent = (metadata: any): string => {
       ">${escapeHtml(pathSignature)}</div>
 
       <div>
-        <div style="margin-bottom: 2px;">Calls: <span style="font-family: monospace;">${count}</span></div>
-        <div style="margin-bottom: 2px;">Average: <span style="font-family: monospace;">${avg.toFixed(1)}ms</span></div>
-        <div style="margin-bottom: 2px;">Minimum: <span style="font-family: monospace;">${min.toFixed(1)}ms</span></div>
-        <div style="margin-bottom: 2px;">Maximum: <span style="font-family: monospace;">${max.toFixed(1)}ms</span></div>
-        <div style="margin-bottom: 2px;">P75: <span style="font-family: monospace;">${p75.toFixed(1)}ms</span></div>
-        <div style="margin-bottom: 2px;">P95: <span style="font-family: monospace;">${p95.toFixed(1)}ms</span></div>
-        <div style="margin-bottom: 2px;">P99: <span style="font-family: monospace;">${p99.toFixed(1)}ms</span></div>
-        <div>Error Rate: <span style="font-family: monospace; color: ${errorRate > 0 ? '#ef4444' : '#10b981'};">${errorRate.toFixed(1)}%</span></div>
+        <div style="margin-bottom: 2px;">Calls: <span style="font-family: var(--font-mono);">${count}</span></div>
+        <div style="margin-bottom: 2px;">Average: <span style="font-family: var(--font-mono);">${avg.toFixed(1)}ms</span></div>
+        <div style="margin-bottom: 2px;">Minimum: <span style="font-family: var(--font-mono);">${min.toFixed(1)}ms</span></div>
+        <div style="margin-bottom: 2px;">Maximum: <span style="font-family: var(--font-mono);">${max.toFixed(1)}ms</span></div>
+        <div style="margin-bottom: 2px;">P75: <span style="font-family: var(--font-mono);">${p75.toFixed(1)}ms</span></div>
+        <div style="margin-bottom: 2px;">P95: <span style="font-family: var(--font-mono);">${p95.toFixed(1)}ms</span></div>
+        <div style="margin-bottom: 2px;">P99: <span style="font-family: var(--font-mono);">${p99.toFixed(1)}ms</span></div>
+        <div>Error Rate: <span style="font-family: var(--font-mono); color: ${errorRate > 0 ? '#ef4444' : '#10b981'};">${errorRate.toFixed(1)}%</span></div>
       </div>
     </div>
   `;
diff --git a/web/src/utils/traces/treeVisualizationEngine.ts b/web/src/utils/traces/treeVisualizationEngine.ts
index f038b317a7..5c01e3fe4b 100644
--- a/web/src/utils/traces/treeVisualizationEngine.ts
+++ b/web/src/utils/traces/treeVisualizationEngine.ts
@@ -358,7 +358,7 @@ export function createTreeVisualizationEngine() {
       -webkit-backdrop-filter: blur(24px) saturate(180%);
       border: 1px solid ${isDarkMode ? "rgba(255,255,255,0.07)" : "rgba(0,0,0,0.06)"};
       border-radius: 8px; padding: 9px 13px; font-size: 12px; line-height: 1.5;
-      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+      font-family: var(--font-sans);
       letter-spacing: 0.01em; white-space: nowrap; display: none;
       color: ${isDarkMode ? "rgba(255,255,255,0.88)" : "rgba(0,0,0,0.82)"};
     `
@@ -491,15 +491,12 @@ export function createTreeVisualizationEngine() {
 }
 
 /**
- * Legacy wrapper for backward compatibility with existing ServiceGraph.vue
- * This ensures zero breaking changes during the migration
+ * Placeholder tree-options API for ServiceGraph.vue — not yet implemented.
  */
 export const createLegacyTreeOptions = (
   graphData: { nodes: any[]; edges: any[] },
   layoutType: string = "horizontal",
   isDarkMode: boolean = true
 ) => {
-  // This will be implemented when we migrate ServiceGraph.vue
-  // For now, this is a placeholder to maintain the existing API
   throw new Error('Legacy tree options not yet implemented - use convertServiceGraphToTree for now')
 }
\ No newline at end of file
diff --git a/web/src/views/About.vue b/web/src/views/About.vue
index 723dc3ab27..829d0e1fd6 100644
--- a/web/src/views/About.vue
+++ b/web/src/views/About.vue
@@ -15,16 +15,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="rounded-md w-full h-full px-[0.625rem] pb-[0.625rem] pt-2.5">
+  <div class="rounded-default w-full h-full px-page-edge pb-2.5 pt-2.5">
     <div class="h-full overflow-auto">
       <div class="flex flex-col gap-4">
 
         <!-- ── Hero Banner ─────────────────────────────────────────── -->
-        <div class="relative bg-(--o2-card-bg) rounded-xl p-4 overflow-hidden">
+        <div class="relative bg-card-glass-bg rounded-default p-4 overflow-hidden">
           <div class="relative z-1">
             <img
               :src="
-                store.state.theme == 'dark'
+                isDark
                   ? getImageURL('images/common/openobserve_latest_dark_2.svg')
                   : getImageURL('images/common/openobserve_latest_light_2.svg')
               "
@@ -38,32 +38,32 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <!-- One-line meta bar -->
             <div class="inline-flex items-center flex-wrap gap-2 mt-5">
               <!-- version -->
-              <span class="inline-flex items-center gap-1.5 text-sm font-semibold whitespace-nowrap py-2 px-3.5 rounded border text-(--o2-positive) border-[color-mix(in_srgb,var(--o2-positive)_28%,transparent)] bg-[color-mix(in_srgb,var(--o2-positive)_8%,var(--o2-card-bg))]">
-                <OIcon name="check-circle" size="sm" class="text-(--o2-positive) shrink-0" />
+              <span class="inline-flex items-center gap-1.5 text-sm font-semibold whitespace-nowrap py-2 px-3.5 rounded-default border text-status-positive border-[color-mix(in_srgb,var(--color-status-positive)_28%,transparent)] bg-[color-mix(in_srgb,var(--color-status-positive)_8%,var(--color-card-glass-bg))]">
+                <OIcon name="check-circle" size="sm" class="text-status-positive shrink-0" />
                 {{ store.state.zoConfig.version }}
               </span>
               <!-- build type -->
-              <span class="inline-flex items-center gap-1.5 text-sm font-semibold capitalize whitespace-nowrap py-2 px-3.5 rounded border text-(--o2-primary-color) border-[color-mix(in_srgb,var(--o2-primary-color)_28%,transparent)] bg-[color-mix(in_srgb,var(--o2-primary-color)_8%,var(--o2-card-bg))]">
-                <OIcon name="workspaces" size="sm" class="text-(--o2-primary-color) shrink-0" />
+              <span class="inline-flex items-center gap-1.5 text-sm font-semibold capitalize whitespace-nowrap py-2 px-3.5 rounded-default border text-accent border-[color-mix(in_srgb,var(--color-accent)_28%,transparent)] bg-[color-mix(in_srgb,var(--color-accent)_8%,var(--color-card-glass-bg))]">
+                <OIcon name="workspaces" size="sm" class="text-accent shrink-0" />
                 {{ store.state.zoConfig.build_type }}
               </span>
               <!-- commit -->
-              <span class="inline-flex items-center gap-1.5 text-sm text-(--o2-text-heading) whitespace-nowrap py-2 px-3.5 rounded border border-[color-mix(in_srgb,var(--o2-info)_28%,transparent)] bg-[color-mix(in_srgb,var(--o2-info)_8%,var(--o2-card-bg))]">
-                <OIcon name="code" size="sm" class="text-(--o2-info) shrink-0" />
-                <span class="text-xs font-semibold uppercase tracking-wide text-(--o2-info)">{{ t("about.commit_lbl") }}</span>
+              <span class="inline-flex items-center gap-1.5 text-sm text-text-body whitespace-nowrap py-2 px-3.5 rounded-default border border-[color-mix(in_srgb,var(--color-info)_28%,transparent)] bg-[color-mix(in_srgb,var(--color-info)_8%,var(--color-card-glass-bg))]">
+                <OIcon name="code" size="sm" class="text-info shrink-0" />
+                <span class="text-xs font-semibold uppercase tracking-wide text-info">{{ t("about.commit_lbl") }}</span>
                 <OText variant="mono">{{ store.state.zoConfig.commit_hash }}</OText>
                 <button
                   @click="copyToClipboard(store.state.zoConfig.commit_hash)"
-                  class="inline-flex items-center justify-center p-0.5 rounded border-none bg-transparent cursor-pointer text-(--o2-text-muted) hover:text-(--o2-info) transition-colors duration-150"
+                  class="inline-flex items-center justify-center p-0.5 rounded-default border-none bg-transparent cursor-pointer text-text-muted hover:text-info transition-colors duration-150"
                   title="Copy commit hash"
                 >
                   <OIcon name="content-copy" size="sm" />
                 </button>
               </span>
               <!-- built date -->
-              <span class="inline-flex items-center gap-1.5 text-sm text-(--o2-text-heading) whitespace-nowrap py-2 px-3.5 rounded border border-[color-mix(in_srgb,var(--o2-warning)_28%,transparent)] bg-[color-mix(in_srgb,var(--o2-warning)_8%,var(--o2-card-bg))]">
-                <OIcon name="event" size="sm" class="text-(--o2-warning) shrink-0" />
-                <span class="text-xs font-semibold uppercase tracking-wide text-(--o2-warning)">{{ t("about.build_lbl") }}</span>
+              <span class="inline-flex items-center gap-1.5 text-sm text-text-body whitespace-nowrap py-2 px-3.5 rounded-default border border-[color-mix(in_srgb,var(--color-warning)_28%,transparent)] bg-[color-mix(in_srgb,var(--color-warning)_8%,var(--color-card-glass-bg))]">
+                <OIcon name="event" size="sm" class="text-warning shrink-0" />
+                <span class="text-xs font-semibold uppercase tracking-wide text-warning">{{ t("about.build_lbl") }}</span>
                 {{ formatDate(store.state.zoConfig.build_date) }}
               </span>
             </div>
@@ -74,62 +74,62 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <div class="grid grid-cols-1 gap-4">
 
           <!-- Open Source Libraries -->
-          <div class="bg-(--o2-card-bg) rounded-[0.625rem] p-4 flex flex-col gap-y-2">
+          <div class="bg-card-glass-bg rounded-default p-4 flex flex-col gap-y-2">
             <div class="flex items-center gap-3">
-              <div class="w-12 h-12 rounded-lg flex items-center justify-center shrink-0 bg-[color-mix(in_srgb,var(--o2-primary-color)_12%,var(--o2-card-bg))] text-(--o2-primary-color)">
+              <div class="w-12 h-12 rounded-default flex items-center justify-center shrink-0 bg-[color-mix(in_srgb,var(--color-accent)_12%,var(--color-card-glass-bg))] text-accent">
                 <OIcon name="code" size="md" />
               </div>
                 <OText variant="page-title" as="h2" class="text-xl font-medium">{{ t("about.os_libraries") }}</OText>
             </div>
-            <div class="text-sm" style="color: var(--o2-text-secondary)">{{ t("about.os_libraries_msg") }}</div>
+            <div class="text-sm text-text-secondary">{{ t("about.os_libraries_msg") }}</div>
             <div class="grid grid-cols-4 gap-2.5">
               <a
                 href="https://github.com/openobserve/openobserve/blob/main/Cargo.toml"
                 target="_blank"
-                class="flex items-center gap-3 py-3 px-3.5 border border-(--o2-border-color) rounded-lg bg-(--o2-card-bg) no-underline transition-all duration-200 hover:border-[color-mix(in_srgb,var(--o2-primary-color)_35%,transparent)]"
+                class="flex items-center gap-3 py-3 px-3.5 border border-card-glass-border rounded-default bg-card-glass-bg no-underline transition-all duration-200 hover:border-[color-mix(in_srgb,var(--color-accent)_35%,transparent)]"
               >
-                <OIcon name="settings" size="md" class="text-(--o2-primary-color) shrink-0" />
+                <OIcon name="settings" size="md" class="text-accent shrink-0" />
                 <div class="flex-1 flex flex-col gap-0.5 min-w-0">
-                  <span class="text-sm font-semibold font-mono text-(--o2-text-heading) whitespace-nowrap overflow-hidden text-ellipsis">Cargo.toml</span>
-                  <span class="text-xs text-(--o2-text-muted)">Rust crates</span>
+                  <span class="text-sm font-semibold font-mono text-text-heading whitespace-nowrap overflow-hidden text-ellipsis">Cargo.toml</span>
+                  <span class="text-xs text-text-muted">Rust crates</span>
                 </div>
-                <OIcon name="open-in-new" size="sm" class="text-(--o2-text-muted) shrink-0" />
+                <OIcon name="open-in-new" size="sm" class="text-text-muted shrink-0" />
               </a>
               <a
                 href="https://github.com/openobserve/openobserve/blob/main/web/package.json"
                 target="_blank"
-                class="flex items-center gap-3 py-3 px-3.5 border border-(--o2-border-color) rounded-lg bg-(--o2-card-bg) no-underline transition-all duration-200 hover:border-[color-mix(in_srgb,var(--o2-primary-color)_35%,transparent)]"
+                class="flex items-center gap-3 py-3 px-3.5 border border-card-glass-border rounded-default bg-card-glass-bg no-underline transition-all duration-200 hover:border-[color-mix(in_srgb,var(--color-accent)_35%,transparent)]"
               >
-                <OIcon name="backpack" size="md" class="text-(--o2-primary-color) shrink-0" />
+                <OIcon name="backpack" size="md" class="text-accent shrink-0" />
                 <div class="flex-1 flex flex-col gap-0.5 min-w-0">
-                  <span class="text-sm font-semibold font-mono text-(--o2-text-heading) whitespace-nowrap overflow-hidden text-ellipsis">package.json</span>
-                  <span class="text-xs text-(--o2-text-muted)">Node packages</span>
+                  <span class="text-sm font-semibold font-mono text-text-heading whitespace-nowrap overflow-hidden text-ellipsis">package.json</span>
+                  <span class="text-xs text-text-muted">Node packages</span>
                 </div>
-                <OIcon name="open-in-new" size="sm" class="text-(--o2-text-muted) shrink-0" />
+                <OIcon name="open-in-new" size="sm" class="text-text-muted shrink-0" />
               </a>
               <a
                 href="https://npmjs.com"
                 target="_blank"
-                class="flex items-center gap-3 py-3 px-3.5 border border-(--o2-border-color) rounded-lg bg-(--o2-card-bg) no-underline transition-all duration-200 hover:border-[color-mix(in_srgb,var(--o2-primary-color)_35%,transparent)]"
+                class="flex items-center gap-3 py-3 px-3.5 border border-card-glass-border rounded-default bg-card-glass-bg no-underline transition-all duration-200 hover:border-[color-mix(in_srgb,var(--color-accent)_35%,transparent)]"
               >
-                <OIcon name="javascript" size="md" class="text-(--o2-primary-color) shrink-0" />
+                <OIcon name="javascript" size="md" class="text-accent shrink-0" />
                 <div class="flex-1 flex flex-col gap-0.5 min-w-0">
-                  <span class="text-sm font-semibold font-mono text-(--o2-text-heading) whitespace-nowrap overflow-hidden text-ellipsis">npmjs.com</span>
-                  <span class="text-xs text-(--o2-text-muted)">JS registry</span>
+                  <span class="text-sm font-semibold font-mono text-text-heading whitespace-nowrap overflow-hidden text-ellipsis">npmjs.com</span>
+                  <span class="text-xs text-text-muted">JS registry</span>
                 </div>
-                <OIcon name="open-in-new" size="sm" class="text-(--o2-text-muted) shrink-0" />
+                <OIcon name="open-in-new" size="sm" class="text-text-muted shrink-0" />
               </a>
               <a
                 href="https://crates.io"
                 target="_blank"
-                class="flex items-center gap-3 py-3 px-3.5 border border-(--o2-border-color) rounded-lg bg-(--o2-card-bg) no-underline transition-all duration-200 hover:border-[color-mix(in_srgb,var(--o2-primary-color)_35%,transparent)]"
+                class="flex items-center gap-3 py-3 px-3.5 border border-card-glass-border rounded-default bg-card-glass-bg no-underline transition-all duration-200 hover:border-[color-mix(in_srgb,var(--color-accent)_35%,transparent)]"
               >
-                <OIcon name="inventory-2" size="md" class="text-(--o2-primary-color) shrink-0" />
+                <OIcon name="inventory-2" size="md" class="text-accent shrink-0" />
                 <div class="flex-1 flex flex-col gap-0.5 min-w-0">
-                  <span class="text-sm font-semibold font-mono text-(--o2-text-heading) whitespace-nowrap overflow-hidden text-ellipsis">crates.io</span>
-                  <span class="text-xs text-(--o2-text-muted)">Rust registry</span>
+                  <span class="text-sm font-semibold font-mono text-text-heading whitespace-nowrap overflow-hidden text-ellipsis">crates.io</span>
+                  <span class="text-xs text-text-muted">Rust registry</span>
                 </div>
-                <OIcon name="open-in-new" size="sm" class="text-(--o2-text-muted) shrink-0" />
+                <OIcon name="open-in-new" size="sm" class="text-text-muted shrink-0" />
               </a>
             </div>
           </div>
@@ -137,10 +137,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- License Info (opensource or enterprise on-prem) -->
           <div
             v-if="store.state.zoConfig.build_type == 'opensource' || (store.state.zoConfig.build_type == 'enterprise' && config.isCloud == 'false')"
-            class="bg-(--o2-card-bg) rounded-[0.625rem] p-4"
+            class="bg-card-glass-bg rounded-default p-4"
           >
             <div class="flex items-center gap-3 mb-3">
-              <div class="w-12 h-12 rounded-lg flex items-center justify-center shrink-0 bg-[color-mix(in_srgb,var(--o2-info)_12%,var(--o2-card-bg))] text-(--o2-info)">
+              <div class="w-12 h-12 rounded-default flex items-center justify-center shrink-0 bg-[color-mix(in_srgb,var(--color-info)_12%,var(--color-card-glass-bg))] text-info">
                 <OIcon name="shield" size="md" />
               </div>
               <OText variant="page-title" as="h2" class="m-0 text-xl font-medium">{{ t("about.license_info") }}</OText>
@@ -150,7 +150,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <a
                 href="https://github.com/openobserve/openobserve/blob/main/LICENSE"
                 target="_blank"
-                class="text-(--o2-text-link) no-underline font-medium border-b border-[color-mix(in_srgb,var(--o2-text-link)_35%,transparent)] transition-colors duration-200 hover:border-(--o2-text-link)"
+                class="text-text-link no-underline font-medium border-b border-[color-mix(in_srgb,var(--color-text-link)_35%,transparent)] transition-colors duration-200 hover:border-text-link"
               >GNU Affero General Public License (AGPL)</a>.
             </OText>
             <OText v-if="store.state.zoConfig.build_type == 'enterprise' && config.isCloud == 'false'" variant="body" as="div" class="leading-relaxed">
@@ -162,9 +162,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </div>
 
           <!-- Community Card (fallback for cloud) -->
-          <div v-else class="bg-(--o2-card-bg) rounded-[0.625rem] p-4">
+          <div v-else class="bg-card-glass-bg rounded-default p-4">
             <div class="flex items-center gap-3 mb-3">
-              <div class="w-12 h-12 rounded-lg flex items-center justify-center shrink-0 bg-[color-mix(in_srgb,var(--o2-primary-color)_12%,var(--o2-card-bg))] text-(--o2-primary-color)">
+              <div class="w-12 h-12 rounded-default flex items-center justify-center shrink-0 bg-[color-mix(in_srgb,var(--color-accent)_12%,var(--color-card-glass-bg))] text-accent">
                 <OIcon name="groups" size="md" />
               </div>
               <OText variant="page-title" as="h3" class="m-0 text-lg font-medium leading-6">{{ t("about.community_lbl") }}</OText>
@@ -174,7 +174,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <a
                 href="https://github.com/openobserve/openobserve"
                 target="_blank"
-                class="inline-flex items-center gap-1.5 py-2 px-3.5 rounded bg-[color-mix(in_srgb,var(--o2-primary-color)_8%,var(--o2-card-bg))] text-(--o2-primary-color) no-underline text-sm font-medium border border-[color-mix(in_srgb,var(--o2-primary-color)_18%,transparent)] transition-all duration-200"
+                class="inline-flex items-center gap-1.5 py-2 px-3.5 rounded-default bg-[color-mix(in_srgb,var(--color-accent)_8%,var(--color-card-glass-bg))] text-accent no-underline text-sm font-medium border border-[color-mix(in_srgb,var(--color-accent)_18%,transparent)] transition-all duration-200"
               >
                 <OIcon name="code" size="sm" />
                 GitHub
@@ -182,7 +182,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <a
                 href="https://openobserve.ai"
                 target="_blank"
-                class="inline-flex items-center gap-1.5 py-2 px-3.5 rounded bg-[color-mix(in_srgb,var(--o2-primary-color)_8%,var(--o2-card-bg))] text-(--o2-primary-color) no-underline text-sm font-medium border border-[color-mix(in_srgb,var(--o2-primary-color)_18%,transparent)] transition-all duration-200"
+                class="inline-flex items-center gap-1.5 py-2 px-3.5 rounded-default bg-[color-mix(in_srgb,var(--color-accent)_8%,var(--color-card-glass-bg))] text-accent no-underline text-sm font-medium border border-[color-mix(in_srgb,var(--color-accent)_18%,transparent)] transition-all duration-200"
               >
                 <OIcon name="language" size="sm" />
                 Website
@@ -192,15 +192,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
 
         <!-- ── Enterprise License Details ──────────────────────────── -->
-        <div v-if="config.isEnterprise == 'true' && config.isCloud === 'false'" class="bg-(--o2-card-bg) rounded-[0.625rem] p-4">
+        <div v-if="config.isEnterprise == 'true' && config.isCloud === 'false'" class="bg-card-glass-bg rounded-default p-4">
           <!-- Header: eyebrow + title + manage button -->
           <div class="flex items-start justify-between mb-2">
             <div class="flex items-start gap-3">
-              <div class="w-12 h-12 rounded-lg flex items-center justify-center shrink-0 bg-[color-mix(in_srgb,var(--o2-info)_12%,var(--o2-card-bg))] text-(--o2-info)">
+              <div class="w-12 h-12 rounded-default flex items-center justify-center shrink-0 bg-[color-mix(in_srgb,var(--color-info)_12%,var(--color-card-glass-bg))] text-info">
                 <OIcon name="workspace-premium" size="md" />
               </div>
               <div>
-                <OText variant="label" class="uppercase tracking-widest m-0 mb-1 text-(--o2-primary-color)">License &amp; Usage</OText>
+                <OText variant="label" class="uppercase tracking-widest m-0 mb-1 text-accent">License &amp; Usage</OText>
                 <h2 class="text-xl font-semibold m-0 text-text-heading">{{ t("about.ent_lincese_detail_lbl") }}</h2>
               </div>
             </div>
@@ -212,7 +212,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
           <div v-if="loadingLicense" class="text-center py-8">
             <OSpinner size="md" />
-            <div class="mt-3 text-sm text-(--o2-text-muted)">{{ t("about.loading_license_info") }}</div>
+            <div class="mt-3 text-sm text-text-muted">{{ t("about.loading_license_info") }}</div>
           </div>
 
           <div v-else-if="!licenseData || !licenseData.license" class="py-2">
@@ -221,7 +221,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <p class="text-sm mb-2">{{ t("about.no_license_installed_msg") }}</p>
               <div v-if="licenseData && licenseData.installation_id" class="text-xs flex items-center flex-wrap gap-1">
                 {{ t("about.installation_id_lbl") }}:
-                <code class="px-2 py-0.5 rounded font-mono border border-solid border-(--o2-border-color) bg-(--o2-code-bg) select-all">
+                <code class="px-2 py-0.5 rounded-default font-mono border border-solid border-card-glass-border bg-code-bg select-all">
                   {{ licenseData.installation_id }}
                 </code>
               </div>
@@ -230,17 +230,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
           <div v-else class="grid grid-cols-2 gap-4">
             <!-- License details table -->
-            <div class="border border-(--o2-border-color) rounded-lg overflow-hidden">
+            <div class="border border-card-glass-border rounded-default overflow-hidden">
               <table class="w-full border-collapse">
                 <tbody>
-                  <tr class="border-b border-(--color-table-row-divider) last:border-b-0">
-                    <td class="w-2/5 font-semibold text-sm text-(--color-table-header-text) py-2.5 px-3.5 border-r border-(--color-table-row-divider) whitespace-nowrap bg-[var(--color-table-header-bg)]">{{ t("about.lincese_id_lbl") }}</td>
-                    <td class="text-sm text-(--color-text-body) py-2.5 px-3.5 font-mono">
+                  <tr class="border-b border-table-row-divider last:border-b-0">
+                    <td class="w-2/5 font-semibold text-sm text-table-header-text py-2.5 px-3.5 border-r border-table-row-divider whitespace-nowrap bg-table-header-bg">{{ t("about.lincese_id_lbl") }}</td>
+                    <td class="text-sm text-text-body py-2.5 px-3.5 font-mono">
                       <div class="flex items-center gap-1.5">
                         <span>{{ licenseData.license.license_id }}</span>
                         <button
                           @click="copyToClipboard(licenseData.license.license_id)"
-                          class="inline-flex items-center justify-center p-0.5 rounded border-none bg-transparent cursor-pointer text-(--o2-text-muted) hover:text-(--o2-primary-color) transition-colors duration-150"
+                          class="inline-flex items-center justify-center p-0.5 rounded-default border-none bg-transparent cursor-pointer text-text-muted hover:text-accent transition-colors duration-150"
                           title="Copy license ID"
                         >
                           <OIcon name="content-copy" size="sm" />
@@ -248,62 +248,62 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       </div>
                     </td>
                   </tr>
-                  <tr class="border-b border-(--color-table-row-divider) last:border-b-0">
-                    <td class="w-2/5 font-semibold text-sm text-(--color-table-header-text) py-2.5 px-3.5 border-r border-(--color-table-row-divider) whitespace-nowrap bg-[var(--color-table-header-bg)]">{{ t("about.status_lbl") }}</td>
-                    <td class="text-sm text-(--color-text-body) py-2.5 px-3.5">
+                  <tr class="border-b border-table-row-divider last:border-b-0">
+                    <td class="w-2/5 font-semibold text-sm text-table-header-text py-2.5 px-3.5 border-r border-table-row-divider whitespace-nowrap bg-table-header-bg">{{ t("about.status_lbl") }}</td>
+                    <td class="text-sm text-text-body py-2.5 px-3.5">
                       <span
                         class="inline-block w-2 h-2 rounded-full mr-1.5 align-middle"
-                        :class="licenseData?.expired ? 'bg-(--o2-negative)' : 'bg-(--o2-positive)'"
+                        :class="licenseData?.expired ? 'bg-status-negative' : 'bg-status-positive'"
                       />
-                      <span :class="licenseData?.expired ? 'text-red-500' : 'text-green-600'">
+                      <span :class="licenseData?.expired ? 'text-status-error-text' : 'text-status-positive'">
                         {{ licenseData?.expired ? t("about.expired_lbl") : t("about.active_lbl") }}
                       </span>
                     </td>
                   </tr>
-                  <tr class="border-b border-(--color-table-row-divider) last:border-b-0">
-                    <td class="w-2/5 font-semibold text-sm text-(--color-table-header-text) py-2.5 px-3.5 border-r border-(--color-table-row-divider) whitespace-nowrap bg-[var(--color-table-header-bg)]">Edition</td>
-                    <td class="text-sm text-(--color-text-body) py-2.5 px-3.5">{{ t("about.value_license_enterprise") }}</td>
+                  <tr class="border-b border-table-row-divider last:border-b-0">
+                    <td class="w-2/5 font-semibold text-sm text-table-header-text py-2.5 px-3.5 border-r border-table-row-divider whitespace-nowrap bg-table-header-bg">Edition</td>
+                    <td class="text-sm text-text-body py-2.5 px-3.5">{{ t("about.value_license_enterprise") }}</td>
                   </tr>
-                  <tr class="border-b border-(--color-table-row-divider) last:border-b-0">
-                    <td class="w-2/5 font-semibold text-sm text-(--color-table-header-text) py-2.5 px-3.5 border-r border-(--color-table-row-divider) whitespace-nowrap bg-[var(--color-table-header-bg)]">{{ t("about.create_at_lbl") }}</td>
-                    <td class="text-sm text-(--color-text-body) py-2.5 px-3.5">{{ formatLicenseDate(licenseData.license.created_at) }}</td>
+                  <tr class="border-b border-table-row-divider last:border-b-0">
+                    <td class="w-2/5 font-semibold text-sm text-table-header-text py-2.5 px-3.5 border-r border-table-row-divider whitespace-nowrap bg-table-header-bg">{{ t("about.create_at_lbl") }}</td>
+                    <td class="text-sm text-text-body py-2.5 px-3.5">{{ formatLicenseDate(licenseData.license.created_at) }}</td>
                   </tr>
-                  <tr class="border-b border-(--color-table-row-divider) last:border-b-0">
-                    <td class="w-2/5 font-semibold text-sm text-(--color-table-header-text) py-2.5 px-3.5 border-r border-(--color-table-row-divider) whitespace-nowrap bg-[var(--color-table-header-bg)]">{{ t("about.expires_at_lbl") }}</td>
-                    <td class="text-sm text-(--color-text-body) py-2.5 px-3.5">{{ formatLicenseDate(licenseData.license.expires_at) }}</td>
+                  <tr class="border-b border-table-row-divider last:border-b-0">
+                    <td class="w-2/5 font-semibold text-sm text-table-header-text py-2.5 px-3.5 border-r border-table-row-divider whitespace-nowrap bg-table-header-bg">{{ t("about.expires_at_lbl") }}</td>
+                    <td class="text-sm text-text-body py-2.5 px-3.5">{{ formatLicenseDate(licenseData.license.expires_at) }}</td>
                   </tr>
                 </tbody>
               </table>
             </div>
 
             <!-- Ingestion usage panel -->
-            <div class="bg-[color-mix(in_srgb,var(--o2-primary-color)_4%,var(--o2-card-bg))] border border-(--o2-border-color) rounded-lg p-5">
-              <p class="text-sm font-semibold m-0 mb-1" style="color: var(--o2-text-heading)">{{ t("about.usage_limits") }}</p>
-              <p class="text-xs m-0 mb-4" style="color: var(--o2-text-muted)">
+            <div class="bg-[color-mix(in_srgb,var(--color-accent)_4%,var(--color-card-glass-bg))] border border-card-glass-border rounded-default p-5">
+              <p class="text-sm font-semibold m-0 mb-1 text-text-heading">{{ t("about.usage_limits") }}</p>
+              <p class="text-xs m-0 mb-4 text-text-muted">
                 {{ licenseData.license.limits?.Ingestion?.typ || 'PerDayCount' }}
                 · limit {{ licenseData.license.limits?.Ingestion?.value || 50 }} GB / day
               </p>
               <div v-if="licenseData.ingestion_used !== undefined">
                 <div class="flex items-baseline gap-2 mb-3">
                   <span
-                    class="text-4xl font-bold text-(--o2-text-heading) leading-none"
-                    :class="licenseData.ingestion_used > 90 ? 'text-red-500' : licenseData.ingestion_used > 70 ? 'text-orange-500' : ''"
+                    class="text-4xl font-bold text-text-body leading-none"
+                    :class="licenseData.ingestion_used > 90 ? 'text-status-error-text' : licenseData.ingestion_used > 70 ? 'text-status-warning-text' : ''"
                   >{{ licenseData.ingestion_used.toFixed(2) }}%</span>
-                  <span class="text-xs text-(--o2-text-secondary)">of daily limit used today</span>
+                  <span class="text-xs text-text-secondary">of daily limit used today</span>
                 </div>
-                <div class="h-1.5 rounded-full bg-(--o2-border-color) overflow-hidden mb-1.5">
+                <div class="h-1.5 rounded-full bg-card-glass-border overflow-hidden mb-1.5">
                   <div
                     class="h-full rounded-full transition-[width] duration-[400ms] min-w-1"
-                    :class="licenseData.ingestion_used > 90 ? 'bg-(--o2-negative)' : licenseData.ingestion_used > 70 ? 'bg-(--o2-warning)' : 'bg-(--o2-primary-color)'"
+                    :class="licenseData.ingestion_used > 90 ? 'bg-status-negative' : licenseData.ingestion_used > 70 ? 'bg-warning' : 'bg-accent'"
                     :style="{ width: Math.min(licenseData.ingestion_used, 100) + '%' }"
                   />
                 </div>
-                <div class="flex justify-between text-xs text-(--o2-text-muted) mb-3.5">
+                <div class="flex justify-between text-xs text-text-muted mb-3.5">
                   <span>{{ ((licenseData.ingestion_used / 100) * (licenseData.license.limits?.Ingestion?.value || 50)).toFixed(0) }} GB today</span>
                   <span>{{ licenseData.license.limits?.Ingestion?.value || 50 }} GB / day</span>
                 </div>
               </div>
-              <div class="flex items-start gap-1.5 text-xs text-(--o2-positive) bg-[color-mix(in_srgb,var(--o2-positive)_8%,var(--o2-card-bg))] border border-[color-mix(in_srgb,var(--o2-positive)_22%,transparent)] rounded py-2 px-3">
+              <div class="flex items-start gap-1.5 text-xs text-status-positive bg-[color-mix(in_srgb,var(--color-status-positive)_8%,var(--color-card-glass-bg))] border border-[color-mix(in_srgb,var(--color-status-positive)_22%,transparent)] rounded-default py-2 px-3">
                 <OIcon name="check-circle" size="sm" class="shrink-0 mt-0.5" />
                 {{ t("about.feature_comparision_plan_detail") }}
               </div>
@@ -312,7 +312,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
 
         <!-- ── Feature Comparison ──────────────────────────────────── -->
-        <div v-if="config.isCloud === 'false'" class="bg-(--o2-card-bg) rounded-[0.625rem] p-4 mb-5">
+        <div v-if="config.isCloud === 'false'" class="bg-card-glass-bg rounded-default p-4 mb-5">
           <FeatureComparisonTable />
         </div>
 
@@ -324,6 +324,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <script lang="ts">
 import { defineComponent, ref, onMounted } from "vue";
 import { useStore } from "vuex";
+import { useTheme } from "@/composables/useTheme";
 import { getImageURL } from "../utils/zincutils";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
@@ -349,6 +350,7 @@ export default defineComponent({
   },
   setup() {
     const store = useStore();
+    const { isDark } = useTheme();
     const router = useRouter();
     const pageData = ref("Page Data");
     const { t } = useI18n();
@@ -429,6 +431,7 @@ export default defineComponent({
     };
 
     return {
+      isDark,
       t,
       store,
       config,
diff --git a/web/src/views/ActionScript.spec.ts b/web/src/views/ActionScript.spec.ts
deleted file mode 100644
index 5920f5dec5..0000000000
--- a/web/src/views/ActionScript.spec.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { mount } from '@vue/test-utils';
-import { createStore } from 'vuex';
-import { createI18n } from 'vue-i18n';
-import ActionScript from './ActionScript.vue';
-
-describe('ActionScript.vue', () => {
-  let store: any;
-  let i18n: any;
-
-  beforeEach(() => {
-    store = createStore({
-      state: {
-        selectedOrganization: {
-          identifier: 'test-org',
-        },
-      },
-    });
-
-    i18n = createI18n({
-      legacy: false,
-      locale: 'en',
-      messages: {
-        en: {},
-      },
-    });
-  });
-
-  it('should render RouterView', () => {
-    const wrapper = mount(ActionScript, {
-      global: {
-        plugins: [store, i18n],
-        stubs: {
-          RouterView: {
-            name: 'RouterView',
-            template: '<div class="router-view-stub"></div>',
-          },
-                  },
-      },
-    });
-
-    expect(wrapper.find('.router-view-stub').exists()).toBe(true);
-  });
-
-  it('should have correct data-test attribute', () => {
-    const wrapper = mount(ActionScript, {
-      global: {
-        plugins: [store, i18n],
-        stubs: {
-          RouterView: true,
-                  },
-      },
-    });
-
-    expect(wrapper.find('[data-test="alerts-page"]').exists()).toBe(true);
-  });
-
-  it('should have q-page wrapper', () => {
-    const wrapper = mount(ActionScript, {
-      global: {
-        plugins: [store, i18n],
-        stubs: {
-          RouterView: true,
-                  },
-      },
-    });
-
-    expect(wrapper.find('[data-test="alerts-page"]').exists()).toBe(true);
-  });
-
-  it('should mount without errors', () => {
-    expect(() => {
-      mount(ActionScript, {
-        global: {
-          plugins: [store, i18n],
-          stubs: {
-            RouterView: true,
-            },
-        },
-      });
-    }).not.toThrow();
-  });
-
-  it('should have access to store', () => {
-    const wrapper = mount(ActionScript, {
-      global: {
-        plugins: [store, i18n],
-        stubs: {
-          RouterView: true,
-          },
-      },
-    });
-
-    expect(wrapper.vm.store).toBeDefined();
-    expect(wrapper.vm.store.state.selectedOrganization.identifier).toBe('test-org');
-  });
-
-  it('should have access to i18n t function', () => {
-    const wrapper = mount(ActionScript, {
-      global: {
-        plugins: [store, i18n],
-        stubs: {
-          RouterView: true,
-          },
-      },
-    });
-
-    expect(wrapper.vm.t).toBeDefined();
-    expect(typeof wrapper.vm.t).toBe('function');
-  });
-});
diff --git a/web/src/views/ActionScript.vue b/web/src/views/ActionScript.vue
deleted file mode 100644
index be0c0f18a5..0000000000
--- a/web/src/views/ActionScript.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <div class="rounded-md p-0" data-test="alerts-page" style="min-height: inherit">
-    <RouterView />
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-import { useStore } from "vuex";
-import { useI18n } from "vue-i18n";
-
-export default defineComponent({
-  name: "ActionScript",
-  setup() {
-    const store = useStore();
-    const { t } = useI18n();
-
-    return {
-      t,
-      store,
-    };
-  },
-});
-</script>
diff --git a/web/src/views/AddAlertView.vue b/web/src/views/AddAlertView.vue
index 1815af307c..807a60b773 100644
--- a/web/src/views/AddAlertView.vue
+++ b/web/src/views/AddAlertView.vue
@@ -15,7 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="full-height">
+  <div class="h-full max-h-full overflow-hidden">
     <AddAlert
       v-if="destinations.length > 0"
       :isUpdated="isUpdated"
diff --git a/web/src/views/AppAlerts.spec.ts b/web/src/views/AppAlerts.spec.ts
index dd10c4e52f..3e0ad55f75 100644
--- a/web/src/views/AppAlerts.spec.ts
+++ b/web/src/views/AppAlerts.spec.ts
@@ -512,7 +512,7 @@ describe("AppAlerts", () => {
   });
 
   describe("Component Template Structure", () => {
-    it("should render main q-page element", () => {
+    it("should render main page element", () => {
       const wrapper = createWrapper();
       const qPage = wrapper.find('[data-test="alerts-page"]');
       expect(qPage.exists()).toBe(true);
diff --git a/web/src/views/AppAlerts.vue b/web/src/views/AppAlerts.vue
index 725f10e23d..d6c8d17a44 100644
--- a/web/src/views/AppAlerts.vue
+++ b/web/src/views/AppAlerts.vue
@@ -15,7 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="rounded-md p-0" data-test="alerts-page" style="min-height: inherit">
+  <div class="rounded-default p-0" data-test="alerts-page" style="min-height: inherit">
     <RouterView
       :templates="templates"
       :destinations="destinations"
diff --git a/web/src/views/AppMetrics.spec.ts b/web/src/views/AppMetrics.spec.ts
deleted file mode 100644
index 6e953375fc..0000000000
--- a/web/src/views/AppMetrics.spec.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { mount } from '@vue/test-utils';
-import AppMetrics from './AppMetrics.vue';
-
-// Mock zinc-metrics component
-const ZincMetricsMock = {
-  name: 'ZincMetrics',
-  template: '<div class="zinc-metrics-mock" data-test="zinc-metrics"></div>',
-  props: ['pageType'],
-};
-
-describe('AppMetrics.vue', () => {
-  it('should render zinc-metrics component', () => {
-    const wrapper = mount(AppMetrics, {
-      global: {
-        stubs: {
-          'zinc-metrics': ZincMetricsMock,
-        },
-      },
-    });
-
-    expect(wrapper.find('[data-test="zinc-metrics"]').exists()).toBe(true);
-  });
-
-  it('should pass pageType prop as "metrics"', () => {
-    const wrapper = mount(AppMetrics, {
-      global: {
-        stubs: {
-          'zinc-metrics': ZincMetricsMock,
-        },
-      },
-    });
-
-    const zincMetrics = wrapper.findComponent(ZincMetricsMock);
-    expect(zincMetrics.props('pageType')).toBe('metrics');
-  });
-
-  it('should mount without errors', () => {
-    expect(() => {
-      mount(AppMetrics, {
-        global: {
-          stubs: {
-            'zinc-metrics': ZincMetricsMock,
-          },
-        },
-      });
-    }).not.toThrow();
-  });
-
-  it('should have correct component structure', () => {
-    const wrapper = mount(AppMetrics, {
-      global: {
-        stubs: {
-          'zinc-metrics': ZincMetricsMock,
-        },
-      },
-    });
-
-    expect(wrapper.html()).toContain('data-test="zinc-metrics"');
-  });
-});
diff --git a/web/src/views/AppMetrics.vue b/web/src/views/AppMetrics.vue
deleted file mode 100644
index c730cf484d..0000000000
--- a/web/src/views/AppMetrics.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<!-- eslint-disable vue/attribute-hyphenation -->
-<!-- eslint-disable vue/v-on-event-hyphenation -->
-<template>
-  <zinc-metrics data-test="zinc-metrics" pageType="metrics"></zinc-metrics>
-</template>
diff --git a/web/src/views/AppTraces.spec.ts b/web/src/views/AppTraces.spec.ts
deleted file mode 100644
index 05f7141767..0000000000
--- a/web/src/views/AppTraces.spec.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { mount } from '@vue/test-utils';
-import AppTraces from './AppTraces.vue';
-
-// Mock zinc-traces component
-const ZincTracesMock = {
-  name: 'ZincTraces',
-  template: '<div class="zinc-traces-mock"></div>',
-};
-
-describe('AppTraces.vue', () => {
-  it('should render zinc-traces component', () => {
-    const wrapper = mount(AppTraces, {
-      global: {
-        stubs: {
-          'zinc-traces': ZincTracesMock,
-        },
-      },
-    });
-
-    expect(wrapper.find('.zinc-traces-mock').exists()).toBe(true);
-  });
-
-  it('should mount without errors', () => {
-    expect(() => {
-      mount(AppTraces, {
-        global: {
-          stubs: {
-            'zinc-traces': ZincTracesMock,
-          },
-        },
-      });
-    }).not.toThrow();
-  });
-
-  it('should have correct component structure', () => {
-    const wrapper = mount(AppTraces, {
-      global: {
-        stubs: {
-          'zinc-traces': ZincTracesMock,
-        },
-      },
-    });
-
-    expect(wrapper.html()).toContain('zinc-traces-mock');
-  });
-});
diff --git a/web/src/views/AppTraces.vue b/web/src/views/AppTraces.vue
deleted file mode 100644
index c7ee5c8d4b..0000000000
--- a/web/src/views/AppTraces.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<!-- eslint-disable vue/attribute-hyphenation -->
-<!-- eslint-disable vue/v-on-event-hyphenation -->
-<template>
-  <!-- <zinc-logs pageType="logs"></zinc-logs> -->
-  <zinc-traces></zinc-traces>
-</template>
diff --git a/web/src/views/AwsMarketplaceSetup.schema.ts b/web/src/views/AwsMarketplaceSetup.schema.ts
index 4fdc003496..0fc1c14a7e 100644
--- a/web/src/views/AwsMarketplaceSetup.schema.ts
+++ b/web/src/views/AwsMarketplaceSetup.schema.ts
@@ -6,15 +6,9 @@
 //   • Link card  — a single "selectedOrg" select (required; holds the org
 //                  identifier, mirroring OSelect's value-key="identifier").
 //
-// Built via factories so messages stay i18n-driven (pass useI18n's `t`),
-// matching the t()-factory style used by the other migrated schemas.
+// Built via factories so messages stay i18n-driven (pass useI18n's `t`).
 //
-// Field rules:
-//   newOrgName — `!!v || 'Organization name is required'`
-//             → z.string().min(1, t("validation.organizationNameRequired")).
-// selectedOrg was enforced imperatively (a toast) → encoded as min(1).
-//
-// Kept structurally identical to AzureMarketplaceSetup.schema.ts (coupled pair).
+// Structurally identical to AzureMarketplaceSetup.schema.ts (coupled pair).
 
 import { z } from "zod";
 
diff --git a/web/src/views/AwsMarketplaceSetup.vue b/web/src/views/AwsMarketplaceSetup.vue
index 5ee7f1348a..a6a02ee1ec 100644
--- a/web/src/views/AwsMarketplaceSetup.vue
+++ b/web/src/views/AwsMarketplaceSetup.vue
@@ -15,14 +15,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="aws-marketplace-setup min-h-screen bg-(--q-background)">
-    <div class="flex relative-position tw-px-3 tw-pt-2">
+  <div class="aws-marketplace-setup min-h-screen bg-surface-base">
+    <div class="flex relative-position px-3 pt-2">
       <img
         data-test="aws-marketplace-setup-logo"
         class="h-10"
         loading="lazy"
         :src="
-          store?.state?.theme === 'dark'
+          isDark
             ? getImageURL('images/common/openobserve_latest_dark_2.svg')
             : getImageURL('images/common/openobserve_latest_light_2.svg')
         "
@@ -34,7 +34,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <div v-if="state === 'no_token'" class="text-center">
         <OIcon name="warning" style="width: 80px; height: 80px;" />
         <h5 class="mt-3">No Marketplace Token Found</h5>
-        <p class="text-gray-400">
+        <p class="text-text-secondary">
           Please start the registration process from AWS Marketplace.
         </p>
         <OButton
@@ -61,16 +61,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <div v-else-if="state === 'select_org'" class="text-center">
         <OIcon name="cloud" style="width: 60px; height: 60px;" />
         <h4 class="mt-3">Complete AWS Marketplace Setup</h4>
-        <p class="text-gray-400 mb-4">
+        <p class="text-text-secondary mb-4">
           Link your AWS Marketplace subscription to an organization
         </p>
 
         <div class="max-w-100 mx-auto">
           <!-- Create New Org -->
-          <OCard class="rounded-lg transition-all duration-200 hover:shadow-[0_4px_12px_rgba(0,0,0,0.1)] mb-4">
+          <OCard class="rounded-default transition-all duration-200 hover:shadow-[0_4px_12px_rgba(0,0,0,0.1)] mb-4">
             <OCardSection role="body">
               <div class="text-xl font-semibold">Create New Organization</div>
-              <p class="text-gray-400">
+              <p class="text-text-secondary">
                 Create a new organization with AWS Marketplace billing
               </p>
               <OForm
@@ -102,11 +102,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- Link to Existing Org (only show orgs without billing) -->
           <OCard
             v-if="eligibleOrganizations.length > 0"
-            class="rounded-lg transition-all duration-200 hover:shadow-[0_4px_12px_rgba(0,0,0,0.1)]"
+            class="rounded-default transition-all duration-200 hover:shadow-[0_4px_12px_rgba(0,0,0,0.1)]"
           >
             <OCardSection role="body">
               <div class="text-xl font-semibold">Link to Existing Organization</div>
-              <p class="text-gray-400">
+              <p class="text-text-secondary">
                 Link AWS billing to an existing organization
               </p>
               <OForm
@@ -142,7 +142,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <div v-else-if="state === 'processing'" class="text-center">
         <OSpinner variant="dots" size="xl" />
         <h5 class="mt-3">Setting up your subscription...</h5>
-        <p class="text-gray-400">Please wait while we configure your account.</p>
+        <p class="text-text-secondary">Please wait while we configure your account.</p>
       </div>
 
       <!-- Pending Activation State -->
@@ -151,7 +151,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <div class="flex justify-center">
           <OSpinner size="xl" />
         </div>
-        <p class="text-gray-400 mt-4">
+        <p class="text-text-secondary mt-4">
           Please wait while we confirm activation with AWS and set up your account.
         </p>
       </div>
@@ -160,7 +160,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <div v-else-if="state === 'success'" class="text-center">
         <OIcon name="check-circle" style="width: 80px; height: 80px;" />
         <h4 class="mt-3">Subscription Activated!</h4>
-        <p class="text-gray-400">
+        <p class="text-text-secondary">
           Your AWS Marketplace subscription is now active.
         </p>
         <OButton
@@ -175,7 +175,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <div v-else-if="state === 'payment_failed'" class="text-center">
         <OIcon name="error" style="width: 80px; height: 80px;" />
         <h5 class="mt-3">Payment Failed</h5>
-        <p class="text-gray-400">
+        <p class="text-text-secondary">
           There was an issue with your AWS Marketplace payment. Please check
           your AWS account or contact AWS support.
         </p>
@@ -197,6 +197,7 @@ import OCard from "@/lib/core/Card/OCard.vue";
 import OCardSection from "@/lib/core/Card/OCardSection.vue";
 import { useRouter } from "vue-router";
 import { useStore } from "vuex";
+import { useTheme } from "@/composables/useTheme";
 import { useI18n } from "vue-i18n";
 import { getImageURL, useLocalOrganization } from "@/utils/zincutils";
 import awsMarketplace from "@/services/awsMarketplace";
@@ -234,6 +235,7 @@ export default defineComponent({
 },
   setup() {
     const store = useStore();
+    const { isDark } = useTheme();
     const router = useRouter();
     const { t } = useI18n();
 
@@ -418,6 +420,7 @@ export default defineComponent({
 
     return {
       store,
+      isDark,
       state,
       errorMessage,
       eligibleOrganizations,
diff --git a/web/src/views/AzureMarketplaceSetup.schema.ts b/web/src/views/AzureMarketplaceSetup.schema.ts
index 28fd13c32f..9fa582450d 100644
--- a/web/src/views/AzureMarketplaceSetup.schema.ts
+++ b/web/src/views/AzureMarketplaceSetup.schema.ts
@@ -6,15 +6,8 @@
 //   • Link card  — a single "selectedOrg" select (required; holds the org
 //                  identifier, mirroring OSelect's value-key="identifier").
 //
-// Built via factories so messages stay i18n-driven (pass useI18n's `t`),
-// matching the t()-factory style used by the other migrated schemas.
-//
-// Field rules:
-//   newOrgName — `!!v || 'Organization name is required'`
-//             → z.string().min(1, t("validation.organizationNameRequired")).
-// selectedOrg was enforced imperatively (a toast) → encoded as min(1).
-//
-// Kept structurally identical to AwsMarketplaceSetup.schema.ts (coupled pair).
+// Built via factories so messages stay i18n-driven (pass useI18n's `t`).
+// Coupled with AwsMarketplaceSetup.schema.ts — keep the two structurally aligned.
 
 import { z } from "zod";
 
diff --git a/web/src/views/AzureMarketplaceSetup.vue b/web/src/views/AzureMarketplaceSetup.vue
index 3320cb3856..73dd19b4e6 100644
--- a/web/src/views/AzureMarketplaceSetup.vue
+++ b/web/src/views/AzureMarketplaceSetup.vue
@@ -15,14 +15,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="azure-marketplace-setup min-h-screen bg-(--q-background)">
-    <div class="flex relative-position tw-px-3 tw-pt-2">
+  <div class="azure-marketplace-setup min-h-screen bg-surface-base">
+    <div class="flex relative-position px-3 pt-2">
       <img
         data-test="azure-marketplace-setup-logo"
         class="h-10"
         loading="lazy"
         :src="
-          store?.state?.theme === 'dark'
+          isDark
             ? getImageURL('images/common/openobserve_latest_dark_2.svg')
             : getImageURL('images/common/openobserve_latest_light_2.svg')
         "
@@ -34,7 +34,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <div v-if="state === 'no_token'" class="text-center">
         <OIcon name="warning" style="width: 80px; height: 80px;" />
         <h5 class="mt-3">No Marketplace Token Found</h5>
-        <p class="text-gray-400">
+        <p class="text-text-secondary">
           Please start the registration process from Azure Marketplace.
         </p>
         <OButton
@@ -61,16 +61,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <div v-else-if="state === 'select_org'" class="text-center">
         <OIcon name="cloud" style="width: 60px; height: 60px;" />
         <h4 class="mt-3">Complete Azure Marketplace Setup</h4>
-        <p class="text-gray-400 mb-4">
+        <p class="text-text-secondary mb-4">
           Link your Azure Marketplace subscription to an organization
         </p>
 
         <div class="max-w-100 mx-auto">
           <!-- Create New Org -->
-          <OCard class="rounded-lg transition-all duration-200 hover:shadow-[0_4px_12px_rgba(0,0,0,0.1)] mb-4">
+          <OCard class="rounded-default transition-all duration-200 hover:shadow-[0_4px_12px_rgba(0,0,0,0.1)] mb-4">
             <OCardSection role="body">
               <div class="text-xl font-semibold">Create New Organization</div>
-              <p class="text-gray-400">
+              <p class="text-text-secondary">
                 Create a new organization with Azure Marketplace billing
               </p>
               <OForm
@@ -102,11 +102,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- Link to Existing Org (only show orgs without billing) -->
           <OCard
             v-if="eligibleOrganizations.length > 0"
-            class="rounded-lg transition-all duration-200 hover:shadow-[0_4px_12px_rgba(0,0,0,0.1)]"
+            class="rounded-default transition-all duration-200 hover:shadow-[0_4px_12px_rgba(0,0,0,0.1)]"
           >
             <OCardSection role="body">
               <div class="text-xl font-semibold">Link to Existing Organization</div>
-              <p class="text-gray-400">
+              <p class="text-text-secondary">
                 Link Azure billing to an existing organization
               </p>
               <OForm
@@ -142,7 +142,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <div v-else-if="state === 'processing'" class="text-center">
         <OSpinner variant="dots" size="xl" />
         <h5 class="mt-3">Setting up your subscription...</h5>
-        <p class="text-gray-400">Please wait while we configure your account.</p>
+        <p class="text-text-secondary">Please wait while we configure your account.</p>
       </div>
 
 
@@ -150,7 +150,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <div v-else-if="state === 'success'" class="text-center">
         <OIcon name="check-circle" style="width: 80px; height: 80px;" />
         <h4 class="mt-3">Subscription Activated!</h4>
-        <p class="text-gray-400">
+        <p class="text-text-secondary">
           Your Azure Marketplace subscription is now active.
         </p>
         <OButton
@@ -165,7 +165,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <div v-else-if="state === 'payment_failed'" class="text-center">
         <OIcon name="error" style="width: 80px; height: 80px;" />
         <h5 class="mt-3">Payment Failed</h5>
-        <p class="text-gray-400">
+        <p class="text-text-secondary">
           There was an issue with activating Azure subscription. Please check
           your Azure account or contact support.
         </p>
@@ -187,6 +187,7 @@ import OCard from "@/lib/core/Card/OCard.vue";
 import OCardSection from "@/lib/core/Card/OCardSection.vue";
 import { useRouter } from "vue-router";
 import { useStore } from "vuex";
+import { useTheme } from "@/composables/useTheme";
 import { useI18n } from "vue-i18n";
 import { getImageURL, useLocalOrganization } from "@/utils/zincutils";
 import azureMarketplace from "@/services/azureMarketplace";
@@ -223,6 +224,7 @@ export default defineComponent({
 },
   setup() {
     const store = useStore();
+    const { isDark } = useTheme();
     const router = useRouter();
     const { t } = useI18n();
 
@@ -342,6 +344,7 @@ export default defineComponent({
 
     return {
       store,
+      isDark,
       state,
       errorMessage,
       eligibleOrganizations,
diff --git a/web/src/views/CorrelationDemo.spec.ts b/web/src/views/CorrelationDemo.spec.ts
deleted file mode 100644
index 3d34053c74..0000000000
--- a/web/src/views/CorrelationDemo.spec.ts
+++ /dev/null
@@ -1,410 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { mount } from "@vue/test-utils";
-import { createI18n } from "vue-i18n";
-import { nextTick } from "vue";
-import CorrelationDemo from "./CorrelationDemo.vue";
-import store from "@/test/unit/helpers/store";
-
-
-// ---------------------------------------------------------------------------
-// Stub heavy child component
-// ---------------------------------------------------------------------------
-vi.mock("@/components/TelemetryCorrelationPanel.vue", () => ({
-  default: {
-    name: "TelemetryCorrelationPanel",
-    props: ["show", "context", "sourceType", "timeWindowMinutes"],
-    emits: ["close"],
-    template:
-      "<div data-test='telemetry-correlation-panel' :data-show='String(show)' :data-source-type='sourceType' :data-time-window='timeWindowMinutes'></div>",
-  },
-}));
-
-const i18n = createI18n({
-  locale: "en",
-  legacy: false,
-  messages: { en: {} },
-});
-
-// ---------------------------------------------------------------------------
-// ODialog stub — replaces the migrated query preview dialog (q-dialog -> ODialog)
-// ---------------------------------------------------------------------------
-const ODialogStub = {
-  name: "ODialog",
-  inheritAttrs: false,
-  props: [
-    "open",
-    "size",
-    "title",
-    "subTitle",
-    "persistent",
-    "showClose",
-    "width",
-    "primaryButtonLabel",
-    "secondaryButtonLabel",
-    "neutralButtonLabel",
-    "primaryButtonVariant",
-    "secondaryButtonVariant",
-    "neutralButtonVariant",
-    "primaryButtonDisabled",
-    "secondaryButtonDisabled",
-    "neutralButtonDisabled",
-    "primaryButtonLoading",
-    "secondaryButtonLoading",
-    "neutralButtonLoading",
-  ],
-  emits: ["update:open", "click:primary", "click:secondary", "click:neutral"],
-  template: `
-    <div
-      data-test="o-dialog-stub"
-      :data-open="String(open)"
-      :data-size="size"
-      :data-title="title"
-      :data-primary-label="primaryButtonLabel"
-    >
-      <slot name="header" />
-      <slot />
-      <slot name="footer" />
-    </div>
-  `,
-};
-
-describe("CorrelationDemo.vue", () => {
-  let wrapper: any;
-
-  const createWrapper = () => {
-    return mount(CorrelationDemo, {
-      global: {
-        plugins: [i18n, store],
-        stubs: {
-          ODialog: ODialogStub,
-        },
-      },
-    });
-  };
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  afterEach(() => {
-    if (wrapper) {
-      wrapper.unmount();
-    }
-  });
-
-  // -------------------------------------------------------------------------
-  // Mounting
-  // -------------------------------------------------------------------------
-  describe("Component Mounting", () => {
-    it("should mount successfully", () => {
-      wrapper = createWrapper();
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it("should render three sample log lines", () => {
-      wrapper = createWrapper();
-      const logLines = wrapper.findAll(".log-line");
-      expect(logLines).toHaveLength(3);
-    });
-
-    it("should render the instructions card with How to Use heading", () => {
-      wrapper = createWrapper();
-      expect(wrapper.text()).toContain("How to Use");
-    });
-
-    it("should render the TelemetryCorrelationPanel child component", () => {
-      wrapper = createWrapper();
-      const panel = wrapper.find("[data-test='telemetry-correlation-panel']");
-      expect(panel.exists()).toBe(true);
-    });
-  });
-
-  // -------------------------------------------------------------------------
-  // Initial state
-  // -------------------------------------------------------------------------
-  describe("Initial state", () => {
-    it("should initialise showCorrelation to false", () => {
-      wrapper = createWrapper();
-      expect(wrapper.vm.showCorrelation).toBe(false);
-    });
-
-    it("should initialise selectedContext to null", () => {
-      wrapper = createWrapper();
-      expect(wrapper.vm.selectedContext).toBeNull();
-    });
-
-    it("should initialise showQueryDialog to false", () => {
-      wrapper = createWrapper();
-      expect(wrapper.vm.showQueryDialog).toBe(false);
-    });
-
-    it("should initialise queryPreview with empty type and sql", () => {
-      wrapper = createWrapper();
-      expect(wrapper.vm.queryPreview).toEqual({ type: "", sql: "" });
-    });
-
-    it("should initialise isServiceStreamsEnabled to true", () => {
-      wrapper = createWrapper();
-      expect(wrapper.vm.isServiceStreamsEnabled).toBe(true);
-    });
-  });
-
-  // -------------------------------------------------------------------------
-  // Conditional rendering — fallback card visibility
-  // -------------------------------------------------------------------------
-  describe("Fallback card conditional rendering", () => {
-    it("should show fallback card when showCorrelation is false", () => {
-      wrapper = createWrapper();
-      expect(wrapper.text()).toContain(
-        "Click a log line to see related telemetry",
-      );
-    });
-
-    it("should hide fallback card when showCorrelation is true", async () => {
-      wrapper = createWrapper();
-      wrapper.vm.showCorrelation = true;
-      await nextTick();
-      expect(wrapper.text()).not.toContain(
-        "Click a log line to see related telemetry",
-      );
-    });
-  });
-
-  // -------------------------------------------------------------------------
-  // Service Streams status badge
-  // -------------------------------------------------------------------------
-  describe("Service Streams status badge", () => {
-    it("should show enabled badge when isServiceStreamsEnabled is true", () => {
-      wrapper = createWrapper();
-      expect(wrapper.text()).toContain("Service Streams: Enabled");
-    });
-
-    it("should show disabled badge when isServiceStreamsEnabled is false", async () => {
-      wrapper = createWrapper();
-      wrapper.vm.isServiceStreamsEnabled = false;
-      await nextTick();
-      expect(wrapper.text()).toContain("Service Streams: Disabled");
-    });
-  });
-
-  // -------------------------------------------------------------------------
-  // selectLog method
-  // -------------------------------------------------------------------------
-  describe("selectLog method", () => {
-    it("should set selectedContext with timestamp and fields from log", () => {
-      wrapper = createWrapper();
-      const log = {
-        _timestamp: 1234567890,
-        "service.name": "demo-service",
-        message: "hello",
-      };
-      wrapper.vm.selectLog(log);
-      expect(wrapper.vm.selectedContext).toEqual({
-        timestamp: 1234567890,
-        fields: log,
-      });
-    });
-
-    it("should set showCorrelation to true", () => {
-      wrapper = createWrapper();
-      expect(wrapper.vm.showCorrelation).toBe(false);
-      wrapper.vm.selectLog({ _timestamp: 1, "service.name": "x" });
-      expect(wrapper.vm.showCorrelation).toBe(true);
-    });
-
-    it("should be triggered when a log line is clicked", async () => {
-      wrapper = createWrapper();
-      const firstLogLine = wrapper.findAll(".log-line")[0];
-      await firstLogLine.trigger("click");
-      expect(wrapper.vm.showCorrelation).toBe(true);
-      expect(wrapper.vm.selectedContext).not.toBeNull();
-      expect(wrapper.vm.selectedContext.fields["service.name"]).toBe(
-        "checkout-api",
-      );
-    });
-
-    it("should populate context fields when second log line is clicked", async () => {
-      wrapper = createWrapper();
-      const secondLogLine = wrapper.findAll(".log-line")[1];
-      await secondLogLine.trigger("click");
-      expect(wrapper.vm.selectedContext.fields["service.name"]).toBe(
-        "inventory-service",
-      );
-      expect(wrapper.vm.selectedContext.fields["k8s.cluster"]).toBe(
-        "prod-us-east",
-      );
-    });
-
-    it("should populate context fields when third log line is clicked", async () => {
-      wrapper = createWrapper();
-      const thirdLogLine = wrapper.findAll(".log-line")[2];
-      await thirdLogLine.trigger("click");
-      expect(wrapper.vm.selectedContext.fields["service.name"]).toBe(
-        "user-auth",
-      );
-      expect(wrapper.vm.selectedContext.fields.region).toBe("us-west-2");
-    });
-
-    it("should overwrite previous selectedContext on subsequent calls", () => {
-      wrapper = createWrapper();
-      wrapper.vm.selectLog({ _timestamp: 1, "service.name": "a" });
-      const firstContext = wrapper.vm.selectedContext;
-      wrapper.vm.selectLog({ _timestamp: 2, "service.name": "b" });
-      expect(wrapper.vm.selectedContext).not.toEqual(firstContext);
-      expect(wrapper.vm.selectedContext.timestamp).toBe(2);
-    });
-  });
-
-  // -------------------------------------------------------------------------
-  // TelemetryCorrelationPanel wiring
-  // -------------------------------------------------------------------------
-  describe("TelemetryCorrelationPanel wiring", () => {
-    it("should pass showCorrelation to panel's show prop", async () => {
-      wrapper = createWrapper();
-      wrapper.vm.showCorrelation = true;
-      await nextTick();
-      const panel = wrapper.find("[data-test='telemetry-correlation-panel']");
-      expect(panel.attributes("data-show")).toBe("true");
-    });
-
-    it("should pass sourceType='logs' to the panel", () => {
-      wrapper = createWrapper();
-      const panel = wrapper.find("[data-test='telemetry-correlation-panel']");
-      expect(panel.attributes("data-source-type")).toBe("logs");
-    });
-
-    it("should pass timeWindowMinutes=5 to the panel", () => {
-      wrapper = createWrapper();
-      const panel = wrapper.find("[data-test='telemetry-correlation-panel']");
-      expect(panel.attributes("data-time-window")).toBe("5");
-    });
-
-    it("should set showCorrelation to false when panel emits close", async () => {
-      wrapper = createWrapper();
-      wrapper.vm.showCorrelation = true;
-      await nextTick();
-
-      const panel = wrapper.findComponent({ name: "TelemetryCorrelationPanel" });
-      panel.vm.$emit("close");
-      await nextTick();
-
-      expect(wrapper.vm.showCorrelation).toBe(false);
-    });
-  });
-
-  // -------------------------------------------------------------------------
-  // ODialog wiring (query preview dialog)
-  // -------------------------------------------------------------------------
-  describe("ODialog wiring (query preview dialog)", () => {
-    it("should render the ODialog stub", () => {
-      wrapper = createWrapper();
-      const dialog = wrapper.find("[data-test='o-dialog-stub']");
-      expect(dialog.exists()).toBe(true);
-    });
-
-    it("should pass size='md' to ODialog", () => {
-      wrapper = createWrapper();
-      const dialog = wrapper.find("[data-test='o-dialog-stub']");
-      expect(dialog.attributes("data-size")).toBe("md");
-    });
-
-    it("should pass title='Generated Query' to ODialog", () => {
-      wrapper = createWrapper();
-      const dialog = wrapper.find("[data-test='o-dialog-stub']");
-      expect(dialog.attributes("data-title")).toBe("Generated Query");
-    });
-
-    it("should pass primaryButtonLabel='Close' to ODialog", () => {
-      wrapper = createWrapper();
-      const dialog = wrapper.find("[data-test='o-dialog-stub']");
-      expect(dialog.attributes("data-primary-label")).toBe("Close");
-    });
-
-    it("should default the ODialog open state to false", () => {
-      wrapper = createWrapper();
-      const dialog = wrapper.find("[data-test='o-dialog-stub']");
-      expect(dialog.attributes("data-open")).toBe("false");
-    });
-
-    it("should open the ODialog when showQueryDialog becomes true", async () => {
-      wrapper = createWrapper();
-      wrapper.vm.showQueryDialog = true;
-      await nextTick();
-      const dialog = wrapper.find("[data-test='o-dialog-stub']");
-      expect(dialog.attributes("data-open")).toBe("true");
-    });
-
-    it("should close ODialog when click:primary is emitted", async () => {
-      wrapper = createWrapper();
-      wrapper.vm.showQueryDialog = true;
-      await nextTick();
-
-      const dialog = wrapper.findComponent({ name: "ODialog" });
-      dialog.vm.$emit("click:primary");
-      await nextTick();
-
-      expect(wrapper.vm.showQueryDialog).toBe(false);
-    });
-
-    it("should render query preview type in dialog body when set", async () => {
-      wrapper = createWrapper();
-      wrapper.vm.queryPreview = { type: "traces", sql: "SELECT * FROM traces" };
-      wrapper.vm.showQueryDialog = true;
-      await nextTick();
-
-      const dialog = wrapper.find("[data-test='o-dialog-stub']");
-      expect(dialog.text()).toContain("traces");
-      expect(dialog.text()).toContain("SELECT * FROM traces");
-    });
-  });
-
-  // -------------------------------------------------------------------------
-  // Prop reactions on the correlation panel
-  // -------------------------------------------------------------------------
-  describe("Reactive prop forwarding to TelemetryCorrelationPanel", () => {
-    it("should forward updated context after selectLog", async () => {
-      wrapper = createWrapper();
-      wrapper.vm.selectLog({
-        _timestamp: 999,
-        "service.name": "reactive-service",
-      });
-      await nextTick();
-
-      const panel = wrapper.findComponent({ name: "TelemetryCorrelationPanel" });
-      expect(panel.props("context")).toEqual({
-        timestamp: 999,
-        fields: {
-          _timestamp: 999,
-          "service.name": "reactive-service",
-        },
-      });
-      expect(panel.props("show")).toBe(true);
-    });
-
-    it("should hide panel show flag when showCorrelation is reset to false", async () => {
-      wrapper = createWrapper();
-      wrapper.vm.showCorrelation = true;
-      await nextTick();
-      wrapper.vm.showCorrelation = false;
-      await nextTick();
-
-      const panel = wrapper.find("[data-test='telemetry-correlation-panel']");
-      expect(panel.attributes("data-show")).toBe("false");
-    });
-  });
-});
diff --git a/web/src/views/CorrelationDemo.vue b/web/src/views/CorrelationDemo.vue
deleted file mode 100644
index f11a863fc3..0000000000
--- a/web/src/views/CorrelationDemo.vue
+++ /dev/null
@@ -1,207 +0,0 @@
-<template>
-  <div class="rounded-md p-3">
-    <div class="flex gap-3">
-      <!-- Left: Simulated Log Viewer -->
-      <div class="w-2/3">
-        <OCard>
-          <OCardSection role="header">
-            <div class="text-xl font-semibold">Sample Logs (Click to See Correlation)</div>
-          </OCardSection>
-
-          <OSeparator />
-
-          <OCardSection role="body">
-            <div class="log-viewer flex flex-col gap-3">
-              <!-- Sample Log 1 -->
-              <div class="log-line group p-4 bg-(--q-dark-page,#f5f5f5) rounded-lg border-2 border-transparent cursor-pointer transition-all duration-200 relative hover:border-(--q-primary) hover:bg-(--q-dark-page,#eeeeee)" @click="selectLog(sampleLog1)">
-                <div class="log-timestamp font-mono text-xs text-[var(--q-primary)] mb-2">2025-12-02 10:23:45</div>
-                <div class="log-content flex flex-col gap-1 text-[13px]">
-                  <div><strong>service.name:</strong> checkout-api</div>
-                  <div><strong>k8s.cluster:</strong> prod-us-west</div>
-                  <div><strong>k8s.deployment.name:</strong> checkout-v2</div>
-                  <div>
-                    <strong>message:</strong> Payment processing failed -
-                    timeout
-                  </div>
-                </div>
-                <OIcon name="link" size="sm" class="absolute top-4 right-4 opacity-0 transition-opacity duration-200 text-[var(--q-primary)] group-hover:opacity-100" />
-              </div>
-
-              <!-- Sample Log 2 -->
-              <div class="log-line group p-4 bg-(--q-dark-page,#f5f5f5) rounded-lg border-2 border-transparent cursor-pointer transition-all duration-200 relative hover:border-(--q-primary) hover:bg-(--q-dark-page,#eeeeee)" @click="selectLog(sampleLog2)">
-                <div class="log-timestamp font-mono text-xs text-[var(--q-primary)] mb-2">2025-12-02 10:24:12</div>
-                <div class="log-content flex flex-col gap-1 text-[13px]">
-                  <div><strong>service.name:</strong> inventory-service</div>
-                  <div><strong>k8s.cluster:</strong> prod-us-east</div>
-                  <div><strong>environment:</strong> production</div>
-                  <div>
-                    <strong>message:</strong> Database connection timeout
-                  </div>
-                </div>
-                <OIcon name="link" size="sm" class="absolute top-4 right-4 opacity-0 transition-opacity duration-200 text-[var(--q-primary)] group-hover:opacity-100" />
-              </div>
-
-              <!-- Sample Log 3 -->
-              <div class="log-line group p-4 bg-(--q-dark-page,#f5f5f5) rounded-lg border-2 border-transparent cursor-pointer transition-all duration-200 relative hover:border-(--q-primary) hover:bg-(--q-dark-page,#eeeeee)" @click="selectLog(sampleLog3)">
-                <div class="log-timestamp font-mono text-xs text-[var(--q-primary)] mb-2">2025-12-02 10:25:30</div>
-                <div class="log-content flex flex-col gap-1 text-[13px]">
-                  <div><strong>service.name:</strong> user-auth</div>
-                  <div><strong>k8s.cluster:</strong> prod-us-west</div>
-                  <div><strong>region:</strong> us-west-2</div>
-                  <div>
-                    <strong>message:</strong> Authentication successful for
-                    user_123
-                  </div>
-                </div>
-                <OIcon name="link" size="sm" class="absolute top-4 right-4 opacity-0 transition-opacity duration-200 text-[var(--q-primary)] group-hover:opacity-100" />
-              </div>
-            </div>
-          </OCardSection>
-        </OCard>
-
-        <!-- Instructions -->
-        <OCard class="mt-4">
-          <OCardSection role="body">
-            <div class="text-xl font-semibold">How to Use</div>
-            <ol class="m-2">
-              <li>Click any log line above to see related telemetry</li>
-              <li>The correlation panel will appear on the right</li>
-              <li>View the extracted service dimensions</li>
-              <li>See which traces and metrics are related</li>
-              <li>Click "View" to navigate (demo mode shows query)</li>
-            </ol>
-
-            <OSeparator class="my-4" />
-
-            <div class="text-sm font-medium mb-2">Current Status:</div>
-            <div>
-              <OTag v-if="isServiceStreamsEnabled" type="featureStatus" value="enabled">
-                Service Streams: Enabled
-              </OTag>
-              <OTag v-else type="featureStatus" value="disabled">
-                Service Streams: Disabled
-              </OTag>
-            </div>
-            <div class="mt-1 text-xs text-gray-400">
-              Note: This is a demo using simulated data. In production,
-              correlation will use real service_streams data.
-            </div>
-          </OCardSection>
-        </OCard>
-      </div>
-
-      <!-- Right: Correlation Panel -->
-      <div class="w-1/3">
-        <TelemetryCorrelationPanel
-          :show="showCorrelation"
-          :context="selectedContext"
-          source-type="logs"
-          :time-window-minutes="5"
-          @close="showCorrelation = false"
-        />
-
-        <!-- Fallback when panel is closed -->
-        <OCard v-if="!showCorrelation">
-          <OCardSection class="text-center p-6">
-            <OIcon name="info" size="lg" />
-            <div class="text-gray-400 mt-3">
-              Click a log line to see related telemetry
-            </div>
-          </OCardSection>
-        </OCard>
-      </div>
-    </div>
-
-    <!-- Query Preview Dialog -->
-    <ODialog
-      data-test="correlation-demo-query-dialog"
-      v-model:open="showQueryDialog"
-      size="md"
-      title="Generated Query"
-      primary-button-label="Close"
-      @click:primary="showQueryDialog = false"
-    >
-      <div>
-        <div class="text-xs text-gray-400 mb-2">
-          This query would be executed to fetch related
-          {{ queryPreview.type }}:
-        </div>
-        <pre class="query-preview bg-(--q-dark-page,#f5f5f5) p-4 rounded font-mono text-xs overflow-x-auto whitespace-pre-wrap wrap-break-word">{{ queryPreview.sql }}</pre>
-      </div>
-    </ODialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-import TelemetryCorrelationPanel from "@/components/TelemetryCorrelationPanel.vue";
-import type { TelemetryContext } from "@/utils/telemetryCorrelation";
-import ODialog from "@/lib/overlay/Dialog/ODialog.vue";
-import OIcon from "@/lib/core/Icon/OIcon.vue";
-import OTag from "@/lib/core/Badge/OTag.vue";
-import OSeparator from "@/lib/core/Separator/OSeparator.vue";
-import OCard from "@/lib/core/Card/OCard.vue";
-import OCardSection from "@/lib/core/Card/OCardSection.vue";
-
-// Demo state
-const showCorrelation = ref(false);
-const selectedContext = ref<TelemetryContext | null>(null);
-const showQueryDialog = ref(false);
-const queryPreview = ref({ type: "", sql: "" });
-const isServiceStreamsEnabled = ref(true); // Simulated
-
-// Sample log data with realistic semantic fields
-const sampleLog1 = {
-  _timestamp: Date.now() * 1000, // Microseconds
-  "service.name": "checkout-api",
-  "k8s.cluster": "prod-us-west",
-  "k8s.deployment.name": "checkout-v2",
-  environment: "production",
-  level: "ERROR",
-  message: "Payment processing failed - timeout",
-};
-
-const sampleLog2 = {
-  _timestamp: Date.now() * 1000,
-  "service.name": "inventory-service",
-  "k8s.cluster": "prod-us-east",
-  "k8s.namespace": "backend",
-  environment: "production",
-  level: "WARN",
-  message: "Database connection timeout",
-};
-
-const sampleLog3 = {
-  _timestamp: Date.now() * 1000,
-  "service.name": "user-auth",
-  "k8s.cluster": "prod-us-west",
-  region: "us-west-2",
-  environment: "production",
-  level: "INFO",
-  message: "Authentication successful for user_123",
-};
-
-/**
- * Handle log selection
- */
-function selectLog(log: any) {
-  selectedContext.value = {
-    timestamp: log._timestamp,
-    fields: log,
-  };
-  showCorrelation.value = true;
-}
-</script>
-
-<style>
-.log-line .log-content div {
-  display: flex;
-  gap: 8px;
-}
-
-.log-line .log-content strong {
-  min-width: 150px;
-  color: var(--q-text-secondary, #757575);
-}
-
-</style>
diff --git a/web/src/views/Dashboards/DashboardJsonEditor.vue b/web/src/views/Dashboards/DashboardJsonEditor.vue
index e5bed1ff4c..7959b18b81 100644
--- a/web/src/views/Dashboards/DashboardJsonEditor.vue
+++ b/web/src/views/Dashboards/DashboardJsonEditor.vue
@@ -1,5 +1,6 @@
 <template>
   <ODrawer data-test="dashboard-json-editor-drawer"
+    bleed
     :open="open"
     :width="70"
     persistent
@@ -11,7 +12,7 @@
     @click:secondary="$emit('update:open', false)"
     @click:primary="saveChanges()"
   >
-  <div data-test="dashboard-json-editor-container" class="w-[70vw] flex flex-col h-[calc(100vh-116px)]" :class="store.state.theme === 'dark' ? 'bg-(--o2-primary-background)' : 'bg-white'">
+  <div data-test="dashboard-json-editor-container" class="w-[70vw] flex flex-col h-[calc(100vh-116px)] bg-surface-base">
     <!-- Monaco editor fills remaining space; flex-1 + min-h-0 lets it expand without overflow -->
     <div class="flex-1 min-h-0">
       <query-editor
@@ -30,7 +31,7 @@
     <div
       v-if="validationErrors.length > 0"
       data-test="dashboard-json-editor-validation-errors"
-      class="p-3 text-red-500 max-h-[200px] overflow-y-auto"
+      class="p-3 text-status-error-text max-h-50 overflow-y-auto"
     >
       <div class="font-bold mb-2">{{ t('dashboard.dashboardJsonEditor.pleaseFixIssues') }}</div>
       <ul class="ml-3">
diff --git a/web/src/views/Dashboards/DashboardSettings.spec.ts b/web/src/views/Dashboards/DashboardSettings.spec.ts
index bfb1fc55e4..0f6537ba52 100644
--- a/web/src/views/Dashboards/DashboardSettings.spec.ts
+++ b/web/src/views/Dashboards/DashboardSettings.spec.ts
@@ -197,7 +197,9 @@ describe("DashboardSettings.vue", () => {
 
       const mainContainer = wrapper.find('[data-test="dashboard-settings-main-container"]');
       expect(mainContainer.exists()).toBe(true);
-      expect(mainContainer.classes()).toContain("bg-white");
+      // Theme is handled by design tokens; container markup is theme-independent.
+      expect(mainContainer.classes()).toContain("[min-height:inherit]");
+      expect(mainContainer.classes()).toContain("h-full");
       expect(mainContainer.classes()).not.toContain("dark-mode");
     });
 
@@ -207,7 +209,9 @@ describe("DashboardSettings.vue", () => {
 
       const mainContainer = wrapper.find('[data-test="dashboard-settings-main-container"]');
       expect(mainContainer.exists()).toBe(true);
-      expect(mainContainer.classes()).toContain("dark-mode");
+      // Theme is handled by design tokens; container markup is identical in both themes.
+      expect(mainContainer.classes()).toContain("[min-height:inherit]");
+      expect(mainContainer.classes()).toContain("h-full");
       expect(mainContainer.classes()).not.toContain("bg-white");
     });
 
@@ -477,8 +481,9 @@ describe("DashboardSettings.vue", () => {
 
       const mainContainer = wrapper.find('[data-test="dashboard-settings-main-container"]');
       expect(mainContainer.exists()).toBe(true);
-      // Should default to light theme behavior when theme is undefined
-      expect(mainContainer.classes()).toContain("bg-white");
+      // Container markup is theme-independent; renders regardless of theme state.
+      expect(mainContainer.classes()).toContain("[min-height:inherit]");
+      expect(mainContainer.classes()).toContain("h-full");
     });
 
     it("should handle null theme state", () => {
@@ -490,8 +495,9 @@ describe("DashboardSettings.vue", () => {
 
       const mainContainer = wrapper.find('[data-test="dashboard-settings-main-container"]');
       expect(mainContainer.exists()).toBe(true);
-      // Should default to light theme behavior when theme is null
-      expect(mainContainer.classes()).toContain("bg-white");
+      // Container markup is theme-independent; renders regardless of theme state.
+      expect(mainContainer.classes()).toContain("[min-height:inherit]");
+      expect(mainContainer.classes()).toContain("h-full");
     });
 
     it("should handle empty templates array", () => {
diff --git a/web/src/views/Dashboards/DashboardSettings.vue b/web/src/views/Dashboards/DashboardSettings.vue
index 051e3f0464..b119a347de 100644
--- a/web/src/views/Dashboards/DashboardSettings.vue
+++ b/web/src/views/Dashboards/DashboardSettings.vue
@@ -16,6 +16,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <ODrawer data-test="dashboard-settings-drawer"
+    bleed
     :open="open"
     :width="74"
     :title="t('dashboard.setting')"
@@ -23,19 +24,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   >
   <div
     data-test="dashboard-settings-main-container"
-    class="p-0"
-    :class="store.state.theme == 'dark' ? 'dark-mode bg-surface-panel' : 'bg-white'"
-    style="min-height: inherit; height: 100%"
+    class="p-0 [min-height:inherit] h-full"
   >
 
-    <OSplitter
+    <OSplitter class="h-full"
       v-model="splitterModel"
       unit="px"
-      style="height: 100%"
       disabled
     >
       <template v-slot:before>
-        <div class="functions-tabs" style="width: 100%">
+        <div class="functions-tabs w-full">
           <OTabs
             v-model="activeTab"
             orientation="vertical"
@@ -146,35 +144,30 @@ export default defineComponent({
 });
 </script>
 
-<style>
-.functions-tabs .o-tabs--vertical .o-tab__content.tab_content .o-tab__icon + .o-tab__label {
+<style scoped>
+/* keep(lib-override:o2-tabs.o2-splitter): vertical-tab label/active styling, the
+   splitter before-pane divider, and full-height tab panels — all target O2
+   component internals reached via :deep(). */
+.functions-tabs :deep(.o-tabs--vertical .o-tab__content.tab_content .o-tab__icon + .o-tab__label) {
   padding-left: 0.875rem;
   font-weight: 600;
 }
 
-.functions-tabs .o-tabs--vertical .o-tab--active {
-  color: var(--o2-tab-text-color);
-  background-color: var(--o2-tab-bg);
+.functions-tabs :deep(.o-tabs--vertical .o-tab--active) {
+  color: var(--color-tab-text-color);
+  background-color: var(--color-theme-tab-bg);
 }
 
-.o-splitter__before {
-  border-right: 1px solid var(--o2-border);
-}
-
-.dark-mode .o-splitter__before {
-  border-right-color: rgba(255, 255, 255, 0.12);
-}
-
-.o-splitter__separator {
-  display: none !important;
+:deep(.o-splitter__before) {
+  border-right: 1px solid var(--color-border-default);
 }
 
 /* Let the settings tab content fill the splitter's full height so panels with a
    sticky footer (e.g. Add Variable) can pin it to the bottom instead of leaving
    dead space when the form is shorter than the drawer. */
 .settings-content-scroll,
-.settings-content-scroll > .o-tab-panels,
-.settings-content-scroll > .o-tab-panels > .o-tab-panel {
+.settings-content-scroll > :deep(.o-tab-panels),
+.settings-content-scroll > :deep(.o-tab-panels > .o-tab-panel) {
   height: 100%;
 }
 </style>
diff --git a/web/src/views/Dashboards/Dashboards.spec.ts b/web/src/views/Dashboards/Dashboards.spec.ts
index b93a8ce7d9..f4ba21f2ed 100644
--- a/web/src/views/Dashboards/Dashboards.spec.ts
+++ b/web/src/views/Dashboards/Dashboards.spec.ts
@@ -211,12 +211,12 @@ const buildGlobalConfig = (store: any, router: any, i18n: any, routeQuery: any =
   },
   provide: { _q_: { notify: vi.fn(() => vi.fn()), dialog: vi.fn() } },
   stubs: {
-    PageLayout: {
-      name: "PageLayout",
+    OPageLayout: {
+      name: "OPageLayout",
       template: '<div data-test-stub="page-layout"><slot name="header" /><slot /><slot name="footer" /></div>',
     },
-    AppPageHeader: {
-      name: "AppPageHeader",
+    OPageHeader: {
+      name: "OPageHeader",
       template: '<div data-test-stub="app-page-header"><slot /><slot name="actions" /></div>',
     },
     FolderList: true,
@@ -229,27 +229,7 @@ const buildGlobalConfig = (store: any, router: any, i18n: any, routeQuery: any =
     ODropdown: true,
     ODropdownItem: true,
     AddDashboardFromGitHub: true,
-    "q-page": true,
-    "q-input": true,
-    "q-btn": true,
-    "q-toggle": true,
-    "q-tooltip": true,
-    // q-splitter must render both named slots so the drawers nested in
-    // <template v-slot:after> are present for assertions.
-    "q-splitter": {
-      name: "QSplitter",
-      template: '<div data-test-stub="q-splitter"><slot name="before" /><slot name="after" /></div>',
-    },
-    "q-tabs": true,
-    "q-tab": true,
-    "q-separator": true,
-    "q-menu": true,
-    "q-list": true,
-    "q-item": true,
-    "q-item-section": true,
-    "q-item-label": true,
     "OIcon": true,
-    "q-table": true,
     // Migrated overlay primitives — preserve props/emits for assertion
     ODrawer: {
       name: "ODrawer",
@@ -420,9 +400,10 @@ describe("Dashboards.vue", () => {
       expect(Array.isArray(columns)).toBe(true);
       expect(columns.length).toBeGreaterThan(0);
 
-      // Check specific required columns (columns use id/header, not name)
+      // Check specific required columns (columns use id/header, not name).
+      // "#" is no longer a member column — it's OTable's built-in show-index.
       const columnIds = columns.map((col: any) => col.id);
-      expect(columnIds).toContain("#");
+      expect(columnIds).not.toContain("#");
       expect(columnIds).toContain("name");
       expect(columnIds).toContain("actions");
     });
@@ -510,7 +491,6 @@ describe("Dashboards.vue", () => {
       expect(wrapper.vm.showFavoritesOnly).toBe(true);
       expect(wrapper.vm.dashboards).toHaveLength(1);
       expect(wrapper.vm.dashboards[0].id).toBe("dash2");
-      expect(wrapper.vm.dashboards[0]["#"]).toBe("01");
       expect(wrapper.vm.resultTotal).toBe(1);
 
       wrapper.vm.updateActiveFolderId("default");
diff --git a/web/src/views/Dashboards/Dashboards.vue b/web/src/views/Dashboards/Dashboards.vue
index f484038749..28e0a24568 100644
--- a/web/src/views/Dashboards/Dashboards.vue
+++ b/web/src/views/Dashboards/Dashboards.vue
@@ -17,20 +17,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <!-- eslint-disable vue/v-on-event-hyphenation -->
 <!-- eslint-disable vue/attribute-hyphenation -->
 <template>
-  <PageLayout
+  <OPageLayout bleed
     :key="store.state.selectedOrganization.identifier"
-    :main-panel="false"
-    :header-class="'shrink-0 px-4 border-b border-border-default'"
-  >
-    <!-- ── Page header (row 1) ──────────────────────────────────────
-         The breadcrumb path now lives in the top chrome bar (published
-         below); this row carries the page title + description + actions. -->
-    <template #header>
-      <AppPageHeader
-        :title="t('dashboard.header')"
-        icon="dashboard"
-        :subtitle="t('dashboard.subtitle')"
-      >
+    :title="t('dashboard.header')"
+    icon="dashboard"
+    :subtitle="t('dashboard.subtitle')"
+    :main-panel="false"  >
       <template #actions>
         <!-- Org home dashboard shortcut: shows which dashboard is pinned to
              the home page and jumps straight to it. -->
@@ -97,13 +89,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           {{ t(`dashboard.add`) }}
         </OButton>
       </template>
-      </AppPageHeader>
-    </template>
 
     <!-- Folder rail + table — matches the Alerts/Reports layout. -->
     <div class="flex-1 flex min-h-0">
       <!-- Left: shared folder list (same component as Alerts/Reports) -->
-      <div class="shrink-0 h-full" :style="{ width: 230 + 'px' }">
+      <div class="shrink-0 h-full w-rail">
         <div class="h-full">
           <FolderList
             type="dashboards"
@@ -114,8 +104,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </div>
       <!-- Right: dashboards table -->
       <div class="flex-1 min-w-0 h-full">
-        <div class="h-full card-container">
-          <OTable
+        <div class="h-full bg-card-glass-bg">
+          <OTable class="w-full h-full"
             ref="oTableRef"
             :data="dashboards"
             :columns="columns"
@@ -123,6 +113,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             :loading="loading"
             :frame="false"
             :default-columns="false"
+            show-index
             :global-filter="filterQuery"
             :show-global-filter="false"
             :footer-title="t('dashboard.header')"
@@ -135,7 +126,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             table-id="dashboards-dashboard-list"
             @row-click="onRowClick"
             data-test="dashboard-table"
-            style="width: 100%; height: 100%"
           >
             <!-- Toolbar inside the table frame: scoped search (fills the bar) + refresh -->
             <template #toolbar>
@@ -207,9 +197,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     isFavorite(row.id) ? 'favorite' : 'favorite-border'
                   "
                   :class="
-                    isFavorite(row.id)
-                      ? 'text-favorite shrink-0'
-                      : 'text-text-secondary shrink-0'
+                    isFavorite(row.id) ? 'text-favorite shrink-0' : 'shrink-0'
                   "
                   :title="
                     isFavorite(row.id)
@@ -220,7 +208,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   @click.stop="toggleFavorite(row)"
                 />
                 <span
-                  class="text-text-primary"
+                  class="text-text-body"
                   :data-test="`dashboard-name-cell-${value}`"
                   :title="value"
                   >{{ value }}</span
@@ -243,14 +231,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </template>
             <template #cell-identifier="{ value }">
               <span
-                class="font-mono text-xs text-text-primary"
+                class="font-mono text-xs text-text-body"
                 :title="value"
                 >{{ value }}</span
               >
             </template>
             <template #cell-description="{ value }">
               <span
-                class="text-text-primary"
+                class="text-text-body"
                 :title="value"
                 >{{ value || "—" }}</span
               >
@@ -268,7 +256,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <template #cell-folder="{ row }">
               <button
                 type="button"
-                class="inline-flex items-center gap-1 max-w-full px-2 py-0.5 rounded-full bg-surface-subtle text-text-primary text-xs leading-5 transition-colors outline-none hover:bg-surface-subtle-hover hover:text-text-primary focus-visible:ring-4 focus-visible:ring-primary-500/25 focus-visible:ring-inset"
+                class="inline-flex items-center gap-1 max-w-full px-2 py-0.5 rounded-full bg-surface-subtle text-text-body text-xs leading-5 transition-colors outline-none hover:bg-surface-subtle-hover hover:text-text-body focus-visible:ring-4 focus-visible:ring-primary-500/25 focus-visible:ring-inset"
                 @click.stop="updateActiveFolderId(row.folder_id)"
               >
                 <OIcon name="folder-outline" size="xs" />
@@ -372,7 +360,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 class="flex w-full justify-between items-center py-1"
               >
                 <div
-                  class="o2-table-footer-title flex items-center shrink-0"
+                  class="text-xs font-normal flex items-center shrink-0"
                 >
                   {{ resultTotal || 0 }} {{ t("dashboard.header") }}
                 </div>
@@ -381,7 +369,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   class="bulk-action-bar flex items-center gap-2"
                 >
                   <span
-                    class="text-sm text-text-primary mr-1"
+                    class="text-sm text-text-body mr-1"
                     >{{ t('dashboard.dashboards.selected', { count: selectedIds.length }) }}</span
                   >
                   <OButton
@@ -505,11 +493,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             @update:cancel="confirmBulkDelete = false"
             v-model="confirmBulkDelete"
           />
-  </PageLayout>
+  </OPageLayout>
 </template>
 
 <script lang="ts">
-import PageLayout from "@/components/common/PageLayout.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import OButton from "@/lib/core/Button/OButton.vue";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import ODialog from "@/lib/overlay/Dialog/ODialog.vue";
@@ -541,8 +529,7 @@ import dashboardService from "../../services/dashboards";
 import OTable from "@/lib/core/Table/OTable.vue";
 import OUserCell from "@/lib/core/Table/cells/OUserCell.vue";
 import OTimeCell from "@/lib/core/Table/cells/OTimeCell.vue";
-import { TABLE_INDEX_COL_SIZE, COL } from "@/lib/core/Table/OTable.types";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import { COL } from "@/lib/core/Table/OTable.types";
 import OEmptyState from "@/lib/core/EmptyState/OEmptyState.vue";
 import { useRoute, useRouter } from "vue-router";
 import { toRaw } from "vue";
@@ -592,8 +579,7 @@ export default defineComponent({
   components: {
     OUserCell,
     OTimeCell,
-    PageLayout,
-    AppPageHeader,
+    OPageLayout,
     OEmptyState,
     OButton,
     OIcon,
@@ -772,14 +758,6 @@ export default defineComponent({
     let currentSearchAbortController = null;
     const columns = computed(() => {
       const baseColumns = [
-        {
-          id: "#",
-          header: "#",
-          accessorKey: "#",
-          sortable: false,
-          size: TABLE_INDEX_COL_SIZE,
-          meta: { align: "left" },
-        },
         {
           id: "name",
           header: t("dashboard.name"),
@@ -875,7 +853,7 @@ export default defineComponent({
       // explicit: the folder watcher stamps it into the URL on every ordinary
       // visit, so honoring it would defeat the favorites-first landing on
       // every reload. With no (effective) deep link, land on Favorites when
-      // the user has any, else on the default folder exactly as before.
+      // the user has any, else on the default folder.
       activeFolderId.value = null;
       if (route.query.folder === FAVORITES_FOLDER_ID) {
         activeFolderId.value = FAVORITES_FOLDER_ID;
@@ -1179,7 +1157,6 @@ export default defineComponent({
       index: number,
       folderInfo?: { name: string; id: string },
     ) => ({
-      "#": index < 9 ? `0${index + 1}` : index + 1,
       id: folderInfo ? board.dashboard.dashboardId : board.dashboardId,
       ...(folderInfo && {
         folder: folderInfo.name,
@@ -1216,7 +1193,6 @@ export default defineComponent({
             (board: any) => board.dashboardId === fav.dashboardId,
           );
           return {
-            "#": index < 9 ? `0${index + 1}` : index + 1,
             id: fav.dashboardId,
             folder: folderNames.get(fav.folderId) ?? fav.folderId,
             folder_id: fav.folderId,
diff --git a/web/src/views/Dashboards/ImportDashboard.schema.ts b/web/src/views/Dashboards/ImportDashboard.schema.ts
index ebb3346f01..131c6e1eeb 100644
--- a/web/src/views/Dashboards/ImportDashboard.schema.ts
+++ b/web/src/views/Dashboards/ImportDashboard.schema.ts
@@ -1,20 +1,18 @@
 // Copyright 2026 OpenObserve Inc.
 //
-// Validation schema for ImportDashboard.vue — a deliberate PARTIAL (per the
-// dashboards migration brief). The OForm covers only the input-collection
-// fields: `url` and `jsonFiles`. The deep JSON-content validation
-// (title / stream_type / structure via `validateDashboardJson`) cannot be
-// expressed per-field in Zod and stays imperative — it drives the error
-// side-panel + recovery inputs, which remain outside this form. Monaco
-// `jsonStr` and the custom `selectedFolder` dropdown also stay bare (documented
-// no-OForm* exceptions).
+// Validation schema for ImportDashboard.vue — a deliberate PARTIAL. The OForm
+// covers only the input-collection fields: `url` and `jsonFiles`. The deep
+// JSON-content validation (title / stream_type / structure via
+// `validateDashboardJson`) cannot be expressed per-field in Zod and stays
+// imperative — it drives the error side-panel + recovery inputs, which remain
+// outside this form. Monaco `jsonStr` and the custom `selectedFolder` dropdown
+// also stay bare.
 //
-// The only field rule is the http(s) URL format check that previously lived in
-// the `watch(url)` handler. It is intentionally NON-required: the URL tab also
-// accepts JSON pasted straight into the Monaco editor (no URL), so requiring the
-// URL would break that flow. `url`/`jsonFiles` are form-owned (name=); the page
-// reads them via form.useStore for the import logic / watchers (no v-model, no
-// mirror).
+// The only field rule is the http(s) URL format check. It is intentionally
+// NON-required: the URL tab also accepts JSON pasted straight into the Monaco
+// editor (no URL), so requiring the URL would break that flow. `url`/`jsonFiles`
+// are form-owned (name=); the page reads them via form.useStore for the import
+// logic / watchers (no v-model, no mirror).
 
 import { z } from "zod";
 
diff --git a/web/src/views/Dashboards/ImportDashboard.vue b/web/src/views/Dashboards/ImportDashboard.vue
index 264fced3e2..b08f84e0a6 100644
--- a/web/src/views/Dashboards/ImportDashboard.vue
+++ b/web/src/views/Dashboards/ImportDashboard.vue
@@ -1,4 +1,4 @@
-<!-- Copyright 2026 OpenObserve Inc.
+<!-- Copyright 2026 OpenObserve Inc.
 
 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU Affero General Public License as published by
@@ -14,19 +14,19 @@ You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <div class="mx-2 flex flex-col h-[calc(100vh-var(--navbar-height))] min-h-0 overflow-hidden">
-    <AppPageHeader
-      :title="t('dashboard.importDashboard')"
-      :back="{ label: t('dashboard.header'), onClick: goBack }"
-      class="-mx-2 px-4 border-b border-border-default"
-    >
+  <OPageLayout
+    class="h-[calc(100vh-var(--navbar-height))]! overflow-hidden"
+    :title="t('dashboard.importDashboard')"
+    :back="{ label: t('dashboard.header'), onClick: goBack }"
+    bleed
+  >
       <template #actions>
         <OButton
           variant="outline"
           size="sm-action"
           @click="goToCommunityDashboards"
           data-test="dashboard-panel-tutorial-btn"
-          >{{ t("dashboard.communityDashboard") }}</OButton
+        >{{ t("dashboard.communityDashboard") }}</OButton
         >
         <OButton
           variant="outline"
@@ -34,7 +34,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           v-close-popup
           data-test="dashboard-import-cancel-btn"
           @click="goBack()"
-          >{{ t("function.cancel") }}</OButton
+        >{{ t("function.cancel") }}</OButton
         >
         <OButton
           variant="primary"
@@ -43,10 +43,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           form="import-dashboard-form"
           :loading="!!isLoading"
           data-test="dashboard-import-submit-btn"
-          >{{ t("dashboard.import") }}</OButton
+        >{{ t("dashboard.import") }}</OButton
         >
       </template>
-    </AppPageHeader>
     <div class="flex w-full flex-1 min-h-0">
       <div class="flex w-full min-w-0 min-h-0">
         <OSplitter
@@ -57,9 +56,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <OForm id="import-dashboard-form" :form="form" class="h-full flex flex-col min-h-0">
             <div class="w-full h-full flex flex-col min-h-0">
               <div
-                class="card-container py-[0.625rem] pl-[0.625rem] mb-1 shrink-0"
+                class="bg-card-glass-bg py-2.5 px-page-edge mb-1 shrink-0"
               >
-                <div class="app-tabs-container h-[36px] w-fit">
+                <div class="app-tabs-container h-9 w-fit">
                   <app-tabs
                     data-test="dashboard-import-type-tabs"
                     class="tabs-selection-container"
@@ -71,13 +70,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </div>
               <div
                 v-if="activeTab == 'import_json_url'"
-                class="editor-container-url card-container py-1 flex-1 min-h-0 flex flex-col"
+                class="editor-container-url bg-card-glass-bg py-1 flex-1 min-h-0 flex flex-col"
               >
                 <div class="mx-2 mt-1 mb-1 flex flex-col flex-1 min-h-0">
-                  <div style="width: calc(100% - 10px)" class="flex gap-2 w-full items-center shrink-0">
+                  <div class="flex gap-2 w-full items-center shrink-0 w-[calc(100%_-_0.625rem)]">
                     <div
                       data-test="dashboard-import-url-input"
-                      style="width: 69%"
+                      class="w-[69%]"
                     >
                       <OFormInput
                         data-test="dashboard-import-url-control"
@@ -88,9 +87,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     </div>
 
                     <div
-                      style="width: calc(30%)"
                       data-test="dashboard-folder-dropdown"
-                      class="import-folder-dropdown-container"
+                      class="import-folder-dropdown-container w-[calc(30%)]"
                     >
                       <select-folder-dropdown
                         @folder-selected="selectedFolder = $event"
@@ -102,7 +100,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     data-test="dashboard-import-url-editor"
                     ref="queryEditorFileRef"
                     editor-id="dashboards-query-editor-file"
-                    class="mt-2 flex-1 min-h-0 overflow-hidden resize-none border border-(--o2-border-color) rounded-md"
+                    class="mt-2 flex-1 min-h-0 overflow-hidden resize-none border border-card-glass-border rounded-default"
                     :debounceTime="300"
                     v-model:query="jsonStr"
                     language="json"
@@ -111,13 +109,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </div>
               <div
                 v-if="activeTab == 'import_json_file'"
-                class="dashboard-import-json-container card-container py-1 flex-1 min-h-0 flex flex-col"
+                class="dashboard-import-json-container bg-card-glass-bg py-1 flex-1 min-h-0 flex flex-col"
               >
                 <div class="mx-2 mt-1 mb-1 flex flex-col flex-1 min-h-0">
-                  <div style="width: calc(100% - 10px)" class="flex gap-2 w-full items-center shrink-0">
+                  <div class="flex gap-2 w-full items-center shrink-0 w-[calc(100%_-_0.625rem)]">
                     <div
                       data-test="dashboard-import-file-input"
-                      style="width: 69%"
+                      class="w-[69%]"
                     >
                       <OFormFile
                         data-test="dashboard-import-file-control"
@@ -131,8 +129,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       />
                     </div>
                     <div
-                      style="width: calc(30%)"
-                      class="import-folder-dropdown-container"
+                      class="import-folder-dropdown-container w-[calc(30%)]"
                     >
                       <select-folder-dropdown
                         @folder-selected="selectedFolder = $event"
@@ -143,12 +140,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       <div v-for="importResult in filesImportResults">
                         <span
                           v-if="importResult.status == 'rejected'"
-                          class="text-red"
+                          class="text-status-negative"
                           data-test="dashboard-import-file-rejected"
                         >
                           <code
-                            style="background-color: var(--color-surface-panel); padding: 3px"
-                            >{{ importResult?.reason?.file }}</code
+                            class="bg-surface-panel p-0.75"
+                          >{{ importResult?.reason?.file }}</code
                           >
                           : {{ importResult?.reason?.error }}
                         </span>
@@ -159,7 +156,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     data-test="dashboard-import-json-file-editor"
                     ref="queryEditorJsonRef"
                     editor-id="dashboards-query-editor-json"
-                    class="mt-2 flex-1 min-h-0 overflow-hidden resize-none border border-(--o2-border-color) rounded-md"
+                    class="mt-2 flex-1 min-h-0 overflow-hidden resize-none border border-card-glass-border rounded-default"
                     :debounceTime="300"
                     v-model:query="jsonStr"
                     language="json"
@@ -172,12 +169,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <template #after>
             <div
               data-test="dashboard-import-error-container"
-              class="card-container h-full flex flex-col min-h-0 border-l border-border-default"
+              class="bg-card-glass-bg h-full flex flex-col min-h-0 border-l border-border-default"
             >
-              <div class="text-center text-[0.9375rem] font-semibold text-text-primary py-3 shrink-0">{{ t('dashboard.importDashboardPage.errorValidations') }}</div>
+              <div class="text-center text-sm font-semibold text-text-heading py-3 shrink-0">{{ t('dashboard.importDashboardPage.errorValidations') }}</div>
               <OSeparator class="mt-1 shrink-0" />
               <div
-                class="error-section p-[10px] mb-[10px] flex-1 min-h-0 overflow-auto"
+                class="error-section p-2.5 mb-2.5 flex-1 min-h-0 overflow-auto"
                 v-if="dashboardErrorsToDisplay.length > 0"
               >
                 <div class="error-reporter-container">
@@ -189,16 +186,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       errorMessage, errorIndex
                     ) in dashboardErrorsToDisplay"
                     :key="errorIndex"
-                    class="error-item py-[5px] text-sm"
+                    class="error-item py-1.25 text-sm"
                   >
                     <span
                       v-if="errorMessage.field == 'dashboard_title'"
-                      class="text-red"
+                      class="text-status-negative"
                       data-test="dashboard-import-error-title-message"
                     >
                       {{ errorMessage.message }}
-                      <div
-                        style="width: 300px"
+                      <div class="w-75"
                         data-test="dashboard-import-error-title-input"
                       >
                         <OInput
@@ -216,10 +212,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     </span>
                     <span
                       v-else-if="errorMessage.field == 'stream_type'"
-                      class="text-red"
+                      class="text-status-negative"
                     >
                       {{ errorMessage.message }}
-                      <div style="width: 300px">
+                      <div class="w-75">
                         <OSelect
                           v-model="streamTypes[errorIndex]"
                           :options="streamTypeSelectOptions"
@@ -239,7 +235,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
                     <span
                       v-else-if="errorMessage.field == 'dashboard_validation'"
-                      class="text-red"
+                      class="text-status-negative"
                       data-test="dashboard-import-error-validation-message"
                     >
                       {{ errorMessage.message }}
@@ -261,7 +257,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </div>
 
     <div></div>
-  </div>
+  </OPageLayout>
 </template>
 <script lang="ts">
 // @ts-nocheck
@@ -287,7 +283,7 @@ import { validateDashboardJson } from "@/utils/dashboard/panelValidation";
 import SelectFolderDropdown from "@/components/dashboards/SelectFolderDropdown.vue";
 import useNotifications from "@/composables/useNotifications";
 import AppTabs from "@/components/common/AppTabs.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 
 import OButton from "@/lib/core/Button/OButton.vue";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
@@ -364,7 +360,7 @@ export default defineComponent({
     // store the results of the import (for files)
     const filesImportResults = ref([]);
 
-    // OWNER pattern (rule ③): the page owns <OForm> (url + jsonFiles) and the
+    // OWNER pattern: the page owns <OForm> (url + jsonFiles) and the
     // fetch/parse watchers + import logic read those values, so it creates the
     // form with useOForm and reads it via form.useStore — ONE source, no mirror.
     // url/jsonFiles are name=-owned; every write goes through setFormField. The
@@ -883,7 +879,7 @@ export default defineComponent({
       form,
     };
   },
-  components: { OSeparator, SelectFolderDropdown, AppTabs, AppPageHeader, QueryEditor, OButton, OInput, OSelect,
+  components: { OSeparator, SelectFolderDropdown, AppTabs, OPageLayout, QueryEditor, OButton, OInput, OSelect,
     OForm, OFormInput, OFormFile,
     OIcon, OSplitter,
 },
@@ -891,18 +887,22 @@ export default defineComponent({
 </script>
 
 <style>
+/* keep(lib-override:monaco): fixed Monaco editor heights for the import editors
+   plus the folder-dropdown button spacing. .editor-container-url is a cross-file
+   shared class (also used by BaseImport.vue, which relies on this height rule),
+   so these stay unscoped globals targeting Monaco's internal DOM. */
 .editor-container-url .monaco-editor {
-  height: calc(100vh - 285px) !important;
+  height: calc(100vh - 17.8125rem) !important;
   overflow: hidden;
   resize: none;
 }
 .dashboard-import-json-container .monaco-editor {
-  height: calc(100vh - 282px) !important;
+  height: calc(100vh - 17.625rem) !important;
   overflow: hidden;
   resize: none;
 }
 .import-folder-dropdown-container .add-folder-btn {
   margin-bottom: 0 !important;
-  margin-top: 12px !important;
+  margin-top: 0.75rem !important;
 }
 </style>
diff --git a/web/src/views/Dashboards/PanelLayoutSettings.spec.ts b/web/src/views/Dashboards/PanelLayoutSettings.spec.ts
index 000232b4b4..21dade3891 100644
--- a/web/src/views/Dashboards/PanelLayoutSettings.spec.ts
+++ b/web/src/views/Dashboards/PanelLayoutSettings.spec.ts
@@ -289,7 +289,7 @@ describe("PanelLayoutSettings.vue", () => {
       expect(contentDiv.attributes("class")).toContain("p-0");
       expect(contentDiv.attributes("class")).not.toContain("bg-white");
       expect(contentDiv.attributes("class")).not.toContain(
-        "bg-(--o2-primary-background)",
+        "bg-(--color-surface-base)",
       );
     });
 
@@ -298,7 +298,7 @@ describe("PanelLayoutSettings.vue", () => {
       expect(contentDiv.exists()).toBe(true);
       expect(contentDiv.attributes("class")).toContain("p-0");
       expect(contentDiv.attributes("class")).not.toContain(
-        "bg-(--o2-primary-background)",
+        "bg-(--color-surface-base)",
       );
     });
 
diff --git a/web/src/views/Dashboards/PanelLayoutSettings.vue b/web/src/views/Dashboards/PanelLayoutSettings.vue
index 4c5890bc9c..9b796fe5f9 100644
--- a/web/src/views/Dashboards/PanelLayoutSettings.vue
+++ b/web/src/views/Dashboards/PanelLayoutSettings.vue
@@ -27,32 +27,31 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   >
     <div
     data-test="panel-layout-settings-content"
-    class="p-0"
-    style="min-height: inherit"
-  >
+    class="p-0 [min-height:inherit]"
+   
+    >
     <div>
       <div
         data-test="panel-layout-settings-height"
         class="o2-input"
       >
         <OForm id="panel-layout-settings-form" :form="form">
-          <OFormInput
+          <OFormInput class="min-w-55"
             name="h"
             :label="t('dashboard.panelHeight')"
             required
             type="number"
-            style="min-width: 220px"
             data-test="panel-layout-settings-height-input"
           />
         </OForm>
 
-        <div class="text-[12px] flex items-center gap-1 mt-1">
+        <div class="text-xs flex items-center gap-1 mt-1">
           <span class="whitespace-nowrap">Approximately <strong>{{ getRowCount }}</strong> table rows will be displayed</span>
           <OIcon
             name="info-outline"
             class="cursor-pointer shrink-0"
             size="xs"
-           />
+          />
             <OTooltip content="1 unit = 30px" />
         </div>
 
diff --git a/web/src/views/Dashboards/RenderDashboardCharts.spec.ts b/web/src/views/Dashboards/RenderDashboardCharts.spec.ts
index 3c191caec0..916da09434 100644
--- a/web/src/views/Dashboards/RenderDashboardCharts.spec.ts
+++ b/web/src/views/Dashboards/RenderDashboardCharts.spec.ts
@@ -609,14 +609,6 @@ describe("RenderDashboardCharts", () => {
       await nextTick();
       expect(wrapper.findComponent(ODialogStub).exists()).toBe(true);
     });
-
-    it("does not render the legacy q-dialog / q-card markup after migration", async () => {
-      wrapper = createWrapper();
-      await nextTick();
-      // The migrated markup must not include the old dialog selectors
-      expect(wrapper.find('[data-test="q-dialog-stub"]').exists()).toBe(false);
-      expect(wrapper.find('[data-test="q-card-stub"]').exists()).toBe(false);
-    });
   });
 
   describe("Dashboard Operations", () => {
diff --git a/web/src/views/Dashboards/RenderDashboardCharts.vue b/web/src/views/Dashboards/RenderDashboardCharts.vue
index 97387e1579..9c709821a0 100644
--- a/web/src/views/Dashboards/RenderDashboardCharts.vue
+++ b/web/src/views/Dashboards/RenderDashboardCharts.vue
@@ -18,18 +18,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <!-- eslint-disable vue/attribute-hyphenation -->
 <template>
   <div
-    class="bg-surface-base"
     :class="[
-      frame ? 'border border-border-default rounded-xl' : '',
+      'bg-surface-base',
+      frame ? 'border border-border-default rounded-default' : '',
       store.state.printMode ? '' : 'h-full overflow-y-auto',
     ]"
   >
-    <div class="px-[0.625rem] render-dashboard-charts-container">
+    <div class="px-page-edge pt-2 render-dashboard-charts-container">
       <!-- flag to check if dashboardVariablesAndPanelsDataLoaded which is used while print mode-->
-      <span
+      <span class="hidden"
         v-if="isDashboardVariablesAndPanelsDataLoadedDebouncedValue"
         id="dashboardVariablesAndPanelsDataLoaded"
-        style="display: none"
       >
       </span>
 
@@ -71,14 +70,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       />
 
       <slot name="before_panels" />
-      <div class="displayDiv clear-both min-h-0 h-auto">
-        <div
+      <div class="displayDiv clear-both min-h-0 h-auto mt-2">
+        <div class="h-full w-full"
           v-if="
             store.state.printMode &&
             panels.length === 1 &&
             panels[0]?.type === 'table'
           "
-          style="height: 100%; width: 100%"
         >
           <!-- Panel-scoped Variables (if any, if using manager) -->
           <VariablesValueSelector
@@ -97,7 +95,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             data-test="panel-variables-selector"
           />
 
-          <PanelContainer
+          <PanelContainer class="h-full w-full"
             @onDeletePanel="onDeletePanel"
             @onViewPanel="onViewPanel"
             :viewOnly="viewOnly"
@@ -137,7 +135,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             @update:initial-variable-values="updateInitialVariableValues"
             @onEditLayout="openEditLayout"
             @contextmenu="$emit('chart:contextmenu', $event)"
-            style="height: 100%; width: 100%"
           />
         </div>
         <div
@@ -155,8 +152,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             :gs-h="getPanelLayout(item, 'h')"
             :gs-min-w="getMinimumWidth(item.type)"
             :gs-min-h="getMinimumHeight(item.type)"
-            class="grid-stack-item gridBackground bg-transparent! rounded-lg border-border-default!"
-            :class="store.state.theme == 'dark' ? 'dark border-border-default!' : ''"
+            class="grid-stack-item gridBackground bg-transparent! rounded-default border-border-default!"
           >
             <div class="grid-stack-item-content">
               <!-- Panel with Panel-Level Variables -->
@@ -273,7 +269,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- Explicit height wrapper: fills the dialog body's available space
              (90vh − body padding) so ViewPanel can use height:100% and
              flex:1 works all the way down without causing a body scrollbar. -->
-        <div class="view-panel-height-wrapper h-[calc(90vh-var(--spacing-dialog-content-py)*2)] -my-(--spacing-dialog-content-py) -mx-(--spacing-dialog-content-px) flex flex-col overflow-hidden">
+        <div class="view-panel-height-wrapper h-[calc(90vh-var(--spacing-dialog-content-py)*2)] -my-dialog-content-py -mx-dialog-content-px flex flex-col overflow-hidden">
           <ViewPanel
             :folderId="folderId"
             :dashboardId="dashboardData.dashboardId"
@@ -487,8 +483,6 @@ export default defineComponent({
     // This makes RenderDashboardCharts self-contained and reusable
     const variablesManager = useVariablesManager();
 
-    // Removed committedVersion and getAllVariablesFlat - no longer needed after cleanup
-
     // Provide to child components (VariablesValueSelector, etc.)
     provide("variablesManager", variablesManager);
 
@@ -1706,28 +1700,19 @@ export default defineComponent({
   expressed as inline  utilities in the template above.
 -->
 <style>
-/* Table top toolbar (dynamic DOM — cannot be inlined) */
-.q-table__top {
-  border-bottom: 1px solid var(--color-border-default);
-  justify-content: flex-end;
-}
-
+/* keep(lib-override:gridstack): all selectors target GridStack-injected DOM
+   (.grid-stack*, .ui-resizable-*) that this template does not render, plus print
+   / @page setup — so the block stays an unscoped global. */
 /* When grid is static (disabled), hide resize handles */
 .grid-stack.grid-stack-static .ui-resizable-handle {
   display: none !important;
 }
 
-/* Dark-mode outline lives on the content child; pull it onto the design
-   token for a clean solid edge against the dark canvas. */
-.grid-stack-item.dark .grid-stack-item-content {
-  border-color: var(--color-border-default);
-}
-
 .grid-stack-item .grid-stack-item-content {
   border: 1px solid var(--color-border-default);
   border-radius: 0.375rem;
   overflow: visible;
-  box-shadow: var(--shadow-sm);
+  box-shadow: none;
 }
 
 /* GridStack theme overrides */
@@ -1739,7 +1724,7 @@ export default defineComponent({
   opacity: 0.8;
   z-index: 1000;
   transition: transform 0.15s ease, box-shadow 0.15s ease;
-  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
+  box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--color-black) 15%, transparent);
 }
 
 .grid-stack .grid-stack-item.ui-resizable-resizing {
@@ -1751,9 +1736,15 @@ export default defineComponent({
 }
 
 .grid-stack .grid-stack-item > .ui-resizable-handle.ui-resizable-se {
-  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M8 2 L8 8 L2 8' stroke='%23999999' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>")
+  /* Drawn as a mask + background-color rather than a coloured SVG: a data: URI
+     cannot resolve var(), so this is the only way the handle takes a token. */
+  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M8 2 L8 8 L2 8' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>")
     no-repeat center;
-  background-size: 0.5rem 0.5rem;
+  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M8 2 L8 8 L2 8' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>")
+    no-repeat center;
+  background-color: var(--color-grey-400);
+  -webkit-mask-size: 0.5rem 0.5rem;
+  mask-size: 0.5rem 0.5rem;
   width: 1rem;
   height: 1rem;
   bottom: 0.125rem;
@@ -1791,19 +1782,12 @@ export default defineComponent({
     break-inside: avoid;
   }
 
-  /* Drop the previous `overflow: hidden` — it was clipping each panel to
-   * its grid-cell rectangle for the on-screen layout but, paired with
-   * print pagination, prevents browsers from honouring panel heights. */
+  /* Overflow must stay visible here: `hidden` clips each panel to its
+   * grid-cell rectangle which, paired with print pagination, prevents
+   * browsers from honouring panel heights. */
   .grid-stack-item-content {
     overflow: visible !important;
   }
-
-  /* Virtual-scroll inserts padding divs above/below the rendered
-   * rows to simulate the full scroll height. In print mode these become
-   * empty white space. Hide them so no blank gaps appear in table panels. */
-  .q-virtual-scroll__padding {
-    display: none !important;
-  }
 }
 
 /* Print page setup — landscape A4 fits the dashboard width better than
@@ -1813,3 +1797,13 @@ export default defineComponent({
   margin: 10mm;
 }
 </style>
+
+<style scoped>
+/* keep(lib-override:vue-grid-layout): the drag placeholder is DOM that
+   vue-grid-layout renders inside its own subtree, so it can only be reached
+   through `:deep()` from the `.displayDiv` grid host this component owns.
+   `!important` beats the library's own `.vue-grid-placeholder` background. */
+.displayDiv :deep(.vue-grid-item.vue-grid-placeholder) {
+  background: var(--color-dashboard-placeholder-bg) !important;
+}
+</style>
diff --git a/web/src/views/Dashboards/ScheduledDashboards.spec.ts b/web/src/views/Dashboards/ScheduledDashboards.spec.ts
index 90bac20e77..12b037f0e5 100644
--- a/web/src/views/Dashboards/ScheduledDashboards.spec.ts
+++ b/web/src/views/Dashboards/ScheduledDashboards.spec.ts
@@ -169,27 +169,15 @@ describe('ScheduledDashboards', () => {
             name: 'NoData',
             template: '<div data-test="no-data-mock" class="no-data-mock">No data available</div>'
           },
-          'q-input': {
-            name: 'q-input',
-            template: '<input data-test="q-input-mock" class="q-input-mock" />',
-            props: ['modelValue', 'borderless', 'filled', 'dense', 'placeholder'],
-            emits: ['update:modelValue']
-          },
           'OInput': {
             name: 'OInput',
-            template: '<input class="q-input-mock" :data-test="$attrs[\'data-test\'] || \'q-input-mock\'" />',
+            template: '<input class="o-input-mock" :data-test="$attrs[\'data-test\'] || \'o-input-mock\'" />',
             props: ['modelValue', 'placeholder'],
             emits: ['update:modelValue']
           },
-          'q-btn': {
-            name: 'q-btn',
-            template: '<button data-test="q-btn-mock" class="q-btn-mock"><slot /></button>',
-            props: ['class', 'padding', 'color', 'no-caps', 'label', 'round', 'flat', 'icon'],
-            emits: ['click']
-          },
           'OButton': {
             name: 'OButton',
-            template: '<button class="o-btn-mock q-btn-mock" :data-test="$attrs[\'data-test\'] || \'q-btn-mock\'" @click="$emit(\'click\')"><slot /></button>',
+            template: '<button class="o-btn-mock" :data-test="$attrs[\'data-test\'] || \'o-btn-mock\'" @click="$emit(\'click\')"><slot /></button>',
             props: ['variant', 'size', 'disabled', 'loading', 'active'],
             emits: ['click']
           },
@@ -240,16 +228,19 @@ describe('ScheduledDashboards', () => {
       expect(wrapper.emitted('update:open')?.[0]).toEqual([false]);
     });
 
-    it('should apply dark-mode class when theme is dark', () => {
+    it('should apply theme-independent container class when theme is dark', () => {
       mockStore.state.theme = 'dark';
       const wrapper = createWrapper();
-      expect(wrapper.find('[data-test="scheduled-dashboards-container"]').classes()).toContain('dark-mode');
+      // Theme is handled by design tokens; container markup is identical in both themes.
+      expect(wrapper.find('[data-test="scheduled-dashboards-container"]').classes()).toContain('scheduled-dashboards');
+      expect(wrapper.find('[data-test="scheduled-dashboards-container"]').classes()).toContain('h-fit');
     });
 
-    it('should apply light-mode class when theme is light', () => {
+    it('should apply theme-independent container class when theme is light', () => {
       mockStore.state.theme = 'light';
       const wrapper = createWrapper();
-      expect(wrapper.find('[data-test="scheduled-dashboards-container"]').classes()).toContain('bg-white');
+      expect(wrapper.find('[data-test="scheduled-dashboards-container"]').classes()).toContain('scheduled-dashboards');
+      expect(wrapper.find('[data-test="scheduled-dashboards-container"]').classes()).toContain('h-fit');
     });
   });
 
diff --git a/web/src/views/Dashboards/ScheduledDashboards.vue b/web/src/views/Dashboards/ScheduledDashboards.vue
index e101299f13..a4228c08cd 100644
--- a/web/src/views/Dashboards/ScheduledDashboards.vue
+++ b/web/src/views/Dashboards/ScheduledDashboards.vue
@@ -16,6 +16,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <ODrawer data-test="scheduled-dashboards-drawer"
+    bleed
     :open="open"
     :width="60"
     :title="t('dashboard.scheduledDashboards')"
@@ -23,7 +24,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   >
     <template #header-right>
       <div class="flex items-center justify-end gap-2">
-        <div class="app-tabs-container h-[36px]">
+        <div class="app-tabs-container h-9">
           <AppTabs
             class="tabs-selection-container"
             :tabs="scheduledReportTypeTabs"
@@ -42,7 +43,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           size="sm"
           data-test="alert-list-add-alert-btn"
           @click="createScheduledReport"
-          >{{ t("dashboard.newReport") }}</OButton
+        >{{ t("dashboard.newReport") }}</OButton
         >
       </div>
     </template>
@@ -50,9 +51,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <div
       data-test="scheduled-dashboards-container"
       class="scheduled-dashboards h-fit"
-      :class="store.state.theme === 'dark' ? 'dark-mode bg-[var(--color-surface-panel)]' : 'bg-white'"
     >
-    <OTable
+    <OTable class="w-full"
       data-test="scheduled-dashboard-table"
       :data="displayReports"
       :columns="columns"
@@ -62,8 +62,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       :page-size-options="perPageOptionsList"
       :show-global-filter="false"
       :default-columns="false"
+      show-index
       :loading="loading"
-      style="width: 100%"
     >
       <template #cell-name="{ row }">
         <span class="cursor-pointer" @click="openReport(row)">{{ row.name }}</span>
@@ -131,7 +131,7 @@ import AppTabs from "@/components/common/AppTabs.vue";
 import OTable from "@/lib/core/Table/OTable.vue";
 import OTimeCell from "@/lib/core/Table/cells/OTimeCell.vue";
 import type { OTableColumnDef } from "@/lib/core/Table/OTable.types";
-import { TABLE_INDEX_COL_SIZE, COL } from "@/lib/core/Table/OTable.types";
+import { COL } from "@/lib/core/Table/OTable.types";
 
 const props = defineProps({
   open: {
@@ -223,9 +223,8 @@ onMounted(() => {
 
 const formatReports = () => {
   props.reports.length > 0 &&
-    props.reports.forEach((report: any, index) => {
+    props.reports.forEach((report: any) => {
       scheduledReports.value.push({
-        "#": index + 1,
         name: report.name,
         tab: getTabName(report.dashboards?.[0]?.tabs?.[0]),
         time_range: getTimeRangeValue(report.dashboards?.[0]?.timerange),
@@ -261,25 +260,9 @@ const filterReports = () => {
       scheduledReports.value as ScheduledDashboardReport[]
     ).filter((report) => !report.isCached);
   }
-
-  formattedReports.value = formattedReports.value.map(
-    (report: any, index: number) => {
-      return {
-        ...report,
-        "#": index + 1,
-      };
-    },
-  );
 };
 
 const columns: OTableColumnDef[] = [
-  {
-    id: "#",
-    header: "#",
-    accessorKey: "#",
-    meta: { align: "left" },
-    size: TABLE_INDEX_COL_SIZE,
-  },
   {
     id: "name",
     header: t("reports.name"),
@@ -410,43 +393,32 @@ const getTimeRangeValue = (dateTime: any) => {
 };
 </script>
 
-<style>
-.dark-mode.scheduled-dashboards .rum-tabs {
-  border: 1px solid #464646;
-}
-
-.dark-mode.scheduled-dashboards .rum-tab:hover {
-  background: #464646;
-}
-
-.dark-mode.scheduled-dashboards .rum-tab.active {
-  background: #5960b2;
-  color: #ffffff !important;
-}
-
-.scheduled-dashboards thead tr {
+<style scoped>
+/* keep(lib-override:o2-table.rum-tabs): table header-row background and the pill-style
+   time-range tabs — target OTable / tab child DOM reached via :deep(). */
+.scheduled-dashboards :deep(thead tr) {
   background-color: var(--color-table-header-bg);
 }
 
-.scheduled-dashboards .rum-tabs {
-  border: 1px solid #eaeaea;
+.scheduled-dashboards :deep(.rum-tabs) {
+  border: 1px solid var(--color-border-default);
   height: fit-content;
-  border-radius: 4px;
+  border-radius: 0.25rem;
   overflow: hidden;
 }
 
-.scheduled-dashboards .rum-tab {
+.scheduled-dashboards :deep(.rum-tab) {
   width: fit-content !important;
-  padding: 4px 12px !important;
+  padding: 0.25rem 0.75rem !important;
   border: none !important;
 }
 
-.scheduled-dashboards .rum-tab:hover {
-  background: #eaeaea;
+.scheduled-dashboards :deep(.rum-tab:hover) {
+  background: var(--color-surface-subtle-hover);
 }
 
-.scheduled-dashboards .rum-tab.active {
-  background: #5960b2;
-  color: #ffffff !important;
+.scheduled-dashboards :deep(.rum-tab.active) {
+  background: var(--color-brand-indigo);
+  color: var(--color-white) !important;
 }
 </style>
diff --git a/web/src/views/Dashboards/ViewDashboard.vue b/web/src/views/Dashboards/ViewDashboard.vue
index ad298ae9df..a60f1bee2e 100644
--- a/web/src/views/Dashboards/ViewDashboard.vue
+++ b/web/src/views/Dashboards/ViewDashboard.vue
@@ -29,28 +29,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       ]"
       class="h-full"
     >
-      <PageLayout
+      <OPageLayout bleed
         :main-panel="false"
         :header-class="
           isFullscreen || store.state.printMode === true
             ? 'stickyHeader fullscreenHeader bg-surface-panel'
             : 'shrink-0'
         "
+        :subtitle="folderNameFromFolderId"
+        :icon="!isFullscreen && store.state.printMode !== true ? undefined : 'dashboard'"
+        :back="
+          !isFullscreen && store.state.printMode !== true
+            ? { label: t('dashboard.header'), onClick: goBackToDashboardList, dataTest: 'dashboard-back-btn' }
+            : undefined
+        "
       >
-        <template #header>
-          <!-- Normal mode: the icon tile is a Back button (→ dashboards list).
-               Fullscreen/print hide the chrome, so there we keep the module icon
-               as the only on-screen branding (no back affordance). -->
-          <AppPageHeader
-            :subtitle="folderNameFromFolderId"
-            :icon="!isFullscreen && store.state.printMode !== true ? undefined : 'dashboard'"
-            :back="
-              !isFullscreen && store.state.printMode !== true
-                ? { label: t('dashboard.header'), onClick: goBackToDashboardList, dataTest: 'dashboard-back-btn' }
-                : undefined
-            "
-            class="px-4 border-b border-border-default"
-          >
           <template #title>
             <span data-test="dashboard-name-title">{{ currentDashboardData.data?.title }}</span>
           </template>
@@ -71,17 +64,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             class="ml-2"
             ref="refDateTime"
             v-model="selectedDate"
-          /> -->
+            /> -->
             <!-- for Print Mode -->
             <!-- if time is relative, show start and end time -->
             <!-- format: YYYY/MM/DD HH:mm - YYYY/MM/DD HH:mm (TIMEZONE) -->
-            <div
+            <div class="pt-1.25"
               v-if="
                 store.state.printMode === true &&
                 currentTimeObj.start_time &&
                 currentTimeObj.end_time
               "
-              style="padding-top: 5px"
             >
               {{ timeString }} ({{ store.state.timezone }})
             </div>
@@ -90,7 +82,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               v-if="selectedDate"
               v-show="store.state.printMode === false"
               ref="dateTimePicker"
-              class="dashboard-icons h-[30px] [transition:all_0.2s_ease]"
+              class="dashboard-icons h-7.5 [transition:all_0.2s_ease]"
               size="sm"
               v-model="selectedDate"
               :initialTimezone="initialTimezone"
@@ -105,7 +97,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 store.state?.zoConfig?.min_auto_refresh_interval || 5
               "
               @trigger="refreshData"
-              class="dashboard-icons hideOnPrintMode h-[30px] [transition:all_0.2s_ease]"
+              class="dashboard-icons hideOnPrintMode h-7.5 [transition:all_0.2s_ease]"
               size="sm"
             />
             <OButton
@@ -163,8 +155,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               @click="printDashboard"
               data-test="dashboard-print-btn"
             >
-              <template #icon-left
-                ><OIcon
+              <template #icon-left><OIcon
                   :name="store.state.printMode === true ? 'close' : 'print'" size="sm"
               /></template>
               <OTooltip :content="store.state.printMode === true ? t('common.close') : t('dashboard.print')" />
@@ -176,8 +167,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               @click="toggleFullscreen"
               data-test="dashboard-fullscreen-btn"
             >
-              <template #icon-left
-                ><OIcon
+              <template #icon-left><OIcon
                   :name="
                     isFullscreen ? 'fullscreen-exit' : 'fullscreen'
                   " size="sm"
@@ -192,8 +182,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               @click="openScheduledReports"
               data-test="view-dashboard-scheduled-reports"
             >
-              <template #icon-left
-                ><OIcon name="description" size="sm"
+              <template #icon-left><OIcon name="description" size="sm"
               /></template>
               <OTooltip :content="t('dashboard.scheduledDashboards')" />
             </OButton>
@@ -234,8 +223,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               />
             </OButton>
           </template>
-          </AppPageHeader>
-        </template>
 
         <RenderDashboardCharts
         :frame="false"
@@ -273,7 +260,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         @searchRequestTraceIds="searchRequestTraceIds"
         :runId="runId"
         @update:runId="updateRunId"
-      />
+        />
       <DashboardSettings
         v-model:open="showDashboardSettingsDialog"
         @refresh="loadDashboard"
@@ -303,7 +290,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :dashboard-data="currentDashboardData.data"
           :save-json-dashboard="saveJsonDashboard"
         />
-      </PageLayout>
+      </OPageLayout>
     </div>
   </div>
 </template>
@@ -363,9 +350,7 @@ import OIcon from "@/lib/core/Icon/OIcon.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
 import OSpinner from "@/lib/feedback/Spinner/OSpinner.vue";
 import OSeparator from '@/lib/core/Separator/OSeparator.vue';
-import PageLayout from "@/components/common/PageLayout.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
-import type { BreadcrumbItem } from "@/components/common/AppBreadcrumb.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import { useLoading } from "@/composables/useLoading";
 import shortURLService from "@/services/short_url";
 import { isEqual } from "lodash-es";
@@ -397,8 +382,7 @@ export default defineComponent({
   name: "ViewDashboard",
   emits: ["onDeletePanel"],
   components: {
-    PageLayout,
-    AppPageHeader,
+    OPageLayout,
     OSeparator,
     DateTimePickerDashboard,
     ShareButton,
@@ -586,11 +570,10 @@ export default defineComponent({
     const variablesDataUpdated = (data: any) => {
       // ONLY update the live variables data - DO NOT update URL
       // URL updates should happen ONLY after commitAll() is called (on refresh button click)
-      // This follows the __global mechanism from the main branch design
       Object.assign(variablesData, data);
 
-      // NOTE: URL sync has been moved to refreshData() after commitAll()
-      // This ensures URL only reflects COMMITTED variable values, not live changes
+      // URL sync happens in refreshData() after commitAll(), so the URL reflects
+      // only COMMITTED variable values, not live changes
     };
 
     const refreshedVariablesDataUpdated = (variablesData: any) => {
@@ -692,7 +675,7 @@ export default defineComponent({
       contextRegistry.register("dashboards", dashboardProvider);
       contextRegistry.setActive("dashboards");
 
-      // NEW: Compute panel times after dashboard loads
+      // Compute panel times after dashboard loads
       // Wait for next tick to ensure dateTimePicker is initialized
       await nextTick();
       if (dateTimePicker.value) {
@@ -887,7 +870,7 @@ export default defineComponent({
       await renderDashboardChartsRef?.value?.saveDashboardData?.execute?.();
     };
 
-    // ===== Panel Time Configuration (NEW FEATURE) =====
+    // ===== Panel Time Configuration =====
 
     // Helper: Convert picker format to time object
     const convertPickerToTimeObj = (pickerValue: any) => {
@@ -916,7 +899,7 @@ export default defineComponent({
       return null;
     };
 
-    // Compute effective time for a specific panel (v4.0)
+    // Compute effective time for a specific panel
     // Priority: 1. URL params (highest) → 2. panel_time_range → 3. global time AS-IS
     const computePanelTime = (panel: any, globalTime: any) => {
       if (!panel) return globalTime;
@@ -1277,17 +1260,7 @@ export default defineComponent({
 
     // [END] date picker related variables
 
-    // Breadcrumb root crumb → dashboards list (module root; folder defaults).
-    const goToDashboardList = () => {
-      return router.push({
-        path: "/dashboards",
-        query: {
-          org_identifier: store.state.selectedOrganization.identifier,
-        },
-      });
-    };
-
-    // back button / folder crumb → dashboards list scoped to the current folder.
+    // back button → dashboards list scoped to the current folder.
     const goBackToDashboardList = () => {
       return router.push({
         path: "/dashboards",
@@ -1298,34 +1271,6 @@ export default defineComponent({
       });
     };
 
-    // Level-3 ancestor path: Dashboards › <Folder> › <Dashboard> (current).
-    // The two parent crumbs now have distinct targets (root vs current folder)
-    // and the current dashboard is the terminal, non-interactive crumb.
-    const breadcrumbItems = computed<BreadcrumbItem[]>(() => {
-      const items: BreadcrumbItem[] = [
-        {
-          label: t("dashboard.header"),
-          onClick: goToDashboardList,
-          dataTest: "dashboard-back-btn",
-        },
-        {
-          label: folderNameFromFolderId.value,
-          onClick: goBackToDashboardList,
-          title: folderNameFromFolderId.value,
-          dataTest: "dashboard-view-folder-breadcrumb",
-        },
-      ];
-      const title = currentDashboardData.data?.title;
-      if (title) {
-        items.push({
-          label: title,
-          title,
-          dataTest: "dashboard-view-current",
-        });
-      }
-      return items;
-    });
-
     //add panel
     const addPanelData = () => {
       return router.push({
@@ -1983,7 +1928,6 @@ export default defineComponent({
       savePanelLayout,
       renderDashboardChartsRef,
       folderNameFromFolderId,
-      breadcrumbItems,
       showJsonEditorDialog,
       openJsonEditor,
       saveJsonDashboard,
@@ -1996,6 +1940,11 @@ export default defineComponent({
 </script>
 
 <style>
+/* keep(complex-state): fullscreen / sticky-header / print-mode toggled state
+   classes (compound .stickyHeader.fullscreenHeader chain + high z-index stacking)
+   plus a @media print block that must reach external ancestors
+   (.o2-app-root, main, .o2-content-scroll, .scroll) — none expressible as
+   component-scoped utilities, so the block stays an unscoped global. */
 .stickyHeader {
   position: sticky;
   top: 0;
@@ -2003,7 +1952,7 @@ export default defineComponent({
 }
 
 .stickyHeader.fullscreenHeader {
-  top: 0px;
+  top: 0;
   z-index: 5100 !important;
 }
 
@@ -2016,14 +1965,14 @@ export default defineComponent({
   z-index: 5000 !important;
   margin: 0 !important;
   padding: 0 !important;
-  background-color: var(--o2-primary-background, #ffffff) !important;
+  background-color: var(--color-surface-base) !important;
 }
 
 .print-mode-container {
   /* Grow to the dashboard's natural content height and let the app's outer
      scroll wrapper (MainLayout's .o2-content-scroll) do the scrolling — the same
      model the @media print block below relies on. Pinning a viewport height here
-     (100vh or 100%) capped the subtree, and PageLayout's body (overflow-hidden)
+     (100vh or 100%) capped the subtree, and OPageLayout's body (overflow-hidden)
      then clipped the trailing panels, so tall dashboards could never be scrolled
      to the bottom. `overflow: visible` keeps the sticky header pinned to the
      outer scroll wrapper rather than to a dead inner scroll box. */
diff --git a/web/src/views/Dashboards/addPanel/AddCondition.spec.ts b/web/src/views/Dashboards/addPanel/AddCondition.spec.ts
index 6f19cebda3..90a098a8c4 100644
--- a/web/src/views/Dashboards/addPanel/AddCondition.spec.ts
+++ b/web/src/views/Dashboards/addPanel/AddCondition.spec.ts
@@ -109,18 +109,6 @@ describe("AddCondition.vue", () => {
       global: {
         plugins: [i18n],
         stubs: [
-          "q-select",
-          "q-btn",
-          "q-btn-group",
-          "q-menu",
-          "q-tabs",
-          "q-tab",
-          "q-tab-panels",
-          "q-tab-panel",
-          "q-separator",
-          "q-item",
-          "q-item-section",
-          "q-checkbox",
           "CommonAutoComplete",
           "SanitizedHtmlRenderer",
         ],
diff --git a/web/src/views/Dashboards/addPanel/AddCondition.vue b/web/src/views/Dashboards/addPanel/AddCondition.vue
index 85f965e1ed..896f8aa874 100644
--- a/web/src/views/Dashboards/addPanel/AddCondition.vue
+++ b/web/src/views/Dashboards/addPanel/AddCondition.vue
@@ -5,7 +5,7 @@
       v-model="condition.logicalOperator"
       :options="filterOptions"
       @update:model-value="emitLogicalOperatorChange"
-      class="condition-logical-operator w-fit max-w-[8rem]"
+      class="condition-logical-operator w-fit max-w-32"
       :data-test="`dashboard-add-condition-logical-operator-${conditionIndex}`"
     />
     <OButtonGroup class="axis-field shrink-0" radius="sm">
@@ -23,7 +23,7 @@
           </OButton>
         </template>
         <div class="p-4 w-72">
-          <div style="display: flex; align-items: center; gap: 4px">
+          <div class="flex items-center gap-1">
             <StreamFieldSelect
               class="w-full"
               :streams="getAllSelectedStreams()"
@@ -65,9 +65,8 @@
                           v-model="condition.operator"
                           :options="operators"
                           :label="t('common.operator')"
-                          style="width: 100%"
                           data-test="dashboard-add-condition-operator"
-                          class="o2-custom-select-dashboard"
+                          class="o2-custom-select-dashboard w-full"
                         />
                         <OCombobox
                           v-if="
diff --git a/web/src/views/Dashboards/addPanel/AddJoinPopUp.vue b/web/src/views/Dashboards/addPanel/AddJoinPopUp.vue
index bb9525757a..71381bdb99 100644
--- a/web/src/views/Dashboards/addPanel/AddJoinPopUp.vue
+++ b/web/src/views/Dashboards/addPanel/AddJoinPopUp.vue
@@ -18,7 +18,7 @@
   <div data-test="dashboard-join-pop-up" class="w-156 flex flex-col max-h-[54vh] overflow-hidden">
     <div class="flex justify-between items-center mb-3.75" data-test="dashboard-join-pop-up-header">
       <div class="flex-1 gap-2">
-        <div class="flex items-center gap-2 text-(--q-primary)">
+        <div class="flex items-center gap-2 text-theme-accent">
           <LeftJoinSvg class="h-5.25" />
           <label>{{ t('dashboard.addJoinPopUp.join') }}</label>
         </div>
@@ -31,7 +31,7 @@
         />
       </div>
 
-      <div class="flex items-center gap-2 pt-5.25 px-2.5 text-(--q-primary)">
+      <div class="flex items-center gap-2 pt-5.25 px-2.5 text-theme-accent">
         <LeftJoinLineSvg class="h-10 w-14.5" />
       </div>
 
@@ -39,7 +39,7 @@
         <label for="joinType">{{ t('dashboard.addJoinPopUp.joinType') }}</label>
         <div class="flex justify-center items-center gap-2">
           <div
-            class="flex flex-col items-center cursor-pointer transition-opacity duration-200 text-(--q-primary) hover:opacity-80"
+            class="flex flex-col items-center cursor-pointer transition-opacity duration-200 text-theme-accent hover:opacity-80"
             @click="handleJoinTypeChange('left')"
             :aria-label="t('panel.leftJoin')"
             data-test="dashboard-join-type-left"
@@ -48,7 +48,7 @@
             <div :class="getJoinTypeLabelClass('left')">{{ t('dashboard.addJoinPopUp.left') }}</div>
           </div>
           <div
-            class="flex flex-col items-center cursor-pointer transition-opacity duration-200 text-(--q-primary) hover:opacity-80"
+            class="flex flex-col items-center cursor-pointer transition-opacity duration-200 text-theme-accent hover:opacity-80"
             @click="handleJoinTypeChange('inner')"
             :aria-label="t('panel.innerJoin')"
             data-test="dashboard-join-type-inner"
@@ -57,7 +57,7 @@
             <div :class="getJoinTypeLabelClass('inner')">{{ t('dashboard.addJoinPopUp.inner') }}</div>
           </div>
           <div
-            class="flex flex-col items-center cursor-pointer transition-opacity duration-200 text-(--q-primary) hover:opacity-80"
+            class="flex flex-col items-center cursor-pointer transition-opacity duration-200 text-theme-accent hover:opacity-80"
             @click="handleJoinTypeChange('right')"
             :aria-label="t('panel.rightJoin')"
             data-test="dashboard-join-type-right"
@@ -68,12 +68,12 @@
         </div>
       </div>
 
-      <div class="flex items-center gap-2 pt-5.25 px-2.5 text-(--q-primary)">
+      <div class="flex items-center gap-2 pt-5.25 px-2.5 text-theme-accent">
         <RightJoinLineSvg class="h-10 w-14.5" />
       </div>
 
       <div class="flex-1 gap-2">
-        <div class="flex items-center gap-2 text-(--q-primary)">
+        <div class="flex items-center gap-2 text-theme-accent">
           <RightJoinSvg class="h-5.25" />
           <label>{{ t('dashboard.addJoinPopUp.on') }}</label>
         </div>
@@ -89,23 +89,19 @@
     </div>
 
     <div class="flex items-center gap-4">
-      <div class="border-t border-gray-200 flex-1"></div>
+      <div class="border-t border-border-default flex-1"></div>
       <div
-        :class="[
-          'py-2 text-center text-xs',
-          store.state.theme === 'dark' ? 'text-white' : 'text-gray-700',
-        ]"
+        class="py-2 text-center text-xs text-text-body"
         v-if="showJoinSummary"
       >
         {{ t('dashboard.addJoinPopUp.performing') }}
         <span
-          class="inline-flex items-center rounded px-1.5 py-0.5 text-xs font-semibold"
-          style="background-color: color-mix(in srgb, var(--o2-primary-color) 15%, transparent); color: var(--o2-primary-color);"
+          class="inline-flex items-center rounded-default px-1.5 py-0.5 text-xs font-semibold bg-[color-mix(in_srgb,var(--color-accent)_15%,transparent)] text-accent"
         >{{ joinTypeLabel }} {{ t('dashboard.addJoinPopUp.join') }}</span> {{ t('dashboard.addJoinPopUp.between') }}
         <span class="font-semibold">{{ mainStream }}</span> {{ t('dashboard.addJoinPopUp.and') }}
         <span class="font-semibold">{{ modelValue.stream }}</span>
       </div>
-      <div class="border-t border-gray-200 flex-1"></div>
+      <div class="border-t border-border-default flex-1"></div>
     </div>
 
     <div class="mb-2.5 flex flex-col min-h-0 flex-1">
@@ -123,7 +119,7 @@
       <div
         v-for="(arg, argIndex) in modelValue.conditions"
         :key="argIndex + JSON.stringify(arg)"
-        class="mb-2.5 p-2.5 border border-border-default rounded"
+        class="mb-2.5 p-2.5 border border-border-default rounded-default"
       >
         <div class="mb-2 font-medium">{{ t('dashboard.addJoinPopUp.clause', { number: argIndex + 1 }) }}</div>
         <div class="flex items-center gap-2.5">
diff --git a/web/src/views/Dashboards/addPanel/AddPanel.schema.ts b/web/src/views/Dashboards/addPanel/AddPanel.schema.ts
index 3d565d9e83..4cadd6f0c0 100644
--- a/web/src/views/Dashboards/addPanel/AddPanel.schema.ts
+++ b/web/src/views/Dashboards/addPanel/AddPanel.schema.ts
@@ -1,9 +1,7 @@
 // Copyright 2026 OpenObserve Inc.
 //
 // Validation schema for AddPanel.vue. The only OForm-validated field is the
-// panel `title` (rendered in the page-header `#tabs` slot). It was previously
-// gated by a manual `panelNameError` ref set inside the save flow
-// (`isValid` → "Panel name is required."). Migrated here as a required+trim
+// panel `title` (rendered in the page-header `#tabs` slot) — a required+trim
 // Zod rule. The deeper chart/query validation (`validatePanel`) cannot be
 // expressed per-field in Zod and stays in the imperative `isValid()` guard that
 // the OForm `@submit` handler still runs.
diff --git a/web/src/views/Dashboards/addPanel/AddPanel.spec.ts b/web/src/views/Dashboards/addPanel/AddPanel.spec.ts
index 6395906c1f..f0f1d4af02 100644
--- a/web/src/views/Dashboards/addPanel/AddPanel.spec.ts
+++ b/web/src/views/Dashboards/addPanel/AddPanel.spec.ts
@@ -243,10 +243,6 @@ describe("AddPanel.vue", () => {
             },
           },
           stubs: {
-            "q-input": true,
-            "q-btn": true,
-            "q-splitter": true,
-            "q-splitter-panel": true,
             ChartSelection: true,
             FieldList: true,
             DashboardQueryBuilder: true,
@@ -294,10 +290,6 @@ describe("AddPanel.vue", () => {
             },
           },
           stubs: {
-            "q-input": true,
-            "q-btn": true,
-            "q-splitter": true,
-            "q-splitter-panel": true,
             ChartSelection: true,
             FieldList: true,
             DashboardQueryBuilder: true,
@@ -611,10 +603,6 @@ describe("AddPanel.vue", () => {
             },
           },
           stubs: {
-            "q-input": true,
-            "q-btn": true,
-            "q-splitter": true,
-            "q-splitter-panel": true,
             ChartSelection: true,
             FieldList: true,
             DashboardQueryBuilder: true,
@@ -686,10 +674,6 @@ describe("AddPanel.vue", () => {
             },
           },
           stubs: {
-            "q-input": true,
-            "q-btn": true,
-            "q-splitter": true,
-            "q-splitter-panel": true,
             ChartSelection: true,
             FieldList: true,
             DashboardQueryBuilder: true,
@@ -794,10 +778,6 @@ describe("AddPanel.vue", () => {
             },
           },
           stubs: {
-            "q-input": true,
-            "q-btn": true,
-            "q-splitter": true,
-            "q-splitter-panel": true,
             ChartSelection: true,
             FieldList: true,
             DashboardQueryBuilder: true,
@@ -863,10 +843,6 @@ describe("AddPanel.vue", () => {
             },
           },
           stubs: {
-            "q-input": true,
-            "q-btn": true,
-            "q-splitter": true,
-            "q-splitter-panel": true,
             ChartSelection: true,
             FieldList: true,
             DashboardQueryBuilder: true,
@@ -953,10 +929,6 @@ describe("AddPanel.vue", () => {
             },
           },
           stubs: {
-            "q-input": true,
-            "q-btn": true,
-            "q-splitter": true,
-            "q-splitter-panel": true,
             ChartSelection: true,
             FieldList: true,
             DashboardQueryBuilder: true,
@@ -1421,10 +1393,6 @@ describe("AddPanel.vue", () => {
             },
           },
           stubs: {
-            "q-input": true,
-            "q-btn": true,
-            "q-splitter": true,
-            "q-splitter-panel": true,
             ChartSelection: true,
             FieldList: true,
             DashboardQueryBuilder: true,
@@ -3417,10 +3385,6 @@ describe("AddPanel.vue", () => {
             $router: { push: vi.fn(), replace: vi.fn() },
           },
           stubs: {
-            "q-input": true,
-            "q-btn": true,
-            "q-splitter": true,
-            "q-splitter-panel": true,
             ChartSelection: true,
             FieldList: true,
             DashboardQueryBuilder: true,
@@ -3477,10 +3441,6 @@ describe("AddPanel.vue", () => {
               $router: mockRouter,
             },
             stubs: {
-              "q-input": true,
-              "q-btn": true,
-              "q-splitter": true,
-              "q-splitter-panel": true,
               ChartSelection: true,
               FieldList: true,
               DashboardQueryBuilder: true,
@@ -3562,10 +3522,6 @@ describe("AddPanel.vue", () => {
               $router: mockRouter,
             },
             stubs: {
-              "q-input": true,
-              "q-btn": true,
-              "q-splitter": true,
-              "q-splitter-panel": true,
               ChartSelection: true,
               FieldList: true,
               DashboardQueryBuilder: true,
@@ -3621,10 +3577,6 @@ describe("AddPanel.vue", () => {
               $router: mockRouter,
             },
             stubs: {
-              "q-input": true,
-              "q-btn": true,
-              "q-splitter": true,
-              "q-splitter-panel": true,
               ChartSelection: true,
               FieldList: true,
               DashboardQueryBuilder: true,
@@ -3680,10 +3632,6 @@ describe("AddPanel.vue", () => {
               $router: mockRouter,
             },
             stubs: {
-              "q-input": true,
-              "q-btn": true,
-              "q-splitter": true,
-              "q-splitter-panel": true,
               ChartSelection: true,
               FieldList: true,
               DashboardQueryBuilder: true,
@@ -3754,10 +3702,6 @@ describe("AddPanel.vue", () => {
               $router: mockRouter,
             },
             stubs: {
-              "q-input": true,
-              "q-btn": true,
-              "q-splitter": true,
-              "q-splitter-panel": true,
               ChartSelection: true,
               FieldList: true,
               DashboardQueryBuilder: true,
@@ -3825,10 +3769,6 @@ describe("AddPanel.vue", () => {
               $router: mockRouter,
             },
             stubs: {
-              "q-input": true,
-              "q-btn": true,
-              "q-splitter": true,
-              "q-splitter-panel": true,
               ChartSelection: true,
               FieldList: true,
               DashboardQueryBuilder: true,
@@ -3896,10 +3836,6 @@ describe("AddPanel.vue", () => {
               $router: mockRouter,
             },
             stubs: {
-              "q-input": true,
-              "q-btn": true,
-              "q-splitter": true,
-              "q-splitter-panel": true,
               ChartSelection: true,
               FieldList: true,
               DashboardQueryBuilder: true,
@@ -3975,10 +3911,6 @@ describe("AddPanel.vue", () => {
               $router: mockRouter,
             },
             stubs: {
-              "q-input": true,
-              "q-btn": true,
-              "q-splitter": true,
-              "q-splitter-panel": true,
               ChartSelection: true,
               FieldList: true,
               DashboardQueryBuilder: true,
@@ -4767,10 +4699,6 @@ describe("AddPanel.vue", () => {
     };
 
     const baseStubs = {
-      "q-input": true,
-      "q-btn": true,
-      "q-splitter": true,
-      "q-splitter-panel": true,
       ChartSelection: true,
       FieldList: true,
       DashboardQueryBuilder: true,
@@ -4904,8 +4832,8 @@ describe("AddPanel.vue", () => {
   // prove the title gate actually blocks save when empty — an unwired `:schema`
   // would be caught here.
   describe("Panel title OForm (real form)", () => {
-    const AppPageHeaderStub = {
-      name: "AppPageHeader",
+    const OPageHeaderStub = {
+      name: "OPageHeader",
       template:
         "<div><slot /><slot name='tabs' /><slot name='actions' /></div>",
     };
@@ -4919,7 +4847,7 @@ describe("AddPanel.vue", () => {
             $router: { push: vi.fn(), replace: vi.fn() },
           },
           stubs: {
-            AppPageHeader: AppPageHeaderStub,
+            OPageHeader: OPageHeaderStub,
             PanelEditor: true,
             DateTimePickerDashboard: true,
             QueryInspector: true,
diff --git a/web/src/views/Dashboards/addPanel/AddPanel.vue b/web/src/views/Dashboards/addPanel/AddPanel.vue
index 32809cc555..e58687c167 100644
--- a/web/src/views/Dashboards/addPanel/AddPanel.vue
+++ b/web/src/views/Dashboards/addPanel/AddPanel.vue
@@ -16,14 +16,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <!-- eslint-disable vue/no-unused-components -->
 <template>
-  <div style="overflow-y: auto" class="scroll flex flex-col h-full">
-    <!-- Header Section -->
-    <AppPageHeader
-      :back="{ label: currentDashboardData.data?.title || t('dashboard.header'), onClick: goBack, dataTest: 'dashboard-back-btn' }"
-      :title="editMode ? t('panel.editPanel') : t('panel.addPanel')"
-      class="px-4 border-b border-border-default"
-    >
-          <template #tabs>
+  <OPageLayout
+    :back="{ label: currentDashboardData.data?.title || t('dashboard.header'), onClick: goBack, dataTest: 'dashboard-back-btn' }"
+    :title="editMode ? t('panel.editPanel') : t('panel.addPanel')"
+    bleed
+  >
+          <template #header-tabs>
             <OForm id="add-panel-form" :form="form">
               <OFormInput
                 data-test="dashboard-panel-name"
@@ -31,7 +29,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :label="t('panel.name')"
                 required
                 labelPosition="inside"
-                class="dynamic-input min-w-[200px] max-w-[500px] [transition:width_0.2s_ease]"
+                class="dynamic-input min-w-50 max-w-125 [transition:width_0.2s_ease]"
                 :style="inputStyle"
               />
             </OForm>
@@ -71,7 +69,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               size="sm-action"
               @click="goBackToDashboardList"
               data-test="dashboard-panel-discard"
-              >{{ t("panel.discard") }}</OButton
+            >{{ t("panel.discard") }}</OButton
             >
             <OButton
               variant="outline"
@@ -80,7 +78,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               type="submit"
               form="add-panel-form"
               :loading="isSavingPanel"
-              >{{ t("panel.save") }}</OButton
+            >{{ t("panel.save") }}</OButton
             >
             <template
               v-if="!['html', 'markdown'].includes(dashboardPanelData.data.type)"
@@ -93,7 +91,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :loading="searchRequestTraceIds.length > 0"
                 :disabled="searchRequestTraceIds.length > 0"
                 @click="() => runQuery(false)"
-                >{{ t("panel.apply") }}</OButton
+              >{{ t("panel.apply") }}</OButton
               >
               <OButtonGroup v-if="config.isEnterprise === 'true'" radius="lg">
                 <OButton
@@ -139,8 +137,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </OButtonGroup>
             </template>
           </template>
-    </AppPageHeader>
-
     <!-- PanelEditor Content Area -->
     <PanelEditor
       ref="panelEditorRef"
@@ -169,12 +165,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <!-- Add Variable Drawer -->
     <div
       v-if="isAddVariableOpen"
-      class="add-variable-drawer-overlay fixed top-0 left-0 right-0 bottom-0 z-6000 flex justify-end"
-      style="background-color: rgba(0, 0, 0, 0.5)"
-      :class="store.state.theme === 'dark' ? 'theme-dark' : 'theme-light'"
+      class="add-variable-drawer-overlay fixed top-0 left-0 right-0 bottom-0 z-6000 flex justify-end bg-overlay-scrim"
+     
       @click.self="handleCloseAddVariable"
     >
-      <div class="add-variable-drawer-panel px-6 pt-4 w-225 h-screen shadow-[-2px_0_8px_rgba(0,0,0,0.15)] overflow-hidden rounded-none!" :class="store.state.theme === 'dark' ? 'bg-[#1a1a1a]' : 'bg-white'">
+      <div class="add-variable-drawer-panel pl-2 pt-2 w-180 h-screen border-l border-border-default shadow-[-2px_0_8px_color-mix(in_srgb,var(--color-black)_15%,transparent)] overflow-hidden rounded-none! bg-surface-base">
         <AddSettingVariable
           @save="handleSaveVariable"
           @close="handleCloseAddVariable"
@@ -186,7 +181,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         />
       </div>
     </div>
-  </div>
+  </OPageLayout>
 </template>
 
 <script lang="ts">
@@ -253,8 +248,7 @@ import { useOForm } from "@/lib/forms/Form/useOForm";
 import { makeAddPanelSchema, type AddPanelForm } from "./AddPanel.schema";
 import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
 import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
-import type { BreadcrumbItem } from "@/components/common/AppBreadcrumb.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 
 const QueryInspector = defineAsyncComponent(() => {
   return import("@/components/dashboards/QueryInspector.vue");
@@ -268,7 +262,7 @@ export default defineComponent({
     OIcon,
     OButtonGroup,
     OButton,
-    AppPageHeader,
+    OPageLayout,
     OForm,
     OFormInput,
     ODropdown,
@@ -326,15 +320,14 @@ export default defineComponent({
     });
 
     // ── Panel title OForm (header #tabs slot) ────────────────────────────────
-    // OWNER pattern (rule ③): this component renders <OForm> in the header slot
-    // and needs the form's state, so it creates the form with useOForm and reads
-    // it via form.useStore — ONE source, no projection mirror. `title` is
-    // entangled with the editor's dashboardPanelData.data.title (read by the save
-    // flow + width preview + QueryInspector), so it's a name=-owned field synced
-    // both ways with guards: form → editor below (so the editor sees typing), and
-    // editor → form (external-source sync for async edit-prefill / import;
-    // dontUpdateMeta avoids a post-submit "required" flash). The header Save
-    // submits via `form="add-panel-form"` (R4); loading is form-driven.
+    // This component renders <OForm> in the header slot and reads the form's
+    // state via form.useStore. `title` is entangled with the editor's
+    // dashboardPanelData.data.title (read by the save flow + width preview +
+    // QueryInspector), so it's a name=-owned field synced both ways with guards:
+    // form → editor below (so the editor sees typing), and editor → form
+    // (external-source sync for async edit-prefill / import; dontUpdateMeta
+    // avoids a post-submit "required" flash). The header Save submits via
+    // `form="add-panel-form"`; loading is form-driven.
     const addPanelSchema = makeAddPanelSchema(t);
     const form = useOForm<AddPanelForm>({
       defaultValues: { title: dashboardPanelData.data.title ?? "" },
@@ -553,11 +546,11 @@ export default defineComponent({
     let isPanelConfigWatcherActivated = false;
     const isPanelConfigChanged = ref(false);
 
-    // @submit fires only after the schema passes (title required+trim). The
-    // validated `value` is the source of truth (rule ②) — write it into the
-    // editor state, then run the existing save (which reads dashboardPanelData +
-    // does the deeper validatePanel checks). OForm awaits this → the header Save
-    // button shows its spinner from the form's isSubmitting (no useLoading).
+    // @submit fires only after the schema passes (title required+trim). Write
+    // the validated `value` into the editor state, then run the existing save
+    // (which reads dashboardPanelData + does the deeper validatePanel checks).
+    // OForm awaits this → the header Save button shows its spinner from the
+    // form's isSubmitting.
     const onSave = async (value: AddPanelForm) => {
       dashboardPanelData.data.title = value.title;
       const dashboardId = route.query.dashboard + "";
@@ -605,8 +598,8 @@ export default defineComponent({
             JSON.parse(JSON.stringify(panelData ?? {})),
           );
 
-          // FIX: For custom_chart panels, ensure customQuery flag is always true
-          // This prevents the query from being lost due to watchers that fire during mount
+          // For custom_chart panels, ensure customQuery flag is always true.
+          // This prevents the query from being lost due to watchers that fire during mount.
           if (dashboardPanelData.data.type === "custom_chart") {
             dashboardPanelData.data.queries.forEach((query: any) => {
               if (query.query) {
@@ -823,8 +816,8 @@ export default defineComponent({
         selectedDate.value = getSelectedDateFromQueryParams(route.query);
       }
 
-      // v4.0: In edit mode, if panel has panel-specific time, pre-populate
-      // the date picker so the user sees the same time context as view mode
+      // In edit mode, if panel has panel-specific time, pre-populate the date
+      // picker so the user sees the same time context as view mode.
       // Priority: URL panel params > saved panel_time_range > global (already set above)
       if (editMode.value) {
         const panelId = route.query.panelId as string;
@@ -1105,9 +1098,9 @@ export default defineComponent({
         // In add/edit panel mode, when time changes, this panel should always refresh
         panelIdToBeRefreshed.value = null;
 
-        // v4.0: In add/edit panel mode, ALWAYS use global date time picker for chart rendering
-        // Config date time (panel_time_range) is ONLY saved for view mode default
-        // Never use panel_time_range for chart rendering in edit mode
+        // In add/edit panel mode, ALWAYS use global date time picker for chart rendering.
+        // Config date time (panel_time_range) is ONLY saved for view mode default.
+        // Never use panel_time_range for chart rendering in edit mode.
         const date = dateTimePickerRef.value?.getConsumableDateTime();
         const effectiveTime = {
           start_time: new Date(date.startTime),
@@ -1555,11 +1548,10 @@ export default defineComponent({
       }
 
       // Grow with the title, but clamp to a 200px floor so the inside label
-      // ("Name of Panel *") always fits. The floor/ceiling used to come from
-      // the scoped `.dynamic-input` class, but that rule's `data-v-*` selector
-      // no longer matches OInput through the OFormInput → Field wrapper layers,
-      // so enforce the bounds inline — inline styles fall through via $attrs and
-      // DO reach the input.
+      // ("Name of Panel *") always fits. Bounds are enforced inline because the
+      // scoped `.dynamic-input` selector doesn't match OInput through the
+      // OFormInput → Field wrapper layers; inline styles fall through via $attrs
+      // and DO reach the input.
       const contentWidth = Math.min(
         Math.max(dashboardPanelData.data.title.length * 8 + 60, 200),
         400,
@@ -1830,52 +1822,10 @@ export default defineComponent({
       },
     ]);
 
-    // Breadcrumb root crumb → dashboards list (module root).
-    const goToDashboardList = () => {
-      return router.push({
-        path: "/dashboards",
-        query: {
-          org_identifier: store.state.selectedOrganization.identifier,
-        },
-      });
-    };
-
-    // Level-4 ancestor path: Dashboards › <Dashboard> › <Panel> (current).
-    // The Dashboard crumb returns to the view (goBack), discarding the
-    // in-session draft like the existing back affordance.
-    const breadcrumbItems = computed<BreadcrumbItem[]>(() => {
-      const items: BreadcrumbItem[] = [
-        {
-          label: t("dashboard.header"),
-          onClick: goToDashboardList,
-          dataTest: "dashboard-back-btn",
-        },
-      ];
-      const dashTitle = currentDashboardData.data?.title;
-      if (dashTitle) {
-        items.push({
-          label: dashTitle,
-          title: dashTitle,
-          onClick: goBack,
-          dataTest: "add-panel-dashboard-crumb",
-        });
-      }
-      const panelTitle =
-        dashboardPanelData.data?.title ||
-        (editMode.value ? t("panel.editPanel") : t("panel.addPanel"));
-      items.push({
-        label: panelTitle,
-        title: panelTitle,
-        dataTest: "add-panel-current",
-      });
-      return items;
-    });
-
     return {
       t,
       updateDateTime,
       goBack,
-      breadcrumbItems,
       savePanelChangesToDashboard,
       runQuery,
       expandedSplitterHeight,
diff --git a/web/src/views/Dashboards/addPanel/DashboardFiltersOption.vue b/web/src/views/Dashboards/addPanel/DashboardFiltersOption.vue
index 52a2606c74..601e0126eb 100644
--- a/web/src/views/Dashboards/addPanel/DashboardFiltersOption.vue
+++ b/web/src/views/Dashboards/addPanel/DashboardFiltersOption.vue
@@ -8,8 +8,7 @@
           ].customQuery && dashboardPanelData.data.queryType == 'sql'
         )
       "
-      style="display: flex; flex-direction: row"
-      class="pl-3"
+      class="pl-3 flex flex-row"
     >
       <div class="text-sm whitespace-nowrap min-w-32.5 flex items-center" data-test="dashboard-filter-layout-label">{{ t("panel.filters") }}</div>
       <span class="flex items-center mx-0.5" data-test="dashboard-filter-layout-separator">:</span>
diff --git a/web/src/views/Dashboards/addPanel/Group.spec.ts b/web/src/views/Dashboards/addPanel/Group.spec.ts
index b4366ac473..f240b02bc3 100644
--- a/web/src/views/Dashboards/addPanel/Group.spec.ts
+++ b/web/src/views/Dashboards/addPanel/Group.spec.ts
@@ -378,7 +378,7 @@ describe("Group.vue", () => {
 
         const addConditionItem = wrapper.find('[data-test="dashboard-add-group-add-condition"]');
         if (addConditionItem.exists()) {
-          // After q-item -> ODropdownItem migration, click on the data-test
+          // After the ODropdownItem migration, click on the data-test
           // element directly (ODropdownItem's @select wires up to its click).
           await addConditionItem.trigger('click');
           expect(wrapper.emitted('add-condition')).toBeTruthy();
@@ -409,7 +409,7 @@ describe("Group.vue", () => {
 
         const addGroupItem = wrapper.find('[data-test="dashboard-add-group-add-group"]');
         if (addGroupItem.exists()) {
-          // After q-item -> ODropdownItem migration, click on the data-test
+          // After the ODropdownItem migration, click on the data-test
           // element directly (ODropdownItem's @select wires up to its click).
           await addGroupItem.trigger('click');
           expect(wrapper.emitted('add-group')).toBeTruthy();
diff --git a/web/src/views/Dashboards/addPanel/Group.vue b/web/src/views/Dashboards/addPanel/Group.vue
index 78dcfce244..7506f6eb15 100644
--- a/web/src/views/Dashboards/addPanel/Group.vue
+++ b/web/src/views/Dashboards/addPanel/Group.vue
@@ -1,8 +1,9 @@
 <template>
   <div
     data-test="dashboard-group"
-    :style="`--group-index: ${groupNestedIndex}; padding-left: ${groupNestedIndex > 0 ? '0.3125rem' : '0'}; background-color: rgba(89, 96, 178, calc(0.12 * var(--group-index)));`"
-    class="flex p-0 rounded-[5px]"
+    :style="`--group-index: ${groupNestedIndex};`"
+    class="flex p-0 rounded-default bg-[color-mix(in_srgb,var(--color-brand-indigo)_calc(12%*var(--group-index)),transparent)]"
+    :class="groupNestedIndex > 0 ? 'pl-1.25' : 'pl-0'"
   >
     <div class="flex flex-row flex-wrap items-center" data-test="dashboard-group-conditions">
       <div
@@ -60,7 +61,7 @@
         </ODropdownItem>
       </ODropdown>
     </div>
-    <div v-if="groupNestedIndex !== 0" class="border-l border-[#f5f5f5] flex justify-between items-center">
+    <div v-if="groupNestedIndex !== 0" class="border-l border-border-default flex justify-between items-center">
       <OButton
         variant="ghost"
         size="icon"
diff --git a/web/src/views/Dashboards/viewDashboard.spec.ts b/web/src/views/Dashboards/viewDashboard.spec.ts
index cb6933b44a..2b30daa67f 100644
--- a/web/src/views/Dashboards/viewDashboard.spec.ts
+++ b/web/src/views/Dashboards/viewDashboard.spec.ts
@@ -920,7 +920,7 @@ describe("ViewDashboard", () => {
   });
 
   describe("Migrated ODialog/ODrawer Dialogs", () => {
-    // After migration q-dialog/q-drawer wrappers were removed; the modal
+    // After migration the legacy overlay wrappers were removed; the modal
     // children (DashboardSettings, PanelLayoutSettings, ScheduledDashboards,
     // DashboardJsonEditor) now own their ODialog/ODrawer internally and
     // accept v-model:open from the parent. These tests verify that contract.
@@ -1134,21 +1134,6 @@ describe("ViewDashboard", () => {
       }
     });
 
-    it("should NOT render any q-dialog wrappers after migration", async () => {
-      wrapper = createWrapper();
-      await flushPromises();
-
-      // The migration removed all q-dialog/q-drawer wrappers; modal children
-      // own their ODialog/ODrawer internally.
-      expect(wrapper.findComponent({ name: "QDialog" }).exists()).toBe(false);
-      expect(wrapper.findComponent({ name: "QDrawer" }).exists()).toBe(false);
-
-      // And no element should carry the legacy test id of the wrapper.
-      expect(
-        wrapper.find('[data-test="dashboard-settings-dialog"]').exists(),
-      ).toBe(false);
-    });
-
     it("should keep dialog state defaults isolated per mount", async () => {
       wrapper = createWrapper();
       await flushPromises();
diff --git a/web/src/views/DetailTable.spec.ts b/web/src/views/DetailTable.spec.ts
deleted file mode 100644
index 9b53913b42..0000000000
--- a/web/src/views/DetailTable.spec.ts
+++ /dev/null
@@ -1,273 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { mount } from '@vue/test-utils';
-import { createI18n } from 'vue-i18n';
-import DetailTable from './DetailTable.vue';
-
-
-describe('DetailTable.vue', () => {
-  const mockRowData = {
-    name: 'John Doe',
-    email: 'john@example.com',
-    age: 30,
-    city: 'New York',
-  };
-
-  let i18n: any;
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-    i18n = createI18n({
-      legacy: false,
-      locale: 'en',
-      messages: {
-        en: {
-          search: {
-            rowDetail: 'Row Details',
-            sourceName: 'Name',
-            sourceValue: 'Value',
-          },
-          common: {
-            table: 'Table',
-            json: 'JSON',
-          },
-        },
-      },
-    });
-  });
-
-  it('should render with default props', () => {
-    const wrapper = mount(DetailTable, {
-      global: {
-        plugins: [i18n, ],
-        stubs: {
-          QCard: true,
-          QCardSection: true,
-          QBtn: true,
-          QSeparator: true,
-          QTabs: true,
-          QTab: true,
-          QTabPanels: true,
-          QTabPanel: true,
-          QList: true,
-          QItem: true,
-          QItemSection: true,
-        },
-      },
-    });
-
-    expect(wrapper.exists()).toBe(true);
-  });
-
-  it('should display row detail title', () => {
-    const wrapper = mount(DetailTable, {
-      global: {
-        plugins: [i18n, ],
-        stubs: {
-          QCard: false,
-          QCardSection: false,
-          QBtn: true,
-          QSeparator: true,
-          QTabs: true,
-          QTab: true,
-          QTabPanels: true,
-          QTabPanel: true,
-          QList: true,
-          QItem: true,
-          QItemSection: true,
-        },
-      },
-    });
-
-    expect(wrapper.text()).toContain('Row Details');
-  });
-
-  it('should initialize with table tab', () => {
-    const wrapper = mount(DetailTable, {
-      global: {
-        plugins: [i18n, ],
-        stubs: {
-          QCard: true,
-          QCardSection: true,
-          QBtn: true,
-          QSeparator: true,
-          QTabs: true,
-          QTab: true,
-          QTabPanels: true,
-          QTabPanel: true,
-        },
-      },
-    });
-
-    expect(wrapper.vm.tab).toBe('table');
-  });
-
-  it('should display "No data available" when rowData is empty', () => {
-    const wrapper = mount(DetailTable, {
-      props: {
-        modelValue: {},
-      },
-      global: {
-        plugins: [i18n, ],
-        stubs: {
-          QCard: false,
-          QCardSection: false,
-          QBtn: true,
-          QSeparator: true,
-          QTabs: false,
-          QTab: false,
-          QTabPanels: false,
-          QTabPanel: false,
-          QList: true,
-          QItem: true,
-          QItemSection: true,
-        },
-      },
-    });
-
-    // Since the component checks rowData.length which is undefined for objects,
-    // it will always show the data view. We verify that row data is empty instead.
-    expect(wrapper.vm.rowData).toEqual({});
-  });
-
-  it('should display row data when provided', () => {
-    const wrapper = mount(DetailTable, {
-      props: {
-        modelValue: mockRowData,
-      },
-      global: {
-        plugins: [i18n, ],
-        stubs: {
-          QCard: false,
-          QCardSection: false,
-          QBtn: true,
-          QSeparator: true,
-          QTabs: true,
-          QTab: true,
-          QTabPanels: false,
-          QTabPanel: false,
-          QList: false,
-          QItem: false,
-          QItemSection: false,
-        },
-      },
-    });
-
-    expect(wrapper.vm.rowData).toEqual(mockRowData);
-  });
-
-  it('should have both table and json tabs', () => {
-    const wrapper = mount(DetailTable, {
-      global: {
-        plugins: [i18n, ],
-        stubs: {
-          QCard: true,
-          QCardSection: true,
-          QBtn: true,
-          QSeparator: true,
-          QTabs: false,
-          QTab: false,
-          QTabPanels: true,
-          QTabPanel: true,
-        },
-      },
-    });
-
-    const tabs = wrapper.findAll('.q-tab');
-    expect(tabs.length).toBeGreaterThanOrEqual(0);
-  });
-
-  it('should set rowData from modelValue on created', () => {
-    const wrapper = mount(DetailTable, {
-      props: {
-        modelValue: mockRowData,
-      },
-      global: {
-        plugins: [i18n, ],
-        stubs: {
-          QCard: true,
-          QCardSection: true,
-          QBtn: true,
-          QSeparator: true,
-          QTabs: true,
-          QTab: true,
-          QTabPanels: true,
-          QTabPanel: true,
-        },
-      },
-    });
-
-    expect(wrapper.vm.rowData).toEqual(mockRowData);
-  });
-
-  it('should have getImageURL function available', () => {
-    const wrapper = mount(DetailTable, {
-      global: {
-        plugins: [i18n, ],
-        stubs: {
-          QCard: true,
-          QCardSection: true,
-          QBtn: true,
-          QSeparator: true,
-          QTabs: true,
-          QTab: true,
-          QTabPanels: true,
-          QTabPanel: true,
-        },
-      },
-    });
-
-    expect(wrapper.vm.getImageURL).toBeDefined();
-  });
-
-  it('should handle complex nested data structures', () => {
-    const complexData = {
-      user: {
-        name: 'John',
-        email: 'john@example.com',
-      },
-      tags: ['tag1', 'tag2'],
-      count: 42,
-    };
-
-    const wrapper = mount(DetailTable, {
-      props: {
-        modelValue: complexData,
-      },
-      global: {
-        plugins: [i18n, ],
-        stubs: {
-          QCard: true,
-          QCardSection: true,
-          QBtn: true,
-          QSeparator: true,
-          QTabs: true,
-          QTab: true,
-          QTabPanels: true,
-          QTabPanel: true,
-        },
-      },
-    });
-
-    expect(wrapper.vm.rowData).toEqual(complexData);
-  });
-
-  it('should render close button', () => {
-    const wrapper = mount(DetailTable, {
-      global: {
-        plugins: [i18n, ],
-        stubs: {
-          QCard: false,
-          QCardSection: false,
-          QSeparator: true,
-          QTabs: true,
-          QTab: true,
-          QTabPanels: true,
-          QTabPanel: true,
-        },
-      },
-    });
-
-    const closeButton = wrapper.findAll('button');
-    expect(closeButton.length).toBeGreaterThan(0);
-  });
-});
diff --git a/web/src/views/DetailTable.vue b/web/src/views/DetailTable.vue
deleted file mode 100644
index a19e7f6564..0000000000
--- a/web/src/views/DetailTable.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <OCard class="flex flex-col h-full flex-nowrap w-[74vw]">
-    <OCardSection role="header">
-      <div class="flex items-center flex-nowrap">
-        <div class="flex flex-col">
-          <div class="text-base font-bold text-gray-800">
-            {{ t("search.rowDetail") }}
-          </div>
-        </div>
-        <div class="col-auto">
-          <OButton variant="ghost" size="icon" v-close-popup icon-left="cancel" />
-        </div>
-      </div>
-    </OCardSection>
-    <OSeparator />
-    <OTabs v-model="tab" dense class="text-gray-500" align="justify">
-      <OTab name="table" :label="t('common.table')" />
-      <OTab name="json" :label="t('common.json')" />
-    </OTabs>
-
-    <OSeparator />
-
-    <OTabPanels v-model="tab" animated>
-      <OTabPanel name="table">
-        <OCardSection class="p-0 mb-6">
-          <div
-            v-if="rowData.length == 0"
-            class="pt-3"
-            style="max-width: 350px"
-          >
-            No data available.
-          </div>
-          <div v-else class="indexDetailsContainer">
-            <ul
-              style="height: calc(100vh - 220px); width: 70vw"
-              class="detail-list px-0 py-0 flex flex-col divide-y divide-border"
-            >
-              <li class="detail-item list-head flex items-center gap-2 px-3 py-2">
-                <div class="font-bold w-1/4 break-all">
-                  {{ t("search.sourceName") }}
-                </div>
-                <div class="font-bold w-3/4 break-all">
-                  {{ t("search.sourceValue") }}
-                </div>
-              </li>
-
-              <li
-                v-for="(key, value) in rowData"
-                :key="value"
-                class="detail-item list-item flex items-center gap-2 px-3 py-2"
-              >
-                <div class="w-1/4 break-all">{{ value }}</div>
-                <div class="w-3/4 break-all">{{ key }}</div>
-              </li>
-              <li class="detail-item flex items-center gap-2 px-3 py-2"></li>
-            </ul>
-          </div>
-        </OCardSection>
-      </OTabPanel>
-
-      <OTabPanel name="json">
-        <pre>
-          {{ rowData }}
-        </pre>
-      </OTabPanel>
-    </OTabPanels>
-  </OCard>
-</template>
-
-<script lang="ts">
-import OTabs from "@/lib/navigation/Tabs/OTabs.vue";
-import OCard from "@/lib/core/Card/OCard.vue";
-import OCardSection from "@/lib/core/Card/OCardSection.vue";
-import OTab from "@/lib/navigation/Tabs/OTab.vue";
-import OTabPanels from "@/lib/navigation/Tabs/OTabPanels.vue";
-import OTabPanel from "@/lib/navigation/Tabs/OTabPanel.vue";
-import OButton from "@/lib/core/Button/OButton.vue";
-import OSeparator from '@/lib/core/Separator/OSeparator.vue';
-import { defineComponent, ref } from "vue";
-import { useI18n } from "vue-i18n";
-import { getImageURL } from "../utils/zincutils";
-
-const defaultValue: any = () => {
-  return {
-    data: {},
-  };
-};
-
-export default defineComponent({
-  name: "SearchDetail",
-  components: { OSeparator, OTabs, OTab, OTabPanels, OTabPanel, OButton, OCard, OCardSection },
-  props: {
-    modelValue: {
-      type: Object,
-      default: () => defaultValue(),
-    },
-  },
-  setup() {
-    const { t } = useI18n();
-    const rowData: any = ref({});
-
-    return {
-      t,
-      rowData,
-      tab: ref("table"),
-      getImageURL,
-    };
-  },
-  created() {
-    this.rowData = this.modelValue;
-  },
-});
-</script>
diff --git a/web/src/views/EmptyStateDemo.vue b/web/src/views/EmptyStateDemo.vue
index 83e7174d71..99b293487d 100644
--- a/web/src/views/EmptyStateDemo.vue
+++ b/web/src/views/EmptyStateDemo.vue
@@ -9,12 +9,12 @@
     <div class="p-8 flex flex-col gap-8 bg-surface-base min-h-screen">
       <div class="flex items-start justify-between gap-4 flex-wrap">
         <div>
-          <h1 class="text-2xl font-semibold text-text-primary">
+          <h1 class="text-2xl font-semibold text-text-heading">
             Empty states — full set for review
           </h1>
           <p class="text-sm text-text-secondary mt-1 max-w-2xl">
             Every preset below is a real
-            <code class="text-text-primary">&lt;OEmptyState&gt;</code> with its
+            <code class="text-text-body">&lt;OEmptyState&gt;</code> with its
             production copy, illustration, and action. Each detailed scene has its
             own character micro-animation and pauses under OS "reduce motion".
             Nothing is wired into real pages yet.
@@ -41,9 +41,9 @@
             <span class="text-xs font-semibold uppercase tracking-wider text-text-secondary">
               {{ p.label }}
             </span>
-            <code class="text-[0.7rem] text-text-disabled">preset="{{ p.preset }}"</code>
+            <code class="text-2xs text-text-disabled">preset="{{ p.preset }}"</code>
           </div>
-          <div class="rounded-xl border border-border-default h-110 overflow-hidden">
+          <div class="rounded-default border border-border-default h-110 overflow-hidden">
             <OEmptyState
               :preset="p.preset"
               size="hero"
@@ -56,15 +56,15 @@
       </div>
 
       <div>
-        <h2 class="text-lg font-semibold text-text-primary mb-1">
+        <h2 class="text-lg font-semibold text-text-heading mb-1">
           Character — optional, only where it adds value
         </h2>
         <p class="text-sm text-text-secondary mb-3 max-w-2xl">
           The illustration is just a named choice, so a scene can opt into a
           character (e.g. a prominent first-run hero) while everything else stays
-          object-only. Same component, <code class="text-text-primary">illustration="explorer"</code>.
+          object-only. Same component, <code class="text-text-body">illustration="explorer"</code>.
         </p>
-        <div class="rounded-xl border border-border-default h-110 overflow-hidden">
+        <div class="rounded-default border border-border-default h-110 overflow-hidden">
           <OEmptyState
             size="hero"
             variant="create"
@@ -79,7 +79,7 @@
       </div>
 
       <div>
-        <h2 class="text-lg font-semibold text-text-primary mb-3">
+        <h2 class="text-lg font-semibold text-text-heading mb-3">
           Sizes — the same system at block &amp; inline scale
         </h2>
         <div class="grid grid-cols-1 xl:grid-cols-2 gap-6">
@@ -87,7 +87,7 @@
             <span class="text-xs font-semibold uppercase tracking-wider text-text-secondary">
               size="block" (inside a card / dashboard panel)
             </span>
-            <div class="rounded-xl border border-border-default overflow-hidden">
+            <div class="rounded-default border border-border-default overflow-hidden">
               <OEmptyState preset="no-search-results" size="block" @action="onAction('block')" />
             </div>
           </section>
@@ -95,7 +95,7 @@
             <span class="text-xs font-semibold uppercase tracking-wider text-text-secondary">
               size="inline" (table body / dropdown)
             </span>
-            <div class="rounded-xl border border-border-default overflow-hidden">
+            <div class="rounded-default border border-border-default overflow-hidden">
               <OEmptyState preset="no-search-results" size="inline" @action="onAction('inline')" />
             </div>
           </section>
diff --git a/web/src/views/Error404.vue b/web/src/views/Error404.vue
index 2337361286..50da0c9086 100644
--- a/web/src/views/Error404.vue
+++ b/web/src/views/Error404.vue
@@ -15,7 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="rounded-md flex items-center justify-center min-h-[inherit] bg-(--o2-primary-background)">
+  <div class="rounded-default flex items-center justify-center min-h-[inherit] bg-surface-base">
     <div class="flex flex-col items-center text-center max-w-md p-8">
       <div class="mb-8">
         <svg
@@ -25,21 +25,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <circle cx="100" cy="100" r="90" class="fill-none stroke-(--o2-border) stroke-2" />
+          <circle cx="100" cy="100" r="90" class="fill-none stroke-border-default stroke-2" />
           <text
             x="100"
             y="115"
             text-anchor="middle"
-            class="text-[3.5rem] font-bold fill-(--o2-primary-color) font-[inherit]"
+            font-size="56"
+            class="font-bold fill-accent font-[inherit]"
           >
             404
           </text>
         </svg>
       </div>
 
-      <h1 class="text-2xl font-semibold text-(--o2-text-primary) m-0 mb-3">Page not found</h1>
+      <h1 class="text-2xl font-semibold text-text-heading m-0 mb-3">Page not found</h1>
 
-      <p class="text-[0.9375rem] text-(--o2-text-secondary) m-0 mb-8 leading-normal">
+      <p class="text-sm text-text-secondary m-0 mb-8 leading-normal">
         The page you're looking for doesn't exist or has been moved.
       </p>
 
@@ -58,7 +59,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         >{{ t('common.goBack') }}</OButton>
       </div>
 
-      <p class="text-[0.8125rem] text-(--o2-text-secondary) opacity-70 m-0">
+      <p class="text-compact text-text-secondary opacity-70 m-0">
         {{ t('common.redirectingHome', { countdown }) }}
       </p>
     </div>
diff --git a/web/src/views/Functions.spec.ts b/web/src/views/Functions.spec.ts
index be978baa69..583ae70006 100644
--- a/web/src/views/Functions.spec.ts
+++ b/web/src/views/Functions.spec.ts
@@ -7,9 +7,9 @@ import { createI18n } from "vue-i18n";
 import Functions from "./Functions.vue";
 
 // Mock heavy child components that are not under test
-vi.mock("@/components/common/AppPageHeader.vue", () => ({
+vi.mock("@/lib/core/PageHeader/OPageHeader.vue", () => ({
   default: {
-    name: "AppPageHeader",
+    name: "OPageHeader",
     template:
       '<div class="app-page-header" data-test="app-page-header"><slot name="tabs" /><slot name="title-trail" /><slot name="actions" /></div>',
     props: ["title", "subtitle", "icon", "back", "tabsBelow"],
@@ -222,13 +222,13 @@ describe("Functions.vue", () => {
   });
 
   describe("Header visibility", () => {
-    it("should show AppPageHeader when on pipelines route", async () => {
+    it("should show OPageHeader when on pipelines route", async () => {
       wrapper = await createWrapper({}, "pipelines");
       const header = wrapper.find('[data-test="app-page-header"]');
       expect(header.exists()).toBe(true);
     });
 
-    it("should not show AppPageHeader when on functionList route", async () => {
+    it("should not show OPageHeader when on functionList route", async () => {
       wrapper = await createWrapper({}, "functionList");
       const header = wrapper.find('[data-test="app-page-header"]');
       expect(header.exists()).toBe(false);
diff --git a/web/src/views/Functions.vue b/web/src/views/Functions.vue
index 67ef47d2a3..97301c8a17 100644
--- a/web/src/views/Functions.vue
+++ b/web/src/views/Functions.vue
@@ -15,23 +15,32 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
+  <!-- Sections that bring their OWN page header (Functions, Enrichment Tables
+       each render a full OPageLayout) are rendered DIRECTLY — exactly like any
+       normal top-level page. Wrapping them in the shell's OPageLayout too nested
+       two page layouts and pushed their header down (a top gap). Pipelines and
+       the pipeline detail sub-pages have no own-header, so the shell owns theirs. -->
+  <RouterView v-if="sectionOwnsHeader" v-slot="{ Component }">
+    <component :is="Component" class="h-full" @sendToAiChat="sendToAiChat" />
+  </RouterView>
+
   <!-- Pipelines is a frequently-used workspace, so it has NO landing hub (that
        would add a click every visit). It lands straight on the default section
        and uses the same breadcrumb section-switcher for fast lateral nav:
          Stream Pipelines ▾            (› Edit Pipeline on a detail page)
        Page actions (and the detail-view teleport target) live in the bar. -->
-  <div class="h-full min-h-0 flex flex-col">
+  <OPageLayout v-else bleed>
+    <template #header v-if="showPipelineActions || isDetailView">
     <!-- This row hosts page actions: the pipelines-list buttons or the detail
          teleport target. Section pages (functions/enrichment/eval) render
          nothing here — their content components have their own headers. -->
-    <AppPageHeader
-      v-if="showPipelineActions || isDetailView"
+    <OPageHeader
       :title="showPipelineActions ? t('menu.pipeline') : breadcrumbLabel"
       :subtitle="showPipelineActions ? t('pipeline.subtitle') : ''"
       :icon="showPipelineActions ? 'lan' : undefined"
       :back="detailBack"
       :tabs-below="showPipelineActions"
-      class="px-4 border-b border-border-default"
+      class="border-b border-border-default"
     >
       <!-- Section switcher tabs (Stream Pipelines / Functions / …) next to the
            title on the list page; hidden on detail sub-pages (editor/history).
@@ -125,18 +134,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           data-test="pipeline-detail-actions"
         />
       </template>
-    </AppPageHeader>
+    </OPageHeader>
+    </template>
 
     <div class="flex-1 min-h-0 flex flex-col overflow-hidden">
       <RouterView v-slot="{ Component }">
         <component :is="Component" class="h-full" @sendToAiChat="sendToAiChat" />
       </RouterView>
     </div>
-  </div>
+  </OPageLayout>
 </template>
 
 <script lang="ts">
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageHeader from "@/lib/core/PageHeader/OPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import PipelineSectionTabs from "@/components/pipeline/PipelineSectionTabs.vue";
 import OButton from "@/lib/core/Button/OButton.vue";
 import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
@@ -160,7 +171,8 @@ import config from "@/aws-exports";
 export default defineComponent({
   name: "AppFunctions",
   components: {
-    AppPageHeader,
+    OPageHeader,
+    OPageLayout,
     PipelineSectionTabs,
     OButton,
     ODropdown,
@@ -230,6 +242,15 @@ export default defineComponent({
     // Header actions live on the Pipelines index page only.
     const showPipelineActions = computed(() => routeName.value === "pipelines");
 
+    // Sections that render their OWN OPageLayout header (Functions, Enrichment
+    // Tables). They're rendered directly instead of nested inside the shell's
+    // OPageLayout, so their header sits flush at the top like any normal page.
+    const sectionOwnsHeader = computed(
+      () =>
+        routeName.value === "functionList" ||
+        routeName.value === "enrichmentTables",
+    );
+
     // Responsive: collapse secondary actions into an overflow menu when narrow.
     const windowWidth = ref(window.innerWidth);
     const onWindowResize = () => {
@@ -288,6 +309,7 @@ export default defineComponent({
       breadcrumbLabel,
       detailBack,
       showPipelineActions,
+      sectionOwnsHeader,
       shouldCollapseActions,
       goToAddPipeline,
       goToImportPipeline,
diff --git a/web/src/views/HomeChatHistory.vue b/web/src/views/HomeChatHistory.vue
index 1bc6743cc4..35ee4cc21c 100644
--- a/web/src/views/HomeChatHistory.vue
+++ b/web/src/views/HomeChatHistory.vue
@@ -92,8 +92,7 @@ function formatTime(ts: string): string {
 
 <template>
   <div
-    class="flex flex-col h-full text-base w-[15em] shrink-0 border-r border-r-[0.0625em] border-(--o2-border-color) bg-(--o2-card-bg) overflow-hidden"
-    :class="store.state.theme === 'dark' ? 'hch-dark' : 'hch-light'"
+    class="flex flex-col h-full text-base w-[15em] shrink-0 border-r border-r-[0.0625em] border-card-glass-border bg-card-glass-bg overflow-hidden"
   >
     <!-- Header -->
     <div class="flex items-center justify-between px-3 pt-[0.625em] pb-[0.375em] shrink-0">
@@ -122,7 +121,7 @@ function formatTime(ts: string): string {
 
     <!-- Search -->
     <div class="px-2 pb-[0.375em] shrink-0">
-      <div class="flex items-center gap-[0.375em] bg-(--o2-input-bg) rounded-md px-[0.375em]">
+      <div class="flex items-center gap-[0.375em] bg-input-bg rounded-default px-[0.375em]">
         <svg
           class="opacity-50 shrink-0"
           width="0.875em"
@@ -139,7 +138,7 @@ function formatTime(ts: string): string {
         </svg>
         <input
           v-model="searchTerm"
-          class="hch-search-input flex-1 min-w-0 border-0 bg-transparent outline-none text-[0.8125em] text-(--o2-text-primary) py-[0.375em]"
+          class="hch-search-input flex-1 min-w-0 border-0 bg-transparent outline-none text-[0.8125em] text-text-body py-[0.375em] placeholder:text-text-muted placeholder:opacity-70"
           :placeholder="t('chatHistory.search')"
           type="text"
         />
@@ -170,15 +169,15 @@ function formatTime(ts: string): string {
       <div
         v-for="chat in filtered"
         :key="chat.id"
-        class="group flex items-center gap-1 py-[0.4375em] px-2 rounded-md cursor-pointer transition-[background] duration-[120ms] hover:bg-[var(--o2-hover-color,rgba(128,128,128,0.1))]"
+        class="group flex items-center gap-1 py-[0.4375em] px-2 rounded-default cursor-pointer transition-[background] duration-[120ms] hover:bg-interactive-hover-bg"
         :class="{
-          'bg-[var(--o2-selected-color,rgba(57,126,246,0.12))]!': activeChatId === chat.id,
+          'bg-primary-100!': activeChatId === chat.id,
         }"
         @click="selectChat(chat.id)"
       >
         <div class="flex-1 min-w-0">
-          <div class="text-[0.8125em] leading-[1.35] truncate text-(--o2-text-body)" :class="{ 'font-medium': activeChatId === chat.id }">{{ chat.title }}</div>
-          <div class="text-[0.6875em] text-(--o2-text-caption) mt-[0.0625em]">{{ formatTime(chat.timestamp) }}</div>
+          <div class="text-[0.8125em] leading-[1.35] truncate text-text-body" :class="{ 'font-medium': activeChatId === chat.id }">{{ chat.title }}</div>
+          <div class="text-[0.6875em] text-text-secondary mt-[0.0625em]">{{ formatTime(chat.timestamp) }}</div>
         </div>
         <span class="inline-flex items-center shrink-0 opacity-0 transition-opacity duration-[120ms] group-hover:opacity-100">
           <OButton
@@ -215,7 +214,7 @@ function formatTime(ts: string): string {
     </div>
 
     <!-- Clear all -->
-    <div v-if="history.length > 0" class="shrink-0 py-[0.375em] px-2 border-t border-t-[0.0625em] border-t-(--o2-border-color)">
+    <div v-if="history.length > 0" class="shrink-0 py-[0.375em] px-2 border-t border-t-[0.0625em] border-t-card-glass-border">
       <OButton variant="ghost-subtle" :block="true" @click="clearAll">
         <svg
           width="0.875em"
@@ -235,11 +234,3 @@ function formatTime(ts: string): string {
     </div>
   </div>
 </template>
-
-<style>
-/* placeholder pseudo-element — cannot be inlined */
-.hch-search-input::placeholder {
-  color: var(--o2-text-muted);
-  opacity: 0.7;
-}
-</style>
diff --git a/web/src/views/HomeView.vue b/web/src/views/HomeView.vue
index 9344e5f25e..02f0749236 100644
--- a/web/src/views/HomeView.vue
+++ b/web/src/views/HomeView.vue
@@ -15,7 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
   <div
-    class="rounded-md overflow-hidden min-h-0 h-full flex flex-col"
+    class="rounded-default overflow-hidden min-h-0 h-full flex flex-col"
     data-test="home-page"
   >
     <!-- No card-container here: the page already renders inside MainLayout's
@@ -26,8 +26,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
          bottom divider reaches the card edges (like Data Sources / Pipelines) —
          a padded root insets the header and makes it read as a floating bar.
          Padding is reintroduced on the body wrapper below the header instead. -->
-    <div
-      class="h-full overflow-hidden flex flex-col min-h-0"
+    <OPageLayout
+      :title="t('menu.home')"
+      :subtitle="t('home.subtitle')"
+      icon="home"
+      :tabs-below="tabOrder.length > 1"
+      bleed
     >
       <!-- Top-level page header: module icon + "Home" title, with the home tabs
            rendered as a full-width strip below (tabsBelow). The header owns its
@@ -35,17 +39,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
            exists we hand-draw the border so the header still reads as a header.
            The tab bar keeps its drag-to-reorder behavior (OTabs `reorderable`);
            OTabs draws the active underline flush with the header's divider. -->
-      <AppPageHeader
-        :title="t('menu.home')"
-        :subtitle="t('home.subtitle')"
-        icon="home"
-        :tabs-below="tabOrder.length > 1"
-        class="shrink-0 px-4"
-        :class="
-          tabOrder.length > 1 ? '' : 'border-b border-border-default'
-        "
-      >
-        <template v-if="tabOrder.length > 1" #tabs>
+        <template v-if="tabOrder.length > 1" #header-tabs>
           <OTabs
             v-model="activeHomeTab"
             align="left"
@@ -63,7 +57,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <button
                 v-if="tab.id.startsWith('dash:')"
                 type="button"
-                class="home-tab-close q-ml-xs"
+                class="ml-1 inline-flex items-center justify-center w-4 h-4 leading-none border-none bg-transparent rounded-default cursor-pointer opacity-60 text-sm text-text-secondary transition-all duration-200 ease-[ease] hover:opacity-100 hover:bg-surface-subtle-hover hover:text-text-body"
                 :data-test="`home-tab-close-${tab.id}`"
                 :aria-label="t('home.removeHomeDashboard')"
                 @mousedown.stop.prevent
@@ -80,7 +74,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </OTab>
           </OTabs>
         </template>
-      </AppPageHeader>
 
       <!-- Body: padded wrapper that holds the active tab panel. Padding lives
            here (not on the root) so the header above stays full-bleed. The
@@ -111,7 +104,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
 
         <!-- Usage tab -->
-        <div v-if="activeHomeTab === 'usage'" class="flex-1 min-h-0 overflow-hidden -mr-2.5">
+        <div v-if="activeHomeTab === 'usage'" class="flex-1 min-h-0 overflow-hidden -mx-2.5">
           <UsageTab />
         </div>
 
@@ -129,7 +122,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           />
         </div>
       </div>
-    </div>
+    </OPageLayout>
   </div>
 </template>
 
@@ -152,7 +145,7 @@ import HomeChatHistory from "@/views/HomeChatHistory.vue";
 import OTabs from "@/lib/navigation/Tabs/OTabs.vue";
 import OTab from "@/lib/navigation/Tabs/OTab.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import PinnedDashboardTab from "@/views/PinnedDashboardTab.vue";
 import { useHomeDashboard } from "@/composables/useHomeDashboard";
 import { toast } from "@/lib/feedback/Toast/useToast";
@@ -370,13 +363,13 @@ export default defineComponent({
     OTabs,
     OTab,
     OTooltip,
-    AppPageHeader,
+    OPageLayout,
     PinnedDashboardTab,
   },
 });
 </script>
 
-<style>
+<style scoped>
 /*
  * HomeView Styles — Tab bar and page layout only.
  * Usage-tab-specific styles live in UsageTab.vue.
@@ -384,31 +377,14 @@ export default defineComponent({
 
 /* Home tab bar now uses the shared OTabs component (see template). */
 
-.home-tab-close {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1rem;
-  height: 1rem;
-  line-height: 1;
-  border: none;
-  background: transparent;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  opacity: 0.6;
-  font-size: var(--text-base);
-  color: var(--color-text-secondary);
-  transition: all 0.2s ease;
-}
-
-.home-tab-close:hover {
-  opacity: 1;
-  background: var(--color-surface-subtle-hover);
-  color: var(--color-text-primary);
-}
+/* keep(lib-override): every selector below reaches into the AI chat component's own DOM
+   (.chat-container / .chat-content / .messages-container / .chat-header /
+   .unified-input-box), so none of it is addressable from this template's utilities.
+   The brand ribbon gradient + accent glow use the --color-gradient-brand-ribbon and
+   --color-ai-accent tokens. */
 
 /* Chat fills remaining width and height */
-.home-ai-panel .chat-container {
+.home-ai-panel :deep(.chat-container) {
   flex: 1;
   height: 100%;
   box-shadow: none;
@@ -419,8 +395,8 @@ export default defineComponent({
 
 /* Allow the input's gradient glow + shadow to spill outside the container.
    messages-container has its own overflow-y, so the page itself won't grow. */
-.home-ai-panel .chat-content-wrapper,
-.home-ai-panel .chat-content {
+.home-ai-panel :deep(.chat-content-wrapper),
+.home-ai-panel :deep(.chat-content) {
   overflow: visible;
 }
 
@@ -430,77 +406,70 @@ export default defineComponent({
    to their content height and push the input bar off the bottom. min-height:0
    lets them shrink within their flex columns so the message list scrolls and
    the input stays pinned at the bottom. */
-.home-ai-panel .chat-content,
-.home-ai-panel .messages-container {
+.home-ai-panel :deep(.chat-content),
+.home-ai-panel :deep(.messages-container) {
   min-height: 0;
 }
 
 /* Hide the entire chat header + its separator — sidebar owns this UI */
-.home-ai-panel .chat-header,
-.home-ai-panel .chat-content-wrapper > [role="separator"] {
+.home-ai-panel :deep(.chat-header),
+.home-ai-panel :deep(.chat-content-wrapper > [role="separator"]) {
   display: none;
 }
 
 /* Gradient border on the prompt input — home tab only.
    Uses the dual-background trick: bg color for padding-box, gradient for border-box.
-   2px border for stronger presence + layered shadows for depth. */
-.home-ai-panel .unified-input-box {
+   Heavier border for stronger presence + layered shadows for depth. */
+.home-ai-panel :deep(.unified-input-box) {
+  --color-ai-input-bg: var(--color-white);
   position: relative;
-  border: 2px solid transparent !important;
+  border: 0.125rem solid transparent !important;
   background:
-    linear-gradient(
-        var(--o2-ai-input-bg, #ffffff),
-        var(--o2-ai-input-bg, #ffffff)
-      )
-      padding-box,
-    linear-gradient(90deg, #f59e0b, #ec4899, #7b61ff) border-box !important;
+    linear-gradient(var(--color-ai-input-bg), var(--color-ai-input-bg)) padding-box,
+    var(--color-gradient-brand-ribbon) border-box !important;
   box-shadow:
-    0 2px 4px rgba(15, 23, 42, 0.06),
-    0 8px 20px -2px rgba(15, 23, 42, 0.12),
-    0 18px 44px -10px rgba(123, 97, 255, 0.3) !important;
+    0 0.125rem 0.25rem color-mix(in srgb, var(--color-black) 6%, transparent),
+    0 0.5rem 1.25rem -0.125rem color-mix(in srgb, var(--color-black) 12%, transparent),
+    0 1.125rem 2.75rem -0.625rem color-mix(in srgb, var(--color-ai-accent) 30%, transparent) !important;
 }
 
-.home-ai-panel .unified-input-box {
-  --o2-ai-input-bg: #ffffff;
-}
-
-.dark .home-ai-panel .unified-input-box {
-  --o2-ai-input-bg: #191919;
+.dark .home-ai-panel :deep(.unified-input-box) {
+  --color-ai-input-bg: var(--color-surface-panel);
   box-shadow:
-    0 2px 4px rgba(0, 0, 0, 0.45),
-    0 8px 22px -2px rgba(0, 0, 0, 0.55),
-    0 20px 48px -10px rgba(123, 97, 255, 0.45) !important;
+    0 0.125rem 0.25rem color-mix(in srgb, var(--color-black) 45%, transparent),
+    0 0.5rem 1.375rem -0.125rem color-mix(in srgb, var(--color-black) 55%, transparent),
+    0 1.25rem 3rem -0.625rem color-mix(in srgb, var(--color-ai-accent) 45%, transparent) !important;
 }
 
 /* Soft ambient glow behind the input */
-.home-ai-panel .unified-input-box::before {
+.home-ai-panel :deep(.unified-input-box::before) {
   content: "";
   position: absolute;
-  inset: -10px;
+  inset: -0.625rem;
   border-radius: inherit;
-  background: linear-gradient(90deg, #f59e0b, #ec4899, #7b61ff);
+  background: var(--color-gradient-brand-ribbon);
   opacity: 0.22;
-  filter: blur(22px);
+  filter: blur(1.375rem);
   z-index: -1;
   pointer-events: none;
 }
 
 /* Stronger glow + shadow on focus, no harsh ring */
-.home-ai-panel .unified-input-box:focus-within {
+.home-ai-panel :deep(.unified-input-box:focus-within) {
   box-shadow:
-    0 1px 2px rgba(15, 23, 42, 0.04),
-    0 6px 16px -2px rgba(15, 23, 42, 0.1),
-    0 16px 40px -8px rgba(123, 97, 255, 0.32) !important;
+    0 1px 0.125rem color-mix(in srgb, var(--color-black) 4%, transparent),
+    0 0.375rem 1rem -0.125rem color-mix(in srgb, var(--color-black) 10%, transparent),
+    0 1rem 2.5rem -0.5rem color-mix(in srgb, var(--color-ai-accent) 32%, transparent) !important;
 }
 
-.dark .home-ai-panel .unified-input-box:focus-within {
+.dark .home-ai-panel :deep(.unified-input-box:focus-within) {
   box-shadow:
-    0 1px 2px rgba(0, 0, 0, 0.4),
-    0 6px 20px -2px rgba(0, 0, 0, 0.55),
-    0 18px 44px -8px rgba(123, 97, 255, 0.42) !important;
+    0 1px 0.125rem color-mix(in srgb, var(--color-black) 40%, transparent),
+    0 0.375rem 1.25rem -0.125rem color-mix(in srgb, var(--color-black) 55%, transparent),
+    0 1.125rem 2.75rem -0.5rem color-mix(in srgb, var(--color-ai-accent) 42%, transparent) !important;
 }
 
-.home-ai-panel .unified-input-box:focus-within::before {
+.home-ai-panel :deep(.unified-input-box:focus-within::before) {
   opacity: 0.4;
 }
 
diff --git a/web/src/views/IdentityAccessManagement.spec.ts b/web/src/views/IdentityAccessManagement.spec.ts
index 912f7fc3ba..96d47c8e62 100644
--- a/web/src/views/IdentityAccessManagement.spec.ts
+++ b/web/src/views/IdentityAccessManagement.spec.ts
@@ -16,7 +16,6 @@
 import { describe, expect, it, beforeEach, vi, afterEach } from "vitest";
 import { mount, flushPromises, VueWrapper } from "@vue/test-utils";
 import IdentityAccessManagement from "@/views/IdentityAccessManagement.vue";
-import RouteTabs from "@/components/RouteTabs.vue";
 import i18n from "@/locales";
 import store from "@/test/unit/helpers/store";
 import router from "@/test/unit/helpers/router";
@@ -45,8 +44,7 @@ function allItems(sectionGroups: any[]): any[] {
 
 const defaultStubs = {
   RouterView: { template: "<div>Router View</div>" },
-  RouteTabs: true,
-  PageLayout: {
+  OPageLayout: {
     template:
       '<div><slot name="sidebar" /><slot /></div>',
   },
@@ -92,10 +90,6 @@ describe("IdentityAccessManagement.vue Component", () => {
     it("should have the correct component structure", () => {
       expect(wrapper.element.tagName).toBe("DIV");
     });
-
-    it("should have RouteTabs component available", () => {
-      expect(RouteTabs).toBeDefined();
-    });
   });
 
   describe("Setup Function Tests", () => {
diff --git a/web/src/views/IdentityAccessManagement.vue b/web/src/views/IdentityAccessManagement.vue
index c5f799a848..f9907ab623 100644
--- a/web/src/views/IdentityAccessManagement.vue
+++ b/web/src/views/IdentityAccessManagement.vue
@@ -17,7 +17,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <!-- Grouped left rail (prototype admin model): the rail is always present;
        the chosen section renders its own page (header + table) to the right. -->
-  <PageLayout :sidebar-width="218" data-test="iam-page">
+  <OPageLayout bleed :sidebar-width="230" data-test="iam-page">
     <template #sidebar>
       <SectionRail
         :groups="sectionGroups"
@@ -28,11 +28,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <section class="h-full min-w-0 min-h-0 overflow-y-auto">
       <RouterView />
     </section>
-  </PageLayout>
+  </OPageLayout>
 </template>
 
 <script setup lang="ts">
-import PageLayout from "@/components/common/PageLayout.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import SectionRail from "@/components/common/SectionRail.vue";
 import {
   type SectionHubGroup,
diff --git a/web/src/views/Ingestion.spec.ts b/web/src/views/Ingestion.spec.ts
index 5def41d098..5fd7fc82ac 100644
--- a/web/src/views/Ingestion.spec.ts
+++ b/web/src/views/Ingestion.spec.ts
@@ -130,14 +130,10 @@ describe("Ingestion", () => {
               props: ['title', 'message', 'modelValue'],
               emits: ['update:ok', 'update:cancel']
             },
-                        'q-btn': { template: '<button class="q-btn" @click="$emit(\'click\')"><slot /></button>', emits: ['click'] },
-            'q-tabs': { template: '<div class="q-tabs"><slot /></div>' },
-            'q-route-tab': { template: '<div class="q-route-tab"><slot /></div>' },
             OButton: { template: '<button class="o-button-stub" @click="$emit(\'click\')"><slot /></button>', props: ['variant', 'size', 'disabled', 'icon', 'title', 'data-test', 'class'], emits: ['click'] },
             OTabs: { template: '<div class="o-tabs-stub"><slot /></div>', props: ['modelValue', 'horizontal', 'align'], emits: ['update:modelValue'] },
             ORouteTab: { template: '<div class="o-route-tab-stub"><slot /></div>', props: ['name', 'to', 'label', 'icon'] },
-            'q-separator': { template: '<div class="q-separator"></div>' },
-            'router-view': { 
+            'router-view': {
               template: '<div class="router-view" @copy-to-clipboard-fn="$emit(\'copy-to-clipboard-fn\', $event)"><slot /></div>', 
               emits: ['copy-to-clipboard-fn']
             },
diff --git a/web/src/views/Ingestion.vue b/web/src/views/Ingestion.vue
index 68ac24b797..908c75e1de 100644
--- a/web/src/views/Ingestion.vue
+++ b/web/src/views/Ingestion.vue
@@ -17,17 +17,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <!-- eslint-disable vue/x-invalid-end-tag -->
 <template>
-  <div class="ingestionPage h-full flex flex-col" data-test="ingestion-page">
-    <!-- Standard page header: title + icon. Search / token controls live in the
-         toolbar row below. -->
-    <!-- Standard page header: title + icon, with search / token controls and the
-         Manage-Tokens action on the SAME header line. -->
-    <AppPageHeader
-      :title="t('ingestion.header')"
-      icon="data-plus-line"
-      tabs-below
-      class="shrink-0 px-4"
-    >
+  <OPageLayout
+    class="ingestionPage"
+    data-test="ingestion-page"
+    :title="t('ingestion.header')"
+    icon="data-plus-line"
+    tabs-below
+    bleed
+  >
       <template #actions>
         <div class="w-50 flex-none">
           <OSearchInput
@@ -82,7 +79,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           {{ t(`ingestion.generateRUMTokenLabel`) }}
         </OButton>
       </template>
-      <template #tabs>
+      <template #header-tabs>
         <!-- Pull the strip left (cancel the header's px-4) so the first tab lines
              up with the vertical sub-nav (Kubernetes/…) in the section below. -->
         <div class="-ml-3 w-full">
@@ -145,7 +142,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </OTabs>
         </div>
       </template>
-    </AppPageHeader>
     <ConfirmDialog
       title="Reset RUM Token"
       message="Are you sure you want to update rum token for this organization?"
@@ -160,7 +156,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         store.state.zoConfig.restricted_routes_on_empty_data == true &&
         store.state.organizationData.isDataIngested == false
       "
-      class="text-subtitle bg-amber-500 p-2 font-bold mx-2.5 mt-1 rounded-md"
+      class="text-subtitle bg-warning p-2 font-bold mx-2.5 mt-1 rounded-default"
     >
       {{ t("ingestion.redirectionIngestionMsg") }}
     </div>
@@ -173,7 +169,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       >
       </router-view>
     </div>
-  </div>
+  </OPageLayout>
 </template>
 
 <script lang="ts">
@@ -181,7 +177,7 @@ import ORouteTab from "@/lib/navigation/Tabs/ORouteTab.vue";
 import OTabs from "@/lib/navigation/Tabs/OTabs.vue";
 import OButton from "@/lib/core/Button/OButton.vue";
 import OSearchInput from "@/lib/forms/SearchInput/OSearchInput.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 // @ts-ignore
 import {
   defineComponent,
@@ -209,7 +205,7 @@ import { toast } from "@/lib/feedback/Toast/useToast";
 
 export default defineComponent({
   name: "PageIngestion",
-  components: { AppPageHeader, ConfirmDialog, OTabs, ORouteTab, OButton, OSearchInput,
+  components: { OPageLayout, ConfirmDialog, OTabs, ORouteTab, OButton, OSearchInput,
     OSelect,
 },
   setup() {
diff --git a/web/src/views/LogStream.spec.ts b/web/src/views/LogStream.spec.ts
index b51b8d88fc..3848c28efb 100644
--- a/web/src/views/LogStream.spec.ts
+++ b/web/src/views/LogStream.spec.ts
@@ -243,7 +243,7 @@ describe("LogStream Component", () => {
     });
 
     it("should display correct title", () => {
-      // Title now lives in the standard AppPageHeader (row 1).
+      // Title now lives in the standard OPageHeader (row 1).
       const title = wrapper.find(".app-page-header h1");
       expect(title.exists()).toBe(true);
       expect(title.text()).toBe("Streams");
diff --git a/web/src/views/LogStream.vue b/web/src/views/LogStream.vue
index a9cd5166f2..e4014a8159 100644
--- a/web/src/views/LogStream.vue
+++ b/web/src/views/LogStream.vue
@@ -18,18 +18,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <!-- eslint-disable vue/attribute-hyphenation -->
 <template>
   <div data-test="alert-list-page" class="h-full">
-    <PageLayout
-      :header-class="'shrink-0 px-4 border-b border-border-default'"
+    <OPageLayout bleed
+      :title="t('logStream.header')"
+      title-data-test="log-stream-title-text"
+      :subtitle="t('logStream.subtitle')"
+      icon="window"
     >
-      <!-- Row 1: standard header — title + actions only. The stream-type filter
-           and search moved into the table's own toolbar below. -->
-      <template #header>
-        <AppPageHeader
-          :title="t('logStream.header')"
-          title-data-test="log-stream-title-text"
-          :subtitle="t('logStream.subtitle')"
-          icon="window"
-        >
           <template #actions>
             <OButton
               v-if="isSchemaUDSEnabled"
@@ -41,10 +35,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               {{ t(`logStream.add`) }}
             </OButton>
           </template>
-        </AppPageHeader>
-      </template>
 
-      <div class="card-container h-full">
+      <div class="bg-card-glass-bg h-full">
       <OTable
         data-test="log-stream-table"
         :data="logStream"
@@ -68,7 +60,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :enable-column-resize="true"
         :persist-columns="true"
         table-id="streams-log-stream-list"
-        style="width: 100%; height: 100%"
+        class="w-full h-full"
       >
           <!-- Toolbar inside the table frame: stream-type filter + search. -->
           <template #toolbar>
@@ -134,7 +126,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             `dashboard-name-cell-<name>` pattern in Dashboards.vue.
           -->
           <template #cell-name="{ row }">
-            <span :data-test="`log-stream-name-cell-${row.name}`" class="text-text-primary">{{ row.name }}</span>
+            <span :data-test="`log-stream-name-cell-${row.name}`" class="text-text-body">{{ row.name }}</span>
           </template>
           <template #cell-actions="{ row }">
              <div class="flex items-center actions-container">
@@ -219,7 +211,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               class="flex items-center justify-between w-full py-2"
             >
               <div
-                class="flex items-center w-full o2-table-footer-title"
+                class="flex items-center w-full text-xs font-normal"
               >
                 {{ scope.totalRows }} Stream(s)
                 <OButton
@@ -238,7 +230,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </template>
         </OTable>
       </div>
-    </PageLayout>
+    </OPageLayout>
 
     <SchemaIndex v-if="showIndexSchemaDialog" v-model="schemaData" v-model:open="showIndexSchemaDialog" @close="showIndexSchemaDialog = false" />
 
@@ -262,12 +254,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <div class="flex flex-col gap-3 py-1">
         <p class="text-sm">{{ t("logStream.confirmDeleteMsg") }}</p>
         <div
-          class="w-full flex items-center gap-2 text-sm text-gray-500"
+          class="w-full flex items-center gap-2 text-sm text-text-secondary"
         >
           <OCheckbox
             v-model="deleteAssociatedAlertsPipelines"
           />
-          <span class="text-(--o2-text-secondary) text-xs font-medium">
+          <span class="text-text-secondary text-xs font-medium">
             {{ t("logStream.deleteAssociatedAlertsPipelines") }}
           </span>
         </div>
@@ -287,12 +279,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <div class="flex flex-col gap-3 py-1">
         <p class="text-sm">{{ t("logStream.confirmBatchDeleteMsg") }}</p>
         <div
-          class="w-full flex items-center gap-2 text-sm text-gray-500"
+          class="w-full flex items-center gap-2 text-sm text-text-secondary"
         >
           <OCheckbox
             v-model="deleteAssociatedAlertsPipelines"
           />
-          <span class="text-(--o2-text-secondary) text-xs font-medium">
+          <span class="text-text-secondary text-xs font-medium">
             Delete all Pipelines and Alerts associated with the selected streams
           </span>
         </div>
@@ -318,8 +310,7 @@ import { useI18n } from "vue-i18n";
 
 import OTable from "@/lib/core/Table/OTable.vue";
 import { COL, type OTableColumnDef } from "@/lib/core/Table/OTable.types";
-import PageLayout from "@/components/common/PageLayout.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import streamService from "../services/stream";
 import SchemaIndex from "../components/logstream/schema.vue";
 import OEmptyState from "@/lib/core/EmptyState/OEmptyState.vue";
@@ -351,8 +342,7 @@ import { focusSearchInput, isInputFocused } from "@/utils/keyboardShortcuts";
 export default defineComponent({
   name: "PageLogStream",
   components: {
-    PageLayout,
-    AppPageHeader,
+    OPageLayout,
     SchemaIndex,
     OEmptyState,
     EmptyStateIngestionChip,
diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue
index 65ee72ce7f..3cf565e101 100644
--- a/web/src/views/Login.vue
+++ b/web/src/views/Login.vue
@@ -22,7 +22,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         class="w-auto max-w-50 h-10 max-h-10 cursor-pointer"
         loading="lazy"
         :src="
-          store?.state?.theme == 'dark'
+          isDark
             ? getImageURL('images/common/openobserve_latest_dark_2.svg')
             : getImageURL('images/common/openobserve_latest_light_2.svg')
         "
@@ -44,6 +44,7 @@ import InvitationList from "@/components/iam/users/InvitationList.vue";
 import config from "@/aws-exports";
 import configService from "@/services/config";
 import { useStore } from "vuex";
+import { useTheme } from "@/composables/useTheme";
 import {
   getUserInfo,
   getDecodedUserInfo,
@@ -69,6 +70,7 @@ export default defineComponent({
   },
   setup() {
     const store = useStore();
+    const { isDark } = useTheme();
     let orgOptions = ref([{ label: Number, value: String }]);
     const selectedOrg = ref({});
     const router: any = useRouter();
@@ -272,6 +274,7 @@ export default defineComponent({
 
     return {
       store,
+      isDark,
       config,
       router,
       redirectUser,
diff --git a/web/src/views/Logs.spec.ts b/web/src/views/Logs.spec.ts
deleted file mode 100644
index 61f7a073ec..0000000000
--- a/web/src/views/Logs.spec.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-// Copyright 2026 OpenObserve Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import { describe, expect, it, beforeEach, vi, afterEach } from "vitest";
-import { mount, flushPromises } from "@vue/test-utils";
-import Logs from "@/views/Logs.vue";
-import i18n from "@/locales";
-import store from "@/test/unit/helpers/store";
-import SearchPlugin from "@/test/unit/helpers/logSearchPlugin";
-import router from "@/test/unit/helpers/router";
-
-const node = document.createElement("div");
-node.setAttribute("id", "app");
-document.body.appendChild(node);
-
-SearchPlugin({});
-
-
-describe.skip("Alert List", async () => {
-  let wrapper: any;
-  beforeEach(async () => {
-    
-    wrapper = mount(Logs, {
-      attachTo: "#app",
-      global: {
-        provide: {
-          store: store,
-        },
-        plugins: [i18n, router],
-      },
-    });
-    await flushPromises();
-  });
-
-  afterEach(() => {
-    wrapper.unmount();
-  });
-
-  it("Should render zinc logs plugin", () => {
-    expect(wrapper.find('[data-test="zinc-logs"]').exists()).toBe(true);
-  });
-});
diff --git a/web/src/views/Logs.vue b/web/src/views/Logs.vue
deleted file mode 100644
index f7f38d6ae3..0000000000
--- a/web/src/views/Logs.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<!-- eslint-disable vue/attribute-hyphenation -->
-<!-- eslint-disable vue/v-on-event-hyphenation -->
-<template>
-  <zinc-logs data-test="zinc-logs" pageType="logs"></zinc-logs>
-</template>
diff --git a/web/src/views/MemberSubscription.spec.ts b/web/src/views/MemberSubscription.spec.ts
index 7d25907147..f6ee5336aa 100644
--- a/web/src/views/MemberSubscription.spec.ts
+++ b/web/src/views/MemberSubscription.spec.ts
@@ -82,10 +82,6 @@ describe('MemberSubscription.vue', () => {
           $store: store,
         },
         stubs: {
-                    'q-btn': {
-            template: '<button class="q-btn"><slot /></button>',
-            props: ['label'],
-          },
           'SanitizedHtmlRenderer': {
             template: '<div class="sanitized-html" data-test="sanitized-html">{{ htmlContent }}</div>',
             props: ['htmlContent'],
@@ -128,7 +124,7 @@ describe('MemberSubscription.vue', () => {
       wrapper = createWrapper('#token=test-token-123', true); // Prevent auto processing
       await wrapper.vm.$nextTick();
       
-      expect(wrapper.find('.rounded-md').exists()).toBe(true);
+      expect(wrapper.find('.rounded-default').exists()).toBe(true);
       expect(wrapper.text()).toContain('Member Subscription');
     });
 
diff --git a/web/src/views/MemberSubscription.vue b/web/src/views/MemberSubscription.vue
index f9d79633a1..7831454892 100644
--- a/web/src/views/MemberSubscription.vue
+++ b/web/src/views/MemberSubscription.vue
@@ -15,16 +15,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="rounded-md">
+  <div class="rounded-default">
     <div
-      style="text-align: center; width: 100%; font-size: 30px; margin: 40px 0px"
+      class="text-center w-full"
+      style="font-size: var(--text-3xl); margin: 40px 0px"
     >
       Member Subscription
     </div>
     <div v-if="status == 'processing'">{{ message }}</div>
     <div
       v-else-if="status == 'error' && error == ''"
-      style="text-align: center"
+      class="text-center"
     >
       Error while processing member subscription request.<br /><br />
     </div>
@@ -39,7 +40,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     <!-- <div
       v-if="status == 'error' && error !== ''"
-      class="subscription_message q-btn-primary"
+      class="subscription_message"
     >
       <b>Please click the button below to proceed with your subscription after taking above mentioned action.</b><br />
       <OButton variant="primary" class="mt-3" @click="ProcessSubscription(queryString, 'confirm')">Confirm Member Subscription</OButton>
diff --git a/web/src/views/OverviewSkeleton.vue b/web/src/views/OverviewSkeleton.vue
new file mode 100644
index 0000000000..3f0202f621
--- /dev/null
+++ b/web/src/views/OverviewSkeleton.vue
@@ -0,0 +1,116 @@
+<!-- Copyright 2026 OpenObserve Inc.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<!--
+  OverviewSkeleton — first-load placeholder for ONE OverviewTab section.
+
+  Rendered per section (`section` prop) rather than as one block, because the
+  four datasets resolve independently: a global placeholder disappears the moment
+  the *first* dataset lands, leaving the still-loading sections blank until they
+  pop in. Each section instead stands in for itself and is replaced only by its
+  own data.
+
+  Shapes mirror the real sections so the layout doesn't shift on swap:
+    incidents     joined rows in one bordered container (icon, tag, title, time)
+    services      horizontally scrolling fixed-width cards
+    anomalies     free-standing rows, gap-separated
+    recentEvents  joined compact rows (denser padding than incidents)
+
+  Row counts are deliberately small: a placeholder should suggest shape, not
+  imply a quantity we don't know yet.
+-->
+<template>
+  <section class="mb-5" :data-test="`overview-skeleton-${section}`">
+    <!-- Every real section carries a title + count chip + View all -->
+    <div class="flex items-center justify-between mb-2 pl-1">
+      <div class="flex items-center gap-2">
+        <OSkeleton class="w-28 h-4" />
+        <OSkeleton class="w-6 h-4" />
+      </div>
+      <OSkeleton class="w-14 h-3" />
+    </div>
+
+    <!-- INCIDENTS: joined rows inside one bordered container -->
+    <div
+      v-if="section === 'incidents'"
+      class="flex flex-col border border-[0.0625em] border-border-default rounded-default overflow-hidden"
+    >
+      <div
+        v-for="i in 2"
+        :key="i"
+        class="flex items-center gap-3 py-2.5 px-3.5 bg-surface-base border-b-[0.0625em] border-b-border-default last:border-b-0"
+      >
+        <OSkeleton type="circle" class="w-4 shrink-0" />
+        <OSkeleton class="w-8 h-4 shrink-0" />
+        <OSkeleton class="h-4 max-w-[20em]" />
+        <OSkeleton class="w-12 h-3 shrink-0" />
+      </div>
+    </div>
+
+    <!-- SERVICES: scroll chevron + fixed-width cards -->
+    <div v-else-if="section === 'services'" class="flex items-stretch gap-2">
+      <OSkeleton class="w-6 shrink-0 rounded-default" />
+      <div class="flex flex-row gap-2 flex-1 overflow-hidden">
+        <div
+          v-for="i in 4"
+          :key="i"
+          class="py-3 px-3.5 rounded-default border border-[0.0625em] border-border-default bg-surface-base basis-40 grow-0 shrink-0 min-w-40 max-w-40 flex flex-col gap-2"
+        >
+          <OSkeleton class="h-4 max-w-[7em]" />
+          <OSkeleton class="h-3 max-w-[4.5em]" />
+        </div>
+      </div>
+    </div>
+
+    <!-- ANOMALIES: free-standing rows, gap-separated -->
+    <div v-else-if="section === 'anomalies'" class="flex flex-col gap-1.5">
+      <div
+        v-for="i in 2"
+        :key="i"
+        class="flex items-center gap-3 py-2.5 px-3.5 rounded-default border border-[0.0625em] border-border-default bg-surface-base"
+      >
+        <OSkeleton type="circle" class="w-4 shrink-0" />
+        <OSkeleton class="h-4 max-w-[24em]" />
+      </div>
+    </div>
+
+    <!-- RECENT EVENTS: joined compact rows -->
+    <div
+      v-else
+      class="flex flex-col gap-0 border border-[0.0625em] border-border-default rounded-default overflow-hidden bg-surface-base"
+    >
+      <div
+        v-for="i in 3"
+        :key="i"
+        class="flex items-center gap-3 py-2 px-3.5 border-b border-b-[0.0625em] border-b-border-default last:border-b-0"
+      >
+        <OSkeleton class="w-12 h-4 shrink-0" />
+        <OSkeleton class="w-[7.5em] h-3 shrink-0" />
+        <OSkeleton class="h-3 flex-1" />
+        <OSkeleton class="w-8 h-3 shrink-0" />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import OSkeleton from "@/lib/feedback/Skeleton/OSkeleton.vue";
+
+defineProps<{
+  /** Which OverviewTab section this placeholder stands in for. */
+  section: "incidents" | "services" | "anomalies" | "recentEvents";
+}>();
+</script>
diff --git a/web/src/views/OverviewTab.spec.ts b/web/src/views/OverviewTab.spec.ts
new file mode 100644
index 0000000000..1ba075fc01
--- /dev/null
+++ b/web/src/views/OverviewTab.spec.ts
@@ -0,0 +1,629 @@
+// Copyright 2026 OpenObserve Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import { describe, expect, it, beforeEach, afterEach, vi } from "vitest";
+import { mount, VueWrapper, flushPromises } from "@vue/test-utils";
+import { nextTick } from "vue";
+import store from "@/test/unit/helpers/store";
+import router from "@/test/unit/helpers/router";
+import i18n from "@/locales";
+import mockOverview from "@/test/unit/mockData/overview";
+
+// ── Module mocks (hoisted — the real modules are never loaded) ───────────────
+// Data payloads are wired up per-test in beforeEach so each `it()` owns its
+// own state; the factories below stay data-free to survive vi.mock hoisting.
+
+vi.mock("@/services/alerts", () => ({
+  default: { getHistory: vi.fn() },
+}));
+vi.mock("@/services/anomaly_detection", () => ({
+  default: { list: vi.fn(), getAllHistory: vi.fn(), getHistory: vi.fn() },
+}));
+vi.mock("@/services/incidents", () => ({
+  default: { list: vi.fn() },
+}));
+vi.mock("@/services/service_graph", () => ({
+  default: { getCurrentTopology: vi.fn() },
+}));
+
+// Heavy children — stubbed to keep the suite focused on OverviewTab's own
+// render gating. OverviewSkeleton and OEmptyState are deliberately left REAL
+// so the assertions below exercise the actual rendered output.
+vi.mock("@/components/DateTime.vue", () => ({
+  default: {
+    name: "DateTime",
+    props: [
+      "autoApply",
+      "menuAlign",
+      "defaultType",
+      "defaultAbsoluteTime",
+      "defaultRelativeTime",
+    ],
+    emits: ["on:date-change"],
+    template: '<div data-test="overview-date-time-stub" />',
+  },
+}));
+vi.mock("@/lib/core/RefreshButton/ORefreshButton.vue", () => ({
+  default: {
+    name: "ORefreshButton",
+    props: ["lastRunAt", "loading", "disabled"],
+    emits: ["click"],
+    template:
+      '<button data-test="overview-refresh-btn-stub" @click="$emit(\'click\')" />',
+  },
+}));
+vi.mock("@/plugins/traces/ServiceGraphNodeSidePanel.vue", () => ({
+  default: {
+    name: "ServiceGraphNodeSidePanel",
+    props: ["selectedNode", "graphData", "timeRange", "visible", "streamFilter"],
+    emits: ["close", "view-traces"],
+    template: '<div data-test="overview-service-panel-stub" />',
+  },
+}));
+vi.mock("@/components/alerts/AlertHistoryDrawer.vue", () => ({
+  default: {
+    name: "AlertHistoryDrawer",
+    props: ["open", "alertDetails", "alertId", "alertType"],
+    emits: ["update:open"],
+    template: '<div data-test="overview-alert-history-drawer-stub" />',
+  },
+}));
+
+import alertsService from "@/services/alerts";
+import anomalyService from "@/services/anomaly_detection";
+import incidentsService from "@/services/incidents";
+import serviceGraphService from "@/services/service_graph";
+import config from "@/aws-exports";
+import OverviewTab from "./OverviewTab.vue";
+
+// OverviewTab renders only O2 `lib` components.
+
+// ── Local helpers ────────────────────────────────────────────────────────────
+
+type SectionKey = "incidents" | "services" | "anomalies" | "recentEvents";
+
+interface Deferred<T> {
+  promise: Promise<T>;
+  resolve: (value: T) => void;
+}
+
+/** A promise whose settlement the test controls — lets one section hang while
+ *  the others resolve, which is how the interleaving tests below are staged. */
+function deferred<T>(): Deferred<T> {
+  let resolve!: (value: T) => void;
+  const promise = new Promise<T>((res) => {
+    resolve = res;
+  });
+  return { promise, resolve };
+}
+
+const mountOverviewTab = () =>
+  mount(OverviewTab, {
+    global: { plugins: [i18n, store, router] },
+  });
+
+/**
+ * `hasAnyData` / `isLoading` / `sectionState` are `<script setup>` bindings with
+ * no public API. Reading them is how we pin the state machine itself: a
+ * template-only assertion cannot tell "computed returns false" from "identifier
+ * was deleted and silently evaluates to undefined".
+ */
+const internals = (w: VueWrapper) =>
+  w.vm as unknown as {
+    hasAnyData: boolean;
+    isLoading: boolean;
+    sectionState: Record<SectionKey, { loading: boolean; loaded: boolean }>;
+  };
+
+describe("OverviewTab", () => {
+  let wrapper: VueWrapper;
+  let orgSeq = 0;
+  let originalZoConfig: Record<string, unknown>;
+  let originalFlags: { isEnterprise: string; isCloud: string };
+
+  const EMPTY_STATE = '[data-test="overview-all-clear-empty-state"]';
+  const RECENT_EVENTS = '[data-test="overview-recent-events-section"]';
+  const ANOMALIES = '[data-test="overview-anomalies-section"]';
+  const INCIDENTS = '[data-test="overview-incidents-section"]';
+  const SERVICES = '[data-test="overview-services-section"]';
+  const REFRESH_BTN = '[data-test="overview-refresh-btn-stub"]';
+
+  const skeletonOf = (section: SectionKey) =>
+    `[data-test="overview-skeleton-${section}"]`;
+
+  /**
+   * Every skeleton currently on screen, by section. Asserted against an exact
+   * array rather than `.exists() === false` per selector: a prefix query keeps
+   * working if the sections are renamed, so a typo'd selector can't quietly
+   * turn a "no skeleton" assertion into a vacuous pass.
+   */
+  const visibleSkeletons = () =>
+    wrapper
+      .findAll('[data-test^="overview-skeleton-"]')
+      .map((s) => s.attributes("data-test")?.replace("overview-skeleton-", ""));
+
+  /** Resolve every loader with an empty payload — the "no data" baseline. */
+  const givenNoData = () => {
+    vi.mocked(alertsService.getHistory).mockResolvedValue({
+      data: mockOverview.emptyAlertHistory,
+    } as never);
+    vi.mocked(anomalyService.list).mockResolvedValue({ data: [] } as never);
+    vi.mocked(anomalyService.getAllHistory).mockResolvedValue({
+      data: { configs: [] },
+    } as never);
+    vi.mocked(incidentsService.list).mockResolvedValue({
+      data: mockOverview.emptyIncidentList,
+    } as never);
+    vi.mocked(serviceGraphService.getCurrentTopology).mockResolvedValue({
+      data: mockOverview.emptyServiceGraphTopology,
+    } as never);
+  };
+
+  /** Recent Events is the one section that renders on OSS and enterprise alike. */
+  const givenRecentEvents = () => {
+    vi.mocked(alertsService.getHistory).mockResolvedValue({
+      data: mockOverview.buildAlertHistory(),
+    } as never);
+  };
+
+  /** Make the anomalies fetch hang until the returned deferred is resolved. */
+  const givenAnomaliesHang = () => {
+    const pending = deferred<{ data: unknown[] }>();
+    vi.mocked(anomalyService.list).mockReturnValue(pending.promise as never);
+    return pending;
+  };
+
+  /** Make the recent-events fetch hang until the returned deferred is resolved. */
+  const givenRecentEventsHang = () => {
+    const pending = deferred<{ data: { hits: unknown[] } }>();
+    vi.mocked(alertsService.getHistory).mockReturnValue(pending.promise as never);
+    return pending;
+  };
+
+  beforeEach(() => {
+    originalZoConfig = { ...store.state.zoConfig };
+
+    // Pin the build flags to OSS. `config` is built from import.meta.env, and
+    // this repo's .env sets VITE_OPENOBSERVE_ENTERPRISE=true — so without this
+    // the suite would inherit whatever the local/CI .env happens to say and
+    // silently change which sections exist. The enterprise-gated branches get
+    // their own describe below, which opts in explicitly.
+    originalFlags = { isEnterprise: config.isEnterprise, isCloud: config.isCloud };
+    config.isEnterprise = "false";
+    config.isCloud = "false";
+
+    // OverviewTab caches anomaly history in a module-level Map keyed by org id.
+    // A unique org per test keeps that cache cold, so no test can inherit
+    // another's anomalies.
+    store.commit("setSelectedOrganization", {
+      ...store.state.selectedOrganization,
+      identifier: `overview-org-${++orgSeq}`,
+    });
+    // The time window is persisted to localStorage; drop it so every mount
+    // computes the same fresh relative window.
+    localStorage.removeItem("o2_overview_time");
+
+    givenNoData();
+  });
+
+  afterEach(() => {
+    wrapper?.unmount();
+    store.commit("setConfig", originalZoConfig);
+    config.isEnterprise = originalFlags.isEnterprise;
+    config.isCloud = originalFlags.isCloud;
+    vi.clearAllMocks();
+  });
+
+  describe("loaded with no data", () => {
+    beforeEach(async () => {
+      wrapper = mountOverviewTab();
+      await flushPromises();
+    });
+
+    it("should render the all-clear empty state when loading finished with no data", () => {
+      expect(internals(wrapper).isLoading).toBe(false);
+      expect(internals(wrapper).hasAnyData).toBe(false);
+      expect(wrapper.find(EMPTY_STATE).exists()).toBe(true);
+    });
+
+    it("should not render any skeleton when loading finished with no data", () => {
+      expect(visibleSkeletons()).toEqual([]);
+    });
+
+    it("should not render any content section when there is no data", () => {
+      expect(wrapper.find(RECENT_EVENTS).exists()).toBe(false);
+      expect(wrapper.find(ANOMALIES).exists()).toBe(false);
+    });
+  });
+
+  describe("first load with every section still in flight", () => {
+    let anomaliesPending: Deferred<{ data: unknown[] }>;
+    let recentEventsPending: Deferred<{ data: { hits: unknown[] } }>;
+
+    beforeEach(async () => {
+      // Recreated per test — a describe-scoped deferred would already be
+      // settled by the time the second test mounts.
+      anomaliesPending = givenAnomaliesHang();
+      recentEventsPending = givenRecentEventsHang();
+      wrapper = mountOverviewTab();
+      await nextTick();
+    });
+
+    afterEach(() => {
+      anomaliesPending.resolve({ data: [] });
+      recentEventsPending.resolve({ data: { hits: [] } });
+    });
+
+    it("should render a skeleton for each pending section when nothing has landed yet", () => {
+      expect(internals(wrapper).isLoading).toBe(true);
+      expect(internals(wrapper).hasAnyData).toBe(false);
+      // incidents/services are enterprise-gated and absent on OSS.
+      expect(visibleSkeletons()).toEqual(["anomalies", "recentEvents"]);
+    });
+
+    it("should not render the empty state while the first load is in flight", () => {
+      expect(wrapper.find(EMPTY_STATE).exists()).toBe(false);
+    });
+  });
+
+  // ── The bug this block exists for ─────────────────────────────────────────
+  // The four datasets are fetched concurrently and land at different times. A
+  // single global placeholder gated on `hasAnyData` dies the moment the FIRST
+  // dataset arrives, so the sections still in flight go blank and then pop in.
+  // Each section must hold its own placeholder until its own data lands.
+  describe("sections resolve independently", () => {
+    let anomaliesPending: Deferred<{ data: unknown[] }>;
+
+    beforeEach(async () => {
+      // Recent events resolves immediately with rows; anomalies hangs.
+      givenRecentEvents();
+      anomaliesPending = givenAnomaliesHang();
+      wrapper = mountOverviewTab();
+      await flushPromises();
+    });
+
+    afterEach(() => {
+      anomaliesPending.resolve({ data: [] });
+    });
+
+    it("should render the anomalies skeleton while anomalies are in flight and recent events have landed", () => {
+      // The exact user complaint: content and placeholder coexist. Under a
+      // global `isLoading && !hasAnyData` gate the arrival of recentEvents
+      // flips hasAnyData true and this skeleton vanishes.
+      expect(wrapper.find(RECENT_EVENTS).exists()).toBe(true);
+      expect(wrapper.find(RECENT_EVENTS).text()).toContain("High error rate");
+      expect(wrapper.find(skeletonOf("anomalies")).exists()).toBe(true);
+    });
+
+    it("should still be loading with data on screen while one section is pending", () => {
+      expect(internals(wrapper).isLoading).toBe(true);
+      expect(internals(wrapper).hasAnyData).toBe(true);
+    });
+
+    it("should not render a skeleton for the section that already landed", () => {
+      expect(visibleSkeletons()).toEqual(["anomalies"]);
+      expect(internals(wrapper).sectionState.recentEvents).toEqual({
+        loading: false,
+        loaded: true,
+      });
+      expect(internals(wrapper).sectionState.anomalies).toEqual({
+        loading: true,
+        loaded: false,
+      });
+    });
+
+    it("should swap the anomalies skeleton for its content when the fetch resolves", async () => {
+      vi.mocked(anomalyService.list).mockResolvedValue({
+        data: mockOverview.anomalyConfigs,
+      } as never);
+      vi.mocked(anomalyService.getAllHistory).mockResolvedValue({
+        data: mockOverview.buildAnomalyHistory(),
+      } as never);
+      anomaliesPending.resolve({ data: mockOverview.anomalyConfigs });
+      await flushPromises();
+
+      expect(visibleSkeletons()).toEqual([]);
+      expect(wrapper.find(ANOMALIES).exists()).toBe(true);
+      expect(wrapper.find(RECENT_EVENTS).exists()).toBe(true);
+    });
+  });
+
+  describe("a section that completed with an empty result", () => {
+    let anomaliesPending: Deferred<{ data: unknown[] }>;
+
+    beforeEach(async () => {
+      givenRecentEvents();
+      anomaliesPending = givenAnomaliesHang();
+      wrapper = mountOverviewTab();
+      await flushPromises();
+    });
+
+    afterEach(() => {
+      anomaliesPending.resolve({ data: [] });
+    });
+
+    it("should not render a skeleton once the section resolves empty", async () => {
+      expect(wrapper.find(skeletonOf("anomalies")).exists()).toBe(true);
+
+      anomaliesPending.resolve({ data: [] });
+      await flushPromises();
+
+      // Empty is a legitimate answer — `loaded` is true, so it never
+      // re-skeletons even though the section renders nothing.
+      expect(internals(wrapper).sectionState.anomalies).toEqual({
+        loading: false,
+        loaded: true,
+      });
+      expect(wrapper.find(ANOMALIES).exists()).toBe(false);
+      expect(visibleSkeletons()).toEqual([]);
+    });
+  });
+
+  // ── The original regression ───────────────────────────────────────────────
+  // The skeleton is a first-load placeholder, not a refresh spinner. When it
+  // was gated on `isLoading` alone, refreshing with rows on screen rendered the
+  // skeleton BELOW them instead of standing in for them.
+  describe("refreshing with data already on screen", () => {
+    let pending: Deferred<{ data: { hits: unknown[] } }>;
+
+    beforeEach(async () => {
+      givenRecentEvents();
+      wrapper = mountOverviewTab();
+      await flushPromises();
+
+      // Second fetch never settles — freezes the component mid-refresh.
+      pending = givenRecentEventsHang();
+      await wrapper.find(REFRESH_BTN).trigger("click");
+      await nextTick();
+    });
+
+    afterEach(() => {
+      pending.resolve({ data: { hits: [] } });
+    });
+
+    it("should not render any skeleton when refreshing with data already on screen", () => {
+      expect(internals(wrapper).isLoading).toBe(true);
+      expect(internals(wrapper).hasAnyData).toBe(true);
+      expect(visibleSkeletons()).toEqual([]);
+    });
+
+    it("should keep the existing rows on screen while refreshing", () => {
+      expect(wrapper.find(RECENT_EVENTS).exists()).toBe(true);
+      expect(wrapper.find(RECENT_EVENTS).text()).toContain("High error rate");
+    });
+
+    it("should not render the empty state while refreshing with data on screen", () => {
+      expect(wrapper.find(EMPTY_STATE).exists()).toBe(false);
+    });
+
+    it("should pass the refresh loading state to the refresh button instead of a skeleton", () => {
+      const refreshBtn = wrapper.findComponent({ name: "ORefreshButton" });
+      expect(refreshBtn.exists()).toBe(true);
+      expect(refreshBtn.props("loading")).toBe(true);
+    });
+  });
+
+  // This is the ONLY arrangement that exercises the `!loaded` half of
+  // `isSectionPending`. A non-empty section renders its own `v-if` branch, so
+  // its `v-else-if` skeleton is unreachable no matter what the flag says — the
+  // section must be EMPTY (so the else-if is live) AND re-fetching. Anomalies
+  // can't be used: its cache short-circuits an unchanged window on refresh, so
+  // it never re-enters `loading`.
+  describe("refreshing a section that previously resolved empty", () => {
+    let recentEventsPending: Deferred<{ data: { hits: unknown[] } }>;
+
+    beforeEach(async () => {
+      // First load: anomalies has rows (so content is on screen), recent events
+      // legitimately empty.
+      vi.mocked(anomalyService.list).mockResolvedValue({
+        data: mockOverview.anomalyConfigs,
+      } as never);
+      vi.mocked(anomalyService.getAllHistory).mockResolvedValue({
+        data: mockOverview.buildAnomalyHistory(),
+      } as never);
+      wrapper = mountOverviewTab();
+      await flushPromises();
+
+      // Refresh: the recent-events fetch hangs, leaving that empty section
+      // loading-but-already-loaded.
+      recentEventsPending = givenRecentEventsHang();
+      await wrapper.find(REFRESH_BTN).trigger("click");
+      await nextTick();
+    });
+
+    afterEach(() => {
+      recentEventsPending.resolve({ data: { hits: [] } });
+    });
+
+    it("should not re-render a skeleton for a section that already resolved empty", () => {
+      // Preconditions: anomalies holds content, recent events is empty.
+      expect(wrapper.find(ANOMALIES).exists()).toBe(true);
+      expect(wrapper.find(RECENT_EVENTS).exists()).toBe(false);
+
+      // Empty is a legitimate answer, so `loaded` stays true and the section
+      // must not fall back to its placeholder while re-fetching.
+      expect(internals(wrapper).sectionState.recentEvents).toEqual({
+        loading: true,
+        loaded: true,
+      });
+      expect(visibleSkeletons()).toEqual([]);
+    });
+  });
+
+  describe("placeholder and content are mutually exclusive", () => {
+    let pending: Deferred<{ data: { hits: unknown[] } }>;
+
+    beforeEach(() => {
+      pending = deferred<{ data: { hits: unknown[] } }>();
+    });
+
+    afterEach(() => {
+      pending.resolve({ data: { hits: [] } });
+    });
+
+    it("should never render a skeleton or the empty state alongside content across the refresh lifecycle", async () => {
+      givenRecentEvents();
+      wrapper = mountOverviewTab();
+      await flushPromises();
+
+      // Phase 1 — loaded with data: content only.
+      expect(wrapper.find(RECENT_EVENTS).exists()).toBe(true);
+      expect(visibleSkeletons()).toEqual([]);
+      expect(wrapper.find(EMPTY_STATE).exists()).toBe(false);
+
+      // Phase 2 — refreshing with data: still content only.
+      vi.mocked(alertsService.getHistory).mockReturnValue(
+        pending.promise as never,
+      );
+      await wrapper.find(REFRESH_BTN).trigger("click");
+      await nextTick();
+      expect(wrapper.find(RECENT_EVENTS).exists()).toBe(true);
+      expect(visibleSkeletons()).toEqual([]);
+      expect(wrapper.find(EMPTY_STATE).exists()).toBe(false);
+
+      // Phase 3 — refresh returns nothing: empty state replaces the content.
+      pending.resolve({ data: { hits: [] } });
+      await flushPromises();
+      expect(wrapper.find(RECENT_EVENTS).exists()).toBe(false);
+      expect(visibleSkeletons()).toEqual([]);
+      expect(wrapper.find(EMPTY_STATE).exists()).toBe(true);
+    });
+  });
+
+  describe("hasAnyData sources", () => {
+    it("should count anomalies as data when the anomaly history returns hits", async () => {
+      vi.mocked(anomalyService.list).mockResolvedValue({
+        data: mockOverview.anomalyConfigs,
+      } as never);
+      vi.mocked(anomalyService.getAllHistory).mockResolvedValue({
+        data: mockOverview.buildAnomalyHistory(),
+      } as never);
+
+      wrapper = mountOverviewTab();
+      await flushPromises();
+
+      expect(internals(wrapper).hasAnyData).toBe(true);
+      expect(wrapper.find(ANOMALIES).exists()).toBe(true);
+      expect(wrapper.find(ANOMALIES).text()).toContain(
+        "Checkout latency anomaly",
+      );
+      expect(wrapper.find(EMPTY_STATE).exists()).toBe(false);
+      expect(visibleSkeletons()).toEqual([]);
+    });
+
+    it("should not count a failed alert history fetch as data", async () => {
+      vi.mocked(alertsService.getHistory).mockRejectedValue(
+        new Error("history unavailable"),
+      );
+
+      wrapper = mountOverviewTab();
+      await flushPromises();
+
+      expect(internals(wrapper).hasAnyData).toBe(false);
+      expect(wrapper.find(RECENT_EVENTS).exists()).toBe(false);
+      expect(wrapper.find(EMPTY_STATE).exists()).toBe(true);
+      // A rejected fetch must still mark the section loaded, or it skeletons
+      // forever.
+      expect(internals(wrapper).sectionState.recentEvents).toEqual({
+        loading: false,
+        loaded: true,
+      });
+      expect(visibleSkeletons()).toEqual([]);
+    });
+  });
+
+  describe("enterprise sections", () => {
+    beforeEach(() => {
+      // `config` is a plain object read by the `isEnterpriseOrCloud` computed on
+      // first render; flipping it before mount is the only way to reach the
+      // enterprise-gated branches. The outer afterEach restores it.
+      config.isEnterprise = "true";
+      store.commit("setConfig", {
+        ...store.state.zoConfig,
+        incidents_enabled: true,
+      });
+    });
+
+    it("should count incidents as data when the incident list returns rows", async () => {
+      vi.mocked(incidentsService.list).mockResolvedValue({
+        data: mockOverview.buildIncidentList(),
+      } as never);
+
+      wrapper = mountOverviewTab();
+      await flushPromises();
+
+      expect(internals(wrapper).hasAnyData).toBe(true);
+      expect(wrapper.find(INCIDENTS).exists()).toBe(true);
+      expect(wrapper.find(INCIDENTS).text()).toContain(
+        "Checkout service degraded",
+      );
+      expect(wrapper.find(EMPTY_STATE).exists()).toBe(false);
+      expect(visibleSkeletons()).toEqual([]);
+    });
+
+    it("should count services as data when the topology returns nodes", async () => {
+      vi.mocked(serviceGraphService.getCurrentTopology).mockResolvedValue({
+        data: mockOverview.serviceGraphTopology,
+      } as never);
+
+      wrapper = mountOverviewTab();
+      await flushPromises();
+
+      expect(internals(wrapper).hasAnyData).toBe(true);
+      expect(wrapper.find(SERVICES).exists()).toBe(true);
+      expect(wrapper.find(EMPTY_STATE).exists()).toBe(false);
+      expect(visibleSkeletons()).toEqual([]);
+    });
+
+    it("should render only the incidents skeleton when the incident list alone is in flight", async () => {
+      const pending = deferred<{ data: { incidents: unknown[] } }>();
+      vi.mocked(incidentsService.list).mockReturnValue(pending.promise as never);
+      vi.mocked(serviceGraphService.getCurrentTopology).mockResolvedValue({
+        data: mockOverview.serviceGraphTopology,
+      } as never);
+
+      wrapper = mountOverviewTab();
+      await flushPromises();
+
+      // Services landed and render content; incidents still holds its shape.
+      expect(visibleSkeletons()).toEqual(["incidents"]);
+      expect(wrapper.find(SERVICES).exists()).toBe(true);
+
+      pending.resolve({ data: { incidents: [] } });
+      await flushPromises();
+      expect(visibleSkeletons()).toEqual([]);
+    });
+
+    it("should render only the services skeleton when the topology alone is in flight", async () => {
+      const pending = deferred<{ data: { nodes: unknown[]; edges: unknown[] } }>();
+      vi.mocked(serviceGraphService.getCurrentTopology).mockReturnValue(
+        pending.promise as never,
+      );
+      vi.mocked(incidentsService.list).mockResolvedValue({
+        data: mockOverview.buildIncidentList(),
+      } as never);
+
+      wrapper = mountOverviewTab();
+      await flushPromises();
+
+      expect(visibleSkeletons()).toEqual(["services"]);
+      expect(wrapper.find(INCIDENTS).exists()).toBe(true);
+
+      pending.resolve({ data: { nodes: [], edges: [] } });
+      await flushPromises();
+      expect(visibleSkeletons()).toEqual([]);
+    });
+  });
+});
diff --git a/web/src/views/OverviewTab.vue b/web/src/views/OverviewTab.vue
index 0c10060b2f..83f8a15a23 100644
--- a/web/src/views/OverviewTab.vue
+++ b/web/src/views/OverviewTab.vue
@@ -13,7 +13,7 @@ You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <div class="overview-tab flex flex-col gap-0 pt-[0.625rem] pr-[0.875rem] pb-[0.625rem] pl-[0.625rem] h-full overflow-y-auto text-(--color-text-heading)">
+  <div class="flex flex-col gap-0 pt-2.5 pb-2.5 px-page-edge h-full overflow-y-auto text-text-body">
     <!-- Header: refresh + time picker -->
     <div class="flex justify-end mb-4">
       <div class="flex items-center gap-2">
@@ -41,20 +41,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <section
       v-if="isIncidentsEnabled && incidents.length > 0"
       class="mb-5"
+      data-test="overview-incidents-section"
     >
       <div class="flex items-center justify-between mb-2 pl-1">
-        <div class="text-sm font-medium tracking-[0.01em] text-(--color-text-heading)">
+        <div class="text-sm font-medium tracking-[0.01em] text-text-heading">
           {{ t('overview.activeIncidents') }}
           <OTag type="countChip" value="warning">{{ incidentsTotal }}</OTag>
-          <span v-if="incidentsTotal > incidents.length" class="ml-2 text-xs font-normal text-(--color-text-muted) align-middle">{{ t('overview.showingOf', { shown: incidents.length, total: incidentsTotal }) }}</span>
+          <span v-if="incidentsTotal > incidents.length" class="ml-2 text-xs font-normal text-text-secondary align-middle">{{ t('overview.showingOf', { shown: incidents.length, total: incidentsTotal }) }}</span>
         </div>
-        <button class="text-xs font-medium text-(--color-primary-600) bg-none border-none p-0 cursor-pointer whitespace-nowrap transition-opacity duration-150 opacity-80 hover:opacity-100 hover:underline" @click="goToIncidentList">{{ t('overview.viewAll') }} →</button>
+        <button class="text-xs font-medium text-primary-600 bg-none border-none p-0 cursor-pointer whitespace-nowrap transition-opacity duration-150 opacity-80 hover:opacity-100 hover:underline" @click="goToIncidentList">{{ t('overview.viewAll') }} →</button>
       </div>
-      <div class="flex flex-col border border-[0.0625em] border-(--color-border-default) rounded-[0.375rem] overflow-hidden">
+      <div class="flex flex-col border border-[0.0625em] border-border-default rounded-default overflow-hidden">
         <div
           v-for="inc in incidents"
           :key="inc.id"
-          class="ov-alert-row ov-table-row flex items-center gap-3 py-[0.625rem] px-[0.875rem] bg-(--color-surface-base) transition-[background] duration-150 hover:bg-(--color-table-row-hover-bg)"
+          class="group flex items-center gap-3 py-2.5 px-3.5 bg-surface-base transition-[background] duration-150 hover:bg-table-row-hover-bg border-l-[0.1875em] border-b-[0.0625em] border-b-border-default last:border-b-0"
           :class="incidentRowClass(inc.severity)"
         >
           <span class="shrink-0 flex items-center" :class="incidentIconClass(inc.severity)">
@@ -64,7 +65,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </svg>
           </span>
           <div class="flex-1 min-w-0">
-            <div class="text-sm font-medium text-(--color-text-heading) flex items-center flex-wrap gap-1">
+            <div class="text-sm font-medium text-text-heading flex items-center flex-wrap gap-1">
               <OTag type="severity" :value="(inc.severity || 'p4').toLowerCase()" />
               {{ inc.title || t('overview.untitledIncident') }}
               <template v-if="inc.group_values && Object.keys(inc.group_values).length > 0">
@@ -80,11 +81,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </div>
           </div>
           <div class="flex items-center shrink-0 gap-[0.3rem] whitespace-nowrap w-48">
-            <span class="text-xs text-(--color-text-muted) min-w-[4.5rem]">{{ relativeTime_(inc.first_alert_at) }}</span>
-            <span class="text-xs text-(--color-text-muted)">·</span>
-            <span class="text-xs font-normal text-(--color-text-secondary)">{{ inc.alert_count }} alerts</span>
+            <span class="text-xs text-text-secondary min-w-[4.5rem]">{{ relativeTime_(inc.first_alert_at) }}</span>
+            <span class="text-xs text-text-secondary">·</span>
+            <span class="text-xs font-normal text-text-secondary">{{ inc.alert_count }} alerts</span>
           </div>
-          <span class="ov-investigate-hover shrink-0 whitespace-nowrap">
+          <span class="invisible group-hover:visible shrink-0 whitespace-nowrap">
             <OButton
               variant="ghost-primary"
               size="sm"
@@ -96,39 +97,57 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
       </div>
     </section>
+    <OverviewSkeleton v-else-if="isIncidentsEnabled && isSectionPending('incidents')" section="incidents" />
 
     <!-- SERVICES (enterprise only — needs service graph data) -->
-    <section v-if="isEnterpriseOrCloud && services.length > 0" class="mb-5">
+    <section
+      v-if="isEnterpriseOrCloud && services.length > 0"
+      class="mb-5"
+      data-test="overview-services-section"
+    >
       <div class="flex items-center justify-between mb-2 pl-1">
-        <div class="text-sm font-medium tracking-[0.01em] text-(--color-text-heading)">
+        <div class="text-sm font-medium tracking-[0.01em] text-text-heading">
           {{ t('overview.services') }}
           <OTag type="countChip" value="warning">{{ services.length }}</OTag>
-          <span v-if="servicePanelVisible && selectedService" class="text-xs font-normal text-(--color-text-muted) ml-1">
-            — viewing <strong class="font-semibold text-(--color-text-heading)">{{ selectedService.label ?? selectedService.id }}</strong>
+          <span v-if="servicePanelVisible && selectedService" class="text-xs font-normal text-text-secondary ml-1">
+            — viewing <strong class="font-semibold text-text-body">{{ selectedService.label ?? selectedService.id }}</strong>
           </span>
         </div>
-        <button class="text-xs font-medium text-(--color-primary-600) bg-none border-none p-0 cursor-pointer whitespace-nowrap transition-opacity duration-150 opacity-80 hover:opacity-100 hover:underline" @click="goToServiceGraph">{{ t('overview.viewAll') }} →</button>
+        <button class="text-xs font-medium text-primary-600 bg-none border-none p-0 cursor-pointer whitespace-nowrap transition-opacity duration-150 opacity-80 hover:opacity-100 hover:underline" @click="goToServiceGraph">{{ t('overview.viewAll') }} →</button>
       </div>
-      <div class="flex items-stretch gap-2">
-        <button
-          class="shrink-0 w-6 flex items-center justify-center cursor-pointer border border-[0.0625em] border-(--color-border-default) rounded-lg bg-(--color-surface-base) text-(--color-text-secondary) shadow-[0_1px_3px_rgba(0,0,0,0.06)] transition-all duration-150 hover:not-disabled:bg-(--color-table-row-hover-bg) hover:not-disabled:text-(--color-text-heading) hover:not-disabled:shadow-[0_2px_6px_rgba(0,0,0,0.12)] hover:not-disabled:-translate-y-px active:not-disabled:translate-y-0 active:not-disabled:shadow-[0_1px_2px_rgba(0,0,0,0.08)] disabled:opacity-25 disabled:cursor-not-allowed disabled:shadow-none"
-          :disabled="!svcScrollCanLeft"
-          @click="scrollServices(-1)"
+      <div class="relative">
+        <!-- Left fade + floating scroll control (only present when scrollable) -->
+        <div
+          class="pointer-events-none absolute inset-y-0 left-0 z-10 flex items-center pr-8 bg-linear-to-r from-surface-base to-transparent transition-opacity duration-200"
+          :class="svcScrollCanLeft ? 'opacity-100' : 'opacity-0'"
         >
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
-            <path d="M15 18l-6-6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
-        </button>
-        <div ref="svcGridRef" class="ov-service-grid flex flex-row gap-2 overflow-x-auto flex-1 [scrollbar-width:none]" @scroll="onSvcScroll">
+          <button
+            class="pointer-events-auto flex h-7 w-7 items-center justify-center cursor-pointer border-[0.0625em] border-border-default rounded-full bg-surface-base text-text-secondary shadow-[0_2px_6px_rgba(0,0,0,0.12)] transition-all duration-150 hover:bg-table-row-hover-bg hover:text-text-body hover:shadow-[0_3px_8px_rgba(0,0,0,0.16)] active:shadow-[0_1px_2px_rgba(0,0,0,0.08)]"
+            :tabindex="svcScrollCanLeft ? 0 : -1"
+            :aria-hidden="!svcScrollCanLeft"
+            :aria-label="t('overview.scrollLeft')"
+            @click="scrollServices(-1)"
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+              <path d="M15 18l-6-6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </button>
+        </div>
+        <div ref="svcGridRef" class="flex flex-row gap-2 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden" @scroll="onSvcScroll">
         <div
           v-for="svc in services"
           :key="svc.id"
-          class="py-3 px-[0.875rem] rounded-[0.375rem] border border-[0.0625em] border-(--color-border-default) bg-(--color-surface-base) transition-[background] duration-150 basis-40 grow-0 shrink-0 min-w-40 max-w-40 cursor-pointer hover:bg-(--color-table-row-hover-bg)"
-          :class="[serviceCardClass(svc), { 'bg-(--color-table-row-hover-bg) outline outline-[0.125em] outline-(--color-primary-600) [outline-offset:-0.0625em]': selectedService?.id === svc.id && servicePanelVisible }]"
+          class="py-3 px-3.5 rounded-default border border-[0.0625em] border-border-default bg-surface-base transition-[background-color,box-shadow,outline-color] duration-150 basis-40 grow-0 shrink-0 min-w-40 max-w-40 cursor-pointer"
+          :class="[
+            serviceCardClass(svc),
+            selectedService?.id === svc.id && servicePanelVisible
+              ? 'outline-solid outline-[0.125em] outline-primary-500 outline-offset-[-0.0625em] bg-[color-mix(in_srgb,var(--color-primary-500)_8%,var(--color-surface-base))] shadow-[0_0.125rem_0.5rem_color-mix(in_srgb,var(--color-primary-500)_22%,transparent)]'
+              : 'hover:bg-table-row-hover-bg',
+          ]"
           @click="openServicePanel(svc)"
         >
           <div class="flex items-center justify-between mb-2">
-            <span class="text-sm font-medium text-(--color-text-heading) flex-1 min-w-0 block overflow-hidden text-ellipsis whitespace-nowrap cursor-default" :title="svc.label ?? svc.id">{{ svc.label }}</span>
+            <span class="text-sm font-medium text-text-heading flex-1 min-w-0 block overflow-hidden text-ellipsis whitespace-nowrap cursor-default" :title="svc.label ?? svc.id">{{ svc.label }}</span>
             <span class="inline-flex items-center shrink-0 ml-1">
               <OButton
                 variant="ghost-muted"
@@ -145,35 +164,44 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </div>
           <div class="flex flex-col gap-1 mt-2">
             <div class="flex items-baseline justify-between gap-2">
-              <span class="text-[0.6875rem] font-semibold tracking-[0.04em] text-(--color-text-secondary)">{{ t('overview.colErrorRate') }}</span>
-              <span class="text-sm font-medium text-(--color-text-body)" :class="svc.errorFlag ? 'text-(--color-error-600)' : ''">
+              <span class="text-2xs font-semibold tracking-[0.04em] text-text-secondary">{{ t('overview.colErrorRate') }}</span>
+              <span class="text-sm font-medium text-text-body" :class="svc.errorFlag ? 'text-error-600' : ''">
                 {{ svc.error_rate != null ? svc.error_rate.toFixed(1) + '%' : '—' }}
               </span>
             </div>
             <div class="flex items-baseline justify-between gap-2">
-              <span class="text-[0.6875rem] font-semibold tracking-[0.04em] text-(--color-text-secondary)">{{ t('overview.colLatency') }}</span>
-              <span class="text-sm font-medium text-(--color-text-body)" :class="svc.latencyFlag ? 'text-(--color-warning-700)' : ''">
+              <span class="text-2xs font-semibold tracking-[0.04em] text-text-secondary">{{ t('overview.colLatency') }}</span>
+              <span class="text-sm font-medium text-text-body" :class="svc.latencyFlag ? 'text-warning-700' : ''">
                 {{ svc.latencyMultiplier ? svc.latencyMultiplier + 'x' : '—' }}
               </span>
             </div>
             <div class="flex items-baseline justify-between gap-2">
-              <span class="text-[0.6875rem] font-semibold tracking-[0.04em] text-(--color-text-secondary)">{{ t('overview.colReqs') }}</span>
-              <span class="text-sm font-medium text-(--color-text-body)">{{ formatReqRate(svc.requests) }}</span>
+              <span class="text-2xs font-semibold tracking-[0.04em] text-text-secondary">{{ t('overview.colReqs') }}</span>
+              <span class="text-sm font-medium text-text-body">{{ formatReqRate(svc.requests) }}</span>
             </div>
           </div>
         </div>
         </div>
-        <button
-          class="shrink-0 w-6 flex items-center justify-center cursor-pointer border border-[0.0625em] border-(--color-border-default) rounded-lg bg-(--color-surface-base) text-(--color-text-secondary) shadow-[0_1px_3px_rgba(0,0,0,0.06)] transition-all duration-150 hover:not-disabled:bg-(--color-table-row-hover-bg) hover:not-disabled:text-(--color-text-heading) hover:not-disabled:shadow-[0_2px_6px_rgba(0,0,0,0.12)] hover:not-disabled:-translate-y-px active:not-disabled:translate-y-0 active:not-disabled:shadow-[0_1px_2px_rgba(0,0,0,0.08)] disabled:opacity-25 disabled:cursor-not-allowed disabled:shadow-none"
-          :disabled="!svcScrollCanRight"
-          @click="scrollServices(1)"
+        <!-- Right fade + floating scroll control (only present when scrollable) -->
+        <div
+          class="pointer-events-none absolute inset-y-0 right-0 z-10 flex items-center justify-end pl-8 bg-linear-to-l from-surface-base to-transparent transition-opacity duration-200"
+          :class="svcScrollCanRight ? 'opacity-100' : 'opacity-0'"
         >
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
-            <path d="M9 18l6-6-6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
-        </button>
+          <button
+            class="pointer-events-auto flex h-7 w-7 items-center justify-center cursor-pointer border-[0.0625em] border-border-default rounded-full bg-surface-base text-text-secondary shadow-[0_2px_6px_rgba(0,0,0,0.12)] transition-all duration-150 hover:bg-table-row-hover-bg hover:text-text-body hover:shadow-[0_3px_8px_rgba(0,0,0,0.16)] active:shadow-[0_1px_2px_rgba(0,0,0,0.08)]"
+            :tabindex="svcScrollCanRight ? 0 : -1"
+            :aria-hidden="!svcScrollCanRight"
+            :aria-label="t('overview.scrollRight')"
+            @click="scrollServices(1)"
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+              <path d="M9 18l6-6-6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </button>
+        </div>
       </div>
     </section>
+    <OverviewSkeleton v-else-if="isEnterpriseOrCloud && isSectionPending('services')" section="services" />
 
     <!-- Service node side panel (latency / RED charts) -->
     <template v-if="isEnterpriseOrCloud && selectedService">
@@ -194,19 +222,23 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </template>
 
     <!-- ACTIVE ANOMALIES -->
-    <section v-if="anomalies.length > 0" class="mb-5">
+    <section
+      v-if="anomalies.length > 0"
+      class="mb-5"
+      data-test="overview-anomalies-section"
+    >
       <div class="flex items-center justify-between mb-2 pl-1">
-        <div class="text-sm font-medium tracking-[0.01em] text-(--color-text-heading)">
+        <div class="text-sm font-medium tracking-[0.01em] text-text-heading">
           {{ t('overview.activeAnomalies') }}
           <OTag type="countChip" value="warning">{{ anomalies.length }}</OTag>
         </div>
-        <button class="text-xs font-medium text-(--color-primary-600) bg-none border-none p-0 cursor-pointer whitespace-nowrap transition-opacity duration-150 opacity-80 hover:opacity-100 hover:underline" @click="goToAnomalies">{{ t('overview.viewAll') }} →</button>
+        <button class="text-xs font-medium text-primary-600 bg-none border-none p-0 cursor-pointer whitespace-nowrap transition-opacity duration-150 opacity-80 hover:opacity-100 hover:underline" @click="goToAnomalies">{{ t('overview.viewAll') }} →</button>
       </div>
-      <div class="flex flex-col gap-[0.375rem]">
+      <div class="flex flex-col gap-1.5">
         <div
           v-for="item in anomalies"
           :key="item.id"
-          class="ov-alert-row flex items-center gap-3 py-[0.625rem] px-[0.875rem] rounded-[0.375rem] border border-[0.0625em] border-(--color-border-default) bg-(--color-surface-base) transition-[background] duration-150 hover:bg-(--color-table-row-hover-bg)"
+          class="group flex items-center gap-3 py-2.5 px-3.5 rounded-default border border-[0.0625em] border-border-default bg-surface-base transition-[background] duration-150 hover:bg-table-row-hover-bg"
           :class="severityRowClass(item.severity)"
         >
           <span class="shrink-0 flex items-center" :class="severityIconClass(item.severity)">
@@ -215,13 +247,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </svg>
           </span>
           <div class="flex-1 min-w-0">
-            <div class="text-sm font-medium text-(--color-text-heading) flex items-center flex-wrap gap-1 [row-gap:0.25rem]">
+            <div class="text-sm font-medium text-text-heading flex items-center flex-wrap gap-1 [row-gap:0.25rem]">
               {{ item.title }}
-              <span class="text-xs text-(--color-text-muted) font-normal mx-[0.1rem]">·</span>
-              <span class="text-xs text-(--color-text-muted) font-normal">{{ item.description }}</span>
+              <span class="text-xs text-text-secondary font-normal mx-[0.1rem]">·</span>
+              <span class="text-xs text-text-secondary font-normal">{{ item.description }}</span>
             </div>
           </div>
-          <span class="ov-investigate-hover shrink-0 whitespace-nowrap">
+          <span class="invisible group-hover:visible shrink-0 whitespace-nowrap">
             <OButton
               variant="ghost-primary"
               size="sm"
@@ -233,25 +265,30 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
       </div>
     </section>
+    <OverviewSkeleton v-else-if="isSectionPending('anomalies')" section="anomalies" />
 
     <!-- RECENT EVENTS (alert firing feed) -->
-    <section v-if="recentEvents.length > 0" class="mb-5">
+    <section
+      v-if="recentEvents.length > 0"
+      class="mb-5"
+      data-test="overview-recent-events-section"
+    >
       <div class="flex items-center justify-between mb-2 pl-1">
-        <div class="text-sm font-medium tracking-[0.01em] text-(--color-text-heading)">
+        <div class="text-sm font-medium tracking-[0.01em] text-text-heading">
           {{ t('overview.recentEvents') }}
           <OTag type="countChip" value="warning">{{ recentEvents.length }}</OTag>
         </div>
-        <button class="text-xs font-medium text-(--color-primary-600) bg-none border-none p-0 cursor-pointer whitespace-nowrap transition-opacity duration-150 opacity-80 hover:opacity-100 hover:underline" @click="goToAlertList">{{ t('overview.viewAll') }} →</button>
+        <button class="text-xs font-medium text-primary-600 bg-none border-none p-0 cursor-pointer whitespace-nowrap transition-opacity duration-150 opacity-80 hover:opacity-100 hover:underline" @click="goToAlertList">{{ t('overview.viewAll') }} →</button>
       </div>
-      <div class="flex flex-col gap-0 border border-[0.0625em] border-(--color-border-default) rounded-[0.375rem] overflow-hidden bg-(--color-surface-base)">
+      <div class="flex flex-col gap-0 border border-[0.0625em] border-border-default rounded-default overflow-hidden bg-surface-base">
         <div
           v-for="ev in recentEvents"
           :key="ev.id"
-          class="ov-event-row flex items-center gap-3 py-2 px-[0.875rem] border-b border-b-[0.0625em] border-b-(--color-border-default) text-[0.8125rem] transition-[background] duration-150 hover:bg-(--color-table-row-hover-bg)"
+          class="flex items-center gap-3 py-2 px-3.5 border-b border-b-[0.0625em] border-b-border-default last:border-b-0 text-compact transition-[background] duration-150 hover:bg-table-row-hover-bg"
         >
           <OTag type="eventStatus" :value="ev.typeLabel" class="shrink-0" />
-          <span class="font-medium text-(--color-text-heading) whitespace-nowrap min-w-[7.5em] max-w-[12.5em] overflow-hidden text-ellipsis">{{ ev.service }}</span>
-          <span class="flex-1 text-(--color-text-muted) truncate">{{ ev.description }}</span>
+          <span class="font-medium text-text-heading whitespace-nowrap min-w-[7.5em] max-w-[12.5em] overflow-hidden text-ellipsis">{{ ev.service }}</span>
+          <span class="flex-1 text-text-secondary truncate">{{ ev.description }}</span>
           <OTag
             v-if="ev.failCount > 1"
             type="countChip"
@@ -259,14 +296,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             class="shrink-0"
             :title="`Failed ${ev.failCount} times in this window`"
           >×{{ ev.failCount }}</OTag>
-          <span class="shrink-0 text-(--color-text-muted) text-xs whitespace-nowrap">{{ ev.timeAgo }}</span>
+          <span class="shrink-0 text-text-secondary text-xs whitespace-nowrap">{{ ev.timeAgo }}</span>
         </div>
       </div>
     </section>
+    <OverviewSkeleton v-else-if="isSectionPending('recentEvents')" section="recentEvents" />
 
     <!-- Empty state — everything is healthy or no data yet -->
     <OEmptyState
-      v-if="!isLoading && anomalies.length === 0 && incidents.length === 0 && services.length === 0 && recentEvents.length === 0"
+      v-if="!isLoading && !hasAnyData"
       illustration="check"
       size="hero"
       :hide-action="true"
@@ -276,45 +314,41 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <template #description>{{ t('overview.allClearDesc') }}</template>
       <template #actions>
         <!-- View alerts -->
-        <button v-if="showAlertsCard" type="button" class="ov-action-card group relative flex items-center gap-3 flex-1 basis-56 min-w-0 max-w-72 min-h-16 py-[0.625rem] pr-[0.875rem] pl-3 rounded-xl border border-(--color-border-default) bg-(--color-surface-base) shadow-(--shadow-sm) text-left cursor-pointer transition-[color,background-color,border-color,box-shadow] duration-150 outline-none hover:shadow-(--shadow-md) hover:border-(--color-primary-400) hover:bg-(--color-tabs-hover-bg)" data-test="overview-empty-alerts-card" @click="goToAlertList">
-          <span class="inline-flex items-center justify-center shrink-0 w-10 h-10 rounded-lg transition-[background-color,color] duration-150 bg-(--color-warning-50) text-(--color-warning-700) group-hover:bg-(--color-primary-600) group-hover:text-(--color-text-inverse)">
+        <button v-if="showAlertsCard" type="button" class="focus-visible:shadow-[0_0_0_0.125rem_color-mix(in_srgb,var(--color-primary-500)_40%,transparent)] group relative flex items-center gap-3 flex-1 basis-56 min-w-0 max-w-72 min-h-16 py-2.5 pr-3.5 pl-3 rounded-default border border-border-default bg-surface-base text-left cursor-pointer transition-[color,background-color,border-color,box-shadow] duration-150 outline-none hover:shadow-md hover:border-primary-400 hover:bg-tabs-hover-bg" data-test="overview-empty-alerts-card" @click="goToAlertList">
+          <span class="inline-flex items-center justify-center shrink-0 w-10 h-10 rounded-default transition-[background-color,color] duration-150 bg-icon-chip-warning-bg text-icon-chip-warning-text group-hover:bg-primary-600 group-hover:text-text-inverse">
             <OIcon name="notifications" size="md" />
           </span>
-          <span class="flex-1 min-w-0 flex flex-col gap-[0.125rem]">
-            <span class="text-(length:--text-sm) font-semibold text-(--color-text-primary) truncate">{{ t('overview.emptyActionAlerts') }}</span>
-            <span class="text-(length:--text-xs) text-(--color-text-secondary) leading-[1.4]">{{ t('overview.emptyActionAlertsDesc') }}</span>
+          <span class="flex-1 min-w-0 flex flex-col gap-0.5">
+            <span class="text-(length:--text-sm) font-semibold text-text-heading truncate">{{ t('overview.emptyActionAlerts') }}</span>
+            <span class="text-(length:--text-xs) text-text-secondary leading-[1.4]">{{ t('overview.emptyActionAlertsDesc') }}</span>
           </span>
-          <OIcon name="chevron-right" size="sm" class="shrink-0 text-(--color-text-disabled) transition-[transform,color] duration-150 group-hover:translate-x-[0.125rem] group-hover:text-(--color-primary-600)" />
+          <OIcon name="chevron-right" size="sm" class="shrink-0 text-text-disabled transition-[transform,color] duration-150 group-hover:translate-x-0.5 group-hover:text-primary-600" />
         </button>
         <!-- Explore logs -->
-        <button v-if="showLogsCard" type="button" class="ov-action-card group relative flex items-center gap-3 flex-1 basis-56 min-w-0 max-w-72 min-h-16 py-[0.625rem] pr-[0.875rem] pl-3 rounded-xl border border-(--color-border-default) bg-(--color-surface-base) shadow-(--shadow-sm) text-left cursor-pointer transition-[color,background-color,border-color,box-shadow] duration-150 outline-none hover:shadow-(--shadow-md) hover:border-(--color-primary-400) hover:bg-(--color-tabs-hover-bg)" data-test="overview-empty-logs-card" @click="goToLogs">
-          <span class="inline-flex items-center justify-center shrink-0 w-10 h-10 rounded-lg transition-[background-color,color] duration-150 bg-(--color-info-50) text-(--color-info-700) group-hover:bg-(--color-primary-600) group-hover:text-(--color-text-inverse)">
+        <button v-if="showLogsCard" type="button" class="focus-visible:shadow-[0_0_0_0.125rem_color-mix(in_srgb,var(--color-primary-500)_40%,transparent)] group relative flex items-center gap-3 flex-1 basis-56 min-w-0 max-w-72 min-h-16 py-2.5 pr-3.5 pl-3 rounded-default border border-border-default bg-surface-base text-left cursor-pointer transition-[color,background-color,border-color,box-shadow] duration-150 outline-none hover:shadow-md hover:border-primary-400 hover:bg-tabs-hover-bg" data-test="overview-empty-logs-card" @click="goToLogs">
+          <span class="inline-flex items-center justify-center shrink-0 w-10 h-10 rounded-default transition-[background-color,color] duration-150 bg-status-info-bg text-status-info-text group-hover:bg-primary-600 group-hover:text-text-inverse">
             <OIcon name="search" size="md" />
           </span>
-          <span class="flex-1 min-w-0 flex flex-col gap-[0.125rem]">
-            <span class="text-(length:--text-sm) font-semibold text-(--color-text-primary) truncate">{{ t('overview.emptyActionLogs') }}</span>
-            <span class="text-(length:--text-xs) text-(--color-text-secondary) leading-[1.4]">{{ t('overview.emptyActionLogsDesc') }}</span>
+          <span class="flex-1 min-w-0 flex flex-col gap-0.5">
+            <span class="text-(length:--text-sm) font-semibold text-text-heading truncate">{{ t('overview.emptyActionLogs') }}</span>
+            <span class="text-(length:--text-xs) text-text-secondary leading-[1.4]">{{ t('overview.emptyActionLogsDesc') }}</span>
           </span>
-          <OIcon name="chevron-right" size="sm" class="shrink-0 text-(--color-text-disabled) transition-[transform,color] duration-150 group-hover:translate-x-[0.125rem] group-hover:text-(--color-primary-600)" />
+          <OIcon name="chevron-right" size="sm" class="shrink-0 text-text-disabled transition-[transform,color] duration-150 group-hover:translate-x-0.5 group-hover:text-primary-600" />
         </button>
         <!-- Explore traces -->
-        <button v-if="showTracesCard" type="button" class="ov-action-card group relative flex items-center gap-3 flex-1 basis-56 min-w-0 max-w-72 min-h-16 py-[0.625rem] pr-[0.875rem] pl-3 rounded-xl border border-(--color-border-default) bg-(--color-surface-base) shadow-(--shadow-sm) text-left cursor-pointer transition-[color,background-color,border-color,box-shadow] duration-150 outline-none hover:shadow-(--shadow-md) hover:border-(--color-primary-400) hover:bg-(--color-tabs-hover-bg)" data-test="overview-empty-traces-card" @click="goToTraces">
-          <span class="inline-flex items-center justify-center shrink-0 w-10 h-10 rounded-lg transition-[background-color,color] duration-150 bg-(--color-info-50) text-(--color-info-700) group-hover:bg-(--color-primary-600) group-hover:text-(--color-text-inverse)">
+        <button v-if="showTracesCard" type="button" class="focus-visible:shadow-[0_0_0_0.125rem_color-mix(in_srgb,var(--color-primary-500)_40%,transparent)] group relative flex items-center gap-3 flex-1 basis-56 min-w-0 max-w-72 min-h-16 py-2.5 pr-3.5 pl-3 rounded-default border border-border-default bg-surface-base text-left cursor-pointer transition-[color,background-color,border-color,box-shadow] duration-150 outline-none hover:shadow-md hover:border-primary-400 hover:bg-tabs-hover-bg" data-test="overview-empty-traces-card" @click="goToTraces">
+          <span class="inline-flex items-center justify-center shrink-0 w-10 h-10 rounded-default transition-[background-color,color] duration-150 bg-status-info-bg text-status-info-text group-hover:bg-primary-600 group-hover:text-text-inverse">
             <OIcon name="account-tree" size="md" />
           </span>
-          <span class="flex-1 min-w-0 flex flex-col gap-[0.125rem]">
-            <span class="text-(length:--text-sm) font-semibold text-(--color-text-primary) truncate">{{ t('overview.emptyActionTraces') }}</span>
-            <span class="text-(length:--text-xs) text-(--color-text-secondary) leading-[1.4]">{{ t('overview.emptyActionTracesDesc') }}</span>
+          <span class="flex-1 min-w-0 flex flex-col gap-0.5">
+            <span class="text-(length:--text-sm) font-semibold text-text-heading truncate">{{ t('overview.emptyActionTraces') }}</span>
+            <span class="text-(length:--text-xs) text-text-secondary leading-[1.4]">{{ t('overview.emptyActionTracesDesc') }}</span>
           </span>
-          <OIcon name="chevron-right" size="sm" class="shrink-0 text-(--color-text-disabled) transition-[transform,color] duration-150 group-hover:translate-x-[0.125rem] group-hover:text-(--color-primary-600)" />
+          <OIcon name="chevron-right" size="sm" class="shrink-0 text-text-disabled transition-[transform,color] duration-150 group-hover:translate-x-0.5 group-hover:text-primary-600" />
         </button>
       </template>
     </OEmptyState>
 
-    <!-- Loading skeleton (standard O2 wave shimmer) -->
-    <div v-if="isLoading" class="flex flex-col gap-2 py-2 px-0">
-      <OSkeleton v-for="i in 3" :key="i" class="h-[3.25em]" />
-    </div>
 
     <!-- Alert History Drawer — opened from anomaly Investigate button -->
     <AlertHistoryDrawer
@@ -328,7 +362,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script setup lang="ts">
-import { ref, computed, defineAsyncComponent, onMounted, watch, nextTick } from "vue";
+import { ref, reactive, computed, defineAsyncComponent, onMounted, watch, nextTick } from "vue";
 
 // Module-level cache for anomaly history — survives re-renders, cleared on org change
 const ANOMALY_CACHE_TTL_MS = 2 * 60 * 1000; // 2 minutes
@@ -349,7 +383,7 @@ import DateTime from "@/components/DateTime.vue";
 import ORefreshButton from "@/lib/core/RefreshButton/ORefreshButton.vue";
 import OButton from "@/lib/core/Button/OButton.vue";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
-import OSkeleton from "@/lib/feedback/Skeleton/OSkeleton.vue";
+import OverviewSkeleton from "./OverviewSkeleton.vue";
 import OEmptyState from "@/lib/core/EmptyState/OEmptyState.vue";
 import OTag from "@/lib/core/Badge/OTag.vue";
 import ODimensionChip from "@/lib/core/Badge/ODimensionChip.vue";
@@ -434,6 +468,54 @@ const incidentsTotal = ref(0);
 const services = ref<any[]>([]);
 const recentEvents = ref<any[]>([]);
 
+// True once any section has something to show. Gates the skeleton and the empty
+// state so the three are mutually exclusive with the content: the skeleton is a
+// first-load placeholder, not a refresh indicator (ORefreshButton already spins
+// via :loading). Without this, refreshing with data on screen appends the
+// skeleton *below* the rows instead of standing in for them.
+const hasAnyData = computed(
+  () =>
+    anomalies.value.length > 0 ||
+    incidents.value.length > 0 ||
+    services.value.length > 0 ||
+    recentEvents.value.length > 0,
+);
+
+/* Per-section load state. The four datasets are fetched concurrently and land at
+   different times, so a single `isLoading` can't gate their placeholders: the
+   first dataset to arrive would clear the skeleton for the three still in
+   flight, and those would then pop in with no placeholder. Each section tracks
+   its own request instead.
+
+   `loaded` (has completed at least once) is what separates a first load from a
+   refresh. A section shows its skeleton only while `loading && !loaded`, so:
+     - first load  -> each section holds its own placeholder until ITS data lands
+     - refresh     -> nothing flashes; ORefreshButton carries the loading state
+     - empty result-> `loaded` stays true, so it never re-skeletons */
+type SectionKey = "incidents" | "services" | "anomalies" | "recentEvents";
+const sectionState = reactive<Record<SectionKey, { loading: boolean; loaded: boolean }>>({
+  incidents: { loading: false, loaded: false },
+  services: { loading: false, loaded: false },
+  anomalies: { loading: false, loaded: false },
+  recentEvents: { loading: false, loaded: false },
+});
+
+const isSectionPending = (key: SectionKey) =>
+  sectionState[key].loading && !sectionState[key].loaded;
+
+/* Wraps a loader with its section's state. The loaders swallow their own errors,
+   and `finally` also covers the early `return` in the enterprise-gated ones, so
+   a section can never be left stuck pending. */
+const runSection = async (key: SectionKey, load: () => Promise<void>) => {
+  sectionState[key].loading = true;
+  try {
+    await load();
+  } finally {
+    sectionState[key].loading = false;
+    sectionState[key].loaded = true;
+  }
+};
+
 // Alert history drawer state
 const showAlertHistoryDrawer = ref(false);
 const selectedAlertForHistory = ref<any>(null);
@@ -472,10 +554,10 @@ const loadAll = async () => {
   if (!orgId.value) return;
   isLoading.value = true;
   await Promise.allSettled([
-    loadHistoryAndSplit(),
-    loadAnomalies(),
-    loadIncidents(),
-    loadServiceGraph(),
+    runSection("recentEvents", loadHistoryAndSplit),
+    runSection("anomalies", loadAnomalies),
+    runSection("incidents", loadIncidents),
+    runSection("services", loadServiceGraph),
   ]);
   isLoading.value = false;
   lastFetched.value = new Date();
@@ -754,38 +836,38 @@ const shortDimKey = (key: string): string =>
 
 const severityRowClass = (severity: string) =>
   severity === "critical"
-    ? "border-l-[0.1875em] border-l-(--color-error-600)"
-    : "border-l-[0.1875em] border-l-(--color-warning-600)";
+    ? "border-l-[0.1875em] border-l-error-600"
+    : "border-l-[0.1875em] border-l-warning-600";
 
 const severityIconClass = (severity: string) =>
-  severity === "critical" ? "text-(--color-error-600)" : "text-(--color-warning-600)";
+  severity === "critical" ? "text-error-600" : "text-warning-600";
 
 const incidentRowClass = (severity: string) => {
   const s = (severity ?? "").toLowerCase();
-  if (s === "p1") return "border-l-(--color-error-600)";
-  if (s === "p2") return "border-l-(--color-warning-600)";
-  return "border-l-(--color-info-700)";
+  if (s === "p1") return "border-l-error-600";
+  if (s === "p2") return "border-l-warning-600";
+  return "border-l-status-info-text";
 };
 
 const incidentIconClass = (severity: string) => {
   const s = (severity ?? "").toLowerCase();
-  if (s === "p1") return "text-(--color-error-600)";
-  if (s === "p2") return "text-(--color-warning-600)";
-  return "text-(--color-info-700)";
+  if (s === "p1") return "text-error-600";
+  if (s === "p2") return "text-warning-600";
+  return "text-status-info-text";
 };
 
 const severityBadgeClass = (sev: string): string => {
   const s = (sev || "p4").toLowerCase();
-  if (s === "p1") return "bg-(--color-error-50) text-(--color-error-600) border border-[0.0625em] border-(--color-error-600)";
-  if (s === "p2") return "bg-(--color-warning-50) text-(--color-warning-700) border border-[0.0625em] border-(--color-warning-600)";
-  if (s === "p3") return "bg-(--color-warning-50) text-(--color-warning-700) border border-[0.0625em] border-(--color-warning-600)";
-  return "bg-(--color-info-50) text-(--color-info-700) border border-[0.0625em] border-(--color-info-700)";
+  if (s === "p1") return "bg-error-50 text-error-600 border border-[0.0625em] border-error-600";
+  if (s === "p2") return "bg-warning-50 text-warning-700 border border-[0.0625em] border-warning-600";
+  if (s === "p3") return "bg-warning-50 text-warning-700 border border-[0.0625em] border-warning-600";
+  return "bg-status-info-bg text-status-info-text border border-[0.0625em] border-status-info-text";
 };
 
 const serviceCardClass = (svc: any) => {
-  if (svc.errorFlag && svc.error_rate >= 5) return "border-l-[0.1875em] border-l-(--color-error-600)";
-  if (svc.errorFlag || svc.latencyFlag) return "border-l-[0.1875em] border-l-(--color-warning-600)";
-  return "border-l-[0.1875em] border-l-(--color-success-600)";
+  if (svc.errorFlag && svc.error_rate >= 5) return "border-l-[0.1875em] border-l-error-600";
+  if (svc.errorFlag || svc.latencyFlag) return "border-l-[0.1875em] border-l-warning-600";
+  return "border-l-[0.1875em] border-l-status-positive";
 };
 
 // ── Navigation ───────────────────────────────────────────────────────────────
@@ -903,45 +985,3 @@ watch(isIncidentsEnabled, (enabled) => {
   if (enabled && incidents.value.length === 0) loadIncidents();
 });
 </script>
-
-<style>
-/* Incidents table rows — !important overrides to beat the shared .ov-alert-row
-   base border/radius, plus :last-child border removal. Not cleanly inlineable. */
-.ov-table-row {
-  border-radius: 0 !important;
-  border-left-width: 0.1875em !important;
-  border-top: none !important;
-  border-right: none !important;
-  border-bottom: 0.0625em solid var(--color-border-default) !important;
-}
-.ov-table-row:last-child {
-  border-bottom: none !important;
-}
-
-/* Hover-only Investigate button — visible only when the parent row is hovered.
-   Descendant/combinator selector cannot be inlined. */
-.ov-investigate-hover {
-  visibility: hidden;
-}
-.ov-alert-row:hover .ov-investigate-hover {
-  visibility: visible;
-}
-
-/* Recent-events last row border removal — structural pseudo-class. */
-.ov-event-row:last-child {
-  border-bottom: none;
-}
-
-/* Empty-state action card focus ring — :focus-visible pseudo-class. */
-.ov-action-card:focus-visible {
-  box-shadow: 0 0 0 0.125rem color-mix(in srgb, var(--color-primary-500) 40%, transparent);
-}
-
-/* Hide the horizontal scrollbar on the services grid — pseudo-element. */
-.ov-service-grid::-webkit-scrollbar { display: none; }
-
-/* Overview scrollbar styling — pseudo-elements. */
-.overview-tab::-webkit-scrollbar { width: 0.375em; }
-.overview-tab::-webkit-scrollbar-track { background: transparent; }
-.overview-tab::-webkit-scrollbar-thumb { background: var(--color-border-default); border-radius: 0.1875em; }
-</style>
diff --git a/web/src/views/PinnedDashboardTab.vue b/web/src/views/PinnedDashboardTab.vue
index 538a57d737..b398c7748f 100644
--- a/web/src/views/PinnedDashboardTab.vue
+++ b/web/src/views/PinnedDashboardTab.vue
@@ -20,8 +20,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <div
         class="flex justify-end items-center gap-2 px-4 py-2 shrink-0 border-b border-border-default"
       >
-        <div class="w-[12rem]"><OSkeleton class="h-8" /></div>
-        <div class="w-[6rem]"><OSkeleton class="h-8" /></div>
+        <div class="w-48"><OSkeleton class="h-8" /></div>
+        <div class="w-24"><OSkeleton class="h-8" /></div>
         <div class="w-8"><OSkeleton class="h-8" /></div>
       </div>
       <div class="flex-1 min-h-0 overflow-hidden p-4">
@@ -29,13 +29,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <div
             v-for="i in 4"
             :key="i"
-            class="flex flex-col gap-3 rounded-lg border border-border-default p-4 min-h-[10rem]"
+            class="flex flex-col gap-3 rounded-default border border-border-default p-4 min-h-40"
           >
             <div class="flex items-center justify-between">
-              <div class="w-[10rem]"><OSkeleton class="h-4" /></div>
+              <div class="w-40"><OSkeleton class="h-4" /></div>
               <div class="w-4"><OSkeleton class="h-4" /></div>
             </div>
-            <OSkeleton class="flex-1 min-h-[6rem]" />
+            <OSkeleton class="flex-1 min-h-24" />
           </div>
         </div>
       </div>
diff --git a/web/src/views/PromQL/QueryBuilder.vue b/web/src/views/PromQL/QueryBuilder.vue
index d936be79f0..786cf31d8b 100644
--- a/web/src/views/PromQL/QueryBuilder.vue
+++ b/web/src/views/PromQL/QueryBuilder.vue
@@ -1,16 +1,13 @@
 <template>
-  <div
+  <OPageLayout
+    class="h-[calc(100vh-50px)]!"
     data-test="promql-query-builder"
-    class="h-[calc(100vh-50px)] flex flex-col overflow-hidden"
+    :title="t('metrics.queryBuilder.title')"
+    :subtitle="t('metrics.queryBuilder.subtitle')"
+    icon="query-stats"
+    scroll
   >
-    <AppPageHeader
-      :title="t('metrics.queryBuilder.title')"
-      :subtitle="t('metrics.queryBuilder.subtitle')"
-      icon="query-stats"
-      class="shrink-0 px-4 border-b border-border-default"
-    />
-    <div class="flex-1 overflow-auto px-2.5">
-      <div class="max-w-350 mx-auto py-2.5">
+    <div class="max-w-350 mx-auto py-2.5">
     <OCard>
       <OCardSection role="body">
         <!-- Query Builder Section -->
@@ -41,7 +38,7 @@
         <div class="text-base font-medium mb-2">{{ t('metrics.queryBuilder.generatedQuery') }}</div>
         <OCard class="bg-surface-panel">
           <OCardSection>
-            <pre class="m-0 p-3 font-mono text-sm leading-relaxed whitespace-pre-wrap wrap-break-word text-[#1976d2] font-medium">{{ generatedQuery || t('metrics.queryBuilder.noQueryBuilt') }}</pre>
+            <pre class="m-0 p-3 font-mono text-sm leading-relaxed whitespace-pre-wrap wrap-break-word text-text-link font-medium">{{ generatedQuery || t('metrics.queryBuilder.noQueryBuilt') }}</pre>
           </OCardSection>
         </OCard>
 
@@ -80,14 +77,13 @@
         <div class="text-base font-medium mb-2">{{ t('metrics.queryBuilder.queryResultPreview') }}</div>
         <OCard class="bg-surface-panel">
           <OCardSection>
-            <pre class="m-0 p-3 font-mono text-sm leading-relaxed whitespace-pre-wrap wrap-break-word text-[#424242] max-h-100 overflow-y-auto">{{ queryResult }}</pre>
+            <pre class="m-0 p-3 font-mono text-sm leading-relaxed whitespace-pre-wrap wrap-break-word text-text-body max-h-100 overflow-y-auto">{{ queryResult }}</pre>
           </OCardSection>
         </OCard>
       </OCardSection>
     </OCard>
-      </div>
     </div>
-  </div>
+  </OPageLayout>
 </template>
 
 <script setup lang="ts">
@@ -102,7 +98,7 @@ import OButton from "@/lib/core/Button/OButton.vue";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import OSeparator from '@/lib/core/Separator/OSeparator.vue';
 import OCard from "@/lib/core/Card/OCard.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import OCardSection from "@/lib/core/Card/OCardSection.vue";
 import { toast } from "@/lib/feedback/Toast/useToast";
 import { copyToClipboard } from "@/utils/clipboard";
diff --git a/web/src/views/RUM/AppErrors.vue b/web/src/views/RUM/AppErrors.vue
index 47e0c1afd6..2c33d68874 100644
--- a/web/src/views/RUM/AppErrors.vue
+++ b/web/src/views/RUM/AppErrors.vue
@@ -17,14 +17,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div class="sessions_page flex flex-col flex-1 min-h-0 overflow-hidden">
     <div>
-      <div class="card-container border-b border-border-default py-[0.375rem] px-[0.375rem]">
+      <div class="bg-card-glass-bg border-b border-border-default py-1.5 px-page-edge">
         <div class="flex items-start gap-1">
           <!-- Query editor (flex-grow to fill available space) -->
           <div class="flex-1 min-w-0 relative">
             <query-editor
               ref="errorQueryEditorRef"
               editor-id="rum-errors-query-editor"
-              :class="['border', 'solid', 'border-[var(--o2-border-color)]', 'p-[0.25rem]', 'rounded-[0.375rem]', 'overflow-y-auto', errorEditorHeight]"
+              :class="['border', 'solid', 'border-card-glass-border', 'p-1', 'rounded-default', 'overflow-y-auto', errorEditorHeight]"
               v-model:query="errorTrackingState.data.editorValue"
               :debounce-time="300"
               :keywords="effectiveKeywords"
@@ -77,7 +77,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             />
           </div><!-- end controls -->
         </div><!-- end flex row -->
-      </div><!-- end card-container -->
+      </div><!-- end bg-card-glass-bg -->
     </div><!-- end toolbar wrapper -->
     <OSplitter
       class="logs-horizontal-splitter flex-1 min-h-0"
@@ -86,7 +86,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       :horizontal="false"
     >
       <template #before>
-        <div class="card-container p-[0.325rem] h-full overflow-auto border-r border-border-default">
+        <div class="bg-surface-panel py-1 h-full overflow-auto border-r border-border-default">
           <SearchFieldList
             :fields="streamFields"
             :time-stamp="{
@@ -105,7 +105,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <div class="h-full flex flex-col min-h-0">
           <!-- Errors-over-time chart + KPI summary -->
           <div
-            class="grid grid-cols-1 lg:grid-cols-5 gap-2 px-2 pt-1.5 h-[11rem] shrink-0"
+            class="grid grid-cols-1 lg:grid-cols-5 gap-2 px-page-edge pt-1.5 h-44 shrink-0"
           >
             <ErrorsOverTimeChart
               class="lg:col-span-3"
@@ -123,7 +123,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </div>
 
           <!-- Status / type / service filters -->
-          <div class="px-2 py-1.5">
+          <div class="px-page-edge py-1.5">
             <ErrorsFilterBar
               :status="statusFilter"
               :type="typeFilter"
@@ -136,7 +136,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             />
           </div>
 
-          <div class="card-container flex-1 min-h-0 overflow-hidden">
+          <div class="bg-card-glass-bg flex-1 min-h-0 overflow-hidden">
           <OTable
             :data="visibleIssues"
             :columns="tableColumns"
@@ -444,9 +444,9 @@ const onServiceFilterChange = (value: string) => {
 // Dynamic editor height based on content lines
 const errorEditorHeight = computed(() => {
   const lines = (errorTrackingState.data.editorValue.match(/\n/g) || []).length + 1;
-  if (lines === 1) return 'h-[2rem]!';
-  if (lines === 2) return 'h-[3.5rem]!';
-  return 'h-[5rem]!'; // 3+ lines, capped at 5rem (approx 3 lines)
+  if (lines === 1) return 'h-8!';
+  if (lines === 2) return 'h-14!';
+  return 'h-20!'; // 3+ lines, capped at 5rem (approx 3 lines)
 });
 
 const { columnVisibility, setColumnVisibility } = useExternalColumnToggle(
@@ -661,8 +661,8 @@ const handleRowClick = (row: any) => {
 // colors as the sessions table, for cross-page consistency.
 const getIssueStatusColor = (row: any) => {
   if (row.error_handling === "handled")
-    return "var(--o2-severity-warning-color)";
-  return "var(--o2-severity-error-color)";
+    return "var(--color-severity-warning-color)";
+  return "var(--color-severity-error-color)";
 };
 
 function restoreUrlQueryParams() {
@@ -728,22 +728,3 @@ useShortcuts([
   { id: "rumErrorsRefresh", handler: () => { if (!isInputFocused()) runQuery(); } },
 ]);
 </script>
-<style>
-.sessions_page .index-table :hover::-webkit-scrollbar,
-.sessions_page #tracesSearchGridComponent:hover::-webkit-scrollbar {
-  height: 0.8125rem;
-  width: 0.8125rem;
-}
-
-.sessions_page .index-table ::-webkit-scrollbar-track,
-.sessions_page #tracesSearchGridComponent::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-  border-radius: 0.625rem;
-}
-
-.sessions_page .index-table ::-webkit-scrollbar-thumb,
-.sessions_page #tracesSearchGridComponent::-webkit-scrollbar-thumb {
-  border-radius: 0.625rem;
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
-}
-</style>
diff --git a/web/src/views/RUM/AppPerformance.spec.ts b/web/src/views/RUM/AppPerformance.spec.ts
index a7786bd29d..da12a74ab1 100644
--- a/web/src/views/RUM/AppPerformance.spec.ts
+++ b/web/src/views/RUM/AppPerformance.spec.ts
@@ -154,9 +154,6 @@ describe("AppPerformance.vue", () => {
       global: {
         plugins: [store, router, i18n],
         stubs: {
-                    QSeparator: {
-            template: '<hr class="q-separator" />',
-          },
           OButton: {
             template: '<button v-bind="$attrs" @click="$emit(\'click\')"><slot /></button>',
             props: ["variant", "size", "disabled"],
diff --git a/web/src/views/RUM/AppPerformance.vue b/web/src/views/RUM/AppPerformance.vue
index 5ebc7a24ef..b82600cf10 100644
--- a/web/src/views/RUM/AppPerformance.vue
+++ b/web/src/views/RUM/AppPerformance.vue
@@ -17,17 +17,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <!-- eslint-disable vue/v-on-event-hyphenation -->
 <!-- eslint-disable vue/attribute-hyphenation -->
 <template>
-  <div
+  <OPageLayout
     :key="store.state.selectedOrganization.identifier"
     data-test="rum-performance-page"
-    class="w-full h-full flex flex-col min-h-0"
+    :title="t('rum.performanceSummaryLabel')"
+    :subtitle="t('rum.performanceSummarySubtitle')"
+    title-data-test="rum-performance-title"
+    icon="speed"
+    bleed
   >
-    <AppPageHeader
-      :title="t('rum.performanceSummaryLabel')"
-      title-data-test="rum-performance-title"
-      icon="speed"
-      class="shrink-0 px-4 border-b border-border-default"
-    >
       <template #actions>
         <DateTimePickerDashboard
           class="rum-date-time-picker"
@@ -54,10 +52,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <OTooltip :content="isVariablesChanged ? t('dashboard.refreshToApplyVariableChanges') : t('dashboard.refresh')" />
         </OButton>
       </template>
-    </AppPageHeader>
-
     <OTabs
-      class="shrink-0 px-3 border-b border-border-default"
+      class="shrink-0 px-page-edge border-b border-border-default"
       v-model="activePerformanceTab"
       align="left"
       dense
@@ -74,7 +70,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <keep-alive>
         <div class="flex-1 min-h-0">
           <div
-            class="card-container h-full overflow-hidden"
+            class="bg-card-glass-bg h-full overflow-hidden"
           >
             <component
               :is="Component"
@@ -88,7 +84,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
       </keep-alive>
     </router-view>
-  </div>
+  </OPageLayout>
 </template>
 
 <script lang="ts">
@@ -118,7 +114,7 @@ import usePerformance from "@/composables/rum/usePerformance";
 import useRum from "@/composables/rum/useRum";
 import OButton from "@/lib/core/Button/OButton.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 
 export default defineComponent({
   name: "AppPerformance",
@@ -129,7 +125,7 @@ export default defineComponent({
     DateTimePickerDashboard,
     OButton,
     OTooltip,
-    AppPageHeader,
+    OPageLayout,
   },
   setup() {
     const { t } = useI18n();
diff --git a/web/src/views/RUM/AppSessions.vue b/web/src/views/RUM/AppSessions.vue
index 2bb6f16ed9..79b1e51f32 100644
--- a/web/src/views/RUM/AppSessions.vue
+++ b/web/src/views/RUM/AppSessions.vue
@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <template v-if="isSessionReplayEnabled">
       <div>
         <div
-          class="card-container border-b border-border-default py-[0.375rem] px-[0.375rem]"
+          class="bg-card-glass-bg border-b border-border-default py-1.5 px-page-edge"
         >
           <div class="flex items-start gap-1">
             <!-- Query editor (flex-grow to fill available space) -->
@@ -30,9 +30,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :class="[
                   'border',
                   'solid',
-                  'border-[var(--o2-border-color)]',
-                  'p-[0.25rem]',
-                  'rounded-[0.375rem]',
+                  'border-card-glass-border',
+                  'p-1',
+                  'rounded-default',
                   'overflow-y-auto',
                   queryEditorHeight,
                 ]"
@@ -115,7 +115,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :horizontal="false"
       >
         <template #before>
-          <div class="card-container p-[0.325rem] h-full overflow-auto border-r border-border-default">
+          <div class="bg-surface-panel py-1 h-full overflow-auto border-r border-border-default">
             <SearchFieldList
               :fields="streamFields"
               :time-stamp="{
@@ -134,7 +134,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <template #after>
           <div class="h-full flex flex-col min-h-0">
       <!-- KPI summary strip -->
-      <div class="card-container border-b border-border-default">
+      <div class="bg-card-glass-bg border-b border-border-default">
         <SessionsMetricsStrip
           :total="kpiMetrics.total"
           :error-sessions="kpiMetrics.errorSessions"
@@ -151,7 +151,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         />
 
         <!-- One actionable insight for the current window, when one exists -->
-        <div v-if="topInsight" class="px-2 pb-2">
+        <div v-if="topInsight" class="px-page-edge pb-2">
           <SessionsInsightBanner
             :insight="topInsight"
             @apply="applyInsightFilter(topInsight)"
@@ -162,7 +162,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
         <!-- Segment filters -->
         <div
-          class="flex flex-wrap items-center gap-4 px-2 pb-2"
+          class="flex flex-wrap items-center gap-4 px-page-edge pb-2"
           data-test="rum-app-sessions-segment-filters"
         >
           <OToggleGroup
@@ -268,7 +268,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
       </div>
 
-            <div class="card-container flex-1 min-h-0">
+            <div class="bg-card-glass-bg flex-1 min-h-0">
                 <OTable
                   :data="tableRows"
                   :columns="tableColumns"
@@ -310,7 +310,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <OIcon
                       name="play-circle-filled"
                       size="md"
-                      class="cursor-pointer session-play-icon text-[var(--o2-icon-color)] hover:text-[var(--o2-primary-btn-bg)]"
+                      class="cursor-pointer session-play-icon text-icon-color hover:text-button-primary"
                     />
                   </template>
                   <template #cell-session="{ row }">
@@ -320,10 +320,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         class="font-medium truncate"
                       />
                       <div
-                        class="flex items-center gap-1.5 text-xs text-[var(--o2-text-caption)]"
+                        class="flex items-center gap-1.5 text-xs text-text-secondary"
                       >
                         <span
-                          class="o2-monospace-font"
+                          class="font-mono"
                           :title="row.session_id"
                           data-test="rum-app-sessions-session-id-text"
                         >{{ shortSessionId(row.session_id) }}</span>
@@ -363,12 +363,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       }}</span>
                       <small
                         v-if="row.is_bounce"
-                        class="text-[var(--o2-status-warning-text)]"
+                        class="text-status-warning-text"
                         data-test="rum-app-sessions-bounced-text"
                       >{{ t("rum.bounced").toLowerCase() }}</small>
                       <small
                         v-else-if="row.is_active"
-                        class="text-[var(--o2-status-success-text)]"
+                        class="text-status-success-text"
                         data-test="rum-app-sessions-active-text"
                       >{{ t("rum.active") }}</small>
                     </div>
@@ -380,7 +380,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </OSplitter>
     </template>
     <template v-else>
-      <div class="card-container">
+      <div class="bg-card-glass-bg">
         <div class="p-4 enable-rum max-w-[64rem]">
           <div class="pb-4">
             <div class="text-left text-xl font-semibold font-bold pb-3">
@@ -549,9 +549,9 @@ const completeQuery = computed(() => {
 // Dynamic editor height based on content lines
 const queryEditorHeight = computed(() => {
   const lines = (sessionState.data.editorValue.match(/\n/g) || []).length + 1;
-  if (lines === 1) return "h-[2rem]!";
-  if (lines === 2) return "h-[3.5rem]!";
-  return "h-[5rem]!"; // 3+ lines, capped at 5rem (approx 3 lines)
+  if (lines === 1) return "h-8!";
+  if (lines === 2) return "h-14!";
+  return "h-20!"; // 3+ lines, capped at 5rem (approx 3 lines)
 });
 
 const isMounted = ref(false);
@@ -1475,9 +1475,9 @@ const formatSessionDuration = (ms?: number) => {
 // Spine colors match the logs page severity colors (statusParser STATUS_COLORS)
 // so "error red" reads the same across modules.
 const getSessionStatusColor = (row: any) => {
-  if ((row.error_count || 0) > 0) return "var(--o2-severity-error-color)";
+  if ((row.error_count || 0) > 0) return "var(--color-severity-error-color)";
   if ((row.frustration_count || 0) > 0)
-    return "var(--o2-severity-warning-color)";
+    return "var(--color-severity-warning-color)";
   return undefined;
 };
 
@@ -1620,24 +1620,3 @@ useShortcuts([
   { id: "rumSessionsRefresh", handler: () => { if (!isInputFocused()) runQuery(); } },
 ]);
 </script>
-<style>
-.sessions_page {
-  .index-table :hover::-webkit-scrollbar,
-  #tracesSearchGridComponent:hover::-webkit-scrollbar {
-    height: 0.8125rem;
-    width: 0.8125rem;
-  }
-
-  .index-table ::-webkit-scrollbar-track,
-  #tracesSearchGridComponent::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-    border-radius: 0.625rem;
-  }
-
-  .index-table ::-webkit-scrollbar-thumb,
-  #tracesSearchGridComponent::-webkit-scrollbar-thumb {
-    border-radius: 0.625rem;
-    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
-  }
-}
-</style>
diff --git a/web/src/views/RUM/ErrorViewer.spec.ts b/web/src/views/RUM/ErrorViewer.spec.ts
index 62df9cbc5d..faea1a8794 100644
--- a/web/src/views/RUM/ErrorViewer.spec.ts
+++ b/web/src/views/RUM/ErrorViewer.spec.ts
@@ -243,7 +243,7 @@ describe("ErrorViewer.vue", () => {
       const container = wrapper.find('[data-test="error-viewer-container"]');
       expect(container.exists()).toBe(true);
       // Check that the container has the expected layout class
-      expect(container.classes()).toContain("card-container");
+      expect(container.classes()).toContain("bg-card-glass-bg");
     });
   });
 
diff --git a/web/src/views/RUM/ErrorViewer.vue b/web/src/views/RUM/ErrorViewer.vue
index b6ad53e093..f581989656 100644
--- a/web/src/views/RUM/ErrorViewer.vue
+++ b/web/src/views/RUM/ErrorViewer.vue
@@ -17,7 +17,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div
     data-test="error-viewer-container"
-    class="card-container h-full overflow-y-auto"
+    class="bg-card-glass-bg h-full overflow-y-auto"
   >
     <template v-if="isLoading.length">
       <div
@@ -36,11 +36,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </div>
     </template>
     <div v-else>
-      <div class="p-[0.625rem]">
+      <div class="py-2.5">
         <ErrorHeader :error="errorDetails" />
       </div>
       <OSeparator class="w-full" />
-      <div class="p-[0.625rem]">
+      <div class="px-page-edge py-2.5">
         <ErrorTags :error="errorDetails" />
         <ErrorStackTrace
           :error_stack="errorDetails.error_stack || []"
diff --git a/web/src/views/RUM/RealUserMonitoring.vue b/web/src/views/RUM/RealUserMonitoring.vue
index 3596bbc5ad..44b19b6102 100644
--- a/web/src/views/RUM/RealUserMonitoring.vue
+++ b/web/src/views/RUM/RealUserMonitoring.vue
@@ -33,12 +33,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </div>
     </template>
     <template v-else-if="isRumEnabled || isSessionReplayEnabled">
-      <AppPageHeader
+      <OPageHeader
         v-if="showTabs"
         :title="t('rum.title')"
+        :subtitle="t('rum.subtitle')"
         icon="devices"
         tabs-below
-        class="shrink-0 px-4"
+        class="shrink-0"
       >
         <template #tabs>
           <OTabs v-model="activeTab" align="left" @change="changeTab">
@@ -50,7 +51,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             />
           </OTabs>
         </template>
-      </AppPageHeader>
+      </OPageHeader>
       <router-view v-slot="{ Component }">
         <template v-if="$route.meta.keepAlive">
           <keep-alive
@@ -144,7 +145,7 @@ import { useI18n } from "vue-i18n";
 import useRum from "@/composables/rum/useRum";
 import useStreams from "@/composables/useStreams";
 import OTabs from "@/lib/navigation/Tabs/OTabs.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageHeader from "@/lib/core/PageHeader/OPageHeader.vue";
 import OTab from "@/lib/navigation/Tabs/OTab.vue";
 import OButton from "@/lib/core/Button/OButton.vue";
 import OSpinner from "@/lib/feedback/Spinner/OSpinner.vue";
diff --git a/web/src/views/RUM/SessionViewer.vue b/web/src/views/RUM/SessionViewer.vue
index e4197281d0..74db45fd4b 100644
--- a/web/src/views/RUM/SessionViewer.vue
+++ b/web/src/views/RUM/SessionViewer.vue
@@ -15,12 +15,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="flex flex-col qp-2 h-full">
-    <AppPageHeader
-      :title="sessionDetails.id || t('rum.sessionReplay')"
-      :back="{ onClick: () => router.back(), dataTest: 'session-viewer-back-btn' }"
-      class="shrink-0 border-b border-border-default"
-    >
+  <OPageLayout
+    class="qp-2"
+    :title="sessionDetails.id || t('rum.sessionReplay')"
+    :back="{ onClick: () => router.back(), dataTest: 'session-viewer-back-btn' }"
+    bleed
+  >
       <template #subtitle>
         <div class="flex items-center flex-wrap gap-x-3 gap-y-1 min-w-0">
           <div class="text-xs truncate flex items-center gap-1.5">
@@ -52,13 +52,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <OIcon
               name="sentiment-very-dissatisfied"
               size="sm"
-              class="pr-1"
-              style="color: #fb923c"
+              class="pr-1 text-severity-warning-color"
               data-test="frustration-summary-icon"
             />
             <span
-              class="font-semibold"
-              style="color: #fb923c"
+              class="font-semibold text-severity-warning-color"
               data-test="frustration-summary-text"
               >{{ frustrationCount }} Frustration{{
                 frustrationCount > 1 ? "s" : ""
@@ -67,16 +65,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </div>
         </div>
       </template>
-    </AppPageHeader>
     <div
-      class="w-full flex card-container overflow-hidden h-[calc(100%-3.125)]! flex-1 min-h-0"
+      class="w-full flex bg-card-glass-bg overflow-hidden h-[calc(100%-3.125)]! flex-1 min-h-0"
     >
       <OSplitter
         v-model="splitterSize"
         :limits="[200, 1400]"
         unit="px"
         class="w-full h-full"
-        separatorClass="bg-[var(--o2-border-color)] w-[1px]! hover:bg-[var(--o2-theme-color)]"
+        separatorClass="bg-card-glass-border w-px! hover:bg-theme-accent"
       >
         <template #before>
           <VideoPlayer
@@ -110,7 +107,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       :session-id="sessionId"
       :session-details="sessionDetails"
     />
-  </div>
+  </OPageLayout>
 </template>
 
 <script lang="ts" setup>
@@ -128,7 +125,7 @@ import useSessionsReplay from "@/composables/useSessionReplay";
 import usePerformance from "@/composables/rum/usePerformance";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import OSplitter from "@/lib/core/Splitter/OSplitter.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 
 import { formatDate } from "@/utils/date";
 import { getUUID } from "@/utils/zincutils";
diff --git a/web/src/views/RUM/SourceMapDropzone.vue b/web/src/views/RUM/SourceMapDropzone.vue
index 3b85fb7e52..11c6478827 100644
--- a/web/src/views/RUM/SourceMapDropzone.vue
+++ b/web/src/views/RUM/SourceMapDropzone.vue
@@ -31,10 +31,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <div>
         <div
           data-test="rum-upload-source-maps-file-dropzone"
-          class="border-2 border-dashed border-(--o2-border-color) rounded-lg p-8 text-center cursor-pointer transition-all duration-300 bg-(--q-background) hover:border-(--q-primary) dark:border-[rgba(255,255,255,0.1)] dark:hover:bg-[rgba(var(--q-primary-rgb),0.05)]"
+          class="border-2 border-dashed border-card-glass-border rounded-default p-8 text-center cursor-pointer transition-all duration-300 bg-surface-base hover:border-theme-accent dark:border-[color-mix(in_srgb,var(--color-white)_10%,transparent)] dark:hover:bg-[color-mix(in_srgb,var(--color-theme-accent)_5%,transparent)]"
           :class="[
-            isDragging ? 'border-(--q-primary)! bg-[rgba(var(--q-primary-rgb),0.05)]! border-solid! dark:bg-[rgba(var(--q-primary-rgb),0.1)]!' : '',
-            field.state.value ? 'p-6! text-left! border-solid! border-(--q-positive)! bg-[rgba(var(--q-positive-rgb),0.02)]! dark:bg-[rgba(var(--q-positive-rgb),0.05)]!' : ''
+            isDragging ? 'border-theme-accent! bg-[color-mix(in_srgb,var(--color-theme-accent)_5%,transparent)]! border-solid! dark:bg-[color-mix(in_srgb,var(--color-theme-accent)_10%,transparent)]!' : '',
+            field.state.value ? 'p-6! text-left! border-solid! border-status-positive! bg-[color-mix(in_srgb,var(--color-status-positive)_2%,transparent)]! dark:bg-[color-mix(in_srgb,var(--color-status-positive)_5%,transparent)]!' : ''
           ]"
           @dragover.prevent="isDragging = true"
           @dragleave.prevent="isDragging = false"
@@ -46,15 +46,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             data-test="rum-upload-source-maps-file-input"
             type="file"
             accept=".zip"
-            style="display: none"
+            class="hidden"
             @change="onFileInput(field, $event)"
           />
 
           <div v-if="!field.state.value" class="flex flex-col items-center justify-center">
             <OIcon name="backup" size="xl" class="mb-3" />
-            <div class="text-xl font-semibold text-gray-500 mb-2">Drop your file here</div>
-            <div class="text-sm text-gray-400 mb-3">or click to browse</div>
-            <div class="text-xs text-gray-400">.zip files only</div>
+            <div class="text-xl font-semibold text-text-secondary mb-2">Drop your file here</div>
+            <div class="text-sm text-text-secondary mb-3">or click to browse</div>
+            <div class="text-xs text-text-secondary">.zip files only</div>
           </div>
 
           <div v-else class="file-info">
@@ -62,8 +62,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <div class="flex items-center gap-3">
                 <OIcon name="draft" size="lg" />
                 <div>
-                  <div class="text-sm font-medium text-weight-medium">{{ field.state.value.name }}</div>
-                  <div class="text-xs text-gray-400">{{ formatFileSize(field.state.value.size) }}</div>
+                  <div class="text-sm font-medium font-medium">{{ field.state.value.name }}</div>
+                  <div class="text-xs text-text-secondary">{{ formatFileSize(field.state.value.size) }}</div>
                 </div>
               </div>
               <OButton
diff --git a/web/src/views/RUM/SourceMaps.spec.ts b/web/src/views/RUM/SourceMaps.spec.ts
index 3bbf40f323..2bfb29cc4e 100644
--- a/web/src/views/RUM/SourceMaps.spec.ts
+++ b/web/src/views/RUM/SourceMaps.spec.ts
@@ -114,7 +114,7 @@ const buildGlobalConfig = (store: any, router: any, i18n: any) => ({
       props: ["data", "columns", "rowKey", "pagination", "pageSize", "loading"],
       emits: ["update:expandedIds"],
       template:
-        '<div data-test-stub="q-table" :data-rows="data ? data.length : 0"><slot name="empty" /></div>',
+        '<div data-test-stub="o-table" :data-rows="data ? data.length : 0"><slot name="empty" /></div>',
     },
     OButton: {
       name: "OButton",
@@ -344,14 +344,14 @@ describe("SourceMaps.vue", () => {
       // OTable is always rendered; when data is empty it renders #empty slot with OEmptyState.
       // The i18n keys are not translated in the test environment, so we verify the
       // empty state component is rendered rather than checking for translated text.
-      expect(wrapper.find('[data-test-stub="q-table"]').exists()).toBe(true);
-      expect(wrapper.find('[data-test-stub="q-table"]').text()).toContain("emptyState");
+      expect(wrapper.find('[data-test-stub="o-table"]').exists()).toBe(true);
+      expect(wrapper.find('[data-test-stub="o-table"]').text()).toContain("emptyState");
     });
 
     it("shows OTable when grouped source maps exist", async () => {
       wrapper = await mountComponent();
 
-      expect(wrapper.find('[data-test-stub="q-table"]').exists()).toBe(true);
+      expect(wrapper.find('[data-test-stub="o-table"]').exists()).toBe(true);
     });
   });
 
diff --git a/web/src/views/RUM/SourceMaps.vue b/web/src/views/RUM/SourceMaps.vue
index 1f02e5cf99..6b863b6d59 100644
--- a/web/src/views/RUM/SourceMaps.vue
+++ b/web/src/views/RUM/SourceMaps.vue
@@ -16,10 +16,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <div
-    class="source-maps-container card-container flex flex-col h-full overflow-hidden"
+    class="source-maps-container bg-card-glass-bg flex flex-col h-full overflow-hidden"
   >
     <!-- Filters Section -->
-    <div class="p-3 bg-(--q-background)">
+    <div class="px-page-edge py-3 bg-surface-base">
       <div class="flex justify-between items-end">
       <div class="flex gap-4 items-end">
           <!-- Version Filter -->
@@ -116,13 +116,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           class="w-full"
         >
           <template #expansion="{ row }">
-            <div class="p-3 bg-(--q-background) border-t border-(--q-border-color,var(--o2-border))">
+            <div class="p-3 bg-surface-base border-t border-(--color-border-default,var(--color-border-default))">
               <div class="text-sm font-medium mb-2">
                 Source Map Files ({{ row.files.length }})
               </div>
               <ul
-                class="flex flex-col divide-y divide-border border rounded-md"
-                style="max-height: 400px; overflow-y: auto;"
+                class="flex flex-col divide-y divide-border border rounded-default overflow-y-auto"
+                style="max-height: 400px"
               >
                 <li
                   v-for="(file, index) in row.files"
@@ -132,11 +132,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 >
                   <div class="flex flex-col flex-1 min-w-0">
                     <span class="block text-xs text-muted-foreground">Source File</span>
-                    <span class="font-[SF_Mono,Monaco,Inconsolata,'Fira_Code','Droid_Sans_Mono',monospace] break-all text-sm">{{ file.source_file_name }}</span>
+                    <span class="font-mono break-all text-sm">{{ file.source_file_name }}</span>
                   </div>
                   <div class="flex flex-col flex-1 min-w-0">
                     <span class="block text-xs text-muted-foreground">Source Map File</span>
-                    <span class="font-[SF_Mono,Monaco,Inconsolata,'Fira_Code','Droid_Sans_Mono',monospace] break-all text-sm">{{ file.source_map_file_name }}</span>
+                    <span class="font-mono break-all text-sm">{{ file.source_map_file_name }}</span>
                   </div>
                 </li>
               </ul>
diff --git a/web/src/views/RUM/UploadSourceMaps.schema.ts b/web/src/views/RUM/UploadSourceMaps.schema.ts
index 525fe7dbc7..808c4cbbcf 100644
--- a/web/src/views/RUM/UploadSourceMaps.schema.ts
+++ b/web/src/views/RUM/UploadSourceMaps.schema.ts
@@ -1,18 +1,15 @@
 // Copyright 2026 OpenObserve Inc.
 //
 // Validation schema for UploadSourceMaps.vue (RUM source-map upload page).
-// Built via a factory so messages stay i18n-driven (pass useI18n's `t`),
-// matching the t()-factory style used by the other migrated schemas.
+// Built via a factory so messages stay i18n-driven (pass useI18n's `t`).
 //
 // Field rules:
-//   service — `!!v || 'Service is required'` → z.string().trim().min(1, …)
-//   version — `!!v || 'Version is required'` → z.string().trim().min(1, …)
-// The `.zip` file rule lived in a manual toast (`validateAndSetFile`) — it is
-// now re-encoded here as a schema refine, and the required-file check (a second
-// manual toast) becomes the `instanceof(File)` refine. Both surface INLINE.
+//   service — required (non-empty).
+//   version — required (non-empty).
+//   file    — required, and must be a `.zip`. Errors surface inline.
 //
-// `environment` is unvalidated but is part of the submitted payload and lives
-// inside the OForm → R1-strict makes it a form field, `.optional()`.
+// `environment` is unvalidated but is part of the submitted payload, so it is
+// an optional form field.
 
 import { z } from "zod";
 
diff --git a/web/src/views/RUM/UploadSourceMaps.vue b/web/src/views/RUM/UploadSourceMaps.vue
index 05cc32446f..c3bcb1bf33 100644
--- a/web/src/views/RUM/UploadSourceMaps.vue
+++ b/web/src/views/RUM/UploadSourceMaps.vue
@@ -15,14 +15,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="w-full h-full flex flex-col min-h-0 px-2.5 bg-(--q-background)">
-    <!-- Top Header Bar -->
-    <AppPageHeader
-      title="Upload Source Maps"
-      :back="{ onClick: navigateBack, dataTest: 'add-alert-back-btn' }"
-      class="px-4 border-b border-border-default"
-    />
-
+  <OPageLayout
+    class="bg-surface-base"
+    title="Upload Source Maps"
+    :back="{ onClick: navigateBack, dataTest: 'add-alert-back-btn' }"
+    bleed
+  >
     <OForm
       id="upload-source-maps-form"
       class="contents"
@@ -32,7 +30,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       v-slot="{ isSubmitting }"
     >
       <!-- Form Content Area -->
-      <div class="flex-1 overflow-y-auto card-container mb-[0.675rem] p-6" style="height: calc(100vh - 172px); overflow: auto">
+      <div class="flex-1 overflow-y-auto bg-card-glass-bg mb-[0.675rem] p-6 overflow-auto" style="height: calc(100vh - 172px)">
         <div class="max-w-300 mx-auto">
           <!-- Input Fields -->
           <div class="grid grid-cols-1 gap-4 mb-6">
@@ -65,15 +63,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
           <!-- File Upload Area (form-owned `file` field, schema-validated) -->
           <div class="mb-6">
-            <div class="text-sm font-medium text-weight-medium mb-2">Source Map ZIP File *</div>
+            <div class="text-sm font-medium font-medium mb-2">Source Map ZIP File *</div>
             <SourceMapDropzone name="file" />
           </div>
         </div>
       </div>
 
       <!-- Bottom Action Bar -->
-      <div class="action-bar shrink-0 card-container flex items-center justify-end gap-3 py-3 pr-3 border-t border-[var(--o2-border-color)]"
-        style="position: sticky; z-index: 2">
+      <div class="action-bar shrink-0 bg-card-glass-bg flex items-center justify-end gap-3 py-3 pr-3 border-t border-card-glass-border sticky"
+        style="z-index: 2">
         <OButton
           data-test="rum-upload-source-maps-cancel-btn"
           variant="outline"
@@ -91,7 +89,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         >Upload</OButton>
       </div>
     </OForm>
-  </div>
+  </OPageLayout>
 </template>
 
 <script setup lang="ts">
@@ -105,7 +103,7 @@ import OIcon from "@/lib/core/Icon/OIcon.vue";
 import OForm from "@/lib/forms/Form/OForm.vue";
 import OFormInput from "@/lib/forms/Input/OFormInput.vue";
 import SourceMapDropzone from "./SourceMapDropzone.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import { toast } from "@/lib/feedback/Toast/useToast";
 import {
   makeUploadSourceMapsSchema,
diff --git a/web/src/views/Search.spec.ts b/web/src/views/Search.spec.ts
deleted file mode 100644
index c4791faa0f..0000000000
--- a/web/src/views/Search.spec.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { mount } from '@vue/test-utils';
-import Search from './Search.vue';
-
-// Mock zinc-logs component
-const ZincLogsMock = {
-  name: 'ZincLogs',
-  template: '<div class="zinc-logs-mock"></div>',
-};
-
-describe('Search.vue', () => {
-  it('should render zinc-logs component', () => {
-    const wrapper = mount(Search, {
-      global: {
-        stubs: {
-          'zinc-logs': ZincLogsMock,
-        },
-      },
-    });
-
-    expect(wrapper.find('.zinc-logs-mock').exists()).toBe(true);
-  });
-
-  it('should mount without errors', () => {
-    expect(() => {
-      mount(Search, {
-        global: {
-          stubs: {
-            'zinc-logs': ZincLogsMock,
-          },
-        },
-      });
-    }).not.toThrow();
-  });
-
-  it('should have correct component structure', () => {
-    const wrapper = mount(Search, {
-      global: {
-        stubs: {
-          'zinc-logs': ZincLogsMock,
-        },
-      },
-    });
-
-    expect(wrapper.html()).toContain('zinc-logs-mock');
-  });
-});
diff --git a/web/src/views/Search.vue b/web/src/views/Search.vue
deleted file mode 100644
index 76a306def9..0000000000
--- a/web/src/views/Search.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<!-- eslint-disable vue/attribute-hyphenation -->
-<!-- eslint-disable vue/v-on-event-hyphenation -->
-<template>
-  <!-- <zinc-logs pageType="logs"></zinc-logs> -->
-  <zinc-logs></zinc-logs>
-</template>
\ No newline at end of file
diff --git a/web/src/views/ShortUrl.spec.ts b/web/src/views/ShortUrl.spec.ts
index cac3c1c19e..8b5fea6c40 100644
--- a/web/src/views/ShortUrl.spec.ts
+++ b/web/src/views/ShortUrl.spec.ts
@@ -122,7 +122,7 @@ describe("ShortUrl", () => {
   it("should render message with correct CSS class", () => {
     const message = wrapper.find('[data-test="message"]');
     expect(message.classes()).toContain("text-base");
-    expect(message.classes()).toContain("text-[#666]");
+    expect(message.classes()).toContain("text-text-secondary");
   });
 
   // Props Tests
diff --git a/web/src/views/ShortUrl.vue b/web/src/views/ShortUrl.vue
index 5f7660d07e..4a04a08042 100644
--- a/web/src/views/ShortUrl.vue
+++ b/web/src/views/ShortUrl.vue
@@ -4,7 +4,7 @@
     class="h-[100vh] flex flex-col items-center justify-center"
   >
     <OSpinner size="lg" data-test="spinner" />
-    <div data-test="message" class="text-base text-[#666]">Redirecting...</div>
+    <div data-test="message" class="text-base text-text-secondary">Redirecting...</div>
   </div>
 </template>
 
diff --git a/web/src/views/StreamExplorer.vue b/web/src/views/StreamExplorer.vue
index e7fe5c2a80..11808bb4d3 100644
--- a/web/src/views/StreamExplorer.vue
+++ b/web/src/views/StreamExplorer.vue
@@ -1,7 +1,7 @@
 <!-- Copyright 2026 OpenObserve Inc. -->
 
 <template>
-  <div class="rounded-md">
+  <div class="rounded-default">
     <SearchBar
       ref="searchBarRef"
       :query-data="queryData"
diff --git a/web/src/views/SyntheticMonitoring.vue b/web/src/views/SyntheticMonitoring.vue
index 4aa5558de2..a0ef2a7bde 100644
--- a/web/src/views/SyntheticMonitoring.vue
+++ b/web/src/views/SyntheticMonitoring.vue
@@ -1,13 +1,11 @@
 <template>
-  <div class="flex flex-col h-full overflow-hidden relative">
-
-    <!-- PAGE HEADER -->
-    <AppPageHeader
-      :title="t('synthetics.pageTitle')"
-      :subtitle="t('synthetics.pageSubtitle')"
-      class="px-4 border-b border-border-default"
-      icon="radar"
-    >
+  <OPageLayout
+    class="relative"
+    :title="t('synthetics.pageTitle')"
+    :subtitle="t('synthetics.pageSubtitle')"
+    icon="radar"
+    bleed
+  >
       <template #actions>
         <OButton
           size="sm"
@@ -18,12 +16,10 @@
           {{ t('synthetics.newCheck.button') }}
         </OButton>
       </template>
-    </AppPageHeader>
-
     <!-- CONTENT AREA: sidebar + main -->
     <div class="flex flex-1 overflow-hidden">
       <!-- LEFT SIDEBAR: folder navigation -->
-      <div class="w-[14.375rem] shrink-0 overflow-y-auto">
+      <div class="w-rail shrink-0 overflow-y-auto">
         <FolderList
           type="synthetics"
           data-test="synthetic-monitoring-folder-list"
@@ -208,14 +204,14 @@
         />
       </div>
     </ODialog>
-  </div>
+  </OPageLayout>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, onMounted, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useStore } from "vuex";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import OButton from "@/lib/core/Button/OButton.vue";
 import OSelect from "@/lib/forms/Select/OSelect.vue";
diff --git a/web/src/views/UsageTab.spec.ts b/web/src/views/UsageTab.spec.ts
index 45c40ed319..8a22914e46 100644
--- a/web/src/views/UsageTab.spec.ts
+++ b/web/src/views/UsageTab.spec.ts
@@ -258,54 +258,44 @@ describe("UsageTab", () => {
     });
 
     it("should render the streams overview section", () => {
-      const streamsSection = wrapper.find(
-        '[aria-label="Streams overview section"]',
-      );
-      expect(streamsSection.exists()).toBe(true);
+      // The streams section renders the KPI tile row carrying the streams count
+      expect(
+        wrapper.find('[data-test="home-usage-tab-streams-count"]').exists(),
+      ).toBe(true);
     });
 
     it("should render streams count tile", () => {
-      const tile = wrapper.find('[aria-label="Streams count statistics"]');
+      const tile = wrapper.find('[data-test="home-usage-tab-streams-count"]');
       expect(tile.exists()).toBe(true);
-      expect(
-        tile.find('[data-test="home-usage-tab-streams-count"]').text(),
-      ).toBe("5");
+      expect(tile.text()).toBe("5");
     });
 
     it("should render events count tile", () => {
-      const tile = wrapper.find('[aria-label="Events count statistics"]');
+      const tile = wrapper.find('[data-test="home-usage-tab-events-count"]');
       expect(tile.exists()).toBe(true);
       // formatEventCount(10000) -> "10000" (falls back to summary.doc_count)
-      expect(
-        tile.find('[data-test="home-usage-tab-events-count"]').text(),
-      ).toBe("10000");
+      expect(tile.text()).toBe("10000");
     });
 
     it("should render ingested data size tile", () => {
       const tile = wrapper.find(
-        '[aria-label="Ingested data size statistics"]',
+        '[data-test="home-usage-tab-ingested-size"]',
       );
       expect(tile.exists()).toBe(true);
       // fallback: summary.value.ingested_data = formatSizeFromMB(2000) -> "2000 MB"
-      expect(
-        tile.find('[data-test="home-usage-tab-ingested-size"]').text(),
-      ).toBe("2000 MB");
+      expect(tile.text()).toBe("2000 MB");
     });
 
     it("should render the functions tile", () => {
-      const tile = wrapper.find('[aria-label="Functions count statistics"]');
+      const tile = wrapper.find('[data-test="home-usage-tab-functions-count"]');
       expect(tile.exists()).toBe(true);
-      expect(
-        tile.find('[data-test="home-usage-tab-functions-count"]').text(),
-      ).toBe("3");
+      expect(tile.text()).toBe("3");
     });
 
     it("should render the dashboards tile", () => {
-      const tile = wrapper.find('[aria-label="Dashboards count statistics"]');
+      const tile = wrapper.find('[data-test="home-usage-tab-dashboards-count"]');
       expect(tile.exists()).toBe(true);
-      expect(
-        tile.find('[data-test="home-usage-tab-dashboards-count"]').text(),
-      ).toBe("4");
+      expect(tile.text()).toBe("4");
     });
 
     it("should render the alerts overview section", () => {
@@ -367,20 +357,16 @@ describe("UsageTab", () => {
 
     it("should render compressed data size tile when isCloud is false", () => {
       const tile = wrapper.find(
-        '[aria-label="Compressed data size statistics"]',
+        '[data-test="home-usage-tab-compressed-size"]',
       );
       expect(tile.exists()).toBe(true);
-      expect(
-        tile.find('[data-test="home-usage-tab-compressed-size"]').text(),
-      ).toBe("500 MB");
+      expect(tile.text()).toBe("500 MB");
     });
 
     it("should render index size tile when isCloud is false", () => {
-      const tile = wrapper.find('[aria-label="Index size statistics"]');
+      const tile = wrapper.find('[data-test="home-usage-tab-index-size"]');
       expect(tile.exists()).toBe(true);
-      expect(
-        tile.find('[data-test="home-usage-tab-index-size"]').text(),
-      ).toBe("100 MB");
+      expect(tile.text()).toBe("100 MB");
     });
   });
 
diff --git a/web/src/views/UsageTab.vue b/web/src/views/UsageTab.vue
index 449fc91cb5..783afce324 100644
--- a/web/src/views/UsageTab.vue
+++ b/web/src/views/UsageTab.vue
@@ -18,13 +18,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <!-- Main content when data exists -->
     <div
       v-if="!no_data_ingest && !isLoadingSummary"
-      class="w-full h-full flex flex-col overflow-y-auto [padding-right:0.625rem]"
+      class="w-full h-full flex flex-col overflow-y-auto px-page-edge pt-2 pb-1"
     >
-      <!-- Banners -->
-      <div class="banners-wrapper shrink-0 flex flex-col gap-2">
-        <div>
-          <TrialPeriod></TrialPeriod>
-        </div>
+      <!-- Banners — each component renders nothing when inactive, so this whole
+           block collapses to zero height (no reserved margin) when idle; the
+           gap below only appears when a banner is actually shown. -->
+      <div class="shrink-0 flex flex-col gap-2 empty:hidden not-empty:mb-3">
+        <TrialPeriod></TrialPeriod>
         <LicensePeriod
           v-if="!showUsageReportBanner"
           @update-license="goToLicensePage"
@@ -33,497 +33,365 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <DatabaseDeprecationBanner></DatabaseDeprecationBanner>
       </div>
 
-      <!-- Streams overview section -->
-      <div
-        class="rounded p-4 bg-[var(--o2-card-bg)] border border-[var(--o2-border-color)]"
-        role="region"
-        aria-label="Streams overview section"
-      >
-        <div class="flex justify-between items-center mb-3">
-          <div class="flex items-center gap-2">
-            <div class="bg-[rgba(57,126,246,0.2)] border border-[rgba(57,126,246,0.35)] opacity-80 flex items-center justify-center w-[2.5rem] h-[2.5rem] rounded-lg" aria-hidden="true">
-              <OIcon name="window" size="md" />
-            </div>
-            <div class="text-(length:--text-lg) font-semibold [line-height:1.4]">{{ t("home.streams") }}</div>
-          </div>
-          <OButton
-            variant="ghost"
-            size="icon-circle"
-            :class="
-              store.state.theme === 'dark'
-                ? 'view-button-dark'
-                : 'view-button-light'
-            "
-            aria-label="View all streams"
-            :title="t('home.viewButton')"
-            data-test="home-usage-tab-view-streams-btn"
+      <!-- Streams — data-volume metrics. Uniform, non-clickable stat tiles; the
+           list is reached from the section header so the row stays consistent. -->
+      <div class="flex items-center justify-between mb-2">
+        <div class="flex items-center gap-2">
+          <span
+            class="inline-flex items-center justify-center shrink-0 w-8 h-8 rounded-default bg-icon-chip-primary-bg text-icon-chip-primary-text"
+            aria-hidden="true"
           >
-            <OIcon name="arrow-forward" size="sm" class="view-arrow-icon" />
-            <OIcon name="arrow-forward" size="sm" class="view-arrow-icon-in" />
-            <router-link
-              exact
-              :to="{
-                name: 'logstreams',
-                query: {
-                  org_identifier:
-                    store.state.selectedOrganization?.identifier,
-                },
-              }"
-              class="absolute inset-0"
-              aria-label="Navigate to streams page"
-            ></router-link>
-          </OButton>
-        </div>
-
-        <!-- Tiles -->
-        <div class="grid [grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))] gap-3">
-          <div class="[border-radius:0.325rem] border border-[var(--o2-border-color)]">
-            <div
-              class="rounded-lg text-center flex flex-col justify-between h-full p-3 gap-1 [transition:all_0.3s_cubic-bezier(0.4,0,0.2,1)] [contain:layout_style_paint]"
-              role="article"
-              aria-label="Streams count statistics"
-            >
-              <div class="flex flex-col justify-between">
-                <div class="flex justify-between">
-                  <div class="text-(length:--text-base) font-medium [line-height:1.4] [letter-spacing:0%]">{{ t("home.streams") }}</div>
-                  <div class="bg-[rgba(57,126,246,0.2)] border border-[rgba(57,126,246,0.35)] opacity-80 flex items-center justify-center w-[2.5rem] h-[2.5rem] rounded-lg" aria-hidden="true">
-                    <img :src="streamsIcon" alt="" class="h-6 dark:[filter:brightness(1.5)]" />
-                  </div>
-                </div>
-                <div
-                  v-if="false"
-                  class="rounded-[3.125rem] w-40 px-2 flex items-center text-xs! bg-[var(--o2-status-success-bg)] border border-[var(--o2-border-color)] text-[var(--o2-status-success-text)]"
-                >
-                  <OIcon name="arrow-upward" size="xs" /> 2.89% from last
-                  week
-                </div>
-              </div>
-              <div
-                class="text-(length:--text-xl) font-semibold [line-height:1.3] flex items-end"
-                aria-live="polite"
-                data-test="home-usage-tab-streams-count"
-              >
-                {{ animatedStreamsCount || summary.streams_count }}
-              </div>
-            </div>
-          </div>
-
-          <div class="[border-radius:0.325rem] border border-[var(--o2-border-color)]">
-            <div
-              class="rounded-lg text-center flex flex-col justify-between h-full p-3 gap-1 [transition:all_0.3s_cubic-bezier(0.4,0,0.2,1)] [contain:layout_style_paint]"
-              role="article"
-              aria-label="Events count statistics"
-            >
-              <div class="flex flex-col justify-between">
-                <div class="flex justify-between">
-                  <div class="text-(length:--text-base) font-medium [line-height:1.4] [letter-spacing:0%]">{{ t("home.docsCountLbl") }}</div>
-                  <div class="bg-[rgba(57,126,246,0.2)] border border-[rgba(57,126,246,0.35)] opacity-80 flex items-center justify-center w-[2.5rem] h-[2.5rem] rounded-lg" aria-hidden="true">
-                    <img :src="recordsIcon" alt="" class="h-6 dark:[filter:brightness(1.5)]" />
-                  </div>
-                </div>
-                <div
-                  v-if="false"
-                  class="rounded-[3.125rem] w-40 px-2 flex items-center text-xs! bg-[var(--o2-status-success-bg)] border border-[var(--o2-border-color)] text-[var(--o2-status-success-text)]"
-                >
-                  <OIcon name="arrow-upward" size="xs" /> 2.89% from last
-                  week
-                </div>
-              </div>
-              <div
-                class="text-(length:--text-xl) font-semibold [line-height:1.3] flex items-end"
-                aria-live="polite"
-                data-test="home-usage-tab-events-count"
-              >
-                {{ formattedAnimatedEventsCount }}
-              </div>
-            </div>
-          </div>
-
-          <div class="[border-radius:0.325rem] border border-[var(--o2-border-color)]">
-            <div
-              class="rounded-lg text-center flex flex-col justify-between h-full p-3 gap-1 [transition:all_0.3s_cubic-bezier(0.4,0,0.2,1)] [contain:layout_style_paint]"
-              role="article"
-              aria-label="Ingested data size statistics"
-            >
-              <div class="flex flex-col justify-between">
-                <div class="flex justify-between">
-                  <div class="text-(length:--text-base) font-medium [line-height:1.4] [letter-spacing:0%]">
-                    {{ t("home.totalDataIngested") }}
-                  </div>
-                  <div class="bg-[rgba(57,126,246,0.2)] border border-[rgba(57,126,246,0.35)] opacity-80 flex items-center justify-center w-[2.5rem] h-[2.5rem] rounded-lg" aria-hidden="true">
-                    <img :src="ingestedSizeIcon" alt="" class="h-6 dark:[filter:brightness(1.5)]" />
-                  </div>
-                </div>
-                <div
-                  v-if="false"
-                  class="rounded-[3.125rem] w-40 px-2 flex items-center text-xs! bg-[var(--o2-status-error-bg)] border border-[var(--o2-border-color)] text-[var(--o2-status-error-text)]"
-                >
-                  <OIcon name="arrow-downward" size="xs" /> 2.89% from last
-                  week
-                </div>
-              </div>
-              <div
-                class="text-(length:--text-xl) font-semibold [line-height:1.3] flex items-end"
-                aria-live="polite"
-                data-test="home-usage-tab-ingested-size"
-              >
-                {{ formattedAnimatedIngestedSize }}
-              </div>
-            </div>
-          </div>
-
-          <div class="[border-radius:0.325rem] border border-[var(--o2-border-color)]" v-if="config.isCloud == 'false'">
-            <div
-              class="rounded-lg text-center flex flex-col justify-between h-full p-3 gap-1 [transition:all_0.3s_cubic-bezier(0.4,0,0.2,1)] [contain:layout_style_paint]"
-              role="article"
-              aria-label="Compressed data size statistics"
-            >
-              <div class="flex flex-col justify-between">
-                <div class="flex justify-between">
-                  <div class="text-(length:--text-base) font-medium [line-height:1.4] [letter-spacing:0%]">
-                    {{ t("home.totalDataCompressed") }}
-                  </div>
-                  <div class="bg-[rgba(57,126,246,0.2)] border border-[rgba(57,126,246,0.35)] opacity-80 flex items-center justify-center w-[2.5rem] h-[2.5rem] rounded-lg" aria-hidden="true">
-                    <img :src="compressedSizeIcon" alt="" class="h-6 dark:[filter:brightness(1.5)]" />
-                  </div>
-                </div>
-                <div
-                  v-if="false"
-                  class="rounded-[3.125rem] w-40 px-2 flex items-center text-xs! bg-[var(--o2-status-success-bg)] border border-[var(--o2-border-color)] text-[var(--o2-status-success-text)]"
-                >
-                  <OIcon name="arrow-upward" size="xs" /> 2.89% from last
-                  week
-                </div>
-              </div>
-              <div
-                class="text-(length:--text-xl) font-semibold [line-height:1.3] flex items-end"
-                aria-live="polite"
-                data-test="home-usage-tab-compressed-size"
-              >
-                {{ formattedAnimatedCompressedSize }}
-              </div>
-            </div>
-          </div>
-
-          <div class="[border-radius:0.325rem] border border-[var(--o2-border-color)]" v-if="config.isCloud == 'false'">
-            <div
-              class="rounded-lg text-center flex flex-col justify-between h-full p-3 gap-1 [transition:all_0.3s_cubic-bezier(0.4,0,0.2,1)] [contain:layout_style_paint]"
-              role="article"
-              aria-label="Index size statistics"
-            >
-              <div class="flex flex-col justify-between">
-                <div class="flex justify-between">
-                  <div class="text-(length:--text-base) font-medium [line-height:1.4] [letter-spacing:0%]">{{ t("home.indexSizeLbl") }}</div>
-                  <div class="bg-[rgba(57,126,246,0.2)] border border-[rgba(57,126,246,0.35)] opacity-80 flex items-center justify-center w-[2.5rem] h-[2.5rem] rounded-lg" aria-hidden="true">
-                    <img :src="indexSizeIcon" alt="" class="h-6 dark:[filter:brightness(1.5)]" />
-                  </div>
-                </div>
-                <div
-                  v-if="false"
-                  class="rounded-[3.125rem] w-40 px-2 flex items-center text-xs! bg-[var(--o2-status-success-bg)] border border-[var(--o2-border-color)] text-[var(--o2-status-success-text)]"
-                >
-                  <OIcon name="arrow-upward" size="xs" /> 0.00% from last
-                  week
-                </div>
-              </div>
-              <div
-                class="text-(length:--text-xl) font-semibold [line-height:1.3] flex items-end"
-                aria-live="polite"
-                data-test="home-usage-tab-index-size"
-              >
-                {{ formattedAnimatedIndexSize }}
-              </div>
-            </div>
-          </div>
+            <OIcon name="window" size="sm" />
+          </span>
+          <span class="text-base font-semibold text-text-heading">{{ t("home.streams") }}</span>
         </div>
+        <OButton
+          v-if="canView('logstreams')"
+          variant="ghost"
+          size="icon-circle"
+          class="relative"
+          :aria-label="t('home.viewButton')"
+          :title="t('home.viewButton')"
+          data-test="home-usage-tab-view-streams-btn"
+        >
+          <OIcon name="arrow-forward" size="sm" />
+          <router-link
+            exact
+            :to="{ name: 'logstreams', query: { org_identifier: store.state.selectedOrganization?.identifier } }"
+            class="absolute inset-0"
+            :aria-label="t('home.viewButton')"
+          ></router-link>
+        </OButton>
       </div>
+      <KpiCardRow class="shrink-0 mb-4" min-width="12rem">
+        <!-- Streams -->
+        <KpiCard
+          :label="t('home.streams')"
+          icon="window"
+          icon-size="md"
+          label-class="text-sm font-medium text-text-secondary"
+          icon-class="bg-icon-chip-primary-bg text-icon-chip-primary-text"
+        >
+          <template #value>
+            <span
+              class="text-2xl font-semibold text-text-heading tabular-nums leading-tight"
+              aria-live="polite"
+              data-test="home-usage-tab-streams-count"
+            >{{ animatedStreamsCount || summary.streams_count }}</span>
+          </template>
+        </KpiCard>
 
-      <!-- Charts section -->
-      <div class="grid [grid-template-columns:minmax(min-content,max-content)_1fr_2fr] gap-3 mt-4 items-stretch flex-1 min-h-0">
-        <!-- Functions and Dashboards tiles -->
-        <div class="flex flex-col gap-4 w-full">
-          <div class="flex-1 flex min-w-0 w-full">
-            <div
-              class="rounded p-4 w-full bg-[var(--o2-card-bg)] border border-[var(--o2-border-color)] text-center flex flex-col justify-between"
-              role="article"
-              aria-label="Functions count statistics"
-            >
-              <div class="flex flex-col justify-between">
-                <div
-                  class="flex items-center gap-2 flex-nowrap w-full"
-                >
-                  <div
-                    class="bg-[rgba(238,95,38,0.2)] border border-[rgba(238,95,38,0.35)] opacity-80 flex items-center justify-center w-[2.5rem] h-[2.5rem] rounded-lg flex-shrink-0"
-                    aria-hidden="true"
-                  >
-                    <img :src="functionsIcon" alt="" class="h-6 dark:[filter:brightness(1.5)]" />
-                  </div>
-                  <div
-                    class="text-(length:--text-base) font-medium [line-height:1.4] [letter-spacing:0%] flex-1 text-left whitespace-nowrap overflow-hidden text-ellipsis"
-                  >
-                    {{ t("home.functionTitle") }}
-                  </div>
-                  <OButton
-                    variant="ghost"
-                    size="icon-circle"
-                    :class="
-                      store.state.theme === 'dark'
-                        ? 'view-button-dark'
-                        : 'view-button-light'
-                    "
-                    aria-label="View all functions"
-                    class="flex-shrink-0"
-                    :title="t('home.viewButton')"
-                    data-test="home-usage-tab-view-functions-btn"
-                  >
-                    <OIcon name="arrow-forward" size="sm" class="view-arrow-icon" />
-                    <OIcon name="arrow-forward" size="sm" class="view-arrow-icon-in" />
-                    <router-link
-                      exact
-                      :to="{
-                        name: 'functionList',
-                        query: {
-                          org_identifier:
-                            store.state.selectedOrganization?.identifier,
-                        },
-                      }"
-                      class="absolute inset-0"
-                      aria-label="Navigate to functions page"
-                    ></router-link>
-                  </OButton>
-                </div>
-              </div>
-              <div
-                class="text-(length:--text-xl) font-semibold [line-height:1.3] flex items-end"
-                aria-live="polite"
-                data-test="home-usage-tab-functions-count"
+        <!-- Events -->
+        <KpiCard
+          :label="t('home.docsCountLbl')"
+          icon="bar-chart"
+          icon-size="md"
+          label-class="text-sm font-medium text-text-secondary"
+          icon-class="bg-icon-chip-primary-bg text-icon-chip-primary-text"
+        >
+          <template #value>
+            <span
+              class="text-2xl font-semibold text-text-heading tabular-nums leading-tight"
+              aria-live="polite"
+              data-test="home-usage-tab-events-count"
+            >{{ formattedAnimatedEventsCount }}</span>
+          </template>
+        </KpiCard>
+
+        <!-- Ingested size -->
+        <KpiCard
+          :label="t('home.totalDataIngested')"
+          icon="download"
+          icon-size="md"
+          label-class="text-sm font-medium text-text-secondary"
+          icon-class="bg-icon-chip-warning-bg text-icon-chip-warning-text"
+        >
+          <template #value>
+            <span
+              class="text-2xl font-semibold text-text-heading tabular-nums leading-tight"
+              aria-live="polite"
+              data-test="home-usage-tab-ingested-size"
+            >{{ formattedAnimatedIngestedSize }}</span>
+          </template>
+        </KpiCard>
+
+        <!-- Compressed size (self-hosted only) -->
+        <KpiCard
+          v-if="config.isCloud == 'false'"
+          :label="t('home.totalDataCompressed')"
+          icon="compress"
+          icon-size="md"
+          label-class="text-sm font-medium text-text-secondary"
+          icon-class="bg-icon-chip-success-bg text-icon-chip-success-text"
+        >
+          <template #value>
+            <span
+              class="text-2xl font-semibold text-text-heading tabular-nums leading-tight"
+              aria-live="polite"
+              data-test="home-usage-tab-compressed-size"
+            >{{ formattedAnimatedCompressedSize }}</span>
+          </template>
+        </KpiCard>
+
+        <!-- Index size (self-hosted only) -->
+        <KpiCard
+          v-if="config.isCloud == 'false'"
+          :label="t('home.indexSizeLbl')"
+          icon="save"
+          icon-size="md"
+          label-class="text-sm font-medium text-text-secondary"
+          icon-class="bg-icon-chip-warning-bg text-icon-chip-warning-text"
+        >
+          <template #value>
+            <span
+              class="text-2xl font-semibold text-text-heading tabular-nums leading-tight"
+              aria-live="polite"
+              data-test="home-usage-tab-index-size"
+            >{{ formattedAnimatedIndexSize }}</span>
+          </template>
+        </KpiCard>
+      </KpiCardRow>
+
+      <!-- Main region — a filled resources rail beside the two status charts, so
+           Functions/Dashboards live somewhere purposeful and the vertical space
+           is actually used. Rail carries counts + one-click access to every area. -->
+      <div class="grid grid-cols-1 lg:grid-cols-[16rem_minmax(0,1fr)_minmax(0,1fr)] gap-3 flex-1 min-h-0">
+        <!-- Resources rail -->
+        <aside
+          class="rounded-default p-4 bg-card-glass-bg border border-card-glass-border flex flex-col min-h-0 overflow-y-auto"
+          aria-label="Resources"
+        >
+          <!-- Resources — owned assets with live counts. Each row is gated to the
+               same route the left nav uses, so it hides when access is missing. -->
+          <template v-if="showResources">
+            <div class="text-sm font-semibold text-text-heading mb-1">{{ t("home.resources") }}</div>
+            <nav class="flex flex-col">
+              <router-link
+                v-if="canView('functionList')"
+                class="group flex items-center gap-2.5 rounded-default -mx-2 px-2 py-2 no-underline text-inherit transition-colors hover:bg-table-row-hover-bg"
+                :to="{ name: 'functionList', query: { org_identifier: store.state.selectedOrganization?.identifier } }"
+                data-test="home-usage-tab-functions-card"
               >
-                {{ animatedFunctionCount || summary.function_count }}
-              </div>
-            </div>
-          </div>
-
-          <div class="flex-1 flex min-w-0 w-full">
-            <div
-              class="rounded p-4 w-full bg-[var(--o2-card-bg)] border border-[var(--o2-border-color)] text-center flex flex-col justify-between"
-              role="article"
-              aria-label="Dashboards count statistics"
-            >
-              <div class="flex flex-col justify-between">
-                <div
-                  class="flex items-center gap-2 flex-nowrap w-full"
-                >
-                  <div
-                    class="bg-[rgba(238,95,38,0.2)] border border-[rgba(238,95,38,0.35)] opacity-80 flex items-center justify-center w-[2.5rem] h-[2.5rem] rounded-lg flex-shrink-0"
-                    aria-hidden="true"
-                  >
-                    <img :src="dashboardsIcon" alt="" class="h-6 dark:[filter:brightness(1.5)]" />
-                  </div>
-                  <div
-                    class="text-(length:--text-base) font-medium [line-height:1.4] [letter-spacing:0%] flex-1 text-left whitespace-nowrap overflow-hidden text-ellipsis"
-                  >
-                    {{ t("home.dashboardTitle") }}
-                  </div>
-                  <OButton
-                    variant="ghost"
-                    size="icon-circle"
-                    :class="
-                      store.state.theme === 'dark'
-                        ? 'view-button-dark'
-                        : 'view-button-light'
-                    "
-                    aria-label="View all dashboards"
-                    class="flex-shrink-0"
-                    :title="t('home.viewButton')"
-                    data-test="home-usage-tab-view-dashboards-btn"
-                  >
-                    <OIcon name="arrow-forward" size="sm" class="view-arrow-icon" />
-                    <OIcon name="arrow-forward" size="sm" class="view-arrow-icon-in" />
-                    <router-link
-                      exact
-                      :to="{
-                        name: 'dashboards',
-                        query: {
-                          org_identifier:
-                            store.state.selectedOrganization?.identifier,
-                        },
-                      }"
-                      class="absolute inset-0"
-                      aria-label="Navigate to dashboards page"
-                    ></router-link>
-                  </OButton>
-                </div>
-              </div>
-              <div
-                class="text-(length:--text-xl) font-semibold [line-height:1.3] flex items-end"
-                aria-live="polite"
-                data-test="home-usage-tab-dashboards-count"
+                <span class="inline-flex items-center justify-center shrink-0 w-8 h-8 rounded-default bg-icon-chip-primary-bg text-icon-chip-primary-text" aria-hidden="true">
+                  <OIcon name="function" size="sm" />
+                </span>
+                <span class="flex-1 min-w-0 text-sm font-medium text-text-body truncate">{{ t("home.functionTitle") }}</span>
+                <span class="text-sm font-semibold text-text-heading tabular-nums" data-test="home-usage-tab-functions-count">{{ animatedFunctionCount || summary.function_count }}</span>
+                <OIcon name="chevron-right" size="sm" class="shrink-0 text-text-disabled transition-transform group-hover:translate-x-0.5 group-hover:text-text-secondary" />
+              </router-link>
+              <router-link
+                v-if="canView('dashboards')"
+                class="group flex items-center gap-2.5 rounded-default -mx-2 px-2 py-2 no-underline text-inherit transition-colors hover:bg-table-row-hover-bg"
+                :to="{ name: 'dashboards', query: { org_identifier: store.state.selectedOrganization?.identifier } }"
+                data-test="home-usage-tab-dashboards-card"
               >
-                {{ animatedDashboardCount || summary.dashboard_count }}
-              </div>
-            </div>
-          </div>
-        </div>
+                <span class="inline-flex items-center justify-center shrink-0 w-8 h-8 rounded-default bg-icon-chip-warning-bg text-icon-chip-warning-text" aria-hidden="true">
+                  <OIcon name="dashboard" size="sm" />
+                </span>
+                <span class="flex-1 min-w-0 text-sm font-medium text-text-body truncate">{{ t("home.dashboardTitle") }}</span>
+                <span class="text-sm font-semibold text-text-heading tabular-nums" data-test="home-usage-tab-dashboards-count">{{ animatedDashboardCount || summary.dashboard_count }}</span>
+                <OIcon name="chevron-right" size="sm" class="shrink-0 text-text-disabled transition-transform group-hover:translate-x-0.5 group-hover:text-text-secondary" />
+              </router-link>
+            </nav>
+          </template>
 
-        <!-- Alerts chart -->
-        <div
-          class="rounded p-4 bg-[var(--o2-card-bg)] border border-[var(--o2-border-color)] flex flex-col min-h-0"
-          role="region"
+          <div v-if="showResources && showExplore" class="h-px bg-border-default my-3" role="separator"></div>
+
+          <!-- Explore — data surfaces. Same per-route gating as above. -->
+          <template v-if="showExplore">
+            <div class="text-xs font-semibold text-text-secondary mb-1">{{ t("home.explore") }}</div>
+            <nav class="flex flex-col">
+              <router-link
+                v-if="canView('logs')"
+                class="group flex items-center gap-2.5 rounded-default -mx-2 px-2 py-2 no-underline text-inherit transition-colors hover:bg-table-row-hover-bg"
+                :to="{ name: 'logs', query: { org_identifier: store.state.selectedOrganization?.identifier } }"
+                data-test="home-usage-tab-explore-logs"
+              >
+                <span class="inline-flex items-center justify-center shrink-0 w-8 h-8 rounded-default bg-icon-chip-success-bg text-icon-chip-success-text" aria-hidden="true">
+                  <OIcon name="search" size="sm" />
+                </span>
+                <span class="flex-1 min-w-0 text-sm font-medium text-text-body truncate">{{ t("menu.search") }}</span>
+                <OIcon name="chevron-right" size="sm" class="shrink-0 text-text-disabled transition-transform group-hover:translate-x-0.5 group-hover:text-text-secondary" />
+              </router-link>
+              <router-link
+                v-if="canView('traces')"
+                class="group flex items-center gap-2.5 rounded-default -mx-2 px-2 py-2 no-underline text-inherit transition-colors hover:bg-table-row-hover-bg"
+                :to="{ name: 'traces', query: { org_identifier: store.state.selectedOrganization?.identifier } }"
+                data-test="home-usage-tab-explore-traces"
+              >
+                <span class="inline-flex items-center justify-center shrink-0 w-8 h-8 rounded-default bg-icon-chip-primary-bg text-icon-chip-primary-text" aria-hidden="true">
+                  <OIcon name="account-tree" size="sm" />
+                </span>
+                <span class="flex-1 min-w-0 text-sm font-medium text-text-body truncate">{{ t("menu.traces") }}</span>
+                <OIcon name="chevron-right" size="sm" class="shrink-0 text-text-disabled transition-transform group-hover:translate-x-0.5 group-hover:text-text-secondary" />
+              </router-link>
+              <router-link
+                v-if="canView('metrics')"
+                class="group flex items-center gap-2.5 rounded-default -mx-2 px-2 py-2 no-underline text-inherit transition-colors hover:bg-table-row-hover-bg"
+                :to="{ name: 'metrics', query: { org_identifier: store.state.selectedOrganization?.identifier } }"
+                data-test="home-usage-tab-explore-metrics"
+              >
+                <span class="inline-flex items-center justify-center shrink-0 w-8 h-8 rounded-default bg-icon-chip-success-bg text-icon-chip-success-text" aria-hidden="true">
+                  <OIcon name="bar-chart" size="sm" />
+                </span>
+                <span class="flex-1 min-w-0 text-sm font-medium text-text-body truncate">{{ t("menu.metrics") }}</span>
+                <OIcon name="chevron-right" size="sm" class="shrink-0 text-text-disabled transition-transform group-hover:translate-x-0.5 group-hover:text-text-secondary" />
+              </router-link>
+              <router-link
+                v-if="canView('RUM')"
+                class="group flex items-center gap-2.5 rounded-default -mx-2 px-2 py-2 no-underline text-inherit transition-colors hover:bg-table-row-hover-bg"
+                :to="{ name: 'RUM', query: { org_identifier: store.state.selectedOrganization?.identifier } }"
+                data-test="home-usage-tab-explore-rum"
+              >
+                <span class="inline-flex items-center justify-center shrink-0 w-8 h-8 rounded-default bg-icon-chip-primary-bg text-icon-chip-primary-text" aria-hidden="true">
+                  <OIcon name="devices" size="sm" />
+                </span>
+                <span class="flex-1 min-w-0 text-sm font-medium text-text-body truncate">{{ t("menu.rum") }}</span>
+                <OIcon name="chevron-right" size="sm" class="shrink-0 text-text-disabled transition-transform group-hover:translate-x-0.5 group-hover:text-text-secondary" />
+              </router-link>
+              <router-link
+                v-if="canView('incidentList')"
+                class="group flex items-center gap-2.5 rounded-default -mx-2 px-2 py-2 no-underline text-inherit transition-colors hover:bg-table-row-hover-bg"
+                :to="{ name: 'incidentList', query: { org_identifier: store.state.selectedOrganization?.identifier } }"
+                data-test="home-usage-tab-explore-incidents"
+              >
+                <span class="inline-flex items-center justify-center shrink-0 w-8 h-8 rounded-default bg-icon-chip-warning-bg text-icon-chip-warning-text" aria-hidden="true">
+                  <OIcon name="notifications-active" size="sm" />
+                </span>
+                <span class="flex-1 min-w-0 text-sm font-medium text-text-body truncate">{{ t("menu.incidents") }}</span>
+                <OIcon name="chevron-right" size="sm" class="shrink-0 text-text-disabled transition-transform group-hover:translate-x-0.5 group-hover:text-text-secondary" />
+              </router-link>
+              <router-link
+                v-if="canView('reports')"
+                class="group flex items-center gap-2.5 rounded-default -mx-2 px-2 py-2 no-underline text-inherit transition-colors hover:bg-table-row-hover-bg"
+                :to="{ name: 'reports', query: { org_identifier: store.state.selectedOrganization?.identifier } }"
+                data-test="home-usage-tab-explore-reports"
+              >
+                <span class="inline-flex items-center justify-center shrink-0 w-8 h-8 rounded-default bg-icon-chip-warning-bg text-icon-chip-warning-text" aria-hidden="true">
+                  <OIcon name="description" size="sm" />
+                </span>
+                <span class="flex-1 min-w-0 text-sm font-medium text-text-body truncate">{{ t("menu.report") }}</span>
+                <OIcon name="chevron-right" size="sm" class="shrink-0 text-text-disabled transition-transform group-hover:translate-x-0.5 group-hover:text-text-secondary" />
+              </router-link>
+            </nav>
+          </template>
+        </aside>
+
+        <!-- Alerts -->
+        <section
+          class="rounded-default p-4 bg-card-glass-bg border border-card-glass-border flex flex-col min-h-0"
           aria-label="Alerts overview section"
         >
-          <div class="gap-2 mb-3">
-            <div class="flex justify-between items-center">
-              <span class="text-(length:--text-base) font-medium [line-height:1.4] [letter-spacing:0%] flex items-center gap-2">
-                <div class="bg-[rgba(57,126,246,0.2)] border border-[rgba(57,126,246,0.35)] flex items-center justify-center w-[2.5rem] h-[2.5rem] rounded-lg" aria-hidden="true">
-                  <img :src="alertsIcon" alt="" class="h-6 dark:[filter:brightness(1.5)]" />
-                </div>
-                {{ t("home.alertTitle") }}
+          <div class="flex justify-between items-center gap-2">
+            <span class="text-sm font-semibold text-text-heading flex items-center gap-2">
+              <span class="inline-flex items-center justify-center shrink-0 w-10 h-10 rounded-default bg-icon-chip-warning-bg text-icon-chip-warning-text" aria-hidden="true">
+                <OIcon name="shield-alert-outline" size="md" />
               </span>
-              <OButton
-                variant="ghost"
-                size="icon-circle"
-                :class="
-                  store.state.theme === 'dark'
-                    ? 'view-button-dark'
-                    : 'view-button-light'
-                "
-                aria-label="View all alerts"
-                :title="t('home.viewButton')"
-                data-test="home-usage-tab-view-alerts-btn"
-              >
-                <OIcon name="arrow-forward" size="sm" class="view-arrow-icon" />
-                <OIcon name="arrow-forward" size="sm" class="view-arrow-icon-in" />
-                <router-link
-                  exact
-                  :to="{
-                    name: 'alertList',
-                    query: {
-                      org_identifier:
-                        store.state.selectedOrganization?.identifier,
-                    },
-                  }"
-                  class="absolute inset-0"
-                  aria-label="Navigate to alerts page"
-                ></router-link>
-              </OButton>
+              {{ t("home.alertTitle") }}
+            </span>
+            <OButton
+              v-if="canView('alertList')"
+              variant="ghost"
+              size="icon-circle"
+              class="relative"
+              :aria-label="t('home.viewButton')"
+              :title="t('home.viewButton')"
+              data-test="home-usage-tab-view-alerts-btn"
+            >
+              <OIcon name="arrow-forward" size="sm" />
+              <router-link
+                exact
+                :to="{ name: 'alertList', query: { org_identifier: store.state.selectedOrganization?.identifier } }"
+                class="absolute inset-0"
+                :aria-label="t('home.viewButton')"
+              ></router-link>
+            </OButton>
+          </div>
+          <div class="flex pt-3 gap-4">
+            <div class="flex flex-col gap-0.5">
+              <span class="text-xs text-text-secondary">{{ t("home.scheduledAlert") }}</span>
+              <span
+                class="text-lg font-semibold text-text-heading tabular-nums leading-tight"
+                aria-live="polite"
+                data-test="home-usage-tab-scheduled-alerts-count"
+              >{{ animatedScheduledAlerts || summary.scheduled_alerts }}</span>
             </div>
-            <div class="flex pt-2 gap-[1em]">
-              <div class="flex flex-col">
-                <span class="text-(length:--text-sm) font-normal [line-height:1.4] [letter-spacing:0%]">{{
-                  t("home.scheduledAlert")
-                }}</span>
-                <span
-                  class="text-(length:--text-md) font-semibold [line-height:1.4]"
-                  aria-live="polite"
-                  data-test="home-usage-tab-scheduled-alerts-count"
-                >{{
-                  animatedScheduledAlerts || summary.scheduled_alerts
-                }}</span>
-              </div>
-              <OSeparator :vertical="true" />
-              <div class="flex flex-col">
-                <span class="text-(length:--text-sm) font-normal [line-height:1.4] [letter-spacing:0%]">{{ t("home.rtAlert") }}</span>
-                <span
-                  class="text-(length:--text-md) font-semibold [line-height:1.4]"
-                  aria-live="polite"
-                  data-test="home-usage-tab-rt-alerts-count"
-                >{{
-                  animatedRtAlerts || summary.rt_alerts
-                }}</span>
-              </div>
+            <OSeparator :vertical="true" />
+            <div class="flex flex-col gap-0.5">
+              <span class="text-xs text-text-secondary">{{ t("home.rtAlert") }}</span>
+              <span
+                class="text-lg font-semibold text-text-heading tabular-nums leading-tight"
+                aria-live="polite"
+                data-test="home-usage-tab-rt-alerts-count"
+              >{{ animatedRtAlerts || summary.rt_alerts }}</span>
             </div>
           </div>
-          <div
-            class="custom-first-chart flex-1 min-h-[200px] w-full"
-          >
+          <div class="flex-1 min-h-50 w-full mt-3">
             <CustomChartRenderer
               :key="alertsPanelDataKey"
               :data="alertsPanelData"
               class="w-full h-full"
             />
           </div>
-        </div>
+        </section>
 
-        <!-- Pipelines chart -->
-        <div
-          class="rounded p-4 bg-[var(--o2-card-bg)] border border-[var(--o2-border-color)] flex flex-col min-h-0"
-          role="region"
+        <!-- Pipelines -->
+        <section
+          class="rounded-default p-4 bg-card-glass-bg border border-card-glass-border flex flex-col min-h-0"
           aria-label="Pipelines overview section"
         >
-          <div class="gap-2 mb-3">
-            <div class="flex justify-between items-center">
-              <span class="text-(length:--text-base) font-medium [line-height:1.4] [letter-spacing:0%] flex items-center gap-2">
-                <div class="bg-[rgba(57,126,246,0.2)] border border-[rgba(57,126,246,0.35)] opacity-80 flex items-center justify-center w-[2.5rem] h-[2.5rem] rounded-lg" aria-hidden="true">
-                  <img :src="pipelinesIcon" alt="" class="h-6 dark:[filter:brightness(1.5)]" />
-                </div>
-                {{ t("home.pipelineTitle") }}
+          <div class="flex justify-between items-center gap-2">
+            <span class="text-sm font-semibold text-text-heading flex items-center gap-2">
+              <span class="inline-flex items-center justify-center shrink-0 w-10 h-10 rounded-default bg-icon-chip-primary-bg text-icon-chip-primary-text" aria-hidden="true">
+                <OIcon name="lan" size="md" />
               </span>
-              <OButton
-                variant="ghost"
-                size="icon-circle"
-                :class="
-                  store.state.theme === 'dark'
-                    ? 'view-button-dark'
-                    : 'view-button-light'
-                "
-                aria-label="View all pipelines"
-                :title="t('home.viewButton')"
-                data-test="home-usage-tab-view-pipelines-btn"
-              >
-                <OIcon name="arrow-forward" size="sm" class="view-arrow-icon" />
-                <OIcon name="arrow-forward" size="sm" class="view-arrow-icon-in" />
-                <router-link
-                  exact
-                  :to="{
-                    name: 'pipelines',
-                    query: {
-                      org_identifier:
-                        store.state.selectedOrganization?.identifier,
-                    },
-                  }"
-                  class="absolute inset-0"
-                  aria-label="Navigate to pipelines page"
-                ></router-link>
-              </OButton>
+              {{ t("home.pipelineTitle") }}
+            </span>
+            <OButton
+              v-if="canView('pipelines')"
+              variant="ghost"
+              size="icon-circle"
+              class="relative"
+              :aria-label="t('home.viewButton')"
+              :title="t('home.viewButton')"
+              data-test="home-usage-tab-view-pipelines-btn"
+            >
+              <OIcon name="arrow-forward" size="sm" />
+              <router-link
+                exact
+                :to="{ name: 'pipelines', query: { org_identifier: store.state.selectedOrganization?.identifier } }"
+                class="absolute inset-0"
+                :aria-label="t('home.viewButton')"
+              ></router-link>
+            </OButton>
+          </div>
+          <div class="flex pt-3 gap-4">
+            <div class="flex flex-col gap-0.5">
+              <span class="text-xs text-text-secondary">{{ t("home.schedulePipelineTitle") }}</span>
+              <span
+                class="text-lg font-semibold text-text-heading tabular-nums leading-tight"
+                aria-live="polite"
+                data-test="home-usage-tab-scheduled-pipelines-count"
+              >{{ animatedScheduledPipelines || summary.scheduled_pipelines }}</span>
             </div>
-            <div class="flex pt-2 gap-[1em]">
-              <div class="flex flex-col">
-                <span class="text-(length:--text-sm) font-normal [line-height:1.4] [letter-spacing:0%]">
-                  {{ t("home.schedulePipelineTitle") }}</span
-                >
-                <span
-                  class="text-(length:--text-md) font-semibold [line-height:1.4]"
-                  aria-live="polite"
-                  data-test="home-usage-tab-scheduled-pipelines-count"
-                >{{
-                  animatedScheduledPipelines || summary.scheduled_pipelines
-                }}</span>
-              </div>
-              <OSeparator :vertical="true" />
-              <div class="flex flex-col">
-                <span class="text-(length:--text-sm) font-normal [line-height:1.4] [letter-spacing:0%]">{{
-                  t("home.rtPipelineTitle")
-                }}</span>
-                <span
-                  class="text-(length:--text-md) font-semibold [line-height:1.4]"
-                  aria-live="polite"
-                  data-test="home-usage-tab-rt-pipelines-count"
-                >{{
-                  animatedRtPipelines || summary.rt_pipelines
-                }}</span>
-              </div>
+            <OSeparator :vertical="true" />
+            <div class="flex flex-col gap-0.5">
+              <span class="text-xs text-text-secondary">{{ t("home.rtPipelineTitle") }}</span>
+              <span
+                class="text-lg font-semibold text-text-heading tabular-nums leading-tight"
+                aria-live="polite"
+                data-test="home-usage-tab-rt-pipelines-count"
+              >{{ animatedRtPipelines || summary.rt_pipelines }}</span>
             </div>
           </div>
-          <div
-            class="custom-second-chart flex-1 min-h-[200px] w-full"
-          >
+          <div class="flex-1 min-h-50 w-full mt-3">
             <CustomChartRenderer
               :key="pipelinesPanelDataKey"
               :data="pipelinesPanelData"
               class="w-full h-full"
             />
           </div>
-        </div>
+        </section>
       </div>
     </div>
 
@@ -538,7 +406,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </div>
 
     <!-- Loading state -->
-    <div v-if="isLoadingSummary" data-test="home-usage-tab-loading">
+    <div v-if="isLoadingSummary" class="h-full" data-test="home-usage-tab-loading">
       <HomeViewSkeleton />
     </div>
   </div>
@@ -553,7 +421,8 @@ import { useRouter } from "vue-router";
 import orgService from "@/services/organizations";
 import configService from "@/services/config";
 import config from "@/aws-exports";
-import { formatSizeFromMB, getImageURL } from "@/utils/zincutils";
+import { formatSizeFromMB } from "@/utils/zincutils";
+import { chartColor } from "@/utils/chartTheme";
 import CustomChartRenderer from "@/components/dashboards/panels/CustomChartRenderer.vue";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import TrialPeriod from "@/enterprise/components/billings/TrialPeriod.vue";
@@ -563,6 +432,8 @@ import DatabaseDeprecationBanner from "@/components/DatabaseDeprecationBanner.vu
 import HomeViewSkeleton from "@/components/shared/HomeViewSkeleton.vue";
 import OButton from "@/lib/core/Button/OButton.vue";
 import OSeparator from "@/lib/core/Separator/OSeparator.vue";
+import KpiCard from "@/components/common/KpiCard.vue";
+import KpiCardRow from "@/components/common/KpiCardRow.vue";
 import { toast } from "@/lib/feedback/Toast/useToast";
 import HomeNoDataState from "@/views/HomeNoDataState.vue";
 
@@ -791,7 +662,7 @@ const alertsPanelData = computed(() => {
         textStyle: {
           fontSize: 16,
           fontWeight: "normal",
-          color: store.state.theme === "dark" ? "#B7B7B7" : "#72777B",
+          color: chartColor("--color-text-secondary"),
         },
       },
     };
@@ -806,7 +677,7 @@ const alertsPanelData = computed(() => {
       textStyle: {
         fontSize: 16,
         fontWeight: "normal",
-        color: store.state.theme === "dark" ? "#D9D9D9" : "#262626",
+        color: chartColor("--color-text-heading"),
       },
     },
     tooltip: {
@@ -817,7 +688,7 @@ const alertsPanelData = computed(() => {
       orient: "vertical",
       left: "65%",
       textStyle: {
-        color: store.state.theme === "dark" ? "#DCDCDC" : "#232323",
+        color: chartColor("--color-text-heading"),
       },
     },
     series: [
@@ -832,7 +703,7 @@ const alertsPanelData = computed(() => {
           formatter: "{d}%",
           show: true,
           fontSize: 14,
-          color: store.state.theme === "dark" ? "#ffffff" : "#000000",
+          color: chartColor("--color-text-heading"),
         },
         labelLine: {
           show: true,
@@ -878,7 +749,7 @@ const pipelinesPanelData = computed(() => {
         textStyle: {
           fontSize: 16,
           fontWeight: "normal",
-          color: store.state.theme === "dark" ? "#B7B7B7" : "#72777B",
+          color: chartColor("--color-text-secondary"),
         },
       },
     };
@@ -895,11 +766,11 @@ const pipelinesPanelData = computed(() => {
       nameTextStyle: {
         fontSize: 16,
         fontWeight: "normal",
-        color: store.state.theme === "dark" ? "#B7B7B7" : "#72777B",
+        color: chartColor("--color-text-secondary"),
       },
       axisLabel: {
         fontSize: 14,
-        color: store.state.theme === "dark" ? "#CCCFD1" : "#2E3133",
+        color: chartColor("--color-text-body"),
       },
     },
     yAxis: {
@@ -917,15 +788,15 @@ const pipelinesPanelData = computed(() => {
       nameTextStyle: {
         fontSize: 16,
         fontWeight: "normal",
-        color: store.state.theme === "dark" ? "#B7B7B7" : "#72777B",
+        color: chartColor("--color-text-secondary"),
       },
       axisLabel: {
         fontSize: 12,
-        color: store.state.theme === "dark" ? "#B7B7B7" : "#72777B",
+        color: chartColor("--color-text-secondary"),
       },
       splitLine: {
         lineStyle: {
-          color: store.state.theme === "dark" ? "#444" : "#e0e0e0",
+          color: chartColor("--color-border-subtle"),
         },
       },
       offset: -20,
@@ -940,7 +811,7 @@ const pipelinesPanelData = computed(() => {
           position: "top",
           fontSize: 14,
           fontWeight: "bold",
-          color: store.state.theme === "dark" ? "#CCCFD1" : "#2E3133",
+          color: chartColor("--color-text-body"),
         },
         itemStyle: {
           color: function (params: any) {
@@ -953,69 +824,14 @@ const pipelinesPanelData = computed(() => {
   };
 });
 
-const compressedSizeIcon = computed(() => {
-  const icon =
-    store.state.theme === "dark"
-      ? "images/home/compressed_size_dark.svg"
-      : "images/home/compressed_size.svg";
-  return getImageURL(icon);
-});
 
-const ingestedSizeIcon = computed(() => {
-  const icon =
-    store.state.theme === "dark"
-      ? "images/home/ingested_size_dark.svg"
-      : "images/home/ingested_size.svg";
-  return getImageURL(icon);
-});
 
-const indexSizeIcon = computed(() => {
-  const icon =
-    store.state.theme === "dark"
-      ? "images/home/index_size_dark.svg"
-      : "images/home/index_size.svg";
-  return getImageURL(icon);
-});
 
-const recordsIcon = computed(() => {
-  const icon =
-    store.state.theme === "dark"
-      ? "images/home/records_dark.svg"
-      : "images/home/records.svg";
-  return getImageURL(icon);
-});
 
-const streamsIcon = computed(() => {
-  const icon =
-    store.state.theme === "dark"
-      ? "images/home/streams_dark.svg"
-      : "images/home/streams.svg";
-  return getImageURL(icon);
-});
 
-const functionsIcon = computed(() => {
-  const icon =
-    store.state.theme === "dark"
-      ? "images/home/function_tile_icon_dark.svg"
-      : "images/home/function_tile_icon.svg";
-  return getImageURL(icon);
-});
 
-const dashboardsIcon = computed(() => {
-  const icon =
-    store.state.theme === "dark"
-      ? "images/home/dashboards_tile_icon.svg"
-      : "images/home/dashboards_tile_icon.svg";
-  return getImageURL(icon);
-});
 
-const alertsIcon = computed(() => {
-  return getImageURL("images/home/alerts.svg");
-});
 
-const pipelinesIcon = computed(() => {
-  return getImageURL("images/home/pipeline.svg");
-});
 
 const goToLicensePage = () => {
   router.push({ name: "license" });
@@ -1047,6 +863,20 @@ const formattedAnimatedIndexSize = computed(() => {
 
 const orgId = computed(() => store.state.selectedOrganization?.identifier);
 
+// Rail visibility mirrors the left nav exactly: a route is only registered when
+// the user's edition/feature/RBAC gate allows it, so `hasRoute` is the same
+// signal the nav flyout filters its children by (see navGroups.ts). This keeps
+// the rail from ever offering a page the user has no way to reach.
+const canView = (name: string) => router.hasRoute(name);
+const showResources = computed(
+  () => canView("functionList") || canView("dashboards"),
+);
+const showExplore = computed(() =>
+  ["logs", "traces", "metrics", "RUM", "incidentList", "reports"].some((n) =>
+    canView(n),
+  ),
+);
+
 // Initial load
 const onThemeColorChanged = () => { themeVersion.value++; };
 
@@ -1086,149 +916,3 @@ watch(orgId, (newVal, oldVal) => {
   }
 });
 </script>
-
-<style scoped lang="scss">
-
-/*
- * UsageTab Styles
- *
- * Structure:
- * 1. CSS Variables
- * 2. Global Transitions
- * 3. Layout Components
- * 4. Interactive States
- * 5. Responsive Design
- */
-
-/* ===== 2. Global Transitions ===== */
-* {
-  transition:
-    background-color 0.3s ease,
-    color 0.3s ease,
-    border-color 0.3s ease,
-    box-shadow 0.3s ease;
-}
-
-*[class*="animation"],
-*[style*="animation"] {
-  transition: none;
-}
-
-/* ===== 3. Layout Components ===== */
-
-.banners-wrapper:has(> div) {
-  margin-bottom: 0.75rem;
-}
-
-.view-button-light {
-  cursor: pointer;
-  padding: 0;
-}
-.view-button-dark {
-  cursor: pointer;
-  padding: 0;
-  margin: 0;
-}
-.view-button-light,
-.view-button-dark {
-  position: relative;
-  overflow: hidden;
-  transition: all 0.3s ease;
-
-  .router-link-active,
-  a {
-    z-index: 10;
-    pointer-events: all;
-  }
-}
-
-.view-arrow-icon {
-  font-size: var(--text-md);
-  transition:
-    transform 0.4s ease-in-out,
-    opacity 0.4s ease-in-out;
-  pointer-events: none;
-  position: relative;
-  z-index: 1;
-}
-
-.view-button-light:hover .view-arrow-icon,
-.view-button-dark:hover .view-arrow-icon {
-  transform: translateX(1.25rem);
-  opacity: 0;
-}
-
-.view-arrow-icon-in {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%) translateX(-1.25rem);
-  opacity: 0;
-  transition:
-    transform 0.4s ease-in-out,
-    opacity 0.4s ease-in-out;
-  pointer-events: none;
-  z-index: 1;
-}
-
-.view-button-light:hover .view-arrow-icon-in,
-.view-button-dark:hover .view-arrow-icon-in {
-  transform: translate(-50%, -50%) translateX(0);
-  opacity: 1;
-}
-
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(1.25rem);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@media (max-width: 1400px) {
-  .functions-dashboards-column {
-    flex-direction: row;
-  }
-}
-
-@media (max-width: 768px) {
-  .functions-dashboards-column {
-    flex-direction: column;
-  }
-}
-
-/* ===== 4. Interactive States ===== */
-
-.view-button-light:focus-visible,
-.view-button-dark:focus-visible {
-  outline: 2px solid var(--o2-focus-ring);
-  outline-offset: 2px;
-  border-radius: 0.25rem;
-}
-
-a:focus-visible,
-button:focus-visible {
-  outline: 2px solid var(--o2-focus-ring);
-  outline-offset: 2px;
-}
-
-*:focus:not(:focus-visible) {
-  outline: none;
-}
-
-/* ===== 5. Responsive Design & Accessibility ===== */
-
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
-}
-</style>
diff --git a/web/src/views/__snapshots__/ShortUrl.spec.ts.snap b/web/src/views/__snapshots__/ShortUrl.spec.ts.snap
index fc9d3e9932..f203c54ce4 100644
--- a/web/src/views/__snapshots__/ShortUrl.spec.ts.snap
+++ b/web/src/views/__snapshots__/ShortUrl.spec.ts.snap
@@ -3,6 +3,6 @@
 exports[`ShortUrl > should match snapshot 1`] = `
 "<div data-test="loading-container" class="h-[100vh] flex flex-col items-center justify-center">
   <!-- Ring variant --><span class="inline-flex items-center justify-center shrink-0 size-12" role="status" aria-label="Loading" aria-live="polite" data-test="spinner"><svg class="animate-spin size-full text-spinner" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><!-- Track --><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" class="opacity-20"></circle><!-- Spinning arc --><path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" stroke-width="3" stroke-linecap="round" class="text-spinner"></path></svg></span>
-  <div data-test="message" class="text-base text-[#666]">Redirecting...</div>
+  <div data-test="message" class="text-base text-text-secondary">Redirecting...</div>
 </div>"
 `;
diff --git a/web/src/views/synthetics/CreateBrowserTest.spec.ts b/web/src/views/synthetics/CreateBrowserTest.spec.ts
index c1d601d1d1..984b100730 100644
--- a/web/src/views/synthetics/CreateBrowserTest.spec.ts
+++ b/web/src/views/synthetics/CreateBrowserTest.spec.ts
@@ -121,7 +121,7 @@ import CreateBrowserTest from "./CreateBrowserTest.vue";
 
 // ── Stubs ────────────────────────────────────────────────────────────────
 const baseStubs = {
-  AppPageHeader: {
+  OPageHeader: {
     template: '<div data-test="synthetics-header"><slot /></div>',
     props: ["title", "subtitle", "back"],
   },
diff --git a/web/src/views/synthetics/CreateBrowserTest.vue b/web/src/views/synthetics/CreateBrowserTest.vue
index 3f57fca7d9..5ec09f3d83 100644
--- a/web/src/views/synthetics/CreateBrowserTest.vue
+++ b/web/src/views/synthetics/CreateBrowserTest.vue
@@ -13,7 +13,7 @@ import { getFoldersListByType } from '@/utils/commons'
 import syntheticsService from '@/services/synthetics'
 import destinationService from '@/services/alert_destination'
 import { toast } from '@/lib/feedback/Toast/useToast'
-import AppPageHeader from '@/components/common/AppPageHeader.vue'
+import OPageLayout from '@/lib/core/PageLayout/OPageLayout.vue'
 import OButton from '@/lib/core/Button/OButton.vue'
 import OIcon from '@/lib/core/Icon/OIcon.vue'
 import OInput from '@/lib/forms/Input/OInput.vue'
@@ -469,13 +469,13 @@ function onClearResults() {
 
 <template>
   <!-- ── Non-loading: shared wrapper with page header ── -->
-  <div class="flex flex-col h-full bg-surface-base">
-    <AppPageHeader
-      :title="headerTitle"
-      :subtitle="folderName"
-      :back="{ label: t('synthetics.newCheck.back'), to: { name: 'synthetic' }, dataTest: 'synthetics-create-back-btn' }"
-      class="shrink-0 px-4 border-b border-border-default"
-    />
+  <OPageLayout
+    class="bg-surface-base"
+    :title="headerTitle"
+    :subtitle="folderName"
+    :back="{ label: t('synthetics.newCheck.back'), to: { name: 'synthetic' }, dataTest: 'synthetics-create-back-btn' }"
+    bleed
+  >
 
     <!-- ── Gate phase: URL + name ── -->
     <main v-if="phase === 'gate'" class="flex-1 flex flex-col items-center justify-center">
@@ -555,7 +555,7 @@ function onClearResults() {
     <main v-else-if="phase === 'extension-setup'" class="flex-1 flex flex-col items-center justify-center">
       <div class="max-w-[48rem] w-full mx-auto py-4 px-4">
         <div class="flex justify-center mb-6">
-          <div class="rounded-2xl border border-border-default bg-surface-base p-6 flex items-center justify-center">
+          <div class="rounded-default border border-border-default bg-surface-base p-6 flex items-center justify-center">
             <OIcon name="open-in-browser" size="xl" class="text-primary-500" aria-hidden="true" />
           </div>
         </div>
@@ -564,7 +564,7 @@ function onClearResults() {
           {{ t('synthetics.createBrowserTest.setupDescription', { url: check.url }) }}
         </p>
 
-        <div class="rounded-xl border border-border-default divide-y divide-border-default mb-6">
+        <div class="rounded-default border border-border-default divide-y divide-border-default mb-6">
           <!-- Step 1 -->
           <div class="flex items-start gap-4 p-4">
             <span
@@ -807,5 +807,5 @@ function onClearResults() {
       </ODialog>
     </div>
   </template>
-  </div>
+  </OPageLayout>
 </template>
diff --git a/web/src/views/synthetics/CreateProtocolCheck.spec.ts b/web/src/views/synthetics/CreateProtocolCheck.spec.ts
index ae6aee9d81..e3d80d17f3 100644
--- a/web/src/views/synthetics/CreateProtocolCheck.spec.ts
+++ b/web/src/views/synthetics/CreateProtocolCheck.spec.ts
@@ -89,7 +89,7 @@ import CreateProtocolCheck from "./CreateProtocolCheck.vue";
 
 // ── Stubs ────────────────────────────────────────────────────────────────
 const baseStubs = {
-  AppPageHeader: {
+  OPageHeader: {
     template: '<div data-test="synthetics-header"><slot /></div>',
     props: ["title", "subtitle", "back"],
   },
diff --git a/web/src/views/synthetics/CreateProtocolCheck.vue b/web/src/views/synthetics/CreateProtocolCheck.vue
index fd6568a0cf..ab2d5ae7df 100644
--- a/web/src/views/synthetics/CreateProtocolCheck.vue
+++ b/web/src/views/synthetics/CreateProtocolCheck.vue
@@ -24,7 +24,7 @@ import { getFoldersListByType } from '@/utils/commons'
 import syntheticsService from '@/services/synthetics'
 import destinationService from '@/services/alert_destination'
 import { toast } from '@/lib/feedback/Toast/useToast'
-import AppPageHeader from '@/components/common/AppPageHeader.vue'
+import OPageLayout from '@/lib/core/PageLayout/OPageLayout.vue'
 import OButton from '@/lib/core/Button/OButton.vue'
 import OIcon from '@/lib/core/Icon/OIcon.vue'
 import ODialog from '@/lib/overlay/Dialog/ODialog.vue'
@@ -219,12 +219,11 @@ async function saveCheck() {
 </script>
 
 <template>
-  <div class="flex flex-col h-full">
-    <AppPageHeader
-      :title="headerTitle"
-      :back="{ label: t('synthetics.newCheck.back'), to: { name: 'synthetic' }, dataTest: 'synthetics-create-back-btn' }"
-      class="shrink-0 px-4 border-b border-border-default"
-    />
+  <OPageLayout
+    :title="headerTitle"
+    :back="{ label: t('synthetics.newCheck.back'), to: { name: 'synthetic' }, dataTest: 'synthetics-create-back-btn' }"
+    bleed
+  >
 
     <CreateBrowserTestSkeleton v-if="isLoadingEdit" :rows="10" />
     <template v-else>
@@ -275,5 +274,5 @@ async function saveCheck() {
         <p class="py-2">{{ t('synthetics.newCheck.unsavedBody') }}</p>
       </ODialog>
     </template>
-  </div>
+  </OPageLayout>
 </template>
diff --git a/web/src/views/synthetics/MonitorResults.spec.ts b/web/src/views/synthetics/MonitorResults.spec.ts
index b761c7fc42..dcf02ad7fa 100644
--- a/web/src/views/synthetics/MonitorResults.spec.ts
+++ b/web/src/views/synthetics/MonitorResults.spec.ts
@@ -73,7 +73,7 @@ function makeWrapper() {
   return mount(MonitorResults, {
     global: {
       stubs: {
-        AppPageHeader: {
+        OPageHeader: {
           template: `
             <div data-test="app-page-header">
               <span data-test="app-page-header-title">{{ title }}</span>
@@ -174,7 +174,7 @@ describe("MonitorResults", () => {
       ).toBe(true);
     });
 
-    it("should render AppPageHeader with monitor name from route query", async () => {
+    it("should render OPageHeader with monitor name from route query", async () => {
       wrapper = makeWrapper();
       await flushPromises();
 
diff --git a/web/src/views/synthetics/MonitorResults.vue b/web/src/views/synthetics/MonitorResults.vue
index 1d7176faa0..94e48ef49c 100644
--- a/web/src/views/synthetics/MonitorResults.vue
+++ b/web/src/views/synthetics/MonitorResults.vue
@@ -17,23 +17,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   MonitorResults — Page shell for the Monitor Runs multi-tab page.
 
   Follows the LLMInsightsPage.vue pattern:
-    ROW 1: AppPageHeader (breadcrumb + title + badge + actions)
+    ROW 1: OPageHeader (breadcrumb + title + badge + actions)
     ROW 2: MonitorRuns (chrome-less tabbed content)
 -->
 <template>
-  <div
+  <OPageLayout
     data-test="synthetic-monitor-results-page"
-    class="flex flex-col h-full min-h-0 overflow-hidden"
+    :title="monitorName"
+    :subtitle="folderName"
+    :back="{
+      label: t('synthetics.results.monitors'),
+      to: { name: 'synthetic' },
+    }"
+    bleed
   >
-    <AppPageHeader
-      :title="monitorName"
-      :subtitle="folderName"
-      :back="{
-        label: t('synthetics.results.monitors'),
-        to: { name: 'synthetic' },
-      }"
-      class="px-4 border-b border-border-default"
-    >
       <template #title-trail>
         <!-- <OBadge v-if="statusBadge" :variant="statusBadge.variant" size="sm" dot>
           {{ statusBadge.label }}
@@ -72,8 +69,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           @click="refresh"
         />
       </template>
-    </AppPageHeader>
-
     <div class="flex-1 min-h-0 overflow-hidden">
       <MonitorRuns
         ref="runsRef"
@@ -86,10 +81,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         @jump-to-window="onJumpToWindow"
       />
     </div>
-  </div>
+  </OPageLayout>
 
   <!-- ════════════ Run Detail Drawer ════════════ -->
   <ODrawer
+    bleed
     v-model:open="drawerOpen"
     side="right"
     :width="90"
@@ -113,7 +109,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         variant="default"
         size="sm"
         icon="link"
-        class="truncate max-w-[200px]"
+        class="truncate max-w-50"
       >
         {{ drawerUrl }}
       </OBadge>
@@ -134,7 +130,7 @@ import { computed, nextTick, onMounted, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRoute, useRouter } from "vue-router";
 import DateTime from "@/components/DateTime.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import OButton from "@/lib/core/Button/OButton.vue";
 import OBadge from "@/lib/core/Badge/OBadge.vue";
 import ODrawer from "@/lib/overlay/Drawer/ODrawer.vue";
diff --git a/web/src/views/synthetics/MonitorRuns.vue b/web/src/views/synthetics/MonitorRuns.vue
index 7464a63c5f..7ebba1f89b 100644
--- a/web/src/views/synthetics/MonitorRuns.vue
+++ b/web/src/views/synthetics/MonitorRuns.vue
@@ -27,7 +27,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     - Icons in cells (browser logos, location cloud icons, device icons)
     - Icons in filter dropdowns (browser, device, location selects)
 
-  This component is chrome-less — it does NOT render AppPageHeader.
+  This component is chrome-less — it does NOT render OPageHeader.
   The parent (MonitorResults.vue) owns the header. This component is the
   content below it, following the LLMInsightsDashboard pattern.
 -->
@@ -40,7 +40,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <!-- ── Tabs ──────────────────────────────────────────────────────── -->
     <OTabs
       v-model="activeTab"
-      class="shrink-0 px-2 border-b border-border-default"
+      class="shrink-0 px-page-edge border-b border-border-default"
     >
       <OTab name="overview" data-test="monitor-runs-tab-overview">
         {{ t('synthetics.runs.tabOverview') }}
@@ -57,36 +57,36 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           >
             <!-- Status Timeline — gated on runs query -->
             <template v-if="runsLoading || !runsHasLoadedOnce">
-              <div class="px-2">
+              <div class="px-page-edge">
                 <div
-                  class="card-container rounded-lg flex flex-col bg-surface-base border border-border-default overflow-hidden"
+                  class="card-container rounded-default flex flex-col bg-surface-base border border-border-default overflow-hidden"
                 >
                   <div
-                    class="flex items-center gap-2 px-[0.875rem] pt-[0.625rem] pb-[0.5rem]"
+                    class="flex items-center gap-2 px-3.5 pt-2.5 pb-2"
                   >
-                    <SkeletonBox width="100px" height="14px" rounded />
+                    <SkeletonBox width="100px" height="14px" rounded-default />
                     <span class="flex-1" />
-                    <SkeletonBox width="45px" height="12px" rounded />
-                    <SkeletonBox width="50px" height="12px" rounded />
-                    <SkeletonBox width="45px" height="12px" rounded />
+                    <SkeletonBox width="45px" height="12px" rounded-default />
+                    <SkeletonBox width="50px" height="12px" rounded-default />
+                    <SkeletonBox width="45px" height="12px" rounded-default />
                   </div>
                   <div class="border-t border-border-default" />
-                  <div class="flex flex-col gap-1 py-2 px-[0.875rem]">
+                  <div class="flex flex-col gap-1 py-2 px-3.5">
                     <div class="flex items-center gap-1">
                       <div class="w-5 h-5 shrink-0" />
-                      <div class="flex-1 h-[26px] rounded flex gap-0.5 items-stretch">
+                      <div class="flex-1 h-6.5 rounded-default flex gap-0.5 items-stretch">
                         <div
                           v-for="n in 26"
                           :key="n"
-                          class="flex-1 h-full rounded-[2px] bg-border-default opacity-40"
+                          class="flex-1 h-full rounded-default bg-border-default opacity-40"
                         />
                       </div>
                       <div class="w-5 h-5 shrink-0" />
                     </div>
                     <div class="flex justify-between">
-                      <SkeletonBox width="60px" height="10px" rounded />
-                      <SkeletonBox width="80px" height="10px" rounded />
-                      <SkeletonBox width="60px" height="10px" rounded />
+                      <SkeletonBox width="60px" height="10px" rounded-default />
+                      <SkeletonBox width="80px" height="10px" rounded-default />
+                      <SkeletonBox width="60px" height="10px" rounded-default />
                     </div>
                   </div>
                 </div>
@@ -94,17 +94,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </template>
             <!-- Status Timeline — runs query error state -->
             <template v-else-if="runsError">
-              <div class="px-2">
+              <div class="px-page-edge">
                 <div
-                  class="card-container rounded-lg flex flex-col bg-surface-base border border-border-default overflow-hidden"
+                  class="card-container rounded-default flex flex-col bg-surface-base border border-border-default overflow-hidden"
                 >
                   <div
-                    class="flex items-center gap-2 px-[0.875rem] pt-[0.625rem] pb-[0.5rem]"
+                    class="flex items-center gap-2 px-3.5 pt-2.5 pb-2"
                   >
                     <span class="font-bold text-sm text-text-heading">{{ t('synthetics.runs.statusTimeline') }}</span>
                   </div>
                   <div class="border-t border-border-default" />
-                  <div class="flex items-center justify-center py-6 text-[0.75rem] text-status-error-text">
+                  <div class="flex items-center justify-center py-6 text-xs text-status-error-text">
                     <span class="flex items-center gap-1">
                       <OIcon name="error" size="xs" />
                       {{ runsError }}
@@ -114,7 +114,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </div>
             </template>
             <template v-else>
-              <div class="px-2">
+              <div class="px-page-edge">
               <MonitorStatusTimeline
                 :segments="timelineSegments"
                 :fail-count="timelineFailCount"
@@ -128,31 +128,31 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
             <!-- KPI Cards — gated on KPI + last-run queries -->
             <template v-if="kpiLoading || !kpiHasLoadedOnce">
-              <div class="px-2">
-                <div class="grid grid-cols-5 gap-[0.625rem]">
+              <div class="px-page-edge">
+                <div class="grid grid-cols-5 gap-2.5">
                   <div
                     v-for="n in 5"
                     :key="n"
-                    class="card-container rounded-lg flex flex-col px-[0.875rem] pt-[0.625rem] pb-[0.625rem] gap-2 bg-surface-base border border-border-default"
+                    class="card-container rounded-default flex flex-col px-3.5 pt-2.5 pb-2.5 gap-2 bg-surface-base border border-border-default"
                   >
-                    <SkeletonBox width="60%" height="11px" rounded />
-                    <SkeletonBox width="55%" height="22px" rounded />
+                    <SkeletonBox width="60%" height="11px" rounded-default />
+                    <SkeletonBox width="55%" height="22px" rounded-default />
                   </div>
                 </div>
               </div>
             </template>
             <template v-else>
-              <div class="px-2">
-              <div class="grid grid-cols-5 gap-[0.625rem]">
+              <div class="px-page-edge">
+              <div class="grid grid-cols-5 gap-2.5">
                 <div
                   v-for="card in kpiCards"
                   :key="card.key"
-                  class="card-container rounded-lg flex flex-col px-2 pt-[0.625rem] pb-[0.625rem] gap-[0.25rem] bg-surface-base border border-border-default transition-shadow duration-200 hover:shadow-[0_1px_6px_rgba(0,0,0,0.08)]"
+                  class="card-container rounded-default flex flex-col px-2 pt-2.5 pb-2.5 gap-1 bg-surface-base border border-border-default transition-shadow duration-200 hover:shadow-[0_1px_6px_rgba(0,0,0,0.08)]"
                   :data-test="`monitor-runs-kpi-${card.key}`"
                 >
-                  <div class="flex flex-col gap-[0.25rem]">
+                  <div class="flex flex-col gap-1">
                     <div
-                      class="kpi-label text-[0.7rem] font-semibold text-text-muted"
+                      class="kpi-label text-2xs font-semibold text-text-muted"
                     >
                       {{ card.label }}
                       <span v-if="card.unit"> ({{ card.unit }}) </span>
@@ -160,14 +160,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <div class="flex items-baseline gap-[0.2rem]">
                       <!-- Per-card error indicator -->
                       <template v-if="kpiError">
-                        <span class="flex items-center gap-1 text-[0.75rem] text-status-error-text">
+                        <span class="flex items-center gap-1 text-xs text-status-error-text">
                           <OIcon name="error" size="xs" class="shrink-0" />
                           {{ kpiError }}
                         </span>
                       </template>
                       <template v-else>
                         <span
-                          class="text-[1.4rem] font-bold leading-none text-[var(--color-text-primary)]"
+                          class="text-xl font-bold leading-none text-[var(--color-text-heading)]"
                           :class="card.valueClass"
                         >
                           {{ card.value }}
@@ -182,49 +182,49 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
             <!-- Charts — gated on histogram query -->
             <template v-if="histogramLoading || !histogramHasLoadedOnce">
-              <div class="px-2">
+              <div class="px-page-edge">
               <div class="grid grid-cols-2 gap-2">
                 <div
-                  class="card-container rounded-lg flex flex-col bg-surface-base border border-border-default overflow-hidden"
+                  class="card-container rounded-default flex flex-col bg-surface-base border border-border-default overflow-hidden"
                 >
                   <div
-                    class="flex items-center gap-2 px-2 pt-[0.625rem] pb-[0.5rem]"
+                    class="flex items-center gap-2 px-2 pt-2.5 pb-2"
                   >
-                    <SkeletonBox width="110px" height="14px" rounded />
+                    <SkeletonBox width="110px" height="14px" rounded-default />
                     <span class="flex-1" />
-                    <SkeletonBox width="80px" height="20px" rounded />
+                    <SkeletonBox width="80px" height="20px" rounded-default />
                   </div>
                   <div class="border-t border-border-default" />
                   <div class="p-4">
-                    <SkeletonBox width="100%" height="160px" rounded />
+                    <SkeletonBox width="100%" height="160px" rounded-default />
                   </div>
                 </div>
                 <div
-                  class="card-container rounded-lg flex flex-col bg-surface-base border border-border-default overflow-hidden"
+                  class="card-container rounded-default flex flex-col bg-surface-base border border-border-default overflow-hidden"
                 >
                   <div
-                    class="flex items-center gap-2 px-2 pt-[0.625rem] pb-[0.5rem]"
+                    class="flex items-center gap-2 px-2 pt-2.5 pb-2"
                   >
-                    <SkeletonBox width="120px" height="14px" rounded />
+                    <SkeletonBox width="120px" height="14px" rounded-default />
                     <span class="flex-1" />
-                    <SkeletonBox width="90px" height="20px" rounded />
+                    <SkeletonBox width="90px" height="20px" rounded-default />
                   </div>
                   <div class="border-t border-border-default" />
                   <div class="p-4">
-                    <SkeletonBox width="100%" height="160px" rounded />
+                    <SkeletonBox width="100%" height="160px" rounded-default />
                   </div>
                 </div>
               </div>
               </div>
             </template>
             <template v-else>
-              <div class="px-2">
+              <div class="px-page-edge">
               <div class="grid grid-cols-2 gap-2">
                 <div
-                  class="card-container rounded-lg flex flex-col bg-surface-base border border-border-default overflow-hidden"
+                  class="card-container rounded-default flex flex-col bg-surface-base border border-border-default overflow-hidden"
                 >
                   <div
-                    class="flex items-center gap-2 px-2 pt-[0.625rem] pb-[0.5rem]"
+                    class="flex items-center gap-2 px-2 pt-2.5 pb-2"
                   >
                     <span class="font-bold text-sm text-text-heading">
                       {{ t('synthetics.results.responseTime') }}
@@ -242,23 +242,23 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     </span>
                   </div>
                   <div class="border-t border-border-default" />
-                  <div class="min-h-[180px] p-0">
+                  <div class="min-h-45 p-0">
                     <ChartRenderer
                       v-if="!histogramError"
                       :data="{ options: responseChartOption }"
                       height="180px"
                     />
-                    <div v-else class="flex flex-col items-center justify-center h-[180px] gap-1 text-sm text-text-secondary">
+                    <div v-else class="flex flex-col items-center justify-center h-45 gap-1 text-sm text-text-secondary">
                       <OIcon name="error_outline" size="sm" class="text-status-error-text" />
                       <span>{{ histogramError }}</span>
                     </div>
                   </div>
                 </div>
                 <div
-                  class="card-container rounded-lg flex flex-col bg-surface-base border border-border-default overflow-hidden"
+                  class="card-container rounded-default flex flex-col bg-surface-base border border-border-default overflow-hidden"
                 >
                   <div
-                    class="flex items-center gap-2 px-2 pt-[0.625rem] pb-[0.5rem]"
+                    class="flex items-center gap-2 px-2 pt-2.5 pb-2"
                   >
                     <span class="font-bold text-sm text-text-heading">
                       {{ t('synthetics.runs.errorsOverTime') }}
@@ -276,13 +276,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     </span>
                   </div>
                   <div class="border-t border-border-default" />
-                  <div class="min-h-[180px] p-0">
+                  <div class="min-h-45 p-0">
                     <ChartRenderer
                       v-if="!histogramError"
                       :data="{ options: errorChartOption }"
                       height="180px"
                     />
-                    <div v-else class="flex flex-col items-center justify-center h-[180px] gap-1 text-sm text-text-secondary">
+                    <div v-else class="flex flex-col items-center justify-center h-45 gap-1 text-sm text-text-secondary">
                       <OIcon name="error_outline" size="sm" class="text-status-error-text" />
                       <span>{{ histogramError }}</span>
                     </div>
@@ -294,40 +294,40 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
             <!-- Breakdown Cards — gated on runs query -->
             <template v-if="runsLoading || !runsHasLoadedOnce">
-              <div class="px-2">
+              <div class="px-page-edge">
               <div class="grid grid-cols-3 gap-2">
                 <div
                   v-for="n in 3"
                   :key="n"
-                  class="card-container rounded-lg flex flex-col bg-surface-base border border-border-default overflow-hidden"
+                  class="card-container rounded-default flex flex-col bg-surface-base border border-border-default overflow-hidden"
                 >
                   <div
-                    class="flex items-center gap-2 px-2 pt-[0.625rem] pb-[0.5rem]"
+                    class="flex items-center gap-2 px-2 pt-2.5 pb-2"
                   >
                     <SkeletonBox
                       width="16px"
                       height="16px"
                       :custom-radius="'4px'"
                     />
-                    <SkeletonBox width="110px" height="14px" rounded />
+                    <SkeletonBox width="110px" height="14px" rounded-default />
                   </div>
                   <div class="border-t border-border-default" />
-                  <div class="px-2 py-[0.5rem] flex flex-col">
+                  <div class="px-2 py-2 flex flex-col">
                     <div
                       v-for="row in 3"
                       :key="row"
-                      class="flex items-center gap-3 py-[9px] border-b border-border-default last:border-b-0"
+                      class="flex items-center gap-3 py-2.25 border-b border-border-default last:border-b-0"
                     >
                       <SkeletonBox
                         width="16px"
                         height="16px"
                         :custom-radius="'4px'"
                       />
-                      <SkeletonBox width="70px" height="12px" rounded />
+                      <SkeletonBox width="70px" height="12px" rounded-default />
                       <div
                         class="flex-1 h-1.5 rounded-full bg-border-default opacity-30"
                       />
-                      <SkeletonBox width="36px" height="12px" rounded />
+                      <SkeletonBox width="36px" height="12px" rounded-default />
                     </div>
                   </div>
                 </div>
@@ -336,22 +336,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </template>
             <!-- Breakdown Cards — runs query error state -->
             <template v-else-if="runsError">
-              <div class="px-2">
+              <div class="px-page-edge">
               <div class="grid grid-cols-3 gap-2">
                 <div
                   v-for="dim in ['Browser','Location','Device']"
                   :key="dim"
-                  class="card-container rounded-lg flex flex-col bg-surface-base border border-border-default overflow-hidden"
+                  class="card-container rounded-default flex flex-col bg-surface-base border border-border-default overflow-hidden"
                 >
                   <div
-                    class="flex items-center gap-2 px-2 pt-[0.625rem] pb-[0.5rem]"
+                    class="flex items-center gap-2 px-2 pt-2.5 pb-2"
                   >
                     <span class="font-bold text-sm text-text-heading">
                       {{ dim === 'Browser' ? t('synthetics.runs.passRateByBrowser') : dim === 'Location' ? t('synthetics.runs.passRateByLocation') : t('synthetics.runs.passRateByDevice') }}
                     </span>
                   </div>
                   <div class="border-t border-border-default" />
-                  <div class="flex items-center justify-center py-8 text-[0.75rem] text-status-error-text">
+                  <div class="flex items-center justify-center py-8 text-xs text-status-error-text">
                     <span class="flex items-center gap-1">
                       <OIcon name="error" size="xs" />
                       {{ runsError }}
@@ -362,13 +362,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </div>
             </template>
             <template v-else>
-              <div class="px-2">
+              <div class="px-page-edge">
               <div class="grid grid-cols-3 gap-2">
                 <div
-                  class="card-container rounded-lg flex flex-col bg-surface-base border border-border-default overflow-hidden"
+                  class="card-container rounded-default flex flex-col bg-surface-base border border-border-default overflow-hidden"
                 >
                   <div
-                    class="flex items-center gap-2 px-2 pt-[0.625rem] pb-[0.5rem]"
+                    class="flex items-center gap-2 px-2 pt-2.5 pb-2"
                   >
                     <OIcon name="language" size="sm" class="text-primary-700" />
                     <span class="font-bold text-sm text-text-heading">
@@ -376,11 +376,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     </span>
                   </div>
                   <div class="border-t border-border-default" />
-                  <div class="px-2 py-[0.5rem]">
+                  <div class="px-2 py-2">
                     <div
                       v-for="b in browserBreakdown"
                       :key="b.name"
-                      class="flex items-center gap-3 py-[9px] border-b border-border-default last:border-b-0"
+                      class="flex items-center gap-3 py-2.25 border-b border-border-default last:border-b-0"
                     >
                       <OIcon
                         :name="b.icon"
@@ -388,12 +388,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         class="text-text-secondary flex-none"
                       />
                       <span
-                        class="w-20 flex-none font-semibold text-xs text-text-heading"
+                        class="w-20 flex-none font-semibold text-xs text-text-body"
                       >
                         {{ b.name }}
                       </span>
                       <div
-                        class="flex-1 h-1.5 rounded-full bg-text-disabled/25! overflow-hidden min-w-[40px]"
+                        class="flex-1 h-1.5 rounded-full bg-text-disabled/25! overflow-hidden min-w-10"
                       >
                         <!-- :style for dynamic bar width + computed color — inline required for per-breakdown values -->
                         <div
@@ -411,10 +411,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </div>
                 </div>
                 <div
-                  class="card-container rounded-lg flex flex-col bg-surface-base border border-border-default overflow-hidden"
+                  class="card-container rounded-default flex flex-col bg-surface-base border border-border-default overflow-hidden"
                 >
                   <div
-                    class="flex items-center gap-2 px-2 pt-[0.625rem] pb-[0.5rem]"
+                    class="flex items-center gap-2 px-2 pt-2.5 pb-2"
                   >
                     <OIcon
                       name="location-on"
@@ -426,11 +426,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     </span>
                   </div>
                   <div class="border-t border-border-default" />
-                  <div class="px-2 py-[0.5rem]">
+                  <div class="px-2 py-2">
                     <div
                       v-for="l in locationBreakdown"
                       :key="l.name"
-                      class="flex items-center gap-3 py-[9px] border-b border-border-default last:border-b-0"
+                      class="flex items-center gap-3 py-2.25 border-b border-border-default last:border-b-0"
                     >
                       <OIcon
                         :name="l.icon"
@@ -438,12 +438,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         class="text-text-secondary flex-none"
                       />
                       <span
-                        class="w-[110px] flex-none font-semibold text-xs text-text-heading"
+                        class="w-27.5 flex-none font-semibold text-xs text-text-body"
                       >
                         {{ l.name }}
                       </span>
                       <div
-                        class="flex-1 h-1.5 rounded-full bg-text-disabled/25! overflow-hidden min-w-[40px]"
+                        class="flex-1 h-1.5 rounded-full bg-text-disabled/25! overflow-hidden min-w-10"
                       >
                         <div
                           class="h-full rounded-full"
@@ -460,10 +460,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </div>
                 </div>
                 <div
-                  class="card-container rounded-lg flex flex-col bg-surface-base border border-border-default overflow-hidden"
+                  class="card-container rounded-default flex flex-col bg-surface-base border border-border-default overflow-hidden"
                 >
                   <div
-                    class="flex items-center gap-2 px-2 pt-[0.625rem] pb-[0.5rem]"
+                    class="flex items-center gap-2 px-2 pt-2.5 pb-2"
                   >
                     <OIcon name="devices" size="sm" class="text-primary-700" />
                     <span class="font-bold text-sm text-text-heading">
@@ -471,11 +471,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     </span>
                   </div>
                   <div class="border-t border-border-default" />
-                  <div class="px-2 py-[0.5rem]">
+                  <div class="px-2 py-2">
                     <div
                       v-for="d in deviceBreakdown"
                       :key="d.name"
-                      class="flex items-center gap-3 py-[9px] border-b border-border-default last:border-b-0"
+                      class="flex items-center gap-3 py-2.25 border-b border-border-default last:border-b-0"
                     >
                       <OIcon
                         :name="d.icon"
@@ -483,12 +483,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         class="text-text-secondary flex-none"
                       />
                       <span
-                        class="w-20 flex-none font-semibold text-xs text-text-heading"
+                        class="w-20 flex-none font-semibold text-xs text-text-body"
                       >
                         {{ d.name }}
                       </span>
                       <div
-                        class="flex-1 h-1.5 rounded-full bg-text-disabled/25! overflow-hidden min-w-[40px]"
+                        class="flex-1 h-1.5 rounded-full bg-text-disabled/25! overflow-hidden min-w-10"
                       >
                         <div
                           class="h-full rounded-full"
@@ -559,21 +559,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   v-model="failedStepFilter"
                   :options="failedStepOptions"
                   size="sm"
-                  class="w-[160px]"
+                  class="w-40"
                   data-test="monitor-runs-filter-step"
                 />
                 <OInput
                   v-model="locatorFilter"
                   size="sm"
                   :placeholder="t('synthetics.runs.locatorPlaceholder')"
-                  class="w-[170px]"
+                  class="w-42.5"
                   data-test="monitor-runs-filter-locator"
                 />
                 <OSelect
                   v-model="actionFilter"
                   :options="actionOptions"
                   size="sm"
-                  class="w-[130px]"
+                  class="w-32.5"
                   data-test="monitor-runs-filter-action"
                 />
               </template>
@@ -655,7 +655,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </template>
                 <template #cell-location="{ row }">
                   <span
-                    class="inline-flex items-center gap-1 text-sm text-text-primary"
+                    class="inline-flex items-center gap-1 text-sm text-text-body"
                   >
                     <OIcon
                       :name="locationIcon((row as VisibleRun).location)"
@@ -666,7 +666,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </template>
                 <template #cell-browser="{ row }">
                   <span
-                    class="inline-flex items-center gap-1 text-sm text-text-primary"
+                    class="inline-flex items-center gap-1 text-sm text-text-body"
                   >
                     <OIcon
                       :name="browserIcon((row as VisibleRun).browser)"
@@ -677,7 +677,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </template>
                 <template #cell-device="{ row }">
                   <span
-                    class="inline-flex items-center gap-1 text-sm text-text-primary"
+                    class="inline-flex items-center gap-1 text-sm text-text-body"
                   >
                     <OIcon
                       :name="deviceIconName((row as VisibleRun).device)"
@@ -697,21 +697,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <OBadge
                       variant="error-outline"
                       size="sm"
-                      class="truncate max-w-[200px]"
+                      class="truncate max-w-50"
                     >
                       {{ (row as VisibleRun).errorSnippet }}
                     </OBadge>
                   </span>
                 </template>
                 <template #cell-trigger_type="{ row }">
-                  <span class="text-sm text-text-primary">
+                  <span class="text-sm text-text-body">
                     {{ (row as VisibleRun).triggerType }}
                   </span>
                 </template>
 
                 <!-- Empty state: smart — differentiates "never run" vs "no runs in window" -->
                 <template #empty>
-                  <div v-if="kpiHasLoadedOnce" class="px-2">
+                  <div v-if="kpiHasLoadedOnce" class="px-page-edge">
                     <!-- Monitor has runs elsewhere — guide to last run + optionally clear filters -->
                     <OEmptyState
                       v-if="synthetics.kpi.value.totalRuns > 0"
@@ -776,22 +776,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <!-- Loading skeleton -->
             <template v-if="stepsLoading || !stepsHasLoadedOnce">
               <div class="grid grid-cols-2 gap-2">
-                <div class="card-container rounded-lg flex flex-col bg-surface-base border border-border-default overflow-hidden">
-                  <div class="flex items-center gap-2 px-2 pt-[0.625rem] pb-[0.5rem]">
-                    <SkeletonBox width="100px" height="14px" rounded />
+                <div class="card-container rounded-default flex flex-col bg-surface-base border border-border-default overflow-hidden">
+                  <div class="flex items-center gap-2 px-2 pt-2.5 pb-2">
+                    <SkeletonBox width="100px" height="14px" rounded-default />
                   </div>
                   <div class="border-t border-border-default" />
-                  <div class="p-4"><SkeletonBox width="100%" height="160px" rounded /></div>
+                  <div class="p-4"><SkeletonBox width="100%" height="160px" rounded-default /></div>
                 </div>
-                <div class="card-container rounded-lg flex flex-col bg-surface-base border border-border-default overflow-hidden">
-                  <div class="flex items-center gap-2 px-2 pt-[0.625rem] pb-[0.5rem]">
-                    <SkeletonBox width="100px" height="14px" rounded />
+                <div class="card-container rounded-default flex flex-col bg-surface-base border border-border-default overflow-hidden">
+                  <div class="flex items-center gap-2 px-2 pt-2.5 pb-2">
+                    <SkeletonBox width="100px" height="14px" rounded-default />
                   </div>
                   <div class="border-t border-border-default" />
-                  <div class="p-4"><SkeletonBox width="100%" height="160px" rounded /></div>
+                  <div class="p-4"><SkeletonBox width="100%" height="160px" rounded-default /></div>
                 </div>
               </div>
-              <div v-for="n in 5" :key="n" class="card-container rounded-lg overflow-hidden">
+              <div v-for="n in 5" :key="n" class="card-container rounded-default overflow-hidden">
                 <div class="h-10 bg-[var(--color-border-default)] opacity-20" />
               </div>
             </template>
@@ -849,7 +849,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       <span class="font-mono tabular-nums font-bold text-xs" :style="{ color: row.failColor }">
                         {{ row.failRatePct }}%&ensp;<span class="font-normal text-[var(--color-text-muted)]">{{ row.failCount }}</span>
                       </span>
-                      <div class="h-[5px] rounded-full bg-[var(--color-text-disabled)]/25! overflow-hidden">
+                      <div class="h-1.25 rounded-full bg-[var(--color-text-disabled)]/25! overflow-hidden">
                         <div class="h-full rounded-full" :style="{ width: row.failRateBarPct, background: row.failBarColor }" />
                       </div>
                     </div>
@@ -866,7 +866,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   <template #cell-avgDuration="{ row }">
                     <div class="flex flex-col gap-1">
                       <span class="font-mono tabular-nums text-xs text-[var(--color-text-body)]">{{ row.avgDuration }}</span>
-                      <div class="h-[5px] rounded-full bg-[var(--color-text-disabled)]/25! overflow-hidden">
+                      <div class="h-1.25 rounded-full bg-[var(--color-text-disabled)]/25! overflow-hidden">
                         <div class="h-full rounded-full bg-[var(--color-primary-400)]" :style="{ width: row.durationBarPct }" />
                       </div>
                     </div>
@@ -876,7 +876,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   <template #cell-p95Duration="{ row }">
                     <div class="flex flex-col gap-1">
                       <span class="font-mono tabular-nums text-xs text-[var(--color-text-body)]">{{ row.p95Duration }}</span>
-                      <div class="h-[5px] rounded-full bg-[var(--color-text-disabled)]/25! overflow-hidden">
+                      <div class="h-1.25 rounded-full bg-[var(--color-text-disabled)]/25! overflow-hidden">
                         <div class="h-full rounded-full bg-[var(--color-primary-400)]" :style="{ width: row.p95DurationBarPct }" />
                       </div>
                     </div>
@@ -886,7 +886,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   <template #cell-maxDuration="{ row }">
                     <div class="flex flex-col gap-1">
                       <span class="font-mono tabular-nums text-xs text-[var(--color-text-body)]">{{ row.maxDuration }}</span>
-                      <div class="h-[5px] rounded-full bg-[var(--color-text-disabled)]/25! overflow-hidden">
+                      <div class="h-1.25 rounded-full bg-[var(--color-text-disabled)]/25! overflow-hidden">
                         <div class="h-full rounded-full bg-[var(--color-primary-400)]" :style="{ width: row.maxDurationBarPct }" />
                       </div>
                     </div>
@@ -908,7 +908,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- ════════════ ERRORS ════════════ -->
         <OTabPanel name="errors">
           <div
-            class="mx-auto px-2 py-2 pb-[1.75rem] flex flex-col gap-2"
+            class="mx-auto px-2 py-2 pb-7 flex flex-col gap-2"
           >
             <div class="flex items-center gap-2.5">
               <span class="font-bold text-sm text-text-heading">
@@ -921,7 +921,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
             <OCard class="p-0">
               <div
-                class="grid grid-cols-[1fr_100px_160px_32px] gap-2.5 px-4 py-2 bg-surface-subtle border-b border-border-default text-[11px] font-semibold text-text-secondary uppercase tracking-wide"
+                class="grid grid-cols-[1fr_100px_160px_32px] gap-2.5 px-4 py-2 bg-surface-subtle border-b border-border-default text-2xs font-semibold text-text-secondary uppercase tracking-wide"
               >
                 <span>{{ t('synthetics.runs.errorPattern') }}</span>
                 <span>{{ t('synthetics.runs.count') }}</span>
@@ -931,12 +931,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <div
                 v-for="e in errorGroups"
                 :key="e.pattern"
-                class="grid grid-cols-[1fr_100px_160px_32px] gap-2.5 px-4 py-[11px] border-b border-border-default items-center cursor-pointer hover:bg-surface-subtle"
+                class="grid grid-cols-[1fr_100px_160px_32px] gap-2.5 px-4 py-2.75 border-b border-border-default items-center cursor-pointer hover:bg-surface-subtle"
                 data-test="monitor-runs-error-row"
                 @click="filterByErrorPattern(e.pattern)"
               >
                 <span
-                  class="font-mono tabular-nums text-xs text-text-heading truncate"
+                  class="font-mono tabular-nums text-xs text-text-body truncate"
                 >
                   {{ e.pattern }}
                 </span>
@@ -1911,7 +1911,7 @@ function cssVar(name: string, fallback: string): string {
 
 const responseChartOption = computed(() => {
   const lineColor = cssVar("--color-primary-600", "#3b82f6");
-  const axisColor = cssVar("--color-text-caption", "#6c707e");
+  const axisColor = cssVar("--color-text-secondary", "#6c707e");
   const splitColor = cssVar("--color-border-default", "#e2e8f0");
   const p95Color = cssVar("--color-status-warning-text", "#f59e0b");
 
@@ -1981,7 +1981,7 @@ const responseChartOption = computed(() => {
 });
 
 const errorChartOption = computed(() => {
-  const axisColor = cssVar("--color-text-caption", "#6c707e");
+  const axisColor = cssVar("--color-text-secondary", "#6c707e");
   const splitColor = cssVar("--color-border-default", "#e2e8f0");
   const errorColor = cssVar("--color-status-error-text", "#dc2626");
 
diff --git a/web/src/views/synthetics/MonitorStatusTimeline.spec.ts b/web/src/views/synthetics/MonitorStatusTimeline.spec.ts
index 5ee0a700b0..b632994b21 100644
--- a/web/src/views/synthetics/MonitorStatusTimeline.spec.ts
+++ b/web/src/views/synthetics/MonitorStatusTimeline.spec.ts
@@ -65,7 +65,7 @@ function makeSegment(
   return {
     runId: "run-001",
     status: "all-pass",
-    color: "bg-[var(--o2-status-success)]",
+    color: "bg-[var(--color-badge-success-solid-bg)]",
     title: "Passed",
     timestampMs: 1_700_000_000_000,
     executions: [makePassExec()],
@@ -125,9 +125,9 @@ describe("MonitorStatusTimeline", () => {
 
     it("should render timeline bars for each segment", () => {
       const segments = [
-        makeSegment({ runId: "run-001", color: "bg-[var(--o2-status-success)]" }),
-        makeSegment({ runId: "run-002", color: "bg-[var(--o2-status-danger)]" }),
-        makeSegment({ runId: "run-003", color: "bg-[var(--o2-status-warning)]" }),
+        makeSegment({ runId: "run-001", color: "bg-[var(--color-badge-success-solid-bg)]" }),
+        makeSegment({ runId: "run-002", color: "bg-[var(--color-badge-error-solid-bg)]" }),
+        makeSegment({ runId: "run-003", color: "bg-[var(--color-badge-orange-solid-bg)]" }),
       ];
       wrapper = makeWrapper({ segments });
 
diff --git a/web/src/views/synthetics/MonitorStatusTimeline.vue b/web/src/views/synthetics/MonitorStatusTimeline.vue
index 7ac7ddcc2a..1398f9aa76 100644
--- a/web/src/views/synthetics/MonitorStatusTimeline.vue
+++ b/web/src/views/synthetics/MonitorStatusTimeline.vue
@@ -22,11 +22,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
   <div
-    class="card-container rounded-lg flex flex-col bg-surface-base border border-border-default overflow-hidden"
+    class="card-container rounded-default flex flex-col bg-surface-base border border-border-default overflow-hidden"
     data-test="monitor-status-timeline"
   >
     <div
-      class="flex items-center gap-2 px-[0.875rem] pt-[0.625rem] pb-[0.5rem]"
+      class="flex items-center gap-2 px-3.5 pt-2.5 pb-2"
     >
       <span class="font-bold text-xs text-text-heading"> {{ t('synthetics.timeline.title') }} </span>
       <span class="flex-1" />
@@ -56,7 +56,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </span>
     </div>
     <div class="border-t border-border-default" />
-    <div class="flex flex-col gap-1 py-2 px-[0.875rem]">
+    <div class="flex flex-col gap-1 py-2 px-3.5">
       <div class="flex items-center gap-1">
         <OButton
           variant="ghost"
@@ -70,7 +70,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </OButton>
         <div
           ref="scrollRef"
-          class="flex-1 overflow-hidden flex rounded h-[26px] gap-0.5"
+          class="flex-1 overflow-hidden flex rounded-default h-6.5 gap-0.5"
           @scroll="onScroll"
         >
           <div
@@ -82,9 +82,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           >
             <OTooltip side="top" :delay="0" :max-width="'auto'">
               <template #content>
-                <div class="py-0.5 min-w-[200px]">
+                <div class="py-0.5 min-w-50">
                   <div
-                    class="px-1 font-semibold text-text-heading mb-1.5 text-xs flex items-center gap-1.5 flex-wrap border-b pb-1"
+                    class="px-1 font-semibold text-text-secondary mb-1.5 text-xs flex items-center gap-1.5 flex-wrap border-b pb-1"
                   >
                     <span
                       class="w-2 h-2 rounded-full shrink-0 bg-[var(--color-badge-success-solid-bg)]"
@@ -162,7 +162,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </OButton>
       </div>
       <div
-        class="flex justify-between text-[10.5px] font-mono tabular-nums text-text-secondary"
+        class="flex justify-between text-3xs font-mono tabular-nums text-text-secondary"
       >
         <span>{{ endLabel }}</span>
         <span>{{ rangeLabel }}</span>
diff --git a/web/src/views/synthetics/RunDetail.vue b/web/src/views/synthetics/RunDetail.vue
index a6bd393c79..ec92a9ae8a 100644
--- a/web/src/views/synthetics/RunDetail.vue
+++ b/web/src/views/synthetics/RunDetail.vue
@@ -35,16 +35,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     :drawer-mode="drawerMode"
     @update-status="emit('update-status', $event)"
   />
-  <div
+  <OPageLayout
     v-else
-    class="run-detail flex flex-col h-full min-h-0"
+    class="run-detail"
     data-test="synthetics-run-detail"
+    bleed
   >
     <!-- ════════ HEADER ════════ -->
-    <!-- ── Route mode header ── -->
-    <AppPageHeader
-      v-if="!drawerMode"
-      class="px-2!"
+    <template #header v-if="!drawerMode">
+    <OPageHeader
+      class=""
       :subtitle="currentRun.timestamp"
       :back="{
         label: t('synthetics.results.monitors'),
@@ -69,7 +69,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           variant="default"
           size="sm"
           icon="link"
-          class="truncate max-w-[200px]"
+          class="truncate max-w-50"
           data-test="synthetics-run-detail-url-badge"
         >
           {{ currentRun.url }}
@@ -109,12 +109,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           {{ t('synthetics.journey.reRun') }}
         </OButton>
       </template>
-    </AppPageHeader>
+    </OPageHeader>
+    </template>
 
     <!-- ════════ SUB TABS ════════ -->
     <OTabs
       v-model="activeTab"
-      class="shrink-0 px-2 border-b border-border-default"
+      class="shrink-0 px-page-edge border-b border-border-default"
     >
       <OTab name="summary" data-test="synthetics-run-detail-tab-summary">
         <span class="flex items-center gap-1.5">
@@ -147,18 +148,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- ════════════ SUMMARY ════════════ -->
         <OTabPanel name="summary" data-test="synthetics-run-detail-summary-tab">
           <div
-            class="py-[0.875rem] pb-[1.75rem] flex flex-col"
+            class="py-3.5 pb-7 flex flex-col"
           >
             <!-- Info chips skeleton -->
             <template v-if="loading">
               <div
-                class="grid grid-cols-5 gap-[0.625rem] px-2"
+                class="grid grid-cols-5 gap-2.5 px-2"
                 data-test="synthetics-run-detail-info-skeleton"
               >
                 <div
                   v-for="i in 5"
                   :key="i"
-                  class="card-container rounded-lg flex flex-row items-center px-[0.875rem] py-[0.625rem] gap-1.5 bg-surface-base border border-border-default"
+                  class="card-container rounded-default flex flex-row items-center px-3.5 py-2.5 gap-1.5 bg-surface-base border border-border-default"
                 >
                   <OSkeleton type="circle" class="h-4 w-4 shrink-0" />
                   <OSkeleton type="text" class="h-4 w-20" />
@@ -168,13 +169,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <!-- Info chips -->
             <template v-else>
               <div
-                class="grid grid-cols-5 gap-[0.625rem] px-2"
+                class="grid grid-cols-5 gap-2.5 px-2"
                 data-test="synthetics-run-detail-info-bar"
               >
                 <div
                   v-for="chip in infoChips"
                   :key="chip.label"
-                  class="card-container rounded-lg flex flex-row items-center px-[0.875rem] py-[0.625rem] gap-1.5 bg-surface-base border border-border-default"
+                  class="card-container rounded-default flex flex-row items-center px-3.5 py-2.5 gap-1.5 bg-surface-base border border-border-default"
                 >
                   <OIcon
                     v-if="chip.icon"
@@ -204,9 +205,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   <div
                     v-for="i in 4"
                     :key="i"
-                    class="flex items-center gap-2 rounded border border-border-default p-2"
+                    class="flex items-center gap-2 rounded-default border border-border-default p-2"
                   >
-                    <OSkeleton type="rect" class="h-12 w-18 shrink-0 rounded" />
+                    <OSkeleton type="rect" class="h-12 w-18 shrink-0 rounded-default" />
                     <OSkeleton type="circle" class="h-6 w-6 shrink-0" />
                     <OSkeleton type="text" class="h-4 flex-1" />
                     <OSkeleton type="text" class="h-4 w-16 shrink-0" />
@@ -217,7 +218,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <!-- Lambda execution error (no steps) -->
             <div
               v-else-if="isErrorRun"
-              class="bg-[var(--color-badge-error-soft-bg)] border border-badge-error-ol-border/30 rounded-lg overflow-hidden m-2"
+              class="bg-[var(--color-badge-error-soft-bg)] border border-badge-error-ol-border/30 rounded-default overflow-hidden m-2"
               role="alert"
               data-test="synthetics-run-detail-steps-error-banner"
             >
@@ -229,7 +230,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 />
                 <div class="flex-1 min-w-0">
                   <div class="flex items-center gap-2 flex-wrap">
-                    <span class="text-[13.5px] font-bold text-status-error-text">
+                    <span class="text-sm font-bold text-status-error-text">
                       {{ currentRun.errorType }}
                     </span>
                   </div>
@@ -249,13 +250,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         :class="{ 'rotate-180': stackOpen }"
                       />
                     </template>
-                    <span class="text-[11.5px] font-semibold text-status-error-text">
+                    <span class="text-2xs font-semibold text-status-error-text">
                       {{ t('synthetics.runDetail.viewFullError') }}
                     </span>
                   </OButton>
                   <pre
                     v-if="stackOpen && currentRun.errorStack"
-                    class="mt-2 text-[11px] leading-[1.6] text-text-body bg-code-bg rounded-md p-[10px_12px] overflow-auto whitespace-pre-wrap font-mono"
+                    class="mt-2 text-2xs leading-[1.6] text-text-body bg-code-bg rounded-default p-[10px_12px] overflow-auto whitespace-pre-wrap font-mono"
                     data-test="synthetics-run-detail-error-stack"
                   >{{ currentRun.errorStack }}</pre>
                 </div>
@@ -279,13 +280,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     >{{ t('synthetics.runDetail.sessionReplay') }}</span
                   >
                   <span class="flex-1" />
-                  <span class="font-mono text-[11px] text-text-secondary">
+                  <span class="font-mono text-2xs text-text-secondary">
                     {{ t('synthetics.runDetail.stepOf', { selected: selectedStep.id, total: steps.length }) }}
                   </span>
                 </OCardSection>
                 <OSeparator />
 
-                <div class="h-[380px] flex flex-col">
+                <div class="h-95 flex flex-col">
                   <div class="flex-1 min-h-0">
                     <VideoPlayer
                       :events="[]"
@@ -329,7 +330,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         v-else
                         name="image"
                         size="xs"
-                        class="text-text-caption"
+                        class="text-text-secondary"
                       />
                     </template>
 
@@ -337,7 +338,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <template #expansion="{ row }">
                       <div class="flex gap-4 p-3">
                         <div class="w-[40%] shrink-0">
-                          <div class="rounded border border-border-default overflow-hidden">
+                          <div class="rounded-default border border-border-default overflow-hidden">
                             <div
                               class="aspect-[16/10] flex items-center justify-center overflow-hidden"
                               :class="row.status === 'fail' ? 'bg-status-error-bg' : 'bg-surface-subtle'"
@@ -360,15 +361,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                                   />
                                 </OButton>
                                 <div
-                                  class="absolute top-2 right-2 flex items-center justify-center w-7 h-7 rounded-md bg-surface-base/80 opacity-0 group-hover:opacity-100 transition-opacity shadow-sm pointer-events-none"
+                                  class="absolute top-2 right-2 flex items-center justify-center w-7 h-7 rounded-default bg-surface-base/80 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"
                                   aria-hidden="true"
                                 >
-                                  <OIcon name="fullscreen" size="sm" class="text-text-heading" />
+                                  <OIcon name="fullscreen" size="sm" class="text-text-body" />
                                 </div>
                               </div>
                               <template v-else>
-                                <OIcon name="image" :class="row.status === 'fail' ? 'text-status-error-text' : 'text-text-caption'" size="lg" />
-                                <span class="text-xs font-semibold" :class="row.status === 'fail' ? 'text-status-error-text' : 'text-text-caption'">
+                                <OIcon name="image" :class="row.status === 'fail' ? 'text-status-error-text' : 'text-text-secondary'" size="lg" />
+                                <span class="text-xs font-semibold" :class="row.status === 'fail' ? 'text-status-error-text' : 'text-text-secondary'">
                                   {{ row.status === 'fail' ? t('synthetics.runDetail.failureScreenshot') : t('synthetics.runDetail.screenshotPlaceholder') }}
                                 </span>
                               </template>
@@ -390,7 +391,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
                           <div
                             v-if="row.status === 'fail' && row.error"
-                            class="rounded-lg border border-badge-error-ol-border/30 overflow-hidden"
+                            class="rounded-default border border-badge-error-ol-border/30 overflow-hidden"
                             :data-test="`synthetics-run-detail-step-error-card-${row.id}`"
                           >
                             <div class="flex items-center gap-2 px-3 py-2 bg-[var(--color-badge-error-soft-bg)]">
@@ -399,8 +400,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                             </div>
                             <div class="px-3 py-3">
                               <pre
-                                class="text-[12.5px] text-text-body m-0 whitespace-pre-wrap font-mono leading-relaxed"
-                                :class="{ 'max-h-[96px] overflow-hidden': !expandedStepErrors.has(row.id) && (row.error?.length ?? 0) > 200 }"
+                                class="text-xs text-text-body m-0 whitespace-pre-wrap font-mono leading-relaxed"
+                                :class="{ 'max-h-24 overflow-hidden': !expandedStepErrors.has(row.id) && (row.error?.length ?? 0) > 200 }"
                               >{{ row.error }}</pre>
                               <div class="flex items-center gap-2 mt-1.5">
                                 <OButton
@@ -489,7 +490,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </OTabPanel>
       </OTabPanels>
     </div>
-  </div>
+  </OPageLayout>
 
   <!-- ════════════ Screenshot Lightbox ════════════ -->
   <ODialog
@@ -527,7 +528,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       v-if="errorStep"
       class="flex flex-col h-full overflow-y-auto p-6"
     >
-      <div class="rounded-lg border border-badge-error-ol-border/30 overflow-hidden">
+      <div class="rounded-default border border-badge-error-ol-border/30 overflow-hidden">
         <div
           class="flex items-center gap-2 px-4 py-2.5 bg-[var(--color-badge-error-soft-bg)]"
         >
@@ -574,7 +575,8 @@ import OEmptyState from "@/lib/core/EmptyState/OEmptyState.vue";
 import OProgressBar from "@/lib/data/ProgressBar/OProgressBar.vue";
 import ODialog from "@/lib/overlay/Dialog/ODialog.vue";
 import VideoPlayer from "@/components/rum/VideoPlayer.vue";
-import AppPageHeader from "@/components/common/AppPageHeader.vue";
+import OPageHeader from "@/lib/core/PageHeader/OPageHeader.vue";
+import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import JourneySteps from "@/components/synthetics/journey/JourneySteps.vue";
 import type { StepDotState } from "@/components/synthetics/journey/JourneySteps.vue";
 import useSyntheticResults from "@/composables/useSyntheticResults";